@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Share+Tech+Mono&family=Orbitron:wght@700;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0d1117;
  --card: #161b22;
  --card-2: #21262d;
  --border: #30363d;
  --text: #f0f6fc;
  --muted: #8b949e;
  --accent: #2f81f7;
  --accent-hover: #1f6feb;
  --green: #3fb950;
  --red: #f85149;
  --yellow: #d29922;
  --light-square: #efd9b5;
  --dark-square: #b88762;
}

body {
  min-height: 100vh;
  background: radial-gradient(ellipse at top left, rgba(47,129,247,0.18) 0%, transparent 45%), radial-gradient(ellipse at bottom right, rgba(47,129,247,0.08) 0%, transparent 40%), var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', Arial, sans-serif;
}

.screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.hidden { display: none !important; }

/* ── Auth Screen ─────────────────────────────────────── */
.auth-wrapper {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.auth-brand {
  text-align: center;
  animation: fadeDown 0.5s ease both;
}

.brand-icon {
  font-size: 52px;
  line-height: 1;
  filter: drop-shadow(0 0 18px rgba(47,129,247,0.5));
}

.auth-brand h1 {
  font-family: 'Orbitron', monospace;
  font-size: 34px;
  letter-spacing: 4px;
  color: var(--accent);
  text-transform: uppercase;
  margin: 6px 0 4px;
}

.brand-sub {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 13px;
}

.auth-card {
  width: 100%;
  background: rgba(22,27,34,0.97);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 28px 72px rgba(0,0,0,0.5);
  animation: fadeUp 0.5s ease both;
}

.auth-card h2 {
  font-family: 'Share Tech Mono', monospace;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 6px;
}

.auth-desc {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 28px;
}

/* Fields */
.field-group { margin-bottom: 18px; }

label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 13px;
  color: var(--muted);
  font-size: 16px;
  pointer-events: none;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 12px 14px 12px 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  border-color: var(--accent);
}

.field-hint {
  display: block;
  font-size: 12px;
  color: var(--red);
  margin-top: 5px;
  min-height: 16px;
}

/* Buttons */
button { font-family: inherit; cursor: pointer; border: none; transition: 0.15s; }

.primary-btn {
  width: 100%;
  margin-top: 20px;
  padding: 13px 18px;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.primary-btn:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); }
.primary-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.ghost-btn {
  width: 100%;
  margin-top: 12px;
  padding: 11px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
}

.ghost-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ghost-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.back-btn {
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  padding: 4px 0;
  letter-spacing: 1px;
}

.back-btn:hover { color: var(--accent); }
.back-row { margin-bottom: 16px; }

/* Loader spinner */
.btn-loader {
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

/* Message */
.msg {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.msg.success { background: rgba(63,185,80,0.12); border: 1px solid var(--green); color: var(--green); }
.msg.error   { background: rgba(248,81,73,0.12);  border: 1px solid var(--red);   color: var(--red);   }

/* 6-digit code inputs */
.code-inputs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 20px 0 10px;
}

input.code-digit,
input.code-digit:focus,
input.code-digit:active {
  width: 50px !important;
  min-width: 50px;
  max-width: 50px;
  height: 60px !important;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: #202733 !important;
  color: #f0f6fc !important;
  -webkit-text-fill-color: #f0f6fc !important;
  text-shadow: 0 0 0 #f0f6fc;
  opacity: 1 !important;
  font-family: 'Share Tech Mono', monospace;
  font-size: 30px;
  font-weight: 800;
  line-height: 60px;
  text-align: center;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  padding: 0 !important;
  caret-color: #58a6ff;
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
}

input.code-digit::selection {
  background: rgba(47,129,247,0.35);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

input.code-digit:-webkit-autofill,
input.code-digit:-webkit-autofill:hover,
input.code-digit:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #202733 inset !important;
  -webkit-text-fill-color: #f0f6fc !important;
  caret-color: #58a6ff;
}

.code-digit:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,129,247,0.18);
}

.code-digit.filled {
  border-color: rgba(47,129,247,0.85);
  background: #263142 !important;
}
.code-digit.error  { border-color: var(--red); animation: shake 0.35s ease; }

.code-timer {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
  min-height: 20px;
}

.code-timer.warn { color: var(--yellow); }

/* ── Top Bar ─────────────────────────────────────────── */
.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 58px;
  background: rgba(13,17,23,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 100;
}

.top-brand {
  font-family: 'Share Tech Mono', monospace;
  font-size: 20px;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
}

.top-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: 0.15s;
}

.top-profile:hover { border-color: var(--border); background: var(--card-2); }

.tp-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
}

.tp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tp-caret { color: var(--muted); font-size: 12px; }

/* ── Profile Dropdown ────────────────────────────────── */
.profile-dropdown {
  position: fixed;
  top: 66px;
  right: 16px;
  width: 280px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  z-index: 99;
  padding: 20px;
  animation: fadeDown 0.2s ease both;
}

.pd-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.pd-avatar-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.pd-avatar-wrap img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
}

.pd-avatar-fallback {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  border: 2px solid var(--accent);
}

.pd-upload-label {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: 0.15s;
}

.pd-upload-label:hover { background: var(--accent); border-color: var(--accent); }

.pd-name { font-size: 17px; font-weight: 700; color: var(--text); }
.pd-email { font-size: 13px; color: var(--muted); margin-top: 3px; word-break: break-all; }

.pd-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.pd-stat {
  flex: 1;
  text-align: center;
  padding: 12px 0;
}

.pd-stat + .pd-stat { border-left: 1px solid var(--border); }

.pd-stat span { display: block; font-family: 'Share Tech Mono', monospace; font-size: 22px; color: var(--accent); }
.pd-stat label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }

.logout-btn {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--red);
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.logout-btn:hover { background: rgba(248,81,73,0.1); border-color: var(--red); }

/* ── Game Area ───────────────────────────────────────── */
#gameScreen.screen { align-items: stretch; padding: 0; flex-direction: column; }

.game-area {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding-top: 58px; /* clear the fixed top-bar */
}

.game-menu-card {
  max-width: 360px;
  margin: 80px auto;
  background: rgba(22,27,34,0.97);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.4);
  animation: fadeUp 0.4s ease both;
}

.game-menu-card h2 {
  font-family: 'Orbitron', monospace;
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 22px;
  text-transform: uppercase;
}

select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  outline: none;
  margin-bottom: 4px;
}

select:focus { border-color: var(--accent); }

.game-board-wrap { animation: fadeUp 0.4s ease both; margin-top: 24px; }

.game-layout {
  width: 100%;
  display: grid;
  grid-template-columns: auto 280px;
  gap: 24px;
  align-items: start;
}

.left-panel, .right-panel {
  background: rgba(22,27,34,0.96);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
}

.left-panel { padding: 22px; display: flex; flex-direction: column; align-items: center; }
.right-panel { overflow: hidden; }

.right-panel h2 {
  font-family: 'Share Tech Mono', monospace;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 18px;
  border-bottom: 1px solid var(--border);
}

#status {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 20px;
  font-weight: 700;
}

#status.win   { border-color: var(--green);  color: var(--green);  }
#status.lose  { border-color: var(--red);    color: var(--red);    }
#status.draw,
#status.check { border-color: var(--yellow); color: var(--yellow); }

#board {
  width: 560px;
  height: 560px;
  display: grid;
  grid-template-columns: repeat(8,1fr);
  grid-template-rows: repeat(8,1fr);
  border: 3px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  user-select: none;
}

.square {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.square.light { background: var(--light-square); }
.square.dark  { background: var(--dark-square);  }
.square.selected { outline: 4px solid rgba(47,129,247,0.9); outline-offset: -4px; }
.square.last-move { box-shadow: inset 0 0 0 999px rgba(255,221,87,0.22); }

.square.legal-target::after {
  content: '';
  width: 18px; height: 18px;
  background: rgba(47,129,247,0.55);
  border-radius: 50%;
  position: absolute;
}

.piece { font-size: 54px; line-height: 1; z-index: 2; pointer-events: none; }
.white-piece { color: #fff; text-shadow: 0 2px 2px rgba(0,0,0,.75), 0 0 4px rgba(0,0,0,.6); }
.black-piece { color: #111; text-shadow: 0 1px 2px rgba(255,255,255,.35), 0 0 1px rgba(255,255,255,.4); }

.coord {
  position: absolute;
  left: 5px; bottom: 3px;
  font-size: 11px;
  font-family: 'Share Tech Mono', monospace;
  color: rgba(0,0,0,0.35);
  pointer-events: none;
}

.controls {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.controls button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
}

.controls button:hover { color: var(--accent); border-color: var(--accent); }

#moveHistory { max-height: 565px; overflow-y: auto; }

.empty-history { color: var(--muted); padding: 18px; text-align: center; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 12px; text-align: left; font-size: 16px; }
th { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--border); }
td:first-child { color: var(--muted); font-family: 'Share Tech Mono', monospace; font-size: 14px; }
tbody tr:nth-child(odd) { background: rgba(33,38,45,.75); }

/* Animations */
@keyframes fadeUp   { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes fadeDown { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:none; } }
@keyframes spin     { to { transform:rotate(360deg); } }
@keyframes shake    { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* Responsive */
@media (max-width: 900px) {
  .game-layout { grid-template-columns: 1fr; justify-items: center; }
  .right-panel { width: min(560px, 94vw); }
  #board { width: min(94vw, 560px); height: min(94vw, 560px); }
  .piece { font-size: clamp(34px, 9vw, 54px); }
}

@media (max-width: 500px) {
  .auth-card { padding: 28px 20px; }
  input.code-digit, input.code-digit:focus, input.code-digit:active { width: 42px !important; min-width:42px; max-width:42px; height: 52px !important; line-height:52px; font-size: 24px; }
  .code-inputs { gap: 7px; }
}
/* ════════════════════════════════════════
   MOBILE — full responsive overhaul
════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }

  .screen {
    padding: 16px;
    min-height: 100dvh;
  }

  .auth-wrapper {
    max-width: 100%;
    gap: 20px;
  }

  .auth-brand h1 {
    font-size: 24px !important;
    letter-spacing: 2px !important;
  }

  .auth-card {
    padding: 24px 18px;
    border-radius: 16px;
  }

  .top-bar {
    padding: 0 14px;
    height: 52px;
  }

  .top-brand-text {
    font-size: 13px;
    letter-spacing: 2px;
  }

  .top-brand-logo { height: 24px; }

  .game-area {
    padding-top: 52px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 16px;
  }

  .game-menu-card {
    max-width: 100%;
    margin: 16px 0;
    padding: 24px 18px;
  }

  #board {
    width: min(96vw, 440px);
    height: min(96vw, 440px);
  }

  .piece { font-size: clamp(28px, 10.5vw, 48px); }

  .game-layout {
    grid-template-columns: 1fr;
    gap: 14px;
    justify-items: center;
  }

  .left-panel {
    width: 100%;
    padding: 14px;
  }

  .right-panel {
    width: 100%;
    max-width: min(96vw, 440px);
  }

  #moveHistory { max-height: 200px; }

  .controls { gap: 8px; }
  .controls button { flex: 1; padding: 10px 8px; font-size: 14px; }

  .lobby-card { padding: 20px 16px; }

  .mp-controls { gap: 6px; }
  .mp-ctrl-btn { padding: 9px 8px; font-size: 12px; }

  .profile-dropdown {
    right: 8px;
    left: 8px;
    width: auto;
    top: 60px;
  }

  .intro-skip {
    bottom: 20px;
    right: 16px;
    font-size: 12px;
    padding: 8px 14px;
  }

  .game-result-card {
    width: 94vw;
    padding: 28px 18px;
  }

  #status { font-size: 16px; min-height: 40px; }
}

/* ════════════════════════════════════════
   NEW FEATURES CSS
════════════════════════════════════════ */

/* ── Settings Button in Top Bar ── */
.top-settings-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.15s;
  margin-right: 4px;
}
.top-settings-btn:hover { color: var(--accent); border-color: var(--border); background: var(--card-2); }

/* ── Settings Overlay + Panel ── */
.settings-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: 200; display: flex; justify-content: flex-end;
  backdrop-filter: blur(3px);
}
.settings-overlay.hidden { display: none; }

.settings-panel {
  width: 320px; max-width: 95vw; height: 100vh;
  background: var(--card); border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  animation: slideInRight 0.25s ease;
  overflow-y: auto;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
  font-family: 'Orbitron', monospace; font-size: 14px; letter-spacing: 2px;
  color: var(--accent); text-transform: uppercase; flex-shrink: 0;
}
.settings-close {
  background: transparent; border: none; color: var(--muted);
  font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
  transition: 0.15s;
}
.settings-close:hover { color: var(--text); background: var(--card-2); }

.settings-body { padding: 20px; flex: 1; }
.settings-section { margin-bottom: 24px; }
.settings-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--muted); margin-bottom: 12px; font-weight: 700;
}

/* Board/piece theme grid */
.theme-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--card-2);
  border: 1.5px solid var(--border); border-radius: 8px;
  color: var(--muted); font-family: 'Rajdhani', sans-serif;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: 0.15s; flex: 1; min-width: 110px;
}
.theme-btn:hover { border-color: var(--accent); color: var(--text); }
.theme-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(47,129,247,0.08); }
.theme-swatch { width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.1); }

/* Toggle switch */
.settings-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid rgba(48,54,61,0.5);
  font-size: 15px; color: var(--text);
}
.settings-toggle-row:last-child { border-bottom: none; }

.toggle-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: var(--card-2);
  border: 1px solid var(--border); border-radius: 24px;
  cursor: pointer; transition: 0.2s;
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 16px; height: 16px; left: 3px; bottom: 3px;
  background: var(--muted); border-radius: 50%;
  transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: rgba(47,129,247,0.25); border-color: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); background: var(--accent); }

/* ── Captured Pieces Bar ── */
.captured-bar {
  min-height: 24px; padding: 4px 8px;
  display: flex; flex-wrap: wrap; gap: 2px;
  align-items: center; background: rgba(13,17,23,0.5);
  border-radius: 8px; margin-bottom: 6px; font-size: 18px;
}

/* ── Chess Clocks ── */
.chess-clocks {
  display: flex; gap: 8px; margin-bottom: 8px; width: 100%;
}
.player-clock {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 12px; background: var(--card-2); border: 1.5px solid var(--border);
  border-radius: 10px; font-family: 'Share Tech Mono', monospace;
  transition: 0.2s;
}
.player-clock.active { border-color: var(--accent); background: rgba(47,129,247,0.1); }
.player-clock.low-time { border-color: var(--red); background: rgba(248,81,73,0.1); }
.player-clock.low-time .clock-time { color: var(--red); animation: pulse-clock 1s infinite; }
.clock-time { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: 1px; }
.clock-label { font-size: 18px; }

@keyframes pulse-clock { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ── Profile Dropdown Actions ── */
.pd-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.pd-action-btn {
  width: 100%; padding: 9px 12px; background: transparent;
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); font-family: 'Rajdhani', sans-serif;
  font-size: 14px; font-weight: 600; cursor: pointer;
  text-align: left; transition: 0.15s;
}
.pd-action-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Generic Modal ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  z-index: 300; display: flex; align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(4px);
}
.modal-overlay.hidden { display: none; }

.modal-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; width: 100%; max-width: 480px;
  max-height: 80vh; display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  animation: fadeUp 0.25s ease;
}
.modal-card.wide { max-width: 740px; }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  font-family: 'Orbitron', monospace; font-size: 14px;
  letter-spacing: 2px; color: var(--accent); text-transform: uppercase;
  flex-shrink: 0;
}
.modal-close {
  background: transparent; border: none; color: var(--muted);
  font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: 0.15s;
}
.modal-close:hover { color: var(--text); background: var(--card-2); }

.modal-body { padding: 20px; overflow-y: auto; flex: 1; }

/* ── Game History entries ── */
.history-entry {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 10px; background: var(--card-2);
  margin-bottom: 8px; cursor: pointer; transition: 0.15s;
}
.history-entry:hover { background: rgba(47,129,247,0.1); }
.history-result-badge {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; flex-shrink: 0;
}
.badge-win  { background: rgba(63,185,80,0.2); color: var(--green); border: 1.5px solid var(--green); }
.badge-loss { background: rgba(248,81,73,0.2); color: var(--red); border: 1.5px solid var(--red); }
.badge-draw { background: rgba(210,153,34,0.2); color: var(--yellow); border: 1.5px solid var(--yellow); }
.history-meta { flex: 1; }
.history-meta-title { font-size: 15px; font-weight: 600; color: var(--text); }
.history-meta-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ── Achievements ── */
.achievements-grid { display: flex; flex-direction: column; gap: 10px; }
.achievement-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border-radius: 12px;
  background: var(--card-2); border: 1.5px solid var(--border);
  transition: 0.15s;
}
.achievement-item.unlocked { border-color: rgba(210,153,34,0.5); background: rgba(210,153,34,0.06); }
.achievement-icon { font-size: 28px; flex-shrink: 0; }
.achievement-name { font-size: 15px; font-weight: 700; color: var(--text); }
.achievement-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.achievement-item.locked .achievement-name { color: var(--muted); }
.achievement-item.locked .achievement-icon { filter: grayscale(1) opacity(0.4); }

/* ── Analysis ── */
#analysisModal .modal-card.wide {
  width: min(1120px, 96vw);
  max-width: 1120px;
  max-height: 92vh;
  overflow: hidden;
}
#analysisModal .modal-body {
  padding: 18px 20px 20px;
  max-height: calc(92vh - 74px);
  overflow: auto;
}
.analysis-layout {
  display: grid;
  grid-template-columns: minmax(360px, 520px) minmax(260px, 1fr);
  gap: 22px;
  align-items: start;
}
.analysis-board-wrap { min-width: 0; width: 100%; }
.analysis-board-wrap #analysisBoard {
  width: min(520px, 100%);
  aspect-ratio: 1 / 1;
  height: auto;
  display: grid;
  grid-template-columns: repeat(8,1fr);
  grid-template-rows: repeat(8,1fr);
  border: 2px solid rgba(148,163,184,.38);
  border-radius: 12px;
  overflow: hidden;
  background: #111827;
  box-shadow: 0 18px 60px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.05);
}
#analysisBoard .square { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
#analysisBoard .square.light { background: #e8e3db !important; }
#analysisBoard .square.dark  { background: #2b2f36 !important; }
#analysisBoard .piece {
  position: static !important; width: auto !important; height: auto !important;
  font-size: clamp(30px, 7vw, 58px) !important; line-height: 1 !important;
  transform: none !important; filter: none !important; opacity: 1 !important; pointer-events: none;
}
#analysisBoard .white-piece { color: #ffffff !important; text-shadow: 0 2px 3px rgba(0,0,0,.8), 0 0 8px rgba(255,255,255,.36) !important; }
#analysisBoard .black-piece { color: #111827 !important; text-shadow: 0 1px 0 rgba(255,255,255,.65), 0 0 5px rgba(0,0,0,.35) !important; }
.analysis-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 12px; }
.analysis-nav button { background: var(--card-2); border: 1px solid var(--border); color: var(--text); padding: 10px 16px; border-radius: 10px; font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 800; cursor: pointer; flex: 1; transition: 0.15s; }
.analysis-nav button:hover { border-color: var(--accent); color: var(--accent); }
#analysisMoveLabel { font-size: 14px; color: var(--muted); text-align: center; min-width: 86px; font-family: 'Share Tech Mono', monospace; }
.analysis-moves { min-width: 0; max-height: min(64vh, 560px); overflow-y: auto; background: var(--card-2); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 14px; }
.analysis-move-row { display: grid; grid-template-columns: 38px 1fr 1fr; gap: 8px; margin-bottom: 6px; align-items:center; }
.analysis-move-num { color: var(--muted); font-size: 14px; width: 32px; flex-shrink: 0; font-family: 'Share Tech Mono', monospace; }
.analysis-move-san { min-width: 0; padding: 7px 10px; border-radius: 8px; font-size: 15px; font-family: 'Share Tech Mono', monospace; cursor: pointer; color: var(--text); background: transparent; border: none; text-align: left; transition: 0.15s; }
.analysis-move-san:hover { background: rgba(47,129,247,0.15); }
.analysis-move-san.current { background: var(--accent); color: #fff; }

/* ── Analysis button in result overlay ── */
.btn-analysis { background: #21262d; border: 1px solid #30363d !important; color: #c9d1d9; flex: 1; padding: 12px; border-radius: 8px; font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; }
.btn-analysis:hover { opacity: 0.85; border-color: var(--accent) !important; color: var(--accent); }

@media (max-width: 820px) {
  #analysisModal .modal-card.wide { width: 96vw; max-height: 92vh; }
  #analysisModal .modal-body { padding: 12px; }
  .analysis-layout { grid-template-columns: 1fr; gap: 14px; }
  .analysis-board-wrap #analysisBoard { width: min(92vw, 430px); margin: 0 auto; }
  .analysis-moves { max-height: 280px; }
  .analysis-move-row { grid-template-columns: 32px 1fr 1fr; }
  #analysisBoard .piece { font-size: clamp(26px, 9vw, 50px) !important; }
}

/* ── Hint highlight ── */
.square.hint-from { outline: 4px solid rgba(255,200,0,0.9); outline-offset: -4px; }
.square.hint-to   { outline: 4px solid rgba(255,200,0,0.9); outline-offset: -4px; background: rgba(255,200,0,0.2) !important; }

/* ── Analysis button in result overlay ── */
.btn-analysis { background: #21262d; border: 1px solid #30363d !important; color: #c9d1d9; flex: 1; padding: 12px; border-radius: 8px; font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; }
.btn-analysis:hover { opacity: 0.85; border-color: var(--accent) !important; color: var(--accent); }

/* Board themes via CSS vars (overridden by JS) */
body[data-board="green"]  { --light-square: #eeeed2; --dark-square: #769656; }
body[data-board="blue"]   { --light-square: #dee3e6; --dark-square: #8ca2ad; }
body[data-board="purple"] { --light-square: #f0d9ff; --dark-square: #9b72cf; }
body[data-board="dark"]   { --light-square: #4d4d4d; --dark-square: #1a1a1a; }
body[data-board="red"]    { --light-square: #f5cfa0; --dark-square: #c14d2e; }
body[data-board="classic"]{ --light-square: #efd9b5; --dark-square: #b88762; }

/* Hide coords when disabled */
body.hide-coords .coord { display: none; }

@media (max-width: 768px) {
  .settings-panel { width: 100vw; }
  .analysis-board-wrap #analysisBoard { width: 260px; height: 260px; }
  .modal-card.wide { max-width: 98vw; }
}

/* ════════════════════════════════════════
   10 BOARD THEMES
════════════════════════════════════════ */

/* ── 1. Bamboo Dynasty ── */
body[data-board="bamboo"] {
  --light-square: #e8d5a3;
  --dark-square:  #6b8c42;
  --board-border: #8b6914;
  --board-bg:     radial-gradient(ellipse at top left, rgba(139,105,20,0.15) 0%, transparent 60%), #1a1200;
}
body[data-board="bamboo"] #board {
  border-color: #8b6914;
  box-shadow: 0 0 0 4px #5a4010, 0 0 40px rgba(139,105,20,0.4);
}
body[data-board="bamboo"] .square.light { background: #e8d5a3; }
body[data-board="bamboo"] .square.dark  { background: #6b8c42; }
body[data-board="bamboo"] .white-piece  { color: #f5ede0; text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 8px rgba(255,200,80,0.3); }
body[data-board="bamboo"] .black-piece  { color: #2d1a00; text-shadow: 0 1px 2px rgba(139,105,20,0.5); }

/* ── 2. Hologram Arena ── */
body[data-board="hologram"] {
  --light-square: #001a33;
  --dark-square:  #002d5a;
}
body[data-board="hologram"] #board {
  border-color: #0066ff;
  box-shadow: 0 0 0 2px #003399, 0 0 40px rgba(0,102,255,0.6), 0 0 80px rgba(0,200,255,0.2);
}
body[data-board="hologram"] .square.light {
  background: #001a33;
  box-shadow: inset 0 0 12px rgba(0,150,255,0.1);
}
body[data-board="hologram"] .square.dark  {
  background: linear-gradient(135deg, #002d5a, #001f44);
  box-shadow: inset 0 0 8px rgba(0,200,255,0.15);
}
body[data-board="hologram"] .square {
  border: 1px solid rgba(0,100,200,0.2);
}
body[data-board="hologram"] .white-piece {
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 6px #00ccff) drop-shadow(0 0 12px #0066ff);
  -webkit-text-stroke: 1px rgba(0,220,255,0.9);
}
body[data-board="hologram"] .black-piece {
  color: transparent;
  -webkit-text-stroke: 1px rgba(100,200,255,0.7);
  filter: drop-shadow(0 0 4px #0088cc);
}
body[data-board="hologram"] .square.selected { outline-color: rgba(0,255,200,0.9); }
body[data-board="hologram"] .square.legal-target::after { background: rgba(0,220,255,0.5); box-shadow: 0 0 8px rgba(0,220,255,0.8); }

/* ── 3. Royal Marble Hall ── */
body[data-board="marble"] {
  --light-square: #f0eeec;
  --dark-square:  #1c1c1c;
}
body[data-board="marble"] #board {
  border-color: #c9a84c;
  box-shadow: 0 0 0 4px #8b6914, 0 0 60px rgba(201,168,76,0.4);
}
body[data-board="marble"] .square.light {
  background: linear-gradient(135deg, #f0eeec 0%, #e8e4e0 50%, #f5f3f0 100%);
}
body[data-board="marble"] .square.dark  {
  background: linear-gradient(135deg, #1c1c1c 0%, #2a2a2a 50%, #1a1a1a 100%);
}
body[data-board="marble"] .white-piece  { color: #d4af37; text-shadow: 0 0 10px rgba(212,175,55,0.6), 0 2px 4px rgba(0,0,0,0.5); }
body[data-board="marble"] .black-piece  { color: #c0c0c0; text-shadow: 0 0 8px rgba(192,192,192,0.4), 0 2px 4px rgba(0,0,0,0.7); }

/* ── 4. Cyber Neon Grid ── */
body[data-board="cyber"] {
  --light-square: #0a0a1a;
  --dark-square:  #0d0d22;
}
body[data-board="cyber"] #board {
  border-color: #00ffcc;
  box-shadow: 0 0 0 2px #9900ff, 0 0 30px rgba(0,255,204,0.5), 0 0 60px rgba(153,0,255,0.3);
}
body[data-board="cyber"] .square.light {
  background: #0a0a1a;
  box-shadow: inset 1px 1px 0 rgba(0,255,204,0.15), inset -1px -1px 0 rgba(153,0,255,0.1);
}
body[data-board="cyber"] .square.dark  {
  background: #0d0d22;
  box-shadow: inset 1px 1px 0 rgba(153,0,255,0.15), inset -1px -1px 0 rgba(0,255,204,0.1);
}
body[data-board="cyber"] .square {
  border: 1px solid rgba(0,255,204,0.06);
}
body[data-board="cyber"] .white-piece  { color: #00ffcc; text-shadow: 0 0 10px #00ffcc, 0 0 20px rgba(0,255,204,0.5); }
body[data-board="cyber"] .black-piece  { color: #cc00ff; text-shadow: 0 0 10px #cc00ff, 0 0 20px rgba(204,0,255,0.5); }
body[data-board="cyber"] .square.selected { outline-color: #00ffcc; }
body[data-board="cyber"] .square.legal-target::after { background: rgba(0,255,204,0.4); box-shadow: 0 0 10px rgba(0,255,204,0.8); }

/* ── 5. Ancient Stone Ruins ── */
body[data-board="stone"] {
  --light-square: #9e8f7a;
  --dark-square:  #4a3f35;
}
body[data-board="stone"] #board {
  border-color: #6b5a48;
  box-shadow: 0 0 0 4px #3d2d1a, 0 8px 40px rgba(0,0,0,0.7);
}
body[data-board="stone"] .square.light {
  background: linear-gradient(135deg, #9e8f7a, #b09880, #9a8b76);
}
body[data-board="stone"] .square.dark  {
  background: linear-gradient(135deg, #4a3f35, #3d3328, #4e4239);
}
body[data-board="stone"] .white-piece  { color: #e8dcc8; text-shadow: 0 2px 6px rgba(0,0,0,0.8), 0 0 4px rgba(255,200,100,0.3); }
body[data-board="stone"] .black-piece  { color: #1a1008; text-shadow: 0 1px 3px rgba(255,150,50,0.3); }

/* ── 6. Crystal Ice Kingdom ── */
body[data-board="ice"] {
  --light-square: #d4eeff;
  --dark-square:  #2d9cdb;
}
body[data-board="ice"] #board {
  border-color: #74c6f0;
  box-shadow: 0 0 0 3px #a8dcf0, 0 0 40px rgba(116,198,240,0.5), inset 0 0 20px rgba(255,255,255,0.05);
}
body[data-board="ice"] .square.light {
  background: linear-gradient(135deg, #d4eeff 0%, #e8f6ff 50%, #cce8ff 100%);
}
body[data-board="ice"] .square.dark  {
  background: linear-gradient(135deg, #2d9cdb 0%, #1e86c4 50%, #3aaae0 100%);
}
body[data-board="ice"] .white-piece  { color: #ffffff; text-shadow: 0 0 12px rgba(150,220,255,0.8), 0 2px 4px rgba(0,50,100,0.4); }
body[data-board="ice"] .black-piece  { color: #003366; text-shadow: 0 0 8px rgba(0,100,200,0.4), 0 1px 3px rgba(0,0,0,0.6); }
body[data-board="ice"] .square.selected { outline-color: rgba(255,255,255,0.9); }
body[data-board="ice"] .square.legal-target::after { background: rgba(255,255,255,0.5); box-shadow: 0 0 10px rgba(150,220,255,0.8); }

/* ── 7. Golden Desert Empire ── */
body[data-board="desert"] {
  --light-square: #f0c060;
  --dark-square:  #c47a20;
}
body[data-board="desert"] #board {
  border-color: #d4a017;
  box-shadow: 0 0 0 4px #8b5e0a, 0 0 40px rgba(212,160,23,0.4);
}
body[data-board="desert"] .square.light {
  background: linear-gradient(135deg, #f0c060, #f5cc70, #ebb850);
}
body[data-board="desert"] .square.dark  {
  background: linear-gradient(135deg, #c47a20, #b86e18, #cc8228);
}
body[data-board="desert"] .white-piece  { color: #fff8e8; text-shadow: 0 0 10px rgba(255,220,100,0.6), 0 2px 4px rgba(100,50,0,0.5); }
body[data-board="desert"] .black-piece  { color: #2a1500; text-shadow: 0 1px 3px rgba(200,100,0,0.4); }

/* ── 8. Space Galaxy Chess ── */
body[data-board="space"] {
  --light-square: #0a0a1f;
  --dark-square:  #15103a;
}
body[data-board="space"] #board {
  border-color: #4a2080;
  box-shadow: 0 0 0 2px #2a1060, 0 0 40px rgba(74,32,128,0.6), 0 0 80px rgba(30,10,80,0.4);
}
body[data-board="space"] .square.light {
  background: radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.04) 0%, transparent 60%), #0a0a1f;
}
body[data-board="space"] .square.dark  {
  background: radial-gradient(ellipse at 80% 80%, rgba(100,50,200,0.1) 0%, transparent 60%), #15103a;
}
body[data-board="space"] .white-piece  { color: #e0d8ff; text-shadow: 0 0 12px rgba(180,150,255,0.7), 0 0 4px rgba(255,255,255,0.5); }
body[data-board="space"] .black-piece  { color: #6a3fbf; text-shadow: 0 0 10px rgba(150,80,255,0.6); }
body[data-board="space"] .square.legal-target::after { background: rgba(150,100,255,0.5); box-shadow: 0 0 10px rgba(150,100,255,0.8); }

/* ── 9. Dark Assassin Board ── */
body[data-board="assassin"] {
  --light-square: #1a0000;
  --dark-square:  #0d0000;
}
body[data-board="assassin"] #board {
  border-color: #8b0000;
  box-shadow: 0 0 0 2px #5a0000, 0 0 40px rgba(139,0,0,0.6), 0 0 2px #ff0000 inset;
}
body[data-board="assassin"] .square.light {
  background: #1a0000;
  box-shadow: inset 0 0 8px rgba(180,0,0,0.08);
}
body[data-board="assassin"] .square.dark  {
  background: #0d0000;
}
body[data-board="assassin"] .square {
  border: 1px solid rgba(139,0,0,0.12);
}
body[data-board="assassin"] .white-piece  { color: #cc0000; text-shadow: 0 0 12px rgba(200,0,0,0.8), 0 0 4px rgba(255,50,50,0.4); }
body[data-board="assassin"] .black-piece  { color: #4a0000; text-shadow: 0 0 6px rgba(139,0,0,0.5); }
body[data-board="assassin"] .square.selected { outline-color: rgba(255,0,0,0.8); }
body[data-board="assassin"] .square.legal-target::after { background: rgba(200,0,0,0.4); box-shadow: 0 0 10px rgba(255,0,0,0.6); }

/* ── 10. Minimal Luxury Pro ── */
body[data-board="luxury"] {
  --light-square: #2c2c2c;
  --dark-square:  #1a1a1a;
}
body[data-board="luxury"] #board {
  border-color: #3d3d3d;
  box-shadow: 0 0 0 1px #555, 0 20px 60px rgba(0,0,0,0.8), 0 0 1px rgba(255,255,255,0.05) inset;
}
body[data-board="luxury"] .square.light {
  background: linear-gradient(135deg, #2c2c2c, #323232);
}
body[data-board="luxury"] .square.dark  {
  background: linear-gradient(135deg, #1a1a1a, #1e1e1e);
}
body[data-board="luxury"] .white-piece  { color: #e8e0d0; text-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 0 8px rgba(232,224,208,0.15); }
body[data-board="luxury"] .black-piece  { color: #888; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
body[data-board="luxury"] .square.selected { outline-color: rgba(200,180,120,0.8); }
body[data-board="luxury"] .square.legal-target::after { background: rgba(200,180,120,0.35); }
/* ═══════════════════════════════════════
   FRIENDS SYSTEM
═══════════════════════════════════════ */
.friend-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e74c3c;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  line-height: 1;
}
.friend-badge.hidden { display: none; }

.friends-btn { position: relative; }

/* Modal sizing */
.friends-modal-card {
  width: min(520px, 96vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.friends-modal-card .modal-body { display: none; } /* override default body */

/* Tabs */
.friends-tabs {
  display: flex;
  border-bottom: 1px solid #30363d;
  flex-shrink: 0;
}
.friends-tab {
  flex: 1;
  padding: 10px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #8b949e;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s, border-color .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.friends-tab.active { color: #e6edf3; border-bottom-color: #58a6ff; }
.friends-tab:hover:not(.active) { color: #c9d1d9; }

/* Panels */
.friends-panel {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  min-height: 0;
}
.friends-panel.hidden { display: none; }

/* Friends list */
.friends-list { display: flex; flex-direction: column; gap: 8px; }
.friends-loading { color: #8b949e; font-size: 13px; text-align: center; padding: 24px 0; }
.friends-empty   { color: #8b949e; font-size: 13px; text-align: center; padding: 24px 0; }

.friend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  transition: border-color .15s;
}
.friend-item:hover { border-color: #58a6ff44; }

.friend-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #21262d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.friend-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.friend-online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #161b22;
  background: #3fb950;
}
.friend-online-dot.offline { background: #6e7681; }

.friend-info { flex: 1; min-width: 0; }
.friend-name {
  font-size: 14px;
  font-weight: 600;
  color: #e6edf3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-meta { font-size: 12px; color: #8b949e; margin-top: 1px; }
.friend-status-online  { color: #3fb950; }
.friend-status-offline { color: #6e7681; }

.friend-actions { display: flex; gap: 6px; flex-shrink: 0; }
.friend-action-btn {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: #21262d;
  color: #8b949e;
  cursor: pointer;
  transition: all .15s;
}
.friend-action-btn:hover { background: #30363d; color: #e6edf3; }
.friend-action-btn.danger:hover { background: #3d1919; border-color: #e74c3c; color: #e74c3c; }
.friend-action-btn.accept { border-color: #3fb95044; color: #3fb950; }
.friend-action-btn.accept:hover { background: #1a3a1a; }

/* Add friend section */
.friends-add-section { margin-bottom: 20px; }
.friends-divider { border-top: 1px solid #30363d; padding-top: 18px; }
.friends-add-label { font-size: 12px; color: #8b949e; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }

.friends-search-row, .friends-link-row {
  display: flex;
  gap: 8px;
}
.friends-search-row input,
.friends-link-row input {
  flex: 1;
  padding: 8px 12px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #e6edf3;
  font-size: 13px;
  outline: none;
  transition: border-color .2s;
}
.friends-search-row input:focus,
.friends-link-row input:focus { border-color: #58a6ff; }

.friends-link-row button,
.friends-search-row button {
  padding: 8px 14px;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #e6edf3;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.friends-link-row button:hover,
.friends-search-row button:hover { background: #30363d; }

.friends-search-results { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.friends-msg { margin-top: 8px; font-size: 12px; min-height: 16px; }
.friends-msg.ok  { color: #3fb950; }
.friends-msg.err { color: #f85149; }
/* Friend game invites + saved friend chat */
.friends-profile-strip {
  display:flex;
  align-items:center;
  gap:12px;
  background:#0d1117;
  border:1px solid #30363d;
  border-radius:12px;
  padding:12px;
  margin-bottom:14px;
}
.friend-own-avatar { flex-shrink:0; }
.friends-profile-info { flex:1; min-width:0; }
.friends-profile-info p { margin:2px 0 0; color:#8b949e; font-size:12px; }
.friend-image-edit-btn {
  padding:8px 10px;
  background:#21262d;
  border:1px solid #30363d;
  border-radius:8px;
  color:#c9d1d9;
  font-family:'Rajdhani',sans-serif;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}
.friend-image-edit-btn:hover { border-color:#58a6ff; color:#e6edf3; }

.friend-invite-setup {
  background:linear-gradient(180deg,#161b22,#0d1117);
  border:1px solid #58a6ff55;
  border-radius:14px;
  padding:14px;
  margin-bottom:14px;
  box-shadow:0 8px 26px rgba(0,0,0,.24);
}
.friend-invite-title { color:#e6edf3; font-weight:700; font-size:16px; margin-bottom:10px; }
.friend-invite-title span { color:#58a6ff; }
.friend-invite-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.friend-invite-grid label { display:flex; flex-direction:column; gap:6px; color:#8b949e; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.friend-invite-grid select {
  background:#0d1117;
  border:1px solid #30363d;
  border-radius:8px;
  color:#e6edf3;
  padding:9px 10px;
  font-family:'Rajdhani',sans-serif;
  font-size:14px;
}
.friend-invite-actions { display:flex; gap:8px; margin-top:12px; }

.game-invite-toast-container {
  position:fixed;
  right:22px;
  top:86px;
  z-index:10000;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.game-invite-toast {
  width:min(360px, calc(100vw - 28px));
  background:rgba(22,27,34,.96);
  border:1px solid #30363d;
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 30px rgba(47,129,247,.16);
  overflow:hidden;
  padding:14px;
  color:#e6edf3;
  pointer-events:auto;
  animation:gameInviteIn .22s ease-out;
  backdrop-filter:blur(12px);
}
.game-invite-toast.closing { opacity:0; transform:translateX(18px); transition:.22s; }
@keyframes gameInviteIn { from{opacity:0; transform:translateX(20px) scale(.98);} to{opacity:1; transform:translateX(0) scale(1);} }
.game-invite-row { display:flex; gap:12px; align-items:center; }
.game-invite-avatar {
  width:48px;
  height:48px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:linear-gradient(135deg,#2f81f7,#8957e5);
  color:#fff;
  font-weight:800;
  font-size:20px;
  flex-shrink:0;
}
.game-invite-avatar img { width:100%; height:100%; object-fit:cover; }
.game-invite-main { flex:1; min-width:0; }
.game-invite-title { color:#58a6ff; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.9px; }
.game-invite-text { font-size:14px; margin-top:2px; }
.game-invite-rules { color:#8b949e; font-size:12px; margin-top:3px; }
.game-invite-actions { display:flex; gap:8px; margin-top:12px; }
.game-invite-actions button {
  flex:1;
  border:none;
  border-radius:10px;
  padding:10px;
  cursor:pointer;
  font-size:17px;
  background:#21262d;
  transition:transform .15s, background .15s;
}
.game-invite-actions button:hover { transform:translateY(-1px); background:#30363d; }
.game-invite-accept { box-shadow:inset 0 0 0 1px #3fb95066; }
.game-invite-decline { box-shadow:inset 0 0 0 1px #f8514966; }
.game-invite-timer { height:5px; background:#30363d; border-radius:999px; overflow:hidden; margin-top:12px; }
.game-invite-timer-bar { width:100%; height:100%; background:#3fb950; border-radius:999px; }

.friend-chat-panel {
  margin-top:14px;
  border:1px solid #30363d;
  border-radius:14px;
  overflow:hidden;
  background:#0d1117;
}
.friend-chat-header {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  background:#161b22;
  border-bottom:1px solid #30363d;
}
.friend-chat-close {
  margin-left:auto;
  width:30px;
  height:30px;
  border-radius:8px;
  border:1px solid #30363d;
  background:#21262d;
  color:#c9d1d9;
  cursor:pointer;
}
.friend-chat-messages {
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:300px;
  overflow-y:auto;
  padding:12px;
}
.friend-chat-msg { display:flex; flex-direction:column; max-width:82%; }
.friend-chat-msg.mine { align-self:flex-end; align-items:flex-end; }
.friend-chat-msg.theirs { align-self:flex-start; align-items:flex-start; }
.friend-chat-bubble {
  padding:9px 11px;
  border-radius:12px;
  background:#21262d;
  color:#e6edf3;
  font-size:13px;
  line-height:1.35;
  word-break:break-word;
}
.friend-chat-msg.mine .friend-chat-bubble { background:#1f6feb; color:#fff; }
.friend-chat-time { color:#6e7681; font-size:10px; margin-top:3px; }
.friend-chat-compose { border-top:1px solid #30363d; padding:10px; }
.friend-chat-compose textarea {
  width:100%;
  min-height:68px;
  resize:vertical;
  background:#010409;
  border:1px solid #30363d;
  border-radius:10px;
  color:#e6edf3;
  padding:10px;
  outline:none;
  font-family:'Rajdhani',sans-serif;
  font-size:14px;
}
.friend-chat-compose textarea:focus { border-color:#58a6ff; }
.friend-chat-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:8px; color:#8b949e; font-size:12px; }
.friend-chat-bottom button {
  padding:8px 16px;
  background:#238636;
  border:none;
  border-radius:8px;
  color:white;
  font-family:'Rajdhani',sans-serif;
  font-weight:700;
  cursor:pointer;
}
.friend-chat-bottom button:hover { background:#2ea043; }

@media (max-width: 640px) {
  .friend-invite-grid { grid-template-columns:1fr; }
  .friend-actions { flex-wrap:wrap; justify-content:flex-end; }
  .game-invite-toast-container { top:auto; bottom:18px; right:14px; left:14px; }
  .game-invite-toast { width:100%; }
  .friends-profile-strip { align-items:flex-start; }
}

/* ── Friend chat/invite visual update: PUBG-style rectangular images + WhatsApp-style chat ── */
.friend-card-avatar {
  width:78px;
  height:48px;
  border-radius:9px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:linear-gradient(135deg,#1f6feb,#8957e5);
  color:#fff;
  font-weight:900;
  font-size:20px;
  border:1px solid rgba(88,166,255,.35);
  box-shadow:0 8px 18px rgba(0,0,0,.32), inset 0 0 18px rgba(88,166,255,.16);
}
.friend-card-avatar img,
.friend-card-list-avatar img,
.game-invite-avatar img,
.friend-message-toast-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
}
.friend-own-avatar {
  width:94px;
  height:58px;
  border-radius:10px;
}
.friend-card-list-avatar {
  width:58px;
  height:42px;
  border-radius:8px;
  background:linear-gradient(135deg,#1f6feb,#8957e5);
  border:1px solid rgba(88,166,255,.28);
}
.friend-card-list-avatar img { border-radius:0 !important; }
.friend-card-list-avatar .friend-online-dot { right:-3px; bottom:-3px; }
.friends-profile-strip {
  background:linear-gradient(135deg,rgba(13,17,23,.98),rgba(22,27,34,.94));
  border-color:rgba(88,166,255,.25);
}
.friend-unread-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:4px;
  padding:1px 5px;
  border-radius:999px;
  background:#2ea043;
  color:#fff;
  font-size:9px;
  line-height:1.2;
  letter-spacing:.4px;
}
.game-invite-avatar {
  width:82px;
  height:52px;
  border-radius:9px;
  border:1px solid rgba(88,166,255,.32);
  box-shadow:0 8px 20px rgba(0,0,0,.34);
}
.game-invite-row { align-items:flex-start; }

.friend-message-toast-container {
  position:fixed;
  right:22px;
  top:250px;
  z-index:10001;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.friend-message-toast {
  width:min(340px, calc(100vw - 28px));
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(13,17,23,.97);
  border:1px solid rgba(88,166,255,.28);
  box-shadow:0 18px 48px rgba(0,0,0,.5), 0 0 26px rgba(46,160,67,.14);
  color:#e6edf3;
  cursor:pointer;
  pointer-events:auto;
  animation:friendMsgIn .2s ease-out;
  backdrop-filter:blur(12px);
}
.friend-message-toast.closing { opacity:0; transform:translateX(18px); transition:.22s; }
@keyframes friendMsgIn { from{opacity:0; transform:translateX(18px);} to{opacity:1; transform:translateX(0);} }
.friend-message-toast-img {
  width:62px;
  height:42px;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#1f6feb,#8957e5);
  font-weight:900;
  color:#fff;
  flex-shrink:0;
}
.friend-message-toast-title { font-weight:800; font-size:14px; color:#e6edf3; }
.friend-message-toast-text { margin-top:2px; color:#8b949e; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }

.friend-chat-screen.hidden { display:none; }
.friend-chat-screen {
  position:fixed;
  inset:0;
  z-index:10020;
  background:radial-gradient(circle at top left,rgba(31,111,235,.22),transparent 35%),rgba(1,4,9,.92);
  backdrop-filter:blur(14px);
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:18px;
}
body.friend-chat-open { overflow:hidden; }
.friend-chat-shell {
  width:min(760px,100%);
  height:calc(100vh - 36px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(88,166,255,.26);
  border-radius:22px;
  background:
    linear-gradient(180deg,rgba(22,27,34,.98),rgba(13,17,23,.98)),
    radial-gradient(circle at top right,rgba(46,160,67,.18),transparent 30%);
  box-shadow:0 30px 80px rgba(0,0,0,.65), inset 0 0 40px rgba(88,166,255,.06);
}
.friend-chat-screen-header {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid #30363d;
  background:rgba(13,17,23,.96);
}
.friend-chat-back,
.friend-chat-close-screen {
  width:38px;
  height:38px;
  border:none;
  border-radius:12px;
  background:#21262d;
  color:#e6edf3;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
.friend-chat-close-screen { margin-left:auto; font-size:18px; }
.friend-chat-avatar { width:72px; height:46px; border-radius:9px; }
.friend-chat-head-info { min-width:0; }
.friend-chat-title { font-size:19px; font-weight:900; color:#e6edf3; line-height:1.1; }
.friend-chat-subtitle { margin-top:3px; font-size:12px; color:#8b949e; }
.friend-chat-subtitle.online { color:#3fb950; }
.friend-chat-messages {
  flex:1;
  min-height:0;
  max-height:none;
  padding:18px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:
    linear-gradient(rgba(1,4,9,.74),rgba(1,4,9,.74)),
    radial-gradient(circle at 20% 20%,rgba(88,166,255,.10),transparent 26%),
    radial-gradient(circle at 80% 80%,rgba(46,160,67,.08),transparent 28%);
}
.friend-chat-msg { max-width:min(76%,520px); }
.friend-chat-msg.mine { align-self:flex-end; align-items:flex-end; }
.friend-chat-msg.theirs { align-self:flex-start; align-items:flex-start; }
.friend-chat-bubble {
  padding:10px 13px;
  border-radius:16px 16px 16px 5px;
  background:#21262d;
  border:1px solid rgba(255,255,255,.04);
  color:#e6edf3;
  font-size:15px;
  line-height:1.35;
  word-break:break-word;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.friend-chat-msg.mine .friend-chat-bubble {
  border-radius:16px 16px 5px 16px;
  background:#238636;
  color:#fff;
}
.friend-chat-msg.pending .friend-chat-bubble { opacity:.72; }
.friend-chat-msg.failed .friend-chat-bubble { background:#5a1f1f; }
.friend-chat-time { color:#6e7681; font-size:11px; margin-top:4px; }
.friend-chat-compose {
  border-top:1px solid #30363d;
  padding:12px;
  background:rgba(13,17,23,.98);
}
.friend-chat-compose textarea {
  width:100%;
  min-height:52px;
  max-height:120px;
  resize:vertical;
  background:#010409;
  border:1px solid #30363d;
  border-radius:15px;
  color:#e6edf3;
  padding:12px 14px;
  outline:none;
  font-family:'Rajdhani',sans-serif;
  font-size:16px;
}
.friend-chat-compose textarea:focus { border-color:#58a6ff; box-shadow:0 0 0 3px rgba(88,166,255,.10); }
.friend-chat-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:8px;
  color:#8b949e;
  font-size:12px;
}
.friend-chat-bottom button {
  min-width:58px;
  padding:10px 16px;
  background:#238636;
  border:none;
  border-radius:14px;
  color:white;
  font-family:'Rajdhani',sans-serif;
  font-size:17px;
  font-weight:900;
  cursor:pointer;
}
.friend-chat-bottom button:hover { background:#2ea043; }

@media (max-width: 640px) {
  .friend-message-toast-container { top:auto; bottom:92px; right:14px; left:14px; }
  .friend-message-toast { width:100%; }
  .friend-chat-screen { padding:0; }
  .friend-chat-shell { width:100%; height:100vh; border-radius:0; border-left:0; border-right:0; }
  .friend-chat-msg { max-width:84%; }
  .friend-own-avatar { width:84px; height:54px; }
}

/* ════════════════════════════════════════
   GLOBAL PLAYERS / LEADERBOARD
════════════════════════════════════════ */
.game-menu-card.global-open {
  max-width: 880px;
  width: min(880px, calc(100vw - 32px));
}

.menu-tab.global-tab {
  color: #9ecbff;
}
.menu-tab.global-tab.active {
  color: #58a6ff;
}

.global-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.global-panel-head h3 {
  color: var(--text);
  font-size: 20px;
  margin: 0 0 4px;
  letter-spacing: .5px;
}
.global-panel-head p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}
.global-refresh-btn {
  padding: 9px 14px;
  background: #21262d;
  border: 1px solid #30363d;
  color: #c9d1d9;
  border-radius: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: .15s;
}
.global-refresh-btn:hover {
  border-color: #58a6ff;
  color: #f0f6fc;
  background: #30363d;
}

.global-my-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  margin-bottom: 18px;
  border: 1px solid rgba(88,166,255,.32);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(47,129,247,.18), rgba(22,27,34,.96));
  box-shadow: inset 0 0 24px rgba(47,129,247,.08);
}
.global-my-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.global-my-name {
  color: #f0f6fc;
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.global-my-meta {
  color: #8b949e;
  font-size: 13px;
}
.global-my-meta strong { color: #58a6ff; }
.global-my-score {
  text-align: right;
  flex-shrink: 0;
}
.global-my-score span {
  display: block;
  color: #58a6ff;
  font-family: 'Share Tech Mono', monospace;
  font-size: 28px;
  line-height: 1;
}
.global-my-score label {
  display: block;
  margin: 3px 0 0;
  color: #8b949e;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.global-section-title {
  color: #f0f6fc;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .7px;
  margin: 16px 0 10px;
  text-transform: uppercase;
}
.global-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.global-section-row .global-section-title { margin: 0; }
.global-search {
  width: 220px !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  border: 1px solid #30363d !important;
  background: #0d1117 !important;
  color: #f0f6fc !important;
  font-size: 14px !important;
  font-family: 'Rajdhani', sans-serif !important;
  outline: none !important;
}
.global-search:focus { border-color: #58a6ff !important; }

.global-top-list,
.global-users-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.global-users-list {
  max-height: 330px;
  overflow-y: auto;
  padding-right: 4px;
}

.global-top-card,
.global-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(13,17,23,.82);
  border: 1px solid #30363d;
  border-radius: 14px;
  padding: 10px 12px;
  transition: transform .15s, border-color .15s, background .15s;
}
.global-top-card:hover,
.global-user-row:hover {
  transform: translateY(-1px);
  border-color: rgba(88,166,255,.7);
  background: rgba(33,38,45,.9);
}
.global-top-card.rank-1 {
  border-color: rgba(210,153,34,.55);
  background: linear-gradient(135deg, rgba(210,153,34,.12), rgba(13,17,23,.9));
}
.global-top-card.rank-2 {
  border-color: rgba(201,209,217,.42);
}
.global-top-card.rank-3 {
  border-color: rgba(188,140,95,.45);
}
.global-top-rank,
.global-user-rank {
  width: 42px;
  color: #8b949e;
  font-family: 'Share Tech Mono', monospace;
  font-size: 15px;
  text-align: center;
  flex-shrink: 0;
}
.global-top-card.rank-1 .global-top-rank,
.global-top-card.rank-2 .global-top-rank,
.global-top-card.rank-3 .global-top-rank {
  font-size: 22px;
}
.global-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(88,166,255,.35);
  background: linear-gradient(135deg, #2f81f7, #6f42c1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-weight: 800;
  flex-shrink: 0;
}
.global-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.global-my-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}
.global-top-info,
.global-user-info {
  min-width: 0;
  flex: 1;
}
.global-top-name,
.global-user-name {
  color: #f0f6fc;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.global-top-meta,
.global-user-meta {
  color: #8b949e;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.global-top-score,
.global-user-rating {
  min-width: 64px;
  text-align: right;
  color: #58a6ff;
  font-family: 'Share Tech Mono', monospace;
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
}
.global-top-score label {
  display: block;
  color: #8b949e;
  font-size: 9px;
  text-transform: uppercase;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 1px;
  margin-top: 1px;
}
.global-loading,
.global-empty {
  color: #8b949e;
  text-align: center;
  border: 1px dashed #30363d;
  border-radius: 12px;
  padding: 16px;
  background: rgba(13,17,23,.55);
}

@media (max-width: 768px) {
  .game-menu-card.global-open {
    width: 100%;
    max-width: 100%;
    margin: 16px 0;
  }
  .menu-tabs {
    overflow-x: auto;
    gap: 4px;
    border-bottom: 0;
    padding-bottom: 4px;
  }
  .menu-tab {
    min-width: max-content;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-bottom-width: 2px !important;
  }
  .global-panel-head,
  .global-section-row,
  .global-my-card {
    flex-direction: column;
    align-items: stretch;
  }
  .global-refresh-btn,
  .global-search {
    width: 100% !important;
  }
  .global-my-score {
    text-align: left;
  }
  .global-top-card,
  .global-user-row {
    gap: 8px;
    padding: 9px;
  }
  .global-top-rank,
  .global-user-rank {
    width: 32px;
    font-size: 12px;
  }
  .global-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
  .global-top-score,
  .global-user-rating {
    min-width: 54px;
    font-size: 16px;
  }
  .global-top-meta,
  .global-user-meta {
    font-size: 11px;
  }
}

/* ════════════════════════════════════════
   MOBILE BUG FIXES — centered board + visible chat send button
   Added after all sections so it safely overrides older mobile rules.
════════════════════════════════════════ */
#gameScreen.screen {
  overflow-x: hidden;
}

.game-board-wrap,
.game-layout,
.left-panel,
.right-panel {
  max-width: 100%;
}

@media (max-width: 768px) {
  #gameScreen.screen {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .game-area {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    padding-left: 4px;
    padding-right: 4px;
    overflow-x: hidden;
  }

  .game-board-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }

  .game-layout {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }

  .left-panel {
    width: min(100%, 440px);
    max-width: calc(100vw - 8px);
    margin-left: auto;
    margin-right: auto;
    padding: 10px 8px;
    align-items: center;
    overflow: hidden;
  }

  #status,
  .captured-bar,
  .chess-clocks,
  .controls {
    width: 100%;
    max-width: 100%;
  }

  #board {
    width: min(100%, calc(100vw - 28px), 424px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin-left: auto;
    margin-right: auto;
    flex-shrink: 0;
  }

  .right-panel {
    width: min(100%, 440px);
    max-width: calc(100vw - 8px);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 420px) {
  .left-panel {
    padding-left: 6px;
    padding-right: 6px;
  }

  #board {
    width: min(100%, calc(100vw - 22px)) !important;
  }

  .controls button {
    min-width: 72px;
  }
}

/* Mobile full-screen friend chat: use dynamic viewport height and keep send button visible. */
@media (max-width: 640px) {
  .friend-chat-screen {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .friend-chat-shell {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .friend-chat-screen-header {
    flex-shrink: 0;
    padding: max(10px, env(safe-area-inset-top)) 10px 10px;
  }

  .friend-chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .friend-chat-compose {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    align-items: end;
    gap: 8px;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom));
    background: rgba(13,17,23,.99);
  }

  .friend-chat-compose textarea {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-height: 52px;
    max-height: 84px;
    resize: none;
    padding: 13px 14px;
  }

  .friend-chat-bottom {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin: 0;
    height: 52px;
  }

  #friendChatCounter {
    display: none;
  }

  .friend-chat-bottom button {
    width: 52px;
    min-width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 18px;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ════════════════════════════════════════
   MAIN MENU PANELS + PUBLIC/SPECTATOR/ARENA
════════════════════════════════════════ */
.menu-dashboard-card {
  width: min(1180px, calc(100vw - 32px)) !important;
  max-width: 1180px !important;
  margin: 72px auto 32px !important;
  padding: 24px !important;
}
.menu-dashboard-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
  border-bottom:1px solid rgba(48,54,61,.9);
  padding-bottom:16px;
}
.menu-dashboard-head h2 { margin:0 0 6px !important; }
.menu-dashboard-head p { margin:0; color:#8b949e; font-size:14px; }
.menu-dashboard-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}
.feature-panel {
  position:relative;
  min-width:0;
  background:linear-gradient(180deg,rgba(13,17,23,.95),rgba(22,27,34,.92));
  border:1px solid rgba(48,54,61,.95);
  border-radius:18px;
  padding:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.22), inset 0 0 24px rgba(88,166,255,.03);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.feature-panel:hover,
.feature-panel.menu-focus {
  transform:translateY(-2px);
  border-color:rgba(88,166,255,.65);
  box-shadow:0 18px 50px rgba(0,0,0,.30), 0 0 22px rgba(47,129,247,.12);
}
.feature-panel-head {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.feature-icon {
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(47,129,247,.12);
  border:1px solid rgba(88,166,255,.24);
  font-size:24px;
  flex-shrink:0;
}
.feature-panel h3 {
  margin:0 0 2px;
  color:#f0f6fc;
  font-size:18px;
  font-weight:900;
}
.feature-panel p { margin:0; color:#8b949e; font-size:13px; line-height:1.3; }
.feature-panel label:not(.menu-check-row) {
  display:block;
  margin:10px 0 6px;
  color:#8b949e;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-weight:800;
}
.menu-check-row {
  display:flex;
  align-items:center;
  gap:8px;
  margin:12px 0;
  color:#c9d1d9;
  font-size:13px;
  cursor:pointer;
}
.menu-check-row input { accent-color:#2f81f7; }
.feature-action-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:10px 0 12px; }
.feature-global,
.feature-public,
.feature-arena { grid-column:span 2; }
.public-games-list,
.arena-leaderboard { display:flex; flex-direction:column; gap:8px; max-height:360px; overflow-y:auto; padding-right:4px; }
.public-game-card,
.arena-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  background:rgba(1,4,9,.42);
  border:1px solid #30363d;
  border-radius:14px;
}
.public-game-title { font-weight:900; color:#e6edf3; font-size:15px; }
.public-game-title span { color:#58a6ff; font-family:'Share Tech Mono',monospace; }
.public-game-players { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:5px; color:#c9d1d9; font-size:13px; }
.public-game-players b { color:#6e7681; font-size:11px; }
.public-game-meta { color:#8b949e; font-size:12px; margin-top:4px; }
.public-game-actions { display:flex; gap:8px; flex-shrink:0; }
.public-game-actions button,
.danger-main-btn {
  border:none;
  border-radius:10px;
  padding:9px 13px;
  font-family:'Rajdhani',sans-serif;
  font-weight:900;
  cursor:pointer;
  color:#fff;
  background:#238636;
}
.public-game-actions .public-join-btn { background:#238636 !important; }
.public-game-actions .public-watch-btn { background:#1f6feb !important; }
.public-game-actions button:hover,
.danger-main-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.arena-status-card {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px;
  margin-bottom:12px;
  border:1px solid rgba(210,153,34,.35);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(210,153,34,.11),rgba(13,17,23,.85));
}
.arena-label { color:#8b949e; font-size:11px; text-transform:uppercase; letter-spacing:1px; font-weight:800; }
.arena-title { color:#f0f6fc; font-weight:900; font-size:16px; }
.arena-timer { font-family:'Share Tech Mono',monospace; color:#d29922; font-size:26px; }
.arena-rank { width:48px; color:#58a6ff; font-family:'Share Tech Mono',monospace; }
.arena-player { flex:1; min-width:0; color:#f0f6fc; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.arena-record { color:#8b949e; font-size:12px; }
.arena-points { color:#3fb950; font-family:'Share Tech Mono',monospace; font-weight:900; }
.friend-profile-tap { padding:0; margin:0; border:0; background:transparent; cursor:pointer; flex-shrink:0; }
.friend-profile-card { width:min(440px,94vw); }
.friend-profile-body { padding:18px; }
.friend-profile-hero { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.friend-profile-banner {
  width:112px;
  height:68px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#1f6feb,#8957e5);
  border:1px solid rgba(88,166,255,.35);
  overflow:hidden;
  font-size:28px;
  font-weight:900;
  color:#fff;
}
.friend-profile-banner img { width:100%; height:100%; object-fit:cover; }
.friend-profile-hero h3 { margin:0; color:#f0f6fc; font-size:22px; }
.friend-profile-hero p { margin:4px 0 0; color:#8b949e; }
.friend-profile-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.friend-profile-stats div { background:#0d1117; border:1px solid #30363d; border-radius:12px; padding:10px 6px; text-align:center; }
.friend-profile-stats b { display:block; color:#58a6ff; font-family:'Share Tech Mono',monospace; font-size:18px; }
.friend-profile-stats span { color:#8b949e; font-size:11px; text-transform:uppercase; }
.friend-profile-record { padding:10px 12px; border:1px dashed #30363d; border-radius:12px; color:#c9d1d9; text-align:center; }
.friend-profile-actions { display:flex; gap:8px; margin-top:14px; }
.friend-profile-actions button { flex:1; padding:10px; }
.remove-friend-card { width:min(380px,94vw); }
.remove-friend-body { padding:20px; text-align:center; }
.remove-friend-icon { font-size:36px; margin-bottom:8px; }
.remove-friend-body h3 { margin:0 0 6px; color:#f0f6fc; font-size:22px; }
.remove-friend-body p { margin:0; color:#8b949e; }
.remove-friend-actions { display:flex; gap:10px; margin-top:18px; }
.remove-friend-actions button { flex:1; }
.danger-main-btn { background:#da3633; }
.friend-chat-time .seen,
.friend-chat-time .delivered { color:#58a6ff; }

@media (max-width: 900px) {
  .menu-dashboard-card { width:100% !important; margin:16px 0 28px !important; padding:16px !important; }
  .menu-dashboard-head { flex-direction:column; }
  .menu-dashboard-grid { grid-template-columns:1fr; }
  .feature-global,
  .feature-public,
  .feature-arena { grid-column:span 1; }
}
@media (max-width: 560px) {
  .public-game-card,
  .arena-row { align-items:flex-start; flex-direction:column; }
  .public-game-actions { width:100%; }
  .public-game-actions button { flex:1; }
  .friend-profile-stats { grid-template-columns:repeat(2,1fr); }
}

/* ── FIXED MAIN MENU: hub cards + separate screens ───────── */
.menu-hub { width:100%; }
.menu-section-views { width:100%; }
.menu-card-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}
.menu-feature-card {
  min-height:170px;
  text-align:left;
  border:1px solid rgba(48,54,61,.95);
  border-radius:22px;
  padding:18px;
  cursor:pointer;
  font-family:'Rajdhani',sans-serif;
  color:#f0f6fc;
  background:linear-gradient(160deg,rgba(22,27,34,.96),rgba(13,17,23,.94));
  box-shadow:0 18px 45px rgba(0,0,0,.24), inset 0 0 30px rgba(88,166,255,.03);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
}
.menu-feature-card:hover,
.menu-feature-card:focus-visible {
  transform:translateY(-4px);
  border-color:rgba(88,166,255,.78);
  box-shadow:0 22px 60px rgba(0,0,0,.34), 0 0 28px rgba(47,129,247,.14);
  outline:none;
}
.menu-feature-card strong {
  display:block;
  font-size:24px;
  letter-spacing:.8px;
  text-transform:uppercase;
}
.menu-feature-card small {
  display:block;
  color:#8b949e;
  font-size:14px;
  line-height:1.35;
}
.menu-feature-icon {
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:rgba(47,129,247,.12);
  border:1px solid rgba(88,166,255,.25);
  font-size:28px;
}
.menu-feature-card.ai .menu-feature-icon { background:rgba(47,129,247,.16); }
.menu-feature-card.friend .menu-feature-icon { background:rgba(63,185,80,.14); }
.menu-feature-card.public .menu-feature-icon { background:rgba(88,166,255,.14); }
.menu-feature-card.arena .menu-feature-icon { background:rgba(210,153,34,.16); }
.menu-feature-card.join .menu-feature-icon { background:rgba(163,113,247,.14); }
.menu-feature-card.global .menu-feature-icon { background:rgba(56,139,253,.14); }
.menu-section-panel {
  max-width:760px;
  margin:0 auto;
}
.menu-section-panel#panelPublic,
.menu-section-panel#panelArena,
.menu-section-panel#panelGlobal { max-width:980px; }
.menu-section-panel#panelPremium { max-width:1040px; }
.menu-back-btn {
  border:1px solid #30363d;
  background:#161b22;
  color:#c9d1d9;
  border-radius:14px;
  padding:10px 14px;
  margin-bottom:16px;
  font-family:'Rajdhani',sans-serif;
  font-weight:900;
  cursor:pointer;
}
.menu-back-btn:hover { border-color:#58a6ff; color:#fff; }
.arena-help-card {
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:12px 0;
  padding:12px;
  border-radius:14px;
  border:1px dashed rgba(210,153,34,.38);
  background:rgba(210,153,34,.08);
  color:#c9d1d9;
  font-size:13px;
}
.arena-help-card b { color:#f2cc60; }
.arena-actions-row .primary-btn:disabled {
  opacity:.72;
  cursor:not-allowed;
  filter:saturate(.8);
}
.arena-match-popup {
  position:fixed;
  right:18px;
  bottom:22px;
  z-index:9999;
  width:min(380px, calc(100vw - 28px));
  animation:arenaPopIn .18s ease-out;
}
@keyframes arenaPopIn { from { transform:translateY(18px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.arena-match-card {
  padding:16px;
  border-radius:22px;
  background:linear-gradient(160deg,rgba(22,27,34,.98),rgba(13,17,23,.98));
  border:1px solid rgba(210,153,34,.55);
  box-shadow:0 22px 70px rgba(0,0,0,.55), 0 0 28px rgba(210,153,34,.18);
}
.arena-match-top { display:flex; align-items:center; gap:12px; }
.arena-match-icon {
  width:52px;
  height:52px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(210,153,34,.16);
  border:1px solid rgba(210,153,34,.45);
  font-size:26px;
}
.arena-match-title { color:#f0f6fc; font-size:21px; font-weight:900; text-transform:uppercase; letter-spacing:.8px; }
.arena-match-sub { color:#8b949e; font-size:14px; margin-top:2px; }
.arena-match-progress {
  height:7px;
  background:#30363d;
  border-radius:999px;
  overflow:hidden;
  margin:14px 0;
}
.arena-match-progress span {
  display:block;
  width:100%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#3fb950,#d29922,#f85149);
  transition:width .12s linear;
}
.arena-match-actions { display:flex; gap:10px; }
.arena-match-actions button {
  flex:1;
  border:none;
  border-radius:13px;
  padding:11px 12px;
  font-family:'Rajdhani',sans-serif;
  font-weight:900;
  cursor:pointer;
  color:#fff;
}
.arena-accept { background:#238636; }
.arena-decline { background:#da3633; }
@media (max-width: 900px) {
  .menu-card-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .menu-feature-card { min-height:150px; }
}
@media (max-width: 560px) {
  .menu-card-grid { grid-template-columns:1fr; }
  .menu-feature-card { min-height:132px; }
  .menu-feature-card strong { font-size:21px; }
  .arena-match-popup { left:14px; right:14px; bottom:max(16px, env(safe-area-inset-bottom)); width:auto; }
}

/* ════════════════════════════════════════
   MAIN MENU WIDTH FIX — no horizontal scrolling / no clipped cards
   Keeps all 6 main menu cards visible in a clean 3x2 grid on desktop.
════════════════════════════════════════ */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

#gameScreen.screen,
#gameArea.game-area {
  max-width: 100vw;
  overflow-x: hidden !important;
}

#gameArea.game-area {
  width: 100%;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

#menuCard.menu-dashboard-card {
  width: 100% !important;
  max-width: min(1180px, calc(100vw - 48px)) !important;
  margin: 48px auto 32px !important;
  padding: 24px !important;
  overflow: visible !important;
}

#menuHub,
.menu-card-grid {
  width: 100%;
  max-width: 100%;
  overflow: visible !important;
}

.menu-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.menu-feature-card {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 150px !important;
  overflow: hidden;
}

.menu-feature-card strong,
.menu-feature-card small {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  #gameArea.game-area {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #menuCard.menu-dashboard-card {
    max-width: calc(100vw - 32px) !important;
    margin-top: 28px !important;
  }
  .menu-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .menu-feature-card {
    min-height: 138px !important;
  }
}

@media (max-width: 560px) {
  #gameArea.game-area {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #menuCard.menu-dashboard-card {
    max-width: calc(100vw - 20px) !important;
    padding: 14px !important;
    margin-top: 18px !important;
  }
  .menu-dashboard-head {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
  }
  .menu-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .menu-feature-card {
    min-height: 116px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    gap: 7px !important;
  }
  .menu-feature-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-size: 22px !important;
  }
  .menu-feature-card strong {
    font-size: 16px !important;
    line-height: 1.05 !important;
  }
  .menu-feature-card small {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 340px) {
  .menu-card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Profile / friends image delete controls ───────────────── */
.pd-delete-avatar-btn {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(248,81,73,.55);
  border-radius: 50%;
  background: #2d1114;
  color: #ffb4ae;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.pd-delete-avatar-btn:hover { background:#da3633; color:#fff; border-color:#ff7b72; }
.friend-image-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.friend-image-delete-btn {
  padding:8px 10px;
  background:#2d1114;
  border:1px solid rgba(248,81,73,.45);
  border-radius:8px;
  color:#ffb4ae;
  font-family:'Rajdhani',sans-serif;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.friend-image-delete-btn:hover { background:#da3633; color:#fff; border-color:#ff7b72; }
@media (max-width: 640px) {
  .friend-image-actions { flex-direction: row; }
  .friend-image-actions .friend-image-edit-btn,
  .friend-image-actions .friend-image-delete-btn { flex: 1; text-align: center; }
}

/* === ChessVex chat feature update === */
.friend-public-check { margin:10px 0 12px; }
.mp-chat-header { display:flex !important; align-items:center; justify-content:space-between; gap:8px; }
.chat-mini-btn { background:#21262d; border:1px solid #30363d; color:#c9d1d9; border-radius:8px; padding:4px 8px; cursor:pointer; }
.chat-tools, .friend-chat-tools-row { display:flex; gap:8px; padding:8px; border-bottom:1px solid rgba(48,54,61,.75); background:rgba(13,17,23,.65); flex-wrap:wrap; }
.chat-tools button, .friend-chat-tools-row button { border:1px solid #30363d; border-radius:999px; padding:6px 10px; background:#161b22; color:#c9d1d9; font-family:'Rajdhani',sans-serif; font-weight:700; cursor:pointer; }
.chat-tools button:hover, .friend-chat-tools-row button:hover { border-color:#2f81f7; color:#58a6ff; }
.chat-picker { display:flex; gap:6px; flex-wrap:wrap; padding:8px; background:#0d1117; border-bottom:1px solid #30363d; max-height:105px; overflow:auto; }
.chat-picker.hidden { display:none; }
.chat-picker button { border:1px solid #30363d; border-radius:10px; padding:6px 9px; background:#161b22; color:#e6edf3; cursor:pointer; font-family:'Rajdhani',sans-serif; }
.chat-picker button:hover { background:#1f6feb; border-color:#58a6ff; color:#fff; }
.chat-reply-preview { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; background:rgba(47,129,247,.10); border-bottom:1px solid rgba(88,166,255,.35); color:#c9d1d9; font-size:12px; }
.chat-reply-preview.hidden { display:none; }
.chat-reply-preview span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-reply-preview button { background:transparent; border:0; color:#f85149; font-size:18px; cursor:pointer; }
.mp-chat-messages { gap:8px !important; }
.chat-msg:not(.system) { position:relative; max-width:86%; padding:8px 10px; border-radius:12px; background:#21262d; color:#e6edf3; }
.chat-msg.mine { align-self:flex-end; background:#1f6feb; }
.chat-msg.theirs { align-self:flex-start; background:#21262d; }
.chat-msg.deleted .chat-text, .friend-chat-msg.deleted .friend-chat-bubble span { opacity:.65; font-style:italic; }
.chat-msg .chat-text { color:inherit !important; }
.chat-msg .chat-name { display:block; font-size:11px; opacity:.75; margin-bottom:2px; }
.chat-msg-actions, .friend-chat-actions { display:flex; gap:4px; margin-top:5px; justify-content:flex-end; opacity:.85; }
.chat-msg-actions button, .friend-chat-actions button { border:0; background:rgba(0,0,0,.22); color:#fff; border-radius:8px; padding:2px 6px; cursor:pointer; font-size:11px; }
.chat-quoted, .friend-chat-quoted { border-left:3px solid #58a6ff; padding:4px 6px; margin-bottom:5px; background:rgba(255,255,255,.08); border-radius:6px; font-size:11px; opacity:.9; }
.friend-chat-tools-row { border-top:1px solid #30363d; }
.friend-picker { padding:8px 14px; }
.friend-chat-messages.bg-default, .mp-chat-messages.bg-default { background:#070b12; }
.friend-chat-messages.bg-neon, .mp-chat-messages.bg-neon { background:radial-gradient(circle at 20% 20%, rgba(47,129,247,.16), transparent 34%), radial-gradient(circle at 80% 20%, rgba(248,81,73,.12), transparent 30%), #070b12; }
.friend-chat-messages.bg-board, .mp-chat-messages.bg-board { background-color:#080d13; background-image:linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%),linear-gradient(-45deg, rgba(255,255,255,.025) 25%, transparent 25%); background-size:28px 28px; }
.friend-chat-messages.bg-blue, .mp-chat-messages.bg-blue { background:linear-gradient(135deg, #07111f, #0b1930 48%, #08101d); }
.friend-chat-bubble { position:relative; }
.friend-chat-actions { opacity:0; transition:opacity .15s ease; }
.friend-chat-msg:hover .friend-chat-actions { opacity:1; }
@media (max-width: 768px) {
  .chat-tools, .friend-chat-tools-row { gap:6px; padding:7px; }
  .chat-tools button, .friend-chat-tools-row button { padding:6px 8px; font-size:12px; }
  .chat-picker { max-height:92px; }
}

/* ════════════════════════════════════════
   CHAT READABILITY + WHATSAPP STYLE STICKERS
   Added to fix small game chat and improve all chat stickers/backgrounds.
════════════════════════════════════════ */
@media (min-width: 901px) {
  .game-layout {
    grid-template-columns: minmax(560px, auto) minmax(340px, 390px) !important;
  }
  .right-panel {
    width: min(390px, 30vw) !important;
  }
}

.mp-chat {
  height: clamp(360px, 48vh, 520px) !important;
  min-height: 360px !important;
  margin-top: 14px !important;
  border-radius: 18px !important;
  background: rgba(8,13,20,.98) !important;
  box-shadow: inset 0 0 0 1px rgba(88,166,255,.06), 0 16px 44px rgba(0,0,0,.24) !important;
}

.mp-chat-header {
  min-height: 46px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: #dbe7ff !important;
  background: linear-gradient(135deg, rgba(13,17,23,.96), rgba(19,29,45,.96)) !important;
}

.mp-chat-tools,
.chat-tools {
  padding: 10px !important;
  gap: 9px !important;
}

.mp-chat-tools button,
.chat-tools button,
.friend-chat-tools-row button {
  min-height: 36px !important;
  font-size: 14px !important;
}

.mp-chat-messages {
  flex: 1 1 auto !important;
  min-height: 230px !important;
  padding: 14px !important;
  gap: 11px !important;
  font-size: 16px !important;
}

.chat-msg:not(.system) {
  padding: 11px 13px !important;
  border-radius: 17px 17px 17px 6px !important;
  font-size: 16px !important;
  line-height: 1.42 !important;
  max-width: 88% !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.20) !important;
}

.chat-msg.mine {
  border-radius: 17px 17px 6px 17px !important;
  background: #238636 !important;
}

.chat-msg.theirs {
  background: #242b34 !important;
}

.chat-msg.system {
  font-size: 13px !important;
  padding: 8px 4px !important;
  color: #8b949e !important;
}

.chat-msg .chat-name {
  font-size: 12px !important;
  letter-spacing: .3px !important;
  opacity: .78 !important;
}

.mp-chat-input-row {
  min-height: 58px !important;
  flex-shrink: 0 !important;
  background: rgba(13,17,23,.98) !important;
}

.mp-chat-input {
  min-height: 58px !important;
  padding: 14px 16px !important;
  font-size: 17px !important;
}

.mp-chat-send {
  min-width: 58px !important;
  font-size: 21px !important;
  color: #58a6ff !important;
}

.chat-picker {
  padding: 10px !important;
  gap: 9px !important;
  max-height: 190px !important;
}

.chat-picker button {
  font-size: 15px !important;
  border-radius: 14px !important;
  padding: 9px 12px !important;
}

.chat-picker.emoji-picker button {
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 8px !important;
  font-size: 23px !important;
  line-height: 1 !important;
}

.chat-picker.sticker-picker {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important;
}

.chat-picker.hidden { display: none !important; }

.chat-picker.sticker-picker button,
.chat-picker-sticker {
  min-height: 86px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 10px 8px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(33,38,45,.96), rgba(15,20,28,.96)) !important;
  border-color: rgba(88,166,255,.25) !important;
}

.chat-sticker-icon {
  display: block !important;
  font-size: 42px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)) !important;
}

.chat-sticker-label {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  color: #dbe7ff !important;
  text-align: center !important;
}

.chat-msg.sticker-msg,
.friend-chat-msg.sticker-msg .friend-chat-bubble {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 4px !important;
}

.chat-msg.sticker-msg .chat-name {
  display: none !important;
}

.chat-sticker {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 106px !important;
  min-height: 102px !important;
  padding: 10px 12px !important;
  border-radius: 24px !important;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.18), transparent 38%), linear-gradient(145deg, rgba(29,38,54,.95), rgba(8,12,20,.95)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #fff !important;
  text-align: center !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.35) !important;
}

.chat-sticker .chat-sticker-icon {
  font-size: 58px !important;
}

.chat-sticker .chat-sticker-label {
  margin-top: 4px !important;
  font-size: 13px !important;
}

.friend-chat-bubble {
  font-size: 17px !important;
  line-height: 1.42 !important;
  padding: 12px 15px !important;
}

.friend-chat-messages {
  gap: 12px !important;
  font-size: 17px !important;
}

.friend-chat-tools-row {
  padding: 10px 12px !important;
  gap: 9px !important;
}

.friend-chat-compose textarea {
  font-size: 17px !important;
}

.friend-chat-messages.bg-default,
.mp-chat-messages.bg-default {
  background: #070b12 !important;
}

.friend-chat-messages.bg-whatsapp,
.mp-chat-messages.bg-whatsapp {
  background-color: #07130f !important;
  background-image:
    radial-gradient(circle at 12px 12px, rgba(255,255,255,.035) 1.5px, transparent 2px),
    radial-gradient(circle at 38px 34px, rgba(46,160,67,.045) 2px, transparent 3px) !important;
  background-size: 52px 52px !important;
}

.friend-chat-messages.bg-purple,
.mp-chat-messages.bg-purple {
  background: radial-gradient(circle at top left, rgba(163,113,247,.22), transparent 32%), linear-gradient(135deg, #0b0615, #120b25 54%, #070b12) !important;
}

.friend-chat-messages.bg-forest,
.mp-chat-messages.bg-forest {
  background: radial-gradient(circle at 20% 10%, rgba(63,185,80,.16), transparent 34%), linear-gradient(135deg, #07120d, #0b1d17 55%, #050908) !important;
}

.friend-chat-messages.bg-royal,
.mp-chat-messages.bg-royal {
  background: linear-gradient(135deg, #100b04, #1c1405 42%, #08111f), radial-gradient(circle at 80% 0%, rgba(255,201,71,.18), transparent 32%) !important;
}

.friend-chat-messages.bg-carbon,
.mp-chat-messages.bg-carbon {
  background-color: #07090d !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.035) 25%, transparent 25%), linear-gradient(225deg, rgba(255,255,255,.025) 25%, transparent 25%) !important;
  background-size: 22px 22px !important;
}

.friend-chat-messages.bg-sunset,
.mp-chat-messages.bg-sunset {
  background: radial-gradient(circle at 10% 0%, rgba(255,123,114,.16), transparent 34%), radial-gradient(circle at 90% 10%, rgba(255,201,71,.12), transparent 30%), linear-gradient(135deg, #13080a, #160f18 50%, #07111f) !important;
}

@media (max-width: 900px) {
  .mp-chat {
    width: 100% !important;
    height: min(62vh, 520px) !important;
    min-height: 390px !important;
  }
  .mp-chat-messages {
    min-height: 260px !important;
  }
}

@media (max-width: 480px) {
  .chat-msg:not(.system),
  .friend-chat-bubble {
    font-size: 16px !important;
  }
  .chat-picker.sticker-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .chat-sticker .chat-sticker-icon {
    font-size: 50px !important;
  }
}

/* ════════════════════════════════════════
   Notification Center + Public Profile Update
════════════════════════════════════════ */
body.profile-theme-blue { --accent: #2f81f7; --accent-hover:#1f6feb; }
body.profile-theme-gold { --accent: #d29922; --accent-hover:#b8860b; }
body.profile-theme-red { --accent: #f85149; --accent-hover:#da3633; }
body.profile-theme-purple { --accent: #a371f7; --accent-hover:#8957e5; }

.top-bar { justify-content: flex-start; gap: 10px; }
.top-brand { margin-right: auto; display:flex; align-items:center; gap:10px; }
.top-notifications-btn {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.top-notifications-btn:hover { color: var(--accent); border-color: var(--border); background: var(--card-2); }
.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}
.notification-badge.dnd-active { background: var(--yellow); }

.pd-custom-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.pd-mini-label {
  font-size: 10px;
  margin: 8px 0 4px;
  color: var(--muted);
  letter-spacing: 1px;
}
.pd-custom-section select,
.pd-custom-section textarea {
  width: 100%;
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 9px;
  padding: 8px 10px;
  font-family: inherit;
  outline: none;
}
.pd-custom-section textarea {
  min-height: 64px;
  resize: vertical;
}
.pd-custom-section select:focus,
.pd-custom-section textarea:focus { border-color: var(--accent); }
.pd-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.pd-small-save {
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}
.pd-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--text);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.pd-toggle-row input { width: auto; accent-color: var(--accent); }

.notification-center-card { width: min(520px, 94vw); max-height: 84vh; display:flex; flex-direction:column; }
.notification-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.notification-dnd-row { margin: 0; }
.notification-clear-btn { width: auto; margin: 0; padding: 8px 12px; }
.notification-center-list {
  padding: 10px;
  overflow-y: auto;
  max-height: 62vh;
}
.notification-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
}
.notification-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  background: rgba(13,17,23,.6);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
}
.notification-item.unread { border-color: var(--accent); background: rgba(47,129,247,.08); }
.notification-item:hover { background: var(--card-2); }
.notification-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(47,129,247,.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex: 0 0 auto;
}
.notification-content { min-width: 0; flex: 1; }
.notification-title { color: var(--text); font-weight: 800; font-size: 15px; }
.notification-text { color: #c9d1d9; font-size: 13px; margin-top: 2px; word-break: break-word; }
.notification-time { color: var(--muted); font-size: 11px; margin-top: 5px; }

.public-profile-card { width: min(520px, 94vw); overflow:hidden; }
.public-profile-body { padding: 18px; }
.public-profile-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(47,129,247,.24), rgba(13,17,23,.8));
  margin-bottom: 14px;
}
.public-theme-gold { background: linear-gradient(135deg, rgba(210,153,34,.28), rgba(13,17,23,.8)); }
.public-theme-red { background: linear-gradient(135deg, rgba(248,81,73,.26), rgba(13,17,23,.8)); }
.public-theme-purple { background: linear-gradient(135deg, rgba(163,113,247,.28), rgba(13,17,23,.8)); }
.public-profile-avatar {
  width: 86px;
  height: 86px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.18);
  background: var(--card-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  flex: 0 0 auto;
}
.public-profile-avatar img { width:100%; height:100%; object-fit:cover; }
.public-profile-main h3 { margin:0; font-size: 26px; color: var(--text); }
.public-profile-main p { margin-top: 6px; color:#c9d1d9; line-height: 1.35; }
.public-profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.public-profile-stats div {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 12px 8px;
  text-align: center;
}
.public-profile-stats b { display:block; color: var(--accent); font-family:'Share Tech Mono', monospace; font-size: 19px; }
.public-profile-stats span { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.public-profile-record,
.public-profile-theme-note,
.friend-profile-about {
  border: 1px dashed var(--border);
  background: rgba(13,17,23,.5);
  color: #c9d1d9;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.friend-theme-gold .friend-profile-banner { box-shadow: 0 0 0 2px rgba(210,153,34,.35); }
.friend-theme-red .friend-profile-banner { box-shadow: 0 0 0 2px rgba(248,81,73,.35); }
.friend-theme-purple .friend-profile-banner { box-shadow: 0 0 0 2px rgba(163,113,247,.35); }
.global-top-card, .global-user-row { cursor: pointer; }

@media (max-width: 720px) {
  .top-bar { padding: 0 10px; gap: 6px; }
  .top-brand-text { display: none; }
  .top-notifications-btn, .top-settings-btn { padding: 6px 8px; }
  .top-profile { padding: 5px 7px; gap: 6px; }
  #topUsername { max-width: 86px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .profile-dropdown { width: min(330px, calc(100vw - 18px)); right: 9px; max-height: calc(100dvh - 76px); overflow-y:auto; }
  .public-profile-hero { flex-direction: column; text-align: center; }
  .public-profile-stats { grid-template-columns: repeat(2, 1fr); }
  .notification-toolbar { align-items: flex-start; flex-direction: column; }
}

/* ════════════════════════════════════════
   USER DETAILS PANEL FIXES — profile/friends access + mobile no-shift
   Added at the end so it overrides older profile dropdown rules.
════════════════════════════════════════ */
html,
body,
#gameScreen {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.top-bar {
  width: 100%;
  max-width: 100vw;
  overflow: visible;
}

.profile-dropdown {
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100dvh - 84px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 16px;
  right: max(12px, env(safe-area-inset-right));
  left: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(47,129,247,.65) rgba(13,17,23,.35);
}

.profile-dropdown::-webkit-scrollbar { width: 7px; }
.profile-dropdown::-webkit-scrollbar-track { background: rgba(13,17,23,.35); border-radius: 999px; }
.profile-dropdown::-webkit-scrollbar-thumb { background: rgba(47,129,247,.65); border-radius: 999px; }

.pd-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.pd-action-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
}

.pd-actions .friends-btn {
  order: -1;
  grid-column: 1 / -1;
  border-color: rgba(47,129,247,.65);
  background: linear-gradient(135deg, rgba(47,129,247,.18), rgba(47,129,247,.06));
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(47,129,247,.08), 0 10px 24px rgba(47,129,247,.08);
}

.pd-actions .friends-btn:hover {
  border-color: var(--accent);
  color: #fff;
  background: linear-gradient(135deg, rgba(47,129,247,.32), rgba(47,129,247,.12));
}

/* Keep the large public-profile controls compact enough so action buttons stay reachable. */
.pd-custom-section textarea {
  min-height: 52px;
  max-height: 90px;
}

.pd-username-edit,
.pd-custom-section {
  margin-top: 10px;
  padding-top: 10px;
}

/* Mobile: open user details as a centered drawer, not as an off-screen right panel. */
@media (max-width: 720px) {
  .top-bar {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    gap: 6px;
  }

  .top-profile {
    min-width: 0;
    max-width: 128px;
  }

  .profile-dropdown {
    top: 58px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 68px) !important;
    margin: 0 auto;
    border-radius: 18px;
    padding: 14px;
    transform: none !important;
  }

  .pd-header {
    gap: 10px;
    margin-bottom: 12px;
  }

  .pd-avatar-wrap,
  .pd-avatar-wrap img {
    width: 50px;
    height: 50px;
  }

  .pd-info {
    min-width: 0;
  }

  .pd-name,
  .pd-email {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pd-actions {
    grid-template-columns: 1fr;
  }

  .pd-action-btn,
  .logout-btn {
    min-height: 42px;
    font-size: 14px;
  }
}

@media (max-width: 380px) {
  .top-profile {
    max-width: 104px;
  }

  .profile-dropdown {
    left: 6px !important;
    right: 6px !important;
    padding: 12px;
  }
}

/* ═══════════════════════════════════════════════════════
   Update pack: flags, ranks, profile showcase, graphs,
   menu background, piece styles, and move animations
═══════════════════════════════════════════════════════ */
.flag-select {
  font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.flag-preview-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8b949e;
  font-size: 11px;
}
.cvx-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  margin-right: 5px;
  border-radius: 6px;
  background: linear-gradient(145deg, #f8fafc, #cbd5e1);
  border: 1px solid rgba(255,255,255,.18);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
  font-size: 19px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px rgba(0,0,0,.25);
  vertical-align: middle;
  overflow: hidden;
}
.cvx-flag.empty {
  background: #1f2937;
  color: #6b7280;
  font-family: inherit;
  font-size: 12px;
}

.pd-rank-title {
  margin-left: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(47,129,247,.14);
  color: #dbeafe;
}
.rank-bronze { color: #d6a06e !important; border-color: rgba(214,160,110,.35) !important; }
.rank-silver { color: #dbeafe !important; border-color: rgba(203,213,225,.4) !important; }
.rank-gold { color: #facc15 !important; border-color: rgba(250,204,21,.45) !important; }
.rank-diamond { color: #67e8f9 !important; border-color: rgba(103,232,249,.45) !important; }
.rank-gm { color: #c084fc !important; border-color: rgba(192,132,252,.45) !important; }
.rank-progress-widget,
.pd-showcase-block,
.pd-graph-block {
  margin-top: 12px;
}
.rank-card {
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(22,27,34,.94), rgba(13,17,23,.96));
  border-radius: 14px;
  padding: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.rank-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #f0f6fc;
  margin-bottom: 8px;
}
.rank-progress-track {
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.rank-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f81f7, #d29922, #c084fc);
  box-shadow: 0 0 14px rgba(47,129,247,.45);
}
.rank-progress-note {
  color: #8b949e;
  font-size: 11px;
  margin-top: 7px;
}
.achievement-showcase-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.showcase-badge {
  min-height: 68px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(33,38,45,.95), rgba(13,17,23,.95));
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8px 5px;
  gap: 4px;
}
.showcase-badge.unlocked {
  border-color: rgba(210,153,34,.38);
  box-shadow: 0 0 18px rgba(210,153,34,.10), inset 0 1px 0 rgba(255,255,255,.06);
}
.showcase-badge.locked { opacity: .45; filter: grayscale(.6); }
.showcase-badge span { font-size: 23px; }
.showcase-badge small {
  color: #c9d1d9;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 700;
}
.rating-graph-card {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: radial-gradient(circle at top left, rgba(47,129,247,.12), transparent 45%), rgba(13,17,23,.82);
  padding: 8px 10px;
}
.rating-graph-card svg {
  width: 100%;
  height: 86px;
  display: block;
}
.rating-graph-card circle { fill: #f0f6fc; stroke: #2f81f7; stroke-width: 2; }
.rating-graph-meta {
  display: flex;
  justify-content: space-between;
  color: #8b949e;
  font-size: 11px;
}
.rating-graph-meta b { color: #f0f6fc; }
.public-profile-extra-title {
  margin: 14px 0 8px;
  color: #8b949e;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 800;
}
.public-rank-chip {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(13,17,23,.45);
  border: 1px solid currentColor;
  font-weight: 800;
  font-size: 12px;
}
.friends-leaderboard-card { max-width: 620px; }
.friends-leaderboard-body { display: flex; flex-direction: column; gap: 10px; max-height: 70vh; overflow-y: auto; padding-right: 4px; }
.friends-lb-row {
  display: grid;
  grid-template-columns: 42px 48px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(135deg, rgba(22,27,34,.96), rgba(13,17,23,.96));
  border-radius: 16px;
  padding: 10px;
  cursor: pointer;
}
.friends-lb-row.me { border-color: rgba(47,129,247,.55); box-shadow: 0 0 20px rgba(47,129,247,.12); }
.friends-lb-rank { color: #2f81f7; font-weight: 900; }
.friends-lb-avatar { width: 46px !important; height: 46px !important; border-radius: 14px !important; }
.friends-lb-info { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.friends-lb-info b { color: #f0f6fc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friends-lb-info span { color: #8b949e; font-size: 12px; }
.friends-lb-score { color: #d29922; font-weight: 900; font-size: 18px; }
.you-chip { color: #58a6ff; font-size: 10px; border: 1px solid rgba(88,166,255,.35); border-radius: 999px; padding: 2px 6px; margin-left: 5px; }

/* Animated main menu background */
.menu-dashboard-card {
  position: relative;
  overflow: hidden;
}
.menu-dashboard-card::before,
.menu-dashboard-card::after {
  content: "♞ ♟ ♜ ♛ ♚";
  position: absolute;
  inset: auto auto 8% -10%;
  color: rgba(47,129,247,.09);
  font-size: 92px;
  letter-spacing: 28px;
  white-space: nowrap;
  pointer-events: none;
  animation: menuPiecesFloat 18s linear infinite;
  filter: blur(.2px);
}
.menu-dashboard-card::after {
  content: "♙ ♘ ♗ ♕ ♔";
  inset: 8% -8% auto auto;
  color: rgba(210,153,34,.08);
  font-size: 76px;
  animation-duration: 24s;
  animation-direction: reverse;
}
.menu-card-grid,
.menu-dashboard-head,
.menu-section-views { position: relative; z-index: 1; }
@keyframes menuPiecesFloat {
  from { transform: translateX(0) translateY(0) rotate(0deg); }
  50% { transform: translateX(8%) translateY(-10px) rotate(2deg); }
  to { transform: translateX(0) translateY(0) rotate(0deg); }
}
.menu-feature-card:hover .menu-feature-icon {
  transform: translateY(-2px) rotate(-4deg) scale(1.08);
  transition: transform .18s ease;
}

/* Piece styles */
body[data-piece-theme="threeD"] .piece {
  text-shadow: 0 2px 0 rgba(255,255,255,.35), 0 5px 0 rgba(0,0,0,.35), 0 12px 16px rgba(0,0,0,.55);
  transform: perspective(220px) rotateX(10deg);
  filter: drop-shadow(0 6px 7px rgba(0,0,0,.55));
}
body[data-piece-theme="modern"] .piece {
  text-shadow: 0 0 12px currentColor;
  font-weight: 900;
}
body[data-piece-theme="medieval"] .piece {
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 10px rgba(210,153,34,.25);
}
body[data-piece-theme="minimal"] .piece {
  text-shadow: none !important;
  filter: none !important;
  opacity: .92;
}
body[data-piece-theme="minimal"] .white-piece { color: #e5e7eb !important; }
body[data-piece-theme="minimal"] .black-piece { color: #111827 !important; }

/* Move / capture / check animations */
.piece {
  will-change: transform, filter;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
  animation: pieceAppear .16s ease;
}
@keyframes pieceAppear {
  from { transform: scale(.88); opacity: .35; }
  to { transform: scale(1); opacity: 1; }
}
.square.move-impact::after,
.square.capture-impact::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 14px;
  pointer-events: none;
  animation: moveImpact .55s ease-out forwards;
}
.square.move-impact::after { box-shadow: 0 0 0 2px rgba(47,129,247,.65), 0 0 22px rgba(47,129,247,.35); }
.square.capture-impact::after { box-shadow: 0 0 0 2px rgba(248,81,73,.75), 0 0 30px rgba(248,81,73,.55); }
@keyframes moveImpact {
  from { opacity: 1; transform: scale(.82); }
  to { opacity: 0; transform: scale(1.18); }
}
.capture-burst {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(28px, 5vw, 58px);
  color: #ff7b72;
  text-shadow: 0 0 20px rgba(248,81,73,.9);
  pointer-events: none;
  animation: captureBurst .7s ease-out forwards;
}
@keyframes captureBurst {
  0% { transform: scale(.2) rotate(0deg); opacity: 0; }
  25% { transform: scale(1.4) rotate(20deg); opacity: 1; }
  100% { transform: scale(2.2) rotate(55deg); opacity: 0; }
}
.square.king-in-check {
  box-shadow: inset 0 0 0 3px rgba(248,81,73,.85), 0 0 24px rgba(248,81,73,.48) !important;
  animation: kingPulse 1s ease-in-out infinite;
}
.square.king-in-check .piece { color: #ff7b72 !important; }
.square.check-shock { animation: checkShock .45s ease, kingPulse 1s ease-in-out infinite; }
@keyframes kingPulse { 50% { filter: brightness(1.18); } }
@keyframes checkShock {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
.piece-flight {
  position: fixed;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1;
  transition: transform .24s cubic-bezier(.2,.85,.2,1), opacity .24s ease;
  text-shadow: 0 7px 14px rgba(0,0,0,.45);
}
.checkmate-cinematic {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(248,81,73,.2), rgba(0,0,0,.78));
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.checkmate-cinematic.show { opacity: 1; }
.checkmate-cinematic-card {
  min-width: min(86vw, 520px);
  padding: 34px 28px;
  border-radius: 28px;
  border: 1px solid rgba(248,81,73,.5);
  background: linear-gradient(145deg, rgba(22,27,34,.96), rgba(68,20,20,.94));
  box-shadow: 0 30px 120px rgba(0,0,0,.8), 0 0 46px rgba(248,81,73,.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  transform: scale(.84) translateY(18px);
  transition: transform .35s cubic-bezier(.2,.9,.2,1);
}
.checkmate-cinematic.show .checkmate-cinematic-card { transform: scale(1) translateY(0); }
.checkmate-cinematic-card span { font-size: 58px; color: #ff7b72; filter: drop-shadow(0 0 18px rgba(248,81,73,.8)); }
.checkmate-cinematic-card b { font-size: clamp(34px, 8vw, 68px); letter-spacing: 4px; color: #fff; text-shadow: 0 0 24px rgba(248,81,73,.85); }
.checkmate-cinematic-card small { color: #c9d1d9; font-size: 15px; }

/* Visual fix: checkmate cinematic should match the player's result */
.checkmate-cinematic.win {
  background: radial-gradient(circle, rgba(46,160,67,.25), rgba(0,0,0,.78)) !important;
}
.checkmate-cinematic.win .checkmate-cinematic-card {
  border-color: rgba(63,185,80,.62) !important;
  background: linear-gradient(145deg, rgba(12,45,26,.97), rgba(10,28,18,.94)) !important;
  box-shadow: 0 30px 120px rgba(0,0,0,.8), 0 0 52px rgba(63,185,80,.38) !important;
}
.checkmate-cinematic.win .checkmate-cinematic-card span {
  color: #7ee787 !important;
  filter: drop-shadow(0 0 18px rgba(63,185,80,.85)) !important;
}
.checkmate-cinematic.win .checkmate-cinematic-card b {
  text-shadow: 0 0 24px rgba(63,185,80,.82) !important;
}
.checkmate-cinematic.loss {
  background: radial-gradient(circle, rgba(248,81,73,.22), rgba(0,0,0,.78)) !important;
}


@media (max-width: 620px) {
  .achievement-showcase-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .friends-lb-row { grid-template-columns: 34px 42px 1fr auto; gap: 8px; padding: 8px; }
  .friends-lb-score { font-size: 15px; }
  .cvx-flag { width: 26px; height: 20px; font-size: 17px; }
  .checkmate-cinematic-card { padding: 26px 18px; }
}

/* ═══════════════════════════════════════════════════════
   Small fix pack: result colors, real flag visuals, no board blink
═══════════════════════════════════════════════════════ */
.game-result-overlay.result-win {
  background: radial-gradient(circle at center, rgba(46, 160, 67, .38), rgba(0, 0, 0, .84) 62%) !important;
}
.game-result-overlay.result-loss {
  background: radial-gradient(circle at center, rgba(248, 81, 73, .42), rgba(0, 0, 0, .86) 62%) !important;
}
.game-result-overlay.result-draw {
  background: radial-gradient(circle at center, rgba(210, 153, 34, .26), rgba(0, 0, 0, .82) 62%) !important;
}
.game-result-overlay.result-spectator {
  background: radial-gradient(circle at center, rgba(47, 129, 247, .26), rgba(0, 0, 0, .82) 62%) !important;
}
.game-result-overlay.result-win .game-result-card {
  border-color: rgba(63, 185, 80, .95) !important;
  box-shadow: 0 0 0 1px rgba(63,185,80,.22), 0 0 70px rgba(46,160,67,.44), inset 0 1px 0 rgba(255,255,255,.08) !important;
  background: linear-gradient(155deg, rgba(20, 82, 39, .96), rgba(13, 17, 23, .98)) !important;
}
.game-result-overlay.result-loss .game-result-card {
  border-color: rgba(248, 81, 73, .95) !important;
  box-shadow: 0 0 0 1px rgba(248,81,73,.22), 0 0 70px rgba(248,81,73,.42), inset 0 1px 0 rgba(255,255,255,.08) !important;
  background: linear-gradient(155deg, rgba(116, 24, 29, .96), rgba(13, 17, 23, .98)) !important;
}
.game-result-overlay.result-win .game-result-title { color: #7ee787 !important; text-shadow: 0 0 24px rgba(63,185,80,.55); }
.game-result-overlay.result-loss .game-result-title { color: #ff7b72 !important; text-shadow: 0 0 24px rgba(248,81,73,.55); }

.cvx-flag {
  width: 34px !important;
  height: 24px !important;
  border-radius: 5px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.05)) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset -8px 0 12px rgba(0,0,0,.14), 0 5px 12px rgba(0,0,0,.3) !important;
  transform: perspective(120px) rotateY(-8deg);
  position: relative;
  vertical-align: middle;
  flex: 0 0 auto;
}
.cvx-flag::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.22), transparent 22%, rgba(0,0,0,.12) 52%, transparent 78%, rgba(255,255,255,.18));
  pointer-events: none;
  mix-blend-mode: soft-light;
}
.cvx-real-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
}
.cvx-real-flag .flag-emoji-fallback {
  display: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
  font-size: 19px;
  line-height: 24px;
}
.cvx-flag:not(.cvx-real-flag) {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
  font-size: 21px !important;
  line-height: 24px;
}
.cvx-flag.empty {
  width: 34px !important;
  height: 24px !important;
  background: #1f2937 !important;
  color: #6b7280 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  transform: none;
}
.flag-select {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif !important;
}

#board {
  contain: layout paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.square {
  transition: background-color .12s linear, box-shadow .14s ease, outline-color .14s ease, filter .14s ease;
}
.piece {
  animation: none !important;
  transition: transform .16s ease, filter .16s ease, opacity .12s ease, color .12s ease !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.piece-flight {
  will-change: transform, opacity;
}

@media (max-width: 620px) {
  .cvx-flag { width: 30px !important; height: 21px !important; }
  .cvx-real-flag .flag-emoji-fallback { line-height: 21px; font-size: 17px; }
}


/* ═══════════════════════════════════════════════════════
   Delete account + profile modal visibility fixes
═══════════════════════════════════════════════════════ */
.delete-account-btn {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(248,81,73,.45);
  background: rgba(248,81,73,.08);
  color: #ff7b72;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  transition: .15s ease;
}
.delete-account-btn:hover {
  background: rgba(248,81,73,.15);
  border-color: rgba(248,81,73,.75);
  box-shadow: 0 0 18px rgba(248,81,73,.12);
}
.delete-account-card { width: min(430px, calc(100vw - 24px)); }
.delete-account-body { padding: 20px; text-align: center; }
.delete-account-icon { font-size: 38px; margin-bottom: 8px; }
.delete-account-body h3 { margin: 0 0 8px; color: #f0f6fc; font-size: 24px; }
.delete-account-body p { margin: 0 0 14px; color: #c9d1d9; line-height: 1.45; }
.delete-account-body label { display: block; color: #8b949e; text-align: left; margin: 12px 0 7px; font-size: 13px; }
.delete-account-body input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 700;
  outline: none;
}
.delete-account-body input:focus { border-color: #ff7b72; box-shadow: 0 0 0 3px rgba(248,81,73,.15); }
.delete-account-msg { min-height: 18px; margin-top: 9px; color: #8b949e; font-size: 13px; }
.delete-account-msg.err { color: #ff7b72; }
.delete-account-actions { display: flex; gap: 10px; margin-top: 16px; }
.delete-account-actions button { flex: 1; min-height: 42px; }

/* Public/self profile should always fit the screen and scroll inside the card. */
.modal-overlay {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.public-profile-card {
  width: min(560px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 28px) !important;
  overflow: hidden !important;
}
.public-profile-card .modal-header { flex: 0 0 auto; }
.public-profile-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100dvh - 92px);
  padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
}
.public-profile-main { min-width: 0; }
.public-profile-main h3 {
  overflow-wrap: anywhere;
  line-height: 1.1;
}
.public-profile-main p { overflow-wrap: anywhere; }
.profile-dropdown {
  max-height: calc(100dvh - 78px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
}

@media (max-width: 720px) {
  .modal-overlay {
    align-items: flex-start;
    justify-content: center;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .public-profile-card {
    width: calc(100vw - 18px) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 18px !important;
  }
  .public-profile-body {
    max-height: calc(100dvh - 84px) !important;
    padding: 12px !important;
    padding-bottom: max(30px, env(safe-area-inset-bottom)) !important;
  }
  .public-profile-hero {
    padding: 16px 12px !important;
    gap: 10px !important;
  }
  .public-profile-avatar {
    width: 74px !important;
    height: 74px !important;
    border-radius: 18px !important;
  }
  .public-profile-main h3 { font-size: 23px !important; }
  .public-profile-main p { font-size: 15px !important; }
  .public-profile-stats { gap: 8px !important; }
  .public-profile-stats div { padding: 10px 6px !important; }
  .achievement-showcase-row { gap: 8px !important; }
  .showcase-badge { min-height: 74px; padding: 8px 4px; }
  .rank-card { padding: 10px; }
  .rating-graph-card svg { height: 74px; }
  .delete-account-actions { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════
   Update pack: result screens, loading, lobby animation,
   mobile board fit, haptics-ready UI and animated buttons
═══════════════════════════════════════════════════════ */
.game-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(47,129,247,.22), transparent 38%),
    rgba(3, 7, 14, .92);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.game-loading-overlay.visible { opacity: 1; pointer-events: auto; }
.game-loading-overlay.closing { opacity: 0; }
.game-loading-card {
  width: min(360px, calc(100vw - 34px));
  min-height: 260px;
  border: 1px solid rgba(88,166,255,.35);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(22,27,34,.95), rgba(9,13,22,.96));
  box-shadow: 0 28px 95px rgba(0,0,0,.65), 0 0 60px rgba(47,129,247,.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px;
  transform: translateY(10px) scale(.98);
  animation: loadingCardIn .38s ease forwards;
}
@keyframes loadingCardIn { to { transform: translateY(0) scale(1); } }
.loading-logo-wrap {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 0%, rgba(88,166,255,.28), rgba(47,129,247,.06) 60%, rgba(13,17,23,.9));
  border: 1px solid rgba(88,166,255,.35);
  box-shadow: 0 0 32px rgba(47,129,247,.22);
  animation: logoPulse 1.25s ease-in-out infinite;
}
.loading-logo-wrap img { max-width: 78px; max-height: 78px; object-fit: contain; }
.loading-logo-fallback { display: none; font-size: 54px; color: #58a6ff; filter: drop-shadow(0 0 18px rgba(88,166,255,.65)); }
@keyframes logoPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.loading-title {
  font-family: 'Orbitron', monospace;
  font-size: 25px;
  color: #58a6ff;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.loading-sub { color: #c9d1d9; font-weight: 700; letter-spacing: .8px; }
.loading-bar {
  width: 100%;
  max-width: 240px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(139,148,158,.16);
  border: 1px solid rgba(88,166,255,.15);
}
.loading-bar span {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #2f81f7, #7ee787, transparent);
  animation: loadingSweep 1.1s ease-in-out infinite;
}
@keyframes loadingSweep { 0%{ transform: translateX(-120%); } 100%{ transform: translateX(260%); } }

.lobby-knight-animation {
  margin: 4px 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  padding: 14px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 20%, rgba(47,129,247,.14), rgba(13,17,23,.55));
  border: 1px solid rgba(88,166,255,.16);
}
.lobby-knight-piece {
  font-size: 56px;
  line-height: 1;
  color: #58a6ff;
  text-shadow: 0 0 22px rgba(88,166,255,.7);
  animation: knightFloat 1.7s ease-in-out infinite;
}
.lobby-knight-animation small {
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-weight: 800;
}
@keyframes knightFloat {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}

.game-result-overlay .game-result-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px !important;
  transform-origin: center;
  animation: resultCardPop .38s cubic-bezier(.2,1.2,.25,1) both;
}
@keyframes resultCardPop { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
.game-result-overlay .game-result-card::before {
  content: '';
  position: absolute;
  inset: -45%;
  background: conic-gradient(from 180deg, transparent, rgba(88,166,255,.13), transparent 35%, rgba(210,153,34,.12), transparent 70%);
  animation: resultGlowSpin 6s linear infinite;
  opacity: .65;
  pointer-events: none;
}
.game-result-overlay .game-result-card > * { position: relative; z-index: 1; }
@keyframes resultGlowSpin { to { transform: rotate(360deg); } }
.game-result-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin: 0 0 14px;
  border-radius: 16px;
  background: rgba(13,17,23,.72);
  border: 1px solid rgba(139,148,158,.22);
  text-align: left;
}
.result-avatar {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #2f81f7, #1f6feb);
  color: #fff;
  font-size: 25px;
  font-weight: 900;
  box-shadow: 0 0 24px rgba(47,129,247,.2);
}
.result-avatar img { width: 100%; height: 100%; object-fit: cover; }
.result-player-info small {
  display: block;
  color: #8b949e;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 900;
}
.result-player-info strong {
  display: block;
  color: #f0f6fc;
  font-size: 20px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.game-result-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 18px;
}
.result-stat {
  padding: 10px 8px;
  border-radius: 14px;
  background: rgba(13,17,23,.68);
  border: 1px solid rgba(139,148,158,.18);
}
.result-stat b {
  display: block;
  color: #f0f6fc;
  font-size: 18px;
  line-height: 1.1;
}
.result-stat span {
  display: block;
  color: #8b949e;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
  font-weight: 800;
}
.result-stat.gain b { color: #7ee787; }
.result-stat.drop b { color: #ff7b72; }
.result-stat.same b { color: #d29922; }
.result-stat.rating-pending b { color: #58a6ff; }
.game-result-overlay.result-win .game-result-card {
  background: linear-gradient(180deg, rgba(16,48,30,.96), rgba(9,18,15,.98)) !important;
}
.game-result-overlay.result-loss .game-result-card {
  background: linear-gradient(180deg, rgba(63,18,22,.96), rgba(18,9,12,.98)) !important;
}
.game-result-overlay.result-draw .game-result-card {
  background: linear-gradient(180deg, rgba(46,38,18,.97), rgba(15,13,8,.98)) !important;
}
.game-result-overlay.result-draw .game-result-icon {
  animation: drawHandshake 1.4s ease-in-out infinite;
}
@keyframes drawHandshake { 0%,100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.08); } }
.btn-rematch { background: linear-gradient(135deg, #3fb950, #2ea043) !important; color: #06110a !important; }

button,
.primary-btn,
.ghost-btn,
.mp-big-btn,
.mp-ctrl-btn,
.menu-feature-card,
.pd-action-btn,
.friend-action-btn,
.game-invite-accept,
.game-invite-decline,
.mp-chat-send {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}
button:hover:not(:disabled),
.primary-btn:hover:not(:disabled),
.ghost-btn:hover:not(:disabled),
.mp-big-btn:hover:not(:disabled),
.mp-ctrl-btn:hover:not(:disabled),
.menu-feature-card:hover,
.pd-action-btn:hover,
.friend-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(47,129,247,.14);
}
button:active:not(:disabled),
.primary-btn:active:not(:disabled),
.ghost-btn:active:not(:disabled),
.mp-big-btn:active:not(:disabled),
.mp-ctrl-btn:active:not(:disabled),
.menu-feature-card:active,
.pd-action-btn:active,
.friend-action-btn:active {
  transform: translateY(0) scale(.97);
}

/* Better board fitting on phones/tablets without horizontal drift. */
.game-layout { width: 100%; max-width: 1180px; margin-inline: auto; }
.left-panel { min-width: 0; }
#board {
  aspect-ratio: 1 / 1;
  max-width: min(680px, calc(100vw - 36px));
  max-height: min(680px, calc(100dvh - 250px));
  margin-inline: auto;
  contain: layout paint style;
}
@media (max-width: 900px) {
  .game-board-wrap {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)) !important;
  }
  .game-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 14px !important;
    width: 100% !important;
  }
  .left-panel,
  .right-panel {
    width: 100% !important;
    max-width: min(620px, calc(100vw - 20px)) !important;
    margin-inline: auto !important;
  }
  #board {
    width: min(calc(100vw - 24px), calc(100dvh - 292px), 620px) !important;
    height: min(calc(100vw - 24px), calc(100dvh - 292px), 620px) !important;
    min-width: 0 !important;
  }
}
@media (max-width: 520px) {
  #board {
    width: min(calc(100vw - 16px), calc(100dvh - 300px), 480px) !important;
    height: min(calc(100vw - 16px), calc(100dvh - 300px), 480px) !important;
  }
  .game-result-stats { grid-template-columns: 1fr 1fr; }
  .game-result-player { padding: 10px; }
  .result-avatar { width: 48px; height: 48px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .lobby-knight-piece,
  .loading-logo-wrap,
  .loading-bar span,
  .game-result-card,
  .game-result-card::before,
  button,
  .primary-btn,
  .ghost-btn,
  .mp-big-btn,
  .mp-ctrl-btn,
  .menu-feature-card { animation: none !important; transition: none !important; }
}

/* ── Public bot games + public rooms ───────────────────── */
.menu-feature-card.clubs .menu-feature-icon { background: linear-gradient(135deg, rgba(210,153,34,.28), rgba(88,166,255,.18)); }
.public-room-create-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(88,166,255,.22);
  background: linear-gradient(135deg, rgba(13,17,23,.92), rgba(22,27,34,.82));
  border-radius: 16px;
}
.public-room-create-card b { display:block; color:#f0f6fc; margin-bottom:4px; }
.public-room-create-card span { display:block; color:#8b949e; font-size:13px; }
.bot-info-card { border-color: rgba(88,166,255,.22); }
.public-game-card.bot-public-card { border-color:#30363d !important; background:rgba(1,4,9,.42) !important; }
.public-game-title em {
  display:inline-flex;
  margin-left:8px;
  padding:2px 7px;
  border-radius:999px;
  font-style:normal;
  font-size:10px;
  color:#ffd166;
  background:rgba(210,153,34,.12);
  border:1px solid rgba(210,153,34,.25);
}

/* ── Missed invites + push notification toolbar ─────────── */
.missed-invites-box {
  border-top:1px solid rgba(139,148,158,.15);
  margin:10px 0 12px;
  padding-top:10px;
}
.missed-invite-list { display:grid; gap:8px; }
.missed-invite-item {
  display:grid;
  grid-template-columns: 1fr auto;
  gap:2px 10px;
  padding:10px;
  border-radius:12px;
  background:rgba(13,17,23,.76);
  border:1px solid rgba(139,148,158,.14);
}
.missed-invite-item b { color:#f0f6fc; }
.missed-invite-item span { color:#8b949e; font-size:12px; }
.missed-invite-item small { grid-row:1 / span 2; grid-column:2; color:#6e7681; align-self:center; }
.missed-invite-item.missed { border-color: rgba(248,81,73,.22); }
.missed-invite-item.accepted { border-color: rgba(63,185,80,.22); }
.missed-invite-item.declined { border-color: rgba(210,153,34,.22); }
.notification-empty.small { padding:8px; font-size:12px; }

/* ── Low time warning ───────────────────────────────────── */
.player-clock.low-time {
  border-color: rgba(248,81,73,.75) !important;
  box-shadow: 0 0 20px rgba(248,81,73,.38), inset 0 0 18px rgba(248,81,73,.16) !important;
  animation: cvxLowTimePulse .65s infinite alternate;
}
@keyframes cvxLowTimePulse {
  from { transform: scale(1); }
  to { transform: scale(1.025); }
}

/* ── Chess clubs ────────────────────────────────────────── */
.club-create-card,
.club-chat-box {
  border:1px solid rgba(88,166,255,.22);
  background:rgba(13,17,23,.72);
  border-radius:18px;
  padding:14px;
  margin-bottom:16px;
}
.club-create-grid {
  display:grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 2fr) auto;
  gap:10px;
  align-items:center;
}
.club-create-grid input,
.club-chat-input-row input {
  width:100%;
  border:1px solid rgba(139,148,158,.22);
  background:rgba(22,27,34,.86);
  color:#f0f6fc;
  border-radius:12px;
  padding:12px 14px;
  outline:none;
}
.club-list,.club-leaderboard { display:grid; gap:10px; margin-bottom:16px; }
.club-card,.club-lb-row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:16px;
  background:rgba(13,17,23,.84);
  border:1px solid rgba(139,148,158,.16);
}
.club-card.joined { border-color:rgba(63,185,80,.26); }
.club-avatar {
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#2f81f7,#d29922);
  box-shadow:0 8px 24px rgba(47,129,247,.18);
  flex:0 0 auto;
}
.club-info { flex:1; min-width:0; }
.club-info b { display:block; color:#f0f6fc; }
.club-info span,.club-info small { display:block; color:#8b949e; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.club-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.club-actions button,.club-lb-row button,.club-chat-input-row button {
  border:0;
  background:#2f81f7;
  color:#fff;
  border-radius:10px;
  padding:9px 12px;
  font-weight:800;
  cursor:pointer;
}
.club-actions .ghost-btn { background:rgba(139,148,158,.14); color:#c9d1d9; }
.club-rank { color:#58a6ff; font-weight:900; min-width:34px; }
.club-chat-box.hidden { display:none; }
.club-chat-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.club-chat-head b { display:block; color:#f0f6fc; }
.club-chat-head span { display:block; color:#8b949e; font-size:12px; }
.club-chat-messages {
  height:260px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border-radius:14px;
  background:radial-gradient(circle at top right, rgba(47,129,247,.10), transparent 42%), rgba(2,6,12,.68);
  border:1px solid rgba(139,148,158,.12);
}
.club-chat-msg {
  max-width:78%;
  align-self:flex-start;
  padding:9px 11px;
  border-radius:14px 14px 14px 4px;
  background:rgba(33,38,45,.94);
  color:#f0f6fc;
}
.club-chat-msg.mine { align-self:flex-end; border-radius:14px 14px 4px 14px; background:rgba(35,134,54,.96); }
.club-chat-msg b,.club-chat-msg span,.club-chat-msg small { display:block; }
.club-chat-msg b { font-size:12px; color:#79c0ff; margin-bottom:2px; }
.club-chat-msg.mine b { color:#d2ffd7; }
.club-chat-msg span { font-size:14px; }
.club-chat-msg small { color:rgba(255,255,255,.58); font-size:10px; margin-top:3px; }
.club-chat-input-row { display:flex; gap:8px; margin-top:10px; }
.club-chat-input-row input { flex:1; }

@media (max-width: 720px) {
  .public-room-create-card { flex-direction:column; align-items:stretch; }
  .club-create-grid { grid-template-columns:1fr; }
  .club-card,.club-lb-row { align-items:flex-start; }
  .club-actions { width:100%; justify-content:flex-start; }
  .club-chat-messages { height:230px; }
}

/* AI public bot / board containment fixes */
.game-layout {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 280px);
  overflow: visible;
}
.left-panel {
  min-width: 0;
  overflow: hidden;
}
#board {
  width: min(560px, 100%) !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  flex-shrink: 1;
}
.mp-chat-send:disabled,
.mp-chat-input:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.chat-msg.theirs.bot-comment,
.chat-msg.theirs .chat-name {
  color: var(--accent);
}
.bot-public-card .public-game-title em {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(47,129,247,.4);
  color: var(--accent);
  font-style: normal;
  font-size: 10px;
}
@media (min-width: 901px) and (max-width: 1180px) {
  .game-area { max-width: 100vw; padding-left: 10px !important; padding-right: 10px !important; }
  .game-layout { gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(250px, 280px); }
  .left-panel { padding: 16px; }
  #board { width: min(560px, calc(100vw - 360px)) !important; }
}
@media (max-width: 900px) {
  .game-layout { grid-template-columns: 1fr !important; }
  #board { width: min(calc(100vw - 24px), 620px) !important; }
}

/* ════════════════════════════════════════
   CLUB OWNER CONTROLS + CLUB LOGO
════════════════════════════════════════ */
.club-logo-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(88,166,255,.45);
  background: rgba(47,129,247,.08);
  color: #cfe3ff;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.club-logo-upload input { display: none; }
.club-logo-upload:hover { border-color: var(--accent); background: rgba(47,129,247,.16); }
.club-avatar {
  overflow: hidden;
  flex-shrink: 0;
}
.club-avatar.club-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.club-owner-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,212,89,.45);
  color: #ffd45a;
  background: rgba(255,212,89,.08);
  font-style: normal;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.club-card.owned {
  border-color: rgba(255,212,89,.35);
  box-shadow: 0 0 0 1px rgba(255,212,89,.04), 0 18px 48px rgba(0,0,0,.24);
}
.club-actions {
  flex-wrap: wrap;
}
.danger-main-btn.mini {
  padding: 8px 10px;
  min-height: 36px;
  border-radius: 10px;
  font-size: 12px;
  background: rgba(248,81,73,.12);
  border: 1px solid rgba(248,81,73,.45);
  color: #ffb4ae;
}
.danger-main-btn.mini:hover {
  background: rgba(248,81,73,.22);
  color: #fff;
}
@media (max-width: 720px) {
  .club-actions button {
    flex: 1 1 calc(50% - 6px);
    min-width: 116px;
  }
}

/* ════════════════════════════════════════
   RESTORE GAME BOARD BOX LAYOUT
   Board is visible only during a real game and always stays inside its panel.
════════════════════════════════════════ */
body:not(.chess-game-active) #gameBoard {
  display: none !important;
}

#gameBoard.game-board-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 24px auto 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  display: block;
  box-sizing: border-box;
}

#gameBoard .game-layout {
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 280px) !important;
  gap: 24px !important;
  align-items: start !important;
  box-sizing: border-box !important;
}

#gameBoard .left-panel,
#gameBoard .right-panel {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#gameBoard .left-panel {
  width: 100% !important;
  max-width: 100% !important;
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: hidden !important;
}

#gameBoard .right-panel {
  width: 100% !important;
  max-width: 280px !important;
  overflow: hidden !important;
}

#gameBoard #board {
  width: min(560px, 100%) !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

#gameBoard #status,
#gameBoard .chess-clocks,
#gameBoard .game-timer,
#gameBoard .captured-bar,
#gameBoard .controls,
#gameBoard .mp-controls,
#gameBoard #mpTopPlayer,
#gameBoard #mpBottomPlayer,
#gameBoard #disconnectBanner {
  width: min(560px, 100%) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

#gameBoard #moveHistory {
  max-height: 565px;
}

@media (min-width: 901px) and (max-width: 1120px) {
  #gameBoard .game-layout {
    max-width: calc(100vw - 28px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px) !important;
    gap: 16px !important;
  }
  #gameBoard .left-panel { padding: 16px !important; }
  #gameBoard #board,
  #gameBoard #status,
  #gameBoard .chess-clocks,
  #gameBoard .game-timer,
  #gameBoard .captured-bar,
  #gameBoard .controls,
  #gameBoard .mp-controls,
  #gameBoard #mpTopPlayer,
  #gameBoard #mpBottomPlayer,
  #gameBoard #disconnectBanner {
    width: min(560px, calc(100vw - 360px)) !important;
  }
}

@media (max-width: 900px) {
  #gameBoard.game-board-wrap {
    width: 100% !important;
    max-width: 100vw !important;
    margin-top: 16px !important;
    overflow: hidden !important;
  }
  #gameBoard .game-layout {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: min(620px, calc(100vw - 16px)) !important;
    gap: 14px !important;
    justify-items: center !important;
  }
  #gameBoard .left-panel,
  #gameBoard .right-panel {
    width: 100% !important;
    max-width: min(620px, calc(100vw - 16px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #gameBoard .left-panel {
    padding: 12px !important;
  }
  #gameBoard .right-panel {
    max-width: min(620px, calc(100vw - 16px)) !important;
  }
  #gameBoard #board,
  #gameBoard #status,
  #gameBoard .chess-clocks,
  #gameBoard .game-timer,
  #gameBoard .captured-bar,
  #gameBoard .controls,
  #gameBoard .mp-controls,
  #gameBoard #mpTopPlayer,
  #gameBoard #mpBottomPlayer,
  #gameBoard #disconnectBanner {
    width: min(100%, calc(100vw - 40px)) !important;
  }
  #gameBoard #moveHistory {
    max-height: 220px;
  }
}

@media (max-width: 430px) {
  #gameBoard .game-layout {
    max-width: calc(100vw - 10px) !important;
  }
  #gameBoard .left-panel,
  #gameBoard .right-panel {
    max-width: calc(100vw - 10px) !important;
  }
  #gameBoard .left-panel {
    padding: 10px 8px !important;
    border-radius: 18px !important;
  }
  #gameBoard #board,
  #gameBoard #status,
  #gameBoard .chess-clocks,
  #gameBoard .game-timer,
  #gameBoard .captured-bar,
  #gameBoard .controls,
  #gameBoard .mp-controls,
  #gameBoard #mpTopPlayer,
  #gameBoard #mpBottomPlayer,
  #gameBoard #disconnectBanner {
    width: min(100%, calc(100vw - 26px)) !important;
  }
}

/* ════════════════════════════════════════
   CHESS CLUBS: CLEAN CREATE PANEL + COLLAPSIBLE OWNER TOOLS
════════════════════════════════════════ */
#panelClubs {
  overflow-x: hidden;
}
.club-create-section {
  margin: 14px 0 18px;
}
.club-create-toggle {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(88,166,255,.28);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(47,129,247,.18), rgba(13,17,23,.72));
  color: #e6edf3;
  font-weight: 900;
  letter-spacing: .05em;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.club-create-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(88,166,255,.58);
  background: linear-gradient(135deg, rgba(47,129,247,.28), rgba(13,17,23,.82));
}
.club-create-card.hidden { display: none !important; }
.club-create-card {
  margin-top: 12px;
}
.club-create-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.club-create-title-row b {
  display: block;
  color: #f0f6fc;
  font-size: 15px;
}
.club-create-title-row span {
  display: block;
  color: #8b949e;
  font-size: 12px;
  margin-top: 2px;
}
.club-create-title-row .ghost-btn.small {
  width: auto;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(139,148,158,.22);
  border-radius: 10px;
  background: rgba(139,148,158,.12);
  color: #c9d1d9;
  cursor: pointer;
  font-weight: 800;
}
.club-card {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) minmax(190px, auto);
  align-items: center !important;
  gap: 14px !important;
}
.club-action-area {
  min-width: 190px;
  display: grid;
  gap: 10px;
  justify-items: stretch;
}
.club-actions {
  width: 100%;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.club-actions button {
  white-space: nowrap;
}
.club-actions .manage-btn {
  border-color: rgba(255,212,89,.24);
  color: #ffd45a;
}
.club-owner-panel {
  display: none;
  width: 100%;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,212,89,.22);
  background: rgba(255,212,89,.055);
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 8px;
}
.club-owner-panel.open {
  display: grid;
}
.club-owner-panel button {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  padding: 9px 10px;
  font-weight: 850;
  cursor: pointer;
}
.club-owner-panel .ghost-btn {
  background: rgba(139,148,158,.14);
  color: #c9d1d9;
}
.club-owner-panel .danger-main-btn.mini {
  grid-column: 1 / -1;
  width: 100%;
}

/* Mobile club layout: no overlapping buttons, no ugly decoration overflow */
@media (max-width: 720px) {
  #panelClubs .global-panel-head {
    align-items: stretch;
    gap: 12px;
  }
  #panelClubs .global-panel-head .global-refresh-btn,
  .club-create-toggle {
    width: 100%;
  }
  .club-create-card {
    padding: 16px !important;
    border-radius: 20px !important;
  }
  .club-create-title-row {
    align-items: flex-start;
  }
  .club-create-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .club-logo-upload,
  .club-create-grid input,
  .club-create-grid .primary-btn {
    width: 100% !important;
    min-height: 52px;
  }
  .club-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 16px !important;
    overflow: hidden;
  }
  .club-card .club-info {
    min-width: 0;
  }
  .club-info span,
  .club-info small {
    white-space: normal !important;
    line-height: 1.35;
  }
  .club-action-area {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
  }
  .club-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
  }
  .club-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px;
    font-size: 14px;
  }
  .club-owner-panel {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 10px;
  }
  .club-owner-panel button {
    min-height: 46px;
    font-size: 14px;
  }
  .club-lb-row {
    display: grid !important;
    grid-template-columns: 38px 56px minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  .club-lb-row button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
  }
  .club-chat-box {
    width: 100%;
    max-width: 100%;
    border-radius: 20px !important;
    padding: 14px !important;
    overflow: hidden;
  }
  .club-chat-head {
    gap: 10px;
  }
  .club-chat-messages {
    height: min(360px, 44vh) !important;
    max-height: 44vh;
    padding: 12px !important;
  }
  .club-chat-input-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 10px !important;
    align-items: center;
  }
  .club-chat-input-row input {
    min-width: 0;
    height: 52px;
    font-size: 16px;
  }
  .club-chat-input-row button {
    width: 52px;
    height: 52px;
    padding: 0 !important;
    border-radius: 14px !important;
  }
}

/* ════════════════════════════════════════
   WHATSAPP / TELEGRAM CHAT + CLUB STRUCTURE REDESIGN
════════════════════════════════════════ */
#panelClubs {
  padding: 0 !important;
  overflow: hidden !important;
  min-height: min(720px, calc(100dvh - 120px));
}

.clubs-app-shell {
  display: grid;
  grid-template-columns: minmax(330px, 390px) minmax(0, 1fr);
  width: 100%;
  min-height: min(720px, calc(100dvh - 120px));
  background: linear-gradient(135deg, rgba(22,27,34,.96), rgba(7,11,18,.96));
}

.clubs-chat-list-panel {
  border-right: 1px solid rgba(139,148,158,.18);
  background: rgba(11,15,22,.94);
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.clubs-app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(139,148,158,.12);
}
.clubs-app-head h3 {
  margin: 0;
  color: var(--accent);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.clubs-app-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.clubs-head-actions { display: flex; gap: 8px; }
.circle-tool-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(139,148,158,.22);
  background: rgba(33,38,45,.92);
  color: #e6edf3;
  font-size: 19px;
  font-weight: 900;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.circle-tool-btn:hover { transform: translateY(-1px); border-color: rgba(88,166,255,.65); background: rgba(47,129,247,.18); }
.circle-tool-btn.create { background: var(--accent); border-color: var(--accent); color: #fff; }

.clubs-search-row {
  margin: 12px 16px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: rgba(33,38,45,.82);
  border: 1px solid rgba(139,148,158,.16);
  padding: 0 14px;
  min-height: 44px;
}
.clubs-search-row span { color: #8b949e; font-size: 18px; }
.clubs-search-row input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f0f6fc;
  font: 700 15px 'Rajdhani', sans-serif;
  min-width: 0;
}

.clubs-filter-pills {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.clubs-filter-pills::-webkit-scrollbar { display:none; }
.clubs-filter-pills button {
  border: 1px solid rgba(139,148,158,.22);
  background: rgba(22,27,34,.72);
  color: #c9d1d9;
  border-radius: 999px;
  padding: 8px 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.clubs-filter-pills button.active,
.clubs-filter-pills button:hover { background: rgba(47,129,247,.22); border-color: rgba(88,166,255,.62); color: #fff; }
.global-section-title.compact {
  padding: 0 18px;
  margin: 10px 0 8px;
  font-size: 12px;
  letter-spacing: .12em;
}

.club-list-whatsapp,
.club-list-mini {
  display: grid;
  gap: 0;
  margin: 0 !important;
  padding: 0 8px 12px;
  overflow-y: auto;
}
.club-list-whatsapp { flex: 1; }
.club-lb-chat-row,
.club-chat-row {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(139,148,158,.10);
  background: transparent;
  color: #e6edf3;
  display: grid;
  align-items: center;
  text-align: left;
  gap: 12px;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.club-lb-chat-row:hover,
.club-chat-row:hover { background: rgba(47,129,247,.10); }
.club-chat-row {
  grid-template-columns: 54px minmax(0, 1fr) auto;
  padding: 13px 10px;
  border-radius: 12px;
}
.club-chat-row.joined { background: rgba(63,185,80,.035); }
.club-chat-row.owned { box-shadow: inset 3px 0 0 rgba(255,212,89,.75); }
.club-row-main { min-width: 0; }
.club-row-top { display:flex; align-items:center; gap:7px; min-width:0; }
.club-row-top b { color:#f0f6fc; font-size: 16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.club-row-preview,
.club-row-meta { color:#8b949e; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.club-row-preview { margin-top:3px; font-size: 13px; }
.club-row-meta { margin-top:2px; font-size: 11px; opacity:.78; }
.club-row-side { display:grid; gap:6px; justify-items:end; align-items:center; }
.club-row-side small { color:#6e7681; font-family:'Share Tech Mono', monospace; }
.club-row-action,
.club-lb-action {
  border: 0;
  border-radius: 999px;
  background: rgba(47,129,247,.92);
  color: white;
  padding: 6px 11px;
  font-weight: 900;
  font-size: 12px;
}
.club-row-action.join { background: rgba(35,134,54,.92); }
.club-lb-chat-row {
  grid-template-columns: 34px 42px minmax(0, 1fr) auto;
  padding: 8px 10px;
  border-radius: 12px;
}
.club-lb-main { min-width:0; display:block; }
.club-lb-main b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.club-lb-main em { display:block; color:#8b949e; font-style:normal; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.club-rank { font-weight:900; color:#58a6ff; }

.club-owner-tag {
  display:inline-flex;
  align-items:center;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,212,89,.16);
  border: 1px solid rgba(255,212,89,.34);
  color: #ffd45a;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing:.05em;
  flex:0 0 auto;
}

.clubs-conversation-panel {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 22% 20%, rgba(47,129,247,.12), transparent 34%),
    radial-gradient(circle at 80% 70%, rgba(35,134,54,.10), transparent 36%),
    #081018;
  overflow: hidden;
}
.club-empty-state {
  margin: auto;
  text-align: center;
  max-width: 420px;
  color: #c9d1d9;
  padding: 22px;
}
.club-empty-state.hidden { display:none; }
.club-empty-illustration {
  width: 126px;
  height: 126px;
  margin: 0 auto 18px;
  border-radius: 34px;
  display:grid;
  place-items:center;
  font-size: 70px;
  background: linear-gradient(135deg, rgba(47,129,247,.22), rgba(35,134,54,.14));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 28px 70px rgba(0,0,0,.30);
}
.club-empty-state h3 { margin:0; color:#f0f6fc; font-size: 26px; }
.club-empty-state p { color:#8b949e; line-height:1.5; }

.club-chat-box {
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  min-height:min(720px, calc(100dvh - 120px));
  border:0 !important;
  border-radius:0 !important;
  background: transparent !important;
  padding:0 !important;
  margin:0 !important;
}
.club-chat-box.hidden { display:none !important; }
.club-chat-head {
  min-height: 72px;
  padding: 12px 16px;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px;
  border-bottom:1px solid rgba(139,148,158,.16);
  background: rgba(13,17,23,.90);
  backdrop-filter: blur(14px);
  margin:0 !important;
}
.club-chat-back {
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(139,148,158,.20);
  background:rgba(33,38,45,.72);
  color:#e6edf3;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  display:none;
}
.club-avatar-large { width:50px !important; height:50px !important; border-radius:16px !important; font-size:22px !important; }
.club-chat-title-wrap { min-width:0; flex:1; }
.club-chat-title-wrap b { color:#f0f6fc; font-size:18px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.club-chat-title-wrap span { color:#8b949e; font-size:12px; display:block; margin-top:2px; }
.club-manage-btn {
  border:1px solid rgba(255,212,89,.34);
  background: rgba(255,212,89,.12);
  color:#ffd45a;
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
  cursor:pointer;
}
.club-manage-btn.hidden { display:none !important; }

.club-chat-messages {
  flex:1;
  height:auto !important;
  min-height:0;
  border:0 !important;
  border-radius:0 !important;
  padding:22px 28px !important;
  gap:10px;
  overflow-y:auto;
  background:
    linear-gradient(135deg, rgba(35,134,54,.08), rgba(47,129,247,.06)),
    radial-gradient(circle at 20px 20px, rgba(255,255,255,.045) 0 1px, transparent 1.5px),
    radial-gradient(circle at 42px 42px, rgba(255,255,255,.035) 0 1px, transparent 1.5px),
    #071017 !important;
  background-size:auto, 46px 46px, 46px 46px, auto;
}
.club-empty-chat-note {
  align-self:center;
  margin:auto;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(13,17,23,.70);
  color:#8b949e;
}
.club-chat-msg-row {
  display:flex;
  align-items:flex-end;
  gap:8px;
  max-width:78%;
}
.club-chat-msg-row.mine { align-self:flex-end; justify-content:flex-end; }
.club-chat-msg-row.theirs { align-self:flex-start; }
.club-msg-avatar {
  width:30px;
  height:30px;
  border-radius:50%;
  background:linear-gradient(135deg,#2f81f7,#7c3aed);
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  overflow:hidden;
  flex:0 0 auto;
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
}
.club-msg-avatar img { width:100%; height:100%; object-fit:cover; }
.club-chat-msg {
  max-width:100% !important;
  padding:9px 11px 7px !important;
  border-radius:16px 16px 16px 4px !important;
  background:#202c33 !important;
  color:#e9edef !important;
  box-shadow:0 6px 22px rgba(0,0,0,.20);
}
.club-chat-msg.mine {
  border-radius:16px 16px 4px 16px !important;
  background:#005c4b !important;
}
.club-chat-msg b { color:#53bdeb !important; font-size:12px; margin-bottom:2px; }
.club-chat-msg span { color:inherit; font-size:15px; line-height:1.35; word-break:break-word; white-space:pre-wrap; }
.club-chat-msg small { color:rgba(233,237,239,.58); text-align:right; font-size:10px; margin-top:3px; }
.club-chat-input-row {
  display:grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 46px;
  align-items:center;
  gap:10px !important;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(139,148,158,.16);
  background: rgba(13,17,23,.94);
  margin:0 !important;
}
.club-chat-input-row input {
  min-width:0;
  min-height:46px;
  border-radius:999px !important;
  background:#202c33 !important;
  border:1px solid rgba(139,148,158,.18) !important;
  padding:0 16px !important;
  font-size:16px;
}
.club-chat-emoji-btn,
.club-chat-send-btn,
.club-chat-input-row button {
  width:46px;
  height:46px;
  border-radius:50% !important;
  display:grid;
  place-items:center;
  padding:0 !important;
  border:0 !important;
  font-size:18px;
}
.club-chat-emoji-btn { background:#202c33 !important; color:#c9d1d9 !important; }
.club-chat-send-btn { background:#2f81f7 !important; color:white !important; }

/* Club profile editor — profile-style settings panel inside Chess Clubs */
.club-profile-editor {
  position:absolute;
  top:18px;
  right:18px;
  width:min(420px, calc(100% - 36px));
  max-height:calc(100% - 36px);
  overflow-y:auto;
  border:1px solid rgba(139,148,158,.20);
  border-radius:22px;
  background:rgba(13,17,23,.96);
  box-shadow:0 30px 80px rgba(0,0,0,.48);
  z-index:20;
  padding:16px;
}
.club-profile-editor.hidden { display:none !important; }
.club-profile-editor-head {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  padding-bottom:12px;
  border-bottom:1px solid rgba(139,148,158,.14);
}
.club-profile-editor-head b { display:block; color:var(--accent); font-size:20px; letter-spacing:.07em; text-transform:uppercase; }
.club-profile-editor-head span { display:block; color:#8b949e; font-size:12px; margin-top:3px; }
.club-profile-editor-body,
.club-profile-edit-preview {
  display:grid;
  grid-template-columns:112px minmax(0, 1fr);
  gap:14px;
  align-items:start;
  margin-top:14px;
}
.club-profile-logo-pick {
  min-height:112px;
  border-radius:22px;
  border:1px dashed rgba(88,166,255,.46);
  background:linear-gradient(135deg, rgba(47,129,247,.16), rgba(35,134,54,.09));
  display:grid;
  place-items:center;
  text-align:center;
  color:#cfe3ff;
  cursor:pointer;
  overflow:hidden;
  padding:10px;
}
.club-profile-logo-pick span {
  width:70px;
  height:70px;
  border-radius:18px;
  background:rgba(13,17,23,.55);
  display:grid;
  place-items:center;
  color:#fff;
  font-size:32px;
  font-weight:900;
  overflow:hidden;
}
.club-profile-logo-pick span img { width:100%; height:100%; object-fit:cover; }
.club-profile-logo-pick em { font-style:normal; font-size:11px; letter-spacing:.10em; text-transform:uppercase; font-weight:900; }
.club-profile-logo-pick input { display:none; }
.club-profile-fields { display:grid; gap:7px; }
.club-profile-fields label {
  color:#8b949e;
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.club-profile-fields input,
.club-profile-fields textarea {
  width:100%;
  border:1px solid rgba(139,148,158,.22);
  background:rgba(22,27,34,.86);
  color:#f0f6fc;
  border-radius:13px;
  padding:12px 13px;
  outline:none;
  font:700 15px 'Rajdhani', sans-serif;
}
.club-profile-fields textarea { min-height:88px; resize:vertical; }
.club-profile-editor-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.club-profile-editor-actions .primary-btn,
.club-profile-editor-actions .ghost-btn,
.club-profile-editor-actions .danger-main-btn {
  width:100%;
  min-height:44px;
  border-radius:13px;
  font-weight:900;
}
.club-profile-editor-actions .primary-btn { grid-column:1 / -1; }
.club-profile-editor-actions .danger-main-btn { grid-column:1 / -1; }

.club-create-profile {
  margin:0 16px 12px !important;
  padding:14px !important;
  border-radius:20px !important;
  background:rgba(13,17,23,.76) !important;
}
.club-create-submit { width:100%; margin-top:12px; min-height:46px; }

/* Make existing friend chat look closer to WhatsApp/Telegram too */
.friend-chat-shell {
  background:#0b141a !important;
}
.friend-chat-screen-header,
.friend-chat-tools-row,
.friend-chat-compose {
  background:#111b21 !important;
  border-color:rgba(134,150,160,.20) !important;
}
.friend-chat-messages {
  background:
    linear-gradient(135deg, rgba(35,134,54,.07), rgba(47,129,247,.06)),
    radial-gradient(circle at 24px 24px, rgba(255,255,255,.04) 0 1px, transparent 1.5px),
    #0b141a !important;
  background-size:auto, 48px 48px, auto;
}
.friend-chat-bubble {
  border-radius:16px 16px 16px 4px !important;
  background:#202c33 !important;
  color:#e9edef !important;
}
.friend-chat-msg.mine .friend-chat-bubble {
  border-radius:16px 16px 4px 16px !important;
  background:#005c4b !important;
}
.friend-chat-compose textarea {
  background:#202c33 !important;
  border-color:rgba(134,150,160,.22) !important;
  border-radius:18px !important;
}

@media (max-width: 860px) {
  #panelClubs {
    min-height: calc(100dvh - 64px);
    border-radius:0 !important;
  }
  .clubs-app-shell {
    display:block;
    min-height: calc(100dvh - 64px);
  }
  .clubs-chat-list-panel {
    width:100%;
    min-height: calc(100dvh - 64px);
    border-right:0;
  }
  .clubs-conversation-panel {
    display:none;
    min-height: calc(100dvh - 64px);
  }
  #panelClubs.club-chat-open .clubs-chat-list-panel { display:none; }
  #panelClubs.club-chat-open .clubs-conversation-panel { display:flex; }
  .club-chat-back { display:grid; }
  .club-chat-head { min-height:64px; padding:10px 12px; }
  .club-avatar-large { width:44px !important; height:44px !important; border-radius:14px !important; }
  .club-chat-title-wrap b { font-size:17px; }
  .club-manage-btn { padding:7px 10px; }
  .club-chat-messages { padding:14px 10px !important; }
  .club-chat-msg-row { max-width:88%; }
  .club-chat-input-row {
    grid-template-columns: 40px minmax(0, 1fr) 44px;
    gap:8px !important;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  }
  .club-chat-emoji-btn,
  .club-chat-send-btn,
  .club-chat-input-row button { width:44px; height:44px; }
  .club-chat-input-row input { min-height:44px; }
  .club-profile-editor {
    position:fixed;
    inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px;
    width:auto;
    max-height:78dvh;
    border-radius:24px;
  }
  .club-profile-editor-body,
  .club-profile-edit-preview {
    grid-template-columns:1fr;
  }
  .club-profile-logo-pick { min-height:138px; }
  .club-profile-editor-actions { grid-template-columns:1fr; }
  .club-create-profile { margin:0 12px 12px !important; }
}

@media (max-width: 430px) {
  .clubs-app-head { padding:14px 14px 10px; }
  .clubs-app-head h3 { font-size:18px; }
  .clubs-app-head p { font-size:11px; }
  .clubs-search-row { margin:10px 12px; }
  .club-chat-row { grid-template-columns:50px minmax(0,1fr) auto; padding:12px 8px; }
  .club-row-action { padding:5px 9px; }
  .club-row-side small { display:none; }
}

/* ════════════════════════════════════════
   POSTS + SOCIAL + CLAN BATTLE UPDATE
════════════════════════════════════════ */
.menu-feature-card.posts .menu-feature-icon {
  background:linear-gradient(135deg, rgba(255,193,7,.22), rgba(47,129,247,.18));
}
.posts-app-shell {
  max-width:900px;
  margin:0 auto;
  display:grid;
  gap:16px;
}
.posts-head,
.post-create-card,
.post-card {
  border:1px solid rgba(139,148,158,.22);
  background:rgba(13,17,23,.78);
  border-radius:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.24);
}
.posts-head {
  padding:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
.posts-head h3 { margin:0; color:var(--accent); font-size:24px; letter-spacing:.08em; text-transform:uppercase; }
.posts-head p { margin:4px 0 0; color:#8b949e; }
.post-create-card { padding:16px; display:grid; gap:12px; }
.posts-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.posts-tab {
  border:1px solid rgba(139,148,158,.22);
  background:rgba(22,27,34,.78);
  color:#c9d1d9;
  border-radius:16px;
  padding:13px 16px;
  font-weight:900;
  letter-spacing:.06em;
  cursor:pointer;
  text-transform:uppercase;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.posts-tab:hover { transform:translateY(-1px); border-color:rgba(88,166,255,.45); }
.posts-tab.active {
  color:#fff;
  border-color:rgba(47,129,247,.65);
  background:linear-gradient(135deg, rgba(47,129,247,.32), rgba(124,58,237,.18));
  box-shadow:0 0 22px rgba(47,129,247,.14);
}
.posts-section-note {
  border:1px solid rgba(88,166,255,.18);
  background:rgba(47,129,247,.08);
  color:#9ecbff;
  border-radius:16px;
  padding:11px 14px;
  font-weight:800;
}
.post-owner-stat {
  border:1px solid rgba(248,81,73,.24);
  background:rgba(248,81,73,.10);
  color:#ffb3ad;
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.post-link {
  color:#58a6ff;
  text-decoration:none;
  font-weight:900;
  overflow-wrap:anywhere;
}
.post-link:hover { text-decoration:underline; }

.post-create-user { display:flex; align-items:center; gap:12px; color:#f0f6fc; }
.post-create-user b { display:block; font-size:18px; }
.post-create-user span { color:#8b949e; font-size:13px; }
.post-mini-avatar,
.post-avatar {
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#2f81f7,#238636);
  color:#fff;
  font-weight:900;
  overflow:hidden;
  flex:0 0 auto;
}
.post-mini-avatar img,
.post-avatar img { width:100%; height:100%; object-fit:cover; }
.post-create-card textarea {
  width:100%;
  min-height:100px;
  resize:vertical;
  border:1px solid rgba(139,148,158,.22);
  background:rgba(22,27,34,.82);
  color:#f0f6fc;
  border-radius:18px;
  padding:14px;
  outline:none;
  font:700 16px 'Rajdhani',sans-serif;
}
.post-create-options {
  display:grid;
  grid-template-columns:150px 150px minmax(0,1fr);
  gap:10px;
}
.post-create-options select,
.post-create-options input {
  border:1px solid rgba(139,148,158,.22);
  background:rgba(22,27,34,.86);
  color:#f0f6fc;
  border-radius:14px;
  padding:12px;
  outline:none;
  font:800 14px 'Rajdhani',sans-serif;
}
.post-image-picker {
  border:1px dashed rgba(88,166,255,.42);
  border-radius:16px;
  padding:14px;
  text-align:center;
  cursor:pointer;
  color:#cfe3ff;
  background:rgba(47,129,247,.08);
  font-weight:900;
}
.post-image-picker input { display:none; }
.post-image-preview {
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(139,148,158,.2);
}
.post-image-preview img { width:100%; max-height:320px; object-fit:cover; display:block; }
.post-image-preview button {
  position:absolute;
  top:10px;
  right:10px;
  border:0;
  border-radius:12px;
  background:rgba(13,17,23,.82);
  color:#fff;
  padding:8px 12px;
  font-weight:900;
}
.post-create-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.post-create-actions small { color:#8b949e; }
.posts-feed { display:grid; gap:14px; }
.post-card { padding:0; overflow:hidden; }
.post-card-head { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid rgba(139,148,158,.12); }
.post-author-block { flex:1; min-width:0; }
.post-author-block b { color:#f0f6fc; cursor:pointer; font-size:17px; }
.post-author-block span { display:block; color:#8b949e; font-size:12px; margin-top:2px; }
.post-text { padding:14px 16px; white-space:pre-wrap; color:#e6edf3; font-size:17px; line-height:1.45; }
.post-text:empty { display:none; }
.post-image img { width:100%; max-height:560px; object-fit:contain; display:block; background:#05080d; }
.post-game-meta { display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px; }
.post-game-meta span,
.post-game-result {
  border:1px solid rgba(139,148,158,.20);
  background:rgba(22,27,34,.75);
  color:#c9d1d9;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
.post-game-result.win { background:rgba(35,134,54,.18); color:#7ee787; border-color:rgba(35,134,54,.36); }
.post-game-result.loss { background:rgba(248,81,73,.16); color:#ff9b94; border-color:rgba(248,81,73,.34); }
.post-game-result.draw { background:rgba(210,153,34,.16); color:#ffd580; border-color:rgba(210,153,34,.34); }
.post-actions { display:flex; gap:8px; padding:10px 16px; border-top:1px solid rgba(139,148,158,.12); border-bottom:1px solid rgba(139,148,158,.10); }
.post-action-btn,
.post-icon-btn {
  border:1px solid rgba(139,148,158,.18);
  background:rgba(22,27,34,.76);
  color:#c9d1d9;
  border-radius:12px;
  padding:9px 12px;
  font-weight:900;
  cursor:pointer;
}
.post-action-btn.active { color:#ff7b72; border-color:rgba(255,123,114,.35); background:rgba(248,81,73,.12); }
.post-icon-btn.danger { color:#ff9b94; border-color:rgba(248,81,73,.34); }
.post-comments { display:grid; gap:8px; padding:12px 16px 0; }
.post-comment { display:flex; gap:8px; align-items:flex-start; background:rgba(22,27,34,.55); border-radius:14px; padding:8px 10px; }
.post-comment b { color:#58a6ff; white-space:nowrap; }
.post-comment span { color:#d8dee9; overflow-wrap:anywhere; }
.post-comment-row { display:flex; gap:8px; padding:12px 16px 16px; }
.post-comment-row input {
  flex:1;
  min-width:0;
  border:1px solid rgba(139,148,158,.2);
  background:rgba(22,27,34,.78);
  color:#f0f6fc;
  border-radius:14px;
  padding:11px 12px;
  outline:none;
}
.post-comment-row button { border:0; background:#2f81f7; color:white; border-radius:13px; padding:0 16px; font-weight:900; }
.public-profile-social-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:12px 0;
}
.profile-social-btn {
  border:1px solid rgba(139,148,158,.2);
  background:rgba(22,27,34,.74);
  color:#f0f6fc;
  border-radius:16px;
  padding:12px;
  font-weight:900;
  cursor:pointer;
}
.profile-social-btn small { display:inline-block; margin-left:6px; color:#8b949e; }
.profile-social-btn.follow.active { background:rgba(47,129,247,.18); border-color:rgba(47,129,247,.42); color:#79c0ff; }
.profile-social-btn.like.active { background:rgba(248,81,73,.14); border-color:rgba(248,81,73,.38); color:#ff9b94; }
.profile-social-btn:disabled { opacity:.55; cursor:not-allowed; }
.club-battle-list { display:grid; gap:8px; margin-bottom:12px; }
.club-battle-card {
  border:1px solid rgba(139,148,158,.18);
  background:rgba(22,27,34,.70);
  border-radius:16px;
  padding:10px;
}
.club-battle-card.status-active { border-color:rgba(47,129,247,.42); background:rgba(47,129,247,.10); }
.club-battle-card.status-completed { border-color:rgba(35,134,54,.42); background:rgba(35,134,54,.10); }
.club-battle-vs { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; }
.club-battle-vs span { display:flex; align-items:center; gap:7px; min-width:0; color:#f0f6fc; font-weight:900; }
.club-battle-vs b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.club-battle-vs em { font-style:normal; color:#f85149; font-weight:900; }
.club-avatar.small { width:28px; height:28px; border-radius:10px; font-size:13px; }
.club-battle-meta { margin-top:6px; color:#8b949e; font-size:12px; }
.club-battle-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.club-battle-actions button,
.club-row-action.battle {
  border:0;
  background:#7c3aed;
  color:white;
  border-radius:10px;
  padding:7px 10px;
  font-weight:900;
  cursor:pointer;
}
.club-battle-actions .ghost-btn { background:rgba(139,148,158,.15); color:#c9d1d9; }
.club-row-action.battle { background:#7c3aed !important; margin-top:4px; }
@media (max-width: 780px) {
  .posts-app-shell { max-width:100%; }
  .posts-head { align-items:flex-start; }
  .post-create-options { grid-template-columns:1fr; }
  .post-card-head { align-items:flex-start; }
  .post-actions { display:grid; grid-template-columns:1fr 1fr; }
  .posts-tabs { grid-template-columns:1fr; }
  .post-card-head { flex-wrap:wrap; }
  .post-owner-stat { width:100%; text-align:center; }
  .public-profile-social-actions { grid-template-columns:1fr; }
  .club-battle-vs { grid-template-columns:1fr; }
  .club-battle-vs em { text-align:left; }
}

/* ════════════════════════════════════════
   Update pack: stadium arena, voice, daily rewards, mystery box
════════════════════════════════════════ */
.menu-dashboard-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.daily-rewards-btn {
  border: 1px solid rgba(251,191,36,.42);
  border-radius: 14px;
  padding: 10px 14px;
  color: #fff7ed;
  background: linear-gradient(135deg, rgba(245,158,11,.95), rgba(190,24,93,.85));
  box-shadow: 0 0 20px rgba(245,158,11,.16);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 900;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.daily-rewards-btn:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(245,158,11,.25); }
.daily-rewards-btn:active { transform: translateY(0) scale(.97); }

body[data-board="stadium"] {
  --light-square: #122b46;
  --dark-square: #071827;
}
body[data-board="stadium"] #gameBoard .left-panel {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% -10%, rgba(54,247,255,.28), transparent 34%),
    radial-gradient(circle at 0% 18%, rgba(88,166,255,.18), transparent 32%),
    radial-gradient(circle at 100% 22%, rgba(168,85,247,.17), transparent 34%),
    linear-gradient(180deg, rgba(5,12,28,.98), rgba(6,24,39,.96));
  border-color: rgba(54,247,255,.46) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.45), 0 0 38px rgba(54,247,255,.14) !important;
}
body[data-board="stadium"] #gameBoard .left-panel::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 0 32%, rgba(255,255,255,.06) 33% 35%, transparent 36% 100%),
    linear-gradient(245deg, transparent 0 31%, rgba(54,247,255,.07) 32% 34%, transparent 35% 100%),
    repeating-linear-gradient(90deg, rgba(54,247,255,.045) 0 1px, transparent 1px 32px);
  opacity: .9;
}
body[data-board="stadium"] #board {
  border-color: rgba(54,247,255,.72) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 0 38px rgba(54,247,255,.22), 0 18px 42px rgba(0,0,0,.45);
}
body[data-board="stadium"] .square.light {
  background: linear-gradient(135deg, #14395b, #0c253d);
}
body[data-board="stadium"] .square.dark {
  background: linear-gradient(135deg, #05111e, #092237);
}
body[data-board="stadium"] .square {
  box-shadow: inset 0 0 10px rgba(54,247,255,.05);
}
body[data-board="stadium"] .square.selected { outline-color: rgba(54,247,255,.92); }
body[data-board="stadium"] .square.legal-target::after {
  background: rgba(54,247,255,.46);
  box-shadow: 0 0 14px rgba(54,247,255,.85);
}

.rewards-modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 280;
  padding: 18px;
}
.rewards-card {
  width: min(720px, 96vw);
  max-height: min(86vh, 760px);
  overflow-y: auto;
  border: 1px solid rgba(251,191,36,.25);
  border-radius: 26px;
  background:
    radial-gradient(circle at 15% 0%, rgba(251,191,36,.16), transparent 38%),
    radial-gradient(circle at 85% 12%, rgba(88,166,255,.16), transparent 36%),
    linear-gradient(180deg, rgba(13,17,23,.98), rgba(22,27,34,.97));
  box-shadow: 0 30px 110px rgba(0,0,0,.6), 0 0 40px rgba(251,191,36,.1);
  padding: 22px;
  color: #f0f6fc;
}
.rewards-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.rewards-kicker {
  display: inline-block;
  color: #fbbf24;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.rewards-head h2 { margin: 0; font-size: 26px; }
.daily-claim-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 18px;
  border: 1px solid rgba(46,160,67,.38);
  background: linear-gradient(135deg, rgba(46,160,67,.20), rgba(35,134,54,.08));
}
.daily-claim-card b { color: #7ee787; font-size: 17px; }
.daily-claim-card span { color: #c9d1d9; font-weight: 700; }
.rewards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.reward-stat {
  border: 1px solid rgba(48,54,61,.9);
  border-radius: 16px;
  padding: 14px;
  background: rgba(1,4,9,.42);
  text-align: center;
}
.reward-stat b { display:block; font-size: 26px; color: #58a6ff; }
.reward-stat.mystery b { color: #fbbf24; }
.reward-stat span { color: #8b949e; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.mystery-box-zone {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border-radius: 20px;
  padding: 16px;
  background: rgba(1,4,9,.36);
  border: 1px solid rgba(88,166,255,.22);
  margin-bottom: 14px;
}
.mystery-box-art {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 58px;
  border-radius: 24px;
  background: radial-gradient(circle, rgba(251,191,36,.28), rgba(168,85,247,.12));
  box-shadow: inset 0 0 24px rgba(255,255,255,.06), 0 0 28px rgba(251,191,36,.12);
  animation: mysteryFloat 2.4s ease-in-out infinite;
}
@keyframes mysteryFloat { 50% { transform: translateY(-6px) rotate(3deg); } }
.mystery-box-zone h3 { margin: 0 0 4px; }
.mystery-box-zone p { margin: 0 0 12px; color: #8b949e; line-height: 1.35; }
.mystery-result { min-height: 26px; margin: 8px 0 14px; }
.reward-prize {
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(88,166,255,.12);
  border: 1px solid rgba(88,166,255,.25);
  color: #dbeafe;
  font-weight: 800;
}
.reward-opening { color: #fbbf24; font-weight: 900; }
.reward-error { color: #ff7b72; font-weight: 800; }
.reward-inventory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.reward-inventory div {
  border: 1px solid rgba(48,54,61,.9);
  border-radius: 15px;
  padding: 12px;
  background: rgba(13,17,23,.68);
}
.reward-inventory b { display:block; margin-bottom: 4px; color: #f0f6fc; }
.reward-inventory span { color: #8b949e; font-size: 13px; line-height: 1.35; }

body[data-profile-frame="royal-gold"] #topAvatar,
body[data-profile-frame="royal-gold"] .pd-avatar-wrap,
.public-frame-royal-gold .public-profile-avatar {
  box-shadow: 0 0 0 3px rgba(251,191,36,.88), 0 0 26px rgba(251,191,36,.38) !important;
  border-color: rgba(251,191,36,.9) !important;
}
body[data-profile-frame="neon-blue"] #topAvatar,
body[data-profile-frame="neon-blue"] .pd-avatar-wrap,
.public-frame-neon-blue .public-profile-avatar {
  box-shadow: 0 0 0 3px rgba(54,247,255,.82), 0 0 30px rgba(54,247,255,.42) !important;
  border-color: rgba(54,247,255,.9) !important;
}
body[data-profile-frame="galaxy-purple"] #topAvatar,
body[data-profile-frame="galaxy-purple"] .pd-avatar-wrap,
.public-frame-galaxy-purple .public-profile-avatar {
  box-shadow: 0 0 0 3px rgba(168,85,247,.82), 0 0 30px rgba(168,85,247,.42) !important;
  border-color: rgba(168,85,247,.9) !important;
}
body[data-profile-frame="stadium-champion"] #topAvatar,
body[data-profile-frame="stadium-champion"] .pd-avatar-wrap,
.public-frame-stadium-champion .public-profile-avatar {
  box-shadow: 0 0 0 3px rgba(46,160,67,.9), 0 0 12px rgba(54,247,255,.55), 0 0 32px rgba(46,160,67,.32) !important;
  border-color: rgba(126,231,135,.9) !important;
}

@media (max-width: 700px) {
  .menu-dashboard-actions { justify-content: stretch; width: 100%; }
  .menu-dashboard-actions button { flex: 1; }
  .rewards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mystery-box-zone { grid-template-columns: 1fr; text-align: center; }
  .mystery-box-art { margin: 0 auto; }
  .reward-inventory { grid-template-columns: 1fr; }
  .rewards-card { padding: 16px; border-radius: 20px; }
}

/* ════════════════════════════════════════
   Reward collection upgrade: claimed list + customization
════════════════════════════════════════ */
.rewards-card-wide {
  width: min(980px, 97vw);
}
.reward-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 16px;
  padding: 6px;
  border: 1px solid rgba(139,148,158,.18);
  border-radius: 18px;
  background: rgba(1,4,9,.32);
}
.reward-tabs button {
  border: 0;
  border-radius: 14px;
  padding: 12px 10px;
  background: transparent;
  color: #8b949e;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: .03em;
}
.reward-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(245,158,11,.95), rgba(47,129,247,.75));
  box-shadow: 0 10px 26px rgba(245,158,11,.14);
}
.mystery-box-zone.upgraded {
  margin-bottom: 14px;
}
.reward-prize.big {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-color: rgba(251,191,36,.4);
  background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(88,166,255,.12));
}
.reward-prize-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 32px;
  background: rgba(0,0,0,.25);
  box-shadow: inset 0 0 16px rgba(255,255,255,.07);
}
.reward-prize.big b,
.reward-prize.big span,
.reward-prize.big small { display:block; }
.reward-new { color: #7ee787; }
.reward-duplicate { color: #fbbf24; }
.reward-prize.big small { color: #8b949e; margin-top: 3px; }
.reward-customize-panel {
  display: grid;
  gap: 14px;
}
.reward-customize-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid rgba(88,166,255,.22);
  border-radius: 18px;
  background: rgba(88,166,255,.08);
}
.reward-customize-head b { display:block; color:#f0f6fc; font-size:18px; }
.reward-customize-head span { display:block; color:#8b949e; margin-top:3px; }
.reward-disable-actions {
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.reward-disable-actions button,
.reward-equip-btn {
  border: 1px solid rgba(139,148,158,.24);
  background: rgba(22,27,34,.82);
  color: #c9d1d9;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer;
}
.reward-disable-actions button:hover,
.reward-equip-btn:hover { border-color: rgba(88,166,255,.55); color:#fff; transform: translateY(-1px); }
.reward-customize-panel h4 {
  margin: 4px 0 -4px;
  color: #fbbf24;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
}
.reward-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.reward-item-card {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(139,148,158,.16);
  background: rgba(13,17,23,.72);
  border-radius: 18px;
  padding: 12px;
  min-width: 0;
}
.reward-item-card.active {
  border-color: rgba(126,231,135,.55);
  box-shadow: 0 0 0 1px rgba(126,231,135,.12), 0 0 24px rgba(46,160,67,.10);
}
.reward-item-card.rarity-rare { background: linear-gradient(135deg, rgba(47,129,247,.15), rgba(13,17,23,.72)); }
.reward-item-card.rarity-epic { background: linear-gradient(135deg, rgba(168,85,247,.17), rgba(13,17,23,.72)); }
.reward-item-card.rarity-legendary { background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(13,17,23,.72)); }
.reward-item-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: rgba(1,4,9,.45);
  box-shadow: inset 0 0 18px rgba(255,255,255,.06);
}
.reward-item-body { min-width: 0; }
.reward-item-body b {
  display: block;
  color: #f0f6fc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reward-item-body span { color: #8b949e; font-size: 12px; font-weight: 800; }
.reward-equip-btn.active { color:#0b1b12; background:#7ee787; border-color:#7ee787; }
.reward-empty {
  border: 1px dashed rgba(139,148,158,.24);
  border-radius: 16px;
  padding: 14px;
  color: #8b949e;
  background: rgba(13,17,23,.42);
}
.reward-history-list {
  display: grid;
  gap: 10px;
}
.reward-history-row {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(139,148,158,.16);
  background: rgba(13,17,23,.7);
  border-radius: 16px;
}
.reward-history-row.rarity-daily { border-color: rgba(126,231,135,.3); background: rgba(46,160,67,.08); }
.reward-history-row.rarity-legendary { border-color: rgba(251,191,36,.32); background: rgba(251,191,36,.08); }
.reward-history-icon {
  width: 48px;
  height: 48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background: rgba(1,4,9,.46);
  font-size: 24px;
}
.reward-history-row b { color:#f0f6fc; display:block; }
.reward-history-row span { color:#8b949e; display:block; font-size:13px; }
.reward-history-row small { color:#6e7681; white-space:nowrap; }
.cosmetic-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.cosmetic-mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 150px;
  border: 1px solid rgba(139,148,158,.16);
  border-radius: 999px;
  padding: 3px 7px;
  color: #c9d1d9;
  background: rgba(13,17,23,.62);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cosmetic-mini-chip.frame { border-color: rgba(251,191,36,.26); color:#fbbf24; }
.cosmetic-mini-chip.board { border-color: rgba(88,166,255,.26); color:#9ecbff; }
.cosmetic-mini-chip.pieces { border-color: rgba(168,85,247,.26); color:#d8b4fe; }
.reward-frame-royal-gold {
  box-shadow: 0 0 0 3px rgba(251,191,36,.86), 0 0 22px rgba(251,191,36,.34) !important;
  border-color: rgba(251,191,36,.95) !important;
}
.reward-frame-neon-blue {
  box-shadow: 0 0 0 3px rgba(54,247,255,.82), 0 0 24px rgba(54,247,255,.38) !important;
  border-color: rgba(54,247,255,.95) !important;
}
.reward-frame-galaxy-purple {
  box-shadow: 0 0 0 3px rgba(168,85,247,.82), 0 0 24px rgba(168,85,247,.38) !important;
  border-color: rgba(168,85,247,.95) !important;
}
.reward-frame-stadium-champion {
  box-shadow: 0 0 0 3px rgba(126,231,135,.82), 0 0 12px rgba(54,247,255,.45), 0 0 28px rgba(46,160,67,.28) !important;
  border-color: rgba(126,231,135,.95) !important;
}

@media (max-width: 760px) {
  .reward-tabs { grid-template-columns: 1fr; }
  .reward-customize-head { flex-direction: column; }
  .reward-disable-actions { justify-content: stretch; width:100%; }
  .reward-disable-actions button { flex:1; }
  .reward-item-grid { grid-template-columns: 1fr; }
  .reward-item-card { grid-template-columns: 48px minmax(0,1fr); }
  .reward-item-card .reward-equip-btn { grid-column: 1 / -1; width:100%; }
  .reward-history-row { grid-template-columns: 42px minmax(0,1fr); }
  .reward-history-row small { grid-column: 2; }
}

/* Followers / Following management */
.follow-network-card {
  max-width: 760px;
  width: min(94vw, 760px);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.follow-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(139,148,158,.14);
  background: rgba(13,17,23,.72);
}
.follow-tabs button {
  border: 1px solid rgba(139,148,158,.20);
  background: rgba(22,27,34,.78);
  color: #c9d1d9;
  border-radius: 14px;
  padding: 11px 12px;
  font-weight: 900;
  cursor: pointer;
}
.follow-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(47,129,247,.72), rgba(124,58,237,.62));
  border-color: rgba(88,166,255,.48);
  box-shadow: 0 12px 28px rgba(47,129,247,.18);
}
.follow-network-body {
  overflow: auto;
  padding: 14px 16px 18px;
  display: grid;
  gap: 10px;
}
.follow-network-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(139,148,158,.16);
  background: linear-gradient(135deg, rgba(22,27,34,.88), rgba(13,17,23,.84));
  border-radius: 18px;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.follow-network-row:hover {
  transform: translateY(-1px);
  border-color: rgba(88,166,255,.38);
  background: linear-gradient(135deg, rgba(22,27,34,.94), rgba(47,129,247,.10));
}
.global-avatar.follow-network-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 20px;
  font-weight: 950;
}
.follow-network-info {
  min-width: 0;
}
.follow-network-info b {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #f0f6fc;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.follow-network-info span {
  display: block;
  color: #8b949e;
  font-size: 12px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.follow-network-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.follow-row-action {
  border: 1px solid rgba(88,166,255,.30);
  background: rgba(47,129,247,.14);
  color: #79c0ff;
  border-radius: 12px;
  padding: 9px 12px;
  font-weight: 900;
  cursor: pointer;
}
.follow-row-action.unfollow {
  border-color: rgba(248,81,73,.34);
  background: rgba(248,81,73,.12);
  color: #ff9b94;
}
.follow-empty-card {
  border: 1px dashed rgba(139,148,158,.24);
  background: rgba(22,27,34,.62);
  color: #c9d1d9;
  border-radius: 18px;
  padding: 24px 16px;
  text-align: center;
}
.follow-empty-card b {
  display: block;
  color: #f0f6fc;
  font-size: 18px;
  margin-bottom: 6px;
}
.follow-empty-card span {
  color: #8b949e;
}
@media (max-width: 620px) {
  .follow-network-card {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .follow-tabs {
    padding: 10px;
  }
  .follow-network-body {
    padding: 10px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .follow-network-row {
    grid-template-columns: auto 1fr;
    gap: 10px;
  }
  .follow-network-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .follow-row-action {
    width: 100%;
  }
  .global-avatar.follow-network-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
}

/* ════════════════════════════════════════
   MOBILE CHESS CLUB CHAT FIX — FRIEND CHAT STYLE
   Makes club chat behave like the Friends chat full-screen view on phones.
════════════════════════════════════════ */
body.club-chat-open-body {
  overflow: hidden !important;
  touch-action: none;
}

@media (max-width: 860px) {
  /* When a club chat is open, it becomes a real full-screen chat screen. */
  #panelClubs.club-chat-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10080 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #0b141a !important;
    box-shadow: none !important;
  }

  #panelClubs.club-chat-open .clubs-app-shell {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    display: block !important;
    background: #0b141a !important;
    overflow: hidden !important;
  }

  #panelClubs.club-chat-open .clubs-chat-list-panel,
  #panelClubs.club-chat-open .club-empty-state {
    display: none !important;
  }

  #panelClubs.club-chat-open .clubs-conversation-panel {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    background: #0b141a !important;
  }

  #panelClubs.club-chat-open .club-chat-box {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #0b141a !important;
  }

  #panelClubs.club-chat-open .club-chat-head {
    flex: 0 0 auto !important;
    min-height: 66px !important;
    padding: max(10px, env(safe-area-inset-top)) 10px 10px !important;
    gap: 10px !important;
    background: #111b21 !important;
    border-bottom: 1px solid rgba(134,150,160,.22) !important;
    box-shadow: 0 2px 18px rgba(0,0,0,.20) !important;
  }

  #panelClubs.club-chat-open .club-chat-back,
  #panelClubs.club-chat-open .club-chat-head .modal-close {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: #202c33 !important;
    color: #e9edef !important;
    font-size: 28px !important;
    line-height: 1 !important;
    padding: 0 !important;
  }

  #panelClubs.club-chat-open .club-chat-head .modal-close {
    margin-left: 4px !important;
    font-size: 22px !important;
  }

  #panelClubs.club-chat-open .club-avatar-large {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 14px !important;
  }

  #panelClubs.club-chat-open .club-chat-title-wrap {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  #panelClubs.club-chat-open .club-chat-title-wrap b {
    font-size: 20px !important;
    line-height: 1.05 !important;
  }

  #panelClubs.club-chat-open .club-chat-title-wrap span {
    font-size: 12px !important;
    margin-top: 4px !important;
  }

  #panelClubs.club-chat-open .club-manage-btn {
    min-width: auto !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  #panelClubs.club-chat-open .club-chat-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 18px 12px !important;
    gap: 10px !important;
    background:
      linear-gradient(rgba(11,20,26,.80), rgba(11,20,26,.80)),
      radial-gradient(circle at 22px 22px, rgba(255,255,255,.055) 0 1px, transparent 1.5px),
      radial-gradient(circle at 46px 46px, rgba(255,255,255,.035) 0 1px, transparent 1.5px),
      #0b141a !important;
    background-size: auto, 48px 48px, 48px 48px, auto !important;
  }

  #panelClubs.club-chat-open .club-chat-msg-row {
    max-width: 88% !important;
    gap: 7px !important;
  }

  #panelClubs.club-chat-open .club-chat-msg-row.mine {
    margin-left: auto !important;
  }

  #panelClubs.club-chat-open .club-chat-msg-row.theirs {
    margin-right: auto !important;
  }

  #panelClubs.club-chat-open .club-msg-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  #panelClubs.club-chat-open .club-chat-msg {
    padding: 10px 12px 8px !important;
    border: 0 !important;
    border-radius: 16px 16px 16px 4px !important;
    background: #202c33 !important;
    color: #e9edef !important;
    font-size: 16px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
  }

  #panelClubs.club-chat-open .club-chat-msg.mine {
    border-radius: 16px 16px 4px 16px !important;
    background: #005c4b !important;
  }

  #panelClubs.club-chat-open .club-chat-msg span {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  #panelClubs.club-chat-open .club-chat-msg small {
    font-size: 11px !important;
    margin-top: 5px !important;
  }

  #panelClubs.club-chat-open .club-chat-input-row {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 52px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(134,150,160,.22) !important;
    background: #111b21 !important;
    margin: 0 !important;
  }

  #panelClubs.club-chat-open .club-chat-input-row input {
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    border: 1px solid rgba(134,150,160,.18) !important;
    border-radius: 999px !important;
    background: #202c33 !important;
    color: #e9edef !important;
    padding: 0 18px !important;
    font-size: 18px !important;
    outline: none !important;
  }

  #panelClubs.club-chat-open .club-chat-emoji-btn,
  #panelClubs.club-chat-open .club-chat-send-btn,
  #panelClubs.club-chat-open .club-chat-input-row button {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 50% !important;
    border: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 22px !important;
  }

  #panelClubs.club-chat-open .club-chat-emoji-btn {
    background: #202c33 !important;
    color: #e9edef !important;
  }

  #panelClubs.club-chat-open .club-chat-send-btn {
    background: #2f81f7 !important;
    color: white !important;
    font-size: 24px !important;
  }
}

@media (max-width: 430px) {
  #panelClubs.club-chat-open .club-manage-btn {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }

  #panelClubs.club-chat-open .club-chat-head .modal-close {
    display: none !important;
  }

  #panelClubs.club-chat-open .club-chat-input-row {
    grid-template-columns: 44px minmax(0, 1fr) 50px !important;
  }

  #panelClubs.club-chat-open .club-chat-emoji-btn,
  #panelClubs.club-chat-open .club-chat-send-btn,
  #panelClubs.club-chat-open .club-chat-input-row button {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }
}


/* Club chat emoji picker fix */
#clubEmojiPicker.club-picker {
  margin: 0 !important;
  padding: 10px 14px !important;
  border-top: 1px solid rgba(134,150,160,.16) !important;
  background: rgba(17,27,33,.98) !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 8px !important;
  max-height: 160px !important;
  overflow-y: auto !important;
  z-index: 20;
}
#clubEmojiPicker.club-picker.hidden { display: none !important; }
#clubEmojiPicker.club-picker button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(134,150,160,.18) !important;
  background: rgba(32,44,51,.95) !important;
  color: #e9edef !important;
  font-size: 24px !important;
  line-height: 1 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer;
}
#clubEmojiPicker.club-picker button:active { transform: scale(.94); }
@media (max-width: 700px) {
  #panelClubs.club-chat-open #clubEmojiPicker.club-picker {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-height: 156px !important;
    grid-template-columns: repeat(6, 1fr) !important;
    padding: 10px 12px !important;
    border-top: 1px solid rgba(134,150,160,.18) !important;
    box-shadow: 0 -10px 24px rgba(0,0,0,.22) !important;
  }
  #panelClubs.club-chat-open #clubEmojiPicker.club-picker button {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 24px !important;
  }
}


/* ════════════════════════════════════════
   Premium / monetization preview
════════════════════════════════════════ */
.menu-feature-card.premium .menu-feature-icon,
.menu-feature-card.premium { border-color: rgba(255, 205, 78, .34); }
.menu-feature-card.premium .menu-feature-icon { background: linear-gradient(135deg, rgba(255,205,78,.22), rgba(55,128,255,.16)); }

.premium-page-shell { display:flex; flex-direction:column; gap:18px; }
.premium-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:18px; border:1px solid rgba(255,255,255,.11); border-radius:22px; background:linear-gradient(135deg, rgba(18,28,42,.92), rgba(6,10,18,.94)); }
.premium-kicker { color:#f4c95d; text-transform:uppercase; letter-spacing:.18em; font-size:.76rem; font-weight:900; }
.premium-head h3 { margin:6px 0 4px; color:#fff; font-size:1.55rem; }
.premium-head p { margin:0; color:#94a3b8; max-width:720px; }
.premium-current-card { min-width:190px; border:1px solid rgba(255,205,78,.3); border-radius:18px; padding:12px 14px; background:rgba(255,205,78,.08); color:#e5e7eb; display:flex; flex-direction:column; gap:4px; }
.premium-current-card span { color:#aab4c3; font-size:.86rem; }
.premium-plan-tabs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.premium-tier-tab { border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:14px 16px; background:rgba(10,15,25,.86); color:#dbeafe; display:flex; flex-direction:column; gap:5px; align-items:flex-start; cursor:pointer; transition:.18s ease; box-shadow:0 12px 28px rgba(0,0,0,.18); }
.premium-tier-tab:hover { transform:translateY(-1px); border-color:rgba(47,128,255,.35); }
.premium-tier-tab.active { box-shadow:0 0 0 1px rgba(255,205,78,.28), 0 20px 60px rgba(42,127,255,.18); }
.premium-tier-tab.pawn { border-color:rgba(245,196,84,.32); }
.premium-tier-tab.knight { border-color:rgba(67,145,255,.35); }
.premium-tier-tab.king { border-color:rgba(181,114,255,.42); }
.premium-tier-tab-top { font-weight:1000; color:#fff; font-size:1rem; }
.premium-tier-tab-bottom { font-size:.82rem; color:#94a3b8; font-weight:900; letter-spacing:.04em; }
.premium-tier-tab-state { display:inline-flex; align-items:center; justify-content:center; margin-top:4px; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.06); color:#f4d57d; font-size:.72rem; font-weight:1000; }
.premium-plan-view { display:block; }
.premium-plan-card-single { max-width:none; }
.premium-actions-row { align-items:flex-start; }
.premium-actions-group { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.premium-plan-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.premium-plan-card { position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:24px; padding:18px; background:rgba(10,15,25,.86); box-shadow:0 18px 50px rgba(0,0,0,.22); }
.premium-plan-card::before { content:""; position:absolute; inset:-1px; opacity:.16; pointer-events:none; background:radial-gradient(circle at top right, #fff, transparent 38%); }
.premium-plan-card.pawn { border-color:rgba(245,196,84,.35); }
.premium-plan-card.knight { border-color:rgba(67,145,255,.38); }
.premium-plan-card.king { border-color:rgba(181,114,255,.45); }
.premium-plan-card.locked { filter:saturate(.75); }
.premium-plan-card.active { box-shadow:0 0 0 1px rgba(255,205,78,.28), 0 20px 60px rgba(42,127,255,.18); }
.premium-plan-top { display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.premium-plan-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:16px; background:linear-gradient(135deg,#2f80ff,#f5c54f); color:#fff; font-size:1.5rem; }
.premium-plan-top b { color:#fff; font-size:1.18rem; display:block; }
.premium-plan-top small { color:#94a3b8; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.premium-price { margin:18px 0 8px; color:#fff; font-size:2rem; font-weight:1000; letter-spacing:.02em; }
.premium-price span { font-size:.82rem; color:#94a3b8; margin-left:4px; }
.premium-plan-state { color:#f7d36f; font-weight:900; font-size:.83rem; margin-bottom:10px; }
.premium-plan-card ul { padding:0; margin:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.premium-plan-card li { color:#cbd5e1; font-size:.88rem; line-height:1.25; }
.premium-buy-btn { position:relative; z-index:1; width:100%; margin-top:16px; border:0; border-radius:16px; padding:13px 16px; color:#fff; font-weight:1000; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; background:linear-gradient(135deg,#2f80ff,#6b4dff); box-shadow:0 16px 34px rgba(47,128,255,.22); transition:transform .16s ease, filter .16s ease; }
.premium-buy-btn:hover { transform:translateY(-1px); filter:brightness(1.08); }
.premium-buy-btn:active { transform:scale(.98); }
.premium-buy-btn.pawn { background:linear-gradient(135deg,#c89b2f,#2f80ff); }
.premium-buy-btn.knight { background:linear-gradient(135deg,#2f80ff,#5b7cff); }
.premium-buy-btn.king { background:linear-gradient(135deg,#f5c54f,#7c3aed); }
.premium-webhook-note { position:relative; z-index:1; margin:10px 0 0; color:#94a3b8; font-size:.82rem; }
.premium-checkout-msg { border:1px solid rgba(88,166,255,.28); border-radius:16px; padding:12px 14px; background:rgba(47,128,255,.10); color:#dbeafe; font-weight:850; }
.premium-checkout-msg.success { border-color:rgba(46,160,67,.34); background:rgba(46,160,67,.12); color:#c8ffd1; }
.premium-checkout-msg.error { border-color:rgba(248,81,73,.34); background:rgba(248,81,73,.12); color:#ffb4ae; }
.premium-extra-features, .premium-avatar-section { border:1px solid rgba(255,255,255,.11); border-radius:22px; padding:18px; background:rgba(12,18,28,.78); }
.premium-extra-features h4, .premium-avatar-section h4 { margin:0 0 10px; color:#fff; }
.premium-feature-tags { display:flex; flex-wrap:wrap; gap:8px; }
.premium-feature-tags span { border:1px solid rgba(47,128,255,.28); background:rgba(47,128,255,.08); color:#dbeafe; border-radius:999px; padding:8px 10px; font-weight:800; font-size:.82rem; }
.premium-section-row { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:14px; }
.premium-section-row p { margin:4px 0 0; color:#94a3b8; }
.premium-avatar-grid { display:flex; flex-direction:column; gap:18px; }
.premium-avatar-tier-group { border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:14px; background:rgba(3,8,16,.28); }
.premium-avatar-tier-group.tier-1 { border-color:rgba(245,196,84,.2); }
.premium-avatar-tier-group.tier-2 { border-color:rgba(67,145,255,.22); }
.premium-avatar-tier-group.tier-3 { border-color:rgba(181,114,255,.24); }
.premium-avatar-tier-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; color:#fff; }
.premium-avatar-tier-head b { font-size:1rem; letter-spacing:.08em; text-transform:uppercase; }
.premium-avatar-tier-head span { color:#94a3b8; font-size:.84rem; font-weight:900; }
.premium-avatar-tier-grid { display:grid; grid-template-columns:repeat(5, minmax(120px, 1fr)); gap:14px; }
.premium-avatar-card { position:relative; cursor:pointer; border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:12px; background:linear-gradient(180deg, rgba(15,23,36,.9), rgba(4,8,16,.92)); display:flex; flex-direction:column; align-items:center; gap:9px; color:#cbd5e1; font-size:.82rem; font-weight:1000; min-height:150px; overflow:hidden; }
.premium-avatar-card::before { content:""; position:absolute; inset:-40% -30% auto auto; width:90px; height:90px; border-radius:50%; opacity:.22; background:#2f80ff; filter:blur(20px); pointer-events:none; }
.premium-avatar-card.tier-1 { border-color:rgba(245,196,84,.22); }
.premium-avatar-card.tier-2 { border-color:rgba(67,145,255,.24); }
.premium-avatar-card.tier-3 { border-color:rgba(181,114,255,.26); }
.premium-avatar-level { position:relative; z-index:1; align-self:stretch; padding:5px 7px; border-radius:999px; background:rgba(255,255,255,.06); color:#dbeafe; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }
.premium-avatar-card img { position:relative; z-index:1; width:92px; height:92px; border-radius:24px; object-fit:cover; box-shadow:0 16px 36px rgba(0,0,0,.38); }
.premium-avatar-card > span:last-child { position:relative; z-index:1; }
.premium-avatar-card.locked img { filter:grayscale(.9) brightness(.58); }
.premium-avatar-card.locked::after { content:""; position:absolute; left:12px; right:12px; top:43px; height:92px; border-radius:24px; background:rgba(0,0,0,.42); z-index:2; }
.premium-avatar-card.selected { border-color:#f7cf62; box-shadow:0 0 0 2px rgba(247,207,98,.24), 0 18px 48px rgba(247,207,98,.11); }
.premium-avatar-subgroup { display:flex; flex-direction:column; gap:12px; padding-top:12px; margin-top:12px; border-top:1px solid rgba(255,255,255,.08); }
.premium-avatar-subgroup:first-of-type { border-top:none; margin-top:0; padding-top:0; }
.premium-avatar-subgroup-head { display:flex; justify-content:space-between; align-items:center; gap:10px; color:#dbeafe; }
.premium-avatar-subgroup-head b { font-size:.92rem; }
.premium-avatar-subgroup-head span { color:#93a4b8; font-size:.78rem; font-weight:800; }
.premium-avatar-subtag { position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:100%; color:#93a4b8; font-size:.68rem; line-height:1.2; letter-spacing:.03em; }
.premium-banner-tier-grid { display:grid; grid-template-columns:repeat(3, minmax(180px, 1fr)); gap:14px; }
.premium-banner-card { position:relative; cursor:pointer; border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:12px; background:linear-gradient(180deg, rgba(15,23,36,.9), rgba(4,8,16,.92)); display:flex; flex-direction:column; align-items:center; gap:10px; color:#cbd5e1; font-size:.82rem; font-weight:1000; min-height:170px; overflow:hidden; }
.premium-banner-card::before { content:""; position:absolute; inset:-40% -30% auto auto; width:110px; height:110px; border-radius:50%; opacity:.22; background:#2f80ff; filter:blur(20px); pointer-events:none; }
.premium-banner-card.tier-1 { border-color:rgba(245,196,84,.22); }
.premium-banner-card.tier-2 { border-color:rgba(67,145,255,.24); }
.premium-banner-card.tier-3 { border-color:rgba(181,114,255,.26); }
.premium-banner-card img { position:relative; z-index:1; width:100%; height:88px; border-radius:16px; object-fit:cover; box-shadow:0 16px 36px rgba(0,0,0,.38); }
.premium-banner-card > span:last-child { position:relative; z-index:1; }
.premium-banner-card.locked img { filter:grayscale(.9) brightness(.58); }
.premium-banner-card.locked::after { content:""; position:absolute; left:12px; right:12px; top:43px; height:88px; border-radius:16px; background:rgba(0,0,0,.42); z-index:2; }
.premium-banner-card.selected { border-color:#f7cf62; box-shadow:0 0 0 2px rgba(247,207,98,.24), 0 18px 48px rgba(247,207,98,.11); }
.premium-friend-banner-picker { margin-top:14px; border:1px solid rgba(255,255,255,.10); border-radius:20px; padding:14px; background:rgba(12,18,28,.56); }
.premium-friend-banner-picker h4 { margin:0 0 6px; color:#fff; }
.premium-friend-banner-picker p { margin:0; color:#94a3b8; }

.vip-badge { display:inline-flex; align-items:center; gap:4px; vertical-align:middle; margin-left:6px; padding:3px 8px; border-radius:999px; font-size:.72rem; font-weight:1000; line-height:1; letter-spacing:.02em; border:1px solid rgba(255,255,255,.15); white-space:nowrap; }
.vip-tier-1 { color:#ffe9a6; background:rgba(191,147,38,.18); border-color:rgba(255,205,78,.35); }
.vip-tier-2 { color:#bfdbfe; background:rgba(47,128,255,.18); border-color:rgba(91,165,255,.38); }
.vip-tier-3 { color:#f5d0fe; background:linear-gradient(135deg, rgba(255,205,78,.2), rgba(181,114,255,.22)); border-color:rgba(255,205,78,.5); box-shadow:0 0 18px rgba(255,205,78,.14); }
.vip-badge.owner { animation: vipPulse 2.4s ease-in-out infinite; }
@keyframes vipPulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.35)} }
.premium-name.premium-tier-3 { text-shadow:0 0 10px rgba(255,205,78,.35), 0 0 18px rgba(69,134,255,.25); color:#fff; }
.premium-name.premium-tier-2 { color:#dbeafe; }
.premium-name.premium-tier-1 { color:#fff7d6; }

@media (max-width: 900px) {
  .premium-head, .premium-section-row { flex-direction:column; align-items:stretch; }
  .premium-plan-grid { grid-template-columns:1fr; }
  .premium-plan-tabs { grid-template-columns:1fr; }
  .premium-tier-tab { padding:12px 14px; }
  .premium-actions-group { width:100%; justify-content:stretch; }
  .premium-actions-group .ghost-btn { flex:1 1 auto; width:100%; }
  .premium-avatar-tier-head { flex-direction:column; align-items:flex-start; }
  .premium-avatar-subgroup-head { flex-direction:column; align-items:flex-start; }
  .premium-avatar-tier-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .premium-banner-tier-grid { grid-template-columns:1fr; }
  .premium-avatar-card { min-height:138px; padding:10px; }
  .premium-avatar-card img { width:76px; height:76px; border-radius:20px; }
  .premium-avatar-card.locked::after { top:40px; height:76px; border-radius:20px; }
  .premium-banner-card { min-height:156px; padding:10px; }
  .premium-banner-card img { height:76px; }
  .premium-banner-card.locked::after { top:40px; height:76px; }
}


/* ════════════════════════════════════════
   Image protection / anti-grab polish
════════════════════════════════════════ */
img,
.no-image-grab,
.premium-avatar-card,
.premium-avatar-card img,
.premium-banner-card,
.premium-banner-card img,
.public-profile-avatar,
.public-profile-avatar img,
.global-my-avatar,
.global-my-avatar img,
.global-top-avatar,
.global-top-avatar img,
.global-user-avatar,
.global-user-avatar img,
.post-avatar,
.post-avatar img,
.post-image,
.post-image img,
.friend-avatar,
.friend-avatar img,
.friend-profile-banner,
.friend-profile-banner img,
.profile-avatar,
.profile-avatar img,
.pd-avatar,
.pd-avatar img,
.top-avatar,
.top-avatar img,
.result-avatar,
.result-avatar img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.protected-profile-img,
.premium-protected-img {
  pointer-events: none;
}

.premium-avatar-card .premium-protected-img,
.premium-banner-card .premium-protected-img {
  pointer-events: none;
}


/* Global Players premium subscription display + iridescent cards */
.global-top-card, .global-user-row { position: relative; overflow: hidden; }
.global-premium-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: .62;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 22%, transparent 42%, rgba(88,166,255,.11) 62%, transparent 82%);
  transform: translateX(-55%);
  animation: globalIridescentSweep 5.6s ease-in-out infinite;
}
.global-premium-card.tier-1 { border-color: rgba(245,196,84,.48) !important; background: radial-gradient(circle at 0 0, rgba(245,196,84,.13), transparent 35%), rgba(13,17,23,.88) !important; }
.global-premium-card.tier-2 { border-color: rgba(88,166,255,.55) !important; background: radial-gradient(circle at 0 0, rgba(88,166,255,.16), transparent 35%), rgba(13,17,23,.88) !important; }
.global-premium-card.tier-3 { border-color: rgba(181,114,255,.60) !important; background: radial-gradient(circle at 0 0, rgba(255,205,78,.16), transparent 30%), radial-gradient(circle at 70% 0, rgba(181,114,255,.16), transparent 35%), rgba(13,17,23,.90) !important; box-shadow: 0 0 0 1px rgba(255,205,78,.12), 0 0 24px rgba(88,166,255,.10); }
@keyframes globalIridescentSweep { 0%, 35% { transform: translateX(-70%); } 65%, 100% { transform: translateX(70%); } }
.global-premium-card > * { position: relative; z-index: 1; }

/* Public Rooms: room names and search */
.public-room-tools { align-items: stretch; }
.public-room-search { flex: 1 1 260px; min-width: 220px; margin: 0 !important; }
.public-game-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.public-game-title strong { color:#f0f6fc; font-size:16px; }
.public-game-title span { display:inline-flex; padding:3px 8px; border-radius:999px; color:#58a6ff; background:rgba(88,166,255,.10); border:1px solid rgba(88,166,255,.24); font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:1000; letter-spacing:.04em; text-transform:uppercase; }
.bot-info-card { border-color: rgba(88,166,255,.22) !important; }
.public-game-card.bot-public-card { border-color:#30363d !important; background:rgba(1,4,9,.42) !important; }

/* Visual fix: cosmetic/profile frames must follow round avatar shape */
.global-avatar.reward-frame,
.global-my-avatar.reward-frame,
.global-top-avatar.reward-frame,
.global-user-avatar.reward-frame,
.post-avatar.reward-frame,
.public-profile-avatar.reward-frame,
.profile-avatar.reward-frame,
.pd-avatar.reward-frame,
.top-avatar.reward-frame,
.result-avatar.reward-frame,
.friend-avatar.reward-frame,
.club-avatar.reward-frame { border-radius: 50% !important; overflow: hidden !important; }
.global-avatar.reward-frame img,
.global-my-avatar.reward-frame img,
.global-top-avatar.reward-frame img,
.global-user-avatar.reward-frame img,
.post-avatar.reward-frame img,
.public-profile-avatar.reward-frame img,
.profile-avatar.reward-frame img,
.pd-avatar.reward-frame img,
.top-avatar.reward-frame img,
.result-avatar.reward-frame img,
.friend-avatar.reward-frame img,
.club-avatar.reward-frame img { border-radius: 50% !important; }
.premium-avatar-card .premium-avatar-subtag,
.premium-banner-card .premium-avatar-subtag { display: none !important; }


.public-game-title em { display:none !important; }


/* ─────────────────────────────────────────────
   Fix pack: All Users list + Public Games mobile comfort
───────────────────────────────────────────── */
.global-users-list {
  max-height: 560px !important;
  overflow-y: auto !important;
  padding: 4px 8px 4px 0 !important;
  gap: 10px !important;
}
.global-users-list .global-user-row.all-user-card {
  min-height: 76px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.global-users-list .global-user-row .global-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  flex: 0 0 52px !important;
}
.global-users-list .global-user-row .global-user-name {
  font-size: 16px !important;
  line-height: 1.15 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}
.global-users-list .global-user-row .global-user-meta {
  margin-top: 4px !important;
  font-size: 12.5px !important;
}
.global-users-list .global-user-row .global-user-rating {
  min-width: 82px !important;
}
.global-users-list .global-user-row .global-user-rating span {
  display: block !important;
  font-size: 22px !important;
  line-height: 1 !important;
}
.global-users-list .global-user-row .global-user-rating label {
  display: block !important;
  color: #8b949e !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  font-family: 'Rajdhani', sans-serif !important;
  letter-spacing: 1px !important;
  margin-top: 4px !important;
}
.global-users-list .global-user-row .vip-badge {
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  .global-users-list {
    max-height: 68vh !important;
    padding-right: 2px !important;
  }
  .global-users-list .global-user-row.all-user-card {
    min-height: 70px !important;
    padding: 10px !important;
    gap: 9px !important;
  }
  .global-users-list .global-user-row .global-user-rank {
    width: 34px !important;
    font-size: 12px !important;
  }
  .global-users-list .global-user-row .global-avatar {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    border-radius: 13px !important;
  }
  .global-users-list .global-user-row .global-user-name {
    font-size: 14px !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
  }
  .global-users-list .global-user-row .global-user-meta {
    white-space: normal !important;
    font-size: 11px !important;
  }
  .global-users-list .global-user-row .global-user-rating {
    min-width: 58px !important;
  }
  .global-users-list .global-user-row .global-user-rating span {
    font-size: 17px !important;
  }

  #panelPublic .feature-panel-head {
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
  }
  #panelPublic .feature-panel-head p,
  #panelPublic .public-room-create-card span {
    display: none !important;
  }
  #panelPublic .feature-panel-head h3 {
    margin-bottom: 0 !important;
  }
  #panelPublic .public-room-create-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    border-radius: 18px !important;
  }
  #panelPublic .public-room-create-card b {
    font-size: 19px !important;
    line-height: 1.1 !important;
    margin-bottom: 0 !important;
  }
  #panelPublic .public-room-create-card .global-refresh-btn,
  #panelPublic .public-room-tools .global-search {
    height: 54px !important;
    font-size: 18px !important;
    border-radius: 16px !important;
  }
  #panelPublic .public-room-tools {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 12px 0 14px !important;
  }
  #panelPublic .public-room-tools .global-refresh-btn {
    display: none !important;
  }
  #panelPublic .public-games-list {
    display: grid !important;
    gap: 14px !important;
  }
  #panelPublic .public-game-card {
    padding: 18px !important;
    border-radius: 20px !important;
  }
  #panelPublic .public-game-title {
    gap: 10px !important;
    align-items: flex-start !important;
  }
  #panelPublic .public-game-title strong {
    font-size: 22px !important;
    line-height: 1.12 !important;
  }
  #panelPublic .public-game-title span {
    font-size: 11px !important;
    padding: 4px 9px !important;
  }
  #panelPublic .public-game-players,
  #panelPublic .public-game-meta {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
  #panelPublic .public-game-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }
  #panelPublic .public-game-actions button {
    width: 100% !important;
    min-height: 58px !important;
    font-size: 20px !important;
    border-radius: 17px !important;
  }
}


/* ─────────────────────────────────────────────
   Reward lock system: Board/Piece themes now behave like Mystery Box items
───────────────────────────────────────────── */
.settings-reward-note {
  margin: -6px 0 12px;
  color: #8b949e;
  font-size: 12px;
  line-height: 1.35;
  border: 1px solid rgba(88,166,255,.18);
  background: rgba(88,166,255,.07);
  border-radius: 10px;
  padding: 8px 10px;
}
.theme-btn { position: relative; }
.theme-btn.locked { opacity: .58; border-style: dashed; filter: grayscale(.25); }
.theme-btn.locked:hover { opacity: .92; border-color: rgba(251,191,36,.65); color: #fbbf24; }
.theme-lock-badge {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,.32);
  background: rgba(251,191,36,.10);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

/* New Mystery Box board themes */
body[data-board="sunset"] .square.light { background: linear-gradient(135deg,#ffe6b0,#ffd18a); }
body[data-board="sunset"] .square.dark  { background: linear-gradient(135deg,#d97706,#9a3412); }
body[data-board="sunset"] #board { box-shadow: 0 0 0 2px rgba(251,191,36,.35), 0 0 30px rgba(245,158,11,.20); }
body[data-board="sunset"] .white-piece { color:#fff7ed; text-shadow:0 0 9px rgba(255,214,120,.68),0 2px 4px rgba(76,29,0,.55); }
body[data-board="sunset"] .black-piece { color:#3b1600; text-shadow:0 0 7px rgba(245,158,11,.4); }
body[data-board="emerald"] .square.light { background: linear-gradient(135deg,#dcfce7,#86efac); }
body[data-board="emerald"] .square.dark  { background: linear-gradient(135deg,#047857,#064e3b); }
body[data-board="emerald"] #board { box-shadow: 0 0 0 2px rgba(52,211,153,.35), 0 0 30px rgba(16,185,129,.18); }
body[data-board="emerald"] .white-piece { color:#f0fdf4; text-shadow:0 0 10px rgba(167,243,208,.75),0 2px 5px rgba(0,0,0,.45); }
body[data-board="emerald"] .black-piece { color:#052e16; text-shadow:0 0 8px rgba(52,211,153,.38); }
body[data-board="void"] .square.light { background: linear-gradient(135deg,#2d154f,#5a189a); }
body[data-board="void"] .square.dark  { background: linear-gradient(135deg,#10002b,#240046); }
body[data-board="void"] #board { box-shadow: 0 0 0 2px rgba(168,85,247,.35), 0 0 34px rgba(147,51,234,.24); }
body[data-board="void"] .square { box-shadow: inset 0 0 16px rgba(255,255,255,.04); }
body[data-board="void"] .white-piece { color:#f5f3ff; text-shadow:0 0 13px rgba(216,180,254,.9); }
body[data-board="void"] .black-piece { color:#a855f7; text-shadow:0 0 12px rgba(168,85,247,.85); }
body[data-board="dragon"] .square.light { background: linear-gradient(135deg,#7f1d1d,#ff7a18); }
body[data-board="dragon"] .square.dark  { background: linear-gradient(135deg,#240000,#6b0000); }
body[data-board="dragon"] #board { box-shadow: 0 0 0 2px rgba(255,107,0,.45), 0 0 42px rgba(239,68,68,.26); }
body[data-board="dragon"] .square { box-shadow: inset 0 0 18px rgba(255,107,0,.08); }
body[data-board="dragon"] .white-piece { color:#fff7ed; text-shadow:0 0 12px rgba(251,146,60,.95),0 2px 4px rgba(0,0,0,.65); }
body[data-board="dragon"] .black-piece { color:#1a0000; text-shadow:0 0 10px rgba(255,107,0,.55); }
body[data-board="dragon"] .square.selected { outline-color: rgba(255,107,0,.95); }
body[data-board="dragon"] .square.legal-target::after { background: rgba(255,107,0,.42); box-shadow: 0 0 12px rgba(255,107,0,.9); }

/* Profile frame upgrade + new Mystery Box frames */
@keyframes rewardFramePulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.13); } }
body[data-profile-frame="royal-gold"] #topAvatar, body[data-profile-frame="royal-gold"] .pd-avatar-wrap, .public-frame-royal-gold .public-profile-avatar, .reward-frame-royal-gold { box-shadow: 0 0 0 3px rgba(255,226,122,.94), 0 0 0 6px rgba(251,191,36,.16), 0 0 28px rgba(251,191,36,.48) !important; border-color: rgba(255,226,122,.98) !important; }
body[data-profile-frame="neon-blue"] #topAvatar, body[data-profile-frame="neon-blue"] .pd-avatar-wrap, .public-frame-neon-blue .public-profile-avatar, .reward-frame-neon-blue { box-shadow: 0 0 0 3px rgba(56,189,248,.94), 0 0 0 6px rgba(14,165,233,.16), 0 0 30px rgba(56,189,248,.52) !important; border-color: rgba(125,211,252,.98) !important; }
body[data-profile-frame="galaxy-purple"] #topAvatar, body[data-profile-frame="galaxy-purple"] .pd-avatar-wrap, .public-frame-galaxy-purple .public-profile-avatar, .reward-frame-galaxy-purple { box-shadow: 0 0 0 3px rgba(192,132,252,.94), 0 0 0 6px rgba(168,85,247,.15), 0 0 32px rgba(168,85,247,.54) !important; border-color: rgba(216,180,254,.98) !important; }
body[data-profile-frame="stadium-champion"] #topAvatar, body[data-profile-frame="stadium-champion"] .pd-avatar-wrap, .public-frame-stadium-champion .public-profile-avatar, .reward-frame-stadium-champion { box-shadow: 0 0 0 3px rgba(126,231,135,.95), 0 0 0 6px rgba(54,247,255,.13), 0 0 16px rgba(54,247,255,.55), 0 0 34px rgba(46,160,67,.38) !important; border-color: rgba(126,231,135,.98) !important; }
body[data-profile-frame="fire-crown"] #topAvatar, body[data-profile-frame="fire-crown"] .pd-avatar-wrap, .public-frame-fire-crown .public-profile-avatar, .reward-frame-fire-crown { box-shadow: 0 0 0 3px rgba(251,113,133,.95), 0 0 0 6px rgba(249,115,22,.16), 0 0 34px rgba(249,115,22,.62) !important; border-color: rgba(254,215,170,.98) !important; animation: rewardFramePulse 3.1s ease-in-out infinite; }
body[data-profile-frame="emerald-aura"] #topAvatar, body[data-profile-frame="emerald-aura"] .pd-avatar-wrap, .public-frame-emerald-aura .public-profile-avatar, .reward-frame-emerald-aura { box-shadow: 0 0 0 3px rgba(52,211,153,.94), 0 0 0 6px rgba(16,185,129,.14), 0 0 30px rgba(16,185,129,.52) !important; border-color: rgba(167,243,208,.98) !important; }
body[data-profile-frame="crimson-elite"] #topAvatar, body[data-profile-frame="crimson-elite"] .pd-avatar-wrap, .public-frame-crimson-elite .public-profile-avatar, .reward-frame-crimson-elite { box-shadow: 0 0 0 3px rgba(248,113,113,.94), 0 0 0 6px rgba(220,38,38,.15), 0 0 30px rgba(220,38,38,.54) !important; border-color: rgba(254,202,202,.98) !important; }
body[data-profile-frame="ice-diamond"] #topAvatar, body[data-profile-frame="ice-diamond"] .pd-avatar-wrap, .public-frame-ice-diamond .public-profile-avatar, .reward-frame-ice-diamond { box-shadow: 0 0 0 3px rgba(186,230,253,.95), 0 0 0 6px rgba(56,189,248,.12), 0 0 32px rgba(125,211,252,.58) !important; border-color: rgba(240,249,255,.98) !important; }
body[data-profile-frame="shadow-ring"] #topAvatar, body[data-profile-frame="shadow-ring"] .pd-avatar-wrap, .public-frame-shadow-ring .public-profile-avatar, .reward-frame-shadow-ring { box-shadow: 0 0 0 3px rgba(148,163,184,.88), 0 0 0 6px rgba(15,23,42,.58), 0 0 30px rgba(15,23,42,.78) !important; border-color: rgba(203,213,225,.92) !important; }
body[data-profile-frame="rainbow-arc"] #topAvatar, body[data-profile-frame="rainbow-arc"] .pd-avatar-wrap, .public-frame-rainbow-arc .public-profile-avatar, .reward-frame-rainbow-arc { box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 0 6px rgba(168,85,247,.16), 0 0 16px rgba(34,211,238,.55), 0 0 34px rgba(251,191,36,.45) !important; border-color: rgba(255,255,255,.98) !important; animation: rewardFramePulse 3.4s ease-in-out infinite; }
body[data-profile-frame="bronze-gear"] #topAvatar, body[data-profile-frame="bronze-gear"] .pd-avatar-wrap, .public-frame-bronze-gear .public-profile-avatar, .reward-frame-bronze-gear { box-shadow: 0 0 0 3px rgba(180,83,9,.9), 0 0 0 6px rgba(217,119,6,.11), 0 0 24px rgba(217,119,6,.38) !important; border-color: rgba(253,186,116,.96) !important; }
body[data-profile-frame="cyber-pulse"] #topAvatar, body[data-profile-frame="cyber-pulse"] .pd-avatar-wrap, .public-frame-cyber-pulse .public-profile-avatar, .reward-frame-cyber-pulse { box-shadow: 0 0 0 3px rgba(45,212,191,.94), 0 0 0 6px rgba(124,58,237,.14), 0 0 16px rgba(45,212,191,.58), 0 0 34px rgba(124,58,237,.48) !important; border-color: rgba(153,246,228,.98) !important; animation: rewardFramePulse 2.9s ease-in-out infinite; }

/* Public Games mobile action buttons: compact, side-by-side */
.public-room-action-card { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px; margin-bottom:12px; border:1px solid rgba(88,166,255,.22); background:linear-gradient(135deg, rgba(13,17,23,.92), rgba(22,27,34,.82)); border-radius:16px; }
.public-room-action-copy b { display:block; color:#f0f6fc; margin-bottom:4px; font-size:18px; }
.public-room-action-copy span { display:block; color:#8b949e; font-size:13px; line-height:1.35; }
.public-room-action-buttons { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.public-action-btn { min-width:128px; }
@media (max-width: 768px) {
  #panelPublic .public-room-action-card { padding:10px !important; margin-bottom:10px !important; border-radius:16px !important; display:grid !important; grid-template-columns:1fr !important; gap:8px !important; }
  #panelPublic .public-room-action-copy b { font-size:18px !important; margin-bottom:0 !important; }
  #panelPublic .public-room-action-copy span { display:none !important; }
  #panelPublic .public-room-action-buttons { display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; width:100% !important; }
  #panelPublic .public-action-btn { width:100% !important; min-width:0 !important; height:42px !important; min-height:42px !important; padding:0 8px !important; border-radius:13px !important; font-size:15px !important; line-height:1 !important; }
  #panelPublic .public-room-tools { margin:8px 0 12px !important; display:block !important; }
  #panelPublic .public-room-tools .global-search, #panelPublic .public-room-search { height:46px !important; min-height:46px !important; font-size:16px !important; border-radius:15px !important; width:100% !important; }
}

/* Global Players simulated-user details */
.global-presence {
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:2px;
  color:#8b949e;
  white-space:nowrap;
}
.global-presence i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#6e7681;
  box-shadow:0 0 0 2px rgba(110,118,129,.12);
}
.global-presence.online { color:#56d364; }
.global-presence.online i { background:#2ea043; box-shadow:0 0 10px rgba(46,160,67,.55); }
.global-presence.offline { color:#8b949e; }
.global-activity-chip {
  display:inline-flex;
  align-items:center;
  margin-left:6px;
  padding:2px 7px;
  border-radius:999px;
  color:#c9d1d9;
  background:rgba(139,148,158,.10);
  border:1px solid rgba(139,148,158,.18);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.global-meta-break { color:#30363d; }
.global-profile-meta-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.global-profile-meta-grid div {
  padding:11px 10px;
  border:1px solid rgba(48,54,61,.88);
  border-radius:12px;
  background:rgba(1,4,9,.34);
}
.global-profile-meta-grid b {
  display:block;
  color:#e6edf3;
  text-transform:capitalize;
  font-size:14px;
}
.global-profile-meta-grid span {
  display:block;
  margin-top:2px;
  color:#8b949e;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:800;
}
.global-sim-note {
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  color:#8b949e;
  background:rgba(88,166,255,.07);
  border:1px solid rgba(88,166,255,.18);
  font-size:12px;
}
.public-game-players span {
  min-width:0;
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width: 640px) {
  .global-presence,
  .global-activity-chip { margin-top:3px; }
  .global-profile-meta-grid { grid-template-columns:1fr; }
  .public-game-players span { max-width:130px; }
}


/* Arena social chat + simulated global participants */
.arena-chat-title { margin-top: 16px; }
.arena-chat-card {
  margin-top: 8px;
  border: 1px solid #30363d;
  background: rgba(1,4,9,.42);
  border-radius: 16px;
  overflow: hidden;
}
.arena-chat-messages {
  min-height: 140px;
  max-height: 230px;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.arena-chat-empty {
  color: #8b949e;
  font-size: 13px;
  text-align: center;
  padding: 34px 10px;
}
.arena-chat-message {
  max-width: 86%;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(22,27,34,.82);
  border: 1px solid rgba(139,148,158,.18);
}
.arena-chat-message.mine {
  align-self: flex-end;
  background: rgba(31,111,235,.16);
  border-color: rgba(88,166,255,.32);
}
.arena-chat-message.system {
  align-self: center;
  max-width: 95%;
  text-align: center;
  background: rgba(210,153,34,.10);
  border-color: rgba(210,153,34,.22);
}
.arena-chat-author {
  color: #58a6ff;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 3px;
}
.arena-chat-message.system .arena-chat-author { color: #d29922; }
.arena-chat-text {
  color: #e6edf3;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}
.arena-chat-input-row {
  display: flex;
  gap: 8px;
  border-top: 1px solid rgba(139,148,158,.18);
  padding: 10px;
  background: rgba(13,17,23,.72);
}
.arena-chat-input {
  flex: 1;
  min-width: 0;
  border: 1px solid #30363d;
  background: rgba(1,4,9,.75);
  color: #e6edf3;
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  outline: none;
}
.arena-chat-input:focus { border-color: rgba(88,166,255,.65); }
.arena-chat-send {
  border: none;
  border-radius: 12px;
  padding: 0 16px;
  color: white;
  background: #238636;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 900;
  cursor: pointer;
}
.arena-chat-send:hover { filter: brightness(1.08); transform: translateY(-1px); }

@media (max-width: 720px) {
  .arena-chat-input-row { flex-direction: column; }
  .arena-chat-send { min-height: 42px; }
  .arena-chat-message { max-width: 94%; }
}

/* Arena chat removed: chat now belongs inside each game only. */
.arena-chat-removed-note { margin-top: 12px; }

/* Arena winner mini waiting room */
.arena-wait-count {
  margin-top:12px;
  font-size:28px;
  font-weight:900;
  color:#f2cc60;
  text-align:center;
  letter-spacing:.8px;
}
.arena-wait-popup .arena-match-progress span {
  background:linear-gradient(90deg,#238636,#2f81f7,#d29922);
}
.arena-match-actions button:disabled,
#resultPlayAgainBtn:disabled {
  opacity:.68;
  cursor:not-allowed;
  filter:saturate(.75);
}

/* ════════════════════════════════════════
   PC GAME CHAT PICKER + REMATCH UPDATE
   Wider right panel and readable emoji/sticker/quick phrase pickers.
════════════════════════════════════════ */
@media (min-width: 901px) {
  .game-layout {
    grid-template-columns: minmax(620px, 1fr) minmax(430px, 500px) !important;
    align-items: start !important;
  }
  .right-panel {
    width: min(500px, 34vw) !important;
    min-width: 430px !important;
  }
  .mp-chat {
    height: clamp(430px, 58vh, 680px) !important;
    min-height: 430px !important;
  }
  .mp-chat-messages {
    min-height: 290px !important;
  }
  .mp-chat-tools {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(88px, 1fr)) !important;
  }
  .mp-chat-tools button {
    min-height: 42px !important;
    font-size: 18px !important;
  }
  #mpEmojiPicker.chat-picker.emoji-picker {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important;
  }
  #mpEmojiPicker.chat-picker.hidden { display: none !important; }
  #mpStickerPicker.chat-picker.sticker-picker {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)) !important;
    max-height: 310px !important;
  }
  #mpStickerPicker.chat-picker.hidden { display: none !important; }
  #mpQuickPicker.chat-picker.quick-picker {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important;
    max-height: 240px !important;
  }
  #mpQuickPicker.chat-picker.hidden { display: none !important; }
  #mpQuickPicker.chat-picker.quick-picker button {
    white-space: normal !important;
    line-height: 1.15 !important;
    min-height: 44px !important;
  }
}

/* Premium plan limitations and active-subscription visual unlocks */
.premium-field-note {
  display:block;
  margin:6px 0 10px;
  color:#8b949e;
  font-size:12px;
  font-weight:700;
}
.premium-mini-lock {
  border:1px dashed rgba(245,196,84,.35);
  border-radius:16px;
  padding:12px 14px;
  background:linear-gradient(135deg, rgba(245,196,84,.10), rgba(47,129,247,.05));
  color:#dbeafe;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.premium-mini-lock b { color:#f4d57d; font-weight:1000; }
.premium-mini-lock span { color:#9da7b3; font-size:12px; line-height:1.4; }
.history-filter-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 12px;
}
.history-filter-row button {
  border:1px solid rgba(88,166,255,.28);
  background:rgba(13,17,23,.75);
  color:#dbeafe;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
}
.history-filter-row button:hover { border-color:rgba(88,166,255,.65); background:rgba(31,111,235,.18); }
.history-lock { margin-bottom:12px; }
.premium-avatar-effect {
  position:relative;
  box-shadow:0 0 0 2px rgba(88,166,255,.28), 0 0 22px rgba(88,166,255,.22) !important;
}
.premium-avatar-effect::after {
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  border:1px solid rgba(88,166,255,.35);
  pointer-events:none;
  animation:premiumAvatarPulse 2.4s ease-in-out infinite;
}
.premium-avatar-effect.legendary {
  box-shadow:0 0 0 2px rgba(245,196,84,.36), 0 0 28px rgba(245,196,84,.32), 0 0 42px rgba(168,85,247,.20) !important;
}
.premium-avatar-effect.legendary::after { border-color:rgba(245,196,84,.62); }
@keyframes premiumAvatarPulse { 50% { transform:scale(1.06); opacity:.42; } }
.premium-capture-burst { color:#58a6ff; text-shadow:0 0 18px rgba(88,166,255,.88),0 0 30px rgba(88,166,255,.35); }
.legendary-destruction-burst {
  color:#ffd166;
  text-shadow:0 0 18px rgba(255,209,102,.95),0 0 38px rgba(255,107,0,.55),0 0 50px rgba(168,85,247,.35);
  animation:legendaryDestructionBurst .9s cubic-bezier(.2,1.1,.25,1) forwards;
}
@keyframes legendaryDestructionBurst {
  0% { transform:scale(.25) rotate(0deg); opacity:0; filter:blur(1px); }
  25% { transform:scale(1.45) rotate(14deg); opacity:1; filter:blur(0); }
  70% { transform:scale(2.35) rotate(-18deg); opacity:.9; }
  100% { transform:scale(3.1) rotate(34deg); opacity:0; filter:blur(3px); }
}
.game-result-overlay.premium-victory .game-result-card {
  box-shadow:0 0 0 1px rgba(88,166,255,.36),0 28px 80px rgba(47,129,247,.28), inset 0 0 38px rgba(88,166,255,.08) !important;
}
.game-result-overlay.legendary-victory .game-result-card {
  box-shadow:0 0 0 1px rgba(245,196,84,.42),0 30px 96px rgba(245,196,84,.30),0 0 60px rgba(168,85,247,.18), inset 0 0 48px rgba(245,196,84,.10) !important;
}
.game-result-overlay.legendary-victory .game-result-title {
  color:#ffd166 !important;
  text-shadow:0 0 24px rgba(245,196,84,.65),0 0 42px rgba(168,85,247,.35) !important;
}
.chat-name .vip-badge {
  transform:translateY(-1px);
  margin-left:4px;
  padding:2px 6px;
  font-size:.62rem;
}
.top-username.premium-name.premium-tier-3 { color:#fff; text-shadow:0 0 10px rgba(255,205,78,.52),0 0 22px rgba(168,85,247,.28); }
.top-username.premium-name.premium-tier-2 { color:#dbeafe; text-shadow:0 0 12px rgba(88,166,255,.25); }
.top-username.premium-name.premium-tier-1 { color:#fff7d6; }

/* Rematch + draw request UX fixes */
.rematch-modal.hidden,
.draw-offer-status.hidden { display: none !important; }
.rematch-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(8px);
}
.rematch-card {
  width: min(420px, calc(100vw - 28px));
  border-radius: 24px;
  padding: 24px;
  background: linear-gradient(145deg, rgba(22,27,34,.98), rgba(13,17,23,.98));
  border: 1px solid rgba(88,166,255,.35);
  box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 36px rgba(47,129,247,.18);
  text-align: center;
}
.rematch-icon { font-size: 46px; margin-bottom: 10px; }
.rematch-card h3 { margin: 0 0 8px; color: #f0f6fc; font-size: 24px; }
.rematch-card p { margin: 0 0 12px; color: #c9d1d9; }
.rematch-timer {
  display: inline-flex;
  padding: 7px 12px;
  border: 1px solid rgba(210,153,34,.35);
  color: #f2cc60;
  background: rgba(210,153,34,.10);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .04em;
  margin: 4px 0 18px;
}
.rematch-actions { display:flex; gap: 10px; justify-content:center; flex-wrap:wrap; }
.draw-offer-status {
  position: fixed;
  right: 18px;
  bottom: 88px;
  z-index: 99998;
  width: min(320px, calc(100vw - 36px));
  padding: 14px;
  border-radius: 16px;
  background: rgba(13,17,23,.96);
  border: 1px solid rgba(88,166,255,.35);
  box-shadow: 0 18px 54px rgba(0,0,0,.45);
}
.draw-offer-status-title { font-weight: 900; color:#f0f6fc; margin-bottom:6px; }
.draw-offer-status-text { color:#c9d1d9; font-size: 14px; margin-bottom:10px; }
.draw-offer-status-track { height: 6px; background: rgba(139,148,158,.2); border-radius:999px; overflow:hidden; }
.draw-offer-status-track span { display:block; height:100%; width:100%; background: linear-gradient(90deg,#2f81f7,#3fb950); border-radius:999px; transition: width .25s ease; }

/* Rematch inline timer/request panel */
.rematch-inline-panel.hidden { display: none !important; }
.rematch-inline-panel {
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(88,166,255,.38);
  background: linear-gradient(145deg, rgba(13,17,23,.94), rgba(22,27,34,.88));
  box-shadow: 0 12px 32px rgba(0,0,0,.28), inset 0 0 18px rgba(47,129,247,.07);
  text-align: left;
}
.rematch-inline-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f0f6fc;
  font-weight: 900;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.rematch-inline-panel p {
  margin: 0 0 9px;
  color: #c9d1d9;
  font-size: 13px;
  line-height: 1.35;
}
.rematch-inline-timer {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(242,204,96,.42);
  background: rgba(210,153,34,.10);
  color: #f2cc60;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .05em;
  margin-bottom: 9px;
}
.rematch-inline-track {
  height: 7px;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(139,148,158,.20);
  margin-bottom: 12px;
}
.rematch-inline-track span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f81f7, #3fb950);
  transition: width .18s linear;
}
.rematch-inline-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.rematch-inline-actions button {
  min-width: 112px;
}
.rematch-inline-panel.rematch-waiting {
  border-color: rgba(210,153,34,.42);
  box-shadow: 0 12px 32px rgba(0,0,0,.28), inset 0 0 18px rgba(210,153,34,.07);
}
@media (max-width: 640px) {
  .rematch-inline-actions { justify-content: stretch; }
  .rematch-inline-actions button { flex: 1 1 120px; }
}

/* ════════════════════════════════════════════════════════════
   Drunk Chess Mode
════════════════════════════════════════════════════════════ */
.menu-feature-card.drunk {
  background: linear-gradient(135deg, rgba(111,66,193,.18), rgba(47,129,247,.12));
  border-color: rgba(163,113,247,.35);
}
.menu-feature-card.drunk:hover {
  box-shadow: 0 0 28px rgba(163,113,247,.22), inset 0 0 24px rgba(47,129,247,.08);
}
.drunk-panel-head .feature-icon,
.menu-feature-card.drunk .menu-feature-icon {
  filter: drop-shadow(0 0 12px rgba(163,113,247,.7));
}
.drunk-menu-note {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1px solid rgba(163,113,247,.28);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(88,54,155,.18), rgba(15,23,42,.72));
  color: #c9d1d9;
}
.drunk-menu-note b { color: #f0d9ff; }
.drunk-menu-note span { color: #8b949e; font-size: 13px; line-height: 1.45; }
.drunk-start-btn {
  background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
  box-shadow: 0 10px 26px rgba(124,58,237,.28);
}
.drunk-hud {
  margin: 10px 0 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(163,113,247,.32);
  background: linear-gradient(135deg, rgba(12,16,28,.95), rgba(32,21,58,.92));
  box-shadow: inset 0 0 18px rgba(163,113,247,.08), 0 12px 30px rgba(0,0,0,.22);
}
.drunk-hud-top,
.drunk-timer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.drunk-kicker {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #8b949e;
  margin-bottom: 2px;
}
.drunk-hud-top b {
  color: #f0f6fc;
  font-size: 15px;
}
.drunk-phase-pill {
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 1px solid rgba(139,148,158,.32);
  color: #c9d1d9;
  background: rgba(33,38,45,.78);
}
.drunk-phase-pill.is-drunk {
  color: #f0d9ff;
  border-color: rgba(163,113,247,.6);
  background: rgba(111,66,193,.22);
  box-shadow: 0 0 18px rgba(163,113,247,.25);
}
.drunk-phase-pill.is-normal {
  color: #9be9a8;
  border-color: rgba(63,185,80,.38);
  background: rgba(35,134,54,.16);
}
.drunk-timer-row {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(1,4,9,.35);
  color: #8b949e;
  font-size: 13px;
}
.drunk-timer-row strong {
  color: #58a6ff;
  font-size: 18px;
  letter-spacing: .08em;
}
.drunk-warning {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: #d2a8ff;
  font-size: 12px;
}
.drunk-rules {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 7px;
}
.drunk-rules div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border-radius: 11px;
  border: 1px solid rgba(139,148,158,.15);
  background: rgba(13,17,23,.72);
  font-size: 11px;
}
.drunk-rules span { color: #8b949e; }
.drunk-rules b { color: #f0f6fc; text-align: right; }
.drunk-countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(111,66,193,.22), rgba(0,0,0,.18) 45%, transparent 72%);
}
.drunk-countdown-overlay.hidden { display: none; }
.drunk-countdown-card {
  min-width: 280px;
  padding: 32px 38px;
  border-radius: 30px;
  text-align: center;
  border: 1px solid rgba(163,113,247,.42);
  background: linear-gradient(135deg, rgba(12,16,28,.95), rgba(36,20,70,.92));
  box-shadow: 0 25px 80px rgba(0,0,0,.45), 0 0 45px rgba(163,113,247,.35);
}
.drunk-countdown-overlay.pulse .drunk-countdown-card {
  animation: drunkCountdownPop .65s cubic-bezier(.19,1,.22,1);
}
.drunk-countdown-number {
  font-size: clamp(46px, 8vw, 94px);
  line-height: 1;
  font-weight: 1000;
  color: #f0d9ff;
  text-shadow: 0 0 22px rgba(163,113,247,.85), 3px 0 rgba(47,129,247,.55), -3px 0 rgba(248,81,73,.45);
}
.drunk-countdown-text {
  margin-top: 12px;
  color: #c9d1d9;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 900;
}
@keyframes drunkCountdownPop {
  0% { transform: scale(.75) rotate(-2deg); opacity: 0; filter: blur(8px); }
  60% { transform: scale(1.08) rotate(1deg); opacity: 1; filter: blur(0); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.drunk-phase-wrap .left-panel {
  animation: drunkScreenShake .42s ease-in-out 1;
}
@keyframes drunkScreenShake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-3px,2px); }
  40% { transform: translate(4px,-2px); }
  60% { transform: translate(-2px,-1px); }
  80% { transform: translate(2px,2px); }
}
#board.drunk-board-active {
  border-color: #a371f7 !important;
  box-shadow: 0 0 0 2px rgba(163,113,247,.45), 0 0 32px rgba(47,129,247,.32), inset 0 0 30px rgba(163,113,247,.13) !important;
  animation: drunkBoardGlow 2.4s ease-in-out infinite;
}
#board.drunk-board-active::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    repeating-linear-gradient(90deg, rgba(163,113,247,.12) 0 2px, transparent 2px 14px),
    radial-gradient(circle at 20% 20%, rgba(88,166,255,.16), transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(210,168,255,.14), transparent 30%);
  mix-blend-mode: screen;
  opacity: .65;
  animation: drunkGlitchSweep 1.35s linear infinite;
}
@keyframes drunkBoardGlow {
  0%,100% { filter: saturate(1.05) hue-rotate(0deg); }
  50% { filter: saturate(1.35) hue-rotate(12deg); }
}
@keyframes drunkGlitchSweep {
  0% { transform: translateX(-8px); opacity: .45; }
  50% { transform: translateX(8px); opacity: .75; }
  100% { transform: translateX(-8px); opacity: .45; }
}
.piece.drunk-piece {
  text-shadow: 0 0 8px rgba(163,113,247,.85), 2px 0 rgba(47,129,247,.5), -2px 0 rgba(248,81,73,.35);
  animation: drunkPieceNeon 1.8s ease-in-out infinite;
}
@keyframes drunkPieceNeon {
  0%,100% { transform: translateY(0) skewX(0deg); }
  50% { transform: translateY(-1px) skewX(-1.5deg); }
}
@media (max-width: 760px) {
  .drunk-rules { grid-template-columns: 1fr; }
  .drunk-hud { padding: 10px; }
  .drunk-countdown-card { min-width: 230px; padding: 26px 24px; }
}
#board { position: relative; }

/* ══════════════════════════════════════════════════
   Stripe / Reviewer Access Login
══════════════════════════════════════════════════ */
.auth-review-top {
  margin: -6px 0 18px;
}
.review-access-top-btn {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(47, 129, 247, 0.42);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 20%, rgba(88, 166, 255, 0.20), transparent 34%),
    linear-gradient(135deg, rgba(47, 129, 247, 0.18), rgba(13, 17, 23, 0.74));
  color: #d8e7ff;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  box-shadow: 0 12px 28px rgba(47, 129, 247, 0.08), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform .16s, border-color .16s, background .16s, box-shadow .16s;
}
.review-access-top-btn:hover,
.review-access-top-btn.active {
  transform: translateY(-1px);
  border-color: rgba(88, 166, 255, 0.78);
  background:
    radial-gradient(circle at 12% 20%, rgba(88, 166, 255, 0.30), transparent 36%),
    linear-gradient(135deg, rgba(47, 129, 247, 0.28), rgba(13, 17, 23, 0.82));
  box-shadow: 0 16px 36px rgba(47, 129, 247, 0.15), 0 0 0 1px rgba(88,166,255,0.08) inset;
}
.review-top-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(88, 166, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(88,166,255,0.22);
}
.review-top-title {
  text-align: left;
  font-size: 13px;
}
.review-top-badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(46, 160, 67, 0.14);
  color: #7ee787;
  border: 1px solid rgba(46, 160, 67, 0.34);
  font-size: 10px;
  letter-spacing: 1px;
}
.review-access-panel {
  margin: -4px 0 18px;
  border: 1px solid rgba(88, 166, 255, 0.22);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(22, 27, 34, 0.98), rgba(13, 17, 23, 0.96));
  padding: 16px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.04);
}
.review-access-panel-top {
  animation: fadeUp .22s ease both;
}
.review-access-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.review-access-head strong {
  display: block;
  color: #f0f6fc;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.review-access-head p {
  color: #8b949e;
  font-size: 12px;
  line-height: 1.35;
  margin: 4px 0 0;
}
.review-safe-pill {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(248, 81, 73, 0.10);
  color: #ffb3ad;
  border: 1px solid rgba(248, 81, 73, 0.25);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.field-group.compact {
  margin-bottom: 12px;
}
.field-group.compact label {
  font-size: 11px;
}
.review-login-btn {
  width: 100%;
  margin-top: 2px;
}
@media (max-width: 500px) {
  .review-access-top-btn {
    grid-template-columns: auto 1fr;
    padding: 12px;
  }
  .review-top-badge { display:none; }
  .review-access-head { flex-direction: column; }
}