:root{--bg: #f4f2ec;--surface: #fbfaf7;--surface-2: #f0ede5;--ink: #3f3b36;--muted: #9a948a;--line: #e4e0d6;--lav: #c7c1e8;--lav-deep: #b3aadb;--sage: #c3d4c0;--blush: #eccfd4;--sky: #c2d4e0;--butter: #efe3c2;--good: #6fae8c;--bad: #cf7b85;--radius: 14px;--shadow: 0 1px 2px rgba(63, 59, 54, .05), 0 6px 18px -10px rgba(63, 59, 54, .25)}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg)}#app{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.5rem;border-bottom:1px solid var(--line);background:var(--surface)}.brand{font-size:1.25rem;font-weight:700;letter-spacing:.2px}.stats{display:flex;gap:.55rem}.stat{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:.35rem .95rem;text-align:center;min-width:70px}.stat span{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.stat b{font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums}.center{flex:1;display:flex;flex-direction:column;align-items:center;padding:2.5rem 1rem;gap:1.1rem}.tiles{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}.tile{width:76px;height:76px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-size:2.1rem;font-weight:700;color:var(--ink);animation:rise .3s ease backwards}.tile:nth-child(5n+1){background:#f3eef9}.tile:nth-child(5n+2){background:#eef5ee}.tile:nth-child(5n+3){background:#fcf0f2}.tile:nth-child(5n+4){background:#eef3f7}.tile:nth-child(5n+5){background:#f8f2e6}.tile:nth-child(2){animation-delay:.04s}.tile:nth-child(3){animation-delay:.08s}.tile:nth-child(4){animation-delay:.12s}.tile:nth-child(5){animation-delay:.16s}.tile:nth-child(6){animation-delay:.2s}@keyframes rise{0%{transform:translateY(6px);opacity:0}to{transform:translateY(0);opacity:1}}.guess{width:min(560px,92vw);padding:.95rem 1.2rem;font-size:1.25rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.guess::placeholder{color:#c2bcb1}.guess:focus{border-color:var(--lav-deep);box-shadow:0 0 0 3px #b3aadb40}.actions{display:flex;gap:.7rem}button{font-family:inherit;font-weight:600;font-size:.95rem;padding:.65rem 1.35rem;border:1px solid var(--line);border-radius:12px;cursor:pointer;color:var(--ink);background:var(--surface);box-shadow:var(--shadow);transition:transform .06s ease,background .15s ease,border-color .15s ease}button:hover{background:var(--surface-2)}button:active{transform:translateY(1px)}.primary{background:var(--lav);border-color:var(--lav-deep)}.primary:hover{background:var(--lav-deep)}.secondary{background:var(--surface)}.big{font-size:1.05rem;padding:.85rem 1.8rem;margin-top:.6rem}.feedback{min-height:1.4rem;margin:0;font-weight:600}.feedback.ok{color:var(--good)}.feedback.bad{color:var(--bad)}.found-head{font-weight:600;margin:.6rem 0 0;color:var(--muted)}.found-head b{color:var(--ink)}.found{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;max-width:min(720px,94vw)}.chip{background:#eef5ee;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:.22rem .75rem;font-weight:600;text-transform:lowercase}.chip.missed{background:var(--surface-2);color:var(--muted)}.chip.pop{animation:pop .18s ease}@keyframes pop{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:2rem 2.2rem;max-width:520px;text-align:center}.card.wide{max-width:760px}.card h1{margin:0 0 .5rem;font-size:1.9rem;font-weight:700}.label{font-weight:600;margin-bottom:.5rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-size:.78rem}.result-score{font-size:1.25rem}.muted{color:var(--muted)}.small{font-size:.85rem}.seg{display:inline-flex;gap:.35rem;margin-bottom:1.2rem;padding:.3rem;background:var(--surface-2);border:1px solid var(--line);border-radius:14px}.seg-btn{background:transparent;border:none;box-shadow:none;border-radius:10px;padding:.55rem 1.1rem}.seg-btn:hover{background:#00000008}.seg-btn.active{background:var(--lav)}.seg-btn:disabled{opacity:.55;cursor:default}.text-in{width:100%;padding:.7rem .9rem;font-size:1rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;outline:none;margin-bottom:.6rem}.text-in:focus{border-color:var(--lav-deep);box-shadow:0 0 0 3px #b3aadb40}.code-in{text-transform:uppercase;letter-spacing:2px;font-weight:600}.join-row{display:flex;gap:.5rem;margin-bottom:.4rem}.join-row .text-in{margin-bottom:0}.divider{position:relative;text-align:center;margin:1rem 0;color:var(--muted);font-size:.85rem}.divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line)}.divider span{position:relative;background:var(--surface);padding:0 .6rem}.room-pill{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.3rem .85rem;font-size:.9rem;letter-spacing:1px}.roster,#scoreboard{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}.roster-row,.score-row{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;background:var(--surface-2);border:1px solid var(--line);border-radius:10px}.score-row.me,.rank-row.me{border-color:var(--lav-deep);background:#f3eef9}.rname{flex:1;text-align:left;font-weight:600}.pts{font-variant-numeric:tabular-nums}.dot{width:8px;height:8px;border-radius:50%;flex:none}.dot.on{background:var(--good)}.dot.off{background:#cbb9a0}.badge{font-size:.65rem;text-transform:uppercase;letter-spacing:.5px;background:var(--lav);border-radius:6px;padding:.1rem .4rem}.play-grid{flex:1;display:grid;grid-template-columns:1fr minmax(180px,240px);gap:1.5rem;align-items:start;padding:2.5rem 1.5rem;max-width:980px;width:100%;margin:0 auto}.play-main{display:flex;flex-direction:column;align-items:center;gap:1.1rem}.scorepanel{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:1rem}.scorepanel .label{margin-top:0}@media(max-width:720px){.play-grid{grid-template-columns:1fr}.scorepanel{order:-1}}.ranking{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0;text-align:left}.rank-row{display:grid;grid-template-columns:2rem 1fr auto;align-items:center;gap:.5rem;padding:.6rem .8rem;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}.rank-row .place{font-size:1.1rem;text-align:center}.rank-words{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.3rem}.rank-words .chip{font-size:.8rem;padding:.12rem .5rem}#netstatus{position:fixed;top:.75rem;left:50%;transform:translate(-50%);z-index:50;background:#f3e6cf;border:1px solid #e0c89a;color:#6b5326;font-weight:600;font-size:.85rem;padding:.4rem .9rem;border-radius:999px;box-shadow:var(--shadow)}.link-btn{background:none;border:none;box-shadow:none;color:var(--muted);text-decoration:underline;padding:.5rem;margin-top:.4rem}.link-btn:hover{background:none;color:var(--ink)}.help{text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:.5rem .5rem .5rem .2rem;margin-top:.4rem}.help ul{margin:0;padding-left:1.4rem}.help li{margin:.25rem 0;color:var(--ink)}