:root{
  --bg:#0d1020; --panel:#171b33; --soft:#232848; --text:#f5f7ff; --muted:#9aa3c7;
  --green:#25c26e; --yellow:#e8b923; --dark:#3a405f; --accent:#7c5cff; --danger:#ff5c7a;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(circle at top,#222956 0,#0d1020 45%,#080a14 100%);color:var(--text);min-height:100vh;display:grid;place-items:center;padding:18px}
.app{width:min(540px,100%)}
.hidden{display:none!important}.login-screen{background:rgba(23,27,51,.82);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:22px;backdrop-filter:blur(8px)}.login-screen h1{font-size:52px}.login-players{display:grid;gap:10px;margin:18px 0}.login-player{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#10142a;border:1px solid var(--soft);border-radius:16px;padding:12px}.login-player-main{display:flex;align-items:center;gap:10px}.avatar,.profile-avatar{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#232848,#10142a);font-size:24px;border:1px solid rgba(255,255,255,.1)}.login-player strong{font-size:18px}.login-player span{color:var(--muted);font-size:12px}.avatar-picker{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}.avatar-choice{width:42px;height:42px;border-radius:14px;background:#10142a;border:1px solid var(--soft);font-size:22px;padding:0;box-shadow:none}.avatar-choice.selected{outline:2px solid var(--accent);background:#232848}.login-add{margin-top:10px;grid-template-columns:1fr auto}.room-card{background:#10142a;border:1px solid var(--soft);border-radius:16px;padding:12px;margin:14px 0}.room-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-top:8px}.room-card p:last-child{margin:8px 0 0;color:var(--muted);font-size:12px}.room-card.active{border-color:var(--green);box-shadow:0 0 0 2px rgba(37,194,110,.15)}
.hero{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.eyebrow{color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:12px;margin:0 0 4px}
h1{font-size:44px;margin:0;letter-spacing:-.05em}.tagline{margin:6px 0 0;color:var(--muted);line-height:1.35}
button{border:0;border-radius:14px;background:var(--accent);color:white;font-weight:800;padding:13px 16px;box-shadow:0 10px 30px rgba(124,92,255,.28)}
.secondary{background:var(--soft);box-shadow:none;color:#dbe0ff;padding:10px 12px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.stats.two-stats{grid-template-columns:repeat(2,1fr)}.stats.account-stats{grid-template-columns:repeat(5,1fr)}
.stats div,.round-card,.player-card,.scoreboard-card{background:rgba(23,27,51,.82);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px;backdrop-filter:blur(8px)}
.player-card{margin-bottom:12px}.player-card label{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}.player-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}
select,input{background:#10142a;border:1px solid var(--soft);color:var(--text);border-radius:14px;padding:13px 14px;font-size:16px;outline:none;min-width:0}
.stats strong{display:block;font-size:26px}.stats span,.label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.round-card{margin-bottom:14px}.round-card p{margin:0}.round-card #roundInfo{margin-top:2px;font-size:17px}.wheel-wrap{display:flex;align-items:center;gap:12px}.roulette-window{width:118px;height:54px;position:relative;overflow:hidden;border-radius:18px;background:#080a14;border:2px solid rgba(255,255,255,.12);box-shadow:inset 0 0 18px rgba(0,0,0,.7),0 10px 28px rgba(0,0,0,.28)}.roulette-pointer{position:absolute;left:50%;top:0;transform:translateX(-50%);width:3px;height:100%;background:#fff;z-index:3;box-shadow:0 0 10px #fff}.roulette-window.spinning{box-shadow:inset 0 0 24px rgba(124,92,255,.85),0 0 28px rgba(124,92,255,.5)}.length-wheel{height:100%;display:grid;place-items:center;transition:transform .16s ease, filter .16s ease}.length-wheel span{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;font-weight:1000;color:white;font-size:30px;background:linear-gradient(135deg,#7c5cff,#25c26e);box-shadow:0 5px 16px rgba(0,0,0,.35)}.length-wheel.spinning{filter:brightness(1.35)}.length-wheel.spinning span{transform:scale(1.08)}#wheelInfo{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.board{display:grid;grid-template-rows:repeat(6,1fr);gap:8px;margin:14px auto;width:min(420px,100%)}.row{display:grid;grid-template-columns:repeat(var(--word-length,5),1fr);gap:8px}.tile{aspect-ratio:1;border-radius:14px;background:var(--panel);border:2px solid var(--soft);display:grid;place-items:center;font-size:34px;font-weight:1000;text-transform:uppercase;transition:.2s}.tile.filled{border-color:#5660a8;background:#20264a}.tile.pop{animation:pop .12s ease-out}.tile.reveal{animation:flip .32s ease-out}.tile.correct{background:var(--green);border-color:var(--green)}.tile.present{background:var(--yellow);border-color:var(--yellow);color:#17120b}.tile.absent{background:var(--dark);border-color:var(--dark);color:#c4c9df}@keyframes pop{50%{transform:scale(1.08)}}@keyframes flip{50%{transform:rotateX(90deg) scale(1.03)}}
.guess-form{display:none}.guess-form input{flex:1;text-transform:uppercase;text-align:center;letter-spacing:.16em;font-weight:900}.message{text-align:center;color:var(--muted);padding:14px;min-height:50px}.message>strong{display:block;color:#fff;font-size:22px;margin-bottom:2px}.word-story{margin:10px auto 0;text-align:left;background:#10142a;border:1px solid var(--soft);border-radius:14px;padding:10px;max-width:430px}.word-story strong{display:block;color:#fff;font-size:18px;letter-spacing:.08em}.word-story span{display:block;margin-top:4px;color:#dbe0ff}.word-story em{display:block;margin-top:4px;color:var(--muted);font-style:normal;font-size:12px}.keyboard{display:grid;gap:7px;margin-top:4px}.key-row{display:flex;justify-content:center;gap:5px}.key{min-width:0;flex:1;max-width:42px;padding:13px 0;border-radius:10px;background:var(--soft);text-align:center;font-weight:1000;font-size:18px;box-shadow:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}.key.wide{max-width:68px;flex:1.45;font-size:12px}.key.correct{background:var(--green)}.key.present{background:var(--yellow);color:#17120b}.key.absent{background:var(--dark);color:#8e96b8}.key:active{transform:translateY(1px);filter:brightness(1.15)}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:20}.confetti span{position:absolute;top:-40px;font-size:28px;animation:fall 1.6s ease-in forwards}@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.05}}
.profile-title{display:flex;align-items:center;gap:10px}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.actions button{white-space:nowrap}.scoreboard-card{margin-top:16px}.scoreboard-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.scoreboard-head h2{margin:3px 0 0;font-size:24px}.scoreboard{display:grid;gap:8px;margin-top:12px}.score-row{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;background:#10142a;border:1px solid var(--soft);border-radius:14px;padding:10px 12px}.rank{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-weight:900}.score-name{font-weight:900}.score-person{display:flex;align-items:center;gap:8px}.score-person .avatar{width:32px;height:32px;font-size:19px;border-radius:10px}.score-detail{color:var(--muted);font-size:12px;line-height:1.45}.mini-stats{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}.mini-stats b{font-size:10px;color:#dbe0ff;background:#171b33;border:1px solid var(--soft);border-radius:999px;padding:3px 6px}.score-points{text-align:right;font-weight:900;color:#fff}.score-points span{display:block;color:var(--muted);font-size:11px;font-weight:700}.medal-1 .rank{background:linear-gradient(135deg,#ffd766,#c88719);color:#221400}.medal-2 .rank{background:linear-gradient(135deg,#e8ecff,#8d96b9);color:#11162f}.medal-3 .rank{background:linear-gradient(135deg,#d58a50,#7d3f1f);color:white}
@media(max-width:600px){
  body{display:block;padding:6px;min-height:100svh}.app{width:100%}
  .game-screen .hero{display:none}
  .player-card{padding:7px 9px;margin-bottom:6px;border-radius:13px}.scoreboard-head h2{font-size:17px}.player-card .label{font-size:9px}.player-card button{padding:8px 9px;border-radius:10px;font-size:11px}.actions{gap:5px}
  .stats{gap:4px;margin-bottom:6px}.stats.account-stats{grid-template-columns:repeat(5,1fr)}.stats div{padding:6px 4px;border-radius:12px}.stats strong{font-size:15px}.stats span{font-size:7px}
  .round-card{display:block;padding:6px 8px;margin-bottom:5px;border-radius:13px}.wheel-wrap{gap:8px}.roulette-window{width:92px;height:42px;border-radius:14px}.length-wheel span{width:34px;height:34px;border-radius:11px;font-size:23px}.roulette-pointer{width:2px}.round-card #roundInfo{font-size:12px;margin:0}.round-card #wheelInfo{display:none}.label{font-size:10px}
  .board{width:min(344px,98vw);gap:4px;margin:5px auto}.row{gap:4px}.tile{border-radius:9px;font-size:32px;border-width:1px}
  .message{padding:5px;min-height:26px;font-size:12px}.message>strong{font-size:18px}.keyboard{gap:5px;margin-top:2px}.key-row{gap:4px}.key{font-size:19px;padding:11px 0;border-radius:9px;max-width:39px}.key.wide{font-size:13px;max-width:63px}
  .scoreboard-card{display:none}
  .login-screen{padding:16px}.login-screen h1{font-size:42px}.player-row{grid-template-columns:1fr}.login-add{grid-template-columns:1fr auto}.room-row{grid-template-columns:1fr 1fr 1fr}.room-row input{grid-column:1 / -1}
}
@media(max-height:760px) and (max-width:600px){
  .board{width:min(336px,98vw);gap:3px}.row{gap:3px}.tile{font-size:30px}.key{font-size:18px;padding:10px 0}.key.wide{font-size:12px}.message{font-size:12px}.stats strong{font-size:16px}.player-card{padding:6px 8px}.stats div{padding:5px 5px}
}