*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body {
  width:100%; height:100%; overflow:hidden;
  touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none;
  user-select:none; -webkit-tap-highlight-color:transparent; overscroll-behavior:none;
}
body {
  font-family:'Outfit',sans-serif; background:#f0f1f6; color:#2a2a3a;
  display:flex; justify-content:center; align-items:center;
}

.tg-hint {
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:10px 16px; background:rgba(255,180,74,0.15);
  color:#b08030; font-size:13px; text-align:center;
  border-bottom:1px solid rgba(200,160,60,0.2);
}
.tg-hint a { color:#3a7edf; text-decoration:underline; }

.screen {
  position:fixed; inset:0; display:none; flex-direction:column;
  align-items:center; justify-content:center; padding:16px; z-index:1;
}
.screen.active { display:flex; }

/* === MENU === */
.menu-wrap { display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; max-width:340px; }
.logo {
  font-size:40px; font-weight:800; letter-spacing:3px; color:#3a3a5a;
}
.subtitle { font-size:13px; color:#999; letter-spacing:6px; text-transform:uppercase; margin-top:-12px; }
input[type="text"] {
  width:100%; padding:14px 18px; background:#fff;
  border:2px solid #ddd; border-radius:14px; color:#333;
  font-family:inherit; font-size:17px; outline:none;
}
input[type="text"]:focus { border-color:#7aa5e8; }
input[type="text"]::placeholder { color:#bbb; }
.color-pick { display:flex; gap:12px; }
.color-btn {
  width:44px; height:44px; border-radius:50%; background:var(--c);
  border:3px solid transparent; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.color-btn.selected { border-color:#333; transform:scale(1.15); }
.btn-primary {
  width:100%; padding:16px; background:linear-gradient(135deg,#5b8def,#4070d0);
  border:none; border-radius:14px; color:#fff; font-family:inherit;
  font-size:17px; font-weight:600; letter-spacing:2px; cursor:pointer;
  box-shadow:0 4px 14px rgba(80,112,208,.3);
}
.btn-primary:active { transform:scale(.97); }
.btn-secondary {
  padding:12px 24px; background:#fff; border:2px solid #ddd; border-radius:14px;
  color:#666; font-family:inherit; font-size:15px; font-weight:600; cursor:pointer;
}
.btn-secondary:active { background:#f5f5f5; }

/* === LOBBY === */
.lobby-wrap { display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; max-width:340px; }
.lobby-wrap h2 { font-size:28px; font-weight:800; }
#lobby-players { width:100%; display:flex; flex-direction:column; gap:10px; }
.lobby-player {
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  background:#fff; border-radius:14px; border:2px solid #eee;
}
.lobby-player-dot { width:14px; height:14px; border-radius:50%; }
.lobby-player-name { flex:1; font-size:16px; font-weight:600; }
.lobby-player-status { font-size:13px; padding:4px 10px; border-radius:8px; background:#f0f0f0; color:#888; }
.lobby-player-status.ready { background:#e8f8ee; color:#3ab060; }
.lobby-status { font-size:14px; color:#999; text-align:center; }

/* === HUD === */
.game-hud {
  width:100%; max-width:400px; display:flex; align-items:center;
  justify-content:space-between; padding:4px 4px 8px;
}
.hud-score { display:flex; flex-direction:column; align-items:flex-start; }
.hud-label { font-size:11px; color:#999; text-transform:uppercase; letter-spacing:2px; }
.hud-value { font-size:30px; font-weight:800; color:#2a2a3a; }
.hud-value.bump { animation:scoreBump .2s ease; }
.hud-combo { font-size:17px; font-weight:800; color:#e89030; opacity:0; }
.hud-combo.visible { opacity:1; }
.hud-opponents { display:flex; flex-direction:column; align-items:flex-end; gap:2px; max-height:80px; overflow-y:auto; }
.hud-opp-row { display:flex; align-items:center; gap:6px; font-size:12px; }
.hud-opp-row .opp-name { color:#999; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hud-opp-row .opp-score { font-weight:700; min-width:30px; text-align:right; }
.hud-opp-row .opp-dead { opacity:.4; text-decoration:line-through; }
@keyframes scoreBump { 0%{transform:scale(1)} 50%{transform:scale(1.15)} 100%{transform:scale(1)} }

/* === BOARD — light, big, clear 3x3 sections === */
.board {
  width:min(calc(100vw - 16px), 400px); aspect-ratio:1;
  display:grid; grid-template-columns:repeat(9,1fr); grid-template-rows:repeat(9,1fr);
  gap:2px; padding:3px;
  background:#bfc2cc;
  border-radius:12px;
  border:2px solid #b0b3be;
  contain:strict;
}
.confetti-canvas { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:10; }

.cell {
  border-radius:3px; background:#fff; position:relative;
}
/* 3x3 grid divisions — thicker borders */
.cell.box-right { border-right:2px solid #a0a3b0; border-radius:3px 0 0 3px; }
.cell.box-bottom { border-bottom:2px solid #a0a3b0; border-radius:3px 3px 0 0; }
/* Alternating 3x3 block tint */
.cell.block-tint { background:#f4f5fa; }

.cell.filled {
  background:var(--pc);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.35), inset 0 -1px 2px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.06);
}

.cell.clearing { animation:cellPop .35s ease-out forwards; z-index:5; }
@keyframes cellPop {
  0% { transform:scale(1); opacity:1; }
  40% { transform:scale(1.1); }
  100% { transform:scale(0); opacity:0; }
}
.cell.just-placed { animation:cellPlace .15s ease-out; }
@keyframes cellPlace { 0%{transform:scale(.7);opacity:.5} 100%{transform:scale(1);opacity:1} }

/* === TRAY === */
.tray {
  width:min(calc(100vw - 16px),400px); display:flex;
  justify-content:space-around; align-items:center; padding:12px 4px; min-height:80px;
}
.tray-slot {
  display:grid; gap:2px; padding:6px; border-radius:10px; background:rgba(0,0,0,.03); cursor:grab;
}
.tray-slot.empty { opacity:0; pointer-events:none; }
.tray-cell { width:18px; height:18px; border-radius:3px; }
.tray-cell.on {
  background:var(--pc);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3), inset 0 -1px 1px rgba(0,0,0,.1);
}

/* === GAME OVER + LEADERBOARD === */
.gameover-wrap { display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; max-width:340px; }
.gameover-wrap h2 { font-size:28px; font-weight:800; }
.go-result-row {
  display:flex; align-items:center; gap:12px; width:100%; padding:14px 18px;
  background:#fff; border-radius:14px; border:2px solid #eee;
}
.go-result-row.winner { border-color:#e8c040; background:#fffdf0; }
.go-rank { font-size:22px; font-weight:800; width:36px; text-align:center; }
.go-name { flex:1; font-size:16px; font-weight:600; }
.go-score { font-size:20px; font-weight:800; }
.go-waiting { font-size:14px; color:#999; }

.modal {
  position:fixed; inset:0; z-index:200; display:none;
  justify-content:center; align-items:center; background:rgba(0,0,0,.3);
}
.modal.active { display:flex; }
.modal-content {
  width:90%; max-width:360px; max-height:80vh; overflow-y:auto;
  background:#fff; border-radius:20px; padding:24px;
  border:2px solid #eee; display:flex; flex-direction:column; gap:16px; align-items:center;
}
.modal-content h2 { font-size:24px; font-weight:800; }
.lb-row { display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; background:#f8f8fc; border-radius:10px; }
.lb-pos { font-size:14px; font-weight:800; width:28px; color:#999; }
.lb-pos.gold{color:#d4a017} .lb-pos.silver{color:#888} .lb-pos.bronze{color:#a06030}
.lb-nick { flex:1; font-size:14px; font-weight:600; }
.lb-score { font-size:16px; font-weight:800; }
#go-leaderboard { width:100%; display:flex; flex-direction:column; gap:6px; margin-top:8px; }
#go-leaderboard h3 { font-size:16px; font-weight:600; color:#999; text-align:center; margin-bottom:4px; }

@supports (padding-top:env(safe-area-inset-top)) { .game-hud{padding-top:env(safe-area-inset-top)} }