/* Bannerfall — board, hall and card chrome.
 *
 * Two site-wide traps are undone at the bottom of this file: `web/style.css`
 * pins `.volume-slider` to `position:fixed; top:12px`, and it also styles the
 * bare id `#hud` for every game — which is why nothing here is called `hud`.
 */

:root {
  --ink:        #060810;
  --felt:       #0d1420;
  --felt-2:     #131d2e;
  --edge:       #26324a;
  --gold:       #c8a24a;
  --gold-lit:   #f0d38c;
  --text:       #e6ecf7;
  --dim:        #8b9ab5;
  --danger:     #e2604a;
  --good:       #79d99a;
  --row-h:      clamp(74px, 12vh, 108px);
}

* { box-sizing: border-box; }
/* A `display` rule outranks the `hidden` attribute, and several rules here set
   one — without this the size picker shows for a duel and the panes stack. */
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%;
  background:
    radial-gradient(120% 90% at 50% -10%, #17233a 0%, transparent 60%),
    linear-gradient(180deg, #070a12 0%, #0b1120 100%);
  color: var(--text);
  font: 14px/1.45 'Segoe UI', system-ui, -apple-system, sans-serif;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 600; }

.muted { color: var(--dim); font-size: 12.5px; }

button {
  font: inherit; cursor: pointer; border-radius: 9px;
  border: 1px solid var(--edge); background: #162034; color: var(--text);
  padding: 9px 14px; transition: background .12s, border-color .12s, transform .08s;
}
button:hover:not(:disabled) { border-color: var(--gold); background: #1d2a44; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: default; }

.primary {
  background: linear-gradient(180deg, var(--gold-lit), var(--gold));
  color: #241c07; border-color: #8d6f24; font-weight: 600;
}
.primary:hover:not(:disabled) { background: linear-gradient(180deg, #ffe6a8, #d7b158); }
.ghost { background: #131c2e; }
.ghost.danger { border-color: #5b2b28; color: #ffb9ae; }
.ghost.danger:hover:not(:disabled) { border-color: var(--danger); background: #2a1614; }

input[type=text], select {
  font: inherit; color: var(--text); background: #0d1526;
  border: 1px solid var(--edge); border-radius: 9px; padding: 9px 11px;
}
input[type=text] { width: 100%; margin: 4px 0 10px; }

/* ── overlay panes ────────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow: auto;
  background: radial-gradient(120% 90% at 50% 0%, rgba(30,44,72,.75), rgba(4,7,14,.94));
}
.overlay[hidden] { display: none; }
.card {
  width: min(460px, 96vw); max-height: 94vh; overflow: auto;
  background: linear-gradient(180deg, #101a2c, #0b1220);
  border: 1px solid var(--edge); border-radius: 16px;
  padding: 22px 24px; text-align: center;
  box-shadow: 0 22px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}
.card.wide { width: min(1080px, 97vw); }
.card.tall { width: min(760px, 97vw); }

.title {
  margin: 0 0 6px; letter-spacing: .16em;
  font-size: clamp(26px, 7vw, 40px);
  background: linear-gradient(180deg, #fff3d0, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.title.small { font-size: clamp(19px, 4vw, 25px); letter-spacing: .12em; }
.tagline { color: var(--dim); font-size: 13px; margin: 0 0 14px; }

.briefing { text-align: left; margin: 14px 0 6px; color: var(--dim); }
.briefing summary { cursor: pointer; color: var(--gold); font-size: 13px; }
.briefing ul { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; }
.briefing li { margin: 4px 0; }
.briefing b { color: var(--text); }

.back-link {
  display: inline-block; margin-top: 12px; color: #7f8ec9;
  font-size: 13px; text-decoration: none;
}
.back-link:hover { color: var(--gold); }

/* ── the hall ─────────────────────────────────────────────────────────── */
.hall-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hall-cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; text-align: left; margin-top: 10px; }
.hall-cols h3 { margin: 0 0 8px; font-size: 13px; color: var(--gold); letter-spacing: .06em; }
.hall-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }

.table-list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.table-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--edge); border-radius: 11px;
  background: #0e1728;
}
.table-row .tr-name { font-weight: 600; }
.table-row .tr-meta { color: var(--dim); font-size: 12px; }
.table-row .tr-btns { display: flex; gap: 6px; }
.table-row button { padding: 6px 10px; font-size: 12.5px; }
.table-empty { color: var(--dim); font-size: 12.5px; padding: 12px 0; }

.new-table { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.seg { display: inline-flex; border: 1px solid var(--edge); border-radius: 10px; overflow: hidden; }
.seg-btn { border: 0; border-radius: 0; background: #0e1728; padding: 7px 12px; font-size: 12.5px; }
.seg-btn.active { background: var(--gold); color: #241c07; font-weight: 600; }

.player-list { display: flex; flex-direction: column; gap: 5px; max-height: 190px; overflow: auto; }
.player-row {
  display: flex; align-items: center; gap: 7px; font-size: 13px;
  padding: 5px 9px; border-radius: 8px; background: #0e1728;
}
.player-row .tag { color: var(--dim); font-size: 11.5px; }
.player-row .fac-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

.leaderboard {
  text-align: left; margin-top: 12px; padding: 10px 12px;
  background: #0e1728; border-radius: 11px; border: 1px solid var(--edge);
}
.leaderboard h3 { margin: 0 0 6px; font-size: 13px; color: var(--gold); }
.lb-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 2px 0; color: #c6cffa; }

/* ── table lobby ──────────────────────────────────────────────────────── */
.deck-pick { text-align: left; margin: 14px 0; }
.deck-pick h3 { margin: 0 0 8px; font-size: 13px; color: var(--gold); }
.faction-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.fac-btn {
  display: flex; align-items: center; gap: 8px; padding: 8px 11px;
  font-size: 12.5px; border-radius: 10px;
}
.fac-btn .fac-dot { width: 11px; height: 11px; border-radius: 3px; }
.fac-btn.active { border-color: var(--gold); background: #23304c; }
.saved-decks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.host-box {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: center; margin: 12px 0; font-size: 12.5px; color: var(--dim);
}
.host-box label { display: flex; align-items: center; gap: 6px; }
.host-btns { display: flex; gap: 6px; }

.bracket-box { margin-top: 14px; text-align: left; overflow-x: auto; }
.bracket { display: flex; gap: 18px; min-width: max-content; padding-bottom: 6px; }
.bracket-round { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.bracket-round h4 { margin: 0 0 2px; font-size: 11px; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
.bm {
  border: 1px solid var(--edge); border-radius: 9px; background: #0e1728;
  min-width: 172px; font-size: 12.5px; overflow: hidden;
}
.bm .bm-slot { display: flex; justify-content: space-between; gap: 8px; padding: 5px 9px; }
.bm .bm-slot + .bm-slot { border-top: 1px solid var(--edge); }
.bm .bm-slot.won { color: var(--gold-lit); font-weight: 600; }
.bm .bm-slot.empty { color: #55627c; font-style: italic; }
.bm.live { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(200,162,74,.3); }
.bm .bm-seed { color: var(--dim); font-size: 11px; }

/* ── the board ────────────────────────────────────────────────────────── */
.board {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  padding: calc(6px + env(safe-area-inset-top)) 8px
           calc(6px + env(safe-area-inset-bottom));
  gap: 6px;
}
.board[hidden] { display: none; }

/* z-index, not decoration: whatever else happens in the field below, the
   score plates stay on top and readable. */
.board-top { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px;
  align-items: center; position: relative; z-index: 2; }
.side-plate {
  display: flex; align-items: center; gap: 9px; padding: 6px 10px;
  border: 1px solid var(--edge); border-radius: 11px; background: #0c1424;
  min-height: 46px;
}
.side-plate .sp-name { font-weight: 600; font-size: 13.5px; }
.side-plate .sp-meta { color: var(--dim); font-size: 11.5px; }
.side-plate .gems { display: flex; gap: 3px; }
.gem { width: 11px; height: 11px; border-radius: 50%; background: #2b3550; }
.gem.lit { background: radial-gradient(circle at 35% 30%, #ffe9ac, var(--gold)); box-shadow: 0 0 7px rgba(200,162,74,.7); }
.side-plate .pile { text-align: center; font-size: 11px; color: var(--dim); }
.side-plate .pile b { display: block; font-size: 14px; color: var(--text); }
.side-plate.passed { opacity: .62; border-style: dashed; }
.side-plate.acting { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(200,162,74,.35); }
.lead-chip {
  width: 34px; height: 34px; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--edge); flex: 0 0 auto; cursor: pointer;
}
.lead-chip.spent { filter: grayscale(1) brightness(.6); }

.board-clock { text-align: center; min-width: 150px; }
.turn-banner { font-family: Georgia, serif; font-size: 13.5px; color: var(--gold-lit); }
.clock-track { height: 4px; border-radius: 3px; background: #1a2440; margin-top: 4px; overflow: hidden; }
.clock-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), #ffe6a8); transition: width .25s linear; }
.clock-fill.low { background: linear-gradient(90deg, #b8402f, var(--danger)); }

.field { flex: 1; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.rows { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; }
/* `safe` matters: a plain flex-end spills its overflow out of the TOP of the
   container, which is how six fixed-height lanes used to paint over the score
   plates. The lanes below can no longer overflow, and if a viewport ever does
   get short enough, `safe` sends the spill downwards where it is visible
   instead of underneath the plates. */
.foe-rows { justify-content: safe flex-end; }

.row-lane {
  display: grid; grid-template-columns: 54px 1fr 40px; gap: 6px;
  /* An equal share of whatever the field actually has, capped at --row-h so a
     tall screen does not grow silly lanes. A fixed min-height here was the
     bug: six lanes x 108px + the hand + the plates is taller than a 900px
     laptop, and the excess came out over the plates. */
  align-items: stretch; flex: 1 1 0;
  min-height: var(--row-min); max-height: var(--row-h);
  border: 1px solid #1b2540; border-radius: 10px;
  background: linear-gradient(180deg, rgba(20,30,50,.72), rgba(12,19,32,.72));
}
.row-lane.droppable { border-color: var(--gold); background: rgba(200,162,74,.1); cursor: pointer; }
.row-lane.weathered { background: linear-gradient(180deg, rgba(120,150,200,.16), rgba(12,19,32,.72)); }
.row-lane .lane-score {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border-right: 1px solid #1b2540;
}
.lane-score b { font-family: Georgia, serif; font-size: 19px; color: var(--gold-lit); }
.lane-score span { font-size: 8.5px; color: var(--dim); letter-spacing: .02em;
  text-transform: uppercase; }
.row-lane .lane-cards { display: flex; align-items: center; gap: 3px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.row-lane .lane-cards::-webkit-scrollbar { display: none; }
.row-lane .lane-banner {
  display: flex; align-items: center; justify-content: center;
  border-left: 1px solid #1b2540; color: #3d4a68; font-size: 17px;
}
.row-lane .lane-banner.lit { color: var(--gold-lit); text-shadow: 0 0 9px rgba(200,162,74,.8); }

.weather-strip { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 2px 0; }
.weather-slots { display: flex; gap: 5px; justify-content: center; }
.weather-slots .wslot {
  width: 30px; height: 30px; border-radius: 8px; border: 1px dashed #24304c;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  color: #33405f;
}
.weather-slots .wslot.on { border-style: solid; border-color: #6fa8d8; color: #cfe9ff; background: rgba(80,130,190,.18); }
.score-badge {
  font-family: Georgia, serif; font-size: 25px; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 600;
  padding: 2px 12px; border-radius: 10px; border: 1px solid var(--edge);
  background: #0c1424; min-width: 62px;
}
.score-badge.me { justify-self: start; }
.score-badge.foe { justify-self: end; }
.score-badge.lead { border-color: var(--gold); color: var(--gold-lit); }

/* ── cards ────────────────────────────────────────────────────────────── */
.bf-card { position: relative; flex: 0 0 auto; line-height: 0; cursor: pointer; }
.bf-card svg { display: block; border-radius: 7px; }
.hand .bf-card svg { width: clamp(66px, 8.2vw, 96px); }
.hand .bf-card {
  transition: transform .12s ease, filter .12s;
  transform-origin: bottom center;
}
.hand .bf-card:hover { transform: translateY(-14px) scale(1.06); z-index: 3; }
.hand .bf-card.picked { transform: translateY(-20px) scale(1.09); z-index: 4; }
.hand .bf-card.picked svg { box-shadow: 0 0 0 2px var(--gold), 0 12px 24px rgba(0,0,0,.6); }
.hand .bf-card.unplayable { filter: grayscale(.65) brightness(.62); }
.bf-card .pip {
  position: absolute; right: 2px; bottom: 2px;
  background: rgba(6,9,16,.88); border: 1px solid var(--gold);
  color: var(--gold-lit); font-size: 10px; border-radius: 6px; padding: 0 4px;
  line-height: 15px;
}
.bf-card.boosted .pip { border-color: var(--good); color: var(--good); }
.bf-card.damped .pip { border-color: #6fa8d8; color: #cfe9ff; }
.bf-card.enemy-spy svg { box-shadow: 0 0 0 2px #b45; }
@keyframes bf-land { from { transform: translateY(-26px) scale(.82); opacity: 0; } }
.lane-cards .bf-card.new { animation: bf-land .28s ease-out; }
@keyframes bf-burn { to { transform: scale(.5) rotate(9deg); opacity: 0; filter: brightness(2.4) saturate(2); } }
.bf-card.burning { animation: bf-burn .4s ease-in forwards; }

.hand-bar { display: flex; align-items: flex-end; gap: 10px; min-height: 160px; }
.hand {
  flex: 1; display: flex; gap: 4px; justify-content: center; align-items: flex-end;
  overflow-x: auto; overflow-y: visible; padding: 18px 4px 2px; scrollbar-width: thin;
}
.hand-actions { display: flex; flex-direction: column; gap: 5px; }
.hand-actions button { padding: 7px 11px; font-size: 12.5px; }
.lead-sigil { margin-right: 5px; }

.log-strip {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  pointer-events: none; text-align: center; font-family: Georgia, serif;
  font-size: clamp(17px, 3.4vw, 30px); color: var(--gold-lit);
  text-shadow: 0 3px 22px rgba(0,0,0,.9); opacity: 0; transition: opacity .3s;
}
.log-strip.show { opacity: 1; }

.corner-btn {
  position: absolute; right: calc(8px + env(safe-area-inset-right));
  top: calc(8px + env(safe-area-inset-top)); z-index: 5;
  padding: 5px 10px; font-size: 15px;
}

/* ── zoom + chooser ───────────────────────────────────────────────────── */
.zoom {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; background: rgba(4,7,14,.8);
}
.zoom[hidden] { display: none; }
.zoom svg { width: min(330px, 78vw); filter: drop-shadow(0 20px 44px rgba(0,0,0,.7)); }

.chooser {
  position: fixed; inset: 0; z-index: 55; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(4,7,14,.82);
}
.chooser[hidden] { display: none; }
.chooser-card {
  background: linear-gradient(180deg, #101a2c, #0b1220);
  border: 1px solid var(--gold); border-radius: 15px; padding: 18px 20px;
  width: min(760px, 96vw); max-height: 88vh; overflow: auto; text-align: center;
}
.chooser-card h3 { margin: 0 0 4px; color: var(--gold-lit); }
.chooser-options {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 14px 0;
}
.chooser-options .bf-card svg { width: 104px; }
.chooser-options .bf-card:hover svg { box-shadow: 0 0 0 2px var(--gold); }
.chooser-options .opt-plain { padding: 10px 16px; }

/* ── deck builder ─────────────────────────────────────────────────────── */
.deck-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.deck-body { text-align: left; margin-top: 12px; }
.deck-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.deck-grid .bf-card svg { width: 86px; }
.deck-grid .bf-card.owned0 { filter: grayscale(1) brightness(.45); }
.deck-grid .bf-card .count {
  position: absolute; left: 2px; bottom: 2px; background: rgba(6,9,16,.9);
  border: 1px solid var(--edge); border-radius: 6px; font-size: 10px;
  padding: 0 4px; line-height: 15px; color: var(--dim);
}
.deck-side { margin-top: 12px; }
.deck-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.deck-warn { color: var(--danger); font-size: 12.5px; }

/* ── results ──────────────────────────────────────────────────────────── */
#resultTable { overflow-x: auto; scrollbar-width: thin; }
#resultTable .fs-table { width: max-content; min-width: 100%; font-size: .86rem; }
#resultTable .fs-table th, #resultTable .fs-table td { padding: 6px 9px; }

/* ── shared-CSS repairs ───────────────────────────────────────────────── */
/* web/style.css pins .volume-slider position:fixed top:12px — undo it here
   or every slider lands in the corner of the screen (CLAUDE.md item 5). */
.volume-slider { position: static !important; top: auto !important; }

#lobbyAudio .mps-audio, #lobbyAudioHall .mps-audio, #hudAudio .mps-audio {
  background: rgba(8,13,24,.9); border: 1px solid rgba(200,162,74,.35);
  border-radius: 20px; padding: 5px 11px; font-size: 12px;
}
#lobbyAudio .mps-audio-slider, #lobbyAudioHall .mps-audio-slider,
#hudAudio .mps-audio-slider { width: 68px; accent-color: var(--gold); }

/* shared/site_audio.css pins #hudAudio `position:fixed; bottom:12px; left:50%`
   — sensible for a fit-content HUD, and exactly on top of this game's hand.
   The engine mounts by that id, so the id has to stay and the position has to
   go. Same class of trap as .volume-slider above and the global #hud rule. */
#hudAudio {
  position: static !important;
  left: auto; bottom: auto; transform: none !important;
  z-index: auto; flex: 0 0 auto; align-self: flex-end; margin-bottom: 4px;
}

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
  .hall-cols { grid-template-columns: 1fr; }
  .hall-head { flex-wrap: wrap; }
  #lobbyAudioHall { width: 100%; justify-content: center; }
  /* The shared strip grows its hit targets under 640px, so on a phone it is
     wider than the hand bar — give it its own row rather than letting it sit
     on top of the cards. */
  .hand-bar { flex-wrap: wrap; }
  #hudAudio { order: -1; width: 100%; display: flex; justify-content: center; }
  .board-top { grid-template-columns: 1fr; gap: 4px; }
  .board-clock { order: -1; }
  .side-plate { min-height: 40px; padding: 4px 8px; }
  .side-plate .pile { display: none; }
  :root { --row-h: clamp(62px, 10.5vh, 84px); --row-min: 46px; }
  .row-lane { grid-template-columns: 42px 1fr 30px; }
  .lane-score b { font-size: 16px; }
  .hand-bar { min-height: 124px; }
  .hand { justify-content: flex-start; }
  .score-badge { font-size: 20px; min-width: 50px; }
}
@media (max-height: 620px) {
  .card { padding: 14px 16px; }
  .title { font-size: clamp(20px, 5vw, 28px); }
}
@media (max-width: 560px) {
  #resultTable .fs-table { font-size: .78rem; }
}

/* ── effects layer ─────────────────────────────────────────────────────────
   Driven by web/bannerfall/js/cardfx.js. Two families:

     one-shot   .fx-fly / .fx-ghost / .fx-num / .fx-strike / .fx-cast /
                .fx-flash / .fx-clash — live in #fxLayer or inside a lane for
                the length of one animation and are then removed by script.
     persistent .lane-fx — the coat a row wears while weather is on it.

   Everything animates transform, opacity or filter only, so none of it
   triggers layout. The lane coats sit absolutely inside the lane, which is why
   .row-lane has to be a positioning context (it is a grid, and an in-flow
   overlay would have claimed a column).                                     */

.row-lane { position: relative; }

.fx-layer {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden;
}

/* a card in flight, hand -> row (or deck -> row for a summon) */
.fx-fly { position: fixed; will-change: transform; z-index: 2; }
.fx-fly svg {
  width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.7));
}
/* the card it is flying to, held invisible until it lands */
.bf-card.fx-arriving { opacity: 0; }

/* a card burning down where it stood */
.fx-ghost { position: fixed; will-change: transform, opacity;
  animation: fx-burn .58s ease-in forwards; }
.fx-ghost svg { width: 100%; height: 100%; display: block; }
@keyframes fx-burn {
  0%   { transform: scale(1); opacity: 1; }
  22%  { transform: scale(1.07);
         filter: brightness(2.6) saturate(1.8) drop-shadow(0 0 10px #ff9a3c); }
  100% { transform: scale(.6) rotate(7deg) translateY(16px); opacity: 0;
         filter: brightness(3) saturate(2.4) drop-shadow(0 0 20px #ff6a1a); }
}

/* the number that moved */
.fx-num {
  position: fixed; transform: translate(-50%, -50%);
  font: 700 19px/1 Georgia, "Times New Roman", serif;
  text-shadow: 0 2px 6px #000, 0 0 12px currentColor;
  animation: fx-num .95s ease-out forwards;
}
.fx-num.up   { color: #8ef0a4; }
.fx-num.down { color: #9ecdff; }
@keyframes fx-num {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(.7); }
  22%  { opacity: 1; transform: translate(-50%, -60%) scale(1.18); }
  100% { opacity: 0; transform: translate(-50%, -165%) scale(1); }
}
.bf-card.fx-boost  svg { animation: fx-pulse-good .5s ease-in-out 2; }
.bf-card.fx-wither svg { animation: fx-pulse-bad  .5s ease-in-out 2; }
@keyframes fx-pulse-good { 50% { filter: brightness(1.45) drop-shadow(0 0 9px #7ef29a); } }
@keyframes fx-pulse-bad  { 50% { filter: brightness(.72) saturate(.55) drop-shadow(0 0 9px #6fa8d8); } }

/* a row taking a hit */
.fx-strike { position: absolute; inset: 0; border-radius: 10px; z-index: 3;
  pointer-events: none; opacity: 0; animation: fx-strike .5s ease-out forwards; }
@keyframes fx-strike { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.fx-strike-fire {
  background: radial-gradient(120% 100% at 50% 50%, rgba(255,242,205,.95),
              rgba(255,120,30,.6) 40%, rgba(120,20,0,0) 75%);
}
.fx-strike-rot {
  background: radial-gradient(120% 100% at 50% 50%, rgba(196,255,176,.7),
              rgba(70,150,50,.45) 45%, rgba(10,40,10,0) 78%);
}
.fx-strike-gold {
  inset: 0 auto 0 0; width: 40%; animation: fx-sweep .7s ease-out forwards;
  background: linear-gradient(90deg, rgba(255,230,168,0), rgba(255,230,168,.8),
              rgba(255,230,168,0));
}
@keyframes fx-sweep {
  0%   { opacity: 0; transform: translateX(-110%); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(340%); }
}
@keyframes fx-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  45% { transform: translateX(3px); }
  70% { transform: translateX(-2px); }
}
.row-lane.shaken { animation: fx-shake .36s ease-in-out; }

/* weather taking hold of a row.
   A BAND that sweeps down the lane, not a wash over it: filling the whole row
   at full opacity — which is what this did first — turned six lanes into six
   pale rectangles and hid the cards the player was trying to read. The band is
   clipped by .fx-cast so it cannot spill onto the lane above.               */
.fx-cast { position: absolute; inset: 0; border-radius: 10px; z-index: 3;
  pointer-events: none; overflow: hidden; }
.fx-cast::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 62%;
  opacity: 0; animation: fx-cast .95s ease-out forwards;
  animation-delay: inherit;
}
@keyframes fx-cast {
  0%   { opacity: 0;  transform: translateY(-110%); }
  18%  { opacity: .85; }
  70%  { opacity: .5; }
  100% { opacity: 0;  transform: translateY(178%); }
}
.fx-cast-ice::before   { background: linear-gradient(180deg, rgba(205,238,255,0), rgba(205,238,255,.8) 45%, rgba(120,190,255,0)); }
.fx-cast-fog::before   { background: linear-gradient(180deg, rgba(214,219,229,0), rgba(214,219,229,.75) 45%, rgba(150,160,175,0)); }
.fx-cast-rain::before  { background: linear-gradient(180deg, rgba(150,205,235,0), rgba(150,205,235,.7) 45%, rgba(60,110,150,0)); }
.fx-cast-gale::before  { background: linear-gradient(180deg, rgba(180,225,240,0), rgba(180,225,240,.7) 45%, rgba(60,110,150,0)); }
.fx-cast-ash::before   { background: linear-gradient(180deg, rgba(255,190,110,0), rgba(255,190,110,.75) 45%, rgba(160,70,20,0)); }
.fx-cast-dark::before  { background: linear-gradient(180deg, rgba(184,124,224,0), rgba(184,124,224,.7) 45%, rgba(60,20,90,0)); }
.fx-cast-clear::before { background: linear-gradient(180deg, rgba(255,242,196,0), rgba(255,242,196,.8) 45%, rgba(255,220,140,0)); }

/* Immolate: the whole field goes white-hot for a beat */
.fx-flash {
  position: fixed; border-radius: 12px; pointer-events: none; opacity: 0;
  background: radial-gradient(80% 70% at 50% 55%, rgba(255,246,218,.9),
              rgba(255,130,40,.55) 45%, rgba(90,10,0,0) 80%);
  animation: fx-flash .75s ease-out forwards;
}
@keyframes fx-flash { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } }

/* two cards trading a blow */
.fx-clash {
  position: fixed; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: #fff6d8; opacity: 0;
  box-shadow: 0 0 18px 8px rgba(255,210,120,.85);
  animation: fx-clash .55s ease-out forwards;
}
@keyframes fx-clash {
  0%   { opacity: 0; transform: scale(.3); }
  18%  { opacity: 1; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(3.4); }
}

/* ── the coat a row wears under weather ──────────────────────────────────── */
.lane-fx {
  position: absolute; inset: 0; border-radius: 10px; overflow: hidden;
  pointer-events: none; z-index: 2;
}
.lane-fx::before, .lane-fx::after {
  content: ""; position: absolute; left: 0; right: 0; top: -100%; height: 300%;
  will-change: transform;
}
@keyframes fx-fall  { from { transform: translateY(0); } to { transform: translateY(33.33%); } }
@keyframes fx-rise  { from { transform: translateY(0); } to { transform: translateY(-33.33%); } }
@keyframes fx-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fx-throb { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }

/* frost / blizzard */
.fx-ice {
  background:
    linear-gradient(180deg, rgba(150,205,255,.14), rgba(70,120,190,.07)),
    radial-gradient(120% 100% at 50% 50%, transparent 52%, rgba(190,232,255,.26) 100%);
}
.fx-ice::before {
  background-image:
    radial-gradient(circle, rgba(238,250,255,.55) 0 .9px, transparent 1.4px),
    radial-gradient(circle, rgba(238,250,255,.35) 0 .7px, transparent 1.2px);
  background-size: 29px 37px, 43px 53px;
  background-position: 0 0, 17px 9px;
  animation: fx-fall 7s linear infinite;
}
.fx-ice::after {
  background-image: radial-gradient(circle, rgba(210,238,255,.3) 0 1.5px, transparent 2.1px);
  background-size: 71px 83px; background-position: 13px 7px;
  animation: fx-fall 12s linear infinite;
}

/* fog / blindfog */
.fx-fog { background: linear-gradient(180deg, rgba(198,205,218,.16), rgba(120,130,148,.12)); }
.fx-fog::before {
  left: 0; right: auto; width: 200%; top: 0; height: 100%;
  background-image:
    radial-gradient(60% 130% at 18% 55%, rgba(222,228,238,.42), transparent 70%),
    radial-gradient(48% 120% at 62% 38%, rgba(196,205,220,.36), transparent 72%),
    radial-gradient(55% 120% at 92% 62%, rgba(210,218,230,.34), transparent 70%);
  animation: fx-drift 17s linear infinite;
}

/* rain / squall */
.fx-rain { background: linear-gradient(180deg, rgba(90,150,195,.11), rgba(30,60,95,.07)); }
.fx-rain::before {
  background-image: repeating-linear-gradient(100deg, transparent 0 7px,
                    rgba(178,222,250,.30) 7px 8px);
  animation: fx-fall 1.5s linear infinite;
}

/* sea gale — rain on a slant, plus wind wisps */
.fx-gale { background: linear-gradient(180deg, rgba(110,180,205,.11), rgba(28,70,95,.07)); }
.fx-gale::before {
  background-image: repeating-linear-gradient(118deg, transparent 0 9px,
                    rgba(190,232,246,.28) 9px 10px);
  animation: fx-fall 1.1s linear infinite;
}
.fx-gale::after {
  left: 0; right: auto; width: 200%; top: 0; height: 100%;
  background-image: radial-gradient(45% 22% at 30% 40%, rgba(220,244,252,.3), transparent 72%),
                    radial-gradient(40% 18% at 75% 66%, rgba(200,236,248,.24), transparent 72%);
  animation: fx-drift 5.5s linear infinite;
}

/* the noon of ashes — warm, and it rises instead of falling */
.fx-ash { background: linear-gradient(180deg, rgba(255,178,90,.16), rgba(120,48,10,.16)); }
.fx-ash::before {
  background-image:
    radial-gradient(circle, rgba(255,214,150,.6) 0 .9px, transparent 1.4px),
    radial-gradient(circle, rgba(255,196,120,.4) 0 .7px, transparent 1.2px);
  background-size: 31px 41px, 47px 59px;
  background-position: 0 0, 19px 13px;
  animation: fx-rise 8s linear infinite;
}
.fx-ash::after {
  background-image: radial-gradient(circle, rgba(255,150,60,.38) 0 1.4px, transparent 2px);
  background-size: 73px 89px; background-position: 21px 11px;
  animation: fx-rise 14s linear infinite;
}

/* the Gloam's moonless night */
.fx-dark { background: radial-gradient(120% 100% at 50% 50%, rgba(120,60,170,.10),
           rgba(18,8,30,.55) 78%); }
.fx-dark::before {
  background-image:
    radial-gradient(circle, rgba(198,140,235,.34) 0 1.1px, transparent 1.7px),
    radial-gradient(circle, rgba(168,110,215,.24) 0 .8px, transparent 1.3px);
  background-size: 44px 53px, 67px 79px;
  background-position: 0 0, 23px 17px;
  animation: fx-throb 3.4s ease-in-out infinite;
}

/* ── rarity ──────────────────────────────────────────────────────────────── */
/* The gold ring only breathes where a card is in play — 169 shimmering cards
   in the deck builder is noise, and the frame metal already says the rarity
   there.                                                                    */
.bf-face .bf-gilt { opacity: .3; }
.lane-cards .bf-card .bf-gilt,
.hand .bf-card .bf-gilt,
.lead-chip .bf-gilt,
.zoom-inner .bf-gilt { animation: fx-gilt 2.8s ease-in-out infinite; }
@keyframes fx-gilt { 0%, 100% { opacity: .2; } 50% { opacity: .95; } }
.lane-cards .bf-card .bf-face.rar-legendary,
.hand .bf-card .bf-face.rar-legendary {
  filter: drop-shadow(0 0 6px rgba(255,214,120,.5));
}

@media (prefers-reduced-motion: reduce) {
  .fx-ghost, .fx-num, .fx-strike, .fx-cast, .fx-flash, .fx-clash { display: none; }
  .lane-fx::before, .lane-fx::after, .bf-gilt,
  .bf-card.fx-boost svg, .bf-card.fx-wither svg,
  .row-lane.shaken { animation: none !important; }
}

/* ── bigger cards ──────────────────────────────────────────────────────────
   A card on the board was ~67 px wide: a picture and a number, unreadable as a
   card. The lane grows with the viewport and the card grows with the lane, so
   six lanes plus the hand still fit without scrolling. Anything more than this
   and the board stops fitting on a laptop - the rest of the readability comes
   from the hover read-out and the focus view below, not from raw size.        */
/* The vertical budget is fixed and tight: six lanes + the weather strip + the
   plates + the hand all have to fit one viewport without scrolling, and a card
   can never be taller than its lane. So the lane is as tall as the budget
   allows and the card fills it - pushing either further clips the hand into
   the Siege row, which is exactly what happened the first time this was
   raised. The rest of the readability comes from the hover read-out (which
   carries its own full-size card) and the focus view, not from raw size. */
/* --row-h is a CAP now, not a demand, and --row-min is the floor below which a
   lane stops being a lane. The hand carries a vh term for the same reason the
   lanes do: on a 720px-tall laptop a 173px hand bar is a quarter of the board,
   and it was taking that quarter out of the lanes. */
:root {
  --row-h:   clamp(78px, 12vh, 112px);
  --row-min: 52px;
  --hand-w:  clamp(64px, min(8.4vw, 11.2vh), 100px);
}
/* Measured from the lane, not from --row-h: the lane is elastic now, so any
   arithmetic against the variable would be a guess again. The face is a plain
   viewBox SVG, so height + width:auto keeps the 210x300 ratio exactly and the
   card can never spill over the row below. */
.lane-cards .bf-card { height: 100%; }
.lane-cards .bf-card svg { height: 100%; width: auto; }
.hand .bf-card svg { width: var(--hand-w); }
/* .hand clips vertically (overflow-x:auto forces overflow-y to auto), so the
   bar has to be tall enough for the card PLUS its hover lift. */
.hand-bar { min-height: calc(var(--hand-w) * 1.43 + 30px); }

/* A board card is clickable - say so. Deliberately NOT a scale: .lane-cards
   scrolls horizontally, so anything that grows past the lane gets clipped. */
@media (hover: hover) {
  .lane-cards .bf-card { cursor: pointer; transition: filter .12s ease; }
  .lane-cards .bf-card:hover {
    filter: brightness(1.22) drop-shadow(0 0 7px rgba(255,230,168,.5));
  }
}

/* ── hover read-out ─────────────────────────────────────────────────────── */
/* The tip carries a full-size card as well as the words. A board card is
   ~70 px wide and cannot get bigger without covering a row, so this is where
   "let me actually see it" is answered - hovering shows the painting at 3x
   with the rules beside it, and nothing on the board has to move. */
.card-tip {
  position: fixed; z-index: 68; width: 400px; max-width: 92vw;
  pointer-events: none; display: flex; gap: 12px; align-items: flex-start;
  background: rgba(9,13,23,.97); border: 1px solid var(--edge);
  border-radius: 12px; padding: 11px 13px;
  box-shadow: 0 16px 38px rgba(0,0,0,.7);
}
.card-tip[hidden] { display: none; }
.tip-card { flex: 0 0 auto; line-height: 0; }
.tip-card svg { width: 132px; display: block; border-radius: 8px; }
.tip-body { flex: 1 1 auto; min-width: 0; }
.tip-name {
  font-family: Georgia, 'Times New Roman', serif; font-size: 14.5px;
  color: var(--gold-lit); line-height: 1.2;
}
.tip-meta {
  font-size: 11px; color: var(--dim); margin: 2px 0 4px;
  text-transform: capitalize; letter-spacing: .03em;
}
.tip-line { margin: 5px 0 0; font-size: 12.5px; line-height: 1.42; color: #dbe3f2; }

/* ── the focus view ─────────────────────────────────────────────────────────
   Tapping or clicking any card - yours or the opponent's - brings it to the
   middle at full size with its rules beside it.                              */
#zoomInner {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  max-width: min(1040px, 94vw); max-height: 92vh;
}
.zoom-card { flex: 0 0 auto; line-height: 0; }
.zoom .zoom-card svg { width: min(330px, 40vw); }
.zoom-detail {
  flex: 1 1 320px; max-width: 440px; text-align: left; color: var(--text);
  background: rgba(10,15,26,.9); border: 1px solid var(--edge);
  border-radius: 14px; padding: 18px 20px;
  max-height: 82vh; overflow: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
}
.zd-name { margin: 0; font-size: 21px; color: var(--gold-lit); line-height: 1.2; }
.zd-meta {
  font-size: 12px; color: var(--dim); margin: 4px 0 13px;
  text-transform: capitalize; letter-spacing: .04em;
}
.zd-strength { display: flex; align-items: baseline; gap: 9px; margin-bottom: 13px; }
.zd-strength b {
  font-family: Georgia, 'Times New Roman', serif; font-size: 30px;
  color: var(--gold-lit); line-height: 1;
}
.zd-strength span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--dim);
}
.zd-strength em { font-style: normal; font-size: 12px; color: var(--good); }
.zd-rule { margin: 0 0 9px; font-size: 13.5px; line-height: 1.5; color: #dde5f4; }
.zd-perk {
  margin: 13px 0 0; padding-top: 11px; font-size: 12.5px; color: #9fb0cd;
  border-top: 1px solid var(--edge);
}
.zd-perk b { color: var(--gold); }
.zd-dismiss {
  margin: 14px 0 0; font-size: 10.5px; color: #5d6b84;
  letter-spacing: .1em; text-transform: uppercase;
}

/* ── the round banner ───────────────────────────────────────────────────── */
.round-banner {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .38s ease;
  background: radial-gradient(58% 38% at 50% 50%, rgba(4,7,14,.78),
              rgba(4,7,14,0) 78%);
}
.round-banner[hidden] { display: none; }
.round-banner.show { opacity: 1; }
.rb-inner {
  text-align: center; transform: scale(.86);
  transition: transform .44s cubic-bezier(.2,.9,.3,1.25);
  padding: 26px 60px;
  /* The banner lands exactly over the weather strip and the score badges.
     Without a plate of its own the two read as one jumbled column. */
  background: radial-gradient(closest-side, rgba(4,7,14,.94),
              rgba(4,7,14,.72) 72%, rgba(4,7,14,0));
}
.round-banner.show .rb-inner { transform: scale(1); }
.rb-kicker {
  font-size: 11.5px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 2px;
}
.rb-title {
  font-family: Georgia, 'Times New Roman', serif; letter-spacing: .06em;
  font-size: clamp(34px, 6vw, 62px); line-height: 1.1;
  background: linear-gradient(180deg, #fff3d0, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 26px rgba(0,0,0,.75));
}
.round-banner.is-loss .rb-title {
  background: linear-gradient(180deg, #ffdad2, #b8503f);
  -webkit-background-clip: text; background-clip: text;
}
.round-banner.is-draw .rb-title {
  background: linear-gradient(180deg, #edf2fc, #7f93b5);
  -webkit-background-clip: text; background-clip: text;
}
.rb-score {
  display: flex; align-items: baseline; justify-content: center; gap: 16px;
  margin-top: 4px; font-family: Georgia, 'Times New Roman', serif;
  font-size: 27px; color: var(--text);
}
.rb-score i { font-style: normal; font-size: 12px; color: var(--dim);
  letter-spacing: .2em; text-transform: uppercase; }
.rb-n { min-width: 52px; }
.rb-gems { display: flex; gap: 30px; justify-content: center; margin-top: 13px; }
.rb-gemrow { display: flex; gap: 6px; }
.rb-gem {
  width: 12px; height: 12px; border-radius: 50%;
  background: #222b42; border: 1px solid #3b4763;
}
.rb-gem.lit {
  background: radial-gradient(circle at 35% 30%, #ffe9ac, var(--gold));
  border-color: #8d6f24; box-shadow: 0 0 10px rgba(240,211,140,.6);
}
.rb-gemrow.theirs .rb-gem.lit {
  background: radial-gradient(circle at 35% 30%, #ffc9be, #b8503f);
  border-color: #7a3227; box-shadow: 0 0 10px rgba(226,96,74,.5);
}

/* ── the end of the duel ────────────────────────────────────────────────── */
.finale {
  position: fixed; inset: 0; z-index: 72; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .42s ease; overflow: hidden;
  background: radial-gradient(70% 56% at 50% 50%, rgba(4,7,14,.88),
              rgba(4,7,14,.62) 82%);
}
.finale[hidden] { display: none; }
.finale.show { opacity: 1; }
/* Narrow, faint, and masked to a ring: an unmasked repeating-conic-gradient
   at full width turns the screen into a barcode, and the first attempt used a
   plain conic-gradient, which does not repeat and drew exactly one ray. */
.fin-rays {
  position: absolute; inset: -30%; opacity: 0;
  transition: opacity .6s ease .1s;
  background: repeating-conic-gradient(from 0deg, rgba(255,230,168,.055) 0 4deg,
              transparent 4deg 26deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 10%,
                      rgba(0,0,0,.85) 42%, transparent 88%);
  mask-image: radial-gradient(closest-side, transparent 10%,
              rgba(0,0,0,.85) 42%, transparent 88%);
  animation: fin-spin 34s linear infinite;
}
.finale.show .fin-rays { opacity: 1; }
.finale.is-loss .fin-rays {
  background: repeating-conic-gradient(from 0deg, rgba(226,96,74,.05) 0 4deg,
              transparent 4deg 26deg);
}
.finale.is-draw .fin-rays {
  background: repeating-conic-gradient(from 0deg, rgba(190,205,230,.045) 0 4deg,
              transparent 4deg 26deg);
}
@keyframes fin-spin { to { transform: rotate(360deg); } }
.fin-inner {
  position: relative; text-align: center; transform: scale(.82);
  transition: transform .58s cubic-bezier(.2,.9,.3,1.2);
}
.finale.show .fin-inner { transform: scale(1); }
.fin-title {
  font-family: Georgia, 'Times New Roman', serif; letter-spacing: .1em;
  font-size: clamp(46px, 9vw, 96px); line-height: 1.05;
  background: linear-gradient(180deg, #fff6dc, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 34px rgba(0,0,0,.8));
}
.finale.is-loss .fin-title {
  background: linear-gradient(180deg, #ffdad2, #a8412f);
  -webkit-background-clip: text; background-clip: text;
}
.finale.is-draw .fin-title {
  background: linear-gradient(180deg, #eef3fd, #7f93b5);
  -webkit-background-clip: text; background-clip: text;
}
.fin-sub {
  margin-top: 10px; color: var(--dim); letter-spacing: .18em;
  text-transform: uppercase; font-size: clamp(11px, 1.7vw, 14px);
}

@media (max-width: 720px) {
  :root { --row-h: clamp(68px, 10.8vh, 94px); --row-min: 46px;
          --hand-w: clamp(60px, min(16.5vw, 11.5vh), 86px); }
  /* The focus view stacks: a 40vw card beside a 320px panel does not fit on a
     phone, and the card is the half worth keeping big. */
  #zoomInner { flex-direction: column; gap: 12px; max-height: 94vh;
    overflow: auto; }
  /* Smaller than it could be on purpose: the rules panel sits under the
     card on a phone, and a 62vw card pushed it off the bottom. */
  .zoom .zoom-card svg { width: min(215px, 52vw); }
  .zoom-detail { max-width: 92vw; flex: 0 0 auto; padding: 14px 16px; }
  .zd-dismiss { display: none; }        /* there is no "click anywhere" hint worth
                                           the space on a phone */
}

@media (prefers-reduced-motion: reduce) {
  .rb-inner, .fin-inner { transition: none; transform: none; }
  .fin-rays { animation: none; }
}

/* ── the last ten seconds ─────────────────────────────────────────────────
   Shown only to the seat that has to act, and only under 10 s. It sits dead
   centre, so `say()` stands down while it is up.

   pointer-events:none is load-bearing, not tidiness: this appears at exactly
   the moment the player still has to click a card and a lane, and a
   full-width overlay that ate those clicks would cause the timeout it is
   warning about.                                                           */
.urgent-clock {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 66; pointer-events: none;
  font-family: Georgia, 'Times New Roman', serif; font-weight: 600;
  font-size: clamp(78px, 16vw, 180px); line-height: 1;
  padding: 0 52px;
  color: var(--gold-lit);
  text-shadow: 0 0 44px rgba(0,0,0,.92), 0 6px 30px rgba(0,0,0,.85);
  background: radial-gradient(closest-side, rgba(4,7,14,.8),
              rgba(4,7,14,.45) 62%, rgba(4,7,14,0));
}
.urgent-clock[hidden] { display: none; }
.urgent-clock.critical { color: #ff9d86; }

/* One beat a second. The transform has to carry the centring translate or the
   number jumps to the corner for the length of the animation. */
@keyframes uc-beat {
  0%   { transform: translate(-50%, -50%) scale(1.32); opacity: .35; }
  55%  { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}
.urgent-clock.beat { animation: uc-beat .42s cubic-bezier(.2,.9,.3,1.1); }

@media (prefers-reduced-motion: reduce) {
  .urgent-clock.beat { animation: none; }
}

/* Attribution for the 0 A.D. score, in the briefing where a player can
   actually find it. The full notice is web/bannerfall/NOTICE.md. */
.briefing .credit {
  margin: 10px 0 0; font-size: 11.5px; color: #6f7d93;
  border-top: 1px solid var(--edge); padding-top: 8px;
}
.briefing .credit a { color: #8a97b8; }
.briefing .credit a:hover { color: var(--gold); }