/* ★ 2026-10-06 · THE GAME LAYER · styles for site-game.js.
   Built on the guidebook's own tokens (--gold, --blue, --panel, --tiny, --pixel)
   so the HUD, cutscenes and journal read as part of the same JRPG window system. */

:root{ --hud-h:54px; }
body.gm{ padding-bottom:var(--hud-h); }
body.gm-lock-scroll{ overflow:hidden; }
@media (min-width:901px){ body.gm .rail{ height:100vh; padding-bottom:calc(var(--hud-h) + 20px); } }

/* ───────── HUD ───────── */
.gm-hud{
  position:fixed; left:var(--rail); right:0; bottom:0; z-index:120; height:var(--hud-h);
  display:flex; align-items:center; gap:10px; padding:0 14px;
  background:linear-gradient(180deg,rgba(20,10,38,.96),rgba(8,3,14,.98));
  border-top:3px solid var(--gold); box-shadow:0 -2px 0 var(--void), 0 -3px 0 rgba(232,200,120,.35), 0 -14px 30px rgba(0,0,0,.45);
  font-family:var(--tiny); color:var(--text);
}
@media (max-width:900px){ .gm-hud{ left:0; } }
.gm-hud button{ font:inherit; color:inherit; cursor:pointer; }
.gm-hud button:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }
.gm-hud-pl{ display:flex; align-items:center; gap:9px; background:none; border:none; padding:4px 2px; white-space:nowrap; }
.gm-gem{ width:16px; height:16px; transform:rotate(45deg); background:linear-gradient(135deg,#E7C9FF,#B87CFF 45%,#5B2E9C);
  box-shadow:0 0 0 2px var(--void),0 0 0 3px var(--gold),0 0 14px -2px #B87CFF; animation:gm-gem 2.4s ease-in-out infinite; }
.gm-hud.gm-mothergem .gm-gem{ background:linear-gradient(135deg,#fff,#FFDF7A 40%,#B87CFF); box-shadow:0 0 0 2px var(--void),0 0 0 3px var(--gold-hi),0 0 22px 2px #FFDF7A; }
@keyframes gm-gem{ 50%{ filter:brightness(1.35); } }
.gm-lv{ font-size:.55rem; color:var(--gold-hi); }
.gm-lv b{ font-weight:400; font-size:.7rem; }
.gm-ttl{ font-size:.42rem; color:var(--blue-hi); letter-spacing:.04em; }
.gm-xp{ flex:1; min-width:60px; display:flex; flex-direction:column; gap:4px; }
.gm-xp-bar{ height:9px; background:var(--panel-3); border:2px solid var(--gold-deep); position:relative; overflow:hidden; }
.gm-xp-bar i{ position:absolute; inset:0 auto 0 0; width:0; background:repeating-linear-gradient(90deg,var(--gold) 0 6px,var(--gold-hi) 6px 8px);
  transition:width .6s steps(12); }
.gm-xp-bar.big{ height:14px; }
.gm-xp-n{ font-size:.38rem; color:var(--muted); letter-spacing:.04em; }
.gm-hud.bump .gm-xp-bar{ animation:gm-bump .5s steps(3); }
@keyframes gm-bump{ 50%{ border-color:var(--gold-hi); box-shadow:0 0 12px var(--gold); } }
.gm-hud-chip, .gm-hud-btn{
  display:flex; align-items:center; gap:6px; height:32px; padding:0 10px; white-space:nowrap;
  background:var(--panel-3); border:2px solid var(--gold-deep); font-size:.46rem;
  transition:border-color .2s, transform .1s steps(2);
}
.gm-hud-chip:hover, .gm-hud-btn:hover{ border-color:var(--gold); color:var(--gold-hi); transform:translateY(-2px); }
.gm-hud-chip b{ font-weight:400; color:var(--gold-hi); }
.gm-chip-shard .gm-ico{ color:#C99BFF; }
.gm-chip-ach .gm-ico{ color:var(--gold); }
.gm-hud-btn kbd{ font:inherit; font-size:.38rem; padding:2px 4px; border:1px solid var(--gold-deep); color:var(--muted); }
.gm-snd{ width:32px; justify-content:center; padding:0; color:var(--muted); }
.gm-snd .gm-snd-i{ font-family:var(--body); font-size:.95rem; position:relative; }
.gm-snd:not(.on) .gm-snd-i::after{ content:''; position:absolute; left:-3px; right:-3px; top:50%; height:2px; background:var(--red); transform:rotate(-40deg); }
.gm-snd.on{ color:var(--gold-hi); border-color:var(--gold); }
@media (max-width:640px){
  :root{ --hud-h:50px; }
  .gm-hud{ gap:6px; padding:0 8px; }
  .gm-ttl, .gm-xp-n, .gm-hud-btn kbd, .gm-hud-btn:not(.gm-snd) span{ display:none; }
  .gm-hud-btn:not(.gm-snd)::before{ content:'☰'; font-family:var(--body); font-size:.9rem; }
  .gm-hud-chip{ padding:0 7px; }
}

/* ───────── toasts ───────── */
.gm-toasts{ position:fixed; right:14px; bottom:calc(var(--hud-h) + 12px); z-index:400; display:flex; flex-direction:column; gap:6px;
  align-items:flex-end; pointer-events:none; width:min(calc(100vw - 28px),340px); }
.gm-toast{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 12px; width:100%;
  animation:gm-toast-in .35s steps(4) both; }
.gm-toast.out{ animation:gm-toast-out .35s steps(4) both; }
.gm-toast-k{ flex:0 1 auto; max-width:55%; font-family:var(--tiny); font-size:.4rem; line-height:1.8; letter-spacing:.04em; color:var(--blue-hi); }
.gm-toast-v{ font-family:var(--pixel); font-size:.95rem; color:var(--gold-hi); line-height:1.2; white-space:nowrap; }
.gm-toast.red .gm-toast-v, .gm-toast.gold .gm-toast-v{ white-space:normal; text-align:right; }
.gm-toast.gold{ border-color:var(--gold-hi); background:linear-gradient(180deg,rgba(255,215,0,.16),var(--panel)); }
.gm-toast.gold .gm-toast-k{ color:var(--gold-hi); }
.gm-toast.red{ border-color:var(--red); }
.gm-toast.red .gm-toast-k{ color:var(--red-hi); }
@keyframes gm-toast-in{ from{ opacity:0; transform:translateX(24px); } }
@keyframes gm-toast-out{ to{ opacity:0; transform:translateX(24px); } }

/* level up */
.gm-levelup{ position:fixed; inset:0; z-index:420; display:grid; place-items:center; pointer-events:none; }
.gm-levelup-in{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 40px;
  background:rgba(5,3,16,.88); border:3px solid var(--gold-hi); box-shadow:0 0 0 3px var(--void),0 0 60px rgba(255,200,61,.5);
  animation:gm-pop .5s cubic-bezier(.2,1.6,.4,1) both; }
.gm-levelup span{ font-family:var(--tiny); font-size:.7rem; color:var(--blue-hi); animation:blink .5s steps(2,start) 4; }
.gm-levelup b{ font-family:var(--pixel); font-weight:400; font-size:2.6rem; color:var(--gold-hi); text-shadow:3px 3px 0 var(--amethyst-dp); line-height:1; }
.gm-levelup i{ font-style:normal; font-family:var(--tiny); font-size:.5rem; color:var(--text-dim); }
.gm-levelup.out{ transition:opacity .5s; opacity:0; }
@keyframes gm-pop{ from{ opacity:0; transform:scale(.4); } }

/* ───────── zones · fog of war ───────── */
section.gm-fog{ opacity:.18; filter:blur(5px) saturate(.2); }
section.gm-reveal{ animation:gm-reveal .9s ease-out both; }
section.gm-reveal .parthead{ position:relative; }
section.gm-reveal .parthead::after{ content:'ZONE DISCOVERED'; position:absolute; right:0; top:0; font-family:var(--tiny); font-size:.42rem;
  color:var(--void); background:var(--gold-hi); padding:.35rem .5rem; animation:gm-tag 2.6s steps(1) .3s both; }
@keyframes gm-reveal{ from{ opacity:.18; filter:blur(5px) saturate(.2); clip-path:inset(0 0 60% 0); } 60%{ clip-path:inset(0 0 0 0); } to{ opacity:1; filter:none; } }
@keyframes gm-tag{ 0%{ opacity:1; } 15%{ opacity:0; } 25%{ opacity:1; } 90%{ opacity:1; } 100%{ opacity:0; } }
.rail a.gm-found::after{ content:'✓'; font-family:var(--mono); font-size:.62rem; color:var(--emerald); margin-left:6px; }
.rail a{ grid-template-columns:1rem 2.2rem 1fr auto; }

/* ───────── locked + new ───────── */
.gm-locked{ cursor:not-allowed; }
.gm-locked:focus-visible{ outline:2px solid var(--red-hi); outline-offset:2px; }
.gm-shake{ animation:gm-shake .42s steps(6); }
@keyframes gm-shake{ 20%{ transform:translateX(-5px); } 40%{ transform:translateX(5px); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(3px); } }
.world.gm-locked:hover{ opacity:1; border-color:var(--red); }
.door{ position:relative; }
.gm-new{ position:absolute; top:-12px; right:-8px; font-family:var(--tiny); font-size:.5rem; color:var(--void); background:var(--red-hi);
  padding:.4rem .5rem; border:2px solid var(--void); box-shadow:3px 3px 0 var(--amethyst-dp); transform:rotate(6deg); animation:gm-bob 1.2s steps(2) infinite; }
@keyframes gm-bob{ 50%{ transform:rotate(6deg) translateY(-3px); } }

/* ───────── codex scanning ───────── */
.gm-hint{ font-family:var(--tiny); font-size:.44rem; line-height:1.9; color:var(--blue-hi); margin:14px 0 0; }
.gm-hint::first-letter{ animation:blink 1.1s steps(2,start) infinite; }
.card.gm-scan{ position:relative; cursor:pointer; transition:transform .12s steps(2), box-shadow .12s steps(2); overflow:hidden; }
.card.gm-scan:not(.scanned){ filter:saturate(.45) brightness(.85); }
.card.gm-scan:not(.scanned):hover, .card.gm-scan:focus-visible{ filter:none; transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--amethyst-dp); outline:none; }
.card.gm-scan:focus-visible{ box-shadow:5px 5px 0 var(--amethyst-dp),0 0 0 2px var(--gold-hi); }
.card.gm-scan.scanning::before{ content:''; position:absolute; left:0; right:0; height:3px; top:0; background:var(--c,var(--gold));
  box-shadow:0 0 16px 4px var(--c,var(--gold)); animation:gm-scanline .65s linear both; }
@keyframes gm-scanline{ to{ top:100%; } }
.gm-stamp{ position:absolute; right:10px; bottom:10px; font-family:var(--tiny); font-size:.4rem; color:var(--c,var(--gold)); border:2px solid currentColor;
  padding:.3rem .4rem; transform:rotate(-8deg); opacity:0; }
.card.scanned .gm-stamp{ opacity:.9; animation:gm-stamp .35s steps(3) both; }
.card.scanned{ cursor:default; }
@keyframes gm-stamp{ from{ transform:rotate(-8deg) scale(2.2); opacity:0; } }

/* ───────── Mothergem shards ───────── */
.gm-shard{ position:absolute; z-index:5; width:26px; height:26px; margin:0; padding:0; border:none; background:none; cursor:pointer;
  transform:translate(-50%,-50%); opacity:.55; transition:opacity .2s; }
.gm-shard::before{ content:''; position:absolute; inset:7px; transform:rotate(45deg);
  background:linear-gradient(135deg,#fff,#E7C9FF 35%,#B87CFF 70%,#5B2E9C); box-shadow:0 0 10px 1px rgba(201,155,255,.8); }
.gm-shard::after{ content:''; position:absolute; inset:0; background:
  linear-gradient(90deg,transparent 46%,#fff 50%,transparent 54%), linear-gradient(0deg,transparent 46%,#fff 50%,transparent 54%);
  transform:scale(0); animation:gm-twinkle 3.2s ease-in-out infinite; }
.gm-shard:hover, .gm-shard:focus-visible{ opacity:1; outline:none; }
.gm-shard:focus-visible::before{ box-shadow:0 0 0 2px var(--gold-hi),0 0 14px 3px rgba(201,155,255,.9); }
.gm-shard.got{ animation:gm-shard-got .9s ease-out forwards; opacity:1; }
@keyframes gm-twinkle{ 0%,70%,100%{ transform:scale(0) rotate(0); } 80%{ transform:scale(1.15) rotate(45deg); } }
@keyframes gm-shard-got{ 40%{ transform:translate(-50%,-50%) scale(2.2); filter:brightness(2); } to{ transform:translate(-50%,-160%) scale(.2); opacity:0; } }

/* ───────── home: save file + patch log ───────── */
.gm-save{ display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; }
.gm-save-gem{ width:34px; height:34px; margin:6px; transform:rotate(45deg); background:linear-gradient(135deg,#E7C9FF,#B87CFF 45%,#5B2E9C);
  box-shadow:0 0 0 3px var(--void),0 0 0 5px var(--gold),0 0 22px -2px #B87CFF; animation:gm-gem 2.4s ease-in-out infinite; }
.gm-save-gem.big{ width:46px; height:46px; margin:12px; }
.gm-save-nm{ font-family:var(--pixel); font-size:1.15rem; color:var(--gold-hi); margin-bottom:8px; }
.gm-save-row{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:9px; font-family:var(--tiny); font-size:.42rem; line-height:1.9; color:var(--muted); }
.gm-save-row b{ font-weight:400; color:var(--text); }
.gm-save-btn{ margin:0; }
@media (max-width:640px){ .gm-save{ grid-template-columns:auto 1fr; } .gm-save-btn{ grid-column:1 / -1; } }
.gm-patch{ background:var(--panel-3); border:2px solid var(--gold-deep); border-left:5px solid var(--gold); padding:14px 18px 6px; margin:0 0 8px; }
.gm-patch:first-child{ border-left-color:var(--red); }
.gm-patch header{ display:flex; gap:10px; flex-wrap:wrap; font-family:var(--tiny); font-size:.42rem; line-height:1.9; }
.gm-patch-d{ color:var(--blue-hi); }
.gm-patch-b{ color:var(--void); background:var(--gold); padding:0 .4rem; }
.gm-patch h4{ font-family:var(--pixel); font-size:1.1rem; letter-spacing:0; text-transform:none; color:var(--gold); margin:8px 0 6px; }
.gm-patch ul{ font-size:.88rem; color:var(--text-dim); line-height:1.55; }
.gm-patch-tag{ font-family:var(--tiny); font-size:.4rem; color:var(--emerald); border:1px solid currentColor; padding:.15rem .3rem; vertical-align:2px; }

/* ───────── star map ───────── */
.gm-starmap{ display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:12px; margin:24px 0; align-items:start; }
.gm-starmap noscript, .gm-starmap .gm-fallback{ grid-column:1/-1; }
@media (max-width:1100px){ .gm-starmap{ grid-template-columns:1fr; } }
.gm-map{ background:radial-gradient(circle at 50% 50%,rgba(20,10,38,.6),rgba(5,3,16,.9)); border:3px solid var(--gold-deep); aspect-ratio:1; }
.gm-map svg{ display:block; width:100%; height:100%; }
.gm-axis{ stroke:rgba(232,200,120,.12); stroke-dasharray:2 8; }
.gm-q{ font-family:'Press Start 2P',monospace; font-size:13px; fill:rgba(232,200,120,.45); }
.gm-orbit{ fill:none; stroke:rgba(196,184,216,.08); }
.gm-orbit.open{ stroke:rgba(184,124,255,.45); stroke-dasharray:3 5; }
.gm-sun-glow{ animation:gm-sun 4s ease-in-out infinite; transform-origin:400px 400px; }
@keyframes gm-sun{ 50%{ transform:scale(1.12); opacity:.8; } }
.gm-sun-lbl{ font-family:'Press Start 2P',monospace; font-size:10px; fill:var(--gold-hi); }
.gm-planet{ cursor:pointer; outline:none; transform-box:fill-box; transform-origin:center; transition:transform .15s; }
.gm-planet.gm-locked{ cursor:not-allowed; }
.gm-hit{ fill:transparent; }
.gm-planet .gm-body{ fill:#2a2140; stroke:#6c5f88; stroke-width:1.5; }
.gm-padlock{ fill:none; stroke:#9C8FB8; stroke-width:1.2; }
.gm-planet.open .gm-body{ fill:var(--pc); stroke:#fff; stroke-width:2; }
.gm-planet.open .gm-halo{ fill:none; stroke:var(--pc); stroke-width:2; opacity:.6; animation:gm-halo 2s ease-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes gm-halo{ from{ transform:scale(.6); opacity:.9; } to{ transform:scale(1.5); opacity:0; } }
.gm-plbl{ font-family:'Press Start 2P',monospace; font-size:11px; fill:#fff; paint-order:stroke; stroke:#050310; stroke-width:4px; }
.gm-planet:hover, .gm-planet:focus, .gm-planet.sel{ transform:scale(1.35); }
.gm-planet.sel .gm-body, .gm-planet:focus .gm-body{ stroke:var(--gold-hi); stroke-width:2.5; }
.gm-planet.gm-locked.sel .gm-body{ fill:#3a2d58; }
@media (prefers-reduced-motion:reduce){ .gm-sun-glow, .gm-planet.open .gm-halo{ animation:none; } }
.gm-mapinfo{ min-height:220px; }
.gm-mapinfo .boxttl{ font-family:var(--tiny); font-size:.44rem; line-height:1.9; color:var(--gold-hi); padding:.7rem .95rem .55rem; border-bottom:2px solid var(--gold-deep); }
.gm-mapinfo .boxbody{ padding:15px 18px; }
.gm-mi-nm{ font-family:var(--pixel); font-size:1.9rem; line-height:1; color:var(--pc); text-shadow:3px 3px 0 var(--amethyst-dp); }
.gm-mi-t{ font-family:var(--tiny); font-size:.42rem; line-height:1.9; color:var(--blue-hi); margin:10px 0; }
.gm-mapinfo p{ font-size:.9rem; color:var(--text-dim); line-height:1.55; }
.gm-mapinfo .btn{ margin-top:4px; }
.gm-mi-lock{ font-family:var(--tiny); font-size:.46rem; color:var(--red-hi); }

/* ───────── journal ───────── */
.gm-modal{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:16px; background:rgba(5,3,16,.7);
  opacity:0; transition:opacity .2s; }
.gm-modal.in{ opacity:1; }
.gm-journal{ width:min(640px,100%); max-height:min(80vh,720px); display:flex; flex-direction:column; transform:scale(.96); transition:transform .2s steps(3); }
.gm-modal.in .gm-journal{ transform:none; }
.gm-j-head{ display:flex; justify-content:space-between; align-items:center; padding:.75rem 1rem; border-bottom:2px solid var(--gold-deep);
  font-family:var(--tiny); font-size:.55rem; color:var(--gold-hi); }
.gm-x{ background:none; border:2px solid var(--gold-deep); color:var(--text); width:30px; height:30px; cursor:pointer; font-size:.9rem; }
.gm-x:hover{ border-color:var(--red); color:var(--red-hi); }
.gm-tabs{ display:flex; gap:0; border-bottom:2px solid var(--gold-deep); overflow-x:auto; }
.gm-tabs button{ flex:1; font-family:var(--tiny); font-size:.44rem; padding:.85rem .5rem; background:none; border:none; border-right:2px solid var(--gold-deep);
  color:var(--muted); cursor:pointer; white-space:nowrap; }
.gm-tabs button:last-child{ border-right:none; }
.gm-tabs button.on{ background:var(--blue-deep); color:var(--gold-hi); box-shadow:inset 0 -3px var(--red); }
.gm-tabs button:focus-visible, .gm-x:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:-2px; }
.gm-j-body{ padding:16px 18px 20px; overflow-y:auto; }
.gm-j-status{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; }
.gm-j-big{ font-family:var(--pixel); font-size:1.4rem; color:var(--gold-hi); margin-bottom:10px; }
.gm-j-dim{ font-size:.86rem; color:var(--muted); margin:10px 0 14px; }
.gm-j-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:10px; }
.gm-j-grid div{ background:var(--panel-3); border:2px solid var(--gold-deep); padding:10px 12px; }
.gm-j-grid span{ display:block; font-family:var(--tiny); font-size:.38rem; color:var(--muted); margin-bottom:6px; }
.gm-j-grid b{ font-family:var(--pixel); font-weight:400; font-size:1rem; color:var(--gold-hi); }
@media (max-width:520px){ .gm-j-grid{ grid-template-columns:repeat(2,1fr); } }
.gm-quest{ background:var(--panel-3); border:2px solid var(--gold-deep); padding:12px 14px; margin-bottom:6px; }
.gm-quest.done{ border-color:var(--emerald); }
.gm-q-top{ display:flex; justify-content:space-between; gap:10px; }
.gm-q-nm{ font-family:var(--pixel); font-size:1.02rem; color:var(--gold); }
.gm-quest.done .gm-q-nm{ color:var(--emerald); }
.gm-q-n{ font-family:var(--tiny); font-size:.46rem; color:var(--gold-hi); white-space:nowrap; }
.gm-quest p{ font-size:.84rem; color:var(--text-dim); margin:4px 0 9px; line-height:1.5; }
.gm-trophies{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
@media (max-width:520px){ .gm-trophies{ grid-template-columns:1fr; } }
.gm-trophy{ display:grid; grid-template-columns:28px 1fr; gap:10px; background:var(--panel-3); border:2px solid rgba(156,138,100,.4); padding:10px 12px; opacity:.6; }
.gm-trophy.got{ opacity:1; border-color:var(--gold); }
.gm-t-i{ font-size:1.3rem; color:var(--gold-hi); line-height:1.2; }
.gm-t-nm{ font-family:var(--pixel); font-size:.98rem; color:var(--gold); }
.gm-trophy p{ font-size:.78rem; color:var(--text-dim); margin:2px 0 0; line-height:1.45; }
.gm-settings label{ display:flex; gap:12px; align-items:center; font-family:var(--tiny); font-size:.5rem; padding:12px 0; border-bottom:1px solid rgba(232,200,120,.14); cursor:pointer; }
.gm-settings input{ width:18px; height:18px; accent-color:var(--gold); }
.gm-settings .btn{ border-color:var(--red); color:var(--red-hi); box-shadow:4px 4px 0 rgba(237,32,56,.25); }

/* ───────── title screen ───────── */
.gm-title{ position:fixed; inset:0; z-index:500; display:grid; place-items:center; padding:20px; text-align:center;
  background:radial-gradient(ellipse at 50% 45%,rgba(74,45,138,.55),transparent 60%),#050310; opacity:0; transition:opacity .4s; cursor:pointer; }
.gm-title.in{ opacity:1; }
.gm-title.out{ opacity:0; transform:scale(1.04); transition:opacity .5s, transform .5s; }
.gm-title::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px); }
.gm-title-in{ position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; }
.gm-title-k{ font-family:var(--tiny); font-size:.5rem; color:var(--muted); margin:0; letter-spacing:.06em; }
.gm-title-h{ font-family:var(--pixel); font-weight:400; font-size:clamp(3.2rem,13vw,7.5rem); line-height:.95; margin:0; color:var(--text);
  text-shadow:5px 5px 0 var(--blue-deep),0 0 40px rgba(184,124,255,.55); border:none; padding:0; animation:gm-title-in 1.1s cubic-bezier(.2,.9,.3,1) both; }
@keyframes gm-title-in{ from{ letter-spacing:.6em; opacity:0; filter:blur(8px); } }
.gm-title-sub{ font-family:var(--tiny); font-size:clamp(.48rem,1.6vw,.66rem); color:var(--blue-hi); margin:0; }
.gm-start{ margin-top:22px; font-family:var(--tiny); font-size:clamp(.66rem,2vw,.85rem); color:var(--gold-hi); background:none; border:none; padding:12px 18px; cursor:pointer;
  animation:blink 1.1s steps(2,start) infinite; }
.gm-start:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:4px; }
.gm-title-f{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; color:var(--muted); margin:18px 0 0; max-width:46ch; line-height:1.9; }

/* ───────── unlock cutscene ───────── */
.gm-unlock{ position:fixed; inset:0; z-index:510; display:grid; place-items:center; padding:16px; overflow:auto;
  background:rgba(2,1,6,.94); opacity:0; transition:opacity .3s; }
.gm-unlock.in{ opacity:1; }
.gm-unlock.out{ opacity:0; }
.gm-burst{ position:absolute; inset:-50%; pointer-events:none; opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,200,61,.14) 0 6deg,transparent 6deg 18deg);
  animation:gm-burst 1.2s ease-out .85s forwards, gm-spin 40s linear 1s infinite; }
@keyframes gm-burst{ from{ opacity:0; transform:scale(.3); } to{ opacity:1; transform:scale(1); } }
@keyframes gm-spin{ to{ rotate:360deg; } }
.gm-u-in{ position:relative; display:flex; flex-direction:column; align-items:center; gap:18px; max-width:560px; width:100%; }
.gm-bigl{ width:84px; height:96px; fill:var(--gold); stroke:var(--gold); filter:drop-shadow(0 0 18px rgba(255,200,61,.6));
  animation:gm-lockshake .7s steps(8) .1s both, gm-lockgone .4s ease-in .95s forwards; }
.gm-bigl rect{ stroke:none; }
.gm-bigl .gm-key{ fill:var(--void); }
.gm-shackle{ animation:gm-shackle .25s steps(3) .75s forwards; }
@keyframes gm-lockshake{ 0%{ transform:scale(.6); opacity:0; } 15%{ transform:scale(1); opacity:1; } 30%,70%{ transform:rotate(-8deg); } 50%,90%{ transform:rotate(8deg); } 100%{ transform:none; } }
@keyframes gm-shackle{ to{ transform:translateY(-10px); } }
@keyframes gm-lockgone{ 40%{ transform:scale(1.4); filter:brightness(3) drop-shadow(0 0 40px #fff); } to{ transform:scale(.2); opacity:0; height:0; margin:-9px 0; } }
.gm-u-card{ width:100%; text-align:center; animation:gm-card .6s cubic-bezier(.2,1.4,.4,1) 1.05s both; }
@keyframes gm-card{ from{ opacity:0; transform:translateY(24px) scale(.9); } }
.gm-u-k{ display:inline-block; font-family:var(--tiny); font-size:.6rem; color:var(--void); background:var(--gold-hi); padding:.5rem .7rem; margin:0 0 18px; }
.gm-u-nm{ font-family:var(--pixel); font-weight:400; font-size:clamp(2.6rem,10vw,4.6rem); line-height:1; margin:0; color:var(--pc,var(--gold-hi));
  text-shadow:4px 4px 0 var(--amethyst-dp),0 0 36px var(--pc,var(--gold)); border:none; padding:0; }
.gm-u-t{ font-family:var(--tiny); font-size:.55rem; line-height:1.9; color:var(--blue-hi); margin:14px 0 0; }
.gm-u-b{ font-size:1rem; color:var(--text-dim); margin:16px auto 0; max-width:44ch; }
.gm-u-btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.gm-u-btns .btn{ cursor:pointer; }
.gm-u-xp{ font-family:var(--tiny); font-size:.5rem; color:var(--emerald); margin:18px 0 0; }
.gm-u-list{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:6px; text-align:left; }
.gm-u-list li{ display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:12px; align-items:center; margin:0;
  background:var(--panel); border:2px solid var(--gold-deep); border-left:5px solid var(--pc); padding:10px 14px; animation:gm-card .45s cubic-bezier(.2,1.4,.4,1) var(--d) both; }
.gm-u-kind{ grid-row:1 / 3; font-family:var(--tiny); font-size:.4rem; color:var(--void); background:var(--pc); padding:.3rem .4rem; }
.gm-u-list b{ font-family:var(--pixel); font-weight:400; font-size:1.15rem; color:var(--gold-hi); }
.gm-u-list i{ font-style:normal; font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; color:var(--muted); grid-column:2; }
.gm-u-list a{ grid-row:1 / 3; grid-column:3; font-family:var(--tiny); font-size:.6rem; text-decoration:none; color:var(--gold-hi); border:2px solid var(--gold); padding:.5rem .6rem; }
.gm-u-list a:hover{ background:var(--gold); color:var(--void); }
@media (prefers-reduced-motion:reduce){
  .gm-bigl{ display:none; }
  .gm-burst{ animation:none; opacity:.6; }
  .gm-u-card, .gm-u-list li, .gm-title-h{ animation:none; }
  section.gm-fog{ opacity:1; filter:none; }
  section.gm-reveal{ animation:none; }
}

/* ───────── warp, CRT, flash ───────── */
.gm-warp{ position:fixed; inset:0; z-index:600; pointer-events:none; display:grid; place-items:center;
  background:repeating-linear-gradient(90deg,#050310 0 calc(100%/12),#0a0618 calc(100%/12) calc(100%/6));
  clip-path:inset(0 0 100% 0); transition:clip-path .36s steps(6); }
.gm-warp.on{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.gm-warp-t{ font-family:var(--tiny); font-size:.7rem; color:var(--gold-hi); }
.gm-warp-t span{ animation:blink .4s steps(2,start) infinite; }
body.gm-crt::after{ content:''; position:fixed; inset:0; z-index:700; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px), radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.45)); }
body.gm-flash{ animation:gm-flash .7s steps(6); }
@keyframes gm-flash{ 20%,60%{ filter:invert(1) hue-rotate(180deg); } 40%,80%{ filter:none; } }

/* ───────── home title cover ───────── */
.gm-press{ display:inline-block; margin-top:26px; font-family:var(--tiny); font-size:.62rem; color:var(--gold-hi); text-decoration:none; }
.gm-press .cur{ animation:blink 1.1s steps(2,start) infinite; }
.gm-press:hover{ color:var(--text); }
.cover.gm-titlecover h1{ text-shadow:4px 4px 0 var(--blue-deep),0 0 42px rgba(184,124,255,.45); }