/* battle stage: mesh sprites, enemy bars */
#stagec { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.foe { position: absolute; width: var(--w, 70px); height: 0; transform: translateX(-50%); margin: 0; z-index: 4; pointer-events: none; }
.foe .fhp { position: absolute; left: 12%; right: 12%; bottom: 2px; top: auto; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .75); border: 1px solid rgba(255, 255, 255, .18); overflow: hidden; }
.foe.boss { display: none; }
.dmg.hurt { color: #ff8a9c; font-size: 15px; }

.hpbox { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: auto; right: max(12px, env(safe-area-inset-right, 0px)); width: 46%; }
.wave .mv { margin-left: auto; }
.mini { height: 26px; padding: 0 9px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--paper); background: rgba(5, 6, 12, .72); border: 1px solid var(--line-2); }
.wave .stn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the card header makes room for the small label above the glyph */
.cc .hd { height: 64px; place-items: end center; padding-bottom: 5px; }
.cc .new { top: 4px; }

/* story: free-standing figures; the speaker steps forward */
#story.vn .vbg.cg { filter: none; inset: 0; width: 100%; height: 100%; animation: kb 12s ease-out forwards, fadein .8s; }

/* story: two figures side by side, the speaker lit and the other in shadow; the right side faces back */
#story.vn .vch { top: auto; bottom: 23%; height: 47%; width: 60%; object-fit: contain; object-position: 50% 100%; -webkit-mask-image: none; mask-image: none; filter: brightness(.38) saturate(.65) drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); transform: none; }
#story.vn .vch.l { left: -7%; right: auto; }
#story.vn .vch.r { right: -7%; left: auto; transform: scaleX(-1); }
#story.vn .vch.solo { left: 50%; width: 72%; height: 52%; transform: translateX(-50%); }
#story.vn .vch.on { z-index: 1; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6)); transform: scale(1.05) translateY(-6px); }
#story.vn .vch.r.on { transform: scale(-1.05, 1.05) translateY(-6px); }
#story.vn .vch.solo.on { transform: translateX(-50%) scale(1.03) translateY(-6px); }
#story.vn .vch.back { bottom: 33%; height: 38%; width: 48%; }
#story.vn .vch.l.back { left: 16%; } #story.vn .vch.r.back { right: 16%; }

/* the world regains colour as the parts return */
#battle .bg { filter: saturate(calc(.12 + var(--lv, 0) * 1.1)) brightness(calc(.42 + var(--lv, 0) * .5)) contrast(1.05); }
#battle.full .bg { filter: saturate(1.3) brightness(.92); }
#battle.silence .bg { filter: saturate(0) brightness(.22); transition: filter 1.2s; }
#battle.silence .parts .pm { opacity: .22; filter: grayscale(1); transition: opacity 1.2s, filter 1.2s; }
#battle.silence .allybar { opacity: .35; transition: opacity 1.2s; }

/* numbers: bigger, punchier */
.dmg { font-size: 23px; -webkit-text-stroke: 1px rgba(0, 0, 0, .55); animation: dmgpop .85s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.dmg.crit { font-size: 42px; -webkit-text-stroke: 0; }
.dmg.crit::before { top: -15px; font-size: 11px; }
.dmg.hurt { color: #ff6f87; font-size: 26px; }
.dmg.heal { font-size: 24px; }
.dmg.nil { color: #9c9cb4; font-size: 20px; }
@keyframes dmgpop { 0% { opacity: 0; transform: translateX(-50%) scale(.4); } 14% { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1.35); } 30% { transform: translateX(-50%) translateY(-10px) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-42px) scale(.92); } }
.combo { left: max(12px, env(safe-area-inset-left, 0px)); right: auto; top: 27%; text-align: left; }
.combo b { font-size: 40px; }
.combo[data-t="1"] b { background-image: linear-gradient(180deg, #fff, #ffd77a); }
.combo[data-t="1"] small { color: var(--gold); }
.combo[data-t="2"] b { font-size: 50px; background-image: linear-gradient(180deg, #fff, #ff9b4a); }
.combo[data-t="2"] small { color: #ff9b4a; }
.combo[data-t="3"] b { font-size: 60px; background-image: linear-gradient(180deg, #fff, #ff5d7a 55%, #b57bff); filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 12px rgba(255, 93, 122, .8)); }
.combo[data-t="3"] small { color: #ff5d7a; }
.taphint { position: absolute; left: max(14px, env(safe-area-inset-left, 0px)); bottom: calc(26px + env(safe-area-inset-bottom, 0px)); z-index: 6; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--teal); white-space: nowrap; pointer-events: none; text-shadow: 0 1px 4px #000; animation: blink 1.6s infinite; }

/* a slanted card for each movement */
.wcard { position: absolute; left: 0; right: 0; top: 36%; z-index: 9; height: 76px; pointer-events: none; text-align: center; overflow: hidden; display: grid; align-content: center; gap: 1px; animation: wcard 1.1s cubic-bezier(.7, 0, .2, 1) forwards; }
.wcard i { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 6, 12, 0), rgba(5, 6, 12, .85) 22%, rgba(5, 6, 12, .85) 78%, rgba(5, 6, 12, 0)); border-block: 1px solid rgba(242, 195, 91, .55); }
.wcard small { font-family: var(--latin); font-size: 10px; letter-spacing: .5em; color: var(--gold); }
.wcard b { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: .24em; white-space: nowrap; background: linear-gradient(180deg, #fff, #ffe39a 60%, #e7a63a); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes wcard { 0% { transform: translateX(105%) skewX(-18deg); } 24% { transform: translateX(0) skewX(0); } 76% { transform: translateX(0) skewX(0); opacity: 1; } 100% { transform: translateX(-105%) skewX(18deg); opacity: .6; } }

/* a new instrument joining */
.sweep { position: absolute; left: 0; right: 0; top: 34%; z-index: 10; height: 96px; pointer-events: none; display: grid; align-content: center; justify-items: center; gap: 2px; overflow: hidden; animation: wcard 1.3s cubic-bezier(.7, 0, .2, 1) forwards; }
.sweep i { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent, var(--pc, #4fe3d0) 30%, var(--pc, #4fe3d0) 70%, transparent); opacity: .42; }
.sweep b { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: .18em; white-space: nowrap; color: #fff; text-shadow: 0 0 16px var(--pc, #4fe3d0), 0 2px 0 rgba(0, 0, 0, .7); }
.sweep small { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #fff; text-shadow: 0 1px 4px #000; }
.sweep.p-beat { --pc: var(--p-beat); } .sweep.p-str { --pc: var(--p-str); } .sweep.p-brass { --pc: var(--p-brass); } .sweep.p-key { --pc: var(--p-key); } .sweep.p-voice { --pc: var(--p-voice); }

/* title cards: a blade of light crosses first */
.tcard::after { content: ""; position: absolute; left: -20%; right: -20%; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, #fff, var(--gold), transparent); box-shadow: 0 0 22px var(--gold); transform: rotate(-9deg) scaleX(0); animation: tblade .7s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes tblade { 0% { transform: rotate(-9deg) scaleX(0); opacity: 1; } 60% { transform: rotate(-9deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-9deg) scaleX(1.1); opacity: 0; } }
.tcard .tc b { font-size: 36px; }

/* the slow drift of the backdrops must never show their edge */
#battle .bg, #story.vn .vbg:not(.cg) { inset: -7%; width: 114%; height: 114%; max-width: none; }

/* a hit tears the signal */
#battle.glitch .field, #battle.glitch .bg { animation: glitch .2s steps(2) 1; }
#battle.glitch::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px 3px), linear-gradient(90deg, rgba(255, 40, 90, .2), transparent 30%, transparent 70%, rgba(60, 220, 255, .18)); animation: glitchv .2s steps(3) 1 forwards; }
@keyframes glitch { 0% { transform: translateX(-4px); filter: hue-rotate(-20deg); } 50% { transform: translateX(4px); filter: hue-rotate(25deg) saturate(1.6); } 100% { transform: none; } }
@keyframes glitchv { 0% { opacity: 1; } 60% { opacity: .7; } 100% { opacity: 0; } }

/* evolving a part reads differently at each level */
.sweep em { font-family: var(--latin); font-style: normal; font-size: 11px; letter-spacing: .5em; color: #fff; text-shadow: 0 0 10px var(--pc); }
.sweep.lv2 { height: 118px; } .sweep.lv2 i { opacity: .6; } .sweep.lv2 b { font-size: 34px; }
.sweep.lv3 { height: 150px; top: 30%; } .sweep.lv3 i { opacity: .85; box-shadow: 0 0 40px var(--pc); } .sweep.lv3 b { font-size: 42px; color: #fff; text-shadow: 0 0 22px var(--pc), 0 0 6px #fff, 0 2px 0 rgba(0, 0, 0, .8); } .sweep.lv3 em { color: #fff; font-size: 13px; }
.pm.l1 { box-shadow: 0 0 6px currentColor; } .pm.l2 { box-shadow: 0 0 12px currentColor; } .pm.l3 { box-shadow: 0 0 22px currentColor, inset 0 0 12px currentColor; }

/* strategy: target marker, tags, labels */
.foe.focus::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 26px; height: 8px; margin-left: -13px; border-radius: 50%; border: 2px solid #ff5d7a; box-shadow: 0 0 10px #ff5d7a; }
.foe .fhp { top: auto; }
.tag.red { background: linear-gradient(180deg, #ff7a8f, #c92c4c); color: #fff; }
.tag.dim { background: rgba(120, 120, 140, .85); color: #eee; }
.stageinfo { display: block; font-size: 12px; letter-spacing: .08em; color: var(--paper); text-shadow: 0 1px 4px #000; white-space: nowrap; overflow: hidden; }
.stageinfo b { color: var(--gold); }
.dmg.enemy { color: #ffb6c4; font-size: 15px; font-family: var(--display); letter-spacing: .08em; }
.dmg.crit.label { font-size: 26px; font-family: var(--display); letter-spacing: .06em; }
.dmg.crit.label::before { content: none; }

/* it speaks */
.whisper { position: absolute; z-index: 7; transform: translateX(-50%); pointer-events: none; white-space: nowrap; font-family: var(--display); font-size: 15px; letter-spacing: .34em; color: rgba(235, 225, 225, .85); text-shadow: 0 0 8px rgba(255, 30, 70, .75), 2px 0 0 rgba(255, 30, 70, .3), -2px 0 0 rgba(60, 220, 255, .22); animation: whisper 2.2s ease-out forwards; }
@keyframes whisper { 0% { opacity: 0; filter: blur(4px); margin-top: 6px; } 18% { opacity: .95; filter: blur(0); } 70% { opacity: .75; } 100% { opacity: 0; filter: blur(3px); margin-top: -14px; letter-spacing: .6em; } }
#battle .vig { animation: vigbreath 5s ease-in-out infinite; }
@keyframes vigbreath { 50% { opacity: .72; } }

/* story: the speaking bust, large enough to read the face; its cut edge hides behind the text box */
#story.vn .vch.ex { bottom: 17%; height: 56%; width: 66%; }
#story.vn .vch.l.ex { left: -10%; } #story.vn .vch.r.ex { right: -10%; }
#story.vn .vch.solo.ex { left: 50%; width: 82%; height: 62%; }

/* the document viewer */
.doc-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; scrollbar-width: none; }
.doc-tabs button { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--mute); border: 1px solid var(--line-2); background: rgba(5, 6, 12, .6); white-space: nowrap; }
.doc-tabs button.on { color: #2b1a00; background: linear-gradient(180deg, #ffe39a, #e7a63a); border-color: transparent; }
.doc-list { display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; padding-right: 2px; }
.doc-row { position: relative; display: grid; gap: 2px; text-align: left; padding: 9px 12px; border-radius: 10px; background: rgba(5, 6, 12, .55); border: 1px solid var(--line-2); min-width: 0; }
.doc-row b { font-size: 14px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; }
.doc-row small { font-size: 10.5px; color: var(--mute); white-space: nowrap; overflow: hidden; }
.doc-row.locked b { color: #4c4c5e; letter-spacing: .2em; } .doc-row.locked small { color: #4c4c5e; }
.doc-row.new::after { content: "NEW"; position: absolute; right: 8px; top: 8px; font-family: var(--latin); font-size: 9px; color: #ff8ba2; }
.doc-art { width: 100%; max-height: 38vh; object-fit: cover; object-position: 50% 15%; border-radius: 10px; filter: contrast(1.08) saturate(.8); }
.doc { max-height: 52vh; overflow-y: auto; padding: 14px 14px; border-radius: 8px; color: #2a2118; background: linear-gradient(180deg, #d9cdb4, #bfb196); box-shadow: inset 0 0 40px rgba(60, 35, 10, .55); }
.doc small { display: block; font-size: 10.5px; color: #5c4c36; letter-spacing: .04em; }
.doc h3 { margin: 4px 0 8px; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: .06em; }
.doc p { margin: 0; font-size: 14px; line-height: 1.95; white-space: pre-wrap; }

/* figures appear with a quiet fade and never travel across the screen */
@keyframes vchin { from { opacity: 0; } }

/* story text: smaller, tighter letters, room around it; clauses stay whole when they fit */
#story.vn .vtext { font-size: 14px; line-height: 1.8; letter-spacing: 0; font-weight: 600; min-height: 5.4em; }
#story.vn .vbox { padding: 22px 22px 18px; }
#story.vn .vtext .cl { display: inline-block; max-width: 100%; }
#story.vn .vtext i { font-style: normal; visibility: hidden; }
#story.vn .vtext i.on { visibility: visible; }
#story .txt { font-size: 15px; letter-spacing: .02em; line-height: 1.9; }
.doc p { font-size: 13.5px; line-height: 1.85; }

/* the Silent King: a slow wrong light behind him, the edges of the world closing in */
.kaura { position: absolute; left: 56%; top: 44%; width: 170vw; max-width: 780px; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; animation: fadein 1.6s both; }
.kaura i { position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .17) 0 3deg, transparent 3deg 11deg, rgba(170, 150, 255, .12) 11deg 13deg, transparent 13deg 24deg); -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 66%); mask-image: radial-gradient(circle, #000 12%, transparent 66%); animation: kspin 26s linear infinite; }
.kaura i + i { animation: kspin 17s linear infinite reverse; opacity: .7; }
.kaura b { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .34), rgba(140, 120, 255, .18) 40%, transparent 70%); animation: kpulse 2.6s ease-in-out infinite; }
@keyframes kspin { to { transform: rotate(360deg); } }
@keyframes kpulse { 50% { transform: scale(1.14); opacity: .55; } }
.kveil { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse at 56% 42%, transparent 34%, rgba(0, 0, 0, .9) 92%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); animation: kveil 3.4s ease-in-out infinite; }
@keyframes kveil { 50% { opacity: .72; } }

/* the band */
.mhp { position: absolute; width: 44px; height: 4px; margin-left: -22px; z-index: 4; border-radius: 2px; background: rgba(0, 0, 0, .75); border: 1px solid rgba(255, 255, 255, .2); overflow: hidden; pointer-events: none; }
.mhp span { display: block; height: 100%; background: linear-gradient(90deg, #4fe3d0, #b4fff0); }
.bark { position: absolute; z-index: 8; max-width: 62%; padding: 5px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; color: #1b1840; background: rgba(245, 243, 255, .94); pointer-events: none; animation: barkin 2.2s ease-out forwards; }
@keyframes barkin { 0% { opacity: 0; margin-top: 6px; } 10% { opacity: 1; margin-top: 0; } 85% { opacity: 1; } 100% { opacity: 0; } }
.pm.mute { opacity: .3; filter: grayscale(1); }
.fx.slash.c-beat { border-top-color: var(--p-beat); } .fx.slash.c-str { border-top-color: var(--p-str); } .fx.slash.c-brass { border-top-color: var(--p-brass); } .fx.slash.c-key { border-top-color: var(--p-key); } .fx.slash.c-voice { border-top-color: var(--p-voice); }
.teamrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.teamrow:empty { display: none; }
.teamempty { display: grid; place-items: center; min-height: 92px; border-radius: 10px; border: 1px dashed var(--line-2); color: var(--mute); font-size: 12px; }

/* foes speak in their own broken way */
.whisper { display: flex; white-space: nowrap; letter-spacing: .16em; font-size: 14px; }
.whisper i { font-style: normal; display: inline-block; animation: wchar 1.1s ease-in-out infinite; }
@keyframes wchar { 0%, 100% { transform: none; } 30% { transform: translateY(-1.5px) rotate(-3deg); } 62% { transform: translateY(1px) rotate(2.5deg); } }
.whisper.low { color: #ffc9c9; font-size: 13px; }
.whisper.die { color: #fff; font-size: 15px; letter-spacing: .24em; text-shadow: 0 0 10px rgba(180, 220, 255, .85); animation-duration: 2.3s; }
.whisper.broken { color: #ff5a6e; font-size: 16px; letter-spacing: .3em; }
.whisper.broken i { animation-duration: .16s; }

/* afflictions */
.stbar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; min-height: 0; }
.stc { padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; color: #fff; animation: fadein .2s both; }
.stc.deaf { background: #5a4d86; }
.stc.rust { background: #8a5a2c; }
.stc.curse { background: #7a1830; animation: stcp 1s ease-in-out infinite; }
@keyframes stcp { 50% { filter: brightness(1.5); } }

/* the lullaby: everything sinks, a tap claws you back */
#battle.asleep::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(ellipse at 42% 62%, rgba(10, 8, 30, .35), rgba(4, 3, 16, .94) 74%); animation: fadein .5s both; }
.lull { position: absolute; left: 50%; top: 42%; z-index: 7; transform: translateX(-50%); text-align: center; pointer-events: none; color: #e6e1ff; }
.lull b { display: block; font-family: var(--display); font-size: 25px; letter-spacing: .3em; text-shadow: 0 0 14px #8c7dff; }
.lull small { font-size: 12px; font-weight: 700; animation: kpulse 1s ease-in-out infinite; display: block; margin-top: 4px; }

/* a thread from nowhere */
.thrd { position: absolute; top: 0; z-index: 4; width: 1.5px; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 240, 240, .9)); box-shadow: 0 0 5px rgba(255, 90, 110, .8); transform-origin: top; animation: thrd .25s ease-out both; }
@keyframes thrd { from { transform: scaleY(0); } }

/* the worm on your names */
.crawler { position: absolute; z-index: 9; padding: 0; border: 0; background: none 0 0 / 400% 200% no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 3px #ff2848); animation: crawl .5s steps(1) infinite, crawlin .25s ease-out; touch-action: manipulation; }
.crawler::before { content: ""; position: absolute; inset: -12px; }
@keyframes crawl { 0% { background-position: 0 0; } 50% { background-position: 33.333% 0; } }
@keyframes crawlin { from { transform: translateY(30px) scale(.4); opacity: 0; } }

/* only the one speaking is lit: everyone else steps back into the dark */
#story.vn .vch { transition: filter .22s ease-out, transform .22s ease-out, opacity .22s ease-out; filter: brightness(.34) saturate(.55) drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); -webkit-filter: brightness(.34) saturate(.55) drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); }
#story.vn .vch.on { filter: brightness(1.1) drop-shadow(0 0 16px rgba(255, 238, 200, .6)) drop-shadow(0 8px 18px rgba(0, 0, 0, .6)); -webkit-filter: brightness(1.1) drop-shadow(0 0 16px rgba(255, 238, 200, .6)) drop-shadow(0 8px 18px rgba(0, 0, 0, .6)); }

/* a boss speaks across the top of the field */
.bsay { position: absolute; left: 50%; top: 27%; z-index: 8; transform: translateX(-50%); max-width: 90%; text-align: center; pointer-events: none; font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: .1em; color: #fff; text-shadow: 0 0 12px rgba(255, 40, 70, .9), 0 2px 4px #000; animation: bsay 2.6s ease-out forwards; }
.bsay.die { font-size: 19px; text-shadow: 0 0 14px rgba(180, 220, 255, .95), 0 2px 4px #000; animation-duration: 3.6s; }
@keyframes bsay { 0% { opacity: 0; filter: blur(5px); } 12% { opacity: 1; filter: none; } 78% { opacity: 1; } 100% { opacity: 0; filter: blur(3px); } }

/* the named blow */
.bcut { position: absolute; inset: 0; z-index: 30; pointer-events: none; display: flex; align-items: center; background: rgba(8, 0, 4, .62); animation: fadein .12s both; }
.bcut .band { position: relative; width: 100%; height: 34%; overflow: hidden; border-block: 2px solid #c8203c; box-shadow: 0 0 34px rgba(200, 30, 60, .75); animation: bcutin .24s cubic-bezier(.2, .9, .3, 1) both; }
.bcut img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; filter: contrast(1.25) brightness(.72) saturate(.75); animation: bcutzoom 1.4s ease-out both; }
.bcut .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 16px 10px; text-align: center; background: linear-gradient(transparent, rgba(0, 0, 0, .88)); color: #fff; }
.bcut .cap small { display: block; font-size: 13px; font-weight: 700; color: #ffd3da; min-height: 1.3em; }
.bcut .cap b { display: block; font-family: var(--display); font-size: 33px; letter-spacing: .14em; text-shadow: 0 0 16px #ff1f48, 0 2px 3px #000; }
@keyframes bcutin { from { transform: scaleY(.04); } }
@keyframes bcutzoom { from { transform: scale(1.22); } to { transform: scale(1.03); } }

/* who it is aimed at */
.dng { position: absolute; z-index: 7; width: 92px; height: 92px; margin: -46px 0 0 -46px; pointer-events: none; }
.dng i { position: absolute; inset: 0; border: 3px solid #ff2848; border-radius: 50%; box-shadow: 0 0 18px #ff2848, inset 0 0 18px rgba(255, 40, 72, .6); animation: dng 2.2s linear both; }
.dng span { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); white-space: nowrap; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; background: #b3122e; animation: stcp .5s ease-in-out infinite; }
@keyframes dng { from { transform: scale(2.5); opacity: .15; } 92% { transform: scale(.72); opacity: 1; } to { transform: scale(.72); opacity: 1; } }

/* a comrade taken */
.grabbar { position: absolute; left: 50%; top: 31%; z-index: 8; width: min(84%, 340px); transform: translateX(-50%); padding: 8px 12px; text-align: center; pointer-events: none; color: #fff; background: rgba(24, 4, 10, .9); border: 1px solid #c8203c; border-radius: 10px; animation: fadein .2s both; }
.grabbar b { display: block; font-size: 14px; }
.grabbar small { font-size: 11px; font-weight: 700; color: #ffd3da; }
.grabbar .bar { height: 7px; margin: 5px 0 3px; }
.grabbar .bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff5a6e, #ffe08a); }

/* the false victory */
.fakewin { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(circle, rgba(70, 50, 10, .75), rgba(0, 0, 0, .9)); animation: fadein .4s both; }
.fakewin .t { font-family: var(--display); font-size: 56px; font-weight: 800; letter-spacing: .2em; }
.fakewin .sub { font-size: 13px; color: #fff; font-weight: 700; }
.fakewin.broke { background: rgba(4, 0, 2, .94); animation: fwshake .1s linear infinite; }
.fakewin.broke .t { color: #ff2848; -webkit-text-fill-color: #ff2848; background: none; font-size: 42px; }
.fakewin.broke .rays { display: none; }
@keyframes fwshake { 25% { transform: translate(2px, -1px); } 75% { transform: translate(-2px, 1px); } }

/* every fight happens in the dark; the less life, the less you can see */
#battle .vig { background: radial-gradient(ellipse at 50% 58%, transparent 34%, rgba(0, 0, 0, .78) 92%); }
#battle.full .vig { background: radial-gradient(ellipse at 50% 58%, transparent 45%, rgba(40, 0, 60, .42)); }
#battle .dread { --d: var(--dread, 0); position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: calc(.42 + var(--d) * .58); background: radial-gradient(ellipse at 40% 62%, transparent calc(62% - var(--d) * 34%), rgba(0, 0, 0, calc(.5 + var(--d) * .3)) calc(84% - var(--d) * 26%), rgba(10, 0, 2, .94) 112%), radial-gradient(ellipse at 40% 62%, transparent calc(48% - var(--d) * 22%), rgba(120, 8, 28, calc(var(--d) * .55)) 100%); }
#battle .dread.beat { animation: dbeat .5s ease-out; }
@keyframes dbeat { 0% { filter: brightness(1); } 16% { filter: brightness(1.6) saturate(1.5); transform: scale(.975); } 34% { filter: brightness(1.15); transform: scale(1); } 48% { filter: brightness(1.4) saturate(1.3); transform: scale(.985); } 100% { filter: brightness(1); transform: scale(1); } }

/* the cut you are not sure you saw */
#story.vn .vflash { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; object-fit: cover; pointer-events: none; filter: contrast(1.5) brightness(1.15) saturate(.3); animation: vflash .46s steps(1) both; }
@keyframes vflash { 0% { opacity: 1; } 14% { opacity: 0; } 28% { opacity: .92; transform: translate(4px, -2px); } 52% { opacity: 0; } 64% { opacity: .75; transform: translate(-3px, 1px); } 80%, 100% { opacity: 0; } }

/* 憩いの間 */
.lounge { margin-top: 8px; }
.garden { display: grid; gap: 10px; margin-top: 8px; }
.plot { position: relative; display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: linear-gradient(180deg, rgba(60, 46, 30, .55), rgba(28, 20, 14, .8)); border: 1px solid rgba(255, 220, 160, .18); }
.plot.locked { opacity: .55; text-align: center; }
.plot .seed { justify-content: space-between; border-left: 3px solid var(--c); }
.plot.grow, .plot.ready { grid-template-columns: 34px 1fr; align-items: center; }
.plot.grow .bar, .plot.ready .btn { grid-column: 1 / -1; }
.plot .sprout { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, var(--c), transparent 70%); animation: kpulse 2.4s ease-in-out infinite; grid-row: span 2; }
.plot.ready .sprout { box-shadow: 0 0 18px var(--c); }
.talkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.talker { display: grid; gap: 2px; padding: 6px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: inherit; font: inherit; }
.talker img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 12%; border-radius: 8px; }
.talker b { font-size: 12px; } .talker small { font-size: 10px; opacity: .75; }
.talker.done { opacity: .55; }
.talkscene { position: relative; }
.talkscene img { width: 100%; max-height: 52vh; object-fit: cover; object-position: 50% 10%; border-radius: 12px; }
.talkscene .say { position: relative; margin-top: -40px; padding: 12px 14px; border-radius: 12px; background: rgba(245, 243, 255, .95); color: #1b1840; }
.talkscene .say p { margin: 4px 0; font-size: 14px; font-weight: 700; line-height: 1.7; }
.talkscene .say small { font-size: 11px; opacity: .7; }

/* the air of a story scene */
#story.vn .vfx { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
#story.vn .vfx i { position: absolute; inset: 0; }
#story.vn[data-fx^="story_"] .vfx { opacity: 1; }
/* wrong: scanlines, crawling noise, a red edge */
#story.vn[data-fx="story_tense"] .vfx i.a { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>"); mix-blend-mode: overlay; opacity: .55; animation: vnoise .18s steps(3) infinite; }
#story.vn[data-fx="story_tense"] .vfx i.b { background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(120, 0, 20, .45) 100%); animation: kpulse 1.6s ease-in-out infinite; }
@keyframes vnoise { 0% { background-position: 0 0, 0 0; } 33% { background-position: 0 1px, -40px 20px; } 66% { background-position: 0 2px, 30px -30px; } 100% { background-position: 0 0, 10px 40px; } }
#story.vn.tear .vbg, #story.vn.tear .vch { animation: vtear .42s steps(2) 1; }
@keyframes vtear { 0% { transform: translateX(0); filter: none; } 20% { transform: translateX(-7px); filter: drop-shadow(4px 0 0 rgba(255, 0, 60, .7)) drop-shadow(-4px 0 0 rgba(0, 220, 255, .6)); clip-path: inset(18% 0 52% 0); } 40% { transform: translateX(6px); clip-path: inset(55% 0 12% 0); } 60% { transform: translateX(-3px); clip-path: none; } 100% { transform: none; filter: none; clip-path: none; } }
/* sad: the colour drains and ash keeps falling */
#story.vn[data-fx="story_sad"] .vfx i.a { background: linear-gradient(180deg, rgba(20, 30, 60, .38), rgba(10, 14, 30, .5)); mix-blend-mode: multiply; }
#story.vn[data-fx="story_sad"] .vfx i.b { background-image: radial-gradient(circle, rgba(230, 230, 240, .7) 0 1.4px, transparent 2px), radial-gradient(circle, rgba(200, 200, 215, .5) 0 1px, transparent 1.6px); background-size: 90px 110px, 60px 70px; animation: vash 9s linear infinite; }
@keyframes vash { to { background-position: 30px 440px, -20px 280px; } }
/* hope: light breaks in from above and motes rise */
#story.vn[data-fx="story_hope"] .vfx i.a { background: conic-gradient(from 160deg at 50% -10%, transparent 0 8deg, rgba(255, 236, 180, .22) 10deg 14deg, transparent 16deg 24deg, rgba(255, 236, 180, .16) 26deg 31deg, transparent 33deg 360deg); mix-blend-mode: screen; animation: vrays 8s ease-in-out infinite alternate; }
#story.vn[data-fx="story_hope"] .vfx i.b, #story.vn[data-fx="story_warm"] .vfx i.b { background-image: radial-gradient(circle, rgba(255, 230, 160, .85) 0 1.6px, transparent 2.4px), radial-gradient(circle, rgba(255, 255, 255, .6) 0 1px, transparent 1.8px); background-size: 120px 130px, 80px 90px; animation: vmote 12s linear infinite; mix-blend-mode: screen; }
@keyframes vrays { from { transform: rotate(-4deg); opacity: .7; } to { transform: rotate(4deg); opacity: 1; } }
@keyframes vmote { to { background-position: -40px -520px, 30px -360px; } }
/* warm: a soft glow at the edges */
#story.vn[data-fx="story_warm"] .vfx i.a { background: radial-gradient(ellipse at 50% 60%, transparent 40%, rgba(255, 170, 90, .22) 100%); mix-blend-mode: screen; }

/* each companion's skill, fired by hand */
.skillrow { display: flex; gap: 6px; margin-top: 6px; }
.skillrow .sk { position: relative; flex: 1; min-width: 0; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 6px; padding: 4px 6px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(10, 10, 24, .72); color: #fff; font: inherit; touch-action: manipulation; }
.skillrow .sk img { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; }
.skillrow .sk .g { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.skillrow .sk .g i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7a6cff, #ffe08a); }
.skillrow .sk b { font-size: 9.5px; font-weight: 700; opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.skillrow .sk em { position: absolute; top: -6px; right: 4px; font-style: normal; font-size: 9px; font-weight: 800; padding: 0 4px; border-radius: 6px; background: #b3122e; }
.skillrow .sk.back em { background: #2b5fb3; }
.skillrow .sk.ready { border-color: #ffe08a; box-shadow: 0 0 12px rgba(255, 224, 138, .8); animation: skready 1s ease-in-out infinite; }
.skillrow .sk.down { opacity: .35; }
@keyframes skready { 50% { box-shadow: 0 0 20px rgba(255, 224, 138, 1); } }

/* the arrangement before a run */
.formrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0; }
.fm { display: grid; gap: 2px; padding: 6px; border-radius: 12px; border: 2px solid #b3122e; background: rgba(179, 18, 46, .14); color: inherit; font: inherit; }
.fm.back { border-color: #2b5fb3; background: rgba(43, 95, 179, .16); }
.fm img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 12%; border-radius: 8px; }
.fm b { font-size: 12px; } .fm small { font-size: 10px; opacity: .8; }
.fh { margin: 10px 0 4px; font-weight: 800; font-size: 13px; } .fh small { font-weight: 600; opacity: .7; font-size: 10px; }
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.chips.five { grid-template-columns: repeat(5, 1fr); }
.chip { display: grid; gap: 2px; padding: 6px 4px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: inherit; font: inherit; text-align: center; }
.chip b { font-size: 13px; } .chip small { font-size: 9px; opacity: .8; line-height: 1.3; }
.chip.on { border-color: #ffe08a; background: rgba(255, 224, 138, .16); box-shadow: 0 0 10px rgba(255, 224, 138, .4); }
.note.gold { color: var(--gold); }

/* a picture, as large as the screen allows */
#zoomart { position: absolute; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(4, 4, 12, .94); animation: fadein .2s both; }
#zoomart img { max-width: 100%; max-height: calc(100% - 30px); object-fit: contain; }
#zoomart small { font-size: 11px; opacity: .7; }
.fm .rowbtn { padding: 3px 0; border-radius: 8px; border: 0; background: rgba(255, 255, 255, .1); color: inherit; font: inherit; font-size: 10px; font-weight: 700; }

/* 仲間の部屋 */
.room { display: grid; gap: 8px; }
.roomart { position: relative; }
.roomart img { width: 100%; max-height: 44vh; object-fit: cover; object-position: 50% 8%; border-radius: 14px; }
.roomart.bump img { animation: rbump .35s ease-out; }
@keyframes rbump { 30% { transform: scale(1.03) translateY(-4px); } }
.roomart .emote { position: absolute; right: 14px; top: 10px; font-style: normal; font-size: 30px; font-weight: 900; color: #ff7aa8; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); opacity: 0; }
.roomart .emote.pop { animation: emote 1.1s ease-out; }
@keyframes emote { 0% { opacity: 0; transform: scale(.4) translateY(10px); } 25% { opacity: 1; transform: scale(1.15); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }
.room .say { padding: 10px 14px; border-radius: 12px; background: rgba(245, 243, 255, .95); color: #1b1840; }
.room .say p { margin: 4px 0; font-size: 14px; font-weight: 700; line-height: 1.7; min-height: 3.4em; }
.room .say small { font-size: 10.5px; opacity: .7; }
.zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.zn { padding: 8px 4px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: inherit; font: inherit; font-size: 11.5px; font-weight: 700; }
.zn.ans { grid-column: 1 / -1; font-size: 13px; padding: 10px; }

/* phones: no double-tap wait, no lost taps on the melody cards */
#screen, #screen button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.choices, .ccards, .cc { pointer-events: auto; }
.cc * { pointer-events: none; }

/* iPhone: the moving background was taking the taps meant for the melody cards.
   Nothing decorative may receive a touch; the cards sit on their own top layer. */
#battle .bg, #battle .vig, #battle .aurora, #battle .kaura, #battle .kveil, #battle .dread, #battle .roar, #battle .rainbow { pointer-events: none !important; }
#battle img, #story img, #screen img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.choices { z-index: 60; transform: translateZ(0); -webkit-transform: translateZ(0); }

/* an app, not a web page: no pull-to-refresh, no selecting text, no image menus */
html, body { overscroll-behavior: none; }
#app, #screen { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#screen input, #screen textarea { -webkit-user-select: text; user-select: text; }
.bday { display: grid; gap: 2px; width: 100%; margin-bottom: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(255, 210, 140, .5); background: linear-gradient(90deg, rgba(120, 60, 20, .55), rgba(60, 30, 80, .55)); color: #ffe3b0; font: inherit; text-align: left; box-shadow: 0 0 18px rgba(255, 190, 110, .25); }
.bday b { font-size: 14px; } .bday small { font-size: 11px; opacity: .8; }
.pairtalk { margin: 8px 0; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); font-size: 12px; line-height: 1.7; }
.pairtalk p { margin: 2px 0; } .pairtalk b { color: var(--gold); margin-right: 4px; }

/* ===== 旋律盤 (v57) ===== */
#battle.withboard .taphint { bottom: calc(176px + env(safe-area-inset-bottom, 0px)); }
.board { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; display: grid; gap: 6px; padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); background: linear-gradient(180deg, rgba(5, 6, 12, 0), rgba(5, 6, 12, .86) 16%, rgba(5, 6, 12, .96)); transition: opacity .35s, filter .35s; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.board.off { opacity: 0; pointer-events: none; }
.board.held { filter: grayscale(.85) brightness(.7); }
.board .bhead { min-height: 30px; }
.board .hpbox { position: static; width: auto; left: auto; right: auto; bottom: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 8px; }
.board .hpbox .row { grid-column: 1; grid-row: 1; display: flex; gap: 6px; align-items: baseline; }
.board .hpbox .row .sp { display: none; }
.board .hpbox .hpbar { grid-column: 2; grid-row: 1; }
.board .hpbox .sub { grid-column: 3; grid-row: 1; font-size: 10px; opacity: .8; }
.board .hpbox .stbar { grid-column: 1 / -1; grid-row: 2; }
.board .hpbox .stbar:empty { display: none; }
.bslots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; position: relative; }
.bslots::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(242, 195, 91, .35), transparent); pointer-events: none; }
.slot { position: relative; height: 54px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: radial-gradient(ellipse at 50% 120%, rgba(255, 255, 255, .07), rgba(12, 13, 28, .9) 70%); color: #fff; font: inherit; display: grid; place-items: center; overflow: visible; transition: border-color .2s, box-shadow .2s, transform .12s; touch-action: manipulation; padding: 0; }
.slot.rest { color: rgba(255, 255, 255, .28); border-style: dashed; }
.slot .g { font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1; text-shadow: 0 0 10px currentColor; }
.slot .g.r { font-size: 15px; text-shadow: none; }
.slot .bt { position: absolute; left: 5px; top: 3px; font-style: normal; font-size: 9px; opacity: .45; color: #fff; }
.slot .x { position: absolute; right: -4px; top: -8px; font-size: 10px; font-weight: 900; padding: 1px 5px; border-radius: 8px; background: #2a1b05; color: #ffe08a; border: 1px solid #ffe08a; text-shadow: none; }
.board .life { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; }
.board .life i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 4px currentColor; }
.slot.now { border-color: currentColor; box-shadow: 0 0 14px -2px currentColor, inset 0 0 16px -6px currentColor; }
.slot.rest.now { border-color: rgba(255, 255, 255, .55); box-shadow: 0 0 10px rgba(255, 255, 255, .25); }
.slot.ping { animation: sping .32s ease-out; }
@keyframes sping { 0% { transform: scale(1.1); filter: brightness(1.9); } 100% { transform: scale(1); filter: none; } }
.slot.bad { animation: sbad .4s; }
@keyframes sbad { 25%, 75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
.slot.sel { border: 2px dashed #ffe08a; }
.slot.drop .g { animation: sdrop .28s var(--ease); }
@keyframes sdrop { 0% { transform: translateY(18px) scale(.6); opacity: 0; } }
.slot.crumble .g { animation: scrumble .3s forwards; }
@keyframes scrumble { to { transform: translateY(8px) scale(.6); opacity: 0; filter: blur(3px); } }
.slot.rust { background: repeating-linear-gradient(135deg, rgba(120, 70, 30, .55) 0 5px, rgba(60, 30, 10, .55) 5px 10px); border-color: #8a5a2a; }
.slot.rust::after { content: "錆"; position: absolute; right: 5px; bottom: 3px; font-size: 10px; color: #d9a46a; }
.slot.mark { border-color: #ff3d5a; box-shadow: 0 0 16px rgba(255, 61, 90, .7); animation: smark .7s ease-in-out infinite; }
.slot.mark u { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); text-decoration: none; font-family: var(--display); font-weight: 900; font-size: 13px; color: #fff; background: #b3122e; padding: 0 6px; border-radius: 6px; box-shadow: 0 0 10px #ff3d5a; }
@keyframes smark { 50% { box-shadow: 0 0 26px rgba(255, 61, 90, 1); } }
.board.harm .bslots .slot:not(.rest) { box-shadow: 0 0 10px -3px currentColor; }
.board.harm .bslots::before { background: linear-gradient(90deg, var(--p-beat), var(--p-str), var(--p-brass), var(--p-key), var(--p-voice)); height: 2px; opacity: .8; }
.bpat { position: absolute; left: 0; right: 0; top: -20px; text-align: center; font-family: var(--display); font-weight: 900; font-size: 15px; letter-spacing: .2em; color: #fff; opacity: 0; pointer-events: none; text-shadow: 0 0 10px #000, 0 1px 3px #000; transition: opacity .25s; }
.bpat.show { opacity: 1; animation: bpat .5s var(--ease); }
.bpat.good { color: #ffe08a; text-shadow: 0 0 12px rgba(255, 200, 80, .9), 0 1px 3px #000; }
.bpat.bad { color: #ff7a8e; letter-spacing: .06em; font-size: 13px; }
@keyframes bpat { 0% { transform: scale(1.4); } }
.bhand { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.bhand .hgap { height: 48px; border-radius: 9px; border: 1px dashed rgba(255, 255, 255, .08); }
.tile { position: relative; height: 48px; border-radius: 9px; border: 1px solid currentColor; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(10, 10, 24, .92) 60%); font: inherit; display: grid; place-items: center; align-content: center; gap: 1px; padding: 0 0 4px; box-shadow: inset 0 0 12px -6px currentColor; touch-action: manipulation; transition: transform .12s; }
.tile .g { font-family: var(--display); font-size: 19px; font-weight: 800; line-height: 1; text-shadow: 0 0 8px currentColor; }
.tile small { font-size: 9px; font-weight: 700; color: #fff; opacity: .78; white-space: nowrap; }
.tile .life { bottom: 2px; }
.tile.pick { transform: translateY(-6px); box-shadow: 0 0 14px currentColor; border-width: 2px; }
.tile.deaf .g { filter: blur(1.5px); }
.tile:active { transform: scale(.94); }
.foe.wind::before { content: "!"; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-weight: 900; font-size: 18px; color: #ff5d7a; text-shadow: 0 0 8px #ff5d7a, 0 1px 2px #000; animation: blink .3s infinite; }
.bhelp { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(3, 4, 10, .72); }
.bhelp .in { max-width: 360px; padding: 18px 18px 14px; border-radius: 16px; border: 1px solid rgba(242, 195, 91, .55); background: linear-gradient(180deg, rgba(22, 24, 52, .97), rgba(9, 10, 22, .98)); display: grid; gap: 8px; font-size: 13px; line-height: 1.7; }
.bhelp b { font-family: var(--display); font-size: 18px; letter-spacing: .2em; color: #ffe08a; text-align: center; }
.bhelp p { margin: 0; }
.bhelp p span { font-family: var(--display); font-weight: 800; }
.bhelp em { font-style: normal; color: #ffe08a; font-weight: 800; }
.bhelp .sub { color: #ff9aa9; font-size: 12px; }
.bhelp small { text-align: center; color: var(--teal); animation: blink 1.4s infinite; }

/* ===== 今日の残響・沈黙の塔 (v58) ===== */
.chal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.chc { position: relative; display: grid; gap: 3px; align-content: start; text-align: left; padding: 11px 12px 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); color: #fff; font: inherit; min-height: 118px; overflow: hidden; touch-action: manipulation; }
.chc.daily { background: radial-gradient(ellipse at 100% 0%, rgba(79, 227, 208, .28), transparent 60%), linear-gradient(160deg, rgba(14, 30, 44, .95), rgba(8, 10, 22, .95)); border-color: rgba(79, 227, 208, .45); }
.chc.tower { background: radial-gradient(ellipse at 100% 0%, rgba(181, 123, 255, .3), transparent 60%), linear-gradient(160deg, rgba(30, 16, 46, .95), rgba(8, 8, 22, .95)); border-color: rgba(181, 123, 255, .5); }
.chc small { font-size: 10.5px; letter-spacing: .12em; opacity: .75; }
.chc b { font-family: var(--display); font-size: 16px; letter-spacing: .06em; line-height: 1.3; }
.chc span { font-size: 11px; line-height: 1.5; opacity: .85; }
.chc span .num { font-style: normal; font-size: 18px; font-weight: 800; color: #ffe08a; }
.chc em { font-style: normal; font-size: 10px; color: var(--gold); margin-top: auto; }
.chc.done::after { content: "達成"; position: absolute; right: -22px; top: 10px; transform: rotate(35deg); padding: 2px 26px; font-size: 10px; font-weight: 800; background: #2a8f7f; }
.chc[disabled] { opacity: .45; filter: grayscale(.6); }
.rule { display: grid; gap: 2px; padding: 9px 12px; margin: 6px 0; border-radius: 10px; border-left: 3px solid var(--gold); background: rgba(255, 255, 255, .05); }
.rule b { font-family: var(--display); color: #ffe08a; letter-spacing: .08em; }
.rule span { font-size: 12px; opacity: .9; }
.miles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 8px 0; }
.miles div { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .05); font-size: 11px; }
.miles div b { color: #c9b4ff; }
.miles div i { font-style: normal; font-size: 9px; color: var(--teal); }
.miles div.got { opacity: .55; }
.rank { display: grid; gap: 3px; max-height: 46vh; overflow: auto; margin: 6px 0; }
.rank div { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .04); font-size: 13px; }
.rank div b { font-family: var(--latin); color: #ffe08a; text-align: center; }
.rank div i { font-style: normal; font-weight: 800; }
.rank div.me { background: rgba(242, 195, 91, .16); border: 1px solid rgba(242, 195, 91, .5); }
.namebox { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 8px; }
.namebox input { min-width: 0; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); color: #fff; font: inherit; font-size: 16px; -webkit-user-select: text; user-select: text; }
#wv.late { color: #ff7a8e; border-color: #ff7a8e; animation: blink .8s infinite; }

/* ===== 共鳴 3D 演出 (v59) ===== */
.g3 { position: absolute; inset: 0; z-index: 44; overflow: hidden; background: #04030a; }
.g3 canvas { display: block; width: 100% !important; height: 100% !important; }
#reveal.g3on { background: transparent; }
#reveal.g3on .orbwrap, #reveal.g3on > .rays { display: none; }
#reveal.g3on .rhint { position: absolute; bottom: calc(18% + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; text-align: center; font-size: 15px; font-weight: 800; letter-spacing: .3em; color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, .9), 0 0 30px var(--gold); animation: blink 1.1s infinite; }
.g3conf { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: grid; place-items: center; animation: g3shake .5s .1s; }
.g3conf .crack { position: absolute; inset: 0; width: 100%; height: 100%; }
.g3conf .crack path { fill: none; stroke: #fff; stroke-width: .7; stroke-linejoin: bevel; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #ffd36b); stroke-dasharray: 220; stroke-dashoffset: 220; animation: g3crack .45s ease-out forwards; vector-effect: non-scaling-stroke; }
.g3conf .cf { position: relative; display: grid; justify-items: center; gap: 2px; animation: g3slam .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.g3conf .cf small { font-family: var(--latin); font-size: 13px; letter-spacing: .5em; color: #fff; text-shadow: 0 0 10px #fff; }
.g3conf .cf b { font-family: var(--latin); font-size: 112px; line-height: .9; font-weight: 900; letter-spacing: .02em; background: linear-gradient(100deg, #ff6fd8, #ffd36b, #7fffd0, #7fd8ff, #c79bff, #ff6fd8); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .9)) drop-shadow(0 0 30px rgba(255, 200, 100, .9)); animation: g3rain 1.2s linear infinite; }
.g3conf .cf span { font-family: var(--display); font-size: 46px; font-weight: 900; letter-spacing: .3em; padding-left: .3em; color: #fff7d8; -webkit-text-stroke: 2px #b8730e; text-shadow: 0 0 14px #ffd36b, 0 0 40px #ff9b4a, 0 4px 0 #6a3d06; }
.g3conf.out { transition: opacity .6s, transform .6s; opacity: 0; transform: scale(1.3); }
@keyframes g3crack { to { stroke-dashoffset: 0; } }
@keyframes g3slam { 0% { transform: scale(3.2); opacity: 0; filter: blur(14px); } 60% { opacity: 1; filter: blur(0); } 100% { transform: scale(1); } }
@keyframes g3shake { 10%, 50%, 90% { transform: translate(-6px, 3px); } 30%, 70% { transform: translate(6px, -4px); } }
@keyframes g3rain { to { background-position: 300% 0; } }

/* ===== 初回限定パック (v60) ===== */
.starter { position: relative; display: block; width: 100%; min-height: 214px; margin: 10px 0; padding: 0; border: 0; border-radius: 18px; overflow: hidden; color: #fff; font: inherit; text-align: left; isolation: isolate; cursor: pointer; touch-action: manipulation; box-shadow: 0 0 0 2px #ffd36b, 0 0 24px rgba(255, 190, 80, .7), 0 0 60px rgba(255, 90, 160, .45); animation: stGlow 2.2s ease-in-out infinite; }
.starter.big { min-height: 300px; margin: 0; }
.starter::before { content: ""; position: absolute; inset: -2px; z-index: -3; border-radius: inherit; background: conic-gradient(from var(--a, 0deg), #ff6fd8, #ffd36b, #7fffd0, #7fd8ff, #c79bff, #ff6fd8); animation: stSpinA 3s linear infinite; }
.st-bg { position: absolute; inset: 2px; z-index: -2; border-radius: 16px; background: radial-gradient(ellipse at 78% 30%, rgba(255, 120, 190, .55), transparent 55%), radial-gradient(ellipse at 20% 100%, rgba(255, 190, 70, .45), transparent 60%), linear-gradient(150deg, #2a0a3a, #120624 55%, #05030c); }
.st-rays { position: absolute; left: 72%; top: 40%; width: 260%; aspect-ratio: 1; z-index: -1; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255, 220, 140, .22) 0 5deg, transparent 5deg 15deg); animation: stSpin 14s linear infinite; mix-blend-mode: screen; }
.st-sparks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.st-sparks i, .pt-sparks i { position: absolute; width: calc(10px * var(--s, 1)); height: calc(10px * var(--s, 1)); background: radial-gradient(circle, #fff 0 20%, rgba(255, 230, 150, .9) 30%, transparent 70%); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: stTwinkle 2.4s ease-in-out infinite; }
.st-char { position: absolute; right: -6%; top: -4%; height: 150%; width: auto; max-width: none; z-index: 0; object-fit: cover; object-position: 50% 0; filter: drop-shadow(0 0 14px rgba(255, 150, 210, .8)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); animation: stFloat 4s ease-in-out infinite; }
.starter.big .st-char { height: 165%; right: -10%; }
.st-ribbon { position: absolute; left: 0; top: 12px; z-index: 3; padding: 4px 14px 4px 12px; font-size: 11.5px; font-weight: 900; letter-spacing: .08em; color: #fff; background: linear-gradient(90deg, #e0103a, #ff4f7a); clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%); box-shadow: 0 0 12px #ff3d5a; animation: blink 1s steps(2) infinite; }
.st-body { position: absolute; left: 14px; top: 44px; z-index: 3; display: grid; gap: 1px; max-width: 64%; text-shadow: 0 2px 6px rgba(0, 0, 0, .9); }
.st-l0 { font-family: var(--display); font-size: 12px; letter-spacing: .2em; color: #ffe3b0; }
.st-l1 { display: flex; align-items: baseline; gap: 5px; font-family: var(--display); }
.st-l1 em { font-family: var(--latin); font-style: normal; font-weight: 900; font-size: 26px; background: linear-gradient(100deg, #ff6fd8, #ffd36b, #7fffd0, #7fd8ff, #ff6fd8); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: g3rain 1.6s linear infinite; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .6)); }
.st-l1 b { font-size: 30px; font-weight: 900; color: #fff; }
.st-l1 span { font-size: 20px; font-weight: 900; color: #ffd36b; -webkit-text-stroke: 1px #7a4200; }
.st-plus { font-size: 20px; font-weight: 900; color: #fff; line-height: 1; }
.st-l2 { font-family: var(--display); font-size: 22px; font-weight: 900; }
.st-l2 b { font-size: 34px; color: #ffe08a; -webkit-text-stroke: 1px #7a4200; }
.st-l2 em { font-style: normal; margin-left: 2px; padding: 0 6px; border-radius: 6px; background: #e0103a; color: #fff; box-shadow: 0 0 10px #ff3d5a; }
.st-sub { font-size: 10.5px; color: #ffe3f3; opacity: .9; }
.st-burst { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: grid; place-items: center; align-content: center; width: 108px; height: 108px; color: #fff; background: radial-gradient(circle, #ff4f7a, #c3002c 70%); clip-path: polygon(50% 0, 61% 14%, 79% 7%, 82% 25%, 100% 30%, 92% 47%, 100% 64%, 83% 70%, 80% 89%, 62% 84%, 50% 100%, 38% 84%, 20% 89%, 17% 70%, 0 64%, 8% 47%, 0 30%, 18% 25%, 21% 7%, 39% 14%); filter: drop-shadow(0 0 10px #ff3d5a); animation: stPulse 1s ease-in-out infinite; }
.st-burst s { font-size: 9px; opacity: .85; line-height: 1.2; }
.st-burst small { font-size: 10px; font-weight: 800; line-height: 1.2; }
.st-burst b { font-family: var(--latin); font-size: 30px; font-weight: 900; line-height: 1; text-shadow: 0 2px 0 #7a0018; }
.st-off { position: absolute; left: 110px; bottom: 74px; z-index: 5; display: grid; place-items: center; align-content: center; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle, #fff3b0, #ffb300); color: #7a2a00; transform: rotate(-14deg); box-shadow: 0 0 12px #ffd36b; animation: stWobble 1.4s ease-in-out infinite; }
.st-off b { font-family: var(--latin); font-size: 21px; font-weight: 900; line-height: .9; }
.st-off small { font-size: 9px; font-weight: 900; line-height: 1; }
.st-cta { position: absolute; right: 12px; bottom: 12px; z-index: 5; padding: 10px 16px; border-radius: 99px; font-weight: 900; font-size: 14px; letter-spacing: .06em; color: #4a2300; background: linear-gradient(180deg, #fff6c8, #ffc94a 55%, #f09a1a); box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(255, 210, 90, .95); animation: stPulse 1s ease-in-out infinite; }
.st-shine { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 48%, transparent 60%); transform: translateX(-120%); animation: stShine 2.6s ease-in-out infinite; }
.stm { display: grid; gap: 10px; }
.stm-who { display: grid; gap: 4px; font-size: 12px; line-height: 1.6; }
.stm-who b.r-ssr { color: var(--r-ssr); font-family: var(--display); letter-spacing: .06em; }
.stm-who small { color: #ffe08a; }
.st-pay { font-size: 15px; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes stSpinA { to { --a: 360deg; } }
@keyframes stSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes stGlow { 50% { box-shadow: 0 0 0 2px #fff3c4, 0 0 34px rgba(255, 200, 90, .95), 0 0 80px rgba(255, 90, 160, .7); } }
@keyframes stTwinkle { 0%, 100% { transform: scale(.2) rotate(0deg); opacity: 0; } 50% { transform: scale(1.3) rotate(45deg); opacity: 1; } }
@keyframes stFloat { 50% { transform: translateY(-6px); } }
@keyframes stPulse { 50% { transform: scale(1.07); } }
@keyframes stWobble { 50% { transform: rotate(8deg) scale(1.1); } }
@keyframes stShine { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }

/* ===== ホームの看板キャラ ===== */
.partner { position: relative; display: grid; grid-template-columns: 44% 1fr; gap: 10px; margin-bottom: 10px; padding: 10px; border-radius: 18px; overflow: hidden; isolation: isolate; border: 1px solid rgba(255, 255, 255, .16); background: radial-gradient(ellipse at 20% 30%, rgba(181, 123, 255, .35), transparent 60%), linear-gradient(160deg, rgba(26, 18, 52, .96), rgba(8, 8, 20, .96)); box-shadow: 0 0 24px rgba(160, 110, 255, .25); }
.partner.r-ssr { border-color: rgba(255, 211, 107, .6); box-shadow: 0 0 26px rgba(255, 200, 100, .35); background: radial-gradient(ellipse at 20% 30%, rgba(255, 190, 90, .32), transparent 60%), linear-gradient(160deg, rgba(40, 22, 40, .96), rgba(10, 8, 20, .96)); }
.partner.r-ur { border-color: rgba(255, 111, 216, .7); box-shadow: 0 0 30px rgba(255, 111, 216, .45); }
.pt-sparks { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pt-art { position: relative; z-index: 1; height: 236px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .14), transparent 70%); touch-action: manipulation; }
.pt-art img { position: absolute; left: 50%; top: -2%; height: 132%; width: auto; max-width: none; transform: translateX(-50%); object-fit: cover; filter: drop-shadow(0 0 12px rgba(255, 255, 255, .25)); }
.pt-tap { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #fff; text-shadow: 0 0 6px #000, 0 0 10px #c79bff; animation: blink 1.6s infinite; }
.pt-info { position: relative; z-index: 1; display: grid; align-content: start; gap: 4px; min-width: 0; }
.pt-top { display: flex; align-items: center; gap: 6px; }
.pt-rar { font-family: var(--latin); font-weight: 900; font-size: 14px; padding: 0 6px; border-radius: 5px; color: #fff; background: linear-gradient(90deg, #8a4fe0, #c79bff); }
.r-ssr .pt-rar { background: linear-gradient(90deg, #ff9b4a, #ffd36b); color: #4a2300; }
.r-ur .pt-rar { background: linear-gradient(90deg, #ff6fd8, #7fd8ff); }
.pt-stars { color: #ffd36b; font-size: 11px; letter-spacing: 1px; text-shadow: 0 0 6px #ffb300; }
.pt-title { font-size: 10.5px; color: #c9c3e8; }
.pt-name { font-family: var(--display); font-size: 24px; font-weight: 900; letter-spacing: .08em; line-height: 1.1; text-shadow: 0 0 12px rgba(255, 255, 255, .4); }
.pt-stats { display: flex; flex-wrap: wrap; gap: 3px 8px; font-size: 10px; color: #b9b3d8; }
.pt-stats b { margin-left: 2px; font-size: 12px; color: #fff; }
.pt-skill { display: grid; gap: 1px; padding: 6px 8px; border-radius: 9px; background: rgba(255, 255, 255, .06); border-left: 3px solid #ffd36b; }
.pt-skill small { font-size: 9px; color: #ffd36b; letter-spacing: .1em; }
.pt-skill b { font-size: 12.5px; }
.pt-skill span { font-size: 10px; color: #d8d3f0; }
.pt-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.pt-tags i { font-style: normal; font-size: 9.5px; padding: 1px 6px; border-radius: 99px; border: 1px solid rgba(199, 155, 255, .5); color: #e6d8ff; }
.pt-say { font-size: 11px; line-height: 1.5; padding: 5px 8px; border-radius: 10px; background: rgba(255, 255, 255, .92); color: #2a2050; }
.pt-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.pt-btns .btn { padding: 7px 4px; font-size: 12px; }

/* ===== ショップ ===== */
.pad.shop .item { box-shadow: 0 0 0 1px rgba(255, 211, 107, .25), 0 6px 16px rgba(0, 0, 0, .4); background: linear-gradient(150deg, rgba(44, 24, 70, .95), rgba(14, 10, 28, .95)); }
.pad.shop .item.hot { box-shadow: 0 0 0 1px #ffd36b, 0 0 18px rgba(255, 190, 80, .5); animation: stGlow 2.6s ease-in-out infinite; }
.pad.shop .item .btn.gold, .pad.shop .item .btn.red, .pad.shop .gemc .btn { animation: stPulse 1.2s ease-in-out infinite; }
.pad.shop .gemc { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, rgba(127, 216, 255, .3), transparent 60%), linear-gradient(170deg, rgba(30, 30, 70, .95), rgba(10, 10, 26, .95)); box-shadow: 0 0 0 1px rgba(127, 216, 255, .35); }
.pad.shop .gemc.rec { box-shadow: 0 0 0 2px #ffd36b, 0 0 20px rgba(255, 200, 90, .6); }
.pad.shop .gemc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 48%, transparent 60%); transform: translateX(-120%); animation: stShine 3.2s ease-in-out infinite; pointer-events: none; }
.pad.shop .gemc .gico { filter: drop-shadow(0 0 8px #7fd8ff); animation: stFloat 2.4s ease-in-out infinite; }
.pad.shop .gemc .q { font-size: 20px; text-shadow: 0 0 10px rgba(127, 216, 255, .9); }
.pad.shop .gemc .bonus { color: #ffd36b; font-weight: 800; }
.gemhero { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 10px; padding: 14px; border: 0; border-radius: 16px; overflow: hidden; color: #fff; font: inherit; text-align: left; background: radial-gradient(ellipse at 85% 50%, rgba(127, 216, 255, .5), transparent 60%), linear-gradient(140deg, #0c2a4a, #0a0a24); box-shadow: 0 0 0 2px #7fd8ff, 0 0 26px rgba(127, 216, 255, .6); animation: ghGlow 2s ease-in-out infinite; }
.gemhero .gh-l { display: grid; gap: 2px; flex: 1; min-width: 0; z-index: 1; }
.gemhero small { font-size: 11px; color: #ffd36b; font-weight: 800; letter-spacing: .1em; }
.gemhero b { font-family: var(--display); font-size: 20px; }
.gemhero b em { font-family: var(--latin); font-style: normal; font-size: 32px; color: #bff0ff; text-shadow: 0 0 14px #7fd8ff; }
.gemhero .gh-l > span { font-size: 11px; opacity: .85; }
.gemhero .gh-r { display: grid; justify-items: center; gap: 6px; z-index: 1; }
.gemhero .gh-x2 { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-family: var(--display); font-size: 22px; font-weight: 900; color: #fff; background: radial-gradient(circle, #ff4f7a, #c3002c 70%); box-shadow: 0 0 14px #ff3d5a; animation: stWobble 1.2s ease-in-out infinite; }
@keyframes ghGlow { 50% { box-shadow: 0 0 0 2px #dff6ff, 0 0 40px rgba(127, 216, 255, .9); } }
/* starter layout: words on the left, price over the art on the right, the button across the bottom */
.starter { min-height: 262px; }
.starter.big { min-height: 330px; }
.st-body { top: 42px; max-width: 60%; }
.st-burst { left: auto; right: 10px; bottom: 62px; width: 104px; height: 104px; }
.st-off { left: auto; right: 100px; bottom: 136px; }
.st-cta { left: 12px; right: 12px; bottom: 10px; text-align: center; font-size: 15px; padding: 11px 10px; }
.st-l2 { font-size: 17px; white-space: nowrap; }
.st-l2 b { font-size: 30px; }
.st-l2 em { white-space: nowrap; }
.st-l1 { white-space: nowrap; }
.st-off { right: 12px; bottom: auto; top: 46px; }
.starter.big .st-off { top: 52px; }

/* ===== ふれあい (v63) ===== */
#fureai { position: absolute; inset: 0; z-index: 70; overflow: hidden; background: #07050f; opacity: 0; transition: opacity .25s; touch-action: none; -webkit-user-select: none; user-select: none; }
#fureai.in { opacity: 1; }
.fu-bg { position: absolute; inset: 0; }
.fu-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(6px) brightness(.35) saturate(.7); transform: scale(1.1); }
.fu-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, rgba(255, 170, 220, .28), transparent 62%); animation: fuGlow 4s ease-in-out infinite; pointer-events: none; }
#fureai.r-ssr .fu-glow { background: radial-gradient(ellipse at 50% 38%, rgba(255, 210, 120, .3), transparent 62%); }
#fureai.max .fu-glow { background: radial-gradient(ellipse at 50% 40%, rgba(255, 120, 190, .55), transparent 70%); }
.fu-head { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; background: linear-gradient(180deg, rgba(5, 4, 12, .85), transparent); }
.fu-head b { font-family: var(--display); font-size: 20px; letter-spacing: .1em; }
.fu-head small { font-size: 10.5px; color: #cfc8ec; }
.fu-bond { font-size: 12px; color: #ffb3d9; }
.fu-bond i { font-style: normal; font-weight: 900; font-size: 16px; }
.fu-doki { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; color: #ffb3d9; }
.fu-doki .bar { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.fu-doki .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ff8ac4, #ff3d8a); box-shadow: 0 0 10px #ff6fae; transition: width .3s; }
.fu-stage { position: absolute; left: 0; right: 0; top: 64px; bottom: 150px; display: grid; place-items: end center; z-index: 1; }
.fu-char { position: relative; height: 100%; aspect-ratio: 2 / 3; max-width: 100%; transform-origin: 50% 100%; cursor: pointer; touch-action: none; animation: fuBreath 3.6s ease-in-out infinite; }
.fu-char img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 0 18px rgba(255, 255, 255, .22)); -webkit-touch-callout: none; pointer-events: none; }
.fu-blush { position: absolute; left: 38%; top: 15%; width: 24%; height: 5%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 110, 150, .55), transparent 70%); opacity: 0; transition: opacity .6s; pointer-events: none; filter: blur(2px); }
.fu-char.blush .fu-blush { opacity: 1; }
.fu-char.jump { animation: fuJump .55s cubic-bezier(.3, 1.6, .5, 1); }
.fu-char.squish { animation: fuSquish .4s ease-out; }
.fu-char.nod { animation: fuNod .6s ease-in-out; }
.fu-char.lean { animation: fuLean .7s ease-in-out; }
.fu-char.shy { animation: fuShy .7s ease-in-out; }
.fu-char.tilt { animation: fuTilt .8s ease-in-out; }
.fu-char.puff { animation: fuPuff .5s ease-in-out 2; }
.fu-char.pat { animation: fuPat .52s ease-in-out infinite; }
.fu-say { position: absolute; left: 14px; right: 14px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 3; padding: 11px 14px; border-radius: 16px; background: rgba(255, 255, 255, .95); color: #2a2050; font-size: 14px; font-weight: 700; line-height: 1.6; box-shadow: 0 6px 20px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 150, 200, .6); }
.fu-say.pop { animation: fuSayPop .3s ease-out; }
.fu-say p { margin: 0; }
.fu-hint { position: absolute; left: 0; right: 0; top: 76px; z-index: 2; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #fff; text-shadow: 0 0 8px #ff6fae, 0 1px 3px #000; animation: blink 1.8s infinite; pointer-events: none; }
.fu-bar { position: absolute; left: 10px; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.fu-bar .btn { flex: 1 1 22%; min-width: 0; padding: 9px 4px; font-size: 12.5px; }
.fu-bar .btn.ans { flex: 1 1 100%; }
.fu-bar .btn.ghost { flex: 0 0 100%; padding: 6px; }
.fu-pop { position: absolute; z-index: 5; font-style: normal; font-weight: 900; pointer-events: none; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); animation: fuPopUp 1.1s ease-out forwards; white-space: nowrap; }
.fu-pop.heart { font-size: 26px; color: #ff6fae; text-shadow: 0 0 10px #ff9ccc; }
.fu-pop.heart.big { font-size: 40px; }
.fu-pop.note { font-size: 26px; color: #ffe08a; text-shadow: 0 0 10px #ffc94a; }
.fu-pop.hya { font-family: var(--display); font-size: 30px; color: #fff; -webkit-text-stroke: 2px #ff3d8a; text-shadow: 0 0 14px #ff6fae; }
.fu-pop.puni { font-family: var(--display); font-size: 24px; color: #ffd0e6; -webkit-text-stroke: 1px #c2185b; }
.fu-pop.mad { font-family: var(--display); font-size: 28px; color: #fff; -webkit-text-stroke: 2px #d32f2f; }
.fu-pop.q { font-size: 30px; color: #bfe6ff; text-shadow: 0 0 10px #5fa8ff; }
@keyframes fuGlow { 50% { opacity: .65; } }
@keyframes fuBreath { 50% { transform: scaleY(1.008) translateY(-2px); } }
@keyframes fuJump { 0% { transform: scale(1, 1); } 25% { transform: scale(1.06, .9) translateY(0); } 55% { transform: scale(.96, 1.05) translateY(-30px); } 100% { transform: none; } }
@keyframes fuSquish { 30% { transform: scale(1.04, .95); } 60% { transform: scale(.98, 1.03); } }
@keyframes fuNod { 30% { transform: rotate(-2deg) translateY(4px); } 60% { transform: rotate(1deg); } }
@keyframes fuLean { 40% { transform: translateX(-10px) rotate(-2deg); } }
@keyframes fuShy { 30% { transform: rotate(3deg) translateX(8px); } 60% { transform: rotate(-1deg); } }
@keyframes fuTilt { 40% { transform: rotate(-4deg); } 70% { transform: rotate(-3deg); } }
@keyframes fuPuff { 50% { transform: scale(1.03) translateX(4px); } }
@keyframes fuPat { 50% { transform: scale(1.01, .985) translateY(3px); } }
@keyframes fuSayPop { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } }
@keyframes fuPopUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.4) rotate(var(--r)); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.15) rotate(var(--r)); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1) rotate(var(--r)); } }
.fu-blush { top: 20%; }

/* ===== 戦闘の見せ場 (v66) ===== */
.patcut { position: absolute; left: -10%; right: -10%; top: 40%; z-index: 9; height: 92px; display: grid; place-items: center; align-content: center; pointer-events: none; transform: rotate(-6deg); animation: patIn 1.25s cubic-bezier(.2, .9, .3, 1) forwards; }
.patcut i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pc) 55%, transparent) 12%, rgba(10, 6, 24, .88) 30%, rgba(10, 6, 24, .88) 70%, color-mix(in srgb, var(--pc) 55%, transparent) 88%, transparent); border-top: 2px solid var(--pc); border-bottom: 2px solid var(--pc); box-shadow: 0 0 30px var(--pc); }
.patcut small { position: relative; font-family: var(--latin); font-size: 12px; letter-spacing: .7em; color: var(--pc); text-shadow: 0 0 8px var(--pc); }
.patcut b { position: relative; font-family: var(--display); font-size: 38px; font-weight: 900; letter-spacing: .14em; line-height: 1.05; color: #fff; text-shadow: 0 0 12px var(--pc), 0 0 30px var(--pc), 0 3px 0 rgba(0, 0, 0, .6); }
.patcut em { position: relative; font-style: normal; font-size: 13px; font-weight: 900; color: var(--pc); letter-spacing: .1em; }
@keyframes patIn { 0% { transform: rotate(-6deg) translateX(110%) scaleY(.4); opacity: 0; } 14% { transform: rotate(-6deg) translateX(0) scaleY(1.15); opacity: 1; } 22% { transform: rotate(-6deg) scaleY(1); } 78% { opacity: 1; transform: rotate(-6deg) translateX(-2%); } 100% { transform: rotate(-6deg) translateX(-110%) scaleY(.6); opacity: 0; } }
.brasswave { position: absolute; left: 0; right: 0; top: 30%; bottom: 30%; z-index: 7; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 211, 107, .0) 30%, rgba(255, 220, 140, .55) 48%, rgba(255, 255, 255, .8) 50%, rgba(255, 220, 140, .55) 52%, transparent 70%); background-size: 240% 100%; mix-blend-mode: screen; animation: brassWave .7s ease-out forwards; filter: blur(2px); }
.brasswave.big { top: 22%; bottom: 22%; }
@keyframes brassWave { 0% { background-position: 120% 0; opacity: 1; } 100% { background-position: -40% 0; opacity: .2; } }
.fx.slash.big { transform: translate(-50%, -50%) scale(1.7); }
#battle .bark { z-index: 9; font-weight: 800; font-size: 12.5px; padding: 6px 10px; border-radius: 12px; background: rgba(255, 255, 255, .96); color: #241a48; box-shadow: 0 4px 14px rgba(0, 0, 0, .5), 0 0 0 2px rgba(199, 155, 255, .7); animation: barkIn .3s cubic-bezier(.3, 1.6, .5, 1), barkin 2.2s ease-out forwards; white-space: nowrap; }
@keyframes barkIn { 0% { transform: scale(.4); opacity: 0; } }
/* the girl on the starter banner stays still (the owner found the bobbing and blinking flickery) */
.st-char, .starter.big .st-char { animation: none; }
.st-ribbon { animation: none; }