/* ===== extra themes, effects, home touches ===== */
:root { --aura: 230,185,85; }
:root[data-theme="shinobu"] { --aura: 255,159,207; }
:root[data-theme="rengoku"] { --aura: 255,150,50; }
:root[data-theme="zenitsu"] { --aura: 255,210,58; }
:root[data-theme="hashira"] { --aura: 232,184,74; }

/* nezuko: pink kimono and bamboo grove */
:root[data-theme="nezuko"] { --night: #1d0e18; --indigo: #2f1624; --panel: #43203a; --line: #9a4f7a; --wisteria: #ffc6dd; --moon: #fff1f6; --gold: #ff86b8; --torii: #4fc08a; --muted: #dfb3c8; --aura: 255,134,184;
  --qcard: linear-gradient(145deg, #3a1630 0%, #4a1d3c 58%, #2c3b2f 130%); --qcard-fg: #fff4f8; --qcard-bd: #e57aa8; --arena: linear-gradient(160deg, #4a1d3c, #2a1a26);
  --opt-bg: linear-gradient(135deg, #3a1a31, #2a1424); --opt-bd: #9a4f7a; --mark: "竹"; }
:root[data-theme="nezuko"] .qz { --h0: #ff9cc6; --h1: #7fe0a8; --h2: #ffd0a6; --h3: #ffc6dd; }
:root[data-theme="nezuko"] #sky { background: radial-gradient(ellipse 90% 45% at 8% 0%, rgba(255,110,170,.42), transparent 70%), radial-gradient(ellipse 80% 45% at 100% 100%, rgba(60,190,120,.34), transparent 70%), radial-gradient(ellipse 70% 30% at 100% 20%, rgba(255,150,190,.18), transparent 70%), #1d0e18; }
:root[data-theme="nezuko"] .qz-opt.c0:not(.sel):not(.right):not(.wrong), :root[data-theme="nezuko"] .qz-opt.c2:not(.sel):not(.right):not(.wrong) { background: linear-gradient(135deg, #43203a, #2d1427); border-color: #d96a9c; }
:root[data-theme="nezuko"] .qz-opt.c1:not(.sel):not(.right):not(.wrong), :root[data-theme="nezuko"] .qz-opt.c3:not(.sel):not(.right):not(.wrong) { background: linear-gradient(135deg, #1f3a2c, #15281f); border-color: #4fc08a; }
.bam { top: -5%; height: 110%; width: var(--w); left: var(--x); background: linear-gradient(90deg, rgba(40,120,80,0), rgba(80,200,130,.3) 45%, rgba(30,100,70,0)), repeating-linear-gradient(180deg, transparent 0 118px, rgba(190,255,215,.3) 118px 121px); border-radius: 8px; opacity: var(--o); transform-origin: 50% 100%; animation: bamSway var(--d) ease-in-out var(--dl) infinite; filter: blur(var(--b)); }
@keyframes bamSway { 0%,100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.lf { top: -24px; left: var(--x); width: var(--s); height: calc(var(--s) * .38); border-radius: 100% 0 100% 0; background: linear-gradient(90deg, #3fae78, #8be0a8); opacity: 0; animation: lfFall var(--d) linear var(--dl) infinite; }
@keyframes lfFall { 0% { transform: translate(0,0) rotate(var(--r0)); opacity: 0; } 8% { opacity: var(--o); } 50% { transform: translate(calc(var(--dx) * .5), 55vh) rotate(calc(var(--r0) + 140deg)); } 92% { opacity: var(--o); } 100% { transform: translate(var(--dx), 108vh) rotate(calc(var(--r0) + 320deg)); opacity: 0; } }

/* final selection: wisteria night, fog, fireflies */
:root[data-theme="final"] { --night: #0b0e1e; --indigo: #151a36; --panel: #212850; --line: #4b5694; --wisteria: #cbb8ff; --moon: #f3f1ff; --gold: #c4aaff; --torii: #8a6fe0; --muted: #a9b0dc; --aura: 185,160,255;
  --qcard: linear-gradient(145deg, #131a40 0%, #1d1f55 60%, #2c2060 130%); --qcard-fg: #f6f3ff; --qcard-bd: #8a74d6; --arena: linear-gradient(160deg, #222a60, #131838);
  --opt-bg: linear-gradient(135deg, #1a2150, #121739); --opt-bd: #4b5694; --mark: "藤"; }
:root[data-theme="final"] .qz { --h0: #c4aaff; --h1: #8ab4ff; --h2: #ecdc7e; --h3: #eaa8d6; }
:root[data-theme="final"] #sky { background: radial-gradient(circle 300px at 88% 6%, rgba(215,225,255,.26), transparent 70%), radial-gradient(ellipse 100% 45% at 20% 100%, rgba(110,90,220,.36), transparent 70%), radial-gradient(ellipse 80% 35% at 0% 40%, rgba(70,100,220,.22), transparent 70%), #0b0e1e; }
.moon { top: -70px; right: -50px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(240,244,255,.9), rgba(190,200,255,.34) 52%, transparent 72%); opacity: .5; animation: orbPulse 12s ease-in-out infinite; }
.fog { left: -30%; width: 160%; height: var(--h); top: var(--y); background: radial-gradient(ellipse at 50% 50%, rgba(170,180,255,.24), transparent 70%); opacity: var(--o); animation: fogDrift var(--d) ease-in-out var(--dl) infinite alternate; filter: blur(14px); }
@keyframes fogDrift { from { transform: translateX(-9%); } to { transform: translateX(9%); } }
.wis { top: -4px; left: var(--x); width: 60px; height: var(--h); margin-left: -30px; transform-origin: 50% 0; animation: wisSway var(--d) ease-in-out var(--dl) infinite; opacity: var(--o); }
.wis b { left: 50%; top: 0; width: 1.5px; height: 100%; background: linear-gradient(#5a4a9a, rgba(90,74,154,0)); }
.wis i { left: calc(50% + var(--ox)); top: var(--oy); width: var(--bs); height: calc(var(--bs) * 1.3); margin-left: calc(var(--bs) / -2); border-radius: 50% 50% 60% 60%; background: radial-gradient(circle at 50% 30%, #e0d0ff, #8d6fe0 72%); box-shadow: 0 0 9px rgba(170,140,255,.55); }
@keyframes wisSway { 0%,100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
.ffl { left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: var(--c, #f4e68a); box-shadow: 0 0 10px 3px var(--c, #f4e68a); opacity: 0; animation: fflWander var(--d) ease-in-out var(--dl) infinite; }
@keyframes fflWander { 0% { transform: translate(0,0); opacity: 0; } 15% { opacity: var(--o); } 35% { transform: translate(var(--dx), var(--dy)); opacity: .15; } 55% { opacity: var(--o); } 75% { transform: translate(calc(var(--dx) * -.6), calc(var(--dy) * .5)); opacity: .2; } 100% { transform: translate(0,0); opacity: 0; } }

/* infinity castle: floating rooms, red and gold */
:root[data-theme="infinity"] { --night: #0d0709; --indigo: #1c0d12; --panel: #2c141b; --line: #7a4a2e; --wisteria: #f0cf8a; --moon: #fbf1de; --gold: #e0b050; --torii: #d03a32; --muted: #cdb08f; --aura: 224,176,80;
  --qcard: linear-gradient(145deg, #1a0a0d 0%, #2a0f14 60%, #3a1a14 130%); --qcard-fg: #fbf1de; --qcard-bd: #c99a42; --arena: linear-gradient(160deg, #3a1318, #1a0a0d);
  --opt-bg: linear-gradient(135deg, #251016, #190b0f); --opt-bd: #7a4a2e; --mark: "無限"; }
:root[data-theme="infinity"] .qz { --h0: #e0b050; --h1: #e0524a; --h2: #efe3cf; --h3: #4fb7a4; }
:root[data-theme="infinity"] #sky { background: radial-gradient(ellipse 80% 50% at 50% 55%, rgba(150,30,35,.34), transparent 75%), radial-gradient(ellipse 100% 40% at 50% 0%, rgba(224,176,80,.16), transparent 70%), #0d0709; }
:root[data-theme="infinity"] .qz-card { box-shadow: 0 0 0 3px #0d0709, 0 0 0 4px rgba(224,176,80,.6), 0 14px 40px rgba(0,0,0,.5); }
:root[data-theme="infinity"] .qz-opt { box-shadow: inset 0 0 0 1px rgba(224,176,80,.22); }
.rm { left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 1px solid rgba(224,176,80,var(--bo)); background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(224,176,80,.18) 50%, transparent calc(50% + .5px)), linear-gradient(0deg, transparent calc(50% - .5px), rgba(224,176,80,.18) 50%, transparent calc(50% + .5px)), rgba(120,20,30,.1); opacity: var(--o); transform: rotate(var(--r)); animation: rmFloat var(--d) ease-in-out var(--dl) infinite alternate; }
@keyframes rmFloat { from { transform: translate(0,0) rotate(var(--r)); } to { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) + var(--dr))); } }
.ig { left: 10%; right: 10%; top: 30%; height: 45%; background: radial-gradient(ellipse at 50% 50%, rgba(200,40,40,.3), transparent 70%); animation: glowPulse 8s ease-in-out infinite; }

/* generic particles (custom theme and extras) */
.mt { left: var(--x); width: var(--s); height: var(--s); background: var(--c); border-radius: var(--r, 50%); opacity: 0; box-shadow: 0 0 var(--g, 0px) var(--c); }
.mt.dn { top: -20px; animation: ptFall var(--d) linear var(--dl) infinite; }
.mt.up { bottom: -10px; animation: emUp var(--d) ease-out var(--dl) infinite; }
.wv { left: -10%; width: 120%; height: 70px; bottom: var(--b); opacity: var(--o); background: radial-gradient(circle at 50% 100%, transparent 0 11px, var(--c) 11.5px 13px, transparent 13.5px) 0 0 / 44px 22px repeat; animation: wvSlide var(--d) linear infinite; }
@keyframes wvSlide { to { background-position: 88px 0; } }
.halo { top: -90px; left: 50%; width: 320px; height: 320px; margin-left: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--aura),.4), transparent 68%); animation: orbPulse 9s ease-in-out infinite; }

/* time-of-day mood */
#tod { position: fixed; inset: 0; z-index: 0; pointer-events: none; transition: background 2s; }
#tod[data-p="dawn"] { background: linear-gradient(180deg, rgba(255,170,140,.15), transparent 55%); }
#tod[data-p="day"] { background: linear-gradient(180deg, rgba(190,225,255,.1), transparent 50%); }
#tod[data-p="dusk"] { background: linear-gradient(0deg, rgba(255,120,80,.16), rgba(200,70,140,.07) 45%, transparent 70%); }
#tod[data-p="night"] { background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(30,50,150,.2), transparent 70%); }

/* streak aura */
#aura { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .6s; }
html[data-aura="1"] #aura { opacity: 1; box-shadow: inset 0 0 60px 2px rgba(var(--aura), .26); animation: auraBreath 4.2s ease-in-out infinite; }
html[data-aura="2"] #aura { opacity: 1; box-shadow: inset 0 0 90px 6px rgba(var(--aura), .4); animation: auraBreath 3.4s ease-in-out infinite; }
html[data-aura="3"] #aura { opacity: 1; box-shadow: inset 0 0 120px 14px rgba(var(--aura), .56); animation: auraBreath 2.4s ease-in-out infinite; }
@keyframes auraBreath { 0%,100% { opacity: .65; } 50% { opacity: 1; } }

/* breathing question card, glowing options */
:root[data-theme]:not([data-theme="night"]) .qz-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 44px rgba(var(--aura), .2); animation: cardBreath 6s ease-in-out infinite; }
@keyframes cardBreath { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
:root[data-theme]:not([data-theme="night"]) .qz-opt:hover:not(:disabled) { box-shadow: 0 0 20px rgba(var(--aura), .28); }

/* answer burst */
.fxb { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 40; pointer-events: none; }
.fxp { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); background: var(--c); border-radius: 50%; box-shadow: 0 0 10px var(--c); opacity: 0; animation: fxFly .85s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes fxFly { 0% { transform: translate(0,0) rotate(0) scale(.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); opacity: 0; } }
.fxr { position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; animation: fxRing .7s ease-out forwards; }
@keyframes fxRing { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(9); opacity: 0; } }
:root[data-theme="shinobu"] .fxp, :root[data-theme="nezuko"] .fxp { border-radius: 80% 0 80% 0; box-shadow: none; }
:root[data-theme="zenitsu"] .fxp { border-radius: 2px; width: 3px; height: calc(var(--s) * 2.4); margin: calc(var(--s) * -1.2) -1.5px; }
:root[data-theme="infinity"] .fxp { border-radius: 2px; transform-origin: center; }
:root[data-theme="final"] .fxp { box-shadow: 0 0 12px 3px var(--c); }

/* result celebration */
.fxv { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 50% 45%, rgba(var(--aura), .28), rgba(5,4,14,.82) 70%); animation: fxvIn .5s ease both; cursor: pointer; }
.fxv.out { animation: fxvOut .6s ease forwards; }
.fxv .k { font-family: var(--display); font-weight: 800; font-size: min(34vw, 190px); line-height: 1; color: rgb(var(--aura)); text-shadow: 0 0 40px rgba(var(--aura), .8); animation: fxvK 1.1s cubic-bezier(.2,.9,.3,1.2) both; }
.fxv .t { font-family: var(--display); font-weight: 800; font-size: 30px; margin-top: 8px; color: var(--moon); animation: fxvIn .8s ease .5s both; }
.fxv .s { font-size: 14px; color: var(--muted); margin-top: 6px; animation: fxvIn .8s ease .8s both; }
@keyframes fxvIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fxvOut { to { opacity: 0; } }
@keyframes fxvK { 0% { transform: scale(.3) rotate(-8deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

/* focus mode: calm everything */
html[data-focus="1"] #bg { opacity: .3; } html[data-focus="1"] #bg *, html[data-focus="1"] #sky, html[data-focus="1"] #sky::before, html[data-focus="1"] #sky::after { animation-play-state: paused !important; }
html[data-focus="1"] #aura, html[data-focus="1"] #tod, html[data-focus="1"] .fxb { display: none; }
html[data-focus="1"] .qz-card::before { animation: none !important; opacity: .4; }

/* home screen touches */
:root[data-theme]:not([data-theme="night"]) .title { text-shadow: 0 0 26px rgba(var(--aura), .5); }
:root[data-theme]:not([data-theme="night"]) .prog i { background: linear-gradient(90deg, var(--torii), var(--gold)); box-shadow: 0 0 10px rgba(var(--aura), .6); }
:root[data-theme]:not([data-theme="night"]) .sec::after { background: linear-gradient(90deg, rgba(var(--aura), .6), transparent); }
:root[data-theme]:not([data-theme="night"]) .seal { box-shadow: 0 0 14px rgba(var(--aura), .4); }
:root[data-theme]:not([data-theme="night"]) .tab.on { box-shadow: 0 0 18px rgba(var(--aura), .35), inset 0 0 0 1px rgba(var(--aura), .35); }
:root[data-theme]:not([data-theme="night"]) .row { transition: transform .15s, box-shadow .2s; }
:root[data-theme]:not([data-theme="night"]) .row:hover { box-shadow: 0 0 20px rgba(var(--aura), .25); transform: translateY(-1px); }
:root[data-theme="shinobu"] .row, :root[data-theme="nezuko"] .row { border-left: 3px solid rgba(var(--aura), .8); }
:root[data-theme="rengoku"] .tabs { border-top: 2px solid #ff7a2a; box-shadow: 0 -6px 22px rgba(255,110,40,.3); }
:root[data-theme="zenitsu"] .tabs { border-top: 2px solid #ffd23a; box-shadow: 0 -6px 22px rgba(255,210,58,.25); }
:root[data-theme="final"] .row, :root[data-theme="final"] .tile, :root[data-theme="final"] .card { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
:root[data-theme="infinity"] .row, :root[data-theme="infinity"] .tile, :root[data-theme="infinity"] .card { border-color: rgba(224,176,80,.45); box-shadow: inset 0 0 0 3px rgba(13,7,9,.9), inset 0 0 0 4px rgba(224,176,80,.22); }
/* settings pickers */
.cmk { display: grid; gap: 10px; margin-top: 10px; }
.cmk .cr { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.cmk input[type=color] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; }
.cmk .mo { display: flex; flex-wrap: wrap; gap: 6px; }
.cmk .mo button { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--night); font-size: 12.5px; }
.cmk .mo button.on { border-color: var(--gold); color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  #aura, .qz-card::before, .fxp, .fxr, .fxv * { animation: none !important; }
}

:root[data-theme="custom"] .qz { --h0: var(--ch0); --h1: var(--ch1); --h2: var(--ch2); --h3: var(--ch3); }
:root[data-theme="custom"] #sky { background: radial-gradient(ellipse 90% 45% at 12% 0%, var(--cg1), transparent 70%), radial-gradient(ellipse 80% 45% at 100% 100%, var(--cg2), transparent 70%), var(--night); }

/* ===== main menu layouts (one per theme) ===== */
:root[data-lay] .rows .row { position: relative; overflow: hidden; }
:root[data-lay] .rows .row > * { position: relative; z-index: 1; }
/* soft: rounded cards with a faint kanji mark */
:root[data-lay="soft"] .rows .row { border-radius: 24px; padding: 16px 18px; background: linear-gradient(135deg, var(--panel), var(--indigo)); border-color: rgba(var(--aura), .45); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
:root[data-lay="soft"] .rows .row::after { content: var(--mark, "華"); position: absolute; right: 14px; bottom: -16px; font-family: var(--display); font-weight: 800; font-size: 74px; line-height: 1; color: rgb(var(--aura)); opacity: .09; pointer-events: none; }
:root[data-lay="soft"] .seal { width: 48px; height: 48px; border-width: 2px; border-color: rgb(var(--aura)); box-shadow: 0 0 16px rgba(var(--aura), .45); }
:root[data-lay="soft"] .rows .chev { display: none; }
:root[data-lay="soft"] .wave { height: 10px; background: radial-gradient(circle, rgba(var(--aura), .9) 0 2.5px, transparent 3px) 0 50% / 18px 10px repeat-x; -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }
/* banner: bold wide banners with a flame edge */
:root[data-lay="banner"] .rows .row { border: 0; border-radius: 8px 26px 8px 26px; padding: 16px 16px 16px 22px; background: linear-gradient(90deg, rgba(var(--aura), .32), transparent 55%), linear-gradient(160deg, var(--panel), var(--indigo)); box-shadow: inset 6px 0 0 var(--torii), 0 8px 22px rgba(0,0,0,.3); }
:root[data-lay="banner"] .rname { font-size: 17px; font-weight: 800; }
:root[data-lay="banner"] .seal { width: 52px; height: 52px; border-radius: 12px; background: linear-gradient(160deg, rgba(var(--aura), .32), var(--night)); }
:root[data-lay="banner"] .title { font-size: 36px; text-shadow: 0 0 30px rgba(var(--aura), .7), 0 2px 0 rgba(0,0,0,.4); }
:root[data-lay="banner"] .wave { height: 5px; border-radius: 4px; background: linear-gradient(90deg, var(--torii), rgb(var(--aura)) 45%, transparent); box-shadow: 0 0 14px rgba(var(--aura), .6); }
:root[data-lay="banner"] .stack { height: 10px; }
/* angle: sharp cut corners and a lightning line */
:root[data-lay="angle"] .rows .row { border: 0; border-radius: 0; padding: 15px 20px 15px 22px; background: linear-gradient(135deg, var(--panel), var(--indigo)); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
:root[data-lay="angle"] .rows .row::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 3px; background: var(--gold); box-shadow: 0 0 10px var(--gold); z-index: 0; }
:root[data-lay="angle"] .rows .row::after { content: ""; position: absolute; right: 0; bottom: 0; width: 56px; height: 3px; background: var(--gold); opacity: .7; }
:root[data-lay="angle"] .rows .row:active { filter: brightness(1.45); }
:root[data-lay="angle"] .seal { border-radius: 8px; border-width: 2px; }
:root[data-lay="angle"] .wave { height: 14px; background: linear-gradient(135deg, transparent 44%, var(--gold) 44% 56%, transparent 56%) 0 0 / 14px 14px repeat-x, linear-gradient(45deg, transparent 44%, var(--gold) 44% 56%, transparent 56%) 0 0 / 14px 14px repeat-x; opacity: .75; }
/* pillar: a different pillar colour per card */
:root[data-lay="pillar"] .rows .row { border-radius: 16px; border-width: 2px; border-bottom-width: 5px; padding: 14px 16px; }
:root[data-lay="pillar"] .rows > div:nth-child(4n+1) > .row, :root[data-lay="pillar"] .rows > .row:nth-child(4n+1) { background: linear-gradient(135deg, #4a2012, #321309); border-color: #e0642a; }
:root[data-lay="pillar"] .rows > div:nth-child(4n+2) > .row, :root[data-lay="pillar"] .rows > .row:nth-child(4n+2) { background: linear-gradient(135deg, #123a63, #0b2641); border-color: #3d8fd6; }
:root[data-lay="pillar"] .rows > div:nth-child(4n+3) > .row, :root[data-lay="pillar"] .rows > .row:nth-child(4n+3) { background: linear-gradient(135deg, #124431, #0b2d20); border-color: #3fb07a; }
:root[data-lay="pillar"] .rows > div:nth-child(4n+4) > .row, :root[data-lay="pillar"] .rows > .row:nth-child(4n+4) { background: linear-gradient(135deg, #51193c, #351229); border-color: #e2639f; }
:root[data-lay="pillar"] .rows > div:nth-child(4n+1) .seal { border-color: #ff8a4c; box-shadow: 0 0 14px rgba(255,138,76,.5); } :root[data-lay="pillar"] .rows > div:nth-child(4n+2) .seal { border-color: #5eb3ff; box-shadow: 0 0 14px rgba(94,179,255,.5); }
:root[data-lay="pillar"] .rows > div:nth-child(4n+3) .seal { border-color: #62d49a; box-shadow: 0 0 14px rgba(98,212,154,.5); } :root[data-lay="pillar"] .rows > div:nth-child(4n+4) .seal { border-color: #ff8fc2; box-shadow: 0 0 14px rgba(255,143,194,.5); }
:root[data-lay="pillar"] .seal { width: 50px; height: 50px; border-width: 2px; }
:root[data-lay="pillar"] .wave { height: 5px; border-radius: 4px; background: linear-gradient(90deg, #ff8a4c 25%, #5eb3ff 0 50%, #62d49a 0 75%, #ff8fc2 0); opacity: .9; }
/* bamboo: bamboo strip on the left, hemp-leaf pattern on the right */
:root[data-lay="bamboo"] .rows .row { border-radius: 14px; padding: 14px 16px 14px 32px; background: linear-gradient(135deg, var(--panel), var(--indigo)); border-color: rgba(79,192,138,.45); }
:root[data-lay="bamboo"] .rows .row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; background: repeating-linear-gradient(180deg, transparent 0 26px, rgba(10,50,32,.75) 26px 28px), linear-gradient(90deg, #2c8a5e, #7be0a8 55%, #2c8a5e); z-index: 0; }
:root[data-lay="bamboo"] .rows .row::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 48%; background: repeating-conic-gradient(from 45deg at 50% 50%, rgba(var(--aura), .13) 0 25%, transparent 0 50%) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); pointer-events: none; }
:root[data-lay="bamboo"] .wave { height: 6px; border-radius: 4px; background: repeating-linear-gradient(90deg, #4fc08a 0 40px, transparent 40px 45px); opacity: .85; }
/* glass: frosted panels with a drifting firefly */
:root[data-lay="glass"] .rows .row { border-radius: 20px; padding: 16px 18px; background: rgba(var(--aura), .08); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); border: 1px solid rgba(var(--aura), .35); box-shadow: 0 10px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); }
:root[data-lay="glass"] .rows .row::after { content: ""; position: absolute; top: 14px; right: 16px; width: 5px; height: 5px; border-radius: 50%; background: #f4e68a; box-shadow: 0 0 10px 3px #f4e68a; animation: fflPulse 4s ease-in-out infinite; }
:root[data-lay="glass"] .rows > div:nth-child(2n) > .row::after { animation-delay: -1.7s; } :root[data-lay="glass"] .rows > div:nth-child(3n) > .row::after { animation-delay: -3s; }
@keyframes fflPulse { 0%,100% { opacity: .15; transform: translate(0,0); } 50% { opacity: 1; transform: translate(-6px, 5px); } }
:root[data-lay="glass"] .seal { box-shadow: 0 0 18px rgba(var(--aura), .5); }
:root[data-lay="glass"] .wave { height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--aura), .9), transparent); box-shadow: 0 0 12px rgba(var(--aura), .7); }
/* doors: shoji sliding doors floating at different depths */
:root[data-lay="doors"] .rows .row { border-radius: 3px; padding: 16px 18px; border: 1px solid rgba(var(--aura), .6); background: linear-gradient(160deg, var(--panel), var(--indigo)); box-shadow: inset 0 0 0 3px rgba(0,0,0,.55), inset 0 0 0 4px rgba(var(--aura), .25); }
:root[data-lay="doors"] .rows .row::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(90deg, transparent 33%, rgba(var(--aura), .16) 33% calc(33% + 1px), transparent calc(33% + 1px) 66%, rgba(var(--aura), .16) 66% calc(66% + 1px), transparent calc(66% + 1px)), linear-gradient(0deg, transparent 49%, rgba(var(--aura), .14) 49% 50%, transparent 50%); }
:root[data-lay="doors"] .rows.two > div:nth-child(odd) { animation: doorBob 9s ease-in-out infinite alternate; }
:root[data-lay="doors"] .rows.two > div:nth-child(even) { animation: doorBob 11s ease-in-out -4s infinite alternate-reverse; }
@keyframes doorBob { from { transform: translate(-3px, 0); } to { transform: translate(3px, -3px); } }
:root[data-lay="doors"] .seal { border-radius: 4px; border-width: 2px; }
:root[data-lay="doors"] .wave { height: 5px; background: none; border-top: 1px solid rgb(var(--aura)); border-bottom: 1px solid rgb(var(--aura)); opacity: .8; }
html[data-focus="1"] .rows > div { animation: none !important; } html[data-focus="1"] .rows .row::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { :root[data-lay="doors"] .rows.two > div, :root[data-lay="glass"] .rows .row::after { animation: none !important; } }

/* ===== main menu ARRANGEMENTS: each theme arranges the subject cards, header and tab bar differently ===== */
:root[data-lay] .rows.two .row .pill { position: absolute; top: 10px; right: 10px; z-index: 2; }
/* shiny helpers for vertical cards */
:root[data-lay="soft"] .rows.two .row, :root[data-lay="angle"] .rows.two .row, :root[data-lay="pillar"] .rows.two .row, :root[data-lay="glass"] .rows.two .row { flex-direction: column; align-items: flex-start; }
:root[data-lay="soft"] .rows.two .row .chev, :root[data-lay="pillar"] .rows.two .row .chev, :root[data-lay="glass"] .rows.two .row .chev, :root[data-lay="banner"] .rows.two .row .chev { display: none; }
:root[data-lay] .rows.two .row .grow { width: 100%; }
:root[data-lay] .rows.two .row .stack { margin-top: 2px; }

/* SOFT (Shinobu): garden of staggered cards, centred header, floating pill tab bar */
:root[data-lay="soft"] .rows.two { grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
:root[data-lay="soft"] .rows.two > div:nth-child(even) { margin-top: 32px; }
:root[data-lay="soft"] .rows.two .row { align-items: center; text-align: center; gap: 8px; padding: 24px 12px 16px; border-radius: 30px; }
:root[data-lay="soft"] .rows.two .row .seal { width: 62px; height: 62px; font-size: 29px; }
:root[data-lay="soft"] .rows.two .rname { font-size: 15px; } :root[data-lay="soft"] .rows.two .rmeta { font-size: 11.5px; }
:root[data-lay="soft"] .hero { justify-content: center; text-align: center; padding-right: 0; }
:root[data-lay="soft"] .wave { margin: 8px auto 4px; width: 70%; }
:root[data-lay="soft"] .tabs { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 6px 8px; border: 1px solid rgba(var(--aura), .45); border-radius: 32px; background: rgba(20,12,44,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 34px rgba(0,0,0,.45), 0 0 24px rgba(var(--aura), .18); }
:root[data-lay="soft"] .tab { border-radius: 24px; }
:root[data-lay="soft"] #app .in[type="search"], :root[data-lay="soft"] .in { border-radius: 99px; }

/* BANNER (Rengoku): numbered flame ladder, big left-aligned header with flame bar, flame tab dock */
:root[data-lay="banner"] .rows.two { counter-reset: sn; grid-template-columns: 1fr; gap: 10px; }
:root[data-lay="banner"] .rows.two > div { counter-increment: sn; }
:root[data-lay="banner"] .rows.two .row { padding: 18px 16px 18px 82px; min-height: 96px; }
:root[data-lay="banner"] .rows.two .row::before { content: counter(sn, decimal-leading-zero); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-family: var(--display); font-weight: 800; font-size: 46px; line-height: 1; background: linear-gradient(180deg, #ffd27a, #ff5a2a); -webkit-background-clip: text; background-clip: text; color: transparent; z-index: 0; }
:root[data-lay="banner"] .rows.two .row .grow { order: 1; } :root[data-lay="banner"] .rows.two .row .pill { position: static; order: 2; } :root[data-lay="banner"] .rows.two .row .seal { order: 3; }
:root[data-lay="banner"] .hero { border-left: 5px solid var(--torii); padding-left: 14px; margin-top: 18px; box-shadow: -8px 0 24px -8px rgba(var(--aura), .6); }
:root[data-lay="banner"] .tab.on { background: linear-gradient(180deg, rgba(255,106,31,.4), transparent); box-shadow: inset 0 3px 0 #ff6a1f; color: #ffd27a; }
:root[data-lay="banner"] .tabs { padding-top: 8px; }

/* ANGLE (Zenitsu): strike grid, a wide tile then two small ones, angular tab keys */
:root[data-lay="angle"] .rows.two { grid-template-columns: 1fr 1fr; gap: 10px; }
:root[data-lay="angle"] .rows.two > div:nth-child(3n+1) { grid-column: 1 / -1; }
:root[data-lay="angle"] .rows.two .row { gap: 10px; padding: 18px 16px 18px 20px; min-height: 156px; }
:root[data-lay="angle"] .rows.two > div:nth-child(3n+1) .row { flex-direction: row; align-items: center; min-height: 0; }
:root[data-lay="angle"] .rows.two .row .seal { width: 56px; height: 56px; font-size: 26px; }
:root[data-lay="angle"] .rows.two > div:not(:nth-child(3n+1)) .row .chev { position: absolute; right: 14px; bottom: 10px; }
:root[data-lay="angle"] .eyebrow::before { content: "ϟ "; color: var(--gold); }
:root[data-lay="angle"] .tab { border-radius: 0; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
:root[data-lay="angle"] .tab.on { background: linear-gradient(135deg, rgba(255,210,58,.3), var(--panel)); box-shadow: none; }
:root[data-lay="angle"] .tabs { border-top: 2px solid var(--gold); }

/* PILLAR (Hashira): bento, one wide featured card then four squares */
:root[data-lay="pillar"] .rows.two { grid-template-columns: 1fr 1fr; gap: 10px; }
:root[data-lay="pillar"] .rows.two > div:nth-child(5n+1) { grid-column: 1 / -1; }
:root[data-lay="pillar"] .rows.two .row { gap: 10px; padding: 16px; min-height: 160px; }
:root[data-lay="pillar"] .rows.two > div:nth-child(5n+1) .row { flex-direction: row; align-items: center; min-height: 0; padding: 20px 16px; }
:root[data-lay="pillar"] .rows.two > div:nth-child(5n+1) .rname { font-size: 19px; }
:root[data-lay="pillar"] .rows.two .row .seal { width: 56px; height: 56px; font-size: 26px; }
:root[data-lay="pillar"] .hero { text-align: center; justify-content: center; padding-right: 0; }
:root[data-lay="pillar"] .tab:nth-child(1).on { box-shadow: inset 0 3px 0 #ff8a4c; } :root[data-lay="pillar"] .tab:nth-child(2).on { box-shadow: inset 0 3px 0 #5eb3ff; }
:root[data-lay="pillar"] .tab:nth-child(3).on { box-shadow: inset 0 3px 0 #62d49a; } :root[data-lay="pillar"] .tab:nth-child(4).on { box-shadow: inset 0 3px 0 #ff8fc2; } :root[data-lay="pillar"] .tab:nth-child(5).on { box-shadow: inset 0 3px 0 #e8b84a; }

/* BAMBOO (Nezuko): a bamboo path with each subject as a node on the stalk */
:root[data-lay="bamboo"] .rows.two { position: relative; grid-template-columns: 1fr; gap: 14px; padding-left: 58px; }
:root[data-lay="bamboo"] .rows.two::before { content: ""; position: absolute; left: 25px; top: 0; bottom: 0; width: 8px; border-radius: 4px; background: repeating-linear-gradient(180deg, transparent 0 60px, rgba(10,50,32,.8) 60px 63px), linear-gradient(90deg, #2c8a5e, #7be0a8 55%, #2c8a5e); box-shadow: 0 0 14px rgba(79,192,138,.35); }
:root[data-lay="bamboo"] .rows.two .row { overflow: visible; padding: 14px 16px 14px 16px; }
:root[data-lay="bamboo"] .rows.two .row::before, :root[data-lay="bamboo"] .rows.two .row::after { display: none; }
:root[data-lay="bamboo"] .rows.two .row .seal { position: absolute; left: -52px; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; background: var(--night); box-shadow: 0 0 0 4px var(--night), 0 0 14px rgba(255,134,184,.5); border-color: #ff86b8; }
:root[data-lay="bamboo"] .rows.two .row { background: linear-gradient(135deg, var(--panel), var(--indigo)); }
:root[data-lay="bamboo"] .rows.two > div { position: relative; }
:root[data-lay="bamboo"] .rows.two > div::before { content: ""; position: absolute; left: -22px; top: 50%; width: 22px; height: 2px; background: #4fc08a; }
:root[data-lay="bamboo"] .tabs { left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); border-radius: 18px; border: 1px solid rgba(79,192,138,.5); background: linear-gradient(90deg, rgba(30,90,60,.7), rgba(80,25,55,.8)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* GLASS (Final Selection): swipeable carousel of tall glass cards */
:root[data-lay="glass"] .rows.two { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 4px 2px 16px; margin-right: -16px; padding-right: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
:root[data-lay="glass"] .rows.two::-webkit-scrollbar { display: none; }
:root[data-lay="glass"] .rows.two > div { flex: 0 0 74%; scroll-snap-align: start; }
:root[data-lay="glass"] .rows.two .row { min-height: 230px; padding: 22px 18px 18px; gap: 12px; justify-content: flex-start; }
:root[data-lay="glass"] .rows.two .row .seal { width: 64px; height: 64px; font-size: 30px; }
:root[data-lay="glass"] .rows.two .row .grow { margin-top: auto; }
:root[data-lay="glass"] .rows.two .rname { font-size: 20px; font-family: var(--display); }
:root[data-lay="glass"] .hero { justify-content: center; text-align: center; padding-right: 0; }
:root[data-lay="glass"] .tabs { background: rgba(14,18,44,.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top-color: rgba(var(--aura), .35); }

/* DOORS (Infinity Castle): a staircase of floating shoji rooms, framed ornate header, floating gold dock */
:root[data-lay="doors"] .rows.two { grid-template-columns: 1fr; gap: 14px; }
:root[data-lay="doors"] .rows.two > div { width: calc(100% - 52px); }
:root[data-lay="doors"] .rows.two > div:nth-child(4n+2) { margin-left: 26px; } :root[data-lay="doors"] .rows.two > div:nth-child(4n+3) { margin-left: 52px; } :root[data-lay="doors"] .rows.two > div:nth-child(4n+4) { margin-left: 26px; }
:root[data-lay="doors"] .rows.two > div:nth-child(odd) .row { rotate: -.5deg; } :root[data-lay="doors"] .rows.two > div:nth-child(even) .row { rotate: .5deg; }
:root[data-lay="doors"] .rows.two .row { min-height: 90px; }
:root[data-lay="doors"] .hero { justify-content: center; text-align: center; padding-right: 0; }
:root[data-lay="doors"] .tabs { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); border: 1px solid rgba(var(--aura), .6); box-shadow: inset 0 0 0 3px rgba(0,0,0,.6), inset 0 0 0 4px rgba(var(--aura), .25), 0 10px 30px rgba(0,0,0,.5); border-radius: 4px; }
:root[data-lay="doors"] .tab { border-radius: 2px; }

/* PC (wide) view: arrangements open up */
@media (min-width: 900px) {
  :root[data-view="wide"][data-lay="soft"] .rows.two, :root[data-view="wide"][data-lay="angle"] .rows.two, :root[data-view="wide"][data-lay="pillar"] .rows.two { grid-template-columns: repeat(3, 1fr); }
  :root[data-view="wide"][data-lay="soft"] .rows.two > div:nth-child(even) { margin-top: 0; } :root[data-view="wide"][data-lay="soft"] .rows.two > div:nth-child(3n+2) { margin-top: 34px; }
  :root[data-view="wide"][data-lay="banner"] .rows.two { grid-template-columns: 1fr 1fr; }
  :root[data-view="wide"][data-lay="glass"] .rows.two { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; margin-right: 0; padding-right: 2px; }
  :root[data-view="wide"][data-lay="glass"] .rows.two > div { flex: none; }
  :root[data-view="wide"][data-lay="doors"] .rows.two { grid-template-columns: 1fr 1fr; }
  :root[data-view="wide"][data-lay="doors"] .rows.two > div { width: 100%; margin-left: 0 !important; } :root[data-view="wide"][data-lay="doors"] .rows.two > div:nth-child(even) { margin-top: 30px; }
  :root[data-view="wide"][data-lay="bamboo"] .rows.two { max-width: 860px; margin-left: auto; margin-right: auto; }
}

/* ===== battery levels: full (untouched), low (Auto and Saver Low), medium, high ===== */
/* sky: holds the baked glows and the time-of-day tint, so they are not separate moving layers */
#sky::before, #sky::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
#sky::before { background: var(--glows, none); opacity: .8; }
html:not([data-bat="full"]) #tod { display: none; }
html:not([data-bat="full"]) #sky[data-p="dawn"]::after { background: linear-gradient(180deg, rgba(255,170,140,.15), transparent 55%); }
html:not([data-bat="full"]) #sky[data-p="day"]::after { background: linear-gradient(180deg, rgba(190,225,255,.1), transparent 50%); }
html:not([data-bat="full"]) #sky[data-p="dusk"]::after { background: linear-gradient(0deg, rgba(255,120,80,.16), rgba(200,70,140,.07) 45%, transparent 70%); }
html:not([data-bat="full"]) #sky[data-p="night"]::after { background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(30,50,150,.2), transparent 70%); }
html[data-bat="low"] #sky { animation: skyBreath 14s ease-in-out infinite alternate; }
@keyframes skyBreath { from { transform: scale(1); } to { transform: scale(1.07); } }
html:not([data-bat="full"]) #bg { contain: strict; transition: opacity .6s; }
html:not([data-bat="full"]) #bg > * { will-change: transform, opacity; }
/* no live blur or glow filters on moving things */
html:not([data-bat="full"]) .fog, html:not([data-bat="full"]) .bam, html:not([data-bat="full"]) .bf { filter: none; }
html:not([data-bat="full"]) .bf::before { content: ""; position: absolute; inset: -35%; border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, transparent 68%); opacity: .3; }
/* butterflies: one flap on the whole body instead of one per wing (same motion, fewer layers) */
html:not([data-bat="full"]) .bf .w { animation: none; }
html:not([data-bat="full"]) .bf svg { position: relative; animation: bfBob 4.5s ease-in-out infinite, bfFlapS 1.7s ease-in-out infinite; }
@keyframes bfFlapS { 0%,100% { scale: 1 1; } 50% { scale: .45 1; } }
/* frosted glass: real blur only on the tab bar in low */
html:not([data-bat="full"]) .rows .row, html:not([data-bat="full"]) .tile, html:not([data-bat="full"]) .card, html:not([data-bat="full"]) .qz-top { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html:not([data-bat="full"])[data-lay="glass"] .rows .row { background: linear-gradient(135deg, rgba(var(--aura), .16), rgba(var(--aura), .05)), rgba(10,12,32,.55); }
html:not([data-bat="full"])[data-theme]:not([data-theme="night"]) .qz-top { background: rgba(10,8,24,.88); }
html:not([data-bat="full"]) .wv { width: calc(120% + 100px); animation-name: wvTx; }
@keyframes wvTx { to { transform: translateX(-88px); } }
/* resting and scrolling: background holds still, resumes on touch */
html[data-idle="1"]:not([data-bat="full"]) #bg *, html[data-idle="1"]:not([data-bat="full"]) #sky, html[data-idle="1"]:not([data-bat="full"]) #aura, html[data-idle="1"]:not([data-bat="full"]) .qz-card::before,
html[data-idle="1"]:not([data-bat="full"]) .rows > div, html[data-idle="1"]:not([data-bat="full"]) .rows .row::after,
html[data-scroll="1"][data-bat="medium"] #bg *, html[data-scroll="1"][data-bat="high"] #bg *, html[data-scroll="1"][data-bat="medium"] #sky, html[data-scroll="1"][data-bat="high"] #sky { animation-play-state: paused !important; }
/* reading a question: background motion eases off */
html[data-bat="low"][data-qz="1"] #bg { opacity: .55; } html[data-bat="medium"][data-qz="1"] #bg { opacity: .4; } html[data-bat="high"][data-qz="1"] #bg { opacity: .4; }
/* medium: fewer pieces, still glows, no blur at all, no looping glows */
html[data-bat="medium"] #bg > :nth-child(5n+4), html[data-bat="medium"] #bg > :nth-child(5n+5) { display: none; }
html[data-bat="medium"] #sky, html[data-bat="medium"] .moon, html[data-bat="medium"] #aura, html[data-bat="medium"] .qz-card::before, html[data-bat="medium"] .rows.two > div, html[data-bat="medium"] .rows .row::after { animation: none !important; }
html[data-bat="medium"] #aura, html[data-bat="high"] #aura { opacity: .8; }
html[data-bat="medium"] .qz-card::before, html[data-bat="high"] .qz-card::before { opacity: .5; }
html[data-bat="medium"] .tabs, html[data-bat="high"] .tabs { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--indigo) !important; }
/* high: the background is a still picture */
html[data-bat="high"] #bg *, html[data-bat="high"] #sky { animation-play-state: paused !important; }
html[data-bat="high"] #aura, html[data-bat="high"] .rows.two > div, html[data-bat="high"] .rows .row::after, html[data-bat="high"] .qz-card::before { animation: none !important; }
html[data-bat="high"] #bg > :nth-child(5n+5) { display: none; }

/* bolts: drop the animated filter outside Full, keep a soft glow with a wider faint stroke */
html:not([data-bat="full"]) .bolt { filter: none; }
html:not([data-bat="full"]) .bolt path { stroke-width: 3; }
html:not([data-bat="full"]) .bolt path.t { stroke-width: 1.8; }

/* Animated background off: everything in the background holds still, the scenery stays as a picture */
html[data-still="1"] #bg *, html[data-still="1"] #sky, html[data-still="1"] #sky::before, html[data-still="1"] #sky::after, html[data-still="1"] #tod, html[data-still="1"] .qz-card::before, html[data-still="1"] .rows > div, html[data-still="1"] .rows .row::after { animation-play-state: paused !important; }
/* Slayer mode game feel. Short bursts stop on their own; the few steady ones follow the Battery level. */
html[data-slf="0"] { --slc: #fff; --slg: rgba(255,255,255,.3); } html[data-slf="1"] { --slc: #7fdcff; --slg: rgba(90,190,255,.4); }
html[data-slf="2"] { --slc: #ffae5a; --slg: rgba(255,120,40,.42); } html[data-slf="3"] { --slc: #ffe680; --slg: rgba(255,214,70,.46); }
#slfx, #slenv, #slpx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; contain: layout paint; }
#slfx { z-index: 90; } #slenv, #slpx { z-index: 0; }
.sl-av { position: relative; }
html[data-hs] #app *, html[data-hs] #bg *, html[data-hs] #slenv *, html[data-hs] #slpx * { animation-play-state: paused !important; }

/* 1 hit-stop flash */
.sl-hsf { position: absolute; inset: 0; background: #fff; opacity: 0; animation: slHsf .22s ease-out; } @keyframes slHsf { 0% { opacity: .34; } 100% { opacity: 0; } }

/* 2 slash trails */
.sl-trw { position: absolute; inset: 0; } .sl-trw svg { width: 100%; height: 100%; } .sl-trw svg.flp { transform: scaleX(-1); }
.sl-trw path { vector-effect: non-scaling-stroke; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3000; stroke-dashoffset: 3000; opacity: 0; animation: slTr .5s cubic-bezier(.2,.8,.2,1) forwards; }
.sl-trw path.g { stroke-width: 9px; } .sl-trw path.c { stroke-width: 2.5px; }
@keyframes slTr { 0% { stroke-dashoffset: 3000; opacity: 1; } 45% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* 3 impact shake */
.sl-fight.sh1 { animation: slSh1 .3s ease; } .sl-fight.sh2 { animation: slSh2 .38s ease; } .sl-fight.sh3 { animation: slSh3 .46s ease; }
@keyframes slSh1 { 0%,100% { transform: none; } 20% { transform: translate(-3px,1px); } 50% { transform: translate(3px,-1px); } 80% { transform: translate(-1px,1px); } }
@keyframes slSh2 { 0%,100% { transform: none; } 15% { transform: translate(-7px,2px); } 35% { transform: translate(6px,-3px); } 60% { transform: translate(-4px,2px); } 80% { transform: translate(2px,-1px); } }
@keyframes slSh3 { 0%,100% { transform: none; } 12% { transform: translate(-11px,4px) rotate(-.4deg); } 30% { transform: translate(10px,-5px) rotate(.4deg); } 50% { transform: translate(-7px,3px); } 72% { transform: translate(4px,-2px); } 88% { transform: translate(-2px,1px); } }

/* 4 damage numbers */
.sl-dn { position: absolute; transform: translate(-50%, 0); font-family: var(--display); font-weight: 800; font-size: 26px; color: #fff; text-shadow: 0 2px 0 #000, 0 0 14px currentColor; white-space: nowrap; opacity: 0; animation: slDn 1s ease-out forwards; }
.sl-dn.good { color: #ffe9a8; } .sl-dn.crit { color: #ffd23a; font-size: 34px; } .sl-dn.bad { color: #ff7a6e; }
@keyframes slDn { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -8px) scale(1.25); } 30% { transform: translate(-50%, -16px) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -64px) scale(.95); } }

/* 5 demon reaction and cracks */
.sl-who.dem .sl-av.rc { animation: slRc .5s ease; } @keyframes slRc { 0% { transform: none; filter: none; } 12% { transform: translateX(10px) scale(.86); background: #fff; color: #fff; } 40% { transform: translateX(-4px) scale(1.04); } 100% { transform: none; } }
.sl-who.dem.cr1 .sl-av::after, .sl-who.dem.cr2 .sl-av::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.sl-who.dem.cr1 .sl-av::after { background: linear-gradient(118deg, transparent 44%, rgba(255,255,255,.7) 46%, transparent 49%), linear-gradient(60deg, transparent 62%, rgba(255,255,255,.5) 63.5%, transparent 66%); }
.sl-who.dem.cr2 .sl-av::after { background: linear-gradient(118deg, transparent 44%, rgba(255,255,255,.85) 46%, transparent 49%), linear-gradient(60deg, transparent 62%, rgba(255,255,255,.7) 63.5%, transparent 66%), linear-gradient(170deg, transparent 22%, rgba(255,255,255,.7) 24%, transparent 27%), linear-gradient(20deg, transparent 52%, rgba(255,255,255,.6) 54%, transparent 57%); }

/* 6 counter-attack warning and lunge */
.sl-who.dem.warn .sl-av { animation: slWarn .42s ease-in-out infinite; border-color: #ff3a2e; box-shadow: 0 0 16px rgba(255,58,46,.8); } @keyframes slWarn { 0%,100% { transform: scale(1); } 50% { transform: scale(.86) translateX(4px); } }
.sl-lunge { position: absolute; inset: 0; } .sl-lunge span { position: absolute; top: 38%; right: -30%; font-family: var(--display); font-weight: 800; font-size: 150px; line-height: 1; color: #ff5a4a; text-shadow: 0 0 40px #ff2a1a; animation: slLg .55s cubic-bezier(.5,0,.2,1) forwards; }
.sl-lunge i { position: absolute; left: 0; right: 0; top: 50%; height: 4px; background: linear-gradient(90deg, transparent, #ff5a4a, #fff, transparent); transform: scaleX(0); animation: slLgl .45s ease .1s forwards; box-shadow: 0 0 18px #ff2a1a; }
@keyframes slLg { 0% { transform: translateX(0) scale(.7); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateX(-190vw) scale(1.5); opacity: 0; } } @keyframes slLgl { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.sl-redf { position: absolute; inset: 0; background: radial-gradient(circle, transparent 40%, rgba(255,30,20,.55)); opacity: 0; animation: slRed .6s ease-out; } @keyframes slRed { 0% { opacity: 1; } 100% { opacity: 0; } }

/* 7 ghost health bar */
.sl-hp { position: relative; } .sl-hp i { position: relative; z-index: 1; } .sl-hp .gh { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; border-radius: 99px; background: rgba(255,255,255,.8); transition: width .55s ease; }

/* 8 combo counter */
#slcb { position: fixed; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 236px); z-index: 70; pointer-events: none; text-align: center; opacity: 0; transition: opacity .2s; } #slcb.on { opacity: 1; }
.sl-cbn { font-family: var(--display); color: var(--fc, #fff); text-shadow: 0 0 14px var(--fc, #fff), 0 2px 0 #000; line-height: 1; } .sl-cbn small { display: block; font-size: 10px; letter-spacing: .18em; font-weight: 800; } .sl-cbn b { display: block; font-size: 34px; font-weight: 800; } .sl-cbn em { display: block; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.sl-cbn.pu b { animation: slPu .35s cubic-bezier(.2,1.6,.4,1); } @keyframes slPu { 0% { transform: scale(1.7); } 100% { transform: scale(1); } }
.sl-shat { position: absolute; right: 8px; top: 0; font-family: var(--display); font-weight: 800; font-size: 34px; color: #ff7a6e; animation: slShatT .7s ease-out forwards; } .sl-shat i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: #ff7a6e; transform: rotate(var(--a)) translateX(0); animation: slShatP .7s ease-out forwards; }
@keyframes slShatT { 0% { opacity: 1; transform: none; } 30% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(.7) translateY(14px); } } @keyframes slShatP { to { transform: rotate(var(--a)) translateX(var(--r)); opacity: 0; } }

/* 9 demon timer ring */
.sl-ring { position: absolute; inset: -6px; pointer-events: none; } .sl-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sl-ring circle { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; stroke: #7fe0ae; animation: slRing linear forwards; }
@keyframes slRing { 0% { stroke-dashoffset: 100; stroke: #7fe0ae; } 55% { stroke: #ffd166; } 80% { stroke: #ff5a4a; } 100% { stroke-dashoffset: 0; stroke: #ff2a1a; } }

/* 10 boss intro card */
.sl-bi { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, rgba(70,20,50,.99), rgba(6,4,14,1)); display: grid; place-items: center; text-align: center; opacity: 0; animation: slBi 2.6s ease forwards; }
.sl-bi.upper { background: radial-gradient(circle at 50% 46%, rgba(110,20,30,.99), rgba(10,3,8,1)); } .sl-bi.muzan { background: radial-gradient(circle at 50% 46%, rgba(120,90,20,.99), rgba(16,6,4,1)); }
@keyframes slBi { 0% { opacity: 0; } 10% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }
.sl-bi u { position: absolute; left: 0; right: 0; height: 15vh; background: #000; text-decoration: none; top: 0; transform: translateY(-100%); animation: slBar .5s ease .05s forwards; } .sl-bi u.b { top: auto; bottom: 0; transform: translateY(100%); }
@keyframes slBar { to { transform: none; } }
.sl-bi-k { display: block; font-family: var(--display); font-weight: 800; font-size: min(34vw, 170px); line-height: 1; color: #ffd9d2; text-shadow: 0 0 50px rgba(255,60,50,.9); animation: slBiK 1.9s cubic-bezier(.2,.7,.2,1) .15s both; }
@keyframes slBiK { 0% { opacity: 0; transform: scale(1.9); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1.08); } }
.sl-bi-t { font-size: 13px; letter-spacing: .4em; color: var(--gold); font-weight: 800; margin-top: 8px; animation: slUp .5s ease .6s both; }
.sl-bi-n { font-family: var(--display); font-weight: 800; font-size: 32px; color: #fff; margin-top: 4px; animation: slUp .5s ease .75s both; } .sl-bi-e { color: #ff8a7a; font-weight: 700; margin-top: 4px; animation: slUp .5s ease .9s both; }

/* 11 prompts */
#slnote { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 74px); z-index: 95; display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.sn { display: flex; align-items: center; gap: 9px; padding: 8px 15px 8px 9px; border-radius: 99px; background: rgba(14,10,34,.92); border: 1px solid var(--gold); color: #fff; font-weight: 700; font-size: 13.5px; box-shadow: 0 8px 26px rgba(0,0,0,.5); animation: slSn 2.3s cubic-bezier(.2,.9,.2,1) forwards; }
.sn i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #1a0f2e; font-family: var(--display); font-weight: 800; font-size: 14px; }
@keyframes slSn { 0% { opacity: 0; transform: translateY(-16px) scale(.9); } 10% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }

/* 12 slash-cut transition */
.sl-fight.slcut { animation: slCut .34s ease-out; } @keyframes slCut { from { clip-path: polygon(0 0, 0 0, -35% 100%, -35% 100%); } to { clip-path: polygon(0 0, 140% 0, 105% 100%, -35% 100%); } }
.sl-cutl { position: absolute; left: -40%; top: 50%; width: 180%; height: 3px; background: #fff; box-shadow: 0 0 16px 3px rgba(255,255,255,.8); transform: rotate(-62deg) translateX(-60%); transform-origin: 50% 50%; opacity: 0; animation: slCl .36s ease-out; }
@keyframes slCl { 0% { opacity: 1; transform: rotate(-62deg) translateX(-70%); } 100% { opacity: 0; transform: rotate(-62deg) translateX(70%); } }

/* 13 slow-motion final blow */
.sl-fin { position: absolute; inset: 0; display: grid; place-items: center; } .sl-fin-v { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 20%, rgba(0,0,0,.82)); opacity: 0; animation: slVg 1.9s ease forwards; }
@keyframes slVg { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
.sl-fin-g { position: relative; display: grid; place-items: center; width: 240px; height: 240px; } .sl-fin-g > span { grid-area: 1 / 1; font-family: var(--display); font-weight: 800; font-size: 190px; line-height: 1; color: #ffd9d2; text-shadow: 0 0 40px rgba(255,60,50,.9); }
.sl-fin-g .k0 { animation: slK0 .95s cubic-bezier(.3,.1,.3,1) forwards; } @keyframes slK0 { 0% { transform: scale(.7); opacity: 0; } 25% { opacity: 1; } 90% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1.18); opacity: 0; } }
.sl-fin-g .sh { opacity: 0; animation: slSh .95s cubic-bezier(.2,.7,.3,1) .93s forwards; } @keyframes slSh { 0% { opacity: 1; transform: scale(1.18); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rt)) scale(.7); } }
.sl-fin-g em { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #fff; opacity: 0; animation: slRingB .7s ease-out .93s forwards; } @keyframes slRingB { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(16); } }
.sl-fin.lite .k { font-family: var(--display); font-weight: 800; font-size: 150px; color: #ffd9d2; text-shadow: 0 0 40px rgba(255,60,50,.9); animation: slKl .9s ease forwards; } @keyframes slKl { 0% { opacity: 0; transform: scale(.8); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }

/* 16 enraged */
.sl-enr { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, rgba(255,40,30,.4), transparent 70%); opacity: 0; animation: slEn 1.5s ease forwards; } .sl-enr span { font-family: var(--display); font-weight: 800; font-size: 150px; line-height: 1; color: #ff6a5a; text-shadow: 0 0 40px #ff2a1a; } .sl-enr b { color: #fff; letter-spacing: .12em; font-size: 14px; text-transform: uppercase; }
@keyframes slEn { 0% { opacity: 0; transform: scale(1.5); } 15% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }
html[data-enr] .sl-stage { border-color: #ff4a3a !important; box-shadow: inset 0 0 22px rgba(255,50,40,.4); }

/* 17 parallax arena */
#slpx span { position: absolute; font-family: var(--display); font-weight: 800; color: #fff; line-height: 1; will-change: transform; }
#slpx .l1 { left: -6vw; top: 8vh; font-size: 70vw; opacity: .035; transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 10px), 0); }
#slpx .l2 { right: -8vw; top: 38vh; font-size: 56vw; opacity: .05; transform: translate3d(calc(var(--px, 0) * -22px), calc(var(--py, 0) * -18px), 0); }
#slpx .l3 { left: 12vw; bottom: -6vh; font-size: 40vw; opacity: .06; transform: translate3d(calc(var(--px, 0) * 38px), calc(var(--py, 0) * 28px), 0); }

/* 18 reactive environment and 19 power-up aura */
#slenv .sle, #slenv .slr, #slenv .sla, #slenv .dw, #slenv .vg { display: none; position: absolute; }
#slenv .dw { inset: 0; background: linear-gradient(0deg, rgba(255,210,140,.34), rgba(255,150,90,.12) 40%, transparent 70%); opacity: 0; transition: opacity 1s; } #slenv .vg { inset: 0; background: radial-gradient(circle, transparent 55%, rgba(150,10,30,.42)); opacity: 0; transition: opacity .8s; }
html[data-sle~="dawn"] #slenv .dw, html[data-sle~="rain"] #slenv .vg { display: block; opacity: 1; }
html[data-sle~="ember"] #slenv .sle { display: block; left: var(--x); bottom: -12px; width: var(--s); height: var(--s); border-radius: 50%; background: var(--fc, #ffae5a); box-shadow: 0 0 8px var(--fc, #ffae5a); opacity: 0; animation: slEm var(--d) ease-in var(--dl) infinite; }
html[data-sle~="rain"] #slenv .slr { display: block; left: var(--x); top: -50px; width: 1.5px; height: var(--h); background: linear-gradient(transparent, rgba(190,210,255,.55)); opacity: 0; animation: slRn var(--d) linear var(--dl) infinite; }
html[data-slf="1"] #slenv .sla, html[data-slf="2"] #slenv .sla, html[data-slf="3"] #slenv .sla { display: block; left: var(--x); bottom: 8vh; width: var(--s); height: var(--s); border-radius: 50%; background: var(--fc); box-shadow: 0 0 10px var(--fc); opacity: 0; animation: slAu var(--d) ease-out var(--dl) infinite; }
@keyframes slEm { 0% { opacity: 0; transform: translate(0,0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), -85vh); } }
@keyframes slRn { 0% { opacity: 0; transform: translate(0,0); } 10% { opacity: .8; } 100% { opacity: 0; transform: translate(-30px, 110vh); } }
@keyframes slAu { 0% { opacity: 0; transform: translate(0,0); } 20% { opacity: .85; } 100% { opacity: 0; transform: translate(var(--dx), -60vh); } }
html[data-slf] .sl-fight .qz-card.sa1, html[data-slf] .sl-fight .qz-card.sa2, html[data-slf] .sl-fight .qz-card.sa3 { border-color: var(--slc) !important; box-shadow: 0 0 0 1px var(--slc), 0 0 26px var(--slg), 0 14px 40px rgba(0,0,0,.4) !important; }
html[data-slf] .sl-fight .qz-card.sa3 { box-shadow: 0 0 0 1px var(--slc), 0 0 40px var(--slg), 0 0 80px var(--slg), 0 14px 40px rgba(0,0,0,.4) !important; }

/* 20 idle breathing */
.sl-who .sl-av { animation: slBr 3.8s ease-in-out infinite; } .sl-who.you .sl-av { animation-delay: -1.9s; } .sl-vs { animation: slFl 2.6s ease-in-out infinite; }
@keyframes slBr { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } } @keyframes slFl { 0%,100% { opacity: 1; } 45% { opacity: .62; } 55% { opacity: .95; } 70% { opacity: .7; } }

/* 14 victory ink wipe and loot reveal, 15 defeat */
.sl-ink { position: absolute; inset: 0; z-index: 5; } .sl-ink u { position: absolute; left: -25%; width: 150%; height: 36%; top: 0; background: #07050f; text-decoration: none; transform: skewX(-18deg); animation: slInk .85s cubic-bezier(.7,0,.25,1) forwards; }
.sl-ink u.b { top: 32%; animation-delay: .08s; } .sl-ink u.c { top: 64%; animation-delay: .16s; } @keyframes slInk { 0% { transform: skewX(-18deg) translateX(0); } 100% { transform: skewX(-18deg) translateX(135%); } }
.sl-vc .qz-win.loot { position: relative; overflow: hidden; } .sl-vc .qz-win.loot::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); animation: slShine 1s ease 2.2s both; }
@keyframes slShine { to { left: 130%; } }
.sl-grey { position: absolute; inset: 0; background: #808080; mix-blend-mode: saturation; opacity: 0; animation: slGr 2.6s ease forwards; } @keyframes slGr { 0% { opacity: 0; } 30% { opacity: .92; } 70% { opacity: .92; } 100% { opacity: 0; } }

/* battery levels: steady effects only where affordable */
html[data-bat="low"] #slenv .sle:nth-child(even), html[data-bat="low"] #slenv .slr:nth-child(even), html[data-bat="low"] #slenv .sla:nth-child(even) { display: none !important; }
html[data-bat="medium"] #slpx, html[data-bat="high"] #slpx { display: none; }
html[data-bat="medium"] #slenv .sle, html[data-bat="medium"] #slenv .slr, html[data-bat="medium"] #slenv .sla, html[data-bat="high"] #slenv .sle, html[data-bat="high"] #slenv .slr, html[data-bat="high"] #slenv .sla { display: none !important; }
html[data-bat="medium"] .sl-who .sl-av, html[data-bat="high"] .sl-who .sl-av, html[data-bat="medium"] .sl-vs, html[data-bat="high"] .sl-vs { animation: none; }
html[data-bat="high"] .sl-ring { display: none; }
html[data-idle="1"]:not([data-bat="full"]) #slenv *, html[data-idle="1"]:not([data-bat="full"]) .sl-who .sl-av, html[data-idle="1"]:not([data-bat="full"]) .sl-vs, html[data-scroll="1"][data-bat="medium"] #slenv *, html[data-scroll="1"][data-bat="high"] #slenv * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { #slenv, #slpx, .sl-fight.sh1, .sl-fight.sh2, .sl-fight.sh3, .sl-fight.slcut { display: none; animation: none !important; } .sl-who .sl-av, .sl-vs { animation: none !important; } }

/* characters */
:root { --ck1: rgb(var(--aura, 230,185,85)); --ck2: #1a1230; }
.sl-stage { position: relative; display: flex; justify-content: space-between; align-items: flex-end; height: 150px; margin: 8px 0 0; padding: 0 6px; border-radius: 18px; overflow: hidden; background: radial-gradient(90% 90% at 50% 100%, rgba(255,255,255,.07), transparent 70%), linear-gradient(180deg, rgba(20,14,48,.55), rgba(10,8,30,.7)); border: 1px solid var(--line); }
.sl-stage.upper { border-color: #a14b45; } .sl-stage.muzan { border-color: var(--gold); }
.sl-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: linear-gradient(0deg, rgba(0,0,0,.45), transparent); }
.sl-sk { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); font-family: var(--display); font-weight: 800; font-size: 110px; line-height: 1; color: #fff; opacity: .05; pointer-events: none; }
.sl-stage .me, .sl-stage .dm { position: relative; z-index: 1; height: 138px; } .sl-stage .dm { height: 144px; }
.sl-stage .ch { height: 100%; width: auto; overflow: visible; transform-origin: 50% 100%; animation: chBr 3.8s ease-in-out infinite; } .sl-stage .dm .ch { animation-delay: -1.6s; }
.sl-stage .me::before, .sl-stage .dm::before { content: ""; position: absolute; inset: -6% -24% -2%; z-index: -1; background: radial-gradient(closest-side, var(--gl, rgba(0,0,0,.25)), transparent); pointer-events: none; }
.sl-stage.lower .dm { --gl: rgba(150,120,255,.38); } .sl-stage.upper .dm { --gl: rgba(255,70,50,.4); } .sl-stage.muzan .dm { --gl: rgba(255,200,90,.34); }
.sl-stage[data-r="1"] .me { --gl: rgba(190,230,255,.3); } .sl-stage[data-r="2"] .me { --gl: rgba(255,176,214,.34); } .sl-stage[data-r="3"] .me { --gl: rgba(255,233,168,.4); }
@keyframes chBr { 0%,100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.03); } }
.ch .sw { transform-origin: 91px 73px; }
/* poses: short, then stay still */
.sl-stage[data-p="strike"] .me, .sl-stage[data-p="win"] .me { animation: chDash .55s cubic-bezier(.3,.1,.2,1); } .sl-stage[data-p="strike"] .me .sw, .sl-stage[data-p="win"] .me .sw { animation: chSlash .55s ease; }
.sl-stage[data-p="strike"] .dm { animation: chRecoil .5s ease .12s; } .sl-stage[data-p="win"] .dm { animation: chFall 1.1s ease .2s forwards; }
.sl-stage[data-p="hurt"] .me { animation: chHurt .5s ease; } .sl-stage[data-p="hurt"] .dm { animation: chPunch .5s ease; }
.sl-stage[data-p="lunge"] .dm { animation: chLunge .6s cubic-bezier(.4,0,.2,1); } .sl-stage[data-p="lunge"] .me { animation: chHurt .5s ease .25s; }
.sl-stage.warn:not([data-p="strike"]):not([data-p="win"]) .dm .ch { animation: chCoil .42s ease-in-out infinite; }
@keyframes chDash { 0% { transform: none; } 30% { transform: translateX(86px); } 55% { transform: translateX(86px); } 100% { transform: none; } }
@keyframes chSlash { 0% { transform: rotate(0); } 30% { transform: rotate(-70deg); } 60% { transform: rotate(40deg); } 100% { transform: rotate(0); } }
@keyframes chRecoil { 0% { transform: none; filter: brightness(1); } 25% { transform: translateX(14px) scale(.96); filter: brightness(2.6); } 100% { transform: none; filter: brightness(1); } }
@keyframes chFall { 0% { transform: none; opacity: 1; filter: none; } 30% { transform: translateX(10px); filter: brightness(2.4); } 100% { transform: translateY(14px) scale(.9); opacity: .0; filter: grayscale(1); } }
@keyframes chHurt { 0% { transform: none; filter: none; } 20% { transform: translateX(-16px); filter: brightness(1.8) sepia(1) hue-rotate(-30deg) saturate(4); } 100% { transform: none; filter: none; } }
@keyframes chPunch { 0% { transform: none; } 30% { transform: translateX(-26px) scale(1.06); } 100% { transform: none; } }
@keyframes chLunge { 0% { transform: none; } 35% { transform: translateX(-120px) scale(1.12); } 55% { transform: translateX(-120px) scale(1.12); } 100% { transform: none; } }
@keyframes chCoil { 0%,100% { transform: translateX(0) scale(1); } 50% { transform: translateX(5px) scale(.94); } }
/* intro and boss card */
.sl-bigsig.has-ch { font-size: 0; height: clamp(150px, 46vw, 210px); display: grid; place-items: center; text-shadow: none; } .sl-bigsig.has-ch .ch { height: 100%; width: auto; filter: drop-shadow(0 0 22px rgba(255,70,60,.55)); }
.sl-bi-ch { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -62%); height: min(52vh, 380px); z-index: 1; animation: slBiC 2s cubic-bezier(.2,.7,.2,1) .15s both; } .sl-bi-ch .ch { height: 100%; width: auto; filter: drop-shadow(0 0 26px rgba(255,70,60,.6)); }
@keyframes slBiC { 0% { opacity: 0; transform: translate(-30%, -62%) scale(.9); } 25% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -62%) scale(1.04); } }
.sl-bi .sl-bi-k { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); opacity: .12; font-size: min(60vw, 280px); } .sl-bi-c { position: relative; z-index: 2; align-self: end; margin-bottom: 18vh; } 
/* battery: steady breathing only on Full and Low */
html[data-bat="medium"] .sl-stage .ch, html[data-bat="high"] .sl-stage .ch { animation: none; }
html[data-idle="1"]:not([data-bat="full"]) .sl-stage .ch { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .sl-stage .me, .sl-stage .dm, .sl-stage .ch, .sl-stage .me .sw { animation: none !important; } }
/* boss intro: stacked, centred */
.sl-bi { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.sl-bi .sl-bi-k { animation: none; opacity: .1; pointer-events: none; }
.sl-bi-ch { position: relative; left: auto; top: auto; transform: none; height: min(40vh, 320px); animation: slBiC 1.6s cubic-bezier(.2,.7,.2,1) .15s both; }
@keyframes slBiC { 0% { opacity: 0; transform: translateX(-24px) scale(.92); } 30% { opacity: 1; } 100% { opacity: 1; transform: scale(1.04); } }
.sl-bi .sl-bi-c { margin: 0; align-self: auto; }

/* merged battle stage: figures with their health bars, no separate panel, no status lines */
.sl-stage { height: auto; align-items: flex-end; gap: 6px; padding: 8px 10px 10px; margin-top: 6px; }
.sl-stage .me, .sl-stage .dm { flex: 1 1 0; min-width: 0; height: auto; display: flex; flex-direction: column; align-items: center; }
.sl-stage .me .ch, .sl-stage .dm .ch { height: 104px; width: auto; flex: none; }
.sl-stage .me::before, .sl-stage .dm::before { inset: -4% -10% 30%; }
.sl-stage .sl-who { width: 100%; margin-top: 6px; grid-template-columns: 30px 1fr; } .sl-stage .sl-av { width: 30px; height: 30px; font-size: 13px; border-radius: 10px; }
.sl-stage .sl-nm { font-size: 12px; } .sl-stage .sl-hn { font-size: 10.5px; margin-top: 2px; }
.sl-vs2 { align-self: center; font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--gold); opacity: .8; animation: slFl 2.6s ease-in-out infinite; }
.sl-miss { grid-column: 1 / 3; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--good); margin-top: 2px; }
.sl-fight .qz-meta { display: none; } .sl-fight:not(.qz-pad) .sl-think { display: none; } .sl-fight .sl-think { margin-top: 4px; }
/* poses move the figure only, not its health bar */
.sl-stage[data-p="strike"] .me, .sl-stage[data-p="win"] .me, .sl-stage[data-p="strike"] .dm, .sl-stage[data-p="win"] .dm, .sl-stage[data-p="hurt"] .me, .sl-stage[data-p="hurt"] .dm, .sl-stage[data-p="lunge"] .dm, .sl-stage[data-p="lunge"] .me { animation: none; }
.sl-stage[data-p="strike"] .me .ch, .sl-stage[data-p="win"] .me .ch { animation: chDash .55s cubic-bezier(.3,.1,.2,1); }
.sl-stage[data-p="strike"] .dm .ch { animation: chRecoil .5s ease .12s; } .sl-stage[data-p="win"] .dm .ch { animation: chFall 1.1s ease .2s forwards; }
.sl-stage[data-p="hurt"] .me .ch { animation: chHurt .5s ease; } .sl-stage[data-p="hurt"] .dm .ch { animation: chPunch .5s ease; }
.sl-stage[data-p="lunge"] .dm .ch { animation: chLunge .6s cubic-bezier(.4,0,.2,1); } .sl-stage[data-p="lunge"] .me .ch { animation: chHurt .5s ease .25s; }
@keyframes chDash { 0% { transform: none; } 30% { transform: translateX(70px); } 55% { transform: translateX(70px); } 100% { transform: none; } }
@keyframes chLunge { 0% { transform: none; } 35% { transform: translateX(-90px) scale(1.12); } 55% { transform: translateX(-90px) scale(1.12); } 100% { transform: none; } }
.sl-stage .dm { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .sl-vs2 { animation: none; } }
html[data-bat="medium"] .sl-vs2, html[data-bat="high"] .sl-vs2 { animation: none; }

/* PC: hovering must not move the element under the pointer (it caused edge flicker); keep the glow only */
.qz-opt:hover:not(:disabled), :root[data-theme] .qz-opt:hover:not(:disabled), :root[data-theme]:not([data-theme="night"]) .row:hover, button.row:hover { transform: none !important; }
html { scrollbar-gutter: stable; }

/* ===== Phase 1 extras ===== */
.menu { max-height: 74vh; overflow-y: auto; }
.card.notice { border-color: var(--gold); background: linear-gradient(135deg, rgba(230,185,85,.14), rgba(185,166,240,.10)); }
.stars { display: flex; gap: 6px; } .star { background: none; border: 0; font-size: 38px; line-height: 1; color: #4a477f; padding: 2px; cursor: pointer; transition: transform .15s, color .15s; } .star.on { color: var(--gold); text-shadow: 0 0 14px rgba(230,185,85,.6); } .star:active { transform: scale(1.25); }
.tpill { position: fixed; z-index: 40; left: 12px; top: calc(10px + env(safe-area-inset-top, 0px)); background: rgba(14,13,43,.92); color: var(--gold); border: 1.5px solid var(--gold); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.tbig { font-family: "Shippori Mincho", serif; font-weight: 800; font-size: 64px; color: var(--gold); margin: 14px 0 6px; letter-spacing: 2px; text-shadow: 0 0 22px rgba(230,185,85,.35); }
.eff { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 120px; } .ef { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; } .ef i { display: block; width: 100%; background: var(--gold); border-radius: 4px 4px 0 0; opacity: .9; } .efn, .efd { font-size: 11px; color: var(--muted); }
/* rank-up */
.ru { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, rgba(60,40,120,.95), rgba(6,5,24,.97)); animation: ruIn .5s ease both; }
.ru.out { opacity: 0; transition: opacity .5s; }
@keyframes ruIn { from { opacity: 0; } }
.ru-p i { position: absolute; top: -20px; left: var(--x); width: var(--s); height: calc(var(--s) * 1.5); border-radius: 2px 8px; background: var(--c); animation: ruFall 3.6s var(--d) ease-in infinite; }
@keyframes ruFall { to { transform: translateY(110vh) rotate(600deg); } }
.ru-b { text-align: center; color: #fbf4e4; padding: 20px; animation: ruPop .9s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes ruPop { from { transform: scale(.3); opacity: 0; } }
.ru-k { width: 150px; height: 150px; margin: 0 auto 16px; border-radius: 50%; border: 5px solid #e6b955; background: radial-gradient(circle, #6b2140, #4a1730); display: grid; place-items: center; font-family: "Shippori Mincho", serif; font-weight: 800; font-size: 84px; box-shadow: 0 0 60px rgba(230,185,85,.55), inset 0 0 30px rgba(0,0,0,.4); animation: ruGlow 2s ease-in-out infinite; }
@keyframes ruGlow { 50% { box-shadow: 0 0 90px rgba(230,185,85,.85), inset 0 0 30px rgba(0,0,0,.4); } }
.ru-s { letter-spacing: .5em; color: #e6b955; font-weight: 700; font-size: 14px; margin-left: .5em; } .ru-n { font-family: "Shippori Mincho", serif; font-weight: 800; font-size: 44px; margin: 6px 0; } .ru-t { color: #cbbff5; font-size: 15px; }
/* Nezuko welcome */
.wl { position: fixed; inset: 0; z-index: 95; display: grid; align-items: end; background: radial-gradient(ellipse at 50% 20%, #5b2a63 0%, #2a1646 45%, #0b0a26 100%); animation: ruIn .8s ease both; overflow: hidden; }
.wl.out { opacity: 0; transition: opacity .6s; }
.wl-pet i { position: absolute; top: -20px; left: var(--x); width: var(--s); height: calc(var(--s) * .7); border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #ffc4e1, #ff8fc2); opacity: .85; animation: wlFall var(--t) var(--d) linear infinite; }
@keyframes wlFall { 0% { transform: translate(0,0) rotate(0); } 50% { transform: translate(40px,55vh) rotate(180deg); } 100% { transform: translate(-30px,110vh) rotate(360deg); } }
.wl-bam { position: absolute; inset: 0; pointer-events: none; } .wl-bam b { position: absolute; bottom: 0; width: 14px; height: 70%; background: linear-gradient(90deg, #1d4a35, #3f8f68 45%, #1d4a35); opacity: .55; border-radius: 6px; box-shadow: 0 0 20px rgba(110,220,160,.25); } .wl-bam b:nth-child(1) { left: 6%; height: 62%; } .wl-bam b:nth-child(2) { left: 14%; height: 78%; } .wl-bam b:nth-child(3) { right: 12%; height: 70%; } .wl-bam b:nth-child(4) { right: 5%; height: 58%; } .wl-bam b:nth-child(5) { left: 22%; height: 48%; opacity: .35; }
.wl-card { position: relative; margin: 0 auto; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0px)); color: #fbf4e4; animation: wlUp .9s .2s cubic-bezier(.2,.9,.3,1) both; }
@keyframes wlUp { from { transform: translateY(60px); opacity: 0; } }
.wl-who { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.wl-orb { position: relative; width: 58px; height: 58px; flex: none; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff4d8, #ffb3d6 55%, #c85a9a); box-shadow: 0 0 34px 8px rgba(255,150,200,.55); animation: orb 3s ease-in-out infinite; } @keyframes orb { 50% { transform: translateY(-6px); box-shadow: 0 0 46px 14px rgba(255,150,200,.7); } }
.wl-orb i { position: absolute; width: 16px; height: 12px; border-radius: 70% 30%; background: #ffd9ec; top: -4px; right: -10px; animation: flap .5s ease-in-out infinite alternate; } .wl-orb i + i { top: 14px; right: -16px; width: 12px; height: 9px; animation-delay: .2s; } @keyframes flap { to { transform: scaleY(.3); } }
.wl-nm { font-family: "Shippori Mincho", serif; font-weight: 800; font-size: 24px; color: #ffc4e1; } .wl-sub { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #cbbff5; }
.wl-bub { position: relative; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,196,225,.5); border-radius: 18px; padding: 16px 18px; min-height: 120px; font-size: 17px; line-height: 1.6; white-space: pre-wrap; backdrop-filter: blur(6px); box-shadow: 0 8px 40px rgba(0,0,0,.35); cursor: pointer; }
.wl-x { display: grid; gap: 8px; margin-top: 12px; } .wl-f { display: flex; gap: 12px; align-items: center; background: rgba(255,255,255,.07); border-radius: 12px; padding: 8px 12px; animation: wlUp .5s both; } .wl-f span { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 2px solid #e6b955; background: #4a1730; display: grid; place-items: center; font-family: "Shippori Mincho", serif; font-weight: 800; font-size: 20px; } .wl-f p { margin: 0; font-size: 14px; line-height: 1.35; }
.wl-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 10px; } .wl-skip { background: none; border: 0; color: #a9a3c4; font-size: 14px; padding: 10px; } .wl-next { background: linear-gradient(180deg, #f6d98a, #d9a441); color: #1a1626; border: 0; border-radius: 999px; padding: 12px 26px; font-weight: 800; font-size: 16px; box-shadow: 0 0 24px rgba(230,185,85,.45); }
.wl-dots { display: flex; gap: 6px; } .wl-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); } .wl-dots i.on { background: #ffc4e1; box-shadow: 0 0 10px #ffc4e1; }

.wl-who{padding-left:14px}

.wl{align-items:center;justify-items:center}
.wl-card{margin:auto;text-align:center}
.wl-who{flex-direction:column;gap:6px;margin-bottom:16px}
.wl-orb{width:92px;height:92px;background:none;box-shadow:0 0 40px 10px rgba(255,150,200,.5);border-radius:50%}
.wl-orb i{display:none}
.wl-em{width:100%;height:100%;display:block}
.wl-bub{text-align:center}
.wl-f{text-align:left}
.wl-nav{margin-top:20px}
.wl-orb{box-shadow:0 0 18px 2px rgba(255,150,200,.45);animation:none}.wl-card{padding-top:40px}