:root{
  --bg:#090d13;
  --panel:#141a23;
  --panel2:#1b222d;
  --panel3:#10151d;
  --line:#2a3442;
  --line-soft:rgba(255,255,255,.08);
  --text:#f7f8fb;
  --muted:#929eae;
  --accent:#8b5cf6;
  --accent2:#6366f1;
  --good:#52d38b;
  --bad:#ff6b78;
  --warn:#f0ba54;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% -10%,rgba(139,92,246,.26),transparent 30%),
    radial-gradient(circle at 105% 100%,rgba(99,102,241,.14),transparent 34%),
    var(--bg);
}

button,input{font:inherit}
button{cursor:pointer}
button:disabled,input:disabled{cursor:not-allowed;opacity:.55}

.app-shell{
  width:min(1220px,100%);
  min-height:100vh;
  margin:0 auto;
  background:rgba(13,18,26,.9);
}

.topbar{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  border-bottom:1px solid var(--line-soft);
  background:rgba(11,15,21,.94);
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(18px);
}

.brand{display:flex;align-items:center;gap:12px}
.brand>div:last-child{display:grid;gap:2px}
.brand strong{font-size:15px}
.brand span{font-size:11px;color:var(--muted)}

.logo{
  width:40px;height:40px;border-radius:13px;
  display:grid;place-items:center;
  font-size:13px;font-weight:950;letter-spacing:-.04em;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 8px 26px rgba(99,102,241,.28);
}

.top-actions{display:flex;align-items:center;gap:8px}
.room-pill{
  height:38px;padding:0 12px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel);display:flex;align-items:center;
  gap:8px;font-size:12px;color:var(--muted);
}
.live-dot{width:7px;height:7px;border-radius:50%;background:#657080}
.live-dot.on{background:var(--good);box-shadow:0 0 12px rgba(82,211,139,.7)}

.icon-btn,.secondary-btn{
  border:1px solid var(--line);
  color:var(--text);background:var(--panel2);
}
.icon-btn{
  width:38px;height:38px;border-radius:11px;font-weight:900;
}
.secondary-btn{
  padding:9px 12px;border-radius:10px;font-size:12px;font-weight:800;
}

.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:24px;
  padding:28px;
}

.game-column{min-width:0}
.hero{text-align:center;padding:6px 12px 4px}
.eyebrow,.section-kicker{
  color:#b9a4ff;font-size:10px;font-weight:900;letter-spacing:.18em;
}
.hero h1{
  margin:5px 0 6px;font-size:clamp(34px,5vw,58px);
  letter-spacing:-.045em;line-height:1;
}
.hero p{margin:0;color:var(--muted);font-size:14px}

.stats{
  display:grid;grid-template-columns:1.35fr 1fr 1fr;
  gap:10px;margin:22px 0 14px;
}
.stat{
  min-height:94px;background:linear-gradient(180deg,#1d2531,#171e28);
  border:1px solid var(--line);border-radius:16px;padding:14px 16px;
  display:grid;align-content:center;text-align:center;
}
.stat-label{font-size:9px;color:var(--muted);font-weight:900;letter-spacing:.16em}
.stat strong{font-size:30px;line-height:1.15;margin:3px 0}
.stat small{font-size:10px;color:var(--muted)}
.timer-track{
  height:4px;background:#2b3441;border-radius:999px;overflow:hidden;margin-top:7px;
}
.timer-fill{
  height:100%;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .25s linear;
}

.board-card{
  background:linear-gradient(180deg,#111720,#0f141c);
  border:1px solid var(--line);border-radius:20px;padding:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.17);
}
.board-heading,.section-heading,.side-heading{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.board-heading>div{display:grid;gap:3px}
.board-heading strong{font-size:13px;color:#d5d9e0}

.letters{
  margin-top:16px;display:grid;grid-template-columns:repeat(8,1fr);gap:9px;
}
.letter{
  aspect-ratio:1/1;border:1px solid #394657;border-radius:14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)),
    #202937;
  display:grid;place-items:center;font-size:clamp(20px,3vw,32px);font-weight:950;
  user-select:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.14);
  animation:tileIn .2s ease both;
}
@keyframes tileIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.guess-row{display:flex;gap:9px;margin-top:18px}
.guess-row input{
  flex:1;min-width:0;height:48px;border-radius:12px;
  border:1px solid #394657;background:#151c26;color:#fff;
  padding:0 14px;outline:none;font-size:17px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;
}
.guess-row input:focus{border-color:#7867ff;box-shadow:0 0 0 3px rgba(120,103,255,.12)}
.primary-btn{
  border:0;border-radius:12px;padding:0 18px;min-height:44px;
  color:#fff;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 8px 22px rgba(99,102,241,.18);
}
.primary-btn.wide{width:100%;margin-top:12px}

.feedback-row{
  min-height:34px;display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:8px;font-size:12px;
}
.feedback{color:var(--muted);font-weight:700}
.feedback.good{color:var(--good)}
.feedback.bad{color:var(--bad)}
.rules-mini{display:flex;gap:6px;color:#697587;white-space:nowrap;font-size:10px}

.found-section{margin-top:24px}
.section-heading h2,.side-heading h3{margin:3px 0 0;font-size:16px}
.count-pill{
  color:var(--muted);background:#151c25;border:1px solid var(--line);
  padding:6px 9px;border-radius:999px;font-size:10px;font-weight:800;
}
.words{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.words.empty{display:block}
.empty-state{
  border:1px dashed var(--line);border-radius:13px;padding:20px;
  text-align:center;color:#697587;font-size:12px;
}
.word{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#131a23;border:1px solid var(--line);border-radius:12px;padding:10px 12px;
}
.word strong{font-size:13px}
.word span{font-size:10px;color:var(--muted)}

.sidebar{display:flex;flex-direction:column;gap:12px}
.side-card{
  background:linear-gradient(180deg,#1a222d,#171e27);
  border:1px solid var(--line);border-radius:17px;padding:16px;
}
.side-card h3{margin:4px 0;font-size:15px}

.scoreboard{display:grid;gap:8px;margin-top:13px}
.player-row{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;
  min-height:42px;padding:5px;border-radius:11px;
}
.player-row.you{background:rgba(139,92,246,.10)}
.avatar{
  width:34px;height:34px;border-radius:50%;background:#2a3442;
  display:grid;place-items:center;font-size:11px;font-weight:900;overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.player-meta{min-width:0;display:grid}
.player-name{font-size:12px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-words{font-size:9px;color:var(--muted)}
.player-score{font-size:13px;font-weight:950}
.offline{opacity:.55}

.challenge-card{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 100% 0,rgba(139,92,246,.23),transparent 45%),
    linear-gradient(180deg,#1b222d,#171e27);
}
.challenge-icon{font-size:26px;margin:12px 0 6px}
.challenge-card p,.scoring-card p{
  color:var(--muted);font-size:11px;line-height:1.55;margin:6px 0 0;
}
.challenge-card.complete{border-color:rgba(82,211,139,.45)}
.challenge-card.complete .section-kicker,.challenge-card.complete h3{color:var(--good)}

.available-list{display:grid;gap:9px;margin-top:14px}
.available-row{display:grid;gap:5px}
.available-head{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}
.progress-track{height:6px;background:#252e3a;border-radius:999px;overflow:hidden}
.progress-fill{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .25s ease;
}

.score-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:12px}
.score-grid div{
  background:#111821;border:1px solid var(--line);border-radius:10px;
  padding:8px 4px;text-align:center;display:grid;gap:2px;
}
.score-grid strong{font-size:13px}
.score-grid span{font-size:8px;color:var(--muted)}

.loading-line{
  height:36px;border-radius:10px;background:linear-gradient(90deg,#202936,#293341,#202936);
  background-size:200% 100%;animation:shimmer 1.5s infinite;
}
.loading-line.short{width:72%}
@keyframes shimmer{to{background-position:-200% 0}}

.modal-backdrop{
  position:fixed;inset:0;background:rgba(3,6,10,.76);display:none;
  place-items:center;padding:20px;z-index:50;backdrop-filter:blur(8px);
}
.modal-backdrop.show{display:grid}
.modal{
  width:min(430px,100%);background:#171f29;border:1px solid #354052;
  border-radius:20px;padding:24px;box-shadow:0 30px 100px rgba(0,0,0,.52);
  position:relative;text-align:center;
}
.modal.compact{width:min(360px,100%)}
.modal h2{margin:7px 0 5px;font-size:24px}
.modal p{color:var(--muted);font-size:12px;line-height:1.6}
.modal-close{
  position:absolute;right:12px;top:10px;width:34px;height:34px;border:0;
  border-radius:10px;background:#232c38;color:#fff;font-size:22px;
}
.spinner{
  width:38px;height:38px;border-radius:50%;border:3px solid #303b49;
  border-top-color:#8b5cf6;margin:0 auto 14px;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.result-badge{
  display:inline-block;color:#c2afff;background:rgba(139,92,246,.12);
  border:1px solid rgba(139,92,246,.3);padding:5px 9px;border-radius:999px;
  font-size:9px;font-weight:950;letter-spacing:.14em;
}
.result-scores{display:grid;gap:6px;margin:16px 0}
.result-row{
  display:flex;justify-content:space-between;padding:8px 10px;
  background:#111821;border:1px solid var(--line);border-radius:10px;font-size:12px;
}
.next-round{font-size:11px;color:var(--muted)}
.how-to{text-align:left}
.how-to p{padding-left:11px;border-left:2px solid #3a4656}

@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{display:grid;grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .topbar{height:64px;padding:0 12px}
  .layout{padding:14px 10px 24px}
  .hero h1{font-size:36px}
  .hero p{font-size:12px}
  .stats{grid-template-columns:repeat(3,1fr)}
  .stat{min-height:82px;padding:10px}
  .stat strong{font-size:23px}
  .letters{grid-template-columns:repeat(4,1fr)}
  .guess-row{flex-direction:column}
  .guess-row .primary-btn{height:46px}
  .feedback-row{align-items:flex-start;flex-direction:column}
  .rules-mini{display:none}
  .words{grid-template-columns:1fr}
  .sidebar{grid-template-columns:1fr}
  .room-pill{max-width:150px;overflow:hidden}
}