/* Hra o bonbon — styly herního rámu a overlayů */

.game-wrap{max-width:1000px;margin-inline:auto}
.game-frame{
  container-type:size;
  position:relative;width:100%;aspect-ratio:16/9;
  background:#35603C;border-radius:22px;overflow:hidden;
  border:6px solid #fff;box-shadow:var(--shadow-m);
  touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
.game-frame canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* HUD */
.hud{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:.5rem;align-items:center;z-index:3;pointer-events:none}
.hud .pill{
  pointer-events:auto;display:inline-flex;align-items:center;gap:.4em;
  background:rgba(255,255,255,.92);border-radius:999px;padding:.3em .8em;
  font-family:var(--font-head);font-weight:600;font-size:.92rem;color:var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.hud .spacer{flex:1}
.hud button.pill{border:0;cursor:pointer}
.hud button.pill:hover{background:#fff}
#hudHearts span{color:#CE565E;font-size:1.05rem;line-height:1}
#hudHearts span.off{color:#CFDCE4}

/* Dotyková tlačítka */
.touch{position:absolute;inset:auto 0 0 0;display:none;justify-content:space-between;align-items:flex-end;padding:14px;z-index:3;pointer-events:none}
.touch .grp{display:flex;gap:12px;pointer-events:none}
.touch button{
  pointer-events:auto;width:66px;height:66px;border-radius:50%;border:0;
  background:rgba(255,255,255,.28);color:#fff;font-size:1.7rem;font-weight:800;
  backdrop-filter:blur(2px);box-shadow:0 3px 10px rgba(0,0,0,.25);
  display:grid;place-items:center;
}
.touch button:active{background:rgba(255,255,255,.5)}
.game-frame.is-touch .touch{display:flex}

/* Overlaye */
.ov{position:absolute;inset:0;z-index:5;display:flex;text-align:center;
  background:rgba(14,75,69,.88);backdrop-filter:blur(3px);color:#fff;padding:1.4rem;
  overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.ov[hidden]{display:none}
/* margin:auto = na střed, když se vejde; nahoru a posouvat, když ne */
.ov-card{max-width:560px;width:100%;margin:auto}
.ov h2{color:#fff;margin-bottom:.4em}
.ov p{color:#DCEAE0}
.ov .btn{margin-top:.6rem}
.ov-splash h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.legend{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:1rem 0 0;padding:0;list-style:none}
.legend li{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:.35em .9em;font-size:.88rem;font-weight:700}

/* Formulář */
.lead-form{display:grid;gap:.8rem;max-width:420px;margin:1rem auto 0;text-align:left}
.lead-form input[type=email]{
  width:100%;padding:.85em 1.1em;border-radius:14px;border:2px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.95);font:inherit;font-weight:700;color:var(--ink);
  font-size:max(16px,1rem); /* pod 16 px iPhone při psaní přiblíží stránku */
  scroll-margin:5rem;
}
.lead-form input[type=email]:focus{outline:3px solid var(--sun)}
.lead-form label.chk{display:flex;gap:.6em;align-items:flex-start;font-size:.86rem;color:#DCEAE0;cursor:pointer}
.lead-form label.chk input{margin-top:.25em;width:18px;height:18px;accent-color:var(--sun)}
.lead-form .err{color:#F8CDD3;font-size:.85rem;font-weight:700;min-height:1.2em;margin:0}
.skip-link{display:inline-block;margin-top:.9rem;color:#C6DFC4;font-size:.86rem}

/* Výherní obrazovka */
.win-candy{font-size:4rem;line-height:1;animation:candyBounce 1.1s ease-in-out infinite}
@keyframes candyBounce{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(6deg)}}
.live-box{
  margin:1rem auto 0;background:rgba(255,255,255,.96);color:var(--ink);
  border-radius:18px;padding:1rem 1.4rem;max-width:360px;box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.live-tag{display:inline-flex;align-items:center;gap:.45em;font-weight:800;font-size:.8rem;letter-spacing:.1em;color:var(--alert)}
.live-tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--alert);animation:livePulse 1s infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.25}}
#liveDate{font-weight:800;color:var(--ink-soft);font-size:.95rem;margin:.2em 0 0}
#liveTime{font-family:var(--font-head);font-weight:700;font-size:2.6rem;line-height:1.1;font-variant-numeric:tabular-nums}
.win-note{font-size:.9rem;color:#DCEAE0;max-width:34em;margin:1rem auto 0}

@media (prefers-reduced-motion:reduce){
  .win-candy,.live-tag::before{animation:none}
}

/* --- Razítko dohrání --- */
.live-tag.done{color:var(--teal-deep)}
.live-tag.done::before{background:var(--teal);animation:none}

/* --- Žebříček (jen toto zařízení) --- */
.board{margin:1.1rem auto 0;max-width:320px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:.85rem 1.1rem;text-align:left}
.board h3{color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 .5em;text-align:center}
.board table{width:100%;border-collapse:collapse;font-size:.95rem;color:#E9F2E9}
.board td{padding:.22em 0;font-weight:800}
.board td.n{font-family:var(--font-head);letter-spacing:.18em}
.board td.r{opacity:.75;width:1.6em}
.board td.v,.board td.t{text-align:right;font-variant-numeric:tabular-nums}
.board td.t{opacity:.85;padding-left:.7em}
.board tr.me td{color:var(--sun)}
.board .board-note{font-size:.72rem;opacity:.7;margin:.5em 0 0;text-align:center;color:#DCEAE0}

/* --- Zápis rekordu --- */
.rec-form{margin-top:1rem}
.rec-title{font-weight:800;color:#FCE9B8;margin:0 0 .5em}
.rec-row{display:flex;gap:.6rem;justify-content:center}
.rec-row input{
  width:110px;text-align:center;border:0;border-radius:14px;padding:.5em .4em;
  font-family:var(--font-head);font-weight:700;font-size:1.35rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink);background:#fff;
}
.rec-row input:focus{outline:3px solid var(--sun)}

/* --- Mobilní pohodlí --- */
.rotate-hint{display:none;text-align:center;font-weight:800;color:var(--ink-soft);margin:0 0 .8rem}
@media (pointer:coarse){.rotate-hint{display:block}}
/* na telefonu na výšku je náhled hry vyšší, aby se vešla úvodní karta */
@media (orientation:portrait) and (max-width:640px){.game-frame{aspect-ratio:4/5}}
@media (max-width:520px){#hudLevel{display:none}}
@media (max-width:400px){#hudTime{display:none}}


/* =====================================================================
   MOBIL: hra přes celou obrazovku (třídu .is-fs přidává game.js po „Hrát“)
   ===================================================================== */
html.game-fs,html.game-fs body{overflow:hidden;overscroll-behavior:none}
.game-frame.is-fs{
  position:fixed;inset:0;z-index:1000;
  width:100%;height:100vh;height:100dvh;max-width:none;aspect-ratio:auto;
  margin:0;border:0;border-radius:0;box-shadow:none;
}
/* ✕ = zavřít hru; leží nad překryvy, takže jde zavřít kdykoli */
.hud-exit{
  display:none;position:absolute;z-index:8;
  top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,.94);color:var(--ink);font:700 1.25rem/1 var(--font-head);
  box-shadow:0 2px 8px rgba(0,0,0,.22);touch-action:manipulation;
}
.game-frame.is-fs .hud-exit{display:inline-flex}
.game-frame.is-fs .hud{
  top:max(8px,env(safe-area-inset-top));
  left:max(8px,env(safe-area-inset-left));right:calc(max(8px,env(safe-area-inset-right)) + 52px);
  margin-top:4px;
}
.game-frame.is-fs .ov{
  overscroll-behavior:contain;
  padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right))
          max(1.4rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
}

/* dotyková tlačítka — větší, se zpětnou vazbou při stisku */
.touch,.touch *{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.touch button{width:74px;height:74px;font-size:1.9rem;transition:transform .06s,background .06s}
.touch button.on{background:rgba(255,255,255,.55);transform:scale(.94)}
.game-frame.is-fs .touch{
  padding:12px max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
.game-frame.is-fs .touch .grp{gap:16px}
.game-frame.is-fs #btnJ{width:88px;height:88px}

/* na výšku: tlačítka v pruhu POD hrou, nic nezakrývají */
@media (orientation:portrait){
  .game-frame.is-fs.is-touch{--ctl-h:calc(132px + env(safe-area-inset-bottom))}
  .game-frame.is-fs.is-touch canvas{height:calc(100% - var(--ctl-h))}
  .game-frame.is-fs .ov{padding-top:max(3.6rem,env(safe-area-inset-top))}
  .game-frame.is-fs.is-touch .touch{
    height:var(--ctl-h);align-items:center;pointer-events:auto;
    background:linear-gradient(#2E5233,#24402A);
    box-shadow:0 -2px 10px rgba(0,0,0,.25) inset;
  }
  .game-frame.is-fs.is-touch .touch button{width:86px;height:86px;background:rgba(255,255,255,.18)}
  .game-frame.is-fs.is-touch #btnJ{width:100px;height:100px}
  .game-frame.is-fs.is-touch .touch button.on{background:rgba(255,255,255,.42)}
}

/* na celé obrazovce průhledná tlačítka bez rozmazání — postavička je vidět i pod nimi */
.game-frame.is-fs .touch button{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.6);
}
.game-frame.is-fs .touch button.on{background:rgba(255,255,255,.45)}
/* telefon na šířku: o kousek menší tlačítka, ať zbude víc hry */
@media (orientation:landscape) and (max-height:430px){
  .game-frame.is-fs .touch button{width:66px;height:66px;font-size:1.7rem}
  .game-frame.is-fs #btnJ{width:80px;height:80px}
  .game-frame.is-fs .touch{padding-top:8px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
}

/* souhlas u e-mailu: text i odkaz plynou v jednom odstavci vedle zaškrtávátka */
.lead-form label.chk{display:block;position:relative;padding-left:1.9em}
.lead-form label.chk input{position:absolute;left:0;top:.05em;margin:0}

/* malé plochy (náhled na telefonu, telefon na šířku): kompaktní karty */
@container (max-height:470px){
  .ov{padding:1rem}
  .ov h2{font-size:1.45rem;margin-bottom:.25em}
  .ov p{font-size:.95rem;margin-bottom:.5em}
  .legend{gap:.35rem;margin-top:.5rem}
  .legend li{font-size:.78rem;padding:.25em .7em}
  .ov .small{display:none}
  .ov .btn-big{font-size:1.05rem;padding:.75em 1.5em}
  .win-candy{font-size:2.6rem}
  .live-box{margin-top:.6rem;padding:.55rem 1rem}
  #liveTime{font-size:1.9rem}
  .board{margin-top:.7rem;padding:.6rem .9rem}
  .win-note{margin-top:.6rem}
  .lead-form{margin-top:.6rem;gap:.55rem}
}
@container (max-height:300px){
  .legend{display:none}
}