/* QuiKash! Casino — main stylesheet. Dark neon-noir theme. */
:root {
  --bg-0: #08070d;
  --bg-1: #11101a;
  --bg-2: #1a1828;
  --bg-3: #232037;
  --line: #312d4a;
  --text: #f3f1ff;
  --muted: #9b96b8;
  --gold: #f5c542;
  --gold-bright: #ffd95e;
  --red: #ff4763;
  --green: #2dd97b;
  --blue: #4b86ff;
  --purple: #9b6bff;
  --neon: #00f0c8;
  --shadow-gold: 0 0 24px rgba(245, 197, 66, .35), 0 0 60px rgba(245, 197, 66, .15);
  --shadow-neon: 0 0 24px rgba(0, 240, 200, .4), 0 0 60px rgba(0, 240, 200, .15);
}

* { box-sizing: border-box; }

/* Hide number input spinners globally */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse at top, #1a1730 0%, #08070d 60%) fixed;
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-bright); text-decoration: none; }
a:hover { color: var(--gold); text-shadow: 0 0 8px rgba(245, 197, 66, .6); }

button {
  font-family: inherit;
  cursor: pointer;
}

/* ============== TOP NAV ============== */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: rgba(8, 7, 13, .85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav .brand {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 1px;
  background: linear-gradient(135deg, var(--gold-bright), var(--red));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
}
.nav .brand .accent { color: var(--neon); -webkit-text-fill-color: var(--neon); }
.nav-links { display: flex; gap: 18px; align-items: center; }
.nav-links a {
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all .2s;
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-balance {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(245,197,66,.15), rgba(245,197,66,.05));
  border: 1px solid rgba(245,197,66,.3);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  color: var(--gold-bright);
}

/* ============== HERO ============== */
.hero {
  text-align: center;
  padding: 80px 32px 40px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 50%, rgba(245,197,66,.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(0,240,200,.15) 0%, transparent 50%);
  pointer-events: none;
  animation: hero-pulse 8s ease-in-out infinite;
}
@keyframes hero-pulse {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}
.hero h1 {
  font-size: clamp(40px, 8vw, 84px);
  margin: 0 0 16px;
  font-weight: 900;
  letter-spacing: -1px;
  background: linear-gradient(180deg, #ffeea3 0%, var(--gold) 50%, #b88a18 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(245, 197, 66, .3);
}
.hero p {
  font-size: 20px;
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto 32px;
  line-height: 1.5;
}
.cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1100;
  padding: 14px 28px;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .5px;
  box-shadow: 0 8px 24px rgba(245, 197, 66, .35);
  transition: all .2s;
  cursor: pointer;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(245, 197, 66, .55);
  filter: brightness(1.05);
}
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.secondary {
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
}
.btn.secondary:hover { background: rgba(255,255,255,.1); }
.btn.danger {
  background: linear-gradient(135deg, #ff5e7a, var(--red));
  color: white;
  box-shadow: 0 8px 24px rgba(255, 71, 99, .35);
}
.btn.green {
  background: linear-gradient(135deg, #5be595, var(--green));
  color: #04150a;
  box-shadow: 0 8px 24px rgba(45, 217, 123, .35);
}

/* ============== GAME GRID ============== */
.section { padding: 60px 32px; max-width: 1280px; margin: 0 auto; }
.section h2 {
  font-size: 32px;
  margin: 0 0 24px;
  font-weight: 900;
  letter-spacing: -.5px;
}
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.game-card {
  position: relative;
  background: linear-gradient(160deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: all .3s;
  text-decoration: none;
  color: var(--text);
  display: block;
}
.game-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--gold), var(--neon), var(--purple));
  border-radius: 16px;
  opacity: 0;
  z-index: -1;
  transition: opacity .3s;
}
.game-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
}
.game-card:hover::before { opacity: 1; }
.game-card .icon {
  font-size: 56px;
  margin-bottom: 12px;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(245, 197, 66, .4));
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.game-card h3 {
  margin: 8px 0 4px;
  font-size: 20px;
  font-weight: 800;
}
.game-card p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* ============== AUTH FORM ============== */
.auth-wrap {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 80px rgba(0,0,0,.5);
}
.auth-card h2 {
  margin: 0 0 8px;
  font-size: 28px;
  text-align: center;
}
.auth-card p { color: var(--muted); text-align: center; margin-bottom: 28px; }
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 197, 66, .15);
}
.error-msg {
  color: var(--red);
  font-size: 14px;
  text-align: center;
  margin-top: 12px;
  min-height: 20px;
}
.success-msg { color: var(--green); }

/* ============== GAME SHELL ============== */
.game-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px;
}
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.game-header h1 {
  margin: 0;
  font-size: 36px;
  font-weight: 900;
}
.game-stage {
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.bet-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
  flex-wrap: wrap;
}
.bet-row .field { margin: 0; flex: 1; min-width: 140px; }
.bet-row .field label { margin-bottom: 4px; }

.result-banner {
  margin-top: 20px;
  padding: 16px 24px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 18px;
  text-align: center;
  animation: banner-in .4s ease-out;
}
.result-banner.win {
  background: linear-gradient(135deg, rgba(45, 217, 123, .2), rgba(45, 217, 123, .05));
  border: 1px solid rgba(45, 217, 123, .5);
  color: var(--green);
  box-shadow: 0 0 32px rgba(45, 217, 123, .3);
}
.result-banner.lose {
  background: linear-gradient(135deg, rgba(255, 71, 99, .2), rgba(255, 71, 99, .05));
  border: 1px solid rgba(255, 71, 99, .5);
  color: var(--red);
}
@keyframes banner-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============== GENERIC ============== */
.muted { color: var(--muted); }
.gold { color: var(--gold-bright); }
.center { text-align: center; }
.spacer { height: 16px; }
.flex { display: flex; gap: 12px; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.grow { flex: 1; }

.card {
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
th {
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 11px;
  background: rgba(0,0,0,.25);
  position: sticky;
  top: 0;
  z-index: 2;
}
thead tr { border-bottom: 2px solid var(--line); }
tbody tr { transition: background .15s ease; }
tbody tr:nth-child(even) td { background: rgba(255,255,255,.015); }
tbody tr:hover td { background: rgba(245,197,66,.04); }

.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.tag.gold { background: rgba(245,197,66,.15); color: var(--gold-bright); border: 1px solid rgba(245,197,66,.3); }
.tag.green { background: rgba(45,217,123,.15); color: var(--green); border: 1px solid rgba(45,217,123,.3); }
.tag.red { background: rgba(255,71,99,.15); color: var(--red); border: 1px solid rgba(255,71,99,.3); }
.tag.blue { background: rgba(75,134,255,.15); color: var(--blue); border: 1px solid rgba(75,134,255,.3); }
.tag.purple { background: rgba(155,107,255,.15); color: var(--purple); border: 1px solid rgba(155,107,255,.3); }

/* Loading spinner */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  display: inline-block;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--gold);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5), 0 0 24px rgba(245,197,66,.3);
  opacity: 0;
  transition: all .25s ease-out;
  z-index: 1000;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: var(--red); }
.toast.success { border-color: var(--green); }

/* Coin */
.coin {
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--gold-bright), var(--gold) 60%, #8a6610);
  box-shadow: var(--shadow-gold), inset 0 -8px 16px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; font-weight: 900; color: #4a3300;
  margin: 24px auto;
}
.coin.flipping { animation: coinflip 1.2s ease-out; }
@keyframes coinflip { 0% { transform: rotateY(0); } 100% { transform: rotateY(1800deg); } }

/* Slot reels */
.slots-stage { display: flex; justify-content: center; gap: 16px; margin: 32px 0; }
.reel {
  width: 100px; height: 130px;
  background: linear-gradient(180deg, var(--bg-0), var(--bg-1));
  border: 2px solid var(--gold);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.6), var(--shadow-gold);
  overflow: hidden;
}
.reel.spinning { animation: reel-shake .08s linear infinite; }
@keyframes reel-shake { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* Cards */
.card-face {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 70px; height: 100px;
  background: white; color: #111; border-radius: 8px;
  font-weight: 800; font-size: 22px;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  margin: 4px;
  border: 1px solid #ccc;
}
.card-face.red { color: #c01030; }
.card-face.back { background: repeating-linear-gradient(45deg, #2a2052, #2a2052 6px, #3a2c6e 6px, #3a2c6e 12px); color: transparent; }
.hand { display: flex; flex-wrap: wrap; justify-content: center; min-height: 110px; }

/* Mines grid */
.mines-grid { display: grid; gap: 8px; width: 100%; max-width: 460px; margin: 24px auto; }
.mine-cell {
  aspect-ratio: 1 / 1; min-height: 60px; width: 100%;
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; line-height: 1; cursor: pointer; transition: all .2s;
}
.mine-cell::before { content: ''; display: block; padding-top: 100%; grid-row: 1; grid-column: 1; }
.mine-cell > * { grid-row: 1; grid-column: 1; }
.mine-cell:hover:not(.revealed) { background: var(--bg-3); transform: scale(1.05); border-color: var(--green); box-shadow: 0 0 14px rgba(0,231,1,.3); }
/* Revealed cells must be completely inert so rapid-fire clicks don't hit
   diamonds by accident — pointer-events:none also disables hover. */
.mine-cell.revealed { cursor: default; pointer-events: none; }
.mine-cell.safe { background: linear-gradient(135deg, rgba(45,217,123,.3), rgba(45,217,123,.1)); border-color: var(--green); }
.mine-cell.safe.dimmed {
  /* End-of-game peek: show the gems but faded so the player can see what
     the rest of the board held without it looking like a live win. */
  background: linear-gradient(135deg, rgba(45,217,123,.12), rgba(45,217,123,.04));
  border-color: rgba(45,217,123,.35);
  opacity: .55;
  filter: saturate(.7);
}
.mine-cell.mine { background: linear-gradient(135deg, rgba(255,71,99,.3), rgba(255,71,99,.1)); border-color: var(--red); animation: shake .3s; }
.mine-cell.mine.dimmed {
  /* Ghost-layout bombs on cashout — faded and no shake. */
  background: linear-gradient(135deg, rgba(255,71,99,.12), rgba(255,71,99,.04));
  border-color: rgba(255,71,99,.35);
  opacity: .55;
  filter: saturate(.7);
  animation: none;
}
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.mine-cell.pressing {
  /* Loops continuously while the cell is in the press state so that a cell
     whose deadline has been extended by a later click keeps wobbling for the
     full grace window. 560ms = two full wobble cycles over the 280ms base
     press window, which matches the Dragon Tower pacing while still reading
     as responsive on fast clicks. */
  animation: minePress 560ms ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(255,255,255,.15) inset;
  cursor: default;
}
@keyframes minePress {
  0%   { transform: scale(1)   rotate(0deg); }
  25%  { transform: scale(.93) rotate(-2.5deg); }
  50%  { transform: scale(.97) rotate(0deg); }
  75%  { transform: scale(.93) rotate(2.5deg); }
  100% { transform: scale(1)   rotate(0deg); }
}

/* Crash */
.crash-stage { position: relative; height: 320px; background: radial-gradient(ellipse at bottom, #1a1730, var(--bg-0)); border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.crash-mult { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 72px; font-weight: 900; color: var(--gold-bright); text-shadow: 0 0 30px rgba(245,197,66,.6); }
.crash-mult.crashed { color: var(--red); animation: shake .4s; }
.crash-rocket { position: absolute; bottom: 0; left: 0; font-size: 32px; transition: all .1s linear; }

/* Roulette */
.roulette-board { display: grid; grid-template-columns: 50px repeat(12, 1fr); gap: 4px; margin: 16px 0; font-size: 13px; }
.r-cell { padding: 12px 6px; text-align: center; cursor: pointer; border-radius: 4px; font-weight: 700; user-select: none; transition: all .15s; border: 2px solid transparent; position: relative; }
.r-cell.zero { background: var(--green); color: white; grid-row: span 3; display: flex; align-items: center; justify-content: center; }
.r-cell.red { background: linear-gradient(135deg, #c01030, #8a0820); color: white; }
.r-cell.black { background: linear-gradient(135deg, #2a2032, #15101a); color: white; }
.r-cell.outside { background: var(--bg-3); color: var(--text); }
.r-cell:hover { transform: scale(1.06); border-color: var(--green); box-shadow: 0 0 10px rgba(0,231,1,.3); }
/* Hot-zone hover — when the player hovers a split/street/corner/line/basket
   seam, the affected number cells get this outline. */
.r-cell.hz-hover { box-shadow: 0 0 0 2px #8bd0ff inset, 0 0 14px rgba(139,208,255,.55); }
.r-cell.has-bet { border-color: var(--gold-bright); box-shadow: 0 0 12px rgba(245,197,66,.6); }
/* Hot zones (seam bets) are tiny circular targets layered over the felt.
   The click target stays small so it does not block adjacent cells, but
   when a chip is placed the `.chip-overlay` child grows to the same 34px
   chip image used on normal `.r-cell` bets. */
.r-hotzone {
  z-index: 5;
  background: rgba(0,231,1,.0);
  border-radius: 50%;
  cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease;
}
.r-hotzone:hover {
  background: rgba(0,231,1,.65);
  box-shadow: 0 0 10px rgba(0,231,1,.8);
}
.r-hotzone.has-bet {
  /* The seam itself is transparent — the chip overlay carries the visual. */
  background: transparent;
  box-shadow: none;
}
.r-hotzone.has-bet .chip-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 34px; height: 34px;
  padding: 0;
  background: url('/img/chip.png') center/contain no-repeat;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  text-shadow:
    0 0 3px rgba(0, 0, 0, .95),
    0 1px 2px rgba(0, 0, 0, .9),
    0 0 6px rgba(0, 0, 0, .7);
  letter-spacing: .2px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .6));
  pointer-events: none;
  z-index: 6;
  animation: chipPop .18s ease-out;
  /* Block text selection — clicking-and-dragging across chip overlays
     was selecting the dollar amount text and looked broken. */
  user-select: none;
  -webkit-user-select: none;
}
/* Outside-bet split hot zones — click-only shortcuts that divide the chip
   across 2–4 outside bets (dozens, columns, low/even/red/black/odd/high,
   plus a 3-way corner combining number 1, number 4 and 1st 12). They
   never carry a chip themselves; the money goes to the real outside-bet
   cells. A hover pill shows the per-target split preview. */
.r-hotzone.hz-outsideSplit {
  background: rgba(0,231,1,0);
  border-radius: 10px;
}
.r-hotzone.hz-outsideSplit:hover {
  background: rgba(0,231,1,.45);
  box-shadow: 0 0 12px rgba(0,231,1,.75);
}
.r-hotzone.hz-outsideSplit .hz-split-preview {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -130%);
  padding: 4px 8px;
  background: rgba(12, 22, 34, .92);
  border: 1px solid rgba(0, 231, 1, .55);
  border-radius: 8px;
  color: #d4ffd4;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .6);
}
.r-hotzone.hz-outsideSplit:hover .hz-split-preview { opacity: 1; }
.r-cell .chip { position: absolute; top: 2px; right: 4px; font-size: 10px; color: var(--gold-bright); font-weight: 800; }
.r-cell.lit { box-shadow: 0 0 0 3px var(--gold-bright), 0 0 18px rgba(245,197,66,.7); transform: scale(1.08); z-index: 2; }
.roulette-board { grid-auto-rows: 46px; background: linear-gradient(160deg,#0e3a1a,#073015); padding: 10px; border-radius: 10px; border: 1px solid rgba(0,231,1,.2); }
.r-cell .chip-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1);
  /* Chip is a real image — size it to comfortably fit the inscription. */
  width: 34px; height: 34px;
  padding: 0;
  /* PNG with its own circular chip border; no extra background / border. */
  background: url('/img/chip.png') center/contain no-repeat;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  /* Text label is the dollar amount, painted over the chip center with a
     subtle stroke so it stays legible against the red/white PNG. */
  display: flex; align-items: center; justify-content: center;
  text-shadow:
    0 0 3px rgba(0, 0, 0, .95),
    0 1px 2px rgba(0, 0, 0, .9),
    0 0 6px rgba(0, 0, 0, .7);
  pointer-events: none;
  z-index: 3;
  letter-spacing: .2px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .6));
  /* No text selection on chip dollar amounts. */
  user-select: none;
  -webkit-user-select: none;
}
.r-cell.has-bet .chip-overlay { animation: chipPop .18s ease-out; }
@keyframes chipPop { from { transform: translate(-50%, -50%) scale(.6); } to { transform: translate(-50%, -50%) scale(1); } }
.roulette-strip-wrap { position: relative; height: 64px; margin: 0 0 14px; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg,#08140a,#041006); border: 1px solid rgba(0,231,1,.25); box-shadow: inset 0 0 24px rgba(0,0,0,.6); }
.roulette-strip-wrap::before, .roulette-strip-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; }
.roulette-strip-wrap::before { left: 0; background: linear-gradient(90deg, rgba(0,0,0,.85), transparent); }
.roulette-strip-wrap::after { right: 0; background: linear-gradient(270deg, rgba(0,0,0,.85), transparent); }
.roulette-strip-marker { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--gold-bright, #f5c542); box-shadow: 0 0 12px rgba(245,197,66,.9); z-index: 3; }
.roulette-strip { position: absolute; top: 0; left: 0; height: 100%; display: flex; will-change: transform; }
.roulette-strip .s-cell { flex: 0 0 56px; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #fff; border-right: 1px solid rgba(0,0,0,.6); }
.roulette-strip .s-cell.red { background: linear-gradient(180deg,#c01030,#8a0820); }
.roulette-strip .s-cell.black { background: linear-gradient(180deg,#2a2032,#15101a); }
.roulette-strip .s-cell.green { background: linear-gradient(180deg,#0f8a35,#075018); }
#turbo.active { background: var(--gold-bright, #f5c542); color: #1a1208; }
.r-cell .r-label { position: relative; z-index: 1; }

/* Roulette presets panel (save/load/delete a set of bets) */
.r-presets { display: flex; flex-direction: column; gap: 6px; }
.r-presets-head { display: flex; gap: 6px; }
/* Specificity raised via .gp-panel so this beats the generic
   .gp-panel .gp-btn rule in stake.css that would otherwise upscale this
   compact preset Save button to full-row size. */
.gp-panel .r-presets-head .gp-btn,
.r-presets-head .gp-btn { flex: 1; width: auto; min-height: 0; padding: 8px 10px; font-size: 12px; }
.r-presets-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.r-preset-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  background: rgba(12, 22, 34, .6);
  border: 1px solid rgba(139, 208, 255, .2);
  border-radius: 6px;
  font-size: 12px;
}
.r-preset-row .r-preset-name {
  flex: 1;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r-preset-row button {
  padding: 4px 8px;
  background: rgba(0, 231, 1, .15);
  border: 1px solid rgba(0, 231, 1, .4);
  color: var(--text);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.r-preset-row button:hover { background: rgba(0, 231, 1, .3); }
.r-preset-row button.r-preset-del {
  background: rgba(192, 16, 48, .15);
  border-color: rgba(192, 16, 48, .5);
}
.r-preset-row button.r-preset-del:hover { background: rgba(192, 16, 48, .35); }
.r-presets-empty { font-size: 11px; color: rgba(255, 255, 255, .45); padding: 4px 2px; }

/* Plinko */
.plinko-stage { position: relative; height: 460px; background: linear-gradient(180deg,#0c1a24 0%,#0a1520 100%); border-radius: 12px; border: 1px solid #1a2d3d; overflow: hidden; }
.plinko-stage.shake { animation: plinkoShake 340ms cubic-bezier(.36,.07,.19,.97); }
@keyframes plinkoShake {
  0%,100% { transform: translate(0,0); }
  15% { transform: translate(-5px, 1px); }
  30% { transform: translate(5px, -2px); }
  45% { transform: translate(-4px, 2px); }
  60% { transform: translate(4px, -1px); }
  80% { transform: translate(-2px, 1px); }
}
.plinko-peg { position: absolute; width: 6px; height: 6px; background: #b5c8d9; border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 4px rgba(255,255,255,.3); }
.plinko-peg.hit { animation: plinkoPegHit 220ms ease-out; }
@keyframes plinkoPegHit {
  0% { box-shadow: 0 0 4px rgba(255,255,255,.3); background: #b5c8d9; }
  30% { box-shadow: 0 0 10px rgba(245,166,35,.9); background: #ffdd88; }
  100% { box-shadow: 0 0 4px rgba(255,255,255,.3); background: #b5c8d9; }
}
.plinko-ball { position: absolute; width: 10px; height: 10px; background: radial-gradient(circle at 35% 30%, #ffd066, #f5a623 60%, #c97c0a 100%); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 6px rgba(245,166,35,.6), 0 2px 4px rgba(0,0,0,.5); will-change: left, top, transform; }
.plinko-ball.squash { animation: plinkoSquash 180ms ease-out; }
@keyframes plinkoSquash {
  0%   { transform: translate(-50%,-50%) scale(1,1); }
  35%  { transform: translate(-50%,-50%) scale(1.18,0.82); }
  100% { transform: translate(-50%,-50%) scale(1,1); }
}
.plinko-slot.lit { animation: plinkoLit .8s ease-out; }
@keyframes plinkoLit {
  0%   { filter: brightness(2.1) saturate(1.6); transform: translateY(3px); box-shadow: 0 0 16px rgba(245,166,35,.8); }
  40%  { filter: brightness(1.6) saturate(1.4); transform: translateY(1px); }
  100% { filter: brightness(1) saturate(1); transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
}
.plinko-slots { position: absolute; bottom: 0; left: 0; right: 0; display: flex; background: transparent; gap: 2px; padding: 0 2px 2px; }
.plinko-slot { flex: 1; text-align: center; padding: 6px 0; font-size: 11px; font-weight: 800; color: white; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* Keno */
/* Keno — Stake-style.
 *
 * The entire Keno surface is locked to fixed dimensions so the board and
 * panels never reflow as picks change. At 0 picks the layout is IDENTICAL in
 * size to the 10-pick "final form". Only cell contents change.
 *
 * Layout contract (all numbers are fixed, not viewport-dependent):
 *   keno-wrap       : width 100% up to max 760px (fills the canvas column)
 *   keno-grid       : 8 cols x 5 rows, each cell aspect-ratio: 1 (square)
 *                     grid height is a pure function of its width + gaps,
 *                     NOT of cell content, so it cannot shift when picks change
 *   keno-panels     : fixed 140px tall (2 rows * 56 + 6 gap + 20 padding + 2 border)
 *   keno-row        : fixed 56px tall, 11 columns repeat(11, minmax(0, 1fr))
 *   keno-cell       : fixed 56px tall, width 100% of its grid column
 * Every keno descendant has box-sizing: border-box via a universal rule on .keno-wrap.
 */
.keno-wrap {
  width: 100%;
  max-width: 760px;
  margin: 18px auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}
.keno-wrap *, .keno-wrap *::before, .keno-wrap *::after { box-sizing: border-box; }
.keno-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  /* Grid height is deterministic: each cell has aspect-ratio: 1 and columns
   * are 1fr, so row height = (width - 7*10 gap)/8. 5 explicit rows (40 cells
   * total in POOL=40) are filled by the JS. No content can affect the height
   * because cells are locked squares. */
  flex: 0 0 auto;
}
.k-cell {
  aspect-ratio: 1;
  background: linear-gradient(180deg, #2a3446 0%, #1d2533 100%);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-weight: 800;
  /* Fixed font size (not clamp) so cell content cannot change the cell width. */
  font-size: 24px;
  color: #eaf1ff;
  transition: transform .1s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 4px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  user-select: none;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
.k-cell:hover { background: linear-gradient(180deg, #33405a 0%, #222b3c 100%); transform: translateY(-1px); }
.k-cell.picked {
  background: linear-gradient(180deg, #4b5a7f 0%, #2e3a55 100%);
  border-color: #7fb2ff;
  color: #ffffff;
  box-shadow: 0 4px 0 rgba(0,0,0,.4), 0 0 0 2px rgba(127,178,255,.35) inset;
}
.k-cell.miss {
  background: linear-gradient(180deg, #4a1f2a 0%, #2a1019 100%);
  border-color: #8a2a3c;
  color: #ff9aac;
}
.k-cell.hit {
  background: linear-gradient(180deg, #0e3d2e 0%, #07261c 100%);
  border-color: #21c17a;
  color: #9cf5cd;
  box-shadow: 0 4px 0 rgba(0,0,0,.4), 0 0 18px rgba(33,193,122,.45);
}
/* Picked numbers must stay visibly "picked" even after the reveal paints
   them as hit/miss. Higher specificity wins, and the inset blue ring layered
   on top of the hit/miss color tells the player "yes, this was your pick". */
.k-cell.picked.miss {
  border-color: #7fb2ff;
  box-shadow: 0 4px 0 rgba(0,0,0,.4), 0 0 0 2px rgba(127,178,255,.55) inset;
}
.k-cell.picked.hit {
  border-color: #7fb2ff;
  box-shadow: 0 4px 0 rgba(0,0,0,.4), 0 0 18px rgba(33,193,122,.45), 0 0 0 2px rgba(127,178,255,.55) inset;
}
/* Gem art. Default hidden on idle / picked cells; on .hit (drawn and the
   player had it) the gem takes over the ENTIRE cell while the number hides.
   The .k-gem is absolutely positioned so it fills the parent without
   changing the cell's outer dimensions — the 40-cell grid stays rigid. */
.k-cell .k-gem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
}
.k-cell.hit .k-gem { display: block; }
.k-cell.hit .k-num { display: none; }
.k-cell.hit {
  /* When drawn-and-had, the gem art fully replaces the number and background.
     Darken the cell underneath so the gem pops without the red/green bg
     fighting it. */
  background: #071a12;
  border-color: #21c17a;
  box-shadow: 0 4px 0 rgba(0,0,0,.4), 0 0 22px rgba(33,193,122,.55);
}
.k-cell.flip { animation: kenoFlip .35s ease; }
@keyframes kenoFlip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg); }
  100% { transform: rotateY(0deg); }
}
.keno-panels {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #0f1521;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 10px;
  width: 100%;
  /* Fixed total height: 2 rows * 56px + 6px gap + 20px (2*10 padding) + 2px (2*1 border)
   * = 140px. Lock it so the panel never grows/shrinks with content. */
  height: 140px;
  min-height: 140px;
  box-sizing: border-box;
  flex: 0 0 auto;
}
.keno-row {
  display: grid;
  gap: 6px;
  /* Row height matches cell height exactly so an empty row stays full-size. */
  height: 56px;
  min-height: 56px;
  width: 100%;
  box-sizing: border-box;
  /* Default to 11 equal columns so layout is stable even before JS runs. */
  grid-template-columns: repeat(11, minmax(0, 1fr));
  flex: 0 0 auto;
}
.keno-cell {
  background: linear-gradient(180deg, #1c2434 0%, #141b28 100%);
  border-radius: 8px;
  padding: 8px 4px;
  text-align: center;
  color: #c7d2e5;
  border: 1px solid rgba(255,255,255,.05);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  /* Fixed height AND width (relative to grid column) so cells never grow when content changes. */
  height: 56px;
  min-height: 56px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.keno-cell.empty { opacity: .25; background: linear-gradient(180deg, #131a26 0%, #0c111a 100%); }
.keno-cell.active {
  background: linear-gradient(180deg, #143726 0%, #0a1f15 100%);
  border-color: #21c17a;
  box-shadow: 0 0 12px rgba(33,193,122,.4);
}
.keno-cell .km { font-size: 14px; font-weight: 800; color: #fff; line-height: 1.2; }
.keno-cell .kh { font-size: 11px; color: #8ea0bd; display: inline-flex; align-items: center; gap: 3px; line-height: 1.2; min-height: 11px; }
.keno-cell .kh svg { width: 11px; height: 11px; flex: 0 0 auto; }

/* ============== ADMIN / MOD PANEL ============== */

/* --- Tab navigation (pill / segment control) --- */
.admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.admin-tabs::-webkit-scrollbar { height: 4px; }
.admin-tabs::-webkit-scrollbar-track { background: transparent; }
.admin-tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.admin-tab {
  padding: 10px 18px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .3px;
  cursor: pointer;
  border-radius: 7px;
  transition: all .2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.admin-tab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.admin-tab.active {
  color: #1a1100;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 2px 8px rgba(245,197,66,.3);
}
.admin-section { display: none; }
.admin-section.active { display: block; }

/* --- Stat cards --- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card {
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 18px 20px;
  transition: border-color .2s, box-shadow .2s;
}
.stat-card:hover { border-left-color: var(--gold-bright); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.stat-card .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.stat-card .value { font-size: 26px; font-weight: 900; color: var(--gold-bright); margin-top: 6px; line-height: 1.1; }

/* Admin metrics tables */
.admin-metrics-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.admin-metrics-table th { background:var(--bg-0); color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px; padding:8px 12px; text-align:left; border-bottom:1px solid var(--line); }
.admin-metrics-table td { padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.04); }
.admin-metrics-table tr:hover td { background:rgba(255,255,255,.02); }

/* Admin user detail panel */
.adm-user { padding: 24px; display: grid; gap: 20px; }
.adm-user-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.adm-user-head .stat-grid { margin: 0; min-width: 360px; }
.adm-user-head .stat-card { padding: 12px 14px; border-left-width: 3px; }
.adm-user-head .stat-card .value { font-size: 20px; }
.adm-section {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 22px;
  transition: border-color .2s;
}
.adm-section:hover { border-color: rgba(255,255,255,.08); }
.adm-section-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold-bright);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(245,197,66,.12);
}
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.adm-field { display: grid; gap: 6px; }
.adm-field label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.adm-field input, .adm-field select {
  padding: 10px 12px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.adm-field input:focus, .adm-field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245,197,66,.1);
}
.adm-field input:disabled { opacity: .5; cursor: not-allowed; }
.adm-field .btn { margin-top: 4px; }
.adm-hint { font-size: 11px; color: var(--muted); line-height: 1.4; }
.adm-stat-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.adm-roles { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.adm-mod-block {
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
}
.adm-mod-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.adm-mod-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 16px; margin-bottom: 14px; }
.adm-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background .15s;
  border: 1px solid transparent;
}
.adm-check:hover { background: var(--bg-2); border-color: var(--line); }
.adm-check input { width: 16px; height: 16px; accent-color: var(--gold-bright); cursor: pointer; }
.adm-mod-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============== USER DETAIL PANEL (redesigned) ============== */
.ud-panel { padding: 0 !important; gap: 0 !important; }
.ud-panel > .adm-section { border-radius: 0; border-left: none; border-right: none; border-top: none; }
.ud-panel > .adm-section:last-child { border-bottom: none; border-radius: 0 0 10px 10px; }
.ud-panel > .ud-header { border-radius: 10px 10px 0 0; }

/* Header */
.ud-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
}
.ud-header-left { flex: 1; min-width: 0; }
.ud-username {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.3px;
  color: var(--text);
  margin-bottom: 8px;
}
.ud-meta {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.ud-meta strong { color: var(--text); font-weight: 600; }
.ud-sep { display: inline-block; width: 1px; height: 12px; background: var(--line); margin: 0 8px; vertical-align: middle; }
.ud-close-btn { padding: 6px 14px !important; font-size: 12px !important; flex-shrink: 0; margin-top: 2px; }

/* Role pills */
.ud-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.ud-pill--gold   { background: rgba(245,197,66,.15); color: var(--gold-bright); }
.ud-pill--blue   { background: rgba(75,134,255,.15); color: var(--blue); }
.ud-pill--purple { background: rgba(155,107,255,.15); color: var(--purple); }
.ud-pill--red    { background: rgba(255,71,99,.15); color: var(--red); }

/* Balance hero */
.ud-balance-hero {
  text-align: center;
  padding: 16px 0 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.ud-balance-big {
  font-size: 32px;
  font-weight: 900;
  color: var(--gold-bright);
  letter-spacing: -.5px;
}

/* Balance grid (crypto + legacy side by side) */
.ud-balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 700px) { .ud-balance-grid { grid-template-columns: 1fr; } }
.ud-balance-card {
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
}

/* Sub-section titles */
.ud-sub-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Legacy balance rows */
.ud-legacy-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.ud-legacy-row:last-child { border-bottom: none; }
.ud-legacy-row span { color: var(--muted); }
.ud-legacy-row strong { color: var(--text); }

/* Mini tables */
.ud-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ud-mini-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  font-weight: 700;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.ud-mini-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.ud-mini-table tr:last-child td { border-bottom: none; }
.ud-mini-table tbody tr:hover { background: rgba(255,255,255,.02); }

/* Controls */
.ud-controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 4px;
}
.ud-ctrl-group { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.ud-ctrl-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
  font-weight: 700;
}
.ud-inline-form {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.ud-input-sm {
  padding: 6px 10px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  transition: border-color .2s;
}
.ud-input-sm:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245,197,66,.1); }
.ud-btn-sm {
  padding: 6px 14px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}
.ud-hint {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
.ud-ref-row {
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}

/* Toggle switches */
.ud-toggle {
  position: relative;
  width: 38px;
  height: 20px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 20px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  padding: 0;
  flex-shrink: 0;
}
.ud-toggle-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--muted);
  border-radius: 50%;
  transition: transform .2s, background .2s;
}
.ud-toggle--on { background: rgba(45,217,123,.15); border-color: var(--green); }
.ud-toggle--on .ud-toggle-dot { transform: translateX(18px); background: var(--green); }
.ud-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

/* Metrics grid */
.ud-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.ud-metric-card {
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  text-align: center;
}
.ud-metric-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
}
.ud-metric-value {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
}
.ud-time-breakdown { margin-top: 8px; }

/* Danger zone */
.ud-danger-zone { }
.ud-danger-zone .adm-section-title { color: var(--red); border-bottom-color: rgba(255,71,99,.12); }
.ud-danger-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ud-btn-destructive {
  color: var(--red) !important;
  border-color: rgba(255,71,99,.3) !important;
}
.ud-btn-destructive:hover {
  background: rgba(255,71,99,.1) !important;
  border-color: var(--red) !important;
}

/* Admin pool controls — three-column add/remove for real / manual / effective */
.pool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 18px; }
.pool-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.pool-card.real      { border-top: 3px solid #00e701; }
.pool-card.manual    { border-top: 3px solid var(--gold-bright); }
.pool-card.effective { border-top: 3px solid #6aa6ff; }
.pool-card .label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.pool-card .value { font-size: 28px; font-weight: 900; color: var(--gold-bright); margin: 4px 0 12px; }
.pool-card .pool-controls { display: flex; gap: 8px; }
.pool-card .pool-controls input { flex: 1; padding: 9px 12px; background: var(--bg-0); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: 13px; }
.pool-card .pool-controls .btn { padding: 8px 14px; font-size: 12px; }
.pool-card.effective .pool-note { font-size: 12px; color: var(--muted); }

/* Admin "Games" tab — internal transparency panel */
.games-info-intro { padding: 20px; }
.games-info-pool-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.games-info-pool-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold-bright);
  border-radius: 10px;
  padding: 12px 14px;
}
.games-info-pool-card .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  font-weight: 700;
}
.games-info-pool-card .value {
  font-size: 22px;
  font-weight: 900;
  color: var(--gold-bright);
  margin: 4px 0 6px;
}
.games-info-pool-card .note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
.games-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.games-info-card {
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.games-info-head { display: flex; align-items: center; gap: 12px; }
.games-info-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1208;
  font-weight: 900;
  font-size: 20px;
  flex-shrink: 0;
}
.games-info-namewrap { flex: 1; min-width: 0; }
.games-info-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.games-info-slug {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-family: monospace;
}
.games-info-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.games-info-metric {
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}
.games-info-metric .label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: .5px;
  font-weight: 700;
}
.games-info-metric .value {
  font-size: 16px;
  font-weight: 800;
  margin-top: 2px;
  color: var(--text);
}
.games-info-metric.good .value { color: var(--green); }
.games-info-metric.bad  .value { color: var(--gold-bright); }
.games-info-section-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold-bright);
  margin-top: 4px;
}
.games-info-logic {
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-line;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.games-info-pool-effect {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  border: 1px solid var(--line);
}
.games-info-pool-effect.ok {
  background: rgba(45, 217, 123, 0.10);
  border-color: rgba(45, 217, 123, 0.4);
  color: #9eebc4;
}
.games-info-pool-effect.warn {
  background: rgba(245, 197, 66, 0.10);
  border-color: rgba(245, 197, 66, 0.4);
  color: var(--gold-bright);
}
.games-info-config {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.games-info-config td {
  padding: 6px 10px;
  border-bottom: 1px dashed var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.games-info-config td:first-child {
  color: var(--muted);
  width: 45%;
}
.games-info-config td:last-child {
  color: var(--text);
  word-break: break-word;
}

/* ============== ADMIN ENHANCED COMPONENTS ============== */

/* --- Status badges (deposit/withdrawal) --- */
.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.status-badge.credited, .status-badge.accepted { background: rgba(45,217,123,.12); color: var(--green); border: 1px solid rgba(45,217,123,.25); }
.status-badge.pending, .status-badge.open { background: rgba(245,197,66,.12); color: var(--gold-bright); border: 1px solid rgba(245,197,66,.25); }
.status-badge.rejected { background: rgba(255,71,99,.12); color: var(--red); border: 1px solid rgba(255,71,99,.25); }
.status-badge.closed { background: rgba(155,150,184,.1); color: var(--muted); border: 1px solid rgba(155,150,184,.2); }

/* --- Ticket thread chat interface --- */
.adm-thread { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; padding: 4px 0; }
.adm-thread::-webkit-scrollbar { width: 5px; }
.adm-thread::-webkit-scrollbar-track { background: transparent; }
.adm-thread::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.ticket-msg {
  padding: 10px 14px;
  border-radius: 10px;
  max-width: 85%;
  position: relative;
}
.ticket-msg.user-msg {
  background: rgba(75,134,255,.08);
  border: 1px solid rgba(75,134,255,.2);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.ticket-msg.staff-msg {
  background: rgba(45,217,123,.08);
  border: 1px solid rgba(45,217,123,.2);
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}
.ticket-msg-meta {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 4px;
}
.ticket-msg-body {
  font-size: 13px;
  white-space: pre-wrap;
  line-height: 1.5;
  color: var(--text);
}
.ticket-card {
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  transition: border-color .2s;
}
.ticket-card:hover { border-color: rgba(255,255,255,.08); }
.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ticket-header strong { font-size: 14px; }
.ticket-date { font-size: 11px; color: var(--muted); margin-bottom: 12px; }
.ticket-reply-area {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.ticket-reply-area textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  transition: border-color .2s;
}
.ticket-reply-area textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245,197,66,.1);
}
.ticket-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* --- Withdrawal / deposit modal backdrop --- */
.adm-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8,7,13,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.adm-modal-backdrop.visible { display: flex; }
.adm-modal {
  max-width: 500px;
  width: 92%;
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
  animation: modalIn .2s ease-out;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.adm-modal h4 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.adm-modal .modal-sub { color: var(--muted); font-size: 12px; margin: 0 0 16px; }

/* --- Row action buttons (small pills) --- */
.btn-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.btn-row.green {
  background: rgba(45,217,123,.12);
  color: var(--green);
  border: 1px solid rgba(45,217,123,.25);
}
.btn-row.green:hover { background: rgba(45,217,123,.22); }
.btn-row.red {
  background: rgba(255,71,99,.12);
  color: var(--red);
  border: 1px solid rgba(255,71,99,.25);
}
.btn-row.red:hover { background: rgba(255,71,99,.22); }
.btn-row.neutral {
  background: rgba(255,255,255,.05);
  color: var(--text);
  border: 1px solid var(--line);
}
.btn-row.neutral:hover { background: rgba(255,255,255,.1); }

/* --- Input-button groups (pool controls, search bars) --- */
.input-group {
  display: flex;
  gap: 0;
}
.input-group input {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 8px 0 0 8px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  transition: border-color .2s;
}
.input-group input:focus { outline: none; border-color: var(--gold); z-index: 1; }
.input-group .btn {
  border-radius: 0 8px 8px 0;
  padding: 10px 16px;
  font-size: 12px;
  white-space: nowrap;
}

/* --- Withdrawal filter pills --- */
.w-filter {
  transition: all .2s;
}
.w-filter.active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  color: #1a1100 !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(245,197,66,.25);
}

/* --- Admin section header with description --- */
.admin-section .card > h3:first-child {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.3px;
  margin-top: 0;
}
.admin-section .card > p.muted:first-of-type {
  line-height: 1.5;
}

/* --- Feed sim state indicator --- */
.feed-sim-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
}
.feed-sim-indicator.on {
  background: rgba(45,217,123,.1);
  border: 1px solid rgba(45,217,123,.25);
  color: var(--green);
}
.feed-sim-indicator.off {
  background: rgba(155,150,184,.08);
  border: 1px solid rgba(155,150,184,.15);
  color: var(--muted);
}

/* --- Metrics pages bar --- */
.metrics-page-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}
.metrics-page-row span { color: var(--muted); }
.metrics-page-row strong { color: var(--text); }

/* --- Mod panel specific inputs --- */
.mod-input {
  padding: 10px 14px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.mod-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245,197,66,.1);
}
.mod-result-box {
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted);
}

/* --- Card table wrapper (ensures rounded overflow) --- */
.card-table {
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.card-table table { margin: 0; }
.card-table th:first-child { border-top-left-radius: 10px; }
.card-table th:last-child { border-top-right-radius: 10px; }

/* --- Search bar --- */
.admin-search {
  padding: 12px 16px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.admin-search:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245,197,66,.1);
}
.admin-search::placeholder { color: var(--muted); }

/* ============== QKModal — custom confirm/prompt overlay ============== */
.qkm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .2s ease;
}
.qkm-overlay.qkm-visible { opacity: 1; }
.qkm-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  max-width: 420px;
  width: 92%;
  padding: 28px 28px 22px;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
  animation: qkm-slide .2s ease-out;
}
@keyframes qkm-slide {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.qkm-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
}
.qkm-msg {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 20px;
}
.qkm-input-wrap {
  margin-bottom: 18px;
}
.qkm-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.qkm-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245,197,66,.15);
}
.qkm-btns {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.qkm-btn {
  padding: 9px 22px;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.qkm-btn-cancel {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}
.qkm-btn-cancel:hover {
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.qkm-btn-confirm {
  background: linear-gradient(135deg, #5be595, var(--green));
  color: #04150a;
  box-shadow: 0 4px 12px rgba(45,217,123,.3);
}
.qkm-btn-confirm:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(45,217,123,.4);
}
.qkm-btn-danger {
  background: linear-gradient(135deg, #ff5e7a, var(--red));
  color: #fff;
  box-shadow: 0 4px 12px rgba(255,71,99,.3);
}
.qkm-btn-danger:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(255,71,99,.4);
}

/* ============== Status pills (deposits / withdrawals) ============== */
.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.status-pill.pending, .status-pill.open { background: rgba(234,179,8,.12); color: #facc15; }
.status-pill.credited, .status-pill.accepted { background: rgba(34,197,94,.12); color: #22c55e; }
.status-pill.rejected { background: rgba(220,38,38,.12); color: #f87171; }

/* ============== Deposit / withdrawal modal improvements ============== */
#w-modal, #d-modal { display: flex; }
#w-modal > .card, #d-modal > .card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* ==============================================================
   MOBILE RESPONSIVENESS — COMPREHENSIVE (main.css)
   ============================================================== */

@media (max-width: 768px) {
  /* Admin panel */
  .admin-section .card { overflow-x: auto; }
  .card-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-section .card table { min-width: 500px; }
  .admin-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 2px;
  }
  .admin-tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 12px;
  }

  /* Keno grid — smaller cells */
  .keno-grid {
    gap: 5px;
  }
  .k-cell {
    font-size: 16px;
    border-radius: 6px;
  }

  /* Keno panels — allow horizontal scroll if needed */
  .keno-panels {
    height: auto;
    min-height: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .keno-row {
    height: 44px;
    min-height: 44px;
  }
  .keno-cell {
    height: 44px;
    min-height: 44px;
    padding: 4px 2px;
  }
  .keno-cell .km { font-size: 12px; }
  .keno-cell .kh { font-size: 9px; }

  /* Cards (Hi-Lo) — handled in stake.css; extra fallback */
  .hand {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Mines grid */
  .mines-grid {
    max-width: 100%;
    gap: 5px;
  }
  .mine-cell {
    min-height: 44px;
    font-size: 24px;
  }

  /* Auth forms */
  .auth-wrap {
    padding: 16px;
  }
  .auth-card {
    padding: 24px 18px;
  }
  .auth-card h2 { font-size: 22px; }

  /* Game page shell */
  .game-page { padding: 16px 12px; }
  .game-header h1 { font-size: 24px; }
  .game-stage { padding: 16px; }
  .bet-row { gap: 8px; }
  .bet-row .field { min-width: 100%; }

  /* Section spacing */
  .section { padding: 30px 16px; }
  .section h2 { font-size: 24px; }

  /* Nav (old main.css nav if still present) */
  .nav { padding: 12px 16px; }
  .nav .brand { font-size: 20px; }
  .nav-links a { font-size: 12px; padding: 4px 8px; }

  /* Hero */
  .hero { padding: 40px 16px 24px; }
  .hero h1 { font-size: clamp(28px, 7vw, 52px); }
  .hero p { font-size: 15px; }
}

@media (max-width: 480px) {
  .card { padding: 12px; }

  /* Keno grid — ensure touch targets stay large enough */
  .keno-grid {
    gap: 3px;
    width: 100%;
  }
  .k-cell {
    font-size: 13px;
    border-radius: 5px;
    min-width: 36px;
    min-height: 36px;
  }

  /* Keno multiplier panels — JS builds paired rows on mobile (mult row
     then hits row, repeating). The panels container uses flex column. */
  .keno-panels {
    height: auto;
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .keno-row {
    height: auto;
    min-height: auto;
    gap: 4px;
  }
  /* Add spacing between each pair group (every 2nd row = hits row).
     The next multiplier row after a hits row gets extra top margin. */
  .keno-row-paired:nth-child(2n+3) {
    margin-top: 6px;
  }
  .keno-cell {
    height: 36px;
    min-height: 36px;
    padding: 4px 3px;
  }
  .keno-cell .km { font-size: 13px; font-weight: 800; }
  .keno-cell .kh { font-size: 10px; }
  /* Hide unused placeholder cells so wrapping rows only show real values */
  .keno-cell.empty { display: none; }

  /* Mines */
  .mine-cell {
    min-height: 36px;
    font-size: 20px;
    border-radius: 6px;
  }

  /* Auth */
  .auth-card {
    padding: 18px 14px;
    border-radius: 14px;
  }
}

/* ---------- Image copy / download deterrence ----------
   Disables drag-to-save, iOS long-press callout, and marks images as
   unselectable site-wide.  The context-menu handler in shell.js blocks
   right-click "Save image as…" to finish the protection.

   This is deterrence, not enforcement — screenshots and devtools can
   still pull pixels — but it stops casual copying, which is what the
   user asked for. */
img,
picture {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;      /* iOS long-press "Save image" */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}