/* ==========================================================================
   MISTR ELIXÍRŮ — js/mistr-elixiru.js (zpřehledněno 23. 10. 2026, v=536100)
   [hlavička] [5 karet statů = jediný výběr]
   [recept: Vložíš → šance → Získáš + tlačítko | přísady]
   [žebřík úrovní                               | jak to funguje]
   Načítá se za thelyon-ui.css (tokeny --tl-*, .tl-panel, .tl-btn).
   Staré skiny `.parchment button:not(…)` mají váhu 0,4,1 → vlastní tlačítka
   jistí předpona :is(#centerContent,body). Písmo v px, bloky přes cqw.
   ========================================================================== */
.me{
  container-type:inline-size;container-name:me;
  display:grid;gap:12px;
  color:var(--tl-text);font:400 15px/1.35 var(--tl-pismo-text);font-size-adjust:none;
}
.me-mince{width:18px;height:18px;vertical-align:-3px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.7))}
.me-zelena{color:#74e08a}
:is(#centerContent,body) .me-h{
  margin:0;font:600 16px/1.2 var(--tl-pismo-nadpis);letter-spacing:.06em;text-transform:uppercase;
  color:var(--tl-text-zlaty);text-shadow:0 1px 3px #000;
}
:is(#centerContent,body) .me p{margin:0;color:#ddd1b6}
:is(#centerContent,body) .me-pozn{font-size:13.5px;color:var(--tl-text-tlumeny)}
:is(#centerContent,body) .me-pozn-var{color:#f0b56a}
.me-prazdno{padding:24px;text-align:center;display:grid;gap:12px;justify-items:center}

/* barvy statů */
.me-b-cervena{--b1:#ff8a6a;--b2:#d2261c;--b3:#3d0c0b}
.me-b-zlata{--b1:#ffd772;--b2:#e0930f;--b3:#36240a}
.me-b-zelena{--b1:#86f297;--b2:#27a843;--b3:#0c2c13}
.me-b-modra{--b1:#79c6ff;--b2:#1167e0;--b3:#0b1b3d}
.me-b-fialova{--b1:#cf98ff;--b2:#8a2ee6;--b3:#220e3d}

/* --- hlavička: nízký pruh s ilustrací --- */
.me-hlava{
  position:relative;overflow:hidden;min-height:118px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  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);
}
.me-hlava-obr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 42%}
.me-hlava::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,6,10,.95) 0%,rgba(5,6,10,.78) 38%,rgba(5,6,10,.1) 70%,rgba(5,6,10,.55) 100%);
}
.me-hlava-text{position:relative;z-index:1;padding:16px 24px;display:grid;gap:4px}
:is(#centerContent,body) .me-titul{margin:0;font:600 clamp(26px,3.4cqw,40px)/1.05 var(--tl-pismo-nadpis);letter-spacing:.05em;text-transform:uppercase}
.me-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) .me-popis{font-size:16px;color:#eadfc3;text-shadow:0 1px 3px #000}
.me-hlava-chipy{position:relative;z-index:1;display:flex;gap:8px;padding:0 18px;flex-wrap:wrap;justify-content:flex-end}
:is(#centerContent,body) .me-chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  background:rgba(8,9,14,.82);border:1px solid rgba(214,168,71,.55);border-radius:999px;
  font:600 14px/1 var(--tl-pismo-nadpis);color:#f6e4b0;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.6);
}
.me-chip .tl-ik{width:16px;height:16px;background:#f1cd72}
:is(#centerContent,body) .me-chip-odkaz:hover{border-color:#f1cd72;color:#fff}

/* --- karty statů --- */
.me-staty{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
:is(#centerContent,body) .me-sk{
  all:unset;box-sizing:border-box;cursor:pointer;position:relative;
  display:flex;align-items:center;gap:10px;padding:10px 12px;min-width:0;
  background:linear-gradient(180deg,rgba(22,24,34,.96),rgba(10,11,16,.96));
  border:1px solid rgba(196,150,72,.35);border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 3px 10px rgba(0,0,0,.45);
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
:is(#centerContent,body) .me-sk:hover{border-color:var(--b1);transform:translateY(-2px)}
:is(#centerContent,body) .me-sk:focus-visible{outline:2px solid var(--b1);outline-offset:2px}
:is(#centerContent,body) .me-sk.active{
  border-color:var(--b1);
  background:linear-gradient(180deg,color-mix(in srgb,var(--b3) 85%,#000) 0%,rgba(10,11,16,.96) 100%);
  box-shadow:inset 0 -3px 0 var(--b2),0 0 18px color-mix(in srgb,var(--b2) 45%,transparent),0 3px 10px rgba(0,0,0,.45);
}
.me-sk-lahev{flex:0 0 auto;width:46px;height:52px;display:grid;place-items:center}
.me-sk-ik{width:46px;height:52px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.85))}
.me-sk.prazdny .me-sk-ik{filter:grayscale(.75) brightness(.7) drop-shadow(0 2px 4px rgba(0,0,0,.85))}
.me-sk-txt{display:grid;gap:3px;min-width:0}
.me-sk-txt b{font:600 15px/1.1 var(--tl-pismo-nadpis);letter-spacing:.04em;color:#f6ead0}
.me-sk-stav,.me-sk-ef{font-size:12.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-sk-stav{color:var(--tl-text-tlumeny)}
.me-sk-ef{color:#8df0a0}
.me-pipy{display:flex;gap:4px}
.me-pipy i{width:8px;height:8px;transform:rotate(45deg);border:1px solid color-mix(in srgb,var(--b1) 60%,#555);background:rgba(0,0,0,.4)}
.me-pipy i.plny{background:linear-gradient(135deg,var(--b1),var(--b2));border-color:var(--b1);box-shadow:0 0 5px var(--b2)}

/* --- rozvržení --- */
.me-mrizka{display:grid;grid-template-columns:minmax(0,1fr) clamp(230px,24cqw,290px);gap:12px;align-items:start}
.me-hlavni,.me-bok{display:grid;gap:12px;min-width:0}

/* --- recept --- */
.me-recept{padding:16px 18px;display:grid;gap:14px}
.me-recept-h{font-size:18px}
.me-sipka-txt{color:var(--b1);padding:0 4px}
.me-recept-mrizka{display:grid;grid-template-columns:minmax(0,1.25fr) auto minmax(0,1fr);gap:16px;align-items:center}
.me-stitek{display:block;margin-bottom:8px;font:600 12px/1 var(--tl-pismo-nadpis);letter-spacing:.14em;text-transform:uppercase;color:var(--tl-text-tlumeny)}
.me-polozky{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.me-pol{
  display:grid;grid-template-columns:32px minmax(0,1fr) auto 20px;align-items:center;gap:10px;
  padding:6px 10px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.07);border-left:3px solid #4ea85e;border-radius:4px;
}
.me-pol.ne{border-left-color:#d0574a;background:rgba(80,14,10,.28)}
.me-pol-ik{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.me-pol-nazev{font-size:15px;color:#efe4cb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-pol-pocet{font:600 14px/1 var(--tl-pismo-nadpis);color:#cfeac9;white-space:nowrap}
.me-pol.ne .me-pol-pocet{color:#ff9d8f}
.me-pol-znak{width:16px;height:16px;border-radius:50%;background:#3d9a52;position:relative}
.me-pol-znak::after{content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #e9ffe9;border-width:0 2px 2px 0;transform:rotate(45deg)}
.me-pol.ne .me-pol-znak{background:#b8392d}
.me-pol.ne .me-pol-znak::after{left:7px;top:3px;width:2px;height:10px;border:0;background:#ffe6e2;transform:none;box-shadow:0 0 0 0 transparent}

.me-stred{display:grid;justify-items:center}
.me-kruh{position:relative;width:96px;height:96px;display:grid;place-items:center;align-content:center}
.me-kruh svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.me-kruh circle{fill:none;stroke-width:7}
.me-kruh-pod{stroke:rgba(255,255,255,.1)}
.me-kruh-hod{stroke:var(--b1);stroke-linecap:round;filter:drop-shadow(0 0 4px var(--b2))}
.me-kruh b{position:relative;font:600 24px/1 var(--tl-pismo-nadpis);color:#fff3d0}
.me-kruh b small{font-size:13px;margin-left:1px}
.me-kruh em{position:relative;font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tl-text-tlumeny)}

.me-ziskas{
  display:grid;justify-items:center;text-align:center;gap:4px;padding:12px 10px;border-radius:6px;
  background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--b2) 28%,transparent),transparent 70%),rgba(0,0,0,.3);
  border:1px solid color-mix(in srgb,var(--b1) 55%,transparent);
}
.me-ziskas .me-stitek{margin-bottom:2px}
.me-ziskas-nazev{font:600 16px/1.2 var(--tl-pismo-nadpis);color:#f6ead0}
.me-ziskas-bonus{font:600 30px/1 var(--tl-pismo-nadpis);color:#8df0a0;text-shadow:0 0 12px rgba(80,220,110,.35)}
.me-ziskas-bonus small{font-size:15px;color:#dff5df}
.me-ziskas-cas{display:inline-flex;align-items:center;gap:5px;font-size:14px;color:#e5d7b5}
.me-ziskas-cas .tl-ik{width:15px;height:15px;background:#e5d7b5}
.me-ziskas-rozdil{font-size:12.5px;color:var(--tl-text-tlumeny)}

.me-akce{display:grid;gap:6px;justify-items:center}
:is(#centerContent,body) .me-vylepsit{min-width:min(100%,380px);min-height:50px;font-size:17px;gap:10px}
.me-vylepsit .tl-ik{width:24px;height:24px;background:linear-gradient(180deg,#fff3c4,#d6a847)}
:is(#centerContent,body) .me-duvod{font-size:13.5px;color:var(--tl-text-tlumeny);text-align:center}
:is(#centerContent,body) .me-duvod.brani{color:#ff9d8f;font-weight:600}
.me-tocka{width:18px;height:18px;border:2px solid rgba(255,230,200,.35);border-top-color:#ffe9dc;border-radius:50%;animation:me-toc .8s linear infinite}
@keyframes me-toc{to{transform:rotate(360deg)}}

/* stav bez receptu (úroveň I / maximum) */
.me-stav-box{display:flex;align-items:center;gap:18px;padding:6px 4px}
.me-stav-box > div{display:grid;gap:6px}
.me-stav-box.max .me-h{color:#ffd772}

/* výsledek posledního vaření */
.me-vysledek{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 12px;padding:10px 12px;text-align:center;border:1px solid;border-radius:4px;animation:me-vys .45s ease-out}
.me-vysledek b{font:600 15.5px/1.1 var(--tl-pismo-nadpis);letter-spacing:.07em;text-transform:uppercase}
.me-vysledek span{font-size:14.5px;color:#efe4cb}
.me-vysledek em{font-style:normal;font-weight:600;color:#8df0a0}
.me-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,.3)}
.me-vysledek.uspech b{color:#b9f5a1}
.me-vysledek.neuspech,.me-vysledek.chyba{border-color:#d0574a;background:linear-gradient(180deg,rgba(100,20,16,.55),rgba(26,6,5,.6))}
.me-vysledek.neuspech b,.me-vysledek.chyba b{color:#ffb2a4}
@keyframes me-vys{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

/* --- lahev v rámečku (recept, žebřík) --- */
.me-lahev-ram{position:relative;display:grid;place-items:center;width:64px;height:72px}
.me-lahev-ram.velka{width:96px;height:104px}
.me-lahev{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.85))}
.me-t1 .me-lahev{transform:scale(.78);filter:saturate(.7) brightness(.9) drop-shadow(0 3px 5px rgba(0,0,0,.85))}
.me-t2 .me-lahev{transform:scale(.88)}
.me-t3 .me-lahev{transform:scale(.95);filter:drop-shadow(0 0 7px var(--b2,#e0930f)) drop-shadow(0 3px 5px rgba(0,0,0,.85))}
.me-t4 .me-lahev{filter:drop-shadow(0 0 13px var(--b1,#ffd772)) drop-shadow(0 0 4px var(--b2,#e0930f)) saturate(1.2)}
.me-lahev-ram em{
  position:absolute;right:-2px;bottom:2px;min-width:22px;padding:2px 5px;border-radius:3px;
  font:600 11px/1 var(--tl-pismo-nadpis);font-style:normal;text-align:center;color:#1d1204;
  background:var(--tl-zlato-plocha);box-shadow:0 1px 3px rgba(0,0,0,.8);
}

/* --- žebřík úrovní --- */
.me-zebrik{padding:14px 16px;display:grid;gap:10px}
.me-zebrik-hlava{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.me-kroky{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;position:relative}
.me-kroky::before{content:'';position:absolute;left:12%;right:12%;top:40px;height:2px;background:linear-gradient(90deg,transparent,rgba(214,168,71,.5) 10%,rgba(214,168,71,.5) 90%,transparent)}
:is(#centerContent,body) .me-krok{
  all:unset;box-sizing:border-box;cursor:pointer;position:relative;
  display:grid;justify-items:center;text-align:center;gap:3px;padding:6px 6px 10px;border-radius:6px;
  border:1px solid transparent;transition:background .2s,border-color .2s;
}
:is(#centerContent,body) .me-krok:hover{background:rgba(255,255,255,.04);border-color:rgba(214,168,71,.35)}
:is(#centerContent,body) .me-krok:focus-visible{outline:2px solid var(--b1);outline-offset:2px}
:is(#centerContent,body) .me-krok.cil{background:color-mix(in srgb,var(--b3) 70%,transparent);border-color:var(--b1);box-shadow:0 0 14px color-mix(in srgb,var(--b2) 40%,transparent)}
.me-krok .me-lahev-ram{background:radial-gradient(circle,rgba(10,11,16,1) 55%,transparent 56%)}
.me-krok:not(.ma) .me-lahev{opacity:.55}
.me-krok-nazev{font:600 13.5px/1.2 var(--tl-pismo-nadpis);color:#f1e5c9}
.me-krok-bonus{font-weight:600;font-size:15px;color:#8df0a0}
.me-krok-bonus small{font-weight:400;color:var(--tl-text-tlumeny)}
.me-krok-ma{font-size:12.5px;padding:1px 8px;border-radius:999px;background:rgba(0,0,0,.4);color:var(--tl-text-tlumeny)}
.me-krok.ma .me-krok-ma{color:#f6e4b0;background:rgba(214,168,71,.18)}

/* --- pravý sloupec --- */
.me-mat,.me-jak{padding:14px 14px 12px;display:grid;gap:10px}
.me-mat-seznam{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.me-mat-pol{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px;padding:4px 8px;border-radius:4px;border:1px solid transparent}
.me-mat-pol span{font-size:14.5px;color:#e8dcc0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-mat-pol b{font:600 14px/1 var(--tl-pismo-nadpis);color:#f6e4b0}
.me-mat-pol.nula span,.me-mat-pol.nula b{color:#7d745f}
.me-mat-pol.nula .me-mat-ik{filter:grayscale(1) brightness(.6)}
.me-mat-pol.potreba{background:rgba(214,168,71,.12);border-color:rgba(214,168,71,.45)}
.me-mat-ik{width:26px;height:26px;object-fit:contain}
.me-jak-kroky{margin:0;padding:0;list-style:none;counter-reset:me;display:grid;gap:8px}
.me-jak-kroky li{counter-increment:me;display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;font-size:14.5px;line-height:1.35;color:#ddd1b6}
.me-jak-kroky li::before{
  content:counter(me);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font:600 13px/1 var(--tl-pismo-nadpis);color:#1d1204;background:var(--tl-zlato-plocha);
}
.me-jak-kroky b{color:#f3e2b6}
:is(#centerContent,body) .me-odkaz{color:#f1cd72;text-decoration:underline;cursor:pointer}

/* tooltip */
.me-tip-hlava .tip-q{color:#f1cd72}

/* --- užší obsah --- */
@container me (max-width:980px){
  .me-staty{grid-template-columns:repeat(5,minmax(132px,1fr));overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
  .me-mrizka{grid-template-columns:minmax(0,1fr)}
  .me-bok{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container me (max-width:640px){
  .me-hlava{flex-direction:column;align-items:flex-start;gap:0;padding-bottom:12px}
  .me-hlava-chipy{padding:0 24px;justify-content:flex-start}
  .me-recept-mrizka{grid-template-columns:minmax(0,1fr)}
  .me-stred{order:-1}
  .me-kroky{grid-template-columns:repeat(2,minmax(0,1fr))}
  .me-kroky::before{display:none}
  .me-bok{grid-template-columns:minmax(0,1fr)}
  .me-sk{padding:8px}
}
@media (prefers-reduced-motion:reduce){
  .me-vysledek,.me-tocka{animation:none}
  .me-sk,.me-krok{transition:none}
}