/* ==========================================================================
   Oyungunlugum - design system
   Bright, professional surface: crisp whites, a single confident blue accent,
   quiet borders instead of heavy shadows, geometric display type for headings.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg-0: #f4f6fb;
  --bg-1: #ffffff;
  --bg-2: #f0f2f8;
  --bg-3: #e7eaf3;
  --line: #dde1ec;
  --line-soft: #e8eaf2;
  --text-hi: #141620;
  --text-mid: #565a6e;
  --text-lo: #8a8fa3;
  --accent: #1d4ed8;
  --accent-hi: #1e40af;
  --accent-ink: #ffffff;
  --good: #16a34a;
  --warn: #d97706;
  --bad: #dc2626;
  --gold: #b45309;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--text-hi);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

button, .btn, a.btn { touch-action: manipulation; }

body {
  background-image:
    radial-gradient(circle at 12% 0%, rgba(29,78,216,0.06), transparent 40%),
    radial-gradient(circle at 88% 100%, rgba(22,163,74,0.05), transparent 45%);
  background-attachment: fixed;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  margin: 0;
}

a { color: inherit; }
button { font-family: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------- generic building blocks -------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--bg-1); color: var(--text-hi); font-weight: 600; font-size: 0.9rem;
  cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .1s ease;
  text-decoration: none; box-shadow: 0 1px 2px rgba(20,22,32,0.04);
}
.btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn-danger { background: #fef2f2; border-color: #fecaca; color: var(--bad); }
.btn-danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-mid); box-shadow: none; }
.btn-ghost:hover { background: var(--bg-2); color: var(--text-hi); border-color: var(--line); }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.input {
  width: 100%; padding: 11px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--bg-1); color: var(--text-hi);
  font-size: 0.92rem; outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,78,216,0.12); }
.input::placeholder { color: var(--text-lo); }
label.field-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-lo); margin: 0 0 6px 2px; text-transform: uppercase; letter-spacing: 0.04em; }

.card {
  background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: 0 1px 3px rgba(20,22,32,0.03);
}

.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  background: var(--bg-3); color: var(--text-mid); border: 1px solid var(--line);
}
.badge-accent { background: #dbe6fd; color: var(--accent-hi); border-color: #bcd0fb; }
.badge-good { background: #dcfce7; color: var(--good); border-color: #bbf7d0; }
.badge-warn { background: #fef3c7; color: var(--warn); border-color: #fde68a; }
.badge-bad { background: #fee2e2; color: var(--bad); border-color: #fecaca; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: #fff; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.4); overflow: hidden;
}
.avatar.sm { width: 26px; height: 26px; font-size: 0.7rem; }
.avatar.lg { width: 52px; height: 52px; font-size: 1.2rem; }

.icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- toast notifications ------------------------------------------ */
#toastHost { position: fixed; top: 18px; right: 18px; z-index: 9000; display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
.toast {
  background: var(--bg-1); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-md); padding: 12px 14px; font-size: 0.85rem; color: var(--text-hi);
  animation: toastIn .2s ease; box-shadow: 0 10px 30px rgba(20,22,32,0.12);
}
.toast.error { border-left-color: var(--bad); }
.toast.success { border-left-color: var(--good); }
@keyframes toastIn { from { opacity: 0; transform: translateX(12px);} to { opacity: 1; transform: translateX(0);} }

/* ---------- modal ---------------------------------------------------------*/
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20,22,32,0.45); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 8000; padding: 20px;
}
.modal-backdrop.hidden { display: none; }
.modal {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  width: 100%; max-width: 760px; max-height: 86vh; overflow: auto; padding: 24px;
  box-shadow: 0 30px 60px rgba(20,22,32,0.18);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.modal-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--line); padding-bottom: 12px; flex-wrap: wrap; }
.modal-tab { padding: 6px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--text-mid); cursor: pointer; border: 1px solid transparent; }
.modal-tab.active { background: var(--bg-3); color: var(--text-hi); border-color: var(--line); }

table.data { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.data th { text-align: left; color: var(--text-lo); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.data td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }

/* ==========================================================================
   Auth page - split professional layout
   ========================================================================== */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }

.auth-brand-pane {
  background: linear-gradient(155deg, #14224b 0%, #1d4ed8 55%, #2563eb 100%);
  color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 56px 52px;
}
.auth-brand-pane .mark-row { display: flex; align-items: center; gap: 12px; }
.auth-brand-pane .mark { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; border: 1px solid rgba(255,255,255,0.25); }
.auth-brand-pane .name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.auth-brand-pane .pitch h1 { font-size: 2.3rem; line-height: 1.2; max-width: 460px; }
.auth-brand-pane .pitch p { color: rgba(255,255,255,0.78); font-size: 1rem; margin-top: 14px; max-width: 420px; line-height: 1.5; }
.auth-brand-pane .foot { color: rgba(255,255,255,0.55); font-size: 0.78rem; }
.auth-feature-list { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.auth-feature-list .item { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: rgba(255,255,255,0.9); }
.auth-feature-list .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0.7; flex-shrink: 0; }

.auth-form-pane { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-panel { padding: 8px 4px; }
.auth-panel h2 { font-size: 1.5rem; margin-bottom: 4px; }
.auth-panel p.sub { color: var(--text-lo); font-size: 0.88rem; margin: 0 0 26px; }
.auth-field { margin-bottom: 16px; }
.auth-error { background: #fef2f2; border: 1px solid #fecaca; color: var(--bad); padding: 10px 12px; border-radius: var(--r-md); font-size: 0.82rem; margin-bottom: 16px; }
.auth-note { text-align: center; margin-top: 20px; font-size: 0.8rem; color: var(--text-lo); }
.auth-remember { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-mid); margin: 2px 0 18px; cursor: pointer; user-select: none; }
.auth-remember input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }

/* Mobile-only "Giriş Yap" trigger (shown on the pitch screen) and the close
   button on the login-form overlay it reveals - both no-ops on desktop. */
.mobile-login-trigger { display: none; }
.mobile-login-close {
  display: none; position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-1); color: var(--text-mid); font-size: 1.1rem;
  align-items: center; justify-content: center; cursor: pointer; z-index: 1;
}

@media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; } .auth-brand-pane { display: none; } }
/* On phones, lead with the welcome/pitch content instead of dropping
   straight into the login form. A "Giriş Yap" button on the pitch screen
   reveals the actual username/password form as a full-screen overlay on
   tap. IMPORTANT: this block must stay AFTER the base .auth-brand-pane /
   .auth-form-pane / .mobile-login-* rules above - CSS cascade only lets a
   media-query override win when it comes later in source order than an
   unconditional rule of equal specificity. Putting it earlier (as before)
   silently cancelled every display:none/flex swap here on all screen sizes. */
@media (max-width: 640px) {
  .auth-wrap { display: block; min-height: 100vh; }

  .auth-brand-pane {
    display: flex; min-height: 100vh; padding: 40px 22px;
    padding-top: max(40px, env(safe-area-inset-top));
    padding-bottom: max(110px, calc(90px + env(safe-area-inset-bottom)));
  }
  /* Fixed bottom CTA bar instead of an inline button at the end of the pitch
     text: white-on-blue (not blue-on-blue like the default .btn-primary,
     which nearly disappeared against the gradient background) + a strong
     shadow so it reads as the obvious next step, and it stays visible the
     whole time without needing to scroll through the welcome copy first. */
  .mobile-login-trigger {
    display: flex; position: fixed; left: 16px; right: 16px; width: auto; margin-top: 0;
    padding: 17px 20px; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.01em;
    background: #fff; color: var(--accent-hi); border: none;
    box-shadow: 0 14px 34px rgba(8,16,48,0.45);
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 50;
  }
  .mobile-login-trigger:active { transform: scale(0.98); }

  .auth-form-pane {
    display: none; position: fixed; inset: 0; z-index: 500; background: var(--bg-1);
    overflow-y: auto; padding: 56px 20px 24px; box-sizing: border-box;
    padding-top: max(56px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .auth-form-pane.open { display: block; }
  .auth-card { margin: 0 auto; }
  .mobile-login-close { display: flex; }
}

/* ==========================================================================
   Hub layout
   ========================================================================== */
/* Wraps topbar + stats-bar + hub-grid so the whole thing is pinned to exactly
   the viewport height on desktop - only .hub-grid's own children (player
   list / games / chat) scroll internally, the page itself never does. */
.hub-shell {
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}

.topbar {
  height: 58px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 100; flex: 0 0 auto;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; }
.topbar .brand .mark { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; }
.topbar .me { display: flex; align-items: center; gap: 10px; }
.topbar .me .score { font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 0.85rem; }

.hub-grid {
  display: grid; grid-template-columns: 270px 1fr 300px; gap: 18px;
  padding: 20px; max-width: 1500px; margin: 0 auto; width: 100%;
  flex: 1 1 auto; min-height: 0;
}
@media (max-width: 1100px) {
  .hub-shell { height: auto; overflow: visible; }
  .hub-grid { grid-template-columns: 1fr; height: auto; flex: none; }
  .panel-players, .panel-chat { height: 380px; }
}

.panel { display: flex; flex-direction: column; overflow: hidden; }
.panel-head {
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft); display: flex;
  align-items: center; justify-content: space-between; font-weight: 700; font-size: 0.88rem;
}
.panel-head .count { font-family: var(--font-display); }

.player-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.player-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); }
.player-row:hover { background: var(--bg-2); }
.player-row .info { flex: 1; min-width: 0; }
.player-row .name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-row .loc { font-size: 0.7rem; color: var(--text-lo); }
.player-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex-shrink: 0; }
.player-row .whisper { opacity: 0; transition: opacity .15s; }
.player-row:hover .whisper { opacity: 1; }
@media (hover: none) { .player-row .whisper { opacity: 1; } }

.games-scroll { flex: 1; overflow-y: auto; padding: 4px 2px 2px; }
.section-title { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; margin: 4px 0 12px; display: flex; align-items: center; gap: 8px; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 26px; }
.game-card {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 18px 16px;
  background: var(--bg-1); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; text-decoration: none; color: inherit; display: block;
  box-shadow: 0 1px 3px rgba(20,22,32,0.04);
}
.game-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,22,32,0.08); }
.game-card .icon-box { width: 42px; height: 42px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.game-card .title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin-bottom: 2px; }
.game-card .desc { font-size: 0.75rem; color: var(--text-lo); }

.leaderboard-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--bg-2); }
.lb-rank { font-family: var(--font-display); font-weight: 700; color: var(--text-lo); width: 20px; }
.lb-rank.gold { color: var(--gold); }
.lb-name { flex: 1; font-weight: 600; font-size: 0.88rem; }
.lb-score { font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 0.85rem; }

.chat-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-bubble { max-width: 88%; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 14px 14px 14px 4px; padding: 8px 12px; align-self: flex-start; font-size: 0.85rem; }
.chat-bubble.me { align-self: flex-end; background: var(--accent); color: #fff; border-color: var(--accent); border-radius: 14px 14px 4px 14px; }
.chat-bubble .author { font-size: 0.68rem; font-weight: 700; color: var(--text-lo); margin-bottom: 2px; }
.chat-bubble.me .author { color: rgba(255,255,255,0.75); }
.chat-bubble.sys { align-self: center; background: transparent; border: 1px dashed var(--line); color: var(--text-lo); font-style: italic; font-size: 0.76rem; }
.chat-input-row { padding: 12px; border-top: 1px solid var(--line-soft); display: flex; gap: 8px; }
.chat-input-row input { flex: 1; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: transform .1s; }
.icon-btn:hover { transform: scale(1.06); }

/* private chat popover */
.private-box {
  position: fixed; bottom: 18px; right: 18px; width: 300px; background: var(--bg-1);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 20px 45px rgba(20,22,32,0.16);
  display: none; flex-direction: column; overflow: hidden; z-index: 500; max-height: 420px;
}
.private-box.open { display: flex; }
.private-head { background: var(--bg-3); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 0.85rem; }
.private-head button { background: none; border: none; color: var(--text-lo); cursor: pointer; font-size: 1rem; }
.private-body { flex: 1; background: var(--bg-0); padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; min-height: 160px; }
.typing-row { font-size: 0.72rem; color: var(--text-lo); font-style: italic; padding: 0 4px; display: none; }
.typing-row.show { display: block; }
.private-foot { padding: 8px; border-top: 1px solid var(--line-soft); display: flex; gap: 6px; }

/* announcement banner */
.announce-banner {
  position: fixed; top: 68px; left: 50%; transform: translateX(-50%); z-index: 7000;
  background: #14224b; color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 0.85rem;
  font-weight: 600; box-shadow: 0 20px 40px rgba(20,22,32,0.25); display: none; align-items: center; gap: 10px;
}
.announce-banner.show { display: flex; }

/* ==========================================================================
   Game shell (lobby of tables + room view) - shared by all 4 games
   ========================================================================== */
.game-topbar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,0.92); position: sticky; top: 0; z-index: 50; }
.game-topbar .title { font-family: var(--font-display); font-weight: 700; display: flex; align-items: center; gap: 10px; }

.tables-layout { display: grid; grid-template-columns: 260px 1fr; gap: 18px; padding: 20px; max-width: 1400px; margin: 0 auto; }
@media (max-width: 980px) { .tables-layout { grid-template-columns: 1fr; } }
.tables-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.table-card { border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 16px; background: var(--bg-1); position: relative; text-align: center; }
.table-card .no { position: absolute; top: 12px; left: 14px; font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; color: var(--text-lo); }
.table-card .status { position: absolute; top: 10px; right: 12px; }
.table-seats { display: flex; justify-content: space-around; margin-top: 26px; gap: 8px; }
.seat-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.seat-empty { width: 42px; height: 42px; border-radius: 50%; border: 2px dashed var(--line); background: transparent; color: var(--text-lo); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .15s; }
.seat-empty:hover { border-color: var(--accent); color: var(--accent); }
.seat-name { font-size: 0.7rem; font-weight: 600; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-watch { width: 100%; margin-top: 16px; }

/* room view */
.room-layout { display: grid; grid-template-columns: 210px 1fr 260px; gap: 14px; height: calc(100vh - 56px); }
@media (max-width: 1100px) {
  .room-layout { grid-template-columns: 1fr; height: auto; }
  /* Stacked on a phone: show the board immediately, player list/invites and
     chat follow below it instead of pushing the board down the page. */
  .room-board-area { order: -1; }
}
.room-sidebar { border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; overflow: hidden; }
.room-board-area { padding: 20px; display: flex; flex-direction: column; align-items: center; overflow-y: auto; }
#boardHost { width: 100%; display: flex; justify-content: center; }

/* Spectators watch every board rotated 90deg ("yandan"/from the side) instead of
   favoring either seated player's own orientation. Board grids are all square so
   the rotation doesn't change their footprint. Chess piece glyphs are text, so
   they get counter-rotated back upright; the other games use plain shapes that
   look the same either way. */
.spectator-view { transform: rotate(90deg); }
.spectator-view .cb-piece { display: inline-block; transform: rotate(-90deg); }
.room-chat { border-left: 1px solid var(--line-soft); display: flex; flex-direction: column; overflow: hidden; height: 100%; }

.player-bar { width: 100%; max-width: 600px; display: flex; align-items: center; justify-content: space-between; background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 10px; }
.player-bar .who { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.92rem; }
.color-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); border: 1px solid rgba(0,0,0,0.15); }
.turn-banner { width: 100%; max-width: 600px; text-align: center; font-weight: 700; font-size: 0.88rem; padding: 9px 14px; border-radius: var(--r-md); margin-bottom: 10px; }
.turn-banner.me { background: #dcfce7; color: var(--good); border: 1px solid #bbf7d0; }
.turn-banner.opp { background: #fef3c7; color: var(--warn); border: 1px solid #fde68a; }
.turn-banner.info { background: var(--bg-2); color: var(--text-mid); border: 1px solid var(--line); }
.timer-chip { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; padding: 3px 10px; border-radius: 999px; background: #fee2e2; color: var(--bad); border: 1px solid #fecaca; }

.score-pips { display: flex; gap: 4px; }
.pip { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.pip.on { background: var(--accent); }

/* Kure board - faithful to the original: slate frame, ivory/steel cells, glossy spheres */
.board-frame { background: #94a3b8; border: none; padding: 14px; border-radius: var(--r-lg); width: 100%; max-width: min(600px, 90vw, max(320px, calc(100vh - 320px))); box-shadow: 0 15px 35px rgba(20,22,32,0.22); }
.board-shell { width: 100%; max-width: min(600px, 90vw, max(320px, calc(100vh - 320px))); position: relative; }
.kure-board, .abluka-board, .pentago-board, .chess-board { user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.kure-board { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; aspect-ratio: 1/1; background: #94a3b8; border-radius: var(--r-md); overflow: hidden; }
.kb-cell { background: #f8fafc; position: relative; display: flex; align-items: center; justify-content: center; }
.kb-cell.dark { background: #e2e8f0; }
.kb-cell.trail { box-shadow: inset 0 0 0 3px #eab308 !important; }
.kb-cell.selected { box-shadow: inset 0 0 0 3px var(--good); }
.kb-cell.valid::after { content:''; width: 30%; height: 30%; border-radius: 50%; background: #22c55e; opacity: .7; }
.kure-piece { width: 75%; height: 75%; border-radius: 50%; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset -4px -6px 12px rgba(0,0,0,0.4), inset 2px 4px 6px rgba(255,255,255,0.4); }
.kure-piece.black { background: radial-gradient(circle at 35% 35%, #475569 0%, #0f172a 60%, #000000 100%); border: 1px solid #1e293b; }
.kure-piece.white { background: radial-gradient(circle at 35% 35%, #f8fafc 0%, #e2e8f0 50%, #94a3b8 100%); border: 2px solid #64748b; }

/* Abluka board - same slate/ivory frame, square pieces, red wall block */
.abluka-board { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; aspect-ratio: 1/1; background: #94a3b8; border-radius: var(--r-md); overflow: hidden; }
.ab-cell { background: #f8fafc; position: relative; display: flex; align-items: center; justify-content: center; cursor: default; }
.ab-cell.dark { background: #e2e8f0; }
.ab-cell.valid { cursor: pointer; box-shadow: inset 0 0 0 3px #22c55e; }
.ab-cell.valid-wall { cursor: pointer; }
.ab-cell.valid-wall:hover { background: rgba(220,38,38,0.18); }
.ab-piece { width: 68%; height: 68%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset -4px -6px 12px rgba(0,0,0,0.4), inset 2px 4px 6px rgba(255,255,255,0.4); }
.ab-piece.black { background: linear-gradient(145deg, #475569, #0f172a); border: 1px solid #1e293b; }
.ab-piece.white { background: linear-gradient(145deg, #f8fafc, #cbd5e1); border: 2px solid #64748b; }
.ab-wall { width: 90%; height: 90%; border-radius: 8px; background: #ef4444; border: 3px solid #b91c1c; }

/* Pentago board - slate frame, red quadrant blocks, round cells, glossy marbles */
.pentago-board { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; background: #94a3b8; padding: 14px; border-radius: var(--r-lg); box-shadow: 0 15px 35px rgba(20,22,32,0.22); width: 100%; }
.pentago-quad-wrap { position: relative; background: #dc2626; padding: 7px; border-radius: 12px; border: 3px solid #991b1b; }
.pentago-quad { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; transition: transform .6s cubic-bezier(.25,.8,.25,1); }
.pg-cell { aspect-ratio: 1/1; background: #f8fafc; border-radius: 50%; box-shadow: inset 0 4px 6px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; position: relative; }
.pg-cell.trail { box-shadow: 0 0 0 3px #eab308, inset 0 4px 6px rgba(0,0,0,0.2); }
.pg-cell.empty-active { cursor: pointer; box-shadow: inset 0 0 0 3px #22c55e, inset 0 4px 6px rgba(0,0,0,0.2); }
.pg-cell.empty-active:hover { background: #dcfce7; }
.pg-piece { width: 85%; height: 85%; border-radius: 50%; box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset -4px -6px 12px rgba(0,0,0,0.4), inset 2px 4px 6px rgba(255,255,255,0.4); }
.pg-piece.black { background: radial-gradient(circle at 35% 35%, #475569 0%, #0f172a 60%, #000000 100%); border: 1px solid #1e293b; }
.pg-piece.white { background: radial-gradient(circle at 35% 35%, #f8fafc 0%, #e2e8f0 50%, #94a3b8 100%); border: 2px solid #64748b; }
.pentago-rotate-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); border-radius: 10px; display: none; align-items: center; justify-content: center; z-index: 5; backdrop-filter: blur(2px); }
.pentago-quad-wrap.can-rotate:hover .pentago-rotate-overlay { display: flex; }
@media (hover: none) { .pentago-quad-wrap.can-rotate .pentago-rotate-overlay { display: flex; opacity: 1; background: rgba(0,0,0,0.32); } }
.rotate-btn { width: 60px; height: 60px; border-radius: 50%; background: #3b82f6; color: #fff; border: 3px solid #eff6ff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.4); transition: transform .15s, background .15s; }
.rotate-btn:hover { background: #2563eb; transform: scale(1.12) rotate(15deg); }

/* Chess board - classic wood-tone squares for instant readability */
.chess-board { display: grid; grid-template-columns: repeat(8,1fr); aspect-ratio: 1/1; border-radius: var(--r-md); overflow: hidden; border: 6px solid #6b4a2f; box-shadow: 0 15px 35px rgba(20,22,32,0.22); width: 100%; }
.cb-cell { position: relative; display: flex; align-items: center; justify-content: center; background: #b58863; }
.cb-cell.light { background: #f0d9b5; }
.cb-cell.selected { box-shadow: inset 0 0 0 4px var(--good); }
.cb-cell.valid::after { content:''; width: 30%; height: 30%; border-radius: 50%; background: rgba(22,101,52,0.55); }
.cb-cell.valid.has-piece::after { width: 100%; height: 100%; border-radius: 0; background: transparent; box-shadow: inset 0 0 0 4px var(--bad); opacity: 1; }
.cb-cell.check { box-shadow: inset 0 0 0 4px var(--bad); }
.cb-cell.lastmove { background: rgba(234,179,8,0.45); }
.cb-piece { font-size: min(7vw, 62px); line-height: 1; user-select: none; cursor: default; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35)); }
.chess-board.interactive .cb-piece.mine { cursor: pointer; }

.empty-state { text-align: center; padding: 30px; color: var(--text-lo); font-size: 0.85rem; }
.ban-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; gap: 14px; }
.ban-screen .emoji { font-size: 3rem; }

/* ==========================================================================
   New: live stats bar, site rules box, conversation list, invites, avatars
   ========================================================================== */
.stats-bar {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 20px 0; max-width: 1500px; margin: 0 auto;
  width: 100%; flex: 0 0 auto;
}
.stat-pill {
  background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 7px 14px; font-size: 0.78rem; color: var(--text-mid); box-shadow: 0 1px 2px rgba(20,22,32,0.03);
}
.stat-pill strong { color: var(--accent-hi); font-family: var(--font-display); }

.rules-box {
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 16px 18px; margin-bottom: 26px; font-size: 0.83rem; color: var(--text-mid); line-height: 1.6;
}
.rules-box ul { margin: 0; padding-left: 18px; }
.rules-box li { margin-bottom: 6px; }
.rules-box strong { color: var(--text-hi); }

.table-mini-stats { font-size: 0.7rem; color: var(--text-lo); margin-top: 8px; }

.player-row .nick { font-size: 0.7rem; color: var(--accent-hi); font-style: italic; }

.acc-summary { display: flex; align-items: center; gap: 14px; padding: 14px; margin-bottom: 18px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.acc-summary-avatar { flex-shrink: 0; }
.acc-summary-info { min-width: 0; }
.acc-summary-name { font-weight: 700; font-size: 1rem; color: var(--text-hi); }
.acc-summary-role { font-size: 0.78rem; color: var(--text-lo); margin-top: 2px; }
.acc-summary-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 0.8rem; color: var(--text-mid); }
.acc-summary-stats strong { color: var(--accent-hi); font-family: var(--font-display); }

.conv-list { flex: 0 0 auto; max-height: 220px; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.conv-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); cursor: pointer; }
.conv-row:hover { background: var(--bg-2); }
.conv-row .info { flex: 1; min-width: 0; }
.conv-row .name { font-size: 0.82rem; font-weight: 600; }
.conv-row .preview { font-size: 0.72rem; color: var(--text-lo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.invite-toast {
  position: fixed; top: 78px; right: 18px; z-index: 7500; background: var(--bg-1); border: 1px solid var(--accent);
  border-radius: var(--r-lg); padding: 14px 16px; box-shadow: 0 20px 45px rgba(20,22,32,0.18); max-width: 300px;
}
.invite-toast.hidden { display: none; }
.invite-msg { font-size: 0.85rem; margin-bottom: 10px; }
.invite-actions { display: flex; gap: 8px; }

.avatar.has-minifig { border: none; background: transparent !important; }
.avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.avatar-choice {
  border: 2px solid var(--line); background: var(--bg-2); border-radius: var(--r-md); padding: 8px; cursor: pointer;
  transition: border-color .15s; overflow: hidden;
}
.avatar-choice:hover { border-color: var(--accent); }
.avatar-choice.selected { border-color: var(--accent); background: #dbe6fd; }
.avatar-choice .avatar-img { width: 100%; height: 64px; object-fit: cover; border-radius: var(--r-sm); display: block; }

.cred-card {
  background: #dcfce7; border: 1px solid #bbf7d0; border-radius: var(--r-md); padding: 12px 14px;
  font-size: 0.85rem; line-height: 1.6;
}
.cred-card code { background: rgba(0,0,0,0.06); padding: 1px 6px; border-radius: 4px; }

/* ==========================================================================
   Brand logo (interlocking rings mark)
   ========================================================================== */
.brand-logo { width: 28px; height: 28px; display: block; flex-shrink: 0; }
.brand-logo.lg { width: 42px; height: 42px; }
.auth-brand-pane .mark-row { gap: 12px; }

/* ==========================================================================
   Admin: bulk select/edit/delete toolbar + WhatsApp share buttons
   ========================================================================== */
.bulk-actions-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  padding: 10px 12px; margin-bottom: 12px; font-size: 0.8rem; color: var(--text-mid);
}
.bulk-actions-bar select.input { padding: 6px 10px; font-size: 0.8rem; }
.wa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 30px; height: 30px; border-radius: 50%; background: #e9fbf0; border: 1px solid #bdf0d1;
  cursor: pointer; text-decoration: none; flex-shrink: 0;
}
.wa-btn:hover { background: #d3f6e0; }
.cred-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }

/* ==========================================================================
   Game lobby: table filter chips + collapsible "Bu salondakiler" panel.
   The chips work at every size; the collapse behavior only actually kicks
   in on mobile (see the <=640px rule below) - elsewhere the panel-head is
   clickable but harmlessly no-ops since .player-list stays visible there.
   ========================================================================== */
.table-filter-bar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.filter-chip {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-1);
  color: var(--text-mid); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.filter-chip:hover { border-color: var(--accent); }
.filter-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.mobile-collapsible .panel-head { cursor: pointer; user-select: none; }
.collapse-chevron { font-size: 0.75rem; color: var(--text-lo); display: none; }
/* Transparent wrapper (used by the room-sidebar/room-chat panels, which have
   several body elements to hide/show at once) - display:contents makes it a
   layout no-op on desktop, exactly like .mob-screen in the hub. */
.mobile-collapsible-body { display: contents; }

/* ==========================================================================
   Mobile (<=640px) - the app is mostly played on phones, so this is a real
   pass, not an afterthought: bigger touch targets, no cramped topbar, full-
   screen modals, no iOS input zoom, bottom-sheet style popovers.
   ========================================================================== */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; height: auto; min-height: 54px; padding: 8px 12px; row-gap: 6px; }
  .topbar .brand { font-size: 0.82rem; gap: 6px; }
  .topbar .brand .brand-text { display: inline; font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
  .topbar .me { flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
  .topbar .me .btn-sm { padding: 6px 10px; font-size: 0.76rem; }
  .topbar .me .score { font-size: 0.78rem; }
  #meName { display: none; } /* avatar + score already identify the account; saves row space */

  .game-topbar { padding: 0 12px; }

  .hub-grid, .tables-layout, .room-layout { gap: 10px; padding: 10px; }
  .stats-bar { padding: 10px 10px 0; gap: 6px; }
  .stat-pill { font-size: 0.72rem; padding: 6px 10px; }

  .modal-backdrop { padding: 0; }
  .modal {
    max-width: 100%; width: 100%; height: 100%; max-height: 100%;
    border-radius: 0; padding: 16px; padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .modal-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }
  .modal-tab { flex-shrink: 0; }

  #addUserForm, #settingsFields { grid-template-columns: 1fr !important; }

  /* iOS Safari zooms the whole page in when a focused input's font-size is
     under 16px - this is what causes that jarring "zoom on tap" on forms. */
  .input, textarea.input, select.input { font-size: 16px; }

  .seat-empty { width: 46px; height: 46px; }
  .wa-btn { width: 38px; height: 38px; }
  .avatar-grid { grid-template-columns: repeat(3, 1fr); }

  /* Bottom-sheet style instead of a floating corner box that can clip off
     the edge of a narrow phone screen. */
  .private-box {
    left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 62vh;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .invite-toast { left: 8px; right: 8px; max-width: none; top: auto; bottom: 8px; }
  #toastHost { left: 8px; right: 8px; max-width: none; top: max(8px, env(safe-area-inset-top)); }

  .player-bar, .turn-banner { max-width: 100%; }
  .room-nav {
    max-width: 100% !important; position: sticky; top: 0; z-index: 40;
    background: var(--bg-0); padding-top: 6px; margin-bottom: 10px !important;
  }

  .table-seats { flex-wrap: wrap; row-gap: 12px; }
  .bulk-actions-bar { gap: 6px; }
  .bulk-actions-bar select.input, .bulk-actions-bar .btn-sm { width: 100%; }

  /* "Bu salondakiler" panel starts collapsed on mobile (default class in
     the HTML) so the table list is visible without scrolling past it -
     the online count is still shown at a glance via .panel-head and the
     game-topbar badge. */
  .collapse-chevron { display: inline-block; }
  .mobile-collapsible.collapsed .player-list { display: none; }
  .mobile-collapsible.collapsed .mobile-collapsible-body { display: none; }
  .mobile-collapsible.collapsed .collapse-chevron { transform: rotate(-90deg); }
  .table-filter-bar { margin-bottom: 10px; }
  .filter-chip { padding: 6px 12px; font-size: 0.76rem; }

  /* "Odada bulunanlar" ve "Sistem & Sohbet" panelleri de aynı collapsible
     davranışı kullanır - mobilde varsayılan kapalı, board her zaman ilk
     görünen öğe olarak kalır (.room-board-area order:-1, <=1100px kuralı). */
  .room-sidebar, .room-chat { height: auto; }
}

/* ==========================================================================
   Prominent table-invite card (impossible-to-miss centered popup, replacing
   the old easy-to-ignore corner toast) + matching "invite declined" notice.
   ========================================================================== */
.invite-backdrop { z-index: 9500; }
.invite-card {
  background: var(--bg-1); border-radius: var(--r-lg); padding: 28px 26px; width: 100%;
  max-width: 380px; text-align: center; box-shadow: 0 30px 70px rgba(20,22,32,0.35);
  border: 3px solid var(--accent);
}
.invite-card.declined { border-color: var(--bad); }
.invite-card.invite-pop { animation: invitePop .45s cubic-bezier(.34,1.56,.64,1), invitePulse 1.4s ease-in-out .45s 2; }
.invite-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin-bottom: 10px; }
.invite-card-msg { font-size: 0.95rem; color: var(--text-mid); line-height: 1.5; margin-bottom: 22px; }
.invite-card-actions { display: flex; flex-direction: column; gap: 10px; }
.invite-card-actions .btn { width: 100%; padding: 13px 18px; font-size: 0.95rem; }
@keyframes invitePop {
  0% { transform: scale(0.75); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes invitePulse {
  0%, 100% { box-shadow: 0 30px 70px rgba(20,22,32,0.35); }
  50% { box-shadow: 0 30px 70px rgba(20,22,32,0.35), 0 0 0 10px rgba(29,78,216,0.18); }
}
.invite-card.declined.invite-pop { animation-name: invitePop, invitePulseBad; }
@keyframes invitePulseBad {
  0%, 100% { box-shadow: 0 30px 70px rgba(20,22,32,0.35); }
  50% { box-shadow: 0 30px 70px rgba(20,22,32,0.35), 0 0 0 10px rgba(220,38,38,0.18); }
}

/* ==========================================================================
   Mobile app-shell (<=640px): bottom tab bar + slide-out drawer menu +
   distinct full-height "screens" (Ana Sayfa / Oyuncular / Sıralama / Sohbet)
   instead of one long stacked scrolling page. display:contents keeps every
   rule below a no-op on desktop/tablet - only the max-width:640px query
   actually switches these into real, toggleable blocks.
   ========================================================================== */
.mob-screen { display: contents; }
.mobile-welcome-card { display: none; }
.mobile-tabbar { display: none; }
.mobile-drawer-backdrop { display: none; }
#mobileMenuBtn { display: none; }

@media (max-width: 640px) {
  /* height: 100vh on mobile browsers is taller than what's actually visible
     (address bar / toolbar chrome eats into it), which is exactly what was
     pushing the bottom tab bar (Ana Sayfa/Oyuncular/Sıralama/Sohbet) below
     the fold, forcing a scroll to reach it. 100dvh ("dynamic viewport
     height") tracks the real visible area instead - the vh line stays first
     as a fallback for the rare browser that doesn't understand dvh yet. */
  .hub-shell { height: 100vh; height: 100dvh; overflow: hidden; }
  .hub-grid { display: flex; flex-direction: column; flex: 1; min-height: 0; height: auto; padding: 0; gap: 0; order: 1; }
  .panel, .games-scroll { display: contents; }

  /* Live stats pills move from just under the topbar to a footer strip just
     above the bottom tab bar - same element, only its position in the
     .hub-shell flex column changes (no HTML/JS change needed). */
  .stats-bar {
    order: 2; flex-wrap: nowrap; overflow-x: auto; padding: 8px 10px;
    border-top: 1px solid var(--line-soft); background: rgba(255,255,255,0.96);
  }
  .stats-bar .stat-pill { flex: 0 0 auto; white-space: nowrap; }
  .mobile-tabbar { order: 3; }

  .mob-screen { display: none; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
  .mob-screen.active { display: flex; }
  .mob-screen[data-mtab="chat"] { padding: 0; }

  .mobile-welcome-card {
    display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #fff; border-radius: var(--r-lg); padding: 16px; margin-bottom: 16px;
  }
  .mobile-welcome-card .avatar { border: 2px solid rgba(255,255,255,0.5); }
  .mobile-welcome-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
  .mobile-welcome-sub { font-size: 0.8rem; color: rgba(255,255,255,0.85); margin-top: 2px; }

  /* Salon cards become horizontal rows on mobile, matching the reference design */
  .mob-screen[data-mtab="home"] .game-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 8px; }
  .mob-screen[data-mtab="home"] .game-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
  .mob-screen[data-mtab="home"] .game-card .icon-box { margin-bottom: 0; flex-shrink: 0; }
  .mob-screen[data-mtab="home"] .game-card .title { margin-bottom: 0; }
  .mob-screen[data-mtab="home"] .game-card .table-mini-stats { margin-top: 2px; }

  /* Bigger tap target + bigger glyph than the default .btn-sm - it's the
     only way to reach the profile/account drawer on mobile, so it shouldn't
     read as a tiny, easy-to-miss icon. */
  #mobileMenuBtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; font-size: 1.4rem; line-height: 1;
    border-radius: var(--r-md);
  }
  #adminBtn, #accountBtn, #logoutBtn, #meScore, #meAvatar { display: none !important; }

  .mobile-tabbar {
    display: flex; flex: 0 0 auto; border-top: 1px solid var(--line-soft); background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px); padding: 6px 4px env(safe-area-inset-bottom);
  }
  .mtab-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none;
    color: var(--text-lo); font-size: 0.66rem; font-weight: 600; padding: 6px 2px; cursor: pointer; border-radius: var(--r-md);
  }
  .mtab-btn .mtab-icon { font-size: 1.2rem; line-height: 1; }
  .mtab-btn.active { color: var(--accent); }

  .mobile-drawer-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(20,22,32,0.45); z-index: 9200;
  }
  .mobile-drawer-backdrop.hidden { display: none; }
  .mobile-drawer {
    position: absolute; top: 0; right: 0; bottom: 0; width: 78%; max-width: 300px; background: var(--bg-1);
    box-shadow: -10px 0 30px rgba(20,22,32,0.2); display: flex; flex-direction: column; padding: 20px 16px;
    padding-top: max(20px, env(safe-area-inset-top));
  }
  .mobile-drawer-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 10px 0 20px; border-bottom: 1px solid var(--line-soft); margin-bottom: 14px; }
  .mobile-drawer-name { font-weight: 700; font-family: var(--font-display); }
  .mobile-drawer-score { font-size: 0.8rem; color: var(--text-lo); }
  .mobile-drawer-item {
    display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: none; width: 100%;
    padding: 13px 8px; font-size: 0.92rem; font-weight: 600; color: var(--text-hi); cursor: pointer; border-radius: var(--r-md);
  }
  .mobile-drawer-item:hover { background: var(--bg-2); }
  .mobile-drawer-item.mobile-drawer-logout { margin-top: auto; color: var(--bad); }

  /* Keep the private-chat popover and invite toast clear of the new bottom
     tab bar instead of overlapping it. */
  .private-box { bottom: 74px; }
  .invite-toast { bottom: 74px; }
}