/* ============================================================
   БАЗА — дизайн токени, типография, достъпност
   Приоритет: голям текст, висок контраст, едри бутони.
   ============================================================ */

:root {
  /* Скала на шрифта — управлява се от Настройки (data-fs) */
  --fs-base: 17px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 22px; --sp-6: 30px; --sp-7: 42px;

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  --tap: 52px;              /* минимална цел за пръст */
  --shadow-1: 0 2px 8px rgba(0,0,0,.18);
  --shadow-2: 0 8px 24px rgba(0,0,0,.28);
  --shadow-3: 0 18px 48px rgba(0,0,0,.42);

  --ease: cubic-bezier(.22,.9,.28,1);
  --dur: .22s;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

html[data-fs="md"] { --fs-base: 17px; }
html[data-fs="lg"] { --fs-base: 20px; --tap: 58px; }
html[data-fs="xl"] { --fs-base: 23px; --tap: 64px; }

/* --- Тъмна тема (по подразбиране) --- */
html[data-theme="dark"] {
  --bg:        #0b1512;
  --bg-2:      #0f1d18;
  --surface:   #16261f;
  --surface-2: #1e3229;
  --surface-3: #27412f;
  --line:      #2c473a;
  --text:      #f2f7f4;
  --text-dim:  #a9bdb3;
  --text-mut:  #7d928a;

  --brand:     #16b877;
  --brand-ink: #04120c;
  --brand-soft:#0f3b2b;
  --accent:    #34c6ff;
  --gold:      #ffc531;
  --gold-soft: #4a3608;
  --danger:    #ff5a5a;
  --ok:        #3ddc84;
  --warn:      #ffb01f;

  --felt:      radial-gradient(120% 100% at 50% 0%, #1c6b4c 0%, #124a35 45%, #0a2d20 100%);
  --card-ink:  #10201a;
  --card-bg:   #fffdf7;
}

/* --- Светла тема --- */
html[data-theme="light"] {
  --bg:        #eef3f0;
  --bg-2:      #e3ebe6;
  --surface:   #ffffff;
  --surface-2: #f2f7f4;
  --surface-3: #e4ede8;
  --line:      #cdddd4;
  --text:      #0e1a15;
  --text-dim:  #4b5f56;
  --text-mut:  #6d8177;

  --brand:     #0a8f59;
  --brand-ink: #ffffff;
  --brand-soft:#d6f1e4;
  --accent:    #0a7fb8;
  --gold:      #b6820b;
  --gold-soft: #fbeecb;
  --danger:    #cf2b2b;
  --ok:        #17924f;
  --warn:      #b57206;

  --felt:      radial-gradient(120% 100% at 50% 0%, #2f9a70 0%, #1d7854 45%, #135b3f 100%);
  --card-ink:  #10201a;
  --card-bg:   #ffffff;
}

/* --- Висок контраст (за слабо зрение) --- */
html[data-contrast="high"] {
  --line: #ffffff;
  --text: #ffffff;
  --text-dim: #e6f2ec;
  --surface: #000000;
  --surface-2: #10100f;
  --surface-3: #1c1c1a;
  --bg: #000; --bg-2: #000;
  --brand: #2bff9d; --brand-ink: #000;
  --gold: #ffd400;
}
html[data-contrast="high"] * { text-shadow: none !important; }
html[data-contrast="high"] .btn { border-width: 3px !important; }

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-size: var(--fs-base);
  font-family: "Segoe UI", "Noto Sans", system-ui, -apple-system, Roboto, Arial, sans-serif;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4 { margin: 0 0 var(--sp-3); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.12rem; }
p  { margin: 0 0 var(--sp-3); }
a  { color: var(--accent); }
ul { margin: 0 0 var(--sp-3); padding-left: 1.2em; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* --- Скелет на приложението --- */
.app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
  max-width: 1180px;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
}
.screen {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-6) + var(--safe-b));
  scrollbar-width: thin;
}
.screen::-webkit-scrollbar { width: 10px; }
.screen::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }
body.in-game .tabbar,
body.in-game .topbar { display: none; }
body.in-game .app { grid-template-rows: 1fr; }
body.in-game .screen { padding: 0; overflow: hidden; }

/* --- Splash --- */
.splash {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-content: center; justify-items: center; gap: var(--sp-4);
  background: var(--felt);
  transition: opacity .4s var(--ease);
}
.splash.hide { opacity: 0; pointer-events: none; }
.splash-logo { font-size: 3rem; letter-spacing: .3em; color: #fff; }
.splash-name { font-size: 1.5rem; font-weight: 900; letter-spacing: .22em; color: #fff; }
.splash-bar { width: 190px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.22); overflow: hidden; }
.splash-bar i { display: block; height: 100%; width: 40%; border-radius: 99px; background: var(--gold);
  animation: slide 1.1s var(--ease) infinite; }
@keyframes slide { 0% { transform: translateX(-110%);} 100% { transform: translateX(310%);} }

/* --- Помощни --- */
.row     { display: flex; align-items: center; gap: var(--sp-3); }
.row.wrap{ flex-wrap: wrap; }
.col     { display: flex; flex-direction: column; gap: var(--sp-3); }
.between { justify-content: space-between; }
.center  { justify-content: center; }
.grow    { flex: 1 1 auto; min-width: 0; }
.tc      { text-align: center; }
.dim     { color: var(--text-dim); }
.mut     { color: var(--text-mut); }
.small   { font-size: .88rem; }
.big     { font-size: 1.2rem; }
.b       { font-weight: 800; }
.gold    { color: var(--gold); }
.ok      { color: var(--ok); }
.bad     { color: var(--danger); }
.hidden  { display: none !important; }
.mt2 { margin-top: var(--sp-2);} .mt4 { margin-top: var(--sp-4);} .mt6 { margin-top: var(--sp-6);}
.mb2 { margin-bottom: var(--sp-2);} .mb4 { margin-bottom: var(--sp-4);}
.nowrap { white-space: nowrap; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Анимациите се управляват от Настройки → Анимации.
   Ако системата е с „намалена анимация", настройката тръгва изключена,
   но потребителят може да я включи — затова НЕ ползваме твърдо правило
   по prefers-reduced-motion (то спираше и въртенето на колелото и слота). */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation-duration: .001ms !important; transition-duration: .001ms !important;
}