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

.game-wrap{max-width:1000px;margin-inline:auto}
.game-frame{
  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:none;user-select:none;-webkit-user-select:none;
}
.game-frame canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* 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:grid;place-items:center;text-align:center;
  background:rgba(14,75,69,.88);backdrop-filter:blur(3px);color:#fff;padding:1.4rem}
.ov[hidden]{display:none}
.ov-card{max-width:560px}
.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);
}
.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 (orientation:portrait) and (max-width:640px){.rotate-hint{display:block}}
@media (max-width:520px){#hudLevel{display:none}}
@media (max-width:400px){#hudTime{display:none}}