@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800;900&family=Noto+Serif+TC:wght@500;600;700;800&display=swap');
:root{--bg:#0e171c;--panel:#131f25;--line:#ffffff13;--text:#e0e3df;--muted:#82918f;--gold:#d9bc84;--teal:#91c6b3;--red:#d88482;--serif:'Noto Serif TC','Songti TC',serif;--sans:'Noto Sans TC',system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:13px}button,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:not-allowed;opacity:.35}button:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button{transition:background .16s,border-color .16s,transform .16s}button:hover:enabled{filter:brightness(1.16)}[hidden]{display:none!important}h1,h2,h3,p{margin:0}button,select{touch-action:manipulation}#app{max-width:1920px;margin:auto}.topbar{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;gap:18px}.brand{display:flex;align-items:center;gap:13px}.brand-mark{font-size:40px;color:var(--gold)}.brand h1{font-family:var(--serif);font-size:21px;letter-spacing:4px}.brand p{font-size:8px;letter-spacing:3.2px;color:var(--muted);margin-top:4px}.version{font-size:10px;color:#a3b1ab;border:1px solid #91c6b32b;padding:5px 8px;border-radius:3px;margin-left:7px}.round-block{display:flex;gap:13px;align-items:center;letter-spacing:1px;font-size:12px}.round-block i{width:1px;height:15px;background:#ffffff25}.status-dot,.live-dot,.teal-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px #91c6b344}.topbar nav{display:flex;gap:10px;align-items:center}.icon-button,.text-button{border:0;background:none;color:var(--muted);padding:8px}.icon-button{border:1px solid var(--line);width:29px;height:29px;border-radius:50%;padding:0}.text-button{font-size:11px}.layout{display:grid;grid-template-columns:190px minmax(600px,1fr) 226px;gap:24px;padding:24px 28px 16px}.section-label{font-size:10px;letter-spacing:1.5px;color:#b8c0b9;display:flex;justify-content:space-between;align-items:center}.section-label>span{font-family:var(--sans);font-size:8px;letter-spacing:1px;color:var(--muted)}.left-sidebar{display:flex;flex-direction:column}.hero-panel{text-align:center;padding:24px 0 18px}.hero-portrait{height:109px;width:96px;margin:0 auto 16px;position:relative;background:radial-gradient(ellipse at 50% 42%,#69808935,#1a2a3240 70%);border:1px solid #c1b07e5e;clip-path:polygon(50% 0,100% 19%,100% 80%,50% 100%,0 80%,0 19%);display:flex;align-items:center;justify-content:center}.hero-portrait>span:first-child{font-family:var(--serif);font-size:46px;color:#c5d4d3;text-shadow:0 2px 20px #000}.portrait-rings{position:absolute;width:85px;height:85px;border:1px solid #c1b07e40;border-radius:50%;transform:rotate(45deg);pointer-events:none}.hero-panel h2{font-family:var(--serif);font-size:23px;letter-spacing:3px}.hero-title{color:var(--muted);font-size:10px;margin:9px 0 20px}.hero-vitals{display:flex;justify-content:center;gap:25px}.hero-vitals>span{display:grid;grid-template-columns:13px 26px;gap:2px 5px;align-items:center}.hero-vitals strong{font-size:24px;font-weight:500}.hero-vitals small{grid-column:1/3;font-size:9px;color:var(--muted)}.heart{color:var(--red)}.armor{color:#a6bbc7}.ability-panel{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}.ability-heading{display:flex;gap:11px;align-items:center}.ability-icon{color:var(--gold);width:35px;height:35px;background:#c4ab7220;border:1px solid #c4ab7240;border-radius:7px;display:grid;place-items:center;font-size:25px}.ability-heading small{font-size:9px;color:var(--muted)}.ability-heading h3{font-size:13px;font-weight:500;letter-spacing:1px;margin-top:4px}.ability-panel p{font-size:11px;line-height:1.9;color:#a3b1af;margin-top:13px}.secondary-button{width:100%;margin-top:12px;display:flex;justify-content:space-between;background:#283b38;border:1px solid #91c6b33b;padding:9px;font-size:11px}.formation-panel{padding-top:0}.formation-row{display:flex;align-items:center;justify-content:space-between;margin-top:17px;font-size:11px;color:var(--muted)}.formation-row strong{font-size:18px;color:var(--gold);font-weight:500}.formation-row small{font-size:11px;color:var(--muted)}.formation-panel>p{font-size:9px;color:var(--muted);margin-top:14px}.sidebar-footer{margin-top:auto;padding-top:30px;color:var(--muted);font-size:9px}.sidebar-footer p{font-size:8px;margin:7px 0 0 10px;color:#657673}.live-dot{width:4px;height:4px;margin-right:5px}.arena-header{min-height:57px;height:auto;padding-bottom:12px;display:flex;align-items:flex-start;justify-content:space-between}.eyebrow{font-size:8px;letter-spacing:2px;color:var(--muted)}.arena-header h2{font-family:var(--serif);font-size:20px;letter-spacing:2px;margin-top:4px}.arena-header h2>span{font:10px var(--sans);color:var(--muted);letter-spacing:1px;border-left:1px solid var(--line);padding-left:13px;margin-left:10px}.opponent{display:flex;align-items:center;gap:10px}.opponent-avatar{width:33px;height:33px;border:1px solid #b9797040;border-radius:50%;display:grid;place-items:center;color:#d4a39a;font-family:var(--serif);background:#b9797012}.opponent b{font-weight:500;font-size:11px}.opponent small{font-size:9px;color:var(--muted);margin-left:7px}.opponent div>span{display:block;font-size:10px;color:var(--red);margin-top:5px}.opponent i{font-style:normal;margin-left:12px;color:#a6bbc7}.arena{height:450px;min-height:330px;position:relative;overflow:hidden;background:#1a3036;border:1px solid #91b3aa32;border-radius:3px}#scene{width:100%;height:100%;display:block}.board-ui{position:absolute;inset:0;pointer-events:none;overflow:hidden}.slot-target{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:1px solid transparent;background:transparent;border-radius:9px;color:transparent;width:12%;height:13%;padding:0}.slot-target.selected{border-color:var(--gold);background:#e7c78720;box-shadow:0 0 17px #e7c78722}.slot-target.has-unit:focus-visible{outline:1px solid var(--gold)}.unit-hud{position:absolute;transform:translate(-50%,-50%);width:77px;pointer-events:none;text-align:center}.unit-hud .unit-stats{display:flex;justify-content:space-between;align-items:center}.stat{width:25px;height:25px;display:grid;place-items:center;font-family:var(--sans);font-weight:800;font-size:15px;text-shadow:0 1px 3px #000;border:1px solid #b1a06d8c;background:linear-gradient(#6a603c,#3c3828);clip-path:polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%);color:#ffe3a6}.stat.hp{background:linear-gradient(#7d4144,#492b30);border-color:#bd7678;color:#ffced0}.stat.hp.hurt{color:#ff9294}.unit-name{font-size:9px;display:block;color:#ebeee7;text-shadow:0 1px 5px #000,0 0 7px #000;white-space:nowrap;margin-top:2px}.unit-hud.golden .unit-name{color:#f4d48f}.status-icons{position:absolute;top:-14px;width:100%;font-size:11px;letter-spacing:4px;color:#a6e6df;text-shadow:0 0 7px #000}.arena-title{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;color:#c7e3d3a0}.arena-title>span{font-family:var(--serif);font-size:14px;letter-spacing:12px;padding-left:12px}.arena-title small{display:block;font-size:6px;letter-spacing:4px;margin-top:5px;color:#9cd6d09c}.arena-corner{position:absolute;width:18px;height:18px;pointer-events:none;border-color:var(--gold);opacity:.7}.top-left{top:8px;left:8px;border-left:1px solid;border-top:1px solid}.bottom-right{bottom:8px;right:8px;border-right:1px solid;border-bottom:1px solid}.board-caption{position:absolute;bottom:8px;left:17px;right:17px;display:flex;justify-content:space-between;font-size:8px;color:#a3bab2;pointer-events:none;text-shadow:0 1px 3px #000}.board-caption i{width:4px;height:4px;margin-right:5px}#board-hint{color:#c4c8b8}.event-banner{position:absolute;top:15px;left:50%;transform:translate(-50%,0);opacity:0;background:#101d25e8;border:1px solid #a9c1ad4a;color:#e5dfc7;padding:9px 20px;border-radius:3px;max-width:90%;font-size:12px;white-space:nowrap;pointer-events:none;transition:opacity .2s}.event-banner.visible{opacity:1}.scene-fallback{position:absolute;inset:0;display:grid;place-items:center;background:#192930;color:var(--gold);padding:30px;text-align:center}.bench-bar{display:flex;gap:16px;align-items:center;border-bottom:1px solid var(--line);padding:12px 0 14px;min-height:78px}.bench-title{width:85px;flex-shrink:0}.bench-title b{display:block;font-weight:500;font-size:12px;margin-top:5px}.bench-title small{font-size:9px;color:var(--muted);font-weight:400;margin-left:4px}.bench{display:flex;gap:8px;flex:1}.bench-card{position:relative;width:70px;height:51px;border:1px dashed #73888138;background:#ffffff02;border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0}.bench-card.filled{border:1px solid #92ae9c38;background:linear-gradient(135deg,#293e3c,#17292d)}.bench-card.selected{border-color:var(--gold);background:#d8b67b1f}.bench-card.golden{box-shadow:inset 0 0 12px #e5c27625;border-color:#c8a86e90}.bench-card .mini-icon{font-size:23px;color:var(--card-color)}.bench-card .mini-name{position:absolute;font-size:8px;bottom:3px;text-shadow:0 0 5px #000}.bench-card.empty{color:#425451;font-size:18px}.bench-card .mini-stats{font-size:9px;color:var(--gold);position:absolute;top:3px;right:4px}.small-button{background:#1a2a2f;border:1px solid #8fa79d35;border-radius:3px;padding:7px 10px;font-size:10px;color:#b8c8bd;white-space:nowrap}.small-button span{color:var(--gold);margin-left:8px}.small-button[aria-pressed=true]{border-color:var(--gold);color:var(--gold);background:#d9bc8415}.recruitment{padding-top:17px}.shop-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.shop-heading h2{font-family:var(--serif);font-size:17px;margin-top:4px;letter-spacing:2px}.shop-heading h2 small{font-family:var(--sans);font-size:9px;font-weight:400;color:var(--muted);letter-spacing:0;margin-left:12px}.shop-controls{display:flex;gap:7px}.shop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.recruit-card{position:relative;text-align:left;border:1px solid #677d713c;border-radius:4px;background:linear-gradient(150deg,#233330,#162328);padding:0;min-height:181px;overflow:hidden;color:var(--text)}.recruit-card:hover:enabled{transform:translateY(-3px);border-color:#d9bc8490}.recruit-card.sold{border-style:dashed;background:#ffffff01;display:flex;align-items:center;justify-content:center;color:#5f7470;filter:none;font-size:10px;letter-spacing:3px}.card-art{height:76px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,var(--card-glow),transparent 70%)}.card-art::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(125deg,transparent,transparent 16px,#ffffff03 17px,transparent 18px)}.card-art svg{height:85px;width:100%;position:relative;margin-top:4px;filter:drop-shadow(0 4px 8px #0008)}.card-tier{position:absolute;left:9px;top:7px;font-size:10px;color:var(--gold);z-index:1;letter-spacing:2px}.card-cost{position:absolute;right:8px;top:6px;font-size:10px;color:var(--gold);z-index:1}.card-body{padding:8px 10px 10px;border-top:1px solid #b4cbb518;position:relative}.card-body h3{font-size:11px;font-weight:500;white-space:nowrap}.card-keyword{font-size:8px;border:1px solid #91c6b330;color:var(--teal);padding:1px 4px;border-radius:2px;display:inline-block;margin-top:5px}.card-body p{font-size:9px;color:#a0b2a9;line-height:1.65;margin:5px 0 23px}.card-stats{position:absolute;bottom:8px;left:10px;right:10px;display:flex;justify-content:space-between;font-size:12px;font-weight:700}.card-stats .attack{color:#e2c48b}.card-stats .health{color:#db9491}.copy-count{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);font-size:8px;color:var(--teal);font-weight:400}.right-sidebar{display:flex;flex-direction:column;gap:18px}.resource-panel{border:1px solid #c9b47d38;border-radius:3px;background:linear-gradient(120deg,#c9b47d0d,transparent);padding:15px 16px}.resource-panel>.eyebrow{color:#b5ac89}.resource-amount{display:flex;align-items:center;gap:11px;margin-top:8px}.resource-amount>span{color:var(--gold);font-size:28px}.resource-amount>strong{font-size:37px;font-weight:500;line-height:1.2;color:#eee4c7}.resource-amount small{font-size:10px;color:var(--muted);margin-top:13px}.resource-panel p{font-size:9px;color:var(--muted);margin-top:8px}.detail-panel{border:1px solid var(--line);padding:15px;min-height:208px;border-radius:3px}.empty-detail{text-align:center;padding:18px 0 4px}.empty-detail>span{display:block;color:#667f76;font-size:31px;margin-bottom:10px}.empty-detail b{font-size:11px;font-weight:400;color:#b1beb7}.empty-detail p{font-size:10px;line-height:1.8;color:#748c82;margin-top:10px}.detail-name{font-family:var(--serif);font-size:18px;margin:15px 0 8px;color:#e5e2d0}.detail-tier{font-size:9px;color:var(--gold)}.detail-effect{font-size:11px;line-height:1.9;color:#b6c1b9;margin-top:9px}.detail-flavor{font-size:9px;line-height:1.8;color:#7c958a;margin-top:13px;font-style:italic}.detail-stats{display:flex;gap:20px;margin-top:13px;font-size:18px;color:var(--gold)}.detail-stats span:last-child{color:var(--red)}.detail-stats small{font-size:9px;margin-right:6px;color:var(--muted)}.log-panel{border-top:1px solid var(--line);padding-top:17px;flex:1;min-height:140px}#battle-log{padding:0;margin:12px 0 0;list-style:none;max-height:210px;overflow:auto;scrollbar-width:thin;scrollbar-color:#456255 transparent}#battle-log li{font-size:10px;color:#8da198;line-height:1.7;padding:5px 0 5px 10px;border-left:1px solid #728c7f33}#battle-log li:first-child{color:#c6cfbf;border-color:var(--gold)}.battle-controls{margin-top:auto}.speed-control{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;margin-bottom:12px}.speed-control select{color:#bccdc3;background:#1b2b30;border:1px solid #8fa79d35;border-radius:3px;font-size:10px;padding:4px 8px}.primary-button{width:100%;background:linear-gradient(120deg,#d8c197,#bfa675);color:#182522;border:1px solid #e4c995;border-radius:3px;padding:15px 17px;font-weight:700;letter-spacing:2px;font-size:13px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 3px 13px #0002}.primary-button:hover:enabled{transform:translateY(-1px);box-shadow:0 4px 20px #c5ae7b20}.battle-controls>p{font-size:8px;text-align:center;color:var(--muted);margin-top:9px}.bottom-bar{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:12px 28px;font-size:8px;color:#60796e;letter-spacing:.5px}.bottom-bar>span:first-child{color:#9caa98}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:#283c37f5;border:1px solid #c9b47d70;padding:12px 24px;z-index:50;color:#eee2c6;font-size:12px;border-radius:4px;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;box-shadow:0 8px 30px #0007}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{color:var(--text);background:linear-gradient(145deg,#22332f,#132127 75%);border:1px solid #b5a57770;border-radius:8px;max-width:650px;width:calc(100% - 40px);padding:35px 40px;box-shadow:0 35px 150px #000b}dialog::backdrop{background:#071116b5;backdrop-filter:blur(7px)}.modal-kicker{font-size:9px;letter-spacing:3px;color:var(--gold);margin-bottom:18px}dialog h2{font-family:var(--serif);font-size:34px;line-height:1.5;font-weight:600;letter-spacing:4px}dialog h2 em{font-style:normal;color:#b8d2c3}.modal-intro{font-size:12px;line-height:1.9;color:#9fb2a8;margin:15px 0 22px}.choose-label{font-size:11px;margin-bottom:10px;color:#c7d1bd;letter-spacing:1px}.hero-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.hero-choice{padding:14px 11px;text-align:left;border:1px solid #a1b6a43a;background:#ffffff03;border-radius:4px}.hero-choice.selected{border-color:var(--gold);background:#d9bc8410}.hero-choice>span{font-family:var(--serif);display:block;font-size:22px;color:var(--choice-color);margin-bottom:9px}.hero-choice>b{font-size:12px;font-weight:500}.hero-choice>small{font-size:9px;color:var(--gold);display:block;margin-top:4px}.hero-choice>p{font-size:9px;line-height:1.8;color:#98ada1;margin-top:8px}.welcome-rules{display:flex;justify-content:space-between;margin:22px 0;color:#95ab9e;font-size:10px}.welcome-rules b{font-size:9px;color:var(--gold);margin-right:7px}.modal-footnote{font-size:9px;color:#7d958a;text-align:center;margin-top:13px}.help-copy{margin:20px 0}.help-copy p{font-size:12px;line-height:1.9;color:#aabdb0;margin-bottom:12px}.help-copy b{color:var(--gold)}#result-dialog{text-align:center;width:420px}.result-symbol{font-size:50px;color:var(--gold);margin:15px 0}#result-dialog h2{font-size:27px}#result-copy{font-size:12px;line-height:1.9;color:#a9baaf;margin-top:14px}.result-vitals{display:flex;justify-content:center;gap:30px;margin:23px 0;color:#8fa79b;font-size:11px}.result-vitals b{color:var(--red);font-size:19px;margin-left:8px}#review-board{margin:10px auto 0}.damage-float{position:absolute;transform:translate(-50%,-50%);color:#ffbaab;font-size:24px;font-weight:900;text-shadow:0 2px 6px #000;animation:float-damage .65s ease-out forwards;pointer-events:none;z-index:4}@keyframes float-damage{from{opacity:1;translate:0 0}to{opacity:0;translate:0 -40px}}
@media(min-width:1500px){.layout{grid-template-columns:210px minmax(600px,1fr) 250px;gap:30px;padding:28px 36px}.arena{height:510px}.recruit-card{min-height:195px}.card-art{height:88px}.card-body p{font-size:10px}.card-body h3{font-size:12px}.unit-hud{width:88px}.stat{width:28px;height:28px;font-size:17px}}
@media(max-width:1190px){.layout{grid-template-columns:155px minmax(460px,1fr) 185px;gap:15px;padding:18px 18px 12px}.topbar{padding:0 20px}.arena{height:390px}.arena-header h2{font-size:17px}.shop-heading h2 small{display:none}.card-body{padding:7px}.card-body h3{font-size:10px}.card-body p{font-size:8px}.bench-card{width:57px}.bench-title{width:65px}.bench-bar{gap:8px}.detail-panel{padding:12px}.hero-panel{padding:20px 0 15px}.hero-portrait{height:90px;width:80px}.bottom-bar>span:last-child{display:none}}
@media(max-width:960px){.layout{grid-template-columns:1fr 190px}.left-sidebar{grid-column:1/3;flex-direction:row;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding-bottom:12px}.left-sidebar>.section-label,.hero-title,.hero-vitals small,.sidebar-footer{display:none}.hero-panel{display:flex;align-items:center;padding:0;gap:12px;min-width:220px}.hero-portrait{height:50px;width:44px;margin:0}.hero-portrait>span:first-child{font-size:25px}.hero-panel h2{font-size:17px;white-space:nowrap}.hero-vitals{gap:12px}.hero-vitals strong{font-size:18px}.hero-vitals>span{grid-template-columns:10px 23px;gap:3px}.ability-panel{border:0;display:flex;align-items:center;gap:14px;padding:0;flex:1}.ability-panel p{font-size:9px;line-height:1.7;margin:0}.ability-heading{gap:7px;min-width:125px}.ability-heading h3{font-size:11px}.ability-icon{width:25px;height:25px;font-size:17px}.secondary-button{max-width:125px;margin:0}.topbar{height:67px}.version{display:none}.arena{height:400px}.round-block{font-size:10px}.brand h1{font-size:17px}.brand p{font-size:6px}.brand-mark{font-size:30px}.arena-header h2>span{display:none}.bottom-bar>span:nth-child(2){display:none}.card-art{height:65px}.recruit-card{min-height:170px}}
@media(max-width:680px){.layout{display:flex;flex-direction:column;padding:12px;gap:12px}.left-sidebar{gap:10px}.hero-panel{min-width:175px;gap:8px}.hero-vitals{gap:5px}.hero-vitals strong{font-size:14px}.hero-panel h2{font-size:13px;letter-spacing:1px}.hero-portrait{width:32px;height:40px}.ability-panel p,.ability-heading small{display:none}.ability-heading{min-width:100px}.ability-heading h3{font-size:10px}.ability-icon{display:none}.topbar{padding:0 12px;gap:5px}.brand{gap:7px}.brand h1{font-size:15px;letter-spacing:2px}.brand p{letter-spacing:2px}.topbar nav{gap:5px}.topbar nav .text-button{font-size:9px;padding:3px}.round-block{gap:5px;letter-spacing:0;font-size:9px}.round-block i,.status-dot{display:none}.arena{height:350px}.arena-header{min-height:50px}.arena-header h2{font-size:16px}.opponent{gap:5px}.opponent small{font-size:8px}.opponent-avatar{width:26px;height:26px}.eyebrow{font-size:6px}.bench-title{width:48px}.bench-title b{font-size:10px}.bench-title small{display:block;margin:3px 0 0}.bench-card{width:47px;height:47px}.bench{gap:4px}.bench-card .mini-name{font-size:7px}.bench-bar{gap:5px}.shop{gap:6px}.card-art{height:60px}.card-body h3{font-size:9px;letter-spacing:-.3px}.card-body p{font-size:8px;line-height:1.6}.card-stats{font-size:10px;left:7px;right:7px}.card-body{padding:7px 6px}.card-tier{left:6px}.card-cost{right:5px}.recruit-card{min-height:185px}.right-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px}.resource-panel{grid-column:1;grid-row:1;padding:12px}.resource-amount>strong{font-size:28px}.resource-panel p{font-size:8px}.detail-panel{grid-row:2;grid-column:1;min-height:150px}.log-panel{grid-row:2;grid-column:1/-1;border:1px solid var(--line);border-radius:3px;padding:12px;min-height:150px}#battle-log{max-height:150px}.battle-controls{grid-column:2;grid-row:1;margin:0}.battle-controls .primary-button{padding:13px}.empty-detail{padding:8px 0}.empty-detail>span{display:none}.unit-hud{width:60px}.stat{width:21px;height:21px;font-size:13px}.unit-name{font-size:7px}.arena-title>span{font-size:10px;letter-spacing:7px}.arena-title small{font-size:5px;letter-spacing:2px}.board-caption{left:8px;right:8px;font-size:7px}.event-banner{font-size:10px;padding:7px 10px}.bottom-bar{padding:10px 12px}.hero-choices{gap:6px}.hero-choice{padding:10px 8px}.hero-choice>p{font-size:8px}.hero-choice>small{font-size:8px}dialog{padding:25px 22px}dialog h2{font-size:29px}.welcome-rules{font-size:8px}.modal-intro{font-size:11px}.detail-name{font-size:15px}.detail-effect{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Piece movement uses one drag interaction across the shop, reserves, field and sale area. */
body.preparing [data-drag-zone]{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
body.preparing [data-drag-zone]:active,body.dragging-piece,body.dragging-piece *{cursor:grabbing}
body.dragging-piece{user-select:none;-webkit-user-select:none}
.drag-source{opacity:.35!important}
.recruit-card.unaffordable{opacity:.55}


.drop-ready{border:1px dashed #91c6b37d!important;background-color:#91c6b310!important}
.drop-hover{border:2px solid var(--teal)!important;background-color:#91c6b340!important;box-shadow:0 0 18px #91c6b345!important}

.drop-blocked{border:2px solid var(--red)!important;background-color:#d8848230!important}
.drag-ghost{position:fixed;z-index:100;pointer-events:none;transform:translate(-50%,-70%);width:112px;border:1px solid var(--gold);border-radius:6px;padding:6px;background:linear-gradient(140deg,#344a43ed,#14272af5);box-shadow:0 14px 35px #0009;text-align:center;color:var(--text)}
.drag-ghost svg{display:block;width:100%;height:65px;filter:drop-shadow(0 4px 5px #0007)}
.drag-ghost b{display:block;font-size:11px;margin:3px 0 5px}.drag-ghost>span{font-size:10px;color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:680px){.drag-ghost{width:96px}.drag-ghost svg{height:55px}}

/* Recruitment becomes the sale destination while carrying an owned piece. */
.bench{display:grid;grid-template-columns:repeat(5,minmax(0,70px));min-width:0}.bench .bench-card{width:100%;min-width:0}
.recruitment{position:relative;border:1px solid transparent;border-radius:5px;padding:17px 0 0}
.recruitment:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sell-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:8px;pointer-events:none;border-radius:5px;background:#182b29e8;color:var(--gold);z-index:3}
.sell-overlay>span{font-size:30px}.sell-overlay>b{font-family:var(--serif);font-size:22px}.sell-overlay>small{font-size:11px;color:#c6cbbb}
body.selling-piece .recruitment{border-color:#d9bc8470!important;background-color:#d9bc8410!important}
body.selling-piece .recruitment .shop{opacity:.2}
body.selling-piece .recruitment .shop-heading{position:relative;z-index:4;pointer-events:none}
body.selling-piece .recruitment .sell-overlay{display:flex}
body.selling-piece .recruitment.drop-hover{border:2px solid var(--gold)!important;box-shadow:0 0 20px #d9bc8450!important}
@media(max-width:1190px){.bench{grid-template-columns:repeat(5,minmax(0,57px))}}
@media(max-width:680px){.bench{grid-template-columns:repeat(5,minmax(0,47px))}.sell-overlay>b{font-size:18px}.sell-overlay>small{font-size:9px}}

/* Tier hue identifies recruitment rank; brighter arcs identify a three-copy upgrade. */
.shop-heading{flex-wrap:wrap;gap:10px}.shop-controls{flex-wrap:wrap}.upgrade-button{border-color:#d9bc8470;color:var(--gold)}
.shop-tier{display:inline-block;font:9px var(--sans);letter-spacing:0;color:var(--tier-color);border:1px solid currentColor;padding:3px 6px;border-radius:3px;margin-left:8px;vertical-align:middle}
.shop-odds{font-size:9px;line-height:1.7;color:var(--muted);margin:-4px 0 10px}
.tier-legend{display:flex;align-items:center;gap:14px;padding:8px 0 0;color:#a1b6aa;font-size:9px}
.tier-legend>span::before{content:'';display:inline-block;width:12px;height:5px;border-top:2px solid var(--legend-color);border-radius:50%;margin-right:5px;filter:drop-shadow(0 0 3px var(--legend-color))}
.tier-legend small{font-size:8px;color:var(--muted);margin-left:auto}
.card-tier{color:var(--tier-color);text-shadow:0 0 7px var(--tier-color);letter-spacing:.5px}
.card-art::after,.bench-card.filled::after{content:'';position:absolute;pointer-events:none;border:2px solid;border-color:var(--tier-color) transparent;border-radius:50%;filter:drop-shadow(0 0 4px var(--tier-color));transform:rotate(-12deg)}
.card-art::after{width:66%;height:24px;left:17%;bottom:2px}.card-art svg{z-index:1}
.bench-card.filled::after{width:78%;height:24px;left:11%;bottom:9px;opacity:.7}
.bench-card.upgraded::after{border-width:3px;filter:drop-shadow(0 0 6px var(--tier-color));opacity:1}
.mini-tier{position:absolute;top:3px;left:4px;color:var(--tier-color);font-size:9px;text-shadow:0 0 4px var(--tier-color)}
.mini-icon,.mini-name,.mini-stats{z-index:1}.unit-tier{font-size:8px;color:var(--tier-color);margin-right:3px;text-shadow:0 0 4px var(--tier-color)}
.upgraded .unit-tier{font-weight:900;text-shadow:0 0 7px var(--tier-color)}
body.selling-piece .shop-odds{visibility:hidden}
@media(max-width:680px){.shop-heading{align-items:flex-start}.shop-heading h2{font-size:15px}.shop-controls{gap:5px}.shop-controls .small-button{font-size:9px;padding:6px}.shop-tier{font-size:8px;margin-left:5px}.shop-odds{font-size:8px}.tier-legend{gap:10px;font-size:8px}.tier-legend small{font-size:7px}.mini-tier{font-size:8px}.bench-card.filled::after{height:20px}}

/* Heroes stand behind the grid; ability cards remain readable without blocking drag targets. */
.arena{height:520px}.slot-target{z-index:2}.unit-hud{z-index:3}
.hero-piece-target{position:absolute;transform:translate(-50%,-50%);width:78px;height:92px;border:1px solid transparent;background:transparent;border-radius:35%;pointer-events:auto;z-index:1;padding:0}
.hero-piece-target:hover,.hero-piece-target:focus-visible{border-color:#d9bc8480;background:#d9bc8410;outline:none;box-shadow:0 0 20px #d9bc8420}
.hero-piece-label{position:absolute;top:80%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;color:#efe2c2;text-shadow:0 1px 5px #000,0 0 8px #000;pointer-events:none}
.hero-piece-label small{display:block;margin-top:3px;font-size:9px;color:#eed1c5}
.ability-tooltip{position:fixed;width:270px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto;z-index:110;pointer-events:none;border:1px solid #b4c5b778;border-radius:8px;padding:16px;background:#14252bdc;backdrop-filter:blur(12px);box-shadow:0 12px 38px #0008;color:var(--text)}
.ability-tooltip .detail-name{margin-top:12px;font-size:19px}.ability-tooltip .detail-effect{font-size:12px}.ability-tooltip .detail-flavor{font-size:10px}.hero-tooltip-vitals{color:var(--gold);font-size:15px;margin-top:14px}
@media(min-width:1500px){.arena{height:580px}}
@media(max-width:1190px){.arena{height:470px}}
@media(max-width:960px){.arena{height:470px}}
@media(max-width:680px){.arena{height:420px}.hero-piece-target{width:62px;height:75px}.hero-piece-label{font-size:8px}.hero-piece-label small{font-size:8px}.ability-tooltip{width:245px;padding:13px}}

/* The sidebar holds only shared match information; unit and hero details use tooltips. */
.hero-action{position:absolute;right:14px;bottom:40px;z-index:7;width:60px;height:68px;border-radius:50% 50% 12px 12px;border:2px solid var(--gold);background:radial-gradient(circle at 50% 35%,#536263,#172e35 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 2px 16px #0008;color:var(--gold)}
.hero-action .power-symbol{font-size:27px}.power-cost{font-size:11px}.hero-action[aria-pressed="true"]{box-shadow:0 0 20px #e7c78799;background:#4a5542}
.keyword{font-weight:800;color:inherit}
.prep-clock{display:flex;flex-direction:column;gap:3px;min-width:66px;color:var(--gold);font-variant-numeric:tabular-nums}.prep-clock b{font-size:21px}.prep-clock small{font-size:8px;letter-spacing:0;color:var(--muted)}.prep-clock.urgent{color:#ff9c85}
#ready-status{color:var(--teal);font-size:10px;line-height:1.5;margin-bottom:8px}
.target-arrow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25;overflow:visible}.target-arrow path{fill:none;stroke:#f3cf81;stroke-width:4;filter:drop-shadow(0 0 4px #eac67180)}
.targeting-ability .ability-tooltip{display:none!important}.targeting-ability .slot-target[data-uid]{border:2px solid #e7c78777;cursor:crosshair}.targeting-ability .slot-target.ability-target-hover{border-color:#ffe7ae;background:#e7c78733;box-shadow:0 0 16px #e7c78777}
@media(max-width:680px){.hero-action{width:48px;height:54px;right:8px;bottom:34px}.hero-action .power-symbol{font-size:21px}.prep-clock b{font-size:16px}.prep-clock{min-width:43px}.prep-clock small{font-size:6px}}
@media(max-width:960px){.formation-panel{width:100%;display:flex;align-items:center;gap:20px}.formation-row{margin:0;gap:10px}.formation-panel>p{margin:0}}
@media(max-width:680px){.formation-panel{flex-wrap:wrap;gap:10px 16px}.formation-panel>p{flex-basis:100%}.formation-row{font-size:10px}.formation-row strong{font-size:15px}}

.hero-model-status{position:absolute;left:12px;bottom:36px;max-width:72%;z-index:6;pointer-events:none;background:#14252de8;border:1px solid #bba77b66;border-radius:4px;padding:7px 10px;color:#e0d4bb;font-size:10px;line-height:1.6}
.welcome-asset-status{margin:0 0 12px;font-size:12px;line-height:1.7;color:var(--teal)}.welcome-asset-status.error{color:#ffbaab}
/* Chunky arcade damage popups; team color follows the damaged character. */
.damage-float{display:flex;justify-content:center;gap:0;z-index:12;font-family:"Arial Black",Impact,var(--sans);font-size:clamp(28px,3vw,42px);font-weight:1000;font-style:italic;line-height:1.15;letter-spacing:-2px;white-space:nowrap;filter:drop-shadow(0 3px 1px #0008);text-shadow:none;animation:damage-pop 1s cubic-bezier(.2,.7,.25,1) both;--damage-top:#fffbc6;--damage-bottom:#ffaf16;--damage-edge:#6c3008;--damage-drift:12px}
.damage-incoming{--damage-top:#ffe4eb;--damage-bottom:#ff3d62;--damage-edge:#650f2c;--damage-drift:-12px}
.damage-digit{display:inline-block;padding:0 2px;background:linear-gradient(var(--damage-top) 20%,var(--damage-bottom) 85%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-stroke:3px var(--damage-edge);paint-order:stroke fill}
.damage-digit:nth-child(even){translate:0 -4px}
@keyframes damage-pop{0%{opacity:0;transform:translate(-50%,-20%) scale(.55)}12%{opacity:1;transform:translate(-50%,-55%) scale(1.22)}28%{opacity:1;transform:translate(-50%,-70%) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--damage-drift)),-190%) scale(.94)}}
.keyword{font-weight:900;color:#ffe5a4;background:#dbbb6326;padding:0 3px;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ability-tooltip .detail-effect{font-size:13px;line-height:1.9}
@media(prefers-reduced-motion:reduce){.damage-float{animation:damage-fade 1s linear both}.damage-digit:nth-child(even){translate:none}}
@keyframes damage-fade{0%,75%{opacity:1}100%{opacity:0}}

.brand h1 .brand-subtitle{display:block;font-family:var(--sans);font-size:12px;letter-spacing:2px;line-height:1.5;color:var(--muted)}

#reward-dialog{width:min(900px,94vw);max-height:90dvh;overflow:auto;background:#18353af5;border:1px solid #e1c48b99;backdrop-filter:blur(12px)}
#reward-dialog h2{font-size:25px;margin-bottom:8px}#reward-tier{color:var(--gold);font-size:13px}
.reward-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.reward-choice{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:15px 12px;border:1px solid var(--reward-color);background:#19323bbd;text-align:left}
.reward-choice:hover{background:#30524b;box-shadow:0 0 12px #e6d19b30}.reward-choice>b{font-size:15px}.reward-choice>small{color:var(--gold)}.reward-choice>p{font-size:12px;line-height:1.8;align-self:stretch}
.reward-portrait{display:block;width:100%;height:125px}.reward-portrait .pixel-card-art{display:grid;place-items:end center;height:125px}.reward-portrait .pixel-card-image{width:calc(var(--pixel-aspect,1)*125px);height:auto;aspect-ratio:var(--pixel-aspect,1);max-width:100%;max-height:125px}.reward-portrait svg{height:125px;width:100%}
.reward-clock-note,.reward-pending{font-size:11px;line-height:1.7;color:var(--gold)}.reward-clock-note{margin-bottom:10px}.reward-pending:empty{display:none}.triple-rewards{color:var(--gold);border:1px solid #e1c48b88;padding:4px 8px;font-size:11px}
@media(max-width:600px){.reward-options{gap:6px}.reward-choice{padding:8px 5px}.reward-choice>b{font-size:12px}.reward-choice>p{font-size:10px}.reward-portrait,.reward-portrait .pixel-card-art{height:85px}.reward-portrait .pixel-card-image{width:calc(var(--pixel-aspect,1)*85px);max-height:85px}}