/* LSport game profile mobile-first dark theme.
   Tracks the mockups in Logs/game/screens — neon-on-navy "tech HUD" aesthetic. */

/* ---------------------------------------------------------------------------
   PALETTE, 2026-09-22: navy + cyan -> mahogany + brass.

   game-battle.css already described itself as "HMM3-style battlefield.
   Earth-toned palette, mahogany framing, ornate brass accents" and delivered
   exactly that, while every other game screen was a sci-fi HUD in #0a1322 navy
   with a #00d4ff cyan accent. Two unrelated identities, and the wrong one on
   29 screens out of 30. These are the same values as game-battle.css's --bf-*
   set, so the map and the battlefield finally speak once.

   The NAMES are unchanged on purpose: every rule below and in 30 views keeps
   resolving, so this is a repaint, not a refactor.
   --------------------------------------------------------------------------- */
:root {
    --game-bg: #1a0e06;
    --game-bg-2: #0c0703;
    --game-panel: rgba(59, 34, 15, 0.82);
    --game-panel-2: rgba(94, 58, 29, 0.92);
    --game-border: #1d1107;
    --game-border-bright: #6f4824;
    /* Kept green: this is the "yours" faction colour (own clan, own fort,
       objective done) and it needs to stay legible against all the brown. */
    --game-accent: #3ddc97;
    --game-accent-glow: rgba(61, 220, 151, 0.55);
    /* Was #00d4ff. Nothing in Heroes has ever glowed cyan. */
    --game-accent-2: #caa14f;
    --game-warn: #e08b3a;
    --game-danger: #c0392b;
    --game-text: #f3e6c8;
    --game-text-dim: #b59e72;
    --game-locked: #a89070;
    --game-gold: #caa14f;

    /* Bevel set, lifted from game-battle.css so .carved can live here. */
    --game-frame-hi: #6f4824;
    --game-frame-lo: #1d1107;
    --game-brass: #caa14f;
    --game-brass-hi: #e6cf9b;
    --game-brass-lo: #6f5224;
    --hud-corner-url: url("/Content/game/hud-corner.svg");
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ---------- shell ---------- */

.game-body {
    background: var(--game-bg-2) url("/Content/game/bg.svg") center top / cover no-repeat fixed;
    color: var(--game-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Display", Roboto, "Helvetica Neue", sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.game-body::before {
    content: "";
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(120, 64, 22, 0.35), transparent 62%),
        radial-gradient(ellipse at 80% 100%, rgba(202, 161, 79, 0.05), transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.game-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-areas:
        "res    res"
        "header header"
        "nav    main";
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto 1fr;
    min-height: 100vh;
}

/* ---------- header ---------- */

.game-header {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(180deg, #3b220f, #241407);
    box-shadow: inset 0 1px 0 var(--game-frame-hi);
    border-bottom: 1px solid var(--game-border);
    position: relative;
}
.game-header::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--game-accent), transparent);
    opacity: 0.6;
}
.game-avatar {
    width: 64px; height: 64px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, var(--game-panel-2), var(--game-bg));
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow:
        0 0 0 2px var(--game-accent),
        0 0 18px var(--game-accent-glow),
        inset 0 0 18px rgba(61, 220, 151, 0.2);
}
.game-avatar img { width: 100%; height: 100%; object-fit: cover; }
.game-avatar::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--hud-corner-url) top left / 16px no-repeat;
    pointer-events: none;
}
.game-id { flex: 1; min-width: 0; }
.game-name {
    font-weight: 800; font-size: 18px; line-height: 1.1;
    letter-spacing: 0.3px;
    text-shadow: 0 0 12px rgba(61, 220, 151, 0.3);
}
.game-power {
    font-size: 11px; letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--game-text-dim);
    margin-top: 4px;
}
.game-power-label { color: var(--game-text-dim); }
.game-power-value {
    color: var(--game-accent);
    font-weight: 800;
    margin-left: 6px;
    font-size: 14px;
    text-shadow: 0 0 8px var(--game-accent-glow);
}
.game-power-bar {
    height: 8px;
    margin-top: 6px;
    border-radius: 4px;
    background: rgba(59, 34, 15, 0.9);
    border: 1px solid var(--game-border);
    overflow: hidden;
    position: relative;
}
.game-power-bar > div {
    height: 100%;
    background:
        linear-gradient(90deg, var(--game-accent) 0%, var(--game-accent-2) 50%, var(--game-warn) 100%);
    box-shadow: 0 0 12px var(--game-accent-glow);
    transition: width 0.4s ease;
}

/* ---------- vertical nav ---------- */

.game-tabs {
    grid-area: nav;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(59, 34, 15, 0.92), rgba(26, 14, 6, 0.75));
    border-right: 1px solid var(--game-border);
    padding: 12px 0;
    gap: 2px;
    position: relative;
}
.game-tabs::after {
    content: "";
    position: absolute; top: 0; bottom: 0; right: -1px; width: 1px;
    background: linear-gradient(180deg, transparent, var(--game-accent), transparent);
    opacity: 0.4;
}
.game-tab {
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 6px;
    color: var(--game-text-dim);
    text-decoration: none;
    font-size: 10px;
    letter-spacing: 0.4px;
    border-left: 3px solid transparent;
    transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.18s;
    position: relative;
}
.game-tab i {
    font-size: 22px;
    margin-bottom: 5px;
    transition: text-shadow 0.18s;
}
.game-tab:hover {
    color: var(--game-text);
    background: linear-gradient(90deg, rgba(61, 220, 151, 0.1), transparent);
}
.game-tab.active {
    color: var(--game-accent);
    border-left-color: var(--game-accent);
    background: linear-gradient(90deg, rgba(61, 220, 151, 0.18), transparent);
}
.game-tab.active i {
    text-shadow: 0 0 12px var(--game-accent-glow);
}

/* ---------- main pane ---------- */

.game-main {
    grid-area: main;
    padding: 18px;
    overflow-x: hidden;
}
.game-panel {
    position: relative;
    background:
        linear-gradient(180deg, var(--game-panel-2), var(--game-panel));
    border: 1px solid var(--game-border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.game-panel::before, .game-panel::after {
    content: "";
    position: absolute;
    width: 18px; height: 18px;
    background: var(--hud-corner-url) no-repeat;
    background-size: contain;
    pointer-events: none;
    opacity: 0.7;
}
.game-panel::before { top: -2px; left: -2px; }
.game-panel::after { bottom: -2px; right: -2px; transform: rotate(180deg); }
.game-panel-title {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--game-text-dim);
    text-transform: uppercase;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--game-border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.game-panel-title::before {
    content: "";
    width: 4px; height: 14px;
    background: var(--game-accent);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--game-accent-glow);
}

/* ---------- stat bars ---------- */

.game-stats { display: flex; flex-direction: column; gap: 12px; }
.game-stat {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 12px;
}
.game-stat-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--game-bg);
    font-size: 20px;
    color: var(--game-accent);
    border: 1px solid var(--game-border-bright);
    box-shadow: inset 0 0 12px rgba(61, 220, 151, 0.15);
}
.game-stat-icon.str { color: #6ee36a; box-shadow: inset 0 0 12px rgba(110, 227, 106, 0.2); }
.game-stat-icon.spd { color: var(--game-accent-2); box-shadow: inset 0 0 12px rgba(202, 161, 79, 0.22); }
.game-stat-icon.int { color: #5ea9ff; box-shadow: inset 0 0 12px rgba(94, 169, 255, 0.2); }
.game-stat-icon.end { color: var(--game-warn); box-shadow: inset 0 0 12px rgba(244, 168, 61, 0.2); }
.game-stat-icon.flx { color: #f48d3d; box-shadow: inset 0 0 12px rgba(244, 141, 61, 0.2); }
.game-stat-icon.crd { color: #99e36a; box-shadow: inset 0 0 12px rgba(153, 227, 106, 0.2); }
.game-stat-body { min-width: 0; }
.game-stat-name {
    font-size: 13px; font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--game-text);
}
.game-stat-fill {
    height: 8px;
    margin-top: 6px;
    border-radius: 4px;
    background: var(--game-bg);
    border: 1px solid var(--game-border);
    overflow: hidden;
    position: relative;
}
.game-stat-fill > div {
    height: 100%;
    background: linear-gradient(90deg, var(--game-accent), var(--game-accent-2));
    box-shadow: 0 0 10px var(--game-accent-glow);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.game-stat .str ~ .game-stat-body .game-stat-fill > div,
.game-stat:has(.game-stat-icon.str) .game-stat-fill > div { background: linear-gradient(90deg, #6ee36a, #3ddc97); }
.game-stat:has(.game-stat-icon.spd) .game-stat-fill > div { background: linear-gradient(90deg, var(--game-accent-2), #5ea9ff); }
.game-stat:has(.game-stat-icon.int) .game-stat-fill > div { background: linear-gradient(90deg, #5ea9ff, #00d4ff); }
.game-stat:has(.game-stat-icon.end) .game-stat-fill > div { background: linear-gradient(90deg, var(--game-warn), #ef4444); }
.game-stat:has(.game-stat-icon.flx) .game-stat-fill > div { background: linear-gradient(90deg, #f48d3d, var(--game-warn)); }
.game-stat:has(.game-stat-icon.crd) .game-stat-fill > div { background: linear-gradient(90deg, #99e36a, #3ddc97); }
.game-stat-value {
    /* Bumped from 18 → 34 — the right-side "24 УРОВЕНЬ" card is gone, the
       value is now just the per-stat level number with no "Ур." prefix, and
       there's plenty of room for it to read at a glance. */
    font-size: 34px;
    font-weight: 900;
    color: var(--game-accent);
    text-shadow: 0 0 14px var(--game-accent-glow);
    min-width: 60px;
    text-align: right;
    line-height: 1;
}

/* ---------- balance / coin pill ---------- */

.game-balance {
    display: flex; align-items: center; gap: 14px;
    padding: 16px;
    border: 1px solid var(--game-accent);
    border-radius: 16px;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(61, 220, 151, 0.15), transparent 60%),
        linear-gradient(135deg, rgba(202, 161, 79, 0.10), rgba(111, 72, 36, 0.06));
    box-shadow:
        0 0 24px rgba(61, 220, 151, 0.25),
        inset 0 0 30px rgba(61, 220, 151, 0.08);
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}
.game-balance::before {
    content: "";
    position: absolute; top: -50%; right: -10%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(61, 220, 151, 0.18), transparent 70%);
    pointer-events: none;
}
.game-balance .coin {
    width: 64px; height: 64px;
    background: url("/Content/game/coin-ct.svg") center / contain no-repeat;
    flex-shrink: 0;
    filter: drop-shadow(0 0 12px var(--game-accent-glow));
}
.game-balance .amount {
    font-size: 32px; font-weight: 800;
    color: var(--game-text);
    letter-spacing: 0.5px;
    line-height: 1;
    text-shadow: 0 0 14px rgba(61, 220, 151, 0.4);
}
.game-balance .amount::after {
    content: " CT";
    font-size: 18px;
    color: var(--game-accent);
    margin-left: 4px;
}
.game-balance .label {
    font-size: 10px; letter-spacing: 1.5px;
    color: var(--game-text-dim);
    text-transform: uppercase;
    margin-top: 6px;
}

/* ---------- inventory tabs + grid ---------- */

.game-inventory-tabs {
    display: flex; gap: 4px;
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: 1px solid var(--game-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.game-inventory-tabs::-webkit-scrollbar { display: none; }
.game-inventory-tab {
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: var(--game-text-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, text-shadow 0.15s;
}
.game-inventory-tab:hover { color: var(--game-text); }
.game-inventory-tab.active {
    color: var(--game-accent);
    border-bottom-color: var(--game-accent);
    text-shadow: 0 0 10px var(--game-accent-glow);
}

.game-inv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 8px;
}
.game-inv-cell {
    aspect-ratio: 1;
    border: 1px solid var(--game-border-bright);
    border-radius: 12px;
    background:
        linear-gradient(135deg, var(--game-panel-2), var(--game-bg));
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    color: var(--game-text-dim);
    font-size: 24px;
    position: relative;
    overflow: hidden;
}
.game-inv-cell::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 50%);
    pointer-events: none;
}
.game-inv-cell:hover {
    border-color: var(--game-accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.game-inv-cell.selected {
    border-color: var(--game-accent);
    box-shadow:
        0 0 0 1px var(--game-accent),
        0 0 18px var(--game-accent-glow),
        inset 0 0 12px rgba(61, 220, 151, 0.15);
    animation: cellPulse 1.6s ease-in-out infinite;
}
@keyframes cellPulse {
    0%, 100% { box-shadow: 0 0 0 1px var(--game-accent), 0 0 14px var(--game-accent-glow), inset 0 0 10px rgba(61, 220, 151, 0.15); }
    50%      { box-shadow: 0 0 0 1px var(--game-accent), 0 0 24px var(--game-accent-glow), inset 0 0 18px rgba(61, 220, 151, 0.25); }
}
.game-inv-cell.equipped::after {
    content: "";
    position: absolute; top: 5px; right: 5px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--game-accent);
    box-shadow: 0 0 8px var(--game-accent-glow);
}
.game-inv-cell.locked {
    color: var(--game-locked);
    border-color: var(--game-border);
    opacity: 0.55;
}
.game-inv-cell.locked::before {
    content: "\f023";  /* fa-lock */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 16px;
    position: absolute; bottom: 4px; right: 4px;
    color: var(--game-locked);
    background: none;
    inset: auto;
}
.game-inv-cell .qty {
    position: absolute; bottom: 4px; right: 6px;
    font-size: 10px; font-weight: 800;
    color: var(--game-text);
    background: rgba(0, 0, 0, 0.7);
    padding: 1px 6px;
    border-radius: 8px;
    border: 1px solid var(--game-border);
}
.game-inv-cell svg, .game-inv-cell img {
    width: 70%; height: 70%;
}

/* ---------- detail panel ---------- */

.game-detail {
    border: 1px solid var(--game-accent);
    border-radius: 14px;
    padding: 14px;
    background:
        linear-gradient(180deg, rgba(61, 220, 151, 0.1), transparent 80%),
        var(--game-panel);
    box-shadow:
        0 0 18px rgba(61, 220, 151, 0.2),
        inset 0 0 24px rgba(61, 220, 151, 0.05);
    margin-top: 14px;
}
.game-detail h3 {
    margin: 4px 0 10px;
    font-size: 14px;
    color: var(--game-accent);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 0 10px var(--game-accent-glow);
}
.game-bonus {
    display: inline-block;
    margin: 3px 5px 3px 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    background: rgba(61, 220, 151, 0.16);
    color: var(--game-accent);
    border: 1px solid rgba(61, 220, 151, 0.4);
    text-shadow: 0 0 6px var(--game-accent-glow);
}
.game-detail .actions {
    margin-top: 12px;
    display: flex; gap: 10px;
}
.game-detail button, .k-button.game-action {
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid var(--game-accent);
    background:
        linear-gradient(180deg, rgba(61, 220, 151, 0.22), rgba(61, 220, 151, 0.1));
    color: var(--game-text);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(61, 220, 151, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.12s, box-shadow 0.18s;
}
.game-detail button:hover { transform: translateY(-1px); box-shadow: 0 0 18px var(--game-accent-glow); }
.game-detail button.secondary {
    border-color: var(--game-border-bright);
    background: transparent;
    color: var(--game-text-dim);
    box-shadow: none;
}

/* ---------- awards ---------- */

.game-awards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.game-award {
    border: 1px solid var(--game-border);
    border-radius: 14px;
    padding: 14px 10px;
    background: var(--game-panel);
    text-align: center;
    position: relative;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.game-award:hover { transform: translateY(-2px); }
.game-award.earned {
    border-color: var(--game-accent);
    background:
        radial-gradient(ellipse at top, rgba(61, 220, 151, 0.12), transparent 70%),
        var(--game-panel);
    box-shadow: 0 0 14px rgba(61, 220, 151, 0.28);
}
.game-award.locked {
    opacity: 0.5;
    filter: grayscale(0.7);
}
.game-award .medal {
    width: 60px; height: 75px;
    margin: 0 auto 6px;
    background: url("/Content/game/medal-gold.svg") center / contain no-repeat;
}
.game-award.silver .medal { background-image: url("/Content/game/medal-silver.svg"); }
.game-award.locked .medal { filter: grayscale(1) opacity(0.5); }
.game-award .name {
    font-size: 13px; font-weight: 800;
    color: var(--game-text);
    margin-top: 4px;
}
/* .award-progress deliberately avoids Bootstrap's .progress class name -
   the layout ships bootstrap.min.css whose progress-bar component painted
   a light-gray stripe over the dark award card. */
.game-award .award-progress {
    font-size: 11px;
    color: var(--game-text-dim);
    margin-top: 4px;
    letter-spacing: 0.5px;
}
.game-award .claim {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--game-accent);
    color: #082016;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

/* ---------- activity feed ---------- */

.game-activity {
    display: flex; flex-direction: column;
    gap: 8px;
    position: relative;
    padding-left: 12px;
}
.game-activity::before {
    content: "";
    position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px;
    background: linear-gradient(180deg, var(--game-accent), transparent);
    opacity: 0.4;
}
.game-activity-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--game-panel);
    border: 1px solid var(--game-border);
    position: relative;
    transition: transform 0.15s, border-color 0.15s;
}
.game-activity-row::before {
    content: "";
    position: absolute; left: -12px; top: 50%; width: 10px; height: 10px;
    transform: translate(0, -50%);
    border-radius: 50%;
    background: var(--game-accent);
    box-shadow: 0 0 8px var(--game-accent-glow);
}
.game-activity-row.credit::before { background: var(--game-accent); box-shadow: 0 0 8px var(--game-accent-glow); }
.game-activity-row.debit::before { background: var(--game-warn); box-shadow: 0 0 8px rgba(244, 168, 61, 0.5); }
.game-activity-row:hover { transform: translateX(2px); border-color: var(--game-accent); }
.game-activity-row i {
    font-size: 18px;
    color: var(--game-text-dim);
    text-align: center;
}
.game-activity-row.credit i { color: var(--game-accent); }
.game-activity-row.debit  i { color: var(--game-warn); }
.game-activity-row .amt {
    font-weight: 800;
    font-size: 14px;
}
.game-activity-row.credit .amt { color: var(--game-accent); }
.game-activity-row.debit  .amt { color: var(--game-warn); }
.game-activity-row .when {
    font-size: 11px;
    color: var(--game-text-dim);
    margin-top: 2px;
}

/* ---------- army ---------- */

/* Each direction is its own card; on wide screens we tile them across the
   freed-up horizontal width so /Game/Army doesn't leave a giant empty band
   under the balance widget. Tracks shrink-wrap to ≥320px each, so on narrow
   screens it gracefully falls back to a single column. */
#armyContainer, #shopContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
    align-items: start;
}
.game-army-group { margin-bottom: 0; }
.game-army-group-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: 1.8px;
    color: var(--game-text-dim);
    margin: 0 0 8px;
    padding-left: 8px;
    border-left: 3px solid var(--game-accent);
}
.game-army-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--game-panel);
    border: 1px solid var(--game-border);
    margin-bottom: 6px;
    transition: border-color 0.15s, transform 0.15s;
    align-items: center;
}
.game-army-row:hover { border-color: var(--game-accent); transform: translateX(2px); }
.game-army-row > .unit-sprite-wrap { width: 48px; height: 64px; }
.game-army-info { min-width: 0; }
.game-army-name { font-weight: 700; font-size: 14px; }
.game-army-row > div > div:first-child {
    font-weight: 700;
    font-size: 14px;
}
.game-army-stats {
    font-size: 11px;
    color: var(--game-text-dim);
    display: flex; gap: 10px;
    flex-wrap: wrap;
    margin-top: 3px;
}
.game-army-count {
    font-size: 22px;
    font-weight: 800;
    color: var(--game-accent);
    align-self: center;
    text-shadow: 0 0 10px var(--game-accent-glow);
}

/* ---------- character render slot (Profile page) ---------- */

.game-character {
    position: relative;
    min-height: 380px;
    background:
        radial-gradient(ellipse at 50% 90%, var(--game-accent-glow) 0%, transparent 60%),
        var(--game-panel);
    border: 1px solid var(--game-border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 14px;
}
.game-character::before {
    content: "";
    position: absolute; inset: 0;
    background: url("/Content/game/character.svg") center bottom / contain no-repeat;
    opacity: 0.95;
}
.game-character::after {
    content: "";
    position: absolute; left: 10%; right: 10%; bottom: 8%; height: 8px;
    border-radius: 50%;
    background: radial-gradient(ellipse, var(--game-accent-glow), transparent 70%);
}

/* ---------- shop / catalog buy buttons ---------- */

.k-button.buy-unit {
    border: 1px solid var(--game-accent);
    background: linear-gradient(180deg, rgba(61, 220, 151, 0.22), rgba(61, 220, 151, 0.08));
    color: var(--game-text);
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(61, 220, 151, 0.25);
    transition: transform 0.12s;
}
.k-button.buy-unit:hover { transform: translateY(-1px); }
.k-button.buy-unit:disabled,
.k-button.buy-unit[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.cost {
    font-size: 14px;
    font-weight: 800;
    color: var(--game-accent);
    margin-bottom: 4px;
    text-shadow: 0 0 8px var(--game-accent-glow);
}
.game-shop-hint {
    font-size: 12px;
    color: var(--game-text-dim);
    margin-bottom: 10px;
}
.game-army-empty {
    color: var(--game-text-dim);
    text-align: center;
    padding: 14px 6px;
    font-size: 13px;
}

/* ---------- responsive ---------- */

/* Mobile hamburger - desktop hides it via the @@media (min-width:701px) rule
   below. The button itself sits inside .game-header before the avatar. */
.game-nav-toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 8px;
    background: linear-gradient(180deg, #3b220f, #241407);
    color: var(--game-text);
    box-shadow: inset 0 1px 0 var(--game-frame-hi);
    border: 1px solid var(--game-border);
    cursor: pointer; padding: 0;
    font-size: 18px;
}
.game-nav-toggle:hover { background: rgba(25, 40, 70, 0.95); }
.game-nav-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(8, 12, 24, 0.55);
    /* Above every Leaflet layer AND control (controls sit at z-index 1000),
       below Kendo windows (~10000) so dialogs still win over the drawer. */
    z-index: 1198;
}
@media (max-width: 899px) {
    /* Single-column shell; nav becomes an off-canvas drawer. */
    .game-shell {
        grid-template-areas: "res" "header" "main";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
    }
    .game-nav-toggle { display: inline-flex; }
    .game-tabs {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 220px;
        z-index: 1199; /* over Leaflet controls (1000); see .game-nav-backdrop */
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        background: linear-gradient(180deg, #3b220f, #241407);
        border-right: 1px solid var(--game-border);
        padding-top: 56px;
        /* Landscape phones are shorter than the menu: the drawer must
           scroll its own items or the bottom ones are unreachable.
           overscroll-behavior keeps the fling from scrolling the page
           behind the backdrop; the bottom padding clears curved screen
           corners / the iOS home indicator on the last item. */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
    body.game-nav-open .game-tabs { transform: translateX(0); }
    body.game-nav-open .game-nav-backdrop { display: block; }
    /* Onboarding lockdown wins: drawer never opens during the wizard. */
    body.game-onboarding .game-nav-toggle { display: none; }
    .game-tab {
        flex-direction: row; gap: 12px;
        justify-content: flex-start;
        padding: 10px 18px;
        font-size: 14px;
        text-transform: none; letter-spacing: 0;
    }
    .game-tab i { font-size: 18px; margin-bottom: 0; width: 22px; text-align: center; }
    .game-tab span { font-size: 14px; }
}
@media (max-width: 360px) {
    .game-tabs { width: 200px; }
    .game-balance .amount { font-size: 26px; }
    .game-character { min-height: 280px; }
}
@media (min-width: 900px) {
    .game-shell {
        max-width: 1100px;
        margin: 0 auto;
        grid-template-columns: 128px 1fr;
    }
    /* Compact rail: eleven items (Home joined) have to fit a laptop screen
       without scrolling. */
    .game-tab { padding: 8px 6px; font-size: 10.5px; }
    .game-tab i { font-size: 20px; margin-bottom: 3px; }
    /* Two-column layout (main + sticky character slot) only kicks in when a
       page actually renders a .game-character. Otherwise the page is single-
       column full-width so panels don't collapse into the unused 320px gutter
       (which was the bug behind /Game/Army's narrow right-side army list). */
    .game-main:has(.game-character) {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 16px;
        align-items: start;
    }
    .game-main > .game-character { grid-column: 2; grid-row: 1 / span 10; position: sticky; top: 16px; }
}

/* ---------- profile calc surfacing ---------- */

.game-level-panel {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.game-total-power {
    flex: 0 0 auto;
    text-align: right;
    padding-left: 12px;
    border-left: 1px solid var(--game-border);
    margin-left: auto;
}
.game-total-power-num {
    color: var(--game-accent);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 12px var(--game-accent-glow);
}
.game-total-power-lbl {
    color: var(--game-text-dim);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 4px;
}
.game-level-next {
    color: var(--game-text-dim);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}
.game-level-badge {
    flex: 0 0 auto;
    /* Bumped from 64px → 96px and the number font from 12 → 32 per spec —
       the overall level now lives only here, so it has to read at a glance. */
    width: 96px; height: 96px;
    border-radius: 50%;
    border: 3px solid var(--game-accent);
    background: radial-gradient(circle at 30% 30%, rgba(61,220,151,.22), transparent 70%), var(--game-panel-2);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--game-accent);
    box-shadow: 0 0 26px var(--game-accent-glow);
}
.game-level-badge i { font-size: 18px; margin-bottom: 2px; }
.game-level-badge span {
    font-weight: 900;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0.5px;
    text-shadow: 0 0 16px var(--game-accent-glow);
}
.game-level-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.game-level-row {
    display: flex; justify-content: space-between;
    font-size: 12px; color: var(--game-text-dim);
}
.game-level-row span:last-child { color: var(--game-text); font-weight: 600; }
.game-level-fill {
    height: 6px; border-radius: 4px;
    background: rgba(255,255,255,0.05);
    overflow: hidden;
    margin-top: 4px;
}
.game-level-fill > div {
    height: 100%;
    background: linear-gradient(90deg, var(--game-accent-2), var(--game-accent));
    box-shadow: 0 0 8px var(--game-accent-glow);
    width: 0;
    transition: width .4s ease;
}

.game-pending {
    background: rgba(244,168,61,0.12);
    border: 1px solid rgba(244,168,61,0.35);
    color: var(--game-warn);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    margin: 8px 0;
    display: flex; align-items: center; gap: 8px;
}
.game-test-hint {
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(202,161,79,0.12);
    border: 1px dashed var(--game-accent-2);
    color: var(--game-accent-2);
    border-radius: 6px;
    font-size: 11px;
}

.game-stat-frac { color: var(--game-text-dim); font-weight: 400; margin-left: 6px; font-size: 11px; }
.game-stat-warn {
    display: none;
    margin-left: 6px;
    font-size: 11px;
}
.game-stat-warn.warn-soft { color: var(--game-warn); }
.game-stat-warn.warn-hard { color: var(--game-danger); }
.game-stat-meta {
    color: var(--game-accent);
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 2px;
    min-height: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.game-stat-lvl {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(61, 220, 151, 0.25), rgba(61, 220, 151, 0.08));
    border: 1px solid var(--game-accent);
    color: var(--game-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px var(--game-accent-glow);
    text-transform: none;
}
.game-stat-bonus { color: var(--game-accent); font-weight: 700; }
.game-stat-nextlvl { color: var(--game-text-dim); font-weight: 400; }

/* ---------- direction tier grid ---------- */

.game-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}
.game-tier-cell {
    background: var(--game-panel-2);
    border: 1px solid var(--game-border);
    border-radius: 8px;
    padding: 8px 6px;
    text-align: center;
    display: flex; flex-direction: column; gap: 4px;
}
.game-tier-cell.locked {
    opacity: 0.5;
    border-style: dashed;
}
.game-tier-name { font-size: 11px; color: var(--game-text-dim); }
.game-tier-num { font-size: 18px; font-weight: 700; color: var(--game-accent); }
.game-tier-cell.locked .game-tier-num { color: var(--game-locked); }

/* ---------- profile army preview strip ---------- */

.game-army-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
}
.game-army-strip-cell {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px 4px;
    background: var(--game-panel-2);
    border: 1px solid var(--game-border);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s;
}
.game-army-strip-cell:hover { border-color: var(--game-accent); transform: translateY(-2px); }
.game-army-strip-cell .unit-sprite-wrap { width: 40px; height: 56px; }
.game-army-strip-name {
    font-size: 10px;
    color: var(--game-text-dim);
    text-align: center;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.game-army-strip-count {
    font-size: 12px;
    color: var(--game-accent);
    font-weight: 700;
}

/* ---------- recent activity strip ---------- */

.game-recent {
    display: flex; flex-direction: column; gap: 6px;
}
.game-recent-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    background: rgba(255,255,255,0.02);
    border-left: 2px solid var(--game-accent-2);
    border-radius: 4px;
    font-size: 12px;
}
.game-recent-src { color: var(--game-text); font-weight: 600; }
.game-recent-delta { color: var(--game-accent); font-size: 11px; }
.game-recent-date { color: var(--game-text-dim); font-size: 11px; }
.game-recent-empty { color: var(--game-text-dim); text-align: center; padding: 12px; font-size: 12px; }

/* ---------- unit sprites + tier badges ---------- */

.unit-sprite-wrap {
    position: relative;
    display: inline-block;
    width: 48px; height: 64px;
}
.unit-sprite-wrap.size-sm  { width: 32px; height: 42px; }
.unit-sprite-wrap.size-lg  { width: 64px; height: 96px; }
.unit-sprite {
    width: 100%; height: 100%;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
}
/* Live sprites have two stacked idle animations: a slow vertical bob (breath)
   plus a subtle horizontal sway so a crowded stack doesn't look like a chorus
   line. Randomised delays (set per-stack by the JS at render time via the
   .delay-N classes) keep neighbour units from syncing. The composite uses
   transform-origin at the figure's feet so the figure sways at the head
   rather than rotating around its centre. */
.unit-sprite-wrap.alive img.unit-sprite {
    animation: unitBob 2.6s ease-in-out infinite, unitSway 4.7s ease-in-out infinite;
    transform-origin: 50% 92%;
    /* Transform only - animating `filter` (the old sway pulsed the
       drop-shadow + brightness) forces per-frame re-rasterization of a
       promoted layer for EVERY live sprite, which is what smears cards
       into GPU garbage on budget Android compositors. */
    will-change: transform;
}
.unit-sprite-wrap.alive.delay-1 img.unit-sprite { animation-delay: -0.3s, -1.1s; }
.unit-sprite-wrap.alive.delay-2 img.unit-sprite { animation-delay: -0.7s, -2.3s; }
.unit-sprite-wrap.alive.delay-3 img.unit-sprite { animation-delay: -1.1s, -3.1s; }
.unit-sprite-wrap.alive.delay-4 img.unit-sprite { animation-delay: -1.5s, -0.6s; }
.unit-sprite-wrap.alive.delay-5 img.unit-sprite { animation-delay: -1.9s, -2.0s; }
@keyframes unitBob {
    0%, 100% { transform: translateY(0)    scale(1.00, 1.00); }
    35%      { transform: translateY(-2px) scale(1.02, 0.98); }
    65%      { transform: translateY(-3px) scale(1.01, 0.99); }
}
/* Sway is a tiny rotation now. It used to pulse `filter` (shadow depth +
   brightness), but filter animations can't stay on the compositor - each
   frame re-rasterizes the sprite's layer, and dozens of live sprites in a
   scrolled list corrupt tiles on weak mobile GPUs (cards rendering as
   noise bands). The static drop-shadow on .unit-sprite stays. */
@keyframes unitSway {
    0%, 100% { rotate: 0deg; }
    50%      { rotate: 0.8deg; }
}

/* ---------- skeletal SVG animation (inline sprites) --------------------
   game-units.js upgrades every sprite from <img> to an inline <svg> whose
   limb paths carry skeleton classes:
     .us-head .us-torso .us-arm-f .us-arm-b .us-leg-f .us-leg-b
     .us-weapon .us-wheel .us-float .us-fx
   plus a whole-drawing .us-root group injected at load time. State classes
   on the wrap (.us-idle .us-move .us-attack .us-hit .us-dead, switched via
   LSportUnits.setAnim) pick which keyframe set runs. Untagged SVGs still
   get the whole-body .us-root animation of each state, so every unit reads
   as moving even before its artwork is skeleton-tagged.
   --us-delay (set per stack by JS) desyncs neighbouring loops. */
svg.unit-sprite { overflow: visible; }
svg.unit-sprite .us-root,
svg.unit-sprite .us-head, svg.unit-sprite .us-torso,
svg.unit-sprite .us-arm-f, svg.unit-sprite .us-arm-b,
svg.unit-sprite .us-leg-f, svg.unit-sprite .us-leg-b,
svg.unit-sprite .us-weapon, svg.unit-sprite .us-wheel,
svg.unit-sprite .us-float {
    transform-box: fill-box;
    animation-delay: var(--us-delay, 0s);
}
/* Joint pivots: legs/arms hinge at their top (hip / shoulder); an
   .us-og-b modifier flips the pivot to the bottom for raised arms
   (dir-1 holds a dumbbell overhead) and ground-planted props. */
svg.unit-sprite .us-root   { transform-origin: 50% 100%; }
svg.unit-sprite .us-torso  { transform-origin: 50% 90%; }
svg.unit-sprite .us-head   { transform-origin: 50% 80%; }
svg.unit-sprite .us-arm-f, svg.unit-sprite .us-arm-b { transform-origin: 50% 12%; }
svg.unit-sprite .us-leg-f, svg.unit-sprite .us-leg-b { transform-origin: 50% 6%; }
svg.unit-sprite .us-weapon { transform-origin: 50% 85%; }
svg.unit-sprite .us-wheel  { transform-origin: 50% 50%; }
svg.unit-sprite .us-og-b   { transform-origin: 50% 95% !important; }
/* Ambient FX (motion trails, auras) stay faint until the unit moves. */
svg.unit-sprite .us-fx { opacity: 0.25; transition: opacity 200ms; }

/* ---- idle: breath + weight shift + weapon bob (continuous) ---- */
.us-idle svg.unit-sprite .us-root   { animation: usIdleRoot 2.8s ease-in-out infinite; }
.us-idle svg.unit-sprite .us-torso  { animation: usIdleTorso 2.8s ease-in-out infinite; }
.us-idle svg.unit-sprite .us-head   { animation: usIdleHead 5.3s ease-in-out infinite; }
.us-idle svg.unit-sprite .us-arm-f  { animation: usIdleArmF 2.8s ease-in-out infinite; }
.us-idle svg.unit-sprite .us-arm-b  { animation: usIdleArmB 2.8s ease-in-out infinite; }
.us-idle svg.unit-sprite .us-weapon { animation: usIdleWeapon 3.4s ease-in-out infinite; }
.us-idle svg.unit-sprite .us-float  { animation: usFloat 3.0s ease-in-out infinite; }
.us-idle svg.unit-sprite .us-wheel  { animation: usWheelSpin 6s linear infinite; }
@keyframes usIdleRoot   { 0%,100% { transform: translateY(0) }        50% { transform: translateY(-1.2px) } }
@keyframes usIdleTorso  { 0%,100% { transform: scaleY(1) }            50% { transform: scaleY(1.03) } }
@keyframes usIdleHead   { 0%,100% { transform: rotate(0deg) }         30% { transform: rotate(-2.5deg) } 70% { transform: rotate(2deg) } }
@keyframes usIdleArmF   { 0%,100% { transform: rotate(0deg) }         50% { transform: rotate(-4deg) } }
@keyframes usIdleArmB   { 0%,100% { transform: rotate(0deg) }         50% { transform: rotate(3.5deg) } }
@keyframes usIdleWeapon { 0%,100% { transform: rotate(0deg) translateY(0) } 50% { transform: rotate(-2.5deg) translateY(-0.8px) } }
@keyframes usFloat      { 0%,100% { transform: translateY(0) }        50% { transform: translateY(-3px) } }
@keyframes usWheelSpin  { from { transform: rotate(0deg) }            to  { transform: rotate(360deg) } }

/* ---- move: legs swing, arms pump, body gallops, wheels race ---- */
.us-move svg.unit-sprite .us-root  { animation: usMoveRoot 0.42s ease-in-out infinite; }
.us-move svg.unit-sprite .us-leg-f { animation: usMoveLegF 0.42s ease-in-out infinite; }
.us-move svg.unit-sprite .us-leg-b { animation: usMoveLegB 0.42s ease-in-out infinite; }
.us-move svg.unit-sprite .us-arm-f { animation: usMoveArmF 0.42s ease-in-out infinite; }
.us-move svg.unit-sprite .us-arm-b { animation: usMoveArmB 0.42s ease-in-out infinite; }
.us-move svg.unit-sprite .us-torso { animation: usMoveTorso 0.42s ease-in-out infinite; }
.us-move svg.unit-sprite .us-wheel { animation: usWheelSpin 0.5s linear infinite; }
.us-move svg.unit-sprite .us-fx    { opacity: 0.9; }
@keyframes usMoveRoot  { 0%,100% { transform: translateY(0) rotate(2.5deg) } 50% { transform: translateY(-3px) rotate(2.5deg) } }
@keyframes usMoveLegF  { 0%,100% { transform: rotate(24deg) }  50% { transform: rotate(-24deg) } }
@keyframes usMoveLegB  { 0%,100% { transform: rotate(-24deg) } 50% { transform: rotate(24deg) } }
@keyframes usMoveArmF  { 0%,100% { transform: rotate(-20deg) } 50% { transform: rotate(20deg) } }
@keyframes usMoveArmB  { 0%,100% { transform: rotate(20deg) }  50% { transform: rotate(-20deg) } }
@keyframes usMoveTorso { 0%,100% { transform: rotate(3deg) }   50% { transform: rotate(1deg) } }

/* ---- attack: wind-up + strike (one-shot, JS reverts to idle) ---- */
.us-attack svg.unit-sprite .us-root   { animation: usAtkRoot 0.5s ease-in-out 1; }
.us-attack svg.unit-sprite .us-arm-f  { animation: usAtkArmF 0.5s ease-in-out 1; }
.us-attack svg.unit-sprite .us-arm-b  { animation: usAtkArmB 0.5s ease-in-out 1; }
.us-attack svg.unit-sprite .us-weapon { animation: usAtkWeapon 0.5s ease-in-out 1; }
.us-attack svg.unit-sprite .us-torso  { animation: usAtkTorso 0.5s ease-in-out 1; }
@keyframes usAtkRoot   { 0% { transform: none } 30% { transform: translateX(-2px) rotate(-4deg) } 60% { transform: translateX(4px) rotate(5deg) } 100% { transform: none } }
@keyframes usAtkArmF   { 0% { transform: none } 30% { transform: rotate(-45deg) } 60% { transform: rotate(30deg) } 100% { transform: none } }
@keyframes usAtkArmB   { 0% { transform: none } 30% { transform: rotate(18deg) }  60% { transform: rotate(-12deg) } 100% { transform: none } }
@keyframes usAtkWeapon { 0% { transform: none } 30% { transform: rotate(-35deg) translateY(-2px) } 60% { transform: rotate(28deg) } 100% { transform: none } }
@keyframes usAtkTorso  { 0% { transform: none } 30% { transform: rotate(-5deg) } 60% { transform: rotate(6deg) } 100% { transform: none } }

/* ---- hit: recoil + flash + arms flail (one-shot) ---- */
.us-hit svg.unit-sprite .us-root  { animation: usHitRoot 0.42s ease-out 1; }
.us-hit svg.unit-sprite .us-arm-f { animation: usHitArm 0.42s ease-out 1; }
.us-hit svg.unit-sprite .us-arm-b { animation: usHitArmB 0.42s ease-out 1; }
.us-hit svg.unit-sprite .us-head  { animation: usHitHead 0.42s ease-out 1; }
@keyframes usHitRoot { 0% { transform: none; filter: brightness(1) } 25% { transform: translateX(3px) skewX(-6deg); filter: brightness(2.1) saturate(0.4) } 60% { transform: translateX(-1.5px) skewX(2deg); filter: brightness(1.2) } 100% { transform: none; filter: brightness(1) } }
@keyframes usHitArm  { 0% { transform: none } 30% { transform: rotate(-28deg) } 100% { transform: none } }
@keyframes usHitArmB { 0% { transform: none } 30% { transform: rotate(24deg) }  100% { transform: none } }
@keyframes usHitHead { 0% { transform: none } 30% { transform: rotate(7deg) }   100% { transform: none } }

/* ---- dead: collapsed, drained; element-level topple handled by
        .battle-unit-dying in game-battle.css ---- */
.us-dead svg.unit-sprite .us-root { animation: none; transform: none; }
.us-dead svg.unit-sprite * { animation: none !important; }
.us-dead svg.unit-sprite { filter: grayscale(0.9) brightness(0.7) drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }

.tier-badge {
    position: absolute;
    right: -2px; bottom: -2px;
    background: linear-gradient(180deg, #2a2a2a, #0a0a0a);
    color: var(--game-accent);
    border: 1px solid var(--game-border-bright);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    min-width: 18px; text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.unit-sprite-wrap.tier-4 .tier-badge,
.unit-sprite-wrap.tier-5 .tier-badge,
.unit-sprite-wrap.tier-6 .tier-badge {
    color: #fbbf24;
    border-color: #fbbf24;
    box-shadow: 0 0 6px rgba(251,191,36,0.5);
}
.unit-sprite-wrap.tier-7 .tier-badge,
.unit-sprite-wrap.tier-8 .tier-badge,
.unit-sprite-wrap.tier-9 .tier-badge {
    color: #fff5b0;
    background: linear-gradient(180deg, #b8860b, #5a4000);
    border-color: #fff5b0;
}
/* Crown for top-tier units (7+). T9 also gets a glowing aura around the sprite. */
.unit-sprite-wrap.tier-7::before,
.unit-sprite-wrap.tier-8::before,
.unit-sprite-wrap.tier-9::before {
    content: "♛";
    position: absolute;
    left: 50%; top: -10px;
    transform: translateX(-50%);
    color: #fff5b0;
    font-size: 12px;
    text-shadow: 0 0 4px #fbbf24;
}
.unit-sprite-wrap.tier-8::before { content: "♛"; font-size: 14px; }
.unit-sprite-wrap.tier-9::before { content: "♛♛"; font-size: 11px; letter-spacing: -2px; }
.unit-sprite-wrap.tier-9 .unit-sprite {
    filter: drop-shadow(0 0 6px rgba(251,191,36,0.7)) drop-shadow(0 2px 3px rgba(0,0,0,0.6));
}

/* Optional direction-themed background plate behind the sprite (used in lists). */
.unit-sprite-wrap.plated {
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25));
    border: 1px solid var(--game-border);
    border-radius: 4px;
    padding: 2px;
    box-sizing: border-box;
}
.unit-sprite-wrap.plated.dir-1 { background: linear-gradient(180deg, rgba(196,69,47,0.18), rgba(58,30,15,0.5)); }
.unit-sprite-wrap.plated.dir-2 { background: linear-gradient(180deg, rgba(70,130,180,0.18), rgba(15,40,75,0.5)); }
.unit-sprite-wrap.plated.dir-3 { background: linear-gradient(180deg, rgba(224,32,32,0.18), rgba(10,10,10,0.55)); }
.unit-sprite-wrap.plated.dir-4 { background: linear-gradient(180deg, rgba(76,175,80,0.18), rgba(15,45,20,0.5)); }
.unit-sprite-wrap.plated.dir-5 { background: linear-gradient(180deg, rgba(192,132,252,0.18), rgba(45,15,60,0.5)); }
.unit-sprite-wrap.plated.dir-6 { background: linear-gradient(180deg, rgba(0,255,255,0.12), rgba(15,25,40,0.55)); }
.unit-sprite-wrap.plated.dir-7 { background: linear-gradient(180deg, rgba(255,215,0,0.15), rgba(20,20,40,0.55)); }

/* ---------- utility ---------- */

.game-empty {
    grid-column: 1 / -1;
    color: var(--game-text-dim);
    text-align: center;
    padding: 28px 12px;
    font-size: 13px;
    letter-spacing: 0.6px;
}

/* ============================================================================
   Unit-info popup (HMM3 "view stack" homage)
   ----------------------------------------------------------------------------
   Wood-grained panel with gold border, opens on click of any [data-unit-id]
   element. Layout: portrait left, stats table right, ability box bottom-right.
   Shared by /Game/Profile, /Game/Army, /GameBattle/Field, and any future view
   that renders unit sprites.
============================================================================ */
.unit-popup-backdrop {
    position: fixed; inset: 0;
    background: rgba(8, 6, 4, 0.65);
    backdrop-filter: blur(2px);
    z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    animation: unitPopupFade 140ms ease-out;
}
@keyframes unitPopupFade { from { opacity: 0 } to { opacity: 1 } }
.unit-popup {
    position: relative;
    width: 640px;
    max-width: calc(100vw - 24px);
    background:
        linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.25)),
        repeating-linear-gradient(90deg, #6b4322 0 6px, #5e3a1d 6px 12px, #794d27 12px 18px),
        #5e3a1d;
    border: 3px solid #d6a847;
    box-shadow: 0 0 0 1px #1a0f06 inset, 0 14px 40px rgba(0,0,0,0.7);
    border-radius: 4px;
    color: #f3e3b6;
    font-family: 'Georgia', 'Times New Roman', serif;
    padding: 14px 14px 18px;
}
.unit-popup-title {
    text-align: center;
    background: linear-gradient(180deg, #2a1808, #1d1107);
    border: 1px solid #d6a847;
    color: #f4d77a;
    padding: 6px 10px;
    margin: 0 0 12px;
    font-size: 16px;
    letter-spacing: 0.4px;
    text-shadow: 0 1px 0 #000;
}
.unit-popup-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px;
    align-items: stretch;
}
.unit-popup-portrait {
    background:
        linear-gradient(180deg, #283c4e, #122332);
    border: 1px solid #c69536;
    box-shadow: 0 0 0 1px #0a0603 inset;
    height: 260px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    overflow: hidden;
}
/* Sprite scales naturally inside the portrait box. The .unit-sprite img
   already has width/height:100% of its wrap, so resizing the wrap is enough —
   no transform:scale (which used to push the head out the top of the frame). */
.unit-popup-portrait .unit-sprite-wrap {
    width: 180px; height: 240px;
}
.unit-popup-portrait .unit-sprite-wrap .tier-badge { display: none; }
.unit-popup-portrait-count {
    position: absolute;
    right: 6px; bottom: 4px;
    color: #f3e3b6;
    font-size: 22px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.7);
}
.unit-popup-stats {
    display: flex; flex-direction: column;
    gap: 2px;
    background: rgba(0,0,0,0.18);
    border: 1px solid #a4742c;
    padding: 6px 8px;
}
.unit-popup-stat {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    padding: 4px 4px;
    border-bottom: 1px dashed rgba(214, 168, 71, 0.35);
    font-size: 14px;
}
.unit-popup-stat:last-child { border-bottom: none; }
.unit-popup-stat i { color: #d6a847; font-size: 14px; text-align: center; }
.unit-popup-stat-label { color: #ecd99a; }
.unit-popup-stat-value {
    color: #f9eec0;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.unit-popup-stat-bonus { color: #7fdf9b; margin-left: 4px; }
.unit-popup-ability {
    margin-top: 10px;
    background: rgba(0,0,0,0.22);
    border: 1px solid #a4742c;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.4;
}
.unit-popup-ability-name {
    color: #f4d77a;
    font-weight: 700;
    margin-right: 6px;
}
.unit-popup-actions {
    display: flex; justify-content: space-between;
    margin-top: 14px;
}
.unit-popup-btn {
    background: linear-gradient(180deg, #6b4322, #3a230f);
    border: 1px solid #d6a847;
    color: #f4d77a;
    padding: 6px 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
}
.unit-popup-btn:hover { background: linear-gradient(180deg, #7b4f29, #4a2d13); }

/* Phone: the 220px portrait column starves the stats column inside the
   viewport-clamped popup and pushes it through the border. Stack the
   portrait above the stats instead, shrink the art, and let a too-tall
   card scroll inside itself. */
@media (max-width: 560px) {
    .unit-popup {
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .unit-popup-body { grid-template-columns: 1fr; }
    .unit-popup-portrait { height: 200px; }
    .unit-popup-portrait .unit-sprite-wrap { width: 150px; height: 190px; }
    /* Hire dialog: price / available / hire / total fold to a 2x2 grid. */
    .unit-hire-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Make every rendered sprite hand-clickable when it carries a unitID. */
[data-unit-id] { cursor: pointer; }

/* ============================================================================
   HMM3-style hire dialog. Built by LSportUnits.hire — same wood/gold chrome
   as .unit-popup, with a centred portrait, four labeled cells (price /
   available / hire / total), a quantity slider, and three action buttons.
============================================================================ */
.unit-popup.unit-hire {
    width: 520px;
    text-align: center;
}
.unit-hire-portrait {
    margin: 0 auto 12px;
    width: 220px; height: 200px;
    background:
        radial-gradient(ellipse at 50% 90%, rgba(0,0,0,0.45) 0%, transparent 60%),
        linear-gradient(180deg, #6f9135 0%, #4b6c1c 70%, #3a5414 100%);
    border: 1px solid #c69536;
    box-shadow: 0 0 0 1px #0a0603 inset;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    position: relative;
}
.unit-hire-portrait .unit-sprite-wrap { width: 150px; height: 190px; }
.unit-hire-portrait .unit-sprite-wrap .tier-badge { display: none; }

.unit-hire-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}
.unit-hire-cell {
    background:
        linear-gradient(180deg, #2a1808, #1d1107);
    border: 1px solid #d6a847;
    box-shadow: 0 0 0 1px #0a0603 inset;
    padding: 8px 4px 6px;
    color: #f4d77a;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-height: 90px;
}
.unit-hire-cell-label {
    font-size: 11px;
    letter-spacing: 0.5px;
    color: #ecd99a;
}
.unit-hire-cell-coin {
    font-size: 22px;
    color: #fbbf24;
    text-shadow: 0 0 6px rgba(251, 191, 36, 0.45);
    line-height: 1;
}
.unit-hire-cell-value {
    font-weight: 700;
    color: #f9eec0;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-top: auto;
}

.unit-hire-slider {
    background: linear-gradient(180deg, #2a1808, #1d1107);
    border: 1px solid #d6a847;
    box-shadow: 0 0 0 1px #0a0603 inset;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.unit-hire-range {
    width: 100%;
    accent-color: #d6a847;
    cursor: pointer;
}
.unit-hire-range:disabled { opacity: 0.4; cursor: not-allowed; }

.unit-hire-actions {
    display: flex; justify-content: center;
    gap: 10px;
}
.unit-hire-btn {
    min-width: 80px;
    padding: 8px 14px;
    font-size: 18px;
}
.unit-hire-btn:disabled,
.unit-hire-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 540px) {
    .unit-popup.unit-hire { width: auto; }
    .unit-hire-grid { grid-template-columns: repeat(2, 1fr); }
    .unit-hire-portrait { width: 180px; height: 170px; }
    .unit-hire-portrait .unit-sprite-wrap { width: 130px; height: 160px; }
}

/* ---------- Game map panel (Yandex Maps embedded inside the game shell) ---- */
/* The map needs a generous viewport while staying inside .game-main padding;
   we shave the panel's inner padding so the Yandex tiles butt up to the frame. */
.game-map-panel {
    padding: 12px;
}
.game-map-panel .game-panel-title {
    margin-bottom: 10px;
}
.game-map-canvas {
    width: 100%;
    height: calc(100vh - 240px);
    min-height: 420px;
    border: 1px solid var(--game-border-bright);
    border-radius: 10px;
    overflow: hidden;
    background: var(--game-bg);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.55);
}

/* =========================================================================
   HMM3 treatment, 2026-09-22.

   Appended rather than woven through the 1600 lines above on purpose: the
   palette swap at the top already repaints everything, and this section only
   adds the three things that palette alone cannot give you - carved bevels,
   Roman-capital lettering, and the resource bar. Anything here that overrides
   an earlier rule says so.
   ========================================================================= */

/* ---- Roman capitals on the chrome, never on body copy -------------------
   Forum is a single-weight display face (see game-font.css). It goes on
   labels, names and numbers, NOT on paragraphs: a whole UI set in caps-styled
   serif is unreadable, and HMM3 never did that either. */
.game-body h1, .game-body h2, .game-body h3, .game-body h4, .game-body h5,
.game-name,
.game-tab span,
.game-power-label,
.game-res-val,
.daily-chip, .mines-chip,
.daily-header, .mines-header, .duel-header,
.mode-label, .mode-sub {
    font-family: var(--game-display);
}
.game-name {
    /* was a mint glow; brass ink and a hard shadow, the way carved lettering
       reads on a plate */
    font-weight: 400;
    letter-spacing: 0.6px;
    color: var(--game-text);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
}
.game-tab span { letter-spacing: 0.6px; }

/* ---- Carved frames ------------------------------------------------------
   The single most "Heroes" thing in a UI: a raised plate, lit from the top
   left. .carved raises, .carved-in sinks (wells, inputs, the map viewport). */
.carved {
    border: 2px solid var(--game-frame-lo);
    border-radius: 4px;
    background: linear-gradient(180deg, #3b220f, #241407);
    box-shadow:
        inset 0 1px 0 var(--game-frame-hi),
        inset 1px 0 0 var(--game-frame-hi),
        0 2px 6px rgba(0, 0, 0, 0.5);
}
.carved-in {
    border: 2px solid var(--game-frame-lo);
    border-radius: 3px;
    background: #14100a;
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.7),
        0 1px 0 var(--game-frame-hi);
}
.carved-brass {
    border: 2px solid var(--game-frame-lo);
    border-radius: 4px;
    background: linear-gradient(180deg, var(--game-brass), var(--game-brass-lo));
    color: #1a0e06;
    box-shadow: inset 0 1px 0 var(--game-brass-hi), 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Panels and chips already on screen inherit the look without new markup. */
.game-panel, .game-card, .daily-panel, .mines-panel, .duel-panel {
    border-color: var(--game-frame-lo);
    box-shadow: inset 0 1px 0 var(--game-frame-hi), 0 3px 12px rgba(0, 0, 0, 0.5);
}
.daily-chip, .mines-chip {
    border: 2px solid var(--game-frame-lo);
    border-radius: 4px;
    background: linear-gradient(180deg, #3b220f, #241407);
    box-shadow: inset 0 1px 0 var(--game-frame-hi), 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* ---- Nav rail: the selected tab is a brass plate, not a green tint ------ */
.game-tab.active {
    color: #1a0e06;
    border-left-color: var(--game-frame-lo);
    background: linear-gradient(180deg, var(--game-brass), var(--game-brass-lo));
    box-shadow: inset 0 1px 0 var(--game-brass-hi), inset 0 -1px 0 var(--game-brass-lo);
}
.game-tab.active i { text-shadow: none; color: #1a0e06; }

/* ---- Hero portrait ------------------------------------------------------
   An arched brass frame plus a heavy inner vignette is what turns a
   photograph of an athlete into a hero portrait. Overrides the mint ring. */
.game-avatar {
    border-radius: 30px 30px 6px 6px;
    padding: 3px;
    background: linear-gradient(180deg, var(--game-brass), var(--game-brass-lo));
    box-shadow:
        inset 0 1px 0 var(--game-brass-hi),
        0 2px 8px rgba(0, 0, 0, 0.6);
}
.game-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 27px 27px 4px 4px;
    /* Warm the photograph towards the rest of the palette. Kept mild: these
       are real people and the point is to frame them, not to disguise them. */
    filter: sepia(0.28) saturate(0.92) contrast(1.04);
}
.game-avatar::after {
    content: "";
    position: absolute; inset: 3px;
    border-radius: 27px 27px 4px 4px;
    box-shadow: inset 0 0 18px rgba(26, 14, 6, 0.75);
    pointer-events: none;
}

/* ---- Resource bar -------------------------------------------------------
   The most recognisable piece of HMM3 chrome, and the data already existed:
   ResourceService tracks all six kinds, it was just never shown in one place.
   Scrolls horizontally on a phone rather than wrapping into two rows. */
.game-res-bar {
    grid-area: res;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 14px;
    background: linear-gradient(180deg, #5e3a1d, #2a1808);
    border-bottom: 2px solid var(--game-frame-lo);
    box-shadow: inset 0 1px 0 var(--game-frame-hi);
    overflow-x: auto;
    scrollbar-width: none;
}
.game-res-bar::-webkit-scrollbar { display: none; }
.game-res {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    color: var(--game-text);
}
/* The sprite's paths carry no fill attribute, so without this they render
   black. Every other consumer of #res-* sets it too (see .hb-res-chip). */
.game-res svg { width: 15px; height: 15px; flex: 0 0 auto; fill: currentColor; }
.game-res-val { font-size: 13px; letter-spacing: 0.4px; text-shadow: 0 1px 0 rgba(0,0,0,0.6); }
.game-res-wood     { color: #c8a06a; }
.game-res-stones   { color: #a9a9a2; }
.game-res-crystals { color: #7fd0ff; }
.game-res-gems     { color: #e07ab0; }
.game-res-iron     { color: #9aa6b2; }
.game-res-oil      { color: #b58bd8; }
.game-res-coin     { color: var(--game-brass); margin-left: auto; }
.game-res-energy   { color: #3ddc97; }

/* ---- Exit to the portal -------------------------------------------------
   There was no way out of the game at all: every tab in the rail went to
   another game screen, so the only exit was the browser's back button. */
.game-exit {
    margin-top: auto;
    border-top: 1px solid var(--game-frame-lo);
    box-shadow: inset 0 1px 0 rgba(111, 72, 36, 0.35);
    color: var(--game-text-dim);
}
.game-exit:hover { color: var(--game-brass); background: rgba(202, 161, 79, 0.08); }

@media (max-width: 899px) {
    /* The rail becomes a drawer below 900px, so "push to the bottom" needs
       the drawer's column to be a flex context; .game-tabs already is. */
    .game-exit { margin-top: 12px; }
    .game-res-bar { gap: 13px; padding: 5px 10px; }
}

/* The wizard is a focused flow and the player has no resources until the
   gift is claimed, so a bar of zeroes is just noise. Hidden like the nav. */
body.game-onboarding .game-res-bar { display: none; }

/* ===================================================================
   Unit rig (Scripts/game-unit-rig.js): HMM3-style army figures.

   Every joint is a <g> with a fixed pivot. The pivots below are the rest
   joint positions in game-unit-rig.js (J); keep the two in step. Each
   rotating joint turns by var(--j), its own pose angle (a unit's stance
   arrives as --af, --ff, --lf ... on the <svg>), and the keyframes are
   written relative to var(--j), so one set of animations serves every
   stance. --a is the swing amplitude a rule hands a generic keyframe.

   State comes from the wrap (LSportUnits.setAnim):
     .us-idle   waiting for something      (loop, per unit: .idle-*)
     .us-move   walking / riding / flying   (loop, .mv-*)
     .us-attack melee strike                (one-shot, .atk-*)
     .us-shoot  ranged shot                 (one-shot, .sh-*)
     .us-defend braced after "Defend"       (held, .df-*)
     .us-block  a hit taken while defending (one-shot, keeps the brace)
     .us-hit    a hit                       (one-shot)
   =================================================================== */
.rig { overflow: visible; }
.rig g { transform-box: view-box; }
.rig .a-root  { transform-origin: 32px 90px; transform: translateY(var(--y, 0px)); }
.rig .a-body  { transform-origin: 31px 90px; }
.rig .a-torso { transform-origin: 31px 58px;     --j: var(--t, 0deg); }
.rig .a-head  { transform-origin: 33.2px 33px;   --j: var(--h, 0deg); }
.rig .a-arm-f { transform-origin: 34.2px 38.5px; --j: var(--af, 0deg); }
.rig .a-fore-f{ transform-origin: 34.8px 48.2px; --j: var(--ff, 0deg); }
.rig .a-arm-b { transform-origin: 29.8px 38.5px; --j: var(--ab, 0deg); }
.rig .a-fore-b{ transform-origin: 30.4px 48.2px; --j: var(--fb, 0deg); }
.rig .a-leg-f { transform-origin: 32.8px 58px;   --j: var(--lf, 0deg); }
.rig .a-shin-f{ transform-origin: 33.6px 71.5px; --j: var(--sf, 0deg); }
.rig .a-leg-b { transform-origin: 29.5px 58px;   --j: var(--lb, 0deg); }
.rig .a-shin-b{ transform-origin: 30.2px 71.5px; --j: var(--sb, 0deg); }
.rig .a-prop  { transform-origin: 35.6px 57px;   --j: var(--p, 0deg); }
.rig .a-torso, .rig .a-head, .rig .a-arm-f, .rig .a-fore-f, .rig .a-arm-b, .rig .a-fore-b,
.rig .a-leg-f, .rig .a-shin-f, .rig .a-leg-b, .rig .a-shin-b, .rig .a-prop {
    transform: rotate(var(--j));
}
.rig .a-wheel, .rig .a-rotor { transform-box: fill-box; transform-origin: 50% 50%; }
.rig .a-rope { transform-origin: 33px 60px; }
.rig .a-ribbon { transform-origin: 36.4px 54px; }
.rig .a-flash { opacity: 0; }
/* The idle ball (keepy-uppy, dribble, bump) lives only in idle; the ball
   held in the hand shows the rest of the time. */
.rig .a-ball { display: none; }
.us-idle .rig .a-ball { display: inline; }
.us-idle .rig .a-hball { display: none; }

/* Always-on machinery: rotors, the RC plane, the drone, auras, glows. */
.rig .a-rotor { animation: rgFlick 0.09s linear infinite; }
.rig .a-drone { animation: rgFloatSmall 1.6s ease-in-out infinite; }
.rig .a-rc    { animation: rgOrbit 3.4s ease-in-out infinite; }
.rig .a-aura  { animation: rgAura 2.4s ease-in-out infinite; }
.rig .a-spark { animation: rgSpark 1.8s ease-in-out infinite; }
.rig .a-glow  { animation: rgGlow 1.4s ease-in-out infinite; }
.rig .a-ribbon{ animation: rgRibbon 1.1s ease-in-out infinite; }

@keyframes rgFlick      { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.12); } }
@keyframes rgFloatSmall { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes rgOrbit      { 0% { transform: translate(0, 0); } 25% { transform: translate(-10px, 3px); } 50% { transform: translate(-22px, 0); } 75% { transform: translate(-10px, -3px); } 100% { transform: translate(0, 0); } }
@keyframes rgAura       { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.6; } }
@keyframes rgSpark      { 0%, 100% { opacity: 0.2; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes rgGlow       { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes rgRibbon     { 0%, 100% { transform: rotate(-8deg) skewX(0deg); } 50% { transform: rotate(10deg) skewX(8deg); } }

/* ---- generic, pose-relative keyframes ---- */
@keyframes rgOsc  { 0%, 100% { transform: rotate(calc(var(--j) - var(--a))); } 50% { transform: rotate(calc(var(--j) + var(--a))); } }
@keyframes rgKnee { 0%, 50%, 100% { transform: rotate(var(--j)); } 75% { transform: rotate(calc(var(--j) + var(--a))); } }
@keyframes rgNod  { 0%, 100% { transform: rotate(var(--j)); } 50% { transform: rotate(calc(var(--j) + var(--a))); } }
@keyframes rgBob  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.9px); } }
@keyframes rgBobStep { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes rgHop  { 0%, 100% { transform: translateY(var(--y, 0px)); } 50% { transform: translateY(calc(var(--y, 0px) - 2.4px)); } }
@keyframes rgHover{ 0%, 100% { transform: translateY(var(--y, 0px)); } 50% { transform: translateY(calc(var(--y, 0px) - 4px)); } }
@keyframes rgSway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes rgSpin { to { transform: rotate(360deg); } }

/* ================= idle: waiting for something ================= */
.us-idle .rig .a-body  { animation: rgBob 2.6s ease-in-out infinite; }
.us-idle .rig .a-arm-f { --a: 3deg; animation: rgOsc 2.6s ease-in-out infinite; }
.us-idle .rig .a-arm-b { --a: 3deg; animation: rgOsc 2.6s ease-in-out -1.3s infinite; }
.us-idle .rig .a-head  { --a: 4deg; animation: rgNod 5.2s ease-in-out infinite; }
.unit-sprite-wrap.delay-1.us-idle .rig .a-body { animation-delay: -0.5s; }
.unit-sprite-wrap.delay-2.us-idle .rig .a-body { animation-delay: -1.1s; }
.unit-sprite-wrap.delay-3.us-idle .rig .a-body { animation-delay: -1.6s; }
.unit-sprite-wrap.delay-4.us-idle .rig .a-body { animation-delay: -2.1s; }

/* fighters bounce on their toes, guard up */
.us-idle .rig.idle-bounce .a-root  { animation: rgHop 0.8s ease-in-out infinite; }
.us-idle .rig.idle-bounce .a-arm-f { --a: 5deg; animation: rgOsc 0.8s ease-in-out infinite; }
.us-idle .rig.idle-bounce .a-arm-b { --a: 5deg; animation: rgOsc 0.8s ease-in-out -0.4s infinite; }
.us-idle .rig.idle-bounce .a-shin-f,
.us-idle .rig.idle-bounce .a-shin-b { --a: 8deg; animation: rgNod 0.8s ease-in-out infinite; }

/* strength: a double-biceps flex every few seconds */
@keyframes rgFlexAF { 0%, 46%, 100% { transform: rotate(var(--j)); } 58%, 82% { transform: rotate(-98deg); } }
@keyframes rgFlexFF { 0%, 46%, 100% { transform: rotate(var(--j)); } 58%, 82% { transform: rotate(-128deg); } }
@keyframes rgFlexAB { 0%, 46%, 100% { transform: rotate(var(--j)); } 58%, 82% { transform: rotate(96deg); } }
@keyframes rgFlexFB { 0%, 46%, 100% { transform: rotate(var(--j)); } 58%, 82% { transform: rotate(124deg); } }
@keyframes rgFlexT  { 0%, 46%, 100% { transform: rotate(var(--j)); } 58%, 82% { transform: rotate(calc(var(--j) - 4deg)); } }
.us-idle .rig.idle-flex .a-arm-f  { animation: rgFlexAF 3.8s ease-in-out infinite; }
.us-idle .rig.idle-flex .a-fore-f { animation: rgFlexFF 3.8s ease-in-out infinite; }
.us-idle .rig.idle-flex .a-arm-b  { animation: rgFlexAB 3.8s ease-in-out infinite; }
.us-idle .rig.idle-flex .a-fore-b { animation: rgFlexFB 3.8s ease-in-out infinite; }
.us-idle .rig.idle-flex .a-torso  { animation: rgFlexT 3.8s ease-in-out infinite; }

/* footballers: keepy-uppy off the front foot */
@keyframes rgKeepyBall { 0%, 100% { transform: translateY(0); animation-timing-function: ease-out; } 50% { transform: translateY(-15px); animation-timing-function: ease-in; } }
@keyframes rgKeepyLeg  { 0%, 16%, 100% { transform: rotate(var(--j)); } 5% { transform: rotate(calc(var(--j) - 34deg)); } }
.us-idle .rig.idle-keepy .a-ball  { animation: rgKeepyBall 1.1s infinite; }
.us-idle .rig.idle-keepy .a-leg-f { animation: rgKeepyLeg 1.1s ease-out infinite; }

/* basketball: dribble */
@keyframes rgDribbleBall { 0%, 100% { transform: translateY(0); animation-timing-function: ease-in; } 50% { transform: translateY(19px); animation-timing-function: ease-out; } }
@keyframes rgDribbleF    { 0%, 100% { transform: rotate(var(--j)); } 25% { transform: rotate(calc(var(--j) + 24deg)); } }
.us-idle .rig.idle-dribble .a-ball   { animation: rgDribbleBall 0.7s infinite; }
.us-idle .rig.idle-dribble .a-fore-f { animation: rgDribbleF 0.7s ease-in-out infinite; }
.us-idle .rig.idle-dribble .a-body   { animation: rgBobStep 0.7s ease-in-out infinite; }

/* volleyball: forearm bump */
@keyframes rgBumpBall { 0%, 100% { transform: translateY(0); animation-timing-function: ease-out; } 50% { transform: translateY(-20px); animation-timing-function: ease-in; } }
.us-idle .rig.idle-bump .a-ball { animation: rgBumpBall 1.2s infinite; }
.us-idle .rig.idle-bump .a-shin-f,
.us-idle .rig.idle-bump .a-shin-b { --a: 10deg; animation: rgNod 1.2s ease-in-out -0.6s infinite; }

/* board games: pondering the piece */
.us-idle .rig.idle-think .a-head   { --a: 7deg; animation: rgNod 3.6s ease-in-out infinite; }
.us-idle .rig.idle-think .a-fore-b { --a: 6deg; animation: rgOsc 0.9s ease-in-out infinite; }
.us-idle .rig.idle-think .a-prop   { --a: 12deg; animation: rgOsc 2.4s ease-in-out infinite; }
.us-idle .rig.idle-think .a-fore-f { --a: 6deg; animation: rgNod 2.4s ease-in-out infinite; }

/* hover: yogi, gymnast, the aerobatic plane */
.us-idle .rig.idle-hover .a-root { animation: rgHover 3s ease-in-out infinite; }

/* shooters: sweeping the sights */
.us-idle .rig.idle-look .a-arm-f,
.us-idle .rig.idle-look .a-arm-b { --a: 5deg; animation: rgOsc 3.4s ease-in-out infinite; }
.us-idle .rig.idle-look .a-head  { --a: 5deg; animation: rgOsc 3.4s ease-in-out infinite; }

/* swimmer / acrobat: arms overhead and down */
@keyframes rgStretchA { 0%, 28%, 100% { transform: rotate(var(--j)); } 48%, 72% { transform: rotate(-168deg); } }
@keyframes rgStretchF { 0%, 28%, 100% { transform: rotate(var(--j)); } 48%, 72% { transform: rotate(-6deg); } }
@keyframes rgStretchT { 0%, 28%, 100% { transform: rotate(var(--j)); } 48%, 72% { transform: rotate(calc(var(--j) - 7deg)); } }
.us-idle .rig.idle-stretch .a-arm-f, .us-idle .rig.idle-stretch .a-arm-b { animation: rgStretchA 4.4s ease-in-out infinite; }
.us-idle .rig.idle-stretch .a-fore-f, .us-idle .rig.idle-stretch .a-fore-b { animation: rgStretchF 4.4s ease-in-out infinite; }
.us-idle .rig.idle-stretch .a-torso { animation: rgStretchT 4.4s ease-in-out infinite; }

/* engines idling: cyclist, kart */
@keyframes rgRev { 0%, 100% { transform: translateY(var(--y, 0px)); } 50% { transform: translateY(calc(var(--y, 0px) - 0.6px)); } }
.us-idle .rig.idle-rev .a-root  { animation: rgRev 0.18s linear infinite; }
.us-idle .rig.idle-rev .a-wheel { animation: rgSpin 4s linear infinite; }

/* rope skipping */
@keyframes rgSkipHop { 0%, 100% { transform: translateY(var(--y, 0px)); } 50% { transform: translateY(calc(var(--y, 0px) - 4px)); } }
@keyframes rgRope    { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-1); } }
.us-idle .rig.idle-skip .a-root { animation: rgSkipHop 0.5s ease-in-out infinite; }
.us-idle .rig.idle-skip .a-rope { animation: rgRope 0.5s linear infinite; }
.us-idle .rig.idle-skip .a-fore-f, .us-idle .rig.idle-skip .a-fore-b { --a: 14deg; animation: rgOsc 0.5s linear infinite; }

/* dancers, skaters, the dummy: sway */
.us-idle .rig.idle-sway .a-body  { animation: rgSway 1.4s ease-in-out infinite; }
.us-idle .rig.idle-sway .a-arm-f { --a: 16deg; animation: rgOsc 1.4s ease-in-out infinite; }
.us-idle .rig.idle-sway .a-arm-b { --a: 16deg; animation: rgOsc 1.4s ease-in-out -0.7s infinite; }
.us-idle .rig.idle-sway .a-leg-f { --a: 6deg;  animation: rgOsc 1.4s ease-in-out infinite; }

/* sumo: shiko, lift the leg high and stamp */
@keyframes rgStompL { 0%, 30%, 56%, 100% { transform: rotate(var(--j)); } 42% { transform: rotate(calc(var(--j) - 58deg)); } }
@keyframes rgStompS { 0%, 30%, 56%, 100% { transform: rotate(var(--j)); } 42% { transform: rotate(calc(var(--j) + 18deg)); } }
@keyframes rgStompT { 0%, 30%, 56%, 100% { transform: rotate(var(--j)); } 42% { transform: rotate(calc(var(--j) - 10deg)); } }
@keyframes rgStompR { 0%, 54%, 64%, 100% { transform: translateY(var(--y, 0px)); } 58% { transform: translateY(calc(var(--y, 0px) + 1.4px)); } }
.us-idle .rig.idle-stomp .a-leg-f  { animation: rgStompL 4s ease-in-out infinite; }
.us-idle .rig.idle-stomp .a-shin-f { animation: rgStompS 4s ease-in-out infinite; }
.us-idle .rig.idle-stomp .a-torso  { animation: rgStompT 4s ease-in-out infinite; }
.us-idle .rig.idle-stomp .a-root   { animation: rgStompR 4s ease-in infinite; }

/* cheerleader */
.us-idle .rig.idle-cheer .a-arm-f { --a: 16deg; animation: rgOsc 0.9s ease-in-out infinite; }
.us-idle .rig.idle-cheer .a-arm-b { --a: 16deg; animation: rgOsc 0.9s ease-in-out -0.45s infinite; }
.us-idle .rig.idle-cheer .a-root  { animation: rgHop 0.9s ease-in-out infinite; }

/* gamers and drone pilots: thumbs mashing */
.us-idle .rig.idle-game .a-fore-f { --a: 4deg; animation: rgOsc 0.22s linear infinite; }
.us-idle .rig.idle-game .a-fore-b { --a: 4deg; animation: rgOsc 0.22s linear -0.11s infinite; }
.us-idle .rig.idle-game .a-head   { --a: 5deg; animation: rgNod 1.8s ease-in-out infinite; }

/* runners: jogging on the spot */
.us-idle .rig.idle-jog .a-root  { animation: rgHop 0.56s ease-in-out infinite; }
.us-idle .rig.idle-jog .a-leg-f { --a: 12deg; animation: rgOsc 0.56s ease-in-out infinite; }
.us-idle .rig.idle-jog .a-leg-b { --a: 12deg; animation: rgOsc 0.56s ease-in-out -0.28s infinite; }
.us-idle .rig.idle-jog .a-shin-f { --a: 20deg; animation: rgKnee 0.56s ease-in-out infinite; }
.us-idle .rig.idle-jog .a-shin-b { --a: 20deg; animation: rgKnee 0.56s ease-in-out -0.28s infinite; }
.us-idle .rig.idle-jog .a-arm-f { --a: 14deg; animation: rgOsc 0.56s ease-in-out -0.28s infinite; }
.us-idle .rig.idle-jog .a-arm-b { --a: 14deg; animation: rgOsc 0.56s ease-in-out infinite; }

/* ================= move: one hex after another ================= */
.us-move .rig .a-leg-f  { --a: 20deg; animation: rgOsc 0.52s ease-in-out infinite; }
.us-move .rig .a-leg-b  { --a: 20deg; animation: rgOsc 0.52s ease-in-out -0.26s infinite; }
.us-move .rig .a-shin-f { --a: 28deg; animation: rgKnee 0.52s ease-in-out infinite; }
.us-move .rig .a-shin-b { --a: 28deg; animation: rgKnee 0.52s ease-in-out -0.26s infinite; }
.us-move .rig .a-arm-f  { --a: 16deg; animation: rgOsc 0.52s ease-in-out -0.26s infinite; }
.us-move .rig .a-arm-b  { --a: 16deg; animation: rgOsc 0.52s ease-in-out infinite; }
.us-move .rig .a-body   { animation: rgBobStep 0.26s ease-in-out infinite; }

.us-move .rig.mv-run .a-leg-f  { --a: 36deg; animation: rgOsc 0.4s ease-in-out infinite; }
.us-move .rig.mv-run .a-leg-b  { --a: 36deg; animation: rgOsc 0.4s ease-in-out -0.2s infinite; }
.us-move .rig.mv-run .a-shin-f { --a: 62deg; animation: rgKnee 0.4s ease-in-out infinite; }
.us-move .rig.mv-run .a-shin-b { --a: 62deg; animation: rgKnee 0.4s ease-in-out -0.2s infinite; }
.us-move .rig.mv-run .a-arm-f  { --a: 34deg; animation: rgOsc 0.4s ease-in-out -0.2s infinite; }
.us-move .rig.mv-run .a-arm-b  { --a: 34deg; animation: rgOsc 0.4s ease-in-out infinite; }
.us-move .rig.mv-run .a-fore-f,
.us-move .rig.mv-run .a-fore-b { transform: rotate(-84deg); }
.us-move .rig.mv-run .a-torso  { transform: rotate(calc(var(--j) + 10deg)); }
.us-move .rig.mv-run .a-body   { animation: rgBobStep 0.2s ease-in-out infinite; }

.us-move .rig.mv-heavy .a-leg-f { --a: 13deg; animation: rgOsc 0.64s ease-in-out infinite; }
.us-move .rig.mv-heavy .a-leg-b { --a: 13deg; animation: rgOsc 0.64s ease-in-out -0.32s infinite; }
.us-move .rig.mv-heavy .a-body  { animation: rgSway 0.64s ease-in-out infinite; }

.us-move .rig.mv-ride .a-wheel  { animation: rgSpin 0.36s linear infinite; }
.us-move .rig.mv-ride .a-leg-f  { --a: 22deg; animation: rgOsc 0.44s linear infinite; }
.us-move .rig.mv-ride .a-leg-b  { --a: 22deg; animation: rgOsc 0.44s linear -0.22s infinite; }
.us-move .rig.mv-ride .a-shin-f { --a: 20deg; animation: rgOsc 0.44s linear -0.11s infinite; }
.us-move .rig.mv-ride .a-shin-b { --a: 20deg; animation: rgOsc 0.44s linear -0.33s infinite; }
.us-move .rig.mv-ride .a-arm-f,
.us-move .rig.mv-ride .a-arm-b  { animation: none; }
.us-move .rig.mv-ride.veh-skateboard .a-leg-f,
.us-move .rig.mv-ride.veh-skateboard .a-shin-f { animation: none; }
.us-move .rig.mv-ride.veh-skateboard .a-leg-b  { --a: 26deg; animation: rgOsc 0.6s ease-in-out infinite; }

.us-move .rig.mv-glide .a-leg-f { --a: 14deg; animation: rgOsc 0.7s ease-in-out infinite; }
.us-move .rig.mv-glide .a-leg-b { --a: 14deg; animation: rgOsc 0.7s ease-in-out -0.35s infinite; }
.us-move .rig.mv-glide .a-shin-f,
.us-move .rig.mv-glide .a-shin-b { animation: none; }
.us-move .rig.mv-glide .a-arm-f { --a: 30deg; animation: rgOsc 0.7s ease-in-out -0.35s infinite; }
.us-move .rig.mv-glide .a-arm-b { --a: 30deg; animation: rgOsc 0.7s ease-in-out infinite; }
.us-move .rig.mv-glide .a-body  { animation: rgSway 1.4s ease-in-out infinite; }

@keyframes rgFly { 0%, 100% { transform: translateY(calc(var(--y, 0px) - 9px)) rotate(7deg); } 50% { transform: translateY(calc(var(--y, 0px) - 12px)) rotate(5deg); } }
.us-move .rig.mv-fly .a-root { animation: rgFly 0.8s ease-in-out infinite; }
.us-move .rig.mv-fly .a-leg-f, .us-move .rig.mv-fly .a-leg-b,
.us-move .rig.mv-fly .a-shin-f, .us-move .rig.mv-fly .a-shin-b { animation: none; }
.us-move .rig.mv-float .a-root { animation: rgHover 1s ease-in-out infinite; }
.us-move .rig.mv-float .a-leg-f, .us-move .rig.mv-float .a-leg-b,
.us-move .rig.mv-float .a-shin-f, .us-move .rig.mv-float .a-shin-b,
.us-move .rig.mv-float .a-arm-f, .us-move .rig.mv-float .a-arm-b { animation: none; }

@keyframes rgTumble { from { transform: translateY(calc(var(--y, 0px) - 6px)) rotate(0deg); } to { transform: translateY(calc(var(--y, 0px) - 6px)) rotate(360deg); } }
.us-move .rig.mv-tumble .a-root { transform-origin: 32px 62px; animation: rgTumble 0.66s linear infinite; }
.us-move .rig.mv-hop .a-root { animation: rgSkipHop 0.36s ease-in-out infinite; }
.us-move .rig.mv-hop .a-rope { animation: rgRope 0.36s linear infinite; }
.us-move .rig.mv-hop .a-leg-f, .us-move .rig.mv-hop .a-leg-b,
.us-move .rig.mv-hop .a-shin-f, .us-move .rig.mv-hop .a-shin-b { animation: none; }

@keyframes rgWindmill { from { transform: rotate(var(--j)); } to { transform: rotate(calc(var(--j) - 360deg)); } }
.us-move .rig.mv-swim .a-arm-f { animation: rgWindmill 0.6s linear infinite; }
.us-move .rig.mv-swim .a-arm-b { animation: rgWindmill 0.6s linear -0.3s infinite; }

/* ================= attack: melee (0.62 s one-shot) ================= */
@keyframes rgPunchA { 0%, 100% { transform: rotate(var(--j)); } 30% { transform: rotate(calc(var(--j) + 14deg)); } 50%, 62% { transform: rotate(-86deg); } }
@keyframes rgPunchF { 0%, 100% { transform: rotate(var(--j)); } 30% { transform: rotate(-125deg); } 50%, 62% { transform: rotate(-6deg); } }
@keyframes rgLeanIn { 0%, 100% { transform: rotate(var(--j)); } 50%, 62% { transform: rotate(calc(var(--j) + 12deg)); } }
@keyframes rgStepIn { 0%, 100% { transform: translate(0, 0); } 50%, 62% { transform: translate(4px, 0); } }
.us-attack .rig .a-arm-f  { animation: rgPunchA 0.62s ease-in-out both; }
.us-attack .rig .a-fore-f { animation: rgPunchF 0.62s ease-in-out both; }
.us-attack .rig .a-torso  { animation: rgLeanIn 0.62s ease-in-out both; }
.us-attack .rig .a-body   { animation: rgStepIn 0.62s ease-in-out both; }

@keyframes rgKickL { 0%, 100% { transform: rotate(var(--j)); } 30% { transform: rotate(-60deg); } 52%, 64% { transform: rotate(-100deg); } }
@keyframes rgKickS { 0%, 100% { transform: rotate(var(--j)); } 30% { transform: rotate(95deg); } 52%, 64% { transform: rotate(4deg); } }
@keyframes rgLeanBack { 0%, 100% { transform: rotate(var(--j)); } 52%, 64% { transform: rotate(calc(var(--j) - 16deg)); } }
@keyframes rgArmOut { 0%, 100% { transform: rotate(var(--j)); } 52%, 64% { transform: rotate(calc(var(--j) + 30deg)); } }
@keyframes rgJump { 0%, 100% { transform: translateY(var(--y, 0px)); } 40%, 64% { transform: translateY(calc(var(--y, 0px) - 7px)); } }
.us-attack .rig.atk-kick .a-leg-f,  .us-attack .rig.atk-jkick .a-leg-f  { animation: rgKickL 0.62s ease-in-out both; }
.us-attack .rig.atk-kick .a-shin-f, .us-attack .rig.atk-jkick .a-shin-f { animation: rgKickS 0.62s ease-in-out both; }
.us-attack .rig.atk-kick .a-torso,  .us-attack .rig.atk-jkick .a-torso  { animation: rgLeanBack 0.62s ease-in-out both; }
.us-attack .rig.atk-kick .a-arm-f,  .us-attack .rig.atk-jkick .a-arm-f  { animation: rgArmOut 0.62s ease-in-out both; }
.us-attack .rig.atk-kick .a-fore-f, .us-attack .rig.atk-jkick .a-fore-f { animation: none; }
.us-attack .rig.atk-jkick .a-root { animation: rgJump 0.62s ease-in-out both; }

@keyframes rgShoveA { 0%, 100% { transform: rotate(var(--j)); } 25% { transform: rotate(calc(var(--j) + 20deg)); } 50%, 64% { transform: rotate(-80deg); } }
@keyframes rgShoveF { 0%, 100% { transform: rotate(var(--j)); } 25% { transform: rotate(-90deg); } 50%, 64% { transform: rotate(-12deg); } }
@keyframes rgShoveT { 0%, 100% { transform: rotate(var(--j)); } 50%, 64% { transform: rotate(calc(var(--j) + 18deg)); } }
@keyframes rgShoveB { 0%, 100% { transform: translate(0, 0); } 50%, 64% { transform: translate(7px, 0); } }
@keyframes rgPushLeg { 0%, 100% { transform: rotate(var(--j)); } 50%, 64% { transform: rotate(calc(var(--j) + 22deg)); } }
.us-attack .rig.atk-shove .a-arm-f, .us-attack .rig.atk-shove .a-arm-b  { animation: rgShoveA 0.62s ease-in-out both; }
.us-attack .rig.atk-shove .a-fore-f, .us-attack .rig.atk-shove .a-fore-b { animation: rgShoveF 0.62s ease-in-out both; }
.us-attack .rig.atk-shove .a-torso { animation: rgShoveT 0.62s ease-in-out both; }
.us-attack .rig.atk-shove .a-body  { animation: rgShoveB 0.62s ease-in-out both; }
.us-attack .rig.atk-shove .a-leg-b { animation: rgPushLeg 0.62s ease-in-out both; }

@keyframes rgThrowA { 0%, 100% { transform: rotate(var(--j)); } 28%, 40% { transform: rotate(-72deg); } 68% { transform: rotate(-150deg); } }
@keyframes rgThrowF { 0%, 100% { transform: rotate(var(--j)); } 28%, 40% { transform: rotate(-30deg); } 68% { transform: rotate(-50deg); } }
@keyframes rgThrowT { 0%, 100% { transform: rotate(var(--j)); } 28%, 40% { transform: rotate(calc(var(--j) + 12deg)); } 68% { transform: rotate(calc(var(--j) - 24deg)); } }
@keyframes rgThrowB { 0%, 100% { transform: translate(0, 0); } 28%, 40% { transform: translate(5px, 0); } 68% { transform: translate(-2px, -2px); } }
.us-attack .rig.atk-throw .a-arm-f, .us-attack .rig.atk-throw .a-arm-b  { animation: rgThrowA 0.62s ease-in-out both; }
.us-attack .rig.atk-throw .a-fore-f, .us-attack .rig.atk-throw .a-fore-b { animation: rgThrowF 0.62s ease-in-out both; }
.us-attack .rig.atk-throw .a-torso { animation: rgThrowT 0.62s ease-in-out both; }
.us-attack .rig.atk-throw .a-body  { animation: rgThrowB 0.62s ease-in-out both; }

@keyframes rgSlamA { 0%, 100% { transform: rotate(var(--j)); } 38%, 46% { transform: rotate(-172deg); } 62% { transform: rotate(-58deg); } }
@keyframes rgSlamF { 0%, 100% { transform: rotate(var(--j)); } 38%, 46% { transform: rotate(-8deg); } 62% { transform: rotate(-14deg); } }
@keyframes rgSlamT { 0%, 100% { transform: rotate(var(--j)); } 38%, 46% { transform: rotate(calc(var(--j) - 8deg)); } 62% { transform: rotate(calc(var(--j) + 20deg)); } }
@keyframes rgSlamB { 0%, 100% { transform: translate(0, 0); } 38%, 46% { transform: translate(0, -2px); } 62% { transform: translate(5px, 2px); } }
.us-attack .rig.atk-slam .a-arm-f, .us-attack .rig.atk-slam .a-arm-b  { animation: rgSlamA 0.62s ease-in-out both; }
.us-attack .rig.atk-slam .a-fore-f, .us-attack .rig.atk-slam .a-fore-b { animation: rgSlamF 0.62s ease-in-out both; }
.us-attack .rig.atk-slam .a-torso { animation: rgSlamT 0.62s ease-in-out both; }
.us-attack .rig.atk-slam .a-body  { animation: rgSlamB 0.62s ease-in-out both; }

@keyframes rgSwingA  { 0%, 100% { transform: rotate(var(--j)); } 34% { transform: rotate(calc(var(--j) + 34deg)); } 56%, 64% { transform: rotate(-112deg); } }
@keyframes rgSwingF  { 0%, 100% { transform: rotate(var(--j)); } 34% { transform: rotate(-70deg); } 56%, 64% { transform: rotate(-8deg); } }
@keyframes rgSwingAB { 0%, 100% { transform: rotate(var(--j)); } 34% { transform: rotate(calc(var(--j) + 24deg)); } 56%, 64% { transform: rotate(-100deg); } }
@keyframes rgSwingT  { 0%, 100% { transform: rotate(var(--j)); } 34% { transform: rotate(calc(var(--j) - 12deg)); } 56%, 64% { transform: rotate(calc(var(--j) + 14deg)); } }
.us-attack .rig.atk-swing .a-arm-f  { animation: rgSwingA 0.62s ease-in-out both; }
.us-attack .rig.atk-swing .a-fore-f { animation: rgSwingF 0.62s ease-in-out both; }
.us-attack .rig.atk-swing .a-arm-b  { animation: rgSwingAB 0.62s ease-in-out both; }
.us-attack .rig.atk-swing .a-torso  { animation: rgSwingT 0.62s ease-in-out both; }
.us-attack .rig.atk-swing .a-body   { animation: rgStepIn 0.62s ease-in-out both; }

@keyframes rgSpinRoot { from { transform: translateY(var(--y, 0px)) rotate(0deg); } to { transform: translateY(var(--y, 0px)) rotate(-360deg); } }
@keyframes rgSpinLeg  { 0%, 100% { transform: rotate(var(--j)); } 20%, 80% { transform: rotate(-95deg); } }
.us-attack .rig.atk-spin .a-root  { transform-origin: 32px 62px; animation: rgSpinRoot 0.62s ease-in-out both; }
.us-attack .rig.atk-spin .a-leg-f { animation: rgSpinLeg 0.62s ease-in-out both; }
.us-attack .rig.atk-spin .a-shin-f { animation: none; transform: rotate(0deg); }

@keyframes rgRam { 0%, 100% { transform: translate(0, var(--y, 0px)) rotate(0deg); } 30% { transform: translate(-2px, var(--y, 0px)) rotate(-5deg); } 55%, 62% { transform: translate(9px, var(--y, 0px)) rotate(2deg); } }
.us-attack .rig.atk-ram .a-root  { animation: rgRam 0.62s ease-in-out both; }
.us-attack .rig.atk-ram .a-wheel { animation: rgSpin 0.3s linear infinite; }
.us-attack .rig.atk-ram .a-arm-f, .us-attack .rig.atk-ram .a-fore-f,
.us-attack .rig.atk-ram .a-torso, .us-attack .rig.atk-ram .a-body { animation: none; }

@keyframes rgTapA { 0%, 100% { transform: rotate(var(--j)); } 34% { transform: rotate(-150deg); } 56%, 64% { transform: rotate(-52deg); } }
@keyframes rgTapF { 0%, 100% { transform: rotate(var(--j)); } 34%, 64% { transform: rotate(-30deg); } }
.us-attack .rig.atk-tap .a-arm-f  { animation: rgTapA 0.62s ease-in-out both; }
.us-attack .rig.atk-tap .a-fore-f { animation: rgTapF 0.62s ease-in-out both; }
.us-attack .rig.atk-tap .a-torso  { animation: rgLeanIn 0.62s ease-in-out both; }

@keyframes rgDive { 0%, 100% { transform: translate(0, var(--y, 0px)) rotate(0deg); } 35% { transform: translate(-2px, calc(var(--y, 0px) - 5px)) rotate(-10deg); } 58%, 64% { transform: translate(10px, calc(var(--y, 0px) + 1px)) rotate(28deg); } }
@keyframes rgDiveArm { 0%, 100% { transform: rotate(var(--j)); } 40%, 70% { transform: rotate(-170deg); } }
.us-attack .rig.atk-dive .a-root { animation: rgDive 0.62s ease-in-out both; }
.us-attack .rig.atk-dive .a-arm-f, .us-attack .rig.atk-dive .a-arm-b { animation: rgDiveArm 0.62s ease-in-out both; }
.us-attack .rig.atk-dive .a-fore-f, .us-attack .rig.atk-dive .a-torso, .us-attack .rig.atk-dive .a-body { animation: none; }

@keyframes rgSpikeA { 0%, 100% { transform: rotate(var(--j)); } 30% { transform: rotate(-175deg); } 55%, 62% { transform: rotate(-60deg); } }
@keyframes rgSpikeF { 0%, 100% { transform: rotate(var(--j)); } 30% { transform: rotate(-40deg); } 55%, 62% { transform: rotate(-10deg); } }
.us-attack .rig.atk-spike .a-arm-f  { animation: rgSpikeA 0.62s ease-in-out both; }
.us-attack .rig.atk-spike .a-fore-f { animation: rgSpikeF 0.62s ease-in-out both; }
.us-attack .rig.atk-spike .a-root   { animation: rgJump 0.62s ease-in-out both; }

/* ================= shoot: ranged (0.72 s one-shot) =================
   The projectile leaves at ~45 % (Field.cshtml SHOT_RELEASE_MS). */
@keyframes rgAimA  { 0%, 100% { transform: rotate(var(--j)); } 26%, 40% { transform: rotate(-86deg); } 46% { transform: rotate(-100deg); } 60% { transform: rotate(-88deg); } }
@keyframes rgAimF  { 0%, 100% { transform: rotate(var(--j)); } 26%, 60% { transform: rotate(-4deg); } }
@keyframes rgAimAB { 0%, 100% { transform: rotate(var(--j)); } 26%, 60% { transform: rotate(-74deg); } }
@keyframes rgAimFB { 0%, 100% { transform: rotate(var(--j)); } 26%, 60% { transform: rotate(-40deg); } }
@keyframes rgRecoil{ 0%, 42%, 70%, 100% { transform: translate(0, 0); } 47% { transform: translate(-1.8px, 0); } }
@keyframes rgFlash { 0%, 42%, 56%, 100% { opacity: 0; } 45% { opacity: 1; } }
.us-shoot .rig.sh-aim .a-arm-f  { animation: rgAimA 0.72s ease-in-out both; }
.us-shoot .rig.sh-aim .a-fore-f { animation: rgAimF 0.72s ease-in-out both; }
.us-shoot .rig.sh-aim .a-arm-b  { animation: rgAimAB 0.72s ease-in-out both; }
.us-shoot .rig.sh-aim .a-fore-b { animation: rgAimFB 0.72s ease-in-out both; }
.us-shoot .rig.sh-aim .a-body   { animation: rgRecoil 0.72s ease-out both; }
.us-shoot .rig.sh-aim .a-flash  { animation: rgFlash 0.72s linear both; }

@keyframes rgJsRoot { 0%, 100% { transform: translateY(var(--y, 0px)); } 22% { transform: translateY(calc(var(--y, 0px) + 2px)); } 45%, 54% { transform: translateY(calc(var(--y, 0px) - 8px)); } }
@keyframes rgJsA    { 0%, 100% { transform: rotate(var(--j)); } 22% { transform: rotate(-70deg); } 45%, 58% { transform: rotate(-168deg); } }
@keyframes rgJsF    { 0%, 100% { transform: rotate(var(--j)); } 22% { transform: rotate(-110deg); } 45% { transform: rotate(-60deg); } 58% { transform: rotate(-10deg); } }
@keyframes rgJsShin { 0%, 100% { transform: rotate(var(--j)); } 22% { transform: rotate(calc(var(--j) + 40deg)); } 45% { transform: rotate(calc(var(--j) + 6deg)); } }
@keyframes rgJsThigh{ 0%, 100% { transform: rotate(var(--j)); } 22% { transform: rotate(calc(var(--j) - 20deg)); } }
@keyframes rgRelease{ 0%, 48% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
.us-shoot .rig.sh-jump .a-root { animation: rgJsRoot 0.72s ease-in-out both; }
.us-shoot .rig.sh-jump .a-arm-f, .us-shoot .rig.sh-jump .a-arm-b { animation: rgJsA 0.72s ease-in-out both; }
.us-shoot .rig.sh-jump .a-fore-f, .us-shoot .rig.sh-jump .a-fore-b { animation: rgJsF 0.72s ease-in-out both; }
.us-shoot .rig.sh-jump .a-shin-f, .us-shoot .rig.sh-jump .a-shin-b { animation: rgJsShin 0.72s ease-in-out both; }
.us-shoot .rig.sh-jump .a-leg-f, .us-shoot .rig.sh-jump .a-leg-b { animation: rgJsThigh 0.72s ease-in-out both; }
.us-shoot .rig.sh-jump .a-hball { animation: rgRelease 0.72s linear both; }

@keyframes rgSlapA { 0%, 100% { transform: rotate(var(--j)); } 36% { transform: rotate(calc(var(--j) + 50deg)); } 50%, 60% { transform: rotate(-96deg); } }
@keyframes rgSlapT { 0%, 100% { transform: rotate(var(--j)); } 36% { transform: rotate(calc(var(--j) - 14deg)); } 50%, 60% { transform: rotate(calc(var(--j) + 16deg)); } }
.us-shoot .rig.sh-slap .a-arm-f, .us-shoot .rig.sh-slap .a-arm-b { animation: rgSlapA 0.72s ease-in-out both; }
.us-shoot .rig.sh-slap .a-torso { animation: rgSlapT 0.72s ease-in-out both; }

/* ================= defend: braced until the unit's next turn ================= */
.us-defend .rig .a-body, .us-block .rig .a-body { animation: rgBob 1.6s ease-in-out infinite; }
.us-defend .rig.df-guard .a-arm-f,  .us-block .rig.df-guard .a-arm-f  { transform: rotate(-62deg); }
.us-defend .rig.df-guard .a-fore-f, .us-block .rig.df-guard .a-fore-f { transform: rotate(-122deg); }
.us-defend .rig.df-guard .a-arm-b,  .us-block .rig.df-guard .a-arm-b  { transform: rotate(-52deg); }
.us-defend .rig.df-guard .a-fore-b, .us-block .rig.df-guard .a-fore-b { transform: rotate(-124deg); }
.us-defend .rig.df-guard .a-head,   .us-block .rig.df-guard .a-head   { transform: rotate(9deg); }
.us-defend .rig.df-guard .a-leg-f,  .us-block .rig.df-guard .a-leg-f  { transform: rotate(-18deg); }
.us-defend .rig.df-guard .a-shin-f, .us-block .rig.df-guard .a-shin-f { transform: rotate(16deg); }
.us-defend .rig.df-guard .a-leg-b,  .us-block .rig.df-guard .a-leg-b  { transform: rotate(16deg); }

.us-defend .rig.df-brace .a-root,   .us-block .rig.df-brace .a-root   { transform: translateY(calc(var(--y, 0px) + 3px)); }
.us-defend .rig.df-brace .a-leg-f,  .us-block .rig.df-brace .a-leg-f  { transform: rotate(-30deg); }
.us-defend .rig.df-brace .a-shin-f, .us-block .rig.df-brace .a-shin-f { transform: rotate(40deg); }
.us-defend .rig.df-brace .a-leg-b,  .us-block .rig.df-brace .a-leg-b  { transform: rotate(22deg); }
.us-defend .rig.df-brace .a-shin-b, .us-block .rig.df-brace .a-shin-b { transform: rotate(32deg); }
.us-defend .rig.df-brace .a-torso,  .us-block .rig.df-brace .a-torso  { transform: rotate(16deg); }
.us-defend .rig.df-brace .a-arm-f,  .us-block .rig.df-brace .a-arm-f  { transform: rotate(-72deg); }
.us-defend .rig.df-brace .a-fore-f, .us-block .rig.df-brace .a-fore-f { transform: rotate(-40deg); }
.us-defend .rig.df-brace .a-arm-b,  .us-block .rig.df-brace .a-arm-b  { transform: rotate(-66deg); }
.us-defend .rig.df-brace .a-fore-b, .us-block .rig.df-brace .a-fore-b { transform: rotate(-50deg); }

.us-defend .rig.df-shield .a-arm-f,  .us-block .rig.df-shield .a-arm-f  { transform: rotate(-78deg); }
.us-defend .rig.df-shield .a-fore-f, .us-block .rig.df-shield .a-fore-f { transform: rotate(-38deg); }
.us-defend .rig.df-shield .a-arm-b,  .us-block .rig.df-shield .a-arm-b  { transform: rotate(-40deg); }
.us-defend .rig.df-shield .a-fore-b, .us-block .rig.df-shield .a-fore-b { transform: rotate(-70deg); }
.us-defend .rig.df-shield .a-leg-f,  .us-block .rig.df-shield .a-leg-f  { transform: rotate(-18deg); }
.us-defend .rig.df-shield .a-leg-b,  .us-block .rig.df-shield .a-leg-b  { transform: rotate(18deg); }
.us-defend .rig.df-shield .a-prop,   .us-block .rig.df-shield .a-prop   { transform: rotate(calc(var(--p, 0deg) - 20deg)) scale(1.25); }

.us-defend .rig.df-tuck .a-root,   .us-block .rig.df-tuck .a-root   { transform: translateY(calc(var(--y, 0px) + 3px)); }
.us-defend .rig.df-tuck .a-torso,  .us-block .rig.df-tuck .a-torso  { transform: rotate(24deg); }
.us-defend .rig.df-tuck .a-head,   .us-block .rig.df-tuck .a-head   { transform: rotate(14deg); }
.us-defend .rig.df-tuck .a-arm-f,  .us-block .rig.df-tuck .a-arm-f  { transform: rotate(-160deg); }
.us-defend .rig.df-tuck .a-fore-f, .us-block .rig.df-tuck .a-fore-f { transform: rotate(-70deg); }
.us-defend .rig.df-tuck .a-arm-b,  .us-block .rig.df-tuck .a-arm-b  { transform: rotate(-150deg); }
.us-defend .rig.df-tuck .a-fore-b, .us-block .rig.df-tuck .a-fore-b { transform: rotate(-80deg); }
.us-defend .rig.df-tuck .a-leg-f,  .us-block .rig.df-tuck .a-leg-f  { transform: rotate(-40deg); }
.us-defend .rig.df-tuck .a-shin-f, .us-block .rig.df-tuck .a-shin-f { transform: rotate(60deg); }
.us-defend .rig.df-tuck .a-leg-b,  .us-block .rig.df-tuck .a-leg-b  { transform: rotate(-10deg); }
.us-defend .rig.df-tuck .a-shin-b, .us-block .rig.df-tuck .a-shin-b { transform: rotate(70deg); }

.us-defend .rig.df-bank .a-root, .us-block .rig.df-bank .a-root { transform: translateY(calc(var(--y, 0px) - 2px)) rotate(-9deg); }

/* A hit while braced: pushed back half a step, no stagger. */
@keyframes rgBlock { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-3px, 0); } }
.us-block .rig .a-body { animation: rgBlock 0.42s ease-out both; }
.us-block svg.unit-sprite { filter: drop-shadow(0 0 5px rgba(120, 190, 255, 0.95)) drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }

/* ================= hit: recoil (0.42 s one-shot) ================= */
@keyframes rgHitBody { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-3px, 0) rotate(-6deg); } }
@keyframes rgHitHead { 0%, 100% { transform: rotate(var(--j)); } 25% { transform: rotate(calc(var(--j) - 14deg)); } }
@keyframes rgHitArm  { 0%, 100% { transform: rotate(var(--j)); } 25% { transform: rotate(calc(var(--j) - 30deg)); } }
.us-hit .rig .a-body  { animation: rgHitBody 0.42s ease-out both; }
.us-hit .rig .a-head  { animation: rgHitHead 0.42s ease-out both; }
.us-hit .rig .a-arm-f, .us-hit .rig .a-arm-b { animation: rgHitArm 0.42s ease-out both; }

/* dead: everything stops (the element-level topple is in game-battle.css) */
.us-dead .rig * { animation: none !important; }