/* ══════════════════════════════════════════════════════════════════════════
   Reset & Base
══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  transition: background 0.4s, color 0.4s;
  overflow-x: hidden;
}
button { cursor: pointer; border: none; font-family: inherit; }
input  { font-family: inherit; }

/* ══════════════════════════════════════════════════════════════════════════
   Theme Variables
══════════════════════════════════════════════════════════════════════════ */

/* ── Classic ── */
[data-theme="classic"] {
  --bg:          #faf8ef;
  --board-bg:    #bbada0;
  --cell-bg:     #cdc1b4;
  --text:        #776e65;
  --text-light:  #f9f6f2;
  --score-bg:    #bbada0;
  --score-text:  #f9f6f2;
  --chat-bg:     rgba(237,224,200,0.97);
  --chat-border: #c9b99a;
  --chat-mine:   #edc22e;
  --chat-theirs: #f2b179;
  --input-bg:    #f9f6f2;
  --btn-bg:      #8f7a66;
  --btn-text:    #f9f6f2;
  --title-color: #776e65;
  --heart-color: #f65e3b;
  --hint-color:  #a09280;
  --overlay-bg:  rgba(238,228,218,.73);
  --nav-bg:      rgba(250,248,239,0.90);
  --nav-border:  rgba(187,173,160,0.45);
}

/* ── Dark Night ── */
[data-theme="dark"] {
  --bg:          #0f0f1a;
  --board-bg:    #1a1a2e;
  --cell-bg:     #16213e;
  --text:        #c9d1d9;
  --text-light:  #ffffff;
  --score-bg:    #16213e;
  --score-text:  #c9d1d9;
  --chat-bg:     rgba(18,18,30,0.97);
  --chat-border: #2a2a4a;
  --chat-mine:   #6c63ff;
  --chat-theirs: #3f5efb;
  --input-bg:    #1a1a2e;
  --btn-bg:      #6c63ff;
  --btn-text:    #fff;
  --title-color: #f9d423;
  --heart-color: #ff6b6b;
  --hint-color:  #555;
  --overlay-bg:  rgba(15,15,26,.82);
  --nav-bg:      rgba(15,15,26,0.90);
  --nav-border:  rgba(42,42,74,0.6);
}

/* ── Purple Dream ── */
[data-theme="purple"] {
  --bg:          #1a0533;
  --board-bg:    #2d0a4e;
  --cell-bg:     #3d1464;
  --text:        #e8d5f5;
  --text-light:  #fff;
  --score-bg:    #3d1464;
  --score-text:  #e8d5f5;
  --chat-bg:     rgba(18,0,42,0.97);
  --chat-border: #4a1580;
  --chat-mine:   #c58df0;
  --chat-theirs: #8b4dc0;
  --input-bg:    #2d0a4e;
  --btn-bg:      #8b4dc0;
  --btn-text:    #fff;
  --title-color: #d4a5f5;
  --heart-color: #ff6b9d;
  --hint-color:  #7a5a8a;
  --overlay-bg:  rgba(26,5,51,.82);
  --nav-bg:      rgba(26,5,51,0.90);
  --nav-border:  rgba(74,21,128,0.5);
}

/* ── Ocean Deep ── */
[data-theme="ocean"] {
  --bg:          #001524;
  --board-bg:    #003153;
  --cell-bg:     #004677;
  --text:        #b0e0e6;
  --text-light:  #001524;
  --score-bg:    #004677;
  --score-text:  #b0e0e6;
  --chat-bg:     rgba(0,14,26,0.97);
  --chat-border: #004e7c;
  --chat-mine:   #00b4d8;
  --chat-theirs: #48cae4;
  --input-bg:    #003153;
  --btn-bg:      #0077b6;
  --btn-text:    #fff;
  --title-color: #90e0ef;
  --heart-color: #48cae4;
  --hint-color:  #2a6080;
  --overlay-bg:  rgba(0,21,36,.82);
  --nav-bg:      rgba(0,21,36,0.90);
  --nav-border:  rgba(0,78,124,0.5);
}

/* ── Neon Green ── */
[data-theme="neon"] {
  --bg:          #141414;
  --board-bg:    #1c1c1c;
  --cell-bg:     #252525;
  --text:        #39ff14;
  --text-light:  #141414;
  --score-bg:    #1c1c1c;
  --score-text:  #39ff14;
  --chat-bg:     rgba(18,18,18,0.97);
  --chat-border: rgba(57,255,20,0.18);
  --chat-mine:   #39ff14;
  --chat-theirs: #21a600;
  --input-bg:    #1c1c1c;
  --btn-bg:      #39ff14;
  --btn-text:    #141414;
  --title-color: #39ff14;
  --heart-color: #39ff14;
  --hint-color:  #2a6b0f;
  --overlay-bg:  rgba(20,20,20,.88);
  --nav-bg:      rgba(20,20,20,0.92);
  --nav-border:  rgba(57,255,20,0.18);
}

/* ── Sunset Glow ── */
[data-theme="sunset"] {
  --bg:          #1a0a00;
  --board-bg:    #3d1300;
  --cell-bg:     #5c2000;
  --text:        #ffd8b1;
  --text-light:  #1a0a00;
  --score-bg:    #5c2000;
  --score-text:  #ffd8b1;
  --chat-bg:     rgba(15,5,0,0.97);
  --chat-border: #7d2e00;
  --chat-mine:   #ff8c00;
  --chat-theirs: #fb5607;
  --input-bg:    #3d1300;
  --btn-bg:      #ff6b35;
  --btn-text:    #fff;
  --title-color: #ffa500;
  --heart-color: #ff006e;
  --hint-color:  #7d4a20;
  --overlay-bg:  rgba(26,10,0,.82);
  --nav-bg:      rgba(26,10,0,0.90);
  --nav-border:  rgba(125,46,0,0.5);
}

/* ══════════════════════════════════════════════════════════════════════════
   Tile Colors
══════════════════════════════════════════════════════════════════════════ */

/* Neon Green */
[data-theme="neon"] .tv-2    { background:#1e1e1e; color:#39ff14; }
[data-theme="neon"] .tv-4    { background:#222;    color:#39ff14; }
[data-theme="neon"] .tv-8    { background:#252525; color:#39ff14; }
[data-theme="neon"] .tv-16   { background:#282828; color:#39ff14; }
[data-theme="neon"] .tv-32   { background:#2b2b2b; color:#39ff14; }
[data-theme="neon"] .tv-64   { background:#2e2e2e; color:#39ff14; }
[data-theme="neon"] .tv-128  { background:#303030; color:#39ff14; font-size:.85em; }
[data-theme="neon"] .tv-256  { background:#333;    color:#39ff14; font-size:.85em; }
[data-theme="neon"] .tv-512  { background:#363636; color:#39ff14; font-size:.85em; }
[data-theme="neon"] .tv-1024 { background:#383838; color:#39ff14; font-size:.72em; }
[data-theme="neon"] .tv-2048 { background:#39ff14; color:#141414; font-size:.72em; }
[data-theme="neon"] .tv-super{ background:#39ff14; color:#141414; font-size:.65em; }

/* Neon glow on tile numbers */
[data-theme="neon"] .tile-inner {
  text-shadow: 0 0 8px #39ff14, 0 0 18px rgba(57,255,20,0.6);
}
[data-theme="neon"] .tv-2048 ,
[data-theme="neon"] .tv-super {
  text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* Classic */
[data-theme="classic"] .tv-2    { background:#eee4da; color:#776e65; }
[data-theme="classic"] .tv-4    { background:#ede0c8; color:#776e65; }
[data-theme="classic"] .tv-8    { background:#f2b179; color:#f9f6f2; }
[data-theme="classic"] .tv-16   { background:#f59563; color:#f9f6f2; }
[data-theme="classic"] .tv-32   { background:#f67c5f; color:#f9f6f2; }
[data-theme="classic"] .tv-64   { background:#f65e3b; color:#f9f6f2; }
[data-theme="classic"] .tv-128  { background:#edcf72; color:#f9f6f2; font-size:.85em; }
[data-theme="classic"] .tv-256  { background:#edcc61; color:#f9f6f2; font-size:.85em; }
[data-theme="classic"] .tv-512  { background:#edc850; color:#f9f6f2; font-size:.85em; }
[data-theme="classic"] .tv-1024 { background:#edc53f; color:#f9f6f2; font-size:.72em; }
[data-theme="classic"] .tv-2048 { background:#edc22e; color:#f9f6f2; font-size:.72em; }
[data-theme="classic"] .tv-super{ background:#3c3a32; color:#f9f6f2; font-size:.65em; }

/* Dark Night */
[data-theme="dark"] .tv-2    { background:#1e2a3a; color:#7fb3d3; }
[data-theme="dark"] .tv-4    { background:#1e3a2a; color:#7fd3a3; }
[data-theme="dark"] .tv-8    { background:#e65c00; color:#fff; }
[data-theme="dark"] .tv-16   { background:#f9d423; color:#1a1a2e; }
[data-theme="dark"] .tv-32   { background:#ff6b6b; color:#fff; }
[data-theme="dark"] .tv-64   { background:#ee0979; color:#fff; }
[data-theme="dark"] .tv-128  { background:#6c63ff; color:#fff; font-size:.85em; }
[data-theme="dark"] .tv-256  { background:#3f5efb; color:#fff; font-size:.85em; }
[data-theme="dark"] .tv-512  { background:#00b4db; color:#fff; font-size:.85em; }
[data-theme="dark"] .tv-1024 { background:#43e97b; color:#1a1a2e; font-size:.72em; }
[data-theme="dark"] .tv-2048 { background:#f9d423; color:#1a1a2e; font-size:.72em; }
[data-theme="dark"] .tv-super{ background:#fff; color:#1a1a2e; font-size:.65em; }

/* Purple Dream */
[data-theme="purple"] .tv-2    { background:#4a1580; color:#d4b8ff; }
[data-theme="purple"] .tv-4    { background:#6b2fa0; color:#fff; }
[data-theme="purple"] .tv-8    { background:#8b4dc0; color:#fff; }
[data-theme="purple"] .tv-16   { background:#a86dd9; color:#fff; }
[data-theme="purple"] .tv-32   { background:#c58df0; color:#2d0a4e; }
[data-theme="purple"] .tv-64   { background:#d4a5f5; color:#2d0a4e; }
[data-theme="purple"] .tv-128  { background:#e8c8ff; color:#2d0a4e; font-size:.85em; }
[data-theme="purple"] .tv-256  { background:#ff6b9d; color:#fff; font-size:.85em; }
[data-theme="purple"] .tv-512  { background:#ff3d7f; color:#fff; font-size:.85em; }
[data-theme="purple"] .tv-1024 { background:#ff9f43; color:#2d0a4e; font-size:.72em; }
[data-theme="purple"] .tv-2048 { background:#ffd700; color:#2d0a4e; font-size:.72em; }
[data-theme="purple"] .tv-super{ background:#fff; color:#2d0a4e; font-size:.65em; }

/* Ocean Deep */
[data-theme="ocean"] .tv-2    { background:#004e7c; color:#90e0ef; }
[data-theme="ocean"] .tv-4    { background:#006d9c; color:#fff; }
[data-theme="ocean"] .tv-8    { background:#0092b2; color:#fff; }
[data-theme="ocean"] .tv-16   { background:#00b4d8; color:#001524; }
[data-theme="ocean"] .tv-32   { background:#48cae4; color:#001524; }
[data-theme="ocean"] .tv-64   { background:#90e0ef; color:#001524; }
[data-theme="ocean"] .tv-128  { background:#ade8f4; color:#001524; font-size:.85em; }
[data-theme="ocean"] .tv-256  { background:#caf0f8; color:#001524; font-size:.85em; }
[data-theme="ocean"] .tv-512  { background:#00f5d4; color:#001524; font-size:.85em; }
[data-theme="ocean"] .tv-1024 { background:#7b2d8b; color:#fff; font-size:.72em; }
[data-theme="ocean"] .tv-2048 { background:#ffd700; color:#001524; font-size:.72em; }
[data-theme="ocean"] .tv-super{ background:#fff; color:#001524; font-size:.65em; }

/* Sunset Glow */
[data-theme="sunset"] .tv-2    { background:#7d2e00; color:#ffd8b1; }
[data-theme="sunset"] .tv-4    { background:#a03800; color:#fff; }
[data-theme="sunset"] .tv-8    { background:#c44f00; color:#fff; }
[data-theme="sunset"] .tv-16   { background:#e6690a; color:#fff; }
[data-theme="sunset"] .tv-32   { background:#ff8c00; color:#1a0a00; }
[data-theme="sunset"] .tv-64   { background:#ffa500; color:#1a0a00; }
[data-theme="sunset"] .tv-128  { background:#ffbe0b; color:#1a0a00; font-size:.85em; }
[data-theme="sunset"] .tv-256  { background:#fb5607; color:#fff; font-size:.85em; }
[data-theme="sunset"] .tv-512  { background:#ff006e; color:#fff; font-size:.85em; }
[data-theme="sunset"] .tv-1024 { background:#8338ec; color:#fff; font-size:.72em; }
[data-theme="sunset"] .tv-2048 { background:#3a86ff; color:#fff; font-size:.72em; }
[data-theme="sunset"] .tv-super{ background:#fff; color:#1a0a00; font-size:.65em; }

/* ══════════════════════════════════════════════════════════════════════════
   Floating Nav
══════════════════════════════════════════════════════════════════════════ */
#floating-nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#nav-pill {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--nav-border);
  border-radius: 60px;
  padding: 10px 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
  white-space: nowrap;
}

#nav-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--title-color);
  letter-spacing: -1px;
  cursor: default;
  user-select: none;
  line-height: 1;
  transition: color 0.4s;
}
#nav-title #heart {
  color: var(--heart-color);
  font-size: 0.6em;
  transition: color 0.4s;
  animation: heartbeat 1.8s ease-in-out infinite;
}

#nav-score-area {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.nav-score-label {
  font-size: .52rem;
  letter-spacing: .1em;
  opacity: .55;
  color: var(--text);
}
.nav-score-val {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}
.nav-score-sep {
  width: 1px;
  height: 22px;
  background: var(--nav-border);
}

#nav-toggle {
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 4px 2px;
  transition: opacity 0.2s;
}
#nav-toggle:hover { opacity: .6; }
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: background 0.4s;
}

#nav-dropdown {
  margin-top: 10px;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--nav-border);
  border-radius: 18px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  animation: slide-down 0.18s ease;
}
#nav-dropdown.hidden { display: none; }

.nav-drop-btn {
  background: none;
  color: var(--text);
  padding: 10px 16px;
  border-radius: 12px;
  font-size: .88rem;
  font-weight: 500;
  text-align: left;
  transition: background 0.15s;
}
.nav-drop-btn:hover { background: var(--cell-bg); }

.nav-drop-sep {
  height: 1px;
  background: var(--nav-border);
  margin: 4px 0;
}

#player-tag {
  padding: 7px 16px;
  font-size: .75rem;
  color: var(--hint-color);
}

/* ══════════════════════════════════════════════════════════════════════════
   Game Center
══════════════════════════════════════════════════════════════════════════ */
#game-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 100px 16px 24px;
  gap: 12px;
}

/* ── Board ────────────────────────────────────────────────────────────── */
#board-wrap {
  position: relative;
}
#board {
  position: relative;
  background: var(--board-bg);
  border-radius: 12px;
  padding: 12px;
  transition: background 0.4s;
  width: min(440px, calc(100vw - 32px));
  aspect-ratio: 1;
  touch-action: none;
  user-select: none;
}

.bg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  height: 100%;
}
.bg-cell {
  background: var(--cell-bg);
  border-radius: 6px;
  transition: background 0.4s;
}

#tile-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
}

/* ── Tiles ────────────────────────────────────────────────────────────── */
.tile {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 800;
  font-size: 1.6rem;
  /* Match reference: 100 ms, ease-in-out — tiles accelerate then decelerate */
  transition: transform 0.1s ease-in-out;
  will-change: transform;
  z-index: 10;
}
.tile-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 800;
  font-size: inherit;
}
/* New tile: delayed so it appears after the slide settles */
.tile.is-new    .tile-inner { animation: tile-appear 0.2s ease 0.1s both; }
/* Merged tile: spring overshoot to feel satisfying (matches reference) */
.tile.is-merged .tile-inner { animation: tile-merge  0.2s cubic-bezier(.34,1.56,.64,1) both; }

/* ── Board Overlays ──────────────────────────────────────────────────── */
.board-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  z-index: 100;
  backdrop-filter: blur(2px);
  animation: fade-in 0.3s ease;
}
.board-overlay.hidden { display: none; }
.overlay-content { text-align: center; }
.overlay-title {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.25;
}
.win-num { color: var(--heart-color); font-size: 1.2em; }
.overlay-score { font-size: 1.05rem; margin-bottom: 18px; color: var(--text); }
.overlay-buttons { display: flex; gap: 10px; justify-content: center; }

/* ── Hint ─────────────────────────────────────────────────────────────── */
#hint {
  font-size: .72rem;
  color: var(--hint-color);
  text-align: center;
  letter-spacing: .04em;
}

/* ── Score Delta ─────────────────────────────────────────────────────── */
#score-delta {
  position: fixed;
  pointer-events: none;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--heart-color);
  opacity: 0;
  z-index: 9999;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
#score-delta.pop { animation: score-pop 0.7s ease forwards; }

/* ══════════════════════════════════════════════════════════════════════════
   Floating Chat Panel
══════════════════════════════════════════════════════════════════════════ */
#chat-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 300px;
  height: 420px;
  background: var(--chat-bg);
  border: 1px solid var(--chat-border);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
  z-index: 400;
  overflow: hidden;
  animation: slide-up 0.22s ease;
  transition: background 0.4s, border-color 0.4s;
}
#chat-panel.hidden { display: none; }

#chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--chat-border);
  font-weight: 600;
  font-size: .88rem;
  color: var(--text);
  flex-shrink: 0;
}
#chat-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

#online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4caf50;
  box-shadow: 0 0 6px #4caf50;
  animation: blink 2s ease-in-out infinite;
}

#chat-close {
  background: none;
  color: var(--text);
  font-size: .95rem;
  opacity: .5;
  transition: opacity 0.2s;
  line-height: 1;
}
#chat-close:hover { opacity: 1; }

#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}
#chat-messages::-webkit-scrollbar { width: 3px; }
#chat-messages::-webkit-scrollbar-thumb { background: var(--chat-border); border-radius: 3px; }

.chat-msg { max-width: 90%; animation: msg-in 0.2s ease; }
.chat-msg.mine   { align-self: flex-end; }
.chat-msg.theirs { align-self: flex-start; }
.chat-msg.system { align-self: center; font-size: .68rem; color: var(--hint-color); }

.msg-name {
  font-size: .65rem;
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--hint-color);
}
.msg-bubble {
  padding: 7px 12px;
  border-radius: 14px;
  font-size: .83rem;
  line-height: 1.4;
  word-break: break-word;
}
.chat-msg.mine   .msg-bubble { background: var(--chat-mine);   color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.theirs .msg-bubble { background: var(--chat-theirs); color: #fff; border-bottom-left-radius:  4px; }

#chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--chat-border);
  flex-shrink: 0;
}
#chat-input {
  flex: 1;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--chat-border);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: .83rem;
  outline: none;
  transition: border-color 0.2s;
}
#chat-input:focus { border-color: var(--btn-bg); }
#chat-send {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-radius: 8px;
  padding: 7px 13px;
  font-size: .8rem;
  font-weight: 600;
  transition: opacity 0.2s, transform 0.1s;
}
#chat-send:hover  { opacity: .85; }
#chat-send:active { transform: scale(.96); }

/* ══════════════════════════════════════════════════════════════════════════
   Modals
══════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  animation: fade-in 0.2s ease;
}
.modal-overlay.hidden { display: none; }

.modal-box {
  background: var(--board-bg);
  color: var(--text);
  border-radius: 18px;
  padding: 32px 28px;
  width: min(380px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  animation: slide-up 0.22s ease;
}
.modal-box.wide { width: min(480px, calc(100vw - 32px)); }

.modal-logo {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--title-color);
}
.modal-box p { color: var(--text); font-size: .95rem; }

.modal-box input {
  width: 100%;
  background: var(--input-bg);
  color: var(--text);
  border: 2px solid var(--chat-border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 1rem;
  text-align: center;
  outline: none;
  transition: border-color 0.2s;
}
.modal-box input:focus { border-color: var(--btn-bg); }

.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-radius: 10px;
  padding: 11px 26px;
  font-size: .92rem;
  font-weight: 700;
  transition: opacity 0.2s, transform 0.1s;
}
.btn-primary:hover  { opacity: .85; }
.btn-primary:active { transform: scale(.97); }

.btn-secondary {
  background: var(--cell-bg);
  color: var(--text);
  border-radius: 10px;
  padding: 11px 22px;
  font-size: .88rem;
  font-weight: 600;
  transition: opacity 0.2s;
}
.btn-secondary:hover { opacity: .8; }

/* Scores modal */
#scores-table-wrap { width: 100%; overflow-x: auto; }
#scores-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
#scores-table th { text-align: left; padding: 8px 10px; color: var(--hint-color); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--chat-border); }
#scores-table td { padding: 9px 10px; border-bottom: 1px solid var(--chat-border); }
.modal-footer { display: flex; gap: 12px; align-items: center; justify-content: space-between; width: 100%; }
.link-btn { color: var(--btn-bg); font-size: .8rem; text-decoration: none; }
.link-btn:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   Theme Menu
══════════════════════════════════════════════════════════════════════════ */
#theme-menu {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  animation: fade-in 0.2s ease;
}
#theme-menu.hidden { display: none; }

#theme-menu-panel {
  background: var(--board-bg);
  border-radius: 18px;
  padding: 24px;
  width: min(300px, calc(100vw - 32px));
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  animation: slide-up 0.22s ease;
}
.theme-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
#theme-close {
  background: none;
  color: var(--text);
  font-size: 1rem;
  opacity: .5;
  transition: opacity 0.2s;
}
#theme-close:hover { opacity: 1; }

#theme-list { display: flex; flex-direction: column; gap: 8px; }
.theme-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cell-bg);
  color: var(--text);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: .88rem;
  font-weight: 500;
  text-align: left;
  transition: opacity 0.2s, transform 0.1s;
}
.theme-btn:hover  { opacity: .85; transform: translateX(3px); }
.theme-btn.active { outline: 2px solid var(--btn-bg); }

.theme-swatch { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; }
.neon-swatch    { background: linear-gradient(135deg,#141414,#39ff14); }
.classic-swatch { background: linear-gradient(135deg,#f2b179,#edc22e); }
.dark-swatch    { background: linear-gradient(135deg,#1a1a2e,#6c63ff); }
.purple-swatch  { background: linear-gradient(135deg,#4a1580,#ff6b9d); }
.ocean-swatch   { background: linear-gradient(135deg,#003153,#00b4d8); }
.sunset-swatch  { background: linear-gradient(135deg,#ff8c00,#ff006e); }

/* ══════════════════════════════════════════════════════════════════════════
   Animations
══════════════════════════════════════════════════════════════════════════ */
@keyframes tile-appear {
  0%   { transform: scale(0);    opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes tile-merge {
  0%   { transform: scale(0.8); }
  100% { transform: scale(1);   }
}
@keyframes heartbeat {
  0%,100% { transform: scale(1); }
  14%     { transform: scale(1.25); }
  28%     { transform: scale(1); }
  42%     { transform: scale(1.15); }
  56%     { transform: scale(1); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes slide-down {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes msg-in {
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50%     { opacity: .35; }
}
@keyframes score-pop {
  0%   { transform: translateY(0) scale(1);      opacity: 1; }
  100% { transform: translateY(-60px) scale(1.2); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #nav-pill { gap: 12px; padding: 8px 14px; }
  #nav-title { font-size: 1.1rem; }
  #chat-panel { width: calc(100vw - 24px); right: 12px; bottom: 12px; }
}