/* ================= Paski pod postaciami v2 (zaokrąglone) ================= */
.unit-info {
    background: linear-gradient(rgba(12,10,8,.78), rgba(8,6,4,.62));
    border: 1px solid rgba(226,184,90,.22);
    border-radius: .7em;
    padding: .35em .5em .4em;
    box-shadow: 0 .3em .9em rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
}
.unit-info.team-guests { border-color: rgba(196,68,58,.3); }
.bar, .sp-gauge {
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.7);
    box-shadow: inset 0 .1em .25em rgba(0,0,0,.8);
}
.bar { height: 1.25em; }
.bar .fill, .sp-fill { border-radius: 999px; }
.bar.hp .fill {
    background: linear-gradient(180deg, #ff7a6a 0%, #e0453a 45%, #a3271f 100%);
    box-shadow: inset 0 .12em 0 rgba(255,255,255,.35), 0 0 .5em rgba(229,72,61,.45);
}
.unit-info.team-library .bar.hp .fill {
    background: linear-gradient(180deg, #8ff0a0 0%, #3fbf6a 45%, #217a3f 100%);
    box-shadow: inset 0 .12em 0 rgba(255,255,255,.35), 0 0 .5em rgba(63,191,106,.4);
}
.bar .shield-fill { border-radius: 999px; }
.bar .tick { width: .18em; border-radius: 1px; background: #ffe27a; box-shadow: 0 0 .3em #ffcf4a; }
.bar .tick.shifted { background: #ff9a4a; box-shadow: 0 0 .4em #ff7a2a; animation: tick 1s steps(2) infinite; }
.bar span { line-height: 1.55em; letter-spacing: .03em; }
.sp-gauge { height: .95em; }
.sp-fill.pos { background: linear-gradient(180deg, #b6e6ff, #4fa3e6); box-shadow: 0 0 .4em rgba(111,195,255,.5); }
.sp-fill.neg { background: linear-gradient(180deg, #b19aff, #5a3fc0); box-shadow: 0 0 .4em rgba(160,130,255,.5); }
.orb { width: .85em; height: .85em; }
.status { border-radius: .45em; padding: .02em .35em; }

/* ================= Nowe stany ================= */
.unit.shadowed .figure-wrap { opacity: .35; filter: brightness(.3) drop-shadow(0 0 .8em #000) !important; }
.unit.shadowed::after {
    content: "";
    position: absolute; inset: 30% -10% -4%;
    background: radial-gradient(ellipse at 50% 80%, rgba(0,0,0,.85), transparent 70%);
    animation: aura 2s ease-in-out infinite;
}
.sdie.sealed { opacity: .8; border-color: #b8a8f0 !important; background: #241c3a !important; filter: none; }
.sdie.sealed .sval { font-size: 1.2em; }
.fig-orb { filter: drop-shadow(0 0 3px #b8a8f0); animation: aura 1.8s ease-in-out infinite; }

/* ================= Zakładki bohaterów nad ręką ================= */
.hero-tabs { position: absolute; left: 50%; bottom: 27.5%; transform: translateX(-50%); display: flex; gap: .4em; z-index: 255; }
.hero-tab {
    display: flex; align-items: center; gap: .4em;
    padding: .25em .9em;
    border-radius: 999px;
    background: rgba(12,10,8,.85);
    border: 1px solid #4a3b22;
    color: var(--muted);
    cursor: pointer;
    font-size: .95em;
}
.hero-tab.on { color: #fff; border-color: var(--gold); box-shadow: 0 0 .6em rgba(226,184,90,.4); }
.hero-tab.dead { opacity: .35; }
.ht-light { color: #f1c443; }
.ht-free { background: #c4443a; color: #fff; border-radius: 999px; padding: 0 .45em; font-size: .8em; font-weight: 700; }
.reward { color: #9fe0a8; font-weight: 700; font-size: 1.2em; }

/* ================= Menu: drużyna, akty ================= */
.sec-title { color: var(--gold); margin: 0 0 .6rem; }
.sec-title small { color: var(--muted); font-size: .8rem; font-family: "Segoe UI", sans-serif; font-weight: 400; }
.wallet { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.wallet .ink { color: #f4e6c0; font-size: 1.3rem; font-weight: 700; }
.wallet .shards { color: #b8a8f0; font-size: 1.1rem; }
.wallet small { color: var(--muted); font-size: .75rem; font-weight: 400; }
.roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.2rem; }
.roster-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    padding: .8rem;
    border-radius: 1rem;
    border: 1px solid #3a2f1e;
    background: linear-gradient(#1d160e, #0f0b07);
    cursor: pointer;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.roster-card:hover { transform: translateY(-3px); border-color: var(--gold-dim); }
.roster-card.in-party { border-color: var(--gold); box-shadow: 0 0 1.2rem rgba(226,184,90,.25); }
.roster-card.locked { filter: grayscale(.9) brightness(.45); }
.rc-fig { width: 120px; height: 170px; }
.rc-fig .idle, .rc-fig .figure { height: 100%; }
.rc-name { font-family: Georgia, serif; font-size: 1.15rem; }
.rc-title { color: var(--muted); font-size: .85rem; font-style: italic; }
.rc-slot { position: absolute; top: .5rem; left: .5rem; background: var(--gold); color: #1a1208; font-weight: 800; font-size: .7rem; padding: .1rem .5rem; border-radius: 999px; }
.rc-lock { color: var(--muted); font-size: .8rem; }
.stars { letter-spacing: .05em; font-size: .85em; }
.stars.s1 { color: #9fb7a4; }
.stars.s2 { color: #6fa8ff; }
.stars.s3 { color: #c48bff; }
.stars.s4 { color: #ffd34a; text-shadow: 0 0 .4em rgba(255,200,60,.7); }
.act-block { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.enc.act { border-color: var(--gold-dim); border-radius: .8rem; }
.enc.sub { margin-left: 1.5rem; padding: .6rem 1rem; border-radius: .6rem; }
.enc.sub .enc-title { font-size: 1.05rem; }
.done { color: #9fe0a8; margin-left: .4rem; }
.act-tag { position: absolute; top: 2%; left: 2%; z-index: 20; color: var(--muted); letter-spacing: .2em; font-size: .9em; }
.lo-item.locked { opacity: .35; filter: grayscale(.8); }
.lo-item.locked .lo-check { color: var(--muted); }

/* ================= Przerywnik (obrazek + tekst) ================= */
.interlude { position: absolute; inset: 0; cursor: pointer; overflow: hidden; animation: fadein .8s; }
.il-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 14s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.0); } to { transform: scale(1.08) translateX(-1%); } }
.il-art { position: absolute; inset: 0; }
.il-art i { position: absolute; border-radius: 50%; filter: blur(2em); opacity: .55; animation: drift 12s ease-in-out infinite alternate; }
.il-art i:nth-child(1) { width: 50%; height: 60%; left: 5%; top: 10%; }
.il-art i:nth-child(2) { width: 40%; height: 50%; right: 5%; top: 30%; animation-delay: -4s; }
.il-art i:nth-child(3) { width: 30%; height: 30%; left: 40%; bottom: 5%; animation-delay: -8s; }
@keyframes drift { to { transform: translate(6%, -4%) scale(1.15); } }
.mood-night { background: linear-gradient(#0a0d18, #050508); }
.mood-night .il-art i { background: #2a3a7a; }
.mood-metro { background: linear-gradient(#111015, #050506); }
.mood-metro .il-art i { background: #7a6a2a; }
.mood-blood { background: linear-gradient(#1a0606, #060202); }
.mood-blood .il-art i { background: #8a1a1a; }
.mood-dawn { background: linear-gradient(#2a1a2a, #0a0508); }
.mood-dawn .il-art i { background: #e08a5a; }
.mood-gold { background: linear-gradient(#1d150d, #0a0705); }
.mood-gold .il-art i { background: #b8862a; }
.il-shade { position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0,0,0,.85)); }
.il-content { position: absolute; left: 8%; right: 8%; bottom: 10%; }
.il-title { font-family: Georgia, serif; font-size: 2.6em; color: var(--gold); letter-spacing: .1em; margin-bottom: .4em; animation: fadein 1s; }
.il-line { font-size: 1.6em; color: #f1e9d8; line-height: 1.5; margin: .2em 0; text-shadow: 0 .1em .3em #000; animation: line-in .7s ease-out; }
@keyframes line-in { from { opacity: 0; transform: translateY(.6em); } }
.il-hint { margin-top: 1em; color: var(--muted); font-size: .95em; }

/* ================= Gacha ================= */
.banner-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.banner-tab { background: #17120c; color: var(--muted); border: 1px solid #3a2f1e; padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer; font-family: Georgia, serif; }
.banner-tab.on { color: #fff; border-color: var(--gold); box-shadow: 0 0 .8rem rgba(226,184,90,.3); }
.banner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; padding: 1.5rem; border-radius: 1.2rem; border: 1px solid #3a2f1e; background: radial-gradient(ellipse at 30% 30%, rgba(226,184,90,.12), transparent 60%), #0e0b07; }
.banner-frost { background: radial-gradient(ellipse at 30% 30%, rgba(90,220,140,.16), transparent 60%), #08100b; }
.banner-headsman { background: radial-gradient(ellipse at 30% 30%, rgba(200,40,40,.15), transparent 60%), #0b0707; }
.banner-art { display: flex; gap: 1rem; justify-content: center; align-items: flex-end; }
.banner-hero { display: flex; flex-direction: column; align-items: center; width: 200px; }
.banner-hero .figure { height: 280px; }
.banner-hero.owned { opacity: .6; }
.bh-name { font-family: Georgia, serif; font-size: 1.3rem; }
.bh-role { color: var(--muted); font-size: .8rem; text-align: center; }
.bh-owned { color: #9fe0a8; font-size: .8rem; }
.rates { border-collapse: collapse; margin: .8rem 0; }
.rates td { padding: .2rem 1rem .2rem 0; }
.rates td:last-child { color: #f4e6c0; font-weight: 700; }
.pity-bar { position: relative; height: .7rem; border-radius: 999px; background: rgba(0,0,0,.6); border: 1px solid #3a2f1e; margin: .4rem 0; overflow: hidden; }
.pity-bar div { height: 100%; background: linear-gradient(90deg, #8a6d33, #ffd34a); border-radius: 999px; }
.pity-bar i { position: absolute; top: 0; bottom: 0; width: 2px; background: #ff7a5a; }
.pull-buttons { display: flex; gap: 1rem; margin: 1.2rem 0; }
.btn.pull { display: flex; flex-direction: column; align-items: center; font-size: 1.2rem; padding: .7rem 2rem; border-radius: .8rem; }
.btn.pull small { font-size: .8rem; color: var(--muted); font-family: "Segoe UI", sans-serif; }
.btn.pull.ten { border-color: var(--gold); box-shadow: 0 0 1rem rgba(226,184,90,.3); }
.exchange h3 { color: #b8a8f0; margin-bottom: .4rem; }
.exchange .btn { margin: 0 .4rem .4rem 0; }
.history { margin-top: 1.5rem; }
.hist-item { display: inline-block; margin: 0 .5rem .3rem 0; color: var(--muted); font-size: .85rem; }

.pull-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; animation: fadein .3s; }
.pull-flash { position: absolute; inset: 0; pointer-events: none; animation: fade 1.2s forwards; }
.pull-flash.s1 { background: radial-gradient(circle, rgba(160,200,170,.25), transparent 60%); }
.pull-flash.s2 { background: radial-gradient(circle, rgba(111,168,255,.35), transparent 60%); }
.pull-flash.s3 { background: radial-gradient(circle, rgba(196,139,255,.5), transparent 65%); }
.pull-flash.s4 { background: radial-gradient(circle, rgba(255,230,140,.95), rgba(255,180,60,.4) 40%, transparent 75%); animation-duration: 2s; }
.pull-grid { display: grid; grid-template-columns: repeat(5, 170px); gap: 1rem; perspective: 900px; }
.pull-grid.count-1 { grid-template-columns: 220px; }
.pull-card { position: relative; height: 270px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,.8,.3,1); }
.pull-card.shown { transform: rotateY(180deg); }
.pc-back, .pc-front { position: absolute; inset: 0; backface-visibility: hidden; border-radius: .9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; }
.pc-back { background: repeating-linear-gradient(45deg, #1d160e 0 10px, #15100a 10px 20px); border: 2px solid #4a3b22; font-size: 3rem; color: var(--gold-dim); }
.pull-card.s4 .pc-back { border-color: #ffd34a; color: #ffd34a; box-shadow: 0 0 1.5rem rgba(255,211,74,.7); animation: pulse .6s infinite; }
.pull-card.s3 .pc-back { border-color: #c48bff; }
.pc-front { transform: rotateY(180deg); background: linear-gradient(#1a140d, #0c0906); border: 2px solid #4a3b22; padding: .5rem; font-size: 12px; }
.pull-card.s2 .pc-front { border-color: #6fa8ff; }
.pull-card.s3 .pc-front { border-color: #c48bff; box-shadow: 0 0 1.2rem rgba(196,139,255,.45); }
.pull-card.s4 .pc-front { border-color: #ffd34a; box-shadow: 0 0 2rem rgba(255,211,74,.8); background: radial-gradient(circle at 50% 30%, #4a3a12, #120d05); }
.pc-front .skill-card { width: 100%; font-size: 11px; }
.pc-hero { height: 170px; width: 130px; }
.pc-hero .figure { height: 100%; }
.pc-name { font-family: Georgia, serif; font-size: 1.4rem; color: #fff; }
.pc-kind { color: var(--muted); font-size: .8rem; letter-spacing: .15em; }
.pc-new { position: absolute; top: .4rem; right: .4rem; background: #3fbf6a; color: #08130b; font-weight: 800; font-size: .7rem; padding: .05rem .45rem; border-radius: 999px; }
.pc-dup { position: absolute; top: .4rem; right: .4rem; color: #b8a8f0; font-weight: 700; }
.pull-hint { margin-top: 1.5rem; color: var(--muted); }
@media (max-width: 1100px) {
    .banner { grid-template-columns: 1fr; }
    .pull-grid { grid-template-columns: repeat(2, 160px); }
    .roster { grid-template-columns: 1fr 1fr; }
}

/* jo-jo Egzekutora: krążek wiruje, przy ataku wyrzucany na nici */
.fig-yoyo { transform-box: fill-box; transform-origin: center; animation: yoyo-spin 1.2s linear infinite; }
@keyframes yoyo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
[class*="atk-"] .fig-yoyo { animation-duration: .25s; }
[class*="atk-"] .fig-yoyo-throw { animation: yoyo-throw .5s cubic-bezier(.2,.9,.3,1); }
[class*="atk-"] .fig-string { transform-box: view-box; transform-origin: 93px 105px; animation: yoyo-string .5s cubic-bezier(.2,.9,.3,1); }
@keyframes yoyo-throw { 0% { transform: translate(0,0); } 45% { transform: translate(22px,6px); } 100% { transform: translate(0,0); } }
@keyframes yoyo-string { 0% { transform: scale(1); } 45% { transform: scale(1.6,1.05); } 100% { transform: scale(1); } }
.build-ver { position: fixed; right: 8px; bottom: 4px; font-size: 11px; opacity: .35; pointer-events: none; z-index: 50; letter-spacing: .05em; }

/* samouczek + podpowiedź */
.enc.tutorial { border-color: rgba(120,200,140,.45); margin-bottom: .8rem; }
.boss-tag.new { background: #3f9a57; }
.pulse-cta { animation: cta-pulse 2.2s ease-in-out infinite; }
@keyframes cta-pulse { 50% { box-shadow: 0 0 0 .25rem rgba(120,200,140,.25), 0 0 1.2rem rgba(120,200,140,.35); } }
.btn.ability.suggest { border-color: rgba(120,200,140,.5); }
.btn.ability.suggest.ready { box-shadow: 0 0 .6em rgba(120,200,140,.4); }

/* ================= Tooltipy renderowane przez stronę (Tip + TooltipHost) ================= */
.tip { display: inline-block; }
.tip.block { display: block; }
.tip.flex { display: flex; }
.tooltip-anchor { position: fixed; width: 0; height: 0; z-index: 10000; pointer-events: none; }
.tooltip-pop {
    position: absolute; left: 0; width: max-content; max-width: 18rem;
    transform: translateX(-50%);
    padding: .45rem .65rem; border-radius: .5rem;
    background: rgba(16,13,10,.96); color: var(--text);
    border: 1px solid rgba(226,184,90,.45);
    box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.65);
    font: 400 .82rem/1.35 "Segoe UI", sans-serif; text-align: left;
    animation: tt-in .14s ease-out;
}
.tooltip-anchor.above .tooltip-pop { bottom: 0; }
.tooltip-anchor.below .tooltip-pop { top: 0; }
.tt-title { color: var(--gold); font-weight: 700; margin-bottom: .15rem; }
.tt-text { white-space: pre-line; color: #d9d2c4; }
@keyframes tt-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }

/* okulary-spirale: powolny obrót */
.fig-spiral { transform-box: fill-box; transform-origin: center; animation: yoyo-spin 3s linear infinite; }
.fig-cape { transform-box: fill-box; transform-origin: 90% 0; animation: cape-sway 3.2s ease-in-out infinite; }
@keyframes cape-sway { 50% { transform: skewX(-4deg); } }
.fig-lens { animation: lens-glow 1.6s ease-in-out infinite; }
@keyframes lens-glow { 50% { filter: drop-shadow(0 0 3px #ff2a1a) brightness(1.4); } }

/* ================= FURIOSO — dziewięć broni, czarno-białe błyski ================= */
.fx.furioso-hit { width: 15%; }
.fx.furioso-hit path, .fx.furioso-hit circle, .fx.furioso-hit rect {
    fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round;
    stroke-dasharray: 220; stroke-dashoffset: 220;
    filter: drop-shadow(0 0 .35em #fff) drop-shadow(0 0 .7em #000);
    animation: draw .18s ease-out forwards, fade .35s .2s forwards;
}
.fx.furioso-hit .thin { stroke-width: 2.5; }
.fx.furioso-hit.last { width: 30%; }
.fx.furioso-hit.last path, .fx.furioso-hit.last circle { stroke-width: 9; stroke: #fff; animation: draw .3s ease-out forwards, fade .7s .45s forwards; filter: drop-shadow(0 0 .6em #fff) drop-shadow(0 0 1.4em #c8281e); }
.furioso-overlay {
    position: absolute; inset: 0; z-index: 176; pointer-events: none;
    display: grid; place-items: center;
    background: rgba(0,0,0,.42);
    animation: fo-flash .32s steps(2) forwards;
}
.furioso-overlay.inv { background: rgba(255,255,255,.18); }
.fo-weapon { position: absolute; left: 6%; bottom: 30%; font: italic 800 1.4em Georgia, serif; color: #fff; letter-spacing: .15em; text-shadow: 0 0 .4em #000; animation: fo-slide .4s ease-out; }
.fo-count { position: absolute; right: 6%; bottom: 30%; font: 700 1.1em Georgia, serif; color: #ddd; }
.fo-title { font: 900 6em Georgia, serif; letter-spacing: .25em; color: #fff; mix-blend-mode: difference; animation: fo-title 1.2s cubic-bezier(.1,.9,.2,1) forwards; }
.furioso-overlay.last { background: #000; animation: fo-last 1.3s forwards; }
@keyframes fo-flash { 0% { opacity: 1; } 100% { opacity: .55; } }
@keyframes fo-slide { from { transform: translateX(-2em); opacity: 0; } }
@keyframes fo-title { 0% { transform: scale(2.2); opacity: 0; filter: blur(8px); } 30% { transform: scale(1); opacity: 1; filter: none; } 100% { transform: scale(1.06); } }
@keyframes fo-last { 0%, 8% { background: #fff; } 16% { background: #000; } 100% { background: rgba(0,0,0,.25); } }
.popup.big.furioso { color: #fff; text-shadow: 0 0 .3em #000, 0 0 .8em #fff; }

/* ================= Akt 3: jumpscare, trzęsienie, upadek, leże, przerwa ================= */
.jumpscare {
    position: absolute; inset: 0; z-index: 9000; display: grid; place-items: center;
    background: #000; overflow: hidden; pointer-events: none;
    animation: js-bg .52s steps(4) forwards;
}
.jumpscare span {
    position: relative; font: 900 clamp(1.4rem, 4vw, 4rem)/1 Impact, "Arial Black", sans-serif;
    color: #ff1a10; letter-spacing: .04em; white-space: nowrap; text-transform: uppercase;
    text-shadow: 0 0 .25em #ff0000, 0 0 .8em #7a0000;
    animation: js-shake .06s steps(2) infinite, js-zoom .52s cubic-bezier(.05,.9,.1,1) forwards;
}
.jumpscare span::before, .jumpscare span::after {
    content: attr(data-text); position: absolute; inset: 0; mix-blend-mode: screen;
}
.jumpscare span::before { color: #ff0060; transform: translate(-6px, 2px); clip-path: inset(10% 0 55% 0); animation: js-glitch .09s steps(2) infinite; }
.jumpscare span::after { color: #ffffff; opacity: .5; transform: translate(5px, -3px); clip-path: inset(60% 0 8% 0); animation: js-glitch .07s steps(2) infinite reverse; }
@keyframes js-bg { 0% { background: #2a0000; } 25% { background: #000; } 50% { background: #3a0000; } 100% { background: #000; } }
@keyframes js-shake { 0% { transform: translate(-8px, 5px) skewX(-6deg); } 100% { transform: translate(9px, -6px) skewX(5deg); } }
@keyframes js-zoom { 0% { scale: 2.2; filter: blur(5px); } 18% { scale: 1; filter: blur(.6px); } 100% { scale: 1.12; filter: blur(1.2px); } }
@keyframes js-glitch { 0% { translate: -10px 0; } 100% { translate: 12px 2px; } }

.stage.quake { animation: quake .09s linear infinite; }
@keyframes quake { 0% { transform: translate(-6px, 3px) rotate(-.4deg); } 50% { transform: translate(5px, -4px) rotate(.3deg); } 100% { transform: translate(-3px, 5px); } }
.floor-crack { position: absolute; left: 0; right: 0; bottom: 0; height: 36%; z-index: 60; pointer-events: none; }
.floor-crack path { fill: none; stroke: #000; stroke-width: 7; stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw .5s ease-out forwards; filter: drop-shadow(0 0 4px #ff3b1f); }
.stage.falling::after { content: ""; position: absolute; inset: 0; z-index: 8000; background: #000; animation: fall-black .9s ease-in forwards; }
.stage.falling .camera { animation: fall-drop .9s ease-in forwards; }
@keyframes fall-black { 0% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes fall-drop { to { transform: translateY(40%) scale(1.15); } }

.backdrop.lair {
    background:
        radial-gradient(ellipse at 50% 35%, rgba(255,60,40,.35), transparent 60%),
        repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 2px, transparent 2px 120px),
        linear-gradient(#8a0f0a, #3a0302 70%, #120000);
    animation: lair-pulse 3.2s ease-in-out infinite;
}
@keyframes lair-pulse { 50% { filter: brightness(1.15) saturate(1.2); } }
.backdrop.lair ~ .floor { background: linear-gradient(#1a0000, #000); }

.intermission {
    position: absolute; inset: 0; z-index: 8500; display: grid; place-items: center;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px), #0b0d14;
    cursor: pointer; animation: fadein .4s;
}
.im-box { text-align: center; max-width: 40rem; padding: 2rem; font-family: "Courier New", monospace; color: #cfe3ff; }
.im-box p { margin: .4rem 0; font-size: 1.15rem; }
.im-icon { font-size: 3rem; color: #6fa3ff; animation: aura 1.4s ease-in-out infinite; }
.im-hold { margin-top: 1.4rem; color: #8a9bc0; animation: im-blink 1.6s steps(2) infinite; }
.im-hint { margin-top: 2rem; font-size: .8rem; color: #667; }
@keyframes im-blink { 50% { opacity: .35; } }

/* ================= Dok ręki: podpowiedź → zakładki → karty (od dołu) ================= */
.hand-dock {
    position: absolute; left: 50%; bottom: 1%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: .45em;
    z-index: 250; max-width: 68%;
}
.hand-dock .hint, .hand-dock .hero-tabs, .hand-dock .hand { position: static; transform: none; left: auto; bottom: auto; max-width: none; }
.hand-dock .hint { min-height: 1.3em; }
.hand-dock .hand .skill-card {
    font-size: .92em; height: 12em; min-height: 0; overflow: hidden;
    /* długi opis wygasa na dole — pełny tekst w dużym podglądzie po najechaniu */
    -webkit-mask-image: linear-gradient(#000 82%, transparent);
    mask-image: linear-gradient(#000 82%, transparent);
}
.hand-dock .hand-slot:hover { transform: translateY(-8%) scale(1.06); }
.coin-count { font-size: .8em; color: #f4ead6; margin-left: .15em; }
.sc-power { flex-wrap: nowrap; white-space: nowrap; }

/* ================= Losowanie monet: wirowanie, lądowanie, migające liczby ================= */
.coin.spinning {
    animation: coin-spin .16s linear infinite;
    background: radial-gradient(circle at 35% 35%, #fffbe0, #e9bd45 60%, #805a10);
    box-shadow: 0 0 .5em rgba(255,214,90,.6);
}
.coin.unbreakable.spinning { background: radial-gradient(circle at 35% 35%, #f4f8ff, #a9c8f0 60%, #3a5a88); }
@keyframes coin-spin { 0% { transform: rotateX(0) translateY(-35%); } 50% { transform: rotateX(180deg) translateY(-55%) scaleY(.15); } 100% { transform: rotateX(360deg) translateY(-35%); } }
.coin.tails { animation: coin-land .38s cubic-bezier(.2,1.6,.4,1); }
.coin.heads { animation: coin-land .38s cubic-bezier(.2,1.6,.4,1), coin-glint .9s ease-out; }
@keyframes coin-land { 0% { transform: translateY(-70%) scale(1.25); } 60% { transform: translateY(8%) scale(.95); } 100% { transform: none; } }
@keyframes coin-glint { 0% { box-shadow: 0 0 0 0 rgba(255,220,100,.9), 0 0 1.6em #ffd34a; } 100% { box-shadow: 0 0 0 .9em rgba(255,220,100,0), 0 0 .7em #ffd34a; } }

.cp-rolls .r.rolling { color: #f4c54f; opacity: .85; animation: num-jitter .08s steps(2) infinite; }
@keyframes num-jitter { 0% { transform: translateY(-4%); } 100% { transform: translateY(4%); } }
.cp-rolls .r.landed { animation: num-slam .42s cubic-bezier(.2,1.5,.4,1); }
@keyframes num-slam { 0% { transform: scale(1.9); opacity: .2; filter: blur(.08em); } 55% { transform: scale(.92); opacity: 1; filter: none; } 100% { transform: none; } }
.cp-rolls .r.landed.win { animation: num-slam .42s cubic-bezier(.2,1.5,.4,1), num-win .9s ease-out; }
@keyframes num-win { 0% { text-shadow: 0 0 1.2em #fff, 0 0 2em #f4c54f; } 100% { text-shadow: 0 0 .4em #f4c54f; } }
.hand-dock .hint { background: rgba(8,6,4,.72); border-radius: 999px; padding: .15em .9em; }

/* ================= Karty v2: zaokrąglone, wyraźny nagłówek (koszt + tytuł) ================= */
.skill-card {
    border-radius: .8em;
    border-width: .12em;
    padding: 0 0 .5em;
    background: linear-gradient(170deg, #241e16, #120f0b 75%);
    box-shadow: inset 0 0 0 .08em rgba(255,255,255,.04), inset 0 0 1.4em rgba(0,0,0,.6), 0 .35em .9em rgba(0,0,0,.65);
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.skill-card > :not(.sc-head):not(.sc-tag) { margin-left: .5em; margin-right: .5em; }
.sc-head {
    gap: .45em;
    padding: .4em .5em .4em .4em;
    margin-bottom: .3em;
    background: linear-gradient(100deg, color-mix(in srgb, var(--rc) 55%, #000) 0%, color-mix(in srgb, var(--rc) 22%, #0c0a08) 70%);
    border-bottom: .08em solid color-mix(in srgb, var(--rc) 70%, #000);
    box-shadow: 0 .15em .4em rgba(0,0,0,.45);
}
.sc-cost {
    width: 1.75em; height: 1.75em; font-size: 1.05em;
    box-shadow: 0 0 0 .1em #2a1e05, 0 0 .5em rgba(255,210,90,.55);
}
.sc-name {
    font: 700 1.02em/1.1 Georgia, serif;
    color: #fff6e2;
    text-shadow: 0 1px 2px #000;
    letter-spacing: .01em;
}
.sc-power { border-radius: .45em; }
.sc-tag { border-radius: 0 0 0 .5em; }
.skill-card.unaffordable .sc-head { filter: saturate(.3); }
.hand-dock .hand-slot:hover .skill-card { box-shadow: 0 0 0 .1em var(--rc), 0 0 1.2em color-mix(in srgb, var(--rc) 60%, transparent), 0 .5em 1em rgba(0,0,0,.7); }
.skill-card .sc-tag { top: 0; right: 0; border-radius: 0 0 0 .5em; font-size: .58em; padding: .05em .5em; }

/* zablokowana karta (np. Furioso): powód na dole karty */
.sc-blocked {
    margin: .35em .5em 0; padding: .2em .4em; border-radius: .4em;
    background: rgba(120,20,15,.55); border: 1px solid rgba(255,120,100,.4);
    color: #ffd2c8; font-size: .72em; line-height: 1.25;
}
.skill-card.unaffordable .sc-blocked { filter: none; }
.hand-dock .hand .skill-card .sc-blocked { position: absolute; left: 0; right: 0; bottom: .3em; z-index: 2; }
.skill-card.blocked > :not(.sc-blocked) { filter: saturate(.25) brightness(.7); }

/* ================= CARNAGE (Stanton) — czerwone pazury i baner przeskoku ================= */
.fx.carnage-hit { width: 16%; }
.fx.carnage-hit path {
    fill: none; stroke: #ff2a1a; stroke-width: 7; stroke-linecap: round;
    stroke-dasharray: 200; stroke-dashoffset: 200;
    filter: drop-shadow(0 0 .35em #ff2a1a) drop-shadow(0 0 .9em #5a0000);
    animation: draw .2s ease-out forwards, fade .5s .3s forwards;
}
.fx.carnage-hit .thin { stroke: #fff; stroke-width: 2.5; }
.carnage-banner {
    position: absolute; left: 0; right: 0; top: 34%; z-index: 178; pointer-events: none;
    display: flex; flex-direction: column; align-items: center;
    background: linear-gradient(90deg, transparent, rgba(90,0,0,.85) 20%, rgba(140,8,4,.9) 50%, rgba(90,0,0,.85) 80%, transparent);
    padding: .4em 0; animation: carnage-in 1.1s cubic-bezier(.1,.9,.2,1) forwards;
}
.carnage-banner span { font: 900 4.2em/1 Impact, "Arial Black", sans-serif; letter-spacing: .18em; color: #ff3020; text-shadow: 0 0 .3em #000, 0 0 .8em #ff2a1a; animation: js-shake .07s steps(2) 6; }
.carnage-banner small { font: italic 700 1.3em Georgia, serif; color: #ffd2c8; }
@keyframes carnage-in { 0% { transform: scaleY(0); opacity: 0; } 15% { transform: scaleY(1.15); opacity: 1; } 25% { transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.popup.big.carnage { color: #ff3020; text-shadow: 0 0 .3em #000, 0 0 .8em #ff2a1a; }

/* ================= Zatrzymanie Czasu: pełne wyszarzenie przez cały czas trwania ================= */
.stage.timestop .unit-info:not(.team-library),
.stage.timestop .unit-info.team-library,
.stage.timestop .sdie,
.stage.timestop .arrows,
.stage.timestop .fx,
.stage.timestop .popup:not(.timestop) { filter: grayscale(1) brightness(.85); }
.stage.timestop .unit-info.time-master, .stage.timestop .sdie.time-master { filter: none; }
.stage.timestop::after {
    content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(40,40,48,.45) 100%);
    animation: ts-breathe 2.4s ease-in-out infinite;
}
@keyframes ts-breathe { 50% { opacity: .6; } }
.timestop-wash { position: absolute; inset: 0; z-index: 185; pointer-events: none; background: #fff; mix-blend-mode: saturation; animation: ts-wash 1.1s ease-out forwards; }
@keyframes ts-wash { 0% { opacity: 1; background: #fff; } 25% { opacity: .9; background: #888; } 100% { opacity: 0; } }
.timestop-clock { animation: ts-tick 1s steps(2) infinite; }
@keyframes ts-tick { 50% { opacity: .65; } }

/* ================= Aktywacja umiejętności ================= */
.ability-fx { position: absolute; inset: 0; z-index: 186; pointer-events: none; display: grid; place-items: center; overflow: hidden; animation: fade 1.6s .9s forwards; }
.ability-fx > span { font: 900 3.4em/1 Georgia, serif; letter-spacing: .2em; color: #fff; text-shadow: 0 0 .4em #000; animation: ab-title 1.2s cubic-bezier(.1,.9,.2,1) forwards; }
@keyframes ab-title { 0% { transform: scale(1.8); opacity: 0; filter: blur(6px); } 30% { transform: scale(1); opacity: 1; filter: none; } 100% { transform: scale(1.04); } }
/* Emilia — Pieczęć Zapomnienia: zielona mgła na krawędziach, rój zielonych motyli leci w stronę wrogów */
.ability-fx.fx-oblivion { background: radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(60,190,110,.35) 78%, rgba(20,60,35,.8) 100%); }
.ability-fx.fx-oblivion > span { color: #e6ffef; text-shadow: 0 0 .3em #3fdc7e, 0 0 1em #1f8f4f; }
.ability-fx.fx-oblivion i {
    position: absolute; left: var(--x); top: var(--y); width: 2em; height: 1.4em; display: flex; justify-content: center;
    filter: drop-shadow(0 0 .35em #4fe38a); opacity: 0;
    animation: bfly-fly 1.5s var(--d) ease-in-out forwards;
}
.ability-fx.fx-oblivion i b {
    width: 50%; height: 100%; background: radial-gradient(ellipse at 30% 40%, #c8ffd9, #4fdc86 45%, #1f8a4c 100%);
    border-radius: 80% 20% 70% 30%; transform-origin: 100% 50%; animation: bfly-flap .18s ease-in-out infinite alternate;
}
.ability-fx.fx-oblivion i b + b { border-radius: 20% 80% 30% 70%; transform-origin: 0 50%; animation-direction: alternate-reverse; }
@keyframes bfly-fly {
    0% { opacity: 0; transform: translate(-30vw, 0) scale(var(--s)) rotate(10deg); }
    15% { opacity: 1; }
    50% { transform: translate(5vw, -12vh) scale(var(--s)) rotate(-8deg); }
    85% { opacity: .9; }
    100% { opacity: 0; transform: translate(40vw, -4vh) scale(calc(var(--s) * .6)) rotate(12deg); }
}
@keyframes bfly-flap { from { transform: scaleX(1); } to { transform: scaleX(.25); } }
.ability-fx.fx-time > span { color: #e4ecff; text-shadow: 0 0 .4em #6fb0ff; }
.ability-fx.fx-generic > span { color: #ffe3a0; }
/* zapieczętowana kość — zapomniana (zielone motyle) */
.sdie.sealed { background: linear-gradient(135deg, #d9ffe6, #6fd99a 60%, #1f7a46) !important; border-color: #e6ffef !important; box-shadow: 0 0 .6em #4fe38a; animation: seal-in .5s ease-out; }
.sdie.sealed .sval { color: #0d2a18; }
@keyframes seal-in { 0% { filter: brightness(2.5); } 100% { filter: none; } }

/* ================= Pękająca podłoga v2: cała podłoga, poświata + czarny rdzeń, od środka na boki ================= */
.floor-crack { position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 46%; z-index: 60; pointer-events: none; overflow: visible; }
.floor-crack path { fill: none; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1800; stroke-dashoffset: 1800; animation: draw .45s cubic-bezier(.3,.7,.3,1) forwards; filter: none; }
.floor-crack .crack-glow path { stroke: #ff5a1f; stroke-width: 16; opacity: .85; filter: blur(4px) drop-shadow(0 0 10px #ff2a1a); }
.floor-crack .crack-core path { stroke: #050202; stroke-width: 6; }
.floor-crack .crack-glow { animation: crack-pulse .5s .45s ease-in-out infinite alternate; }
@keyframes crack-pulse { to { opacity: .55; } }
.stage.quake .floor { animation: quake .09s linear infinite; filter: brightness(1.1); }
.stage.falling .floor, .stage.falling .floor-crack { animation: floor-drop .9s ease-in forwards; }
@keyframes floor-drop { 0% { transform: none; } 100% { transform: translateY(35%) scale(1.05); opacity: .3; } }

/* ================= Upadek do leża: postacie wpadają w szczelinę, pusta arena zostaje ================= */
.stage.falling .camera { animation: none; }
.stage.falling::after { animation: fall-black .9s ease-in forwards; }
.stage.drop-units .unit { animation: unit-drop 1.1s cubic-bezier(.5,0,.9,.6) forwards; }
.stage.drop-units .unit:nth-of-type(2n) { animation-delay: .12s; }
.stage.drop-units .unit:nth-of-type(3n) { animation-delay: .22s; }
.stage.drop-units .unit-info, .stage.drop-units .sdie, .stage.drop-units .arrows { transition: opacity .3s; opacity: 0; }
@keyframes unit-drop {
    0% { transform: translate(-50%, -100%); }
    20% { transform: translate(-50%, -112%) rotate(-3deg); }
    100% { transform: translate(-50%, 120%) rotate(14deg); opacity: 0; }
}

/* ================= Faza 1 w locie: bez podłogi, smugi w górę, kołysanie ================= */
.stage.freefall .floor, .stage.freefall .fig-shadow { opacity: 0; }
.stage.freefall .backdrop.lair {
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 3px, transparent 3px 140px),
        linear-gradient(#2a0000, #7a0f0a 45%, #2a0000);
    background-size: 100% 100%, 100% 100%;
    animation: none;
}
.freefall-wind { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.freefall-wind i {
    position: absolute; bottom: -30%; width: .25%; height: 28%;
    background: linear-gradient(transparent, rgba(255,200,180,.55), transparent);
    animation: wind-up .55s linear infinite;
}
.freefall-wind i:nth-child(1) { left: 6%; animation-delay: -.1s; }
.freefall-wind i:nth-child(2) { left: 18%; animation-delay: -.35s; height: 20%; }
.freefall-wind i:nth-child(3) { left: 31%; animation-delay: -.2s; }
.freefall-wind i:nth-child(4) { left: 44%; animation-delay: -.45s; height: 34%; }
.freefall-wind i:nth-child(5) { left: 57%; animation-delay: -.05s; }
.freefall-wind i:nth-child(6) { left: 69%; animation-delay: -.3s; height: 22%; }
.freefall-wind i:nth-child(7) { left: 82%; animation-delay: -.15s; }
.freefall-wind i:nth-child(8) { left: 93%; animation-delay: -.4s; height: 30%; }
@keyframes wind-up { from { transform: translateY(0); } to { transform: translateY(-480%); } }
.stage.freefall .unit .idle { animation: free-float 1.8s ease-in-out infinite; }
.stage.freefall .unit:nth-of-type(2n) .idle { animation-duration: 2.2s; animation-delay: -.6s; }
@keyframes free-float {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-5%) rotate(4deg); }
}

/* ================= Lądowanie po 1. zachwianiu ================= */
.stage.landing .unit { animation: land-in .5s cubic-bezier(.6,0,.9,.5); }
@keyframes land-in {
    0% { transform: translate(-50%, -260%); }
    80% { transform: translate(-50%, -96%) scaleY(.92); }
    100% { transform: translate(-50%, -100%); }
}
.stage.landing .floor { animation: fadein .3s .35s backwards; }
.land-dust {
    position: absolute; left: -5%; right: -5%; bottom: 30%; height: 22%; z-index: 70; pointer-events: none;
    background: radial-gradient(ellipse at 50% 100%, rgba(200,120,100,.65), rgba(90,20,10,.35) 45%, transparent 70%);
    animation: dust-burst 1.1s .4s ease-out backwards forwards;
}
@keyframes dust-burst { 0% { transform: scale(.3, .2); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.3, 1); opacity: 0; } }

/* podłoga wyżej (50% sceny): tylny rząd postaci (y=54%) stoi na podłodze, a nie na jej krawędzi */
.floor { height: 50%; }
.floor-crack { height: 50%; }

/* spadanie v2: postacie koziołkują (pełny obrót) i są lekko przechylone, każda w innym tempie i kierunku */
.stage.freefall .unit .idle { transform-origin: 50% 55%; animation: tumble 6s linear infinite; }
.stage.freefall .unit:nth-of-type(2n) .idle { animation: tumble-rev 7.5s linear infinite; animation-delay: -2s; }
.stage.freefall .unit:nth-of-type(3n) .idle { animation-duration: 5s; animation-delay: -3.5s; }
.stage.freefall .unit.team-guests .idle { animation: tumble-slow 9s ease-in-out infinite; }
@keyframes tumble {
    0% { transform: rotate(-18deg) translateY(0); }
    50% { transform: rotate(162deg) translateY(-4%); }
    100% { transform: rotate(342deg) translateY(0); }
}
@keyframes tumble-rev {
    0% { transform: rotate(15deg) translateY(-3%); }
    50% { transform: rotate(-165deg) translateY(1%); }
    100% { transform: rotate(-345deg) translateY(-3%); }
}
/* Stanton spada spokojnie — kołysze się, jakby to on tu rządził */
@keyframes tumble-slow { 0%, 100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(12deg) translateY(-5%); } }

/* ================= Wybór celu: celownik na obecnym celu, pulsujące możliwe cele ================= */
.stage.planning .sdie.targetable { cursor: crosshair; animation: target-pulse 1.1s ease-in-out infinite; }
@keyframes target-pulse { 0%, 100% { box-shadow: 0 0 .5em .1em rgba(229,72,61,.6); } 50% { box-shadow: 0 0 1.3em .45em rgba(255,90,74,.95); } }
.stage.planning .sdie.targetable:hover { transform: translate(-50%, -50%) rotate(45deg) scale(1.18); }
.sdie.current-target { box-shadow: 0 0 0 .2em #ffd34a, 0 0 1.4em .5em rgba(255,211,74,.85) !important; animation: none !important; }
.sdie .reticle {
    position: absolute; inset: -55%; border-radius: 50%; pointer-events: none;
    border: .16em dashed #ffd34a; transform: rotate(-45deg);
    animation: reticle-spin 2.4s linear infinite;
}
.sdie .reticle::before, .sdie .reticle::after {
    content: ""; position: absolute; left: 50%; top: -12%; width: .16em; height: 124%; background: linear-gradient(#ffd34a 0 18%, transparent 18% 82%, #ffd34a 82%); transform: translateX(-50%);
}
.sdie .reticle::after { transform: translateX(-50%) rotate(90deg); }
@keyframes reticle-spin { to { transform: rotate(315deg); } }
/* warstwa = kość obrócona z powrotem o −45° → napis zawsze prosto nad kością */
.sdie .target-tag { position: absolute; inset: 0; transform: rotate(-45deg); display: flex; justify-content: center; align-items: flex-start; pointer-events: none; }
.sdie .target-tag b {
    transform: translateY(-165%);
    font: 800 .55em/1 "Segoe UI", sans-serif; letter-spacing: .15em; color: #1a1205;
    background: #ffd34a; padding: .2em .45em; border-radius: .3em; white-space: nowrap; box-shadow: 0 0 .6em rgba(255,211,74,.7);
}
.hand-dock .hint .targeting { display: inline-block; color: #1a1205; background: #ffd34a; border-radius: 999px; padding: .1em .8em; font-weight: 700; box-shadow: 0 0 1em rgba(255,211,74,.5); }
.hand-dock .hint:has(.targeting) { background: none; padding: 0; }

/* ================= Karty: atak vs obrona od pierwszego rzutu oka ================= */
.skill-card.kind-attack { background: linear-gradient(170deg, #34160f, #170b08 72%); }
.skill-card.kind-defense { background: linear-gradient(170deg, #11243a, #0a121c 72%); }
.skill-card.kind-defense.type-evade { background: linear-gradient(170deg, #0f2e2a, #081613 72%); }
.sc-type {
    margin: .2em 0 .25em !important; padding: .15em .45em; border-radius: .4em;
    background: color-mix(in srgb, var(--tc) 22%, transparent);
    border-left: .25em solid var(--tc);
}
.sc-kind { font-weight: 900; color: #fff; background: var(--tc); padding: 0 .35em; border-radius: .25em; margin-right: .15em; letter-spacing: .04em; }
.skill-card.kind-attack { box-shadow: inset 0 -.25em 0 rgba(229,72,61,.35), inset 0 0 1.4em rgba(0,0,0,.6), 0 .35em .9em rgba(0,0,0,.65); }
.skill-card.kind-defense { box-shadow: inset 0 -.25em 0 rgba(79,138,216,.45), inset 0 0 1.4em rgba(0,0,0,.6), 0 .35em .9em rgba(0,0,0,.65); }

/* ================= Okienko informacji o postaci ================= */
.unit-hit { position: absolute; left: 22%; right: 22%; top: 12%; bottom: 0; pointer-events: auto; cursor: help; z-index: 1; }
.stage.resolving .unit-hit { pointer-events: none; }
.unit-info { cursor: pointer; }
.unit-info:hover { border-color: rgba(226,184,90,.6); }
.unit-panel-backdrop { position: absolute; inset: 0; z-index: 320; background: rgba(0,0,0,.35); animation: fadein .15s; }
.unit-panel {
    position: absolute; top: 4%; bottom: 4%; width: 34%; overflow-y: auto;
    padding: 1em 1.2em; border-radius: 1em;
    background: linear-gradient(170deg, rgba(30,24,18,.97), rgba(12,10,8,.97));
    border: 1px solid rgba(226,184,90,.4); box-shadow: 0 1em 2.5em rgba(0,0,0,.7);
    font-size: .95em; animation: up-in .2s ease-out;
}
.unit-panel.left { left: 2%; } .unit-panel.right { right: 2%; }
@keyframes up-in { from { transform: translateY(1.5em); opacity: 0; } }
.up-close { position: absolute; top: .5em; right: .6em; background: none; border: none; color: var(--muted); font-size: 1.3em; cursor: pointer; }
.up-close:hover { color: #fff; }
.up-head { display: flex; gap: .8em; align-items: center; }
.up-fig { width: 5.5em; height: 7em; flex: none; }
.up-fig .figure { width: 100%; height: 100%; }
.unit-panel.right .up-fig .figure { transform: scaleX(-1); }
.unit-panel h2 { margin: 0; font-family: Georgia, serif; color: var(--gold); }
.unit-panel h3 { margin: .8em 0 .3em; font-size: .85em; text-transform: uppercase; letter-spacing: .12em; color: var(--gold-dim); border-bottom: 1px solid rgba(226,184,90,.2); padding-bottom: .15em; }
.up-title { color: var(--muted); font-style: italic; }
.up-state { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .3em; }
.up-state .st { font-size: .75em; font-weight: 800; padding: .1em .45em; border-radius: .3em; background: #333; }
.st.stg { background: var(--stagger); color: #111; } .st.pan { background: #6a3fd6; } .st.stun { background: #555; }
.st.dead { background: #300; } .st.shadow { background: #222; border: 1px solid #555; } .st.time { background: #1e3a66; color: #cfe3ff; }
.up-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3em .8em; margin-top: .7em; }
.up-stat b { display: block; font-size: .72em; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.up-res { display: flex; flex-wrap: wrap; gap: .4em; }
.up-res .res { display: inline-flex; align-items: center; gap: .3em; padding: .15em .5em; border-radius: .4em; background: rgba(255,255,255,.05); font-size: .85em; }
.res.r-weak, .res.r-fatal { background: rgba(229,72,61,.25); } .res.r-endured, .res.r-ineffective, .res.r-immune { background: rgba(79,138,216,.25); }
.up-item { display: flex; gap: .5em; margin: .3em 0; font-size: .88em; line-height: 1.3; }
.up-item.pos .up-icon { color: #7fe0a0; } .up-item.neg .up-icon { color: #ff8a7a; }
.up-icon { flex: none; width: 1.3em; text-align: center; font-size: 1.1em; color: var(--gold); }
.up-rule { color: var(--muted); font-size: .9em; }
.up-ready { font-size: .8em; color: var(--muted); } .up-ready.ok { color: #7fe0a0; }
.up-plan { margin: .2em 0; } .up-die { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; background: #1e3460; border-radius: .25em; font-weight: 800; }
.up-hand { display: flex; flex-wrap: wrap; gap: .4em; }
.up-hand .skill-card { font-size: .72em; width: 11em; }
.up-family { margin-top: .8em; font-size: .85em; }

/* pasek typu karty zawsze w jednej linii (węższe karty w ręce) */
.sc-type { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.sc-kind { font-size: .9em; padding: 0 .3em; flex: none; }
.sc-type > span:last-of-type { overflow: hidden; text-overflow: ellipsis; }

/* ================= Podpowiedź celowania — ciemna plakietka w stylu UI (zamiast żółtego paska) ================= */
.hand-dock .hint .targeting {
    display: inline-flex; align-items: center; gap: .4em;
    color: var(--muted); background: rgba(14,11,8,.92);
    border: 1px solid rgba(226,184,90,.5); border-radius: .6em;
    padding: .2em .9em; font-weight: 400; box-shadow: 0 .2em .8em rgba(0,0,0,.5), 0 0 .8em rgba(226,184,90,.15);
}
.hand-dock .hint .targeting b { color: #f4ead6; font-weight: 700; }
.hand-dock .hint .targeting b.tgt { color: #ffd34a; }
.hand-dock .hint .targeting .sep { color: var(--gold-dim); }

/* ================= Prognoza po najechaniu na kość wroga ================= */
.sdie .hover-forecast { position: absolute; inset: 0; transform: rotate(-45deg); display: flex; justify-content: center; align-items: flex-end; pointer-events: none; z-index: 3; }
.sdie .hover-forecast b {
    transform: translateY(175%);
    font: 700 .5em/1 "Segoe UI", sans-serif; white-space: nowrap; padding: .3em .5em; border-radius: .35em;
    background: rgba(14,11,8,.95); border: 1px solid currentColor; box-shadow: 0 .2em .6em rgba(0,0,0,.6);
}
.hover-forecast.dominating b, .hover-forecast.favored b { color: #a8f0b0; }
.hover-forecast.even b { color: #f4c54f; }
.hover-forecast.struggling b, .hover-forecast.hopeless b { color: #ffb7a5; }
.hover-forecast.onesided b { color: #ff8a7a; }
.preview-panel.hovering { outline: 1px dashed rgba(226,184,90,.5); outline-offset: .3em; }
.pv-hint { position: absolute; top: -1.6em; left: 50%; transform: translateX(-50%); font-size: .75em; color: var(--gold); white-space: nowrap; letter-spacing: .05em; }

/* ================= Przywołanie Psa (Egzekutor): pies przebiega przez scenę, drużyna się leczy ================= */
.dog-summon { position: absolute; left: 0; right: 0; top: calc(var(--y) - 9%); height: 10%; z-index: 175; pointer-events: none; }
.dog-summon .dog { position: absolute; width: 9%; height: 100%; left: -12%; animation: dog-run 1.7s cubic-bezier(.3,.1,.4,1) forwards; overflow: visible; }
.dog-summon.rev .dog { animation-name: dog-run-rev; transform: scaleX(-1); }
.dog path, .dog ellipse { fill: #1a1310; stroke: #f1ede4; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.dog .leg { fill: none; stroke: #1a1310; stroke-width: 5; }
.dog .leg.l1 { animation: dog-leg .18s ease-in-out infinite alternate; transform-origin: 50% 0; transform-box: fill-box; }
.dog .leg.l2 { animation: dog-leg .18s ease-in-out infinite alternate-reverse; transform-origin: 50% 0; transform-box: fill-box; }
.dog .tail { fill: none; stroke: #1a1310; stroke-width: 4; animation: dog-tail .2s ease-in-out infinite alternate; transform-origin: 100% 100%; transform-box: fill-box; }
.dog .collar { fill: none; stroke: #c8281e; stroke-width: 3.5; }
.dog .eye { fill: #fff; stroke: none; }
@keyframes dog-run { 0% { left: -12%; } 70% { left: 62%; } 100% { left: 108%; } }
@keyframes dog-run-rev { 0% { left: 108%; } 70% { left: 30%; } 100% { left: -12%; } }
@keyframes dog-leg { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes dog-tail { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
.dog-heal-label { position: absolute; left: 50%; top: -60%; transform: translateX(-50%); font: 700 1.3em Georgia, serif; color: #8dffb0; text-shadow: 0 0 .4em #000, 0 0 .8em #2fbf6a; white-space: nowrap; animation: fadein .3s .5s backwards, fade .6s 1.4s forwards; }
.stage.dog-heal.dog-lib .unit.team-library:not(.dead) .figure,
.stage.dog-heal.dog-guests .unit.team-guests:not(.dead) .figure { filter: drop-shadow(0 0 .7em #4dff8a) drop-shadow(0 0 .2em #fff); transition: filter .3s; }
.popup.heal { color: #8dffb0; text-shadow: 0 0 .3em #000, 0 0 .6em #2fbf6a; font-weight: 800; }

.popup.big.pride { color: #f4c54f; text-shadow: 0 0 .3em #000, 0 0 .8em #c8281e; letter-spacing: .08em; }

/* ================= Zablokowana karta = tajemnica (cała karta zakryta) ================= */
.skill-card.blocked > :not(.sc-mystery) { filter: blur(.12em) saturate(0) brightness(.45); }
.sc-mystery {
    position: absolute; inset: 0; z-index: 4; border-radius: inherit; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(120,90,200,.25), transparent 65%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 6px, transparent 6px 12px),
        rgba(8,6,12,.72);
    border: 1px solid rgba(180,150,255,.35);
    text-align: center;
}
.sc-mystery::after { content: ""; position: absolute; inset: -50%; background: linear-gradient(115deg, transparent 40%, rgba(200,180,255,.18) 50%, transparent 60%); animation: mystery-shine 3.2s ease-in-out infinite; }
@keyframes mystery-shine { from { transform: translateX(-40%); } to { transform: translateX(40%); } }
.sc-mystery-lock { font-size: 2.4em; filter: drop-shadow(0 0 .3em #b8a8f0); animation: mystery-bob 2.2s ease-in-out infinite; }
@keyframes mystery-bob { 50% { transform: translateY(-6%) rotate(-4deg); } }
.sc-mystery-q { font: 900 1.4em Georgia, serif; letter-spacing: .3em; color: #d8ccff; text-shadow: 0 0 .4em #6f5bb8; }
.sc-mystery-why { margin: .2em .5em 0; font-size: .68em; line-height: 1.25; color: #cfc4f0; max-height: 4.2em; overflow: hidden; }
.sc-blocked { display: none; }
.state.stun { color: #fff; background: #6a6a74; }

/* ================= Pies v2: od przywołującego do przeciwnika, ugryzienie ================= */
.dog-summon { position: absolute; inset: 0; top: 0; height: auto; z-index: 175; pointer-events: none; }
.dog-summon .dog {
    position: absolute; width: 9%; height: auto; aspect-ratio: 120 / 70;
    left: var(--x0); top: calc(var(--y0) - 9%); transform: translateX(-50%);
    animation: dog-run2 1.5s cubic-bezier(.35,.1,.3,1) forwards;
}
.dog-summon.rev .dog { transform: translateX(-50%) scaleX(-1); animation-name: dog-run2-rev; }
@keyframes dog-run2 {
    0% { left: var(--x0); top: calc(var(--y0) - 9%); opacity: 0; }
    10% { opacity: 1; }
    55% { left: var(--x1); top: calc(var(--y1) - 9%); }
    62% { left: calc(var(--x1) + 2%); top: calc(var(--y1) - 13%); }    /* skok do gardła */
    72% { left: var(--x1); top: calc(var(--y1) - 9%); }
    100% { left: var(--x1); top: calc(var(--y1) - 9%); opacity: 0; }
}
@keyframes dog-run2-rev {
    0% { left: var(--x0); top: calc(var(--y0) - 9%); opacity: 0; }
    10% { opacity: 1; }
    55% { left: var(--x1); top: calc(var(--y1) - 9%); }
    62% { left: calc(var(--x1) - 2%); top: calc(var(--y1) - 13%); }
    72% { left: var(--x1); top: calc(var(--y1) - 9%); }
    100% { left: var(--x1); top: calc(var(--y1) - 9%); opacity: 0; }
}
.dog-bite { position: absolute; width: 7%; aspect-ratio: 1; transform: translate(-50%, -50%); opacity: 0; animation: dog-bite .5s .85s ease-out forwards; }
.dog-bite path { fill: none; stroke: #fff; stroke-width: 7; stroke-linejoin: round; filter: drop-shadow(0 0 .3em #ff3a2a); }
@keyframes dog-bite { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; } }
.dog-summon .dog-heal-label { position: absolute; transform: translateX(-50%); }

/* ================= Przechwyt: znacznik ⇄ na kościach, które da się przechwycić ================= */
.sdie .intercept-mark { position: absolute; inset: 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: flex-end; pointer-events: none; z-index: 2; }
.sdie .intercept-mark b {
    transform: translate(55%, -70%);
    font: 900 .62em/1 "Segoe UI", sans-serif; color: #1a1205; background: #7fe0a0;
    border-radius: 50%; width: 1.5em; height: 1.5em; display: grid; place-items: center;
    box-shadow: 0 0 .5em rgba(127,224,160,.8); animation: pulse 1.2s ease-in-out infinite;
}
.stage.planning .sdie.interceptable { box-shadow: 0 0 0 .14em #7fe0a0, 0 0 1em .3em rgba(127,224,160,.55); }

/* ================= Tajemniczy bohater (odblokowanie sceną, np. Stanton) ================= */
.roster-card.secret { position: relative; cursor: default; overflow: hidden; }
.roster-card.secret:hover { transform: none; border-color: rgba(180,150,255,.45); }
.roster-card.secret .rc-fig .figure { filter: brightness(0) drop-shadow(0 0 .35em rgba(150,120,240,.6)); }
.roster-card.secret .sc-mystery { background: radial-gradient(ellipse at 50% 35%, rgba(120,90,200,.18), transparent 65%), rgba(8,6,12,.35); }
.roster-card.secret .sc-mystery-why { font-size: .78rem; max-height: none; }

/* ================= UnitPanel: statusy i słowniczek ================= */
.unit-panel .up-kind { font-size: .72em; color: var(--muted); margin-left: .3em; text-transform: uppercase; letter-spacing: .05em; }
.unit-panel .up-glossary { margin: .4rem 0 .2rem; padding: .35rem .6rem; border: 1px solid #3a2f1e; border-radius: .5rem; background: rgba(0,0,0,.25); }
.unit-panel .up-glossary summary { cursor: pointer; color: var(--gold-dim, #b89a5a); font-size: .85rem; }
.unit-panel .up-kw { font-size: .8rem; margin: .3rem 0; line-height: 1.3; }
.unit-panel .up-kw b { color: var(--gold, #e2b85a); }