/* The game's title painting and gold wordmark remain the visual authority.
   The lockup and its thread share one entrance; ambient depth stays in the forest. */
.title-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  isolation: isolate;
  overflow: hidden;
  background: #0b1610;
  color: #f3e7c6;
  --u: 1px;
  --gold: #c9a14a;
  --gold-hi: #f2d98a;
  --cream: #f3e7c6;
  font-family: "IBM Plex Sans Thai", system-ui, sans-serif;
}
.tp-pane { position: absolute; inset: -3%; transform-origin: 50% 42%; }
.tp-layer { position: absolute; inset: 0; }
.tp-far { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.tp-near { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; filter: brightness(.82) saturate(1.12); }
.tp-rays {
  position: absolute;
  inset: 0;
  background: url("media/title/title_rays.webp") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: .65;
}
.tp-mist {
  position: absolute;
  left: 0;
  width: 200%;
  background: url("media/title/title_mist.webp") 0 0 / 50% 100% repeat-x;
  animation: tp-drift 180s linear infinite;
}
.tp-mist-a { top: 52%; height: 24%; opacity: .58; }
.tp-mist-b { top: 79%; height: 24%; background-position: 30% 0; opacity: .35; animation-duration: 140s; animation-direction: reverse; }
@keyframes tp-drift { to { transform: translate3d(-50%, 0, 0); } }
.tp-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(72% 58% at 22% 88%, rgba(6,15,10,.82), rgba(6,15,10,.6) 38%, rgba(6,15,10,0)),
    radial-gradient(95% 78% at 17% 104%, rgba(6,15,10,.94), rgba(6,15,10,.74) 30%, rgba(6,15,10,.28) 55%, rgba(6,15,10,0) 72%),
    linear-gradient(180deg, rgba(6,14,10,.42), rgba(6,14,10,0) 20%),
    radial-gradient(130% 115% at 52% 42%, rgba(0,0,0,0) 58%, rgba(4,10,7,.55));
}
.tp-motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* The thread is complete from its first visible frame. */
.tp-thread { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tp-thread path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tp-thread-glow { stroke: #ffd877; stroke-width: calc(var(--u) * 9); opacity: .13; }
.tp-thread-line { stroke: #ffe9ad; stroke-width: calc(var(--u) * 2.3); }
.tp-lockup {
  position: absolute;
  left: calc(var(--u) * 120);
  bottom: calc(var(--u) * 58);
  width: max-content;
  max-width: calc(var(--u) * 900);
}
.tp-enter .tp-lockup, .tp-enter .tp-thread { animation: tp-fade 1s ease-out both; }
@keyframes tp-fade { from { opacity: 0; } to { opacity: 1; } }
.tp-title {
  margin: 0;
  display: flex;
  max-width: none;
  font-family: "Trirong", "IBM Plex Sans Thai", Georgia, serif;
  font-weight: 700;
  font-size: calc(var(--u) * 156);
  line-height: 1.02;
  letter-spacing: .012em;
  text-wrap: nowrap;
  filter: drop-shadow(0 calc(var(--u) * 3) 0 #3b2808) drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(0,0,0,.6));
}
.tp-ch {
  position: relative;
  display: inline-block;
  color: #e9cc7a;
}
.tp-seed {
  position: absolute;
  left: 50%;
  top: .19em;
  width: .15em;
  height: .15em;
  margin-left: -.075em;
  border-radius: 50% 0 50% 0;
  background: #ffe6a0;
  -webkit-text-fill-color: initial;
  transform: rotate(45deg);
}
.tp-rule { position: relative; height: 0; margin: calc(var(--u) * 8) 0 calc(var(--u) * 26); width: 100%; }
.tp-rule::before {
  content: "";
  position: absolute;
  left: calc(var(--u) * -12);
  top: calc(var(--u) * -6);
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  background: #ffe9ad;
  transform: rotate(45deg);
}
.tp-tag {
  margin: 0;
  display: grid;
  gap: calc(var(--u) * 4);
  font-family: "Trirong", "IBM Plex Sans Thai", Georgia, serif;
  font-weight: 600;
  font-size: calc(var(--u) * 29);
  line-height: 1.4;
  color: var(--cream);
  text-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(0,0,0,.9);
}
.tp-tag span:first-child { color: var(--gold-hi); }
.tp-genre { margin: calc(var(--u) * 17) 0 0; color: #e6d8b5; font-size: max(15px, calc(var(--u) * 18)); line-height: 1.7; }
.tp-actions {
  margin-top: calc(var(--u) * 24);
  width: 0;
  min-width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 20) calc(var(--u) * 30);
}
.tp-start {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 18);
  height: calc(var(--u) * 72);
  min-height: 52px;
  padding-inline: calc(var(--u) * 46);
  border: 0;
  background: none;
  cursor: pointer;
  font-family: "Trirong", "IBM Plex Sans Thai", Georgia, serif;
  font-weight: 700;
  font-size: max(22px, calc(var(--u) * 28));
  letter-spacing: .015em;
  color: #2b1d06;
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
  --pt: polygon(0 50%, calc(var(--u) * 26) 0, calc(100% - var(--u) * 26) 0, 100% 50%, calc(100% - var(--u) * 26) 100%, calc(var(--u) * 26) 100%);
  filter: drop-shadow(0 calc(var(--u) * 4) 0 rgba(48,30,6,.9)) drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0,0,0,.55));
  transition: transform .18s ease-out;
}
.tp-start::before { content: ""; position: absolute; inset: 0; z-index: -2; clip-path: var(--pt); background: linear-gradient(135deg, #f8e6a6, #d3ad55 24%, #8a6521 50%, #d9b45c 74%, #f4dea0); }
.tp-start::after { content: ""; position: absolute; inset: calc(var(--u) * 4); z-index: -1; clip-path: var(--pt); background: linear-gradient(180deg, #fdf3d3, #efdca2 52%, #d6bb70); }
.tp-start-wrap { display: inline-flex; }
.tp-start-label { text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.tp-start-leaf { width: calc(var(--u) * 28); height: calc(var(--u) * 28); fill: none; stroke: #2b1d06; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tp-start:hover { transform: translateY(-2px); }
.tp-start:active { transform: translateY(1px); }
.tp-start:disabled { cursor: not-allowed; }
.tp-start:disabled:hover { transform: none; }
.tp-start:focus-visible, .tp-link:focus-visible, .tp-note a:focus-visible { outline: 2px solid #f2d98a; outline-offset: 6px; }
.tp-links { display: flex; align-items: center; gap: calc(var(--u) * 8); }
.tp-dot { width: calc(var(--u) * 5); height: calc(var(--u) * 5); background: var(--gold); transform: rotate(45deg); opacity: .8; flex: 0 0 auto; }
.tp-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: inherit;
  font-size: max(16px, calc(var(--u) * 22));
  color: #e9dfc6;
  padding: 6px;
  text-decoration: none;
  text-underline-offset: .26em;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,.95);
}
.tp-link:hover { color: #fff4c4; text-decoration: underline; }
.tp-note { flex-basis: 100%; margin: 0; min-height: 24px; font-size: max(14px, calc(var(--u) * 19)); line-height: 1.8; color: #e6d8b5; }
.tp-note[hidden] { display: none; }
.tp-note a { color: #f2d98a; text-decoration: underline; text-underline-offset: .24em; margin-left: .6em; }
.tp-paused .tp-mist { animation-play-state: paused; }
.tp-calm .tp-mist, .tp-calm .tp-lockup, .tp-calm .tp-thread { animation: none; }
@media (max-width: 700px) {
  .title-hero { min-height: 680px; --u: .6px; }
  .tp-lockup { left: 24px; right: 24px; bottom: 46px; width: auto; max-width: none; }
  .tp-title { font-size: clamp(46px, 15.7vw, 94px); letter-spacing: .005em; }
  .tp-rule { margin-top: 12px; margin-bottom: 23px; width: 100%; }
  .tp-tag { font-size: clamp(17px, 4.8vw, 25px); gap: 5px; line-height: 1.65; }
  .tp-tag span { white-space: nowrap; }
  .tp-genre { margin-top: 14px; font-size: 14px; }
  .tp-actions { margin-top: 22px; gap: 12px 18px; width: 100%; align-items: flex-start; }
  .tp-start { min-height: 60px; height: 60px; font-size: 23px; padding-inline: 32px; gap: 16px; }
  .tp-start-leaf { width: 24px; height: 24px; }
  .tp-links { width: 100%; flex-wrap: wrap; gap: 8px; }
  .tp-link { font-size: 16px; padding: 5px 2px; }
  .tp-dot { width: 4px; height: 4px; }
  .tp-note { font-size: 14px; min-height: 26px; }
  .tp-note a { margin-left: .3em; }
  .tp-shade { background: linear-gradient(180deg, rgba(6,15,10,.06) 18%, rgba(6,15,10,.1) 36%, rgba(6,15,10,.83) 65%, #07140e); }
}
@media (max-width: 360px) {
  .tp-lockup { left: 18px; right: 18px; }
  .tp-tag { font-size: 16px; }
  .tp-note a { display: block; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .title-hero *, .title-hero *::before, .title-hero *::after { animation: none !important; transition: none !important; }
}