/* Stránka bosse (boss-intro.js): plakát jako před velkým zápasem (se schopnostmi bosse), úrovně a výhra.
   Celá stránka se vejde na jednu obrazovku bez posouvání: plakát zabere, co zbude, a ostatní se zmenšuje
   podle výšky obrazovky (cqh = procento výšky stránky, uvnitř plakátu výšky plakátu). */
#bossintro { padding: 0; }
.bi { --me-a: #1f7bff; --me-b: #071a4a; --boss-a: #ff2e88; --boss-b: #3d0626; --accent: var(--gold);
  position: relative; width: min(780px, 100%); height: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(6px, 1.1svh, 14px);
  padding: max(10px, env(safe-area-inset-top)) 16px 0; container-type: size; }
.bi > * { flex: none; }
.bi.theme-clash { --boss-a: #5b8ff9; --boss-b: #0a1238; --accent: #5fd8f7; }
.bi.theme-redakce { --boss-a: #ff4b3e; --boss-b: #2a0a0a; }
.bi.theme-gala { --boss-a: #ffb02e; --boss-b: #3a1d00; }
#bossintro::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, transparent, rgba(6, 2, 12, .85) 70%), linear-gradient(180deg, rgba(10, 4, 18, .35), rgba(10, 4, 18, .9)); }

/* Reflektory, které přejíždějí přes plakát */
.bi-beam { position: absolute; top: -40px; width: 46%; height: 520px; pointer-events: none; z-index: 0; mix-blend-mode: screen; opacity: .55;
  background: conic-gradient(from 168deg at 50% 0%, transparent 0deg, rgba(255, 255, 255, .22) 10deg, transparent 24deg); transform-origin: 50% 0;
  animation: bi-sweep 5.5s ease-in-out infinite alternate; }
.bi-beam.a { left: 4%; }
.bi-beam.b { right: 4%; animation-delay: -2.7s; animation-direction: alternate-reverse; }
@keyframes bi-sweep { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }

.bi-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bi-back { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px 9px 11px; border-radius: 999px; cursor: pointer; color: var(--paper);
  font: 800 14px/1 var(--font-body); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); }
.bi-place { min-width: 0; padding: 7px 12px; border-radius: 999px; font: 700 12.5px/1.2 var(--font-body); color: #f3e9ff; text-align: right;
  background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Plakát: dvě poloviny rozdělené bleskem, uprostřed VS. Zabere výšku, která na stránce zbude,
   a portréty se zmenší tak, aby se pod ně vešlo jméno a u bosse jeho schopnosti (--skills). */
.bi > .bi-poster { position: relative; z-index: 1; flex: 1 1 0; min-height: 160px; display: grid; border-radius: 26px; overflow: hidden; isolation: isolate;
  container-type: size; box-shadow: 0 0 0 2px rgba(255, 255, 255, .12), 0 24px 60px rgba(0, 0, 0, .6); }
.bi-half { grid-area: 1 / 1; position: relative; display: grid; align-content: center; gap: clamp(6px, 3cqh, 12px); padding: clamp(10px, 4cqh, 18px) 6%; }
.bi-half.me { clip-path: polygon(0 0, 57% 0, 43% 100%, 0 100%); justify-items: start;
  background: radial-gradient(circle at 22% 40%, color-mix(in srgb, var(--me-a) 70%, transparent), transparent 62%), linear-gradient(160deg, var(--me-b), #04060f);
  animation: bi-in-l .65s cubic-bezier(.2, .9, .25, 1.1) backwards; }
.bi-half.boss { clip-path: polygon(57% 0, 100% 0, 100% 100%, 43% 100%); justify-items: end;
  background: radial-gradient(circle at 78% 45%, color-mix(in srgb, var(--boss-a) 75%, transparent), transparent 62%), linear-gradient(200deg, var(--boss-b), #0b0410);
  animation: bi-in-r .65s .08s cubic-bezier(.2, .9, .25, 1.1) backwards; }
@keyframes bi-in-l { from { transform: translateX(-70%); filter: brightness(2); } }
@keyframes bi-in-r { from { transform: translateX(70%); filter: brightness(2); } }
.bi-dots { position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .35) 1.2px, transparent 1.6px) 0 0 / 11px 11px;
  mask-image: linear-gradient(90deg, #000, transparent 70%); -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); }
.bi-half.boss .bi-dots { mask-image: linear-gradient(270deg, #000, transparent 70%); -webkit-mask-image: linear-gradient(270deg, #000, transparent 70%); }

/* Oba portréty mají stejnou výšku: pod bossem musí zůstat místo na jeho schopnosti (--skills). */
.bi-frame { --frame-h: calc(100cqh - 78px - var(--skills, 0) * 54px); position: relative; width: max(64px, min(33cqw, var(--frame-h) * .8)); aspect-ratio: 4 / 5; }
.bi-half.boss .bi-frame { width: max(64px, min(37cqw, var(--frame-h) * .8)); }
.bi-pic { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 22px; background: #10081c;
  transform: rotate(-4deg); box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--me-a), 0 0 40px color-mix(in srgb, var(--me-a) 80%, transparent), 0 18px 30px rgba(0, 0, 0, .55); }
.bi-half.boss .bi-pic { transform: rotate(4deg); box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--boss-a), 0 0 46px color-mix(in srgb, var(--boss-a) 85%, transparent), 0 18px 30px rgba(0, 0, 0, .55); }
.bi-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.bi-pic img:not(.portrait-art)[src$=".png"] { width: 78%; height: auto; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); }
.bi-pic span { font-size: clamp(36px, min(16cqw, 24cqh), 96px); line-height: 1; }
.bi-initial { width: 100%; height: 100%; display: grid; place-items: center; font: 900 clamp(40px, min(20cqw, 30cqh), 120px)/1 var(--font-display); color: #fff;
  background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--me-a) 80%, #fff), var(--me-b) 75%); text-shadow: 0 6px 0 rgba(0, 0, 0, .35); }
.bi-tag { position: absolute; left: 50%; top: -11px; z-index: 2; transform: translateX(-50%) rotate(4deg); padding: 6px 12px; border-radius: 10px; white-space: nowrap;
  font: 900 12px/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: #2a1400;
  background: linear-gradient(180deg, #fff1b0, var(--gold) 55%, var(--gold-deep)); box-shadow: 0 6px 14px rgba(0, 0, 0, .5); }

.bi-plate { display: grid; max-width: 46%; }
.bi-half.boss .bi-plate { justify-items: end; text-align: right; }
.bi-plate b { padding: 6px 12px 7px; transform: skewX(-8deg); font: 900 clamp(14px, min(4.3cqw, 6cqh), 22px)/1.05 var(--font-display); text-transform: uppercase; color: #fff;
  background: rgba(0, 0, 0, .55); box-shadow: inset 4px 0 0 var(--me-a); overflow-wrap: anywhere; }
.bi-half.boss .bi-plate b { transform: skewX(8deg); box-shadow: inset -4px 0 0 var(--boss-a); }
/* Životy na rohu portrétu jako u hrdinů na desce */
.bi-hp { position: absolute; right: -10px; bottom: -8px; z-index: 3; padding: 5px 10px; border-radius: 999px; white-space: nowrap; font: 900 14px/1 var(--font-display);
  color: #fff; background: linear-gradient(180deg, #ff5a6e, #b0102e); box-shadow: 0 0 0 2px #fff, 0 6px 14px rgba(0, 0, 0, .5); }

/* Schopnosti bosse pod jeho jménem: znak vpravo, název vlevo od něj. Klepnutí ukáže celý popis. */
.bi-skills { display: grid; gap: 6px; justify-items: end; max-width: 54%; }
.bi-skill { display: grid; grid-template-columns: auto 36px; align-items: center; gap: 8px; padding: 4px 5px 4px 12px; border: 0; border-radius: 14px; cursor: pointer;
  text-align: right; color: var(--paper); background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  animation: bi-skill-in .4s calc(.75s + var(--i) * .08s) cubic-bezier(.2, .9, .3, 1.2) backwards; transition: transform .15s; }
.bi-skill span { display: grid; gap: 3px; min-width: 0; }
.bi-skill small { font: 700 9.5px/1 var(--font-body); white-space: nowrap; letter-spacing: .1em; text-transform: uppercase; color: #d4bfe4; }
.bi-skill b { font: 800 14px/1.1 var(--font-display); }
.bi-skill-ico { position: relative; display: grid; place-items: center; min-height: 36px; font-size: 22px; font-style: normal; }
.bi-skill-ico .ability-emblem { width: 36px; }
.bi-cost { position: absolute; right: -5px; bottom: -3px; width: 19px; height: 19px; display: grid; place-items: center; font: 900 11px/1 var(--font-display); font-style: normal;
  color: #fff; border-radius: 50%; background: linear-gradient(145deg, #69c5fc, #153a87); box-shadow: inset 0 0 0 1px #9fdbff, 0 2px 4px #0009; }
@media (hover: hover) { .bi-skill:hover { transform: translateX(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--boss-a) 80%, #fff); } }
.bi-skill:active { transform: scale(.96); }
@keyframes bi-skill-in { from { opacity: 0; transform: translateX(24px); } }
/* Nízký plakát a víc schopností: jen znaky vedle sebe, ať zbude místo na portréty (název ukáže klepnutí) */
@container (max-height: 320px) {
  .many-skills .bi-skills { grid-auto-flow: column; }
  .many-skills .bi-skill { grid-template-columns: 36px; padding: 4px; }
  .many-skills .bi-skill > span { display: none; }
  .many-skills .bi-frame { --frame-h: calc(100cqh - 78px - 54px); }
}

.bi-bolt { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.bi-bolt polyline { fill: none; stroke: #fff6d6; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 16px var(--accent)); stroke-dasharray: 1; stroke-dashoffset: 1; animation: bi-bolt .5s .35s ease-out forwards; }
@keyframes bi-bolt { to { stroke-dashoffset: 0; } }

.bi-vs { position: absolute; left: 50%; top: 50%; z-index: 4; width: clamp(54px, min(20cqw, 26cqh), 108px); aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; animation: bi-vs-slam .55s .45s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.bi-vs::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a2a6a, #12061f 70%);
  box-shadow: 0 0 0 3px #fff6d6, 0 0 0 6px var(--accent), 0 0 34px var(--accent); }
.bi-vs-rays { position: absolute; inset: -60%; border-radius: 50%; opacity: .55; animation: bi-spin 9s linear infinite;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 55%, transparent) 0 6deg, transparent 6deg 22deg);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); }
.bi-vs span { position: relative; font: 900 clamp(22px, min(8cqw, 10cqh), 42px)/1 var(--font-display); letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff, #ffe08a 45%, #ff9d1f); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #3a0020); }
@keyframes bi-vs-slam { from { transform: translate(-50%, -50%) scale(3.2) rotate(-14deg); opacity: 0; filter: blur(6px); } }
@keyframes bi-spin { to { transform: rotate(1turn); } }

/* Hláška bosse jako bublina z jeho strany */
.bi-quote { position: relative; z-index: 1; align-self: flex-end; max-width: min(92%, 520px); margin: -4px 4px 0 0; padding: 10px 16px; border-radius: 18px 6px 18px 18px;
  font: italic 600 clamp(13px, 2cqh, 16.5px)/1.35 var(--font-body); color: #1b0f2c; background: #fff6e8; box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  animation: bi-quote-in .45s .7s cubic-bezier(.2, .9, .3, 1.2) backwards; }
.bi-quote::before { content: ''; position: absolute; right: 22px; top: -12px; border: 7px solid transparent; border-bottom: 7px solid #fff6e8; border-right: 7px solid #fff6e8; }
@keyframes bi-quote-in { from { opacity: 0; transform: translateY(-10px) scale(.92); } }

/* Úrovně: tři zastávky spojené čárou (--lv = velikost kolečka podle výšky obrazovky) */
.bi-levels { --lv: clamp(38px, 5.8cqh, 54px); position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 4px 0 0; }
.bi-levels-line { position: absolute; left: 16%; right: 16%; top: calc(2px + var(--lv) / 2); height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); }
.bi-level { position: relative; display: grid; justify-items: center; align-content: start; gap: clamp(4px, .9cqh, 9px); padding: 0 2px 8px; border: 0; border-radius: 16px; cursor: pointer; color: var(--paper);
  background: none; text-align: center; animation: bi-level-in .4s calc(.9s + var(--i) * .08s) cubic-bezier(.2, .9, .3, 1.2) backwards; }
@keyframes bi-level-in { from { opacity: 0; transform: translateY(12px); } }
.bi-level-num { position: relative; width: var(--lv); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font: 900 calc(var(--lv) * .43)/1 var(--font-display);
  background: radial-gradient(circle at 35% 30%, #3b2557, #150a26); box-shadow: 0 0 0 3px #150a26, 0 0 0 5px rgba(255, 255, 255, .22); transition: transform .2s; }
.bi-level-num i { position: absolute; right: -5px; bottom: -3px; width: calc(var(--lv) * .4); height: calc(var(--lv) * .4); border-radius: 50%; display: grid; place-items: center;
  font: 900 calc(var(--lv) * .2)/1 var(--font-body);
  font-style: normal; background: #3a2d4f; box-shadow: 0 0 0 2px #150a26; }
.bi-level b { font: 800 12px/1.2 var(--font-body); max-width: 16ch; }
.bi-level small { font-size: 11px; color: var(--muted); }
.bi-level.beaten .bi-level-num { box-shadow: 0 0 0 3px #150a26, 0 0 0 5px var(--gold); }
.bi-level.beaten .bi-level-num i { background: var(--gold); color: #2a1400; }
.bi-level.open .bi-level-num { box-shadow: 0 0 0 3px #150a26, 0 0 0 5px var(--ready), 0 0 22px rgba(125, 255, 178, .6); animation: an-glow 1.8s ease-in-out infinite; }
.bi-level.open .bi-level-num i { background: var(--ready); color: #0b2a18; }
.bi-level.open small { color: var(--ready); font-weight: 700; }
.bi-level:is(.locked, .soon) { opacity: .62; cursor: default; }
.bi-level:is(.locked, .soon) .bi-level-num { filter: grayscale(.8); }
.bi-level.current::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 0; height: 3px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.bi-level.current .bi-level-num { transform: scale(1.1); transform-origin: 50% 70%; }
.bi-level.current b { color: var(--gold); }
@media (hover: hover) { .bi-level:not(.current, :disabled):hover .bi-level-num { transform: scale(1.06); } }

/* Těžká výzva: připomínka, kdy se do ní pustit */
.bi-advice { margin: 0; padding: 8px 12px; border-radius: 14px; font-size: clamp(12px, 1.8cqh, 13.5px); line-height: 1.35; color: #ffe1c9;
  background: rgba(255, 106, 61, .14); box-shadow: inset 0 0 0 1px rgba(255, 140, 90, .45); }
.bi-advice b { color: #ffb48a; }

/* Výhra: karty do sbírky jako vějíř */
.bi-rewards { text-align: center; }
.bi-rewards h3 { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: center; align-items: baseline; font: 800 12.5px/1 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.bi-rewards h3 small { font: 600 12.5px/1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--muted); }
/* Karty výhry se zmenšují podle výšky obrazovky, aby se vešly i s tlačítkem. */
.bi-cards { display: flex; justify-content: center; gap: 0; padding: clamp(6px, 1.4cqh, 14px) 0 4px; }
.bi-card { --card-w: clamp(60px, min(30vw, 13cqh), 150px); position: relative; margin: 0 calc(var(--card-w) * -0.06); padding: 0; border: 0; background: none; cursor: pointer;
  transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 6deg));
  transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 6deg)) translateY(calc(abs(var(--i) - (var(--n) - 1) / 2) * 6px));
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.3); animation: bi-card-in .5s calc(1s + var(--i) * .09s) cubic-bezier(.2, .9, .3, 1.2) backwards; }
.bi-card .card { --card-w: inherit; }
@media (hover: hover) { .bi-card:hover { z-index: 5; transform: translateY(-14px) scale(1.12); } }
.bi-card:active { transform: scale(.96); }
@keyframes bi-card-in { from { opacity: 0; transform: translateY(40px) rotate(0) scale(.7); } }
.bi-cards.count-3 .bi-card { --card-w: clamp(56px, min(27vw, 12cqh), 140px); }
.bi-cards.count-4 .bi-card { --card-w: clamp(52px, min(22vw, 12cqh), 128px); margin: 0 calc(var(--card-w) * -0.1); }
.bi-cards:is(.count-5, .count-6) .bi-card { --card-w: clamp(48px, min(19vw, 11cqh), 116px); margin: 0 calc(var(--card-w) * -0.14); }
.bi-got { position: absolute; left: 50%; bottom: 8%; z-index: 4; transform: translateX(-50%) rotate(-6deg); padding: 4px 9px; border-radius: 8px; white-space: nowrap;
  font: 900 11px/1 var(--font-display); color: #0b2a18; background: var(--ready); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.bi-bonus { margin: 4px 0 0; font-size: 13px; color: #e6d6ef; }

/* Tlačítko do arény je poslední řádek stránky, nic nepřekrývá */
.bi > .bi-actions { position: relative; z-index: 5; margin-top: auto; display: flex; justify-content: center; padding: 2px 0 calc(10px + env(safe-area-inset-bottom)); }
.bi-actions .btn { min-width: min(320px, 100%); }
.bi-fight.locked { padding: 15px 22px; font-size: 15px; opacity: .85; }

/* Přepnutí úrovně: plakát už nejezdí, jen se vymění boss a karty výhry rychle naskočí */
.bi.switching :is(.bi-half, .bi-vs, .bi-quote, .bi-level, .bi-skill) { animation: none; }
.bi.switching .bi-bolt polyline { animation: none; stroke-dashoffset: 0; }
.bi.switching .bi-card { animation-delay: calc(var(--i) * .06s); }

@media (max-width: 420px) { .bi-plate { max-width: 52%; } }
/* Nízká obrazovka (telefon v prohlížeči): u bosse s úrovněmi ustoupí plakátu hláška a druhý řádek u úrovní */
@media (max-height: 720px) { .bi:has(.bi-levels) .bi-quote, .bi-level small { display: none; } }
@media (max-height: 600px) { .bi-quote { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .bi-beam, .bi-vs-rays, .bi-level.open .bi-level-num { animation: none; }
  .bi-half, .bi-vs, .bi-quote, .bi-level, .bi-card, .bi-skill { animation: none; }
  .bi-bolt polyline { animation: none; stroke-dashoffset: 0; }
}