/* Holubí pouť (page-hra.php, pohyb assets/js/hra.js).
   Plátno kreslí hru, všechno čitelné (HUD, příběh, stánek, konec) je HTML
   nad ním. Bez CSS zoom (Safari na iPhonu ho počítá jinak), velikosti jsou
   v jednotkách kontejneru. Načítá se jen na stránce hry. */

.hr-page{--hr-navy:#141B4D;--hr-m1:#44519A;--hr-m2:#3B4789;--hr-or:#F0552B;--hr-lav:#EFEDFB;color:var(--body)}
.hr-page .wrap{max-width:1232px}
.hr-uvod{padding:56px 0 30px}
.hr-uvod h1{margin:0;color:var(--ink);font-size:clamp(40px,5vw,66px);line-height:1.04;letter-spacing:-.04em}
.hr-uvod p{max-width:62ch;margin:20px 0 0;font-size:21px;line-height:1.6;text-wrap:pretty}

/* ---------- herní plocha ---------- */
.hr-sekce{padding:0 0 64px}
.hr{position:relative;aspect-ratio:16/10;max-height:calc(100vh - var(--hdr-h) - 32px);min-height:420px;margin:0 auto;border-radius:24px;overflow:hidden;container-type:size;
  background:linear-gradient(180deg,var(--hr-m1) 0%,#404D94 55%,var(--hr-m2) 100%);color:#fff;
  box-shadow:0 34px 60px -34px rgba(8,12,44,.7);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.hr:focus-visible{outline:3px solid var(--hr-or);outline-offset:4px}
.hr-platno{position:absolute;inset:0;width:100%;height:100%;display:block}
.hr--hraje .hr-platno{touch-action:none;cursor:none}

/* HUD: skóre, čas, série, pírka */
.hr-hud{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;padding:clamp(12px,2.2cqw,22px) clamp(14px,2.6cqw,26px);pointer-events:none}
.hr-hud[hidden]{display:none}
.hr-hud b{display:block;font-size:clamp(20px,3cqw,30px);line-height:1;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hr-hud small{display:block;margin-top:5px;font-size:clamp(11px,1.5cqw,14px);font-weight:700;color:#D9DBF0}
.hr-hud-cas{justify-self:center;padding:9px 18px;border-radius:999px;background:rgba(20,27,77,.42);text-align:center}
.hr-hud-cas.malo b{color:#FFB59F}
.hr-hud-p{justify-self:end;text-align:right}
.hr-hud-rada{display:flex;gap:clamp(12px,2.4cqw,26px)}
.hr-hud-p .hr-hud-rada{justify-content:flex-end}
.hr-cil{display:block;width:clamp(96px,17cqw,170px);height:6px;margin-top:8px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.hr-cil i{display:block;height:100%;border-radius:inherit;background:var(--hr-or);transform-origin:0 50%}
.hr-cil.ma i{background:#fff}
.hr-tl{pointer-events:auto;display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border:0;border-radius:999px;background:rgba(20,27,77,.5);color:#fff;font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.hr-tl[hidden]{display:none}
.hr-tl:focus-visible{outline:3px solid #FFB59F;outline-offset:2px}
.hr-dole{position:absolute;left:clamp(12px,2.4cqw,24px);right:clamp(12px,2.4cqw,24px);bottom:clamp(12px,2.2cqw,20px);display:flex;justify-content:space-between;gap:10px;pointer-events:none}
.hr-dole[hidden]{display:none}
.hr-tl--cas{background:var(--hr-or)}

/* krátká hláška na začátku levelu */
.hr-hlaska{position:absolute;left:50%;top:26%;translate:-50% 0;width:max-content;max-width:88%;padding:14px 24px;border-radius:18px;background:#fff;color:var(--hr-navy);
  font-size:clamp(17px,2.6cqw,24px);font-weight:800;letter-spacing:-.02em;line-height:1.3;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,translate .35s cubic-bezier(.2,.75,.25,1)}
.hr-hlaska.je{opacity:1;translate:-50% -8px}
.hr-hlaska small{display:block;margin-top:3px;font-size:.72em;font-weight:600;color:#434970}

/* ---------- obrazovky nad plátnem ---------- */
/* flex + margin:auto: obrazovka je na středu, a když se nevejde, dá se k ní dorolovat celé */
.hr-ui{position:absolute;inset:0;display:flex;padding:clamp(12px,2.6cqw,30px);background:rgba(20,27,77,.5);overflow:auto}
.hr-ui[hidden]{display:none}
.hr-obr{width:min(100%,640px);margin:auto;padding:clamp(20px,3.4cqw,36px);border-radius:24px;background:#fff;color:var(--body);text-align:center}
.hr-obr--stanek{width:min(100%,860px)}
.hr-obr h2{margin:0;color:var(--ink);font-size:clamp(28px,5cqw,44px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.hr-obr p{margin:14px auto 0;max-width:44ch;font-size:clamp(16px,2.2cqw,19px);line-height:1.55;text-wrap:pretty}
.hr-obr .hr-velke{color:var(--ink);font-size:clamp(20px,3.2cqw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.35}
.hr-nacitani{margin:0!important;font-weight:700}
.hr-akce{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.hr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;border:0;border-radius:999px;background:var(--hr-or);color:#fff;font:inherit;font-size:16px;font-weight:800;text-decoration:none;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.hr-btn--tichy{background:var(--hr-lav);color:var(--hr-navy)}
.hr-btn:focus-visible{outline:3px solid var(--purple,#5B4AD8);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.hr-btn:hover{transform:translateY(-2px)}}
.hr-cisla{display:flex;justify-content:center;gap:clamp(18px,5cqw,48px);margin-top:22px}
.hr-cisla div b{display:block;color:var(--ink);font-size:clamp(30px,6cqw,52px);line-height:1;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.hr-cisla div span{display:block;margin-top:6px;font-size:14px;font-weight:700}
.hr-rekord{display:inline-block;margin-top:16px;padding:6px 14px;border-radius:999px;background:var(--hr-or);color:#fff;font-size:14px;font-weight:800}

/* příběh: holub a jedna velká věta */
.hr-obr.hr-obr--pribeh{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center;gap:clamp(14px,3cqw,30px);width:min(100%,760px);text-align:left}
.hr-pribeh-obr{aspect-ratio:1;border-radius:20px;background:var(--hr-lav);overflow:hidden;display:grid;place-items:center}
.hr-pribeh-obr img{width:118%;max-width:none;height:auto;translate:6% 4%}
.hr-obr--pribeh p{margin:0;max-width:none}
.hr-obr--pribeh .hr-akce{justify-content:flex-start}
.hr-krok{display:flex;gap:6px;margin-top:20px}
.hr-krok i{width:22px;height:5px;border-radius:3px;background:#DCD9F3}
.hr-krok i.je{background:var(--hr-navy)}
@keyframes hr-vstup{from{opacity:0;translate:0 14px}}
.hr-obr{animation:hr-vstup .4s cubic-bezier(.2,.75,.25,1) both}

/* stánek s vylepšeními */
.hr-stanek{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px;text-align:left}
@container (max-width:620px){.hr-stanek{grid-template-columns:minmax(0,1fr)}}
.hr-vyl{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 12px;width:100%;padding:12px 16px;border:0;border-radius:16px;background:var(--hr-lav);color:var(--body);font:inherit;text-align:left;cursor:pointer}
.hr-vyl b{color:var(--ink);font-size:17px;font-weight:800;letter-spacing:-.02em}
.hr-vyl span{grid-column:1;font-size:14.5px;line-height:1.4}
.hr-vyl em{grid-area:1/2/3/3;font-style:normal;padding:7px 13px;border-radius:999px;background:var(--hr-navy);color:#fff;font-size:14px;font-weight:800;white-space:nowrap}
.hr-vyl[disabled]{cursor:default;opacity:.55}
.hr-vyl.ma{opacity:1;background:#F6F5FD}
.hr-vyl.ma em{background:none;color:var(--hr-navy);padding-inline:0}
.hr-vyl:focus-visible{outline:3px solid var(--purple,#5B4AD8);outline-offset:2px}

/* ---------- jak se hraje (pod hrou, skutečný text) ---------- */
.hr-jak{padding:24px 0 96px}
.hr-jak h2{margin:0 0 30px;color:var(--ink);font-size:clamp(30px,3.2vw,42px);letter-spacing:-.035em;line-height:1.1;text-align:center}
.hr-jak ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.hr-jak li{padding:30px 30px 32px;border-radius:22px;background:var(--lav,#EFEDFB)}
.hr-jak li:nth-child(2){background:var(--hr-navy);color:#C9CCEA}
.hr-jak li:nth-child(2) h3{color:#fff}
.hr-jak h3{margin:0;color:var(--ink);font-size:22px;letter-spacing:-.025em}
.hr-jak p{margin:10px 0 0;font-size:17px;line-height:1.6}

@media(max-width:860px){
  .hr-jak ul{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .hr-page .wrap{padding:0 16px}
  .hr-uvod{padding:36px 0 22px}
  .hr-uvod p{font-size:18px}
  /* na telefonu je plocha na výšku */
  .hr{aspect-ratio:3/4.5;max-height:calc(100svh - var(--hdr-h) - 20px);min-height:0;border-radius:18px}
  .hr-obr.hr-obr--pribeh{grid-template-columns:minmax(0,1fr);text-align:center}
  .hr-pribeh-obr{width:min(58%,220px);margin:0 auto}
  .hr-obr--pribeh .hr-akce{justify-content:center}
  .hr-krok{justify-content:center}
  .hr-hud-rada{gap:12px}
  .hr-sekce{padding-bottom:44px}
  .hr-jak{padding-bottom:64px}
}
@media(prefers-reduced-motion:reduce){
  .hr-obr{animation:none}
  .hr-hlaska,.hr-btn{transition:none}
}