/* Battle Barge — overrides for legacy HH battle CSS in unified shell
   ================================================================
   The unified shell (templates/bb/shell.html) loads HH's
   phase-strip.css, score-card.css, reactions.css, and battle.css so
   /app/battle has the same rich battle UI as /hh. A handful of
   shell-incompatible rules need surgical neutralization here.
   ================================================================ */

/* The phase strip is `position: sticky; top: 0` in legacy CSS, which
   anchors it to the document scroll root. Inside the unified shell
   that puts it BEHIND the fixed bb-header. Push it down so it sticks
   below the header (header is 56px + safe-area-inset-top). */
#screen-mount .phase-strip {
    top: calc(56px + env(safe-area-inset-top, 0px));
    z-index: 39; /* below the header at 40, above the screen content */
}

/* battle.css does `padding-top: calc(var(--space-3) + env(safe-area-inset-top))`
   on .battle-header — but in the unified shell the bb-header already
   handles the top safe area. Without this override the battle header
   double-pads and pushes content down. */
#screen-mount .battle-header {
    padding-top: var(--space-3);
}

/* Legacy battle templates wrapped scoring in #standard-score-panel
   inside #screen-battle which is `display: flex; flex-direction: column`.
   The unified shell's screen-mount is a block container, so the score
   panel needs explicit width to fill its row. */
#screen-mount .score-panel,
#screen-mount #standard-score-panel,
#screen-mount #mp-score-panel {
    width: 100%;
}

/* battle.css scopes a few rules to `#screen-battle *` for box-sizing.
   The unified shell already inherits box-sizing from html via
   bb-layout.css. Redundant but harmless — keep no override here.

   #screen-battle is also styled `display: flex; flex-direction: column;
   height: 100%` in the legacy app for app.js's #app full-height pattern.
   In the unified shell #screen-battle is a child of #screen-mount and
   doesn't need to consume 100% height — the surrounding scroll context
   handles overflow. Reset the constraint. */
#screen-mount #screen-battle {
    height: auto;
    min-height: auto;
    display: block;
}
#screen-mount #screen-battle .battle-content,
#screen-mount #screen-battle .objectives-block,
#screen-mount #screen-battle .reactions-block {
    /* These were column-flex children of #screen-battle in the legacy
       app and used `flex: 1`. Without a flex parent they collapse to
       intrinsic content height, which is exactly what we want here. */
    flex: 0 0 auto;
}

/* The legacy app puts Round badge as `position: absolute; top: 0;
   left: 50%` on top of the score panel. Inside the unified shell that
   anchors to the nearest positioned ancestor, which may not be the
   score panel anymore. Force the score panel to be the positioning
   context. */
#screen-mount .score-panel { position: relative; }

/* The HH stats screen rule `.battle-item` defined in bb/css/screens/
   setup.css conflicts with the legacy battle.css definition. Legacy
   wins because the link order in shell.html puts hh/css/screens/
   battle.css after bb's setup.css. That's intentional — the legacy
   styles are richer (chevron, hover states, result chips). No-op here
   to document the link-order assumption. */

/* TOW-side battle dashboard uses different class names but ports OK:
   .bb-sub-nav, .phase-tracker, .round-indicator, .score-panel,
   .castable-indicator, .join-code-bar all exist either in HH battle
   CSS or in bb-layout.css already. The TOW partial shares enough of
   HH's vocabulary that loading HH's CSS covers most of the surface.
   TOW-only selectors (.castable-category-pill, .magic-screen, etc.)
   stay unstyled in the shell — TOW battle wizard isn't fully shell
   parity yet, tracked in the Sub-7.5 follow-up backlog. */

/* Reactions block — the legacy CSS uses `.reactions-empty` for a
   "no reactions yet" empty state. Make sure it inherits the muted
   text color even when bb-tokens overrides --text-muted. */
#screen-mount .reactions-empty {
    color: var(--bb-text-muted);
}

/* Stats screen battle history rows already use the bb-tokens-styled
   .stats-battle-row from bb/css/screens/stats.css. Ensure the legacy
   .battle-item rule from battle.css doesn't bleed into the stats screen
   (legacy .battle-item is much taller and has a chevron). Stats screen
   uses a different parent class so this is just defensive. */
#screen-mount #stats-history .battle-item { background: var(--bb-bg-elevated); }

/* Journal button + battle header right cluster */
.battle-header-right {
    display: inline-flex;
    align-items: center;
    gap: var(--bb-space-2);
}
#btn-open-journal {
    /* Tighter than .btn-small default to fit alongside the matchup. */
    min-height: 32px;
    padding: 0 var(--bb-space-3);
    font-size: 0.7rem;
}

/* TOW battle screen partial-parity hardening:
   `_battle_tow.html` stacks several bare elements (round indicator, join
   code bar, castable pill, action buttons) directly inside the screen
   with no card scaffolding. Until the TOW battle template is fully
   ported to bb-card surfaces, give each bare child a consistent
   bottom margin so they don't kiss against the page background. */
#screen-battle > .round-indicator,
#screen-battle > .castable-indicator,
#screen-battle > .join-code-bar,
#screen-battle > .score-panel,
#screen-battle > .active-spells-panel,
#screen-battle > .quick-note-row,
#screen-battle > .battle-actions-row,
#screen-battle > #btn-advance-phase,
#screen-battle > #phase-tracker {
    margin-bottom: var(--bb-space-3);
}

/* Wrap the bare TOW utility rows (join code bar + actions) in a soft
   surface so they read as panels instead of free-floating text. */
#screen-battle > .join-code-bar,
#screen-battle > .battle-actions-row {
    background: var(--bb-bg-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    padding: var(--bb-space-2) var(--bb-space-3);
    display: flex;
    align-items: center;
    gap: var(--bb-space-3);
    flex-wrap: wrap;
}

/* JOIN chip in the battle header — the host taps this to surface the
   join code + QR. The dot inside doubles as the live-sync indicator. */
.btn-share-join {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 2px 8px 2px 8px;
    background: var(--bb-bg-surface, rgba(255,255,255,0.04));
    border: 1px solid var(--bb-border, rgba(255,255,255,0.12));
    border-radius: 999px;
    color: var(--gold, #d4af37);
    font-family: var(--bb-font-display, inherit);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    margin-left: 0.4rem;
}
.btn-share-join:hover,
.btn-share-join:focus-visible {
    background: rgba(212, 175, 55, 0.12);
    border-color: var(--gold, #d4af37);
    outline: none;
}
.btn-share-join[hidden] { display: none !important; }
.btn-share-join-label { line-height: 1; }

/* Two layout sites for the chip:
   - HH header: inside .battle-header-left flex row (handled by `margin-left`)
   - TOW: a new .round-indicator-row that flexes the chip beside the round line */
.round-indicator-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Sync indicator state colours. The dot is built in HH's battle.css
   with a base of 10×10 round; we just paint it per state. The "off"
   state is new — the dot stays neutral until someone joins. */
.sync-indicator.sync-off {
    background: var(--bb-bg-deep, #08080d);
    border: 1px solid var(--bb-border, rgba(255,255,255,0.25));
    box-shadow: none;
    animation: none;
}
.sync-indicator.sync-connected {
    background: var(--success, #3ddc84);
    box-shadow: 0 0 6px var(--success, #3ddc84);
    animation: none;
}
.sync-indicator.sync-waiting {
    background: var(--warning, #f0b429);
    box-shadow: 0 0 4px var(--warning, #f0b429);
    animation: none;
}
.sync-indicator.sync-disconnected {
    background: var(--danger, #e54b4b);
    animation: pulse-sync 1s infinite;
}