:root{--bg:#0e1120;--panel:#1a1f36;--panel-2:#232a48;--text:#eef1ff;--muted:#8b93b8;--border:#2b3254;--accent:#7c5cff;--good:#00d2a0;--bad:#ff5d6c}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,sans-serif}.app{flex-direction:column;justify-content:center;align-items:center;gap:1rem;height:100%;padding:1rem;display:flex}.screen{--container:min(94vw, calc(100dvh - 12rem), 70rem)}.phone{--container:min(100%, 36rem);gap:.75rem;padding:.75rem}.scorebar{width:var(--container);background:var(--panel);border:1px solid var(--border);border-radius:.9rem;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem 1.1rem;font-weight:700;display:flex}.scorebar-round,.scorebar-score{white-space:nowrap;font-size:clamp(1rem,2.4vw,1.5rem)}.scorebar-attempts{align-items:center;gap:.4rem;display:flex}.attempt-dot{border:1px solid var(--border);background:#333a5c;border-radius:50%;width:clamp(.7rem,1.8vw,1.2rem);height:clamp(.7rem,1.8vw,1.2rem);transition:background .25s,box-shadow .25s}.attempt-dot.filled{background:var(--muted)}.scorebar.scorebar-correct .attempt-dot.filled{background:var(--good);box-shadow:0 0 .5rem #00d2a08c}.scorebar.scorebar-failed .attempt-dot.filled{background:var(--bad);box-shadow:0 0 .5rem #ff5d6c8c}.board{width:var(--container);gap:clamp(.5rem,1.5vw,1.25rem);display:grid}.tile{aspect-ratio:1;border:2px solid var(--border);background:var(--panel);color:var(--text);text-align:center;word-break:break-word;cursor:pointer;border-radius:clamp(.75rem,2vw,1.4rem);justify-content:center;align-items:center;padding:clamp(.35rem,1.5vw,.9rem);font-weight:800;transition:transform .15s,border-color .15s,background .2s,opacity .3s,box-shadow .3s;display:flex;overflow:hidden;container-type:inline-size}.tile:hover:not(:disabled){border-color:var(--accent);transform:translateY(-3px)}.tile:disabled{cursor:default}.tile-image{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;width:82%;height:82%}.tile-word{text-wrap:balance;font-size:clamp(.8rem,15cqi,3.5rem);line-height:1.1}.tile-empty{opacity:.35;border-style:dashed}.tile.wrong{border-color:var(--bad);animation:.45s ease-in-out shake,.45s ease-in-out wrongflash}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-9px)}40%{transform:translate(9px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}@keyframes wrongflash{0%,to{background:var(--panel)}40%{background:#ff5d6c66}}.tile.correct{border-color:var(--good);background:#00d2a029;animation:.6s ease-out .15s both pop;box-shadow:0 0 2.2rem #00d2a073}@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.12)}to{transform:scale(1.06)}}.tile.dim{opacity:.32;filter:saturate(.4)}.landing{text-align:center;flex-direction:column;align-items:center;gap:1.25rem;max-width:34rem;display:flex}.landing h1{letter-spacing:.02em;margin:0;font-size:clamp(2.6rem,6vw,4.5rem)}.landing p{color:var(--muted);margin:0;font-size:clamp(1rem,2vw,1.25rem);line-height:1.5}.lobby{text-align:center;background:var(--panel);border:1px solid var(--border);border-radius:1.4rem;flex-direction:column;align-items:center;gap:1.1rem;padding:1.75rem clamp(1.5rem,4vw,3rem);display:flex;box-shadow:0 1rem 3rem #00000059}.lobby-title{text-transform:uppercase;letter-spacing:.25em;color:var(--muted);margin:0;font-size:clamp(1rem,2vw,1.2rem)}.room-code{letter-spacing:.3em;text-indent:.3em;color:var(--good);font-size:clamp(2.4rem,7vw,4.2rem);font-weight:900}.qr{background:#fff;border-radius:1rem;padding:.7rem;line-height:0;box-shadow:0 .4rem 1.2rem #0006}.waiting{color:var(--muted);margin:0;font-size:clamp(1rem,2vw,1.2rem)}.card-view{width:100%;max-width:var(--container);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1.25rem;display:flex}.card-text{text-align:center;word-break:break-word;font-size:clamp(2.2rem,12vw,5.5rem);font-weight:900;line-height:1.05}.card-image{aspect-ratio:1;object-fit:contain;width:min(72vw,17rem)}.hint{color:var(--muted);text-align:center;margin:0;font-size:clamp(.95rem,3vw,1.15rem)}.reveal-result{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1rem;width:100%;display:flex}.reveal-headline{font-size:clamp(1.4rem,6vw,2.4rem);font-weight:900}.result-correct .reveal-headline{color:var(--good)}.result-failed .reveal-headline{color:var(--bad)}.reveal-result .card-text{font-size:clamp(1.8rem,8vw,3.5rem)}.btn{border:1px solid var(--border);font:inherit;color:var(--text);background:var(--panel-2);cursor:pointer;border-radius:999px;padding:.75rem 2rem;font-size:clamp(1rem,2.4vw,1.25rem);font-weight:700;transition:transform .15s,filter .15s,box-shadow .15s}.btn:hover:not(:disabled){filter:brightness(1.2);transform:translateY(-2px)}.btn:disabled{opacity:.45;cursor:default}.btn-primary{background:linear-gradient(135deg,#8b6bff,#5a48d6);border-color:#0000;box-shadow:0 .4rem 1.6rem #7c5cff66}.btn-ghost{color:var(--muted);background:0 0}.error{color:var(--bad);text-align:center;background:#ff5d6c1f;border:1px solid #ff5d6c73;border-radius:.8rem;max-width:30rem;margin:0;padding:.6rem 1.1rem;font-size:clamp(.95rem,2.2vw,1.1rem)}.banner{background:var(--panel);border:1px solid var(--border);text-align:center;border-radius:1.2rem;flex-direction:column;align-items:center;gap:1rem;max-width:30rem;padding:1.5rem 2rem;font-size:clamp(1rem,2.5vw,1.3rem);display:flex}.banner p{margin:0}.spinner{border:.32rem solid var(--border);border-top-color:var(--accent);border-radius:50%;width:3.2rem;height:3.2rem;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (height<=480px){.screen{--container:min(94vw, calc(100dvh - 8.5rem), 48rem)}.board{gap:.4rem}}