/* GENERATED — do not edit.
 *
 *   python scripts/bannerfall/build_medieval_css.py
 *
 * Bannerfall's board stylesheet, every rule rewritten under `#mwCards` so it cannot
 * reach medieval's own interface. Source: web/bannerfall/style.css. The
 * generator explains why; `tests/test_medieval_cards.py` fails when this
 * file goes stale.
 */
/* The board's own variables, moved off `:root` so a panel medieval
   merely borrows cannot redefine the world's. */
#mwCards {
  --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);
}

/* ── the board ────────────────────────────────────────────────────────── */
#mwCards .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;
}
#mwCards .board[hidden] { display: none; }

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

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

#mwCards .field { flex: 1; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
#mwCards .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. */
#mwCards .foe-rows { justify-content: safe flex-end; }

#mwCards .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));
}
#mwCards .row-lane.droppable { border-color: var(--gold); background: rgba(200,162,74,.1); cursor: pointer; }
#mwCards .row-lane.weathered { background: linear-gradient(180deg, rgba(120,150,200,.16), rgba(12,19,32,.72)); }
#mwCards .row-lane .lane-score {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border-right: 1px solid #1b2540;
}
#mwCards .lane-score b { font-family: Georgia, serif; font-size: 19px; color: var(--gold-lit); }
#mwCards .lane-score span { font-size: 8.5px; color: var(--dim); letter-spacing: .02em;
  text-transform: uppercase; }
#mwCards .row-lane .lane-cards { display: flex; align-items: center; gap: 3px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
#mwCards .row-lane .lane-cards::-webkit-scrollbar { display: none; }
#mwCards .row-lane .lane-banner {
  display: flex; align-items: center; justify-content: center;
  border-left: 1px solid #1b2540; color: #3d4a68; font-size: 17px;
}
#mwCards .row-lane .lane-banner.lit { color: var(--gold-lit); text-shadow: 0 0 9px rgba(200,162,74,.8); }

#mwCards .weather-strip { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 2px 0; }
#mwCards .weather-slots { display: flex; gap: 5px; justify-content: center; }
#mwCards .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;
}
#mwCards .weather-slots .wslot.on { border-style: solid; border-color: #6fa8d8; color: #cfe9ff; background: rgba(80,130,190,.18); }
#mwCards .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;
}
#mwCards .score-badge.me { justify-self: start; }
#mwCards .score-badge.foe { justify-self: end; }
#mwCards .score-badge.lead { border-color: var(--gold); color: var(--gold-lit); }
/* ── cards ────────────────────────────────────────────────────────────── */
#mwCards .bf-card { position: relative; flex: 0 0 auto; line-height: 0; cursor: pointer; }
#mwCards .bf-card svg { display: block; border-radius: 7px; }
#mwCards .hand .bf-card svg { width: clamp(66px, 8.2vw, 96px); }
#mwCards .hand .bf-card {
  transition: transform .12s ease, filter .12s;
  transform-origin: bottom center;
}
#mwCards .hand .bf-card:hover { transform: translateY(-14px) scale(1.06); z-index: 3; }
#mwCards .hand .bf-card.picked { transform: translateY(-20px) scale(1.09); z-index: 4; }
#mwCards .hand .bf-card.picked svg { box-shadow: 0 0 0 2px var(--gold), 0 12px 24px rgba(0,0,0,.6); }
#mwCards .hand .bf-card.unplayable { filter: grayscale(.65) brightness(.62); }
#mwCards .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;
}
#mwCards .bf-card.boosted .pip { border-color: var(--good); color: var(--good); }
#mwCards .bf-card.damped .pip { border-color: #6fa8d8; color: #cfe9ff; }
#mwCards .bf-card.enemy-spy svg { box-shadow: 0 0 0 2px #b45; }
@keyframes bf-land { from { transform: translateY(-26px) scale(.82); opacity: 0; } }
#mwCards .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); } }
#mwCards .bf-card.burning { animation: bf-burn .4s ease-in forwards; }

#mwCards .hand-bar { display: flex; align-items: flex-end; gap: 10px; min-height: 160px; }
#mwCards .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;
}
#mwCards .hand-actions { display: flex; flex-direction: column; gap: 5px; }
#mwCards .hand-actions button { padding: 7px 11px; font-size: 12.5px; }
#mwCards .lead-sigil { margin-right: 5px; }

#mwCards .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;
}
#mwCards .log-strip.show { opacity: 1; }

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

#mwCards .chooser {
  position: fixed; inset: 0; z-index: 55; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(4,7,14,.82);
}
#mwCards .chooser[hidden] { display: none; }
#mwCards .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;
}
#mwCards .chooser-card h3 { margin: 0 0 4px; color: var(--gold-lit); }
#mwCards .chooser-options {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 14px 0;
}
#mwCards .chooser-options .bf-card svg { width: 104px; }
#mwCards .chooser-options .bf-card:hover svg { box-shadow: 0 0 0 2px var(--gold); }
#mwCards .chooser-options .opt-plain { padding: 10px 16px; }
/* ── 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). */
#mwCards .volume-slider { position: static !important; top: auto !important; }

#mwCards #lobbyAudio .mps-audio, #mwCards #lobbyAudioHall .mps-audio, #mwCards #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;
}
#mwCards #lobbyAudio .mps-audio-slider, #mwCards #lobbyAudioHall .mps-audio-slider, #mwCards #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. */
#mwCards #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) {
  #mwCards .hall-cols { grid-template-columns: 1fr; }
  #mwCards .hall-head { flex-wrap: wrap; }
  #mwCards #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. */
  #mwCards .hand-bar { flex-wrap: wrap; }
  #mwCards #hudAudio { order: -1; width: 100%; display: flex; justify-content: center; }
  #mwCards .board-top { grid-template-columns: 1fr; gap: 4px; }
  #mwCards .board-clock { order: -1; }
  #mwCards .side-plate { min-height: 40px; padding: 4px 8px; }
  #mwCards .side-plate .pile { display: none; }
  #mwCards { --row-h: clamp(62px, 10.5vh, 84px); --row-min: 46px; }
  #mwCards .row-lane { grid-template-columns: 42px 1fr 30px; }
  #mwCards .lane-score b { font-size: 16px; }
  #mwCards .hand-bar { min-height: 124px; }
  #mwCards .hand { justify-content: flex-start; }
  #mwCards .score-badge { font-size: 20px; min-width: 50px; }
}
@media (max-height: 620px) {
  #mwCards .card { padding: 14px 16px; }
  #mwCards .title { font-size: clamp(20px, 5vw, 28px); }
}
@media (max-width: 560px) {
  #mwCards #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).                                     */

#mwCards .row-lane { position: relative; }

#mwCards .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) */
#mwCards .fx-fly { position: fixed; will-change: transform; z-index: 2; }
#mwCards .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 */
#mwCards .bf-card.fx-arriving { opacity: 0; }

/* a card burning down where it stood */
#mwCards .fx-ghost { position: fixed; will-change: transform, opacity;
  animation: fx-burn .58s ease-in forwards; }
#mwCards .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 */
#mwCards .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;
}
#mwCards .fx-num.up { color: #8ef0a4; }
#mwCards .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); }
}
#mwCards .bf-card.fx-boost  svg { animation: fx-pulse-good .5s ease-in-out 2; }
#mwCards .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 */
#mwCards .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; } }
#mwCards .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%);
}
#mwCards .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%);
}
#mwCards .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); }
}
#mwCards .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.               */
#mwCards .fx-cast { position: absolute; inset: 0; border-radius: 10px; z-index: 3;
  pointer-events: none; overflow: hidden; }
#mwCards .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%); }
}
#mwCards .fx-cast-ice::before { background: linear-gradient(180deg, rgba(205,238,255,0), rgba(205,238,255,.8) 45%, rgba(120,190,255,0)); }
#mwCards .fx-cast-fog::before { background: linear-gradient(180deg, rgba(214,219,229,0), rgba(214,219,229,.75) 45%, rgba(150,160,175,0)); }
#mwCards .fx-cast-rain::before { background: linear-gradient(180deg, rgba(150,205,235,0), rgba(150,205,235,.7) 45%, rgba(60,110,150,0)); }
#mwCards .fx-cast-gale::before { background: linear-gradient(180deg, rgba(180,225,240,0), rgba(180,225,240,.7) 45%, rgba(60,110,150,0)); }
#mwCards .fx-cast-ash::before { background: linear-gradient(180deg, rgba(255,190,110,0), rgba(255,190,110,.75) 45%, rgba(160,70,20,0)); }
#mwCards .fx-cast-dark::before { background: linear-gradient(180deg, rgba(184,124,224,0), rgba(184,124,224,.7) 45%, rgba(60,20,90,0)); }
#mwCards .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 */
#mwCards .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 */
#mwCards .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 ──────────────────────────────────── */
#mwCards .lane-fx {
  position: absolute; inset: 0; border-radius: 10px; overflow: hidden;
  pointer-events: none; z-index: 2;
}
#mwCards .lane-fx::before, #mwCards .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 */
#mwCards .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%);
}
#mwCards .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;
}
#mwCards .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 */
#mwCards .fx-fog { background: linear-gradient(180deg, rgba(198,205,218,.16), rgba(120,130,148,.12)); }
#mwCards .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 */
#mwCards .fx-rain { background: linear-gradient(180deg, rgba(90,150,195,.11), rgba(30,60,95,.07)); }
#mwCards .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 */
#mwCards .fx-gale { background: linear-gradient(180deg, rgba(110,180,205,.11), rgba(28,70,95,.07)); }
#mwCards .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;
}
#mwCards .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 */
#mwCards .fx-ash { background: linear-gradient(180deg, rgba(255,178,90,.16), rgba(120,48,10,.16)); }
#mwCards .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;
}
#mwCards .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 */
#mwCards .fx-dark { background: radial-gradient(120% 100% at 50% 50%, rgba(120,60,170,.10),
           rgba(18,8,30,.55) 78%); }
#mwCards .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.                                                                    */
#mwCards .bf-face .bf-gilt { opacity: .3; }
#mwCards .lane-cards .bf-card .bf-gilt, #mwCards .hand .bf-card .bf-gilt, #mwCards .lead-chip .bf-gilt, #mwCards .zoom-inner .bf-gilt { animation: fx-gilt 2.8s ease-in-out infinite; }
@keyframes fx-gilt { 0%, 100% { opacity: .2; } 50% { opacity: .95; } }
#mwCards .lane-cards .bf-card .bf-face.rar-legendary, #mwCards .hand .bf-card .bf-face.rar-legendary {
  filter: drop-shadow(0 0 6px rgba(255,214,120,.5));
}

@media (prefers-reduced-motion: reduce) {
  #mwCards .fx-ghost, #mwCards .fx-num, #mwCards .fx-strike, #mwCards .fx-cast, #mwCards .fx-flash, #mwCards .fx-clash { display: none; }
  #mwCards .lane-fx::before, #mwCards .lane-fx::after, #mwCards .bf-gilt, #mwCards .bf-card.fx-boost svg, #mwCards .bf-card.fx-wither svg, #mwCards .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. */
#mwCards {
  --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. */
#mwCards .lane-cards .bf-card { height: 100%; }
#mwCards .lane-cards .bf-card svg { height: 100%; width: auto; }
#mwCards .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. */
#mwCards .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) {
  #mwCards .lane-cards .bf-card { cursor: pointer; transition: filter .12s ease; }
  #mwCards .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. */
#mwCards .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);
}
#mwCards .card-tip[hidden] { display: none; }
#mwCards .tip-card { flex: 0 0 auto; line-height: 0; }
#mwCards .tip-card svg { width: 132px; display: block; border-radius: 8px; }
#mwCards .tip-body { flex: 1 1 auto; min-width: 0; }
#mwCards .tip-name {
  font-family: Georgia, 'Times New Roman', serif; font-size: 14.5px;
  color: var(--gold-lit); line-height: 1.2;
}
#mwCards .tip-meta {
  font-size: 11px; color: var(--dim); margin: 2px 0 4px;
  text-transform: capitalize; letter-spacing: .03em;
}
#mwCards .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.                              */
#mwCards #zoomInner {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  max-width: min(1040px, 94vw); max-height: 92vh;
}
#mwCards .zoom-card { flex: 0 0 auto; line-height: 0; }
#mwCards .zoom .zoom-card svg { width: min(330px, 40vw); }
#mwCards .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);
}
#mwCards .zd-name { margin: 0; font-size: 21px; color: var(--gold-lit); line-height: 1.2; }
#mwCards .zd-meta {
  font-size: 12px; color: var(--dim); margin: 4px 0 13px;
  text-transform: capitalize; letter-spacing: .04em;
}
#mwCards .zd-strength { display: flex; align-items: baseline; gap: 9px; margin-bottom: 13px; }
#mwCards .zd-strength b {
  font-family: Georgia, 'Times New Roman', serif; font-size: 30px;
  color: var(--gold-lit); line-height: 1;
}
#mwCards .zd-strength span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--dim);
}
#mwCards .zd-strength em { font-style: normal; font-size: 12px; color: var(--good); }
#mwCards .zd-rule { margin: 0 0 9px; font-size: 13.5px; line-height: 1.5; color: #dde5f4; }
#mwCards .zd-perk {
  margin: 13px 0 0; padding-top: 11px; font-size: 12.5px; color: #9fb0cd;
  border-top: 1px solid var(--edge);
}
#mwCards .zd-perk b { color: var(--gold); }
#mwCards .zd-dismiss {
  margin: 14px 0 0; font-size: 10.5px; color: #5d6b84;
  letter-spacing: .1em; text-transform: uppercase;
}
/* ── the round banner ───────────────────────────────────────────────────── */
#mwCards .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%);
}
#mwCards .round-banner[hidden] { display: none; }
#mwCards .round-banner.show { opacity: 1; }
#mwCards .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));
}
#mwCards .round-banner.show .rb-inner { transform: scale(1); }
#mwCards .rb-kicker {
  font-size: 11.5px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 2px;
}
#mwCards .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));
}
#mwCards .round-banner.is-loss .rb-title {
  background: linear-gradient(180deg, #ffdad2, #b8503f);
  -webkit-background-clip: text; background-clip: text;
}
#mwCards .round-banner.is-draw .rb-title {
  background: linear-gradient(180deg, #edf2fc, #7f93b5);
  -webkit-background-clip: text; background-clip: text;
}
#mwCards .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);
}
#mwCards .rb-score i { font-style: normal; font-size: 12px; color: var(--dim);
  letter-spacing: .2em; text-transform: uppercase; }
#mwCards .rb-n { min-width: 52px; }
#mwCards .rb-gems { display: flex; gap: 30px; justify-content: center; margin-top: 13px; }
#mwCards .rb-gemrow { display: flex; gap: 6px; }
#mwCards .rb-gem {
  width: 12px; height: 12px; border-radius: 50%;
  background: #222b42; border: 1px solid #3b4763;
}
#mwCards .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);
}
#mwCards .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 ────────────────────────────────────────────────── */
#mwCards .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%);
}
#mwCards .finale[hidden] { display: none; }
#mwCards .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. */
#mwCards .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;
}
#mwCards .finale.show .fin-rays { opacity: 1; }
#mwCards .finale.is-loss .fin-rays {
  background: repeating-conic-gradient(from 0deg, rgba(226,96,74,.05) 0 4deg,
              transparent 4deg 26deg);
}
#mwCards .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); } }
#mwCards .fin-inner {
  position: relative; text-align: center; transform: scale(.82);
  transition: transform .58s cubic-bezier(.2,.9,.3,1.2);
}
#mwCards .finale.show .fin-inner { transform: scale(1); }
#mwCards .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));
}
#mwCards .finale.is-loss .fin-title {
  background: linear-gradient(180deg, #ffdad2, #a8412f);
  -webkit-background-clip: text; background-clip: text;
}
#mwCards .finale.is-draw .fin-title {
  background: linear-gradient(180deg, #eef3fd, #7f93b5);
  -webkit-background-clip: text; background-clip: text;
}
#mwCards .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) {
  #mwCards { --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. */
  #mwCards #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. */
  #mwCards .zoom .zoom-card svg { width: min(215px, 52vw); }
  #mwCards .zoom-detail { max-width: 92vw; flex: 0 0 auto; padding: 14px 16px; }
  #mwCards .zd-dismiss { display: none; }        /* there is no "click anywhere" hint worth
                                           the space on a phone */
}

@media (prefers-reduced-motion: reduce) {
  #mwCards .rb-inner, #mwCards .fin-inner { transition: none; transform: none; }
  #mwCards .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.                                                           */
#mwCards .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));
}
#mwCards .urgent-clock[hidden] { display: none; }
#mwCards .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; }
}
#mwCards .urgent-clock.beat { animation: uc-beat .42s cubic-bezier(.2,.9,.3,1.1); }

@media (prefers-reduced-motion: reduce) {
  #mwCards .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. */
#mwCards .briefing .credit {
  margin: 10px 0 0; font-size: 11.5px; color: #6f7d93;
  border-top: 1px solid var(--edge); padding-top: 8px;
}
#mwCards .briefing .credit a { color: #8a97b8; }
#mwCards .briefing .credit a:hover { color: var(--gold); }

/* ── the overlay the world sees ─────────────────────────────────────────── */
/* 200, above everything medieval's own sheet uses (it tops out at 92) and
   above the shared site sheet's 1000-class toasts only where it must not be —
   a toast still has to reach the player. Below 200 the HUD pills, the minimap,
   the hotbar and the conversation panel all drew ON TOP of the card table,
   which the first browser run made obvious in one screenshot. */
#mwCards {
  position: fixed; inset: 0; z-index: 200; display: block;
  background: rgba(4, 7, 14, .93);
  color: #e6ecf7; font: 14px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif;
  opacity: 0; transition: opacity .22s ease;
}
#mwCards[hidden] { display: none; }
#mwCards.shown { opacity: 1; }
/* The board inside is `position: fixed` in the source and stays that way: it
   is already a full-screen layer, and this wrapper is what dims the world
   behind it. */
#mwCards .board { background: transparent; }

/* A full-screen table is a modal, and the world's HUD has no business on top
   of it: the pills, the minimap, the hotbar and the conversation panel all sat
   over the board. The small panels leave the HUD alone on purpose — the
   conversation you opened them from is useful context behind them. */
body.mwc-at-table #mwHud,
body.mwc-at-table #mwTalk,
body.mwc-at-table .mw-back,
body.mwc-at-table .mw-loot-prompt,
body.mwc-at-table .mw-emotes,
body.mwc-at-table .mw-say { display: none !important; }

/* ── the panels either side of a duel ───────────────────────────────────────
   Medieval's own, not Bannerfall's: the lobby has a hall and a table browser
   where these sit, and none of that exists inside the world. Written here in
   the generator rather than in a second file so that one command produces the
   whole stylesheet and there is nothing to forget.                          */
/* 80, above the board's own overlays: the round banner is 70, the finale 72
   and the hover read-out 68, and a "Round drawn" curtain drew straight across
   the reward panel that arrived under it. */
#mwCards .mwc-pane {
  position: absolute; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  overflow: auto;
}
#mwCards .mwc-pane[hidden] { display: none; }
#mwCards .mwc-card {
  width: min(560px, 94vw); padding: 22px 24px;
  background: linear-gradient(180deg, #131d2e, #0c1424);
  border: 1px solid var(--edge); border-radius: 16px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .6);
}
#mwCards .mwc-card.wide { width: min(760px, 96vw); }
#mwCards .mwc-card h2 {
  margin: 0 0 6px; font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(19px, 3.4vw, 26px); color: var(--gold-lit); font-weight: 600;
}
#mwCards .mwc-sub { margin: 0 0 10px; color: var(--dim); font-size: 13px; }
#mwCards .mwc-flavour { margin: 0 0 12px; color: #9fb0cc; font-style: italic;
  font-size: 12.5px; }
#mwCards .mwc-label { margin: 14px 0 7px; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); }
#mwCards .mwc-none { color: var(--dim); font-size: 12.5px; margin: 8px 0 0; }
#mwCards .mwc-fine { color: #6d7c96; font-size: 11.5px; margin: 12px 0 0; }
#mwCards .mwc-sigil { font-size: 15px; margin-right: 6px; }

#mwCards .mwc-banners { display: grid; gap: 8px; }
#mwCards .mwc-banner {
  display: grid; grid-template-columns: 26px 1fr; gap: 2px 4px; text-align: left;
  padding: 10px 12px; border: 1px solid var(--edge); border-radius: 12px;
  background: #0d1526; color: var(--text); cursor: pointer; font: inherit;
}
#mwCards .mwc-banner:hover { border-color: var(--gold); background: #16203a; }
#mwCards .mwc-banner .mwc-sigil { grid-row: span 3; align-self: center;
  font-size: 22px; }
#mwCards .mwc-banner b { font-size: 14.5px; }
#mwCards .mwc-banner i { color: var(--dim); font-size: 12px; font-style: normal; }
#mwCards .mwc-banner em { color: var(--good); font-size: 11.5px; font-style: normal; }

#mwCards .mwc-decks { display: flex; flex-wrap: wrap; gap: 7px; }
#mwCards .mwc-deck {
  display: flex; align-items: center; gap: 4px; padding: 8px 11px;
  border: 1px solid var(--edge); border-radius: 10px; background: #0d1526;
  color: var(--text); cursor: pointer; font: inherit; font-size: 13px;
}
#mwCards .mwc-deck:hover:not(:disabled) { border-color: var(--gold);
  background: #16203a; }
/* Locked banners are SHOWN, not hidden: "eleven more cards" is the whole
   progression, and a row that simply is not there tells a player nothing. */
#mwCards .mwc-deck.locked { opacity: .55; cursor: default; }
#mwCards .mwc-deck i { color: var(--dim); font-style: normal; font-size: 11.5px; }

#mwCards .mwc-purse { font-size: 13px; color: var(--text); margin: 6px 0 2px; }
#mwCards .mwc-purse b { color: var(--gold-lit); font-size: 16px; }
#mwCards .mwc-record { color: var(--dim); margin-left: 10px; font-size: 12px; }

#mwCards .mwc-end-title.win { color: var(--gold-lit); }
#mwCards .mwc-end-title.loss { color: var(--danger); }
#mwCards .mwc-end-title.draw { color: var(--dim); }
#mwCards .mwc-prizes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
#mwCards .mwc-prize {
  padding: 5px 10px; border-radius: 9px; font-size: 12.5px;
  border: 1px solid rgba(200, 162, 74, .45); color: var(--gold-lit);
  background: rgba(200, 162, 74, .1);
}
#mwCards .mwc-prize.muted { color: var(--dim); border-color: var(--edge);
  background: transparent; }
#mwCards .mwc-banner-won {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 13px;
  color: var(--good); border: 1px solid rgba(121, 217, 154, .4);
  background: rgba(121, 217, 154, .08);
}

#mwCards .mwc-facs { display: grid; gap: 10px; }
#mwCards .mwc-fac { padding: 10px 12px; border: 1px solid var(--edge);
  border-radius: 11px; background: #0d1526; }
#mwCards .mwc-fac.ready { border-color: rgba(200, 162, 74, .55); }
#mwCards .mwc-fac-head { display: flex; align-items: baseline; gap: 6px; }
#mwCards .mwc-fac-head b { font-size: 14px; }
#mwCards .mwc-fac-state { margin-left: auto; color: var(--dim); font-size: 11.5px; }
#mwCards .mwc-fac.ready .mwc-fac-state { color: var(--gold-lit); }
/* NOT .mw-bar: web/medieval/style.css already owns that class for the health
   and stamina bars, and a second meaning for it collided once before. */
#mwCards .mwc-bar { height: 5px; border-radius: 3px; background: #1a2440;
  margin: 7px 0 5px; overflow: hidden; }
#mwCards .mwc-bar i { display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold), #ffe6a8); }
#mwCards .mwc-fac-foot { color: var(--dim); font-size: 11.5px; }

#mwCards .mwc-stall { display: grid; gap: 7px; }
#mwCards .mwc-buy {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; text-align: left;
  padding: 9px 12px; border: 1px solid var(--edge); border-radius: 11px;
  background: #0d1526; color: var(--text); cursor: pointer; font: inherit;
}
#mwCards .mwc-buy:hover:not(.cant) { border-color: var(--gold); background: #16203a; }
#mwCards .mwc-buy b { font-size: 13.5px; }
#mwCards .mwc-buy i { color: var(--dim); font-size: 11.5px; font-style: normal; }
#mwCards .mwc-buy em { grid-row: span 2; align-self: center; font-style: normal;
  color: var(--gold-lit); font-size: 15px; }
#mwCards .mwc-buy.cant { opacity: .6; }
#mwCards .mwc-buy.rar-epic { border-left: 3px solid #b06fd8; }
#mwCards .mwc-buy.rar-legendary { border-left: 3px solid #e0a63c; }
#mwCards .mwc-buy.rar-rare { border-left: 3px solid #6fa8d8; }
@keyframes mwc-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
#mwCards .mwc-buy.shake { animation: mwc-shake .3s ease-in-out; }

#mwCards .mwc-card button:not(.mwc-banner):not(.mwc-deck):not(.mwc-buy) {
  margin-top: 16px; padding: 9px 16px; font: inherit; font-size: 13px;
  border-radius: 10px; cursor: pointer; border: 1px solid var(--edge);
  background: linear-gradient(180deg, var(--gold-lit), var(--gold));
  color: #241c07; font-weight: 600;
}
#mwCards .mwc-card button.ghost { background: #162034; color: var(--text);
  font-weight: 400; }
/* The way out of a table, above the board's own fixed layer. */
#mwCards .mwc-leave {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 10px;
  z-index: 82; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--edge); background: rgba(12, 20, 36, .9);
  color: var(--dim); font-size: 15px; line-height: 1;
}
#mwCards .mwc-leave:hover { border-color: var(--danger); color: var(--text); }