/* Visual refinement; faction identity and game rules remain in their own modules. */
:root{font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;background:#101821;color:#e7edf2;font-synthesis:none;-webkit-font-smoothing:antialiased}
body{background:radial-gradient(ellipse at 50% 0,#1a2936 0,transparent 60%);min-height:100vh}
header{padding:20px 32px;background:#111b26e8;border-bottom:1px solid #ffffff0d;gap:24px}
h1{font-size:21px;letter-spacing:2px;font-weight:700;line-height:1.45}
h1 small{font-size:9px;letter-spacing:2px;margin-top:4px;color:#8196a7;max-width:390px}
.mark{font-size:30px;color:#ccb17b}
.logo{gap:12px;min-width:0}
nav{gap:8px}nav a{font-size:12px;padding:8px 4px;color:#9bafbe}nav a:hover{color:#f1dfb7}
button{border-color:#ffffff16;background:#20303f;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500;transition:background .15s,border-color .15s,box-shadow .15s}
button:hover:not(:disabled){background:#2a3d4e;border-color:#ffffff30}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #d5b67d;outline-offset:3px}
button:disabled{opacity:.42}.primary{background:#d7b77d;border-color:#d7b77d;color:#172330;box-shadow:0 3px 12px #0002}
.primary:hover:not(:disabled){background:#e4c995;border-color:#e4c995}.danger{background:#693e39;border-color:#b77a654d}.danger:hover:not(:disabled){background:#825045}
input,select{border-color:#ffffff1a;background:#111f2b;border-radius:7px;min-height:41px;color:#dbe6ed}
label{color:#a8bac7;font-size:12px}.eyebrow{font-size:9px;letter-spacing:1.8px;color:#839baa;font-weight:600}
.intro{max-width:1700px;margin:auto;padding:25px 32px 22px}.intro h2{font-size:23px;font-weight:600;line-height:1.5}.intro h2>span:last-child{font-size:.75em}
.badge{font-size:11px;letter-spacing:.5px;padding:8px 13px;border-color:#c5ad7933;background:#c5ad7906;color:#cdb98e;white-space:nowrap}
.layout{padding:0 32px 28px;gap:18px;align-items:start}.panel{border-color:#ffffff10;border-radius:12px;background:#17232f;box-shadow:0 6px 24px #00000015}
.section{padding:20px;border-color:#ffffff0b}h3{font-size:13px;letter-spacing:.3px;font-weight:600}p{color:#a5b7c4;line-height:1.85}
.player{padding:17px 16px;border-bottom-color:#ffffff09;border-left-width:3px}.player.active{background:linear-gradient(90deg,#ffffff0b,transparent)}
.player strong{font-size:13px;font-weight:600;gap:8px}.player strong>span:last-child{font-variant-numeric:tabular-nums;font-size:19px;color:#e7edf2;font-weight:500}
.player small{font-size:11px;color:#8fa7b7;margin-top:10px;line-height:1.7}.faction-emblem{width:26px;height:26px;margin-right:6px}.faction-name{gap:2px}
.region{padding:12px 0;border-color:#ffffff09;line-height:1.7}.region span{font-size:11px;color:#8fa5b4}.region b{font-weight:500;font-variant-numeric:tabular-nums;color:#d6bd91}
.board{background:radial-gradient(ellipse at 55% 45%,#243b4a,#152531 78%);overflow:hidden}.board-top{top:21px;left:22px;right:22px}
.territory{stroke-width:1.25;fill-opacity:.72}.territory:hover,.territory:focus{stroke:#f4e5c6;stroke-width:2.4}.territory.selected{stroke:#fff1d7;stroke-width:2.6;filter:drop-shadow(0 0 3px #fff2)}
.counter circle{stroke:#eef4f2;stroke-opacity:.8;stroke-width:1.1;filter:drop-shadow(0 2px 2px #0006)}
.counter text{font-size:11px;font-weight:700;paint-order:stroke;stroke:#10202a;stroke-width:1.6px}
.counter .map-label{font-size:10px;font-weight:500;fill:#e0e9ee;stroke:#142431;stroke-width:3px;letter-spacing:.2px}
.sea{stroke:#9eb4c0;opacity:.48;stroke-width:1;stroke-dasharray:4 6}.ocean{fill:#6c8797;opacity:.7;font-size:10px;letter-spacing:6px}.inset{fill:#132531;stroke:#ffffff26;stroke-dasharray:3 5}
.legend{line-height:1.8;font-size:9px;color:#8aa0ad;max-width:87%}.phasebar{background:#142330;border-color:#ffffff10}.phasebar span{font-size:11px;letter-spacing:.8px;padding:16px 6px;color:#7c95a6;border-top:2px solid transparent}.phasebar .on{background:#d1b1760b;border-top-color:#d1b176;color:#e1c795}
.number{font-size:42px;font-variant-numeric:tabular-nums;letter-spacing:-1.5px;font-weight:500;margin:13px 0 7px;color:#e1c795}.number small{letter-spacing:0;color:#8da6b7;margin-left:6px}
.tip{font-size:11px;color:#8da5b5}.die{border:1px solid #ffffff29;box-shadow:0 2px 4px #0002;background:#cfb384;font-variant-numeric:tabular-nums}.die.def{background:#9aafbf}
.log{font-variant-numeric:tabular-nums;scrollbar-width:thin;scrollbar-color:#4a6071 transparent}.log div{border-color:#ffffff09;padding:9px 0}.log{color:#8fa8b8}
dialog{background:#182633;border:1px solid #ffffff24;border-radius:15px;padding:30px;box-shadow:0 22px 100px #0008;scrollbar-width:thin;scrollbar-color:#4a6071 transparent}dialog::backdrop{background:#06101bd6;backdrop-filter:blur(5px)}dialog h2{font-size:25px;letter-spacing:.2px;font-weight:600}.player-row{border-color:#ffffff10;padding:12px 0;gap:12px}.actions{gap:10px;margin-top:24px}
.empty{padding:66px 28px 48px}.hero{font-size:clamp(30px,3.4vw,46px);letter-spacing:2px;font-weight:600;color:#e4c895;line-height:1.5;margin:18px auto}.empty>p{font-size:14px;line-height:1.95;max-width:560px;margin:17px auto 25px}.empty>button{min-height:44px;padding:12px 23px}.empty>.tip{font-size:11px;margin-top:22px;color:#7f98a9}
.play-brief{margin-top:45px;padding:30px 32px;background:linear-gradient(145deg,#192936,#14232f);border-color:#ffffff10;box-shadow:0 8px 28px #0001}.play-brief h2{font-size:21px;font-weight:600;letter-spacing:.5px}.play-brief h3{font-size:12px;font-weight:600;letter-spacing:.3px;color:#d7bd91}.play-brief p{font-size:13px;line-height:1.95}.play-brief>p:first-of-type{color:#d5e0e8}.brief-grid{gap:27px;border-top:1px solid #ffffff0c;border-bottom:1px solid #ffffff0c;margin:23px 0;padding:0 0 12px}.brief-bonuses{gap:8px;margin:17px 0}.brief-bonuses span{font-size:12px;border:1px solid #ffffff0d;background:#ffffff04;border-radius:6px;padding:8px 12px}.brief-bonuses b{font-weight:500;color:#ddc496}.play-brief summary{font-size:12px;color:#a5bdca}.play-brief details[open]{padding-bottom:6px}.play-brief details p{font-size:12px}.play-brief .tip{font-size:11px}dialog .brief-grid{border:0;margin:0;padding:0}
footer{max-width:1700px;margin:auto;padding:0 32px 24px;font-size:10px;color:#6f8a9b;line-height:1.8}#toast{font-size:13px;box-shadow:0 7px 35px #0004;background:#ddc28f;color:#152431}
@media(max-width:1100px){header,.intro{padding:20px}.layout{padding:0 20px 24px}.right .section{border-right-color:#ffffff0b}}
@media(max-width:650px){header{padding:17px 18px}h1{font-size:19px;letter-spacing:1.5px}h1 small{font-size:8px;letter-spacing:1.3px}.mark{font-size:26px}nav{gap:6px;margin-top:15px}nav a{padding:6px 3px}nav button{font-size:12px;padding:8px 11px;min-height:36px}.intro{padding:21px 18px 18px}.intro h2{font-size:20px}.badge{font-size:10px;margin-top:8px}.layout{padding:0 12px 22px;gap:13px}.section{padding:18px}.player{padding:14px 12px}.player strong{font-size:12px}.player strong>span:last-child{font-size:17px}.player .faction-emblem{width:22px;height:22px}.empty{padding:44px 16px 30px}.hero{font-size:29px;letter-spacing:1px}.empty>p{font-size:13px}.empty>button{padding:11px 18px}.play-brief{padding:22px 20px;margin-top:32px}.play-brief h2{font-size:20px}.brief-grid{gap:0;margin:18px 0}.brief-bonuses span{font-size:11px}.play-brief p{font-size:12px}.legend{left:18px;max-width:88%}dialog{padding:23px 20px;max-height:91dvh}dialog h2{font-size:22px}.player-row{gap:6px 12px}.actions{flex-wrap:wrap}.actions button{flex:1}footer{padding:0 18px 20px}}
@media(max-width:650px){header nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}header nav a{grid-column:span 2;padding:4px 2px}header nav button{padding:9px 5px}.board{min-height:0}.map{height:auto;aspect-ratio:620/610;margin-top:34px;margin-bottom:45px}}
.empty>p{text-wrap:balance}.hero{text-wrap:balance}

/* Original SVG board illustration and consistent turn iconography. */
.welcome-grid{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:56px;text-align:left}
.welcome-copy .hero{font-size:clamp(30px,3.1vw,43px);letter-spacing:1.5px;margin:20px 0;line-height:1.55;text-wrap:balance}
.welcome-copy>p{font-size:14px;line-height:1.95;color:#a7bbc8;max-width:460px;margin:20px 0 28px;text-wrap:pretty}
.welcome-copy>button{padding:13px 21px;min-height:46px;margin:0 5px 0 0}
.welcome-copy>.tip{font-size:11px;color:#7e99aa;margin-top:23px}
.welcome-art{margin:0;position:relative;max-width:510px;justify-self:end;width:100%}
.welcome-art img{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 28px #0004)}
.welcome-art figcaption{text-align:center;color:#7895a7;font-size:9px;letter-spacing:1.4px;margin-top:17px;line-height:1.8}
.tactical-icon{width:22px;height:22px;display:inline-block;vertical-align:middle;flex-shrink:0}
.phasebar .tactical-icon{width:16px;height:16px;margin-right:5px;vertical-align:-4px}
.play-brief h3 .tactical-icon{width:23px;height:23px;margin-right:7px;color:#d8bc87}
.die{width:34px;height:34px;border-radius:7px;color:#18303d;box-shadow:inset 0 1px 0 #fff5,0 3px 7px #0003}
.die svg{width:26px;height:26px;display:block}
.empty .play-brief{margin-top:48px}
@media(max-width:900px){.welcome-grid{gap:25px}.welcome-copy .hero{font-size:30px}.welcome-copy>p{font-size:13px}.welcome-copy>button{padding:11px 15px}.welcome-art figcaption{font-size:8px;letter-spacing:.7px}}
@media(max-width:650px){.welcome-grid{grid-template-columns:1fr;gap:26px;text-align:center}.welcome-copy>p{margin:17px auto 23px}.welcome-copy .hero{font-size:30px;margin:15px 0}.welcome-art{max-width:380px;justify-self:center}.welcome-art figcaption{margin-top:12px}.empty .play-brief{margin-top:32px}.phasebar .tactical-icon{width:14px;height:14px;margin-right:2px}.phasebar span{letter-spacing:.3px}.welcome-copy>.tip{margin-bottom:0}}
.region{gap:10px;align-items:flex-start}.region>div{min-width:0}.region>b{flex-shrink:0}.region .region-counties{margin:7px 0 0;font-size:11px;line-height:1.85;color:#9aafbf;overflow-wrap:anywhere}