/* ==========================================================================
   KAPELEION — TAVERNA — js/kapeleion.js (27. 9. 2026)
   hlavička s ilustrací | [životy | taverní cooldown] | jídelníček (7+ karet
   na řádek podle šířky) | pravidla. Načítá se za thelyon-ui.css (tokeny
   --tl-*, .tl-panel, .tl-btn). Staré skiny `.parchment button:not(…)` mají
   váhu 0,4,1 → tlačítka jistí předpona :is(#centerContent,body).
   ========================================================================== */
.kt{
  container-type:inline-size;container-name:kt;
  color:var(--tl-text);font:400 15px/1.35 var(--tl-pismo-text);
}
.kt-mrizka{display:grid;gap:12px;min-width:0}
.kt-mince{width:18px;height:18px;vertical-align:-3px;margin-left:2px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.7))}
:is(#centerContent,body) .kt p{margin:0;color:#d9cdb2}
.kt-prazdno{padding:24px;text-align:center;display:grid;gap:12px;justify-items:center}

/* --- hlavička --- */
.kt-hlava{
  position:relative;overflow:hidden;min-height:clamp(140px,17cqw,190px);
  display:flex;align-items:center;
  background:#07080d;border:1px solid rgba(196,150,72,.55);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),0 6px 18px rgba(0,0,0,.55);
}
.kt-hlava-obr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% 60%}
.kt-hlava::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,5,4,.93) 0%,rgba(6,5,4,.72) 36%,rgba(6,5,4,.1) 64%,rgba(0,0,0,0) 82%),
    linear-gradient(0deg,rgba(6,5,4,.5),rgba(0,0,0,0) 35%);
}
.kt-hlava-text{position:relative;z-index:1;max-width:min(600px,64%);padding:18px 26px;display:grid;gap:8px}
:is(#centerContent,body) .kt-titul{margin:0;font:600 clamp(26px,3.6cqw,44px)/1.05 var(--tl-pismo-nadpis);letter-spacing:.05em;text-transform:uppercase}
.kt-titul span{background:linear-gradient(180deg,#fff8dc 0%,#f7dc8e 38%,#e0ac4c 70%,#b27a22 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 2px rgba(0,0,0,.9))}
:is(#centerContent,body) .kt-popis{font-size:16px;line-height:1.45;color:#eee2c6;text-shadow:0 1px 3px #000}

/* --- životy + cooldown --- */
.kt-horni{display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,30cqw,340px);gap:12px;align-items:stretch}
.kt-hp{padding:14px 18px 14px;display:grid;gap:8px;align-content:start}
.kt-hp-hlava,.kt-cd-hlava{display:flex;align-items:center;gap:10px;font:600 16px/1 var(--tl-pismo-nadpis);letter-spacing:.07em;text-transform:uppercase;color:var(--tl-text-zlaty);text-shadow:0 1px 3px #000}
.kt-hp-hlava .tl-ik{width:26px;height:26px;background:linear-gradient(180deg,#ff9a8a,#d2261c 55%,#6e0c0c)}
.kt-zlato{margin-left:auto;font:600 16px/1 var(--tl-pismo-text);letter-spacing:0;text-transform:none;color:#fff1c9;font-variant-numeric:tabular-nums}
.kt-zlato .kt-mince{margin:0 6px 0 0}
.kt-hp-cisla{display:flex;align-items:baseline;gap:14px}
.kt-hp-cisla b{font:700 30px/1 var(--tl-pismo-nadpis);color:#fff1c9;text-shadow:0 2px 3px #000;font-variant-numeric:tabular-nums}
.kt-hp-cisla em{font-style:normal;font-size:17px;color:#ffb3a6}
.kt-hp-lista{
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:22px;margin:0;
  background:#0b0808;border:1px solid rgba(196,150,72,.55);border-radius:11px;overflow:hidden;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.9);color:#d2261c;
}
.kt-hp-lista::-webkit-progress-bar{background:transparent}
.kt-hp-lista::-webkit-progress-value{
  border-radius:11px;background:linear-gradient(180deg,#ff8f6e 0%,#e03a26 45%,#9c1410 100%);
  box-shadow:0 0 12px rgba(255,90,60,.55),inset 0 1px 0 rgba(255,210,190,.45);transition:width .9s cubic-bezier(.2,.8,.2,1);
}
.kt-hp-lista::-moz-progress-bar{border-radius:11px;background:linear-gradient(180deg,#ff8f6e 0%,#e03a26 45%,#9c1410 100%)}
.kt-hp-lista.plno::-webkit-progress-value{background:linear-gradient(180deg,#ffb27a 0%,#e05a26 45%,#a8281a 100%)}
.kt-hp-pata{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
:is(#centerContent,body) .kt-hp-pozn{font-size:15.5px;color:#ffcfb8}
:is(#centerContent,body) .kt-hp-pozn.plno{color:#b9e8a4}
.kt-hp-pozn b{color:#fff1c9}
:is(#centerContent,body) .kt-safir{min-height:36px;padding:0 14px;font-size:14px}

.kt-cd{padding:14px 18px;display:grid;gap:8px;align-content:start;transition:border-color .3s ease,box-shadow .3s ease}
.kt-cd-hlava .tl-ik{width:24px;height:24px}
.kt-cd.bezi{border-color:#e6b95e;box-shadow:0 0 14px rgba(255,170,60,.25),inset 0 0 18px rgba(255,150,60,.08)}
.kt-cd-cas{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 12px;background:rgba(0,0,0,.4);border:1px solid rgba(196,150,72,.35)}
.kt-cd-cas span{font-size:15px;color:#e6dcc6}
.kt-cd-cas b{font:700 30px/1 var(--tl-pismo-nadpis);color:#ff8a6a;text-shadow:0 0 10px rgba(255,90,50,.45),0 2px 2px #000;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.kt-cd-cas.volno{justify-content:center}
.kt-cd-cas.volno b{font:600 17px/1.2 var(--tl-pismo-text);color:#b9e8a4;text-shadow:0 1px 2px #000;letter-spacing:0}
:is(#centerContent,body) .kt-cd-pozn{font-size:13.5px;color:var(--tl-text-tlumeny)}
:is(#centerContent,body) .kt-cd-posledni{font-size:14px}
.kt-cd-posledni b{color:#fff1c9;font-weight:600}

/* výsledek jídla / hláška */
.kt-vysledek{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:8px 12px;border:1px solid;animation:kt-vys .45s ease-out}
.kt-vysledek b{font:600 15px/1.1 var(--tl-pismo-nadpis);letter-spacing:.07em;text-transform:uppercase}
.kt-vysledek span{font-size:14.5px;color:#efe4cb}
.kt-vysledek em{font-style:normal;font-weight:700;color:#8df0a0}
.kt-vysledek.uspech{border-color:#8fd07a;background:linear-gradient(180deg,rgba(40,90,30,.55),rgba(10,24,8,.6));box-shadow:0 0 16px rgba(120,220,90,.25)}
.kt-vysledek.uspech b{color:#b9f5a1}
.kt-vysledek.info{border-color:#c9a14f;background:linear-gradient(180deg,rgba(80,58,16,.55),rgba(20,14,4,.6))}
.kt-vysledek.info b{color:#f3dc9c}
.kt-vysledek.chyba{border-color:#d0574a;background:linear-gradient(180deg,rgba(100,20,16,.55),rgba(26,6,5,.6))}
.kt-vysledek.chyba b{color:#ffb2a4}
@keyframes kt-vys{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
:is(#centerContent,body) .kt-chyba{padding:8px 12px;border:1px solid #d0574a;background:rgba(60,8,8,.6);color:#ffcfc6}

/* --- jídelníček --- */
.kt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:10px}
.kt-karta{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;
  padding:8px 8px 10px;box-sizing:border-box;text-align:center;
  background:radial-gradient(ellipse at 50% 20%,rgba(255,190,110,.08),transparent 60%),linear-gradient(180deg,#1b150f,#0a0806);
  border:1px solid rgba(196,150,72,.45);border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),0 4px 12px rgba(0,0,0,.5);
  transition:border-color .18s ease,transform .18s ease,filter .3s ease,opacity .3s ease;
}
.kt-karta:hover{border-color:rgba(243,207,122,.9);transform:translateY(-2px)}
.kt-obr{width:100%;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(160,120,60,.4);background:#120d08;box-shadow:inset 0 0 12px rgba(0,0,0,.8)}
.kt-obr img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.kt-karta:hover .kt-obr img{transform:scale(1.05)}
:is(#centerContent,body) .kt-nazev{margin:4px 0 0;font:600 15.5px/1.15 var(--tl-pismo-text);color:#fff1c9;letter-spacing:0;text-transform:none;min-height:2.3em;display:flex;align-items:center;justify-content:center}
.kt-ucinek{font-size:14.5px;font-weight:600;color:#74e08a}
.kt-efekt{font-size:13.5px;color:#cbbd9d}
.kt-efekt small{font-size:12px;color:var(--tl-text-tlumeny)}
.kt-cena{display:flex;align-items:center;gap:2px;font-size:16px;font-weight:600;color:#fff1c9;font-variant-numeric:tabular-nums}
.kt-cena.malo{color:#ff6f5e}
:is(#centerContent,body) .kt-snist{
  width:100%;min-height:36px;margin-top:4px;padding:0 8px;gap:6px;
  font:600 15px/1 var(--tl-pismo-nadpis);letter-spacing:.08em;text-transform:uppercase;
}
.kt-snist .tl-ik{width:16px;height:16px}
.kt-btn-cas{font-variant-numeric:tabular-nums;letter-spacing:.04em}
/* stavy karty */
.kt-karta.cd,.kt-karta.plno{filter:saturate(.55) brightness(.78)}
.kt-karta.cd:hover,.kt-karta.plno:hover{filter:saturate(.8) brightness(.92)}
.kt-karta.snedeno{filter:none;border-color:#8fd07a;box-shadow:0 0 0 1px #2f5a1f,0 0 16px rgba(120,220,90,.35)}
:is(#centerContent,body) .kt-karta.snedeno .kt-snist{color:#d6f7c8;border-color:#6ea85a;background:linear-gradient(180deg,#2f5a22,#15300e);font-size:13.5px;letter-spacing:.03em;opacity:1}
.kt-karta.pop{animation:kt-pop .6s ease-out}
.kt-karta.pop .kt-obr img{animation:kt-snez .6s ease-out}
@keyframes kt-pop{0%{box-shadow:0 0 0 1px #2f5a1f,0 0 0 rgba(120,220,90,0)}40%{box-shadow:0 0 0 2px #8fd07a,0 0 28px rgba(120,220,90,.7)}100%{box-shadow:0 0 0 1px #2f5a1f,0 0 16px rgba(120,220,90,.35)}}
@keyframes kt-snez{0%{transform:scale(1)}35%{transform:scale(.9)}100%{transform:scale(1)}}
.kt-tocka{width:14px;height:14px;border:2px solid rgba(255,230,200,.35);border-top-color:#ffe9dc;border-radius:50%;animation:kt-toc .8s linear infinite}
@keyframes kt-toc{to{transform:rotate(360deg)}}

/* pravidla dole */
:is(#centerContent,body) .kt-pravidla{
  display:flex;align-items:flex-start;gap:10px;padding:10px 14px;font-size:14.5px;line-height:1.45;
  background:linear-gradient(180deg,rgba(14,17,26,.92),rgba(7,9,14,.92));border:1px solid rgba(196,150,72,.35);
}
.kt-pravidla .tl-ik{flex:0 0 auto;width:20px;height:20px;margin-top:1px}
.kt-pravidla b{color:#fff1c9}
.kt-odkaz{color:#f1cd72;text-decoration:underline;white-space:nowrap}
.kt-tip-hlava{background:linear-gradient(180deg,#5b3a12,#1a1409)}

/* --- úzké okno a mobil: životy, pod nimi vždy viditelný cooldown, 1–2 karty --- */
@container kt (max-width:760px){
  .kt-horni{grid-template-columns:1fr}
  .kt-cd{padding:8px 12px;gap:4px;grid-template-columns:auto 1fr;align-items:center}
  .kt-cd-hlava span,.kt-cd-pozn,.kt-cd-posledni{display:none}
  .kt-cd-cas{padding:0;background:none;border:0}
  .kt-cd-cas.volno{justify-content:flex-start}
  .kt-hlava-text{max-width:100%;padding:14px 16px}
  .kt-hp-cisla b{font-size:26px}
  .kt-cd-cas b{font-size:24px}
  .kt-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  :is(#centerContent,body) .kt-snist{min-height:44px;font-size:16px}
}
/* Mobil: odpočet plave dole, ať je vidět i při posouvání jídelníčku. Je MIMO .kt
   (container-type by z něj udělal obal pro position:fixed) a sticky nejde,
   protože body má vlastní overflow. */
.kt-plovak{display:none}
@media (max-width:820px){
  .kt-plovak{
    position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;transform:translateX(-50%);
    display:flex;align-items:center;gap:8px;padding:8px 16px;white-space:nowrap;pointer-events:none;
    font:500 15px/1 var(--tl-pismo-text);color:#e6dcc6;
    background:linear-gradient(180deg,rgba(28,22,14,.96),rgba(10,8,6,.96));
    border:1px solid #e6b95e;border-radius:22px;box-shadow:0 6px 18px rgba(0,0,0,.7),0 0 12px rgba(255,170,60,.25);
  }
  .kt-plovak .tl-ik{width:18px;height:18px}
  .kt-plovak b{font:700 19px/1 var(--tl-pismo-nadpis);color:#ff8a6a;font-variant-numeric:tabular-nums}
}
@container kt (max-width:299px){
  .kt-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .kt-karta.pop,.kt-karta.pop .kt-obr img,.kt-vysledek,.kt-tocka{animation:none}
  .kt-hp-lista::-webkit-progress-value{transition:none}
}