:host{display:block;width:100%;height:100%;color-scheme:dark;--navy:#0a1a3d;--edge:rgba(190,210,245,.28);--key:#5c6f96;--green:#538d4e;--yellow:#b59f3b;--absent:#2e3d5c;--focus:#ffd94d;background:var(--navy);color:#fff;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;align-items:center;padding:max(10px,env(safe-area-inset-top)) 10px calc(max(12px,env(safe-area-inset-bottom)) + 54px);background:radial-gradient(circle at 85% -10%,rgba(64,120,220,.28),transparent 48%),radial-gradient(circle at -10% 110%,rgba(240,189,69,.1),transparent 42%),var(--navy);overflow:hidden;touch-action:none}
    .tp-head{display:flex;align-items:center;justify-content:space-between;width:min(500px,100%);gap:8px}
    .tp-head h1{margin:0;font-family:"Bungee",sans-serif;font-size:clamp(26px,7vw,34px);font-weight:400;letter-spacing:.04em;color:#fff}
    .head-spacer{width:40px;flex:none}
    .icon-button{width:40px;height:40px;flex:none;display:grid;place-items:center;padding:0;border:1px solid var(--edge);border-radius:50%;color:#fff;background:rgba(255,255,255,.08);cursor:pointer;touch-action:none}
    .icon-button svg{width:19px;height:19px;fill:currentColor}
    .icon-button:active{transform:translateY(1px)}
    .icon-button:focus-visible,.key:focus-visible,.primary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
    .tally{margin-top:3px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(205,222,250,.72)}
    .board-wrap{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:10px 0 4px}
    .board{display:grid;grid-template-rows:repeat(6,1fr);gap:5px;height:min(396px,100%);aspect-ratio:5/6;max-width:94vw}
    .row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
    .row.shake{animation:tp-shake .3s ease}
    .tile{display:grid;place-items:center;border:2px solid #3d5480;border-radius:4px;font-size:clamp(22px,6vw,32px);font-weight:700;line-height:1;text-transform:uppercase;color:#fff;user-select:none;-webkit-user-select:none}
    .tile.filled{border-color:#7d94bd;background:rgba(255,255,255,.07)}
    .tile.correct{background:var(--green);border-color:var(--green)}
    .tile.present{background:var(--yellow);border-color:var(--yellow)}
    .tile.absent{background:var(--absent);border-color:var(--absent)}
    .tile.flip{animation:tp-flip .45s ease forwards}
    .tile.pop{animation:tp-pop .12s ease}
    .tile.bounce{animation:tp-bounce .7s ease}
    @keyframes tp-flip{0%{transform:rotateX(0)}50%{transform:rotateX(-88deg)}100%{transform:rotateX(0)}}
    @keyframes tp-pop{50%{transform:scale(1.14)}}
    @keyframes tp-bounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-14px)}50%{transform:translateY(2px)}70%{transform:translateY(-7px)}}
    @keyframes tp-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
    .keyboard{width:min(500px,100%);display:flex;flex-direction:column;gap:6px;margin-top:6px}
    .kb-row{display:flex;gap:5px;justify-content:center}
    .kb-row.mid{padding:0 5%}
    .key{flex:1 1 0;min-width:0;height:56px;padding:0 2px;border:0;border-radius:5px;background:var(--key);color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;display:grid;place-items:center}
    .key:active{filter:brightness(1.25)}
    .key.wide{flex:1.6 1 0;font-size:11px;letter-spacing:.02em}
    .key.correct{background:var(--green)}
    .key.present{background:var(--yellow)}
    .key.absent{background:var(--absent);color:rgba(255,255,255,.72)}
    .key svg{width:22px;height:22px;fill:currentColor}
    .toast{position:absolute;z-index:6;top:calc(max(10px,env(safe-area-inset-top)) + 66px);left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:10px 16px;border-radius:8px;background:#eef3ff;color:#0a1a3d;font-size:14px;font-weight:800;text-align:center;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .18s ease}
    .toast.show{opacity:1}
    .overlay{position:absolute;z-index:5;inset:0;display:grid;place-items:center;padding:20px;background:rgba(4,10,26,.55)}
    .overlay[hidden]{display:none}
    .card{width:min(400px,100%);padding:26px 24px 22px;color:#16233f;background:#f5f8ff;border:2px solid #f0bd45;border-radius:20px;box-shadow:0 18px 50px rgba(0,0,0,.5);text-align:center}
    .card .eyebrow{margin:0 0 8px;color:#b54a1f;font-size:12px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
    .card h2{margin:0;font-family:"Bungee",sans-serif;font-size:clamp(27px,7vw,36px);font-weight:400;line-height:1.05}
    .end-text{margin:12px auto 6px;max-width:34ch;font-size:16px;line-height:1.45;color:#33456b}
    .end-text strong{color:#16233f;letter-spacing:.06em}
    .end-tally{margin:0 0 18px;font-size:13px;font-weight:700;letter-spacing:.04em;color:#5c6f96;text-transform:uppercase}
    .primary{min-height:49px;width:100%;padding:0 22px;border:0;border-radius:14px;background:#e8622c;color:#fff;font-size:15px;font-weight:850;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 0 #7e2d10;touch-action:none}
    .primary:active{transform:translateY(2px);box-shadow:0 4px 0 #7e2d10}
    @media(max-height:700px){.key{height:48px}}
    @media(prefers-reduced-motion:reduce){.toast{transition:none}.tile.flip,.tile.pop,.tile.bounce,.row.shake{animation:none}}