/*
 * Sort Storm — style.css
 * Základné premenné a layout kostra. Konkrétne obrazovky (menu, shop,
 * gameplay...) sa doplnia v ďalších fázach do samostatných sekcií
 * tohto súboru, aby zostal jeden prehľadný CSS súbor.
 */

:root {
  --color-red: #E63946;
  --color-blue: #3A86FF;
  --color-green: #2EC4B6;
  --color-amber: #FFB627;
  --color-purple: #8338EC;
  --color-outline: #1B1B3A;
  --color-accent: #FF6B35;

  --bg-dark: #14142B;
  --bg-panel: #1F1F3D;
  --text-light: #F5F5FA;
  --text-muted: #A7A7C6;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --radius-md: 14px;
  --radius-lg: 22px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--text-light);
  font-family: 'Baloo 2', 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  user-select: none;
  touch-action: manipulation;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  touch-action: manipulation;
}

/* Bezpečná minimálna veľkosť dotykového cieľa (odporúčanie cca 44px) */
.btn-icon, .bin-btn, .btn { min-height: 40px; }

#app {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg-dark);
}

/*
 * Širšie obrazovky (tablety na šírku, desktop) — hra zostáva vo
 * vertikálnom "mobile" ráme uprostred obrazovky namiesto toho, aby sa
 * naťahovala do celej šírky. Hranica 700px zámerne pokrýva aj tablety,
 * nielen klasický desktop.
 */
@media (min-width: 700px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0A0A18;
  }
  #app {
    height: 92vh;
    max-height: 900px;
    border-radius: var(--radius-lg);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
    overflow: hidden;
  }
}

/* Veľmi malé telefóny (napr. staršie iPhone SE, 320px) — o niečo tesnejšie odsadenie */
@media (max-width: 340px) {
  .menu-logo-zone { padding: 0 16px; }
  .menu-buttons { padding: 0 16px 16px; gap: 12px; }
  .btn { padding: 12px 16px; font-size: 15px; }
}

.screen {
  position: absolute;
  inset: 0;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  display: none;
  flex-direction: column;
  /* Explicitný z-index nad #decor-layer (ktorý má z-index:0) — bez tohto by
     sa poradie vykresľovania spoliehalo len na poradie v DOM, čo sa v praxi
     ukázalo nespoľahlivé (padajúca gulička sa vedela zobraziť PRED
     tlačidlami v main menu). Takto je isté, že obrazovka (a všetko v nej)
     je vždy nad dekoratívnou vrstvou. */
  z-index: 1;
}

.screen.active {
  display: flex;
}

/* Plynulý prechod splash -> loading (namiesto tvrdého prepnutia) — opacity
   sa dá animovať len kým je display:flex (teda počas kým je .active), preto
   ui.js najprv prepne opacitu na 0 a AŽ PO dokončení fade-out prejde
   goto('loading')/odstráni .active. Loading screen zas naopak nabehne s
   opacity:0 a hneď nato (cez double-rAF, viď ui.js) sa plynule zjaví na 1. */
#screen-splash,
#screen-loading {
  transition: opacity 0.4s ease;
}

.overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  background: rgba(10, 10, 24, 0.92);
  z-index: 50;
}

.overlay.active {
  display: flex;
}

/* ===================== Dekoratívna gulička v menu ===================== */

/*
 * Táto vrstva je v DOM úplne PRVÁ (pozri index.html) a má najnižší
 * z-index (0) zo všetkých vrstiev v #app — .screen sekcie majú explicitne
 * z-index:1 (viď vyššie), takže gulička je vždy vykreslená ZA nimi, teda za
 * všetkými tlačidlami a textami menu, nikdy pred nimi.
 */
#decor-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.decor-ball {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--color-outline);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,0.12), inset 4px 4px 0 rgba(255,255,255,0.18);
}

/* Jemný odraz po dopade na "zem" (dva postupne menšie poskoky) */
.decor-ball--bounce {
  animation: decorBounce 0.5s ease-out;
}
@keyframes decorBounce {
  0%   { transform: translateY(0); }
  28%  { transform: translateY(-20px); }
  52%  { transform: translateY(0); }
  74%  { transform: translateY(-7px); }
  100% { transform: translateY(0); }
}

/* Po doskákaní sa (ak je ešte viditeľná) odkotúľa preč a stratí */
.decor-ball--roll {
  transition: transform 0.6s ease-in, opacity 0.45s ease-in 0.2s;
}

/* ===================== Tlačidlá ===================== */

.btn {
  padding: 14px 20px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  transition: transform 0.08s ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; transform: none; cursor: not-allowed; }

.btn-block { width: 100%; }

.btn-primary {
  background: var(--color-accent);
  color: #1B1B3A;
}

.btn-secondary {
  background: var(--bg-panel);
  color: var(--text-light);
  border: 1px solid rgba(255,255,255,0.12);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.1);
}

/* .btn-ghost je zámerne priehľadné (splýva s panelom, na ktorom leží) — v
   overlay paneloch (Pause, Choose difficulty...) to je v poriadku, lebo
   overlay má vlastné nepriehľadné tmavé pozadie navrchu úplne všetkého.
   V bežných .screen obrazovkách (main menu, Settings) ale za obsahom nie je
   žiadne také nepriehľadné pozadie navyše — je tam iba #decor-layer
   (z-index 0) s občasnou padajúcou dekoratívnou guličkou. Skutočne
   priehľadné pozadie by ňou nechalo "presvitať" napriek tomu, že tlačidlo
   je v z-poradí správne NAD ňou — vizuálne by to vyzeralo, akoby gulička
   prechádzala CEZ tlačidlo. Preto tu má rovnakú nepriehľadnú farbu ako
   pozadie obrazovky (vizuálne nerozoznateľné od transparentného vzhľadu). */
.screen .btn-ghost {
  background: var(--bg-dark);
}

.btn-danger { color: var(--color-red); }

.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-panel);
  color: var(--text-light);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-buy {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-dark);
  color: var(--text-light);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.12);
  font-weight: 700;
  white-space: nowrap;
}

/* ===================== Currency bar ===================== */

.currency-bar {
  display: flex;
  gap: 10px;
  padding: 14px 16px 4px;
}

/* Main menu má vlastnú (o 30 % väčšiu) verziu currency baru — pozri nižšie */
#screen-mainmenu .currency-pill {
  gap: 8px;
  padding: 8px 16px;
}
#screen-mainmenu .currency-pill span { font-size: 18px; }
#screen-mainmenu .icon-currency { width: 23px; height: 23px; }

.currency-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-panel);
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
}

/* ===================== Loading screen ===================== */

.loading-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 20px;
}

.progress-track {
  width: 70%;
  max-width: 280px;
  height: 10px;
  border-radius: 999px;
  background: var(--bg-panel);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  border-radius: 999px;
  transition: width 0.15s linear;
}

.progress-label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 700;
}

/* ===================== Studio splash ===================== */

.studio-splash-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  background: var(--bg-dark);
}

.studio-splash-image { display: block; max-width: 320px; width: 80%; height: auto; margin: 0 auto; }

.studio-splash-fallback {
  display: none; /* onerror na .studio-splash-image ho prepne na flex */
  align-items: center;
  justify-content: center;
  font-family: 'Luckiest Guy', cursive;
  font-size: 34px;
  letter-spacing: 1px;
  color: var(--text-light);
}

/* ===================== Logo ===================== */

.logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.logo-image { display: block; max-width: 440px; width: 100%; height: auto; margin: 0 auto; }
.logo-large .logo-image { max-width: 440px; }
.logo-small .logo-image { max-width: 280px; }

/*
 * Fallback logo (text + farebné guličky), kým neexistuje reálny
 * assets/images/logo.png. Skrytý predvolene — ui.js ho cez onerror
 * na <img> odkryje (display:flex), ak sa obrázok nepodarí načítať.
 */
.logo-text-fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.logo-text {
  font-family: 'Luckiest Guy', cursive;
  color: var(--color-accent);
  -webkit-text-stroke: 4px var(--color-outline);
  text-stroke: 4px var(--color-outline);
  font-size: 68px;
  line-height: 1.05;
  letter-spacing: 1px;
  text-align: center;
}
.logo-small .logo-text { font-size: 52px; }

.logo-balls { display: flex; gap: 12px; }
.logo-ball {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 4px solid var(--color-outline);
}
.logo-small .logo-ball { width: 24px; height: 24px; border-width: 3px; }

/* ===================== Main menu ===================== */

#screen-mainmenu { justify-content: flex-start; }

/*
 * Logo dostáva vlastnú flex:1 zónu — vyplní presne priestor medzi vrchom
 * obrazovky (currency bar) a tlačidlami (menu-buttons), takže je v ňom
 * vycentrované na výšku. Tlačidlá pod ním majú prirodzenú výšku a zostávajú
 * pri spodku, footer úplne na dne.
 */
.menu-logo-zone {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 28px;
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 28px 20px;
}

.btn-play {
  font-size: 20px;
  padding: 18px 20px;
}

/*
 * Tlačidlá hlavného menu (Play, Shop, High scores, Settings) sú o polovicu
 * UŽŠIE ako plná šírka obrazovky — výška/padding a veľkosť textu ostávajú
 * rovnaké ako pri bežných tlačidlách, len šírka je polovičná a tlačidlá sú
 * vycentrované (.menu-buttons { align-items: center }).
 */
.menu-buttons .btn-block {
  width: 50%;
}

/* Rovnaká šírka/vycentrovanie ako tlačidlá hlavného menu, ale znovupoužiteľné
   kdekoľvek inde (Settings, Pause) bez potreby meniť rodičovský kontajner —
   auto marginy na krížovej osi flex stĺpca vycentrujú tlačidlo nezávisle od
   align-items rodiča, takže susedné prvky (napr. setting-row prepínače)
   ostávajú nedotknuté. */
.btn-menu-size {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 340px) {
  .btn-menu-size { width: 62%; }
}

.menu-footer {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding-bottom: 14px;
}

/* ===================== Screen header (späť + titulok) ===================== */

.screen-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 4px;
}

.screen-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.screen-header-spacer { flex: 1; }

.screen-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Settings obrazovka — obsah (prepínače + tlačidlá) je vycentrovaný na
   výšku medzi hlavičkou (Back + "Settings") a spodkom obrazovky, namiesto
   toho, aby začínal hneď pod hlavičkou. */
.screen-content--centered {
  justify-content: center;
}

/* ===================== Settings ===================== */

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-panel);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
}

.switch { display: inline-block; position: relative; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  display: block;
  width: 46px;
  height: 26px;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  position: relative;
  transition: background 0.15s ease;
}
.switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s ease;
}
.switch input:checked + .switch-track { background: var(--color-accent); }
.switch input:checked + .switch-track .switch-thumb { left: 23px; }

/* ===================== Shop ===================== */

.shop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-panel);
  border-radius: var(--radius-md);
  padding: 14px;
}

.shop-item-info h4 { margin: 0 0 4px; font-size: 15px; }
.shop-item-info p { margin: 0; font-size: 12px; color: var(--text-muted); }
.shop-item-owned { color: var(--color-green) !important; margin-top: 4px !important; }

.btn-buy--equipped {
  background: var(--color-green);
  color: var(--color-outline);
  border-color: var(--color-green);
}

/* ===================== Leaderboard / stats ===================== */

.tabs {
  display: flex;
  gap: 8px;
  padding: 10px 16px 0;
}
.tab-btn {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 14px;
}
.tab-btn.active {
  background: var(--bg-panel);
  color: var(--text-light);
}
/* Neaktívna záložka je rovnako "priehľadná" na pohľad ako .btn-ghost vyššie —
   z rovnakého dôvodu (leaderboard je jedna z obrazoviek, kde sa zobrazuje
   dekoratívna padajúca gulička) má aj tu nepriehľadné pozadie, nech cezeň
   gulička "nepresvitá" (:not(.active), aby to neprebilo farbu vybranej
   záložky vyššie). */
.screen .tab-btn:not(.active) {
  background: var(--bg-dark);
}

/* Záložky s obtiažnosťou nad Scores/Stats záložkami — vizuálne trochu
   utlmenejšie (menšie písmo), aby jasne pôsobili ako "nadradený" filter. */
.tabs--difficulty .tab-btn {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* 4 záložky (Scores/Stats/Achievements/Challenge) potrebujú o niečo menšie
   písmo a padding, nech sa "Achievements" pohodlne zmestí aj na užšie
   telefóny bez zalamovania. */
.tabs--lb4 .tab-btn {
  padding: 8px 4px;
  font-size: 12px;
}

.lb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-panel);
  border-radius: var(--radius-md);
}
.lb-rank { color: var(--text-muted); font-weight: 700; width: 36px; }
.lb-score { flex: 1; font-weight: 700; }
.lb-date { color: var(--text-muted); font-size: 12px; }

.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-panel);
  border-radius: var(--radius-md);
}

.empty-hint { color: var(--text-muted); text-align: center; padding: 20px; }

/* ===================== Achievementy ===================== */

.achievement-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-panel);
  border-radius: var(--radius-md);
  opacity: 0.6;
}
.achievement-row--unlocked { opacity: 1; }

.achievement-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.achievement-row--unlocked .achievement-icon {
  background: var(--color-accent);
}

.achievement-info { flex: 1; min-width: 0; }
.achievement-name { font-weight: 700; font-size: 14px; }
.achievement-desc { color: var(--text-muted); font-size: 12px; margin-top: 2px; }

.achievement-progress {
  margin-top: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-dark);
  overflow: hidden;
}
.achievement-progress-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 999px;
}
.achievement-progress-label {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}

.achievement-reward {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* Odomknutý, ale ešte NEclaimnutý achievement — celý riadok je ťukateľný
   (data-action="claim-achievement" priamo naň), jemné "dýchajúce"
   zvýraznenie okraja nech je jasné, že tam na hráča čaká odmena. */
.achievement-row--claimable {
  cursor: pointer;
  border: 1px solid var(--color-accent);
  animation: achievementClaimablePulse 1.4s ease-in-out infinite;
}
@keyframes achievementClaimablePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,53,0.35); }
  50% { box-shadow: 0 0 0 4px rgba(255,107,53,0.12); }
}
.achievement-row--claimable .achievement-reward--claim {
  color: var(--color-accent);
}

/* Už vyzdvihnutá odmena — namiesto sumy len tichý potvrdzujúci text. */
.achievement-row--claimed { cursor: default; }
.achievement-claimed-label {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Krátke, samo-miznúce oznámenie o odomknutí achievementu — visí navrchu
   obrazovky nad všetkým ostatným obsahom (vyšší z-index než overlay). */
.achievement-toast {
  position: fixed;
  left: 50%;
  top: calc(var(--safe-top) + 14px);
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-panel);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  max-width: 320px;
  animation: achievementToastIn 0.25s ease-out;
}
@keyframes achievementToastIn {
  0% { transform: translateX(-50%) translateY(-14px); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.achievement-toast-icon { font-size: 22px; flex: none; }
.achievement-toast-title { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.achievement-toast-name { font-size: 14px; font-weight: 700; color: var(--text-light); }
.achievement-toast-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ===================== Denná výzva (Challenge) ===================== */

.challenge-card {
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.challenge-name { font-size: 18px; font-weight: 800; }
.challenge-desc { color: var(--text-muted); font-size: 13px; }

/* ===================== Instructions ===================== */

/* Podrobnejší "How to play" má viacero pomenovaných sekcií — bežný text sa
   číta lepšie zarovnaný doľava (viacriadkový vycentrovaný text je ťažšie
   čitateľný), samotný obsah je ale vždy vycentrovaný v rámci obrazovky
   (viď .instructions-balls, nadpisy sekcií) a pri dlhšom obsahu sa dá
   plynulo scrollovať (.screen-content má overflow-y:auto).*/
.instructions-content p {
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 14px;
  text-align: left;
  margin: 0 0 4px;
}
.instructions-section-title {
  margin: 16px 0 2px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-light);
  text-align: center;
}
.instructions-section-title:first-of-type { margin-top: 4px; }

.instructions-balls {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 12px 0;
}
.mini-ball {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--color-outline);
}

/* Malé ikonky použité inline priamo v texte jednotlivých sekcií (namiesto v
   hornom prehľadovom riadku farieb) — o niečo menšie, zarovnané na riadok
   textu, s vlastnou ikonkou/farbou podľa toho, ktorý herný prvok popisujú. */
.instructions-content p .mini-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin: 0 2px;
  font-size: 11px;
  line-height: 1;
}
.mini-ball--rainbow {
  background: conic-gradient(var(--color-red), var(--color-amber), var(--color-green), var(--color-blue), var(--color-purple), var(--color-red));
  border-color: rgba(255,255,255,0.9);
}
.mini-ball--bomb {
  background: var(--color-red);
  border-color: #000;
}
.mini-ball--frozen {
  background: linear-gradient(160deg, rgba(255,255,255,0.65), rgba(150,220,255,0.5)), #2E86C1;
  border-color: #0B3D66;
  color: #EAF6FF;
}
.mini-ball--heart {
  background: var(--color-red);
}

/* ===================== Gameplay ===================== */

.game-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  font-weight: 700;
}

.hud-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hud-score { font-size: 20px; }
.hud-combo {
  font-size: 12px;
  color: var(--color-accent);
  min-height: 14px;
}

.hud-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.hud-lives { display: flex; gap: 3px; }
.life-heart--on { color: var(--color-red); }
.life-heart--off { color: rgba(255,255,255,0.18); }

.game-powerups {
  display: flex;
  gap: 8px;
  padding: 0 16px 10px;
}

.powerup-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-panel);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: 8px 6px;
  color: var(--text-light);
  font-weight: 700;
  font-size: 12px;
}
.powerup-btn:disabled { opacity: 0.35; }
.powerup-count {
  background: var(--color-accent);
  color: var(--color-outline);
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.game-play-area {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: transparent;
}

.game-play-area.flash-miss {
  animation: flashMiss 0.18s ease-out;
}
@keyframes flashMiss {
  0% { background-color: rgba(230, 57, 70, 0.35); }
  100% { background-color: transparent; }
}

/* Jemné zatrasenie hracej plochy pri strate života — malý, rýchly
   horizontálny/vertikálny posun, ktorý doznieva (nie rušivý, len citeľný). */
.game-play-area.screen-shake {
  animation: screenShake 0.35s ease-out;
}
@keyframes screenShake {
  0% { transform: translate(0, 0); }
  15% { transform: translate(-6px, 2px); }
  30% { transform: translate(5px, -2px); }
  45% { transform: translate(-4px, 1px); }
  60% { transform: translate(3px, -1px); }
  75% { transform: translate(-2px, 1px); }
  100% { transform: translate(0, 0); }
}

/* Veľký "xN" popup uprostred hracej plochy pri dosiahnutí nového
   multiplikátora — vyskočí a zväčší sa, potom vybledne. */
.multiplier-burst-badge {
  position: absolute;
  z-index: 0; /* POD padajúcimi guličkami — efekt nezakrýva hru */
  transform: translate(-50%, -50%);
  font-size: 34px;
  opacity: 0.9;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 209, 102, 0.9), 0 2px 4px rgba(0,0,0,0.4);
  pointer-events: none;
  animation: multiplierBurstPop 0.7s ease-out forwards;
}
@keyframes multiplierBurstPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  45% { transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}

/* Konfety pri dosiahnutí nového multiplikátora — malé farebné častice,
   ktoré JS (spawnMultiplierBurst v game.js) rozletí von priamo cez inline
   transform/opacity/transition, táto trieda dáva len základný tvar/rozmer. */
.confetti-particle {
  position: absolute;
  z-index: 0;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  pointer-events: none;
}

/* Kozmetická stopa za guličkou pri vysokom combe (Combo trail zo shopu) —
   JEDEN plynulý element na guličku (nie samostatné "vystrelené" bodky),
   ktorý JS (updateTrailVisual v game.js) každý tik len prepočíta —
   pozíciu aj dĺžku — podľa aktuálnej polohy a rýchlosti pádu guličky.
   Tvar (clip-path) je ZÚŽENÝ TROJUHOLNÍK — plná šírka pri základni (dole,
   pri guličke), špička hore (odkiaľ gulička prišla) — v kombinácii s
   farebným gradientom (priehľadná hore -> plná farba dole) to pôsobí ako
   skutočný "kométový" chvost padajúcej guličky, nie rovná čiara. z-index
   je NIŽŠÍ než .falling-ball (1), takže vizuálne vychádza SPOD guličky
   (ako skutočný chvost za ňou), nie navrchu/pred ňou. */
.combo-trail-tail {
  position: absolute;
  z-index: 0;
  clip-path: polygon(50% 0%, 100% 92%, 90% 100%, 10% 100%, 0% 92%);
  filter: blur(0.5px);
  pointer-events: none;
  opacity: 0.85;
}

/* Kozmetické pozadia (zo shopu) menia len farebnosť obláčikov — viď neon.css (.theme-bg--*). */

.falling-ball {
  position: absolute;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--color-outline);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,0.12), inset 4px 4px 0 rgba(255,255,255,0.18);
}

/* Colorblind mode (Settings) — rovnaký princíp ako .bin-symbol, len na
   samotnej padajúcej guličke. Pri dúhovej guličke JS (tick() v game.js)
   priebežne mení textContent tohto elementu spolu s farbou. */
.ball-symbol {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(20, 20, 43, 0.85);
  border: 1px solid rgba(255,255,255,0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Neon skin (kozmetika zo shopu) — svietiaci okraj okolo guličiek. Konkrétny
   box-shadow/border-color sa nastavuje priamo v game.js (potrebuje farbu
   danej guličky), táto trieda len signalizuje/dokresľuje efekt animáciou. */
.falling-ball--neon {
  animation: neonPulse 1.1s ease-in-out infinite;
}
@keyframes neonPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

/* Bomba — vyzerá ako normálna farebná gulička (zachováva svoju farbu, aby sa
   dala priradiť k správnemu košu), len s lebkou navrchu a výrazným červeným
   varovným pulzovaním (glow "dýcha" spolu so zväčšovaním), nech je na prvý
   pohľad jasné, že s ňou treba zaobchádzať inak. */
.falling-ball--bomb {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  border-color: #000;
  animation: bombPulse 0.5s ease-in-out infinite;
}
@keyframes bombPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      inset -4px -4px 0 rgba(0,0,0,0.3), inset 4px 4px 0 rgba(255,255,255,0.12),
      0 0 8px 2px rgba(230,57,70,0.55), 0 0 18px 5px rgba(230,57,70,0.3);
  }
  50% {
    transform: scale(1.16);
    box-shadow:
      inset -4px -4px 0 rgba(0,0,0,0.3), inset 4px 4px 0 rgba(255,255,255,0.12),
      0 0 18px 7px rgba(230,57,70,0.9), 0 0 32px 12px rgba(230,57,70,0.5);
  }
}

/* Dúhová gulička — farba (background aj glow) sa mení priamo z game.js
   (potrebuje presnú hex hodnotu aktuálnej farby), táto trieda len pridáva
   biely rámček a jemné "dýchajúce" zväčšovanie, nech je vidno na prvý
   pohľad, že ide o špeciálnu guličku. */
.falling-ball--rainbow {
  border: 3px solid rgba(255,255,255,0.9);
  animation: rainbowPulse 0.6s ease-in-out infinite;
}
@keyframes rainbowPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Zamrznutá gulička — pod ostrým, nepravidelným tmavomodrým ľadovým
   "krúpkom" (::before, presahuje mierne cez okraj guličky, akoby na nej
   trčal skutočný kus ľadu) ešte presvitá jej farba, snehová vločka
   uprostred a jemné "trblietavé" pulzovanie jasu — nech je na prvý pohľad
   jasné, že treba ťuknúť priamo na ňu (nie na kôš) skôr, než dopadne. */
.falling-ball--frozen {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: #EAF6FF;
  text-shadow: 0 0 3px rgba(0,0,0,0.65), 0 1px 1px rgba(0,0,0,0.5);
  border-color: #0B3D66;
  cursor: pointer;
  animation: frozenShimmer 0.9s ease-in-out infinite;
}
.falling-ball--frozen::before {
  content: '';
  position: absolute;
  inset: -7px;
  /* Smerovaný gradient (svetlo vľavo hore -> tieň vpravo dole) namiesto
     predošlého symetrického "lesklého" gradientu — spolu s drop-shadow
     nižšie to dáva kúsku ľadu jednoduchý, čitateľný 3D objem, rovnakým
     "svetelným smerom" ako majú bežné guličky/koše (inset highlight/shadow). */
  background: linear-gradient(135deg, rgba(224,244,255,0.95) 0%, rgba(120,195,240,0.88) 48%, rgba(12,55,90,0.95) 100%);
  clip-path: polygon(12% 0%, 34% 10%, 52% 0%, 70% 12%, 100% 6%, 86% 32%, 100% 50%, 82% 62%, 100% 82%, 74% 78%, 62% 100%, 42% 84%, 20% 100%, 26% 70%, 0% 62%, 18% 42%, 0% 20%);
  /* box-shadow (vonkajšia žiara) sa drží pôvodná; drop-shadow navyše
     PRESNE OBKRESLÍ nepravidelný clip-path tvar (na rozdiel od box-shadow,
     ktorý by sledoval len pôvodný obdĺžnikový box) — dvojitá tenká tmavá
     kontúra dá ľadu rovnaký "kreslený" obrys ako majú guličky/koše
     (var(--color-outline)), a mierne posunutý mäkký tieň pridáva hĺbku. */
  filter:
    drop-shadow(0 0 1px var(--color-outline))
    drop-shadow(0 0 1px var(--color-outline))
    drop-shadow(1.5px 2px 1.5px rgba(0,0,0,0.4));
  box-shadow: 0 0 6px 1px rgba(120,200,255,0.65);
  pointer-events: none;
}
@keyframes frozenShimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

/* Krátky "roztrieskavý" záblesk vo chvíli, keď sa gulička odmrazí ťuknutím
   (trieda sa po animácii sama odstráni cez setTimeout v game.js). */
.falling-ball--thawed {
  animation: iceShatterBall 0.35s ease-out;
}
@keyframes iceShatterBall {
  0% { transform: scale(1); filter: brightness(1.8); }
  55% { transform: scale(1.3); filter: brightness(1.4); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Zamrznutý kôš — nepravidelná, ostro-hranatá tmavomodrá ľadová kôra navrchu
   (::after, aby neprekrývala klik) s jemným pulzovaním, kým čaká na
   odmrazujúce ťuknutia — dostatočne nepriehľadná, nech je hneď jasné, že
   sa doňho práve nedá triediť. */
.bin-btn--frozen {
  position: relative;
}
.bin-btn--frozen::after {
  content: '';
  position: absolute;
  inset: -4px;
  /* Rovnaký smerovaný gradient (svetlo vľavo hore -> tieň vpravo dole) ako
     na zamrznutej guličke — konzistentný 3D "svetelný smer" naprieč hrou. */
  background: linear-gradient(135deg, rgba(224,244,255,0.92) 0%, rgba(120,195,240,0.82) 48%, rgba(12,55,90,0.92) 100%);
  clip-path: polygon(8% 2%, 28% 12%, 46% 0%, 66% 14%, 88% 4%, 100% 22%, 84% 38%, 100% 56%, 90% 78%, 100% 96%, 72% 88%, 56% 100%, 38% 86%, 18% 100%, 22% 76%, 0% 68%, 14% 44%, 0% 26%);
  border-radius: var(--radius-md);
  pointer-events: none;
  /* drop-shadow presne obkresľuje nepravidelný clip-path tvar (na rozdiel
     od box-shadow) — dvojitá tenká tmavá kontúra dá ľadu rovnaký "kreslený"
     obrys ako majú koše/guličky (var(--color-outline)), plus mäkký
     posunutý tieň pre hĺbku. Pôvodná vonkajšia žiara + inset lesk ostávajú. */
  filter:
    drop-shadow(0 0 1px var(--color-outline))
    drop-shadow(0 0 1px var(--color-outline))
    drop-shadow(1.5px 2px 1.5px rgba(0,0,0,0.4));
  box-shadow: 0 0 10px 2px rgba(80,180,255,0.55), inset 0 0 12px rgba(255,255,255,0.25);
  animation: binFrostPulse 1.3s ease-in-out infinite;
}
@keyframes binFrostPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* Krátke "prasknutie" pri každom odmrazujúcom ťuknutí na ešte zamrznutý kôš. */
.bin-btn--crack {
  animation: binCrack 0.2s ease-in-out;
}
@keyframes binCrack {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-3px) rotate(-2deg); }
  75% { transform: translateX(3px) rotate(2deg); }
}

/* Záverečné "roztrieskanie" ľadu pri úplnom odmrazení koša. */
.bin-btn--shatter {
  animation: binShatter 0.4s ease-out;
}
@keyframes binShatter {
  0% { transform: scale(1); filter: brightness(1.6); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Malý odznak s počtom zostávajúcich ťuknutí do odmrazenia koša. */
.bin-frost-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 5;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(15,55,85,0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Srdiečková gulička — vzácna bonusová gulička (obnoví život). Zachováva
   svoju farbu (aby sa dala priradiť k správnemu košu), len s ikonou
   srdiečka navrchu a jemným ružovým "tepajúcim" žiarením, nech je na prvý
   pohľad jasné, že ide o niečo pozitívne (na rozdiel od bomby). */
.falling-ball--heart {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  border-color: #ff6fa5;
  animation: heartGlow 0.85s ease-in-out infinite;
}
@keyframes heartGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      inset -4px -4px 0 rgba(0,0,0,0.12), inset 4px 4px 0 rgba(255,255,255,0.18),
      0 0 8px 2px rgba(255,110,165,0.5);
  }
  50% {
    transform: scale(1.09);
    box-shadow:
      inset -4px -4px 0 rgba(0,0,0,0.12), inset 4px 4px 0 rgba(255,255,255,0.18),
      0 0 16px 6px rgba(255,110,165,0.85);
  }
}

/* Búrka — text bez rámčeka, vycentrovaný na riadku; počas aktívnej búrky
   pod hlavným nápisom pribúda odpočet zostávajúceho času. */
.storm-banner {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 6;
  text-align: center;
  font-weight: 800;
  pointer-events: none;
}
.storm-banner--warning {
  color: var(--color-amber);
  font-size: 14px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.65);
  animation: stormWarningPulse 0.5s ease-in-out infinite;
}
.storm-banner--active {
  color: var(--color-red);
  animation: stormActivePulse 0.4s ease-in-out infinite;
}
.storm-banner-title {
  font-size: 22px;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.storm-banner-countdown {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  color: inherit; /* rovnaká farba ako hlavný text nad ním (amber pri odpočte, červená počas búrky) */
  text-shadow: 0 2px 6px rgba(0,0,0,0.65);
}
@keyframes stormWarningPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes stormActivePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/*
 * Koše sú teraz navrstvené (position:absolute, z-index nad guličkami)
 * PRIAMO na spodku hracej plochy namiesto samostatného panelu pod ňou.
 * Padajúce guličky tak pri zásahu/miss vizuálne miznú "za" košmi.
 */
.game-bins-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px calc(12px + var(--safe-bottom));
}

.bin-btn {
  position: relative; /* containing block pre .bin-symbol (colorblind mode) */
  flex: 1;
  max-width: 140px;
  aspect-ratio: 519 / 530;
  background: transparent;
  padding: 0;
  transition: transform 0.08s ease;
}
.bin-btn:active { transform: scale(0.94); }
.bin-btn.bin-pop .bin-img,
.bin-btn--fallback.bin-pop { transform-origin: 50% 100%; animation: binCatch 0.34s cubic-bezier(.3,.7,.4,1); }
.bin-btn.bin-wrong { animation: binWrongShake 0.22s ease-out; }
@keyframes binWrongShake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-6px); }
  50%  { transform: translateX(6px); }
  75%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

.bin-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none; /* klik zachytáva button, obrázok len vizuál */
}

/* Colorblind mode (Settings) — odznak s tvarom/symbolom danej farby (viď
   CONFIG.BALL_COLORS.symbol) navrchu koša, nezávislý od farby samotnej.
   Tmavé pozadie + biely text zaručuje čitateľnosť nad hocijakou farbou. */
.bin-symbol {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(20, 20, 43, 0.85);
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Zobrazí sa iba ak sa obrázok koša nepodarí načítať (viď onerror v game.js) */
.bin-btn--fallback {
  background: var(--bin-fallback-color, var(--color-accent));
  border: 3px solid var(--color-outline);
  border-radius: var(--radius-md);
  min-height: 58px;
}
/* Správne chytenie: krátke stlačenie košíka (squash) a pružný návrat. Mení
   sa len vizuál obrázka (transform), nie rozloženie ani ťukacia plocha. */
@keyframes binCatch {
  0%   { transform: scale(1, 1); }
  22%  { transform: scale(1.07, 0.86); }
  52%  { transform: scale(0.98, 1.05); }
  76%  { transform: scale(1.01, 0.99); }
  100% { transform: scale(1, 1); }
}

/* Častice a "+body" text po správnom chytení (viď spawnCatchFx v game.js).
   z-index 0 = POD padajúcimi guličkami (z-index 1) aj koše (2), takže
   nič nezakrývajú; pointer-events:none = nezachytávajú ťuknutia. */
.catch-particle {
  position: absolute;
  z-index: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.35);
  animation: catchParticle 0.55s ease-out forwards;
}
@keyframes catchParticle {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, -24px)) scale(0.2); opacity: 0; }
}
.catch-score-popup {
  position: absolute;
  z-index: 0;
  transform: translate(-50%, 0);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 0 8px var(--fx-color, #fff), 0 2px 3px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  pointer-events: none;
  animation: catchScoreRise 0.65s ease-out forwards;
}
@keyframes catchScoreRise {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(0.7); }
  20%  { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
  70%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, -26px) scale(1); }
}

/* Kozmetická téma pre koše (Golden bins zo shopu) — trieda ide na
   #game-bins-row kontajner (viď applyCosmeticThemes v game.js), preto
   funguje rovnako, či už sa reálne načíta obrázok koša, alebo sa použije
   farebný fallback obdĺžnik. drop-shadow obkresľuje presne tvar obrázka
   (aj priehľadné okraje PNG), box-shadow/border pridáva rovnaký akcent aj
   na fallback variant. */
.bins-row--theme-gold .bin-btn {
  filter: drop-shadow(0 0 7px rgba(255, 209, 102, 0.85));
}
.bins-row--theme-gold .bin-btn--fallback {
  border-color: #ffd166;
  box-shadow: inset 0 0 0 2px rgba(255, 209, 102, 0.5), 0 0 10px 2px rgba(255, 209, 102, 0.5);
}

/* ===================== Tutoriál ===================== */

/* Počas tutoriálu je HUD (skóre, životy, pauza, powerupy) skrytý — jediná
   dostupná interakcia je ťuknutie na koše, tutoriál sa nedá preskočiť. */
.tutorial-active .game-hud,
.tutorial-active .game-powerups {
  display: none;
}

.tutorial-hint {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 5;
  background: var(--bg-panel);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-light);
  pointer-events: none;
}

/* Jemne pulzujúci cieľový kôš, nech je hneď jasné, kam ťuknúť */
.bin-btn--hint {
  animation: binHintPulse 1s ease-in-out infinite;
}
@keyframes binHintPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.3); }
}

/* Pri pridaní nového koša (vyššia obtiažnosť) na chvíľu "poskočí" celý rad */
.bins-row--new .bin-btn {
  animation: binNewPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes binNewPop {
  0% { transform: scale(0.5) translateY(20px); opacity: 0.4; }
  60% { transform: scale(1.1) translateY(-4px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ===================== Overlays (pauza / výsledok / otočenie) ===================== */

.overlay-panel {
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  width: 84%;
  max-width: 360px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.overlay-panel h2 { margin: 0 0 6px; font-size: 22px; }
.result-score { font-size: 16px; font-weight: 700; margin: 0; }
.result-reward { display: flex; align-items: center; justify-content: center; gap: 4px; font-weight: 700; margin: 0 0 6px; }

.rotate-icon {
  font-size: 48px;
  color: var(--color-accent);
}
.orientation-panel p { color: var(--text-muted); margin: 0; }

/* ===================== Výber obtiažnosti (overlay) ===================== */

.difficulty-panel { gap: 10px; }

.difficulty-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-panel-alt, rgba(255,255,255,0.06));
  border: 2px solid transparent;
  color: var(--text-light);
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.difficulty-btn:active { transform: scale(0.97); }
.difficulty-btn--current {
  border-color: var(--color-accent);
}

.difficulty-btn-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.difficulty-btn-name {
  font-weight: 800;
  font-size: 16px;
  color: var(--text-light);
}
.difficulty-btn-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-accent);
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 3px 8px;
}
.difficulty-btn-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}