:root{color-scheme:dark;--bg:#102b33;--panel:#173740;--line:#36515a;--ink:#f4f0df;--muted:#aabdc1;--blue:#78c4f2;--red:#ed947f;--gold:#e5c78a;--energy:#a796e4;font-family:Inter,"Microsoft YaHei",system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible{outline:3px solid #a9daf5;outline-offset:3px}button{touch-action:manipulation}#app{height:100dvh;display:grid;grid-template-rows:64px minmax(0,1fr) 184px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #6c929333;background:#112b33;z-index:3}.brand{display:flex;align-items:center;gap:12px}.brand-mark{font-size:30px;color:var(--gold)}.brand strong{font-size:18px;letter-spacing:3px}.brand small{display:block;font-size:8px;letter-spacing:2.5px;color:var(--muted);margin-top:3px}.edition{font-size:11px;color:var(--muted);border-left:1px solid var(--line);padding-left:17px;margin-left:5px}.top-actions{display:flex;gap:9px}.quiet,.secondary{background:#ffffff06;border:1px solid #6c929340;border-radius:7px;padding:8px 15px;font-size:12px}.quiet:hover,.secondary:hover{background:#ffffff10}#battle{position:relative;overflow:hidden;min-height:0;background:#759891}#scene{position:absolute;inset:0;touch-action:none}#scene canvas{display:block;width:100%;height:100%}.matchbar{position:absolute;top:17px;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:1fr 125px 1fr;width:min(600px,90%);background:#102b33ee;border:1px solid #91b8b43b;border-radius:12px;box-shadow:0 10px 30px #102a3425;padding:11px 18px;pointer-events:none}.side-info{display:flex;align-items:center;gap:10px}.side-info strong{font-size:15px;letter-spacing:2px}.side-info small{display:block;font-size:9px;color:var(--muted);margin-top:5px}.side-info>b{font-size:29px;margin-left:auto;color:var(--red);font-weight:500}.side-info.ally{justify-content:flex-end;text-align:right}.side-info.ally>b{color:var(--blue);margin:0 auto 0 0}.side-dot{width:8px;height:8px;border-radius:50%;background:var(--red)}.ally .side-dot{background:var(--blue)}.clock{text-align:center;border-inline:1px solid #9fb7ac28}.clock small{display:block;font-size:9px;color:var(--gold)}.clock strong{font-size:25px;letter-spacing:2px;font-variant-numeric:tabular-nums}.clock>span{display:block;font-size:8px;color:var(--muted)}.clock.boost>span{color:#dcc8ff}.arena-label{position:absolute;left:24px;font-size:10px;font-weight:600;letter-spacing:3px;opacity:.6;pointer-events:none}.enemy-label{top:42%;color:#612f2e}.ally-label{bottom:25%;color:#17486b}.arena-footer{position:absolute;bottom:13px;left:25px;right:25px;display:flex;justify-content:space-between;color:#ecf0dbba;font-size:10px;pointer-events:none;text-shadow:0 1px 3px #17313b}.selection-info{position:absolute;left:24px;top:22px;width:230px;padding:15px 35px 14px 15px;background:#12333aeb;border:1px solid #a9cec53a;border-radius:10px;pointer-events:none}.selection-info>div{display:flex;flex-direction:column;gap:6px}.selection-info>div span{color:var(--gold);font-size:9px;letter-spacing:2px}.selection-info strong{font-size:17px}.selection-info p{font-size:11px;line-height:1.7;margin:10px 0 0;color:#c8d8d5}.selection-info button{position:absolute;right:9px;top:7px;border:0;background:transparent;font-size:21px;pointer-events:auto}.selection-info[hidden]{display:none}#toast{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);padding:10px 20px;border:1px solid #e6c48570;border-radius:30px;background:#153740ef;color:#fff3d5;font-size:13px;pointer-events:none;box-shadow:0 5px 20px #1234;text-align:center;max-width:90%}#loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;background:#142e36;color:var(--ink);z-index:5}#loading[hidden]{display:none}#loading small{color:var(--muted)}.loader{width:32px;height:32px;border:2px solid #d6c18f30;border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#battle-dock{position:relative;border-top:1px solid #6c92935c;background:linear-gradient(0deg,#102932,#173940);padding:10px 24px 12px;z-index:4}.resource-row{display:flex;align-items:center;gap:9px;width:min(490px,100%);margin:0 auto 9px;font-size:12px}.energy-icon{color:var(--energy);font-size:20px}.resource-row>strong{width:27px;font-size:18px;color:#d8c7ff;font-variant-numeric:tabular-nums}.energy-meter{height:9px;flex:1;background:repeating-linear-gradient(90deg,#51607650 0 calc(10% - 2px),transparent calc(10% - 2px) 10%);border-radius:2px;overflow:hidden}.energy-meter i{display:block;height:100%;width:50%;background:linear-gradient(90deg,#7469b7,#c0a8ef);transition:width .1s linear}.resource-row #energy-cap{color:var(--muted);font-size:10px}.resource-note{font-size:9px;color:var(--muted);white-space:nowrap;margin-left:6px}.hand-row{display:flex;align-items:center;justify-content:center;gap:20px}.hand{display:flex;gap:12px}.card{position:relative;width:108px;height:127px;border:1px solid #bbc5ae58;border-radius:10px;background:linear-gradient(150deg,#466765,#24464e 80%);padding:0;isolation:isolate;transition:transform .15s,border-color .15s,filter .15s;user-select:none;-webkit-user-select:none;touch-action:none;box-shadow:0 3px 12px #0003;overflow:visible}.card:hover{transform:translateY(-4px);border-color:#d1d5b9}.card.selected{transform:translateY(-11px);border:2px solid #efd299;box-shadow:0 0 0 3px #edd09624,0 8px 25px #091d2844}.card.unaffordable{filter:saturate(.45);opacity:.7}.card img,.card .spell-art{height:91px;width:100%;object-fit:contain;pointer-events:none;display:block;padding:3px 8px 0}.card .card-cost{position:absolute;top:-7px;left:-7px;width:27px;height:30px;border-radius:9px 9px 12px 12px;background:#8a78bc;border:2px solid #d5c5ee;color:#fff;font-size:16px;font-weight:700;display:grid;place-items:center;z-index:2}.card .card-title{position:absolute;bottom:0;left:0;right:0;border-radius:0 0 9px 9px;padding:6px 4px 7px;font-size:11px;letter-spacing:1px;background:#112c38e8}.card .card-key{position:absolute;top:6px;right:7px;font-size:9px;color:#e5ead887}.card .card-kind{font-size:8px;color:var(--muted);display:block;margin-top:3px}.card .spell-art{font-size:45px;display:grid;place-items:center;color:var(--card-color)}.next-card{text-align:center;width:58px}.next-card>small{display:block;color:var(--muted);font-size:9px;margin-bottom:5px}.next-card .card{width:52px;height:68px;border-color:#81998b30;pointer-events:none;opacity:.65}.next-card .card img,.next-card .card .spell-art{height:48px;padding:0;font-size:26px}.next-card .card .card-title{font-size:7px;padding:4px 0}.next-card .card-cost{width:18px;height:21px;font-size:10px;border-width:1px;top:-3px;left:-3px}.next-card .card-key,.next-card .card-kind{display:none}.dock-tip{width:165px;margin-left:6px}.dock-tip>span{font-size:9px;letter-spacing:4px;color:var(--gold)}.dock-tip>strong{display:block;font-size:12px;font-weight:500;margin:9px 0}.dock-tip>small{font-size:10px;color:var(--muted);line-height:1.8}dialog{color:var(--ink);border:1px solid #c3d5c343;background:linear-gradient(135deg,#204349,#112d35);border-radius:18px;box-shadow:0 25px 100px #0009;padding:30px}dialog::backdrop{background:#081e28a6;backdrop-filter:blur(7px)}.deck-dialog{width:min(980px,94vw);max-height:92dvh;overflow:auto}.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between}.eyebrow{color:var(--gold);font-size:10px;letter-spacing:2px}h1{font-size:30px;font-weight:550;letter-spacing:2px;margin:9px 0 10px}h2{font-size:26px;letter-spacing:2px;font-weight:550;margin:12px 0 16px}.dialog-heading p{font-size:12px;color:var(--muted);margin:0;line-height:1.8}.close-dialog{float:right;border:0;background:transparent;color:var(--muted);font-size:24px;padding:0 3px}.deck-meta{display:flex;align-items:center;gap:26px;border-top:1px solid #abcdb52b;margin-top:22px;padding:17px 0;color:var(--muted);font-size:11px}.deck-meta b{font-size:15px;color:var(--ink);font-weight:500;margin-left:5px}.text-button{font-size:11px;border:0;background:transparent;margin-left:auto;color:#c6dbd1;text-decoration:underline;text-underline-offset:4px}.card-library{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}.library-card{position:relative;border:1px solid #b8c7b132;background:#193841;border-radius:10px;min-width:0;padding:9px 8px 11px;transition:background .15s,transform .15s;min-height:157px;text-align:center}.library-card[aria-pressed=true]{background:#335458;border-color:#c6b987}.library-card:hover{transform:translateY(-2px)}.library-card .lib-check{position:absolute;right:8px;top:6px;width:16px;height:16px;border:1px solid #a1bab35c;border-radius:50%;font-size:10px;color:transparent}.library-card[aria-pressed=true] .lib-check{background:#e0c492;color:#294447;border-color:#e0c492}.library-card img,.library-card .spell-art{height:83px;width:100%;object-fit:contain;display:block;pointer-events:none}.library-card .spell-art{display:grid;place-items:center;font-size:37px;color:var(--card-color)}.library-card b{font-weight:550;display:block;font-size:12px;margin:4px 0}.library-card small{display:block;color:#bdcfce;font-size:9px;line-height:1.4}.library-card .lib-cost{position:absolute;left:8px;top:7px;color:#ddcaff;font-weight:650;font-size:13px}.start-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:22px}.start-row p{font-size:11px;line-height:1.8;color:#cedbd5;max-width:630px;margin:0}.start-row p span{color:var(--muted);font-size:10px}.primary{border:1px solid #efdab1;background:#e2c594;color:#18363b;border-radius:8px;padding:12px 24px;font-weight:650;font-size:13px;white-space:nowrap}.primary:hover{background:#f2dbb1}.deck-footnote{color:#91a8ad;font-size:9px;margin-top:18px}.compact-dialog{width:min(600px,92vw);max-height:90dvh}.compact-dialog p{color:#bbcfce;font-size:12px;line-height:1.8}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px}.help-grid b{font-size:13px;font-weight:550;color:#e3d4b5}.help-controls{border-top:1px solid var(--line);padding-top:13px}.center-dialog{text-align:center;width:420px}.center-dialog>.primary,.center-dialog>.secondary{display:block;width:100%;margin-top:12px}.result-emblem{font-size:56px;color:var(--gold);margin:0 0 12px}.result-stats{display:flex;justify-content:center;gap:32px;padding:15px 0;margin:20px 0;border-block:1px solid var(--line)}.result-stats strong{display:block;font-size:24px;color:#e8d7b2}.result-stats small{font-size:10px;color:var(--muted)}.tower-label{position:absolute;pointer-events:none;transform:translate(-50%,-100%);font-size:9px;white-space:nowrap;background:#14313ad9;border:1px solid #c2d9d340;border-radius:5px;padding:4px 7px;color:#e6efdf;text-shadow:none}.tower-label b{font-weight:550;font-variant-numeric:tabular-nums;margin-left:7px}.tower-label.south{border-bottom:2px solid var(--blue)}.tower-label.north{border-bottom:2px solid var(--red)}.floating-number{position:absolute;pointer-events:none;color:#ffe5b9;font-size:15px;font-weight:700;text-shadow:0 2px 4px #102a34;transform:translate(-50%,-50%)}
@media(max-width:1100px){.selection-info{top:112px;width:185px}.arena-label{display:none}.dock-tip{width:140px}.topbar{padding:0 18px}}
@media(max-width:740px){#app{grid-template-rows:53px minmax(0,1fr) 151px}.topbar{padding:0 12px}.brand strong{font-size:14px;letter-spacing:2px}.brand-mark{font-size:25px}.brand small{font-size:7px}.edition{display:none}.top-actions{gap:5px}.quiet{padding:7px 9px;font-size:10px}.hand-row{gap:11px}.hand{gap:9px}.card{width:83px;height:102px}.card img,.card .spell-art{height:72px;font-size:35px}.card .card-title{font-size:10px;padding:5px 2px}.card .card-kind{display:none}.card .card-cost{width:24px;height:26px;font-size:14px}.dock-tip{display:none}#battle-dock{padding:8px 12px}.next-card{width:40px}.next-card .card{width:39px;height:59px}.next-card .card img{height:40px}.resource-row{margin-bottom:10px;max-width:400px}.resource-note{font-size:8px}.matchbar{top:12px;padding:9px 12px;grid-template-columns:1fr 83px 1fr;width:94%;border-radius:9px}.side-info{gap:6px}.side-info small{font-size:8px;letter-spacing:0}.side-info strong{font-size:12px}.side-info>b{font-size:22px}.clock strong{font-size:23px}.clock small{font-size:8px}.selection-info{left:12px;right:12px;top:auto;bottom:38px;width:auto;padding:9px 30px 9px 12px;display:flex;gap:15px;align-items:center}.selection-info>div{gap:2px;flex-shrink:0}.selection-info strong{font-size:12px}.selection-info>div span{font-size:8px}.selection-info p{margin:0;font-size:10px;line-height:1.4}.arena-footer{left:12px;right:12px;font-size:8px;bottom:9px}.card-library{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.deck-dialog{padding:22px;max-height:94dvh}h1{font-size:25px}.library-card{min-height:136px}.library-card img,.library-card .spell-art{height:69px}.library-card b{font-size:10px}.library-card small{font-size:8px}.start-row{flex-direction:column;align-items:stretch;gap:12px}.start-row p{font-size:10px}.start-row .primary{width:100%}.deck-meta{gap:14px;font-size:10px}.deck-meta b{font-size:12px}.text-button{font-size:9px}.deck-footnote{font-size:8px}.help-grid{gap:10px 16px}.compact-dialog{padding:23px}.tower-label{font-size:8px;padding:3px 5px}.tower-label b{margin-left:4px}}
@media(max-width:430px){.brand-mark{display:none}.top-actions .quiet{padding:7px 7px}.resource-note{display:none}.card{width:min(70px,calc((100vw - 95px)/4));height:100px}.hand{gap:7px}.hand-row{gap:10px}.card-library{grid-template-columns:repeat(3,minmax(0,1fr))}.library-card{min-height:129px}.deck-dialog{padding:17px}.dialog-heading p{font-size:10px}.deck-meta{gap:8px}.text-button{max-width:72px;font-size:9px}.side-info small{max-width:96px}.tower-label{font-size:7px}.matchbar .side-dot{display:none}.help-grid{grid-template-columns:1fr}.help-grid p{margin:5px 0}.help-grid{gap:8px}}
@media(prefers-reduced-motion:reduce){.card,.library-card{transition:none}}