.as-app-shell {
  --as-paper:#f6f4ef; --as-surface:#fff; --as-ink:#18212b; --as-muted:#66717d;
  --as-line:#5f6b76; --as-silver:#77838d; --as-gold:#a77a24; --as-fortress:#dce8e3;
  --as-accent:#176b57; --as-accent-soft:#9ed4c6; --as-soldier:#20272f;
  width:min(1120px,100%); margin:0 auto; padding:28px; background:var(--as-paper);
  color:var(--as-ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.as-app-shell * { box-sizing:border-box; }
.as-app-shell button,.as-app-shell select,.as-app-shell input { font:inherit; }
.as-app-header { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.as-eyebrow { margin:0 0 4px; color:var(--as-accent); font-size:.8rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.as-app-header h2 { margin:0; color:var(--as-ink); font-size:clamp(2rem,5vw,3.4rem); font-weight:650; letter-spacing:-.04em; }
.as-game-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start; }
.as-board-card,.as-settings-card,.as-status-card,.as-score-card,.as-rules-card { background:var(--as-surface); border:1px solid #dfe3e2; box-shadow:0 12px 35px rgb(31 42 52 / 10%); }
.as-board-card { padding:clamp(12px,2.5vw,26px); aspect-ratio:1; }
.as-board { display:block; width:100%; height:100%; touch-action:manipulation; user-select:none; }
.as-side-panel { display:grid; gap:16px; }
.as-settings-card,.as-status-card,.as-score-card,.as-rules-card { padding:20px; }
.as-settings-card { display:grid; gap:13px; }
.as-settings-card label { display:grid; gap:6px; color:var(--as-muted); font-size:.9rem; }
.as-settings-card select,.as-settings-card input { width:100%; border:1px solid #bac2c3; border-radius:5px; padding:9px 10px; background:var(--as-surface); color:var(--as-ink); }
.as-settings-card select:focus-visible,.as-settings-card input:focus-visible { outline:3px solid var(--as-accent-soft); outline-offset:2px; }
.as-label { margin:0 0 7px; color:var(--as-muted); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.as-settings-help { margin:0; color:var(--as-muted); font-size:.8rem; line-height:1.4; }
.as-online-panel { padding-top:4px; border-top:1px solid #e3e6e5; }
.as-online-panel p { color:var(--as-muted); line-height:1.4; }
.as-join-row { display:grid; grid-template-columns:1fr auto; gap:7px; margin-top:10px; }
.as-online-summary { margin:0 0 10px; font-size:.9rem; }
.as-turn-indicator { font-size:1.3rem; font-weight:700; }
.as-turn-indicator::before { content:""; display:inline-block; width:16px; height:16px; margin-right:9px; border:2px solid var(--as-ink); border-radius:50%; vertical-align:-1px; background:#fffdf7; }
.as-turn-indicator.soldiers::before { background:var(--as-soldier); }
.as-status-text { min-height:3.2em; margin:12px 0 0; color:var(--as-muted); line-height:1.45; }
.as-score-card { display:grid; gap:13px; }
.as-score-card div { display:flex; justify-content:space-between; gap:16px; }
.as-score-card span { color:var(--as-muted); }
.as-score-card strong { font-variant-numeric:tabular-nums; }
.as-rules-card summary { cursor:pointer; font-weight:700; }
.as-rules-card p,.as-rules-card li { color:var(--as-muted); line-height:1.5; }
.as-rules-card ul { padding-left:20px; }
.as-primary-button,.as-secondary-button { border:0; border-radius:5px; padding:10px 15px; cursor:pointer; font-weight:700; }
.as-primary-button { margin-top:10px; background:var(--as-accent); color:#fff; }
.as-secondary-button { border:1px solid #bac2c3; background:transparent; color:var(--as-ink); }
.as-text-button { margin-top:10px; padding:4px 0; border:0; background:transparent; color:var(--as-muted); text-decoration:underline; cursor:pointer; }
.as-primary-button:hover,.as-secondary-button:hover { filter:brightness(.95); }
.as-primary-button:focus-visible,.as-secondary-button:focus-visible,.as-text-button:focus-visible { outline:3px solid var(--as-accent-soft); outline-offset:2px; }
.as-hidden { display:none !important; }
.as-fortress-area { fill:var(--as-fortress); stroke:none; }
.as-board-edge { stroke-width:5; stroke-linecap:round; }
.as-board-edge.silver { stroke:var(--as-silver); }
.as-board-edge.gold { stroke:var(--as-gold); }
.as-board-node { fill:var(--as-surface); stroke:var(--as-line); stroke-width:2; }
.as-piece { cursor:pointer; stroke:var(--as-ink); stroke-width:3; transition:transform .12s ease,filter .12s ease; transform-box:fill-box; transform-origin:center; }
.as-board-locked .as-piece { cursor:wait; }
.as-piece:hover { filter:drop-shadow(0 3px 4px rgb(0 0 0 / 20%)); transform:scale(1.06); }
.as-piece.soldier { fill:var(--as-soldier); }
.as-piece.officer { fill:#fffdf7; }
.as-piece.selected { stroke:var(--as-accent); stroke-width:7; }
.as-target { fill:var(--as-accent-soft); stroke:var(--as-accent); stroke-width:3; cursor:pointer; opacity:.94; }
.as-target:hover { fill:var(--as-accent); }
@media (max-width:820px) {
  .as-app-shell { padding:18px; }
  .as-game-layout { grid-template-columns:1fr; }
  .as-side-panel { grid-template-columns:1fr 1fr; }
  .as-settings-card,.as-rules-card { grid-column:1/-1; }
}
@media (max-width:520px) {
  .as-app-header { align-items:start; }
  .as-app-header .as-secondary-button { padding:8px 11px; }
  .as-side-panel { grid-template-columns:1fr; }
  .as-settings-card,.as-rules-card { grid-column:auto; }
}