:root {
    --bg: #12161c;
    --panel: rgba(18, 22, 28, 0.86);
    --panel-solid: #1c222b;
    --border: rgba(255, 255, 255, 0.14);
    --text: rgba(255, 255, 255, 0.9);
    --muted: rgba(255, 255, 255, 0.55);
    --accent: #0ec3c9;
    --radius: 8px;
    /* iPhone notch and home indicator; 0 elsewhere. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

* {
    box-sizing: border-box;
}

/* The page itself never scrolls, bounces or pull-to-refreshes; screens scroll inside themselves. */
html, body {
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    color: var(--text);
    background-color: var(--bg);
    font-family: Arial, Helvetica, sans-serif;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

#root, #app {
    width: 100%;
    height: 100%;
}

#app {
    position: relative;
    overflow: hidden;
    touch-action: manipulation;   /* no double-tap zoom anywhere */
}

#game-container {
    position: relative;   /* the 3D mini map sits in it */
    width: 100%;
    height: 100%;
    touch-action: none;   /* the game handles pan/pinch itself */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Read by the HUD to pass the safe area to the game canvas. */
.safe-area-probe {
    position: fixed;
    visibility: hidden;
    pointer-events: none;
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

.muted { color: var(--muted); }
.small { font-size: 11px; }

/* ---------- buttons ---------- */

.btn {
    padding: 10px 20px;
    font-size: 15px;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.btn:hover { border-color: var(--accent); }

.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
    font-weight: bold;
}

.btn--danger { border-color: #e74c3c; color: #ff8a7a; }
.btn--danger:hover { background: rgba(231, 76, 60, 0.15); border-color: #e74c3c; }

/* ---------- screens ---------- */

.screen {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(24px + var(--safe-top)) calc(16px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(16px + var(--safe-left));
}

.title-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.title-screen h1 {
    margin: 0;
    font-size: 48px;
    letter-spacing: 2px;
}

.title-screen p {
    margin: 0 0 12px;
    color: var(--muted);
}

.mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 640px;
    margin-bottom: 8px;
}

.mode-card { gap: 6px; }
.mode-card__description { font-size: 14px; }

.select-screen {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.select-screen h2 { margin: 0 0 16px; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    padding-bottom: 16px;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    text-align: left;
    color: inherit;
    font: inherit;
    background: var(--panel-solid);
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
}

.card--selected { border-color: var(--accent); }

.card__head {
    display: flex;
    gap: 12px;
    align-items: center;
}

.card__name { font-size: 18px; font-weight: bold; }
.card__title, .card__specialty { font-size: 13px; color: var(--muted); }

.card__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin: 0;
}

.card__stats dt { font-size: 11px; color: var(--muted); }
.card__stats dd { margin: 0; font-weight: bold; }

.card__skills {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.4;
}

.card__skills li + li { margin-top: 4px; }

.tag {
    display: inline-block;
    padding: 0 6px;
    font-size: 10px;
    text-transform: uppercase;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.tag--active { border-color: var(--accent); color: var(--accent); }

.select-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 -16px;
    padding: 12px 16px calc(16px + var(--safe-bottom));
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.select-footer__preview { flex: 1 1 280px; max-width: 480px; }
.select-footer__label { margin-bottom: 6px; font-size: 14px; }
.select-footer__actions { display: flex; gap: 8px; }

/* Difficulty picker: one row of buttons, the chosen one filled. */
.segmented {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.segmented button {
    min-width: 72px;
    padding: 9px 14px;
    color: inherit;
    font: inherit;
    font-size: 14px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--border);
    cursor: pointer;
}

.segmented button:first-child { border-left: 0; }
.segmented button:hover { background: rgba(255, 255, 255, 0.06); }
.segmented button.active { color: #000; font-weight: bold; background: var(--accent); }
.segmented button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.portrait {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    border: 2px solid rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.troop-bars {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.troop-bars li {
    display: grid;
    grid-template-columns: 84px 1fr 40px;
    gap: 8px;
    align-items: center;
    padding: 2px 0;
}

.troop-bars__name { display: flex; gap: 6px; align-items: center; }
.troop-bars__count { text-align: right; font-variant-numeric: tabular-nums; }

.troop-bars__bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.troop-bars__bar span { display: block; height: 100%; }

.swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* ---------- HUD ---------- */

.hud {
    /* Sizes of the corner layout (ui/hud/Hud.tsx): phones by default, larger on a desktop window. */
    --pad: 6px;                 /* from the safe area's edge */
    --gap: 5px;                 /* between panels in a corner */
    --minimap: 100px;
    --btn: 34px;                /* round buttons (hit area 44px) */
    --card-w: 168px;
    --popover-w: 250px;
    --side-w: 180px;            /* room the top centre leaves each side corner */
    position: absolute;
    inset: 0;
    pointer-events: none;   /* map stays interactive; panels opt back in */
    font-size: 12px;
}

.hud--portrait { --minimap: 96px; --side-w: 52px; }

@media (min-width: 1000px) and (min-height: 620px) {
    .hud { --pad: 10px; --gap: 8px; --minimap: 168px; --btn: 38px; --card-w: 200px; --popover-w: 290px; --side-w: 230px; font-size: 13px; }
}

.hud > * { pointer-events: auto; }

/* Corners and the top centre: columns of small panels, inside the safe area. The columns let taps through. */
.hud > .hud-corner,
.hud > .hud-top {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    pointer-events: none;
}
.hud-corner > *, .hud-top > * { pointer-events: auto; }
.hud-corner--tl { top: calc(var(--pad) + var(--safe-top)); left: calc(var(--pad) + var(--safe-left)); align-items: flex-start; }
.hud-corner--tr { top: calc(var(--pad) + var(--safe-top)); right: calc(var(--pad) + var(--safe-right)); align-items: flex-end; }
.hud-corner--bl { bottom: calc(var(--pad) + var(--safe-bottom)); left: calc(var(--pad) + var(--safe-left)); align-items: flex-start; }
.hud-corner--br { bottom: calc(var(--pad) + var(--safe-bottom)); right: calc(var(--pad) + var(--safe-right)); align-items: flex-end; }
.hud-top {
    top: calc(var(--pad) + var(--safe-top));
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    width: max-content;
    max-width: calc(100% - 2 * (var(--side-w) + var(--pad) + var(--gap)) - var(--safe-left) - var(--safe-right));
}

/* A panel's look: dark, a little see-through, rounded. */
.hud-surface,
.hud-clock-line, .castle-hold, .player-card, .lord-list__rows, .news-feed__lines, .hud-btn__face, .spectate-bar, .hud-popover {
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Buttons that are small to look at, with a 44px hit area around them. */
.hud button { font: inherit; color: inherit; }
.hud-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}
.hud-btn__face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--btn);
    height: var(--btn);
    font-size: 15px;
    border-radius: 50%;
}
.hud-btn--text .hud-btn__face { width: auto; height: 22px; padding: 0 8px; font-size: 11px; border-radius: 11px; }
.hud-btn.active .hud-btn__face { color: #000; background: var(--accent); }
.hud-btn:focus-visible .hud-btn__face { outline: 2px solid var(--accent); }

/* Top centre: clock, phase, what comes next — one line. */
.hud-clock-line {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 2px 10px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.hud-clock { font-size: 15px; font-weight: bold; }
.hud-clock-line__phase { color: var(--muted); }
.hud-clock-line__next { display: inline-flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.hud-clock-line__next b { color: var(--text); font-weight: bold; }
.hud-clock-line__next--warn b { color: #ffc46b; }
.hud-clock-line__next--alert { color: #ff8a7a; font-weight: bold; }

/* The player's card: avatar in the player's colour, troops of capacity, what the army does, skill. */
.player-card {
    display: flex;
    align-items: center;
    gap: 7px;
    width: var(--card-w);
    min-height: 44px;
    padding: 3px 8px 3px 4px;
    text-align: left;
    border-radius: 24px;
    cursor: pointer;
}
.player-card--open, .player-card--selected { border-color: var(--player); }
.player-card__avatar { display: flex; flex-shrink: 0; padding: 2px; border-radius: 50%; background: var(--player); }
.player-card__avatar .portrait { border: 2px solid rgba(0, 0, 0, 0.55); }
.player-card__main { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.player-card__line { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; white-space: nowrap; }
.player-card__name { overflow: hidden; text-overflow: ellipsis; font-weight: bold; }
.player-card__status { color: var(--muted); font-size: 11px; }
.player-card__status--alert { color: #ff8a7a; font-weight: bold; font-variant-numeric: tabular-nums; }
.player-card__troops { font-variant-numeric: tabular-nums; }
.player-card__troops b { font-size: 13px; }
.player-card__fill { flex: 1; max-width: 48px; height: 4px; overflow: hidden; background: rgba(255, 255, 255, 0.14); border-radius: 2px; }
.player-card__fill > span { display: block; height: 100%; background: var(--accent); transition: width 0.3s ease; }
.player-card__fill--full > span { background: #f1c40f; }
.player-card__altars { font-size: 11px; font-weight: bold; color: #d9cfb6; font-variant-numeric: tabular-nums; }
.player-card .army-panel__skill-slot { width: 24px; height: 24px; }

/* Lords, top right: dot, name, ring icon, POIs. Folded to dots in portrait. */
.lord-list { display: flex; justify-content: flex-end; min-width: 44px; min-height: 44px; padding: 0; background: transparent; border: none; cursor: pointer; }
.lord-list__rows { display: flex; flex-direction: column; gap: 1px; padding: 3px 7px; }
.lord-list__row { display: flex; align-items: center; gap: 5px; height: 15px; font-size: 11px; white-space: nowrap; }
.lord-list__row--you { font-weight: bold; }
.lord-list__dot { width: 9px; height: 9px; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 50%; }
.lord-list__name { max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
.lord-list__name--away { opacity: 0.55; font-style: italic; }
.lord-list__ring { flex-shrink: 0; color: var(--muted); margin-left: auto; }
.lord-list__ring-name { color: var(--muted); }
.lord-list__pois { min-width: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.lord-list--dots .lord-list__rows { padding: 4px 6px; }
.lord-list--dots .lord-list__pois { min-width: 0; font-size: 10px; color: var(--muted); }
.lord-list--open .lord-list__rows { padding: 5px 9px; background: var(--panel-solid); }
.lord-list--open .lord-list__row { height: 22px; font-size: 12px; }
.lord-list--open .lord-list__name { max-width: none; }

/* Dev: a small button under the lords; its menu opens below it. */
.dev-button { position: relative; display: flex; flex-direction: column; align-items: flex-end; }
.dev-button .hud-btn { margin-top: -6px; }
.dev-menu { position: absolute; top: 100%; right: 0; z-index: 3; width: max-content; }
.dev-menu__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.dev-menu__row + .dev-menu__row { margin-top: 6px; }

/* Small toggle chips (dev menu, spectating). */
.chip { min-height: 28px; padding: 2px 9px; font-size: 11px; background: transparent; border: 1px solid var(--border); border-radius: 14px; cursor: pointer; }
.chip.active { color: #000; background: var(--accent); border-color: var(--accent); }
.speed-buttons { display: inline-flex; gap: 4px; }
.spectate-bar { display: flex; align-items: center; gap: 6px; padding: 2px 6px 2px 10px; }

/* Bottom right: the main buttons beside the mini map (the renderer draws the map into the slot). */
.hud-actions { display: flex; align-items: flex-end; gap: 2px; pointer-events: none; }
.hud-actions__buttons { display: flex; flex-direction: column; pointer-events: auto; }
.hud-minimap-slot { width: var(--minimap); height: var(--minimap); border-radius: 4px; pointer-events: none; }

/* Popovers: the army panel (under the card in landscape, above it in portrait), garrisons, barracks, dev menu. */
.hud-popover {
    padding: 8px 10px;
    background: var(--panel-solid);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.hud-corner--tl .army-popover, .hud-corner--tl .npc-panel {
    /* Under the card, and under the top centre's column where they meet (--top-bottom, set by Hud.tsx). */
    --below: max(100%, var(--top-bottom, 0px) - var(--pad) - var(--safe-top));
    position: absolute;
    top: calc(var(--below) + var(--gap));
    left: 0;
    width: var(--popover-w);
    /* Down to above the news line at the bottom. */
    max-height: calc(100dvh - var(--below) - var(--safe-top) - var(--safe-bottom) - 2 * var(--pad) - 3 * var(--gap) - 44px);
    transition: top 0.15s ease, max-height 0.15s ease;
}
.hud-corner--bl .army-popover, .hud-corner--bl .npc-panel {
    position: absolute;
    left: 0;
    /* Above the mini map's corner, the width of the screen. */
    bottom: calc(var(--minimap) + var(--gap));
    width: calc(100vw - 2 * var(--pad) - var(--safe-left) - var(--safe-right));
    max-height: 34dvh;
}

.bonus-bar__icons { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.bonus-bar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}
.bonus-bar__icon svg { padding: 4px; box-sizing: content-box; border: 1px solid var(--border); border-radius: 5px; }
.bonus-bar__icon.active svg { border-color: var(--accent); }
.bonus-bar__icon--walls svg { box-shadow: 0 0 0 2px var(--accent); }
.bonus-bar__tip { margin-top: 2px; padding: 4px 8px; font-size: 11px; background: rgba(255, 255, 255, 0.06); border-radius: 6px; }
.bonus-bar__tip-name { font-weight: bold; }

.healing-tag { color: #2ecc71; font-weight: bold; }
.sending-tag { color: #f1c40f; }



.army-panel__head {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.army-panel__name { font-weight: bold; font-size: 15px; }

.army-panel__stats {
    margin: 8px 0 0;
}

.army-panel__stats div {
    display: flex;
    justify-content: space-between;
    padding: 1px 0;
}

.army-panel__stats dt { color: var(--muted); }
.army-panel__stats dd { margin: 0; font-variant-numeric: tabular-nums; }

.leadership-bar { margin-top: 6px; }

.leadership-bar__label {
    display: flex;
    justify-content: space-between;
    font-variant-numeric: tabular-nums;
}

.leadership-bar__track {
    height: 6px;
    margin-top: 3px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    overflow: hidden;
}

.leadership-bar__track span {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width 0.3s ease;
}

.leadership-bar--full .leadership-bar__track span { background: #f1c40f; }

.army-panel__skill {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.army-panel__skill-slot {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 2px dashed var(--border);
    border-radius: 50%;
}

/* ---------- combat ---------- */

.army-panel__respawn {
    margin-bottom: 6px;
    color: #ff8a7a;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

.battle-bars {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.battle-bars__title {
    margin-bottom: 4px;
    color: #ff8a7a;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
}

.battle-bars__row + .battle-bars__row { margin-top: 4px; }

.battle-bars__label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.battle-bars__label span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.battle-bars__track {
    height: 7px;
    margin-top: 2px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    overflow: hidden;
}

.battle-bars__track span {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width 0.25s ease;
}

.battle-bars__row--enemy .battle-bars__track span { background: #e74c3c; }

.battle-bars__swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 50%;
    vertical-align: middle;
}

.battle-bars__note { font-style: normal; opacity: 0.7; }

.battle-bars__more { margin-top: 2px; opacity: 0.7; font-size: 11px; }

/* Cooldown ring: conic fill from 12 o'clock; --fill set inline. */
.skill-ring {
    border: none;
    background:
        radial-gradient(circle, var(--panel-solid) 58%, transparent 60%),
        conic-gradient(var(--accent) var(--fill, 0deg), rgba(255, 255, 255, 0.12) 0);
}

.skill-ring--ready {
    background:
        radial-gradient(circle, var(--panel-solid) 58%, transparent 60%),
        conic-gradient(#f1c40f 360deg, #f1c40f 0);
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.6);
}

.npc-panel__head {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.npc-panel__head .army-panel__name { flex: 1; }

.npc-panel__ring {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 3px solid #e74c3c;
    border-radius: 50%;
}

.npc-panel__close {
    width: 28px;
    height: 28px;
    padding: 0;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
}

.npc-panel__hints {
    margin: 8px 0 0;
    padding: 8px 0 0;
    list-style: none;
    border-top: 1px solid var(--border);
}

.npc-panel__hints li { padding: 1px 0 1px 14px; position: relative; }
.npc-panel__hints li::before { position: absolute; left: 0; }
.npc-panel__hints li.good { color: #7ee2a8; }
.npc-panel__hints li.good::before { content: '▲'; font-size: 9px; top: 4px; }
.npc-panel__hints li.bad { color: #ff9a8a; }
.npc-panel__hints li.bad::before { content: '▼'; font-size: 9px; top: 4px; }

.npc-panel__tip { margin-top: 6px; }




@media (max-width: 700px) {
    .troop-bars li { padding: 1px 0; }
    .card-grid { grid-template-columns: 1fr; }
}

/* ---------- rivals and the win condition ---------- */


/* The announcement strip under the clock: one thin, see-through line at a time; a tap opens the news. */
.strip { display: flex; align-items: center; justify-content: center; max-width: 100%; min-height: 44px; margin: -11px 0; padding: 0; background: transparent; border: none; cursor: pointer; animation: strip-in 0.25s ease-out; }
/* In landscape the player's card and the ultimate button sit beside each other top left, wider than --side-w: a long
   line (a structure's gains) stays clear of them (and, symmetric, of the lords' list). */
.hud:not(.hud--portrait) .strip { max-width: calc(100vw - 2 * (var(--pad) + var(--card-w) + 2 * var(--gap) + 64px) - var(--safe-left) - var(--safe-right)); }
.strip__face {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    height: 22px;
    padding: 0 12px;
    font-size: 12px;
    white-space: nowrap;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.strip__text { overflow: hidden; text-overflow: ellipsis; }
.strip__icon { flex-shrink: 0; color: var(--muted); }
.strip__dot { width: 8px; height: 8px; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 50%; }
.strip--good .strip__icon { color: #7ee2a8; }
.strip--bad .strip__icon { color: #ff8a7a; }
.strip--bad .strip__face { border-color: rgba(231, 76, 60, 0.6); }
.strip--warn .strip__icon { color: #ffb05c; }
.strip--alert .strip__icon, .strip--alert .strip__text { color: #ffb3a7; }
.strip--gold .strip__icon { color: #f5cd4f; }
/* Important: a coloured band and bold text. */
.strip--important .strip__face { font-weight: bold; }
.strip--important.strip--warn .strip__face { background: rgba(120, 52, 8, 0.72); border-color: rgba(255, 150, 60, 0.75); }
.strip--important.strip--alert .strip__face { background: rgba(110, 18, 12, 0.75); border-color: rgba(255, 90, 70, 0.8); }
.strip--important.strip--gold .strip__face { background: rgba(92, 70, 8, 0.72); border-color: rgba(245, 205, 79, 0.8); }
.strip--important.strip--gold .strip__text { color: #ffe9a3; }
@keyframes strip-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .strip { animation: none; } }

/* Under the clock line while someone holds the citadel: a thin bar in the holder's colour. */
.castle-hold {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 1px 8px;
    font-size: 11px;
    white-space: nowrap;
    border-color: var(--holder, var(--accent));
}
.castle-hold__icon { flex-shrink: 0; color: var(--holder, var(--accent)); }
.castle-hold__who { overflow: hidden; text-overflow: ellipsis; font-weight: bold; }
.castle-hold__track { width: 64px; flex-shrink: 0; height: 5px; overflow: hidden; background: rgba(255, 255, 255, 0.14); border-radius: 3px; }
.castle-hold__fill { display: block; height: 100%; background: var(--holder, var(--accent)); transition: width 0.2s linear; }
.castle-hold--paused .castle-hold__fill { opacity: 0.5; }
.castle-hold__count { font-variant-numeric: tabular-nums; }
.castle-hold__paused { color: #ffb3a7; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
/* The citadel's walls when they fade during a hold (mode winCondition.wallFade). */
.castle-hold__walls { font-variant-numeric: tabular-nums; }
.castle-hold__walls--high { color: #d6e4f0; }
.castle-hold__walls--mid { color: #ffd479; }
.castle-hold__walls--low { color: #ff8a7a; }


.match-end {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.55);
}

.match-end__card {
    width: min(360px, 100%);
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 24px 24px;
    text-align: center;
    background: var(--panel-solid);
    border: 1px solid var(--border);
    border-top: 6px solid var(--accent);
    border-radius: var(--radius);
}

.match-end__card--won { border-top-color: #2ecc71; }
.match-end__card--lost { border-top-color: #e74c3c; }

.match-end__title { margin: 0; font-size: 34px; }
.match-end__card--won .match-end__title { color: #7ee2a8; }
.match-end__card--lost .match-end__title { color: #ff8a7a; }
.match-end__how { margin-top: 4px; color: var(--muted); }

.match-end__stats { margin: 16px 0 20px; text-align: left; }
.match-end__stats div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.match-end__stats dt { color: var(--muted); }
.match-end__stats dd { margin: 0; font-weight: bold; }

/* ---------- pause, surrender, blocked path ---------- */

.pause-menu__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.blocked-banner {
    width: min(340px, calc(100vw - 32px));
    padding: 8px 12px;
    background: var(--panel-solid);
    border: 1px solid #e74c3c;
    border-radius: var(--radius);
    text-align: center;
}
.blocked-banner__title { font-size: 15px; font-weight: bold; color: #ff8a7a; }
.blocked-banner__body { margin-top: 4px; color: var(--muted); }
.blocked-banner__actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.blocked-banner__actions .btn { padding: 6px 14px; font-size: 13px; }

/* ---------- Region events, barracks, pure army ---------- */



/* A row of small toggle buttons (one active). */
.segmented {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.segmented button {
    flex: 1;
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 3px 6px;
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}

.segmented button.active { color: #fff; border-color: var(--accent); background: rgba(14, 195, 201, 0.18); }
.segmented button:disabled { opacity: 0.4; cursor: default; }

.unit-swatch {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 2px;
}

.barracks-panel .leadership-bar { margin-top: 8px; }

.specialty {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.specialty__ratio .leadership-bar__track { position: relative; overflow: visible; }
.specialty__ratio .leadership-bar__track span { border-radius: 3px; }
.specialty__track--on { box-shadow: 0 0 6px rgba(241, 196, 15, 0.7); }

/* Where the pure-army passive starts. */
.specialty__mark {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 12px;
    background: #f1c40f;
}

.specialty__bonus { margin-top: 4px; font-size: 12px; }
.specialty__bonus--on { color: #f1c40f; font-weight: bold; }

.specialty__row,
.specialty__release { margin-top: 8px; }

/* The canvas is drawn at RENDER_SCALE x the container's size (game/renderScale.ts) and shown at the container's size. */
#game-container canvas:not(.minimap-3d) {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Shown while the WebGL context is lost (PhaserGame.tsx); a tap brings the graphics back. */
.graphics-lost {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: inherit;
    background: rgba(11, 14, 18, 0.92);
    border: none;
    cursor: pointer;
}

.graphics-lost__title {
    font-size: 24px;
    font-weight: bold;
}

.graphics-lost__body {
    font-size: 16px;
    opacity: 0.8;
}

/* The army panel's inside: sections split by a hairline, rows of label and value. */
.army-popover { font-size: 12px; }
.army-popover__head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.army-popover__section + .army-popover__section, .army-popover .kit, .army-popover .battle-bars + .army-popover__section { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.army-popover .battle-bars { margin-bottom: 0; }
.army-popover__row { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.army-popover .num { font-variant-numeric: tabular-nums; }
.army-popover .troop-bars { margin: 4px 0; font-size: 12px; }
.army-popover .troop-bars li { grid-template-columns: 74px 1fr 36px; gap: 6px; padding: 1px 0; }
.army-popover .leadership-bar { margin-top: 2px; }
.army-popover .leadership-bar__label { display: none; }
.army-popover__skill { display: flex; align-items: center; gap: 8px; }
.army-popover__skill .army-panel__skill-slot { width: 28px; height: 28px; }
.army-popover__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin: -6px 0; padding: 0; text-align: left; background: transparent; border: none; cursor: pointer; }
.army-popover .kit__summary { min-height: 44px; }
.army-popover .segmented button { min-height: 44px; }
.army-popover .specialty { margin-top: 0; padding-top: 0; border-top: none; }

/* News feed, bottom left: folded to its latest line (dimmed once old); a tap opens the last lines. */
.news-feed {
    display: flex;
    align-items: flex-end;
    min-height: 44px;
    max-width: min(300px, 44vw);
    padding: 0;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
}
.hud--portrait .news-feed { max-width: calc(100vw - 2 * var(--pad) - var(--minimap) - 44px - 2 * var(--gap) - var(--safe-left) - var(--safe-right)); }
.news-feed__lines { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; margin: 0; padding: 2px 0; list-style: none; font-size: 11px; transition: opacity 0.6s ease; animation: feed-line 0.3s ease; }
.news-feed--stale .news-feed__lines { opacity: 0.7; }
.news-feed__line { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 1px 8px 1px 6px; border-left: 3px solid transparent; }
.news-feed__line--good { border-left-color: #2ecc71; }
.news-feed__line--bad { border-left-color: #e74c3c; }
.news-feed__dot { width: 8px; height: 8px; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 50%; }
.news-feed__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-feed--open { max-width: min(380px, calc(100vw - 2 * var(--pad) - var(--safe-left) - var(--safe-right))); }
.news-feed--open .news-feed__lines { max-height: 34dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--panel-solid); padding: 4px 0; }
/* Portrait: at most a quarter of the screen's height, scrolling inside. */
.hud--portrait .news-feed--open .news-feed__lines { max-height: 25dvh; }
.news-feed--open .news-feed__text { white-space: normal; }

@keyframes feed-line {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: none; }
}

/* Account and server status (main menu), the server's verdict (end screens) */
.account-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    min-height: 32px;
    color: var(--text);
    font-size: 14px;
}
.account-bar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.account-bar--online .account-bar__dot { background: #2ecc71; }
.account-bar--offline .account-bar__dot { background: #f39c12; }
.account-bar--offline { color: #f5c26b; }
.account-bar__name { font-weight: bold; }
.account-bar__muted { color: var(--muted); }
.account-bar__form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.account-bar__form input {
    width: 160px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel-solid);
    color: var(--text);
    font: inherit;
}
.account-bar__error { width: 100%; color: #e74c3c; font-size: 13px; }
.pending-records {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    color: #f5c26b;
    font-size: 13px;
}
.pending-records__dot { width: 8px; height: 8px; border-radius: 50%; background: #f39c12; animation: pending-pulse 1.6s ease-in-out infinite; }
@keyframes pending-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .pending-records__dot { animation: none; } }

.verification { margin: 8px 0 16px; font-size: 14px; color: var(--muted); }
.verification--ok { color: #2ecc71; }
.verification--warn { color: #f5c26b; }
.verification--bad { color: #e74c3c; }
.btn--small { padding: 4px 10px; font-size: 13px; }

/* Dev loadout picker (?dev=1) on the commander screen */
.dev-loadout { flex-basis: 100%; border: 1px dashed #c9a227; border-radius: 6px; padding: 8px 10px; }
.dev-loadout__row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin-top: 4px; }
.dev-loadout__row label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.dev-loadout__row select { max-width: 220px; }
.dev-loadout__problems { color: #e06c6c; font-size: 12px; margin-top: 4px; }

/* ---------- progression pages (collection, chests, profile, loadout) ---------- */
/* Phone first: one column at 375px, nothing wider than the screen, every control at least 44px tall. */

.page { display: flex; flex-direction: column; gap: 12px; padding-bottom: calc(24px + var(--safe-bottom)); }
.page > * { flex-shrink: 0; width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; }
.page .btn, .page select, .page .segmented button, .title-menu .btn { min-height: 44px; }
/* Safari draws its own buttons and selects unless told not to (then min-height and colours apply). */
.segmented button, .page select { -webkit-appearance: none; appearance: none; }
.page select {
    max-width: 100%;
    padding: 8px 32px 8px 10px;
    color: var(--text);
    font: inherit;
    font-size: 16px;   /* 16px or more: iOS does not zoom in on focus */
    background-color: var(--panel-solid);
    /* The caret (the native one is gone with appearance: none). */
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.page h3 { margin: 8px 0; font-size: 16px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.page-head__title { flex: 1; margin: 0; font-size: 22px; }
.page-tabs button { min-width: 0; font-size: 15px; }

.title-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.title-menu .badge { margin-left: 6px; }
.badge {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    background: var(--accent);
    border-radius: 10px;
}

.notice { padding: 10px 12px; font-size: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-solid); }
.notice--ok { border-color: #2ecc71; color: #9ff0c1; }
.notice--bad { border-color: #e74c3c; color: #ffb0a4; }
.notice--warn { border-color: #f39c12; color: #f5c26b; }
.notice__detail { margin-top: 4px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 10px;
}
.collection-card { cursor: default; gap: 8px; min-width: 0; }
.collection-card--locked > :not(.btn) { opacity: 0.6; }
.collection-card--locked .portrait { filter: grayscale(1); }
.collection-card__who { min-width: 0; }
.collection-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; }
.collection-card__specialty { padding-top: 6px; border-top: 1px dashed var(--border); }
.collection-section { min-width: 0; }

.rarity {
    display: inline-block;
    padding: 0 6px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid;
    border-radius: 4px;
}
.stars { letter-spacing: 1px; }
.stars__on { color: #f1c40f; }
.stars__off { color: rgba(255, 255, 255, 0.2); }

.progress__label { font-size: 13px; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.progress__track { height: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
.progress__track span { display: block; height: 100%; background: var(--accent); }
.progress--full .progress__track span { background: #2ecc71; }

.effects { margin: 0; padding: 0 0 0 16px; font-size: 13px; line-height: 1.45; }
.effects--small { font-size: 12px; color: var(--muted); }
.tag--speed { margin-left: 6px; color: #f5c26b; border-color: #f5c26b; }

.star-rewards summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14px; color: var(--accent); }
.star-rewards ol { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.star-rewards li { padding: 4px 0; border-top: 1px solid var(--border); }
.star-rewards__reached { color: #9ff0c1; }

.wildcards { display: flex; flex-direction: column; gap: 12px; }
.wildcard-balances { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; font-size: 16px; }
.wildcard-convert { cursor: default; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.field select { width: 100%; }
.stepper { display: flex; align-items: center; gap: 8px; color: var(--text); }
.stepper output { min-width: 40px; font-size: 18px; font-weight: bold; text-align: center; font-variant-numeric: tabular-nums; }
.stepper .btn { min-width: 44px; padding: 8px 12px; }
.wildcard-convert__preview { font-size: 15px; }

.table-scroll { max-width: 100%; overflow-x: auto; }
.rates { border-collapse: collapse; font-size: 13px; }
.rates th, .rates td { padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rates tbody th { text-align: left; font-weight: normal; color: var(--muted); white-space: normal; }

/* Chests: list, opening (placeholder art: a coloured box that shakes, then the drops one by one), odds */
.chest-card { flex-direction: row; align-items: center; cursor: default; border-left: 6px solid; }
.chest-card__icon { flex-shrink: 0; width: 40px; height: 32px; border-radius: 6px; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.25); }
.chest-card__text { flex: 1; min-width: 0; }
.pity { display: flex; flex-direction: column; gap: 8px; }
.opened-chests { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.opened-chests li { padding: 6px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }

.chest-reveal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));
    background: rgba(0, 0, 0, 0.7);
}
.chest-reveal__card {
    width: 100%;
    max-width: 420px;
    max-height: 100%;
    overflow-y: auto;
    padding: 20px;
    text-align: center;
    background: var(--panel-solid);
    border-radius: var(--radius);
}
.chest-reveal__card h2 { margin: 8px 0; }
.chest-reveal__box { width: 88px; height: 64px; margin: 0 auto; border-radius: 10px; box-shadow: inset 0 -14px 0 rgba(0, 0, 0, 0.25); animation: chest-shake 0.5s ease-in-out infinite; }
.chest-reveal__box--open { animation: chest-pop 0.5s ease-out forwards; }
.chest-reveal__drops { margin: 12px 0 16px; padding: 0; list-style: none; text-align: left; }
.chest-reveal__drop { padding: 8px 0; border-bottom: 1px solid var(--border); opacity: 0; animation: drop-in 0.35s ease-out forwards; }
.chest-reveal__note { color: #9ff0c1; margin-top: 2px; }
@keyframes chest-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes chest-pop { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .chest-reveal__box, .chest-reveal__box--open { animation: none; }
    .chest-reveal__drop { animation: none; opacity: 1; }
}

.odds-tier { cursor: default; border-left: 6px solid; }
.odds-tier h3 { margin-top: 0; }
.odds-line + .odds-line { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.odds-rarities { margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; }
.odds-rarities > li { padding: 3px 0; }
.odds-rarities details summary { min-height: 44px; display: inline-flex; align-items: center; color: var(--accent); cursor: pointer; font-size: 13px; }
.odds-rarities details ul { margin: 0 0 4px; padding-left: 18px; }

/* Pre-match loadout: owned commanders, the ultimate, one item per slot, what the pick gives */
.loadout-commanders { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.loadout-commander { flex-direction: row; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; }
.loadout-commander:disabled { cursor: not-allowed; }
.loadout-commander__text { display: flex; flex-direction: column; min-width: 0; }
.loadout-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 10px; }
.loadout-panel { cursor: default; gap: 8px; min-width: 0; }
.loadout-panel h3 { margin: 6px 0 0; }
.loadout-ultimates { display: flex; flex-direction: column; gap: 6px; }
.loadout-option {
    display: block;
    min-height: 44px;
    padding: 8px 10px;
    color: inherit;
    font: inherit;
    font-size: 14px;
    text-align: left;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}
.loadout-option .tag { margin-left: 6px; }
.loadout-option__desc { display: block; margin-top: 2px; }
.loadout-option--on { border-color: var(--accent); background: rgba(14, 195, 201, 0.12); }
.loadout-option:disabled { opacity: 0.5; cursor: not-allowed; }
.loadout-bonuses__match { color: #9ff0c1; }
.loadout-footer { z-index: 2; align-items: center; }
.loadout-footer .select-footer__difficulty { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.loadout-footer .select-footer__label { margin: 0; }
.loadout-footer .segmented { margin: 0; }
/* The sticky bar sits on the very bottom edge (it carries the safe area itself). */
.loadout-screen { padding-bottom: 0; }
@media (max-width: 700px) {
    .loadout-footer { flex-wrap: nowrap; gap: 8px; }
    .loadout-footer .select-footer__label { display: none; }
    .loadout-footer .select-footer__difficulty { flex: 1 1 auto; min-width: 0; }
    .loadout-footer .segmented { display: flex; width: 100%; }
    .loadout-footer .segmented button { flex: 1 1 0; min-width: 0; padding: 6px 4px; font-size: 14px; }
    .loadout-commanders { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
    .loadout-commander { gap: 6px; padding: 6px 8px; }
    .loadout-commander .portrait { width: 32px !important; height: 32px !important; font-size: 15px !important; }
    .loadout-commander .card__name { font-size: 15px; }
    .loadout-footer .select-footer__actions .btn { padding: 10px 14px; }
}

/* The player's kit in the army panel / phone sheet: items, ultimate, bonuses on a tap */
.kit { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; }
.kit__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 8px;
    width: 100%;
    min-height: 40px;
    padding: 4px 0;
    color: inherit;
    font: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.kit__chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.kit__chip { padding: 2px 6px; font-size: 11px; border: 1px solid var(--border); border-radius: 4px; }
.kit__chip--ultimate { border-color: var(--accent); color: var(--accent); }
.kit__toggle { font-size: 12px; color: var(--accent); white-space: nowrap; }
.kit__detail { padding: 4px 0 2px; }
.kit__match { color: #9ff0c1; }

/* End of a match: place, the server's verdict and why, chests, rating */
.match-report { margin: 12px 0 16px; text-align: left; font-size: 14px; }
.match-report .verification { margin: 6px 0 2px; }
.match-report__place { font-size: 16px; }
.match-report__detail { margin: 2px 0 8px; font-size: 13px; line-height: 1.4; }
.match-report__detail--warn { color: #f5c26b; }
.match-report__detail--bad { color: #ffb0a4; }
.match-report__detail--muted { color: var(--muted); }
.match-report__rewards { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.match-report__rewards .btn { min-height: 44px; }
.match-report__chests { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.match-report__chests li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.match-report__chest { display: inline-block; width: 18px; height: 14px; border-radius: 3px; }
.match-report__no-chest { margin: 0; color: #f5c26b; }
.match-report__rewards p { margin: 0; }
.match-report__up { color: #7ee2a8; }
.match-report__down { color: #ff8a7a; }

/* Profile */
.rating-card { cursor: default; gap: 2px; }
.rating-card__value { font-size: 32px; font-weight: bold; font-variant-numeric: tabular-nums; }
.recent-matches { margin: 0; padding: 0; list-style: none; }
.recent-matches li { padding: 8px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.recent-matches__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.recent-matches__rewards { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; }
.recent-matches .tag { margin-left: 6px; }
.title-screen .title-offline { max-width: 420px; margin: 0; color: #f5c26b; }

/* Account settings: recovery code, signing in with a code (phone first: one column, controls at least 44px) */
.account-section p { margin: 4px 0 8px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.account-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.account-form label { width: 100%; }
.account-input {
    flex: 1 1 220px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    color: var(--text);
    font: inherit;
    font-size: 16px;   /* iOS does not zoom in on focus */
    font-family: ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--panel-solid);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.account-input::placeholder { text-transform: none; color: var(--muted); letter-spacing: 0; }
.account-confirm { padding: 10px 12px; border: 1px solid #f39c12; border-radius: var(--radius); }
.account-choice { margin: 6px 0 0; padding-left: 18px; }
.recovery-code { padding: 12px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--panel-solid); }
.recovery-code__value {
    display: block;
    margin: 8px 0;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 20px;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
    user-select: all;
}
.signed-out { max-width: 520px; text-align: left; }
.signed-out__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.signed-out .btn, .protect-reminder .btn { min-height: 44px; }
.protect-reminder { display: flex; flex-direction: column; gap: 4px; max-width: 520px; margin: 8px auto 0; text-align: left; }
.title-screen .protect-reminder { width: 100%; }
.transfer-code { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--panel-solid); }
.transfer-code__value { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 28px; letter-spacing: 3px; }
.qr-code { display: block; max-width: 100%; height: auto; border-radius: 4px; }
.account-choose { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #f39c12; border-radius: var(--radius); background: var(--panel-solid); }
.account-choose h3 { margin: 0; }
.account-choose__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.account-card { cursor: default; min-width: 0; }
.account-choose__warning { color: #f5c26b; }
.device-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.device-list__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.device-list__item[data-current] { border-color: var(--accent); }
.device-list__who { min-width: 0; flex: 1 1 200px; }
.device-list__who .tag { margin-left: 6px; }

/* The loadout's last save: a small mark next to the commander */
.save-mark { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.save-mark--saved { color: #2ecc71; }
.save-mark--failed { color: #ffb0a4; }
.save-mark .btn { min-height: 44px; }

/* ?debug=perf: measuring on a device (ui/hud/DebugPerf.tsx): a small chip under Dev, its details below it. */
.perf-chip { position: relative; display: flex; flex-direction: column; align-items: flex-end; }
.perf-chip .hud-btn { margin-top: -6px; }
.perf-chip__face { color: #d8f5c8; font: 11px ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.debug-perf {
    position: absolute;
    top: calc(100% - 4px);
    right: 0;
    z-index: 3;
    max-width: calc(100vw - 2 * var(--pad) - var(--safe-left) - var(--safe-right));
    overflow-y: auto;
    padding: 4px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: #d8f5c8;
    font: 10px/1.35 ui-monospace, Menlo, monospace;
    white-space: nowrap;
    overscroll-behavior: contain;
}

/* Loading a match (ui/screens/LoadingScreen.tsx): over the map and HUD until everything is in and drawn. */
.loading-screen {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(24px + var(--safe-top)) calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(24px + var(--safe-left));
    background:
        radial-gradient(ellipse at 50% 38%, rgba(14, 195, 201, 0.10), transparent 60%),
        linear-gradient(180deg, #151b22 0%, #0d1116 100%);
    transition: opacity 0.35s ease;
}
.loading-screen--done { opacity: 0; pointer-events: none; }
.loading-screen__inner { width: min(360px, 100%); text-align: center; }
.loading-screen__title { font-size: 30px; font-weight: bold; letter-spacing: 0.12em; text-transform: uppercase; }
.loading-screen__sub { margin-top: 6px; color: var(--muted); font-size: 14px; }
.loading-screen__bar { height: 6px; margin-top: 28px; overflow: hidden; background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
.loading-screen__bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.15s linear; }
.loading-screen__stage { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.loading-screen__percent { color: var(--text); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .loading-screen, .loading-screen__bar > span { transition: none; } }

/* Multiplayer: the round trip to the server, small, under the lords (NetChip). */
.net-chip { align-self: flex-end; margin-top: 4px; padding: 1px 7px; border-radius: 9px; font-size: 11px; line-height: 16px; pointer-events: none;
    background: rgba(12, 16, 24, 0.72); color: #cfd6df; font-variant-numeric: tabular-nums; }
.net-chip--good::before, .net-chip--fair::before, .net-chip--poor::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.net-chip--good::before { background: #2ecc71; }
.net-chip--fair::before { background: #f1c40f; }
.net-chip--poor::before { background: #e74c3c; }
.net-chip--down { color: #fff; background: rgba(192, 57, 43, 0.85); font-weight: bold; }

/* Multiplayer: the menu, the lobby (MultiplayerScreen, LobbyScreen), everyone's loading. */
.title-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mp-option { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.mp-code { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.mp-code input { font-size: 20px; letter-spacing: 0.15em; text-transform: uppercase; width: 9em; min-height: 44px; }
.card.lobby-share { display: flex; flex-direction: row; gap: 14px; align-items: center; }
.lobby-share .qr-code { flex: none; border-radius: 6px; }
.lobby-share__code { font-size: 30px; font-weight: bold; letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.lobby-modes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lobby-seats { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lobby-seat { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); min-height: 44px; }
.lobby-seat--open, .lobby-seat--ai { opacity: 0.7; }
.lobby-seat__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.lobby-seat__who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lobby-seat__who .tag { margin-left: 6px; }
.lobby-seat__ready { color: #2ecc71; font-weight: bold; }
.lobby-status { text-align: center; font-weight: bold; margin: 4px 0; }
.lobby-footer { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.lobby-footer .btn { min-height: 44px; }
.loading-screen__players { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.loading-screen__players li { display: flex; justify-content: space-between; gap: 16px; }

/* The player's card and the ultimate button beside it (landscape: to its right; portrait: over its right end). */
.player-row { display: flex; align-items: center; gap: var(--gap); pointer-events: none; }
.player-row > * { pointer-events: auto; }
.player-row--portrait { flex-direction: column-reverse; align-items: flex-end; }
.player-row--portrait .player-card { align-self: flex-start; }

/* The ultimate: a big round button; the ring fills while it charges, glows when due. Kind colours: burst gold,
   endurance blue, control violet. */
.ultimate-btn {
    --size: 56px;
    --kind: #f1c40f;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--size);
    height: var(--size);
    padding: 0;
    color: var(--text);
    background: var(--panel-solid);
    border: none;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
@media (min-width: 1000px) and (min-height: 620px) { .ultimate-btn { --size: 64px; } }
.ultimate-btn--endurance { --kind: #5dade2; }
.ultimate-btn--control { --kind: #b388ff; }
.ultimate-btn__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--panel-solid) 64%, transparent 66%),
        conic-gradient(var(--kind) var(--fill, 0deg), rgba(255, 255, 255, 0.12) 0);
}
.ultimate-btn__glyph { position: relative; font-size: 22px; line-height: 1; filter: grayscale(0.8); opacity: 0.7; }
.ultimate-btn__label { position: relative; margin-top: 1px; font-size: 10px; font-weight: bold; color: var(--muted); font-variant-numeric: tabular-nums; }
.ultimate-btn:disabled { cursor: default; }
.ultimate-btn--idle .ultimate-btn__glyph { opacity: 0.4; }
.ultimate-btn--ready .ultimate-btn__glyph, .ultimate-btn--casting .ultimate-btn__glyph { filter: none; opacity: 1; }
.ultimate-btn--ready .ultimate-btn__label { color: var(--kind); }
.ultimate-btn--ready { animation: ultimate-glow 1.1s ease-in-out infinite alternate; }
.ultimate-btn--ready.ultimate-btn--auto { animation: none; }
.ultimate-btn--casting { box-shadow: 0 0 0 3px var(--kind), 0 0 18px var(--kind); }
.ultimate-btn--casting .ultimate-btn__label { color: var(--text); }
.ultimate-btn:not(:disabled):active { transform: scale(0.94); }
.ultimate-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes ultimate-glow {
    from { box-shadow: 0 0 0 2px var(--kind), 0 0 8px var(--kind); }
    to { box-shadow: 0 0 0 3px var(--kind), 0 0 22px var(--kind); }
}
@media (prefers-reduced-motion: reduce) { .ultimate-btn--ready { animation: none; box-shadow: 0 0 0 3px var(--kind), 0 0 14px var(--kind); } }
.reduce-motion .ultimate-btn--ready { animation: none; box-shadow: 0 0 0 3px var(--kind), 0 0 14px var(--kind); }

/* Settings: a dialog over the menu or the match. */
.settings-panel__rows { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; text-align: left; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.settings-row__text { display: flex; flex-direction: column; gap: 2px; }
.settings-row__hint { color: var(--muted); font-size: 12px; }
.settings-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); }
.settings-row input[type="range"] { width: 140px; accent-color: var(--accent); }
/* Portrait: the army and garrison panels open above the card and the ultimate button over it (and the mini map). */
.hud--portrait .hud-corner--bl .army-popover, .hud--portrait .hud-corner--bl .npc-panel {
    bottom: calc(max(var(--minimap), 44px + var(--gap) + 56px) + var(--gap));
}
/* Narrow landscape (iPhone SE): room for the clock and hold bar between the corners: the button under the card's right end. */
@media (orientation: landscape) and (max-width: 759px) {
    .hud--landscape .player-row { flex-direction: column; align-items: flex-end; }
    .hud--landscape .player-row .player-card { align-self: flex-start; }
}

/* War Drums: the clock line turns to the drums' red. */
.hud-clock-line--drums { border-color: rgba(231, 76, 60, 0.6); box-shadow: 0 0 10px rgba(231, 76, 60, 0.35); }
.hud-clock-line__drums { display: inline-flex; align-items: center; gap: 3px; color: #ff8a7a; font-weight: bold; }
.settings-panel__heading { margin: 6px 0 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.settings-panel .match-end__card { max-height: calc(100dvh - 24px); overflow-y: auto; }

/* War Drums: a dark red vignette over the map, beating slowly. Under the HUD panels, takes no taps. */
.hud > .war-drums-tone {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(120, 10, 0, 0.42) 100%);
    transition: opacity 2.5s ease;
}
.hud > .war-drums-tone--on { opacity: 1; animation: war-drums-beat 1.2s ease-in-out infinite; }
@keyframes war-drums-beat { 0%, 100% { opacity: 0.85; } 15% { opacity: 1; } }
.reduce-motion .hud > .war-drums-tone--on { animation: none; opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .hud > .war-drums-tone--on { animation: none; } }

/* The structure panel (ui/hud/SitePanel.tsx): who is inside, its defense, and the player's actions there (44 px targets). */
.site-panel__besieged { color: #ff8a7a; }
.site-panel__inside { margin: 6px 0; padding: 6px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.site-panel__row { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.site-panel__commanderless::before { content: '⛨ '; color: var(--muted); }
.site-panel__defense { margin: 4px 0; }
.site-panel__actions { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.site-panel__buttons, .site-panel__quick { display: flex; flex-wrap: wrap; gap: 6px; }
.site-btn { flex: 1 1 0; min-width: 72px; min-height: 44px; padding: 6px 8px; font-size: 13px; }
.site-btn--primary { border-color: var(--accent); background: rgba(14, 195, 201, 0.2); }
.site-btn.active { border-color: var(--accent); }
.site-btn:disabled { opacity: 0.4; }
.site-panel__drop { display: flex; flex-direction: column; gap: 6px; }
.site-panel__slider { display: grid; grid-template-columns: minmax(70px, auto) 1fr 40px; align-items: center; gap: 8px; min-height: 44px; }
.site-panel__slider input[type="range"] { width: 100%; height: 44px; accent-color: var(--accent); }
.site-panel__count { text-align: right; font-variant-numeric: tabular-nums; }
.hud--portrait .hud-corner--bl .site-panel { max-height: 52dvh; }
.hud-corner--tl .site-panel { width: max(var(--popover-w), 280px); }

/* A tap or drop that could mean two orders (ui/hud/OrderChoice.tsx). */
.hud > .order-choice { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.order-choice__card { pointer-events: auto; display: flex; flex-direction: column; gap: 8px; min-width: 240px; max-width: calc(100vw - 32px); padding: 12px; background: var(--panel-solid); border: 1px solid var(--border); border-radius: 8px; }

/* Detachments (docs/DETACHMENTS.md): the ring under a held finger, the detach window, notices, the tip, the army list. */
.press-ring {
    position: fixed;
    width: 76px;
    height: 76px;
    margin: -38px 0 0 -38px;
    pointer-events: none;
    z-index: 40;
    animation: press-ring-grow var(--fill-ms, 850ms) linear forwards;
}
.press-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.press-ring__track { fill: rgba(0, 0, 0, 0.25); stroke: rgba(255, 255, 255, 0.35); stroke-width: 5; }
.press-ring__fill {
    fill: none;
    stroke: var(--accent);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 164;
    stroke-dashoffset: 164;
    animation: press-ring-fill var(--fill-ms, 850ms) linear forwards;
}
@keyframes press-ring-grow { from { transform: scale(0.55); opacity: 0.6; } to { transform: scale(1); opacity: 1; } }
@keyframes press-ring-fill { to { stroke-dashoffset: 0; } }

/* What dropping a dragged order does: above the finger (it would hide it below). */
.drag-hint {
    position: fixed;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    transform: translate(-50%, calc(-100% - 44px));
    background: var(--panel-solid);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
    pointer-events: none;
}
.drag-hint__icon { display: flex; font-size: 16px; }
.drag-hint--move .drag-hint__icon { color: #fff; }
.drag-hint--follow .drag-hint__icon { color: #0ec3c9; }
.drag-hint--attack .drag-hint__icon { color: #ff6b4a; }
.drag-hint--enter .drag-hint__icon { color: #7ee2a8; }
.drag-hint--merge .drag-hint__icon, .drag-hint--join .drag-hint__icon, .drag-hint--reinforce .drag-hint__icon { color: #f5c84b; }
.drag-hint--rejected { border-color: #e74c3c; }
.drag-hint--rejected .drag-hint__icon { color: #e74c3c; }

.detach-window {
    position: fixed;
    z-index: 45;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(280px, calc(100vw - 16px));
    padding: 10px 12px;
    background: var(--panel-solid);
    border: 1px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
}
.detach-window__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.detach-window__close {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    color: inherit;
    font-size: 20px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
}
.detach-window__slider { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; }
.detach-window__slider > span { grid-column: 1 / -1; }
.detach-window__slider input[type='range'] { width: 100%; height: 44px; margin: 0; accent-color: var(--accent); }
.detach-window__count { min-width: 3ch; text-align: right; font-size: 18px; }
.detach-window__quick { display: flex; gap: 6px; }
.detach-window__quick .site-btn { min-width: 0; }
.detach-window__preview { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.detach-window__unit { display: inline-flex; align-items: center; gap: 4px; }
.detach-window__send { flex: none; }
.detach-window { max-height: calc(100dvh - 16px); overflow-y: auto; }
.detach-window__toggle { min-height: 44px; }
.detach-window__details { display: flex; flex-direction: column; gap: 6px; }
.detach-window__type { display: grid; grid-template-columns: 44px 1fr 44px 3.5ch; grid-template-rows: auto 44px; align-items: center; gap: 0 6px; }
.detach-window__type-name { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.detach-window__type input[type='range'] { width: 100%; height: 44px; margin: 0; accent-color: var(--accent); }
.detach-window__step { min-width: 44px; min-height: 44px; padding: 0; font-size: 20px; }
.detach-window__type-count { text-align: right; }
.detach-window__totals { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

.notice-line, .detach-hint {
    align-self: center;
    max-width: min(420px, calc(100vw - 32px));
    margin-top: 4px;
    padding: 6px 10px;
    font-size: 13px;
    text-align: center;
    background: var(--panel-solid);
    border: 1px solid var(--border);
    border-radius: 6px;
    pointer-events: none;
}
.notice-line { border-color: #e74c3c; color: #ffd2cb; }
.detach-hint { border-color: var(--accent); }

.unit-list { display: flex; flex-direction: column; gap: 4px; }
.unit-list__row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 4px 8px;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}
.unit-list__row--selected { border-color: var(--accent); }
.unit-list__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-list__doing { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.unit-list__name + .unit-list__doing { flex: 0 1 auto; }
/* A detachment as on the map: pennant (owner's colour), troops, the commanderless mark (ui/hud/UnitMark.tsx). */
.unit-mark { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.unit-mark__pennant { font-size: 17px; }
.unit-mark__commanderless { font-size: 13px; opacity: 0.8; }
.unit-card__pennant { font-size: 18px; flex: 0 0 auto; }

/* ?debug=net: the connection panel (ui/NetDebug.tsx), above everything, bottom-left inside the safe area. */
.net-debug {
    position: fixed;
    left: calc(var(--safe-left, 0px) + 6px);
    bottom: calc(var(--safe-bottom, 0px) + 6px);
    z-index: 1000;
    max-width: calc(100vw - var(--safe-left, 0px) - var(--safe-right, 0px) - 12px);
    font: 11px ui-monospace, Menlo, monospace;
    color: #e8eef4;
}
.net-debug__chip {
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    background: rgba(10, 14, 20, 0.82);
    color: inherit;
    font: inherit;
    font-variant-numeric: tabular-nums;
}
.net-debug__chip--connected { border-color: #4caf6a; }
.net-debug__chip--reconnecting { border-color: #e0a030; }
.net-debug__chip--lost { border-color: #e05040; }
.net-debug__panel {
    margin-bottom: 4px;
    padding: 6px;
    width: min(560px, calc(100vw - var(--safe-left, 0px) - var(--safe-right, 0px) - 12px));
    border-radius: 4px;
    background: rgba(10, 14, 20, 0.92);
}
.net-debug--open { display: flex; flex-direction: column-reverse; }
.net-debug__summary { margin-bottom: 4px; }
.net-debug__log {
    max-height: min(40vh, 320px);
    overflow: auto;
    margin: 0 0 6px;
    white-space: pre-wrap;
    word-break: break-all;
    user-select: text;
    -webkit-user-select: text;
}
.net-debug__actions { display: flex; gap: 6px; }
.net-debug__actions .btn { min-height: 44px; }
.net-debug__copy-area { position: absolute; left: -9999px; width: 1px; height: 1px; }

/* The closed test's gate and update screens, the data notice (ui/GateScreens.tsx). */
.gate-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px 16px; }
.gate-screen--update { position: fixed; inset: 0; z-index: 2000; background: var(--bg, #10151c); }
.invite-form { display: flex; flex-direction: column; gap: 8px; width: min(320px, 100%); text-align: left; }
.invite-form .btn { min-height: 44px; }
.closed-test { max-width: 520px; margin: 12px auto 0; text-align: left; opacity: 0.85; }
.closed-test summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.invite-form input { min-height: 44px; box-sizing: border-box; font-size: 16px; letter-spacing: 0.08em; text-align: center; }