* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  color: #e8e0d0;
  font-family: 'Cinzel', 'Georgia', 'Times New Roman', serif;
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: #6b5b3e #1c1714;
  /* Vlastni tematicky kurzor napric celou aplikaci (mimo herni platno, ktere
     ma svuj vlastni cepel-kurzor pro mireni - viz #gameCanvas nize). Pointer
     (tlacitka/odkazy) a default (staticky text) maji vlastni varianty, viz
     cursor: pointer/default nize v souboru. */
  cursor: url("images/cursors/cursor-arrow.png") 1 1, auto;
}

/* Pozadi jen na html (ne na body): html tvori "canvas" stranky a jeho
   pozadi se vzdy vykresli uplne dole, pod vsim ostatnim vcetne prvku se
   zapornym z-index. Kdyby melo pozadi i body (non-positioned element),
   vykreslilo by se v poradi vrstev AZ PO .ambient-bg (z-index:-1) a
   ambientni jiskry/zar by tak byly navzdy prekresleny neviditelne. */
html {
  background: url('images/nahledovyobrazek.jpg') center / cover no-repeat fixed, #14110f;
}

/* Themovany scrollbar (Chrome/Edge/Safari) - firefox resi scrollbar-color
   vyse. Aplikuje se globalne na kazde scrollovatelne misto (achievementy,
   inventar, seznamy v modalech, ...), aby se nikde neobjevil vychozi
   sedy/modry systemovy scrollbar, ktery bije do oci proti tmavemu pozadi. */
*::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
*::-webkit-scrollbar-track {
  background: #1c1714;
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7a6849, #4a4038);
  border: 2px solid #1c1714;
  border-radius: 6px;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8f7a56, #5a4d38);
}
*::-webkit-scrollbar-corner {
  background: #1c1714;
}

.hidden {
  display: none !important;
}

.rotate-device-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #14110f;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  color: #e8c34a;
}

.rotate-device-icon {
  font-size: 56px;
  animation: rotate-device-spin 1.8s ease-in-out infinite;
}

@keyframes rotate-device-spin {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}

/* Stejna hranice (900px) jako zbytek mobilniho rozlozeni nize v souboru -
   pod ni je bludiste i dotykove ovladani na vysku prakticky nepouzitelne,
   takze hrace rovnou vyzveme, at otoci zarizeni na sirku, misto aby videl
   stlaceny layout. */
@media (max-width: 900px) and (orientation: portrait) {
  .rotate-device-overlay {
    display: flex;
  }
}

/* Ambientni ozivene pozadi - cela aplikace ma jako pozadi horici zricenou
   pevnost (nahledovyobrazek.png); tato vrstva ji necha "dychat": doutnajici
   popel stoupajici z ruin, pomalu pulzujici zar vzdalenych pozaru a jemne
   driftujici kour. Fixed + z-index:-1 = vzdy za obsahem obrazovky, ale pred
   samotnym pozadim; bezi na transform/opacity, takze je levna i behem hry. */
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ambient-glow {
  position: absolute;
  width: 50vw;
  height: 50vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,140,50,0.5) 0%, rgba(255,100,30,0.22) 40%, rgba(255,90,20,0) 70%);
  filter: blur(3px);
  animation: ambient-glow-pulse 5.5s ease-in-out infinite;
}
.ambient-glow-1 { top: 2%; left: 8%; animation-delay: 0s; }
.ambient-glow-2 { top: 6%; right: 6%; animation-delay: -2.8s; }

@keyframes ambient-glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.ambient-smoke-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Ctyri samostatne rozmazane "obla" kour, kazdy se svou vlastni pomalou
   a neopakovatelne pusobici trajektorii (jina delka i tvar drahy) -
   soustredeno do horni tretiny, kde uz sam obrazek ma nejvic koure/mraku,
   takze to pusobi jako by se ten stavajici kour skutecne hnul. */
.smoke-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28,22,18,0.55) 0%, rgba(28,22,18,0.26) 45%, rgba(28,22,18,0) 75%);
  filter: blur(18px);
  will-change: transform, opacity;
}

.smoke-1 { top: -10%; left: -12%;  width: 55vw; height: 34vw; max-width: 900px; max-height: 560px; animation: smoke-drift-a 54s ease-in-out infinite; }
.smoke-2 { top: -6%;  left: 28%;   width: 46vw; height: 30vw; max-width: 760px; max-height: 480px; animation: smoke-drift-b 68s ease-in-out infinite; animation-delay: -14s; }
.smoke-3 { top: -2%;  right: -14%; width: 50vw; height: 32vw; max-width: 820px; max-height: 500px; animation: smoke-drift-c 61s ease-in-out infinite; animation-delay: -31s; }
.smoke-4 { top: -12%; left: 54%;   width: 38vw; height: 25vw; max-width: 620px; max-height: 380px; animation: smoke-drift-a 47s ease-in-out infinite reverse; animation-delay: -9s; }

@keyframes smoke-drift-a {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.55; }
  25%  { transform: translate(3vw, 1.4vh) scale(1.08); opacity: 0.7; }
  50%  { transform: translate(6.5vw, -1vh) scale(1); opacity: 0.48; }
  75%  { transform: translate(2vw, 2vh) scale(0.94); opacity: 0.65; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.55; }
}

@keyframes smoke-drift-b {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.42; }
  30%  { transform: translate(-4.5vw, 2vh) scale(1.1); opacity: 0.6; }
  60%  { transform: translate(-7vw, -1.6vh) scale(0.9); opacity: 0.38; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.42; }
}

@keyframes smoke-drift-c {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.5; }
  40%  { transform: translate(-3.5vw, -2vh) scale(1.05); opacity: 0.34; }
  70%  { transform: translate(-6vw, 1.2vh) scale(1.14); opacity: 0.62; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
}

.ambient-embers {
  position: absolute;
  inset: 0;
}

.ae {
  position: absolute;
  bottom: -2%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffd980;
  box-shadow: 0 0 8px 2px rgba(255, 180, 90, 0.9);
  opacity: 0;
  animation-name: ambient-ember-rise;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}

.ae-1  { left: 4%;  width: 3px; height: 3px; animation-duration: 9s;   animation-delay: -1s; }
.ae-2  { left: 11%; animation-duration: 11.5s; animation-delay: -6s; }
.ae-3  { left: 19%; width: 3px; height: 3px; animation-duration: 8s;   animation-delay: -3.5s; }
.ae-4  { left: 27%; animation-duration: 12.5s; animation-delay: -9s; }
.ae-5  { left: 35%; width: 5px; height: 5px; animation-duration: 10s;  animation-delay: -2s; }
.ae-6  { left: 43%; animation-duration: 8.5s;  animation-delay: -7.5s; }
.ae-7  { left: 51%; width: 3px; height: 3px; animation-duration: 11s;  animation-delay: -4.5s; }
.ae-8  { left: 58%; animation-duration: 13s;  animation-delay: -11s; }
.ae-9  { left: 65%; width: 5px; height: 5px; animation-duration: 9.5s; animation-delay: -0.5s; }
.ae-10 { left: 72%; animation-duration: 12s;  animation-delay: -8s; }
.ae-11 { left: 79%; width: 3px; height: 3px; animation-duration: 8s;   animation-delay: -5s; }
.ae-12 { left: 86%; animation-duration: 10.5s; animation-delay: -10s; }
.ae-13 { left: 93%; width: 4px; height: 4px; animation-duration: 12s;  animation-delay: -2.5s; }
.ae-14 { left: 97%; width: 3px; height: 3px; animation-duration: 7.5s; animation-delay: -6.5s; }

@keyframes ambient-ember-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(0.7); }
  10% { opacity: 1; }
  75% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(18px, -85vh) scale(1.2); }
}

/* Plovouci "now playing" lista - herni obrazovka uz sama o sobe vyplnuje
   cely viewport (hlavicka + .main-area presne do vysky obrazovky), takze
   normalni tok dokumentu tu misto nema - lista je proto fixed a jen se
   tence prekryje pres samotny spodni okraj, misto aby neco posouvala. */
.music-bar {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(28, 23, 20, 0.88);
  border: 1px solid #4a4038;
  border-radius: 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  max-width: min(420px, 80vw);
}

.music-bar-btn {
  background: none;
  border: none;
  color: #c9a26d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}

.music-bar-btn:hover {
  color: #f0d060;
  background: rgba(240, 208, 96, 0.12);
}

.music-bar-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.fullscreen-btn {
  position: fixed;
  /* Ikony jsou pod sebou (sloupec u praveho okraje obrazovky), ne vedle
     sebe - tim padem nikdy nemuzou kolidovat s listou zalozek prohlizece
     ani s HUD listou pod nimi, at uz je obrazovka jakkoli siroka. */
  top: 12px;
  right: 12px;
  z-index: 200;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 23, 20, 0.75);
  border: 1px solid #4a4038;
  border-radius: 8px;
  color: #c9a26d;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.fullscreen-btn:hover {
  color: #f0d060;
  background: rgba(240, 208, 96, 0.15);
}

.support-global-btn {
  top: 54px;
}

.tips-global-btn {
  top: 96px;
}

.friends-global-btn {
  top: 138px;
}

.friends-notify-dot {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: #e8543a;
  border: 1.5px solid #14110f;
  box-shadow: 0 0 6px rgba(232, 84, 58, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  color: #fff2e8;
}

/* Tlacitko Pratele se rozhoupe, kdyz ma hrac nevyrizenou zadost - stejny
   ucel jako cerveny odznak s poctem (vys), jen vyraznejsi na prvni pohled,
   protoze tlacitko sedi mimo hlavni zorne pole (roh obrazovky). */
.friends-global-btn.has-requests {
  animation: friends-btn-wiggle 2.2s ease-in-out infinite;
}

@keyframes friends-btn-wiggle {
  0%, 100% { transform: rotate(0deg); }
  4% { transform: rotate(-12deg); }
  8% { transform: rotate(10deg); }
  12% { transform: rotate(-8deg); }
  16% { transform: rotate(6deg); }
  20% { transform: rotate(-3deg); }
  24% { transform: rotate(0deg); }
}

.wheel-global-btn {
  top: 180px;
}

/* Stejny "zavrtěni" jako u Pratel (friends-btn-wiggle) - kdyz je kolo
   pripravene k roztoceni (viz updateWheelButtonState v game.js), tlacitko
   se navic rozsviti do zlata, aby vypadalo jako "odmena ceka", ne jen jako
   bezne upozorneni. */
.wheel-global-btn.ready {
  color: #ffcc4a;
  animation: friends-btn-wiggle 2.2s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(255, 204, 74, 0.55);
}

/* Dvojita trida (ne jen .wheel-panel) kvuli specificite - .dialog-panel
   nize v souboru ma taky max-width a jako pozdejsi pravidlo se stejnou
   specificitou by jinak vyhralo nad timhle. */
.dialog-panel.wheel-panel {
  text-align: center;
  max-width: 480px;
  padding: 34px 40px 30px;
}

.wheel-subtitle {
  margin: -8px 0 4px;
  font-size: 13px;
  font-style: italic;
  color: #b8ac96;
}

.wheel-stage {
  position: relative;
  width: 360px;
  height: 360px;
  max-width: 100%;
  margin: 14px auto 20px;
}

/* Mekka pulzujici zar za kolem - vyrazne vetsi nez samotne kolo, at pusobi
   jako by kolo samo vyzarovalo svetlo, ne jako ploche kolecko na strance. */
.wheel-glow {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,204,74,0.35) 0%, rgba(255,204,74,0.12) 45%, rgba(255,204,74,0) 72%);
  animation: wheel-glow-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes wheel-glow-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

.wheel-pointer {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 26px solid #ffcc4a;
  filter: drop-shadow(0 0 6px rgba(255, 204, 74, 0.9));
  z-index: 3;
}

.wheel-pointer::before {
  content: '';
  position: absolute;
  top: -34px;
  left: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d8, #ffcc4a 60%, #b9862a 100%);
  box-shadow: 0 0 8px rgba(255, 204, 74, 0.8);
}

.wheel-canvas {
  display: block;
  width: 360px;
  height: 360px;
  max-width: 100%;
  border-radius: 50%;
  border: 6px solid #4a4038;
  box-shadow: 0 0 30px rgba(0,0,0,0.55), inset 0 0 24px rgba(0,0,0,0.45);
  position: relative;
  z-index: 1;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.wheel-stage.spinning .wheel-canvas {
  border-color: #ffcc4a;
  box-shadow: 0 0 40px rgba(255,204,74,0.65), inset 0 0 24px rgba(0,0,0,0.45);
}

/* Staticky (nerotujici) ozdobny stred - canvas uz kresli tmavy hub sam, ale
   samostatny HTML prvek nad nim umoznuje hvezdicce zustat "na miste", i kdyz
   se kolo pod ni toci. */
.wheel-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d8, #ffcc4a 55%, #8a6a1a 100%);
  box-shadow: 0 0 14px rgba(255, 204, 74, 0.75), 0 0 3px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #4a2f0a;
  z-index: 2;
  pointer-events: none;
}

.wheel-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.wheel-burst-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d8 0%, #ffcc4a 55%, rgba(255,150,40,0) 75%);
  animation: wheel-burst-fly 0.9s ease-out forwards;
}

@keyframes wheel-burst-fly {
  0% { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--bx), var(--by)) scale(0.3); opacity: 0; }
}

.wheel-status-text {
  min-height: 22px;
  font-size: 15px;
  font-weight: bold;
  color: #ffe6a0;
  text-shadow: 0 0 10px rgba(255, 204, 74, 0.4);
  margin-bottom: 16px;
}

.wheel-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* .btn.big je jinde v aplikaci vzdy osamocene tlacitko pres celou sirku
   panelu (width:100%) - tady sedi ve sloupci nad Zavrit, takze si drzi
   vlastni pevnou sirku misto roztazeni na 100 % celeho panelu. */
.wheel-spin-btn {
  width: 100%;
  max-width: 260px;
  margin-top: 0;
}

/* Zavrit je tu vedlejsi/zrusujici akce, ne rovnocenna Roztocit - mensi a
   tise, at netahne pozornost stejnou vahou jako hlavni tlacitko. */
.wheel-close-btn {
  background: transparent;
  border-color: #4a4038;
  color: #a89a7e;
  font-size: 14px;
  padding: 10px 18px;
}

.wheel-close-btn:hover {
  border-color: #6b5b3e;
  color: #e8c34a;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}

/* Male ikonove tlacitko "sledovat reklamu" - vedle Roztocit (kolo stesti)
   nebo primo vedle poctu Strepu dusi (Obchod dusi), misto puvodniho
   velkeho textoveho tlacitka pres celou sirku, ktere tam pusobilo
   nemistne velke. */
.bonus-icon-btn {
  background: transparent;
  border: 1px solid #4a4038;
  color: #a89a7e;
}

.bonus-icon-btn:hover:not(:disabled) {
  border-color: #6b5b3e;
  color: #e8c34a;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}

.bonus-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.soul-shop-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.soul-shop-summary-row .soul-shop-summary {
  margin: 0;
}

.bonus-status-text {
  font-size: 12px;
  color: #7a6f5a;
  min-height: 16px;
}

.reward-video-panel {
  text-align: center;
  max-width: 420px;
}

.reward-cancel-btn {
  background: transparent;
  border-color: #4a4038;
  color: #a89a7e;
  font-size: 14px;
  padding: 10px 18px;
  margin-top: 16px;
}

.reward-cancel-btn:hover {
  border-color: #6b5b3e;
  color: #e8c34a;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}

.music-track-name {
  font-size: 12px;
  color: #b8ac96;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Pevna sirka (ne jen max-width) - jinak se cely music-bar viditelne
     zvetsoval/zmensoval pri kazde zmene skladby podle delky jejiho nazvu. */
  width: 260px;
  max-width: 55vw;
}

.screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Epicka bannerova ilustrace (demonicky pan a jeho horda) je nyni pozadim
   cele aplikace (viz html, body vyse) - #menuScreen ji jen necha prosvitat. */

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.loading-logo {
  width: min(280px, 60vw);
  height: auto;
  filter: drop-shadow(0 0 24px rgba(232, 195, 74, 0.25));
  animation: loading-logo-pulse 2.4s ease-in-out infinite;
}

@keyframes loading-logo-pulse {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 1; }
}

.loading-bar {
  width: min(320px, 70vw);
  height: 10px;
  background: #1c1714;
  border: 1px solid #6b5b3e;
  border-radius: 6px;
  overflow: hidden;
}

.loading-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8a6a2a, #e8c34a);
  transition: width 0.2s ease-out;
}

.loading-text {
  color: #9a8f7a;
  font-size: 15px;
  letter-spacing: 0.05em;
}

/* Hlavni menu - dominantni nadpis (obrazek nadpis.png) s animaci objeveni,
   zarici pozadi a par plovoucich jisker, aby menu pusobilo filmove misto
   jako obycejna stranka s textem. */

.menu-title-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 6px;
}

.menu-title-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 220%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(232,195,74,0.22) 0%, rgba(232,195,74,0.08) 35%, rgba(232,195,74,0) 70%);
  animation: menu-title-glow-pulse 3.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes menu-title-glow-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

.menu-title-img {
  position: relative;
  width: min(520px, 82vw);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(232,195,74,0.35));
  animation: menu-title-reveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.auth-title-wrap {
  margin-bottom: 18px;
}

.auth-title-img {
  width: min(360px, 70vw);
}

@keyframes menu-title-reveal {
  0% { opacity: 0; transform: scale(0.82) translateY(-14px); filter: drop-shadow(0 0 0 rgba(232,195,74,0)); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: drop-shadow(0 0 18px rgba(232,195,74,0.35)); }
}

.menu-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.menu-particle {
  position: absolute;
  bottom: 10%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffd980;
  box-shadow: 0 0 6px 1px rgba(255, 217, 128, 0.8);
  animation: menu-particle-rise 4.5s ease-in infinite;
  opacity: 0;
}

.mp-1 { left: 12%; animation-delay: 0.2s; }
.mp-2 { left: 26%; animation-delay: 1.6s; }
.mp-3 { left: 42%; animation-delay: 0.9s; }
.mp-4 { left: 60%; animation-delay: 2.4s; }
.mp-5 { left: 78%; animation-delay: 1.1s; }
.mp-6 { left: 90%; animation-delay: 3s; }

@keyframes menu-particle-rise {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 0.6; }
  100% { transform: translateY(-140px) scale(1.1); opacity: 0; }
}

.panel {
  background: linear-gradient(180deg, #2a2320, #1c1714);
  border: 2px solid #6b5b3e;
  border-radius: 12px;
  padding: 38px 46px;
  box-shadow: 0 0 50px rgba(0,0,0,0.6);
  /* Nad fixed sloupy (.side-decor, z-index:0) - na uzsich oknech uz sloupy
     zasahuji az pod stred obrazovky, takze panel musi zustat citelny i
     kdyz se s nimi vizualne prekryva. */
  position: relative;
  z-index: 1;
}

.panel.narrow {
  max-width: 860px;
  margin: 24px;
}

/* Ramovani uvodnich obrazovek kamennymi sloupy s pochoni po stranach panelu */

.screen-frame {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

/* Sloupy uz nejsou soucasti flex radku .screen-frame (jejich vyska tak
   drive byla svazana s vyskou panelu, max 760px) - jsou pripnute rovnou k
   viewportu (position:fixed, height:100vh), takze vzdy sahaji skoro od
   spodni hrany az skoro k hornimu okraji obrazovky bez ohledu na
   rozliseni/vysku okna. bottom:-38px je zamerny mensi presah pod spodni
   hranu (~1cm), aby paty sloupu nepusobily "uriznute" presne na okraji.
   background-position kotvi obrazek k vnejsimu okraji boxu (left/right),
   ne na stred, aby sloup i pri velkorysejsim boxu (viz sirka nize) zustal
   opravdu u kraje obrazovky, ne uprostred prazdneho prostoru. */
.side-decor {
  position: fixed;
  bottom: -38px;
  width: 32vw;
  max-width: 620px;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  animation: pillar-flicker 3.2s ease-in-out infinite;
}

.side-decor.left {
  left: 0;
  /* Prohozeno na zadost - obrazek "pillar-right.png" (puvodne vpravo) je
     ted vlevo a naopak, viz .side-decor.right nize. */
  background-image: url('images/pillar-right.png');
  background-position: bottom left;
}

.side-decor.right {
  right: 0;
  background-image: url('images/pillar-left.png');
  background-position: bottom right;
  animation-delay: -1.6s; /* sude ohne nehori v uplne stejnem rytmu */
}

/* Ohen u paty sloupu na referencnim obrazku hori jen staticky - par
   stoupajicich jiskricek (pseudo-elementy, kazdy vlastni drahou/casovani)
   dodaji dojem, ze plamen skutecne zivy hori, misto jen namalovany. */
.side-decor::before,
.side-decor::after {
  content: '';
  position: absolute;
  bottom: 6%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3c2 0%, #ffb545 55%, rgba(255,90,20,0) 75%);
  opacity: 0;
  pointer-events: none;
}

.side-decor.left::before { left: 22%; animation: ember-rise 2.6s ease-in 0.2s infinite; }
.side-decor.left::after { left: 32%; width: 4px; height: 4px; animation: ember-rise 2.2s ease-in 1.1s infinite; }
.side-decor.right::before { right: 22%; animation: ember-rise 2.4s ease-in 0.7s infinite; }
.side-decor.right::after { right: 33%; width: 4px; height: 4px; animation: ember-rise 2.8s ease-in 1.6s infinite; }

@keyframes pillar-flicker {
  0%, 100% { filter: drop-shadow(0 0 24px rgba(0,0,0,0.55)) drop-shadow(0 0 14px rgba(255,140,50,0.35)); }
  45% { filter: drop-shadow(0 0 24px rgba(0,0,0,0.55)) drop-shadow(0 0 22px rgba(255,160,60,0.55)); }
  60% { filter: drop-shadow(0 0 24px rgba(0,0,0,0.55)) drop-shadow(0 0 10px rgba(255,120,40,0.3)); }
}

@keyframes ember-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  15% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(6px, -110px) scale(1.1); }
}

/* Puvodne se sloupy schovavaly uz pod 1450px, protoze pri jejich drivejsi
   sirce (270px, uvnitr flex radku vedle panelu) uz na uzsich oknech
   nezbyvalo misto a tiskly by panel mimo obrazovku. Ted jsou pripnute k
   viewportu mimo tok (position:fixed) a panel je vzdy nad nimi (viz jeho
   z-index:1) - schovavaji se tak az ve stejnem mobilnim zlomu jako zbytek
   rozlozeni (viz .main-area{flex-direction:column} jinde), ne driv. */
@media (max-width: 900px) {
  .side-decor {
    display: none;
  }
}

.dev-credit-row {
  position: fixed;
  left: 14px;
  top: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dev-credit-badge {
  font-size: 12px;
  letter-spacing: 0.4px;
  color: #7a6f5a;
  opacity: 0.75;
  pointer-events: none;
}

.dev-version-badge {
  /* Fixed nezavisle na .dev-credit-row (ktera zustava vlevo nahore s
     Ko-fi/"by Foro") - verze sedi samostatne v pravem dolnim rohu. Fixed
     potomek fixed rodice se porad pozicuje vuci viewportu, ne vuci
     rodici, takze staci prepsat souradnice, nema to vliv na zbytek radku. */
  position: fixed;
  top: auto;
  left: auto;
  right: 12px;
  bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.4px;
  color: #5a5142;
  opacity: 0.6;
  pointer-events: none;
}

.donate-badge {
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  opacity: 0.7;
  filter: grayscale(0.4);
  transition: opacity 0.15s, filter 0.15s, transform 0.15s;
}

.donate-badge:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: scale(1.15);
}

.donate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 12px;
  font-size: 12px;
  color: #9a8f7a;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.15s, color 0.15s;
}

.donate-btn:hover {
  opacity: 1;
  color: #e8c34a;
}

h1 {
  margin-top: 0;
  font-size: 40px;
  color: #e8c34a;
  text-shadow: 0 0 14px rgba(232,195,74,0.4);
  letter-spacing: 1px;
}

h2 {
  margin-top: 0;
  font-size: 26px;
  color: #e8c34a;
}

h3 {
  color: #c9a26d;
  font-size: 20px;
  border-bottom: 1px solid #4a4038;
  padding-bottom: 8px;
  margin-top: 0;
}

.story-text {
  white-space: pre-line;
  line-height: 1.6;
  font-size: 18px;
  color: #d8cdb8;
}

/* Uvodni pribehova obrazovka umi byt na nekterych rozliseni delsi nez
   viewport - misto aby pretekla cela stranka (a tlacitka "Vstoupit"/"Zpet"
   pak byla mimo obrazovku bez scrollovani), omezime vysku panelu a nechame
   scrollovat jen samotny text; nadpis i tlacitka zustavaji vzdy viditelne. */
#storyScreen .panel.narrow {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

#storyScreen .story-text {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-right: 10px;
  margin-bottom: 20px;
}

.controls-text {
  margin-top: 16px;
  font-size: 15px;
  color: #9a8f7a;
  font-style: italic;
  border-top: 1px dashed #4a4038;
  padding-top: 14px;
}

.form-row input {
  background: #14110f;
  border: 1px solid #6b5b3e;
  border-radius: 6px;
  color: #f0e6d0;
  font-family: inherit;
  font-size: 16px;
  padding: 10px 14px;
  width: 100%;
  box-sizing: border-box;
}

.form-row input:focus {
  outline: none;
  border-color: #e8c34a;
  box-shadow: 0 0 8px rgba(232,195,74,0.4);
}

/* Prohlizec (napr. ulozeny udaj z autofill nabidky) jinak prebije nase tmave
   pozadi vlastnim bilym/zlutym - "inset" box-shadow ve stejne barve jako
   pozadi ho vizualne prekryje, transition oddaluje prebarveni webkit vrstvy. */
.form-row input:-webkit-autofill,
.form-row input:-webkit-autofill:hover,
.form-row input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f0e6d0;
  -webkit-box-shadow: 0 0 0 1000px #14110f inset;
  box-shadow: 0 0 0 1000px #14110f inset;
  transition: background-color 5000s ease-in-out 0s;
}

.btn {
  background: linear-gradient(180deg, #7a5a2a, #4a3618);
  color: #f0e6d0;
  border: 1px solid #c9a26d;
  border-radius: 7px;
  padding: 11px 20px;
  font-family: inherit;
  font-size: 16px;
  cursor: url("images/cursors/cursor-hand.png") 1 1, pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}

.btn:hover {
  box-shadow: 0 0 12px rgba(232,195,74,0.5);
  transform: translateY(-1px);
}

.btn.big {
  font-size: 21px;
  padding: 16px 34px;
  margin-top: 22px;
  display: block;
  width: 100%;
}

.btn.small {
  font-size: 14px;
  padding: 6px 14px;
  margin-left: 8px;
}

.story-back-btn {
  opacity: 0.75;
  background: linear-gradient(180deg, #4a4038, #2a2320);
}

.story-back-btn:hover {
  opacity: 1;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
}

.icon-btn svg {
  display: block;
}

.btn.danger {
  background: linear-gradient(180deg, #7a2a2a, #4a1818);
  border-color: #c96a6a;
}

.btn.danger:hover {
  box-shadow: 0 0 12px rgba(232, 74, 74, 0.5);
}

.btn.primary {
  background: linear-gradient(180deg, #9a7a2a, #6a4a10);
  border-color: #e8c34a;
}

.btn.primary:hover {
  box-shadow: 0 0 12px rgba(232, 195, 74, 0.6);
}

.btn:disabled {
  opacity: 0.55;
  cursor: url("images/cursors/cursor-arrow.png") 1 1, default;
  transform: none;
  box-shadow: none;
  filter: grayscale(0.4);
}

.btn-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.btn-stack .btn {
  margin-top: 0;
}

.btn-stack .btn.big {
  margin-top: 0;
}

.sound-toggle-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: url("images/cursors/cursor-hand.png") 1 1, pointer;
}

/* Tematicky prepinac (svicka/pochoden) pro nastaveni zvuku - misto vychozi
   checkbox ikony ceho prohlizece. */

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: url("images/cursors/cursor-hand.png") 1 1, pointer;
  user-select: none;
  padding: 4px 2px;
}

.theme-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.theme-toggle-track {
  position: relative;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #201b17, #14110f);
  border: 2px solid #4a4038;
  border-radius: 16px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.theme-toggle-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  background: radial-gradient(circle at 35% 30%, #6b6355, #2a2320);
  border: 1px solid #574c3c;
  transition: transform 0.25s cubic-bezier(0.4, 1.6, 0.6, 1), background 0.25s, box-shadow 0.25s;
}

.theme-toggle-thumb::before {
  content: '\1F56F';
  filter: grayscale(1) brightness(0.55);
  transition: filter 0.25s;
}

.theme-toggle input:checked ~ .theme-toggle-track {
  border-color: #e8c34a;
  background: linear-gradient(180deg, #3a2e18, #241c10);
  box-shadow: 0 0 10px rgba(232, 195, 74, 0.45), inset 0 0 6px rgba(232, 195, 74, 0.15);
}

.theme-toggle input:checked ~ .theme-toggle-track .theme-toggle-thumb {
  transform: translateX(24px);
  background: radial-gradient(circle at 35% 30%, #ffdca0, #e8942a);
  box-shadow: 0 0 8px rgba(255, 180, 60, 0.85);
}

.theme-toggle input:checked ~ .theme-toggle-track .theme-toggle-thumb::before {
  content: '\1F525';
  filter: none;
}

.theme-toggle input:focus-visible ~ .theme-toggle-track {
  box-shadow: 0 0 0 2px rgba(232, 195, 74, 0.6);
}

.theme-toggle-label {
  color: #d8cdb8;
  font-size: 15px;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 220px;
  margin: -2px 0 4px 64px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #e8c34a var(--vol-pct, 100%), #2a2320 var(--vol-pct, 100%));
  cursor: url("images/cursors/cursor-hand.png") 1 1, pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffdca0, #e8942a);
  border: 1px solid #6b5b3e;
  box-shadow: 0 0 6px rgba(255, 180, 60, 0.6);
  cursor: url("images/cursors/cursor-hand.png") 1 1, pointer;
}

.volume-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #2a2320;
}

.volume-slider::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: #e8c34a;
}

.volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffdca0, #e8942a);
  border: 1px solid #6b5b3e;
  cursor: url("images/cursors/cursor-hand.png") 1 1, pointer;
}

.volume-slider:disabled {
  opacity: 0.35;
  cursor: url("images/cursors/cursor-arrow.png") 1 1, default;
}

/* Auth / prihlaseni */

.flag-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.flag-btn {
  background: #201b17;
  border: 2px solid #4a4038;
  border-radius: 8px;
  padding: 6px 8px;
  cursor: url("images/cursors/cursor-hand.png") 1 1, pointer;
  transition: border-color 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.flag-btn svg {
  display: block;
  border-radius: 2px;
}

.flag-btn:hover {
  transform: translateY(-1px);
}

.flag-btn.active {
  border-color: #e8c34a;
  box-shadow: 0 0 8px rgba(232,195,74,0.4);
}

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.tab-btn {
  flex: 1;
  background: #201b17;
  color: #9a8f7a;
  border: 1px solid #4a4038;
  border-radius: 7px;
  padding: 10px;
  font-family: inherit;
  font-size: 15px;
  cursor: url("images/cursors/cursor-hand.png") 1 1, pointer;
}

.tab-btn.active {
  color: #e8c34a;
  border-color: #e8c34a;
  background: #2a2320;
}

.form-row {
  margin-bottom: 14px;
}

.form-row label {
  display: block;
  color: #c9a26d;
  font-size: 14px;
  margin-bottom: 6px;
}

.error-text {
  color: #ff7a6b;
  font-size: 14px;
  margin: -4px 0 12px;
}

.menu-topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
  font-size: 14px;
}

#loggedInAs {
  margin-right: auto;
}

.menu-soul-shards {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(160, 90, 255, 0.08);
  border: 1px solid rgba(160, 90, 255, 0.35);
  border-radius: 20px;
}

.soul-shards-value {
  color: #d9c4ff !important;
  text-shadow: 0 0 6px rgba(160, 90, 255, 0.6);
}

.soulshard-icon {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 4px rgba(90, 160, 255, 0.6));
  cursor: help;
}

.hud-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid #c9a26d;
  background: #2a2320;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.hud-avatar:hover {
  border-color: #f0d060;
  transform: scale(1.05);
}

/* HUD */

#gameContainer {
  padding: 16px;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  overflow: hidden;
  /* Cely herni obrazovka je presne na vysku okna a nikdy ji neprerusti -
     mezerník tak nema co scrollovat, at log naroste jakkoli. Vnitrni panely
     (log, atd.) maji vlastni overflow-y:auto misto toho, aby rostla cela stranka. */
}

.hud {
  display: flex;
  /* Puvodni flex-wrap: wrap zpusobovalo, ze se lista pri delsim textu (napr.
     dlouhy nazev biomu v nemcine, vic cislic u zivotu/skore, dlouhe jmeno
     hrdiny) zalomila na dva radky a zmenila vysku - to pak na FHD monitoru
     s viditelnou listou zalozek prohlizece kolidovalo s plovoucimi ikonami
     (fullscreenBtn atd.), ktere maji pevnou pozici nezavislou na teto liste.
     Ted uz se nezalomi nikdy (nowrap) a ma pevnou vysku - kdyby byl obsah
     vyjimecne sirsi nez max-width, radeji se uvnitr listy vodorovne
     scrolluje (overflow-x), nez aby menila vysku. */
  flex-wrap: nowrap;
  gap: 24px;
  /* space-between - "gap" je jen minimalni rozestup, zbyvajici volny
     prostor (lista je ted siroka presne jako panely+bludiste pod ni, viz
     syncHudWidth) se rovnomerne rozdeli MEZI vsechny skupiny. Bez toho by
     se cely prebytek nahromadil na jednom miste (predtim margin-left:auto
     na .hud-actions), coz na sirsich obrazovkach vypadalo jako jedna
     obrovska mezera mezi biomem a ikonami. */
  justify-content: space-between;
  align-items: center;
  background: #201b17;
  border: 1px solid #4a4038;
  border-radius: 10px;
  padding: 14px 22px;
  margin-bottom: 12px;
  /* width:100% (ne jen max-width) - bez nej se lista kvuli nowrap+auto
     margins natahovala na sirku sveho obsahu bez ohledu na sirku obrazovky,
     na uzsich oknech tak byla sirsi nez viewport a jeji prava cast (vcetne
     hud-actions ikon) mizela za okrajem #gameContainer (ten ma overflow:
     hidden). Ted se vzdy vejde presne do dostupne sirky (az do stropu
     max-width na sirokych obrazovkach) a jen pripadny prebytecny obsah
     uvnitr scrolluje (overflow-x). */
  width: 100%;
  max-width: 1760px;
  margin-left: auto;
  margin-right: auto;
  flex-shrink: 0;
  height: 94px;
  overflow-x: auto;
  overflow-y: hidden;
}

.hud-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  flex-shrink: 0;
  white-space: nowrap;
}

.hud-logo {
  height: 64px;
  width: auto;
  flex-shrink: 0;
  margin: -10px 0;
  filter: drop-shadow(0 0 5px rgba(232, 195, 74, 0.4));
}

.hud-label {
  color: #9a8f7a;
}

.hud-value {
  color: #e8c34a;
  font-weight: bold;
}

.hud-value.slot-active {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Jmeno hrdiny a nazev bioma jsou jedine hodnoty v listě s opravdu
   promenlivou delkou (uzivatelske jmeno az 20 znaku, delsi preklady nazvu
   bioma v nekterych jazycich) - bez stropu by dohromady mohly natahnout
   obsah listy natolik, ze by se tlacitka hud-actions (zebricek, denik...)
   odscrollovaly mimo viditelnou cast (viz overflow-x na .hud). Radeji se
   tedy oriznou tremi teckami, nez aby ohrozily viditelnost dulezitejsich
   ovladacich prvku vpravo. */
#heroNameDisplay,
#biomeText {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

.bar {
  width: 150px;
  height: 20px;
  background: #3a3230;
  border: 1px solid #5a4f3a;
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: 100%;
  transition: width 0.15s;
}

.hp-fill {
  background: linear-gradient(90deg, #6fc24c, #3f9430);
}


.compass-arrow {
  display: inline-block;
  font-size: 32px;
  color: #b98aff;
  text-shadow: 0 0 10px rgba(185,138,255,0.7);
  transition: transform 0.2s;
}

.stats-subheader {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dotted #4a4038;
  font-size: 13px;
  color: #b89aff;
}

.buff-row .stats-value { color: #e8e0d0; }
.buff-row.speed .stats-value { color: #6fc3ff; }
.buff-row.strength .stats-value { color: #ffa858; }
.buff-row.invincibility .stats-value { color: #ffe873; }
.buff-row.attackSpeed .stats-value { color: #7be07a; }

.grace-overlay {
  position: absolute;
  /* inset:0 je jen fallback, nez poprve probehne syncGameOverlayBounds()
     (viz resizeCanvasToDisplay v game.js) - ta pak preplacuje presnymi
     left/top/width/height podle skutecne vykresleneho obdelniku bludiste
     (canvas ma object-fit:contain, takze pri jinem pomeru stran nez
     .canvas-wrap po stranach/nahore/dole zbyva prazdny gutter, ktery uz
     ma ukazovat pruhledne pozadi aplikace, ne tenhle preklad). */
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: radial-gradient(circle at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 75%);
  pointer-events: none;
}

.grace-ring {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #7ee787;
  box-shadow: 0 0 24px rgba(126, 231, 135, 0.55), inset 0 0 20px rgba(126, 231, 135, 0.25);
  background: rgba(12, 20, 12, 0.55);
  animation: grace-pulse 1s ease-in-out infinite;
}

#graceOverlayNumber {
  font-size: 56px;
  font-weight: bold;
  color: #d9ffd9;
  text-shadow: 0 0 12px rgba(126, 231, 135, 0.9);
}

.grace-overlay-label {
  font-size: 17px;
  color: #cfe8cf;
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
  letter-spacing: 0.5px;
}

@keyframes grace-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.pause-overlay {
  position: absolute;
  /* Fallback pred prvnim syncGameOverlayBounds() - viz komentar u
     .grace-overlay vyse. */
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: rgba(8, 6, 5, 0.72);
}

.pause-title {
  font-size: 40px;
  line-height: 1.3;
  font-weight: bold;
  color: #e8c34a;
  text-shadow: 0 0 18px rgba(232,195,74,0.55);
  letter-spacing: 2px;
}

.pause-hint {
  font-size: 15px;
  color: #d8cdb8;
  font-style: italic;
}

/* Zobrazi se na miste hrace hned po smrti, jeste pres zamrznuty posledni
   snimek bludiste (viz handlePlayerDeath) - teprve po par vterinach se
   prepne na skutecnou Game Over obrazovku se statistikami/restartem, misto
   aby tam hned "skoklo" bez jakekoli pauzy na vydechnuti. */
.death-overlay {
  position: absolute;
  /* Fallback pred prvnim syncGameOverlayBounds() - viz komentar u
     .grace-overlay vyse. */
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(20,0,0,0.55) 0%, rgba(0,0,0,0.88) 80%);
  animation: death-overlay-fade-in 0.8s ease-out;
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* Pridana pred prepnutim na Game Over obrazovku (viz handlePlayerDeath) -
   pomale zhasnuti misto ostreho "skoku", nez teprve pak prijde .hidden. */
.death-overlay.fade-out {
  opacity: 0;
}

.death-overlay-text {
  font-family: 'Cinzel', 'Georgia', 'Times New Roman', serif;
  font-size: 46px;
  font-weight: 700;
  letter-spacing: 4px;
  text-align: center;
  padding: 0 40px;
  /* .canvas-wrap (predek pres #deathOverlay) ma line-height:0 kvuli odstraneni
     mezery pod <canvas>, ale to se bez explicitniho prepsani dedi i sem -
     radek pak ma nulovou vysku a cely gradientovy text zmizi. */
  line-height: normal;
  /* Ohniva/zarova barva mista ploche cervene - gradient od zarove oranzove
     pres krev na tmave rubinovou, s vicevrstvym drop-shadow zarem (na
     rozdil od text-shadow respektuje pruhledny text z background-clip). */
  background: linear-gradient(180deg, #ffb347 0%, #ff5a2c 30%, #c81c1c 60%, #5a0000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(255,120,40,0.8)) drop-shadow(0 0 42px rgba(200,10,10,0.65));
  animation: death-text-pulse 2.4s ease-in-out infinite;
}

@keyframes death-overlay-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes death-text-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 16px rgba(255,120,40,0.8)) drop-shadow(0 0 42px rgba(200,10,10,0.65));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 26px rgba(255,160,60,1)) drop-shadow(0 0 64px rgba(230,20,20,0.85));
    transform: scale(1.02);
  }
}

.tip-banner {
  text-align: center;
  font-style: italic;
  font-size: 17px;
  color: #e8c34a;
  min-height: 22px;
  margin-bottom: 10px;
  opacity: 0.85;
}

.main-area {
  display: flex;
  gap: 18px;
  justify-content: center;
  max-width: 2100px;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.canvas-wrap {
  position: relative;
  border: none;
  border-radius: 5px;
  /* Zadne vlastni pozadi - kdyz canvas (object-fit:contain) nevyplni celou
     krabici (jiny pomer stran nez viewport), maji byt v prostoru okolo
     videt plamenne pozadi cele aplikace (viz html { background: ... }) a
     ambientni castice, ne holy tmave hnedy blok. */
  background: transparent;
  line-height: 0;
  /* Sirka/vyska uz NEJSOU flex:1 "zaber vsechno dostupne misto" - JS
     (syncCanvasWrapSize v game.js) nastavuje presnou velikost, kterou
     bludiste se zachovanym pomerem stran skutecne vyplni, aby postranni
     panely (viz .sidebar) sedely hned vedle vykreslene plochy, ne vedle
     prazdneho okraje uvnitr predimenzovaneho boxu. flex:none + min-width/
     min-height jsou jen fallback pred prvnim resizeCanvasToDisplay(). */
  flex: none;
  min-width: 300px;
  min-height: 200px;
  max-width: 1400px;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Vlastni "epicky" kurzor - orizly z images/cursor.png (uzivatelem dodana
     ohniva cepel), protoze boj (viz mouse-aim prace) miri primo podle pozice
     kurzoru. Hotspot (2 2) sedi na hrot cepele, ne na stred obrazku. */
  cursor: url("images/cursors/cursor-blade.png") 1 1, crosshair;
}

.sidebar {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  /* Pojistka pro nizsi vysky obrazovky (FHD monitor s malym oknem, mobil) -
     Objektiv+Staty+zalozky Nepratele/Udalosti dohromady nemusi se svou
     pevnou (flex-shrink:0) vyskou vzdy vejit do dostupneho prostoru. Bez
     tohoto by "log-section" (jedina flex:1 polozka) proste zmizela pod
     spodni hranou (viz #gameContainer { overflow: hidden }) - ted misto
     toho scrolluje cely sidebar. */
  overflow-y: auto;
}

.sidebar-section {
  background: #201b17;
  border: 1px solid #4a4038;
  border-radius: 10px;
  padding: 16px 18px;
  flex-shrink: 0;
}

.log-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Zalozky Nepratele/Udalosti sdileji jednu sekci (viz #sidebarTabs) misto
   dvou oddelenych panelu - na FHD/mobilu se totiz obe najednou nemusely
   vejit vubec (viz komentar u .sidebar overflow-y). Jen jedna ze dvou
   (#enemyCountList/#logList) je v danou chvili viditelna (trida .hidden). */
.sidebar-tabs {
  margin: 0 0 10px;
}

.objective-progress {
  font-size: 21px;
  font-weight: bold;
  color: #e8c34a;
  text-shadow: 0 0 10px rgba(232,195,74,0.45);
  line-height: 1.35;
}

.objective-hint {
  font-size: 13px;
  font-style: italic;
  color: #9a8f7a;
  line-height: 1.4;
  margin-top: 6px;
}

.stats-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.stats-label {
  color: #b8ac96;
}

.stats-value {
  color: #f0e6d0;
  font-weight: bold;
}

.score-row {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dotted #4a4038;
  font-size: 15px;
}

.score-row .stats-label,
.score-row .stats-value {
  color: #e8c34a;
  font-weight: bold;
}

/* Vybaveni, lektvary, inventar */

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.equip-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: #14110f;
  border: 2px solid #3a322a;
  border-radius: 8px;
  cursor: url("images/cursors/cursor-arrow.png") 1 1, default;
  transition: border-color 0.15s, transform 0.1s;
}

.equip-slot.filled {
  cursor: url("images/cursors/cursor-hand.png") 1 1, pointer;
}

.equip-slot.filled:hover {
  transform: translateY(-1px);
}

.equip-slot.slot-active {
  border-color: #e8c34a;
  box-shadow: 0 0 8px rgba(232, 195, 74, 0.45);
}

.equip-slot.tier-common { border-color: #6b6355; }
.equip-slot.tier-rare { border-color: #4a86ad; }
.equip-slot.tier-epic { border-color: #2ecc71; box-shadow: 0 0 8px rgba(46, 204, 113, 0.4); }
.equip-slot.tier-legendary { border-color: #ff8a3c; box-shadow: 0 0 10px rgba(255, 138, 60, 0.45); }
.equip-slot.tier-mythic { border-color: #e83c3c; box-shadow: 0 0 10px rgba(232, 60, 60, 0.5); }
.equip-slot.tier-ancient { border-color: #b060f0; box-shadow: 0 0 11px rgba(176, 96, 240, 0.5); }
.equip-slot.tier-divine { border-color: #fff2c0; box-shadow: 0 0 14px rgba(255, 230, 150, 0.65); }

.potion-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.potion-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: #14110f;
  border: 2px solid #3a322a;
  border-radius: 8px;
  cursor: url("images/cursors/cursor-hand.png") 1 1, pointer;
  transition: border-color 0.15s, transform 0.1s;
}

.potion-slot:hover {
  transform: translateY(-1px);
}

.potion-slot.empty {
  cursor: url("images/cursors/cursor-arrow.png") 1 1, default;
  opacity: 0.4;
}

.potion-count {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 12px;
  font-weight: bold;
  color: #e8c34a;
  text-shadow: 0 0 3px #000;
}

.potion-hotkey {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 10px;
  font-weight: bold;
  color: #b8ac96;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  padding: 0 3px;
}

.inventory-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.inventory-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  min-height: 0;
}

.inventory-tier-header {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.inventory-tier-header:first-child {
  margin-top: 0;
}

.inventory-tier-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 6px;
  margin-bottom: 4px;
}

.inventory-empty {
  font-size: 13px;
  color: #7a6f5a;
  font-style: italic;
}

.tier-tag {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Stejny tvar jako .tier-tag, ale barva prichazi inline (viz biomeTagHtml v
   game.js) primo z LEVEL_THEMES.glow daneho biomu - misto rucne psane
   .tier-tag.tier-X tridy pro kazdou z 6 biomovych palet zvlast. */
.biome-tag {
  display: inline-block;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.tier-tag.tier-common { background: #3a3226; color: #b8ac96; }
.tier-tag.tier-rare { background: #1c3446; color: #8fc3e8; }
.tier-tag.tier-epic { background: #123a22; color: #4ee08a; }
.tier-tag.tier-legendary { background: #4a2810; color: #ff9a4c; }
.tier-tag.tier-mythic { background: #4a1414; color: #ff7a7a; }
.tier-tag.tier-ancient { background: #2e1a4a; color: #cd9bff; }
.tier-tag.tier-divine { background: #4a4020; color: #fff2c0; }

/* Trvaly panel logu (vlevo od bludiste) */

.enemy-count-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.enemy-count-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
  border-bottom: 1px dotted #2e2620;
}

.enemy-count-row:last-child {
  border-bottom: none;
}

.enemy-count-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #d8cdb8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enemy-count-value {
  font-size: 13px;
  font-weight: bold;
  color: #e8c34a;
  min-width: 18px;
  text-align: right;
}

.enemy-count-empty {
  color: #6b6355;
  font-style: italic;
  font-size: 13px;
  padding: 4px 2px;
}

.log-messages {
  font-size: 14px;
  color: #b8ac96;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.log-messages div {
  padding: 5px 0;
  border-bottom: 1px dotted #2e2620;
  animation: log-entry-in 0.2s ease-out;
}

.log-messages div:first-child {
  color: #e8e0d0;
}

@keyframes log-entry-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.item-tooltip {
  position: fixed;
  z-index: 50;
  max-width: 260px;
  background: linear-gradient(180deg, #2a2320, #1c1714);
  border: 2px solid #6b5b3e;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #d8cdb8;
  box-shadow: 0 8px 24px rgba(0,0,0,0.65);
  pointer-events: none;
}

.tt-inline-icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-left: 2px;
}

.item-tooltip .tt-name {
  font-weight: bold;
  font-size: 14.5px;
  margin-right: 6px;
}

.item-tooltip .tt-name.tier-common { color: #b8ac96; }
.item-tooltip .tt-name.tier-rare { color: #8fc3e8; }
.item-tooltip .tt-name.tier-epic { color: #4ee08a; text-shadow: 0 0 6px rgba(46,204,113,0.45); }
.item-tooltip .tt-name.tier-legendary { color: #ff9a4c; text-shadow: 0 0 7px rgba(255,138,60,0.5); }
.item-tooltip .tt-name.tier-mythic { color: #ff7a7a; text-shadow: 0 0 7px rgba(232,60,60,0.55); }
.item-tooltip .tt-name.tier-ancient { color: #cd9bff; text-shadow: 0 0 7px rgba(176,96,240,0.55); }
.item-tooltip .tt-name.tier-divine { color: #fff2c0; text-shadow: 0 0 9px rgba(255,230,150,0.7); }

.item-tooltip .tt-stats {
  display: block;
  margin-top: 5px;
  color: #e8e0d0;
}

/* Kazdy stat predmetu na vlastnim radku (viz formatItemStatsHtml v game.js)
   - .stat-offensive/.stat-defensive obarvuji specialni buffy (efekt na zasah
   nepritele vs. magicky stit/regenerace) podle jejich povahy, at je na prvni
   pohled jasne, co utoci a co chrani. */
.stat-line {
  display: block;
}

.stat-offensive {
  color: #ff8a5c;
}

.stat-defensive {
  color: #5fffab;
}

.item-tooltip .tt-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #9a8f7a;
  font-style: italic;
}

/* Kontextove bubliny pro uvodni napovedu (viz startTutorial v game.js) -
   ukazuji na konkretni prvek HUD/menu s pulzujicim zlatym rameckem a
   textovou bublinou se sipkou smerem k nemu. Na rozdil od .item-tooltip
   maji vlastni tlacitka, takze nejsou pointer-events:none. */
.tutorial-highlight {
  outline: 3px solid #e8c34a;
  outline-offset: 3px;
  border-radius: 8px;
  animation: tutorial-pulse 1.4s ease-in-out infinite;
}

@keyframes tutorial-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,195,74,0.55); }
  50% { box-shadow: 0 0 0 9px rgba(232,195,74,0); }
}

.tutorial-bubble {
  position: fixed;
  z-index: 220;
  width: 280px;
  background: linear-gradient(180deg, #2a2320, #1c1714);
  border: 2px solid #e8c34a;
  border-radius: 10px;
  padding: 14px 16px;
  color: #d8cdb8;
  box-shadow: 0 10px 32px rgba(0,0,0,0.7);
}

.tutorial-bubble::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: #221b18;
  border: 2px solid #e8c34a;
  transform: rotate(45deg);
  left: var(--arrow-left, 50%);
  margin-left: -7px;
}

.tutorial-bubble.arrow-top::after {
  top: -8px;
  border-right: none;
  border-bottom: none;
}

.tutorial-bubble.arrow-bottom::after {
  bottom: -8px;
  border-left: none;
  border-top: none;
}

.tutorial-step {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9a8f7a;
  margin-bottom: 4px;
}

.tutorial-title {
  font-weight: bold;
  font-size: 15px;
  color: #e8c34a;
  margin-bottom: 6px;
}

.tutorial-text {
  font-size: 13px;
  line-height: 1.5;
}

.tutorial-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}

.tutorial-skip {
  background: none;
  border: none;
  color: #9a8f7a;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 6px 4px;
}

.tutorial-skip:hover {
  color: #d8cdb8;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.dialog-panel {
  max-width: 760px;
}

/* Stejny vzor jako #storyScreen .panel.narrow: panel je omezeny na 90vh a
   je to flex sloupec, takze nadpis/shrnuti/tlacitko Zavrit zustavaji vzdy
   viditelne a scrolluje jen samotny (flex:1) obsah uvnitr - misto aby na
   nizsich rozlisenich/vice polozkach (napr. 80 achievementu) obsah presahl
   panel a tlacitko Zavrit skoncilo nedosazitelne mimo viewport. */
.dialog-panel.wide {
  max-width: 1200px;
  width: 92%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.controls-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0;
}

.controls-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 2px;
  border-bottom: 1px dotted #2e2620;
}

.controls-keys {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 128px;
  flex-shrink: 0;
}

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  background: linear-gradient(180deg, #3a322a, #201b17);
  border: 1px solid #6b5b3e;
  border-bottom-width: 2px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: bold;
  color: #e8c34a;
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

.controls-sep {
  color: #7a6f5a;
  font-size: 12px;
}

.controls-label {
  color: #d8cdb8;
  font-size: 15px;
}

.kbd-editable {
  cursor: url("images/cursors/cursor-hand.png") 1 1, pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.kbd-editable:hover {
  border-color: #e8c34a;
  transform: translateY(-1px);
}

.kbd-listening {
  background: linear-gradient(180deg, #5a4a20, #3a2e10);
  border-color: #ffcf4a;
  color: #fff2c0;
  box-shadow: 0 0 8px rgba(255, 207, 74, 0.6);
  animation: kbd-pulse 0.9s ease-in-out infinite;
}

@keyframes kbd-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 207, 74, 0.4); }
  50% { box-shadow: 0 0 12px rgba(255, 207, 74, 0.85); }
}

.controls-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.controls-swap-note {
  font-size: 12px;
  color: #e8c34a;
  font-style: italic;
  margin-left: 6px;
}

.controls-footer-hint {
  font-size: 14px;
  color: #9a8f7a;
  font-style: italic;
  border-top: 1px dashed #4a4038;
  padding-top: 12px;
  margin-top: 4px;
  white-space: pre-line;
}

.achievements-summary {
  color: #e8c34a;
  font-weight: bold;
  margin: 4px 0 2px;
}

.achievements-playtime {
  color: #9a8f7a;
  font-size: 13px;
  margin: 0 0 14px;
}

.achievements-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  align-content: start;
  gap: 4px 20px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-bottom: 16px;
}

.achievement-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 6px;
  border-bottom: 1px dotted #2e2620;
}

.achievement-row.locked .achievement-name {
  color: #8a8070;
}

.achievement-row.unlocked .achievement-name {
  color: #f0e6d0;
}

.achievement-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.achievement-name {
  font-weight: bold;
  font-size: 15px;
}

.achievement-desc {
  font-size: 13px;
  color: #9a8f7a;
}

/* Na rozdil od achievementu/soul shopu (jejich obsah je vzdy dost dlouhy na
   to, aby sam natahl panel k max-height) muzou mit jednotlive zalozky
   denikuo hodne rozdilnou vysku obsahu (kratky uvod pribehu vs. mrizka 36
   kusu vybaveni) - bez pevne vysky panelu by se okno pri prekliknuti
   zalozky pokazde jinak zmenilo. Height (ne jen max-height) drzi panel
   porad stejne velky, meni se jen scroll uvnitr .journal-content. */
#journalModal .panel {
  height: 90vh;
}

.journal-tabs {
  display: flex;
  gap: 6px;
  margin: 4px 0 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.journal-tab-btn {
  background: #201b17;
  border: 1px solid #4a4038;
  border-radius: 6px;
  color: #b8ac96;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.journal-tab-btn:hover {
  color: #f0e6d0;
  border-color: #6b5b3e;
}

.journal-tab-btn.active {
  background: #4a3822;
  border-color: #c9a26d;
  color: #f0d060;
}

.journal-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-bottom: 16px;
}

.tips-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-bottom: 16px;
}

.tip-row {
  padding: 9px 6px;
  border-bottom: 1px dotted #2e2620;
  color: #d8cdb4;
  font-size: 14px;
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-content: start;
  gap: 4px 20px;
}

/* Na rozdil od ostatnich zalozek (auto-fit - pocet sloupcu se muze menit
   podle sirky okna) potrebuje Vybaveni VZDY presne 3 sloupce, protoze
   polozky jsou serazene podle tieru (9 kusu/tier) a maji smysl jen kdyz
   kazdy tier zaplni presne 3 cele radky pred zacatkem dalsiho - viz
   allItemsFlatByTier v game.js. */
.journal-grid-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.journal-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 6px;
  border-bottom: 1px dotted #2e2620;
}

.journal-row.locked .journal-name {
  color: #6b6355;
  font-style: italic;
}

.journal-row.unlocked .journal-name {
  color: #f0e6d0;
  font-weight: bold;
}

.journal-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.journal-chance {
  font-size: 11px;
  color: #8a7f68;
  font-style: normal;
}

.journal-story-entry {
  padding: 10px 4px 16px;
  border-bottom: 1px dashed #4a4038;
  margin-bottom: 6px;
}

.journal-story-entry h4 {
  color: #c9a26d;
  font-size: 14px;
  margin: 0 0 6px;
}

/* Stejny duvod jako u .info-modal-header (viz komentar tam) - nazev kapitoly
   (napr. "Kapitola desata - Rano nad Vaelornem") jako vlastni radek,
   tlacitka pod nim zarovnane doprava pres align-self, misto radkoveho flexu
   s wrap, kde by se dlouhy nazev choval stejne spatne. */
.journal-story-header-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.journal-story-header-row .story-chapter-actions {
  width: fit-content;
  margin-left: auto;
  margin-top: 0;
}

.journal-story-header-row h4 {
  margin: 0;
}

.journal-story-entry p {
  font-size: 14px;
  line-height: 1.5;
  color: #d8cdb8;
  white-space: pre-line;
}

.journal-empty-hint {
  color: #9a8f7a;
  font-style: italic;
  font-size: 14px;
  padding: 8px 4px;
}

.story-chapter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.story-chapter-tab-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #6b5b3e;
  background: #241d17;
  color: #d8cdb8;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.story-chapter-tab-btn:hover {
  border-color: #e8c34a;
}

.story-chapter-tab-btn.active {
  background: linear-gradient(180deg, #8a6a2a, #5a4419);
  border-color: #e8c34a;
  color: #fff3d6;
}

.story-chapter-tab-btn.locked {
  color: #6a6155;
  border-style: dashed;
}

.story-chapter-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.story-intro-actions {
  justify-content: flex-end;
  margin-top: 0;
  margin-bottom: 6px;
}

.story-listen-btn.active {
  border-color: #e8c34a;
  color: #e8c34a;
}

.story-comic-panel {
  max-width: min(1400px, 96vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.story-comic-img {
  /* Sirka se natvrdo natahuje na vetsinu panelu (ne jen max-width: 100%),
     protoze prohlizec malé zdrojove obrazky bez explicitni sirky nikdy
     nezvetsi nad jejich prirozenou velikost - tady chceme naopak, aby byl
     komiks vzdy velky bez ohledu na skutecne rozliseni souboru. */
  width: min(1100px, 90vw);
  height: auto;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #6b5b3e;
}

.loading-progress-text {
  color: #6a6151;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.btn:disabled:hover {
  box-shadow: none;
  transform: none;
}

.soul-shop-btn {
  background: linear-gradient(180deg, #5a3a8a, #33184a);
  border-color: rgba(160, 90, 255, 0.6);
  color: #e8c34a;
}

.soul-shop-btn:hover {
  box-shadow: 0 0 12px rgba(160, 90, 255, 0.55);
}

.soul-shop-summary {
  color: #d9c4ff;
  font-weight: bold;
  margin: 4px 0 14px;
  text-shadow: 0 0 6px rgba(160, 90, 255, 0.5);
}

.soul-shop-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-bottom: 16px;
}

.soul-shop-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 6px;
  border-bottom: 1px dotted #2e2620;
}

.soul-shop-row.maxed {
  opacity: 0.75;
}

/* flex:1 drzi text blok na stejne pozici (hned za ikonou) ve VSECH radcich
   bez ohledu na delku vlastniho textu - puvodne mel .soul-shop-row
   justify-content:space-between a tenhle blok zadny flex-grow, takze si ho
   prohlizec sam sirkoval podle obsahu a kazdy radek tak zacinal jinde
   (kratsi popis = vic prazdneho mista pred nim = jiny zacatek nazvu). */
.soul-shop-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.soul-shop-name {
  font-weight: bold;
  font-size: 15px;
  color: #f0e6d0;
}

.soul-shop-desc {
  font-size: 13px;
  color: #9a8f7a;
}

.soul-shop-level {
  font-size: 12px;
  color: #b89aff;
}

.soul-shop-buy-btn {
  flex-shrink: 0;
}

.perk-row {
  gap: 10px;
}

.perk-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f0d060;
  background: #201b17;
  border: 1px solid #4a3822;
  border-radius: 8px;
}

.perk-icon img {
  width: 22px;
  height: 22px;
}

.achievement-toast {
  --ach-color: #ff8a3c;
  --ach-glow: rgba(255,138,60,0.45);
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(180deg, #322a24, #1c1714);
  border: 3px solid var(--ach-color);
  border-radius: 14px;
  padding: 14px 30px 14px 16px;
  box-shadow: 0 10px 36px rgba(0,0,0,0.7), 0 0 30px var(--ach-glow), inset 0 0 20px var(--ach-glow);
  opacity: 0;
  transform: translateX(-50%) translateY(-40px) scale(0.5);
  transition: opacity 0.3s ease;
  pointer-events: none;
  overflow: visible;
}

/* Vstupni animace ma prehnat cil (overshoot) misto plocheho fade-in, plus
   pulzujici zar okolo behem cele viditelnosti - "prasknuti do oci", ktere
   uzivatel chtel misto puvodniho ticheho vjezdu shora. */
.achievement-toast.show {
  opacity: 1;
  animation: ach-toast-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             ach-toast-glow-pulse 1.1s ease-in-out 0.55s 2;
}

@keyframes ach-toast-pop {
  0% { transform: translateX(-50%) translateY(-40px) scale(0.4) rotate(-6deg); }
  55% { transform: translateX(-50%) translateY(6px) scale(1.08) rotate(1.5deg); }
  75% { transform: translateX(-50%) translateY(-2px) scale(0.97) rotate(-0.5deg); }
  100% { transform: translateX(-50%) translateY(0) scale(1) rotate(0); }
}

@keyframes ach-toast-glow-pulse {
  0%, 100% { box-shadow: 0 10px 36px rgba(0,0,0,0.7), 0 0 30px var(--ach-glow), inset 0 0 20px var(--ach-glow); }
  50% { box-shadow: 0 10px 44px rgba(0,0,0,0.7), 0 0 55px var(--ach-glow), inset 0 0 30px var(--ach-glow); }
}

.achievement-toast-icon-wrap {
  position: relative;
  flex-shrink: 0;
  animation: ach-icon-spin-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ach-icon-spin-in {
  0% { transform: scale(0) rotate(-140deg); opacity: 0; }
  70% { transform: scale(1.15) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* Kruhova "razova vlna" vychazejici zpod ikony a mizejici smerem ven -
   klasicky herni efekt pro "loot/achievement pop". */
.achievement-toast-burst {
  position: absolute;
  left: 34px;
  top: 50%;
  width: 70px;
  height: 70px;
  margin-top: -35px;
  border-radius: 50%;
  border: 3px solid var(--ach-color);
  opacity: 0;
  pointer-events: none;
}

.achievement-toast.show .achievement-toast-burst {
  animation: ach-burst 0.7s ease-out 0.1s;
}

@keyframes ach-burst {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}

.achievement-toast-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  color: var(--ach-color);
  text-shadow: 0 0 8px var(--ach-glow);
}

.achievement-toast-name {
  font-size: 20px;
  font-weight: bold;
  color: #fff6e0;
  text-shadow: 0 0 10px var(--ach-glow);
}

.achievement-toast-desc {
  font-size: 13px;
  color: #d8cdb8;
  margin-top: 3px;
  max-width: 260px;
  line-height: 1.35;
}

/* Vystrazne oznameni pred spustenim objektivu 'collapse' (viz startCollapse
   v game.js) - stejny "toast" princip jako achievement-toast, ale barevne a
   pohybove vyrazne alarmujici (cervena, treseni), aby hrac mel jistou chvíli
   predem najisto na vedomi, ze se neco spatneho chysta, misto aby se to
   dozvedel az ze zapisu v deniku. */
.collapse-warning {
  position: fixed;
  top: 22%;
  left: 50%;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(180deg, #3a1414, #1c0808);
  border: 3px solid #ff4a3c;
  border-radius: 14px;
  padding: 18px 38px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.75), 0 0 40px rgba(255,60,40,0.55), inset 0 0 24px rgba(255,60,40,0.3);
  opacity: 0;
  transform: translateX(-50%) scale(0.6);
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.collapse-warning.show {
  opacity: 1;
  animation: collapse-warning-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             collapse-warning-shake 0.5s ease-in-out 0.4s 3;
}

@keyframes collapse-warning-pop {
  0% { transform: translateX(-50%) scale(0.4); }
  60% { transform: translateX(-50%) scale(1.1); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes collapse-warning-shake {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  25% { transform: translateX(calc(-50% - 4px)) rotate(-1.5deg); }
  75% { transform: translateX(calc(-50% + 4px)) rotate(1.5deg); }
}

.collapse-warning-icon {
  font-size: 40px;
  color: #ff6a52;
  text-shadow: 0 0 16px rgba(255,80,50,0.8);
  animation: collapse-warning-icon-pulse 0.6s ease-in-out infinite;
}

@keyframes collapse-warning-icon-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.collapse-warning-title {
  font-size: 24px;
  font-weight: bold;
  color: #ffdcd0;
  text-shadow: 0 0 12px rgba(255,60,40,0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.collapse-warning-subtitle {
  font-size: 15px;
  color: #ffb3a0;
  margin-top: 3px;
}

/* Stejny "toast" princip jako collapse-warning, ale zlata/heroicka barva -
   oznamuje pozitivni udalost (aktivace zachranneho perku), ne hrozbu. */
.perk-activation-toast {
  position: fixed;
  /* O kus nize a s vyssim z-indexem nez .collapse-warning - obe pouzivaji
     stejne "fixed uprostred obrazovky" umisteni a driv se pri soucasnem
     zobrazeni (napr. temer smrtelny zasah behem varovani pred zborcenim
     podlahy) prekryvaly bez jasneho poradi. Perk toast je vzacnejsi a
     casove kritictejsi moment (prezil jsi smrt), proto ma prednost. */
  top: 34%;
  left: 50%;
  z-index: 46;
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(180deg, #3a2f14, #1c1608);
  border: 3px solid #ffcc4a;
  border-radius: 14px;
  padding: 18px 38px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.75), 0 0 40px rgba(255,204,74,0.55), inset 0 0 24px rgba(255,204,74,0.3);
  opacity: 0;
  transform: translateX(-50%) scale(0.6);
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.perk-activation-toast.show {
  opacity: 1;
  animation: perk-activation-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes perk-activation-pop {
  0% { transform: translateX(-50%) scale(0.4); }
  60% { transform: translateX(-50%) scale(1.1); }
  100% { transform: translateX(-50%) scale(1); }
}

.perk-activation-icon {
  font-size: 40px;
  color: #ffcc4a;
  text-shadow: 0 0 16px rgba(255,204,74,0.8);
  animation: perk-activation-icon-pulse 0.6s ease-in-out infinite;
}

@keyframes perk-activation-icon-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.perk-activation-title {
  font-size: 24px;
  font-weight: bold;
  color: #fff3d0;
  text-shadow: 0 0 12px rgba(255,204,74,0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.perk-activation-subtitle {
  font-size: 15px;
  color: #ffe6a0;
  margin-top: 3px;
}

.dialog-panel p {
  white-space: pre-line;
  line-height: 1.55;
  font-size: 17px;
}

/* Popup pri vstupu do urovne (viz showLevelIntroModal) muze u kapitol
   pribehu obsahovat hodne dlouhy text (viz kapitoly 2-10) - bez tohoto
   omezeni okno rostlo do vysky bez limitu a hrac ho videl cele jen po
   oddaleni prohlizece. Stejny vzor jako .dialog-panel.wide (flex sloupec +
   max-height 90vh), jen ne siroky - jen telo (info-modal-body) scrolluje,
   nadpis a tlacitko Go zustavaji vzdy viditelne. */
.info-modal-panel {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.info-modal-body {
  overflow-y: auto;
  min-height: 0;
}

.level-objective-line {
  color: #e8c34a;
  font-weight: bold;
}

/* Nadpis (muze byt dlouhy, napr. "Uroven 5 - Stretnuti s bossem - Zatopene
   ulice") vzdy jako vlastni cely radek, tlacitka Poslechnout/Komiks vzdy
   pod nim, zarovnane doprava pres align-self na sloupcovem flexu - misto
   puvodniho radkoveho flexu s wrap, kde "justify-content: space-between"
   na radku s jedinym prvkem (kdyz se nadpis zalomil na 2 radky a tlacitka
   spadla sama na dalsi radek) zarovnavalo doleva, ne doprava. Tady uz
   poloha tlacitek nezavisi na tom, jestli se nadpis zalomil, nebo ne. */
.info-modal-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.info-modal-header h2 {
  margin: 0;
}

.info-modal-header .story-chapter-actions {
  width: fit-content;
  margin-left: auto;
  margin-top: 0;
}

.dialog-panel h4 {
  color: #c9a26d;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 16px 0 8px;
}

.preview-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
}

.preview-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 2px;
  font-size: 15px;
  color: #d8cdb8;
  border-bottom: 1px dotted #2e2620;
}

.preview-list li.preview-text-only {
  padding-left: 48px;
  color: #b8ac96;
  font-size: 14px;
}

.preview-icon {
  flex-shrink: 0;
  background: #14110f;
  border: 1px solid #3a322a;
  border-radius: 6px;
}

.dialog-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

.dialog-choices .btn {
  text-align: left;
}

.leaderboard-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 4px 4px 0;
}

.leaderboard-tabs {
  display: flex;
  gap: 6px;
  margin: 4px 0 14px;
  border-bottom: 1px solid #4a4038;
}

.leaderboard-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #9a8f7a;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  padding: 6px 4px 10px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.leaderboard-tab:hover {
  color: #d8cdb8;
}

.leaderboard-tab.active {
  color: #e8c34a;
  border-bottom-color: #e8c34a;
}

.leaderboard-search-input {
  background: #14110f;
  border: 1px solid #6b5b3e;
  border-radius: 6px;
  color: #f0e6d0;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 14px;
}

.leaderboard-search-input:focus {
  outline: none;
  border-color: #e8c34a;
}

/* ---------- Podpora ---------- */

.support-intro {
  color: #b8ac96;
  font-size: 13px;
  margin: 0 0 14px;
}

.support-label {
  display: block;
  color: #9a8f7a;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}

.support-form-input {
  background: #14110f;
  border: 1px solid #6b5b3e;
  border-radius: 6px;
  color: #f0e6d0;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 14px;
}

.support-form-input:focus {
  outline: none;
  border-color: #e8c34a;
}

.support-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.4;
  margin-bottom: 4px;
}

.support-char-count {
  text-align: right;
  color: #6a6151;
  font-size: 11px;
  margin-bottom: 10px;
}

.support-status-text {
  font-size: 13px;
  min-height: 18px;
  margin: 0 0 8px;
}

.support-status-text.success {
  color: #7ad654;
}

.support-status-text.error {
  color: #ff6a5c;
}

.support-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- Pratele ---------- */

.friends-panel {
  position: relative;
}

.modal-close-x {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #4a4038;
  background: #201b17;
  color: #c9a26d;
  font-size: 20px;
  line-height: 1;
  cursor: url("images/cursors/cursor-hand.png") 1 1, pointer;
  transition: color 0.15s, background 0.15s;
}

.modal-close-x:hover {
  color: #f0d060;
  background: rgba(240, 208, 96, 0.15);
}

.friends-search-row {
  position: relative;
  margin-bottom: 18px;
}

.friends-search-row .leaderboard-search-input {
  margin-bottom: 0;
}

.friends-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 220px;
  overflow-y: auto;
  background: #1c1714;
  border: 1px solid #6b5b3e;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.friends-search-row-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #2e2620;
}

.friends-search-row-item:last-child {
  border-bottom: none;
}

.friends-search-row-item .friends-username {
  flex: 1;
}

.friends-section {
  margin-bottom: 20px;
}

.friends-section h3 {
  font-size: 15px;
  color: #e8c34a;
  margin: 0 0 10px;
}

.friends-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.friends-section-header h3 {
  margin: 0;
}

.friends-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.friends-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #1c1714;
  border: 1px solid #3a322a;
  border-radius: 6px;
}

.friends-avatar {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #c9a26d;
  background: #2a2320;
  flex-shrink: 0;
}

.friends-username {
  color: #f0e6d0;
  font-weight: bold;
}

.friends-row-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.friends-score {
  margin-left: auto;
  color: #b8ac96;
  font-size: 14px;
  white-space: nowrap;
}

.friends-empty {
  color: #9a8f7a;
  font-style: italic;
}

/* Podium pro prvni tri hrace - vizualne serazeno 2.-1.-3. (jako na
   olympiade), 1. misto uprostred a vetsi. Kazda karta ma barvu a zar
   podle medaile (zlato/stribro/bronz), aby zebricek pusobil jako
   skutecna trofej, ne jen dalsi radek tabulky. */
.leaderboard-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  margin: 8px 0 28px;
  flex-wrap: wrap;
}

.podium-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
  padding: 18px 14px 16px;
  border-radius: 14px;
  border: 2px solid;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2));
  transition: transform 0.2s ease;
}

.podium-card:hover {
  transform: translateY(-4px);
}

.podium-card.rank-1 { order: 2; width: 172px; padding-top: 22px; padding-bottom: 20px; z-index: 2; }
.podium-card.rank-2 { order: 1; }
.podium-card.rank-3 { order: 3; }

.podium-card.rank-1 {
  border-color: #e8c34a;
  background: linear-gradient(180deg, rgba(232,195,74,0.16), rgba(58,46,18,0.35));
  box-shadow: 0 0 30px rgba(232,195,74,0.4), inset 0 0 20px rgba(232,195,74,0.08);
  animation: podium-gold-pulse 3.2s ease-in-out infinite;
}

.podium-card.rank-2 {
  border-color: #c7ccd6;
  background: linear-gradient(180deg, rgba(199,204,214,0.12), rgba(40,42,48,0.35));
  box-shadow: 0 0 20px rgba(199,204,214,0.25), inset 0 0 16px rgba(199,204,214,0.06);
}

.podium-card.rank-3 {
  border-color: #cd8a4c;
  background: linear-gradient(180deg, rgba(205,138,76,0.14), rgba(50,32,16,0.35));
  box-shadow: 0 0 20px rgba(205,138,76,0.25), inset 0 0 16px rgba(205,138,76,0.06);
}

@keyframes podium-gold-pulse {
  0%, 100% { box-shadow: 0 0 30px rgba(232,195,74,0.4), inset 0 0 20px rgba(232,195,74,0.08); }
  50% { box-shadow: 0 0 42px rgba(232,195,74,0.6), inset 0 0 26px rgba(232,195,74,0.14); }
}

.podium-card.me {
  outline: 2px dashed rgba(232,195,74,0.8);
  outline-offset: 3px;
}

.podium-medal {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.podium-card.rank-1 .podium-medal {
  font-size: 34px;
}

.podium-avatar {
  display: block;
  border-radius: 50%;
  background: #2a2320;
  border: 2px solid currentColor;
  margin-bottom: 10px;
}

.rank-1 .podium-avatar { width: 76px; height: 76px; color: #e8c34a; }
.rank-2 .podium-avatar { width: 60px; height: 60px; color: #c7ccd6; }
.rank-3 .podium-avatar { width: 60px; height: 60px; color: #cd8a4c; }

.podium-name {
  font-weight: 700;
  font-size: 15px;
  color: #f0e6d0;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-score {
  font-size: 22px;
  font-weight: 700;
  margin-top: 4px;
}

.rank-1 .podium-score { color: #e8c34a; font-size: 26px; }
.rank-2 .podium-score { color: #c7ccd6; }
.rank-3 .podium-score { color: #cd8a4c; }

.podium-level {
  font-size: 12px;
  color: #9a8f7a;
  margin-top: 2px;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.leaderboard-table th {
  text-align: left;
  color: #c9a26d;
  border-bottom: 1px solid #4a4038;
  padding: 8px 10px;
}

.leaderboard-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #241d18;
}

.leaderboard-table tbody tr:nth-child(odd) {
  background: rgba(255,255,255,0.02);
}

.leaderboard-table tbody tr:hover {
  background: rgba(232,195,74,0.08);
}

.leaderboard-table tr.me td {
  color: #e8c34a;
  font-weight: bold;
  background: rgba(232,195,74,0.1);
}

.leaderboard-avatar {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #c9a26d;
  background: #2a2320;
}

.avatar-picker-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 8px 0 14px;
}

.avatar-picker-wrap.hidden {
  display: none;
}

.avatar-picker-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.avatar-picker-title {
  color: #c9a26d;
  font-size: 15px;
  margin: 0;
}

.avatar-preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid #c9a26d;
  background: radial-gradient(circle, #3a3028, #201a16);
  box-shadow: 0 0 14px rgba(232, 195, 74, 0.25);
}

.avatar-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 320px;
}

.avatar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.avatar-row-label {
  color: #b8a888;
  font-size: 14px;
  flex-shrink: 0;
}

.avatar-gender-toggle {
  display: flex;
  gap: 6px;
}

.avatar-gender-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #6a5a3a;
  background: #2a2320;
  color: #c9c0ac;
  font-size: 16px;
  cursor: url("images/cursors/cursor-hand.png") 1 1, pointer;
}

.avatar-gender-btn.active {
  border-color: #e8c34a;
  background: linear-gradient(180deg, #7a5a2a, #4a3618);
  color: #f0e6d0;
}

.avatar-swatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.avatar-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #6a5a3a;
  cursor: url("images/cursors/cursor-hand.png") 1 1, pointer;
  padding: 0;
}

.avatar-swatch.active {
  border-color: #e8c34a;
  box-shadow: 0 0 6px rgba(232, 195, 74, 0.6);
}

.avatar-swatch:disabled,
.avatar-arrow-btn:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

.avatar-row-disabled .avatar-row-label {
  opacity: 0.5;
}

.avatar-arrow-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar-arrow-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #6a5a3a;
  background: #2a2320;
  color: #f0e6d0;
  font-size: 16px;
  line-height: 1;
  cursor: url("images/cursors/cursor-hand.png") 1 1, pointer;
}

.avatar-arrow-btn:hover {
  border-color: #e8c34a;
}

.avatar-arrow-label {
  min-width: 72px;
  text-align: center;
  color: #f0e6d0;
  font-size: 14px;
}

.avatar-random-btn {
  align-self: center;
  margin-top: 4px;
}

.avatar-cost-note {
  color: #b8a888;
  font-size: 14px;
  text-align: center;
  margin: 0 0 10px;
}

.score-line {
  font-size: 20px;
  color: #e8c34a;
  margin: 6px 0 0;
}

.record-line {
  font-size: 15px;
  color: #9adfff;
  margin: 4px 0 18px;
}

/* Dotykove ovladani (zobrazeno jen na dotykovych zarizenich, viz game.js) */

.touch-controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.touch-controls button {
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: none;
}

.dpad {
  position: relative;
  width: 150px;
  height: 150px;
}

.dpad-btn {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: rgba(42, 35, 32, 0.75);
  border: 1px solid rgba(201, 162, 109, 0.6);
  color: #f0e6d0;
  font-size: 18px;
}

.dpad-up { top: 0; left: 50px; }
.dpad-down { top: 100px; left: 50px; }
.dpad-left { top: 50px; left: 0; }
.dpad-right { top: 50px; left: 100px; }

.action-pad {
  display: grid;
  grid-template-columns: repeat(2, 52px);
  gap: 8px;
}

.action-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(42, 35, 32, 0.75);
  border: 1px solid rgba(201, 162, 109, 0.6);
  color: #f0e6d0;
  font-size: 18px;
}

.action-btn.attack-btn {
  background: rgba(122, 90, 42, 0.85);
  grid-column: span 2;
  border-radius: 26px;
}

.potion-btn-touch.potion-heal { border-color: #c0392b; }
.potion-btn-touch.potion-speed { border-color: #3498db; }
.potion-btn-touch.potion-strength { border-color: #e67e22; }
.potion-btn-touch.potion-invincibility { border-color: #f9d71c; }
.potion-btn-touch.potion-attackspeed { border-color: #2ecc71; font-size: 13px; }
.potion-btn-touch.potion-crit { border-color: #ff5cc0; }

/* Responzivni zalomeni pro mensi obrazovky a mobily */

@media (max-width: 900px) {
  .panel {
    padding: 24px 20px;
  }

  h1 {
    font-size: 28px;
  }

  .story-text {
    font-size: 15px;
  }

  .main-area {
    flex-direction: column;
    align-items: center;
    /* Zdedene "justify-content: center" z desktopove (radkove) verze pravidla
       tu drive vystredovalo obsah SVISLE (v column rezimu je "justify"
       hlavni = svisla osa) - postranni panely jsou ale dohromady mnohem
       vyssi nez viditelna cast obrazovky, takze se vetsina obsahu
       vystredila cely mimo viewport nahoru/dolu a bludiste se scvrklo na
       tenky prouzek uprostred. flex-start = radi se odshora dolu normalne,
       zbytek jde dohledat scrollem (viz #gameContainer nize). */
    justify-content: flex-start;
  }

  .sidebar {
    width: 100%;
    max-width: 100%;
  }

  /* Bludiste je vzdy prvni (hned pod HUD), postranni panely (vybava/cil
     atd.) az pod nim - poradi v DOM je (leva lista, bludiste, prava
     lista), na mobilu ale hrac potrebuje bludiste + dotykove ovladani
     videt OKAMZITE bez scrollovani, zbytek dohleda scrollem pod nim.
     Bez flex:1 (drive tu bylo) - v posouvatelnem sloupci by flex:1 tahalo
     o zbyvajici prostor proti postrannim listam a vysledna vyska by byla
     nahodna; misto toho se .canvas-wrap prosto prizpusobi prirozene vysce
     sameho <canvas> (viz #gameCanvas { height:auto }). */
  .canvas-wrap {
    order: -1;
    width: 100%;
    max-width: 100%;
  }

  #gameCanvas {
    max-width: 100%;
    height: auto;
  }

  .hud {
    gap: 10px;
    padding: 8px 12px;
    justify-content: flex-start;
    height: auto;
  }

  .bar {
    width: 100px;
  }

  #gameContainer {
    padding: 8px;
    /* Na mobilu uz cela obrazovka nemusi byt presne na vysku okna (viz
       zakladni pravidlo vyse s pevnou height:100dvh + overflow:hidden) -
       postranni panely (vybava, cil urovne, statistiky...) proste
       nasleduji za bludistem a dostupne jsou obycejnym scrollem cele
       stranky, misto aby se orizly/schovaly mimo viditelnou cast. */
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding-bottom: 190px;
  }
}

@media (max-width: 480px) {
  .panel.narrow {
    margin: 10px;
  }

  .btn.big {
    font-size: 17px;
    padding: 13px 20px;
  }

  .tabs {
    gap: 6px;
  }

  .dpad {
    width: 130px;
    height: 130px;
    transform: scale(0.9);
    transform-origin: bottom left;
  }

  .action-pad {
    transform: scale(0.9);
    transform-origin: bottom right;
  }
}