@font-face{font-family:'Baloo 2';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/baloo-2-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/baloo-2-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/baloo-2-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/quicksand-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/quicksand-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/quicksand-latin-700-normal.woff2') format('woff2');}

  /* Deliberately single-theme: a night-mission cockpit. Colors are painted
     explicitly (no prefers-color-scheme branching) so the world holds on
     any host ground, light or dark. */
  :root{
    --space-900:#0B1B3A;
    --space-800:#122852;
    --space-750:#173060;
    --space-700:#1F3B70;
    --line: rgba(226,232,255,0.10);
    --line-strong: rgba(226,232,255,0.18);
    --accent:#FF6B4A;
    --accent-ink:#3A1206;
    --gold:#FFC94A;
    --good:#5FD98A;
    --bad:#F0455C;
    --ink:#F5F3EA;
    --ink-dim:#9FB0D6;
    --ink-faint:#8A9CC6;
    --font-display:'Baloo 2', ui-rounded, 'Segoe UI', system-ui, sans-serif;
    --font-body:'Quicksand', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  }

  *{box-sizing:border-box;}
  [hidden]{ display:none !important; }
  html{height:100%;}
  body{
    margin:0;
    background:var(--space-900);
    color:var(--ink);
    font-family:var(--font-body);
    font-weight:600;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  /* ---------- starfield ---------- */
  #stars, #stars2{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:transparent;
  }
  #stars{ opacity:0.9; animation:twinkle 4s ease-in-out infinite alternate; }
  #stars2{ opacity:0.5; animation:twinkle 6s ease-in-out infinite alternate-reverse; }
  @keyframes twinkle{ from{opacity:0.35;} to{opacity:0.95;} }
  .glow-a{position:fixed; top:-120px; right:-100px; width:420px; height:420px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,107,74,0.20), transparent 70%); z-index:0; pointer-events:none;}
  .glow-b{position:fixed; bottom:-160px; left:-120px; width:480px; height:480px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,201,74,0.12), transparent 70%); z-index:0; pointer-events:none;}

  /* ---------- header ---------- */
  .hud{
    position:relative; z-index:2;
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
    padding:16px clamp(14px,4vw,32px);
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, rgba(11,27,58,0.9), rgba(11,27,58,0.55));
    backdrop-filter:blur(6px);
  }
  .hud-title{
    font-family:var(--font-display); font-weight:700; font-size:clamp(18px,3vw,22px);
    display:flex; align-items:center; gap:8px; white-space:nowrap;
  }
  button.hud-title{ appearance:none; background:none; border:none; color:var(--ink); padding:4px 6px; margin:-4px -6px; border-radius:10px; cursor:pointer; }
  button.hud-title:hover{ background:rgba(255,255,255,0.06); }
  button.hud-title:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
  .hud-mid{
    flex:1; display:flex; flex-direction:column; align-items:center; min-width:0;
  }
  .hud-round{
    font-size:14px; color:var(--ink-dim);
    font-weight:700;
  }
  .hud-timerwrap{ width:min(320px, 42vw); }
  .hud-timer{
    font-family:var(--font-display); font-variant-numeric:tabular-nums;
    font-size:clamp(18px,3.4vw,24px); text-align:center; line-height:1.1;
  }
  .hud-timer.low{ color:var(--bad); }
  .timerbar{ height:6px; border-radius:99px; background:var(--space-700); overflow:hidden; margin-top:4px;}
  .timerbar > i{ display:block; height:100%; width:100%; background:var(--gold); transition:width 1s linear, background .3s ease; border-radius:99px;}
  .timerbar.low > i{ background:var(--bad); }
  .hud-stats{ display:flex; gap:14px; font-size:13px; color:var(--ink-dim); font-weight:700; white-space:nowrap;}
  .hud-stats b{ color:var(--ink); font-family:var(--font-display); font-size:16px; font-weight:700; font-variant-numeric:tabular-nums;}
  .hud-right{ display:flex; align-items:center; gap:14px; }
  .iconbtn{
    appearance:none; border:1px solid var(--line-strong); background:var(--space-700); color:var(--ink);
    width:38px; height:38px; min-width:38px; border-radius:12px; font-size:18px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .12s ease, transform .12s ease, filter .12s ease;
  }
  .iconbtn:hover{ filter:brightness(1.2); }
  .iconbtn:active{ transform:scale(0.92); }
  .iconbtn:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

  /* ---------- confirm modal ---------- */
  .modal-overlay{
    position:fixed; inset:0; z-index:20; background:rgba(6,14,32,0.72);
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .modal-panel{
    width:100%; max-width:360px;
    background:linear-gradient(180deg, var(--space-800), var(--space-750));
    border:1px solid var(--line-strong); border-radius:20px; padding:26px 22px;
    text-align:center; box-shadow:0 30px 60px -30px rgba(0,0,0,0.6);
  }
  .modal-text{ margin:0 0 20px; font-size:15px; color:var(--ink); line-height:1.5; font-weight:700; font-family:var(--font-display); }
  .modal-actions{ display:flex; flex-direction:column; gap:10px; }
  .modal-actions .cta{ font-size:15px; padding:13px 16px; }

  /* ---------- stage ---------- */
  .stage{
    position:relative; z-index:1;
    flex:1;
    display:flex; align-items:center; justify-content:center;
    padding:clamp(16px,4vw,40px);
  }

  /* ---------- start screen ---------- */
  .panel{
    width:100%; max-width:640px;
    background:linear-gradient(180deg, var(--space-800), var(--space-750));
    border:1px solid var(--line-strong);
    border-radius:26px;
    padding:clamp(22px,5vw,40px);
    box-shadow:0 30px 60px -30px rgba(0,0,0,0.6);
  }
  .eyebrow{
    font-size:14px; color:var(--gold);
    font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:6px;
  }
  .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); }
  h2.title, .title{
    font-family:var(--font-display); font-size:clamp(26px,5.5vw,38px); margin:0 0 6px;
    text-wrap:balance; font-weight:700; line-height:1.1;
  }
  p.lead{ margin:0 0 22px; color:var(--ink-dim); font-size:15px; max-width:56ch; line-height:1.55;}

  .field-label{ font-size:16px; color:var(--ink);  font-weight:700; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between;}
  .quicklinks{ display:flex; gap:10px; }
  .quicklinks button{
    background:none; border:none; color:var(--gold); font-family:var(--font-body); font-weight:700;
    font-size:12px; cursor:pointer; padding:2px 0; text-decoration:underline; text-underline-offset:3px;
  }
  .opgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:24px; }
  .opbtn{
    appearance:none; border:2px solid rgba(226,232,255,0.38); background:var(--space-700); color:var(--ink);
    box-shadow:0 5px 0 rgba(0,0,0,0.28);
    border-radius:18px; padding:14px 8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px;
    font-family:var(--font-display); font-weight:700; transition:transform .12s ease, background .15s ease, border-color .15s ease;
  }
  .opbtn .on1{ font-size:32px; line-height:1.1; font-variant-numeric:tabular-nums; }
  .opbtn .on2{ font-size:16px; font-weight:700; }
  .opbtn:hover{ transform:translateY(-2px); border-color:var(--gold); box-shadow:0 7px 0 rgba(0,0,0,0.28); }
  .opbtn:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,0.28); }
  .opbtn.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .opbtn:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
  .pillrow{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
  .pill{
    appearance:none; border:2px solid var(--line-strong); background:transparent; color:var(--ink);
    border-radius:99px; padding:10px 8px; font-family:var(--font-body); font-weight:700; font-size:14px; cursor:pointer; line-height:1.2;
    transition:background .15s ease, border-color .15s ease;
  }
  .pill:hover{ border-color:var(--gold); }
  .pill.on{ border-color:var(--gold); background:rgba(255,201,74,0.16); color:var(--gold); }
  .pill:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
  .modelist{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
  .modeopt{
    appearance:none; display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
    padding:12px 14px; border-radius:14px; border:2px solid rgba(226,232,255,0.30); background:var(--space-700); color:var(--ink);
    font-family:var(--font-body); font-weight:700; font-size:15px; line-height:1.25; transition:border-color .15s ease, background .15s ease;
  }
  .modeopt .rd{ width:20px; height:20px; flex:none; border-radius:50%; border:2px solid var(--ink-dim); }
  .modeopt:hover{ border-color:var(--gold); }
  .modeopt.on{ border-color:var(--gold); background:rgba(255,201,74,0.16); }
  .modeopt.on .rd{ border-color:var(--gold); background:radial-gradient(circle, var(--gold) 0 46%, transparent 52%); }
  .modeopt:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
  .customhint{ margin:2px 0 10px; font-size:13px; color:var(--ink-dim); }
  .morelink{
    display:block; margin:16px auto 0; background:none; border:none; color:var(--ink-dim); font-family:var(--font-body);
    font-weight:700; font-size:14px; cursor:pointer; padding:8px 10px; text-decoration:underline; text-underline-offset:3px;
  }
  .morelink:hover{ color:var(--ink); }
  .morepanel{ margin-top:6px; padding-top:14px; border-top:1px dashed var(--line-strong); }
  #chips .chip{ background:transparent; border-style:dashed; color:var(--ink-faint); }
  #chips .chip.on{ background:var(--accent); border-style:solid; border-color:var(--accent); color:var(--accent-ink); }
  .chips{ display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; margin-bottom:20px; }
  .chip{
    appearance:none; border:2px solid var(--line-strong); background:var(--space-700);
    color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:18px;
    border-radius:14px; padding:10px 0; cursor:pointer; transition:transform .12s ease, background .15s ease, border-color .15s ease;
  }
  .chip:hover{ transform:translateY(-1px); }
  .chip.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .chip:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

  .cta{
    width:100%; border:none; border-radius:16px; padding:16px 20px;
    background:var(--accent); color:var(--accent-ink); font-family:var(--font-display);
    font-weight:700; font-size:19px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
    box-shadow:0 14px 30px -12px rgba(255,107,74,0.55);
    transition:transform .12s ease, box-shadow .12s ease, opacity .15s ease;
  }
  .cta:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(255,107,74,0.65); }
  .cta:disabled{ opacity:0.45; cursor:not-allowed; transform:none; box-shadow:none; }
  .cta:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
  .cta.ghost{
    background:transparent; color:var(--ink); border:2px solid var(--line-strong); box-shadow:none;
  }
  .cta.ghost:hover{ border-color:var(--accent); }

  .hint{ text-align:center; font-size:13px; color:var(--gold); margin-top:10px; min-height:16px; font-weight:700;}
  .bestscore{
    margin-top:20px; padding-top:16px; border-top:1px dashed var(--line-strong);
    font-size:13px; color:var(--ink-dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px;
  }
  .bestscore b{ color:var(--gold); font-family:var(--font-display); font-weight:700; }

  /* ---------- game screen ---------- */
  .gamewrap{
    width:100%; max-width:840px; display:grid; grid-template-columns:minmax(150px,220px) 1fr; gap:clamp(10px,3vw,28px);
    align-items:center;
  }
  .track{
    --rw:150px;
    height:min(38vh,300px); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  }
  .track .rail{ position:absolute; top:0; bottom:0; left:50%; width:3px; transform:translateX(-50%);
    background:repeating-linear-gradient(180deg, var(--line-strong) 0 8px, transparent 8px 18px); }
  .track .mark{ position:absolute; left:50%; width:12px; height:12px; border-radius:50%; transform:translate(-50%,50%);
    background:var(--space-700); border:2px solid var(--line-strong); }
  .track .mark.hit{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 12px var(--gold); }
  .moon{
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:calc(100% + var(--rw) * 0.77 - 6px); width:calc(var(--rw) * 0.56);
    pointer-events:none; filter:drop-shadow(0 0 14px rgba(255,236,170,0.35));
    transition:filter .4s ease, transform .4s ease;
  }
  .moon svg{ display:block; width:100%; height:auto; }
  .moon.reached{ filter:drop-shadow(0 0 26px rgba(255,236,170,0.9)); transform:translateX(-50%) scale(1.1); }
  .rocket{
    position:absolute; left:50%; bottom:0; transform:translate(-50%,50%);
    transition:bottom .35s cubic-bezier(.2,.8,.3,1);
    filter:drop-shadow(0 8px 14px rgba(0,0,0,0.45));
    width:min(100%, 150px);
  }
  .rocket svg{ display:block; width:100%; height:auto; }
  .rocket.launch{ animation:launch .7s ease-in-out; }
  @keyframes launch{ 0%{transform:translate(-50%,50%) scale(1);} 40%{transform:translate(-50%,50%) scale(1.14);} 100%{transform:translate(-50%,50%) scale(1);} }
  .rocket.atop{ filter:drop-shadow(0 0 18px rgba(255,201,74,0.75)) drop-shadow(0 8px 14px rgba(0,0,0,0.45)); }
  .rocket.wobble{ animation:wobble .35s ease; }
  @keyframes wobble{ 0%,100%{ margin-left:0;} 25%{margin-left:-6px;} 75%{margin-left:6px;} }
  .tracklabel{ position:absolute; left:50%; transform:translateX(-50%); bottom:calc(var(--rw) * -0.77 - 44px); display:flex; flex-direction:row; align-items:center; gap:8px; width:max-content; max-width:100%; }
  .copilot{ white-space:nowrap; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink); background:var(--space-700); border:1px solid var(--line-strong); border-radius:99px; padding:3px 12px 3px 8px; display:flex; align-items:center; gap:6px; max-width:100%; }
  .copilot .ci{ font-size:15px; line-height:1; display:flex; }
  .missions{ margin-top:12px; font-size:13px; color:var(--gold); font-weight:700; text-align:center; font-family:var(--font-display);}

  /* ---------- pet rain celebration ---------- */
  #petRain{ position:fixed; inset:0; z-index:6; pointer-events:none; overflow:hidden; }
  .pet-fall{
    position:absolute; top:-60px; will-change:transform, opacity; line-height:1;
    animation:petFall var(--dur,1.8s) linear var(--delay,0s) forwards;
  }
  .pet-fall > span{ display:block; line-height:1; }
  @keyframes petFall{
    0%{ transform:translateY(0) rotate(0deg); opacity:0; }
    8%{ opacity:1; }
    100%{ transform:translateY(115vh) rotate(var(--rot,320deg)); opacity:1; }
  }

  .qcard{
    background:linear-gradient(180deg, var(--space-800), var(--space-750));
    border:2px solid var(--line-strong); border-radius:24px; padding:clamp(18px,4vw,30px);
    transition:border-color .15s ease, box-shadow .15s ease;
    position:relative; overflow:hidden;
  }
  .qcard.flash-good{ border-color:var(--good); box-shadow:0 0 0 4px rgba(95,217,138,0.18); }
  .qcard.flash-bad{ border-color:var(--bad); box-shadow:0 0 0 4px rgba(240,69,92,0.18); }

  .question{
    font-family:var(--font-display); font-weight:700; font-variant-numeric:tabular-nums;
    font-size:clamp(34px,8vw,54px); text-align:center; letter-spacing:0.01em; line-height:1;
    display:flex; align-items:baseline; justify-content:center; gap:.35ch; flex-wrap:wrap;
  }
  .question .op{ color:var(--gold); }
  .answerline{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px; min-height:30px;}
  .answerbox{
    min-width:3.4ch; text-align:center; font-family:var(--font-display); font-variant-numeric:tabular-nums;
    font-size:28px; font-weight:700; color:var(--ink); border-bottom:3px solid var(--line-strong); padding:0 6px 4px;
  }
  .answerbox.filled{ border-color:var(--accent); }
  .feedback-word{ font-family:var(--font-display); font-weight:700; font-size:14px; min-height:18px; }
  .feedback-word.good{ color:var(--good); }
  .feedback-word.bad{ color:var(--bad); }

  .keypad{
    margin-top:20px; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  }
  .key{
    appearance:none; border:none; border-radius:14px; padding:16px 0; cursor:pointer;
    background:var(--space-700); color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:22px;
    transition:transform .08s ease, background .12s ease;
  }
  .key:active{ transform:scale(0.94); }
  .key:hover{ background:var(--space-700); filter:brightness(1.15); }
  .key.wide{ grid-column:span 1; }
  .key.back{ background:var(--space-700); color:var(--ink-dim); font-size:18px; }
  .key.submit{ background:var(--accent); color:var(--accent-ink); }
  .key:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

  .rowstats{
    display:flex; justify-content:center; gap:22px; margin-top:18px; font-size:13px; color:var(--ink-dim); font-weight:700;
  }
  .rowstats b{ color:var(--ink); font-family:var(--font-display); font-variant-numeric:tabular-nums; }

  /* ---------- transition / end screens ---------- */
  .center-panel{ text-align:center; }
  .badge{ font-size:56px; line-height:1; margin-bottom:6px; }
  .statgrid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:22px 0;
  }
  .statcell{
    background:var(--space-700); border-radius:16px; padding:14px 10px; text-align:center;
  }
  .statcell .n{ font-family:var(--font-display); font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; }
  .statcell .l{ font-size:13px; color:var(--ink-dim); font-weight:700; margin-top:2px;}
  .roundrows{ text-align:left; margin:18px 0; display:flex; flex-direction:column; gap:8px;}
  .roundrow{ display:flex; justify-content:space-between; font-size:14px; padding:10px 14px; background:var(--space-700); border-radius:12px; }
  .roundrow{ font-size:13px; line-height:1.4; }
  .roundrow span:first-child{ flex:0 0 auto; padding-right:10px; font-weight:700; }
  .roundrow span:last-child{ font-family:var(--font-body); font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); text-align:right; }
  .roundrow span:last-child b{ color:var(--gold); font-family:var(--font-display); }
  .actions{ display:flex; gap:10px; margin-top:8px; }

  .historylist{
    display:flex; flex-direction:column; gap:6px; margin:6px 0 20px;
    max-height:220px; overflow-y:auto; padding-right:2px;
  }
  .historyrow{
    display:grid; grid-template-columns:1.5fr 1.15fr 0.85fr; align-items:center; gap:6px;
    background:var(--space-700); border-radius:12px; padding:9px 12px; font-size:12px; color:var(--ink-dim);
  }
  .historyrow.historyhead{
    background:transparent; padding:0 12px; font-weight:700; font-size:12px;
  }
  .historyrow .hdate{ text-align:left; font-weight:700; color:var(--ink-dim); font-variant-numeric:tabular-nums; }
  .historyrow.historyhead .hdate{ color:var(--ink-faint); }
  .historyrow .htype{ text-align:center; font-weight:700; color:var(--ink); white-space:nowrap; }
  .historyrow.historyhead .htype{ color:var(--ink-faint); }
  .historyrow .hcell{ display:flex; flex-direction:column; align-items:center; line-height:1.25; }
  .historyrow .hcell b{ font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums; }
  .historyrow .hcell small{ font-size:10.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }

  /* ---------- setup wizard ---------- */
  .steps{ display:flex; gap:6px; margin-bottom:18px; }
  .steps i{ flex:1; height:5px; border-radius:99px; background:var(--space-700); }
  .steps i.done{ background:var(--gold); }
  .textinput{
    width:100%; font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--ink);
    background:var(--space-900); border:2px solid var(--line-strong); border-radius:16px; padding:14px 16px;
    margin:4px 0 18px; outline:none; text-align:center;
  }
  .textinput::placeholder{ color:var(--ink-faint); }
  .textinput:focus{ border-color:var(--gold); box-shadow:0 0 0 4px rgba(255,201,74,0.16); }
  .petgrid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; margin:6px 0 18px; }
  .petcard{
    appearance:none; border:2px solid var(--line-strong); background:var(--space-700); color:var(--ink);
    border-radius:16px; padding:10px 2px 8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px;
    font-family:var(--font-body); font-weight:700; font-size:11px; transition:transform .12s ease, border-color .15s ease, background .15s ease;
  }
  .petcard .pe{ font-size:34px; line-height:1; height:38px; display:flex; align-items:center; justify-content:center; }
  .petcard:hover{ transform:translateY(-2px); }
  .petcard.on{ border-color:var(--gold); background:rgba(255,201,74,0.16); box-shadow:0 0 0 3px rgba(255,201,74,0.18); }
  .petcard:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
  .petbig{ width:96px; height:96px; margin:0 auto 14px; border-radius:50%; background:var(--space-700); border:3px solid var(--gold);
    display:flex; align-items:center; justify-content:center; font-size:56px; line-height:1; }
  .playerrow{ display:flex; align-items:center; gap:10px; background:var(--space-700); border-radius:16px; padding:8px 8px 8px 12px; margin-bottom:20px; }
  .playerrow .pav{ font-size:28px; line-height:1; display:flex; align-items:center; }
  .playerrow .pl{ flex:1; min-width:0; font-family:var(--font-display); font-size:16px; line-height:1.25; }
  .playerrow .pl b{ color:var(--gold); font-weight:700; }
  .playerrow button{ appearance:none; border:1px solid var(--line-strong); background:transparent; color:var(--ink-dim); font-family:var(--font-body); font-weight:700; font-size:12px; border-radius:10px; padding:7px 12px; cursor:pointer; }
  .playerrow button:hover{ color:var(--ink); border-color:var(--gold); }
  .linkbtn{ background:none; border:none; color:var(--ink-dim); font-family:var(--font-body); font-weight:700; font-size:13px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; margin-top:12px; width:100%; }
  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  @media (max-width:520px){
    .gamewrap{ grid-template-columns:96px 1fr; }
    .track{ height:270px; --rw:96px; }
    .tracklabel{ flex-direction:column; gap:6px; bottom:calc(var(--rw) * -0.77 - 58px); }
    .rocket{ width:min(100%, 96px); }
    .hud-stats{ display:none; }
    .hud-right{ gap:8px; }
    /* the brand name stays visible: the round + timer move to a second row */
    .hud{ flex-wrap:wrap; row-gap:6px; padding-top:12px; padding-bottom:10px; }
    .hud-title{ font-size:18px; flex:1 1 auto; min-width:0; }
    .hud-mid{ order:3; flex:1 0 100%; flex-direction:row; justify-content:center; align-items:baseline; gap:10px; }
    .hud-timerwrap{ width:auto; }
    .hud-timer{ font-size:18px; }
    .hud-round{ font-size:12px; text-align:center; line-height:1.25; }
    .petgrid{ grid-template-columns:repeat(5, 1fr); gap:5px; }
    .petcard{ font-size:10px; padding:8px 0 6px; border-radius:13px; }
    .petcard .pe{ font-size:26px; height:30px; }
    .chips{ grid-template-columns:repeat(6,1fr); }
    .historyrow{ grid-template-columns:1fr 1fr; row-gap:2px; font-size:11px; padding:8px 10px; }
    .historyrow .hcell{ grid-column:1 / -1; flex-direction:row; justify-content:center; gap:6px; }
    .historyrow.historyhead .hcell{ display:none; }
  }

/* ---------- language links (real pages, one per language) ---------- */
.langnav{ display:flex; gap:2px; background:var(--space-700); border:1px solid var(--line-strong); border-radius:12px; padding:3px; }
.langnav a{ color:var(--ink-dim); text-decoration:none; font-family:var(--font-display); font-weight:700; font-size:13px; line-height:1; padding:9px 9px; border-radius:9px; }
.langnav a:hover{ color:var(--ink); }
.langnav a[aria-current="page"]{ background:var(--accent); color:var(--accent-ink); }
.langnav a:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.langnav.locked{ opacity:0.45; pointer-events:none; }
.skip{ position:absolute; left:-999px; top:8px; z-index:30; background:var(--gold); color:var(--accent-ink); padding:8px 14px; border-radius:10px; font-weight:700; text-decoration:none; }
.skip:focus{ left:8px; }
.nojs{ max-width:520px; margin:0 auto; text-align:center; color:var(--ink-dim); font-size:15px; line-height:1.55; }

/* ---------- readable text below the game (this is what search engines read) ---------- */
.seo{ position:relative; z-index:1; width:100%; max-width:760px; margin:0 auto; padding:8px clamp(18px,5vw,32px) 24px; color:var(--ink-dim); font-size:16px; line-height:1.65; }
.seo h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(26px,5vw,36px); line-height:1.15; color:var(--ink); margin:28px 0 12px; text-wrap:balance; }
.seo h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(20px,3.6vw,25px); color:var(--ink); margin:30px 0 8px; }
.seo p{ margin:0 0 14px; }
.seo ol, .seo ul{ margin:0 0 14px; padding-left:22px; }
.seo li{ margin:0 0 8px; }
.seo a{ color:var(--gold); text-underline-offset:3px; }
.seo a:focus-visible, .sitefooter a:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; border-radius:4px; }
.seo details{ background:var(--space-800); border:1px solid var(--line-strong); border-radius:14px; padding:0 16px; margin:0 0 10px; }
.seo summary{ cursor:pointer; list-style:none; font-weight:700; color:var(--ink); padding:14px 0; font-size:16px; }
.seo summary::-webkit-details-marker{ display:none; }
.seo summary::after{ content:'+'; float:right; color:var(--gold); font-family:var(--font-display); font-size:20px; line-height:1; }
.seo details[open] summary::after{ content:'\2212'; }
.seo details p{ padding-bottom:6px; }
.sitefooter{ position:relative; z-index:1; border-top:1px solid var(--line); padding:20px clamp(18px,5vw,32px) 32px; text-align:center; color:var(--ink-faint); font-size:14px; }
.sitefooter a{ color:var(--ink-dim); margin:0 8px; text-underline-offset:3px; }
.sitefooter a:hover{ color:var(--ink); }
.sitefooter p{ margin:0 0 8px; }
body.playing .seo, body.playing .sitefooter{ display:none; }
.doc{ max-width:760px; margin:0 auto; padding:24px clamp(18px,5vw,32px) 8px; position:relative; z-index:1; }
.landing{ position:relative; z-index:1; flex:1; display:flex; align-items:center; justify-content:center; padding:24px; }
.landing .panel{ text-align:center; }
.landing .langlist{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0 6px; }
.landing .langlist a{ display:block; text-decoration:none; color:var(--ink); background:var(--space-700); border:2px solid rgba(226,232,255,0.30); border-radius:16px; padding:16px 8px; font-family:var(--font-display); font-weight:700; font-size:20px; }
.landing .langlist a:hover{ border-color:var(--gold); }
.landing .langlist small{ display:block; font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--ink-dim); margin-top:2px; }

@media (max-width:520px){ .langnav a{ padding:9px 7px; font-size:12px; } .seo{ font-size:15.5px; } }

@font-face{font-family:'Baloo 2';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/baloo-2-devanagari-600-normal.woff2') format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF;}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/baloo-2-devanagari-700-normal.woff2') format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF;}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/baloo-2-devanagari-800-normal.woff2') format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF;}
:lang(zh){ --font-display:'Baloo 2','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Noto Sans SC',system-ui,sans-serif; --font-body:'Quicksand','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Noto Sans SC',system-ui,sans-serif; }
:lang(hi){ --font-display:'Baloo 2','Noto Sans Devanagari','Kohinoor Devanagari','Nirmala UI',system-ui,sans-serif; --font-body:'Baloo 2','Noto Sans Devanagari','Kohinoor Devanagari','Nirmala UI',system-ui,sans-serif; }
@media (max-width:640px){ .langnav a{ padding:9px 5px; font-size:11px; } .langnav{ padding:2px; } .langnav.locked{ display:none; } }
@media (max-width:420px){ .hud-right{ gap:4px; } .langnav a{ padding:9px 4px; font-size:10.5px; } }
a.hud-title{ text-decoration:none; color:inherit; }
a.cta{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; width:auto; }
.actions a.cta{ width:100%; }
.doc.wide{ max-width:860px; }
.doc a.cta{ color:var(--accent-ink); }
.doc a.cta.ghost{ color:var(--ink); }
.doc .chiplinks a{ color:var(--ink); }
.doc .chiplinks a[aria-current="page"]{ color:var(--accent-ink); }
.doc a.card{ color:var(--ink-dim); }
.menuwrap{ position:relative; }
.menubtn{ appearance:none; border:1px solid var(--line-strong); background:var(--space-700); color:var(--ink); width:42px; height:42px; border-radius:12px; cursor:pointer; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0; }
.menubtn span{ display:block; width:20px; height:2.5px; border-radius:2px; background:currentColor; transition:transform .18s, opacity .18s; }
.menubtn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.menubtn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menubtn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
.menubtn:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
body.playing .menuwrap{ display:none; }
.menupanel{ position:absolute; right:0; top:calc(100% + 10px); z-index:30; width:min(300px, calc(100vw - 28px)); background:var(--space-800, #0f2347); border:1px solid var(--line-strong); border-radius:16px; padding:10px; box-shadow:0 18px 40px rgba(0,0,0,.45); }
.menupanel[hidden]{ display:none; }
.menulinks{ display:flex; flex-direction:column; }
.menulinks a{ color:var(--ink); text-decoration:none; font-family:var(--font-display); font-weight:700; font-size:17px; padding:12px 14px; border-radius:10px; }
.menulinks a:hover, .menulinks a:focus-visible{ background:var(--space-700); outline:none; }
.menupanel .langnav{ margin-top:8px; border-top:1px solid var(--line); border-radius:0 0 12px 12px; background:none; border-left:0; border-right:0; border-bottom:0; padding:12px 4px 2px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.menupanel .langnav a{ text-align:center; }
.menupanel .langnav a{ padding:9px 11px; font-size:13px; background:var(--space-700); }
.menupanel .langnav a[aria-current="page"]{ background:var(--accent); color:var(--accent-ink); }
.menupanel .langnav.locked{ display:grid; }
@media (max-width:640px){ .menupanel .langnav.locked{ display:grid; } .menupanel .langnav a{ padding:9px 4px; font-size:13px; } }
@media (max-width:420px){ .menupanel .langnav a{ padding:9px 2px; font-size:12.5px; } }
.doc .cert h2{ color:#8a5a00; font-family:Georgia,serif; font-size:clamp(26px,5.6vw,46px); margin:0; }
.doc .cert p{ margin:0; line-height:1.5; color:#2a2218; }
.doc .cert .cfor{ color:#5c4a2a; font-size:clamp(14px,2.4vw,20px); }
.doc .cert .cname{ color:#2a2218; font-size:clamp(28px,6.4vw,54px); font-weight:700; line-height:1.2; }
.doc .cert .cbody{ font-size:clamp(14px,2.6vw,22px); }
.crumbs{ font-size:14px; color:var(--ink-faint); margin:4px 0 0; }
.crumbs a{ color:var(--ink-dim); text-underline-offset:3px; }
.btnrow{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.btnrow .cta{ padding:13px 22px; font-size:16px; }
.chiplinks{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 18px; }
.chiplinks a{ min-width:48px; text-align:center; text-decoration:none; color:var(--ink); background:var(--space-700); border:2px solid var(--line-strong); border-radius:12px; padding:10px 12px; font-family:var(--font-display); font-weight:700; font-size:18px; }
.chiplinks a:hover{ border-color:var(--gold); }
.chiplinks a[aria-current="page"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.factgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .factgrid{ grid-template-columns:1fr; } }
.facts{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.facts li{ background:var(--space-800); border:1px solid var(--line-strong); border-radius:10px; padding:9px 14px; color:var(--ink-dim); font-size:17px; }
.facts b{ color:var(--gold); font-family:var(--font-display); }
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:10px 0 20px; }
.card{ display:block; text-decoration:none; background:var(--space-800); border:1px solid var(--line-strong); border-radius:16px; padding:16px; color:var(--ink-dim); }
.card:hover{ border-color:var(--gold); }
.card b{ display:block; color:var(--ink); font-family:var(--font-display); font-size:18px; margin-bottom:4px; }
.tool fieldset{ border:1px solid var(--line-strong); border-radius:14px; margin:0 0 14px; padding:12px 16px 14px; }
.tool legend{ color:var(--ink); font-weight:700; padding:0 6px; }
.radio{ display:inline-flex; align-items:center; gap:8px; margin:6px 18px 6px 0; color:var(--ink); font-size:16px; cursor:pointer; }
.tchips{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 8px; }
.tchip{ appearance:none; min-width:48px; border:2px solid var(--line-strong); background:var(--space-700); color:var(--ink-dim); border-radius:12px; padding:9px 12px; font-family:var(--font-display); font-weight:700; font-size:18px; cursor:pointer; }
.tchip[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.tchip.lock{ border-style:dashed; background:transparent; color:var(--ink-faint); opacity:.8; position:relative; }
.tchip.lock::after{ content:"🔒"; position:absolute; top:-7px; right:-5px; font-size:12px; line-height:1; }
.ppnote{ margin:10px 0 }
.tchip:focus-visible, .radio input:focus-visible, .select:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.linkbtn{ appearance:none; background:none; border:0; color:var(--gold); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font:inherit; font-weight:700; padding:4px 0; }
.linkout{ width:100%; text-align:left; font-size:15px; }
.select{ background:var(--space-900); color:var(--ink); border:2px solid var(--line-strong); border-radius:12px; padding:10px 12px; font:inherit; font-weight:700; font-size:16px; margin-left:8px; }
.cform .select{ margin-left:0; width:100%; }
.status{ min-height:22px; font-weight:700; }
.status.err{ color:var(--bad); }
.sheet{ background:#fff; color:#111; border-radius:12px; padding:22px 26px; margin:18px 0; font-family:Georgia,'Times New Roman',serif; }
.sheet h2{ color:#111; margin:0 0 10px; font-family:Georgia,serif; }
.sheethead{ display:flex; justify-content:space-between; gap:20px; margin-bottom:14px; font-size:17px; }
.line{ display:inline-block; border-bottom:1.5px solid #111; width:200px; }
.line.short{ width:110px; }
.sums{ columns:2; column-gap:40px; margin:0; padding-left:34px; font-size:20px; line-height:2.1; }
.sums li{ break-inside:avoid; }
.blank{ display:inline-block; border-bottom:1.5px solid #111; width:56px; }
.cert{ background:#fffaf0; color:#2a2218; border:10px double #c9962b; border-radius:6px; margin:20px auto; max-width:820px; aspect-ratio:1.414; display:flex; font-family:Georgia,'Times New Roman',serif; }
.cert-in{ flex:1; padding:3% 6%; text-align:center; display:flex; flex-direction:column; justify-content:space-between; }
.cert-top{ font-size:clamp(28px,6vw,48px); }
.cert h2{ color:#8a5a00; font-family:Georgia,serif; font-size:clamp(26px,5.6vw,46px); margin:0; letter-spacing:1px; }
.cfor{ margin:0; font-size:clamp(14px,2.4vw,20px); color:#5c4a2a; }
.cname{ margin:0; font-size:clamp(28px,6.4vw,54px); font-weight:700; border-bottom:2px solid #c9962b; align-self:center; padding:0 28px 4px; min-width:50%; }
.cbody{ margin:0; font-size:clamp(14px,2.6vw,22px); line-height:1.5; max-width:34em; align-self:center; }
.cpet{ font-size:clamp(34px,8vw,66px); line-height:1; }
.cfoot{ display:flex; justify-content:space-between; align-items:flex-end; font-size:clamp(12px,2vw,17px); }
.csign{ border-top:1.5px solid #5c4a2a; padding-top:4px; min-width:30%; color:#5c4a2a; }
@media print{
  body{ background:#fff !important; color:#000 !important; }
  .hud, #stars, .sitefooter, .noprint, .skip, .crumbs{ display:none !important; }
  .doc{ padding:0 !important; max-width:none !important; }
  .sheet{ border-radius:0; padding:0; margin:0; box-shadow:none; }
  .sheet.answers{ break-before:page; }
  .sheet h1,.sheet h2,.sheet h3,.sheet p,.sheet li,.sheet label,.sheet span{ color:#000 !important; }
  .cert{ margin:0; max-width:none; width:100%; height:calc(100vh - 2mm); aspect-ratio:auto; border-width:12px; }
}
.doc h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,5vw,38px); color:var(--ink); margin:22px 0 6px; }
.doc h2{ font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--ink); margin:26px 0 6px; }
.doc p{ color:var(--ink-dim); line-height:1.65; font-size:16px; margin:0 0 12px; }
.cform{ display:grid; gap:14px; margin:18px 0 8px; max-width:560px; }
.cform label{ display:block; font-weight:700; color:var(--ink); font-size:15px; margin:0 0 6px; }
.cform .textinput{ width:100%; text-align:left; font-size:17px; }
.cform textarea.textinput{ min-height:150px; resize:vertical; font-family:var(--font-body); font-weight:600; }
.cform .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cform .cta{ width:auto; justify-self:start; padding:14px 30px; }
.cform .status{ min-height:24px; font-weight:700; }
.cform .status.ok{ color:var(--good); }
.cform .status.err{ color:var(--bad); }
.doc .meta{ color:var(--ink-faint); font-size:14px; }
.doc a{ color:var(--gold); text-underline-offset:3px; }
/* ---------- sharing, challenges, badges, charts, accounts ---------- */
.prtoast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%,30px); opacity:0; pointer-events:none; z-index:60; background:var(--space-700); color:var(--ink); border:1px solid var(--line-strong); border-radius:14px; padding:12px 18px; font-weight:700; font-size:15px; transition:opacity .2s, transform .2s; box-shadow:0 10px 30px rgba(0,0,0,.4); }
.prtoast.on{ opacity:1; transform:translate(-50%,0); }
.prdlg{ position:fixed; inset:0; z-index:50; background:rgba(5,12,28,.78); display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto; }
.prdlg-panel{ background:var(--space-800); border:1px solid var(--line-strong); border-radius:20px; padding:22px; width:min(440px,100%); text-align:center; }
.prdlg-panel h3{ margin:0 0 12px; font-family:var(--font-display); font-size:22px; color:var(--ink); }
.prdlg-img{ width:min(260px,70%); border-radius:14px; border:1px solid var(--line-strong); margin:0 auto 10px; display:block; }
.prdlg-text{ color:var(--ink-dim); font-size:14px; margin:0 0 12px; line-height:1.5; }
.prdlg-url{ display:flex; gap:8px; margin-bottom:10px; }
.prdlg-url input{ flex:1; min-width:0; background:var(--space-900); color:var(--ink); border:1px solid var(--line-strong); border-radius:12px; padding:10px 12px; font-size:13px; font-family:var(--font-body); }
.prdlg-url .cta{ width:auto; padding:10px 16px; font-size:14px; }
.prdlg-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.prdlg-row .cta{ width:auto; flex:1 1 auto; padding:10px 14px; font-size:14px; }

.chalbox{ display:flex; gap:14px; align-items:center; text-align:left; background:rgba(255,201,74,.12); border:2px solid var(--gold); border-radius:16px; padding:14px 16px; margin:0 0 16px; }
.chalbox .chalico{ font-size:34px; line-height:1; }
.chalbox b{ font-family:var(--font-display); font-size:18px; color:var(--ink); }
.chalbox p{ margin:2px 0 0; color:var(--ink-dim); font-size:14px; line-height:1.45; }
.chalbox.res{ margin-top:14px; }
.chalbox.res.win{ background:rgba(95,217,138,.14); border-color:var(--good); }
.newsbox{ margin:14px 0 4px; display:flex; flex-direction:column; gap:6px; }
.newsrow{ background:var(--space-700); border:1px solid var(--line-strong); border-radius:12px; padding:9px 12px; font-weight:700; font-size:15px; color:var(--ink); }
.acctline{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin:-4px 0 14px; padding:9px 12px; font:inherit; font-weight:700; font-size:14px; color:var(--ink-dim); background:transparent; border:1px dashed var(--line-strong); border-radius:12px; text-decoration:none; cursor:pointer; }
.acctline:hover{ color:var(--ink); border-color:var(--gold); }
.acctline.ok{ border-style:solid; color:var(--good); cursor:default; }
.acctline:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.pickrow{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.pickbtn{ appearance:none; background:var(--space-700); border:2px solid rgba(226,232,255,.3); color:var(--ink); font:inherit; font-weight:700; border-radius:14px; padding:10px 14px; cursor:pointer; }
.pickbtn:hover{ border-color:var(--gold); }
.petcard.locked{ opacity:.55; cursor:not-allowed; position:relative; }
.petcard small{ display:block; font-size:10px; color:var(--gold); font-weight:700; line-height:1.1; margin-top:1px; }
.petcard.locked small{ color:var(--ink-dim); }

.statgrid.st4{ grid-template-columns:repeat(4,1fr); }
.statgrid.st4 .statcell .n{ font-size:22px; }
.statgrid.st4 .statcell .l{ font-size:11px; }
.stsec{ margin-top:22px; text-align:left; }
.stsec .dim{ color:var(--ink-faint); font-weight:600; }
.stnote{ color:var(--ink-faint); font-size:12.5px; margin:6px 0 0; line-height:1.4; }
.daychart{ display:grid; grid-template-columns:repeat(14,1fr); gap:4px; align-items:end; height:120px; }
.dcol{ display:flex; flex-direction:column; align-items:center; height:100%; }
.dbar-wrap{ flex:1; width:100%; display:flex; align-items:flex-end; }
.dbar{ width:100%; min-height:0; background:rgba(226,232,255,.18); border-radius:5px 5px 2px 2px; display:flex; align-items:flex-end; overflow:hidden; }
.dbar i{ display:block; width:100%; background:var(--good); }
.dcol span{ font-size:10px; color:var(--ink-faint); margin-top:3px; font-variant-numeric:tabular-nums; }
.tabrows{ display:flex; flex-direction:column; gap:6px; }
.trow{ display:grid; grid-template-columns:44px 1fr 62px; gap:10px; align-items:center; font-size:14px; }
.trow .tn{ font-family:var(--font-display); font-weight:700; color:var(--ink); }
.trow .tbar{ height:12px; background:rgba(226,232,255,.12); border-radius:99px; overflow:hidden; }
.trow .tbar i{ display:block; height:100%; border-radius:99px; background:var(--gold); }
.trow.g .tbar i{ background:var(--good); } .trow.l .tbar i{ background:var(--bad); }
.trow .tp{ text-align:right; font-weight:700; color:var(--ink-dim); font-variant-numeric:tabular-nums; }
.badgegrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; }
.bdg{ background:var(--space-700); border:1px solid var(--line); border-radius:14px; padding:10px; text-align:center; opacity:.55; }
.bdg.on{ opacity:1; border-color:var(--gold); background:rgba(255,201,74,.10); }
.bdg .bi{ display:block; font-size:28px; line-height:1.1; }
.bdg b{ display:block; font-size:13px; color:var(--ink); margin-top:4px; }
.bdg small{ display:block; font-size:11.5px; color:var(--ink-dim); line-height:1.3; margin-top:2px; }

/* account page */
.acctmsg{ min-height:0; margin:0 0 12px; font-weight:700; }
.acctmsg.bad{ color:var(--bad); background:rgba(240,69,92,.1); border:1px solid var(--bad); border-radius:12px; padding:10px 14px; }
.acctmsg.ok{ color:var(--good); }
.acctform{ display:flex; flex-direction:column; gap:12px; max-width:440px; }
.acctform label{ font-weight:700; color:var(--ink); }
.acctform .cta, .joinform .cta{ width:auto; }
.chk{ display:flex; gap:10px; align-items:flex-start; font-weight:600 !important; color:var(--ink-dim) !important; font-size:14px; line-height:1.5; }
.chk input{ width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--accent); }
.acctbar{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--space-800); border:1px solid var(--line-strong); border-radius:14px; padding:10px 14px; margin-bottom:6px; color:var(--ink-dim); }
.acctbar .cta{ width:auto; }
.kid, .cls{ background:var(--space-800); border:1px solid var(--line-strong); border-radius:16px; padding:14px; margin:0 0 12px; }
.kid-top{ display:flex; gap:12px; align-items:center; }
.kid-pet{ font-size:38px; line-height:1; }
.kid-who small{ color:var(--ink-faint); }
.kid-actions{ display:flex; gap:8px; margin:10px 0; flex-wrap:wrap; align-items:center; }
.kid-actions .cta{ width:auto; }
.kid-stats{ margin-top:6px; padding-top:6px; border-top:1px dashed var(--line-strong); }
.kid-class{ margin-top:6px; }
.kid-in{ margin:0 0 6px; color:var(--ink); font-weight:700; font-size:14px; }
.joinform{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0; }
.textinput.sm{ padding:9px 12px; font-size:14px; width:auto; min-width:150px; flex:1 1 150px; max-width:260px; }
.cta.sm{ padding:9px 14px; font-size:14px; }
.linkbtn.sm{ margin:0; width:auto; display:inline; }
.linkbtn.danger{ color:var(--bad); }
.tablewrap{ overflow-x:auto; }
.clstable{ border-collapse:collapse; width:100%; font-size:14px; }
.clstable th, .clstable td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); color:var(--ink-dim); white-space:nowrap; }
.clstable th{ color:var(--ink); font-size:12.5px; }
.clstable td:first-child{ color:var(--ink); font-weight:700; }
.doc h2{ margin-top:30px; }

/* menu extras */
.menulinks .menushare{ appearance:none; background:none; border:0; text-align:left; cursor:pointer; color:var(--gold); font-family:var(--font-display); font-weight:700; font-size:17px; padding:12px 14px; border-radius:10px; }
.menulinks .menushare:hover, .menulinks .menushare:focus-visible{ background:var(--space-700); outline:none; }
@media (max-width:520px){ .statgrid.st4{ grid-template-columns:repeat(2,1fr); } .trow{ grid-template-columns:38px 1fr 56px; } }
@media print{ .prdlg, .prtoast{ display:none !important; } }
.actions{ flex-wrap:wrap; }
.actions .cta{ flex:1 1 150px; min-width:0; }
.doc{ min-width:0; width:100%; box-sizing:border-box; }
.gbtn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.ordiv{ display:flex; align-items:center; gap:12px; margin:2px 0; color:var(--ink-dim); font-size:13px; }
.ordiv:before,.ordiv:after{ content:""; flex:1; height:1px; background:currentColor; opacity:.3; }
.ordiv span{ flex:none; }

/* ---- parent pack: locked previews, parent gate, unlock page, kid tabs */
.statgrid.st3{ grid-template-columns:repeat(3,1fr); }
.statgrid.st3 .statcell .n{ font-size:22px; }
.statgrid.st3 .statcell .l{ font-size:11px; }
.minigrid{ margin-top:8px; }
.ppmore{ margin:8px 0 0; text-align:center; }
.ppmore .linkbtn{ font-size:inherit; }
.pgate{ position:relative; margin:14px 0 18px; min-height:360px; }
.pgate-prev{ filter:blur(7px); opacity:.7; pointer-events:none; user-select:none; max-height:480px; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 55%, transparent); mask-image:linear-gradient(#000 55%, transparent); }
.pgate-card{ position:absolute; left:50%; top:16px; transform:translateX(-50%); width:min(94%,440px); text-align:center;
  background:var(--space-800); border:1px solid var(--line-strong); border-radius:20px; padding:20px 18px; box-shadow:0 14px 40px rgba(0,0,0,.45); }
.pgate-card .pgate-h{ margin:4px 0 6px; font-family:var(--font-display); font-size:21px; color:var(--ink); }
.pgate-card p{ margin:0 0 10px; color:var(--ink-dim); font-size:15px; line-height:1.45; }
.pgate-card .pgate-price{ font-size:13px; color:var(--ink-faint); }
.pgate-card .cta{ width:100%; margin-bottom:6px; }
.pgate-card .linkbtn{ display:inline-block; margin-top:2px; }
.pgate-lock{ font-size:28px; line-height:1; }
.ppmodal{ position:fixed; inset:0; z-index:60; background:rgba(5,12,28,.82); display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto; }
.ppbox{ background:var(--space-800); border:1px solid var(--line-strong); border-radius:20px; padding:22px; width:min(420px,100%); text-align:center; }
.ppbox h2{ margin:0 0 8px; font-family:var(--font-display); font-size:24px; color:var(--ink); }
.ppbox p{ color:var(--ink-dim); margin:0 0 10px; line-height:1.45; }
.ppsum{ font-family:var(--font-display); font-size:34px; color:var(--gold) !important; margin:6px 0 12px !important; }
.ppform input{ text-align:center; font-size:24px; max-width:160px; margin:0 auto; display:block; }
.ppmsg{ min-height:22px; color:var(--bad) !important; font-weight:700; margin:8px 0 !important; }
.ppbtns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.ppbtns.col{ flex-direction:column; align-items:stretch; }
.ppbtns .cta{ flex:1 1 130px; }
.hardlist{ display:flex; flex-direction:column; gap:6px; }
.hrow{ display:flex; justify-content:space-between; gap:10px; background:rgba(226,232,255,.06); border-radius:10px; padding:8px 12px; font-size:15px; }
.hrow b{ font-family:var(--font-display); color:var(--ink); font-size:17px; }
.hrow span{ color:var(--ink-dim); font-size:13.5px; align-self:center; }
.kidtabs{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 6px; }
.kidtab{ border:1px solid var(--line-strong); background:transparent; color:var(--ink-dim); border-radius:999px; padding:6px 14px; font:inherit; font-weight:700; cursor:pointer; }
.kidtab.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.ppinc{ padding-left:20px; }
.ppinc li{ margin:6px 0; }
@media print{ body.locked .pgate{ display:none !important; } .ppmodal{ display:none !important; } }
@media (max-width:520px){ .pgate{ min-height:420px; } .pgate-card{ top:8px; padding:16px 14px; } }
.ppbtns.col .cta{ flex:0 0 auto; }
.stage{ min-height:440px; }

/* ---- mission progress bar */
.gamewrap .mprog{ grid-column:1 / -1; }
.mprog-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14px; margin-bottom:6px; }
.mprog-top b{ font-family:var(--font-display); color:var(--ink); font-size:16px; }
.mprog-top span{ color:var(--gold); font-weight:700; font-variant-numeric:tabular-nums; }
.mprog.low .mprog-top span{ color:var(--bad); }
.mprog-track{ position:relative; height:14px; border-radius:99px; background:var(--space-700); overflow:hidden; border:1px solid var(--line-strong); }
.mprog-track i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--accent)); border-radius:99px; transition:width 1s linear; }
.mprog-hint{ margin-top:5px; font-size:12.5px; color:var(--ink-faint); text-align:right; }
.hud-timerwrap .timerbar{ display:none; }

/* ---- streak card above the question */
.streakbar{ margin:-6px 0 14px; padding:9px 12px 10px; border-radius:16px; background:rgba(226,232,255,.06); border:1px solid var(--line); transition:border-color .25s, box-shadow .25s, background .25s; }
.streakbar .srow{ display:flex; align-items:center; gap:8px; min-height:34px; }
.sflame{ font-size:26px; line-height:1; display:inline-block; transform-origin:50% 90%; transition:font-size .25s, filter .25s; }
.streakbar.idle .sflame{ filter:grayscale(1) opacity(.45); }
.streakbar:not(.idle) .sflame{ animation:flameDance 1.1s ease-in-out infinite; }
.snum{ font-family:var(--font-display); font-size:32px; line-height:1; color:var(--gold); min-width:1.1ch; font-variant-numeric:tabular-nums; }
.streakbar.idle .snum{ color:var(--ink-faint); }
.slbl{ flex:1; min-width:0; font-weight:700; color:var(--ink-dim); font-size:13.5px; line-height:1.2; }
.sstars{ font-size:13px; letter-spacing:1px; white-space:nowrap; }
.streakbar .srow2{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; }
.sdots{ display:flex; gap:5px; }
.sdots i{ width:16px; height:7px; border-radius:99px; background:rgba(226,232,255,.18); transition:background .2s, transform .2s; }
.sdots i.on{ background:var(--gold); transform:scaleY(1.15); }
.sbest{ font-size:12.5px; color:var(--ink-faint); font-weight:700; text-align:right; }
.sbest.new{ color:var(--gold); }
.streakbar.lvl1{ border-color:rgba(255,201,74,.55); }
.streakbar.lvl2{ border-color:var(--accent); box-shadow:0 0 18px rgba(255,107,74,.35); background:rgba(255,107,74,.1); }
.streakbar.lvl2 .sflame, .streakbar.lvl3 .sflame, .streakbar.lvl4 .sflame{ font-size:32px; }
.streakbar.lvl3{ border-color:#FF9BD2; box-shadow:0 0 22px rgba(255,155,210,.45); background:rgba(255,155,210,.1); }
.streakbar.lvl3 .snum{ color:#FFB8DF; }
.streakbar.lvl4{ border-color:#7DE3FF; box-shadow:0 0 26px rgba(125,227,255,.55); background:rgba(125,227,255,.12); }
.streakbar.lvl4 .snum{ color:#9BEBFF; }
.streakbar.lvl4 .sflame{ filter:hue-rotate(160deg) saturate(1.4); }
.streakbar.bump .snum{ animation:snumPop .35s ease-out; }
.streakbar.milestone{ animation:streakMile .8s ease-out; }
.streakbar.broke{ animation:streakShake .4s ease-in-out; }
@keyframes flameDance{ 0%,100%{ transform:scale(1) rotate(-3deg); } 50%{ transform:scale(1.14) rotate(3deg); } }
@keyframes snumPop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.55); } 100%{ transform:scale(1); } }
@keyframes streakMile{ 0%{ transform:scale(1); } 25%{ transform:scale(1.07); } 100%{ transform:scale(1); } }
@keyframes streakShake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }

/* ---- popping pets and glitter */
.pet-fall.poppable{ pointer-events:auto; padding:14px; margin:-14px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; user-select:none; }
#fxLayer{ position:fixed; inset:0; z-index:9; pointer-events:none; overflow:hidden; }
.gl{ position:absolute; display:block; border-radius:50%; background:currentColor; will-change:transform, opacity; }
.gl.star{ background:none; border-radius:0; line-height:1; width:auto; height:auto; text-shadow:0 0 6px currentColor; }
@media (prefers-reduced-motion: reduce){ .streakbar:not(.idle) .sflame{ animation:none; } }
.pico{ display:inline-flex; vertical-align:middle; line-height:1; }
.pico svg{ display:block; }
.pet-fall svg{ display:block; }
.playerrow .pbtns{ display:flex; flex-direction:column; gap:6px; align-items:stretch; }
/* pet picker: the "next" button stays in view while the grid scrolls */
#petGrid ~ #nextBtn{ position:sticky; bottom:14px; z-index:4; }
/* clock game */
.question.clk{ display:block; font-size:inherit; line-height:1.2; }
.clockwrap{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.clockwrap .clockface{ width:min(46vw,190px); height:auto; touch-action:none; user-select:none; -webkit-user-select:none; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.clockdigital{ font-family:var(--font-display); font-weight:800; font-size:clamp(32px,8vw,44px); line-height:1; color:var(--gold); font-variant-numeric:tabular-nums; }
.clkhint{ font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--ink-dim); line-height:1.3; max-width:30ch; text-align:center; }
.keypad.single{ grid-template-columns:1fr; }
.keypad.single .key{ padding:18px 0; font-size:20px; }
@media (max-width:520px){ .clockwrap .clockface{ width:min(40vw,150px); } .clkhint{ font-size:12px; } }
/* end screen: everything above the fold, real-looking badges, share first */
.endpanel{ padding:clamp(16px,3.2vw,26px); }
.endhead{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:6px; }
.endhead .badge{ font-size:44px; margin:0; }
.endhead .title{ margin:0; font-size:clamp(22px,5.4vw,32px); text-align:left; }
.endlead{ margin:0 auto 10px; font-size:14px; line-height:1.45; }
.statgrid.three{ grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0; }
.statgrid.three .statcell{ padding:10px 6px; }
.statgrid.three .statcell .n{ font-size:24px; }
.statgrid.three .statcell .l{ font-size:12px; }
.newsbox{ margin:8px 0; }
.medalrow{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin:6px 0 2px; }
.medalitem{ display:flex; flex-direction:column; align-items:center; gap:3px; max-width:104px; font-family:var(--font-display); font-weight:800; font-size:12.5px; line-height:1.15; color:var(--ink); }
.medal{ display:block; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.medal.new{ animation:medalPop .85s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes medalPop{ 0%{ transform:scale(.2) rotate(-50deg); opacity:0; } 100%{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .medal.new{ animation:none; } }
.newschips{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
.newschip{ background:var(--space-700); border:1px solid var(--line-strong); border-radius:99px; padding:5px 11px; font-size:13px; font-weight:700; color:var(--ink); }
.endpanel .roundrows{ margin:10px 0 12px; gap:6px; }
.endpanel .roundrow{ padding:8px 12px; }
.endactions{ margin-top:6px; }
.endactions .cta{ flex:1 1 0; padding:14px 10px; font-size:17px; }
.cta.gold{ background:var(--gold); color:var(--accent-ink); box-shadow:0 14px 30px -12px rgba(255,201,74,.55); }
.endlinks{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:10px; }
.endlinks .cta{ width:auto; flex:1 1 auto; font-size:14px; padding:10px 12px; border-width:1.5px; text-decoration:none; }
.bdg .bi{ display:flex; justify-content:center; line-height:0; margin-bottom:2px; }
.bdg:not(.on) .medal{ filter:none; opacity:.8; }
@media (max-height:740px){ .endlead{ display:none; } .endhead .badge{ font-size:34px; } .medalitem{ font-size:11.5px; } }
/* first screens: a little scene instead of a plain form */
.hero{ position:relative; height:158px; border-radius:20px; overflow:hidden; margin:0 0 16px; border:1px solid var(--line-strong);
  background:radial-gradient(120% 95% at 72% 0%, #264A8C 0%, #12295A 55%, #0A1633 100%); }
.hstar{ position:absolute; width:3px; height:3px; border-radius:50%; background:#fff; animation:hTw 2.6s ease-in-out infinite; }
.hstar.a{ left:12%; top:16%; } .hstar.b{ left:30%; top:42%; animation-delay:.6s; } .hstar.c{ left:46%; top:12%; animation-delay:1.1s; width:2px; height:2px; }
.hstar.d{ left:62%; top:38%; animation-delay:1.7s; } .hstar.e{ left:84%; top:56%; animation-delay:.3s; width:2px; height:2px; } .hstar.f{ left:6%; top:62%; animation-delay:2s; width:2px; height:2px; }
@keyframes hTw{ 0%,100%{ opacity:.25; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.4); } }
.hmoon{ position:absolute; right:16px; top:12px; width:50px; filter:drop-shadow(0 0 16px rgba(255,236,170,.5)); animation:hFloat 6s ease-in-out infinite; }
.hmoon svg{ display:block; width:100%; height:auto; }
.hplanet{ position:absolute; left:18px; top:24px; width:26px; height:26px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #FFB88A, #FF6B4A 55%, #A83F28); box-shadow:0 0 14px rgba(255,107,74,.4); animation:hFloat 7s ease-in-out infinite reverse; }
.hplanet::after{ content:''; position:absolute; left:-9px; right:-9px; top:9px; height:8px; border:2px solid rgba(255,214,150,.75); border-radius:50%; transform:rotate(-18deg); }
@keyframes hFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.hhill{ position:absolute; left:-12%; right:-12%; bottom:-40px; height:70px; border-radius:50% 50% 0 0; background:linear-gradient(#1C3A72,#0B1B3A); box-shadow:0 -4px 18px rgba(79,140,255,.25); }
.hrocket{ position:absolute; left:50%; bottom:16px; width:66px; margin-left:-64px; animation:hBob 2.6s ease-in-out infinite; }
.hrocket svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.hflame{ position:absolute; left:50%; top:93%; width:15px; height:26px; margin-left:-7px; border-radius:50% 50% 60% 60%; background:linear-gradient(#FFF3C4,#FFC94A 50%,#FF6B4A); transform-origin:50% 0; animation:hFlame .22s ease-in-out infinite alternate; z-index:-1; }
@keyframes hFlame{ from{ transform:scaleY(.8) scaleX(.95); opacity:.85; } to{ transform:scaleY(1.2) scaleX(1.05); opacity:1; } }
@keyframes hBob{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-8px) rotate(2deg); } }
.hpet{ position:absolute; left:50%; bottom:18px; margin-left:14px; line-height:1; animation:hHop 1.3s ease-in-out infinite; }
.hpet.swap{ animation:hHop 1.3s ease-in-out infinite, hPop .35s ease-out; }
@keyframes hHop{ 0%,100%{ transform:translateY(0) scale(1.04,.96); } 45%{ transform:translateY(-14px) scale(.98,1.04); } }
@keyframes hPop{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .hstar,.hmoon,.hplanet,.hrocket,.hflame,.hpet{ animation:none !important; } }
.startlead{ margin:0 0 14px !important; }
.startcta{ margin-top:2px; padding:19px 20px; font-size:22px; background:linear-gradient(180deg,#FF8A5C,#FF5A3A); color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.25); animation:hPulse 2.4s ease-in-out infinite; }
.startcta:disabled{ animation:none; }
@keyframes hPulse{ 0%,100%{ box-shadow:0 14px 30px -12px rgba(255,107,74,.55), 0 0 0 0 rgba(255,107,74,.45); } 55%{ box-shadow:0 14px 30px -12px rgba(255,107,74,.55), 0 0 0 10px rgba(255,107,74,0); } }
@media (prefers-reduced-motion:reduce){ .startcta{ animation:none; } }
.setcard{ margin-top:18px; padding:14px 14px 4px; border-radius:18px; background:rgba(8,18,40,.35); border:1px solid var(--line); }
.setcard .opgrid{ margin-bottom:16px; }
.setcard .field-label:first-child{ margin-top:0; }
@media (max-height:700px){ .endpanel .roundrows{ display:none; } .medalitem{ font-size:11px; } .medal{ width:54px; height:auto; } }
.endlinks{ display:grid; grid-template-columns:1fr 1fr; }
.endlinks .cta{ width:100%; justify-content:center; text-align:center; font-size:13.5px; padding:10px 8px; }
/* clock: the colon is always there, empty digits are dim */
.answerbox.empty{ color:var(--ink-dim); letter-spacing:.06em; }
/* x and ÷ as stars on the horizon */
.hsym{ position:absolute; font-family:var(--font-display); font-weight:800; line-height:1; color:#fff; opacity:.9; animation:hTw 3.2s ease-in-out infinite; text-shadow:0 0 8px rgba(160,200,255,.7); }
.hsym.s1{ left:22%; top:8%; font-size:20px; } .hsym.s2{ left:36%; top:30%; font-size:18px; animation-delay:.8s; color:#FFD66B; }
.hsym.s3{ left:68%; top:12%; font-size:18px; animation-delay:1.5s; color:#8FD0FF; } .hsym.s4{ left:80%; top:46%; font-size:22px; animation-delay:.4s; }
.hsym.s5{ left:8%; top:46%; font-size:19px; animation-delay:2.1s; color:#FF9C85; } .hsym.s6{ left:56%; top:56%; font-size:16px; animation-delay:1.1s; color:#FFD66B; }
@media (prefers-reduced-motion:reduce){ .hsym{ animation:none !important; } }
.logomark{ display:inline-block; vertical-align:-7px; margin-right:6px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
/* clock game: slim bar instead of a big game choice */
.clockbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px; padding:8px 12px; border-radius:14px; background:rgba(255,201,74,.12); border:1px solid rgba(255,201,74,.35); font-family:var(--font-display); font-weight:700; color:var(--gold); }
.clockbar button{ background:none; border:0; color:var(--ink-dim); font:inherit; font-size:13px; cursor:pointer; padding:4px 2px; }
/* game screen on phones and short screens: everything, including the orange confirm key, fits without scrolling */
@media (max-width:520px), (max-height:800px){
  body.playing .stage{ padding:8px 12px 10px; align-items:flex-start; }
  .gamewrap{ row-gap:6px; align-items:start; }
  .gamewrap .mprog-hint{ display:none; }
  .mprog-top{ margin-bottom:4px; font-size:13px; }
  .mprog-top b{ font-size:14px; }
  .mprog-track{ height:10px; }
  .track{ height:clamp(150px,27dvh,250px); }
  .qcard{ padding:12px 12px 10px; border-radius:20px; }
  .streakbar{ margin:0 0 6px; padding:5px 10px 6px; }
  .streakbar .srow{ min-height:26px; }
  .streakbar .srow2{ margin-top:4px; }
  .question{ font-size:clamp(30px,5.6dvh,48px); }
  .answerline{ margin-top:6px; min-height:24px; }
  .answerbox{ font-size:24px; padding-bottom:2px; }
  .feedback-word{ min-height:14px; font-size:13px; }
  .keypad{ margin-top:6px; gap:7px; }
  .key{ padding:clamp(9px,1.9dvh,15px) 0; font-size:20px; border-radius:12px; }
  .keypad.single .key{ padding:clamp(12px,2.4dvh,18px) 0; }
  .rowstats{ margin-top:6px; }
  .clockwrap{ gap:3px; }
  .clockwrap .clockface{ width:min(40vw,150px,19dvh); }
  .clockdigital{ font-size:clamp(28px,4.6dvh,40px); }
  .clkhint{ font-size:11.5px; }
}
@media (max-height:780px){ .rowstats{ display:none; } .clkhint{ display:none; } }
@media (max-height:680px){ .streakbar .srow2{ display:none; } .key{ padding:8px 0; } .clockwrap .clockface{ width:min(40vw,150px,17dvh); } body.playing .stage{ padding-top:4px; } }
/* menu: the parent pack is one group, marked with a gold crown */
.menugroup{ margin:8px 6px 6px; padding:8px 4px 6px; border:1px solid rgba(255,201,74,.45); border-radius:14px; background:linear-gradient(180deg, rgba(255,201,74,.12), rgba(255,201,74,.04)); }
.menugroup-h{ display:flex; align-items:center; gap:8px; margin:0; padding:4px 10px 0; font-family:var(--font-display); font-size:16px; color:var(--gold); }
.menugroup-h .crown{ filter:drop-shadow(0 0 5px rgba(255,201,74,.55)); }
.menugroup-n{ margin:0 0 4px; padding:0 10px 4px; font-size:12px; color:var(--ink-dim); }
.menugroup a{ display:block; }
/* simpler start screen: two big choices, one compact row for the rest, big start button */
.hero.sm{ height:112px; margin-bottom:10px; }
.hero.sm .hmoon{ width:42px; top:8px; } .hero.sm .hrocket{ width:54px; margin-left:-52px; bottom:12px; } .hero.sm .hpet{ bottom:14px; }
.hero.sm .hsym.s2, .hero.sm .hsym.s6, .hero.sm .hstar.b{ display:none; }
.setflat .field-label{ margin:6px 0 8px; }
.setflat .opgrid{ margin-bottom:10px; }
.setflat .opbtn{ padding:12px 8px; } .setflat .opbtn .on1{ font-size:26px; } .setflat .opbtn .on2{ font-size:14px; }
.selbox{ margin:0 0 14px; border-radius:16px; background:rgba(8,18,40,.35); border:1px solid var(--line-strong); overflow:hidden; }
.selrow{ appearance:none; width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; background:none; border:0; color:var(--ink); cursor:pointer; text-align:left; font-family:var(--font-display); }
.selrow .sl{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.selrow small{ font-family:var(--font-body); font-size:12px; font-weight:700; color:var(--ink-dim); }
.selrow b{ font-size:18px; font-weight:700; line-height:1.2; }
.selrow .chev{ flex:none; color:var(--ink-dim); transition:transform .2s; }
.selbox.open .chev{ transform:rotate(180deg); }
.selrow:focus-visible{ outline:3px solid var(--gold); outline-offset:-3px; }
.selpanel{ padding:2px 12px 12px; }
.selpanel[hidden]{ display:none; }
.selpanel .modelist{ margin-bottom:6px; }
.startcta{ margin-top:4px; }
@media (max-height:760px){ .playerrow{ margin-bottom:10px; } .hero.sm{ height:96px; } }
/* player settings are not core: they sit at the bottom of the start screen */
.playerfoot{ display:flex; gap:8px; margin:18px 0 10px; }
.playerfoot button{ flex:1; appearance:none; border:1px solid var(--line-strong); background:transparent; color:var(--ink-dim); font-family:var(--font-body); font-weight:700; font-size:13px; border-radius:12px; padding:10px 8px; cursor:pointer; }
.playerfoot button:hover{ color:var(--ink); border-color:var(--gold); }
/* choice buttons: the word first, the example below it */
.setflat .opbtn{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.setflat .opbtn .on2{ font-size:17px; }
.setflat .opbtn .on1{ font-size:22px; font-weight:600; opacity:.9; }
/* root page, American browsers: a small offer to switch, never a redirect */
.langhint{ position:relative; z-index:40; display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 12px; background:var(--space-700); border-bottom:1px solid var(--line-strong); font-size:14px; }
.langhint a{ color:var(--gold); font-weight:700; text-underline-offset:3px; }
.langhint button{ appearance:none; background:none; border:0; color:var(--ink-dim); font-size:20px; line-height:1; cursor:pointer; padding:2px 6px; }

/* tables 11 and 12 are part of the parent pack: locked chips and the explanation under the list */
.chip.lock{ position:relative; opacity:.78; border-style:dashed; color:var(--ink-faint); background:transparent; }
.chip.lock .lk{ position:absolute; top:-6px; right:-4px; font-size:12px; line-height:1; }
.t12lock{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.t12lock .stnote{ margin:0 0 6px; }