@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600;700&display=swap');
:root{color-scheme:dark;--bg:#0e1420;--panel:#151e2d;--ink:#ecede9;--muted:#98a5b5;--gold:#cbb889;--line:#ffffff18;--green:#71d9b2}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.65 system-ui,-apple-system,'Microsoft JhengHei',sans-serif;background-image:radial-gradient(ellipse at 50% 0,#26355260,transparent 65%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:#ffffff05;border-radius:5px;padding:9px 16px;transition:.18s}button:hover:not(:disabled){background:#ffffff10;border-color:var(--gold)}button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}a{color:inherit}header{height:88px;max-width:1440px;padding:0 5%;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;text-decoration:none;align-items:center;font:24px Georgia,serif;letter-spacing:4px}.brand small{display:block;font:9px system-ui;letter-spacing:5px;color:var(--gold);margin-top:3px}.brandmark{font-size:42px;color:var(--gold)}nav{display:flex;gap:12px}nav button{border:0;color:#bdc5d0;font-size:12px}nav span{color:var(--gold);margin-left:8px}main{max-width:1350px;padding:0 4%;margin:auto;min-height:calc(100vh - 160px)}.eyebrow{font:11px system-ui;letter-spacing:4px;color:var(--gold)}h1,h2,h3,.serif{font-family:'Noto Serif TC',Georgia,serif}h1{font-size:clamp(32px,4vw,52px);font-weight:500;letter-spacing:6px;line-height:1.4;margin:15px 0}h2{font-size:26px;font-weight:500}p{color:var(--muted)}.lobby-intro{padding:48px 0 30px;display:flex;align-items:end;justify-content:space-between;gap:20px}.lobby-intro p{margin:0;font-size:14px}.chapter{font-size:12px;letter-spacing:2px;color:var(--muted);border-left:1px solid var(--gold);padding-left:18px}.heroes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.hero-choice{padding:0;text-align:left;position:relative;overflow:hidden;min-height:465px;border:1px solid #ffffff20;background:#141e2e;border-radius:8px}.hero-choice.selected{border-color:var(--accent);box-shadow:0 0 28px color-mix(in srgb,var(--accent) 12%,transparent)}.portrait{height:300px;background-image:linear-gradient(0deg,#141e2e,transparent 65%),url('heroes-v2.png');background-size:auto,300% auto;background-repeat:no-repeat;position:relative}.hero-choice .portrait{transition:transform .5s}.hero-choice:hover .portrait{transform:scale(1.035)}.hero-number{position:absolute;top:18px;left:18px;color:#fff9;font:12px Georgia;letter-spacing:3px}.choice-mark{position:absolute;right:16px;top:16px;background:#101823c9;border:1px solid var(--accent);color:var(--accent);border-radius:100%;width:26px;height:26px;text-align:center;line-height:24px}.hero-info{padding:0 26px 25px;position:relative;margin-top:-26px}.hero-info .role{font-size:11px;letter-spacing:3px;color:var(--accent)}.hero-info h2{margin:4px 0;font-family:Georgia,serif;letter-spacing:1px;font-size:32px}.hero-info .quote{font-size:12px;margin:10px 0 17px;color:#c0c8d3}.pill{color:var(--accent);font-size:10px;letter-spacing:2px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:4px 9px}.hero-info .mechanic{font-size:12px;color:var(--muted);margin-top:16px;line-height:1.7}.lobby-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 0 36px}.opponent{font-size:12px;color:var(--muted)}select{background:#151e2d;color:var(--ink);padding:9px;border:1px solid var(--line);border-radius:4px;font:inherit;margin-left:8px}.primary{color:#102027;background:var(--gold);border-color:var(--gold);font-weight:600;padding:13px 34px;letter-spacing:2px}.primary:hover:not(:disabled){background:#e0cda1;color:#102027}.lobby-actions{display:flex;gap:12px;align-items:center}footer{max-width:1350px;margin:auto;padding:20px 4%;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:1px;color:#6f7c90}.arena{padding-top:20px}.arena-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px}.arena-top h1{font-size:20px;margin:0;letter-spacing:3px}.turn-tag{color:var(--gold);font-size:12px;letter-spacing:2px}.battle-layout{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:22px}.table{border:1px solid #a48b5930;border-radius:10px;background:radial-gradient(ellipse at center,#25334a80,transparent 70%),#111b28;position:relative;padding:16px;overflow:hidden}.leader{display:flex;gap:14px;align-items:center;min-height:66px}.avatar{flex-shrink:0;width:60px;height:60px;border:1px solid var(--accent);border-radius:50%;background-image:url('heroes-v2.png');background-size:350% auto;box-shadow:0 0 20px #0009}.leader-name{font:18px Georgia,serif}.leader-name small{display:block;font:10px system-ui;color:var(--accent);letter-spacing:2px}.hp{font:26px Georgia;color:#f2a6a0;min-width:64px}.hp small{font:10px system-ui;color:var(--muted)}.leader-stats{margin-left:auto;font-size:11px;color:var(--muted);text-align:right}.life-track{height:3px;background:#ffffff15;width:100px;margin-top:5px}.life-track i{display:block;height:100%;background:#d99191;transition:width .3s}.enemy-target{border:1px solid transparent;background:transparent;width:100%;text-align:left;padding:0;border-radius:8px}.enemy-target:hover{background:transparent}.enemy-target.targetable{border-color:#d99191;cursor:crosshair}.field{min-height:151px;display:flex;justify-content:center;align-items:center;gap:9px;padding:12px 0}.empty{font-size:11px;color:#596a80;letter-spacing:3px}.midline{border-top:1px solid #cbb88935;display:flex;justify-content:center;position:relative;height:16px}.midline span{position:relative;top:-11px;background:#172130;padding:0 16px;color:#94856b;font:10px Georgia;letter-spacing:4px}.unit{width:112px;height:132px;border:1px solid #788ba046;border-radius:7px;position:relative;padding:0;overflow:hidden;flex-shrink:1;background:#202c40}.unit-art{position:absolute;inset:0;background-image:linear-gradient(0deg,#0b1420 5%,transparent 90%),url('heroes-v2.png');background-size:auto,310% auto;opacity:.76}.unit .name{position:absolute;bottom:33px;left:3px;right:3px;font-size:11px;text-shadow:0 2px 4px black}.unit .stats{position:absolute;bottom:5px;left:8px;right:8px;display:flex;justify-content:space-between;font:bold 18px Georgia}.atk{color:#e7c785}.health{color:#f3a1a1}.unit.ready{border-color:#71d9b280;box-shadow:0 0 10px #71d9b212}.unit.picked{border:2px solid var(--gold);transform:translateY(-5px);box-shadow:0 0 20px #cbb88930}.unit.targetable{border-color:#e9ab91}.unit .kw{position:absolute;top:6px;left:6px;font-size:9px;color:white;background:#111a26b3;padding:1px 4px}.unit .sleep{position:absolute;top:7px;right:7px;color:#fff9;font-size:9px}.player-control{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:12px;gap:10px}.energy{color:#8fcce6;font-size:15px}.energy small{font-size:10px;color:var(--muted)}.gems{display:inline-flex;gap:3px;margin-left:10px}.gems i{width:8px;height:8px;border:1px solid #72bbd1;transform:rotate(45deg)}.gems i.full{background:#72bbd1}.hand-title{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:var(--muted);margin:15px 0 10px}.hand{display:flex;gap:8px;overflow-x:auto;padding:7px 3px 12px;min-height:196px}.card{width:125px;min-width:125px;height:174px;border:1px solid #788ba052;border-radius:7px;background:#1a2738;position:relative;padding:0;text-align:left;overflow:hidden}.card.playable{border-color:#71d9b260}.card.selected{border:2px solid var(--gold);transform:translateY(-6px)}.card:disabled{opacity:.65}.card-art{height:65px;background-image:linear-gradient(0deg,#1a2738,transparent),url('heroes-v2.png');background-size:auto,300% auto}.card.spell .card-art{background-image:radial-gradient(ellipse at center,var(--accent),transparent 65%);opacity:.5;display:flex;align-items:center;justify-content:center;font-size:38px;color:white}.cost{position:absolute;top:5px;left:5px;border-radius:100%;background:#193c50;border:1px solid #83c2d0;width:24px;height:24px;text-align:center;font:bold 16px Georgia;line-height:22px;color:#ceefff}.card-name{padding:0 9px;font:600 12px 'Noto Serif TC',serif;margin-bottom:5px;white-space:nowrap}.card-text{padding:0 9px;font-size:10px;line-height:1.5;color:#aebdcd}.card-bottom{position:absolute;bottom:5px;left:9px;right:9px;font:12px Georgia;display:flex;justify-content:space-between}.card-bottom span.type{font:9px system-ui;color:#75889c}.sidebar{display:flex;flex-direction:column;gap:14px}.side-panel{border:1px solid var(--line);background:#141e2ce0;padding:18px;border-radius:8px}.side-panel h3{font-size:15px;margin:0 0 10px;color:var(--gold)}.side-panel p{font-size:11px;margin:8px 0}.resonance{display:flex;gap:6px;margin:16px 0}.resonance i{height:4px;flex:1;background:#ffffff15}.resonance i.on{background:var(--accent)}.side-panel button{width:100%;font-size:12px;margin-top:8px}.log{height:210px;overflow:auto;font-size:10px;color:#8293a8}.log div{border-bottom:1px solid #ffffff08;padding:7px 0}.log div:last-child{color:#d6dbe3}.hint{font-size:12px;color:var(--gold);min-height:24px;text-align:center}.mode{font-size:11px;color:#aca5ff}.inline-cancel{padding:1px 8px;font-size:10px;margin-left:10px}dialog{background:#141e2e;color:var(--ink);border:1px solid #cbb88965;border-radius:12px;max-width:850px;width:calc(100% - 32px);max-height:88vh;padding:32px}dialog::backdrop{background:#050a12d9;backdrop-filter:blur(7px)}.close{position:absolute;right:12px;top:12px;border:0;font-size:23px;padding:0 8px}.modal-cards{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:24px}.rules{font-size:13px;color:#b4bfcd;line-height:2}.rules li{margin:10px 0}.rules strong{color:var(--ink)}.filters{display:flex;gap:10px;margin-bottom:20px}.filters button.active{border-color:var(--gold);color:var(--gold)}.result{text-align:center;padding:25px 0}.result h2{font-size:36px}.result .symbol{font-size:54px;color:var(--gold)}#toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px);background:#e8d8b6;color:#17202c;border-radius:5px;padding:10px 24px;opacity:0;pointer-events:none;transition:.2s;z-index:10;font-size:13px}#toast.show{opacity:1;transform:translate(-50%,0)}@media(min-width:1500px){.hero-choice{min-height:520px}.portrait{height:355px}}@media(max-width:950px){.battle-layout{grid-template-columns:minmax(0,1fr)}.sidebar{display:grid;grid-template-columns:1fr 1fr}.log{height:140px}.hero-info{padding-left:16px;padding-right:16px}.hero-info h2{font-size:27px}.hero-choice{min-height:450px}.portrait{height:270px}.lobby-intro{padding-top:30px}}@media(max-width:620px){header{height:72px;padding:0 5%}.brand{font-size:19px}.brandmark{font-size:32px}nav{gap:0}nav button{font-size:10px;padding:8px}nav span{display:none}.chapter{display:none}.lobby-intro{display:block}h1{font-size:30px}.heroes{gap:12px;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}.hero-choice{min-width:82%;min-height:460px;scroll-snap-align:center}.portrait{height:290px}.hero-info h2{font-size:32px}.lobby-bottom{flex-direction:column;align-items:stretch;gap:18px}.lobby-actions{justify-content:space-between}.primary{padding:12px 24px}.arena-top h1{font-size:15px}.table{padding:10px}.field{gap:5px;min-height:125px}.unit{height:108px;width:19%}.unit .name{font-size:9px;bottom:28px}.unit .stats{font-size:16px;left:5px;right:5px}.unit .kw{font-size:8px}.avatar{width:46px;height:46px}.leader{gap:8px;min-height:53px}.leader-name{font-size:16px}.leader-stats{font-size:9px}.life-track{width:70px}.hp{font-size:22px;min-width:45px}.hand{min-height:190px}.card{min-width:118px;width:118px}.sidebar{grid-template-columns:1fr}.side-panel{padding:15px}.log{height:110px}.gems{display:none}.player-control button{padding:8px 12px}.hint{font-size:11px}footer{display:block}footer span{display:block;margin:4px 0}.modal-cards{gap:10px}dialog{padding:26px 18px}.eyebrow{font-size:9px;letter-spacing:3px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.res-burst{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 20%,#0a1424ee),#0a1424ee);color:var(--accent);pointer-events:none;z-index:20;animation:resonate 1.5s both}.res-burst span{font-size:70px}.res-burst small{font-size:10px;letter-spacing:7px}.res-burst h2{font-size:36px;letter-spacing:8px;margin:15px}.res-burst p{color:var(--accent)}@keyframes resonate{0%{opacity:0;transform:scale(.95)}20%,65%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.03)}}

/* Reference-matched portraits: show horns, cloud and ears in lobby; tighter facial crops in battle. */
.hero-choice .portrait{height:450px;background-image:linear-gradient(0deg,#141e2e,transparent 14%),url('heroes-v2.png');background-size:auto,300% auto;background-position-y:0%,0%!important}.hero-choice .hero-info{margin-top:-20px}.avatar{background-position-y:40%!important}.unit-art{background-position-y:40%!important}.card:not(.spell) .card-art{background-position-y:40%!important}
@media(max-width:620px){.hero-choice .portrait{height:350px}}
/* Starlight expansion */
.card{width:140px;min-width:140px;height:218px}.card-art{height:82px}.card-text{font-size:11px;line-height:1.55}.card-name{font-size:12px}.card-bottom{bottom:7px}.hand{min-height:240px}.card.expansion{border-color:#cbb88980}.new-badge{position:absolute;right:5px;top:6px;background:#cbb889;color:#14202e;font:bold 8px system-ui;letter-spacing:1px;padding:2px 5px;border-radius:2px}.card.atlas .card-art,.unit.atlas .unit-art{background-image:linear-gradient(0deg,#1a2738,transparent 24%),var(--art-sheet)!important;background-size:100% 100%,300% auto!important;background-position:center,var(--art-x) var(--art-y)!important;opacity:1!important}.unit.atlas .unit-art{background-position:center,var(--art-x) var(--art-y)!important}.card.atlas.spell .card-art{display:block}.card-detail{display:grid;grid-template-columns:200px 1fr;gap:35px;align-items:center;padding:15px}.card-detail .card{width:200px;height:310px;opacity:1}.card-detail .card-art{height:135px}.card-detail .card-name{font-size:16px}.card-detail .card-text{font-size:13px}.card-detail .card-bottom{font-size:20px}.detail-rule{font-size:16px;color:#e6d6b4;line-height:1.9}.fx-layer{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden}.fx-number{position:absolute;font:700 25px Georgia,'Microsoft JhengHei',serif;transform:translate(-50%,-50%);text-shadow:0 2px 10px #000,0 1px 3px #000;animation:float-number 1.1s both;white-space:nowrap}.fx-number.damage{color:#ffb0a5}.fx-number.heal{color:#8ff1bd}.fx-number.buff{color:#e8d28e;font-size:15px}.fx-number.shield-break{color:#aee0ff;font-size:15px}.fx-ghost{position:fixed;pointer-events:none}.fx-ghost .unit{width:100%;height:100%}.play-reveal{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);animation:reveal-card 1.1s both;text-align:center;filter:drop-shadow(0 8px 25px #000a)}.play-reveal>small{display:block;color:var(--accent);font-size:10px;letter-spacing:4px;margin-bottom:8px}.play-reveal .card{width:156px;height:240px;opacity:1;box-shadow:0 0 28px color-mix(in srgb,var(--accent) 25%,transparent);border-color:var(--accent)}.play-reveal .card-art{height:96px}.fx-slash{position:absolute;width:100px;height:4px;transform:translate(-50%,-50%) rotate(-40deg);background:linear-gradient(90deg,transparent,#fff7ce,transparent);box-shadow:0 0 20px #f8e0a4;animation:slash .45s both}.unit.ready{animation:ready-glow 2.4s infinite}.card.playable:hover{transform:translateY(-6px)}.card.selected{transform:translateY(-8px)}
@keyframes float-number{0%{opacity:0;transform:translate(-50%,0) scale(.6)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-160%) scale(.95)}}@keyframes reveal-card{0%{opacity:0;transform:translate(-50%,-35%) scale(.65) rotate(-10deg)}20%,65%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-65%) scale(.85)}}@keyframes slash{0%{opacity:0;scale:.2}35%{opacity:1;scale:1.3}100%{opacity:0;scale:1.8}}@keyframes ready-glow{0%,100%{box-shadow:0 0 8px #71d9b215}50%{box-shadow:0 0 16px #71d9b245}}
@media(max-width:620px){.card{width:130px;min-width:130px;height:218px}.card-detail{grid-template-columns:1fr;justify-items:center;gap:15px;padding:5px}.card-detail .card{height:265px;width:180px}.card-detail .card-art{height:100px}.card-detail h2{font-size:22px}.play-reveal .card{width:140px;height:218px}nav #motionBtn{font-size:9px;padding:7px}.fx-number{font-size:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}.fx-layer,.res-burst{display:none!important}}
body.motion-off .unit.ready{animation:none}

.art-zoom-button{font-size:12px;margin:0 10px 15px 0}.art-view{text-align:center}.art-view h2{margin:10px 0 20px}.art-large{width:min(100%,560px);aspect-ratio:1;margin:0 auto 22px;border-radius:8px;background-image:var(--art-sheet);background-size:300% 300%;background-position:var(--art-x) var(--art-y);box-shadow:0 8px 35px #0005;border:1px solid #cbb88950}.card.atlas .card-art{transition:filter .2s}.card.atlas:hover .card-art{filter:brightness(1.15)}
/* Read-first card interactions and explicit effect explanations. */
.card-detail.detailed{grid-template-columns:200px minmax(0,1fr);gap:30px;align-items:start;padding:8px}.detail-art-column{position:sticky;top:0;text-align:center}.detail-art-column .art-zoom-button{margin:12px 0}.detail-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.detail-meta span,.status-chip{font-size:10px;padding:3px 7px;background:#ffffff08;border:1px solid #ffffff16;border-radius:4px;color:#b9c9d9}.detail-copy h2{font-size:25px;line-height:1.5;margin:8px 0 18px}.effect-section{padding:14px 16px;background:#ffffff05;border-left:2px solid var(--gold);margin-bottom:14px;border-radius:0 5px 5px 0}.effect-label{font-size:10px;letter-spacing:2px;color:var(--gold);font-weight:600}.effect-section p{color:#e5e8ed;font-size:14px;line-height:1.9;margin:6px 0 0}.target-explain{font-size:12px;display:flex;gap:16px;margin:10px 0;color:#c8d3df}.target-explain b{color:var(--gold)}.effect-notes{padding-left:20px;color:#aab8c9;font-size:12px;line-height:1.9}.effect-notes li{margin:7px 0}.keyword-explainer{display:grid;gap:9px;margin:14px 0}.keyword-explainer>div{border:1px solid #ffffff13;background:#0d162450;border-radius:6px;padding:12px 14px}.keyword-explainer strong{font-size:12px;color:#b6d9e9}.keyword-explainer p{font-size:12px;line-height:1.8;margin:5px 0 0;color:#adbccd}.detail-status{padding:13px 15px;border:1px solid #cbb88945;background:#cbb88908;border-radius:6px;margin:15px 0}.detail-status strong{font-size:12px;color:#ddc795}.detail-status p{font-size:12px;line-height:1.8;margin:5px 0 0;color:#b8c5d4}.detail-status.available{border-color:#71d9b250;background:#71d9b208}.detail-status.available strong{color:#8ce2bd}.quiet-note{font-size:11px!important;line-height:1.8;color:#899eb4!important}.detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px}.detail-actions .primary{padding:11px 18px;font-size:12px;letter-spacing:1px}.detail-actions>button{font-size:12px}.basic-reminder{font-size:11px;color:#95a9be;border-top:1px solid #ffffff12;padding-top:12px}.basic-reminder summary{cursor:pointer;padding:3px 0}.basic-reminder p{font-size:11px;line-height:1.9}.leader-inspect{display:block;width:100%;text-align:left;padding:0;border:1px solid transparent;background:transparent}.leader-inspect:hover:not(:disabled){border-color:#cbb88945;background:#ffffff03}.combo-progress{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:10px 0}.combo-progress span{font-size:11px;color:#7a8b9d}.combo-progress span.complete{color:#8be4bb}.combo-progress small{width:100%;font-size:10px;color:#8ba4b7}.side-panel button.text-action{border:0;background:transparent;text-align:left;font-size:10px;padding:0;margin:0;color:#cfbc91}.hero-guide{max-width:680px;margin:auto}.hero-guide h2{font-size:27px}.hand .card{cursor:help}.detail-copy .card-text{font-size:12px}.lobby-actions{flex-wrap:wrap}
@media(max-width:620px){.card-detail.detailed{display:block}.detail-art-column{position:static;display:grid;grid-template-columns:130px 1fr;column-gap:16px;align-items:center;text-align:left;margin:0 0 20px}.detail-art-column .card{width:130px;height:205px;min-width:130px;grid-row:span 2}.detail-art-column .card-art{height:78px}.detail-art-column .card-name{font-size:11px}.detail-art-column .card-text{font-size:10px}.detail-art-column .card-bottom{font-size:14px}.detail-art-column .art-zoom-button{margin:0}.detail-meta{justify-content:start}.detail-copy h2{font-size:24px}.effect-section p{font-size:14px}.detail-actions .primary{flex:1}.lobby-actions>button:first-child{font-size:11px;padding:8px}.hero-guide h2{font-size:23px}}
/* Five leaders, with faction-specific art sheets. */
.heroes{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.hero-choice{min-height:465px}.hero-info{padding:0 15px 20px}.hero-info h2{font-size:26px}.hero-info .quote{font-size:11px;min-height:40px;margin-bottom:13px}.hero-info .mechanic{font-size:11px;margin-top:14px}.hero-info .pill{font-size:9px;letter-spacing:1px;padding:4px 6px}.hero-choice .portrait{height:300px;background-image:linear-gradient(0deg,#141e2e,transparent 15%),var(--hero-image);background-size:auto,var(--hero-size);background-position:center,var(--hero-x) 10%!important}.avatar{background-image:var(--hero-image);background-size:var(--hero-size);background-position:var(--hero-x) 40%!important}.filters{flex-wrap:wrap}.filters button{font-size:12px;padding:8px 12px}.card.atlas .card-art,.unit.atlas .unit-art{background-size:100% 100%,var(--art-size,300% auto)!important}.art-large{background-size:var(--art-full-size,300% 300%)}.resource-note{font-size:10px!important;color:#a7d0e2!important}.risk-note{font-size:12px;line-height:1.8;color:#efadad;background:#ef91910a;border-left:2px solid #ef9191;padding:10px 12px}.lobby-intro .chapter{white-space:nowrap}
@media(min-width:1500px){.hero-choice .portrait{height:330px}.hero-choice{min-height:490px}}
@media(min-width:621px) and (max-width:1100px){.heroes{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-choice .portrait{height:350px}.hero-info h2{font-size:28px}}
@media(max-width:620px){.heroes{display:flex}.hero-choice .portrait{height:350px}.hero-info h2{font-size:30px}.hero-info .quote{min-height:auto}.hero-info{padding:0 20px 20px}}
/* Neutral collection and personal deck workshop */
.neutral-badge{color:#f6e7b9;background:#393125;border-color:#a89157}.deck-builder h2{margin-bottom:10px}.deck-summary{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px;background:#182333;border:1px solid #394655;border-radius:12px;margin:20px 0}.deck-summary strong{font-size:30px;color:#e6ce94}.deck-summary strong small{font:14px system-ui;color:#b8c2cd}.deck-summary span{font-size:12px}.deck-valid{color:#80e0b7}.deck-invalid{color:#f1c88e}.deck-curve{display:flex;align-items:flex-end;gap:12px;padding:12px 16px;border-bottom:1px solid #334052}.deck-curve div{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1}.deck-curve b,.deck-curve small{font:11px system-ui;color:#bcc8d4}.deck-curve i{width:100%;max-width:38px;background:linear-gradient(#dfca99,#789eaa);border-radius:4px 4px 0 0;max-height:104px}.deck-toolbar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:20px 0}.deck-toolbar .filters{margin:0}.deck-toolbar button{font-size:11px}.deck-workspace{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px;align-items:start}.deck-pool{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px}.deck-option{min-width:0}.deck-option .card{width:100%;margin:0}.deck-quantity{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-top:7px}.deck-quantity button{padding:6px 12px;font-size:17px}.deck-quantity span{font-size:12px;color:#d9c58e}.deck-list{background:#141f2e;border:1px solid #354154;border-radius:12px;padding:12px;position:sticky;top:0}.deck-list h3{font-size:15px}.deck-row{display:flex;align-items:center;gap:4px;border-bottom:1px solid #2e3a4c;padding:5px 0}.deck-row>button:first-child{flex:1;text-align:left;font-size:11px;background:transparent;border:0;padding:6px 0}.deck-row b{color:#b9e0ff;margin-right:4px}.deck-row small{display:inline-block;font-size:9px;color:#dcc58d;margin-left:4px}.deck-row>span{font-size:11px;color:#c5d0db}.deck-row>button:last-child{padding:3px 8px}.deck-save{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;position:sticky;bottom:-1px;background:#111b2bf5;border-top:1px solid #405066;padding:15px 0;margin-top:22px;z-index:8}.deck-save p{flex:1;min-width:180px;font-size:11px;margin:0}.lobby-actions{flex-wrap:wrap}@media(min-width:1000px){dialog:has(.deck-builder){width:1120px;max-width:94vw}}@media(max-width:760px){.deck-workspace{grid-template-columns:1fr}.deck-list{position:static}.deck-pool{grid-template-columns:repeat(3,minmax(0,1fr))}.deck-option .card{height:220px}.deck-option .card-name{font-size:11px}.deck-option .card-text{font-size:9px}.deck-save p{flex-basis:100%}.deck-summary{gap:10px}.deck-summary span:last-child{flex-basis:100%}}@media(max-width:440px){.deck-pool{grid-template-columns:repeat(2,minmax(0,1fr))}.deck-option .card{height:230px}.deck-toolbar>div{display:flex;gap:6px}}
/* Persistent fields live in their own slot, separate from the five-unit board. */
.terrain-slot{display:flex;align-items:center;gap:12px;width:calc(100% - 32px);margin:8px 16px;border-radius:8px;text-align:left;min-height:40px}.empty-terrain{justify-content:center;border:1px dashed #d3c18c25;color:#8c98a7;font-size:10px;letter-spacing:2px;padding:7px}.active-terrain{background:linear-gradient(100deg,#baa67915,#5a89a710);border:1px solid #d3bd8266;padding:8px 12px}.terrain-thumb{width:88px;height:44px;flex-shrink:0;border-radius:5px;background-image:var(--art-sheet);background-size:var(--art-size);background-position:var(--art-x) var(--art-y);box-shadow:0 0 16px #cdbb8722}.terrain-slot>span:nth-child(2){display:flex;flex:1;flex-direction:column;line-height:1.5}.terrain-slot strong{font-size:13px;font-weight:500;color:#ead6a6}.terrain-slot small{font-size:8px;letter-spacing:1px;color:#aab6c5}.terrain-slot>span>span{font-size:10px;color:#b0c3d0}.terrain-slot>b{font-size:22px;color:#eed7a6;text-align:center}.terrain-slot>b small{display:block;font-size:8px}.terrain-card{border-color:#b8a57466}.terrain-card .card-bottom{color:#e2c88d}.deck-summary span{line-height:1.8}@media(max-width:620px){.terrain-slot{width:calc(100% - 16px);margin:6px 8px;gap:8px}.terrain-thumb{width:64px;height:42px}.terrain-slot strong{font-size:12px}.terrain-slot>span>span{font-size:9px}.terrain-slot small{font-size:7px}}
/* Collectible rarities remain readable by both text and frame color. */
.card[class*="rarity-"]{border-color:var(--rarity);box-shadow:inset 0 -2px 0 var(--rarity)}.rarity-tag{position:absolute;right:7px;top:30px;z-index:2;font-size:10px;line-height:18px;padding:0 6px;background:#111725e8;color:var(--rarity);border:1px solid var(--rarity);border-radius:12px}.card.rarity-gold{box-shadow:inset 0 -2px 0 var(--rarity),0 0 12px #eac56710}.card.rarity-rainbow{box-shadow:inset 0 -2px 0 var(--rarity),0 0 15px #bd8bf02b;background:linear-gradient(140deg,#262d43,#211e32)}.detail-rarity{font-weight:600}.collection-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0}.collection-controls select{padding:8px;margin-left:8px;border-radius:6px;background:#182331;color:#dfdcd0;border:1px solid #536070}.collection-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:18px 12px}.collection-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}.collection-item .card{width:100%;height:245px;margin:0}.collection-item>span{display:block;font-size:10px;color:#aab6c7;text-align:center;margin-top:7px}.collection-item.unowned .card{filter:saturate(.5);opacity:.72}.collection-item.unowned>span{color:#c4b17e}.shop h2{margin:10px 0}.shop-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.shop-heading p{margin:0 0 15px}.wallet{display:flex;gap:10px;flex-wrap:wrap}.wallet span{padding:9px 14px;border:1px solid #d9c17c44;border-radius:20px;background:#d9c17c09;color:#d7c190;font-size:12px}.wallet b{font-size:20px}.shop-notice{padding:11px 14px;font-size:11px;color:#a5bbc6;background:#1b2b3b;border:1px solid #49627855;border-radius:8px}.shop-main{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:22px;margin:24px 0}.pack-product{background:radial-gradient(circle at 20% 35%,#79579833,transparent 60%),#141e2d;border:1px solid #c5ae792e;border-radius:15px;display:flex;gap:26px;align-items:center;padding:30px 24px}.pack-box{flex-shrink:0;width:170px;height:250px;border:1px solid #dcc286;border-radius:11px;background:linear-gradient(155deg,#48415e,#212942 45%,#4f3d43);box-shadow:0 20px 35px #0005,inset 0 0 0 7px #d8be8220;transform:rotate(-5deg);display:flex;align-items:center;flex-direction:column;justify-content:center;color:#e3cf9a;position:relative;overflow:hidden}.pack-box:before{content:'';position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 38%,#f7deac25 45%,transparent 53%);transform:rotate(15deg)}.pack-box>span{font-size:58px;line-height:1.4}.pack-box strong{font:22px Georgia,serif;letter-spacing:5px}.pack-box small{font-size:7px;letter-spacing:3px;margin-top:9px}.pack-gems{margin:20px 0 13px;letter-spacing:5px;font-size:13px}.pack-box>b{font-size:9px;letter-spacing:4px}.pack-intro{min-width:0}.pack-intro h3{font-size:23px;margin:12px 0}.pack-intro p{font-size:12px;line-height:1.9}.pack-intro .eyebrow{font-size:9px}.pity-track{padding:13px 0;margin:8px 0}.pity-track>span{font-size:12px;color:#d8c18b}.pity-track>div{display:flex;gap:4px;margin:10px 0}.pity-track i{height:5px;border-radius:4px;background:#ffffff12;flex:1}.pity-track i.filled{background:#c79df1}.pity-track small{display:block;font-size:10px;line-height:1.8;color:#97a8bc}.pack-buy{display:flex;gap:8px;flex-wrap:wrap}.pack-buy button{font-size:12px;flex:1;white-space:nowrap}.shop-side{padding:18px;border:1px solid #d2ba8233;border-radius:15px;background:#151e2b}.shop-side h3{margin-top:0}.shop-side p{font-size:11px;line-height:1.9}.shop-side button{width:100%;font-size:11px;margin-bottom:8px}.collection-progress{padding:18px 0;display:flex;flex-direction:column;gap:3px;border-top:1px solid #ffffff15;margin-top:20px}.collection-progress strong{color:#dcc694;font-size:24px}.collection-progress span{font-size:10px;color:#98a5b8}.pack-rates{border-top:1px solid #ffffff20;padding:18px 0;overflow-x:auto}.pack-rates summary{cursor:pointer;color:#d9c38e;font-size:13px}.pack-rates table{border-collapse:collapse;width:100%;margin-top:18px;min-width:420px;font-size:12px;text-align:left}.pack-rates th{font-size:10px;color:#9daabe;font-weight:400}.pack-rates td,.pack-rates th{padding:10px 9px;border-bottom:1px solid #ffffff14}.pack-rates p{font-size:11px;line-height:1.9}.pack-reveal-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 12px;margin:25px 0}.pack-tile{min-width:0}.pack-tile .card{width:100%;height:250px;margin:0;animation:card-reveal .5s ease-out}.pack-tile .card-art{height:100px}.pack-back{width:100%;height:250px;border:1px solid #bca77a88;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#3c375f,#1d2a3c 60%);box-shadow:inset 0 0 0 5px #d6bb7810}.pack-back>span{font-size:52px;color:#d4b780;line-height:1.3}.pack-back>b{font:13px Georgia,serif;letter-spacing:4px;color:#d4c39d;margin:18px 0}.pack-back>small{font-size:9px;letter-spacing:2px;color:#8499b5}.pack-result-note{font-size:10px;line-height:1.7;display:block;min-height:34px;text-align:center;margin-top:8px;color:#c7b38b}.pack-open-actions{display:flex;gap:10px;flex-wrap:wrap;position:sticky;bottom:0;padding:12px 0;background:#111b2bf5;border-top:1px solid #ffffff20;z-index:5}.pack-opening>p{font-size:12px}@keyframes card-reveal{from{transform:perspective(800px) rotateY(80deg) scale(.92);opacity:.3}to{transform:perspective(800px) rotateY(0) scale(1);opacity:1}}dialog:has(.shop),dialog:has(.pack-opening){width:1120px;max-width:95vw}.motion-off .pack-tile .card{animation:none}@media(prefers-reduced-motion:reduce){.pack-tile .card{animation:none}}@media(max-width:850px){.shop-main{grid-template-columns:1fr}.shop-side{display:block}.pack-reveal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pack-product{gap:20px;padding:22px}.pack-box{width:150px;height:230px}.shop-side button{max-width:280px}.pack-reveal-grid .card{height:250px}}@media(max-width:600px){header{height:auto;min-height:90px;gap:12px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}nav{flex-wrap:wrap;gap:3px;width:100%}nav button{font-size:10px;padding:6px 8px}.pack-product{flex-direction:column;padding:25px 15px;gap:25px}.pack-box{width:155px;height:220px}.pack-intro{width:100%}.pack-reveal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pack-tile .card,.pack-back{height:245px}.shop-heading h2{font-size:24px}.wallet span{padding:6px 11px}.wallet b{font-size:17px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-item .card{height:235px}.collection-controls button{font-size:10px}.shop-notice{font-size:10px}.pack-tile .card-name{font-size:12px}}
.account-button{border:1px solid #88b6ba55!important;color:#acd3d1!important;font-size:11px!important}.account-button.sync-warning{border-color:#deb37d88!important;color:#e6bf8d!important}.account-panel{max-width:720px;margin:auto}.account-panel>p{font-size:13px;line-height:1.9}.account-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:10px 16px;border:1px solid #c6b17c66;border-radius:5px;font-size:12px;color:#dfd0a4}.account-link.primary{background:#cbb889;color:#18212c}.save-comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}.save-comparison>div{padding:16px;border:1px solid #d2bd8633;border-radius:10px;background:#1b2939}.save-comparison h3{margin-top:0}.save-comparison p{font-size:12px}header{height:auto;min-height:88px;flex-wrap:wrap;gap:12px;padding-top:12px;padding-bottom:12px}nav{flex-wrap:wrap;gap:5px}@media(max-width:600px){.save-comparison{grid-template-columns:1fr}.account-panel h2{font-size:23px}.account-link{width:100%;margin-bottom:8px}}

/* Strategy expansion */
.pact-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;background:#cbaa6910;border:1px solid #cbaa692a;border-radius:10px;margin:8px 0}.pact-strip>span{font-size:10px;color:#cbb583}.pact-strip button{font-size:11px;padding:5px 9px;color:#efdaad;border-color:#b99c5a55}.combo-meter{display:flex;gap:10px;flex-wrap:wrap;padding:12px 14px;background:#182438;border:1px solid #8e9dbe25;border-radius:12px;margin:14px 0;color:#aebed2;font-size:11px}.combo-meter b{color:#e5d2a3}.combo-meter>span{flex:1;min-width:150px}.cost.discounted{background:#2b7059;color:#d7ffe8;box-shadow:0 0 12px #62db8b55}.preset-row{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.preset-row button{font-size:11px;padding:8px 12px}.strategy-notes{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:18px 0}.strategy-notes section{background:#152235;border:1px solid #869bb82b;border-radius:12px;padding:16px}.strategy-notes h3{font-size:15px;margin:0 0 8px;color:#e5d2a3}.strategy-notes p{font-size:12px;line-height:1.9;color:#afbed0;margin:0}.strategy-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}.strategy-card-grid .card{width:100%}

@media(min-width:650px){.strategy-notes{grid-template-columns:repeat(2,minmax(0,1fr))}}

.hero-choice .waist-portrait{overflow:hidden;background:#141e2e}
.waist-portrait svg{display:block;width:100%;height:100%;overflow:hidden}
.waist-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#141e2e,transparent 15%);pointer-events:none}

/* 牌組編輯：儲存列貼齊視窗底部、不再蓋住卡牌（fix/deck-save-bar） */
dialog:has(.deck-builder){--deck-pad:32px;padding-bottom:0}
.deck-save-note{font-size:11px;color:#9aa8b8;margin:22px 0 0;line-height:1.7}
.deck-save{bottom:0;margin:12px calc(-1 * var(--deck-pad,32px)) 0;padding:12px var(--deck-pad,32px) 14px;background:#111b2bf7;backdrop-filter:blur(6px);box-shadow:0 -10px 24px #050a1299}
.deck-save button{white-space:nowrap}
@media(max-width:760px){dialog:has(.deck-builder){--deck-pad:18px}.deck-save{flex-wrap:nowrap;gap:8px;padding-top:10px;padding-bottom:10px}.deck-save button{flex:1 1 auto;padding:10px 6px;font-size:12px;letter-spacing:0;min-width:0}}
@media(max-width:340px){.deck-save{flex-wrap:wrap}.deck-save button:first-child{flex-basis:100%}}