/* FLAF.cz — Vyhrát
   Průběžné animace jen přes transform a opacity; záře je v gradientech
   a text-shadow statických prvků. Částice kreslí canvas #fx. */

:root{
  color-scheme:only light;
  --topbar-h:60px;
  --ink:#f4f1ff;
  --gold:#ffd166;
  --red-2:#ff3030;
  --red-3:#c8001a;
  --red-4:#7a0010;
  --red-5:#3a0008;
  --pop:cubic-bezier(.34,1.56,.64,1);
  --stage-w:min(620px, 94vw);
  --score-fs:clamp(24px, min(9.2vw, 6.2vh), 64px);
  --slot:clamp(20px, min(calc((var(--stage-w) - 70px) / 10), 4.6vh), 44px);
  --btn:clamp(160px, min(46vw, 32vh), 300px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
}
body{
  font-family:'Fredoka',system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(ellipse 80% 60% at 22% 12%, rgba(60,30,120,.55) 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 88% 22%, rgba(170,40,130,.4) 0%, transparent 65%),
    radial-gradient(ellipse 90% 60% at 78% 92%, rgba(20,80,150,.5) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 12% 82%, rgba(140,50,160,.4) 0%, transparent 60%),
    linear-gradient(180deg, #060414 0%, #0a0820 30%, #0c0a26 70%, #050310 100%);
  background-color:#07051a;
  -webkit-user-select:none;user-select:none;
}
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ===== OBLOHA ===== */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sky .stars{position:absolute;inset:0;background-repeat:repeat}
.sky .far{
  background-image:
    radial-gradient(.7px .7px at 8% 12%, #fff, transparent),
    radial-gradient(.7px .7px at 22% 38%, #cfd9ff, transparent),
    radial-gradient(.7px .7px at 41% 18%, #fff, transparent),
    radial-gradient(.6px .6px at 57% 62%, #fff, transparent),
    radial-gradient(.7px .7px at 68% 33%, #ffe7c7, transparent),
    radial-gradient(.6px .6px at 79% 78%, #fff, transparent),
    radial-gradient(.7px .7px at 93% 47%, #fff, transparent),
    radial-gradient(.6px .6px at 15% 67%, #d4e3ff, transparent),
    radial-gradient(.7px .7px at 33% 83%, #fff, transparent),
    radial-gradient(.6px .6px at 48% 92%, #fff, transparent),
    radial-gradient(.7px .7px at 6% 88%, #fff, transparent),
    radial-gradient(.7px .7px at 26% 7%, #ffe7c7, transparent),
    radial-gradient(.6px .6px at 74% 11%, #fff, transparent),
    radial-gradient(.6px .6px at 87% 67%, #d4e3ff, transparent),
    radial-gradient(.7px .7px at 39% 53%, #fff, transparent),
    radial-gradient(.6px .6px at 62% 87%, #ffe7c7, transparent);
  background-size:300px 300px;
  opacity:.6;
}
.sky .near{
  background-image:
    radial-gradient(1.1px 1.1px at 14% 25%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 37% 65%, #ffe7c7, transparent),
    radial-gradient(1.1px 1.1px at 58% 13%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 82% 42%, #d4e3ff, transparent),
    radial-gradient(1.1px 1.1px at 11% 78%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 45% 88%, #ffe7c7, transparent),
    radial-gradient(1.1px 1.1px at 71% 71%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 91% 84%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 25% 51%, #cfd9ff, transparent),
    radial-gradient(1.3px 1.3px at 64% 32%, #fff, transparent);
  background-size:420px 420px;
  opacity:.9;
  animation:twinkle 4.5s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.9}to{opacity:.45}}

.sky .bright{
  position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;
  box-shadow:0 0 4px 1px rgba(255,255,255,.95),0 0 12px 2px rgba(255,230,180,.7),0 0 24px 4px rgba(255,200,120,.35);
  animation:starPulse 3.5s ease-in-out infinite;
}
.sky .bright::before,.sky .bright::after{
  content:"";position:absolute;left:50%;top:50%;
  background:linear-gradient(90deg, transparent, rgba(255,240,200,.85), transparent);
  transform:translate(-50%,-50%);
}
.sky .bright::before{width:22px;height:1px}
.sky .bright::after{width:1px;height:22px}
.sky .b1{top:9%;left:12%}
.sky .b2{top:20%;left:84%;animation-delay:-1.2s}
.sky .b3{top:44%;left:5%;animation-delay:-2.4s}
.sky .b4{top:58%;left:93%;animation-delay:-.6s}
.sky .b5{top:82%;left:16%;animation-delay:-1.8s}
.sky .b6{top:88%;left:78%;animation-delay:-2.9s}
@keyframes starPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.45);opacity:1}}

.sky .shoot{
  position:absolute;top:10%;left:-20%;width:150px;height:2px;border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(190,210,255,.55) 60%, #fff);
  opacity:0;
  animation:shoot 12s linear infinite 3s;
}
@keyframes shoot{
  0%{transform:translate3d(0,0,0) rotate(18deg);opacity:0}
  2%{opacity:1}
  13%{opacity:1}
  20%{transform:translate3d(140vw,46vw,0) rotate(18deg);opacity:0}
  100%{transform:translate3d(140vw,46vw,0) rotate(18deg);opacity:0}
}

/* odezva oblohy na výhry (průhlednost řídí hra) */
.sky-glow{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 75% 55% at 50% 45%, rgba(255,170,60,.32), rgba(255,80,140,.12) 45%, rgba(255,80,140,0) 72%);
  opacity:0;transition:opacity .8s ease;will-change:opacity;
}

/* ===== VRSTVY EFEKTŮ ===== */
#fx{position:fixed;left:0;top:0;width:100%;height:100%;z-index:5;pointer-events:none}
.flyers,.pops,.msgs{position:fixed;inset:0;pointer-events:none}
.flyers{z-index:6}
.pops{z-index:6}
.msgs{z-index:9}
.flyer{position:absolute;overflow:visible;will-change:transform}

.flash{
  position:fixed;inset:0;z-index:8;pointer-events:none;opacity:0;will-change:opacity;
  background:radial-gradient(circle at 50% 40%, rgba(255,232,150,.8), rgba(255,180,60,.25) 45%, rgba(255,160,40,0) 75%);
}
.flash.white{background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.85), rgba(200,225,255,.3) 45%, rgba(200,225,255,0) 75%)}
.flash.rainbow{background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.75), rgba(255,126,182,.32) 35%, rgba(76,201,240,.2) 55%, rgba(76,201,240,0) 80%)}

/* ===== ROZVRŽENÍ ===== */
.stage{
  position:relative;z-index:2;
  width:var(--stage-w);margin:0 auto;
  height:100vh;height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(12px, 3vh, 34px);
  padding:calc(var(--topbar-h) + env(safe-area-inset-top,0px) + 10px) 0 calc(14px + env(safe-area-inset-bottom,0px));
}

/* ===== HORNÍ LIŠTA WEBU ===== */
.game-topbar{
  position:fixed;top:0;left:0;right:0;
  height:calc(var(--topbar-h) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 16px 0;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(72,61,139,.97);
  z-index:1000;
}
.game-topbar__back{
  display:flex;align-items:center;gap:8px;
  color:#fff;text-decoration:none;font-weight:600;font-size:16px;
  font-family:'Nunito',system-ui,sans-serif;
  transition:opacity .15s ease;
}
.game-topbar__back:hover{opacity:.8}
.game-topbar__back .chev{
  display:inline-block;width:.6em;height:.6em;
  border-left:3px solid currentColor;border-bottom:3px solid currentColor;
  border-bottom-left-radius:2px;
  transform:rotate(45deg);margin-right:.15em;vertical-align:-.05em;
}
.game-topbar__info{
  position:absolute;left:50%;transform:translateX(-50%);
  color:#fff;font-weight:600;font-size:16px;
  font-family:'Baloo 2',sans-serif;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  max-width:calc(100vw - 220px);
  pointer-events:none;text-align:center;
  display:inline-flex;align-items:center;gap:8px;
  text-transform:uppercase;letter-spacing:.04em;
}
.game-topbar__info-icon{width:32px;height:32px;display:block;flex:0 0 auto;object-fit:contain}
@media (max-width:380px){
  .game-topbar__info{max-width:calc(100vw - 196px);letter-spacing:.02em}
  .game-topbar__info-icon{display:none}
}
.game-topbar__menu{position:relative}
.game-topbar__hamburger{
  background:rgba(255,255,255,.15);color:#fff;border:none;
  width:40px;height:40px;border-radius:10px;cursor:pointer;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:0;transition:background .15s ease,transform .15s ease;
}
.game-topbar__hamburger:hover{background:rgba(255,255,255,.25)}
.game-topbar__hamburger:active{transform:scale(.95)}
.game-topbar__hamburger span{
  display:block;width:18px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .2s ease,opacity .2s ease;
}
.game-topbar__hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.game-topbar__hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.game-topbar__hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.game-topbar__dropdown{
  position:absolute;top:calc(100% + 6px);right:0;
  min-width:300px;max-width:420px;
  background:rgba(72,61,139,.99);
  border:1px solid rgba(255,255,255,.15);border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  padding:6px;margin:0;list-style:none;display:none;
  max-height:calc(100vh - 80px);overflow-y:auto;z-index:1001;
  font-family:'Nunito',system-ui,sans-serif;
}
.game-topbar__dropdown.is-open{display:block}
.game-topbar__dropdown li{list-style:none;margin:0}
.game-topbar__dropdown a,
.game-topbar__dropdown .dd-item{
  display:flex;align-items:center;gap:10px;padding:12px 16px;width:100%;
  color:#fff;text-decoration:none;font-weight:700;font-size:1.9rem;
  font-family:inherit;text-align:left;
  text-transform:uppercase;letter-spacing:.04em;
  background:transparent;border:0;cursor:pointer;
  border-radius:8px;transition:background .15s ease;white-space:nowrap;
}
.game-topbar__dropdown a:hover,.game-topbar__dropdown a:focus,
.game-topbar__dropdown .dd-item:hover,.game-topbar__dropdown .dd-item:focus{background:rgba(255,255,255,.12);outline:none}
.game-topbar__dropdown .dd-item:focus-visible{outline:3px solid #7FFFD4;outline-offset:-3px}
.game-topbar__dropdown .menu-emoji{display:inline-block;width:1.2em;text-align:center}
.game-topbar__dropdown [data-fx-label]{color:#7FFFD4}
.game-topbar__dropdown .is-low [data-fx-label]{color:#ffd166}
.game-topbar__dropdown .dd-sep{height:1px;margin:6px 10px;background:rgba(255,255,255,.18)}

/* ===== SKÓRE ===== */
.scoreboard{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.scoreboard::before{
  content:"";position:absolute;left:-6%;right:-6%;top:-55%;bottom:-55%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,196,84,.34) 0%, rgba(255,140,40,.14) 48%, rgba(255,120,30,0) 72%);
  animation:halo 2.8s ease-in-out infinite alternate;
}
@keyframes halo{from{opacity:.65}to{opacity:1}}

.score-panel{
  position:relative;
  padding:.16em .42em;
  border-radius:.34em;
  font-size:calc(var(--score-fs) * var(--fit, 1));
  background:linear-gradient(180deg, rgba(44,18,82,.94) 0%, rgba(16,8,38,.96) 100%);
  border:2px solid rgba(255,209,102,.5);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.13),
    inset 0 -10px 22px rgba(0,0,0,.45),
    0 0 0 4px rgba(20,8,40,.55),
    0 12px 30px rgba(0,0,0,.5),
    0 0 36px rgba(255,180,77,.22);
}
.score-panel::before{
  content:"";position:absolute;left:.3em;right:.3em;top:3px;height:38%;border-radius:.3em .3em 50% 50%/.3em .3em 30% 30%;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  pointer-events:none;
}
.score{
  display:flex;justify-content:center;align-items:center;
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;
  font-size:1em;line-height:1;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
}
.reel{position:relative;display:block;width:.62em;height:1.15em;overflow:hidden;transition:opacity .4s ease}
.reel.gap{margin-right:.2em}
.reel.lead{opacity:.32}
.reel.lead .glow{visibility:hidden}
.strip{position:absolute;left:0;top:0;width:100%;will-change:transform}
.strip span{display:block;white-space:pre;text-align:center;line-height:1.15}
.strip .glow{
  position:absolute;left:0;top:0;width:100%;
  color:transparent;
  text-shadow:0 0 .1em rgba(255,214,110,.95), 0 0 .28em rgba(255,150,40,.6);
}
.strip .face{
  position:relative;
  background:linear-gradient(180deg, #fffae0 0%, #ffe790 26%, #ffd166 50%, #ffae3d 74%, #ff8a1f 100%) 0 0 / 100% 1.15em repeat-y;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#ffd166;
}

.crown{
  position:absolute;left:50%;bottom:100%;
  width:calc(var(--score-fs) * 1.1);height:calc(var(--score-fs) * 1.1);
  margin-left:calc(var(--score-fs) * -.55);margin-bottom:-.2em;
  opacity:0;transform:translateY(12px) scale(.3);
  transition:opacity .5s ease, transform .7s var(--pop);
  pointer-events:none;
}
.crown.show{opacity:1;transform:none;animation:crownBob 3s ease-in-out infinite .8s}
@keyframes crownBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-4px) rotate(4deg)}}

/* ===== ODZNAKY ===== */
.badges{display:flex;flex-direction:column;align-items:center;gap:clamp(3px, 1vh, 10px);width:100%}
.badge-row{display:flex;gap:clamp(2px, 1vw, 6px);justify-content:center}
.slot{display:block;position:relative;width:var(--slot);height:var(--slot)}
.slot svg{display:block;width:100%;height:100%;overflow:visible}
.slot.on svg{animation:badgeBreath 2.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.26s)}
.row-cups .slot.on svg{animation-name:cupSway;animation-duration:3s}
.row-medals .slot.on svg{animation-name:medalSwing;animation-duration:2.8s}
@keyframes badgeBreath{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(6deg)}}
@keyframes cupSway{0%,100%{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.07) rotate(4deg)}}
@keyframes medalSwing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg) scale(1.05)}}

/* ===== TLAČÍTKO ===== */
.btn-zone{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:calc(var(--btn) * .16)}
.btn-base{position:relative;width:var(--btn);height:var(--btn)}
.btn-aura{
  position:absolute;inset:-52%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,140,70,.6) 0%, rgba(255,70,60,.3) 30%, rgba(255,40,40,.1) 48%, rgba(255,40,40,0) 64%);
  opacity:.3;transition:opacity 1.2s ease;will-change:opacity,transform;
}
.btn-base::before{
  content:"";position:absolute;inset:-14%;border-radius:50%;
  background:radial-gradient(circle at 50% 30%, #4a3a52 0%, #2a1f2e 60%, #15101c 100%);
  box-shadow:0 14px 30px -6px rgba(0,0,0,.65), inset 0 3px 7px rgba(255,255,255,.18), inset 0 -5px 10px rgba(0,0,0,.55);
}
.btn-ring{
  position:absolute;inset:-5%;border-radius:50%;pointer-events:none;
  border:1.5px solid rgba(255,209,102,.6);
  box-shadow:inset 0 0 16px rgba(255,209,102,.25), 0 0 24px rgba(255,209,102,.3);
  animation:ringInvite 2.4s ease-in-out infinite;
}
@keyframes ringInvite{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.025)}}

.bulbs{position:absolute;inset:0;pointer-events:none}
.bulb{
  position:absolute;left:50%;top:50%;
  width:calc(var(--btn) * .068);height:calc(var(--btn) * .068);border-radius:50%;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--btn) * -.575));
  background:radial-gradient(circle at 40% 35%, #8a6a3a 0%, #3a2814 75%);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.1);
}
.bulb b{
  position:absolute;inset:-70%;border-radius:50%;
  background:radial-gradient(circle, #fff 0 13%, #ffe27a 22%, rgba(255,200,80,.6) 38%, rgba(255,160,40,0) 68%);
  opacity:0;transition:opacity .16s ease;will-change:opacity;
}
.bulb.on b{opacity:1}

.big-button{
  position:absolute;inset:0;z-index:2;
  border:0;padding:0;margin:0;background:transparent;border-radius:50%;
  cursor:pointer;color:#fff;font:inherit;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;outline:none;
}
.big-button .lip{
  position:absolute;inset:0;border-radius:50%;transform:translateY(7px);
  background:radial-gradient(circle at 50% 30%, var(--red-3) 0%, var(--red-4) 60%, var(--red-5) 100%);
  box-shadow:0 0 0 1px #2a0006, 0 12px 26px -6px rgba(255,30,30,.5), 0 0 44px rgba(255,80,80,.28);
}
.big-button .face{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 22%, #ffb0a8 0%, #ff5a44 22%, var(--red-2) 42%, var(--red-3) 68%, var(--red-4) 100%);
  box-shadow:inset 0 12px 24px rgba(255,255,255,.42), inset 0 -22px 42px rgba(60,0,0,.6);
  transition:transform .06s ease-out;
  will-change:transform;
}
.big-button .face::before{
  content:"";position:absolute;top:8%;left:18%;right:18%;height:26%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 70%);
}
.big-button .shine,.big-button .shade{position:absolute;inset:0;border-radius:50%;opacity:0;pointer-events:none;will-change:opacity}
.big-button .shine{background:radial-gradient(circle at 50% 42%, rgba(255,244,210,.9) 0%, rgba(255,170,90,.4) 45%, rgba(255,120,60,0) 72%)}
.big-button .shade{
  background:radial-gradient(circle at 50% 70%, rgba(80,0,0,0) 30%, rgba(80,0,0,.45) 100%);
  transition:opacity .06s ease-out;
}
.big-button.is-down .face{transform:translateY(5px)}
.big-button.is-down .shade{opacity:1}
.big-button .label{
  position:relative;z-index:2;display:block;
  font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:calc(var(--btn) * .19);letter-spacing:.07em;
  text-shadow:0 2px 0 rgba(120,0,0,.7), 0 4px 8px rgba(0,0,0,.5), 0 0 12px rgba(255,240,170,.85), 0 0 26px rgba(255,180,77,.6);
}
.big-button:focus-visible .face{outline:4px solid #7FFFD4;outline-offset:6px}

/* ===== VÝHERNÍ ČÁSTKY A HLÁŠKY ===== */
.pop{
  position:absolute;left:0;top:0;opacity:0;white-space:nowrap;
  font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:clamp(20px, 5.4vw, 32px);line-height:1;
  color:#fff;
  text-shadow:0 2px 0 rgba(140,60,0,.85), 0 0 10px rgba(255,209,102,.95), 0 0 22px rgba(255,160,40,.6);
  will-change:transform,opacity;
}
.pop.big{font-size:clamp(24px, 6.4vw, 38px);color:#fff3a8}
.pop.jackpot{
  font-size:clamp(30px, 8vw, 50px);color:#fff;
  text-shadow:0 3px 0 #7a1fa0, 0 0 12px #ff7eb6, 0 0 26px #4cc9f0, 0 0 40px rgba(255,209,102,.8);
}

.msg{
  position:absolute;left:50%;top:40%;opacity:0;white-space:nowrap;
  font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:clamp(30px, 8.4vw, 54px);line-height:1.15;letter-spacing:.02em;
  will-change:transform,opacity;
}
.msg.big{font-size:clamp(38px, 11vw, 74px)}
.msg .g{
  position:absolute;left:0;top:0;color:transparent;
  text-shadow:0 0 6px rgba(255,250,220,.95), 0 0 16px rgba(255,200,100,.8), 0 0 34px rgba(255,150,40,.55), 0 4px 0 rgba(90,20,0,.55);
}
.msg .t{
  position:relative;display:block;
  background:linear-gradient(180deg, #fffae0 0%, #ffe790 28%, #ffd166 50%, #ffae3d 74%, #ff8a1f 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#ffd166;
}
.msg.rainbow .t{background-image:linear-gradient(90deg, #ff7e96, #ffc46b, #ffe86b, #7fe89a, #6fd6ff, #b9a2ff)}
.msg.rainbow .g{text-shadow:0 0 8px rgba(255,255,255,.9), 0 0 20px rgba(255,126,182,.8), 0 0 38px rgba(76,201,240,.6), 0 4px 0 rgba(60,10,90,.6)}
.msg.ice .t{background-image:linear-gradient(180deg, #ffffff 0%, #d6ecff 40%, #9ad7ff 70%, #7aa8ff 100%)}
.msg.ice .g{text-shadow:0 0 8px rgba(230,245,255,.95), 0 0 20px rgba(120,180,255,.8), 0 0 38px rgba(80,120,255,.55), 0 4px 0 rgba(10,20,80,.6)}
.msg.candy .t{background-image:linear-gradient(180deg, #ffffff 0%, #ffd6f0 30%, #ff7eb6 70%, #c77dff 100%)}
.msg.candy .g{text-shadow:0 0 8px rgba(255,230,245,.95), 0 0 20px rgba(255,126,182,.8), 0 0 38px rgba(199,125,255,.55), 0 4px 0 rgba(80,10,60,.6)}

/* ===== NA ŠÍŘKU S MALOU VÝŠKOU: skóre a odznaky vlevo, tlačítko vpravo ===== */
@media (orientation:landscape) and (max-height:620px){
  :root{
    --stage-w:min(980px, 96vw);
    --score-fs:clamp(20px, min(4.6vw, 9vh), 50px);
    --slot:clamp(15px, min(6.6vh, 3.6vw), 36px);
    --btn:clamp(110px, 42vh, 230px);
  }
  .stage{
    display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;
    align-content:center;justify-items:center;column-gap:4vw;row-gap:clamp(8px, 3vh, 22px);
    padding-top:calc(var(--topbar-h) + env(safe-area-inset-top,0px) + 6px);
  }
  .scoreboard{grid-column:1;grid-row:1}
  .badges{grid-column:1;grid-row:2}
  .btn-zone{grid-column:2;grid-row:1 / 3}
}

/* ===== ÚSPORNÉ EFEKTY, KLID, OMEZENÝ POHYB ===== */
html[data-perf="low"] .sky .near,html.fx-lite .sky .near,
html[data-perf="low"] .sky .bright,html.fx-lite .sky .bright,
html[data-perf="low"] .scoreboard::before,html.fx-lite .scoreboard::before,
html[data-perf="low"] .slot.on svg,html.fx-lite .slot.on svg,
html[data-perf="low"] .btn-ring,html.fx-lite .btn-ring,
html[data-perf="low"] .crown.show,html.fx-lite .crown.show{animation:none}
html[data-perf="low"] .sky .shoot,html.fx-lite .sky .shoot{display:none}

html.is-idle *,html.is-idle *::before,html.is-idle *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .sky .shoot{display:none}
}