/* ============================================================
   DRAWN FROM THE DARK — style.css  (v0.7)
   Clean rewrite — no attribute selectors, explicit rules,
   correct proportions matching the approved screenshot.
   ============================================================ */

:root {
    --col-right:            235px;
    --gap:                  8px;
    --border:               #000000;
    --text-main:            #fff;
    --text-dim:             #000000;
    --text-gold:            #000000;
    --text-warn:            #e05050;
    --font:                 Garamond, 'Times New Roman', serif;
    --font-cta:             'Trajan Pro', 'Trajan', 'Times New Roman', serif;
    --radius:               6px;
    --profile-info-width:   550px;
    --portrait-wrapper-size: 260px;
}

/* --- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font);
    color: var(--text-main);
    background: #0e0e18 url('assets/ui/woodentable-background.jpg') center top / cover fixed;
    min-height: 100vh;
    /* No top nav anymore — the old 111px header band is reclaimed; nav lives in the burger menu. */
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cardPopIn {
    0% {
        opacity: 0;
        transform: scale(0.85) rotateX(15deg) translateY(-20px);
    }
    60% {
        opacity: 1;
        transform: scale(1.05) rotateX(-5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateX(0deg) translateY(0);
    }
}

@keyframes cardPopOut {
    0% {
        opacity: 1;
        transform: scale(1) rotateX(0deg);
    }
    40% {
        opacity: 0.7;
        transform: scale(1.05) rotateX(-8deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) rotateX(20deg) translateY(20px);
    }
}

@keyframes darkDreadPulse {
    0% { transform: scale(1); }
    8% { transform: scale(1.08); }
    17% { transform: scale(1); }
    25% { transform: scale(1); }
    33% { transform: scale(1.04); }
    42% { transform: scale(1); }
    50% { transform: scale(1); }
    58% { transform: scale(1.02); }
    67% { transform: scale(1); }
    100% { transform: scale(1); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 215, 0, 0.6); }
    50%      { box-shadow: 0 0 12px rgba(255, 215, 0, 1); }
}


/* ============================================================
   NAV BAR
   ============================================================ */

/* ============================================================
   BURGER MENU  (replaces the old fixed top nav, on every screen size)
   ============================================================ */
.burger-btn {
    position: fixed;
    top: 12px;
    left: 12px;
    width: 46px;
    height: 46px;
    z-index: 90;            /* above the game/landing, below full-screen overlays (≥100) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: #000;
    border: 1px solid #241b10;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
/* Login — fixed top-right, a plain word. Separate from the burger (site nav) — account access. */
.login-link {
    position: fixed;
    top: 12px;
    right: 16px;
    height: 46px;              /* same band as the burger button (top:12px, 46px) so they align */
    display: flex;
    align-items: center;
    z-index: 90;
    font-family: var(--font-cta, serif);
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: #fff952;            /* matches the burger accent */
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    transition: color 0.2s ease;
}
.login-link:hover { color: #ffffff; }

/* USER-TESTER TOOLS — a full-width footer BAR pinned to the bottom of the viewport (Discord / X /
   feedback), sitting UNDER all the game/page content rather than floating over the battlefield (the old
   bottom-left stack overlapped play). The game reserves its height in fitGameScale (TESTER_FOOTER_H) and
   the homepage reserves it via #homepage-container padding-bottom. Remove (or hide) #tester-tools for
   public launch (and drop the reserved height in fitGameScale + the homepage padding). */
#tester-tools {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;                 /* above game UI, below full-screen overlays (≥100) */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 16px;
    background: linear-gradient(to bottom, #2a2014, #16110a);  /* brown footer band (matches brand) */
    border-top: 2px solid #6e4f2e;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.5);
}
/* Brand mark on the left of the footer — absolutely positioned so the buttons stay centred in the bar. */
.tester-footer-logo {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
    width: auto;
    opacity: 0.9;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.tester-feedback-btn, .tester-discord-btn, .tester-twitter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    text-decoration: none;
    font-family: var(--font-cta, sans-serif);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s ease, background 0.15s ease;
}
.tester-feedback-btn:hover, .tester-discord-btn:hover, .tester-twitter-btn:hover { transform: translateY(-2px); }
.tester-feedback-btn { background: #107c41; animation: testerPulse 2.2s ease-in-out infinite; }  /* green, the loud primary */
.tester-feedback-btn:hover { background: #0e8f49; animation: none; }
.tester-discord-btn  { background: #5865f2; }   /* Discord blurple */
.tester-discord-btn:hover  { background: #6b76f5; }
.tester-twitter-btn  { background: #000000; }   /* X / Twitter black */
.tester-twitter-btn:hover  { background: #1c1c1c; }
.tester-feedback-icon, .tester-discord-icon, .tester-twitter-icon { flex-shrink: 0; display: block; }
.tester-feedback-label, .tester-discord-label, .tester-twitter-label { display: flex; flex-direction: column; line-height: 1.15; }
.tester-feedback-label strong, .tester-discord-label strong, .tester-twitter-label strong { font-size: 0.82rem; letter-spacing: 0.04em; }
.tester-feedback-label small, .tester-discord-label small, .tester-twitter-label small { font-size: 0.68rem; opacity: 0.9; }
@keyframes testerPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.55), 0 0 0 0 rgba(16,124,65,0.55); }
    50%      { box-shadow: 0 4px 16px rgba(0,0,0,0.55), 0 0 0 8px rgba(16,124,65,0.0); }
}

/* Quick Wiki book — sits in the same top band, just left of Login. Styled as a sibling of the burger
   (black plate, subtle border) so it reads as a persistent control; discreet until hovered. */
.wiki-quick-btn {
    position: fixed;
    top: 12px;
    right: 76px;               /* clears the "Login" word to its right */
    width: 46px;
    height: 46px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border: 1px solid #241b10;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    color: #fff952;            /* matches the burger / login accent */
    opacity: 0.78;             /* discreet at rest */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
    transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.wiki-quick-btn:hover { opacity: 1; color: #ffffff; transform: translateY(-1px); }

.burger-btn span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: #fff952;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
}
.burger-btn:hover span { background: #ffffff; }
/* Morph to an X when open */
.burger-btn.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger-btn.open span:nth-child(2) { opacity: 0; }
.burger-btn.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.burger-menu {
    position: fixed;
    top: 66px;
    left: 12px;
    z-index: 90;
    min-width: 190px;
    background: #000;
    border: 1px solid #241b10;
    border-radius: 6px;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.burger-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.burger-logo-link {
    display: block;
    padding: 4px 18px 10px;
    border-bottom: 1px solid #241b10;
    margin-bottom: 6px;
}
.burger-logo { height: 60px; object-fit: contain; }

.nav-link {
    color: #fff952;
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    text-decoration: none;
}
.nav-link:hover { color: #ffffff; }

.burger-menu .nav-link { padding: 9px 20px; font-size: 0.92rem; }
.burger-menu .nav-link:hover { background: rgba(255, 255, 255, 0.05); }


/* ============================================================
   FIXED-PIXEL GAME LAYOUT
   Left col: 887px  |  Right col: 393px  =  1280px total
   Panels at natural background dimensions — overflow: visible
   allows ornamental spikes/shadows to bleed outside bounds.
   ============================================================ */

/* Uniform game scaler — shrinks the fixed 1393px layout to fit smaller viewports (width & height
   together). #game-scaler holds the natural design size; fitGameScale() sets its transform and sizes
   the wrap to the scaled box so there's no leftover space or scrollbars. */
#game-scale-wrap { margin: 0 auto; overflow: hidden; }
#game-scaler { width: 1393px; transform-origin: top left; }

.game-layout {
    display: grid;
    grid-template-columns: 1000px 393px;
    width: 1393px; /* 1000 + 393 — wider than 1280px, spikes show fully */
    margin: 0 auto;
    padding: 0 0 40px;
    align-items: start;
    overflow: visible;
}

.left-column  { width: 1000px; display: flex; flex-direction: column; gap: 0; overflow: visible; }
.right-column { width: 393px;  display: flex; flex-direction: column; gap: 0; overflow: visible; }


/* ============================================================
   1. PHASE HEADER BAR
   ============================================================ */

.phase-header {
    /* Natural: 916 × 94px — slightly wider than 887px column, spikes bleed right */
    width: 1000px;
    height: 133px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 180px 0 80px;
    background: transparent url('assets/ui/1event/1eventround-ui-background.png') left top / 1000px 133px no-repeat;
    border: none;
    border-radius: 0;
    overflow: visible;
    position: relative;
    margin-bottom: -32px; /* round counter bleeds over battlefield top edge */
    z-index: 2;           /* sits above battlefield */
}

.phase-label-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-family: var(--font-cta);
    font-size: 0.7rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.1em;
    padding: 2px 17px;
    display: flex;
    margin-left: -42px;
    align-items: center;
    background: rgba(255, 255, 255, 0.25);
}

.phase-indicator {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
}

.phase-item {
  font-size: 0.8rem;
  color: #fff;
  text-transform: capitalize;
  letter-spacing: 0.09em;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0.9;
}

.phase-item.active {
    font-size: 2rem;
    color: #ffff00;
    font-weight: bold;
    opacity: 1;
}

.phase-cta { flex: 1; display: flex; justify-content: center; align-items: center; padding: 8px 0; }

/* Round counter — absolutely positioned, bleeds below into battlefield */
.round-counter {
    position: absolute;
    right: 13px;
    top: 54%;
    transform: translateY(-50%);
    width: 130px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

.round-counter-text {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; line-height: 1.1;
}
.round-label { font-size: 0.62rem; letter-spacing: 0.08em; color: #000; font-family: var(--font-cta); }
.round-value { font-size: 2.2rem; font-weight: bold; color: #8b1010; font-family: var(--font-cta); line-height: 1; }
.round-total { color: #000; }


/* ============================================================
   2. BATTLEFIELD
   ============================================================ */

.battlefield {
    width: 1000px;
    height: 424px;
    flex-shrink: 0;
    display: flex;
    overflow: visible;
    background: transparent;
    margin-bottom: -10px;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Combat turn banner — sits just below the battlefield (absolute, so it never
   reflows the panels) and reads prominently whose turn it is during battle. */
/* Battle spotlight — a full-screen dim that the battlefield + town panel sit above,
   so the only areas with effect during battle stay lit. pointer-events:none so the
   dimmed controls (e.g. End Round) still work. */
.battle-dim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s ease;
}
.battle-dim.active { opacity: 1; }

/* Both lift above .battle-dim (1200). The battlefield sits ABOVE the town panel so its child speech
   modals (character panels) render on top of the town panel during battle (e.g. on-death speeches). */
.battlefield.battle-focus { position: relative; z-index: 1400; }
.town-panel.battle-focus  { position: relative; z-index: 1300; }

/* During battle the header drops its stacking context so its button can be lifted
   above the dim individually — the rest of the header stays dimmed. */
.phase-header.battle-focus { z-index: auto; }
.phase-btn.battle-end-lit  { position: relative; z-index: 1350; }

.combat-turn-banner {
    position: absolute;
    top: 100%;
    margin-top: -4px;
    left: 0;
    right: 0;
    z-index: 30;                 /* paints above the stones panel below it */
    text-align: center;
    font-family: var(--font-cta);
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 10px 0;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
/* Entrance / turn-change animations are driven by classes from renderCombatTurnBanner() so they
   re-fire on each turn change (not just when the element first appears). */
.combat-turn-banner.turn-anim-in  { animation: turnBannerIn 0.3s ease-out; }
.combat-turn-banner.turn-anim-pop { animation: playerTurnPop 0.7s cubic-bezier(0.18, 0.9, 0.3, 1.2); }
.combat-turn-banner.enemy-turn {
    background: linear-gradient(180deg, #5a1414, #240808);
    color: #ff6b5a;
    border: 1px solid #aa3333;
    text-shadow: 0 0 12px rgba(255, 80, 60, 0.75);
}
.combat-turn-banner.player-turn {
    background: linear-gradient(180deg, #14304a, #081726);
    color: #ffd45c;
    border: 1px solid #c8a96e;
    text-shadow: 0 0 12px rgba(255, 212, 92, 0.65);
}
@keyframes turnBannerIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Player-turn "pop": a squash/stretch bounce with a gold glow flash — only scaleY so the full-width
   banner never widens past its container. Eye-catching once per round when control returns to you. */
@keyframes playerTurnPop {
    0%   { opacity: 0; transform: translateY(-14px) scaleY(0.7);  box-shadow: 0 0 0 rgba(255, 212, 92, 0); }
    35%  { opacity: 1; transform: translateY(4px)   scaleY(1.14); box-shadow: 0 0 32px rgba(255, 212, 92, 0.95); }
    60%  {             transform: translateY(-2px)  scaleY(0.97); box-shadow: 0 0 20px rgba(255, 212, 92, 0.6); }
    100% { opacity: 1; transform: translateY(0)     scaleY(1);    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55); }
}

.battlefield-grass,
.battlefield-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.battlefield-grid-overlay {
    z-index: 2;
}

.battlefield-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
  grid-template-rows: auto auto 2px auto auto;
  gap: 4px;
  padding: 12px;
  height: 402px;
  width: 920px;
  transition: opacity 0.45s ease-in-out;
}

/* Town tier-up grid expansion: the grid fades out (old size), is rebuilt at the new column count
   while hidden, then fades back in — so units reform into the wider layout instead of teleporting. */
.battlefield-grid.battlefield-reforming { opacity: 0; }

/* Grid row styling */
.grid-row-enemy-back    { grid-row: 1; }
.grid-row-enemy-front   { grid-row: 2; }
.grid-row-centre-line   { grid-row: 3; grid-column: 1 / -1; }
.grid-row-player-front  { grid-row: 4; }
.grid-row-player-back   { grid-row: 5; }

/* Grid slot (empty cell) */
.battlefield-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    border-radius: 3px;
    position: relative;
}

/* Terrain — tile sits BEHIND the unit (only visible on empty cells); scenery icon sits on the TOP
   layer, bottom-left, as the always-visible "there's terrain here" cue + tooltip trigger. */
.terrain-tile {
    position: absolute;
    inset: 0;
    width: 123px;
    height: 90px;
    z-index: 0;
    pointer-events: none;
    border-radius: 3px;
}
/* Lift the occupant above the tile so a unit standing on terrain covers it. */
.battlefield-slot.has-terrain .field-unit-card,
.battlefield-slot.has-terrain .enemy-card { position: relative; z-index: 1; }
.scenery-icon {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 22px;
    height: 22px;
    z-index: 6;
    cursor: help;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}

.battlefield-slot.enemy-back    { border-color: #3a1010; }
.battlefield-slot.enemy-front   { border-color: #4a1515; }
.battlefield-slot.player-front  { border-color: #1a3040; }
.battlefield-slot.player-back   { border-color: #1a2540; }

.battlefield-slot.occupied {
    background: rgba(255, 249, 82, 0.0);
}

.battlefield-slot.movement-available {
    background: rgba(255, 249, 82, 0.25);
    border-color: #fff952;
    box-shadow: inset 0 0 12px rgba(255, 249, 82, 0.4);
    transition: all 0.2s ease;
}

.battlefield-slot.movement-available:hover {
    background: rgba(255, 249, 82, 0.35);
    box-shadow: inset 0 0 16px rgba(255, 249, 82, 0.6);
}

.battlefield-slot.current-slot-attack {
    background: rgba(255, 170, 68, 0.25);
    border-color: #ffaa44;
    box-shadow: inset 0 0 8px rgba(255, 170, 68, 0.3);
}

.battlefield-slot.current-slot-attack:hover {
    background: rgba(255, 170, 68, 0.35);
    box-shadow: inset 0 0 12px rgba(255, 170, 68, 0.5);
}

@keyframes enemyDeath {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0) rotateZ(0deg);
        filter: brightness(1) blur(0);
    }
    15% {
        opacity: 1;
        transform: scale(1.15) translateY(-8px) rotateZ(-6deg);
        filter: brightness(1.2) blur(0);
    }
    30% {
        opacity: 0.9;
        transform: scale(1.2) translateY(6px) rotateZ(8deg);
        filter: brightness(0.9) blur(1px);
    }
    60% {
        opacity: 0.4;
        transform: scale(0.3) translateY(20px) rotateZ(45deg);
        filter: brightness(0.5) blur(4px);
    }
    100% {
        opacity: 0;
        transform: scale(0) translateY(40px) rotateZ(180deg);
        filter: brightness(0.2) blur(8px);
    }
}

@keyframes enemyRout {
    0% { opacity: 1; transform: translateY(0) rotateZ(0deg); }
    50% { opacity: 0.6; transform: translateY(-20px) rotateZ(-4deg); }
    100% { opacity: 0; transform: translateY(-100px) rotateZ(12deg); }
}

@keyframes flagWave {
    0%   { transform: rotateZ(-11deg) skewX(10deg)  scaleX(1);    }
    20%  { transform: rotateZ(9deg)   skewX(-11deg) scaleX(0.92); }
    40%  { transform: rotateZ(-8deg)  skewX(9deg)   scaleX(1);    }
    60%  { transform: rotateZ(11deg)  skewX(-9deg)  scaleX(0.94); }
    80%  { transform: rotateZ(-7deg)  skewX(7deg)   scaleX(1);    }
    100% { transform: rotateZ(-11deg) skewX(10deg)  scaleX(1);    }
}

.battlefield-slot.enemy-death .field-unit-card {
    animation: enemyDeath 0.5s ease-out forwards;
}

.battlefield-slot.enemy-rout .field-unit-card {
    animation: enemyRout 0.5s ease-in forwards;
}

.rout-flag {
    position: absolute;
    top: -4px;
    right: -2px;
    width: 30px;
    height: auto;
    transform-origin: top center;   /* swing/ripple from the pole at the top */
    animation: flagWave 0.42s ease-in-out infinite;
    pointer-events: none;
    z-index: 20;
}

/* Morale-hit cue — small flag that flicks up on a SURVIVING neighbour after a
   cascade, then fades. Smaller / shorter than .rout-flag so it reads as a minor
   shake, not a full retreat. Sits top-left to clear the rout flag + info icon. */
.morale-hit-flag {
    position: absolute;
    top: -6px;
    left: -8px;
    width: 20px;
    height: auto;
    transform-origin: top center;
    pointer-events: none;
    z-index: 19;
    animation: moraleHitFlag 1s ease-in-out forwards;
}
@keyframes moraleHitFlag {
    0%   { opacity: 0; transform: translateY(8px) scale(0.4) rotateZ(0deg); }
    18%  { opacity: 1; transform: translateY(0) scale(1) rotateZ(-12deg); }
    40%  { transform: translateY(0) scale(1) rotateZ(10deg); }
    62%  { transform: translateY(0) scale(1) rotateZ(-6deg); }
    80%  { opacity: 1; transform: translateY(0) scale(1) rotateZ(3deg); }
    100% { opacity: 0; transform: translateY(-10px) scale(0.9) rotateZ(0deg); }
}

@keyframes friendlyDeath {
    0% { opacity: 1; transform: scale(1) translateY(0); }
    70% { opacity: 0.5; }
    100% { opacity: 0; transform: scale(0.8) translateY(8px); }
}

@keyframes friendlyRout {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(80px); }
}

.battlefield-slot.friendly-death .field-unit-card {
    animation: friendlyDeath 0.5s ease-out forwards;
}

.battlefield-slot.friendly-rout .field-unit-card {
    animation: friendlyRout 0.5s ease-in forwards;
}

/* Unit / enemy cards — column layout: portrait top, stats below */
.field-unit-card {
  width: 75px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  cursor: default;
  transition: all 0.2s ease;
  user-select: none;
  position: relative;
}

.unit-cover {
  position: absolute;
  top: 5px;
  left: -25px;
  width: 105px;
  height: 75px;
  object-fit: contain;
  pointer-events: none;
  z-index: 10;
  display: block;
}

/* Initiative badge — small corner chip (⚡N) showing a combatant's turn-order value within its phase. */
.init-badge {
  position: absolute;
  top: 2px; right: -2px;
  z-index: 11;
  font-size: 0.7rem; font-weight: bold; line-height: 1;
padding: 1px 10px 1px 1px;
  background: rgba(18, 30, 52, 0.92); border: 1px solid #7cc6ff; color: #d4ecff;
  pointer-events: none; text-shadow: 0 1px 1px rgba(0,0,0,0.9); white-space: nowrap;
}
.enemy-init-badge { background: rgba(52, 20, 18, 0.92); border-color: #ff9a7c; color: #ffdccf; }
/* Active-initiative unit — whose turn it is in the interleaved order (Phase B). */
.field-unit-card.init-active { border-color: #7cffa0; box-shadow: 0 0 12px rgba(124, 255, 160, 0.6); }

.field-unit-card.primed         { border-color: #fff952; }
.field-unit-card.lead-targetable{ border-color: #fff952; box-shadow: 0 0 8px rgba(255, 249, 82, 0.4); }
/* Event damage targeting: click the unit to assign the hit — red, pulsing "this will hurt" cue. */
.field-unit-card.damage-targetable {
    border-color: #ee4444;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(238, 68, 68, 0.6);
    animation: damageTargetPulse 1.1s ease-in-out infinite;
}
.field-unit-card.damage-targetable:hover {
    box-shadow: 0 0 20px rgba(255, 80, 80, 1), 0 0 38px rgba(238, 68, 68, 0.5);
}
@keyframes damageTargetPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(238, 68, 68, 0.5); }
    50%      { box-shadow: 0 0 18px rgba(255, 80, 80, 0.85); }
}
/* Heal targeting: click the wounded ally to receive the healer's Heal X — green, pulsing "mend" cue. */
.field-unit-card.heal-targetable {
    border-color: #57e08a;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(87, 224, 138, 0.6);
    animation: healTargetPulse 1.1s ease-in-out infinite;
}
.field-unit-card.heal-targetable:hover {
    box-shadow: 0 0 20px rgba(120, 255, 170, 1), 0 0 38px rgba(87, 224, 138, 0.5);
}
@keyframes healTargetPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(87, 224, 138, 0.5); }
    50%      { box-shadow: 0 0 18px rgba(120, 255, 170, 0.85); }
}
/* Battle Phase: unit is clickable and interactive */
.field-unit-card.clickable-unit { border-color: #6a8a9a; cursor: pointer; }
.field-unit-card.clickable-unit:hover { border-color: #fff952; box-shadow: 0 0 12px rgba(255, 249, 82, 0.3); }

/* Alive but not this sub-phase's turn (e.g. a normal/last-strike unit during First Strike): dulled so
   the player can see at a glance it isn't selectable now. Softer than .acted-activated (spent). */
.field-unit-card.phase-dimmed {
    opacity: 0.4;
    filter: grayscale(0.55) brightness(0.85);
    transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Partial action — one action used, one remaining: greyscale, unclickable */
.field-unit-card.acted-activated {
    filter: grayscale(1) brightness(0.7);
    opacity: 0.6;
    border-color: #4a6a7a;
    cursor: not-allowed;
}
.field-unit-card.acted-moved {
    filter: grayscale(1) brightness(0.7);
    opacity: 0.6;
    border-color: #4a6a7a;
    cursor: not-allowed;
}

/* Heavy engine just deployed — summoning-sick, can't act this round (matches the enemy Catapult grey). */
.field-unit-card.summon-sick {
    filter: grayscale(1) brightness(0.7);
    opacity: 0.6;
    border-color: #4a6a7a;
    cursor: not-allowed;
}

/* Fully spent — both actions used: greyscale, unclickable */
.field-unit-card.acted-all {
    filter: grayscale(1) brightness(0.7);
    opacity: 0.6;
    border-color: #4a6a7a;
    cursor: not-allowed;
}

/* Info icon — top-right "i" badge; hover/tap to open the unit/enemy tooltip.
   Replaces the old whole-card hover so panning across the board isn't noisy. */
.unit-info-icon {
    position: absolute;
    top: 2px;
    right: -11px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #000;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: bold;
    font-size: 11px;
    line-height: 1;
    cursor: help;
    z-index: 21;
    transition: all 0.15s ease;
}
.unit-info-icon:hover {
    background: #eee;
    color: #1a1208;
    box-shadow: 0 0 6px rgba(255, 207, 92, 0.7);
}

/* Recruitment cards: same icon, nudged into the art-wrapper corner. */
.unit-info-icon.recruitment {
    top: 2px;
    right: 0px;
}

/* Built buildings: same icon, nudged into the card corner. */
.unit-info-icon.building {
    top: 0px;
    right: -3px;
}

/* Round-buff indicator — icon sits just under the info "i" on a unit card.
   Placeholder art for now; swap for a proper buff glyph later. */
.unit-buff-icon {
    position: absolute;
    top: 22px;                 /* directly under the info "i" (top:2px, 16px tall) */
    right: -11px;              /* aligned with the "i" above it */
    width: 16px;               /* same size as the "i" */
    height: 16px;
    border-radius: 50%;
    background: #fff;          /* white circle, matching the "i" */
    padding: 2px;
    box-sizing: border-box;
    object-fit: contain;       /* boon glyph sits inside the circle */
    z-index: 21;
    pointer-events: auto;      /* hoverable/clickable so its tooltip can show */
    cursor: pointer;
}

/* Effect-icon stack — multiple status icons (boon, Mob, …) under the info "i", stacked downward. */
.unit-effect-icons {
    position: absolute;
    top: 22px;                 /* same anchor as the old single buff icon */
    right: -11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    z-index: 21;
}
.unit-effect-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    padding: 2px;
    box-sizing: border-box;
    object-fit: contain;
    pointer-events: auto;      /* hoverable so its tooltip can show */
    cursor: help;
}

/* Mission objectives scroll — its own element, pinned to the top-centre of the
   town panel and layered ABOVE the ornamental frame cover (.town-panel::after,
   z-index:10). Absolute so it never disturbs the panel's flow layout. */
.town-objectives-scroll {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    line-height: 0;
    cursor: help;
}
.town-objectives-scroll img {
    height: 42px;
    width: auto;
    object-fit: contain;
    margin: 40px 0px 0px 250px;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.town-objectives-scroll:hover img {
    filter: brightness(1.15) drop-shadow(0 0 6px rgba(255, 207, 92, 0.6));
    transform: scale(1.05);
}

/* Objectives tooltip list — tick + strikethrough when an objective is achieved */
.objectives-tooltip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.objective-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 1.1rem;
    color: #d8c8b0;
    line-height: 1.3;
}
.objective-tick {
    flex: 0 0 auto;
    color: #8a7a6a;
    font-weight: bold;
}
.objective-item.completed .objective-tick {
    color: #6fd96f;
}
.objective-item.completed .objective-text {
    text-decoration: line-through;
    color: #7a8a7a;
}

/* Bonus objectives — gold, optional, reward-bearing. Distinct from required goals. */
.objective-bonus {
  color: #a97c00;
}
.objective-bonus .objective-tick {
    color: #f0c14b;
}
.objective-bonus .bonus-reward {
    color: #b15300;
    font-style: italic;
}
.objective-bonus.completed .objective-text {
    text-decoration: none;          /* a bonus earns its reward — don't strike it through */
    color: #ffd87a;
}
.objective-bonus.completed .objective-tick {
    color: #ffd700;
}
.bonus-earned {
    color: #6fd96f;
    font-weight: bold;
    font-size: 0.85em;
    letter-spacing: 0.05em;
}
/* Missed bonus (failed its condition): strike the goal + dim the reward so it reads as lost. */
.objective-bonus.missed .objective-tick { color: #6a5d4a; }
.objective-bonus.missed .bonus-desc-line {
    text-decoration: line-through;
    color: #8a7a5c;
    opacity: 0.8;
}
.objective-bonus.missed .bonus-reward {
    text-decoration: line-through;
    opacity: 0.55;
}
.bonus-missed {
    color: #c06a52;
    font-weight: bold;
    font-size: 0.85em;
    letter-spacing: 0.05em;
    text-decoration: none;   /* the MISSED tag itself isn't struck */
}
/* ★ cue on the objectives scroll when a bonus is in play.
   The scroll is already position:absolute (a positioning context), and its <img> sits
   at an offset via margins — so renderObjectivesBadge() sets left/top from the image's
   actual rendered box. These are fallbacks until the image is measured. */
.objectives-bonus-badge {
    position: absolute;
    top: 34px;
    left: 280px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #2a1c08;
    background: radial-gradient(circle at 35% 30%, #ffe48a, #f0c14b);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(240, 193, 75, 0.8);
    pointer-events: none;
    animation: bonus-badge-pulse 1.8s ease-in-out infinite;
}
@keyframes bonus-badge-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(240, 193, 75, 0.6); }
    50%      { box-shadow: 0 0 10px rgba(240, 193, 75, 1); }
}
/* Bonus reward note in the combat log */
.reward-note {
    color: #ffd87a;
    font-weight: bold;
}

/* Objectives recap on the game-over screen */
.gameover-objectives {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

/* ============================================================
   GAME OVER MODAL — animated victory / defeat
   ============================================================ */
.gameover-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;                 /* above the nav bar (z:1000) and all panels */
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center,
                rgba(20, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.94) 80%);
    opacity: 0;
    transition: opacity 0.7s ease;
}
.gameover-overlay.active { opacity: 1; }
.gameover-overlay.win {
    background: radial-gradient(ellipse at center,
                rgba(40, 30, 0, 0.6) 0%, rgba(0, 0, 0, 0.92) 80%);
}

.gameover-modal {
    position: relative;
    width: 460px;
    max-width: 90vw;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #5a1a1a;
    box-shadow: 0 0 70px rgba(120, 0, 0, 0.5), 0 12px 48px rgba(0, 0, 0, 0.9);
    transform: scale(0.85);
    opacity: 0;
}
.gameover-overlay.win .gameover-modal {
    width: 620px;            /* wider than the loss modal so the 700×300 victory banner reads */
    border-color: #b8962e;
    box-shadow: 0 0 70px rgba(180, 150, 46, 0.4), 0 12px 48px rgba(0, 0, 0, 0.9);
}
.gameover-overlay.active .gameover-modal {
    animation: gameoverModalIn 0.7s cubic-bezier(0.2, 0.85, 0.3, 1.15) forwards;
}

@keyframes gameoverModalIn {
    0%   { opacity: 0; transform: scale(0.8) translateY(-18px); }
    60%  { opacity: 1; transform: scale(1.03) translateY(0); }
    100% { opacity: 1; transform: scale(1); }
}

.gameover-modal-bg {
    position: absolute; inset: 0;
    background: url('assets/ui/web-assets/generic-background-dark-covers.jpg') center / cover no-repeat;
    z-index: -1;
}
.gameover-modal-content {
    position: relative;
    padding: 34px 30px 28px;
    text-align: center;
    background: rgba(8, 4, 8, 0.84);
}

/* Transient toast — prominent, can't-miss feedback (e.g. a blocked Return Dark). */
.game-toast {
    position: fixed;
    top: 84px;
    left: 50%;
    transform: translateX(-50%) translateY(-16px);
    max-width: 540px;
    padding: 14px 22px;
    background: rgba(22, 15, 8, 0.96);
    border: 2px solid #d8a23a;
    border-radius: 6px;
    color: #f3e6c8;
    font-size: 0.95rem;
    line-height: 1.45;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.game-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.game-toast.toast-warning { border-color: #d83a3a; }

/* Big warning glyph on its own row at the top of the toast. */
.game-toast .toast-icon {
    display: block;
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: 8px;
    color: #ffd24a;
}
.game-toast.toast-warning .toast-icon { color: #ff6f5f; text-shadow: 0 0 12px rgba(216, 58, 58, 0.6); }
.game-toast .toast-msg { display: block; }

/* Anchored variant: positioned over a specific element via JS (left/top set inline).
   Narrower so it tucks neatly over a button; opacity-only fade (no horizontal centring). */
.game-toast.toast-anchored {
    left: 0;
    top: 0;
    max-width: 360px;
    transform: none;
}
.game-toast.toast-anchored.show { transform: none; }

/* Big-bad portrait (loss) / victory portrait (win) at the top of the modal.
   Same fixed size for both so win and loss feel like a matched pair. */
.gameover-portrait {
    display: block;
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: top center;
    margin: 0 auto 16px;
    border-radius: 6px;
    border: 2px solid #342818;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}
/* Lose: a landscape fail banner (mirrors the victory art format), not the old square boss portrait. */
.gameover-overlay.lose .gameover-portrait {
    width: 100%;
    height: auto;
    aspect-ratio: 7 / 3;          /* matches the fail art (same format as the victory banner) */
    object-position: center;
    border-color: #d83a3a;
    box-shadow: 0 0 18px rgba(200, 40, 40, 0.5);
}
/* Win: a landscape victory banner (700×300 art) instead of the square portrait. */
.gameover-overlay.win .gameover-portrait {
    width: 100%;
    height: auto;
    aspect-ratio: 7 / 3;          /* matches the 700×300 art — no square crop */
    object-position: center;
    border-color: #ffcf5c;
    box-shadow: 0 0 18px rgba(255, 200, 80, 0.55);
}

.gameover-title {
    font-family: var(--font-cta);
    font-size: 3rem;
    line-height: 1;
    letter-spacing: 0.12em;
    margin: 0 0 10px;
    text-transform: uppercase;
}
.gameover-overlay.lose .gameover-title {
    color: #d83a3a;
    animation: defeatFlicker 3.2s ease-in-out infinite;
}
.gameover-overlay.win .gameover-title {
    color: #ffcf5c;
    text-shadow: 0 0 14px rgba(255, 200, 80, 0.7), 0 0 34px rgba(180, 140, 30, 0.5);
}
@keyframes defeatFlicker {
    0%, 100% { text-shadow: 0 0 12px rgba(200, 30, 30, 0.85), 0 0 30px rgba(120, 0, 0, 0.6); }
    50%      { text-shadow: 0 0 20px rgba(235, 45, 45, 1),   0 0 50px rgba(150, 0, 0, 0.85); }
}

.gameover-subtitle {
    font-family: var(--font-display, serif);
    font-size: 1.25rem;
    font-style: italic;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
    color: #c9b079;
}
.gameover-overlay.lose .gameover-subtitle { color: #9a6a6a; }

.gameover-flavour {
    color: #c3a982;
    font-style: italic;
    font-size: 1rem;
    margin: 0 0 14px;
}
/* Closing-monologue narration on a win (e.g. M3's Aldric beat) — quieter, smaller, a touch wider. */
.gameover-narration {
    color: #9c8a70;
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.45;
    max-width: 460px;
    margin: 0 auto 22px;
    text-align: center;
}

.gameover-breakdown {
    text-align: left;
    border-top: 1px solid rgba(120, 40, 40, 0.4);
    padding-top: 16px;
    margin-bottom: 24px;
}
.gameover-overlay.win .gameover-breakdown { border-top-color: rgba(180, 150, 46, 0.4); }

.gameover-summary {
    color: #d8c8b0;
    font-size: 0.9rem;
    margin: 0 0 14px;
    line-height: 1.45;
}
.gameover-summary strong { color: #fff; }
.gameover-run-note {
    font-style: italic;
    font-size: 0.82rem;
    color: #9a8a92;
    margin-top: -4px;
}

.gameover-breakdown-title {
    font-family: var(--font-cta);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c8a96e;
    margin: 0 0 8px;
}

.gameover-btn {
    background: rgba(90, 26, 26, 0.65);
    border: 1px solid #a33;
    color: #ffd0d0;
    padding: 12px 30px;
    font-family: var(--font-cta);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.gameover-btn:hover { background: rgba(150, 42, 42, 0.9); color: #fff; }
.gameover-overlay.win .gameover-btn {
    background: rgba(90, 70, 20, 0.65);
    border-color: #b8962e;
    color: #ffe6a0;
}
.gameover-overlay.win .gameover-btn:hover { background: rgba(150, 115, 30, 0.9); color: #fff; }

/* ============================================================
   PHASE TRANSITION — full-screen darken + sweeping "{PHASE} PHASE" label.
   Plays at the start of Muster and Battle only (Event uses its card pop-in).
   The overlay animates background-COLOR (not opacity) so the parent never
   dims the white label. Driven by playPhaseTransition() in game.js.
   ============================================================ */
.phase-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;                 /* above panels + nav (1000), below game-over (2000) */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    pointer-events: none;          /* inert until activated */
    overflow: hidden;
}
.phase-transition-overlay.active { pointer-events: auto; }  /* block clicks mid-sweep */

.phase-transition-text {
    font-family: var(--font-cta);
    font-size: 4rem;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.9), 0 0 50px rgba(255, 255, 255, 0.25);
    opacity: 0;
    will-change: transform, opacity;
}

@keyframes phaseOverlay {
    0%   { background-color: rgba(0, 0, 0, 0); }
    14%  { background-color: rgba(0, 0, 0, 0.72); }
    82%  { background-color: rgba(0, 0, 0, 0.72); }
    100% { background-color: rgba(0, 0, 0, 0); }
}
@keyframes phaseTextSweep {
    0%   { opacity: 0; transform: translateX(55vw) scale(1.5); }   /* enter from right, zoomed */
    20%  { opacity: 1; transform: translateX(0) scale(1); }        /* settle in the middle */
    68%  { opacity: 1; transform: translateX(0) scale(1); }        /* hold ~1.2s */
    100% { opacity: 0; transform: translateX(-60vw) scale(0.85); } /* zoom off to the left */
}

/* ============================================================
   TARGETING OVERLAY — darken screen + spotlight eligible units.
   Eligible cards (.lead-targetable) are lifted above the overlay while
   body.lead-targeting is set, so only they are visible & clickable.
   ============================================================ */
.targeting-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;                 /* above panels + nav (1000) */
    background: rgba(0, 0, 0, 0.68);
    animation: fadeIn 0.25s ease-out;
}
.targeting-prompt {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1201;
    color: #fff;
    font-family: var(--font-cta);
    font-size: 1.2rem;
    letter-spacing: 0.06em;
    text-align: center;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95);
    white-space: nowrap;
    pointer-events: none;
}
.targeting-buff { color: #6fd96f; font-weight: bold; }

/* Lift + spotlight the eligible unit cards above the dark overlay */
body.lead-targeting .field-unit-card.lead-targetable {
    position: relative;
    z-index: 1250;
    cursor: pointer;
    border-color: #fff952;
    box-shadow: 0 0 14px rgba(255, 249, 82, 0.7), 0 0 30px rgba(255, 249, 82, 0.35);
    animation: leadTargetPulse 1.1s ease-in-out infinite;
}
body.lead-targeting .field-unit-card.lead-targetable:hover {
    box-shadow: 0 0 20px rgba(255, 249, 82, 1), 0 0 40px rgba(255, 249, 82, 0.5);
}
/* Event damage targeting: lift the eligible (red) cards above the dimming overlay too. */
body.lead-targeting .field-unit-card.damage-targetable {
    position: relative;
    z-index: 1250;
    cursor: pointer;
    border-color: #ff5555;
    box-shadow: 0 0 16px rgba(255, 80, 80, 0.85), 0 0 34px rgba(238, 68, 68, 0.45);
    animation: damageTargetPulse 1.1s ease-in-out infinite;
}
body.lead-targeting .field-unit-card.damage-targetable:hover {
    box-shadow: 0 0 22px rgba(255, 90, 90, 1), 0 0 44px rgba(238, 68, 68, 0.55);
}
/* Heal targeting: lift the eligible (green) wounded-ally cards above the dimming overlay too. */
body.lead-targeting .field-unit-card.heal-targetable {
    position: relative;
    z-index: 1250;
    cursor: pointer;
    border-color: #57e08a;
    box-shadow: 0 0 16px rgba(120, 255, 170, 0.85), 0 0 34px rgba(87, 224, 138, 0.45);
    animation: healTargetPulse 1.1s ease-in-out infinite;
}
body.lead-targeting .field-unit-card.heal-targetable:hover {
    box-shadow: 0 0 22px rgba(140, 255, 185, 1), 0 0 44px rgba(87, 224, 138, 0.55);
}
/* A valid target that has ALREADY ACTED this round (greyed / .acted-activated / .phase-dimmed) must
   still read as clickable when picked — clear the spent dimming so the lifted highlight isn't muddied
   by grayscale + low opacity + not-allowed cursor. (These selectors outrank the .acted-* rules.) */
body.lead-targeting .field-unit-card.lead-targetable,
body.lead-targeting .field-unit-card.damage-targetable,
body.lead-targeting .field-unit-card.heal-targetable {
    opacity: 1;
    filter: none;
    cursor: pointer;
}
/* Ranged target choice: lift the candidate ENEMY cards (front/back of the column) above the dim. */
body.lead-targeting .enemy-card.enemy-targetable {
    position: relative;
    z-index: 1250;
    cursor: pointer;
    filter: none;        /* clear the .enemy-inactive grayscale so the targeting glow reads on greyed (Heavy/acted) enemies */
    opacity: 1;
    border-color: #fff952;
    box-shadow: 0 0 16px rgba(255, 249, 82, 0.85), 0 0 34px rgba(255, 249, 82, 0.4);
    animation: leadTargetPulse 1.1s ease-in-out infinite;
}
body.lead-targeting .enemy-card.enemy-targetable:hover {
    box-shadow: 0 0 22px rgba(255, 249, 82, 1), 0 0 44px rgba(255, 249, 82, 0.55);
}
@keyframes leadTargetPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 249, 82, 0.6), 0 0 26px rgba(255, 249, 82, 0.3); }
    50%      { box-shadow: 0 0 18px rgba(255, 249, 82, 0.9), 0 0 36px rgba(255, 249, 82, 0.5); }
}
/* Castle as a Marksman pick target (siege Trebuchet choosing the walls over an enemy). Lifted + glowing
   above the targeting dim so it reads as clickable alongside the lit enemies. */
body.lead-targeting .marksman-targetable {
    position: relative;
    z-index: 1250;
    cursor: pointer;
    filter: none;
    opacity: 1;
    box-shadow: 0 0 16px rgba(255, 249, 82, 0.85), 0 0 34px rgba(255, 249, 82, 0.4);
    animation: leadTargetPulse 1.1s ease-in-out infinite;
}

/* ============================================================
   SPEECH MODAL — non-blocking character dialogue (tooltip-styled).
   NO full-screen backdrop: only the panel itself is interactive, so the
   bag, Pull button, and recruit market stay clickable underneath.
   Positioned over the battlefield via JS.
   ============================================================ */
.speech-modal {
    position: absolute;   /* lives inside .battlefield (JS), anchored top-left, tracks it on scroll */
    width: 250px;         /* a touch wider than the tooltips so the dialogue isn't cramped */
    z-index: 1150;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid #ffffff;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.7);
    transform-origin: center center;
    pointer-events: none; /* only the ✕ ends the speech; clicks otherwise pass through to the game */
}
/* Side-coded accents: goodies (friendly) BLUE, baddies (enemy) RED — readable at a glance. */
.speech-modal.enemy-speaker {
    border-color: #aa3333;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.7), 0 0 14px rgba(170, 51, 51, 0.45);
}
.speech-modal.friendly-speaker {
    border-color: #4a82c8;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.7), 0 0 14px rgba(74, 130, 200, 0.45);
}

/* Attention cues (play BEFORE the text rolls): a bouncy pop-in for a window's first
   appearance, and a quick wiggle each time a returning speaker is about to talk —
   so it's clear who's speaking when multiple windows are on screen. */
.speech-modal.speech-pop    { animation: speechPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.speech-modal.speech-wiggle { animation: speechWiggle 0.43s ease-in-out; }
/* Exit: roll/shutter up toward the bottom edge, then fade — plays before removal. */
.speech-modal.speech-out    { transform-origin: bottom center; animation: speechOut 0.22s ease-in forwards; }
@keyframes speechOut {
    0%   { opacity: 1; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(0); }
}
@keyframes speechPop {
    0%   { opacity: 0; transform: scale(0.7) translateY(10px); }
    55%  { opacity: 1; transform: scale(1.08) translateY(0); }
    78%  { transform: scale(0.96); }
    100% { transform: scale(1); }
}
@keyframes speechWiggle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    20% { transform: rotate(-2.5deg) scale(1.05); }
    45% { transform: rotate(2.5deg) scale(1.04); }
    70% { transform: rotate(-1.5deg) scale(1.02); }
    88% { transform: rotate(1deg) scale(1.01); }
}
.speech-modal-bg {
    position: absolute; inset: 0;
    background: url('assets/ui/web-assets/generic-background-dark-covers.jpg') center / cover no-repeat;
    z-index: -1;
}
.speech-portrait {
    display: block;
    width: 100%;                   /* 200px (panel width) */
    height: 120px;                 /* compact — leaves the rest of the panel for text */
    object-fit: cover;
    object-position: top center;   /* show the face, not the midriff */
}
.speech-modal-body {
    position: relative;
    padding: 12px 14px 14px;
    background: rgba(22, 15, 8, 0.82);
}
.speech-speaker {
    font-family: var(--font-cta);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffcf5c;
    font-weight: bold;
    margin-bottom: 6px;
}
.speech-text {
    font-family: var(--font);
    font-size: 0.92rem;
    line-height: 1.5;
    color: #f3ead8;
    /* No scroll — the modal grows to fit the whole speech. */
}
.speech-text .speech-line { margin: 0 0 4px; }
.speech-text .speech-line:last-child { margin-bottom: 0; }
.speech-text .stage-direction { font-style: italic; color: #9c8a6e; }
/* Word reveal: each word fades + drifts up as it lands. With the per-word delay shorter than this
   animation, the fades overlap into a smooth flowing reveal rather than hard one-word-at-a-time pops. */
.speech-word {
    display: inline-block;
    opacity: 0;
    animation: speechWordIn 0.34s ease forwards;
}
@keyframes speechWordIn {
    from { opacity: 0; transform: translateY(0.3em); filter: blur(1px); }
    to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
}

.speech-modal-close {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(18, 13, 8, 0.85);
    border: 1px solid #c8a96e;
    color: #ffcf5c;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;   /* the × glyph sits high — nudge it up to optical centre */
    transition: all 0.15s ease;
    pointer-events: auto;  /* re-enabled (parent panel is pointer-events:none) so the ✕ still closes */
}
.speech-modal-close:hover { background: rgba(255, 207, 92, 0.95); color: #1a1208; }

/* Armed special indicator — golden badge showing special is ready to trigger.
   Sits top-LEFT so it never overlaps the info icon (top-right). */
.unit-card-armed-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    background: rgba(255, 215, 0, 0.8);
    border: 2px solid #ffd700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: #000;
    animation: pulse-glow 1.5s ease-in-out infinite;
    z-index: 20;
}

.unit-card-armed-triggered {
    opacity: 0.6;
    animation: none;
}

/* Enemy cards use same structural CSS as friendly — same painted frame appearance */
.enemy-card {
  width: 75px;
  display: flex;
  flex-direction: column;
  position: relative;
}


.enemy-card.boss { border-color: #aa3333; box-shadow: 0 0 8px rgba(170,50,50,0.35); }
/* Heavy unit on the round it arrives — greyed/inactive (it can't act yet). Matches the spent look. */
.enemy-card.enemy-inactive { filter: grayscale(1) brightness(0.65); }

/* Manic "WILD SWING!" callout — flung over the swinging combatant so the bonus flail reads as
   intentional chaos, not a glitch. Wobbles/rotates as it rises. */
.wild-swing-callout {
    position: fixed;
    transform: translate(-50%, -50%);
    z-index: 9990;
    pointer-events: none;
    font-family: var(--font-cta, serif);
    font-size: 2rem;
    font-weight: bold;
    color: #ffdd33;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: -2px -2px 0 #c0392b, 2px 2px 6px rgba(0,0,0,0.9), 0 0 10px rgba(255,90,0,0.9);
    animation: wildSwingText 1.1s ease-out forwards;
}
@keyframes wildSwingText {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-20deg); }
    14%  { opacity: 1; transform: translate(-50%, -62%) scale(1.35) rotate(13deg); }
    28%  { transform: translate(-50%, -56%) scale(0.95) rotate(-11deg); }
    42%  { transform: translate(-50%, -64%) scale(1.15) rotate(9deg); }
    56%  { transform: translate(-50%, -58%) scale(1) rotate(-6deg); }
    72%  { opacity: 1; transform: translate(-50%, -72%) scale(1.04) rotate(3deg); }
    100% { opacity: 0; transform: translate(-50%, -98%) scale(1.08) rotate(0deg); }
}

.unit-portrait { width: 75px; height: 75px; object-fit: cover; 
    border-radius: 3px; display: block; margin: 5px 0px 0px 5px;}

/* unit-info holds name + stats + button — fills remaining card height */
.unit-info { display: flex; flex-direction: column; gap: 3px; }

.field-unit-name { 
    font-size: 0.6rem;
  color: #fff600;
  font-weight: bold;
  overflow: hidden;
  text-overflow: inherit;
  white-space: nowrap;
  background: rgba(18,12,7,0.42);
  padding: 3px 27px 3px 11px;
  margin-top: -17px;
}.enemy-name-card {
  font-size: 0.6rem;
  color: #fff600;
  font-weight: bold;
  overflow: hidden;
  text-overflow: inherit;
  white-space: nowrap;
  background: rgba(18,12,7,0.42);
  padding: 3px 27px 3px 11px;
  margin-top: -17px;
}


.enemy-card.boss .enemy-name-card { color: #ff8080; }

.field-unit-stats {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 11;
  margin-left: -6px;
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 20px;
  padding: 0px 4px 4px 4px;
  margin-left: -15px;
}
.stat-box.enemy-stat { 
    background: rgba(18,4,4,0.0); 
   }
.stat-box-val {
  font-size: 0.9rem;
  font-weight: bold;
  color: #000;
  line-height: 0.85;
}
.stat-box-key { font-size: 0.44rem; color: var(--text-dim); letter-spacing: 0.04em; display:none; }
.stat-box.stat-above .stat-box-val { color: #60cc60; }
.stat-box.stat-below .stat-box-val { color: #e06060; }

.primed-badge    { font-size: 0.52rem; background: #3d2b14; border: 1px solid var(--text-gold); color: var(--text-gold); border-radius: 2px; padding: 1px 3px; }
.buff-badge      { font-size: 0.52rem; background: #1a3d1a; border: 1px solid #6aaa6a;      color: #6aaa6a;        border-radius: 2px; padding: 1px 3px; }
.exhausted-badge { font-size: 0.52rem; background: #2e2417; border: 1px solid #8888aa;      color: #9999bb;        border-radius: 2px; padding: 1px 3px; font-style: italic; }
.btn.damage-pick-btn { background: #3d1414; border: 1px solid #cc4444; color: #ee8888; font-size: 0.62rem; padding: 4px 5px; width: 100%; border-radius: 3px; cursor: pointer; }
.btn.damage-pick-btn:hover { border-color: #ee4444; color: #ffaaaa; }
/* Keywords are not shown on the battlefield card itself — they live in the unit's
   tooltip (the "i" icon). Hidden rather than removed so the data stays in the DOM,
   and so cards with/without keywords keep identical layout & alignment. */
.field-unit-keyword, .enemy-keyword { display: none; }

.btn.activation-btn {
    background: transparent url('assets/ui/2battlefield/unit-battlefield-cta-clean.png') center / 100% 100% no-repeat;
    border: none; color: #000; font-size: 0.62rem;
    padding: 4px 5px; width: 100%; cursor: pointer; font-family: var(--font-cta);
}
.btn.activation-btn:hover:not(:disabled)  { background-image: url('assets/ui/2battlefield/unit-battlefield-cta-hover.png'); }
.btn.activation-btn:active:not(:disabled) { background-image: url('assets/ui/2battlefield/unit-battlefield-cta-click.png'); }
.btn.lead-target-btn { background: #3d2b14; border: 1px solid var(--text-gold); color: var(--text-gold); font-size: 0.62rem; padding: 4px 5px; width: 100%; border-radius: 3px; }
/* Special ability button — distinct from free activate, has a cost */
.btn.special-btn { background: #1a1a3a; border: 1px solid #6a6acc; color: #aaaaee; font-size: 0.6rem; padding: 3px 5px; width: 100%; border-radius: 3px; font-family: var(--font-cta); }
.btn.special-btn:hover:not(:disabled) { border-color: #9a9aff; color: #ccccff; filter: none; }


/* ============================================================
   3. STONES PANEL
   ============================================================ */

.stones-panel {
    width: 1000px;
    height: 160px;
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: -10px; /* overlaps battlefield bottom edge */
    padding: 20px 30px;
    overflow: visible;
    background: transparent url('assets/ui/3stones/3stones-ui-background.png') left top / 1000px 160px no-repeat;
}

/* --- Stones Summary (left third) --- */
.stones-summary-col {
    flex: 0 0 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.stones-summary-title {
  font-size: 1.5rem;
  color: #000;
  line-height: 1;
  font-weight: bold;
}
.stones-summary-sub {
  display: block;
  font-size: 0.9rem;
  font-style: italic;
  color: #000;
  margin-top: -3px;
  text-align: center;
}

.stones-by-type {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2px;
    align-items: flex-start;
    margin-top: 0;
}

@keyframes stonePlaceScale {
    0% { transform: scale(0); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes stoneSpendFade {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); }
    100% { transform: scale(0.8); opacity: 0; }
}

.stone-summary-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.stone-summary-slot img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.stone-count      { font-size: 0.88rem; font-weight: bold; color: #000000; }
.stone-count.zero { color: #bcbcbc; }

/* --- Pool (centre) --- */
.stones-pool-col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 10px;
}

.pool-tokens {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
}

.pool-empty-note {
    width: 100%;
    text-align: center;
    font-family: var(--font);
    font-style: italic;
    font-size: 1rem;
    color: #fff;
    margin-right: 80px;
    display: none;
    letter-spacing: 0.03em;
}
/* Show the italic hint in the stones pool (the empty-pool prompt is genuinely useful — other
   .pool-empty-note uses stay hidden as before). */
#pool-tokens .pool-empty-note { display: block; color: #5a4a38; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); }

.tokens-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Pool stones use the large variant — active spending zone */
.stone-token { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stone-token.place-stone { animation: stonePlaceScale 1s ease-in-out both; }
.stone-token.spend-stone { animation: stoneSpendFade 0.25s ease-out forwards; }
.stone-token img { width: 48px; height: 48px; object-fit: contain; transition: transform 0.14s ease, filter 0.14s ease; }

/* Spend preview — stones that a hovered purchase would consume grow 15% and brighten
   noticeably, with a soft glow so it's unmistakable what's about to be spent. */
.stone-token.spend-preview img {
    transform: scale(1.15);
    filter: brightness(1.25) drop-shadow(0 0 6px rgba(255, 245, 170, 0.9));
}
.stone-img-small { width: 22px; height: 22px; object-fit: contain; }

/* Pool greyed out when bust (Dark Drawn = 3/3) */
.pool-tokens.pool-spent .stone-token { opacity: 0.5; filter: grayscale(1); }

/* --- Dark Drawn (right third) — do not modify --- */
.dark-drawn-col { flex: 0 0 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }

.dark-dread-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.dark-dread-img  { width: 250px; height: auto; max-height: 250px; object-fit: contain; display: block; }
.dark-dread-labels {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding-bottom: 0px;
    margin-top: 20px;
}
.dark-drawn-sublabel { font-size: 0.9rem; letter-spacing: 0em; text-transform: none; color: #fff; white-space: nowrap; margin-bottom: -6px; }
.threshold-label     { font-size: 2.05rem; font-weight: bold; color: #fff; line-height: 1; }
.threshold-label.warning { color: #fff; }
.threshold-label.spent   { color: #fff; font-size: 1.8rem; margin-top: 5px; }

/* Compound selector beats .btn alone — prevents .btn background:transparent from wiping the image */
.btn.return-dark-btn {
    background: transparent url('assets/ui/3stones/return-stone-cta-clean.png') center / 166px 46px no-repeat;
    border: none;
    color: #000;
    font-size: 0.88rem;
    width: 166px;
    height: 46px;
    padding: 0;
    margin-top: 8px;
    cursor: pointer;
    font-family: var(--font-cta);
    letter-spacing: 0.05em;
}
.btn.return-dark-btn:hover:not(:disabled)  { background-image: url('assets/ui/3stones/return-stone-cta-hover.png'); filter: none; }
.btn.return-dark-btn:active:not(:disabled) { background-image: url('assets/ui/3stones/return-stone-cta-click.png'); }

/* Return Dark armed state: light grayscale to show it's prepared but not yet active */
.btn.return-dark-btn.armed { filter: grayscale(0.6) opacity(1); cursor: not-allowed; }

.btn-icon-img { width: 14px; height: 14px; object-fit: contain; }


/* ============================================================
   4. CHARACTER PANEL (portrait | abilities | market)
   ============================================================ */

.character-panel {
    /* Character bg 745 × 270px occupies left 638px (proportional: 887 × 745/1035).
       Market bg 290 × 290px occupies right 249px (proportional: 887 × 290/1035).
       bg extends ~100px past left section into market area — ornamental bleed, fine.
       Padding 35px matches ornamental border inset on all sides. */
    width: 1000px;
    height: 290px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: -27px; /* overlaps battlefield bottom edge */
    padding: 35px 40px 20px 40px;
    overflow: visible;
    background: transparent url('assets/ui/4character/4character-ui-background.png') left top / 1000px 290px no-repeat;
}

/* Portrait */
.char-portrait-col {
    position: relative;
    flex: 0 0 217px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: -10px;
}

.char-portrait-col::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 217px;
    height: 217px;
    background: url('assets/ui/4character/character-cover.png') center / cover no-repeat;
    pointer-events: none;
    z-index: 2;
}

.char-portrait-img {
  width: 175px;
  height: 175px;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  margin-top: 20px;
}

/* Abilities */
.char-abilities-col {
  flex: 1;
  min-width: 0;
  max-width: 447px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 15px;
  text-align: center;
}
.char-name     { font-size: 1.25rem; font-weight: bold; color: var(--text-gold); letter-spacing: 0.06em; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.char-subtitle {
  font-size: 0.85rem;
  text-transform: none;
  color: #000;
  margin-top: -6px;
}
/* Abilities container grid */
.abilities-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;
    margin-bottom: 0px;
    margin-top: -10px;
    margin-left: 6px;
}

/* Ability card — each with its own cover background */
.ability-card {
    background: url('assets/ui/4character/character_ability_cover.png') center top / 150px 119px no-repeat;
    border: none;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
}

.ability-name {
    font-size: 0.65rem;
    font-weight: bold;
    color: var(--text-gold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

.ability-desc {
  font-size: 0.65rem;
  color: #000;
  line-height: 1.25;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 9px;
}
/* The flex centering above makes EACH child (text run + every inline icon) its own flex item, which
   fragments the line. Wrap the populated text in this block so the flex sees ONE child and the text +
   icons flow as normal centered inline content. */
.ability-desc-text {
  display: block;
  width: 100%;
  text-align: center;
}

/* CTA button with stone costs */
.ability-cost {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    margin: 6px 0;
    padding: 6px 8px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.2);
}

.cost-chip-img, .cost-chip-inline {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
}

.passive-note {
  font-size: 0.86rem;
  color: var(--text-dim);
  font-style: italic;
  padding: 8px 1px;
  margin-top: -36px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  margin-left: 31px;
}

/* Market column — no separate background, merged into 4character panel image */
.char-market-col {
    flex: 0 0 190px;
    display: flex; flex-direction: column; gap: 2px;
    background: transparent;
    overflow: visible;
    padding: 0;
    margin-right: -5px; /* bleed into portrait area, matches background image bleed */
}
.market-col-title {
    font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--text-dim); padding-bottom: 5px;
    display: none;
}
.market-cards-col { display: grid;
    grid-template-columns: repeat(3, 68px); gap: 6px;
    justify-content: flex-start;
    align-content: flex-start; flex: 1;
    overflow: visible;
   margin-left: 54px;}

/* Market cards — portrait covers with tiny text */
.market-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
    width: 80px;
}
.market-card.locked { opacity: 0.5; cursor: not-allowed; }
.market-card.locked .market-card-portrait,
.market-card.locked .market-card-cover {
    filter: grayscale(1);
}
.market-card.locked .btn.recruitment-cta-btn {
    filter: grayscale(1) brightness(0.75);
}

/* Market card sold state */
.market-card.sold .market-card-portrait,
.market-card.sold .market-card-cover {
    filter: grayscale(1) brightness(0.7);
}
.market-card.sold .btn.recruitment-cta-btn {
    filter: grayscale(1) brightness(0.5);
    cursor: not-allowed;
}

.market-card-sold-sticker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: auto;
    z-index: 5;
    pointer-events: none;
}

.market-card-cost-overlay.greyscale {
    filter: grayscale(1);
}

.market-card-art-wrapper {
  position: relative;
  width: 70px;
  height: 83px;
  overflow: visible;
}

.market-card-portrait {
    width: 65px;
    height: 65px;
    object-fit: cover;
    position: absolute;
    top: 3px; left: 2px;
    z-index: 1;
}

.market-card-cover {
    position: absolute;
    top: 0; left: 0;
    width: 70px;
    height: 83px;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}

.market-card-name {
  position: absolute;
  bottom: 7px;
  left: 0;
  right: 0;
  font-size: 0.6rem;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 3;
}

.market-card-cta-wrapper {
    position: relative;
    width: 70px;
    height: 22px;
    display: block;
    flex-shrink: 0;
}

.recruitment-lock-message {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: #aaa;
    text-align: center;
    padding: 2px 4px;
    border-radius: 2px;
    cursor: not-allowed;
}

.btn.recruitment-cta-btn {
    position: absolute;
    inset: 0;
    background: url('assets/ui/5recruitment/recruitment-cta-clean.png') center / 100% 100% no-repeat !important;
    border: none;
    cursor: pointer;
    padding: 0 !important;
    margin: 0;
    display: block;
}

.btn.recruitment-cta-btn:hover:not(:disabled) {
    background-image: url('assets/ui/5recruitment/recruitment-cta-hover.png');
}

.btn.recruitment-cta-btn:active:not(:disabled) {
    background-image: url('assets/ui/5recruitment/recruitment-cta-click.png');
}

.btn.recruitment-cta-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.market-card-cost-overlay {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 0px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding: 2px 4px;
    pointer-events: none;
    z-index: 10;
}

.cost-row      { display: flex; gap: 2px; flex-shrink: 0; flex-wrap: wrap; }
.cost-chip img { width: 16px; height: 16px; object-fit: contain; }
.cost-chip     { display: inline-flex; flex-direction: column; align-items: center; gap: 0px; margin: 0 0px; 
    filter: drop-shadow(-2px -2px 2px #000000);
}
.cost-chip-count {
    font-size: 0.82rem;
    font-weight: bold; color: #fff; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 2px rgba(0,0,0,0.9); }

/* Contribution-economy chip states (clickable "invisible buttons behind each resource"). */
.cost-chip-clickable { transition: transform 0.08s ease, filter 0.08s ease; }
.cost-chip-clickable:hover { transform: scale(1.18); filter: drop-shadow(0 0 4px #fff952) brightness(1.15); }
.cost-chip-clickable:active { transform: scale(0.95); }
/* A fully-paid colour on a NUMBER-based row (recruitment): grey the stone out + show a gold ✓ in place
   of the count — the same "done" read as a satisfied town-upgrade slot. */
.cost-chip-satisfied { filter: grayscale(100%); opacity: 0.5; }
.cost-chip-satisfied .cost-chip-count { color: var(--text-gold); font-weight: bold; }
/* Owed, but no stone on hand can pay it → greyed, not clickable. */
.cost-chip-unaffordable { filter: grayscale(100%); opacity: 0.4; }


/* ============================================================
   5. BUILDINGS PANEL
   ============================================================ */

.buildings-panel {
    /* Natural: 990 × 210px. Scaled to 887px → height 188px (×0.896). */
    width: 1000px;
    height: 188px;
    flex-shrink: 0;
    display: flex;
    margin-top: -40px; /* overlaps battlefield bottom edge */
    overflow: visible;
    position: relative;   /* anchor for the carousel arrows */
    background: transparent url('assets/ui/6buildings/6building-ui-background.png') left top / 1000px 210px no-repeat;
}

.buildings-tab {
    flex: 0 0 26px;
    display: flex; align-items: center; justify-content: center;
}
.buildings-tab-label {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  font-size: 1rem;
  text-transform: none;
  color: var(--text-gold);
  margin: 22px 0px 0px 53px;
}

.built-buildings-cards {
    flex: 1; display: flex; flex-wrap: nowrap;   /* one row; the carousel pages instead of wrapping */
    gap: 10px; padding: 10px 12px 10px 50px;     /* +25px left inset: un-cramps the prev arrow, takes up the dead space at the next arrow */
    align-items: flex-start;
    margin-top: 42px;
    overflow: visible;
}

/* Carousel arrows — the arrow.png graphic, vertically centred on the card row, sitting just inside the
   framed panel edges. Top-level (z-index above the cards). Only shown when another page exists (JS). */
.buildings-nav {
    position: absolute;
    top: 105px;                       /* centre of the card row (42px top margin + ~½ card height) */
    transform: translateY(-50%);
    z-index: 20;                      /* on the top layer, above the building cards */
    width: 40px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer;
    padding: 0;
    background: none;
    transition: transform 0.12s ease, filter 0.12s ease;
}
.buildings-nav-icon { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.buildings-nav:hover { filter: brightness(1.15) drop-shadow(0 0 6px rgba(255, 207, 92, 0.6)); }
.buildings-nav:active { transform: translateY(-50%) scale(0.9); }
.buildings-nav-next { right: 43px;   top: 46px;}
.buildings-nav-prev {
  left: 78px;
  top: 46px;
}  /* just clear of the vertical "Buildings Built" tab */
.buildings-nav-prev .buildings-nav-icon { transform: scaleX(-1); }   /* arrow.png points right → flip for "previous" */

.built-building-card {
    width: 122px;
    min-height: 127px;
    display: flex; flex-direction: column; gap: 4px;
    background: transparent;
    border: none;
    padding: 5px 6px;
    overflow: visible;
    position: relative; /* anchor for the top-right info icon */
}

.built-building-img-wrapper {
    position: relative;
    width: 96px;
    height: 68px;
    border-radius: 3px;
    overflow: visible;
}

.built-building-img-wrapper::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -6px;
    width: 122px;
    height: 127px;
    background: url('assets/ui/6buildings/buildings_purchased_cover.png') center / cover no-repeat;
    pointer-events: none;
    z-index: 2;
}

.built-building-img {
  width: 112px;
  height: 112px;
  display: block;
}
.built-building-name {
  font-size: 0.80rem;
  color: #000;
  font-weight: bold;
  text-align: center;
  margin-top: -94px;
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 10px;
}

/* ============================================================
   SHARED BUTTONS
   ============================================================ */

.btn {
    background: transparent;
    color: var(--text-main);
    border-radius: 4px;
    padding: 6px 12px;
    font-family: var(--font); font-size: 0.84rem;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: filter 0.12s;
    user-select: none;
}
.btn:hover:not(:disabled)  { filter: brightness(1.3); border-color: var(--text-gold); }
.btn:active:not(:disabled) { filter: brightness(0.85); }
.btn:disabled { filter: grayscale(1) brightness(0.75); cursor: default; }

.btn.ability-btn { width: 100%; padding: 5px 7px; font-size: 0.72rem; margin-top: auto; }
.btn.ability-btn.used    {   color: #000; }
.btn.ability-btn.pending { border-color: var(--text-gold); color: var(--text-gold); background: rgba(40,28,8,0.9); }

.btn.character-ability-btn {
    background: transparent url('assets/ui/4character/character-ability-cta-clean.png') center / 100% 100% no-repeat;
    border: none;
    padding: 12px 18px;
    width: auto;
    min-width: 130px;
    min-height: 33px;
    cursor: pointer;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.btn.character-ability-btn .cost-chip-img {
    width: 17px;
    height: 17px;
    object-fit: contain;
}

.btn.character-ability-btn:hover:not(:disabled) {
    background-image: url('assets/ui/4character/character-ability-cta-hover.png');
    filter: none;
}

.btn.building-action-btn {
  background: transparent url('assets/ui/6buildings/buildings-cta-clean.png') center / 100px 35px no-repeat;
  border: none;
  color: #000;
  font-size: 0.7rem;
  width: 100%;
  height: 35px;
  min-height: 35px;
  padding: 2px 4px;
  cursor: pointer;
  font-family: var(--font-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: 6px;
  visibility: visible;
  opacity: 1;
  flex-wrap: wrap;
  /* Sit ABOVE the decorative .built-building-img-wrapper::after cover (z-index:2),
     which is 122x127 and spans the whole card. Without this, the enabled button
     (no :disabled filter, so no stacking context of its own) paints UNDER the
     cover and is occluded; the disabled button only appeared visible due to the
     filter-induced stacking-context shift. */
  position: relative;
  z-index: 3;
}
.btn.building-action-btn:hover:not(:disabled) { background-image: url('assets/ui/6buildings/buildings-cta-hover.png'); }
.btn.building-action-btn:active:not(:disabled) { background-image: url('assets/ui/6buildings/buildings-cta-press.png'); }
.btn.building-action-btn.used { background-image: url('assets/ui/6buildings/buildings-cta-clean.png'); opacity: 1; cursor: not-allowed; }

.cost-stone-icon { width: 16px; height: 16px; object-fit: contain; }
.btn.character-ability-btn:active:not(:disabled) { background-image: url('assets/ui/4character/character-ability-cta-click.png'); }

/* Keep the painted CTA at ALL times — the generic .ability-btn.used/.pending
   rules paint a solid colour block, which would hide the character CTA art.
   Used = the CTA shown greyscale (via :disabled filter); pending = CTA + glow. */
.btn.character-ability-btn.used,
.btn.character-ability-btn.pending {
    background: transparent url('assets/ui/4character/character-ability-cta-clean.png') center / 100% 100% no-repeat;
    border: none;
    color: #000;
}
.btn.character-ability-btn.pending {
    filter: drop-shadow(0 0 6px rgba(255, 207, 92, 0.9));
}

.btn.recruitment-btn {
    background: transparent url('assets/ui/5recruitment/recruitment-cta-clean.png') center / 100% 100% no-repeat;
    border: none; color: #000; font-size: 0.68rem;
    padding: 4px 7px; width: 100%; cursor: pointer; font-family: var(--font-cta);
}
.btn.recruitment-btn:hover:not(:disabled)  { background-image: url('assets/ui/5recruitment/recruitment-cta-hover.png'); filter: none; }
.btn.recruitment-btn:active:not(:disabled) { background-image: url('assets/ui/5recruitment/recruitment-cta-click.png'); }

/* Primary CTA (Next Turn, Pull 3) */
/* Primary CTA — sized to fill the phase strip scroll. Natural CTA asset: 399 × 54px. */
.btn.primary {
    background: transparent url('assets/ui/1event/next-turn-cta-clean.png') center / 399px 54px no-repeat;
    border: none;
    color: #000;
    font-size: 0.95rem;
    width: 399px;
    height: 54px;
    padding: 0;
    letter-spacing: 0.06em;
    cursor: pointer;
    font-family: var(--font-cta);
}
.btn.primary:hover:not(:disabled)  { background-image: url('assets/ui/1event/next-turn-cta-hover.png'); filter: none; }
.btn.primary:active:not(:disabled) { background-image: url('assets/ui/1event/next-turn-cta-click.png'); }

.btn.town-build-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0;
}
.btn.town-build-btn:disabled {
    cursor: not-allowed;
}

.gameover-message { font-size: 0.95rem; font-weight: bold; padding: 10px 16px; border-radius: 4px; }
.gameover-message.win  { background: rgba(18,36,18,0.9); border: 1px solid #3a6a3a; color: #6aaa6a; }
.gameover-message.lose { background: rgba(38,16,16,0.9); border: 1px solid #6a3a3a; color: #aa6060; }


/* ============================================================
   RIGHT COLUMN — TOWN PANEL
   ============================================================ */

.town-panel {
    width: 393px;
    height: 370px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    position: relative;
    margin-top: 31px;
    margin-left: -46px;
    background: transparent url('assets/ui/7town/7town-ui-background.png') left top / 393px 370px no-repeat;
}

/* Ornamental frame overlay sits on top of all town panel content */
.town-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent url('assets/ui/7town/7town-ui-frame-top.png') left top / 393px 370px no-repeat;
    pointer-events: none;
    z-index: 10;
}

.town-illustration-wrap { width: 100%; position: relative; overflow: visible; }
.town-illustration-img {
  width: 281px;
  height: 116px;
  object-fit: cover;
  display: block;
  margin-left: 57px;
  margin-top: 16px;
}

/* ── Town upgrade celebration ─────────────────────────────────────────────
   The incoming castle art fades + settles in over the old; a firework burst
   and a tier banner pop to cheer the upgrade. */
.town-illus-incoming {
  z-index: 3;
  pointer-events: none;
  animation: townIllusIn 0.9s ease-out both;
}

/* Building tier-up: the new tier's art sweeps in over the old, ABOVE the old base img but BELOW
   the shared frame cover (.built-building-img-wrapper::after, z-index 2). Reuses townIllusIn. */
.building-illus-incoming {
  z-index: 1;
  pointer-events: none;
  animation: townIllusIn 0.9s ease-out both;
}
@keyframes townIllusIn {
  0%   { opacity: 0; transform: scale(1.06); filter: brightness(1.7) saturate(1.2); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1);    filter: brightness(1)   saturate(1); }
}

.town-upgrade-fx {
  position: absolute;
  left: 197px;   /* illustration centre: 57 margin + 281/2 */
  top: 74px;     /* 16 margin + 116/2 */
  width: 0; height: 0;
  z-index: 6;
  pointer-events: none;
}
.town-spark {
  position: absolute;
  left: 0; top: 0;
  width: 7px; height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6c4 0%, #ffd24a 45%, rgba(255,170,40,0) 75%);
  box-shadow: 0 0 8px 2px rgba(255, 210, 90, 0.85);
  animation: townSpark 1s ease-out forwards;
}
@keyframes townSpark {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}
.town-upgrade-banner {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--font-cta);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffe69a;
  text-shadow: 0 0 10px rgba(255, 200, 70, 0.9), 0 2px 3px rgba(0, 0, 0, 0.85);
  animation: townUpgradeBanner 1.9s ease-out forwards;
}
@keyframes townUpgradeBanner {
  0%   { opacity: 0; transform: translate(-50%, -10%) scale(0.7); }
  18%  { opacity: 1; transform: translate(-50%, -55%) scale(1.08); }
  32%  { transform: translate(-50%, -55%) scale(1); }
  78%  { opacity: 1; transform: translate(-50%, -70%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -95%) scale(1); }
}

@keyframes townShake {
    0%   { transform: translate(0, 0); }
    15%  { transform: translate(-5px, -6px) rotate(-1deg); }
    30%  { transform: translate(5px, 4px) rotate(1deg); }
    45%  { transform: translate(-4px, 3px) rotate(-0.6deg); }
    60%  { transform: translate(4px, -2px) rotate(0.6deg); }
    80%  { transform: translate(-2px, 1px); }
    100% { transform: translate(0, 0); }
}
.town-shake { animation: townShake 0.6s ease-out; }

/* ===== Over-the-top town upgrade FX ===== */
.town-upgrade-banner-big {
  font-size: 2rem;
  font-weight: bold;
  color: #fff2c0;
  text-shadow: 0 0 18px rgba(255, 200, 70, 1), 0 0 6px rgba(255,255,255,0.8), 0 3px 4px rgba(0,0,0,0.9);
  animation: townUpgradeBannerBig 2.6s ease-out forwards;
}
@keyframes townUpgradeBannerBig {
  0%   { opacity: 0; transform: translate(-50%, 10%)  scale(0.4) rotate(-6deg); }
  14%  { opacity: 1; transform: translate(-50%, -60%) scale(1.35) rotate(3deg); }
  24%  { transform: translate(-50%, -60%) scale(0.95) rotate(-1deg); }
  32%  { transform: translate(-50%, -62%) scale(1.08) rotate(0deg); }
  42%  { transform: translate(-50%, -62%) scale(1); }
  82%  { opacity: 1; transform: translate(-50%, -78%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(1.05); }
}

/* central white flash */
.town-flash {
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; margin: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.98) 0%, rgba(255,232,150,0.65) 40%, rgba(255,255,255,0) 70%);
  animation: townFlash 0.55s ease-out forwards;
}
@keyframes townFlash {
  0%   { opacity: 0; transform: scale(0.3); }
  25%  { opacity: 1; transform: scale(2.6); }
  100% { opacity: 0; transform: scale(3.6); }
}

/* expanding shock rings */
.town-ring {
  position: absolute; left: 0; top: 0;
  width: 14px; height: 14px; margin: -7px;
  border: 4px solid rgba(255, 220, 120, 0.9);
  border-radius: 50%;
  animation: townRing 1s ease-out forwards;
}
@keyframes townRing {
  0%   { opacity: 0.95; transform: scale(0.2); border-width: 5px; }
  100% { opacity: 0;    transform: scale(8);   border-width: 1px; }
}

/* falling confetti */
.town-confetti {
  position: absolute; left: 0; top: 0;
  width: 7px; height: 12px; margin: -4px -3px;
  border-radius: 1px;
  animation: townConfetti 1.9s ease-in forwards;
}
@keyframes townConfetti {
  0%   { opacity: 0; transform: translate(0, -12px) rotate(0deg); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--cx), 160px) rotate(var(--cr)); }
}

/* ===== Small building upgrade fanfare ===== */
.building-upgrade-fx {
  position: absolute;
  left: 50%; top: 42%;
  width: 0; height: 0;
  z-index: 5;
  pointer-events: none;
}
.building-star {
  position: absolute; left: 0; top: 0;
  width: 6px; height: 6px; margin: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffe27a 55%, rgba(255,200,60,0) 78%);
  box-shadow: 0 0 5px 1px rgba(255, 220, 120, 0.85);
  animation: buildingStar 0.9s ease-out forwards;
}
@keyframes buildingStar {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.3); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}
.building-lvlup {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--font-cta);
  font-size: 0.85rem;
  font-weight: bold;
  color: #fff2b0;
  text-shadow: 0 0 5px rgba(255, 190, 50, 0.95), 0 1px 2px #000;
  animation: buildingLvlUp 1.5s ease-out forwards;
}
@keyframes buildingLvlUp {
  0%   { opacity: 0; transform: translate(-50%, -20%) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -65%) scale(1.12); }
  35%  { transform: translate(-50%, -65%) scale(1); }
  75%  { opacity: 1; transform: translate(-50%, -85%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -115%) scale(1); }
}

.town-header {
  position: absolute;
  top: 9px;
  left: 57px;
  right: 57px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  z-index: 5;
}
.town-name {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--text-gold);
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 20px;
  margin-left: -6px;
  border-radius: 0px 0px 8px 0px;
  text-align: left;
}
.town-hp-block {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: -10px;
  border-radius: 0px 0px 0px 8px;
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 20px;
}
.heart-icon  { width: 16px; height: 16px; object-fit: contain; }
.town-hp-val { font-size: 1.1rem; font-weight: bold; color: #004b00; }
.town-hp-val.low      { color: #c57600; }
.town-hp-val.critical { color: var(--text-warn); animation: blink 1s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* Building shop rows */
.town-buildings-list { padding: 2px 0; }

.town-building-row {
  display: flex;
  align-items: center;
  padding: 3px 8px;
  gap: 5px;
  min-height: 28px;
  margin: 5px 9px 0px 20px;
  border-radius: 3px;
  background: url('assets/ui/7town/town-buildings-cta-clean.png') center / 265px 31px no-repeat;
}
.town-building-row.state-tier_locked {
    opacity: 0.35;
}
.town-building-row.state-locked,
.town-building-row.state-unaffordable {
    filter: grayscale(100%);
    opacity: 0.65;
}
.town-building-row.state-built,
.town-building-row.state-upgraded {
    filter: grayscale(100%);
    opacity: 0.45;
}
/* Rolling-shop slot that emptied with nothing left to refill it: faded, inert, SOLD-stamped. */
.town-building-row.state-soldout {
    filter: grayscale(100%);
    opacity: 0.38;
    cursor: default;
    pointer-events: none;
}
.town-building-row.state-soldout .town-building-name {
    color: #3a2a1a;
    font-style: italic;
    letter-spacing: 0.12em;
}

.town-building-row:not(.state-unaffordable):not(.state-tier_locked):not(.state-built):not(.state-upgraded) {
    cursor: pointer;
}

.town-building-row:not(.state-unaffordable):not(.state-tier_locked):not(.state-built):not(.state-upgraded):hover {
    background-image: url('assets/ui/7town/town-buildings-cta-hover.png');
}

.town-building-row:not(.state-unaffordable):not(.state-tier_locked):not(.state-built):not(.state-upgraded):active {
    background-image: url('assets/ui/7town/town-buildings-cta-click.png');
}

.town-building-name {
    flex: 1; font-size: 0.64rem; font-weight: bold;
    color: #1a0e08;
    letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-left: 54px;
    text-shadow: 0 0 3px rgba(255,255,255,0.9), 0 1px 1px rgba(255,255,255,0.7); /* readability over the row */
}
.town-upgrade-badge { flex-shrink: 0; font-weight: bold; color: var(--text-gold); font-size: 0.62rem; letter-spacing: 0.04em; margin: 0 6px 0 2px; white-space: nowrap; }
.town-cost-row { display: flex; gap: 4px; flex-shrink: 0; margin-right: 58px; align-items: center; }
/* Building chips lay the stone + number SIDE BY SIDE (row), not stacked — keeps the rows short so the
   build button isn't forced down. (The recruitment overlay keeps its own column stack.) */
.town-cost-row .cost-chip,
.building-upgrade-cost .cost-chip { flex-direction: row; gap: 1px; }
/* Upgrade button on built-building cards: label + counted chips on one line, wrap if needed. */
.building-upgrade-btn { flex-wrap: wrap; gap: 3px; }
.building-upgrade-cost { display: inline-flex; gap: 3px; align-items: center; }
.building-upgrade-label { font-weight: bold; }
.town-cost-row .cost-chip img { width: 15px; height: 15px; }
.town-sold-sticker { width: 30px; height: auto; flex-shrink: 0; margin-right: 72px;}
.town-lock-label   { font-size: 0.56rem; color: rgba(255,255,255,0.5); font-style: italic; }

/* Town Upgrade Contribution (Palisade, etc.) */
.town-upgrade-section {
  padding: 4px 9px;
  margin-top: 4px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  position: relative;   /* anchor for the SOLD overlay when capped */
}

/* Upgrade locked for this mission: grey the bar and stamp a SOLD sign over it. */
.town-upgrade-section.town-upgrade-locked .town-upgrade-slots {
  opacity: 0.4;
  filter: grayscale(1);
  pointer-events: none;
}
.town-upgrade-slot.town-upgrade-locked-slot { cursor: default; }
.town-upgrade-sold {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-9deg);
  width: 96px;
  height: auto;
  pointer-events: none;
  z-index: 12;   /* ABOVE the ornamental frame cover (.town-panel::after, z-index 10) — was 4, hidden under it */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
.town-upgrade-label {
  font-size: 0.74rem;
  letter-spacing: 0em;
  text-transform: none;
  color: var(--text-dim);
  margin-bottom: 0px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.town-upgrade-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #000;
  font-size: 0.85rem;
  cursor: help;
  transition: all 0.2s ease;
  margin-top: -4px;
}
.town-upgrade-info-icon:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #000
}
.town-upgrade-slots  { display: flex; gap: 10px; flex-wrap: wrap; }
.town-upgrade-slot   {
    position: relative;
    width: 43px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: url('assets/ui/7town/town-cta-clean.png') center / 43px 40px no-repeat;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.1s ease, filter 0.1s ease;
}

.town-upgrade-slot:hover:not(.town-upgrade-unaffordable):not(.town-upgrade-satisfied) {
    transform: scale(1.08);
    filter: brightness(1.15);
}

.town-upgrade-slot:active:not(.town-upgrade-unaffordable):not(.town-upgrade-satisfied) {
    transform: scale(0.95);
    filter: brightness(1.05);
}

.town-upgrade-slot.town-upgrade-unaffordable {
    filter: grayscale(100%);
    opacity: 0.45;
    cursor: not-allowed;
}

.town-upgrade-slot.town-upgrade-satisfied {
    filter: grayscale(100%);
    opacity: 0.45;
    cursor: not-allowed;
}

.town-upgrade-slot img  { width: 20px; height: 20px; object-fit: contain; }
.town-upgrade-slot span { font-size: 0.85rem; font-weight: bold; color: var(--text-gold); }
.town-upgrade-sold-sticker {
    position: absolute;
    width: 24px;
    height: auto;
    top: 2px;
    right: -4px;
}


/* ============================================================
   RIGHT COLUMN — BAG PANEL
   ============================================================ */

.bag-panel {
    /* Bag bg: 489 × 434px — no panel frame, sits on wooden table. Centred in 393px column. */
    width: 489px;
    flex-shrink: 0;
    padding: 0;
    overflow: visible;
    position: relative;
    margin-left: -100px;
    margin-top: -5px;
    pointer-events: none;
}

.bag-visual {
    position: relative;
    width: 489px;
    height: 434px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Enemy castle / objective panel — layered over the bag/stones (the bag-panel is the positioning
   anchor). A nice big image of the stronghold that swaps damage states as you wreck it, with a
   town-style HP bar. (.bag-panel is pointer-events:none, so re-enable here for hover/tooltip.) */
/* Layered: castle state art BEHIND, the enemy-cover frame ON TOP, title + HP bar overlaid. The cover
   image is the layout anchor (in flow → defines the panel size). Likely needs art-fit tinkering. */
.enemy-castle-panel {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    z-index: 6;
    pointer-events: auto;
    cursor: help;
}
.enemy-castle-cover {
  position: relative;
  display: block;
  width: 354px;
  z-index: 2;
  pointer-events: none;
  margin-top: -26px;
  margin-left: -20px;
}
.enemy-castle-img {
  position: absolute;
  top: 7%;
  left: 52%;
  transform: translateX(-50%);
  width: 93%;
  z-index: 1;
  object-fit: contain;
}
.enemy-castle-panel.destroyed .enemy-castle-img { opacity: 0.9; filter: grayscale(0.4); }
.enemy-castle-name {
    position: absolute;
    top: 17%;
    left: 0; right: 0;
    z-index: 3;
    text-align: center;
    font-family: var(--font-cta, serif);
    color:  #ffcf5c;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 6px #000, 0 0 4px #000;
    pointer-events: none;
}
.enemy-castle-hp-block {
    position: absolute;
    bottom: 31%;
    left: 52%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.enemy-castle-hp-bar {
    width: 218px;
    height: 14px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #5a3a2a;
    border-radius: 7px;
    overflow: hidden;
}
.enemy-castle-hp-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(#c0392b, #8e2820);
    transition: width 0.35s ease;
}
.enemy-castle-hp-fill.low { background: linear-gradient(#e0512f, #9a2414); }
.enemy-castle-hp-val {
    color: #f0d8a0;
    font-weight: bold;
    font-size: 0.82rem;
    text-shadow: 0 1px 3px #000;
}
/* Brief shake + flash when the castle is struck (keeps the translateX(-50%) centering). */
.enemy-castle-panel.castle-hit { animation: castleHit 0.4s ease-out; }
@keyframes castleHit {
    0%   { transform: translateX(-50%); filter: brightness(1); }
    25%  { transform: translateX(calc(-50% - 5px)); filter: brightness(1.9) saturate(1.4); }
    50%  { transform: translateX(calc(-50% + 5px)); }
    75%  { transform: translateX(calc(-50% - 3px)); }
    100% { transform: translateX(-50%); filter: brightness(1); }
}

.bag-img {
    width: 489px;
    height: 434px;
    object-fit: contain;
    position: relative;
    z-index: -1;
    display: block;
    pointer-events: none;
}

.bag-stats-overlay {
    position: absolute;
    top: 39%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    line-height: 1.7;
}

.bag-stat-line {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--text-main);
    white-space: nowrap;
    line-height: 1.1;
    margin-bottom: 8px;
}

.bag-stat-line span {
    color: #ffff00;
}

.bag-stat-line.dark-stat {
    color: #9c9076;
    margin-bottom: 0;
}

.bag-stat-line.dark-stat span {
    color: #ffff00;
}

.btn.primary.pull-btn {
    position: absolute;
    bottom: 180px;
    left: 50%;
    transform: translateX(-50%);
    width: 210px;
    height: 48px;
    padding: 8px 12px;
    border: none;
    color: #000;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    font-family: var(--font-cta);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: auto;
    background-color: transparent;
    background-image: url('assets/ui/9bag/bag-cta-clean.png');
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.btn.primary.pull-btn:hover {
    background-image: url('assets/ui/9bag/bag-cta-hover.png');
}

.btn.primary.pull-btn:active {
    background-image: url('assets/ui/9bag/bag-cta-click.png');
}

/* The Pull button is the player's anchor action — while it's active it carries a
   soft ongoing glow and a gentle pulse every few seconds to draw the eye.
   Scoped to :not(:disabled) so a spent/locked button sits quiet (greyscale).
   translateX(-50%) is repeated in every keyframe to preserve the centring. */
.btn.primary.pull-btn:not(:disabled) {
    animation: pullPulse 6s ease-in-out infinite;
}
@keyframes pullPulse {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        filter: drop-shadow(0 0 5px rgba(255, 226, 80, 0.45));
    }
    50% {
        transform: translateX(-50%) scale(1.025);
        /* Layered halo — a bright inner ring plus a wide soft outer glow for reach. */
        filter: drop-shadow(0 0 16px rgba(255, 235, 110, 1)) drop-shadow(0 0 32px rgba(255, 200, 50, 0.7));
    }
}


/* ============================================================
   RIGHT COLUMN — LOG PANEL
   ============================================================ */

.log-panel {
    /* Natural: 320 × 320px — centred in 393px column, spikes bleed sides.
       Padding 40px keeps text inside the ornamental border region. */
    width: 393px;
    height: 370px;
    flex-shrink: 0;
    overflow: visible;
    position: relative;
    margin-left: -46px;
    margin-top: -83px;
    padding: 50px 52px 30px 52px;
    background: transparent url('assets/ui/8logs/8log-ui-background.png') center top / 393px 370px no-repeat;
}
.log-title {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 7px;
  margin-bottom: 12px;
  text-align: center;
  margin-top: 10px;
}
#message-log {
  font-size: 0.87rem;
  color: #fff;
  line-height: 1.7;
  min-height: 60px;
  max-height: 207px;
  overflow-y: auto;
  padding: 0px 22px;
}
#message-log .highlight { color: #b0b0b0;}
#message-log .warning   { color: var(--text-warn); background: #000;
}



/* ============================================================
   INLINE STONE LABELS (log messages)
   ============================================================ */

.stone-label { font-weight: bold; padding: 1px 4px; border-radius: 2px; font-size: 0.8em; }
.stone-label.red    { background: #3d0e0e; color: #e87a7a; }
.stone-label.blue   { background: #0d1640; color: #7aadff; }
.stone-label.yellow { background: #2e1f00; color: #f0c040; }
.stone-label.purple { background: #24063a; color: #c07aff; }
.stone-label.dark   { background: #111118; color: #9c9076; }
.stone-label.white  { background: #1a1a2a; color: #e4d4ba; }
.stone-label.any    { background: #1a1a2a; color: #9c9076; }
.enemy-name         { color: #e06060; }


/* ============================================================
   EVENT CARD MODAL
   ============================================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none; /* Hidden by default, shown by JS */
}

.modal-overlay.active {
    display: flex;
    animation: fadeIn 0.4s ease-out;
}

.modal-overlay.exit {
    animation: fadeOut 0.4s ease-out forwards;
}

.modal-container {
    position: relative;
    width: 700px;
    height: 900px;
    background: #000000;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.95), inset 0 0 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-container.pop-in {
    animation: cardPopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-container.pop-out {
    animation: cardPopOut 0.5s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
}

/* "Peek the board" — when the cursor is OFF the event card, fade the card AND its backdrop so you can
   read the battlefield (judge whether you can take the hit) without dismissing the event. Cursor back
   onto the card → full opacity. Clicking off still does nothing; a selection is required to close. */
#event-modal { transition: opacity 0.22s ease; }
#event-modal-overlay { transition: background-color 0.22s ease; }
#event-modal-overlay.peeking { background-color: rgba(0, 0, 0, 0); }
#event-modal-overlay.peeking #event-modal { opacity: 0.12; }

/* Top cover (scroll banner with title + phase panel) */
.modal-top-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 307px;
    background: transparent url('assets/cards/card-parts/top-cover.png') center / 100% 100% no-repeat;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 60px 40px;
    box-sizing: border-box;
}

.modal-title {
    font-family: var(--font-cta);
    font-size: 1.3rem;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: left;
    font-weight: bold;
    flex: 1;
}

.modal-phase-panel {
    position: absolute;
    right: 42px;
    top: 25px;
    background: transparent;
    border: none;
    padding: 0;
    text-align: center;
    border-radius: 0;
    font-size: 0.75rem;
    color: #ffffff;
    max-width: 140px;
    line-height: 1.4;
}

.modal-phase-panel strong {
    display: block;
    font-family: var(--font);
    font-weight: normal;
    margin-bottom: 11px;
    color: #fff;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.modal-phase-spawns {
    font-size: 0.95rem;
    line-height: 1.4;
    margin-top: 4px;
}
/* Tag on a spawn carried over from the previous event's choice */
.spawn-carried {
    font-size: 0.95rem;
    font-style: italic;
    color: #ffcf5c;
    opacity: 0.9;
}

/* Card art (per-event painted banner) */
.modal-card-art {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 0px; /* Overlap under top-cover */
    position: relative;
    z-index: 1;
}

/* Flavour text band */
.modal-flavour-band {
    position: absolute;
    top: 325px;
    left: 0;
    width: 100%;
    padding: 6px 30px;
    z-index: 10;
    font-style: italic;
    font-family: Garamond, Georgia, 'Times New Roman', serif;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.6;
    text-align: center;
    box-sizing: border-box;
    }

.modal-flavour-text::before,
.modal-flavour-text::after {
    content: '"';
    color: #ffffff;
    margin: 0 4px;
}

/* Options area */
.modal-options-area {
    background: rgba(25, 18, 18, 0.9) url('assets/cards/card-parts/card-bottom.jpg') left top / 100% auto no-repeat;
    background-blend-mode: screen;
    padding: 120px 20px 20px 20px;
    position: relative;
    height: 593px;
    overflow-y: auto;
    flex-shrink: 0;
    box-sizing: border-box;
}

.modal-modifier-banner {
    background: rgba(180, 120, 20, 0.15);
    border: 1px solid rgba(180, 120, 20, 0.5);
    border-radius: 3px;
    color: #7a4a00;
    font-size: 0.78rem;
    font-style: italic;
    padding: 6px 10px;
    margin-bottom: 8px;
    text-align: center;
}

.options-header {
    font-family: Garamond, Georgia, 'Times New Roman', serif;
    font-style: italic;
    color: #000;
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.option-divider {
  width: 211px;
  height: auto;
  display: block;
  margin-left: auto;
  opacity: 0.8;
  margin-right: auto;
}

.option-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 12px;
    margin: 0;
    background: transparent;
    border-left: 4px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 2px;
}

.option-row:hover:not(.disabled) {
    background: rgba(200, 169, 110, 0.12);
    border-left-color: #000;
}

.option-row.selected {
    background: rgba(200, 169, 110, 0.2);
    border-left-color: #fff952;
}

.option-row.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(1);
}

.option-arrow {
    flex-shrink: 0;
    width: 100px;
    height: auto;
    margin-top: 2px;
}

.option-row.disabled .option-arrow {
    filter: grayscale(1) brightness(0.7);
}

.option-row.selected .option-arrow {
    filter: brightness(1.3);
}

.option-content {
    flex: 1;
}

.option-label {
    font-family: var(--font-cta);
    font-size: 0.8rem;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 0px;
    font-weight: bold;
}

.option-description {
    font-family: Garamond, Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    color: #000;
    line-height: 1.5;
    font-style: italic;
}

.option-description p {
    margin: 4px 0;
    padding: 0;
    line-height: 1;
}

.option-description p:first-child {
    margin-top: 0;
}

.option-description p:last-child {
    margin-bottom: 0;
}

.option-requirement {
    font-size: 0.68rem;
    color: #888;
    margin-top: 4px;
    font-style: italic;
    font-family: Garamond, Georgia, 'Times New Roman', serif;
}
/* Requirement is satisfied → faded black "unlocked by …" indicator so the player can see
   WHY an option is available (e.g. because they built the Monastery). */
.option-requirement.met {
    color: #434343;
    opacity: 0.7;
}

.description-stone-icon {
    height: 14px;
    width: 14px;
    object-fit: contain;
    vertical-align: middle;
    margin: 0px 1px 2px 2px;
    display: inline-block;
}

/* Confirm CTA */
.modal-confirm-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 0 0;
    margin-top: 16px;
}

.btn.event-confirm-btn {
    background: transparent url('assets/ui/1event/next-turn-cta-clean.png') center / 399px 54px no-repeat;
    width: 399px;
    height: 54px;
    color: #000;
    font-family: var(--font-cta);
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.btn.event-confirm-btn:hover:not(:disabled) {
    background-image: url('assets/ui/1event/next-turn-cta-hover.png');
}

.btn.event-confirm-btn:active:not(:disabled) {
    background-image: url('assets/ui/1event/next-turn-cta-click.png');
}

.btn.event-confirm-btn:disabled {
    filter: grayscale(1) brightness(0.35) contrast(0.8);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ============================================================
   MISSION BRIEFING MODAL
   ============================================================ */

.mission-briefing-card {
    width: 700px;
    position: relative;
}

/* Top cover — mission header with number and title */
.mission-top-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 307px;
  background: transparent url('assets/campaign/orc/mission1_overview_image.jpg') center / 100% 100% no-repeat;
  z-index: 20;
  display: flex;
  box-sizing: border-box;
}

.mission-header-left {
    flex: 0 0 120px;
}

.mission-number-label {
  font-family: var(--font-cta);
  font-size: 1.2rem;
  color: #fff;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  z-index: 25;
  margin-top: -25px;
  margin-left: 34px;
}

.mission-number-value {
  font-family: var(--font-cta);
  font-size: 4.4rem;
  color: #fff;
  text-align: center;
  font-weight: bold;
  line-height: 1;
  text-transform: uppercase;
  position: relative;
  z-index: 25;
  margin-left: 30px;
}

.mission-header-right {
    flex: 1;
    min-height: 120px;
    border-radius: 4px;
    overflow: hidden;
}

.mission-header-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 700px;
  height: 307px;
  z-index: 0;
  object-fit: cover;
}

.mission-subtitle {
  position: absolute;
  top: 85px;
  left: 246px;
  right: 0;
  z-index: 25;
  font-family: var(--font-display, serif);
  font-size: 1.15rem;
  font-style: italic;
  color: #2a2018;
  letter-spacing: 0.04em;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.35);
}

.mission-title {
  position: absolute;
top: 55px;
  left: 236px;
  right: 0;
  z-index: 25;
  font-family: var(--font-cta);
  font-size: 1.8rem;
  color: #000;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mission-cover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* Flavour text band */
.mission-flavour {
    position: absolute;
    top: 220px;
    left: 0;
    width: 100%;
    padding: 20px 40px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7);
}

.modal-flavour-text {
  font-style: italic;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.2;
}

.mission-objective-summary {
  font-weight: bold;
  color: #000;
  margin-top: 70px;
  font-style: normal;
  font-size: 1.5rem;
  margin-bottom: 30px;
}

/* Content section — character portrait + objectives */
.mission-content-section {
    position: absolute;
    top: 307px;
    left: 0;
    width: 100%;
    height: 593px;
    padding: 0;
    box-sizing: border-box;
    background: transparent url('assets/cards/card-parts/card-bottom.jpg') center / cover no-repeat;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
    padding: 20px 40px;
    align-content: start;
}

.mission-flavour-section {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 30px;
}

.mission-character-area {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
}

.mission-character-portrait {
    position: relative;
    width: 200px;
    height: 200px;
    overflow: visible;
}

.character-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin-top: 37px;
  margin-left: 38px;
}

.mission-character-cover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 270px;
    height: 270px;
    pointer-events: none;
    z-index: 2;
}

.portrait-caption {
  position: inherit;
  bottom: 0;
  left: 35px;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
  padding: 26px 6px 16px 6px;
  z-index: 1;
  margin-top: -7px;
  border-radius: 9px;
}

.mission-objectives-area {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  margin-left: -50px;
}

.objectives-header {
  font-family: var(--font-cta);
  font-size: 0.95rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 35px 0 12px -25px;
  padding: 8px 113px 8px 33px;
  background: #000;
  display: inline-block;
}

.objectives-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #000;
    font-size: 1.2rem;
}

.objectives-list li {
    margin-bottom: 2px;
    padding-left: 20px;
    position: relative;
    line-height: 1.1;
}

.objectives-list li::before {
  content: "●";
  left: -10px;
  color: #000;
  font-size: 1.5rem;
  position: relative;
}

/* Briefing-modal bonus objectives — their own 3-line blocks (★ BONUS / goal / reward), NOT list items.
   Gold so they read as optional rewards, distinct from the required goals above. */
.objective-bonus-block {
  margin: 1px 0 0;
  line-height: 1.3;
  background: rgba(22, 15, 8, 0.9);
  padding: 4px 22px;
}
.objective-bonus-block .bonus-tag {
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.12em;
    color: #c8941a;          /* ★ BONUS — small caps gold, star kept next to the word */
}
.objective-bonus-block .bonus-desc {
    font-size: 1rem;
    color: #ff0e0e;          /* the goal line */
}
.objective-bonus-block .bonus-reward {
    color: #eaff00;    
}

.mission-defeat-condition {
  margin-top: 0px;
  font-size: 1.3rem;
  color: #000;
  font-style: italic;
  padding-top: 0px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

/* Actions — button area */
.mission-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    height: 80px;
    background: rgba(0, 0, 0, 0);
    box-sizing: border-box;
    z-index: 15;
}

.btn.mission-begin-btn {
    background: transparent url('assets/ui/1event/next-turn-cta-clean.png') center / 399px 54px no-repeat;
    width: 399px;
    height: 54px;
    color: #000;
    font-family: var(--font-cta);
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.btn.mission-begin-btn:hover:not(:disabled) {
    background-image: url('assets/ui/1event/next-turn-cta-hover.png');
}

.btn.mission-begin-btn:active:not(:disabled) {
    background-image: url('assets/ui/1event/next-turn-cta-click.png');
}


/* ============================================================
   HOME & MISSION INTRO SCREENS
   ============================================================ */

.game-layout {
    display: none;
}

.game-layout.active {
    display: grid;
}

.home-screen-overlay,
.mission-intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 101;
    display: none;
    justify-content: center;
    align-items: center;
}

.home-screen-overlay.active,
.mission-intro-overlay.active {
    display: flex;
}

.home-screen-container,
.mission-intro-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
    max-width: 600px;
    padding: 40px;
}

.home-logo {
    height: 100%;
    object-fit: contain;
    margin-bottom: 20px;
}

.home-button-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 400px;
}

.btn-primary {
    background: transparent url('assets/ui/1event/next-turn-cta-clean.png') center / 100% 100% no-repeat;
    border: none;
    color: #000;
    font-family: var(--font-cta);
    font-weight: bold;
    cursor: pointer;
    padding: 20px 60px;
}

.btn-primary:hover:not(:disabled) {
    background-image: url('assets/ui/1event/next-turn-cta-hover.png');
}

.btn-primary:active:not(:disabled) {
    background-image: url('assets/ui/1event/next-turn-cta-click.png');
}

.btn-primary:disabled {
    filter: grayscale(1) brightness(0.5);
    cursor: not-allowed;
}

.btn-primary.home-cta-large,
.btn-secondary.home-cta-large {
    width: 100%;
    padding: 16px;
    font-size: 1.1rem;
    min-height: 60px;
}

.btn-secondary {
    background: transparent;
    border: 2px solid #fff952;
    color: #fff952;
    font-family: var(--font-cta);
    font-weight: bold;
    cursor: pointer;
}

.btn-secondary:hover:not(:disabled) {
    background: rgba(200, 169, 110, 0.2);
    filter: brightness(1.1);
}

.btn-secondary:disabled {
    border-color: #666;
    color: #666;
    cursor: not-allowed;
    opacity: 0.6;
}



.mission-flavor {
    font-family: var(--font);
    font-size: 1rem;
    color: #fff;
    line-height: 1.8;
    max-width: 500px;
}

/* ============================================================
   HOMEPAGE CONTAINER
   ============================================================ */

#homepage-container {
    display: none;
    padding-bottom: 64px;   /* clear the fixed tester footer bar (#tester-tools, 56px) at the page bottom */
}

#homepage-container.active {
    display: block;
}

/* --- HERO SECTION ------------------------------------------ */

.hero-section {
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: url('assets/ui/woodentable-background.jpg') fixed center/cover;
    padding: 60px 20px;
}

.hero-content {
    text-align: center;
    z-index: 2;
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.hero-content .video-placeholder {
    max-width: 900px;
    width: 100%;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-cta {
    min-width: 180px;
    padding: 16px 32px;
    font-size: 1.1rem;
}

/* Tagline under the Play button — kept high-contrast over the busy wooden bg */
/* Full-width dark band that holds the tagline, between the hero and features. */
.tagline-band {
    width: 100%;
    background: #111111;   /* very dark grey — shared with the footer */
    padding: 30px 20px;
}

.hero-tagline {
    max-width: 760px;
    margin: 0 auto;
    color: #f3ead8;
    font-family: var(--font);
    font-size: 1.28rem;
    line-height: 1.6;
    text-align: center;
}
.hero-tagline strong {
    color: #ffcf5c;
    font-weight: bold;
    letter-spacing: 0.02em;
}

.btn.hero-secondary {
    min-width: 180px;
    padding: 16px 32px;
    font-size: 1.1rem;
}

/* --- MARKETING SECTIONS ----------------------------------- */

.marketing-section {
    padding: 80px 20px;
    text-align: center;
    background: rgba(24, 17, 9, 0.8);
    border-top: 1px solid #342818;
    border-bottom: 1px solid #342818;
    margin: 20px 0;
}

.section-content {
    max-width: 1200px;
    margin: 0 auto;
}

.marketing-section h2 {
    font-family: var(--font-cta);
    font-size: 2rem;
    color: #fff952;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 40px;
}

.video-placeholder {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #1a1a1a, #0e0e18) url('assets/ui/woodentable-background.jpg');
    background-attachment: fixed;
    border: 2px solid #fff952;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1280px;
    margin: 0 auto;
}

.placeholder-text {
    font-size: 1.2rem;
    color: #fff952;
    font-family: var(--font-cta);
    letter-spacing: 1px;
}

/* How-to-play tutorial video — responsive 16:9 YouTube embed (Learn to Play modal). */
.howto-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 2px solid #fff952;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto 6px;
    background: #000;
}
.howto-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- FEATURES SECTION ------------------------------------ */

.features-section {
    padding: 80px 20px;
    background: rgba(24, 17, 9, 0.6);
    position: relative;
    z-index: 1;            /* paints OVER the footer, so the stone divider bleeds cleanly onto it */
}

/* Decorative stone divider — lives in the features section and bleeds DOWN into the
   footer, so the (opaque) stones paint over the dark footer with no translucent wash. */
.section-stones-divider {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%); /* centered; ~half the strip bleeds down into the footer */
    width: 556px;
    max-width: 100%;       /* scale down on screens narrower than the image */
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 2;
}

.features-section h2 {
    text-align: center;
    padding: 20px;

}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    background: url('assets/ui/web-assets/generic-background-card-covers.jpg') center/cover,
                rgba(20, 15, 15, 0.9);
    position: relative;
    padding: 20px;
    border-radius: 0px 0px 20px 20px;
    transition: all 0.3s ease;
    text-align: center;
    overflow: visible;     /* let the decorative stones straddle the card's bottom edge */
    min-height: 380px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    border: 1px solid #342818;
}

/* Decorative stones straddling the top edge of each card — same motif as the
   section divider, purely ornamental. */
.feature-card-stones {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -55%); /* most of the strip bleeds above the card edge */
    width: 104%;
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 4;
}

.feature-frame {
    position: relative;
    width: 290px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('assets/ui/web-assets/feature-section-character-small-feature-image-cover.png') center/contain no-repeat;
    pointer-events: none;
    z-index: 10;
}

.feature-card:hover {
    border-color: #fff952;
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.feature-image {
    width: 160px;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

.feature-card-title {
  font-family: var(--font-cta);
  font-size: 0.9rem;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 -20px 0 -20px;
  padding: 16px 0px;
  position: relative;
  z-index: 2;
  background: url('assets/ui/web-assets/feature-section-h3-background.png') center/100% 100% no-repeat;
  width: calc(100% + 40px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-card-description {
    font-family: var(--font);
    font-size: 0.95rem;
    color: #fff;
    line-height: 1.6;
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0 6px;
}

/* --- FOOTER ---------------------------------------------- */

.page-footer {
    position: relative;
    z-index: 0;            /* sits BEHIND the features section, which carries the bleeding stone divider */
    background: #111111;   /* very dark grey — shared with the tagline band */
    padding: 60px 0 40px;  /* top room for the stones bleeding down from the section above */
    text-align: center;
    color: #fff;
    font-size: 0.9rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content p {
    margin-bottom: 15px;
}

.social-links {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.social-link {
    color: #fff952;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.social-link:hover {
    color: #fff;
}

/* ============================================================
   CHARACTER & CAMPAIGN SELECT OVERLAY
   ============================================================ */

.character-select-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(24, 17, 9, 0.95);
    z-index: 99;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.character-select-overlay.active {
    display: flex;
}

.select-modal-background {
    display: none;
}

.select-modal-container {
    width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    background: #16110a url('assets/ui/web-assets/generic-background-dark-covers.jpg') left top / auto auto no-repeat scroll;
    border: 1px solid #342818;
    border-radius: 4px;
    padding: 0;
    z-index: 101;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Banner Section */
.select-banner {
    background: url('assets/ui/web-assets/banner-background-asset.png') left top / 800px 115px no-repeat;
    min-height: 100px;
    padding: 20px;
    text-align: center;
    margin-top: 30px;
}

.select-banner h1 {
    font-family: var(--font-cta);
    font-size: 2rem;
    color: #000;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 20px;
}

.banner-subtitle {
  font-size: 1rem;
  color: #fff;
  font-style: normal;
  margin-top: 36px;
}

/* Select Sections */
.select-section {
    padding: 0px;
}

.select-section:last-of-type {
    border-bottom: none;
}

/* Character Selection Section */
.character-section {
    padding: 0px 20px;
}

.character-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.character-card {
    position: relative;
    border: 2px solid #342818;
    border-radius: 4px;
    padding: 8px;
     background: rgba(20, 15, 15, 1);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.character-card:hover:not(.dlc-locked) {
    border-color: #fff952;
    background: rgba(20, 15, 15, 1);
    box-shadow: 0 0 8px rgba(255, 249, 82, 0.3);
}

.character-card.selected {
    border-color: #ffcc00;
    background: rgba(20, 15, 15, 1);
    box-shadow: inset 0 0 12px rgba(200, 169, 110, 0.4);
}

.character-card.dlc-locked {
    cursor: not-allowed;
    opacity: 1;
}

.character-card.dlc-locked .character-card-image {
    filter: grayscale(100%);
}

.character-card-image {
    width: 100%;
    height: 100px;
    object-fit: cover;
    object-position: top;
    border-radius: 2px;
    margin-bottom: 6px;
}

.character-card-title {
    font-size: 0.7rem;
    font-family: var(--font-cta);
    text-transform: uppercase;
    color: #c8a96e;
    letter-spacing: 0.05em;
}

.character-card-name {
    font-size: 0.75rem;
    color: var(--text-main);
    margin-top: 2px;
}

.character-card-lock {
  position: absolute;
  top: 93px;
  right: 9px;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #c8a96e;
}

/* Character Profile Section */
.character-profile-section {
    position: relative;
    padding: 20px;
    background: url('assets/ui/web-assets/character-selection-background.png') center / cover no-repeat;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.profile-portrait-wrapper {
    flex: 0 0 var(--portrait-wrapper-size);
    width: var(--portrait-wrapper-size);
    height: var(--portrait-wrapper-size);
}

.profile-portrait-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 42px;
}

.profile-portrait-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('assets/ui/web-assets/character-selection-portait-large-cover.png') center / contain no-repeat;
    z-index: 3;
    pointer-events: none;
}

.profile-portrait-img {
    width: 80%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.profile-portrait-cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('assets/ui/web-assets/portait-top-cover.png') center/cover no-repeat;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.profile-portrait-frame.selected .profile-portrait-cover {
    opacity: 1;
    filter: hue-rotate(-60deg) saturate(1.5);
}

.profile-info {
    width: var(--profile-info-width);
    margin-left: -60px;
    margin-top: 30px;
}

.profile-hero-name {
    font-family: var(--font-cta);
    font-size: 1rem;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.profile-blurb {
    font-size: 1rem;
    color: #000;
    margin-bottom: 12px;
    line-height: 1.4;
}

.profile-abilities {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.profile-starting-stones {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(200, 169, 110, 0.3);
}

.starting-stones-label {
    font-weight: bold;
    color: #c8a96e;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.starting-stones-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.starting-stone-item {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(22, 15, 8, 0.7);
    padding: 4px 8px;
    border-radius: 2px;
    font-size: 0.75rem;
    color: #c3a982;
}

.starting-stone-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.starting-stone-count {
    font-weight: bold;
    color: #fff;
}

.profile-ability-block {
  background: rgba(22, 15, 8, 0.7);
  padding: 5px 22px;
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
}

.ability-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.ability-block-name {
    font-weight: bold;
    color: #fff600;
}

.ability-block-cost {
    display: flex;
    gap: 3px;
    margin-left: auto;
}

.passive-note .cost-chip-img {
    width: 12px;
    height: 12px;
    object-fit: contain;
}

.cost-stone-image {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.ability-block-description {
    color: #fff;
    font-size: 1rem;
    font-style: italic;
}

/* Campaign Selection Section */
.campaign-section {
    background: url('assets/ui/web-assets/generic-background-dark-covers.jpg') left top / auto auto no-repeat scroll;
}

.campaign-section h2 {
    background: url('assets/ui/web-assets/banner-background-asset.png') left top / 800px 115px no-repeat;
    min-height: 100px;
    padding: 40px;
    text-align: center;
    margin: 0;
    font-family: var(--font-cta);
    font-size: 2rem;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.campaign-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 12px 20px 20px;
}

.campaign-card {
    position: relative;
    border: 2px solid #342818;
    border-radius: 4px;
    padding: 8px;
    background: rgba(20, 15, 15, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.campaign-card:hover:not(.dlc-locked) {
    border-color: #fff952;
    background: rgba(20, 15, 15, 1);
}

.campaign-card.selected {
    border-color: #ffcc00;
    background: rgb(0, 0, 0);
}

.campaign-card.dlc-locked {
    cursor: not-allowed;
    opacity: 0.65;
}

.campaign-card.dlc-locked .campaign-card-image {
    filter: grayscale(100%);
}

.campaign-card-image {
    width: 100%;
    height: 100px;
    object-fit: cover;
    object-position: top;
    border-radius: 2px;
    margin-bottom: 6px;
}

.campaign-card-title {
    font-size: 0.75rem;
    font-family: var(--font-cta);
    text-transform: uppercase;
    color: #c8a96e;
    margin-bottom: 2px;
}

.campaign-card-label {
    font-size: 0.8rem;
    color: var(--text-main);
    margin-bottom: 4px;
}

.campaign-card-coming-soon {
    font-size: 0.6rem;
    color: #999;
    font-style: italic;
}

.campaign-card-lock {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #c8a96e;
}

/* CTA Button Area */
.select-cta-area {
    padding: 20px;
    text-align: center;
    background: url('assets/ui/web-assets/generic-background-dark-covers.jpg') left top / auto auto no-repeat scroll;
    border-top: 1px solid #342818;
    border-bottom: 1px solid #342818;
}

.select-begin-btn {
    min-width: 399px;
    padding: 0;
    font-size: 0.95rem;
    font-family: var(--font-cta);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background-size: 399px 54px !important;
    width: 399px;
    height: 54px;
}

.select-begin-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #555;
    border-color: #555;
    color: #999;
}

/* ============================================================
   MISSION BRIEFING
   ============================================================ */

.mission-briefing-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('assets/ui/woodentable-background.jpg') fixed center/cover,
                rgba(0, 0, 0, 0.85);
    z-index: 98;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mission-briefing-overlay.active {
    display: flex;
}

.mission-briefing-container {
    background: rgba(22, 15, 8, 0.95);
    border: 1px solid #342818;
    border-radius: 4px;
    max-width: 700px;
    width: 100%;
    padding: 40px;
    max-height: 90vh;
    overflow-y: auto;
}

.mission-briefing-header {
    font-family: var(--font-cta);
    font-size: 2rem;
    color: #fff952;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 30px;
    text-align: center;
}

.mission-briefing-illustration {
    margin-bottom: 30px;
    text-align: center;
}

.mission-illustration-img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    max-height: 200px;
}

.mission-briefing-content {
    margin-bottom: 30px;
}

.mission-briefing-text {
    color: #c3a982;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 15px;
    font-family: var(--font);
}

.mission-objectives {
    margin-top: 25px;
    padding: 20px;
    background: rgba(20, 15, 15, 0.6);
    border-left: 3px solid #c8a96e;
    border-radius: 2px;
}

.mission-objectives h3 {
    color: #c8a96e;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 15px;
    font-weight: bold;
}

.mission-objectives ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mission-objectives li {
    color: #c3a982;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 6px 0;
}

.mission-objectives li:before {
    content: "▸ ";
    color: #c8a96e;
    margin-right: 8px;
}

.mission-briefing-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.mission-begin-btn {
    flex: 1;
    padding: 16px 32px;
    font-size: 1rem;
}

.mission-back-btn {
    padding: 16px 32px;
    background: rgba(20, 15, 20, 0.8);
    border: 1px solid #342818;
    color: #c3a982;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.3s;
}

.mission-back-btn:hover {
    border-color: #c8a96e;
    color: #c8a96e;
}

/* ============================================================
   INFO MODALS (Learn to Play, Game Info, etc)
   ============================================================ */

.info-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1001;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.info-modal.active {
    display: flex;
}

.info-modal-content {
    background: rgba(22, 15, 8, 0.95);
    border: 1px solid #342818;
}

/* ============================================================
   TOOLTIP SYSTEM
   ============================================================ */

.game-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 9990;           /* above ALL panels/overlays (lit panels 1300, transitions 1500, bag, etc.) so tooltips are never occluded */
  width: 350px;            /* fixed — every tooltip is the same width as the unit card */
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  border: 2px solid #ffffff;
}

.tooltip-background {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('assets/ui/web-assets/generic-background-dark-covers.jpg') center/ cover no-repeat scroll;
  z-index: -1;
  opacity: 1;
}

.tooltip-content {
  position: relative;
  padding: 12px 14px;
  background: rgba(22, 15, 8, 0.70);
  border: none;
  z-index: 1;
}

.tooltip-portrait {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: top center;   /* anchor to the top of the art, not the middle */
  border-radius: 3px;
  border: 1px solid #342818;
  margin-bottom: 8px;
}

.tooltip-name {
  font-family: var(--font-cta);
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--text-main);
  letter-spacing: 0.05em;
  margin: 0 0 6px 0;
  font-weight: bold;
}

.tooltip-keywords {
  font-size: 0.75rem;
  color: #7cb3e0;
  font-style: none;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(74, 52, 30, 0.5);
}

.tooltip-keywords-text {
  display: block;
}

.tooltip-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
  margin-bottom: 8px;
}

.tooltip-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
}

.tooltip-stat-label {
  color: #c3a982;
  font-weight: bold;
  min-width: 20px;
}

.tooltip-stat-value {
  color: var(--text-main);
  font-weight: bold;
  margin-left: 4px;
}

.tooltip-stat-value.stat-above {
  color: #6fd96f;
}

.tooltip-stat-value.stat-below {
  color: #d97070;
}

.tooltip-traits {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(74, 52, 30, 0.5);
}

.tooltip-traits-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
}

.tooltip-trait-box {
  background: rgba(42, 30, 16, 0.7);
  border: 1px solid #c8a96e;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.65rem;
  color: #c3a982;
  flex: 0 1 auto;
}

.tooltip-trait-name {
  font-weight: bold;
  color: #c8a96e;
  display: block;
  margin-bottom: 2px;
}

.tooltip-trait-desc {
  color: #9d8a6e;
  font-size: 0.6rem;
  line-height: 1.2;
}

.tooltip-race-trait {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(74, 52, 30, 0.5);
}

.tooltip-keywords {
  margin-bottom: 8px;
}

.tooltip-keywords-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
}

.tooltip-keyword-box {
  background: rgba(42, 30, 16, 0.7);
  border: 1px solid #c8a96e;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.65rem;
  color: #c8a96e;
  flex: 0 1 auto;
  font-weight: bold;
}

/* Building-gated keyword that isn't active yet — greyed + struck through. */
.tooltip-keyword-box.inactive {
  color: #6a5d4a;
  border-color: #4a4030;
  background: rgba(42, 30, 16, 0.4);
  text-decoration: line-through;
}

.tooltip-descriptions {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(74, 52, 30, 0.5);
}

.tooltip-descriptions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0;
}

.tooltip-description-item {
  background: rgba(42, 30, 16, 0.7);
  border: 1px solid #c8a96e;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.65rem;
}

.tooltip-description-name {
  font-weight: bold;
  color: #c8a96e;
  display: inline;
}

.tooltip-description-text {
  color: #fff;
  font-size: 0.9rem;
  display: inline;
  margin-left: 0;
}

/* Requirement line under a building-gated keyword description. */
.tooltip-requires {
  margin-top: 4px;
  font-size: 0.62rem;
  font-style: italic;
  color: #b58a8a;          /* unmet — muted red */
}
.tooltip-requires.met {
  color: #7fd17f;          /* met — green */
}

/* A whole gated-keyword description block, dimmed while inactive. */
.tooltip-description-item.inactive {
  border-color: #4a4030;
  opacity: 0.78;
}
.tooltip-description-item.inactive .tooltip-description-name {
  color: #6a5d4a;
  text-decoration: line-through;
}
.tooltip-description-item.inactive .tooltip-description-text {
  color: #9c9076;
}

/* Inline stone icons used inside tooltip effect descriptions */
.tooltip-stone-icon {
  width: 13px;
  height: 13px;
  object-fit: contain;
  vertical-align: -2px;
  margin: 0 1px;
}

/* Inline stat icons (att/def/hp/mor) swapped in for the stat words in descriptions/tooltips/prompts. */
.stat-icon-inline {
  width: 15px;
  height: 15px;
  object-fit: contain;
  vertical-align: -3px;
  margin: 0 1px;
}

.info-modal-content h2 {
    font-family: var(--font-cta);
    font-size: 2rem;
    color: #fff952!important;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 30px;
    text-align: center;
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #fff952;
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.3s;
}

.modal-close-btn:hover {
    color: #fff;
}

.info-modal .video-placeholder {
    margin-bottom: 20px;
}

/* ============================================================
   WIKI / INFO PAGES (data-driven reference content)
   ============================================================ */
/* Content is the positioning context (overflow VISIBLE so the footer stones can bleed past the bottom
   edge + the ✕ stays put); the inner .info-modal-scroll holds the long, scrollable body. */
.info-modal-content { padding: 30px; max-width: 760px; overflow: visible; border-radius: 10px; position: relative; color: #e4d4ba; }
.info-modal-scroll { max-height: 78vh; overflow-y: auto; overflow-x: hidden; padding-bottom: 90px; }
.wiki-modal-content { max-width: 920px; }
.info-modal-content h2 { color: #ffcf5c; font-family: var(--font-cta, serif); margin: 0 0 16px; }
.wiki-subhead { color: #ffcf5c; margin: 22px 0 6px; font-size: 1.35rem; }
.wiki-note { color: #9c8a70; font-style: italic; font-size: 1rem; margin: 0 0 12px; }

/* Tabs */
.wiki-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid #342818; padding-bottom: 8px; }
.wiki-tab { background: rgba(40, 28, 18, 0.6); color: #c8a96e; border: 1px solid #342818; border-radius: 5px; padding: 6px 14px; cursor: pointer; font-family: var(--font-cta, serif); font-size: 0.85rem; transition: background 0.15s, color 0.15s; }
.wiki-tab:hover { background: rgba(60, 42, 24, 0.8); }
.wiki-tab.active { background: #ffcf5c; color: #1a1208; }
.wiki-body { min-height: 200px; }

/* Keyword glossary */
.wiki-glossary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
@media (max-width: 768px) { .wiki-glossary { grid-template-columns: 1fr; } }
.wiki-kw { 
border-left: 2px solid #6e4f2e;
  padding: 4px 0 4px 10px;
  background-color: #2a1c0e;
}
.wiki-kw-name { color: #ffcf5c; font-weight: bold; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.04em; }
.wiki-kw-desc { color: #fff; font-size: 1rem; line-height: 1.4; }

/* Building ladder */
.wiki-building { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(110, 79, 46, 0.3); }
.wiki-building-name { color: #ffcf5c; font-weight: bold; font-size: 0.95rem; margin-bottom: 4px; }
.wiki-tier-tag { font-size: 1rem; color: #fff; text-transform: uppercase; font-weight: normal; }
.wiki-ladder { list-style: none; margin: 0; padding: 0; }
.wiki-ladder li { font-size: 1rem; line-height: 1.5; color: #fff; }
.wiki-ladder strong { color: #e8d8b0; }
.wiki-cost { color: #fff; font-size: 0.90rem; }

/* Tables (units, bag scaling) */
.wiki-table { width: 100%; border-collapse: collapse; font-size: 1rem; margin: 8px 0 16px; }
.wiki-table th { color: #ffcf5c; text-align: left; border-bottom: 1px solid #6e4f2e; padding: 5px 8px; }
.wiki-table td { border-bottom: 1px solid rgba(110, 79, 46, 0.25); padding: 5px 8px; color: #fff; }
.wiki-table tr:hover td { background: rgba(110, 79, 46, 0.12); }
.wiki-kw-cell { color: #fff; font-size: 1rem; }
/* Buildings table: building name spans its level rows; a faint divider sets each building apart. */
.wiki-buildings-table .wiki-bld-name { color: #ffcf5c; font-weight: bold; vertical-align: top; border-right: 1px solid rgba(110, 79, 46, 0.35); white-space: nowrap; }
.wiki-buildings-table .wiki-lvl { color: #ffcf5c; font-weight: bold; text-align: center; width: 2.5em; }
.wiki-boss-tag { font-size: 0.80rem; color: #ff6b6b; border: 1px solid #ff6b6b; border-radius: 3px; padding: 0 4px; margin-left: 5px; vertical-align: middle; letter-spacing: 0.5px; }
/* Wiki section divider row (e.g. "BOSSES" under the orc roster). */
.wiki-section-row td { color: #ff6b6b; font-weight: bold; letter-spacing: 0.12em; font-size: 0.78rem; text-align: center; padding: 8px 0 4px; border-top: 2px solid #6e4f2e; border-bottom: 1px solid rgba(110,79,46,0.4); background: rgba(255,107,107,0.06); }
/* Terrain wiki table — small tile thumbnails. */
.wiki-terrain-table .wiki-terrain-art { width: 56px; }
.wiki-terrain-img { width: 48px; height: 48px; object-fit: cover; border-radius: 5px; border: 1px solid #6e4f2e; display: block; }
/* Cost cells: "N× <stone>" pairs, kept together so a count never wraps away from its stone. */
.wiki-cost-cell { line-height: 1.9; }
.wiki-cost-stone { width: 18px; height: 18px; vertical-align: middle; }

/* Stone-economy prose */
.wiki-prose h3 { color: #ffcf5c!important; margin: 18px 0 6px; font-size: 1.3rem; }
.wiki-prose p { font-size: 1rem; line-height: 1.55; color: #fff; margin: 0 0 10px; }

/* Effect-icon legend (How to Play) */
.effect-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 6px; }
.effect-legend-row { display: flex; align-items: center; gap: 8px; }
.effect-legend-icon { width: 26px; height: 26px; flex-shrink: 0; }
.effect-legend-name { color: #ffcf5c; font-weight: bold; font-size: 1rem; min-width: 64px; }
.effect-legend-desc { color: #fff; font-size: 0.9rem; line-height: 1.35; }
@media (max-width: 768px) { .effect-legend { grid-template-columns: 1fr; } }
.modal-section-rule { border: 0; border-top: 1px solid #342818; margin: 22px 0 4px; }

/* FAQ — living Q&A list + "ask us" form */
.faq-item { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(110, 79, 46, 0.3); }
.faq-q { color: #ffcf5c; font-weight: bold; font-size: 1rem; margin-bottom: 3px; }
.faq-a { color: #ffffff; font-size: 1rem; line-height: 1.5; }
.faq-ask { margin-top: 22px; padding-top: 16px; border-top: 1px solid #342818; text-align: center; }
.faq-ask h3 { color: #ffcf5c; margin: 0 0 4px; font-size: 1.2rem; }
.faq-input { width: 100%; box-sizing: border-box; background: rgba(0, 0, 0, 0.4); border: 1px solid #6e4f2e; border-radius: 6px; color: #ecdcc2; padding: 8px 10px; font-family: inherit; font-size: 0.88rem; resize: vertical; margin-bottom: 8px; text-align: left; }
.faq-input:focus { outline: none; }
#faq-submit { display: inline-block; margin: 0 auto; }

/* Decorative footer stones overlaying the bottom edge of every info modal (landing-page divider motif).
   Content is overflow:visible so this bleeds past the rounded bottom; the body scrolls inside. */
.modal-stones-footer {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 45%);   /* ~half the strip bleeds below the modal edge */
    width: 556px;
    max-width: 92%;
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-section {
        min-height: 55vh;
        padding: 40px 20px;
    }

    .hero-content {
        gap: 20px;
    }

    .hero-content .video-placeholder {
        max-width: 100%;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .character-details {
        flex-direction: column;
        align-items: center;
    }

    .details-portrait {
        width: 200px;
        height: 270px;
    }

    .details-info {
        text-align: center;
    }

    .marketing-section {
        padding: 60px 20px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .info-modal-content {
        padding: 30px;
    }

    .info-modal-content h2 {
        font-size: 1.5rem;
    }
}

/* ============================================================
   RECRUITMENT PLACEMENT MODAL
   ============================================================ */

#recruitment-modal-overlay {
    display: none;
    /* Light dim so the battlefield stays visible above the modal */
    background: rgba(0, 0, 0, 0.18);
}

#recruitment-modal-overlay.active {
    display: flex;
}

/* Placement bar — matches the battlefield width and sits just below it.
   Styled like the game tooltips (dark panel, white frame). Positioned via JS. */
#recruitment-modal {
    position: fixed;
    width: 1005px;
    /* Same stony backdrop as the info tooltips: dark overlay over the cover texture */
    background: linear-gradient(rgba(22, 15, 8, 0.78), rgba(22, 15, 8, 0.78)),
                url('assets/ui/web-assets/generic-background-dark-covers.jpg') center / cover no-repeat;
    border: 2px solid #ffffff;
    border-radius: 6px;
    padding: 14px 0 18px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    z-index: 101;
    margin-top: -21px;
}

#recruitment-modal h2 {
    color: #fff;
    font-size: 1.15rem;
    margin: 0 0 4px;
    padding: 0 54px;
    font-family: var(--font-cta);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#recruitment-unit-name {
    color: #ffcf5c;
    font-weight: bold;
}

.recruitment-subtitle {
    color: #c3a982;
    font-size: 0.85rem;
    margin: 0 0 12px;
    padding: 0 54px;
    letter-spacing: 0.04em;
    font-style: italic;
}

/* Buttons spread across the bar with the same inset as the battlefield grid
   (~52px), so each lines up under its column above. Columns set inline in JS. */
.recruitment-column-buttons {
    display: grid;
    gap: 4px;
    padding: 0 54px;
}

.recruitment-col-btn {
    padding: 12px 16px;
    background: #000000;
    border: 1px solid #342818;
    border-radius: 4px;
    color: #fffb00;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    font-family: var(--font-cta);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: all 0.2s ease;
}

.recruitment-col-btn:hover {
    border-color: #fff952;
    color: #fff952;
    background: rgba(22, 15, 8, 0.95);
}

.recruitment-col-btn:active,
.recruitment-col-btn.selected {
    border-color: #fff952;
    background: rgba(255, 249, 82, 0.15);
    color: #fff952;
}

.recruitment-col-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ============================================================
   MOVEMENT PANEL
   ============================================================ */

#movement-controls {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 15, 20, 0.95);
    border: 2px solid #342818;
    border-radius: 8px;
    padding: 20px;
    z-index: 500;
    max-width: 600px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

#movement-controls p {
    color: #fff952;
    margin-bottom: 15px;
    font-size: 0.95rem;
    font-weight: bold;
    text-align: center;
}

.movement-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.movement-btn {
    padding: 10px 16px;
    background: rgba(22, 15, 8, 0.8);
    border: 1px solid #342818;
    border-radius: 4px;
    color: #c3a982;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: bold;
    font-family: var(--font-cta);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: all 0.2s ease;
}

.movement-btn:hover {
    border-color: #fff952;
    color: #fff952;
    background: rgba(22, 15, 8, 0.95);
}

.movement-btn.skip {
    border-color: #5a5a5a;
    color: #808080;
}

.movement-btn.skip:hover {
    border-color: #c3a982;
    color: #c3a982;
}

/* ============================================================
   ACTIVATION PANEL
   ============================================================ */

#activation-controls {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 15, 20, 0.95);
    border: 2px solid #342818;
    border-radius: 8px;
    padding: 20px;
    z-index: 500;
    max-width: 600px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

#activation-controls p {
    color: #fff952;
    margin-bottom: 15px;
    font-size: 0.95rem;
    font-weight: bold;
    text-align: center;
}

.activation-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.activation-btn,
.special-btn,
.cancel-btn {
    padding: 10px 16px;
    background: rgba(22, 15, 8, 0.8);
    border: 1px solid #342818;
    border-radius: 4px;
    color: #c3a982;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: bold;
    font-family: var(--font-cta);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: all 0.2s ease;
}

.activation-btn:hover,
.special-btn:hover {
    border-color: #fff952;
    color: #fff952;
    background: rgba(22, 15, 8, 0.95);
}

.activation-btn:disabled,
.special-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #5a3a3a;
}

.cancel-btn {
    border-color: #5a5a5a;
    color: #808080;
}

.cancel-btn:hover {
    border-color: #c3a982;
    color: #c3a982;
}


/* ============================================================
   BATTLE ANIMATIONS
   ============================================================ */

/* Enemy highlights red-orange before attacking */
@keyframes enemyHighlight {
    0%   { filter: brightness(1)   drop-shadow(0 0 0px  rgba(255, 80, 0, 0)); }
    40%  { filter: brightness(1.6) drop-shadow(0 0 12px rgba(255, 80, 0, 1)); }
    100% { filter: brightness(1)   drop-shadow(0 0 0px  rgba(255, 80, 0, 0)); }
}

.enemy-highlighting {
    animation: enemyHighlight 0.5s ease-out both;
    position: relative;
    z-index: 50;
}

/* Enemy lunges forward (downward toward player) then retreats */
@keyframes enemyStagger {
    0%   { transform: translateY(0px)  rotate(0deg); }
    20%  { transform: translateY(34px) rotate(-4deg); }
    45%  { transform: translateY(28px) rotate(3deg); }
    65%  { transform: translateY(12px) rotate(-1deg); }
    100% { transform: translateY(0px)  rotate(0deg); }
}

.enemy-stagger {
    animation: enemyStagger 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    position: relative;
    z-index: 50;
}

/* Wild Swing: the Warboss winds up and swings in a wide horizontal arc toward the
   adjacent ally he's about to clobber. Two variants by direction (victim left/right). */
@keyframes wildSwingRight {
    0%   { transform: translateX(0)     rotate(0deg); }
    22%  { transform: translateX(-12px) rotate(-14deg); }  /* wind back */
    52%  { transform: translateX(46px)  rotate(16deg); }   /* sweep across to the right */
    72%  { transform: translateX(34px)  rotate(9deg); }
    100% { transform: translateX(0)     rotate(0deg); }
}
@keyframes wildSwingLeft {
    0%   { transform: translateX(0)     rotate(0deg); }
    22%  { transform: translateX(12px)  rotate(14deg); }
    52%  { transform: translateX(-46px) rotate(-16deg); }
    72%  { transform: translateX(-34px) rotate(-9deg); }
    100% { transform: translateX(0)     rotate(0deg); }
}
.enemy-wild-swing-right {
    animation: wildSwingRight 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    position: relative;
    z-index: 51;
}
.enemy-wild-swing-left {
    animation: wildSwingLeft 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    position: relative;
    z-index: 51;
}

/* Player unit shakes when struck */
@keyframes unitShake {
    0%   { transform: translateX(0); }
    10%  { transform: translateX(-8px); }
    25%  { transform: translateX(8px); }
    40%  { transform: translateX(-6px); }
    55%  { transform: translateX(6px); }
    70%  { transform: translateX(-3px); }
    85%  { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

.unit-shake {
    animation: unitShake 0.45s ease-out both;
}

/* Damage-scaled hit reactions: 1 = a scratch (small/quick), 2 = the standard shake (above),
   3+ = a violent shake with a rotational jolt (paired with the red screen flash in JS). */
@keyframes unitShakeLight {
    0%   { transform: translateX(0); }
    30%  { transform: translateX(-3px); }
    60%  { transform: translateX(2px); }
    100% { transform: translateX(0); }
}
.unit-shake-light {
    animation: unitShakeLight 0.3s ease-out both;
}
@keyframes unitShakeHard {
    0%   { transform: translate(0,0) rotate(0deg); }
    10%  { transform: translate(-14px, 3px) rotate(-5deg); }
    25%  { transform: translate(13px, -3px) rotate(5deg); }
    40%  { transform: translate(-11px, 2px) rotate(-4deg); }
    55%  { transform: translate(9px, -2px) rotate(3deg); }
    70%  { transform: translate(-6px, 1px) rotate(-2deg); }
    85%  { transform: translate(4px, 0) rotate(1deg); }
    100% { transform: translate(0,0) rotate(0deg); }
}
.unit-shake-hard {
    animation: unitShakeHard 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    z-index: 60;
}

/* Red screen flash on a heavy blow (3+ damage) — a vignette pulse, strong at the edges so the centre
   stays readable. Body-level, pointer-events:none, over the board but under modals. */
#screen-flash-red {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1490;
    opacity: 0;
    background: radial-gradient(ellipse at center, rgba(170, 0, 0, 0) 35%, rgba(165, 0, 0, 0.55) 100%);
}
#screen-flash-red.flashing {
    animation: screenFlashRed 0.4s ease-out;
}
@keyframes screenFlashRed {
    0%   { opacity: 0; }
    25%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Friendly unit lunges forward (upward toward enemies) then retreats */
@keyframes friendlyStagger {
    0%   { transform: translateY(0px)   rotate(0deg); }
    20%  { transform: translateY(-34px) rotate(-4deg); }
    45%  { transform: translateY(-28px) rotate(3deg); }
    65%  { transform: translateY(-12px) rotate(-1deg); }
    100% { transform: translateY(0px)   rotate(0deg); }
}

.field-unit-card.unit-attacking {
    animation: friendlyStagger 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    position: relative;
    z-index: 50;
}

/* ── Watchtower volley ──────────────────────────────────
   An arrow (assets/effects/arrow.png — head points up-left) flies UP into each struck enemy at round
   end. Body-level + fixed, positioned by the target slot's screen rect; rotate(45deg) turns the art's
   up-left head to point straight up along the flight. */
.watchtower-arrow {
    position: fixed;
    width: 46px;
    height: auto;
    pointer-events: none;
    z-index: 1500;                /* above the battlefield, below full-screen overlays/modals */
    opacity: 0;
    /* Bright golden glow so the black arrow pops against the dark enemy cards, backed by a dark shadow
       for contrast over the pale grass. */
    filter: drop-shadow(0 0 5px rgba(255, 235, 150, 0.95)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
    animation: watchtowerArrowFly 600ms ease-in forwards;
}
@keyframes watchtowerArrowFly {
    0%   { transform: translate(-14px, 96px) rotate(45deg) scale(0.9); opacity: 0; }
    25%  { opacity: 1; }
    78%  { transform: translate(0, 0)        rotate(45deg) scale(1);   opacity: 1; }
    100% { transform: translate(2px, -10px)  rotate(45deg) scale(1);   opacity: 0; }
}
/* LOUD centred banner announcing the volley — slams in over the battlefield then fades. */
.watchtower-banner {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    z-index: 1501;
    pointer-events: none;
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 34px;
    background: linear-gradient(to bottom, rgba(40, 28, 12, 0.96), rgba(22, 15, 8, 0.96));
    border: 3px solid #d8a23a;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(255, 200, 90, 0.6), 0 8px 24px rgba(0, 0, 0, 0.7);
    color: #ffd87a;
    font-family: var(--font-cta, serif);
    font-size: 1.7rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}
.watchtower-banner.show { animation: watchtowerBannerSlam 1.5s cubic-bezier(0.18, 0.9, 0.3, 1.2) forwards; }
.watchtower-banner-icon { width: 34px; height: auto; transform: rotate(45deg); filter: drop-shadow(0 0 4px rgba(255,235,150,0.9)); }
.watchtower-banner-sub { font-size: 0.8rem; color: #e4c98a; letter-spacing: 0.08em; font-weight: normal; }
@keyframes watchtowerBannerSlam {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    14%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
    26%  { transform: translate(-50%, -50%) scale(1); }
    78%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}

/* The Watchtower's built-card flashes as it looses the volley, so players see which building fired. */
.built-building-card.watchtower-firing {
    animation: watchtowerFlash 0.55s ease-out;
}
@keyframes watchtowerFlash {
    0%, 100% { filter: none; }
    35%      { filter: brightness(1.9) drop-shadow(0 0 10px rgba(255, 225, 130, 0.95)); }
}

/* ── Blood splatter ─────────────────────────────────────
   Wrapper: absolute position + static rotation (set in JS).
   Inner .blood-splatter: clean scale/opacity animation only. */
@keyframes bloodFlash {
    0%   { opacity: 0;    transform: scale(0.2); }
    9%   { opacity: 1;    transform: scale(1.1); }
    35%  { opacity: 1;    transform: scale(1); }
    70%  { opacity: 0.92; transform: scale(1.03); }
    100% { opacity: 0;    transform: scale(1.12); }
}

.blood-splatter-wrap {
    position: absolute;
    pointer-events: none;
    z-index: 200;
}

.blood-splatter {
    width: 100%;
    height: 100%;
    animation: bloodFlash 0.9s ease-out forwards;   /* longer hold so a hit actually registers */
}

/* Lingering ground stain (bloodpool.png) left by a heavier (2+) hit — fades slowly so the strike
   leaves a mark, then clears. Sits just under the splatter flash. */
@keyframes bloodPoolFade {
    0%   { opacity: 0;    transform: scale(0.5); }
    15%  { opacity: 0.85; transform: scale(1); }
    60%  { opacity: 0.7;  transform: scale(1.02); }
    100% { opacity: 0;    transform: scale(1.05); }
}
.blood-pool {
    position: absolute;
    pointer-events: none;
    z-index: 199;
    animation: bloodPoolFade 1.8s ease-out forwards;
}
.blood-pool img { width: 100%; height: 100%; object-fit: contain; }

.blood-splatter img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Dust cloud ──────────────────────────────────────── */
@keyframes dustRise {
    0%   { opacity: 0;   transform: scale(0.5) translateY(8px); }
    20%  { opacity: 0.9; transform: scale(1)   translateY(0px); }
    55%  { opacity: 0.6; transform: scale(1.05) translateY(-4px); }
    100% { opacity: 0;   transform: scale(1.1)  translateY(-10px); }
}

.dust-cloud {
    position: absolute;
    pointer-events: none;
    z-index: 150;
    animation: dustRise 0.55s ease-out forwards;
}

.dust-cloud img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Town impact ─────────────────────────────────────────
   Wrapper: absolute position + static rotation (set in JS).
   Inner .town-impact: clean scale/opacity animation only. */
@keyframes impactFlash {
    0%   { opacity: 0;   transform: scale(0.3); }
    10%  { opacity: 1;   transform: scale(1.08); }
    35%  { opacity: 1;   transform: scale(1); }
    100% { opacity: 0;   transform: scale(1.1); }
}

.town-impact-wrap {
    position: absolute;
    pointer-events: none;
    z-index: 10;
}

.town-impact {
    width: 100%;
    height: 100%;
    animation: impactFlash 0.65s ease-out forwards;
}

.town-impact img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Town struck — a hard red damage flash over the town image (sized in JS to match it), with an
   inset "wound" vignette. Brief and bright so the player can never miss that the TOWN took a hit. */
.town-damage-flash {
    position: absolute;
    pointer-events: none;
    z-index: 9;
    border-radius: 4px;
    background: radial-gradient(circle at 50% 45%, rgba(255,60,40,0.45) 0%, rgba(190,10,10,0.62) 80%);
    box-shadow: inset 0 0 32px 10px rgba(140,0,0,0.75);
    animation: townDamageFlash 0.5s ease-out forwards;
}
@keyframes townDamageFlash {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    55%  { opacity: 0.85; }
    100% { opacity: 0; }
}

/* Violent impact shake — sharper and larger than the celebratory .town-shake. */
@keyframes townImpactShake {
    0%   { transform: translate(0, 0) rotate(0); }
    10%  { transform: translate(-10px, 6px) rotate(-2deg); }
    22%  { transform: translate(9px, -7px) rotate(2deg); }
    36%  { transform: translate(-8px, 5px) rotate(-1.4deg); }
    50%  { transform: translate(7px, -4px) rotate(1.2deg); }
    66%  { transform: translate(-5px, 3px) rotate(-0.6deg); }
    82%  { transform: translate(3px, -2px); }
    100% { transform: translate(0, 0); }
}
.town-impact-shake { animation: townImpactShake 0.5s ease-out; }