:host{display:block;width:100%;height:100%;color-scheme:dark;--paper:#f8f2df;--ink:#22312a;--muted:#5c6f63;--gold:#f0bd45;--gold-soft:#ffd97a;--orange:#e8622c;--teal:#35c4bf;--edge:rgba(248,242,223,.18);--focus:#ffd94d;background:#0b231e;color:var(--paper);font-family:"Chakra Petch","Avenir Next",Avenir,sans-serif;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-tap-highlight-color:transparent}
    *{box-sizing:border-box}button{font:inherit}
    .game-shell{position:relative;width:100%;height:100%;height:100svh;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));background:radial-gradient(circle at 85% -10%,rgba(53,196,191,.22),transparent 46%),radial-gradient(circle at -10% 110%,rgba(240,189,69,.14),transparent 44%),#0b231e;overflow:hidden;touch-action:none}
    .hud{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
    .hud-box{min-width:104px;padding:7px 12px 8px;border:2px solid rgba(240,189,69,.5);border-radius:12px;background:rgba(4,20,16,.72);text-align:center}
    .hud-box span{display:block;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft)}
    .hud-box strong{display:block;font-size:28px;line-height:1.05;font-weight:900;font-variant-numeric:tabular-nums;color:var(--paper)}
    .hud-center{display:flex;gap:7px;padding-top:5px}
    .icon-button{width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid rgba(248,242,223,.45);border-radius:50%;color:var(--paper);background:rgba(4,20,16,.72);cursor:pointer;touch-action:none}
    .icon-button svg{width:19px;height:19px;fill:currentColor}
    .icon-button:active{transform:translateY(1px)}
    .icon-button:focus-visible,.primary:focus-visible,.secondary:focus-visible,.submit-btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
    .stage{flex:1;width:min(560px,100%);margin:8px auto 0;display:flex;flex-direction:column;align-items:center;min-height:0}
    .initials{display:flex;gap:12px;margin:4px 0 12px}
    .initials span{display:grid;place-items:center;width:76px;height:92px;border:3px solid var(--gold);border-radius:14px;background:var(--paper);color:var(--ink);font-family:"Bungee",sans-serif;font-size:52px;line-height:1;box-shadow:6px 6px 0 rgba(0,0,0,.35)}
    .initials span:first-child{transform:rotate(-2.5deg)}
    .initials span+span{transform:rotate(2.5deg)}
    .meta-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
    .chip{padding:5px 13px;border-radius:999px;border:1px solid var(--edge);background:rgba(4,20,16,.55);font-size:13px;font-weight:800;letter-spacing:.03em;font-variant-numeric:tabular-nums}
    .chip.worth{background:var(--gold);border-color:transparent;color:var(--ink)}
    .chip.low{border-color:var(--orange);color:#ffb59d}
    .timer-bar{width:100%;height:8px;margin:12px 0 14px;border-radius:99px;background:rgba(248,242,223,.16);overflow:hidden}
    .timer-bar i{display:block;height:100%;width:100%;border-radius:99px;background:var(--teal);transition:width .12s linear}
    .timer-bar.low i{background:var(--orange)}
    .next-clue-btn{width:100%;min-height:44px;margin:-4px 0 12px;padding:0 16px;border:2px solid var(--teal);border-radius:12px;background:rgba(53,196,191,.14);color:var(--paper);font-size:14px;font-weight:800;letter-spacing:.05em;cursor:pointer;touch-action:none}
    .next-clue-btn:active{transform:translateY(1px)}
    .next-clue-btn:disabled{opacity:.38;cursor:default}
    .next-clue-btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
    .clues{list-style:none;margin:0;padding:2px 2px 14px;width:100%;display:grid;gap:7px;align-content:start;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:thin;scroll-padding-bottom:14px}
    .clues li{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border:1px solid var(--edge);border-radius:12px;background:rgba(248,242,223,.07);color:#eef3e4;font-size:15px;line-height:1.4}
    .clues li b{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:rgba(240,189,69,.28);color:var(--gold-soft);font-size:12px}
    .clues li.past{padding:6px 11px;font-size:13.5px;line-height:1.35;background:rgba(248,242,223,.045);color:#d9e4d0}
    .clues li.past b{width:19px;height:19px;font-size:11px;background:rgba(240,189,69,.18)}
    .clues li.now{border-color:var(--gold);background:rgba(248,242,223,.16);box-shadow:0 0 0 1px var(--gold),0 8px 22px rgba(0,0,0,.28)}
    .reveal{width:100%;margin-top:12px;padding:13px 16px;border-radius:14px;background:var(--paper);color:var(--ink);text-align:center;box-shadow:0 10px 26px rgba(0,0,0,.3)}
    .reveal[hidden]{display:none}
    .reveal .rv-label{display:block;font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:#b54a1f}
    .reveal.good .rv-label{color:#0a6b62}
    .reveal strong{display:block;margin:2px 0;font-family:"Bungee",sans-serif;font-size:clamp(23px,6vw,30px);font-weight:400;line-height:1.1}
    .reveal .rv-pts{display:block;font-size:14px;font-weight:850;color:var(--muted)}
    .guess{display:flex;gap:9px;width:min(560px,100%);margin:12px auto 0}
    .guess input{flex:1;min-width:0;min-height:56px;padding:0 16px;border:2px solid rgba(248,242,223,.4);border-radius:14px;background:rgba(4,20,16,.82);color:var(--paper);font:600 16px "Chakra Petch",sans-serif}
    .guess input::placeholder{color:rgba(248,242,223,.45)}
    .guess input:focus{outline:3px solid var(--gold);outline-offset:2px;border-color:transparent}
    .guess input:disabled{opacity:.45}
    .submit-btn{flex:none;min-height:56px;padding:0 22px;border:0;border-radius:14px;background:var(--orange);color:#fff;font-size:16px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;box-shadow:0 5px 0 #7e2d10;touch-action:none}
    .submit-btn:active{transform:translateY(2px);box-shadow:0 3px 0 #7e2d10}
    .submit-btn:disabled{opacity:.45;cursor:default}
    .guess.shake{animation:ig-shake .32s ease}
    .guess.kb-open{position:fixed;left:0;right:0;z-index:6;width:min(560px,100%);margin:0 auto;padding:10px 14px 12px;background:#0b231e;border-top:1px solid var(--edge);box-shadow:0 -10px 28px rgba(0,0,0,.4)}
    @keyframes ig-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
    .overlay{position:absolute;z-index:4;inset:0;display:grid;place-items:center;padding:max(70px,calc(env(safe-area-inset-top) + 58px)) 18px max(96px,env(safe-area-inset-bottom));pointer-events:none}
    .card{width:min(430px,100%);max-height:calc(100svh - 190px);overflow-y:auto;padding:24px 22px 20px;color:var(--ink);background:var(--paper);border:2px solid var(--gold);border-radius:22px;box-shadow:0 18px 50px rgba(0,0,0,.5);text-align:center;pointer-events:auto;scrollbar-width:thin}
    .card[hidden]{display:none}
    .eyebrow{margin:0 0 8px;color:#b54a1f;font-size:12px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
    h1{margin:0;font-family:"Bungee",sans-serif;font-size:clamp(30px,8vw,42px);font-weight:400;line-height:1.02}
    .intro{margin:12px auto 14px;max-width:37ch;color:var(--muted);font-size:14px;line-height:1.48}
    .intro strong{color:var(--ink)}
    .controls-note{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-bottom:16px;color:var(--muted);font-size:11px;font-weight:700}
    .key{padding:4px 8px;border:1px solid rgba(34,49,42,.25);border-radius:7px;background:rgba(255,255,255,.6)}
    .actions{display:grid;gap:9px}
    .primary,.secondary{min-height:49px;border-radius:14px;cursor:pointer;font-weight:850;letter-spacing:.02em;font-size:15px}
    .primary{border:0;color:#fff;background:var(--orange);box-shadow:0 6px 0 #7e2d10}
    .primary:active{transform:translateY(2px);box-shadow:0 4px 0 #7e2d10}
    .secondary{border:1px solid rgba(34,49,42,.3);color:var(--ink);background:transparent}
    .shuffle-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px}
    .shuffle-btn svg{width:19px;height:19px;flex:none;fill:currentColor}
    .shuffle-btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
    .result-score{margin:17px 0 6px;display:grid;grid-template-columns:1fr 1fr}
    .result-score>div{padding:8px}
    .result-score>div+div{border-left:1px solid rgba(34,49,42,.18)}
    .result-score strong{display:block;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
    .result-score span{display:block;margin-top:5px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
    .breakdown{display:grid;gap:4px;margin:0 0 16px;text-align:left}
    .breakdown div{display:flex;justify-content:space-between;gap:10px;padding:6px 10px;border:1px solid rgba(34,49,42,.16);border-radius:9px;background:rgba(255,255,255,.55);font-size:13px;font-weight:700}
    .breakdown b{font-variant-numeric:tabular-nums;white-space:nowrap}
    .breakdown .zero{opacity:.6}
    .toast{position:absolute;z-index:5;left:50%;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 84px + var(--ig-kb,0px));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);padding:9px 14px;border-radius:999px;color:var(--ink);background:var(--gold-soft);border:1px solid var(--gold);font-size:13px;font-weight:800;text-align:center;pointer-events:none;opacity:0;transition:opacity .18s ease}
    .toast.show{opacity:1}
    @media(max-width:620px){.game-shell{padding-bottom:calc(max(14px,env(safe-area-inset-bottom)) + 58px)}.toast{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 142px + var(--ig-kb,0px))}.overlay{padding-bottom:150px}}
    @media(max-width:430px){#igMenuBtn{display:none}.hud-box{min-width:0;width:88px;padding:6px 8px}.hud-box strong{font-size:23px}.icon-button{width:34px;height:34px}.initials span{width:64px;height:78px;font-size:44px}.clues li{font-size:14px}}
    @media(max-height:660px){.initials span{width:58px;height:70px;font-size:40px}.initials{margin-bottom:8px}.clues li.now{padding:8px 11px}.clues li.past{padding:5px 10px}}
    @media(prefers-reduced-motion:reduce){.toast{transition:none}.guess.shake{animation:none}.timer-bar i{transition:none}}