/* Beyond Their Years: game design system (tokens + components). One file, used on every game screen.
   Fonts: Lilita One (titles, sparingly) + Baloo 2 (everything else). */
@import url('/fonts/fonts.css');

:root{
  /* chrome */
  --g-navy-950:#0A1730; --g-navy-900:#0F2147; --g-navy-800:#16306A; --g-navy-700:#1F3F86; --g-navy-line:#335BB0;
  /* rewards */
  --g-gold:#FFC93C; --g-gold-hi:#FFE08A; --g-gold-deep:#D98A0B; --g-gold-ink:#5A3500;
  /* progress */
  --g-sky:#38C6F4; --g-teal:#19B69B; --g-green:#3FC35A; --g-green-deep:#23913B;
  /* surfaces */
  --g-parch:#F7E9C6; --g-parch-hi:#FFF6DE; --g-parch-edge:#D6B474; --g-parch-ink:#3B2A12;
  --g-cream:#FFFBEF; --g-ink:#14213D; --g-ink-soft:#4A5878; --g-white:#FFFFFF;
  /* feedback */
  --g-coral:#FF6F61; --g-coral-deep:#D9473B;
  /* worlds */
  --w-ahmes:#E8A33A; --w-agencyx:#E5574A; --w-pythagoras:#2E9CD6; --w-euclid:#1FAE8E; --w-mentalmath:#8E6CF0; --w-quest:#F2862A; --w-poly:#E2558C;
  /* type */
  --g-display:'Lilita One','Baloo 2',system-ui,sans-serif;
  --g-ui:'Baloo 2',ui-rounded,system-ui,sans-serif;
  /* shape */
  --g-r-sm:12px; --g-r-md:18px; --g-r-lg:26px; --g-r-pill:999px;
  --g-edge:0 5px 0;           /* the "3D" bottom edge on tactile things */
  --g-lift:0 14px 30px rgba(6,16,40,.35);
  /* spacing */
  --g-s1:4px; --g-s2:8px; --g-s3:12px; --g-s4:16px; --g-s5:24px; --g-s6:32px; --g-s7:48px;
  /* motion */
  --g-fast:120ms; --g-mid:260ms; --g-slow:600ms; --g-bounce:cubic-bezier(.34,1.56,.64,1);
  /* tap */
  --g-tap:48px;
}

/* ---------- world background ---------- */
.g-world,.g-world *,.g-world *::before,.g-world *::after{box-sizing:border-box}
.g-world{margin:0;min-height:100vh;color:var(--g-white);font-family:var(--g-ui);line-height:1.45;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(56,198,244,.28), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(25,182,155,.18), transparent 60%),
    linear-gradient(180deg,var(--g-navy-800),var(--g-navy-950) 70%);
}
html:has(.g-world){background:var(--g-navy-950)}
.g-world :where(a){color:inherit}
.g-wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.g-title{font-family:var(--g-display);font-weight:400;letter-spacing:.01em;line-height:1.05;margin:0;
  text-shadow:0 3px 0 rgba(0,0,0,.25)}
.g-title--xl{font-size:clamp(34px,6vw,58px)} .g-title--lg{font-size:clamp(26px,4.5vw,40px)} .g-title--md{font-size:clamp(20px,3.4vw,28px)}
.g-sub{font-size:17px;font-weight:600;color:rgba(255,255,255,.82);margin:6px 0 0}
.g-ico{width:1em;height:1em;display:inline-block;vertical-align:-.15em;flex:none}
:where(.g-world) :focus-visible{outline:3px solid var(--g-gold);outline-offset:3px;border-radius:8px}

/* ---------- HUD ---------- */
.g-hud{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,var(--g-navy-900),var(--g-navy-950));
  border-bottom:3px solid var(--g-navy-line);box-shadow:0 6px 18px rgba(0,0,0,.3);padding-top:env(safe-area-inset-top,0px)}
.g-hud__in{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px}
.g-brand{font-family:var(--g-display);font-size:22px;line-height:.95;color:var(--g-gold);text-decoration:none;white-space:nowrap;
  text-shadow:0 2px 0 var(--g-gold-deep),0 4px 8px rgba(0,0,0,.35)}
.g-brand small{display:block;font-size:.62em;color:var(--g-white);text-shadow:0 2px 0 rgba(0,0,0,.4)}
.g-player{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.g-avatar{--c:var(--g-sky);width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  font:800 21px var(--g-ui);color:#fff;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 70%,#fff),var(--c));
  border:3px solid var(--g-gold);box-shadow:0 0 0 3px var(--g-navy-950),0 4px 10px rgba(0,0,0,.4)}
.g-lvl{min-width:0;flex:1 1 160px;max-width:300px}
.g-lvl b{display:block;font-size:16px;font-weight:800;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-xp{height:12px;border-radius:var(--g-r-pill);background:rgba(255,255,255,.12);border:2px solid rgba(0,0,0,.35);overflow:hidden;margin:4px 0 2px}
.g-xp i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:linear-gradient(180deg,#7CF08F,var(--g-green));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45);transition:width var(--g-slow) ease-out}
.g-lvl small{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
.g-stats{display:flex;align-items:center;gap:8px;margin-left:auto}
.g-chip{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:var(--g-r-pill);
  background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.14);font-weight:800;font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums}
.g-chip .g-ico{font-size:22px}
.g-chip--star .g-ico{color:var(--g-gold);filter:drop-shadow(0 2px 0 var(--g-gold-deep))}
.g-chip--fire .g-ico{color:#FF8A3D}
.g-chip span small{font-weight:700;font-size:13px;color:rgba(255,255,255,.75)}
.g-iconbtn{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--g-navy-700);border:2px solid var(--g-navy-line);
  color:#9FD8FF;text-decoration:none;font-size:22px;box-shadow:var(--g-edge) var(--g-navy-950);transition:transform var(--g-fast)}
.g-iconbtn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--g-navy-950)}
@media (max-width:640px){
  .g-hud__in{flex-wrap:wrap;gap:8px 10px;padding:8px 12px}
  .g-brand{font-size:17px}
  .g-player{order:3;flex-basis:100%}
  .g-lvl{max-width:none}
  .g-stats{gap:6px}
  .g-chip{height:36px;padding:0 10px;font-size:15px}
  .g-chip span small{display:none}
  .g-avatar{width:40px;height:40px;font-size:18px}
}

/* ---------- buttons ---------- */
.g-btn{--bg:var(--g-gold);--edge:var(--g-gold-deep);--fg:var(--g-gold-ink);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--g-tap);padding:10px 22px;border:0;border-radius:var(--g-r-md);
  font:800 18px var(--g-ui);color:var(--fg);text-decoration:none;cursor:pointer;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 70%,#fff),var(--bg) 55%);
  box-shadow:var(--g-edge) var(--edge),0 10px 18px rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.55);
  transition:transform var(--g-fast),box-shadow var(--g-fast);-webkit-tap-highlight-color:transparent}
.g-btn:hover{filter:brightness(1.04)}
.g-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge),0 4px 8px rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.55)}
.g-btn--teal{--bg:var(--g-teal);--edge:#0E7A67;--fg:#fff}
.g-btn--green{--bg:var(--g-green);--edge:var(--g-green-deep);--fg:#fff}
.g-btn--navy{--bg:var(--g-navy-700);--edge:var(--g-navy-950);--fg:#fff}
.g-btn--ghost{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.g-btn--xl{min-height:72px;padding:14px 30px;font-size:clamp(20px,3.2vw,26px);border-radius:var(--g-r-lg);border:3px solid var(--g-navy-950)}
.g-btn--xl .g-compass{width:46px;height:46px;flex:none}
.g-btn[disabled],.g-btn[aria-disabled="true"]{filter:grayscale(.8);opacity:.6;pointer-events:none}

/* ---------- panels ---------- */
.g-panel{position:relative;background:linear-gradient(180deg,rgba(31,63,134,.92),rgba(15,33,71,.94));border:3px solid var(--g-navy-line);
  border-radius:var(--g-r-lg);box-shadow:var(--g-lift),inset 0 2px 0 rgba(255,255,255,.12);padding:20px}
.g-panel--parch{background:linear-gradient(180deg,var(--g-parch-hi),var(--g-parch));color:var(--g-parch-ink);border-color:var(--g-parch-edge);
  box-shadow:var(--g-lift),inset 0 0 0 6px rgba(214,180,116,.25)}
.g-panel--cream{background:var(--g-cream);color:var(--g-ink);border-color:#E5D7AE}

/* ---------- world card (a place on the map / list) ---------- */
.g-place{--w:var(--g-sky);position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;text-decoration:none;color:#fff;
  padding:12px 14px 12px 12px;border-radius:var(--g-r-lg);background:linear-gradient(180deg,color-mix(in srgb,var(--w) 55%,var(--g-navy-800)),color-mix(in srgb,var(--w) 25%,var(--g-navy-950)));
  border:3px solid color-mix(in srgb,var(--w) 70%,#fff);box-shadow:var(--g-edge) color-mix(in srgb,var(--w) 35%,#000),var(--g-lift);transition:transform var(--g-mid) var(--g-bounce)}
.g-place:hover{transform:translateY(-3px)}
.g-place:active{transform:translateY(2px)}
.g-place__art{position:relative;width:112px;height:94px}
.g-place__art img.h{width:100%;height:100%;object-fit:cover;border-radius:16px;border:3px solid rgba(255,255,255,.85)}
.g-place__art img.f{position:absolute;right:-10px;bottom:-10px;width:48px;height:48px;border-radius:50%;border:3px solid var(--g-gold);background:var(--g-parch);object-fit:cover}
.g-place h3{font-family:var(--g-display);font-weight:400;font-size:21px;line-height:1.05;margin:0}
.g-place p{margin:2px 0 6px;font-weight:700;font-size:14.5px;color:rgba(255,255,255,.85)}
.g-place.is-locked{filter:saturate(.35) brightness(.85)}
.g-place.is-locked .g-place__art::after{content:"";position:absolute;inset:0;border-radius:16px;background:rgba(10,23,48,.45)}
.g-lockbadge{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:13.5px;color:var(--g-gold-hi)}

/* ---------- progress ---------- */
.g-bar{display:block;height:14px;border-radius:var(--g-r-pill);background:rgba(0,0,0,.28);border:2px solid rgba(0,0,0,.25);overflow:hidden}
.g-bar i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:linear-gradient(180deg,#8FF0FF,var(--g-sky));box-shadow:inset 0 2px 0 rgba(255,255,255,.5)}
.g-stars{display:inline-flex;gap:2px;font-size:20px;line-height:1}
.g-stars .g-ico{color:rgba(255,255,255,.25)}
.g-stars .on{color:var(--g-gold);filter:drop-shadow(0 2px 0 var(--g-gold-deep))}

/* ---------- lesson node (adventure path) ---------- */
.g-node{--w:var(--g-sky);--fill:var(--w);position:relative;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;text-decoration:none;
  font:400 30px var(--g-display);color:#fff;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--fill) 60%,#fff),var(--fill) 70%);
  border:4px solid #fff;box-shadow:0 6px 0 color-mix(in srgb,var(--fill) 45%,#000),0 12px 22px rgba(0,0,0,.35)}
.g-node.is-done{--fill:var(--g-teal)}
.g-node.is-current{width:92px;height:92px;font-size:36px;--fill:var(--g-gold);color:var(--g-gold-ink);animation:g-glow 1.8s ease-in-out infinite}
.g-node.is-locked{--fill:#6B7A99;color:rgba(255,255,255,.85);font-size:0}
.g-node.is-locked .g-ico{font-size:30px}
@keyframes g-glow{0%,100%{box-shadow:0 6px 0 #8A5A00,0 0 0 0 rgba(255,201,60,.65)}50%{box-shadow:0 6px 0 #8A5A00,0 0 0 16px rgba(255,201,60,0)}}

/* ---------- character + speech ---------- */
.g-guide{display:flex;align-items:flex-end;gap:10px}
.g-guide img{width:84px;height:84px;border-radius:50%;border:4px solid var(--g-gold);background:var(--g-parch);object-fit:cover;flex:none;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.g-bubble{position:relative;background:#fff;color:var(--g-ink);border-radius:20px;padding:12px 16px;font-weight:700;font-size:16.5px;line-height:1.35;
  box-shadow:0 6px 0 rgba(0,0,0,.15),0 10px 22px rgba(0,0,0,.2);max-width:34ch}
.g-bubble::before{content:"";position:absolute;left:-10px;bottom:16px;border:10px solid transparent;border-right-color:#fff;border-left:0}

/* ---------- answers + feedback ---------- */
.g-answer{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:10px 16px;border-radius:var(--g-r-md);cursor:pointer;text-align:left;
  font:700 18px var(--g-ui);color:var(--g-ink);background:#fff;border:3px solid #D7DEEC;box-shadow:0 4px 0 #C2CBDD;transition:transform var(--g-fast)}
.g-answer:active{transform:translateY(3px);box-shadow:0 1px 0 #C2CBDD}
.g-answer .k{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#EEF2FA;font-weight:800;color:var(--g-ink-soft);flex:none}
.g-answer.is-right{background:#E6F9EA;border-color:var(--g-green);box-shadow:0 4px 0 var(--g-green-deep)}
.g-answer.is-right .k{background:var(--g-green);color:#fff}
.g-answer.is-wrong{background:#FFF0EE;border-color:var(--g-coral);box-shadow:0 4px 0 var(--g-coral-deep);animation:g-shake .32s}
@keyframes g-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.g-feedback{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--g-r-md);font-weight:800;font-size:18px;color:#fff}
.g-feedback--right{background:linear-gradient(180deg,#5AD873,var(--g-green));box-shadow:var(--g-edge) var(--g-green-deep)}
.g-feedback--try{background:linear-gradient(180deg,#5B83D8,var(--g-navy-700));box-shadow:var(--g-edge) var(--g-navy-950)}

/* ---------- rewards ---------- */
.g-float{position:fixed;z-index:100;pointer-events:none;font:800 22px var(--g-ui);color:var(--g-gold);text-shadow:0 2px 0 var(--g-gold-deep),0 4px 10px rgba(0,0,0,.4);
  animation:g-float 1.1s ease-out forwards}
@keyframes g-float{0%{opacity:0;transform:translateY(8px) scale(.8)}15%{opacity:1;transform:translateY(0) scale(1.1)}100%{opacity:0;transform:translateY(-60px) scale(1)}}
.g-badge{display:inline-grid;justify-items:center;gap:6px;text-align:center;width:110px}
.g-badge svg{width:84px;height:92px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.g-badge b{font-size:14px;line-height:1.15}
.g-badge.is-locked svg{filter:grayscale(1) brightness(.7)}
.g-chest{width:96px;height:84px}

@media (prefers-reduced-motion:reduce){
  .g-world *,.g-world *::before,.g-world *::after{animation:none!important;transition:none!important}
}

/* ---------- house that builds itself (progress = how much of it stands) ----------
   Today: one finished picture, revealed in color from the ground up over a gray ghost, with scaffolding at the build line.
   With staged art (0/25/50/75/100%), game.js swaps in the stage picture under the same reveal. */
.g-build{--p:0%;position:relative;width:100%;aspect-ratio:296/250;isolation:isolate}
.g-build img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:18px}
.g-build .ghost{filter:grayscale(1) brightness(1.2) contrast(.5);opacity:.42}
.g-build .built{clip-path:inset(calc(100% - var(--p)) 0 0 0);transition:clip-path 1s ease-out}
.g-build .scaf{position:absolute;left:4%;right:4%;height:16%;top:calc(100% - var(--p) - 8%);transition:top 1s ease-out;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0 6%,#8B5A2B 6% 8%,transparent 8% 30%,#8B5A2B 30% 32%,transparent 32% 54%,#8B5A2B 54% 56%,transparent 56% 78%,#8B5A2B 78% 80%,transparent 80%),
    linear-gradient(180deg,transparent 0 18%,#A86F38 18% 26%,transparent 26% 72%,#A86F38 72% 80%,transparent 80%);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.g-build.is-empty .scaf,.g-build.is-done .scaf{display:none}
.g-build.is-empty::after{content:"";position:absolute;left:18%;right:18%;bottom:6%;height:10%;border:3px dashed rgba(255,255,255,.55);border-radius:50%}
.g-build.is-done .built{filter:drop-shadow(0 0 18px rgba(255,201,60,.55))}
.g-build__pct{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);white-space:nowrap;padding:3px 12px;border-radius:999px;font:800 14px var(--g-ui);
  background:var(--g-navy-950);color:var(--g-gold);border:2px solid var(--g-gold)}

.g-avatar.has-img{background:var(--c);overflow:hidden;padding:0}.g-avatar.has-img img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;border-radius:50%}

/* shared card padding: keep text off rounded borders */
:where(.g-panel,.g-card){box-sizing:border-box;padding:18px 20px}