:root{
  --bg:#0d0f13;--panel:#171a20;--panel2:#20242c;--ink:#f4f4f1;--muted:#a9adb6;
  --gold:#efbb50;--gold2:#ffd977;--line:#343a45;--green:#4f956b;--yellow:#b88c38;--gray:#555b66;
  --danger:#b95e5e;--shadow:0 14px 40px rgba(0,0,0,.34);--radius:14px;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
body{min-height:100dvh;-webkit-tap-highlight-color:transparent;background:radial-gradient(circle at 50% -20%,#242a35 0,#101217 34rem,#0d0f13 60rem)}
button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:not-allowed;opacity:.45}a{color:var(--gold2)}
.boot{min-height:100dvh;display:grid;place-items:center;font-weight:900;color:var(--muted)}
.shell{width:min(100%,760px);margin:0 auto;min-height:100dvh;padding-bottom:max(20px,env(safe-area-inset-bottom))}
.topbar{position:sticky;top:0;z-index:30;min-height:58px;padding:max(8px,env(safe-area-inset-top)) 12px 8px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;background:rgba(13,15,19,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;min-width:0}.brand-mark{width:34px;height:34px;border:2px solid var(--gold);display:grid;place-items:center;font-weight:1000;background:#0a0b0e;box-shadow:3px 3px 0 #6c5121}.brand-copy{min-width:0}.brand-copy strong{display:block;font-size:15px;line-height:1}.brand-copy small{display:block;margin-top:3px;color:var(--muted);font-size:9px;letter-spacing:.12em;font-weight:900;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;gap:6px}.icon-btn{min-width:42px;height:42px;border:1px solid var(--line);background:var(--panel);border-radius:10px;font-weight:900}.icon-btn:active,.btn:active,.key:active{transform:translateY(1px)}
.hero{position:relative;min-height:300px;background:#171a20 url('./assets/rynos-word-race.png') center/cover no-repeat;border-bottom:1px solid var(--line);overflow:hidden}.hero:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(13,15,19,.65) 42%,#0d0f13 100%)}.hero-copy{position:absolute;z-index:2;left:18px;right:18px;bottom:16px}.hero-kicker{font-size:10px;letter-spacing:.17em;font-weight:1000;color:var(--gold2)}.hero h1{margin:4px 0 5px;font-size:clamp(34px,10vw,58px);line-height:.92;letter-spacing:-.055em;text-transform:uppercase;text-shadow:0 3px 15px rgba(0,0,0,.8)}.hero p{margin:0;max-width:520px;color:#e4e5e6;font-size:13px;line-height:1.4;font-weight:700}
.pad{padding:14px}.card{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,#191c22,#14171c);box-shadow:var(--shadow);padding:14px}.card+.card{margin-top:10px}.card h2,.card h3{margin:0 0 7px}.card p{margin:0;color:var(--muted);line-height:1.45;font-size:13px}.eyebrow{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold2);font-weight:1000}.section-title{font-size:27px;line-height:1;margin:5px 0 7px;letter-spacing:-.04em}.muted{color:var(--muted)}
.form{display:grid;gap:9px;margin-top:12px}.field{display:grid;gap:5px}.field label{font-size:10px;color:#c8cbd0;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.field input{width:100%;min-height:48px;border:1px solid #3d4350;border-radius:10px;background:#0e1014;color:var(--ink);padding:10px 12px;outline:none}.field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(239,187,80,.13)}.field input[readonly]{color:#c5c8cc;background:#12151a}
.btn{min-height:46px;border:1px solid #4a515e;border-radius:10px;padding:9px 13px;background:#232833;font-weight:950;box-shadow:0 3px 0 rgba(0,0,0,.34)}.btn.primary{background:linear-gradient(#f5c75f,#daa43d);color:#17130a;border-color:#f8d27b}.btn.danger{background:#4a2428;border-color:#7d3b42}.btn.ghost{background:transparent}.btn.wide{width:100%}.btn.small{min-height:38px;font-size:11px;padding:7px 10px}.btn-row{display:flex;gap:8px;flex-wrap:wrap}.btn-row>.btn{flex:1}.link-btn{border:0;background:transparent;color:var(--gold2);text-decoration:underline;text-underline-offset:3px;padding:8px 0;font-weight:900;font-size:12px}
.rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}.rule{border:1px solid var(--line);background:#121419;border-radius:10px;padding:9px}.rule b{display:block;color:var(--gold2);font-size:16px}.rule span{display:block;margin-top:2px;font-size:9px;line-height:1.25;color:var(--muted);font-weight:800}
.status-strip{margin:10px 12px 0;border:1px solid #604b25;background:linear-gradient(90deg,#2c2516,#1c1a15);border-radius:10px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px}.status-strip strong{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold2)}.status-strip span{font-size:10px;color:#d9d2c5;font-weight:800}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#62c181;box-shadow:0 0 0 4px rgba(98,193,129,.12);margin-right:6px}.grace-dot{background:var(--gold)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px 12px}.stat{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:8px 6px;text-align:center;min-width:0}.stat small{display:block;font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:900}.stat strong{display:block;margin-top:2px;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game{padding:0 12px 14px}.game-head{text-align:center;margin:4px 0 8px}.category{display:inline-flex;min-height:27px;align-items:center;border:1px solid #604b25;background:#2b2416;color:var(--gold2);border-radius:999px;padding:5px 10px;font-size:9px;letter-spacing:.12em;font-weight:1000;text-transform:uppercase}.game-head h2{margin:6px 0 2px;font-size:18px}.game-head p{margin:0;color:var(--muted);font-size:10px;font-weight:700}
.board{width:min(88vw,340px);aspect-ratio:5/6;margin:0 auto;display:grid;grid-template-rows:repeat(6,1fr);gap:5px}.board-row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;min-height:0}.tile{display:grid;place-items:center;border:2px solid #464c57;border-radius:7px;background:#13161b;font-size:clamp(24px,7vw,34px);font-weight:1000;text-transform:uppercase;box-shadow:0 2px 0 rgba(0,0,0,.3)}.tile.typed{border-color:#6d7480}.tile.exact{background:var(--green);border-color:#72b38b}.tile.present{background:var(--yellow);border-color:#d2a64f}.tile.absent{background:var(--gray);border-color:#727986}.tile.reveal{animation:flip .34s ease}.tile.pop{animation:pop .08s ease}@keyframes flip{50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}@keyframes pop{50%{transform:scale(1.06)}}
.clue-wrap{min-height:53px;margin:7px auto 3px;max-width:430px;display:grid;place-items:center;text-align:center}.clue{border:1px solid #50452e;border-radius:10px;background:#1c1a15;padding:8px 10px;font-size:11px;line-height:1.32;color:#ddd3bd;font-weight:800}.clue b{color:var(--gold2)}
.keyboard{display:grid;gap:5px;max-width:500px;margin:4px auto 0}.key-row{display:flex;gap:4px;justify-content:center}.key{height:45px;min-width:0;flex:1;border:1px solid #4a505c;border-radius:7px;background:#2b3039;font-size:11px;font-weight:1000;padding:0 2px}.key.wide{flex:1.5;font-size:9px}.key.exact{background:var(--green);border-color:#72b38b}.key.present{background:var(--yellow);border-color:#d2a64f}.key.absent{background:#444a54;color:#b7bbc1}.game-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-width:500px;margin:8px auto 0}
.completion{max-width:500px;margin:9px auto 0;border:1px solid #665027;border-radius:12px;background:linear-gradient(145deg,#2c2518,#171613);padding:11px;text-align:center}.completion strong{display:block;font-size:20px;color:var(--gold2)}.completion p{margin:4px 0 9px;color:#d5cec0;font-size:11px}.answer{letter-spacing:.16em}
.nav-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:10px 12px 0}.tab{min-height:42px;border:1px solid var(--line);border-radius:9px;background:#171a20;font-size:10px;font-weight:950}.tab.active{border-color:#86682c;background:#292315;color:var(--gold2)}
.lb{padding:10px 12px 16px}.lb-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:11px;background:#171a20;padding:9px;margin-bottom:6px}.rank{width:32px;height:32px;display:grid;place-items:center;border:1px solid #4b515d;border-radius:8px;background:#101217;font-size:13px;font-weight:1000}.rank.first{border-color:#9c792e;color:var(--gold2);background:#2a2314}.lb-name{min-width:0}.lb-name strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-name small{display:block;margin-top:2px;color:var(--muted);font-size:9px;font-weight:800}.lb-score{text-align:right}.lb-score strong{display:block;font-size:15px}.lb-score small{display:block;color:var(--muted);font-size:8px;font-weight:800}.you{color:var(--gold2)}
.score-wrap{overflow:auto;border:1px solid var(--line);border-radius:11px;background:#111318;max-height:68dvh}.score-table{border-collapse:separate;border-spacing:0;min-width:100%;font-size:10px}.score-table th,.score-table td{padding:8px;border-right:1px solid #292e37;border-bottom:1px solid #292e37;text-align:center;white-space:nowrap}.score-table th{position:sticky;top:0;background:#20242c;z-index:2;color:#d6d8dc}.score-table th:first-child,.score-table td:first-child{position:sticky;left:0;z-index:1;background:#181b21;font-weight:1000}.score-table th:first-child{z-index:3;background:#252a33}.score-table td.solved{color:#7dd39a;font-weight:1000}.score-table td.failed{color:#e38181;font-weight:1000}
.player-list{display:grid;gap:6px;margin-top:10px}.player-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:10px;background:#14171c;padding:9px 10px}.player-chip strong{font-size:12px}.player-chip span{font-size:9px;color:var(--muted);font-weight:800}
.invite-output{margin-top:10px;border:1px solid #63502d;background:#1b1812;border-radius:10px;padding:10px}.invite-output code{display:block;color:#f4d58e;font-size:10px;line-height:1.35;word-break:break-all}.invite-list{display:grid;gap:5px;margin-top:10px}.invite-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;border-bottom:1px solid #2e333c;padding:8px 0}.invite-row:last-child{border-bottom:0}.invite-row strong{display:block;font-size:11px}.invite-row small{display:block;color:var(--muted);font-size:9px}.pill{align-self:center;border:1px solid #4b515c;border-radius:999px;padding:4px 7px;font-size:8px;font-weight:1000;color:#c7cbd0}.pill.used{border-color:#366344;color:#78c892}.pill.waiting{border-color:#705b30;color:#e0bb67}
.empty{text-align:center;padding:28px 16px}.empty h2{margin:0 0 6px}.empty p{margin:0 auto 14px;max-width:420px;color:var(--muted);font-size:12px;line-height:1.45}.setup-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;background:#0b0d10;border:1px solid var(--line);padding:10px;border-radius:9px;overflow:auto;color:#d8dadd}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:1000;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.18s ease;background:#f1f0ea;color:#16181c;border-radius:999px;padding:10px 14px;font-size:11px;font-weight:900;box-shadow:0 8px 30px rgba(0,0,0,.4);max-width:calc(100vw - 24px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
.loading-overlay{position:fixed;inset:0;z-index:800;background:rgba(8,9,12,.62);backdrop-filter:blur(3px);display:grid;place-items:center;font-weight:1000}.hidden{display:none!important}.divider{height:1px;background:var(--line);margin:13px 0}.error{color:#ef9a9a}.success{color:#89d39e}
@media(max-width:520px){.hero{min-height:270px}.rule-grid{grid-template-columns:1fr 1fr 1fr}.stats{gap:4px}.stat{padding:7px 3px}.stat strong{font-size:14px}.pad{padding:12px}.card{padding:12px}.board{width:min(88vw,320px)}.key{height:43px}.lb-row{grid-template-columns:36px minmax(0,1fr) auto}.hero h1{font-size:40px}}
@media(max-height:690px){.hero{min-height:230px}.board{width:min(72vw,275px)}.key{height:38px}.game-head{margin-bottom:5px}.clue-wrap{min-height:44px;margin-top:4px}}