/* ---- Game fonts, bundled so the app looks right offline (were loaded from Google Fonts) ---- */
@font-face { font-family: 'Alegreya Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('../../art/fonts/alegreya-sans-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../art/fonts/alegreya-sans-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../../art/fonts/alegreya-sans-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../../art/fonts/alegreya-sans-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600 900; font-display: swap; src: url('../../art/fonts/cinzel.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


:root {
  --bg: #120b10;
  --felt: #1d1218;
  --panel: #251820;
  --line: #3d2731;
  --ink: #f1e6ea;
  --muted: #a8919b;
  --blood: #c2213f;
  --blood-dim: #7a1528;
  --gold: #e7b552;
  --mana: #4c8dff;
  --atk: #e0a33a;
  --hp: #d23b4f;
  --good: #57c27a;
  --target: #ff4d6d;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at top, #2a1520, var(--bg) 70%); color: var(--ink); min-height: 100vh; }
button {
  font: inherit; color: var(--ink); background: var(--blood); border: 1px solid #e04461; border-radius: 8px;
  padding: 9px 18px; cursor: pointer; transition: transform .1s, background .15s;
}
button:hover:not(:disabled) { background: #d72a4a; transform: translateY(-1px); }
button:disabled { opacity: .4; cursor: default; }
button.ghost { background: transparent; border-color: var(--line); }
button.ghost:hover { background: var(--panel); }

/* ---- Menu / gallery ---- */
.menu, .gallery { max-width: 980px; margin: 0 auto; padding: 48px 16px; }
.menu h1 { font-size: 52px; margin: 0; letter-spacing: 2px; color: var(--blood); text-shadow: 0 0 24px #c2213f66; }
.sub { color: var(--muted); margin-top: 6px; }
.menu-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 36px; }
.factions { display: flex; flex-wrap: wrap; gap: 6px; }
.faction { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--muted); }
.faction.ready { border-color: var(--blood); color: var(--ink); background: #c2213f33; }
.faction.launch { border-color: var(--gold); color: var(--gold); }
.faction[data-faction] { cursor: pointer; }
.faction.picked { border-color: var(--good); color: var(--ink); background: #57c27a33; }
.pick-count { color: var(--muted); font-weight: 400; font-size: 14px; }
.legend { margin-top: 14px; font-size: 13px; color: var(--muted); }
.gallery-head { display: flex; justify-content: space-between; align-items: center; }
.gallery-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }

/* ---- Cards ---- */
.card {
  position: relative; width: 118px; height: 168px; flex: none;
  background: linear-gradient(170deg, #3a2230, #1e1219); border: 2px solid var(--line); border-radius: 10px;
  padding: 22px 7px 6px; display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform .15s, box-shadow .15s, border-color .15s; user-select: none;
}
.card.t-spell { background: linear-gradient(170deg, #2d2140, #17111f); }
.card.t-trap { background: linear-gradient(170deg, #20302a, #111a16); }
.card .cost {
  position: absolute; top: -8px; left: -8px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--mana); display: grid; place-items: center; font-weight: 700; border: 2px solid #9fc1ff;
}
.card .art { font-size: 30px; line-height: 1; }
.card .name { font-weight: 700; font-size: 12px; margin: 4px 0 3px; }
.card .text { font-size: 10.5px; color: #d9c7cf; line-height: 1.25; flex: 1; overflow: hidden; }
.card .stats { width: 100%; display: flex; justify-content: space-between; }
.card .type-tag { width: 100%; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.card.playable { border-color: var(--good); box-shadow: 0 0 12px #57c27a88; cursor: pointer; }
.card.playable:hover { transform: translateY(-14px) scale(1.06); z-index: 5; }
.card.selected { border-color: var(--gold); transform: translateY(-18px) scale(1.08); box-shadow: 0 0 18px #e7b552aa; }
.card.incomplete { opacity: .45; }
.card.back { background: repeating-linear-gradient(45deg, #3a1622, #3a1622 6px, #2b1019 6px, #2b1019 12px); width: 54px; height: 76px; padding: 0; justify-content: center; color: var(--blood); }

.atk, .hp, .armor {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px;
  border: 2px solid #0008; text-shadow: 0 1px 2px #000;
}
.atk { background: var(--atk); }
.hp { background: var(--hp); }
.armor { background: #8a93a3; }
.atk.up, .hp.up { color: #b6ffcb; }
.atk.down, .hp.down { color: #ffd0d6; }

/* ---- Table ---- */
.table { display: grid; grid-template-columns: 1fr 280px; height: 100vh; }
.field { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 6px; min-width: 0; }
.side { background: #0e080cdd; border-left: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px; gap: 10px; min-height: 0; }
.hint { font-size: 13px; color: var(--muted); min-height: 36px; }
.end-turn { font-size: 18px; padding: 14px; background: var(--gold); color: #2a1a00; border-color: #ffd98a; font-weight: 700; }
.end-turn:hover:not(:disabled) { background: #f3c66a; }
.log { flex: 1; overflow-y: auto; font-size: 12px; color: #cbb8c0; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.log div:has(+ div) { border-bottom: 1px solid #ffffff08; }
.side-buttons { display: flex; gap: 8px; }
.side-buttons button { flex: 1; }

.hand { display: flex; justify-content: center; gap: 6px; min-height: 80px; }
.my-hand { min-height: 172px; align-items: flex-end; }
.my-hand .card { margin: 0 -6px; }
.board {
  width: 100%; max-width: 900px; min-height: 112px; display: flex; justify-content: center; align-items: center; gap: 10px;
  background: #ffffff05; border-radius: 14px; padding: 8px;
}
.empty { color: #ffffff20; }
.divider { width: 100%; max-width: 900px; border-top: 1px dashed var(--line); text-align: center; height: 0; }
.divider span { position: relative; top: -10px; background: var(--felt); padding: 2px 12px; border-radius: 999px; font-size: 12px; color: var(--muted); border: 1px solid var(--line); }

.minion {
  position: relative; width: 82px; height: 98px; border-radius: 44% 44% 12px 12px;
  background: linear-gradient(170deg, #4a2a39, #24141c); border: 3px solid #5b3646;
  display: grid; place-items: center; transition: transform .15s, box-shadow .15s, opacity .2s;
}
.minion.fresh { animation: enter .3s ease-out; }
.minion .art { font-size: 34px; margin-top: -10px; }
.minion .atk { position: absolute; bottom: -8px; left: -8px; }
.minion .hp { position: absolute; bottom: -8px; right: -8px; }
.minion .icons { position: absolute; top: -6px; right: 4px; font-size: 13px; font-style: normal; }
.minion .icons i { font-style: normal; }
.minion.taunt { border-color: #b9b9c6; border-width: 5px; border-radius: 14px; }
.minion.stealth { opacity: .55; border-style: dashed; }
.minion.lifesteal { box-shadow: inset 0 0 14px #c2213f88; }
.minion .tip {
  display: none; position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); width: 190px; z-index: 20;
  background: #0d070a; border: 1px solid var(--line); border-radius: 8px; padding: 8px; font-size: 12px; pointer-events: none;
}
.minion:hover .tip { display: block; }

.hero {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 46px 8px 10px;
  background: var(--panel); border: 2px solid var(--line); border-radius: 14px; min-width: 330px; transition: box-shadow .15s;
}
.hero .portrait { font-size: 38px; width: 56px; height: 56px; display: grid; place-items: center; background: #0006; border-radius: 50%; }
.hero-name { font-weight: 700; }
.hero-sub { font-size: 12px; color: var(--muted); }
.hero .hp { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; font-size: 16px; }
.hero .atk { position: absolute; left: -10px; bottom: -10px; }
.hero .armor { position: absolute; right: 10px; top: -8px; }
.mana { display: flex; align-items: center; gap: 3px; margin-top: 4px; }
.gem { width: 11px; height: 11px; transform: rotate(45deg); border: 1px solid var(--mana); background: transparent; }
.gem.full { background: var(--mana); box-shadow: 0 0 6px var(--mana); }
.gem.bonus { border-color: var(--gold); }
.gem.bonus.full { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.mana-num { font-size: 12px; margin-left: 6px; color: #a9c6ff; }

.can-attack { box-shadow: 0 0 0 3px var(--good), 0 0 14px #57c27a; cursor: pointer; }
.targetable { box-shadow: 0 0 0 3px var(--target), 0 0 16px var(--target); cursor: crosshair; }
.minion.targetable:hover, .minion.can-attack:hover { transform: scale(1.07); }
.selected:not(.card) { box-shadow: 0 0 0 3px var(--gold), 0 0 18px var(--gold); transform: translateY(-6px); }

.hit { animation: shake .35s; }
.float { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); font-weight: 900; font-size: 22px; color: #ff5a73; text-shadow: 0 2px 4px #000; animation: rise 1s forwards; pointer-events: none; }
@keyframes shake { 0%, 100% { translate: 0; } 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
@keyframes rise { to { top: -30%; opacity: 0; } }
@keyframes enter { from { transform: scale(.6); opacity: 0; } }

.reaction {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 40;
  background: #1b0f15f2; border: 2px solid var(--gold); border-radius: 14px; padding: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; max-width: 90vw;
}
.overlay { position: fixed; inset: 0; background: #000b; display: grid; place-items: center; z-index: 50; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 36px; text-align: center; }
.flash { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #000d; padding: 8px 16px; border-radius: 8px; opacity: 0; transition: opacity .2s; }
.flash.show { opacity: 1; }

@media (max-width: 860px) {
  .table { grid-template-columns: 1fr; height: auto; }
  .side { border-left: none; border-top: 1px solid var(--line); }
  .log { max-height: 200px; }
  .hero { min-width: 0; width: 100%; }
  .card { width: 92px; height: 140px; }
  .card .text { font-size: 9px; }
  .minion { width: 62px; height: 78px; }
  .minion .art { font-size: 26px; }
  .my-hand { flex-wrap: wrap; }
}

/* ---- Hero Spells, Extinction, Discover, pending cards ---- */
.hero-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hero-extras { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hero-spell { font-size: 13px; padding: 6px 10px; background: #2d2140; border-color: #7b5fb0; }
.hero-spell:hover:not(:disabled) { background: #3d2d58; }
.hero-spell b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--mana); margin-left: 4px; font-size: 12px; }
.hero-spell.selected { box-shadow: 0 0 0 2px var(--gold), 0 0 12px var(--gold); }
.extinction { font-size: 12px; color: #ffb37a; border: 1px solid #7a4a2a; border-radius: 8px; padding: 4px 8px; background: #2a160c; }
.extinction.soon { color: #fff; background: #8a2a0c; border-color: #ff7a3a; animation: pulse 1s infinite alternate; }
@keyframes pulse { to { box-shadow: 0 0 14px #ff7a3a; } }
.pending-tag { position: absolute; top: 4px; right: 4px; font-size: 9px; text-transform: uppercase; background: #000a; padding: 1px 4px; border-radius: 4px; color: var(--gold); }
.card.quick { border-color: #3a7bd5; }
.card.quick.playable { border-color: var(--good); }
.faction.listed { border-color: #6b7a99; color: #b8c4dd; }
.faction small { color: var(--muted); margin-left: 3px; }
.choice-row { display: flex; gap: 14px; justify-content: center; margin-top: 16px; }
.choice-row .card { cursor: pointer; }
.minion.evade { box-shadow: 0 0 0 3px #ffe9a3, 0 0 14px #ffe9a3; }
.gallery h3 { margin-top: 32px; }
.reaction .sub { margin: 0 6px 0 0; }
/* Quick Play countdown */
.countdown { display: inline-grid; place-items: center; min-width: 34px; height: 34px; border-radius: 50%; font-weight: 700;
  background: conic-gradient(var(--gold) var(--left, 100%), #3a2a10 0); color: #1b0f15; }
/* ---- Card art (square source images, cropped by the frame) ---- */
.card.has-art { padding-top: 0; }
.card .art-img { width: calc(100% + 14px); margin: 0 -7px 4px; height: 82px; object-fit: cover; object-position: center 45%;
  border-radius: 8px 8px 4px 4px; border-bottom: 1px solid #0008; display: block; flex: none; }
.card .cost, .card .pending-tag { z-index: 2; }
.card.back .art-img { display: none; }
.minion.has-art { background-size: cover; background-position: center 40%; }
.minion.has-art::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, #000a); }
.minion.has-art .atk, .minion.has-art .hp, .minion.has-art .icons { z-index: 1; }
.hs-img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
/* ---- Bigger cards: square art shown in full ---- */
.table { height: auto; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; }
.card { width: 160px; height: 264px; padding: 0 8px 8px; }
.card .art, .card .art-img {
  width: calc(100% + 16px); margin: 0 -8px 6px; aspect-ratio: 1 / 1; height: auto; flex: none;
  border-radius: 8px 8px 4px 4px; border-bottom: 1px solid #0008;
}
.card .art { display: grid; place-items: center; font-size: 60px; background: #0003; }
.card .art-img { object-fit: cover; object-position: center; }
.card .name { font-size: 13px; margin: 0 0 3px; }
.card .text { font-size: 11px; }
.card .cost { top: -8px; left: -8px; width: 32px; height: 32px; font-size: 16px; }
.card.playable:hover { transform: translateY(-34px) scale(1.12); }
.card.selected { transform: translateY(-38px) scale(1.12); }
.my-hand { min-height: 280px; align-items: flex-end; width: 100%; gap: 0; }
.my-hand .card { margin: 0 0 0 var(--overlap, -12px); }
.my-hand .card:first-child { margin-left: 0; }
.my-hand .card:hover { z-index: 6; }
.choice-row .card, .gallery-grid .card { margin: 0; }

.minion { width: 108px; height: 132px; border-radius: 12px; place-items: start center; }
.minion .art { font-size: 48px; margin: 22px 0 0; }
.minion.has-art { background-size: 100% auto; background-position: center top; background-repeat: no-repeat; background-color: #1d1218; }
.minion.has-art::after { background: linear-gradient(180deg, transparent 70%, #000c 85%); }
.minion.taunt { border-color: #c9c9d6; border-width: 4px; border-radius: 12px; }
.minion .atk, .minion .hp { width: 30px; height: 30px; font-size: 15px; }
.board { min-height: 148px; }

@media (max-width: 860px) {
  .card { width: 112px; height: 196px; }
  .card .text { font-size: 9px; }
  .minion { width: 76px; height: 94px; }
  .my-hand { min-height: 210px; }
}
/* ---- Collection: bigger cards + full-card zoom ---- */
.gallery { max-width: 1400px; }
.gallery-grid { gap: 18px; }
.gallery-grid .card { width: 190px; height: 312px; cursor: zoom-in; }
.gallery-grid .card .name { font-size: 14px; }
.gallery-grid .card .text { font-size: 12px; }
.gallery-grid .card:hover { transform: translateY(-6px); box-shadow: 0 10px 24px #000a; }

.zoom-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(8, 5, 7, 0.92);
  display: grid; place-items: safe center; padding: 2vh 16px; cursor: zoom-out;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.zoom-mnav { display: none; }
.zoom-artbtn { align-self: stretch; padding: 8px 12px; }
.art-view { position: fixed; inset: 0; z-index: 70; background: #000f; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 16px; cursor: zoom-out; }
.art-view img { max-width: 100%; max-height: calc(100% - 48px); object-fit: contain; border-radius: 10px; box-shadow: 0 10px 40px #000; }
.art-view-cap { font-family: var(--font-title); font-weight: 700; text-align: center; }
.zoom-wrap { display: flex; align-items: center; gap: 18px; cursor: default; max-width: 100%; }

/* The card is sized from one length (--h); everything inside scales with it via em. */
.big-card {
  --h: min(88vh, 118vw);
  --frame: #6b4a58; --frame-hi: #a07a8a; --body: #2a1820;
  position: relative; flex: none; height: var(--h); width: calc(var(--h) * 0.72);
  font-size: calc(var(--h) / 40);
  border-radius: 1.6em; padding: 0;
  background:
    radial-gradient(120% 60% at 50% 0%, #ffffff12, transparent 60%),
    linear-gradient(170deg, var(--frame-hi), var(--frame) 40%, var(--body));
  border: 0.35em solid var(--frame);
  box-shadow: 0 0 0 0.15em #000a, inset 0 0 0 0.2em #ffffff18, 0 2em 5em #000c;
  color: var(--ink);
}
.big-card.f-vampires { --frame: #7a1a2c; --frame-hi: #c0384f; --body: #2a0d14; }
.big-card.f-dinosaurs { --frame: #7a5a2a; --frame-hi: #c99a52; --body: #2a1d0d; }
.big-card.f-plants { --frame: #2f5a2a; --frame-hi: #6fae58; --body: #13230f; }
.big-card.f-aliens { --frame: #1f5a5f; --frame-hi: #4fb8c0; --body: #0d2224; }
.big-card.t-spell { border-radius: 1.2em; }
.big-card.t-trap { border-style: double; border-width: 0.5em; }
.big-card.is-pending .bc-art { filter: grayscale(.7) brightness(.8); }

/* Square art window, shown whole: arched top for minions, rounded for others. */
.bc-art {
  position: absolute; left: 50%; top: 2.2em; transform: translateX(-50%);
  width: 24em; height: 24em; overflow: hidden; background: #0007;
  border-radius: 1.4em; border: 0.3em solid var(--frame-hi);
  box-shadow: 0 0 0 0.15em #000a, 0 0.6em 1.4em #000a;
}
.t-minion .bc-art { border-radius: 12em 12em 1.4em 1.4em; }
.bc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-art span { display: grid; place-items: center; height: 100%; font-size: 10em; }

.bc-banner {
  position: absolute; left: 50%; top: 25em; transform: translateX(-50%);
  width: 26em; padding: 0.55em 1em; text-align: center;
  background: linear-gradient(180deg, #efe2c6, #c9b48c); color: #2a1a10;
  border: 0.15em solid #6a5434; border-radius: 0.5em;
  box-shadow: 0 0.4em 0.9em #000a; clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
}
.bc-banner span { font-size: 1.55em; font-weight: 800; letter-spacing: 0.02em; text-shadow: 0 1px 0 #fff8; }

.bc-text {
  position: absolute; left: 50%; top: 29.2em; transform: translateX(-50%);
  width: 23em; height: 6.4em; padding: 0.6em 1em; display: grid; place-items: center; text-align: center;
  background: #f1e7d3; color: #2a1a10; border-radius: 0.6em; border: 0.15em solid #8a7350;
  font-size: 1em; line-height: 1.3; overflow: hidden;
}
.bc-text b { color: #000; }

.bc-type {
  position: absolute; left: 50%; bottom: 0.9em; transform: translateX(-50%);
  padding: 0.25em 1em; border-radius: 1em; background: #000a; border: 0.12em solid var(--frame-hi);
  font-size: 0.95em; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
}
.bc-token { position: absolute; top: 1.4em; right: 1.4em; font-size: 0.9em; padding: 0.2em 0.7em; border-radius: 1em; background: #000a; color: var(--gold); }

.bc-gem {
  position: absolute; width: 3.6em; height: 3.6em; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.3em; font-weight: 900; color: #fff; text-shadow: 0 0.08em 0.2em #000, 0 0 0.1em #000;
  border: 0.18em solid #0009; box-shadow: 0 0.3em 0.8em #000a, inset 0 0.3em 0.6em #fff5;
}
.bc-gem { font-size: 2em; width: 1.9em; height: 1.9em; }
.bc-cost { top: -0.3em; left: -0.3em; background: radial-gradient(circle at 35% 30%, #9fc6ff, #2f6fe0 60%, #1b3f8a); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border: none; width: 2.2em; height: 2.2em; }
.bc-atk { bottom: -0.25em; left: -0.25em; background: radial-gradient(circle at 35% 30%, #ffe08a, #e0a33a 60%, #8a5a12); }
.bc-hp { bottom: -0.25em; right: -0.25em; background: radial-gradient(circle at 35% 30%, #ff8a9a, #d23b4f 60%, #7a1424); border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; }

.zoom-side { position: relative; width: 280px; max-height: var(--h, 88vh); overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: 14px; background: linear-gradient(180deg, #1d151a, #120c10); border: 1px solid #c9a96e55;
  box-shadow: 0 18px 40px #000a, inset 0 1px 0 #ffffff12; }
.zoom-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #c9a96e33; }
.zoom-faction { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-family: var(--font-title); font-weight: 700; font-size: 17px;
  color: #f1e3c4; letter-spacing: 0.02em; }
.zoom-faction .crest { width: 28px; height: 28px; }
.zoom-count { font-size: 13px; color: #b9a58a; font-variant-numeric: tabular-nums; }
.zoom-close { padding: 2px 10px; font-size: 14px; }
.zoom-kind { font-size: 13px; color: #b9a58a; letter-spacing: 0.06em; text-transform: uppercase; }
.zoom-sub { margin-top: 4px; font-family: var(--font-title); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #8f7d66; }
.zoom-term { font-size: 14px; line-height: 1.4; color: #e6d6dd; background: #ffffff08; border: 1px solid #c9a96e2e; border-left: 3px solid var(--gold);
  border-radius: 8px; padding: 9px 12px; }
.zoom-term b { display: block; color: var(--gold); margin-bottom: 3px; font-size: 13px; letter-spacing: 0.04em; }
.zoom-term.pending { border-color: var(--gold); }

/* Foil on the zoomed card: a glint sweeps across when it opens / pages, then follows the mouse. */
.zoom-foil { position: absolute; inset: 0; z-index: 20; pointer-events: none; border-radius: inherit; mix-blend-mode: screen; opacity: 0;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), #ffffff2a, transparent 45%),
    linear-gradient(105deg, transparent 43%, #ffffff66 48.5%, #fff0c855 51%, #bfe8ff33 53.5%, transparent 57%) var(--fx, 50%) 0 / 260% 100% no-repeat;
  transition: opacity 0.35s ease; }
.big-card.foil-lit .zoom-foil { opacity: 0.85; }
.big-card.foil-sweep .zoom-foil { animation: foil-sweep 1.3s 0.2s ease-in-out; }
@keyframes foil-sweep {
  0% { opacity: 0; background-position: 0 0, 100% 0; }
  20% { opacity: 0.95; }
  80% { opacity: 0.95; }
  100% { opacity: 0; background-position: 0 0, 0% 0; }
}
@media (prefers-reduced-motion: reduce) { .big-card.foil-sweep .zoom-foil { animation: none; } }
.zoom-arrow { font-size: 40px; line-height: 1; padding: 6px 14px 12px; background: #0008; border-color: var(--line); flex: none; }
.zoom-arrow:hover:not(:disabled) { background: #1b0f15; }

@media (max-width: 860px) {
  .zoom-wrap { flex-direction: column; gap: 10px; }
  .big-card { --h: min(78vh, 125vw); }
  .zoom-overlay { place-items: start center; padding: 10px 16px 28px; }
  .zoom-side { width: min(92vw, 420px); max-height: none; overflow: visible; }
  .zoom-close, .zoom-count { display: none; }
  .zoom-arrow { display: none; }
  .zoom-mnav { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: min(92vw, 420px);
    position: sticky; top: 0; z-index: 3; padding: 6px 0; background: #000d; }
  .zoom-mnav button { padding: 8px 12px; min-height: 40px; }
  .zoom-mnav .sub { flex: 1; text-align: center; }
  .zoom-mnav button:disabled { opacity: 0.35; }
  .gallery-grid .card { width: 150px; height: 250px; }
}
/* ---- Typography: Cinzel for names/titles/numbers, Alegreya Sans for text ---- */
:root { --font-title: 'Cinzel', 'Trajan Pro', Georgia, serif; --font-body: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif; font-family: var(--font-body); }
body, button { font-family: var(--font-body); }
h1, h2, h3, .card .name, .bc-banner span, .hero-name, .end-turn, .divider span, .zoom-faction, .zoom-term b, .reaction b,
.menu-buttons button, .hero-spell, .bc-type, .type-tag { font-family: var(--font-title); }
.menu h1 { font-weight: 900; letter-spacing: 0.06em; }
.card .name { font-weight: 700; letter-spacing: 0.01em; }
.card .text, .bc-text { font-family: var(--font-body); }
.card .text { font-size: 12px; line-height: 1.2; }
.bc-text span { font-size: 1.15em; line-height: 1.25; }
.bc-banner span { font-weight: 900; letter-spacing: 0.03em; }
.cost, .atk, .hp, .armor, .bc-gem, .zoom-cost, .mana-num, .countdown { font-family: var(--font-title); font-weight: 900; }
.log { font-size: 13px; }
/* ---- Bigger description text (auto-fit shrinks long text, see fitText in main.js) ---- */
.card .text { font-size: 14px; line-height: 1.15; }
.gallery-grid .card .text { font-size: 15px; }
.bc-text { top: 28.7em; height: 7.6em; padding: 0.5em 0.9em; }
.bc-text span { font-size: 1.45em; line-height: 1.22; }
@media (max-width: 860px) { .card .text { font-size: 11px; } }
/* Taller cards: full square art on top AND room for readable text below. */
.card { height: 300px; }
.my-hand { min-height: 316px; }
.gallery-grid .card { height: 352px; }
@media (max-width: 860px) {
  .card { width: 124px; height: 250px; }
  .card .text { font-size: 12px; }
  .my-hand { min-height: 262px; }
  .gallery-grid .card { width: 150px; height: 290px; }
}
.big-card, .card, .minion { user-select: none; -webkit-user-select: none; }

.card .cost.cheaper { background: var(--good); border-color: #b6ffcb; }
.card .cost.pricier { background: var(--blood); border-color: #ff9aa9; }

/* ---- Deck builder ---- */
.deck-line { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.deck-line > div { flex: 1; min-width: 220px; }
.builder-bar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 14px 0; background: linear-gradient(180deg, var(--bg) 85%, transparent); }
.builder-bar > div:first-child { flex: 1; min-width: 260px; }
.builder-bar h2 { margin: 0; }
.builder-count { font-size: 20px; text-align: center; padding: 6px 16px; border-radius: 12px; border: 2px solid var(--line); }
.builder-count b { font-size: 28px; color: var(--gold); }
.builder-count .sub { display: block; font-size: 12px; margin: 0; }
.builder-count.done { border-color: var(--good); }
.builder-count.done b { color: var(--good); }
.builder-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.builder-grid .card { cursor: pointer; }
.card.cut { opacity: 0.35; filter: grayscale(0.8); transform: scale(0.96); }
.card.cut:hover { opacity: 0.6; }
.cut-tag { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); z-index: 3;
  font-family: var(--font-title); font-weight: 900; font-size: 26px; color: #ff5a73; border: 3px solid #ff5a73;
  padding: 2px 12px; border-radius: 8px; background: #000a; letter-spacing: 0.1em; }
.card-zoom { position: absolute; top: 4px; right: 4px; z-index: 3; padding: 2px 6px; font-size: 14px; background: #000a; border-color: #ffffff30; }
.card.cut .card-zoom { opacity: 1; }
/* Big-card name: always one line; fitWidth() shrinks long names. */
.bc-banner span { display: block; white-space: nowrap; overflow: hidden; }

/* ---- Mulligan ---- */
.panel.mulligan { max-width: min(96vw, 900px); }
.panel.mulligan .choice-row { flex-wrap: wrap; }
.mull-slot { cursor: pointer; }
.mull-confirm { margin-top: 18px; font-size: 18px; padding: 12px 28px; }
/* =====================================================================
   BATTLE SCREEN (Hearthstone-style table). Scoped to .arena / fx layers.
   ===================================================================== */
body.in-game { overflow: hidden; }
.arena {
  --card-w: clamp(92px, 8.6cqw, 150px);
  --minion-w: clamp(70px, 7.6cqw, 128px);
  --hero: clamp(74px, 11.5cqh, 132px);
  --felt: #3b2230; --felt-2: #1a0d13; --rim: #6b4a58;
  position: fixed; inset: 0; overflow: hidden; user-select: none; touch-action: none;
  background: radial-gradient(ellipse at 50% 45%, #2a1a22 0%, #120a0f 75%);
}
.arena.f-vampires { --felt: #4a1a24; --felt-2: #1b0a0e; --rim: #8a2a3c; }
.arena.f-dinosaurs { --felt: #4a3a1e; --felt-2: #1c150a; --rim: #9a7a3e; }
.arena.f-plants { --felt: #24401f; --felt-2: #0d180b; --rim: #4f8a3e; }
.arena.f-aliens { --felt: #1b3c40; --felt-2: #091719; --rim: #3a8a92; }
.table-oval {
  position: absolute; left: 7cqw; right: 10cqw; top: 15cqh; bottom: 24cqh; border-radius: 50% / 42%;
  background: radial-gradient(ellipse at 50% 50%, var(--felt) 0%, var(--felt-2) 80%);
  box-shadow: inset 0 0 0 3px var(--rim), inset 0 0 60px #000a, 0 0 40px #0008;
}
.midline { position: absolute; left: 14cqw; right: 17cqw; top: 48.5cqh; height: 1px; background: linear-gradient(90deg, transparent, #ffffff22, transparent); }

/* Boards */
.arena .board {
  position: absolute; left: 10cqw; right: 13cqw; width: auto; height: calc(var(--minion-w) * 1.22); max-width: none; min-height: 0;
  background: none; padding: 0; display: flex; justify-content: center; align-items: center; gap: 0.9cqw;
}
.arena .board.opp { top: 25cqh; }
.arena .board.me { top: 52cqh; }
.arena .minion { width: var(--minion-w); height: calc(var(--minion-w) * 1.22); flex: none; animation: none; }
.arena .minion .atk, .arena .minion .hp { width: calc(var(--minion-w) * 0.3); height: calc(var(--minion-w) * 0.3); font-size: calc(var(--minion-w) * 0.15); }
.arena .minion .icons { font-size: calc(var(--minion-w) * 0.13); }
.slot-gap { width: var(--minion-w); height: calc(var(--minion-w) * 1.22); border: 2px dashed var(--gold); border-radius: 12px; flex: none;
  background: #e7b55218; animation: gap-pulse 0.8s infinite alternate; }
@keyframes gap-pulse { to { background: #e7b55240; } }

/* Heroes */
.hero-zone { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1.2cqw; }
.hero-zone.opp { top: 3cqh; }
.hero-zone.me { top: 66cqh; }
.hero-portrait { position: relative; width: var(--hero); height: var(--hero); border-radius: 50% 50% 46% 46%; cursor: default;
  box-shadow: 0 0 0 4px #c9a35a, 0 0 0 7px #3a2a14, 0 10px 24px #000c; background: #000; transition: box-shadow 0.15s; }
.portrait-img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; border-radius: inherit; display: block; }
.portrait-placeholder { width: 100%; height: 100%; border-radius: inherit; display: grid; place-items: center; font-size: calc(var(--hero) * 0.45);
  background: radial-gradient(circle at 50% 35%, var(--rim), #0a0508); }
.hero-name { position: absolute; left: 50%; bottom: -1.6em; transform: translateX(-50%); font-family: var(--font-title); font-weight: 700;
  font-size: 13px; white-space: nowrap; color: #e8d6b0; text-shadow: 0 1px 3px #000; }
.hero-zone.opp .hero-name { bottom: auto; top: -1.4em; }
.hero-portrait .hp { position: absolute; right: -8%; bottom: -4%; width: 38%; height: 38%; font-size: calc(var(--hero) * 0.18); }
.hero-portrait .atk { position: absolute; left: -8%; bottom: -4%; width: 34%; height: 34%; font-size: calc(var(--hero) * 0.16); }
.hero-portrait .armor { position: absolute; right: -6%; top: 30%; width: 30%; height: 30%; font-size: calc(var(--hero) * 0.14); border-radius: 30%; }
.hero-powers { display: flex; align-items: center; gap: 0.8cqw; min-width: calc(var(--hero) * 0.7); }
.hero-spell { position: relative; width: calc(var(--hero) * 0.66); height: calc(var(--hero) * 0.66); border-radius: 50%; padding: 0; overflow: visible;
  background: #1b0f15; border: 3px solid #6a5434; cursor: pointer; box-shadow: 0 6px 14px #000a; }
.hero-spell img, .hero-spell > span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: calc(var(--hero) * 0.3); }
.hero-spell.usable { border-color: var(--good); box-shadow: 0 0 0 2px var(--good), 0 0 16px var(--good); }
.hero-spell:disabled { opacity: 1; cursor: default; }
.hero-spell:disabled img { filter: grayscale(0.7) brightness(0.6); }
.hero-spell:hover:not(:disabled) { transform: scale(1.07); background: #1b0f15; }
.hs-cost { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mana); border: 2px solid #9fc1ff; font-family: var(--font-title); font-size: 14px; }
.extinction-badge { position: relative; width: calc(var(--hero) * 0.5); height: calc(var(--hero) * 0.5); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #5a240c, #1a0a04); border: 3px solid #ff7a3a; font-size: calc(var(--hero) * 0.18); }
.extinction-badge b { position: absolute; bottom: -6px; right: -6px; background: #ff7a3a; color: #1a0a04; border-radius: 50%; width: 22px; height: 22px;
  display: grid; place-items: center; font-family: var(--font-title); font-size: 13px; }
.extinction-badge.soon { animation: pulse 0.8s infinite alternate; }
.freeze-badge { position: relative; width: calc(var(--hero) * 0.5); height: calc(var(--hero) * 0.5); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #2c5a78, #08182a); border: 3px solid #9fe0ff; font-size: calc(var(--hero) * 0.18); color: #e8f8ff; }
.freeze-badge b { position: absolute; bottom: -6px; right: -6px; background: #9fe0ff; color: #08182a; border-radius: 50%; width: 22px; height: 22px;
  display: grid; place-items: center; font-family: var(--font-title); font-size: 13px; }
.freeze-badge.soon { animation: pulse 0.8s infinite alternate; }
.traps { display: flex; gap: 4px; min-width: calc(var(--hero) * 0.7); justify-content: flex-end; }
.trap-token { width: 24px; height: 28px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, #7a3ab8, #2a0d40); color: #e9d2ff; font-family: var(--font-title); font-weight: 900; font-size: 13px; }

/* Hands */
.arena .my-hand { position: absolute; left: 8cqw; right: 11cqw; bottom: 0; height: calc(var(--card-w) * 1.95); min-height: 0; z-index: 30; }
.arena .my-hand .card, .arena .opp-hand .card {
  position: absolute; left: 50%; bottom: 0; margin: 0; transform-origin: 50% 120%;
  transform: translate(calc(-50% + var(--x, 0px)), calc(26% + var(--y, 0px))) rotate(var(--rot, 0deg));
  transition: transform 0.18s ease, box-shadow 0.18s;
}
.arena .my-hand .card { width: var(--card-w); height: calc(var(--card-w) * 1.9); padding: 0 6px 6px; cursor: grab; }
.arena .my-hand .card .name { font-size: calc(var(--card-w) * 0.085); }
.arena .my-hand .card .text { font-size: calc(var(--card-w) * 0.08); }
.arena .my-hand .card:hover:not(.drag-src) { transform: translate(calc(-50% + var(--x, 0px)), -6%) rotate(0deg) scale(1.28); z-index: 200 !important; }
.arena .my-hand .card.playable { box-shadow: 0 0 0 2px var(--good), 0 0 14px var(--good); }
.arena .my-hand .card.drag-src { visibility: hidden; }
.arena .opp-hand { position: absolute; left: 25cqw; right: 25cqw; top: 0; height: calc(var(--card-w) * 0.9); z-index: 5; }
/* The hand containers span wide strips; only the cards themselves take clicks, so heroes underneath stay targetable. */
.arena .opp-hand, .arena .my-hand { pointer-events: none; }
.arena .my-hand .card { pointer-events: auto; }
.arena .opp-hand .card.back { width: calc(var(--card-w) * 0.6); height: calc(var(--card-w) * 0.88); top: 0; bottom: auto;
  transform-origin: 50% -20%; transform: translate(calc(-50% + var(--x, 0px)), calc(-55% - var(--y, 0px))) rotate(calc(var(--rot, 0deg) * -1)); }

/* Mana */
.mana-bar { position: absolute; right: 10.5cqw; display: flex; align-items: center; gap: 10px; z-index: 25; }
.mana-bar.me { top: 81cqh; }
.mana-bar.opp { top: 3.5cqh; }
.mana-text { font-family: var(--font-title); font-size: 20px; color: #bcd6ff; text-shadow: 0 0 8px #4c8dff; min-width: 3.2em; text-align: right; }
.mana-text small { display: block; font-size: 11px; color: var(--gold); }
.crystals { display: flex; gap: 6px; }
.crystal { width: 14px; height: 14px; transform: rotate(45deg); border-radius: 3px; border: 1.5px solid #2e4f86; background: #0b1426; transition: background 0.25s, box-shadow 0.25s; }
.crystal.full { background: radial-gradient(circle at 30% 30%, #cfe3ff, #3d7cff 55%, #1b3f8a); border-color: #9fc1ff; box-shadow: 0 0 10px #4c8dff; }
.crystal.bonus { background: radial-gradient(circle at 30% 30%, #fff1c4, #e7b552 55%, #8a5a12); border-color: #ffe08a; box-shadow: 0 0 10px #e7b552; }
.crystal.spent { background: #1a2740; border-color: #3a5a92; }
.crystal.locked { opacity: 0.25; }
.mana-bar.opp .crystal { width: 10px; height: 10px; }
.mana-bar.opp .mana-text { font-size: 15px; }

/* Right rail: decks + End Turn */
.rail { position: absolute; right: 1.2cqw; top: 14cqh; bottom: 24cqh; width: 8.5cqw; display: flex; flex-direction: column; align-items: center; justify-content: space-between; z-index: 20; }
.deck-pile { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--font-title); color: #d9c7cf; }
.deck-pile .pile { position: relative; width: calc(var(--card-w) * 0.5); height: calc(var(--card-w) * 0.7); }
.deck-pile .pile span { position: absolute; inset: 0; border-radius: 6px; border: 1px solid #000;
  background: repeating-linear-gradient(45deg, #3a1622, #3a1622 5px, #2b1019 5px, #2b1019 10px); }
.deck-pile .pile span:nth-child(2) { transform: translate(-3px, -3px); }
.deck-pile .pile span:nth-child(3) { transform: translate(-6px, -6px); }
.end-turn { width: 100%; padding: 14px 6px; border-radius: 40px / 24px; font-family: var(--font-title); font-weight: 900; font-size: clamp(12px, 1.2cqw, 18px);
  letter-spacing: 0.05em; text-transform: uppercase; border: 3px solid #5a4a2a; }
.end-turn.has-moves { background: linear-gradient(#f3cf6a, #b8862a); color: #2a1a00; border-color: #ffe39a; }
.end-turn.done { background: linear-gradient(#7be09a, #2f9a55); color: #06240f; border-color: #b6ffcb; animation: end-glow 1s infinite alternate; }
.end-turn.enemy { background: #2a2228; color: #8a7a80; border-color: #3a3036; }
@keyframes end-glow { to { box-shadow: 0 0 22px #57c27a; } }

/* Corner buttons + log drawer */
.corner-buttons { position: absolute; left: 0.6cqw; bottom: 1cqh; display: flex; flex-direction: column; gap: 6px; z-index: 40; }
.corner-buttons button { width: 40px; height: 40px; padding: 0; font-size: 18px; border-radius: 10px; }
.log-drawer { position: absolute; left: 0; top: 0; bottom: 0; width: 300px; transform: translateX(-100%); transition: transform 0.25s; z-index: 45;
  background: #0e080cf2; border-right: 1px solid var(--line); padding: 14px 14px 70px; display: flex; flex-direction: column; }
.log-drawer.open { transform: none; }
.log-drawer h3 { margin: 0 0 10px; }
.log-drawer .log { flex: 1; overflow-y: auto; font-size: 13px; }

/* Play history strip */
.history { position: absolute; left: 0.6cqw; top: 12cqh; bottom: 30cqh; width: clamp(40px, 4cqw, 62px); display: flex; flex-direction: column-reverse;
  gap: 6px; overflow: hidden; z-index: 20; }
.history-item { position: relative; width: 100%; aspect-ratio: 1; flex: none; border-radius: 10px; overflow: hidden; border: 2px solid #4c8dff;
  background: #1b0f15; display: grid; place-items: center; font-size: 22px; animation: hist-in 0.4s ease-out; }
.history-item.theirs { border-color: #e04461; }
.history-item img { width: 100%; height: 100%; object-fit: cover; }
.history-item i { position: absolute; right: 2px; bottom: 0; font-style: normal; font-size: 14px; text-shadow: 0 0 4px #000; }
@keyframes hist-in { from { transform: translateX(-120%); opacity: 0; } }

/* Interaction states */
.arena .can-attack { box-shadow: 0 0 0 3px var(--good), 0 0 16px var(--good); cursor: grab; }
.arena.aiming .can-attack { box-shadow: none; }
.arena .targetable { box-shadow: 0 0 0 3px var(--target), 0 0 20px var(--target) !important; cursor: crosshair; }
.arena .minion.targetable, .arena .hero-portrait.targetable { animation: target-pulse 0.7s infinite alternate; }
@keyframes target-pulse { to { filter: brightness(1.25); } }

/* Reaction / overlays inside the arena */
.arena .reaction { z-index: 80; }
.arena .overlay { z-index: 90; }
.game-over h2 { font-size: 48px; margin: 0 0 6px; }

/* Effects layer */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1000; }
.fx-ghost { pointer-events: none; }
.fx-ghost.dragging { transition: transform 0.12s; transform: rotate(4deg) scale(1.05) !important; box-shadow: 0 20px 40px #000c; }
.fx-ghost.dragging.lifted { transform: rotate(0deg) scale(0.75) !important; }
.fx-ghost.aiming-card { transform: scale(0.65) !important; opacity: 0.9; }
.fx-float { position: fixed; font-family: var(--font-title); font-weight: 900; font-size: clamp(28px, 3cqw, 48px);
  -webkit-text-stroke: 2px #000; text-shadow: 0 3px 8px #000; transform: translate(-50%, -50%); }
.fx-float.damage { color: #ff4d5e; }
.fx-float.heal { color: #6dff9a; }
.fx-burst { position: fixed; border-radius: 50%; border: 4px solid #ffe39a; box-shadow: 0 0 24px #ffe39a, inset 0 0 24px #ffe39a; }
.fx-burst.heal { border-color: #6dff9a; box-shadow: 0 0 24px #6dff9a, inset 0 0 24px #6dff9a; }
.fx-banner { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); padding: 18px 70px; white-space: nowrap;
  background: linear-gradient(90deg, transparent, #000c 15%, #000c 85%, transparent); }
.fx-banner span { font-family: var(--font-title); font-weight: 900; font-size: clamp(30px, 5cqw, 72px); letter-spacing: 0.06em;
  background: linear-gradient(#fff3c4, #e7b552 60%, #8a5a12); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 6px #000); }
.fx-banner.theirs span { background: linear-gradient(#ffd0d6, #e04461 60%, #7a1528); -webkit-background-clip: text; background-clip: text; }
.fx-banner.great-freeze span { background: linear-gradient(#ffffff, #9fe0ff 55%, #2c6a9a); -webkit-background-clip: text; background-clip: text; }
.fx-gf-tint { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(170, 215, 245, 0.16), rgba(70, 120, 170, 0.42)); mix-blend-mode: multiply; }
.fx-gf-frost { position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(215, 240, 255, 0.35) 72%, rgba(240, 250, 255, 0.85) 100%);
  box-shadow: inset 0 0 60px 18px rgba(235, 248, 255, 0.75), inset 0 0 160px 40px rgba(160, 215, 250, 0.35); }
@media (max-width: 600px) {
  .fx-gf-frost { background: radial-gradient(ellipse at center, transparent 66%, rgba(215, 240, 255, 0.3) 84%, rgba(240, 250, 255, 0.75) 100%);
    box-shadow: inset 0 0 30px 8px rgba(235, 248, 255, 0.7), inset 0 0 80px 20px rgba(160, 215, 250, 0.3); }
}
.fx-gf-ferns { position: fixed; inset: 0; overflow: visible; }
.fx-gf-ferns path { fill: none; stroke: #f2fbff; stroke-linecap: round; opacity: 0.85; filter: drop-shadow(0 0 3px #9fe0ff); }
.fx-gf-flake { position: fixed; border-radius: 50%; background: radial-gradient(circle, #fff 0 40%, rgba(230, 248, 255, 0.6) 60%, transparent 72%); box-shadow: 0 0 6px rgba(200, 240, 255, 0.8); }
/* Caught by The Great Freeze: the ice waits for the freezing wave. */
.gf-pending .m-ice { display: none !important; }
.minion.gf-pending .m-art { filter: none !important; }
.gf-pending .st-frozen { visibility: hidden; }
.fx-banner.extinction span { background: linear-gradient(#fff1c4, #ff7a3a 55%, #7a1a04); -webkit-background-clip: text; background-clip: text; }
.fx-banner.trap span { font-size: clamp(22px, 3.2cqw, 44px); background: linear-gradient(#f2e2ff, #a46bff 60%, #3a1066); -webkit-background-clip: text; background-clip: text; }
.fx-flash { position: fixed; inset: 0; mix-blend-mode: screen; }
.fx-reveal { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); }
.fx-reveal .big-card, #preview .big-card { --h: min(50cqh, 70cqw); }

/* Hover preview */
#preview { position: fixed; top: 50%; transform: translateY(-50%) scale(0.96); z-index: 950; pointer-events: none; opacity: 0; transition: opacity 0.12s, transform 0.12s; }
#preview.show { opacity: 1; transform: translateY(-50%) scale(1); }
.preview-note { margin-top: 10px; max-width: calc(min(50cqh, 70cqw) * 0.72); background: #000c; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; font-size: 14px; color: #f1e6ea; }
.live-kw { font-size: 0.8em; color: #6a3a1a; }

/* Targeting arrow */
#arrow-layer { position: fixed; inset: 0; width: 100cqw; height: 100cqh; pointer-events: none; z-index: 1100; display: none; }
#arrow-layer.show { display: block; }
.arrow-path { fill: none; stroke: url(#arrow-grad); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 2 22;
  animation: arrow-flow 0.6s linear infinite; filter: drop-shadow(0 0 6px #ff5a3c); }
#arrow-layer.locked .arrow-path { stroke-dasharray: none; }
@keyframes arrow-flow { to { stroke-dashoffset: -24; } }
.arrow-reticle { fill: none; stroke: #ff5a3c; stroke-width: 4; filter: drop-shadow(0 0 8px #ff5a3c); transition: r 0.12s; }

@media (max-width: 860px) {
  .arena { --card-w: clamp(70px, 15cqw, 110px); --minion-w: clamp(46px, 11cqw, 80px); --hero: clamp(56px, 10cqh, 90px); }
  .rail { width: 14cqw; }
  .history { display: none; }
  .mana-bar.me { top: 77cqh; right: 16cqw; }
  .crystal { width: 9px; height: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .arena *, #fx-layer * { animation-duration: 0.01ms !important; }
}
/* ==== KEYWORD VISUALS ====================================================
   Minions are layered: shield (Taunt, behind) -> wind (Twin Strike) -> art ->
   effect overlays (ice, poison, embers, ...) -> Evade bubble -> gems/badges.
   Each keyword is a kw-<name> class on the minion. */
.arena .minion { background: none; border: none; border-radius: 12px; display: block; isolation: isolate; }
.arena .minion.has-art::after { display: none; }
.m-art { position: absolute; inset: 0; z-index: 1; border-radius: 12px; overflow: hidden; border: 3px solid #6b4a3a;
  background: #1d1218 center top / 100% auto no-repeat; box-shadow: 0 6px 14px #000b; display: grid; place-items: center;
  transition: filter 0.3s, opacity 0.3s; }
.m-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 68%, #000c 88%); }
.m-art .art { font-size: calc(var(--minion-w) * 0.45); }
.arena .minion .atk, .arena .minion .hp { z-index: 6; }
.arena .minion .atk { left: -10%; bottom: -8%; }
.arena .minion .hp { right: -10%; bottom: -8%; }
.arena .minion .icons { z-index: 6; top: -8%; right: -4%; display: flex; gap: 2px; }
.m-shield, .m-wind, .m-fx > span, .m-bubble, .m-zzz { position: absolute; pointer-events: none; display: none; }

/* Taunt: a stone shield standing behind the minion. */
.kw-taunt .m-shield { display: block; z-index: 0; inset: -15% -16% -6%;
  clip-path: polygon(50% 0, 92% 9%, 100% 22%, 100% 62%, 82% 86%, 50% 100%, 18% 86%, 0 62%, 0 22%, 8% 9%);
  background: radial-gradient(circle at 50% 30%, #d6d0c4, #8b8478 45%, #4d4842 75%, #2a2622); }
.kw-taunt .m-shield::before { content: ''; position: absolute; inset: 5%;
  clip-path: polygon(50% 0, 92% 9%, 100% 22%, 100% 62%, 82% 86%, 50% 100%, 18% 86%, 0 62%, 0 22%, 8% 9%);
  background: repeating-linear-gradient(90deg, #0000 0 18%, #0000002a 18% 19.5%), radial-gradient(circle at 50% 25%, #aaa396, #5a544b 75%); }
.kw-taunt .m-art { border-color: #c9c3b8; }

/* Twin Strike: a wind swirl spinning around the minion. */
.kw-twin-strike .m-wind { display: block; z-index: 0; inset: -13%; border-radius: 50%;
  background: conic-gradient(from 0deg, #0000 0 10%, #bfe6ffaa 14%, #0000 22% 35%, #e9f6ffbb 40%, #0000 48% 60%, #bfe6ffaa 66%, #0000 74% 85%, #e9f6ff99 90%, #0000);
  -webkit-mask: radial-gradient(closest-side, #0000 70%, #000 76%, #000 94%, #0000);
  mask: radial-gradient(closest-side, #0000 70%, #000 76%, #000 94%, #0000);
  animation: kw-spin 1.6s linear infinite; }
@keyframes kw-spin { to { transform: rotate(360deg); } }

.m-fx { position: absolute; inset: 0; z-index: 2; border-radius: 12px; overflow: hidden; pointer-events: none; }
.m-fx > span { inset: 0; }

/* Frozen: ice over the art. */
.kw-frozen .m-art { filter: saturate(0.4) brightness(1.1) hue-rotate(170deg); border-color: #bfe8ff; }
.kw-frozen .m-ice, .hero-portrait.kw-frozen .m-ice { display: block; z-index: 3;
  background:
    linear-gradient(115deg, #0000 40%, #ffffffaa 41%, #0000 43%),
    linear-gradient(60deg, #0000 62%, #ffffff88 63%, #0000 65%),
    linear-gradient(160deg, #0000 22%, #ffffff77 23%, #0000 25%),
    linear-gradient(180deg, #e8f8ffcc, #8fd3ff66 40%, #4aa8ff55);
  box-shadow: inset 0 0 18px #e8f8ff; }
.hero-portrait .m-ice { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; display: none; }

/* Poisonous / Venomous: dripping toxin. */
.kw-poisonous .m-drip, .kw-venomous .m-drip { display: block; background: radial-gradient(ellipse at 50% 120%, #5cff6a77, #0000 60%); }
.kw-venomous .m-drip { background: radial-gradient(ellipse at 50% 120%, #c35cff88, #0000 60%); }
.kw-poisonous .m-drip::before, .kw-venomous .m-drip::before { content: ''; position: absolute; width: 9%; height: 9%; left: 30%; top: -10%;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #7dff6a;
  box-shadow: 0 0 6px #7dff6a, calc(var(--minion-w) * 0.3) calc(var(--minion-w) * -0.2) 0 -1px #7dff6a;
  animation: kw-drip 1.8s ease-in infinite; }
.kw-venomous .m-drip::before { background: #d07dff; box-shadow: 0 0 6px #d07dff, calc(var(--minion-w) * 0.3) calc(var(--minion-w) * -0.2) 0 -1px #d07dff; }
@keyframes kw-drip { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(calc(var(--minion-w) * 1.3)); opacity: 0.2; } }

/* Burned: embers rising from the bottom. */
.kw-burned .m-art { filter: sepia(0.4) saturate(1.4) brightness(0.9); border-color: #ff7a3a; }
.kw-burned .m-embers { display: block;
  background: radial-gradient(circle, #ffb35a 0 1.5px, #0000 2.5px) 0 0 / 22% 26%, radial-gradient(circle, #ff6a2a 0 1px, #0000 2px) 9% 13% / 17% 21%,
    linear-gradient(0deg, #ff5a1a88, #0000 45%);
  animation: kw-embers 1.2s linear infinite; }
@keyframes kw-embers { to { background-position: 0 calc(var(--minion-w) * -0.32), 9% calc(var(--minion-w) * -0.26), 0 0; } }

/* Blind: a dark blindfold across the eyes. */
.kw-blind .m-blind { display: block; top: 22%; bottom: auto; height: 17%; z-index: 3;
  background: linear-gradient(180deg, #1a1012, #3a2a2e 50%, #1a1012); box-shadow: 0 2px 6px #000a; transform: rotate(-6deg) scaleX(1.2); }

/* Silenced: drained of colour with a scrawled-out mark. */
.kw-silenced .m-art { filter: grayscale(1) brightness(0.8); }
.kw-silenced .m-silence { display: block; z-index: 3; opacity: 0.6;
  background: linear-gradient(45deg, #0000 47%, #b0a6ff 48% 52%, #0000 53%), linear-gradient(-45deg, #0000 47%, #b0a6ff 48% 52%, #0000 53%); }

/* Stealth: shimmering, half-hidden. */
.kw-stealth .m-art { opacity: 0.55; filter: saturate(0.5) contrast(1.1); }
.kw-stealth .m-fx { background: repeating-linear-gradient(100deg, #0000 0 8%, #ffffff1c 10%, #0000 12% 20%); background-size: 200% 100%;
  animation: kw-shimmer 2.4s linear infinite; }
@keyframes kw-shimmer { to { background-position: -200% 0; } }

/* Lifesteal: a slow crimson heartbeat. */
.kw-lifesteal .m-art { animation: kw-lifesteal 1.6s ease-in-out infinite; }
@keyframes kw-lifesteal { 50% { box-shadow: 0 6px 14px #000b, inset 0 0 18px #ff1f4a, 0 0 10px #ff1f4a88; } }

/* Elusive: a faint violet mist. */
.kw-elusive .m-art { box-shadow: 0 6px 14px #000b, 0 0 0 2px #b98bff88, 0 0 16px #9a6bff99; }

/* Immune: golden radiance. */
.kw-immune .m-art, .hero-portrait.kw-immune { box-shadow: 0 0 0 3px #ffe39a, 0 0 26px #ffd25a !important; }

/* Reborn: a ghostly teal outline. */
.kw-reborn .m-art { border-color: #7ff0d6; box-shadow: 0 6px 14px #000b, 0 0 12px #5ae0c8aa, inset 0 0 14px #5ae0c866; }

/* Recoil: a jagged red edge. */
.kw-recoil .m-art { border-color: #ff4d6a; border-style: dashed; }

/* Evade (like Divine Shield): a golden bubble. */
.kw-evade .m-bubble { display: block; z-index: 4; inset: -7%; border-radius: 46% / 40%;
  background: radial-gradient(ellipse at 35% 25%, #fffbe0aa, #0000 22%), radial-gradient(ellipse, #0000 58%, #ffe58a55 75%, #fff2b8cc 92%, #0000 100%);
  box-shadow: 0 0 14px #ffe58a99; animation: kw-bubble 2.2s ease-in-out infinite; }
@keyframes kw-bubble { 50% { transform: scale(1.03); filter: brightness(1.25); } }

/* Asleep (summoned this turn): floating Zzz. */
.asleep .m-zzz { display: block; z-index: 6; right: 6%; top: 0; font-family: var(--font-title); font-weight: 900; color: #e9e3ff; text-shadow: 0 0 4px #000, 0 0 2px #000; }
.m-zzz b { position: absolute; right: 0; top: 0; font-size: calc(var(--minion-w) * 0.14); opacity: 0; animation: kw-zzz 2.4s linear infinite; }
.m-zzz b:nth-child(2) { animation-delay: 0.8s; font-size: calc(var(--minion-w) * 0.17); }
.m-zzz b:nth-child(3) { animation-delay: 1.6s; font-size: calc(var(--minion-w) * 0.21); }
@keyframes kw-zzz { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(calc(var(--minion-w) * 0.18), calc(var(--minion-w) * -0.4)); opacity: 0; } }

/* Bottom-centre badges (Exit, trigger, Lifesteal, Poisonous ...). */
.badges { position: absolute; z-index: 6; left: 50%; bottom: -9%; transform: translateX(-50%); display: flex; gap: 2px; }
.badges i { font-style: normal; width: calc(var(--minion-w) * 0.24); height: calc(var(--minion-w) * 0.24); border-radius: 50%; display: grid; place-items: center;
  font-size: calc(var(--minion-w) * 0.13); background: radial-gradient(circle at 40% 35%, #4a3a32, #17100d); border: 2px solid #a88a5a; box-shadow: 0 2px 4px #000a; }
.badges .b-trigger { border-color: #ffd25a; }
.badges .b-lifesteal { border-color: #ff4d6a; }
.badges .b-poison { border-color: #6aff7d; }
.badges .b-venom { border-color: #c87dff; }
.badges .b-fur { border-color: #9fe0ff; } .badges .b-hardy { border-color: #c8b89a; }

/* Keyword gained / lost effects (fx layer). */
.fx-shard { position: fixed; width: 14px; height: 18px; background: linear-gradient(135deg, #fff6c8, #ffd25a); clip-path: polygon(50% 0, 100% 60%, 30% 100%, 0 40%);
  filter: drop-shadow(0 0 6px #ffe58a); }
.fx-shard.ice { background: linear-gradient(135deg, #ffffff, #8fd3ff); filter: drop-shadow(0 0 6px #bfe8ff); }
.fx-shard.stone { background: linear-gradient(135deg, #c9c3b8, #4d4842); filter: none; }
.fx-trap-card { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 1001; }
.fx-trap-card .big-card { --h: min(52cqh, 72cqw); box-shadow: 0 0 0 4px #a46bff, 0 0 50px #a46bff; border-radius: 18px; }
.fx-trap-card .trap-label { text-align: center; margin-bottom: 10px; font-family: var(--font-title); font-weight: 900; font-size: clamp(20px, 2.6cqw, 34px);
  letter-spacing: 0.08em; color: #e9d2ff; text-shadow: 0 0 12px #a46bff, 0 2px 4px #000; }
@media (prefers-reduced-motion: reduce) {
  .m-wind, .m-drip::before, .m-embers, .m-zzz b, .m-fx, .m-bubble, .m-art { animation: none !important; }
}

/* Game log drawer: a pull tab that is always visible, so it opens and collapses from the same place. */
.log-drawer { z-index: 46; }
.log-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.log-head h3 { margin: 0; }
.log-head button { width: 32px; height: 32px; padding: 0; border-radius: 8px; }
.log-tab { position: absolute; left: 100%; top: 40%; width: 30px; height: 96px; padding: 0; border-radius: 0 10px 10px 0;
  writing-mode: vertical-rl; font-family: var(--font-title); font-size: 12px; letter-spacing: 0.1em; background: #0e080cf2;
  border: 1px solid var(--line); border-left: none; color: #e8d6b0; }
.log-drawer .log div { padding: 3px 0; border-bottom: 1px solid #ffffff0d; }
.log-drawer .log div.turn { color: var(--gold); font-family: var(--font-title); margin-top: 8px; border-bottom-color: #e7b55244; }

/* Tuned: stronger Evade bubble, Twin Strike arcs that sweep outside the frame, a bigger Taunt shield. */
.kw-evade .m-bubble { inset: -8%; border: 2px solid #fff2b8cc;
  background: radial-gradient(ellipse at 32% 22%, #fffbe0cc, #0000 18%), radial-gradient(ellipse, #ffe58a14 50%, #ffe58a55 80%, #fff2b8aa 96%);
  box-shadow: 0 0 18px #ffe58acc, inset 0 0 22px #ffe58a99; }
.kw-twin-strike .m-wind { z-index: 5; inset: auto; left: 50%; top: 50%; width: calc(var(--minion-w) * 1.5); height: calc(var(--minion-w) * 1.5);
  margin: calc(var(--minion-w) * -0.75) 0 0 calc(var(--minion-w) * -0.75); background: none; -webkit-mask: none; mask: none;
  border: 3px solid #0000; border-top-color: #e9f6ffdd; border-bottom-color: #bfe6ffaa;
  filter: drop-shadow(0 0 4px #bfe6ff); animation: kw-spin 1.1s linear infinite; }
.kw-twin-strike .m-wind::before { content: ''; position: absolute; inset: 12%; border-radius: 50%; border: 2px solid #0000;
  border-left-color: #e9f6ffaa; border-right-color: #bfe6ff88; animation: kw-spin 0.8s linear infinite reverse; }
.kw-taunt .m-shield { inset: -18% -20% -8%; }

/* ==== IMPACT ===========================================================
   Damage splats, faction particles, cracked and shattered hero portraits. */
.fx-float.damage { display: grid; place-items: center; width: clamp(54px, 5cqw, 80px); aspect-ratio: 1; color: #fff;
  font-size: clamp(22px, 2.4cqw, 36px); -webkit-text-stroke: 1.5px #000; }
.fx-float.damage::before { content: ''; position: absolute; inset: 0; z-index: -1;
  clip-path: polygon(50% 0, 61% 26%, 90% 12%, 76% 40%, 100% 52%, 74% 62%, 86% 92%, 58% 76%, 46% 100%, 38% 74%, 8% 88%, 24% 60%, 0 46%, 26% 36%, 12% 8%, 40% 24%);
  background: radial-gradient(circle at 45% 40%, #ff6a5a, #c4141e 55%, #6a0208); filter: drop-shadow(0 3px 4px #000); }
.fx-float.damage span { position: relative; }

.fx-p { position: fixed; pointer-events: none; }
.fx-p.blood { width: 9px; height: 11px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #ff6a7a, #b3122e 55%, #5a0412); }
.fx-p.leaf { width: 14px; height: 8px; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #a6f06a, #3f9a2a 60%, #1f5a14); }
.fx-p.laser { width: 22px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #0000, #7dfff0 40%, #ffffff); box-shadow: 0 0 8px #3affd8; }
.fx-p.rock { width: 10px; height: 9px; clip-path: polygon(20% 0, 85% 10%, 100% 60%, 70% 100%, 10% 85%, 0 35%);
  background: linear-gradient(135deg, #b8a48a, #6a5a46 60%, #3a2e22); }
.fx-p.spark { width: 6px; height: 6px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 8px #ffd25a, 0 0 2px #fff; }

.hero-portrait .cracks { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; z-index: 1; }
.cracks path { fill: none; stroke-linejoin: bevel; vector-effect: non-scaling-stroke; }
.cracks .crack-light { stroke: #ffffff66; stroke-width: 4; transform: translate(0.6px, 0.6px); }
.cracks .crack-dark { stroke: #0b0204; stroke-width: 2.2; }
.hero-portrait.destroyed { visibility: hidden; }
.fx-hero-piece { position: fixed; background: #000 center 22% / cover no-repeat; border-radius: 50% 50% 46% 46%; }

/* The Victory / Defeat panel rises in after the hero explodes. */
.arena .overlay.game-over.fresh { animation: gameover-in 0.6s ease-out; }
@keyframes gameover-in { from { opacity: 0; } }
@keyframes gameover-panel { from { transform: scale(0.6) translateY(40px); opacity: 0; } }

.my-hand.settling .card, .opp-hand.settling .card { transition: none !important; }

/* ==== Stealth / Evade / Elusive (designer's look) ==================== */
.m-speed, .m-sparkle { position: absolute; pointer-events: none; display: none; }
.kw-evade .m-bubble { display: none; }

/* Stealth: greyed out and shrouded in drifting smoke. */
.kw-stealth .m-art { opacity: 0.85; filter: grayscale(1) brightness(0.7) contrast(0.9); animation: none; }
.kw-stealth .m-fx { background: none; animation: none; overflow: visible; }
.kw-stealth .m-smoke { display: block; z-index: 4; inset: -12% -14%; border-radius: 40%;
  background:
    radial-gradient(ellipse 45% 30% at 20% 80%, #b9b4bccc, #0000 70%),
    radial-gradient(ellipse 50% 32% at 80% 70%, #a9a4adbb, #0000 70%),
    radial-gradient(ellipse 40% 28% at 50% 30%, #c9c4ccaa, #0000 70%),
    radial-gradient(ellipse 35% 25% at 15% 20%, #9a96a099, #0000 70%),
    radial-gradient(ellipse 38% 26% at 85% 15%, #b0abb699, #0000 70%);
  background-size: 160% 160%; filter: blur(5px); animation: kw-smoke 6s ease-in-out infinite alternate; }
.kw-stealth .m-smoke::after { content: ''; position: absolute; inset: 10%; border-radius: 50%; filter: blur(4px);
  background: radial-gradient(ellipse 60% 40% at 30% 60%, #d6d2d988, #0000 70%), radial-gradient(ellipse 50% 35% at 70% 40%, #bdb8c288, #0000 70%);
  animation: kw-smoke2 4.5s ease-in-out infinite alternate; }
@keyframes kw-smoke { 0% { transform: translate(-5%, 3%) scale(1); } 100% { transform: translate(5%, -3%) scale(1.06) rotate(2deg); } }
@keyframes kw-smoke2 { 0% { transform: translate(-6%, 4%) scale(0.95); opacity: 0.7; } 100% { transform: translate(6%, -4%) scale(1.1); opacity: 1; } }

/* Evade: speed lines streaking past, as if it's moving too fast to hit. */
.kw-evade .m-art { filter: drop-shadow(-5px 0 0 #ffffff30) drop-shadow(-10px 0 0 #ffffff18); }
.kw-evade .m-speed { display: block; z-index: 5; top: 4%; bottom: 10%; left: -38%; right: -6%;
  background:
    linear-gradient(90deg, #0000 0 4%, #ffffffcc 4% 30%, #0000 30%) 0 12% / 70% 2px no-repeat,
    linear-gradient(90deg, #0000 0 10%, #ffffffaa 10% 40%, #0000 40%) 0 30% / 80% 3px no-repeat,
    linear-gradient(90deg, #0000 0 2%, #ffffffdd 2% 26%, #0000 26%) 0 48% / 60% 2px no-repeat,
    linear-gradient(90deg, #0000 0 8%, #ffffffaa 8% 36%, #0000 36%) 0 66% / 75% 3px no-repeat,
    linear-gradient(90deg, #0000 0 5%, #ffffffbb 5% 28%, #0000 28%) 0 84% / 65% 2px no-repeat;
  -webkit-mask: linear-gradient(90deg, #0000, #000 25%, #000 60%, #0000);
  mask: linear-gradient(90deg, #0000, #000 25%, #000 60%, #0000);
  filter: drop-shadow(0 0 3px #cfe8ff); animation: kw-speed 0.55s linear infinite; }
@keyframes kw-speed { 0% { transform: translateX(28%); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateX(-22%); opacity: 0; } }
.fx-shard.speed { width: 26px; height: 3px; clip-path: none; border-radius: 2px; background: linear-gradient(90deg, #0000, #ffffff); filter: drop-shadow(0 0 4px #cfe8ff); }

/* Elusive: camouflaged into its surroundings, with gold sparkles. */
.kw-elusive .m-art { box-shadow: 0 6px 14px #000b; filter: saturate(0.7) contrast(0.85); }
.kw-elusive .m-camo { display: block; z-index: 3; mix-blend-mode: overlay; opacity: 0.85;
  background:
    radial-gradient(ellipse 22% 14% at 20% 25%, #3d5a2a 98%, #0000),
    radial-gradient(ellipse 18% 22% at 70% 18%, #6b5a36 98%, #0000),
    radial-gradient(ellipse 26% 16% at 55% 50%, #2a3a1e 98%, #0000),
    radial-gradient(ellipse 20% 18% at 18% 70%, #7a6a42 98%, #0000),
    radial-gradient(ellipse 24% 15% at 82% 72%, #34482a 98%, #0000),
    radial-gradient(ellipse 16% 12% at 45% 88%, #5c4c2e 98%, #0000),
    linear-gradient(#4a5a34, #5a4a2e);
  animation: kw-camo 5s ease-in-out infinite alternate; }
@keyframes kw-camo { to { opacity: 0.6; } }
.kw-elusive .m-sparkle { display: block; z-index: 5; inset: -6%;
  background:
    radial-gradient(circle, #fff7d0 0 1px, #ffd25a 1.5px, #0000 3px) 12% 18% / 30% 30% no-repeat,
    radial-gradient(circle, #fff7d0 0 1px, #ffd25a 1.5px, #0000 3px) 78% 30% / 26% 26% no-repeat,
    radial-gradient(circle, #fff7d0 0 1px, #ffd25a 1.5px, #0000 3px) 40% 62% / 28% 28% no-repeat,
    radial-gradient(circle, #fff7d0 0 1px, #ffd25a 1.5px, #0000 3px) 88% 86% / 24% 24% no-repeat;
  filter: drop-shadow(0 0 3px #ffd25a); animation: kw-twinkle 1.4s ease-in-out infinite; }
.kw-elusive .m-sparkle::before, .kw-elusive .m-sparkle::after { content: ''; position: absolute; width: 12%; aspect-ratio: 1;
  background: #ffe9a0; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 4px #ffd25a); animation: kw-twinkle 1.8s ease-in-out infinite; }
.kw-elusive .m-sparkle::before { left: 18%; top: 38%; animation-delay: 0.6s; }
.kw-elusive .m-sparkle::after { right: 14%; top: 8%; width: 9%; animation-delay: 1.2s; }
@keyframes kw-twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(25deg); } }
@media (prefers-reduced-motion: reduce) { .m-smoke, .m-smoke::after, .m-speed, .m-camo, .m-sparkle, .m-sparkle::before, .m-sparkle::after { animation: none !important; } }

/* Tuning pass: bolder speed lines, thicker smoke, subtler camo, bigger sparkles. */
.kw-evade .m-speed { left: -45%; right: -10%; top: 2%; bottom: 8%;
  background:
    linear-gradient(90deg, #0000, #ffffffee 30%, #ffffff 70%, #0000) 10% 10% / 55% 3px no-repeat,
    linear-gradient(90deg, #0000, #e6f3ffdd 30%, #ffffff 70%, #0000) 0% 26% / 70% 4px no-repeat,
    linear-gradient(90deg, #0000, #ffffffee 30%, #ffffff 70%, #0000) 30% 42% / 50% 3px no-repeat,
    linear-gradient(90deg, #0000, #e6f3ffdd 30%, #ffffff 70%, #0000) 5% 58% / 65% 4px no-repeat,
    linear-gradient(90deg, #0000, #ffffffee 30%, #ffffff 70%, #0000) 25% 74% / 55% 3px no-repeat,
    linear-gradient(90deg, #0000, #e6f3ffdd 30%, #ffffff 70%, #0000) 0% 90% / 60% 3px no-repeat;
  -webkit-mask: linear-gradient(90deg, #0000, #000 20%, #000 70%, #0000);
  mask: linear-gradient(90deg, #0000, #000 20%, #000 70%, #0000);
  filter: drop-shadow(0 0 4px #bfe0ff); animation: kw-speed 0.45s linear infinite; }
@keyframes kw-speed { from { transform: translateX(22%); } to { transform: translateX(-18%); } }
.kw-evade .m-art { filter: drop-shadow(-6px 0 0 #ffffff40) drop-shadow(-12px 0 0 #ffffff20) blur(0.3px); }

.kw-stealth .m-smoke { filter: blur(3px); opacity: 1;
  background:
    radial-gradient(ellipse 45% 32% at 20% 80%, #d8d4dcee, #0000 70%),
    radial-gradient(ellipse 50% 34% at 80% 70%, #c9c4cdee, #0000 70%),
    radial-gradient(ellipse 42% 30% at 50% 35%, #dcd8dfcc, #0000 70%),
    radial-gradient(ellipse 38% 28% at 12% 25%, #bdb8c3dd, #0000 70%),
    radial-gradient(ellipse 40% 28% at 88% 18%, #cfcad4dd, #0000 70%),
    radial-gradient(ellipse 60% 25% at 50% 100%, #e2dee5ee, #0000 70%);
  background-size: 140% 140%; }

.kw-elusive .m-art { filter: saturate(0.85) contrast(0.95); }
.kw-elusive .m-camo { mix-blend-mode: soft-light; opacity: 0.75; }
@keyframes kw-camo { to { opacity: 0.5; } }
.kw-elusive .m-sparkle { background:
    radial-gradient(circle, #fffbe6 0 2px, #ffd25a 3px, #0000 6px) 10% 16% / 28% 28% no-repeat,
    radial-gradient(circle, #fffbe6 0 2px, #ffd25a 3px, #0000 6px) 80% 34% / 24% 24% no-repeat,
    radial-gradient(circle, #fffbe6 0 2px, #ffd25a 3px, #0000 6px) 38% 66% / 26% 26% no-repeat,
    radial-gradient(circle, #fffbe6 0 2px, #ffd25a 3px, #0000 6px) 90% 88% / 22% 22% no-repeat; }
.kw-elusive .m-sparkle::before { width: 20%; }
.kw-elusive .m-sparkle::after { width: 16%; }
.kw-elusive .m-camo { mix-blend-mode: multiply; opacity: 0.55;
  background:
    radial-gradient(ellipse 22% 14% at 20% 25%, #4f7a32 98%, #0000),
    radial-gradient(ellipse 18% 22% at 72% 18%, #8a7442 98%, #0000),
    radial-gradient(ellipse 26% 16% at 55% 52%, #3a5426 98%, #0000),
    radial-gradient(ellipse 20% 18% at 18% 72%, #957f4c 98%, #0000),
    radial-gradient(ellipse 24% 15% at 84% 74%, #46663a 98%, #0000),
    radial-gradient(ellipse 16% 12% at 45% 90%, #7a6438 98%, #0000); }
@keyframes kw-camo { to { opacity: 0.35; } }
/* Camo blends into the art itself (a separate layer can't blend with it). */
.kw-elusive .m-camo { display: none; }
.kw-elusive .m-art::before { content: ''; position: absolute; inset: 0; z-index: 0; mix-blend-mode: multiply; opacity: 0.7;
  background:
    radial-gradient(ellipse 22% 14% at 20% 25%, #4f7a32 98%, #0000),
    radial-gradient(ellipse 18% 22% at 72% 18%, #8a7442 98%, #0000),
    radial-gradient(ellipse 26% 16% at 55% 52%, #3a5426 98%, #0000),
    radial-gradient(ellipse 20% 18% at 18% 72%, #957f4c 98%, #0000),
    radial-gradient(ellipse 24% 15% at 84% 74%, #46663a 98%, #0000),
    radial-gradient(ellipse 16% 12% at 45% 90%, #7a6438 98%, #0000);
  animation: kw-camo 5s ease-in-out infinite alternate; }
@keyframes kw-camo { from { opacity: 0.75; } to { opacity: 0.45; } }
.kw-elusive .m-art::before { mix-blend-mode: hard-light;
  background:
    radial-gradient(ellipse 22% 14% at 20% 25%, #6a9a3a 98%, #0000),
    radial-gradient(ellipse 18% 22% at 72% 18%, #c2a462 98%, #0000),
    radial-gradient(ellipse 26% 16% at 55% 52%, #2a3a18 98%, #0000),
    radial-gradient(ellipse 20% 18% at 18% 72%, #b89a5a 98%, #0000),
    radial-gradient(ellipse 24% 15% at 84% 74%, #4a7a32 98%, #0000),
    radial-gradient(ellipse 16% 12% at 45% 90%, #2e2614 98%, #0000); }
@keyframes kw-camo { from { opacity: 0.55; } to { opacity: 0.3; } }

/* ==== INTRO, ROPE, THINKING =========================================== */
/* Versus screen + coin flip */
.intro { position: fixed; inset: 0; pointer-events: auto; z-index: 1200; overflow: hidden;
  background: radial-gradient(ellipse at 50% 50%, #3a1420ee, #0a0408f8 70%); }
.intro-side { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.intro-side.me { left: 12cqw; bottom: 14cqh; }
.intro-side.opp { right: 12cqw; top: 12cqh; }
.intro-portrait { width: clamp(140px, 22vmin, 260px); aspect-ratio: 1; border-radius: 50% 50% 46% 46%; overflow: hidden;
  box-shadow: 0 0 0 5px #c9a35a, 0 0 0 9px #3a2a14, 0 20px 50px #000; background: #000; display: grid; place-items: center; font-size: 80px; }
.intro-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.intro-side b { font-family: var(--font-title); font-size: clamp(22px, 3cqw, 38px); color: #f3e2b8; text-shadow: 0 2px 6px #000; }
.intro-side small { font-size: clamp(13px, 1.4cqw, 18px); color: #cbb8a0; letter-spacing: 0.08em; text-transform: uppercase; }
.intro-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-title); font-weight: 900;
  font-size: clamp(70px, 12cqw, 160px); background: linear-gradient(#fff3c4, #e7b552 55%, #8a5a12); -webkit-background-clip: text; background-clip: text;
  color: transparent; filter: drop-shadow(0 6px 10px #000) drop-shadow(0 0 20px #e7b55288); }
.intro-coin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center;
  gap: 18px; perspective: 600px; }
.intro-coin.show { display: flex; }
.intro-coin.show ~ *, .intro:has(.intro-coin.show) .intro-vs { opacity: 0; transition: opacity 0.3s; }
.coin { position: relative; width: clamp(110px, 16vmin, 170px); aspect-ratio: 1; transform-style: preserve-3d; }
.coin .face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; backface-visibility: hidden;
  font-family: var(--font-title); font-weight: 900; font-size: clamp(34px, 5vmin, 52px); color: #3a2400;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #f0c45a 45%, #a8741e 80%, #6a4410);
  box-shadow: inset 0 0 0 6px #c99a3a, inset 0 0 0 9px #8a5a12, 0 10px 30px #000c; }
.coin .face.back { transform: rotateY(180deg); color: #2a2a34;
  background: radial-gradient(circle at 35% 30%, #ffffff, #c9ccd6 45%, #7a7e8a 80%, #4a4e5a);
  box-shadow: inset 0 0 0 6px #a8acb8, inset 0 0 0 9px #5a5e6a, 0 10px 30px #000c; }
.coin-text { margin: 0; font-family: var(--font-title); font-size: clamp(22px, 3cqw, 36px); color: #f3e2b8; text-shadow: 0 2px 8px #000;
  opacity: 0; transform: translateY(10px); transition: opacity 0.35s, transform 0.35s; white-space: nowrap; }
.coin-text.show { opacity: 1; transform: none; }

/* The rope: burns toward the End Turn button in the last 15 seconds. */
.rope { position: absolute; left: 14cqw; right: 13cqw; top: calc(48.5cqh - 6px); height: 12px; z-index: 15; pointer-events: none; display: none; }
.rope.burning { display: block; }
.rope-fuse { position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--burn, 0) * 100%); border-radius: 6px;
  background: repeating-linear-gradient(60deg, #d8b47a 0 5px, #9a7444 5px 10px, #6a4a24 10px 12px); box-shadow: 0 3px 6px #000b, inset 0 -2px 3px #0006; }
.rope-spark { position: absolute; top: 50%; left: calc(var(--burn, 0) * 100%); width: 34px; height: 34px; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, #fffbe0, #ffd25a 25%, #ff7a1a 50%, #ff3a0a00 72%);
  filter: drop-shadow(0 0 12px #ff7a2a); animation: spark-flicker 0.12s infinite alternate; }
.rope-spark::before, .rope-spark::after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffd25a;
  box-shadow: 0 0 6px #ff9a3a; left: 50%; top: 50%; animation: spark-ember 0.6s linear infinite; }
.rope-spark::after { animation-delay: 0.3s; animation-duration: 0.7s; }
@keyframes spark-flicker { to { transform: translate(-50%, -50%) scale(1.25) rotate(25deg); } }
@keyframes spark-ember { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(-14px, -22px); opacity: 0; } }
.end-turn.roping { animation: end-rope 0.5s infinite alternate !important; }
@keyframes end-rope { to { box-shadow: 0 0 0 3px #ff7a2a, 0 0 26px #ff5a1a; } }

/* AI turn indicator */
.thinking { position: absolute; left: calc(50% + var(--hero) * 0.75); top: calc(3cqh + var(--hero) + 6px); z-index: 30; padding: 6px 14px;
  border-radius: 14px; background: #f4ead6; color: #3a2a1a; font-family: var(--font-title); font-weight: 700; font-size: 14px;
  box-shadow: 0 4px 12px #000a; white-space: nowrap; animation: think-in 0.25s ease-out; }
.thinking::before { content: ''; position: absolute; left: 14px; top: -7px; border: 7px solid #0000; border-top: none; border-bottom-color: #f4ead6; }
.thinking .dots b { display: inline-block; animation: think-dot 1s infinite; }
.thinking .dots b:nth-child(2) { animation-delay: 0.15s; }
.thinking .dots b:nth-child(3) { animation-delay: 0.3s; }
@keyframes think-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
@keyframes think-in { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 860px) {
  .intro-side.me { left: 6cqw; bottom: 10cqh; }
  .intro-side.opp { right: 6cqw; top: 8cqh; }
  .rope { right: 17cqw; }
}
.intro { background: radial-gradient(ellipse at 50% 50%, #3a1420, #0a0408 70%); }

/* ==== FUNGUS ============================================================ */
.big-card.f-fungus { --frame: #4a3a5a; --frame-hi: #a07ac8; --body: #1a1220; }
.arena.f-fungus { --felt: #2e2238; --felt-2: #110b16; --rim: #7a5a98; }
.fx-p.spore { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f2e6ff, #b48ae0 45%, #6a9a4a 80%, #0000);
  box-shadow: 0 0 8px #c9a6ff99; filter: blur(0.4px); }
.shroom-count { position: absolute; right: -14px; top: -10px; z-index: 2; font-style: normal; font-size: 12px; font-weight: 800;
  padding: 2px 6px; border-radius: 10px; background: #2a1a34; border: 1px solid #a07ac8; color: #f2e6ff; box-shadow: 0 0 10px #a07ac888;
  white-space: nowrap; font-family: var(--font-body, sans-serif); }

/* ==== ONE-FACTION FORMAT ============================================== */
.format-toggle { display: inline-flex; gap: 0; margin: 4px 0 14px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.format-toggle button { border-radius: 0; margin: 0; }
.format-toggle button.on { box-shadow: inset 0 -3px 0 var(--gold); }
.card.dupe { box-shadow: 0 0 0 3px var(--gold), 0 0 18px #e7b55299; transform: translateY(-4px); }
.dupe-tag { position: absolute; top: 6px; right: 6px; z-index: 3; padding: 2px 8px; border-radius: 10px; font-family: var(--font-title); font-weight: 900;
  font-size: 15px; background: linear-gradient(#ffe39a, #c9922a); color: #2a1a00; box-shadow: 0 2px 6px #000a; }

/* Evade speed lines, take 3: kept inside the card frame, sweeping across the art. */
.kw-evade .m-speed { left: 0; right: 0; top: 0; bottom: 0; z-index: 5; overflow: hidden; border-radius: 12px;
  background: none; -webkit-mask: none; mask: none; filter: none; animation: none; }
.kw-evade .m-speed::before { content: ''; position: absolute; top: 4%; bottom: 14%; left: 0; width: 200%;
  background:
    linear-gradient(90deg, #0000, #ffffffee 40%, #ffffff 60%, #0000) 8% 8% / 22% 3px no-repeat,
    linear-gradient(90deg, #0000, #e6f3ffdd 40%, #ffffff 60%, #0000) 30% 24% / 30% 4px no-repeat,
    linear-gradient(90deg, #0000, #ffffffee 40%, #ffffff 60%, #0000) 60% 40% / 20% 3px no-repeat,
    linear-gradient(90deg, #0000, #e6f3ffdd 40%, #ffffff 60%, #0000) 15% 56% / 28% 4px no-repeat,
    linear-gradient(90deg, #0000, #ffffffee 40%, #ffffff 60%, #0000) 75% 72% / 22% 3px no-repeat,
    linear-gradient(90deg, #0000, #e6f3ffdd 40%, #ffffff 60%, #0000) 45% 90% / 26% 3px no-repeat;
  filter: drop-shadow(0 0 3px #bfe0ff); animation: kw-speed-in 0.6s linear infinite; }
@keyframes kw-speed-in { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.kw-evade .m-art { filter: drop-shadow(-3px 0 0 #ffffff30); }
@media (prefers-reduced-motion: reduce) { .kw-evade .m-speed::before { animation: none; } }
/* Seamless loop: each line repeats every card width (50% of this 200%-wide strip). */
.kw-evade .m-speed::before {
  background:
    linear-gradient(90deg, #0000 10%, #ffffffee 25%, #fff 45%, #0000 55%) 0 8% / 50% 3px repeat-x,
    linear-gradient(90deg, #0000 40%, #e6f3ffdd 55%, #fff 80%, #0000 92%) 0 24% / 50% 4px repeat-x,
    linear-gradient(90deg, #0000 60%, #ffffffee 70%, #fff 88%, #0000 98%) 0 40% / 50% 3px repeat-x,
    linear-gradient(90deg, #0000 5%, #e6f3ffdd 18%, #fff 40%, #0000 50%) 0 56% / 50% 4px repeat-x,
    linear-gradient(90deg, #0000 50%, #ffffffee 62%, #fff 78%, #0000 86%) 0 72% / 50% 3px repeat-x,
    linear-gradient(90deg, #0000 25%, #e6f3ffdd 35%, #fff 55%, #0000 65%) 0 90% / 50% 3px repeat-x;
}

/* ==== PAINTED BOARDS =====================================================
   Battle-screen sizes use container units (cqw / cqh) of .arena. With a
   painted board the arena is a 16:9 stage, letterboxed, so the art's painted
   slots stay under the UI on any screen. Slot positions are fractions of the
   board (all five boards share one template; measured from the images). */
.arena { container-type: size; }
.arena-backdrop { position: fixed; inset: -40px; background: #000 center / cover no-repeat; filter: blur(28px) brightness(0.35) saturate(1.2); }
.arena.has-board {
  inset: auto; left: calc((100vw - min(100vw, 177.78vh)) / 2); top: calc((100vh - min(100vh, 56.25vw)) / 2);
  width: min(100vw, 177.78vh); height: min(100vh, 56.25vw);
  background-color: #000; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; box-shadow: 0 0 60px #000;
  --card-w: clamp(70px, 7.6cqw, 150px);
  --minion-w: clamp(52px, 6.8cqw, 128px);
  --hero: 8.6cqw;
}
.arena.has-board .table-oval, .arena.has-board .midline { display: none; }

/* Minion rows: centred in each half of the painted play surface (y .218–.468–.745). */
.arena.has-board .board { left: 14.4cqw; right: 14.4cqw; gap: 0.7cqw; }
.arena.has-board .board.opp { top: calc(34.3cqh - var(--minion-w) * 0.61); }
.arena.has-board .board.me { top: calc(60.6cqh - var(--minion-w) * 0.61); }

/* Heroes sit inside the painted frames: an arch for the enemy, an oval for you. */
.arena.has-board .hero-zone { inset: 0; transform: none; display: block; pointer-events: none; }
.arena.has-board .hero-zone > * { pointer-events: auto; }
.arena.has-board .hero-portrait { position: absolute; box-shadow: inset 0 0 18px #000c; }
.arena.has-board .hero-zone.opp .hero-portrait { left: 45.6cqw; width: 8.4cqw; top: 6.8cqh; height: 13.6cqh; border-radius: 50% 50% 6% 6% / 42% 42% 4% 4%; }
.arena.has-board .hero-zone.me .hero-portrait { left: 45.6cqw; width: 8.7cqw; top: 76.5cqh; height: 15.1cqh; border-radius: 50% / 46% 46% 54% 54%; }
.arena.has-board .hero-portrait .portrait-img { border-radius: inherit; }
.arena.has-board .hero-name { display: none; }
.arena.has-board .hero-portrait .hp { right: -14%; bottom: -6%; width: 40%; height: auto; aspect-ratio: 1; font-size: calc(var(--hero) * 0.17); }
.arena.has-board .hero-portrait .atk { left: -14%; bottom: -6%; width: 36%; height: auto; aspect-ratio: 1; font-size: calc(var(--hero) * 0.15); }
.arena.has-board .hero-portrait .armor { right: -12%; top: 26%; width: 30%; height: auto; aspect-ratio: 1; }
/* Hero Spells to the right of the frame, Traps to the left. */
.arena.has-board .hero-powers { position: absolute; left: 57.5cqw; transform: translateY(-50%); }
.arena.has-board .hero-zone.opp .hero-powers { top: 13.6cqh; }
.arena.has-board .hero-zone.me .hero-powers { top: 84cqh; }
.arena.has-board .traps { position: absolute; right: 57.5cqw; transform: translateY(-50%); min-width: 0; }
.arena.has-board .hero-zone.opp .traps { top: 13.6cqh; }
.arena.has-board .hero-zone.me .traps { top: 84cqh; }
.arena.has-board .hero-spell { width: calc(var(--hero) * 0.62); height: calc(var(--hero) * 0.62); }
.arena.has-board .extinction-badge, .arena.has-board .freeze-badge { width: calc(var(--hero) * 0.48); height: calc(var(--hero) * 0.48); }

/* Right rail: End Turn in its painted slot; deck counts on the painted deck piles. */
.arena.has-board .rail { inset: 0; width: auto; display: block; pointer-events: none; }
.arena.has-board .rail > * { pointer-events: auto; }
.arena.has-board .end-turn { position: absolute; left: 89.3cqw; width: 7.2cqw; top: 43cqh; height: 7.7cqh; padding: 0;
  border-radius: 14% / 22%; font-size: clamp(10px, 1.05cqw, 18px); line-height: 1.05; }
.arena.has-board .deck-pile { position: absolute; transform: translate(-50%, -50%); }
.arena.has-board .deck-pile .pile { width: auto; height: auto; position: static; }
.arena.has-board .deck-pile .pile span { display: none; }
.arena.has-board .deck-pile.opp { left: 93.1cqw; top: 37cqh; }
.arena.has-board .deck-pile.me { left: 95.5cqw; top: 71cqh; }
.arena.has-board .deck-pile b { display: grid; place-items: center; min-width: 2.2cqw; padding: 0.2cqw 0.6cqw; border-radius: 1cqw;
  background: #000c; border: 1px solid #ffffff44; color: #f3e2b8; font-size: clamp(12px, 1.1cqw, 20px); text-shadow: 0 1px 2px #000; }
.arena.has-board .shroom-count { right: -2cqw; top: -3.4cqh; }

/* Hand: lower, so your hero frame stays visible (hover still lifts a card fully). */
.arena.has-board .my-hand { left: 22cqw; right: 22cqw; }
.arena.has-board .my-hand .card { transform: translate(calc(-50% + var(--x, 0px)), calc(52% + var(--y, 0px))) rotate(var(--rot, 0deg)); }
.arena.has-board .my-hand .card:hover:not(.drag-src) { transform: translate(calc(-50% + var(--x, 0px)), -4%) rotate(0deg) scale(1.3); }
.arena.has-board .opp-hand { left: 30cqw; right: 30cqw; }

/* Mana, rope, thinking bubble, history. */
.arena.has-board .mana-bar.me { top: 93cqh; right: 12cqw; }
.arena.has-board .mana-bar.opp { top: 2.4cqh; right: 12cqw; }
.arena.has-board .rope { left: 15cqw; right: 15cqw; top: calc(46.8cqh - 6px); }
.arena.has-board .thinking { left: 55.5cqw; top: 21.5cqh; }
.arena.has-board .history { top: 18cqh; bottom: 28cqh; }
/* Painted boards, tuning pass: sizes scale with the stage (no large minimums on
   small windows), the enemy hand tucks above the arch, your mana sits clear of the hand. */
.arena.has-board { --card-w: clamp(44px, 7.6cqw, 150px); --minion-w: clamp(40px, 6.8cqw, 128px); }
.arena.has-board .opp-hand .card.back { transform: translate(calc(-50% + var(--x, 0px)), calc(-72% - var(--y, 0px))) rotate(calc(var(--rot, 0deg) * -1)); }
.arena.has-board .mana-bar.me { top: auto; bottom: 1.6cqh; right: 1.5cqw; flex-direction: column-reverse; align-items: flex-end; gap: 0.4cqh; }
.arena.has-board .mana-bar.opp { top: 1.2cqh; right: 1.5cqw; }
.arena.has-board .mana-bar.me .crystal { width: clamp(8px, 0.85cqw, 16px); height: clamp(8px, 0.85cqw, 16px); }
.arena.has-board .mana-text { font-size: clamp(12px, 1.2cqw, 22px); }
.arena.has-board .my-hand { left: 24cqw; right: 26cqw; }
/* The generic .my-hand rule sets width: 100%, which overrode the arena's left/right
   and pushed the hand right of centre. The arena hand is sized by its edges. */
.arena .my-hand { width: auto; }
.arena.has-board .my-hand { left: 25cqw; right: 25cqw; }
.arena.has-board .my-hand .card { transform: translate(calc(-50% + var(--x, 0px)), calc(60% + var(--y, 0px))) rotate(var(--rot, 0deg)); }

/* ==== PHONES (landscape only) =========================================== */
/* Rotate prompt: a match on an upright phone or tablet. */
#rotate-hint { display: none; position: fixed; inset: 0; z-index: 3000; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(ellipse at 50% 40%, #3a1420, #0a0408 75%); color: #f3e2b8; text-align: center; padding: 24px; }
#rotate-hint b { font-family: var(--font-title); font-size: 26px; }
#rotate-hint span { color: #cbb8a0; }
.rotate-phone { font-size: 64px; animation: rotate-phone 2.4s ease-in-out infinite; }
@keyframes rotate-phone { 0%, 25% { transform: rotate(0); } 55%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (orientation: portrait) and (max-width: 1024px) { body.in-game #rotate-hint { display: flex; } }

/* Hover effects only where there is real hover; touch uses the inspect state. */
@media (hover: none) {
  .arena .my-hand .card:hover:not(.drag-src) { transform: translate(calc(-50% + var(--x, 0px)), calc(26% + var(--y, 0px))) rotate(var(--rot, 0deg)); }
  .arena.has-board .my-hand .card:hover:not(.drag-src) { transform: translate(calc(-50% + var(--x, 0px)), calc(60% + var(--y, 0px))) rotate(var(--rot, 0deg)); }
}
.arena .my-hand .card.inspect { transform: translate(calc(-50% + var(--x, 0px)), -2%) rotate(0deg) scale(1.15) !important; z-index: 200 !important;
  box-shadow: 0 0 0 3px var(--gold), 0 0 22px var(--gold); }

/* Short landscape screens (phones on their side): keep everything readable and inside the screen. */
@media (max-height: 520px) and (orientation: landscape) {
  .arena.has-board { --minion-w: clamp(44px, 7.3cqw, 128px); --card-w: clamp(56px, 8.8cqw, 150px); --hero: 9cqw; }
  .arena .minion .atk, .arena .minion .hp { min-width: 17px; min-height: 17px; font-size: max(10px, calc(var(--minion-w) * 0.15)); }
  .arena .badges i { min-width: 13px; min-height: 13px; font-size: max(8px, calc(var(--minion-w) * 0.13)); }
  .arena .hero-portrait .hp, .arena .hero-portrait .atk { min-width: 20px; font-size: max(11px, calc(var(--hero) * 0.17)) !important; }
  .arena .end-turn { font-size: 10px !important; }
  .corner-buttons button { width: 30px; height: 30px; font-size: 14px; }
  .arena .history { width: 32px; }
  .hs-cost { width: 18px; height: 18px; font-size: 11px; top: -6px; }
  .mana-text { font-size: 12px; }
  #preview .big-card, .fx-reveal .big-card { --h: min(86vh, 60vw); }
  .fx-trap-card .big-card { --h: min(70vh, 60vw); }
  .arena .reaction { font-size: 13px; padding: 6px 10px; }
  .arena .overlay .panel { max-height: 96vh; overflow-y: auto; padding: 10px 16px; }
  .arena .overlay h2 { font-size: 20px; margin: 0 0 4px; }
  .arena .overlay .sub { font-size: 12px; margin: 0 0 6px; }
  .arena .overlay .choice-row { gap: 8px; margin-top: 6px; }
  .arena .overlay .choice-row .card { width: 104px; height: 178px; padding: 0 5px 5px; }
  .arena .overlay .choice-row .card .name { font-size: 10px; }
  .arena .overlay .choice-row .card .text { font-size: 8.5px; }
  .mull-confirm { margin-top: 8px; font-size: 14px; padding: 8px 18px; }
  .game-over h2 { font-size: 32px; }
  .intro-portrait { width: 26vh; }
}
/* Minion stat gems: tucked in a little and more space between minions, so
   neighbours' Attack and Health gems never touch (7 minions still fit). */
.arena .board { gap: 1.5cqw; }
.arena.has-board .board { gap: 1.6cqw; }
.arena .minion .atk { left: -6%; }
.arena .minion .hp { right: -6%; }

/* ==== BOARD LAYER (board-layer.js) ======================================
   The painting / looping video sits behind the arena in its own layer, so
   re-rendering the battle screen never restarts it. Same 16:9 box as
   .arena.has-board. */
#board-layer { position: fixed; inset: 0; z-index: 0; display: none; background: #000; overflow: hidden; }
#board-layer.show { display: block; }
.board-backdrop { position: absolute; inset: -40px; background: #000 center / cover no-repeat; filter: blur(28px) brightness(0.35) saturate(1.2); }
.board-stage { position: absolute; left: calc((100vw - min(100vw, 177.78vh)) / 2); top: calc((100vh - min(100vh, 56.25vw)) / 2);
  width: min(100vw, 177.78vh); height: min(100vh, 56.25vw); box-shadow: 0 0 60px #000; }
.board-still, .board-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; user-select: none; pointer-events: none; }
.board-video { opacity: 0; transition: opacity 0.6s; }
.board-video.playing { opacity: 1; }
.arena.has-board { background: none !important; box-shadow: none; z-index: 1; }
#app { position: relative; z-index: 1; }
.board-anim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Your hero's gems sit on the top of the frame: the hand covers its bottom. */
.arena.has-board .hero-zone.me .hero-portrait .hp { top: -8%; bottom: auto; right: -12%; }
.arena.has-board .hero-zone.me .hero-portrait .atk { top: -8%; bottom: auto; left: -12%; }
.arena.has-board .hero-zone.me .hero-portrait .armor { top: 30%; right: -14%; }

/* ==== STAT GEMS (Hearthstone style) =====================================
   Health is a blood drop, Attack a gold gem with a dagger through it — on board
   minions, hand cards, the big preview card and heroes. The shapes are drawn in
   ::before behind the number, so the number never rotates or clips. */
.card .stats .atk, .card .stats .hp { position: relative; }
.atk, .hp, .bc-atk, .bc-hp { isolation: isolate; overflow: visible; }

.hp, .bc-hp { background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding-top: 14%; box-sizing: border-box; }
.hp::before, .bc-hp::before {
  content: ''; position: absolute; left: 15%; right: 15%; top: 24%; bottom: 6%; z-index: -1;
  border-radius: 0 50% 50% 50%; transform: rotate(45deg);
  background: radial-gradient(circle at 62% 62%, #ff9aa4 0%, #e3283f 42%, #8a0a1c 85%, #5a0410 100%);
  box-shadow: inset 0 0 0 2px #2a0208aa, inset -3px -3px 6px #ffffff33, 0 2px 4px #000c;
}

.atk, .bc-atk { background: radial-gradient(circle at 35% 30%, #fff0b0 0%, #f3c14e 40%, #b8791a 80%, #6a420a 100%) !important;
  border: 2px solid #4a2c06 !important; border-radius: 50% !important; }
.atk::before, .bc-atk::before {
  content: ''; position: absolute; inset: -42%; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='rotate(-45 50 50)'%3E%3Crect x='46' y='2' width='8' height='14' rx='3' fill='%235a3416' stroke='%23201006' stroke-width='1.5'/%3E%3Ccircle cx='50' cy='3' r='4' fill='%23d9a845' stroke='%23201006' stroke-width='1.5'/%3E%3Crect x='33' y='15' width='34' height='7' rx='3' fill='%23d9a845' stroke='%23201006' stroke-width='1.5'/%3E%3Cpath d='M43.5 22 L56.5 22 L55 82 L50 98 L45 82 Z' fill='%23e6edf3' stroke='%23303840' stroke-width='1.8'/%3E%3Cpath d='M50 24 L50 90' stroke='%23a9b4be' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 1px #000a);
}
/* Layering fix: dagger (::before) behind the gem (::after) behind the number. */
.atk, .bc-atk { background: none !important; border: none !important; }
.atk::before, .bc-atk::before { z-index: -2; }
.atk::after, .bc-atk::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff0b0 0%, #f3c14e 40%, #b8791a 80%, #6a420a 100%);
  box-shadow: inset 0 0 0 2px #4a2c06, 0 2px 4px #000c;
}
/* The drop's round body is centred on the number; its point rises above. */
.hp, .bc-hp { padding-top: 8%; }
.hp::before, .bc-hp::before { top: 19%; bottom: 11%; left: 15%; right: 15%; }
/* Readable stat numbers: white with a heavy dark outline, like Hearthstone. */
.atk, .hp, .bc-atk, .bc-hp { color: #fff; -webkit-text-stroke: 0.09em #1a0c04; paint-order: stroke fill;
  text-shadow: 0 0.06em 0.12em #000, 0 0 0.18em #000c; letter-spacing: -0.02em; }
.atk.up, .hp.up { color: #b6ffcb; }
.atk.down, .hp.down { color: #ffd0d6; }
.hp.down { color: #ffd0d6; }
/* Blood drop body = the same diameter as the Attack gem; its point rises above. */
.hp::before, .bc-hp::before { left: 2%; right: 2%; top: 8%; bottom: -4%; }
.hp, .bc-hp { padding-top: 10%; }
/* Percent padding is measured against the parent's width (64px inside the big
   card); nudge the Health number with an em-based offset instead. */
.hp, .bc-hp { padding-top: 0.22em !important; }
/* Attack: a steel shuriken behind the gold gem (replaces the dagger). Its four
   points stick out diagonally around the number. */
.atk::before, .bc-atk::before {
  inset: -34%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f4f7fa'/%3E%3Cstop offset='0.5' stop-color='%23a9b4c0'/%3E%3Cstop offset='1' stop-color='%23505a66'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(45 50 50)'%3E%3Cpath d='M50 1 L58 38 Q62 42 99 50 L58 58 Q62 62 50 99 L42 62 Q38 58 1 50 L42 42 Q38 38 50 1 Z' fill='url(%23s)' stroke='%23262c33' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M50 6 L50 94 M6 50 L94 50' stroke='%23ffffff66' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 1.5px #000c);
}

/* ==== ZOMBIES ============================================================ */
.big-card.f-zombies { --frame: #3f4a2a; --frame-hi: #9ac85a; --body: #161a10; }
.arena.f-zombies { --felt: #262e1c; --felt-2: #0e120a; --rim: #6a8a3e; }
.fx-p.ooze { width: 9px; height: 11px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #e2ff9a, #8bd43a 55%, #3c6a12); box-shadow: 0 0 6px #9cff4a88; }
.corpse-badge { position: relative; width: calc(var(--hero) * 0.46); height: calc(var(--hero) * 0.46); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #3a4428, #10140a); border: 3px solid #8bd43a; font-size: calc(var(--hero) * 0.2); box-shadow: 0 0 10px #8bd43a66; }
.corpse-badge.empty { opacity: 0.55; box-shadow: none; }
.corpse-badge b { position: absolute; bottom: -6px; right: -6px; background: #8bd43a; color: #10140a; border-radius: 50%; width: 22px; height: 22px;
  display: grid; place-items: center; font-family: var(--font-title); font-size: 13px; }

/* ==== HEARTHSTONE LOOK: cards, oval minions, Hero Spell ==================
   Every card (hand, collection, choices, previews) is the same big-card frame;
   small cards are containers and the frame scales from their height. */

/* --- 1. Card frame --- */
.big-card {
  border: 0.42em solid #2c2a2e;
  box-shadow: 0 0 0 0.12em #000c, inset 0 0 0 0.22em #c9a35a, inset 0 0 0 0.4em #00000055, 0 2em 5em #000c;
  background:
    radial-gradient(110% 55% at 50% 0%, #ffffff18, transparent 60%),
    radial-gradient(90% 40% at 50% 100%, #00000066, transparent 70%),
    linear-gradient(170deg, var(--frame-hi), var(--frame) 38%, var(--body));
}
.big-card.f-zombies { --frame: #3f4a2a; --frame-hi: #9ac85a; --body: #161a10; }
/* Minion art: an oval portrait window with a gold rim. */
.t-minion .bc-art { top: 1.5em; width: 20.5em; height: 24.5em; border-radius: 50%;
  border: 0.45em solid #c9a35a; box-shadow: 0 0 0 0.18em #3a2a14, inset 0 0 1.2em #000c, 0 0.6em 1.4em #000a; }
/* Spell / Trap art: an arched window. */
.t-spell .bc-art, .t-trap .bc-art { top: 1.8em; width: 24em; height: 21.5em; border-radius: 3em 3em 1.2em 1.2em;
  border: 0.4em solid #c9a35a; box-shadow: 0 0 0 0.18em #3a2a14, inset 0 0 1.2em #000a, 0 0.6em 1.4em #000a; }
.t-trap .bc-art { border-color: #a46bff; }
.big-card.t-trap { border-style: solid; border-width: 0.42em; box-shadow: 0 0 0 0.12em #000c, inset 0 0 0 0.22em #a46bff, inset 0 0 0 0.4em #00000055, 0 2em 5em #000c; }
/* Curved name ribbon (SVG). */
.bc-ribbon { position: absolute; left: 50%; transform: translateX(-50%); width: 27.5em; height: 6.4em; overflow: visible;
  filter: drop-shadow(0 0.35em 0.4em #000b); }
.t-minion .bc-ribbon { top: 21.2em; }
.t-spell .bc-ribbon, .t-trap .bc-ribbon { top: 20.3em; }
.rb-back { fill: #8a6d3e; stroke: #3a2810; stroke-width: 2; }
.rb-band { fill: #e7d3a4; stroke: #5a4426; stroke-width: 2.5; }
.rb-shine { fill: none; stroke: #fff6dc; stroke-width: 3; opacity: 0.55; }
.rb-text { font-family: var(--font-title); font-weight: 900; fill: #2a1a0a; letter-spacing: 0.4px; }
/* Parchment text box. */
.bc-text { top: 27.6em; height: 8.3em; width: 23.4em; border-radius: 0.9em 0.9em 1.6em 1.6em;
  background: radial-gradient(120% 90% at 50% 40%, #f6ecd6, #e2cfa8); border: 0.18em solid #7a6038;
  box-shadow: inset 0 0 0.8em #8a6d3e66; }
/* Blue mana crystal. */
.bc-cost { top: -0.55em; left: -0.55em; width: 2.35em; height: 2.35em; font-size: 2.1em;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: radial-gradient(circle at 38% 30%, #e6f2ff 0%, #7fb2ff 22%, #2f6fe0 55%, #163a8a 100%);
  color: #fff; -webkit-text-stroke: 0.08em #0c1c44; paint-order: stroke fill; text-shadow: 0 0.06em 0.12em #000; filter: drop-shadow(0 0.1em 0.15em #000c); }
.bc-cost.cheaper { background: radial-gradient(circle at 38% 30%, #e6ffe9, #6ee08a 30%, #1f9a46 100%); }
.bc-cost.pricier { background: radial-gradient(circle at 38% 30%, #ffe6e9, #ff8a9a 30%, #b3122e 100%); }
.bc-type { bottom: 0.7em; background: #1a1210e6; border-color: #c9a35a; color: #f3e2b8; }
.bc-atk, .bc-hp { font-size: 2.3em; }

/* Small cards: the frame fills the .card, scaled from its height. */
.card:not(.back) { container-type: size; aspect-ratio: 0.72; height: auto !important; padding: 0 !important;
  background: none !important; border: none !important; border-radius: 0.9em; display: block; overflow: visible; }
.card:not(.back) > .big-card { --h: 100cqh; width: 100%; height: 100%; font-size: calc(100cqh / 40); position: absolute; inset: 0; }
.card.playable > .big-card { box-shadow: 0 0 0 0.12em #000c, inset 0 0 0 0.22em #c9a35a, 0 0 0 0.35em #57e07a, 0 0 1.4em #57e07a; }
.arena .my-hand .card.playable { box-shadow: none; }
.card.quick.playable > .big-card { box-shadow: 0 0 0 0.12em #000c, inset 0 0 0 0.22em #c9a35a, 0 0 0 0.35em #ffd25a, 0 0 1.4em #ffd25a; }
.card .pending-tag, .card .cut-tag, .card .dupe-tag, .card .card-zoom { z-index: 5; }
.card.cut > .big-card { filter: grayscale(0.85) brightness(0.6); }

/* Card sizes (width sets everything; height follows the 0.72 card shape). */
.card:not(.back) { width: 160px; }
.gallery-grid .card:not(.back) { width: 190px; }
.choice-row .card:not(.back) { width: 170px; }
.arena .my-hand { height: calc(var(--card-w) * 1.45); }
.arena .my-hand .card:not(.back) { width: var(--card-w); }
@media (max-width: 860px) { .card:not(.back), .gallery-grid .card:not(.back) { width: 130px; } }
@media (max-height: 520px) and (orientation: landscape) { .arena .overlay .choice-row .card:not(.back) { width: 100px; } }

/* --- 2. Oval minions on the board --- */
.arena .minion { border-radius: 50%; }
.m-art { border-radius: 50% !important; border: 3px solid #c9a35a; box-shadow: 0 0 0 2px #2a1c0c, inset 0 0 12px #000c, 0 6px 14px #000b;
  background-size: 118% auto; background-position: center 18%; }
.m-art::after { border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, transparent 55%, #000a 100%); }
.m-fx, .kw-evade .m-speed { border-radius: 50% !important; }
.kw-taunt .m-art { border-color: #d6d0c4; }
/* Ready / target glows follow the oval, not the box. */
.arena .minion.can-attack, .arena .minion.targetable { box-shadow: none !important; }
.arena .minion.can-attack .m-art { box-shadow: 0 0 0 2px #2a1c0c, 0 0 0 5px #57e07a, 0 0 16px #57e07a, inset 0 0 12px #000c; }
.arena.aiming .minion.can-attack .m-art { box-shadow: 0 0 0 2px #2a1c0c, inset 0 0 12px #000c; }
.arena .minion.targetable .m-art { box-shadow: 0 0 0 2px #2a1c0c, 0 0 0 5px var(--target), 0 0 20px var(--target), inset 0 0 12px #000c !important; }
.arena .minion .atk { left: -4%; bottom: -4%; }
.arena .minion .hp { right: -4%; bottom: -4%; }
.slot-gap { border-radius: 50%; }

/* --- 3. Hero Spell button: gold-rimmed coin that flips when used --- */
.hero-spell { perspective: 400px; background: none !important; border: none !important; box-shadow: none !important; overflow: visible; }
.hs-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.5s; border-radius: 50%; }
.hero-spell.used .hs-flip { transform: rotateY(180deg); }
.hs-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; backface-visibility: hidden;
  border: 3px solid #c9a35a; box-shadow: 0 0 0 2px #2a1c0c, inset 0 0 10px #000c, 0 6px 14px #000b; background: #1b0f15; }
.hs-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-face > span { display: grid; place-items: center; height: 100%; font-size: calc(var(--hero) * 0.3); }
.hs-face.back { transform: rotateY(180deg); background: radial-gradient(circle at 40% 35%, #4a3a2a, #120c08); display: grid; place-items: center; }
.hs-face.back::after { content: '✓'; color: #8a7a60; font-family: var(--font-title); font-size: calc(var(--hero) * 0.24); }
.hero-spell.usable .hs-face.front { border-color: #57e07a; box-shadow: 0 0 0 2px #1a3a20, 0 0 14px #57e07a, inset 0 0 10px #000a; animation: hs-ready 1.2s ease-in-out infinite alternate; }
@keyframes hs-ready { to { box-shadow: 0 0 0 2px #1a3a20, 0 0 24px #57e07a, inset 0 0 10px #000a; } }
.hero-spell:disabled:not(.used) .hs-face.front img { filter: grayscale(0.6) brightness(0.65); }
.hero-spell .hs-cost { z-index: 3; }
.hero-spell.used .hs-cost { opacity: 0; }
/* Small cards: larger description text (fitText shrinks long text to fit). */
.card .bc-text span { font-size: 2.05em; line-height: 1.15; }
.card .bc-type { font-size: 1.25em; }

/* Reborn: ghostly blue crackles flicker across the portrait, with a spectral glow.
   Two crackle layers flicker out of step so the lightning never looks static. */
.m-ghost { display: none; }
.kw-reborn .m-ghost { display: block; position: absolute; inset: 0; z-index: 4; border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cg fill='none' stroke='%23bfeaff' stroke-width='1.6' stroke-linejoin='bevel' stroke-linecap='round'%3E%3Cpath d='M18 14 L30 30 L24 36 L38 52 L33 58 L46 74'/%3E%3Cpath d='M30 30 L40 26 L46 34'/%3E%3Cpath d='M82 22 L70 40 L77 47 L62 64 L68 70 L56 88'/%3E%3Cpath d='M70 40 L60 37'/%3E%3Cpath d='M10 70 L22 78 L16 88 L30 100'/%3E%3Cpath d='M88 78 L76 86 L82 96 L70 108'/%3E%3Cpath d='M50 6 L54 18 L47 26 L52 36'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.6' stroke-linecap='round'%3E%3Cpath d='M18 14 L30 30 L24 36 L38 52 L33 58 L46 74'/%3E%3Cpath d='M82 22 L70 40 L77 47 L62 64 L68 70 L56 88'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(ellipse at 50% 45%, #6fd8ff00 40%, #6fd8ff40 85%, #9fe8ff70 100%);
  filter: drop-shadow(0 0 2px #7fdcff) drop-shadow(0 0 5px #3aa8ff);
  animation: ghost-crackle 1.7s steps(1) infinite; }
.kw-reborn .m-ghost.two { transform: scaleX(-1) rotate(8deg); animation: ghost-crackle 2.3s steps(1) infinite 0.6s; }
@keyframes ghost-crackle {
  0% { opacity: 0.9; } 8% { opacity: 0.15; } 12% { opacity: 1; } 30% { opacity: 0.55; } 34% { opacity: 0; }
  52% { opacity: 0.8; } 56% { opacity: 0.25; } 70% { opacity: 1; } 74% { opacity: 0.4; } 90% { opacity: 0.05; }
}
/* Cold, slightly translucent ghost tint and a soft blue aura around the oval. */
.kw-reborn .m-art { border-color: #9fe8ff !important; filter: saturate(0.75) brightness(1.05) hue-rotate(-8deg);
  box-shadow: 0 0 0 2px #10304a, 0 0 12px #5ac8ff, 0 0 26px #2a8aff88, inset 0 0 16px #7fdcff99 !important;
  animation: ghost-aura 2.6s ease-in-out infinite; }
@keyframes ghost-aura { 50% { box-shadow: 0 0 0 2px #10304a, 0 0 18px #7fdcff, 0 0 36px #3aa8ffaa, inset 0 0 22px #bfeaffbb; } }
/* A minion that is both Reborn and ready/targetable keeps that ring on top of the aura. */
.arena .minion.can-attack.kw-reborn .m-art { box-shadow: 0 0 0 2px #2a1c0c, 0 0 0 5px #57e07a, 0 0 16px #57e07a, 0 0 26px #3aa8ff88, inset 0 0 16px #7fdcff99 !important; }
@media (prefers-reduced-motion: reduce) { .kw-reborn .m-ghost, .kw-reborn .m-art { animation: none !important; } }

/* ==== POLISH PASS: spells, hand feel, entrances, draws, mana, mulligan, summary ==== */

/* --- Spell effects --- */
.fx-bolt { position: fixed; width: 34px; height: 34px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 18%, var(--c) 40%, transparent 72%);
  box-shadow: 0 0 18px var(--c), 0 0 36px var(--c); }
.fx-bolt::after { content: ''; position: absolute; inset: -60% 30%; border-radius: 50%;
  background: radial-gradient(ellipse, var(--c), transparent 70%); opacity: 0.6; filter: blur(4px); }
.fx-burst.spell { border-color: #fff3c4; box-shadow: 0 0 24px #fff3c4, inset 0 0 24px #fff3c4; }
.fx-sparkle { position: fixed; width: 9px; height: 9px; pointer-events: none;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.fx-sparkle.heal { background: radial-gradient(circle, #fff, #8affb0 50%, #3acf6a); filter: drop-shadow(0 0 4px #8affb0); }
.fx-sparkle.buff { background: radial-gradient(circle, #fff, #ffe39a 50%, #e7b552); filter: drop-shadow(0 0 4px #ffd25a); }
.fx-shockwave { position: fixed; border-radius: 50%; pointer-events: none; border: 4px solid var(--c);
  box-shadow: 0 0 30px var(--c), inset 0 0 30px var(--c); }

/* --- Hand feel --- */
.arena .my-hand .card { transform: translate(calc(-50% + var(--x, 0px) + var(--push, 0px)), calc(26% + var(--y, 0px))) rotate(var(--rot, 0deg)); }
.arena.has-board .my-hand .card { transform: translate(calc(-50% + var(--x, 0px) + var(--push, 0px)), calc(60% + var(--y, 0px))) rotate(var(--rot, 0deg)); }
.arena .my-hand .card.dim > .big-card { filter: brightness(0.62) saturate(0.7); }
.arena .my-hand .card.dim:hover > .big-card { filter: none; }
.card.respond > .big-card { animation: respond-pulse 0.8s ease-in-out infinite alternate;
  box-shadow: 0 0 0 0.12em #000c, inset 0 0 0 0.22em #c9a35a, 0 0 0 0.35em #ffd25a, 0 0 1.6em #ffd25a; }
@keyframes respond-pulse { to { box-shadow: 0 0 0 0.12em #000c, inset 0 0 0 0.22em #c9a35a, 0 0 0 0.5em #ffe9a0, 0 0 3em #ffd25a; } }
.fx-ghost.dragging { transform: rotate(var(--tilt, 3deg)) scale(1.05) !important; transition: transform 0.1s; }
.fx-ghost.dragging.lifted { transform: rotate(var(--tilt, 0deg)) scale(0.75) !important; }

/* --- Big entrance name flash --- */
.fx-entrance { position: fixed; pointer-events: none; white-space: nowrap; padding: 4px 18px; border-radius: 6px;
  background: linear-gradient(90deg, transparent, #000c 15%, #000c 85%, transparent); }
.fx-entrance span { font-family: var(--font-title); font-weight: 900; font-size: clamp(16px, 1.8vw, 28px); letter-spacing: 0.05em;
  background: linear-gradient(#fff3c4, #e7b552 60%, #8a5a12); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 3px #000); }

/* --- Card draw flip & burned cards --- */
.fx-drawflip { position: fixed; pointer-events: none; transform-style: preserve-3d; z-index: 1000; }
.fx-drawflip .df-front, .fx-drawflip .df-back { backface-visibility: hidden; }
.fx-drawflip .df-back { position: absolute; inset: 0; transform: rotateY(180deg); border-radius: 0.6em;
  border: 3px solid #c9a35a; box-shadow: 0 6px 18px #000c;
  background: radial-gradient(circle at 50% 45%, #7a2a3c 0 18%, transparent 19%),
    repeating-linear-gradient(45deg, #3a1622, #3a1622 6px, #2b1019 6px, #2b1019 12px); }
.fx-burn { position: fixed; left: 50%; top: 46%; transform: translate(-50%, -50%); pointer-events: none; z-index: 1001; }
.fx-burn .big-card { --h: min(42vh, 60vw); }

/* --- Mana crystals: faceted Hearthstone-style gems --- */
.crystal { width: 16px; height: 18px; transform: none !important; border: none !important; border-radius: 0;
  clip-path: polygon(50% 0, 100% 30%, 82% 100%, 18% 100%, 0 30%); background: #0b1426; position: relative; }
.crystal.full { background: linear-gradient(160deg, #e6f2ff 0%, #8fbfff 25%, #2f6fe0 55%, #163a8a 100%); box-shadow: none;
  filter: drop-shadow(0 0 4px #4c8dff); }
.crystal.bonus { background: linear-gradient(160deg, #fff6d0 0%, #ffd36a 30%, #c98a1e 70%, #6a420a 100%); filter: drop-shadow(0 0 4px #e7b552); }
.crystal.spent { background: linear-gradient(160deg, #3a4a6a, #1a2438 60%, #0e1424); }
.crystal.locked { background: #0b1222; opacity: 0.45; }
.crystal.full::after, .crystal.bonus::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, #ffffffaa 42%, transparent 52%); }
.mana-bar.opp .crystal { width: 11px; height: 12px; }
.arena.has-board .mana-bar.me .crystal { width: clamp(9px, 0.95cqw, 18px); height: clamp(10px, 1.07cqw, 20px); }

/* --- End Turn confirm, Concede --- */
.end-turn.confirm { background: linear-gradient(#ff9a6a, #c9461e); color: #2a0a00; border-color: #ffd0b0; animation: end-glow 0.5s infinite alternate; }
.concede-panel .danger, button.danger { background: linear-gradient(#e04461, #8a1028); border-color: #ff9aa9; color: #fff; }

/* --- Starting Hand (mulligan) --- */
.mull-overlay { background: radial-gradient(ellipse at 50% 45%, #0008, #000d 75%); }
.mulligan-hs { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mull-banner { text-align: center; padding: 10px 70px 14px; position: relative;
  background: linear-gradient(180deg, #f3e2b8, #c9a96e); color: #2a1a0a; border: 3px solid #6a5434; border-radius: 8px;
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); box-shadow: 0 0 40px #4c8dff88;
  filter: drop-shadow(0 0 18px #6fa8ff); }
.mull-banner span { display: block; font-family: var(--font-title); font-weight: 900; font-size: clamp(26px, 3.4vw, 46px); }
.mull-banner small { display: block; font-family: var(--font-title); font-weight: 700; font-size: clamp(14px, 1.5vw, 20px); color: #8a5a12; }
.mull-who { margin: 0; color: #e8d6b0; font-family: var(--font-title); }
.mull-hint { margin: 0 auto; max-width: 34em; padding: 0 16px; color: #cdbb96; font-size: clamp(13px, 1.4vw, 16px); text-align: center; line-height: 1.35; }
.mull-hint b { color: #f2d58a; }
.mull-pricey { position: absolute; left: 50%; bottom: -1.5em; transform: translateX(-50%); padding: 0.15em 0.7em; border-radius: 1em;
  background: #2a1a10ee; border: 1px solid #f2b45a; color: #ffd27a; font-size: clamp(11px, 1.2vw, 14px); font-weight: 700; white-space: nowrap; pointer-events: none; }
.mull-row { display: flex; gap: clamp(10px, 2vw, 28px); justify-content: center; }
.mull-row .card:not(.back) { width: clamp(130px, 15vw, 220px); }
.mull-slot { position: relative; cursor: pointer; transition: transform 0.18s; }
.mull-slot:hover { transform: translateY(-8px) scale(1.03); }
.mull-slot > .card > .big-card { box-shadow: 0 0 0 0.12em #000c, inset 0 0 0 0.22em #c9a35a, 0 0 0 0.35em #57e07a, 0 0 1.6em #57e07a; }
.mull-x { position: absolute; inset: 0; display: none; place-items: center; font-size: clamp(80px, 10vw, 150px); font-weight: 900;
  color: #ff3a4a; text-shadow: 0 0 10px #000, 0 0 24px #ff3a4a; pointer-events: none; z-index: 6; }
.mull-slot.marked .mull-x { display: grid; }
.mull-slot.marked > .card > .big-card { filter: brightness(0.6) grayscale(0.4); box-shadow: 0 0 0 0.12em #000c, inset 0 0 0 0.22em #c9a35a; }
.mull-confirm { font-family: var(--font-title); font-weight: 900; font-size: 22px; padding: 12px 46px; border-radius: 40px;
  background: radial-gradient(ellipse at 50% 30%, #bfe0ff, #3d7cff 60%, #163a8a); color: #fff; border: 3px solid #cfe3ff;
  text-shadow: 0 2px 4px #000; box-shadow: 0 0 24px #4c8dff; animation: mull-glow 1.2s ease-in-out infinite alternate; }
@keyframes mull-glow { to { box-shadow: 0 0 44px #6fa8ff, 0 0 8px #fff; } }

/* --- Game summary --- */
.game-over .summary { text-align: center; min-width: min(460px, 92vw); position: relative; padding-top: 70px; }
.summary-hero { position: absolute; left: 50%; top: -60px; transform: translateX(-50%); width: 120px; height: 120px; border-radius: 50%;
  object-fit: cover; box-shadow: 0 0 0 4px #c9a35a, 0 0 0 7px #3a2a14, 0 10px 24px #000c; }
.game-over.loss .summary-hero { filter: grayscale(0.8) brightness(0.7); }
.game-over.win h2 { color: #ffd25a; text-shadow: 0 0 20px #e7b552; }
.summary-table { margin: 10px auto 12px; border-collapse: collapse; font-size: 15px; }
.summary-table th { text-align: left; padding: 4px 14px 4px 0; color: #cbb8a0; font-weight: 600; }
.summary-table td { padding: 4px 12px; text-align: center; font-family: var(--font-title); font-weight: 700; color: #f3e2b8; }
.summary-table tr:first-child td { font-size: 13px; color: #e8d6b0; border-bottom: 1px solid #ffffff22; }
.best-play { margin: 0 0 14px; color: #e8d6b0; }
.best-play b { color: #ffd25a; }
@media (max-height: 520px) and (orientation: landscape) {
  .mull-row .card:not(.back) { width: 110px; }
  .mull-banner { padding: 4px 40px 6px; }
  .game-over .summary { padding-top: 10px; }
  .summary-hero { display: none; }
}

/* ==== CARD TYPE COLOURS =====================================================
   Minions keep the faction colour. Spells use a contrasting magical shade of
   the faction with a soft arcane glow; Traps use a dark, hidden shade with a
   diagonal "danger" weave. (--frame / --frame-hi / --body drive the frame.) */
.big-card.t-spell.f-vampires  { --frame: #4a1f6e; --frame-hi: #a86ae0; --body: #1a0a2a; }  /* blood magic violet */
.big-card.t-trap.f-vampires   { --frame: #2e2a32; --frame-hi: #8a2a3c; --body: #0c0a0e; }  /* black iron, crimson */
.big-card.t-spell.f-dinosaurs { --frame: #8a3a12; --frame-hi: #f08a2a; --body: #2a0f04; }  /* volcanic orange */
.big-card.t-trap.f-dinosaurs  { --frame: #34442a; --frame-hi: #7a9a4a; --body: #10180a; }  /* jungle moss */
.big-card.t-spell.f-plants    { --frame: #1f5a5a; --frame-hi: #4ad0c0; --body: #0a2422; }  /* living water teal */
.big-card.t-trap.f-plants     { --frame: #4a321c; --frame-hi: #a87a44; --body: #1a1008; }  /* thorned bark */
.big-card.t-spell.f-aliens    { --frame: #3a2a7a; --frame-hi: #8a7aff; --body: #100c30; }  /* psionic indigo */
.big-card.t-trap.f-aliens     { --frame: #26421a; --frame-hi: #8ae04a; --body: #0c1808; }  /* toxic green */
.big-card.t-spell.f-fungus    { --frame: #6a2a4a; --frame-hi: #e06aa8; --body: #240e1a; }  /* spore magenta */
.big-card.t-trap.f-fungus     { --frame: #3a3a1c; --frame-hi: #a8a84a; --body: #14140a; }  /* rot olive */
.big-card.t-spell.f-zombies   { --frame: #2a3a62; --frame-hi: #7a9ae0; --body: #0c1222; }  /* grave-cold blue */
.big-card.t-trap.f-zombies    { --frame: #4a2a1a; --frame-hi: #b8683a; --body: #1a0e08; }  /* rust */
.big-card.t-spell.f-neutral   { --frame: #2a4a7a; --frame-hi: #7ab0ff; --body: #0c1a30; }

/* Spells: an arcane glow and faint rune rings behind the art. */
.big-card.t-spell {
  background:
    radial-gradient(60% 45% at 50% 30%, color-mix(in srgb, var(--frame-hi) 45%, transparent), transparent 70%),
    repeating-radial-gradient(circle at 50% 30%, transparent 0 1.6em, #ffffff10 1.6em 1.75em),
    linear-gradient(170deg, var(--frame-hi), var(--frame) 40%, var(--body));
}
.big-card.t-spell .bc-art { border-color: var(--frame-hi); box-shadow: 0 0 0 0.18em #000a, 0 0 1.4em var(--frame-hi), inset 0 0 1.2em #000a; }
.big-card.t-spell .bc-type { border-color: var(--frame-hi); color: #fff; background: color-mix(in srgb, var(--frame) 70%, #000); }

/* Traps: dark weave and a hazard-striped type plate. */
.big-card.t-trap {
  background:
    repeating-linear-gradient(45deg, #ffffff07 0 0.5em, transparent 0.5em 1.4em),
    radial-gradient(70% 50% at 50% 100%, color-mix(in srgb, var(--frame-hi) 30%, transparent), transparent 70%),
    linear-gradient(170deg, var(--frame), var(--body) 55%, #000);
  box-shadow: 0 0 0 0.12em #000c, inset 0 0 0 0.22em var(--frame-hi), inset 0 0 0 0.4em #00000088, 0 2em 5em #000c;
}
.big-card.t-trap .bc-art { border-color: var(--frame-hi); }
.big-card.t-trap .bc-type { color: #fff; border-color: var(--frame-hi);
  background: repeating-linear-gradient(45deg, #000 0 0.5em, color-mix(in srgb, var(--frame-hi) 60%, #000) 0.5em 1em); }

/* ==== TAVERN MENU ======================================================= */
body:not(.in-game) { background:
  radial-gradient(ellipse 60% 40% at 50% 0%, #ffb35a33, transparent 70%),
  radial-gradient(ellipse 50% 50% at 15% 100%, #ff7a2a22, transparent 70%),
  repeating-linear-gradient(90deg, #2a1810 0 46px, #24140c 46px 48px, #2e1a10 48px 96px),
  #1c1008; }
.menu.tavern { max-width: 1060px; text-align: center; }
.tavern-sign { display: inline-block; padding: 18px 60px 22px; margin-bottom: 8px; border-radius: 14px;
  background: linear-gradient(180deg, #6a4424, #3a2412); border: 4px solid #c9a35a;
  box-shadow: 0 0 0 3px #2a1808, inset 0 0 24px #000a, 0 14px 40px #000c, 0 0 60px #ffb35a33; }
.tavern-sign h1 { color: transparent; background: linear-gradient(#fff3c4, #e7b552 55%, #8a5a12); -webkit-background-clip: text; background-clip: text;
  text-shadow: none; filter: drop-shadow(0 3px 2px #000); font-size: clamp(36px, 6vw, 64px); }
.menu.tavern .menu-buttons { justify-content: center; }
.menu.tavern .menu-buttons button { font-family: var(--font-title); font-weight: 900; font-size: 18px; padding: 14px 26px; border-radius: 10px;
  background: linear-gradient(180deg, #8a5a2e, #4a2c14); color: #fff3c4; border: 3px solid #c9a35a; text-shadow: 0 2px 2px #000;
  box-shadow: 0 6px 0 #2a1808, 0 10px 20px #000a; transition: transform 0.1s, box-shadow 0.1s; }
.menu.tavern .menu-buttons button:hover { transform: translateY(-2px); filter: brightness(1.15); }
.menu.tavern .menu-buttons button:active { transform: translateY(4px); box-shadow: 0 2px 0 #2a1808, 0 4px 10px #000a; }
.menu.tavern .menu-buttons button.ghost { background: linear-gradient(180deg, #4a3a2a, #2a1e14); }
.menu.tavern .factions { justify-content: center; gap: 10px; }
.faction.medallion { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: none; background: none; cursor: pointer; position: relative; }
.medal-face { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 40px;
  border: 4px solid #8a6d3e; box-shadow: 0 0 0 3px #2a1808, 0 8px 18px #000c; background: #1a1008; transition: transform 0.15s, box-shadow 0.15s; }
.medal-face img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: saturate(0.75) brightness(0.8); }
.medal-name { font-family: var(--font-title); font-weight: 700; font-size: 14px; color: #e8d6b0; text-shadow: 0 1px 2px #000; }
.faction.medallion:hover .medal-face { transform: translateY(-3px) scale(1.05); }
.faction.medallion.picked .medal-face { border-color: #ffd25a; box-shadow: 0 0 0 3px #2a1808, 0 0 22px #ffd25a, 0 8px 18px #000c; }
.faction.medallion.picked .medal-face img { filter: none; }
.medal-check { position: absolute; top: -4px; right: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: #57e07a; color: #06240f; font-weight: 900; box-shadow: 0 2px 6px #000a; }
.menu.tavern .legend { display: none; }
.menu.tavern .deck-line { background: #2a1a10cc; border: 2px solid #6a4a2a; }

/* ==== COLLECTION BOOK =================================================== */
.book { max-width: 1500px; margin: 0 auto; padding: 32px 16px; }
.book-head { display: flex; justify-content: space-between; align-items: center; }
.book-body { display: flex; align-items: flex-start; }
.book-tabs { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 6px; padding-top: 30px; z-index: 2; margin-right: -4px; }
.book-tab { display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 10px 0 0 10px; min-width: 150px; text-align: left;
  background: linear-gradient(90deg, #3a2414, #5a3a20); border: 2px solid #8a6d3e; border-right: none; color: #e8d6b0; font-family: var(--font-title);
  box-shadow: -4px 4px 10px #000a; transform: translateX(10px); transition: transform 0.15s; }
.crest { display: inline-block; flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; vertical-align: -0.38em; font-style: normal;
  background-size: 175% auto; background-position: 50% 45%; background-repeat: no-repeat; background-color: #15121a;
  border: 2px solid #c9a96e; box-shadow: 0 1px 4px #0009; }
.crest-fusion { background: conic-gradient(from 45deg, #ff8a4a, #ffd76a, #7ad0ff, #c88aff, #ff8a4a); }
.book-tab .crest { width: 30px; height: 30px; }
.zoom-faction > span { display: inline-flex; align-items: center; gap: 8px; }
.book-tab:hover { transform: translateX(4px); }
.book-tab.on { transform: translateX(0); background: linear-gradient(90deg, #6a4424, #e8d6a8 98%); color: #2a1a0a; }
.book-page { flex: 1; min-height: 70vh; padding: 22px 26px 30px; border-radius: 6px 18px 18px 6px;
  background: radial-gradient(ellipse at 30% 0%, #fff8e4, #ead9b0 60%, #d8c08a); color: #2a1a0a;
  border: 3px solid #6a4a24; box-shadow: inset 18px 0 30px -14px #6a4a2466, inset 0 0 50px #8a6d3e55, 0 20px 50px #000c; }
.book-page.turn { animation: page-turn 0.45s ease-out; transform-origin: left center; }
@keyframes page-turn { from { transform: perspective(1400px) rotateY(-28deg); opacity: 0.3; } }
.page-title { display: flex; align-items: center; gap: 16px; border-bottom: 2px solid #8a6d3e66; padding-bottom: 12px; }
.page-title img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; object-position: center 22%; border: 3px solid #8a6d3e; }
.page-title h3 { margin: 0; font-size: 30px; color: #3a2210; }
.page-title .sub { color: #6a5434; }
.book-page .gallery-grid { margin-top: 20px; }
@media (max-width: 860px) {
  .book-body { flex-direction: column; }
  .book-tabs { position: static; flex-direction: row; flex-wrap: wrap; padding-top: 0; margin: 0 0 -2px; }
  .book-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 4px; margin: 0 0 8px; align-self: stretch; }
  .book-tab { min-width: 0; padding: 6px; gap: 5px; border-radius: 10px; transform: none; border-right: 2px solid #8a6d3e; }
  .book-tab:hover { transform: none; }
  .book-tab .crest { width: 22px; height: 22px; }
  .book-tab b { font-size: 10px; line-height: 1.1; min-width: 0; hyphens: manual; }
}

/* ==== EMOTES ============================================================ */
#emote-wheel { position: fixed; inset: 0; z-index: 1300; pointer-events: none; }
.emote-btn { position: fixed; transform: translate(-50%, -50%); pointer-events: auto; white-space: nowrap; font-family: var(--font-title); font-weight: 700;
  font-size: 14px; padding: 8px 14px; border-radius: 20px; background: linear-gradient(180deg, #f3e2b8, #c9a96e); color: #2a1a0a;
  border: 2px solid #6a5434; box-shadow: 0 4px 12px #000c; animation: emote-pop 0.18s ease-out; }
.emote-btn:hover { background: linear-gradient(180deg, #fff6dc, #e7c88a); transform: translate(-50%, -50%) scale(1.08); }
@keyframes emote-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } }
.emote-bubble { position: fixed; z-index: 1250; max-width: 260px; padding: 10px 16px; border-radius: 18px; pointer-events: none;
  background: #f4ead6; color: #2a1a0a; font-family: var(--font-title); font-weight: 700; font-size: 15px; line-height: 1.25;
  box-shadow: 0 6px 18px #000c; border: 2px solid #6a5434; }
.emote-bubble::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  border: 8px solid transparent; border-right: 12px solid #6a5434; }
.arena .hero-zone.me .hero-portrait:not(.can-attack) { cursor: pointer; }
.menu.tavern .factions { align-items: flex-start; }
.menu.tavern .faction:not(.medallion) { align-self: center; opacity: 0.55; }
/* Emote buttons stay put: centred with the separate \`translate\` property, so
   button press styles that set \`transform\` can't shove them; hover/press only glow. */
.emote-btn, .emote-btn:hover, .emote-btn:active, .emote-btn:focus { transform: none !important; translate: -50% -50%; }
.emote-btn { transition: background 0.12s, box-shadow 0.12s, color 0.12s; animation: emote-pop2 0.18s ease-out; }
@keyframes emote-pop2 { from { opacity: 0; scale: 0.5; } }
.emote-btn:hover { background: linear-gradient(180deg, #fff6dc, #f0d08a); box-shadow: 0 0 0 2px #ffd25a, 0 0 16px #ffd25a, 0 4px 12px #000c; }
.emote-btn:active { background: linear-gradient(180deg, #ffe39a, #e7b552); box-shadow: 0 0 0 3px #fff3c4, 0 0 22px #ffd25a; }

/* ==== BATCH: feel, warnings, cards, loader, settings ======================= */
/* Deaths */
.fx-glyph { position: fixed; pointer-events: none; filter: drop-shadow(0 2px 3px #000c); }
/* Painted effect sprites (fx.js SPRITES) take the place of the emoji at the same size. */
.has-sprite img { display: block; width: 1.25em; height: 1.25em; object-fit: contain; pointer-events: none; }

.fx-teleport { position: fixed; pointer-events: none; border-radius: 40%;
  background: linear-gradient(90deg, transparent, #9fffe8cc 30%, #ffffff 50%, #9fffe8cc 70%, transparent); box-shadow: 0 0 30px #5affd8; }

/* Low Health: the screen edges pulse red. */
.arena.low-hp::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 70;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, #c4141e55 85%, #8a0410aa 100%); animation: low-hp 1.1s ease-in-out infinite; }
@keyframes low-hp { 50% { opacity: 0.45; } }

/* Lethal: the enemy hero glows red and a tag appears. */
.hero-portrait.lethal { animation: lethal-pulse 0.7s ease-in-out infinite alternate; }
@keyframes lethal-pulse { from { box-shadow: 0 0 0 3px #ff3a4a, 0 0 20px #ff3a4a; } to { box-shadow: 0 0 0 5px #ffd0d6, 0 0 44px #ff3a4a; } }
.lethal-tag { position: absolute; left: 50%; top: 22cqh; transform: translateX(-50%); z-index: 40; pointer-events: none;
  font-family: var(--font-title); font-weight: 900; font-size: clamp(14px, 1.6cqw, 26px); letter-spacing: 0.12em; color: #fff;
  padding: 4px 16px; border-radius: 6px; background: linear-gradient(90deg, transparent, #b3122ecc 20%, #b3122ecc 80%, transparent);
  text-shadow: 0 2px 4px #000; animation: lethal-tag 0.7s ease-in-out infinite alternate; }
@keyframes lethal-tag { to { transform: translateX(-50%) scale(1.08); } }

/* "Your turn": a gold plate. */
.fx-banner.yours { padding: 18px 90px; background: linear-gradient(180deg, #6a4424, #3a2412); border: 4px solid #c9a35a; border-radius: 14px;
  box-shadow: 0 0 0 3px #2a1808, inset 0 0 24px #000a, 0 0 60px #ffd25a88; }
.fx-banner.yours span { font-size: clamp(32px, 5.5vw, 76px); }

/* 7+ cost cards: a shimmering gold edge. */
.big-card.legend { box-shadow: 0 0 0 0.12em #000c, inset 0 0 0 0.22em #ffd25a, inset 0 0 0 0.4em #00000055, 0 0 1.2em #ffd25a99, 0 2em 5em #000c; }
.big-card.legend::after { content: ''; position: absolute; inset: -0.42em; border-radius: inherit; pointer-events: none; z-index: 4;
  background: linear-gradient(115deg, transparent 40%, #fff6c8aa 48%, #ffd25a66 52%, transparent 60%) 0 0 / 300% 100% no-repeat;
  -webkit-mask: linear-gradient(#000, #000) content-box exclude, linear-gradient(#000, #000); mask: linear-gradient(#000, #000) content-box exclude, linear-gradient(#000, #000);
  padding: 0.6em; animation: legend-shine 3.2s linear infinite; }
@keyframes legend-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.card.playable > .big-card.legend, .card.respond > .big-card.legend { box-shadow: 0 0 0 0.12em #000c, inset 0 0 0 0.22em #ffd25a, 0 0 0 0.35em #57e07a, 0 0 1.4em #57e07a; }

/* Live stats on previews: buffed green, damaged/debuffed red. */
.bc-atk.up, .bc-hp.up { color: #b6ffcb; }
.bc-atk.down, .bc-hp.down { color: #ffb0bb; }

/* Error flash sits clear of the hand. */
.flash { z-index: 1400; }

/* Loading screen */
.loader { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; pointer-events: auto;
  background: radial-gradient(ellipse at 50% 40%, #3a2412, #0c0604 75%); }
.loader-box { text-align: center; max-width: min(560px, 90vw); }
.loader-box h2 { font-size: clamp(28px, 4vw, 48px); margin: 14px 0 6px; color: transparent;
  background: linear-gradient(#fff3c4, #e7b552 55%, #8a5a12); -webkit-background-clip: text; background-clip: text; }
.loader-sigil { width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; border: 4px solid #c9a35a; border-top-color: transparent;
  box-shadow: 0 0 24px #ffd25a66; animation: kw-spin 1s linear infinite; }
.loader-tip { color: #e8d6b0; font-size: 17px; min-height: 2.6em; }
.loader-bar { height: 8px; border-radius: 4px; background: #2a1a10; border: 1px solid #6a4a2a; overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8a5a12, #ffd25a); transition: width 0.2s; }

/* Settings */
#settings { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; background: #000a; }
.settings-panel { width: min(460px, 92vw); padding: 22px 26px; border-radius: 14px; background: linear-gradient(180deg, #4a2e18, #2a1810);
  border: 3px solid #c9a35a; box-shadow: 0 20px 60px #000c; color: #f3e2b8; }
.settings-panel h2 { margin: 0 0 14px; text-align: center; }
.set-row { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #ffffff14; }
.set-row i { grid-column: 2 / 4; font-size: 12px; color: #cbb8a0; font-style: normal; }
.set-row input[type=range] { width: 100%; accent-color: #e7b552; }
.set-row input[type=checkbox] { width: 20px; height: 20px; accent-color: #e7b552; justify-self: start; }
.seg { display: flex; gap: 0; grid-column: 2 / 4; border-radius: 10px; overflow: hidden; border: 1px solid #6a4a2a; }
.seg button { flex: 1; border-radius: 0; margin: 0; padding: 8px 6px; background: #2a1a10; color: #e8d6b0; border: none; }
.seg button.on { background: linear-gradient(#e7b552, #8a5a12); color: #1a0a00; font-weight: 700; }
.settings-close { display: block; margin: 18px auto 0; padding: 10px 40px; }

/* Colour-blind mode: blue / orange instead of green / red. */
body.colorblind { --good: #3a9aff; --target: #ff9a1a; }
body.colorblind .card.playable > .big-card { box-shadow: 0 0 0 0.12em #000c, inset 0 0 0 0.22em #c9a35a, 0 0 0 0.35em #3a9aff, 0 0 1.4em #3a9aff; }
body.colorblind .arena .minion.can-attack .m-art { box-shadow: 0 0 0 2px #2a1c0c, 0 0 0 5px #3a9aff, 0 0 16px #3a9aff, inset 0 0 12px #000c; }
body.colorblind .bc-cost.cheaper { background: radial-gradient(circle at 38% 30%, #e6f2ff, #6ab0ff 30%, #1a5ab3 100%); }
body.colorblind .bc-cost.pricier { background: radial-gradient(circle at 38% 30%, #fff0e0, #ffb060 30%, #b35a0a 100%); }
body.colorblind .end-turn.done { background: linear-gradient(#7ab8ff, #2f6fe0); color: #04122a; }
body.colorblind .hero-spell.usable .hs-face.front { border-color: #3a9aff; }
body.reduced-motion .arena *, body.reduced-motion #board-layer * { animation-duration: 0.01ms !important; }

/* ---- Faction card backs (art/backs/*.jpg) ---- */
.opp-hand[style*="--back"] .card.back, .fx-drawflip .df-back[style*="--back"], .card.back.fx-opp-draw[style*="--back"] {
  background: var(--back) center / cover no-repeat; border: 1px solid #000a; border-radius: 6%/4.3%;
  box-shadow: 0 4px 10px #000b, inset 0 0 0 1px #ffffff22; }
.opp-hand[style*="--back"] .card.back > span { display: none; }

/* ---- Deck piles: a stack of the player's own card backs over the painted deck ---- */
.arena.has-board .deck-pile[style*="--back"] .pile { position: relative; width: 6.4cqw; aspect-ratio: 0.72; }
.arena.has-board .deck-pile[style*="--back"] .pile span { display: block; position: absolute; inset: 0;
  background: var(--back) center / cover no-repeat; border-radius: 6%/4.3%; border: 1px solid #000c;
  box-shadow: 0 0.2cqw 0.6cqw #000c; transform: translate(calc(var(--i) * -0.18cqw), calc(var(--i) * -0.28cqw)); }
.arena.has-board .deck-pile[style*="--back"] .pile span:nth-child(1) { --i: 0; }
.arena.has-board .deck-pile[style*="--back"] .pile span:nth-child(2) { --i: 1; }
.arena.has-board .deck-pile[style*="--back"] .pile span:nth-child(3) { --i: 2; }
.arena.has-board .deck-pile[style*="--back"] .pile span:nth-child(4) { --i: 3; }
.arena.has-board .deck-pile[style*="--back"] b { position: absolute; left: 50%; bottom: -0.6cqw; transform: translateX(-50%); }
.arena.has-board .deck-pile.opp[style*="--back"] { left: 93.8cqw; top: 28.8cqh; }
.arena.has-board .deck-pile.me[style*="--back"] { left: 95.3cqw; top: 63cqh; }
.arena.has-board .deck-pile[style*="--back"] .pile { width: 7.8cqw; }
.arena.has-board .deck-pile[style*="--back"] b { z-index: 2; }

/* ---- Main-menu title font (Pirata One, SIL OFL: art/fonts) ---- */
@font-face { font-family: 'Pirata One'; src: url('../../art/fonts/pirata-one.woff2') format('woff2'); font-display: swap; }
.tavern-sign h1 { font-family: 'Pirata One', var(--font-title); font-weight: normal; letter-spacing: 0.05em; font-size: clamp(44px, 7vw, 80px); line-height: 1.1;
  padding: 0.08em 0.15em 0.18em 0.25em; margin: -0.08em -0.15em -0.18em -0.25em; }

/* ---- Bolder, easier-to-read stat numbers (cost, Attack, Health) ---- */
@font-face { font-family: 'Stat Numbers'; src: url('../../art/fonts/stat-numbers.woff2') format('woff2'); font-weight: 900; font-display: block; }
.cost, .atk, .hp, .bc-gem, .zoom-cost, .mana-num, .mana-text {
  font-family: 'Stat Numbers', 'Alegreya Sans', var(--font-title) !important; font-weight: 900 !important; }
.atk, .hp, .bc-atk, .bc-hp { -webkit-text-stroke: 0.13em #120700; letter-spacing: 0;
  text-shadow: 0 0.07em 0 #000, 0 0 0.25em #000, 0 0 0.12em #000; }
.atk, .hp { font-size: 1.12em; }
.bc-atk, .bc-hp { font-size: 2.55em; }
.bc-cost { font-size: 2.35em; -webkit-text-stroke: 0.13em #06122e; }

/* ---- Touch devices (iPhone): no system image drag, no callout, normal scrolling outside a match ---- */
img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }
.card, .minion, .hero-portrait, .big-card, .medallion { -webkit-touch-callout: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; }
body:not(.in-game) { touch-action: pan-x pan-y; overscroll-behavior: none; }
body:not(.in-game) .card, body:not(.in-game) .big-card { touch-action: pan-x pan-y; }
body.in-game, html:has(body.in-game) { overscroll-behavior: none; touch-action: none; position: fixed; inset: 0; width: 100%; height: 100%; }
/* Bigger stat numbers: the digits grow, the gems keep their size (gem sizes are re-expressed in the new em). */
.arena .minion .atk, .arena .minion .hp { font-size: calc(var(--minion-w) * 0.26); }
.arena .hero-portrait .hp, .arena .hero-portrait .atk { font-size: calc(var(--hero) * 0.25) !important; }
.bc-atk, .bc-hp { font-size: 4.5em; width: 1.077em; height: 1.077em; bottom: -0.145em; line-height: 1; display: grid; place-items: center; }
.bc-atk { left: -0.145em; }
.bc-hp { right: -0.145em; padding-top: 0.13em !important; }
.bc-cost { font-size: 4.05em; width: 1.363em; height: 1.363em; top: -0.32em; left: -0.32em; line-height: 1; }

/* Minions on the board show their Mana cost (top-left gem). */
.minion .m-cost { position: absolute; z-index: 6; top: -8%; left: -8%; width: calc(var(--minion-w, 70px) * 0.3); aspect-ratio: 1; display: grid; place-items: center;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: radial-gradient(circle at 38% 30%, #e6f2ff 0%, #7fb2ff 22%, #2f6fe0 55%, #163a8a 100%);
  font-family: 'Stat Numbers', 'Alegreya Sans', sans-serif; font-weight: 900; font-size: calc(var(--minion-w, 70px) * 0.22); line-height: 1;
  color: #fff; -webkit-text-stroke: 0.12em #06122e; paint-order: stroke fill; filter: drop-shadow(0 1px 2px #000c); pointer-events: none; }
.minion .m-cost { top: 4%; left: 1%; }
.bc-hp { padding-top: 0.04em !important; } .hp { padding-top: 0.08em !important; }
.arena .minion .hp { padding-top: 0.12em !important; padding-bottom: 0 !important; line-height: 1; display: grid; place-items: center; }

/* Quick Play buttons show the card's text. */
.reaction .qp-option { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 280px; text-align: left; white-space: normal; }
.reaction .qp-option small { font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.25; opacity: 0.92; text-transform: none; letter-spacing: 0; }
.reaction .qp-cost { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #2f6fe0; color: #fff; font-size: 0.85em; margin-right: 2px; }

/* ---- Online lobby ---- */
.lobby .lobby-choices { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 18px 0; }
.lobby .lobby-box { background: #0006; border: 1px solid #c9a35a55; border-radius: 14px; padding: 16px 22px; min-width: 230px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lobby .lobby-box h3 { margin: 0; }
.lobby .room-input { font-family: var(--font-title); font-size: 26px; letter-spacing: 0.3em; text-align: center; width: 9em; padding: 8px; border-radius: 10px;
  border: 2px solid #c9a35a; background: #1a0f08; color: #f3e2b8; text-transform: uppercase; }
.lobby .room-code { font-family: var(--font-title); font-size: 54px; letter-spacing: 0.25em; color: #f3d27a; text-shadow: 0 2px 6px #000; margin: 6px 0; user-select: all; -webkit-user-select: all; }
.lobby .lobby-wait { animation: lobbyPulse 1.6s ease-in-out infinite; color: #f3e2b8; }
.lobby .lobby-error { color: #ff9a9a; background: #3a0d0d99; border: 1px solid #ff6a6a66; padding: 8px 14px; border-radius: 10px; }
@keyframes lobbyPulse { 50% { opacity: 0.45; } }

/* ---- Dragons ---- */
.big-card.f-dragons { --frame: #5a2414; --frame-hi: #f0702a; --body: #1e0a06; }
.arena.f-dragons { --felt: #3a1a12; --felt-2: #140806; --rim: #a8441e; }
.big-card.t-spell.f-dragons { --frame: #7a3a0a; --frame-hi: #ffb02a; --body: #2a1404; }  /* molten gold */
.big-card.t-trap.f-dragons  { --frame: #3a2a2a; --frame-hi: #a88a7a; --body: #120c0c; }  /* ash grey */
.fx-p.ember { width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #fff3b0, #ff9a2a 45%, #ff3a0a 80%, transparent); box-shadow: 0 0 8px #ff7a1a; }

/* Burning characters: tongues of flame lick up around the portrait; brighter as Burn rises. */
.m-flames { position: absolute; inset: -10% -6% 4%; z-index: 4; pointer-events: none; opacity: var(--heat, 0.6); mix-blend-mode: screen; }
.m-flames i { position: absolute; bottom: 0; width: 26%; height: 70%; border-radius: 50% 50% 35% 35% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 85%, #fff6c0 0%, #ffd040 18%, #ff7a12 42%, #e02a08 66%, transparent 74%);
  filter: blur(1.2px); transform-origin: 50% 100%; animation: flameLick 0.9s ease-in-out infinite alternate; }
.m-flames i:nth-child(1) { left: -4%; height: 52%; animation-duration: 0.8s; }
.m-flames i:nth-child(2) { left: 12%; height: 74%; animation-duration: 1.05s; animation-delay: -0.3s; }
.m-flames i:nth-child(3) { left: 30%; height: 62%; animation-duration: 0.85s; animation-delay: -0.6s; }
.m-flames i:nth-child(4) { left: 46%; height: 82%; animation-duration: 1.1s; animation-delay: -0.15s; }
.m-flames i:nth-child(5) { left: 62%; height: 60%; animation-duration: 0.9s; animation-delay: -0.45s; }
.m-flames i:nth-child(6) { left: 78%; height: 72%; animation-duration: 1s; animation-delay: -0.75s; }
.m-flames i:nth-child(7) { left: 22%; width: 56%; height: 30%; animation-duration: 1.3s; opacity: 0.8; }
@keyframes flameLick {
  0% { transform: scale(0.85, 0.8) skewX(-6deg); opacity: 0.75; }
  50% { transform: scale(1.05, 1.08) skewX(4deg); opacity: 1; }
  100% { transform: scale(0.92, 1.18) skewX(-3deg); opacity: 0.85; }
}
.minion.burning .m-art, .hero-portrait.burning .portrait-img, .hero-portrait.burning .portrait {
  box-shadow: 0 0 0 2px #2a0c04, 0 0 12px 3px #ff5a1a, inset 0 -18px 22px -8px #ff6a1acc; animation: burnGlow 1.2s ease-in-out infinite alternate; }
@keyframes burnGlow { to { filter: brightness(1.12) saturate(1.2); } }
.burn-badge { position: absolute; z-index: 7; top: -10%; right: -14%; padding: 0.05em 0.35em; border-radius: 999px; pointer-events: auto;
  background: linear-gradient(#ffb030, #d2400c); border: 2px solid #3a1004; color: #fff; font-family: 'Stat Numbers', 'Alegreya Sans', sans-serif; font-weight: 900;
  font-size: calc(var(--minion-w, 70px) * 0.17); -webkit-text-stroke: 0.08em #3a1004; paint-order: stroke fill; box-shadow: 0 0 8px #ff6a1a, 0 2px 4px #000c; white-space: nowrap; }
.hero-portrait .burn-badge { top: 4%; right: -6%; font-size: calc(var(--hero, 100px) * 0.15); }
.hero-portrait .m-flames { inset: -6% -4% 10%; z-index: 3; }
body.reduced-motion .m-flames i { animation: none; }
/* Flames burn behind the portrait and lick out around its edges, so the art stays readable. */
.m-flames { inset: -26% -16% 2%; z-index: 0; mix-blend-mode: normal; opacity: calc(0.55 + var(--heat, 0.6) * 0.45); }
.m-flames i { height: 78%; filter: blur(1.6px); }
.m-flames i:nth-child(7) { display: none; }
.hero-portrait .m-flames { inset: -22% -12% 6%; z-index: 0; }
.hero-portrait.burning .portrait-img { position: relative; z-index: 1; }
/* A short row of flames in front, along the bottom of the portrait. */
.m-flames.front { inset: auto -4% -4% -4%; height: 42%; z-index: 4; mix-blend-mode: screen; opacity: calc(0.5 + var(--heat, 0.6) * 0.5); }
.m-flames.front i { height: 100%; width: 24%; }
.m-flames.front i:nth-child(1) { left: -2%; height: 70%; }
.m-flames.front i:nth-child(2) { left: 14%; height: 95%; }
.m-flames.front i:nth-child(3) { left: 32%; height: 75%; }
.m-flames.front i:nth-child(4) { left: 50%; height: 100%; }
.m-flames.front i:nth-child(5) { left: 66%; height: 72%; }
.m-flames.front i:nth-child(6) { left: 80%; height: 88%; }
.hero-portrait .m-flames.front { inset: auto 4% 14% 4%; height: 34%; z-index: 2; }
/* Behind: taller tongues so they rise clearly above the frame. */
.m-flames:not(.front) i { height: 92%; }
/* Health, Attack and Armor always sit above the flames. */
.hero-portrait.burning .hp, .hero-portrait.burning .atk, .hero-portrait.burning .armor,
.minion.burning .hp, .minion.burning .atk, .minion.burning .m-cost { z-index: 9 !important; position: absolute; }
.hero-portrait .m-flames.front { inset: auto 14% 14% 14%; height: 26%; opacity: calc(0.35 + var(--heat, 0.6) * 0.35); }

/* Bigger, brighter Mana Crystals. */
.arena.has-board .mana-bar.me .crystal { width: clamp(14px, 1.55cqw, 30px); height: clamp(16px, 1.75cqw, 34px); }
.arena.has-board .mana-bar.opp .crystal { width: clamp(10px, 1.05cqw, 20px); height: clamp(11px, 1.18cqw, 22px); }
.arena.has-board .mana-bar .crystals { gap: clamp(3px, 0.35cqw, 7px); }
.crystal.full { filter: drop-shadow(0 0 0.35cqw #5aa0ff) drop-shadow(0 0 0.12cqw #cfe3ff); }
.arena.has-board .mana-bar.me .mana-text { font-family: 'Stat Numbers', 'Alegreya Sans', sans-serif; font-weight: 900; font-size: clamp(18px, 2.1cqw, 40px);
  color: #fff; -webkit-text-stroke: 0.1em #0a1a3a; paint-order: stroke fill; text-shadow: 0 0 0.5em #4c8dff, 0 2px 3px #000; }
.arena.has-board .mana-bar.opp .mana-text { font-family: 'Stat Numbers', 'Alegreya Sans', sans-serif; font-weight: 900; font-size: clamp(14px, 1.5cqw, 28px);
  color: #fff; -webkit-text-stroke: 0.1em #0a1a3a; paint-order: stroke fill; text-shadow: 0 0 0.5em #4c8dff; }
.arena.has-board .mana-bar { padding: 0.3cqw 0.6cqw; border-radius: 1cqw; background: radial-gradient(ellipse at 50% 50%, #0a1430cc, #0a143000 75%); }
/* Enemy Mana Crystals match yours. */
.arena.has-board .mana-bar.opp .crystal { width: clamp(14px, 1.55cqw, 30px); height: clamp(16px, 1.75cqw, 34px); }
.arena.has-board .mana-bar.opp .mana-text { font-size: clamp(18px, 2.1cqw, 40px); }

/* ---- Demons ---- */
.big-card.f-demons { --frame: #4a1418; --frame-hi: #e0303a; --body: #1a0608; }
.arena.f-demons { --felt: #3a1014; --felt-2: #140406; --rim: #a01e26; }
.big-card.t-spell.f-demons { --frame: #3a1a4a; --frame-hi: #b04ae0; --body: #140a1c; }  /* hellfire violet */
.big-card.t-trap.f-demons  { --frame: #2a2420; --frame-hi: #8a7058; --body: #0e0c0a; }  /* brimstone */
.tier-badge { position: absolute; left: 50%; bottom: -26%; transform: translateX(-50%); z-index: 3; padding: 0.05em 0.4em; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(#e0303a, #7a0a12); border: 2px solid #2a0406; color: #fff; font-family: 'Stat Numbers', 'Alegreya Sans', sans-serif; font-weight: 900;
  font-size: calc(var(--hero, 100px) * 0.13); -webkit-text-stroke: 0.08em #2a0406; paint-order: stroke fill; box-shadow: 0 0 8px #ff2a3a99, 0 2px 4px #000c; pointer-events: none; }
.tier-badge { font-size: clamp(10px, 0.95cqw, 16px); bottom: -0.9em; line-height: 1.2; }
.arena .hero-spell .tier-badge { position: absolute; inset: auto; left: 50%; bottom: -0.9em; top: auto; width: auto; height: auto; transform: translateX(-50%);
  font-size: clamp(10px, 0.95cqw, 16px); line-height: 1.2; display: block; padding: 0.05em 0.45em; border-radius: 999px; background: linear-gradient(#e0303a, #7a0a12); }

/* ---- Primal Mana (Dinosaurs): amber crystals with a green core; Dinosaur cards only ---- */
.crystal.primal.full { background: linear-gradient(160deg, #fff4c8 0%, #ffc44a 28%, #d0761a 60%, #5a3a0a 100%) !important;
  filter: drop-shadow(0 0 0.35cqw #ff9a2a) drop-shadow(0 0 0.1cqw #c8ff8a); }
.crystal.primal.spent { background: linear-gradient(160deg, #5a4628, #2a1e10 60%, #140e06) !important; }
.mana-text .primal-note { display: block; font-size: 0.5em; color: #ffc44a; -webkit-text-stroke: 0.06em #3a2006; letter-spacing: 0; }

/* ---- Divine ---- */
.big-card.f-divine { --frame: #8a6a2a; --frame-hi: #fff0b0; --body: #2a2414; }
.arena.f-divine { --felt: #4a4230; --felt-2: #1a160c; --rim: #d8b860; }
.big-card.t-spell.f-divine { --frame: #2a4a7a; --frame-hi: #a8d8ff; --body: #0c1a2c; }  /* heavenly blue */
.big-card.t-trap.f-divine  { --frame: #5a5a6a; --frame-hi: #e8e8f8; --body: #18181e; }  /* silver */
.fx-p.light { width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle, #ffffff, #fff1b0 40%, #ffd060 70%, transparent); box-shadow: 0 0 10px #fff1b0; }

/* Taunt, more obvious: a bronze shield (original size) with thick black edges and a black-rimmed portrait. */
.minion.kw-taunt .m-shield { inset: -13% -14% -5%;
  background: radial-gradient(circle at 50% 28%, #ffe6a8, #d09a3a 40%, #8a5a1a 72%, #3a2408);
  filter: drop-shadow(1.5px 0 0 #000) drop-shadow(-1.5px 0 0 #000) drop-shadow(0 1.5px 0 #000) drop-shadow(0 -1.5px 0 #000) drop-shadow(0 3px 4px #000a); }
.minion.kw-taunt .m-shield::before { inset: 9%; background: repeating-linear-gradient(90deg, #0000 0 18%, #00000055 18% 21%), radial-gradient(circle at 50% 25%, #f0c060, #7a4a12 78%);
  outline: none; }
.minion.kw-taunt .m-art { border-width: 3px; border-color: #e0a84a; box-shadow: 0 0 0 2px #000; }
/* Taunt shield: off-white stone with thick black edges. */
.minion.kw-taunt .m-shield { background: radial-gradient(circle at 50% 28%, #ffffff, #efe9dc 40%, #c8bfae 72%, #6a6252); }
.minion.kw-taunt .m-shield::before { background: repeating-linear-gradient(90deg, #0000 0 18%, #0000002e 18% 21%), radial-gradient(circle at 50% 25%, #fbf7ee, #b8ae9a 80%); }
.minion.kw-taunt .m-art { border-color: #f4efe4; }
/* Taunt shield: off-yellow with a bold black outer line. */
.minion.kw-taunt .m-shield { background: radial-gradient(circle at 50% 28%, #fffbe0, #f3e6a0 40%, #d8c470 72%, #7a6a2a);
  filter: drop-shadow(2.5px 0 0 #000) drop-shadow(-2.5px 0 0 #000) drop-shadow(0 2.5px 0 #000) drop-shadow(0 -2.5px 0 #000) drop-shadow(0 3px 4px #000a); }
.minion.kw-taunt .m-shield::before { background: repeating-linear-gradient(90deg, #0000 0 18%, #0000002e 18% 21%), radial-gradient(circle at 50% 25%, #fff8d4, #cbb764 80%); }
.minion.kw-taunt .m-art { border-color: #f3e6a0; }

/* Hero portraits fill the boards' painted frames exactly (measured on all boards:
   top arch ≈ 44.9/3.5 · 10.0×17.2, bottom circle ≈ 44.7/73.6 · 10.5×19.0, in % of the 16:9 board). */
.arena.has-board .hero-zone.opp .hero-portrait { left: 44.75cqw; width: 10.3cqw; top: 3.3cqh; height: 17.6cqh; border-radius: 50% 50% 4% 4% / 30% 30% 3% 3%; }
.arena.has-board .hero-zone.me .hero-portrait { left: 44.5cqw; width: 10.9cqw; top: 73.3cqh; height: 19.5cqh; border-radius: 50%; }
.arena.has-board .hero-portrait .portrait-img { object-position: center 25%; }

/* ---- Robots ---- */
.big-card.f-robots { --frame: #3a4250; --frame-hi: #8ab8e8; --body: #10141c; }
.arena.f-robots { --felt: #2a2e36; --felt-2: #0c0e12; --rim: #4a7ab0; }
.big-card.t-spell.f-robots { --frame: #6a4214; --frame-hi: #ffa83a; --body: #201206; }  /* hazard orange */
.big-card.t-trap.f-robots  { --frame: #24402a; --frame-hi: #6ae07a; --body: #0a140c; }  /* circuit green */
.badges .b-upgrade { color: #cfe6ff; font-style: normal; font-weight: 900; text-shadow: 0 0 4px #4ab0ff, 0 1px 2px #000; }
.badges .b-weapon { font-style: normal; }
#rotate-hint small { max-width: 300px; color: #a8988a; font-size: 13px; line-height: 1.4; }
#rotate-hint .rotate-skip { margin-top: 8px; }
body.rotate-dismissed #rotate-hint { display: none !important; }

/* ---- Fusion Hero Spells ---- */
.big-card.f-fusion { --frame: #3a2a5a; --frame-hi: #ffd76a; --body: #140c22; }
.big-card.t-spell.f-fusion { --frame: #4a2a6a; --frame-hi: #ffd76a; --body: #160c26; }
.book-tab.f-fusion b { background: linear-gradient(90deg, #ff8a4a, #ffd76a, #7ad0ff, #c88aff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-spell.fusion-spell { position: relative; overflow: visible; border-radius: 50%; filter: saturate(0.45) brightness(0.75); }
.hero-spell.fusion-spell .fusion-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; transform: none; }
.hero-spell.fusion-spell .fusion-face img { width: 100%; height: 100%; object-fit: cover; }
.fusion-pips { position: absolute; left: 50%; bottom: -0.55em; transform: translateX(-50%); display: flex; gap: 3px; z-index: 3; }
.fusion-pips i { width: 9px; height: 9px; border-radius: 50%; background: #2a2236; border: 1.5px solid #000; box-shadow: inset 0 1px 2px #000a; }
.fusion-pips i.on { background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd76a 45%, #e08a1a); box-shadow: 0 0 6px #ffd76a; }
.fusion-ring { position: absolute; inset: -14%; border-radius: 50%; pointer-events: none; opacity: 0; z-index: -1; }
/* READY: full colour, a spinning rainbow-gold ring, a pulsing aura and a label. */
.hero-spell.fusion-spell.ready { filter: none; animation: fusionPulse 1.1s ease-in-out infinite; }
.hero-spell.fusion-spell.ready .fusion-ring { opacity: 1;
  background: conic-gradient(#ff8a4a, #ffd76a, #7ad0ff, #c88aff, #ff6aa8, #ff8a4a);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); mask: radial-gradient(circle, transparent 60%, #000 62%);
  animation: fusionSpin 2.2s linear infinite; }
.fusion-ready { position: absolute; left: 50%; top: -1.6em; transform: translateX(-50%); white-space: nowrap; z-index: 4; pointer-events: none;
  font-family: var(--font-title); font-weight: 900; font-size: clamp(10px, 0.9cqw, 15px); letter-spacing: 0.06em; padding: 0.15em 0.6em; border-radius: 999px;
  color: #2a1400; background: linear-gradient(90deg, #ffd76a, #fff6c8, #ffd76a); border: 2px solid #000; box-shadow: 0 0 12px #ffd76a;
  animation: fusionLabel 1.1s ease-in-out infinite; }
@keyframes fusionPulse { 0%, 100% { box-shadow: 0 0 0 3px #000, 0 0 14px 4px #ffd76acc, 0 0 30px 8px #c88aff66; transform: scale(1); }
  50% { box-shadow: 0 0 0 3px #000, 0 0 22px 8px #ffd76a, 0 0 46px 14px #7ad0ff88; transform: scale(1.1); } }
@keyframes fusionSpin { to { transform: rotate(360deg); } }
@keyframes fusionLabel { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.08); } }
body.reduced-motion .hero-spell.fusion-spell.ready, body.reduced-motion .fusion-ring, body.reduced-motion .fusion-ready { animation: none; }
/* Fusion ready, toned down: a thin spinning ring and a soft glow; no label. */
.arena .hero-spell.fusion-spell .fusion-ready { display: none !important; }
.arena .hero-spell.fusion-spell .fusion-ring { position: absolute; inset: -7%; width: auto; height: auto; transform: none;
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 68%); mask: radial-gradient(circle, transparent 66%, #000 68%); }
@keyframes fusionPulse { 0%, 100% { box-shadow: 0 0 0 2px #000, 0 0 6px 1px #ffd76a99; } 50% { box-shadow: 0 0 0 2px #000, 0 0 12px 3px #ffd76acc; } }
.arena .fusion-pips { position: absolute; inset: auto; left: 50%; bottom: -0.55em; width: auto; height: auto; transform: translateX(-50%); }
.arena .fusion-pips i { position: static; width: 7px; height: 7px; }

/* ---- Radioactive ---- */
.big-card.f-radioactive { --frame: #3a4a14; --frame-hi: #b6ff4a; --body: #121808; }
.arena.f-radioactive { --felt: #2a3010; --felt-2: #0c1004; --rim: #7aa82a; }
.big-card.t-spell.f-radioactive { --frame: #5a5a12; --frame-hi: #ffe84a; --body: #1a1a06; }  /* hazard yellow */
.big-card.t-trap.f-radioactive  { --frame: #2a3a3a; --frame-hi: #6ae0c0; --body: #0a1212; }  /* coolant */
.minion.irradiated .m-art, .hero-portrait.irradiated .portrait-img {
  box-shadow: 0 0 0 2px #1a2a04, 0 0 12px 3px #a8ff3a, inset 0 0 18px #a8ff3a66; animation: radGlow 1.6s ease-in-out infinite alternate; }
@keyframes radGlow { to { filter: brightness(1.1) saturate(1.3) hue-rotate(-8deg); } }
.rad-badge { position: absolute; z-index: 7; top: -10%; left: -14%; padding: 0.05em 0.35em; border-radius: 999px; pointer-events: auto; white-space: nowrap;
  background: linear-gradient(#e8ff6a, #6aa812); border: 2px solid #1a2a04; color: #102004; font-family: 'Stat Numbers', 'Alegreya Sans', sans-serif; font-weight: 900;
  font-size: calc(var(--minion-w, 70px) * 0.17); box-shadow: 0 0 8px #a8ff3a, 0 2px 4px #000c; }
.hero-portrait .rad-badge { top: 4%; left: -6%; font-size: calc(var(--hero, 100px) * 0.15); }
.minion.rad-hit .hp, .hero-portrait.rad-hit .hp { filter: hue-rotate(80deg) saturate(1.4); }
.hero-spell.cooling { filter: grayscale(0.8) brightness(0.7); }
.arena .hero-spell .cooldown-badge { position: absolute; inset: auto; left: 50%; bottom: -0.9em; width: auto; height: auto; transform: translateX(-50%); z-index: 3;
  padding: 0.05em 0.45em; border-radius: 999px; background: #1a1a22; border: 2px solid #000; color: #e8e0ff; font-size: clamp(10px, 0.95cqw, 16px); line-height: 1.2; white-space: nowrap; }

/* Bees: The Living Hive badge (passive Hero Spell) */
.hive-badge { position: relative; width: calc(var(--hero) * 0.5); height: calc(var(--hero) * 0.5); border-radius: 50%; overflow: visible;
  border: 3px solid #c8901a; box-shadow: 0 0 0 2px #000, 0 0 10px #ffc21a88; background: #2a1a04; }
.hive-badge img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.hive-badge b { position: absolute; bottom: -6px; right: -6px; background: #ffc21a; color: #1a0a04; border-radius: 50%; width: 22px; height: 22px;
  display: grid; place-items: center; font-size: 13px; border: 2px solid #000; }
.hive-badge.queen { border-color: #ffe08a; box-shadow: 0 0 0 2px #000, 0 0 14px #ffe08a; }
.hive-badge.gone img { filter: grayscale(1) brightness(0.6); }
.hive-badge.under { border-color: #8f7bd8; box-shadow: 0 0 0 2px #000, 0 0 14px #6d5bd0; }
.hive-badge.under img { filter: brightness(0.7) saturate(0.8); }
.arena.has-board .hive-badge { width: calc(var(--hero) * 0.48); height: calc(var(--hero) * 0.48); }
.arena.portrait .hive-badge { width: calc(var(--hero) * 0.46); height: calc(var(--hero) * 0.46); }

/* ---- Bees ---- */
.big-card.f-bees { --frame: #6a4a0a; --frame-hi: #ffc21a; --body: #1e1404; }
.arena.f-bees { --felt: #4a3410; --felt-2: #1a1004; --rim: #c8901a; }
.big-card.t-spell.f-bees { --frame: #7a5a1a; --frame-hi: #ffe08a; --body: #241a06; }  /* honey */
.big-card.t-trap.f-bees  { --frame: #3a2a14; --frame-hi: #c8a050; --body: #120c04; }  /* wax */
.fx-p.pollen { width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle, #fff6c0, #ffc21a 50%, #a86a00 85%, transparent); box-shadow: 0 0 6px #ffc21a; }
.medallion.f-bees { --fc: #ffc21a; } .ts-guide.f-bees { --fc: #ffc21a; }

/* =====================================================================
   MAIN MENU — living title screen
   ===================================================================== */
#menu-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0s 0.6s; pointer-events: none; background: #0c0806; }
#menu-bg.show { opacity: 1; visibility: visible; transition: opacity 0.6s; }
/* Once it has faded out (in a match), its drifting, embers and mist stop instead of running unseen. */
#menu-bg:not(.show) * { animation-play-state: paused; }
.mbg-slide { position: absolute; inset: -4%; background-size: cover; background-position: center; opacity: 0;
  animation: mbgCycle linear infinite; filter: saturate(1.1) brightness(0.8); }
@keyframes mbgCycle {
  0% { opacity: 0; transform: scale(1.04) translateX(0); }
  3% { opacity: 1; }
  9% { opacity: 1; }
  12% { opacity: 0; transform: scale(1.14) translateX(-1.5%); }
  100% { opacity: 0; transform: scale(1.14) translateX(-1.5%); }
}
.mbg-shade { position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 38%, #0000 0%, #0a060499 55%, #050302f2 100%),
              linear-gradient(180deg, #05030299 0%, #0000 25%, #0000 60%, #050302dd 100%); }
.mbg-rays { position: absolute; left: 50%; top: -30%; width: 160vmax; height: 160vmax; transform: translateX(-50%); opacity: 0.2;
  background: repeating-conic-gradient(from 0deg, #ffd78a33 0deg 4deg, #0000 4deg 14deg);
  -webkit-mask: radial-gradient(circle, #000 0%, #0000 55%); mask: radial-gradient(circle, #000 0%, #0000 55%); }
@keyframes mbgRays { to { transform: translateX(-50%) rotate(360deg); } }
.mbg-ember { position: absolute; bottom: -10px; width: calc(5px * var(--s)); height: calc(5px * var(--s)); border-radius: 50%;
  background: radial-gradient(circle, #fff6c8, #ffb040 45%, #ff5a1a 75%, #0000); box-shadow: 0 0 10px #ffa040;
  animation: mbgEmber var(--d) linear var(--delay) infinite; }
@keyframes mbgEmber {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(var(--x), -105vh); opacity: 0; }
}
body:not(.in-game):has(#menu-bg.show) { background: #0c0806; }

.menu.title-screen { max-width: 1100px; padding: 28px 16px 48px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ts-title { position: relative; display: flex; flex-direction: column; align-items: center; }
.ts-runes { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -54%); z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, #ffcf6a22 0%, #0000 62%),
              repeating-conic-gradient(from 0deg, #ffd78a55 0deg 1deg, #0000 1deg 15deg);
  -webkit-mask: radial-gradient(circle, #0000 38%, #000 40%, #000 44%, #0000 46%, #0000 60%, #000 61%, #000 62%, #0000 63%);
  mask: radial-gradient(circle, #0000 38%, #000 40%, #000 44%, #0000 46%, #0000 60%, #000 61%, #000 62%, #0000 63%);
  animation: tsRunes 60s linear infinite; opacity: 0.8; }
@keyframes tsRunes { to { transform: translate(-50%, -54%) rotate(360deg); } }
.title-screen .tavern-sign { background: none; border: none; box-shadow: none; padding: 0 20px; }
.title-screen .tavern-sign h1 { font-size: clamp(56px, 10vw, 120px); line-height: 1; padding: 0.08em 0.2em 0.16em;
  background: linear-gradient(100deg, #8a5a12 0%, #e7b552 20%, #fff3c4 35%, #e7b552 50%, #8a5a12 70%, #e7b552 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #2a1404) drop-shadow(0 0 24px #ffb04066) drop-shadow(0 8px 16px #000);
  animation: tsShine 7s ease-in-out infinite; }
@keyframes tsShine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
.ts-tag { margin: 0; font-family: var(--font-title); font-style: italic; color: #e8d2a8; letter-spacing: 0.08em; text-shadow: 0 2px 6px #000; }

.ts-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ts-actions button { font-family: var(--font-title); font-weight: 900; cursor: pointer; color: #2a1404; border-radius: 12px; border: 2px solid #1a0c04;
  background: linear-gradient(180deg, #ffe7a8 0%, #e7b552 45%, #a8701e 100%); box-shadow: inset 0 2px 0 #fff6d0, 0 4px 0 #4a2a0c, 0 8px 18px #000c;
  transition: transform 0.12s, filter 0.12s, box-shadow 0.12s; }
.ts-actions button:hover { transform: translateY(-2px); filter: brightness(1.12); }
.ts-actions button:active { transform: translateY(3px); box-shadow: inset 0 2px 0 #fff6d0, 0 1px 0 #4a2a0c, 0 3px 8px #000c; }
.ts-play { display: flex; flex-direction: column; align-items: center; padding: 14px 72px 12px; font-size: 40px; letter-spacing: 0.08em; line-height: 1;
  animation: tsPlayGlow 2.4s ease-in-out infinite; }
.ts-play small { font-size: 14px; letter-spacing: 0.2em; opacity: 0.8; margin-top: 4px; }
@keyframes tsPlayGlow {
  0%, 100% { box-shadow: inset 0 2px 0 #fff6d0, 0 4px 0 #4a2a0c, 0 8px 18px #000c, 0 0 18px 2px #ffb04066; }
  50% { box-shadow: inset 0 2px 0 #fff6d0, 0 4px 0 #4a2a0c, 0 8px 18px #000c, 0 0 36px 8px #ffb040aa; }
}
.ts-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ts-row button { font-size: 17px; padding: 10px 22px; }
.ts-row.small button, .ts-actions button.ghost { font-size: 14px; padding: 7px 16px; color: #f3e2b8;
  background: linear-gradient(180deg, #4a3a2a, #2a1e14); box-shadow: inset 0 1px 0 #ffffff22, 0 3px 0 #120a04, 0 6px 12px #000a; border-color: #6a4a2a; }

.ts-panel { width: min(100%, 980px); padding: 18px 20px 14px; border-radius: 18px; text-align: center;
  background: linear-gradient(180deg, #1e140ccc, #120a06e6); border: 1px solid #c9a35a55;
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 #ffffff14, 0 20px 50px #000c; }
.ts-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ts-panel-head h3 { margin: 0; font-size: 22px; color: #f3e2b8; }
.ts-panel-head .pick-count { font-size: 15px; color: #c9a35a; margin-left: 6px; }
.ts-panel .format-toggle { margin: 0; }
.title-screen .factions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; }
.title-screen .faction.medallion { width: 96px; }
.title-screen .medal-face { width: 84px; height: 84px; border: 3px solid #6a4a2a; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  box-shadow: 0 0 0 2px #000, 0 6px 14px #000c; }
.title-screen .faction.medallion:hover .medal-face { transform: translateY(-4px) scale(1.07); border-color: #e7b552; box-shadow: 0 0 0 2px #000, 0 0 18px var(--fc, #ffd25a), 0 10px 18px #000c; }
.title-screen .faction.medallion:hover .medal-face img { filter: none; }
.medal-ring { position: absolute; top: -6px; left: 50%; width: 96px; height: 96px; transform: translateX(-50%); border-radius: 50%; pointer-events: none; opacity: 0; }
.faction.medallion.picked .medal-ring { opacity: 1; background: conic-gradient(#ffd25a, #fff6c8, #e7b552, #ffd25a);
  -webkit-mask: radial-gradient(circle, #0000 64%, #000 66%); mask: radial-gradient(circle, #0000 64%, #000 66%); animation: fusionSpin 3s linear infinite; }
.title-screen .faction.medallion.picked .medal-face { border-color: #ffd25a; box-shadow: 0 0 0 2px #000, 0 0 26px var(--fc, #ffd25a), 0 10px 18px #000c; transform: scale(1.05); }
.medallion.f-vampires { --fc: #ff3a52; } .medallion.f-aliens { --fc: #5affd8; } .medallion.f-dinosaurs { --fc: #ffa23a; }
.medallion.f-plants { --fc: #7dff6a; } .medallion.f-fungus { --fc: #c98cff; } .medallion.f-zombies { --fc: #9cff4a; }
.medallion.f-dragons { --fc: #ff7a1a; } .medallion.f-demons { --fc: #ff2a3a; } .medallion.f-divine { --fc: #ffe08a; }
.medallion.f-robots { --fc: #4ab0ff; } .medallion.f-radioactive { --fc: #a8ff3a; }

.ts-matchup { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 8px; }
.vs-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vs-hero img { width: 120px; height: 120px; object-fit: cover; object-position: center 22%; border-radius: 16px; border: 3px solid #e7b552;
  box-shadow: 0 0 0 2px #000, 0 0 22px #ffb04066, 0 10px 20px #000c; }
.vs-hero span { font-family: var(--font-title); font-weight: 900; color: #f3e2b8; text-shadow: 0 2px 4px #000; }
.vs-plus { font-family: 'Pirata One', var(--font-title); font-size: 44px; color: #e7b552; text-shadow: 0 0 12px #ffb04088, 0 2px 4px #000; }
.vs-fusion { flex-basis: 100%; font-family: var(--font-title); color: #e8d2a8; }
.vs-fusion b { background: linear-gradient(90deg, #ff8a4a, #ffd76a, #7ad0ff, #c88aff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ts-panel .deck-line { background: #0006; border: 1px solid #6a4a2a; border-radius: 12px; }
.ts-soon { margin: 10px 0 0; font-size: 12px; color: #8a7a68; letter-spacing: 0.04em; }
.title-screen .sub { color: #b8a488; }
@media (max-width: 700px) {
  .ts-play { padding: 12px 48px 10px; font-size: 32px; }
  .vs-hero img { width: 84px; height: 84px; }
  .ts-runes { width: 340px; height: 340px; }
}
body.reduced-motion .mbg-slide, body.reduced-motion .mbg-rays, body.reduced-motion .mbg-ember, body.reduced-motion .ts-runes,
body.reduced-motion .title-screen .tavern-sign h1, body.reduced-motion .ts-play { animation-duration: 0s !important; animation-iteration-count: 1 !important; }
body.reduced-motion .mbg-slide:first-child { opacity: 1; }
/* The ring is centred with a margin, so the spin animation (a rotate) doesn't knock it off-centre. */
.medal-ring { left: 50%; margin-left: -48px; transform: none; }

/* Fusion card under the matchup: lifts and grows on hover, click for full size. */
.vs-fusion-card { flex-basis: 100%; display: flex; justify-content: center; margin-top: 4px; }
.vs-fusion-card .card { width: 110px !important; cursor: zoom-in; transition: transform 0.18s ease, filter 0.18s; filter: drop-shadow(0 6px 10px #000c); }
.vs-fusion-card .card:hover { transform: translateY(-14px) scale(1.9); z-index: 30; position: relative; filter: drop-shadow(0 0 16px #ffd76a88) drop-shadow(0 12px 20px #000); }
.title-screen .ts-panel { overflow: visible; }

/* Faction guides under the matchup. */
.ts-guides { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 16px 0 14px; text-align: left; }
.ts-guide { flex: 1 1 280px; max-width: 440px; padding: 12px 16px; border-radius: 14px; background: #0008; border: 1px solid #c9a35a44;
  border-top: 3px solid var(--fc, #e7b552); box-shadow: inset 0 1px 0 #ffffff10; }
.ts-guide.f-vampires { --fc: #ff3a52; } .ts-guide.f-aliens { --fc: #5affd8; } .ts-guide.f-dinosaurs { --fc: #ffa23a; }
.ts-guide.f-plants { --fc: #7dff6a; } .ts-guide.f-fungus { --fc: #c98cff; } .ts-guide.f-zombies { --fc: #9cff4a; }
.ts-guide.f-dragons { --fc: #ff7a1a; } .ts-guide.f-demons { --fc: #ff2a3a; } .ts-guide.f-divine { --fc: #ffe08a; }
.ts-guide.f-robots { --fc: #4ab0ff; } .ts-guide.f-radioactive { --fc: #a8ff3a; }
.ts-guide header { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-family: var(--font-title); font-size: 18px; color: #f3e2b8; }
.ts-guide header b { color: var(--fc, #f3e2b8); text-shadow: 0 0 10px color-mix(in srgb, var(--fc, #e7b552) 50%, transparent); }
.ts-style { margin-left: auto; font-size: 12px; letter-spacing: 0.06em; color: #b8a488; font-family: var(--font-body); }
.ts-summary { margin: 6px 0 8px; color: #e8d6b0; line-height: 1.35; }
.ts-good { font-family: var(--font-title); font-size: 13px; color: #c9a35a; letter-spacing: 0.05em; }
.ts-guide ul { margin: 4px 0 8px; padding-left: 18px; color: #d8c6a4; line-height: 1.45; }
.ts-guide li::marker { color: var(--fc, #e7b552); }
.ts-mech { margin: 0; padding-top: 8px; border-top: 1px solid #ffffff14; font-size: 13px; color: #b8a488; font-style: italic; }
/* One faction per row. */
.ts-guides { flex-direction: column; align-items: stretch; }
.ts-guide { flex: none; max-width: none; width: 100%; box-sizing: border-box; }

/* Synergy rating for the picked pair. */
.ts-synergy { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 14px auto 0; padding: 10px 16px;
  max-width: 620px; border-radius: 14px; background: #0007; border: 1px solid #c9a35a44; }
.ts-syn-label { font-family: var(--font-title); font-size: 14px; letter-spacing: 0.08em; color: #c9a35a; }
.ts-stars { font-size: 26px; letter-spacing: 2px; color: #ffd25a; text-shadow: 0 0 10px #ffb04099, 0 2px 2px #000; line-height: 1; }
.ts-stars i { font-style: normal; color: #3a2e22; text-shadow: none; }
.ts-synergy b { font-family: var(--font-title); font-size: 16px; color: #f3e2b8; }
.ts-synergy p { flex-basis: 100%; margin: 0; color: #d8c6a4; font-size: 14px; }
.ts-synergy.s5 { border-color: #ffd25a; box-shadow: 0 0 18px #ffd25a44; }
.ts-synergy.s1 .ts-stars { color: #ff6a5a; text-shadow: 0 0 8px #ff6a5a88; }

/* Accounts, matchmaking and the leaderboard. */
.lobby .text-input { font-size: 17px; padding: 9px 12px; border-radius: 10px; border: 1px solid #c9a35a77; background: #120c08cc; color: #f3e2b8; width: 15em; max-width: 100%; }
.lobby .text-input:focus { outline: 2px solid #f3d27a; }
.acct-form { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 16px auto; padding: 18px 22px; max-width: 360px;
  background: #0007; border: 1px solid #c9a35a55; border-radius: 16px; }
.acct-tabs { display: flex; gap: 6px; }
.acct-tabs .on { box-shadow: 0 0 0 2px #f3d27a; }
.acct-card { margin: 14px auto 4px; padding: 12px 20px; max-width: 520px; background: #0007; border: 1px solid #c9a35a55; border-radius: 16px; }
.acct-who { font-size: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.acct-who b { font-family: var(--font-title); font-size: 24px; color: #f3e2b8; }
.acct-rating { font-family: var(--font-stat, inherit); font-weight: 800; color: #ffd25a; }
.acct-links { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.lobby .modes .lobby-box { flex: 1 1 220px; max-width: 280px; }
.lobby .modes .lobby-box.ranked { border-color: #ffd25a; box-shadow: 0 0 18px #ffd25a33; }
.room-codes { margin: 14px auto; max-width: 640px; }
.room-codes summary { cursor: pointer; color: #c9b48a; padding: 6px; }
.queue-box { margin: 22px auto; padding: 22px; max-width: 420px; background: #0007; border: 1px solid #c9a35a55; border-radius: 16px; }
.queue-box h3 { margin: 0 0 6px; }
.queue-time { font-family: var(--font-title); font-size: 40px; color: #f3d27a; margin: 6px 0 12px; }
.rank-badge { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: #1b120a;
  background: #b0703c; vertical-align: middle; }
.rank-badge.rank-iron { background: #8a8f96; color: #111; } .rank-badge.rank-bronze { background: #b0703c; }
.rank-badge.rank-silver { background: #c9d2dc; } .rank-badge.rank-gold { background: #f3c64a; }
.rank-badge.rank-platinum { background: #7fe0d0; } .rank-badge.rank-diamond { background: #8ab8ff; }
.rank-badge.rank-master { background: #c27aff; color: #fff; text-shadow: 0 1px 1px #0008; }
.rank-badge.rank-legendary { background: linear-gradient(90deg, #ff8a3a, #ffd25a, #ff5ad2); box-shadow: 0 0 10px #ffd25a88; }
.rp { font-weight: 700; color: #ffd25a; font-size: 14px; }
.series { font-size: 13px; color: #f3e2b8; white-space: nowrap; }
.series i { font-style: normal; display: inline-block; width: 1.3em; text-align: center; color: #8a7a62; }
.series i.won { color: #7dff8a; } .series i.lost { color: #ff7a7a; }
.online-result .big { font-size: 22px; -webkit-text-stroke: 1px #3a0a02; }
.online-result .rank-badge, .online-result .series, .online-result .rp { vertical-align: middle; }
.leaderboard { margin: 10px auto; border-collapse: collapse; min-width: min(560px, 100%); background: #0007; border-radius: 12px; overflow: hidden; }
.leaderboard th, .leaderboard td { padding: 7px 12px; text-align: left; border-bottom: 1px solid #ffffff12; }
.leaderboard th { color: #c9a35a; font-family: var(--font-title); font-weight: normal; }
.leaderboard tr.me td { background: #f3d27a22; color: #fff1c8; }
.online-result { margin: 6px 0 12px; font-size: 18px; }
.online-result .up { color: #7dff8a; } .online-result .down { color: #ff7a7a; }

/* Faction guide: weaknesses under the strengths. */
.ts-good.ts-bad { color: #d98a7a; }
.ts-guide ul.ts-weak li::marker { content: '✕  '; color: #d9705f; font-size: 11px; }

/* Play online: same look as the title screen. */
.lobby.title-screen { gap: 18px; }
.lobby.title-screen .tavern-sign h1 { font-size: clamp(46px, 8vw, 96px); }
.lobby.title-screen .ts-runes { width: 420px; height: 420px; }
.lobby-deck { display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; border-radius: 999px; background: #0009;
  border: 1px solid #c9a35a66; box-shadow: 0 8px 20px #000a; text-align: left; }
.lobby-deck > div { display: flex; flex-direction: column; line-height: 1.25; }
.lobby-deck b { font-family: var(--font-title); font-size: 18px; color: #f3e2b8; }
.lobby-deck .sub { font-size: 12px; }
.lobby-hero { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 2px solid #e7b552; box-shadow: 0 0 0 2px #000, 0 4px 10px #000c;
  display: grid; place-items: center; background: #1a120c; flex: none; }
.lobby-hero + .lobby-hero { margin-left: -18px; }
.lobby-hero img { width: 100%; height: 100%; object-fit: cover; }
.lobby-panel { max-width: 940px; }
.lobby-panel h3 { font-family: var(--font-title); color: #f3e2b8; }
/* Gold buttons like the title screen; .ghost stays dark. */
.lobby.title-screen .lobby-panel button { font-family: var(--font-title); font-weight: 900; cursor: pointer; color: #2a1404; border-radius: 12px; border: 2px solid #1a0c04;
  padding: 9px 22px; font-size: 16px; background: linear-gradient(180deg, #ffe7a8 0%, #e7b552 45%, #a8701e 100%);
  box-shadow: inset 0 2px 0 #fff6d0, 0 4px 0 #4a2a0c, 0 8px 18px #000c; transition: transform 0.12s, filter 0.12s; }
.lobby.title-screen .lobby-panel button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); }
.lobby.title-screen .lobby-panel button:active:not(:disabled) { transform: translateY(3px); }
.lobby.title-screen .lobby-panel button.ghost { color: #f3e2b8; font-size: 14px; padding: 7px 16px; border-color: #6a4a2a;
  background: linear-gradient(180deg, #4a3a2a, #2a1e14); box-shadow: inset 0 1px 0 #ffffff22, 0 3px 0 #120a04, 0 6px 12px #000a; }
.lobby.title-screen .lobby-panel button:disabled { filter: grayscale(0.6) brightness(0.7); cursor: default; }
.lobby .lobby-box { background: linear-gradient(180deg, #2a1c12cc, #140c08e6); border: 1px solid #6a4a2a; box-shadow: inset 0 1px 0 #ffffff12, 0 10px 24px #000a; }
.lobby .mode-card { gap: 8px; padding: 18px 18px 20px; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.lobby .mode-card:hover { transform: translateY(-4px); border-color: #e7b552; box-shadow: 0 0 22px #ffb04044, 0 14px 28px #000c; }
.lobby .mode-card .sub { flex: 1; margin: 0; }
.mode-icon { font-size: 40px; line-height: 1; filter: drop-shadow(0 4px 6px #000); }
.lobby .mode-card.ranked { border-color: #e7b552; background: linear-gradient(180deg, #3a2610e6, #1a0e06f0);
  box-shadow: 0 0 0 1px #000, 0 0 26px #ffb04044, 0 10px 24px #000a; }
.lobby .mode-card.ranked h3 { color: #ffd25a; }
.lobby .acct-card { margin: 0 auto 16px; padding: 10px 18px; border-radius: 999px; background: #0008; border-color: #c9a35a66; display: flex;
  align-items: center; justify-content: center; gap: 8px 18px; flex-wrap: wrap; max-width: none; width: fit-content; }
.lobby .acct-card .acct-links { margin: 0; }
.lobby .acct-who { font-size: 16px; }
.lobby .acct-form { background: transparent; border: none; margin: 4px auto 8px; }
.lobby .room-codes { margin: 18px auto 0; border-top: 1px solid #ffffff14; padding-top: 10px; }
.lobby .room-codes summary { font-family: var(--font-title); letter-spacing: 0.04em; }
.lobby .queue-box { background: transparent; border: none; margin: 6px auto; }
.lobby .queue-box .lobby-wait::before { content: ''; display: block; width: 54px; height: 54px; margin: 6px auto 12px; border-radius: 50%;
  border: 4px solid #e7b55233; border-top-color: #ffd25a; animation: lobbySpin 0.9s linear infinite; }
@keyframes lobbySpin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .lobby .acct-card { border-radius: 16px; } }
.lobby.title-screen .acct-tabs button { white-space: nowrap; }
@media (max-width: 480px) { .lobby.title-screen .acct-tabs button { font-size: 13px; padding: 7px 12px; } .lobby-panel { padding: 14px 12px; } }
@media (max-width: 640px) { .lobby.title-screen .ts-runes { width: 300px; height: 300px; } }
.lobby.title-screen { overflow-x: clip; }

/* Play online on phones. Landscape (short screens): everything compact, the three modes side by side. */
@media (max-height: 540px) {
  .lobby.title-screen { padding: 6px 10px 14px; gap: 8px; }
  .lobby.title-screen .ts-runes, .lobby.title-screen .ts-tag { display: none; }
  .lobby.title-screen .tavern-sign h1 { font-size: 34px; padding: 0.04em 0.2em 0.1em; }
  .lobby-deck { padding: 4px 14px 4px 6px; gap: 8px; }
  .lobby-deck b { font-size: 14px; }
  .lobby-deck .sub { display: none; }
  .lobby-hero { width: 30px; height: 30px; }
  .lobby-hero + .lobby-hero { margin-left: -12px; }
  .lobby-panel { padding: 8px 10px 10px; }
  .lobby .acct-card { padding: 4px 6px 4px 14px; margin-bottom: 8px; gap: 4px 10px; }
  .lobby .acct-card > .sub { display: none; }
  .lobby .acct-who b { font-size: 18px; }
  .lobby.title-screen .lobby-panel button { font-size: 13px; padding: 6px 12px; }
  .lobby .modes { flex-wrap: nowrap; gap: 8px; margin: 0; }
  .lobby .modes .lobby-box.mode-card { flex: 1 1 0; min-width: 0; max-width: none; padding: 8px 8px 10px; gap: 4px; }
  .lobby .mode-card h3 { font-size: 15px; }
  .lobby .mode-card .sub { font-size: 11.5px; line-height: 1.25; }
  .mode-icon { font-size: 22px; }
  .lobby .text-input { font-size: 16px; padding: 6px 10px; width: 100%; }
  .lobby .room-codes { margin-top: 8px; padding-top: 4px; }
  .lobby .acct-form { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 620px; gap: 8px; margin: 0 auto; padding: 4px; }
  .lobby .acct-form .acct-tabs { flex-basis: 100%; justify-content: center; }
  .lobby .acct-form .text-input { width: 11em; flex: 1 1 9em; }
  .lobby .acct-form > p { flex-basis: 100%; margin: 0; font-size: 12px; }
  .lobby .queue-box { margin: 0 auto; padding: 6px; }
  .lobby .queue-box .lobby-wait::before { width: 34px; height: 34px; margin: 2px auto 6px; }
  .lobby .queue-time { font-size: 28px; margin: 2px 0 6px; }
  .lobby .leaderboard th, .lobby .leaderboard td { padding: 4px 8px; font-size: 13px; }
}
/* Portrait phones: modes stacked as compact rows (icon beside the text). */
@media (max-width: 560px) and (min-height: 541px) {
  .lobby.title-screen { padding: 12px 10px 24px; gap: 12px; }
  .lobby.title-screen .tavern-sign h1 { font-size: 44px; }
  .lobby .modes { flex-direction: column; gap: 10px; margin: 0; }
  .lobby .modes .lobby-box.mode-card { max-width: none; flex: none; display: grid; grid-template-columns: 44px 1fr; align-items: center;
    text-align: left; gap: 2px 12px; padding: 12px 14px; }
  .lobby .mode-card .mode-icon { grid-row: span 2; font-size: 34px; text-align: center; }
  .lobby .mode-card h3 { font-size: 17px; }
  .lobby .mode-card .sub { font-size: 12.5px; }
  .lobby .mode-card > input, .lobby .mode-card > button { grid-column: 1 / -1; width: 100%; }
  .lobby .acct-card { border-radius: 16px; padding: 8px 12px; }
  .lobby .leaderboard th, .lobby .leaderboard td { padding: 5px 6px; font-size: 13px; }
  .lobby-deck .sub { display: none; }
}
/* No hover lift on touch screens. */
@media (hover: none) { .lobby .mode-card:hover { transform: none; } }

/* ==== PORTRAIT BATTLE LAYOUT ===============================================
   Upright phones (and tablets). Top to bottom: enemy hand, enemy hero, enemy
   minions, the middle line with End Turn, your minions, your hero, mana, your
   hand. Sizes are container units of the full-screen .arena. */
.arena.portrait {
  --minion-w: min(12.6cqw, 8.4cqh, 92px);
  --card-w: min(24cqw, 15.5cqh, 150px);
  --hero: min(19cqw, 10.5cqh, 120px);
  background: #0b0709;
}
.arena.portrait::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--art, none) center / cover no-repeat, radial-gradient(ellipse at 50% 45%, var(--felt) 0%, var(--felt-2) 80%);
  filter: brightness(0.42) saturate(1.1); }
.arena.portrait::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #000a 0%, #0000 18%, #0000 82%, #000c 100%); }
.arena.portrait .table-oval { left: 1.5cqw; right: 1.5cqw; top: 19cqh; bottom: 39cqh; border-radius: 26px; opacity: 0.55; }
.arena.portrait .midline { left: 4cqw; right: 22cqw; top: 39.8cqh; }
.arena.portrait .history { display: none; }

/* Enemy: hand peeking from the top, hero below it. */
.arena.portrait .opp-hand { left: 22cqw; right: 22cqw; top: 0; height: 4cqh; }
.arena.portrait .opp-hand .card.back { width: calc(var(--card-w) * 0.42); height: calc(var(--card-w) * 0.6); transform: translate(calc(-50% + var(--x, 0px) * 0.7), calc(-58% - var(--y, 0px))) rotate(calc(var(--rot, 0deg) * -1)); }
.arena.portrait .hero-zone { left: 50%; transform: translateX(-50%); gap: 2.5cqw; }
.arena.portrait .hero-zone.opp { top: 5.5cqh; }
.arena.portrait .hero-zone.me { top: auto; bottom: calc(var(--card-w) * 0.95 + 7cqh); }
.arena.portrait .hero-zone .traps, .arena.portrait .hero-zone .hero-powers { min-width: calc(var(--hero) * 0.9); }
.arena.portrait .hero-spell { width: calc(var(--hero) * 0.6); height: calc(var(--hero) * 0.6); }
.arena.portrait .hero-name { font-size: 11px; }

/* Minion rows, full width. */
.arena.portrait .board { left: 1.5cqw; right: 1.5cqw; gap: 0.9cqw; }
.arena.portrait .board.opp { top: calc(29.5cqh - var(--minion-w) * 0.61); }
.arena.portrait .board.me { top: calc(50.5cqh - var(--minion-w) * 0.61); }
.arena.portrait .minion .atk, .arena.portrait .minion .hp { width: calc(var(--minion-w) * 0.36); height: calc(var(--minion-w) * 0.36); font-size: calc(var(--minion-w) * 0.2); }
.arena.portrait .rope { left: 4cqw; right: 22cqw; top: calc(39.8cqh - 6px); }
.arena.portrait .thinking { left: 50%; top: 36cqh; transform: translateX(-50%); }

/* Right edge: enemy deck, End Turn on the middle line, your deck. */
.arena.portrait .rail { position: static; }
.arena.portrait .end-turn { position: absolute; right: 2cqw; top: 39.8cqh; transform: translateY(-50%); width: 19cqw; max-width: 120px;
  padding: 10px 4px; font-size: clamp(11px, 3.2cqw, 16px); z-index: 22; }
.arena.portrait .deck-pile { position: absolute; z-index: 20; }
.arena.portrait .deck-pile .pile { width: calc(var(--card-w) * 0.34); height: calc(var(--card-w) * 0.48); }
.arena.portrait .deck-pile.opp { right: 2.5cqw; top: 6cqh; }
.arena.portrait .deck-pile.me { right: 2.5cqw; top: auto; bottom: calc(var(--card-w) * 0.95 + 7cqh); }
.arena.portrait .deck-pile b { font-size: 13px; }

/* Mana: enemy top-left; yours just above your hand on the right. */
.arena.portrait .mana-bar { right: auto; gap: 6px; }
.arena.portrait .mana-bar.opp { left: 2.5cqw; top: 1.4cqh; }
.arena.portrait .mana-bar.me { right: 2.5cqw; left: auto; top: auto; bottom: calc(var(--card-w) * 0.95 + 1.4cqh); flex-direction: row-reverse; }
.arena.portrait .crystals { gap: 3px; flex-wrap: wrap; max-width: 46cqw; }
.arena.portrait .crystal { width: clamp(8px, 2.6cqw, 14px); height: clamp(8px, 2.6cqw, 14px); }
.arena.portrait .mana-bar.opp .crystal { width: clamp(7px, 2cqw, 11px); height: clamp(7px, 2cqw, 11px); }
.arena.portrait .mana-text { font-size: clamp(14px, 4.4cqw, 22px); min-width: 0; text-align: left; }
.arena.portrait .mana-bar.opp .mana-text { font-size: clamp(12px, 3.4cqw, 16px); }

/* Your hand: a fan along the bottom; tap a card to lift it and read it. */
.arena.portrait .my-hand { left: 2cqw; right: 2cqw; height: calc(var(--card-w) * 1.5); }
.arena.portrait .my-hand .card { transform: translate(calc(-50% + var(--x, 0px)), calc(28% + var(--y, 0px))) rotate(var(--rot, 0deg)); }
.arena.portrait .my-hand .card:hover:not(.drag-src) { transform: translate(calc(-50% + var(--x, 0px)), -22%) rotate(0deg) scale(1.45); }

/* Menu buttons: a small column on the left, beside your hero. */
.arena.portrait .corner-buttons { left: 1.5cqw; top: auto; bottom: calc(var(--card-w) * 0.95 + 1cqh); gap: 4px; }
.arena.portrait .corner-buttons button { width: 32px; height: 32px; font-size: 15px; border-radius: 8px; }
.arena.portrait .log-drawer { width: min(300px, 86vw); }

/* Overlays: Starting Hand, Discover, Quick Play, game over. */
.arena.portrait .overlay .panel, .arena.portrait .mulligan-hs { max-width: 96vw; box-sizing: border-box; }
.arena.portrait .mull-row, .arena.portrait .choice-row { flex-wrap: wrap; justify-content: center; gap: 8px; }
.arena.portrait .mull-row .card, .arena.portrait .choice-row .card { width: min(30vw, 150px) !important; }
.arena.portrait .mull-banner span { font-size: clamp(22px, 7vw, 40px); }
.arena.portrait .overlay h2 { font-size: clamp(18px, 5.5vw, 30px); }
.arena.portrait .summary-table { font-size: 13px; }
/* Intro on upright screens: the coin-flip line wraps instead of running off the edges. */
@media (max-aspect-ratio: 5/6) {
  .coin-text { white-space: normal; text-align: center; width: 88vw; font-size: clamp(18px, 6vw, 28px); }
  .intro-side.me { left: 8vw; bottom: 10vh; } .intro-side.opp { right: 8vw; top: 8vh; }
}
/* Portrait: the battlefield box runs from under the enemy hero down to just above yours;
   minion rows and the middle line (End Turn, rope) are centred inside it. */
.arena.portrait {
  --box-top: 17.5cqh;
  --box-bot: calc(100cqh - var(--card-w) * 0.95 - 8.5cqh - var(--hero));
  --mid: calc((var(--box-top) + var(--box-bot)) / 2);
}
.arena.portrait .table-oval { top: var(--box-top); bottom: auto; height: calc(var(--box-bot) - var(--box-top)); }
.arena.portrait .midline { top: var(--mid); }
.arena.portrait .board.opp { top: calc((var(--box-top) + var(--mid)) / 2 - var(--minion-w) * 0.61); }
.arena.portrait .board.me { top: calc((var(--mid) + var(--box-bot)) / 2 - var(--minion-w) * 0.61); }
.arena.portrait .rope { top: calc(var(--mid) - 6px); }
.arena.portrait .end-turn { top: var(--mid); }
.arena.portrait .thinking { top: calc(var(--mid) - 5cqh); }
/* Portrait: Hero Spells / Fusion in a compact two-row grid beside the portrait, clear of the deck pile. */
.arena.portrait .hero-zone .hero-powers { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 6px 5px; min-width: 0; }
.arena.portrait .hero-zone .traps { min-width: calc(var(--hero) * 0.6); }
.arena.portrait .hero-spell { width: calc(var(--hero) * 0.5); height: calc(var(--hero) * 0.5); border-width: 2px; }
.arena.portrait .hero-spell .hs-cost { width: 18px; height: 18px; font-size: 11px; top: -6px; }
.arena.portrait .extinction-badge, .arena.portrait .freeze-badge { width: calc(var(--hero) * 0.46); height: calc(var(--hero) * 0.46); }
/* Portrait: deck piles sit in the battlefield box's right corners (enemy top, yours bottom), clear of the Hero Spells. */
.arena.portrait .deck-pile { flex-direction: row; align-items: center; gap: 4px; }
.arena.portrait .deck-pile .pile { width: calc(var(--card-w) * 0.28); height: calc(var(--card-w) * 0.39); }
.arena.portrait .deck-pile.opp { right: 3cqw; top: calc(var(--box-top) + 1.2cqh); bottom: auto; }
.arena.portrait .deck-pile.me { right: 3cqw; top: auto; bottom: calc(100cqh - var(--box-bot) + 1.2cqh); }
/* Portrait: menu buttons as a small grid in the free top-left corner (beside the enemy hero). */
.arena.portrait .corner-buttons { top: calc(1.4cqh + 22px); bottom: auto; left: 1.5cqw; flex-direction: row; flex-wrap: wrap; width: calc(3 * 30px + 2 * 4px); }
.arena.portrait .corner-buttons button { width: 30px; height: 30px; font-size: 14px; }
.arena.portrait .log-drawer:not(.open) .log-tab { display: none; }
/* Portrait: the red box frames only the battlefield (the two minion rows). End Turn and the deck piles
   live in the hero rows instead: End Turn right of your hero, your deck left of it, the enemy deck right of theirs. */
.arena.portrait {
  --row-h: calc(var(--minion-w) * 1.22);
  --opp-row: calc((var(--box-top) + var(--mid)) / 2);
  --my-row: calc((var(--mid) + var(--box-bot)) / 2);
  --my-hero-y: calc(var(--card-w) * 0.95 + 7cqh + var(--hero) / 2); /* from the bottom */
  --opp-hero-y: calc(5.5cqh + var(--hero) / 2);                      /* from the top */
}
.arena.portrait .table-oval { top: calc(var(--opp-row) - var(--row-h) / 2 - 1.4cqh); height: calc(var(--my-row) - var(--opp-row) + var(--row-h) + 2.8cqh); }
.arena.portrait .midline, .arena.portrait .rope { left: 4cqw; right: 4cqw; }
.arena.portrait .end-turn { top: auto; bottom: var(--my-hero-y); transform: translateY(50%); right: 2cqw; width: 18cqw; max-width: 110px; }
.arena.portrait .deck-pile.me { right: auto; left: 3cqw; bottom: var(--my-hero-y); transform: translateY(50%); }
.arena.portrait .deck-pile.opp { right: 3cqw; top: var(--opp-hero-y); transform: translateY(-50%); }
/* Portrait: battlefield box sits lower, reaching further down your side (rows move with it). */
.arena.portrait { --box-top: 22cqh; }
.arena.portrait .table-oval { top: calc(var(--opp-row) - var(--row-h) / 2 - 1.4cqh); height: calc(var(--my-row) - var(--opp-row) + var(--row-h) + 1.4cqh + 3.2cqh); }
.arena.portrait { --box-top: 24.5cqh; }
.arena.portrait .table-oval { height: calc(var(--my-row) - var(--opp-row) + var(--row-h) + 1.4cqh + 4.4cqh); }

/* Quick Play: electric banner for both players, then the card is shown and lands. */
.fx-banner.quickplay { padding: 14px 60px; background: linear-gradient(180deg, #1c2a52f0, #0b1230f0); border: 3px solid #7fd8ff; border-radius: 14px;
  box-shadow: 0 0 0 2px #000, 0 0 40px #4cc8ffaa, 0 20px 40px #000c; text-align: center; }
.fx-banner.quickplay span { display: flex; flex-direction: column; align-items: center; line-height: 1.05; font-size: clamp(30px, 8vw, 68px);
  background: linear-gradient(#ffffff, #9fe6ff 45%, #2f8cff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px #4cc8ff); }
.fx-banner.quickplay small { font-size: 0.34em; letter-spacing: 0.18em; text-transform: uppercase; }
.qp-reveal .trap-label { background: linear-gradient(90deg, #2f8cff, #9fe6ff, #2f8cff); color: #06122c; }
.qp-land { position: fixed; z-index: 60; width: 160px; height: 160px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #ffffffcc 0%, #7fd8ff88 35%, #2f8cff00 70%); }

.qp-reveal .trap-label { text-align: center; margin: 0 auto 10px; width: fit-content; padding: 4px 16px; border-radius: 999px; font-family: var(--font-title);
  font-weight: 900; font-size: clamp(16px, 2.4vw, 30px); box-shadow: 0 0 18px #4cc8ff88; }
/* Portrait hand: hovering never moves or grows a card (that made full hands flicker between cards);
   it just comes to the front with a glow. Tap lifts it a little; the readable copy opens centred. */
.arena.portrait .my-hand .card:hover:not(.drag-src) {
  transform: translate(calc(-50% + var(--x, 0px)), calc(28% + var(--y, 0px))) rotate(var(--rot, 0deg));
  z-index: 150 !important; box-shadow: 0 0 0 2px #ffe39a, 0 0 16px #ffd25a; }
.arena.portrait .my-hand .card.inspect { transform: translate(calc(-50% + var(--x, 0px)), 6%) rotate(0deg) scale(1.08) !important; z-index: 200 !important; }
.arena.portrait .my-hand .card { transition: transform 0.16s ease, box-shadow 0.12s; }
/* Portrait: hand cards ignore the hover make-room shift entirely. */
.arena.portrait .my-hand .card { --push: 0px !important; }

.lobby .acct-links .danger-link { color: #ff9a8a !important; }
.lobby .delete-box .danger, .lobby.title-screen .lobby-panel button.danger { background: linear-gradient(180deg, #ff8a7a, #c0392b 55%, #7a1a12); color: #fff; }

/* ==== PORTRAIT BOARDS ========================================================
   An upright screen with a portrait painting for the faction (board-art.js
   PORTRAIT_BOARDS). board.js layoutPortraitBoard() sets, in px:
   --pb-x/y/w/h  the painting;  --oh-* / --mh-*  the enemy / your hero frame opening;
   --f-top / --f-bot  the painted battlefield. */
.arena.portrait.p-board { --mid: calc((var(--f-top) + var(--f-bot)) / 2); }
.arena.portrait.p-board::before { filter: blur(18px) brightness(0.45); transform: scale(1.1); }
.arena.portrait.p-board::after { display: none; }
.arena.p-board .pboard-img { position: absolute; z-index: 0; pointer-events: none; left: var(--pb-x); top: var(--pb-y); width: var(--pb-w); height: var(--pb-h);
  background-size: 100% 100%; background-repeat: no-repeat; }
.arena.p-board .table-oval, .arena.p-board .midline { display: none; }

/* Heroes inside their painted frames. */
.arena.p-board .hero-zone { inset: 0; transform: none; display: block; pointer-events: none; }
.arena.p-board .hero-zone > * { pointer-events: auto; }
.arena.p-board .hero-portrait { position: absolute; box-shadow: inset 0 0 18px #000c; }
.arena.p-board .hero-portrait .portrait-img { border-radius: inherit; }
.arena.p-board .hero-name { display: none; }
.arena.p-board .hero-zone.opp .hero-portrait { left: var(--oh-x); top: var(--oh-y); width: var(--oh-w); height: var(--oh-h); }
.arena.p-board .hero-zone.me .hero-portrait { left: var(--mh-x); top: var(--mh-y); width: var(--mh-w); height: var(--mh-h); }
.arena.p-board.opp-arch .hero-zone.opp .hero-portrait { border-radius: 50% 50% 4% 4% / 44% 44% 3% 3%; }
.arena.p-board.opp-circle .hero-zone.opp .hero-portrait, .arena.p-board.me-circle .hero-zone.me .hero-portrait { border-radius: 50%; }
.arena.p-board.me-arch .hero-zone.me .hero-portrait { border-radius: 50% 50% 4% 4% / 44% 44% 3% 3%; }
/* Hero Spells to the right of each frame, Traps to the left. */
.arena.p-board .hero-zone .hero-powers { position: absolute; transform: translateY(-50%); }
.arena.p-board .hero-zone.opp .hero-powers { left: calc(var(--oh-x) + var(--oh-w) + 12px); top: calc(var(--oh-y) + var(--oh-h) / 2); }
.arena.p-board .hero-zone.me .hero-powers { left: calc(var(--mh-x) + var(--mh-w) + 12px); top: calc(var(--mh-y) + var(--mh-h) / 2); }
.arena.p-board .hero-zone .traps { position: absolute; transform: translateY(-50%); min-width: 0; }
.arena.p-board .hero-zone.opp .traps { right: calc(100% - var(--oh-x) + 10px); top: calc(var(--oh-y) + var(--oh-h) / 2); }
.arena.p-board .hero-zone.me .traps { right: calc(100% - var(--mh-x) + 10px); top: calc(var(--mh-y) + var(--mh-h) / 2); }

/* Minion rows centred in each half of the painted battlefield. */
.arena.p-board .board.opp { top: calc((var(--f-top) + var(--mid)) / 2 - var(--minion-w) * 0.61); }
.arena.p-board .board.me { top: calc((var(--mid) + var(--f-bot)) / 2 - var(--minion-w) * 0.61); }
.arena.p-board .rope { top: calc(var(--mid) - 6px); }
.arena.p-board .thinking { top: calc(var(--mid) - 5cqh); }

/* End Turn beside your frame; your deck on the other side; the enemy deck beside theirs. */
.arena.p-board .end-turn { top: calc(var(--mh-y) + var(--mh-h) / 2); bottom: auto; transform: translateY(-50%); }
.arena.p-board .deck-pile.me { top: calc(var(--mh-y) + var(--mh-h) / 2); bottom: auto; transform: translateY(-50%); }
.arena.p-board .deck-pile.opp { top: calc(var(--oh-y) + var(--oh-h) / 2); transform: translateY(-50%); }
/* Your Mana sits just above your hand. */
.arena.p-board .mana-bar.me { bottom: calc(var(--card-w) + 6px); }
.arena.portrait.p-board .hero-zone.opp, .arena.portrait.p-board .hero-zone.me { inset: 0; top: 0; bottom: 0; left: 0; right: 0; transform: none; }
/* Portrait hand: cards shrink to fit as the hand fills (board.js layoutHands sets --hand-cw). */
.arena.portrait .my-hand .card { width: var(--hand-cw, var(--card-w)); }
/* Landscape (painted boards): the hand sits a little higher (was 60% of a card below the edge). */
.arena.has-board .my-hand .card { transform: translate(calc(-50% + var(--x, 0px) + var(--push, 0px)), calc(48% + var(--y, 0px))) rotate(var(--rot, 0deg)); }
@media (hover: none) {
  .arena.has-board .my-hand .card:hover:not(.drag-src) { transform: translate(calc(-50% + var(--x, 0px)), calc(48% + var(--y, 0px))) rotate(var(--rot, 0deg)); }
}
/* Portrait hand sits a little higher so more of each card shows. */
.arena.portrait .my-hand .card { transform: translate(calc(-50% + var(--x, 0px)), calc(14% + var(--y, 0px))) rotate(var(--rot, 0deg)); }
.arena.portrait .my-hand .card:hover:not(.drag-src) { transform: translate(calc(-50% + var(--x, 0px)), calc(14% + var(--y, 0px))) rotate(var(--rot, 0deg)); }
/* Portrait, two-row hand: your Mana moves under End Turn so the back row has room. */
.arena.portrait:has(.my-hand.two-rows) .mana-bar.me { bottom: auto; top: calc(var(--mh-y, 70cqh) + var(--mh-h, 10cqh) / 2 + 26px); right: 2.5cqw; }
/* Portrait: a tapped card lifts from its own row (back or front). */
.arena.portrait .my-hand .card.inspect { transform: translate(calc(-50% + var(--x, 0px)), calc(2% + var(--y, 0px))) rotate(0deg) scale(1.06) !important; z-index: 200 !important; }

/* ---- New-player help: How to Play page, tips, Trap tokens ---- */
.ts-row.small button.new-player { border-color: #ffd25a; box-shadow: 0 0 0 2px #ffd25a88, 0 0 18px #ffd25a66; animation: tsPlayGlow 2.4s ease-in-out infinite; }
.ts-row.small button.new-player small { display: block; font-size: 10px; letter-spacing: 0.08em; color: #ffd25a; }
.howto { max-width: 1100px; padding: 24px 16px 48px; }
.howto .howto-lead { text-align: center; margin: 0 0 18px; }
.howto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.howto-card { background: linear-gradient(180deg, #2a1c12e6, #140c08f0); border: 1px solid #6a4a2a; border-radius: 14px; padding: 14px 18px; text-align: left;
  box-shadow: inset 0 1px 0 #ffffff12, 0 10px 24px #000a; color: #e8d6b0; line-height: 1.45; }
.howto-card h3 { margin: 0 0 6px; font-family: var(--font-title); color: #f3e2b8; font-size: 19px; }
.howto-card h3 span { margin-right: 4px; }
.howto-card ul { margin: 6px 0 0; padding-left: 18px; }
.howto-card b { color: #ffe39a; }
.howto-keywords { margin-top: 14px; }
.howto-keywords dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 6px 0; }
.howto-keywords dt { font-weight: 700; color: #ffe39a; }
.howto-keywords dd { margin: 0; }
@media (max-width: 560px) { .howto-keywords dl { grid-template-columns: 1fr; } .howto-keywords dd { margin-bottom: 6px; } }

.coach-tip { position: fixed; left: 50%; top: 36%; transform: translateX(-50%); z-index: 2500; width: min(420px, calc(100vw - 32px));
  padding: 14px 18px 12px; border-radius: 16px; background: linear-gradient(180deg, #2b1f0fF5, #170f07F5); border: 2px solid #ffd25a;
  box-shadow: 0 0 0 2px #000, 0 0 30px #ffd25a55, 0 18px 40px #000c; color: #f3e2b8; animation: coachIn 0.28s ease-out; }
.coach-tip b { font-family: var(--font-title); font-size: 18px; color: #ffe39a; }
.coach-tip p { margin: 6px 0 10px; line-height: 1.45; }
.coach-btns { display: flex; gap: 8px; justify-content: flex-end; }
.coach-btns button { font-size: 14px; padding: 7px 14px; }
@keyframes coachIn { from { opacity: 0; transform: translate(-50%, 12px) scale(0.96); } to { opacity: 1; transform: translateX(-50%); } }

.trap-token { width: calc(var(--hero, 80px) * 0.34); height: calc(var(--hero, 80px) * 0.4); min-width: 26px; min-height: 30px; cursor: help;
  font-size: calc(var(--hero, 80px) * 0.2); background: radial-gradient(circle at 50% 35%, #c38bff, #6a2bb0 55%, #2a0d40);
  box-shadow: 0 0 12px #a46bff; filter: drop-shadow(0 0 6px #a46bffaa); animation: trapPulse 2.2s ease-in-out infinite; }
.trap-token.mine { cursor: zoom-in; }
.trap-token.fresh { animation: trapDrop 0.7s cubic-bezier(.2,1.6,.4,1), trapPulse 2.2s ease-in-out 0.7s infinite; }
@keyframes trapPulse { 0%, 100% { filter: drop-shadow(0 0 4px #a46bff88); } 50% { filter: drop-shadow(0 0 12px #c38bff); } }
@keyframes trapDrop { 0% { transform: translateY(-60px) scale(1.8) rotate(-20deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.arena.p-board .hero-zone .traps, .arena.has-board .traps { display: flex; gap: 4px; }

/* Opponent draws: the flying back glows, new backs in their hand glow for a moment, a label floats. */
.fx-opp-draw { z-index: 900; pointer-events: none; box-shadow: 0 0 0 2px #ffd25a, 0 0 28px #ffb040, 0 0 60px #ffb04088 !important; border-radius: 8px; }
.opp-hand .card.back.new-card { animation: oppNewCard 2.4s ease-out; }
@keyframes oppNewCard { 0%, 60% { box-shadow: 0 0 0 2px #ffd25a, 0 0 22px #ffb040; } 100% { box-shadow: none; } }
.fx-label { position: fixed; z-index: 950; pointer-events: none; padding: 6px 16px; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-title); font-size: clamp(14px, 1.6vw, 20px); color: #fff3d0; background: #1a0f08e8; border: 2px solid #ffd25a;
  box-shadow: 0 0 18px #ffb04088, 0 8px 18px #000c; text-shadow: 0 1px 2px #000; }

/* ==== Painted Mana Crystals and coin (art/ui) ==================================
   Gems keep the slot heights set above; their width follows the art (about 0.62:1). */
.mana-bar .crystal { width: auto !important; aspect-ratio: 0.62; clip-path: none !important; border: none !important; border-radius: 0 !important;
  box-shadow: none !important; background: center / contain no-repeat transparent !important; transform: none !important; }
.mana-bar .crystal::after { display: none !important; }
.mana-bar .crystal.full { background-image: url('../../art/ui/mana-full.png') !important; filter: drop-shadow(0 0 3px #4c8dffcc); opacity: 1; }
.mana-bar .crystal.spent { background-image: url('../../art/ui/mana-spent.png') !important; filter: none; opacity: 0.9; }
.mana-bar .crystal.bonus { background-image: url('../../art/ui/mana-bonus.png') !important; filter: drop-shadow(0 0 4px #ffb040); opacity: 1; }
.mana-bar .crystal.locked { background-image: url('../../art/ui/mana-locked.png') !important; filter: saturate(0.7); opacity: 0.38; }
.mana-bar .crystal.primal.full { background-image: url('../../art/ui/mana-primal.png') !important; filter: drop-shadow(0 0 3px #ff9a2a); opacity: 1; }
.mana-bar .crystal.primal.spent { background-image: url('../../art/ui/mana-primal.png') !important; filter: grayscale(0.7) brightness(0.45); opacity: 0.9; }
/* A little taller than the old square gems so the art reads. */
.mana-bar .crystal { height: 20px; }
.mana-bar.opp .crystal { height: 15px; }
.arena.has-board .mana-bar.me .crystal { height: clamp(18px, 1.95cqw, 38px); }
.arena.has-board .mana-bar.opp .crystal { height: clamp(15px, 1.55cqw, 30px); }
.arena.portrait .crystal { height: clamp(14px, 4.2cqw, 22px); }
.arena.portrait .mana-bar.opp .crystal { height: clamp(11px, 3cqw, 16px); }

.coin .face { background: center / 100% 100% no-repeat transparent !important; box-shadow: 0 10px 30px #000c !important;
  font-size: clamp(26px, 4.2vmin, 42px); letter-spacing: 0.06em; }
.coin .face.front { background-image: url('../../art/ui/coin-gold.png') !important; color: #3a2200; text-shadow: 0 1px 0 #ffe9a8, 0 -1px 0 #6a4410; }
.coin .face.back { background-image: url('../../art/ui/coin-silver.png') !important; color: #23262e; text-shadow: 0 1px 0 #ffffff, 0 -1px 0 #5a5e6a; }

/* ---- Kill effects (fx.js killFx / shatterCard) ---- */
.fx-kill-flash { position: fixed; z-index: 905; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #ffffffcc 20%, #ffffff00 65%); mix-blend-mode: screen; }
.fx-slash { position: fixed; z-index: 910; pointer-events: none; border-radius: 999px; transform-origin: 50% 50%; }
.fx-kill-core { position: fixed; z-index: 908; pointer-events: none; border-radius: 50%; mix-blend-mode: screen; }
.fx-kill-ring { position: fixed; z-index: 907; pointer-events: none; border-radius: 50%; border: 4px solid; }
.fx-kill-beam { position: fixed; z-index: 908; pointer-events: none; border-radius: 0 0 40% 40%; mix-blend-mode: screen; transform-origin: 50% 100%; }
.fx-kill-zap { position: fixed; left: 0; top: 0; z-index: 910; pointer-events: none; filter: drop-shadow(0 0 8px #7fd0ff); }
.fx-kill-skull { position: fixed; z-index: 915; pointer-events: none; font-size: 30px; filter: drop-shadow(0 0 8px #000) drop-shadow(0 0 14px #ff3a3a88); }
.fx-piece { transition: none !important; box-shadow: none !important; }
body.reduced-motion .fx-slash, body.reduced-motion .fx-kill-beam, body.reduced-motion .fx-kill-zap { display: none; }
/* ---- Faction kill effects (fx.js KILLS) ---- */
.fx-kill-svg { position: fixed; left: 0; top: 0; z-index: 909; pointer-events: none; overflow: visible; }
.fx-kill-puddle { position: fixed; z-index: 899; pointer-events: none; border-radius: 50%; }
.fx-drain { position: fixed; z-index: 912; pointer-events: none; width: 9px; height: 9px; border-radius: 50%; }
.fx-kill-glyph { position: fixed; z-index: 911; pointer-events: none; line-height: 1; }
.fx-kill-glyph.rad { color: #d8ff5a; text-shadow: 0 0 12px #a8ff3a, 0 0 30px #3aff7a, 0 0 2px #000; font-weight: 900; }
/* Vampires: two fang punctures. */
.fx-fang { position: fixed; z-index: 911; pointer-events: none; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: radial-gradient(circle at 50% 70%, #fff 0%, #ff2a44 40%, #6a0010 100%); box-shadow: 0 0 10px #ff2a44; }
/* Dinosaurs: a three-toed footprint (three toes + a pad) and ground cracks. */
.fx-footprint { position: fixed; z-index: 908; pointer-events: none; filter: drop-shadow(0 0 6px #000) drop-shadow(0 6px 10px #000c); }
.fx-footprint i, .fx-footprint b { position: absolute; background: radial-gradient(circle at 50% 40%, #6a4a2a, #2a1a0a 80%); border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; }
.fx-footprint i { width: 22%; height: 46%; top: 2%; transform-origin: 50% 100%; }
.fx-footprint i:nth-child(1) { left: 12%; transform: rotate(-28deg); }
.fx-footprint i:nth-child(2) { left: 39%; top: -4%; }
.fx-footprint i:nth-child(3) { left: 66%; transform: rotate(28deg); }
.fx-footprint b { left: 24%; top: 46%; width: 52%; height: 46%; border-radius: 50% 50% 46% 46%; }
.fx-crack { position: fixed; z-index: 907; pointer-events: none; height: 3px; transform-origin: 0 50%; border-radius: 2px;
  background: linear-gradient(90deg, #1a0e04, #3a2410 70%, transparent); box-shadow: 0 0 4px #ffb04066; }
/* Demons: the hell-portal under the victim. */
.fx-portal { position: fixed; z-index: 898; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse, #000 0%, #2a0004 35%, #ff2a3a 62%, #ff8a3a00 75%); box-shadow: 0 0 30px #ff2a3a; }
/* Fungus: spore clouds. */
.fx-spore { position: fixed; z-index: 908; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, #e8c8ffcc 0%, #c98cff99 35%, #6a2bb044 60%, transparent 72%); filter: blur(1px); }
/* Divine: a four-point starburst. */
.fx-starburst { position: fixed; z-index: 909; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0%, #ffe8a0 25%, transparent 60%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }
/* Robots: targeting brackets. */
.fx-reticle { position: fixed; z-index: 909; pointer-events: none; }
.fx-reticle i { position: absolute; width: 26%; height: 22%; border: 3px solid #ff3a3a; filter: drop-shadow(0 0 6px #ff3a3a); }
.fx-reticle i:nth-child(1) { left: 0; top: 0; border-right: none; border-bottom: none; }
.fx-reticle i:nth-child(2) { right: 0; top: 0; border-left: none; border-bottom: none; }
.fx-reticle i:nth-child(3) { left: 0; bottom: 0; border-right: none; border-top: none; }
.fx-reticle i:nth-child(4) { right: 0; bottom: 0; border-left: none; border-top: none; }
body.reduced-motion .fx-footprint, body.reduced-motion .fx-portal, body.reduced-motion .fx-kill-svg, body.reduced-motion .fx-reticle { display: none; }
/* Beams and fire pillars: soft, flame-like sides instead of hard edges. */
.fx-kill-beam { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%); border-radius: 50% 50% 0 0 / 20% 20% 0 0; }
/* Aliens hit: a laser streak from the attacker. */
.fx-laser { position: fixed; z-index: 910; pointer-events: none; height: 6px; border-radius: 3px; transform-origin: 0 50%; }

/* ==== NEW BOARDS: per-board layout (landscape) =================================
   board.js landscapeVars() sets --oh-* / --mh-* (hero frame openings) and --f-top /
   --f-bot (the battlefield) in container units of the 16:9 arena. */
.arena.has-board.v-board { --mid: calc((var(--f-top) + var(--f-bot)) / 2); }
.arena.has-board.v-board .hero-zone.opp .hero-portrait { left: var(--oh-x); top: var(--oh-y); width: var(--oh-w); height: var(--oh-h); }
.arena.has-board.v-board .hero-zone.me .hero-portrait { left: var(--mh-x); top: var(--mh-y); width: var(--mh-w); height: var(--mh-h); }
.arena.has-board.v-board .hero-zone.opp .hero-powers { left: calc(var(--oh-x) + var(--oh-w) + 1.4cqw); top: calc(var(--oh-y) + var(--oh-h) / 2); }
.arena.has-board.v-board .hero-zone.me .hero-powers { left: calc(var(--mh-x) + var(--mh-w) + 1.4cqw); top: calc(var(--mh-y) + var(--mh-h) / 2); }
.arena.has-board.v-board .hero-zone.opp .traps { right: calc(100% - var(--oh-x) + 1.2cqw); top: calc(var(--oh-y) + var(--oh-h) / 2); }
.arena.has-board.v-board .hero-zone.me .traps { right: calc(100% - var(--mh-x) + 1.2cqw); top: calc(var(--mh-y) + var(--mh-h) / 2); }
.arena.has-board.v-board .board.opp { top: calc((var(--f-top) + var(--mid)) / 2 - var(--minion-w) * 0.61); }
.arena.has-board.v-board .board.me { top: calc((var(--mid) + var(--f-bot)) / 2 - var(--minion-w) * 0.61); }
.arena.has-board.v-board .rope { top: calc(var(--mid) - 6px); }

/* ==== Corner props (board.js propsHTML) ======================================= */
.board-props { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.arena.p-board .board-props { inset: auto; left: var(--pb-x); top: var(--pb-y); width: var(--pb-w); height: var(--pb-h); }
.board-prop { position: absolute; pointer-events: auto; cursor: pointer; }
.board-prop > * { position: absolute; pointer-events: none; display: block; }
.prop-crop { inset: 0; background-repeat: no-repeat; }
.prop-glow { inset: -35%; border-radius: 50%; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, var(--c) 0%, color-mix(in srgb, var(--c) 40%, transparent) 30%, transparent 66%); }

.fx-glow .prop-glow { animation: propGlow 2600ms ease-in-out infinite var(--d); }
@keyframes propGlow { 0%, 100% { opacity: 0.12; transform: scale(0.9); } 50% { opacity: 0.55; transform: scale(1.05); } }
.fx-flicker .prop-glow { animation: propFlicker 1100ms linear infinite var(--d); }
@keyframes propFlicker { 0% { opacity: 0.45; } 12% { opacity: 0.7; } 20% { opacity: 0.35; } 33% { opacity: 0.65; } 50% { opacity: 0.4; transform: scale(1.04); }
  62% { opacity: 0.75; } 78% { opacity: 0.38; } 90% { opacity: 0.62; } 100% { opacity: 0.45; } }
.fx-blink .prop-glow { inset: 5%; animation: propBlink 1600ms steps(1) infinite var(--d); }
@keyframes propBlink { 0%, 55% { opacity: 0.1; } 60%, 75% { opacity: 0.85; } 80%, 100% { opacity: 0.1; } }

.fx-steam b, .fx-smoke b { left: 35%; top: 5%; width: 35%; height: 30%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 70%, transparent) 0%, transparent 70%);
  animation: propPuff 2400ms linear infinite; animation-delay: calc(var(--d) - var(--k) * 800ms); }
.fx-smoke b { top: 0; background: radial-gradient(circle, #9a948caa 0%, transparent 70%); animation-duration: 3200ms; animation-delay: calc(var(--d) - var(--k) * 1066ms); }
.fx-smoke .prop-glow, .fx-steam .prop-glow { inset: 20% 10% -10%; animation: propGlow 2600ms ease-in-out infinite var(--d); }
@keyframes propPuff { 0% { transform: translate(0, 0) scale(0.4); opacity: 0; } 20% { opacity: 0.75; } 100% { transform: translate(12%, -190%) scale(1.7); opacity: 0; } }

.fx-drip b { left: 32%; top: 62%; width: 9%; height: 13%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--c);
  box-shadow: 0 0 6px var(--c); animation: propDrip 2200ms ease-in infinite var(--d); }
.fx-drip .prop-glow { inset: 0; animation: propGlow 2600ms ease-in-out infinite var(--d); }
@keyframes propDrip { 0%, 30% { transform: translateY(0) scale(0.2); opacity: 0; } 45% { transform: translateY(0) scale(1); opacity: 1; }
  70% { transform: translateY(0) scale(1, 1.2); opacity: 1; } 100% { transform: translateY(260%) scale(0.8); opacity: 0; } }

.fx-sparkle b { width: 18%; aspect-ratio: 1; left: calc(15% + var(--k) * 26%); top: calc(25% + var(--k) * 14%);
  background: radial-gradient(circle, #fff 0%, var(--c) 30%, transparent 62%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  animation: propTwinkle 2400ms ease-in-out infinite; animation-delay: calc(var(--d) - var(--k) * 800ms); }
@keyframes propTwinkle { 0%, 70%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 80% { transform: scale(1.2) rotate(45deg); opacity: 1; } 90% { transform: scale(0.6) rotate(90deg); opacity: 0.6; } }

.fx-spores b { width: 8%; aspect-ratio: 1; border-radius: 50%; left: calc(30% + var(--k) * 12%); top: 20%; background: var(--c); box-shadow: 0 0 5px var(--c);
  animation: propSpore 3000ms ease-out infinite; animation-delay: calc(var(--d) - var(--k) * 750ms); }
@keyframes propSpore { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 0.9; } 100% { transform: translate(calc((var(--k) - 1.5) * 40%), -260%); opacity: 0; } }

.fx-ripple b { inset: 22%; border-radius: 50%; border: 2px solid var(--c); animation: propRipple 2600ms ease-out infinite; animation-delay: calc(var(--d) - var(--k) * 1300ms); }
@keyframes propRipple { 0% { transform: scale(0.3); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } }

.fx-fireflies b { width: 7%; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px 2px var(--c);
  left: calc(20% + var(--k) * 25%); top: calc(30% + var(--k) * 10%); animation: propFirefly 4200ms ease-in-out infinite; animation-delay: calc(var(--d) - var(--k) * 1400ms); }
@keyframes propFirefly { 0%, 100% { transform: translate(0, 0); opacity: 0.2; } 25% { transform: translate(60%, -80%); opacity: 1; }
  50% { transform: translate(-40%, -140%); opacity: 0.4; } 75% { transform: translate(-90%, -40%); opacity: 1; } }

/* The painted prop itself moves (a copy of its patch of the painting). */
.fx-sway .prop-crop { transform-origin: 50% 100%; animation: propSway 3400ms ease-in-out infinite var(--d); }
@keyframes propSway { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
.fx-bob .prop-crop { animation: propBob 2600ms ease-in-out infinite var(--d); }
@keyframes propBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
.fx-wobble .prop-crop { transform-origin: 50% 90%; animation: propWobble 3000ms ease-in-out infinite var(--d); }
@keyframes propWobble { 0%, 60%, 100% { transform: rotate(0); } 68% { transform: rotate(-7deg); } 76% { transform: rotate(6deg); } 84% { transform: rotate(-4deg); } 92% { transform: rotate(2deg); } }
.fx-spin .prop-crop { animation: propSpin 6000ms linear infinite var(--d); }
@keyframes propSpin { to { transform: rotate(360deg); } }
.fx-peck .prop-crop { transform-origin: 40% 100%; animation: propPeck 3600ms ease-in-out infinite var(--d); }
@keyframes propPeck { 0%, 66%, 100% { transform: none; } 72% { transform: rotate(9deg) translateY(3%); } 78% { transform: none; } 84% { transform: rotate(9deg) translateY(3%); } 90% { transform: none; } }
.fx-crawl .prop-crop { animation: propCrawl 7000ms ease-in-out infinite var(--d); }
@keyframes propCrawl { 0%, 100% { transform: translateX(-6%); } 50% { transform: translateX(6%) translateY(-2%); } }

/* Tapped: a hop and a flash. */
.board-prop.poked { animation: propPoke 600ms cubic-bezier(.3,1.6,.5,1); }
.board-prop.poked .prop-glow { animation: propFlash 600ms ease-out; }
@keyframes propPoke { 0% { transform: none; } 30% { transform: translateY(-14%) scale(1.15) rotate(-4deg); } 60% { transform: translateY(2%) scale(0.96) rotate(3deg); } 100% { transform: none; } }
@keyframes propFlash { 0% { opacity: 1; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.6); } }
body.reduced-motion .board-prop *, body.reduced-motion .board-prop { animation: none !important; }

/* Cut-out props: the image sits over its painted spot; the box hides nothing. */
.board-prop .prop-cut { inset: auto; max-width: none; pointer-events: none; }

/* ==== MENU THEME: "shattered crystal" (midnight navy, violet and ice-blue, silver) ====
   Replaces the gold/bronze/brown look on the title screen, Play Online and How to Play. */
:root {
  --mt-ink: #e6e8ff;        /* main text */
  --mt-soft: #a9b0d6;       /* secondary text */
  --mt-accent: #9a7cff;     /* violet */
  --mt-ice: #6fd8ff;        /* ice blue */
  --mt-line: #7a6cff55;     /* panel borders */
  --mt-panel: linear-gradient(180deg, #141a3acc, #0a0e24ea);
  --mt-card: linear-gradient(180deg, #1c2350e6, #0e1230f0);
  --mt-btn: linear-gradient(180deg, #d8ccff 0%, #9a7cff 45%, #4a34b8 100%);
  --mt-btn-ghost: linear-gradient(180deg, #2a3260, #161b3a);
}

/* Backdrop: cool shade, ice-blue rays, crystal motes instead of embers. */
.mbg-shade { background: radial-gradient(ellipse 70% 60% at 50% 38%, #0000 0%, #060a1e99 55%, #03050ff2 100%),
  linear-gradient(180deg, #03050f99 0%, #0000 25%, #0000 60%, #03050fdd 100%); }
.mbg-rays { background: repeating-conic-gradient(from 0deg, #8ad8ff2e 0deg 4deg, #0000 4deg 14deg); }
.mbg-ember { background: radial-gradient(circle, #ffffff, #b8a8ff 45%, #6fd8ff 75%, #0000); box-shadow: 0 0 10px #8ab8ff; }
body:not(.in-game):has(#menu-bg.show) { background: #05070f; }

/* Title. */
.title-screen .tavern-sign h1, .menu.tavern .tavern-sign h1 {
  background: linear-gradient(100deg, #5a4ab8 0%, #9a7cff 20%, #ffffff 35%, #8ad8ff 50%, #5a4ab8 70%, #9a7cff 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #0e1030) drop-shadow(0 0 24px #7a6cff77) drop-shadow(0 8px 16px #000); }
.ts-tag { color: #c8ccf0; }
.ts-runes { background: radial-gradient(circle, #8ad8ff22 0%, #0000 62%), repeating-conic-gradient(from 0deg, #b8a8ff55 0deg 1deg, #0000 1deg 15deg); }

/* Buttons. */
.ts-actions button, .lobby.title-screen .lobby-panel button {
  color: #120c34; border-color: #0a0820; background: var(--mt-btn); box-shadow: inset 0 2px 0 #f0ecff, 0 4px 0 #1e1650, 0 8px 18px #000c; }
.ts-actions button:active { box-shadow: inset 0 2px 0 #f0ecff, 0 1px 0 #1e1650, 0 3px 8px #000c; }
@keyframes tsPlayGlow {
  0%, 100% { box-shadow: inset 0 2px 0 #f0ecff, 0 4px 0 #1e1650, 0 8px 18px #000c, 0 0 18px 2px #9a7cff66; }
  50% { box-shadow: inset 0 2px 0 #f0ecff, 0 4px 0 #1e1650, 0 8px 18px #000c, 0 0 36px 8px #8ad8ffaa; }
}
.ts-row.small button, .ts-actions button.ghost, .lobby.title-screen .lobby-panel button.ghost, .menu.tavern .menu-buttons button.ghost {
  color: var(--mt-ink); background: var(--mt-btn-ghost); border-color: #4a4a8a; box-shadow: inset 0 1px 0 #ffffff22, 0 3px 0 #06081a, 0 6px 12px #000a; }
.ts-row.small button.new-player { border-color: var(--mt-ice); box-shadow: 0 0 0 2px #6fd8ff88, 0 0 18px #6fd8ff66; }
.ts-row.small button.new-player small { color: var(--mt-ice); }
.menu.tavern .menu-buttons button:not(.ghost) { background: var(--mt-btn); color: #120c34; border-color: #0a0820; }

/* Panels and text. */
.ts-panel { background: var(--mt-panel); border-color: var(--mt-line); }
.ts-panel-head h3, .lobby-panel h3, .howto-card h3, .ts-guide header { color: var(--mt-ink); }
.ts-panel-head .pick-count, .ts-good, .ts-syn-label { color: var(--mt-ice); }
.title-screen .sub, .ts-style, .ts-mech, .howto .sub { color: var(--mt-soft); }
.ts-summary, .ts-guide ul, .ts-synergy p, .howto-card, .medal-name { color: #d4d8f4; }
.ts-guide, .ts-synergy, .howto-card, .lobby .lobby-box, .lobby .acct-card, .lobby-deck, .ts-panel .deck-line, .menu.tavern .deck-line {
  background: var(--mt-card); border-color: #4a4a8a; }
.ts-synergy b, .howto-card b, .lobby-deck b { color: #ffffff; }
.howto-keywords dt { color: var(--mt-ice); }
.lobby .mode-card:hover { border-color: var(--mt-ice); box-shadow: 0 0 22px #6fd8ff44, 0 14px 28px #000c; }
.lobby .mode-card.ranked { border-color: var(--mt-accent); background: linear-gradient(180deg, #2a1e5ae6, #120c34f0); box-shadow: 0 0 0 1px #000, 0 0 26px #9a7cff55, 0 10px 24px #000a; }
.lobby .mode-card.ranked h3 { color: #d8ccff; }
.lobby-hero { border-color: var(--mt-accent); }
.lobby .text-input { background: #0a0e24cc; border-color: #6a5acd88; color: var(--mt-ink); }
.lobby .text-input:focus { outline-color: var(--mt-ice); }
.queue-time { color: var(--mt-ice); }
.lobby .queue-box .lobby-wait::before { border-color: #6fd8ff33; border-top-color: var(--mt-ice); }
.room-codes summary { color: var(--mt-soft); }

/* Faction medallions: silver frames, an ice-blue/violet ring when picked. */
.title-screen .medal-face { border-color: #4a4a8a; }
.title-screen .faction.medallion:hover .medal-face { border-color: var(--mt-ice); }
.faction.medallion.picked .medal-ring { background: conic-gradient(#8ad8ff, #ffffff, #9a7cff, #8ad8ff); }
.title-screen .faction.medallion.picked .medal-face, .faction.medallion.picked .medal-face { border-color: #d8e8ff; }
.medal-check { background: var(--mt-ice); color: #06102a; }
/* (format toggle colours: see "One button style") */

/* Extinction meteor. */
.fx-meteor { position: fixed; z-index: 930; pointer-events: none; }
.fx-meteor b { position: absolute; inset: 0; border-radius: 46% 54% 50% 50%;
  background: radial-gradient(circle at 35% 35%, #fff6c8 0%, #ffb04a 22%, #c8501a 50%, #4a1a08 78%);
  box-shadow: 0 0 30px 10px #ff8a2a, 0 0 70px 24px #ff5a1a88; }
.fx-meteor-tail { position: absolute; left: 50%; top: 50%; width: 520%; height: 70%; transform-origin: 0 50%;
  transform: translateY(-50%) rotate(calc(var(--ang) + 180deg)); border-radius: 50%;
  background: linear-gradient(90deg, #fff6c8 0%, #ffb04acc 12%, #ff5a1a88 40%, #ff5a1a00 100%); filter: blur(4px); }
.fx-crater { position: fixed; z-index: 845; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse, #1a0a04ee 0%, #3a1a0acc 40%, #ff6a1a55 62%, transparent 72%); }

/* Painted meteor and crater (art/fx). */
.fx-meteor { background: center / contain no-repeat; filter: drop-shadow(0 0 18px #ff7a1a); }
.fx-meteor > * { display: none; }
.fx-crater { background: url('../../art/fx/crater.png') center / contain no-repeat !important; border-radius: 0; }

/* Portrait: Mana as vertical columns on the right edge (yours fills from the bottom up,
   the enemy's from the top down), meeting at the middle of the battlefield. */
.arena.portrait .mana-bar { left: auto !important; right: 1.2cqw !important; align-items: center; gap: 3px; z-index: 24; }
.arena.portrait .mana-bar .crystals { flex-wrap: nowrap; max-width: none; gap: 1px; }
.arena.portrait .mana-bar.me { flex-direction: column-reverse; top: calc(var(--mid, 50cqh) + 1.5cqh) !important; bottom: auto !important; }
.arena.portrait .mana-bar.me .crystals { flex-direction: column-reverse; }
.arena.portrait .mana-bar.opp { flex-direction: column; top: auto !important; bottom: calc(100cqh - var(--mid, 50cqh) + 1.5cqh) !important; }
.arena.portrait .mana-bar.opp .crystals { flex-direction: column; }
.arena.portrait .mana-bar .crystal { height: clamp(12px, 2.1cqh, 20px) !important; }
.arena.portrait .mana-bar .mana-text { text-align: center; font-size: clamp(12px, 3.6cqw, 18px); }
.arena.portrait .mana-text small { display: block; }
/* Keep minion rows clear of the column. */
.arena.portrait .board { left: 2cqw; right: 7cqw; }
.arena.portrait { --minion-w: min(12cqw, 8.4cqh, 92px); }
/* Primal crystals: the older Primal rule reset the image size, so only the art's dark corner showed. */
.mana-bar .crystal.primal.full, .mana-bar .crystal.primal.spent { background-size: contain !important; background-position: center !important;
  background-repeat: no-repeat !important; background-color: transparent !important; }
.mana-bar .crystal.primal.full { filter: brightness(1.25) saturate(1.3) drop-shadow(0 0 4px #ffa02a) drop-shadow(0 0 2px #ffd27a) !important; }

/* ---- AI difficulty slider (main menu + Settings) ---- */
.difficulty-slider { width: min(420px, 100%); box-sizing: border-box; padding: 10px 14px 8px; border-radius: 14px;
  background: #1a100acc; border: 1px solid #6a4a2a; color: #e8d6b0; text-align: left; --diff: #6fcf6a; }
.difficulty-slider.lvl-1 { --diff: #e7b552; }
.difficulty-slider.lvl-2 { --diff: #f08a3c; }
.difficulty-slider.lvl-3 { --diff: #e5484d; }
.difficulty-slider.lvl-4 { --diff: #b05cff; }
.diff-top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-title); font-size: 15px; }
.diff-name { color: var(--diff); font-size: 18px; letter-spacing: 0.04em; }
.difficulty-slider input[type=range] { width: 100%; margin: 8px 0 2px; accent-color: var(--diff); cursor: pointer; }
.diff-ticks { display: flex; justify-content: space-between; font-size: 11px; color: #a8957a; }
.diff-ticks span { flex: 1; text-align: center; }
.diff-ticks span:first-child { text-align: left; }
.diff-ticks span:last-child { text-align: right; }
.diff-ticks span.on { color: var(--diff); font-weight: 700; }
.diff-about { display: block; margin-top: 4px; font-size: 12px; color: #cbb8a0; min-height: 1.3em; }
.set-row.set-difficulty { display: block; }
.set-row.set-difficulty .difficulty-slider { width: 100%; background: none; border: 0; padding: 0; }
@media (max-width: 420px) { .diff-ticks { font-size: 9.5px; } }
.difficulty-slider.lvl-4 .diff-about { color: #e6c8ff; background: #b05cff22; border: 1px solid #b05cff66; border-radius: 8px; padding: 5px 8px; }

/* ---- Card swaps (factions with expansion cards) ---- */
.swap-btn small { display: block; font-size: 11px; opacity: 0.8; }
.swap-builder .card.cut .cut-tag { background: #3a2a20; }

/* ---- Card unlocks ---- */
.card.locked { filter: grayscale(0.85) brightness(0.55); }
.card.locked .cut-tag { background: #1d1410; color: #f2d58a; }
.unlock-overlay { z-index: 1280; display: grid; place-items: center; background: #000b; }
.unlock-panel { position: relative; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box;
  padding: 22px 18px; border-radius: 18px; text-align: center; color: #f3e6c8;
  background: radial-gradient(circle at 50% 0%, #4a2f12, #1b120c 70%); border: 2px solid #e7b552; box-shadow: 0 0 60px #e7b55266;
  animation: unlock-pop 0.45s cubic-bezier(.2,1.4,.4,1); }
.unlock-panel h2 { margin: 0 0 4px; font-family: var(--font-title); color: #ffd27a; font-size: clamp(24px, 6vw, 34px); text-shadow: 0 0 18px #e7b552aa; }
.unlock-row { display: flex; gap: 14px; justify-content: center; margin: 14px 0 8px; }
.unlock-card { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: unlock-card 0.6s 0.15s both; }
.unlock-card:nth-child(2) { animation-delay: 0.35s; }
.unlock-card .card { width: min(40vw, 190px); }
.unlock-faction { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #cbb8a0; }
.unlock-burst { position: absolute; inset: -40% -20% auto; height: 80%; pointer-events: none;
  background: radial-gradient(circle, #ffd27a44, transparent 60%); }
@keyframes unlock-pop { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes unlock-card { from { transform: translateY(30px) rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.reduced-motion .unlock-panel, .reduced-motion .unlock-card { animation: none; }

/* ---- UI art: logo, islands backdrop, divider, icons ---- */
.ts-logo { margin: 0; line-height: 0; }
.ts-logo img { width: min(760px, 92vw); height: auto; filter: drop-shadow(0 6px 18px #000c) drop-shadow(0 0 28px #8a4dff55);
  animation: tsLogoFloat 6s ease-in-out infinite; }
@keyframes tsLogoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ui-divider { display: block; width: min(460px, 80vw); height: auto; margin: 2px auto; pointer-events: none; filter: drop-shadow(0 2px 6px #000a); }
.mbg-islands { position: absolute; inset: -6%; background-size: cover; background-position: center;
  animation: mbgDrift 48s ease-in-out infinite alternate; }
@keyframes mbgDrift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-1.5%, 1%); } }
.loader { background: linear-gradient(#0c0816cc, #0c0816ee), url('../../art/ui/loading-art.jpg') center/cover no-repeat, #0c0816; }
.loader-logo { display: block; width: min(460px, 82vw); height: auto; margin: 0 auto 14px; filter: drop-shadow(0 4px 14px #000); }
.btn-icon { width: 1.5em; height: 1.5em; vertical-align: middle; margin: -0.3em 0.15em -0.2em 0; }
.h-icon { width: 1.6em; height: 1.6em; vertical-align: middle; margin: -0.35em 0.15em -0.25em 0; }
.unlock-icon { display: block; width: 72px; height: 72px; margin: 0 auto 4px; filter: drop-shadow(0 0 14px #b07cff); }
.unlock-panel .ui-divider { width: min(320px, 70%); margin: 2px auto 0; }
body.reduced-motion .ts-logo img, body.reduced-motion .mbg-islands { animation: none; }

/* ---- Painted PLAY button (art/ui/play-button.png) ----
   The rune triangle pulses, a shimmer sweeps the metal frame, sparks rise from the rune,
   and the whole button floats gently. */
.title-screen .ts-play.play-art, .ts-play.play-art { position: relative; display: block; width: min(250px, 62vw); aspect-ratio: 720 / 408; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible; cursor: pointer;
  filter: drop-shadow(0 10px 18px #000d); animation: playFloat 3.6s ease-in-out infinite; transition: transform 0.15s, filter 0.15s; }
.ts-play.play-art:hover { filter: drop-shadow(0 12px 22px #000e) brightness(1.1); transform: translateY(-3px) scale(1.03); }
.ts-play.play-art:active { transform: translateY(2px) scale(0.97); filter: drop-shadow(0 4px 8px #000e) brightness(1.2); transition-duration: 0.06s; }
.play-art .pa-img { display: block; width: 100%; height: 100%; pointer-events: none; }
.play-art .pa-glow { position: absolute; left: 51.7%; top: 43.3%; width: 36%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff3c0cc 0%, #ffb24a88 22%, #ff7a2a44 40%, #4ab0ff2a 58%, transparent 70%); mix-blend-mode: screen; animation: playGlow 2.4s ease-in-out infinite; }
.play-art .pa-shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, #ffe8b066 47%, #ffffffaa 50%, #ffe8b066 53%, transparent 62%) no-repeat; background-size: 260% 100%;
  -webkit-mask: url('../../art/ui/play-button.png') center / 100% 100% no-repeat; mask: url('../../art/ui/play-button.png') center / 100% 100% no-repeat;
  animation: playShine 4.8s ease-in-out infinite; }
.play-art .pa-sparks { position: absolute; left: 51.7%; top: 43.3%; width: 0; height: 0; pointer-events: none; }
.play-art .pa-sparks b { position: absolute; left: 0; top: 0; width: 5px; height: 5px; border-radius: 50%; background: #fff2c0; box-shadow: 0 0 6px 2px #ffa63a;
  opacity: 0; animation: playSpark 2.6s ease-out infinite; }
.play-art .pa-sparks b:nth-child(even) { background: #d8f0ff; box-shadow: 0 0 6px 2px #4ab0ff; }
.play-art .pa-sparks b:nth-child(1) { --x: -38px; animation-delay: 0s; } .play-art .pa-sparks b:nth-child(2) { --x: 30px; animation-delay: 0.35s; }
.play-art .pa-sparks b:nth-child(3) { --x: -14px; animation-delay: 0.7s; } .play-art .pa-sparks b:nth-child(4) { --x: 44px; animation-delay: 1.05s; }
.play-art .pa-sparks b:nth-child(5) { --x: -48px; animation-delay: 1.4s; } .play-art .pa-sparks b:nth-child(6) { --x: 12px; animation-delay: 1.75s; }
.play-art .pa-sparks b:nth-child(7) { --x: -26px; animation-delay: 2.1s; } .play-art .pa-sparks b:nth-child(8) { --x: 36px; animation-delay: 2.45s; }
.play-art small { position: absolute; left: 0; right: 0; top: 100%; margin-top: 2px; text-align: center; font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase;
  color: #e8d6a8; text-shadow: 0 1px 3px #000; opacity: 0.85; }
@keyframes playFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes playGlow { 0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.9); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes playShine { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@keyframes playSpark { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), -70px) scale(0.2); } }
body.reduced-motion .ts-play.play-art, body.reduced-motion .play-art .pa-glow, body.reduced-motion .play-art .pa-shine, body.reduced-motion .play-art .pa-sparks b { animation: none !important; }

/* ---- Hearthstone-style stats: big bold numbers, red when damaged, green when buffed ---- */
.atk.up, .hp.up, .bc-atk.up, .bc-hp.up { color: #52ff3a !important; }
.atk.down, .hp.down, .bc-atk.down, .bc-hp.down { color: #ff3426 !important; }
.arena .minion .atk, .arena .minion .hp { width: calc(var(--minion-w) * 0.36); height: calc(var(--minion-w) * 0.36); font-size: calc(var(--minion-w) * 0.35); }
.arena.portrait .minion .atk, .arena.portrait .minion .hp { width: calc(var(--minion-w) * 0.36); height: calc(var(--minion-w) * 0.36); font-size: calc(var(--minion-w) * 0.34); }
.arena .hero-portrait .hp, .arena .hero-portrait .atk { font-size: calc(var(--hero) * 0.28) !important; }

/* ---- Gem sockets: each stat gem sits in a bronze socket built into the frame (like Hearthstone),
   instead of floating on the card like a sticker. Centres match the gems (measured in card em). ---- */
.big-card .bc-sock { position: absolute; z-index: 2; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, #0c0704 0 60%, #2a1a0c 63%, transparent 64%),
    conic-gradient(from 200deg, #fff0bf, #b58a3e 18%, #5a3e16 34%, #e2bf6e 52%, #7a5622 70%, #f3d98f 86%, #fff0bf);
  box-shadow: 0 0 0 0.14em #1a1208, 0 0 0 0.3em color-mix(in srgb, var(--frame) 80%, #000), 0 0.35em 0.7em #000c,
    inset 0 0.12em 0.18em #fff8, inset 0 -0.18em 0.25em #0008; }
.big-card .sock-cost { width: 6.6em; height: 6.6em; left: -1.84em; top: -1.84em; }
.big-card .sock-atk, .big-card .sock-hp { width: 5.8em; height: 5.8em; top: 34.52em; }
.big-card .sock-atk { left: -1.13em; }
.big-card .sock-hp { left: 23.32em; }
.big-card .bc-gem { z-index: 3; }

/* ==== Painted card frames (art/frames/{minion,spell,trap}.png, 728x1024) ====
   The frame sits over the art and the text panel; its windows are transparent.
   Everything is placed in % of the card so it lines up with the painting at any size. */
.big-card.framed { border: 0 !important; border-radius: 0.6em; background: none !important; box-shadow: none !important;
  filter: drop-shadow(0 1.2em 2.4em #000c); }
.big-card.framed::after { display: none !important; }
.big-card.framed .bc-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; user-select: none; }
.big-card.framed .bc-sock { display: none; }
.big-card.framed .bc-art { left: 23.6% !important; top: 6.4% !important; width: 54.8% !important; height: 52% !important; transform: none !important;
  border: 0 !important; border-radius: 50% !important; box-shadow: none !important; background: #120c08; z-index: 1; }
.big-card.framed.t-spell .bc-art, .big-card.framed.t-trap .bc-art { left: 27.4% !important; top: 8.3% !important; width: 47.6% !important; height: 44.1% !important;
  border-radius: 50% 50% 0 0 / 38% 38% 0 0 !important; }
.big-card.framed .bc-text { left: 17.4% !important; top: 64.8% !important; width: 66.8% !important; height: 25.4% !important; transform: none !important;
  border: 0 !important; border-radius: 0.4em !important; box-shadow: inset 0 0 1.4em #6a4a2066 !important; z-index: 1; padding: 0.8em 1.6em !important;
  background: radial-gradient(120% 90% at 50% 40%, #f6ecd6, #dcc69c) !important; box-sizing: border-box; }
.big-card.framed .bc-ribbon { left: 11.5% !important; top: 49.6% !important; width: 80% !important; height: 13.2% !important; transform: none !important;
  z-index: 3; filter: none !important; }
.big-card.framed .rb-back, .big-card.framed .rb-band, .big-card.framed .rb-shine { display: none; }
.big-card.framed .rb-text { fill: #2a1a08; paint-order: stroke fill; stroke: #f3e2b866; stroke-width: 1.2px; }
.big-card.framed.t-trap .rb-text { fill: #1e0f2e; stroke: #f3e6ffcc; stroke-width: 2px; }
.big-card.framed .bc-type { z-index: 3; bottom: 2.6% !important; font-size: 0.78em !important; padding: 0.15em 0.8em !important; max-width: 52%; overflow: hidden; text-overflow: ellipsis; }
.big-card.framed .bc-gem { z-index: 4; }
/* Mana: a flat-topped crystal set into the hexagonal socket. */
.big-card.framed .bc-cost { left: 8.4% !important; top: 9.2% !important; width: 13.9% !important; height: 9.1% !important; font-size: 2.9em !important;
  line-height: 1 !important; padding: 0 !important; display: grid !important; place-items: center !important;
  clip-path: polygon(25% 3%, 75% 3%, 99% 50%, 75% 97%, 25% 97%, 1% 50%) !important; }
/* Attack: a gold coin inside the sword ring; Health: the number on the painted blood drop. */
.big-card.framed .bc-atk, .big-card.framed .bc-hp { font-size: 2.9em !important; line-height: 1 !important; padding: 0 !important;
  display: grid !important; place-items: center !important; }
.big-card.framed .bc-atk { left: 10.3% !important; top: 85.9% !important; width: 11.8% !important; height: 8.8% !important; bottom: auto !important; border-radius: 50% !important;
  background: radial-gradient(circle at 38% 30%, #fff0b0 0%, #f3c14e 40%, #b8791a 80%, #6a420a 100%) !important; box-shadow: inset 0 -0.08em 0.12em #0007, inset 0 0.06em 0.1em #fff8 !important; }
.big-card.framed .bc-hp { left: 80.5% !important; top: 85.2% !important; width: 12.6% !important; height: 11.6% !important; bottom: auto !important; right: auto !important; background: none !important; }
.big-card.framed .bc-atk::before, .big-card.framed .bc-atk::after, .big-card.framed .bc-hp::before, .big-card.framed .bc-hp::after { display: none !important; }
/* Playable / quick-play glow follows the frame's shape. */
.card.playable > .big-card.framed, .card.respond > .big-card.framed { box-shadow: none !important; filter: drop-shadow(0 0 0.25em #57e07a) drop-shadow(0 0 0.5em #57e07a); }
.card.quick.playable > .big-card.framed { filter: drop-shadow(0 0 0.25em #ffd25a) drop-shadow(0 0 0.5em #ffd25a); }
.card.cut > .big-card.framed { filter: grayscale(0.85) brightness(0.6); }

/* ==== Hearthstone-like lettering ====
   Card names and stat numbers: Fraunces (soft, heavy), the free font closest to Belwe Bold.
   Rules text: Libre Franklin (Medium, with Demi for bold keywords), a revival of Franklin Gothic. */
@font-face { font-family: 'Card Title'; src: url('../../art/fonts/card-title.ttf') format('truetype'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'Card Text'; src: url('../../art/fonts/card-text.ttf') format('truetype'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Card Text'; src: url('../../art/fonts/card-text-bold.ttf') format('truetype'); font-weight: 600 900; font-display: swap; }
.cost, .atk, .hp, .bc-gem, .zoom-cost, .mana-num, .m-cost {
  font-family: 'Card Title', 'Stat Numbers', serif !important; font-weight: 800 !important; font-variation-settings: 'SOFT' 100, 'WONK' 0; }
.big-card .rb-text { font-family: 'Card Title', serif; font-weight: 800; font-variation-settings: 'SOFT' 100, 'WONK' 0;
  fill: #fff !important; stroke: #000 !important; stroke-width: 3.2px !important; paint-order: stroke fill; stroke-linejoin: round; letter-spacing: 0.2px; }
.big-card.framed .bc-text, .big-card.framed .bc-text span { font-family: 'Card Text', 'Alegreya Sans', sans-serif !important; font-weight: 500; color: #000 !important; letter-spacing: 0; }
.big-card.framed .bc-text b, .big-card.framed .bc-text strong { font-weight: 700; color: #000; }
/* Bigger gems and numbers, overlapping the frame like Hearthstone's. */
.big-card.framed .bc-cost { left: 6.4% !important; top: 7.9% !important; width: 18% !important; height: 11.7% !important; font-size: 3.7em !important; }
.big-card.framed .bc-atk { left: 8.9% !important; top: 85.2% !important; width: 14.6% !important; height: 10.4% !important; font-size: 3.6em !important; }
.big-card.framed .bc-hp { left: 79.4% !important; top: 85.3% !important; width: 14.8% !important; height: 11.4% !important; font-size: 3.6em !important; }
.big-card.framed .bc-gem { -webkit-text-stroke: 0.12em #000 !important; paint-order: stroke fill; }

/* Keep rules text inside the clear part of the frame's text window (the scrollwork at the
   top and bottom and the curled corners cover the panel's edges). Measured from the frames:
   clear from 700 to ~880 px down, 150 to 590 px across (of 728x1024). */
.big-card.framed .bc-text { padding: 5.9% 5.6% 6.4% 4.6% !important; }
.big-card.framed .bc-text span { line-height: 1.12; }
/* Card text at a Hearthstone-like size for the framed text window: most cards fit at full size. */
.big-card.framed .bc-text span { font-size: 1.4em; }
/* Minions: the Attack ring's swords reach into the lower-left of the text window. */
.big-card.framed.t-minion .bc-text { padding: 5.9% 6.4% 8.6% 8.2% !important; }

/* ==== Board minions, Hearthstone style ====
   A tall oval portrait in the silver bezel cut from the minion card frame
   (art/frames/board-oval.png, built from art/frames/minion.png), Attack and Health
   gems set over the bottom corners, and no Mana cost (that's only shown on cards). */
.arena .minion .m-ring { position: absolute; z-index: 3; top: 0; bottom: 0; left: 3.8%; right: 3.8%; pointer-events: none;
  background: url('../../art/frames/board-oval.png') center / 100% 100% no-repeat; filter: drop-shadow(0 0.25em 0.4em #000c); }
.arena .minion .m-art, .arena .minion .m-fx { inset: 4.6% 8.6% !important; border: 0 !important; }
.arena .minion .m-art::after { background: radial-gradient(ellipse at 50% 42%, transparent 62%, #0008 100%); }
.arena .minion .m-cost { display: none !important; }
.arena .minion .atk { left: -1% !important; bottom: -2% !important; }
.arena .minion .hp { right: -1% !important; bottom: -2% !important; }

/* The arena and the board painting must never scroll: the hand hangs off the bottom edge, and a
   drag or a focused card could scroll the arena (overflow: hidden still allows that), lifting every
   piece off its painted frame. overflow: clip can't be scrolled at all. */
.arena, #board-layer { overflow: clip !important; }

/* ==== Hero Spells around the hero, Hearthstone style ====
   The two Hero Spells sit just right of the portrait, the Fusion just left of it, both
   level with the lower half of the frame; Traps move out past the Fusion. */
.hero-fusion { display: flex; align-items: center; }
.arena.has-board .hero-fusion { position: absolute; transform: translateY(-50%); }
.arena.has-board .hero-zone.opp .hero-fusion { right: 57.5cqw; top: 13.6cqh; }
.arena.has-board .hero-zone.me .hero-fusion { right: 57.5cqw; top: 84cqh; }
.arena.has-board.v-board .hero-zone.opp .hero-fusion { right: calc(100% - var(--oh-x) + 0.7cqw); top: calc(var(--oh-y) + var(--oh-h) * 0.6); }
.arena.has-board.v-board .hero-zone.me .hero-fusion { right: calc(100% - var(--mh-x) + 0.7cqw); top: calc(var(--mh-y) + var(--mh-h) * 0.4); }
.arena.has-board.v-board .hero-zone.opp .hero-powers { left: calc(var(--oh-x) + var(--oh-w) + 0.7cqw); top: calc(var(--oh-y) + var(--oh-h) * 0.6); }
.arena.has-board.v-board .hero-zone.me .hero-powers { left: calc(var(--mh-x) + var(--mh-w) + 0.7cqw); top: calc(var(--mh-y) + var(--mh-h) * 0.4); }
.arena.has-board .hero-zone:has(.hero-fusion) .traps { margin-right: calc(var(--hero) * 0.62 + 1.4cqw); }
.arena.p-board .hero-fusion { position: absolute; transform: translateY(-50%); }
.arena.p-board .hero-zone.opp .hero-fusion { right: calc(100% - var(--oh-x) + 8px); top: calc(var(--oh-y) + var(--oh-h) / 2); }
.arena.p-board .hero-zone.me .hero-fusion { right: calc(100% - var(--mh-x) + 8px); top: calc(var(--mh-y) + var(--mh-h) / 2); }
.arena.p-board .hero-zone:has(.hero-fusion) .traps { margin-right: calc(var(--hero) * 0.5 + 14px); }

/* ==== Deck piles that visibly run down ====
   One card back per 3 cards in the deck (board.js pileLayers), each a hair higher than the last,
   so the pile gets thinner with every few draws until a single card is left. */
.deck-pile .pile span { transform: translate(calc(var(--i, 0) * -0.6px), calc(var(--i, 0) * -1px)); }
.arena.has-board .deck-pile[style*="--back"] .pile span { transform: translate(calc(var(--i, 0) * -0.1cqw), calc(var(--i, 0) * -0.24cqw)); }
.deck-pile .pile.empty { outline: 2px dashed #ffffff33; outline-offset: -2px; border-radius: 6%/4.3%; }

/* A drawn card: swiped off the top of the deck, shown big, then put in the hand. */
.fx-draw-show { position: fixed; z-index: 1001; transform-style: preserve-3d; transform-origin: 50% 50%; cursor: pointer; }
.fx-draw-show .df-front { position: absolute; inset: 0; backface-visibility: hidden; font-size: var(--ds-font, 16px); }
.fx-draw-show .df-front > .big-card { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-draw-show .df-back { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; border-radius: 6%/4.3%;
  background: var(--back, #3a2a30) center / cover no-repeat; border: 1px solid #000c; box-shadow: 0 1em 2em #000c; }

/* Attack number level with the Health number beside it. */
.arena .minion .atk { display: grid; place-items: center; line-height: 1; padding: 0 0 0.12em !important; }
/* Both decks in one column, and your Mana crystals left of the bottom-right corner prop. */
.arena.has-board .deck-pile.opp[style*="--back"], .arena.has-board .deck-pile.me[style*="--back"] { left: 94.6cqw; }
.arena.has-board .mana-bar.me { right: 15.5cqw; }
.arena.has-board .deck-pile.me[style*="--back"] { top: 66.5cqh; }

/* Rules text in Libre Franklin Medium, keywords in Libre Franklin ExtraBold, so keywords stand right out. */
@font-face { font-family: 'Card Rules'; src: url('../../art/fonts/card-text.ttf') format('truetype'); font-weight: 100 500; font-display: swap; }
@font-face { font-family: 'Card Rules'; src: url('../../art/fonts/card-text-xbold.ttf') format('truetype'); font-weight: 600 900; font-display: swap; }
.big-card.framed .bc-text, .big-card.framed .bc-text span { font-family: 'Card Rules', 'Card Text', sans-serif !important; font-weight: 400; }
.big-card.framed .bc-text b, .big-card.framed .bc-text strong { font-family: 'Card Rules', 'Card Text', sans-serif !important; font-weight: 800; }

/* Radiation keeps the Health drop red (and a damaged number red); it only adds a green glow around it. */
.minion.rad-hit .hp, .hero-portrait.rad-hit .hp { filter: drop-shadow(0 0 0.12em #7dff4a) drop-shadow(0 0 0.25em #7dff4a99) !important; }
.big-card.framed .bc-hp { left: 80.9% !important; }
.big-card.framed .bc-hp.two-digit { left: 78.8% !important; }

/* Phones (portrait): Hero Spells stacked beside the hero with room between them for the cost
   badge, and never smaller than a comfortable tap target. */
.arena.portrait .hero-spell { width: max(30px, calc(var(--hero) * 0.5)); height: max(30px, calc(var(--hero) * 0.5)); }
.arena.portrait .hero-zone .hero-powers { gap: max(12px, calc(var(--hero) * 0.2)) max(10px, calc(var(--hero) * 0.14)); }
.arena.portrait .hero-zone .hero-powers > .extinction-badge, .arena.portrait .hero-zone .hero-powers > .freeze-badge, .arena.portrait .hero-zone .hero-powers > .hive-badge,
.arena.portrait .hero-zone .hero-powers > .corpse-badge { min-width: 26px; min-height: 26px; }
/* Keep the enemy's stacked Hero Spells on screen when their hero sits right at the top. */
.arena.p-board .hero-zone.opp .hero-powers { top: max(calc(var(--oh-y) + var(--oh-h) / 2),
  calc(max(30px, var(--hero) * 0.5) + max(12px, var(--hero) * 0.2) / 2 + 10px)); }
/* ...and keep yours clear of the hand below. */
.arena.p-board .hero-zone.me .hero-powers { top: calc(var(--mh-y) + var(--mh-h) / 2 - max(6px, var(--hero) * 0.22)); }

/* Phones too: your hero's Health (and Attack/Armor) sit on the top of the frame's rim, as in landscape. */
.arena.portrait .hero-zone.me .hero-portrait .hp { top: -8% !important; bottom: auto !important; right: -12% !important; left: auto !important; }
.arena.portrait .hero-zone.me .hero-portrait .atk { top: -8% !important; bottom: auto !important; left: -12% !important; right: auto !important; }
.arena.portrait .hero-zone.me .hero-portrait .armor { top: 30% !important; bottom: auto !important; right: -14% !important; }

/* ==== Split hero portrait (two-faction decks) ==== */
.hero-portrait .portrait-img.split-a { clip-path: polygon(0 0, 57% 0, 43% 100%, 0 100%); }
.hero-portrait .portrait-img.split-b { position: absolute; inset: 0; z-index: auto; clip-path: polygon(57% 0, 100% 0, 100% 100%, 43% 100%); }
.hero-portrait .portrait-seam { position: absolute; inset: 0; z-index: auto; pointer-events: none;
  background: linear-gradient(180deg, #fff3c8, #ffd76a 50%, #fff3c8); clip-path: polygon(56.2% 0, 57.8% 0, 43.8% 100%, 42.2% 100%);
  filter: drop-shadow(0 0 4px #ffd76a); }
.hero-portrait.burning .portrait-img.split-b { position: absolute; z-index: 1; }

/* ---- Ghosts ---- */
.big-card.f-ghosts { --frame: #2a4a5a; --frame-hi: #8ff0ff; --body: #0a161c; }
.arena.f-ghosts { --felt: #26323a; --felt-2: #0c1216; --rim: #6ab0c0; }
.big-card.t-spell.f-ghosts { --frame: #3a3a6a; --frame-hi: #b8c8ff; --body: #0e0e22; }
.big-card.t-trap.f-ghosts  { --frame: #2a2e34; --frame-hi: #90a8b0; --body: #0a0c0e; }
.fx-p.wisp { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, #ffffff, #8ff0ff 45%, transparent 75%); box-shadow: 0 0 10px #8ff0ff; opacity: 0.85; }
.medallion.f-ghosts { --fc: #8ff0ff; } .ts-guide.f-ghosts { --fc: #8ff0ff; }

/* ---- Ultraterrestrials ---- */
.big-card.f-ultraterrestrials { --frame: #3a2a6a; --frame-hi: #b48cff; --body: #100a22; }
.arena.f-ultraterrestrials { --felt: #2e2648; --felt-2: #0e0a1c; --rim: #b48cff; }
.big-card.t-spell.f-ultraterrestrials { --frame: #4a3a7a; --frame-hi: #ffd76a; --body: #140e2a; }
.big-card.t-trap.f-ultraterrestrials  { --frame: #2a2440; --frame-hi: #8a7ab8; --body: #0c0a16; }
.fx-p.shard { width: 8px; height: 8px; background: linear-gradient(135deg, #fff, #b48cff 50%, #ffd76a); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 8px #b48cff; }
.medallion.f-ultraterrestrials { --fc: #b48cff; } .ts-guide.f-ultraterrestrials { --fc: #b48cff; }

/* Ultraterrestrials: the Beyond Reality marker (Displaced minions coming back to this player). */
.beyond-badge { position: relative; width: calc(var(--hero) * 0.5); height: calc(var(--hero) * 0.5); min-width: 28px; min-height: 28px; border-radius: 50%;
  overflow: visible; display: grid; place-items: center; cursor: help;
  box-shadow: 0 0 0 2px #1a1030, 0 0 0 4px #b48cff, 0 0 14px #b48cffaa; animation: beyondPulse 2.4s ease-in-out infinite; }
.beyond-badge img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; opacity: 0.55; filter: saturate(0.6) hue-rotate(20deg) blur(0.5px); }
.beyond-badge b { position: absolute; right: -6%; bottom: -6%; min-width: 1.4em; height: 1.4em; border-radius: 999px; display: grid; place-items: center;
  background: #3a2a6a; border: 2px solid #b48cff; color: #fff; font-size: clamp(10px, calc(var(--hero) * 0.14), 16px); font-family: 'Card Title', serif; font-weight: 800; }
@keyframes beyondPulse { 0%, 100% { box-shadow: 0 0 0 2px #1a1030, 0 0 0 4px #b48cff, 0 0 10px #b48cff88; } 50% { box-shadow: 0 0 0 2px #1a1030, 0 0 0 4px #d8c0ff, 0 0 20px #b48cffdd; } }
body.reduced-motion .beyond-badge { animation: none; }

/* Long faction names on the menu medallions stay inside their own column (no overlapping). */
.faction.medallion .medal-name { max-width: 100%; text-align: center; line-height: 1.1; hyphens: manual; overflow-wrap: break-word; }
.faction.medallion .medal-name.long { font-size: 12px; letter-spacing: 0; }

/* Two-faction deck builder: a faction under its minimum, and the hint line. */
.pick-count.short { color: #ff9a8a; }
.builder-hint { margin: 6px 0 0; color: #ffcf8a; font-weight: 600; }

/* ---- Sharks ---- */
.big-card.f-sharks { --frame: #1a3a5a; --frame-hi: #ff4a4a; --body: #06121e; }
.arena.f-sharks { --felt: #123048; --felt-2: #061220; --rim: #4ab8ff; }
.big-card.t-spell.f-sharks { --frame: #5a1a1a; --frame-hi: #ff6a5a; --body: #1e0606; }
.big-card.t-trap.f-sharks  { --frame: #2a3440; --frame-hi: #8ab0c8; --body: #0a0e12; }
.fx-p.bubble { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #8ad8ff 40%, transparent 70%); border: 1px solid #cfefff88; }
.medallion.f-sharks { --fc: #ff4a4a; } .ts-guide.f-sharks { --fc: #ff4a4a; }
/* Marked Prey: a pulsing blood mark on the minion. */
.minion .prey-mark { display: inline-grid; place-items: center; font-size: 1.7em; filter: drop-shadow(0 0 4px #ff2a2a) drop-shadow(0 0 2px #000); animation: preyPulse 1.4s ease-in-out infinite; }
.arena .minion.prey .m-ring { filter: drop-shadow(0 0 0.15em #ff1a1a) drop-shadow(0 0 0.5em #ff2a2acc) !important; }
.arena .minion.prey .m-art::after { background: radial-gradient(ellipse at 50% 45%, transparent 55%, #b0000088 100%) !important; }
@keyframes preyPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
body.reduced-motion .minion .prey-mark { animation: none; }

/* ==== SHARD CARDS (the default card frame) ================================
   A chamfered slab of dark stone, bronze trim, shatter-cracks in the faction's colour.
   Frames: art/frames/shard-<type>.svg (holes for the art and the rules panel) and
   shard-<type>-accent.svg (a mask filled with --accent). Everything is placed in % of
   the 728x1024 frame so it lines up at any card size (the card is 40em tall). */
.big-card.shard { --accent: #d8c8a8; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  filter: drop-shadow(0 1.2em 2.4em #000c); }
.big-card.shard::after, .big-card.shard::before { display: none !important; }
.big-card.shard > * { position: absolute; }
.big-card.shard .bc-frame { inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; user-select: none; }
.big-card.shard .sh-accent { inset: 0; z-index: 3; pointer-events: none; background: var(--accent);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  filter: drop-shadow(0 0 0.18em var(--accent)) drop-shadow(0 0 0.5em var(--accent)); opacity: 0.95; }

/* Art windows: a wide pane with a shattered lower edge (minions), a round lens (spells),
   a fanged hexagon (traps). The frame covers everything outside the window. */
.big-card.shard .bc-art { left: 5.49% !important; top: 3.91% !important; width: 89.01% !important; height: 50.39% !important; transform: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #0c0a0f; z-index: 1; }
.big-card.shard.t-spell .bc-art { left: 15.93% !important; top: 4.88% !important; width: 68.13% !important; height: 48.44% !important; border-radius: 50% !important; }
.big-card.shard.t-trap .bc-art { left: 8.24% !important; top: 4.3% !important; width: 83.52% !important; height: 50.59% !important; }

/* Rules panel: pale stone, chamfered. */
.big-card.shard .bc-text { left: 7.97% !important; top: 64.84% !important; width: 84.07% !important; height: 26.56% !important; transform: none !important;
  z-index: 1; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 0 1.6em #5a4a3066 !important; box-sizing: border-box;
  background: radial-gradient(130% 100% at 50% 30%, #f4efe4, #d9d0bd) !important; padding: 4.6% 6% 4.6% !important;
  display: grid; place-items: center; text-align: center; overflow: hidden; }
.big-card.shard .bc-text, .big-card.shard .bc-text span { font-family: 'Card Rules', 'Card Text', sans-serif !important; font-weight: 400; color: #14110d !important; letter-spacing: 0; }
.big-card.shard .bc-text b, .big-card.shard .bc-text strong { font-family: 'Card Rules', 'Card Text', sans-serif !important; font-weight: 800; color: #000; }
.big-card.shard .bc-text span { font-size: 1.4em; line-height: 1.14; }

/* Name plate: straight, dark, white lettering; minions hold it between their two stat shards. */
.big-card.shard .bc-banner { left: 25.6% !important; top: 55.66% !important; width: 48.8% !important; height: 6.64% !important; transform: none !important;
  z-index: 4; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; clip-path: none !important;
  display: grid; place-items: center; text-align: center; }
.big-card.shard:not(.t-minion) .bc-banner { left: 9.5% !important; width: 81% !important; }
.big-card.shard .bc-banner span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; font-size: 1.62em; line-height: 1;
  font-family: 'Card Title', serif; font-weight: 800; font-variation-settings: 'SOFT' 100, 'WONK' 0; color: #fff; letter-spacing: 0.01em;
  -webkit-text-stroke: 0.14em #000; paint-order: stroke fill; text-shadow: 0 0.08em 0.2em #000; }

/* Type tab at the bottom. */
.big-card.shard .bc-type { left: 31.04% !important; top: 92.19% !important; width: 37.91% !important; height: 5.86% !important; bottom: auto !important;
  transform: none !important; z-index: 4; padding: 0 0.4em !important; box-sizing: border-box; background: none !important; border: 0 !important;
  display: grid; place-items: center; color: #f3e6c4 !important; font-size: 0.98em !important; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0.08em 0.15em #000; }
.card .big-card.shard .bc-type { font-size: 1.15em !important; }
.big-card.shard .bc-type span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; }
.big-card.legend { margin-top: 0; }

/* Faction sigil: the centre of the faction's card back, set in the top-right socket. */
.big-card.shard .sh-sigil { left: 84.48%; top: 3.81%; width: 10.16%; height: 7.23%; z-index: 4; border-radius: 50%; overflow: hidden; display: flex;
  box-shadow: inset 0 0 0.4em #000, 0 0 0.3em color-mix(in srgb, var(--accent) 70%, transparent); }
.big-card.shard .sh-sigil i { flex: 1; background-size: 175% auto; background-position: 50% 45%; background-repeat: no-repeat; }
.big-card.shard .sh-sigil.split i:first-child { background-position: 38% 45%; background-size: 340% auto; }
.big-card.shard .sh-sigil.split i:last-child { background-position: 62% 45%; background-size: 340% auto; border-left: 0.08em solid #000; }
.big-card.shard .sh-sigil .sg-none { display: grid; place-items: center; font-style: normal; font-size: 1.6em; background: #15121a; }

/* Gems: faceted crystals cut to fit their sockets. Cost hangs in the pennant. */
.big-card.shard .bc-gem { z-index: 4; display: grid !important; place-items: center !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; bottom: auto !important; right: auto !important;
  color: #fff; -webkit-text-stroke: 0.12em #000 !important; paint-order: stroke fill; text-shadow: 0 0.06em 0.14em #000; filter: none !important; }
.big-card.shard .bc-gem::before, .big-card.shard .bc-gem::after { display: none !important; }
.big-card.shard .bc-cost { left: 4.12% !important; top: 1.17% !important; width: 13.46% !important; height: 16.6% !important; font-size: 3.5em !important;
  padding-bottom: 0.32em !important; box-sizing: border-box;
  clip-path: polygon(0 0, 100% 0, 100% 81%, 50% 100%, 0 81%) !important;
  background:
    linear-gradient(62deg, transparent 49.4%, #ffffff38 50%, transparent 62%),
    linear-gradient(-62deg, transparent 49.4%, #00000040 50%),
    linear-gradient(180deg, #bfe0ff 0%, #4f93f0 30%, #1f56c8 66%, #0f2c78 100%) !important; }
.big-card.shard .bc-cost.cheaper { background: linear-gradient(62deg, transparent 49.4%, #ffffff38 50%, transparent 62%), linear-gradient(180deg, #d8ffe0, #4fd07a 40%, #11692c) !important; }
.big-card.shard .bc-cost.pricier { background: linear-gradient(62deg, transparent 49.4%, #ffffff38 50%, transparent 62%), linear-gradient(180deg, #ffe0e4, #f0606e 40%, #7a0a1c) !important; }
body.colorblind .big-card.shard .bc-cost.cheaper { background: linear-gradient(180deg, #e6f2ff, #6ab0ff 40%, #1a5ab3) !important; }
body.colorblind .big-card.shard .bc-cost.pricier { background: linear-gradient(180deg, #fff0e0, #ffb060 40%, #b35a0a) !important; }
/* Attack (amber) and Health (crimson): six-sided shards either side of the name plate. */
.big-card.shard .bc-atk, .big-card.shard .bc-hp { top: 53.9% !important; width: 18.96% !important; height: 10.16% !important; font-size: 3.3em !important;
  clip-path: polygon(0 50%, 24.7% 0, 75.3% 0, 100% 50%, 75.3% 100%, 24.7% 100%) !important; }
.big-card.shard .bc-atk { left: 3.85% !important;
  background:
    linear-gradient(90deg, #ffffff30 0 50%, transparent 50%),
    linear-gradient(180deg, transparent 49%, #0000003a 50%),
    linear-gradient(135deg, #ffe7a0 0%, #f0a830 38%, #b0620e 72%, #5a2c04 100%) !important; }
.big-card.shard .bc-hp { left: 77.2% !important;
  background:
    linear-gradient(90deg, #ffffff26 0 50%, transparent 50%),
    linear-gradient(180deg, transparent 49%, #0000004a 50%),
    linear-gradient(135deg, #ff9aa6 0%, #e0283e 38%, #8e0a1e 72%, #45020c 100%) !important; }
.big-card.shard .bc-hp.two-digit, .big-card.shard .bc-hp { padding-top: 0 !important; }
.big-card.shard .bc-atk.up, .big-card.shard .bc-hp.up { color: #52ff3a !important; }
.big-card.shard .bc-atk.down, .big-card.shard .bc-hp.down { color: #ff3426 !important; }
.big-card.shard .bc-token { top: auto; bottom: 8.6%; right: 9%; z-index: 5; font-size: 0.85em; }

/* Glows follow the card's shape. */
.card.playable > .big-card.shard, .card.respond > .big-card.shard { box-shadow: none !important; filter: drop-shadow(0 0 0.25em #57e07a) drop-shadow(0 0 0.5em #57e07a); }
.card.quick.playable > .big-card.shard { filter: drop-shadow(0 0 0.25em #ffd25a) drop-shadow(0 0 0.5em #ffd25a); }
body.colorblind .card.playable > .big-card.shard { filter: drop-shadow(0 0 0.25em #3a9aff) drop-shadow(0 0 0.5em #3a9aff); }
.card.cut > .big-card.shard { filter: grayscale(0.85) brightness(0.6); }
.big-card.shard.is-pending .bc-art { filter: grayscale(.7) brightness(.8); }
/* 7+ cost: the cracks pulse with light. */
.big-card.shard.legend .sh-accent { animation: shard-legend 2.6s ease-in-out infinite alternate; }
@keyframes shard-legend { from { filter: drop-shadow(0 0 0.18em var(--accent)) drop-shadow(0 0 0.5em var(--accent)); }
  to { filter: brightness(1.5) drop-shadow(0 0 0.3em var(--accent)) drop-shadow(0 0 1.1em var(--accent)); } }
body.reduced-motion .big-card.shard.legend .sh-accent { animation: none; }

/* Faction colours for the cracks and trim. */
.big-card.shard.f-vampires, .minion.shardm.f-vampires { --accent: #d02a5a; }
.big-card.shard.f-demons, .minion.shardm.f-demons { --accent: #ff3a1a; }
.big-card.shard.f-dragons, .minion.shardm.f-dragons { --accent: #ff8c1a; }
.big-card.shard.f-dinosaurs, .minion.shardm.f-dinosaurs { --accent: #e0a848; }
.big-card.shard.f-bees, .minion.shardm.f-bees { --accent: #ffd21a; }
.big-card.shard.f-divine, .minion.shardm.f-divine { --accent: #fff0a0; }
.big-card.shard.f-radioactive, .minion.shardm.f-radioactive { --accent: #9dff2a; }
.big-card.shard.f-plants, .minion.shardm.f-plants { --accent: #4ed86a; }
.big-card.shard.f-zombies, .minion.shardm.f-zombies { --accent: #9cb84a; }
.big-card.shard.f-aliens, .minion.shardm.f-aliens { --accent: #2ae8c8; }
.big-card.shard.f-sharks, .minion.shardm.f-sharks { --accent: #3ab4ff; }
.big-card.shard.f-robots, .minion.shardm.f-robots { --accent: #7a96ff; }
.big-card.shard.f-ghosts, .minion.shardm.f-ghosts { --accent: #bfe9ff; }
.big-card.shard.f-fungus, .minion.shardm.f-fungus { --accent: #b46aff; }
.big-card.shard.f-ultraterrestrials, .minion.shardm.f-ultraterrestrials { --accent: #ff5ae0; }
.big-card.shard.f-fusion, .minion.shardm.f-fusion { --accent: #ffe2a0; }

/* ==== SHARD MINIONS (board) ===============================================
   Six-sided crystal shards in a bronze rim, edged in the faction's colour, with the
   cards' Attack/Health shards on the bottom corners. Classic card frames keep the ovals. */
.arena .minion .sm-frame, .arena .minion .sm-shine, .arena .minion .sm-socket, .arena .minion .sm-ward { display: none; }
body:not(.classic-cards) .arena .minion.shardm { --hexclip: polygon(50% 0, 100% 17%, 100% 83%, 50% 100%, 0 83%, 0 17%);
  --sock: polygon(0 50%, 24.7% 0, 75.3% 0, 100% 50%, 75.3% 100%, 24.7% 100%); filter: drop-shadow(0 0.35em 0.45em #000c); }
body:not(.classic-cards) .arena .minion.shardm .m-ring, body:not(.classic-cards) .arena .minion.shardm .m-shield { display: none !important; }
body:not(.classic-cards) .arena .minion.shardm .sm-frame { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
body:not(.classic-cards) .arena .minion.shardm .sm-frame > i { position: absolute; clip-path: var(--hexclip); }
body:not(.classic-cards) .arena .minion.shardm .sm-rim { inset: 0 3%;
  background: linear-gradient(135deg, #fbeab5 0%, #c79a4a 22%, #5e3f15 45%, #e8c87e 62%, #7c5722 82%, #f1d690 100%); }
body:not(.classic-cards) .arena .minion.shardm .sm-glow { inset: 3.2% 7.5%; background: var(--accent, #d8c8a8); }
body:not(.classic-cards) .arena .minion.shardm .sm-crack { inset: 5.4% 10.4%; background: #0b0a0d; }
body:not(.classic-cards) .arena .minion.shardm .m-art, body:not(.classic-cards) .arena .minion.shardm .m-fx { inset: 6.6% 11.8% !important; border: 0 !important;
  border-radius: 0 !important; z-index: 3; clip-path: var(--hexclip); background-size: cover; background-position: center 30%; box-shadow: none !important; }
body:not(.classic-cards) .arena .minion.shardm .m-art::after { background: radial-gradient(ellipse at 50% 40%, transparent 55%, #000a 100%) !important; }
body:not(.classic-cards) .arena .minion.shardm .sm-shine { display: block; position: absolute; inset: 6.6% 11.8%; z-index: 4; pointer-events: none; clip-path: var(--hexclip);
  background: linear-gradient(115deg, transparent 30%, #ffffff22 38%, transparent 46%); }
/* Attack and Health: the cards' six-sided shards in bronze sockets on the bottom corners. */
body:not(.classic-cards) .arena .minion.shardm .atk, body:not(.classic-cards) .arena .minion.shardm .hp {
  width: calc(var(--minion-w) * 0.37) !important; height: calc(var(--minion-w) * 0.29) !important; top: auto !important; bottom: -3% !important;
  padding: 0 !important; display: grid !important; place-items: center !important; line-height: 1 !important; font-size: calc(var(--minion-w) * 0.24) !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; z-index: 7; clip-path: var(--sock);
  -webkit-text-stroke: 0.12em #000 !important; paint-order: stroke fill; }
body:not(.classic-cards) .arena .minion.shardm .atk::before, body:not(.classic-cards) .arena .minion.shardm .atk::after,
body:not(.classic-cards) .arena .minion.shardm .hp::before, body:not(.classic-cards) .arena .minion.shardm .hp::after { display: none !important; }
body:not(.classic-cards) .arena .minion.shardm .atk { left: -2% !important; right: auto !important;
  background: linear-gradient(90deg, #ffffff30 0 50%, transparent 50%), linear-gradient(180deg, transparent 49%, #0000003a 50%),
    linear-gradient(135deg, #ffe7a0 0%, #f0a830 38%, #b0620e 72%, #5a2c04 100%) !important; }
body:not(.classic-cards) .arena .minion.shardm .hp { right: -2% !important; left: auto !important;
  background: linear-gradient(90deg, #ffffff26 0 50%, transparent 50%), linear-gradient(180deg, transparent 49%, #0000004a 50%),
    linear-gradient(135deg, #ff9aa6 0%, #e0283e 38%, #8e0a1e 72%, #45020c 100%) !important; }
body:not(.classic-cards) .arena .minion.shardm .sm-socket { display: block; position: absolute; z-index: 6; pointer-events: none; bottom: calc(-3% - 3px);
  width: calc(var(--minion-w) * 0.37 + 6px); height: calc(var(--minion-w) * 0.29 + 6px); clip-path: var(--sock);
  background: linear-gradient(135deg, #fbeab5, #c79a4a 30%, #5e3f15 60%, #e8c87e); }
body:not(.classic-cards) .arena .minion.shardm .sm-socket.l { left: calc(-2% - 3px); }
body:not(.classic-cards) .arena .minion.shardm .sm-socket.r { right: calc(-2% - 3px); }
/* States: ready to attack (green), a legal target, Marked Prey (pulsing blood red). */
body:not(.classic-cards) .arena .minion.shardm.can-attack .sm-frame { filter: drop-shadow(0 0 2px #57e07a) drop-shadow(0 0 7px #57e07a); }
body:not(.classic-cards) .arena .minion.shardm.can-attack .sm-glow { background: #57e07a; }
body.colorblind:not(.classic-cards) .arena .minion.shardm.can-attack .sm-frame { filter: drop-shadow(0 0 2px #3a9aff) drop-shadow(0 0 7px #3a9aff); }
body.colorblind:not(.classic-cards) .arena .minion.shardm.can-attack .sm-glow { background: #3a9aff; }
body:not(.classic-cards) .arena.aiming .minion.shardm.can-attack .sm-frame { filter: none; }
body:not(.classic-cards) .arena .minion.shardm.targetable .sm-frame { filter: drop-shadow(0 0 2px var(--target)) drop-shadow(0 0 8px var(--target)); }
body:not(.classic-cards) .arena .minion.shardm.targetable .sm-glow { background: var(--target); }
body:not(.classic-cards) .arena .minion.shardm.prey .sm-glow { background: #ff2a3a; animation: sm-prey 1s ease-in-out infinite alternate; }
body:not(.classic-cards) .arena .minion.shardm.prey .sm-frame { filter: drop-shadow(0 0 3px #ff1a1a) drop-shadow(0 0 8px #ff2a2acc); }
@keyframes sm-prey { to { filter: brightness(1.7); } }

/* ---- Taunt: a glowing magic shield standing in front of the minion ---- */
body:not(.classic-cards) .arena .minion.shardm.kw-taunt .sm-glow { background: #ffd76a; }
body:not(.classic-cards) .arena .minion.shardm .sm-ward { display: block; position: absolute; z-index: 5; left: -7%; right: -7%; top: 10%; bottom: -4%;
  pointer-events: none; transform-origin: 50% 60%; animation: sm-ward-pulse 1.8s ease-in-out infinite alternate; }
body:not(.classic-cards) .arena .minion.shardm .sm-ward svg { width: 100%; height: 100%; overflow: visible; display: block; }
@keyframes sm-ward-pulse { from { transform: scale(0.98); } to { transform: scale(1.03); } }
.arena .minion .sm-ward .edge { animation: sm-ward-glow 1.8s ease-in-out infinite alternate; }
@keyframes sm-ward-glow { from { opacity: .55; } to { opacity: 1; } }
.arena .minion .sm-ward .shine { animation: sm-ward-shine 2.6s linear infinite; }
@keyframes sm-ward-shine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.arena .minion .sm-ward i { position: absolute; bottom: 10%; width: 3px; height: 3px; border-radius: 50%; background: #fff3c0;
  box-shadow: 0 0 4px #ffd76a; animation: sm-spark 2.2s linear infinite; opacity: 0; }
.arena .minion .sm-ward i:nth-of-type(1) { left: 22%; }
.arena .minion .sm-ward i:nth-of-type(2) { left: 50%; animation-delay: .7s; }
.arena .minion .sm-ward i:nth-of-type(3) { left: 74%; animation-delay: 1.4s; }
@keyframes sm-spark { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-260%); opacity: 0; } }
/* Shield activation (a minion is played with Taunt or gains it): the shield slams up out of a
   point of light, overshoots with a white flash, and sends a ring of light outward. */
.arena .minion .sm-ward .burst { display: none; }
body:not(.classic-cards) .arena .minion.shardm .sm-ward.up { animation: sm-ward-up 1s cubic-bezier(.2,.9,.3,1.25) var(--wd, 0s) both, sm-ward-pulse 1.8s ease-in-out 1s infinite alternate; }
@keyframes sm-ward-up {
  0% { transform: scale(0.1) translateY(30%); opacity: 0; filter: brightness(3) drop-shadow(0 0 0 #fff); }
  35% { transform: scale(1.2); opacity: 1; filter: brightness(2.4) drop-shadow(0 0 10px #fff6cf) drop-shadow(0 0 22px #ffb83a); }
  60% { transform: scale(0.95); filter: brightness(1.4) drop-shadow(0 0 6px #ffd76a); }
  100% { transform: scale(1); opacity: 1; filter: none; } }
body:not(.classic-cards) .arena .minion.shardm .sm-ward.up .burst { display: block; position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; border-radius: 50%;
  border: 3px solid #fff3c0; box-shadow: 0 0 12px #ffd76a, inset 0 0 12px #ffd76a; transform: translate(-50%, -50%) scale(0.2); opacity: 0;
  animation: sm-ward-burst 0.8s ease-out calc(var(--wd, 0s) + 0.25s) both; }
@keyframes sm-ward-burst { 0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; } }
body.reduced-motion .arena .minion .sm-ward, body.reduced-motion .arena .minion .sm-ward * { animation: none !important; }
body.reduced-motion .arena .minion .sm-ward i, body.reduced-motion .arena .minion .sm-ward .burst { display: none !important; }

/* ==== Heart-shaped Health gems (Shard cards and board minions) ==== */
:root { --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90' preserveAspectRatio='none'%3E%3Cpath d='M50,88 C20,66 2,48 2,28 C2,12 14,2 28,2 C38,2 46,8 50,16 C54,8 62,2 72,2 C86,2 98,12 98,28 C98,48 80,66 50,88 Z'/%3E%3C/svg%3E"); }
.big-card.shard .bc-hp, .big-card.shard .bc-hp.two-digit { left: 77.06% !important; top: 53.13% !important; width: 18.68% !important; height: 11.33% !important;
  clip-path: none !important; -webkit-mask: var(--heart) center / 100% 100% no-repeat; mask: var(--heart) center / 100% 100% no-repeat;
  padding: 0 0 0.22em !important; box-sizing: border-box;
  background:
    radial-gradient(38% 30% at 32% 28%, #ffffff70, transparent 70%),
    linear-gradient(90deg, transparent 49.5%, #00000030 50%),
    radial-gradient(90% 90% at 50% 30%, #ff8a98 0%, #e0283e 40%, #8e0a1e 75%, #45020c 100%) !important; }
body:not(.classic-cards) .arena .minion.shardm .hp { clip-path: none !important; height: calc(var(--minion-w) * 0.36) !important; width: calc(var(--minion-w) * 0.41) !important; bottom: -5% !important;
  -webkit-mask: var(--heart) center / 100% 100% no-repeat; mask: var(--heart) center / 100% 100% no-repeat; padding-bottom: calc(var(--minion-w) * 0.035) !important; box-sizing: border-box;
  background:
    radial-gradient(38% 30% at 32% 28%, #ffffff70, transparent 70%),
    linear-gradient(90deg, transparent 49.5%, #00000030 50%),
    radial-gradient(90% 90% at 50% 30%, #ff8a98 0%, #e0283e 40%, #8e0a1e 75%, #45020c 100%) !important; }
body:not(.classic-cards) .arena .minion.shardm .sm-socket.r { clip-path: none; width: calc(var(--minion-w) * 0.41 + 7px); height: calc(var(--minion-w) * 0.36 + 7px);
  bottom: calc(-5% - 3.5px); right: calc(-2% - 3.5px);
  -webkit-mask: var(--heart) center / 100% 100% no-repeat; mask: var(--heart) center / 100% 100% no-repeat; }

/* Attack gems match the Health hearts in size. */
.big-card.shard .bc-atk { left: 3.8% !important; top: 52.99% !important; width: 19.04% !important; height: 11.6% !important; }
body:not(.classic-cards) .arena .minion.shardm .atk { width: calc(var(--minion-w) * 0.41) !important; height: calc(var(--minion-w) * 0.36) !important; bottom: -5% !important; }
body:not(.classic-cards) .arena .minion.shardm .sm-socket.l { width: calc(var(--minion-w) * 0.41 + 7px); height: calc(var(--minion-w) * 0.36 + 7px);
  bottom: calc(-5% - 3.5px); left: calc(-2% - 3.5px); }

/* ==== Painted Shard frames (art/frames/painted-<type>.png, 728x1024) ====
   Positions measured from the paintings' openings, in % of the card. */
.big-card.shard .sh-accent { opacity: 0.9; filter: none; }
.big-card.shard.t-minion .bc-art { left: 12.2% !important; top: 9.4% !important; width: 75% !important; height: 41% !important; }
.big-card.shard.t-spell .bc-art { left: 19.8% !important; top: 7.6% !important; width: 60.4% !important; height: 43.2% !important; border-radius: 50% !important; }
.big-card.shard.t-trap .bc-art { left: 12.2% !important; top: 9.5% !important; width: 75.6% !important; height: 41% !important; }
.big-card.shard .bc-text { left: 10.6% !important; top: 64.2% !important; width: 80% !important; height: 25.3% !important; padding: 3.6% 5% !important; }
.big-card.shard:not(.t-minion) .bc-text { left: 8.4% !important; top: 65.1% !important; width: 83.3% !important; height: 26% !important; }
.big-card.shard .bc-banner { left: 26.8% !important; top: 54.9% !important; width: 47.4% !important; height: 6.4% !important; }
.big-card.shard:not(.t-minion) .bc-banner { left: 9% !important; top: 55.7% !important; width: 82% !important; height: 6.8% !important; }
.big-card.shard .bc-type { left: 39.6% !important; top: 91.4% !important; width: 21.3% !important; height: 6.6% !important; padding: 0 0.2em !important;
  background: linear-gradient(180deg, #2c2833, #141118) !important; z-index: 1; font-size: 0.8em !important; }
.big-card.shard:not(.t-minion) .bc-type { left: 31.9% !important; top: 92.4% !important; width: 36.4% !important; height: 6% !important; background: none !important; z-index: 4; }
.card .big-card.shard .bc-type { font-size: 0.95em !important; }
.big-card.shard .sh-sigil { left: 83.52%; top: 4.3%; width: 9.89%; height: 7.03%; }
.big-card.shard.t-spell .sh-sigil { left: 84.2%; top: 3.71%; width: 10.85%; height: 7.62%; }
.big-card.shard.t-trap .sh-sigil { left: 84.75%; top: 3.71%; width: 10.71%; height: 7.52%; }
.big-card.shard .bc-cost { left: 6.18% !important; top: 1.37% !important; width: 13.6% !important; height: 16.6% !important;
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%) !important; }
.big-card.shard.t-spell .bc-cost { left: 3.3% !important; top: 1.17% !important; width: 14.84% !important; height: 17.38% !important; }
.big-card.shard.t-trap .bc-cost { left: 2.75% !important; top: 0.78% !important; width: 15.25% !important; height: 17.77% !important; }
.big-card.shard .bc-atk { left: 6.46% !important; top: 52.34% !important; width: 17.58% !important; height: 11.13% !important; }
.big-card.shard .bc-hp, .big-card.shard .bc-hp.two-digit { left: 77.06% !important; top: 52.44% !important; width: 17.31% !important; height: 10.74% !important; }
.big-card.shard.t-minion .bc-type { left: 41% !important; width: 18% !important; }
/* Minion tribe/tags sit in the narrow painted tab, one per line (Vampire / Dark / Undead). */
.big-card.shard.t-minion .bc-type { left: 39.6% !important; top: 91.2% !important; width: 21.3% !important; height: 7.6% !important;
  display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 0; padding: 0 0.25em !important;
  background: none !important; z-index: 4; line-height: 0.88; }
.big-card.shard.t-minion .bc-type span { font-size: 1.2em; max-width: 100%; }
.big-card.shard.t-minion .bc-type.lines-2 span { font-size: 1.25em; letter-spacing: 0; }
.big-card.shard.t-minion .bc-type.lines-3 span { font-size: 1.2em; letter-spacing: 0; }

/* ==== Painted board bezel (art/frames/painted-bezel.png) ====
   The bronze crystal frame with its own Attack and Health sockets; the minion's art fills
   the six-sided window and glows inside its edge in the faction's colour. */
body:not(.classic-cards) .arena .minion.shardm .sm-frame { left: 6.1%; right: 6.1%; top: 0; bottom: 0; z-index: 4;
  background: url('../../art/frames/painted-bezel.png') center / 100% 100% no-repeat; }
body:not(.classic-cards) .arena .minion.shardm .sm-frame > i, body:not(.classic-cards) .arena .minion.shardm .sm-socket { display: none !important; }
body:not(.classic-cards) .arena .minion.shardm .m-art, body:not(.classic-cards) .arena .minion.shardm .m-fx { left: 15.2% !important; right: auto !important;
  width: 69.6% !important; top: 8.8% !important; bottom: auto !important; height: 82.6% !important; }
body:not(.classic-cards) .arena .minion.shardm .m-art { box-shadow: inset 0 0 calc(var(--minion-w) * 0.07) calc(var(--minion-w) * 0.015) var(--accent, #d8c8a8) !important; }
body:not(.classic-cards) .arena .minion.shardm.kw-taunt .m-art { box-shadow: inset 0 0 calc(var(--minion-w) * 0.07) calc(var(--minion-w) * 0.015) #ffd76a !important; }
body:not(.classic-cards) .arena .minion.shardm.can-attack .m-art { box-shadow: inset 0 0 calc(var(--minion-w) * 0.08) calc(var(--minion-w) * 0.02) #57e07a !important; }
body.colorblind:not(.classic-cards) .arena .minion.shardm.can-attack .m-art { box-shadow: inset 0 0 calc(var(--minion-w) * 0.08) calc(var(--minion-w) * 0.02) #3a9aff !important; }
body:not(.classic-cards) .arena .minion.shardm.targetable .m-art { box-shadow: inset 0 0 calc(var(--minion-w) * 0.08) calc(var(--minion-w) * 0.02) var(--target) !important; }
body:not(.classic-cards) .arena .minion.shardm.prey .m-art { box-shadow: inset 0 0 calc(var(--minion-w) * 0.09) calc(var(--minion-w) * 0.025) #ff2a3a !important; }
body:not(.classic-cards) .arena .minion.shardm .sm-shine { left: 15.2%; width: 69.6%; top: 8.8%; height: 82.6%; inset: auto; z-index: 5; }
body:not(.classic-cards) .arena .minion.shardm .atk, body:not(.classic-cards) .arena .minion.shardm .hp {
  width: calc(var(--minion-w) * 0.27) !important; height: calc(var(--minion-w) * 0.25) !important; top: 70.2% !important; bottom: auto !important; right: auto !important;
  font-size: calc(var(--minion-w) * 0.2) !important; padding: 0 !important; }
body:not(.classic-cards) .arena .minion.shardm .atk { left: 8.6% !important; }
body:not(.classic-cards) .arena .minion.shardm .hp { left: 63.2% !important; top: 70.7% !important; width: calc(var(--minion-w) * 0.29) !important; height: calc(var(--minion-w) * 0.26) !important;
  padding-bottom: calc(var(--minion-w) * 0.03) !important; }
body:not(.classic-cards) .arena .minion.shardm .sm-ward { z-index: 5; }
body:not(.classic-cards) .arena .minion.shardm .atk, body:not(.classic-cards) .arena .minion.shardm .hp { font-size: calc(var(--minion-w) * 0.25) !important; overflow: visible; }
/* Wide picture windows crop the square art; keep heads in frame by cropping mostly from the bottom. */
.big-card.shard.t-minion .bc-art, .big-card.shard.t-trap .bc-art { overflow: hidden; }
.big-card.shard.t-minion .bc-art img, .big-card.shard.t-trap .bc-art img { width: 135%; height: auto; max-width: none; aspect-ratio: 1; object-fit: cover; transform: translate(-13%, -9%); }

/* ---- Acidic ---- */
.big-card.f-acidic { --frame: #3a5a1a; --frame-hi: #c8ff2a; --body: #121a06; }
.big-card.t-spell.f-acidic { --frame: #5a5a12; --frame-hi: #ffe23a; --body: #1a1a04; }
.big-card.t-trap.f-acidic { --frame: #34402a; --frame-hi: #9ab86a; --body: #0e120a; }
.big-card.shard.f-acidic, .minion.shardm.f-acidic { --accent: #c8ff2a; }
.arena.f-acidic { --felt: #2a3a14; --felt-2: #0e1406; --rim: #c8ff2a; }
.medallion.f-acidic { --fc: #c8ff2a; } .ts-guide.f-acidic { --fc: #c8ff2a; }
.big-card.f-lycanthropes { --frame: #2a3450; --frame-hi: #c8d8ff; --body: #0c1020; }
.big-card.t-spell.f-lycanthropes { --frame: #4a2a3a; --frame-hi: #ff8a9a; --body: #160a10; }
.big-card.t-trap.f-lycanthropes { --frame: #2a3a2a; --frame-hi: #9ab89a; --body: #0a100a; }
.big-card.shard.f-lycanthropes, .minion.shardm.f-lycanthropes { --accent: #c8d8ff; }
.arena.f-lycanthropes { --felt: #1a2436; --felt-2: #080c16; --rim: #c8d8ff; }
.medallion.f-lycanthropes { --fc: #c8d8ff; } .ts-guide.f-lycanthropes { --fc: #c8d8ff; }
.fx-p.acid { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #c8ff2a 45%, #6a9a0a 75%, transparent 80%); box-shadow: 0 0 6px #c8ff2a; }
/* Corrosion on the board: a dripping acid badge with the total, and Acid-coated sheen. */
.minion .corr-mark { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 0.25em; border-radius: 0.8em;
  background: radial-gradient(circle at 35% 30%, #f4ffb0, #b8ff1a 45%, #4a7a06); color: #0e1404; font-weight: 900; font-size: 1.15em;
  box-shadow: 0 0 6px #c8ff2a, 0 1px 2px #000; }
.minion .coat-mark { display: inline-grid; place-items: center; font-size: 1.4em; filter: drop-shadow(0 0 4px #c8ff2a); }
.arena .minion.corroded .m-art::after { background: radial-gradient(ellipse at 50% 100%, #b8ff1a55, transparent 60%) !important; }
.arena .minion.zeroed .atk { filter: grayscale(0.6) brightness(0.8); }

/* ---- Prey, Corrosion and the newer factions' kill effects ---- */
.fx-burst.blood { border-color: #ff2a3a; box-shadow: 0 0 24px #ff2a3a, inset 0 0 18px #ff2a3a; }
.fx-blood-svg { filter: drop-shadow(0 0 4px #ff1a2acc); }
.fx-blood-drop { position: fixed; z-index: 950; pointer-events: none; width: 9px; height: 11px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #ff9aa4, #e0102a 50%, #6a0010); box-shadow: 0 0 6px #ff1a2a; }
.fx-float.corrode { color: #d8ff3a; -webkit-text-stroke: 0.08em #1a2a04; paint-order: stroke fill; text-shadow: 0 0 10px #8aff1a, 0 2px 3px #000; }
.fx-acid-glob { position: fixed; z-index: 950; pointer-events: none; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #fbffd0, #c8ff2a 45%, #4a8a06); box-shadow: 0 0 8px #b8ff1a; }
.fx-acid-drip { position: fixed; z-index: 950; pointer-events: none; width: 3px; opacity: 0.85; border-radius: 0 0 4px 4px; transform-origin: 50% 0;
  background: linear-gradient(180deg, #c8ff2acc, #a8ff1a 70%, #f4ffb0); box-shadow: 0 0 6px #b8ff1a; }
.fx-acid-drip::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 10px; transform: translateX(-50%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #fbffd0, #b8ff1a 55%, #4a8a06); }
.fx-acid-fizz { position: fixed; z-index: 940; pointer-events: none; border-radius: 12%;
  background: radial-gradient(ellipse at 50% 20%, #c8ff2a66, transparent 65%), repeating-radial-gradient(circle at 30% 70%, #c8ff2a33 0 3px, transparent 3px 9px);
  mix-blend-mode: screen; }
.fx-jaw { position: fixed; z-index: 950; pointer-events: none; filter: drop-shadow(0 0 6px #000) drop-shadow(0 0 12px #ff2a3a88); }
/* Marked Prey: soft puffs of red mist drifting along the blood trail. */
.fx-blood-mist { position: fixed; z-index: 945; pointer-events: none; filter: blur(9px);
  border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%;
  background: radial-gradient(circle at 40% 40%, #ff4a5acc 0%, #d0142eaa 35%, #8a001866 60%, transparent 72%); }

/* ==== Deck builder: drag cards into the deck list (Hearthstone style) ==== */
.builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; align-items: start; }
.builder .builder-grid .card.draggable { cursor: grab; touch-action: pan-y; position: relative; }
.builder .builder-grid .card.maxed > .big-card { filter: grayscale(0.7) brightness(0.55); }
.builder .builder-grid .card .in-deck { position: absolute; z-index: 6; left: 50%; bottom: -0.2em; transform: translateX(-50%);
  padding: 0.1em 0.7em; border-radius: 1em; background: #1a120a; border: 2px solid var(--gold); color: var(--gold);
  font-family: var(--font-title); font-weight: 900; font-size: 15px; box-shadow: 0 2px 6px #000a; }
.builder .builder-grid .card.lift { transform: scale(1.06); filter: drop-shadow(0 0 10px #ffd25a); transition: transform 0.12s; }
.deck-panel { position: sticky; top: 96px; max-height: calc(100vh - 116px); display: flex; flex-direction: column;
  background: linear-gradient(180deg, #221812f2, #120c08f2); border: 2px solid #8a6a3a; border-radius: 14px; box-shadow: 0 8px 24px #000a;
  transition: box-shadow 0.15s, border-color 0.15s; }
.deck-panel header { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px; border-bottom: 1px solid #8a6a3a66;
  font-family: var(--font-title); font-size: 18px; }
.deck-panel header span { color: var(--gold); font-weight: 900; } .deck-panel header span.done { color: var(--good); }
.deck-rows { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.deck-empty { margin: 30px 10px; text-align: center; color: var(--muted); font-style: italic; }
.deck-row { position: relative; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 4px; border-radius: 6px; overflow: hidden;
  background: #2a2018; border: 1px solid #00000088; cursor: grab; touch-action: pan-y; user-select: none; }
.deck-row:hover { border-color: #ffd25a88; }
.deck-row .dr-cost { flex: none; width: 26px; height: 26px; display: grid; place-items: center; z-index: 2; font-family: var(--font-title); font-weight: 900; color: #fff;
  -webkit-text-stroke: 0.1em #06122e; paint-order: stroke fill; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: radial-gradient(circle at 38% 30%, #e6f2ff, #7fb2ff 22%, #2f6fe0 55%, #163a8a); }
.deck-row .dr-name { flex: 1; z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-title); font-weight: 800;
  font-size: 14px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.deck-row .dr-art { position: absolute; right: 0; top: 0; bottom: 0; width: 55%; background-size: cover; background-position: center 30%;
  -webkit-mask: linear-gradient(90deg, transparent, #000 60%); mask: linear-gradient(90deg, transparent, #000 60%); opacity: 0.85; }
.deck-row .dr-n { z-index: 2; color: var(--gold); font-weight: 900; font-family: var(--font-title); text-shadow: 0 1px 2px #000; min-width: 1.6em; text-align: right; }
.deck-row.just-added { animation: deckRowIn 0.6s ease-out; }
@keyframes deckRowIn { 0% { box-shadow: 0 0 0 2px #ffd25a, 0 0 16px #ffd25a; transform: translateX(-10px); } 100% { box-shadow: none; transform: none; } }
.deck-panel.drop-in { border-color: #57e07a; box-shadow: 0 0 0 3px #57e07a88, 0 0 30px #57e07a88; }
.deck-panel.drop-out { border-color: #ff6a5a; box-shadow: 0 0 0 3px #ff6a5a66; }
.builder-ghost { position: fixed; z-index: 3000; pointer-events: none; margin: 0 !important; transform: translate(-50%, -60%) rotate(-4deg) scale(1.05);
  filter: drop-shadow(0 12px 18px #000c) drop-shadow(0 0 10px #ffd25a); }
.deck-row.builder-ghost { width: 260px !important; }
body.builder-dragging, body.builder-dragging * { cursor: grabbing !important; user-select: none; }
/* Phones: the deck is a tray along the bottom of the screen; drop cards onto it. */
@media (max-width: 760px) {
  .builder-layout { display: block; }
  .builder-cards { padding-bottom: 38vh; }
  .deck-panel { position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto; max-height: 32vh; z-index: 30; }
  .deck-panel header { padding: 6px 12px; font-size: 16px; }
  .deck-row { height: 28px; }
  .deck-row .dr-name { font-size: 12px; }
}
.deck-panel { top: calc(var(--bar-h, 96px) + 12px); max-height: calc(100vh - var(--bar-h, 96px) - 24px); }
@media (max-width: 760px) {
  .builder .builder-bar { position: static; gap: 8px; }
  .builder .builder-bar .sub { font-size: 13px; }
  .builder .builder-count { display: none; }
  .builder .builder-buttons button { padding: 6px 10px; font-size: 14px; }
  .builder-grid { justify-content: center; }
  .deck-panel { top: auto; max-height: 32vh; }
}
/* Constant Prey streams: a thin flowing thread of blood mist. */
.fx-prey-streams { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 40; overflow: visible; }
.prey-stream path { fill: none; stroke-linecap: round; }
.prey-stream .ps-haze { stroke: #8a0016; stroke-width: 7; opacity: 0.22; }
.prey-stream .ps-core { stroke: #d8102a; stroke-width: 2.4; opacity: 0.45; }
.prey-stream .ps-flow { stroke: #ff5a6a; stroke-width: 3; opacity: 0.8; stroke-dasharray: 3 16 7 22; animation: preyFlow 1.4s linear infinite; }
@keyframes preyFlow { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }
body.reduced-motion .prey-stream .ps-flow { animation: none; }
/* ---- Painted effect sprites (art/fx/sprites) ---- */
.fx-blood-mist { background: url('../../art/fx/sprites/blood-mist.png') center / contain no-repeat !important; filter: blur(1.5px) !important; border-radius: 0 !important; }
.fx-acid-glob { background: url('../../art/fx/sprites/acid-drip.png') center / contain no-repeat !important; box-shadow: none !important; border-radius: 0 !important;
  filter: drop-shadow(0 0 4px #b8ff1a); }
.fx-acid-glob { width: 12px !important; height: 16px !important; }
.fx-acid-drip::after { background: url('../../art/fx/sprites/acid-drip.png') center / contain no-repeat !important; width: 10px !important; height: 14px !important; border-radius: 0 !important; }
.fx-p.wisp { background: url('../../art/fx/sprites/ghost-wisp.png') center / contain no-repeat !important; width: 26px !important; height: 13px !important;
  border-radius: 0 !important; box-shadow: none !important; }
.fx-p.shard { background: url('../../art/fx/sprites/rift-shard.png') center / contain no-repeat !important; width: 14px !important; height: 16px !important;
  border-radius: 0 !important; box-shadow: none !important; clip-path: none !important; }
.fx-p.acid { background: url('../../art/fx/sprites/acid-bubble.png') center / contain no-repeat !important; box-shadow: none !important; }
/* Constant Prey stream: the painted blood trail laid along the line from Prey to Shark,
   drifting toward the Shark, faded at both ends. */
.fx-prey-streams { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.prey-stream { position: fixed; height: 26px; transform-origin: 0 50%; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); }
.prey-stream i { position: absolute; inset: 0; background: url('../../art/fx/sprites/blood-trail.png') 0 50% / 220px 100% repeat-x;
  animation: preyDrift 3s linear infinite var(--ph, 0s); opacity: 0.85; }
.prey-stream i + i { top: 4px; bottom: -4px; background-size: 300px 80%; animation-duration: 4.2s; opacity: 0.55; transform: scaleY(-1); }
@keyframes preyDrift { from { background-position-x: 0; } to { background-position-x: 220px; } }
.prey-stream i + i { animation-name: preyDrift2; } @keyframes preyDrift2 { from { background-position-x: 0; } to { background-position-x: 300px; } }
body.reduced-motion .prey-stream i { animation: none; }
/* Keep the foil on the card: the painted frame plus the inside of the card (not the cut corners). */
.big-card.shard .zoom-foil { border-radius: 0;
  -webkit-mask: var(--foil-frame) 0 0 / 100% 100% no-repeat, linear-gradient(#000 0 0) 50% 50% / 86% 91% no-repeat;
  mask: var(--foil-frame) 0 0 / 100% 100% no-repeat, linear-gradient(#000 0 0) 50% 50% / 86% 91% no-repeat; }
.big-card.shard.t-minion .zoom-foil { --foil-frame: url('../../art/frames/painted-minion.png'); }
.big-card.shard.t-spell .zoom-foil { --foil-frame: url('../../art/frames/painted-spell.png'); }
.big-card.shard.t-spell.qp .zoom-foil { --foil-frame: url('../../art/frames/painted-quickplay.png'); }
.big-card.shard.t-trap .zoom-foil { --foil-frame: url('../../art/frames/painted-trap.png'); }

/* ==== Stats that react: the ring that flares behind a changed Attack / Health ==== */
.fx-statring { position: fixed; border-radius: 50%; pointer-events: none; z-index: 5; mix-blend-mode: screen; }
.fx-statring.up { background: radial-gradient(circle, #9dffb8cc 0%, #3ddc6a88 35%, transparent 70%); }
.fx-statring.down { background: radial-gradient(circle, #ffb0a0cc 0%, #ff3a3a88 35%, transparent 70%); }

/* ==== Arrival: ring of light, under-glow, dust and motes when a minion lands ==== */
.fx-arrive-ring { position: fixed; border-radius: 50%; pointer-events: none; z-index: 4; border: 6px solid var(--c);
  box-shadow: 0 0 18px var(--c), 0 0 40px var(--c), inset 0 0 18px var(--c); mix-blend-mode: screen; }
.fx-arrive-glow { position: fixed; border-radius: 50%; pointer-events: none; z-index: 3; mix-blend-mode: screen;
  background: radial-gradient(circle, transparent 18%, var(--c) 38%, transparent 64%); }
.fx-dust { position: fixed; border-radius: 50%; pointer-events: none; z-index: 3; filter: blur(2px);
  background: radial-gradient(circle, #e2d6c0ee 0%, #a8987ecc 40%, transparent 72%); }
.fx-mote { position: fixed; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; z-index: 5; background: #fff;
  box-shadow: 0 0 6px 2px var(--c), 0 0 14px 4px var(--c); }

/* ==== Damaged minions crack: three stages as more of their Health is lost (over the art) ==== */
.m-cracks { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: center / 100% 100% no-repeat; opacity: 0;
  filter: drop-shadow(0 0 1px #0008); transition: opacity 0.3s; }
.m-cracks.t1 { opacity: 0.9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M57.0,44.0 L51.5,39.1 L48.1,35.3 L42.9,33.0 L38.0,30.0 M57.0,44.0 L59.0,47.5 L62.6,50.7 L66.5,52.9 L72.0,58.0 M57.0,44.0 L54.9,51.1 L51.6,53.6 L52.4,62.7 L50.0,66.0' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.32' stroke-linejoin='round' transform='translate%28.8 .8%29'/%3E%3Cpath d='M57.0,44.0 L51.5,39.1 L48.1,35.3 L42.9,33.0 L38.0,30.0 M57.0,44.0 L59.0,47.5 L62.6,50.7 L66.5,52.9 L72.0,58.0 M57.0,44.0 L54.9,51.1 L51.6,53.6 L52.4,62.7 L50.0,66.0' fill='none' stroke='%230e0604' stroke-opacity='.95' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M38.0,30.0 L33.0,26.4 L29.9,21.3 L23.7,19.7 L16.0,18.0 M72.0,58.0 L74.9,58.7 L80.9,65.9 L85.1,67.5 L92.0,70.0' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='0.99' stroke-linejoin='round' transform='translate%28.8 .8%29'/%3E%3Cpath d='M38.0,30.0 L33.0,26.4 L29.9,21.3 L23.7,19.7 L16.0,18.0 M72.0,58.0 L74.9,58.7 L80.9,65.9 L85.1,67.5 L92.0,70.0' fill='none' stroke='%230e0604' stroke-opacity='.95' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.m-cracks.t2 { opacity: 0.95; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M57.0,44.0 L51.5,39.1 L48.1,35.3 L42.9,33.0 L38.0,30.0 M57.0,44.0 L59.0,47.5 L62.6,50.7 L66.5,52.9 L72.0,58.0 M57.0,44.0 L54.9,51.1 L51.6,53.6 L52.4,62.7 L50.0,66.0' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.43' stroke-linejoin='round' transform='translate%28.8 .8%29'/%3E%3Cpath d='M57.0,44.0 L51.5,39.1 L48.1,35.3 L42.9,33.0 L38.0,30.0 M57.0,44.0 L59.0,47.5 L62.6,50.7 L66.5,52.9 L72.0,58.0 M57.0,44.0 L54.9,51.1 L51.6,53.6 L52.4,62.7 L50.0,66.0' fill='none' stroke='%230e0604' stroke-opacity='.95' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M38.0,30.0 L33.0,26.4 L29.9,21.3 L23.7,19.7 L16.0,18.0 M72.0,58.0 L74.9,58.7 L80.9,65.9 L85.1,67.5 L92.0,70.0 M50.0,66.0 L48.8,71.2 L46.3,75.4 L41.4,82.2 L43.1,89.6 L40.0,96.0 M57.0,44.0 L60.7,40.8 L66.0,35.8 L72.3,34.2 L74.1,30.0 L80.0,26.0 M64.0,51.0 L68.7,49.8 L74.0,45.7 L78.0,44.0 M45.0,72.0 L41.9,73.1 L34.7,78.4 L30.0,80.0' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.10' stroke-linejoin='round' transform='translate%28.8 .8%29'/%3E%3Cpath d='M38.0,30.0 L33.0,26.4 L29.9,21.3 L23.7,19.7 L16.0,18.0 M72.0,58.0 L74.9,58.7 L80.9,65.9 L85.1,67.5 L92.0,70.0 M50.0,66.0 L48.8,71.2 L46.3,75.4 L41.4,82.2 L43.1,89.6 L40.0,96.0 M57.0,44.0 L60.7,40.8 L66.0,35.8 L72.3,34.2 L74.1,30.0 L80.0,26.0 M64.0,51.0 L68.7,49.8 L74.0,45.7 L78.0,44.0 M45.0,72.0 L41.9,73.1 L34.7,78.4 L30.0,80.0' fill='none' stroke='%230e0604' stroke-opacity='.95' stroke-width='2.0' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.m-cracks.t3 { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpolygon points='53,40 61,39 63,46 57,50 51,47' fill='%230c0504' fill-opacity='.85'/%3E%3Cpolygon points='53,40 61,39 57,43' fill='%23fff' fill-opacity='.18'/%3E%3Cpath d='M57.0,44.0 L51.5,39.1 L48.1,35.3 L42.9,33.0 L38.0,30.0 M57.0,44.0 L59.0,47.5 L62.6,50.7 L66.5,52.9 L72.0,58.0 M57.0,44.0 L54.9,51.1 L51.6,53.6 L52.4,62.7 L50.0,66.0' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.54' stroke-linejoin='round' transform='translate%28.8 .8%29'/%3E%3Cpath d='M57.0,44.0 L51.5,39.1 L48.1,35.3 L42.9,33.0 L38.0,30.0 M57.0,44.0 L59.0,47.5 L62.6,50.7 L66.5,52.9 L72.0,58.0 M57.0,44.0 L54.9,51.1 L51.6,53.6 L52.4,62.7 L50.0,66.0' fill='none' stroke='%230e0604' stroke-opacity='.95' stroke-width='2.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M38.0,30.0 L33.0,26.4 L29.9,21.3 L23.7,19.7 L16.0,18.0 M72.0,58.0 L74.9,58.7 L80.9,65.9 L85.1,67.5 L92.0,70.0 M50.0,66.0 L48.8,71.2 L46.3,75.4 L41.4,82.2 L43.1,89.6 L40.0,96.0 M57.0,44.0 L60.7,40.8 L66.0,35.8 L72.3,34.2 L74.1,30.0 L80.0,26.0 M64.0,51.0 L68.7,49.8 L74.0,45.7 L78.0,44.0 M45.0,72.0 L41.9,73.1 L34.7,78.4 L30.0,80.0' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.21' stroke-linejoin='round' transform='translate%28.8 .8%29'/%3E%3Cpath d='M38.0,30.0 L33.0,26.4 L29.9,21.3 L23.7,19.7 L16.0,18.0 M72.0,58.0 L74.9,58.7 L80.9,65.9 L85.1,67.5 L92.0,70.0 M50.0,66.0 L48.8,71.2 L46.3,75.4 L41.4,82.2 L43.1,89.6 L40.0,96.0 M57.0,44.0 L60.7,40.8 L66.0,35.8 L72.3,34.2 L74.1,30.0 L80.0,26.0 M64.0,51.0 L68.7,49.8 L74.0,45.7 L78.0,44.0 M45.0,72.0 L41.9,73.1 L34.7,78.4 L30.0,80.0' fill='none' stroke='%230e0604' stroke-opacity='.95' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M16.0,18.0 L9.3,14.0 L3.5,10.7 L0.0,6.0 M92.0,70.0 L95.7,77.6 L98.8,83.9 L100.0,92.0 M40.0,96.0 L42.0,103.4 L42.1,109.3 L44.4,119.1 L43.0,124.2 L44.0,130.0 M80.0,26.0 L82.7,22.8 L89.6,20.0 L94.8,13.1 L98.0,10.0 M80.0,26.0 L86.2,30.7 L91.4,33.8 L100.0,38.0 M57.0,44.0 L48.8,43.0 L42.0,48.3 L36.3,46.5 L31.7,51.6 L23.7,50.4 L20.0,52.0 M20.0,52.0 L13.5,55.5 L7.9,57.5 L0.0,58.0 M20.0,52.0 L16.6,46.2 L14.4,42.5 L14.3,34.1 L10.0,30.0 M58.0,80.0 L59.7,84.0 L63.6,91.1 L69.3,95.4 L69.4,101.9 L76.0,108.0 M76.0,108.0 L83.5,111.6 L93.8,115.4 L100.0,118.0 M30.0,80.0 L24.1,85.7 L19.1,87.3 L14.4,96.7 L6.0,100.0 M86.0,64.0 L83.5,71.7 L77.6,76.6 L72.4,84.0 L70.0,90.0 M25.0,22.0 L26.2,14.3 L29.8,8.6 L34.0,4.0' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='0.88' stroke-linejoin='round' transform='translate%28.8 .8%29'/%3E%3Cpath d='M16.0,18.0 L9.3,14.0 L3.5,10.7 L0.0,6.0 M92.0,70.0 L95.7,77.6 L98.8,83.9 L100.0,92.0 M40.0,96.0 L42.0,103.4 L42.1,109.3 L44.4,119.1 L43.0,124.2 L44.0,130.0 M80.0,26.0 L82.7,22.8 L89.6,20.0 L94.8,13.1 L98.0,10.0 M80.0,26.0 L86.2,30.7 L91.4,33.8 L100.0,38.0 M57.0,44.0 L48.8,43.0 L42.0,48.3 L36.3,46.5 L31.7,51.6 L23.7,50.4 L20.0,52.0 M20.0,52.0 L13.5,55.5 L7.9,57.5 L0.0,58.0 M20.0,52.0 L16.6,46.2 L14.4,42.5 L14.3,34.1 L10.0,30.0 M58.0,80.0 L59.7,84.0 L63.6,91.1 L69.3,95.4 L69.4,101.9 L76.0,108.0 M76.0,108.0 L83.5,111.6 L93.8,115.4 L100.0,118.0 M30.0,80.0 L24.1,85.7 L19.1,87.3 L14.4,96.7 L6.0,100.0 M86.0,64.0 L83.5,71.7 L77.6,76.6 L72.4,84.0 L70.0,90.0 M25.0,22.0 L26.2,14.3 L29.8,8.6 L34.0,4.0' fill='none' stroke='%230e0604' stroke-opacity='.95' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ==== Weightier attacks: the strike's streak of light and the impact flash ==== */
.fx-streak { position: fixed; height: 10px; margin-top: -5px; transform-origin: 0 50%; pointer-events: none; z-index: 6; border-radius: 5px;
  background: linear-gradient(90deg, transparent, var(--c) 55%, #fff 92%, transparent); filter: blur(1.5px) drop-shadow(0 0 6px var(--c)); mix-blend-mode: screen; }
.fx-impact { position: fixed; pointer-events: none; z-index: 7; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0 10%, color-mix(in srgb, var(--c) 70%, #fff) 18%, transparent 46%),
    conic-gradient(from 0deg, transparent 0 4%, #fff8 5%, transparent 7% 21%, #fff8 22%, transparent 24% 46%, #fff8 47%, transparent 49% 71%, #fff8 72%, transparent 74% 96%, #fff8 97%, transparent 99%);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); border-radius: 50%; }
/* Copies of board minions in the effects layer keep their board look. */
.arena.fx-ghost-host { position: fixed; inset: 0; width: auto; height: auto; background: none !important; box-shadow: none; overflow: visible;
  pointer-events: none; container-type: normal; z-index: 900; }

/* ==== Turn banner: a band sweeping across with gold rules, the words gliding in ==== */
.fx-turn { position: fixed; inset: 0; pointer-events: none; z-index: 950; }
.fx-turn .ft-band { position: absolute; left: 0; right: 0; top: 46%; height: clamp(90px, 15vh, 150px); transform: translateY(-50%) scaleX(0);
  background: linear-gradient(90deg, transparent 0%, #0b0709e8 14%, #120b0ef2 50%, #0b0709e8 86%, transparent 100%);
  box-shadow: 0 0 60px #000c; }
.fx-turn .ft-band::before, .fx-turn .ft-band::after { content: ''; position: absolute; left: 6%; right: 6%; height: 2px;
  background: linear-gradient(90deg, transparent, #e7b552 20%, #fff3c4 50%, #e7b552 80%, transparent); box-shadow: 0 0 10px #e7b55299; }
.fx-turn .ft-band::before { top: 8px; } .fx-turn .ft-band::after { bottom: 8px; }
.fx-turn.theirs .ft-band::before, .fx-turn.theirs .ft-band::after { background: linear-gradient(90deg, transparent, #c23a52 20%, #ffc0c8 50%, #c23a52 80%, transparent);
  box-shadow: 0 0 10px #c23a5299; }
.fx-turn .ft-flare { position: absolute; left: 50%; top: 46%; width: min(70vw, 760px); height: clamp(120px, 20vh, 220px); border-radius: 50%;
  background: radial-gradient(ellipse, #ffd77a66 0%, #e7b55233 35%, transparent 70%); mix-blend-mode: screen; }
.fx-turn.theirs .ft-flare { background: radial-gradient(ellipse, #ff5a7244 0%, #c23a5222 35%, transparent 70%); }
.fx-turn .ft-words { position: absolute; left: 50%; top: 46%; display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; }
.fx-turn .ft-main { font-family: var(--font-title); font-weight: 900; font-size: clamp(34px, 6vh, 72px); line-height: 1;
  background: linear-gradient(105deg, transparent 40%, #ffffffee 50%, transparent 60%) 140% 0 / 250% 100% no-repeat, linear-gradient(#fffbe8, #ffd877 45%, #d79a35 75%, #a8701c);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px #e7b55266) drop-shadow(0 3px 4px #000); }
.fx-turn.theirs .ft-main { font-size: clamp(26px, 4.6vh, 56px);
  background: linear-gradient(105deg, transparent 40%, #ffffffcc 50%, transparent 60%) 140% 0 / 250% 100% no-repeat, linear-gradient(#ffe6ea, #ff7088 50%, #c2304c);
  -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 10px #e0446155) drop-shadow(0 3px 4px #000); }
.fx-turn .ft-sub { font-family: var(--font-title); font-size: clamp(11px, 1.6vh, 16px); letter-spacing: 0.32em; text-transform: uppercase; color: #ecd6a8;
  text-shadow: 0 1px 3px #000; }

/* End Turn with nothing left to play: it breathes, ripples and catches the light. */
.end-turn.done { position: relative; overflow: visible; animation: end-breathe 1.6s ease-in-out infinite, end-sheen 2.6s ease-in-out infinite;
  background-image: linear-gradient(110deg, transparent 35%, #ffffff70 50%, transparent 65%), linear-gradient(#7be09a, #2f9a55);
  background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; }
body.colorblind .end-turn.done { background-image: linear-gradient(110deg, transparent 35%, #ffffff70 50%, transparent 65%), linear-gradient(#7ab8ff, #2f6fe0); }
@keyframes end-sheen { 0%, 55% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
.end-turn.done::before, .end-turn.done::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  border: 2px solid #8dffb0; animation: end-ripple 1.6s ease-out infinite; }
.end-turn.done::after { animation-delay: 0.8s; }
body.colorblind .end-turn.done::before, body.colorblind .end-turn.done::after { border-color: #9ccaff; }
@keyframes end-breathe { 0%, 100% { scale: 1; box-shadow: 0 0 10px #57c27a88; } 50% { scale: 1.06; box-shadow: 0 0 26px #57c27a; } }
@keyframes end-ripple { from { opacity: 0.85; transform: scale(1); } to { opacity: 0; transform: scale(1.35, 1.6); } }
@media (prefers-reduced-motion: reduce) { .end-turn.done, .end-turn.done::before, .end-turn.done::after { animation: none; } }
body.reduced-motion .end-turn.done, body.reduced-motion .end-turn.done::before, body.reduced-motion .end-turn.done::after { animation: none; }

/* ==== A defeated Hero cracks open with light, then bursts ==== */
.fx-hero-cracks { position: fixed; pointer-events: none; z-index: 8; overflow: visible; }
.fx-hero-cracks path { fill: none; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
.fx-hero-cracks .glow { stroke: #ffb347; stroke-width: 9; opacity: 0.55; filter: blur(3px); }
.fx-hero-cracks .core { stroke: #fff8e0; stroke-width: 2.5; filter: drop-shadow(0 0 3px #ffd27a); }
.fx-hero-cracks.blazing .glow { stroke-width: 16; opacity: 0.85; stroke: #ffd27a; transition: stroke-width 0.18s, opacity 0.18s; }
.fx-hero-flash { position: fixed; border-radius: 50%; pointer-events: none; z-index: 9; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0%, #fff6d8 18%, #ffb34788 36%, transparent 66%); }
.fx-hero-ring { position: fixed; border-radius: 50%; pointer-events: none; z-index: 9; border: 10px solid #ffe6b0; box-shadow: 0 0 30px #ffb347, inset 0 0 20px #ffb347; }

/* ==== Results: Victory / Defeat / Draw ==== */
.overlay.game-over { overflow: hidden auto; background: radial-gradient(ellipse at 50% 40%, #1a1012e0, #050304f2 75%); }
.overlay.game-over.loss { background: radial-gradient(ellipse at 50% 40%, #16121ae8, #030204f6 75%); }
.game-over .summary { position: relative; z-index: 1; min-width: min(480px, 92vw); max-width: 560px; margin: 70px 16px 24px; padding: 76px 30px 24px;
  background: linear-gradient(180deg, #2a1d1a, #15100f 60%, #0f0b0b); border: 1px solid #c9a35a66; border-radius: 18px;
  box-shadow: 0 0 0 1px #000, 0 30px 80px #000e, inset 0 1px 0 #ffffff14; text-align: center; }
.game-over.loss .summary { border-color: #8a7a8a55; background: linear-gradient(180deg, #211c22, #121014 60%, #0c0a0d); }
.go-medal { position: absolute; left: 50%; top: -62px; width: 124px; height: 124px; translate: -50% 0; border-radius: 50%; padding: 5px;
  background: conic-gradient(from 200deg, #fbeab5, #c79a4a, #5e3f15, #e8c87e, #7c5722, #fbeab5); box-shadow: 0 12px 30px #000c, 0 0 40px #e7b55255; }
.go-medal img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 22%; display: block; border: 3px solid #1a1008; }
.game-over.loss .go-medal { background: conic-gradient(from 200deg, #9a9aa6, #55525e, #2a2830, #8a8896, #45424e, #9a9aa6); box-shadow: 0 12px 30px #000c; }
.game-over.loss .go-medal img { filter: grayscale(0.85) brightness(0.65) contrast(1.1); }
.go-title { margin: 0; line-height: 1; }
.go-title span { font-family: var(--font-title); font-weight: 900; font-size: clamp(44px, 8vw, 72px); letter-spacing: 0.06em; text-transform: uppercase;
  background: linear-gradient(#fffbe8, #ffd877 45%, #d79a35 75%, #a8701c); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px #e7b55266) drop-shadow(0 4px 4px #000); }
.game-over.loss .go-title span { background: linear-gradient(#f0eaf2, #a49cae 50%, #5e5868); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 4px 4px #000); }
.game-over.draw .go-title span { background: linear-gradient(#f3ecdf, #c8b89a 55%, #7e6e52); -webkit-background-clip: text; background-clip: text; }
.go-sub { margin: 8px 0 18px; color: #c9b597; font-size: 15px; letter-spacing: 0.04em; }
.go-stats { display: grid; gap: 2px; margin: 0 auto 14px; max-width: 420px; }
.go-row { display: grid; grid-template-columns: 1fr 1.6fr 1fr; align-items: center; padding: 7px 10px; border-radius: 8px; }
.go-row:nth-child(even) { background: #ffffff07; }
.go-row.go-head { font-family: var(--font-title); font-size: 13px; color: #e8d6b0; letter-spacing: 0.04em; border-bottom: 1px solid #c9a35a33; border-radius: 0; padding-bottom: 8px; }
.go-label { font-size: 14px; color: #b9a58a; }
.go-n { font-family: var(--font-title); font-weight: 900; font-size: 20px; color: #e8dcc4; font-variant-numeric: tabular-nums; }
.go-n.lead { color: #ffd877; text-shadow: 0 0 10px #e7b55266; }
.game-over.loss .go-n.lead { color: #f0eaf2; text-shadow: none; }
.go-best { margin: 4px auto 12px; max-width: 420px; padding: 10px 14px; border-radius: 10px; background: #ffffff08; border: 1px solid #c9a35a33; }
.go-best span { display: block; font-family: var(--font-title); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #8f7d66; margin-bottom: 3px; }
.go-best b { color: #f1e3c4; font-weight: 600; }
.go-reward { display: flex; align-items: center; gap: 12px; text-align: left; margin: 0 auto 14px; max-width: 420px; padding: 10px 14px; border-radius: 10px;
  background: linear-gradient(90deg, #3a2a10, #2a1d10); border: 1px solid #e7b55588; box-shadow: 0 0 20px #e7b55233; }
.go-reward img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.go-reward b { display: block; color: #ffd877; }
.go-reward small { color: #c9b597; }
.go-reward.muted { background: #ffffff06; border-color: #ffffff1a; box-shadow: none; }
.go-reward.muted b { color: #d9ccb8; }
.go-actions { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.go-actions button { min-width: 140px; }
/* Gold rays turning slowly behind a Victory; ash drifting down behind a Defeat. */
.go-rays { position: absolute; left: 50%; top: 38%; width: 160vmax; height: 160vmax; translate: -50% -50%; pointer-events: none; opacity: 0.5;
  background: repeating-conic-gradient(from 0deg, #ffd87722 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 45%); mask: radial-gradient(circle, #000 0%, transparent 45%);
  animation: go-spin 60s linear infinite; }
@keyframes go-spin { to { rotate: 360deg; } }
.go-ash { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.go-ash i { position: absolute; left: var(--x); top: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: #9a8f9a; opacity: 0;
  box-shadow: 0 0 4px #000; animation: go-ash var(--t) linear var(--d) infinite; }
@keyframes go-ash { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 0.6; } 100% { opacity: 0; transform: translate(40px, 105vh) rotate(200deg); } }
/* The entrance, the first time only: the panel rises, the title stamps in, the rows follow. */
.game-over.fresh .summary { animation: go-panel 0.7s cubic-bezier(.2,.9,.3,1.15) both; }
.game-over.fresh .go-medal { animation: go-medal 0.8s cubic-bezier(.2,.9,.3,1.2) 0.15s both; }
.game-over.fresh .go-title span { display: inline-block; animation: go-stamp 0.6s cubic-bezier(.3,1.4,.5,1) 0.3s both; }
.game-over.fresh .go-sub { animation: go-fade 0.5s ease-out 0.6s both; }
.game-over.fresh .go-row, .game-over.fresh .go-best, .game-over.fresh .go-reward, .game-over.fresh .go-actions { animation: go-row 0.45s cubic-bezier(.2,.8,.3,1) both;
  animation-delay: calc(0.65s + var(--i, 0) * 0.14s); }
.game-over.fresh .go-rays { animation: go-fade 1.2s ease-out both, go-spin 60s linear infinite; }
@keyframes go-panel { from { opacity: 0; transform: translateY(40px) scale(0.92); } }
@keyframes go-medal { from { opacity: 0; transform: scale(0.3) rotate(-20deg); } }
@keyframes go-stamp { 0% { opacity: 0; transform: scale(2.4); filter: blur(6px); } 60% { opacity: 1; transform: scale(0.94); filter: blur(0); } 100% { transform: scale(1); } }
@keyframes go-fade { from { opacity: 0; } }
@keyframes go-row { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .game-over *, .game-over { animation-duration: 0.01s !important; animation-delay: 0s !important; } }
body.reduced-motion .game-over *, body.reduced-motion .game-over { animation-duration: 0.01s !important; animation-delay: 0s !important; }
@media (max-height: 620px) { .game-over .summary { margin-top: 56px; padding: 60px 20px 16px; } .go-medal { width: 96px; height: 96px; top: -48px; } .go-row { padding: 4px 10px; } }
@media (prefers-reduced-motion: reduce) { .go-ash { display: none; } .go-rays { animation: none !important; } }
body.reduced-motion .go-ash { display: none; } body.reduced-motion .go-rays { animation: none !important; }

.unlock-overlay.after-results { animation: after-results 0.5s ease-out 2.6s both; }
@keyframes after-results { from { opacity: 0; visibility: hidden; } 1% { visibility: visible; } to { opacity: 1; visibility: visible; } }
body.reduced-motion .unlock-overlay.after-results { animation-delay: 0.6s; }
@media (max-width: 520px) {
  .game-over .summary { margin: 58px 12px 16px; padding: 58px 16px 16px; min-width: 0; }
  .go-medal { width: 96px; height: 96px; top: -48px; }
  .go-title span { font-size: 44px; }
  .go-sub { margin: 4px 0 10px; font-size: 13px; }
  .go-row { padding: 4px 8px; } .go-n { font-size: 17px; } .go-label { font-size: 13px; }
  .go-best, .go-reward { margin-bottom: 8px; padding: 7px 10px; }
  .go-actions button { min-width: 0; flex: 1; }
}

/* ==== Faction picker grouped by deck type ==== */
.faction-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 6px; }
.fg { padding: 10px 10px 12px; border-radius: 14px; background: linear-gradient(180deg, #ffffff0a, #ffffff03); border: 1px solid #ffffff14; }
.fg-head { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #ffffff12; }
.fg-head b { font-family: var(--font-title); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: #f1e3c4; }
.fg-head span { font-size: 12.5px; color: #b9a8c8; }
.title-screen .faction-groups .factions { gap: 10px 10px; }
@media (max-width: 520px) { .faction-groups { grid-template-columns: 1fr; gap: 8px; } }
.fg .factions { flex-wrap: nowrap; gap: 8px !important; }
.title-screen .fg .faction.medallion { width: 82px; }
.title-screen .fg .medal-face { width: 70px; height: 70px; }
.fg .medal-ring { width: 88px; height: 88px; top: -9px; left: 50%; margin-left: -44px; transform: none; }
.fg .faction.medallion .medal-name { font-size: 13px; }
.fg .faction.medallion .medal-name.long { font-size: 10.5px; }

/* ==== Main menu, alive: logo glow and sheen, drifting mist, mouse parallax ==== */
.ts-logo-wrap { position: relative; display: inline-block; }
.title-screen .ts-logo img { animation: tsLogoFloat 6s ease-in-out infinite; filter: drop-shadow(0 6px 18px #000c) drop-shadow(0 0 22px #8a4dff55); }
.ts-logo-wrap::before { content: ''; position: absolute; inset: -6% -4%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse at center, #a970ff55 0%, #8a4dff22 45%, #0000 70%); animation: tsGlowPulse 4s ease-in-out infinite; }
@keyframes tsGlowPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes tsLogoGlow { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
.ts-logo-sheen { position: absolute; inset: 0; pointer-events: none; animation: tsLogoFloat 6s ease-in-out infinite, tsSheen 7s ease-in-out infinite;
  -webkit-mask: url('../../art/ui/logo.png') center / 100% 100% no-repeat; mask: url('../../art/ui/logo.png') center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 47.5%, #ffffff8c 49.5%, #f0dcff66 50.8%, transparent 52.5%) 0 0 / 300% 100% no-repeat; mix-blend-mode: screen; }
@keyframes tsSheen { 0%, 62% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
.mbg-islands { translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -10px); transition: translate 0.6s ease-out; }
.mbg-mist { position: absolute; left: -30%; width: 160%; pointer-events: none;
  translate: calc(var(--px, 0) * -36px) calc(var(--py, 0) * -18px); transition: translate 0.6s ease-out; }
.mbg-mist.m1 { bottom: -8%; height: 45%; opacity: 0.4; animation: mbgMist 70s linear infinite;
  background: radial-gradient(ellipse 22% 40% at 15% 60%, #6a5aa8 0%, transparent 70%), radial-gradient(ellipse 25% 45% at 48% 70%, #4a6aa8 0%, transparent 70%),
    radial-gradient(ellipse 20% 38% at 80% 55%, #7a5ab8 0%, transparent 70%); }
.mbg-mist.m2 { top: 28%; height: 40%; opacity: 0.22; animation: mbgMist 110s linear infinite reverse;
  background: radial-gradient(ellipse 18% 35% at 25% 50%, #8a7ad8 0%, transparent 70%), radial-gradient(ellipse 24% 40% at 70% 45%, #5a8ad8 0%, transparent 70%); }
@keyframes mbgMist { from { transform: translateX(0); } to { transform: translateX(-31.25%); } }
body.reduced-motion .mbg-mist, body.reduced-motion .ts-logo-sheen, body.reduced-motion .title-screen .ts-logo img, body.reduced-motion .ts-logo-wrap::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .mbg-mist, .ts-logo-sheen, .title-screen .ts-logo img { animation: none; } }

/* ==== One button style ====================================================================
   Main actions: forged bronze with a bevel. Secondary (.ghost): dark stone with a bronze edge.
   Toggles that are on (.on) look like main actions; .danger is crimson. They all lift on hover
   and press down when clicked. (The chain of :not()s keeps the special game buttons, End Turn,
   Hero Spells, the painted PLAY button and the like, on their own looks, and outranks the
   older per-screen button colours.) */
button:not(.end-turn):not(.hero-spell):not(.play-art):not(.card-zoom):not(.emote-btn):not(.book-tab):not(.log-tab):not(.qp-option):not(.m-shift):not(.zoom-flip-arrow) {
  font-family: var(--font-title); font-weight: 700; letter-spacing: 0.03em; color: #2a1606; text-shadow: 0 1px 0 #fff4d655;
  background: linear-gradient(180deg, #fbe7ae 0%, #e4b964 38%, #b9822f 72%, #8c5a1d 100%); border: 1px solid #3a2208; border-radius: 10px;
  box-shadow: inset 0 1px 0 #fff8d8, inset 0 -2px 0 #6a3e1088, 0 3px 0 #2a1806, 0 6px 14px #000a;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
button:not(.end-turn):not(.hero-spell):not(.play-art):not(.card-zoom):not(.emote-btn):not(.book-tab):not(.log-tab):not(.qp-option):not(.m-shift):not(.zoom-flip-arrow):hover:not(:disabled) { background: linear-gradient(180deg, #fbe7ae 0%, #e4b964 38%, #b9822f 72%, #8c5a1d 100%); filter: brightness(1.08); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #fff8d8, inset 0 -2px 0 #6a3e1088, 0 5px 0 #2a1806, 0 9px 18px #000a, 0 0 18px #e7b55255; }
button:not(.end-turn):not(.hero-spell):not(.play-art):not(.card-zoom):not(.emote-btn):not(.book-tab):not(.log-tab):not(.qp-option):not(.m-shift):not(.zoom-flip-arrow):active:not(:disabled) { transform: translateY(2px); filter: brightness(0.96); transition-duration: 0.05s;
  box-shadow: inset 0 1px 0 #fff8d8, inset 0 -1px 0 #6a3e1088, 0 1px 0 #2a1806, 0 2px 6px #000a; }
button:not(.end-turn):not(.hero-spell):not(.play-art):not(.card-zoom):not(.emote-btn):not(.book-tab):not(.log-tab):not(.qp-option):not(.m-shift):not(.zoom-flip-arrow):focus-visible { outline: 2px solid #ffe6a0; outline-offset: 3px; }
button:not(.end-turn):not(.hero-spell):not(.play-art):not(.card-zoom):not(.emote-btn):not(.book-tab):not(.log-tab):not(.qp-option):not(.m-shift):not(.zoom-flip-arrow):disabled { opacity: 0.45; filter: grayscale(0.5); cursor: default; }
button:not(.end-turn):not(.hero-spell):not(.play-art):not(.card-zoom):not(.emote-btn):not(.book-tab):not(.log-tab):not(.qp-option):not(.m-shift):not(.zoom-flip-arrow).ghost { color: #ecdcc0; text-shadow: 0 1px 2px #000; background: linear-gradient(180deg, #34303a, #1c1920); border-color: #a8834a99;
  box-shadow: inset 0 1px 0 #ffffff1c, 0 3px 0 #0a080c, 0 6px 12px #0009; }
button:not(.end-turn):not(.hero-spell):not(.play-art):not(.card-zoom):not(.emote-btn):not(.book-tab):not(.log-tab):not(.qp-option):not(.m-shift):not(.zoom-flip-arrow).ghost:hover:not(:disabled) { background: linear-gradient(180deg, #3e3944, #221e27); color: #fff3d6; border-color: #e7b552; filter: none;
  box-shadow: inset 0 1px 0 #ffffff26, 0 5px 0 #0a080c, 0 9px 16px #0009, 0 0 14px #e7b55233; }
button:not(.end-turn):not(.hero-spell):not(.play-art):not(.card-zoom):not(.emote-btn):not(.book-tab):not(.log-tab):not(.qp-option):not(.m-shift):not(.zoom-flip-arrow).ghost:active:not(:disabled) { box-shadow: inset 0 1px 0 #ffffff1c, 0 1px 0 #0a080c, 0 2px 6px #0009; }
button:not(.end-turn):not(.hero-spell):not(.play-art):not(.card-zoom):not(.emote-btn):not(.book-tab):not(.log-tab):not(.qp-option):not(.m-shift):not(.zoom-flip-arrow).on { color: #2a1606; text-shadow: 0 1px 0 #fff4d655; background: linear-gradient(180deg, #fbe7ae 0%, #e4b964 38%, #b9822f 72%, #8c5a1d 100%); border-color: #3a2208;
  box-shadow: inset 0 1px 0 #fff8d8, inset 0 -2px 0 #6a3e1088, 0 2px 0 #2a1806, 0 0 14px #e7b55244; }
button:not(.end-turn):not(.hero-spell):not(.play-art):not(.card-zoom):not(.emote-btn):not(.book-tab):not(.log-tab):not(.qp-option):not(.m-shift):not(.zoom-flip-arrow).danger { color: #fff1ee; text-shadow: 0 1px 2px #3a0006; background: linear-gradient(180deg, #f08a7a 0%, #c9404a 45%, #8a1626 100%); border-color: #3a0a10;
  box-shadow: inset 0 1px 0 #ffd0c8, inset 0 -2px 0 #5a0a1488, 0 3px 0 #2a0408, 0 6px 14px #000a; }
button:not(.end-turn):not(.hero-spell):not(.play-art):not(.card-zoom):not(.emote-btn):not(.book-tab):not(.log-tab):not(.qp-option):not(.m-shift):not(.zoom-flip-arrow).danger:hover:not(:disabled) { background: linear-gradient(180deg, #f08a7a 0%, #c9404a 45%, #8a1626 100%); box-shadow: inset 0 1px 0 #ffd0c8, 0 5px 0 #2a0408, 0 9px 18px #000a, 0 0 18px #ff4a5a44; }
button:not(.end-turn):not(.hero-spell):not(.play-art):not(.card-zoom):not(.emote-btn):not(.book-tab):not(.log-tab):not(.qp-option):not(.m-shift):not(.zoom-flip-arrow) small { font-family: var(--font-body); letter-spacing: 0.04em; }
/* Toggles sit flush, side by side. */
.format-toggle button, .seg button { border-radius: 0; }
.format-toggle button:first-child, .seg button:first-child { border-radius: 10px 0 0 10px; }
.format-toggle button:last-child, .seg button:last-child { border-radius: 0 10px 10px 0; }
/* Line icons in buttons. */
.ui-ico { width: 1.15em; height: 1.15em; vertical-align: -0.22em; margin-right: 0.3em; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.corner-buttons .ui-ico, .card-zoom .ui-ico, .log-head .ui-ico { margin: 0; width: 1.25em; height: 1.25em; }
.coach .ui-ico, .coach b .ui-ico { color: #ffd877; }
@media (prefers-reduced-motion: reduce) { button:not(.end-turn):not(.hero-spell):not(.play-art):not(.card-zoom):not(.emote-btn):not(.book-tab):not(.log-tab):not(.qp-option):not(.m-shift):not(.zoom-flip-arrow) { transition: none; } }
/* In a row of toggles, the ones that are off read as secondary. */
.seg button:not(.end-turn):not(.hero-spell):not(.play-art):not(.card-zoom):not(.emote-btn):not(.book-tab):not(.log-tab):not(.qp-option):not(.m-shift):not(.zoom-flip-arrow):not(.on), .format-toggle button:not(.end-turn):not(.hero-spell):not(.play-art):not(.card-zoom):not(.emote-btn):not(.book-tab):not(.log-tab):not(.qp-option):not(.m-shift):not(.zoom-flip-arrow):not(.on) { color: #ecdcc0; text-shadow: 0 1px 2px #000; background: linear-gradient(180deg, #34303a, #1c1920);
  border-color: #a8834a99; box-shadow: inset 0 1px 0 #ffffff1c, 0 3px 0 #0a080c; }
.seg button:not(.end-turn):not(.hero-spell):not(.play-art):not(.card-zoom):not(.emote-btn):not(.book-tab):not(.log-tab):not(.qp-option):not(.m-shift):not(.zoom-flip-arrow):not(.on):hover:not(:disabled), .format-toggle button:not(.end-turn):not(.hero-spell):not(.play-art):not(.card-zoom):not(.emote-btn):not(.book-tab):not(.log-tab):not(.qp-option):not(.m-shift):not(.zoom-flip-arrow):not(.on):hover:not(:disabled) { background: linear-gradient(180deg, #3e3944, #221e27); color: #fff3d6; filter: none; }
.format-toggle { border: none; overflow: visible; }

/* ==== Loading screen ==== */
.loader-box { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(560px, 90vw); }
.loader-logo { margin-bottom: 0 !important; animation: tsLogoGlow 4s ease-in-out infinite; }
.loader-realms { display: flex; align-items: center; gap: 12px; font-family: var(--font-title); font-weight: 700; color: #f1e3c4; letter-spacing: 0.06em; }
.loader-realms span { display: inline-flex; align-items: center; gap: 8px; }
.loader-realms .crest { width: 34px; height: 34px; }
.loader-plus { font-style: normal; color: #c9a35a; }
.loader-sigil { position: relative; width: 64px; height: 64px; border: none !important; box-shadow: none !important; animation: none !important; }
.loader-sigil i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; }
.loader-sigil i:first-child { border-top-color: #ffd877; border-right-color: #ffd87766; filter: drop-shadow(0 0 6px #ffd877); animation: kw-spin 1.1s linear infinite; }
.loader-sigil i:last-child { inset: 10px; border-bottom-color: #b48cff; border-left-color: #b48cff66; filter: drop-shadow(0 0 6px #b48cff); animation: kw-spin 1.6s linear infinite reverse; }
.loader-tipbox { position: relative; width: 100%; padding: 16px 20px 14px; border-radius: 12px; background: linear-gradient(180deg, #1d1520e6, #120c14e6);
  border: 1px solid #c9a35a55; box-shadow: 0 10px 30px #000a, inset 0 1px 0 #ffffff12; }
.loader-tiphead { position: absolute; left: 50%; top: 0; translate: -50% -50%; padding: 2px 14px; border-radius: 10px; background: linear-gradient(180deg, #e4b964, #8c5a1d);
  color: #2a1606; font-family: var(--font-title); font-weight: 900; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid #3a2208; }
.loader-tip { margin: 4px 0 0; color: #ecdcc0; font-size: 16px; line-height: 1.45; min-height: 2.9em; }
.loader-status { font-family: var(--font-title); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #b9a58a; }
.loader-bar { position: relative; width: 100%; height: 10px; border-radius: 6px; background: #0e0a0c; border: 1px solid #8c6a3a; overflow: visible;
  box-shadow: inset 0 2px 4px #000c, 0 0 0 1px #000; }
.loader-bar i { position: relative; border-radius: 6px; transition: width 0.35s cubic-bezier(.2,.8,.3,1);
  background: linear-gradient(90deg, #8c5a1d, #e4b964 70%, #fff3c4), linear-gradient(90deg, transparent, #ffffff66, transparent) !important;
  background-size: 100% 100%, 40% 100% !important; box-shadow: 0 0 12px #e7b55288; }
.loader-bar i::after { content: ''; position: absolute; right: -6px; top: 50%; width: 14px; height: 14px; translate: 0 -50%; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffe6a0 40%, transparent 70%); filter: drop-shadow(0 0 6px #ffd877); }

/* ==== Screen changes: a veil that lifts off the new screen ==== */
.screen-veil { position: fixed; inset: 0; z-index: 1250; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, #140d18, #050307 75%); }

/* ==== Character animation ==========================================================
   Idle: every minion on the board breathes (the separate translate / rotate / scale
   properties, so it never fights the effects that move the minion itself), each faction
   in its own way, each minion on its own beat (--idle). (The art used to drift inside its frame too, but
   moving a background image repaints it every frame, so that was dropped to keep the board smooth.) */
.arena .minion { animation: idle-breathe 4.2s ease-in-out var(--idle, 0s) infinite; }
@keyframes idle-breathe { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 0 -2.5px; scale: 1.012; } }
/* Ghosts float higher and flicker. */
.arena .minion.f-ghosts { animation: idle-float 5s ease-in-out var(--idle, 0s) infinite; }
.arena .minion.f-ghosts .m-art { animation: idle-flicker 3.7s steps(1) var(--idle, 0s) infinite; }
@keyframes idle-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes idle-flicker { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: 0.55; } 50% { opacity: 0.9; } 51% { opacity: 0.6; } 53% { opacity: 1; } }
/* Robots: a slow power pulse through the art. */
.arena .minion.f-robots .m-art { animation: idle-power 2.6s ease-in-out var(--idle, 0s) infinite; }
@keyframes idle-power { 0%, 100% { filter: none; } 50% { filter: brightness(1.12) saturate(1.15); } }
/* Plants sway from the roots. */
.arena .minion.f-plants, .arena .minion.f-fungus { transform-origin: 50% 100%; animation: idle-sway 5.5s ease-in-out var(--idle, 0s) infinite; }
@keyframes idle-sway { 0%, 100% { rotate: -1.4deg; } 50% { rotate: 1.4deg; } }
/* Sharks bob as if under water. */
.arena .minion.f-sharks { animation: idle-swim 3.6s ease-in-out var(--idle, 0s) infinite; }
@keyframes idle-swim { 0%, 100% { translate: 0 0; rotate: -1deg; } 25% { translate: 2px -3px; } 50% { translate: 0 -4px; rotate: 1deg; } 75% { translate: -2px -2px; } }
/* Dragons and Demons breathe heavy, with a glow on the in-breath. */
.arena .minion.f-dragons .m-art, .arena .minion.f-demons .m-art { animation: idle-ember 4.2s ease-in-out var(--idle, 0s) infinite; }
@keyframes idle-ember { 0%, 100% { filter: none; } 50% { filter: brightness(1.12) saturate(1.2) sepia(0.15); } }
/* Asleep: slower and lower. */
.arena .minion.asleep { animation-duration: 7s !important; }
/* Valid targets keep their pulse over any idle motion. */
.arena .minion.targetable, .arena .hero-portrait.targetable { animation: target-pulse 0.7s infinite alternate !important; }
/* In the crosshairs: the target braces, shrinking back a touch with a red rim. */
.arena .minion.aim-over, .arena .hero-portrait.aim-over { scale: 0.95; filter: drop-shadow(0 0 10px #ff3a3aaa); transition: scale 0.15s, filter 0.15s; }
.arena .minion.aim-over { animation-play-state: paused; }

/* Heroes: the portrait breathes; below 10 Health it sags, darkens and breathes heavily. */
.arena .hero-portrait .portrait-img { animation: hero-breathe 5s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes hero-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.02; } }
.arena .hero-portrait.weary .portrait-img { animation: hero-weary 2.4s ease-in-out infinite; filter: saturate(0.6) brightness(0.85); }
@keyframes hero-weary { 0%, 100% { scale: 1; translate: 0 2px; rotate: -1deg; } 45% { scale: 1.03; translate: 0 0; rotate: 0deg; } }

body.reduced-motion .arena .minion, body.reduced-motion .arena .minion .m-art, body.reduced-motion .arena .hero-portrait .portrait-img { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .arena .minion, .arena .minion .m-art, .arena .hero-portrait .portrait-img { animation: none !important; } }

/* ==== Ready to attack: your minions that can attack lean forward with a pulse; sleepers slump ==== */
.arena .minion.can-attack { animation: ready-lean 1.6s ease-in-out var(--idle, 0s) infinite; }
@keyframes ready-lean { 0%, 100% { translate: 0 -3px; scale: 1.03; } 50% { translate: 0 -7px; scale: 1.055; } }
body:not(.classic-cards) .arena .minion.shardm.can-attack .sm-glow { filter: brightness(1.3) drop-shadow(0 0 4px #57e07a); animation: ready-glow 1.6s ease-in-out var(--idle, 0s) infinite; }
@keyframes ready-glow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.arena .minion.asleep { animation: asleep-slump 6s ease-in-out var(--idle, 0s) infinite !important; }
@keyframes asleep-slump { 0%, 100% { translate: 0 3px; rotate: -2deg; scale: 0.985; } 50% { translate: 0 4px; rotate: -2.6deg; scale: 0.975; } }
.arena .minion.asleep .m-art { filter: brightness(0.8) saturate(0.75); }
.arena .minion.targetable { animation: target-pulse 0.7s infinite alternate !important; }
body.reduced-motion .arena .minion.can-attack, body.reduced-motion .arena .minion.asleep { animation: none !important; }

/* ==== Attack styles: fire cone, laser, vine, bite ==== */
.fx-fire-cone { position: fixed; transform-origin: 0 50%; pointer-events: none; z-index: 7; mix-blend-mode: screen; filter: blur(2px);
  background: radial-gradient(ellipse 60% 50% at 0% 50%, #fff6c0, transparent 70%),
    linear-gradient(90deg, #fff2a0 0%, #ffb03a 25%, #ff5a1a 60%, #a01a0a88 100%); }
.fx-laser { position: fixed; height: 8px; margin-top: -4px; transform-origin: 0 50%; pointer-events: none; z-index: 7; border-radius: 4px;
  background: linear-gradient(180deg, transparent, #9ad8ff 25%, #fff 50%, #9ad8ff 75%, transparent); box-shadow: 0 0 12px #4ab0ff, 0 0 26px #4ab0ff; }
.fx-vine { position: fixed; inset: 0; pointer-events: none; z-index: 7; overflow: visible; filter: drop-shadow(0 2px 3px #0008); }
.fx-bite { position: fixed; pointer-events: none; z-index: 8; }
.fx-bite .jaw { position: absolute; left: 0; right: 0; height: 52%; }
.fx-bite .jaw.top { top: 0; } .fx-bite .jaw.bot { bottom: 0; }

/* ==== Hand cards tilt toward the pointer, with a glare where the light catches ==== */
.arena .my-hand .card > .big-card { transition: transform 0.12s ease-out; transform-style: preserve-3d; }
.arena .my-hand .card:hover:not(.drag-src) > .big-card { transform: perspective(700px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)); }
.arena .my-hand .card:hover:not(.drag-src) > .big-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 30;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 30%), #ffffff40, transparent 45%); mix-blend-mode: screen; }

/* ==== Spell cast flourish ==== */
.fx-cast { position: fixed; left: 50%; top: 46%; z-index: 9; pointer-events: none; transform-style: preserve-3d; filter: drop-shadow(0 20px 30px #000c); }

/* ==== Living portraits: the figure layer breathes and drifts against the scene ==== */
.hero-portrait .portrait-front { position: absolute !important; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask: radial-gradient(ellipse 34% 46% at 50% 46%, #000 55%, transparent 100%); mask: radial-gradient(ellipse 34% 46% at 50% 46%, #000 55%, transparent 100%); }
.arena .hero-portrait .portrait-img:not(.portrait-front) { animation: portrait-scene 9s ease-in-out infinite; }
.arena .hero-portrait .portrait-front { animation: portrait-figure 5s ease-in-out infinite; transform-origin: 50% 85%; }
@keyframes portrait-scene { 0%, 100% { translate: 1.5px 0; scale: 1.04; } 50% { translate: -1.5px 1px; scale: 1.05; } }
@keyframes portrait-figure { 0%, 100% { translate: -1px 0; scale: 1.04; } 50% { translate: 1px -1.5px; scale: 1.065; } }
.arena .hero-portrait.weary .portrait-front { animation: hero-weary 2.4s ease-in-out infinite; }
body.reduced-motion .arena .hero-portrait .portrait-img { animation: none !important; }
.minion .infect-mark { display: inline-grid; place-items: center; font-size: 1.5em; filter: drop-shadow(0 0 4px #ff2a2a) drop-shadow(0 0 2px #000); }

/* ---- App shell: the game is a fixed screen, not a web page ----
   The page itself never scrolls, bounces, zooms or pulls to refresh; menus scroll inside #app.
   No text selection, long-press menus or tap flashes (except where you type or copy a room code). */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
* { -webkit-tap-highlight-color: transparent; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input, textarea, select, .room-code { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
#app { position: fixed; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.in-game #app { overflow: hidden; }
/* Touch screens: no visible scrollbars, like a game. Mouse: a slim bronze one. */
@media (pointer: coarse) { #app, #app * { scrollbar-width: none; } #app::-webkit-scrollbar, #app *::-webkit-scrollbar { display: none; } }
@media (pointer: fine) {
  #app { scrollbar-width: thin; scrollbar-color: #8a6a3a #0000; }
  #app::-webkit-scrollbar { width: 10px; } #app::-webkit-scrollbar-track { background: transparent; }
  #app::-webkit-scrollbar-thumb { background: linear-gradient(#b08a4a, #6a4a22); border-radius: 6px; border: 2px solid #0000; background-clip: padding-box; }
}

/* ---- Boot screen (index.html #boot): the logo breathes, the bar glows, then it all fades away ---- */
#boot .boot-logo { animation: boot-breathe 2.6s ease-in-out infinite; filter: drop-shadow(0 0 24px #9a5cff55); }
#boot .boot-bar i { transition: width .35s ease-out; box-shadow: 0 0 12px #e4b964; }
#boot .boot-status { animation: boot-fade 1.6s ease-in-out infinite alternate; }
#boot.done { opacity: 0; transform: scale(1.04); transition: opacity .5s ease, transform .6s ease; pointer-events: none; }
@keyframes boot-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes boot-fade { from { opacity: .55; } to { opacity: 1; } }
body.reduced-motion #boot .boot-logo, body.reduced-motion #boot .boot-status { animation: none; }

/* ---- Phones held sideways (short, wide screens): the menus are scaled to fit, like a game's
   screens, instead of being laid out for a tall desktop window (main.js sets --ui-zoom). ---- */
body:not(.in-game) #app > * { zoom: var(--ui-zoom, 1); }
/* In a match on a short screen, the corner buttons sit in two small columns below the log tab. */
@media (orientation: landscape) and (max-height: 520px) {
  .arena:not(.portrait) .corner-buttons { display: grid; grid-template-columns: repeat(2, 30px); gap: 4px; }
  .arena:not(.portrait) .corner-buttons button { width: 30px; height: 30px; font-size: 14px; border-radius: 8px; }
}

/* ---- New-player path (journey.js): progress line, sealed realms, milestone pop-ups ---- */
.journey-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 4px 0 14px;
  padding: 10px 14px; border-radius: 10px; background: #2a1a3a99; border: 1px solid #8f7bd855; color: #e6dcff; font-size: 15px; }
.journey-line button { font-size: 13px; padding: 6px 12px; }
.medallion.sealed { cursor: default; filter: grayscale(1) brightness(0.45); opacity: 0.7; }
.medallion.sealed .medal-face { position: relative; }
.medallion.sealed .medal-lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; font-style: normal; filter: grayscale(0) brightness(2); }
.milestone-overlay { z-index: 80; }
.milestone-panel { position: relative; width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box;
  padding: 26px 28px 22px; text-align: center; border-radius: 18px; color: #f3e6c8;
  background: radial-gradient(ellipse at 50% 0%, #3a2450, #140c18 70%); border: 2px solid #c9a35a; box-shadow: 0 0 0 4px #0008, 0 20px 60px #000c, 0 0 40px #9a5cff44; }
.milestone-panel h2 { font-family: var(--font-title); font-size: 30px; margin: 4px 0 2px; color: #ffe7a8; text-shadow: 0 2px 6px #000; }
.milestone-panel .ui-divider { width: 70%; margin: 4px auto 10px; display: block; }
.milestone-panel p { margin: 8px 0; line-height: 1.45; }
.milestone-panel .ms-points { text-align: left; margin: 6px auto 8px; max-width: 480px; line-height: 1.5; }
.milestone-panel button { margin-top: 12px; }
.ms-fusion-title { background: linear-gradient(90deg, #ff6ad5, #ffd36a, #6ae4ff); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.ms-fusion-burst { position: absolute; inset: -20% -20% auto; height: 70%; background: radial-gradient(circle, #ffd36a55, transparent 60%); pointer-events: none; animation: ms-pulse 2.4s ease-in-out infinite; }
@keyframes ms-pulse { 0%, 100% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
.ms-fusion-demo, .ms-realms { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.ms-realm { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 110px; }
.ms-realm img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid #c9a35a; box-shadow: 0 0 16px #000a; }
.ms-realm b { font-family: var(--font-title); font-size: 15px; }
.ms-realm small { font-size: 11px; color: #c9b896; }
.ms-plus { font-family: var(--font-title); font-size: 30px; color: #ffd36a; }
.ms-card { width: 140px; font-size: 7px; }

/* ---- The Fusion cinematic ---- */
.fx-fusion { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.fx-fusion .ff-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #2a1040cc, #050208ee 70%); }
.fx-fusion .ff-crest { position: absolute; top: 50%; width: min(26vh, 200px); aspect-ratio: 0.72; border-radius: 14px; background: #241430 center / cover;
  box-shadow: 0 0 0 3px #c9a35a, 0 0 40px #ffd36a88; display: flex; align-items: flex-end; justify-content: center; }
.fx-fusion .ff-crest.left { left: 38%; } .fx-fusion .ff-crest.right { left: 62%; }
.fx-fusion .ff-crest b { font-family: var(--font-title); font-size: 14px; color: #fff3d0; text-shadow: 0 2px 4px #000; margin-bottom: 8px; }
.fx-fusion .ff-burst { position: absolute; left: 50%; top: 50%; width: 60vh; height: 60vh; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0%, #ffd36a 25%, #ff6ad5 45%, transparent 70%); }
.fx-fusion .ff-card { position: absolute; left: 50%; top: 50%; width: min(34vh, 260px); transform: translate(-50%, -50%); opacity: 0;
  filter: drop-shadow(0 0 24px #ffd36aaa); }
.fx-fusion .ff-title { position: absolute; left: 50%; top: 5vh; transform: translateX(-50%); text-align: center; opacity: 0; white-space: nowrap;
  font-family: var(--font-title); font-weight: 900; font-size: min(5.5vh, 44px); color: #ffe7a8; text-shadow: 0 0 18px #ff6ad5, 0 3px 6px #000; }
.fx-fusion .ff-title small { display: block; font-size: 0.42em; letter-spacing: 0.3em; text-transform: uppercase; color: #e6dcff; }
.fx-fusion .ff-title em { display: block; font-style: normal; font-weight: 600; font-size: 0.45em; letter-spacing: 0.12em; color: #ffd36a; margin-top: 2px; }
.fx-fusion.first .ff-card { width: min(40vh, 300px); }
.fx-fusion .ff-title { top: max(2vh, 8px); }
.fx-fusion .ff-card .big-card { --h: min(52vh, 420px); }
.fx-fusion.first .ff-card .big-card { --h: min(58vh, 460px); }
.ms-card .big-card { --h: 196px; }

/* ---- First launch: choose your first three realms ---- */
.first-pick-overlay { z-index: 85; background: radial-gradient(ellipse at 50% 30%, #2a1838ee, #070406f6 75%); }
.first-pick { width: min(980px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; box-sizing: border-box; padding: 18px 18px 16px; text-align: center; color: #f3e6c8; }
.first-pick h2 { font-family: var(--font-title); font-size: 34px; margin: 0; color: #ffe7a8; text-shadow: 0 0 18px #9a5cff88, 0 3px 6px #000; }
.first-pick > .sub { margin: 6px 0 14px; font-size: 16px; }
.fp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.first-pick .fp-realm { box-sizing: border-box; cursor: pointer; user-select: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 10px 14px; border-radius: 14px; background: linear-gradient(#2a1c2ecc, #160d18e6); border: 2px solid #6a4a2a; transition: transform .15s, border-color .15s, box-shadow .15s; }
.first-pick .fp-realm:hover { transform: translateY(-3px); border-color: #c9a35a; }
.first-pick .fp-realm.on { border-color: #ffd36a; box-shadow: 0 0 0 2px #ffd36a55, 0 0 26px #ffd36a66; background: linear-gradient(#3a2a1ecc, #1e140ce6); }
.fp-art { position: relative; width: 96px; height: 96px; }
.fp-art img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #c9a35a; box-shadow: 0 0 14px #000a; }
.fp-check { position: absolute; right: -4px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900;
  background: #ffd36a; color: #2a1408; box-shadow: 0 2px 6px #000a; }
.fp-realm b { font-family: var(--font-title); font-size: 19px; color: #fff0c8; }
.fp-realm small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #c9b896; }
.fp-sum { font-size: 14px; line-height: 1.35; color: #e8dcc4; }
.fp-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 16px; }
@media (max-width: 640px) { .fp-grid { grid-template-columns: repeat(2, 1fr); } .first-pick h2 { font-size: 26px; } }
@media (orientation: landscape) and (max-height: 520px) {
  .first-pick { zoom: 0.62; max-height: none; }
}

/* Small grey notes and descriptions on the menus: bigger, and boosted further on phones held
   sideways where the menus are scaled down (--note-boost from main.js). */
body:not(.in-game) #app :is(.sub, .ts-soon, .deck-line, .fg-head span, .journey-line span, .fp-sum, .zoom-sub, .book-head .sub, .ts-tag) {
  font-size: calc(1.08em * var(--note-boost, 1)); line-height: 1.4;
}
.milestone-panel > p, .milestone-panel > .sub { display: block; width: 100%; }
.ms-realms { width: 100%; }

/* ---- Hero fusion (match start): two heroes collide and fuse into the pair's hero ---- */
/* No z-index: the shockwaves and particles fx.js adds to the fx layer afterwards paint on top. */
.hero-fuse { position: fixed; inset: 0; pointer-events: auto; overflow: hidden; --face: min(34vh, 27vw, 250px); --gap: min(30vw, 36vh, 300px); }
.hero-fuse .hf-veil { position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--ca) 22%, transparent), transparent 55%),
    radial-gradient(ellipse at 70% 50%, color-mix(in srgb, var(--cb) 22%, transparent), transparent 55%),
    radial-gradient(ellipse at center, #1a0c22, #030104 75%); }
.hero-fuse .hf-rays { position: absolute; left: 50%; top: 46%; width: 190vmax; height: 190vmax; opacity: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--ca) 30%, transparent) 0 5deg, transparent 5deg 15deg, color-mix(in srgb, var(--cb) 30%, transparent) 15deg 20deg, transparent 20deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 4%, transparent 42%); mask: radial-gradient(circle, #000 4%, transparent 42%); }
@keyframes hf-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
.hero-fuse .hf-core { position: absolute; left: 50%; top: 46%; width: calc(var(--face) * 0.9); aspect-ratio: 1; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 14%, color-mix(in srgb, var(--ca) 60%, #fff) 26%, color-mix(in srgb, var(--cb) 55%, transparent) 46%, transparent 70%);
  filter: blur(2px); mix-blend-mode: screen; }
.hero-fuse.charging .hf-core { animation: hf-throb 0.18s ease-in-out infinite alternate; }
@keyframes hf-throb { to { filter: blur(5px) brightness(1.4); } }
.hero-fuse .hf-arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hero-fuse .hf-arcs polyline { fill: none; stroke-width: 3; stroke-linejoin: round; mix-blend-mode: screen; }
.hero-fuse .hf-arcs .a { stroke: #fff; filter: drop-shadow(0 0 6px var(--ca)) drop-shadow(0 0 14px var(--ca)); }
.hero-fuse .hf-arcs .b { stroke: color-mix(in srgb, var(--cb) 70%, #fff); stroke-width: 2; filter: drop-shadow(0 0 10px var(--cb)); }
.hero-fuse .hf-arcs .c { stroke: color-mix(in srgb, var(--ca) 70%, #fff); stroke-width: 1.5; opacity: 0.7; }
.hero-fuse .hf-hero { position: absolute; left: 50%; top: 46%; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; }
.hero-fuse .hf-hero.a { --c: var(--ca); } .hero-fuse .hf-hero.b { --c: var(--cb); }
.hero-fuse .hf-face { position: relative; display: block; width: var(--face); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid #e7b552;
  box-shadow: 0 0 0 3px #000, 0 0 18px 4px var(--c, #ffd76a); }
/* The wide glow is a soft gradient disc behind the face (huge box-shadows can show tile edges on phones). */
.hero-fuse .hf-hero::before, .hero-fuse .hf-result::before { content: ''; position: absolute; left: 50%; top: calc(var(--face) / 2); width: calc(var(--face) * 1.9);
  aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 75%, transparent) 30%, color-mix(in srgb, var(--c) 25%, transparent) 50%, transparent 70%); }
.hero-fuse .hf-result::before { top: 50%; width: 190%; background: radial-gradient(circle, color-mix(in srgb, var(--ca) 70%, transparent) 30%, color-mix(in srgb, var(--cb) 30%, transparent) 52%, transparent 70%); }
.hero-fuse.charging .hf-hero::before { animation: hf-pulse 0.16s ease-in-out infinite alternate; }
@keyframes hf-pulse { to { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } }
.hero-fuse .hf-face img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.hero-fuse .hf-hero b { font-family: var(--font-title); font-weight: 900; font-size: clamp(16px, 3.4vh, 26px); color: #fff3d0; letter-spacing: 0.08em;
  text-shadow: 0 0 12px var(--c), 0 2px 4px #000; }
/* Absolute so its width can't shift the hero off its circle's centre while it moves. */
.hero-fuse .hf-hero b { position: absolute; top: calc(100% + 8px); white-space: nowrap; }
.hero-fuse.charging .hf-hero .hf-face { animation: hf-charge 0.12s steps(2) infinite; }
@keyframes hf-charge { to { box-shadow: 0 0 0 3px #000, 0 0 26px 8px var(--c); filter: brightness(1.35) contrast(1.1); } }
.hero-fuse .hf-spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; }
.hero-fuse .hf-result { position: absolute; left: 50%; top: 46%; opacity: 0; --c: #ffd76a; }
.hero-fuse .hf-result .hf-face { width: min(46vh, 36vw, 330px); border-width: 5px; border-color: #ffd76a;
  box-shadow: 0 0 0 3px #000, 0 0 22px 6px var(--ca); }
.hero-fuse .hf-ring { position: absolute; inset: -16px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--ca) 80%, #fff); opacity: 0.8;
  animation: hf-spin 9s linear infinite; }
.hero-fuse .hf-ring.two { inset: -30px; border: 3px dotted color-mix(in srgb, var(--cb) 80%, #fff); animation-duration: 13s; animation-direction: reverse; opacity: 0.6; }
.hero-fuse.revealed .hf-result .hf-face { animation: hf-glow 1.6s ease-in-out infinite alternate; }
@keyframes hf-glow { to { box-shadow: 0 0 0 3px #000, 0 0 30px 9px var(--cb); } }
.hero-fuse .hf-title { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); opacity: 0; text-align: center; white-space: nowrap;
  font-family: var(--font-title); font-weight: 900; font-size: clamp(24px, 6vh, 50px); color: #fff3d0; text-shadow: 0 0 18px #ffb040aa, 0 3px 6px #000; }
.hero-fuse .hf-title small { display: block; font-size: 0.4em; letter-spacing: 0.32em; text-transform: uppercase; color: #f1e3c0; margin-bottom: 2px; }
.hero-fuse .hf-title small i { font-style: normal; color: #ffd76a; }
.hero-fuse .hf-title span { background: linear-gradient(90deg, var(--ca), #fff3d0 35%, #ffd76a 65%, var(--cb)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 4px #000); }
.hero-fuse .hf-title em { display: block; font-style: normal; font-weight: 600; font-size: 0.42em; letter-spacing: 0.14em; color: #ffd36a; margin-top: 2px; }
.hero-fuse .hf-white { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, #fff, #fffbe8 40%, #ffe9b8); opacity: 0; pointer-events: none; }
.hero-fuse .hf-skip { position: absolute; right: 18px; bottom: 12px; margin: 0; font-size: 13px; color: #f1e3c088; letter-spacing: 0.08em; }
@media (max-height: 520px) {
  .hero-fuse { --face: min(30vh, 24vw, 200px); }
  .hero-fuse .hf-hero, .hero-fuse .hf-core, .hero-fuse .hf-result, .hero-fuse .hf-rays { top: 42%; }
  .hero-fuse .hf-result .hf-face { width: min(44vh, 34vw); }
  .hero-fuse .hf-title { bottom: 2.5vh; font-size: clamp(20px, 6.5vh, 34px); }
}

/* ---- Two-faction decks: half-and-half card backs ----
   The first faction's back, with the second's over the right half past a slanted gold seam
   (the seam runs from 56% along the top to 44% along the bottom; 95deg follows it on a 0.72 card). */
.opp-hand[style*="--back2"] .card.back::after, .deck-pile[style*="--back2"] .pile span::after, .df-back[style*="--back2"]::after, .fx-opp-draw[style*="--back2"]::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--back2) center / cover no-repeat; clip-path: polygon(56% 0, 100% 0, 100% 100%, 44% 100%); }
.opp-hand[style*="--back2"] .card.back::before, .deck-pile[style*="--back2"] .pile span::before, .df-back[style*="--back2"]::before, .fx-opp-draw[style*="--back2"]::before {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(95deg, transparent calc(50% - 2px), #c8902a calc(50% - 1.2px), #fff3c4 50%, #c8902a calc(50% + 1.2px), transparent calc(50% + 2px));
  filter: drop-shadow(0 0 2px #ffb040cc); }

/* A pair's fused hero before you've played it: a blacked-out mystery. */
.vs-hero.mystery .vs-mystery { width: 120px; height: 120px; border-radius: 16px; border: 3px solid #6a5530; display: grid; place-items: center; font-style: normal;
  font-family: var(--font-title); font-weight: 900; font-size: 64px; color: #e7b552; text-shadow: 0 0 18px #ffb040aa, 0 3px 6px #000;
  background: radial-gradient(circle at 50% 40%, #2a2030, #07050a 70%); box-shadow: 0 0 0 2px #000, inset 0 0 24px #000, 0 6px 14px #000c;
  animation: vs-mystery 2.4s ease-in-out infinite; }
@keyframes vs-mystery { 50% { color: #ffe3a0; text-shadow: 0 0 30px #ffb040, 0 3px 6px #000; box-shadow: 0 0 0 2px #000, inset 0 0 24px #000, 0 0 22px #ffb04055, 0 6px 14px #000c; } }
.vs-hero.mystery small { font-size: 12px; color: #d9c8a0; letter-spacing: 0.08em; margin-top: -2px; }
@media (max-width: 700px) { .vs-hero.mystery .vs-mystery { width: 84px; height: 84px; font-size: 44px; } }

/* ==== Living fused heroes (shared.js livingPortraitHTML) ====
   The scene drifts slowly, the figure (a soft cut-out of the middle) breathes in front of it,
   and a glint of light sweeps across every few seconds. */
.living { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; isolation: isolate; }
.living > img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; object-fit: cover; object-position: center 22%; display: block; }
.living > .lv-scene { animation: lv-scene 11s ease-in-out infinite; }
.living > .lv-figure { -webkit-mask: radial-gradient(ellipse 36% 48% at 50% 46%, #000 55%, transparent 100%); mask: radial-gradient(ellipse 36% 48% at 50% 46%, #000 55%, transparent 100%);
  transform-origin: 50% 85%; animation: lv-figure 5.5s ease-in-out infinite; }
@keyframes lv-scene { 0%, 100% { transform: scale(1.06) translate(1.2%, 0.4%); } 50% { transform: scale(1.1) translate(-1.2%, -0.6%); } }
@keyframes lv-figure { 0%, 100% { transform: scale(1.06) translate(-0.6%, 0) rotate(-0.4deg); } 50% { transform: scale(1.1) translate(0.6%, -1.2%) rotate(0.4deg); } }
.living > .lv-glint, .hero-portrait .portrait-glint { position: absolute; inset: -10%; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 38%, #fff6d855 47%, #ffffffaa 50%, #fff6d855 53%, transparent 62%);
  transform: translateX(-120%); animation: lv-glint 7s ease-in-out infinite 1.2s; }
@keyframes lv-glint { 0%, 70% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } }
.vs-hero .living { width: 120px; height: 120px; border-radius: 16px; border: 3px solid #e7b552; box-shadow: 0 0 0 2px #000, 0 0 22px #ffb04066, 0 10px 20px #000c; }
@media (max-width: 700px) { .vs-hero .living { width: 84px; height: 84px; } }
.go-medal .living { border-radius: 50%; border: 3px solid #1a1008; }
/* On the board: the fused hero's layers move a touch more than a single hero's, with the glint. */
.hero-portrait .portrait-glint { border-radius: inherit; inset: 0; overflow: hidden; }
.arena .hero-portrait .portrait-img.fused:not(.portrait-front) { animation: lv-scene 11s ease-in-out infinite; }
.arena .hero-portrait .portrait-front.fused { animation: lv-figure 5.5s ease-in-out infinite; }
body.reduced-motion .living > *, body.reduced-motion .hero-portrait .portrait-glint { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .living > *, .hero-portrait .portrait-glint { animation: none !important; } }

/* ---- Sand Sharks: a Burrowed minion sinks into a sand mound (it has Stealth until it Surfaces) ---- */
.minion.burrowed .m-art { filter: sepia(0.7) saturate(0.85) brightness(0.6) contrast(1.05); }
.minion.burrowed .m-fx { overflow: visible; }
.minion.burrowed .m-sand { display: block; z-index: 4; inset: auto -12% -8% -12%; height: 58%;
  border-radius: 58% 42% 14% 14% / 78% 66% 14% 14%;
  background:
    radial-gradient(ellipse 34% 20% at 30% 26%, #fbe6b4cc, #0000 72%),
    radial-gradient(ellipse 22% 14% at 74% 40%, #f6dca099, #0000 72%),
    repeating-radial-gradient(ellipse 140% 90% at 40% 130%, #0000 0 9%, #7d55263d 10% 11.5%, #0000 12.5% 18%),
    radial-gradient(ellipse 90% 110% at 45% 100%, #dcb36a, #c0904a 55%, #8d6330);
  box-shadow: inset 0 3px 6px #fff4, inset 0 -8px 12px #0006, 0 -3px 8px #000a;
  animation: sand-drift 3.2s ease-in-out infinite alternate; }
@keyframes sand-drift { from { transform: translateY(0) scaleX(1); } to { transform: translateY(-3%) scaleX(1.03); } }
.b-surface { filter: drop-shadow(0 0 3px #e2bd73); }
body.reduced-motion .minion.burrowed .m-sand { animation: none; }

/* ---- Playing a bot while queued: the search keeps going (main.js syncWaitBanner) ---- */
.wait-banner { position: fixed; top: max(6px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 950;
  display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 12px; border-radius: 999px;
  background: #140c1ee6; border: 1px solid #e7b55288; box-shadow: 0 4px 14px #000b; color: #f1e3c0;
  font-size: 13px; letter-spacing: 0.02em; white-space: nowrap; pointer-events: auto; }
.wait-banner b { color: #ffd76a; font-variant-numeric: tabular-nums; margin-left: 4px; }
.wait-banner button { padding: 3px 10px; font-size: 12px; }
.wait-banner .wb-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #e7b55244; border-top-color: #ffd76a; animation: wb-spin 0.9s linear infinite; }
@keyframes wb-spin { to { transform: rotate(360deg); } }

/* ---- Online screen: change format, realms and deck before you queue (main.js lobbySetupHTML) ---- */
.lobby-setup { width: min(940px, 94%); margin: 0 auto 12px; padding: 12px 14px; border-radius: 18px; background: #0a0712c4;
  border: 1px solid #e7b55244; box-shadow: 0 8px 24px #0009; display: flex; flex-direction: column; gap: 10px; }
.lobby-setup .ls-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.lobby-setup .lobby-deck { background: transparent; padding: 0; }
.lobby-setup .format-toggle { margin: 0; }
.lobby-setup .ls-realms { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 6px; }
.ls-realm { width: 64px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; user-select: none; }
.ls-realm .ls-face { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #1a1220;
  border: 2px solid #6a5530; box-shadow: 0 3px 8px #000a; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.ls-realm .ls-face img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: saturate(0.75) brightness(0.8); transition: filter 0.15s; }
.ls-realm small { font-size: 10.5px; line-height: 1.1; color: #c9b896; text-align: center; hyphens: manual; }
.ls-realm:hover .ls-face { transform: translateY(-2px); border-color: #e7b552; }
.ls-realm.on .ls-face { border-color: #ffd76a; box-shadow: 0 0 0 2px #000, 0 0 14px var(--fc, #ffd25a); transform: scale(1.08); }
.ls-realm.on .ls-face img { filter: none; }
.ls-realm.on small { color: #ffe3a0; font-weight: 700; }
.lobby-setup .deck-line { margin-top: 0; background: #2a1a10cc; border: 2px solid #6a4a2a; }
/* The deck line is already a boosted note: its inner note mustn't be boosted again. */
body:not(.in-game) #app .lobby-setup .deck-line .sub { font-size: 1em; }

/* ---- Aliens (Hive Brood): Implanted mark and Chestburster countdown ---- */
.minion .implant-mark { display: inline-grid; place-items: center; font-size: 1.4em; filter: drop-shadow(0 0 4px #5aff8a) drop-shadow(0 0 2px #000); animation: implant-pulse 1.6s ease-in-out infinite; }
@keyframes implant-pulse { 50% { transform: scale(1.18); filter: drop-shadow(0 0 8px #5aff8a) drop-shadow(0 0 2px #000); } }
.minion .evolve-mark { display: inline-grid; place-items: center; padding: 0.05em 0.4em; border-radius: 999px; font-size: 1.2em; font-weight: 800;
  color: #d8ffe0; background: #0b2414e6; border: 1px solid #5aff8a99; box-shadow: 0 0 6px #5aff8a66; }
body.reduced-motion .minion .implant-mark { animation: none; }

/* ==== First launch: sign in or create an account ==== */
.title-screen.signin { gap: 14px; padding-top: 22px; }
.signin .ts-logo img { width: min(520px, 84vw); }
.signin-panel { width: min(100%, 440px); padding: 6px 18px 16px; }
.signin-panel .acct-form { background: transparent; border: none; margin: 4px auto 6px; padding: 8px 4px; }
.signin-panel .acct-form .text-input { width: 100%; max-width: 300px; }
.signin-panel .acct-tabs button { white-space: nowrap; }
.signin-why { margin: 2px 0 10px; font-size: 13px; opacity: 0.85; }
.acct-remember { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: #ecdcc0; cursor: pointer; user-select: none; }
.acct-remember input { width: 18px; height: 18px; accent-color: #e7b552; cursor: pointer; margin: 0; }
.lobby .acct-form .acct-remember { flex-basis: 100%; justify-content: center; }
@media (max-height: 520px) { .title-screen.signin { padding-top: 8px; gap: 6px; } .signin .ts-logo img { width: min(340px, 60vw); } .signin-why { display: none; } }
.signin .text-input { font-size: 17px; padding: 9px 12px; border-radius: 10px; border: 1px solid #c9a35a77; background: #120c08cc; color: #f3e2b8; box-sizing: border-box; }
.signin .text-input:focus { outline: 2px solid #f3d27a; }
body:not(.in-game) #app .signin .acct-form .sub, body:not(.in-game) #app .signin .signin-why { font-size: 13px; line-height: 1.35; }

/* ==== Weakened by enemy Radiation: unmistakable green haze, pulsing rim and a -N tag ==== */
.minion.rad-hit, .hero-portrait.rad-hit { position: relative; }
.rad-haze { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: 14px;
  background: radial-gradient(ellipse at 50% 60%, #7dff4a40 0%, #3fd42a26 45%, transparent 75%);
  box-shadow: inset 0 0 18px #7dff4a99, 0 0 14px #7dff4a88; animation: radHaze 1.8s ease-in-out infinite; }
.hero-portrait .rad-haze { border-radius: 50%; }
@keyframes radHaze { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.rad-hit-badge { position: absolute; z-index: 8; bottom: 18%; right: -12%; padding: 0.05em 0.4em; border-radius: 999px; white-space: nowrap; pointer-events: auto;
  font-weight: 900; font-size: 0.95em; color: #0d1a05; background: linear-gradient(180deg, #c8ff6a, #5ed62a); border: 2px solid #1b3a08;
  box-shadow: 0 0 10px #7dff4acc, 0 2px 4px #000a; }
.hero-portrait .rad-hit-badge { bottom: 30%; right: -8%; font-size: calc(var(--hero, 100px) * 0.15); }
body.reduced-motion .rad-haze { animation: none; opacity: 0.85; }

.signin-mute { position: fixed; top: 12px; right: 12px; z-index: 50; font-size: 22px !important; padding: 6px 12px !important; line-height: 1; }

/* ==== Status strip: one colour-coded chip per status, fixed order, above the minion ==== */
.status-strip { position: absolute; z-index: 9; left: 50%; bottom: 100%; transform: translate(-50%, 8%); display: flex; gap: 2px; pointer-events: auto;
  font-size: calc(var(--minion-w, 70px) * 0.14); white-space: nowrap; }
.status-strip .st { display: inline-flex; align-items: center; gap: 0.15em; padding: 0.12em 0.4em 0.12em 0.25em; border-radius: 999px; font-style: normal;
  font-weight: 900; line-height: 1; color: #fff; border: 1.5px solid #0009; box-shadow: 0 1px 3px #000c, inset 0 1px 0 #ffffff55; text-shadow: 0 1px 1px #000a; }
.status-strip .st img { width: 1.2em; height: 1.2em; object-fit: contain; }
.status-strip .st .st-emo { font-size: 1.05em; }
.status-strip .st b { font-size: 1.05em; }
.status-strip .st em { display: none; font-style: normal; font-size: 0.85em; letter-spacing: 0.02em; }
.minion:hover .status-strip .st em, .status-strip .st:only-child em { display: inline; }
.st-frozen { background: linear-gradient(#bfe8ff, #3a8fd8); }
.st-burning { background: linear-gradient(#ffc04a, #e2421a); }
.st-infected { background: linear-gradient(#b6e84a, #4a7a12); }
.st-implanted { background: linear-gradient(#c79bff, #5a2aa8); }
.st-irradiated, .st-radhit { background: linear-gradient(#e8ff6a, #4aa812); color: #102004; text-shadow: none; }
.st-corroded { background: linear-gradient(#d4ff8a, #6a9a2a); color: #142004; text-shadow: none; }
.st-prey { background: linear-gradient(#ff7a7a, #a8121a); }
.st-silenced { background: linear-gradient(#b8b8b8, #545454); }
.st-blind { background: linear-gradient(#8a7aa8, #2a2040); }
.st-burned { background: linear-gradient(#ff9a5a, #8a3010); }
.st-rage { background: linear-gradient(#ff5a3a, #8a0a0a); }
.st-stealth { background: linear-gradient(#7a8090, #2a2e38); }
.st-burrowed { background: linear-gradient(#e8c98a, #8a6a2a); color: #2a1a04; text-shadow: none; }
.st-more { background: #222c; }
.status-strip .st.new { animation: stPop 0.7s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes stPop { 0% { transform: scale(0) rotate(-20deg); } 60% { transform: scale(1.5); box-shadow: 0 0 14px 4px currentColor; } 100% { transform: scale(1); } }
/* The old separate counters now live in the strip. */
.minion .burn-badge, .minion .rad-badge, .minion .rad-hit-badge { display: none; }

/* Infected: sickly green veins creeping over the art, with a slow pulse. */
.ov-infect { position: absolute; inset: 6%; z-index: 4; pointer-events: none; border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 50% 55%, #7aff2a22, transparent 70%); animation: infPulse 2.2s ease-in-out infinite; }
.ov-infect b { position: absolute; width: 60%; height: 3px; left: 20%; top: 50%; border-radius: 3px; transform-origin: 0 50%;
  background: linear-gradient(90deg, #a8ff4a, #3a7a0a 70%, transparent); box-shadow: 0 0 4px #9aff3a; }
.ov-infect b:nth-child(1) { transform: rotate(-35deg); } .ov-infect b:nth-child(2) { transform: rotate(20deg); }
.ov-infect b:nth-child(3) { transform: rotate(150deg); } .ov-infect b:nth-child(4) { transform: rotate(210deg); }
@keyframes infPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.minion.infected .m-art { box-shadow: inset 0 0 14px #7aff2a88; }

/* Implanted: a parasite throbbing in the minion's chest (purple glow, beating). */
.ov-implant { position: absolute; z-index: 4; left: 50%; top: 58%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.ov-implant b { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #e0b8ff 0%, #9a4aff 35%, #5a1aa866 60%, transparent 72%);
  animation: implBeat 1.1s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes implBeat { 0%, 100% { transform: scale(0.8); opacity: 0.6; } 15% { transform: scale(1.15); opacity: 1; } 30% { transform: scale(0.9); } 45% { transform: scale(1.08); opacity: 0.9; } }

/* Rage: a hot red aura that flickers like a temper. */
.ov-rage { position: absolute; inset: -4%; z-index: 0; pointer-events: none; border-radius: 22%;
  box-shadow: 0 0 10px 3px #ff2a1a, 0 0 22px 6px #ff5a1a66; animation: rageFlick 0.9s steps(2) infinite alternate; }
@keyframes rageFlick { from { opacity: 0.55; } to { opacity: 1; } }

body.reduced-motion .ov-infect, body.reduced-motion .ov-implant b, body.reduced-motion .ov-rage, body.reduced-motion .status-strip .st.new { animation: none; }

/* Burrow = Stealth with dirt: the same drifting cloud, but brown dust and clods instead of grey smoke. */
.minion.burrowed .m-smoke { display: block; z-index: 4; inset: -12% -14%; border-radius: 40%;
  background:
    radial-gradient(ellipse 45% 30% at 20% 80%, #8a6236dd, #0000 70%),
    radial-gradient(ellipse 50% 32% at 80% 70%, #6e4a26cc, #0000 70%),
    radial-gradient(ellipse 40% 28% at 50% 30%, #a8804acc, #0000 70%),
    radial-gradient(ellipse 35% 25% at 15% 20%, #5a3a1aaa, #0000 70%),
    radial-gradient(ellipse 38% 26% at 85% 15%, #94703eaa, #0000 70%);
  background-size: 160% 160%; filter: blur(4px); animation: kw-smoke 6s ease-in-out infinite alternate; }
.minion.burrowed .m-smoke::after { content: ''; position: absolute; inset: 10%; filter: none;
  background:
    radial-gradient(circle at 22% 70%, #3a2410 0 3%, transparent 4%), radial-gradient(circle at 70% 62%, #4a2e14 0 2.5%, transparent 3.5%),
    radial-gradient(circle at 48% 82%, #2e1c0c 0 3.5%, transparent 4.5%), radial-gradient(circle at 80% 35%, #5a3a1a 0 2%, transparent 3%),
    radial-gradient(circle at 30% 30%, #4a2e14 0 2%, transparent 3%);
  animation: kw-smoke2 4.5s ease-in-out infinite alternate; }
.minion.burrowed .m-art { opacity: 0.85; filter: sepia(0.8) saturate(0.7) brightness(0.55) contrast(1); }

/* Compact chips: round icons sized to the minion, numbers kept, labels only on hover; never wider than the minion. */
.status-strip { max-width: 112%; flex-wrap: wrap; justify-content: center; font-size: calc(var(--minion-w, 70px) * 0.16); row-gap: 1px; }
.status-strip .st { padding: 0.1em 0.18em; }
.status-strip .st em { display: none !important; }
.minion:hover .status-strip { max-width: none; flex-wrap: nowrap; z-index: 30; }
.minion:hover .status-strip .st em { display: inline !important; }
.minion.burrowed .m-sand { opacity: 0.55; }
.minion.burrowed .m-smoke { opacity: 1; z-index: 5; }
.status-strip { flex-wrap: nowrap !important; max-width: none; gap: 1px; font-size: calc(var(--minion-w, 70px) * 0.13); }

/* Painted status icons: let the icon art read, with a thin coloured ring for the status colour. */
.status-strip .st img { width: 1.55em; height: 1.55em; margin: -0.2em -0.05em; filter: drop-shadow(0 1px 1px #000c); }
.status-strip .st { padding: 0.05em 0.15em; }
.badges .kw-ico { width: 1.4em; height: 1.4em; vertical-align: middle; filter: drop-shadow(0 1px 2px #000); }
.status-strip { gap: 3px !important; }
.status-strip .st { position: relative; margin: 0 !important; padding: 0.05em 0.25em 0.05em 0.08em; }
.status-strip .st img { margin: -0.15em 0 !important; }
.status-strip .st b { margin-left: 0.05em; }
.status-strip .st { flex-shrink: 0 !important; }
.status-strip { font-size: calc(var(--minion-w, 70px) * 0.17) !important; }

/* Ultraterrestrials: the swirl a Displaced minion leaves and returns through. */
.fx-portal { position: fixed; border-radius: 50%; pointer-events: none; z-index: 900;
  background: conic-gradient(from 0deg, transparent, var(--c), #fff8, transparent 40%, var(--c), #5affd8aa, transparent 75%, var(--c));
  -webkit-mask: radial-gradient(circle, #000 20%, #0008 45%, transparent 70%); mask: radial-gradient(circle, #000 20%, #0008 45%, transparent 70%);
  filter: blur(1px) drop-shadow(0 0 18px var(--c)); mix-blend-mode: screen; }
.fx-burntick { position: fixed; pointer-events: none; z-index: 900; transform-origin: 50% 100%; mix-blend-mode: screen;
  background: radial-gradient(ellipse 30% 55% at 30% 100%, #ffd25a, #ff6a1a88 50%, transparent 75%),
              radial-gradient(ellipse 28% 70% at 55% 100%, #fff1a0, #ff7a1aaa 45%, transparent 75%),
              radial-gradient(ellipse 30% 50% at 78% 100%, #ffc24a, #ff4a1a88 50%, transparent 75%);
  filter: blur(3px); }

/* ---- One screen, no scrolling (like Hearthstone): the collection, deck builder and menus fit
   the window; card grids turn pages (pager.js) and the deck list squeezes to fit. ---- */
#app.fit-screen { overflow: hidden; }
#app.fit-screen > .book, #app.fit-screen > .builder { height: calc(100dvh / var(--ui-zoom, 1)); box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; }
#app.fit-screen .pager { flex: 1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; align-items: center; gap: 0 6px; }
#app.fit-screen .pager-grid.gallery-grid { display: grid; flex-wrap: nowrap; height: 100%; min-height: 0; margin: 0; justify-content: center; align-content: center; overflow: visible; }
#app.fit-screen .pager-grid.gallery-grid .card { margin: 0; }
@media (hover: none) { #app.fit-screen .pager-grid.gallery-grid .card:hover { transform: none; } }
#app.fit-screen .pg-arrow { width: clamp(34px, 4vw, 58px); height: clamp(60px, 14vh, 120px); padding: 0 !important; font-size: clamp(30px, 5vh, 54px) !important; line-height: 1; border-radius: 14px !important; }
#app.fit-screen .pg-arrow:disabled { visibility: hidden; }
#app.fit-screen .pg-count { grid-column: 1 / -1; text-align: center; font-family: var(--font-title); font-size: 13px; color: #8a6a3a; min-height: 16px; letter-spacing: 0.04em; }
#app.fit-screen .pager.pg-single .pg-arrow { visibility: hidden; }

/* The collection book. */
.fit-screen .book { max-width: none; width: 100%; margin: 0; padding: 10px 14px 12px; }
.fit-screen .book-head { flex: none; }
.fit-screen .book-head h2 { margin: 0 0 6px; }
.fit-screen .book-body { flex: 1; min-height: 0; align-items: stretch; }
.fit-screen .book-tabs { position: static; padding: 6px 0 0; display: grid; grid-template-rows: repeat(17, minmax(0, 1fr)); gap: 3px; min-height: 0; }
.fit-screen .book-tab { min-height: 0; padding: 0 12px 0 10px; font-size: clamp(10px, 1.9vh, 16px); overflow: hidden; }
.fit-screen .book-tab .crest { width: clamp(16px, 3.2vh, 30px); height: clamp(16px, 3.2vh, 30px); }
.fit-screen .book-page { min-height: 0; display: flex; flex-direction: column; padding: 10px 14px 6px; }
.fit-screen .page-title { flex: none; }
.fit-screen .page-title img { width: clamp(32px, 7vh, 64px); height: clamp(32px, 7vh, 64px); }
.fit-screen .page-title h3 { margin: 0; }
.fit-screen .book-page .pager { margin-top: 8px; }
@media (max-width: 860px) {
  .fit-screen .book-body { flex-direction: row; }
  .fit-screen .book-tabs { display: grid; grid-template-columns: none; grid-template-rows: repeat(17, minmax(0, 1fr)); width: auto; }
  .fit-screen .book-tab b { display: none; }
  .fit-screen .book-tab { padding: 0 6px; border-radius: 8px 0 0 8px; }
}
@media (max-height: 520px) {
  .fit-screen .book-head h2 { font-size: 18px; margin: 0; }
  .fit-screen .page-title .sub { display: none; }
  .fit-screen .book-tab b { display: none; }
  .fit-screen .book-tab { padding: 0 8px; justify-content: center; }
  .fit-screen .book-tab .crest { width: 4.6vh; height: 4.6vh; }
}

/* The deck builder: bar on top, a faction's cards (tabs, pages) on the left, the deck list on the right. */
.fit-screen .builder { padding: 8px 14px 10px; max-width: none; width: 100%; margin: 0; }
.fit-screen .builder-bar { position: static; flex: none; flex-wrap: nowrap; padding: 0 0 6px; gap: 12px; background: none; }
.fit-screen .builder-bar > div:first-child { min-width: 0; }
.fit-screen .builder-help { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.fit-screen .builder-count { padding: 2px 12px; font-size: 16px; flex: none; }
.fit-screen .builder-count b { font-size: 22px; }
.fit-screen .builder-buttons { flex-wrap: nowrap; flex: none; }
.fit-screen .builder-buttons button { padding: 7px 12px; font-size: 14px; white-space: nowrap; }
.fit-screen .builder-hint { flex: none; margin: 0 0 4px; font-size: 13px; }
.fit-screen .builder-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(190px, 22vw, 320px); gap: 12px; align-items: stretch; }
.fit-screen .builder-cards { min-height: 0; padding: 0; display: flex; flex-direction: column; }
.builder-tabs { flex: none; display: flex; gap: 6px; flex-wrap: wrap; }
.builder-tabs .builder-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 14px; }
.builder-tabs .builder-tab .crest { width: 22px; height: 22px; }
.builder-tabs .builder-tab .h-icon { width: 20px; height: 20px; }
.builder-tabs .builder-tab .pick-count { font-size: 12px; opacity: 0.85; }
.builder-tabs .builder-tab.on { background: linear-gradient(180deg, #fbe7ae, #e4b964 38%, #b9822f 72%, #8c5a1d) !important; color: #2a1a0a !important; text-shadow: none !important; }
.builder-tabs .builder-tab.on .pick-count { color: #3a2408; }
.builder-tabs .builder-tab.on .pick-count.short { color: #a01a0a; }
.fit-screen .builder-cards .pager { margin-top: 6px; }
.fit-screen .builder .pg-count { color: #b89a6a; }
.fit-screen .deck-panel { position: static; max-height: none; min-height: 0; height: 100%; }
.fit-screen .deck-panel header { padding: 6px 12px; font-size: 16px; flex: none; }
.fit-screen .deck-rows { flex: 1; min-height: 0; overflow: hidden; gap: 3px; padding: 4px; }
.fit-screen .deck-row { height: var(--row-h, 30px); flex: none; }
.fit-screen .deck-row .dr-cost { width: calc(var(--row-h, 30px) * 0.8); height: calc(var(--row-h, 30px) * 0.8); font-size: calc(var(--row-h, 30px) * 0.48); }
.fit-screen .deck-row .dr-name { font-size: clamp(9px, calc(var(--row-h, 30px) * 0.46), 14px); }
.fit-screen .deck-row .dr-n { font-size: clamp(9px, calc(var(--row-h, 30px) * 0.46), 14px); }
.fit-screen .deck-rows.two-col { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 20), var(--row-h)); align-content: start; }
@media (max-width: 760px) {
  .fit-screen .builder-layout { grid-template-columns: minmax(0, 1fr) 160px; }
  .fit-screen .builder-count { display: block; }
}
@media (max-height: 520px) {
  .fit-screen .builder-bar h2 { font-size: 17px; }
  .fit-screen .builder-help { display: none; }
  .fit-screen .builder-buttons button { padding: 4px 8px; font-size: 12px; }
  .fit-screen .builder-count { font-size: 12px; } .fit-screen .builder-count b { font-size: 16px; } .fit-screen .builder-count .sub { display: none; }
  .builder-tabs .builder-tab { padding: 2px 8px; font-size: 12px; }
}
/* Screens that fit themselves aren't shrunk as a whole on short phones (their text stays readable). */
body:not(.in-game) #app.fit-screen > .book, body:not(.in-game) #app.fit-screen > .builder { zoom: 1; height: 100dvh; }
@media (max-height: 520px) {
  .fit-screen .builder-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: 8px; }
  .fit-screen .deck-rows.two-col .dr-art { display: none; }
  .fit-screen .deck-rows.two-col .deck-row { padding: 0 3px 0 2px; gap: 3px; }
  .fit-screen .book { padding: 6px 10px 6px; }
  .fit-screen .builder { padding: 6px 10px 6px; }
}

/* The main menu on one screen: title and play buttons on the left, the realm picker on the right. */
body:not(.in-game) #app.fit-screen > .ts-fit { zoom: 1; }
.title-screen.ts-fit { --m: clamp(38px, 10.5vh, 92px); height: 100dvh; box-sizing: border-box; max-width: none; width: 100%; margin: 0;
  display: grid; grid-template-columns: minmax(250px, 33%) minmax(0, 1fr); gap: clamp(10px, 2vw, 28px); padding: clamp(6px, 2vh, 22px) clamp(10px, 2vw, 28px); overflow: hidden; align-items: stretch; }
.ts-fit .ts-left { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(4px, 2vh, 22px); min-height: 0; }
.ts-fit .ts-title { flex: none; }
.ts-fit .ts-logo { margin: 0; }
.ts-fit .ts-logo img { max-height: clamp(60px, 24vh, 230px); max-width: 100%; width: auto; }
.ts-fit .ts-runes { width: min(420px, 50vh); height: min(420px, 50vh); }
.ts-fit .ts-tag { font-size: clamp(10px, 1.8vh, 16px); text-align: center; }
.ts-fit .ts-actions { gap: clamp(4px, 1.4vh, 12px); width: 100%; }
.ts-fit .ts-play { transform-origin: center; zoom: clamp(0.5, calc(100vh / 900px), 1); }
.ts-fit .ts-actions .difficulty, .ts-fit .ts-actions > div:not(.ts-row) { zoom: clamp(0.6, calc(100vh / 900px), 1); max-width: 100%; }
.ts-fit .ts-row { flex-wrap: nowrap; gap: 6px; }
.ts-fit .ts-row button { font-size: clamp(11px, 1.9vh, 17px); padding: clamp(5px, 1.1vh, 10px) clamp(8px, 1.2vw, 20px); white-space: nowrap; }
.ts-fit .ts-row.small button { font-size: clamp(10px, 1.6vh, 15px); }
.ts-fit .ts-row.small button small { display: none; }
.title-screen.ts-fit .ts-panel { width: auto; min-height: 0; display: flex; flex-direction: column; padding: clamp(6px, 1.6vh, 18px) clamp(8px, 1.4vw, 20px); margin: 0; overflow: hidden; }
.ts-fit .ts-panel-head { flex: none; margin-bottom: clamp(4px, 1vh, 12px); flex-wrap: nowrap; }
.ts-fit .ts-panel-head h3 { font-size: clamp(14px, 2.6vh, 22px); }
.ts-fit .ts-panel-head .format-toggle button { padding: clamp(3px, 0.8vh, 8px) clamp(8px, 1vw, 16px); font-size: clamp(11px, 1.8vh, 16px); }
.ts-fit .journey-line { flex: none; margin: 0 0 6px; font-size: 13px; }
.ts-fit .faction-groups { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(4px, 1vh, 12px); margin: 0; }
.ts-fit .fg { min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(2px, 0.8vh, 10px) 6px; margin: 0; overflow: hidden; }
.ts-fit .fg-head { margin: 0 0 clamp(2px, 0.6vh, 8px); padding: 0 0 clamp(2px, 0.5vh, 6px); }
.ts-fit .fg-head b { font-size: clamp(11px, 2vh, 18px); }
.ts-fit .fg-head span { font-size: clamp(10px, 1.6vh, 14px); }
.ts-fit.title-screen .factions { gap: 4px clamp(4px, 0.8vw, 12px); flex-wrap: nowrap; }
.ts-fit.title-screen .faction.medallion { width: calc(var(--m) + 12px); gap: 2px; }
.ts-fit.title-screen .medal-face { width: var(--m); height: var(--m); }
.ts-fit .fg .faction.medallion .medal-name { font-size: clamp(9px, 1.6vh, 14px); }
.ts-fit .fg .faction.medallion .medal-name.long { font-size: clamp(8px, 1.3vh, 12px); }
.ts-fit .ts-bottom { flex: none; display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.4vw, 18px); margin-top: clamp(4px, 1vh, 12px); min-height: 0; }
.ts-fit .ts-matchup { margin: 0; gap: 6px; flex-wrap: nowrap; flex: none; }
.ts-fit .ts-matchup .vs-hero { zoom: clamp(0.45, calc(100vh / 1100px), 0.85); }
.ts-fit .ts-bottom-info { display: flex; flex-direction: column; align-items: stretch; gap: clamp(3px, 0.8vh, 8px); min-width: 0; flex: 1; max-width: 560px; }
.ts-fit .ts-fusion-btn { padding: 4px 12px; font-size: clamp(11px, 1.8vh, 15px); }
.ts-fit .ts-synergy { margin: 0; padding: clamp(2px, 0.6vh, 8px) 12px; }
.ts-fit .ts-synergy p { margin: 0; font-size: clamp(10px, 1.6vh, 13px); }
.ts-fit .deck-line { margin: 0; padding: clamp(3px, 0.8vh, 10px) 12px; gap: 8px; flex-wrap: nowrap; }
.ts-fit .deck-line > div { min-width: 0; font-size: clamp(11px, 1.8vh, 15px); }
.ts-fit .deck-line button { padding: clamp(3px, 0.8vh, 8px) 12px; font-size: clamp(11px, 1.8vh, 15px); white-space: nowrap; }
.ts-fit .ts-guide-btn { padding: 4px 12px; font-size: clamp(11px, 1.8vh, 15px); }
.guide-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; }
.guide-backdrop { position: absolute; inset: 0; background: #000b; backdrop-filter: blur(4px); }
.guide-panel { position: relative; width: min(960px, 94vw); max-height: 92vh; overflow: auto; padding: 18px; border-radius: 16px; background: linear-gradient(180deg, #1a1430, #0e0a1c); border: 2px solid #8a6a3a; }
.guide-panel .ts-guides { flex-direction: row; margin: 0 0 8px; }
.guide-panel .ts-guide { flex: 1 1 0; }
.guide-close { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 2px 10px !important; }
@media (max-height: 560px) {
  .ts-fit .ts-tag, .ts-fit .fg-head span, .ts-fit .ts-synergy p, .ts-fit .deck-line .sub { display: none; }
  .ts-fit .ts-runes { display: none; }
}
.title-screen.ts-fit { --m: min(10.5vh, 4.6vw, 92px); grid-template-columns: minmax(0, 32%) minmax(0, 1fr); }
.ts-fit.title-screen .faction.medallion { width: calc(var(--m) + 18px); }
.ts-fit .fg .faction.medallion .medal-name { white-space: nowrap; letter-spacing: 0; }
.ts-fit .fg .faction.medallion .medal-name.long { white-space: normal; line-height: 1; }
.ts-fit .ts-synergy { flex-wrap: nowrap; }
.ts-fit .ts-synergy p { flex-basis: 100%; }
.ts-fit .ts-synergy { flex-wrap: wrap; }
@media (max-height: 560px) {
  .ts-fit .ts-row.small { gap: 4px; }
  .ts-fit .ts-row.small button { font-size: 10px; padding: 4px 6px; }
  .ts-fit .ts-row.small button .btn-icon, .ts-fit .ts-row.small button svg { display: none; }
  .ts-fit .fg .faction.medallion .medal-name { font-size: 9px; }
  .ts-fit .ts-synergy b { font-size: 12px; }
  .ts-fit .ts-synergy { flex-wrap: nowrap; }
}
.title-screen.ts-fit { --m: min(11vh, 5.2vw, 92px); }
@media (max-height: 560px) {
  .ts-fit.title-screen .factions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; gap: 2px; }
  .ts-fit.title-screen .faction.medallion { width: 100%; }
  .ts-fit.title-screen .fg.n4 .factions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ts-fit .fg .faction.medallion .medal-name { font-size: 8px; max-width: 100%; overflow: hidden; }
  .ts-fit .fg .faction.medallion .medal-name.long { font-size: 7px; }
}

/* How to Play: a small book, one chapter at a time. */
body:not(.in-game) #app.fit-screen > .howto-book { zoom: 1; }
.howto.howto-book { height: 100dvh; box-sizing: border-box; max-width: 1200px; width: 100%; margin: 0 auto; padding: clamp(8px, 2.5vh, 28px) clamp(10px, 2vw, 28px);
  display: flex; flex-direction: column; gap: clamp(6px, 1.5vh, 16px); overflow: hidden; }
.howto-top { flex: none; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; justify-content: center; }
.howto-top h1 { margin: 0; font-size: clamp(22px, 5vh, 46px); }
.howto-top .howto-lead { margin: 0; }
.howto-body { flex: 1; min-height: 0; display: grid; grid-template-columns: clamp(170px, 26%, 300px) minmax(0, 1fr); gap: clamp(8px, 1.5vw, 18px); }
.howto-chapters { display: grid; grid-template-rows: repeat(var(--n, 12), minmax(0, 1fr)); gap: 3px; min-height: 0; }
.howto-ch { display: flex; align-items: center; gap: 8px; min-height: 0; padding: 0 10px !important; font-size: clamp(10px, 1.9vh, 16px) !important; text-align: left; justify-content: flex-start;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #ecdcc0 !important; background: linear-gradient(180deg, #34303a, #1c1920) !important; text-shadow: 0 1px 2px #000 !important; }
.howto-ch.on { background: linear-gradient(180deg, #fbe7ae, #e4b964 38%, #b9822f 72%, #8c5a1d) !important; color: #2a1a0a !important; text-shadow: none !important; }
.howto-ch span { flex: none; }
.howto-book .howto-page { min-height: 0; overflow: hidden; margin: 0; padding: clamp(10px, 3vh, 34px) clamp(14px, 3vw, 44px); font-size: clamp(13px, 2.6vh, 22px); line-height: 1.5; }
.howto-book .howto-page h3 { margin: 0 0 0.6em; font-size: 1.4em; }
.howto-book .howto-keywords dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.2em 1em; margin: 0; font-size: clamp(10px, 1.85vh, 16px); line-height: 1.3; }
.howto-book .howto-keywords dt { font-weight: 800; }
.howto-book .howto-keywords dd { margin: 0; }
.howto-foot { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; }
.howto-foot button { padding: clamp(4px, 1vh, 10px) clamp(10px, 1.5vw, 22px); font-size: clamp(12px, 2vh, 17px); }
@media (max-height: 560px) {
  .howto-book .howto-keywords dl { grid-template-columns: max-content 1fr max-content 1fr; font-size: 10.5px; gap: 0.15em 0.7em; }
  .howto-book .howto-keywords .sub { display: none; }
  .howto-book .howto-page h3 { margin-bottom: 0.3em; }
}
@media (max-height: 560px) { .howto-book .howto-top .howto-lead { display: none; } }

/* Play Online: your realms on the left, sign-in / match modes on the right. */
body:not(.in-game) #app.fit-screen > .lobby-fit { zoom: 1; }
.title-screen.lobby-fit { height: 100dvh; box-sizing: border-box; max-width: 1500px; width: 100%; margin: 0 auto; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(8px, 2vw, 26px); padding: clamp(6px, 2vh, 22px) clamp(10px, 2vw, 26px); align-items: stretch; }
.lobby-fit .lobby-left, .lobby-fit .lobby-right { min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(4px, 1.4vh, 14px); }
.lobby-fit .ts-title { flex: none; }
.lobby-fit .tavern-sign h1 { font-size: clamp(26px, 8vh, 80px) !important; padding: 0 !important; margin: 0; }
.lobby-fit .ts-tag { font-size: clamp(10px, 1.8vh, 16px); }
.lobby-fit .ts-runes { display: none; }
.lobby-fit .lobby-setup, .lobby-fit .lobby-right > * { margin: 0 !important; width: auto !important; }
.lobby-fit .lobby-panel { min-height: 0; overflow: hidden; padding: clamp(6px, 1.6vh, 20px) clamp(8px, 1.4vw, 20px); }
.lobby-fit .ts-actions { flex: none; }
@media (max-height: 560px) {
  body:not(.in-game) #app.fit-screen > .lobby-fit { zoom: var(--ui-zoom, 1); height: calc(100dvh / var(--ui-zoom, 1)); }
  .lobby-fit .ts-tag { display: none; }
  .lobby-fit .tavern-sign h1 { font-size: 54px !important; }
  .lobby-fit .lobby-panel .sub, .lobby-fit .lobby-panel p { --note-boost: 1; }
}
/* Last resort only (e.g. the room-code section opened on a tiny phone): that one panel scrolls. */
.lobby-fit .lobby-panel { overflow-y: auto; }
/* Fitted screens size their own text: no extra boost for small notes. */
.ts-fit, .howto-book, .fit-screen .book, .fit-screen .builder { --note-boost: 1; }
.ts-fit .journey-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: clamp(2px, 0.6vh, 8px) 10px; font-size: clamp(10px, 1.7vh, 14px); }
.ts-fit .journey-line span { min-width: 0; text-align: left; }
.ts-fit .journey-line button { flex: none; padding: clamp(2px, 0.5vh, 6px) 10px; font-size: clamp(9px, 1.5vh, 13px); white-space: nowrap; }
.ts-fit p.deck-line { display: block; margin: 0; font-size: clamp(10px, 1.8vh, 15px); }
/* Portrait (phones held upright): the scrolling layouts, every card shown, no page arrows. */
#app:not(.fit-screen) .pg-arrow, #app:not(.fit-screen) .pg-count { display: none; }
#app:not(.fit-screen) .pager-grid { display: flex; flex-wrap: wrap; justify-content: center; }
/* Collection: the hovered card lifts and grows so its text is easy to read. */
@media (hover: hover) {
  #app.fit-screen .pager-grid .card { transition: transform 0.15s, filter 0.15s; }
  #app.fit-screen .pager-grid.gallery-grid .card:hover { transform: scale(1.35); z-index: 20; position: relative; filter: drop-shadow(0 14px 24px #000c); }
}
/* The full-size card view is never shrunk with the menus (on a phone held sideways it filled only half the height). */
body:not(.in-game) #app > .zoom-overlay { zoom: 1; }
@media (max-height: 560px) and (orientation: landscape) {
  .zoom-overlay { padding: 1.5vh 12px; }
  .zoom-overlay .big-card { --h: 94vh; }
  .zoom-side { max-height: 94vh; width: 260px; font-size: 13px; }
}

/* Robots (Arsenal Protocol): the Hero's Weapon beside the portrait — Attack (gold) and Durability (grey). */
.weapon-badge { position: relative; width: calc(var(--hero) * 0.5); height: calc(var(--hero) * 0.5); border-radius: 50%; cursor: help;
  border: 3px solid #c9a35a; background: #1a1612; box-shadow: 0 0 0 2px #000, 0 0 14px #ffb84a66; display: grid; place-items: center; }
.weapon-badge i { position: absolute; inset: 0; border-radius: 50%; background-size: cover; background-position: center; }
.weapon-badge span { font-size: calc(var(--hero) * 0.24); }
.weapon-badge b { position: absolute; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px;
  font-family: var(--font-title); font-weight: 900; color: #fff; border: 2px solid #000; text-shadow: 0 1px 2px #000; }
.weapon-badge .w-atk { left: -6px; background: radial-gradient(circle at 35% 30%, #ffe08a, #e0a22a 55%, #8a5a10); }
.weapon-badge .w-dur { right: -6px; background: radial-gradient(circle at 35% 30%, #e8eef6, #8a93a3 55%, #3a404a); }

/* Collection: filter a faction's page by set (all / original / its expansion). */
.set-filter { flex: none; display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; }
.set-filter button { padding: 4px 12px !important; font-size: clamp(11px, 1.7vh, 14px) !important; }
.set-filter button.on { background: linear-gradient(180deg, #fbe7ae, #e4b964 38%, #b9822f 72%, #8c5a1d) !important; color: #2a1a0a !important; text-shadow: none !important; }

/* ---- Menu & collection animations (menu-fx.js) ---- */
/* Medallions: on hover, motes of the faction's colour drift up around the face. */
.title-screen .faction.medallion:not(.sealed) .medal-face { position: relative; }
.title-screen .faction.medallion:not(.sealed)::before { content: ''; position: absolute; left: 50%; top: 0; width: 130%; aspect-ratio: 1; transform: translateX(-50%);
  pointer-events: none; opacity: 0; transition: opacity 0.25s; z-index: 2; border-radius: 50%;
  background:
    radial-gradient(circle, var(--fc, #ffd25a) 0 2px, transparent 3px) 15% 80% / 100% 100% no-repeat,
    radial-gradient(circle, var(--fc, #ffd25a) 0 1.5px, transparent 2.5px) 80% 70% / 100% 100% no-repeat,
    radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 60% 90% / 100% 100% no-repeat,
    radial-gradient(circle, var(--fc, #ffd25a) 0 2px, transparent 3px) 30% 95% / 100% 100% no-repeat,
    radial-gradient(circle, #fff 0 1px, transparent 2px) 88% 92% / 100% 100% no-repeat;
  filter: drop-shadow(0 0 4px var(--fc, #ffd25a)); }
.title-screen .faction.medallion:not(.sealed):hover::before { opacity: 1; animation: medal-motes 1.6s linear infinite; }
@keyframes medal-motes { from { background-position: 15% 80%, 80% 70%, 60% 90%, 30% 95%, 88% 92%; } to { background-position: 18% 10%, 76% 0%, 64% 20%, 26% 25%, 84% 15%; } }

/* The mystery Fusion hero: faint cracks of light that flare when the pair completes. */
.vs-hero.mystery .vs-mystery { position: relative; overflow: hidden; }
.vs-hero.mystery .vs-mystery::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background: linear-gradient(115deg, transparent 46%, #ffd25a 48%, transparent 50%), linear-gradient(40deg, transparent 58%, #ffd25a 59.5%, transparent 61%),
    linear-gradient(160deg, transparent 30%, #ffb040 31%, transparent 32.5%); animation: crack-glow 3s ease-in-out infinite; }
@keyframes crack-glow { 50% { opacity: 0.7; filter: drop-shadow(0 0 6px #ffb040); } }
.vs-hero.mystery.cracking .vs-mystery { animation: crack-shake 0.5s ease-in-out 2; }
.vs-hero.mystery.cracking .vs-mystery::after { opacity: 1; filter: drop-shadow(0 0 10px #ffd25a) brightness(1.5); animation: none; }
@keyframes crack-shake { 25% { transform: rotate(-3deg) scale(1.05); } 75% { transform: rotate(3deg) scale(1.05); } }

/* Expansion cards: a slow shine sweeps across them now and then. */
.card.expansion:not(.locked)::after { content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: 6%;
  background: linear-gradient(110deg, transparent 35%, #ffffff55 48%, #ffe6a055 52%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  mix-blend-mode: screen; animation: exp-shine 5.5s ease-in-out infinite; }
.card.expansion:nth-child(3n+1)::after { animation-delay: -1.8s; } .card.expansion:nth-child(3n+2)::after { animation-delay: -3.6s; }
@keyframes exp-shine { 0%, 70% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
.card.expansion { position: relative; }

/* Tab rows: the gold highlight slides between tabs. */
.tab-pill { position: fixed; z-index: 30; pointer-events: none; border-radius: 10px; mix-blend-mode: normal;
  background: linear-gradient(180deg, #fbe7ae, #e4b964 38%, #b9822f 72%, #8c5a1d); box-shadow: 0 0 14px #ffd25a88; opacity: 0.85; }
.pill-wait { visibility: hidden; }

/* Deck builder: a card dropped into the deck flies into its row; the mana curve under the header. */
.deck-fly { position: fixed; z-index: 3000; pointer-events: none; background: #c9a35a center / cover; box-shadow: 0 0 18px #ffd25a, 0 6px 16px #000c; }
.mana-curve { flex: none; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; height: clamp(34px, 7vh, 60px); padding: 4px 10px 2px; border-bottom: 1px solid #8a6a3a44; }
.mc-bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-height: 0; }
.mc-bar i { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #7fb2ff, #2f6fe0); box-shadow: 0 0 6px #4a8aff66; }
.mc-bar b { position: absolute; top: -2px; font-size: 10px; color: #fff; text-shadow: 0 1px 2px #000; font-family: var(--font-title); }
.mc-bar small { font-size: 9px; color: #b89a6a; line-height: 1; margin-top: 1px; }
@media (max-height: 520px) { .mana-curve { height: 26px; padding: 2px 6px 1px; } .mc-bar b { display: none; } }
/* Divine (The Holy Pyre): Holy Flame chip — a golden-white glow. */
.st.st-holyflame { background: radial-gradient(circle at 40% 35%, #fffbe0, #ffd86a 45%, #c98a1a); color: #3a2400; box-shadow: 0 0 10px #ffe58a, 0 0 2px #000; }
.st.st-holyflame b { color: #3a2400; text-shadow: none; }
.hero-holy { position: absolute; left: 50%; bottom: -4%; transform: translateX(-50%); z-index: 6; padding: 1px 8px; border-radius: 10px; font-family: var(--font-title); font-weight: 900;
  font-size: calc(var(--hero, 120px) * 0.12); color: #3a2400; background: radial-gradient(circle at 40% 35%, #fffbe0, #ffd86a 45%, #c98a1a); box-shadow: 0 0 12px #ffe58a, 0 0 2px #000; pointer-events: auto; }
/* Acidic (The Half-Digested): Acid Hide and Regenerate chips. */
.st.st-acidhide { background: radial-gradient(circle at 40% 35%, #eaff9a, #9be22a 45%, #4a7a0a); box-shadow: 0 0 8px #b6ff3a; }
.st.st-regen { background: radial-gradient(circle at 40% 35%, #d8ffe0, #4ad86a 45%, #1a7a3a); }

/* ---- Lycanthropes: form badge, the Transform (moon) button, and the shapeshift flash ---- */
.minion .m-form { position: absolute; left: 4%; top: 4%; z-index: 7; font-size: clamp(9px, 1.6cqmin, 14px); line-height: 1; font-style: normal;
  padding: 2px 3px; border-radius: 6px; background: rgba(10, 14, 30, 0.7); box-shadow: 0 0 0 1px rgba(200, 216, 255, 0.5); pointer-events: none; }
.minion .m-form.beast { box-shadow: 0 0 0 1px rgba(255, 138, 154, 0.7); }
.arena .minion .m-shift { position: absolute; right: -6%; top: -6%; z-index: 9; width: 34%; aspect-ratio: 1; min-width: 26px; min-height: 26px;
  border-radius: 50% !important; border: 2px solid #e8eeff !important; background: radial-gradient(circle at 40% 35%, #ffffff, #b8c8ff 45%, #3a4a8a) !important; color: #fff; min-height: 0; text-transform: none; letter-spacing: 0;
  font-size: clamp(13px, 2.4cqmin, 20px); line-height: 1; padding: 0 !important; cursor: pointer; display: grid; place-items: center; right: -8%; top: -8%;
  box-shadow: 0 0 10px rgba(200, 216, 255, 0.9), 0 2px 4px rgba(0, 0, 0, 0.6); animation: moon-pulse 1.8s ease-in-out infinite; }
.arena .minion .m-shift.beast { background: radial-gradient(circle at 40% 35%, #fff2f2, #ff9aa8 45%, #6a1a2a) !important; border-color: #ffe0e4 !important; }
.arena .minion .m-shift:hover { transform: scale(1.12); }
@keyframes moon-pulse { 0%, 100% { box-shadow: 0 0 6px rgba(200, 216, 255, 0.7), 0 2px 4px rgba(0, 0, 0, 0.6); } 50% { box-shadow: 0 0 16px rgba(220, 230, 255, 1), 0 2px 4px rgba(0, 0, 0, 0.6); } }
.minion.shifting { animation: shapeshift 0.52s ease-in-out; }
.minion.shifting .m-art { filter: brightness(2.2) saturate(0.3) drop-shadow(0 0 12px #dfe8ff); transition: filter 0.25s; }
@keyframes shapeshift { 0% { transform: scale(1); } 25% { transform: scale(1.1) rotate(-4deg); } 50% { transform: scale(0.92) rotate(4deg); } 75% { transform: scale(1.08) rotate(-2deg); } 100% { transform: scale(1); } }
body.reduced-motion .arena .minion .m-shift, body.reduced-motion .minion.shifting { animation: none; }

.zoom-locked { margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.35); color: #ffd98a; font-weight: 700; font-size: 0.9em; }

/* ==== Legendary frames (art/frames/legendary-<type>.png, 728x1024): 7+ Mana cards ====
   Openings measured from the paintings, in % of the card. */
.big-card.shard.legend { box-shadow: 0 0 1.2em #ffd25a88, 0 2em 5em #000c; }
.big-card.shard.legend::after { display: none; }
.big-card.shard.legend.t-minion .bc-art { left: 12.9% !important; top: 10.8% !important; width: 73.5% !important; height: 39.4% !important; }
.big-card.shard.legend.t-minion .bc-text { left: 10.9% !important; top: 64.9% !important; width: 79.3% !important; height: 24.4% !important; }
.big-card.shard.legend.t-minion .bc-atk { left: 6.3% !important; top: 52.8% !important; width: 17.7% !important; height: 11.1% !important; }
.big-card.shard.legend.t-minion .bc-hp, .big-card.shard.legend.t-minion .bc-hp.two-digit { left: 76.9% !important; top: 53.1% !important; width: 17.3% !important; height: 10.4% !important; }
.big-card.shard.legend.t-minion .bc-type { left: 40.8% !important; top: 91.6% !important; width: 19.2% !important; height: 6.6% !important; }
.big-card.shard.legend.t-minion .sh-sigil { left: 83.7%; top: 7.1%; width: 9.6%; height: 7.1%; }
.big-card.shard.legend.t-minion .bc-cost { left: 2.6% !important; top: 2.4% !important; width: 18.5% !important; height: 16.6% !important; }
.big-card.shard.legend.t-spell .bc-art { left: 25.5% !important; top: 13.7% !important; width: 49% !important; height: 35.3% !important; }
.big-card.shard.legend.t-spell .bc-banner { left: 5.5% !important; top: 57% !important; width: 88.9% !important; height: 5.6% !important; }
.big-card.shard.legend.t-spell .bc-text { left: 8.1% !important; top: 66.3% !important; width: 83.8% !important; height: 24.3% !important; }
.big-card.shard.legend.t-spell .bc-type { left: 31.7% !important; top: 92.5% !important; width: 36.5% !important; height: 5.2% !important; }
.big-card.shard.legend.t-spell .sh-sigil { left: 84.6%; top: 3.7%; width: 11%; height: 7.8%; }
.big-card.shard.legend.t-spell .bc-cost { left: 1.6% !important; top: 0.8% !important; width: 17% !important; height: 18% !important; }
.big-card.shard.legend.t-trap .bc-art { left: 12.4% !important; top: 10.4% !important; width: 75.1% !important; height: 39.6% !important; }
.big-card.shard.legend.t-trap .bc-banner { left: 5.1% !important; top: 56.4% !important; width: 89.7% !important; height: 5.6% !important; }
.big-card.shard.legend.t-trap .bc-text { left: 7.8% !important; top: 65.7% !important; width: 84.3% !important; height: 25.4% !important; }
.big-card.shard.legend.t-trap .bc-type { left: 31.5% !important; top: 93% !important; width: 37.1% !important; height: 5% !important; }
.big-card.shard.legend.t-trap .sh-sigil { left: 85.2%; top: 4%; width: 10.9%; height: 7.6%; }
.big-card.shard.legend.t-trap .bc-cost { left: 1.5% !important; top: 1% !important; width: 16.5% !important; height: 18.1% !important; }
.big-card.shard.legend.t-minion .zoom-foil { --foil-frame: url('../../art/frames/legendary-minion.png'); }
.big-card.shard.legend.t-spell .zoom-foil { --foil-frame: url('../../art/frames/legendary-spell.png'); }
.big-card.shard.legend.t-trap .zoom-foil { --foil-frame: url('../../art/frames/legendary-trap.png'); }
.big-card.shard.legend[style*='--foil-frame'] .zoom-foil { --foil-frame: inherit; }

/* ---- Lycanthropes in the collection: the Beast Form card peeks out behind the Humanoid Form ---- */
.card:has(> .beast-behind) { isolation: isolate; }
.card > .beast-behind { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  transform: translate(5%, -3.5%); filter: brightness(0.7); }
.card > .beast-behind .big-card { width: 100%; height: 100%; }
/* The full-size view flips between the two forms with an arrow. */
.zoom-flip { width: 100%; margin: 6px 0; }
.zoom-wrap { position: relative; }
.zoom-flip-arrow { position: absolute; z-index: 9; left: 50%; top: -22px; transform: translateX(-50%); pointer-events: auto; width: 46px; height: 46px; padding: 0 !important;
  border-radius: 50% !important; font-size: 24px; line-height: 1; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #ffffff, #b8c8ff 45%, #3a4a8a) !important; border: 2px solid #e8eeff !important; color: #1a2040;
  box-shadow: 0 0 12px rgba(200, 216, 255, 0.9), 0 3px 6px #000a; }

/* The selection ring hugs the portrait at every size, and names sit clear below it. */
.ts-fit .fg .medal-ring { width: calc(var(--m) + 14px); height: calc(var(--m) + 14px); top: -7px; margin-left: calc((var(--m) + 14px) / -2); }
.faction.medallion .medal-name { position: relative; z-index: 3; margin-top: 7px; text-shadow: 0 1px 3px #000, 0 0 6px #000; }

/* ---- Quality of life: Undo, opponent turn recap, named decks, preview twin ---- */
.undo-btn { font-size: 13px; padding: 4px 10px !important; margin: 4px auto; display: block; }
.turn-recap { position: absolute; z-index: 30; left: 64px; top: 34%; max-width: min(340px, 70vw);
  display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 12px; cursor: pointer;
  background: rgba(12, 10, 20, 0.92); border: 1px solid #e7b552; box-shadow: 0 8px 30px #000c; color: #f3e6c8; font-size: 14px;
  }
.turn-recap.fresh { animation: recap-in 0.3s ease-out; }
.turn-recap b { font-family: Cinzel, Georgia, serif; color: #ffd98a; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; }
.turn-recap span::before { content: '• '; color: #e7b552; }
.turn-recap span.sub::before { content: ''; }
@keyframes recap-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.arena.portrait .turn-recap { left: 8px; top: 40%; font-size: 12px; }
.deck-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 10px; }
.deck-slots .ds-label { font-weight: 700; color: #e7c27a; }
.ds-chip { display: inline-flex; border: 1px solid #6a5530; border-radius: 999px; overflow: hidden; }
.ds-chip.on { border-color: #ffd25a; box-shadow: 0 0 8px #ffd25a88; }
.ds-chip button { border: none !important; border-radius: 0 !important; padding: 3px 10px !important; font-size: 13px; }
.ds-chip .ds-del { padding: 3px 8px !important; opacity: 0.7; }
.ds-name { padding: 4px 8px; border-radius: 8px; border: 1px solid #6a5530; background: #1a1410; color: #f3e6c8; font-size: 13px; width: 160px; }
#preview .preview-twin { margin-top: 8px; opacity: 0.95; }
#preview .preview-twin > span { display: block; text-align: center; font: 700 12px Cinzel, Georgia, serif; color: #ffd98a; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
#preview .preview-twin .big-card { transform: scale(0.62); transform-origin: top center; margin-bottom: -38%; }

/* Legendary frames paint their own blue mana shield: the cost number sits in it (no second badge). */
.big-card.shard.legend.t-minion .bc-cost, .big-card.shard.legend.t-spell .bc-cost, .big-card.shard.legend .bc-cost.cheaper, .big-card.shard.legend .bc-cost.pricier {
  background: none !important; clip-path: none !important; box-shadow: none !important; border: none !important; }
.big-card.shard.legend.t-minion .bc-cost { left: 4.8% !important; top: 4.4% !important; width: 15.1% !important; height: 11.2% !important; }
.big-card.shard.legend.t-spell .bc-cost { left: 2.4% !important; top: 1.6% !important; width: 16% !important; height: 12.4% !important; }
.big-card.shard.legend .bc-cost.cheaper { color: #8affa8 !important; }
.big-card.shard.legend .bc-cost.pricier { color: #ff9aa4 !important; }

/* Deck picker (menu) and premade decks: Classic, Expansion and your saved decks. */
.deck-choices { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.deck-choices .ds-label { font-weight: 700; color: #e7c27a; font-size: 13px; }
.dc-chip { padding: 3px 12px !important; font-size: 13px !important; border-radius: 999px !important; }
.dc-chip.on { border-color: #ffd25a !important; box-shadow: 0 0 8px #ffd25a88; color: #ffe9a8; }
.dc-chip.mine::before { content: '★ '; color: #e7c27a; }
.dc-chip.locked { opacity: 0.75; border-style: dashed !important; }
.dc-lock { font-size: 0.9em; color: #ffb3a0; }
.ts-fit .deck-line .deck-choices { flex-wrap: wrap; }
/* A locked card in the deck list: red-tinted, click it to swap. */
.deck-row.locked { border-color: #c0504088 !important; background: linear-gradient(90deg, #4a1a14, #2a1410) !important; }
.deck-row.locked .dr-name { color: #ffb3a0; }
.deck-row.locked .dr-art { filter: grayscale(0.8) brightness(0.6); }
.replace-pop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: #000a; padding: 16px; }
.replace-pop .rp-box { background: #1e1610; border: 2px solid #6a5530; border-radius: 14px; padding: 14px 16px; max-width: min(720px, 100%); max-height: 92vh; overflow: auto; text-align: center; }
.replace-pop h3 { margin: 0 0 4px; font-family: var(--font-title); color: #ffd98a; }
.replace-pop .rp-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 12px 0; }
.replace-pop .rp-opt { cursor: pointer; transition: transform 0.12s; }
.replace-pop .rp-opt:hover { transform: translateY(-4px) scale(1.03); }
.replace-pop .rp-buttons { display: flex; justify-content: center; gap: 10px; }

/* ==== THE DESCENT (Demons, Circles of Hell): the battle sinks a circle deeper (descent-fx.js) ==== */
.descent { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.descent-old { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform, filter, opacity; }
.descent-old-img { position: absolute; inset: 0; background: center / 100% 100% no-repeat; }
.descent-old-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.descent-cracks { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
.descent-old-img { animation: descent-darken 0.9s ease-in forwards; }
.descent.falling .descent-old { animation: descent-fall 0.75s cubic-bezier(0.55, 0, 0.85, 0.35) forwards; }
.descent.swapped .descent-old { display: none; }
@keyframes descent-darken { to { filter: brightness(0.45) saturate(1.3); } }
@keyframes descent-fall {
  from { transform: scale(1); filter: blur(0); opacity: 1; }
  60% { opacity: 1; }
  to { transform: scale(0.18) rotate(5deg); filter: blur(5px) brightness(0.4); opacity: 0; } }
/* The new circle rises out of the dark, toward you. */
.board-stage.descent-rise > .board-still, .board-stage.descent-rise > canvas.circle-fx { animation: descent-rise 1s cubic-bezier(0.15, 0.85, 0.25, 1) both; transform-origin: 50% 50%; }
@keyframes descent-rise { from { transform: scale(0.55); filter: brightness(0) blur(10px); } 55% { filter: brightness(1.35) blur(0); } to { transform: scale(1); filter: none; } }
/* While the old board falls away, the real one beneath is hidden (only the dark is left). */
.board-stage.descent-hide > .board-still, .board-stage.descent-hide > canvas, .board-stage.descent-hide > video { opacity: 0; }
/* The table itself trembles while the floor gives way. */
body.descent-quake #app .arena { animation: descent-shake 0.11s linear infinite; }
.descent-dark { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #000 0%, #000 55%, #000 100%); opacity: 0; }
.descent.falling .descent-dark { animation: descent-black 0.45s 0.4s ease-in forwards; }
.descent.rising .descent-dark { animation: descent-unveil 0.9s ease-out forwards; }
@keyframes descent-black { to { opacity: 1; } }
@keyframes descent-unveil {
  0% { opacity: 1; background: radial-gradient(circle at 50% 50%, transparent 0%, #000 8%, #000 100%); }
  100% { opacity: 1; background: radial-gradient(circle at 50% 50%, transparent 60%, #0000 140%); } }
.descent.rising.named .descent-dark { animation: descent-unveil 0.9s ease-out forwards; }
/* Embers and rubble rush up past you as you fall. */
.descent-rush { position: absolute; inset: 0; opacity: 0; }
.descent.falling .descent-rush { opacity: 1; }
.descent.rising .descent-rush { transition: opacity 0.5s; opacity: 0; }
.descent-rush i { position: absolute; left: var(--x); bottom: -12%; width: calc(3px * var(--s)); height: var(--h); border-radius: 3px;
  background: linear-gradient(to top, transparent, var(--c)); box-shadow: 0 0 10px var(--c); opacity: 0.85; }
.descent.falling .descent-rush i { animation: descent-rush 0.7s var(--d) linear infinite; }
@keyframes descent-rush { from { transform: translateY(0); } to { transform: translateY(-130vh); } }
/* A ring of fire closing in on the dark. */
.descent-ring { position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(1); border-radius: 50%;
  box-shadow: inset 0 0 120px 60px var(--tint), inset 0 0 40px 10px #ffb44a; opacity: 0; }
.descent.falling .descent-ring { animation: descent-ring 0.9s 0.3s ease-in forwards; }
.descent.rising .descent-ring { animation: descent-ring-out 0.6s ease-out forwards; }
@keyframes descent-ring { from { opacity: 0; transform: translate(-50%, -50%) scale(1.2); } to { opacity: 0.9; transform: translate(-50%, -50%) scale(0.35); } }
@keyframes descent-ring-out { from { opacity: 0.9; transform: translate(-50%, -50%) scale(0.35); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
/* The new circle arrives with a shockwave of its own light. */
.descent-wave { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(0);
  border: 6px solid var(--tint); box-shadow: 0 0 60px 20px var(--tint), inset 0 0 40px var(--tint); opacity: 0; }
.descent.rising .descent-wave { animation: descent-wave 1s ease-out forwards; }
@keyframes descent-wave { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(5.5); } }
/* The new board itself rises out of the dark (the stage's still/fx beneath the overlay). */
body.descending #board-layer .board-still, body.descending #board-layer canvas.circle-fx { transform-origin: 50% 50%; }
.descent.rising ~ .board-still { animation: none; }
#board-layer.descent-shake .board-stage { animation: descent-shake 0.09s linear infinite; }
@keyframes descent-shake {
  0% { transform: translate(0, 0); } 25% { transform: translate(-4px, 3px); } 50% { transform: translate(3px, -3px); }
  75% { transform: translate(-3px, -2px); } 100% { transform: translate(0, 0); } }
/* The banner: the circle's name burns in, then smoulders away. */
.descent-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 0; width: min(90%, 900px); }
.descent.named .descent-banner { animation: descent-banner-in 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards; }
.descent.leaving .descent-banner { animation: descent-banner-out 0.8s ease-in forwards; }
@keyframes descent-banner-in { from { opacity: 0; transform: translate(-50%, -50%) scale(1.25); filter: blur(8px); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); } }
@keyframes descent-banner-out { from { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) translateY(0); } to { opacity: 0; filter: blur(6px); transform: translate(-50%, -50%) translateY(-30px); } }
.descent-banner::before { content: ''; position: absolute; left: -10%; right: -10%; top: -25%; bottom: -25%; z-index: -1;
  background: radial-gradient(ellipse at center, #000c 0%, #0008 45%, transparent 72%); }
.db-ordinal { font-family: Cinzel, Georgia, serif; font-weight: 700; letter-spacing: 0.45em; text-transform: uppercase; color: #f3d9a8;
  font-size: clamp(14px, 2.4vmin, 26px); text-shadow: 0 2px 6px #000, 0 0 14px var(--tint); }
.db-name { font-family: Cinzel, Georgia, serif; font-weight: 900; font-size: clamp(42px, 10vmin, 120px); line-height: 1; margin: 0.08em 0 0.12em;
  color: #fff3d6; letter-spacing: 0.04em;
  background: linear-gradient(180deg, #fffbe8 0%, #ffd27a 40%, var(--tint) 75%, #3a0a00 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 6px #000) drop-shadow(0 0 22px var(--tint)); }
.descent.named .db-name { animation: descent-burn 1.6s ease-in-out infinite alternate; }
@keyframes descent-burn { from { filter: drop-shadow(0 4px 6px #000) drop-shadow(0 0 16px var(--tint)); } to { filter: drop-shadow(0 4px 6px #000) drop-shadow(0 0 34px var(--tint)); } }
.db-both { margin-top: 6px; font: 700 clamp(9px, 1.4vmin, 13px) Cinzel, Georgia, serif; letter-spacing: 0.25em; text-transform: uppercase; color: var(--tint); text-shadow: 0 0 8px #000, 0 1px 2px #000; }
.db-rule { font-family: Georgia, serif; font-style: italic; color: #f0e2c8; font-size: clamp(13px, 2.2vmin, 22px); text-shadow: 0 2px 4px #000, 0 0 8px #000; }
.db-roman { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); z-index: -1; font-family: Cinzel, Georgia, serif; font-weight: 900;
  font-size: clamp(120px, 34vmin, 380px); color: var(--tint); opacity: 0.13; letter-spacing: -0.02em; pointer-events: none; }

/* Portrait boards: the circle's living effects sit over the painting. */
.arena.p-board .pboard-fx { position: absolute; z-index: 0; pointer-events: none; left: var(--pb-x); top: var(--pb-y); width: var(--pb-w); height: var(--pb-h); }
#board-layer canvas.circle-fx, .pboard-fx canvas.circle-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* The Descent gauge: seven rings down the left of the battlefield. */
.descent-gauge { position: absolute; z-index: 6; left: calc(0.6cqw + clamp(40px, 4cqw, 62px) + 12px); top: 46%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 5px 5px 6px; border-radius: 10px; background: linear-gradient(#1a0806d9, #0c0404d9); border: 1px solid #6a2a12; box-shadow: 0 0 12px #000a, inset 0 0 8px #ff4a1a22;
  pointer-events: auto; cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s; }
.descent-gauge:hover { border-color: #ffb44a; box-shadow: 0 0 14px #ff6a1a88; }
.dg-head { display: flex; flex-direction: column; align-items: center; gap: 1px; font: 700 clamp(7px, 0.95vmin, 10px) Cinzel, Georgia, serif; letter-spacing: 0.08em; text-transform: uppercase; color: #ffcf8a; }
.dg-head svg { width: clamp(12px, 1.8vmin, 18px); height: clamp(12px, 1.8vmin, 18px); fill: #ff7a2a; stroke: #ffd27a; stroke-width: 1.2; filter: drop-shadow(0 0 4px #ff5a1a); }
.dg-q { position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; font: 700 10px Georgia, serif; font-style: normal;
  color: #200806; background: #ffcf8a; box-shadow: 0 0 6px #ff8a2a; animation: dg-q 2.4s ease-in-out infinite; }
@keyframes dg-q { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.3); } }
.dg-body { display: flex; align-items: stretch; gap: 4px; }
.dg-rings { display: flex; flex-direction: column; gap: 3px; }
.dg-rings i { display: grid; place-items: center; width: clamp(16px, 2.2vmin, 24px); height: clamp(16px, 2.2vmin, 24px); border-radius: 50%; font: 700 clamp(7px, 1vmin, 10px) Cinzel, Georgia, serif; font-style: normal;
  color: #a08a70; background: #120a08cc; border: 1px solid #4a3020; box-shadow: inset 0 0 4px #000; }
.dg-rings i.past { color: #ffcf8a; border-color: #8a3a1a; background: radial-gradient(circle, #5a1a0a, #200806); }
.dg-rings i.now { color: #fff; border-color: #ffb44a; background: radial-gradient(circle, #ff7a2a, #7a1a06); box-shadow: 0 0 10px #ff6a1a, 0 0 2px #fff inset; animation: dg-now 1.6s ease-in-out infinite alternate; }
@keyframes dg-now { from { box-shadow: 0 0 6px #ff6a1a; } to { box-shadow: 0 0 16px #ff8a2a; } }
.dg-fill { width: 6px; margin: 2px 0; border-radius: 3px; background: #120a08cc; border: 1px solid #4a3020; display: flex; align-items: flex-end; overflow: hidden; }
.dg-fill b { display: block; width: 100%; background: linear-gradient(to top, #7a1006, #ff6a1a, #ffd27a); box-shadow: 0 0 8px #ff6a1a; transition: height 0.6s ease; }
.dg-count { font: 700 clamp(10px, 1.4vmin, 14px) Cinzel, Georgia, serif; color: #ffe2b0; text-shadow: 0 0 6px #ff5a1a, 0 1px 2px #000; line-height: 1; }
.dg-count small { font-size: 0.7em; color: #c8a080; }
.descent-gauge.gain { animation: dg-gain 0.7s ease-out; }
@keyframes dg-gain { 0% { box-shadow: 0 0 30px #ffb44a, inset 0 0 14px #ff8a2a; border-color: #ffe2b0; } 100% { box-shadow: 0 0 12px #000a; } }
.descent-gauge.close { border-color: #ff7a2a; animation: dg-close 1.1s ease-in-out infinite alternate; }
@keyframes dg-close { from { box-shadow: 0 0 8px #ff4a1a66; } to { box-shadow: 0 0 22px #ff5a1acc, inset 0 0 10px #ff4a1a55; } }
.descent-gauge.close .dg-fill b { animation: dg-flicker 0.5s steps(2) infinite; }
@keyframes dg-flicker { 50% { filter: brightness(1.5); } }
.dg-next { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); width: max-content; max-width: 150px; padding: 5px 8px; border-radius: 8px;
  background: #1a0806ee; border: 1px solid #ff7a2a; color: #ffcf8a; font: 600 clamp(9px, 1.2vmin, 12px) Georgia, serif; box-shadow: 0 0 10px #ff4a1a66; pointer-events: none; }
.dg-next b { color: #fff; font-family: Cinzel, Georgia, serif; }
.dg-next small { display: block; margin-top: 2px; color: #f0d8b8; font-style: italic; font-size: 0.92em; line-height: 1.25; }
.fx-float.descent-pt { width: max-content; white-space: nowrap; }
.fx-float.descent-pt span { color: #ffe08a; text-shadow: 0 0 10px #ff4a1a, 0 0 20px #ff2a0a, 0 2px 3px #000; font-size: clamp(24px, 2.6cqw, 34px); -webkit-text-stroke: 1.5px #3a0a02; paint-order: stroke fill; }
.descent-callout { position: absolute; z-index: 35; left: calc(0.6cqw + clamp(40px, 4cqw, 62px) + 76px); top: 46%; transform: translateY(-50%); width: min(260px, 60vw); padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(#2a0c06f2, #120404f2); border: 1px solid #ff8a2a; box-shadow: 0 0 22px #ff4a1a77, 0 6px 18px #000c; color: #f0e2c8; font: 13px/1.35 Georgia, serif;
  pointer-events: auto; cursor: pointer; animation: dc-in 0.5s cubic-bezier(.2,1.4,.4,1) 1.9s both; } /* after the turn banner */
.descent-callout::before { content: ''; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; background: #200806; border-left: 1px solid #ff8a2a; border-bottom: 1px solid #ff8a2a; transform: translateY(-50%) rotate(45deg); }
.descent-callout > b { display: flex; align-items: center; gap: 5px; font: 700 15px Cinzel, Georgia, serif; color: #ffcf8a; letter-spacing: 0.05em; }
.descent-callout > b svg { width: 16px; height: 16px; fill: #ff7a2a; stroke: #ffd27a; }
.descent-callout p { margin: 4px 0; }
.descent-callout u { color: #ffb44a; font-size: 12px; }
.descent-callout.leaving { animation: dc-out 0.4s ease-in forwards; }
@keyframes dc-in { from { opacity: 0; transform: translate(-14px, -50%) scale(0.9); } }
@keyframes dc-out { to { opacity: 0; transform: translate(-10px, -50%) scale(0.95); } }
.arena.portrait .descent-callout { left: 54px; width: min(230px, 62vw); font-size: 12px; }
.descent-panel { max-width: 520px; text-align: left; border-color: #ff7a2a; background: linear-gradient(#24090599, #0c0303f0), #140505; box-shadow: 0 0 40px #ff4a1a55; }
.descent-panel h2 { display: flex; align-items: center; gap: 8px; color: #ffcf8a; font-family: Cinzel, Georgia, serif; }
.descent-panel h2 svg { width: 24px; height: 24px; fill: #ff7a2a; stroke: #ffd27a; }
.dp-lead { margin: 4px 0 10px; }
.dp-how { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dp-how div { padding: 6px 8px; border-radius: 8px; background: #ff5a1a18; border: 1px solid #6a2a12; }
.dp-how b { display: block; color: #ffd27a; }
.dp-how span { font-size: 0.85em; color: #c8b098; }
.dp-need { margin: 8px 0; }
.dp-circles { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 3px; }
.dp-circles li { display: grid; grid-template-columns: 26px 78px 1fr; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px; font-size: 0.88em; color: #a8988a; position: relative; }
.dp-circles li i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #4a3020; font: 700 9px Cinzel, Georgia, serif; font-style: normal; background: #120a08; }
.dp-circles li b { font-family: Cinzel, Georgia, serif; color: #d8c0a0; }
.dp-circles li.past { color: #c8a888; }
.dp-circles li.past i { border-color: #8a3a1a; color: #ffcf8a; background: #3a0e06; }
.dp-circles li.now { background: #ff5a1a2a; border: 1px solid #ff8a2a; color: #f8e8d0; }
.dp-circles li.now i { color: #fff; border-color: #ffb44a; background: radial-gradient(circle, #ff7a2a, #7a1a06); box-shadow: 0 0 8px #ff6a1a; }
.dp-circles li em { position: absolute; right: 6px; top: -7px; font: 700 9px Cinzel, Georgia, serif; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: #200806; background: #ffb44a; padding: 1px 5px; border-radius: 4px; }
@media (max-width: 520px) { .dp-how { grid-template-columns: 1fr; } .dp-circles li { grid-template-columns: 22px 84px 1fr; gap: 6px; } .dp-circles li b { font-size: 0.92em; } }
.arena.portrait .descent-gauge { left: 4px; top: 50%; transform: translateY(-50%) scale(0.85); transform-origin: left center; }
body.reduced-motion .descent { display: none; }

/* Realm picker: two groups to a row (wide, short boxes), each group's name and blurb on one line,
   and medallions sized from their group's box (container units) so they fill it instead of
   floating small in the middle. */
.ts-fit .faction-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
.ts-fit .fg { container-type: size; justify-content: center; gap: clamp(2px, 0.8vh, 8px); padding: clamp(4px, 1vh, 10px) 10px; }
.ts-fit .fg-head { flex-direction: row; justify-content: center; align-items: baseline; gap: 10px; margin: 0; padding: 0 0 clamp(2px, 0.6vh, 6px); white-space: nowrap; overflow: hidden; }
.ts-fit .fg-head span { overflow: hidden; text-overflow: ellipsis; }
.ts-fit .fg .factions { --m: clamp(44px, min(calc((100cqw - 64px) / 3.5), calc(100cqh - 78px)), 170px); justify-content: center; gap: 4px clamp(8px, 3cqw, 28px) !important; }
/* A row of four realms (Attrition) packs its medallions a little smaller so it never overflows. */
.ts-fit .fg.n4 .factions { --m: clamp(40px, min(calc((100cqw - 84px) / 4.7), calc(100cqh - 78px)), 150px); gap: 4px clamp(6px, 2cqw, 20px) !important; }
.ts-fit .fg .faction.medallion .medal-name { font-size: clamp(9px, calc(var(--m) * 0.13), 17px); }
.ts-fit .fg .faction.medallion .medal-name.long { font-size: clamp(8px, calc(var(--m) * 0.105), 14px); }
.ts-fit .fg .medal-check { width: clamp(18px, calc(var(--m) * 0.24), 34px); height: clamp(18px, calc(var(--m) * 0.24), 34px); }
@media (max-width: 520px) { .ts-fit .faction-groups { grid-template-columns: 1fr; grid-template-rows: none; } .ts-fit .fg { container-type: inline-size; } }
/* Narrow panels: the deck line wraps onto two rows instead of squeezing its text into a column. */
.ts-fit .deck-line { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
.ts-fit .deck-line > div:first-child { flex: 1 1 200px; }
.ts-fit .deck-line .deck-choices { flex: 1 1 100%; justify-content: center; flex-wrap: wrap; }
/* A long deck name never runs past the panel: it trims with an ellipsis (the full name is in the tooltip). */
.ts-fit .deck-choices .dc-chip { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Narrow group boxes: the blurb drops under the group name and wraps instead of being cut off,
   or, when the box is short too, it's left out (the group name says enough). */
@container (max-width: 460px) and (max-height: 170px) { .ts-fit .fg-head span { display: none; } }
@container (max-width: 460px) and (min-height: 170px) {
  .ts-fit .fg-head { flex-direction: column; align-items: center; gap: 0; white-space: normal; text-align: center; }
  .ts-fit .fg-head span { font-size: 0.85em; line-height: 1.2; overflow: visible; }
}

/* Void: shadow motes — tiny dark-matter orbs with a violet rim, a star of light at the heart. */
.fx-p.voidmote { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #e8dcff 0 12%, #2a1240 30%, #0a0414 65%, transparent 75%); box-shadow: 0 0 9px #9a6aff, 0 0 3px #b48cff inset; opacity: 0.9; }
.fx-p.snowflake { width: 9px; height: 9px; background: #f2fbff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 4px #9fe0ff); opacity: 0.95; }
/* Void: a Hollow minion with its bonus on (its owner's hand is empty) breathes a violet shadow inside its frame. */
.minion.hollow.on .m-art { animation: hollow-breathe 2.4s ease-in-out infinite; }
@keyframes hollow-breathe { 0%, 100% { box-shadow: inset 0 0 10px #6a3aff88; } 50% { box-shadow: inset 0 0 26px #9a6affee, inset 0 0 6px #e8dcff; } }
@media (prefers-reduced-motion: reduce) { .minion.hollow.on .m-art { animation: none; box-shadow: inset 0 0 18px #9a6affcc; } }
/* Void: black-violet frames, lavender trim. */
.big-card.f-void { --frame: #2a1a40; --frame-hi: #c8a8ff; --body: #0a0614; }
.big-card.t-spell.f-void { --frame: #1a1a3a; --frame-hi: #8ad8ff; --body: #060a14; }
.big-card.t-trap.f-void { --frame: #2a1430; --frame-hi: #d88aff; --body: #0e0612; }
.big-card.shard.f-void, .minion.shardm.f-void { --accent: #b48cff; }
.arena.f-void { --felt: #1c1430; --felt-2: #07040e; --rim: #b48cff; }
.medallion.f-void { --fc: #b48cff; } .ts-guide.f-void { --fc: #b48cff; }
.big-card.f-ice-age { --frame: #2a4258; --frame-hi: #c8f0ff; --body: #0a141c; }
.big-card.t-spell.f-ice-age { --frame: #4a3a2a; --frame-hi: #ffb86a; --body: #140e08; }
.big-card.t-trap.f-ice-age { --frame: #3a3a32; --frame-hi: #d8c8a0; --body: #100e0a; }
.big-card.shard.f-ice-age, .minion.shardm.f-ice-age { --accent: #9fe0ff; }
.arena.f-ice-age { --felt: #2a3036; --felt-2: #0c1014; --rim: #9fe0ff; }
.medallion.f-ice-age { --fc: #9fe0ff; } .ts-guide.f-ice-age { --fc: #9fe0ff; }
/* Void (Singularity): a Pulled card in hand wears a small violet tag (with its Collapse keyword). */
.card .hand-tag { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); z-index: 6; white-space: nowrap; pointer-events: none;
  padding: 1px 7px; border-radius: 999px; font: 700 10px/1.4 sans-serif; color: #efe6ff; background: #2a1450; border: 1px solid #b48cff; box-shadow: 0 0 8px #9a6aff99; }

/* Collection search: a box in the top bar; results replace the realm page. */
.book-head { gap: 12px; }
.coll-search { position: relative; flex: 1 1 auto; max-width: 460px; display: flex; align-items: center; }
.coll-search .cs-icon { position: absolute; left: 11px; width: 16px; height: 16px; opacity: 0.7; pointer-events: none; display: grid; place-items: center; }
.coll-search .cs-icon svg { width: 16px; height: 16px; }
.coll-search input { width: 100%; padding: 8px 34px 8px 34px; border-radius: 999px; border: 1px solid #6a5530; background: #1a120c; color: #f3e6c8;
  font: 600 14px/1.2 inherit; outline: none; box-shadow: inset 0 1px 4px #000a; }
.coll-search input::placeholder { color: #a8946c; }
.coll-search input:focus { border-color: #e7c27a; box-shadow: inset 0 1px 4px #000a, 0 0 0 2px #e7c27a55; }
.coll-search input::-webkit-search-cancel-button { display: none; }
.coll-search .cs-clear { position: absolute; right: 4px; padding: 2px 9px !important; min-height: 0 !important; border-radius: 999px !important; font-size: 13px !important; }
.search-chips { flex-wrap: wrap; }
.search-empty { text-align: center; margin: 40px 0; color: #6a5530; font-size: 16px; }
@media (max-width: 640px) { .book-head { flex-wrap: wrap; } .coll-search { order: 3; flex-basis: 100%; max-width: none; } }