/* ================= Przycisk „Wstecz” ================= */
.topbar-left { display: flex; align-items: center; gap: .8em; }
.back-btn { white-space: nowrap; }
.act-back { display: flex; gap: .5em; }
.error-screen .btn { margin-top: 1rem; }

/* ================= Gacha: motywy banerów, intro, omen, splash ================= */
.gacha { --accent: var(--gold); --accent-rgb: 226,184,90; }
.gacha-frost { --accent: #7be0a0; --accent-rgb: 110,220,150; }
.gacha-headsman { --accent: #ff4a3a; --accent-rgb: 255,60,45; }

.banner-tab { display: inline-flex; align-items: center; gap: .45rem; transition: color .25s, border-color .25s, box-shadow .25s; }
.banner-tab .bt-glyph { opacity: .7; }
.banner-tab.tab-frost .bt-glyph { color: #7be0a0; }
.banner-tab.tab-headsman .bt-glyph { color: #ff4a3a; }
.banner-tab.tab-standard .bt-glyph { color: var(--gold); }
.banner-tab:hover { color: #fff; }
.banner-tab.on { border-color: var(--accent); box-shadow: 0 0 1rem rgba(var(--accent-rgb), .35), inset 0 0 .8rem rgba(var(--accent-rgb), .12); }
.banner-tab.on .bt-glyph { opacity: 1; }

.banner { position: relative; overflow: hidden; border-color: rgba(var(--accent-rgb), .35); box-shadow: 0 0 2.5rem rgba(var(--accent-rgb), .08), inset 0 0 4rem rgba(0,0,0,.6); animation: banner-in .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes banner-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.banner > .banner-left, .banner > .banner-info { position: relative; z-index: 1; }
.banner-left { display: flex; flex-direction: column; gap: .6rem; }
.banner-info { background: rgba(0,0,0,.38); border: 1px solid rgba(var(--accent-rgb), .18); border-radius: .9rem; padding: 1rem 1.2rem; }
.banner-desc { margin-top: 0; }
.banner-title { display: flex; flex-direction: column; }
.banner-title small { font-size: .72rem; letter-spacing: .35em; color: rgba(var(--accent-rgb), .9); }
.banner-title span { font-family: Georgia, serif; font-size: 2.3rem; line-height: 1.1; color: #fff; text-shadow: 0 0 1.2rem rgba(var(--accent-rgb), .55), 0 .1em .3em #000; animation: title-in .9s .15s cubic-bezier(.2,.8,.2,1) both; }
.banner-title em { color: var(--muted); font-family: Georgia, serif; margin-top: .2rem; animation: fadein 1.2s .4s both; }
@keyframes title-in { from { opacity: 0; letter-spacing: .25em; filter: blur(6px); } }
.banner-art { flex: 1; min-height: 340px; }
.banner-hero { position: relative; }
.bh-glow { position: absolute; left: 50%; bottom: 3.2rem; width: 240px; height: 240px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .35), transparent 65%); animation: bh-glow 3.5s ease-in-out infinite; }
@keyframes bh-glow { 50% { transform: translateX(-50%) scale(1.12); opacity: .7; } }
.bh-fig { position: relative; animation: bh-float 4s ease-in-out infinite; }
.bh-fig .figure { height: 280px; }
@keyframes bh-float { 50% { transform: translateY(-6px); } }
.banner-hero.owned { opacity: .8; }
.banner-hero.owned .bh-fig { filter: saturate(.6); }
.bh-name { position: relative; }

.btn.pull { transition: transform .15s, box-shadow .25s; }
.btn.pull.ten { border-color: var(--accent); box-shadow: 0 0 1rem rgba(var(--accent-rgb), .35); background: linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(0,0,0,.2)); }
.btn.pull:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 1.4rem rgba(var(--accent-rgb), .5); }
.pity-bar div { background: linear-gradient(90deg, rgba(var(--accent-rgb), .45), var(--accent)); }

/* ---------- ambientowe cząsteczki banera ---------- */
.banner-fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.banner-fx i { position: absolute; top: -8%; left: var(--x); width: calc(14px * var(--s)); height: calc(9px * var(--s)); opacity: 0; animation: amb-fall var(--t) var(--d) linear infinite; }
@keyframes amb-fall {
    0% { opacity: 0; transform: translate(0, 0) rotate(var(--r)); }
    10% { opacity: .8; }
    50% { transform: translate(40px, 380px) rotate(calc(var(--r) + 200deg)); }
    90% { opacity: .6; }
    100% { opacity: 0; transform: translate(-20px, 760px) rotate(calc(var(--r) + 420deg)); }
}
.fx-frost i { border-radius: 0 80% 0 80%; background: linear-gradient(135deg, #8ff0b0, #2f8a52); box-shadow: 0 0 6px rgba(120,230,160,.5); }
.fx-standard i { border-radius: 2px; background: linear-gradient(#f4e6c0, #b8964f); width: calc(10px * var(--s)); height: calc(13px * var(--s)); }
.fx-headsman i { top: auto; bottom: -10%; border-radius: 50%; width: calc(70px * var(--s)); height: calc(70px * var(--s)); background: radial-gradient(circle, rgba(200,30,20,.25), transparent 70%); animation-name: amb-mist; }
@keyframes amb-mist { 0% { opacity: 0; transform: translateY(0) scale(1); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-420px) scale(2.2); } }
.banner-fx .fly { position: absolute; left: var(--x); bottom: -10%; width: 26px; opacity: 0; animation: amb-fly 11s var(--d) ease-in-out infinite; }
@keyframes amb-fly {
    0% { opacity: 0; transform: translate(0, 0); }
    15% { opacity: .9; }
    35% { transform: translate(40px, -180px) rotate(10deg); }
    60% { transform: translate(-30px, -360px) rotate(-12deg); }
    85% { opacity: .8; }
    100% { opacity: 0; transform: translate(20px, -620px); }
}
.butterfly { display: block; width: 100%; overflow: visible; filter: drop-shadow(0 0 4px #5cf090); }
.butterfly path { fill: #6ff0a0; stroke: #2a8a50; stroke-width: .5; }
.butterfly .body { fill: #10301c; }
.butterfly .wing { transform-box: fill-box; animation: flap .28s ease-in-out infinite alternate; }
.butterfly .wing.l { transform-origin: right center; }
.butterfly .wing.r { transform-origin: left center; }
@keyframes flap { to { transform: scaleX(.25); } }

/* oczy Egzekutora (ambient banera i intro) */
.bfx-eyes b, .eye-spin b { display: block; width: 34px; height: 12px; border-radius: 50% / 100% 100% 40% 40%; background: radial-gradient(ellipse at center, #fff 0 8%, #ff3a2a 22%, #9a0d05 70%); box-shadow: 0 0 10px #ff2a1a, 0 0 24px rgba(255,40,20,.8); }
.bfx-eyes b:first-child, .eye-spin b:first-child { transform: rotate(12deg); }
.bfx-eyes b:last-child, .eye-spin b:last-child { transform: rotate(-12deg); }
.bfx-eyes { position: absolute; right: 6%; top: 10%; display: flex; gap: 22px; opacity: 0; animation: amb-eyes 9s 2s ease-in-out infinite; }
@keyframes amb-eyes { 0%, 100% { opacity: 0; } 8%, 30% { opacity: .85; } 32% { opacity: 0; } 34%, 45% { opacity: .85; } 55% { opacity: 0; } }

/* ---------- intro banera (przy wejściu do Archiwum i zmianie banera) ---------- */
/* w trakcie intro nakładka łapie kliknięcia (blokuje losowanie i zakładki); po animacji visibility: hidden ją wyłącza */
.banner-intro { position: fixed; inset: 0; z-index: 850; pointer-events: auto; cursor: wait; overflow: hidden; display: flex; align-items: center; justify-content: center; animation: intro-life 2.9s ease-in forwards; }
@keyframes intro-life { 0%, 72% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.intro-standard { background: radial-gradient(circle, rgba(60,44,18,.96), rgba(8,6,3,.98) 70%); }
.intro-frost { background: radial-gradient(circle at 50% 40%, rgba(16,52,30,.96), rgba(3,10,6,.99) 75%); }
.intro-headsman { background: #000; }
.intro-title { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; opacity: 0; animation: intro-title 2.4s .55s cubic-bezier(.2,.8,.2,1) forwards; }
.intro-title small { letter-spacing: .5em; font-size: .9rem; color: var(--gold); }
.intro-title span { font-family: Georgia, serif; font-size: clamp(2rem, 6vw, 4.5rem); color: #fff; letter-spacing: .08em; text-shadow: 0 0 2rem rgba(255,220,140,.6); }
.intro-frost .intro-title small { color: #7be0a0; }
.intro-frost .intro-title span { text-shadow: 0 0 2rem rgba(110,240,160,.7); }
.intro-headsman .intro-title { animation-delay: 1.4s; animation-duration: 1.5s; }
.intro-headsman .intro-title small { color: #ff6a5a; }
.intro-headsman .intro-title span { text-shadow: 0 0 1.5rem rgba(255,40,20,.9), 0 0 .2rem #000; }
@keyframes intro-title { 0% { opacity: 0; transform: scale(1.25); filter: blur(10px); letter-spacing: .4em; } 25% { opacity: 1; transform: scale(1); filter: blur(0); letter-spacing: .08em; } 100% { opacity: 1; transform: scale(.97); } }

/* Ogród Zapomnienia: zaczyna się deszczem liści, potem zielone motyle */
.leaf { position: absolute; top: -6%; left: var(--x); width: calc(22px * var(--s)); height: calc(13px * var(--s)); border-radius: 0 80% 0 80%; background: linear-gradient(135deg, #a8ffc4, #2f9a5a 60%, #155a30); box-shadow: 0 0 8px rgba(120,240,160,.5); animation: leaf-fall var(--t) var(--d) cubic-bezier(.4,.1,.6,1) both; }
@keyframes leaf-fall {
    0% { transform: translate(0, 0) rotate(var(--r)); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translate(calc(120px - var(--s) * 80px), 112vh) rotate(calc(var(--r) + 540deg)); opacity: .9; }
}
.banner-intro .fly { position: absolute; left: var(--x); bottom: -8%; width: 40px; animation: intro-fly 2.2s var(--d) cubic-bezier(.3,.6,.4,1) both; }
@keyframes intro-fly { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(60px, -95vh) scale(1.2) rotate(-15deg); } }

/* Ulice Cienia: w ciemności otwierają się czerwone oczy, wirują, cięcie — i baner */
.eye-vortex { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.eye-spin { display: flex; gap: 46px; opacity: 0; animation: eyes-spin 1.6s .15s cubic-bezier(.6,0,.4,1) forwards; }
.eye-spin b { width: 70px; height: 22px; }
@keyframes eyes-spin {
    0% { opacity: 0; transform: scale(.6) rotate(0); }
    18% { opacity: 1; transform: scale(1) rotate(0); }
    30% { transform: scale(1) rotate(0); }
    85% { opacity: 1; transform: scale(1.5) rotate(900deg); filter: blur(1px); }
    100% { opacity: 0; transform: scale(4) rotate(1080deg); filter: blur(6px); }
}
.eye-ring { position: absolute; width: 260px; height: 260px; border-radius: 50%; opacity: 0;
    background: conic-gradient(from 0deg, transparent, rgba(255,40,20,.85), transparent 30%, transparent 50%, rgba(255,40,20,.85), transparent 80%);
    -webkit-mask: radial-gradient(circle, transparent 55%, #000 57%, #000 62%, transparent 64%);
    mask: radial-gradient(circle, transparent 55%, #000 57%, #000 62%, transparent 64%);
    animation: ring-spin 1.6s .5s ease-in forwards; }
@keyframes ring-spin { 0% { opacity: 0; transform: rotate(0) scale(.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(-720deg) scale(3.5); } }
.slash { position: absolute; left: -10%; right: -10%; top: 50%; height: 3px; background: linear-gradient(90deg, transparent, #fff 40%, #ff3a2a 60%, transparent); box-shadow: 0 0 20px #ff2a1a; transform: scaleX(0) rotate(-8deg); animation: slash .5s 1.25s cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes slash { 0% { transform: rotate(-8deg) scaleX(0); opacity: 1; } 60% { transform: rotate(-8deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-8deg) scaleX(1) scaleY(30); opacity: 0; } }
.intro-headsman::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,40,20,.6), transparent 70%); opacity: 0; animation: red-flash .6s 1.3s ease-out forwards; }
@keyframes red-flash { 30% { opacity: 1; } 100% { opacity: 0; } }

/* Archiwum Zapomnianych Stron: rozsypujące się złote strony */
.page-burst { position: absolute; left: 50%; top: 50%; }
.page-burst i { position: absolute; width: 26px; height: 34px; margin: -17px -13px; border-radius: 2px; background: linear-gradient(#fff8e2, #d8b870); box-shadow: 0 0 12px rgba(255,220,140,.7); opacity: 0; animation: page-fly 1.6s var(--d) cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes page-fly { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-48vh) rotate(260deg); } }

/* ---------- omen losowania: spadająca gwiazda, kolor = najlepsza rzadkość ---------- */
.pull-grid.hidden { visibility: hidden; }
.pull-omen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; --c: #9fd0aa; }
.pull-omen.s2 { --c: #6fa8ff; }
.pull-omen.s3 { --c: #c48bff; }
.pull-omen.s4 { --c: #ffd34a; }
.theme-frost .pull-omen.s4 { --c: #9affc0; }
.theme-headsman .pull-omen.s4 { --c: #ff5a3a; }
.meteor { position: absolute; left: 105%; top: -10%; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 20px 8px var(--c), 0 0 60px 20px var(--c); animation: meteor 1.1s .1s cubic-bezier(.5,0,.8,.6) forwards; }
.meteor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46vw; height: 6px; margin-top: -3px; transform-origin: left center; transform: rotate(-32deg); background: linear-gradient(90deg, var(--c), transparent); border-radius: 999px; filter: blur(1px); }
@keyframes meteor { to { left: 47%; top: 46%; } }
.pull-omen::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 48% 48%, #fff, var(--c) 15%, transparent 55%); opacity: 0; animation: omen-burst .9s 1.15s ease-out forwards; }
@keyframes omen-burst { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(2.2); } }
.pull-omen.s4::before { content: ""; position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, transparent 0 8deg, rgba(255,230,140,.16) 8deg 12deg); opacity: 0; animation: omen-rays 1.3s 1.2s ease-out forwards; }
.theme-frost .pull-omen.s4::before { background: repeating-conic-gradient(from 0deg, transparent 0 8deg, rgba(140,255,180,.18) 8deg 12deg); }
.theme-headsman .pull-omen.s4::before { background: repeating-conic-gradient(from 0deg, transparent 0 8deg, rgba(255,50,30,.2) 8deg 12deg); }
@keyframes omen-rays { 0% { opacity: 0; transform: rotate(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(40deg); } }
.eye-vortex.late .eye-spin { animation-delay: 1.0s; }
.eye-vortex.late .eye-ring { animation-delay: 1.3s; }
.pull-overlay .pull-card { animation: card-in .45s var(--d) cubic-bezier(.2,.8,.2,1) both; }
@keyframes card-in { from { opacity: 0; translate: 0 30px; } }

/* ---------- splash bohatera ★★★★ ---------- */
.hero-splash { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 3rem; padding: 0 16px; background: radial-gradient(circle at 40% 50%, rgba(80,60,15,.97), rgba(5,4,2,.98) 70%); animation: fadein .35s; overflow: hidden; }
.hero-splash.theme-frost { background: radial-gradient(circle at 40% 50%, rgba(20,80,45,.97), rgba(2,8,4,.98) 70%); }
.hero-splash.theme-headsman { background: radial-gradient(circle at 40% 50%, rgba(90,10,6,.97), rgba(3,0,0,.99) 70%); }
.hsp-rays { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, transparent 0 9deg, rgba(255,230,140,.08) 9deg 13deg); animation: rays-rot 30s linear infinite; }
.theme-frost .hsp-rays { background: repeating-conic-gradient(from 0deg, transparent 0 9deg, rgba(140,255,180,.08) 9deg 13deg); }
.theme-headsman .hsp-rays { background: repeating-conic-gradient(from 0deg, transparent 0 9deg, rgba(255,50,30,.09) 9deg 13deg); }
@keyframes rays-rot { to { transform: rotate(360deg); } }
.hsp-figure { position: relative; height: 70vh; width: 34vh; animation: hsp-fig .9s cubic-bezier(.2,.8,.2,1) both; filter: drop-shadow(0 0 2rem rgba(255,220,140,.4)); }
.hsp-figure .figure { height: 100%; }
@keyframes hsp-fig { from { opacity: 0; transform: translateX(-80px) scale(1.1); filter: brightness(3) blur(8px); } }
.hsp-text { position: relative; animation: hsp-text .9s .3s cubic-bezier(.2,.8,.2,1) both; }
.hsp-text .stars { font-size: 1.8rem; }
.hsp-text h2 { font-family: Georgia, serif; font-size: clamp(2.5rem, 7vw, 5rem); margin: .1em 0; color: #fff; text-shadow: 0 0 1.5rem rgba(255,220,140,.6); }
.theme-frost .hsp-text h2 { text-shadow: 0 0 1.5rem rgba(110,240,160,.7); }
.theme-headsman .hsp-text h2 { text-shadow: 0 0 1.5rem rgba(255,40,20,.8); }
.hsp-title { color: var(--muted); font-family: Georgia, serif; font-size: 1.2rem; }
.hsp-new, .hsp-dup { display: inline-block; margin-top: 1rem; padding: .2rem .9rem; border-radius: 999px; font-weight: 800; letter-spacing: .15em; }
.hsp-new { background: #3fbf6a; color: #08130b; }
.hsp-dup { border: 1px solid #b8a8f0; color: #b8a8f0; }
@keyframes hsp-text { from { opacity: 0; transform: translateX(60px); } }

.pull-actions { position: relative; z-index: 6; display: flex; gap: 1rem; align-items: center; margin-top: 1.5rem; animation: fadein .4s; cursor: default; }
.pull-hint { position: relative; z-index: 6; }

@media (max-width: 1100px) {
    .hero-splash { flex-direction: column; gap: 1rem; }
    .hsp-figure { height: 45vh; width: 24vh; }
    .banner-art { min-height: 0; flex-wrap: wrap; }
    .pull-actions { flex-wrap: wrap; justify-content: center; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .banner-intro { animation-duration: .8s; }
    .banner-intro *, .banner-fx *, .pull-omen * { animation: none !important; opacity: 0 !important; }
    .banner-intro .intro-title { opacity: 1 !important; }
}

/* ręka i zdolności pojawiają się dopiero po intro / wejściu bossa */
.hand-dock, .abilities, .combat-start, .deck-info { animation: dock-in .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dock-in { from { opacity: 0; translate: 0 24px; } }

/* ================= 0.0.3: baner „Kły i Topór” (Natan + Maria Queeq) ================= */
.gacha-lovers { --accent: #ff4d6d; --accent-rgb: 255,77,109; }
.banner-tab.tab-lovers .bt-glyph, .rot-glyph.tab-lovers { color: #ff4d6d; }
.rot-glyph.tab-frost { color: #7be0a0; }
.rot-glyph.tab-headsman { color: #ff4a3a; }
.banner-art.duo { display: flex; justify-content: center; gap: .5rem; }
.banner-art.duo .banner-hero { flex: 1; min-width: 0; text-align: center; }
.banner-art.duo .bh-fig .figure { height: 250px; }
.banner-art.duo .bh-glow { width: 200px; height: 200px; }
.banner-art.duo .banner-hero:nth-child(2) .bh-fig { animation-delay: -2s; }

/* ambient: płatki róż spadają, w ciemności co jakiś czas błyska uśmiech */
.fx-lovers i { border-radius: 60% 0 60% 0; background: linear-gradient(135deg, #ff8fa3, #9a1030); box-shadow: 0 0 6px rgba(255,80,110,.5); }
.bfx-grin { position: absolute; right: 8%; top: 8%; width: 120px; opacity: 0; animation: amb-grin 10s 2.5s ease-in-out infinite; }
@keyframes amb-grin { 0%, 100% { opacity: 0; } 10%, 28% { opacity: .9; } 34% { opacity: 0; } }

.grin { display: block; width: 100%; overflow: visible; }
.grin .teeth { fill: #f6fff4; filter: drop-shadow(0 0 4px #eafff0) drop-shadow(0 0 12px rgba(200,255,220,.8)); }
.grin .fang { fill: #fff; filter: drop-shadow(0 0 6px #ff4d6d); }
.axe { display: block; width: 100%; overflow: visible; }
.axe .haft { stroke: #6b4426; stroke-width: 6; stroke-linecap: round; fill: none; }
.axe .head, .axe .spike { fill: #dfe6ee; stroke: #0b0b10; stroke-width: 2; filter: drop-shadow(0 0 8px rgba(255,255,255,.6)); }

/* intro: ciemność → zęby → przelatujący topór → cięcie → tytuł */
.intro-lovers { background: #020203; }
.intro-grin { position: absolute; left: 50%; top: 42%; width: min(420px, 70vw); transform: translate(-50%, -50%); opacity: 0; animation: grin-on 1.9s .15s ease-out forwards; }
@keyframes grin-on {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    60% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); filter: blur(4px); }
}
.intro-grin.late { animation-delay: 1s; }
.intro-axe { position: absolute; left: -30vw; top: 30%; width: min(260px, 40vw); animation: axe-fly 1s 1s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes axe-fly { 0% { transform: translateX(0) rotate(0); } 100% { transform: translateX(160vw) rotate(1080deg); } }
.slash.lovers { background: linear-gradient(90deg, transparent, #fff 40%, #ff4d6d 60%, transparent); box-shadow: 0 0 20px #ff4d6d; animation-delay: 1.45s; transform: scaleX(0) rotate(8deg); }
.intro-lovers .intro-title { animation-delay: 1.6s; animation-duration: 1.3s; }
.intro-lovers .intro-title small { color: #ff8fa3; }
.intro-lovers .intro-title span { text-shadow: 0 0 1.5rem rgba(255,77,109,.9), 0 0 .2rem #000; }
.theme-lovers .pull-omen.s4 { --c: #ff6d8a; }
.theme-lovers .pull-omen.s4::before { background: repeating-conic-gradient(from 0deg, transparent 0 8deg, rgba(255,90,120,.2) 8deg 12deg); }
.hero-splash.theme-lovers { background: radial-gradient(circle at 40% 50%, rgba(90,14,40,.97), rgba(4,1,3,.99) 70%); }
.theme-lovers .hsp-rays { background: repeating-conic-gradient(from 0deg, transparent 0 9deg, rgba(255,90,120,.09) 9deg 13deg); }
.theme-lovers .hsp-text h2 { text-shadow: 0 0 1.5rem rgba(255,77,109,.8); }

/* pasek rotacji */
.rotation { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: -.4rem 0 1rem; font-size: .85rem; }
.rot-label { color: var(--gold); letter-spacing: .15em; text-transform: uppercase; font-size: .72rem; }
.rot-day { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border: 1px solid #3a2f1e; border-radius: 999px; color: var(--muted); }
.rot-day b { font-weight: 600; text-transform: capitalize; }
.rot-day.today { border-color: var(--accent); color: #fff; box-shadow: 0 0 .6rem rgba(var(--accent-rgb), .4); }
.dev-days { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .5rem; }

/* konstelacje w wynikach */
.pc-const, .hsp-const { background: linear-gradient(90deg, #5a3cff, #c06bff); color: #fff; }

/* ================= 0.0.3: kampanie (zwijane) i konstelacje na ekranie głównym ================= */
.enc.campaign { border-color: var(--gold); border-radius: .9rem; background: linear-gradient(180deg, rgba(226,184,90,.1), rgba(0,0,0,.2)); }
.enc.campaign .camp-caret { display: inline-block; width: 1.1em; color: var(--gold); }
.enc.campaign .camp-count { margin-left: .6rem; font-size: .8rem; color: var(--muted); }
.campaign-acts { display: flex; flex-direction: column; margin-left: 1rem; padding-left: .8rem; border-left: 1px solid #3a2f1e; animation: fadein .3s; }
.rc-const { margin-left: .3rem; padding: 0 .35rem; border-radius: .4rem; font-size: .75rem; background: linear-gradient(90deg, #5a3cff, #c06bff); color: #fff; }
.hs-const h3 { display: flex; align-items: center; gap: .6rem; }
.const-pips i { font-style: normal; color: #3a3550; margin-right: .1rem; }
.const-pips i.on { color: #c9a2ff; text-shadow: 0 0 .5rem #a070ff; }
.const-step.off { color: var(--muted); opacity: .7; }
.const-step.on { color: #d9c2ff; }
.const-ult { margin-top: .5rem; max-width: 220px; }
.const-ult.off { filter: grayscale(.8) brightness(.6); }
.fig-aura { animation: fig-aura 1.2s ease-in-out infinite alternate; }
@keyframes fig-aura { to { opacity: .4; } }

/* tryb deweloperski: baner spoza dzisiejszej rotacji */
.banner-tab.off-rotation { border-style: dashed; opacity: .85; }
.banner-tab .dev-tag { margin-left: .35rem; padding: 0 .3rem; border-radius: .3rem; font-size: .6rem; letter-spacing: .1em; background: #3a2f1e; color: var(--gold); }
.rot-day.clickable { cursor: pointer; }
.rot-day.clickable:hover { border-color: #6fb0ff; color: #fff; }

/* sugerowana drużyna kampanii */
.camp-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: -.3rem 0 .4rem 1rem; font-size: .9rem; }
.camp-suggest .cs-label { color: var(--muted); }
.camp-suggest .cs-hero { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .55rem .1rem .2rem; border: 1px solid #3a2f1e; border-radius: 999px; color: #e9d48a; }
.camp-suggest .cs-hero.locked { opacity: .55; }
.camp-suggest .cs-fig { display: inline-block; width: 22px; height: 30px; overflow: hidden; }
.camp-suggest .cs-fig .figure { width: 100%; height: 100%; }
.camp-suggest .cs-ok { color: #8fe0a0; font-size: .85rem; }

/* 0.0.3d: sugerowana drużyna — wyraźniej */
.camp-suggest { margin: -.1rem 0 .6rem 1rem; padding: .55rem .8rem; border: 1px solid var(--gold); border-radius: .8rem; background: linear-gradient(90deg, rgba(226,184,90,.16), rgba(226,184,90,.03)); font-size: .95rem; }
.camp-suggest .cs-label { color: var(--gold); font-weight: 700; letter-spacing: .12em; font-size: .78rem; }
.camp-suggest .cs-hero { padding: .15rem .7rem .15rem .25rem; background: rgba(0,0,0,.35); font-weight: 600; }
.camp-suggest .cs-fig { width: 30px; height: 42px; }
.camp-suggest.mismatch { animation: cs-pulse 2.2s ease-in-out infinite; }
.camp-suggest.match { border-color: #5fae74; background: linear-gradient(90deg, rgba(95,174,116,.14), transparent); }
@keyframes cs-pulse { 50% { box-shadow: 0 0 1.1rem rgba(226,184,90,.45); } }

.act-suggest { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60; width: min(560px, calc(100% - 32px)); padding: 1.2rem 1.4rem; border: 1px solid var(--gold); border-radius: 1rem; background: rgba(10,8,5,.95); box-shadow: 0 0 2.5rem rgba(226,184,90,.35); text-align: center; animation: fadein .4s; }
.act-suggest .as-title { color: var(--gold); font-family: Georgia, serif; font-size: 1.25rem; margin-bottom: .6rem; }
.act-suggest .as-heroes { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.act-suggest .as-hero { display: flex; flex-direction: column; align-items: center; color: #e9d48a; font-weight: 600; }
.act-suggest .as-hero.locked { opacity: .5; }
.act-suggest .as-fig { width: 72px; height: 96px; }
.act-suggest .as-fig .figure { width: 100%; height: 100%; }
.act-suggest .as-now { margin: .7rem 0; color: var(--muted); }
.act-suggest .as-buttons { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }