main{min-height:calc(100vh - 162px);background-size:cover;background-position:center}
main[data-page="home"]{background-image:linear-gradient(#140e0d9e,#140e0de8),url("assets/backgrounds/home.webp")}
main[data-page="battle"]{background-image:linear-gradient(#140e0d9e,#140e0de8),url("assets/backgrounds/battle.webp")}
.hero{min-height:300px!important;background:linear-gradient(90deg,#000d 0,#0008 42%,#0001),url("assets/backgrounds/key-art.webp") center/cover!important}
.hero:after{display:none!important}
.hero h2{margin-top:55px!important;text-shadow:0 3px 8px #000}
.hero p{text-shadow:0 2px 5px #000;color:#f1dfc8!important}
.mission{background:linear-gradient(90deg,#30231cee,#211814ee)!important}
.card{min-height:285px!important;padding:0!important;background:#17110e!important}
.card .cat{height:205px!important;margin:0!important;filter:none!important}
.card .cat img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 23%}
.card-info{padding:9px 12px 12px;background:linear-gradient(#241813,#130e0d)}
.card .stars{font-size:11px}
.card .power{margin-top:8px;padding-top:7px;font-size:11px}
.badge{z-index:2;background:#000b!important}
.summon-stage{min-height:590px;padding:330px 18px 28px!important;background:linear-gradient(#0000 30%,#120d0cdd 68%),url("assets/backgrounds/summon.webp") center/cover!important}
.summon-stage h2{margin:10px 0}
.summon-stage p{color:#eadbc8!important}
.chapter{background:linear-gradient(120deg,#35251dee,#201612ee)!important}
.battlefield{min-height:540px!important;background:linear-gradient(#15100ca8,#15100cbb),url("assets/backgrounds/battle.webp") center/cover!important}
.fighter{padding:5px 4px 9px!important;overflow:hidden}
.fighter .face{height:82px;margin:-5px -4px 5px;font-size:initial!important}
.fighter .face img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.enemy-face{font-size:48px;padding-top:12px}
.fighter b{font-size:11px!important}
.fighter small{font-size:9px}

/* V3 card frame: preserve the complete portrait instead of cropping it. */
.card{padding:7px!important;background:linear-gradient(145deg,color-mix(in srgb,var(--faction) 32%,#241812),#120d0b 72%)!important;border:2px solid color-mix(in srgb,var(--faction) 72%,#d9b971)!important;box-shadow:inset 0 0 0 2px #e8c77b35,0 10px 24px #0009!important}
.card .cat{height:auto!important;aspect-ratio:2/3;margin:2px!important;border:1px solid #e9c97966;border-radius:11px 11px 4px 4px;overflow:hidden;background:#120e0c;box-shadow:inset 0 0 18px #0008}
.card .cat img{width:100%;height:100%;object-fit:contain!important;object-position:center!important}
.card-info{margin-top:7px;border-top:1px solid #e8c77b55;border-radius:3px 3px 10px 10px;padding:9px 10px 11px!important;background:linear-gradient(180deg,#2a1c17,#120d0b)!important}
.badge{top:15px!important;right:15px!important;border:1px solid #e8c77b66;box-shadow:0 2px 8px #000}
.roster-tools{position:sticky;top:86px;z-index:4;padding:10px;margin:0 -4px 12px;background:#160f0de8;border:1px solid #4a352a;border-radius:14px;backdrop-filter:blur(12px)}
.roster-tools input{width:100%;border:1px solid #654535;border-radius:10px;background:#0e0a08;color:#f7edda;padding:11px 12px;font-size:15px;outline:none}
.roster-tools input:focus{border-color:#e9b94f;box-shadow:0 0 0 3px #e9b94f22}
.filter-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.filter-row button{border:1px solid #594033;border-radius:9px;background:#2a1d18;color:#c8b9a2;padding:8px 4px;font-weight:700}
.filter-row button.active{background:#d39a3c;color:#21140b;border-color:#f2c869}
.locked-card{filter:saturate(.45);opacity:.72}
.locked-card .cat{position:relative}
.locked-card .cat:after{content:"未獲得";position:absolute;inset:auto 10px 10px;background:#0b0807cc;border:1px solid #d9b97166;border-radius:20px;padding:6px;color:#ead9b5;font-size:12px;text-align:center}
.roster-grid .empty{grid-column:1/-1}
.grade{position:absolute;z-index:3;top:15px;left:15px;padding:4px 8px;border-radius:20px;background:#111c;border:1px solid currentColor;font-size:10px;font-weight:900;letter-spacing:.5px;box-shadow:0 2px 8px #000}.rarity-3{--rarity:#62a9df}.rarity-4{--rarity:#b879ef}.rarity-5{--rarity:#ffcb4a}.card[class*="rarity-"]{border-color:var(--rarity)!important;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rarity) 32%,transparent),0 10px 24px #0009!important}.card[class*="rarity-"] .grade,.card[class*="rarity-"] .stars{color:var(--rarity)}.rarity-4 .cat{box-shadow:inset 0 0 20px #7c35b855,0 0 13px #9c59dc3d}.rarity-5{background:linear-gradient(145deg,#6b431d,#17100c 72%)!important}.rarity-5 .cat{border-color:#ffe39a!important;box-shadow:inset 0 0 24px #ffb52d55,0 0 18px #ffca4c66!important}.rarity-5:not(.locked-card):before{content:"";position:absolute;z-index:2;inset:-50%;background:linear-gradient(105deg,transparent 42%,#fff6c255 49%,transparent 56%);animation:legend-shine 3.6s ease-in-out infinite;pointer-events:none}.rarity-5 h3{color:#ffe5a0;text-shadow:0 0 9px #e99b28}.rarity-4 h3{color:#e7c6ff}@keyframes legend-shine{0%,60%{transform:translateX(-55%)}100%{transform:translateX(55%)}}
.battle-link{text-decoration:none;display:inline-block;text-align:center}
.rarity-6{--rarity:#d89cff;background:linear-gradient(145deg,#7b31ad,#261038 48%,#8a621c)!important;border-color:#efd08a!important;box-shadow:inset 0 0 0 2px #d99cff88,0 0 22px #bb55ff99,0 10px 28px #000b!important}.rarity-6 .cat{border-color:#f7d67d!important;box-shadow:inset 0 0 28px #8b35c766,0 0 24px #d678ffbb!important}.rarity-6:not(.locked-card):before{content:"";position:absolute;z-index:2;inset:-55%;background:linear-gradient(105deg,transparent 40%,#fff4bd77 48%,#dc8cff99 51%,transparent 59%);animation:legend-shine 2.7s ease-in-out infinite;pointer-events:none}.rarity-6 h3{color:#f8dc91;text-shadow:0 0 8px #d86cff,0 0 16px #7d23ac}.card-id{display:block;color:#d9a7ff;font-size:10px;letter-spacing:.7px;margin-top:-3px;margin-bottom:5px}
.battle-screen{position:fixed;z-index:20;inset:0;margin:auto;width:min(100%,900px);height:100dvh;background:#111;overflow:hidden}
.battle-hud{height:64px;display:flex;align-items:center;gap:12px;padding:9px 14px;background:linear-gradient(180deg,#130e0df2,#130e0dbb);border-bottom:1px solid #e7b75d55;position:absolute;z-index:4;inset:0 0 auto}
.battle-hud div{display:grid}.battle-hud small{color:#c8b9a2}.battle-back{width:42px;height:42px;border:1px solid #72513b;border-radius:50%;background:#211613;color:#f6dfae;font-size:30px;line-height:1}.speed{margin-left:auto;padding:6px 10px;border:1px solid #d8a94f66;border-radius:15px;color:#f0c76e;font-weight:800}
.battle-screen .battlefield{height:100%;min-height:0!important;border:0!important;border-radius:0!important;padding:78px 12px 18px!important;display:grid;grid-template-rows:1fr auto 1fr 112px auto;gap:4px;background:linear-gradient(#15100c40,#15100c88),url("assets/backgrounds/battle.webp") center/cover!important}
.battle-side{display:flex;justify-content:center;align-items:center;gap:8px;min-height:0}
.battle-screen .fighter{width:min(31%,150px);height:100%;max-height:245px;display:flex;flex-direction:column;justify-content:flex-end;background:transparent!important;border:0!important;overflow:visible!important;animation:unit-arrive .45s ease-out both}
.battle-screen .fighter .face{height:calc(100% - 53px);min-height:105px;margin:0!important;overflow:visible!important;filter:drop-shadow(0 10px 8px #000b)}
.battle-screen .fighter .face img{object-fit:contain!important;object-position:center bottom!important}
.battle-screen .fighter b,.battle-screen .fighter small{background:#110c0cdd;padding:2px 5px}.battle-screen .fighter b{border-radius:6px 6px 0 0}
.battle-screen .hp{width:100%;height:7px;margin:0;border:1px solid #000}
.enemy-side .fighter{animation-name:enemy-arrive}.ally-side .fighter{animation-name:ally-arrive}
.battle-flare{text-align:center;color:#ffd777;font:900 24px serif;text-shadow:0 0 14px #ff7b2d;letter-spacing:8px}
.battle-screen .log{height:108px;background:#0c0908d9;border:1px solid #6e4c35;box-shadow:0 8px 24px #0008}
.battle-screen .battle-actions{padding-bottom:env(safe-area-inset-bottom)}
@keyframes ally-arrive{from{opacity:0;transform:translateX(-45px)}to{opacity:1;transform:none}}
@keyframes enemy-arrive{from{opacity:0;transform:translateX(45px)}to{opacity:1;transform:none}}
@media(orientation:landscape){.battle-screen .battlefield{grid-template-columns:1fr 55px 1fr;grid-template-rows:1fr 105px auto}.enemy-side{grid-column:3;grid-row:1}.ally-side{grid-column:1;grid-row:1}.battle-flare{grid-column:2;grid-row:1;align-self:center}.battle-screen .log{grid-column:1/4;grid-row:2}.battle-screen .battle-actions{grid-column:1/4;grid-row:3}.battle-screen .fighter{max-height:330px}}
.pool-box{margin:13px auto 0;padding:12px;border-radius:14px;background:#120d0cce;border:1px solid #6a4937}.pool-box>b,.pool-box>small{display:block}.pool-box>b{font:800 18px serif}.pool-box>small{margin-top:3px;color:#d2c1ae}.paid-pool{border-color:#d5a943;box-shadow:inset 0 0 22px #b7802d24}.paid-pool>b{color:#ffd975}.free-pool{border-color:#66819a}.free-pool>b{color:#b9ddf7}.pool-box .summon-actions{margin-top:10px}
.ur-reveal{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,#9b642b 0,#2b1608 37%,#050302 78%);animation:ur-open .65s ease-out;color:#fff;text-align:center}.ur-rays{position:absolute;width:150vmax;height:150vmax;background:repeating-conic-gradient(from 0deg,#ffe9a000 0 8deg,#ffe9a02b 9deg 12deg);animation:ur-spin 18s linear infinite}.ur-particles{position:absolute;inset:0;background-image:radial-gradient(circle,#fff5b8 0 2px,transparent 3px),radial-gradient(circle,#ffc446 0 2px,transparent 3px);background-size:73px 73px,109px 109px;animation:ur-stars 2.4s linear infinite}.ur-title{position:absolute;z-index:3;top:5vh;display:grid;gap:4px;text-shadow:0 0 12px #ffb82f}.ur-title small{font-size:10px;letter-spacing:4px;color:#ffe9a6}.ur-title strong{font:900 clamp(28px,7vw,48px) serif;color:#fff0b0}.ur-portrait{position:absolute;z-index:2;top:14vh;bottom:15vh;width:min(82vw,460px);animation:ur-rise .9s cubic-bezier(.2,.9,.25,1.15)}.ur-portrait img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 18px #ffda68) drop-shadow(0 18px 20px #000)}.ur-name{position:absolute;z-index:4;bottom:9vh;font:900 27px serif;color:#fff0bd;text-shadow:0 2px 8px #000}.ur-name small{display:block;font:700 12px sans-serif;color:#e9cf94;margin-top:4px}.ur-reveal button{position:absolute;z-index:5;bottom:2.5vh;border:1px solid #ffe196;border-radius:22px;padding:10px 22px;background:#2b180ae8;color:#ffe9af;font-weight:900}.ur-reveal:before{content:"";position:absolute;z-index:1;width:70vmin;height:70vmin;border:3px solid #ffd35d;border-radius:50%;box-shadow:0 0 30px #ffc13b,inset 0 0 35px #ffc13b;animation:ur-ring 1.4s ease-out infinite}@keyframes ur-open{from{opacity:0;filter:brightness(3)}to{opacity:1;filter:none}}@keyframes ur-spin{to{transform:rotate(360deg)}}@keyframes ur-stars{to{background-position:0 140px,0 210px}}@keyframes ur-rise{from{opacity:0;transform:translateY(90px) scale(.75)}to{opacity:1;transform:none}}@keyframes ur-ring{0%{transform:scale(.55);opacity:0}35%{opacity:1}100%{transform:scale(1.35);opacity:0}}