:root{color-scheme:dark;--ink:#0a0e15;--panel:#121924;--line:#604d37;--paper:#f6e8d0;--dim:#b4b4b5;--gold:#f5c971;--fire:#ff7550;--ice:#8be5ff;font-family:Arial,"Noto Sans TC","Microsoft JhengHei",sans-serif}
*{box-sizing:border-box}html{min-width:320px}body{margin:0;background:radial-gradient(ellipse 70% 30% at 50% 5%,#50221973,transparent 70%),repeating-linear-gradient(135deg,#111721 0 1px,#0a0e15 1px 56px);color:var(--paper)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.shell{max-width:1500px;margin:auto;min-height:100dvh;padding:0 28px 20px}.topbar{min-height:88px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #8d633a66;gap:16px}.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;font-weight:900;letter-spacing:.07em;font-size:20px}.brand-mark{display:grid;place-items:center;width:48px;height:48px;background:var(--fire);color:#111;font-family:Georgia,serif;font-style:italic;font-size:34px;clip-path:polygon(0 0,100% 0,100% 77%,76% 100%,0 100%)}.brand-fire{color:var(--gold)}.brand small{display:block;color:#aeb2bd;font-size:9px;letter-spacing:.18em;margin-top:2px}.topbar-actions{display:flex;gap:8px;align-items:center}.topbar-button{min-height:42px;display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;color:var(--paper);background:#151820;border:1px solid #706149;text-decoration:none;font-size:13px;font-weight:700}.topbar-button:hover{background:#2b261f;border-color:var(--gold)}.intro{position:relative;display:flex;justify-content:space-between;align-items:center;min-height:182px;padding:23px 0 18px;overflow:hidden}.intro:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:linear-gradient(90deg,var(--fire),var(--gold),transparent)}.mode-label,.section-head small,.panel-intro small{color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.16em}.intro h1{margin:9px 0 9px;font-size:clamp(36px,5vw,70px);line-height:1.03;letter-spacing:.08em;text-shadow:0 4px 25px #ff69304c}.intro p{margin:0;max-width:700px;color:#d6ccbe;font-size:15px;line-height:1.6}.rift-emblem{flex:none;position:relative;width:125px;height:125px;border:4px solid #a34830;border-radius:50%;box-shadow:0 0 28px #f7622d6b,inset 0 0 30px #f7622d5c;transform:rotate(-20deg)}.rift-emblem:before,.rift-emblem:after{content:"";position:absolute;inset:14px;border:2px dashed #ffb46f9c;border-radius:50%}.rift-emblem:after{inset:40px;border-style:solid;background:#ff833b;box-shadow:0 0 24px #ff834c}.rift-emblem span{position:absolute;inset:-18px;border:2px dotted #cb673b99;border-radius:50%}.status-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #66533c;background:#111722}.status-bar>div{padding:13px 18px;border-right:1px solid #66533c}.status-bar>div:last-child{border-right:0}.status-bar small{display:block;color:#b3ac9f;font-size:11px;margin-bottom:3px}.status-bar strong{color:#ffe0a1;font-size:25px;font-variant-numeric:tabular-nums}.main-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr);gap:18px;margin-top:18px}.arena-panel,.command-panel{min-width:0;border:1px solid #5f4a34;background:#0c131c}.arena-panel{padding:16px 16px 14px;box-shadow:inset 0 0 42px #ea4e1510}.section-head{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:12px}.section-head h2,.panel-intro h2{font-size:25px;margin:5px 0 0}.battle-state{color:#ffd48b;font-size:12px;font-weight:700;text-align:right}.arena{position:relative;border:1px solid #9a5a32;background:radial-gradient(ellipse 30% 80% at 100% 50%,#a3352191,transparent 80%),repeating-linear-gradient(105deg,#151f2a 0 30px,#18232d 30px 32px,#101923 32px 65px);padding:10px 0;overflow:hidden;min-height:438px}.arena:before{content:"";position:absolute;left:1.2%;top:0;bottom:0;width:10px;background:linear-gradient(90deg,#f4a64e,#67291e,#ffc06b);box-shadow:0 0 22px #ff612e}.arena:after{content:"";position:absolute;right:-12px;top:0;bottom:0;width:30px;background:repeating-linear-gradient(180deg,#ff7c4b99 0 18px,#58151e 18px 28px);box-shadow:0 0 34px #ff6739}.lane{position:relative;height:103px;border-bottom:1px solid #db955440;isolation:isolate}.lane:last-child{border-bottom:0}.lane:before{content:"";position:absolute;top:50%;left:2%;right:0;border-top:2px dashed #a5774b35}.lane-number{position:absolute;top:8px;left:20px;z-index:2;color:#aeaeac;font-size:10px;font-weight:700;letter-spacing:.12em}.slot{position:absolute;z-index:3;top:31px;width:58px;height:63px;transform:translateX(-50%);border:1px dashed #d5aa6b8c;background:#171f2acc;color:#e7d2aa;display:grid;place-items:center;padding:0;overflow:visible}.slot:hover{border-color:#f9c980;background:#3c2c21}.slot.is-occupied{border-style:solid;background:#172029;box-shadow:inset 0 -3px #fff2}.slot.is-selected{outline:3px solid var(--gold);outline-offset:2px}.slot.is-unavailable{cursor:default;opacity:.62}.slot .plus{font-size:21px;line-height:1}.unit-figure{display:block;width:39px;height:44px;filter:drop-shadow(0 0 9px var(--hero-color))}.unit-level{position:absolute;right:-7px;top:-10px;min-width:21px;height:21px;padding:3px;background:#e6b669;color:#171018;border-radius:50%;font-size:10px;font-weight:900}.unit-health{position:absolute;left:5px;right:5px;bottom:3px;height:3px;background:#702c30}.unit-health span{display:block;height:100%;background:#79e1ad}.unit-weapon-label{position:absolute;bottom:-15px;left:50%;white-space:nowrap;transform:translateX(-50%);font-size:9px;color:#f9e5bc}.enemy{position:absolute;top:36px;z-index:5;width:35px;height:47px;transform:translateX(-50%);transition:left .1s linear;filter:drop-shadow(0 0 8px #be3860)}.enemy.is-armored{filter:drop-shadow(0 0 9px #e8ad74)}.enemy.is-boss{width:57px;height:68px;top:19px;filter:drop-shadow(0 0 18px #e65053)}.enemy svg{width:100%;height:100%}.enemy-health{position:absolute;bottom:-4px;left:0;right:0;height:4px;background:#4b2232}.enemy-health span{display:block;height:100%;background:#fb8e68}.effect{position:absolute;z-index:6;pointer-events:none;top:50%;transform:translateY(-50%)}.effect.is-shot{height:3px;border-radius:10px;background:var(--effect-color);box-shadow:0 0 10px 3px var(--effect-color);animation:bolt .28s ease-out both}.effect.is-hit,.effect.is-hurt,.effect.is-gate{width:22px;height:22px;border:2px solid var(--effect-color);border-radius:50%;box-shadow:0 0 16px var(--effect-color);animation:burst .5s ease-out both}.effect-amount{position:absolute;top:-29px;left:0;font-weight:900;font-size:14px;color:var(--effect-color);text-shadow:0 2px 3px black;animation:damage .5s both}.arena-foot{display:flex;justify-content:space-between;gap:10px;padding-top:9px;color:#b99b76;font-size:11px;font-weight:800}.command-panel{padding:16px;display:flex;flex-direction:column;gap:13px}.panel-intro p{color:#c7c1b6;line-height:1.55;font-size:13px;margin:7px 0 0}.roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hero-card{display:flex;text-align:left;gap:8px;align-items:center;min-height:88px;border:1px solid #6a5943;background:#17202c;color:var(--paper);padding:7px}.hero-card:hover{background:#25303c}.hero-card.is-selected{border-color:var(--gold);box-shadow:inset 0 -3px var(--gold)}.hero-card:disabled{opacity:.48;cursor:default}.hero-card .unit-figure{flex:none}.hero-card strong{display:block;font-size:15px}.hero-card small{display:block;font-size:11px;line-height:1.35;color:#c7bca9;margin-top:4px}.hero-card em{display:block;font-size:11px;font-style:normal;color:var(--gold);margin-top:3px}.unit-detail{min-height:47px;padding:10px;border-left:3px solid #b48d59;background:#20242b;color:#e7d7b9;font-size:12px;line-height:1.5}.unit-detail strong{color:#ffe1a1}.unit-detail button{margin-left:10px;padding:6px 9px;background:#4b3524;border:1px solid #b48d59;color:#ffe6b0;font-weight:700}.unit-detail button:disabled{opacity:.45;cursor:default}.action-panel{display:grid;gap:8px}.primary-action{min-height:53px;background:linear-gradient(100deg,#ff6946,#ffb450);border:1px solid #ffcd83;box-shadow:4px 4px #7b402b;color:#180e0b;font-size:17px;font-weight:900}.primary-action:hover{filter:brightness(1.12)}.primary-action:disabled{filter:grayscale(.8);opacity:.5;cursor:default}.secondary-action{min-height:40px;background:#171e29;border:1px solid #6a5943;color:var(--paper);font-size:13px;font-weight:700}.boon-panel{display:grid;gap:8px}.boon-panel button{min-height:56px;text-align:left;background:#27251f;border:1px solid #b18648;color:#ffdf9c;padding:8px 10px;font-weight:800}.boon-panel button small{display:block;font-weight:400;color:#d1c8b7;margin-top:3px}.message{min-height:37px;color:#e9cca2;font-size:12px;line-height:1.5}.footer{display:flex;justify-content:space-between;gap:12px;margin-top:18px;color:#a9a6a5;font-size:11px;border-top:1px solid #644f36;padding-top:12px}.footer span:first-child{max-width:70ch}
.arena-panel{align-self:start}
@keyframes bolt{from{opacity:0;transform:translateY(-50%) scaleX(.2)}35%{opacity:1}to{opacity:0;transform:translateY(-50%) scaleX(1)}}@keyframes burst{from{opacity:1;transform:translateY(-50%) scale(.25)}to{opacity:0;transform:translateY(-50%) scale(2.6)}}@keyframes damage{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-22px)}}
@media(max-width:900px){.main-layout{grid-template-columns:1fr}.command-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.panel-intro,.roster,.unit-detail,.action-panel,.boon-panel,.message{grid-column:span 1}.panel-intro,.roster{grid-column:span 2}.roster{grid-template-columns:repeat(4,minmax(0,1fr))}.rift-emblem{width:95px;height:95px}}
@media(max-width:600px){.shell{padding:0 10px 16px}.topbar{min-height:67px}.brand{font-size:15px;gap:6px}.brand-mark{width:37px;height:37px;font-size:27px}.brand small{font-size:7px}.topbar-actions{gap:4px}.topbar-button{font-size:11px;min-height:38px;padding:6px 8px}.intro{min-height:145px}.intro h1{font-size:42px}.intro p{font-size:12px;max-width:260px}.rift-emblem{width:64px;height:64px;margin-right:8px}.rift-emblem:before{inset:7px}.rift-emblem:after{inset:20px}.status-bar>div{padding:9px 7px}.status-bar small{font-size:9px}.status-bar strong{font-size:19px}.main-layout{margin-top:10px;gap:10px}.arena-panel{padding:9px}.arena{min-height:366px}.lane{height:86px}.slot{top:25px;width:44px;height:50px}.slot .unit-figure{width:31px;height:35px}.unit-weapon-label{display:none}.enemy{top:28px;width:28px;height:39px}.enemy.is-boss{top:13px;width:44px;height:56px}.lane-number{left:13px;top:5px}.command-panel{padding:10px;grid-template-columns:1fr}.panel-intro,.roster,.unit-detail,.action-panel,.boon-panel,.message{grid-column:span 1}.roster{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-card{min-height:75px}.footer{font-size:10px}}
@media(max-width:370px){.brand small{display:none}.topbar-button{padding:6px}.slot{width:41px}.rift-emblem{display:none}}
@media(prefers-reduced-motion:reduce){.enemy{transition:none}.effect,.effect-amount{animation:none}}