:root{color-scheme:dark;--bg:#090f14;--panel:#111b22;--line:#2a3840;--muted:#8b9aa1;--text:#e8ede8;--cyan:#72cdd4;--orange:#df8964;--gold:#d8bb82;--font:Inter,"Segoe UI","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--font);min-width:360px}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}button{transition:border-color .2s,background .2s,transform .2s}button:not(:disabled):active{transform:translateY(1px)}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}button{border:0}small{font-size:11px}#scene{position:absolute;inset:0;overflow:hidden}#scene canvas{display:block;width:100%;height:100%}#scene[hidden]{display:none}.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 75% 20%,#25434b33,transparent 55%),linear-gradient(135deg,transparent 60%,#75482a0c)}.topbar{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4%;gap:24px;background:#091015ee}.brand{display:flex;align-items:center;gap:13px}.brand-mark{width:42px;height:42px;object-fit:contain;flex:none}.brand>span:last-child{font-size:20px;font-weight:750;letter-spacing:4px}.brand small{display:block;font-size:8px;letter-spacing:2.4px;font-weight:500;color:var(--muted);margin-top:4px}.top-meta{font-size:10px;letter-spacing:1.8px;color:var(--muted)}.live-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px #72cdd480;margin:0 12px 2px 24px}.top-actions{display:flex;align-items:center;gap:16px}.text-button{background:none;color:var(--muted);font-size:12px;padding:8px 5px}.text-button:hover{color:var(--text)}.icon-button{border:1px solid var(--line);background:#18232b;padding:8px 14px;font-size:12px}.eyebrow{color:var(--gold);font-size:10px;letter-spacing:2px;font-weight:650}.eyebrow>span{display:inline-block;background:var(--gold);height:4px;width:18px;margin-right:10px;vertical-align:middle}.command-menu{max-width:1680px;margin:0 auto;display:grid;grid-template-columns:440px minmax(0,1fr);gap:7%;padding:48px 5% 32px;min-height:calc(100vh - 88px)}.setup-panel{position:relative;z-index:2}.setup-panel h1{font-size:46px;line-height:1.3;letter-spacing:2px;margin:20px 0 16px;font-weight:750}.setup-panel h1 em{font-style:normal;color:var(--gold)}.intro{color:var(--muted);font-size:13px;line-height:1.9;margin-bottom:30px}.field-label{font-size:10px;letter-spacing:1.5px;color:#acb6b8;margin:21px 0 11px}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:10px}.segmented button{text-align:left;padding:14px 18px;background:#111a21;border:1px solid var(--line);border-radius:3px}.segmented b{display:block;font-size:14px;font-weight:550}.segmented small{display:block;margin-top:5px;color:var(--muted);font-size:10px}.segmented .active{border-color:var(--gold);background:#d8bb8210}.segmented .active b{color:var(--gold)}.map-choices{display:flex;flex-direction:column;gap:8px}.map-choice{display:flex;align-items:center;text-align:left;background:#10191f;border:1px solid #25333b;border-radius:3px;padding:11px 16px;gap:15px}.map-choice .map-symbol{font-size:28px;color:#6f858c;width:33px}.map-choice b{font-size:13px;font-weight:550;display:block}.map-choice small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.map-choice i{font-style:normal;font-size:10px;color:#63787f;margin-left:auto}.map-tag{font-style:normal;font-size:9px;letter-spacing:1.5px;padding:3px 8px;border:1px solid #354650;border-radius:2px;color:#8fa3ab;white-space:nowrap;flex:none}.map-tag.hist{color:var(--gold);border-color:#d8bb8266;background:#d8bb8212}.map-choice.active{border-color:#81bdc270;background:linear-gradient(110deg,#4c929621,#132027)}.map-choice.active .map-symbol,.map-choice.active i{color:var(--cyan)}.map-choice:hover{border-color:var(--cyan)}.advanced{margin:16px 0 22px;border-bottom:1px solid var(--line);font-size:12px}.advanced summary{list-style:none;cursor:pointer;padding:7px 0 13px;color:var(--muted);display:flex;justify-content:space-between}.advanced summary::-webkit-details-marker{display:none}.advanced[open] summary{color:var(--gold)}.advanced-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:18px}.option{display:flex;flex-direction:column;gap:7px;font-size:10px;color:var(--muted)}.option select,.option input{color:var(--text);border:1px solid var(--line);background:#131e25;border-radius:2px;padding:9px;width:100%;font-size:11px}.option-note{grid-column:1/-1;font-size:10px;color:var(--muted)}.primary{background:var(--gold);color:#141b1f;padding:12px 22px;font-weight:700;font-size:13px;letter-spacing:.6px;border:1px solid var(--gold);border-radius:2px}.primary:hover:not(:disabled){background:#ead1a2;box-shadow:0 0 22px #d8bb8222}.primary.danger{background:var(--orange);border-color:var(--orange)}.secondary{background:#1a2730;border:1px solid #354650;border-radius:2px;color:#c2cdcd;padding:12px 18px;font-size:12px}.secondary:hover:not(:disabled){border-color:var(--cyan)}.launch{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 22px;font-size:15px}.launch span{font-size:23px;line-height:1}.resume-button{display:block;width:100%;background:none;margin-top:10px;font-size:12px;color:var(--cyan);padding:8px}.menu-foot{font-size:9px;color:#687b84;display:flex;align-items:center;justify-content:center;gap:13px;margin-top:17px}.menu-foot i{width:3px;height:3px;background:#586d75;border-radius:50%}.menu-visual{min-height:670px;position:relative;isolation:isolate;margin-top:5px;align-self:stretch;border-left:1px solid #26383e60}.scene-mount{position:absolute;inset:0;z-index:0;overflow:hidden}.menu-visual .scene-mount{inset:60px -25px 60px -30px;mask-image:linear-gradient(transparent,black 10%,black 80%,transparent)}.map-heading{position:absolute;top:7px;left:30px;z-index:1}.map-heading span{font-size:9px;letter-spacing:2px;color:#788d95;display:block}.map-heading b{font-size:19px;letter-spacing:3px;display:block;font-weight:500;margin-top:8px}.map-caption{position:absolute;bottom:20px;left:30px;right:20px;z-index:1;padding-top:20px;border-top:1px solid var(--line)}.coordinates{font-size:9px;letter-spacing:2px;color:var(--gold)}.map-caption p{font-size:12px;line-height:1.8;color:#879ba2;margin-top:12px;max-width:360px}.side-word{position:absolute;right:-18px;top:40%;writing-mode:vertical-rl;font-size:9px;letter-spacing:5px;color:#5a7784}.visual-corner{position:absolute;width:24px;height:24px;border-color:#5e7b8250}.tl{left:0;top:0;border-left:1px solid;border-top:1px solid}.br{right:0;bottom:0;border-right:1px solid;border-bottom:1px solid}.round-info{display:flex;gap:13px;align-items:center;font-size:10px;letter-spacing:1px;color:var(--muted)}.round-info b{font-size:26px;font-weight:500;color:var(--gold)}.clock{padding-left:16px;border-left:1px solid var(--line);color:var(--cyan);min-width:70px}.armies{display:flex;align-items:center;max-width:1600px;margin:18px auto;padding:0 3%;gap:24px}.army-panel{display:flex;align-items:center;gap:14px;flex:1;background:#111b22;border:1px solid var(--line);padding:13px 18px;text-align:left;border-radius:3px}.army-panel.current.army-0{border-left:3px solid var(--cyan)}.army-panel.current.army-1{border-left:3px solid var(--orange)}.army-insignia{font-size:30px;color:var(--cyan)}.army-1 .army-insignia{color:var(--orange)}.army-panel b{font-size:13px;letter-spacing:.5px}.army-panel>span>small{display:block;font-size:9px;color:var(--muted);margin-top:2px}.army-stats{display:flex;margin-left:auto;gap:20px;font-size:9px;color:var(--muted)}.army-stats span{text-align:center}.army-stats b{display:block;font-size:19px;font-weight:500;color:#dce2dc}.army-vs{font-size:9px;color:#6d818b;letter-spacing:2px}.game-layout{max-width:1600px;padding:0 3% 24px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:20px}.play-column{min-width:0}.war-map,.battle-area{border:1px solid var(--line);background:#0c151bcc;border-radius:4px;overflow:hidden}.war-map{position:relative}.map-title{position:absolute;top:20px;left:24px;z-index:2;pointer-events:none}.map-title h2{font-size:19px;letter-spacing:2px;margin-top:6px;font-weight:550}.map-stage{position:relative;height:440px;background:#081117}.node-layer{position:absolute;inset:0;z-index:1;pointer-events:none}.map-node{position:absolute;transform:translate(-50%,-5px);display:flex;align-items:center;flex-direction:column;background:#0b151ce8;border:1px solid #64757955;pointer-events:auto;min-width:88px;padding:6px 10px;box-shadow:0 5px 16px #0008;border-radius:3px}.map-node:not(:disabled):active{transform:translate(-50%,-5px)}.node-icon{font-size:19px;color:#8c9b91;line-height:1.1}.map-node b{font-size:11px;font-weight:550;margin-top:3px;white-space:nowrap}.map-node small{font-size:8px;color:#7c9099;margin-top:2px;white-space:nowrap}.map-node.owner-0{border-top:2px solid var(--cyan)}.map-node.owner-1{border-top:2px solid var(--orange)}.owner-0 .node-icon{color:var(--cyan)}.owner-1 .node-icon{color:var(--orange)}.map-node.reachable{box-shadow:0 0 12px #d8bb8218}.map-node.focused{border-color:var(--gold);background:#28302bec;box-shadow:0 0 22px #d8bb8240;z-index:2}.map-node:hover{border-color:var(--gold);z-index:3}.map-compass{position:absolute;right:25px;top:20px;z-index:1;color:#7e959b;text-align:center;font-size:11px}.target-bar{min-height:118px;padding:18px 22px;background:#111c23;border-top:1px solid var(--line);display:flex;align-items:center;gap:15px;justify-content:space-between}.target-bar small{display:block;font-size:9px;color:#849aa4;letter-spacing:2px}.target-bar b{font-size:14px;display:block;margin:3px 0}.target-bar p{font-size:11px;color:var(--muted);max-width:380px}.target-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:310px}.target-actions .primary,.target-actions .secondary{padding:10px 12px;white-space:nowrap;font-size:11px}.garrison-info{display:block;color:var(--gold);font-size:10px;margin-top:4px}.hand-tray{margin-top:16px;background:#101920;border:1px solid var(--line);border-radius:3px;padding:14px 18px 18px}.hand-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;gap:10px}.hand-top>div{display:flex;align-items:center;gap:12px}.hand-top b{font-size:11px;color:#9fafb5;font-weight:400}.hand-top>div>span:not(.eyebrow){font-size:10px;color:#6f8790}.hand-scroll{display:flex;align-items:center;gap:9px;overflow-x:auto;padding:7px 3px 10px;scrollbar-width:thin;scrollbar-color:#465c65 transparent}.playing-card{flex:0 0 69px;width:69px;height:100px;border-radius:4px;position:relative;background:linear-gradient(140deg,#e6e5d8,#bebfaf);box-shadow:0 3px 8px #0004;border:1px solid #efeed788;color:#1c2930;text-align:left;padding:7px;user-select:none;font-family:Georgia,"Times New Roman",serif}.playing-card.red{color:#a83e32}.card-corner{font-size:18px;font-weight:700;line-height:1;display:flex;align-items:center;flex-direction:column;width:18px}.card-corner i{font-size:13px;font-style:normal;margin-top:2px}.card-suit{position:absolute;top:28px;left:24px;font-size:30px;opacity:.86}.card-bottom{position:absolute;bottom:5px;right:7px;font-size:16px;transform:rotate(180deg);font-weight:bold}.playing-card.selected{outline:2px solid var(--gold);outline-offset:2px;transform:translateY(-4px);box-shadow:0 0 17px #d8bb8230}.playing-card.concealed{background:linear-gradient(135deg,#596c6a,#263f44);color:#d2e3d9;border-color:#73acb0}.playing-card.back{background:repeating-linear-gradient(45deg,#142c36,#142c36 2px,#1a333d 2px,#1a333d 5px);border:1px solid #4c707d;box-shadow:inset 0 0 0 5px #18313b,inset 0 0 0 6px #4c707d50}.card-back-mark{position:absolute;inset:12px 18%;display:flex;flex-direction:column;align-items:center;justify-content:center;font:italic 32px Georgia,"Times New Roman",serif;color:#769eab}.card-back-caption{display:block;width:94%;aspect-ratio:15/2;height:auto;margin-top:6px;overflow:hidden;flex:none}.card-back-caption text{font-family:var(--font);font-size:11px;letter-spacing:1px;fill:#769eab}.stance{position:absolute;bottom:0;left:0;right:0;text-align:center;background:#182b31ee;color:#d4e8e6;font:8px var(--font);padding:3px;letter-spacing:1px;border-radius:0 0 3px 3px}.playing-card .stance~.card-bottom{bottom:20px}.boost,.peek{position:absolute;right:-5px;top:-8px;background:var(--gold);color:#1a242a;padding:2px 4px;font:9px var(--font);border-radius:2px}.peek{font-size:8px}.playing-card.small{width:58px;height:84px;flex-basis:58px}.small .card-suit{left:20px;top:24px;font-size:24px}.intel-panel{background:#0e171e;border:1px solid var(--line);border-radius:3px;padding:19px 17px;min-width:0;max-height:880px;overflow:auto;scrollbar-width:thin}.supply-box>b{display:block;font-size:37px;font-weight:400;letter-spacing:1px;margin-top:8px}.supply-box>b small{font-size:13px;color:#708590}.supply-meter{height:3px;background:#233540;margin:7px 0 12px}.supply-meter span{display:block;height:100%;background:var(--gold)}.supply-box p{font-size:10px;color:var(--muted);line-height:1.9}.tactics-heading,.log-heading{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:20px;margin-top:20px;margin-bottom:12px}.tactics-heading h3,.log-heading h3{font-size:12px;font-weight:550}.tactics-heading span,.log-heading span{font-size:9px;color:#839ba3;letter-spacing:1px}.strategy-card{background:linear-gradient(145deg,#233137,#141f26);border:1px solid #5b696250;border-radius:4px;padding:19px;text-align:left;width:100%;display:flex;flex-direction:column;min-height:240px;box-shadow:0 8px 25px #0003}.strategy-card:hover:not(:disabled){border-color:var(--gold);transform:translateY(-3px)}.strategy-top{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px}.strategy-top>span{font-size:44px;color:var(--gold);font-weight:300;line-height:1.3}.strategy-top small{font-size:9px;color:#94aaa8;letter-spacing:1px}.strategy-card h3{font-size:21px;font-weight:500;margin-top:24px;letter-spacing:2px}.strategy-card p{font-size:12px;color:#9fafad;line-height:1.85;margin-top:12px;flex:1}.strategy-foot{display:block;width:100%;border-top:1px solid #9fa68e30;margin-top:25px;padding-top:13px;font-size:11px;color:var(--gold)}.tactic-wrap .strategy-card{padding:13px;min-height:0}.tactic-wrap .strategy-top>span{font-size:26px}.tactic-wrap .strategy-card h3{font-size:15px;margin-top:9px;letter-spacing:1px}.tactic-wrap .strategy-card p{font-size:10px;margin-top:7px}.tactic-wrap .strategy-foot{font-size:9px;margin-top:12px;padding-top:8px}.tactic-note{display:block;color:#718992;font-size:9px;margin-top:7px}.empty-tactics{border:1px dashed #3f555c;padding:15px 10px;color:#8ea3aa;font-size:12px;line-height:2;text-align:center}.empty-tactics small{font-size:9px}.battle-log{list-style:none;padding:0;margin:0;max-height:300px;overflow:auto;scrollbar-width:thin}.battle-log li{display:flex;gap:9px;padding:10px 0;border-bottom:1px solid #293a4222}.battle-log li>span{font-size:9px;color:#64848e;min-width:15px;margin-top:2px}.battle-log p{font-size:10px;color:#92a5ac;line-height:1.8}.battle-log li:first-child p{color:#d1dcd9}.battle-area{padding:20px 24px 0;background:radial-gradient(ellipse at 50% 40%,#253e4022,transparent 65%),#0d171e}.battle-heading{display:flex;justify-content:space-between;align-items:center}.battle-heading h2{font-size:18px;font-weight:500;letter-spacing:2px;margin-top:4px}.battle-badge{color:var(--gold);font-size:10px;border:1px solid #d8bb8233;padding:5px 10px;background:#d8bb8208}.battle-line{display:flex;align-items:center;gap:25px;justify-content:center;padding:22px 0}.line-label{width:160px;flex-shrink:0}.line-label span{font-size:9px;color:#6f909d;letter-spacing:.8px}.line-label b{display:block;font-size:14px;font-weight:500;margin-top:5px}.line-label small{display:block;font-size:10px;color:var(--gold);margin-top:10px}.enemy-line .line-label span{color:#c2826c}.line-cards{display:flex;gap:18px}.line-cards .playing-card{width:85px;height:119px;flex-basis:85px}.line-cards .card-suit{left:29px;top:34px;font-size:37px}.card-slot{width:85px;height:119px;border:1px dashed #334e5b;border-radius:4px;background:#16263044;display:flex;align-items:center;justify-content:center;color:#395564;font-size:14px;font-family:monospace}.versus{display:flex;align-items:center;justify-content:center;gap:20px;margin:0 10%}.versus span{height:1px;background:linear-gradient(90deg,transparent,#59727355);flex:1}.versus span:last-child{transform:rotate(180deg)}.versus b{font-size:10px;font-weight:500;letter-spacing:2px;color:var(--gold)}.battle-actions{margin:0 -24px;padding:17px 22px;background:#152129;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}.battle-actions>div:last-child{display:flex;gap:8px;flex-shrink:0}.battle-actions b{display:block;font-size:11px;font-weight:500}.battle-actions small{display:block;color:var(--muted);font-size:9px;line-height:1.8;margin-top:4px}.battle-actions button{padding:10px 15px;font-size:11px}.draft-screen{text-align:center;padding:60px 30px 50px;max-width:1100px;margin:auto}.draft-screen h1{font-size:36px;font-weight:600;letter-spacing:2px;margin:12px 0}.draft-screen>p{color:var(--muted);font-size:13px}.draft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:38px auto}.draft-grid .strategy-card{min-height:330px;padding:28px}.draft-help{font-size:11px;color:#7e929c}.ai-thinking{padding:100px 20px;color:var(--gold)}.ai-thinking span{display:inline-block;width:9px;height:9px;background:var(--gold);margin-right:15px;animation:pulse 1s infinite}.handoff{position:fixed;inset:0;background:#0a1218;z-index:30;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:25px}.handoff-symbol{font-size:70px;color:var(--gold);line-height:1;margin-bottom:25px}.handoff h1{font-size:30px;line-height:1.6;margin:15px 0}.handoff h1 em{font-style:normal;color:var(--cyan)}.handoff p{font-size:12px;color:var(--muted);margin-bottom:28px}.handoff .text-button{margin-top:20px}.modal-overlay{position:fixed;inset:0;background:#02080cce;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(10px)}.modal{max-width:760px;width:100%;max-height:90vh;overflow:auto;border:1px solid #4a6065;background:#111e26;padding:32px;border-radius:5px;box-shadow:0 20px 80px #0008;scrollbar-width:thin}.modal h2{font-size:25px;margin:10px 0 15px}.modal>p{font-size:13px;color:var(--muted);margin:10px 0 22px}.rules-content{font-size:12px;line-height:1.9;color:#a8b9bc;margin:20px 0}.rules-content h3{font-size:15px;color:var(--gold);margin:24px 0 8px}.rules-content li{margin:9px 0}.rules-content ol,.rules-content ul{padding-left:20px}.rules-content p{margin:10px 0}.rank-order{padding:14px;background:#d8bb820c;border:1px solid #d8bb8222;color:var(--gold)}.pause-actions{display:flex;flex-direction:column;gap:12px;margin-top:25px}.modal-actions{display:flex;gap:12px}.reserve-cards{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 30px}.result-screen{max-width:850px;margin:0 auto;text-align:center;padding:60px 24px}.result-emblem{font-size:74px;color:var(--gold);margin-bottom:15px;line-height:1}.result-screen h1{font-size:34px;margin:16px 0 10px}.result-screen>p{color:var(--muted)}.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:35px 0}.result-stats>div{padding:24px;background:#16232b;border:1px solid var(--line)}.result-stats h3{font-size:15px;color:var(--cyan);font-weight:500}.result-stats .army-1 h3{color:var(--orange)}.result-stats b{font-size:34px;font-weight:400;display:block;margin:14px 0}.result-stats small{font-size:11px;color:var(--muted)}.result-stats span{color:var(--muted);font-size:11px}.result-actions{display:flex;justify-content:center;gap:15px;margin:30px 0}.result-screen>small{color:#627d8a;font-size:10px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);padding:12px 22px;background:#23343e;border:1px solid #72979f;color:#e4eee7;font-size:13px;z-index:100;border-radius:3px;max-width:90%;box-shadow:0 5px 25px #0008;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}#toast.show{opacity:1;transform:translate(-50%,0)}.no-webgl{background:radial-gradient(ellipse at center,#28434d55,transparent 70%),repeating-linear-gradient(0deg,transparent,transparent 39px,#3d657b20 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,#3d657b20 40px)}@keyframes pulse{50%{opacity:.25}}@media(min-width:1600px){.map-stage{height:510px}.battle-line{padding:29px 0}.line-cards .playing-card,.card-slot{width:98px;height:138px}.line-cards .card-suit{font-size:42px;left:34px;top:42px}.battle-area .line-cards{gap:22px}.battle-actions{padding:20px 24px}.command-menu{padding-top:64px}}
@media(max-width:1100px){.command-menu{grid-template-columns:370px minmax(0,1fr);gap:4%;padding:35px 4%}.setup-panel h1{font-size:39px}.top-meta{display:none}.game-layout{grid-template-columns:minmax(0,1fr) 200px;gap:12px;padding:0 2% 20px}.armies{padding:0 2%;gap:15px}.army-stats{gap:12px}.target-bar{flex-direction:column;align-items:flex-start}.target-actions{max-width:none;justify-content:flex-start}.line-label{width:125px}.battle-line{gap:15px}.line-cards{gap:10px}.line-cards .playing-card,.card-slot{width:73px;height:108px;flex-basis:73px}.line-cards .card-suit{left:24px;font-size:31px}.battle-actions{flex-direction:column;align-items:flex-start}.map-stage{height:390px}.map-node{padding:5px 7px;min-width:76px}.map-node b{font-size:10px}.draft-grid{gap:15px}}
@media(max-width:800px){.topbar{height:72px;padding:0 20px;gap:10px}.brand>span:last-child{font-size:17px;letter-spacing:2px}.brand small{font-size:6px;letter-spacing:1px}.brand-mark{width:34px;height:34px}.top-actions{gap:8px}.top-actions .text-button{font-size:10px}.command-menu{grid-template-columns:1fr;padding:28px 22px;max-width:560px}.menu-visual{display:none}.setup-panel h1{font-size:36px}.intro{margin-bottom:22px}.game-layout{grid-template-columns:1fr}.intel-panel{display:grid;grid-template-columns:140px 1fr;gap:10px 20px;max-height:none}.supply-box{grid-row:1/3}.tactics-heading{margin:0;padding-top:0;border:0}.tactic-wrap{grid-column:2;grid-row:2}.empty-tactics{grid-column:2;grid-row:2}.log-heading{grid-column:1/-1}.battle-log{grid-column:1/-1;max-height:150px}.armies{gap:8px;margin:12px auto}.army-panel{padding:10px;gap:8px}.army-panel b{font-size:11px}.army-insignia{font-size:24px}.army-stats{gap:10px}.army-stats b{font-size:16px}.army-stats span:last-child{display:none}.round-info{gap:7px}.round-info>span:first-child{display:none}.round-info b{font-size:21px}.round-info .clock{padding-left:7px;min-width:45px;font-size:9px}.map-stage{height:370px}.map-title{top:15px;left:17px}.map-title h2{font-size:16px}.map-title .eyebrow{font-size:8px}.hand-tray{padding:12px}.hand-top .eyebrow{font-size:8px}.hand-top>div{gap:7px}.hand-top>div>span:not(.eyebrow){font-size:8px}.hand-top .text-button{font-size:9px;padding:3px}.hand-scroll{gap:8px}.playing-card{width:63px;height:94px;flex-basis:63px}.draft-screen{padding:36px 20px}.draft-screen h1{font-size:28px}.draft-grid{gap:10px}.draft-grid .strategy-card{padding:15px;min-height:285px}.strategy-card h3{font-size:17px}.strategy-card p{font-size:11px}.strategy-top{flex-direction:column;align-items:flex-start;gap:3px}.tactic-wrap .strategy-top{flex-direction:row}.draft-help{font-size:10px}.battle-line{justify-content:center}.line-label{width:125px}.battle-actions{gap:14px}.battle-actions>div:last-child{align-self:flex-end}.map-node{min-width:72px;padding:4px}.map-node small{font-size:7px}.node-icon{font-size:15px}}
@media(max-width:520px){.topbar{padding:0 12px}.top-actions .text-button:first-child{display:none}.top-actions{gap:6px}.icon-button{padding:6px 9px;font-size:10px}.armies{gap:5px}.army-panel{padding:8px;gap:6px;flex-wrap:wrap}.army-insignia{display:none}.army-stats{gap:13px}.army-panel>span>small{font-size:8px}.army-vs{font-size:8px}.army-stats b{font-size:15px}.army-stats span{font-size:8px}.army-panel>span{min-width:60px}.battle-area{padding:15px 12px 0}.battle-heading h2{font-size:16px}.battle-badge{padding:3px 6px;font-size:9px}.battle-heading .eyebrow{font-size:8px}.battle-line{flex-direction:column;gap:12px;padding:17px 0}.line-label{width:100%;display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}.line-label b{font-size:12px;margin:0;order:-1}.line-label span{font-size:8px}.line-label small{font-size:9px;margin:0}.line-cards{gap:17px}.line-cards .playing-card,.card-slot{width:76px;height:105px;flex-basis:76px}.battle-actions{margin:0 -12px;padding:14px 12px}.battle-actions>div:last-child{width:100%}.battle-actions button:first-child{flex:1}.map-stage{height:370px}.map-node{min-width:62px}.map-node b{font-size:9px}.map-node small{font-size:6px}.map-title{top:10px}.map-title h2{font-size:14px}.target-bar{padding:14px}.target-bar p{font-size:10px}.target-actions{width:100%;gap:6px}.target-actions .primary{flex:1}.hand-top{gap:4px}.hand-top>div>span:not(.eyebrow){display:none}.draft-grid{grid-template-columns:1fr;margin:24px auto;max-width:350px}.draft-grid .strategy-card{min-height:0;padding:18px;display:grid;grid-template-columns:52px 1fr;gap:8px 16px}.draft-grid .strategy-top{grid-row:1/4}.draft-grid .strategy-top>span{font-size:36px}.draft-grid .strategy-top small{font-size:8px}.draft-grid .strategy-card h3{margin:0;font-size:17px}.draft-grid .strategy-card p{margin:0;font-size:11px}.draft-grid .strategy-foot{margin:4px 0 0;padding-top:8px;font-size:10px}.result-screen h1{font-size:25px}.result-stats{gap:10px}.result-stats>div{padding:16px 10px}.result-stats h3{font-size:12px}.result-stats b{font-size:28px}.result-actions{flex-direction:column}.modal{padding:22px}.modal-overlay{padding:14px}.modal h2{font-size:21px}.handoff h1{font-size:25px}.intel-panel{grid-template-columns:115px 1fr;padding:15px;gap:12px}.tactic-wrap .strategy-card h3{font-size:13px}.tactic-wrap .strategy-card p{font-size:9px}.supply-box .eyebrow{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Readable action playback and troop accounting */
.event-screen{height:calc(100dvh - 88px);min-height:0;padding:24px 20px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at center,#25444d55,transparent 65%),#091218}
.event-panel{width:min(800px,100%);max-height:100%;min-width:0;padding:30px;overflow:auto;overscroll-behavior:contain;border:1px solid #607d86;border-top:3px solid var(--gold);background:#13212bf2;box-shadow:0 20px 70px #0007;scrollbar-width:thin}
.event-invasion .event-panel{border-top-color:var(--orange)}.event-panel h1{font-size:27px;margin:12px 0}.event-panel>p{color:#b3c5c9;line-height:1.9;font-size:14px}
.event-map{height:280px;position:relative;margin:16px 0 35px;background:#08151e;border:1px solid #354b55}
.event-map svg{position:absolute;inset:0;width:100%;height:100%}.event-map line{stroke:#426470;stroke-width:.3}
.event-map-node{position:absolute;transform:translate(-50%,-50%);text-align:center;z-index:1}.event-map-node i{display:block;font-size:22px;color:#879889;font-style:normal}
.event-map-node b{display:block;background:#111f2cee;padding:3px 7px;font-size:11px;white-space:nowrap}
.event-map-node.owner-0 i{color:var(--cyan)}.event-map-node.owner-1 i{color:var(--orange)}
.event-map-node.hit::before{content:'';position:absolute;inset:-12px;border:2px solid var(--orange);border-radius:50%;animation:invasion-ring 1s ease-out infinite}.event-map-node.hit b{background:#613d2d;color:#fff}
.event-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:26px 0;padding:10px}.event-cards .playing-card{animation:card-arrival .55s ease-out both}
.event-cards .playing-card:nth-child(2n){animation-delay:.12s}.event-cards .playing-card:nth-child(3n){animation-delay:.24s}
.event-progress{height:3px;background:#314650;margin-top:25px;overflow:hidden}.event-progress span{display:block;height:100%;background:var(--gold);animation:event-time var(--duration) linear forwards;transform-origin:left}
.event-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:17px}.event-footer small{font-size:11px;color:#a2b9c1}
.new-card-badge{position:absolute;right:-3px;top:-9px;background:#9febe2;color:#0b3234;padding:1px 6px;border:1px solid #cefff7;border-radius:3px;font:bold 10px var(--font);box-shadow:0 0 12px #8ddddb55}
.garrison-roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:15px 0 25px}.garrison-roster>div{padding:14px;border:1px solid #39525d;background:#10212b}.garrison-roster>div>b{display:block;color:var(--gold)}.garrison-roster span,.garrison-roster p{font-size:11px;color:#9fb6c0}.garrison-roster .reserve-cards{margin:12px 0 0}
.rotation-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.rotation-grid section{min-width:0;padding:14px;border:1px solid #39525d;background:#0d1920}.rotation-grid h3{display:flex;justify-content:space-between;color:var(--gold);font-size:12px;margin-bottom:12px}.rotation-grid h3 span{color:var(--muted);font-weight:400}.rotation-cards{display:flex;gap:9px;min-height:92px;overflow-x:auto;padding:5px 4px 9px}.rotation-cards .playing-card{flex:0 0 58px}.meds-cards{margin:16px 0;flex-wrap:wrap}.rotation-summary{display:flex;justify-content:space-between;gap:15px;align-items:center;margin:0 0 20px;padding:12px 14px;background:#d8bb820c;border:1px solid #d8bb8222}.rotation-summary b{color:var(--gold);font-size:12px}.rotation-summary span{color:var(--muted);font-size:10px;text-align:right}
.map-stage .map-node.owner-0{border-color:#77d6db99;background:linear-gradient(145deg,#173137f2,#0b171deb);box-shadow:inset 3px 0 #77d6db,0 5px 16px #0008,0 0 12px #77d6db22}.map-stage .map-node.owner-1{border-color:#df806899;background:linear-gradient(145deg,#34221ff2,#0f171ceb);box-shadow:inset 3px 0 #df8068,0 5px 16px #0008,0 0 12px #df806822}.map-stage .map-node.owner-0.focused,.map-stage .map-node.owner-1.focused{border-color:var(--gold);box-shadow:inset 3px 0 currentColor,0 0 22px #d8bb8260}.action-reminder{display:block;flex:0 0 100%;margin:0 0 10px;padding:0 2px 10px;border-bottom:1px solid #d8bb8233;color:var(--gold);font-size:10px;letter-spacing:.5px;line-height:1.7;text-align:right}.needs-selection{border-style:dashed!important}.needs-selection:hover,.needs-selection:focus-visible{border-color:var(--gold)!important;box-shadow:0 0 0 2px #d8bb8218}
.army-stats{gap:14px}.army-stats span:last-child{display:block}.targeting-note{padding:10px 16px;border:1px solid var(--gold);color:var(--gold);background:#2b3128;margin-bottom:12px}
@keyframes invasion-ring{from{transform:scale(.85);opacity:1}to{transform:scale(1.5);opacity:0}}
@keyframes card-arrival{from{opacity:0;transform:translateY(-35px) rotate(-6deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes event-time{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:800px){.event-screen{height:calc(100dvh - 72px);padding:14px 10px}}
@media(max-width:600px){.event-panel{padding:16px}.event-panel h1{font-size:22px}.event-map{height:190px;margin:12px 0 18px}.event-screen.event-strategy .event-map{height:150px}.event-footer{gap:10px;margin-top:12px;flex-direction:column;align-items:stretch}.event-footer button{width:100%}.event-progress{margin-top:16px}.event-map-node b{font-size:8px;padding:2px 4px}.event-cards{margin:16px 0;padding:5px}.garrison-roster,.rotation-grid{grid-template-columns:1fr}.rotation-grid{gap:9px}.rotation-cards{min-height:88px}.rotation-summary{align-items:flex-start;flex-direction:column}.rotation-summary span{text-align:left}.army-stats{gap:7px}.army-stats span:nth-child(3){display:none}.army-panel{gap:6px}}
.battle-line:has(.line-cards>:nth-child(4)) .line-cards{gap:9px}.battle-line:has(.line-cards>:nth-child(4)) .playing-card,.battle-line:has(.line-cards>:nth-child(4)) .card-slot{width:72px;height:104px;flex-basis:72px}.battle-line:has(.line-cards>:nth-child(4)) .card-suit{left:24px;top:30px;font-size:31px}
@media(min-width:801px){body:not(:has(.game-layout)) .map-choices{display:grid;grid-template-columns:1fr 1fr}.map-choice{min-width:0}.map-choice .map-symbol{font-size:22px;width:24px}.map-choice{padding:9px 11px;gap:9px}.map-choice b{font-size:12px}.map-choice small{font-size:8px}}
@media(max-width:520px){body:not(:has(.game-layout)) .map-choices{display:flex}}
.dense-map .map-node{min-width:64px;padding:3px 5px;transform:translate(-50%,-5px)}.dense-map .map-node:not(:disabled):active{transform:translate(-50%,-5px)}.dense-map .node-icon{font-size:13px}.dense-map .map-node b{font-size:8px}.dense-map .map-node small{display:none}.dense-map .map-mini-card{width:15px;height:20px;font-size:6px}.dense-map .map-title{padding:3px 7px;background:#081117bb}
.topology-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.topology-lines line{stroke:#7d9ca4;stroke-width:.24;vector-effect:non-scaling-stroke;opacity:.48}.dense-map .node-layer{z-index:2}
@media(prefers-reduced-motion:reduce){.event-map-node.hit::before{animation:none;opacity:.8}.event-cards .playing-card{animation:none}.event-progress span{animation:none}}

/* Make the active counter card unmistakable even though its owner can see its face. */
.playing-card.revealable{cursor:pointer;outline:2px solid var(--gold);outline-offset:4px;animation:reveal-prompt 1.25s ease-in-out infinite}
.playing-card.revealable:hover,.playing-card.revealable.selected{outline-color:#b9fff3;box-shadow:0 0 24px #69ddd877;transform:translateY(-6px)}
.playing-card.revealable .stance{background:var(--gold);color:#17212a;font-weight:800}
.playing-card.revealable.selected .stance{background:#9febe2}
@keyframes reveal-prompt{50%{outline-color:#b9fff3;box-shadow:0 0 18px #69ddd855}}
@media(prefers-reduced-motion:reduce){.playing-card.revealable{animation:none}}

/* Public strategy market */
.strategy-market{margin-top:14px;padding:18px;border:1px solid #354b55;background:#0d1a22}.market-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:13px}.market-heading h3{margin:5px 0 0;font-size:16px}.market-heading>small{color:#8fa7ae;font-size:10px}.market-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.market-card{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:82px;padding:11px;border:1px solid #344b55;background:linear-gradient(135deg,#172832,#101d25)}.market-icon{font-size:25px;color:var(--gold);text-align:center}.market-card b{display:block;font-size:13px}.market-card small{display:block;margin-top:4px;color:#91a8af;font-size:9px;line-height:1.45}.market-buy{padding:9px 10px;border:1px solid var(--gold);color:var(--gold);background:#28291f;white-space:nowrap}.market-buy:disabled{border-color:#40515a;color:#65777c;background:#152128}.event-strategy-card{display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:18px;margin:24px 0;padding:20px;border:1px solid #516d76;background:#0c1922}.event-strategy-card>span{font-size:48px;color:var(--gold);text-align:center}.event-strategy-card b{display:block;font-size:20px}.event-strategy-card small{display:block;margin-top:7px;color:#a9bcc1;line-height:1.6}.event-strategy-card strong{color:var(--gold);white-space:nowrap}
@media(max-width:800px){.market-list{grid-template-columns:1fr}.market-card{min-height:70px}.market-heading{align-items:flex-start;flex-direction:column;gap:5px}}
@media(max-width:520px){.strategy-market{padding:12px}.event-strategy-card{grid-template-columns:45px minmax(0,1fr)}.event-strategy-card>span{font-size:34px}.event-strategy-card strong{grid-column:2}}

/* Single-screen game HUD, fanned hand, collapsible shop and icon tactics. */
body:has(.game-layout){height:100dvh;overflow:hidden}.strategy-shop-trigger{width:100%;height:58px;flex:0 0 58px;display:flex;align-items:center;gap:13px;padding:9px 16px;text-align:left;border:1px solid #425963;background:linear-gradient(100deg,#152630,#0d1921);color:#dce6e2}.strategy-shop-trigger:hover{border-color:var(--gold);background:#1a2b33}.shop-emblem{font-size:25px;color:var(--gold)}.strategy-shop-trigger small{display:block;color:#91a7ad;font-size:8px;letter-spacing:1.4px}.strategy-shop-trigger b{display:block;font-size:12px;margin-top:2px}.shop-icons{display:flex;gap:7px;margin-left:auto}.shop-icons i{width:28px;height:28px;display:grid;place-items:center;border:1px solid #4a6169;background:#0b171e;color:var(--gold);font-size:16px;font-style:normal}.strategy-shop-trigger strong{font-size:11px;color:var(--gold);white-space:nowrap}.strategy-market.expanded{margin:0 0 18px}.modal:has(.strategy-market){max-width:1080px}.tactic-dock{display:flex;flex-wrap:wrap;gap:8px;position:relative}.strategy-token{position:relative;width:59px;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid #415760;background:#14232c}.strategy-token>span:first-child{font-size:25px;color:var(--gold);line-height:1}.strategy-token>small{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px;color:#b7c6c5;font-size:8px}.strategy-token.ready{border-color:#6caaa8;box-shadow:inset 0 -2px #70d1cb}.strategy-token.unavailable{filter:saturate(.55);opacity:.68}.strategy-tooltip{position:absolute;z-index:80;right:calc(100% + 12px);top:-5px;width:260px;padding:15px;text-align:left;border:1px solid #718a91;background:#101d25f5;box-shadow:0 15px 40px #000b;opacity:0;visibility:hidden;transform:translateX(8px);pointer-events:none;transition:.16s}.strategy-token:hover .strategy-tooltip,.strategy-token:focus-visible .strategy-tooltip{opacity:1;visibility:visible;transform:none}.strategy-tooltip b{display:inline;font-size:15px}.strategy-tooltip em{float:right;color:var(--gold);font-size:8px;font-style:normal}.strategy-tooltip p{margin:9px 0;color:#a9bbbe;font-size:10px;line-height:1.65}.strategy-tooltip strong{display:block;padding-top:8px;border-top:1px solid #344850;color:#8ed5d0;font-size:9px}.hand-scroll{overflow:visible;justify-content:center;height:108px;padding:7px 35px 0}.hand-card-shell{position:relative;flex:0 1 48px;min-width:24px;max-width:48px;height:104px;z-index:var(--z);transform:translateY(var(--lift)) rotate(var(--rot));transform-origin:50% 120%;transition:transform .18s}.hand-card-shell:last-child{margin-right:21px}.hand-card-shell:hover,.hand-card-shell:focus-within{z-index:60;transform:translateY(-10px) rotate(0)}.hand-card-shell>.playing-card{max-width:none}.hand-card-shell>.playing-card.selected{transform:translateY(-5px)}
@media(max-width:900px) and (min-width:801px){.strategy-tooltip{position:fixed;left:max(12px,calc(50% - 260px));right:max(12px,calc(50% - 260px));top:auto;bottom:18px;width:auto;max-height:calc(100dvh - 36px);overflow:auto}}
@media(min-width:801px){body:has(.game-layout) .topbar{height:64px}body:has(.game-layout) .armies{height:64px;margin:7px auto;padding-top:0;padding-bottom:0}.game-layout{height:calc(100dvh - 142px);padding-bottom:10px;overflow:hidden}.play-column{height:100%;min-height:0;display:flex;flex-direction:column;gap:9px}.war-map,.battle-area{flex:1;min-height:0}.war-map{display:flex;flex-direction:column}.map-stage{height:auto;min-height:0;flex:1}.target-bar{min-height:94px;flex:0 0 94px;padding:12px 18px}.hand-tray{height:139px;flex:0 0 139px;margin:0;padding:9px 14px}.hand-top{margin-bottom:4px}.intel-panel{height:100%;max-height:none;overflow:visible;padding:13px}.battle-log{max-height:none;overflow:hidden}.tactics-heading,.log-heading{padding-top:13px;margin-top:13px;margin-bottom:9px}.battle-area{display:flex;flex-direction:column}.battle-heading{flex:0 0 auto}.battle-line{flex:1;min-height:0;padding:8px 0}.battle-actions{flex:0 0 auto}.line-cards .playing-card,.card-slot{height:min(119px,15vh)}}
@media(max-width:800px){body:has(.game-layout) .topbar{height:56px}body:has(.game-layout) .armies{height:64px;margin:5px auto}.game-layout{height:calc(100dvh - 125px);padding:0 8px 6px;display:flex;flex-direction:column;overflow:hidden}.play-column{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}.war-map,.battle-area{flex:1;min-height:0}.war-map{display:flex;flex-direction:column}.map-stage{height:auto;min-height:0;flex:1}.target-bar{min-height:82px;flex:0 0 82px;padding:8px 11px}.strategy-shop-trigger{height:48px;flex-basis:48px;padding:6px 10px}.shop-icons i{width:24px;height:24px}.hand-tray{height:116px;flex:0 0 116px;margin:0;padding:6px 8px}.hand-top{margin-bottom:0}.hand-scroll{height:86px;padding:3px 24px 0}.hand-card-shell{flex-basis:25px;min-width:18px;max-width:30px;height:84px}.hand-card-shell .playing-card{width:58px;height:84px;flex-basis:58px}.hand-card-shell:last-child{margin-right:28px}.intel-panel{height:68px;flex:0 0 68px;display:flex;align-items:center;gap:10px;padding:7px 10px;overflow:visible}.supply-box{width:74px;flex:0 0 74px}.supply-box>b{font-size:20px;margin:0}.supply-box p,.supply-meter,.log-heading,.battle-log{display:none}.tactics-heading{border:0;margin:0;padding:0;display:block}.tactics-heading h3{font-size:9px}.tactic-dock{flex-wrap:nowrap}.strategy-token{width:48px;height:48px}.strategy-token>span:first-child{font-size:20px}.strategy-tooltip{position:fixed;left:12px;right:12px;top:auto;bottom:75px;width:auto}.empty-tactics{padding:7px}.battle-area{display:flex;flex-direction:column}.battle-heading{flex:0 0 auto}.battle-line{flex:1;min-height:0;padding:5px 0}.battle-actions{flex:0 0 auto}.line-cards .playing-card,.card-slot{height:min(105px,13vh)}}
@media(min-width:801px){.hand-card-shell>.playing-card{width:60px;height:86px;flex-basis:60px}.hand-card-shell .card-corner{font-size:16px}.hand-card-shell .card-suit{left:21px;top:25px;font-size:25px}.hand-card-shell .card-bottom{font-size:14px}.hand-card-shell{height:90px}.hand-scroll{height:91px}}
html:has(.game-layout){height:100dvh;overflow:hidden}
@media(min-width:801px){body:has(.game-layout) .target-bar{min-height:104px;flex-basis:104px;flex-direction:row;align-items:center}body:has(.game-layout) .target-actions{max-width:320px;justify-content:flex-end}}

/* Stable game viewport and unified interactive map */
.action-point{display:flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid #3e555e;font-size:9px;letter-spacing:.5px;white-space:nowrap}.action-point i{width:7px;height:7px;border-radius:50%;background:#536870}.action-point.available{color:#b8eee9;border-color:#5da29f;background:#173034}.action-point.available i{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.action-point.spent{color:#71858c}
.map-stage{overflow:hidden;touch-action:none;cursor:grab;isolation:isolate}.map-stage.dragging{cursor:grabbing}.map-camera{position:absolute;inset:0;transform:translate(var(--map-x),var(--map-y)) scale(var(--map-scale));transform-origin:50% 50%;will-change:transform}.map-camera>.scene-mount,.map-camera>.topology-lines{position:absolute;inset:0}.map-node{transform:translate(-50%,-5px);transform-origin:50% 50%}.map-node:not(:disabled):active{transform:translate(-50%,-5px)}.map-controls{position:absolute;right:16px;bottom:14px;z-index:8;display:flex;gap:5px}.map-controls button{width:35px;height:35px;border:1px solid #55717a;background:#101e26e8;color:#d8c28f;font-size:18px;box-shadow:0 4px 14px #0007}.map-controls button:hover{border-color:var(--gold)}.map-gesture-hint{position:absolute;left:17px;bottom:15px;z-index:7;padding:5px 8px;background:#081117bb;color:#82999f;font-size:8px;letter-spacing:.7px;pointer-events:none}.map-compass{pointer-events:none}
.playing-card.joker-silver{color:#52636d;background:linear-gradient(140deg,#f7faf9,#c7d0d2 56%,#929fa5);border-color:#f5ffff;box-shadow:0 3px 8px #0005,inset 0 0 16px #ffffff80}.playing-card.joker-gold{color:#76520d;background:linear-gradient(140deg,#fff4c9,#d9b55d 55%,#8d671f);border-color:#ffe9a1;box-shadow:0 3px 10px #0006,inset 0 0 18px #fff1a580,0 0 14px #d9ad4240}.playing-card.joker-silver .card-suit{color:#748891;text-shadow:0 1px #fff}.playing-card.joker-gold .card-suit{color:#9a6b10;text-shadow:0 1px #fff1b0}
.map-mini-card.joker-silver{color:#e9f1f2;border-color:#afc1c6;background:linear-gradient(#718087,#39484e)}.map-mini-card.joker-gold{color:#fff0b3;border-color:#dcb85d;background:linear-gradient(#9f7928,#4e3913);box-shadow:0 0 7px #dcb85d55}
.version-badge{position:fixed;z-index:120;right:max(7px,env(safe-area-inset-right));bottom:max(5px,env(safe-area-inset-bottom));padding:2px 5px;border:1px solid #60747b40;background:#071015b8;color:#7f9298;font:600 8px/1.2 var(--font);letter-spacing:1px;pointer-events:none;user-select:none;opacity:.78}
.tactics-tools{display:flex;align-items:center;gap:8px}.strategy-shop-button{position:relative;width:29px;height:29px;display:grid;place-items:center;border:1px solid #4d6871;background:linear-gradient(145deg,#1a2b33,#0b151c);color:var(--gold);font-size:16px;line-height:1}.shop-coin{display:grid;place-items:center;width:17px;height:17px;border:1px solid #dfc17e;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff0bb,#c3923e 58%,#715226);color:#172127;font:700 12px/1 Georgia,serif;box-shadow:0 0 7px #d8bb8255}.strategy-shop-button:hover{border-color:var(--gold);background:#22363c;box-shadow:0 0 12px #d8bb8233}.strategy-shop-button i{position:absolute;right:-6px;top:-6px;min-width:14px;height:14px;padding:0 3px;border:1px solid #81969a;background:#0a141a;color:#cfe0dc;font:700 8px/13px var(--font);font-style:normal;border-radius:8px}.strategy-shop-button:focus-visible{outline-offset:2px}
.map-garrison{display:flex;margin:4px 0 2px;padding-left:3px;justify-content:center}.map-mini-card{width:17px;height:23px;margin-left:-3px;display:grid;place-items:center;border:1px solid #b9b9a9;border-radius:2px;background:#deddd0;color:#17242a;font:bold 7px Georgia,"Times New Roman",serif;box-shadow:1px 2px 3px #0008;transform:rotate(-2deg)}.map-mini-card:nth-child(even){transform:translateY(-1px) rotate(2deg)}.map-mini-card.red{color:#a33e34}.map-mini-card.concealed{background:linear-gradient(145deg,#647877,#29444a);border-color:#72aeb1;color:#e1eee8}.map-mini-card.back{color:transparent;border-color:#4d7784;background:repeating-linear-gradient(45deg,#17323d,#17323d 2px,#244754 2px,#244754 4px);box-shadow:inset 0 0 0 2px #18313b,1px 2px 3px #0008}.map-mini-card.back::after{content:'S';color:#7ca2ad;font:italic 9px Georgia}
#app:has(.game-layout){position:fixed;inset:0;height:auto;min-height:0;display:grid;grid-template-rows:64px 78px minmax(0,1fr);overflow:hidden}#app:has(.game-layout)>.topbar{height:auto;min-height:0}#app:has(.game-layout)>.armies{height:auto;min-height:0;margin:7px auto;width:100%}#app:has(.game-layout)>.game-layout{height:auto;min-height:0;width:100%;margin:0 auto;padding-bottom:max(8px,env(safe-area-inset-bottom))}.play-column,.war-map,.map-stage{min-height:0}.hand-tray{overflow:visible}.hand-scroll{min-height:0}
.event-cards{max-width:100%;overflow:hidden}.event-strategy-card{max-width:100%}.event-strategy-card>*{min-width:0}.event-strategy-card small{overflow-wrap:anywhere}
.hand-sort-toggle{display:inline-flex!important;gap:0!important;padding:2px;border:1px solid #344a54;background:#0b151c;border-radius:3px}.hand-sort-toggle button{min-width:43px;padding:3px 8px;background:transparent;color:#788f97;font-size:9px;border-radius:2px}.hand-sort-toggle button.active{background:#294047;color:#d9c58f;box-shadow:inset 0 0 0 1px #6c826c}.hand-sort-toggle button:hover{color:#e3d3aa}
@media(max-width:800px){#app:has(.game-layout){grid-template-rows:56px 74px minmax(0,1fr)}#app:has(.game-layout)>.armies{height:auto;margin:5px auto}#app:has(.game-layout)>.game-layout{height:auto}.action-point{padding:4px 6px;font-size:8px}.map-gesture-hint{display:none}.map-controls{right:9px;bottom:8px}.map-controls button{width:32px;height:32px}.strategy-tooltip{max-height:calc(100dvh - 95px);overflow:auto}}
@media(max-width:520px){.action-point{position:absolute;top:47px;left:50%;transform:translateX(-50%);z-index:4;background:#14242a}.round-info{position:relative}.map-controls button{width:30px;height:30px}.event-strategy-card{grid-template-columns:38px minmax(0,1fr)}.event-strategy-card strong{grid-column:2;white-space:normal}.hand-sort-toggle button{min-width:36px;padding:3px 5px;font-size:8px}}
@media(max-width:390px){body{min-width:320px}.command-menu{padding:20px 15px}.setup-panel h1{font-size:30px;letter-spacing:1px}.segmented{gap:6px}.segmented button{padding:11px 10px}.map-choice{padding:9px 10px;gap:9px}.map-choice .map-symbol{font-size:22px;width:25px}.advanced-grid{gap:8px}.game-layout{padding-left:5px;padding-right:5px}.armies{padding-left:5px;padding-right:5px}.army-panel{min-width:0}.army-panel>span{min-width:0}.army-stats{gap:8px}.target-actions .primary,.target-actions .secondary{padding:8px 9px;font-size:10px}.line-cards{gap:10px}.line-cards .playing-card,.card-slot{width:68px;height:98px;flex-basis:68px}.line-cards .card-suit{left:22px;top:28px;font-size:29px}.versus{margin:0 4%;gap:8px}.versus b{font-size:8px;letter-spacing:.6px;white-space:nowrap}.battle-actions{padding:12px 10px}.battle-actions button{padding:8px 10px}.modal-overlay{padding:9px}.modal{padding:18px}.result-screen{padding:38px 16px}.version-badge{right:max(4px,env(safe-area-inset-right));bottom:max(4px,env(safe-area-inset-bottom))}}

.versus b{text-align:center}.versus b strong{display:block;font:inherit}.versus b small{display:block;margin-top:4px;color:var(--muted);font-size:8px;letter-spacing:.4px;white-space:nowrap}
.reserve-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.reserve-heading h2{margin-bottom:5px}.reserve-heading p{color:var(--muted);font-size:12px}.reserve-heading .hand-sort-toggle{flex:0 0 auto;margin-top:10px}@media(max-width:520px){.reserve-heading{align-items:stretch;flex-direction:column;gap:5px}.reserve-heading .hand-sort-toggle{align-self:flex-start;margin-top:0}}
.rules-strategy-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.rules-strategy-grid article{display:flex;gap:11px;padding:11px;border:1px solid var(--line);background:#0b171d}.rules-strategy-grid article>span{color:var(--gold);font-size:24px;line-height:1}.rules-strategy-grid h4{color:var(--text);font-size:12px}.rules-strategy-grid h4 small{color:var(--gold);font-size:8px;font-weight:400}.rules-strategy-grid p{font-size:10px;line-height:1.55;margin:5px 0}.rules-strategy-grid em{display:block;color:#78909a;font-size:9px;font-style:normal;line-height:1.55}@media(max-width:600px){.rules-strategy-grid{grid-template-columns:1fr}}

.identity-chip{display:flex;align-items:center;gap:10px;max-width:180px;padding:5px 12px 5px 6px;border:1px solid #42565d;background:#101c23;color:#e5ebe8;text-align:left;border-radius:999px;box-shadow:0 4px 16px #0004}.identity-chip:hover,.identity-chip:focus-visible{border-color:var(--gold);background:#17262d;box-shadow:0 5px 20px #0006,0 0 13px #d8bb8215}.identity-emblem{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border:1px solid #9b875f;background:#d8bb8211;color:var(--gold);font-size:19px;line-height:1;border-radius:50%}.identity-chip>b{overflow:hidden;text-overflow:ellipsis;font-size:11px;font-weight:650;white-space:nowrap}.identity-editor{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:stretch;margin:10px 0}.identity-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:178px;border:1px solid #6f6448;background:radial-gradient(circle at 50% 38%,#d8bb8220,transparent 58%),#0c171d}.identity-preview>span{display:grid;place-items:center;width:92px;height:92px;border:1px solid var(--gold);color:var(--gold);font-size:55px;line-height:1;box-shadow:inset 0 0 28px #d8bb8215,0 0 20px #0008}.identity-preview small{margin-top:13px;color:#8da0a5;font-size:9px;letter-spacing:1.5px}.identity-controls{display:flex;flex-direction:column;justify-content:center}.identity-name{display:flex;flex-direction:column;gap:7px;color:#aab8bb;font-size:10px}.identity-name input{width:100%;padding:12px;border:1px solid #42545c;background:#0d171e;color:var(--text);font-size:14px}.identity-label{margin:18px 0 8px;color:#aab8bb;font-size:10px}.logo-picker{display:grid;grid-template-columns:repeat(4,42px);gap:8px}.logo-choice{position:relative;cursor:pointer}.logo-choice input{position:absolute;opacity:0;pointer-events:none}.logo-choice span{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);background:#142128;color:#9badb0;font-size:21px;transition:.15s}.logo-choice:hover span{border-color:#8c805f;color:#e3d1a2}.logo-choice input:checked+span{border-color:var(--gold);color:var(--gold);background:#d8bb8217;box-shadow:inset 0 0 12px #d8bb8215,0 0 12px #d8bb8228}.logo-choice input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:2px}.identity-modal-actions{justify-content:flex-end;margin-top:26px}@media(max-width:600px){.identity-chip{max-width:120px;padding:4px 9px 4px 4px;gap:7px}.identity-emblem{flex-basis:28px;width:28px;height:28px;font-size:16px}.identity-chip>b{font-size:10px}.identity-editor{grid-template-columns:1fr;gap:14px}.identity-preview{min-height:110px}.identity-preview>span{width:66px;height:66px;font-size:39px}.logo-picker{grid-template-columns:repeat(4,1fr)}.logo-choice span{width:100%}}@media(max-width:390px){.identity-chip{width:36px;padding:3px}.identity-emblem{flex-basis:28px;width:28px;height:28px}.identity-chip>b{display:none}}

/* Stable iOS/iPadOS battlefield: content changes may only resize the map. */
@media(max-width:1200px),(hover:none) and (pointer:coarse){
 html:has(.game-layout),body:has(.game-layout){height:100svh;min-height:0;overflow:hidden}
 #app:has(.game-layout){inset:0 auto auto 0;width:100%;height:100svh;grid-template-rows:56px 74px minmax(0,1fr)}
 #app:has(.game-layout)>.game-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 64px;gap:6px;height:100%;min-height:0;padding:0 8px max(6px,env(safe-area-inset-bottom));overflow:hidden}
 #app:has(.game-layout) .play-column{display:grid;grid-template-rows:minmax(0,1fr) 122px;gap:6px;height:100%;min-height:0;overflow:hidden}
 #app:has(.game-layout) .war-map{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100%;min-height:0;overflow:hidden}
 #app:has(.game-layout) .map-stage{height:auto;min-height:0}
 #app:has(.game-layout) .target-bar{min-height:96px;height:auto;padding:8px 11px;overflow:hidden}
 #app:has(.game-layout) .target-bar>div:first-child{min-width:0;max-height:78px;overflow:hidden}
 #app:has(.game-layout) .target-bar p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #app:has(.game-layout) .target-actions{max-height:none;overflow:visible;align-content:center}
 #app:has(.game-layout) .hand-tray{grid-row:2;height:122px;min-height:122px;margin:0;padding:7px 9px;overflow:hidden}
 #app:has(.game-layout) .hand-scroll{height:91px;min-height:91px;padding:4px 26px 0;overflow:hidden}
 #app:has(.game-layout) .hand-card-shell{height:84px;transform:none}
 #app:has(.game-layout) .hand-card-shell>.playing-card{height:80px}
 #app:has(.game-layout) .hand-card-shell:has(.playing-card.selected){z-index:70;transform:translateY(-3px)}
 #app:has(.game-layout) .hand-card-shell>.playing-card.selected{transform:none}
 #app:has(.game-layout) .intel-panel{display:flex;align-items:center;gap:10px;width:100%;height:64px;min-height:64px;max-height:64px;padding:7px 10px;overflow:hidden}
 #app:has(.game-layout) .supply-box{width:78px;flex:0 0 78px}
 #app:has(.game-layout) .supply-box>b{font-size:21px;margin:0}
 #app:has(.game-layout) .supply-box p,#app:has(.game-layout) .supply-meter,#app:has(.game-layout) .log-heading,#app:has(.game-layout) .battle-log{display:none}
 #app:has(.game-layout) .tactics-heading{border:0;margin:0;padding:0;display:block}
 #app:has(.game-layout) .tactics-heading h3{font-size:9px}
 #app:has(.game-layout) .tactic-dock{flex:1;justify-content:space-evenly;flex-wrap:nowrap;min-width:0;overflow:hidden}
 #app:has(.game-layout) .strategy-token{width:48px;height:48px;flex:0 0 48px}
}
@media(max-width:520px){
 #app:has(.game-layout){grid-template-rows:48px 58px minmax(0,1fr)}
 #app:has(.game-layout)>.topbar{height:48px;padding:0 8px;gap:6px}
 #app:has(.game-layout) .brand{gap:6px;min-width:0}
 #app:has(.game-layout) .brand-mark{width:25px;height:25px}
 #app:has(.game-layout) .brand>span:last-child{font-size:14px;letter-spacing:1.5px;white-space:nowrap}
 #app:has(.game-layout) .brand small{display:none}
 #app:has(.game-layout) .round-info{gap:4px;min-width:0}
 #app:has(.game-layout) .round-info>span:not(.action-point):not(.clock){display:none}
 #app:has(.game-layout) .round-info b{font-size:18px}
 #app:has(.game-layout) .clock{min-width:0;padding-left:5px;font-size:8px}
 #app:has(.game-layout) .action-point{position:static;transform:none;gap:4px;padding:3px 5px;font-size:8px}
 #app:has(.game-layout) .action-point .action-label{display:none}
 #app:has(.game-layout) .action-point strong{font-size:8px;font-weight:600}
 #app:has(.game-layout) .top-actions{gap:2px}
 #app:has(.game-layout) .top-actions .text-button{padding:5px 3px;font-size:9px}
 #app:has(.game-layout) .icon-button{padding:5px 7px;font-size:9px}
 #app:has(.game-layout)>.armies{height:58px;margin:0;padding:3px 5px;gap:4px}
 #app:has(.game-layout) .army-panel{display:grid;grid-template-columns:minmax(54px,1fr) auto;align-items:center;height:52px;padding:5px 7px;gap:4px;overflow:hidden}
 #app:has(.game-layout) .army-panel>span:nth-child(2){min-width:0;overflow:hidden}
 #app:has(.game-layout) .army-panel>span:nth-child(2)>b,#app:has(.game-layout) .army-panel>span:nth-child(2)>small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #app:has(.game-layout) .army-panel>span:nth-child(2)>b{font-size:10px}
 #app:has(.game-layout) .army-panel>span:nth-child(2)>small{font-size:7px}
 #app:has(.game-layout) .army-stats{margin-left:0;gap:6px}
 #app:has(.game-layout) .army-stats b{font-size:13px}
 #app:has(.game-layout) .army-stats span{font-size:7px}
 #app:has(.game-layout)>.game-layout{grid-template-rows:minmax(0,1fr) 56px;padding-left:5px;padding-right:5px}
 #app:has(.game-layout) .play-column{grid-template-rows:minmax(0,1fr) 104px}
 #app:has(.game-layout) .war-map{grid-template-rows:minmax(0,1fr) auto}
 #app:has(.game-layout) .target-bar{flex-direction:row;align-items:center;justify-content:space-between;min-height:76px;height:auto;overflow:visible;gap:6px}
 #app:has(.game-layout) .target-bar>div:first-child{max-height:60px}
 #app:has(.game-layout) .target-bar p{display:none}
 #app:has(.game-layout) .target-actions{align-content:center;align-self:center;width:190px;min-height:58px;max-height:none;overflow:visible;gap:3px}
 #app:has(.game-layout) .target-actions .primary,#app:has(.game-layout) .target-actions .secondary{padding:6px 7px;font-size:8px}
 #app:has(.game-layout) .target-actions .text-button{padding:3px 7px;font-size:8px}
 #app:has(.game-layout) .hand-tray{height:104px;min-height:104px;padding:5px 7px}
 #app:has(.game-layout) .hand-top{height:22px;margin:0}
 #app:has(.game-layout) .hand-top .eyebrow{max-width:142px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #app:has(.game-layout) .hand-scroll{justify-content:center;height:75px;min-height:75px;padding:3px 5px 0;overflow:hidden}
 #app:has(.game-layout) .hand-card-shell{flex:1 1 0;min-width:0;max-width:36px;height:72px;transform:none}
 #app:has(.game-layout) .hand-card-shell:last-child{margin-right:52px}
 #app:has(.game-layout) .hand-card-shell>.playing-card{width:52px;height:72px;flex-basis:52px;padding:5px}
 #app:has(.game-layout) .hand-card-shell .card-corner{font-size:14px}
 #app:has(.game-layout) .hand-card-shell .card-corner i{font-size:10px}
 #app:has(.game-layout) .hand-card-shell .card-suit{left:18px;top:22px;font-size:23px}
 #app:has(.game-layout) .hand-card-shell .card-bottom{right:5px;font-size:12px}
 #app:has(.game-layout) .hand-card-shell:has(.playing-card.selected){z-index:70;transform:translateY(-4px)}
 #app:has(.game-layout) .hand-card-shell>.playing-card.selected{transform:none;outline-width:1px;outline-offset:1px}
 #app:has(.game-layout) .intel-panel{height:56px;min-height:56px;max-height:56px;padding:5px 7px;gap:6px}
 #app:has(.game-layout) .supply-box{width:66px;flex-basis:66px}
 #app:has(.game-layout) .supply-box .eyebrow{font-size:8px;letter-spacing:.8px}
 #app:has(.game-layout) .supply-box>b{font-size:18px}
 #app:has(.game-layout) .tactics-heading{display:flex;flex:0 0 70px;flex-direction:column;align-items:center;justify-content:center;gap:2px}
 #app:has(.game-layout) .tactics-heading h3{font-size:8px}
 #app:has(.game-layout) .tactics-tools{gap:4px}
 #app:has(.game-layout) .strategy-shop-button{width:25px;height:25px}
 #app:has(.game-layout) .tactic-dock{flex:1;justify-content:space-evenly;gap:4px}
 #app:has(.game-layout) .strategy-token{width:44px;height:44px;flex-basis:44px}
 #app:has(.game-layout) .strategy-token>span:first-child{font-size:18px}
 #app:has(.game-layout) .strategy-token>small{font-size:7px}
}
@media(max-width:520px) and (max-height:620px){
 #app:has(.game-layout){grid-template-rows:44px 54px minmax(0,1fr)}
 #app:has(.game-layout)>.topbar{height:44px}
 #app:has(.game-layout)>.armies{height:54px}
 #app:has(.game-layout) .army-panel{height:48px}
 #app:has(.game-layout) .map-title{top:7px;left:10px}
 #app:has(.game-layout) .map-title .eyebrow{display:none}
 #app:has(.game-layout) .map-title h2{font-size:12px;margin:0}
 #app:has(.game-layout) .dense-map .map-node{min-width:48px;padding:2px 4px}
 #app:has(.game-layout) .dense-map .map-node b{font-size:7px;margin-top:1px}
 #app:has(.game-layout) .dense-map .map-node small{display:none}
 #app:has(.game-layout) .dense-map .node-icon{font-size:10px}
 #app:has(.game-layout) .dense-map .map-garrison{margin:1px 0 0}
 #app:has(.game-layout) .dense-map .map-mini-card{width:12px;height:16px;font-size:5px}
 #app:has(.game-layout) .map-controls button{width:26px;height:26px;font-size:14px}
}

/* Geographic context and per-turn logistics. */
.geo-backdrop{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.72;overflow:hidden}.geo-backdrop .land{fill:#28403d52;stroke:#83958a66;stroke-width:.28;vector-effect:non-scaling-stroke}.geo-backdrop .lake{fill:#07131cbb;stroke:#52798670;stroke-width:.22;vector-effect:non-scaling-stroke}.geo-backdrop .river{fill:none;stroke:#54849480;stroke-width:.28;vector-effect:non-scaling-stroke}.geo-backdrop .geo-source{fill:#80909670;font-size:1.25px;letter-spacing:.18px;text-anchor:end;font-family:var(--font)}.menu-visual>.geo-backdrop{inset:60px -25px 60px -30px;width:auto;height:auto;opacity:.38;z-index:0}.topology-lines{z-index:2}.topology-lines line{stroke:#7b9ba3;opacity:.22;stroke-width:.18}.node-layer,.dense-map .node-layer{z-index:4}.map-title{z-index:6}.scene-mount{z-index:0}.supply-stat{position:relative;cursor:pointer;border-radius:2px}.supply-stat i{display:inline;margin-left:2px;color:#7ca0a7;font-size:7px;font-style:normal}.supply-stat:hover{color:var(--gold)}.supply-stat:hover::after{content:attr(title);position:absolute;z-index:40;left:50%;bottom:calc(100% + 10px);width:260px;max-width:45vw;padding:10px 12px;transform:translateX(-50%);border:1px solid #60767e;background:#101d25f5;color:#c7d3d1;font-size:9px;line-height:1.6;text-align:left;white-space:normal;box-shadow:0 12px 30px #000a;pointer-events:none}.supply-ledger{margin:18px 0 24px;border:1px solid var(--line);background:#0c171d}.supply-ledger>div{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 13px;border-bottom:1px solid #30434a66;color:#aebdbd;font-size:11px}.supply-ledger>div:last-child{border-bottom:0}.supply-ledger b{font-size:13px}.supply-ledger .positive{color:var(--cyan)}.supply-ledger .negative{color:var(--orange)}.supply-ledger .ledger-total{background:#17242b;color:#e6e9e4;font-weight:650}.ledger-warning{margin:-10px 0 20px!important;padding:10px 12px;border-left:2px solid var(--orange);background:#e9795f12;color:#df9a83!important}

/* Persistent routes and selected-location reachability pulse. */
.topology-lines .route-base{stroke:#77a0aa;stroke-width:.34;opacity:.52;vector-effect:non-scaling-stroke;transition:opacity .2s,stroke .2s}.topology-lines.has-focus .map-route:not(.active) .route-base{opacity:.13}.topology-lines .map-route.active .route-base{stroke:#d8bb82;stroke-width:.68;opacity:.9;filter:drop-shadow(0 0 2px #d8bb8288)}.topology-lines .route-pulse{stroke:#8ce6ea;stroke-width:.88;stroke-dasharray:1.1 2.4;stroke-linecap:round;opacity:1;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px #72cdd4);animation:route-flow 1.05s linear infinite}.topology-lines .route-pulse.reverse{animation-direction:reverse}.topology-lines .sea-base{fill:none;stroke:#6fa9bd;stroke-width:.4;stroke-dasharray:1.6 1.4;opacity:.62;vector-effect:non-scaling-stroke}
.topology-lines .map-route.active .sea-base{stroke:#d8bb82;stroke-width:.6;opacity:.95;filter:drop-shadow(0 0 2px #d8bb8288)}
.topology-lines .sea-pulse{fill:none;stroke:#8ce6ea;stroke-width:.8;stroke-dasharray:1.1 2.4;stroke-linecap:round;opacity:.9;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px #72cdd4);animation:route-flow 1.05s linear infinite}
.topology-lines .sea-pulse.reverse{animation-direction:reverse}
.topology-lines .sea-marker,.map-node .sea-marker{position:absolute;top:-9px;right:-7px;width:22px;height:22px;padding:2px;background:#0d1b24ee;border:1px solid #6cbcc2;border-radius:50%;pointer-events:none;box-shadow:0 0 8px #6cbcc288}.map-node .sea-marker svg{width:100%;height:100%;display:block}.map-node.route-neighbor::before{content:'';position:absolute;inset:-5px;border:1px solid #83dce1;border-radius:6px;pointer-events:none;animation:route-node-pulse 1.05s ease-out infinite}.map-node.route-neighbor{border-color:#6cbcc2aa}.map-node.focused{box-shadow:0 0 0 2px #d8bb8244,0 0 24px #d8bb8266}
@keyframes route-flow{to{stroke-dashoffset:-7}}@keyframes route-node-pulse{0%{opacity:.95;transform:scale(.96)}75%,100%{opacity:0;transform:scale(1.14)}}
@media(prefers-reduced-motion:reduce){.topology-lines .route-pulse,.topology-lines .sea-pulse,.map-node.route-neighbor::before{animation:none}.topology-lines .route-pulse{stroke-dasharray:none;opacity:.85}.map-node.route-neighbor::before{opacity:.7}}

/* Main-menu illustrated tutorial. */
.modal:has(.tutorial-head){max-width:920px;padding:26px 28px}.tutorial-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.tutorial-head h2{margin:7px 0 0}.tutorial-head>span{color:var(--gold);font-size:12px;letter-spacing:2px}.tutorial-progress{display:grid;grid-template-columns:repeat(var(--tutorial-steps),1fr);gap:5px;margin:16px 0}.tutorial-progress i{height:3px;background:#293b43}.tutorial-progress i.done{background:#6b878b}.tutorial-progress i.active{background:var(--gold);box-shadow:0 0 9px #d8bb8277}.tutorial-shot{position:relative;margin:0;border:1px solid #40565e;background:#071016;aspect-ratio:16/7;overflow:hidden}.tutorial-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.tutorial-shot::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 45px #02070b88;pointer-events:none}.tutorial-shot figcaption{position:absolute;left:12px;bottom:10px;z-index:1;padding:5px 9px;background:#091319e8;border-left:2px solid var(--gold);color:#dbc48f;font-size:9px;letter-spacing:1.5px}.tutorial-text{margin:17px 0 9px!important;color:#c5d0ce!important;font-size:13px!important;line-height:1.8}.tutorial-tip{margin:0!important;padding:10px 12px;border-left:2px solid var(--cyan);background:#72cdd40b;color:#82999f!important;font-size:11px!important}.tutorial-tip b{color:var(--cyan);margin-right:10px}.tutorial-actions{display:flex;align-items:center;justify-content:space-between;margin-top:18px}.tutorial-actions>span{display:flex;gap:8px}.tutorial-actions button{min-width:102px}
@media(max-width:600px){.modal:has(.tutorial-head){padding:18px;max-height:94dvh}.tutorial-head{align-items:flex-start}.tutorial-head h2{font-size:19px}.tutorial-shot{aspect-ratio:4/3}.tutorial-shot img{object-fit:cover}.tutorial-text{font-size:12px!important}.tutorial-actions{margin-top:13px}.tutorial-actions button{min-width:0;padding:9px 11px;font-size:10px}.tutorial-actions>.text-button{padding-left:0}.tutorial-tip{font-size:10px!important}}

@media(max-width:520px){
 .supply-stat:hover::after{display:none}
 #app:has(.game-layout) .army-stats>span:nth-child(2),#app:has(.game-layout) .army-stats>span:nth-child(4){display:none}#app:has(.game-layout) .army-stats>span:nth-child(3){display:block}#app:has(.game-layout) .army-stats{gap:5px}#app:has(.game-layout) .army-stats span{min-width:24px}
 #app:has(.game-layout) .battle-area{display:grid;grid-template-rows:auto minmax(0,1fr) 14px minmax(0,1fr) auto;padding:8px 8px 0;overflow:hidden}
 #app:has(.game-layout) .battle-heading{min-height:35px}.battle-heading h2{font-size:14px;margin-top:1px}.battle-heading .eyebrow{font-size:7px}.battle-badge{max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #app:has(.game-layout) .battle-line{display:grid;grid-template-rows:22px minmax(0,1fr);align-items:center;gap:1px;min-height:0;padding:2px 0;overflow:hidden}
 #app:has(.game-layout) .line-label{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%;height:22px;min-height:22px;gap:6px;align-items:center;overflow:hidden}
 #app:has(.game-layout) .line-label b{order:0;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.line-label span{display:none}.line-label small{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px}
 #app:has(.game-layout) .line-cards{align-items:center;justify-content:center;min-width:0;height:100%;gap:clamp(3px,1.2vw,6px);overflow:hidden}
 #app:has(.game-layout) .line-cards .playing-card,#app:has(.game-layout) .card-slot{width:clamp(48px,14.5vw,60px);height:min(78px,100%);min-height:58px;flex:0 1 60px}
 #app:has(.game-layout) .line-cards .playing-card{padding:5px}.line-cards .card-corner{font-size:14px}.line-cards .card-corner i{font-size:9px}.line-cards .card-suit{left:17px;top:21px;font-size:22px}.line-cards .card-bottom{font-size:12px}
 #app:has(.game-layout) .versus{height:14px;min-height:14px;margin:0 5%;gap:7px}.versus b{font-size:7px}
 #app:has(.game-layout) .battle-actions{min-height:68px;margin:0 -8px;padding:7px 8px;gap:5px}.battle-actions b{font-size:9px;line-height:1.35}.battle-actions small{display:none}.battle-actions>div:first-child{min-width:0}.battle-actions>div:last-child{width:auto;min-width:142px;gap:4px}.battle-actions button{padding:7px 8px;font-size:9px}
}
@media(max-width:520px) and (max-height:620px){
 #app:has(.game-layout) .battle-area{grid-template-rows:auto minmax(0,1fr) 10px minmax(0,1fr) auto;padding-top:5px}
 #app:has(.game-layout) .battle-heading{min-height:27px}.battle-heading h2{font-size:11px}.battle-heading .eyebrow{display:none}
 #app:has(.game-layout) .battle-line{grid-template-rows:17px minmax(0,1fr)}#app:has(.game-layout) .line-label{height:17px;min-height:17px}
 #app:has(.game-layout) .line-cards .playing-card,#app:has(.game-layout) .card-slot{height:min(62px,100%);min-height:46px}
 #app:has(.game-layout) .battle-actions{min-height:54px;padding-top:4px;padding-bottom:4px}.battle-actions b{font-size:8px}.battle-actions button{padding:5px 6px;font-size:8px}
}
.pass-action{border-color:#d8bb8299;color:var(--gold);background:#d8bb8212;font-weight:650;letter-spacing:.8px}
.pass-action:hover:not(:disabled){border-color:var(--gold);color:#ead1a2;background:#d8bb8226;box-shadow:0 0 16px #d8bb8233}
.compact-log-button{display:none;border:1px solid #4d6871;background:#17252d;color:#b9c9c9;padding:5px 8px;font-size:9px;letter-spacing:.5px;border-radius:2px}.log-modal-list{margin:16px 0 22px;padding:0 12px;border:1px solid var(--line);background:#0c171d}.log-modal-list .battle-log{display:block!important;max-height:min(55vh,480px)!important;overflow:auto!important}.log-modal-list .battle-log li{padding:11px 4px}.log-modal-list .battle-log p{font-size:11px;color:#c3d0ce}
@media(max-width:800px){#app:has(.game-layout) .compact-log-button{display:inline-block}}