/* =========================================================================
   MIC CYBERSEC CTF — WORLD 1
   Retro 8/16-bit platformer world map. NES palette, hard edges, no blur.
   ========================================================================= */

/* ---------- tokens ---------- */
:root{
  --sky:        #5c94fc;
  --sky-hi:     #7aa9fd;
  --hill:       #00a800;
  --hill-dk:    #007000;
  --pipe:       #00a800;
  --pipe-dk:    #006000;
  --brick:      #c84c0c;
  --brick-dk:   #8b3200;
  --earth:      #9c4a00;
  --gold:       #fbd000;
  --gold-dk:    #c39000;
  --red:        #e52521;
  --red-dk:     #a01614;
  --ink:        #0b0b1a;
  --ink-soft:   #3a3a52;
  --paper:      #fdf6e3;
  --paper-dk:   #e8dcc0;
  --stone:      #9aa0b5;
  --stone-dk:   #6b7189;

  --px:         4px;                       /* the unit everything snaps to */
  --edge:       0 0 0 var(--px) var(--ink); /* chunky outline */
  --drop:       6px 6px 0 0 rgba(11,11,26,.35);
  --drop-sm:    4px 4px 0 0 rgba(11,11,26,.30);

  /* hard 8-direction outline — how NES logos stayed legible on a blue sky */
  --outline-3:  -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 -3px 0 var(--ink), 0 3px 0 var(--ink),
                -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink);
  --outline-2:  -2px 0 0 var(--ink), 2px 0 0 var(--ink), 0 -2px 0 var(--ink), 0 2px 0 var(--ink),
                -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink);

  --pixel:      "Press Start 2P", "Courier New", monospace;
  --sans:       ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;

  --hud-h:      98px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--sky);
  overflow-x:hidden;
}

.press{
  font-family:var(--pixel);
  font-weight:400;
  letter-spacing:.02em;
  line-height:1.5;
  text-transform:uppercase;
}

/* ============================ SCENERY ============================ */
.scenery{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }

.sky-band{
  position:absolute; inset:0;
  background:
    linear-gradient(var(--sky-hi) 0 38%, var(--sky) 38% 100%);
}

/* --- clouds: three stacked lumps + a flat base, pure CSS --- */
.cloud-layer{ position:absolute; inset:0; }
.cloud{
  position:absolute;
  width:112px; height:34px;
  background:#fff;
  border-radius:0;
  box-shadow:
    -14px 0 0 0 #fff, 14px 0 0 0 #fff,          /* body extension */
    0 -18px 0 0 #fff,                            /* centre lump    */
    -30px -10px 0 0 #fff, 30px -10px 0 0 #fff;   /* side lumps     */
  opacity:.95;
  animation:drift 120s linear infinite;
}
.cloud::before{ /* dark underline gives the flat NES cloud its bottom edge */
  content:""; position:absolute; left:-44px; right:-44px; bottom:-6px; height:6px;
  background:rgba(11,11,26,.10);
}
.c1{ top:11%; left:-16%;  transform:scale(.9);  animation-duration:135s; }
.c2{ top:26%; left:22%;   transform:scale(1.25); animation-duration:170s; animation-delay:-40s; }
.c3{ top:6%;  left:58%;   transform:scale(.75); animation-duration:110s; animation-delay:-70s; }
.c4{ top:34%; left:82%;   transform:scale(1);   animation-duration:150s; animation-delay:-20s; }
.c5{ top:17%; left:120%;  transform:scale(1.1); animation-duration:150s; animation-delay:-95s; }
@keyframes drift{ to{ margin-left:150vw; } }

/* --- hills: stepped pyramids sitting on the ground line --- */
.hill-layer,.bush-layer{ position:absolute; left:0; right:0; bottom:56px; height:220px; }
.hill{
  position:absolute; bottom:0;
  background:var(--hill);
  border-top:var(--px) solid var(--hill-dk);
  clip-path:polygon(50% 0,72% 34%,86% 62%,100% 100%,0 100%,14% 62%,28% 34%);
  animation:sway 26s ease-in-out infinite;
}
.hill::after{ /* eye-dots, the classic hill face */
  content:""; position:absolute; left:50%; bottom:22%;
  width:8px; height:8px; margin-left:-4px;
  background:var(--hill-dk);
  box-shadow:-16px 0 0 var(--hill-dk), 16px 0 0 var(--hill-dk);
}
.h1{ left:2%;  width:230px; height:132px; }
.h2{ left:44%; width:150px; height:86px;  opacity:.9; animation-delay:-9s; }
.h3{ left:76%; width:270px; height:150px; animation-delay:-16s; }
@keyframes sway{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

.bush{
  position:absolute; bottom:0; height:38px;
  background:var(--hill-dk);
  clip-path:polygon(0 100%,10% 55%,22% 55%,32% 18%,48% 18%,58% 55%,74% 55%,86% 30%,100% 30%,100% 100%);
}
.b1{ left:26%; width:170px; }
.b2{ left:60%; width:120px; height:30px; }
.b3{ left:88%; width:200px; }

/* --- ground: brick course --- */
.ground{
  position:absolute; left:0; right:0; bottom:0; height:56px;
  background:var(--earth);
  border-top:var(--px) solid var(--ink);
  background-image:
    linear-gradient(90deg, rgba(11,11,26,.35) 3px, transparent 3px),
    linear-gradient(180deg, rgba(255,255,255,.13) 3px, transparent 3px),
    linear-gradient(180deg, rgba(11,11,26,.35) 3px, transparent 3px);
  background-size:28px 28px, 28px 28px, 28px 28px;
  background-position:0 0, 0 0, 0 25px;
}

/* ============================ HUD ============================ */
.hud{
  position:sticky; top:0; z-index:40;
  background:var(--ink);
  border-bottom:var(--px) solid #000;
  box-shadow:0 6px 0 0 rgba(11,11,26,.25);
}
.hud-inner{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.6fr .9fr .9fr .9fr;
  gap:12px; align-items:center;
  padding:12px clamp(12px,3vw,24px);
}
.hud-cell{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.hud-label{
  font-family:var(--pixel); font-size:9px; letter-spacing:.08em;
  color:#8f9bd6; text-transform:uppercase;
}
.hud-value{
  font-family:var(--pixel); font-size:13px; color:#fff;
  display:flex; align-items:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hud-sub{ font-family:var(--pixel); font-size:8px; color:#6d78ad; }
.hud-time .hud-value{ color:var(--gold); }
.hud-time.is-urgent .hud-value{ color:var(--red); animation:blink 1s steps(2,end) infinite; }
.hud-time.is-over .hud-value{ color:var(--red); }
@keyframes blink{ 50%{ opacity:.25; } }

/* coin + mushroom pips */
.coin{
  display:inline-block; width:14px; height:16px; flex:none;
  background:var(--gold);
  box-shadow:inset 0 0 0 3px var(--gold-dk), 0 0 0 2px var(--ink);
  clip-path:polygon(30% 0,70% 0,100% 22%,100% 78%,70% 100%,30% 100%,0 78%,0 22%);
}
.coin-spin{ animation:spin 1.1s steps(4,end) infinite; }
@keyframes spin{ 0%,100%{ transform:scaleX(1); } 25%{ transform:scaleX(.35); } 50%{ transform:scaleX(.1); } 75%{ transform:scaleX(.55); } }
.mush{
  display:inline-block; width:15px; height:14px; flex:none;
  background:var(--red);
  box-shadow:0 0 0 2px var(--ink), inset 0 -5px 0 0 var(--paper);
  clip-path:polygon(20% 0,80% 0,100% 30%,100% 100%,0 100%,0 30%);
}

/* marquee */
.marquee{ overflow:hidden; background:var(--gold); border-top:3px solid var(--ink); }
.marquee-track{ display:flex; width:max-content; animation:march 34s linear infinite; }
.marquee-track span{
  font-family:var(--pixel); font-size:9px; color:var(--ink);
  padding:6px 0; white-space:nowrap;
}
@keyframes march{ to{ transform:translateX(-50%); } }

/* ============================ LAYOUT ============================ */
#main{ position:relative; z-index:10; }
.screen{
  max-width:1180px; margin:0 auto;
  padding:clamp(20px,4vw,44px) clamp(14px,3.5vw,28px) 120px;
}

/* ---------- boot ---------- */
.screen-boot{ display:flex; align-items:center; justify-content:center; min-height:70vh; }
.boot-inner{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.boot-inner .press{ font-size:12px; color:var(--ink); }

/* ============================ REGISTER ============================ */
.screen-register{ max-width:640px; padding-top:clamp(24px,7vh,72px); }

.title-card{ text-align:center; margin-bottom:32px; }
.eyebrow{
  font-size:9px; color:var(--ink); margin:0 0 14px;
  background:var(--gold); display:inline-block;
  padding:7px 10px; box-shadow:var(--edge), var(--drop-sm);
}
.game-title{
  font-size:clamp(28px,8.5vw,56px); margin:0; line-height:1.2;
  text-shadow:var(--outline-3), 9px 9px 0 rgba(11,11,26,.32);
}
.tl-cyber{ color:var(--red); }
.tl-sec{ color:var(--gold); }
.subtitle{
  font-size:clamp(9px,2.6vw,13px); color:#fff; margin:18px 0 0;
  text-shadow:var(--outline-2), 4px 4px 0 rgba(11,11,26,.3);
}
.tagline{
  font-size:14px; color:var(--ink); margin:12px 0 0; font-weight:600;
}

/* the "enter your name" dialog box */
.dialog{
  background:var(--paper);
  box-shadow:var(--edge), var(--drop);
  padding:clamp(20px,4vw,32px);
}
.dialog-title{
  font-size:clamp(11px,3.2vw,15px); margin:0 0 26px; text-align:center;
  color:var(--ink);
  padding-bottom:16px; border-bottom:3px dashed var(--paper-dk);
}
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:9px; margin-bottom:9px; color:var(--ink-soft); }
input[type=text],input[type=email],.flag-input{
  width:100%; font-family:var(--sans); font-size:16px; font-weight:600;
  color:var(--ink); background:#fff;
  border:none; box-shadow:inset 0 0 0 3px var(--ink);
  padding:13px 14px; min-height:48px;
  border-radius:0; -webkit-appearance:none; appearance:none;
}
input::placeholder,.flag-input::placeholder{ color:#a9a9bd; font-weight:400; }
input:focus-visible,.flag-input:focus-visible,
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{
  outline:4px solid var(--gold); outline-offset:3px;
}
input[aria-invalid=true]{ box-shadow:inset 0 0 0 3px var(--red); }

.err{
  font-family:var(--pixel); font-size:8.5px; line-height:1.7;
  color:var(--red-dk); margin:9px 0 0; min-height:0;
}
.err:empty{ display:none; }
.err-form{ text-align:center; margin-bottom:12px; }
.fine{ font-size:12.5px; color:var(--ink-soft); text-align:center; margin:16px 0 0; }

/* ============================ BUTTONS ============================ */
.btn{
  position:relative;
  font-family:var(--pixel); font-size:11px; line-height:1;
  color:var(--ink); background:var(--gold);
  border:none; border-radius:0; cursor:pointer;
  padding:16px 20px; min-height:48px;
  box-shadow:var(--edge), var(--drop-sm);
  transition:transform .06s steps(2), box-shadow .06s steps(2);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  text-transform:uppercase;
}
.btn:hover:not(:disabled){ transform:translate(-2px,-2px); box-shadow:var(--edge), 6px 6px 0 0 rgba(11,11,26,.35); }
.btn:active:not(:disabled){ transform:translate(2px,2px); box-shadow:var(--edge), 1px 1px 0 0 rgba(11,11,26,.35); }
.btn:disabled{ cursor:not-allowed; opacity:.55; }
.btn-start{ width:100%; font-size:13px; padding:20px; background:var(--red); color:#fff; }
.btn-go{ background:var(--pipe); color:#fff; }
.btn-ghost{ background:var(--paper-dk); }
.btn-danger{ background:var(--red); color:#fff; }
.btn-file{
  background:#fff; font-size:9px; padding:12px 14px; min-height:44px;
  box-shadow:0 0 0 3px var(--ink), var(--drop-sm);
}

.spinner{ display:none; width:14px; height:14px; background:currentColor;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%); animation:sp .5s steps(4) infinite; }
@keyframes sp{ 0%{ clip-path:polygon(0 0,50% 0,50% 50%,0 50%);} 25%{ clip-path:polygon(50% 0,100% 0,100% 50%,50% 50%);}
  50%{ clip-path:polygon(50% 50%,100% 50%,100% 100%,50% 100%);} 75%{ clip-path:polygon(0 50%,50% 50%,50% 100%,0 100%);} }
.is-busy .spinner{ display:inline-block; }
.is-busy .btn-text{ opacity:.6; }

.btn-x{
  font-family:var(--pixel); font-size:18px; line-height:1;
  width:44px; height:44px; flex:none; cursor:pointer;
  background:var(--red); color:#fff; border:none; border-radius:0;
  box-shadow:0 0 0 3px var(--ink);
}
.btn-x:hover{ background:var(--red-dk); }

/* ============================ MAP ============================ */
.map-head{ text-align:center; margin-bottom:clamp(10px,1.8vw,18px); }
.map-head h1{
  font-size:clamp(20px,5.5vw,32px); margin:0; color:#fff;
  text-shadow:var(--outline-3), 7px 7px 0 rgba(11,11,26,.3);
}
.map-head .accent{ color:var(--gold); }
.map-sub{
  margin:10px auto 0; max-width:52ch; font-size:15px; font-weight:600;
  color:var(--ink); background:rgba(253,246,227,.92);
  display:inline-block; padding:10px 16px;
  box-shadow:0 0 0 3px var(--ink), var(--drop-sm);
}

/* NOTE: the stage needs a DEFINITE height — the nodes are absolutely
   positioned with percentage `top`, which resolves against nothing if the
   containing block is auto-height. */
.map-stage{
  position:relative; margin:14px auto 0;
  /* Must stay a DEFINITE height: the nodes use percentage `top`, which resolves
     against nothing if this is auto. Sized so all three sit above the fold on a
     1080p screen once the HUD, heading and marquee are accounted for. */
  height:clamp(340px, 32vw, 460px);
}
.path-src{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.path-dots{ position:absolute; inset:0; pointer-events:none; }
.path-dot{
  position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px;
  background:var(--paper); box-shadow:0 0 0 2px var(--ink);
}

.nodes{ list-style:none; margin:0; padding:0; position:absolute; inset:0; }
.node{ position:absolute; width:206px; transform:translate(-50%,-50%); }

/* the tappable card */
.node-btn{
  display:block; width:100%; cursor:pointer;
  background:transparent; border:none; padding:0; font:inherit;
  text-align:center; color:inherit;
}
.node-btn:disabled{ cursor:not-allowed; }

/* --- the block glyph --- */
.glyph{
  display:block; position:relative; width:76px; height:76px; margin:0 auto 14px;
  transition:transform .1s steps(2);
}
.node-btn:hover:not(:disabled) .glyph{ transform:translateY(-6px); }

/* ? BLOCK (unlocked) */
.g-question{
  background:var(--gold);
  box-shadow:var(--edge), inset 0 0 0 8px var(--gold-dk), var(--drop);
  animation:bob 1.8s ease-in-out infinite;
}
.g-question::after{
  content:"?"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--pixel); font-size:30px; color:var(--ink);
}
@keyframes bob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -8px; } }

/* USED BLOCK (cleared) */
.g-clear{
  background:var(--earth);
  box-shadow:var(--edge), inset 0 0 0 8px var(--brick-dk), var(--drop);
}

/* FLAGPOLE — sits on top of any cleared glyph */
.flagged::before{ /* pole */
  content:""; position:absolute; left:50%; margin-left:-3px; bottom:100%;
  width:6px; height:52px; background:var(--paper); box-shadow:0 0 0 2px var(--ink);
  z-index:2;
}
.flagged::after{ /* flag */
  content:""; position:absolute; left:50%; bottom:calc(100% + 28px);
  width:30px; height:24px; background:var(--pipe);
  box-shadow:0 0 0 2px var(--ink); z-index:2;
  clip-path:polygon(0 0,100% 22%,100% 78%,0 100%);
  transform-origin:left center;
  animation:wave 1.4s ease-in-out infinite;
}
@keyframes wave{ 0%,100%{ transform:scaleX(1); } 50%{ transform:scaleX(.82); } }

/* BRICK + PADLOCK (locked) */
.g-lock{
  background:var(--stone);
  box-shadow:var(--edge), var(--drop);
  background-image:
    linear-gradient(90deg,var(--stone-dk) 3px,transparent 3px),
    linear-gradient(180deg,var(--stone-dk) 3px,transparent 3px);
  background-size:38px 25px;
}
.g-lock::after{ /* lock body */
  content:""; position:absolute; left:50%; top:50%;
  width:28px; height:22px; margin:-1px 0 0 -14px;
  background:var(--ink);
}
.g-lock::before{ /* shackle */
  content:""; position:absolute; left:50%; top:50%; margin:-20px 0 0 -10px;
  width:20px; height:15px; border:5px solid var(--ink); border-bottom:none;
}

/* CASTLE (boss) */
.g-castle{ width:100px; height:88px; }
.g-castle.is-locked{ filter:grayscale(1) brightness(.72); }
.g-castle.is-locked::after{
  content:""; position:absolute; left:50%; top:56%;
  width:26px; height:20px; margin-left:-13px;
  background:var(--ink); box-shadow:0 0 0 3px var(--paper);
}
.g-castle svg{ width:100%; height:100%; display:block; filter:drop-shadow(6px 6px 0 rgba(11,11,26,.35)); }
.node-boss .node-btn:hover:not(:disabled) .glyph{ transform:translateY(-6px) scale(1.03); }

/* --- node caption --- */
.node-card{
  display:block;
  background:var(--paper);
  box-shadow:0 0 0 3px var(--ink), var(--drop-sm);
  padding:12px 12px 13px;
}
.node-world{ font-family:var(--pixel); font-size:11px; color:var(--ink); display:block; }
.node-title{
  font-size:14.5px; font-weight:700; line-height:1.35; margin:8px 0 10px;
  color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.node-meta{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.tier{
  font-family:var(--pixel); font-size:8px; padding:5px 7px; color:var(--ink);
  background:var(--stone); box-shadow:0 0 0 2px var(--ink);
}
.tier-easy{ background:#7ee081; }
.tier-medium{ background:var(--gold); }
.tier-hard{ background:#ff9c4a; }
.tier-boss,.tier-insane{ background:var(--red); color:#fff; }
.pts{
  font-family:var(--pixel); font-size:9px; color:var(--ink);
  display:inline-flex; align-items:center; gap:5px;
}
.node-flagline{
  display:block; margin-top:10px; font-family:var(--pixel); font-size:8px;
  padding:5px; background:var(--pipe); color:#fff; line-height:1.5;
}
.node-lockline{
  display:block; margin-top:10px; font-family:var(--pixel); font-size:8px;
  color:var(--ink-soft); line-height:1.5;
}
.node-locked .node-card{ opacity:.72; }

/* small type never sits bare on the sky — it gets a solid chip */
.map-foot{
  display:block; width:fit-content; margin:44px auto 0;
  text-align:center; font-size:9.5px; line-height:1.6;
  color:#fff; background:var(--ink);
  padding:11px 14px; box-shadow:0 0 0 3px rgba(11,11,26,.25), var(--drop-sm);
}

/* ============================ PANEL ============================ */
.scrim{
  position:fixed; inset:0; z-index:50;
  background:rgba(11,11,26,.62);
  animation:fade .16s steps(3) both;
}
@keyframes fade{ from{ opacity:0; } }

.panel{
  position:fixed; top:0; right:0; bottom:0; z-index:60;
  width:min(520px,100%);
  background:var(--paper);
  box-shadow:-6px 0 0 0 var(--ink);
  display:flex; flex-direction:column;
  animation:slide .2s steps(5) both;
  overflow:hidden;
}
@keyframes slide{ from{ transform:translateX(100%); } }
.panel-grip{ display:none; }

.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; background:var(--ink); flex:none;
}
.panel-head-meta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; min-width:0; }
.world-chip{
  font-size:11px; background:var(--gold); color:var(--ink);
  padding:7px 9px; box-shadow:0 0 0 2px #000;
}
.panel-head .pts{ color:#fff; }

.panel-body{ overflow-y:auto; padding:clamp(18px,4vw,26px); flex:1 1 auto; -webkit-overflow-scrolling:touch; }

.p-title{ font-size:clamp(13px,3.4vw,16px); margin:0 0 14px; color:var(--ink); line-height:1.55; }
.p-blurb{ font-size:15px; font-weight:600; color:var(--ink-soft); margin:0 0 22px; }

.p-h{
  font-family:var(--pixel); font-size:9px; color:var(--ink-soft);
  margin:0 0 12px; letter-spacing:.06em;
  display:flex; align-items:center; gap:10px;
}
.p-h::after{ content:""; flex:1; height:3px; background:var(--paper-dk); }

.p-sec{ margin-bottom:28px; }
.p-sec:last-child{ margin-bottom:0; }

.prompt{
  background:#fff; box-shadow:0 0 0 3px var(--ink);
  padding:16px; font-size:15px; line-height:1.72; color:var(--ink);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.prompt code,.prompt .mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }

.files{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.files li{ display:flex; }
.btn-file{ width:100%; justify-content:flex-start; text-align:left; gap:10px; overflow-wrap:anywhere; }
.btn-file .fname{ font-family:var(--pixel); font-size:9px; line-height:1.6; }
.dl-icon{ width:14px; height:14px; flex:none; background:var(--pipe);
  clip-path:polygon(38% 0,62% 0,62% 48%,100% 48%,50% 100%,0 48%,38% 48%); }
.files-none{ font-size:14px; color:var(--ink-soft); margin:0; }

/* hints */
.hints{ display:flex; flex-direction:column; gap:12px; }
.hint{ box-shadow:0 0 0 3px var(--ink); background:#fff; }
.hint-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--paper-dk); border:none; cursor:pointer;
  padding:14px; min-height:48px; font-family:var(--pixel); font-size:9px;
  color:var(--ink); text-align:left; text-transform:uppercase; line-height:1.6;
}
.hint-btn:hover:not(:disabled){ background:var(--gold); }
.hint-btn:disabled{ cursor:default; }
.hint-cost{ color:var(--red-dk); white-space:nowrap; }
.hint-open .hint-btn{ background:var(--pipe); color:#fff; }
.hint-open .hint-cost{ color:#d9ffd9; }
.hint-text{ padding:14px; font-size:14.5px; line-height:1.7; color:var(--ink); margin:0; }

/* flag box */
.flagbox{ background:var(--ink); padding:16px; }
.flagbox .p-h{ color:#8f9bd6; }
.flagbox .p-h::after{ background:#2a2a44; }
.flag-row{ display:flex; flex-direction:column; gap:12px; }
.flag-input{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:15px; }
.flag-preview{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px; color:var(--gold); margin:0; min-height:18px; overflow-wrap:anywhere;
}
.flag-msg{ font-family:var(--pixel); font-size:9px; line-height:1.8; margin:12px 0 0; padding:11px; }
.flag-msg:empty{ display:none; }
.msg-ok{ background:var(--pipe); color:#fff; }
.msg-bad{ background:var(--red); color:#fff; }
.msg-warn{ background:var(--gold); color:var(--ink); }

.solved-banner{
  background:var(--pipe); color:#fff; padding:16px; text-align:center;
  font-family:var(--pixel); font-size:11px; line-height:1.7;
  box-shadow:0 0 0 3px var(--ink);
}
.timeup-banner{
  background:var(--red); color:#fff; padding:14px; text-align:center;
  font-family:var(--pixel); font-size:9.5px; line-height:1.8;
  box-shadow:0 0 0 3px var(--ink); margin-bottom:18px;
}

.shake{ animation:shake .34s steps(2,end) 2; }
@keyframes shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-8px); } 75%{ transform:translateX(8px); } }

/* ============================ TOASTS ============================ */
.toasts{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  z-index:80; display:flex; flex-direction:column-reverse; align-items:center; gap:10px;
  pointer-events:none; width:min(420px,calc(100% - 24px));
}
.toast{
  font-family:var(--pixel); font-size:10px; line-height:1.7; text-align:center;
  padding:14px 16px; width:100%;
  background:var(--ink); color:#fff; box-shadow:0 0 0 3px #000, var(--drop-sm);
  animation:pop .22s steps(3) both, rise 3.4s ease-out both;
}
.toast-ok{ background:var(--pipe); }
.toast-bad{ background:var(--red); }
.toast-coin{ background:var(--gold); color:var(--ink); }
@keyframes pop{ from{ transform:translateY(14px) scale(.9); opacity:0; } }
@keyframes rise{ 0%,86%{ opacity:1; } 100%{ opacity:0; transform:translateY(-18px); } }

/* ============================ CONFIRM ============================ */
.scrim-confirm{ z-index:90; }
.confirm{
  position:fixed; z-index:100; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(400px,calc(100% - 28px));
  background:var(--paper); box-shadow:var(--edge), var(--drop);
  padding:22px; animation:popc .18s steps(3) both;
}
/* own keyframes so the centring translate is not clobbered mid-animation */
@keyframes popc{ from{ transform:translate(-50%,-50%) scale(.88); opacity:0; } }
.confirm h2{ font-size:12px; margin:0 0 14px; color:var(--ink); }
.confirm p{ font-size:15px; margin:0 0 20px; color:var(--ink); }
.confirm-actions{ display:flex; gap:12px; }
.confirm-actions .btn{ flex:1; font-size:10px; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:1080px){
  .node{ width:178px; }
  .node-title{ font-size:13.5px; }
}

/* --- tablet & phone: the map becomes a vertical climb --- */
@media (max-width:820px){
  .hud-inner{ grid-template-columns:repeat(3,1fr); gap:10px 12px; }
  .hud-player{ grid-column:1 / -1; }

  .map-stage{ height:auto; margin-top:18px; }
  .path-dots,.path-src{ display:none; }

  .nodes{
    position:static;
    display:flex; flex-direction:column; align-items:center; gap:66px;
    padding:56px 0 8px;
  }
  .nodes::before{ /* the vertical path */
    content:""; position:absolute; left:50%; top:0; bottom:0; width:8px;
    margin-left:-4px;
    background:repeating-linear-gradient(180deg,
      var(--paper) 0 10px, transparent 10px 24px);
    box-shadow:0 0 0 2px rgba(11,11,26,.2);
    z-index:-1;
  }
  .node{
    position:static; transform:none;
    width:100%; max-width:420px;
  }
  .node-title{ -webkit-line-clamp:3; }
}

@media (max-width:520px){
  :root{ --drop:5px 5px 0 0 rgba(11,11,26,.35); }
  body{ font-size:15px; }
  .screen{ padding-bottom:90px; }
  .hud-inner{ padding:11px 12px; gap:9px 8px; }
  .hud-value{ font-size:10px; }
  .hud-label{ font-size:7.5px; letter-spacing:0; }
  .hud-sub{ font-size:7.5px; }
  .coin{ width:12px; height:14px; }
  .mush{ width:13px; height:12px; }
  .hill-layer,.bush-layer{ bottom:44px; }
  .ground{ height:44px; }
  .h1,.h3{ width:180px; height:104px; }

  .panel{ width:100%; top:auto; height:92vh; height:92dvh;
    box-shadow:0 -6px 0 0 var(--ink); animation:slideup .2s steps(5) both; }
  @keyframes slideup{ from{ transform:translateY(100%); } }
  .panel-grip{
    display:block; width:64px; height:7px; margin:9px auto 0;
    background:var(--stone-dk); flex:none;
  }
  .toasts{ bottom:16px; }
  .btn{ font-size:10px; }
  .node-btn{ padding:2px 0; }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .toast{ animation:none !important; opacity:1; }
  .hud-time.is-urgent .hud-value{ animation:none !important; }
}

/* utility */
[hidden]{ display:none !important; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- sign-out control in the HUD ---------- */
.hud-exit { justify-content: center; }
.btn-exit {
  font-size: .58rem;
  line-height: 1;
  padding: .7rem .9rem;
  min-height: 44px;
  color: #fff;
  background: #c02a25;
  border: 3px solid #0b0b1a;
  box-shadow: 3px 3px 0 #0b0b1a;
  cursor: pointer;
}
.btn-exit:hover  { background: #e52521; }
.btn-exit:active { transform: translate(3px, 3px); box-shadow: none; }
.btn-exit:focus-visible { outline: 3px solid #fbd000; outline-offset: 2px; }
@media (max-width: 820px) {
  .btn-exit { font-size: .5rem; padding: .6rem .7rem; }
}

/* ---------- Cloudflare Turnstile ---------- */
.turnstile-box { display: flex; justify-content: center; margin: 4px 0 2px; min-height: 65px; }
.turnstile-box[hidden] { display: none; }