/* ============================================================
   Ask Waldo - standalone chat
   Design portovany z chatbot screenov uciacej appky (style.css).
   ============================================================ */

@font-face {
  font-family: 'Apotek';
  src: url('../fonts/ApotekComp_Black.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'NotoCond';
  src: url('../fonts/NotoSans_ExtraCondensedBold.otf') format('opentype');
  font-display: swap;
}

:root {
  --bubble: #3a3a3a;          /* zladene so sedou texturou (waldoSheet ton) */
  --accent: #fddf37;
  --ink: #f4f1ea;
  --dim: rgba(255,255,255,.55);
  --top-h: calc(env(safe-area-inset-top, 0px) + 86px);   /* pod appbarom (logo + burger) */
  --foot-h: calc(env(safe-area-inset-bottom, 0px) + 100px);   /* composer + credit paticka */
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* overflow MUSI byt aj na html: body overflow neklipuje position:fixed prvky
   (zatvoreny drawer translateX(105%) a sheety translateY(103%) trcia mimo viewportu
   -> inak sa da cely screen tahat dolava/doprava aj v chate). overscroll-behavior
   vypina rubber-band. */
html, body { height: 100%; width: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  /* seda textura ako waldoSheet popup v appke (stmavena na #4d4d4d ton) */
  background: linear-gradient(rgba(77,77,77,.6), rgba(77,77,77,.6)), #4d4d4d url('../img/table-bcg3.jpg') center / cover no-repeat fixed;
  color: var(--ink);
  font-family: 'NotoCond', 'Noto Sans', sans-serif;
  position: fixed; inset: 0;   /* zamkne viewport - ziadny pan/scroll na urovni dokumentu */
}
.hidden { display: none !important; }

/* ===== Hlavicka: logo vlavo, burger vpravo, gradient do stratena ===== */
#appbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 22;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 18px 54px;   /* dlhsi dobeh gradientu pod logom */
  background: linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.4) 40%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
#appbar > * { pointer-events: auto; }
/* margin 6px = rovnaka vyska riadku ako 54px burger -> logo sa nehybe */
.ab-logo { height: 42px; width: auto; display: block; margin: 6px 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }

/* burger (port z appky) - mimo appbaru, VZDY fixed nad vsetkym vratane draweru */
#burger {
  /* right:12px -> viditelny avatar (42px vnutri 54px tap targetu) ma pravy okraj na 18px,
     zarovnany s pravym okrajom send buttonu aj 18px odsadenim loga vlavo */
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; z-index: 27;
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: transparent; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
#burger span {
  display: block; width: 23px; height: 4px; border-radius: 1px; background: #fff;
  transition: transform .35s cubic-bezier(.22,.9,.3,1), opacity .25s;
}
/* modro-biely kruh na X = focus ring prehliadaca (device mode ho kresli aj po tape);
   vypnuty uplne, JS button po kliku blurne */
#burger:focus, #burger:focus-visible { outline: none !important; box-shadow: none !important; }
#burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#burger.open span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
#burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* X -> plna sipka dole (↓): kratke ∨ (hlavica, skratena o 50%, stretnute vo vrchole)
   + zvisly driek, ktory sa vyrolluje zdola (z vrcholu) nahor.
   pouzite ked je vyrolovany bottom sheet (report / ranking) - X zavrie sheet dole.
   .arrowdown je za .open -> prebije ho. hlavica ide cez transition (plynulo z X),
   driek cez keyframe s oneskorenim, nech hlavica najprv sadne. */
#burger.arrowdown span:nth-child(1) { transform: translate(-4px, 10px) rotate(45deg) scaleX(.6); }
#burger.arrowdown span:nth-child(3) { transform: translate(4px, -6px) rotate(-45deg) scaleX(.6); }
#burger.arrowdown span:nth-child(2) {
  opacity: 1; transform-origin: 100% 50%;   /* pravy koniec = vrchol (spodok drieku po rotacii) */
  animation: bgShaftUnroll .32s cubic-bezier(.22,.9,.3,1) .14s both;
}
@keyframes bgShaftUnroll {
  from { transform: translate(-11.5px, 6px) rotate(90deg) scaleX(0); }
  to   { transform: translate(-11.5px, 6px) rotate(90deg) scaleX(.78); }
}

/* intro X (pri otvoreni menu): diagonaly sa "vytiahnu" do X ako pri morphe zo sipky,
   ale bez strednej ciary (ta ostava skryta, ziadny fade-out). */
#burger.xintro:not(.arrowdown) span:nth-child(1) { animation: bgXInL .34s cubic-bezier(.22,.9,.3,1) both; }
#burger.xintro:not(.arrowdown) span:nth-child(3) { animation: bgXInR .34s cubic-bezier(.22,.9,.3,1) both; }
@keyframes bgXInL {
  from { transform: translate(-4px, 10px) rotate(45deg) scaleX(.6); }
  to   { transform: translateY(8px) rotate(45deg); }
}
@keyframes bgXInR {
  from { transform: translate(4px, -6px) rotate(-45deg) scaleX(.6); }
  to   { transform: translateY(-8px) rotate(-45deg); }
}

/* prihlaseny: hamburger nahradeny avatarom uzivatela (drawer = jeho profil + liga).
   pri otvoreni sa avatar skryje a ciary sa morphnu na X (ako doteraz). */
.bg-avatar {
  /* rovnaka velkost ako Waldov avatar v chate (.msg.waldo .av): 42px kruh.
     tap target ostava 54px (burger), avatar je vycentrovany vnutri */
  display: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  align-items: center; justify-content: center; background: #2c2c2a;
  border: 2px solid #fff;
}
.bg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-avatar-ph { width: 54%; height: 54%; color: #fff; display: none; }
#burger.avatar:not(.open) span { display: none; }        /* skry hamburger ciary */
#burger.avatar:not(.open) .bg-avatar { display: flex; }
/* clen bez nahratej fotky: wireframe kruh so siluetou (ako placeholder v draweri) */
#burger.avatar.noimg .bg-avatar { border-style: dashed; background: transparent; }
#burger.avatar.noimg .bg-avatar img { display: none; }
#burger.avatar.noimg .bg-avatar-ph { display: block; }

/* neprihlaseny: hamburger je pill "Join the League"; po otvoreni menu sa vrati X.
   POZOR: trieda NESMIE byt "cta" - .cta je gate button s nekonecnou gloss sluckou ::before,
   burger ju predtym dedil a shine mu behal po X. Preto vlastna trieda .joinpill. */
#burger.joinpill { transition: opacity .35s ease; }
/* joinpill-wait: skryje button OKAMZITE (bez transition), po odobrati triedy fadne in */
#burger.joinpill.joinpill-wait { opacity: 0 !important; pointer-events: none; transition: none; }
#burger .bg-lbl { display: none; width: auto; height: auto; background: none; border-radius: 0; transition: none; }
#burger.joinpill:not(.open) {
  width: auto; height: 44px; border-radius: 999px;
  top: calc(env(safe-area-inset-top, 0px) + 17px);
  padding: 0 18px;
  background: linear-gradient(135deg, var(--accent) 0%, #fee566 100%);
  z-index: 23;   /* POD drawerom (25): pri zatvarani ho exitujuci drawer plynulo odhali */
}
#burger.joinpill:not(.open) span { display: none; }
#burger.joinpill:not(.open) .bg-lbl {
  display: block;
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .5px;
  font-size: 1.05rem; color: #161616; white-space: nowrap;
}

/* reveal pri exite draweru (closeMenu): avatar zoom-in + fade (pruzny easing),
   pill sa odmaskuje zlava doprava. delay = pockat, kym exitujuci drawer prvok odhali. */
@keyframes bgAvatarIn { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes pillReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
#burger.avatar.reveal .bg-avatar { animation: bgAvatarIn .42s cubic-bezier(.34,1.56,.64,1) .06s both; }
.add-pill.reveal { animation: pillReveal .4s cubic-bezier(.22,.9,.3,1) .2s both; }

/* prihlaseny: ADD RESULT pill v headeri, nalavo od hamburgeru; pod drawerom/formularom (z23) */
.add-pill {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 17px); right: 82px; z-index: 23;
  height: 44px; padding: 0 18px; border: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #f28038 0%, #e8552b 100%);
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .5px;
  font-size: 1.05rem; color: #fff; white-space: nowrap;
}
.add-pill:active { transform: scale(.97); }

/* ===== Drawer: fullscreen dark (dizajn visual-assets/waldo-menu/waldo-menu.jpg) ===== */
.menuBack {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 24;
}
.menuBack.show { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; inset: 0;
  /* rovnake pozadie ako chat (fixed = nadvazuje na body), len s tmavym overlayom */
  background: linear-gradient(rgba(15,15,14,.62), rgba(15,15,14,.62)), #4d4d4d url('../img/table-bcg3.jpg') center / cover no-repeat fixed;
  color: var(--ink);
  transform: translateX(105%);
  transition: transform .35s cubic-bezier(.22,.9,.3,1);
  z-index: 25; display: flex; flex-direction: column; overflow: hidden;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px 0;
}
.drawer.show { transform: translateX(0); }

/* gloss: staticky kontajner nesie masku s dierou na pozicii X close (ta sa nehybe),
   samotny shine pas sa animuje az vnutri - cez X preto nikdy neprejde */
.dr-gloss {
  position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(circle 44px at calc(100% - 45px) calc(env(safe-area-inset-top, 0px) + 39px), transparent 96%, #000 100%);
          mask-image: radial-gradient(circle 44px at calc(100% - 45px) calc(env(safe-area-inset-top, 0px) + 39px), transparent 96%, #000 100%);
}
.dr-gloss::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -75%; width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.13), transparent);
  transform: skewX(-18deg); opacity: 0;
}
/* gloss pri kazdom otvoreni draweru (member aj guest); bezi uz POCAS intro swipu */
.drawer.show .dr-gloss::after { animation: drawerGloss 1s ease 0s 1 both; }
@keyframes drawerGloss { 0% { left: -75%; opacity: 1; } 100% { left: 145%; opacity: 1; } }

/* prvky nabiehaju uz pocas swipe animacie draweru */
@keyframes drItemIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes drItemOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px); } }
.drawer.show .dr-head { animation: drItemIn .29s ease .09s both; }
.drawer.show .dr-prestige { animation: drItemIn .29s ease .14s both; }
.drawer.show .dr-season-blk { animation: drItemIn .29s ease .19s both; }
.drawer.show .dr-cards { animation: drItemIn .29s ease .23s both; }
.drawer.show .dr-ranking { animation: drItemIn .29s ease .27s both; }
.drawer.show .dr-rewards { animation: drItemIn .29s ease .29s both; }
.drawer.show .dr-report, .drawer.show .dr-cta-note { animation: drItemIn .29s ease .31s both; }
.drawer.show .dr-foot { animation: drItemIn .29s ease .35s both; }
.drawer.closing .dr-foot { animation: drItemOut .14s ease 0s both; }
.drawer.closing .dr-report, .drawer.closing .dr-cta-note { animation: drItemOut .14s ease .03s both; }
.drawer.closing .dr-rewards { animation: drItemOut .14s ease .045s both; }
.drawer.closing .dr-ranking { animation: drItemOut .14s ease .06s both; }
.drawer.closing .dr-cards { animation: drItemOut .14s ease .09s both; }
.drawer.closing .dr-season-blk { animation: drItemOut .14s ease .11s both; }
.drawer.closing .dr-prestige { animation: drItemOut .14s ease .12s both; }
.drawer.closing .dr-head { animation: drItemOut .14s ease .13s both; }

/* zladene s gate CTA (Unlock with Patreon): velkost, radius 8px, bez tiena */
.dr-btn {
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .5px;
  font-size: 1.35rem; text-align: center;
  border: none; cursor: pointer; text-decoration: none;
  padding: 13px 18px; border-radius: 8px;
}
/* CTA: oranzova podla dizajnu waldo-menu, gloss shine */
.dr-patreon, .dr-report {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #f28038 0%, #e8552b 100%);
  color: #fff;
}
.dr-patreon::before, .dr-report::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); pointer-events: none;
  animation: drShine 6.5s ease-in-out infinite;
}
@keyframes drShine { 0% { left: -60%; } 30% { left: 130%; } 100% { left: 130%; } }
/* once-a-day lockout: seda + strafovanie (ako zamknuty submit), label nesie odpocet */
.dr-report.lockout, .add-pill.lockout {
  background: #8a8a90; cursor: default; overflow: hidden; position: relative;
}
.dr-report.lockout::before { content: none; }   /* bez gloss shine */
.dr-report.lockout::after, .add-pill.lockout::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, #000 0 11px, transparent 11px 22px);
  opacity: .05;
}
.add-pill.lockout { position: fixed; }   /* pill ostava fixnuty v headeri */
.add-pill.lockout:active { transform: none; }

/* Show Ranking: sekundarny (ghost) button, sucast "league" skupiny (pod stats).
   docasny placeholder styl - finalny dizajn tabulky doladime neskor */
.dr-ranking, .dr-rewards {
  background: transparent; color: var(--ink);
  border: 2px solid rgba(255,255,255,.28);
  /* rovnaka velkost fontu aj vyska ako Add League Result (.dr-btn 1.35rem, 13px padding);
     padding 11px kompenzuje 2px border (box-sizing border-box) -> rovnaka vyska */
  font-size: 1.35rem; padding: 11px 18px;
}
.dr-ranking:active, .dr-rewards:active { background: rgba(255,255,255,.08); }
/* League Table + Season Reward: dvojica rovnako sirokych pills vedla seba */
.dr-row { display: flex; gap: 14px; }
.dr-row .dr-btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }

/* ===== Neprihlaseny: profil ako wireframe mockup (skeleton bary + ciarkovane obrysy) ===== */
.drawer.guest .dr-head,
.drawer.guest .dr-prestige,
.drawer.guest .dr-cards {
  pointer-events: none;   /* placeholdery nie su klikatelne */
}
/* vedla avatara ide CTA headline namiesto mena a krajiny */
.dr-guest-cta {
  display: none;
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .5px;
  font-size: clamp(1.3rem, 3vh, 1.7rem); color: #fff; line-height: 1.08;
}
.drawer.guest .dr-guest-cta { display: block; }
.dr-guest-cta .dr-tm { font-size: .38em; letter-spacing: .5px; vertical-align: super; margin-left: 2px; }

/* fresh clen (bez mena/krajiny): welcome header + edit button namiesto avatara */
/* rovnaka velkost ako guest headline "Join the Sunday Manager League" */
.dr-fresh-t1, .dr-fresh-t2 {
  display: none;
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .5px;
  font-size: clamp(1.3rem, 3vh, 1.7rem); color: #fff; line-height: 1.08;
}
/* placeholder avatara: ciarkovany wireframe kruh + zlte plusko; otvara edit sheet */
.dr-fresh-edit {
  position: relative;
  display: none; flex: none;
  width: 62px; height: 62px;   /* fixne ako .dr-avatar */
  border-radius: 50%; cursor: pointer;
  background: transparent; border: 2px dashed rgba(255,255,255,.9);
  align-items: center; justify-content: center;
}
.dr-fresh-edit svg { width: 52%; height: 52%; fill: none; stroke: #fff; stroke-width: 1.4; }
.dr-fresh-edit:active { transform: scale(.96); }
/* bez mena: po intro kaskade avatar jemne popne, nech je jasne, ze je klikatelny;
   nepopne, ked sa otvara rovno edit sheet (.editing) */
.drawer.fresh.show:not(.editing):not(.postedit) .dr-fresh-edit { animation: freshPop .6s ease-in-out .62s 1 backwards; }
@keyframes freshPop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.dr-fresh-plus {
  position: absolute; right: -5px; bottom: -5px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #161616;
  display: flex; align-items: center; justify-content: center;
  font-family: 'NotoCond', sans-serif; font-size: 1.05rem; font-weight: bold; line-height: 1;
}
/* fresh (bez mena): welcome texty namiesto hello/krajiny */
.drawer.fresh .dr-fresh-t1, .drawer.fresh .dr-fresh-t2 { display: block; }
.drawer.fresh .dr-hello, .drawer.fresh .dr-country, .drawer.fresh .dr-name-hint { display: none; }
.drawer.fresh .dr-global-sub { display: none; }   /* bez profilu/hier: ziadne "No games finished" */
/* fresh-edit ("+") len pre naozaj fresh clena (bez mena); clen s menom ale bez loga
   ukaze ciarkovany avatar placeholder (silueta + vlajka badge), nie plusko */
.drawer.fresh .dr-avatar { display: none; }
.drawer.fresh .dr-fresh-edit { display: flex; }
.drawer.guest .dr-hello, .drawer.guest .dr-country, .drawer.guest .dr-name-hint { display: none; }
/* texty a cisla -> pulzujuce skeleton bary (transparentny text = bar ma realnu sirku) */
.drawer.guest .dr-prestige-l span, .drawer.guest .dr-prestige-l b, .drawer.guest .dr-prestige-r,
.drawer.guest .dr-stat b, .drawer.guest .dr-stat-lbl {
  color: transparent !important;
  background: rgba(255,255,255,.13); border-radius: 6px;
  animation: skelPulse 2.6s ease-in-out infinite;
}
@keyframes skelPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* vlajka je teraz badge na avatare, guest ju moze ukazat (mock krajina) */
/* prestige uz nie je karta (je sucast banneru) - guest nema ziadny obrys */
.drawer.guest .dr-prestige { background: transparent; border: none; }
/* plna biela + opacity na CELOM svg -> linka a gulicka sa zlozia ako jeden tvar, bez overlapu */
.drawer.guest .dr-chart { opacity: .45; }
.drawer.guest .dr-chart path { stroke: #fff; }
.drawer.guest #drChartArea { display: none !important; stroke: none; }   /* cierny gradient na dark wireframe nepatri */
.drawer.guest .dr-chart circle { fill: rgba(255,255,255,.45); }
/* guest: ikonky stlmene do wireframu */
.drawer.guest .dr-stat-ic { filter: grayscale(1) opacity(.35); }
/* CTA neprihlaseneho: brandova zlta s glossom (ako gate Unlock with Patreon) */
.drawer.guest .dr-report {
  background: linear-gradient(135deg, var(--accent) 0%, #fee566 100%);
  color: #1a1a1a;
  margin-bottom: 0;
}
/* gloss na guest CTA moze bezat - povodny problem bola kolizia triedy .cta, nie shine */
/* doplnujuce info pod CTA (len guest); sedi tesne pod CTA buttonom, gap k footeru
   robi trailing .dr-space za notou */
.dr-cta-note {
  display: none;
  font-family: 'NotoCond', sans-serif; font-size: .78rem; font-weight: bold;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--accent); text-align: center;
  margin-top: 0;   /* rozostup v .dr-btns riesi gap */
}
.drawer.guest .dr-cta-note { display: block; }

/* ===== VEREJNY (guest) drawer: cisty join-pitch, ine poradie ===== */
/* header bez fotky/overlayu, bez grafu, prestige, global %, vlajky na zetone */
.drawer.guest .dr-banner::before,
.drawer.guest .dr-banner::after,
.drawer.guest .dr-chartbox,
.drawer.guest .dr-prestige,
.drawer.guest .dr-global-sub,
.drawer.guest .dr-flag-badge { display: none !important; }
/* poradie: header -> Sign in + 7 days trial -> Season One + League Table.
   pruzne spacery preč, fixny gap, buttony ungroupnute (display:contents) na preusporiadanie */
.drawer.guest .dr-space { display: none; }
.drawer.guest .dr-profile { justify-content: flex-start; gap: 22px; padding-bottom: 14px; }
.drawer.guest .dr-btns { display: contents; }
.drawer.guest .dr-banner   { order: 1; }
.drawer.guest .dr-report   { order: 2; }
.drawer.guest .dr-cta-note { order: 3; margin-top: -12px; }   /* trial tesnejsie pod sign-in */
.drawer.guest .dr-league   { order: 4; }
.drawer.guest .dr-row      { order: 5; }

/* ===== Prihlaseny: profil (dizajn waldo-menu) ===== */
.dr-profile {
  flex: 1; min-height: 0;
  /* rozostupy robia pruzne .dr-space spacery (rovnomerny gap medzi 4 elementmi aj k footeru);
     pri nizkom viewporte sa spacery zmrstia, prvky ostavaju v plnej velkosti */
  display: flex; flex-direction: column;
  padding: 0;
}
/* pruzny spacer = rovnomerny gap; rastie rovnako medzi vsetkymi elementmi vratane gapu
   k footeru, zmrsti sa az na min. 6px, ked je viewport nizky (namiesto pretecenia) */
.dr-space { flex: 1 1 0; min-height: 6px; }
/* ELEMENT 2: league blok drzi Season One + progress + stats + ranking tesne pokope */
.dr-league {
  flex: none;   /* skupina sa nezmrstuje, len spacery okolo nej */
  display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 26px);
}
.dr-league > * { flex-shrink: 0; }
/* buttony (League Table + Add League Result) zoskupene 14px od seba = jeden element */
.dr-btns { display: flex; flex-direction: column; gap: 14px; }
.dr-btns > * { flex-shrink: 0; }
/* prvky sa NIKDY nesplostuju (flex-shrink by ich stlacil); pruzi len .dr-space */
.dr-profile > * { flex-shrink: 0; }
.dr-profile > .dr-space { flex-shrink: 1; }
.dr-head { display: flex; align-items: center; gap: 14px; padding-right: 58px; /* miesto pre X */ }
/* bez fotky = wireframe skeleton (ciarkovany kruh + linkova silueta); s fotkou .filled */
.dr-avatar {
  position: relative; flex: none;
  width: 62px; height: 62px;   /* fixne (nie vh) -> banner ma konzistentnu vysku na kazdej obrazovke */
  border-radius: 50%; cursor: pointer;
  background: transparent; border: 2px dashed rgba(255,255,255,.9);
  overflow: visible;
  display: flex; align-items: center; justify-content: center;
}
.dr-avatar.filled { border: none; }
.dr-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.dr-avatar-ph { width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 1.4; }
/* guest: namiesto siluety zeton Sunday Manager */
.dr-avatar-logo { display: none; }
.drawer.guest .dr-avatar { border: none; }
.drawer.guest .dr-avatar-ph { display: none; }
.drawer.guest .dr-avatar-logo { display: block; position: static; width: 100%; height: 100%; object-fit: contain; }
.dr-avatar-badge {
  position: absolute; right: -3px; bottom: -3px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  background: #2c2c2a; color: var(--ink);
  display: none; align-items: center; justify-content: center;
  border: 2px solid #161615;
}
/* pickery (fotak, meno, krajina) su aktivne len pre cerstvy profil alebo v Edit Profile rezime */
.dr-avatar { cursor: default; }
.drawer.editable .dr-avatar { cursor: pointer; }
.drawer.editable .dr-avatar-badge { display: flex; }
.dr-name, .dr-country { cursor: default; }
.drawer.editable .dr-name:not(.locked) { cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.drawer.editable .dr-country:not(.locked) { cursor: pointer; }
.dr-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.dr-hello { display: flex; align-items: center; gap: 10px; min-width: 0; }   /* meno + vlajka vedla seba */
/* globalny percentil / NO GAMES FINISHED pod menom */
.dr-global-sub {
  font-family: 'NotoCond', sans-serif; font-size: .8rem; font-weight: bold;
  letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.85); margin-top: 0;
}
.dr-hello-pre, .dr-name {
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .5px;
  font-size: 1.6rem; color: #fff; line-height: 1.05;   /* fixne (nie vh) -> konzistentna vyska banneru */
}
.dr-name {
  background: none; border: none; cursor: pointer; padding: 0;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dr-name.placeholder { color: rgba(255,255,255,.45); }
.dr-name.locked { cursor: default; }
.dr-name-edit { display: flex; gap: 8px; width: 100%; }
.dr-name-edit input {
  flex: 1; min-width: 0; font-family: 'NotoCond', sans-serif; font-size: 1rem;
  padding: 8px 12px; border: 2px solid #3c3c3a; border-radius: 8px; outline: none;
  color: var(--ink); background: #2b2b29;
}
.dr-name-edit input:focus { border-color: var(--accent); }
.dr-name-edit button {
  font-family: 'Apotek', sans-serif; text-transform: uppercase; font-size: 1.05rem;
  background: var(--accent); color: #161616; border: none; border-radius: 8px;
  padding: 0 16px; cursor: pointer;
}
.dr-name-hint {
  font-family: 'NotoCond', sans-serif; font-size: .74rem; letter-spacing: .3px;
  color: rgba(255,255,255,.45); min-height: 0;
}
.dr-name-hint.err { color: #ff6b5e; }
.dr-country {
  display: flex; align-items: center; gap: 7px;
  font-family: 'NotoCond', sans-serif; font-size: .7rem; letter-spacing: .8px; text-transform: uppercase;
  color: #fff; background: none; border: none; cursor: pointer; padding: 0;
}
.dr-country.placeholder { color: rgba(255,255,255,.5); text-transform: none; letter-spacing: .3px; }   /* info text, nie klik */
.dr-country.locked { cursor: default; }
.dr-flag { width: 22px; height: 22px; object-fit: cover; border-radius: 50%; flex: none; }
/* narodnost v rohu avatara: vlajka, alebo zlte plusko ked krajina nie je vyplnena */
.dr-flag-badge {
  position: absolute; right: -4px; bottom: -4px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
  border: 2px solid #161615; background: #2c2c2a;
  display: flex; align-items: center; justify-content: center;
}
.dr-flag-badge .dr-flag { width: 100%; height: 100%; border-radius: 0; }
.dr-flag-badge .dr-flag-plus {
  font-family: 'Apotek', sans-serif; font-weight: bold; font-size: 1.05rem; line-height: 1; color: #161615;
}
.dr-flag-badge.noflag { background: var(--accent); }   /* zlty kruzok s + */
.dr-flag-badge.noflag .dr-flag { display: none; }
.dr-flag-badge:not(.noflag) .dr-flag-plus { display: none; }
.drawer.editable .dr-flag-badge { display: none; }   /* v edit rezime roh prevezme kamera badge */
.dr-lock { color: rgba(255,255,255,.35); }

/* ===== BANNER: header (avatar/meno/krajina) + lifetime prestige na central-mat fotke ===== */
.dr-banner {
  position: relative; isolation: isolate;
  /* full-bleed: zrusi bocny 20px padding draweru aj horny padding (fotka az k okraju/X) */
  margin: calc(-1 * (env(safe-area-inset-top, 0px) + 16px)) -20px 0;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px 18px;
  display: flex; flex-direction: column; gap: 28px;   /* fixne (nie vh) -> banner konzistentnej vysky */
}
/* fotka: plna hore, od zaciatku prestige sekcie postupne do 0 opacity -> plynulo prejde do menu */
.dr-banner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; z-index: -2;
  bottom: calc(-1 * var(--img-drop, 20px));   /* --img-drop = o kolko px fotka siaha POD banner (nizsie na obrazovke) */
  background: #262624 url('../img/central-mat.jpg') center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 var(--img-fade, 51%), transparent var(--img-fade-end, 93%));
          mask-image: linear-gradient(180deg, #000 0%, #000 var(--img-fade, 51%), transparent var(--img-fade-end, 93%));
}
/* tmavy gradient overlay cez fotku (uhol/opacity/koniec ladi debug alebo --ov-* premenne) */
.dr-banner::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; z-index: -1; pointer-events: none;
  bottom: calc(-1 * var(--img-drop, 20px));
  background:
    linear-gradient(var(--ov-angle, 30deg),
      rgba(0,0,0, var(--ov-op, .6)) 0%,
      rgba(0,0,0, 0) var(--ov-end, 60%)),
    rgba(0,0,0, .12);   /* jemne celkove stmavenie */
  /* overlay fadne na spodku rovnako ako fotka -> ziadny tmavy pas, cisty prechod do menu */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 var(--img-fade, 51%), transparent var(--img-fade-end, 93%));
          mask-image: linear-gradient(180deg, #000 0%, #000 var(--img-fade, 51%), transparent var(--img-fade-end, 93%));
}
/* text hlavicky nad fotkou: tien pre istotu citatelnosti */
.dr-banner .dr-head-txt { text-shadow: 0 1px 6px rgba(0,0,0,.7); }
/* lifetime prestige riadok (spodok banneru): label vlavo, global vpravo, nad grafom */
.dr-prestige {
  background: transparent; color: #fff; border-radius: 0; padding: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
}
/* header aj prestige nad grafovou vrstvou (graf z-index 0) */
.dr-banner > .dr-head, .dr-banner > .dr-prestige { position: relative; z-index: 1; }
.dr-prestige-l { flex: none; display: flex; flex-direction: column; gap: 0; }
.dr-prestige-l span { margin-top: -4px; }   /* label tesnejsie k cislu */
.dr-prestige-l span, .dr-prestige-r {
  font-family: 'NotoCond', sans-serif; font-size: .72rem; font-weight: bold;
  text-transform: uppercase; letter-spacing: .8px;
}
/* cislo hore, velke ako v ligovych statistikach (.dr-stat b = 2.3rem); label pod nim */
.dr-prestige-l b { font-family: 'Apotek', sans-serif; font-size: 2.3rem; line-height: 1; }
/* graf = full-width vrstva banneru: hore po spodny okraj avatara (peak = top 1%),
   dole baseline pri prestige cislach. --chart-top / --chart-bottom su ladiace hodnoty. */
/* box drzi vysku medzi top (peak/top1%) a bottom (baseline/top99%); div sa naozaj natahuje
   (svg je replaced element a bottom by ignoroval) */
.dr-chartbox {
  position: absolute; left: 0; right: 0; z-index: 0;
  top: var(--chart-top, calc(env(safe-area-inset-top, 0px) + 75px));
  bottom: var(--chart-bottom, -6px);   /* baseline (y95) ~ na hrane fotky */
}
.dr-chart {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
}
/* tien len na ciare (nie na celom SVG), nech pri clip-wipe neubieha hrana tiena */
#drChartLine { stroke-width: var(--gw, 2); filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
#drChartDot { display: none !important; }        /* bodku na konci nechceme */
/* stmavenie NAD ciarou = gradient od vrchu (tmave hore), miznuci do 0 pri ciare -> ziadna
   tvrda hranica; pod ciarou obrazok normalne svetly */
/* debug helper (?chartdebug=1): zvyrazni box grafu + horna/dolna hrana */
.dr-chartbox.dbg { outline: 1px dashed #ff4d4d; background: rgba(255,70,70,.08); }
.dr-chartbox.dbg::before, .dr-chartbox.dbg::after {
  content: ''; position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px solid #ff4d4d;
}
.dr-chartbox.dbg::before { top: 0; }     /* peak = top 1% */
.dr-chartbox.dbg::after { bottom: 0; }   /* baseline = top 99% */
#chartDbg {
  /* dole, aby nekrylo banner/graf (peak vpravo hore aj baseline vlavo) */
  position: fixed; bottom: 8px; left: 8px; right: 8px; z-index: 9999;
  background: rgba(0,0,0,.9); color: #fff; font: 12px/1.5 ui-monospace, monospace;
  padding: 10px 12px; border-radius: 8px; max-width: 340px; margin: 0 auto;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
#chartDbg .cd-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#chartDbg .cd-row span { width: 62px; }
#chartDbg .cd-row b { width: 44px; text-align: right; color: #ffd23f; }
#chartDbg input[type=range] { flex: 1; }
#chartDbg .cd-hint { opacity: .6; font-size: 10px; margin-top: 4px; }
.dr-prestige-r { flex: none; text-align: right; max-width: 74px; }
/* idle stav (ziadna prestige): vlavo 3-riadkovy tooltip, percentil prec.
   -l a -r ostavaju v layoute neviditelne (visibility), aby mal graf PRESNE rovnaku sirku ako v real stave;
   tooltip je absolutne polozeny cez miesto -l */
.dr-prestige { position: relative; }
.dr-prestige-idle {
  display: none; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center;
  font-family: 'NotoCond', sans-serif; font-size: .72rem; font-weight: bold;
  text-transform: uppercase; letter-spacing: .8px; line-height: 1.35;
}
.dr-prestige.idle .dr-prestige-l,
.dr-prestige.idle .dr-prestige-r { visibility: hidden; }
.dr-prestige.idle .dr-prestige-idle { display: block; }
/* graf zarovnany na pravy padding banneru (18px, ako label vlavo); skryty -r sa presunie pred graf,
   takze sirka grafu ostava presne ako v real stave */
.dr-prestige.idle .dr-chart { order: 1; }

/* statistiky podla waldo-menu dizajnu: raw ikonka, cislo, label; stlpce s dividermi */
.dr-cards { display: flex; }
.dr-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: clamp(8px, 1.6vh, 14px); padding: 0 4px;
}
.dr-stat .dr-stat-lbl { margin-top: -6px; }   /* cislo a popis blizsie k sebe */
.dr-stat + .dr-stat { border-left: 1px solid rgba(255,255,255,.15); }
.dr-stat-ic { width: clamp(54px, 8vh, 66px); height: clamp(54px, 8vh, 66px); }
.dr-stat-ic img { display: block; width: 100%; height: 100%; }
.dr-stat b {
  font-family: 'Apotek', sans-serif; font-size: 2.3rem; color: #fff; line-height: 1;
  display: flex; align-items: center; gap: 5px;
}
.dr-stat-lbl {
  font-family: 'NotoCond', sans-serif; font-size: .68rem; text-transform: uppercase;
  letter-spacing: 1px; color: rgba(255,255,255,.85);
}

/* Season One: nadpis nad barom, barber progress (vyska 28px ako learning app) */
.dr-season-blk { display: flex; flex-direction: column; gap: 8px; }
.dr-season-info {
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .8px;
  font-size: 1.05rem; color: #fff; text-align: center;
}
.dr-progress { position: relative; height: 28px; border-radius: 999px; background: rgba(255,255,255,.22); overflow: hidden; }
.dr-progress .fill {
  display: block; position: relative; height: 100%; width: 0;
  /* prava hrana vyplne je rovna; zaoblenie dodava az overflow maska containeru
     (lava strana vzdy, prava az pri 100 %) */
  border-radius: 0; overflow: hidden;
  transition: width .4s cubic-bezier(.4,.9,.3,1);
}
.dr-progress .fill::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -66px;
  width: calc(100% + 66px);
  background: repeating-linear-gradient(60deg, #FFD200 0 14px, #ff9d00 14px 28px);   /* povodna zlta ako v learning appke */
  will-change: transform;   /* GPU layer - mobilny Chrome inak animaciu po transitions draweru zamrazoval */
  animation: drBarber 1.8s linear infinite;
}
@keyframes drBarber { from { transform: translate3d(0,0,0); } to { transform: translate3d(32.33px,0,0); } }


/* ===== Edit Profile: bottom sheet do polky obrazovky ===== */
.dr-editform { position: absolute; inset: 0; z-index: 11; pointer-events: none; }
.dr-editform.open { pointer-events: auto; }
/* dim overlay cez hlavne menu pocas Edit Profile; tap nan zavrie sheet */
.ef-catch {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.85);
  opacity: 0; transition: opacity .3s ease;
}
.dr-editform.open .ef-catch { opacity: 1; }
.ef-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 58%;
  background: #33322f;   /* svetlejsie ako drawer */
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 34px rgba(0,0,0,.45);
  transform: translateY(105%);
  transition: transform .34s cubic-bezier(.22,.9,.3,1);
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));   /* bocny padding = drawer (20px) */
  overflow-y: auto;
}
.dr-editform.open .ef-sheet { transform: translateY(0); }
.ef-grip { flex: none; width: 44px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); margin: 0 auto 2px; }
/* avatar bez fotky = wireframe ako placeholder v menu; s fotkou .filled */
.ef-avatar {
  position: relative; flex: none;
  width: 56px; height: 56px;
  border-radius: 50%; cursor: pointer;
  background: transparent; border: 2px dashed rgba(255,255,255,.9);
  overflow: visible;
  display: flex; align-items: center; justify-content: center;
}
.ef-avatar.filled { border: none; }
.ef-avatar .dr-avatar-ph { width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 1.4; }
.ef-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ef-avatar-badge {
  position: absolute; right: -4px; bottom: -4px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  background: #211f1d; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #33322f;
}
/* country riadok: COUNTRY label v gutteri avatara -> vlajka zarovnana s name fieldom */
.ef-country-row {
  display: flex; align-items: center; gap: 12px;
  background: none; border: none; cursor: pointer; padding: 2px 0;
  font-family: 'NotoCond', sans-serif; font-size: .95rem; color: #fff;
}
.ef-country-row.locked { cursor: default; }
.ef-clabel {
  flex: none; width: 56px; text-align: left;
  font-family: 'NotoCond', sans-serif; font-size: .74rem; font-weight: bold;
  text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.55);
}
.ef-cflag { flex: none; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
/* zlta edit ceruzka = krajina sa da klikat; v locked stave ju nahradi sedy lock */
.ef-cedit { flex: none; width: 14px; height: 14px; color: var(--accent); }
.ef-clock { flex: none; width: 14px; height: 14px; color: rgba(255,255,255,.45); display: none; }
.ef-country-row.locked .ef-cedit { display: none; }
.ef-country-row.locked .ef-clock { display: block; }
.ef-done { background: var(--accent); color: #161616; margin-top: 2px; }
.ef-row { display: flex; align-items: center; gap: 12px; }
/* wrapper fieldu mena: drzi zelenu fajku vnutri praveho okraja inputu */
.ef-namewrap { position: relative; flex: 1; min-width: 0; display: flex; }
.ef-namewrap input { width: 100%; }
.ef-saved-check {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%) scale(.5);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.ef-saved-check.show { opacity: 1; transform: translateY(-50%) scale(1); }
.ef-row input {
  flex: 1; min-width: 0; font-family: 'NotoCond', sans-serif; font-size: 1rem;
  padding: 9px 12px; border: 2px solid #3c3c3a; border-radius: 8px; outline: none;
  color: var(--ink); background: #2b2b29;
}
.ef-row input:focus { border-color: var(--accent); }
.ef-row input:disabled { opacity: .45; }
.ef-save {
  flex: none; font-family: 'Apotek', sans-serif; text-transform: uppercase; font-size: 1.05rem;
  background: var(--accent); color: #161616; border: none; border-radius: 8px;
  padding: 8px 16px; cursor: pointer;
}
.ef-save:disabled { opacity: .45; cursor: default; }
.ef-btn {
  font-family: 'NotoCond', sans-serif; font-size: .9rem; letter-spacing: .3px;
  background: transparent; color: var(--ink);
  border: 2px solid #3c3c3a; border-radius: 8px; padding: 8px 14px; cursor: pointer;
}
.ef-btn:active { background: rgba(255,255,255,.08); }
.ef-country { font-family: 'NotoCond', sans-serif; font-size: .92rem; color: rgba(255,255,255,.8); }
/* hinty zarovnane s name fieldom (avatar 56 + gap 12 = 68px gutter) */
.ef-hint {
  font-family: 'NotoCond', sans-serif; font-size: .74rem; letter-spacing: .3px;
  color: rgba(255,255,255,.5); padding-left: 68px;
}
.ef-hint.err { color: #ff6b5e; }

/* medzery medzi prestige/progress/stats/buttonom robi jednotny gap .dr-profile */

/* ===== Footer: season + kontrolka + waldo ===== */
.dr-foot {
  flex: none; margin: 0 -20px;
  border-top: 1px solid rgba(255,255,255,.16);
  /* footer je teraz posledny prvok menu (credit odstraneny) -> edit + logout sa
     posunuli nizsie k spodnej hrane; safe-area drzi odstup od okraja obrazovky */
  padding: 13px 20px calc(13px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 12px;
}
/* HAFNOS INTERACTIVE credit uz nie je v drawer menu - ostava len v chate (.home-credit) */
.dr-foot-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dr-acc-status {
  font-family: 'NotoCond', sans-serif; font-size: .74rem; letter-spacing: .8px; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  display: flex; align-items: center; gap: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dr-acc-status b { color: #fff; font-weight: bold; }
/* dva riadky: email (povodny zapis) a pod nim tier (uppercase, bold) */
.dr-acc-status .acc-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dr-acc-status .acc-email { text-transform: none; overflow: hidden; text-overflow: ellipsis; }
.dr-acc-status::before {
  content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: #e8432f; box-shadow: 0 0 7px rgba(232,67,47,.8);
  animation: drBlink 1.15s ease-in-out infinite;
}
@keyframes drBlink { 0%, 100% { opacity: 1; } 50% { opacity: .12; } }
/* neprihlaseny: NOT SIGNED IN vycentrovane v strede footera */
.drawer.guest .dr-acc-status { justify-content: center; }
/* prihlaseny: kontrolka nie je centrovana cez dva riadky, ale sedi pred emailom */
.drawer.member .dr-acc-status::before { display: none; }
.drawer.member .acc-email { display: flex; align-items: center; gap: 7px; }
.drawer.member .acc-email::before {
  content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: #4ad15e; box-shadow: 0 0 7px rgba(74,209,94,.7);
}
/* tier riadok zarovnany s textom emailu (dot + gap = 16px) */
.drawer.member .acc-lines b { padding-left: 16px; }
/* edit profile: jednoducha ikonka ceruzky za mail/tier labelmi */
.dr-foot-edit {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.75); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dr-foot-edit:active { background: rgba(255,255,255,.14); }
/* logout: kruhovy button s ikonou vypinaca (na mieste Waldovho avataru z dizajnu) */
.dr-foot-logout {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.75); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dr-foot-logout:active { background: rgba(255,255,255,.14); }
/* logout confirm: prehodi obsah footera na otazku + fajka/krizik */
.dr-foot-confirm { display: none; flex: 1; align-items: center; gap: 12px; }
.dr-foot.confirming .dr-foot-l, .dr-foot.confirming .dr-foot-edit, .dr-foot.confirming .dr-foot-logout { display: none; }
.dr-foot.confirming .dr-foot-confirm { display: flex; animation: drItemIn .25s ease both; }
.dr-foot-confirm p {
  flex: 1; min-width: 0;
  font-family: 'NotoCond', sans-serif; font-size: .9rem; letter-spacing: .3px; color: #fff;
}
.dr-foot-confirm button {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dr-foot-confirm button:active { background: rgba(255,255,255,.14); }
#loYes { color: #4ad15e; border-color: rgba(74,209,94,.5); }
#loNo { color: rgba(255,255,255,.75); }

/* ===== Country picker (overlay cez drawer, dark; nad edit sheetom z11) ===== */
.dr-picker {
  position: fixed; inset: 0; z-index: 12;   /* fixed = plna sirka viewportu, bez ohladu na padding draweru */
  /* SOLIDNE pozadie: fixed-attachment textura pocas slide animacie flashovala */
  background: #2c2b29;
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 0 env(safe-area-inset-bottom, 0px);
  /* fade-in / fade-out (roll-up animacia robila vizualne bugy) */
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.dr-picker.open { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.dr-picker-head { display: flex; gap: 8px; align-items: center; padding: 0 18px 12px; }
.dr-picker-head input {
  flex: 1; min-width: 0; font-family: 'NotoCond', sans-serif; font-size: 1rem;
  padding: 10px 14px; border: 2px solid #3c3c3a; border-radius: 8px; outline: none;
  color: var(--ink); background: #2b2b29;
}
.dr-picker-head input:focus { border-color: var(--accent); }
/* filter input necha vpravo miesto pre X burger, ktory picker zatvara */
.dr-picker-head { padding-right: 76px; }
/* bez scrollbaru - na desktopoch robil dojem odrezaneho praveho okraja */
.dr-picker-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.dr-picker-list::-webkit-scrollbar { display: none; }
.dr-picker-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 18px; border: none; background: none; cursor: pointer;
  font-family: 'NotoCond', sans-serif; font-size: .98rem; color: var(--ink); text-align: left;
}
.dr-picker-item:active { background: rgba(255,255,255,.07); }
.dr-picker-item img { width: 20px; height: 20px; object-fit: cover; border-radius: 50%; flex: none; }
.dr-picker-confirm {
  border-top: 1px solid rgba(255,255,255,.16); padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 4px; background: #232321;
}
.dr-picker-confirm p { font-family: 'NotoCond', sans-serif; font-size: .95rem; color: var(--ink); }
.dr-picker-warn { font-size: .78rem !important; color: rgba(255,255,255,.5) !important; }
.dr-picker-btns { display: flex; gap: 10px; margin-top: 8px; }
.dr-picker-btns button {
  flex: 1; font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .5px;
  font-size: 1.1rem; border: none; border-radius: 8px; padding: 10px; cursor: pointer;
}
#pickerYes { background: var(--accent); color: #161616; }
#pickerNo { background: #3a3a38; color: var(--ink); }

/* otvorene menu: burger (X, z-27) je nad drawerom (z-25), biele X na tmavom podklade sedi */

/* ===== Chat ===== */
.chat {
  height: 100%; width: 100%; max-width: 540px; margin: 0 auto;
  padding: calc(var(--top-h) + 8px) 18px calc(var(--foot-h) + 46px);   /* +46 = fade zona konci nad inputom */
  overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 12px;
  /* texturove pozadie nedovoli gradient scrim -> spravy sa pod headerom/composerom vymaskuju */
  mask-image: linear-gradient(transparent calc(var(--top-h) - 34px), #000 var(--top-h), #000 calc(100% - var(--foot-h) - 42px), transparent calc(100% - var(--foot-h)));
  -webkit-mask-image: linear-gradient(transparent calc(var(--top-h) - 34px), #000 var(--top-h), #000 calc(100% - var(--foot-h) - 42px), transparent calc(100% - var(--foot-h)));
}
.chat::-webkit-scrollbar { display: none; }

.msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
.msg .av { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; flex: none; object-fit: cover; }
.msg .bubble {
  background: var(--bubble); color: var(--ink);
  padding: 10px 13px; border-radius: 14px;
  font-size: 1rem; line-height: 1.3;
  white-space: pre-wrap; overflow-wrap: break-word;
}
/* dlhsi user text sa zalamuje tak, aby jeho lavy okraj sedel s lavym okrajom
   Waldovho textu: avatar 42px + gap 14px - padding bubliny 13px = 43px */
.msg.user { align-self: flex-end; max-width: none; margin-left: 43px; }
.msg.user .bubble { background: var(--accent); color: #161616; border-bottom-right-radius: 4px; }

/* Waldo bez bubliny - text priamo na texture, styl ako ws-txt vo waldoSheet.
   Plna sirka: text konci 18px od praveho okraja (= padding chatu, rovnako
   ako je avatar odsadeny zlava). */
.msg.waldo { align-items: flex-start; gap: 14px; max-width: 100%; width: 100%; }
.msg.waldo .bubble { flex: 1; white-space: normal; }   /* markdown blocky, nie pre-wrap */

/* markdown vnutri Waldovej odpovede */
.msg.waldo .bubble p { margin: 0 0 .55em; }
.msg.waldo .bubble p:last-child, .msg.waldo .bubble ul:last-child, .msg.waldo .bubble ol:last-child { margin-bottom: 0; }
.msg.waldo .bubble ul, .msg.waldo .bubble ol { margin: 0 0 .55em; padding-left: 1.25em; }
.msg.waldo .bubble li { margin-bottom: .3em; }
.msg.waldo .bubble strong { color: var(--accent); font-weight: bold; }
.msg.waldo .av { width: 42px; height: 42px; border: none; }   /* avatar-waldo.png bez bielej linky */
.msg.waldo .bubble {
  background: transparent; padding: 0; border-radius: 0;
  color: #fff; font-weight: bold; line-height: 1.25;
  margin-top: 2px;   /* text zarovnany s hornou hranou avatara */
}
/* error hlasky: hovori ich tiez Waldo, ale italic a tlmene */
.msg.waldo.err .bubble { font-style: italic; font-weight: normal; color: rgba(255,255,255,.78); }

/* typewriter: nevypisana cast textu je neviditelna, ale drzi layout
   (slova sa nezalamuju dodatocne); kurzor bezi za aktivnou vypisanou castou */
.msg.waldo .bubble .tw-rest { visibility: hidden; }
/* bullet/cislo riadku sa ukaze az ked don typewriter dopise (layout ostava stabilny) */
.msg.waldo .bubble li.tw-wait { list-style: none; }
.msg.waldo .bubble.typing .tw-done.active::after {
  content: '▌'; display: inline-block; width: 0; overflow: visible;
  color: #fff; animation: wtBlink .8s step-end infinite;
}
@keyframes wtBlink { 50% { opacity: 0; } }

.msg.enter { animation: msgIn .3s cubic-bezier(.22,.9,.32,1); }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }

/* thinking placeholder (kym caka na odpoved): nahodna hlaska + bodky za nou */
.msg.typing .bubble {
  font-style: italic; font-weight: normal; color: rgba(255,255,255,.78);
}
.typing .dot { animation: tDot 1.2s steps(1) infinite; }
.typing .dot:nth-of-type(2) { animation-delay: .2s; }
.typing .dot:nth-of-type(3) { animation-delay: .4s; }
@keyframes tDot { 0% { opacity: 0; } 50% { opacity: 1; } }

/* ===== Patreon gate ===== */
/* v locked stave sa spodna rezerva chatu (padding + fade maska) prepocita
   na vysku gate -> text sa fadeoutuje NAD tlacidlom a da sa cely odscrollovat */
/* 184px = zmerana vyska gate s DVOMA buttonmi (ghost sign in + zlty CTA + trial caption) */
body.locked { --foot-h: calc(env(safe-area-inset-bottom, 0px) + 184px); }
.gate {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 18px calc(env(safe-area-inset-bottom, 0px) + 22px);
  pointer-events: none;   /* swipe/wheel nad gate zonou scrolluje chat */
}
.gate .cta, .gate .gate-trial { pointer-events: auto; }
/* zlty micro-label pod CTA, rovnaka typografia ako .dr-cta-note v draweri */
.gate-trial {
  font-family: 'NotoCond', sans-serif; font-size: .78rem; font-weight: bold;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--accent); text-align: center;
  margin: -2px 0 -2px;   /* .gate ma gap 10px, tu chceme trial a vysvetlenie blizsie */
}
.cta {
  position: relative; overflow: hidden;
  display: block; width: 100%; max-width: 400px;
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .5px;
  font-size: 1.35rem; text-align: center; text-decoration: none;
  background: linear-gradient(135deg, var(--accent) 0%, #fee566 100%);
  color: #1a1a1a;
  padding: 13px 18px; border-radius: 8px; border: none; cursor: pointer;
  animation: msgIn .35s cubic-bezier(.22,.9,.32,1);
}
.cta::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); pointer-events: none;
  animation: ctaShine 6.5s ease-in-out infinite;
}
@keyframes ctaShine { 0%, 55% { left: -60%; } 75%, 100% { left: 120%; } }
.cta:active { transform: scale(.98); }

/* gate: Choose your membership = plny CTA, sign in je sekundarny obrys */
.cta.ghost { background: none; color: #fff; border: 2px solid rgba(255,255,255,.45); }
.cta.ghost::before { display: none; }   /* bez shine animacie */

/* ===== Composer (rainbow border port z .opt-rainbow) ===== */
#composer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; gap: 10px; align-items: center;
  max-width: 540px; margin: 0 auto;
  padding: 14px 18px calc(env(safe-area-inset-bottom, 0px) + 34px);   /* miesto pre credit paticku */
}

/* paticka ako na homescreene appky (.home-credit) */
.home-credit {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  transform: translateX(-50%); z-index: 20;
  font-family: 'NotoCond', sans-serif; text-transform: uppercase; letter-spacing: 1.5px;
  font-size: .576rem; color: rgba(255,255,255,.6); text-shadow: 0 1px 4px rgba(0,0,0,.5);
  white-space: nowrap; pointer-events: none;
}
body.locked .home-credit { display: none; }   /* gate ma vlastnu spodnu zonu */
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes rotate-border { from { --angle: 0deg; } to { --angle: 360deg; } }
.input-wrap {
  position: relative; flex: 1;
  background: var(--bubble);
  border: 2px solid transparent; border-radius: 8px;
}
.input-wrap::before {
  content: ''; position: absolute; inset: -2px;
  border-radius: 8px; border: 2px solid transparent;
  background:
    linear-gradient(var(--bubble), var(--bubble)) padding-box,
    conic-gradient(from var(--angle),
      transparent 0%, #ff5d5d 5%, var(--accent) 11%, #5ed4ff 17%, #b06bff 22%, transparent 27%) border-box;
  animation: rotate-border 4s linear infinite;
  pointer-events: none; z-index: 0;
}
#input {
  position: relative; z-index: 1;
  width: 100%; background: transparent; border: none; outline: none;
  color: #fff; font-family: 'NotoCond', sans-serif;
  font-size: 1.02rem; letter-spacing: .3px;
  padding: 13px 16px;
}
#input::placeholder { color: var(--dim); }
/* prazdny submit: zatras oknom na pisanie */
.input-wrap.shake { animation: inputShake .4s ease; }
@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px); }
  35% { transform: translateX(6px); }
  55% { transform: translateX(-4px); }
  75% { transform: translateX(3px); }
}
/* ===== League report: sheet vyrolovany az po header (burger = close) ===== */
.report-form { position: fixed; inset: 0; z-index: 26; pointer-events: none; }   /* nad drawerom (25), pod burgerom (27) */
.report-form.open { pointer-events: auto; }
/* dim overlay cez header/menu za sheetom; tap nan zavrie formular */
.rf-catch {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.85);
  opacity: 0; transition: opacity .3s ease;
}
.report-form.open .rf-catch { opacity: 1; }
.rf-sheet {
  position: absolute; inset: 0;   /* fullscreen - viac miesta pre obsah */
  background: linear-gradient(rgba(15,15,14,.72), rgba(15,15,14,.72)), #4d4d4d url('../img/table-bcg3.jpg') center / cover no-repeat fixed;
  transform: translateY(103%);
  transition: transform .38s cubic-bezier(.22,.9,.3,1);
  /* rozostupy medzi skupinami robia IDENTICKE pruzne .rf-gap spacery -> vzdy rovnake */
  display: flex; flex-direction: column; gap: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px calc(30px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; scrollbar-width: none;   /* desktop scrollbar robil dojem odrezaneho praveho okraja */
}
.rf-sheet::-webkit-scrollbar { display: none; }
.rf-gap { flex: 1 1 0; min-height: 6px; }   /* mensie minimum: vsetko vratane submitu sa zmesti na vysku viewportu */
/* header formulara: meno vlavo, Y-centrovane presne s X burgerom (top safe+12, vyska 54) */
.rf-head { display: flex; align-items: center; min-height: 54px; padding-right: 58px; margin-bottom: 8px; }
.rf-head .rf-self-name { justify-content: flex-start; font-size: 1.5rem; }
.report-form.open .rf-sheet { transform: translateY(0); }

/* ===== Ranking sheet: fixny header + scrollovatelna full-width tabulka ===== */
.rank-form { position: fixed; inset: 0; z-index: 26; pointer-events: none; }
.rank-form.open { pointer-events: auto; }
.rk-catch {
  position: absolute; inset: 0; background: rgba(0,0,0,.85);
  opacity: 0; transition: opacity .3s ease;
}
.rank-form.open .rk-catch { opacity: 1; }
.rk-sheet {
  position: absolute; inset: 0;
  background: #201f1c;   /* solid tmava - cistejsie pre datovu tabulku + bez seamu pri zmrazenych stlpcoch */
  transform: translateY(103%);
  transition: transform .38s cubic-bezier(.22,.9,.3,1);
  display: flex; flex-direction: column;   /* fixny titulkovy header + scrollovatelne telo */
}
.rank-form.open .rk-sheet { transform: translateY(0); }

/* --- fixny titulkovy header: zeton logo + Current Standings / Season One --- */
.rk-head {
  flex: none; z-index: 2;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 12px;
}
.rk-head-top {
  display: flex; align-items: center; gap: 14px;
  min-height: 54px; padding-right: 58px;   /* miesto pre X burger */
}
.rk-logo {
  flex: none; width: clamp(48px, 7.5vh, 64px); height: clamp(48px, 7.5vh, 64px);
  border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.rk-logo img { width: 100%; height: 100%; object-fit: contain; }
.rk-head-txt { min-width: 0; }
.rk-title {
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .5px;
  font-size: clamp(1.4rem, 3.2vh, 1.8rem); line-height: 1.02; color: #fff;
}
.rk-sub {
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: 1px;
  font-size: .95rem; color: var(--accent); line-height: 1.1; margin-top: 2px;
}

/* --- scrollovatelne telo: horizontalny + vertikalny scroll --- */
.rk-scroll {
  flex: 1; min-height: 0; overflow: auto;
  scrollbar-width: none; overscroll-behavior: contain;
}
.rk-scroll::-webkit-scrollbar { display: none; }
.rk-table { display: flex; flex-direction: column; min-width: max-content; }

/* zdielana mriezka: 7. stlpec 1fr vyplni sirku na sirokych displejoch, na uzkych sa
   zmrsti na 0 a fixne stlpce pretecu -> horizontalny scroll (min-width: max-content) */
.rk-cols, .rk-row {
  display: grid;
  grid-template-columns: 2.4rem 11rem 2.9rem 2.2rem 2.6rem 2.9rem minmax(0, 1fr);
  align-items: center; min-width: max-content;
}
.rk-cols > *, .rk-row > * {
  padding: 11px 4px; min-width: 0;
  display: flex; align-items: center; justify-content: center;
}
/* # a NICK zmrazene vlavo (sticky); ostatne stlpce sa posuvaju popod ne */
.rk-num  { position: sticky; left: 0;      z-index: 2; }
.rk-nick { position: sticky; left: 2.4rem; z-index: 2; justify-content: flex-start; gap: 8px; }
.rk-nick > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-flag { flex: none; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }

/* hlavicka stlpcov: sticky top, scrolluje horizontalne s datami; roh (#/nick) nad vsetkym */
.rk-cols {
  /* top:-1px = prilepi sa o 1px vyssie -> vzdy prekryje nulovy riadok a zmizne sub-pixel
     pruh, kde pri scrolle presvital obsah (1px sa odreze cez overflow, obsah kompenzuje padding) */
  position: sticky; top: -1px; z-index: 3;
  background: #201f1c; border-bottom: 1px solid rgba(255,255,255,.16);
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .6px;
  /* vsetky labely headera rovnako velke ako PTS (1.05rem) */
  font-size: 1.05rem; color: rgba(255,255,255,.5);
}
.rk-cols > * { padding-top: 8px; padding-bottom: 8px; }
/* header labely ostavaju tmave (bez sedeho bcg); sedy zmrazeny stlpec az na datach */
.rk-cols .rk-num, .rk-cols .rk-nick { z-index: 4; background: #201f1c; }
.rk-cols .rk-pts { color: var(--accent); }

/* datove riadky */
.rk-row {
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-family: 'NotoCond', sans-serif; font-size: 1rem; color: var(--ink);
}
.rk-row .rk-num, .rk-row .rk-nick { background: #2b2a27; }   /* svetlejsi seda = zmrazeny stlpec (opaque, stats sa posuvaju popod) */
.rk-num { font-weight: bold; color: rgba(255,255,255,.6); gap: 3px; }
/* trend pozicie vs vcerajsok: CSS trojuholnik pri cisle (ziadny asset); bez zmeny sa nekresli */
.rk-trend { flex: none; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.rk-trend.up { border-bottom: 6px solid #3fae4a; }
.rk-trend.down { border-top: 6px solid #e05252; }
/* aktivny user: vyrazny olivovo-zlaty highlight (opaque, aby zmrazene stlpce sedeli) */
/* top 25% sutaziacich (reward zona nad zlatou ciarou): jemny gloss sheen; spusta ho JS vzdy
   len na JEDNOM riadku naraz (trieda .glossing), pomaly a s pauzou -> ziadne preblikavanie */
/* overflow:clip oreze gloss pruh na hranu riadku (nezvacsuje horiz. scroll za AVG);
   nie je to scroll-kontajner, takze sticky # a NICK stlpce ostavaju funkcne */
.rk-row.top { position: relative; overflow: clip; }
/* sikmy svetelny pruh plynule prejde zlava doprava (ako gloss bodiek/draweru); okraje orezhne rk-scroll */
.rk-row.top::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -35%; width: 24%;
  z-index: 5; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent);
  transform: skewX(-18deg);
}
.rk-row.top.glossing::after { animation: rkGloss 2.6s ease-in-out; }
@keyframes rkGloss {
  0%   { left: -35%; opacity: 1; }
  100% { left: 120%; opacity: 1; }
}

/* zlata threshold ciara: horna hrana prveho riadku POD top 25% zonou (border na riadku
   sa tiahne cez celu scrollovatelnu sirku, samostatny div by koncil na hrane viewportu) */
.rk-row.goldline { border-top: 2px solid var(--accent); }
/* pod ciarou (spodnych 75%): mierne stlmene pozadie + jemne pritlmeny text;
   sticky stlpce (# / NICK) musia ostat opaque, preto vlastny tmavsi odtien */
.rk-row.below { background: #1c1b19; color: rgba(255,255,255,.75); }
.rk-row.below .rk-num, .rk-row.below .rk-nick { background: #242320; }
.rk-row.below .rk-d { color: rgba(255,255,255,.62); }

.rk-row.me { background: #4d4622; color: #fff; border-bottom-color: transparent; }
.rk-row.me .rk-num, .rk-row.me .rk-nick { background: #4d4622; }
.rk-row.me .rk-num { color: var(--accent); }
/* vlastny riadok pod ciarou: highlight ma prednost pred stlmenim .below */
.rk-row.me.below .rk-d { color: rgba(255,255,255,.82); }
.rk-d { color: rgba(255,255,255,.82); }
.rk-pts { font-weight: bold; color: var(--accent); font-family: 'Apotek', sans-serif; font-size: 1.05rem; }
.rk-loading, .rk-empty {
  font-family: 'NotoCond', sans-serif; color: rgba(255,255,255,.6);
  text-align: center; padding: 34px 0; line-height: 1.5;
}
/* prvky formulara sa nesplostuju; pruzi len .rf-space (pri pretlaku sa sheet scrolluje) */
.rf-sheet > * { flex-shrink: 0; }
.rf-sheet > .rf-gap { flex-shrink: 1; }
/* sekciove nadpisy (Pick your color / Your score / 2 photos of your game) - jednotny styl */
.rf-sec-lbl {
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .5px;
  font-size: 1.25rem; color: #fff; text-align: center;
}
/* upload sekcia: nadpis + popis + row (dashed button / thumby + placeholder + kosik) */
.rf-upload { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rf-upload-sub {
  font-family: 'NotoCond', sans-serif; font-size: .8rem; letter-spacing: .3px; line-height: 1.5;
  color: rgba(255,255,255,.55); text-align: center;
  min-height: 3em;   /* rezerva na 2-riadkovy hint - submit sa pri verifikacii neposuva */
}
.rf-upload-sub.err { color: #ff6b5e; }    /* cervena: submit zablokovany */
.rf-upload-sub.ok { color: #4ad15e; }     /* zelena: ciste, ide rovno na board */
.rf-upload-sub.warn { color: #fddf37; }   /* zlta: prejde, ale caka na komisara */
/* "Waldo is looking at your photos" - tri bodky nabiehaju postupne dokola */
.rf-dots i { font-style: normal; opacity: .15; animation: rfDot 1.2s infinite; }
.rf-dots i:nth-child(2) { animation-delay: .2s; }
.rf-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes rfDot {
  0%, 60%, 100% { opacity: .15; }
  30% { opacity: 1; }
}
.rf-upload-row {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 64px; padding-top: 7px;   /* miesto pre x-ka nad rohmi thumbov */
}
.rf-up-btn {
  flex: 1; height: 64px;
  border: 2px dashed rgba(255,255,255,.35); border-radius: 8px;
  background: transparent; cursor: pointer;
  font-family: 'NotoCond', sans-serif; font-size: .92rem; font-weight: bold;
  letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.7);
}
.rf-up-btn:active { background: rgba(255,255,255,.06); }
.rf-thumbwrap { position: relative; flex: none; }
.rf-thumb { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
/* x-ko v pravom hornom rohu fotky = zmazanie danej fotky */
.rf-thumb-x {
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #161615; color: #fff; border: 1px solid rgba(255,255,255,.35);
  font-size: .95rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rf-thumb-x:active { background: #2c2c2a; }
.rf-plus {
  flex: none; width: 64px; height: 64px;
  border: 2px dashed rgba(255,255,255,.35); border-radius: 8px;
  background: transparent; cursor: pointer;
  font-family: 'NotoCond', sans-serif; font-size: 1.7rem; line-height: 1;
  color: rgba(255,255,255,.55);
}
.rf-plus:active { background: rgba(255,255,255,.06); }
/* skupina label + obsah (Pick your color) */
.rf-self-name {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  max-width: 100%;
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .5px;
  font-size: 1.7rem; color: #fff;
}
.rf-self-name span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* kruhova vlajka krajiny pri mene; translateY doladuje optiku Apotek capitals */
.rf-selfflag { flex: none; width: 16px; height: 16px; border-radius: 50%; object-fit: cover; transform: translateY(-1px); }
.rf-colours { display: flex; gap: 24px; justify-content: center; }
.rf-colours .rf-c { width: 48px; height: 48px; }
/* score: velke centralne cislo (counter) + tick ruler bez cisel; viac dychu okolo */
.rf-score { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rf-score-big {
  font-family: 'Apotek', sans-serif; font-size: 5rem; line-height: 1;
  color: var(--rr-cur, #fff);
  transition: color .2s ease;
}
.rf-ruler {
  position: relative; width: 100%; height: 66px; overflow: hidden;
  touch-action: pan-y; user-select: none; cursor: ew-resize; margin-top: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
/* ticky zarovnane na spod, aktivny rastie nahor vo farbe rarity (--rr-cur z JS) */
.rf-ruler-track {
  position: absolute; left: 50%; top: 0; height: 100%;
  display: flex; align-items: flex-end; padding-bottom: 6px;
  will-change: transform;
}
.rr-item {
  flex: none; width: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  cursor: pointer;
}
.rr-item i {
  width: 2px; height: 31px; border-radius: 1px;
  background: rgba(255,255,255,.35);
  transform-origin: center bottom;   /* vnorenie do pinu: scaleY od spodu (JS per-frame) */
}
/* stredovy zvyrazneny tick: JS per-frame interpoluje scale + farbu tickov pri strede,
   takze zvyraznenie vizualne stoji v strede aj pri fractional pozicii skaly */
/* gulicky: v klude muted, oznacena sa rozsvieti do ziariveho odtiena + glow */
.rf-c {
  position: relative; overflow: hidden;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: none;   /* bez linky aj v neaktivnom stave */
  filter: saturate(.55) brightness(1.15);   /* bez vyberu = pastelovy (svetly, jemny) odtien */
  /* zvacsenie s pruzinovym prestrelom ~15 %, zmensenie makko ease-out */
  transition: filter .2s ease-out, transform .35s cubic-bezier(.34, 1.8, .6, 1);
}
/* obcasny gloss sheen (JS scheduler, jeden naraz) -> naznak, ze bodky su klikatelne;
   sikmy svetelny pruh plynule prejde zlava doprava (rovnaky princip ako drawer gloss) */
.rf-c::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 48%;
  pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-18deg);
}
.rf-c.glossing::after { animation: rfDotGloss 1.4s ease-in-out; }
@keyframes rfDotGloss {
  0%   { left: -60%; opacity: 1; }
  100% { left: 130%; opacity: 1; }
}
/* ked je nieco vybrane, nevybrane trochu stmavnu (kontrast k aktivnej) */
.rf-colours.has-sel .rf-c:not(.sel) { filter: saturate(.4) brightness(.7); }
.rf-c.sel {
  filter: saturate(1.25) brightness(1.15);   /* rozsvietena nad plnu farbu */
  transform: scale(1.28);                    /* aktivny stav = zvacsenie, bez glow/pulzu */
}
/* zlta je uz blizko stropu - miernejsi boost, nech nejde do neonu */
.rf-c.rf-yellow.sel { filter: saturate(1.1) brightness(1.05); }
.rf-red { background: #e8432f; color: #e8432f; }
.rf-blue { background: #2f9fe8; color: #2f9fe8; }
.rf-yellow { background: var(--accent); color: var(--accent); }
.rf-green { background: #4ad15e; color: #4ad15e; }
/* submit: zamknuty stav 1:1 ako ALL-PRO CTA na home screene learning appky
   (seda #8a8a90, biely text, cierne strafovacie pruhy .05, bez glossu);
   ready (2 fotky + aspon 1 kompletny hrac) = zlty s glossom */
.rf-submit {
  position: relative; overflow: hidden;
  background: #8a8a90; color: #fff;
  transition: background .4s ease, color .4s ease;
}
.rf-submit::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, #000 0 11px, transparent 11px 22px);
  opacity: .05; transition: opacity .4s ease;
}
.rf-submit.ready {
  background: linear-gradient(135deg, #f28038 0%, #e8552b 100%);   /* oranzova ako ostatne result buttony */
  color: #fff;
}
.rf-submit.ready::after { opacity: 0; }
.rf-submit.ready::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg); pointer-events: none;
  animation: drShine 6.5s ease-in-out infinite;
}
#rfSubmit:disabled { opacity: .6; cursor: default; }
/* kompakt pre nizke displeje (napr. 350x600): vsetko sa stiahne, submit ostava na obrazovke */
@media (max-height: 640px) {
  /* gap 4px: pri 10px sa obsah na 600px vysku nezmestil a submit vypadaval do scrollu */
  .rf-sheet { gap: 4px; padding: 10px 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .rf-upload-sub { font-size: .72rem; line-height: 1.35; min-height: 2.7em; }
  .rf-up-btn, .rf-thumb, .rf-plus { height: 52px; }
  .rf-thumb, .rf-plus { width: 52px; }
  .rf-upload-row { min-height: 52px; }
  .rf-colours .rf-c { width: 40px; height: 40px; }
  .rf-ruler { height: 54px; }
  .rr-item i { height: 25px; }
}
/* extra kompakt: garancia, ze submit sedi nad spodnym okrajom BEZ scrollovania az po 550px vysku.
   flex gap medzi sekciami sa stiahne (rozostupy drzia pruzne .rf-gap spacery od submitu nahor),
   zmensi sa score cislo aj header */
@media (max-height: 560px) {
  .rf-sheet { gap: 2px; padding: 8px 20px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .rf-head { min-height: 44px; margin-bottom: 2px; }
  .rf-score-big { font-size: 3.4rem; }
  .rf-ruler { height: 46px; }
}
/* wiggle pri kliku na sedy submit: button + fotobanner/riadok playera podla toho co chyba */
.rf-wiggle { animation: rfWiggle .4s ease; }
@keyframes rfWiggle {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* option buttony vo Waldovom flowe (port .opt-rainbow z uciacej appky) */
.chat-options { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0 56px; }
/* label nad kontextovym buttonom (trial: "Already a member?") */
.chat-options .opt-label {
  font-family: 'NotoCond', sans-serif; font-size: .8rem; letter-spacing: .3px;
  color: rgba(255,255,255,.55); text-align: center; margin-bottom: -2px;
}
@keyframes rotate-border2 { from { --angle: 0deg; } to { --angle: 360deg; } }
.opt-rainbow {
  position: relative;
  font-family: 'NotoCond', sans-serif;
  font-size: 1.02rem; letter-spacing: .3px;
  color: #fff; cursor: pointer;
  background: var(--bubble);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 13px 16px; text-align: left;
}
.opt-rainbow::before {
  content: ''; position: absolute; inset: -2px;
  border-radius: 8px; border: 2px solid transparent;
  background:
    linear-gradient(var(--bubble), var(--bubble)) padding-box,
    conic-gradient(from var(--angle),
      transparent 0%, #ff5d5d 5%, var(--accent) 11%, #5ed4ff 17%, #b06bff 22%, transparent 27%) border-box;
  animation: rotate-border2 4s linear infinite;
  pointer-events: none; z-index: -1;
}
.opt-rainbow:active { transform: scale(.98); }

/* CTA varianta kontextoveho buttonu - rovnaky design ako dr-report v draweri */
.chat-options.full { margin-left: 0; }
.opt-cta {
  position: relative; overflow: hidden;
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .5px;
  font-size: 1.35rem; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #f28038 0%, #e8552b 100%);
  border: none; border-radius: 8px;
  padding: 13px 18px; text-align: center;
}
.opt-cta::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); pointer-events: none;
  animation: drShine 6.5s ease-in-out infinite;
}
.opt-cta:active { transform: scale(.98); }

/* kontextovy pill pod Waldovou spravou (napr. Edit Profile pri prazdnom profile);
   zarovnany dolava s textom Waldovej spravy (odsadenie avatara 56px) */
.chat-pillwrap { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 4px 0 0 56px; }
/* Waldova poznamka pod kontextovym pillom - rovnaky format ako bezny text spravy */
.chat-pill-note { font-size: 1rem; line-height: 1.3; color: var(--ink); }
.chat-pill {
  border: none; border-radius: 999px; cursor: pointer;
  padding: 11px 26px;
  background: linear-gradient(135deg, var(--accent) 0%, #fee566 100%);
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .5px;
  font-size: 1.05rem; color: #161616;
}
.chat-pill:active { transform: scale(.97); }

/* rad kontextovych chipov (return briefing): primarny oranzovy + ghost obrysove */
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 56px; }
.chat-chip {
  position: relative; overflow: hidden;
  border: none; border-radius: 999px; cursor: pointer; padding: 12px 24px;
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .4px;
  font-size: 1.05rem; white-space: nowrap;
}
.chat-chip.primary { background: linear-gradient(135deg, #f28038 0%, #e8552b 100%); color: #fff; }
/* Apple-glass: priesvitna biela, frosted blur, jemny tien + horna svetla hrana */
.chat-chip.ghost {
  background: rgba(255,255,255,.07); color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 2px 9px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
}
.chat-chip:active { transform: scale(.96); }
/* gloss sheen: sikmy svetelny pruh velmi pomaly a jemne prejde cez chip */
.chat-chip::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-18deg);
  animation: chipGloss 9s ease-in-out infinite;
}
@keyframes chipGloss { 0% { left: -60%; } 14%, 100% { left: 135%; } }

/* linky vo Waldovych spravach (napr. upgrade Patreon tieru) */
.msg.waldo .bubble a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* zlte zvyraznenie klucovych udajov v texte (==text==) - lepsia citatelnost hooku */
.bubble .hl { color: var(--accent); font-weight: bold; }

/* zvyrazneny match kod vo Waldovej sprave */
.msg.waldo .bubble .code {
  font-family: 'Apotek', sans-serif; letter-spacing: 3px;
  color: var(--accent); font-size: 1.5em; line-height: 1;
}

#send {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--accent); color: #161616;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .15s, opacity .2s;
}
#send:active { transform: scale(.92); }
#send:disabled { opacity: .4; pointer-events: none; }
body.locked #composer { display: none; }

/* ============================================================
   Season Rewards: fullscreen card reveal (FUT styl)
   Vrstvy: .reveal-form (fade) > .rv-stage (slide up, tmavy dim)
   > .rv-persp (perspective) > .rv-card (3D tilt + flip)
   > .rv-face (back/front) + .rv-glare (odlesk sledujuci prst/gyro).
   touch-action:none na stage = drag naklana kartu, nescrolluje.
   ============================================================ */
.reveal-form { position: fixed; inset: 0; z-index: 26; pointer-events: none; }
.reveal-form.open { pointer-events: auto; }
.rv-stage {
  position: absolute; inset: 0;
  /* graffiti pozadie + stmavenie hore a dole kvoli citatelnosti titulku a hintu;
     spodok vyrazne tmavsi (od ~62% dole), nech text pod kartou sedi na pokojnom podklade */
  background:
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.1) 30%, rgba(0,0,0,.1) 62%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.75) 100%),
    #101018 url('../img/s1-reward-bcg2.jpg') center / cover no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* polohy ladene cez ?rvdebug panel; tu su default hodnoty */
  gap: var(--rv-gap, 32px); touch-action: none; user-select: none; -webkit-user-select: none;
  /* horny padding drzi centrovanu kartu mimo kolizie s absolutne kotvenym headline */
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--rv-stage-pt, 88px));
  transform: translateY(103%); transition: transform .45s cubic-bezier(.22,.9,.3,1);
}
.reveal-form.open .rv-stage { transform: translateY(0); }
/* headline kotveny pod headerom (burger/close ma vysku 54px + 12px offset) */
.rv-head {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + var(--rv-head-top, 56px));
  left: 0; right: 0; text-align: center;
}
.rv-title {
  font-family: 'Apotek', sans-serif; text-transform: uppercase;
  font-size: 2rem; line-height: 1; color: var(--ink); letter-spacing: .5px;
}
.rv-sub { font-size: .95rem; color: var(--dim); margin-top: 6px; }
/* vstup karty pri vyrolovani screenu: jemny fade + zoom, nabieha az ked sheet dosada */
.rv-persp {
  perspective: 900px;
  opacity: 0; transform: scale(.92);
  transition: opacity .5s ease .25s, transform .5s ease .25s;
}
.reveal-form.open .rv-persp { opacity: 1; transform: scale(1); }
.rv-card {
  /* sirka: pomerova (72vw) s pevnym stropom 290px + vyskovy strop 39vh
     (39vh * pomer strany 500/358 = ~54vh vyska karty) -> na nizkych/landscape
     viewportoch sa karta zmensi a layout nepretecie */
  position: relative; width: min(72vw, 290px, 39vh); aspect-ratio: 358 / 500;
  transform-style: preserve-3d; transition: transform .15s ease-out;
  /* radius = radius PREDNEJ strany (glow shadow sa ukazuje az po otoceni) */
  border-radius: min(4.8vw, 19px);
  will-change: transform;
}
.rv-face {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #1d1c1a;
}
/* radiusy zmerane z alfa kanalov assetov (back 22px/373w, front 50px/745w),
   skaluju sa so sirkou karty min(72vw, 290px) -> gloss aj glow sedia s hranou */
.rv-back { border-radius: min(4.3vw, 17px); }
/* confetti canvas: cez celu stage, nad kartou, len pocas burstu (JS ho vytvori a zmaze) */
.rv-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
/* gloss sweep v loope cez obe strany karty (rovnaky jazyk ako chipy a drawer) */
.rv-face::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -80%; width: 55%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.2), transparent);
  transform: skewX(-18deg);
  animation: rvGloss 4.5s ease-in-out infinite;
}
@keyframes rvGloss { 0% { left: -80%; } 24%, 100% { left: 145%; } }
.rv-front { transform: rotateY(180deg); border-radius: min(4.8vw, 19px); }
.rv-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* odlesk: radial gradient na pozicii prsta/loopu, overlay = "svetlo" po povrchu karty;
   opacity transition = odlesk sa po flipe rozsvieti plynulo, nie skokom */
.rv-glare { position: absolute; inset: 0; mix-blend-mode: overlay; pointer-events: none; transition: opacity .9s ease; }
/* caption: hint aj reward text zdielaju jednu grid bunku -> kontajner ma od zaciatku
   vysku vyssieho z nich a pri prepnuti sa layout nepohne */
.rv-caption {
  display: grid; place-items: center; text-align: center;
  padding: 0 24px calc(env(safe-area-inset-bottom, 0px) + var(--rv-caption-pb, 12px));
}
.rv-caption > p { grid-area: 1 / 1; margin: 0; transition: opacity .6s ease; }
.rv-hint { font-size: .95rem; color: var(--dim); }
/* reward text sa swipne zdola (fade + posun hore) */
.rv-reward-txt {
  font-size: 1rem; line-height: 1.4; color: #fff; max-width: 340px;
  opacity: 0; transform: translateY(26px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.9,.3,1);
}
.rv-caption.revealed .rv-hint { opacity: 0; }
.rv-caption.revealed .rv-reward-txt { opacity: 1; transform: translateY(0); }