/* ================================================================
   DRAFTI — Mchezo wa Tanzania  v1.0
   Bold Tanzanian Derby Style · PWA-Ready
   For: drafti.chimbonetwork.com
================================================================ */

/* ══════════════════════════════════════════════════════════════
   GRID SYSTEM
══════════════════════════════════════════════════════════════ */
.rs-grid          { display: grid; width: 100%; }
.rs-grid-2        { grid-template-columns: repeat(2, 1fr); }
.rs-grid-3        { grid-template-columns: repeat(3, 1fr); }
.rs-grid-4        { grid-template-columns: repeat(4, 1fr); }
.rs-gap-xs        { gap: 4px; }
.rs-gap-sm        { gap: 6px; }
.rs-gap-md        { gap: 8px; }
.rs-gap-lg        { gap: 14px; }
.rs-align-center  { align-items: center; }

/* ══════════════════════════════════════════════════════════════
   BASE THEME TOKENS — TAIFA (Tanzania Green+Gold)
══════════════════════════════════════════════════════════════ */
:root {
  --bg:             #050f05;
  --surface:        #0a160a;
  --panel:          #081008;
  --gold:           #ffe44a;
  --gold-light:     #fff176;
  --gold-dark:      #c4a100;
  --green:          #1e6b1e;
  --green-light:    #2e9b2e;
  --text-primary:   #f0edd0;
  --text-muted:     #5a7a5a;
  --border:         rgba(255,228,74,.2);
  --shadow-deep:    0 20px 60px rgba(0,0,0,.85);
  --radius:         4px;

  --board-light:    #f5e8c0;
  --board-dark:     #1e6b1e;
  --board-frame:    #0e3d0e;
  --board-accent:   rgba(255,228,74,.5);

  --piece-c0: #ffe44a;
  --piece-c1: #d4a843;
  --piece-c2: #6a5000;
  --piece-s0: #4a4a4a;
  --piece-s1: #1a1a1a;
  --piece-s2: #080808;
  --score-active-glow: rgba(255,228,74,.25);
}

/* ── Simba (Orange/Red) ─────────────────────────────────────── */
body[data-theme="simba"] {
  --bg:             #100500;
  --surface:        #1e0800;
  --panel:          #180600;
  --gold:           #ff9933;
  --gold-light:     #ffb866;
  --gold-dark:      #cc5500;
  --green:          #8b2500;
  --green-light:    #b83300;
  --text-primary:   #f5e8d0;
  --text-muted:     #886655;
  --border:         rgba(255,153,51,.2);
  --board-light:    #f5deb3;
  --board-dark:     #8b2500;
  --board-frame:    #5a1500;
  --board-accent:   rgba(255,153,51,.5);
  --piece-c0: #ffbb55;
  --piece-c1: #ff9933;
  --piece-c2: #663300;
  --piece-s0: #1a1a1a;
  --piece-s1: #0d0d0d;
  --piece-s2: #050505;
  --score-active-glow: rgba(255,153,51,.25);
}

/* ── Pwani (Ocean Blue + Cyan) ──────────────────────────────── */
body[data-theme="pwani"] {
  --bg:             #000d18;
  --surface:        #001828;
  --panel:          #001020;
  --gold:           #00d4ff;
  --gold-light:     #80eaff;
  --gold-dark:      #0088aa;
  --green:          #006994;
  --green-light:    #0088bb;
  --text-primary:   #d0f0ff;
  --text-muted:     #3a7090;
  --border:         rgba(0,212,255,.2);
  --board-light:    #e0f4ff;
  --board-dark:     #006994;
  --board-frame:    #003d5c;
  --board-accent:   rgba(0,212,255,.5);
  --piece-c0: #80eaff;
  --piece-c1: #00d4ff;
  --piece-c2: #004466;
  --piece-s0: #ffe88a;
  --piece-s1: #d4a843;
  --piece-s2: #6a5000;
  --score-active-glow: rgba(0,212,255,.25);
}

/* ── Kilima (Mountain Green) ────────────────────────────────── */
body[data-theme="kilima"] {
  --bg:             #060d06;
  --surface:        #0e180e;
  --panel:          #0a120a;
  --gold:           #b0b890;
  --gold-light:     #d0d8b0;
  --gold-dark:      #707850;
  --green:          #2d5a27;
  --green-light:    #3d7a35;
  --text-primary:   #d8e8d0;
  --text-muted:     #4a6040;
  --border:         rgba(176,184,144,.2);
  --board-light:    #e8f0e0;
  --board-dark:     #2d5a27;
  --board-frame:    #1a3518;
  --board-accent:   rgba(176,184,144,.5);
  --piece-c0: #e0e8d8;
  --piece-c1: #b0b0a0;
  --piece-c2: #606058;
  --piece-s0: #6a3a10;
  --piece-s1: #4a2800;
  --piece-s2: #200e00;
  --score-active-glow: rgba(176,184,144,.2);
}

/* ── Usiku (Midnight Tanzanian) ─────────────────────────────── */
body[data-theme="usiku"] {
  --bg:             #02020a;
  --surface:        #05050e;
  --panel:          #030308;
  --gold:           #ffe44a;
  --gold-light:     #fff176;
  --gold-dark:      #c4a100;
  --green:          #1a1a3a;
  --green-light:    #2a2a5a;
  --text-primary:   #e8e0f0;
  --text-muted:     #404060;
  --border:         rgba(255,228,74,.15);
  --board-light:    #1a1a2e;
  --board-dark:     #08080f;
  --board-frame:    #050508;
  --board-accent:   rgba(255,228,74,.6);
  --piece-c0: #fff176;
  --piece-c1: #ffe44a;
  --piece-c2: #886600;
  --piece-s0: #e05050;
  --piece-s1: #cc2200;
  --piece-s2: #660800;
  --score-active-glow: rgba(255,228,74,.2);
}

/* ── Classic Ember ──────────────────────────────────────────── */
body[data-theme="ember"] {
  --bg:             #1a1410;
  --surface:        #221c16;
  --panel:          #1e1812;
  --gold:           #d4a843;
  --gold-light:     #f0c85a;
  --gold-dark:      #8a6a20;
  --green:          #7a3810;
  --green-light:    #9a4820;
  --text-primary:   #f0e0c8;
  --text-muted:     #7a6a55;
  --border:         rgba(212,168,67,.2);
  --board-light:    #f5e8d0;
  --board-dark:     #7a3810;
  --board-frame:    #5c3010;
  --board-accent:   rgba(212,168,67,.5);
  --piece-c0: #f0a050;
  --piece-c1: #c87533;
  --piece-c2: #6a2e08;
  --piece-s0: #7090b0;
  --piece-s1: #3d5068;
  --piece-s2: #18222e;
  --score-active-glow: rgba(212,168,67,.2);
}

/* ── Neon ───────────────────────────────────────────────────── */
body[data-theme="neon"] {
  --bg:             #060810;
  --surface:        #0a0d1a;
  --panel:          #060812;
  --gold:           #00ffe0;
  --gold-light:     #80fff0;
  --gold-dark:      #008870;
  --green:          #040810;
  --green-light:    #0a1020;
  --text-primary:   #c0f0e8;
  --text-muted:     #2a6060;
  --border:         rgba(0,255,200,.18);
  --board-light:    #102028;
  --board-dark:     #040810;
  --board-frame:    #020408;
  --board-accent:   rgba(0,255,200,.7);
  --piece-c0: #ff8060;
  --piece-c1: #ff4020;
  --piece-c2: #500808;
  --piece-s0: #e0fffa;
  --piece-s1: #00ffe0;
  --piece-s2: #008878;
  --score-active-glow: rgba(0,255,200,.25);
}

/* ── Dhahabu (Gold Marble) ──────────────────────────────────── */
body[data-theme="dhahabu"] {
  --bg:             #f5f0e8;
  --surface:        #ede4d4;
  --panel:          #f0e8d8;
  --gold:           #8a6820;
  --gold-light:     #c09840;
  --gold-dark:      #5a4010;
  --green:          #8a5820;
  --green-light:    #aa7030;
  --text-primary:   #2a1e0a;
  --text-muted:     #8a7850;
  --border:         rgba(138,104,32,.22);
  --board-light:    #f8f0e0;
  --board-dark:     #8a5820;
  --board-frame:    #c09840;
  --board-accent:   rgba(138,104,32,.6);
  --piece-c0: #d4a020;
  --piece-c1: #9a6810;
  --piece-c2: #503008;
  --piece-s0: #2a1e0a;
  --piece-s1: #1a1208;
  --piece-s2: #080400;
  --score-active-glow: rgba(138,104,32,.2);
}

/* ── Custom ─────────────────────────────────────────────────── */
body[data-theme="custom"] { /* All tokens set dynamically by JS */ }

/* ══════════════════════════════════════════════════════════════
   RESET + BASE
══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'Barlow', sans-serif;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .4s, color .4s;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(30,107,30,.2) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 100%, rgba(255,228,74,.06) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
  transition: background .4s;
}

/* ══════════════════════════════════════════════════════════════
   PWA INSTALL BANNER
══════════════════════════════════════════════════════════════ */
.pwa-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  transform: translateY(-100%); transition: transform .4s;
  pointer-events: none;
}
.pwa-banner.show { transform: translateY(0); pointer-events: all; }
.pwa-banner-inner {
  background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 60%, #000));
  border-bottom: 2px solid var(--gold);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  font-size: .85rem;
}
.pwa-banner-icon { font-size: 1.4rem; flex-shrink: 0; }
.pwa-banner-text { flex: 1; }
.pwa-banner-text strong { display: block; color: var(--gold); font-weight: 700; }
.pwa-banner-text span { color: rgba(255,255,255,.8); font-size: .78rem; }
.pwa-install-btn {
  background: var(--gold); color: #000; font-weight: 700;
  border: none; border-radius: 4px; padding: 6px 14px;
  cursor: pointer; font-size: .8rem; white-space: nowrap;
  font-family: 'Barlow Condensed', sans-serif; letter-spacing: .05em;
}
.pwa-dismiss-btn {
  background: transparent; border: none; color: rgba(255,255,255,.6);
  cursor: pointer; padding: 4px 6px; font-size: .9rem;
}

/* ══════════════════════════════════════════════════════════════
   BADGE TOAST
══════════════════════════════════════════════════════════════ */
.badge-toast {
  position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%);
  z-index: 9998; transition: bottom .5s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none; min-width: 240px;
}
.badge-toast.show { bottom: 24px; }
.badge-toast-inner {
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 80%, var(--gold)));
  border: 2px solid var(--gold);
  border-radius: 12px; padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 20px rgba(255,228,74,.2);
}
.badge-toast-icon { font-size: 2rem; }
.badge-toast-name { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 700; color: var(--gold); letter-spacing: .1em; }
.badge-toast-sub  { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════
   BROWSER COMPAT
══════════════════════════════════════════════════════════════ */
#compat-screen {
  position: fixed; inset: 0; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; flex-direction: column; text-align: center; padding: 40px 24px;
}
#compat-screen.hidden { display: none; }
.compat-inner { max-width: 420px; width: 100%; }
.compat-icon {
  width: 64px; height: 64px; margin: 0 auto 20px;
  border: 2px solid var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1.6rem;
  box-shadow: 0 0 30px rgba(255,228,74,.2);
}
.compat-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 900;
  letter-spacing: .25em; color: var(--gold); margin-bottom: 8px;
  text-shadow: 0 0 30px rgba(255,228,74,.4);
}
.compat-subtitle { font-size: .85rem; color: var(--text-muted); letter-spacing: .15em; margin-bottom: 24px; }
.compat-message { font-size: .95rem; color: var(--text-primary); line-height: 1.7; margin-bottom: 24px; }
.compat-browsers { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.compat-browser-chip {
  padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); color: var(--text-muted);
  font-family: 'Barlow Condensed', sans-serif; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
}
.compat-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.compat-divider-line { flex: 1; height: 1px; background: var(--border); }
.compat-divider-gem  { width: 5px; height: 5px; background: var(--gold-dark); transform: rotate(45deg); }

/* ══════════════════════════════════════════════════════════════
   APP LAYOUT
══════════════════════════════════════════════════════════════ */
#app {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 520px;
  padding: 10px 10px 6px;
  position: relative; z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════════ */
#header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 10px;
  border-bottom: 2px solid var(--gold-dark);
  margin-bottom: 12px;
}
.game-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 900;
  letter-spacing: .3em; color: var(--gold);
  text-shadow: 0 0 20px rgba(255,228,74,.5), 0 2px 0 rgba(0,0,0,.5);
  line-height: 1;
}
.game-subtitle {
  font-size: .65rem; letter-spacing: .2em; color: var(--text-muted);
  text-transform: uppercase; font-family: 'Barlow Condensed', sans-serif;
}
.header-controls { display: flex; gap: 6px; align-items: center; }
.icon-btn {
  width: 32px; height: 32px; background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: all .2s;
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(255,228,74,.06); }
.icon-btn svg { width: 15px; height: 15px; }

/* ══════════════════════════════════════════════════════════════
   SCORE PANEL
══════════════════════════════════════════════════════════════ */
#score-panel {
  width: 100%; display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 8px; margin-bottom: 12px; align-items: center;
}
.score-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 10px;
  display: flex; align-items: center; gap: 8px;
  transition: border-color .3s, box-shadow .3s;
  position: relative; overflow: hidden;
}
.score-card.active {
  border-color: var(--gold);
  box-shadow: 0 0 16px var(--score-active-glow), inset 0 0 20px rgba(255,228,74,.04);
}
.score-disc {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
}
.score-disc.copper {
  background: radial-gradient(circle at 35% 30%, var(--piece-c0), var(--piece-c2));
  box-shadow: 0 3px 8px rgba(0,0,0,.6);
}
.score-disc.slate {
  background: radial-gradient(circle at 35% 30%, var(--piece-s0), var(--piece-s2));
  box-shadow: 0 3px 8px rgba(0,0,0,.6);
}
.score-info { flex: 1; min-width: 0; }
.score-name {
  font-family: 'Barlow Condensed', sans-serif; font-size: .58rem;
  letter-spacing: .15em; color: var(--text-muted); text-transform: uppercase; line-height: 1;
}
.score-num  {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem;
  font-weight: 800; color: var(--text-primary); line-height: 1.1;
}
.score-label { font-size: .5rem; color: var(--text-muted); }
.score-sep  {
  font-family: 'Barlow Condensed', sans-serif; font-size: .75rem; font-weight: 700;
  color: var(--text-muted); text-align: center;
}
.turn-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 6px var(--gold);
  flex-shrink: 0; opacity: 0; transition: opacity .3s;
}
.score-card.active .turn-dot { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   BOARD
══════════════════════════════════════════════════════════════ */
#board-wrap {
  position: relative; width: 100%; aspect-ratio: 1; max-width: 480px;
}
.board-corner {
  position: absolute; width: 18px; height: 18px;
  border-color: var(--gold-dark); border-style: solid; opacity: .7; z-index: 3;
}
.board-corner.tl { top: -2px; left: -2px;   border-width: 2px 0 0 2px; }
.board-corner.tr { top: -2px; right: -2px;   border-width: 2px 2px 0 0; }
.board-corner.bl { bottom: -2px; left: -2px; border-width: 0 0 2px 2px; }
.board-corner.br { bottom: -2px; right: -2px;border-width: 0 2px 2px 0; }

#board-frame {
  position: absolute; inset: -10px;
  background: linear-gradient(135deg, var(--board-frame) 0%, rgba(0,0,0,.8) 40%, color-mix(in srgb, var(--board-frame) 80%, #fff 10%) 60%, rgba(0,0,0,.7) 100%);
  border-radius: 6px;
  box-shadow: var(--shadow-deep), inset 0 0 30px rgba(0,0,0,.4);
  z-index: 0; transition: background .4s;
}
#board-frame::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(88deg, transparent 0px, transparent 3px, rgba(0,0,0,.04) 3px, rgba(0,0,0,.04) 4px);
  border-radius: 6px;
}

#board-wrap::before {
  content: ''; position: absolute; inset: -4px; border-radius: 4px;
  box-shadow: 0 0 40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,228,74,.06), inset 0 0 60px rgba(0,0,0,.4);
  pointer-events: none; z-index: 2;
}

#board-canvas {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%;
  cursor: pointer; border-radius: 2px;
  box-shadow: 0 8px 40px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.5);
}

/* ══════════════════════════════════════════════════════════════
   STATUS BAR
══════════════════════════════════════════════════════════════ */
#status-bar {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 10px; min-height: 26px;
}
#status-text {
  font-family: 'Barlow', sans-serif; font-size: .9rem; font-weight: 500;
  color: var(--text-muted); letter-spacing: .03em;
  text-align: center; transition: color .3s;
}
#status-text.highlight { color: var(--gold); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   AD BANNER CONTAINERS
══════════════════════════════════════════════════════════════ */
.ad-banner-container {
  width: 100%; max-width: 320px; min-height: 50px;
  margin: 8px auto 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.3); border: 1px dashed rgba(255,255,255,.1);
  border-radius: 4px; overflow: hidden;
}
.ad-ingame { max-width: 480px; }

/* ══════════════════════════════════════════════════════════════
   OVERLAYS — shared base
══════════════════════════════════════════════════════════════ */
.overlay {
  position: fixed; inset: 0; background: rgba(0,5,0,.9);
  display: flex; align-items: center; justify-content: center;
  z-index: 300; backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
.overlay.show { opacity: 1; pointer-events: all; }

.dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: 6px; padding: 32px 36px;
  text-align: center; max-width: 340px; width: 92%;
  position: relative;
  box-shadow: var(--shadow-deep), 0 0 40px rgba(255,228,74,.06);
  transform: translateY(10px); transition: transform .4s;
  max-height: 90vh; overflow-y: auto;
}
.overlay.show .dialog { transform: translateY(0); }

.dialog::before, .dialog::after,
.dialog .d-corner-br, .dialog .d-corner-bl {
  content: ''; position: absolute; width: 14px; height: 14px;
  border-color: var(--gold-dark); border-style: solid;
}
.dialog::before  { top:8px; left:8px;   border-width:1px 0 0 1px; }
.dialog::after   { top:8px; right:8px;  border-width:1px 1px 0 0; }
.dialog .d-corner-br { bottom:8px; right:8px; border-width:0 1px 1px 0; }
.dialog .d-corner-bl { bottom:8px; left:8px;  border-width:0 0 1px 1px; }

.dialog-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 800;
  color: var(--gold); letter-spacing: .15em; margin-bottom: 6px;
  text-shadow: 0 0 20px rgba(255,228,74,.4); text-transform: uppercase;
}
.dialog-subtitle { font-size: .88rem; color: var(--text-muted); margin-bottom: 20px; }

.dialog-close-icon {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 50%; width: 24px; height: 24px;
  cursor: pointer; color: var(--text-muted);
  font-size: .7rem; display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.dialog-close-icon:hover { border-color: var(--gold); color: var(--gold); }

/* ── Game Over ─────────────────────────────────────────────── */
.result-discs { display: flex; justify-content: center; gap: 20px; margin-bottom: 16px; align-items: center; }
.result-item  { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.result-disc-large { width: 44px; height: 44px; border-radius: 50%; }
.result-disc-large.copper { background: radial-gradient(circle at 35% 30%, var(--piece-c0), var(--piece-c2)); box-shadow: 0 4px 12px rgba(0,0,0,.6); }
.result-disc-large.slate  { background: radial-gradient(circle at 35% 30%, var(--piece-s0), var(--piece-s2)); box-shadow: 0 4px 12px rgba(0,0,0,.6); }
.result-score-num { font-family: 'Barlow Condensed', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.result-vs { font-family: 'Barlow Condensed', sans-serif; font-size: .8rem; font-weight: 700; color: var(--text-muted); letter-spacing: .2em; }
.winner-badge { font-size: .65rem; font-weight: 700; color: var(--gold); letter-spacing: .1em; font-family: 'Barlow Condensed', sans-serif; }
.go-points-earned {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 700;
  color: var(--gold); margin-bottom: 12px; letter-spacing: .1em;
  text-shadow: 0 0 10px rgba(255,228,74,.5);
}

/* ── Buttons ───────────────────────────────────────────────── */
.primary-btn {
  display: block; width: 100%; padding: 11px 20px; margin-bottom: 10px;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-primary); cursor: pointer; font-size: .85rem; font-weight: 600;
  font-family: 'Barlow Condensed', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  transition: all .2s; position: relative; overflow: hidden;
}
.primary-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(255,228,74,.06); }
.primary-btn:last-child { margin-bottom: 0; }
.go-lobby-btn { border-color: rgba(255,228,74,.3); color: var(--text-muted); }
.go-lobby-btn:hover { border-color: var(--gold); color: var(--gold); }
.quit-danger-btn { border-color: rgba(220,50,50,.3); color: rgba(220,100,100,.8); }
.quit-danger-btn:hover { border-color: rgba(220,50,50,.8); color: rgba(220,50,50,1); background: rgba(220,50,50,.06); }

/* ── Pause ─────────────────────────────────────────────────── */
.pause-icon-wrap {
  width: 64px; height: 64px; margin: 0 auto 20px;
  border: 2px solid var(--border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.pause-icon-wrap svg { width: 32px; height: 32px; fill: var(--text-muted); }
.pause-assign-btn { border-color: rgba(255,228,74,.4); color: var(--gold-dark); }
.pause-assign-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ── Assign ────────────────────────────────────────────────── */
.assign-discs-preview {
  display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 24px;
}
.assign-disc-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.assign-disc {
  width: 44px; height: 44px; border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,.6);
}
.assign-disc.copper { background: radial-gradient(circle at 35% 30%, var(--piece-c0), var(--piece-c2)); }
.assign-disc.slate  { background: radial-gradient(circle at 35% 30%, var(--piece-s0), var(--piece-s2)); }
.assign-disc-label { font-size: .65rem; color: var(--text-muted); font-family: 'Barlow Condensed', sans-serif; letter-spacing: .1em; }
.assign-role-badge {
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 12px;
  font-size: .6rem; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .1em;
  color: var(--text-muted); text-transform: uppercase;
}
.assign-vs-sep {
  font-family: 'Barlow Condensed', sans-serif; font-size: .7rem; font-weight: 700;
  color: var(--text-muted); letter-spacing: .2em;
}
.assign-btn-row { display: flex; gap: 12px; justify-content: center; }
.assign-cancel-btn {
  flex: 1; padding: 10px; background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-muted); cursor: pointer; font-size: .8rem;
  font-family: 'Barlow Condensed', sans-serif; letter-spacing: .1em;
  transition: all .2s;
}
.assign-cancel-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
.assign-confirm-btn {
  flex: 1; padding: 10px; background: var(--gold);
  border: 1px solid var(--gold); border-radius: var(--radius);
  color: #000; cursor: pointer; font-size: .8rem; font-weight: 700;
  font-family: 'Barlow Condensed', sans-serif; letter-spacing: .1em;
  transition: all .2s;
}
.assign-confirm-btn:hover { background: var(--gold-light); border-color: var(--gold-light); }
.quit-confirm-btn { background: rgba(200,40,40,.8); border-color: rgba(200,40,40,.8); color: #fff; }
.quit-confirm-btn:hover { background: rgba(220,50,50,1); }
.quit-dialog-title { color: rgba(220,80,80,.9) !important; }

/* ── Assign Confirmed ──────────────────────────────────────── */
.assign-confirmed-icon { font-size: 2rem; margin-bottom: 8px; }
.assign-confirmed-roles {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-bottom: 20px;
}
.acr-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.acr-disc { width: 32px; height: 32px; border-radius: 50%; }
.acr-disc.copper { background: radial-gradient(circle at 35% 30%, var(--piece-c0), var(--piece-c2)); }
.acr-disc.slate  { background: radial-gradient(circle at 35% 30%, var(--piece-s0), var(--piece-s2)); }
.acr-name { font-size: .65rem; color: var(--text-muted); font-family: 'Barlow Condensed', sans-serif; }
.acr-you  { color: var(--gold); font-weight: 700; }
.acr-sep  { font-family: 'Barlow Condensed', sans-serif; font-size: .7rem; color: var(--text-muted); letter-spacing: .2em; }
.assign-confirmed-btns { display: flex; gap: 10px; }
.acb-btn {
  flex: 1; padding: 10px 8px; background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: all .2s;
}
.acb-btn:hover { border-color: var(--gold); background: rgba(255,228,74,.06); }
.acb-icon { font-size: 1rem; color: var(--gold); }
.acb-label { font-family: 'Barlow Condensed', sans-serif; font-size: .8rem; font-weight: 700; color: var(--text-primary); letter-spacing: .1em; }
.acb-sub   { font-size: .6rem; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════
   LEADERBOARD
══════════════════════════════════════════════════════════════ */
.lb-dialog { max-width: 380px; padding: 28px 24px; }
.lb-body { margin-top: 8px; }

.lb-profile-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px; margin-bottom: 14px;
}
.lb-avatar {
  width: 48px; height: 48px; background: var(--surface);
  border: 2px solid var(--gold-dark); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; flex-shrink: 0;
}
.lb-profile-info { flex: 1; min-width: 0; }
.lb-profile-name { font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--text-primary); letter-spacing: .08em; }
.lb-badge-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.lb-badge-icon { font-size: .9rem; }
.lb-badge-name { font-size: .7rem; font-weight: 700; color: var(--gold); font-family: 'Barlow Condensed', sans-serif; letter-spacing: .08em; }
.lb-points { font-size: .7rem; color: var(--text-muted); margin-left: auto; }
.lb-progress-bar-wrap {
  height: 4px; background: rgba(255,228,74,.1); border-radius: 2px; margin: 4px 0;
}
.lb-progress-bar { height: 100%; background: var(--gold); border-radius: 2px; transition: width .6s; }
.lb-next-tier { font-size: .62rem; color: var(--text-muted); }

.lb-stats-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 14px;
}
.lb-stat {
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 6px; text-align: center;
}
.lb-stat-num { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--text-primary); }
.lb-stat-lbl { display: block; font-size: .55rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }

.lb-badges-section { margin-bottom: 14px; }
.lb-section-title { font-family: 'Barlow Condensed', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .2em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; }
.lb-badges-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.lb-badge-item {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 6px; text-align: center; transition: all .2s;
}
.lb-badge-item.earned { border-color: var(--gold-dark); }
.lb-badge-item.locked { opacity: .5; }
.lb-badge-item-icon { display: block; font-size: 1.4rem; margin-bottom: 4px; }
.lb-badge-item-name { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: .65rem; font-weight: 700; color: var(--text-primary); letter-spacing: .06em; }
.lb-badge-item-pts { display: block; font-size: .55rem; color: var(--text-muted); margin-top: 2px; }

.lb-history-section { margin-bottom: 14px; }
.lb-history-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid rgba(255,228,74,.06); font-size: .8rem;
}
.lb-history-icon { font-size: .9rem; }
.lb-history-opp { flex: 1; color: var(--text-primary); }
.lb-history-pts { color: var(--gold); font-weight: 700; font-family: 'Barlow Condensed', sans-serif; font-size: .8rem; }
.lb-history-date { color: var(--text-muted); font-size: .7rem; }

.lb-firebase-note {
  font-size: .7rem; color: var(--text-muted); text-align: center;
  padding: 10px; background: var(--panel); border: 1px dashed rgba(255,228,74,.2); border-radius: 6px;
  line-height: 1.5;
}
.lb-firebase-note em { color: var(--gold); font-style: normal; }
.lb-empty { font-size: .8rem; color: var(--text-muted); padding: 20px 0; text-align: center; }

/* ══════════════════════════════════════════════════════════════
   PROFILE SETUP
══════════════════════════════════════════════════════════════ */
.profile-setup-dialog { max-width: 340px; }
.profile-setup-body { margin-bottom: 20px; text-align: left; }
.ps-field { margin-bottom: 16px; }
.ps-label { display: block; font-size: .7rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: var(--text-muted); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 6px; }
.ps-input {
  width: 100%; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-primary); font-size: .9rem; font-family: 'Barlow', sans-serif;
  outline: none; transition: border-color .2s;
}
.ps-input:focus { border-color: var(--gold); }
.ps-input::placeholder { color: var(--text-muted); }
.profile-avatar-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--border);
  cursor: pointer; font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
  transition: all .2s; line-height: 1;
}
.avatar-btn:hover { border-color: var(--gold-dark); }
.avatar-btn.selected { border-color: var(--gold); background: rgba(255,228,74,.1); }
.ps-badge-info {
  font-size: .78rem; color: var(--text-muted); padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  line-height: 1.5;
}
.ps-badge-info strong { color: var(--gold); }
.profile-setup-btns { display: flex; gap: 10px; }

/* ══════════════════════════════════════════════════════════════
   LOBBY SCREEN
══════════════════════════════════════════════════════════════ */
#lobby-screen {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto;
  transition: opacity .4s;
}
#lobby-screen.hidden { display: none; }
#lobby-screen::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(30,107,30,.3) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(255,228,74,.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 0% 50%, rgba(30,107,30,.1) 0%, transparent 50%);
  pointer-events: none;
}

.lobby-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  padding: 24px 20px 32px;
  display: flex; flex-direction: column; gap: 0;
}

.lobby-custom-float {
  position: absolute; z-index: 10;
  width: 38px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.lobby-custom-float:hover { border-color: var(--gold); color: var(--gold); }
.lobby-custom-float svg { width: 16px; height: 16px; }

/* Brand */
.lobby-brand { text-align: center; margin-bottom: 12px; }
.lobby-flag-strip {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-bottom: 8px;
}
.flag-stripe {
  height: 4px; width: 60px; border-radius: 2px;
}
.flag-stripe.green { background: var(--green-light); box-shadow: 0 0 8px var(--green-light); }
.flag-stripe.gold  { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.flag-star { color: var(--gold); font-size: 1rem; text-shadow: 0 0 8px var(--gold); }
.lobby-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 3.2rem; font-weight: 900;
  letter-spacing: .25em; color: var(--gold); line-height: .9;
  text-shadow: 0 0 40px rgba(255,228,74,.5), 0 4px 0 rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.4);
}
.lobby-subtitle {
  font-family: 'Barlow Condensed', sans-serif; font-size: .85rem; font-weight: 600;
  letter-spacing: .3em; color: var(--green-light); text-transform: uppercase; margin-top: 4px;
}
.lobby-tagline {
  font-size: .72rem; color: var(--text-muted); margin-top: 4px; letter-spacing: .1em;
}

/* Profile badge display */
.profile-badge-display {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 12px; margin-bottom: 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 20px;
  font-size: .75rem; color: var(--text-muted); min-height: 32px;
  transition: border-color .2s;
}
.profile-badge-display:hover { border-color: var(--gold-dark); }
.profile-badge-icon { font-size: 1rem; }
.profile-badge-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: var(--text-primary); letter-spacing: .08em; }
.profile-points { color: var(--gold); font-weight: 700; font-family: 'Barlow Condensed', sans-serif; font-size: .8rem; }
.profile-next { color: var(--text-muted); font-size: .68rem; }

.lobby-ornament {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 14px;
}
.lobby-ornament-line { flex: 1; height: 1px; background: var(--border); }
.lobby-ornament-diamond { color: var(--gold-dark); font-size: .7rem; }

/* Sections */
.lobby-section { margin-bottom: 14px; }
.lobby-section-label {
  font-family: 'Barlow Condensed', sans-serif; font-size: .6rem; font-weight: 700;
  letter-spacing: .25em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px;
}

.lobby-mode-grid { }
.lobby-mode-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; color: var(--text-muted); transition: all .2s;
}
.lobby-mode-btn.selected, .lobby-mode-btn:hover {
  border-color: var(--gold); color: var(--text-primary); background: rgba(255,228,74,.06);
}
.lobby-mode-icon { font-size: 1.4rem; }
.lobby-mode-label {
  font-family: 'Barlow Condensed', sans-serif; font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: inherit;
}
.lobby-mode-desc { font-size: .6rem; color: var(--text-muted); text-align: center; }
.lobby-mode-btn.selected .lobby-mode-desc { color: var(--text-muted); }

.lobby-diff-row { }
.lobby-diff-btn {
  padding: 8px 4px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; font-size: .75rem; font-weight: 700; color: var(--text-muted);
  font-family: 'Barlow Condensed', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  transition: all .2s; text-align: center;
}
.lobby-diff-btn.selected, .lobby-diff-btn:hover { border-color: var(--gold); color: var(--gold); }
.lobby-diff-hard.selected { border-color: #ff4444; color: #ff6666; }

/* Theme grid */
.lobby-theme-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 6px;
}
.lobby-theme-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 6px 4px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: all .2s; color: var(--text-muted);
}
.lobby-theme-btn.selected, .lobby-theme-btn:hover { border-color: var(--gold); }
.theme-preview {
  width: 100%; aspect-ratio: 1; border-radius: 3px; overflow: hidden;
  display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(4,1fr);
}
.theme-cell { }
.theme-name { font-size: .55rem; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; text-align: center; }

/* Actions */
.lobby-actions { margin-top: 4px; }
.lobby-play-btn {
  width: 100%; padding: 14px; margin-bottom: 8px;
  background: linear-gradient(135deg, var(--green), var(--green-light));
  border: 2px solid var(--gold-dark); border-radius: var(--radius);
  color: var(--gold); cursor: pointer; font-size: 1.1rem; font-weight: 900;
  font-family: 'Barlow Condensed', sans-serif; letter-spacing: .2em; text-transform: uppercase;
  transition: all .2s;
  box-shadow: 0 4px 20px rgba(30,107,30,.4), 0 2px 0 rgba(0,0,0,.3);
}
.lobby-play-btn:hover {
  background: linear-gradient(135deg, var(--green-light), var(--green));
  border-color: var(--gold); color: var(--gold-light);
  box-shadow: 0 6px 30px rgba(30,107,30,.6), 0 0 20px rgba(255,228,74,.2);
  transform: translateY(-1px);
}
.lobby-play-btn:active { transform: translateY(0); }

.lobby-secondary-actions {
  display: flex; gap: 8px; justify-content: center;
}
.lobby-secondary-btn {
  padding: 8px 16px; background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; font-size: .75rem; font-weight: 700;
  font-family: 'Barlow Condensed', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); transition: all .2s;
}
.lobby-secondary-btn:hover { border-color: var(--gold); color: var(--gold); }

.lobby-rules-hint {
  font-size: .7rem; color: var(--text-muted); text-align: center;
  padding: 10px 12px; margin-top: 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  line-height: 1.5;
}
.lobby-rules-hint strong { color: var(--gold); }

/* Ad in lobby */
.ad-banner-container { margin-top: 10px; }

/* ══════════════════════════════════════════════════════════════
   CUSTOM THEME MODAL
══════════════════════════════════════════════════════════════ */
.ctm-dialog { max-width: 340px; padding: 24px 22px; }
.ctm-live-preview {
  margin-bottom: 16px; display: flex; justify-content: center;
}
.ctm-preview-board {
  width: 100px; height: 100px; border: 2px solid var(--border); border-radius: 3px;
}
.ctm-preview-grid {
  display: grid; grid-template-columns: repeat(8,1fr); grid-template-rows: repeat(8,1fr);
  width: 100%; height: 100%;
}
.ctm-cell { position: relative; }
.ctm-cell.piece-c::after, .ctm-cell.piece-s::after {
  content: ''; position: absolute; inset: 15%; border-radius: 50%;
}
.ctm-cell.piece-c::after { background: radial-gradient(circle at 35% 30%, var(--ctm-pc-light, #ffe44a), var(--ctm-pc-dark, #6a5000)); }
.ctm-cell.piece-s::after { background: radial-gradient(circle at 35% 30%, var(--ctm-ps-light, #4a4a4a), var(--ctm-ps-dark, #080808)); }

.ctm-controls { display: flex; gap: 16px; margin-bottom: 14px; }
.ctm-group { flex: 1; }
.ctm-group-label { font-size: .6rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .2em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; }
.ctm-swatches { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.ctm-swatch-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ctm-swatch-item span { font-size: .55rem; color: var(--text-muted); }
.ctm-swatch-wrap { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border); position: relative; overflow: hidden; cursor: pointer; }
.ctm-swatch-wrap input[type=color] { position: absolute; inset: -4px; border: none; background: none; cursor: pointer; opacity: 0; width: 200%; height: 200%; }
.ctm-swatch-wrap::before { content: ''; position: absolute; inset: 0; background: var(--border-val, #888); }
.ctm-swatch-shine { position: absolute; top: 2px; left: 4px; width: 8px; height: 5px; background: rgba(255,255,255,.3); border-radius: 50%; pointer-events: none; }
.ctm-pieces { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
.ctm-piece-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ctm-piece-item span { font-size: .55rem; color: var(--text-muted); }
.ctm-piece-orb { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border); position: relative; overflow: hidden; cursor: pointer; }
.ctm-piece-orb input[type=color] { position: absolute; inset: -4px; opacity: 0; width: 200%; height: 200%; cursor: pointer; }
.ctm-divider { width: 1px; background: var(--border); margin: 0 4px; }

.ctm-presets-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ctm-presets-label { font-size: .6rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .2em; color: var(--text-muted); text-transform: uppercase; white-space: nowrap; }
.ctm-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.ctm-preset {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--border); cursor: pointer; display: flex;
  transition: border-color .2s;
}
.ctm-preset:hover { border-color: var(--gold); }
.ctm-preset span { flex: 1; }

.ctm-footer { display: flex; justify-content: center; }
.ctm-btn-apply {
  padding: 10px 24px; background: var(--gold);
  border: none; border-radius: var(--radius);
  color: #000; cursor: pointer; font-size: .85rem; font-weight: 800;
  font-family: 'Barlow Condensed', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  transition: all .2s; display: flex; align-items: center; gap: 6px;
}
.ctm-btn-apply:hover { background: var(--gold-light); }
.ctm-btn-apply span { color: inherit; }

/* ══════════════════════════════════════════════════════════════
   HIDDEN
══════════════════════════════════════════════════════════════ */
.hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ══════════════════════════════════════════════════════════════
   MOBILE ADJUSTMENTS
══════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .lobby-title { font-size: 2.6rem; }
  .lobby-inner { padding: 16px 14px 24px; }
  .dialog { padding: 24px 20px; }
  .lobby-theme-grid { grid-template-columns: repeat(4,1fr); }
  .score-num { font-size: 1.2rem; }
  #header { margin-bottom: 8px; }
  .icon-btn { width: 28px; height: 28px; }
  .icon-btn svg { width: 13px; height: 13px; }
}

@media (max-height: 640px) {
  .lobby-title { font-size: 2.2rem; }
  .lobby-section { margin-bottom: 10px; }
  .lobby-play-btn { padding: 10px; }
  .lobby-brand { margin-bottom: 6px; }
  .lobby-ornament { margin: 6px 0 10px; }
}