/* Nocturne casino theme — подключать ПОСЛЕ frontend/styles.css
   Слой токенов + перекраска существующих классов. Логику не трогает. */

:root{
  /* Ground */
  --n-bg:#161826;
  --n-bg-deep:#12141f;
  --n-surface:#1c1e2b;
  --n-surface-2:#1d1f2e;
  --n-surface-3:#232532;

  /* Borders */
  --n-line:#2b2d3a;
  --n-line-strong:#3f424d;

  /* Text */
  --n-text:#e9e9ed;
  --n-text-2:#cfd3e5;
  --n-text-3:#9397ab;
  --n-muted:#75798c;
  --n-faint:#4d5160;

  /* Accent ramp */
  --n-accent:#9184d9;
  --n-accent-100:#e7e5fe;
  --n-accent-200:#d2cefd;
  --n-accent-300:#b5abfc;
  --n-accent-400:#968ae0;
  --n-accent-600:#796cbf;
  --n-accent-700:#5d5294;
  --n-accent-800:#423a6a;
  --n-accent-900:#2b2741;

  /* Glow (акцент — свет и линия, не заливка) */
  --n-glow-soft:0 0 22px rgba(145,132,217,.25);
  --n-glow:0 0 26px rgba(145,132,217,.35);
  --n-glow-hard:0 0 40px rgba(145,132,217,.55);

  /* Elevation: на тёмном фоне это кромка + рассеянная темнота */
  --n-edge:0 0 0 1px var(--n-line);
  --n-edge-strong:0 0 0 1px var(--n-line-strong);
  --n-shadow:0 8px 24px rgba(0,0,0,.45);

  /* Radius */
  --n-r-sm:8px;
  --n-r:12px;
  --n-r-lg:16px;
  --n-r-pill:999px;

  /* Space (density 0.7x) */
  --n-1:4px; --n-2:7px; --n-3:9px; --n-4:12px; --n-5:16px; --n-6:20px; --n-7:26px;

  /* Type */
  --n-font:Inter,-apple-system,system-ui,sans-serif;
  --n-mono:ui-monospace,Menlo,monospace;
}

html,body{
  background:var(--n-bg);
  color:var(--n-text);
  font-family:var(--n-font);
  -webkit-font-smoothing:antialiased;
}

/* Числа — всегда табличные */
.balance,.amount,.money,.mult,.stat-value,[data-num]{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* ---- Поверхности ---------------------------------------------------- */
.card,.panel,.tile,.list-row,.sheet{
  background:var(--n-surface);
  border:none;
  border-radius:var(--n-r);
  box-shadow:var(--n-edge);
}
.card--lit,.panel--lit{
  background:linear-gradient(155deg,#252840,#1b1d2b);
  box-shadow:var(--n-edge-strong);
}

/* ---- Кнопки: контур + свечение, без заливки ------------------------- */
.btn,button.primary,.btn-primary{
  appearance:none;
  border-radius:var(--n-r-sm);
  font:500 14px/1 var(--n-font);
  padding:0 var(--n-5);
  min-height:44px;              /* hit target */
  cursor:pointer;
  transition:box-shadow .18s,border-color .18s,background .18s;
}
.btn-primary,button.primary{
  border:1px solid var(--n-accent-400);
  background:radial-gradient(ellipse at 50% 130%,rgba(145,132,217,.3),transparent 70%);
  color:var(--n-accent-100);
  box-shadow:var(--n-glow);
}
.btn-primary:hover,button.primary:hover{box-shadow:var(--n-glow-hard)}
.btn-primary:active,button.primary:active{
  background:rgba(145,132,217,.16);
  border-color:var(--n-accent-300);
}
.btn-secondary{
  border:1px solid var(--n-line-strong);
  background:transparent;
  color:var(--n-text-2);
}
.btn-secondary:hover{border-color:var(--n-accent-600);color:var(--n-accent-200)}
.btn-ghost{border:1px solid transparent;background:transparent;color:var(--n-text-3)}
.btn:disabled,button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

:focus-visible{outline:2px solid var(--n-accent);outline-offset:2px}
::selection{background:rgba(145,132,217,.3);color:var(--n-accent-100)}

/* ---- Поля ------------------------------------------------------------ */
.input,input[type=text],input[type=number]{
  height:44px;
  border-radius:var(--n-r-sm);
  border:1px solid var(--n-line-strong);
  background:var(--n-surface-2);
  color:var(--n-text);
  font:400 13.5px var(--n-font);
  padding:0 13px;
  outline:none;
}
.input::placeholder{color:var(--n-faint)}
input[type=range]{accent-color:var(--n-accent)}

/* ---- Сегментированный переключатель --------------------------------- */
.seg{display:flex;gap:3px;padding:3px;border-radius:var(--n-r-sm);
  background:#1a1c28;box-shadow:var(--n-edge)}
.seg-opt{flex:1;height:34px;border:none;border-radius:var(--n-r-sm);
  background:transparent;color:#8b8fa0;font:500 12.5px var(--n-font);cursor:pointer}
.seg-opt[aria-selected=true],.seg-opt.active{
  background:var(--n-accent-900);color:var(--n-accent-100)}

/* ---- Прогресс -------------------------------------------------------- */
.progress{height:5px;border-radius:var(--n-r-pill);background:var(--n-bg-deep);overflow:hidden}
.progress > i{display:block;height:100%;border-radius:var(--n-r-pill);
  background:linear-gradient(90deg,var(--n-accent-700),var(--n-accent-300));
  box-shadow:0 0 14px rgba(145,132,217,.8)}

/* ---- Нижняя навигация ------------------------------------------------ */
.tabbar{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  padding:8px 10px 26px;background:var(--n-bg-deep);box-shadow:0 -1px 0 var(--n-line)}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:5px;
  font:400 9.5px var(--n-font);color:#5f6373;text-decoration:none}
.tabbar a.active{color:var(--n-accent-200);font-weight:500}
.tabbar .ico{width:16px;height:16px;border-radius:4px;border:1.5px solid #4a4e5d}
.tabbar a.active .ico{border-color:var(--n-accent-300);box-shadow:0 0 12px rgba(145,132,217,.6)}

/* ---- Плитки игр: геометрические метки вместо эмодзи ------------------ */
.game-tile{
  position:relative;height:84px;border-radius:var(--n-r);overflow:hidden;
  background:linear-gradient(160deg,#26283a,#191b27);
  box-shadow:var(--n-edge-strong);padding:11px 12px;cursor:pointer;
  transition:box-shadow .18s,transform .18s;
}
.game-tile:hover{box-shadow:var(--n-edge-strong),var(--n-glow-soft);transform:translateY(-1px)}
.game-tile .name{position:absolute;left:12px;bottom:11px;
  font:500 14.5px var(--n-font);color:var(--n-text)}
.game-tile .sub{position:absolute;left:12px;bottom:11px;
  font:400 10.5px var(--n-font);color:var(--n-muted)}
.game-tile .mark{position:absolute;right:14px;top:16px}

/* Метки — чистый CSS, .mark--<игра> */
.mark--koi{width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--n-accent-300);box-shadow:inset 0 0 18px rgba(145,132,217,.55)}
.mark--gator{display:grid;grid-template-columns:repeat(3,10px);gap:5px}
.mark--gator i{height:10px;background:var(--n-accent-700)}
.mark--gator i:nth-child(2n){background:var(--n-accent-600)}
.mark--gator i:nth-child(5){background:var(--n-accent-300)}
.mark--roulette{width:78px;height:78px;border-radius:50%;border:1px dashed var(--n-accent-700)}
.mark--slots{display:flex;gap:5px}
.mark--slots i{width:14px;height:42px;border-radius:3px;background:var(--n-line-strong)}
.mark--slots i:nth-child(2){background:var(--n-accent-700)}
.mark--slots i:nth-child(3){background:var(--n-accent-600)}
.mark--dice{width:40px;height:40px;border-radius:8px;transform:rotate(18deg);
  box-shadow:inset 0 0 0 1px var(--n-muted)}
.mark--coin{width:40px;height:40px;border-radius:50%;
  background:linear-gradient(140deg,var(--n-accent-600),var(--n-accent-900));
  box-shadow:var(--n-glow-soft)}
.mark--rocket{width:52px;height:100%;
  background:repeating-linear-gradient(115deg,rgba(181,171,252,.32) 0 2px,transparent 2px 9px)}
.mark--blackjack{width:44px;height:30px;border-radius:4px;
  box-shadow:0 0 0 1px var(--n-accent-700);
  background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(181,171,252,.25) 6px 7px)}

/* ---- Слот-барабан ---------------------------------------------------- */
.reel-cell{height:62px;border-radius:9px;display:grid;place-items:center;
  font-size:26px;line-height:1;background:linear-gradient(160deg,#252838,#1a1c27);
  box-shadow:var(--n-edge);color:var(--n-text-3);
  transition:box-shadow .18s,background .18s}
.reel-cell.win{background:linear-gradient(160deg,#3a3468,#251f47);color:#f3f5fe;
  box-shadow:0 0 0 1px var(--n-accent-300),var(--n-glow-hard)}

/* ---- Секционные заголовки ------------------------------------------- */
.section-label{font:600 9.5px var(--n-font);letter-spacing:.14em;
  text-transform:uppercase;color:var(--n-muted);margin:16px 2px 8px}

@keyframes n-pulse{
  0%,100%{box-shadow:0 0 0 1px var(--n-accent-700),var(--n-glow-soft)}
  50%{box-shadow:0 0 0 1px var(--n-accent-400),var(--n-glow-hard)}
}
.pulse{animation:n-pulse 3.2s ease-in-out infinite}