/* =========================================================================
   Žabostřelec — GAME V3 „beze slov" (produkční herní styly)
   Uvnitř herní plochy žádný text — jen grafika, animace, zvuk a povolená
   čísla (skóre, combo ×N, finální skóre). Čas = jen ubývající bar.
   Prefix "mk-" drží styly izolované od zbytku stránky (Bootstrap, leaderboard).

   ŠKÁLOVÁNÍ: HUD prvky (bary, skóre, zásobník, žetony, rohová tlačítka) se
   škálují s velikostí plátna přes --mk-s (nastavuje JS z rozměru stage,
   --mk-s = clamp(0.8, S/700, 2.4)). Nic nezůstává ve fixních px, které by
   na 4K plátně zakrněly.
   ========================================================================= */
:root{
  --mk-neon:#87d22f;
  --mk-neon-soft:#b6f05a;
  --mk-ink:#eafff0;
  --mk-warn:#f5a623;
  --mk-danger:#ff4d4d;
  --mk-font-body:'DM Sans','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mk-font-display:'Bebas Neue','DM Sans','Segoe UI',system-ui,sans-serif;
}

/* ---- Herní plocha ---- */
#game-wrapper-box{ position:relative; }

.mk-stage{
  --mk-s:1;                 /* HUD měřítko — přepočítává JS z rozměru stage */
  position:relative; width:100%; margin:0 auto;
  aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  background:#06121a;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(135,210,47,.25);
  user-select:none; -webkit-user-select:none; touch-action:pan-y;
  font-family:var(--mk-font-body);
}
.mk-stage.mk-live{ touch-action:none; }
.mk-stage.mk-playing{ cursor:none; }
@media (max-width:700px){
  .mk-stage{ aspect-ratio:4/3; }
}
.mk-world{ position:absolute; inset:0; }
.mk-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* Červený flash při trefeném zvířátku (beze slov — jen barva) */
.mk-redflash{ position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(255,50,50,.5) 100%); }
.mk-redflash.mk-hit{ animation:mk-redflash .5s ease-out; }
@keyframes mk-redflash{ 0%{ opacity:1; } 100%{ opacity:0; } }

/* ---- HUD overlay — beze slov ---- */
.mk-hud{ position:absolute; inset:0; pointer-events:none; z-index:5; }
.mk-hud > *{ position:absolute; }

/* Zóna 1: časovač = tenký ubývající bar (žádné číslice) */
.mk-timerwrap{ top:0; left:0; right:0; height:calc(7px * var(--mk-s)); background:rgba(255,255,255,.08); }
.mk-timerbar{ height:100%; width:100%; border-radius:0 4px 4px 0;
  background:linear-gradient(90deg,var(--mk-neon),var(--mk-neon-soft)); transition:background .4s; }
.mk-timerbar.mk-mid{ background:linear-gradient(90deg,#e8c33a,#f5de6a); }
.mk-timerbar.mk-low{ background:linear-gradient(90deg,#ff4d4d,#ff8a3d); animation:mk-blink .8s steps(2) infinite; }
@keyframes mk-blink{ 50%{ opacity:.45; } }
/* glow puls při bonusu času (+8 s je VIDĚT, ne napsáno) */
.mk-timerwrap.mk-boost .mk-timerbar{ box-shadow:0 0 14px 3px rgba(135,210,47,.9); filter:brightness(1.35); }
/* dopad letící odměny času: bar se JEDNOU plynule nafoukne a plynule usadí */
.mk-timerwrap.mk-timehit .mk-timerbar{ transform-origin:left center;
  animation:mk-timehit .85s ease-in-out; }
@keyframes mk-timehit{
  0%  { transform:scaleY(1)   scaleX(1); }
  35% { transform:scaleY(3.2) scaleX(1.04); }
  70% { transform:scaleY(.88) scaleX(.995); }
  100%{ transform:scaleY(1)   scaleX(1); }
}

/* Skóre + combo se star-stackem */
.mk-scorewrap{ top:calc(14px * var(--mk-s)); left:50%; transform:translateX(-50%); text-align:center; }
.mk-score{ font-family:var(--mk-font-display); font-weight:800; font-variant-numeric:tabular-nums;
  font-size:calc(2.4rem * var(--mk-s)); line-height:.85; color:#fff;
  text-shadow:0 0 18px rgba(135,210,47,.5), 0 2px 0 rgba(0,0,0,.5); letter-spacing:.02em; }
.mk-combo{ margin-top:calc(3px * var(--mk-s)); min-height:calc(1.7rem * var(--mk-s));
  display:flex; flex-direction:column; align-items:center; gap:calc(1px * var(--mk-s)); }
.mk-combo .mk-mult{ font-family:var(--mk-font-display); font-weight:800;
  font-size:calc(1.25rem * var(--mk-s));
  color:var(--mk-neon); text-shadow:0 0 12px rgba(135,210,47,.7); letter-spacing:.03em; line-height:1; }
.mk-combo .mk-stars{ display:flex; gap:calc(2px * var(--mk-s)); }
.mk-combo .mk-stars svg{ width:calc(14px * var(--mk-s)); height:calc(14px * var(--mk-s));
  fill:#ffd94d; filter:drop-shadow(0 0 4px rgba(255,217,77,.8)); }
.mk-pop{ animation:mk-pop .28s cubic-bezier(.2,1.6,.4,1); }
@keyframes mk-pop{ 0%{ transform:scale(1.9); } 100%{ transform:scale(1); } }

/* Risk/reward badge: plamínek s bodovým násobičem vpravo od skóre —
   svítí, jen když je hráč v „hot" zóně únavy a sbírá víc bodů */
.mk-riskbadge{ position:absolute; left:calc(100% + 10px * var(--mk-s)); top:calc(4px * var(--mk-s));
  display:flex; align-items:center; gap:calc(5px * var(--mk-s));
  padding:calc(4px * var(--mk-s)) calc(10px * var(--mk-s));
  border-radius:999px; background:rgba(60,30,4,.75);
  border:1px solid rgba(255,157,46,.65);
  font-family:var(--mk-font-display); font-weight:800;
  font-size:calc(1.05rem * var(--mk-s)); line-height:1; white-space:nowrap;
  color:#ffcf7a; text-shadow:0 0 10px rgba(255,157,46,.7);
  animation:mk-riskpulse 1.6s ease-in-out infinite; }
.mk-riskbadge[hidden]{ display:none; }
.mk-riskbadge i{ color:#ff9d2e; filter:drop-shadow(0 0 6px rgba(255,157,46,.9)); }
@keyframes mk-riskpulse{ 0%,100%{ box-shadow:0 0 6px 1px rgba(255,157,46,.35); }
  50%{ box-shadow:0 0 16px 4px rgba(255,157,46,.75); } }

/* Zóna 2: zásobník (vlevo dole) — cca 3x větší, ať je vidět */
.mk-botleft{ left:calc(16px * var(--mk-s)); bottom:calc(14px * var(--mk-s));
  display:flex; align-items:flex-end; gap:calc(14px * var(--mk-s)); }
.mk-mag{ display:flex; gap:calc(14px * var(--mk-s)); align-items:center; }
.mk-bullet{ width:calc(32px * var(--mk-s)); height:calc(54px * var(--mk-s)); border-radius:12px 12px 9px 9px;
  background:linear-gradient(180deg,var(--mk-neon-soft),var(--mk-neon));
  box-shadow:0 0 8px rgba(135,210,47,.55), inset 0 -3px 0 rgba(0,0,0,.25);
  transition:transform .12s, opacity .2s, background .2s; }
.mk-bullet.mk-spent{ background:rgba(255,255,255,.14); box-shadow:none; opacity:.5; transform:translateY(3px) scaleY(.8); }
.mk-bullet.mk-loadin{ animation:mk-loadin .3s cubic-bezier(.2,1.5,.4,1); }
@keyframes mk-loadin{ 0%{ transform:translateY(-16px) scale(1.25); opacity:0; } 100%{ transform:translateY(0) scale(1); opacity:1; } }
.mk-tokens{ display:flex; gap:calc(12px * var(--mk-s)); align-items:flex-end; justify-content:flex-start; }
.mk-token{ position:relative; width:calc(48px * var(--mk-s)); height:calc(48px * var(--mk-s)); }
.mk-token span{ position:absolute; inset:0; display:block; }
.mk-token svg{ width:100%; height:100%; display:block; }
.mk-tok-base{ color:rgba(255,255,255,.20); }
.mk-tok-fill{ color:var(--mk-neon); }
.mk-token.mk-full .mk-tok-fill{ filter:drop-shadow(0 0 4px rgba(135,210,47,.65)); }
.mk-token.mk-tokpop{ animation:mk-tokpop .55s cubic-bezier(.2,1.6,.4,1); }
@keyframes mk-tokpop{ 0%{ transform:scale(.2) rotate(-30deg); } 60%{ transform:scale(1.5) rotate(8deg); } 100%{ transform:scale(1) rotate(0); } }

/* Zóna 3: únava + odpočinkové žetony (vlevo NAHOŘE) — patří k sobě.
   Vpravo dole si je hráč na mobilu zakrýval palcem střílející ruky,
   a je to jedna z nejdůležitějších informací ve hře. */
.mk-topleft{ left:calc(16px * var(--mk-s)); top:calc(20px * var(--mk-s)); text-align:left;
  display:flex; flex-direction:column; align-items:flex-start; gap:calc(10px * var(--mk-s)); }
.mk-fatwrap{ display:flex; align-items:center; gap:calc(6px * var(--mk-s)); justify-content:flex-start; }
.mk-fatbar{ width:calc(230px * var(--mk-s)); height:calc(12px * var(--mk-s)); border-radius:8px;
  background:rgba(255,255,255,.12); overflow:hidden; }
.mk-fatfill{ height:100%; width:0%; border-radius:8px;
  background:linear-gradient(90deg,#ffe14d,#ff9d2e 55%,#ff4d4d); transition:width .3s ease; }
/* „hot" zóna: nad prahem bodového bonusu bar žhne — únava = risk, ale i odměna */
.mk-fatwrap.mk-hot .mk-fatbar{ animation:mk-fathot 1.6s ease-in-out infinite; }
.mk-fatwrap.mk-hot .mk-fatfill{ filter:brightness(1.2); }
@keyframes mk-fathot{ 0%,100%{ box-shadow:0 0 6px 1px rgba(255,157,46,.5); }
  50%{ box-shadow:0 0 15px 4px rgba(255,157,46,.95); } }

/* Rohová ikonová tlačítka (zvuk / nápověda / fullscreen) — škálují s plátnem */
.mk-soundbtn{ position:absolute; top:calc(14px * var(--mk-s)); right:calc(14px * var(--mk-s)); z-index:7; pointer-events:auto;
  width:calc(36px * var(--mk-s)); height:calc(36px * var(--mk-s)); border-radius:calc(10px * var(--mk-s));
  border:1px solid rgba(135,210,47,.35); background:rgba(10,22,15,.7); color:var(--mk-neon); cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0; }
.mk-soundbtn:hover{ background:rgba(20,40,26,.9); }
.mk-soundbtn svg{ width:calc(18px * var(--mk-s)); height:calc(18px * var(--mk-s)); display:block; }
.mk-helpbtn{ right:calc(58px * var(--mk-s)); font-family:var(--mk-font-body); font-weight:800; font-size:calc(1.05rem * var(--mk-s)); }
.mk-fsbtn{ right:calc(102px * var(--mk-s)); font-size:calc(.95rem * var(--mk-s)); }

/* ---- MEZIKOLÍ · VOLBA ŽETONU (beze slov): 2 ikonová tlačítka + odpočtový prstenec ---- */
.mk-choice{ position:absolute; left:0; right:0; top:58%; transform:translateY(-50%);
  z-index:6; display:flex; justify-content:center; align-items:center;
  gap:clamp(120px,36%,340px); pointer-events:none; }
.mk-choice[hidden]{ display:none !important; }
.mk-chbtn{ pointer-events:auto; position:relative; cursor:pointer;
  width:clamp(64px,15vw,110px); height:clamp(64px,15vw,110px); border-radius:50%;
  border:2px solid rgba(135,210,47,.55); background:rgba(8,18,12,.86);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  box-shadow:0 10px 26px rgba(0,0,0,.5), 0 0 0 4px rgba(135,210,47,.10);
  transition:transform .12s, background .15s; }
.mk-chbtn:hover{ transform:scale(1.07); background:rgba(14,30,19,.92); }
.mk-chbtn > svg{ display:block; }
.mk-chbtn .mk-chico{ width:42%; height:42%; }
.mk-chbtn .mk-chprev{ width:64%; height:24%; }
.mk-chring{ position:absolute; inset:-8px; width:calc(100% + 16px); height:calc(100% + 16px); pointer-events:none; }
.mk-chring circle{ fill:none; stroke:var(--mk-neon); stroke-width:3.5; stroke-linecap:round;
  transform:rotate(-90deg); transform-origin:center; filter:drop-shadow(0 0 4px rgba(135,210,47,.6)); }
.mk-chbtn.mk-flash{ animation:mk-chflash .32s steps(2) 2; }
@keyframes mk-chflash{ 50%{ background:rgba(135,210,47,.45); } }

/* Letící ikonka z vybrané volby k cíli (časový bar / měsíčky odpočinku) —
   ukáže, KAM odměna šla; samotný let řídí JS přes Web Animations API */
.mk-chfly{ position:absolute; z-index:8; pointer-events:none;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 14px rgba(135,210,47,1)) drop-shadow(0 0 34px rgba(135,210,47,.55)); }
.mk-chfly svg{ width:100%; height:100%; display:block; }

/* dopad: cílový prvek krátce zazáří */
.mk-fatbar.mk-restglow{ animation:mk-restglow .7s ease-out; }
@keyframes mk-restglow{ 0%{ box-shadow:0 0 16px 4px rgba(182,240,90,.9); }
  100%{ box-shadow:none; } }

/* mini-náhled ODPOČINEK: metr únavy klesá na polovinu + vlnka se narovnává */
.mk-prev-fat{ animation:mk-prev-fat 2.4s ease-in-out infinite; }
@keyframes mk-prev-fat{ 0%,18%{ width:26px; } 55%,82%{ width:13px; } 100%{ width:26px; } }
.mk-prev-wave1{ animation:mk-prev-w1 2.4s ease-in-out infinite; }
.mk-prev-wave2{ animation:mk-prev-w2 2.4s ease-in-out infinite; }
@keyframes mk-prev-w1{ 0%,18%{ opacity:1; } 55%,82%{ opacity:0; } 100%{ opacity:1; } }
@keyframes mk-prev-w2{ 0%,18%{ opacity:0; } 55%,82%{ opacity:1; } 100%{ opacity:0; } }
/* mini-náhled ČAS: časový bar roste se zeleným pulsem */
.mk-prev-time{ animation:mk-prev-time 2s ease-in-out infinite; }
@keyframes mk-prev-time{ 0%,12%{ width:14px; fill:#87d22f; filter:none; }
  55%{ width:30px; fill:#b6f05a; filter:drop-shadow(0 0 4px rgba(135,210,47,.95)); }
  80%{ width:30px; fill:#87d22f; filter:none; } 100%{ width:14px; } }

/* ---- START-GATE beze slov: piktogramy + velké ▶ ---- */
.mk-gate{ position:absolute; inset:0; z-index:9; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(14px,4vh,30px); text-align:center;
  background:rgba(5,13,9,.82); backdrop-filter:blur(2px); color:#fff;
  visibility:visible; transition:opacity .25s, visibility 0s; }
.mk-gate.mk-hide{ opacity:0; pointer-events:none; visibility:hidden; transition:opacity .25s, visibility 0s .25s; }
.mk-pictos{ display:flex; gap:clamp(12px,5vw,52px); align-items:center; justify-content:center; }
.mk-picto{ width:clamp(72px,15vw,150px); height:clamp(72px,15vw,150px);
  background:rgba(255,255,255,.05); border:1px solid rgba(135,210,47,.25); border-radius:18px;
  display:flex; align-items:center; justify-content:center; }
.mk-picto svg{ width:86%; height:86%; display:block; overflow:visible; }
.mk-playbtn{ pointer-events:auto; border:0; cursor:pointer;
  width:clamp(74px,13vw,130px); height:clamp(74px,13vw,130px); border-radius:50%;
  background:var(--mk-neon); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(135,210,47,.5), 0 0 0 8px rgba(135,210,47,.15);
  transition:transform .12s, background .15s; animation:mk-breathe 2.4s ease-in-out infinite; }
.mk-playbtn:hover{ background:var(--mk-neon-soft); transform:scale(1.06); }
.mk-playbtn svg{ width:44%; height:44%; display:block; margin-left:6%; }
@keyframes mk-breathe{ 0%,100%{ box-shadow:0 10px 30px rgba(135,210,47,.5), 0 0 0 6px rgba(135,210,47,.12); }
  50%{ box-shadow:0 10px 34px rgba(135,210,47,.65), 0 0 0 14px rgba(135,210,47,.05); } }

/* Piktogram ①: zaměřovač se chvěje → znehybní → prstenec zezelená */
.mk-p1-jit{ animation:mk-p1-jit 3s linear infinite; }
@keyframes mk-p1-jit{ 0%{ transform:translate(0,0); } 5%{ transform:translate(-3px,2px); }
  10%{ transform:translate(2.5px,-2px); } 15%{ transform:translate(-2px,-2.5px); }
  20%{ transform:translate(3px,1.5px); } 25%{ transform:translate(-2.5px,2px); }
  30%{ transform:translate(1.8px,-1.2px); } 36%{ transform:translate(-1px,.8px); }
  42%{ transform:translate(.4px,-.3px); } 50%,100%{ transform:translate(0,0); } }
.mk-p1-ring{ animation:mk-p1-ring 3s linear infinite; }
@keyframes mk-p1-ring{ 0%,42%{ stroke:#ff4d4d; } 55%,88%{ stroke:#87d22f; } 100%{ stroke:#ff4d4d; } }
/* Piktogram ②: tap → terč se překlopí na bílo + hvězdička */
.mk-p2-hand{ animation:mk-p2-hand 3s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes mk-p2-hand{ 0%,18%{ transform:translate(0,-6px) scale(1); opacity:0; }
  26%{ transform:translate(0,0) scale(1); opacity:1; } 33%{ transform:translate(0,2px) scale(.85); }
  40%{ transform:translate(0,0) scale(1); opacity:1; } 60%,100%{ transform:translate(0,-6px) scale(1); opacity:0; } }
.mk-p2-disc{ animation:mk-p2-disc 3s linear infinite; transform-box:fill-box; transform-origin:center; }
@keyframes mk-p2-disc{ 0%,33%{ fill:#111; transform:scaleY(1); } 40%{ fill:#111; transform:scaleY(.12); }
  47%{ fill:#fff; transform:scaleY(1); } 92%,100%{ fill:#fff; transform:scaleY(1); } }
.mk-p2-star{ animation:mk-p2-star 3s ease-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes mk-p2-star{ 0%,42%{ transform:scale(0) rotate(0deg); opacity:0; }
  52%{ transform:scale(1.25) rotate(30deg); opacity:1; } 62%{ transform:scale(1) rotate(45deg); opacity:1; }
  80%,100%{ transform:scale(.6) rotate(60deg); opacity:0; } }
/* Piktogram ③: žabák skáče před terč → červený vykřičník-blesk */
.mk-p3-frog{ animation:mk-p3-frog 3s ease-in-out infinite; }
@keyframes mk-p3-frog{ 0%,12%{ transform:translate(-34px,10px); } 38%{ transform:translate(0,-12px); }
  52%,72%{ transform:translate(0,0); } 90%,100%{ transform:translate(34px,10px); } }
.mk-p3-bang{ animation:mk-p3-bang 3s linear infinite; transform-box:fill-box; transform-origin:center; }
@keyframes mk-p3-bang{ 0%,48%{ opacity:0; transform:scale(.4); } 54%{ opacity:1; transform:scale(1.25); }
  58%{ opacity:1; transform:scale(1); } 62%{ opacity:.2; } 66%{ opacity:1; } 74%,100%{ opacity:0; transform:scale(.8); } }

/* ---- FÉROVÁ PAUZA — beze slov: spící žabák (maskot) + kulaté play ---- */
.mk-pause{ position:absolute; inset:0; z-index:9; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:calc(26px * var(--mk-s)); text-align:center;
  background:rgba(5,13,9,.85); backdrop-filter:blur(2px); color:#fff;
  cursor:crosshair;   /* hráč musí vidět, kde má myš, aby trefil Play */
  opacity:0; pointer-events:none; visibility:hidden; transition:opacity .2s, visibility 0s .2s; }
.mk-pause.mk-show{ opacity:1; pointer-events:auto; visibility:visible; transition:opacity .2s, visibility 0s; }
.mk-pausefrog svg{ width:calc(140px * var(--mk-s)); height:auto; display:block; overflow:visible; }
.mk-pf-body{ animation:mk-pf-breathe 3.2s ease-in-out infinite;
  transform-box:fill-box; transform-origin:50% 100%; }
@keyframes mk-pf-breathe{ 0%,100%{ transform:scale(1,1); } 50%{ transform:scale(1.025,1.06); } }
.mk-pf-z text{ font-family:var(--mk-font-display); font-weight:800; font-size:20px;
  fill:var(--mk-neon); }
.mk-pf-z{ opacity:0; transform-box:fill-box; transform-origin:center;
  animation:mk-pf-z 3.2s ease-out infinite; }
.mk-pf-z2{ animation-delay:1.05s; }
.mk-pf-z3{ animation-delay:2.1s; }
@keyframes mk-pf-z{ 0%{ opacity:0; transform:translate(0,8px) scale(.55); }
  22%{ opacity:1; } 65%{ opacity:0; transform:translate(9px,-14px) scale(1.15); }
  100%{ opacity:0; } }
.mk-resumebtn{ width:calc(96px * var(--mk-s)); height:calc(96px * var(--mk-s)); padding:0;
  border-radius:50%; border:2px solid var(--mk-neon); background:rgba(13,43,14,.5);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .15s, background .15s; animation:cta-pulse 2.8s ease-out infinite; }
.mk-resumebtn svg{ width:60%; height:60%; display:block; }
.mk-resumebtn svg polygon{ fill:var(--mk-neon); }
.mk-resumebtn:hover{ background:var(--mk-neon); transform:scale(1.06); animation:none; }
.mk-resumebtn:hover svg polygon{ fill:#08131c; }
@keyframes cta-pulse{ 0%{ box-shadow:0 0 0 0 rgba(135,210,47,.5); } 70%{ box-shadow:0 0 0 22px rgba(135,210,47,0); } 100%{ box-shadow:0 0 0 0 rgba(135,210,47,0); } }
@media (prefers-reduced-motion: reduce){
  .mk-resumebtn{ animation:none; }
  .mk-pf-body{ animation:none; }
  .mk-pf-z{ animation:none; opacity:.85; }
}

/* ---- KONEC HRY: výsledková karta (systémová obrazovka mimo hru — text smí) ---- */
.mk-end{ position:absolute; inset:0; z-index:9; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-align:center;
  background:rgba(5,13,9,.86); backdrop-filter:blur(2px); color:#fff;
  padding:clamp(12px,3vw,26px); overflow-y:auto;
  opacity:0; pointer-events:none; visibility:hidden; transition:opacity .3s, visibility 0s .3s; }
.mk-end.mk-show{ opacity:1; pointer-events:auto; visibility:visible; transition:opacity .3s, visibility 0s; }
.mk-end .mk-endtitle{ font-family:var(--mk-font-display); font-weight:800; font-size:clamp(1.4rem,5vw,2.2rem);
  color:var(--mk-neon); text-shadow:0 0 20px rgba(135,210,47,.55); line-height:.9; }
.mk-endscore{ font-family:var(--mk-font-display); font-weight:800; font-variant-numeric:tabular-nums;
  font-size:clamp(2.4rem,9vw,4rem); line-height:.9; color:#fff; text-shadow:0 0 24px rgba(135,210,47,.4); }
.mk-endstats{ display:flex; gap:clamp(12px,4vw,30px); justify-content:center; flex-wrap:wrap; margin-top:2px; }
.mk-endstat{ text-align:center; }
.mk-endstat b{ display:block; font-family:var(--mk-font-display); font-weight:800; font-size:clamp(1.1rem,4vw,1.6rem);
  color:#eafff0; line-height:1; }
.mk-endstat span{ font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#8fb9a0; }

.mk-preview-badge{ display:inline-block; background:rgba(245,166,35,.18); color:#ffcf7a;
  border:1px solid rgba(245,166,35,.5); border-radius:999px; padding:5px 14px;
  font-size:.75rem; font-weight:800; letter-spacing:.04em; }

.mk-endform{ display:flex; flex-direction:column; gap:8px; width:100%; max-width:340px; margin-top:4px; }
.mk-field{ position:relative; display:flex; align-items:center;
  background:rgba(16,34,22,.85); border:1.5px solid rgba(135,210,47,.4); border-radius:12px;
  transition:border-color .15s, box-shadow .15s; }
.mk-field:focus-within{ border-color:var(--mk-neon); box-shadow:0 0 0 3px rgba(135,210,47,.18); }
.mk-field i{ position:absolute; left:13px; color:#8fb9a0; font-size:.9rem; pointer-events:none; }
.mk-field input{ flex:1; border:0; background:transparent; padding:12px 14px 12px 38px;
  font-size:.95rem; color:#eafff0; border-radius:12px; outline:none; font-family:inherit; }
.mk-field input::placeholder{ color:#6f9080; }
.mk-submit{ margin-top:2px; border:0; cursor:pointer; font-family:var(--mk-font-body); font-weight:800;
  font-size:.95rem; color:#08131c; background:var(--mk-neon); padding:13px 18px; border-radius:12px;
  box-shadow:0 8px 20px -8px rgba(135,210,47,.6); transition:transform .12s, background .15s, filter .15s; }
.mk-submit:hover:not(:disabled){ background:var(--mk-neon-soft); transform:translateY(-1px); }
.mk-submit:disabled{ background:#5c7a62; color:#cfe9d6; cursor:default; box-shadow:none; }
.mk-submit-msg{ font-size:.82rem; font-weight:700; min-height:1em; }
.mk-submit-msg.mk-ok{ color:var(--mk-neon-soft); }
.mk-submit-msg.mk-err{ color:#ff9a9a; }

.mk-endbtns{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:4px; }
.mk-restart{ border:0; cursor:pointer; font-family:var(--mk-font-body); font-weight:800; font-size:.95rem;
  color:#08131c; background:var(--mk-neon); padding:11px 24px; border-radius:999px;
  box-shadow:0 6px 18px rgba(135,210,47,.4); }
.mk-restart:hover{ background:var(--mk-neon-soft); }
.mk-ghostbtn{ cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.92rem;
  color:var(--mk-neon); border:1px solid rgba(135,210,47,.5); border-radius:999px; background:transparent;
  padding:10px 22px; text-decoration:none; }
.mk-ghostbtn:hover{ background:rgba(135,210,47,.12); }

/* ---- SPOTLIGHT PRŮVODCE (onboarding overlay mimo gameplay — text smí) ---- */
.mk-tut{ position:absolute; inset:0; z-index:10; }
.mk-tut[hidden]{ display:none !important; }
.mk-spot{ position:absolute; pointer-events:none; border-radius:14px;
  box-shadow:0 0 0 9999px rgba(4,10,6,.82); border:2px solid rgba(135,210,47,.85);
  transition:left .25s ease, top .25s ease, width .25s ease, height .25s ease, border-radius .25s ease; }
.mk-tutbubble{ position:absolute; max-width:min(340px, 86%);
  background:#f4fff0; color:#12351a; border-radius:14px; padding:12px 14px;
  box-shadow:0 12px 30px rgba(0,0,0,.45); display:flex; flex-direction:column; gap:9px; }
.mk-tuthead{ display:flex; gap:10px; align-items:flex-start; }
.mk-tuthead svg{ width:42px; height:42px; flex:0 0 auto; }
.mk-tuttext{ font-weight:600; font-size:.9rem; line-height:1.35; }
.mk-tutfoot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mk-tutdots{ display:flex; gap:5px; margin-right:auto; }
.mk-tutdots i{ width:7px; height:7px; border-radius:50%; background:#c6d9c4; }
.mk-tutdots i.on{ background:#5fa829; }
.mk-tutbtn{ border:0; cursor:pointer; font-weight:700; font-size:.8rem;
  border-radius:8px; padding:7px 13px; background:#e2efdc; color:#245c2a; }
.mk-tutbtn.mk-primary{ background:var(--mk-neon); color:#08131c; }
.mk-tutbtn:disabled{ opacity:.4; cursor:default; }
.mk-tutskip{ border:0; cursor:pointer; background:none; color:#5c7a62;
  font-size:.75rem; font-weight:700; padding:7px 4px; text-decoration:underline; }

/* ---- Přístupnost: reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .mk-timerbar.mk-low{ animation:none; }
  .mk-timerwrap.mk-timehit .mk-timerbar{ animation:none; }
  .mk-riskbadge{ animation:none; }
  .mk-fatwrap.mk-hot .mk-fatbar{ animation:none; box-shadow:0 0 10px 2px rgba(255,157,46,.7); }
  .mk-pop, .mk-bullet.mk-loadin{ animation:none; }
  .mk-playbtn{ animation:none; }
  .mk-p1-jit, .mk-p3-frog{ animation-duration:6s; }
  .mk-token.mk-tokpop{ animation:none; }
  .mk-chbtn.mk-flash{ animation:none; background:rgba(135,210,47,.4); }
  .mk-prev-fat, .mk-prev-wave1, .mk-prev-wave2, .mk-prev-time{ animation-duration:6s; }
  .mk-spot{ transition:none; }
}


/* Na malých displejích HUD prvky přiměřeně menší */
@media (max-width: 700px){
  .mk-bullet{ width:calc(20px * var(--mk-s)); height:calc(34px * var(--mk-s)); }
  .mk-token{ width:calc(30px * var(--mk-s)); height:calc(30px * var(--mk-s)); }
  .mk-fatbar{ width:calc(130px * var(--mk-s)); height:calc(8px * var(--mk-s)); }
}


/* ---- SDÍLENÍ: modal s náhledem karty a sociálními tlačítky ---- */
.mk-sharemodal{ position:absolute; inset:0; z-index:11; display:flex;
  align-items:center; justify-content:center; padding:calc(16px * var(--mk-s));
  background:rgba(4,10,6,.88); backdrop-filter:blur(3px); }
.mk-sharemodal[hidden]{ display:none; }
.mk-sharebox{ position:relative; display:flex; flex-direction:column; gap:calc(14px * var(--mk-s));
  max-width:min(720px, 92%); }
.mk-shareimg{ display:block; width:100%; border-radius:14px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(135,210,47,.3); }
.mk-shareclose{ position:absolute; top:calc(-14px * var(--mk-s)); right:calc(-14px * var(--mk-s));
  width:40px; height:40px; border:none; border-radius:50%; background:rgba(255,255,255,.14);
  color:#fff; font-size:1.4rem; line-height:1; cursor:pointer; z-index:2; }
.mk-shareclose:hover{ background:rgba(255,255,255,.3); }
.mk-sharebtns{ display:flex; gap:calc(12px * var(--mk-s)); justify-content:center; flex-wrap:wrap; }
.mk-sharelink{ width:calc(54px * var(--mk-s)); height:calc(54px * var(--mk-s)); border:none;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:calc(1.25rem * var(--mk-s)); color:#fff; cursor:pointer; text-decoration:none;
  transition:transform .12s, filter .15s; }
.mk-sharelink:hover{ transform:scale(1.1); filter:brightness(1.15); }
.mk-sh-fb{ background:#1877f2; }
.mk-sh-wa{ background:#25d366; }
.mk-sh-x{ background:#111; box-shadow:0 0 0 1px rgba(255,255,255,.25); }
.mk-sh-native{ background:var(--mk-neon); color:#08131c; }
.mk-sh-copy{ background:rgba(255,255,255,.16); }
.mk-sh-copy.mk-copied{ background:var(--mk-neon); color:#08131c; }