:root{color-scheme:dark;--ink:#f6eadb;--muted:#b9a99b;--red:#9f1933;--red2:#d14b60;--gold:#d6ad62;--panel:#17141a;--line:#3c3038;--ok:#76c893;--bad:#ec6a6a}
*{box-sizing:border-box}body{margin:0;overflow-x:hidden;background:radial-gradient(circle at 70% 0,#3a1420 0,#120f14 38%,#09080a 100%);color:var(--ink);font:15px/1.45 Inter,system-ui,sans-serif;min-height:100vh}button{min-height:44px;font:inherit;color:inherit;background:#262027;border:1px solid #57434c;border-radius:8px;padding:9px 13px;cursor:pointer}button:hover{border-color:var(--gold)}button:disabled{opacity:.38;cursor:not-allowed}.primary{background:linear-gradient(180deg,#ba2945,#751425);border-color:#e45e72}
.shell{width:100%;max-width:920px;margin:auto;padding:20px}.top{display:flex;gap:14px;align-items:center;justify-content:space-between}.topbar{height:52px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-family:Georgia,serif;font-size:20px;letter-spacing:.12em;color:#fff}.resources{display:flex;gap:8px}.resource{padding:6px 10px;border:1px solid #ffffff1c;border-radius:99px}.wallet{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:var(--gold);font-variant-numeric:tabular-nums}.writer-wait,.writer-live{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid #ffffff1f;border-radius:99px;font-size:12px}.writer-wait{color:#ffd079}.writer-wait i{width:8px;height:8px;border:2px solid #ffd079;border-right-color:transparent;border-radius:50%;animation:writer-spin .7s linear infinite}.writer-live{color:var(--ok)}.nav{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.main-nav{display:grid;grid-template-columns:repeat(4,1fr)}.nav button{min-width:0}.nav button.active{background:var(--red);border-color:var(--red2)}
.panel{min-width:0;overflow:hidden;background:rgba(23,20,26,.96);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 18px 50px #0007}.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.card{position:relative;overflow:hidden;min-height:220px;border:1px solid #4b3941;border-radius:12px;background:linear-gradient(160deg,#34262e,#131116);padding:12px;display:flex;flex-direction:column;justify-content:flex-end}.card.selected{outline:2px solid var(--gold)}.portrait{position:absolute;inset:0;opacity:.42;background-position:center 12%;background-size:cover}.sigil{position:absolute;inset:18px auto auto 18px;font:700 58px Georgia;color:#ffffff18}.card>*:not(.portrait):not(.sigil){position:relative;text-shadow:0 2px 5px #000}.quality{color:var(--gold);font-weight:700}.muted{color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.split{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.stage{padding:14px;border:1px solid var(--line);border-radius:10px;margin:8px 0}.stage.locked{opacity:.45}.log{height:260px;overflow:auto;background:#0b090c;border:1px solid var(--line);border-radius:9px;padding:12px;font-family:ui-monospace,monospace;font-size:13px}.event{padding:3px 0;border-bottom:1px solid #241d22}.good{color:var(--ok)}.bad{color:var(--bad)}.meter{height:9px;background:#372a30;border-radius:9px;overflow:hidden}.meter i{display:block;height:100%;background:var(--red2)}.hero-status{margin:8px 0}.hero-status strong{display:inline-block;width:130px}.notice{padding:10px 12px;border-left:3px solid var(--gold);background:#292129;margin:10px 0}.modal{position:fixed;inset:0;background:#000b;display:grid;place-items:center;padding:20px;z-index:5}.modal>.panel{max-width:480px}.toast{position:fixed;right:18px;bottom:18px;padding:11px 15px;background:#33252c;border:1px solid var(--gold);border-radius:8px;z-index:9}
.battle-stage{position:relative;isolation:isolate}.enemy{--enemy:#b1454b;--enemy2:#4a1018;position:relative;display:grid;grid-template-columns:164px minmax(0,1fr);gap:14px;padding:14px;background:radial-gradient(circle at 17% 35%,color-mix(in srgb,var(--enemy) 34%,transparent),transparent 28%),linear-gradient(105deg,#090a0c 48%,var(--enemy2))}.stage-2{--enemy:#7992a8;--enemy2:#132532}.stage-3{--enemy:#c45f90;--enemy2:#3c112a}.enemy-visual{position:relative;min-height:166px;overflow:hidden;border:1px solid color-mix(in srgb,var(--enemy) 58%,#d6ad62);border-radius:12px;background:radial-gradient(circle at 50% 36%,color-mix(in srgb,var(--enemy) 45%,transparent),#09090c 68%);box-shadow:inset 0 0 32px #000a}.enemy-aura{position:absolute;inset:22px;border-radius:50%;border:1px solid color-mix(in srgb,var(--enemy) 70%,transparent);box-shadow:0 0 28px color-mix(in srgb,var(--enemy) 55%,transparent);animation:enemy-breathe 2.8s ease-in-out infinite}.enemy-figure{position:absolute;left:50%;bottom:21px;width:112px;height:133px;translate:-50% 0;filter:drop-shadow(0 8px 8px #000b)}.enemy-body,.enemy-helm,.enemy-weapon,.enemy-shield-shape{position:absolute;display:block}.enemy-body{left:24px;bottom:0;width:68px;height:91px;background:linear-gradient(90deg,#17191d,var(--enemy),#111318);clip-path:polygon(23% 0,77% 0,100% 28%,86% 100%,14% 100%,0 28%);border:1px solid var(--gold)}.enemy-helm{left:34px;top:8px;width:48px;height:47px;background:linear-gradient(145deg,#3b3e44,#111318 55%,var(--enemy));clip-path:polygon(50% 0,96% 30%,82% 100%,18% 100%,4% 30%)}.enemy-helm:after{content:"";position:absolute;left:8px;right:8px;top:23px;height:4px;background:var(--enemy);box-shadow:0 0 10px var(--enemy)}.enemy-weapon{right:3px;top:1px;width:5px;height:125px;background:linear-gradient(#f3d992,var(--gold) 22%,#2b1d15 23%);rotate:10deg;transform-origin:bottom}.enemy-weapon:before{content:"";position:absolute;left:-8px;top:-3px;width:21px;height:26px;background:linear-gradient(135deg,#f7dc95,var(--enemy));clip-path:polygon(50% 0,100% 58%,50% 100%,0 58%)}.enemy-shield-shape{left:3px;bottom:14px;width:47px;height:68px;border:2px solid var(--gold);background:linear-gradient(145deg,var(--enemy),#11151b);clip-path:polygon(50% 0,100% 18%,86% 78%,50% 100%,14% 78%,0 18%)}.stage-1 .enemy-shield-shape{scale:.72;translate:5px 8px}.stage-2 .enemy-figure{scale:1.08}.stage-2 .enemy-body{width:78px;left:18px}.stage-2 .enemy-shield-shape{width:62px;height:86px;left:-4px;bottom:2px}.stage-2 .enemy-weapon{right:8px;width:9px}.stage-3 .enemy-helm:before{content:"";position:absolute;left:-7px;right:-7px;top:-13px;height:24px;background:var(--enemy);clip-path:polygon(0 100%,10% 10%,34% 70%,50% 0,66% 70%,90% 10%,100% 100%)}.stage-3 .enemy-weapon{right:-1px;height:138px;rotate:-8deg}.stage-3 .enemy-shield-shape{background:radial-gradient(circle,var(--enemy),#121018 70%);border-radius:50%;clip-path:none;width:42px;height:42px;bottom:34px}.enemy-placeholder{position:absolute;left:8px;right:8px;bottom:4px;text-align:center;color:#d7c5b6;font-size:10px;letter-spacing:.12em}.enemy-info{min-width:0;align-self:center}.enemy-head,.section-head{display:flex;justify-content:space-between;gap:10px;align-items:start}.enemy h1{margin:3px 0}.intent{padding:8px;border:1px solid #ed6c637a;border-radius:8px;text-align:right}.bar-row{display:grid;grid-template-columns:42px 1fr auto;gap:8px;align-items:center;margin-top:9px;font-size:12px}.track,.mini-track{height:8px;background:#08090a;border-radius:99px;overflow:hidden}.fill,.mini-track i{display:block;height:100%;background:var(--red2);transition:width .28s ease-out}.shield .fill,.mini-track.sh i{background:#66a9c7}.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.unit{min-width:0;border:1px solid #daaE5857;border-radius:9px;background:#101318;overflow:hidden}.unit.front{border-color:var(--gold);box-shadow:0 0 0 1px #d6ad6240}.unit.defeated{filter:grayscale(.9);opacity:.65}.unit .unit-portrait{height:126px;background-size:cover}.unit-body{padding:7px}.unit h3{font-size:14px;min-height:38px;margin:0}.role,.skill span{font-size:12px;color:var(--muted)}.mini-stat{display:flex;justify-content:space-between;font-size:12px;margin-top:4px}.skill{min-height:48px;margin-top:7px;padding:6px;border:1px solid #ffffff1a;border-radius:6px;overflow-wrap:anywhere}.skill strong,.skill span{display:block}.eyebrow{color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.12em}.section-head{margin:14px 2px 7px}.section-head h2,.section-head p{margin:0}.bottom-actions{position:sticky;z-index:12;bottom:0;display:grid;grid-template-columns:1fr 1.4fr;gap:7px;padding:20px 0 10px;background:linear-gradient(transparent,#09080a 35%)}
.battle-now{position:relative;z-index:2;display:flex;gap:10px;align-items:center;margin:10px 0 4px;padding:10px 12px;border:1px solid #7c5967;border-radius:9px;background:linear-gradient(90deg,#27151d,#121015)}.battle-now strong{flex:0 0 auto;color:var(--gold)}.battle-now span{min-width:0}.battle-log summary{padding:9px 0;color:var(--muted);cursor:pointer}.result-panel{margin-top:12px;animation:result-reveal .55s cubic-bezier(.2,.8,.2,1) both}
.battle-fx-canvas{position:absolute;z-index:10;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.battle-fx-ui{position:absolute;z-index:11;left:50%;top:42%;display:grid;justify-items:center;gap:4px;pointer-events:none;opacity:0;text-align:center}.battle-fx-ui strong{max-width:260px;padding:7px 18px;border:1px solid var(--gold);border-radius:99px;background:linear-gradient(90deg,#120d14ee,#671a32f2,#120d14ee);box-shadow:0 0 24px #b7355c88;color:#fff;white-space:nowrap;letter-spacing:.12em}.battle-fx-ui b{font:900 31px/1 Georgia,serif;color:#ff9aa5;text-shadow:0 2px 0 #4e0914,0 0 16px #e44f78}.battle-fx-ui span{padding:4px 9px;border:1px solid #72c9ed66;border-radius:99px;background:#102c3bdd;color:#b8eaff;font-weight:800}.battle-fx-ui[data-kind="heal"] b{color:#9cf5b8;text-shadow:0 2px 0 #124221,0 0 16px #76c893}.battle-fx-ui[data-kind="shield"] b{color:#a8e6ff;text-shadow:0 2px 0 #153647,0 0 16px #66a9c7}
@media(max-width:760px){.shell{padding:12px}.top,.split{display:block}.wallet{margin-top:10px}.card{min-height:180px}.brand{font-size:22px}.nav button{flex:1 1 29%}.hero-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}}
.unit{position:relative}.effect-label{position:absolute;z-index:8;right:5px;top:5px;padding:3px 6px;border-radius:99px;background:#08090add;color:#fff;font-size:11px;font-weight:800}.unit.acting{outline:2px solid var(--gold);animation:card-act .34s ease-out}.unit.hit{outline:2px solid var(--bad);animation:card-hit .3s ease-out}.unit.heal{outline:2px solid var(--ok);animation:card-heal .38s ease-out}.unit.shield{outline:2px solid #66a9c7;animation:card-shield .42s ease-out}.unit.heal .mini-track i{background:var(--ok)}.unit.shield .mini-track.sh i{background:#9bdcff}.enemy.acting .enemy-figure{animation:enemy-act .38s cubic-bezier(.2,.85,.25,1)}.enemy.hit .enemy-figure{animation:enemy-hit .32s ease-out}.enemy.hit:after{content:"";position:absolute;inset:0;background:#fff;mix-blend-mode:screen;pointer-events:none;animation:impact-flash .26s ease-out both}.enemy.defeated .enemy-figure{animation:enemy-fall .7s ease-in both}.enemy.defeated .enemy-aura{opacity:.1}
.battle-fx-layer{position:absolute;z-index:10;inset:0;pointer-events:none;overflow:hidden}.fx-streak{position:absolute;left:50%;top:49%;width:150px;height:5px;border-radius:99px;background:linear-gradient(90deg,transparent,#fff 30%,var(--gold) 62%,transparent);box-shadow:0 0 14px var(--gold),0 0 30px #d14b6088;transform-origin:center;opacity:0}.toward-enemy .fx-streak{rotate:-68deg;animation:slash-up .36s cubic-bezier(.1,.8,.2,1) both}.toward-party .fx-streak{rotate:68deg;animation:slash-down .36s cubic-bezier(.1,.8,.2,1) both}.skill .fx-streak{height:8px;background:linear-gradient(90deg,transparent,#fff 25%,#e44f78 55%,transparent);box-shadow:0 0 18px #e44f78,0 0 42px #a21e56}.fx-impact{position:absolute;left:50%;width:74px;height:74px;border:3px solid #fff;border-radius:50%;translate:-50% -50%;opacity:0}.target-enemy .fx-impact{top:23%}.target-party .fx-impact{top:72%}.damage .fx-impact,.attack .fx-impact,.skill .fx-impact{background:conic-gradient(from 25deg,transparent,#fff,transparent 18%,var(--red2),transparent 42%,#fff,transparent 63%);clip-path:polygon(50% 0,61% 35%,100% 19%,70% 49%,100% 76%,62% 65%,50% 100%,39% 66%,4% 80%,30% 50%,0 24%,39% 35%);border:0;animation:impact-burst .38s ease-out both}.heal .fx-impact{border-color:var(--ok);box-shadow:0 0 26px var(--ok);animation:support-ring .5s ease-out both}.shield .fx-impact{border-color:#8bd8ff;box-shadow:inset 0 0 28px #68c6f755,0 0 28px #68c6f7;animation:shield-ring .55s ease-out both}.fx-number{position:absolute;z-index:2;left:50%;translate:-50% 0;font:900 28px/1 Georgia,serif;color:#ff8d98;text-shadow:0 2px 0 #4e0914,0 0 14px #e44f78;animation:number-rise .62s ease-out both}.target-enemy .fx-number{top:18%}.target-party .fx-number{top:65%}.heal .fx-number{color:#9cf5b8;text-shadow:0 2px 0 #124221,0 0 14px #76c893}.shield .fx-number{color:#a8e6ff;text-shadow:0 2px 0 #153647,0 0 14px #66a9c7}.fx-caption{position:absolute;left:50%;top:43%;translate:-50% 0;max-width:80%;padding:7px 18px;border:1px solid var(--gold);border-radius:99px;background:linear-gradient(90deg,#120d14ee,#671a32ee,#120d14ee);box-shadow:0 0 24px #b7355c55;color:#fff;white-space:nowrap;letter-spacing:.12em;animation:caption-pop .5s cubic-bezier(.2,.9,.2,1) both}.fx-absorbed{position:absolute;left:50%;top:57%;translate:-50% 0;padding:4px 9px;border-radius:99px;background:#17394ddd;color:#b8eaff;font-weight:700;animation:number-rise .62s ease-out both}
@keyframes enemy-breathe{50%{scale:1.08;opacity:.55}}@keyframes card-act{45%{transform:translateY(-9px) scale(1.025);filter:brightness(1.28)}70%{transform:translateY(2px)}}@keyframes card-hit{28%{transform:translateX(-5px);filter:brightness(2) saturate(.3)}55%{transform:translateX(4px)}}@keyframes card-heal{45%{filter:brightness(1.5);box-shadow:0 0 28px #76c89388}}@keyframes card-shield{45%{scale:1.02;box-shadow:0 0 28px #66a9c7aa}}@keyframes enemy-act{42%{translate:-50% 10px;scale:1.08;filter:brightness(1.3)}75%{translate:-50% -3px}}@keyframes enemy-hit{28%{translate:calc(-50% - 7px) 0;filter:brightness(2.2) saturate(.2)}55%{translate:calc(-50% + 5px) 0}}@keyframes enemy-fall{to{translate:-50% 28px;rotate:-7deg;filter:grayscale(1) brightness(.35);opacity:.45}}@keyframes impact-flash{0%{opacity:.7}100%{opacity:0}}@keyframes slash-up{0%{opacity:0;translate:-70px 85px;scale:.3}35%{opacity:1}100%{opacity:0;translate:58px -100px;scale:1.45}}@keyframes slash-down{0%{opacity:0;translate:58px -100px;scale:.3}35%{opacity:1}100%{opacity:0;translate:-70px 85px;scale:1.45}}@keyframes impact-burst{0%{opacity:0;scale:.2;rotate:-18deg}38%{opacity:1;scale:1.05}100%{opacity:0;scale:1.55;rotate:20deg}}@keyframes support-ring{0%{opacity:0;scale:.25}45%{opacity:1}100%{opacity:0;scale:1.65;translate:-50% -72%}}@keyframes shield-ring{0%{opacity:0;scale:.5}40%{opacity:1;scale:1.05}100%{opacity:0;scale:1.45}}@keyframes number-rise{0%{opacity:0;translate:-50% 15px;scale:.7}28%{opacity:1;translate:-50% 0;scale:1.15}100%{opacity:0;translate:-50% -30px;scale:1}}@keyframes caption-pop{0%{opacity:0;scale:.65}35%{opacity:1;scale:1.08}100%{opacity:0;scale:1;translate:-50% -12px}}@keyframes result-reveal{0%{opacity:0;translate:0 18px}100%{opacity:1;translate:0 0}}
@media(max-width:520px){.enemy{grid-template-columns:120px minmax(0,1fr);gap:9px;padding:10px}.enemy-visual{min-height:154px}.enemy-figure{scale:.86}.stage-2 .enemy-figure{scale:.93}.enemy-head{display:block}.intent{margin-top:6px;text-align:left;font-size:11px}.enemy h1{font-size:21px}.bar-row{grid-template-columns:36px 1fr auto;gap:5px}.section-head span{max-width:47%;text-align:right;font-size:12px}.unit .unit-portrait{height:104px}.unit h3{font-size:13px;min-height:38px}.role,.skill span,.mini-stat{font-size:11px}.skill{min-height:53px}.battle-now{display:block}.battle-now strong{display:block;margin-bottom:2px}.fx-caption{font-size:13px;max-width:88%}}
@media(prefers-reduced-motion:reduce){.unit.acting,.unit.hit,.unit.heal,.unit.shield,.enemy.acting .enemy-figure,.enemy.hit .enemy-figure,.enemy.defeated .enemy-figure,.enemy-aura,.battle-fx-layer *,.result-panel{animation:none!important;transform:none!important}.battle-fx-layer{display:none}.battle-fx-ui strong{box-shadow:none}.battle-fx-canvas{mix-blend-mode:normal}}
.enemy-art{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.08);transform:scale(1.03);transform-origin:center}.enemy-visual:after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,transparent 55%,#09090bdc),radial-gradient(circle at 50% 42%,transparent 42%,#0007 100%);pointer-events:none}.enemy .effect-label{z-index:4}.enemy.acting .enemy-art{animation:enemy-art-act .38s cubic-bezier(.2,.85,.25,1)}.enemy.hit .enemy-art{animation:enemy-art-hit .32s ease-out}.enemy.defeated .enemy-art{animation:enemy-art-fall .7s ease-in both}@keyframes enemy-art-act{42%{transform:scale(1.08) translateY(7px);filter:brightness(1.3)}75%{transform:scale(1.03) translateY(-2px)}}@keyframes enemy-art-hit{28%{transform:scale(1.03) translateX(-7px);filter:brightness(2.2) saturate(.2)}55%{transform:scale(1.03) translateX(5px)}}@keyframes enemy-art-fall{to{transform:scale(1.03) translateY(28px) rotate(-3deg);filter:grayscale(1) brightness(.35);opacity:.45}}@media(prefers-reduced-motion:reduce){.enemy.acting .enemy-art,.enemy.hit .enemy-art,.enemy.defeated .enemy-art{animation:none!important;transform:scale(1.03)!important}}

/* v03 rarity frames: one closed quality frame plus an isolated runtime state layer. */
:root{--quality-c-frame:#737981;--quality-c-metal:#23282d;--quality-c-accent:#c5cbd0;--quality-c-glow:#abb5be33;--quality-b-frame:#c98a4d;--quality-b-metal:#5d321f;--quality-b-accent:#f0c47c;--quality-b-glow:#d27e3952;--quality-sr-frame:#d7a84f;--quality-sr-metal:#6e1428;--quality-sr-accent:#ffe09a;--quality-sr-gem:#ba2049;--quality-sr-glow:#bd224d73;--quality-ssr-frame:#e6e9f0;--quality-ssr-metal:#5c347e;--quality-ssr-accent:#fff;--quality-ssr-enabled:0;--enemy-iron:#292e34;--enemy-edge:#697078;--enemy-threat:#ae2735;--enemy-energy:#e04b54;--font-display:"Noto Serif SC","Songti SC",Georgia,serif}
.quality-f,.quality-e,.quality-d,.quality-c{--q-frame:var(--quality-c-frame);--q-metal:var(--quality-c-metal);--q-accent:var(--quality-c-accent);--q-glow:var(--quality-c-glow);--q-overlay:url("../../assets/card-v03/frames/frame-c.svg");--q-saturation:.78;--q-badge-radius:2px}
.quality-f{--q-frame:#545861;--q-metal:#181b20;--q-accent:#a7abb2;--q-glow:#777d8733;--q-saturation:.68}
.quality-e{--q-frame:#587263;--q-metal:#18241f;--q-accent:#9fc7ad;--q-glow:#72a5843d;--q-saturation:.76}
.quality-d{--q-frame:#526b89;--q-metal:#172333;--q-accent:#a9c4e3;--q-glow:#6e9bc54a;--q-saturation:.84}
.quality-b,.quality-a{--q-frame:var(--quality-b-frame);--q-metal:var(--quality-b-metal);--q-accent:var(--quality-b-accent);--q-glow:var(--quality-b-glow);--q-overlay:url("../../assets/card-v03/frames/frame-b.svg");--q-saturation:1;--q-badge-radius:50%}
.quality-a{--q-frame:#e0b969;--q-accent:#ffe3a2;--q-glow:#e0b96966}
.quality-r,.quality-sr{--q-frame:var(--quality-sr-frame);--q-metal:var(--quality-sr-metal);--q-accent:var(--quality-sr-accent);--q-glow:var(--quality-sr-glow);--q-overlay:url("../../assets/card-v03/frames/frame-sr.svg");--q-saturation:1.08;--q-badge-radius:4px}
.quality-r{--q-frame:#c45b68;--q-metal:#4a1724;--q-accent:#ffc1aa;--q-glow:#c45b6866;--q-saturation:1.03}
.quality-ssr{--q-frame:var(--quality-ssr-frame);--q-metal:var(--quality-ssr-metal);--q-accent:var(--quality-ssr-accent);--q-glow:#b576e84d;--q-overlay:none;--q-saturation:1.08;--q-badge-radius:4px}
.ally-card{position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:0;background:linear-gradient(155deg,var(--q-metal),#0a0b0e 76%);color:var(--ink);box-shadow:0 12px 24px #0008;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.ally-card.quality-b,.ally-card.quality-a{clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px)}
.ally-card.quality-sr{clip-path:polygon(18px 0,calc(50% - 22px) 0,50% 12px,calc(50% + 22px) 0,calc(100% - 18px) 0,100% 20px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 20px)}
.quality-frame{position:absolute;z-index:6;inset:0;background:var(--q-overlay) center/100% 100% no-repeat;pointer-events:none;filter:drop-shadow(0 0 5px var(--q-glow))}
.card-art{position:absolute;z-index:1;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);max-width:none;object-fit:cover;object-position:var(--portrait-focus,50% 8%);opacity:1;transform:scale(var(--portrait-scale,1.1));transform-origin:50% 12%;filter:saturate(var(--q-saturation,1)) contrast(1.06)}
.quality-sr .card-art{filter:saturate(var(--q-saturation)) contrast(1.1) brightness(1.06) drop-shadow(0 0 8px #ffc15e66)}
.art-scrim{position:absolute;z-index:2;inset:30% 3px 3px;background:linear-gradient(transparent,#08090be8 62%,#08090b 100%);pointer-events:none}
.quality-sr::before{content:"";position:absolute;z-index:0;left:11%;right:11%;top:9%;height:58%;border:2px solid transparent;border-top-color:#f0b75a99;border-radius:50%;box-shadow:0 -8px 22px #c9295366,inset 0 12px 22px #9f19334d;animation:sr-energy 3.8s ease-in-out infinite;pointer-events:none}
.quality-sr::after{content:"✦  ·  ✦";position:absolute;z-index:3;left:12%;right:12%;top:18%;color:#ffd77aaa;text-align:center;letter-spacing:1.4em;text-shadow:0 0 8px #e94470;animation:sr-particles 3.2s ease-in-out infinite;pointer-events:none}
.rarity-badge{position:absolute!important;z-index:8;inset:9px auto auto 9px;width:34px;min-width:0;height:27px;display:grid;place-items:center;padding:0;border:1px solid var(--q-accent);border-radius:2px;background:linear-gradient(145deg,#30363b,#111419 70%);box-shadow:inset 0 1px #ffffff26,0 3px 10px #0008,0 0 10px var(--q-glow);clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);color:var(--q-accent);font:900 13px/1 Georgia,serif;letter-spacing:.03em;text-shadow:0 1px #000!important}
.quality-b .rarity-badge,.quality-a .rarity-badge{width:34px;height:34px;border:2px solid var(--q-accent);border-radius:50%;background:radial-gradient(circle at 34% 28%,#8a5730,#3b2117 62%,#120d0b);clip-path:none}
.quality-sr .rarity-badge{inset:9px auto auto 9px;width:45px;height:29px;border-color:#ffd77f;border-radius:3px;transform:none;clip-path:polygon(7px 0,100% 0,100% 20px,calc(100% - 8px) 100%,8px 100%,0 20px,0 7px);background:linear-gradient(145deg,#bd3150,#4a0c1b 60%,#1d0910);box-shadow:inset 0 1px #fff4c066,0 3px 10px #0009,0 0 14px var(--q-glow);animation:gem-pulse 2.8s ease-in-out infinite}
.quality-sr .rarity-badge::after{content:"";position:absolute;right:4px;bottom:3px;width:5px;height:5px;rotate:45deg;background:var(--quality-sr-gem);border:1px solid #ffd783;box-shadow:0 0 7px #d93e62}
.role-seal{position:absolute!important;z-index:7;right:9px;top:9px;width:29px;height:29px;display:grid;place-items:center;border:1px solid var(--q-frame);border-radius:2px;background:#080a0ddd;color:var(--q-accent);font:800 13px var(--font-display);text-shadow:none!important}
.quality-b .role-seal,.quality-a .role-seal,.quality-sr .role-seal{border-radius:50%;border-width:2px}
.card-copy{position:absolute;z-index:5;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;text-shadow:0 2px 5px #000}
.card-copy h3{margin:1px 0;color:var(--q-accent);font:700 18px/1.12 var(--font-display)}
.card-copy .quality{color:var(--q-accent);font-size:12px}.card-copy .muted{font-size:12px}.card-copy button{position:relative;z-index:9;width:100%;margin-top:7px}
.collection-card{min-height:286px;padding:0}.collection-card.is-selected{box-shadow:0 0 0 2px var(--q-accent),0 0 24px var(--q-glow),0 12px 24px #0008}.collection-card.is-selected .state-fx{opacity:1;box-shadow:inset 0 0 24px var(--q-glow)}
.state-fx{position:absolute;z-index:9;inset:3px;pointer-events:none;opacity:0}.ally-card.hit .state-fx,.ally-card.is-hit .state-fx{opacity:1;background:#fff8;animation:state-hit .3s ease-out}.ally-card.heal .state-fx,.ally-card.is-heal .state-fx{opacity:1;box-shadow:inset 0 0 28px #76c893aa}.ally-card.shield .state-fx,.ally-card.has-shield .state-fx{opacity:1;border-bottom:2px solid #8bd8ff;box-shadow:inset 0 -12px 24px #66a9c744}.ally-card.defeated .state-fx,.ally-card.is-dead .state-fx{opacity:1;background:#08090b99}
.summon-record{margin:12px 0 18px;padding-top:10px;border-top:1px solid var(--line)}.summon-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:7px;margin:9px 0 14px}.summon-card-grid .collection-card{min-height:166px;aspect-ratio:3/4}.summon-card-grid .card-copy{left:8px;right:8px;bottom:8px}.summon-card-grid .card-copy h3{font-size:12px}.summon-card-grid .card-copy>span:not(.quality),.summon-card-grid .role-seal{display:none}.summon-card-grid .rarity-badge{inset:6px auto auto 6px;width:28px;height:22px;font-size:10px}.summon-card-grid .quality-b .rarity-badge,.summon-card-grid .quality-a .rarity-badge{width:28px;height:28px}.summon-card-grid .quality-sr .rarity-badge{inset:6px auto auto 6px;width:35px;height:23px}.tutorial-results{max-height:372px;overflow:auto;padding:2px}
.team-grid{grid-template-columns:repeat(3,minmax(0,180px));justify-content:center;gap:clamp(7px,1.3vw,14px)}.battle-card{width:100%;aspect-ratio:3/4;min-height:0;border:0;border-radius:0;background:#101318}.battle-card .card-art{inset:3px;width:calc(100% - 6px);height:74%;transform:scale(var(--portrait-scale,1.3));transform-origin:50% 11%}.battle-card .rarity-badge{inset:7px auto auto 7px;width:29px;height:23px;padding:0;font-size:10px}.battle-card.quality-b .rarity-badge,.battle-card.quality-a .rarity-badge{width:29px;height:29px}.battle-card.quality-sr .rarity-badge,.battle-card.quality-ssr .rarity-badge{inset:7px auto auto 7px;width:36px;height:25px;transform:none}.battle-card .card-copy{left:9px;right:9px;bottom:8px;gap:2px}.battle-card .card-copy h3{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 clamp(12px,1.7vw,16px)/1.1 var(--font-display)}.battle-card .role,.battle-card .mini-stat{display:none}.battle-card .mini-track{width:100%;height:5px;margin-top:2px}.battle-card .skill{width:100%;min-height:0;margin-top:3px;padding:0;border:0;font-size:11px;line-height:1.08}.battle-card .skill strong,.battle-card .skill span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:clamp(9px,1.2vw,11px)}.battle-card .effect-label{z-index:10}.battle-card.acting,.battle-card.hit,.battle-card.heal,.battle-card.shield{outline:0}.battle-card.front{box-shadow:0 0 22px var(--q-glow)}
.enemy-frame{position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:0;clip-path:polygon(0 8px,72% 0,76% 10px,100% 2px,98% 39%,100% 45%,96% 52%,100% 100%,18% 98%,12% 90%,0 92%);background:linear-gradient(115deg,#07090a,#20252a 54%,var(--enemy2));box-shadow:none;filter:drop-shadow(0 14px 26px #000);padding:14px}
.enemy-frame-art{position:absolute;z-index:7;inset:0;background:url("../../assets/card-v03/frames/enemy-frame.svg") center/100% 100% no-repeat;pointer-events:none}.enemy-frame .enemy-visual,.enemy-frame .enemy-info{position:relative;z-index:2}.enemy-frame .enemy-visual{border:0;border-radius:0;clip-path:polygon(0 5px,94% 0,100% 12%,96% 100%,0 96%)}.enemy-frame .enemy-identity{display:inline-block;padding:4px 11px;border-left:4px solid var(--enemy);background:linear-gradient(90deg,#171a1d,#171a1d55);clip-path:polygon(0 0,100% 0,88% 100%,0 100%);color:#f1d9d8;font-size:12px;font-weight:800;letter-spacing:.12em}.enemy-frame .intent{border:0;border-right:3px solid var(--enemy);border-radius:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--enemy2) 80%,#111));clip-path:polygon(8% 0,100% 0,100% 100%,0 100%)}.enemy-frame .bar-row{position:relative;z-index:3}.enemy-frame.acting .enemy-frame-art{filter:drop-shadow(0 0 8px var(--enemy));animation:enemy-frame-charge .38s ease-out}.enemy-frame.hit .enemy-frame-art{filter:drop-shadow(0 0 8px #fff);animation:enemy-frame-hit .32s ease-out}.enemy-frame.defeated .enemy-frame-art{filter:grayscale(1) brightness(.55)}
@keyframes sr-energy{50%{opacity:.62;transform:scale(.96)}}@keyframes sr-particles{50%{opacity:.45;translate:0 -7px}}@keyframes gem-pulse{50%{box-shadow:inset 0 1px #ffffff26,0 0 18px var(--q-glow)}}@keyframes writer-spin{to{rotate:360deg}}@keyframes state-hit{0%{opacity:.9}100%{opacity:0}}@keyframes enemy-frame-charge{45%{filter:drop-shadow(0 0 14px var(--enemy));transform:scale(.995)}}@keyframes enemy-frame-hit{35%{filter:drop-shadow(0 0 16px #fff);transform:translateX(-3px)}}
@media(max-width:520px){.hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.collection-card{min-height:248px}.card-copy{left:9px;right:9px;bottom:9px}.card-copy h3{font-size:15px}.card-copy .muted{font-size:10px}.summon-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.summon-card-grid .collection-card{min-height:0}.enemy-frame{grid-template-columns:112px minmax(0,1fr);gap:8px;padding:10px}.enemy-frame .enemy-visual{min-height:150px}.enemy-frame .enemy-info{align-self:center}.enemy-frame .enemy-identity{font-size:10px}.enemy-frame .intent{padding:5px}.enemy-frame .intent strong{font-size:12px}.enemy-frame .intent span{font-size:10px}.team-grid{gap:5px}.battle-card .card-copy{left:5px;right:5px}.battle-card .card-copy h3{font-size:11px}.battle-card .skill strong,.battle-card .skill span{font-size:8px}}
@media(prefers-reduced-motion:reduce){.quality-sr::before,.quality-sr::after,.quality-sr .rarity-badge,.enemy-frame.acting .enemy-frame-art,.enemy-frame.hit .enemy-frame-art,.ally-card .state-fx{animation:none!important;transition:none!important}.quality-sr::after{opacity:.55}.quality-frame{filter:none}}

/* Five-member presentation and the character collection gallery.
   These overrides leave battle events, frame assets and quality semantics intact. */
.shell { max-width:1100px; }
.shell > .panel { margin-top:14px; }
.main-nav { gap:8px; }
.main-nav button { min-height:48px; font-weight:650; }
.main-nav button.active { background:linear-gradient(160deg,#85243b,#461722); border-color:#c18b63; }
.shell button:focus-visible,
.shell summary:focus-visible,
.catalog-card:focus-visible { outline:2px solid #f1ca82; outline-offset:4px; }
.shell summary { min-height:44px; padding-block:11px; cursor:pointer; }

/* Counter the legacy .card > * rule without changing the existing layer contract. */
.ally-card.collection-card > :is(.art-scrim,.card-copy,.quality-frame,.state-fx) { position:absolute; }
.hero-grid { grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); gap:14px; }
.hero-grid > * { min-width:0; }
.hero-grid .collection-card { min-height:298px; height:100%; aspect-ratio:3/4; }
.hero-grid .collection-card .art-scrim { inset:40% 3px 3px; background:linear-gradient(180deg,transparent,#08090bd9 58%,#08090b 100%); }
.hero-grid .collection-card .card-copy { left:12px; right:12px; bottom:12px; gap:4px; }
.hero-grid .collection-card .card-copy h3 { font-size:18px; line-height:1.25; }
.hero-grid .collection-card .card-copy > span { font-size:12px; line-height:1.35; }
.hero-grid .collection-card .card-copy .muted { font-size:11px; color:#c1b3aa; }
.hero-grid .collection-card .card-copy button { min-height:44px; margin-top:5px; padding:8px; background:#161117e8; border-color:#7e5a48; }
.hero-grid .collection-card .rarity-badge { top:10px; left:10px; }
.hero-grid .collection-card.quality-sr .rarity-badge,
.hero-grid .collection-card.quality-ssr .rarity-badge { width:40px; height:27px; font-size:12px; }
.catalog-card { cursor:pointer; transition:filter .16s ease; }
.catalog-card.is-unowned .card-art { filter:saturate(.45) brightness(.86) contrast(1.02); }
.catalog-card.is-unowned .card-copy { color:#ded0c3; }
.catalog-card.is-unowned .card-copy .quality { color:#c4afa0; }
.catalog-card.is-unowned .quality-frame { filter:none; opacity:.78; }
.catalog-card.is-unowned.quality-sr::before,
.catalog-card.is-unowned.quality-sr::after { opacity:.2; animation:none; }
.collection-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:2px 0 20px; }
.collection-head h1 { margin:4px 0 8px; font:600 clamp(28px,4vw,40px)/1.2 var(--font-display); }
.collection-head p { margin:0; max-width:52em; }
.collection-head > .muted { flex:0 0 auto; color:#d6bd98; font-variant-numeric:tabular-nums; }
.role-filters { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 20px; padding-bottom:16px; border-bottom:1px solid #d6ad6225; }
.role-filters button { min-width:66px; min-height:44px; padding:8px 15px; border-color:#55403f; background:#171217; color:#c8b5a9; }
.role-filters button.active,
.role-filters button[aria-pressed="true"] { color:#ffde9e; border-color:#bd9355; background:#4d2630; }

/* Desktop five-across; smaller layouts preserve portrait and text size. */
.team-grid.five-team { grid-template-columns:repeat(5,minmax(0,190px)); gap:10px; align-items:start; justify-content:center; margin:10px 0 12px; }
.five-team .battle-card { aspect-ratio:4/5; min-height:0; }
.five-team .battle-card .card-art { height:77%; }
.five-team .battle-card .card-copy { z-index:5; left:9px; right:9px; bottom:9px; gap:3px; padding:0; }
.five-team .battle-card .card-copy::before { content:""; position:absolute; z-index:-1; inset:-24px -7px -7px; background:linear-gradient(180deg,transparent,#0a0b0edb 22%,#0a0b0ef5 70%); pointer-events:none; }
.five-team .battle-card .card-copy h3 { min-height:0; margin:0; font-size:15px; line-height:1.25; }
.five-team .battle-card .role { display:block; margin:0; max-width:100%; font-size:11px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.five-team .battle-card .mini-track { height:5px; margin-top:0; }
.five-team .battle-card .mini-track.sh { height:3px; }
.five-team .battle-card .skill { margin-top:1px; font-size:11px; line-height:1.25; }
.five-team .battle-card .skill strong,
.five-team .battle-card .skill span { font-size:11px; line-height:1.25; }
.five-team .battle-card .skill strong { color:#e6c895; }
.five-team .battle-card .rarity-badge { top:8px; left:8px; }
.five-team .battle-card.quality-sr .rarity-badge,
.five-team .battle-card.quality-ssr .rarity-badge { width:35px; height:25px; }
.five-team .battle-card .effect-label { top:9px; right:8px; max-width:58%; font-size:10px; }
.battle-stage > .section-head h2 { font-size:21px; }
.battle-stage > .section-head > span { align-self:center; color:#bdaca0; font-size:12px; }
.enemy-info .muted { font-size:12px; }

/* Gallery art owns the first visual plane; actions and unlocks remain separate. */
.gallery-layout { display:grid; grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr); align-items:start; gap:26px; margin:20px 0; }
.gallery-stage { position:relative; isolation:isolate; display:block; width:100%; min-width:0; min-height:360px; aspect-ratio:3/4; margin:0; padding:0; overflow:hidden; border:1px solid #97784e; border-radius:10px; background:radial-gradient(ellipse at 50% 29%,#552332 0,transparent 64%),#100d13; box-shadow:0 20px 40px #0006; }
.gallery-stage .gallery-art { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:var(--gallery-focus,50% 18%); }
.gallery-stage > .gallery-kicker { position:absolute; z-index:2; right:14px; bottom:12px; left:14px; width:fit-content; max-width:calc(100% - 28px); margin:0; padding:6px 10px; border:1px solid #b0875355; border-radius:4px; background:#100b12d9; color:#f0d3a8; font-size:11px; }
.gallery-stage > .look-placeholder { height:100%; aspect-ratio:auto; min-height:360px; border:0; border-radius:0; }
.gallery-stage .rarity-badge { top:14px; left:14px; }
.gallery-content { min-width:0; }
.gallery-kicker { margin:0 0 7px; color:#dab27a; font-size:12px; line-height:1.5; letter-spacing:.14em; }
.gallery-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.gallery-heading h1 { margin:0; font:600 clamp(28px,4vw,40px)/1.2 var(--font-display); color:#f4dfc4; }
.gallery-heading h2 { margin:0; font:600 25px/1.25 var(--font-display); color:#f4dfc4; }
.gallery-heading p { margin:6px 0 0; }
.gallery-content > h2,
.gallery-content > section > h2 { margin:22px 0 10px; font:600 20px/1.4 var(--font-display); }
.gallery-content > p { line-height:1.65; }
.gallery-content .muted { font-size:13px; }
.gallery-content .stage { margin-top:18px; padding:13px; background:#110e14; border-color:#69524455; }
.gallery-actions { display:flex; flex-wrap:wrap; gap:9px; margin:16px 0; }
.gallery-actions button { min-height:44px; min-width:100px; }
.gallery-actions .primary { border-color:#b88856; background:linear-gradient(180deg,#973149,#521d2c); }
.appearance-unlock { display:block; margin:12px 0 16px; padding:12px 14px; border-left:2px solid #bf955a; border-radius:0 6px 6px 0; background:#a3703414; color:#dfc8ab; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.appearance-unlock strong { color:#f3d39f; }
.appearance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-items:stretch; }
.appearance-tile { position:relative; display:flex; flex-direction:column; align-items:stretch; min-width:0; min-height:44px; gap:7px; margin:0; padding:7px 7px 11px; text-align:left; background:#171219; border:1px solid #55423c; border-radius:7px; color:#ede0d2; }
.appearance-tile img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:50% 15%; border-radius:3px; background:#100d12; }
.appearance-tile strong { display:block; padding:0 3px; font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.appearance-tile small { display:block; margin-top:auto; padding:0 3px; color:#bfae9e; font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.appearance-tile.is-current,
.appearance-tile[aria-pressed="true"] { border-color:#e0b776; background:#362028; }
.appearance-tile.is-current small,
.appearance-tile[aria-pressed="true"] small { color:#f0ca83; }
.appearance-tile:disabled { opacity:1; color:#d2c1b3; }
.appearance-tile.is-locked,
.appearance-tile.is-pending { background:#141116; border-color:#443934; }
.appearance-tile.is-locked img { filter:blur(14px) saturate(.45) brightness(.38) contrast(1.18); transform:scale(1.14); opacity:.62; clip-path:inset(0 round 4px); }
.appearance-tile.is-pending small { color:#ccb28f; }
.look-placeholder { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; width:100%; min-width:0; aspect-ratio:3/4; padding:12px; border:1px solid #a27e432e; border-radius:3px; background:radial-gradient(ellipse at 50% 25%,#76534320,transparent 72%),#171218; color:#bfa889; text-align:center; font-size:12px; line-height:1.6; }
.look-placeholder::before { content:"✦"; display:block; color:#a28255; font:30px/1 Georgia,serif; }
.appearance-tile.is-locked::after,
.memory-tile.is-locked::after { content:""; position:absolute; top:13px; right:13px; width:16px; height:18px; background:#edcf9b; filter:drop-shadow(0 1px 3px #000); mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M4 8V5a4 4 0 0 1 8 0v3M3 8h10v8H3z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M8 11v2' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events:none; }
.video-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:12px 0; }
.memory-tile { position:relative; display:flex; flex-direction:column; align-items:stretch; min-width:0; min-height:44px; gap:7px; padding:7px 7px 11px; border:1px solid #5d4640; border-radius:7px; background:#171218; text-align:left; }
.memory-tile img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:50% 25%; border-radius:3px; background:#0b090c; }
.memory-tile > strong,
.memory-tile > span,
.memory-tile > small { display:block; padding-inline:3px; overflow-wrap:anywhere; }
.memory-tile > strong { font-size:13px; line-height:1.4; }
.memory-tile > span,
.memory-tile > small { color:#c0ad9b; font-size:11px; line-height:1.5; }
.memory-tile .look-placeholder { aspect-ratio:16/10; min-height:90px; gap:8px; }
.memory-tile .look-placeholder::before { font-size:22px; }
.memory-tile:disabled { opacity:1; color:#c3b3a6; }
.memory-tile.is-locked { border-color:#403533; background:#120f14; }
.memory-tile.is-locked img { filter:saturate(.5) brightness(.78); }
.memory-tile.is-current,
.memory-tile[aria-pressed="true"] { border-color:#d4a96b; background:#302028; }
.gallery-video { display:block; width:100%; max-height:72vh; margin:16px 0; border:1px solid #896b48; border-radius:8px; background:#09070b; object-fit:contain; }
.modal { z-index:50; padding:20px max(14px,env(safe-area-inset-right)) 20px max(14px,env(safe-area-inset-left)); background:#08060ce8; }
.modal > .video-dialog { display:flex; flex-direction:column; gap:12px; width:min(100%,520px); max-width:520px; max-height:90vh; max-height:90dvh; margin:0; padding:16px; overflow:auto; overscroll-behavior:contain; border-color:#876747; background:#151017; }
.video-dialog .gallery-heading { flex:0 0 auto; margin:0; }
.video-dialog .gallery-heading h2 { font-size:20px; }
.video-dialog .gallery-heading button { min-height:44px; min-width:44px; padding:8px 12px; }
.video-surface { position:relative; isolation:isolate; flex:0 1 auto; width:100%; height:min(62vh,620px); height:min(62dvh,620px); min-height:180px; overflow:hidden; border-radius:6px; background:#0c090f; }
.video-surface .video-still { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:contain; opacity:1; transition:opacity .18s ease; pointer-events:none; }
.video-surface .gallery-video { position:relative; z-index:2; width:100%; height:100%; max-height:none; margin:0; border:0; border-radius:0; background:transparent; object-fit:contain; }
.video-surface.has-frame .video-still { opacity:0; }
.video-status { margin:0; color:#d5bfa6; font-size:12px; line-height:1.5; }
.video-dialog > .row,
.video-dialog > .gallery-actions { flex:0 0 auto; margin:0; }
.video-dialog > .row button { flex:1 1 120px; min-height:44px; }
.modal > .appearance-unlock { width:min(100%,460px); max-width:460px; max-height:88vh; max-height:88dvh; overflow:auto; margin:0; padding:20px; border:1px solid #a17d4e; border-radius:12px; background:#1b131c; }
.modal > .appearance-unlock h2 { margin:0 0 10px; color:#f1d29e; font:600 25px/1.3 var(--font-display); }
.modal > .appearance-unlock > img { display:block; width:min(100%,250px); max-height:48vh; margin:14px auto; object-fit:contain; border-radius:5px; }
.modal > .appearance-unlock > .look-placeholder { width:min(100%,210px); max-height:36vh; margin:14px auto; }
.modal > .appearance-unlock .row,
.modal > .appearance-unlock .gallery-actions { margin-bottom:0; }
.modal > .appearance-unlock button { min-height:44px; flex:1 1 120px; }

@media(min-width:840px) {
  .gallery-stage { position:sticky; top:18px; }
}
@media(min-width:521px) and (max-width:839px) {
  .team-grid.five-team { grid-template-columns:repeat(6,minmax(0,90px)); gap:10px; }
  .five-team .battle-card { grid-column:span 2; }
  .five-team .battle-card:nth-child(4) { grid-column:2/span 2; }
  .five-team .battle-card:nth-child(5) { grid-column:4/span 2; }
  .gallery-layout { grid-template-columns:minmax(230px,.9fr) minmax(0,1.1fr); gap:18px; }
  .appearance-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .gallery-layout { grid-template-columns:minmax(0,1fr); gap:20px; margin-top:16px; }
  .gallery-stage { width:min(100%,420px); min-height:0; aspect-ratio:3/4; justify-self:center; }
  .gallery-stage > .look-placeholder { min-height:0; }
  .gallery-heading { gap:10px; }
  .gallery-heading h1 { font-size:30px; }
  .gallery-content > h2,
  .gallery-content > section > h2 { margin-top:20px; }
  .appearance-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .appearance-tile { padding:5px 5px 9px; gap:6px; }
  .appearance-tile strong { font-size:12px; }
  .appearance-tile small { font-size:11px; }
  .appearance-tile.is-locked::after { top:10px; right:10px; width:14px; height:16px; }
  .gallery-actions { gap:8px; }
  .gallery-actions button { flex:1 1 120px; }
}
@media(max-width:520px) {
  .shell { padding:10px 12px calc(18px + env(safe-area-inset-bottom)); }
  .topbar { height:auto; min-height:56px; gap:10px; flex-wrap:wrap; padding-block:8px; }
  .brand { font-size:20px; letter-spacing:.06em; }
  .resources { gap:5px; flex-wrap:wrap; font-size:11px; }
  .resource { padding:5px 7px; }
  .wallet { gap:9px; margin:9px 0 13px; font-size:12px; }
  .wallet button { margin-left:auto; font-size:12px; padding:8px 11px; }
  .main-nav { gap:6px; margin:10px 0; }
  .main-nav button { min-height:46px; padding:8px 5px; font-size:14px; }
  .panel { padding:14px 12px; border-radius:11px; }
  .hero-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .hero-grid .collection-card { min-height:262px; }
  .hero-grid .collection-card .card-copy { left:10px; right:10px; bottom:10px; gap:3px; }
  .hero-grid .collection-card .card-copy h3 { font-size:16px; }
  .hero-grid .collection-card .card-copy > span { font-size:11px; }
  .hero-grid .collection-card .card-copy .muted { font-size:10px; }
  .hero-grid .collection-card .rarity-badge { top:8px; left:8px; }
  .hero-grid .collection-card.quality-sr .rarity-badge,
  .hero-grid .collection-card.quality-ssr .rarity-badge { width:36px; height:25px; font-size:11px; }
  .hero-grid .collection-card .role-seal { top:8px; right:8px; width:25px; height:25px; font-size:11px; }
  .collection-head { display:block; margin-bottom:14px; }
  .collection-head h1 { margin-top:4px; font-size:29px; }
  .collection-head > .muted { display:block; margin-top:10px; }
  .collection-head p { font-size:13px; line-height:1.6; }
  .role-filters { gap:6px; margin-top:12px; padding-bottom:12px; }
  .role-filters button { min-width:62px; padding:8px 11px; font-size:13px; }
  .team-grid.five-team { grid-template-columns:repeat(2,minmax(0,190px)); gap:9px; }
  .five-team .battle-card:nth-child(5) { grid-column:1/-1; width:calc((100% - 9px)/2); justify-self:center; }
  .five-team .battle-card .card-copy { left:8px; right:8px; bottom:8px; gap:2px; }
  .five-team .battle-card .card-copy h3 { font-size:14px; }
  .five-team .battle-card .role,
  .five-team .battle-card .skill strong,
  .five-team .battle-card .skill span { font-size:11px; }
  .battle-stage > .section-head { margin-top:12px; margin-bottom:8px; }
  .battle-stage > .section-head h2 { font-size:19px; }
  .battle-stage > .section-head > span { max-width:48%; font-size:11px; }
  .bottom-actions { padding-top:14px; }
  .video-grid { gap:9px; }
  .memory-tile { padding:6px 6px 10px; }
  .gallery-video { max-height:70vh; }
}
@media(prefers-reduced-motion:reduce) {
  .catalog-card { transition:none; }
  .video-surface .video-still { transition:none; }
}

/* Eclipse-lord capture: five battle stages, persistent loyalty and mandatory story payoff. */
.eclipse-lord-panel{position:relative;min-height:560px;padding-top:300px!important;border-color:#8b6bc078!important;background:linear-gradient(180deg,transparent 18%,#100b1bd9 53%,#0b0812 76%),var(--lord-panel-art,url('../../assets/card-v04/characters/eclipse_lord/d.webp')) 50% 8%/100% auto no-repeat,#0b0812!important;box-shadow:inset 0 0 70px #5b2f9552,0 18px 50px #0008!important}
.collection-card.is-unowned{cursor:default;isolation:isolate;background:#09080d}.collection-card.is-unowned .card-art{filter:blur(18px) grayscale(.55) brightness(.27) contrast(1.2);opacity:.48;transform:scale(calc(var(--portrait-scale,1.1) + .12))}.collection-card.is-unowned .art-scrim{background:linear-gradient(180deg,#07060b5c 0%,#07060bc7 48%,#09080df8 100%)}.collection-card.is-unowned:after{content:"LOCKED";position:absolute;z-index:8;left:50%;top:42%;translate:-50% -50%;padding:6px 13px;border:1px solid #d9b56a70;border-radius:99px;background:#08070bbd;color:#e6c98c;font-size:10px;letter-spacing:.22em;box-shadow:0 0 28px #000}.collection-card.is-unowned .quality-frame{filter:grayscale(1) brightness(.35)}.collection-card.is-unowned .rarity-badge{opacity:.45}.collection-card.is-unowned .card-copy{opacity:.78}.collection-card.is-unowned .card-enter{color:#8e818c}
.lord-requirements{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.lord-requirements span{padding:10px;border:1px solid #6b586f;border-radius:8px;background:#0d0913cc;color:#a897ae;font-size:11px}.lord-requirements b{display:block;margin-top:4px;color:#d7c4db;font-size:14px}.lord-requirements span.met{border-color:#739a78;color:#9fd0a5}.lord-requirements span.met b{color:#c8efcc}
.lord-requirements span.warning{border-color:#bd815f;color:#d9ac8d}.lord-requirements span.warning b{color:#ffd0ad}.notice.warning{border-color:#bd815f80;background:#2a1712;color:#edbea0}
.campaign-journey{margin:12px 0;padding:14px;border:1px solid #9c754f78;border-radius:12px;background:radial-gradient(circle at 92% 0,#8f582d2b,transparent 42%),linear-gradient(145deg,#241a17,#100d12);box-shadow:inset 0 1px #e6bd7b14}.campaign-journey header{display:flex;justify-content:space-between;gap:12px;align-items:end}.campaign-journey h2{margin:3px 0 0;color:#f1d8ad;font:600 20px/1.2 var(--font-display)}.campaign-journey header>strong{color:#e8c27d;font-size:13px;white-space:nowrap}.campaign-track{height:9px;margin:12px 0 9px;overflow:hidden;border:1px solid #765b4280;border-radius:99px;background:#0a080b}.campaign-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9a5e35,#f0c274);box-shadow:0 0 16px #d58b48;transition:width .35s ease}.campaign-journey footer{display:flex;justify-content:space-between;gap:10px;color:#a9958e;font-size:11px}.campaign-journey footer b{color:#d9bd8a;text-align:right}.campaign-journey.complete{display:flex;justify-content:space-between;align-items:center}.campaign-journey.complete strong{color:#9bd2a3}
.campaign-upgrade{display:flex;justify-content:space-between;width:100%;margin-top:12px;padding:10px 12px;border-color:#b98a5066;background:#2d1d18;color:#f0c887;font-size:12px}
.promotion-preview{margin:18px 0;padding:16px;border:1px solid #b88b4c66;border-radius:12px;background:linear-gradient(145deg,#261c17,#131016)}.promotion-preview>.eyebrow{margin:0 0 12px}.promotion-power{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding-bottom:13px;border-bottom:1px solid #755d4355}.promotion-power span{display:flex;flex-direction:column;color:#aa9ca4;font-size:12px}.promotion-power span:last-child{text-align:right}.promotion-power b{color:#f1d39b;font:600 25px/1.15 var(--font-display)}.promotion-power i{color:#c89c58;font-style:normal;font-size:22px}.promotion-power small{margin-top:4px;color:#91ca97}.promotion-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}.promotion-stat-grid span{display:flex;flex-direction:column;gap:3px;padding:9px;border:1px solid #6d5a4a66;border-radius:8px;background:#0c0a0dc9}.promotion-stat-grid small{color:#a999a2;font-size:10px}.promotion-stat-grid b{color:#e7d8c3;font-size:12px}.promotion-stat-grid em{color:#91ca97;font-style:normal;font-size:11px}
.eclipse-lord-panel:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 26%,#ac79ff2a,transparent 38%)}
.eclipse-lord-panel>*{position:relative;z-index:1}.eclipse-lord-panel h1,.lord-battle-head h1{font-family:var(--font-display);color:#f2dcff}.eclipse-lord-panel .primary{width:100%;background:linear-gradient(110deg,#6a3e91,#bd79df 48%,#6e3a8d);border-color:#d7a1ef}
.lord-battle-head{display:grid;grid-template-columns:1fr minmax(180px,.72fr);gap:18px;align-items:end;margin:12px 0;padding:17px;border:1px solid #8c64b34d;border-radius:12px;background:linear-gradient(115deg,#1b1028,#0e0b16)}
.lord-battle-head h1{margin:3px 0;font-size:28px}.lord-progress{margin:12px 0}.lord-progress-head{display:flex;justify-content:space-between;align-items:end;color:#d7c1e6}.lord-progress-head strong{color:#f2d6ff;font:600 24px/1 var(--font-display)}
.lord-progress-track{height:10px;margin:8px 0;background:#22172b;border:1px solid #79529880;border-radius:99px;overflow:hidden}.lord-progress-track i{display:block;height:100%;background:linear-gradient(90deg,#67408f,#e6a7ff);box-shadow:0 0 18px #bd78e8;transition:width .45s ease}
.lord-progress-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.lord-progress-steps span{display:grid;place-items:center;aspect-ratio:1;max-width:28px;border:1px solid #70587b;border-radius:50%;color:#7d6f83;font-size:11px}.lord-progress-steps span.complete{border-color:#e4b8f2;background:#8052a9;color:#fff;box-shadow:0 0 12px #bf78e766}
.lord-next-stage{display:flex;justify-content:space-between;gap:12px;margin:18px 0;padding:12px;border:1px solid #7f5d934d;background:#160f20}.lord-next-stage span{color:#ad99b8}.lord-next-stage strong{color:#eacff7}
.lord-reward-modal{position:fixed;z-index:70;inset:0;display:grid;place-items:center;padding:24px;background:#08050cd9;backdrop-filter:blur(7px)}.lord-reward-modal>div{width:min(100%,430px);padding:24px;border:1px solid #c691e1;border-radius:14px;background:radial-gradient(circle at 50% 0,#65378a80,transparent 45%),linear-gradient(145deg,#261333,#100c17);box-shadow:0 30px 90px #000c,0 0 45px #8f4fbd55;text-align:center;animation:result-reveal .45s ease both}.lord-reward-modal h2{margin:7px 0;color:#f2dcff;font:600 28px/1.3 var(--font-display)}.lord-reward-modal p{color:#cbb8d4}.lord-reward-modal button{width:100%;margin-top:12px;background:linear-gradient(100deg,#74429b,#dda0f1,#74429b);border-color:#efc5ff;color:#170c1c;font-weight:700}
.stage-101,.stage-102,.stage-103,.stage-104,.stage-105{--enemy:#9b62c2;--enemy2:#22102f}.stage-101 .enemy-art,.stage-102 .enemy-art,.stage-103 .enemy-art,.stage-104 .enemy-art,.stage-105 .enemy-art{object-position:50% 10%;filter:saturate(1.05) contrast(1.04)}
.video-progress-note{margin:0;color:#bda8c6;font-size:11px;line-height:1.6}
@media(max-width:560px){.eclipse-lord-panel{min-height:520px;padding-top:270px!important}.lord-battle-head{grid-template-columns:1fr;gap:5px}.lord-battle-head h1{font-size:24px}.lord-progress-steps span{max-width:24px}.lord-reward-modal{padding:16px}}
.empty-slot { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; border:1px dashed #8a6d4c; border-radius:8px; background:radial-gradient(ellipse at 50% 30%,#59332944,transparent 80%),#141116; color:#bca787; }
.empty-slot > span { color:#d6ad62; font:32px/1 Georgia,serif; }
.empty-slot > small { font-size:12px; }
.skill-preview .row { margin-top:14px; }
.enemy-frame { padding-right:32px; }
@media(max-width:520px) { .enemy-frame { padding-right:22px; } .collection-head > .muted { flex:auto; } }