/* ============================================================
   The Great War — Web Edition
   Shared application styles (design system) + functional layers.
   Design tokens/components mirror dev/design/claude-design/app-styles.css;
   the FUNCTIONAL LAYERS section preserves the SVG board, unit
   boxes, dialogs and battle board that the design system omits.
   ============================================================ */

/* ---- Type ---- */
/* Space Grotesk — latin-ext */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Grotesk — latin */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono — latin-ext */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono — latin */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ---- */
:root {
    --bg:        #0a0e15;
    --panel:     #131923;
    --panel-2:   #1a2230;
    --panel-3:   #222b3c;

    --border:    #2a3548;
    --border-2:  #384459;

    --ink:       #e8ecf3;
    --muted:     #8a96ab;
    --faint:     #5a6578;

    --accent:    #c9a86a;
    --accent-2:  #8a7548;
    --att:       #d97557;
    --def:       #5e7fb8;
    --danger:    #d94e3e;
    --danger-2:  #ff6655;
    --ok:        #5ab87a;

    --ink-dim: var(--muted);
}

/* ---- Base ---- */
* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
}

body::before {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse at 30% 20%, #1a2638 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, #1d2335 0%, transparent 55%),
        repeating-linear-gradient(45deg, transparent 0 120px, rgba(255,255,255,.012) 120px 121px),
        repeating-linear-gradient(-45deg, transparent 0 120px, rgba(255,255,255,.012) 120px 121px),
        #0a0e15;
    z-index: -1;
    pointer-events: none;
}

a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 120ms;
}
a:hover { border-bottom-color: var(--accent); }

h1, h2, h3, h4 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--ink);
}
h1 { font-size: 2.1rem; letter-spacing: -.01em; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }
.muted { color: var(--muted); }
small, .small { font-size: .82rem; color: var(--muted); }

code, kbd, .mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Buttons ---- */
button, .btn {
    font-family: inherit;
    background: linear-gradient(180deg, #d4b577 0%, #b8954f 100%);
    color: #1a1408;
    border: 1px solid var(--accent-2);
    padding: .55rem 1rem;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 4px rgba(201,168,106,.18);
    transition: transform 100ms, filter 120ms, box-shadow 120ms;
}
button:hover, .btn:hover {
    filter: brightness(1.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 8px rgba(201,168,106,.28);
}
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
button[disabled], .btn[disabled] {
    background: #3a3528; color: var(--faint);
    border-color: var(--border-2);
    box-shadow: none;
    cursor: not-allowed;
}

button.secondary, .btn.secondary {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border-2);
    box-shadow: none;
}
button.secondary:hover, .btn.secondary:hover {
    border-color: var(--accent);
    color: var(--ink);
    filter: none;
}

button.link, .btn.link {
    background: transparent; color: var(--accent);
    padding: 0; border: 0;
    text-transform: none; letter-spacing: 0; font-weight: 500;
    box-shadow: none;
}

button.danger, .btn.danger {
    background: linear-gradient(180deg, #d4584a 0%, #a8362a 100%);
    border-color: #7a2820;
    color: #fff;
}

.btn-primary { /* legacy alias used by some templates */
    font-family: inherit;
    background: linear-gradient(180deg, #d4b577 0%, #b8954f 100%);
    color: #1a1408;
    border: 1px solid var(--accent-2);
    padding: .55rem 1rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
}

.toolbtn {
    font-family: inherit;
    background: var(--panel-2);
    border: 1px solid var(--border-2);
    color: var(--ink);
    border-radius: 4px;
    padding: .35rem .8rem;
    cursor: pointer;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: border-color 120ms, color 120ms;
    box-shadow: none;
}
.toolbtn:hover {
    border-color: var(--accent);
    color: var(--accent);
    filter: none;
}

/* ---- Form controls ---- */
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=search], textarea, select {
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--border-2);
    border-radius: 4px;
    padding: .55rem .7rem;
    font: inherit;
    font-size: .92rem;
    transition: border-color 120ms, box-shadow 120ms;
    width: 100%;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201,168,106,.15);
}
label {
    display: block;
    font-size: .78rem;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .35rem;
    font-weight: 600;
}

/* ---- Topbar ---- */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 1.4rem;
    background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(8px);
}
.brand {
    display: inline-flex; align-items: center; gap: .65rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700; letter-spacing: .02em;
    color: var(--ink) !important;
    font-size: 1rem;
    border-bottom: none !important;
    white-space: nowrap;
    flex-shrink: 0;
}
.brand-mark {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #1a1408;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
    flex-shrink: 0;
}
.topbar-game {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: .75rem;
    padding: 0 1.5rem;
    font-family: 'Space Grotesk', sans-serif;
}
.topbar-game .tg-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem; color: var(--faint);
    letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
}
.topbar-game .tg-title {
    font-size: .95rem; font-weight: 700; color: var(--ink);
    letter-spacing: .01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar nav { display: flex; gap: 1.1rem; align-items: center; }
.topbar nav a {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.topbar nav a:hover { color: var(--ink); border-bottom-color: transparent; }
.topbar nav .who {
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: .78rem;
    letter-spacing: .04em;
}
.lang-switch { color: var(--faint); font-size: .82rem; }
.lang-switch strong { color: var(--ink); margin: 0 .4rem; }

/* ---- Main / layout ---- */
main {
    max-width: 1000px;
    margin: 2.5rem auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 1;
}
main.game-full {
    max-width: none;
    margin: .6rem auto 0;
    padding: 0 .8rem;
}

.hero { padding: 1.5rem 0 2rem; }
.hero h1 { margin-top: 0; }
.hero .lede { color: var(--muted); font-size: 1.05rem; max-width: 640px; line-height: 1.55; }

/* ---- Cards / panels ---- */
.card, .form-card, .turn-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 4px 18px -8px rgba(0,0,0,.5);
}
.card h3, .turn-panel h3 { margin-top: 0; margin-bottom: .75rem; }
.card h3 + .muted, .turn-panel h3 + .muted { margin-top: -.5rem; }

.form-card {
    max-width: 440px;
    margin: 0 auto;
    padding: 1.8rem;
}
.form-card h2 { margin-top: 0; margin-bottom: 1rem; }
.form-card label { margin: 1rem 0 .35rem; }
.form-card input { width: 100%; }
.form-card button { width: 100%; margin-top: 1.25rem; }

/* ---- Flash messages ---- */
.flash {
    padding: .8rem 1.1rem;
    border-radius: 6px;
    margin-bottom: 1.2rem;
    border: 1px solid var(--border-2);
    background: var(--panel);
    font-size: .92rem;
}
.flash.error {
    background: rgba(217,78,62,.08);
    border-color: rgba(217,78,62,.4);
    color: #f5c6c6;
}
.flash.success {
    background: rgba(90,184,122,.08);
    border-color: rgba(90,184,122,.4);
    color: #d2f0d2;
}
.flash ul { margin: .25rem 0 0; padding-left: 1.25rem; }

/* ---- Tables ---- */
table.keys, table.data, .seats table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}
table.keys th, table.keys td,
table.data th, table.data td,
.seats th, .seats td {
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}
table.keys th, table.data th, .seats th {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--faint);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
table.keys tr.used    { color: var(--muted); }
table.keys tr.inactive { color: var(--danger-2); }
table.keys code, table.data code {
    font-family: 'JetBrains Mono', monospace;
    background: var(--bg);
    padding: .15rem .4rem;
    border-radius: 3px;
    border: 1px solid var(--border-2);
    font-size: .85em;
}
.seats tr.mine td {
    background: rgba(201,168,106,.06);
    box-shadow: inset 3px 0 0 var(--accent);
}

form.inline { display: inline; }
form.row {
    display: flex; gap: .75rem; align-items: end;
    margin-bottom: 1.5rem; flex-wrap: wrap;
}
form.row label { margin-bottom: 0; }
form.row input, form.row select { width: auto; min-width: 220px; }

/* ---- Phase pill ---- */
.phase-pill {
    display: inline-block;
    margin-left: .5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .65rem; font-weight: 700;
    padding: .25rem .6rem;
    border-radius: 3px;
    background: rgba(201,168,106,.1);
    border: 1px solid var(--accent-2);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .14em;
    vertical-align: middle;
}

/* ---- Status pills ---- */
.status {
    font-family: 'JetBrains Mono', monospace;
    font-size: .65rem;
    text-transform: uppercase;
    padding: .25rem .55rem;
    border-radius: 3px;
    background: var(--bg);
    border: 1px solid var(--border-2);
    color: var(--muted);
    letter-spacing: .12em;
    font-weight: 700;
    vertical-align: middle;
}
.status-active   { color: var(--ok);    border-color: rgba(90,184,122,.5); background: rgba(90,184,122,.06); }
.status-finished { color: var(--muted); }

/* ---- Lobby ---- */
.rooms .row select { width: 220px; }
.room-list { list-style: none; padding: 0; margin: 0; }
.room-list li {
    padding: .65rem 0;
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.room-list li:last-child { border-bottom: 0; }
.lobby h2 { display: flex; align-items: center; gap: .75rem; }
.lobby .layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 800px) { .lobby .layout { grid-template-columns: 1fr; } }
.start-form { margin-top: 1rem; display: flex; gap: .75rem; align-items: center; }
.start-form button[disabled] { opacity: .4; cursor: not-allowed; }

/* ---- Chat ---- */
.chat-log {
    background: var(--bg);
    border: 1px solid var(--border-2);
    border-radius: 6px;
    height: 340px;
    overflow-y: auto;
    padding: .55rem .85rem;
    font-size: .9rem;
    font-family: 'Inter', sans-serif;
}
.chat-log .msg {
    margin: .25rem 0;
    word-wrap: break-word;
    padding: .15rem 0;
}
.chat-log .who {
    color: var(--accent);
    font-weight: 700;
    margin-right: .35rem;
}
.chat-log .msg.team {
    background: rgba(90,184,122,.05);
    border-left: 3px solid var(--ok);
    padding: .25rem .55rem;
    margin: .35rem 0;
    border-radius: 3px;
}
.chat-log .scope-tag {
    color: var(--ok);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .08em;
    margin-right: .3rem;
}
.chat-log .msg.system {
    background: rgba(201,168,106,.06);
    border-left: 3px solid var(--accent);
    padding: .35rem .55rem;
    margin: .35rem 0;
    font-size: .85rem;
    border-radius: 3px;
}
.chat-log .msg.system .sys-body { color: var(--ink); }
.chat-input { display: flex; gap: .5rem; margin-top: .8rem; }
.chat-input input[type=text] { flex: 1; }
.chat-scope {
    background: var(--bg);
    border: 1px solid var(--border-2);
    color: var(--ink);
    border-radius: 4px;
    font: inherit;
    font-size: .9rem;
    padding: .55rem .55rem;
    width: auto;
    min-width: 90px;
}

/* ---- Power chips ---- */
.power-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .6rem;
    border: 1px solid var(--border-2);
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    margin: .15rem .15rem .15rem 0;
    background: var(--panel-2);
}
.power-chip .dot {
    width: .55rem; height: .55rem;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 6px currentColor;
}
.power-chip.casualty { color: var(--danger); border-color: var(--danger); background: rgba(217,78,62,.12); }

/* ---- Admin sub-nav ---- */
.admin-subnav {
    display: flex; gap: .25rem; flex-wrap: wrap;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: .5rem;
}
.admin-subnav a {
    padding: .45rem .8rem;
    border-radius: 4px;
    color: var(--muted);
    background: transparent;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: none;
}
.admin-subnav a:hover { background: var(--panel); color: var(--ink); }
.admin-subnav a.active {
    background: var(--panel);
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    border-radius: 4px 4px 0 0;
}
.pc-tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pc-tabs a {
    padding: .45rem .8rem; background: var(--panel-2);
    border: 1px solid var(--border-2); border-radius: 4px; color: var(--muted);
    font-size: .82rem; font-weight: 600;
}
.pc-tabs a:hover { color: var(--ink); }
.pc-tabs a.active { color: var(--accent); border-color: var(--accent); }

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.dash-card {
    display: block;
    padding: 1.2rem 1.4rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-top: 2px solid var(--border-2);
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    transition: border-color 150ms, transform 150ms;
}
.dash-card:hover {
    border-top-color: var(--accent);
    border-color: var(--border-2);
    text-decoration: none;
    transform: translateY(-1px);
}
.dash-card h3 {
    margin: 0 0 .25rem 0;
    color: var(--ink);
    font-size: .9rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.dash-card .count {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent);
    margin: .5rem 0 0;
    letter-spacing: -.01em;
}

.admin textarea {
    width: 100%; background: var(--bg); border: 1px solid var(--border-2);
    color: var(--ink); padding: .55rem .7rem; border-radius: 4px;
    font: 13px 'JetBrains Mono', ui-monospace, monospace; margin: .5rem 0;
}
.admin label.checkbox, .unit-form label.checkbox {
    display: flex; align-items: center; gap: .5rem; margin: .5rem 0;
    font-size: .9rem; color: var(--muted); text-transform: none; letter-spacing: 0;
}
.admin .danger { color: var(--danger); }
.unit-form {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .5rem .75rem; align-items: end;
}
.unit-form label.checkbox { grid-column: span 2; }
.unit-form button { grid-column: 1 / -1; justify-self: start; padding: .5rem 1.5rem; }
.victory-form .card { margin-bottom: 1rem; }
.victory-form button { padding: .5rem 1.5rem; }

/* ============================================================
   IN-GAME LAYOUT
   ============================================================ */

.power-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: .4rem;
    overflow-x: auto;
    padding: .4rem .55rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: .7rem;
    position: sticky; top: 64px; z-index: 10;
    box-shadow: 0 4px 18px -8px rgba(0,0,0,.5);
}
.pb-power {
    display: flex; align-items: center; gap: .55rem;
    padding: .35rem .65rem;
    border-radius: 5px;
    border-left: 3px solid var(--pc, var(--border-2));
    background: rgba(255,255,255,.015);
    flex: 1 0 auto;
    min-width: 130px;
    transition: background 150ms;
}
.pb-power:hover { background: rgba(255,255,255,.04); }
.pb-power.is-current {
    background: rgba(201,168,106,.08);
    box-shadow: inset 0 0 0 1px rgba(201,168,106,.35);
}
.pb-emblem img, .pb-emblem .pb-letter {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    object-fit: cover;
    box-shadow: 0 0 0 1.5px #0a0e15, 0 0 0 2.5px var(--pc, var(--border-2));
    color: #fff;
    font: 700 .66rem 'Space Grotesk', sans-serif;
}
.pb-meta { display: flex; flex-direction: column; line-height: 1.15; }
.pb-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .74rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    letter-spacing: .02em;
}
.pb-ipc {
    font-family: 'JetBrains Mono', monospace;
    font-size: .78rem;
    color: var(--accent);
    font-weight: 700;
}
.pb-inc {
    font-size: .68rem;
    color: var(--muted);
    margin-left: .25rem;
    font-weight: 500;
}
.pb-ctrl {
    font-family: 'JetBrains Mono', monospace;
    font-size: .65rem;
    color: var(--faint);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Game layout (with resize-handle column) */
.game-layout {
    display: grid;
    grid-template-columns: 1fr 8px var(--aside-w, 340px);
    gap: .8rem;
    align-items: start;
}
.game-layout.aside-collapsed { grid-template-columns: 1fr 0 0; }
.game-layout.aside-collapsed .game-aside,
.game-layout.aside-collapsed .resize-handle { display: none; }
.game-layout.is-resizing { transition: none; }
@media (max-width: 900px) {
    .game-layout { grid-template-columns: 1fr; }
    .resize-handle { display: none; }
}

.game-main { min-width: 0; }
.game-aside {
    display: flex; flex-direction: column; gap: .7rem;
    position: sticky; top: 130px;
    max-height: calc(100vh - 140px);
    overflow: auto;
}
.game-aside .card { margin: 0; padding: 1rem 1.1rem; }
.game-aside .card h3 { margin-bottom: .55rem; font-size: .95rem; }
.game-aside .chat-log { height: 46vh; }
.game-aside .chat-input { display: flex; flex-wrap: wrap; gap: .35rem; }
.game-aside .chat-input .chat-scope { flex: 0 0 auto; }
.game-aside .chat-input input[type=text] { flex: 1 1 100px; min-width: 0; }
.game-aside .chat-input button { flex: 0 0 auto; padding: .45rem .8rem; }

.aside-toggle {
    position: absolute; right: .5rem; top: .5rem; z-index: 12;
    background: var(--panel-2);
    border: 1px solid var(--border-2);
    color: var(--ink);
    border-radius: 4px;
    padding: .25rem .6rem;
    cursor: pointer;
    font-size: .75rem;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}
.aside-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* Resize handle between board and aside */
.resize-handle {
    grid-column: 2 / 3;
    grid-row: 1;
    width: 8px;
    margin-left: -8px;
    cursor: col-resize;
    background: transparent;
    position: relative;
    z-index: 5;
    transition: background 120ms;
    user-select: none;
    touch-action: none;
    align-self: stretch;
    min-height: 200px;
}
.resize-handle::before {
    content: '';
    position: absolute;
    left: 3px; top: 0; bottom: 0;
    width: 2px;
    background: var(--border);
    border-radius: 1px;
    transition: background 120ms, width 120ms;
}
.resize-handle::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 36px;
    background: var(--panel-2);
    border: 1px solid var(--border-2);
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.resize-handle:hover::before,
.resize-handle.dragging::before { background: var(--accent); width: 3px; left: 2.5px; }
.resize-handle:hover::after,
.resize-handle.dragging::after { border-color: var(--accent); background: rgba(201,168,106,.12); }
body.resizing, body.resizing * { cursor: col-resize !important; user-select: none; }

/* Card eyebrow + collapsible card (Seats) */
.card-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: .65rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 700;
    margin-bottom: .3rem;
}
.collapsible > summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem;
    margin: 0;
}
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary h3 { margin: 0; display: flex; align-items: center; gap: .5rem; }
.collapsible .seat-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--border-2);
    border-radius: 3px;
    padding: .1rem .4rem;
    letter-spacing: .04em;
    font-weight: 600;
}
.collapsible .chev { color: var(--muted); font-size: .85rem; transition: transform 150ms; display: inline-block; }
.collapsible[open] .chev { transform: rotate(180deg); }
.collapsible:not([open]) > summary { margin-bottom: 0; }
.collapsible > summary:hover, .collapsible > summary:hover .chev { color: var(--accent); }
.collapsible > *:not(summary) { margin-top: .65rem; }
.collapsible:not([open]) > *:not(summary) { display: none; }

/* Board */
.board-section { margin-top: 0; }
.board-header h2 { margin-bottom: .2rem; }
.board-header .muted { margin-top: 0; font-size: .88rem; }
.board-toolbar {
    display: flex; align-items: center; gap: .5rem;
    margin: .5rem 0; flex-wrap: wrap;
}
.board-toolbar button, .board-toolbar .toolbtn { padding: .35rem .7rem; font-size: .8rem; }
.board-toolbar .map-hint { margin-left: auto; font-size: .8rem; }
.game-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0 .6rem; }

.board-stage {
    width: 100%;
    height: calc(100vh - 180px);
    min-height: 540px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg);
    box-shadow: 0 4px 24px -10px rgba(0,0,0,.6);
}

/* Turn panel internals */
.turn-panel { margin-top: 0; }
.tp-status {
    display: flex; align-items: center; gap: .8rem;
    padding: .8rem 1rem;
    background: var(--panel-2);
    border: 1px solid var(--border-2);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    margin-bottom: 1rem;
}
.tp-status .ts-emblem {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--pc, var(--accent));
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font: 700 .82rem 'Space Grotesk', sans-serif;
    box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 2.5px var(--pc, var(--accent));
    letter-spacing: .04em;
    flex-shrink: 0;
    object-fit: cover;
}
.tp-status .ts-text { flex: 1; min-width: 0; }
.tp-status .ts-line1 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--ink); }
.tp-status .ts-line2 {
    font-family: 'JetBrains Mono', monospace;
    font-size: .78rem; color: var(--muted);
    letter-spacing: .04em; margin-top: 2px;
}
.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    margin: .8rem 0;
}
.qa {
    display: flex; align-items: center; gap: .55rem;
    padding: .55rem .7rem;
    background: var(--panel-2);
    border: 1px solid var(--border-2);
    border-radius: 5px;
    text-decoration: none;
    color: var(--ink);
    font: 600 .82rem 'Inter', sans-serif;
    transition: border-color 120ms, background 120ms;
}
.qa:hover { border-color: var(--accent); background: rgba(201,168,106,.06); border-bottom-color: var(--accent); }
.qa .qa-icon {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: var(--accent);
}
.qa .qa-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem; color: var(--muted);
    margin-left: auto; letter-spacing: .04em;
}
.end-turn-row {
    display: flex; gap: .5rem; align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* Compact seats card */
.seats.compact table { width: 100%; border-collapse: collapse; }
.seats.compact td {
    padding: .35rem .4rem;
    border-bottom: 1px solid var(--border);
    font-size: .86rem;
}
.seats.compact tr:last-child td { border-bottom: 0; }
.seat-emblem {
    width: 22px; height: 22px;
    border-radius: 50%;
    vertical-align: middle;
    box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 2.5px var(--border-2);
    object-fit: cover;
    margin-right: .35rem;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font: 700 .65rem 'Space Grotesk', sans-serif;
}
.chat-emblem, .log-emblem {
    width: 16px; height: 16px;
    border-radius: 50%;
    vertical-align: -.15em;
    box-shadow: 0 0 0 1px #000;
    margin-right: .35em;
    display: inline-block;
    object-fit: cover;
}

/* Unit purchase cards */
.unit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .65rem;
    margin: .75rem 0;
}
.unit-card {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-top: 2px solid var(--border-2);
    border-radius: 6px;
    padding: .7rem .75rem;
    text-align: center;
    transition: border-color 150ms;
}
.unit-card:hover { border-top-color: var(--accent); }
.unit-card .uc-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700; font-size: .9rem;
    margin-top: .3rem;
}
.unit-card .uc-stats {
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem;
    color: var(--muted);
    margin: .2rem 0 .45rem;
    letter-spacing: .04em;
}
.unit-card.locked { opacity: .45; filter: grayscale(.6); }
.uc-lock { font-size: .75rem; color: var(--faint); margin-top: .3rem; }
.u-ic { width: 34px; height: 34px; display: inline-block; vertical-align: middle; color: var(--ink); }

.stepper { display: flex; align-items: center; justify-content: center; gap: .3rem; }
.stepper button {
    width: 2.2rem; padding: .25rem 0;
    font-size: 1.1rem; line-height: 1;
    background: var(--panel-3); color: var(--ink);
    border: 1px solid var(--border-2);
    text-transform: none; letter-spacing: 0;
    box-shadow: none;
}
.stepper button:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.stepper input {
    width: 3.4rem;
    text-align: center;
    background: var(--bg);
    border: 1px solid var(--border-2);
    color: var(--ink);
    border-radius: 4px;
    font: inherit; font-weight: 700;
    padding: .35rem;
}
.purchase-actions {
    display: flex; align-items: center; gap: 1rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--border);
}
.purchase-actions button[disabled] { opacity: .4; cursor: not-allowed; }
.ipc-remaining {
    font-family: 'JetBrains Mono', monospace;
    font-size: .92rem;
    color: var(--accent);
    font-weight: 700;
}
.mobilize-where { display: block; margin: .5rem 0; }
.mobilize-where select { width: auto; margin-left: .5rem; }

.income-strip { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; }
.income-item {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .65rem;
    background: var(--panel-2);
    border: 1px solid;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .8rem;
}
.income-item .dot { width: .7rem; height: .7rem; border-radius: 50%; }
.income-item .ip-ipc { color: var(--accent); font-weight: 700; }
.income-item .ip-ctrl { font-size: .72rem; color: var(--muted); }

/* ---- Modals ---- */
.modal {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(0,0,0,.66);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.modal[hidden] { display: none !important; }
.modal-box {
    background: var(--panel);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    padding: 1.3rem 1.5rem;
    min-width: 380px;
    max-width: min(960px, 94vw);
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 30px 80px -10px rgba(0,0,0,.8);
}
.modal-box h3 { margin-top: 0; }
.modal-actions {
    display: flex; justify-content: flex-end; gap: .75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* ---- Alert modal ---- */
.alert-modal .modal-box { min-width: 360px; max-width: 480px; }
.alert-modal .modal-box h3 { display: flex; align-items: center; gap: .55rem; }
.alert-modal.kind-error   .modal-box { border-left: 3px solid var(--danger-2); }
.alert-modal.kind-success .modal-box { border-left: 3px solid var(--accent); }
.alert-modal.kind-info    .modal-box { border-left: 3px solid var(--border-2); }
.alert-modal .modal-box p { margin: .25rem 0 0 0; color: var(--muted); }

/* ---- Event log ---- */
.event-log { margin-top: 1rem; color: var(--muted); font-size: .88rem; }
.event-log summary { cursor: pointer; color: var(--accent); }
.event-log code { font-size: .82rem; }
.event-log li { margin: .25rem 0; }

/* ---- Footer mini ---- */
.footnote {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    color: var(--faint);
    font-size: .8rem;
    text-align: center;
}

/* ---- Auth pages (login / register) ---- */
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem; color: var(--accent);
    letter-spacing: .22em; text-transform: uppercase;
    font-weight: 700; margin-bottom: 1rem;
}
.hero-eyebrow .dot {
    width: .55rem; height: .55rem; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 8px var(--accent);
}
.auth-wrap {
    display: grid; grid-template-columns: 1.1fr 1fr;
    gap: 2rem; align-items: center;
}
@media (max-width: 820px) { .auth-wrap { grid-template-columns: 1fr; } }
.auth-blurb { padding: 1rem 0; }
.auth-blurb .hero-eyebrow { margin-bottom: 1.2rem; }
.auth-blurb h2 { font-size: 2rem; margin: 0 0 1rem 0; letter-spacing: -.01em; }
.auth-blurb .lede { color: var(--muted); font-size: .98rem; max-width: 520px; }
.auth-blurb ul { margin: 1rem 0 0 0; padding: 0; list-style: none; }
.auth-blurb li {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .4rem 0; color: var(--muted); font-size: .9rem;
}
.auth-blurb li::before {
    content: '◆'; color: var(--accent); font-size: .75rem;
    margin-top: .25rem; flex-shrink: 0;
}
.page-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.page-tabs a {
    padding: .85rem 1.1rem; color: var(--muted);
    font-family: 'Space Grotesk', sans-serif;
    font-size: .92rem; font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; white-space: nowrap;
}
.page-tabs a:hover { color: var(--ink); border-bottom-color: var(--border-2); }
.page-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- In-card casualty chooser (battle board) ---- */
.bb-pick-st {
    width: 100%; font-family: 'JetBrains Mono', monospace; font-size: .72rem;
    color: var(--muted); padding: .4rem 0 0;
}
.bb-pick-st.ok { color: var(--ok); }
/* Per-unit chooser row, sits BELOW the dice tray inside each card.
   Must fit a ~150px card → compact controls, wraps if needed. */
.bb-card-cas {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: .2rem;
    margin-top: .4rem; padding-top: .35rem;
    border-top: 1px dashed var(--border);
}
.bb-card.cas-on { border-color: var(--danger-2); }
.bb-card.cas-on .bb-cv { color: var(--danger-2); }
.bb-cas-l { font-family: 'JetBrains Mono', monospace; font-size: .52rem;
    font-weight: 700; letter-spacing: .08em; color: var(--faint);
    flex: 0 0 auto; margin-right: .15rem; }
.bb-cas-b {
    width: 22px; height: 20px; border-radius: 3px; font-size: 12px;
    line-height: 1; font-weight: 700; cursor: pointer; box-shadow: none;
    text-transform: none; letter-spacing: 0; padding: 0;
    background: var(--panel-3); color: var(--ink);
    border: 1px solid var(--border-2); flex: 0 0 auto;
}
.bb-cas-b:hover { border-color: var(--danger-2); color: var(--danger-2);
    filter: none; }
.bb-cv {
    min-width: 1rem; text-align: right;
    font-family: 'JetBrains Mono', monospace; font-weight: 700;
    font-size: .82rem;
}
.bb-cas-x { font-family: 'JetBrains Mono', monospace; font-size: .58rem;
    color: var(--faint); margin-right: .15rem; }
.bb-cas-q {
    padding: .1rem .3rem; font-size: .54rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
    background: transparent; color: var(--muted);
    border: 1px solid var(--border-2); border-radius: 3px; box-shadow: none;
    flex: 0 0 auto;
}
.bb-cas-q:hover { border-color: var(--accent); color: var(--ink); filter: none; }
/* Slim confirm bar at the end of the side's row. */
.bb-pick-bar {
    width: 100%; display: flex; align-items: center; gap: .8rem;
    margin-top: .6rem; padding: .55rem .7rem;
    background: rgba(217,78,62,.06);
    border: 1px solid rgba(217,78,62,.35); border-radius: 8px;
}
.bb-pick-h {
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    font-size: .82rem; color: var(--ink);
}
.bb-pick-h .bb-pick-c { color: var(--danger-2); }
.bb-pick-t { font-family: 'JetBrains Mono', monospace; font-size: .68rem;
    color: var(--muted); margin-left: .4rem; }
.bb-pick-t.low { color: var(--danger-2); font-weight: 700; }
.bb-pick-go { margin-left: auto; padding: .5rem 1rem; }
.bb-sea-bar { align-items: center; }
.bb-sea-bar .bb-pick-h { margin-right: auto; }
.bb-sea-bar .bb-sea-on { margin-left: .5rem; }
.bb-sea-bar .bb-pick-st { margin: 0; }

/* Persistent bottom action area (below attacker units) */
.bb-actions { display: flex; flex-direction: column; gap: .5rem;
    padding: 0 1.4rem; }
.bb-actions:empty { display: none; }
.bb-actions .bb-pick-bar { margin-top: 0; }
.bb-actions .bb-pick-st { padding: .35rem .6rem; }
.bb-spin {
    width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
    border: 2px solid var(--border-2); border-top-color: var(--accent);
    animation: bb-spin .7s linear infinite; margin-left: auto;
}
.bb-spin[hidden] { display: none; }
@keyframes bb-spin { to { transform: rotate(360deg); } }
.bb-resolved {
    margin-left: auto; font-family: 'JetBrains Mono', monospace;
    font-size: .72rem; color: var(--ok); letter-spacing: .04em;
}
.bb-resolved:empty { display: none; }
.bb-close-btn { padding: .45rem 1.1rem; }
.bb-foot .bb-resolved + .bb-close-btn { margin-left: .8rem; }
.bb-nego {
    margin-top: .7rem; padding: .8rem 1rem;
    background: linear-gradient(180deg, rgba(201,168,106,.08), rgba(201,168,106,.02));
    border: 1px solid var(--accent-2); border-radius: 8px; text-align: center;
}
.bb-nego-t { font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    color: var(--accent); letter-spacing: .04em; }
.bb-nego-s { color: var(--muted); font-size: .82rem; margin: .35rem 0 .7rem; }
.flash-attn { animation: flash-attn 1.2s ease-out 2; }
@keyframes flash-attn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,106,0); }
    40% { box-shadow: 0 0 0 4px rgba(201,168,106,.5); }
}

/* ---- Legacy standalone casualty picker (kept for safety) ---- */
.modal-box.cas-box { min-width: 420px; max-width: 560px; }
.cas-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.cas-title {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem;
    font-weight: 700; color: var(--ink); line-height: 1;
}
.cas-title span { color: var(--muted); font-weight: 500; font-size: .95rem; }
.cas-sub {
    margin-top: .35rem; font-family: 'JetBrains Mono', monospace;
    font-size: .72rem; color: var(--muted); letter-spacing: .06em;
}
.cas-sub .md-dot { color: var(--accent); }
.cas-timer { color: var(--muted); }
.cas-timer.low { color: var(--danger-2); font-weight: 700; }
.cas-rows { display: flex; flex-direction: column; gap: .4rem; }
.cas-row {
    display: grid; grid-template-columns: 1fr auto auto auto;
    align-items: center; gap: .6rem;
    padding: .45rem .6rem; background: var(--panel-2);
    border: 1px solid var(--border); border-left: 3px solid var(--border-2);
    border-radius: 6px;
}
.cas-row.on { border-left-color: var(--danger-2);
    background: linear-gradient(180deg, rgba(217,78,62,.07), rgba(217,78,62,.02)); }
.cas-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    font-size: .9rem; color: var(--ink); }
.cas-have { font-family: 'JetBrains Mono', monospace; font-size: .68rem;
    color: var(--faint); }
.cas-step { display: flex; align-items: center; gap: .45rem; }
.cas-b {
    width: 28px; height: 26px; border-radius: 4px; font-size: 15px;
    font-weight: 700; cursor: pointer; box-shadow: none;
    background: var(--panel-3); color: var(--ink);
    border: 1px solid var(--border-2); text-transform: none; letter-spacing: 0;
}
.cas-b:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.cas-v { min-width: 1.6rem; text-align: center;
    font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.cas-q { display: flex; gap: .3rem; }
.cas-q-b {
    padding: .25rem .5rem; font-size: .6rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
    background: transparent; color: var(--muted);
    border: 1px solid var(--border-2); border-radius: 3px; box-shadow: none;
}
.cas-q-b:hover { border-color: var(--accent); color: var(--ink); filter: none; }

/* ---- Movements-this-turn list (turn panel) ---- */
.move-list { list-style: none; margin: .4rem 0 .6rem; padding: 0;
    display: flex; flex-direction: column; gap: .35rem; }
.move-line {
    display: flex; align-items: center; gap: .6rem;
    padding: .4rem .6rem; background: var(--panel-2);
    border: 1px solid var(--border); border-left: 3px solid var(--accent-2);
    border-radius: 6px; font-size: .86rem;
}
.ml-route { font-family: 'Space Grotesk', sans-serif; }
.ml-route strong { color: var(--ink); }
.ml-arrow { color: var(--accent); margin: 0 .25rem; }
.ml-units {
    font-family: 'JetBrains Mono', monospace; font-size: .76rem;
    color: var(--muted); margin-left: auto;
}
.ml-x { margin: 0; }
.ml-x button {
    width: 24px; height: 24px; padding: 0; line-height: 1;
    background: transparent; color: var(--muted);
    border: 1px solid var(--border-2); border-radius: 4px;
    box-shadow: none; text-transform: none; letter-spacing: 0;
    font-size: 13px; cursor: pointer;
}
.ml-x button:hover { border-color: var(--danger-2);
    color: var(--danger-2); filter: none; }

/* ---- Game-over banner ---- */
.go-banner {
    position: fixed; inset: 0; z-index: 80;
    display: flex; align-items: center; justify-content: center;
    background: rgba(4,6,10,.78); backdrop-filter: blur(6px);
}
.go-banner[hidden] { display: none !important; }
.go-box {
    text-align: center; padding: 2.6rem 3rem;
    background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
    border: 1px solid var(--accent-2);
    border-radius: 14px; max-width: 560px; width: 92%;
    box-shadow: 0 40px 100px -20px rgba(0,0,0,.85),
                0 0 0 1px rgba(201,168,106,.15),
                inset 0 1px 0 rgba(255,255,255,.04);
}
.go-eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: .72rem;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--accent); font-weight: 700; margin-bottom: 1rem;
}
.go-title {
    font-family: 'Space Grotesk', sans-serif; font-size: 2.6rem;
    margin: 0 0 .4rem; letter-spacing: -.01em; color: var(--ink);
}
.go-title span { color: var(--accent); }
.go-sub {
    color: var(--muted); font-family: 'JetBrains Mono', monospace;
    font-size: .8rem; letter-spacing: .04em; margin: 0 0 1.8rem;
}
.go-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.go-actions .btn { padding: .7rem 1.4rem; }

/* ---- Scrollbars ---- */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   FUNCTIONAL LAYERS — SVG board, unit boxes, dialogs, battle
   (not part of the visual design system; preserve mechanics)
   ============================================================ */

/* Schematic / traced board */
.board-svg { display: block; width: 100% !important; height: 100% !important;
    touch-action: none; user-select: none; }
.board-bg { fill: #eaf4fb; }
.conn { stroke-linecap: round; pointer-events: none; }
.conn-land  { stroke: #b9a87e; stroke-width: 5; }
.conn-coast { stroke: #7fb2d4; stroke-width: 4; stroke-dasharray: 2 6; }
.conn-sea   { stroke: #9ec9e2; stroke-width: 4; }
.conn-canal { stroke: #e08a3c; stroke-width: 5; stroke-dasharray: 8 5; }

.terr-g { cursor: pointer; }
/* Border colour is forced via !important so the per-territory inline
   owner-colour stroke can't blend the outline into its own fill. */
.terr-blob { stroke: #243441 !important; stroke-width: 2 !important;
    fill-opacity: 1; stroke-linejoin: round;
    transition: filter .12s, stroke-width .12s; }
.terr-g.sea .terr-blob { stroke: #6f9dbe !important; stroke-width: 1.4 !important; }
/* All territories share the neutral-power border style (default .terr-blob
   stroke). Owner-controlled territories used to get stroke-width 3 here;
   that override has been removed so every land territory has the same
   uniform 2-px navy outline. */
.terr-g:hover .terr-blob { filter: brightness(1.08); stroke: #fff !important;
    stroke-width: 3 !important; }
.terr-g.selected .terr-blob { stroke: #ffd45e !important; stroke-width: 3.5 !important; }
.terr-g.adj-highlight .terr-blob { stroke: #d98a00 !important; stroke-width: 3 !important; }
.terr-g.drop-target .terr-blob { stroke: #1f9d3a !important; stroke-width: 4.5 !important; }
.terr-g.dragging .terr-blob { stroke: #fff !important; stroke-width: 3 !important; }
.terr-g.contested .terr-blob { fill: #b042c8 !important; stroke: #6a1180 !important;
    stroke-width: 3 !important; }
.terr-name { font: 600 12px 'Inter', system-ui, sans-serif; fill: #1c2330;
    paint-order: stroke; stroke: #fff; stroke-width: 2.5px; pointer-events: none; }
.terr-g.sea .terr-name { fill: #3a6a8c; font-size: 11px; }
.terr-g.contested .terr-name, .terr-g.contested .terr-ipc { fill: #fff; stroke: #3a0a45; }
.terr-ipc { font: 10px 'Inter', system-ui, sans-serif; fill: #2d3540;
    paint-order: stroke; stroke: #fff; stroke-width: 2px; pointer-events: none; }
.terr-cap { font: 16px system-ui; fill: #caa400;
    paint-order: stroke; stroke: #fff; stroke-width: 1.5px; pointer-events: none; }
.terr-deco { stroke: #00000018; stroke-width: 1; pointer-events: none; }
.decorations { pointer-events: none; }
.terr-tex { fill: url(#terr-tex); pointer-events: none; }
.ipc-circle { fill: rgba(0,0,0,.22); stroke: #fff; stroke-width: 1.5; }
.ipc-num { font: 700 11px 'Inter', system-ui, sans-serif; fill: #fff;
    pointer-events: none; paint-order: stroke; stroke: #000; stroke-width: 1.5px; }
.terr-overlay, .terr-overlays { pointer-events: none; }
.terr-overlay .unit-box, .terr-overlays .unit-box { pointer-events: auto; cursor: grab; }

/* Greyed-out unreachable territories while dragging a stack */
.terr-g.unreachable .terr-blob { filter: grayscale(1) brightness(.55); }
.terr-g.unreachable .terr-name, .terr-g.unreachable .terr-ipc,
.terr-g.unreachable .emblem { opacity: .35; }

/* Circular national emblems (roundels) */
.emblem { pointer-events: none; }
.emblem-ring { fill: #fff; stroke: #1c1c1c; stroke-width: 1.5; }
.emblem.capital .emblem-ring { stroke-width: 2.5; stroke: #ffd45e; }
.terr-flag { filter: drop-shadow(0 0 1px rgba(0,0,0,.7)); pointer-events: none; }

/* Harbours */
.harbours { pointer-events: none; }
.harbour .hb-box { fill: #f3ead2; stroke: #5a4a2a; stroke-width: 1.5; }
.harbour use { color: #4a3c1e; }

/* Per-power unit boxes (drag handles), zoom-revealed */
.unit-box { display: none; cursor: grab; }
.units-visible .unit-box { display: block; }
.ub-bg { fill: #14181f; fill-opacity: .92; stroke-width: 2; }
.ub-txt { font: 700 11px 'JetBrains Mono', ui-monospace, monospace; fill: #fff;
    paint-order: stroke; stroke: #000; stroke-width: 2px; pointer-events: none; }
.unit-box.dragging .ub-bg { fill: #2a2f3a; stroke: #fff; }
.unit-box:hover .ub-bg { fill: #222834; }
.move-arrow { stroke: #ffd45e; stroke-width: 5; fill: none;
    marker-end: url(#arrowhead); pointer-events: none; filter: drop-shadow(0 0 2px #000); }

/* Older unit chip (still referenced by some board builds) */
.unit-chip { cursor: grab; }
.unit-chip-bg { fill: #1b2330; fill-opacity: .82; stroke: #000; stroke-width: .5; }
.unit-chip .terr-units { font: 700 12px system-ui, sans-serif; fill: #ffe14d; pointer-events: none; }
.map-editing .terr-g { cursor: grab; }
.map-editing .unit-chip { pointer-events: none; }

/* Move dialog */
.move-dialog {
    position: fixed; inset: 0; background: rgba(0,0,0,.66);
    display: flex; align-items: center; justify-content: center; z-index: 70;
    backdrop-filter: blur(4px);
}
.move-dialog[hidden] { display: none !important; }
.move-dialog-box {
    width: 920px; max-width: 95vw;
    background: var(--panel); border: 1px solid var(--border-2);
    border-radius: 10px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 80px -10px rgba(0,0,0,.8);
}
/* Header */
.md-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.4rem .9rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
}
.md-head-l { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.md-badge {
    width: 36px; height: 36px; border-radius: 6px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    display: flex; align-items: center; justify-content: center;
    color: #1a1408; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); flex-shrink: 0;
}
.md-title {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem;
    font-weight: 700; color: var(--ink); line-height: 1; white-space: nowrap;
}
.md-title .md-route { color: var(--muted); font-weight: 500; }
.md-sub {
    margin-top: .35rem; font-family: 'JetBrains Mono', monospace;
    font-size: .68rem; color: var(--muted);
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.md-sub .md-dot { color: var(--accent); }
.md-sub .md-hostile { color: var(--danger-2); }
.md-x {
    width: 32px; height: 32px; border-radius: 4px;
    background: transparent; color: var(--muted);
    border: 1px solid var(--border-2); cursor: pointer;
    font-size: 18px; line-height: 1; text-transform: none; letter-spacing: 0;
    box-shadow: none; flex-shrink: 0;
}
.md-x:hover { border-color: var(--accent); color: var(--accent); filter: none; }
/* Path strip */
.md-path {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem;
    padding: .9rem 1.4rem; background: #0d121b;
    border-bottom: 1px solid var(--border); align-items: center;
}
.md-cell-r { justify-self: end; }
.md-cell-in { display: flex; align-items: center; gap: .65rem; }
.md-cell-r .md-cell-in { flex-direction: row-reverse; text-align: right; }
.md-emblem {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 2.5px var(--border-2);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted); background: var(--panel-3); flex-shrink: 0;
}
.md-cell-lbl {
    font-family: 'JetBrains Mono', monospace; font-size: .62rem;
    letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
}
.md-cell-in.att .md-cell-lbl { color: var(--att); }
.md-cell-in.def .md-cell-lbl { color: var(--def); }
.md-cell-name {
    font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 700;
    color: var(--ink); margin-top: 1px;
}
.md-cell-sub {
    font-family: 'JetBrains Mono', monospace; font-size: .62rem;
    color: var(--faint); letter-spacing: .08em; margin-top: 3px;
}
.md-arrow {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: 0 1rem; min-width: 140px; color: var(--accent);
}
.md-arrow.hostile { color: var(--danger-2); }
.md-arrow-note {
    font-family: 'JetBrains Mono', monospace; font-size: .56rem;
    color: var(--faint); letter-spacing: .12em; text-transform: uppercase;
}
.md-arrow.hostile .md-arrow-note { color: var(--danger-2); font-weight: 700; }
/* Body */
.md-body { padding: .9rem 1.4rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.md-body-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: .25rem;
}
.md-body-title {
    font-family: 'Space Grotesk', sans-serif; font-size: .7rem; font-weight: 700;
    color: var(--muted); letter-spacing: .18em; text-transform: uppercase;
}
.md-selected {
    font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--muted);
}
.md-selected strong { color: var(--accent); }
.md-row {
    display: grid; grid-template-columns: 1.4fr 1fr 1.3fr; gap: 1rem;
    align-items: center; padding: .7rem .85rem;
    background: var(--panel-2); border: 1px solid var(--border);
    border-left: 3px solid var(--border-2); border-radius: 6px;
    transition: background 200ms, border-color 200ms;
}
.md-row.on {
    background: linear-gradient(180deg, rgba(201,168,106,.06), rgba(201,168,106,.02));
    border-color: var(--accent-2); border-left-color: var(--accent);
}
.md-u { display: flex; align-items: center; gap: .75rem; }
.md-u-ic {
    width: 48px; height: 36px; display: inline-flex;
    align-items: center; justify-content: center; color: #b8c4d6;
}
.md-row.on .md-u-ic { color: var(--accent); }
.md-u-ic .u-ic { width: 34px; height: 34px; }
.md-u-name {
    font-family: 'Space Grotesk', sans-serif; font-size: .9rem;
    font-weight: 700; color: var(--ink);
}
.md-u-meta {
    font-family: 'JetBrains Mono', monospace; font-size: .62rem;
    color: var(--faint); letter-spacing: .06em; margin-top: 2px;
}
.md-step { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.md-sb {
    width: 32px; height: 30px; border-radius: 4px; font-size: 15px;
    font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: 0;
    box-shadow: none;
}
.md-minus { background: #2a1a17; border: 1px solid #5a2a22; color: #ff8a78; }
.md-plus  { background: #1c2a18; border: 1px solid #3a5a2a; color: #8ade8a; }
.md-sb:hover { filter: brightness(1.15); }
.md-val {
    min-width: 70px; padding: .35rem .6rem; text-align: center;
    background: #0d121b; border: 1px solid var(--border-2); border-radius: 4px;
    font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 1rem;
    color: var(--ink);
}
.md-row.on .md-val { border-color: var(--accent); }
.md-row.on .md-val b { color: var(--accent); }
.md-val-max { color: var(--faint); font-weight: 500; font-size: .75rem; }
.md-quick { display: flex; align-items: center; gap: .3rem; justify-content: flex-end; flex-wrap: wrap; }
.md-q {
    padding: .3rem .55rem; background: transparent; color: var(--muted);
    border: 1px solid var(--border-2); border-radius: 3px;
    font-weight: 700; font-size: .6rem; letter-spacing: .08em;
    text-transform: uppercase; cursor: pointer; box-shadow: none; white-space: nowrap;
}
.md-q:hover { border-color: var(--accent); color: var(--ink); filter: none; }
.md-q.on {
    background: linear-gradient(180deg, #d4b577, #b8954f); color: #1a1408;
    border-color: var(--accent-2);
}
.md-q-hl { color: var(--ok); border-color: rgba(90,184,122,.55); }
.md-q-hl.on { background: linear-gradient(180deg, #5ab87a, #3a9858); color: #0a1408; border-color: #3a8858; }
.md-q[disabled] { opacity: .5; cursor: not-allowed; }
/* Footer */
.md-foot {
    border-top: 1px solid var(--border); background: #0d121b;
    padding: .9rem 1.4rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.md-foot-stats { display: flex; align-items: center; gap: 1.1rem; flex: 1; min-width: 0; }
.md-stat { display: flex; flex-direction: column; gap: 1px; }
.md-stat-l {
    font-family: 'JetBrains Mono', monospace; font-size: .56rem;
    color: var(--faint); letter-spacing: .1em; text-transform: uppercase;
}
.md-stat-v {
    font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 700;
    color: var(--accent); line-height: 1;
}
.md-detail {
    padding-left: .9rem; border-left: 1px solid var(--border);
    font-family: 'JetBrains Mono', monospace; font-size: .7rem;
    color: var(--accent); font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.md-foot-btns { display: flex; gap: .5rem; flex-shrink: 0; }
.md-foot-btns .btn { padding: .6rem 1.1rem; }
.move-dialog-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1rem; }

.move-form, .place-form {
    display: flex; gap: .75rem; flex-wrap: wrap; align-items: end; margin: .75rem 0;
}
.move-form label, .place-form label {
    display: flex; flex-direction: column; gap: .2rem; font-size: .78rem;
}
.move-form .actions, .place-form .actions { width: 100%; margin-top: .75rem; }

/* Strategy panel (AI priority editor) */
.strategy-panel { margin-top: 0; }
.strategy-power { padding: .5rem 0; border-top: 1px solid var(--border); }
.strategy-power summary { cursor: pointer; padding: .35rem 0; }
.strategy-power summary > * { margin-right: .4rem; }
.strategy-list {
    list-style: decimal inside; padding: .5rem .75rem; margin: .6rem 0 1rem;
    max-height: 18rem; overflow: auto;
    border: 1px solid var(--border); border-radius: 4px; background: var(--bg);
}
.strategy-list li { padding: .2rem 0; }
.strategy-list label { cursor: pointer; text-transform: none; letter-spacing: 0; }
.strategy-edit .btn-primary { margin-top: .5rem; }
.strategy-drawer-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; }
.strategy-drawer-summary::-webkit-details-marker { display: none; }
.strategy-toggle-hint { margin-left: auto; transition: transform .15s; }
details[open] > .strategy-drawer-summary .strategy-toggle-hint { transform: rotate(180deg); }

/* Multinational casualty negotiation */
.negotiations { margin-top: 1rem; border-left: 4px solid var(--accent); }
.negotiations h3 .muted { font-size: .7em; font-weight: 400; }
.negotiation-card {
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
    padding: .75rem 1rem; margin-bottom: 1rem;
}
.negotiation-card.mine { border-color: var(--accent); }
.negotiation-card .neg-header { margin-bottom: .5rem; }
.negotiation-card h4 { margin: 0 0 .25rem 0; display: flex; align-items: center; gap: .5rem; }
.negotiation-card .phase-pill.ok { color: var(--ok); border-color: var(--ok); }
.neg-stacks { margin: .5rem 0 .75rem; }
.neg-stacks tr.mine td { background: rgba(201,168,106,.06); }
.proposal {
    margin: .5rem 0; padding: .5rem .75rem; background: var(--panel-3);
    border-left: 3px solid var(--accent); border-radius: 3px;
}
.proposal strong { display: block; margin-bottom: .25rem; }
.neg-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .75rem; }
.neg-actions form { margin: 0; }
.counter-details { margin-top: .5rem; }
.counter-details summary { cursor: pointer; color: var(--accent); }
.propose-form .defender-picks {
    border: 1px solid var(--border); border-radius: 4px; padding: .5rem .75rem; margin: .5rem 0;
}
.propose-form .defender-picks legend { padding: 0 .35rem; color: var(--accent); font-weight: 600; }
.propose-form .defender-picks label {
    display: inline-flex; align-items: center; gap: .35rem; margin-right: .75rem;
    font-size: .9rem; text-transform: none; letter-spacing: 0;
}
.propose-form .defender-picks input[type=number] { width: 4rem; padding: .25rem; }
.propose-form .picks-total { color: var(--accent); font-weight: 600; }
.propose-form .picks-total.ok { color: var(--ok); }
.propose-form .picks-total.too-many { color: var(--danger); }
.repair-form {
    margin: .75rem 0; padding: .5rem .75rem; background: var(--panel-2);
    border: 1px solid var(--border); border-radius: 4px;
}
.repair-form summary { cursor: pointer; color: var(--accent); }
.repair-form .row { margin: .4rem 0; }
.armistice { margin-top: 1rem; border-left: 4px solid var(--danger); }
.armistice h3 { margin-top: 0; color: var(--danger); }

/* System / game-log chat entries */
.log-terr {
    background: var(--panel-3); color: #cfe3f5; border: 1px solid var(--border-2);
    border-radius: 3px; padding: 0 .35em; font: inherit; font-size: .95em;
    cursor: pointer; text-transform: none; letter-spacing: 0; box-shadow: none;
}
.log-terr:hover { background: var(--accent); color: #1a1408; }
.lg-u { background: var(--panel-3); border-radius: 3px; padding: 0 .25em; margin-right: .1em; }
.lg-dim { color: var(--muted); }
.lg-bad { color: var(--danger); }
.lg-sep { border: 0; border-top: 1px dashed var(--border); margin: .25rem 0; }

/* ===== Movement summary + battle board ===== */
.mv-summary, .battle-board {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(0,0,0,.66);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.battle-board[hidden], .mv-summary[hidden] { display: none !important; }
.mv-summary-box {
    background: var(--panel); border: 1px solid var(--border-2);
    border-radius: 10px; padding: 1.2rem 1.5rem;
    min-width: 360px; max-width: min(860px, 95vw);
    max-height: 90vh; overflow: auto;
    box-shadow: 0 30px 80px -10px rgba(0,0,0,.8);
}
.mv-list { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.mv-list li { padding: .3rem 0; border-bottom: 1px solid var(--border); }
.mv-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1rem; }

/* Battle board (replay of server-resolved combat) */
.bb-box {
    width: 1180px; max-width: 96vw; max-height: 92vh;
    background: var(--panel); border: 1px solid var(--border-2);
    border-radius: 10px; overflow: hidden auto;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 80px -10px rgba(0,0,0,.8);
}
.bb-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.4rem .9rem; border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
    position: sticky; top: 0; z-index: 2;
}
.bb-h-l { display: flex; align-items: center; gap: .9rem; }
.bb-h-badge {
    width: 36px; height: 36px; border-radius: 6px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    display: flex; align-items: center; justify-content: center;
    color: #1a1408; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); flex-shrink: 0;
}
.bb-h-title {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 700;
    color: var(--ink); line-height: 1;
}
.bb-h-title span { color: var(--muted); font-weight: 500; }
/* Centred white territory name in the header */
.bb-h-c {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Space Grotesk', sans-serif; font-weight: 800;
    font-size: 1.35rem; letter-spacing: .02em;
    color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6);
    pointer-events: none; white-space: nowrap;
}
.bb-h-sub {
    margin-top: .35rem; font-family: 'JetBrains Mono', monospace;
    font-size: .68rem; color: var(--muted);
    letter-spacing: .08em; text-transform: uppercase;
}
.bb-h-sub .dot { color: var(--accent); }
.bb-h-r { display: flex; align-items: center; gap: .4rem; }
.bb-sm { padding: .35rem .6rem; font-size: .65rem; }
.bb-strip {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center;
    background: #0d121b; border-bottom: 1px solid var(--border);
}
.bb-sh {
    padding: .7rem 1.3rem; display: flex; align-items: center; gap: 1rem;
}
.bb-sh.def { justify-content: flex-end; }
.bb-sh.att { justify-content: flex-start; border-left: 1px solid var(--border); }
.bb-sh-main {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.bb-sh-emb {
    width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--border);
}
.bb-sh.att .bb-sh-emb { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--att); }
.bb-sh.def .bb-sh-emb { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--def); }
/* Big inner-edge hit count */
.bb-sh-hits {
    display: flex; flex-direction: column; align-items: center;
    line-height: 1; opacity: .4;
}
.bb-sh-hits.on { opacity: 1; }
.bb-sh-hits b {
    font-family: 'JetBrains Mono', monospace; font-size: 2.6rem;
    font-weight: 800;
}
.bb-sh-hits span {
    font-family: 'JetBrains Mono', monospace; font-size: .55rem;
    letter-spacing: .16em; color: var(--faint); margin-top: 3px;
}
.bb-sh.att .bb-sh-hits b { color: var(--att); }
.bb-sh.def .bb-sh-hits b { color: var(--def); }
/* Centre result block (post-battle owner + verdict) */
.bb-result {
    display: flex; flex-direction: column; align-items: center;
    gap: .25rem; padding: .7rem 1.6rem; text-align: center;
    border-left: 1px solid var(--border); border-right: 1px solid var(--border);
    min-width: 210px;
    background: radial-gradient(ellipse at center,
        rgba(255,255,255,.05) 0%, transparent 70%);
}
.bb-res-emb {
    width: 66px; height: 66px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor,
        0 0 14px -2px currentColor;
    overflow: hidden; margin-bottom: .3rem;
}
.bb-result.win  { color: var(--ok); }
.bb-result.loss { color: var(--def); }
.bb-result.draw { color: var(--accent); }
.bb-result.pending { color: var(--muted); }
.bb-res-flag { width: 100%; height: 100%; object-fit: cover; }
.bb-res-x { font-size: 1.7rem; color: var(--accent); }
.bb-res-l {
    font-family: 'Space Grotesk', sans-serif; font-weight: 800;
    font-size: 1.4rem; letter-spacing: .02em; color: var(--ink);
    text-transform: uppercase;
}
.bb-result.win  .bb-res-l { color: #cdebc4; }
.bb-result.loss .bb-res-l { color: #cfe0f5; }
.bb-res-s {
    font-family: 'JetBrains Mono', monospace; font-size: .64rem;
    color: var(--muted); letter-spacing: .04em;
}
@media (max-width: 820px) {
    .bb-result { border: 0; border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border); order: -1; }
}
.bb-sh-role {
    font-family: 'JetBrains Mono', monospace; font-size: .62rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
}
.bb-sh.att .bb-sh-role { color: var(--att); }
.bb-sh.def .bb-sh-role { color: var(--def); }
.bb-sh-units {
    font-family: 'JetBrains Mono', monospace; font-size: .65rem;
    color: var(--faint);
}
.bb-sh-units b { color: var(--ink); font-size: 1rem; margin-left: .35rem; }
/* Battle body: defender column on the LEFT, attacker on the RIGHT, with
   the air-combat / sea-round panel between them. */
.bb-body {
    padding: 1rem 1.4rem; display: flex; flex-direction: row;
    align-items: flex-start; gap: 1rem;
}
.bb-body > .bb-row { flex: 1 1 0; min-width: 0; }
.bb-body > .bb-air-band,
.bb-body > .bb-ribbon {
    flex: 0 0 auto; align-self: stretch; max-width: 42%;
}
@media (max-width: 900px) {
    .bb-body { flex-direction: column; }
    .bb-body > .bb-row,
    .bb-body > .bb-air-band,
    .bb-body > .bb-ribbon { flex: none; width: 100%; max-width: none; }
}
.bb-row-l {
    font-family: 'Space Grotesk', sans-serif; font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .18em; margin-bottom: .4rem;
}
.bb-row-l.att { color: var(--att); }
.bb-row-l.def { color: var(--def); }
.bb-cards {
    display: flex; flex-direction: column; gap: .55rem;
}
/* Naval-mine panel: one row per ship, individual die. */
.bb-mines { display: flex; flex-direction: column; gap: .4rem; width: 100%; }
.bb-mine-row {
    display: flex; align-items: center; gap: .7rem;
    background: var(--panel-2); border: 1px solid var(--border);
    border-radius: 6px; padding: .4rem .7rem;
}
.bb-mine-row.hit { border-color: var(--danger-2, #d94e3e);
    background: rgba(217,78,62,.12); }
.bb-mine-ic { width: 30px; height: 22px; color: var(--ink);
    display: flex; align-items: center; }
.bb-mine-ic svg { width: 100%; height: 100%; fill: currentColor; }
.bb-mine-n { flex: 1; font-family: 'Space Grotesk', sans-serif;
    font-size: .8rem; color: var(--ink); }
.bb-mine-d { display: flex; }
.bb-mine-r {
    font-family: 'JetBrains Mono', monospace; font-size: .62rem;
    letter-spacing: .1em; text-transform: uppercase; min-width: 84px;
    text-align: right; color: var(--faint);
}
.bb-mine-row.hit .bb-mine-r { color: #f0c9c9; font-weight: 700; }
.bb-card {
    background: var(--panel-2); border: 1px solid var(--border);
    border-top: 2px solid var(--border-2); border-radius: 6px;
    padding: .55rem .65rem .65rem;
    display: flex; flex-direction: column; gap: .45rem;
}
.bb-card.att { border-top-color: var(--att); }
.bb-card.def { border-top-color: var(--def); }
.bb-card.dim { opacity: .42; }
.bb-card-h { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.bb-card-l {
    font-family: 'Space Grotesk', sans-serif; font-size: .68rem; font-weight: 600;
    color: var(--muted); text-transform: uppercase; letter-spacing: .1em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bb-hb {
    flex-shrink: 0; font-family: 'JetBrains Mono', monospace; font-size: .62rem;
    font-weight: 700; padding: .12rem .35rem; border-radius: 4px;
    background: var(--bg); border: 1px solid var(--border-2); color: var(--ink);
}
.bb-card-m {
    display: flex; align-items: center; gap: .6rem;
    padding: .25rem 0 .4rem; border-bottom: 1px dashed var(--border);
}
.bb-ic { width: 46px; height: 32px; display: flex; align-items: center;
    justify-content: center; color: #b8c4d6; flex-shrink: 0; }
.bb-ic svg { width: 100%; height: 100%; fill: currentColor; }
.bb-ct {
    font-family: 'JetBrains Mono', monospace; font-size: 1.2rem; font-weight: 700;
    color: var(--ink);
}
.bb-ct em { color: var(--danger-2); font-style: normal; font-size: .8rem; margin-left: .25rem; }
.bb-dl {
    display: flex; justify-content: space-between;
    font-family: 'JetBrains Mono', monospace; font-size: .58rem;
    color: var(--faint); letter-spacing: .06em; margin-bottom: .3rem;
}
.bb-dl .on { color: var(--danger-2); }
.bb-tray { display: grid; grid-template-columns: repeat(auto-fill, 18px);
    gap: 3px; min-height: 18px; }
.bb-await { color: var(--faint); font-family: 'JetBrains Mono', monospace;
    font-size: .62rem; }
.bb-die {
    width: 18px; height: 18px; border-radius: 3px; position: relative;
    background: linear-gradient(155deg, #f4eedd 0%, #d8cfb4 100%);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.18), 0 1px 1px rgba(0,0,0,.4);
}
.bb-die.hit {
    background: linear-gradient(155deg, #ff7a66 0%, #c9352a 100%);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.25), 0 0 8px rgba(255,90,70,.55);
}
.bb-die i {
    position: absolute; width: 3.2px; height: 3.2px; border-radius: 50%;
    transform: translate(-50%, -50%); background: #1a1a1a;
}
.bb-die.hit i { background: #fff; }
@keyframes bb-roll {
    0% { transform: rotate(-30deg) scale(.6); opacity: 0; }
    60% { transform: rotate(12deg) scale(1.12); opacity: 1; }
    100% { transform: rotate(0) scale(1); opacity: 1; }
}
.bb-die.rolling { animation: bb-roll 240ms cubic-bezier(.3,1.4,.5,1) both; }
.bb-air-band {
    display: flex; align-items: center; gap: 1rem;
    background: linear-gradient(180deg, #0e131c 0%, #1a212f 50%, #0e131c 100%);
    border: 1px solid var(--border); border-radius: 6px; padding: .8rem 1rem;
}
.bb-air-side { display: flex; align-items: center; gap: .6rem; min-width: 180px; }
.bb-air-side.def { justify-content: flex-end; }
.bb-air-side svg { width: 30px; height: 22px; flex-shrink: 0; }
.bb-air-side.att svg { fill: var(--att); }
.bb-air-side.def svg { fill: var(--def); }
.bb-air-l {
    font-family: 'Space Grotesk', sans-serif; font-size: .6rem; font-weight: 600;
    color: var(--muted); letter-spacing: .14em; text-transform: uppercase;
}
.bb-air-n { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem;
    font-weight: 700; color: var(--ink); margin-top: 2px; }
.bb-air-c { flex: 1; text-align: center; }
.bb-air-t {
    font-family: 'Space Grotesk', sans-serif; font-size: .68rem; font-weight: 700;
    color: var(--accent); letter-spacing: .22em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: .5rem;
}
.bb-air-t .dot { width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.bb-air-sup {
    margin-top: .35rem; font-family: 'Space Grotesk', sans-serif;
    font-size: .72rem; font-weight: 700; color: var(--muted);
    letter-spacing: .12em; text-transform: uppercase;
}
.bb-air-sup.on { color: var(--accent); }
.bb-air-dice {
    display: grid; grid-template-columns: auto 1fr; gap: .15rem .4rem;
    align-items: center; margin: .4rem auto; max-width: 320px;
}
.bb-air-dl {
    font-family: 'JetBrains Mono', monospace; font-size: .56rem;
    font-weight: 700; color: var(--faint); letter-spacing: .1em;
}
.bb-air-tray {
    display: flex; flex-wrap: wrap; gap: 3px; min-height: 18px;
    justify-content: flex-start;
}
.bb-air-rs {
    display: flex; align-items: center; justify-content: center;
    gap: .5rem; margin-top: .3rem;
    font-family: 'JetBrains Mono', monospace; font-size: .62rem;
    color: var(--muted);
}
.bb-air-none {
    font-family: 'JetBrains Mono', monospace; font-size: .62rem;
    color: var(--faint); margin: .3rem 0;
}
/* Sea-specific */
.bb-h-badge.sea { background: linear-gradient(135deg, #6a9ec9 0%, #2f5d8f 100%); color: #fff; }
.bb-sh-dmg { display: block; color: var(--danger-2); font-size: .58rem;
    margin-top: 3px; letter-spacing: .05em; font-style: normal; }
.bb-ribbon {
    display: flex; align-items: center; gap: 1.1rem;
    background: linear-gradient(180deg, #0e131c 0%, #1a212f 50%, #0e131c 100%);
    border: 1px solid var(--border); border-radius: 6px; padding: .7rem 1rem;
}
.bb-ribbon-n { display: flex; align-items: baseline; gap: .5rem; flex-shrink: 0; }
.bb-ribbon-n span {
    font-family: 'JetBrains Mono', monospace; font-size: .6rem;
    color: var(--faint); letter-spacing: .18em; text-transform: uppercase;
}
.bb-ribbon-n b {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem;
    font-weight: 700; color: var(--accent); line-height: 1;
}
.bb-ribbon-c {
    flex: 1; display: flex; align-items: center; gap: .35rem;
    flex-wrap: wrap; justify-content: center;
}
.bb-rchip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .5rem; background: var(--bg);
    border: 1px solid var(--border-2); border-radius: 4px;
    font-family: 'JetBrains Mono', monospace; font-size: .65rem;
    color: var(--faint); letter-spacing: .04em;
}
.bb-rchip.on { border-color: var(--accent); background: rgba(201,168,106,.12);
    color: var(--accent); }
.bb-rchip b { font-style: normal; }
.bb-rchip b.att { color: var(--att); }
.bb-rchip b.def { color: var(--def); }
.bb-hp-row { display: flex; gap: 2px; flex-wrap: wrap; margin-top: 4px; max-width: 110px; }
.bb-hp {
    width: 6px; height: 9px; border-radius: 1px; background: var(--ok);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.2);
}
.bb-hp.dmg { background: #c9352a; box-shadow: 0 0 3px rgba(255,90,70,.6); }
.bb-foot {
    border-top: 1px solid var(--border); background: #0d121b;
    padding: .9rem 1.4rem; display: flex; align-items: center;
    justify-content: center; gap: 1.2rem;
    position: sticky; bottom: 0;
}
.bb-done {
    flex: 1; max-width: 460px; padding: .7rem 1.4rem;
    font-family: 'Space Grotesk', sans-serif; font-size: .95rem;
    font-weight: 700; letter-spacing: .02em;
}
.bb-done:disabled { opacity: .5; cursor: not-allowed; }
.bb-tally { display: flex; flex-direction: column; gap: 1px; }
.bb-tally span {
    font-family: 'JetBrains Mono', monospace; font-size: .56rem;
    color: var(--faint); letter-spacing: .1em; text-transform: uppercase;
}
.bb-tally b { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; }
.bb-tally.att b { color: var(--att); }
.bb-tally.def b { color: var(--def); }
.bb-tally i { color: var(--muted); font-style: normal; font-size: .7rem; }
.bb-msg {
    flex: 1; padding: .4rem .7rem; border-radius: 6px; text-align: center;
    font-weight: 700; text-transform: capitalize;
}
.bb-msg.win  { background: rgba(90,184,122,.14); color: #cdebc4; }
.bb-msg.loss { background: rgba(217,78,62,.14); color: #f0c9c9; }
.bb-msg.draw { background: var(--panel-3); color: #ddd; }
.bb-rstep {
    display: flex; align-items: center; gap: .5rem; flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--muted);
}
@media (max-width: 820px) {
    .bb-strip { grid-template-columns: 1fr; }
    .bb-sh { justify-content: center; }
    .bb-sh.att { border-left: 0; border-top: 1px solid var(--border); }
    .bb-air-band { flex-direction: column; align-items: stretch; }
}

/* ===== Purchase Units dialog ===== */
#purchase-modal .modal-box.pc-box {
    width: 1180px; max-width: 96vw; padding: 0; overflow: hidden;
    display: flex; flex-direction: column;
}
.pc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.4rem .9rem; border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
}
.pc-head-l { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.pc-badge {
    width: 36px; height: 36px; border-radius: 6px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    display: flex; align-items: center; justify-content: center;
    color: #1a1408; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); flex-shrink: 0;
}
.pc-title {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem;
    font-weight: 700; color: var(--ink); line-height: 1; white-space: nowrap;
}
.pc-title .pc-power { color: var(--muted); font-weight: 500; }
.pc-sub {
    margin-top: .35rem; font-family: 'JetBrains Mono', monospace;
    font-size: .68rem; color: var(--muted);
    letter-spacing: .08em; text-transform: uppercase;
}
.pc-sub .pc-dot { color: var(--accent); }
.pc-head-r { display: flex; align-items: center; gap: .5rem; }
.pc-emblem {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 2.5px var(--border-2);
}
.pc-sm { padding: .35rem .6rem; font-size: .68rem; }
.pc-budget {
    display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; gap: 1.1rem;
    align-items: center; padding: .9rem 1.4rem;
    background: #0d121b; border-bottom: 1px solid var(--border);
}
.pc-stat-l {
    font-family: 'JetBrains Mono', monospace; font-size: .6rem;
    color: var(--faint); letter-spacing: .12em; text-transform: uppercase;
}
.pc-stat-v {
    display: flex; align-items: baseline; gap: .3rem; margin-top: 2px;
    font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--faint);
}
.pc-stat-v b {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700;
    color: var(--ink); line-height: 1;
}
.pc-stat:nth-child(2) .pc-stat-v b { color: var(--accent); }
.pc-stat-sub {
    font-family: 'JetBrains Mono', monospace; font-size: .6rem;
    color: var(--faint); letter-spacing: .05em; margin-top: 3px;
}
.pc-bar-wrap { display: flex; flex-direction: column; gap: .35rem; }
.pc-bar-top {
    display: flex; justify-content: space-between;
    font-family: 'JetBrains Mono', monospace; font-size: .6rem;
    color: var(--faint); letter-spacing: .08em; text-transform: uppercase;
}
.pc-bar {
    height: 8px; background: var(--bg); border: 1px solid var(--border-2);
    border-radius: 4px; overflow: hidden;
}
.pc-bar-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
    transition: width 200ms;
}
.pc-groups {
    padding: 1rem 1.4rem; display: flex; flex-direction: column; gap: 1.1rem;
    max-height: 52vh; overflow: auto;
}
.pc-group-l {
    font-family: 'Space Grotesk', sans-serif; font-size: .7rem; font-weight: 700;
    color: var(--muted); letter-spacing: .18em; text-transform: uppercase;
    margin-bottom: .55rem; display: flex; align-items: center; gap: .5rem;
}
.pc-group-ic { color: var(--accent); }
.pc-tiles {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .65rem;
}
.pc-tile {
    background: var(--panel-2); border: 1px solid var(--border);
    border-top: 2px solid var(--border-2); border-radius: 6px;
    padding: .7rem .8rem; display: flex; flex-direction: column; gap: .5rem;
    transition: border-color 200ms, background 200ms;
}
.pc-tile.on {
    background: linear-gradient(180deg, #1d2433 0%, #161d2a 100%);
    border-color: var(--accent-2); border-top-color: var(--accent);
}
.pc-tile.locked { opacity: .5; filter: grayscale(.5); }
.pc-tile-top { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.pc-tile-name {
    font-family: 'Space Grotesk', sans-serif; font-size: .82rem; font-weight: 700;
    color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-cost {
    flex-shrink: 0; padding: .1rem .4rem; background: #0d121b;
    border: 1px solid var(--border-2); border-radius: 3px;
    font-family: 'JetBrains Mono', monospace; font-size: .7rem; font-weight: 700;
    color: var(--accent);
}
.pc-cost i { color: var(--faint); font-style: normal; font-weight: 500; }
.pc-tile-mid {
    display: flex; align-items: center; gap: .6rem;
    padding: .35rem 0 .3rem; border-bottom: 1px dashed var(--border);
}
.pc-tile-mid .u-ic { width: 34px; height: 34px; flex-shrink: 0; color: #b8c4d6; }
.pc-tile.on .pc-tile-mid .u-ic { color: var(--accent); }
.pc-tile-stats {
    display: flex; flex-wrap: wrap; gap: .4rem;
    font-family: 'JetBrains Mono', monospace; font-size: .62rem;
    color: var(--faint); letter-spacing: .04em;
}
.pc-tile-stats b { color: var(--ink); }
.pc-atk b { color: var(--att); }
.pc-def b { color: var(--def); }
.pc-lock {
    font-family: 'JetBrains Mono', monospace; font-size: .65rem;
    color: var(--faint); text-align: center; padding: .4rem 0;
}
.stepper.pc-count { gap: .4rem; margin-top: auto; }
.stepper.pc-count input { width: 100%; flex: 1; }
.pc-subtotal {
    display: flex; justify-content: space-between;
    font-family: 'JetBrains Mono', monospace; font-size: .6rem;
    color: var(--faint); letter-spacing: .06em; text-transform: uppercase;
}
.pc-tile.on .pc-subtotal, .pc-tile.on .pc-subtotal b { color: var(--accent); }
.pc-repair {
    margin: 0 1.4rem 1rem;
    background: linear-gradient(180deg, rgba(94,127,184,.06), rgba(94,127,184,.02));
    border: 1px solid var(--border); border-left: 3px solid var(--def);
    border-radius: 6px; padding: .8rem 1rem;
}
.pc-repair-head { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .6rem; }
.pc-repair-t {
    font-family: 'Space Grotesk', sans-serif; font-size: .75rem; font-weight: 700;
    color: var(--def); letter-spacing: .18em; text-transform: uppercase;
}
.pc-repair-sub { color: var(--muted); font-size: .8rem; }
.pc-repair-sub strong { color: var(--accent); }
.pc-repair-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem;
}
.pc-repair-card {
    background: var(--panel-2); border: 1px solid var(--border-2);
    border-radius: 6px; padding: .6rem .7rem;
    display: flex; flex-direction: column; gap: .45rem;
}
.pc-repair-name { font-weight: 700; font-size: .85rem; }
.pc-repair-card label { text-transform: none; letter-spacing: 0;
    display: flex; align-items: center; gap: .4rem; font-size: .8rem; }
.pc-repair-card input { width: 4rem; }
.pc-foot {
    border-top: 1px solid var(--border); background: #0d121b;
    padding: .9rem 1.4rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.pc-foot-l { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0; }
.pc-foot-msg { color: var(--muted); font-size: .8rem; }
.pc-foot-btns { display: flex; gap: .5rem; flex-shrink: 0; }
.pc-foot-btns .btn { padding: .6rem 1.1rem; }
@media (max-width: 820px) {
    .pc-budget { grid-template-columns: 1fr 1fr; }
}

/* ===== Player-switch overlay ===== */
#aa-turn-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
    pointer-events: none;
    animation: aa-overlay-fade 2s forwards;
}
@keyframes aa-overlay-fade {
    0%   { opacity: 1; }
    60%  { opacity: 1; }
    100% { opacity: 0; }
}
#aa-turn-overlay .to-flag {
    width: 72px; height: 72px; border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px var(--pc, var(--accent));
    margin-bottom: 1rem;
}
#aa-turn-overlay .to-name {
    font: 700 2rem 'Space Grotesk', sans-serif;
    color: var(--ink); letter-spacing: .04em;
}
#aa-turn-overlay .to-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: .9rem; color: var(--muted); margin-top: .35rem;
    text-transform: capitalize;
}

/* ---------- Mobile block ---------- */
.mobile-block {
    display: none;
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg);
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 2rem; gap: 1.2rem; color: var(--ink);
}
.mobile-block-inner {
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    max-width: 340px;
}
.mobile-block svg { color: var(--accent); }
.mobile-block h2 {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem;
    font-weight: 700; margin: 0; letter-spacing: -0.01em;
}
.mobile-block p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; margin: 0; }
@media (max-width: 1024px) {
    .mobile-block { display: flex; }
}