@import '/tema.css';

/* ==========================================================================
   Oyunlar — vahid tema
   --------------------------------------------------------------------------
   Hər oyunun öz rəng dəyişənləri burada vahid temanın dəyərlərinə bağlanır.
   Ayrı-ayrı palitra yoxdur: zəmin, səth, xətt, mətn və vurğu hamısında eynidir.

   Oyunun məntiqi, düzümü və canvas kodu toxunulmur — yalnız rəng və forma.
   Fayl hər oyunun öz CSS-indən SONRA qoşulur.
   ========================================================================== */

/* -------------------------------------------------------------- tipoqrafiya */
body,
button,
input,
select,
textarea,
label,
p,
li,
span,
div {
  font-family: var(--t-ui);
}
body {
  font-variant-numeric: tabular-nums;
  background: var(--t-bg);
  color: var(--t-fg);
}
h1,
h2,
h3 {
  font-family: var(--t-display);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* ------------------------------------------------------------ ümumi xrom */
:focus-visible {
  outline: 2px solid var(--t-ac);
  outline-offset: 3px;
  border-radius: var(--t-r);
}
a,
button {
  touch-action: manipulation;
}

#hub-back {
  border-radius: var(--t-r) !important;
  border: 1px solid var(--t-line) !important;
  background: var(--t-surface) !important;
  color: var(--t-fg) !important;
  backdrop-filter: none !important;
  transition:
    border-color var(--t-fast) var(--t-ease),
    color var(--t-fast) var(--t-ease);
}
#hub-back:hover {
  border-color: var(--t-ac) !important;
  color: var(--t-ac) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Oyunların öz dəyişənləri → vahid tema
   ========================================================================== */

/* -------------------------------------------------------------- Bilik Yolu */
body:has(#btnStart) {
  --bg: var(--t-bg);
  --bg2: var(--t-surface);
  --card: var(--t-surface);
  --line: var(--t-line);
  --txt: var(--t-fg);
  --dim: var(--t-fg-2);
  --cyan: var(--t-ac);
  --violet: var(--t-ac);
  --green: var(--t-ok);
  --red: var(--t-err);
  --gold: var(--t-ac-hi);
}

/* ---------------------------------------------------------- Reverse Riddle */
body:has(#start-btn) {
  --bg-a: var(--t-bg);
  --bg-b: var(--t-bg);
  --ink: var(--t-fg);
  --dim: var(--t-fg-2);
  --faint: var(--t-fg-3);
  --good: var(--t-ok);
  --bad: var(--t-err);
  --gold: var(--t-ac);
  --glass: var(--t-surface);
  --stroke: var(--t-line);
}

/* ------------------------------------------------------------------ Domino */
body:has(#btnNew) {
  --bg1: var(--t-bg);
  --bg2: var(--t-bg);
  --bg3: var(--t-surface);
  --felt: var(--t-surface);
  --felt2: var(--t-surface-2);
  --gold: var(--t-ac);
  --accent: var(--t-ac);
  --danger: var(--t-err);
  --tile: var(--t-fg);
  --tiledot: var(--t-bg);
  --ink: var(--t-fg);
}

/* ---------------------------------------------------------- Neon Survival */
body:has(#startBtn) {
  --neon-cyan: var(--t-ac);
  --neon-pink: var(--t-ac-hi);
  --neon-green: var(--t-ac);
  --bg-dark: var(--t-bg);
}

/* ==========================================================================
   Forma: panel, düymə, başlıq — hamısında eyni
   ========================================================================== */

/* Panellər: kəskin künc, nazik xətt, düz səth */
.card,
.card.wide,
.card.intro-card,
.panel,
.board-wrap,
#hud,
#inv,
#invPanel,
.hud,
.inventory,
.panel-dark {
  border-radius: var(--t-r) !important;
  background-image: none !important;
  background-color: var(--t-surface) !important;
  border: 1px solid var(--t-line) !important;
  box-shadow: none !important;
}

/* Mahud masa da vahid səthə gəlir */
.table {
  border-radius: var(--t-r) !important;
  background-image: none !important;
  background-color: var(--t-surface) !important;
  border: 1px solid var(--t-line-2) !important;
  box-shadow: none !important;
}

/* Əsas düymə: dolu vurğu, kəskin künc, böyük hərf */
#btnStart.primary,
#start-btn.primary,
#startBtn.btn,
#btnNew,
#btnDraw {
  background-image: none !important;
  background-color: var(--t-ac) !important;
  color: var(--t-ac-fg) !important;
  border: 1px solid var(--t-ac) !important;
  border-radius: var(--t-r) !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: none !important;
  text-shadow: none !important;
}
#btnStart.primary:hover,
#start-btn.primary:hover,
#startBtn.btn:hover,
#btnNew:hover,
#btnDraw:hover {
  background-color: var(--t-ac-hi) !important;
}

/* İkinci dərəcə düymə: yalnız xətt */
#btnRank.ghost,
#btnPass.ghost,
#btnTrain.ghost,
#btnReset.ghost,
button.mode,
.icon-btn,
.hint-btn {
  background-image: none !important;
  background-color: transparent !important;
  border: 1px solid var(--t-line-2) !important;
  border-radius: var(--t-r) !important;
  color: var(--t-fg) !important;
  letter-spacing: 0.05em;
  box-shadow: none !important;
}
#btnRank.ghost:hover,
#btnPass.ghost:hover,
#btnTrain.ghost:hover,
#btnReset.ghost:hover,
button.mode:hover,
.icon-btn:hover,
.hint-btn:hover {
  border-color: var(--t-ac) !important;
  color: var(--t-ac) !important;
}
button.mode.active {
  border-color: var(--t-ac) !important;
  background-color: var(--t-ac-wash) !important;
  color: var(--t-fg) !important;
}

/* Neon parıltısı və rəngli kölgələr vahid temada yoxdur */
.title,
h1,
h2 {
  text-shadow: none !important;
}