:root {
  --bg: #111318; --panel: #1b1f27; --panel2: #232833; --line: #2c323d;
  --text: #e8e6e3; --muted: #8a8f98;
  --mana: #4aa3ff; --xp: #e0b341; --frenzy: #ff6a3d; --good: #4ec27a; --bad: #e05252;
  --minion: #6aa9ff; --spell: #c77dff; --building: #e0a84a;
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
  /* Hand strip height incl. the bottom safe-area inset; main.ts sets it from the renderer's layout. */
  --strip: 96px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font: 14px/1.3 system-ui, sans-serif; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; overscroll-behavior: none;
}
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#ui, .ui-root { position: fixed; inset: 0; pointer-events: none; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }

/* rotate overlay */
#rotate { position: fixed; inset: 0; z-index: 100; display: none; background: var(--bg); text-align: center;
  flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
#rotate p { margin: 0; font-size: 20px; font-weight: 700; }
#rotate small { color: var(--muted); }
.rot-icon { width: 56px; height: 92px; border: 4px solid var(--xp); border-radius: 10px; animation: rot 2.4s ease-in-out infinite; }
@keyframes rot { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { #rotate { display: flex; } }

/* screens */
.screens { position: absolute; inset: 0; }
.screens.dim { background: rgba(10, 11, 14, 0.78); }
.screen { position: absolute; inset: 0; pointer-events: auto; display: flex;
  padding: calc(10px + var(--st)) calc(14px + var(--sr)) calc(10px + var(--sb)) calc(14px + var(--sl)); }
.screen.title { background: var(--bg); gap: 18px; }
.col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.col.left { flex: 1 1 auto; } .col.right { flex: 0 0 min(320px, 38vw); justify-content: center; }
.logo { margin: 0; font-size: 28px; letter-spacing: 6px; text-transform: lowercase; color: var(--xp); }
.tiles { display: flex; gap: 8px; }
.master-tile { flex: 1; min-width: 0; min-height: 64px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; text-align: left;
  background: var(--panel); border: 2px solid var(--line); border-radius: 10px; cursor: pointer; }
.master-tile.on { border-color: var(--xp); background: var(--panel2); }
.mname { min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glyph { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font-weight: 800; font-size: 12px;
  background: hsl(var(--h) 42% 36%); color: hsl(var(--h) 80% 90%); }
.glyph.big { width: 42px; height: 42px; font-size: 16px; }
.master-info { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-height: 0; }
.mtext { color: var(--muted); margin-bottom: 4px; }
.perks { margin: 0; padding: 0; list-style: none; font-size: 12px; }
.perks li { padding-left: 48px; text-indent: -48px; }
.perks li::before { content: attr(data-n) " xp"; display: inline-block; width: 48px; text-indent: 0; color: var(--xp); }
.perks b { color: var(--xp); }
.deck-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; }
.deck-row { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { display: inline-flex; gap: 4px; align-items: center; padding: 2px 6px; font-size: 12px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--line); }
.chip b { color: var(--mana); }
.chip[data-type=spell] { border-color: var(--spell); } .chip[data-type=building] { border-color: var(--building); }
.label { color: var(--muted); font-size: 12px; }
.seg-ctl { display: flex; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg-btn { flex: 1; min-height: 44px; border: 0; background: var(--panel); text-transform: capitalize; cursor: pointer; }
.seg-btn.on { background: var(--xp); color: #15171c; font-weight: 700; }

.btn { min-height: 44px; min-width: 44px; padding: 0 18px; border: 2px solid var(--line); border-radius: 10px;
  background: var(--panel2); font-weight: 700; cursor: pointer; }
.btn.small { min-height: 44px; padding: 0 14px; }
.btn.primary { background: var(--good); border-color: var(--good); color: #0f1a13; }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn:disabled { opacity: 0.4; }
.btn:active, .seg-btn:active, .master-tile:active { transform: scale(0.97); }
.btn.play { min-height: 56px; font-size: 20px; margin-top: 4px; }
.btn-row { display: flex; gap: 12px; justify-content: center; }

.screen.picker { background: var(--bg); flex-direction: column; gap: 8px; }
.picker-head { display: flex; align-items: center; gap: 10px; }
.ptitle { font-weight: 800; font-size: 18px; margin-right: auto; }
.count { font-weight: 700; color: var(--bad); } .count.ok { color: var(--good); }
.grid { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); align-content: start; }
.grid .card { touch-action: pan-y; cursor: pointer; height: 78px; width: auto; max-width: none; opacity: 0.55; }
.grid .card.in { opacity: 1; border-color: var(--good); }
.copies { position: absolute; right: 3px; top: 22px; padding: 0 4px; border-radius: 6px; background: rgba(15, 26, 19, 0.9);
  border: 1px solid var(--good); font-weight: 800; color: var(--good); font-size: 11px; line-height: 14px; }

/* the end screen sits over a finished board: dim it further so the hand strip does not read as live */
.screen.end { background: rgba(10, 11, 14, 0.55); }
.screen.pause, .screen.end { flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.screen h2 { margin: 0; font-size: 34px; letter-spacing: 3px; text-transform: uppercase; }
.screen.end.win h2 { color: var(--good); } .screen.end.loss h2 { color: var(--bad); } .screen.end.draw h2 { color: var(--xp); }
.time { color: var(--muted); margin-top: -8px; }
.stats { display: grid; grid-template-columns: 1fr 64px 64px; gap: 3px 12px; text-align: right; font-size: 13px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; }
.stats span:nth-child(3n+1) { text-align: left; color: var(--muted); }

/* battle */
.battle { position: absolute; inset: 0; }
.field-catcher { position: absolute; left: 0; right: 0; top: 0; bottom: var(--strip); pointer-events: none; }
.field-catcher.active { pointer-events: auto; }
/* pause, clock and overtime stack in the left margin beside the arena (--mx = arena left edge, set by the UI) */
.hud { position: absolute; top: 0; left: max(var(--sl), calc((var(--mx, 0px) - 44px) / 2)); width: 44px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: calc(4px + var(--st)); pointer-events: none; }
.icon-btn { pointer-events: auto; width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--line);
  background: rgba(27, 31, 39, 0.85); font-weight: 800; cursor: pointer; display: grid; place-items: center; padding: 0; }
.icon-btn svg { width: 20px; height: 20px; fill: var(--text); }
.clock { margin-top: 0; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #000; }
.overtime { margin-top: 0; color: var(--bad); font-weight: 800; font-size: 9px; letter-spacing: 0; white-space: nowrap; animation: blink 1s steps(2) infinite; }
/* wide side margins (phones in landscape): toasts stack in the right margin instead of over the arena */
.battle.margins .toasts { left: auto; right: calc(var(--sr) + 4px); transform: none; align-items: flex-end;
  width: calc(var(--mx) - var(--sr) - 8px); }
.battle.margins .toast { font-size: 12px; padding: 4px 8px; text-align: center; }
.battle.margins.coaching .toasts { top: calc(8px + var(--st)); }
@keyframes blink { 50% { opacity: 0.4; } }
.toasts { position: absolute; left: 50%; top: calc(8px + var(--st)); transform: translateX(-50%); display: flex;
  flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.toast { padding: 6px 14px; border-radius: 8px; background: var(--panel); border: 2px solid var(--line); font-weight: 700;
  animation: toast 2.6s ease both; }
.toast { font-size: 16px; }
.toast.perk { border-color: var(--xp); color: var(--xp); } .toast.frenzy { border-color: var(--frenzy); color: var(--frenzy); }
@keyframes toast { 0% { opacity: 0; transform: translateY(-8px) scale(0.9); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.strip { position: absolute; left: 0; right: 0; bottom: 0; height: var(--strip); pointer-events: auto;
  display: flex; align-items: stretch; gap: 8px; background: var(--panel); border-top: 2px solid var(--line);
  padding: 6px calc(8px + var(--sr)) calc(6px + var(--sb)) calc(8px + var(--sl)); touch-action: none; }
.status { flex: 0 0 clamp(110px, 20vw, 220px); display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.mana-row { display: flex; align-items: baseline; justify-content: space-between; }
.mana-label { color: var(--mana); font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.mana-num { font-size: 26px; font-weight: 800; color: var(--mana); line-height: 1; font-variant-numeric: tabular-nums; }
.mana-bar { display: flex; flex-wrap: wrap-reverse; gap: 2px 3px; }
/* two rows of five 3:1 pips (the art is 66x22): 1-5 on the bottom row, 6-10 above; --f is the fractional fill */
.seg { flex: 0 0 calc((100% - 12px) / 5); aspect-ratio: 3 / 1; background: url(art/ui/mana-pip-empty.svg) 0 0 / 100% 100% no-repeat; }
.seg i { display: block; width: 100%; height: 100%; background: url(art/ui/mana-pip.svg) 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 calc((1 - var(--f, 0)) * 100%) 0 0); transition: clip-path 0.18s ease-out; }
.mana-bar { padding: 2px; margin: -2px; border-radius: 4px; transition: box-shadow 0.2s; }
.mana-bar.full { animation: full 1.1s ease-in-out infinite; }
.mana-bar.full .seg i { filter: brightness(1.4) saturate(0.8); }
@keyframes full { 50% { box-shadow: 0 0 0 2px rgba(124, 192, 255, 0.55), 0 0 10px 2px rgba(124, 192, 255, 0.5); } }
.xp-row { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--xp); font-weight: 700; }
.xp-label { margin-right: auto; }
.pip { width: 10px; height: 10px; border-radius: 3px; border: 2px solid var(--line); }
.pip.on { background: var(--xp); border-color: var(--xp); }
.xp-bar { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.xp-bar i { display: block; height: 100%; background: var(--xp); transform-origin: left; transform: scaleX(0); }
.status.frenzy .xp-bar i { background: var(--frenzy); } .status.frenzy .xp-label { color: var(--frenzy); }

.next-box { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.next-label { font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.hand { flex: 1; display: flex; gap: 8px; min-width: 0; justify-content: center; }

.card { position: relative; flex: 1 1 0; max-width: 130px; min-width: 56px; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 2px; padding: 4px 3px 4px; overflow: hidden;
  background: var(--panel2); border: 2px solid var(--line); border-radius: 10px; touch-action: none; cursor: grab;
  transition: transform 0.12s, opacity 0.12s; }
.card[data-rarity=rare] { border-color: var(--mana); } .card[data-rarity=epic] { border-color: #b06cff; }
.card[data-rarity=legendary] { border-color: #f0b429; } .card.perk { border-color: var(--good); }
.card .glyph { width: 40px; height: 40px; font-size: 15px; margin-bottom: auto; margin-top: 8px; }
.card .name { font-size: 14px; line-height: 1.15; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.card .cost { position: absolute; left: 3px; top: 3px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mana); color: #0b1522; font-weight: 800; font-size: 18px; border: 2px solid #0b1522; }
.card .type { position: absolute; right: 4px; top: 4px; width: 14px; height: 14px; }
.card .type svg { width: 100%; height: 100%; fill: currentColor; }
.type-minion { color: var(--minion); } .type-spell { color: var(--spell); } .type-building { color: var(--building); }
.card.next { flex: none; width: 50px; min-width: 0; height: 62px; opacity: 0.8; cursor: default; padding-top: 2px; }
.card.next .glyph { width: 26px; height: 26px; font-size: 11px; margin-top: 18px; }
.card.next .name { display: none; } .card.next .cost { width: 20px; height: 20px; font-size: 12px; left: 2px; top: 2px; border-width: 1px; }
.card.next .type { display: none; }
.card.poor { opacity: 0.45; filter: saturate(0.3); } .card.poor .cost { background: #35506e; }
.card.selected { transform: translateY(-10px); border-color: var(--xp); opacity: 1; }
.card.ghosting { opacity: 0.35; transform: scale(0.85); }
.card:active:not(.pick):not(.next) { transform: scale(0.96); }
.card.deal { animation: deal 0.3s ease-out; }
@keyframes deal { from { opacity: 0; transform: translateX(-48px) scale(0.8); } }
.card.ready { animation: ready 0.5s ease-out; }
@keyframes ready { 40% { transform: translateY(-6px) scale(1.06); border-color: var(--mana); } }
.card.flyer { position: absolute; z-index: 20; max-width: none; pointer-events: none; transition: none; }
/* below a stack of up to three toasts (perk unlocks often land with the frenzy) */
.banner { position: absolute; left: 0; right: 0; top: 36%; text-align: center; pointer-events: none; font-size: 34px; font-weight: 900;
  letter-spacing: 6px; text-shadow: 0 2px 6px #000; animation: banner 2.2s ease both; }
.banner.frenzy { color: var(--frenzy); }
.banner.frenzy::before, .banner.frenzy::after { content: ""; display: block; height: 3px; width: 160px; margin: 6px auto; background: var(--frenzy); }
@keyframes banner { 0% { opacity: 0; transform: scale(1.6); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.countdown { position: absolute; left: 0; right: 0; top: 24%; text-align: center; pointer-events: none; font-size: 72px; font-weight: 900;
  color: var(--xp); text-shadow: 0 3px 8px #000; }
.countdown.tick { animation: count 0.7s ease-out both; }
@keyframes count { 0% { opacity: 0; transform: scale(1.8); } 25% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(0.9); } }
@media (prefers-reduced-motion: reduce) {
  .card.deal, .card.ready, .banner, .countdown.tick, .mana-bar.full { animation-duration: 0.01s; animation-iteration-count: 1; }
}
.card.shake { animation: shake 0.28s; }
@keyframes shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* short phones (667x375 and below) */
@media (max-height: 400px) {
  .logo { font-size: 22px; letter-spacing: 4px; }
  .screen.title { gap: 12px; }
  .master-tile { min-height: 52px; }
  .btn.play { min-height: 48px; font-size: 18px; }
  .screen h2 { font-size: 28px; }
  .card .glyph { width: 32px; height: 32px; font-size: 13px; margin-top: 6px; }
  .mana-num { font-size: 24px; }
  .countdown { font-size: 56px; }
  .banner { font-size: 26px; }
}
@media (max-width: 700px) {
  .col.right { flex-basis: 40vw; }
  .mname { font-size: 13px; }
}
/* phones: stack the master glyph over its name so three tiles fit beside the deck column */
@media (max-width: 960px) {
  .master-tile { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 4px; text-align: center; }
  .master-tile .glyph.big { width: 30px; height: 30px; font-size: 12px; }
  .mname { max-width: 100%; }
}

/* title extras */
.mattack { font-size: 12px; color: var(--text); margin-bottom: 4px; }
.extras { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.extras .link { color: var(--xp); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  text-decoration: underline; }
.extras .vol { width: 90px; min-height: 44px; accent-color: var(--xp); touch-action: pan-x; }
.btn.mute.on { border-color: var(--bad); color: var(--bad); }
@media (max-width: 700px) {
  .extras { gap: 6px; }
  .extras .label { display: none; }
  .extras .link { padding: 0 2px; }
  .extras .vol { width: 64px; }
  .extras .btn.small { padding: 0 10px; }
}

/* coach marks and card tooltip */
/* one row along the top edge, right of the pause button and clock, clear of the towers and the hand */
.coach { position: absolute; left: calc(56px + var(--sl)); top: calc(4px + var(--st)); width: min(460px, calc(100vw - 72px - var(--sl) - var(--sr)));
  z-index: 15; display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; pointer-events: auto;
  background: rgba(27, 31, 39, 0.94); border: 2px solid var(--xp); border-radius: 10px; font-weight: 700; font-size: 14px;
  line-height: 1.2; animation: coachIn 0.25s ease-out; }
.coach-text { flex: 1 1 auto; min-width: 0; }
.battle.coaching .toasts { top: calc(64px + var(--st)); }
.coach-btn { flex: none; min-height: 44px; min-width: 56px; padding: 0 10px; border: 2px solid var(--xp); border-radius: 10px;
  background: var(--xp); color: #15171c; font-weight: 800; cursor: pointer; }
.coach-btn.skip { background: transparent; color: var(--muted); border-color: var(--line); }
@keyframes coachIn { from { opacity: 0; transform: translateY(-6px); } }
.hand.coach-hl .card { border-color: var(--xp); animation: hl 1.1s ease-in-out infinite; }
@keyframes hl { 50% { transform: translateY(-5px); } }
.tip { position: absolute; z-index: 25; width: 190px; padding: 8px 10px; pointer-events: none; background: var(--panel);
  border: 2px solid var(--xp); border-radius: 10px; font-size: 13px; }
.tip-name { display: block; font-size: 15px; color: var(--xp); }
.tip-text { color: var(--muted); font-size: 12px; margin: 2px 0 4px; }
.tip-grid { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; }
.tip-grid .k { color: var(--muted); } .tip-grid .v { font-weight: 700; text-align: right; }
@media (prefers-reduced-motion: reduce) { .coach, .hand.coach-hl .card { animation: none; } }

/* match history: a one-line chip row on the title, a list screen behind it */
.history-chips { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; color: inherit; font: inherit; }
.history-chips .dots { display: flex; gap: 3px; flex: 1; min-width: 0; }
.history-chips .tally { font-size: 12px; font-weight: 700; white-space: nowrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.dot.win { background: var(--good); } .dot.loss { background: var(--bad); }
.hist-list { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; display: flex; flex-direction: column; gap: 4px; }
.hist-row { display: grid; grid-template-columns: 56px 1fr 64px 52px; gap: 8px; align-items: center; padding: 4px 10px; min-height: 26px;
  background: var(--panel); border-left: 4px solid var(--muted); border-radius: 6px; font-size: 13px; }
.hist-row.win { border-color: var(--good); } .hist-row.loss { border-color: var(--bad); }
.hist-row span:nth-child(3) { text-transform: capitalize; color: var(--muted); }
.hist-row span:last-child { text-align: right; }

/* art (render agent): card illustrations, next-card frame, master portraits, rotate glyph, title wordmark */
.card .art { display: block; flex: 1 1 0; min-height: 0; max-width: 100%; aspect-ratio: 1; object-fit: contain; margin: 2px auto 0;
  pointer-events: none; -webkit-user-drag: none; user-select: none; }
.card.next { width: 51px; height: 68px; padding: 0; border: 0; border-radius: 4px; background: url(art/ui/card-frame-unit.svg) center / 100% 100% no-repeat; }
.card.next[data-type=spell] { background-image: url(art/ui/card-frame-spell.svg); }
.card.next .art { position: absolute; left: 4px; top: 4px; width: 43px; height: 43px; margin: 0; }
.card.next .glyph { position: absolute; left: 9px; top: 9px; margin: 0; }
.card.next .cost { z-index: 1; }
.master-tile .art { width: 48px; height: 48px; flex: none; pointer-events: none; }
@media (max-width: 700px) { .master-tile .art { width: 36px; height: 36px; } }
.rot-icon { width: 160px; height: 160px; border: 0; border-radius: 0; background: url(art/ui/rotate-phone.svg) center / contain no-repeat; animation: none; }
.logo { width: min(260px, 100%); height: 64px; background: url(art/title/wordmark.svg) left center / contain no-repeat;
  color: transparent; font-size: 0; flex: none; }

/* hand frames (art spore): 160x96 9-slice, slice 16 scaled to a 10px border; selected and disabled are overlays */
.card:not(.next) { overflow: visible; border: 10px solid transparent; border-radius: 6px; background-clip: border-box;
  border-image: url(art/ui/hand-frame-unit.svg) 16 / 10px stretch; padding: 0 2px 2px; gap: 1px; }
.card[data-type=spell]:not(.next) { border-image-source: url(art/ui/hand-frame-spell.svg); }
.card:not(.next)[data-rarity=rare] { box-shadow: inset 0 0 0 2px var(--mana); }
.card:not(.next)[data-rarity=epic] { box-shadow: inset 0 0 0 2px #b06cff; }
.card:not(.next)[data-rarity=legendary] { box-shadow: inset 0 0 0 2px #f0b429; }
.card.perk:not(.next) { box-shadow: inset 0 0 0 2px var(--good); }
.grid .card.in { box-shadow: inset 0 0 0 2px var(--good); }
.card:not(.next)::before, .card:not(.next)::after { content: ""; position: absolute; inset: -10px; pointer-events: none; z-index: 3;
  background: 0 0 / 100% 100% no-repeat; display: none; }
.card.selected:not(.next)::before { display: block; background-image: url(art/ui/hand-frame-selected.svg); }
.card.poor:not(.next)::after { display: block; background-image: url(art/ui/hand-frame-disabled.svg); }
.card.poor:not(.next) { opacity: 0.8; filter: saturate(0.5); }
.card:not(.next) .cost { left: -9px; top: -9px; width: 26px; height: 26px; font-size: 16px; z-index: 4; }
.card:not(.next) .type { right: -6px; top: -6px; z-index: 4; }
.card:not(.next) .name { font-size: 13px; }
.card.next { border-image: none; }

/* integration pass (phone screenshots): stacking, coach clearance, bigger hand art, margin toasts */
/* the battle is its own stacking context, so hand cost bubbles (z-index 4) never paint over pause/end screens */
.battle { isolation: isolate; --hx: max(var(--sl), calc((var(--mx, 0px) - 44px) / 2)); }
.card { isolation: isolate; }
/* the coach bar starts right of the HUD column (pause + clock), never over it */
.coach { left: calc(var(--hx) + 50px); width: min(460px, calc(100vw - var(--hx) - 58px - var(--sr))); }
/* hand and deck cards: the art fills the whole frame window, the name sits on a plate across its foot */
.card:not(.next) .art { flex: 1 1 auto; height: 100%; max-height: 100%; width: auto; margin: 0 auto; }
.card:not(.next) .glyph { margin: auto; }
.card:not(.next) .name { position: absolute; left: 0; right: 0; bottom: 2px; z-index: 4; padding: 0 1px 1px;
  background: rgba(15, 17, 22, 0.72); border-radius: 0 0 3px 3px; text-shadow: 0 1px 2px #000; }
@media (max-height: 400px) { .card:not(.next) .name { font-size: 12px; letter-spacing: -0.2px; } }
/* unaffordable: the dark overlay dims the art, but the name stays legible above it */
.card.poor:not(.next) .name { color: var(--muted); }
.grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.grid .card .name { font-size: 12px; }
/* margin toasts: one fixed width that fits the margin, text wraps inside it */
.battle.margins .toasts { align-items: stretch; }
.battle.margins .toast { padding: 4px 2px; font-size: 11px; overflow-wrap: break-word; line-height: 1.2; }
/* the pause menu replaces a running banner (MANA FRENZY would read through PAUSED) */
.battle.paused .banner { visibility: hidden; }

/* faction synergy HUD: compact chips under the clock in the left margin (placeholder look until emblems exist) */
.syn { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; align-items: stretch; width: 44px; }
.syn-chip { display: grid; grid-template-columns: 10px 1fr; grid-template-rows: auto auto; column-gap: 3px; align-items: center;
  padding: 2px 3px; border-radius: 6px; border: 1px solid var(--line); background: rgba(27, 31, 39, 0.8); opacity: 0.7; }
.syn-chip.on { opacity: 1; border-color: var(--fc); }
.syn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fc); }
.syn-n { font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
.syn-pips { grid-column: 1 / -1; display: flex; gap: 2px; margin-top: 1px; }
.syn-pips i { flex: 1; height: 3px; border-radius: 1px; background: rgba(255, 255, 255, 0.18); }
.syn-pips i.full { background: var(--fc); }

/* tilted camera: the arena spans the full width, so the coach bar sits top-right over the enemy half, clear of your
   tower's HP and both of your spawn zones (x 6..17 of 42 = the left 41% of the arena) */
.coach { left: auto; right: calc(6px + var(--sr)); width: min(460px, calc(57vw - 12px - var(--sr))); }