/* =====================
   CSS Variables / Theme
   ===================== */
:root {
  --bg: #0f0f13;
  --surface: #1a1a24;
  --surface-2: #22222f;
  --border: #2e2e3e;
  --primary: #6c63ff;
  --primary-dim: #4c45c0;
  --accent: #ff6b6b;
  --success: #4ecb71;
  --warning: #f0c040;
  --text: #f0f0f5;
  --text-secondary: #8888aa;
  --strike-color: #4ecb71;
  --ball-color: #f0c040;
  --radius: 12px;
  --radius-sm: 8px;
}

/* =====================
   Reset & Base
   ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* =====================
   Splash Screen
   ===================== */
#splash {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 9999;
  animation: splashExit 0.5s ease 2.2s both;
  pointer-events: none;
}
@keyframes splashExit {
  to { opacity: 0; visibility: hidden; }
}

.splash-logo {
  font-size: 6rem;
  line-height: 1;
  animation: splashLogoDrop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
  filter: drop-shadow(0 0 32px rgba(108, 99, 255, 0.6));
}
@keyframes splashLogoDrop {
  from { transform: scale(0.4) translateY(-40px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);     opacity: 1; }
}

.splash-title {
  position: relative;
}
.splash-text {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    #a78bfa     35%,
    #ffffff     50%,
    #a78bfa     65%,
    var(--primary) 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation:
    splashTextFade    0.5s ease             0.7s both,
    splashGlowSweep   0.85s ease-in-out     1.1s both;
}
@keyframes splashTextFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes splashGlowSweep {
  from { background-position: 100% 0; }
  to   { background-position: -20% 0; }
}

/* =====================
   Screens
   ===================== */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  overflow-y: auto;
  padding: 24px 20px 40px;
  flex-direction: column;
  align-items: center;
}
.screen.active {
  display: flex;
  animation: screenIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
#screen-game { padding-bottom: 72px; }

/* =====================
   Auth Screen
   ===================== */
#screen-auth {
  justify-content: center;
}
.app-version {
  position: fixed;
  bottom: 12px;
  right: 14px;
  font-size: 0.65rem;
  color: var(--text-secondary);
  opacity: 0.5;
  pointer-events: none;
}
.auth-subtitle {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 20px;
}
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #fff;
  color: #1a1a2e;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-google:active { transform: scale(0.96); }
.google-icon {
  font-size: 1.15rem;
  font-weight: 900;
  background: linear-gradient(135deg, #4285F4 25%, #34A853 50%, #FBBC05 75%, #EA4335 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =====================
   Landing Topbar + Profile Pill
   ===================== */
.landing-topbar {
  width: 100%;
  max-width: 400px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}
.profile-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px 5px 5px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  transition: background 0.15s;
}
.profile-pill:active { background: var(--surface-2); }
.profile-pill-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.profile-pill-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* =====================
   Profile Screen
   ===================== */
.profile-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 400px;
  margin-bottom: 8px;
}
.profile-topbar h2 { font-size: 1.2rem; font-weight: 700; }
.profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}
.profile-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  border: 3px solid var(--border);
}
#profile-name-display { font-size: 1.4rem; font-weight: 700; }
.profile-type-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(108,99,255,0.15);
  color: var(--primary);
}
.profile-type-badge.guest {
  background: rgba(136,136,170,0.15);
  color: var(--text-secondary);
}

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.stats-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.stat-card { text-align: center; }
.stat-num {
  font-size: 1.7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-top: 2px;
}
.profile-stats-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 400px;
}
.profile-stat-card { margin-bottom: 0 !important; }
.stats-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.breakdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.breakdown-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
}
.breakdown-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.breakdown-wl {
  font-size: 1.3rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.wl-w { color: var(--strike-color); }
.wl-sep { color: var(--text-secondary); font-weight: 400; font-size: 1rem; }
.wl-l { color: var(--accent); }
.breakdown-sub {
  font-size: 0.68rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* =====================
   Logo / Landing
   ===================== */
.logo {
  text-align: center;
  margin-bottom: 32px;
  margin-top: 20px;
}
.logo-icon {
  font-size: 4rem;
  margin-bottom: 8px;
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.logo h1 {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--primary), #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tagline {
  color: var(--text-secondary);
  margin-top: 6px;
  font-size: 0.95rem;
}

/* =====================
   Card
   ===================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 400px;
}
.card.center { text-align: center; }

/* =====================
   Screen Header
   ===================== */
.screen-header {
  text-align: center;
  margin-bottom: 24px;
  width: 100%;
  max-width: 400px;
}
.screen-header h2 { font-size: 1.6rem; font-weight: 700; }
.screen-header p { color: var(--text-secondary); margin-top: 4px; }

/* =====================
   Form
   ===================== */
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
input[type="text"] {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 1rem;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.2s;
}
input[type="text"]:focus { border-color: var(--primary); }

/* =====================
   Buttons
   ===================== */
.btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { opacity: 0.9; }
.btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.btn-secondary:hover { background: rgba(108,99,255,0.08); }

.divider {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 16px 0;
  position: relative;
}
.divider::before, .divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 42%;
  height: 1px;
  background: var(--border);
}
.divider::before { left: 0; }
.divider::after { right: 0; }

/* =====================
   Room Code Display
   ===================== */
.room-code {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--primary);
  margin: 16px 0;
  font-variant-numeric: tabular-nums;
}
.label-sm {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.hint { font-size: 0.88rem; color: var(--text-secondary); margin-top: 8px; }

/* =====================
   Mode Select
   ===================== */
.mode-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mode-btn {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 16px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color 0.2s, background 0.2s;
}
.mode-btn.active {
  border-color: var(--primary);
  background: rgba(108,99,255,0.12);
}
.mode-icon { font-size: 1.6rem; }
.mode-name { font-weight: 700; font-size: 0.95rem; }
.mode-desc { font-size: 0.75rem; color: var(--text-secondary); }

.timer-btns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.timer-btn {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 4px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.timer-btn.active {
  border-color: var(--primary);
  background: rgba(108,99,255,0.12);
  color: var(--primary);
}

/* =====================
   Digit Display
   ===================== */
.digit-display {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 20px;
}
.digit-box {
  width: 58px;
  height: 70px;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.digit-box.filled {
  border-color: var(--primary);
  color: var(--primary);
  animation: digitPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes digitPop {
  from { transform: scale(0.75); opacity: 0.5; }
  to   { transform: scale(1);    opacity: 1; }
}
.digit-box.active-cursor {
  border-color: var(--primary);
  animation: blink-border 1s step-end infinite;
}
@keyframes blink-border {
  50% { border-color: var(--border); }
}

/* =====================
   Numpad
   ===================== */
.numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 280px;
  margin: 0 auto;
}
.num-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 600;
  padding: 13px 8px;
  cursor: pointer;
  transition: background 0.1s, transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.num-btn:active { background: var(--surface); transform: scale(0.88); }
.btn-del { font-size: 1.2rem; color: var(--accent); }
.btn-confirm {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-size: 1.4rem;
}
.btn-confirm:active { background: var(--primary-dim); }
.btn-confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* =====================
   Game Screen
   ===================== */
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.player-info { display: flex; flex-direction: column; gap: 4px; flex: 1; opacity: 0.45; transition: opacity 0.3s ease; }
.player-info.active-turn { opacity: 1; animation: activeTurnGlow 0.4s ease both; }
@keyframes activeTurnGlow {
  0%   { opacity: 0.45; }
  50%  { opacity: 1; }
  100% { opacity: 1; }
}
.player-info.align-right { align-items: flex-end; }
.player-name { font-weight: 700; font-size: 0.95rem; }
.you-tag {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(108,99,255,0.18);
  color: var(--primary);
  padding: 1px 5px;
  border-radius: 4px;
  width: fit-content;
}
.player-timer {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
.player-timer.warning { color: var(--warning); }
.player-timer.danger { color: var(--accent); }

.turn-badge {
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 6px 10px;
  border-radius: 20px;
  text-align: center;
  flex-shrink: 0;
  margin: 0 8px;
  transition: background 0.3s, color 0.3s;
  animation: badgePulse 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes badgePulse {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.turn-badge.opponent {
  background: var(--surface-2);
  color: var(--text-secondary);
}

/* =====================
   Guess History
   ===================== */
.guess-history {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  flex: 1;
  overflow-y: auto;
  padding-bottom: 8px;
}
.history-empty {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding: 24px 0;
}
.guess-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 8px;
}
.guess-row.new-row {
  animation: rowSlideIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rowSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}
.guess-row .guess-number {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  font-variant-numeric: tabular-nums;
}
.guess-row .guess-result {
  display: flex;
  gap: 12px;
  align-items: center;
}
.result-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.result-num {
  font-size: 1.3rem;
  font-weight: 800;
}
.result-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.strike-num { color: var(--strike-color); }
.ball-num { color: var(--ball-color); }
.strike-label { color: var(--strike-color); }
.ball-label { color: var(--ball-color); }

/* =====================
   Guess Input Area
   ===================== */
.guess-input-area {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
/* Collapse numpad when notes is open */
.guess-input-area.notes-open .numpad { display: none; }
.guess-input-area.notes-open .digit-display { margin-bottom: 6px; cursor: pointer; }
.guess-input-area.notes-open .digit-display::after {
  content: 'Tap to type';
  display: block;
  font-size: 0.72rem;
  color: var(--primary);
  text-align: center;
  margin-top: 6px;
  opacity: 0.8;
}

/* =====================
   Waiting Turn
   ===================== */
.waiting-turn {
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 24px 0;
  color: var(--text-secondary);
}
.waiting-turn p { font-size: 0.95rem; }

/* Activity states */
#waiting-turn[data-activity="typing"] p {
  color: var(--primary);
  animation: pulse-text 1.2s ease-in-out infinite;
}
#waiting-turn[data-activity="typing"] .spinner {
  border-color: rgba(108,99,255,0.2);
  border-top-color: var(--primary);
}
#waiting-turn[data-activity="thinking"] p {
  color: var(--warning);
  animation: pulse-text 2s ease-in-out infinite;
}
#waiting-turn[data-activity="thinking"] .spinner {
  border-color: rgba(240,192,64,0.2);
  border-top-color: var(--warning);
}
@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* =====================
   Spinner
   ===================== */
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================
   Hold Overlay
   ===================== */
#hold-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 19, 0.93);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hold-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 32px 24px;
}
.hold-icon { font-size: 3rem; }
.hold-content h3 { font-size: 1.5rem; font-weight: 700; }
.hold-countdown {
  font-size: 3.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--warning);
  line-height: 1;
}

/* =====================
   Rejoin Banner
   ===================== */
.rejoin-banner {
  width: 100%;
  max-width: 400px;
  background: rgba(108, 99, 255, 0.12);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.rejoin-info strong { font-size: 0.9rem; }
.rejoin-info p { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; }
.rejoin-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* =====================
   End Screen
   ===================== */
.end-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  width: 100%;
  max-width: 400px;
  margin-top: 24px;
}
.end-icon {
  font-size: 4rem;
  animation: trophyBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
@keyframes trophyBounce {
  from { transform: scale(0) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1) rotate(0);     opacity: 1; }
}
.end-content h2 {
  font-size: 2rem;
  font-weight: 800;
  animation: screenIn 0.3s ease 0.2s both;
}
.end-content p { color: var(--text-secondary); }

.reveal-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  margin: 8px 0;
}
.reveal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.reveal-number {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--primary);
  margin-top: 6px;
}

.history-summary {
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
}

/* =====================
   Toast / Error
   ===================== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--accent);
  color: #fff;
  padding: 12px 24px;
  border-radius: 24px;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 999;
  transition: transform 0.3s ease;
  white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* =====================
   Opponent Ready Banner
   ===================== */
.opp-ready-banner {
  background: rgba(78,203,113,0.15);
  border: 1px solid var(--strike-color);
  border-radius: var(--radius-sm);
  color: var(--strike-color);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 10px 16px;
  text-align: center;
  width: 100%;
  max-width: 400px;
  margin-bottom: 8px;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* =====================
   Chat Notification
   ===================== */
.chat-notif {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-80px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  max-width: 300px;
  width: calc(100% - 40px);
  z-index: 600;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.chat-notif.show { transform: translateX(-50%) translateY(0); }
.chat-notif-name {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.chat-notif-text {
  display: block;
  font-size: 0.9rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =====================
   Scrollbar
   ===================== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* =====================
   Logo Icon
   ===================== */
.logo-icon {
  font-size: 6rem;
  margin-bottom: 4px;
  animation: float 3s ease-in-out infinite;
  display: block;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,0.55));
  line-height: 1.1;
}

/* =====================
   How to Play Button
   ===================== */
.btn-how-to-play {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  padding: 4px 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================
   Tutorial Modal
   ===================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: overlayFadeIn 0.2s ease both;
}
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-overlay:has(.modal-sm) {
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sheetSlideUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sheetSlideUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.modal-sm {
  animation: modalPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}
@keyframes modalPop {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header h2 { font-size: 1.3rem; font-weight: 700; }
.btn-icon {
  background: var(--surface-2);
  border: none;
  color: var(--text-secondary);
  font-size: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-body {
  overflow-y: auto;
  padding: 16px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tutorial-section h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.tutorial-section p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.tutorial-example {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  margin: 6px 4px 0 0;
}
.tutorial-example.valid { background: rgba(78,203,113,0.15); color: var(--success); }
.tutorial-example.invalid { background: rgba(255,107,107,0.15); color: var(--accent); }

.tutorial-feedback { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.tfb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.tfb-tag {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.tfb-tag.strike { background: rgba(78,203,113,0.2); color: var(--strike-color); }
.tfb-tag.ball { background: rgba(240,192,64,0.2); color: var(--ball-color); }

/* =====================
   Tutorial Step Label
   ===================== */
.tut-step-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 6px;
}

/* Digit preview */
.tut-digit-preview {
  display: flex;
  gap: 8px;
  margin: 12px 0 8px;
}
.tut-digit {
  width: 48px;
  height: 56px;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tut-digit.filled {
  border-color: var(--primary);
  color: var(--primary);
}

/* Valid/invalid chips */
.tut-valid-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tut-chip {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 20px;
}
.tut-chip.valid { background: rgba(78,203,113,0.15); color: var(--success); }
.tut-chip.invalid { background: rgba(255,107,107,0.15); color: var(--accent); }

/* Game mock */
.tut-game-mock {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.tut-guess-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.tut-guess-block.win-block {
  border-color: var(--strike-color);
  background: rgba(78,203,113,0.08);
}
.tut-guess-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.tut-guess-digits {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.tut-gd {
  width: 40px;
  height: 46px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 1.2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tut-gd.strike-bg {
  background: rgba(78,203,113,0.18);
  border-color: var(--strike-color);
  color: var(--strike-color);
}
.tut-gd.ball-bg {
  background: rgba(240,192,64,0.18);
  border-color: var(--ball-color);
  color: var(--ball-color);
}
.tut-result-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.tut-result-badge {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}
.tut-result-badge.strike { background: rgba(78,203,113,0.2); color: var(--strike-color); }
.tut-result-badge.ball { background: rgba(240,192,64,0.2); color: var(--ball-color); }
.tut-explanation {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.exp-item {
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.tut-gd-sm {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
}
.tut-gd-sm.strike-bg {
  background: rgba(78,203,113,0.18);
  border-color: var(--strike-color);
  color: var(--strike-color);
}
.tut-gd-sm.ball-bg {
  background: rgba(240,192,64,0.18);
  border-color: var(--ball-color);
  color: var(--ball-color);
}

/* =====================
   Digit Count Selector
   ===================== */
.dcount-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.dcount-btn {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 4px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: border-color 0.2s, background 0.2s;
}
.dcount-btn span {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.dcount-btn.active {
  border-color: var(--primary);
  background: rgba(108,99,255,0.12);
  color: var(--primary);
}
.dcount-btn.active span { color: var(--primary); opacity: 0.8; }

/* =====================
   Bluff Toggle
   ===================== */
.bluff-toggle-btn {
  width: 100%;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.bluff-toggle-btn.active {
  border-color: var(--warning);
  background: rgba(240,192,64,0.1);
  color: var(--warning);
}

/* =====================
   Digit display sizing
   ===================== */
.digit-display.d5 .digit-box { width: 50px; height: 62px; font-size: 1.7rem; }
.digit-display.d6 .digit-box { width: 42px; height: 56px; font-size: 1.5rem; }

/* =====================
   Bluff Panel
   ===================== */
.bluff-panel-inner {
  background: var(--surface);
  border: 1.5px solid var(--warning);
  border-radius: var(--radius);
  padding: 16px;
  margin: 8px 0;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}
.bluff-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--warning);
  margin-bottom: 10px;
}
.bluff-result-preview {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 10px 0 14px;
}
.bluff-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.btn-bluff {
  background: var(--warning);
  color: #111;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-bluff:active { opacity: 0.8; }
.btn-bluff:disabled { cursor: not-allowed; }

/* =====================
   Notes / Digit Tracker
   ===================== */
.notes-section {
  width: 100%;
  max-width: 420px;
  margin: 8px auto 0;
  border-top: 1px solid var(--border);
}
.notes-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 4px;
  cursor: pointer;
  width: 100%;
}
.notes-toggle-icon { font-size: 0.75rem; transition: transform 0.2s; }
.notes-toggle-icon.open { transform: rotate(180deg); }
.notes-panel {
  padding-bottom: 10px;
}
.notes-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

/* Position Board */
.notes-positions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.notes-pos-slot {
  width: 52px;
  height: 60px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0;
}
.notes-pos-slot.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(108,99,255,0.25);
}
.notes-pos-slot.filled {
  border-color: var(--strike-color);
  background: rgba(78,203,113,0.15);
  color: var(--strike-color);
}
.notes-pos-slot.filled.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(108,99,255,0.25);
}
.notes-pos-clear {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  margin-left: 2px;
  white-space: nowrap;
}
.notes-pos-clear:active { color: var(--accent); }

/* Digit Grid */
.notes-digits {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.note-digit {
  width: 44px;
  height: 52px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.15s;
}
.note-digit.pos-used {
  border-color: var(--strike-color);
  background: rgba(78,203,113,0.12);
  color: var(--strike-color);
}
.note-digit.ball {
  background: rgba(240,192,64,0.18);
  border-color: var(--ball-color);
  color: var(--ball-color);
}
.note-digit.out {
  background: rgba(255,107,107,0.10);
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: line-through;
  opacity: 0.65;
}
.note-digit-label {
  font-size: 0.52rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* Legend */
.notes-legend {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.legend-dot.pos-sure-bg { background: var(--strike-color); }
.legend-dot.ball-bg { background: var(--ball-color); }
.legend-dot.out-bg { background: var(--accent); opacity: 0.7; }

/* =====================
   Bottom Action Bar
   ===================== */
.game-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  border-top: 1px solid var(--border);
  background: var(--surface);
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom);
}
.action-bar-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 12px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: color 0.15s, background 0.15s;
  border-right: 1px solid var(--border);
}
.action-bar-btn:last-child { border-right: none; }
.action-bar-btn:active { background: var(--surface-2); }
.action-bar-btn.danger { color: var(--accent); opacity: 0.7; }
.action-bar-btn.danger:active { opacity: 1; }
.action-bar-icon { font-size: 1.3rem; line-height: 1; }
.chat-badge {
  position: absolute;
  top: 8px;
  left: 50%;
  margin-left: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--surface);
}

/* =====================
   Lobby
   ===================== */
.btn-lobby {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  border: none;
  position: relative;
  overflow: hidden;
}
.btn-lobby:active { transform: scale(0.97); }
.lobby-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  width: 100%;
  max-width: 400px;
}
.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
  animation: pulse-dot 1.8s infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.lobby-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 400px;
  overflow-y: auto;
}
.lobby-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 40px 20px;
  line-height: 1.7;
}
.lobby-card {
  background: var(--surface);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: screenIn 0.2s both;
  min-width: 0;
}
.lobby-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.lobby-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lobby-name {
  flex: 1;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.lobby-you-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--primary);
  color: #fff;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.lobby-challenge-btn {
  padding: 8px 14px;
  font-size: 0.8rem;
  min-width: 0;
  width: auto;
  flex-shrink: 0;
}
/* Challenge modal */
.challenge-modal-content {
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.challenge-avatar-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.challenge-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px rgba(124,58,237,0.2), 0 0 24px rgba(124,58,237,0.4);
  animation: challenge-glow 1.8s ease-in-out infinite;
}
@keyframes challenge-glow {
  0%, 100% { box-shadow: 0 0 0 6px rgba(124,58,237,0.2), 0 0 20px rgba(124,58,237,0.35); }
  50%       { box-shadow: 0 0 0 10px rgba(124,58,237,0.1), 0 0 36px rgba(124,58,237,0.55); }
}
.challenge-title {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 6px;
}
.challenge-sub {
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 20px;
}
.challenge-timer-num {
  font-weight: 700;
  color: var(--primary);
}
.modal-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.modal-actions .btn { flex: 1; }

/* =====================
   Modal small variant
   ===================== */
.modal-sm {
  border-radius: var(--radius);
  margin: 24px;
  max-width: 360px;
  width: calc(100% - 48px);
  animation: modalPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* =====================
   Chat Panel
   ===================== */
.chat-panel {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: sheetSlideUp 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-header h3 { font-size: 1.1rem; font-weight: 700; }
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-empty {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: auto;
}
.chat-bubble {
  max-width: 75%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chat-bubble.mine { align-self: flex-end; align-items: flex-end; animation: bubbleRight 0.22s cubic-bezier(0.22, 1, 0.36, 1) both; }
.chat-bubble.theirs { align-self: flex-start; align-items: flex-start; animation: bubbleLeft 0.22s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes bubbleRight { from { opacity: 0; transform: translateX(16px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes bubbleLeft  { from { opacity: 0; transform: translateX(-16px) scale(0.92); } to { opacity: 1; transform: none; } }
.bubble-name {
  font-size: 0.72rem;
  color: var(--text-secondary);
  padding: 0 4px;
}
.bubble-text {
  background: var(--surface-2);
  border-radius: 16px;
  padding: 10px 14px;
  font-size: 0.95rem;
  line-height: 1.4;
  word-break: break-word;
}
.chat-bubble.mine .bubble-text {
  background: var(--primary);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.chat-bubble.theirs .bubble-text {
  border-radius: 16px 16px 16px 4px;
}
.chat-input-row {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.chat-input-row input[type="text"] {
  flex: 1;
}
.btn-send {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.btn-send:active { opacity: 0.8; }