/* ═══════════════════════════════════════════════════════════════
   SHIZO HUB v6.5 — MONOCHROME CINEMA
   Bebas Neue display · DM Mono data · DM Sans body
   Palette: Pure black → warm whites · silver accents
   Mobile-first, touch optimised
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:ital,wght@0,400;0,500;0,700;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  /* ── backgrounds ── */
  --bg:   #0a0a0a;
  --bg2:  #111111;
  --bg3:  #181818;
  --bg4:  #202020;
  --bg5:  #2a2a2a;

  /* ── borders ── */
  --b:    #1e1e1e;
  --b2:   #2a2a2a;
  --b3:   #383838;
  --b4:   #4a4a4a;

  /* ── text ── */
  --t:    #f0ece4;
  --t2:   #b0a898;
  --t3:   #6a6258;
  --t4:   #3a3530;

  /* ── accent: pure white & silver ── */
  --w:    #ffffff;
  --w90:  rgba(255,255,255,.9);
  --w50:  rgba(255,255,255,.5);
  --w20:  rgba(255,255,255,.2);
  --w10:  rgba(255,255,255,.1);
  --w06:  rgba(255,255,255,.06);
  --w04:  rgba(255,255,255,.04);
  --w02:  rgba(255,255,255,.02);
  --silver: #c8c0b8;

  /* ── functional ── */
  --ok:   #e0e0e0;   /* success = light grey */
  --err:  #888880;   /* error   = mid grey   */
  --dim:  #444444;

  /* ── fonts ── */
  --fd: 'Bebas Neue', 'Impact', sans-serif;
  --fb: 'DM Sans', system-ui, sans-serif;
  --fm: 'DM Mono', 'Consolas', monospace;

  /* ── easing ── */
  --ex:  cubic-bezier(.16,1,.3,1);
  --sp:  cubic-bezier(.34,1.56,.64,1);
}

/* ─── RESET ─────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--bg); color:var(--t); font-family:var(--fb);
  font-size:16px; line-height:1.5; min-height:100vh;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}

/* Grain texture */
body::before {
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
#bg-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; }

/* ─── NAVBAR ─────────────────────────────────── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000; height:58px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(14px,4vw,44px);
  background:rgba(10,10,10,.88);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.04), 0 4px 24px rgba(0,0,0,.3);
}
.brand {
  font-family:var(--fd); font-size:clamp(18px,3.5vw,24px);
  letter-spacing:4px; text-transform:uppercase; text-decoration:none;
  color:var(--w); display:flex; align-items:center; gap:1px;
}
.brand em { font-style:normal; color:var(--t2); }
.brand-ver {
  font-family:var(--fm); font-size:7px; color:var(--t3);
  margin-left:9px; border:1px solid var(--b3);
  padding:2px 6px; border-radius:2px; letter-spacing:1px;
}
.nav-right { display:flex; align-items:center; gap:8px; }
.nav-user { font-size:11px; color:var(--t3); font-family:var(--fm); letter-spacing:.5px; }
.nav-user strong { color:var(--t2); font-weight:600; }
@media(max-width:460px) { .nav-user { display:none; } }

/* ─── BUTTONS ────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 22px; font-family:var(--fm); font-weight:700;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  text-decoration:none; border-radius:2px; cursor:pointer;
  transition:all .18s var(--ex); white-space:nowrap;
  border:1px solid transparent; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
/* white = primary */
.btn-white {
  background:var(--w); color:#0a0a0a; border-color:var(--w);
  box-shadow:0 0 20px rgba(255,255,255,.12);
}
.btn-white:hover { background:#ddd; box-shadow:0 0 32px rgba(255,255,255,.2); transform:translateY(-1px); }
.btn-white:active { transform:scale(.96); }

/* outline = secondary */
.btn-outline {
  background:transparent; color:var(--t2); border-color:var(--b3);
}
.btn-outline:hover { border-color:var(--w50); color:var(--w); background:var(--w06); transform:translateY(-1px); }

/* ghost = subtle */
.btn-ghost {
  background:var(--w04); color:var(--t3); border-color:var(--b2);
}
.btn-ghost:hover { border-color:var(--b4); color:var(--t2); background:var(--w06); }

/* dim/dark */
.btn-dark { background:var(--bg3); color:var(--t2); border-color:var(--b2); }
.btn-dark:hover { border-color:var(--b3); color:var(--t); }

.btn-sm  { padding:6px 14px; font-size:8px; letter-spacing:1.5px; }
.btn-lg  { padding:13px 34px; font-size:11px; letter-spacing:2.5px; }
.btn:disabled { opacity:.25; cursor:not-allowed; pointer-events:none; transform:none!important; }

/* ─── PAGE / TABS ─────────────────────────────── */
.page { position:relative; z-index:1; padding-top:58px; min-height:100vh; }
.tab-bar {
  display:flex; border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(10,10,10,.9); backdrop-filter:blur(20px);
  position:sticky; top:58px; z-index:100;
  padding:0 clamp(12px,4vw,36px);
  max-width:none;
}
.tab {
  flex:none; padding:14px 20px; text-align:center;
  font-size:9px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--t3); cursor:pointer; border:none; background:none;
  transition:color .2s; border-bottom:2px solid transparent;
  font-family:var(--fm); -webkit-tap-highlight-color:transparent;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.tab:hover { color:var(--t2); }
.tab.active { color:var(--w); border-bottom-color:var(--w); }
.tab-badge {
  background:rgba(255,255,255,.12); color:var(--t); font-size:7px;
  padding:2px 8px; border-radius:10px; font-weight:700;
  letter-spacing:1px; border:1px solid rgba(255,255,255,.15);
  animation:livePulse 2s ease infinite;
}
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ─── HUB HERO ────────────────────────────────── */
.hub-hero {
  text-align:center; position:relative; overflow:hidden;
  padding:clamp(44px,7vw,88px) clamp(16px,4vw,48px) clamp(28px,4vw,44px);
  border-bottom:1px solid var(--b);
}
.hub-hero::before {
  content:''; position:absolute; top:-200px; left:50%; transform:translateX(-50%);
  width:700px; height:700px;
  background:radial-gradient(ellipse,rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 40%, transparent 65%);
  pointer-events:none;
}
.hub-hero::after {
  content:''; position:absolute; bottom:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07) 40%, rgba(255,255,255,.07) 60%, transparent);
  pointer-events:none;
}
.hub-eyebrow {
  font-size:8px; letter-spacing:5px; color:var(--t3); text-transform:uppercase;
  font-weight:500; margin-bottom:16px; font-family:var(--fm);
  animation:fadeUp .7s .1s var(--ex) both;
}
.hub-eyebrow::before { content:'// '; color:var(--t4); }
.hub-title {
  font-family:var(--fd); font-weight:400;
  font-size:clamp(52px,13vw,130px); letter-spacing:2px; text-transform:uppercase;
  line-height:.88; color:var(--w); margin-bottom:16px;
  animation:titleReveal .9s .05s var(--ex) both;
}
.hub-title em { font-style:normal; color:var(--t2); }
@keyframes titleReveal { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
.hub-desc {
  color:var(--t3); font-size:11px; margin-bottom:28px;
  font-family:var(--fm); animation:fadeUp .7s .2s var(--ex) both;
}
.stats-row {
  display:inline-flex; border:1px solid rgba(255,255,255,.08); border-radius:14px;
  overflow:hidden; animation:fadeUp .7s .32s var(--ex) both;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(12px);
  box-shadow:0 4px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.07);
}
.stat-pill { text-align:center; padding:13px clamp(18px,3vw,32px); }
.stat-pill + .stat-pill { border-left:1px solid rgba(255,255,255,.06); }
.stat-pill .n {
  display:block; font-family:var(--fm); font-weight:700;
  font-size:clamp(18px,4vw,28px); color:var(--w); line-height:1;
}
.stat-pill .l {
  font-size:8px; letter-spacing:2px; color:var(--t3);
  text-transform:uppercase; font-family:var(--fm); margin-top:4px; display:block;
}

/* ─── SECTION ─────────────────────────────────── */
.section { padding:0 clamp(12px,4vw,36px) 64px; max-width:1100px; margin:0 auto; }
.section-label {
  font-size:8px; letter-spacing:4px; text-transform:uppercase; color:var(--t3);
  font-weight:600; margin-bottom:16px; margin-top:32px;
  display:flex; align-items:center; gap:12px; font-family:var(--fm);
}
.section-label::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.08) 0%, transparent 80%);
}

/* ─── GAMES GRID ──────────────────────────────── */
.games-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
  gap:10px; background:transparent; border:none; border-radius:0; overflow:visible;
}
.game-card {
  background:var(--bg2);
  border:1px solid var(--b2);
  border-radius:16px;
  padding:clamp(16px,3vw,24px);
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  cursor:pointer;
  transition:background .2s var(--ex), border-color .2s var(--ex), transform .2s var(--ex), box-shadow .2s var(--ex);
  position:relative; overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.game-card::before {
  content:'';
  position:absolute; inset:0;
  border-radius:16px;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.055) 0%, transparent 65%);
  opacity:0;
  transition:opacity .25s var(--ex);
  pointer-events:none;
}
.game-card::after {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  border-radius:16px 16px 0 0;
  background:linear-gradient(90deg, transparent 10%, rgba(255,255,255,.12) 50%, transparent 90%);
  opacity:0;
  transition:opacity .25s var(--ex);
}
.game-card:hover {
  background:var(--bg3);
  border-color:var(--b3);
  transform:translateY(-3px);
  box-shadow:0 8px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05);
}
.game-card:hover::before, .game-card:hover::after { opacity:1; }
.game-card:active { transform:translateY(-1px) scale(.985); transition-duration:.08s; }
.card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:10px; }
.card-num { font-family:var(--fm); font-size:9px; color:var(--t4); font-weight:500; }
.card-tag {
  font-size:7px; letter-spacing:1.5px; text-transform:uppercase;
  padding:2px 7px; border-radius:20px; border:1px solid var(--b3);
  color:var(--t3); font-weight:600; font-family:var(--fm);
  transition:border-color .2s, color .2s, background .2s;
}
.game-card:hover .card-tag { border-color:rgba(255,255,255,.18); color:var(--t2); background:rgba(255,255,255,.04); }
.card-title {
  font-family:var(--fd); font-weight:400; font-size:clamp(15px,2.8vw,20px);
  margin-bottom:7px; color:var(--w); letter-spacing:1.5px; text-transform:uppercase; line-height:1.1;
}
.card-desc { color:var(--t3); font-size:11px; line-height:1.6; flex:1; margin-bottom:14px; font-family:var(--fm); transition:color .2s; }
.game-card:hover .card-desc { color:var(--t2); }
.card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.card-meta { font-size:8px; color:var(--t4); font-family:var(--fm); }
.card-arrow {
  font-size:12px; color:var(--t4);
  transition:color .2s, transform .25s var(--sp);
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  border:1px solid transparent;
}
.game-card:hover .card-arrow {
  color:var(--w);
  transform:translateX(3px);
  border-color:var(--b3);
  background:var(--w06);
}
.card-badge {
  position:absolute; top:0; right:0;
  background:var(--w); color:#0a0a0a; font-size:7px; font-weight:700;
  letter-spacing:1.5px; padding:3px 8px; font-family:var(--fm);
  text-transform:uppercase; border-bottom-left-radius:10px; border-top-right-radius:16px;
}
.card-badge.hot { background:var(--b3); color:var(--t2); }
/* "YENİ" badge */
.card-new {
  position:absolute; top:12px; right:12px;
  background:rgba(255,255,255,.12); color:var(--w); font-size:7px; font-weight:700;
  letter-spacing:2px; padding:3px 8px; font-family:var(--fm);
  text-transform:uppercase; border-radius:20px;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  box-shadow:0 0 12px rgba(255,255,255,.08);
}
/* stagger */
.games-grid .game-card:nth-child(1){animation:fadeUp .4s .04s var(--ex) both}
.games-grid .game-card:nth-child(2){animation:fadeUp .4s .08s var(--ex) both}
.games-grid .game-card:nth-child(3){animation:fadeUp .4s .12s var(--ex) both}
.games-grid .game-card:nth-child(4){animation:fadeUp .4s .16s var(--ex) both}
.games-grid .game-card:nth-child(5){animation:fadeUp .4s .20s var(--ex) both}
.games-grid .game-card:nth-child(6){animation:fadeUp .4s .24s var(--ex) both}
.games-grid .game-card:nth-child(7){animation:fadeUp .4s .28s var(--ex) both}
.games-grid .game-card:nth-child(8){animation:fadeUp .4s .32s var(--ex) both}
.games-grid .game-card:nth-child(9){animation:fadeUp .4s .36s var(--ex) both}
.games-grid .game-card:nth-child(10){animation:fadeUp .4s .40s var(--ex) both}

/* ─── ONLINE HERO ─────────────────────────────── */
.online-hero {
  text-align:center; border-bottom:1px solid var(--b);
  padding:clamp(24px,4vw,44px) clamp(16px,4vw,48px) clamp(14px,2.5vw,22px);
  position:relative; overflow:hidden;
}
.online-hero::before {
  content:''; position:absolute; top:-120px; left:50%; transform:translateX(-50%);
  width:500px; height:400px;
  background:radial-gradient(ellipse, rgba(255,255,255,.03) 0%, transparent 65%);
  pointer-events:none;
}
.online-live {
  display:inline-flex; align-items:center; gap:7px;
  font-size:8px; font-weight:600; letter-spacing:4px; color:var(--t3);
  text-transform:uppercase; margin-bottom:8px; font-family:var(--fm);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  padding:5px 12px; border-radius:20px;
}
.online-live::before {
  content:''; display:block; width:6px; height:6px; border-radius:50%;
  background:var(--w); animation:livePulse 1.8s ease infinite;
  box-shadow:0 0 6px rgba(255,255,255,.4);
}
@keyframes livePulse {
  0%  { box-shadow:0 0 0 0 rgba(255,255,255,.5); }
  70% { box-shadow:0 0 0 8px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
.online-title {
  font-family:var(--fd); font-weight:400;
  font-size:clamp(32px,8vw,72px); letter-spacing:3px;
  text-transform:uppercase; color:var(--w); margin-bottom:6px;
}
.online-title em { font-style:normal; color:var(--t2); }
.online-desc { color:var(--t3); font-size:11px; font-family:var(--fm); }

/* ─── LOBBY GRID ──────────────────────────────── */
.lobby-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));
  gap:10px; background:transparent; border:none; border-radius:0; overflow:visible;
}
.lobby-card {
  background:var(--bg2);
  border:1px solid var(--b2);
  border-radius:16px;
  transition:background .2s var(--ex), border-color .2s var(--ex), transform .2s var(--ex), box-shadow .2s var(--ex);
  position:relative;
  overflow:hidden;
}
.lobby-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:80px;
  border-radius:16px 16px 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.035) 0%, transparent 100%);
  pointer-events:none;
}
.lobby-card:hover {
  background:var(--bg3);
  border-color:var(--b3);
  transform:translateY(-2px);
  box-shadow:0 6px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
}
.lobby-card-head {
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.04);
  display:flex; align-items:center; gap:10px;
}
.lobby-icon {
  font-size:18px; line-height:1; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  text-align:center;
  flex-shrink:0;
}
.lobby-info { flex:1; }
.lobby-name { font-family:var(--fd); font-weight:400; font-size:16px; color:var(--w); letter-spacing:2px; }
.lobby-sub { font-size:9px; color:var(--t3); font-family:var(--fm); margin-top:1px; }
.room-row {
  display:flex; align-items:center; gap:10px; padding:9px 16px;
  border-bottom:1px solid rgba(255,255,255,.03);
  cursor:pointer; transition:background .12s; -webkit-tap-highlight-color:transparent;
}
.room-row:last-child { border-bottom:none; }
.room-row:hover:not(.room-full) { background:rgba(255,255,255,.04); }
.room-row.room-full { opacity:.3; cursor:not-allowed; }
.room-num { font-size:8px; letter-spacing:2px; font-weight:600; color:var(--t4); min-width:38px; font-family:var(--fm); }
.room-status { flex:1; }
.room-state { font-size:12px; font-weight:600; color:var(--t); font-family:var(--fm); }
.room-players { font-size:9px; color:var(--t3); margin-top:1px; font-family:var(--fm); }
.room-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.dot-empty   { background:var(--b4); }
.dot-waiting { background:var(--silver); animation:livePulse 1.4s ease infinite; }
.dot-playing { background:var(--w); animation:livePulse 1.4s ease infinite; }
.room-action {
  font-size:9px; font-weight:600; letter-spacing:1px; font-family:var(--fm); color:var(--t3);
  transition:color .15s,transform .2s var(--sp);
  padding:4px 8px; border-radius:6px; border:1px solid transparent;
}
.room-row:hover:not(.room-full) .room-action {
  color:var(--w); transform:translateX(2px);
  border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.05);
}

/* ─── AUTH ────────────────────────────────────── */
.auth-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:80px 20px 24px; position:relative; z-index:1;
}
.auth-orb {
  position:fixed; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(90px); animation:orbFloat 14s ease-in-out infinite alternate;
}
.auth-orb-1 { width:400px; height:400px; background:radial-gradient(circle,rgba(255,255,255,.03) 0%,transparent 70%); top:-80px; left:-80px; }
.auth-orb-2 { width:300px; height:300px; background:radial-gradient(circle,rgba(255,255,255,.025) 0%,transparent 70%); bottom:-60px; right:-60px; animation-delay:-7s; }
@keyframes orbFloat { from{transform:translate(0,0)} to{transform:translate(24px,16px)} }
.auth-box {
  width:100%; max-width:380px; position:relative; z-index:1;
  background:rgba(17,17,17,.92); border:1px solid rgba(255,255,255,.08); border-radius:20px;
  padding:clamp(28px,5vw,48px) clamp(22px,4vw,40px);
  animation:fadeUp .5s var(--ex) both;
  backdrop-filter:blur(20px);
  box-shadow:0 24px 64px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
}
.auth-box::before {
  content:''; position:absolute; top:0; left:20%; right:20%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  border-radius:20px;
}
.auth-logo { font-family:var(--fd); text-align:center; font-size:clamp(22px,5vw,32px); letter-spacing:5px; color:var(--w); margin-bottom:2px; }
.auth-logo em { font-style:normal; color:var(--t2); }
.auth-tagline { text-align:center; color:var(--t3); font-size:9px; letter-spacing:3px; text-transform:uppercase; font-family:var(--fm); margin-bottom:24px; }
.auth-divider { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--b2); }
.auth-divider span { font-size:8px; letter-spacing:2px; color:var(--t4); text-transform:uppercase; font-family:var(--fm); }
.auth-form { display:flex; flex-direction:column; gap:12px; }
.field { display:flex; flex-direction:column; gap:5px; }
.field label { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--t3); font-weight:600; font-family:var(--fm); transition:color .15s; }
.field:focus-within label { color:var(--t2); }
.field input {
  background:var(--bg3); border:1px solid var(--b2); border-radius:2px;
  color:var(--t); font-family:var(--fm); font-size:14px; padding:11px 13px;
  outline:none; width:100%; transition:all .15s; -webkit-appearance:none;
}
.field input:focus { border-color:var(--b4); background:var(--bg4); }
.field input::placeholder { color:var(--t4); }
.auth-form .btn { margin-top:4px; width:100%; }
.auth-link { display:block; text-align:center; margin-top:16px; color:var(--t3); font-size:11px; text-decoration:none; transition:color .15s; font-family:var(--fm); }
.auth-link:hover { color:var(--t2); }
.auth-link span { color:var(--t2); font-weight:600; }
.alert { padding:10px 13px; border-radius:2px; font-size:11px; border-left:2px solid; font-family:var(--fm); animation:fadeUp .3s var(--ex) both; }
.alert-err { background:rgba(255,255,255,.04); border-color:var(--b4); color:var(--t2); }
.alert-ok  { background:rgba(255,255,255,.05); border-color:var(--silver); color:var(--silver); }

/* ─── GAME PAGE SHARED ────────────────────────── */
.game-page { padding:58px 0 0; position:relative; z-index:1; min-height:100vh; }
.game-topbar {
  background:rgba(10,10,10,.96); border-bottom:1px solid var(--b2);
  padding:7px clamp(12px,3vw,22px); display:flex; align-items:center;
  justify-content:space-between; gap:8px; flex-wrap:wrap;
  position:sticky; top:58px; z-index:100; backdrop-filter:blur(16px);
}
.game-name {
  font-family:var(--fd); font-weight:400; font-size:clamp(14px,2.8vw,18px);
  letter-spacing:2.5px; text-transform:uppercase; color:var(--w);
}
.hud { display:flex; gap:clamp(4px,.8vw,6px); flex-wrap:wrap; align-items:center; }
.hud-stat {
  text-align:center; padding:4px clamp(8px,1.5vw,12px);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:8px; min-width:48px;
  backdrop-filter:blur(8px);
}
.hud-label { font-size:6px; letter-spacing:2px; color:var(--t3); text-transform:uppercase; font-family:var(--fm); }
.hud-val { font-family:var(--fm); font-weight:700; font-size:clamp(14px,2.5vw,18px); color:var(--w); line-height:1.2; margin-top:1px; }
.hud-val.dim { color:var(--t3); }

.game-body {
  display:grid; grid-template-columns:1fr clamp(180px,20vw,240px);
  gap:clamp(8px,2vw,14px); padding:clamp(10px,2vw,16px) clamp(12px,3vw,22px) 48px; align-items:start;
}
@media(max-width:740px) { .game-body { grid-template-columns:1fr; } }

.game-arena {
  background:var(--bg2); border:1px solid rgba(255,255,255,.07); border-radius:16px;
  position:relative; overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.timer-row { display:flex; align-items:center; gap:7px; margin-bottom:3px; }
.timer-label { font-size:7px; letter-spacing:2px; color:var(--t3); font-weight:600; white-space:nowrap; font-family:var(--fm); }
.timer-track { flex:1; height:2px; background:var(--b2); border-radius:1px; overflow:hidden; }
.timer-fill { height:100%; border-radius:1px; transition:width .1s linear; background:var(--w); }
.timer-fill.warn { background:var(--silver); }

.g-overlay {
  position:absolute; inset:0; z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(10,10,10,.96); border-radius:3px; text-align:center;
  padding:clamp(14px,4vw,28px); gap:12px;
}
.g-title { font-family:var(--fd); font-weight:400; font-size:clamp(22px,5vw,36px); letter-spacing:4px; text-transform:uppercase; color:var(--w); }
.g-score { font-family:var(--fd); font-weight:400; font-size:clamp(56px,14vw,96px); color:var(--w); line-height:1; }
.g-sub { color:var(--t3); font-size:8px; letter-spacing:3px; font-family:var(--fm); text-transform:uppercase; }
.g-desc { color:var(--t3); font-size:11px; line-height:1.8; max-width:340px; font-family:var(--fm); }

/* ─── LEADERBOARD ─────────────────────────────── */
.lb-panel { background:var(--bg2); border:1px solid rgba(255,255,255,.07); border-radius:14px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.2); }
.lb-head { padding:9px 13px; background:var(--bg3); border-bottom:1px solid rgba(255,255,255,.05); font-size:8px; letter-spacing:3px; color:var(--t2); text-transform:uppercase; font-weight:600; font-family:var(--fm); }
.lb-row { display:flex; align-items:center; gap:8px; padding:7px 13px; border-bottom:1px solid rgba(255,255,255,.03); transition:background .1s; }
.lb-row:last-child { border-bottom:none; }
.lb-row:hover { background:var(--bg3); }
.lb-row.me { background:rgba(255,255,255,.05); border-left:2px solid rgba(255,255,255,.3); }
.lb-rank { font-size:9px; min-width:18px; font-weight:700; font-family:var(--fm); }
.r1{color:var(--w)} .r2{color:var(--silver)} .r3{color:var(--t2)} .rn{color:var(--t4)}
.lb-name { flex:1; font-size:11px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--fm); }
.lb-score-val { font-size:11px; color:var(--w); font-weight:700; font-family:var(--fm); }
.lb-empty { padding:20px; text-align:center; color:var(--t4); font-size:11px; font-family:var(--fm); }

/* ─── ONLINE SHARED ───────────────────────────── */
.online-status-bar {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg2); border:1px solid rgba(255,255,255,.07); border-radius:14px;
  padding:11px 15px; margin-bottom:10px; flex-wrap:wrap; gap:8px;
}
.online-player { display:flex; align-items:center; gap:10px; }
.player-avatar {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06); color:var(--t2); font-family:var(--fm);
}
.player-name { font-size:12px; font-weight:600; color:var(--w); font-family:var(--fm); }
.player-role { font-size:8px; letter-spacing:1.5px; color:var(--t3); text-transform:uppercase; font-family:var(--fm); }
.vs-badge { font-size:9px; font-weight:700; letter-spacing:3px; color:var(--t3); font-family:var(--fd); }

.win-title { font-family:var(--fd); font-weight:400; font-size:clamp(22px,6vw,38px); letter-spacing:4px; text-transform:uppercase; color:var(--w); }
.win-sub { color:var(--t3); font-size:11px; letter-spacing:2px; font-family:var(--fm); }

/* progress bars */
.progress-fill { height:100%; border-radius:4px; transition:width .3s var(--ex); }
.p1-prog { background:var(--w); }
.p2-prog { background:var(--t2); }
.prog-label { font-size:9px; letter-spacing:1px; color:var(--t3); font-family:var(--fm); margin-bottom:2px; }

/* ─── GAME-SPECIFIC ───────────────────────────── */
/* TTT */
.ttt-board {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--b2); max-width:340px; margin:0 auto;
  border:1px solid var(--b2); border-radius:2px; overflow:hidden;
}
.ttt-cell {
  aspect-ratio:1; background:var(--bg3);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fd); font-size:clamp(32px,9vw,56px);
  cursor:pointer; transition:background .1s; user-select:none;
  color:var(--t3); -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.ttt-cell:hover:not(.taken) { background:var(--bg4); }
.ttt-cell.taken { cursor:default; }
.ttt-cell.cx { color:var(--w); }
.ttt-cell.co { color:var(--silver); }
.ttt-cell.win-cell { background:var(--bg5); }
.ttt-cell.disabled { pointer-events:none; }

/* RPS */
.rps-choices { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding:clamp(14px,3vw,26px); }
.rps-btn {
  width:clamp(80px,18vw,104px); height:clamp(80px,18vw,104px);
  background:var(--bg3); border:1px solid var(--b3); border-radius:4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; cursor:pointer; transition:all .13s;
  font-size:clamp(28px,7vw,38px); -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.rps-btn span { font-size:8px; font-weight:600; letter-spacing:2px; color:var(--t3); text-transform:uppercase; font-family:var(--fm); }
.rps-btn:hover:not(:disabled) { border-color:var(--b4); background:var(--bg4); }
.rps-btn:active:not(:disabled) { transform:scale(.91); }
.rps-btn.selected { border-color:var(--w50); background:var(--bg4); }
.rps-btn:disabled { opacity:.3; cursor:not-allowed; }
.rps-result { display:flex; align-items:center; justify-content:center; gap:clamp(18px,5vw,38px); padding:18px; flex-wrap:wrap; }
.rps-side { text-align:center; }
.rps-choice-big { font-size:clamp(42px,10vw,62px); margin-bottom:6px; }
.rps-side-label { font-size:9px; letter-spacing:2px; color:var(--t3); text-transform:uppercase; font-family:var(--fm); }

/* Word guess */
.word-display { display:flex; gap:4px; justify-content:center; flex-wrap:wrap; padding:clamp(12px,3vw,20px) clamp(8px,2vw,18px) 0; }
.letter-box {
  width:clamp(32px,7vw,44px); height:clamp(40px,9vw,52px);
  background:var(--bg3); border:1px solid var(--b2); border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fm); font-size:clamp(15px,3.5vw,22px); font-weight:700;
  transition:all .2s;
}
.letter-box.filled { border-color:var(--b3); color:var(--w); }
.letter-box.correct { border-color:var(--w); background:var(--w10); color:var(--w); animation:pop .3s ease; }
.letter-box.wrong-pos { border-color:var(--silver); background:rgba(200,192,184,.06); color:var(--silver); }
.letter-box.wrong { border-color:var(--b2); background:var(--w02); color:var(--t3); }
.keyboard { display:flex; flex-direction:column; align-items:center; gap:4px; padding:clamp(8px,2vw,14px); }
.kb-row { display:flex; gap:3px; }
.kb-key {
  min-width:clamp(22px,5.5vw,32px); height:clamp(34px,8vw,42px);
  background:var(--bg3); border:1px solid var(--b2); border-radius:2px;
  color:var(--t); font-family:var(--fm); font-size:clamp(9px,2.2vw,12px);
  font-weight:600; cursor:pointer; transition:all .1s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; padding:0 2px;
}
.kb-key:hover:not(:disabled) { border-color:var(--b3); }
.kb-key:active:not(:disabled) { transform:scale(.88); }
.kb-key.k-correct { background:var(--w10); border-color:var(--w50); color:var(--w); }
.kb-key.k-wrong-pos { background:rgba(200,192,184,.05); border-color:var(--silver); color:var(--silver); }
.kb-key.k-wrong { background:var(--bg); border-color:var(--b); color:var(--t4); }
.kb-key.wide { min-width:clamp(38px,8vw,50px); font-size:clamp(7px,1.5vw,8px); }

/* Math */
.math-eq {
  font-family:var(--fm); font-size:clamp(36px,8vw,68px); font-weight:700;
  text-align:center; padding:clamp(18px,4vw,32px) 20px; color:var(--w);
  min-height:110px; display:flex; align-items:center; justify-content:center;
}
.math-input {
  width:100%; background:var(--bg3); border:1px solid var(--b2); border-radius:2px;
  color:var(--w); font-family:var(--fm); font-size:clamp(20px,4.5vw,34px);
  font-weight:700; padding:13px 15px; outline:none; text-align:center; transition:all .13s;
}
.math-input:focus { border-color:var(--b4); }
.math-input.correct { border-color:var(--w50); }
.math-input.wrong { animation:shake .28s ease; border-color:var(--t3); }

/* Connect4 */
.c4-board {
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
  padding:clamp(12px,3vw,18px); max-width:420px; margin:0 auto; border-radius:2px;
}
.c4-col { display:flex; flex-direction:column; gap:4px; cursor:pointer; }
.c4-hover-cell { height:7px; border-radius:1px; background:var(--b3); opacity:0; transition:opacity .12s; }
.c4-col:hover .c4-hover-cell { opacity:1; }
.c4-cell { aspect-ratio:1; border-radius:50%; background:var(--bg4); border:1px solid var(--b2); transition:all .15s; }
.c4-cell.p1 { background:var(--w); border-color:var(--w); }
.c4-cell.p2 { background:var(--silver); border-color:var(--silver); }
.c4-cell.win { animation:winPop .35s ease both; }
.p1-text { color:var(--w); }
.p2-text { color:var(--silver); }

/* ─── TRIVIA ──────────────────────────────────── */
.trivia-q {
  font-family:var(--fb); font-size:clamp(14px,2.8vw,18px); font-weight:600;
  text-align:center; padding:clamp(16px,3vw,26px) clamp(14px,3vw,20px);
  color:var(--w); line-height:1.5;
}
.trivia-opts {
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  padding:0 clamp(12px,3vw,20px) clamp(14px,3vw,22px);
}
.trivia-opt {
  padding:clamp(10px,2vw,14px) clamp(10px,2vw,16px);
  background:var(--bg3); border:1px solid var(--b2); border-radius:2px;
  cursor:pointer; font-family:var(--fm); font-size:clamp(10px,1.9vw,12px);
  font-weight:600; color:var(--t2); transition:all .12s; text-align:center;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.trivia-opt:hover:not(:disabled) { border-color:var(--b4); color:var(--w); background:var(--bg4); }
.trivia-opt:active:not(:disabled) { transform:scale(.96); }
.trivia-opt.correct { background:var(--w10); border-color:var(--w50); color:var(--w); }
.trivia-opt.wrong   { background:var(--w02); border-color:var(--b3); color:var(--t3); }
.trivia-opt:disabled { cursor:not-allowed; opacity:.7; }
.trivia-round-info { font-family:var(--fm); font-size:9px; letter-spacing:2px; color:var(--t3); text-align:center; padding-bottom:6px; text-transform:uppercase; }

/* ─── TYPING RACE ─────────────────────────────── */
.race-text {
  font-family:var(--fm); font-size:clamp(13px,2.4vw,17px); line-height:1.9;
  padding:clamp(14px,2.5vw,20px); background:var(--bg3); border:1px solid var(--b2);
  border-radius:2px; margin-bottom:8px; word-break:break-word;
}
.race-char.done    { color:var(--w); }
.race-char.current { background:var(--w); color:#0a0a0a; border-radius:1px; }
.race-char.error   { background:var(--t3); color:var(--bg); }
.race-char.todo    { color:var(--t4); }
.race-input {
  width:100%; background:var(--bg3); border:1px solid var(--b3); border-radius:2px;
  color:var(--w); font-family:var(--fm); font-size:clamp(13px,2.2vw,16px);
  padding:11px 13px; outline:none; transition:all .13s;
}
.race-input:focus { border-color:var(--b4); }

/* ─── NUM BLITZ ───────────────────────────────── */
.nblitz-num {
  font-family:var(--fd); font-size:clamp(64px,16vw,120px); font-weight:400;
  text-align:center; padding:clamp(16px,4vw,30px) 20px; color:var(--w); line-height:1;
}
.nblitz-question { font-family:var(--fm); font-size:clamp(12px,2.2vw,15px); color:var(--t3); text-align:center; margin-bottom:8px; letter-spacing:1px; }
.nblitz-btns { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding:0 clamp(12px,3vw,20px) clamp(14px,2.5vw,20px); }
.nblitz-btn {
  padding:clamp(12px,2vw,16px) clamp(24px,4.5vw,42px);
  background:var(--bg3); border:1px solid var(--b3); border-radius:2px;
  font-family:var(--fd); font-size:clamp(16px,3.5vw,24px); font-weight:400;
  color:var(--t2); cursor:pointer; transition:all .12s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; letter-spacing:2px;
}
.nblitz-btn:hover:not(:disabled) { border-color:var(--b4); color:var(--w); background:var(--bg4); }
.nblitz-btn:active:not(:disabled) { transform:scale(.93); }
.nblitz-btn.correct-flash { background:var(--w10); border-color:var(--w50); color:var(--w); }
.nblitz-btn.wrong-flash   { background:var(--w04); border-color:var(--b3); color:var(--t3); }

/* ─── COLOR DUEL ──────────────────────────────── */
.color-box {
  width:clamp(100px,24vw,155px); height:clamp(100px,24vw,155px);
  border-radius:4px; border:1px solid transparent;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fm); font-size:clamp(9px,1.8vw,12px); font-weight:700;
  letter-spacing:2px; text-transform:uppercase; text-align:center; line-height:1.3;
  transition:transform .1s; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.color-box:active { transform:scale(.92); }
.color-targets { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding:clamp(10px,2vw,18px); }

/* ─── EMOJI GUESS ─────────────────────────────── */
.emoji-display { font-size:clamp(52px,13vw,82px); text-align:center; padding:clamp(18px,4vw,30px); line-height:1; }
.emoji-input {
  width:100%; background:var(--bg3); border:1px solid var(--b2); border-radius:2px;
  color:var(--w); font-family:var(--fm); font-size:clamp(15px,2.8vw,20px); font-weight:700;
  padding:12px 14px; outline:none; text-align:center; letter-spacing:3px;
  text-transform:uppercase; transition:all .13s;
}
.emoji-input:focus { border-color:var(--b4); }
.emoji-input.correct { border-color:var(--w50); }
.emoji-input.wrong   { border-color:var(--t3); animation:shake .28s ease; }
.emoji-hint { font-family:var(--fm); font-size:11px; color:var(--t3); text-align:center; padding:4px 0 12px; letter-spacing:2px; }

/* ─── SEQUENCE STORM ──────────────────────────── */
.seq-buttons { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:300px; width:100%; }
.seq-btn {
  aspect-ratio:1; border-radius:6px; border:2px solid var(--b3);
  cursor:pointer; transition:transform .1s,opacity .1s;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(26px,6vw,36px); opacity:.3;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.seq-btn:hover:not(.disabled) { opacity:.55; }
.seq-btn.disabled { cursor:default; }
.seq-btn.lit { opacity:1!important; transform:scale(1.07)!important; }

/* ─── HEX FLIP ────────────────────────────────── */
.hex-btn {
  width:clamp(48px,11vw,64px); height:clamp(48px,11vw,64px); border-radius:6px;
  border:2px solid var(--b3); cursor:pointer; transition:all .15s;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; font-size:0;
}
.hex-btn:active { transform:scale(.88); }
.pal-btn {
  width:clamp(40px,10vw,54px); height:clamp(40px,10vw,54px); border-radius:6px;
  border:2px solid transparent; cursor:pointer; transition:all .13s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.pal-btn:hover { transform:scale(1.08); }
.pal-btn:active { transform:scale(.9); }
.pal-btn.selected { border-color:var(--w); }

/* ─── SOLO NEW GAMES ──────────────────────────── */
/* Bubble blaster */
.bbl {
  position:absolute; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  box-sizing:border-box; font-family:var(--fm); color:rgba(255,255,255,.6);
  transition:transform .08s var(--sp);
}
.bbl:active { transform:scale(.82)!important; }

/* Hunt grid */
.hunt-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:3px;
  padding:clamp(12px,3vw,20px); max-width:380px; margin:0 auto;
}
.hunt-cell {
  aspect-ratio:1; background:var(--bg3); border:1px solid var(--b2); border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fm); font-size:clamp(13px,2.8vw,18px); font-weight:700;
  color:var(--t); cursor:pointer; transition:all .08s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none;
}
.hunt-cell:hover:not(.clicked):not(.disabled) { background:var(--bg4); border-color:var(--b3); color:var(--w); }
.hunt-cell:active:not(.clicked):not(.disabled) { transform:scale(.9); }
.hunt-cell.clicked  { background:var(--bg); color:var(--b2); border-color:var(--b); cursor:default; }
.hunt-cell.next     { border-color:var(--w); color:var(--w); background:var(--w06); }
.hunt-cell.disabled { pointer-events:none; opacity:.3; }

/* Type word */
.type-word {
  font-family:var(--fd); font-size:clamp(30px,7.5vw,62px); font-weight:400;
  text-align:center; padding:clamp(20px,4vw,36px) 20px; color:var(--w);
  letter-spacing:3px; text-transform:uppercase; min-height:105px;
  display:flex; align-items:center; justify-content:center;
}
.type-input-wrap { padding:0 clamp(12px,3vw,22px) clamp(12px,2.5vw,20px); }
.type-input {
  width:100%; background:var(--bg3); border:1px solid var(--b2); border-radius:2px;
  color:var(--w); font-family:var(--fm); font-size:clamp(14px,2.8vw,18px); font-weight:700;
  padding:12px 14px; outline:none; text-align:center; letter-spacing:2px; transition:all .13s;
}
.type-input:focus { border-color:var(--b3); }
.type-input.correct { border-color:var(--w50); }
.type-input.wrong   { border-color:var(--t3); animation:shake .28s ease; }

/* merge 2048 */
.merge-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:clamp(10px,2.5vw,16px); max-width:380px; margin:0 auto; }
.merge-cell {
  aspect-ratio:1; border-radius:2px; display:flex; align-items:center; justify-content:center;
  font-family:var(--fm); font-weight:700; font-size:clamp(12px,2.8vw,20px);
  color:var(--w); background:var(--bg3); border:1px solid var(--b); transition:background .1s;
}
.merge-cell.v2    { background:#141414; color:var(--t3); }
.merge-cell.v4    { background:#1a1a1a; }
.merge-cell.v8    { background:#222; }
.merge-cell.v16   { background:#2a2a2a; }
.merge-cell.v32   { background:#333; }
.merge-cell.v64   { background:#3c3c3c; }
.merge-cell.v128  { background:#464640; color:var(--silver); font-size:clamp(10px,2.2vw,16px); }
.merge-cell.v256  { background:#505048; color:var(--silver); font-size:clamp(10px,2.2vw,16px); }
.merge-cell.v512  { background:#5c5c50; color:var(--t); font-size:clamp(9px,2vw,14px); }
.merge-cell.v1024 { background:#686858; color:var(--w); font-size:clamp(8px,1.8vw,12px); }
.merge-cell.v2048 { background:var(--w); color:#0a0a0a; font-size:clamp(8px,1.8vw,12px); }
.merge-cell.merged { animation:mergedPop .18s ease both; }
@keyframes mergedPop { 0%{transform:scale(1)} 50%{transform:scale(1.14)} 100%{transform:scale(1)} }

/* ─── UTILS & ANIM ────────────────────────────── */
.float-txt {
  position:absolute; pointer-events:none; font-weight:700;
  animation:floatUp .75s ease-out both; z-index:60; font-size:14px; font-family:var(--fm);
}
@keyframes floatUp { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-48px)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
@keyframes pop { 0%{transform:scale(0);opacity:0} 60%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes winPop { 0%{transform:scale(1)} 50%{transform:scale(1.1)} 100%{transform:scale(1)} }
.anim-fadeup { animation:fadeUp .32s ease both; }

/* d-pad mobile */
.dpad { display:none; flex-direction:column; align-items:center; gap:3px; padding:9px 10px 4px; }
.dpad-row { display:flex; gap:3px; }
.dp {
  width:46px; height:46px; background:var(--bg3); border:1px solid var(--b2); border-radius:2px;
  color:var(--t2); font-size:16px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:all .08s;
}
.dp:active { background:var(--bg4); transform:scale(.9); }
@media(max-width:740px) { .dpad { display:flex; } }

/* scrollbar */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.18); }

/* auth brand bar */
.auth-brand {
  position:fixed; top:0; left:0; right:0; height:58px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px,4vw,44px); z-index:100;
  border-bottom:1px solid var(--b2); background:rgba(10,10,10,.8);
  backdrop-filter:blur(20px);
}
.auth-brand-logo { font-family:var(--fd); font-size:20px; letter-spacing:4px; color:var(--w); text-decoration:none; }
.auth-brand-logo em { font-style:normal; color:var(--t2); }
.auth-brand-tag { font-family:var(--fm); font-size:8px; letter-spacing:3px; color:var(--t4); text-transform:uppercase; }

/* ─── DECORATIVE EXTRAS ───────────────────────── */
/* Oyun grid için bölüm başlığı dekor */
.section-label::before {
  content:'▸';
  color:var(--t4);
  font-size:8px;
  margin-right:-6px;
}

/* Lobby card için "YENİ" badge */
.lobby-card .card-new {
  position:absolute; top:12px; right:12px;
  background:rgba(255,255,255,.1); color:var(--w); font-size:7px; font-weight:700;
  letter-spacing:2px; padding:3px 9px; font-family:var(--fm);
  text-transform:uppercase; border-radius:20px;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  z-index:2;
  box-shadow:0 0 14px rgba(255,255,255,.06);
}

/* online-wrap içi yumuşak */
.online-wrap { max-width:620px; margin:0 auto; padding:clamp(12px,3vw,20px) clamp(12px,3vw,22px) 60px; }

/* disc banner güncelle */
.disc-banner {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:10px;
  padding:9px 13px; margin-bottom:10px; font-size:11px; font-family:var(--fm);
  color:var(--t2); text-align:center; display:none;
}

/* waiting pulse */
.waiting-pulse { display:flex; align-items:center; gap:8px; color:var(--t2); font-size:11px; font-weight:600; font-family:var(--fm); }
.waiting-pulse::before {
  content:''; display:block; width:7px; height:7px; border-radius:50%;
  background:var(--silver); animation:blink 1s ease infinite;
  flex-shrink:0;
  box-shadow:0 0 8px rgba(200,192,184,.3);
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* Hud label rengi */
.hud-label { font-size:6px; letter-spacing:2px; color:var(--t3); text-transform:uppercase; font-family:var(--fm); }
.hud-val { font-family:var(--fm); font-weight:700; font-size:clamp(14px,2.5vw,18px); color:var(--w); line-height:1.2; margin-top:1px; }
.hud-val.dim { color:var(--t3); }

/* Win overlay yuvarlat */
.win-overlay {
  position:absolute; inset:0; background:rgba(10,10,10,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; z-index:20; border-radius:16px; padding:20px; text-align:center;
  backdrop-filter:blur(8px);
}

/* Btn border-radius yumuşat */
.btn { border-radius:10px; }
.btn-sm { border-radius:8px; }

/* Scrollbar */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.18); }

/* field input yumuşat */
.field input { border-radius:8px; }

/* Ambient glow on page load */
@keyframes ambientFade {
  from { opacity:0; }
  to   { opacity:1; }
}

/* Öne çıkan oyun kartı - özel parlayan kenar */
.game-card.featured {
  border-color:rgba(255,255,255,.14);
  box-shadow:0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.07);
}

/* Progress bar yumuşat */
.progress-bar { height:3px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; margin-bottom:4px; }
.progress-fill { height:100%; border-radius:4px; transition:width .3s var(--ex); }

/* Auth orb hafif güçlendir */
.auth-orb-1 { width:500px; height:500px; background:radial-gradient(circle,rgba(255,255,255,.04) 0%,transparent 70%); top:-120px; left:-120px; }
.auth-orb-2 { width:400px; height:400px; background:radial-gradient(circle,rgba(255,255,255,.03) 0%,transparent 70%); bottom:-80px; right:-80px; animation-delay:-7s; }

/* ═══ LEGACY ALIAS BRIDGE (v6 neon → v6.5 monochrome) ═══
   Eski PHP dosyalarında var(--cyan), var(--text) vb. geçmeye devam
   edebilir; buradaki alias'lar sayesinde monochrome değerlere düşer. */
:root {
  /* old palette aliases → monochrome equivalents */
  --cyan:         var(--w);
  --cyan2:        var(--silver);
  --emerald:      var(--t);
  --gold:         var(--silver);
  --violet:       var(--t2);
  --red:          var(--t3);
  --orange:       var(--t2);
  --white:        var(--w);
  --off:          var(--t);
  --mid:          var(--t3);
  --dim:          var(--t4);
  --rose:         var(--t3);
  --green:        var(--silver);
  --muted:        var(--t3);
  --glass2:       var(--w04);

  /* old text aliases */
  --text:         var(--t);
  --text2:        var(--t2);
  --text3:        var(--t3);
  --text4:        var(--t4);

  /* old border aliases */
  --border:       var(--b);
  --border2:      var(--b2);
  --border3:      var(--b3);

  /* old font aliases */
  --font-display: var(--fd);
  --font-mono:    var(--fm);
  --font-body:    var(--fb);

  /* old easing aliases */
  --ease-expo:   var(--ex);
  --ease-spring: var(--sp);
  --ease-back:   var(--sp);
}