/* =========================================================================
   The Great Big Robot Brain Factory — HUD styles
   Chunky and legible for a five-year-old, calm enough for an adult.
   ========================================================================= */

:root{
  --accent:#4fd1c5;
  --accent-2:#ffd166;
  --ink:#0d1220;
  --paper:#ffffff;
  --hud-bg: rgba(10,14,26,.62);
  --hud-line: rgba(255,255,255,.14);
  --radius: 18px;
  --shadow: 0 10px 34px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.28);
  --font: "Nunito", "Quicksand", "Baloo 2", ui-rounded, "SF Pro Rounded",
          "Segoe UI Rounded", "Helvetica Neue", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; overflow:hidden; background:#070b14; }
body{
  font-family:var(--font);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
canvas#stage{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
canvas#stage.grabbing{ cursor:grabbing; }
canvas#stage.pointing{ cursor:pointer; }
canvas#stage.holding{ cursor:grabbing; }

button{ font-family:inherit; }

/* ------------------------------- boot ---------------------------------- */
#boot{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:radial-gradient(120% 100% at 50% 8%, #1c2440 0%, #0a0f1e 60%, #05070f 100%);
  transition:opacity .7s ease, visibility .7s;
}
#boot.gone{ opacity:0; visibility:hidden; pointer-events:none; }
.boot-inner{ text-align:center; padding:24px; max-width:560px; }
.boot-inner h1{
  font-size:clamp(26px,5.6vw,44px); margin:22px 0 6px; letter-spacing:-.02em; line-height:1.05;
  text-wrap:balance;
}
.boot-inner p{ margin:0; opacity:.72; font-size:clamp(14px,2.6vw,17px); }
.boot-bar{ margin:26px auto 0; width:min(280px,68vw); height:8px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; }
.boot-bar i{ display:block; height:100%; width:12%; border-radius:99px; background:linear-gradient(90deg,#4fd1c5,#ffd166); animation:bootslide 1.35s ease-in-out infinite; }
@keyframes bootslide{ 0%{ margin-left:-14%; width:26%; } 50%{ width:52%; } 100%{ margin-left:100%; width:24%; } }
.boot-blob{ display:flex; gap:12px; justify-content:center; }
.boot-blob span{
  width:20px; height:20px; border-radius:50% 50% 46% 54%/54% 48% 52% 46%;
  background:linear-gradient(160deg,#9ae6f0,#4fd1c5); animation:bootbob .9s ease-in-out infinite;
  box-shadow:0 6px 18px rgba(79,209,197,.35);
}
.boot-blob span:nth-child(2){ animation-delay:.12s; background:linear-gradient(160deg,#ffe6a0,#ffd166); box-shadow:0 6px 18px rgba(255,209,102,.3); }
.boot-blob span:nth-child(3){ animation-delay:.24s; background:linear-gradient(160deg,#f0a6d8,#e879b8); box-shadow:0 6px 18px rgba(232,121,184,.3); }
@keyframes bootbob{ 0%,100%{ transform:translateY(0) scale(1,1);} 40%{ transform:translateY(-16px) scale(.92,1.08);} 70%{ transform:translateY(2px) scale(1.1,.9);} }

/* -------------------------------- hud ---------------------------------- */
#hud{ position:fixed; inset:0; z-index:20; pointer-events:none; }
#hud [hidden]{ display:none !important; }
#hud button, #hud a, #hud .clickable{ pointer-events:auto; }

/* topbar */
#topbar{
  position:absolute; top:0; left:0; right:0; z-index:4;
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 0;
}
.stop-chip{
  display:flex; align-items:center; gap:10px;
  background:var(--hud-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--hud-line); border-radius:16px; padding:8px 14px 8px 10px; box-shadow:var(--shadow);
  max-width:min(70vw,460px);
}
.stop-num{
  display:flex; align-items:baseline; gap:1px; font-weight:800; letter-spacing:-.02em;
  background:var(--accent); color:#08111c; border-radius:11px; padding:5px 9px; box-shadow:0 3px 0 rgba(0,0,0,.22);
}
.stop-num b{ font-size:19px; line-height:1; }
.stop-num i{ font-style:normal; font-size:11px; opacity:.62; }
.stop-names{ display:flex; flex-direction:column; min-width:0; }
.stop-names strong{ font-size:15px; line-height:1.15; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stop-names em{ font-style:normal; font-size:12px; opacity:.66; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.left-stack{ display:flex; flex-direction:column; gap:7px; align-items:flex-start; min-width:0; }

/* what Sparky is right now — the spine of the walkthrough, always on screen */
#sparkychip{
  display:flex; align-items:center; gap:8px; padding:5px 12px 5px 6px;
  background:var(--hud-bg); border:1px solid var(--hud-line); border-radius:99px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:var(--shadow);
  max-width:min(64vw,300px);
}
#sparkychip .sp-blob{
  width:20px; height:20px; flex:0 0 auto; border-radius:50% 50% 46% 54%/54% 48% 52% 46%;
  background:var(--sparky, #cfc4ac);
  box-shadow:0 0 0 2px rgba(255,255,255,.14), 0 0 14px var(--sparky, #cfc4ac);
  animation:spbob 2.6s ease-in-out infinite;
}
@keyframes spbob{ 0%,100%{ transform:translateY(0) scale(1,1);} 50%{ transform:translateY(-2px) scale(1.04,.96);} }
#sparkychip .sp-txt{ display:flex; align-items:baseline; gap:6px; min-width:0; }
#sparkychip b{ font-size:12.5px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sparkychip i{ font-style:normal; font-size:10.5px; opacity:.5; font-weight:800; }

.top-actions{ display:flex; gap:8px; }
.icon-btn{
  width:42px; height:42px; display:grid; place-items:center; cursor:pointer;
  background:var(--hud-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--hud-line); border-radius:14px; color:#fff; box-shadow:var(--shadow);
  transition:transform .14s cubic-bezier(.3,1.5,.5,1), background .2s, border-color .2s;
}
.icon-btn svg{ width:21px; height:21px; fill:none; }
#btnSound svg > path:first-child{ fill:currentColor; }
.icon-btn:hover{ transform:translateY(-2px) scale(1.05); border-color:var(--accent); }
.icon-btn:active{ transform:translateY(1px) scale(.95); }
#btnSound .ico-off{ display:none; }
#btnSound.muted .ico-off{ display:block; }
#btnSound.muted .ico-on{ display:none; }
#btnSound.muted{ opacity:.6; }

/* kid line */
#kidline{
  position:absolute; left:50%; top:calc(64px + env(safe-area-inset-top,0px));
  transform:translateX(-50%); width:min(720px,92vw); text-align:center;
}
#kidline p{
  display:inline-block; margin:0; padding:12px 22px;
  font-size:clamp(18px,3.4vw,28px); font-weight:800; line-height:1.24; letter-spacing:-.015em;
  text-wrap:balance;
  background:linear-gradient(180deg, rgba(12,17,30,.78), rgba(12,17,30,.62));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--hud-line); border-radius:20px; box-shadow:var(--shadow);
  text-shadow:0 2px 12px rgba(0,0,0,.5);
  animation:kidpop .5s cubic-bezier(.2,1.5,.4,1) both;
}
#kidline p em{ font-style:normal; color:var(--accent); }
@keyframes kidpop{ from{ opacity:0; transform:translateY(-10px) scale(.94);} to{ opacity:1; transform:none;} }

/* hint */
#hint{
  position:absolute; left:50%; bottom:calc(126px + var(--safe-b)); transform:translateX(-50%);
  width:max-content; max-width:min(560px,90vw); text-align:center;
  opacity:0; transition:opacity .35s ease, transform .35s ease;
}
#hint.show{ opacity:1; }
#hint span{
  display:inline-block; padding:8px 16px; border-radius:99px; font-size:14px; font-weight:700;
  background:rgba(10,14,26,.7); border:1px solid var(--hud-line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
}
#hint span b{ color:var(--accent-2); }

/* readout (phase-supplied numbers) */
#readout{
  position:absolute; right:14px; top:calc(64px + env(safe-area-inset-top,0px));
  width:min(230px,44vw);
  background:var(--hud-bg); border:1px solid var(--hud-line); border-radius:16px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow); padding:10px 12px; font-size:13px;
}
#readout .ro-row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:3px 0; }
#readout .ro-row + .ro-row{ border-top:1px dashed rgba(255,255,255,.1); }
#readout .ro-k{ opacity:.66; font-weight:600; }
#readout .ro-v{ font-weight:800; font-variant-numeric:tabular-nums; color:var(--accent); }
#readout .ro-title{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.5; margin-bottom:4px; font-weight:800; }
#readout .ro-bar{ height:7px; border-radius:99px; background:rgba(255,255,255,.13); overflow:hidden; margin:5px 0 2px; }
#readout .ro-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .3s ease; }

/* navbar */
#navbar{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px calc(10px + var(--safe-b));
}
.nav-btn{
  display:flex; align-items:center; gap:7px; cursor:pointer; flex:0 0 auto;
  padding:13px 18px; border-radius:16px; font-size:16px; font-weight:800; letter-spacing:-.01em;
  color:#fff; background:var(--hud-bg); border:1px solid var(--hud-line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:var(--shadow);
  transition:transform .14s cubic-bezier(.3,1.5,.5,1), background .2s, border-color .2s, opacity .2s;
}
.nav-btn svg{ width:20px; height:20px; }
.nav-btn:hover{ transform:translateY(-2px); border-color:var(--accent); }
.nav-btn:active{ transform:translateY(2px) scale(.97); }
.nav-btn.primary{ background:var(--accent); color:#08111c; border-color:transparent; box-shadow:0 5px 0 rgba(0,0,0,.26), var(--shadow); }
.nav-btn.primary:hover{ filter:brightness(1.08); }
.nav-btn[disabled]{ opacity:.35; pointer-events:none; }

.mid{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
#dots{ display:flex; gap:6px; flex-wrap:nowrap; max-width:100%; overflow-x:auto; padding:2px; scrollbar-width:none; }
#dots::-webkit-scrollbar{ display:none; }
.dot{
  --dc:#8aa0bd;
  position:relative; flex:0 0 auto; cursor:pointer; width:34px; height:34px; border-radius:12px;
  border:1px solid rgba(255,255,255,.16); background:rgba(10,14,26,.6);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; place-items:center; font-size:15px; line-height:1; padding:0; color:#fff;
  transition:transform .16s cubic-bezier(.3,1.6,.5,1), background .2s, border-color .2s;
}
.dot:hover{ transform:translateY(-3px) scale(1.08); border-color:var(--dc); }
.dot.on{ background:var(--dc); border-color:transparent; transform:translateY(-3px) scale(1.12); box-shadow:0 4px 0 rgba(0,0,0,.25); }
.dot.done::after{
  content:""; position:absolute; right:-1px; top:-1px; width:9px; height:9px; border-radius:50%;
  background:#7ee787; border:2px solid #0b1120;
}
.dot .dot-tip{
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  background:#101827; color:#fff; border:1px solid rgba(255,255,255,.16);
  padding:5px 9px; border-radius:9px; font-size:11.5px; font-weight:700; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .16s, transform .16s; box-shadow:var(--shadow);
}
.dot:hover .dot-tip{ opacity:1; transform:translateX(-50%) translateY(0); }

.mid-actions{ display:flex; gap:8px; }
.pill{
  display:flex; align-items:center; gap:6px; cursor:pointer;
  padding:8px 14px; border-radius:99px; font-size:13.5px; font-weight:800; color:#08111c;
  background:var(--accent-2); border:1px solid transparent; box-shadow:0 3px 0 rgba(0,0,0,.22), var(--shadow);
  transition:transform .14s cubic-bezier(.3,1.5,.5,1), filter .2s;
}
.pill svg{ width:16px; height:16px; }
.pill:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.pill:active{ transform:translateY(2px) scale(.97); }
.pill.ghost{ background:rgba(10,14,26,.62); color:#fff; border-color:var(--hud-line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.pill.ghost.on{ background:#fff; color:#08111c; border-color:transparent; }

/* tech panel */
#techpanel{
  position:absolute; top:0; right:0; height:100%; width:min(410px,92vw); z-index:6;
  background:linear-gradient(180deg, rgba(9,13,24,.95), rgba(9,13,24,.92));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-left:1px solid var(--hud-line); box-shadow:-20px 0 60px rgba(0,0,0,.45);
  transform:translateX(102%); transition:transform .42s cubic-bezier(.4,0,.2,1);
  pointer-events:auto; display:flex; flex-direction:column;
}
#techpanel.open{ transform:none; }
.panel-scroll{ overflow-y:auto; padding:calc(22px + env(safe-area-inset-top,0px)) 22px calc(26px + var(--safe-b)); -webkit-overflow-scrolling:touch; }
.panel-close{
  position:absolute; top:calc(12px + env(safe-area-inset-top,0px)); right:12px; z-index:2;
  width:36px; height:36px; border-radius:11px; cursor:pointer; font-size:22px; line-height:1;
  background:rgba(255,255,255,.08); border:1px solid var(--hud-line); color:#fff;
}
.panel-close:hover{ background:rgba(255,255,255,.16); }
.panel-kicker{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.5; font-weight:800; }
#techpanel h2{ margin:6px 0 14px; font-size:23px; letter-spacing:-.02em; color:var(--accent); }
#techBody{ font-size:14.6px; line-height:1.62; opacity:.92; font-weight:500; }
#techBody p{ margin:0 0 12px; }
#techBody strong{ color:#fff; }
#techBody ul{ margin:0 0 12px; padding-left:18px; }
#techBody li{ margin:0 0 6px; }
#techBody code{ font-family:var(--mono); font-size:12.6px; background:rgba(255,255,255,.09); padding:1px 5px; border-radius:5px; }
.panel-terms{ margin-top:16px; border-top:1px solid var(--hud-line); padding-top:14px; display:flex; flex-direction:column; gap:9px; }
.panel-terms .term{ font-size:13px; line-height:1.5; }
.panel-terms .term b{ color:var(--accent-2); display:block; font-size:12.4px; letter-spacing:.02em; }
.panel-terms .term span{ opacity:.8; }

/* overlays */
#mapoverlay, #helpoverlay{
  position:absolute; inset:0; z-index:8; display:grid; place-items:center; padding:18px;
  background:rgba(4,7,14,.66); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; pointer-events:none;
}
#mapoverlay.open, #helpoverlay.open{ opacity:1; visibility:visible; pointer-events:auto; }
.map-card, .help-card{
  position:relative; width:min(560px,100%); max-height:86vh; overflow-y:auto;
  background:#0d1424; border:1px solid var(--hud-line); border-radius:24px; box-shadow:var(--shadow);
  padding:24px; -webkit-overflow-scrolling:touch;
  transform:scale(.94); transition:transform .34s cubic-bezier(.2,1.4,.4,1);
}
#mapoverlay.open .map-card, #helpoverlay.open .help-card{ transform:none; }
.map-card h2, .help-card h2{ margin:0 0 4px; font-size:24px; letter-spacing:-.02em; }
.map-sub{ margin:0 0 16px; opacity:.6; font-size:14px; }
#mapList{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; counter-reset:m; }
#mapList li{ margin:0; }
#mapList button{
  width:100%; display:flex; align-items:center; gap:12px; cursor:pointer; text-align:left;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); border-radius:14px;
  padding:10px 12px; color:#fff; transition:background .18s, transform .18s, border-color .18s;
}
#mapList button:hover{ background:rgba(255,255,255,.1); transform:translateX(4px); }
#mapList button.on{ border-color:var(--accent); background:rgba(255,255,255,.09); }
#mapList .m-ico{ width:36px; height:36px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center; font-size:18px; }
#mapList .m-txt{ min-width:0; }
#mapList .m-txt b{ display:block; font-size:14.5px; letter-spacing:-.01em; }
#mapList .m-txt span{ display:block; font-size:12.4px; opacity:.62; }
#mapList .m-n{ margin-left:auto; font-size:11px; opacity:.4; font-weight:800; font-variant-numeric:tabular-nums; }
.help-list{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:11px; }
.help-list li{ display:flex; gap:12px; align-items:flex-start; font-size:14.4px; line-height:1.5; }
.help-ico{ font-size:20px; flex:0 0 auto; width:26px; text-align:center; }
.help-list b{ color:var(--accent); }
.help-foot{ margin:0; font-size:12.4px; opacity:.6; }
kbd{
  font-family:var(--mono); font-size:11px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16); border-bottom-width:2px; border-radius:5px; padding:1px 5px;
}

/* travel flash */
#travelflash{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(120% 90% at 50% 50%, transparent 40%, var(--accent) 160%);
  mix-blend-mode:screen; transition:opacity .5s ease;
}
#travelflash.on{ opacity:.3; }

.noscript{
  position:fixed; inset:0; display:grid; place-items:center; text-align:center; padding:30px;
  background:#0a0f1e; color:#fff; font-family:var(--font); font-size:18px; line-height:1.6; z-index:99;
}

/* --------------------------- responsive -------------------------------- */
@media (max-width: 860px){
  .mid-actions .pill span{ display:none; }
  .mid-actions .pill{ padding:9px 12px; }
  .mid-actions .pill svg{ width:18px; height:18px; }
}
@media (max-width: 680px){
  #navbar{ flex-wrap:wrap; gap:8px; padding:8px 10px calc(8px + var(--safe-b)); }
  .mid{ order:-1; width:100%; }
  .nav-btn{ flex:1 1 0; justify-content:center; padding:12px 10px; font-size:15px; }
  /* the sparky chip takes the second row, so the kid line drops below it */
  #kidline{ top:calc(104px + env(safe-area-inset-top,0px)); width:96vw; }
  #kidline p{ padding:9px 14px; border-radius:16px; }
  /* readout bottom-left, hint bottom-right — they share the strip above the nav */
  #hint{ left:auto; right:8px; transform:none; bottom:calc(184px + var(--safe-b)); max-width:min(210px,48vw); text-align:right; }
  #hint span{ font-size:12px; padding:6px 12px; line-height:1.35; }
  #readout{ top:auto; bottom:calc(184px + var(--safe-b)); right:auto; left:8px; width:min(172px,45vw); font-size:11px; padding:7px 9px; }
  #readout .ro-row{ padding:2px 0; }
  #readout .ro-bar{ height:5px; margin:3px 0 1px; }
  #sparkychip{ max-width:60vw; }
  .stop-names em{ display:none; }
  #sparkychip{ padding:4px 10px 4px 5px; }
  #sparkychip b{ font-size:11.5px; }
  .dot{ width:30px; height:30px; border-radius:10px; font-size:13px; }
}
@media (max-width: 400px){
  .nav-btn span{ font-size:14px; }
  #kidline p{ font-size:16px; }
}
@media (max-height: 520px){
  #kidline p{ font-size:15px; padding:7px 12px; }
  #readout{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.08s !important; }
}