/* Rift Table -- the touch layer (mobile.js). Loaded after app.css; nothing in
   here matches until mobile.js puts a body class on:
     is-touch          every touch device: touch primitives, bigger targets
     is-touch-phone    the phone board (#mboard) in place of the desktop table
     is-touch-tablet   an iPad: the desktop table with touch-sized targets
     is-portrait / is-landscape, is-narrow (<900 wide), is-short (<500 tall)
   On a desktop browser this file is inert. */

/* ================================================================
   1. Every touch device
   ================================================================ */
body.is-touch{ touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body.is-touch img{ -webkit-touch-callout: none; -webkit-user-drag: none; }
body.is-touch .app{ height: 100vh; height: 100dvh; margin: 0; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
body.is-touch .hand-bar--bottom{ padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
/* No hover on a touch screen: a tapped card must not stay lifted. */
body.is-touch .card.is-interactive:hover, body.is-touch .card.is-movable:hover, body.is-touch .card-tapped > .card.is-interactive:hover{ transform: none; }
/* No keyboard: the "Space" badge on the skippable button says nothing here. */
body.is-touch .key-hint{ display: none; }
/* Play by hand is a desktop thing. */
body.is-touch .hints-toggle, body.is-touch .manual-tools-wrap, body.is-touch .manual-corner, body.is-touch .settings-menu__item--hints{ display: none !important; }
/* The tutorial's chapters play on a phone; the full walkthrough game is drawn for a mouse and a wide window (lessons.js). */
body.is-touch-phone .chapters__item[data-chapter="full"]{ opacity: .55; pointer-events: none; }
body.is-touch-phone .chapters__item[data-chapter="full"] .chapters__mark::after{ content: "Desktop only"; }
/* Targets a finger can hit. */
body.is-touch .rt-dialog__btn, body.is-touch .settings-menu__item, body.is-touch .roll__btn, body.is-touch .mulligan-modal__confirm, body.is-touch .zone-viewer__close,
body.is-touch .choose-banner__btn, body.is-touch .showdown-banner__pass, body.is-touch .chain-banner__pass, body.is-touch .pay-banner__cancel, body.is-touch .play-options__way,
body.is-touch .win-banner__btn, body.is-touch .phase-strip__guide-btn{ min-height: 44px; }
body.is-touch .settings-tab{ width: 40px; height: 40px; }
body.is-touch .hide-chip{ min-height: 32px; padding: 6px 10px; font-size: 11px; }
body.is-touch .rune-recycle-btn{ width: 32px; height: 32px; }
body.is-touch .rune-recycle-btn:hover{ transform: none; }
/* Modals on a short screen. */
body.is-touch .mulligan-modal__panel, body.is-touch .zone-viewer__panel{ max-height: calc(100dvh - 24px); overflow: auto; padding: 12px; }
body.is-touch .mulligan-modal__card{ height: min(150px, 22dvh); }
body.is-touch .zone-viewer__card{ height: min(200px, 26dvh); }
body.is-touch .arrow-layer{ height: 100dvh; }

/* ================================================================
   2. An iPad: the desktop table, made for fingers
   ================================================================ */
body.is-touch-tablet{ --oppo-bar-h: 164px; }
body.is-touch-tablet .phase-strip__chip{ min-height: 36px; padding: 0 12px; font-size: 11px; }
body.is-touch-tablet .hand-bar--top{ padding-top: 44px; }
/* Portrait: the hand scrolls instead of shrinking, the corners become counts, the battlefields stack. */
body.is-touch-tablet.is-narrow .hand-panel__row{ justify-content: flex-start; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
body.is-touch-tablet.is-narrow .hand-panel__row > .card{ scroll-snap-align: center; }
body.is-touch-tablet.is-narrow .deck-group{ flex-direction: column; gap: 2px; }
body.is-touch-tablet.is-narrow .deck-group .zone .card-stack, body.is-touch-tablet.is-narrow .hand-corner .zone--deck .card-stack{ display: none; }
body.is-touch-tablet.is-narrow .deck-group .zone, body.is-touch-tablet.is-narrow .hand-corner .zone--deck{ flex-direction: row; gap: 6px; height: auto; min-height: 36px; padding: 0 8px; }
body.is-touch-tablet.is-narrow .battlefields{ flex: 1.8 1 0; }
body.is-touch-tablet.is-narrow .battlefields__grid{ grid-template-columns: 1fr !important; grid-template-rows: none; grid-auto-rows: 1fr; gap: 6px; } /* stacked, however many (Baron Pit's third row sits between the two: app.js orders them) */
body.is-touch-tablet.is-narrow .bf-half:first-child{ border-right: 0; border-bottom: 1px solid var(--line); }

/* ================================================================
   3. A phone: its own board
   ================================================================ */
body.is-touch-phone{
  --mb-top: 44px;
  --mb-peek: 92px;   /* the drawer at rest: a 36px bar and 56px of card tops */
  --mb-open: 200px;  /* the drawer raised: whole cards */
  --mb-bf: 146px;    /* a battlefield band in portrait: 22px head + 124px of thumbs */
  --mb-thumb: 112px; /* a unit thumbnail's height on a battlefield */
}
body.is-touch-phone .app, body.is-touch-phone #phaseStrip, body.is-touch-phone #arrowLayer{ display: none !important; }
body.is-touch-phone #mboard{ display: grid; }
body.is-touch-phone .mb{
  position: fixed; inset: 0; z-index: 10;
  grid-template-rows: var(--mb-top) minmax(0, 1fr);
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  background: var(--felt-900);
  color: var(--text-hi); font-family: var(--font-body);
  user-select: none;
}

/* ---- the top strip ---- */
.mb-top{ display: flex; align-items: center; gap: 4px; padding: 2px 4px; height: var(--mb-top); border-bottom: 1px solid var(--line-soft); background: var(--felt-800); min-width: 0; }
.mb-btn{
  appearance: none; border: 1px solid var(--line-soft); background: rgba(7,16,28,.6); color: var(--text-hi);
  border-radius: 8px; min-height: 40px; font: inherit; font-size: 11px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; cursor: pointer;
}
.mb-btn:disabled{ opacity: .55; cursor: default; }
.mb-btn.is-live{ border-color: var(--brass-glow); color: var(--brass-glow); box-shadow: 0 0 10px rgba(239,217,160,.25); }
.mb-peek--opp{ align-self: flex-start; margin-top: -2px; border-top: 0; border-radius: 0 0 8px 8px; min-height: 42px; padding: 0 8px 0 6px; gap: 4px; }
.mb-peek__backs{ display: flex; align-items: flex-start; height: 14px; padding-left: 6px; }
.mb-back{ width: 14px; height: 12px; margin-left: -6px; border-radius: 0 0 3px 3px; background: linear-gradient(180deg, #16305a, #0b1a2e); border: 1px solid var(--line-soft); border-top: 0; }
.mb-peek__count{ font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--brass-glow); }
.mb-peek__pts{ font-size: 10px; color: var(--text-lo); }
.mb-opp{ gap: 5px; padding: 0 6px; min-width: 0; overflow: hidden; }
.mb-opp__thumb{ width: 18px; height: 25px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line-soft); flex: 0 0 auto; }
.mb-opp__stat{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-lo); }
.mb-opp__stat.is-live{ color: var(--text-hi); }
.mb-end{ margin-left: auto; flex-direction: column; gap: 0; line-height: 1.05; min-width: 92px; padding: 0 10px; }
.mb-end__phase{ font-family: var(--font-display); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-lo); }
.mb-end__label{ font-weight: 700; font-size: 12.5px; }
.mb-end.is-live{ background: linear-gradient(180deg, #f2ddac, var(--brass)); color: #1a1408; border-color: var(--brass-glow); box-shadow: 0 0 12px rgba(239,217,160,.35); }
.mb-end.is-live .mb-end__phase{ color: #4a3a12; }
.mb-end.is-theirs .mb-end__label{ color: var(--text-lo); font-weight: 600; }
.mb-undo{ width: 40px; flex: 0 0 40px; padding: 0; font-size: 20px; color: var(--brass-glow); }
.mb-cog{ position: relative; width: 40px; height: 40px; flex: 0 0 40px; }
.mb-cog .settings-tab-wrap{ position: static; }
body.is-touch-phone .settings-menu{ position: fixed; top: calc(var(--mb-top) + env(safe-area-inset-top) + 2px); right: 6px; left: auto; bottom: auto; max-height: 70dvh; overflow: auto; z-index: 60; }

/* ---- the field ---- */
.mb-field{ display: flex; flex-direction: column; gap: 4px; padding: 4px 4px calc(var(--mb-peek) + 8px + env(safe-area-inset-bottom)); min-height: 0; overflow: hidden; }
/* A banner up (a sheet above the drawer; mobile.js measures what it covers into --mb-cover): the field scrolls clear of it. */
/* (.mb-field twice: this must outrank the rune row's own padding, has-runes below -- the combination in the report.) */
body.is-touch-phone.has-banner .mb-field.mb-field{ overflow-y: auto; padding-bottom: calc(var(--mb-cover, 200px) + 12px); }
/* ...and the base keeps its height rather than shrinking under the padding, so it can scroll up into sight. */
body.is-touch-phone.is-portrait.has-banner .mb-band--base{ flex: 0 0 auto; min-height: 170px; }
/* The fold on each sheet, and a folded sheet: its first line only, the rest a tap away. */
body.is-touch-phone .mb-fold{ position: absolute; top: 4px; right: 6px; z-index: 2; width: 40px; height: 32px; border-radius: 8px; border: 1px solid rgba(239,217,160,.4); background: rgba(4,10,20,.6); color: var(--brass-glow); font-size: 16px; line-height: 1; }
body.is-touch-phone .mb-sheet-folded{ max-height: 44px !important; overflow: hidden !important; padding-top: 6px !important; padding-bottom: 6px !important; }
body.is-touch-phone .mb-sheet-folded .choose-banner__card{ display: none; }
body.is-touch-phone .mb-sheet-folded [class*=__title]{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Room for the fold beside each sheet's prompt. */
body.is-touch-phone :is(#showdownBanner, #chainBanner, #payBanner, #chooseBanner, #playOptionsBanner, #assignBanner) [class*=__info]{ padding-right: 44px; }
/* The whole sheet keeps the fold's corner clear: a short sheet's Pass sat under it, and a tap on Pass folded the sheet (the UI sweep, 2026-10-07). */
body.is-touch-phone :is(#showdownBanner, #chainBanner, #payBanner, #chooseBanner, #playOptionsBanner, #assignBanner){ padding-right: 52px !important; }
.mb-band{ position: relative; border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; background: #0b1a2e; display: flex; flex-direction: column; min-height: 0; flex-shrink: 0; }
.mb-band--bf{ flex: 0 0 var(--mb-bf); }
/* Your base takes what is left, and never less than a row of thumbnails: with a banner up the field scrolls instead. */
.mb-band--base{ flex: 1 1 auto; min-height: 160px; }
/* Theirs: only there when they have something in it, and small -- it is information, not a place you play to. */
.mb-band--oppbase{ flex: 0 0 auto; background: #0a1524; }
.mb-band--oppbase .mb-band__head{ height: 20px; font-size: 10px; }
/* An explicit row height: in the landscape grid this band sits in an auto row, where a flexed row would collapse to nothing. */
.mb-band--oppbase .mb-band__row{ flex: 0 0 auto; height: 72px; padding: 3px 6px; gap: 4px; flex-wrap: nowrap; overflow-x: auto; touch-action: pan-x; }
.mb-band--oppbase .mb-thumb{ height: 100%; width: auto; max-height: 66px; }
.mb-thumb--info{ touch-action: none; } /* their base: small, but a card like any other -- a target, a drop, held to read */
.mb-band--oppbase .might-badge{ transform: scale(.8); transform-origin: bottom right; }
.mb-band__art{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .26; filter: saturate(.8); pointer-events: none; }
.mb-band__head{ position: relative; z-index: 1; height: 22px; display: flex; align-items: center; gap: 6px; padding: 0 6px 0 8px; font-family: var(--font-display); font-size: 11px; letter-spacing: .04em; color: var(--brass-glow); background: linear-gradient(180deg, rgba(5,11,20,.85), rgba(5,11,20,.35)); }
.mb-band--base .mb-band__head{ height: 30px; }
.mb-band__name{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mb-band__pill{ font-family: var(--font-body); font-size: 10px; letter-spacing: 0; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-soft); color: var(--text-lo); flex: 0 0 auto; }
.mb-band__pill.is-mine{ border-color: var(--p0); color: var(--p0); }
.mb-band__pill.is-theirs{ border-color: var(--p1); color: var(--p1); }
.mb-band__pill.is-contested{ border-color: var(--state-contested); color: var(--state-contested); }
.mb-band__fd{ font-family: var(--font-body); font-size: 10px; color: var(--text-lo); }
/* The ⤢ overhangs its 22px header so a finger has 44×36 to hit. */
.mb-band__open{ margin: -7px 0 -7px auto; appearance: none; border: 0; background: transparent; color: var(--text-lo); font-size: 16px; width: 44px; height: 36px; padding: 0; cursor: pointer; flex: 0 0 auto; position: relative; z-index: 2; }
.mb-band--base .mb-band__open{ margin: -3px 0 -3px auto; }
.mb-band__row{ position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; gap: 4px; padding: 4px 6px; }
/* The units at a battlefield are fanned, not laid out side by side: each tucks behind the one before it, leaving
   a strip of every card showing -- enough to read it and to tap it. Theirs gather at the left of the divider,
   yours at the right. --mb-peek-card is how much of a covered card stays uncovered. */
.mb-fan{ flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; /* pan-y: a swipe up here scrolls the field, e.g. clear of a banner */ --mb-peek-card: 42px; }
.mb-fan--opp{ justify-content: flex-start; }
.mb-fan--me{ justify-content: flex-start; }
/* Right-aligned by an auto margin, not justify-content: flex-end -- a fan that overflowed that way spilled off its LEFT
   edge, where no scroll reaches, and the first card could not be tapped (the UI sweep, 2026-10-07). */
.mb-fan--me > .mb-thumb:first-child{ margin-left: auto; }
.mb-fan > .mb-thumb{ position: relative; }
/* How far each card is pulled over the one before it is set per card by mobile.js (mbFanPull), from that card's
   measured width -- a card's width comes from the row's height, which varies, and CSS cannot read it. */
.mb-fan__divider{ flex: 0 0 1px; background: var(--line-soft); margin: 6px 0; }
.mb-band__row--base{ flex-wrap: wrap; align-content: flex-start; gap: 6px; overflow-y: auto; overflow-x: hidden; }

/* ---- thumbnails ---- */
.mb-thumb{ position: relative; flex: 0 0 auto; height: 100%; max-height: var(--mb-thumb); aspect-ratio: var(--ratio-portrait); border-radius: 6px; overflow: hidden; border: 1px solid rgba(0,0,0,.5); background: #000; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.mb-band__row--base .mb-thumb{ height: auto; width: 86px; max-height: none; }
.mb-thumb--ref{ height: 26px; max-height: 26px; width: auto; border-radius: 3px; }
.mb-thumb__art{ width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* Art that never arrived: the plain face, drawn in the card's slot -- never the browser's alt text, which on a
   card lying on its side came out as a line of type turned across the battlefield. */
.mb-face{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px 3px; text-align: center; background: linear-gradient(160deg, #1e3350, #0a1421); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(239,217,160,.28); pointer-events: none; }
.mb-face__cost{ font-weight: 700; font-size: 12px; line-height: 1; color: var(--brass-glow); }
.mb-face__name{ font-size: 9px; line-height: 1.15; color: var(--ink-soft); overflow: hidden; }
.mb-card .mb-face__name{ font-size: 8px; }
/* Tapped: the card lies on its side in a square slot, as on a real table (the desktop board's .card-tapped does the same). */
.mb-thumb.is-tapped{ aspect-ratio: 1; background: transparent; border-color: transparent; box-shadow: none; overflow: visible; }
.mb-thumb.is-tapped .mb-thumb__art{ position: absolute; top: 50%; left: 50%; width: auto; height: 100%; transform: translate(-50%, -50%) rotate(90deg); border-radius: 6px; border: 1px solid rgba(0,0,0,.5); box-shadow: 0 2px 6px rgba(0,0,0,.5); filter: brightness(.82); }
/* The fallback face lies on its side with the card it stands in for. */
.mb-thumb.is-tapped .mb-face{ inset: auto; top: 50%; left: 50%; height: 100%; width: auto; aspect-ratio: var(--ratio-portrait); transform: translate(-50%, -50%) rotate(90deg); border: 1px solid rgba(0,0,0,.5); }
/* In the wrapping base row a thumb's height comes from its width, so the tapped square is given both: an
   aspect-ratio alone left the box shorter than the card lying in it, which then overlapped its neighbour. */
.mb-band__row--base .mb-thumb.is-tapped{ width: 86px; height: 86px; }
.mb-thumb.is-tapped.is-movable, .mb-thumb.is-tapped.is-activatable, .mb-thumb.is-tapped.is-selected{ box-shadow: none; outline: none; }
.mb-thumb.is-tapped.is-movable .mb-thumb__art{ box-shadow: 0 0 0 2px var(--brass-glow), 0 0 12px rgba(239,217,160,.45); }
.mb-thumb.is-tapped.is-activatable .mb-thumb__art{ box-shadow: 0 0 0 2px var(--dom-calm), 0 0 12px rgba(89,171,103,.45); }
.mb-thumb.is-tapped.is-selected .mb-thumb__art{ box-shadow: 0 0 0 3px var(--brass-glow); }
.mb-thumb__named{ position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 2px; font-size: 8px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(20,35,59,.92); color: #efd9a0; pointer-events: none; }
.mb-thumb.is-stunned::after{ content: "stunned"; position: absolute; left: 0; right: 0; bottom: 0; font-size: 8px; text-align: center; background: rgba(156,99,216,.85); color: #fff; letter-spacing: .06em; text-transform: uppercase; }
.mb-thumb.is-buffed{ box-shadow: 0 0 0 1px rgba(111,214,130,.8), 0 2px 6px rgba(0,0,0,.5); }
.mb-thumb__gear{ position: absolute; top: 2px; left: 2px; font-size: 10px; background: rgba(0,0,0,.7); color: var(--brass-glow); border-radius: 4px; padding: 0 3px; pointer-events: none; }
.mb-thumb .might-badge{ position: absolute; right: 2px; bottom: 2px; z-index: 2; }
.mb-thumb.is-movable{ box-shadow: 0 0 0 2px var(--brass-glow), 0 0 12px rgba(239,217,160,.45); }
.mb-thumb.is-activatable{ box-shadow: 0 0 0 2px var(--dom-calm), 0 0 12px rgba(89,171,103,.45); }
.mb-thumb.is-selected, .mb-card.is-selected{ outline: 3px solid var(--brass-glow); outline-offset: 1px; }
.mb-thumb.is-legal-target{ box-shadow: var(--glow-enemy); }
.mb-thumb.is-legal-target.is-target-friendly{ box-shadow: var(--glow-own); }
.mb-band.is-legal-destination{ border-color: var(--brass-glow); box-shadow: inset 0 0 0 2px var(--brass-glow), 0 0 14px rgba(239,217,160,.35); }
.mb-band.is-drop-hover{ background: rgba(239,217,160,.12); }

/* ---- the drawer ---- */
.mb-drawer{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  height: calc(var(--mb-peek) + env(safe-area-inset-bottom));
  padding: 0 0 env(safe-area-inset-bottom);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(10,22,38,.98), rgba(5,11,20,1)); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(0,0,0,.5);
  transition: height .18s ease-out;
}
.mb-drawer.is-open{ height: calc(var(--mb-open) + env(safe-area-inset-bottom)); }
/* The rune row, when shown, adds its own height so the hand keeps peeking under it. */
.mb-drawer.has-runes{ height: calc(var(--mb-peek) + 52px + env(safe-area-inset-bottom)); }
.mb-drawer.is-open.has-runes{ height: calc(var(--mb-open) + 52px + env(safe-area-inset-bottom)); }
body.is-touch-phone.has-runes .mb-field{ padding-bottom: calc(var(--mb-peek) + 60px + env(safe-area-inset-bottom)); }
.mb-drawer__bar{ flex: 0 0 36px; display: flex; align-items: center; gap: 6px; padding: 0 6px; font-size: 11px; color: var(--text-lo); min-width: 0; touch-action: none; }
.mb-drawer__handle{ appearance: none; border: 0; background: transparent; width: 44px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.mb-drawer__grip{ width: 28px; height: 4px; border-radius: 2px; background: var(--brass-dim); }
.mb-drawer__you{ font-family: var(--font-display); color: var(--brass-glow); white-space: nowrap; }
.mb-drawer__bar .mb-btn{ min-height: 36px; font-size: 10.5px; padding: 0 7px; border-radius: 6px; }
.mb-runes{ flex: 0 0 auto; }
.mb-hint{ flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--text-hi); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-zones{ margin-left: auto; display: flex; gap: 4px; flex: 0 0 auto; }
/* While something is selected the bar is the hint's: the score and the pile chips step aside so Cancel is never clipped. */
body.has-sel .mb-zones, body.has-sel .mb-drawer__you{ display: none; }
.mb-runes-row{ flex: 0 0 auto; display: flex; gap: 6px; padding: 4px 8px 6px; overflow-x: auto; touch-action: pan-x; border-top: 1px solid var(--line-soft); }
.mb-rune{ flex: 0 0 auto; display: flex; align-items: center; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(7,16,28,.7); min-height: 40px; overflow: hidden; --dom: var(--brass-dim); }
.mb-rune.dom-fury{ --dom: var(--dom-fury); } .mb-rune.dom-calm{ --dom: var(--dom-calm); } .mb-rune.dom-mind{ --dom: var(--dom-mind); } .mb-rune.dom-body{ --dom: var(--dom-body); } .mb-rune.dom-chaos{ --dom: var(--dom-chaos); } .mb-rune.dom-order{ --dom: var(--dom-order); }
.mb-rune.is-tapped{ opacity: .6; }
.mb-rune__tap{ appearance: none; border: 0; background: transparent; color: var(--text-hi); font: inherit; font-weight: 700; font-size: 13px; width: 44px; height: 40px; cursor: pointer; }
.mb-rune__tap.is-live{ background: rgba(239,217,160,.15); color: var(--brass-glow); }
.mb-rune__tap.is-undo{ background: rgba(239,217,160,.08); }
.mb-rune__tap:disabled{ color: var(--text-faint); cursor: default; }
.mb-rune__dom{ width: 22px; height: 22px; border-radius: 50%; background: var(--dom); color: #0b1a2e; font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; margin: 0 6px; }
.mb-rune__recycle{ appearance: none; border: 0; border-left: 1px solid var(--line-soft); background: transparent; color: var(--brass-glow); font-size: 16px; width: 44px; height: 40px; cursor: pointer; }
.mb-rune-cancel{ align-self: center; margin-left: auto; }
.mb-rune-add{ align-self: center; font-size: 12px; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; border-color: var(--state-controlled, #6fae7a); }
.mb-hand{ flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-start; gap: 0; padding: 4px 10px 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x; scroll-snap-type: x proximity; }
.mb-hand > .mb-card + .mb-card{ margin-left: -14px; }
.mb-drawer.is-open .mb-hand{ gap: 8px; align-items: center; }
.mb-drawer.is-open .mb-hand > .mb-card + .mb-card{ margin-left: 0; }
.mb-card{ position: relative; flex: 0 0 auto; width: 72px; aspect-ratio: var(--ratio-portrait); border-radius: 6px; overflow: hidden; border: 1px solid rgba(0,0,0,.6); background: #000; box-shadow: 0 2px 8px rgba(0,0,0,.6); scroll-snap-align: center; transition: width .18s ease-out; }
.mb-drawer.is-open .mb-card{ width: 132px; }
.mb-card__art{ width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.mb-card__cost{ position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.75); color: var(--brass-glow); font-family: var(--font-display); font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mb-card.is-movable{ box-shadow: 0 0 0 2px var(--brass-glow), 0 0 12px rgba(239,217,160,.5); }
.mb-card.is-activatable{ box-shadow: 0 0 0 2px var(--dom-calm), 0 0 12px rgba(89,171,103,.5); }
.mb-card.is-unplayable .mb-card__art{ filter: brightness(.5); }
.mb-hand__trash-label{ flex: 0 0 auto; align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 4px 0 12px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-glow); opacity: .85; }
.mb-hand > .mb-hand__trash-label + .mb-card{ margin-left: 0; }
.mb-card__trash-tag{ position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 0; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; color: #1b1406; background: var(--brass-glow); pointer-events: none; }
.mb-card__why{ position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--dom-fury); box-shadow: 0 0 6px var(--dom-fury); }

/* ---- touches: a card's own touch-action is none, so a hold can become a drag (its row is scrolled by hand, mobile.js) ---- */
.mb-thumb, .mb-card{ touch-action: none; }
.mb-thumb--big{ height: 120px; max-height: 120px; }
/* The selection's hint line in the drawer's bar. */
.mb-hint__text{ min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mb-hint__info{ width: 40px; padding: 0; font-family: var(--font-display); font-weight: 700; flex: 0 0 auto; }
.mb-hint__cancel{ flex: 0 0 auto; color: var(--brass-glow); }
/* The card being carried. */
.mb-ghost{ position: fixed; left: 0; top: 0; z-index: 75; width: 96px; aspect-ratio: var(--ratio-portrait); transform: translate(-50%, -62%) rotate(-3deg); pointer-events: none; border-radius: 8px; overflow: hidden; border: 2px solid var(--brass-glow); box-shadow: 0 16px 40px rgba(0,0,0,.7), 0 0 18px rgba(239,217,160,.5); background: #000; }
.mb-ghost__art{ width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-ghost__n{ position: absolute; right: 4px; top: 4px; background: var(--brass-glow); color: #1a1408; font-weight: 800; font-size: 12px; border-radius: 999px; padding: 1px 6px; }
.mb-thumb.is-drop-hover, .mb-band.is-drop-hover{ background: rgba(239,217,160,.16); }
/* The preview (app.js's #detail), as a centred sheet with a close and, for a hand card, why it can't be played. */
.mb-preview-backdrop{ position: fixed; inset: 0; z-index: 68; background: rgba(4,10,20,.6); }
body.is-touch-phone .detail{ left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(94vw, 560px); max-height: 86dvh; overflow: auto; flex-direction: column; align-items: center; padding: 12px 12px 56px; z-index: 70; }
body.is-touch-phone .detail.is-visible{ pointer-events: auto; } /* only while shown: hidden, it must not sit over the middle of the board catching touches */
body.is-touch-phone .detail__media img{ width: min(46vw, 220px); height: auto; aspect-ratio: 744 / 1039; }
body.is-touch-phone .detail.is-landscape .detail__media img{ width: min(80vw, 320px); aspect-ratio: 1038 / 744; }
body.is-touch-phone.is-landscape .detail{ flex-direction: row; align-items: flex-start; }
body.is-touch-phone.is-landscape .detail__media img{ width: min(30vw, 200px); }
body.is-touch-phone .detail__info{ width: 100%; }
.detail__why{ margin-top: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(213,84,74,.6); background: rgba(213,84,74,.12); color: var(--text-hi); font-size: 13px; line-height: 1.4; }
.detail__close{ position: absolute; right: 8px; bottom: 8px; appearance: none; border: 1px solid var(--line-soft); background: rgba(7,16,28,.7); color: var(--text-hi); width: 44px; height: 40px; border-radius: 10px; font-size: 15px; cursor: pointer; }

/* ---- sheets ---- */
.mb-sheet-backdrop{ position: fixed; inset: 0; z-index: 69; background: rgba(4,10,20,.55); backdrop-filter: blur(2px); }
.mb-sheet{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  max-height: 72dvh; overflow: auto;
  background: linear-gradient(180deg, #1c1f3a, #0e1024); border: 1px solid var(--brass); border-bottom: 0; border-radius: 14px 14px 0 0;
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); color: var(--text-hi); font-family: var(--font-body);
  box-shadow: 0 -20px 60px rgba(0,0,0,.6);
}
.mb-sheet__head{ display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mb-sheet__title{ font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--brass-glow); flex: 1 1 auto; }
.mb-sheet__close{ appearance: none; border: 1px solid var(--line-soft); background: rgba(7,16,28,.6); color: var(--text-hi); width: 44px; height: 44px; border-radius: 10px; font-size: 16px; cursor: pointer; }
.mb-sheet__body{ display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.mb-sheet__sub{ font-family: var(--font-display); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-lo); }
.mb-sheet__cards{ display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; touch-action: pan-x; }
.mb-sheet__card{ flex: 0 0 auto; width: 96px; display: flex; flex-direction: column; gap: 4px; }
.mb-sheet__art{ width: 96px; aspect-ratio: var(--ratio-portrait); object-fit: cover; border-radius: 6px; border: 1px solid var(--line-soft); }
.mb-sheet__cap{ font-size: 11px; color: var(--text-lo); line-height: 1.3; }
.mb-sheet__bf{ display: flex; flex-direction: column; gap: 4px; }
.mb-sheet__bfart{ width: 100%; max-width: 360px; aspect-ratio: var(--ratio-landscape); object-fit: cover; border-radius: 8px; border: 1px solid var(--line-soft); }
.mb-sheet__stats{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.mb-sheet__row{ display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- the banners, as sheets above the drawer ---- */
/* Your hidden card at a battlefield: shown, marked as hidden. */
body.is-touch-phone .mb-thumb--hidden{ outline:1px dashed rgba(239,217,160,.7); outline-offset:-1px; }
body.is-touch-phone .mb-thumb--hidden .mb-thumb__art{ filter:saturate(.7) brightness(.85); }
body.is-touch-phone #showdownBanner, body.is-touch-phone #chainBanner, body.is-touch-phone #payBanner,
body.is-touch-phone #chooseBanner, body.is-touch-phone #playOptionsBanner, body.is-touch-phone #assignBanner{
  top: auto !important; bottom: calc(var(--mb-peek) + env(safe-area-inset-bottom)); left: 0; right: 0;
  transform: none !important; max-width: none; width: auto; margin: 0;
  border-radius: 12px 12px 0 0; max-height: 46dvh; overflow: auto; flex-wrap: wrap;
}
body.is-touch-phone .chain-banner:not([hidden]) ~ .pay-banner{ bottom: calc(var(--mb-peek) + 96px + env(safe-area-inset-bottom)); }
/* A choice as a compact sheet: the card small beside the prompt (not a row of its own), the places to choose by name,
   the buttons last -- so it covers as little of the field as it can. */
body.is-touch-phone #chooseBanner{ gap: 8px 10px; padding: 8px 12px; align-items: center; }
body.is-touch-phone #chooseBanner .choose-banner__card{ height: 56px; }
body.is-touch-phone #chooseBanner .choose-banner__info{ flex: 1 1 0; min-width: 55%; }
body.is-touch-phone #chooseBanner .choose-banner__title{ font-size: 14px; line-height: 1.25; }
body.is-touch-phone #chooseBanner .choose-banner__options{ flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px; }
body.is-touch-phone #chooseBanner .choose-banner__place{ flex: 1 1 auto; min-height: 44px; font-weight: 600; }
body.is-touch-phone #chooseBanner .choose-banner__place.is-picked{ border-color: var(--brass-glow); background: rgba(239,217,160,.18); color: var(--brass-glow); }
/* The rune row (paying) makes the drawer 52px taller: the banners sit above it, never over the chips. */
body.is-touch-phone.has-runes #showdownBanner, body.is-touch-phone.has-runes #chainBanner, body.is-touch-phone.has-runes #payBanner,
body.is-touch-phone.has-runes #chooseBanner, body.is-touch-phone.has-runes #playOptionsBanner, body.is-touch-phone.has-runes #assignBanner{ bottom: calc(var(--mb-peek) + 52px + env(safe-area-inset-bottom)); }
body.is-touch-phone.has-runes .chain-banner:not([hidden]) ~ .pay-banner{ bottom: calc(var(--mb-peek) + 148px + env(safe-area-inset-bottom)); }

/* ---- orientation ---- */
body.is-touch-phone.is-landscape{ --mb-peek: 76px; --mb-open: 176px; --mb-thumb: clamp(84px, calc((100dvh - var(--mb-top) - 76px - 8px - 4px - 42px) / 2 - 12px), 120px); }
/* The rows never shrink below a thumbnail's worth: a banner's extra padding (has-banner) makes the field scroll instead.
   The battlefields sit side by side; their base (when shown) and yours each take a full row of their own. */
body.is-touch-phone.is-landscape .mb-field{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(108px, 1fr) minmax(108px, 1fr); }
body.is-touch-phone.is-landscape.has-oppbase .mb-field{ grid-template-rows: auto minmax(96px, 1fr) minmax(96px, 1fr); }
/* Landscape has far less height to spare, so their base is a thinner strip there. */
body.is-touch-phone.is-landscape .mb-band--oppbase{ grid-column: 1 / -1; }
body.is-touch-phone.is-landscape .mb-band--oppbase .mb-band__head{ height: 18px; }
body.is-touch-phone.is-landscape .mb-band--oppbase .mb-band__row{ height: 48px; padding: 2px 6px; }
body.is-touch-phone.is-landscape .mb-band--oppbase .mb-thumb{ max-height: 44px; }
body.is-touch-phone.is-landscape.has-banner .mb-field{ overflow-y: auto; }
body.is-touch-phone.is-landscape .mb-band--bf{ flex: none; }
body.is-touch-phone.is-landscape .mb-band--base{ grid-column: 1 / -1; min-height: 100px; }
body.is-touch-phone.is-landscape .mb-band__row--base{ flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; align-items: center; }
body.is-touch-phone.is-landscape .mb-band__row--base .mb-thumb{ width: auto; height: 100%; max-height: var(--mb-thumb); }
body.is-touch-phone.is-landscape .mb-hand > .mb-card{ width: 64px; }
body.is-touch-phone.is-landscape .mb-drawer.is-open .mb-card{ width: 104px; }
@media (max-height: 360px){
  body.is-touch-phone.is-landscape{ --mb-top: 40px; --mb-peek: 68px; }
  body.is-touch-phone.is-landscape .mb-band--base .mb-band__head{ height: 22px; }
}
@media (min-height: 780px){
  body.is-touch-phone.is-portrait{ --mb-peek: 96px; --mb-bf: 160px; --mb-thumb: 120px; }
}

/* Decision prompts on a phone: the revealed cards a size that fits five across */
body.is-touch-phone .choose-banner__reveal-card{ height:96px; }
body.is-touch-phone .choose-banner__card{ height:72px; }
.mb-runes{ display:inline-flex; align-items:center; gap:2px; }

/* Given keywords on a thumbnail (2026-10-29) */
.mb-thumb__gained{ position:absolute; top:2px; right:2px; display:flex; flex-direction:column; align-items:flex-end; gap:1px; pointer-events:none; z-index:2; }
.mb-thumb__kw{ font-size:7px; font-weight:800; line-height:1.3; padding:0 3px; border-radius:3px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; background:rgba(23,74,99,.95); color:#e8f7ff; border:1px solid #8fd8ff; }
.mb-thumb__kw.is-this-turn{ border-style:dashed; }

/* Might totals at a battlefield, in its header: theirs v yours. */
.mb-band__might{ font: 700 11px/1 var(--font-body); padding:3px 7px; border-radius:99px; background:rgba(8,12,24,.7); color:var(--text-hi, #eef3fb); border:1px solid rgba(255,255,255,.18); font-variant-numeric:tabular-nums; white-space:nowrap; }
.mb-band__might-n--theirs{ color:var(--side-theirs, #f07060); }
.mb-band__might-n--mine{ color:var(--side-mine, #6cb8f0); }