/* HumanOrBot SPA — Açık / koyu görünüm + renk paletleri */

/* ── Tokens & themes ── */
:root {
  --bg: #0c0a12;
  --bg-elevated: #151320;
  --surface: #1a1825;
  --surface-hover: #242030;
  --surface-active: #2e2a3d;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --text: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --accent: #8b5cf6;
  --accent-hover: #a78bfa;
  --accent-muted: rgba(139,92,246,.18);
  --accent-subtle: rgba(139,92,246,.1);
  --success: #22c55e;
  --success-muted: rgba(34,197,94,.12);
  --danger: #ef4444;
  --danger-muted: rgba(239,68,68,.12);
  --warning: #f59e0b;
  --warning-muted: rgba(245,158,11,.12);
  --gold: #eab308;
  --profile-banner-height: clamp(188px, 42vw, 240px);
  --cyan: #22d3ee;
  --pink: #f472b6;
  --header-bg: rgba(12,10,18,.88);
  --overlay-bg: rgba(0,0,0,.58);
  --glass: rgba(26,24,37,.92);
  --glass-bg: rgba(16, 12, 28, 0.55);
  --glass-border: rgba(255, 255, 255, 0.11);
  --glass-blur: blur(22px);
  --neon-purple: rgba(168, 85, 247, 0.5);
  --neon-amber: rgba(251, 146, 60, 0.7);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px;
  --radius-xl: 24px; --radius-full: 9999px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --party-warm: #fb923c;
  --party-warm-deep: #ea580c;
  --party-cream: #fef3c7;
  --rank-color: #94a3b8;
  --font-mono: ui-monospace,'Cascadia Code','Segoe UI Mono',monospace;
  --app-max: 520px; --app-wide: 920px;
  --app-bar-h: 56px;
  --shadow-md: 0 4px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.5);
  --blur: blur(16px);
  --ease: cubic-bezier(.4,0,.2,1);
  --duration: 200ms;
}

body.theme-ocean { --accent:#0ea5e9; --accent-hover:#38bdf8; --accent-muted:rgba(14,165,233,.18); --accent-subtle:rgba(14,165,233,.1); --cyan:#06b6d4; --pink:#ec4899; }
body.theme-ember { --accent:#f97316; --accent-hover:#fb923c; --accent-muted:rgba(249,115,22,.18); --accent-subtle:rgba(249,115,22,.1); --cyan:#eab308; --pink:#f43f5e; }
html[data-color-scheme="dark"] body.theme-frost {
  --bg:#0f172a; --bg-elevated:#1e293b; --surface:#1e293b; --surface-hover:#334155; --surface-active:#475569;
  --header-bg:rgba(15,23,42,.9); --glass:rgba(30,41,59,.92);
  --accent:#818cf8; --accent-hover:#a5b4fc; --accent-muted:rgba(129,140,248,.2); --accent-subtle:rgba(129,140,248,.1);
}
body.theme-neon { --accent:#10b981; --accent-hover:#34d399; --accent-muted:rgba(16,185,129,.18); --accent-subtle:rgba(16,185,129,.1); --cyan:#14b8a6; --pink:#a855f7; }

/* ── Açık görünüm (koyu metin) ── */
html[data-color-scheme="light"] {
  --bg: #f4f4f6;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-hover: #f0f0f4;
  --surface-active: #e4e4ea;
  --border: rgba(15, 15, 20, 0.08);
  --border-strong: rgba(15, 15, 20, 0.14);
  --text: #18181b;
  --text-secondary: #52525b;
  --text-muted: #71717a;
  --header-bg: rgba(255, 255, 255, 0.92);
  --overlay-bg: rgba(15, 15, 20, 0.42);
  --glass: rgba(255, 255, 255, 0.94);
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(15, 15, 20, 0.1);
  --neon-purple: rgba(124, 58, 237, 0.22);
  --neon-amber: rgba(234, 88, 12, 0.35);
  --shadow-md: 0 4px 20px rgba(15, 15, 20, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 15, 20, 0.12);
  --rank-color: #64748b;
  --danger-text: #b91c1c;
  --warning-text: #b45309;
  --success-text: #15803d;
}
html[data-color-scheme="light"] body {
  background-image:
    radial-gradient(ellipse 130% 85% at 50% -12%, rgba(139, 92, 246, 0.07), transparent 58%),
    radial-gradient(ellipse 65% 40% at 96% 6%, rgba(59, 130, 246, 0.04), transparent 52%);
}
html[data-color-scheme="light"] body::before {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.04) 0 2px, transparent 2px),
    radial-gradient(circle at 80% 60%, rgba(6, 182, 212, 0.03) 0 2px, transparent 2px);
  opacity: 0.55;
}
html[data-color-scheme="light"] body.theme-frost {
  --bg: #f1f5f9;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-hover: #e2e8f0;
  --surface-active: #cbd5e1;
  --header-bg: rgba(241, 245, 249, 0.95);
  --glass: rgba(255, 255, 255, 0.94);
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-muted: rgba(99, 102, 241, 0.14);
  --accent-subtle: rgba(99, 102, 241, 0.08);
}
html[data-color-scheme="light"] .overlay,
html[data-color-scheme="light"] .modal-overlay {
  background: rgba(15, 15, 20, 0.45);
}
html[data-color-scheme="light"] .sheet,
html[data-color-scheme="light"] .sheet-overlay {
  background: rgba(15, 15, 20, 0.35);
}
html[data-color-scheme="light"] .error-msg,
html[data-color-scheme="light"] .feedback.bad { color: var(--danger-text); }
html[data-color-scheme="light"] .connection-banner { color: var(--danger-text); background: rgba(239, 68, 68, 0.08); }
html[data-color-scheme="light"] #fileProtocolWarn,
html[data-color-scheme="light"] .quota-banner { color: var(--warning-text); background: rgba(245, 158, 11, 0.1); }
html[data-color-scheme="light"] .status-pill.lobby { color: var(--warning-text); }
html[data-color-scheme="light"] .status-pill.ingame { color: var(--danger-text); }
html[data-color-scheme="light"] .group-visibility.private { color: var(--warning-text); }
html[data-color-scheme="light"] .group-visibility.closed { color: var(--danger-text); }
html[data-color-scheme="light"] .game-demo__feedback.bad { color: var(--danger-text); }
html[data-color-scheme="light"] body.party-home-active::after {
  background: radial-gradient(ellipse 100% 55% at 50% -5%, rgba(251, 146, 60, 0.12), transparent 68%);
}
html[data-color-scheme="light"] body.party-home-active::before { opacity: 0.35; }
html[data-color-scheme="light"] .feedback.ok,
html[data-color-scheme="light"] .game-demo__feedback.ok { color: var(--success-text); }
html[data-color-scheme="light"] .game-demo-overlay { background: var(--overlay-bg); backdrop-filter: blur(8px); }
html[data-color-scheme="light"] .game-demo {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}
html[data-color-scheme="light"] .game-demo__question { border-color: var(--border); background: var(--bg-elevated); }
html[data-color-scheme="light"] .game-demo__card { background: var(--bg-elevated); }
html[data-color-scheme="light"] .game-demo__card.correct { background: var(--success-muted); }
html[data-color-scheme="light"] .game-demo__card.wrong { background: var(--danger-muted); }
html[data-color-scheme="light"] .game-demo__role { background: var(--surface-hover); }
html[data-color-scheme="light"] .answer-card:hover:not(.picked) {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(139, 92, 246, 0.08);
}
html[data-color-scheme="light"] .party-duel__card {
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
html[data-color-scheme="light"] .party-duel__pick {
  color: var(--text);
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}
html[data-color-scheme="light"] .party-duel__card--a { border-color: rgba(234, 88, 12, 0.35); }
html[data-color-scheme="light"] .party-duel__card--b { border-color: rgba(124, 58, 237, 0.3); }

/* ── Base ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; -webkit-text-size-adjust:100%; background-color:var(--bg); }
body {
  min-height:100%; font-family:var(--font); font-size:15px; line-height:1.5;
  color:var(--text);
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 130% 85% at 50% -12%, rgba(88, 28, 135, 0.16), transparent 58%),
    radial-gradient(ellipse 65% 40% at 96% 6%, rgba(59, 130, 246, 0.05), transparent 52%);
  display:flex; flex-direction:column;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(139,92,246,.05) 0 2px, transparent 2px),
    radial-gradient(circle at 80% 60%, rgba(6,182,212,.04) 0 2px, transparent 2px);
  background-size:48px 48px;
}
body::after { content:none; }
body.game-active::before { opacity:.8; }
body.in-game-flow { --app-bar-h: 52px; }
body.onboarding { overflow:hidden; }
body.onboarding .app-header,
body.onboarding #mainContent,
body.onboarding .app-footer { display:none!important; }
body > * { position:relative; z-index:1; }
a { color:var(--accent-hover); text-decoration:none; }
a:hover { text-decoration:underline; }
button,input,textarea,select { font-family:inherit; font-size:inherit; }
img { max-width:100%; display:block; }
code,.tag,.room-code,.invite-code-box .code,.share-box { font-family:var(--font-mono); }

/* ── App shell ── */
.app-bar,.app-header {
  position:sticky; top:0; z-index:100; display:flex; align-items:center;
  justify-content:space-between; gap:var(--space-2); min-height:var(--app-bar-h);
  padding:var(--space-2) var(--space-4);
  background:var(--header-bg); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-md);
}
.app-bar--flow { min-height:52px; padding-top:max(var(--space-2),env(safe-area-inset-top)); }
.app-bar--flow .app-bar__profile-text { display:none; }
.app-bar--flow .app-bar__profile { padding:var(--space-1); border:none; min-width:0; }
.app-bar--game .header-status { display:none; }
.app-bar--game .app-logo--header { width:32px; height:32px; box-shadow:0 0 16px rgba(139,92,246,.35); }
.app-bar__profile-text { min-width:0; }
.btn-settings {
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:40px; height:40px; padding:0; border-radius:var(--radius-md);
  border:1.5px solid var(--border); background:var(--surface); color:var(--text-secondary);
  box-shadow:var(--shadow-md);
  cursor:pointer; transition:background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.btn-settings:hover { color:var(--accent-hover); border-color:rgba(139,92,246,.35); background:var(--surface-hover); box-shadow:0 2px 8px rgba(139,92,246,.15); }
.game-badge {
  display:inline-block; margin:0 auto var(--space-3); padding:5px 12px;
  font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:.14em;
  color:var(--cyan); background:rgba(6,182,212,.12); border:1px solid rgba(6,182,212,.25);
  border-radius:var(--radius-full); text-align:center;
}
.app-bar__brand,.header-brand { display:flex; align-items:center; gap:var(--space-3); min-width:0; }
.app-logo { display:block; object-fit:contain; flex-shrink:0; }
.app-logo--splash { width:96px; height:96px; border-radius:var(--radius-lg); }
.app-brand {
  display:flex; align-items:center; gap:var(--space-2); padding:4px 8px 4px 4px;
  border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md);
  font-family:var(--font-display); color:var(--text);
}
.app-brand:hover { background:var(--accent-subtle); }
.app-brand__logo {
  width:28px; height:28px; border-radius:8px; object-fit:cover; flex-shrink:0;
}
.app-brand__name {
  font-family:var(--font-display); font-size:15px; font-weight:800;
  letter-spacing:-.02em; color:var(--text);
}
@media (max-width:420px) {
  .app-brand__name { display:none; }
}
.app-bar__profile,.header-profile-btn {
  display:flex; align-items:center; gap:var(--space-2); padding:var(--space-1) var(--space-2);
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-md);
  color:inherit; cursor:pointer; text-align:left;
  box-shadow:var(--shadow-md);
  transition:background var(--duration) var(--ease),border-color var(--duration) var(--ease);
}
.app-bar__profile:hover,.header-profile-btn:hover { background:var(--surface-hover); border-color:rgba(139,92,246,.3); }
.app-bar__actions,.header-actions { display:flex; align-items:center; gap:var(--space-2); flex-shrink:0; }
.header-name,.app-bar__name { font-size:14px; font-weight:600; max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.header-tagline,.app-bar__tag { font-size:11px; color:var(--text-muted); font-family:var(--font-mono); }
main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-height:0; background:transparent; }

.screen {
  display:none; flex:1; flex-direction:column; gap:var(--space-4); min-height:0;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  max-width:var(--app-max); width:100%; margin:0 auto; padding:var(--space-4);
  padding-bottom:calc(var(--space-6) + env(safe-area-inset-bottom,0));
}
main.has-nav .screen { padding-bottom:calc(var(--space-6) + env(safe-area-inset-bottom,0)); }
@media (min-width:740px) { .screen { max-width:var(--app-wide); padding:var(--space-5) var(--space-6) var(--space-8); } }
.screen.active { display:flex; }
.screen > * { flex-shrink:0; }
.screen-header { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-1); }

/* ── Panels ── */
.panel,.card {
  position:relative; overflow:hidden;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-4); width:100%; flex-shrink:0;
  box-shadow:var(--shadow-md);
}
.panel:not(.profile-page)::before,.card:not(.profile-page)::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--cyan) 50%, var(--pink) 85%);
  opacity:.85;
}
.panel--elevated,.card.glow {
  border-color:rgba(99,102,241,.15);
  box-shadow:var(--shadow-lg);
}
.panel__title,.card h2 { font-size:16px; font-weight:600; margin-bottom:var(--space-3); }
.panel__sub,.card p.sub { font-size:14px; color:var(--text-secondary); margin-bottom:var(--space-4); line-height:1.45; }
.panel__body { display:flex; flex-direction:column; gap:var(--space-3); }

/* ── Dock ── */
.dock,.bottom-nav {
  position:fixed; bottom:calc(var(--space-3) + env(safe-area-inset-bottom,0)); left:50%;
  transform:translateX(-50%); z-index:200; display:flex; width:calc(100% - var(--space-8));
  max-width:var(--dock-max); padding:var(--space-1);
  background:rgba(15,15,18,.92); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(139,92,246,.18); border-radius:var(--radius-xl);
  box-shadow:0 8px 32px rgba(0,0,0,.45), 0 0 24px rgba(139,92,246,.08);
}
.dock__item,.bottom-nav button {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:var(--space-2) var(--space-1); background:transparent; border:none; border-radius:var(--radius-md);
  color:var(--text-muted); font-size:10px; font-weight:600; cursor:pointer;
  transition:color var(--duration) var(--ease),background var(--duration) var(--ease);
}
.dock__icon,.bottom-nav .nav-icon {
  display:flex; align-items:center; justify-content:center; width:28px; height:28px;
  font-size:12px; font-weight:700; border-radius:var(--radius-sm);
}
.dock__item.active,.bottom-nav button.active { color:var(--accent-hover); background:var(--accent-muted); }
.dock__item.active .dock__icon,.bottom-nav button.active .nav-icon { background:var(--accent-muted); color:var(--accent-hover); }

/* ── Home ── */
.home-hero,.hero-cinematic { text-align:center; padding:var(--space-5) var(--space-4) var(--space-4); position:relative; }
.home-hero--game {
  border-radius:var(--radius-xl);
  border:1px solid rgba(139,92,246,.22);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139,92,246,.16), transparent 60%),
    linear-gradient(180deg, rgba(24,24,27,.85), rgba(9,9,11,.4));
  box-shadow:0 12px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  margin-bottom:var(--space-2);
}
.home-hero__glow {
  position:absolute; inset:-20%; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 50% 30%, rgba(139,92,246,.25), transparent 55%);
  animation:heroGlow 4s ease-in-out infinite alternate;
}
.home-hero--game > *:not(.home-hero__glow) { position:relative; z-index:1; }
@keyframes heroGlow { from { opacity:.6; transform:scale(1); } to { opacity:1; transform:scale(1.05); } }
.home-hero__title,.hero-title {
  font-family:var(--font-display); font-size:clamp(1.85rem,8vw,2.5rem); font-weight:800;
  letter-spacing:-.02em; line-height:1.05; margin-bottom:var(--space-2);
  text-shadow:0 0 32px rgba(139,92,246,.35);
}
.home-hero__title span,.hero-title span {
  color:var(--accent-hover);
  background:linear-gradient(135deg, var(--accent-hover), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.home-hero__tagline,.hero-tagline { font-size:15px; color:var(--text-secondary); max-width:360px; margin:0 auto; }
.cta-grid,.quick-actions-compact { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-2); margin:var(--space-3) 0; }
.cta-grid__btn,.quick-btn {
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-2);
  background:linear-gradient(180deg, rgba(31,31,35,.95), rgba(24,24,27,.9));
  border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text);
  cursor:pointer; text-align:center; position:relative; overflow:hidden;
  transition:border-color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.cta-grid__btn:active,.quick-btn:active { transform:scale(.97); }
.cta-grid__btn--primary,.quick-btn.primary {
  background:linear-gradient(180deg, rgba(139,92,246,.28), rgba(139,92,246,.08));
  border-color:rgba(139,92,246,.4);
  box-shadow:0 0 24px rgba(139,92,246,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.cta-grid__btn--primary .cta-grid__icon,.quick-btn.primary .qb-icon {
  background:linear-gradient(135deg, var(--accent), var(--accent-hover));
  color:#fff; box-shadow:0 4px 12px rgba(139,92,246,.4);
}
.cta-grid__icon,.quick-btn .qb-icon {
  display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  font-family:var(--font-display); font-size:14px; font-weight:800;
  border-radius:var(--radius-sm); background:var(--surface-active);
  border:1px solid var(--border);
}
.cta-grid__label,.quick-btn .qb-label { font-size:11px; font-weight:600; }
.join-row,.row.stretch { display:flex; gap:var(--space-2); align-items:stretch; }
.join-row > *,.row.stretch > * { flex:1; min-width:0; }
.home-compact { padding-top:var(--space-2); }
.player-dashboard { padding:0; overflow:hidden; }
.player-dashboard .dash-inner { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4); background:var(--accent-subtle); border-bottom:1px solid var(--border); }
.dash-avatar,.mini-avatar {
  width:48px; height:48px; border-radius:var(--radius-md); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff;
  border:2px solid var(--border); overflow:hidden; position:relative;
}
.mini-avatar { width:36px; height:36px; border-radius:var(--radius-full); font-size:16px; }
.avatar-symbol {
  position:relative; z-index:1; line-height:1; font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.15);
}
.dash-info { flex:1; min-width:0; }
.dash-name { font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-meta { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-1); font-size:12px; color:var(--text-muted); }

/* ── Profile ── */
.profile-page,.profile-compact-card { padding:0; overflow:hidden; }
.profile-page__body,.profile-page .profile-page__body { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 var(--space-4) var(--space-4); }
.profile-cover,.profile-banner {
  height:var(--profile-banner-height, clamp(188px, 42vw, 240px));
  border-radius:0; margin:0; opacity:1; position:relative; overflow:hidden; background:var(--accent-subtle);
}
.profile-banner__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.profile-banner__img.hidden { display:none; }
.profile-cover.has-image,.profile-banner.has-image { background:transparent; }
.profile-banner-wrap { position:relative; }
.profile-banner__actions {
  position:absolute; top:var(--space-2); right:var(--space-2); display:flex; gap:6px; z-index:2;
}
.profile-banner__btn {
  background:var(--glass)!important; backdrop-filter:blur(8px);
  border:1px solid var(--border)!important; box-shadow:var(--shadow-sm);
  display:inline-flex; align-items:center; gap:4px;
}
.profile-page--rich .profile-page__body { margin-top:-40px; position:relative; z-index:1; padding-bottom:var(--space-5); }
.profile-avatar-stack { position:relative; display:inline-block; }
.profile-avatar__cam {
  position:absolute; right:-2px; bottom:-2px; width:28px; height:28px; border-radius:var(--radius-full);
  border:2px solid var(--surface); background:var(--accent); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); z-index:3;
  transition:transform var(--duration) var(--ease);
}
.profile-avatar__cam:hover { transform:scale(1.06); }
.profile-identity { margin-top:var(--space-3); }
.profile-bio-preview {
  margin:var(--space-3) 0 0; line-height:1.55; text-align:center; color:var(--text-secondary);
  font-size:14px; max-width:28rem;
}
.symbol-row { display:flex; flex-wrap:wrap; gap:8px; }
.symbol-swatch {
  width:36px; height:36px; border-radius:var(--radius-full); border:2px solid var(--border);
  background:var(--surface-hover); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.symbol-swatch.selected { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-muted); transform:scale(1.05); }
.public-profile-banner {
  height:var(--profile-banner-height);
  margin:-20px -20px 0; border-radius:16px 16px 0 0;
}
.public-profile-avatar {
  width:72px; height:72px; margin:-36px auto 12px;
  position:relative; overflow:hidden; flex-shrink:0;
}
.profile-page .profile-avatar,.profile-page .big-avatar {
  margin-top:0; box-shadow:var(--shadow-md); border:3px solid var(--surface); cursor:pointer;
  transition:box-shadow .3s var(--ease), transform .2s var(--ease);
}
.profile-page .profile-avatar:hover,.profile-page .big-avatar:hover {
  box-shadow:0 0 28px color-mix(in srgb, var(--rank-color, var(--accent)) 45%, transparent);
  transform:scale(1.03);
}
.profile-avatar-stack::after {
  content:''; position:absolute; inset:-4px; border-radius:var(--radius-full); z-index:0; pointer-events:none;
  border:2px solid transparent;
  border-top-color:var(--rank-color, var(--accent));
  animation:rankRingSpin 6s linear infinite;
  opacity:.7;
}
button.profile-avatar { padding:0; }
.chat-panel-modal { max-width:440px; padding:0; overflow:hidden; display:flex; flex-direction:column; max-height:90vh; }
.chat-panel-modal .chat-panel { border:none; border-radius:0; height:min(420px,55vh); }
.join-row { display:flex; gap:var(--space-2); align-items:stretch; }
.join-row input { flex:1; margin:0; }
.profile-page__header,.profile-compact-top { display:flex; align-items:center; gap:var(--space-4); }
.profile-avatar,.big-avatar {
  width:72px; height:72px; border-radius:var(--radius-full); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px; color:#fff;
  border:3px solid var(--surface); background:var(--surface-active); position:relative; overflow:hidden; cursor:pointer;
}
.avatar-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; display:none; }
.avatar-photo.visible { display:block; }
.avatar-photo.visible + .avatar-symbol,.big-avatar.has-photo > .avatar-symbol,.has-photo > .avatar-logo { display:none!important; }
.avatar-logo {
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  max-width:100%; max-height:100%;
  object-fit:cover; object-position:center;
  border-radius:inherit;
  display:none;
  pointer-events:none;
}
.avatar--brand:not(.has-photo) {
  background-image:url(/logo.png);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.avatar--brand .avatar-logo { display:none!important; width:0!important; height:0!important; }
.name-gradient {
  background-clip:text; -webkit-background-clip:text;
  color:var(--name-fallback, var(--accent-hover)); -webkit-text-fill-color:transparent;
  background-size:300% 300%;
  animation:grad-flow 5s ease infinite;
}
@supports not (-webkit-background-clip:text) {
  .name-gradient {
    -webkit-text-fill-color:var(--name-fallback, var(--accent-hover));
    color:var(--name-fallback, var(--accent-hover));
    background:none!important;
    animation:none;
  }
}
.grad-live {
  background-size:300% 300%;
  animation:grad-flow 6s ease infinite;
}
@keyframes grad-flow {
  0% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
.grad-ocean { background-image:linear-gradient(135deg,#1d4ed8,#38bdf8,#67e8f9,#2563eb,#1e40af); }
.grad-ice { background-image:linear-gradient(135deg,#0369a1,#0ea5e9,#bae6fd,#7dd3fc,#0284c7); }
.grad-violet { background-image:linear-gradient(135deg,#5b21b6,#8b5cf6,#c4b5fd,#a78bfa,#6d28d9); }
.grad-sunset { background-image:linear-gradient(135deg,#c2410c,#f97316,#fb7185,#fdba74,#ea580c); }
.grad-rose { background-image:linear-gradient(135deg,#be123c,#f43f5e,#fda4af,#fb7185,#e11d48); }
.grad-forest { background-image:linear-gradient(135deg,#14532d,#22c55e,#86efac,#4ade80,#15803d); }
.grad-mint { background-image:linear-gradient(135deg,#0f766e,#14b8a6,#5eead4,#2dd4bf,#0d9488); }
.grad-gold { background-image:linear-gradient(135deg,#a16207,#eab308,#fde047,#facc15,#ca8a04); }
.grad-ember { background-image:linear-gradient(135deg,#b91c1c,#ef4444,#fdba74,#f97316,#dc2626); }
.grad-rainbow { background-image:linear-gradient(135deg,#ef4444,#f97316,#eab308,#22c55e,#3b82f6,#a855f7,#ec4899); }
.grad-neon { background-image:linear-gradient(135deg,#059669,#22c55e,#a855f7,#c084fc,#047857); }
.grad-candy { background-image:linear-gradient(135deg,#db2777,#ec4899,#818cf8,#a5b4fc,#be185d); }
.grad-sky { background-image:linear-gradient(135deg,#0284c7,#38bdf8,#e0f2fe,#bae6fd,#0ea5e9); }
.grad-plum { background-image:linear-gradient(135deg,#6b21a8,#a855f7,#f0abfc,#e879f9,#7e22ce); }
.grad-slate { background-image:linear-gradient(135deg,#1e293b,#475569,#94a3b8,#cbd5e1,#334155); }
.color-swatch.grad-live { background-size:300% 300%; animation:grad-flow 4s ease infinite; cursor:pointer; transition:transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.color-swatch.grad-live:hover { transform:scale(1.06); }
.color-swatch.selected { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-muted), 0 2px 8px rgba(79,70,229,.2); transform:scale(1.08); }
.color-row .color-swatch { width:32px; height:32px; border-radius:var(--radius-full); border:2px solid var(--border); }
.profile-name { font-size:18px; font-weight:700; color:var(--text); }
.profile-name.name-gradient { color:var(--name-fallback, var(--accent-hover)); }
.profile-level { display:inline-block; margin-top:var(--space-1); padding:2px var(--space-2); border-radius:var(--radius-full); background:var(--accent-muted); font-size:11px; font-weight:600; color:var(--accent-hover); }
.profile-tag,.tag-copy { font-family:var(--font-mono); font-size:13px; color:var(--accent-hover); margin-top:var(--space-1); cursor:pointer; font-weight:600; }
.header-name.name-gradient { color:var(--name-fallback, var(--accent-hover)); }
.profile-stats,.profile-stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-2); margin:var(--space-4) 0; }
.profile-stat { text-align:center; padding:var(--space-3) var(--space-2); background:var(--surface-hover); border:1px solid var(--border); border-radius:var(--radius-md); }
.profile-stat .v { font-size:20px; font-weight:700; }
.profile-stat .l { font-size:11px; color:var(--text-muted); margin-top:2px; }
.profile-actions,.profile-actions-row { display:flex; gap:var(--space-2); justify-content:center; flex-wrap:wrap; margin-top:var(--space-3); }

/* ── Lists ── */
.section-label,.section-title {
  font-family:var(--font-display); font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-muted); margin:var(--space-4) 0 var(--space-2);
  display:flex; align-items:center; gap:var(--space-2);
}
.section-label::before,.section-title::before {
  content:''; width:8px; height:8px; border-radius:2px; background:var(--accent); opacity:.7;
}
.section-label:first-child,.section-title:first-child { margin-top:0; }
.list-row,.list-item {
  display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4);
  background:transparent; border:none; border-bottom:1px solid var(--border); width:100%;
  text-align:left; color:inherit; cursor:pointer; transition:background var(--duration) var(--ease);
}
.list-row:last-child,.list-item:last-child { border-bottom:none; }
.list-row:hover,.list-item:hover { background:var(--surface-hover); }
.panel .list-row,.panel .list-item,.card .list-row,.card .list-item { margin:0 calc(var(--space-4)*-1); padding-left:var(--space-4); padding-right:var(--space-4); }
.list-row__avatar,.list-item .avatar { width:40px; height:40px; border-radius:var(--radius-full); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:#fff; position:relative; overflow:hidden; }
.list-row__avatar.group-avatar,.list-item .group-avatar { border-radius:var(--radius-full); }
.list-row__avatar .dot,.list-item .avatar .dot { position:absolute; bottom:0; right:0; width:10px; height:10px; border-radius:var(--radius-full); border:2px solid var(--bg); background:var(--text-muted); }
.list-row__avatar .dot.online,.list-item .avatar .dot.online { background:var(--success); }
.list-row__avatar .dot.lobby,.list-item .avatar .dot.lobby { background:var(--warning); }
.list-row__avatar .dot.ingame,.list-item .avatar .dot.ingame { background:var(--danger); }
.list-row__info,.list-item .info { flex:1; min-width:0; }
.list-row__name,.list-item .info .name { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-row__sub,.list-item .info .sub { font-size:12px; color:var(--text-muted); margin-top:1px; }
.list-row__actions,.list-item .actions { display:flex; gap:var(--space-1); flex-shrink:0; }
.empty-state { text-align:center; padding:var(--space-10) var(--space-4); color:var(--text-muted); font-size:14px; }

/* ── Status pill ── */
.status-pill { display:inline-flex; align-items:center; font-size:11px; font-weight:600; padding:var(--space-1) var(--space-2); border-radius:var(--radius-full); border:1px solid var(--border); background:var(--surface-hover); color:var(--text-secondary); white-space:nowrap; }
.status-pill.online { color:#86efac; border-color:rgba(34,197,94,.3); background:rgba(34,197,94,.12); }
.status-pill.lobby { color:#fcd34d; border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.12); }
.status-pill.ingame { color:#fca5a5; border-color:rgba(239,68,68,.28); background:rgba(239,68,68,.12); }
.status-pill.offline { color:var(--text-muted); }

/* ── Modals & sheets ── */
.overlay,.modal-overlay { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:var(--space-4); background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }
.overlay.hidden,.modal-overlay.hidden { display:none!important; }
.modal,.modal-box { width:100%; max-width:360px; max-height:85vh; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-lg); color:var(--text); }
.modal h3,.modal-box h3 { font-size:16px; font-weight:600; margin-bottom:var(--space-3); color:var(--text); }
.modal-actions { display:flex; gap:var(--space-2); margin-top:var(--space-4); justify-content:flex-end; }
.sheet,.sheet-overlay { position:fixed; inset:0; z-index:350; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.55); }
.sheet-overlay.hidden { display:none!important; }
.sheet__panel,.sheet-panel { width:100%; max-width:var(--app-max); max-height:85vh; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl) var(--radius-xl) 0 0; padding:var(--space-4) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom,0)); animation:sheetUp .3s var(--ease); color:var(--text); }
.sheet__handle,.sheet-handle { width:40px; height:4px; background:var(--border-strong); border-radius:var(--radius-full); margin:0 auto var(--space-3); }
.sheet__head,.sheet-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4); }
.settings-block,.settings-section { margin-bottom:var(--space-5); padding-bottom:var(--space-4); border-bottom:1px solid var(--border); }
.settings-block:last-child,.settings-section:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
.settings-block__title,.settings-section h4 { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:var(--space-3); }
/* Ayarlar: görünüm ve palet */
.appearance-row {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2);
}
.appearance-option {
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
  padding:var(--space-3); border-radius:var(--radius-md);
  border:1.5px solid var(--border); background:var(--surface);
  cursor:pointer; color:var(--text); text-align:center;
  transition:border-color var(--duration) var(--ease), background var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.appearance-option:hover { background:var(--surface-hover); border-color:var(--border-strong); }
.appearance-option.active {
  border-color:var(--accent); background:var(--accent-subtle);
  box-shadow:0 0 0 1px var(--accent);
}
.appearance-option__swatch {
  width:100%; height:32px; border-radius:var(--radius-sm);
  border:1px solid var(--border);
}
.appearance-option__swatch--dark {
  background:linear-gradient(180deg, #1a1825 50%, #8b5cf6);
}
.appearance-option__swatch--light {
  background:linear-gradient(180deg, #ffffff 50%, #e4e4ea);
}
.appearance-option__name { font-size:13px; font-weight:700; display:block; }
.appearance-option__desc { font-size:11px; color:var(--text-muted); display:block; margin-top:2px; }

.palette-list { display:flex; flex-direction:column; gap:var(--space-2); }
.palette-option {
  display:flex; align-items:center; gap:var(--space-3);
  width:100%; padding:var(--space-3) var(--space-3);
  border-radius:var(--radius-md); border:1.5px solid var(--border);
  background:var(--surface); cursor:pointer; text-align:left; color:var(--text);
  transition:border-color var(--duration) var(--ease), background var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.palette-option:hover { background:var(--surface-hover); border-color:var(--border-strong); }
.palette-option.active {
  border-color:var(--accent); background:var(--accent-subtle);
  box-shadow:0 0 0 1px rgba(139, 92, 246, 0.25);
}
.palette-option__swatch {
  flex-shrink:0; width:40px; height:40px; border-radius:12px;
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.palette-option__swatch--default { background:linear-gradient(135deg, #8b5cf6, #ec4899); }
.palette-option__swatch--ocean { background:linear-gradient(135deg, #0ea5e9, #22d3ee); }
.palette-option__swatch--ember { background:linear-gradient(135deg, #f97316, #f43f5e); }
.palette-option__swatch--frost { background:linear-gradient(135deg, #818cf8, #a5b4fc); }
.palette-option__swatch--neon { background:linear-gradient(135deg, #22c55e, #a855f7); }
.palette-option__text { flex:1; min-width:0; }
.palette-option__name { display:block; font-size:14px; font-weight:600; line-height:1.3; }
.palette-option__desc { display:block; font-size:12px; color:var(--text-muted); margin-top:2px; }
.palette-option__tick {
  flex-shrink:0; width:22px; height:22px; border-radius:var(--radius-full);
  border:2px solid var(--border-strong); background:transparent;
  transition:background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.palette-option.active .palette-option__tick {
  border-color:var(--accent); background:var(--accent);
  box-shadow:inset 0 0 0 4px var(--surface);
}
html[data-color-scheme="light"] .palette-option.active {
  box-shadow:0 0 0 1px rgba(99, 102, 241, 0.2);
}
.theme-picker,.theme-grid { display:flex; flex-direction:column; gap:var(--space-2); }
.theme-picker__option,.theme-chip { padding:var(--space-3); border-radius:var(--radius-md); border:2px solid var(--border); background:var(--surface-hover); cursor:pointer; text-align:left; font-size:13px; font-weight:600; color:var(--text); }

/* ── Chat ── */
.chat-panel,.chat-box { display:flex; flex-direction:column; height:260px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-elevated); overflow:hidden; }
.chat-panel--tall,.dm-modal .chat-box { height:320px; }
.chat-bubbles,.chat-messages { flex:1; overflow-y:auto; padding:var(--space-3); display:flex; flex-direction:column; gap:var(--space-2); }
.bubble,.chat-msg { max-width:85%; padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); font-size:14px; line-height:1.4; word-break:break-word; }
.bubble--in,.chat-msg:not(.mine) { align-self:flex-start; background:var(--surface-hover); border-bottom-left-radius:var(--space-1); }
.bubble--out,.chat-msg.mine { align-self:flex-end; background:var(--accent-muted); border-bottom-right-radius:var(--space-1); text-align:right; }
.bubble.bubble--colored.bubble--in {
  background:color-mix(in srgb, var(--bubble-accent, var(--surface-hover)) 24%, var(--surface-hover));
  border:1px solid color-mix(in srgb, var(--bubble-accent) 38%, transparent);
}
.bubble.bubble--colored.bubble--out {
  background:color-mix(in srgb, var(--bubble-accent, var(--accent)) 30%, var(--surface));
  border:1px solid color-mix(in srgb, var(--bubble-accent) 45%, transparent);
  text-align:left;
}
.bubble-row { display:flex; flex-direction:column; gap:2px; max-width:85%; }
.bubble-row--in { align-self:flex-start; align-items:flex-start; }
.bubble-row--out { align-self:flex-end; align-items:flex-end; }
.bubble-time { font-size:10px; color:var(--text-muted); padding:0 var(--space-1); }
.chat-empty { text-align:center; color:var(--text-muted); font-size:13px; padding:var(--space-8) var(--space-4); }
.dm-modal .chat-messages { min-height:280px; max-height:50vh; }
.bubble .name,.chat-msg .name { font-weight:600; font-size:12px; margin-right:var(--space-2); color:var(--accent-hover); }
.bubble .ts,.chat-msg .ts { font-size:10px; color:var(--text-muted); margin-left:var(--space-2); }
.chat-compose,.chat-input-row { display:flex; border-top:1px solid var(--border); }
.chat-compose input,.chat-input-row input { flex:1; border:none; border-radius:0; background:transparent; padding:var(--space-3); }
.chat-compose button,.chat-input-row button {
  border-radius:0; background:linear-gradient(135deg,#4338ca,#6366f1); color:#fff;
  padding:var(--space-3) var(--space-4); font-weight:700; border:none; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.chat-compose button:hover,.chat-input-row button:hover { background:linear-gradient(135deg,#4f46e5,#818cf8); }
.group-chat-wrap { display:flex; flex-direction:column; min-height:280px; }
.dm-modal .modal-box { max-width:440px; padding:0; overflow:hidden; display:flex; flex-direction:column; max-height:90vh; }
.dm-head { padding:var(--space-4); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:var(--space-3); }
.dm-body { flex:1; display:flex; flex-direction:column; min-height:0; padding:0 var(--space-4) var(--space-4); }

/* ── Onboarding avatar ── */
.onboard-avatar-block { display:flex; flex-direction:column; align-items:center; gap:var(--space-2); margin-bottom:var(--space-4); }
.onboard-avatar {
  width:88px; height:88px; border-radius:var(--radius-full); border:2px dashed rgba(139,92,246,.45);
  background:var(--surface-hover); cursor:pointer; position:relative; overflow:hidden; padding:0;
  display:flex; align-items:center; justify-content:center; color:var(--accent-hover);
  transition:border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.onboard-avatar:hover { border-color:var(--accent); box-shadow:0 0 24px rgba(139,92,246,.2); }
.onboard-avatar .avatar-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; display:none; }
.onboard-avatar .avatar-photo.visible { display:block; }
.onboard-avatar .avatar-photo.visible + .onboard-avatar__icon { display:none; }
.onboard-avatar-hint { font-size:12px; color:var(--text-muted); margin:0; }

/* ── Game demo (interactive tutorial) ── */
.game-demo-overlay {
  position:fixed; inset:0; z-index:650; display:flex; align-items:center; justify-content:center;
  padding:var(--space-4); background:var(--overlay-bg); backdrop-filter:blur(10px);
}
.game-demo-overlay.hidden { display:none!important; }
body.game-demo-active { overflow:hidden; }
.game-demo {
  width:100%; max-width:440px; max-height:92vh; overflow-y:auto;
  padding:var(--space-5); border-radius:var(--radius-xl);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-lg);
}
html[data-color-scheme="dark"] .game-demo {
  border-color:rgba(139,92,246,.35);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(139,92,246,.18), transparent 55%),
    linear-gradient(180deg, #1a1825, #0f0d14);
  box-shadow:0 24px 64px rgba(0,0,0,.55), 0 0 40px rgba(139,92,246,.12);
}
html[data-color-scheme="dark"] .game-demo-overlay {
  background:rgba(0,0,0,.78);
}
.game-demo__hud {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-3);
  font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.08em;
  color:var(--text-muted); text-transform:uppercase;
}
.game-demo__score strong { color:var(--cyan); font-size:15px; }
.game-demo__title { font-family:var(--font-display); font-size:1.35rem; font-weight:800; margin-bottom:var(--space-2); }
.game-demo__lead { font-size:14px; color:var(--text-secondary); line-height:1.5; margin-bottom:var(--space-4); }
.game-demo__question { margin-bottom:var(--space-3); padding:var(--space-3); border-color:rgba(139,92,246,.25); }
.game-demo__q-label { display:block; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-hover); margin-bottom:6px; }
.game-demo__question p { font-size:15px; font-weight:600; margin:0; }
.game-demo__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); margin-bottom:var(--space-3); }
.game-demo__card {
  display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-3); text-align:left;
  border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-hover);
  color:var(--text); cursor:pointer; min-height:100px;
  transition:border-color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.game-demo__card:hover:not(:disabled) { border-color:rgba(139,92,246,.4); transform:translateY(-2px); }
.game-demo__card.correct { border-color:rgba(34,197,94,.5); background:rgba(34,197,94,.12); box-shadow:0 0 20px rgba(34,197,94,.15); }
.game-demo__card.wrong { border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.1); opacity:.85; }
.game-demo__card.picked:not(.correct):not(.wrong) { opacity:.55; }
.game-demo__card-tag { font-family:var(--font-display); font-size:11px; font-weight:800; color:var(--accent-hover); }
.game-demo__card-body { font-size:13px; line-height:1.4; }
.game-demo__feedback { font-size:14px; font-weight:600; padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); margin-bottom:var(--space-3); }
.game-demo__feedback.ok { background:var(--success-muted); color:#86efac; }
.game-demo__feedback.bad { background:var(--danger-muted); color:#fca5a5; }
.game-demo__roles { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); margin-bottom:var(--space-4); }
.game-demo__role {
  padding:var(--space-3); border-radius:var(--radius-md); border:1px solid var(--border);
  background:var(--surface-active); text-align:center;
}
.game-demo__role strong { display:block; font-size:13px; margin-bottom:4px; color:var(--accent-hover); }
.game-demo__role span { font-size:11px; color:var(--text-muted); }
.game-demo__actions { display:flex; gap:var(--space-2); justify-content:flex-end; align-items:center; }
.game-demo__actions .btn-primary { flex:1; min-height:48px; }
.btn-with-icon { display:inline-flex; align-items:center; gap:6px; }

/* ── Profile hero card ── */
.profile-hero-card { position:relative; border-color:rgba(139,92,246,.22)!important; }
.profile-hero-card::before { opacity:1; height:4px; }
.profile-hero-badge {
  position:absolute; top:var(--space-3); left:var(--space-3); z-index:3;
  font-family:var(--font-display); font-size:9px; font-weight:800; letter-spacing:.14em;
  color:rgba(255,255,255,.85); background:rgba(0,0,0,.35); padding:4px 8px; border-radius:var(--radius-full);
  border:1px solid rgba(255,255,255,.12);
}
.profile-stats-row .profile-stat {
  border:1px solid var(--border); background:linear-gradient(180deg, var(--surface-hover), var(--surface));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.profile-stats-row .profile-stat .v { font-family:var(--font-display); font-size:1.25rem; color:var(--accent-hover); }

/* ── Header room code ── */
.header-room-code {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1px;
  margin-right:var(--space-1);
}
.header-room-code__label {
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.header-room-code__value {
  border:none;
  cursor:pointer;
  padding:4px 10px;
  border-radius:var(--radius-sm);
  background:rgba(0,0,0,.35);
  border:1px solid rgba(251,146,60,.35);
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  letter-spacing:.12em;
  color:#fdba74;
  transition:background .15s ease, box-shadow .15s ease;
}
.header-room-code__value:hover {
  background:rgba(251,146,60,.12);
  box-shadow:0 0 16px rgba(251,146,60,.2);
}

/* ── Matchmaking — animasyonlu tarama ── */
body.matchmaking-active::after { content:none; }
body.matchmaking-active .app-footer { display:none; }
/* ── Lobby ── */
.lobby-shell {
  display:flex; flex-direction:column; gap:var(--space-4); margin:0 auto; position:relative;
  width:100%; max-width:min(520px, 100%); overflow-x:hidden; box-sizing:border-box;
}
#screenLobby.screen { overflow-x:hidden; max-width:100%; }
.lobby-phase__title {
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:800;
  text-align:center;
  margin-bottom:var(--space-2);
}
.lobby-phase__sub {
  text-align:center;
  font-size:14px;
  color:var(--text-secondary);
  margin-bottom:var(--space-4);
  line-height:1.45;
}
.lobby-panel-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3);
}
.lobby-panel-card {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:var(--space-3);
  min-height:108px;
  border-radius:var(--radius-md);
  border:1.5px solid var(--border);
  background:rgba(0,0,0,.3);
  cursor:pointer;
  text-align:left;
  color:inherit;
  overflow:hidden;
  transition:border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.lobby-panel-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, color-mix(in srgb, var(--panel-accent) 18%, transparent), transparent 60%);
  opacity:0;
  transition:opacity .2s ease;
}
.lobby-panel-card:hover { border-color:rgba(255,255,255,.18); transform:translateY(-2px); }
.lobby-panel-card:hover::before { opacity:1; }
.lobby-panel-card.is-picked {
  border-color:var(--panel-accent, var(--accent));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--panel-accent) 40%, transparent), 0 0 24px color-mix(in srgb, var(--panel-accent) 25%, transparent);
}
.lobby-panel-card.is-picked::before { opacity:1; }
.lobby-panel-card.is-picked-host::after,
.lobby-panel-card.is-picked-guest::after {
  position:absolute;
  top:8px;
  right:8px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:2px 6px;
  border-radius:var(--radius-full);
  background:rgba(0,0,0,.5);
}
.lobby-panel-card.is-picked-host::after { content:'Ev sahibi'; color:#fdba74; }
.lobby-panel-card.is-picked-guest::after { content:'Misafir'; color:#c4b5fd; }
.lobby-panel-card__tag {
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--panel-accent, var(--accent-hover));
  position:relative;
}
.lobby-panel-card__title { font-size:14px; font-weight:700; position:relative; }
.lobby-panel-card__desc { font-size:11px; line-height:1.4; color:var(--text-secondary); position:relative; }
.lobby-panel-status {
  margin-top:var(--space-4);
  text-align:center;
  font-size:13px;
  font-weight:600;
  color:var(--text-muted);
  min-height:1.2em;
}
.lobby-panel-intro {
  padding:var(--space-5) var(--space-4);
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.35);
  text-align:center;
  box-shadow:0 0 40px color-mix(in srgb, var(--panel-accent, #8b5cf6) 15%, transparent);
}
.lobby-panel-intro__tag {
  display:inline-block;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--panel-accent, var(--accent-hover));
  margin-bottom:var(--space-2);
}
.lobby-panel-intro__title {
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:800;
  margin-bottom:var(--space-2);
}
.lobby-panel-intro__desc {
  font-size:14px;
  color:var(--text-secondary);
  line-height:1.5;
  margin-bottom:var(--space-4);
}
.lobby-panel-intro__samples {
  list-style:none;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px;
  color:var(--text);
}
.lobby-panel-intro__samples li {
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-sm);
  border-left:3px solid var(--panel-accent, var(--accent));
  background:rgba(0,0,0,.25);
}
.lobby-panel-suggestions { margin-bottom:var(--space-3); }
.lobby-panel-suggestions__label {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-muted);
  margin-bottom:var(--space-2);
}
.lobby-panel-suggestions__chips { display:flex; flex-wrap:wrap; gap:8px; }
.lobby-suggestion-chip {
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  padding:6px 12px;
  font-size:12px;
  background:rgba(0,0,0,.25);
  color:var(--text-secondary);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.lobby-suggestion-chip:hover {
  color:var(--text);
  border-color:rgba(251,146,60,.35);
  background:rgba(251,146,60,.08);
}
.room-mini__actions--full { width:100%; justify-content:flex-end; }
body.lobby-panel-phase .lobby-arena-badge,
body.lobby-intro-phase .lobby-arena-badge { display:none; }
.lobby-arena-badge {
  font-family:var(--font-display); font-size:10px; font-weight:800; letter-spacing:.16em;
  color:var(--cyan); text-align:center; text-shadow:0 0 16px rgba(34,211,238,.35);
}
.room-arena {
  position:relative; overflow:hidden;
  border-color:rgba(139,92,246,.28)!important;
  background:linear-gradient(165deg, rgba(26,24,37,.98), rgba(15,13,20,.95))!important;
  box-shadow:0 12px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.room-arena::before { opacity:1; }
.room-mini__glow {
  position:absolute; inset:-40% -20% auto; height:60%; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(139,92,246,.2), transparent 70%);
}
.room-mini { padding:var(--space-4); position:relative; z-index:1; }
.lobby-start {
  border:1px solid rgba(139,92,246,.25);
  background:linear-gradient(180deg, rgba(139,92,246,.08), transparent);
}
.lobby-start .btn-primary { width:100%; min-height:52px; font-size:16px; letter-spacing:.02em; }
.lobby-section { border-color:rgba(139,92,246,.15); }
.lobby-section summary { font-family:var(--font-display); font-size:13px; }
.room-player-chip {
  background:linear-gradient(135deg, rgba(255,255,255,.04), transparent);
  border-color:rgba(139,92,246,.15);
}
.room-player-chip .player-dot.live { background:var(--success); box-shadow:0 0 8px rgba(34,197,94,.5); }
.room-mini__top { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); }
.room-mini__code { display:flex; flex-direction:column; gap:2px; }
.room-mini__label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.room-mini__actions { display:flex; gap:var(--space-2); flex-shrink:0; }
.room-code {
  font-family:var(--font-display); font-size:24px; font-weight:800; letter-spacing:.12em;
  color:var(--accent-hover); text-shadow:0 0 20px rgba(139,92,246,.35);
}
.room-players-compact { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); margin-bottom:var(--space-3); }
.room-player-chip { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); background:var(--surface-hover); border:1px solid var(--border); border-radius:var(--radius-sm); min-width:0; }
.room-player-chip__body { min-width:0; display:flex; flex-direction:column; gap:1px; }
.room-player-chip .player-name { font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.room-player-chip .player-role { font-size:11px; color:var(--text-muted); }
.player-dot { width:10px; height:10px; border-radius:var(--radius-full); flex-shrink:0; background:var(--text-muted); }
.room-invite-mini { border:1px dashed var(--border); border-radius:var(--radius-sm); margin-bottom:var(--space-3); }
.room-invite-mini summary { padding:var(--space-2) var(--space-3); font-size:13px; font-weight:600; cursor:pointer; list-style:none; color:var(--text-secondary); }
.room-invite-mini summary::-webkit-details-marker { display:none; }
.room-invite-mini__body { padding:0 var(--space-3) var(--space-3); }
.voice-room--compact { margin-top:0; padding:var(--space-2) var(--space-3); }
.lobby-ready-banner { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); margin-bottom:var(--space-3); background:var(--success-muted); border:1px solid rgba(34,197,94,.25); border-radius:var(--radius-sm); font-size:13px; }
.lobby-ready-banner__icon { width:28px; height:28px; border-radius:var(--radius-full); background:var(--success); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.guesser-q-list { list-style:none; margin:var(--space-3) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.guesser-q-item { display:flex; align-items:flex-start; gap:var(--space-2); padding:var(--space-2) var(--space-3); background:var(--surface-hover); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; line-height:1.4; }
.guesser-q-num { flex-shrink:0; width:22px; height:22px; border-radius:var(--radius-full); background:var(--accent-muted); color:var(--accent-hover); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.guesser-q-text { flex:1; min-width:0; word-break:break-word; }
.guesser-q-remove { border:none; background:transparent; color:var(--text-muted); cursor:pointer; font-size:18px; line-height:1; padding:0 2px; }
.guesser-q-remove:hover { color:var(--danger); }
.answerer-q-wait { margin-top:var(--space-2); }
.invite-picker { display:flex; flex-direction:column; gap:var(--space-1); max-height:140px; overflow-y:auto; margin-top:var(--space-2); }
.pending-invite { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); background:var(--surface-hover); border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:var(--space-2); flex-wrap:wrap; }

/* ── Lobby roster & roles ── */
.lobby-roster { margin-bottom:var(--space-3); }
.room-players-compact {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2);
}
.room-player-chip {
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-3);
  background:var(--surface-hover);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  min-width:0;
  border-top:3px solid transparent;
  transition:border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}
.room-player-chip--you { box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.room-player-chip.role--answerer { border-top-color:#22d3ee; }
.room-player-chip.role--guesser { border-top-color:#a78bfa; }
.room-player-chip--empty { opacity:.72; border-style:dashed; }
.room-player-chip__avatar {
  width:40px; height:40px; flex-shrink:0; border-radius:var(--radius-full); overflow:hidden;
  position:relative; contain:paint layout;
}
.room-player-chip__you {
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-hover); margin-left:4px;
}
.lobby-role-badge.role--answerer { color:#22d3ee; }
.lobby-role-badge.role--guesser { color:#c4b5fd; }

.role-toggle { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
.role-btn {
  position:relative; flex:1; display:flex; flex-direction:column; align-items:center;
  padding:var(--space-3) var(--space-2) calc(var(--space-3) - 2px);
  text-align:center; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  border:1px solid var(--border);
  border-top:3px solid transparent;
  background:linear-gradient(180deg, var(--surface-hover), var(--surface));
  color:var(--text); border-radius:var(--radius-md);
  font-weight:600; font-size:14px; cursor:pointer;
  transition:border-color .28s ease, box-shadow .28s ease, transform .28s ease, background .28s ease;
}
.role-btn__title { display:block; font-weight:700; width:100%; text-align:center; }
.role-btn__status {
  display:block; margin-top:4px; font-size:10px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted);
  width:100%; text-align:center;
}
.role-btn .role-desc { font-size:11px; text-align:center; margin-top:6px; }
.role-btn__status.hidden { display:none; }
.role-btn.active[data-role="answerer"] {
  border-top-color:#22d3ee;
  background:linear-gradient(180deg, color-mix(in srgb, #22d3ee 18%, var(--surface)), var(--surface));
  box-shadow:0 8px 24px color-mix(in srgb, #22d3ee 18%, transparent);
  transform:translateY(-1px);
}
.role-btn.active[data-role="guesser"] {
  border-top-color:#a78bfa;
  background:linear-gradient(180deg, color-mix(in srgb, #a78bfa 18%, var(--surface)), var(--surface));
  box-shadow:0 8px 24px color-mix(in srgb, #a78bfa 18%, transparent);
  transform:translateY(-1px);
}
.role-btn.active .role-btn__status { color:var(--text); }
.role-btn.is-peer-choice:not(.active) {
  border-color:color-mix(in srgb, var(--accent) 35%, var(--border));
}
.role-desc { font-size:12px; color:var(--text-muted); margin-top:var(--space-1); font-weight:400; }

.lobby-slide-panel {
  overflow:hidden; max-height:0; opacity:0;
  width:100%; max-width:100%; box-sizing:border-box;
  transform:translateY(-8px);
  transition:max-height .42s cubic-bezier(.22, 1, .36, 1), opacity .32s ease, transform .36s cubic-bezier(.22, 1, .36, 1);
  pointer-events:none;
}
.lobby-slide-panel.is-open {
  max-height:min(560px, 72vh); opacity:1; transform:translateY(0); pointer-events:auto;
  overflow-x:hidden; overflow-y:auto;
}
#guesserQPanel.lobby-slide-panel.is-open { max-height:min(480px, 65vh); }
.lobby-section .acc-body {
  width:100%; max-width:100%; overflow-x:hidden; box-sizing:border-box;
}
.lobby-section .acc-body.acc-body--panel-open { overflow-x:hidden; }
.lobby-slide-panel.hidden:not(.is-open) { display:none; }
.lobby-slide-panel--nested.is-open { max-height:240px; }
.ghost-panel.lobby-slide-panel.is-open { margin-top:var(--space-3); padding:var(--space-3); }
.ghost-panel {
  background:var(--surface-hover); border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.ghost-panel label { display:inline-flex; align-items:center; gap:var(--space-2); color:var(--text); cursor:pointer; }
.ghost-panel__hint { margin:.35rem 0 0; font-size:12px; }
.ghost-panel__opts { margin-top:var(--space-3); }
.custom-q-row { display:flex; gap:var(--space-2); margin-top:var(--space-2); width:100%; max-width:100%; min-width:0; }
.custom-q-row input { flex:1; min-width:0; max-width:100%; }
.guesser-q-list { max-width:100%; overflow-x:hidden; }
.guesser-q-text { overflow-wrap:anywhere; word-break:break-word; }

/* ── Game HUD ── */
.game-stage { max-width:640px!important; position:relative; padding-top:var(--space-2)!important; }
.game-arena-shell { position:relative; width:100%; }
.game-arena-frame {
  position:relative; padding:var(--space-3); border-radius:var(--radius-xl);
  border:1px solid rgba(99,102,241,.18);
  background:var(--surface);
  box-shadow:var(--shadow-md);
}
.game-arena-frame::before,.game-arena-frame::after {
  content:''; position:absolute; width:20px; height:20px; pointer-events:none; opacity:.55;
  border:2px solid var(--accent);
}
.game-arena-frame::before { top:10px; left:10px; border-right:none; border-bottom:none; border-radius:4px 0 0 0; }
.game-arena-frame::after { bottom:10px; right:10px; border-left:none; border-top:none; border-radius:0 0 4px 0; }
.game-chat-fab {
  position:fixed; right:max(16px, env(safe-area-inset-right));
  bottom:calc(var(--space-4) + env(safe-area-inset-bottom,0)); z-index:40;
  padding:0 var(--space-4); height:44px; border-radius:var(--radius-full);
  background:linear-gradient(135deg, var(--accent), #7c3aed); color:#fff;
  font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.04em;
  box-shadow:0 4px 20px rgba(139,92,246,.45); border:1px solid rgba(255,255,255,.12);
  cursor:pointer; display:none; align-items:center; justify-content:center;
  transition:background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
#screenGame.active .game-chat-fab { display:flex; }
.game-chat-fab.active { background:var(--surface-active); box-shadow:0 2px 12px rgba(0,0,0,.25); transform:scale(.96); }
.game-peer-fab {
  position:fixed; right:max(16px, env(safe-area-inset-right));
  bottom:calc(56px + var(--space-4) + env(safe-area-inset-bottom,0)); z-index:40;
  padding:0 var(--space-3); height:40px; border-radius:var(--radius-full);
  background:var(--surface); color:var(--text);
  font-size:12px; font-weight:700; letter-spacing:.02em;
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-md); cursor:pointer;
  display:none; align-items:center; justify-content:center;
}
.game-peer-fab:not(.hidden) { display:flex; }
.profile-tap { cursor:pointer; }
.profile-tap:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); }
.match-card--opp.profile-tap:not([data-empty="true"]) .match-card__name {
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--cyan) 55%, transparent);
}
.match-card--opp.profile-tap:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.game-chat-drawer {
  position:fixed; right:max(12px, env(safe-area-inset-right)); bottom:calc(128px + env(safe-area-inset-bottom)); z-index:39;
  width:min(320px, calc(100vw - 24px)); border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--bg-elevated); box-shadow:0 8px 32px rgba(0,0,0,.4); overflow:hidden;
  opacity:0; transform:translateY(12px) scale(.98); pointer-events:none;
  transition:opacity .28s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
}
.game-chat-drawer.is-open {
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}
.game-chat-drawer.hidden:not(.is-open) { display:none; }
.game-chat-drawer__head { display:flex; align-items:center; justify-content:space-between; padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border); font-size:13px; }
.game-chat-box { height:220px; border:none; border-radius:0; }
@keyframes slideUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.game-hud { display:flex; flex-direction:column; gap:var(--space-4); }
.hud-top {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-md);
  background:rgba(0,0,0,.25); border:1px solid var(--border);
}
.hud-progress { flex:1; height:8px; background:rgba(255,255,255,.06); border-radius:var(--radius-full); overflow:hidden; border:1px solid rgba(255,255,255,.06); }
.hud-progress-fill {
  height:100%; width:0;
  background:linear-gradient(90deg, var(--accent), var(--cyan));
  border-radius:var(--radius-full); transition:width .5s var(--ease);
  box-shadow:0 0 12px rgba(139,92,246,.5);
}
.hud-score {
  font-family:var(--font-display); font-size:26px; font-weight:800; color:var(--gold);
  text-align:right; min-width:52px; text-shadow:0 0 16px rgba(251,191,36,.35);
}
.hud-score small { display:block; font-size:9px; font-weight:700; letter-spacing:.12em; color:var(--text-muted); font-family:var(--font); }
.game-question-card {
  text-align:center; padding:var(--space-5);
  background:linear-gradient(180deg, rgba(31,31,35,.95), rgba(24,24,27,.85));
  border:1px solid rgba(139,92,246,.2); border-radius:var(--radius-lg);
  box-shadow:0 8px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
}
.game-question-card .round-tag,.round-tag {
  display:inline-block; font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cyan);
  padding:4px 10px; margin-bottom:var(--space-3);
  background:rgba(6,182,212,.1); border:1px solid rgba(6,182,212,.25); border-radius:var(--radius-full);
}
.game-question-card h2 { font-size:17px; font-weight:600; line-height:1.45; }
.vs-divider {
  display:flex; align-items:center; gap:var(--space-3); margin:var(--space-2) 0;
  color:var(--accent-hover); font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:.14em;
}
.vs-divider::before,.vs-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.answers-grid { display:grid; grid-template-columns:1fr; gap:var(--space-3); }
@media (min-width:520px) { .answers-grid { grid-template-columns:1fr 1fr; } }
.answer-card {
  display:flex; flex-direction:column; min-height:130px; padding:var(--space-4);
  background:var(--surface);
  border:2px solid var(--border); border-radius:var(--radius-lg);
  cursor:pointer; position:relative; overflow:hidden;
  transition:border-color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.answer-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--card-accent,var(--accent)); box-shadow:0 0 12px var(--card-accent,var(--accent)); }
.answer-card:hover:not(.picked) {
  border-color:var(--border-strong); transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.35), 0 0 20px rgba(139,92,246,.08);
}
.answer-card .label { font-family:var(--font-display); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--card-accent,var(--text-muted)); margin-bottom:var(--space-2); }
.answer-card .body { flex:1; font-size:14px; line-height:1.45; white-space:pre-wrap; }
.answer-card.picked { border-color:var(--accent); pointer-events:none; }
.answer-card.correct { --card-accent:var(--success); border-color:var(--success); }
.answer-card.wrong { --card-accent:var(--danger); border-color:var(--danger); }
.answer-card.card-human { --card-accent:var(--cyan); }
.answer-card.card-bot { --card-accent:var(--pink); }
.style-hint { background:var(--accent-subtle); border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--space-3); font-size:14px; color:var(--text-secondary); }
.style-hint strong { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-hover); margin-bottom:var(--space-1); }
.feedback { text-align:center; padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); font-weight:600; font-size:14px; }
.feedback.ok { background:var(--success-muted); border:1px solid rgba(34,197,94,.25); color:#86efac; }
.feedback.bad { background:var(--danger-muted); border:1px solid rgba(239,68,68,.22); color:#fca5a5; }

/* ── Write / wait / ghost ── */
.write-stage { max-width:560px; margin:0 auto; }
.write-hero { text-align:center; margin-bottom:var(--space-5); padding-bottom:var(--space-4); border-bottom:1px solid var(--border); }
.write-badge { display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-hover); background:var(--accent-muted); padding:4px 10px; border-radius:var(--radius-full); margin-bottom:var(--space-2); }
.write-hero h2 { margin:0 0 var(--space-2); }
.write-q { margin-bottom:var(--space-4); }
.write-q-card { padding:var(--space-3); background:var(--surface-hover); border:1px solid var(--border); border-radius:var(--radius-md); }
.write-q .q-label { font-weight:600; font-size:14px; margin-bottom:var(--space-2); line-height:1.45; }
.write-q-badge { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; color:var(--text-muted); margin-right:var(--space-2); }
.write-q textarea { min-height:72px; resize:vertical; }
.ghost-mission-banner { background:var(--warning-muted); border:1px solid rgba(234,179,8,.3); border-radius:var(--radius-sm); padding:var(--space-3); margin-bottom:var(--space-4); font-size:14px; }
.ghost-mission-banner strong { color:var(--gold); }
.wait-icon { text-align:center; padding:var(--space-10) var(--space-4); color:var(--text-secondary); }
.spinner { width:40px; height:40px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:var(--radius-full); animation:spin .8s linear infinite; margin:0 auto var(--space-4); }
.prep-list { display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-4); }
.prep-item { display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-3); background:var(--surface-hover); border-radius:var(--radius-sm); border:1px solid var(--border); font-size:13px; }
.prep-dot { width:8px; height:8px; border-radius:var(--radius-full); background:var(--text-muted); margin-top:6px; flex-shrink:0; }
.prep-dot.ok { background:var(--success); }
.prep-dot.wait { background:var(--warning); animation:pulse 1.2s infinite; }

/* ── Results ── */
#screenResult.screen-result {
  padding-left:max(var(--space-3),env(safe-area-inset-left));
  padding-right:max(var(--space-3),env(safe-area-inset-right));
  padding-bottom:calc(var(--space-8) + env(safe-area-inset-bottom,0));
}
.result-panel {
  width:100%; max-width:440px; margin:0 auto; display:flex; flex-direction:column; gap:var(--space-4);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-4); overflow:hidden;
  opacity:0; transform:translateY(16px) scale(.98);
  transition:opacity .45s var(--ease), transform .55s cubic-bezier(.22,1,.36,1);
}
.result-panel--show { opacity:1; transform:none; }

/* ── Result arena & characters ── */
.result-arena {
  position:relative; display:flex; flex-direction:column; gap:var(--space-2);
  min-height:280px; padding:var(--space-3); border-radius:var(--radius-md); overflow:hidden;
  background:radial-gradient(ellipse 100% 70% at 50% 100%, rgba(139,92,246,.2), transparent 60%),
    linear-gradient(180deg, rgba(6,182,212,.06), rgba(9,9,11,.4));
  border:1px solid var(--border);
}
.result-panel--guesser-won .result-arena {
  background:radial-gradient(ellipse 100% 70% at 50% 100%, rgba(34,197,94,.14), transparent 60%),
    linear-gradient(180deg, rgba(6,182,212,.08), rgba(9,9,11,.35));
}
.result-panel--guesser-lost .result-arena {
  background:radial-gradient(ellipse 100% 70% at 50% 100%, rgba(236,72,153,.14), transparent 60%),
    linear-gradient(180deg, rgba(139,92,246,.06), rgba(9,9,11,.4));
}
.result-arena__burst {
  position:absolute; inset:-50%; pointer-events:none; z-index:0;
  background:conic-gradient(from 0deg, transparent, rgba(139,92,246,.1), transparent, rgba(6,182,212,.08), transparent);
  animation:resultBurstSpin 10s linear infinite; opacity:.55;
}
.result-panel--perfect .result-arena__burst { opacity:.85; animation-duration:5s; }
.result-arena__stage {
  position:relative; z-index:1; flex:1; min-height:240px; width:100%;
  border-radius:var(--radius-sm); overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 50% 80%, rgba(139,92,246,.12), transparent);
}
.result-arena__stage canvas { display:block; width:100%!important; height:100%!important; }

@keyframes resultBurstSpin { to { transform:rotate(360deg); } }
.result-panel__score--pop { animation:scorePop .55s cubic-bezier(.34,1.56,.64,1); }
.result-panel__head { padding-bottom:var(--space-3); border-bottom:1px solid var(--border); animation:resultHeadIn .4s ease .15s both; }
.result-panel__head--win { border-bottom-color:rgba(34,197,94,.35); }
.result-panel__head--mid { border-bottom-color:rgba(234,179,8,.35); }
.result-panel__head--lose { border-bottom-color:rgba(239,68,68,.25); }
.result-panel__tag { display:block; font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--text-muted); margin-bottom:var(--space-2); }
.result-panel__title { margin:0 0 var(--space-1); font-size:clamp(1.25rem,5vw,1.5rem); font-weight:700; line-height:1.2; }
.result-panel__sub { margin:0; color:var(--text-secondary); font-size:14px; line-height:1.45; }
.result-panel__hero {
  display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-4);
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-md);
  animation:resultHeadIn .45s ease .25s both;
}
.result-panel__stats { animation:resultHeadIn .45s ease .35s both; }
.result-panel__rounds-wrap { animation:resultHeadIn .45s ease .45s both; }
@keyframes resultHeadIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.result-panel__score-block { text-align:center; }
.result-panel__score { display:block; font-size:clamp(2.5rem,12vw,3.25rem); font-weight:700; line-height:1; letter-spacing:-.03em; }
.result-panel__score-label { display:block; font-size:12px; color:var(--text-muted); margin-top:var(--space-1); }
.result-panel__accuracy { min-width:0; width:100%; }
.result-panel__accuracy-row { display:flex; justify-content:space-between; gap:var(--space-2); font-size:12px; color:var(--text-secondary); margin-bottom:var(--space-2); }
.result-panel__accuracy-row span:first-child { font-weight:700; color:var(--text); }
.result-panel__bar { height:8px; background:var(--surface-hover); border-radius:var(--radius-full); overflow:hidden; border:1px solid var(--border); }
.result-panel__bar-fill { height:100%; width:0; background:var(--accent); border-radius:var(--radius-full); transition:width .55s ease; }
.result-panel--win .result-panel__bar-fill { background:var(--success); }
.result-panel--mid .result-panel__bar-fill { background:var(--warning); }
.result-panel--lose .result-panel__bar-fill { background:var(--danger); }
.result-panel__stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); }
.result-panel__stats--triple { grid-template-columns:repeat(3,minmax(0,1fr)); }
.result-panel__stat { padding:var(--space-3); background:var(--surface-hover); border:1px solid var(--border); border-radius:var(--radius-sm); text-align:center; min-width:0; }
.result-panel__stat-n { display:block; font-size:1.25rem; font-weight:700; line-height:1.1; }
.result-panel__stat-l { display:block; font-size:11px; color:var(--text-muted); margin-top:4px; line-height:1.25; }
.result-panel__rounds-wrap { display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
.result-panel__section-title { margin:0; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.result-panel__rounds { display:flex; flex-direction:column; gap:var(--space-2); }
.result-panel__round {
  display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:var(--space-2) var(--space-3);
  align-items:start; padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-elevated); animation:resultRowIn .35s ease both;
}
.result-panel__round--ok { border-left:3px solid var(--success); }
.result-panel__round--fail { border-left:3px solid var(--danger); }
.result-panel__round--ghost { background:var(--warning-muted); }
.result-panel__round-num {
  width:28px; height:28px; border-radius:var(--radius-full); background:var(--surface-active);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--text-secondary);
}
.result-panel__round-body { min-width:0; }
.result-panel__round-q { margin:0; font-size:13px; line-height:1.45; color:var(--text); word-break:break-word; }
.result-panel__round-tag { display:inline-block; margin-top:var(--space-1); font-size:10px; font-weight:700; color:var(--gold); }
.result-panel__round-verdict { font-size:11px; font-weight:700; white-space:nowrap; padding-top:4px; }
.result-panel__round--ok .result-panel__round-verdict { color:var(--success); }
.result-panel__round--fail .result-panel__round-verdict { color:var(--danger); }
.result-panel__ghost { font-size:13px; color:var(--text-secondary); padding:var(--space-3); background:var(--surface-hover); border-radius:var(--radius-sm); border:1px solid var(--border); margin:0; }
.result-panel__share { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.result-panel__share summary { padding:var(--space-3); cursor:pointer; font-size:13px; font-weight:600; list-style:none; }
.result-panel__share summary::-webkit-details-marker { display:none; }
.result-panel__share-body { padding:0 var(--space-3) var(--space-3); display:flex; flex-direction:column; gap:var(--space-3); }
.result-panel__share-body .share-box { margin:0; }
.result-panel__cta { width:100%; min-height:48px; }
.share-box { background:var(--surface-hover); border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--space-3); font-size:13px; white-space:pre-wrap; word-break:break-word; }
@keyframes resultRowIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (min-width:400px) {
  .result-panel__hero { flex-direction:row; align-items:center; }
  .result-panel__score-block { flex:0 0 96px; text-align:left; }
  .result-panel__accuracy { flex:1; }
}
@media (max-width:360px) {
  .result-panel__stats--triple { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .result-panel__stats--triple .result-panel__stat:last-child { grid-column:1/-1; }
}

/* ── Groups & discovery ── */
.group-header-card {
  display:flex;
  gap:var(--space-4);
  align-items:flex-start;
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-md);
}
.group-header-card::before { display:none; }
.group-avatar { width:56px; height:56px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:22px; flex-shrink:0; color:#fff; overflow:hidden; position:relative; }
.group-avatar.discovery-avatar,.discovery-avatar { width:40px; height:40px; font-size:16px; border-radius:var(--radius-full); }
.member-chip.avatar { width:28px; height:28px; min-width:28px; padding:0; border:none; font-size:13px; border-radius:var(--radius-full); overflow:hidden; cursor:pointer; flex-shrink:0; }
.group-meta { flex:1; min-width:0; }
.group-meta h2 { font-size:16px; margin:0 0 var(--space-1); }
.group-visibility { display:inline-block; font-size:10px; font-weight:600; padding:2px var(--space-2); border-radius:var(--radius-sm); text-transform:uppercase; letter-spacing:.04em; background:var(--surface-active); color:var(--text-muted); margin-bottom:var(--space-2); }
.group-visibility.public { color:#86efac; background:rgba(34,197,94,.12); }
.group-visibility.private { color:#fcd34d; background:rgba(245,158,11,.12); }
.group-visibility.closed { color:#fca5a5; background:rgba(239,68,68,.12); }
.member-strip { display:flex; gap:var(--space-1); flex-wrap:wrap; margin-top:var(--space-2); }
.member-chip { width:32px; height:32px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; border:2px solid var(--bg); cursor:pointer; }
.discovery-list { display:flex; flex-direction:column; gap:var(--space-1); }
.discovery-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface-hover); cursor:pointer; text-align:left; width:100%; color:inherit; transition:background var(--duration) var(--ease); }
.discovery-item:hover { background:var(--surface-active); }

/* ── Voice room ── */
.voice-room { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--success-muted); border:1px solid rgba(34,197,94,.2); border-radius:var(--radius-md); }
.voice-room.live { border-color:rgba(34,197,94,.4); }
.voice-dot { width:8px; height:8px; border-radius:var(--radius-full); background:var(--text-muted); flex-shrink:0; }
.voice-dot.live { background:var(--success); animation:pulse 1.4s infinite; }
.voice-room-info { flex:1; min-width:0; }
.voice-room-info strong { display:block; font-size:14px; }
.voice-room-info span { font-size:12px; color:var(--text-muted); }

/* ── Accordion ── */
.accordion { border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:var(--space-3); overflow:hidden; background:var(--surface); }
.accordion summary {
  padding:var(--space-3) var(--space-4); cursor:pointer; font-weight:600; font-size:14px; list-style:none;
  display:flex; align-items:center; justify-content:space-between; user-select:none;
  min-height:48px; transition:background .2s ease, color .2s ease;
}
.accordion summary::-webkit-details-marker { display:none; }
.accordion summary::after { content:'+'; color:var(--text-muted); font-size:18px; font-weight:400; transition:transform .25s ease; }
.accordion[open] summary::after { content:'−'; transform:rotate(180deg); }
.accordion .acc-body {
  padding:0 var(--space-4) var(--space-4); border-top:1px solid var(--border);
  animation:accBodyIn .28s cubic-bezier(.22, 1, .36, 1);
}
@keyframes accBodyIn {
  from { opacity:0; transform:translateY(-6px); }
  to { opacity:1; transform:translateY(0); }
}

/* ── Forms ── */
.field { margin-bottom:var(--space-4); }
label { display:block; font-size:13px; font-weight:500; color:var(--text-secondary); margin-bottom:var(--space-2); }
input,textarea,select { width:100%; background:var(--surface-hover); border:1.5px solid var(--border-strong); color:var(--text); border-radius:var(--radius-sm); padding:var(--space-3); }
input::placeholder,textarea::placeholder { color:var(--text-muted); opacity:1; }
input:focus,textarea:focus,select:focus { outline:2px solid var(--accent); outline-offset:0; border-color:transparent; }
input::placeholder,textarea::placeholder { color:var(--text-muted); }
.row { display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; }
.color-grid,.color-row { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.consent-check { display:flex; align-items:flex-start; gap:var(--space-2); font-size:13px; color:var(--text-secondary); margin:var(--space-4) 0; }
.consent-check input { width:auto; margin-top:3px; accent-color:var(--accent); }

/* ── Buttons & utilities ── */
button {
  border:none; border-radius:var(--radius-md); padding:var(--space-3) var(--space-4);
  font-weight:600; cursor:pointer;
  transition:background var(--duration) var(--ease), transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
button:active:not(:disabled) { transform:scale(.98); }
button:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary {
  background:linear-gradient(135deg,#4338ca 0%,#6366f1 45%,#818cf8 100%);
  background-size:200% 200%;
  color:#fff;
  border:1px solid rgba(67,56,202,.25);
  box-shadow:0 4px 14px rgba(79,70,229,.32), inset 0 1px 0 rgba(255,255,255,.18);
  font-weight:700;
  letter-spacing:.01em;
}
.btn-primary:hover:not(:disabled) {
  background-position:100% 50%;
  box-shadow:0 6px 20px rgba(79,70,229,.4), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-secondary {
  background:var(--surface);
  color:var(--text);
  border:1.5px solid var(--border-strong);
  box-shadow:var(--shadow-md);
  font-weight:600;
}
.btn-secondary:hover:not(:disabled) {
  background:var(--surface-hover);
  border-color:rgba(139,92,246,.35);
  color:var(--accent-hover);
  box-shadow:0 2px 8px rgba(139,92,246,.15);
}
.btn-ghost {
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text-secondary);
  box-shadow:none;
}
.btn-ghost:hover:not(:disabled) {
  background:var(--surface-hover);
  border-color:rgba(139,92,246,.28);
  color:var(--accent-hover);
}
.btn-danger {
  background:linear-gradient(135deg,#dc2626,#ef4444);
  color:#fff;
  box-shadow:0 4px 12px rgba(220,38,38,.25);
}
.btn-sm { padding:var(--space-2) var(--space-3); font-size:13px; border-radius:var(--radius-sm); }
.hidden { display:none!important; }
.error-msg { color:#fca5a5; font-size:13px; margin-top:var(--space-2); font-weight:500; }
.success-msg { color:#86efac; font-size:13px; margin-top:var(--space-2); font-weight:500; }
.info-msg { color:var(--text-muted); font-size:13px; margin-top:var(--space-2); }

/* ── Splash & loading ── */
.splash-screen {
  position:fixed; inset:0; z-index:500;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(139,92,246,.25), transparent 60%),
    var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-5);
  transition:opacity .5s,visibility .5s;
}
.splash-screen.fade-out,
.splash-screen.is-gone {
  opacity:0!important; visibility:hidden!important; pointer-events:none!important;
  display:none!important;
}
.splash-screen .app-logo--splash { flex-shrink:0; width:96px!important; height:96px!important; max-width:96px!important; max-height:96px!important; }
.splash-title {
  font-family:var(--font-display); font-size:13px; font-weight:800; letter-spacing:.2em;
  color:var(--text-secondary); text-shadow:0 0 24px rgba(139,92,246,.5);
}
.splash-bar { width:160px; height:3px; background:var(--surface-active); border-radius:var(--radius-full); overflow:hidden; }
.splash-bar-fill { height:100%; width:0; background:var(--accent); animation:splashLoad 1.1s var(--ease) forwards; }
.loading-overlay { position:fixed; inset:0; z-index:480; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-4); background:rgba(9,9,11,.88); backdrop-filter:blur(8px); font-size:14px; font-weight:600; color:var(--text-secondary); }
.loading-overlay::before { content:''; width:40px; height:40px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:var(--radius-full); animation:spin .8s linear infinite; }
.loading-overlay.hidden { display:none!important; }

/* ── Toast & banners ── */
.toast { position:fixed; bottom:calc(var(--dock-h) + var(--space-6) + env(safe-area-inset-bottom,0)); left:50%; transform:translateX(-50%); z-index:250; background:var(--surface); border:1px solid var(--border); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); font-size:14px; box-shadow:var(--shadow-lg); animation:fadeUp .25s var(--ease); max-width:calc(100% - var(--space-8)); }
.connection-banner { background:rgba(239,68,68,.12); color:#fca5a5; padding:var(--space-3) var(--space-4); text-align:center; font-size:14px; font-weight:500; border-bottom:1px solid rgba(239,68,68,.2); display:flex; align-items:center; justify-content:center; gap:var(--space-3); flex-wrap:wrap; }
.connection-banner.online { background:rgba(34,197,94,.12); color:#86efac; border-color:rgba(34,197,94,.22); }
.connection-banner button { background:var(--surface); color:inherit; border:1px solid var(--border-strong); padding:var(--space-1) var(--space-3); font-size:12px; font-weight:600; border-radius:var(--radius-sm); }
#fileProtocolWarn { background:rgba(245,158,11,.12); color:#fcd34d; padding:var(--space-3) var(--space-4); text-align:center; font-size:14px; font-weight:500; border-bottom:1px solid rgba(245,158,11,.2); }
.quota-banner { background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.2); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); margin-top:var(--space-3); font-size:13px; color:#fcd34d; font-weight:500; }

/* ── Footer & misc ── */
.app-footer {
  padding:var(--space-3) var(--space-4);
  padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom, 0));
  text-align:center;
  font-size:12px;
  color:var(--text-muted);
  background:transparent;
  border-top:none;
  margin-top:auto;
}
.legal-footer { display:flex; gap:var(--space-4); justify-content:center; flex-wrap:wrap; margin-top:var(--space-2); }
.legal-footer a { color:var(--text-muted); font-size:11px; text-decoration:none; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:999; padding:var(--space-2) var(--space-4); background:var(--accent); color:#fff; border-radius:var(--radius-sm); }
.skip-link:focus { left:var(--space-4); top:var(--space-4); }
.sfx-toggle { font-size:11px; padding:var(--space-1) var(--space-2); border-radius:var(--radius-full); border:1px solid var(--border); background:var(--surface-hover); color:var(--text-muted); cursor:pointer; }
.sfx-toggle.on { color:var(--accent-hover); border-color:rgba(139,92,246,.35); background:var(--accent-muted); }
.tutorial-steps { display:flex; flex-direction:column; gap:var(--space-3); margin:var(--space-4) 0; }
.tutorial-step { display:flex; gap:var(--space-3); padding:var(--space-3); background:var(--surface-hover); border:1px solid var(--border); border-radius:var(--radius-md); align-items:flex-start; }
.tutorial-step .step-n { width:28px; height:28px; border-radius:var(--radius-full); background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.tutorial-step h4 { font-size:14px; margin-bottom:var(--space-1); }
.tutorial-step p { font-size:13px; color:var(--text-secondary); line-height:1.45; }
.public-profile-modal { z-index:960; }
.public-profile-modal .modal-box {
  position:relative; z-index:1; pointer-events:auto;
  max-width:400px; max-height:min(92vh, 720px); overflow-y:auto;
  text-align:center; -webkit-overflow-scrolling:touch;
}
.public-profile-modal .modal-actions,
.public-profile-modal .btn-secondary,
.public-profile-modal .btn-primary { pointer-events:auto; position:relative; z-index:2; }
.public-profile-modal .big-avatar { margin:0 auto var(--space-4); }
.public-group-modal .modal-box { max-width:420px; }
select.round-select { width:auto; min-width:80px; }

/* ── Extended home & dashboard ── */
.home-compact .home-hero,
.home-compact .hero-cinematic {
  padding: var(--space-3) 0 var(--space-2);
}

.home-compact .home-hero__title,
.home-compact .hero-title {
  font-size: clamp(1.5rem, 6vw, 2rem);
}

.home-compact .player-dashboard {
  margin-bottom: var(--space-2);
}

.cta-grid__btn:hover,
.quick-btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  transform: translateY(-1px);
}

.cta-grid__btn--primary:hover,
.quick-btn.primary:hover {
  background: var(--accent-muted);
}

.cta-grid__btn:active,
.quick-btn:active {
  transform: scale(0.98);
}

.dash-welcome {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dash-meta span {
  padding: var(--space-1) var(--space-2);
  background: var(--surface-active);
  border-radius: var(--radius-sm);
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  padding: var(--space-3) var(--space-2);
}

.dash-stats span {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

.dash-stats label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dash-bio {
  padding: 0 var(--space-4) var(--space-4);
}

/* Legacy action cards */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 480px) {
  .quick-actions {
    grid-template-columns: repeat(3, 1fr);
  }
}

.action-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: border-color var(--duration) var(--ease),
              background var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}

.action-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-active);
}

.action-card.primary {
  background: var(--accent-subtle);
  border-color: rgba(139, 92, 246, 0.25);
}

.action-card .icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-active);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-hover);
}

.action-card .title {
  font-weight: 600;
  font-size: 14px;
}

.action-card .desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
}

.hero {
  text-align: center;
  padding: var(--space-6) 0 var(--space-2);
}

.hero h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.hero p {
  color: var(--text-secondary);
  max-width: 420px;
  margin: 0 auto;
  font-size: 14px;
}

.hero-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  justify-content: center;
}

.divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-4) 0;
}

/* ── Extended profile ── */
.profile-hero {
  text-align: center;
  padding: var(--space-5) 0 var(--space-3);
}

.profile-hero.enhanced {
  margin-top: 0;
  padding-top: var(--space-2);
  position: relative;
  z-index: 1;
}

.profile-hero .big-avatar {
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-3);
}

.profile-hero .profile-name {
  font-size: 20px;
}

.profile-hero .profile-tag {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-hover);
  margin-top: var(--space-1);
  cursor: pointer;
}

.photo-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.compact-hero {
  padding: var(--space-4) 0 var(--space-2);
  text-align: center;
}

.profile-compact-meta {
  flex: 1;
  min-width: 0;
}

.profile-compact-meta .profile-name {
  text-align: left;
  font-size: 17px;
}

.profile-compact-meta .profile-level {
  margin-top: var(--space-1);
  font-size: 11px;
}

.profile-compact-meta .profile-tag {
  text-align: left;
  margin-top: var(--space-1);
}

.profile-compact-top .big-avatar {
  width: 64px;
  height: 64px;
  margin: 0;
}

/* ── Extended lobby ── */
.lobby-compact .lobby-tip {
  display: none;
}

.lobby-section {
  margin-bottom: var(--space-2);
}

.lobby-tip {
  background: var(--accent-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.lobby-tip h3 {
  font-size: 14px;
  margin-bottom: var(--space-2);
  color: var(--accent-hover);
}

.lobby-tip ol {
  margin: var(--space-2) 0 0 var(--space-5);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.invite-compact .invite-picker {
  max-height: 120px;
}

.invite-picker .list-row,
.invite-picker .list-item {
  padding: var(--space-2) var(--space-3);
  border-bottom: none;
  border-radius: var(--radius-sm);
}

.q-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 220px;
  overflow-y: auto;
}

.q-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-hover);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease);
}

.q-item:hover {
  border-color: var(--border-strong);
}

.q-item.selected {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.q-item input {
  margin-top: 2px;
  accent-color: var(--accent);
}

/* ── Extended game & results ── */
.game-header {
  text-align: center;
  margin-bottom: var(--space-2);
}

.game-header h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.score-bar {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-3);
  background: var(--surface-hover);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 14px;
}

.score-bar strong {
  color: var(--accent-hover);
}

.result-hero.celebrate {
  animation: none;
}

#screenGame.active .game-hud {
  position: relative;
  z-index: 1;
}

.screen:not(.active) .panel,
.screen:not(.active) .card,
.screen:not(.active) .profile-stat {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ── Extended chat ── */
.chat-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.chat-msg {
  line-height: 1.35;
  word-break: break-word;
}

.voice-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-hover);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 13px;
}

/* ── Extended groups ── */
.group-info-form .field {
  margin-bottom: var(--space-3);
}

.group-chat-wrap h2 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.pending-invite .info {
  flex: 1;
  min-width: 120px;
}

/* ── Header extras ── */
.header-logo-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.header-settings-btn {
  min-width: auto;
}

.btn-icon-sm {
  padding: var(--space-2) var(--space-3);
  font-size: 12px;
}

#btnHeaderLeaveRoom {
  font-size: 12px;
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
}

/* ── Modal variants ── */
.modal-box[style*="max-width:440px"],
.modal-box[style*="max-width:480px"],
.modal-box[style*="max-width:420px"] {
  max-width: inherit;
}

.legal-footer a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.sfx-toggle.off {
  opacity: 0.55;
}

/* ── Dock hover polish ── */
.dock__item:hover,
.bottom-nav button:hover {
  color: var(--text-secondary);
}

.dock__item:focus-visible,
.bottom-nav button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Form focus ring consistency ── */
.appearance-option:focus-visible,
.palette-option:focus-visible,
.theme-picker__option:focus-visible,
.theme-chip:focus-visible,
.preset-btn:focus-visible,
.role-btn:focus-visible,
.discovery-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.color-swatch:hover {
  transform: scale(1.08);
}

.accordion summary:hover {
  background: var(--surface-hover);
}

/* ── Profile screen bottom padding for dock ── */
#screenProfile {
  padding-bottom: calc(var(--dock-h) + var(--space-10) + env(safe-area-inset-bottom, 0));
}

/* ── Animations & FX ── */
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@keyframes fadeUp { from { opacity:0; transform:translate(-50%,var(--space-2)); } to { opacity:1; transform:translate(-50%,0); } }
@keyframes sheetUp { from { transform:translateY(100%); } to { transform:none; } }
@keyframes splashLoad { to { width:100%; } }
@keyframes cardIn { from { opacity:0; transform:translateY(var(--space-2)); } to { opacity:1; transform:none; } }
@keyframes flipIn { from { opacity:0; transform:perspective(600px) rotateX(-8deg) scale(.96); } to { opacity:1; transform:none; } }
@keyframes correctPop { 0% { transform:scale(1); } 50% { transform:scale(1.03); } 100% { transform:scale(1); } }
@keyframes shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }
@keyframes scorePop { from { transform:scale(.5); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes scoreBump { 50% { transform:scale(1.12); } 100% { transform:scale(1); } }
@keyframes markIn { from { opacity:0; transform:scale(0); } to { opacity:1; transform:scale(1); } }
@keyframes confettiFall { 0% { opacity:1; transform:translate3d(0,0,0) rotate(0) scale(1); } 100% { opacity:0; transform:translate3d(var(--dx,0),105vh,0) rotate(var(--rot,540deg)) scale(.4); } }
@keyframes gameShake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-8px); } 40% { transform:translateX(8px); } 60% { transform:translateX(-5px); } 80% { transform:translateX(5px); } }
@keyframes questionPop { from { opacity:.6; transform:scale(.94); } to { opacity:1; transform:none; } }
@keyframes feedbackPop { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:none; } }
@keyframes codePulse { 0%,100% { opacity:1; } 50% { opacity:.7; } }
@keyframes screenIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes particleFly { to { opacity:0; transform:translate(var(--tx),var(--ty)) scale(0); } }

.answer-card { animation:cardIn .4s var(--ease) backwards; }
.answer-card:nth-child(1) { animation-delay:60ms; }
.answer-card:nth-child(2) { animation-delay:120ms; }
.answer-card.reveal { animation:flipIn .5s var(--ease) backwards; }
.answer-card.correct { animation:correctPop .45s var(--ease); }
.answer-card.wrong { animation:shake .4s var(--ease); }
.feedback.ok,.feedback.bad { animation:feedbackPop .35s var(--ease); }
.result-hero.celebrate .result-score { animation:scorePop .6s cubic-bezier(.34,1.56,.64,1); }
.round-mark { animation:markIn .35s cubic-bezier(.34,1.56,.64,1) both; }
.hud-score.fx-bump { animation:scoreBump .35s cubic-bezier(.34,1.56,.64,1); }
.game-hud.fx-shake { animation:gameShake .45s var(--ease); }
.game-question-card.fx-pop { animation:questionPop .5s cubic-bezier(.34,1.56,.64,1); }
.room-code.fx-pulse { animation:codePulse 2s var(--ease) infinite; }
.screen.active.screen-enter { animation:screenIn .18s cubic-bezier(.22,1,.36,1) both; }

.confetti-wrap { position:relative; height:0; overflow:visible; pointer-events:none; }
.confetti-burst { position:fixed; inset:0; pointer-events:none; z-index:440; overflow:hidden; }
.confetti-piece { position:absolute; top:-12px; width:8px; height:8px; border-radius:2px; animation:confettiFall 1.6s cubic-bezier(.25,.75,.5,1) forwards; }
.confetti-burst--big .confetti-piece { width:11px; height:11px; animation-duration:2.2s; }
#fxFlash { position:fixed; inset:0; pointer-events:none; z-index:450; opacity:0; transition:opacity .12s var(--ease); }
#fxFlash.on { opacity:1; }
#fxFlash.off { opacity:0; transition:opacity .45s var(--ease); }
.particle-dot { position:fixed; width:4px; height:4px; border-radius:var(--radius-full); pointer-events:none; z-index:430; animation:particleFly .6s var(--ease) forwards; }

/* ── Page chrome ── */
.screen-page-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-1); }
.screen-page-head h1 { font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--text); }
.list-stack { padding:0!important; overflow:hidden; }
.list-stack .empty-state,.list-stack .info-msg { padding:var(--space-6) var(--space-4); margin:0; }
.list-stack .discovery-list { gap:0; }
.list-stack .discovery-item { border:none; border-radius:0; border-bottom:1px solid var(--border); background:transparent; }
.list-stack .discovery-item:last-child { border-bottom:none; }
.list-stack .discovery-item:hover { background:var(--surface-hover); }
.profile-modal { max-width:400px; padding:20px; overflow:hidden; }
.profile-modal__body { text-align:center; padding-top:0; }
.public-profile-modal .profile-modal__body .profile-name { margin-top:0; }
.public-profile-modal .status-pill { margin-top:var(--space-2); }

/* ── Responsive & a11y ── */
@media (max-width:639px) {
  .app-bar,.app-header {
    padding-left:max(var(--space-3),env(safe-area-inset-left));
    padding-right:max(var(--space-3),env(safe-area-inset-right));
    gap:var(--space-1);
  }
  .app-bar__brand { min-width:0; flex:1; overflow:hidden; }
  .header-name { max-width:72px; font-size:12px; }
  .header-tagline { display:none; }
  .app-bar--flow .header-actions { flex-shrink:0; gap:6px; }
  .app-bar--flow #btnHeaderLeaveRoom { font-size:11px; padding:var(--space-2); max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .app-bar--game .app-bar__brand { flex:0; }
  .app-bar--game .header-profile-btn { display:none; }
  .btn-settings { width:36px; height:36px; }
  #btnOpenSettings { font-size:12px; padding:var(--space-2); }
  .screen {
    padding-left:max(var(--space-3),env(safe-area-inset-left));
    padding-right:max(var(--space-3),env(safe-area-inset-right));
  }
  main.has-nav .screen { padding-bottom:calc(var(--dock-h) + var(--space-10) + env(safe-area-inset-bottom,0)); }
  input,textarea,select { font-size:16px; }
  .cta-grid__label,.quick-btn .qb-label { font-size:11px; }
  .cta-grid__btn,.quick-btn { padding:var(--space-3) var(--space-1); min-height:72px; }
  .join-row.row.stretch { flex-direction:column; align-items:stretch; }
  .join-row.row.stretch button { width:100%; min-height:48px; }
  .lobby-shell { max-width:100%; width:100%; gap:var(--space-3); }
  #screenLobby.screen { padding-top:var(--space-3); }
  .lobby-section { margin-bottom:var(--space-3); }
  .lobby-section summary { padding:var(--space-3); font-size:14px; }
  .lobby-section .acc-body { padding:var(--space-3); }
  .lobby-roster { margin-bottom:var(--space-2); }
  .room-players-compact { grid-template-columns:1fr; gap:var(--space-3); }
  .room-player-chip { padding:var(--space-3) var(--space-4); min-height:64px; }
  .room-player-chip__avatar { width:44px; height:44px; }
  .room-player-chip .player-name { font-size:14px; }
  .room-player-chip .player-role { font-size:12px; line-height:1.35; }
  .room-mini__top { flex-wrap:wrap; }
  .role-toggle {
    display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2);
  }
  .role-btn {
    min-height:0; padding:var(--space-3) var(--space-2);
    touch-action:manipulation; -webkit-tap-highlight-color:transparent;
    align-items:center; text-align:center; min-width:0;
  }
  .role-btn__title { font-size:13px; text-align:center; }
  .role-btn__status { font-size:9px; margin-top:2px; text-align:center; }
  .role-btn .role-desc { display:none; }
  .role-btn:active { transform:scale(.97); }
  .role-btn.active { transform:none; }
  .lobby-roster.room-players-compact { min-height:72px; }
  .lobby-roster.room-players-compact.lobby-roster--dual { min-height:148px; }
  .lobby-start { padding:var(--space-4); }
  .lobby-start .btn-primary { min-height:52px; }
  .guesser-q-item { padding:var(--space-3); }
  .custom-q-row { flex-direction:column; align-items:stretch; gap:var(--space-2); }
  .custom-q-row button { width:100%; min-height:48px; }
  .ghost-panel.lobby-slide-panel.is-open { padding:var(--space-4); }
  .game-stage { padding-left:0; padding-right:0; }
  .game-hud { padding:0 var(--space-1); }
  .game-question-card h2 { font-size:1.15rem; }
  .answer-card { min-height:112px; padding:var(--space-4); }
  .game-chat-fab {
    right:max(var(--space-3),env(safe-area-inset-right));
    bottom:calc(var(--space-4) + env(safe-area-inset-bottom,0));
    min-height:44px;
  }
  .game-chat-drawer {
    left:max(var(--space-3),env(safe-area-inset-left));
    right:max(var(--space-3),env(safe-area-inset-right));
    width:auto;
    bottom:calc(56px + env(safe-area-inset-bottom,0));
    max-height:min(340px, 55vh);
  }
  .game-arena-frame { padding:var(--space-2); border-radius:var(--radius-lg); }
  .write-stage { padding:0; }
  .write-q-card textarea { min-height:88px; }
  .result-arena { min-height:260px; }
  .result-arena__stage { min-height:200px; }
  .modal,.modal-box,.overlay { padding:max(var(--space-3),env(safe-area-inset-left)); }
  .sheet__panel,.sheet-panel { padding-left:max(var(--space-4),env(safe-area-inset-left)); padding-right:max(var(--space-4),env(safe-area-inset-right)); }
  .dock,.bottom-nav {
    width:calc(100% - var(--space-6));
    bottom:max(var(--space-2),env(safe-area-inset-bottom,0));
  }
  .dock__item,.bottom-nav button { min-height:48px; padding:var(--space-2); }
  .toast { max-width:calc(100% - var(--space-6)); bottom:calc(var(--space-8) + env(safe-area-inset-bottom,0)); }
}
@media (max-width:639px) {
  .dash-stats { grid-template-columns:repeat(2,1fr); }
}
.bottom-nav,.dock { display:none!important; }

/* ── Onboarding ── */
.onboard-screen {
  position:fixed; inset:0; z-index:600; display:flex; align-items:center; justify-content:center;
  padding:var(--space-4); overflow-y:auto;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(139,92,246,.18), transparent 60%),
    var(--bg);
}
.onboard-screen.hidden { display:none!important; }
.onboard-shell { width:100%; max-width:400px; text-align:center; }
.onboard-mark {
  width:72px; height:72px; margin:0 auto var(--space-4); border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center; font-size:36px; color:var(--accent-hover);
  background:var(--accent-subtle); box-shadow:var(--shadow-lg);
}
.onboard-title { font-family:var(--font-display); font-size:1.5rem; font-weight:800; margin-bottom:var(--space-2); color:var(--text); }
.onboard-sub { color:var(--text-secondary); font-size:14px; line-height:1.5; margin-bottom:var(--space-5); }
.onboard-form { text-align:left; padding-top:var(--space-5); }
.onboard-form .field-label { display:block; font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:var(--space-2); }
.onboard-form input[type="text"] { width:100%; margin-bottom:var(--space-4); }
.onboard-consent { margin:var(--space-4) 0; }
.onboard-submit { width:100%; margin-top:var(--space-2); min-height:48px; }

/* ── Home v2 ── */
.home-top {
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-2) 0 var(--space-4);
}
.home-greeting { font-size:14px; color:var(--text-secondary); margin-bottom:var(--space-2); }
.home-greeting strong:not(.name-gradient) { color:var(--text); font-weight:700; }
.home-headline {
  font-family:var(--font-display); font-size:clamp(1.35rem,5.5vw,1.65rem); font-weight:800;
  line-height:1.15; letter-spacing:-.02em; color:var(--text);
}
.home-top__logo { border-radius:var(--radius-lg); box-shadow:var(--shadow-md); flex-shrink:0; }
.home-play { padding-top:var(--space-5); }
.home-play--match { border-color:rgba(139,92,246,.22)!important; }
.home-play__match {
  width:100%; min-height:54px; font-size:17px; font-family:var(--font-display); font-weight:800;
  letter-spacing:.04em; margin-bottom:var(--space-3);
  box-shadow:0 8px 28px rgba(139,92,246,.35);
}
.home-play__code { margin-top:var(--space-1); }
.home-play__code summary {
  font-size:12px; font-weight:600; color:var(--text-muted); cursor:pointer; list-style:none;
  text-align:center; padding:var(--space-2); user-select:none;
}
.home-play__code summary::-webkit-details-marker { display:none; }
.home-play__code-body {
  display:flex; flex-direction:column; gap:var(--space-2); padding-top:var(--space-2);
  border-top:1px dashed var(--border);
}
.home-play__code-body .home-join { margin:0; }
.home-play__head { margin-bottom:var(--space-4); }
.home-play__title { font-family:var(--font-display); font-size:1.1rem; font-weight:700; margin:0 0 4px; }
.home-play__sub { font-size:13px; color:var(--text-secondary); margin:0; }
.home-play__create { width:100%; min-height:48px; margin-bottom:var(--space-3); font-size:15px; }
.home-join { display:flex; gap:var(--space-2); }
.home-join input { flex:1; min-width:0; }
.home-join button { flex-shrink:0; min-width:88px; }
.home-section-title {
  font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-muted); margin:var(--space-2) 0 var(--space-3);
}
.home-social-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-2); }
.home-social-card {
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:var(--space-4) var(--space-2);
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-md);
  cursor:pointer; text-align:center; box-shadow:var(--shadow-md);
  transition:transform var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.home-social-card:hover { border-color:rgba(139,92,246,.35); transform:translateY(-2px); box-shadow:0 8px 20px rgba(139,92,246,.18); }
.home-social-card:active { transform:scale(.98); }
.home-social-card__icon {
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  color:var(--accent-hover);
}
.home-social-card__icon svg { display:block; }
.home-social-card__label { font-size:12px; font-weight:700; color:var(--text); }
.home-social-card__hint { font-size:10px; color:var(--text-muted); line-height:1.2; }
.home-groups-preview__head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--space-3); }
.hub-back { flex-shrink:0; background:var(--surface); border:1.5px solid var(--border); color:var(--text-secondary); box-shadow:var(--shadow-md); }
.hub-back:hover { border-color:rgba(139,92,246,.35); color:var(--accent-hover); background:var(--surface-hover); }

/* ── Social: arkadaşlar & gruplar ── */
.social-screen {
  gap:var(--space-4);
  max-width:480px;
  padding-top:calc(var(--app-bar-h) + var(--space-2));
}
.social-screen .panel::before,
.social-screen .card::before { display:none; }

.social-header {
  display:flex;
  align-items:flex-start;
  gap:var(--space-3);
  margin-bottom:var(--space-1);
}
.social-header__back {
  flex-shrink:0;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  color:var(--text-secondary);
  font-size:18px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.social-header__back:hover {
  background:var(--surface-hover);
  border-color:var(--border-strong);
  color:var(--text);
}
.social-header__text { flex:1; min-width:0; padding-top:2px; }
.social-header__title {
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
  color:var(--text);
}
.social-header__sub {
  font-size:13px;
  color:var(--text-muted);
  margin-top:4px;
  line-height:1.35;
}
.social-header__action { flex-shrink:0; align-self:center; }

.social-card {
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-md);
}
.social-card--compact { padding:var(--space-3) var(--space-4); }
.social-label {
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--text-secondary);
  margin-bottom:var(--space-2);
}
.social-add-row {
  display:flex;
  gap:var(--space-2);
  align-items:stretch;
}
.social-input {
  flex:1;
  min-width:0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-elevated);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.social-input:focus {
  outline:none;
  border-color:rgba(139,92,246,.4);
  box-shadow:0 0 0 2px rgba(139,92,246,.12);
}
.social-add-row__btn { flex-shrink:0; min-height:42px; padding-left:var(--space-4); padding-right:var(--space-4); }
.social-card .error-msg,
.social-card .success-msg { margin-top:var(--space-2); margin-bottom:0; }

.social-block { display:flex; flex-direction:column; gap:var(--space-2); }
.social-block__head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-2);
  padding:0 var(--space-1);
}
.social-block__title {
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-muted);
}
.social-block__hint {
  font-size:11px;
  color:var(--text-muted);
  font-weight:500;
}
.social-badge {
  font-size:11px;
  font-weight:800;
  min-width:20px;
  height:20px;
  padding:0 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-full);
  background:var(--accent);
  color:#fff;
}

.social-list {
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.social-empty {
  padding:var(--space-5) var(--space-4);
  text-align:center;
  font-size:14px;
  line-height:1.5;
  color:var(--text-muted);
  border:1px dashed var(--border);
  border-radius:var(--radius-md);
  background:rgba(0,0,0,.15);
}

.social-row {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  width:100%;
  padding:var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  text-align:left;
  color:inherit;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
button.social-row {
  font:inherit;
  appearance:none;
  -webkit-appearance:none;
}
.social-row:hover {
  background:var(--surface-hover);
  border-color:var(--border-strong);
}
.social-row--request { cursor:default; }
.social-row--request:hover { background:var(--surface); border-color:var(--border); }

.social-row__avatar {
  position:relative;
  width:44px;
  height:44px;
  flex-shrink:0;
  border-radius:var(--radius-full);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface-active);
  border:1px solid var(--border);
}
.social-row__avatar--group { border-radius:var(--radius-md); }
.social-row__avatar .avatar-photo { width:100%; height:100%; object-fit:cover; }

.social-row__presence {
  position:absolute;
  bottom:0;
  right:0;
  width:11px;
  height:11px;
  border-radius:50%;
  border:2px solid var(--surface);
  background:var(--text-muted);
}
.social-row__presence--online { background:var(--success); }
.social-row__presence--lobby { background:var(--warning); }
.social-row__presence--ingame { background:var(--danger); }

.social-row__body {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.social-row__name {
  font-size:15px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.social-row__meta {
  font-size:12px;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.social-row__actions {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  flex-shrink:0;
  justify-content:flex-end;
}
.social-row__chevron {
  flex-shrink:0;
  font-size:20px;
  line-height:1;
  color:var(--text-muted);
  opacity:.5;
  margin-left:2px;
}

.social-btn {
  padding:6px 10px;
  border-radius:var(--radius-sm);
  font-size:12px;
  font-weight:600;
  border:1px solid var(--border);
  background:var(--surface-hover);
  color:var(--text-secondary);
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.social-btn:hover { color:var(--text); border-color:var(--border-strong); }
.social-btn--accept {
  background:var(--accent);
  border-color:transparent;
  color:#fff;
}
.social-btn--accept:hover { background:var(--accent-hover); color:#fff; }
.social-btn--join {
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.3);
  color:#86efac;
}
.social-btn--ghost {
  background:transparent;
  border-color:transparent;
}
.social-btn--ghost:hover { background:var(--surface-hover); border-color:var(--border); }

@media (max-width:400px) {
  .social-row { flex-wrap:wrap; }
  .social-row__actions { width:100%; justify-content:flex-start; padding-left:calc(44px + var(--space-3)); }
  .social-row__chevron { display:none; }
}

.screen-page-head { flex-wrap:wrap; gap:var(--space-2); }
.screen-page-head .hub-back { margin-right:auto; }
.screen-page-head h1 { flex:1; min-width:0; }
.overlay,.modal-overlay { background:var(--overlay-bg); }
.toast { bottom:calc(var(--space-6) + env(safe-area-inset-bottom,0)); background:var(--surface); box-shadow:var(--shadow-lg); }
.dock,.bottom-nav { display:none!important; }

/* ── Glass & lobby ── */
.glass-slice {
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(139, 92, 246, 0.06);
}

.game-button {
  background:linear-gradient(135deg, #6366f1 0%, #a855f7 45%, #ec4899 100%);
  background-size:200% 200%;
  animation:playGradient 5s ease infinite;
  border:1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 0 24px var(--neon-purple),
    0 8px 28px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color:#fff;
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.game-button:hover {
  transform:scale(1.05) skewX(-1deg);
  box-shadow:0 0 40px rgba(168, 85, 247, 0.75), 0 12px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.game-button:active { transform:scale(0.98) skewX(-1deg); }

body.party-home-active .app-header {
  position:fixed; top:0; left:0; right:0; z-index:150;
  background:transparent; border:none; box-shadow:none;
  backdrop-filter:none; pointer-events:none;
}
body.party-home-active .header-brand { display:none!important; }
body.party-home-active .header-profile-btn { display:none!important; }
body.party-home-active .app-bar__actions { pointer-events:auto; margin-left:auto; }
body.party-home-active .header-actions .status-pill { display:none; }
#headerStatus { display:none!important; }
.header-actions > .status-pill { display:none!important; }
body.party-home-active::after {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(ellipse 100% 55% at 50% -5%, rgba(251, 146, 60, 0.09), transparent 68%);
}
body.party-home-active::before { opacity:0.28; }
body.party-home-active .app-footer { display:none; }
body.rank-level-up .lobby-hero__ring { animation:rankRingBurst 1s ease-out; }

.lobby-screen {
  position:relative;
  display:grid;
  grid-template-columns:48px 1fr;
  grid-template-rows:auto 1fr;
  grid-template-areas:
    "dock hero"
    "dock main";
  gap:var(--space-3);
  padding:var(--space-2) var(--space-3) var(--space-4);
  padding-top:calc(var(--space-2) + env(safe-area-inset-top, 0));
  min-height:min(100%, calc(100dvh - var(--app-bar-h)));
  max-width:var(--app-wide);
}
@media (min-width:720px) {
  .lobby-screen {
    grid-template-columns:52px 1fr min(220px, 32vw);
    grid-template-areas:
      "dock hero social"
      "dock main social";
  }
}
.lobby-ambient { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.lobby-bg-gradient {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(124, 58, 237, 0.2), transparent),
    radial-gradient(ellipse 60% 40% at 100% 80%, rgba(59, 130, 246, 0.1), transparent);
}
.lobby-bg-lines {
  position:absolute; inset:-20%;
  background:repeating-linear-gradient(
    -12deg,
    transparent,
    transparent 48px,
    rgba(139, 92, 246, 0.03) 48px,
    rgba(139, 92, 246, 0.03) 49px
  );
  animation:lobbyLinesDrift 40s linear infinite;
  opacity:0.6;
}
@keyframes lobbyLinesDrift { to { transform:translate(24px, 24px); } }
.lobby-cursor-glow {
  position:absolute; width:min(420px,90vw); height:min(420px,90vw);
  left:var(--mx,50%); top:var(--my,40%); transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(139,92,246,.12), transparent 65%);
  transition:left .35s ease, top .35s ease; opacity:.9;
}
.lobby-noise {
  position:absolute; inset:0; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lobby-particles { position:absolute; inset:0; }
.lobby-particle {
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:rgba(167,139,250,.35);
  animation:lobbyParticleFloat linear infinite;
}
@keyframes lobbyParticleFloat {
  0%,100% { transform:translateY(0) scale(1); opacity:.2; }
  50% { transform:translateY(-24px) scale(1.2); opacity:.55; }
}
.lobby-ghost-stream { position:absolute; inset:0; overflow:hidden; opacity:.35; }
.lobby-ghost-msg {
  position:absolute; bottom:-20%; font-size:11px; color:var(--text-muted);
  font-family:var(--font-mono); white-space:nowrap;
  animation:ghostMsgRise 14s linear infinite;
}
@keyframes ghostMsgRise {
  0% { transform:translateY(0); opacity:0; }
  8% { opacity:.5; }
  92% { opacity:.35; }
  100% { transform:translateY(-120vh); opacity:0; }
}
.lobby-screen > *:not(.lobby-ambient) { position:relative; z-index:1; }

.lobby-side-dock {
  grid-area:dock; display:flex; flex-direction:column; align-items:center;
  gap:var(--space-2); padding:var(--space-2) var(--space-1); border-radius:10px;
}
.lobby-side-dock__btn {
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:8px; background:transparent; color:var(--text-muted);
  cursor:pointer; transition:color 0.25s, background 0.25s, box-shadow 0.25s;
}
.lobby-side-dock__btn:hover {
  color:var(--accent-hover);
  background:rgba(139, 92, 246, 0.15);
  box-shadow:0 0 16px rgba(139, 92, 246, 0.35);
}
.lobby-side-dock__btn:active { transform:scale(0.94); }

.lobby-hero {
  grid-area:hero; padding:var(--space-3) var(--space-4); border-radius:10px;
  transform:skewY(-0.5deg);
}
.lobby-hero__tap {
  display:flex; align-items:center; gap:var(--space-4); width:100%;
  border:none; background:transparent; cursor:pointer; text-align:left; color:inherit; padding:0;
}
.lobby-hero__ring {
  position:relative; width:56px; height:56px; border-radius:10px; padding:3px;
  background:var(--surface-active); overflow:hidden;
}
.lobby-hero__ring::before {
  content:''; position:absolute; inset:-2px; border-radius:inherit; z-index:0;
  background:conic-gradient(from 0deg, var(--rank-color, var(--accent)), transparent 40%, var(--rank-color, var(--accent)) 70%, transparent);
  animation:rankRingSpin 10s linear infinite;
}
@keyframes rankRingSpin { to { transform:rotate(360deg); } }
@keyframes rankRingBurst {
  0% { filter:drop-shadow(0 0 0 transparent); }
  50% { filter:drop-shadow(0 0 20px var(--rank-color)); }
  100% { filter:drop-shadow(0 0 0 transparent); }
}
.lobby-hero__avatar { width:100%!important; height:100%!important; border-radius:8px!important; position:relative; z-index:1; }
.lobby-hero__rank-col { flex:1; min-width:0; }
.lobby-hero__medal {
  width:28px; height:32px; color:var(--rank-color, var(--gold));
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--rank-color) 60%, transparent));
  margin-bottom:2px;
}
.rank-medal-svg { width:100%; height:100%; display:block; }
.lobby-hero__tier {
  display:block; font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--rank-color, var(--accent-hover));
}
.lobby-hero__rp-block { display:flex; align-items:baseline; gap:4px; line-height:1; margin:4px 0; }
.lobby-hero__rp {
  font-family:var(--font-display); font-size:clamp(2rem, 8vw, 2.75rem); font-weight:800;
  letter-spacing:-0.03em; color:var(--text);
  text-shadow:0 0 32px color-mix(in srgb, var(--rank-color) 50%, transparent);
}
.lobby-hero__rp-unit { font-size:12px; font-weight:700; color:var(--text-muted); letter-spacing:0.08em; }
.lobby-hero__tag { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); }
.lobby-hero__xp { margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px solid var(--glass-border); }
.lobby-xp__head { display:flex; justify-content:space-between; font-size:11px; color:var(--text-secondary); margin-bottom:6px; }
.lobby-xp__pct { font-family:var(--font-mono); font-weight:700; color:var(--neon-amber); }
.lobby-xp__track {
  height:12px; border-radius:6px; overflow:hidden;
  background:rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.08);
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.4);
}
.lobby-xp__fill {
  position:relative; height:100%; width:0; border-radius:inherit;
  background:linear-gradient(90deg, #ea580c, #fbbf24, #fde68a);
  box-shadow:0 0 16px var(--neon-amber);
  transition:width 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.lobby-xp__tip {
  position:absolute; right:0; top:50%; transform:translate(50%, -50%);
  width:8px; height:8px; border-radius:50%; background:#fff;
  box-shadow:0 0 12px #fbbf24, 0 0 24px var(--neon-amber);
}
.lobby-xp__fill--pulse { animation:xpPulse 0.6s ease; }
@keyframes xpPulse {
  0%,100% { filter:brightness(1); }
  50% { filter:brightness(1.35); }
}
.lobby-hero__meta { display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--text-muted); }
.lobby-streak { color:var(--gold); font-weight:700; }
.lobby-streak.lobby-streak--hot, #lobbyStreakWrap.lobby-streak--hot {
  color:#fde68a; text-shadow:0 0 12px rgba(251, 191, 36, 0.6);
}

.lobby-main {
  grid-area:main; display:flex; flex-direction:column; align-items:center; gap:var(--space-3);
  min-width:0;
}
.lobby-live {
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-2) var(--space-4);
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-full); font-size:11px; color:var(--text-muted);
}
.lobby-live strong { color:var(--text); font-variant-numeric:tabular-nums; }
.lobby-live__dot {
  display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--success);
  margin-right:4px; vertical-align:middle; animation:livePulse 2s ease-in-out infinite;
}
@keyframes livePulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
.lobby-hook {
  font-family:var(--font-display); font-size:clamp(1.35rem, 5vw, 1.65rem); font-weight:800;
  text-align:center; line-height:1.15; letter-spacing:-0.03em; margin:0;
}
.lobby-hook em { font-style:normal; color:var(--accent-hover); text-shadow:0 0 28px var(--neon-purple); }

.lobby-match {
  position:relative; width:100%; max-width:380px; padding:var(--space-5);
  border-radius:10px; overflow:hidden;
  transition:transform 0.35s ease, box-shadow 0.35s ease;
}
.lobby-match--skew { transform:skewX(-1deg); }
.lobby-match--skew > * { transform:skewX(1deg); }
.lobby-match--busy { box-shadow:0 0 32px rgba(34, 211, 238, 0.25), 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06); }
.lobby-match--launch { transform:skewX(-1deg) scale(0.97); opacity:0.9; }
.lobby-match__glow {
  position:absolute; inset:-50%; pointer-events:none;
  background:radial-gradient(circle, rgba(168, 85, 247, 0.12), transparent 60%);
  animation:lobbyCardGlow 4s ease-in-out infinite alternate;
}
@keyframes lobbyCardGlow { from { opacity:0.5; } to { opacity:1; } }
.lobby-match__typing {
  font-family:var(--font-mono); font-size:11px; color:var(--cyan); min-height:1.2em;
  margin-bottom:var(--space-3); text-align:center;
}
.lobby-typing--flash { animation:typingGlitch 0.4s ease; }
@keyframes typingGlitch {
  0%,100% { opacity:0.85; }
  40% { opacity:1; transform:translateX(2px); }
}

.lobby-mode-tabs {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); margin-bottom:var(--space-4);
}
.lobby-mode-tab {
  padding:var(--space-2) var(--space-3); border-radius:8px;
  border:1px solid var(--glass-border); background:rgba(0,0,0,0.25);
  color:var(--text-muted); font-size:12px; font-weight:700; cursor:pointer;
  transition:all 0.25s ease;
}
.lobby-mode-tab.is-active {
  color:var(--text); border-color:rgba(167, 139, 250, 0.5);
  background:rgba(139, 92, 246, 0.2);
  box-shadow:0 0 16px rgba(139, 92, 246, 0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}
.lobby-mode-panel { width:100%; }
.lobby-play-btn {
  position:relative; width:100%; min-height:62px; padding:var(--space-4);
  border-radius:8px; cursor:pointer; overflow:hidden;
}
.lobby-play-btn__shine {
  position:absolute; top:0; left:-100%; width:50%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation:playShine 3s ease-in-out infinite; pointer-events:none;
}
@keyframes playShine { 0%,100% { left:-100%; } 50% { left:130%; } }
.lobby-play-btn__label { position:relative; font-size:1.35rem; display:block; text-align:center; }
.lobby-play-sub { text-align:center; font-size:12px; color:var(--text-secondary); margin:var(--space-3) 0 0; }
.lobby-room-create { width:100%; margin-bottom:var(--space-2); }
.lobby-room-join { margin-top:var(--space-2); }

.lobby-feed {
  width:100%; max-width:380px; padding:var(--space-3) var(--space-4)!important;
  max-height:120px; overflow:hidden; border-radius:10px;
}
.lobby-feed__head {
  display:flex; justify-content:space-between; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); margin-bottom:var(--space-2);
}
.lobby-feed__live { display:flex; align-items:center; gap:4px; }
.lobby-feed__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.lobby-feed__item {
  font-size:12px; color:var(--text-secondary); padding-left:8px;
  border-left:2px solid rgba(139,92,246,0.4); animation:feedIn 0.35s ease;
}
.lobby-feed__item strong { color:var(--text); }
@keyframes feedIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.lobby-social {
  grid-area:social; align-self:start; padding:0; overflow:hidden; border-radius:10px;
  max-height:min(420px, 55vh);
}
.lobby-social--collapsed .lobby-social__body { display:none; }
.lobby-social__toggle {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-3) var(--space-4); border:none; background:transparent;
  color:var(--text); font-size:12px; font-weight:700; cursor:pointer;
}
.lobby-social__body { padding:0 var(--space-3) var(--space-3); overflow-y:auto; max-height:360px; }
.lobby-social__list { list-style:none; margin:0; padding:0; }
.lobby-social__row {
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-2); align-items:center;
  padding:var(--space-2) 0; border-bottom:1px solid rgba(255,255,255,0.05);
  cursor:pointer; font-size:12px;
}
.lobby-social__row:hover { background:rgba(139,92,246,0.08); margin:0 calc(-1 * var(--space-2)); padding-left:var(--space-2); padding-right:var(--space-2); }
.lobby-social__dot { width:8px; height:8px; border-radius:50%; }
.lobby-social__dot--online { background:var(--success); box-shadow:0 0 8px rgba(34,197,94,0.7); }
.lobby-social__dot--ingame { background:var(--cyan); box-shadow:0 0 8px rgba(34,211,238,0.7); }
.lobby-social__dot--offline { background:var(--text-muted); opacity:0.5; }
.lobby-social__name { font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lobby-social__st { font-size:10px; color:var(--text-muted); }

@media (max-width:719px) {
  .lobby-social {
    position:fixed; right:var(--space-3); top:calc(var(--app-bar-h) + var(--space-2));
    width:min(200px, 52vw); z-index:20;
  }
  .lobby-screen { padding-right:var(--space-2); }
}

.match-tension {
  position:fixed; inset:0; z-index:600; display:flex; align-items:center; justify-content:center;
  background:rgba(6,4,12,.94); backdrop-filter:blur(12px);
}
.match-tension.hidden { display:none!important; }
.match-tension__content { text-align:center; padding:var(--space-6); max-width:320px; }
.match-tension__line {
  font-family:var(--font-mono); font-size:13px; color:var(--cyan);
  margin:var(--space-4) 0; min-height:1.4em;
  animation:tensionGlitch 2s steps(2) infinite;
}
@keyframes tensionGlitch {
  0%,90%,100% { opacity:1; }
  92% { opacity:.7; transform:skewX(-2deg); }
}
.match-tension__bar {
  height:3px; background:var(--surface-active); border-radius:var(--radius-full); overflow:hidden;
}
.match-tension__bar-fill {
  height:100%; width:0; background:linear-gradient(90deg, var(--accent), var(--cyan));
  transition:width .4s var(--ease);
}
.match-tension__sub { font-size:12px; color:var(--text-muted); margin-top:var(--space-4); }
.match-tension--out { animation:tensionOut .35s forwards; }
@keyframes tensionOut { to { opacity:0; } }
.match-tension__glitch-logo {
  width:64px; height:64px; margin:0 auto;
  border-radius:12px; border:2px solid rgba(139,92,246,.5);
  background:radial-gradient(circle, rgba(139,92,246,.3), transparent);
  animation:tensionLogo 1.2s ease-in-out infinite alternate;
}
@keyframes tensionLogo {
  from { transform:scale(1); filter:hue-rotate(0); }
  to { transform:scale(1.05); filter:hue-rotate(15deg); }
}
body.match-tension-active { overflow:hidden; }

.rank-badge {
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:4px 10px 4px 8px; border-radius:var(--radius-full);
  background:rgba(0,0,0,.25); border:1px solid color-mix(in srgb, var(--rank-color) 45%, transparent);
  border-left:3px solid var(--rank-color);
}
.rank-badge__tier {
  font-family:var(--font-display); font-size:12px; font-weight:700;
  color:var(--rank-color);
}
.rank-badge__rp { font-size:11px; font-weight:600; color:var(--text-muted); font-family:var(--font-mono); }
.rank-badge--profile { margin:6px auto 8px; }
.rank-badge--center { justify-content:center; margin:8px auto 0; }

/* ── Rank journey & promote ── */
.rank-medal {
  --rank-color: var(--accent);
  width:40px; height:40px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:15px; font-weight:800;
  color:var(--rank-color);
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--rank-color) 28%, transparent), var(--surface-active));
  border:2px solid color-mix(in srgb, var(--rank-color) 55%, var(--border));
  box-shadow:0 2px 12px color-mix(in srgb, var(--rank-color) 22%, transparent);
}
.rank-medal--ghost { opacity:.55; border-style:dashed; }
.rank-medal--lg { width:64px; height:64px; font-size:22px; }

.rank-journey { width:100%; margin:var(--space-3) 0; }
.rank-journey__tier-row {
  display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-3);
  margin-bottom:var(--space-2);
}
.rank-journey__tier { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; flex:1; }
.rank-journey__tier--next { align-items:flex-end; text-align:right; }
.rank-journey__tier--next.hidden { display:none; }
.rank-journey__tier-name {
  font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.rank-journey__tier-rp { font-size:10px; font-weight:600; color:var(--text-muted); font-family:var(--font-mono); }
.rank-journey__track {
  position:relative; height:10px; border-radius:var(--radius-full);
  background:var(--surface-active); border:1px solid var(--border);
  overflow:hidden;
}
.rank-journey__fill {
  position:relative; z-index:1; height:100%; width:0; border-radius:inherit;
  background:linear-gradient(90deg, color-mix(in srgb, var(--rank-color) 85%, #000), var(--accent-hover));
  box-shadow:0 0 16px color-mix(in srgb, var(--rank-color) 40%, transparent);
  transition:width .55s cubic-bezier(.22,1,.36,1);
}
.rank-journey__fill--tick { filter:brightness(1.12); }
.rank-journey__glow {
  position:absolute; top:50%; z-index:2; width:20px; height:20px; margin-top:-10px; margin-left:-10px;
  border-radius:var(--radius-full);
  background:radial-gradient(circle, color-mix(in srgb, var(--rank-color) 70%, transparent), transparent 70%);
  pointer-events:none; transition:left .55s cubic-bezier(.22,1,.36,1);
}
.rank-journey__foot {
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-2);
  margin-top:var(--space-2); font-size:12px;
}
.rank-journey__hint { color:var(--text-secondary); font-weight:500; }
.rank-journey__pct { font-weight:700; color:var(--rank-color); font-family:var(--font-mono); font-size:11px; }
.rank-journey__desc {
  margin:var(--space-2) 0 0; font-size:12px; color:var(--text-muted); text-align:center; line-height:1.45;
}

.rank-promote {
  position:fixed; inset:0; z-index:880;
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-6);
  pointer-events:none;
}
.rank-promote:not(.hidden) { pointer-events:auto; }
.rank-promote__backdrop {
  position:absolute; inset:0;
  background:rgba(8,6,14,.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  animation:rankPromoteFadeIn .4s ease forwards;
}
.rank-promote__card {
  position:relative; z-index:1;
  text-align:center; padding:var(--space-8) var(--space-6) var(--space-6);
  min-width:min(100%, 300px);
  border-radius:var(--radius-xl);
  border:1px solid var(--border-strong);
  background:var(--surface);
  box-shadow:var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--rank-color) 25%, transparent);
  animation:rankPromoteCardIn .55s cubic-bezier(.22,1,.36,1) forwards;
  overflow:hidden;
}
.rank-promote--out .rank-promote__card { animation:rankPromoteCardOut .38s ease forwards; }
.rank-promote--out .rank-promote__backdrop { animation:rankPromoteFadeOut .35s ease forwards; }
.rank-promote__ring {
  position:absolute; inset:-40%; pointer-events:none;
  background:conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--rank-color) 35%, transparent), transparent 55%);
  opacity:.35; animation:rankRingSpin 8s linear infinite;
}
.rank-promote__medal {
  margin:0 auto var(--space-4);
  animation:rankPromoteMedal .6s cubic-bezier(.22,1,.36,1) .08s both;
}
.rank-promote__eyebrow {
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:var(--space-2);
}
.rank-promote__tier {
  font-family:var(--font-display); font-size:clamp(1.75rem, 6vw, 2.25rem);
  font-weight:800; letter-spacing:-.02em;
  color:var(--rank-color); margin-bottom:var(--space-1);
  text-shadow:0 0 40px color-mix(in srgb, var(--rank-color) 45%, transparent);
}
.rank-promote__rp { font-size:13px; color:var(--text-secondary); font-family:var(--font-mono); }
.rank-promote__card::after {
  content:''; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.07), transparent);
  animation:rankPromoteSweep .75s ease .2s forwards;
}
@keyframes rankPromoteFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes rankPromoteFadeOut { to { opacity:0; } }
@keyframes rankPromoteCardIn {
  from { opacity:0; transform:scale(.94) translateY(10px); }
  to { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes rankPromoteCardOut {
  to { opacity:0; transform:scale(.97) translateY(6px); }
}
@keyframes rankPromoteMedal {
  from { opacity:0; transform:scale(.88); }
  65% { transform:scale(1.04); }
  to { opacity:1; transform:scale(1); }
}
@keyframes rankPromoteSweep { to { left:130%; } }

.rank-tiers-acc { margin:var(--space-3) 0; font-size:13px; }
.rank-tiers-acc summary { cursor:pointer; color:var(--text-muted); font-weight:600; list-style:none; }
.rank-tiers-acc summary::-webkit-details-marker { display:none; }
.rank-tiers-list { list-style:none; margin-top:var(--space-2); display:flex; flex-direction:column; gap:6px; }
.rank-tiers-list__item {
  display:grid; grid-template-columns:1fr auto; gap:2px 10px;
  padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--surface-hover); border-left:3px solid var(--rank-color);
  font-size:12px;
}
.rank-tiers-list__item.is-current {
  background:color-mix(in srgb, var(--rank-color) 12%, var(--surface-hover));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--rank-color) 30%, transparent);
}
.rank-tiers-list__item.is-earned { opacity:.72; }
.rank-tiers-list__name { font-weight:600; color:var(--text); grid-column:1; }
.rank-tiers-list__min { color:var(--text-muted); font-family:var(--font-mono); font-size:11px; grid-column:2; grid-row:1; }
.rank-tiers-list__desc { grid-column:1 / -1; font-size:11px; color:var(--text-muted); }

/* ── Group detail tabs ── */
.group-detail-screen {
  gap:0; padding:0; padding-bottom:0;
  overflow:hidden;
}
.group-detail-screen.active { max-height:calc(100dvh - var(--app-bar-h)); }
.group-detail-header {
  flex-shrink:0; padding:var(--space-3) var(--space-4) 0;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.group-detail-header__back { margin-bottom:var(--space-2); }
.group-detail-hero {
  display:flex; gap:var(--space-4); align-items:center;
  margin-bottom:var(--space-3); padding:var(--space-4);
  border-radius:var(--radius-lg); border:1px solid var(--border);
  box-shadow:var(--shadow-md);
}
.group-detail-hero__avatar-wrap { flex-shrink:0; }
.group-detail-hero__avatar {
  width:72px; height:72px; font-size:28px;
  border:3px solid color-mix(in srgb, var(--group-accent, var(--accent)) 50%, var(--border));
  box-shadow:0 8px 24px color-mix(in srgb, var(--group-accent, #000) 25%, transparent);
}
.group-detail-hero__meta { flex:1; min-width:0; }
.group-detail-hero__badges {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:6px;
}
.group-detail-hero__members {
  font-size:11px; font-weight:700; letter-spacing:.04em;
  color:var(--text-secondary); padding:3px 10px;
  border-radius:var(--radius-full); background:var(--surface-hover);
  border:1px solid var(--border);
}
.group-detail-hero__title {
  font-family:var(--font-display); font-size:1.35rem; font-weight:800;
  letter-spacing:-.02em; margin:0 0 4px; line-height:1.15; color:var(--text);
}
.group-detail-hero__desc {
  font-size:13px; color:var(--text-secondary); line-height:1.5; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.group-tabs {
  display:flex; gap:var(--space-1); margin:0 calc(var(--space-4) * -1);
  padding:0 var(--space-4);
}
.group-tab {
  flex:1; padding:var(--space-3) var(--space-2);
  border:none; border-bottom:2px solid transparent;
  background:transparent; color:var(--text-muted);
  font-size:13px; font-weight:600; cursor:pointer;
  transition:color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.group-tab:hover { color:var(--text-secondary); }
.group-tab.active {
  color:var(--text); border-bottom-color:var(--accent);
}
.group-tab__count {
  display:inline-block; margin-left:4px; padding:1px 6px;
  border-radius:var(--radius-full); font-size:10px; font-weight:700;
  background:var(--surface-active); color:var(--text-muted);
}
.group-detail-screen > .group-tab-panels {
  flex:1; flex-shrink:1; min-height:0;
}
.group-tab-panels {
  display:flex; flex-direction:column;
  overflow:hidden;
}
.group-tab-panel {
  display:none; flex:1; flex-direction:column; min-height:0; overflow:hidden;
}
.group-tab-panel.active { display:flex; }
.group-chat {
  flex:1; min-height:0; display:flex; flex-direction:column;
  margin:var(--space-3); border:1px solid var(--border);
  border-radius:var(--radius-lg); background:var(--bg-elevated);
  overflow:hidden; box-shadow:var(--shadow-md);
}
.group-chat__messages {
  flex:1; min-height:0; overflow-y:auto;
  padding:var(--space-3); display:flex; flex-direction:column; gap:var(--space-2);
}
.group-chat__compose { flex-shrink:0; border-top:1px solid var(--border); background:var(--surface); }
.group-chat-system {
  align-self:center; max-width:92%; text-align:center;
  padding:var(--space-2) var(--space-3); font-size:12px; line-height:1.45;
  color:var(--text-secondary); background:var(--accent-subtle);
  border:1px solid var(--border); border-radius:var(--radius-md);
}
.group-chat-system__name { font-weight:700; color:var(--accent-hover); margin-right:4px; }
.group-chat-system__time { display:block; font-size:10px; color:var(--text-muted); margin-top:4px; }
.bubble-row__name {
  font-size:11px; font-weight:600; color:var(--text-muted);
  margin-bottom:2px; padding:0 var(--space-1);
}
.group-member-list {
  list-style:none; margin:0; padding:var(--space-3) var(--space-4);
  overflow-y:auto; flex:1; min-height:0;
  display:flex; flex-direction:column; gap:var(--space-2);
}
.group-member-empty {
  text-align:center; color:var(--text-muted); font-size:14px; padding:var(--space-8) var(--space-4);
}
.group-member-row {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3); border-radius:var(--radius-md);
  border:1px solid var(--border); background:var(--surface);
}
.group-member-row__avatar {
  width:44px; height:44px; flex-shrink:0; border-radius:var(--radius-full);
  overflow:hidden; position:relative;
}
.group-member-row__body { flex:1; min-width:0; }
.group-member-row__name {
  display:block; font-weight:600; font-size:14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.group-member-row__meta { display:block; font-size:12px; color:var(--text-muted); margin-top:2px; }
.group-manage-scroll {
  flex:1; min-height:0; overflow-y:auto;
  padding:var(--space-3) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom,0));
  display:flex; flex-direction:column; gap:var(--space-3);
}
.group-manage-block {
  padding:var(--space-4); border-radius:var(--radius-lg);
  border:1px solid var(--border); background:var(--surface);
}
.group-manage-block__title {
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted); margin:0 0 var(--space-3);
}
.group-manage-block__meta { font-size:13px; color:var(--text-secondary); margin:var(--space-2) 0 0; }
.group-manage-block__btn { margin-top:var(--space-2); }
.group-invite-picker { margin-top:var(--space-3); max-height:200px; overflow-y:auto; }

@media (prefers-reduced-motion:reduce) {
  .accordion .acc-body { animation:none!important; }
  .lobby-slide-panel { transition:none!important; max-height:none!important; opacity:1!important; transform:none!important; }
  .lobby-slide-panel:not(.is-open) { display:none!important; }
  .game-chat-drawer { transition:none!important; opacity:1!important; transform:none!important; }
  .role-btn { transition:none!important; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .result-panel { opacity:1; transform:none; }
  .result-arena__burst { animation:none; }
  .grad-live,.name-gradient,.color-swatch.grad-live { animation:none!important; background-size:100% 100%!important; }
  .lobby-hero__ring::before,.lobby-play-btn,.lobby-bg-lines,.lobby-particle,.lobby-ghost-msg { animation:none!important; }
  .lobby-play-btn__shine,.lobby-play-btn__pulse { display:none; }
  .party-duel__card,.party-duel__pick { animation:none!important; }
  .rank-promote__card,.rank-promote__backdrop,.rank-promote__medal,.rank-promote__card::after { animation:none!important; }
  .rank-journey__fill,.rank-journey__glow { transition:none!important; }
  .match-bar__dot,.match-card__avatar--ghost { animation:none!important; }
  .match-duel[data-phase="found"] .match-card--opp .match-card__avatar { animation:none!important; }
}

/* ── Eşleşme ekranı ── */
body.matchmaking-active { background:var(--bg); }
body.matchmaking-active::before { opacity:.1; }
body.matchmaking-active .app-header {
  position:fixed; top:0; left:0; right:0; z-index:150;
  background:var(--header-bg); border:none; backdrop-filter:var(--blur);
  pointer-events:none;
}
body.matchmaking-active .header-brand { display:none!important; }
body.matchmaking-active .header-profile-btn { display:none!important; }
body.matchmaking-active .app-bar__actions { pointer-events:auto; margin-left:auto; }

.match-screen {
  max-width:100%!important;
  width:100%;
  padding:0!important;
  margin:0;
  overflow:hidden;
}
.match-screen.active {
  display:block;
  min-height:calc(100dvh - var(--app-bar-h));
}
#screenMatchmaking:not(.active) {
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
  position:absolute!important;
  width:0!important;
  height:0!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  opacity:0!important;
}
#screenMatchmaking.active {
  display:block!important;
  position:relative;
  visibility:visible!important;
  opacity:1!important;
  width:100%!important;
  height:auto!important;
  min-height:calc(100dvh - var(--app-bar-h));
  overflow:hidden;
  clip:auto!important;
}
.match-head__title--countdown {
  font-size:clamp(2.75rem, 16vw, 4rem);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;
  color:var(--cyan);
}
.match-shell {
  min-height:calc(100dvh - var(--app-bar-h));
  padding:calc(var(--app-bar-h) + 14px) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-4);
  max-width:520px;
  margin:0 auto;
}
.match-bar {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
}
.match-bar__live {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-secondary);
}
.match-bar__dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px color-mix(in srgb, var(--cyan) 60%, transparent);
  animation:matchDotBlink 1.4s ease-in-out infinite;
}
@keyframes matchDotBlink {
  0%, 100% { opacity:1; }
  50% { opacity:.35; }
}
.match-bar__timer {
  font-family:var(--font-mono);
  font-size:1.35rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  padding:6px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text);
}
.match-bar__timer.is-hot {
  border-color:color-mix(in srgb, var(--cyan) 45%, transparent);
  box-shadow:0 0 20px color-mix(in srgb, var(--cyan) 20%, transparent);
}
.match-head {
  text-align:center;
  width:100%;
}
.match-head__title {
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.45rem, 6vw, 2rem);
  font-weight:800;
  line-height:1.1;
  color:var(--text);
}
.match-head__sub {
  margin:10px 0 0;
  font-size:14px;
  line-height:1.45;
  color:var(--text-secondary);
  max-width:36ch;
  margin-left:auto;
  margin-right:auto;
}
.match-duel {
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(16px, 6vw, 40px);
  min-height:min(36vh, 260px);
  padding:var(--space-3) 0 var(--space-5);
  position:relative;
}
.match-duel__vs {
  align-self:center;
  font-family:var(--font-display);
  font-size:clamp(1.25rem, 5vw, 1.75rem);
  font-weight:800;
  letter-spacing:.12em;
  color:var(--text-muted);
  opacity:0;
  transform:scale(.9);
  transition:opacity .35s ease, transform .35s ease;
}
.match-duel[data-phase="found"] .match-duel__vs,
.match-duel[data-phase="join"] .match-duel__vs {
  opacity:1;
  transform:scale(1);
  color:var(--cyan);
}
.match-card {
  flex:0 1 150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  min-width:0;
}
.match-card__avatar {
  width:92px;
  height:92px;
  border-radius:var(--radius-full);
  overflow:hidden;
  position:relative;
  contain:paint layout;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface);
  border:3px solid var(--border-strong);
  box-shadow:var(--shadow-md);
  transition:transform .35s ease, border-color .35s ease;
}
.match-card__avatar .avatar-logo,
.match-card__avatar .avatar-photo { width:100%; height:100%; }
.match-card--you .match-card__avatar {
  border-color:color-mix(in srgb, var(--cyan) 40%, var(--border));
}
.match-card--opp:not([data-empty="true"]) .match-card__avatar {
  border-color:color-mix(in srgb, var(--accent) 40%, var(--border));
}
.match-card__avatar--ghost {
  border-style:dashed;
  font-size:24px;
  font-weight:800;
  color:var(--text-muted);
  animation:matchGhostPulse 2s ease-in-out infinite;
}
@keyframes matchGhostPulse {
  0%, 100% { opacity:.55; }
  50% { opacity:1; }
}
.match-card__name {
  margin:0;
  font-size:15px;
  font-weight:700;
  color:var(--text);
  max-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.match-card__meta {
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-secondary);
  padding:4px 10px;
  border-radius:var(--radius-full);
  border:1px solid var(--border);
  background:var(--surface-hover);
}
.match-card__wait {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.match-card__wait-label {
  margin:0;
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
}
.match-card[data-empty="true"] .match-card__filled { display:none!important; }
.match-card:not([data-empty="true"]) .match-card__wait { display:none!important; }
.match-duel[data-phase="found"] .match-card--opp .match-card__avatar,
.match-duel[data-phase="join"] .match-card--opp .match-card__avatar {
  animation:matchCardIn .45s cubic-bezier(.22,1,.36,1) both;
}
.match-duel[data-phase="join"] .match-card__avatar {
  transform:scale(1.02);
}
@keyframes matchCardIn {
  from { opacity:0; transform:scale(.9) translateY(8px); }
  to { opacity:1; transform:scale(1) translateY(0); }
}
.match-foot {
  width:100%;
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.match-foot__cancel {
  width:100%;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--text-muted);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.match-foot__cancel:hover {
  color:var(--text);
  border-color:var(--border-strong);
}
html[data-color-scheme="light"] .match-head__title { text-shadow:none; }

/* ── Party home — sıcak, her yaşa uygun ana ekran ── */
.party-home {
  gap:var(--space-5);
  max-width:440px;
  padding-top:calc(var(--app-bar-h) + var(--space-3));
  padding-bottom:calc(var(--space-5) + env(safe-area-inset-bottom, 0));
  min-height:calc(100dvh - var(--app-bar-h));
}
@media (min-width:740px) { .party-home { max-width:480px; } }

.party-showcase { text-align:center; }
.party-showcase__logo {
  width:72px; height:72px; margin:0 auto var(--space-3);
  border-radius:20px;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
}
.party-showcase__title {
  font-family:var(--font-display);
  font-size:clamp(1.65rem, 7vw, 2rem);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
  color:var(--text);
  margin-bottom:var(--space-2);
}
.party-showcase__lead {
  font-size:15px;
  line-height:1.55;
  color:var(--text-secondary);
  max-width:34ch;
  margin:0 auto var(--space-4);
}

.party-duel {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:var(--space-2);
  align-items:stretch;
  margin-top:var(--space-2);
}
.party-duel__card {
  position:relative;
  padding:var(--space-3) var(--space-2);
  border-radius:var(--radius-md);
  background:var(--surface);
  border:1.5px solid var(--border);
  text-align:left;
  min-height:88px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  animation:partyCardFloat 4s ease-in-out infinite;
}
.party-duel__card--a {
  border-color:rgba(251, 146, 60, 0.35);
  animation-delay:0s;
}
.party-duel__card--b {
  border-color:rgba(139, 92, 246, 0.3);
  animation-delay:.6s;
}
.party-duel__card p {
  font-size:12px;
  line-height:1.45;
  color:var(--text);
  margin:0;
}
.party-duel__tag {
  display:inline-block;
  font-family:var(--font-display);
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  margin-bottom:6px;
  color:var(--party-warm);
}
.party-duel__card--b .party-duel__tag { color:var(--accent-hover); }
.party-duel__pick {
  align-self:center;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-full);
  background:var(--surface-hover);
  border:2px solid var(--border-strong);
  font-family:var(--font-display);
  font-size:18px; font-weight:800;
  color:var(--text);
  animation:partyPickPulse 2.4s ease-in-out infinite;
}
html[data-color-scheme="dark"] .party-duel__pick { color:var(--party-cream); }
@keyframes partyCardFloat {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-3px); }
}
@keyframes partyPickPulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(251, 146, 60, 0); }
  50% { box-shadow:0 0 0 6px rgba(251, 146, 60, 0.12); }
}

.party-actions { display:flex; flex-direction:column; gap:var(--space-3); }
.party-play-btn {
  width:100%;
  min-height:58px;
  padding:var(--space-3) var(--space-5);
  border:none;
  border-radius:var(--radius-xl);
  cursor:pointer;
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:.01em;
  color:#1a1008;
  background:linear-gradient(180deg, #fdba74 0%, var(--party-warm) 45%, var(--party-warm-deep) 100%);
  box-shadow:
    0 4px 0 rgba(154, 52, 18, 0.45),
    0 12px 28px rgba(234, 88, 12, 0.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.party-play-btn:hover {
  transform:translateY(-1px);
  box-shadow:
    0 5px 0 rgba(154, 52, 18, 0.45),
    0 16px 32px rgba(234, 88, 12, 0.4);
}
.party-play-btn:active {
  transform:translateY(2px);
  box-shadow:
    0 2px 0 rgba(154, 52, 18, 0.45),
    0 6px 16px rgba(234, 88, 12, 0.3);
}
.party-play-btn:disabled,
.party-play-btn.party-play-btn--busy {
  opacity:.72;
  cursor:wait;
  transform:none;
}
.party-play-hint {
  text-align:center;
  font-size:13px;
  color:var(--text-muted);
  margin:0;
}
.party-actions .error-msg { text-align:center; margin:0; }

.party-room {
  padding:var(--space-3) var(--space-4);
  background:rgba(26, 24, 37, 0.6);
  border-color:var(--border);
}
.party-room::before { display:none; }
.party-room__label {
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
  margin-bottom:var(--space-2);
  text-align:center;
}
.party-room__create {
  width:100%;
  margin-bottom:var(--space-2);
  min-height:44px;
}
.party-room__join { display:flex; gap:var(--space-2); }
.party-room__join input {
  flex:1;
  min-width:0;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-family:var(--font-mono);
  font-size:14px;
}

.party-me {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  width:100%;
  padding:var(--space-3) var(--space-4);
  border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  cursor:pointer;
  text-align:left;
  transition:background .15s ease, border-color .15s ease;
}
.party-me::before { display:none; }
.party-me:hover {
  background:var(--surface-hover);
  border-color:rgba(251, 146, 60, 0.25);
}
.party-me__avatar { width:44px; height:44px; flex-shrink:0; }
.party-me__info {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.party-me__name {
  font-weight:700;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.party-me__rank {
  font-size:12px;
  color:var(--text-muted);
}
.party-me__rp {
  font-family:var(--font-display);
  font-size:15px;
  font-weight:800;
  color:var(--party-warm);
}

.party-nav {
  display:flex;
  justify-content:space-around;
  gap:var(--space-1);
  padding:var(--space-2) 0;
  margin-top:auto;
  border-top:1px solid rgba(255,255,255,.04);
}
.party-nav__btn {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:var(--space-2);
  border:none;
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--text-muted);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:color .15s ease, background .15s ease;
}
.party-nav__btn:hover {
  color:var(--text);
  background:rgba(255,255,255,.04);
}
.party-nav__btn svg { opacity:.85; }