/* SlangIt! — Neon Street aesthetic */
:root {
  --bg: #1A1A2E;
  --bg-deep: #0F0F1E;
  --bg-mid: #16213E;
  --board: #211f38;
  --board-edge: #0A0A1A;
  --grid: #252540;
  --ink: #e9eaf5;
  --ink-dim: #9AA3BD;
  --ink-faint: #5B6686;
  --panel: rgba(20, 20, 50, 0.45);
  --panel-2: rgba(30, 30, 65, 0.5);
  --tile: #FEF3C7;
  --tile-ink: #1C1917;
  --dl: #00F5FF;
  --tl: #FF2E63;
  --gold: #F59E0B;
  --gold-2: #FACC15;
  --green: #22C55E;
  --red: #EF4444;
  --accent-cyan: #00F5FF;
  --glass-border: rgba(255,255,255,0.08);
  --glass-bg: rgba(255,255,255,0.04);
  --neon-cyan-glow: rgba(0,245,255,0.45);
  --neon-pink-glow: rgba(255,46,99,0.45);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-xl: 0 30px 80px rgba(0,0,0,0.55);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-tile: 0 3px 0 rgba(0,0,0,0.35), 0 8px 18px rgba(0,0,0,0.35);
  --font-ui: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: 'Fredoka', 'Righteous', 'Inter', sans-serif;
  --font-tile: 'DM Sans', 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); overflow: hidden; height: 100%; overscroll-behavior: none; }
body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0,245,255,0.10), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(255,46,99,0.10), transparent 55%),
    linear-gradient(160deg, #1A1A2E 0%, #16213E 100%);
}

.hidden { display: none !important; }

/* ---------- Start screen ---------- */
#start-screen.screen { align-items: center; justify-content: safe center; padding: 24px; flex-direction: column; }
.start-inner { max-width: 560px; text-align: center; width: 100%; flex-shrink: 0; }
.logo { text-align: center; margin: 0 0 6px; }
.logo-svg { max-width: 480px; width: 100%; height: auto; }
/* mobile compact overrides — moved to end of file via #start-screen scoping */
.logo-slang { color: #F5F5F0; }
.logo-it { color: var(--gold); position: relative; }
.logo-it::after { content: ""; position: absolute; right: -6px; bottom: 10%; width: 10px; height: 10px; background: var(--accent-cyan); border-radius: 2px; transform: rotate(12deg); box-shadow: 0 0 16px var(--accent-cyan); }
@media (max-width: 600px) { .logo-it::after { display: none; } }
.tag { color: var(--ink-dim); font-size: 18px; margin: 6px 0 28px; }
.rules { display: grid; gap: 10px; margin: 0 0 28px; background: rgba(0,245,255,0.03); border: 1px solid rgba(0,245,255,0.08); padding: 18px 22px; border-radius: 16px; text-align: left; }
.rule { color: var(--ink-dim); font-size: 15px; }
.rule b { color: var(--ink); font-weight: 600; }
.note { margin-top: 16px; color: var(--ink-faint); font-size: 13px; }
.copyright { margin-top: 24px; color: var(--ink-faint); font-size: 11px; opacity: 0.6; letter-spacing: 0.05em; }

/* ---------- Persona picker ---------- */
.pick-label { color: var(--ink-dim); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; }
.persona-picker { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.persona-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px 16px; cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
  text-align: left; font-family: var(--font-ui); color: var(--ink);
}
.persona-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); transform: translateY(-1px); }
.persona-card.selected { border-color: var(--gold); background: rgba(245,158,11,0.08); box-shadow: 0 0 20px rgba(245,158,11,0.12); }
.persona-avatar {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 20px; color: #fff;
  font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.persona-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.persona-name { font-weight: 700; font-size: 15px; white-space: nowrap; }
.persona-diff { font-size: 12px; color: var(--ink-dim); font-weight: 500; letter-spacing: 0.03em; }
.persona-desc { display: none; }
/* Show description on wider screens */
@media (min-width: 460px) {
  .persona-desc { display: block; margin-left: auto; font-size: 12px; color: var(--ink-faint); max-width: 200px; text-align: right; line-height: 1.35; }
}

/* ---------- Menu row (How To Play + Blacklist) ---------- */
.menu-row { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.menu-row .btn-ghost { flex: 1; max-width: 200px; }

/* ---------- How To Play modal ---------- */
#htp-modal { background: rgba(10,10,25,0.85); backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; }
.modal-inner.htp-modal-inner { max-width: 540px; width: 100%; text-align: left; padding: 28px 32px 24px; max-height: 85vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #1E1E3A 0%, #141428 100%); border: 1px solid rgba(0,245,255,0.1); }
.modal-inner.htp-modal-inner h2 { text-align: center; margin-bottom: 6px; }
.htp-scroll { overflow-y: auto; flex: 1; padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--panel-2) transparent; }
.htp-section { margin-bottom: 20px; }
.htp-section:last-child { margin-bottom: 8px; }
.htp-heading { font-family: var(--font-display); font-size: 17px; color: var(--gold); margin: 0 0 8px; letter-spacing: 0.03em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.htp-tag { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #1a1d35; background: linear-gradient(135deg, #F59E0B, #D97706); padding: 2px 8px; border-radius: 4px; }
.htp-section p { font-size: 14px; color: var(--ink-dim); line-height: 1.6; margin: 0 0 8px; }
.htp-list { list-style: none; padding: 0; margin: 0 0 8px; }
.htp-list li { font-size: 14px; color: var(--ink-dim); line-height: 1.55; padding: 4px 0 4px 18px; position: relative; }
.htp-list li::before { content: "\2022"; position: absolute; left: 2px; color: var(--ink-faint); font-size: 14px; }
.htp-list li b { color: var(--ink); font-weight: 600; }
.htp-highlight { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 14px 16px; margin: 10px 0; }
.htp-highlight-title { font-size: 13px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.htp-highlight .htp-note { font-size: 12px; color: var(--ink-faint); margin: 8px 0 0; font-style: italic; }
.htp-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 4px; margin-right: 6px; letter-spacing: 0.04em; vertical-align: middle; }
.htp-dl { background: var(--dl); color: #fff; }
.htp-tl { background: var(--tl); color: #fff; }
.htp-mult-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.htp-mult-item { text-align: center; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); border-radius: 10px; padding: 12px 8px; }
.htp-mult-val { display: block; font-family: var(--font-display); font-size: 28px; color: var(--gold-2); text-shadow: 0 0 14px rgba(250,204,21,0.3); line-height: 1; }
.htp-mult-label { display: block; font-size: 12px; color: var(--ink-dim); margin-top: 4px; }
.htp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.htp-table th { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.08); }
.htp-table td { padding: 7px 10px; color: var(--ink-dim); border-bottom: 1px solid rgba(255,255,255,0.04); }
.htp-table td:first-child { color: var(--ink); font-weight: 600; }
.htp-table td:last-child { color: var(--gold-2); font-weight: 600; }
.htp-table tbody tr:last-child td { border-bottom: none; }
.htp-coming-soon { background: rgba(34,211,238,0.06); border: 1px solid rgba(34,211,238,0.18); border-radius: 12px; padding: 16px 18px; }
.htp-coming-soon .htp-heading { color: var(--accent-cyan); }
.htp-cs-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #0a0c19; background: linear-gradient(135deg, #22D3EE, #06B6D4); padding: 3px 10px; border-radius: 4px; margin-bottom: 8px; }
.htp-close { margin-top: 14px; width: 100%; }
@media (max-width: 500px) {
  .htp-modal-inner { padding: 20px 16px 16px; max-height: 90vh; }
  .htp-mult-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .htp-mult-val { font-size: 22px; }
  .htp-mult-item { padding: 8px 4px; }
}

/* ---------- Personal Blacklist modal ---------- */
.pbl-modal-inner { max-width: 420px; width: 100%; }
.pbl-note { color: var(--ink-dim); font-size: 13px; margin: 0 0 16px; line-height: 1.45; }
.pbl-add-row { display: flex; gap: 8px; margin-bottom: 16px; }
.pbl-input {
  flex: 1; background: var(--bg-deep); border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 9px 12px; color: var(--ink); font-family: var(--font-ui);
  font-size: 14px; outline: none; transition: border-color .15s;
}
.pbl-input:focus { border-color: var(--gold); }
.pbl-input::placeholder { color: var(--ink-faint); }
.pbl-empty { color: var(--ink-faint); font-size: 13px; text-align: center; padding: 18px 0; }
.pbl-list {
  list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--panel-2) transparent;
}
.pbl-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
  background: rgba(255,255,255,0.03); margin-bottom: 4px;
}
.pbl-list li:hover { background: rgba(255,255,255,0.06); }
.pbl-remove {
  background: none; border: none; color: var(--red); cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: var(--font-ui); padding: 2px 8px;
  border-radius: 6px; transition: background .12s;
}
.pbl-remove:hover { background: rgba(239,68,68,0.15); }
.pbl-close { margin-top: 14px; width: 100%; }
.btn-sm { padding: 8px 16px; font-size: 13px; border-radius: 8px; }

/* ---------- Buttons ---------- */
.btn-primary, .btn-ghost {
  font-family: var(--font-ui); font-weight: 600; cursor: pointer; border: 1px solid transparent;
  padding: 12px 22px; border-radius: 10px; font-size: 15px; transition: transform .08s ease, background .15s ease, opacity .15s ease, box-shadow .15s ease;
  letter-spacing: 0.01em;
}
.btn-primary { background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%); color: #1C1407; box-shadow: 0 6px 0 #92540a, 0 10px 24px rgba(245,158,11,0.35); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
.btn-primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 3px 0 #92540a, 0 6px 14px rgba(245,158,11,0.25); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn-ghost { background: rgba(255,255,255,0.05); color: var(--ink); border-color: rgba(255,255,255,0.1); }
.btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.1); }
.btn-ghost:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- App layout ---------- */
.app { position: relative; height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 10px 14px 6px; max-width: 1480px; margin: 0 auto; overflow: hidden; touch-action: pan-x pan-y; overscroll-behavior: none; }

.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 6px 4px; flex-shrink: 0; touch-action: manipulation; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brandmark { width: 120px; height: auto; }
.brandname { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.03em; }

.scoreboard { display: flex; align-items: center; gap: 14px; background: rgba(20, 20, 50, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0,245,255,0.1); padding: 8px 14px; border-radius: 999px; }
.score { display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #0b1220; font-weight: 800; font-size: 16px; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2); }
.meta .name { font-size: 12px; color: var(--ink-dim); line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; }
.meta .pts { font-size: 22px; font-weight: 800; line-height: 1.1; }
.meta.right { text-align: right; }
.turnpill { font-size: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(34,211,238,0.15); color: var(--accent-cyan); border: 1px solid rgba(34,211,238,0.35); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; transition: all .2s; }
.turnpill.ai { background: rgba(249,115,22,0.15); color: var(--tl); border-color: rgba(249,115,22,0.35); }
.score.active { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 12px; }
.tb-right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.bag-count { font-size: 13px; color: var(--ink-dim); background: rgba(255,255,255,0.04); padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.06); }

.final-banner { text-align: center; padding: 10px; font-family: var(--font-display); font-size: 22px; letter-spacing: 0.25em; color: #1A1A2E; background: linear-gradient(90deg, #F59E0B, #FACC15, #F59E0B); border-radius: 10px; animation: pulse 1.6s ease-in-out infinite; flex-shrink: 0; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }

/* Stage */
.stage { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; min-height: 0; flex: 1 1 0%; overflow: hidden; }
@media (max-width: 1100px) {
  .stage { grid-template-columns: 1fr; }
  .sidebar { display: none; }
}
@media (max-width: 760px) {
  .app { padding: 4px 4px 2px; gap: 4px; }
  .topbar { grid-template-columns: auto 1fr auto; gap: 6px; padding: 2px 2px; }
  .brand .brandname { font-size: 14px; }
  .brandmark { width: 20px; height: 20px; }
  .scoreboard { padding: 3px 8px; gap: 6px; }
  .avatar { width: 24px; height: 24px; font-size: 12px; }
  .meta .pts { font-size: 15px; }
  .meta .name { font-size: 9px; }
  .turnpill { font-size: 9px; padding: 2px 5px; }
  .tb-right { justify-content: center; }
  .bag-count { font-size: 11px; padding: 3px 8px; }
  .bottombar { gap: 4px; padding: 2px 0 2px; }
  .rack-rail { padding: 6px 6px; border-radius: 10px; }
  .rack { gap: 2px; }
  .tile-dom { width: clamp(34px, 10vw, 50px); height: clamp(40px, 11.5vw, 56px); font-size: clamp(17px, 5vw, 26px); border-radius: 6px; padding-bottom: 4px; }
  .tile-dom .pv { font-size: 7px; right: 2px; bottom: 1px; }
  .actions { flex-wrap: wrap; justify-content: center; gap: 4px; }
  .btn-primary, .btn-ghost { padding: 7px 10px; font-size: 12px; border-radius: 8px; }
  .final-banner { font-size: 16px; padding: 6px; }
}

.board-wrap { position: relative; display: flex; align-items: flex-start; justify-content: center; min-height: 0; overflow: hidden; touch-action: none; }
#board { border-radius: 14px; box-shadow: var(--shadow-xl); background: transparent; cursor: pointer; touch-action: none; }

.live-badge { position: absolute; pointer-events: none; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.03em; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); transition: transform .15s ease, opacity .15s ease; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,0.5); text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.live-badge.ok { background: rgba(10,60,30,0.82); color: #86efac; border-color: rgba(34,197,94,0.6); }
/* .live-badge.slang styles moved to slang card section below */
.live-badge.bad { background: rgba(80,20,20,0.82); color: #FCA5A5; border-color: rgba(239,68,68,0.6); }
.live-badge.pending { background: rgba(20,20,40,0.78); color: var(--ink-dim); border-color: rgba(255,255,255,0.18); }

/* Sidebar */
.stage > .sidebar { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
@media (max-width: 1100px) { .stage > .sidebar { display: none; } }
.panel { background: rgba(20, 20, 50, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 14px; }
.panel-head { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 8px; }
.proj { font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.proj.slang { color: var(--gold-2); text-shadow: 0 0 14px rgba(250,204,21,0.4); }
.proj.bad { color: var(--red); }
.proj-detail { margin-top: 6px; font-size: 13px; color: var(--ink-dim); line-height: 1.4; }
.log { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.log ol { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.log li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255,255,255,0.02); border-radius: 8px; font-size: 13px; border-left: 3px solid transparent; }
.log li.you { border-left-color: var(--accent-cyan); }
.log li.ai { border-left-color: var(--tl); }
.log li.slang { border-left-color: var(--gold); background: rgba(245,158,11,0.08); }
.log .w { font-weight: 700; letter-spacing: 0.05em; }
.log .p { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-dim); }
.log .p.slang { color: var(--gold-2); }
.log .mx { font-size: 11px; color: var(--gold-2); font-weight: 800; margin-left: 4px; }
.log .pass { color: var(--ink-faint); font-style: italic; }

/* Chat panel */
.chat-panel {
  display: flex; flex-direction: column;
  max-height: 260px; min-height: 140px;
  padding: 12px;
}
.chat-head {
  display: flex; align-items: center; gap: 8px;
}
.chat-badge {
  font-size: 10px; font-weight: 800; line-height: 1;
  min-width: 18px; text-align: center;
  padding: 2px 6px; border-radius: 999px;
  background: var(--tl); color: #fff;
  animation: chatPulse 1.5s ease-in-out infinite;
}
@keyframes chatPulse { 0%,100% { opacity: 1; } 50% { opacity: .65; } }
.chat-messages {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 4px;
  margin: 6px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.chat-msg {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  font-size: 12.5px; line-height: 1.35;
  animation: chatSlideIn .2s ease-out;
}
@keyframes chatSlideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.chat-msg.me { border-left: 2px solid var(--accent-cyan); }
.chat-msg.them { border-left: 2px solid var(--tl); }
.chat-msg-author {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.chat-msg.me .chat-msg-author { color: var(--accent-cyan); }
.chat-msg.them .chat-msg-author { color: var(--tl); }
.chat-msg-text { color: var(--ink); word-break: break-word; }
.chat-msg-time {
  font-size: 9px; color: var(--ink-faint); opacity: 0.6;
  align-self: flex-end; margin-top: 1px;
}
.chat-form {
  display: flex; gap: 6px; align-items: center;
}
.chat-input {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--ink);
  font-family: var(--font-ui);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.chat-input::placeholder { color: var(--ink-faint); opacity: .6; }
.chat-input:focus {
  border-color: rgba(0,245,255,0.4);
  box-shadow: 0 0 8px rgba(0,245,255,0.15);
}
.chat-send {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: rgba(0,245,255,0.12);
  border: 1px solid rgba(0,245,255,0.25);
  border-radius: 8px;
  color: var(--accent-cyan);
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.chat-send:hover {
  background: rgba(0,245,255,0.22);
  box-shadow: 0 0 10px rgba(0,245,255,0.25);
}
.chat-send:active { transform: scale(0.95); }
.chat-empty {
  display: flex; align-items: center; justify-content: center;
  flex: 1; font-size: 12px; color: var(--ink-faint); opacity: .5;
  font-style: italic;
}

/* Bottom bar / rack */
.bottombar { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 4px 0 6px; width: 100%; flex-shrink: 0; touch-action: manipulation; }
@media (min-width: 900px) {
  .bottombar { flex-direction: row; gap: 16px; }
  .rack-wrap { flex: 1; }
}
.rack-wrap { min-width: 0; overflow: visible; width: 100%; }
.rack-rail { background: linear-gradient(180deg, #241A0E 0%, #150E06 100%); border: 1px solid #3A2810; border-radius: 14px; padding: 10px 12px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 6px 18px rgba(0,0,0,0.4); }
.rack { display: flex; gap: clamp(3px, 0.6vw, 6px); justify-content: center; flex-wrap: nowrap; }
.tile-dom {
  /* Flexible tile size: 8-tile rack allows bigger tiles */
  width: clamp(42px, 7vw, 64px);
  height: clamp(50px, 8vw, 72px);
  min-width: 0;
  flex-shrink: 1;
  border-radius: 8px;
  background: linear-gradient(180deg, #FEFCF3 0%, #EDE4C8 100%);
  color: #1A1612;
  font-family: var(--font-tile);
  font-weight: 900;
  font-size: clamp(20px, 3.5vw, 34px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Nudge letter up to make room for point value in bottom-right */
  padding-bottom: 6px;
  padding-top: 0;
  position: relative;
  user-select: none;
  cursor: grab;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
  box-shadow: 0 2px 0 rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.3);
  border: 1.5px solid rgba(0,0,0,0.12);
  border-bottom: 2.5px solid rgba(0,0,0,0.2);
  transition: transform .08s ease, box-shadow .08s ease, opacity .08s ease;
  aspect-ratio: auto;
  line-height: 1;
  will-change: transform;
}
.tile-dom.touch-active { transform: scale(1.04); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.tile-dom.dragging { cursor: grabbing; transform: scale(1.12) rotate(-3deg); z-index: 40; box-shadow: 0 14px 36px rgba(0,0,0,0.6); transition: none; }
.tile-dom.selected { outline: 3px solid var(--accent-cyan); outline-offset: 2px; transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.4), 0 0 20px rgba(34,211,238,0.4); }
.tile-dom.exchange { outline: 3px solid var(--tl); outline-offset: 2px; filter: saturate(0.6); }
.tile-dom.placed { opacity: 0.25; cursor: default; }
.tile-dom.blank { background: repeating-linear-gradient(45deg, #FFFBE8 0 3px, #EEE2BC 3px 6px); color: var(--ink-faint); }
.tile-dom .pv { position: absolute; right: 3px; bottom: 2px; font-family: var(--font-ui); font-size: clamp(8px, 1.1vw, 11px); font-weight: 700; color: #5a463d; line-height: 1; }
.tile-dom .drag-ghost { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 100; }
.tile-dom.exchange { outline: 3px solid var(--accent-orange, #F59E0B); outline-offset: 2px; filter: none; transform: translateY(-3px); box-shadow: 0 6px 16px rgba(245,158,11,0.3); }
.rack-rail.exchange-active { outline: 2px dashed rgba(245,158,11,0.5); outline-offset: 3px; }

.actions { display: flex; gap: 8px; align-items: center; }

/* Toast / celebrations */
.toast { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); background: rgba(15,15,30,0.95); color: var(--ink); padding: 12px 20px; border-radius: 10px; font-weight: 600; border: 1px solid rgba(0,245,255,0.15); z-index: 120; box-shadow: 0 10px 30px rgba(0,0,0,0.5); animation: toastIn .25s ease; }
.toast.bad { border-color: rgba(239,68,68,0.5); color: #FCA5A5; }
.toast.good { border-color: rgba(34,197,94,0.4); color: #BBF7D0; }
.toast.slang { border-color: rgba(245,158,11,0.6); color: #FDE68A; background: linear-gradient(180deg, rgba(245,158,11,0.18), rgba(20,20,40,0.95)); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.celebration { position: fixed; inset: 0; z-index: 130; pointer-events: none; display: grid; place-items: center; }
.celebration .ring { font-family: var(--font-display); font-size: clamp(60px, 12vw, 160px); color: var(--gold-2); text-shadow: 0 0 40px rgba(250,204,21,0.7), 0 0 80px rgba(245,158,11,0.5); letter-spacing: 0.1em; animation: bigIn .6s cubic-bezier(.2,1.5,.4,1) both; }
.celebration .sub { font-family: var(--font-ui); font-weight: 800; font-size: 22px; color: var(--ink); letter-spacing: 0.2em; text-transform: uppercase; margin-top: 8px; text-align: center; opacity: 0.9; animation: bigIn .7s cubic-bezier(.2,1.5,.4,1) both; animation-delay: .08s; }
@keyframes bigIn { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* Slang Definition Card */
.slang-card {
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 140;
  pointer-events: none;
}
.slang-card.entering .slang-card-inner {
  animation: cardSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.slang-card.exiting .slang-card-inner {
  animation: cardSlideOut 0.4s ease-in both;
}
.slang-card-inner {
  background: linear-gradient(135deg, #1e2340 0%, #1a1d35 50%, #1c1f38 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  border-radius: 16px;
  padding: 20px 28px;
  min-width: 280px;
  max-width: 400px;
  box-shadow:
    0 0 30px rgba(245, 158, 11, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: center;
}
.slang-card-badge {
  display: inline-block;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #1a1d35;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.slang-card-word {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 42px);
  color: var(--gold-2);
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-shadow: 0 0 20px rgba(250, 204, 21, 0.4);
}
.slang-card-divider {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.6), transparent);
  margin: 12px auto;
}
.slang-card-def {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  max-width: 340px;
  margin: 0 auto 14px;
  font-style: italic;
}
.slang-card-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  align-items: center;
}
.slang-card-mult {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
  color: #F59E0B;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.slang-card-pts {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.04em;
}
@keyframes cardSlideUp {
  0% { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes cardSlideOut {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(20px); opacity: 0; }
}

/* Live badge slang sub-elements */
.live-badge.slang {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: linear-gradient(135deg, rgba(80,50,5,0.85), rgba(60,35,5,0.82));
  border-color: rgba(245,158,11,0.7);
  box-shadow: 0 0 16px rgba(245,158,11,0.3), 0 6px 20px rgba(0,0,0,0.4);
}
.lb-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1d35;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.lb-word {
  font-weight: 900;
  font-size: 14px;
  color: #FCD34D;
  letter-spacing: 0.04em;
}
.lb-mult {
  font-weight: 800;
  font-size: 12px;
  color: #F59E0B;
}
.lb-pts {
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(10,12,25,0.8); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 200; animation: fadeIn .2s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-inner { background: linear-gradient(180deg, #1E1E3A 0%, #141428 100%); border: 1px solid rgba(0,245,255,0.12); border-radius: 16px; padding: 32px; max-width: 420px; width: 90%; text-align: center; box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 40px rgba(0,245,255,0.05); }
.modal-inner h2 { font-family: var(--font-display); font-size: 36px; margin: 0 0 16px; letter-spacing: 0.04em; }
.go-scores { display: grid; gap: 10px; margin: 16px 0; }
.go-scores .row { display: flex; justify-content: space-between; padding: 12px 16px; background: rgba(255,255,255,0.04); border-radius: 10px; font-size: 18px; }
.go-scores .row.win { background: rgba(245,158,11,0.18); border: 1px solid rgba(245,158,11,0.4); }
.go-scores .row .n { font-weight: 600; }
.go-scores .row .s { font-weight: 800; font-variant-numeric: tabular-nums; }
.go-verdict { font-size: 20px; font-weight: 700; margin: 16px 0 24px; letter-spacing: 0.03em; color: var(--gold-2); }
.go-verdict.loss { color: var(--ink-dim); }
.go-verdict.tie { color: var(--accent-cyan); }

/* Blank letter picker */
.blank-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 18px; }
.blank-grid button { padding: 12px 6px; font-size: 20px; font-weight: 800; font-family: var(--font-serif); background: linear-gradient(180deg, #FFFBE8 0%, #F5EBC8 100%); color: var(--tile-ink); border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; cursor: pointer; box-shadow: var(--shadow-tile); }
.blank-grid button:hover { transform: translateY(-2px); }

/* ===== Phase 2: Mode Selector ===== */
.mode-selector { display: flex; gap: 8px; justify-content: center; margin: 18px 0 12px; }
.mode-btn { padding: 10px 22px; font-size: 14px; font-weight: 700; font-family: var(--font-ui); border: 2px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--ink-dim); border-radius: 999px; cursor: pointer; transition: all .2s; text-transform: uppercase; letter-spacing: 0.06em; }
.mode-btn.selected { background: rgba(34,211,238,0.15); color: var(--accent-cyan); border-color: rgba(34,211,238,0.45); }
.mode-btn:hover:not(.selected) { background: rgba(255,255,255,0.08); color: var(--ink); }

/* ===== Phase 2: Player Count Row ===== */
.player-count-row { display: flex; gap: 8px; justify-content: center; margin: 0 0 16px; }
.pcount-btn { width: 48px; height: 48px; font-size: 20px; font-weight: 800; font-family: var(--font-ui); border: 2px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--ink-dim); border-radius: 12px; cursor: pointer; transition: all .2s; }
.pcount-btn.selected { background: rgba(34,211,238,0.15); color: var(--accent-cyan); border-color: rgba(34,211,238,0.45); }
.pcount-btn:hover:not(.selected) { background: rgba(255,255,255,0.08); }

/* ===== Phase 2: Player Slots ===== */
.player-slots { display: grid; gap: 10px; max-width: 400px; margin: 0 auto; }
.player-slot { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 10px 14px; transition: all .2s; }
.player-slot .slot-color { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #0b1220; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); }
.player-slot .slot-name-input { flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 8px 10px; color: var(--ink); font-size: 14px; font-family: var(--font-ui); outline: none; transition: border-color .2s; }
.player-slot .slot-name-input:focus { border-color: rgba(34,211,238,0.5); }
.player-slot .slot-type-toggle { padding: 6px 12px; font-size: 11px; font-weight: 700; font-family: var(--font-ui); border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--ink-dim); border-radius: 999px; cursor: pointer; transition: all .15s; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.player-slot .slot-type-toggle.ai { background: rgba(249,115,22,0.15); color: var(--tl); border-color: rgba(249,115,22,0.3); }
.player-slot .slot-persona-select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 6px 8px; color: var(--ink); font-size: 12px; font-family: var(--font-ui); outline: none; cursor: pointer; }
.player-slot .slot-persona-select option { background: #1a1f36; color: var(--ink); }

/* ===== Phase 2: Handoff Screen ===== */
.handoff-screen { position: fixed; inset: 0; background: linear-gradient(180deg, #0F0F1E 0%, #1A1A2E 100%); z-index: 300; display: grid; place-items: center; animation: fadeIn .25s; }
.handoff-inner { text-align: center; padding: 32px; }
.handoff-icon { font-size: 64px; margin-bottom: 16px; }
.handoff-title { font-family: var(--font-display); font-size: 32px; color: var(--ink); margin: 0 0 8px; letter-spacing: 0.04em; }
.handoff-title span { color: var(--accent-cyan); }
.handoff-sub { color: var(--ink-dim); font-size: 16px; margin: 0 0 32px; }
.handoff-btn { font-size: 18px; padding: 16px 48px; }

/* ===== Phase 2: Dynamic Scoreboard (multi-player) ===== */
.scoreboard { display: flex; align-items: center; gap: 6px; background: rgba(20, 20, 50, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0,245,255,0.1); padding: 6px 10px; border-radius: 14px; flex-wrap: wrap; justify-content: center; }
.score-slot { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 10px; transition: all .25s; position: relative; }
.score-slot.active { background: rgba(255,255,255,0.06); }
.score-slot .s-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #0b1220; font-weight: 800; font-size: 13px; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); flex-shrink: 0; }
.score-slot .s-meta { line-height: 1; }
.score-slot .s-name { font-size: 10px; color: var(--ink-dim); letter-spacing: 0.04em; text-transform: uppercase; }
.score-slot .s-pts { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.score-slot.active .s-name { color: var(--ink); }
.score-slot .turn-dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-cyan); box-shadow: 0 0 6px rgba(34,211,238,0.5); animation: pulse 1.4s ease-in-out infinite; }

/* ===== Phase 2: Game Over Scores (multi-player) ===== */
.go-scores .row .rank { font-size: 14px; color: var(--ink-faint); margin-right: 8px; font-weight: 700; }
.go-scores .row .rank-1 { color: var(--gold); }

/* ===== Phase 2: Log colors (multi-player) ===== */
.log li .pname { font-weight: 700; font-size: 11px; margin-right: 4px; }

/* ===== Phase 3: Multiplayer Screens ===== */

/* Screen system — all screens use .screen, active gets shown */
.screen { position: fixed; inset: 0; display: none; z-index: 50; overflow-y: auto; }
.screen.active { display: flex; }

/* --- Auth Screen --- */
#auth-screen.screen { align-items: center; justify-content: center; }
.auth-container {
  max-width: 400px; width: 100%; margin: auto; padding: 36px 28px;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, rgba(30,30,58,0.7) 0%, rgba(20,20,40,0.65) 100%);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0,245,255,0.1);
  border-radius: 20px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.5), 0 0 60px rgba(0,245,255,0.04);
}
.auth-logo { margin-bottom: 8px; }
.auth-logo-svg { width: 220px; height: auto; filter: drop-shadow(0 4px 20px rgba(255,158,11,0.3)); }
.auth-tagline {
  color: var(--ink-dim); font-size: 13px; margin: 0 0 28px; text-align: center;
  letter-spacing: 0.02em;
}
.auth-tabs {
  display: flex; gap: 4px; width: 100%; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 4px; margin-bottom: 24px;
}
.auth-tab {
  flex: 1; padding: 10px 8px; font-size: 13px; font-weight: 600;
  font-family: var(--font-ui); color: var(--ink-dim); background: none;
  border: none; border-radius: 8px; cursor: pointer; transition: all .2s;
  text-align: center; letter-spacing: 0.02em;
}
.auth-tab.active {
  background: rgba(245,158,11,0.15); color: var(--gold);
  box-shadow: 0 0 12px rgba(245,158,11,0.08);
}
.auth-tab:hover:not(.active) { color: var(--ink); }
.auth-form {
  display: flex; flex-direction: column; gap: 12px; width: 100%;
}
.auth-form input {
  background: rgba(15,15,30,0.6); border: 1.5px solid rgba(0,245,255,0.12);
  border-radius: 10px; padding: 12px 14px; color: var(--ink);
  font-family: var(--font-ui); font-size: 14px; outline: none; transition: all .2s;
}
.auth-form input:focus { border-color: var(--gold); box-shadow: 0 0 12px rgba(245,158,11,0.12); }
.auth-form input::placeholder { color: var(--ink-faint); }
.auth-error {
  color: var(--red); font-size: 13px; min-height: 20px; text-align: center;
}
.auth-guest {
  text-align: center; padding: 20px 0;
}
.auth-guest p {
  color: var(--ink-dim); font-size: 14px; line-height: 1.5; margin: 0 0 20px;
}

/* --- Lobby Screen --- */
.lobby-container {
  max-width: 520px; width: 100%; margin: 0 auto; padding: 20px 16px;
  min-height: 100vh;
}
.lobby-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
  background: linear-gradient(180deg, rgba(30,30,58,0.5) 0%, rgba(20,20,40,0.4) 100%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,245,255,0.08);
  border-radius: 16px; padding: 14px 18px;
}
.lobby-user-info {
  display: flex; align-items: center; gap: 12px;
}
.lobby-avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid;
  place-items: center; font-weight: 800; font-size: 18px; color: #0b1220;
  background: linear-gradient(135deg, var(--gold), #D97706);
  box-shadow: 0 4px 12px rgba(245,158,11,0.3);
}
.lobby-username {
  font-weight: 700; font-size: 16px; color: var(--ink);
}
.lobby-rank {
  font-size: 12px; color: var(--ink-dim);
}
.lobby-header-actions {
  display: flex; gap: 6px;
}
.lobby-icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(0,245,255,0.15);
  background: rgba(0,245,255,0.06); cursor: pointer; font-size: 18px;
  display: grid; place-items: center; transition: all .15s;
  color: var(--accent-cyan);
}
.lobby-icon-btn:hover { background: rgba(0,245,255,0.12); box-shadow: 0 0 14px rgba(0,245,255,0.15); }
.guest-banner {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 16px;
  font-size: 13px; color: var(--gold);
}
.btn-small {
  padding: 6px 14px; font-size: 12px; font-weight: 600;
  font-family: var(--font-ui); border: none; border-radius: 8px;
  cursor: pointer; transition: all .15s;
  background: var(--gold); color: #1C1407;
}
.btn-small:hover { filter: brightness(1.1); }
.lobby-new-game {
  margin-bottom: 20px;
}
.btn-large {
  width: 100%; font-size: 16px; padding: 14px 20px;
}
.lobby-tabs {
  display: flex; gap: 4px; margin-bottom: 14px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 3px;
}
.lobby-tab {
  flex: 1; padding: 8px 6px; font-size: 13px; font-weight: 600;
  font-family: var(--font-ui); color: var(--ink-faint); background: none;
  border: none; border-radius: 7px; cursor: pointer; transition: all .2s;
  text-align: center;
}
.lobby-tab.active {
  background: rgba(0,245,255,0.12); color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0,245,255,0.06);
}
.lobby-tab:hover:not(.active) { color: var(--ink-dim); }
.lobby-games-list {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 200px;
  background: linear-gradient(180deg, rgba(30,30,58,0.35) 0%, rgba(20,20,40,0.25) 100%);
  border: 1px solid rgba(0,245,255,0.06);
  border-radius: 14px; padding: 12px;
}
.lobby-loading {
  text-align: center; color: var(--ink-faint); padding: 40px 0; font-size: 14px;
}
.lobby-empty {
  text-align: center; color: var(--ink-faint); padding: 40px 16px;
  font-size: 14px; line-height: 1.6;
}
.game-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 14px 16px; cursor: pointer;
  transition: all .15s; border-left: 3px solid transparent;
}
.game-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.game-card.game-your-turn { border-left-color: var(--accent-cyan); background: rgba(0,245,255,0.04); }
.game-card.game-their-turn { border-left-color: var(--ink-faint); }
.game-card.game-won { border-left-color: var(--gold); background: rgba(245,158,11,0.04); }
.game-card.game-lost { border-left-color: var(--red); }
.game-card-main {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.game-card-opponent { font-weight: 700; font-size: 15px; }
.game-card-score {
  font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums;
}
.game-card-meta {
  display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--ink-faint);
}
.game-card-mode { white-space: nowrap; }
.game-card-last { white-space: nowrap; }
.game-card-time { margin-left: auto; }
.game-card-result {
  margin-top: 8px; font-weight: 700; font-size: 13px;
}
.game-won .game-card-result { color: var(--gold); }
.game-lost .game-card-result { color: var(--red); }
.lobby-footer {
  display: flex; gap: 8px; margin-top: 24px; padding-top: 16px;
  border-top: 1px solid rgba(0,245,255,0.08);
}
.lobby-footer-btn {
  flex: 1; padding: 10px; font-size: 13px; font-weight: 600;
  font-family: var(--font-ui); background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,245,255,0.1); border-radius: 10px;
  color: var(--ink-dim); cursor: pointer; transition: all .15s; text-align: center;
}
.lobby-footer-btn:hover { background: rgba(0,245,255,0.06); color: var(--accent-cyan); box-shadow: 0 0 12px rgba(0,245,255,0.08); }

/* --- Modal Overlay (for dynamic modals) --- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(10,12,25,0.8);
  backdrop-filter: blur(8px); display: grid; place-items: center;
  z-index: 250; animation: fadeIn .2s;
}
.modal-overlay .modal {
  background: linear-gradient(180deg, #1E1E3A 0%, #141428 100%);
  border: 1px solid rgba(0,245,255,0.12); border-radius: 16px;
  padding: 28px 24px; max-width: 420px; width: 90%; text-align: center;
  box-shadow: 0 40px 100px rgba(0,0,0,0.7);
}
.modal-overlay .modal h2 {
  font-family: var(--font-display); font-size: 24px;
  margin: 0 0 16px; letter-spacing: 0.03em;
}
.modal-close {
  width: 100%; margin-top: 16px; padding: 10px; font-size: 13px;
  font-weight: 600; font-family: var(--font-ui); background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  color: var(--ink-dim); cursor: pointer; transition: all .15s;
}
.modal-close:hover { background: rgba(255,255,255,0.1); color: var(--ink); }

/* New game options */
.new-game-options {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px;
}
.new-game-option {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 12px; cursor: pointer; transition: all .15s; text-align: left;
  font-family: var(--font-ui); color: var(--ink);
}
.new-game-option:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); }
.new-game-icon { font-size: 28px; flex-shrink: 0; }
.new-game-label { font-weight: 700; font-size: 15px; display: block; }
.new-game-desc { font-size: 12px; color: var(--ink-dim); display: block; }

/* AI picker */
.ai-options {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px;
}
.ai-option {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 12px; cursor: pointer; transition: all .15s; text-align: left;
  font-family: var(--font-ui); color: var(--ink);
}
.ai-option:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); }
.ai-option.selected { background: rgba(0,245,255,0.08); border-color: var(--accent-cyan); }
.ai-option .ai-check { display: none; color: var(--accent-cyan); font-size: 20px; font-weight: 700; }
.ai-option.selected .ai-check { display: block; }
.ai-avatar {
  width: 42px; height: 42px; border-radius: 10px; display: grid;
  place-items: center; font-family: var(--font-display); font-size: 20px;
  color: #fff; font-weight: 700; flex-shrink: 0;
}
.ai-info { flex: 1; }
.ai-name { font-weight: 700; font-size: 15px; }
.ai-diff { font-size: 12px; color: var(--ink-dim); }
.ai-desc { font-size: 12px; color: var(--ink-faint); }

/* Friend invite list */
.friend-invite-list {
  display: flex; flex-direction: column; gap: 6px; max-height: 300px;
  overflow-y: auto; margin-bottom: 8px;
}
.friend-invite-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 10px; cursor: pointer; transition: all .15s;
  font-family: var(--font-ui); color: var(--ink); text-align: left; width: 100%;
}
.friend-invite-row:hover { background: rgba(255,255,255,0.07); }
.friend-invite-row.selected { background: rgba(0,245,255,0.08); border-color: var(--accent-cyan); }
.friend-invite-row .ai-check { display: none; color: var(--accent-cyan); font-size: 18px; font-weight: 700; margin-left: auto; }
.friend-invite-row.selected .ai-check { display: block; }

/* AI / Friend picker summary + actions */
.ai-picker-hint {
  font-size: 13px; color: var(--ink-dim); margin: 0 0 12px 0;
  text-align: center; font-family: var(--font-ui);
}
.ai-picker-summary {
  text-align: center; font-size: 14px; color: var(--ink-dim);
  padding: 10px 0; font-family: var(--font-ui);
}
.ai-picker-actions {
  display: flex; gap: 10px; justify-content: center; margin-top: 8px;
}
.ai-picker-actions .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* Player count badge in lobby game cards */
.game-card-players {
  display: inline-block; background: var(--accent-cyan); color: #0a0a1a;
  font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px;
  margin-right: 6px; vertical-align: middle; letter-spacing: 0.5px;
  font-family: var(--font-ui);
}
.game-card.game-waiting { border-left: 3px solid #FFD700; }

/* --- Friends Screen --- */
.friends-container {
  max-width: 520px; width: 100%; margin: 0 auto; padding: 20px 16px;
  min-height: 100vh;
}
.screen-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  background: linear-gradient(180deg, rgba(30,30,58,0.5) 0%, rgba(20,20,40,0.4) 100%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,245,255,0.08);
  border-radius: 14px; padding: 14px 18px;
}
.screen-header h2 {
  font-family: var(--font-display); font-size: 22px; margin: 0;
  background: linear-gradient(135deg, var(--ink) 0%, var(--accent-cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.back-btn {
  background: none; border: none; color: var(--accent-cyan); font-size: 14px;
  font-weight: 600; font-family: var(--font-ui); cursor: pointer; padding: 6px 0;
  transition: all .15s; text-shadow: 0 0 8px rgba(0,245,255,0.3);
}
.back-btn:hover { opacity: 0.7; }
.friends-search {
  margin-bottom: 20px;
}
.friends-search input {
  width: 100%; background: rgba(15,15,30,0.6); border: 1.5px solid rgba(0,245,255,0.12);
  border-radius: 10px; padding: 11px 14px; color: var(--ink);
  font-family: var(--font-ui); font-size: 14px; outline: none; transition: all .2s;
}
.friends-search input:focus { border-color: var(--accent-cyan); box-shadow: 0 0 14px rgba(0,245,255,0.12); }
.friends-search input::placeholder { color: var(--ink-faint); }
.friends-list-section {
  background: linear-gradient(180deg, rgba(30,30,58,0.35) 0%, rgba(20,20,40,0.25) 100%);
  border: 1px solid rgba(0,245,255,0.06);
  border-radius: 14px; padding: 12px;
}
.friend-avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid;
  place-items: center; font-weight: 800; font-size: 15px; color: #0b1220;
  background: linear-gradient(135deg, #8B5CF6, #6D28D9); flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(139,92,246,0.3);
}
.friend-card, .friend-request-card, .search-result {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 6px;
  transition: all .15s;
}
.friend-card:hover, .search-result:hover { background: rgba(255,255,255,0.07); }
.friend-info { flex: 1; min-width: 0; }
.friend-name { font-weight: 700; font-size: 14px; }
.friend-meta, .friend-elo { font-size: 12px; color: var(--ink-dim); }
.friend-status { font-size: 12px; color: var(--green); font-weight: 600; text-shadow: 0 0 8px rgba(34,197,94,0.3); }
.friend-actions { display: flex; gap: 6px; }
.btn-accept { background: var(--green); color: #0b1220; box-shadow: 0 0 10px rgba(34,197,94,0.2); }
.btn-decline { background: rgba(239,68,68,0.2); color: var(--red); }
.btn-add-friend { background: rgba(0,245,255,0.15); color: var(--accent-cyan); border: 1px solid rgba(0,245,255,0.3); box-shadow: 0 0 10px rgba(0,245,255,0.1); }
.search-empty { text-align: center; color: var(--ink-faint); font-size: 13px; padding: 12px; }
#friend-search-results {
  margin-top: 8px;
}

/* --- Leaderboard Screen --- */
.leaderboard-container {
  max-width: 520px; width: 100%; margin: 0 auto; padding: 20px 16px;
  min-height: 100vh;
}
.leaderboard-tabs {
  display: flex; gap: 4px; margin-bottom: 14px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 3px;
}
.lb-tab {
  flex: 1; padding: 8px 6px; font-size: 13px; font-weight: 600;
  font-family: var(--font-ui); color: var(--ink-faint); background: none;
  border: none; border-radius: 7px; cursor: pointer; transition: all .2s;
  text-align: center;
}
.lb-tab.active { background: rgba(245,158,11,0.12); color: var(--gold); box-shadow: 0 0 10px rgba(245,158,11,0.06); }
.lb-tab:hover:not(.active) { color: var(--ink-dim); }
.leaderboard-list {
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(180deg, rgba(30,30,58,0.35) 0%, rgba(20,20,40,0.25) 100%);
  border: 1px solid rgba(245,158,11,0.06);
  border-radius: 14px; padding: 12px;
}
.lb-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 10px 14px; transition: all .15s;
}
.lb-row:hover { background: rgba(255,255,255,0.06); }
.lb-row.lb-row-me {
  background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2);
  box-shadow: 0 0 16px rgba(245,158,11,0.08);
}
.lb-rank {
  font-weight: 800; font-size: 14px; color: var(--ink-faint); width: 36px;
  text-align: center; flex-shrink: 0;
}
.lb-row:nth-child(1) .lb-rank { color: var(--gold); font-size: 16px; text-shadow: 0 0 10px rgba(245,158,11,0.4); }
.lb-row:nth-child(2) .lb-rank { color: #C0C0C0; text-shadow: 0 0 8px rgba(192,192,192,0.3); }
.lb-row:nth-child(3) .lb-rank { color: #CD7F32; text-shadow: 0 0 8px rgba(205,127,50,0.3); }
.lb-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid;
  place-items: center; font-weight: 800; font-size: 14px; color: #0b1220;
  background: linear-gradient(135deg, var(--accent-cyan), #06B6D4); flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,245,255,0.25);
}
.lb-info { flex: 1; min-width: 0; }
.lb-name { font-weight: 700; font-size: 14px; }
.lb-meta { font-size: 12px; color: var(--ink-dim); }
.lb-elo {
  font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums;
  color: var(--gold); text-shadow: 0 0 8px rgba(245,158,11,0.2);
}

/* --- Profile Screen --- */
.profile-container {
  max-width: 420px; width: 100%; margin: 0 auto; padding: 20px 16px;
  min-height: 100vh;
}
.profile-card {
  text-align: center; padding: 28px 24px; margin-bottom: 20px;
  background: linear-gradient(180deg, rgba(30,30,58,0.5) 0%, rgba(20,20,40,0.4) 100%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,245,255,0.08);
  border-radius: 16px;
}
.profile-avatar-big {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 12px;
  display: grid; place-items: center; font-weight: 800; font-size: 32px;
  color: #0b1220; background: linear-gradient(135deg, var(--gold), #D97706);
  box-shadow: 0 8px 24px rgba(245,158,11,0.3), 0 0 20px rgba(245,158,11,0.15);
}
.profile-card h3 {
  font-family: var(--font-display); font-size: 24px; margin: 0 0 4px;
}
.profile-username {
  color: var(--ink-dim); font-size: 14px; margin-bottom: 8px;
}
.profile-badge {
  display: inline-block; padding: 4px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  background: rgba(245,158,11,0.15); color: var(--gold); border: 1px solid rgba(245,158,11,0.3);
  box-shadow: 0 0 10px rgba(245,158,11,0.1);
}
.profile-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 24px;
}
.stat-box {
  background: linear-gradient(180deg, rgba(30,30,58,0.45) 0%, rgba(20,20,40,0.35) 100%);
  border: 1px solid rgba(0,245,255,0.08);
  border-radius: 10px; padding: 14px 8px; text-align: center;
  transition: all .15s;
}
.stat-box:hover { border-color: rgba(0,245,255,0.15); box-shadow: 0 0 12px rgba(0,245,255,0.06); }
.stat-value {
  font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums;
  color: var(--accent-cyan);
}
.stat-label {
  font-size: 11px; color: var(--ink-dim); margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.profile-actions {
  display: flex; flex-direction: column; gap: 8px;
}
.btn-secondary {
  width: 100%; padding: 12px; font-size: 14px; font-weight: 600;
  font-family: var(--font-ui); background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,245,255,0.1); border-radius: 10px;
  color: var(--ink); cursor: pointer; transition: all .15s;
}
.btn-secondary:hover { background: rgba(0,245,255,0.06); border-color: rgba(0,245,255,0.2); }
.btn-danger {
  width: 100%; padding: 12px; font-size: 14px; font-weight: 600;
  font-family: var(--font-ui); background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3); border-radius: 10px;
  color: var(--red); cursor: pointer; transition: all .15s;
}
.btn-danger:hover { background: rgba(239,68,68,0.2); box-shadow: 0 0 12px rgba(239,68,68,0.1); }

/* --- EULA Modal --- */
.eula-content {
  max-height: 400px; overflow-y: auto; text-align: left;
  scrollbar-width: thin; scrollbar-color: var(--panel-2) transparent;
}
.eula-content pre {
  font-family: var(--font-ui); font-size: 12px; color: var(--ink-dim);
  white-space: pre-wrap; line-height: 1.6;
}

/* --- Excluded Words Modal (online) --- */
.excluded-words-modal .excluded-add {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.excluded-words-modal .excluded-add input {
  flex: 1; background: var(--bg-deep); border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 9px 12px; color: var(--ink);
  font-family: var(--font-ui); font-size: 14px; outline: none;
}
.excluded-words-modal .excluded-add input:focus { border-color: var(--gold); }
.excluded-list {
  max-height: 200px; overflow-y: auto; display: flex; flex-direction: column;
  gap: 4px;
}
.excluded-word {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
  background: rgba(255,255,255,0.03);
}
.excluded-word:hover { background: rgba(255,255,255,0.06); }
.btn-remove-word {
  background: none; border: none; color: var(--red); cursor: pointer;
  font-size: 18px; font-weight: 700; padding: 0 4px; line-height: 1;
}

/* --- Online game header bar (resign, back to lobby) --- */
.online-bar {
  display: flex; align-items: center; gap: 8px;
}
.online-bar .btn-resign {
  padding: 4px 12px; font-size: 11px; font-weight: 700;
  font-family: var(--font-ui); background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25); border-radius: 6px;
  color: var(--red); cursor: pointer; transition: all .15s;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.online-bar .btn-resign:hover { background: rgba(239,68,68,0.2); }
.online-bar .btn-back-lobby {
  padding: 4px 12px; font-size: 11px; font-weight: 700;
  font-family: var(--font-ui); background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 6px;
  color: var(--ink-dim); cursor: pointer; transition: all .15s;
}
.online-bar .btn-back-lobby:hover { background: rgba(255,255,255,0.08); color: var(--ink); }

/* --- Waiting for opponent indicator --- */
.waiting-indicator {
  text-align: center; padding: 12px; color: var(--ink-dim); font-size: 13px;
  background: rgba(0,245,255,0.05); border: 1px solid rgba(0,245,255,0.1);
  border-radius: 10px; margin: 8px 0;
  animation: waitPulse 2s ease-in-out infinite;
}
@keyframes waitPulse {
  0%, 100% { opacity: 0.7; } 50% { opacity: 1; }
}

/* --- Online game actions override (show rematch on completed) --- */
.actions .btn-rematch {
  background: linear-gradient(180deg, #22C55E 0%, #16A34A 100%);
  color: #fff; box-shadow: 0 4px 0 #15803d, 0 6px 14px rgba(34,197,94,0.3);
}
.actions .btn-rematch:hover { transform: translateY(-1px); }
.actions .btn-rematch:active { transform: translateY(2px); box-shadow: 0 2px 0 #15803d; }

/* --- Delete Account Modal --- */
.btn-danger-outline {
  padding: 10px 20px; font-size: 13px; font-weight: 700;
  font-family: var(--font-ui); background: transparent;
  border: 1px solid rgba(239,68,68,0.35); border-radius: var(--radius-sm);
  color: var(--red); cursor: pointer; transition: all .15s;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.btn-danger-outline:hover {
  background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.6);
}
.delete-account-modal { max-width: 380px; margin: 0 auto; }
.delete-warning, .delete-warning-final {
  color: var(--ink-dim); font-size: 13px; line-height: 1.5; margin: 8px 0;
}
.delete-warning-final strong { color: var(--red); }
.delete-list {
  color: var(--ink-dim); font-size: 12px; line-height: 1.7;
  padding-left: 18px; margin: 6px 0 12px; text-align: left;
}
.delete-list li { margin-bottom: 2px; }
.delete-actions {
  display: flex; gap: 10px; margin-top: 14px; justify-content: center;
}

/* --- Mobile adjustments for multiplayer screens --- */
@media (max-width: 500px) {
  .lobby-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lobby-header-actions { align-self: flex-end; margin-top: -36px; }
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .auth-tabs { flex-direction: column; }
}

/* ---- Mobile portrait: compact start screen ---- */
@media (max-width: 480px) {
  #start-screen.screen { padding: 16px; }
  #start-screen .logo-svg { max-width: 280px; }
  #start-screen .tag { font-size: 14px; margin: 2px 0 10px; }
  #start-screen .rules { padding: 10px 14px; margin: 0 0 10px; gap: 4px; }
  #start-screen .rule { font-size: 13px; }
  #start-screen .mode-selector { margin: 10px 0 8px; }
  #start-screen .mode-btn { font-size: 12px; padding: 8px 14px; }
  #start-screen .pick-label { margin: 0 0 6px; font-size: 12px; }
  #start-screen .persona-picker { gap: 6px; margin-bottom: 10px; }
  #start-screen .persona-card { padding: 10px 12px; }
  #start-screen .menu-row { margin-top: 6px; }
  #start-screen .note { margin-top: 6px; font-size: 11px; }
  #start-screen .copyright { margin-top: 8px; }
}
@media (max-height: 700px) {
  #start-screen.screen { padding: 10px 14px; }
  #start-screen .logo-svg { max-width: 220px; }
  #start-screen .tag { font-size: 13px; margin: 2px 0 6px; }
  #start-screen .rules { padding: 8px 12px; margin: 0 0 6px; gap: 3px; }
  #start-screen .rule { font-size: 12px; }
  #start-screen .persona-card { padding: 8px 10px; border-radius: 10px; }
  #start-screen .persona-avatar { width: 34px; height: 34px; border-radius: 8px; font-size: 16px; }
  #start-screen .mode-btn { font-size: 11px; padding: 7px 12px; }
}