/* ============ STEEL BALL RUN: THE CORPSE ROAD ============ */
:root {
  --ink: #1a1020; --paper: #f6ecd8; --paper2: #efe0bf; --gold: #f2c14e; --pink: #e8508a; --purple: #5b3a8c;
  --violet: #6b5bd6; --teal: #3fb8a9; --orange: #e8742a; --red: #c8323c; --green: #6ad08a; --sky: #9fc7e8;
  --shadow: 6px 6px 0 var(--ink); --shadow-s: 3px 3px 0 var(--ink);
  --f-title: 'Rye', 'Georgia', serif; --f-ui: 'Oswald', 'Arial Narrow', sans-serif; --f-sfx: 'Bangers', 'Impact', sans-serif; --f-jp: 'Noto Sans JP', sans-serif;
  --bg: #241533; --text: #1a1020; --panel: var(--paper);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--f-ui); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }
#app { position: fixed; inset: 0; overflow: hidden; }
#screen { position: absolute; inset: 0; }
#overlay { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
#overlay > * { pointer-events: auto; }
#fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.muted { opacity: .7; }
b { font-weight: 700; }
svg.portrait { width: 100%; height: 100%; display: block; }
.ico { display: inline-block; vertical-align: middle; flex-shrink: 0; }
body.reduced *, body.reduced *::before, body.reduced *::after { animation-duration: .001s !important; transition-duration: .001s !important; }

/* ---------- buttons ---------- */
.btn { font-family: var(--f-ui); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); padding: 10px 18px; font-size: 15px; box-shadow: var(--shadow-s); transition: transform .12s, box-shadow .12s, background .15s; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); background: #fff8e6; }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn-primary { background: var(--gold); }
.btn-primary:hover { background: #ffd66e; }
.btn-primary.big { font-size: 20px; padding: 12px 34px; }
.btn-ghost { background: transparent; color: var(--paper); border-color: var(--paper); box-shadow: none; }
.modal .btn-ghost { color: var(--ink); border-color: var(--ink); }
.btn-danger { background: var(--red); color: #fff; }
.btn-small { font-size: 12px; padding: 6px 12px; }
.btn.disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.btn-plus { padding: 0 8px; font-size: 16px; line-height: 22px; background: var(--gold); margin-left: 6px; }

/* ---------- transitions ---------- */
.wipe { position: absolute; inset: -10%; z-index: 90; pointer-events: none; background: var(--ink); }
.wipe.slash { clip-path: polygon(0 0, 0 0, -20% 100%, -20% 100%); animation: wipeIn .36s cubic-bezier(.7, 0, .3, 1) forwards; background: repeating-linear-gradient(115deg, var(--ink) 0 40px, #2a1a38 40px 80px); }
.wipe.slash.out { animation: wipeOut .5s cubic-bezier(.7, 0, .3, 1) forwards; }
@keyframes wipeIn { to { clip-path: polygon(0 0, 130% 0, 110% 100%, -20% 100%); } }
@keyframes wipeOut { from { clip-path: polygon(0 0, 130% 0, 110% 100%, -20% 100%); } to { clip-path: polygon(130% 0, 130% 0, 110% 100%, 110% 100%); } }
.wipe.fade { opacity: 0; animation: fadeIn .36s forwards; }
.wipe.fade.out { animation: fadeOut .5s forwards; }
.wipe.burst { background: radial-gradient(circle, #fff 0 10%, var(--gold) 11% 22%, var(--ink) 23%); clip-path: circle(0% at 50% 50%); animation: burstIn .36s ease-in forwards; }
.wipe.burst.out { animation: burstOut .5s ease-out forwards; }
@keyframes burstIn { to { clip-path: circle(80% at 50% 50%); } }
@keyframes burstOut { from { clip-path: circle(80% at 50% 50%); opacity: 1; } to { clip-path: circle(80% at 50% 50%); opacity: 0; } }
@keyframes fadeIn { to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.shake { animation: shake .3s; } .shake-strong { animation: shake .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-6px, 3px); } 40%, 60% { transform: translate(6px, -3px); } }

/* ---------- scenes (parallax) ---------- */
.scene { position: absolute; inset: 0; overflow: hidden; }
.px-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.px-layer { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; animation: pxScroll var(--spd) linear infinite; }
.px-layer svg { width: 100%; height: 100%; display: block; }
.scene.still .px-layer { animation-play-state: paused; }
.scene.still .px-layer.clouds { animation-play-state: running; animation-duration: 300s; }
@keyframes pxScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.weather { position: absolute; inset: 0; pointer-events: none; }
.weather.rain { background-image: repeating-linear-gradient(105deg, transparent 0 18px, rgba(200, 225, 255, .35) 18px 19px); background-size: 200px 200px; animation: rain .35s linear infinite; }
@keyframes rain { to { background-position: -40px 200px; } }
.weather.snow { background-image: radial-gradient(circle, #fff 1.5px, transparent 2px), radial-gradient(circle, #fff 1px, transparent 1.5px); background-size: 90px 90px, 60px 60px; animation: snow 6s linear infinite; opacity: .8; }
@keyframes snow { to { background-position: -90px 360px, 60px 240px; } }
.weather.dust { background: radial-gradient(ellipse at 20% 90%, rgba(255, 220, 160, .25), transparent 50%); }

/* ---------- horse ---------- */
.horse-svg { width: 100%; height: 100%; overflow: visible; }
.horse-svg .horse-body { animation: bob .42s ease-in-out infinite; transform-origin: 100px 80px; }
.horse-svg .leg { transform-box: view-box; animation: legA .42s ease-in-out infinite; }
.horse-svg .leg.fl, .horse-svg .leg.br { animation-name: legB; }
.horse-svg .leg.bl { animation-delay: -.1s; } .horse-svg .leg.fr { animation-delay: -.1s; }
.horse-svg .tail { transform-origin: 54px 64px; transform-box: view-box; animation: tail .42s ease-in-out infinite; }
.horse-svg .cape { transform-origin: 100px 34px; transform-box: view-box; animation: cape .3s ease-in-out infinite alternate; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-1.5deg); } }
@keyframes legA { 0%, 100% { transform: rotate(32deg); } 50% { transform: rotate(-28deg); } }
@keyframes legB { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(30deg); } }
@keyframes tail { 50% { transform: rotate(-14deg); } }
@keyframes cape { to { transform: skewY(-6deg) scaleX(1.08); } }
.hc-art .horse-svg .horse-body, .bh-art .horse-svg .horse-body { animation-duration: 1.2s; }
.hc-art .horse-svg .leg, .bh-art .horse-svg .leg { animation-duration: 1.2s; }

/* ---------- menacing ---------- */
.menacing { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.menacing span { position: absolute; font-family: var(--f-jp); font-weight: 900; color: #b070ff; -webkit-text-stroke: 2px var(--ink); text-shadow: 3px 3px 0 var(--ink); opacity: 0; animation: menace 2.6s ease-in-out infinite; }
@keyframes menace { 0% { opacity: 0; transform: translateY(10px) scale(.7) rotate(-8deg); } 20% { opacity: .95; } 60% { opacity: .95; transform: translateY(-14px) scale(1.05) rotate(4deg); } 100% { opacity: 0; transform: translateY(-30px) scale(1.1); } }
.sfx-text { position: absolute; transform: translate(-50%, -50%); font-family: var(--f-sfx); font-size: 44px; color: var(--gold); -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--ink); white-space: nowrap; animation: sfxPop 1.4s cubic-bezier(.2, 1.4, .4, 1) forwards; letter-spacing: .04em; }
.sfx-text.k-gun, .sfx-text.k-nail { color: #fff; } .sfx-text.k-ball { color: var(--teal); } .sfx-text.k-claw { color: #8adf6a; } .sfx-text.k-boom { color: var(--orange); font-size: 60px; } .sfx-text.k-golden { color: #ffd84a; font-size: 64px; } .sfx-text.k-spray { color: var(--pink); } .sfx-text.retire { font-family: var(--f-title); color: var(--red); font-size: 34px; }
@keyframes sfxPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-15deg); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(-6deg); } 70% { opacity: 1; transform: translate(-50%, -60%) scale(1) rotate(-6deg); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(.9) rotate(-6deg); } }

/* ---------- tooltip & toasts ---------- */
#tooltip { position: fixed; z-index: 200; max-width: 320px; background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow-s); padding: 10px 12px; font-size: 14px; line-height: 1.4; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
#tooltip.show { opacity: 1; transform: none; }
#tooltip i { opacity: .6; font-size: 12px; text-transform: uppercase; }
.tag { display: inline-block; font-size: 10px; text-transform: uppercase; border: 2px solid var(--ink); padding: 0 5px; margin-top: 4px; background: #fff; font-weight: 700; }
.tag-spin { background: var(--teal); color: #fff; } .tag-gun { background: var(--orange); color: #fff; } .tag-stand { background: var(--violet); color: #fff; } .tag-heal { background: var(--green); }
.lv2 { background: var(--gold); border: 2px solid var(--ink); font-size: 10px; padding: 0 4px; margin-left: 4px; font-weight: 700; }
.tip-cost { color: var(--violet); letter-spacing: 2px; } .pierce { color: var(--red); } .tip-passive { color: var(--purple); font-size: 12px; }
#toasts { position: fixed; left: 16px; bottom: 96px; z-index: 150; display: flex; flex-direction: column-reverse; gap: 8px; align-items: flex-start; pointer-events: none; max-width: calc(100vw - 32px); }
.toast { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow-s); padding: 8px 14px; font-size: 14px; max-width: 360px; animation: toastIn .35s cubic-bezier(.2, 1.4, .4, 1); transform-origin: right; }
.toast.out { animation: toastOut .4s forwards; }
body:has(.boss-intro) #toasts, body:has(.dlg-wrap) #toasts { opacity: 0; }
.toast.good { border-left: 8px solid var(--teal); } .toast.bad { border-left: 8px solid var(--red); } .toast.achv { background: var(--gold); } .toast.ally { border-left: 8px solid var(--pink); } .toast.loss { background: #3a2a40; color: var(--paper); } .toast.corpse { background: #fff3c0; border-left: 8px solid #c8a040; } .toast.say { font-style: italic; }
.toast-port { width: 40px; height: 48px; border: 2px solid var(--ink); overflow: hidden; flex-shrink: 0; } .toast-port.grey { filter: grayscale(1); }
.toast-glyph { width: 30px; height: 30px; display: grid; place-items: center; background: var(--c); border: 2px solid var(--ink); font-family: var(--f-jp); font-weight: 900; flex-shrink: 0; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-40px) scale(.8); } } @keyframes toastOut { to { opacity: 0; transform: translateX(-40px); } }

/* ---------- modal ---------- */
.modal-wrap { position: absolute; inset: 0; background: rgba(20, 10, 30, .65); display: grid; place-items: center; opacity: 0; transition: opacity .2s; padding: 16px; backdrop-filter: blur(2px); }
.modal-wrap.show { opacity: 1; }
.modal { position: relative; background: var(--paper); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); padding: 26px 24px 20px; max-width: 560px; width: 100%; max-height: calc(100vh - 32px); overflow: auto; transform: scale(.9) rotate(-1deg); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); background-image: radial-gradient(rgba(26, 16, 32, .07) 1px, transparent 1.4px); background-size: 7px 7px; }
.modal-wrap.show .modal { transform: none; }
.modal.small { max-width: 420px; } .modal.wide { max-width: 820px; } .modal.xl { max-width: 1100px; }
.modal-title { position: absolute; top: 12px; left: 18px; }
.modal:has(.modal-title) { padding-top: 60px; }
.modal-title span { display: inline-block; background: var(--ink); color: var(--gold); font-family: var(--f-title); font-size: 20px; padding: 4px 18px; transform: skew(-10deg); }
.modal-x { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: 3px solid var(--ink); background: var(--pink); color: #fff; font-weight: 700; cursor: pointer; font-size: 16px; }
.modal-x:hover { transform: rotate(90deg); transition: transform .2s; }
.cs-sub { font-family: var(--f-ui); font-weight: 700; letter-spacing: .12em; font-size: 12px; color: var(--purple); margin: 14px 0 8px; border-bottom: 2px solid var(--ink); padding-bottom: 3px; }

/* ---------- HUD ---------- */
.hud { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 18px; padding: 10px 16px; background: linear-gradient(180deg, rgba(20, 10, 30, .92), rgba(20, 10, 30, .6) 80%, transparent); color: var(--paper); }
.hud-left { display: flex; align-items: center; gap: 16px; }
.hud-act { display: flex; flex-direction: column; line-height: 1; }
.hud-actnum { font-family: var(--f-ui); font-size: 12px; letter-spacing: .2em; color: var(--gold); }
.hud-acttitle { font-family: var(--f-title); font-size: 24px; text-shadow: 3px 3px 0 var(--ink); }
.stage-track { display: flex; gap: 6px; align-items: center; }
.st-dot { width: 16px; height: 16px; border: 3px solid var(--paper); background: transparent; transform: rotate(45deg); position: relative; display: grid; place-items: center; }
.st-dot.done { background: var(--paper); } .st-dot.current { background: var(--gold); border-color: var(--gold); animation: dotPulse 1s infinite; }
.st-dot.story { border-color: var(--pink); } .st-dot.boss { width: 24px; height: 24px; border-color: var(--red); background: var(--ink); }
.st-dot.boss span { transform: rotate(-45deg); display: flex; }
@keyframes dotPulse { 50% { box-shadow: 0 0 0 5px rgba(242, 193, 78, .35); } }
.hud-pace { flex: 1; max-width: 320px; display: flex; align-items: center; gap: 8px; margin: 0 auto; }
.pace-label { font-size: 12px; letter-spacing: .2em; color: var(--gold); }
.pace-bar { flex: 1; height: 14px; border: 3px solid var(--paper); position: relative; background: rgba(0, 0, 0, .35); }
.pace-fill { height: 100%; background: repeating-linear-gradient(-45deg, var(--gold) 0 8px, #ffd66e 8px 16px); transition: width .6s; animation: stripes 1s linear infinite; background-size: 22px 22px; }
@keyframes stripes { to { background-position: 22px 0; } }
.pace-horse { position: absolute; top: -12px; transform: translateX(-50%); transition: left .6s; }
.pace-val { font-weight: 700; width: 28px; }
.hud-right { display: flex; align-items: center; gap: 10px; }
.hud-stat { display: flex; align-items: center; gap: 6px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); padding: 3px 10px 3px 6px; font-weight: 700; font-size: 16px; box-shadow: var(--shadow-s); }
.hud-stat.sugar { background: var(--gold); animation: dotPulse 1s infinite; }
.hud-stat.big { font-size: 20px; display: inline-flex; margin-top: 6px; }
.icon-btn { width: 42px; height: 42px; border: 3px solid var(--ink); background: var(--paper); box-shadow: var(--shadow-s); cursor: pointer; display: grid; place-items: center; transition: transform .12s; }
.icon-btn:hover { transform: translate(-2px, -2px) rotate(-4deg); background: var(--gold); }

/* ---------- party strip ---------- */
.party-strip { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 10px; z-index: 10; }
.ps-card { display: flex; gap: 8px; align-items: center; background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow-s); padding: 5px 10px 5px 5px; cursor: pointer; position: relative; transition: transform .15s; min-width: 150px; }
.ps-card:hover { transform: translateY(-4px); }
.ps-card.down { filter: grayscale(.8); }
.ps-port { width: 42px; height: 50px; border: 2px solid var(--ink); overflow: hidden; }
.ps-info { flex: 1; } .ps-name { font-weight: 700; font-size: 14px; } .ps-name small { opacity: .6; }
.ps-exh { font-size: 10px; color: var(--red); font-weight: 700; }
.ps-pts { position: absolute; top: -10px; right: -10px; background: var(--gold); border: 2px solid var(--ink); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; font-size: 11px; font-weight: 700; animation: dotPulse 1s infinite; }
.hpbar { position: relative; height: 14px; background: #3a2a30; border: 2px solid var(--ink); overflow: hidden; margin-top: 3px; }
.hpbar.big { height: 20px; }
.hpbar .hpfill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #7ee08a, #3aa050); transition: width .35s cubic-bezier(.3, 1.3, .5, 1); }
.hpbar .hpfill.low { background: linear-gradient(180deg, #ff8080, #c8323c); animation: lowPulse .8s infinite; }
@keyframes lowPulse { 50% { filter: brightness(1.4); } }
.hpbar .hpghost { position: absolute; inset: 0 auto 0 0; background: #fff3c0; transition: width .6s ease-out; }
.hpbar .shieldfill { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(45deg, rgba(159, 199, 232, .9) 0 4px, rgba(255, 255, 255, .9) 4px 8px); height: 5px; top: auto; }
.hpbar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }

/* ---------- stage ---------- */
.stage-scene { position: absolute; inset: 0; }
.stage-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(20, 10, 30, .75)); }
.stage-horse { position: absolute; left: 6%; bottom: 20%; width: 230px; height: 172px; z-index: 2; filter: drop-shadow(4px 6px 0 rgba(26, 16, 32, .4)); animation: horseDrift 6s ease-in-out infinite; }
.stage-horse.second { left: 1%; bottom: 14%; width: 200px; height: 150px; animation-delay: -2s; }
@keyframes horseDrift { 50% { transform: translateX(26px); } }
.stage-title { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 3; color: var(--paper); pointer-events: none; width: 90%; }
.stage-kicker { display: inline-block; background: var(--ink); color: var(--gold); padding: 3px 14px; font-weight: 700; letter-spacing: .25em; font-size: 13px; transform: skew(-10deg); }
.stage-title h1 { font-family: var(--f-title); font-size: clamp(26px, 4vw, 48px); margin: 6px 0 0; text-shadow: 4px 4px 0 var(--ink), -2px -2px 0 var(--ink); line-height: 1.05; }
.stage-sub { font-size: 14px; letter-spacing: .2em; text-transform: uppercase; opacity: .85; text-shadow: 2px 2px 0 var(--ink); }
.card-deck { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: flex; gap: 22px; z-index: 5; perspective: 1000px; }
.enc-card { width: 210px; height: 310px; background: var(--paper); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); position: relative; cursor: pointer; display: flex; flex-direction: column; padding: 10px; opacity: 0; transform: translateY(80px) rotateY(90deg) rotate(-6deg); transition: transform .45s cubic-bezier(.2, 1.3, .4, 1), opacity .3s, box-shadow .15s; background-image: radial-gradient(rgba(26, 16, 32, .08) 1px, transparent 1.4px); background-size: 6px 6px; outline: none; }
.enc-card.dealt { opacity: 1; transform: none; }
.enc-card.dealt:nth-child(1) { transform: rotate(-2deg); } .enc-card.dealt:nth-child(3) { transform: rotate(2deg); }
.enc-card.dealt:hover, .enc-card.dealt:focus { transform: translateY(-16px) rotate(0) scale(1.04); box-shadow: 12px 16px 0 var(--ink); z-index: 2; }
.enc-card.picked { transform: translateY(-40px) scale(1.12) !important; box-shadow: 0 0 0 6px var(--gold), 14px 18px 0 var(--ink) !important; }
.enc-type { position: absolute; top: -14px; left: 12px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 12px; letter-spacing: .15em; padding: 3px 10px; transform: skew(-10deg); text-transform: uppercase; }
.enc-art { height: 150px; border: 3px solid var(--ink); overflow: hidden; margin-top: 8px; background: linear-gradient(135deg, var(--violet), var(--pink)); display: grid; place-items: center; }
.enc-icon { display: grid; place-items: center; width: 100%; height: 100%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .15) 0 10deg, transparent 10deg 20deg); }
.enc-title { font-family: var(--f-title); font-size: 19px; margin-top: 10px; line-height: 1.05; }
.enc-blurb { font-size: 13px; opacity: .8; margin-top: 4px; flex: 1; line-height: 1.3; }
.enc-foot { display: flex; justify-content: space-between; align-items: center; }
.enc-pace { font-size: 12px; font-weight: 700; padding: 1px 6px; border: 2px solid var(--ink); }
.enc-pace.up { background: var(--teal); color: #fff; } .enc-pace.down { background: #e8d8c0; }
.enc-key { width: 24px; height: 24px; border: 2px solid var(--ink); display: grid; place-items: center; font-weight: 700; font-size: 12px; background: #fff; }
.enc-card.type-fight .enc-type { background: var(--red); } .enc-card.type-elite .enc-type { background: #8a1a2a; } .enc-card.type-elite { box-shadow: 8px 8px 0 #8a1a2a; }
.enc-card.type-shop .enc-type { background: var(--orange); } .enc-card.type-rest .enc-type { background: var(--green); color: var(--ink); } .enc-card.type-trainer .enc-type { background: var(--teal); } .enc-card.type-recruit .enc-type { background: var(--pink); }
.enc-card.type-story { background-color: #fff3c0; border-color: var(--ink); box-shadow: 0 0 0 4px var(--gold), 10px 10px 0 var(--ink); width: 250px; height: 340px; }
.enc-card.type-story .enc-type { background: var(--gold); color: var(--ink); }
.enc-card.type-boss { width: 270px; height: 360px; background: #2a1a38; color: var(--paper); box-shadow: 0 0 0 4px var(--red), 10px 10px 0 var(--ink); animation: bossGlow 1.4s ease-in-out infinite; }
.enc-card.type-boss .enc-type { background: var(--red); } .enc-card.type-boss .enc-art { height: 190px; }
@keyframes bossGlow { 50% { box-shadow: 0 0 0 4px var(--red), 0 0 40px 6px rgba(200, 50, 60, .6), 10px 10px 0 var(--ink); } }
.stage-actions { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 10; }
.btn-side { display: flex; align-items: center; justify-content: flex-start; min-width: 220px; }
.btn-side span { display: flex; align-items: center; gap: 8px; width: 100%; }
.btn-side small { margin-left: auto; font-size: 11px; opacity: .6; text-transform: none; }

/* ---------- act card & title ---------- */
.screen-actcard .actcard-scene { position: absolute; inset: 0; filter: brightness(.55) saturate(1.2); }
.actcard { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--paper); text-align: center; z-index: 4; }
.ac-num { font-weight: 700; letter-spacing: .5em; color: var(--gold); font-size: 20px; animation: slideDown .6s cubic-bezier(.2, 1.4, .4, 1); }
.ac-title { font-family: var(--f-title); font-size: clamp(48px, 9vw, 120px); text-shadow: 6px 6px 0 var(--ink); line-height: 1; animation: zoomIn .7s cubic-bezier(.2, 1.4, .4, 1); }
.ac-sub { font-size: 18px; letter-spacing: .12em; margin-top: 10px; text-shadow: 2px 2px 0 var(--ink); animation: fadeIn 1s .3s both; opacity: 0; }
.ac-map { width: min(560px, 90vw); margin-top: 18px; animation: fadeIn 1s .5s both; opacity: 0; filter: drop-shadow(6px 6px 0 var(--ink)); }
@keyframes slideDown { from { transform: translateY(-40px); opacity: 0; } } @keyframes zoomIn { from { transform: scale(2.4) rotate(-6deg); opacity: 0; } }
.screen-title .title-scene { position: absolute; inset: 0; }
.title-horse { position: absolute; left: 8%; bottom: 10%; width: 360px; height: 270px; z-index: 2; filter: drop-shadow(6px 8px 0 rgba(26, 16, 32, .45)); animation: horseDrift 5s ease-in-out infinite; }
.title-logo { position: absolute; top: 12%; left: 50%; transform: translateX(-50%) rotate(-3deg); text-align: center; z-index: 4; }
.tl-jojo { font-family: var(--f-sfx); font-size: 22px; letter-spacing: .1em; color: var(--paper); -webkit-text-stroke: 1px var(--ink); text-shadow: 3px 3px 0 var(--ink); }
.tl-main { font-family: var(--f-title); font-size: clamp(54px, 10vw, 130px); line-height: .9; color: var(--gold); -webkit-text-stroke: 3px var(--ink); text-shadow: 8px 8px 0 var(--ink), 0 0 60px rgba(242, 193, 78, .5); animation: logoIn 1s cubic-bezier(.2, 1.4, .4, 1); }
.tl-sub { font-family: var(--f-sfx); font-size: clamp(22px, 3vw, 38px); letter-spacing: .4em; color: #fff; background: var(--pink); display: inline-block; padding: 2px 20px; border: 3px solid var(--ink); box-shadow: var(--shadow); transform: skew(-12deg); margin-top: 10px; }
@keyframes logoIn { from { transform: scale(.3) rotate(12deg); opacity: 0; } }
.title-menu { position: absolute; right: 8%; bottom: 14%; display: flex; flex-direction: column; gap: 12px; z-index: 5; }
.btn-title { font-size: 20px; padding: 12px 40px; min-width: 260px; text-align: left; }
.btn-title.primary { background: var(--gold); }
.title-foot { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; color: var(--paper); font-size: 12px; opacity: .7; z-index: 5; text-shadow: 1px 1px 0 var(--ink); }

/* ---------- dialogue ---------- */
.dlg-wrap { position: absolute; inset: 0; z-index: 60; opacity: 0; transition: opacity .3s; cursor: pointer; }
.dlg-wrap.show { opacity: 1; }
.dlg-bg { position: absolute; inset: 0; filter: brightness(.6) saturate(1.1); }
.dlg-wrap.menace .dlg-bg { filter: brightness(.4) saturate(1.6) hue-rotate(-20deg); }
.dlg-portrait { position: absolute; bottom: 150px; width: min(300px, 32vw); height: min(360px, 38vw); border: 5px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); background: var(--paper); overflow: hidden; transition: transform .3s, filter .3s; filter: brightness(.55) saturate(.6); }
.dlg-portrait:empty { display: none; }
.dlg-portrait.left { left: 6%; transform: rotate(-3deg); } .dlg-portrait.right { right: 6%; transform: rotate(3deg); }
.dlg-portrait.active { filter: none; transform: rotate(0) scale(1.04); z-index: 2; }
.dlg-portrait.enter { animation: portIn .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes portIn { from { transform: translateY(60px) scale(.8); opacity: 0; } }
.dlg-box { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(900px, 94vw); min-height: 130px; background: var(--paper); border: 5px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); padding: 22px 28px; z-index: 3; background-image: radial-gradient(rgba(26, 16, 32, .07) 1px, transparent 1.4px); background-size: 7px 7px; }
.dlg-box.narr { background-color: #2a1a38; color: var(--paper); font-style: italic; background-image: none; }
.dlg-box.shout { background-color: var(--gold); animation: shout .4s; }
@keyframes shout { 30% { transform: translateX(-50%) scale(1.04) rotate(-1deg); } }
.dlg-name { position: absolute; top: -22px; background: var(--ink); color: var(--gold); font-family: var(--f-title); font-size: 20px; padding: 3px 18px; transform: skew(-10deg); }
.dlg-name.left { left: 20px; } .dlg-name.right { right: 20px; }
.dlg-text { font-size: 20px; line-height: 1.45; }
.dlg-hint { position: absolute; right: 16px; bottom: 8px; font-size: 12px; opacity: .5; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .15; } }
.dlg-skip { position: absolute; top: 16px; right: 16px; z-index: 4; }

/* ---------- dice ---------- */
.dice-panel { text-align: center; }
.dice-who { display: flex; gap: 12px; align-items: center; text-align: left; }
.dice-who svg { width: 56px; height: 66px; border: 3px solid var(--ink); }
.dice-label { font-family: var(--f-title); font-size: 24px; } .dice-sub { opacity: .7; }
.d20 { width: 150px; height: 150px; margin: 14px auto; position: relative; }
.d20 svg { width: 100%; height: 100%; filter: drop-shadow(5px 5px 0 var(--ink)); }
.d20.rolling svg { animation: roll .25s linear infinite; }
@keyframes roll { to { transform: rotate(360deg); } }
.d20-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-sfx); font-size: 48px; color: var(--ink); padding-top: 14px; }
.dice-math { font-size: 20px; } .dice-math .total { font-size: 28px; color: var(--purple); }
.dice-stamp { font-family: var(--f-sfx); font-size: 46px; opacity: 0; transform: scale(3) rotate(-12deg); letter-spacing: .06em; }
.dice-stamp.show { opacity: 1; transform: rotate(-8deg); transition: all .3s cubic-bezier(.2, 1.4, .4, 1); }
.dice-stamp.ok { color: var(--teal); -webkit-text-stroke: 2px var(--ink); } .dice-stamp.bad { color: var(--red); -webkit-text-stroke: 2px var(--ink); }

/* ---------- event ---------- */
.event-panel { display: flex; gap: 22px; }
.event-art { width: 220px; height: 264px; border: 4px solid var(--ink); box-shadow: var(--shadow); flex-shrink: 0; overflow: hidden; background: linear-gradient(135deg, var(--violet), var(--pink)); }
.event-icon { width: 100%; height: 100%; display: grid; place-items: center; background: repeating-conic-gradient(rgba(255, 255, 255, .15) 0 10deg, transparent 10deg 20deg); }
.event-body { flex: 1; }
.event-body h2 { font-family: var(--f-title); font-size: 28px; margin: 0 0 8px; }
.event-text { font-size: 17px; line-height: 1.5; }
.choices { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.choice { display: flex; align-items: center; gap: 10px; text-align: left; border: 3px solid var(--ink); background: #fff; padding: 10px 12px; font-size: 16px; cursor: pointer; box-shadow: var(--shadow-s); transition: transform .12s, background .12s; }
.choice:hover { transform: translateX(6px); background: #fff3c0; }
.choice.disabled { opacity: .45; cursor: not-allowed; }
.choice-n { width: 26px; height: 26px; background: var(--ink); color: var(--gold); display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.choice-label { flex: 1; }
.choice-check { font-size: 12px; font-weight: 700; background: var(--c); color: #fff; border: 2px solid var(--ink); padding: 2px 6px; white-space: nowrap; text-shadow: 1px 1px 0 var(--ink); }
.choice-cost { font-weight: 700; background: var(--gold); border: 2px solid var(--ink); padding: 2px 6px; } .choice-cost.bad { background: #ccc; }
.result-panel { text-align: center; }
.result-panel h3 { font-family: var(--f-title); font-size: 24px; margin: 8px 0; } .result-panel p { font-size: 17px; line-height: 1.5; }
.result-icon { display: inline-block; animation: zoomIn .5s cubic-bezier(.2, 1.4, .4, 1); }

/* ---------- chips ---------- */
.relic-chip, .item-chip { width: 44px; height: 44px; border: 3px solid var(--ink); background: var(--c); display: grid; place-items: center; font-family: var(--f-jp); font-weight: 900; font-size: 20px; box-shadow: var(--shadow-s); flex-shrink: 0; cursor: help; color: var(--ink); position: relative; }
.relic-chip { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: none; border: none; }
.relic-chip::before { content: ''; position: absolute; inset: 0; background: var(--ink); clip-path: inherit; z-index: -1; }
.relic-chip span { width: 38px; height: 38px; display: grid; place-items: center; background: var(--c); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.relic-chip { background: var(--ink); }
.relic-chip.rarity-rare span { box-shadow: inset 0 0 0 3px var(--gold); background: radial-gradient(circle, #fff 0, var(--c) 70%); }
.relic-chip.rarity-corpse span { background: radial-gradient(circle, #fff8d0, #e8d8a8); animation: holy 2s ease-in-out infinite; }
@keyframes holy { 50% { filter: drop-shadow(0 0 6px #fff3a0) brightness(1.15); } }
.relic-chip.pop { animation: zoomIn .5s cubic-bezier(.2, 1.4, .4, 1); }
.item-chip { border-radius: 50%; cursor: pointer; }
.item-chip:hover { transform: scale(1.1); }
.item-chip.service { background: #fff; border-radius: 4px; }
.tech-chip { width: 44px; height: 44px; border: 3px solid var(--ink); background: var(--violet); color: #fff; display: grid; place-items: center; font-weight: 700; transform: rotate(45deg) scale(.8); }

/* ---------- party screen ---------- */
.party-screen { display: flex; gap: 18px; min-height: 480px; }
.party-tabs { display: flex; flex-direction: column; gap: 8px; width: 120px; flex-shrink: 0; }
.party-tab { display: flex; flex-direction: column; align-items: center; border: 3px solid var(--ink); background: #fff; cursor: pointer; padding: 6px; font-weight: 700; position: relative; transition: transform .12s; }
.party-tab:hover { transform: translateX(4px); } .party-tab.active { background: var(--gold); box-shadow: var(--shadow-s); }
.party-tab.reserve { opacity: .75; } .party-tab.pts::after { content: '!'; position: absolute; top: -8px; right: -8px; background: var(--pink); color: #fff; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; }
.pt-port { width: 60px; height: 70px; border: 2px solid var(--ink); overflow: hidden; display: block; }
.tab-sep { font-size: 11px; letter-spacing: .2em; text-align: center; opacity: .6; margin-top: 6px; }
.char-sheet { flex: 1; min-width: 0; }
.cs-head { display: flex; gap: 18px; }
.cs-port { width: 140px; height: 168px; border: 4px solid var(--ink); box-shadow: var(--shadow); flex-shrink: 0; overflow: hidden; }
.cs-id { flex: 1; } .cs-title { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--purple); }
.cs-id h2 { font-family: var(--f-title); font-size: 30px; margin: 0; line-height: 1.1; }
.cs-stand { font-family: var(--f-sfx); font-size: 22px; color: var(--pink); letter-spacing: .06em; -webkit-text-stroke: .6px var(--ink); }
.cs-lv { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 700; }
.xpbar { width: 140px; height: 10px; border: 2px solid var(--ink); background: #fff; } .xpbar div { height: 100%; background: var(--violet); }
.cs-exh { color: var(--red); font-weight: 700; font-size: 13px; margin-top: 4px; }
.cs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.stat-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; cursor: help; }
.stat-name { width: 70px; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-shadow: 1px 1px 0 var(--ink); }
.stat-bar { flex: 1; height: 12px; border: 2px solid var(--ink); background: #fff; } .stat-bar div { height: 100%; transition: width .3s; }
.stat-val { width: 26px; text-align: right; font-weight: 700; }
.ab-row { border: 2px solid var(--ink); background: #fff; padding: 6px 8px; margin-bottom: 6px; font-size: 14px; }
.ab-row p { margin: 3px 0 0; font-size: 13px; opacity: .8; }
.ab-row.locked { opacity: .45; border-style: dashed; }
.ab-cost { display: inline-grid; place-items: center; width: 20px; height: 20px; background: var(--violet); color: #fff; border: 2px solid var(--ink); font-size: 11px; font-weight: 700; margin-right: 6px; transform: rotate(45deg); }
.cs-passive p { margin: 4px 0; font-size: 14px; } .cs-bio { font-style: italic; opacity: .7; }
.cs-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; } .cs-note { font-size: 13px; opacity: .6; }

/* ---------- bag / map / shop ---------- */
.bag-row, .relic-row { display: flex; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px dashed rgba(26, 16, 32, .3); }
.bag-info { flex: 1; } .bag-info p { margin: 2px 0 0; font-size: 13px; opacity: .8; }
.bag-horse { display: flex; gap: 14px; align-items: center; } .bh-art { width: 150px; height: 112px; }
.map-wrap { border: 4px solid var(--ink); background: #9fc7e8; box-shadow: var(--shadow); }
.usmap { width: 100%; display: block; }
.route-done { stroke-dasharray: 2000; animation: route 2s ease-out; }
@keyframes route { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }
.map-node.current circle { animation: nodePulse 1s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes nodePulse { 50% { transform: scale(1.35); } }
.map-screen { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; }
.stand-row { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-bottom: 1px dashed rgba(26, 16, 32, .3); animation: slideIn .4s both; }
.stand-row:nth-child(2) { animation-delay: .05s; } .stand-row:nth-child(3) { animation-delay: .1s; } .stand-row:nth-child(4) { animation-delay: .15s; } .stand-row:nth-child(5) { animation-delay: .2s; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } }
.stand-row.me { background: var(--gold); border: 2px solid var(--ink); font-weight: 700; }
.sr-pos { width: 26px; font-family: var(--f-title); font-size: 20px; } .sr-port { width: 34px; height: 40px; border: 2px solid var(--ink); overflow: hidden; } .sr-name { flex: 1; } .sr-pts { font-weight: 700; }
.shop-head { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.shop-head h2 { font-family: var(--f-title); margin: 0; font-size: 28px; }
.shop-keeper { width: 90px; height: 108px; border: 3px solid var(--ink); overflow: hidden; box-shadow: var(--shadow-s); display: grid; place-items: center; background: var(--paper2); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-bottom: 14px; }
.shop-card { border: 3px solid var(--ink); background: #fff; padding: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; box-shadow: var(--shadow-s); transition: transform .15s; }
.shop-card:hover { transform: translateY(-4px) rotate(-1deg); }
.shop-card.sold { opacity: .4; }
.shop-card.kind-relic { background: #fff8e6; }
.shop-name { font-weight: 700; } .shop-desc { font-size: 12px; opacity: .8; flex: 1; }
.btn-buy { background: var(--gold); font-size: 14px; padding: 6px 14px; }

/* ---------- chooser & rewards ---------- */
.chooser-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.chooser-card { width: 110px; border: 3px solid var(--ink); background: #fff; cursor: pointer; padding: 6px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .12s; }
.chooser-card svg { width: 90px; height: 108px; border: 2px solid var(--ink); }
.chooser-card:hover { transform: translateY(-5px); background: var(--gold); }
.chooser-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; margin-bottom: 12px; }
.chooser-ab { display: flex; gap: 10px; text-align: left; border: 3px solid var(--ink); background: #fff; padding: 8px; cursor: pointer; align-items: center; }
.chooser-ab:hover { background: #fff3c0; } .chooser-ab .pt-port { width: 44px; height: 52px; } .chooser-ab p { margin: 2px 0; font-size: 12px; } .chooser-ab .up { color: var(--teal); font-weight: 700; }
.rewards { text-align: center; }
.victory-banner { font-family: var(--f-sfx); font-size: 64px; color: var(--gold); -webkit-text-stroke: 3px var(--ink); text-shadow: 6px 6px 0 var(--ink); transform: rotate(-4deg); animation: zoomIn .6s cubic-bezier(.2, 1.4, .4, 1); letter-spacing: .05em; }
.reward-row { display: flex; justify-content: center; gap: 18px; margin: 14px 0; }
.reward { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 3px solid var(--ink); background: #fff; padding: 10px 18px; box-shadow: var(--shadow-s); font-size: 18px; animation: zoomIn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.reward:nth-child(2) { animation-delay: .1s; } .reward:nth-child(3) { animation-delay: .2s; }
.loot-row { display: flex; gap: 10px; justify-content: center; align-items: center; margin-bottom: 12px; font-weight: 700; }
.reward-members { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.rm { width: 96px; display: flex; flex-direction: column; align-items: center; position: relative; font-weight: 700; }
.rm svg { width: 80px; height: 96px; border: 3px solid var(--ink); }
.rm.fell svg { filter: grayscale(.8); }
.lvup { position: absolute; top: -12px; background: var(--gold); border: 2px solid var(--ink); padding: 1px 6px; font-size: 12px; animation: lvup .8s ease-in-out infinite alternate; }
@keyframes lvup { to { transform: translateY(-4px) scale(1.08); } }
.exh { font-size: 11px; color: var(--red); }

/* ---------- settings ---------- */
.set-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed rgba(26, 16, 32, .3); font-weight: 700; }
.set-row input[type=range] { width: 160px; accent-color: var(--purple); }
.set-row input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--purple); }
.keys { font-size: 13px; margin: 14px 0; opacity: .8; line-height: 1.5; }
.settings .btn-danger { width: 100%; }

/* ============ BATTLE ============ */
.battle { position: absolute; inset: 0; overflow: hidden; }
.battle-bg { position: absolute; inset: 0; filter: brightness(.65) saturate(1.1); transition: filter .4s; }
.battle-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(20, 10, 30, .75)); pointer-events: none; }
.boss-battle .battle-vignette { background: radial-gradient(ellipse at center, transparent 40%, rgba(80, 10, 30, .7)); }
.battle.timestop .battle-bg, .battle.timestop .battle-field { filter: invert(.85) hue-rotate(180deg) sepia(.4) saturate(1.5); transition: filter .3s; }
.battle.timestop::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, transparent 20%, rgba(255, 216, 74, .25)); pointer-events: none; animation: tsPulse 1s infinite; }
@keyframes tsPulse { 50% { opacity: .4; } }
.battle.rewinding .battle-field { animation: vhs .9s steps(8); filter: saturate(.3) contrast(1.3); }
@keyframes vhs { 0%, 100% { transform: none; } 20% { transform: translateX(-12px) skewX(4deg); } 40% { transform: translateX(10px); } 60% { transform: translateX(-6px) skewX(-3deg); } 80% { transform: translateX(4px); } }
.battle.defeat .battle-field { filter: grayscale(1) brightness(.6); transition: filter 1s; }
.battle-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px; z-index: 5; background: linear-gradient(180deg, rgba(20, 10, 30, .9), transparent); }
.battle-title { font-family: var(--f-title); color: var(--gold); font-size: 22px; text-shadow: 3px 3px 0 var(--ink); white-space: nowrap; }
.order-ribbon { display: flex; gap: 6px; align-items: center; }
.order-chip { width: 38px; height: 46px; border: 3px solid var(--ink); overflow: hidden; background: var(--paper); transition: transform .2s; opacity: .85; }
.order-chip.party { border-color: var(--teal); } .order-chip.enemy { border-color: var(--red); }
.order-chip.now { transform: scale(1.3); opacity: 1; margin: 0 8px; box-shadow: 0 0 0 3px var(--gold); }
.round-box { font-family: var(--f-sfx); font-size: 26px; color: var(--paper); -webkit-text-stroke: 1px var(--ink); text-shadow: 3px 3px 0 var(--ink); letter-spacing: .08em; white-space: nowrap; }
.round-box.pulse { animation: zoomIn .5s cubic-bezier(.2, 1.4, .4, 1); }
.battle-field { position: absolute; top: 70px; bottom: 190px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 4%; }
.side { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; max-width: 45%; }
.party-side { justify-content: flex-start; } .enemy-side { justify-content: flex-end; }
.side { flex-wrap: nowrap; max-width: 47%; }
.side.crowd-3 .unit-card, .side.crowd-3 .unit-card.tier-boss, .side.crowd-3 .unit-card.tier-elite { width: 132px; }
.side.crowd-3 .uc-frame, .side.crowd-3 .tier-boss .uc-frame, .side.crowd-3 .tier-elite .uc-frame { height: 152px; }
.side.crowd-4 { gap: 10px; }
.side.crowd-4 .unit-card, .side.crowd-4 .unit-card.tier-boss, .side.crowd-4 .unit-card.tier-elite { width: 112px; }
.side.crowd-4 .uc-frame, .side.crowd-4 .tier-boss .uc-frame, .side.crowd-4 .tier-elite .uc-frame { height: 128px; }
.side.crowd-4 .uc-name small { display: none; }
.vs-mark { font-family: var(--f-sfx); font-size: 70px; color: var(--pink); -webkit-text-stroke: 3px var(--ink); text-shadow: 6px 6px 0 var(--ink); transform: rotate(-8deg); opacity: .8; }
.unit-card { width: 150px; position: relative; transition: transform .25s, opacity .4s, filter .4s; animation: idle 3s ease-in-out infinite; }
.unit-card:nth-child(2) { animation-delay: -.7s; } .unit-card:nth-child(3) { animation-delay: -1.4s; } .unit-card:nth-child(4) { animation-delay: -2.1s; }
@keyframes idle { 50% { transform: translateY(-5px); } }
.unit-card.tier-boss { width: 190px; } .unit-card.tier-elite { width: 170px; }
.uc-frame { position: relative; height: 170px; border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); overflow: hidden; background: var(--paper); cursor: help; }
.tier-boss .uc-frame { height: 216px; box-shadow: 0 0 0 3px var(--red), 7px 7px 0 var(--ink); } .tier-elite .uc-frame { height: 192px; box-shadow: 0 0 0 3px #8a1a2a, 6px 6px 0 var(--ink); }
.unit-card.enemy .uc-art svg { transform: scaleX(-1); }
.uc-art { width: 100%; height: 100%; }
.uc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; mix-blend-mode: normal; }
.unit-card.hit .uc-flash { animation: flash .3s; } .unit-card.hit .uc-frame { animation: hitShake .3s; }
@keyframes flash { 0% { opacity: .9; background: #fff; } 50% { opacity: .5; background: var(--red); } 100% { opacity: 0; } }
@keyframes hitShake { 25% { transform: translateX(-8px) rotate(-3deg); } 75% { transform: translateX(8px) rotate(2deg); } }
.uc-name { font-weight: 700; color: var(--paper); text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink); font-size: 15px; margin-top: 6px; line-height: 1.1; }
.uc-name small { display: block; font-family: var(--f-sfx); color: var(--gold); font-size: 13px; letter-spacing: .05em; font-weight: 400; }
.unit-card .hpbar { height: 16px; }
.energy-pips { display: flex; gap: 3px; margin-top: 4px; }
.pip { width: 16px; height: 10px; border: 2px solid var(--ink); background: rgba(0, 0, 0, .4); transform: skew(-15deg); transition: background .2s; }
.pip.on { background: var(--gold); box-shadow: 0 0 6px rgba(242, 193, 78, .7); }
.uc-status { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; min-height: 24px; }
.st-chip { position: relative; width: 24px; height: 24px; border: 2px solid var(--ink); background: var(--c); display: grid; place-items: center; cursor: help; animation: zoomIn .3s cubic-bezier(.2, 1.4, .4, 1); }
.st-chip.debuff { border-radius: 50%; } .st-chip.buff { transform: rotate(45deg) scale(.85); } .st-chip.buff .g, .st-chip.buff .n { transform: rotate(-45deg); }
.st-chip .g { font-family: var(--f-jp); font-weight: 900; font-size: 12px; color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.st-chip .n { position: absolute; bottom: -6px; right: -6px; background: var(--paper); border: 1.5px solid var(--ink); font-size: 9px; font-weight: 700; min-width: 14px; height: 14px; display: grid; place-items: center; border-radius: 7px; }
.unit-card.active .uc-frame { box-shadow: 0 0 0 4px var(--gold), 0 0 30px 6px rgba(242, 193, 78, .55), 6px 6px 0 var(--ink); }
.unit-card.active { transform: translateY(-10px) scale(1.04); z-index: 3; animation: none; }
.unit-card.lunge.party { animation: lungeR .4s; } .unit-card.lunge.enemy { animation: lungeL .4s; }
@keyframes lungeR { 40% { transform: translateX(40px) scale(1.08); } } @keyframes lungeL { 40% { transform: translateX(-40px) scale(1.08); } }
.unit-card.warp { animation: warp .7s; } @keyframes warp { 30% { transform: scale(.1) rotate(180deg); opacity: 0; } 70% { transform: scale(.1) rotate(360deg); opacity: 0; } }
.unit-card.dead { filter: grayscale(1) brightness(.6); transform: rotate(-6deg) translateY(10px); animation: none; }
.unit-card.dead .uc-frame::after { content: 'RETIRED'; position: absolute; top: 45%; left: -10%; right: -10%; text-align: center; background: var(--red); color: #fff; font-family: var(--f-title); transform: rotate(-18deg); border: 3px solid var(--ink); }
.unit-card.dying { animation: dying .7s forwards; } @keyframes dying { 40% { transform: scale(1.1) rotate(4deg); filter: brightness(2); } 100% { transform: rotate(-8deg) translateY(20px); filter: grayscale(1); } }
.unit-card.gone { opacity: 0; transform: translateY(40px) scale(.7); pointer-events: none; width: 0 !important; margin: 0 -8px; }
.unit-card.summoned { animation: summon .5s cubic-bezier(.2, 1.4, .4, 1); } @keyframes summon { from { transform: scale(0) rotate(-20deg); opacity: 0; } }
.battle.targeting .unit-card.targetable .uc-frame { box-shadow: 0 0 0 4px var(--pink), 6px 6px 0 var(--ink); cursor: crosshair; animation: tgt .8s infinite; }
.battle.targeting .unit-card:not(.targetable) { filter: brightness(.55); }
.unit-card.target-hover .uc-frame { box-shadow: 0 0 0 6px var(--gold), 0 0 26px rgba(242, 193, 78, .9), 6px 6px 0 var(--ink) !important; transform: scale(1.06); }
@keyframes tgt { 50% { box-shadow: 0 0 0 7px var(--pink), 6px 6px 0 var(--ink); } }
.uc-floats { position: absolute; top: 30%; left: 0; right: 0; pointer-events: none; z-index: 6; }
.float { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--f-sfx); font-size: 26px; color: #fff; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 3px 3px 0 var(--ink); white-space: nowrap; animation: floatUp 1.3s cubic-bezier(.2, 1.2, .4, 1) forwards; letter-spacing: .04em; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), 10px) scale(.5); } 15% { opacity: 1; transform: translate(calc(-50% + var(--dx, 0px)), -10px) scale(1.2); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -70px) scale(1); } }
.float.dmg { color: #fff; font-size: 34px; } .float.dmg.crit { color: var(--gold); font-size: 52px; } .float.dmg.blocked { color: #aab; } .float.dmg.dot { font-size: 24px; color: #ffb0c0; }
.float.critword { top: -30px; color: var(--pink); font-size: 22px; } .float.heal { color: #8affa0; font-size: 30px; }
.float.block, .float.miss { color: #c8d8ff; font-size: 22px; top: 30px; } .float.label { top: 36px; font-size: 18px; color: var(--gold); } .float.label.small { font-size: 14px; }
.float.st { font-family: var(--f-ui); font-weight: 700; font-size: 14px; top: 58px; -webkit-text-stroke: 0; text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink); }
.float.st.debuff, .float.debuff { color: #ff8aa0; } .float.st.buff, .float.buff { color: #8affd0; } .float.energy { color: var(--gold); font-size: 18px; top: 70px; } .float.big { font-size: 30px; }
.speech { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #fff; border: 3px solid var(--ink); padding: 6px 10px; font-size: 13px; font-weight: 700; width: max-content; max-width: 220px; z-index: 8; animation: zoomIn .3s cubic-bezier(.2, 1.4, .4, 1); box-shadow: var(--shadow-s); }
.speech::after { content: ''; position: absolute; top: 100%; left: 30%; border: 10px solid transparent; border-top-color: var(--ink); }
.act-banner { position: absolute; top: 90px; z-index: 7; pointer-events: none; animation: bannerIn .35s cubic-bezier(.2, 1.4, .4, 1); }
.act-banner.party { left: 4%; } .act-banner.enemy { right: 4%; }
.act-banner span { display: inline-block; background: var(--ink); color: var(--gold); font-family: var(--f-title); font-size: 26px; padding: 6px 22px; transform: skew(-12deg); box-shadow: 5px 5px 0 var(--pink); }
.act-banner.enemy span { color: #fff; box-shadow: 5px 5px 0 var(--red); }
.act-banner.out { animation: bannerOut .4s forwards; }
@keyframes bannerIn { from { transform: translateX(-60px); opacity: 0; } } @keyframes bannerOut { to { transform: translateY(-20px); opacity: 0; } }
.big-banner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 20; pointer-events: none; background: linear-gradient(transparent 38%, rgba(20, 10, 30, .85) 38% 62%, transparent 62%); animation: fadeIn .2s; }
.big-banner.out { animation: fadeOut .4s forwards; }
.bb-text { font-family: var(--f-sfx); font-size: clamp(50px, 9vw, 110px); color: var(--gold); -webkit-text-stroke: 3px var(--ink); text-shadow: 7px 7px 0 var(--ink); transform: rotate(-3deg); animation: zoomIn .5s cubic-bezier(.2, 1.4, .4, 1); letter-spacing: .05em; }
.bb-sub { color: var(--paper); font-size: 20px; letter-spacing: .2em; text-transform: uppercase; }
.proj { position: absolute; width: 18px; height: 18px; z-index: 81; }
.proj-nail { width: 22px; height: 22px; background: conic-gradient(var(--violet) 0 25%, #fff 0 50%, var(--violet) 0 75%, #fff 0); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 6px #c8a0ff); }
.proj-ball { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #b8b8c8 40%, #6a6a7a); border: 3px solid var(--ink); box-shadow: 0 0 14px var(--teal), -20px 0 20px -6px rgba(63, 184, 169, .7); }
.proj-bullet { width: 12px; height: 12px; border-radius: 50%; background: #fff3a0; box-shadow: 0 0 12px 4px #ffb040; }
.proj-golden { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, #fff, #ffd84a 50%, #e8a020); box-shadow: 0 0 30px 10px rgba(255, 216, 74, .8); border: 3px solid var(--ink); }
.proj-spray { width: 26px; height: 26px; border-radius: 40% 60% 50% 50%; background: var(--pink); border: 2px solid var(--ink); }
.proj-rope { width: 30px; height: 6px; background: #c8a070; border: 2px solid var(--ink); border-radius: 3px; }
.burst { position: absolute; width: 140px; height: 140px; transform: translate(-50%, -50%); pointer-events: none; z-index: 82; }
.burst-hit { background: radial-gradient(circle, #fff 0 15%, transparent 16%), conic-gradient(from 0deg, #fff 0 5deg, transparent 5deg 30deg, #fff 30deg 35deg, transparent 35deg 60deg, #fff 60deg 65deg, transparent 65deg 90deg, #fff 90deg 95deg, transparent 95deg 120deg, #fff 120deg 125deg, transparent 125deg 150deg, #fff 150deg 155deg, transparent 155deg 180deg, #fff 180deg 185deg, transparent 185deg 210deg, #fff 210deg 215deg, transparent 215deg 240deg, #fff 240deg 245deg, transparent 245deg 270deg, #fff 270deg 275deg, transparent 275deg 300deg, #fff 300deg 305deg, transparent 305deg 330deg, #fff 330deg 335deg, transparent 335deg); border-radius: 50%; animation: burst .45s ease-out forwards; }
.burst-crit { width: 260px; height: 260px; background: conic-gradient(from 10deg, var(--gold) 0 8deg, transparent 8deg 22deg, var(--pink) 22deg 30deg, transparent 30deg 45deg, var(--gold) 45deg 53deg, transparent 53deg 68deg, #fff 68deg 76deg, transparent 76deg 90deg, var(--gold) 90deg 98deg, transparent 98deg 113deg, var(--pink) 113deg 121deg, transparent 121deg 136deg, var(--gold) 136deg 144deg, transparent 144deg 159deg, #fff 159deg 167deg, transparent 167deg 180deg, var(--gold) 180deg 188deg, transparent 188deg 203deg, var(--pink) 203deg 211deg, transparent 211deg 226deg, var(--gold) 226deg 234deg, transparent 234deg 249deg, #fff 249deg 257deg, transparent 257deg 270deg, var(--gold) 270deg 278deg, transparent 278deg 293deg, var(--pink) 293deg 301deg, transparent 301deg 316deg, var(--gold) 316deg 324deg, transparent 324deg 339deg, #fff 339deg 347deg, transparent 347deg); border-radius: 50%; animation: burst .6s ease-out forwards; }
.burst-claw { background: linear-gradient(120deg, transparent 30%, #fff 31% 34%, transparent 35% 45%, #fff 46% 49%, transparent 50% 60%, #fff 61% 64%, transparent 65%); animation: claw .4s ease-out forwards; }
.burst-heal { background: radial-gradient(circle, rgba(138, 255, 160, .8) 0 20%, transparent 60%); border-radius: 50%; animation: healB .8s ease-out forwards; }
.burst-heal::after { content: '✚ ✚ ✚'; position: absolute; inset: 0; display: grid; place-items: center; color: #8affa0; font-size: 22px; animation: rise .8s ease-out forwards; text-shadow: 2px 2px 0 var(--ink); }
.burst-buff { border: 5px solid var(--gold); border-radius: 50%; animation: ring .6s ease-out forwards; }
.burst-debuff { border: 5px solid #b070ff; border-radius: 50%; animation: ringIn .6s ease-out forwards; }
.burst-scan { background: repeating-linear-gradient(0deg, rgba(63, 184, 169, .6) 0 3px, transparent 3px 8px); border: 3px solid var(--teal); animation: scan .7s ease-out forwards; }
.burst-boom { width: 220px; height: 220px; background: radial-gradient(circle, #fff 0 10%, #ffd84a 11% 30%, #e8742a 31% 50%, rgba(200, 50, 60, .6) 51% 65%, transparent 66%); border-radius: 50%; animation: burst .6s ease-out forwards; }
.burst-sound { width: 200px; height: 200px; border: 6px solid var(--pink); border-radius: 50%; animation: ring .6s ease-out forwards; }
@keyframes burst { from { transform: translate(-50%, -50%) scale(.2) rotate(0); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.3) rotate(30deg); opacity: 0; } }
@keyframes claw { from { transform: translate(-50%, -50%) scale(.4); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.2); opacity: 0; } }
@keyframes healB { from { transform: translate(-50%, -50%) scale(.4); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.3); opacity: 0; } }
@keyframes rise { to { transform: translateY(-40px); opacity: 0; } }
@keyframes ring { from { transform: translate(-50%, -50%) scale(.2); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
@keyframes ringIn { from { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } 50% { opacity: 1; } to { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }
@keyframes scan { from { transform: translate(-50%, -50%) scaleY(.1); opacity: 1; } 60% { transform: translate(-50%, -50%) scaleY(1); } to { opacity: 0; transform: translate(-50%, -50%) scaleY(1); } }
.bigfx { position: absolute; inset: 0; z-index: 15; pointer-events: none; display: grid; place-items: center; background: radial-gradient(circle, rgba(255, 216, 74, .35), rgba(20, 10, 30, .6)); animation: fadeIn .2s; }
.bigfx .sigil { width: 60vmin; height: 60vmin; animation: spinBig .8s ease-out; filter: drop-shadow(0 0 30px #ffd84a); }
.bigfx.out { animation: fadeOut .5s forwards; }
.bigfx-act4 { background: radial-gradient(circle, rgba(255, 240, 160, .7), rgba(90, 40, 140, .7)); }
@keyframes spinBig { from { transform: rotate(-360deg) scale(.2); } to { transform: rotate(0) scale(1); } }

/* action panel */
.action-panel { position: absolute; left: 50%; bottom: 14px; width: max-content; transform: translate(-50%, 140%); z-index: 12; background: var(--paper); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); padding: 12px 14px; display: flex; gap: 14px; align-items: center; transition: transform .3s cubic-bezier(.2, 1.3, .4, 1); max-width: 96vw; }
.action-panel.show { transform: translate(-50%, 0); }
.ap-head { display: flex; gap: 10px; align-items: center; }
.ap-port { width: 64px; height: 76px; border: 3px solid var(--ink); overflow: hidden; }
.ap-name { font-family: var(--f-title); font-size: 18px; line-height: 1; margin-bottom: 4px; white-space: nowrap; }
.ap-energy { display: flex; gap: 3px; align-items: center; } .ap-energy small { margin-left: 6px; font-weight: 700; font-size: 12px; }
.ap-abilities { display: flex; gap: 8px; flex-wrap: nowrap; }
@media (max-width: 1000px) { .ap-abilities { flex-wrap: wrap; } }
.ab-btn { position: relative; min-width: 100px; max-width: 128px; min-height: 64px; border: 3px solid var(--ink); background: #fff; cursor: pointer; padding: 6px 8px 6px 8px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-s); transition: transform .12s, background .12s; font-family: var(--f-ui); }
.ab-btn:hover { transform: translateY(-4px); background: #fff3c0; }
.ab-btn.selected { background: var(--gold); transform: translateY(-6px); }
.ab-btn.spin { border-left: 8px solid var(--teal); } .ab-btn.pierce { background: linear-gradient(135deg, #fff8d0, #ffe08a); }
.ab-btn.disabled { opacity: .4; cursor: not-allowed; transform: none; filter: grayscale(.7); }
.ab-key { position: absolute; top: -10px; left: -10px; width: 22px; height: 22px; background: var(--ink); color: var(--gold); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.ab-name { font-weight: 700; font-size: 13px; line-height: 1.1; }
.ab-costs { display: flex; gap: 3px; margin-top: 4px; } .ab-costs i { width: 12px; height: 12px; background: var(--violet); border: 2px solid var(--ink); transform: rotate(45deg); } .ab-costs em { font-size: 11px; font-weight: 700; color: var(--teal); font-style: normal; }
.ab-cd { position: absolute; inset: 0; background: rgba(26, 16, 32, .7); color: var(--paper); display: grid; place-items: center; font-family: var(--f-sfx); font-size: 34px; }
.ap-extra { display: flex; flex-direction: column; gap: 6px; }
.btn-brace, .btn-items { font-size: 13px; padding: 8px 12px; white-space: nowrap; }
.btn-brace b, .btn-items b { background: var(--ink); color: var(--gold); padding: 0 5px; margin-right: 4px; }
.item-tray { position: absolute; bottom: 105%; right: 0; background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow-s); padding: 10px; display: flex; gap: 8px; animation: zoomIn .25s; }
.tray-x { border: 2px solid var(--ink); background: var(--pink); color: #fff; cursor: pointer; }
.target-hint { position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%); background: var(--pink); color: #fff; border: 3px solid var(--ink); padding: 4px 14px; font-weight: 700; white-space: nowrap; animation: blink 1.2s infinite; }
.log-toggle { position: absolute; right: 16px; bottom: 16px; z-index: 13; border: 3px solid var(--ink); background: var(--paper); font-weight: 700; padding: 6px 10px; cursor: pointer; box-shadow: var(--shadow-s); }
.battle-log { position: absolute; right: 16px; bottom: 60px; width: 300px; max-height: 0; overflow: auto; background: rgba(246, 236, 216, .96); border: 3px solid var(--ink); z-index: 13; font-size: 12px; transition: max-height .3s; opacity: 0; }
.battle-log.open { max-height: 50vh; opacity: 1; padding: 8px; }
.log-line { padding: 2px 0; border-bottom: 1px dashed rgba(26, 16, 32, .2); } .log-line.dmg { color: var(--red); } .log-line.death { font-weight: 700; } .log-line.boss { color: var(--purple); font-weight: 700; }

/* boss intro */
.boss-intro { position: absolute; inset: 0; z-index: 70; overflow: hidden; background: #140a1e; cursor: pointer; opacity: 0; transition: opacity .25s; }
.boss-intro.show { opacity: 1; } .boss-intro.out { opacity: 0; transition: opacity .4s; }
.bi-slash { position: absolute; inset: 0; }
.bi-slash-a { background: repeating-linear-gradient(115deg, #2a1040 0 30px, #1a0a2a 30px 60px); clip-path: polygon(0 0, 62% 0, 42% 100%, 0 100%); animation: slashA .5s cubic-bezier(.7, 0, .3, 1); }
.bi-slash-b { background: linear-gradient(135deg, var(--red), #6a1a3a); clip-path: polygon(62% 0, 100% 0, 100% 100%, 42% 100%); animation: slashB .5s cubic-bezier(.7, 0, .3, 1); }
@keyframes slashA { from { transform: translateX(-100%); } } @keyframes slashB { from { transform: translateX(100%); } }
.bi-sigil { position: absolute; right: 6%; top: 50%; width: 46vmin; height: 46vmin; transform: translateY(-50%); opacity: .35; animation: sigilSpin 20s linear infinite; }
.bi-sigil .sigil { width: 100%; height: 100%; }
@keyframes sigilSpin { to { transform: translateY(-50%) rotate(360deg); } }
.bi-portrait { position: absolute; left: 8%; top: 50%; width: min(34vw, 380px); height: min(40.8vw, 456px); transform: translateY(-50%) rotate(-4deg); border: 6px solid var(--ink); box-shadow: 14px 14px 0 var(--ink), 0 0 0 4px var(--gold); overflow: hidden; animation: biPort .6s .15s cubic-bezier(.2, 1.3, .4, 1) both; }
.bi-portrait svg { transform: scaleX(-1); }
@keyframes biPort { from { transform: translateY(-50%) translateX(-120%) rotate(-20deg); } }
.bi-text { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); width: min(48vw, 560px); color: var(--paper); z-index: 4; }
.bi-kicker { display: inline-block; background: var(--gold); color: var(--ink); font-weight: 700; letter-spacing: .4em; padding: 2px 14px; transform: skew(-12deg); animation: slideDown .4s .3s both; }
.bi-name { font-family: var(--f-title); font-size: clamp(36px, 5.4vw, 70px); line-height: 1; text-shadow: 6px 6px 0 var(--ink); margin-top: 8px; animation: zoomIn .5s .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.bi-title { font-size: 18px; letter-spacing: .15em; text-transform: uppercase; opacity: .85; margin-top: 4px; }
.bi-stand { font-family: var(--f-sfx); font-size: clamp(26px, 3.6vw, 44px); color: var(--gold); -webkit-text-stroke: 1.5px var(--ink); text-shadow: 4px 4px 0 var(--ink); margin-top: 10px; animation: bannerIn .5s .55s both; letter-spacing: .04em; }
.bi-stand span { font-family: var(--f-ui); font-size: 14px; background: var(--pink); color: #fff; -webkit-text-stroke: 0; padding: 2px 8px; vertical-align: middle; margin-right: 8px; letter-spacing: .2em; text-shadow: none; }
.bi-quote { font-size: 19px; font-style: italic; margin-top: 12px; animation: fadeIn .6s .8s both; opacity: 0; line-height: 1.4; }
.bi-passive { margin-top: 12px; font-size: 14px; background: rgba(0, 0, 0, .45); border-left: 5px solid var(--gold); padding: 8px 12px; animation: fadeIn .6s 1s both; opacity: 0; line-height: 1.4; }
.bi-hint { margin-top: 16px; opacity: 0; font-weight: 700; letter-spacing: .2em; } .bi-hint.show { animation: blink 1s infinite; opacity: 1; }

/* ============ SPRINT ============ */
.sprint { position: absolute; inset: 0; z-index: 65; background: var(--ink); opacity: 0; transition: opacity .3s; user-select: none; }
.sprint.show { opacity: 1; }
.sprint-scene { position: absolute; inset: 0; }
.sprint-scene .px-layer { animation-duration: 4s; }
.sprint.golden .sprint-scene { filter: brightness(1.3) saturate(1.5); }
.sprint-head { position: absolute; top: 14px; left: 0; right: 0; text-align: center; z-index: 5; color: var(--paper); }
.sprint-name { display: inline-block; font-family: var(--f-title); font-size: clamp(20px, 3vw, 32px); background: var(--ink); padding: 4px 20px; transform: skew(-10deg); box-shadow: 5px 5px 0 var(--pink); }
.sprint-sub { margin-top: 8px; font-size: 15px; text-shadow: 2px 2px 0 var(--ink); } .sprint-sub .gold { color: var(--gold); font-weight: 700; }
.sprint-track { position: absolute; left: 0; right: 0; top: 40%; height: 46%; overflow: hidden; }
.runner { position: absolute; left: 0; width: 150px; height: 112px; transition: none; will-change: transform; transform-origin: 50% 100%; }
.runner .horse-svg .horse-body, .runner .horse-svg .leg, .runner .horse-svg .tail { animation-duration: .3s; }
.runner.boosting .horse-svg { filter: drop-shadow(0 0 12px var(--gold)); }
.runner.boosting::before { content: ''; position: absolute; left: -60px; top: 40%; width: 80px; height: 30px; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255, 255, 255, .7) 4px 6px); opacity: .7; }
.runner-tag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--paper); border: 2px solid var(--ink); font-size: 11px; font-weight: 700; padding: 0 6px; white-space: nowrap; z-index: 2; }
.runner.me .runner-tag { background: var(--gold); font-size: 13px; }
.finish-line { position: absolute; top: 0; bottom: 0; left: 0; width: 22px; background: repeating-linear-gradient(0deg, #fff 0 18px, var(--ink) 18px 36px); border: 3px solid var(--ink); }
.finish-line span { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); font-family: var(--f-sfx); color: var(--gold); font-size: 30px; -webkit-text-stroke: 1.5px var(--ink); }
.sprint-progress { position: absolute; left: 20%; right: 20%; top: 118px; height: 10px; background: rgba(0, 0, 0, .5); border: 3px solid var(--paper); z-index: 5; }
.sp-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #aaa; border: 2px solid var(--ink); transform: translate(-50%, -50%); }
.sp-dot.me { background: var(--gold); width: 18px; height: 18px; z-index: 2; }
.sprint-ring { position: absolute; right: 3%; bottom: 3%; width: 180px; height: 180px; z-index: 30; cursor: pointer; }
.sprint-ring svg { width: 100%; height: 100%; filter: drop-shadow(5px 5px 0 var(--ink)); }
.ring-feedback { position: absolute; left: 50%; top: -24px; transform: translateX(-50%) scale(.5); font-family: var(--f-sfx); font-size: 34px; opacity: 0; white-space: nowrap; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 3px 3px 0 var(--ink); transition: all .15s; }
.ring-feedback.show { opacity: 1; transform: translateX(-50%) scale(1) rotate(-6deg); }
.ring-feedback.gold { color: var(--gold); } .ring-feedback.good { color: #c8b8ff; } .ring-feedback.bad { color: var(--red); }
.ring-combo { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-sfx); font-size: 30px; color: var(--gold); padding-top: 70px; -webkit-text-stroke: 1px var(--ink); pointer-events: none; }
.sprint-stamina { position: absolute; left: 3%; bottom: 5%; z-index: 6; color: var(--paper); font-weight: 700; letter-spacing: .15em; font-size: 12px; }
.stam-bar { width: 200px; height: 16px; border: 3px solid var(--paper); margin-top: 4px; background: rgba(0, 0, 0, .5); } .stam-bar div { height: 100%; background: linear-gradient(90deg, var(--red), var(--gold), var(--green)); transition: width .1s; }
.sprint-count { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-sfx); font-size: 160px; color: var(--gold); -webkit-text-stroke: 4px var(--ink); text-shadow: 10px 10px 0 var(--ink); pointer-events: none; z-index: 7; }
.sprint-count.pop { animation: zoomIn .5s cubic-bezier(.2, 1.4, .4, 1); }
.sprint-results { position: absolute; inset: 0; z-index: 9; background: rgba(20, 10, 30, .85); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; animation: fadeIn .3s; }
.sr-title { font-family: var(--f-sfx); font-size: clamp(48px, 8vw, 96px); color: var(--gold); -webkit-text-stroke: 3px var(--ink); text-shadow: 7px 7px 0 var(--ink); animation: zoomIn .6s cubic-bezier(.2, 1.4, .4, 1); letter-spacing: .05em; }
.podium { width: min(480px, 92vw); display: flex; flex-direction: column; gap: 6px; }
.pod-row { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 3px solid var(--ink); padding: 4px 10px; font-weight: 700; animation: slideIn .4s both; box-shadow: var(--shadow-s); }
.pod-row.me { background: var(--gold); transform: scale(1.04); }
.pod-pos { font-family: var(--f-title); font-size: 22px; width: 28px; } .pod-port { width: 34px; height: 40px; border: 2px solid var(--ink); overflow: hidden; } .pod-name { flex: 1; } .pod-pts { color: var(--purple); }

/* ============ LOBBY / SETUP / END ============ */
.lobby-scene { position: absolute; inset: 0; filter: brightness(.5) blur(1px); }
.lobby, .setup { position: absolute; inset: 20px; max-width: 1200px; margin: 0 auto; background: var(--paper); border: 5px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); display: flex; flex-direction: column; padding: 18px 22px; background-image: radial-gradient(rgba(26, 16, 32, .07) 1px, transparent 1.4px); background-size: 7px 7px; animation: zoomIn .4s cubic-bezier(.2, 1.3, .4, 1); }
.setup { overflow: auto; }
.lobby-head { display: flex; justify-content: space-between; align-items: center; }
.lh-title { font-family: var(--f-title); font-size: 34px; }
.lh-rp { display: flex; align-items: center; gap: 8px; font-size: 22px; background: var(--gold); border: 3px solid var(--ink); padding: 4px 14px; box-shadow: var(--shadow-s); }
.lobby-tabs { display: flex; gap: 6px; margin: 12px 0; border-bottom: 4px solid var(--ink); }
.lobby-tab { border: 3px solid var(--ink); border-bottom: none; background: #e8d8c0; font-weight: 700; font-size: 15px; padding: 8px 18px; cursor: pointer; letter-spacing: .06em; text-transform: uppercase; transform: translateY(4px); }
.lobby-tab.active { background: var(--ink); color: var(--gold); }
.lobby-body { flex: 1; overflow: auto; padding-right: 6px; }
.lobby-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.lobby-foot .btn-ghost { color: var(--ink); border-color: var(--ink); }
.tech-slots { display: flex; gap: 8px; margin-bottom: 12px; }
.tslot { width: 28px; height: 28px; border: 3px solid var(--ink); transform: rotate(45deg); background: #fff; } .tslot.on { background: var(--violet); }
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.tech-card { border: 3px solid var(--ink); background: #fff; padding: 12px; box-shadow: var(--shadow-s); display: flex; flex-direction: column; gap: 6px; transition: transform .15s; }
.tech-card:hover { transform: translateY(-3px); } .tech-card.equipped { background: #fff3c0; box-shadow: 0 0 0 3px var(--gold), var(--shadow-s); } .tech-card.locked { opacity: .55; }
.tc-slots { color: var(--violet); letter-spacing: 2px; } .tc-name { font-family: var(--f-title); font-size: 18px; } .tc-desc { font-size: 13px; flex: 1; } .tc-unlock { font-size: 12px; opacity: .8; }
.horse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.horse-card { border: 3px solid var(--ink); background: #fff; padding: 10px; box-shadow: var(--shadow-s); cursor: pointer; transition: transform .15s; }
.horse-card:hover { transform: translateY(-4px) rotate(-1deg); } .horse-card.selected { background: #fff3c0; box-shadow: 0 0 0 4px var(--gold), 6px 6px 0 var(--ink); transform: translateY(-4px); }
.horse-card.locked { cursor: default; opacity: .65; } .horse-card.locked:hover { transform: none; }
.hc-art { height: 120px; background: linear-gradient(180deg, #9ec3ef, #f6c27a 70%, #e8b36a 70%); border: 2px solid var(--ink); }
.hc-name { font-family: var(--f-title); font-size: 20px; margin-top: 6px; } .hc-breed { font-size: 12px; opacity: .7; text-transform: uppercase; letter-spacing: .1em; }
.hc-bars { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; align-items: center; font-size: 11px; font-weight: 700; margin: 6px 0; }
.hc-bars .bar { height: 8px; border: 2px solid var(--ink); } .hc-bars .bar div { height: 100%; background: var(--orange); }
.hc-perk { font-size: 13px; }
.starter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.starter-card { display: flex; gap: 12px; align-items: center; border: 3px solid var(--ink); background: #fff; padding: 10px; cursor: pointer; transition: transform .15s; }
.starter-card p { margin: 2px 0 0; font-size: 13px; } .starter-card:hover { transform: translateX(4px); } .starter-card.selected { background: #fff3c0; box-shadow: 0 0 0 3px var(--gold); } .starter-card.locked { opacity: .5; cursor: default; }
.setup-head { display: flex; gap: 16px; align-items: center; } .setup-port { width: 80px; height: 96px; border: 3px solid var(--ink); overflow: hidden; box-shadow: var(--shadow-s); flex-shrink: 0; }
.achv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.achv { display: flex; gap: 10px; align-items: center; border: 3px solid var(--ink); background: #fff; padding: 8px 10px; opacity: .55; }
.achv.got { opacity: 1; background: #fff3c0; } .achv p { margin: 2px 0 0; font-size: 13px; } .achv > div { flex: 1; } .achv-rp { font-weight: 700; color: var(--purple); }
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.comp-card { border: 3px solid var(--ink); background: #fff; padding: 4px; text-align: center; font-size: 12px; cursor: help; }
.comp-card svg { height: 100px; border: 2px solid var(--ink); } .comp-card.locked { opacity: .45; } .comp-card.tier-boss { box-shadow: 0 0 0 2px var(--red); }
.comp-q { height: 100px; display: grid; place-items: center; font-family: var(--f-sfx); font-size: 48px; background: #3a2a40; color: var(--paper); border: 2px solid var(--ink); }
.status-glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.sgl { display: flex; gap: 10px; align-items: flex-start; } .sgl p { margin: 2px 0 0; font-size: 12px; } .sgl .st-chip { flex-shrink: 0; margin-top: 4px; }
.screen-end .end-scene { position: absolute; inset: 0; filter: brightness(.45); }
.screen-end.lose .end-scene { filter: grayscale(.8) brightness(.4); }
.end-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(600px, 92vw); background: var(--paper); border: 5px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); padding: 28px; text-align: center; animation: zoomIn .5s cubic-bezier(.2, 1.3, .4, 1); z-index: 4; }
.end-kicker { display: inline-block; background: var(--ink); color: var(--gold); padding: 3px 16px; letter-spacing: .3em; font-weight: 700; transform: skew(-10deg); }
.end-box h1 { font-family: var(--f-title); font-size: 38px; margin: 12px 0; }
.end-rp { font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.standings-screen .ss-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 18px; }
.ss-place { font-family: var(--f-sfx); font-size: 48px; color: var(--gold); -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--ink); }
.standings-screen .btn-primary { margin-top: 14px; width: 100%; }

/* ============ ENCOUNTER ENTRANCE (bigger cards) ============ */
.card-deck { top: 56%; gap: 28px; }
.stage-title { top: 66px; }
.stage-title h1 { font-size: clamp(22px, 3.2vw, 40px); }
.enc-card { width: 250px; height: 372px; opacity: 0; transform: none; transition: box-shadow .15s; --rx: 0deg; --ry: 0deg; transform-style: preserve-3d; }
.enc-card.from-left { transform: translate(-120vw, -40px) rotate(-50deg) scale(1.4); }
.enc-card.from-right { transform: translate(120vw, -40px) rotate(50deg) scale(1.4); }
.enc-card.from-top { transform: translateY(-130vh) rotate(-8deg) scale(1.6); }
.enc-card.flying { opacity: 1; transition: transform .3s cubic-bezier(.55, 0, .8, .25), opacity .08s; transform: none; }
.enc-card.landed, .enc-card.dealt:nth-child(1), .enc-card.dealt:nth-child(3) { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .12s, box-shadow .15s; }
.enc-card.landed { animation: cardLand .38s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes cardLand { 0% { scale: 1.14; } 35% { scale: .93 1.05; translate: 0 8px; } 100% { scale: 1; translate: 0 0; } }
.enc-card.dealt:hover, .enc-card.dealt:focus { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-14px) scale(1.05); box-shadow: 14px 18px 0 var(--ink); }
.enc-card.picked { transform: perspective(900px) translateY(-40px) scale(1.14) !important; }
.enc-card .enc-art { height: 188px; }
.enc-card .enc-title { font-size: 22px; } .enc-card .enc-blurb { font-size: 14px; }
.enc-card.type-story { width: 290px; height: 420px; } .enc-card.type-story .enc-art { height: 220px; }
.enc-card.type-boss { width: 320px; height: 460px; } .enc-card.type-boss .enc-art { height: 250px; } .enc-card.type-boss .enc-title { font-size: 28px; }
.enc-gloss { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .45), transparent 45%); mix-blend-mode: soft-light; }
.enc-card:hover .enc-gloss { opacity: 1; }
.screen-stage.intro-running .stage-title, .screen-stage.intro-running .stage-actions { opacity: 0; }
.stage-title, .stage-actions { transition: opacity .3s; }
.enc-intro { position: absolute; inset: 0; z-index: 20; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.enc-intro::before { content: ''; position: absolute; inset: 0; background: rgba(20, 10, 30, .55); animation: fadeIn .2s; }
.ei-band { position: relative; width: 140%; height: 170px; display: grid; place-items: center; transform: rotate(-6deg) scaleX(0); animation: bandIn .32s cubic-bezier(.7, 0, .2, 1) forwards; background: repeating-linear-gradient(115deg, #1a1020 0 26px, #2a1a38 26px 52px); box-shadow: 0 -8px 0 var(--gold), 0 8px 0 var(--gold), 0 -16px 0 var(--ink), 0 16px 0 var(--ink); }
.enc-intro.boss .ei-band { background: repeating-linear-gradient(115deg, #5a0a1a 0 26px, #8a1a2a 26px 52px); box-shadow: 0 -8px 0 var(--red), 0 8px 0 var(--red), 0 -16px 0 var(--ink), 0 16px 0 var(--ink); height: 200px; }
.enc-intro.story .ei-band { box-shadow: 0 -8px 0 var(--pink), 0 8px 0 var(--pink), 0 -16px 0 var(--ink), 0 16px 0 var(--ink); }
.ei-lines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(255, 255, 255, .12) 12px 14px); animation: eiLines .4s linear infinite; }
@keyframes eiLines { to { background-position: 0 -28px; } }
@keyframes bandIn { to { transform: rotate(-6deg) scaleX(1); } }
.ei-text { font-family: var(--f-sfx); font-size: clamp(56px, 10vw, 120px); color: var(--gold); -webkit-text-stroke: 3px var(--ink); text-shadow: 8px 8px 0 var(--ink); letter-spacing: .06em; animation: textSlam .45s .15s cubic-bezier(.2, 1.6, .4, 1) both; }
.enc-intro.boss .ei-text { color: #fff; text-shadow: 8px 8px 0 var(--ink), 0 0 30px var(--red); }
.enc-intro.story .ei-text { color: var(--pink); }
.ei-kana { position: absolute; right: 18%; top: -30px; font-family: var(--f-jp); font-weight: 900; font-size: 64px; color: #b070ff; -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--ink); transform: rotate(8deg); animation: textSlam .4s .3s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes textSlam { from { transform: scale(3) rotate(-10deg); opacity: 0; } to { opacity: 1; } }
.enc-intro.out { animation: fadeOut .35s forwards; }
.enc-intro.out .ei-band { transform: rotate(-6deg) scaleX(1); animation: bandOut .35s cubic-bezier(.7, 0, .2, 1) forwards; }
@keyframes bandOut { to { transform: rotate(-6deg) translateX(120%) scaleX(1); } }

/* ============ DRAWN ICONS ============ */
svg.gi { width: 100%; height: 100%; display: block; overflow: visible; }
.icon-chip { position: relative; width: 50px; height: 50px; border: 3px solid var(--ink); background: radial-gradient(circle at 35% 30%, #fffaf0, #e8dcc0); box-shadow: var(--shadow-s); padding: 4px; flex-shrink: 0; cursor: help; transition: transform .12s; }
.icon-chip:hover { transform: translateY(-3px) rotate(-3deg); }
.icon-chip.item { border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 35% 30%, #fff, #d8e8f0); }
.icon-chip.relic { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border: none; box-shadow: none; background: var(--ink); padding: 3px; }
.icon-chip.relic svg { background: radial-gradient(circle at 35% 30%, #fffaf0, #e0d0b0); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); padding: 5px; }
.icon-chip.relic.rarity-rare svg { background: radial-gradient(circle, #fff8d0, #f2c14e); }
.icon-chip.relic.rarity-corpse svg { background: radial-gradient(circle, #fffbe8, #f0e0a8); animation: holy 2s ease-in-out infinite; }
.icon-chip.relic.rarity-starter svg { background: radial-gradient(circle, #fff, #d8d0f0); }
.icon-chip.mat { width: 44px; height: 44px; border-radius: 8px; }
.icon-chip.rarity-uncommon { background: radial-gradient(circle at 35% 30%, #fff, #c8ecd0); }
.icon-chip.rarity-rare { background: radial-gradient(circle at 35% 30%, #fff, #c8d8ff); border-color: #2a3a8a; }
.icon-chip.rarity-remnant { background: radial-gradient(circle at 50% 40%, #fff, #e0c8ff); box-shadow: 0 0 0 2px var(--gold), var(--shadow-s); animation: remnantGlow 2s ease-in-out infinite; }
@keyframes remnantGlow { 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 14px var(--gold), var(--shadow-s); } }
.icon-chip.equip { border-radius: 4px 14px 4px 14px; }
.icon-chip.equip.rarity-common { background: radial-gradient(circle at 35% 30%, #fff, #e8dcc0); }
.chip-n { position: absolute; right: -8px; bottom: -8px; min-width: 22px; height: 22px; padding: 0 4px; background: var(--ink); color: var(--gold); border-radius: 11px; font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.icon-chip.pop, .icon-chip.drop-in { animation: dropIn .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes dropIn { from { transform: translateY(-40px) scale(.2) rotate(-30deg); opacity: 0; } }
.toast-ico { width: 34px; height: 34px; flex-shrink: 0; display: block; }
.st-chip { width: 30px; height: 30px; padding: 2px; background: #fff; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.uc-status { gap: 5px; }
.st-chip.debuff { background: radial-gradient(circle, #fff 40%, #ffb8c8); }
.st-chip.buff { transform: none; border-radius: 6px; background: radial-gradient(circle, #fff 40%, #a8f0d0); }
.st-chip svg { width: 100%; height: 100%; }
.tip-st { display: inline-block; width: 22px; height: 22px; vertical-align: middle; margin-right: 4px; }
.tip-ab { display: flex; gap: 10px; align-items: flex-start; } .tip-ab > svg { width: 44px; height: 44px; flex-shrink: 0; border: 2px solid var(--ink); background: #fff; padding: 3px; }
.ab-btn { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.ab-icon { width: 34px; height: 34px; flex-shrink: 0; border: 2px solid var(--ink); background: radial-gradient(circle at 35% 30%, #fff, #e8dcc0); padding: 2px; border-radius: 50%; }
.ab-btn .ab-name { flex: 1; min-width: 60px; }
.ab-btn .ab-costs { width: 100%; }
.ab-btn.spin .ab-icon { background: radial-gradient(circle, #fff, #b8ece4); } .ab-btn.pierce .ab-icon { background: radial-gradient(circle, #fff, #ffe08a); box-shadow: 0 0 8px var(--gold); }
.ab-ico { display: inline-block; width: 26px; height: 26px; vertical-align: middle; margin-right: 6px; }
.fx-canvas { position: absolute; inset: 0; pointer-events: none; }
.fx-flash { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }

/* ============ EQUIPMENT & CRAFTING ============ */
.eq-slots { display: flex; gap: 10px; margin-bottom: 6px; }
.eq-slot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 3px dashed rgba(26, 16, 32, .5); background: rgba(255, 255, 255, .6); padding: 8px 6px; cursor: pointer; font-family: var(--f-ui); transition: transform .12s; }
.eq-slot:hover { transform: translateY(-3px); background: #fff3c0; }
.eq-slot svg { width: 46px; height: 46px; }
.eq-slot.filled { border-style: solid; background: #fff; box-shadow: var(--shadow-s); }
.eq-slot.rarity-remnant { box-shadow: 0 0 0 2px var(--gold), var(--shadow-s); }
.eq-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.eq-empty { width: 46px; height: 46px; display: grid; place-items: center; font-size: 26px; opacity: .35; }
.eq-name { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.1; }
.eq-choice .pt-port { border: none; }
.eq-choice.rarity-remnant { border-color: #8a5ad0; background: #faf4ff; }
.bag-grid, .mat-grid { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 8px 10px 0; }
.craft-screen { display: flex; flex-direction: column; gap: 10px; min-height: 520px; }
.craft-inv { background: rgba(255, 255, 255, .5); border: 3px solid var(--ink); padding: 4px 12px 8px; }
.craft-tabs { display: flex; gap: 6px; border-bottom: 4px solid var(--ink); }
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.recipe { display: grid; grid-template-columns: 64px 1fr; grid-template-areas: 'icon body' 'ing ing' 'btn btn'; gap: 8px 12px; border: 3px solid var(--ink); background: #fff; padding: 10px; box-shadow: var(--shadow-s); position: relative; transition: transform .15s; }
.recipe:hover { transform: translateY(-3px); }
.recipe.ready { background: #fffbe6; box-shadow: 0 0 0 3px var(--gold), var(--shadow-s); }
.recipe.ready::after { content: 'READY'; position: absolute; top: -10px; right: 10px; background: var(--gold); border: 2px solid var(--ink); font-size: 11px; font-weight: 700; padding: 0 6px; }
.recipe.rarity-remnant { border-color: #5b3a8c; }
.recipe.unknown .rc-icon svg { filter: brightness(0) opacity(.45); }
.rc-icon { grid-area: icon; width: 64px; height: 64px; border: 3px solid var(--ink); background: radial-gradient(circle at 35% 30%, #fff, #e8dcc0); padding: 4px; }
.recipe.rarity-remnant .rc-icon { background: radial-gradient(circle, #fff, #e0c8ff); }
.recipe.rarity-rare .rc-icon { background: radial-gradient(circle, #fff, #c8d8ff); }
.rc-body { grid-area: body; } .rc-name { font-family: var(--f-title); font-size: 17px; line-height: 1.1; } .rc-desc { font-size: 12px; opacity: .85; margin-top: 3px; line-height: 1.35; }
.rc-ing { grid-area: ing; display: flex; flex-wrap: wrap; gap: 8px; }
.ing { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13px; }
.ing .icon-chip { width: 34px; height: 34px; padding: 2px; box-shadow: none; border-width: 2px; }
.ing.ok span { color: #2a8a4a; } .ing.no span { color: var(--red); } .ing.no .icon-chip { opacity: .55; }
.btn-craft { grid-area: btn; }
.craft-fx { position: absolute; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(20, 10, 30, .7); animation: fadeIn .2s; pointer-events: none; }
.craft-fx.out { animation: fadeOut .35s forwards; }
.cf-rays { position: absolute; width: 520px; height: 520px; background: repeating-conic-gradient(rgba(242, 193, 78, .5) 0 10deg, transparent 10deg 20deg); border-radius: 50%; animation: sigilSpin2 4s linear infinite, zoomIn .5s .45s both; mask: radial-gradient(circle, #000 30%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); }
@keyframes sigilSpin2 { to { rotate: 360deg; } }
.cf-item { position: relative; width: 150px; height: 150px; padding: 14px; background: radial-gradient(circle at 35% 30%, #fff, #f2c14e); border: 5px solid var(--ink); border-radius: 50%; box-shadow: 8px 8px 0 var(--ink); animation: cfItem .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes cfItem { 0% { transform: scale(0) rotate(-90deg); } 30% { transform: scale(.4) rotate(0); } 45% { transform: scale(.4) translateY(8px); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }
.cf-name { position: absolute; top: calc(50% + 100px); font-family: var(--f-sfx); font-size: 40px; color: var(--gold); -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--ink); animation: textSlam .4s .5s both; }
.cf-hammer { position: absolute; top: calc(50% - 150px); left: calc(50% + 40px); font-size: 64px; transform-origin: 80% 80%; animation: hammer .25s 2 alternate ease-in; }
@keyframes hammer { from { transform: rotate(-50deg); } to { transform: rotate(10deg); } }
.loot-row.mats { flex-wrap: wrap; }

/* ============ responsive ============ */
@media (max-width: 1000px) {
  .card-deck { gap: 12px; }
  .enc-card { width: 190px; height: 300px; } .enc-card .enc-art { height: 130px; }
  .enc-card.type-boss, .enc-card.type-story { width: 240px; height: 360px; } .enc-card.type-boss .enc-art, .enc-card.type-story .enc-art { height: 170px; }
  .unit-card { width: 118px; } .uc-frame { height: 134px; } .unit-card.tier-boss { width: 150px; } .tier-boss .uc-frame { height: 172px; } .unit-card.tier-elite { width: 132px; } .tier-elite .uc-frame { height: 152px; }
  .vs-mark { font-size: 44px; }
  .ab-btn { min-width: 96px; } .ap-head { display: none; }
  .map-screen { grid-template-columns: 1fr; }
  .hud-pace { display: none; }
  .party-strip { transform: scale(.85); transform-origin: left bottom; }
}
@media (max-width: 700px) {
  .hud { flex-wrap: wrap; gap: 8px; padding: 8px 16px; } .hud-acttitle { font-size: 18px; }
  .card-deck { top: 50%; flex-direction: column; gap: 10px; width: calc(100% - 32px); max-height: 56vh; overflow-y: auto; padding: 16px 8px; }
  .enc-card, .enc-card.type-boss, .enc-card.type-story { width: 100%; height: auto; display: grid; grid-template-columns: 72px 1fr; grid-template-areas: 'art title' 'art blurb' 'art foot'; column-gap: 12px; row-gap: 2px; align-items: start; padding: 12px 10px 8px; }
  .enc-card.dealt:nth-child(n) { transform: none; }
  .enc-card .enc-art, .enc-card.type-boss .enc-art, .enc-card.type-story .enc-art { grid-area: art; width: 72px; height: 86px; margin: 0; }
  .enc-card .enc-title, .enc-card.type-boss .enc-title { font-size: 17px; } .enc-card .enc-blurb { font-size: 12px; }
  .ei-kana { display: none; } .recipe-grid { grid-template-columns: 1fr; }
  .enc-title { grid-area: title; margin-top: 0; font-size: 17px; } .enc-blurb { grid-area: blurb; font-size: 12px; } .enc-foot { grid-area: foot; }
  #toasts { bottom: auto; top: 60px; }
  .side.crowd-3 .unit-card, .side.crowd-4 .unit-card, .side .unit-card.tier-boss, .side .unit-card.tier-elite, .side.crowd-3 .unit-card.tier-boss, .side.crowd-4 .unit-card.tier-boss { width: 88px; }
  .side.crowd-3 .uc-frame, .side.crowd-4 .uc-frame, .side .tier-boss .uc-frame, .side .tier-elite .uc-frame, .side.crowd-3 .tier-boss .uc-frame, .side.crowd-4 .tier-boss .uc-frame { height: 96px; }
  .unit-card .energy-pips .pip { width: 10px; height: 8px; }
  .battle-top { padding: 8px 16px; } .battle-title { font-size: 16px; }
  .ab-btn { min-width: 30%; max-width: none; flex: 1 1 30%; }
  .stage-title { top: 110px; } .stage-horse { display: none; }
  .stage-actions { flex-direction: row; left: 16px; right: 16px; bottom: 80px; } .btn-side { min-width: 0; flex: 1; font-size: 12px; }
  .party-strip { left: 16px; right: 16px; overflow-x: auto; transform: none; } .ps-card { min-width: 120px; }
  .battle-field { flex-direction: column; top: 50px; bottom: 236px; justify-content: space-around; }
  .side { max-width: 100%; gap: 8px; } .vs-mark { display: none; }
  .unit-card, .unit-card.tier-boss, .unit-card.tier-elite { width: 86px; } .uc-frame, .tier-boss .uc-frame, .tier-elite .uc-frame { height: 100px; }
  .uc-name { font-size: 12px; } .uc-name small { display: none; }
  .order-ribbon { display: none; }
  .action-panel { flex-direction: column; left: 16px; right: 16px; width: auto; padding: 10px; gap: 8px; transform: translate(0, 140%); } .action-panel.show { transform: none; }
  .ab-btn { min-height: 50px; padding: 4px 6px; } .log-toggle { top: 44px; bottom: auto; } .battle-log { top: 84px; bottom: auto; }
  .ap-abilities { justify-content: center; } .ab-btn { min-width: 30%; min-height: 54px; } .ap-extra { flex-direction: row; }
  .event-panel { flex-direction: column; } .event-art { width: 100%; height: 160px; }
  .party-screen { flex-direction: column; } .party-tabs { flex-direction: row; width: auto; overflow-x: auto; } .cs-cols { grid-template-columns: 1fr; } .cs-head { flex-direction: column; }
  .dlg-portrait { bottom: 190px; width: 42vw; height: 50vw; } .dlg-text { font-size: 16px; }
  .title-horse { width: 220px; height: 165px; left: 2%; } .title-menu { right: 16px; left: 16px; } .btn-title { min-width: 0; width: 100%; }
  .bi-portrait { left: 50%; top: 26%; transform: translate(-50%, -50%); width: 46vw; height: 55vw; } .bi-text { top: auto; bottom: 6%; transform: none; right: 16px; left: 16px; width: auto; }
  .lobby, .setup { inset: 8px; padding: 14px; }
}

/* ============ v3: left rail, drawers, compact modals, no scrollbars ============ */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
.modal { max-width: 460px; padding: 22px 20px 18px; max-height: 88vh; }
.modal.small { max-width: 380px; } .modal.wide { max-width: 640px; } .modal.xl { max-width: 780px; }
.modal:has(.modal-title) { padding-top: 54px; }
.modal-title span { font-size: 17px; }
.side-rail { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 12; display: flex; flex-direction: column; gap: 6px; }
.rail-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 68px; padding: 10px 4px 8px; border: 3px solid var(--ink); border-left: none; background: var(--paper); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; font-family: var(--f-ui); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; transition: transform .12s, background .12s; }
.rail-tab:hover { transform: translateX(6px); background: var(--gold); }
.rail-tab kbd { position: absolute; top: 2px; right: 4px; font-size: 9px; opacity: .55; font-family: var(--f-ui); }
.party-strip { left: 84px; }
.drawer-wrap { justify-items: start; align-items: stretch; padding: 70px 16px 16px 76px; background: rgba(20, 10, 30, .35); }
.modal.drawer { max-width: 560px; width: 100%; max-height: calc(100vh - 86px); transform: translateX(-60px); opacity: 0; transition: transform .28s cubic-bezier(.2, 1.2, .4, 1), opacity .2s; box-shadow: 8px 8px 0 var(--ink); }
.drawer-wrap.show .modal.drawer { transform: none; opacity: 1; }
.drawer .party-screen { flex-direction: column; min-height: 0; gap: 12px; }
.drawer .party-tabs { flex-direction: row; width: auto; flex-wrap: wrap; }
.drawer .party-tab { flex-direction: row; gap: 6px; padding: 4px 8px; }
.drawer .pt-port { width: 32px; height: 38px; }
.drawer .tab-sep { align-self: center; margin: 0 4px; }
.drawer .cs-head { gap: 12px; } .drawer .cs-port { width: 96px; height: 116px; }
.drawer .cs-id h2 { font-size: 22px; }
.drawer .cs-cols { grid-template-columns: 1fr; gap: 6px; }
.drawer .recipe-grid { grid-template-columns: 1fr; }
.drawer .map-screen { grid-template-columns: 1fr; }
.drawer .craft-screen { min-height: 0; }
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.shop-card { padding: 8px; } .shop-desc { font-size: 11px; }
.shop-head h2 { font-size: 22px; } .shop-keeper { width: 64px; height: 76px; }
.event-art { width: 170px; height: 204px; } .event-body h2 { font-size: 24px; } .event-text { font-size: 15px; }
.choice { font-size: 14px; padding: 8px 10px; }
.victory-banner { font-size: 46px; }
.reward { padding: 8px 12px; font-size: 15px; }
.rm { width: 76px; } .rm svg { width: 62px; height: 74px; }
.dice-panel { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dice-who svg { width: 44px; height: 52px; } .dice-label { font-size: 19px; }
.d20 { width: 104px; height: 104px; margin: 4px auto; } .d20-num { font-size: 34px; padding-top: 10px; }
.dice-math { font-size: 17px; } .dice-math .total { font-size: 22px; }
.dice-stamp { font-size: 34px; line-height: 1.1; }
.dice-modal .modal { overflow: hidden; }
.result-panel p { font-size: 15px; }
.stand-flash { position: absolute; width: 260px; height: 340px; transform: translate(-50%, -62%); pointer-events: none; z-index: 84; animation: standFlash 1.25s cubic-bezier(.2, 1.1, .3, 1) forwards; filter: drop-shadow(0 0 18px rgba(255, 255, 255, .6)); }
.stand-flash.enemy { filter: drop-shadow(0 0 18px rgba(200, 50, 60, .7)); }
.stand-flash svg { width: 100%; height: 100%; }
.sf-name { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%) rotate(-4deg); white-space: nowrap; font-family: var(--f-sfx); font-size: 26px; letter-spacing: .05em; color: var(--gold); -webkit-text-stroke: 1.5px var(--ink); text-shadow: 3px 3px 0 var(--ink); }
@keyframes standFlash { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.3); } 22% { opacity: .95; transform: translate(-50%, -62%) scale(1.08); } 70% { opacity: .9; transform: translate(-50%, -64%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1.15); } }
.uc-stand { position: absolute; width: 56%; height: 70%; top: -34%; z-index: 4; opacity: .88; pointer-events: auto; animation: standHover 2.8s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .45)); }
.unit-card.party .uc-stand { right: -22%; } .unit-card.enemy .uc-stand { left: -22%; }
.battle-field { top: 96px; }
.uc-stand svg { width: 100%; height: 100%; }
.uc-stand.strike { animation: standStrike .5s ease-out; }
.unit-card.dead .uc-stand { opacity: 0; }
@keyframes standHover { 50% { transform: translateY(-8px); } }
@keyframes standStrike { 40% { transform: scale(1.25) translateY(-10px); opacity: 1; } }
@media (max-width: 700px) {
  .side-rail { top: auto; bottom: 150px; transform: none; flex-direction: row; left: 16px; }
  .rail-tab { width: 58px; border-left: 3px solid var(--ink); padding: 6px 2px; font-size: 10px; }
  .party-strip { left: 16px; }
  .drawer-wrap { padding: 60px 8px 8px 8px; }
  .uc-stand { display: none; }
}
.sprint-hazard { position: absolute; top: 150px; left: 50%; transform: translateX(-50%) rotate(-2deg); z-index: 8; background: var(--ink); color: var(--gold); font-family: var(--f-sfx); font-size: 26px; letter-spacing: .04em; padding: 6px 18px; border: 3px solid var(--gold); opacity: 0; pointer-events: none; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
.sprint-hazard.show { animation: hazardIn 2.2s ease forwards; }
@keyframes hazardIn { 0% { opacity: 0; transform: translateX(-50%) scale(1.6) rotate(-6deg); } 12% { opacity: 1; transform: translateX(-50%) scale(1) rotate(-2deg); } 80% { opacity: 1; } 100% { opacity: 0; } }
.sprint-ring.blinded svg { filter: blur(6px) brightness(.5); }
.sprint-ring.blinded::after { content: ''; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, #f09ac0 30%, #c8407a 70%); opacity: .85; }

/* ---------- damage types ---------- */
.float.dmg.dt { color: var(--dmgc, #fff); -webkit-text-stroke: 1.5px #1a1020; }
.float.dmg.crit.dt { color: var(--gold); text-shadow: 0 0 12px var(--dmgc, transparent), 3px 3px 0 #1a1020; }
.float.eff { font-family: 'Bangers', Impact, sans-serif; font-size: 16px; letter-spacing: .06em; margin-top: -34px; }
.float.eff.big { font-size: 24px; }
.float.eff.weak { color: #ff7a4a; text-shadow: 2px 2px 0 #1a1020; }
.float.eff.resist { color: #9fb8d0; text-shadow: 2px 2px 0 #1a1020; }
.res-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 2px; margin: 2px 3px 0 0; border-radius: 10px; font-size: 11px; font-weight: 700; border: 1px solid var(--dc); background: color-mix(in srgb, var(--dc) 18%, transparent); white-space: nowrap; }
.res-chip .gi { width: 16px; height: 16px; }
.res-chip.good { color: #17663a; } .res-chip.bad { color: #a8281a; }
.tip-res { display: flex; flex-wrap: wrap; }
.tip-dt { font-size: 12px; opacity: .9; }
.tag.dtag { display: inline-flex; align-items: center; gap: 3px; border-color: var(--dc); color: var(--dc); }
.tag.dtag .gi { width: 14px; height: 14px; }

/* ---------- six gear slots ---------- */
.eq-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.eq-slot { padding: 5px 4px; gap: 2px; position: relative; min-width: 0; }
.eq-slot svg, .eq-empty { width: 36px; height: 36px; }
.eq-empty svg { width: 36px; height: 36px; }
.eq-name { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-slot.suppressed { opacity: .55; filter: grayscale(.7); }
.eq-off { position: absolute; top: 3px; right: 3px; font-size: 8px; font-weight: 700; letter-spacing: .08em; background: var(--red, #c8323c); color: #fff; padding: 1px 3px; }

/* ---------- lead riders ---------- */
.lead-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.lead-card { display: flex; gap: 8px; align-items: center; padding: 6px; background: rgba(255, 255, 255, .75); border: 3px solid var(--ink); cursor: pointer; transition: transform .12s, box-shadow .12s; min-width: 0; }
.lead-card:hover { transform: translateY(-3px); }
.lead-card.selected { background: #fff3c0; box-shadow: 0 0 0 3px var(--gold), var(--shadow-s); }
.lead-card.locked { opacity: .5; filter: grayscale(1); cursor: default; }
.lead-port { width: 54px; height: 64px; flex: none; border: 2px solid var(--ink); overflow: hidden; }
.lead-port svg { width: 100%; height: 100%; display: block; }
.lead-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-family: var(--f-ui); }
.lead-info b { font-size: 13px; line-height: 1.05; }
.lead-info small { font-size: 10px; opacity: .75; }
.lead-paths { display: flex; flex-wrap: wrap; gap: 2px; }
.lead-path { font-size: 9px; padding: 0 4px; border-left: 3px solid var(--pc); background: rgba(26, 16, 32, .07); white-space: nowrap; }
@media (max-width: 760px) { .lead-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- paths ---------- */
.path-row { margin-top: 8px; }
.path-hint { font-size: 12px; margin: 2px 0 0; }
.path-head { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-left: 5px solid var(--pc); background: color-mix(in srgb, var(--pc) 16%, #fff); }
.path-head b { display: block; font-family: var(--f-display, serif); font-size: 16px; }
.path-head small { font-size: 11px; opacity: .8; }
.path-emb svg { width: 40px; height: 40px; display: block; }
.path-abs { display: flex; gap: 6px; margin-top: 6px; }
.path-ab { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px; border: 2px solid var(--ink); background: #fff; font-family: var(--f-ui); font-size: 10px; font-weight: 700; }
.path-ab svg { width: 32px; height: 32px; }
.path-ab.locked { opacity: .45; filter: grayscale(.8); }
.path-abs.big { justify-content: center; gap: 10px; margin: 12px 0; }
.path-abs.big .path-ab { width: 118px; animation: puIn .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.path-abs.big .path-ab svg { width: 46px; height: 46px; }
.path-abs.big .path-ab span { font-size: 12px; text-align: center; line-height: 1.1; }
.path-abs.big .path-ab small { font-size: 10px; opacity: .7; }
.path-unlock { position: relative; text-align: center; overflow: hidden; padding: 8px 4px; }
.pu-rays { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--pc) 35%, transparent) 0 8deg, transparent 8deg 20deg); animation: spin 18s linear infinite; z-index: 0; opacity: .6; }
.path-unlock > * { position: relative; z-index: 1; }
.pu-emb { width: 96px; height: 96px; margin: 0 auto; animation: puPop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.pu-emb svg { width: 100%; height: 100%; filter: drop-shadow(4px 4px 0 var(--ink)); }
.pu-kicker { font-family: var(--f-sfx); letter-spacing: .15em; font-size: 14px; margin-top: 6px; color: var(--ink); }
.pu-name { font-family: var(--f-display, serif); font-size: 34px; margin: 2px 0; color: var(--pc); -webkit-text-stroke: 1.5px var(--ink); text-shadow: 3px 3px 0 var(--ink); animation: puIn .5s .15s both; }
.pu-desc { font-style: italic; margin: 4px 0; }
.pu-passive { font-size: 13px; font-weight: 700; }
@keyframes puPop { from { transform: scale(0) rotate(-180deg); } to { transform: none; } }
@keyframes puIn { from { transform: translateY(18px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.ev-path { display: block; margin-top: 8px; padding: 4px 8px; border-left: 4px solid var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent); font-size: 13px; }
@keyframes spin { to { transform: rotate(360deg); } }
.hc-res { display: flex; flex-wrap: wrap; margin-top: 4px; }

/* ---------- detours ---------- */
.enc-card.type-detour .enc-type, .enc-card.type-detour .enc-label { background: #e8742a; }
.stage-kicker.detour { background: #e8742a; color: #1a1020; }
.map-detour { margin: 8px 0; padding: 6px 10px; border-left: 5px solid var(--pc, #8a7a6a); background: color-mix(in srgb, var(--pc, #8a7a6a) 16%, #fff); font-size: 13px; }
.map-detour.done { opacity: .8; }
.scene.act8 .weather { display: none; }
.scene.act7 .weather.dust { opacity: .8; }

/* ---------- scene life ---------- */
.sun-rays { animation: spin 90s linear infinite; }
.windmill { animation: spin 6s linear infinite; }
.scene-birds { position: absolute; inset: 0; pointer-events: none; }
.bird { position: absolute; width: 34px; height: 14px; opacity: .75; animation: birdFly 26s linear infinite, birdFlap .5s ease-in-out infinite alternate; }
.bird.b0 { top: 14%; animation-delay: -4s, 0s; }
.bird.b1 { top: 20%; width: 24px; animation-delay: -12s, -.2s; animation-duration: 32s, .45s; }
.bird.b2 { top: 10%; width: 20px; animation-delay: -20s, -.1s; animation-duration: 38s, .55s; }
@keyframes birdFly { from { left: -5%; transform: translateY(0); } 50% { transform: translateY(18px); } to { left: 105%; transform: translateY(0); } }
@keyframes birdFlap { from { scale: 1 1; } to { scale: 1 .5; } }
.tumbleweed { position: absolute; bottom: 9%; width: 54px; height: 54px; animation: tumble 14s linear infinite; animation-delay: -3s; pointer-events: none; }
.tumbleweed svg { width: 100%; height: 100%; animation: tumbleSpin 1.2s linear infinite, tumbleHop .6s ease-in-out infinite alternate; }
@keyframes tumble { from { left: -8%; } to { left: 108%; } }
@keyframes tumbleSpin { to { rotate: 360deg; } }
@keyframes tumbleHop { from { translate: 0 0; } to { translate: 0 -16px; } }
.scene-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(26, 16, 32, .45) 100%); }
body.reduced .sun-rays, body.reduced .windmill, body.reduced .bird, body.reduced .tumbleweed { animation: none; }

/* =================== JoJo presentation layer =================== */
/* panels: manga screentone, double ink frame, colour offset shadow, Joestar stars in the corners */
.modal {
  background-color: var(--paper);
  background-image: radial-gradient(rgba(26, 16, 32, .07) 1px, transparent 1.3px), linear-gradient(160deg, rgba(255, 255, 255, .6), rgba(239, 224, 191, .4));
  background-size: 6px 6px, 100% 100%;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink), 10px 10px 0 6px var(--pink), 10px 10px 0 9px var(--ink);
}
.modal::before, .modal::after { content: '\2605'; position: absolute; font-size: 18px; color: var(--gold); -webkit-text-stroke: 1.5px var(--ink); pointer-events: none; line-height: 1; }
.modal::before { top: 4px; left: 6px; } .modal::after { bottom: 4px; right: 8px; }
.modal.drawer::before, .modal.drawer::after { display: none; }
.modal h2, .shop-head h2, .event-body h2 { font-family: var(--f-title); color: var(--ink); text-shadow: 2px 2px 0 var(--gold), 4px 4px 0 var(--ink); }
.modal-title span { text-shadow: 2px 2px 0 var(--pink); }
.btn { box-shadow: 4px 4px 0 var(--ink); }
.btn-primary { background: linear-gradient(180deg, #ffe07a, var(--gold) 60%, #e8a83a); box-shadow: 4px 4px 0 var(--ink), 6px 6px 0 var(--pink); }
.btn-primary:hover { box-shadow: 6px 6px 0 var(--ink), 9px 9px 0 var(--pink); }
.choice { position: relative; overflow: hidden; }
.choice::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-110%); transition: transform .45s; pointer-events: none; }
.choice:hover::after { transform: translateX(110%); }

/* encounter cards: drawn illustrations, art-nouveau corners */
.enc-art { position: relative; }
.enc-art .card-art { width: 100%; height: 100%; display: block; }
.card-art .ca-rays { transform-origin: 100px 82px; animation: spin 40s linear infinite; }
.enc-card::before, .enc-card::after { content: ''; position: absolute; width: 22px; height: 22px; border: 3px solid var(--ink); pointer-events: none; z-index: 3; }
.enc-card::before { top: 3px; left: 3px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.enc-card::after { bottom: 3px; right: 3px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.enc-title { font-family: var(--f-title); text-shadow: 1px 1px 0 #fff, 2px 2px 0 var(--gold); }
.enc-card.type-boss { background: linear-gradient(180deg, #2a1a38, #1a1020); color: var(--paper); }
.enc-card.type-boss .enc-title { color: var(--gold); text-shadow: 2px 2px 0 var(--red), 4px 4px 0 var(--ink); }
.enc-card.type-boss .enc-blurb { color: #e8d8f0; }
.enc-card.type-elite { background: linear-gradient(180deg, var(--paper), #f0d8e8); }

/* dialogue: JoJo caption boxes and speech bubble tails */
.dlg-box.narr { background: #f6d860; color: var(--ink); font-style: italic; border-width: 4px; box-shadow: 8px 8px 0 var(--ink); }
.dlg-name { text-shadow: 2px 2px 0 var(--pink); letter-spacing: .03em; }

/* title */
.title-logo { width: min(860px, 92vw); }
.sbr-logo { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 30px rgba(242, 193, 78, .35)); animation: logoIn .9s cubic-bezier(.2, 1.4, .4, 1) both; }
.logo-ball { animation: spin 3s linear infinite; }
.title-logo .tl-sub { font-family: var(--f-sfx); font-size: clamp(22px, 3vw, 36px); letter-spacing: .3em; color: var(--paper); -webkit-text-stroke: 1.5px var(--ink); text-shadow: 3px 3px 0 var(--pink); margin-top: -6px; }
@keyframes logoIn { from { transform: scale(2.2) rotate(-8deg); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; } }

/* battle cut-in */
.cutin { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.ci-band { position: absolute; left: -10%; right: -10%; top: 34%; height: 30%; background: var(--cc); border-top: 6px solid var(--ink); border-bottom: 6px solid var(--ink); transform: skewY(-7deg) translateX(-110%); animation: ciIn .28s cubic-bezier(.2, 1, .3, 1) forwards; overflow: hidden; box-shadow: 0 0 0 10px rgba(26, 16, 32, .35); }
.cutin.enemy .ci-band { transform: skewY(7deg) translateX(110%); animation-name: ciInR; }
.ci-lines { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 3px, transparent 3px 34px), radial-gradient(rgba(26, 16, 32, .25) 1.4px, transparent 1.6px); background-size: auto, 8px 8px; animation: ciLines .3s linear infinite; }
.ci-port { position: absolute; left: 14%; top: -12%; width: 23%; height: 130%; transform: skewY(7deg); border: 5px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); overflow: hidden; background: var(--ink); animation: ciPort .5s .1s cubic-bezier(.2, 1.4, .4, 1) both; }
.cutin.enemy .ci-port { left: auto; right: 14%; transform: skewY(-7deg); }
.ci-port svg { width: 100%; height: 100%; }
.ci-text { position: absolute; left: 40%; top: 50%; transform: translateY(-50%) skewY(7deg); }
.cutin.enemy .ci-text { left: auto; right: 40%; text-align: right; transform: translateY(-50%) skewY(-7deg); }
.ci-sub { font-family: var(--f-ui); font-weight: 700; font-size: clamp(14px, 1.8vw, 22px); color: var(--ink); letter-spacing: .12em; }
.ci-name { font-family: var(--f-sfx); font-size: clamp(34px, 5.4vw, 76px); line-height: .95; color: #fff; -webkit-text-stroke: 3px var(--ink); text-shadow: 6px 6px 0 var(--ink); animation: ciName .4s .08s cubic-bezier(.2, 1.6, .4, 1) both; }
.ci-kana { position: absolute; right: 4%; top: 6%; font-family: var(--f-jp); font-weight: 900; font-size: clamp(28px, 4vw, 54px); color: #b070e0; -webkit-text-stroke: 2px var(--ink); transform: skewY(7deg) rotate(-6deg); animation: menaceBob .5s ease-in-out infinite alternate; }
.cutin.enemy .ci-kana { right: auto; left: 4%; }
.cutin.out .ci-band { animation: ciOut .3s ease-in forwards; }
@keyframes ciIn { to { transform: skewY(-7deg) translateX(0); } }
@keyframes ciInR { to { transform: skewY(7deg) translateX(0); } }
@keyframes ciOut { to { transform: skewY(-7deg) translateX(0) scaleY(0); opacity: 0; } }
@keyframes ciLines { to { background-position: 34px 0, 0 0; } }
@keyframes ciPort { from { transform: skewY(7deg) translateX(-60%) scale(.8); opacity: 0; } }
@keyframes ciName { from { transform: scale(2.4); opacity: 0; } }
@keyframes menaceBob { to { transform: skewY(7deg) rotate(4deg) translateY(-6px); } }

/* To Be Continued */
.tbc { position: absolute; right: 3%; bottom: 6%; width: min(420px, 60vw); z-index: 20; animation: tbcIn .5s cubic-bezier(.2, 1.2, .4, 1) both; }
.tbc-arrow { width: 100%; height: auto; filter: drop-shadow(6px 6px 0 rgba(26, 16, 32, .6)); }
.tbc.out { animation: tbcOut .35s ease-in forwards; }
#screen.tbc-freeze { filter: sepia(.85) contrast(1.15) saturate(.8); transition: filter .4s; }
@keyframes tbcIn { from { transform: translateX(120%); } }
@keyframes tbcOut { to { opacity: 0; } }

/* battle + HUD polish */
.uc-frame { box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px var(--ink), 7px 7px 0 4px var(--ink); }
.unit-card.enemy .uc-frame { box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px var(--ink), -7px 7px 0 4px var(--red); }
.unit-card.active .uc-frame { box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px var(--ink), 8px 8px 0 5px var(--pink), 0 0 30px 8px rgba(242, 193, 78, .45); }
.uc-name { font-family: var(--f-title); font-weight: 400; letter-spacing: .02em; text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 3px 3px 0 var(--pink); }
.action-panel {
  background-color: var(--paper);
  background-image: radial-gradient(rgba(26, 16, 32, .07) 1px, transparent 1.3px);
  background-size: 6px 6px;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink), 8px 8px 0 6px var(--teal), 8px 8px 0 9px var(--ink);
}
.hud { border-bottom: 3px solid var(--ink); box-shadow: 0 3px 0 var(--pink); }
.rail-tab { box-shadow: 4px 4px 0 var(--ink), 6px 6px 0 var(--pink); }
.stage-title h1 { text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 var(--ink); }
.stage-kicker { box-shadow: 3px 3px 0 var(--ink); }
.battle-bg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 60px, rgba(255, 255, 255, .025) 60px 62px); pointer-events: none; }
.sprint-tip { position: absolute; left: 50%; top: 110px; transform: translateX(-50%); width: min(620px, 92vw); padding: 10px 16px; background: #f6d860; border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); font-family: var(--f-ui); font-size: 15px; z-index: 6; animation: tbcIn .4s both; transition: opacity .5s; } .sprint-tip b:first-child { display: block; font-family: var(--f-sfx); letter-spacing: .1em; font-size: 18px; } .sprint-tip.out { opacity: 0; }

/* ---------- threat, conditions, traits ---------- */
.hud-stat.wanted { gap: 4px; padding-left: 2px; }
.hud-stat.wanted .wanted-svg { width: 24px; height: 30px; display: block; }
.hud-stat.wanted.t1 span { color: #f2c14e; } .hud-stat.wanted.t2 span { color: #e8742a; } .hud-stat.wanted.t3 span { color: #ff5a5a; }
.hud-stat.wanted.t3 { animation: wantedPulse 1.2s ease-in-out infinite; }
@keyframes wantedPulse { 50% { box-shadow: 0 0 0 3px rgba(200, 50, 60, .6); } }
.hud-stat.cond i { width: 12px; height: 12px; border-radius: 50%; background: var(--cc); border: 2px solid var(--ink); display: inline-block; }
.toast-wanted .wanted-svg { width: 38px; height: 48px; display: block; animation: puPop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.ac-extra { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.ac-cond, .ac-threat { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; background: var(--paper); border: 3px solid var(--ink); border-left: 8px solid var(--cc); box-shadow: 5px 5px 0 var(--ink); max-width: 360px; text-align: left; font-family: var(--f-ui); color: var(--ink); animation: puIn .5s .6s both; }
.ac-cond b, .ac-threat b { font-size: 14px; letter-spacing: .06em; }
.ac-cond span, .ac-threat span { font-size: 12px; opacity: .85; }
.ac-threat { flex-direction: row; align-items: center; gap: 10px; }
.ac-threat .wanted-svg { width: 44px; height: 56px; flex: none; }
.trait-badge { display: inline-block; padding: 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--tc); border: 1.5px solid var(--ink); text-shadow: 1px 1px 0 var(--ink); }
.tip-traits small { font-size: 11px; opacity: .85; }
.unit-card.traited .uc-frame::after { content: '★'; position: absolute; top: 4px; right: 6px; color: #f2c14e; font-size: 18px; -webkit-text-stroke: 1.5px var(--ink); z-index: 3; }
.enc-threat { position: absolute; top: 6px; right: 8px; font-size: 12px; color: #c8323c; -webkit-text-stroke: .6px var(--ink); letter-spacing: -1px; z-index: 4; }
.enc-foes { display: flex; gap: 3px; margin-top: auto; margin-bottom: 4px; } .enc-foe { width: 30px; height: 36px; border: 2px solid var(--ink); overflow: hidden; background: var(--ink); } .enc-foe svg { width: 100%; height: 100%; display: block; }

/* ---------- debug panel ---------- */
.debug-panel { position: fixed; right: 8px; top: 60px; z-index: 999; width: 440px; max-width: 96vw; background: rgba(20, 12, 28, .95); color: #f6ecd8; border: 2px solid #f2c14e; font: 12px/1.3 'Oswald', sans-serif; padding: 8px; box-shadow: 4px 4px 0 #000; }
.debug-panel .dbg-head { font-family: 'Bangers', Impact, sans-serif; font-size: 18px; letter-spacing: .1em; color: #f2c14e; margin-bottom: 4px; }
.debug-panel .dbg-head small { font-family: 'Oswald', sans-serif; font-size: 11px; color: #aaa; letter-spacing: 0; }
.debug-panel .dbg-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0; }
.debug-panel label { color: #9fc7e8; min-width: 38px; }
.debug-panel input, .debug-panel select { background: #2a1a38; color: #f6ecd8; border: 1px solid #6b5bd6; font: inherit; padding: 2px 4px; max-width: 170px; }
.debug-panel input[type=number] { width: 52px; }
.debug-panel button { background: #f2c14e; color: #1a1020; border: 1px solid #000; font: inherit; font-weight: 700; padding: 2px 8px; cursor: pointer; }
.debug-panel button:hover { background: #fff3a0; }

/* ---------- Chronicle ---------- */
.chronicle { font-family: var(--f-ui); }
.chr-sub { font-size: 11px; letter-spacing: .18em; color: var(--purple); font-weight: 700; margin: 8px 0 4px; border-bottom: 2px solid var(--ink); }
.chr-rel { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.chr-face { position: relative; text-align: center; }
.chr-port { width: 100%; aspect-ratio: 5 / 6; border: 3px solid var(--ink); overflow: hidden; background: var(--ink); }
.chr-port svg { width: 100%; height: 100%; display: block; }
.chr-face.cold .chr-port { filter: grayscale(.85) brightness(.7); }
.chr-face.warm .chr-port { box-shadow: 0 0 0 3px var(--gold); }
.chr-face span { position: absolute; right: -4px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); font-size: 14px; line-height: 18px; }
.chr-list { background: #f3e2bd; border: 3px solid #6a4a2a; box-shadow: inset 0 0 30px rgba(106, 74, 42, .35); padding: 8px 12px; font-family: 'Rye', Georgia, serif; color: #3a2210; max-height: 52vh; overflow-y: auto; }
.chr-act { font-family: var(--f-sfx); letter-spacing: .1em; color: #8a1a10; margin-top: 6px; }
.chr-entry { font-size: 13px; line-height: 1.35; padding: 3px 0; border-bottom: 1px dashed rgba(106, 74, 42, .35); }
.chr-reveal { display: block; font-family: var(--f-ui); font-style: italic; color: #b01a1a; font-size: 12px; margin-left: 10px; animation: puIn .4s both; }
.chr-recap .chr-ending { text-align: center; }
.chr-recap .chr-ending small { letter-spacing: .3em; font-weight: 700; color: var(--purple); }
.chr-recap .chr-ending h2 { font-size: 30px; margin: 0 0 6px; }
.whisper { font-family: 'Rye', Georgia, serif; color: #3a2210; }
.toast.whisper { background: #f3e2bd; border-color: #6a4a2a; }

/* ---------- Economy: grouped materials, bench, forge, sell, pin ---------- */
.mat-groups .cs-sub { margin-top: 8px; }
.mat-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.mat-row { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .5); border: 2px solid var(--ink); padding: 3px 6px 3px 3px; }
.mat-row .mr-t { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.mat-row .mr-t b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mat-row .mr-t small { font-size: 10px; color: var(--purple); letter-spacing: .04em; }
.craft-inv { max-height: 30vh; overflow-y: auto; }
.tip-src { margin-top: 4px; font-size: 11px; line-height: 1.3; border-top: 1px dashed rgba(255, 255, 255, .25); padding-top: 3px; }
.tab-n { font-style: normal; background: #c8323c; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; margin-left: 4px; }
.ready-filter { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 700; font-size: 12px; cursor: pointer; }
.craft-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.recipe { position: relative; }
.recipe.pinned { box-shadow: 0 0 0 3px var(--gold), 4px 4px 0 var(--ink); }
.rc-pin { position: absolute; top: 4px; right: 4px; background: none; border: 0; cursor: pointer; font-size: 14px; opacity: .35; filter: grayscale(1); }
.rc-pin.on, .rc-pin:hover { opacity: 1; filter: none; }
.rc-from { font-size: 11px; font-weight: 700; color: #3a8c4a; margin-top: 2px; }
.ing.from .icon-chip { outline: 2px dashed #3a8c4a; }
.ing.soul span { font-size: 10px; letter-spacing: .06em; }
.icon-chip.trinket { background: linear-gradient(135deg, #fff3c0, #e8c070); }
.drop-tot { display: inline-flex; flex-direction: column; align-items: center; animation: puIn .4s both; }
.drop-tot small { font-size: 10px; font-weight: 700; color: var(--purple); }
.hud-stat.pin { cursor: pointer; gap: 4px; background: #f6ecd8; }
.hud-stat.pin .pin-ico svg, .hud-stat.pin span svg { width: 20px; height: 20px; vertical-align: middle; }
.hud-stat.pin b { font-size: 11px; margin-right: 4px; }
.hud-stat.pin.ready { background: #f2c14e; animation: pinPulse 1.4s ease-in-out infinite; }
@keyframes pinPulse { 50% { box-shadow: 0 0 0 3px #fff3c0; } }
.rail-tab { position: relative; }
.rail-badge { position: absolute; top: 2px; right: 2px; font-style: normal; background: #c8323c; color: #fff; border: 2px solid var(--ink); border-radius: 10px; min-width: 18px; height: 18px; font-size: 11px; line-height: 14px; text-align: center; font-weight: 700; }
.sell-panel { margin: 10px 0; border-top: 3px double var(--ink); padding-top: 4px; }
.sell-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sell-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sell-item .btn-small { padding: 2px 6px; font-size: 11px; }
.forge-list { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow-y: auto; }
.forge-row { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .55); border: 2px solid var(--ink); padding: 4px 8px 4px 4px; flex-wrap: wrap; }
.forge-row .fr-t { display: flex; flex-direction: column; flex: 1; min-width: 120px; }
.forge-row .fr-t small { color: var(--purple); font-size: 11px; }
.fr-cost { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.btn-side.disabled { opacity: .5; pointer-events: none; }
.hud-stat.pin { flex-direction: row; white-space: nowrap; }
.hud-stat.pin > span { display: inline-flex; align-items: center; gap: 2px; }
.hud-stat.pin svg { display: inline-block; }

/* ---------- Custom rider creator ---------- */
.creator .cr-main { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 14px; align-items: start; }
.creator .cr-prev { border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); aspect-ratio: 5 / 6; overflow: hidden; background: var(--ink); position: sticky; top: 0; }
.creator .cr-prev svg { width: 100%; height: 100%; display: block; }
.creator .cr-form { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.creator .cr-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.creator .cr-row > span { width: 92px; font-size: 11px; letter-spacing: .12em; font-weight: 700; color: var(--purple); }
.creator input[type=text] { flex: 1; min-width: 140px; font: 700 15px var(--f-ui); padding: 5px 8px; border: 3px solid var(--ink); background: #fffaf0; }
.creator .cr-sw { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.creator .cr-dot { width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 50%; cursor: pointer; padding: 0; }
.creator .cr-dot.on { box-shadow: 0 0 0 3px var(--gold); transform: scale(1.15); }
.creator .cr-arrow { border: 2px solid var(--ink); background: var(--paper); font-weight: 700; width: 28px; height: 26px; cursor: pointer; }
.creator .cr-val { min-width: 90px; text-align: center; text-transform: capitalize; }
.creator .cr-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.btn-creator { margin: 4px 0 8px; }
.solo-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.solo-row .btn-creator { margin: 0; }
@media (max-width: 640px) { .creator .cr-main { grid-template-columns: 1fr; } .creator .cr-prev { max-width: 180px; position: static; } }

/* ---------- Sprint: one long course, and rivals' attacks ---------- */
.sprint-world { overflow: hidden; }
.sprint-world .sw-sky { position: absolute; inset: 0; }
.sprint-world .sw-sun { position: absolute; right: 16%; top: 12%; width: 90px; height: 90px; border-radius: 50%; background: #fff3c0; box-shadow: 0 0 60px 20px rgba(255, 243, 192, .6); }
.sprint-world .sw-layer { position: absolute; left: 0; top: 0; will-change: transform; }
.sprint-world .sw-layer svg { display: block; }
.sprint-warn { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -10px); z-index: 9; min-width: min(460px, 90vw); background: #c8323c; color: #fff; border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 8px 14px 14px; text-align: center; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.sprint-warn.show { opacity: 1; transform: translate(-50%, 0); animation: warnShake .3s ease infinite alternate; }
.sprint-warn b { display: block; font-family: var(--f-sfx); font-size: 22px; letter-spacing: .04em; }
.sprint-warn span { font-size: 13px; font-weight: 700; color: #fff3a0; }
.sprint-warn i { position: absolute; left: 0; bottom: 0; height: 6px; width: 100%; background: #f2c14e; }
@keyframes warnShake { from { margin-left: -2px; } to { margin-left: 2px; } }
.runner.attacking .horse-svg { filter: drop-shadow(0 0 10px #c8323c) drop-shadow(0 0 4px #c8323c); }
.runner.attacking .runner-tag { background: #c8323c; color: #fff; }
.sprint.struck .sprint-track { animation: struck .35s ease; }
@keyframes struck { 0%, 100% { transform: none; } 25% { transform: translate(-8px, 3px); } 50% { transform: translate(7px, -3px); } 75% { transform: translate(-4px, 2px); } }
.sprint.roped .runner.me .horse-svg { filter: sepia(.6) hue-rotate(-20deg); }
.sprint-results { z-index: 60; }
.sprint-stamina { background: rgba(26, 16, 32, .75); padding: 6px 10px; border: 2px solid var(--ink); }

/* ---------- Sprint weather and race powers ---------- */
.sprint-weather { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.sprint.w-heat .sprint-weather { background: linear-gradient(0deg, rgba(255, 140, 40, .22), transparent 60%); animation: heatHaze 1.6s ease-in-out infinite alternate; }
@keyframes heatHaze { from { filter: blur(0); } to { filter: blur(.6px); opacity: .7; } }
.sprint.w-wind .sprint-weather { background: repeating-linear-gradient(170deg, transparent 0 40px, rgba(255, 255, 255, .25) 40px 42px); background-size: 300px 300px; animation: windStreak .5s linear infinite; }
@keyframes windStreak { to { background-position: -300px 40px; } }
.sprint.w-rain .sprint-weather { background: linear-gradient(rgba(30, 40, 70, .35), rgba(30, 40, 70, .35)), repeating-linear-gradient(105deg, transparent 0 14px, rgba(200, 220, 255, .55) 14px 15px); background-size: auto, 120px 120px; animation: rainFall .35s linear infinite; }
@keyframes rainFall { to { background-position: 0 0, -30px 120px; } }
.sprint.w-snow .sprint-weather { background: radial-gradient(circle, #fff 1.4px, transparent 2px) 0 0 / 40px 40px, radial-gradient(circle, #fff 2px, transparent 2.6px) 20px 10px / 70px 70px, linear-gradient(rgba(220, 235, 255, .35), rgba(220, 235, 255, .35)); animation: snowFall 1.4s linear infinite; }
@keyframes snowFall { to { background-position: -40px 40px, -50px 80px, 0 0; } }
.sprint.w-fog .sprint-weather { background: linear-gradient(90deg, rgba(235, 235, 240, .75), rgba(235, 235, 240, .35) 40%, rgba(235, 235, 240, .7)); animation: fogDrift 6s ease-in-out infinite alternate; }
@keyframes fogDrift { to { opacity: .6; transform: translateX(-4%); } }
.sprint.w-night .sprint-weather { background: radial-gradient(circle at 38% 62%, transparent 90px, rgba(8, 6, 24, .82) 320px); }
.sprint.bolt .sprint-weather::after { content: ''; position: absolute; inset: 0; background: #fff; animation: bolt .5s ease-out forwards; }
@keyframes bolt { 0% { opacity: .9; } 30% { opacity: .1; } 45% { opacity: .7; } 100% { opacity: 0; } }
.sprint-wname { position: absolute; left: 3%; top: 150px; z-index: 6; background: rgba(26, 16, 32, .8); color: var(--paper); border: 2px solid var(--ink); padding: 4px 10px; max-width: 260px; }
.sprint-wname:empty { display: none; }
.sprint-wname b { display: block; font-family: var(--f-sfx); color: var(--gold); letter-spacing: .06em; }
.sprint-wname span { font-size: 11px; }
.sprint-powers { position: absolute; left: 3%; bottom: calc(5% + 50px); z-index: 31; display: flex; gap: 8px; flex-wrap: wrap; max-width: 60vw; }
.sp-power { position: relative; display: flex; align-items: center; gap: 6px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--pc); padding: 4px 10px 4px 6px; cursor: pointer; font: 700 12px var(--f-ui); }
.sp-power b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pc); color: #fff; font-size: 16px; border: 2px solid var(--ink); -webkit-text-stroke: .6px var(--ink); }
.sp-power kbd { position: absolute; top: -9px; left: -7px; background: var(--ink); color: var(--gold); font-size: 10px; padding: 0 4px; }
.sp-power:hover { transform: translate(-1px, -1px); }
.sp-power.used { opacity: .35; filter: grayscale(1); pointer-events: none; }
.sprint.timestop .sprint-scene, .sprint.timestop .sprint-track .runner:not(.me) { filter: grayscale(1) invert(.08) hue-rotate(200deg) brightness(.85); }
.sprint.timestop .sprint-weather { animation-play-state: paused; }
.sprint.timestop::after { content: '止'; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: 200px; color: rgba(122, 90, 208, .35); font-family: serif; pointer-events: none; z-index: 5; }
.sprint.shielded .runner.me .horse-svg { filter: drop-shadow(0 0 10px #fff3a0) drop-shadow(0 0 4px #f09ac0); }
.runner.stalled .horse-svg { filter: grayscale(.7) brightness(.8); }
.runner.stalled::after { content: 'STALLED'; position: absolute; top: 20px; left: 30px; background: var(--ink); color: var(--gold); font: 700 10px var(--f-ui); padding: 1px 4px; }
.sprint.pflash::before { content: ''; position: absolute; inset: 0; z-index: 7; background: var(--flash, #fff); pointer-events: none; animation: pflash .4s ease-out forwards; }
@keyframes pflash { from { opacity: .45; } to { opacity: 0; } }

/* ---------- encounter danger stars, hidden types ---------- */
.enc-stars { position: absolute; top: 8px; right: 10px; z-index: 3; font-size: 15px; letter-spacing: 1px; color: #f2c14e; -webkit-text-stroke: .8px #1a1020; text-shadow: 1px 1px 0 #1a1020; }
.enc-stars.s4 { color: #e8742a; } .enc-stars.s5 { color: #c8323c; animation: starPulse 1.2s ease-in-out infinite; }
@keyframes starPulse { 50% { transform: scale(1.12); filter: drop-shadow(0 0 6px #c8323c); } }
.enc-card.type-hidden .enc-type { background: #1a1020; color: #f2c14e; letter-spacing: .3em; }
.enc-card.revealing { animation: cardReveal .7s cubic-bezier(.2, 1.3, .4, 1); }
.enc-card.revealing .enc-type { animation: tagPop .5s ease; }
@keyframes cardReveal { 0% { transform: rotateY(0) scale(1.05); } 45% { transform: rotateY(90deg) scale(1.1); } 100% { transform: rotateY(0) scale(1.08); } }
@keyframes tagPop { 0% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* RP unlock buttons on locked horses and starting items */
.horse-card.locked, .starter-card.locked { position: relative; }
.btn-unlock { margin-top: 6px; font-size: 12px; background: var(--gold, #f2c14e); pointer-events: auto; }
.btn-unlock.poor { opacity: .55; }
.horse-card.locked .btn-unlock { width: 100%; }
.starter-card.locked .btn-unlock { align-self: center; white-space: nowrap; }