/* เถ้าแห่งคำสาป: สำรับคำสาป — Ember Reliquary chrome */
:root {
  /* Design tokens (Ember Reliquary) */
  --bg-deep: #0c0a09;
  --bg-panel: #161210f2;
  --ink: #f3ebe0;
  --brass: #c9a227;
  --brass-dim: #8a7030;
  --ember: #c45c26;
  --ember-hot: #e87a3a;
  --mist: #a89a88;
  --line: #3a3228;

  /* Radius rhythm */
  --r-panel: 16px;
  --r-card: 12px;
  --r-pill: 999px;

  /* Shadows: one soft ambient + one close rim */
  --shadow-ambient: 0 12px 40px #00000088;
  --shadow-rim: 0 0 0 1px color-mix(in srgb, var(--brass) 28%, transparent);
  --shadow-inset: inset 0 1px 0 #ffffff14, inset 0 -1px 0 #00000055;

  /* Legacy aliases (game + existing selectors) */
  --bg: var(--bg-deep);
  --bg2: #14110e;
  --panel: #1a1612;
  --panel2: #221c16;
  --gold: var(--brass);
  --gold2: #e8d5a3;
  --silver: #b0a898;
  --blood: #c83a4a;
  --teal: #3db8a0;
  --void: #8a78b8;
  --text: var(--ink);
  --muted: var(--mist);
  --danger: #e05060;
  --ok: #5cbc78;
  --block: #6aa8d4;
  --common: #b0a898;
  --rare: #6a9ccc;
  --epic: #a080c0;
  --curse: var(--ember-hot);
  --ash: #d4bc78;
  --font: "Sarabun", "Noto Sans Thai", "Segoe UI", system-ui, sans-serif;
  --card-w: 148px;
  --card-h: 220px;
  --lh-body: 1.55;
  --lh-tight: 1.35;
  --space: 8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg-deep);
  color: var(--ink);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ambient bg — charcoal ink + soft ember vignette */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, #3a221888, transparent 70%),
    radial-gradient(ellipse 50% 40% at 12% 88%, #4a1c1088, transparent 65%),
    radial-gradient(ellipse 45% 35% at 92% 78%, #2a181088, transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent 45%, #060504cc 100%),
    var(--bg-deep);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: .35; mix-blend-mode: soft-light;
}

.app { height: 100%; display: flex; flex-direction: column; position: relative; }

/* ——— Screens ——— */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
  overflow-y: auto;
}
.screen.active { opacity: 1; pointer-events: auto; z-index: 2; }

/* Title — Ember Reliquary (layered scene + crest + panels) */
.title-screen {
  gap: 0;
  justify-content: center;
  padding: 20px 16px 28px;
  overflow: hidden;
}
.title-scene {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.title-scene-art {
  position: absolute; inset: -4%;
  background:
    url("assets/scenes/ashwild.jpg") center 42% / cover no-repeat,
    linear-gradient(180deg, #1a1008, #0c0a09);
  filter: saturate(.72) contrast(1.08) brightness(.55);
  transform: scale(1.04);
  animation: titleSceneDrift 28s ease-in-out infinite alternate;
}
.title-scene-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 28%, #c45c2644, transparent 65%),
    radial-gradient(ellipse 55% 40% at 50% 78%, #c9a22722, transparent 60%),
    linear-gradient(180deg, #0c0a09aa 0%, #0c0a0966 35%, #0c0a09cc 100%);
}
.title-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 70% at 50% 45%, transparent 30%, #060504ee 92%),
    linear-gradient(90deg, #060504cc 0%, transparent 18%, transparent 82%, #060504cc 100%);
  box-shadow: inset 0 0 120px #000c;
}
.title-embers {
  position: absolute; inset: 0; overflow: hidden;
}
.title-ember {
  position: absolute;
  bottom: -8%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffc090, var(--ember-hot) 45%, transparent 70%);
  box-shadow: 0 0 6px #e87a3aaa, 0 0 14px #c45c2666;
  opacity: .0;
  animation: titleEmberRise linear infinite;
  will-change: transform, opacity;
}
@keyframes titleSceneDrift {
  from { transform: scale(1.04) translate3d(-1.2%, .4%, 0); }
  to   { transform: scale(1.08) translate3d(1.4%, -1%, 0); }
}
@keyframes titleEmberRise {
  0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  12%  { opacity: .85; }
  70%  { opacity: .45; }
  100% { transform: translate3d(var(--ex, 12px), -110vh, 0) scale(1.15); opacity: 0; }
}

.title-frame {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  width: min(560px, 100%);
}
.title-panel {
  width: 100%;
  border-radius: calc(var(--r-panel) + 4px);
  border: 1px solid color-mix(in srgb, var(--brass) 32%, var(--line));
  background:
    linear-gradient(165deg, #221a12f2 0%, #14100ce8 48%, #0e0b09f0 100%);
  box-shadow:
    var(--shadow-ambient),
    var(--shadow-rim),
    var(--shadow-inset),
    0 0 40px #c45c2618;
  backdrop-filter: blur(10px);
}
.title-hero-panel {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 22px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.title-hero-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, #c9a22714, transparent 28%),
    radial-gradient(ellipse 80% 50% at 50% 0%, #c45c2622, transparent 60%);
}
.title-hero-panel > * { position: relative; z-index: 1; }

.title-crest-wrap {
  position: relative;
  width: 84px; height: 84px;
  margin-bottom: 14px;
  display: grid; place-items: center;
}
.title-crest-aura {
  position: absolute; inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, #c45c2644, transparent 68%);
  animation: titleCrestPulse 3.6s ease-in-out infinite;
}
.title-crest-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--brass) 55%, transparent);
  box-shadow:
    0 0 0 4px #0c0a09aa,
    0 0 28px #c9a22733,
    inset 0 0 18px #c45c2633;
  background:
    conic-gradient(from 210deg, #3a2818, #1a120c, #4a3018, #1a120c, #3a2818);
}
.title-crest {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold2); font-size: 1.7rem; font-weight: 800;
  background: radial-gradient(circle at 40% 32%, #4a3420, #120e0a 72%);
  box-shadow: var(--shadow-inset), 0 0 22px #c45c2644;
  text-shadow: 0 0 12px #c9a22766;
  z-index: 1;
}
@keyframes titleCrestPulse {
  0%, 100% { opacity: .55; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

.title-eyebrow {
  color: color-mix(in srgb, var(--brass) 75%, var(--mist));
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 8px;
  opacity: .9;
}
.title-screen h1 {
  font-size: clamp(1.85rem, 5.4vw, 2.85rem);
  font-weight: 800;
  letter-spacing: .06em;
  background: linear-gradient(180deg, #fff4d4 0%, var(--gold2) 32%, var(--brass) 68%, var(--brass-dim));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-align: center;
  filter: drop-shadow(0 2px 18px #c9a22755);
  line-height: 1.25;
}
.title-screen .sub {
  color: var(--mist); margin: 10px 0 8px; font-size: .9rem; text-align: center;
  letter-spacing: .08em; font-weight: 600;
}
.title-screen .title-blurb {
  color: #d8cfc0; max-width: 420px; text-align: center;
  margin: 0 0 14px; font-size: .9rem; line-height: var(--lh-body);
  opacity: .95;
}
.title-ornament {
  display: flex; align-items: center; gap: 10px;
  width: min(280px, 70%); margin: 0 0 18px; color: var(--brass-dim);
  opacity: .85;
}
.title-ornament span {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brass) 55%, transparent), transparent);
}
.title-ornament i { font-style: normal; font-size: .85rem; color: var(--ember-hot); text-shadow: 0 0 10px #c45c2666; }
.title-actions { margin-top: 0; }

/* Profile dock on title */
.title-profile-dock {
  padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.pd-active {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.pd-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 1.15rem; font-weight: 800; color: #1a1008;
  border: 1.5px solid color-mix(in srgb, var(--pc, var(--brass)) 70%, #fff);
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc, var(--brass)) 75%, #fff), var(--pc, var(--brass)));
  box-shadow: 0 0 16px color-mix(in srgb, var(--pc, var(--brass)) 35%, transparent), var(--shadow-inset);
}
.pd-meta { min-width: 0; }
.pd-label {
  font-size: .68rem; letter-spacing: .1em; color: var(--mist); font-weight: 700;
}
.pd-name {
  font-size: 1.02rem; font-weight: 800; color: var(--gold2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
  line-height: var(--lh-tight);
}
.pd-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-actions .btn {
  padding: 8px 14px; font-size: .88rem; border-radius: 12px;
}

/* Profile modal */
.profile-modal[hidden] { display: none !important; }
.profile-modal {
  position: absolute; inset: 0; z-index: 8;
  display: grid; place-items: center; padding: 16px;
}
.profile-modal-backdrop {
  position: absolute; inset: 0;
  background: #050403cc;
  backdrop-filter: blur(4px);
}
.profile-modal-card {
  position: relative; z-index: 1;
  width: min(440px, 100%);
  max-height: min(88vh, 720px);
  overflow: auto;
  border-radius: calc(var(--r-panel) + 2px);
  border: 1px solid color-mix(in srgb, var(--brass) 40%, var(--line));
  background: linear-gradient(180deg, #1c1612f8, #100e0af5);
  box-shadow: var(--shadow-ambient), var(--shadow-rim), 0 0 48px #c45c2622;
  padding: 18px 18px 16px;
}
.pm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 6px;
}
.pm-head h3 {
  color: var(--gold2); font-size: 1.15rem; font-weight: 800; letter-spacing: .03em;
}
.pm-x {
  appearance: none; border: 1px solid var(--line); background: #1a1510;
  color: var(--mist); width: 34px; height: 34px; border-radius: 10px;
  font-size: 1.25rem; cursor: pointer; line-height: 1;
}
.pm-x:hover { color: var(--gold2); border-color: var(--brass-dim); }
.pm-hint {
  color: var(--mist); font-size: .82rem; line-height: var(--lh-body);
  margin-bottom: 14px;
}
.pm-list {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
}
.pm-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line);
  background: #14110ecc;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pm-item:hover {
  border-color: color-mix(in srgb, var(--pc, var(--brass)) 45%, var(--line));
  transform: translateY(-1px);
}
.pm-item.is-active {
  border-color: color-mix(in srgb, var(--pc, var(--brass)) 70%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc, var(--brass)) 28%, transparent), 0 8px 20px #0006;
}
.pm-item .pd-avatar { width: 36px; height: 36px; font-size: 1rem; }
.pm-item-body { flex: 1; min-width: 0; }
.pm-item-name {
  font-weight: 800; color: var(--ink); font-size: .98rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-item-tag { font-size: .72rem; color: var(--mist); margin-top: 2px; }
.pm-item-btns { display: flex; gap: 6px; flex-shrink: 0; }
.pm-mini {
  appearance: none; border: 1px solid var(--line); background: #1a1510;
  color: #d4c8b4; font-family: inherit; font-size: .75rem; font-weight: 700;
  padding: 6px 9px; border-radius: 8px; cursor: pointer;
}
.pm-mini:hover { border-color: var(--brass-dim); color: var(--gold2); }
.pm-mini.danger { color: #ffb8c0; border-color: color-mix(in srgb, var(--blood) 50%, var(--line)); }
.pm-mini.danger:hover { border-color: var(--blood); }
.pm-add {
  width: 100%; margin-top: 2px;
  border-style: dashed !important;
  background: #12100c !important;
}
.pm-form {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: none;
}
.pm-form.open { display: block; }
.pm-label {
  display: block; font-size: .72rem; letter-spacing: .08em;
  color: var(--mist); font-weight: 700; margin-bottom: 6px;
}
.pm-input {
  width: 100%; appearance: none;
  background: #0c0a09; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 1rem; font-weight: 600;
  padding: 10px 12px; margin-bottom: 12px;
  outline: none;
}
.pm-input:focus {
  border-color: color-mix(in srgb, var(--brass) 55%, var(--line));
  box-shadow: 0 0 0 2px #c9a22722;
}
.pm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.pm-swatches, .pm-sigils {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pm-swatch, .pm-sigil {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  display: grid; place-items: center;
  font-size: .95rem; background: #1a1510; color: var(--gold2);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.pm-swatch { box-shadow: inset 0 0 0 1px #0006; }
.pm-swatch.is-on, .pm-sigil.is-on {
  border-color: #fff8e8; transform: scale(1.08);
  box-shadow: 0 0 12px #c9a22755;
}
.pm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pm-actions .btn { padding: 10px 16px; font-size: .92rem; }

@media (max-width: 520px) {
  .title-profile-dock { justify-content: center; text-align: left; }
  .pd-name { max-width: 160px; }
  .pm-row { grid-template-columns: 1fr; }
  .title-hero-panel { padding: 22px 16px 20px; }
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  appearance: none; border: 1px solid color-mix(in srgb, var(--brass) 70%, transparent);
  background: linear-gradient(180deg, #3a2c18 0%, #241a0e 55%, #16100a 100%);
  color: var(--gold2); font-family: inherit; font-size: 1.02rem; font-weight: 700;
  padding: 12px 28px; border-radius: var(--r-panel); cursor: pointer;
  box-shadow: var(--shadow-ambient), var(--shadow-inset), 0 0 18px #c9a22722;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s;
  letter-spacing: .03em;
}
.btn:hover {
  transform: translateY(-2px);
  border-color: var(--brass);
  box-shadow: 0 14px 36px #00000077, 0 0 22px #c9a22733, var(--shadow-inset);
  filter: brightness(1.06);
}
.btn:active { transform: translateY(0); filter: brightness(.96); }
.btn.secondary {
  border-color: var(--line); color: #d4c8b4;
  background: linear-gradient(180deg, #2a241c, #16120e);
  box-shadow: var(--shadow-ambient), var(--shadow-inset);
}
.btn.secondary:hover { border-color: color-mix(in srgb, var(--brass) 45%, var(--line)); color: var(--gold2); }
.btn.danger {
  border-color: color-mix(in srgb, var(--blood) 70%, transparent);
  color: #ffb8c0;
  background: linear-gradient(180deg, #3a1520, #1a0a10);
  box-shadow: var(--shadow-ambient), var(--shadow-inset);
}
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; filter: none; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }

/* Hero select */
.hero-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; width: min(920px, 100%); margin-top: 12px;
}
.hero-card {
  background: linear-gradient(180deg, #1c1814f5, #12100cee);
  border: 1px solid var(--line);
  border-radius: var(--r-panel); overflow: hidden; cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
  position: relative;
  box-shadow: var(--shadow-ambient), var(--shadow-inset);
  backdrop-filter: blur(8px);
}
.hero-card:hover, .hero-card:focus {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--hc, var(--brass)) 65%, var(--line));
  box-shadow:
    var(--shadow-ambient),
    0 0 0 1px color-mix(in srgb, var(--hc, var(--brass)) 35%, transparent),
    0 10px 32px color-mix(in srgb, var(--hc, var(--brass)) 22%, transparent);
}
.hero-card .art {
  height: 140px; background: #0a0806 center/cover no-repeat;
  position: relative;
}
.hero-card .art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(transparent 35%, #12100c);
}
.hero-card .body { padding: 12px 14px 14px; }
.hero-card h3 { font-size: 1.15rem; color: var(--hc, var(--brass)); line-height: var(--lh-tight); }
.hero-card .role { font-size: .78rem; color: var(--mist); margin: 2px 0 6px; letter-spacing: .04em; }
.hero-card .lore { font-size: .85rem; color: #d4c8b8; line-height: var(--lh-body); }
.hero-card .hp { position: absolute; top: 10px; right: 10px;
  background: #0a0806cc; border: 1px solid color-mix(in srgb, var(--blood) 70%, transparent); color: #ffb8c0;
  padding: 3px 10px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 700; z-index: 1;
  box-shadow: 0 4px 12px #0008; }

/* Map / path — carved HUD rhythm */
.path-screen { justify-content: flex-start; padding-top: 24px; }
.path-screen h2 { color: var(--gold2); margin-bottom: 6px; letter-spacing: .04em; font-weight: 800; }
.path-meta { color: var(--mist); margin-bottom: 18px; font-size: .9rem; line-height: var(--lh-body); }
.node-track {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  width: min(960px, 100%);
}
.node {
  width: 88px; min-height: 88px; border-radius: var(--r-card);
  background: linear-gradient(180deg, #1e1a16, #14110e);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 8px; font-size: .72rem; text-align: center;
  color: var(--mist); position: relative;
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
  box-shadow: var(--shadow-ambient), var(--shadow-inset);
}
.node .glyph { font-size: 1.4rem; line-height: 1; }
.node.done { border-color: #2a3a28; opacity: .5; }
.node.current {
  border-color: color-mix(in srgb, var(--brass) 75%, transparent);
  color: var(--ink);
  box-shadow: var(--shadow-ambient), 0 0 20px #c9a22744, var(--shadow-inset);
  animation: pulse 2s ease-in-out infinite;
}
.node.boss { border-color: color-mix(in srgb, var(--blood) 65%, var(--line)); }
.node.boss.current { box-shadow: var(--shadow-ambient), 0 0 22px #c83a4a44; }
.node.shrine { border-color: color-mix(in srgb, var(--teal) 55%, var(--line)); }
.node.shop { border-color: color-mix(in srgb, var(--ash) 55%, var(--line)); }
.node.shop.current { box-shadow: var(--shadow-ambient), 0 0 22px #d4bc7844; }
.node.final { border-color: color-mix(in srgb, var(--void) 55%, var(--line)); }
@keyframes pulse {
  0%,100% { box-shadow: var(--shadow-ambient), 0 0 14px #c9a22733, var(--shadow-inset); }
  50% { box-shadow: var(--shadow-ambient), 0 0 24px #c9a22755, var(--shadow-inset); }
}

/* ——— Battle ——— */
.battle {
  justify-content: stretch; align-items: stretch; padding: 0;
}
.battle-top {
  flex: 1; display: flex; flex-direction: column;
  padding: 12px 14px 0; min-height: 0; position: relative;
}
.battle-hud {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; z-index: 5;
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #0e0c0acc; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 5px 12px; font-size: .82rem; font-weight: 600;
  box-shadow: 0 4px 14px #0006, var(--shadow-inset);
  backdrop-filter: blur(6px);
}
.pill .n { font-weight: 800; color: var(--gold2); }
.region-tag { color: var(--mist); font-size: .78rem; letter-spacing: .08em; font-weight: 600; }

.enemies {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 22px; flex-wrap: wrap; padding: 6px 12px; min-height: 150px;
}
.enemy {
  width: clamp(92px, 19vh, 180px); max-width: 42vw; text-align: center; position: relative;
  cursor: pointer; transition: transform .15s;
}
.enemy:hover, .enemy.targeted { transform: scale(1.04); }
.enemy.targeted .portrait { outline: 2px solid var(--gold); outline-offset: 3px; }
.enemy.dead { opacity: .35; filter: grayscale(1); pointer-events: none; }
.enemy .intent {
  display: inline-flex; align-items: center; gap: 4px;
  background: #14100cee; border: 1px solid var(--line);
  border-radius: 8px; padding: 3px 8px; font-size: .78rem; font-weight: 700;
  margin-bottom: 6px; color: var(--ink);
  box-shadow: 0 4px 12px #0007;
}
.intent.attack { border-color: var(--blood); color: #ffb0bc; }
.intent.defend { border-color: var(--block); color: #b8e0ff; }
.intent.buff { border-color: var(--ember); color: #ffc090; }
.enemy .portrait {
  width: 100%; aspect-ratio: 1; border-radius: var(--r-card);
  background: #100c0a center/cover no-repeat;
  border: 1px solid color-mix(in srgb, var(--brass) 22%, var(--line));
  box-shadow: var(--shadow-ambient), inset 0 1px 0 #ffffff12, inset 0 0 36px #0008;
  position: relative; overflow: hidden;
}
.enemy .portrait.svg-art { display: flex; align-items: center; justify-content: center; }
.enemy .name { margin-top: 6px; font-weight: 700; font-size: .9rem; }
.hpbar {
  height: 12px; background: #120e0c; border-radius: 6px;
  border: 1px solid #3a2828; overflow: hidden; margin-top: 4px; position: relative;
  box-shadow: inset 0 1px 3px #0008;
}
.hpbar .fill { height: 100%; background: linear-gradient(90deg, #6a1420, var(--blood)); transition: width .3s; }
.hpbar .block-fill {
  position: absolute; top: 0; right: 0; height: 100%;
  background: linear-gradient(90deg, #2a5070, var(--block)); transition: width .3s;
}
.hpbar .label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 800; text-shadow: 0 1px 2px #000; letter-spacing: .02em;
}
.enemy .status { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-top: 4px; min-height: 18px; }
.chip {
  font-size: .65rem; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: #2a2030; border: 1px solid #5a4860; color: var(--text);
}
.chip.bleed { border-color: var(--blood); color: #ffb0bc; }
.chip.weak { border-color: #888; color: #ccc; }
.chip.buff { border-color: var(--ember); color: #ffc090; }

/* Player bar = hero panel · board lane · energy/end-turn dock (HS layout) */
.player-bar {
  display: grid; grid-template-columns: minmax(220px, 310px) 1fr minmax(150px, auto);
  align-items: center; gap: 14px;
  padding: 8px 14px 10px;
  background: linear-gradient(180deg, transparent 0%, #0c0a0888 40%, #0a0806dd 100%);
  border-top: 1px solid color-mix(in srgb, var(--brass) 12%, transparent);
}
.hero-panel { display: flex; align-items: center; gap: 12px; min-width: 0; }
.player-portrait {
  width: 56px; height: 56px; border-radius: 10px;
  background: center/cover;
  border: 1px solid color-mix(in srgb, var(--brass) 70%, transparent);
  box-shadow: 0 4px 16px #0008, 0 0 10px #c9a22733, inset 0 1px 0 #ffffff22;
}
.player-stats { flex: 1; min-width: 160px; }
.player-stats .name { font-weight: 800; color: var(--gold2); font-size: .95rem; letter-spacing: .02em; }
.res-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.res {
  font-size: .75rem; font-weight: 700; padding: 3px 8px; border-radius: 6px;
  background: #16120ecc; border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 #ffffff0a;
}
.res.energy { border-color: var(--gold); color: var(--gold2); }
.res.block { border-color: var(--block); color: #b8e0ff; }
.res.guilt { border-color: var(--ember); color: #ffc090; }
.res.souls { border-color: var(--teal); color: var(--teal); }
.res.madness { border-color: var(--void); color: var(--void); }
.res.minion { border-color: var(--teal); color: #a8ffe8; }

.end-turn {
  padding: 14px 26px; font-size: 1.12rem; min-width: 150px; min-height: 56px;
  border-radius: var(--r-panel); letter-spacing: .05em;
  background: linear-gradient(180deg, #5a4018 0%, #3a2a10 50%, #1e160a 100%);
  border: 1px solid var(--gold2);
  box-shadow: var(--shadow-ambient), 0 0 18px #c9a22733, inset 0 1px 0 #fff4, inset 0 -3px 0 #0006;
}
.end-turn:hover:not(:disabled) {
  box-shadow: 0 14px 36px #0008, 0 0 24px #c9a22744, inset 0 1px 0 #fff4, inset 0 -3px 0 #0006;
}
.end-turn:disabled { filter: grayscale(.65) brightness(.85); font-size: .95rem; }

/* Hand */
.hand-area {
  background: linear-gradient(180deg, #14100cee, #0a0806);
  border-top: 1px solid color-mix(in srgb, var(--brass) 18%, var(--line));
  padding: 8px 8px 6px;
  height: calc(var(--card-h) + 40px); flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  box-shadow: 0 -8px 28px #0006;
}
.hand {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 0; flex-wrap: nowrap; width: 100%;
  perspective: 900px;
  overflow: visible; padding: 6px 12px 2px;
}
.hand::-webkit-scrollbar { height: 4px; }
.pile-info { font-size: .75rem; color: var(--muted); }

/* ——— CARD CHROME ——— */
.card {
  --cw: var(--card-w); --ch: var(--card-h);
  width: var(--cw); height: var(--ch); flex-shrink: 0;
  position: relative; border-radius: 12px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s, filter .2s;
}
.card.deal { animation: dealIn .35s ease backwards; }
@keyframes dealIn {
  from { opacity: 0; transform: translateY(40px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.card:hover {
  transform: translateY(-18px) rotateX(4deg) scale(1.06);
  z-index: 10;
  box-shadow: 0 16px 40px #000c, 0 0 24px var(--glow, #d4af6a55);
}
.card.unplayable { filter: brightness(.55); cursor: not-allowed; }
.card.unplayable:hover { transform: translateY(-6px); }
.card.discarding {
  animation: discardOut .3s ease forwards;
}
@keyframes discardOut {
  to { opacity: 0; transform: translateY(-60px) scale(.6) rotate(8deg); }
}

.card-inner {
  width: 100%; height: 100%; border-radius: var(--r-card); overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, #2a241c 0%, #16120e 48%, #1a1410 100%);
  border: 1.5px solid var(--rarity, var(--common));
  box-shadow:
    inset 0 1px 0 #ffffff1a,
    inset 0 0 18px #0009,
    0 0 0 1px #0008,
    0 6px 18px #000a;
  position: relative;
}
.card.rarity-common { --rarity: var(--common); --glow: #b0a89833; }
.card.rarity-rare {
  --rarity: var(--rare); --glow: #6a9ccc44;
}
.card.rarity-rare .card-inner {
  box-shadow:
    inset 0 1px 0 #ffffff1a,
    inset 0 0 20px #14202866,
    0 0 10px #6a9ccc33,
    0 6px 18px #000a;
}
.card.rarity-epic {
  --rarity: var(--epic); --glow: #a080c055;
}
.card.rarity-epic .card-inner {
  border-color: var(--epic);
  box-shadow:
    inset 0 1px 0 #ffffff1a,
    inset 0 0 22px #24183066,
    0 0 12px #a080c044,
    0 6px 18px #000a;
  animation: foilShimmer 4s ease-in-out infinite;
}
.card.rarity-curse {
  --rarity: var(--curse); --glow: #e87a3a66;
}
.card.rarity-curse .card-inner {
  border-color: var(--curse);
  box-shadow:
    inset 0 1px 0 #ffffff14,
    inset 0 0 28px #3a140866,
    0 0 14px #c45c2644,
    0 6px 18px #000a;
  animation: cursePulse 2.8s ease-in-out infinite;
}
@keyframes foilShimmer {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.04); }
}
@keyframes cursePulse {
  0%,100% { filter: brightness(1); box-shadow: inset 0 1px 0 #ffffff14, inset 0 0 28px #3a140866, 0 0 12px #c45c2633, 0 6px 18px #000a; }
  50% { filter: brightness(1.06); box-shadow: inset 0 1px 0 #ffffff14, inset 0 0 28px #3a140866, 0 0 18px #e87a3a55, 0 6px 18px #000a; }
}

/* foil corner ornaments — brass hairline corners */
.card-inner::before, .card-inner::after {
  content: ""; position: absolute; width: 16px; height: 16px; z-index: 4; pointer-events: none;
  border: 1.5px solid color-mix(in srgb, var(--rarity, var(--brass)) 80%, transparent); opacity: .65;
}
.card-inner::before { top: 5px; left: 5px; border-right: none; border-bottom: none; border-radius: 3px 0 0 0; }
.card-inner::after { bottom: 5px; right: 5px; border-left: none; border-top: none; border-radius: 0 0 3px 0; }

/* cost = big glass energy gem (matches #energy-gems crystals) */
.card .cost {
  position: absolute; top: -4px; left: -4px; z-index: 6;
  width: 42px; height: 42px; border-radius: 50%;
  background:
    radial-gradient(ellipse 55% 35% at 40% 25%, #ffffffcc, transparent 70%),
    radial-gradient(circle at 50% 60%, #7ec8e8, #2a6aa0 45%, #0e2848 80%);
  border: 2px solid var(--gold2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.35rem; color: #fff;
  text-shadow: 0 1px 0 #0a1a40, 0 0 6px #0a2a6a, 0 2px 3px #000;
  box-shadow: 0 3px 10px #000c, 0 0 10px #4a90b855, inset 0 -4px 8px #08204a, inset 0 2px 3px #fff6;
}
.card .cost span { transform: translateY(1px); }

.card .art-wrap {
  height: 55%; position: relative; overflow: hidden;
  background: #0c0a12;
}
.card .art-wrap img, .card .art-wrap .svg-face {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.card .art-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(transparent, #1a1420);
}

.card .name-bar {
  background: linear-gradient(90deg, #221c16, #3a2e1a 42%, #221c16);
  border-top: 1px solid color-mix(in srgb, var(--brass) 28%, transparent);
  border-bottom: 1px solid #2a241c;
  padding: 4px 6px; text-align: center;
  font-weight: 800; font-size: .78rem; letter-spacing: .02em;
  color: var(--gold2); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


.card .effect {
  flex: 1; padding: 5px 8px 7px;
  font-size: .72rem; line-height: var(--lh-tight); text-align: center;
  color: #e8e0d4; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
}
.card .effect b, .card .effect strong {
  color: #fff; font-weight: 900; font-size: 1.05em;
}
.card .kw-row { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.card .kw {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: .55rem; font-weight: 700; padding: 1px 5px 1px 3px; border-radius: var(--r-pill);
  background: #1e1a16; border: 1px solid var(--line); color: #d0c4b4;
  cursor: help; position: relative; line-height: 1.35;
}
.card .kw i { font-style: normal; }
.card .kw .ico { width: 10px; height: 10px; flex-shrink: 0; }

/* reward / map cards slightly larger option */
.card.lg { --cw: 160px; --ch: 238px; }
.card.sm { --cw: 110px; --ch: 164px; }

/* overlays — frosted dark glass */
.overlay {
  position: absolute; inset: 0; z-index: 20;
  background: #0a0806cc; backdrop-filter: blur(8px) saturate(.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px; gap: 14px;
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.overlay.show { opacity: 1; pointer-events: auto; }
.overlay h2 { color: var(--gold2); font-size: 1.4rem; text-align: center; letter-spacing: .03em; font-weight: 800; }
.overlay p { color: var(--mist); text-align: center; max-width: 420px; line-height: var(--lh-body); }
.reward-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.float-dmg {
  position: absolute; font-weight: 900; font-size: 1.4rem;
  pointer-events: none; z-index: 30;
  animation: floatUp .9s ease forwards;
  text-shadow: 0 2px 4px #000;
}
.float-dmg.dmg { color: #ff6a7a; }
.float-dmg.block { color: #7ec8ff; }
.float-dmg.heal { color: #6fd38a; }
@keyframes floatUp {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-50px) scale(1.2); }
}

.tip-stack {
  position: absolute; top: 58px; left: 14px; right: 14px; z-index: 8;
  display: flex; flex-direction: row; align-items: flex-start; gap: 8px;
  pointer-events: none;
}
.tip-stack > * { pointer-events: auto; max-width: min(310px, 30vw); }
.tip-stack > .class-tip { margin-left: auto; } /* tutorial left · class gimmick right */
.tutorial-tip {
  background: var(--bg-panel); border: 1px solid color-mix(in srgb, var(--brass) 55%, transparent);
  padding: 10px 14px; border-radius: 12px;
  font-size: .88rem; line-height: var(--lh-body);
  box-shadow: var(--shadow-ambient), var(--shadow-inset);
  animation: tipIn .4s ease;
  backdrop-filter: blur(8px);
}
@keyframes tipIn { from { opacity: 0; transform: translateY(-8px); } }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(6px);
  background: var(--bg-panel); border: 1px solid color-mix(in srgb, var(--brass) 50%, transparent);
  color: var(--ink);
  padding: 10px 18px; border-radius: 12px; z-index: 100;
  font-weight: 600; opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none;
  box-shadow: var(--shadow-ambient), var(--shadow-inset);
  backdrop-filter: blur(8px); line-height: var(--lh-tight);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* SVG art faces */
.svg-face {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* skip optional */
.skip-link {
  color: var(--muted); font-size: .85rem; text-decoration: underline; cursor: pointer;
  margin-top: 8px;
}
.skip-link:hover { color: var(--gold); }

@media (max-width: 640px) {
  :root { --card-w: 118px; --card-h: 180px; }
  .card .effect { font-size: .65rem; }
  .card .name-bar { font-size: .68rem; }
  .card .cost { width: 32px; height: 32px; font-size: 1.05rem; }
  .end-turn { padding: 10px 14px; min-width: 110px; min-height: 46px; font-size: 1rem; }
  .enemy { width: min(140px, 40vw); }
}


/* —— Scene backgrounds & play FX —— */
.screen.battle { position: relative; overflow: hidden; }
.battle-scene {
  position: absolute; inset: 0; z-index: 0;
  background: #0a0810 center/cover no-repeat;
  transform: scale(1.05);
  transition: background-image .5s ease, filter .4s;
  filter: saturate(1.05) contrast(1.05);
}
.battle-scene-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, #0c0a09cc 0%, #0c0a0988 18%, #0c0a0944 40%, #0c0a09aa 78%, #0c0a09ee 100%),
    radial-gradient(ellipse at 50% 30%, transparent 40%, #06050499 100%);
}
.screen.battle > .battle-top,
.screen.battle > .hand-area { position: relative; z-index: 2; }
.fx-layer {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden;
}
.fx-burst {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  pointer-events: none; animation: fxBurst .55s ease-out forwards;
  box-shadow: 0 0 12px currentColor;
}
@keyframes fxBurst {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); }
}
.fx-slash {
  position: absolute; width: 120px; height: 6px;
  background: linear-gradient(90deg, transparent, #fff8, var(--c, #ff4d6d), transparent);
  border-radius: 4px; transform-origin: left center;
  animation: fxSlash .35s ease-out forwards;
  filter: blur(.5px); box-shadow: 0 0 16px var(--c, #ff4d6d);
}
@keyframes fxSlash {
  0% { opacity: 0; transform: rotate(var(--rot, -25deg)) scaleX(.2); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--rot, -25deg)) scaleX(1.4) translateX(20px); }
}
.fx-shield {
  position: absolute; width: 90px; height: 90px; border-radius: 50%;
  border: 3px solid #7ec8ff; box-shadow: 0 0 24px #7ec8ffaa, inset 0 0 20px #7ec8ff55;
  animation: fxShield .6s ease-out forwards;
}
@keyframes fxShield {
  0% { transform: scale(.4); opacity: 0; }
  40% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.4); }
}
.fx-heal {
  position: absolute; width: 8px; height: 18px; border-radius: 4px;
  background: #9dffb0; box-shadow: 0 0 10px #6dff90;
  animation: fxHeal .8s ease-out forwards;
}
@keyframes fxHeal {
  0% { transform: translateY(20px) scale(1); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-60px) scale(.6); opacity: 0; }
}
.fx-void {
  position: absolute; width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle, #c08bff88, #5cf2e633 45%, transparent 70%);
  animation: fxVoid .7s ease-out forwards;
}
@keyframes fxVoid {
  0% { transform: scale(.2); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.fx-soul {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: #4fe3c1; box-shadow: 0 0 14px #4fe3c1;
  animation: fxSoul .9s ease-out forwards;
}
@keyframes fxSoul {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; }
}
.fx-screen-flash {
  position: absolute; inset: 0;
  background: var(--flash, #ff2e5b33);
  animation: fxFlash .25s ease-out forwards;
}
@keyframes fxFlash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.card.playing {
  animation: cardPlay .4s ease-out forwards !important;
  pointer-events: none; z-index: 20;
}
@keyframes cardPlay {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-80px) scale(1.12); opacity: 1; filter: brightness(1.3); }
  100% { transform: translateY(-140px) scale(.85); opacity: 0; }
}
.enemy.hit .portrait {
  animation: enemyShake .35s ease;
  filter: brightness(1.4) saturate(1.2);
}
@keyframes enemyShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ========== v2: board · gems · aim · banners · preview · unit chrome ========== */

/* Fan – tighter arc, soft ambient lift (gentle motion) */
.hand .card {
  transform: translateY(var(--lift, 0)) rotate(var(--rot, 0deg));
  transform-origin: 50% 115%;
  filter: drop-shadow(0 4px 8px #00000066);
}
.hand .card:hover {
  transform: translateY(calc(var(--lift, 0px) - 22px)) rotate(var(--rot, 0deg)) scale(1.07);
  z-index: 12;
  filter: drop-shadow(0 14px 22px #00000099) drop-shadow(0 0 12px var(--glow, #c9a22733));
}
.hand .card.unplayable:hover {
  transform: translateY(calc(var(--lift, 0px) - 8px)) rotate(var(--rot, 0deg));
  filter: drop-shadow(0 6px 10px #00000066);
}

/* Type ribbon (YGO-style identity bar over art) */
.type-ribbon {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 3px 6px; text-align: center;
  font-size: .58rem; font-weight: 800; letter-spacing: .06em;
  text-shadow: 0 1px 2px #000a;
  background: linear-gradient(90deg, transparent, #000c 15%, #000c 85%, transparent);
}
.type-ribbon.rb-unit  { color: #a8ffe8; }
.type-ribbon.rb-spell { color: #ffb0bc; }
.type-ribbon.rb-power { color: #e0c0ff; }
.type-ribbon.rb-buff  { color: #ffe0a0; }
.type-ribbon.rb-trap  { color: #c8b8a0; }
/* frame tint by card type (border stays = rarity) */
.card.cat-unit .card-inner  { background: linear-gradient(165deg, #1a2e28 0%, #0e1814 55%, #121c18 100%); }
.card.cat-power .card-inner { background: linear-gradient(165deg, #2a2230 0%, #161218 55%, #1a161e 100%); }
.card.cat-spell .card-inner { background: linear-gradient(165deg, #2c201c 0%, #181210 55%, #1c1612 100%); }
.card.cat-buff .card-inner  { background: linear-gradient(165deg, #2e2618 0%, #1a1610 55%, #1e1a12 100%); }
.card.cat-trap .card-inner  { background: linear-gradient(165deg, #241c18 0%, #14100e 55%, #1a1410 100%); }
.card.cat-unit .name-bar  { background: linear-gradient(90deg, #123028, #1a4038 40%, #123028); color: #c0f0e4; }
.card.cat-power .name-bar { background: linear-gradient(90deg, #221c2a, #2e2440 40%, #221c2a); color: #ddd0f0; }
.card.cat-buff .name-bar  { background: linear-gradient(90deg, #2a2210, #3a3018 40%, #2a2210); color: #f0e0b0; }
.card.cat-trap .name-bar  { background: linear-gradient(90deg, #201810, #2a2018 40%, #201810); color: #d8c8b0; }
.card.is-unit .art-wrap { height: 52%; }
.card.is-unit .effect { padding-bottom: 28px; }

/* ATK / HP corners (HS + YGO) */
.stat {
  position: absolute; bottom: 4px; z-index: 5;
  min-width: 34px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  font-weight: 900; font-size: 1.05rem; color: #fff;
  text-shadow: 0 1px 2px #000; padding: 0 6px;
  box-shadow: 0 2px 6px #000a, inset 0 1px 0 #fff3;
}
.stat.atk {
  left: 5px;
  background: linear-gradient(180deg, #5a2030, #2a0810);
  border: 1.5px solid #ff6a7a;
}
.stat.hp {
  right: 5px;
  background: linear-gradient(180deg, #204030, #0a1a10);
  border: 1.5px solid #6fd38a;
}
.stat.hp.damaged { border-color: #ff9a4a; color: #ffc090; }
.stat-ico { width: 12px; height: 12px; opacity: .85; }
.card .stat { bottom: 6px; }

/* Keyword chip color accents */
.kw-damage   { border-color: #ff6a7a !important; color: #ffb0bc !important; }
.kw-block    { border-color: #7ec8ff !important; color: #b8e0ff !important; }
.kw-draw     { border-color: #d4af6a !important; color: #f0d78c !important; }
.kw-exhaust  { border-color: #888 !important; color: #bbb !important; }
.kw-bleed    { border-color: #e83a5a !important; color: #ff8aa8 !important; }
.kw-weak     { border-color: #9a9084 !important; color: #c8bfb2 !important; }
.kw-token, .kw-unit { border-color: #4fe3c1 !important; color: #a8ffe8 !important; }
.kw-guardian { border-color: #7ec8ff !important; color: #c0e8ff !important; }
.kw-soul     { border-color: #4fe3c1 !important; color: #4fe3c1 !important; }
.kw-madness  { border-color: #8a78b8 !important; color: #c8bce0 !important; }
.kw-heal     { border-color: #6fd38a !important; color: #b0f0c0 !important; }
.kw-power    { border-color: #a080c0 !important; color: #d8c8e8 !important; }
.kw-buff     { border-color: #c9a45c !important; color: #ffe0a0 !important; }
.kw-trap     { border-color: #8a7060 !important; color: #d0c0a8 !important; }
.kw-blood    { border-color: #ff2e5b !important; color: #ff8aa8 !important; }
.kw-guilt    { border-color: var(--ember-hot) !important; color: #ffc090 !important; }
.kw-entry, .kw-clock { border-color: #d4af6a !important; color: #f0d78c !important; }

.fx-text em { font-style: italic; color: #c8bfb2; font-weight: 500; }

/* ——— Energy gems (HS mana crystals) ——— */
.turn-dock {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.energy-gems { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.gem-row { display: flex; gap: 5px; align-items: center; }
.gem {
  width: 26px; height: 32px; display: inline-block; position: relative;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: #1a2030;
  box-shadow: 0 0 0 1.5px #3a4860, inset 0 0 6px #000a;
  transition: filter .2s, transform .2s, background .2s;
}
.gem.full {
  background:
    radial-gradient(ellipse 60% 40% at 40% 30%, #ffffffaa, transparent 60%),
    linear-gradient(160deg, #7ec8e8, #2a6aa0 50%, #0e2848);
  box-shadow: 0 0 0 1.5px var(--gold2), 0 0 10px #4a90b855, inset 0 -3px 6px #08204a;
}
.gem.empty {
  background: linear-gradient(160deg, #2a3448, #121820);
  box-shadow: 0 0 0 1.5px #4a5870, inset 0 0 8px #000c;
  opacity: .7;
}
.gem.locked {
  background: #121018;
  box-shadow: 0 0 0 1.5px #2a2430;
  opacity: .5;
  clip-path: polygon(50% 8%, 92% 28%, 92% 72%, 50% 92%, 8% 72%, 8% 28%);
}
.gem.spent { animation: gemSpend .4s ease; }
.gem.refill { animation: gemRefill .45s ease; }
.gem.new { animation: gemNew .8s ease; }
@keyframes gemSpend {
  0% { filter: brightness(1.6); transform: scale(1.15); }
  100% { filter: brightness(1); transform: scale(1); }
}
@keyframes gemRefill {
  0% { transform: scale(.6); filter: brightness(2); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@keyframes gemNew {
  0%,100% { box-shadow: 0 0 0 1.5px #f0d78c, 0 0 12px #4ab8ff88; }
  50% { box-shadow: 0 0 0 2px #fff, 0 0 22px #f0d78c; transform: scale(1.2); }
}
.gem-label { font-size: .7rem; color: var(--muted); font-weight: 600; }
.gem-label b { color: var(--gold2); font-size: .9rem; }
.energy-gain { display: inline-flex; align-items: center; gap: 8px; color: var(--gold2); font-weight: 700; }
.energy-gain .gem { width: 16px; height: 20px; }

/* ——— Player board (HS minion row) ——— */
.board-lane { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.board-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  color: var(--muted); text-transform: uppercase;
}
.board-label span { color: var(--teal); }
.player-board {
  display: flex; gap: 8px; justify-content: center; align-items: flex-end;
  min-height: 118px; width: 100%;
}
.board-slot {
  width: clamp(72px, 9vw, 100px); height: 118px;
  border-radius: 10px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.board-slot.empty {
  border: 1.5px dashed color-mix(in srgb, var(--brass) 22%, #3a322888);
  background: #0c0a0988;
  color: #6a5e5088; font-size: .65rem; font-weight: 700;
}
.board-slot.filled { border: none; background: transparent; }

.unit {
  width: 100%; height: 100%; border-radius: 10px; overflow: hidden;
  position: relative;
  background: linear-gradient(160deg, #1a2430, #0c1018);
  border: 2px solid #4fe3c1;
  box-shadow: 0 4px 14px #000a, 0 0 12px #4fe3c144;
  transition: transform .15s;
}
.unit.guardian { border-color: #7ec8ff; box-shadow: 0 4px 14px #000a, 0 0 14px #7ec8ff55; }
.unit.guardian.spent { border-color: #5a7088; filter: saturate(.7); }
.unit.summoned { animation: unitSummon .55s ease; }
@keyframes unitSummon {
  0% { transform: scale(.3); opacity: 0; filter: brightness(2); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.unit.attacking { animation: unitStrike .4s ease; z-index: 8; }
@keyframes unitStrike {
  0% { transform: translateY(0); }
  40% { transform: translateY(-28px) scale(1.05); filter: brightness(1.3); }
  100% { transform: translateY(0); }
}
.unit.hurt { animation: unitHurt .35s ease; }
@keyframes unitHurt {
  0%,100% { transform: translateX(0); filter: brightness(1); }
  30% { transform: translateX(-4px); filter: brightness(1.5) saturate(1.4); }
  60% { transform: translateX(4px); }
}
.unit-art {
  width: 100%; height: 70%;
  background: #0a0810 center/cover no-repeat;
}
.unit-art.svg { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.unit-art.svg .svg-face { width: 140%; height: 140%; margin-top: -10%; }
.unit-name {
  position: absolute; left: 0; right: 0; top: 52%;
  padding: 2px 3px; text-align: center;
  font-size: .58rem; font-weight: 800; color: #e8ffe8;
  background: linear-gradient(transparent, #0a1818ee 40%);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
}
.unit .stat { bottom: 3px; min-width: 28px; height: 24px; font-size: .9rem; padding: 0 4px; }
.unit .stat.atk { left: 3px; }
.unit .stat.hp { right: 3px; }
.unit-badge {
  position: absolute; top: 3px; right: 3px; z-index: 3;
  width: 20px; height: 20px; border-radius: 50%;
  background: #1a2840; border: 1.5px solid #7ec8ff;
  display: flex; align-items: center; justify-content: center;
  color: #b8e0ff; box-shadow: 0 0 8px #7ec8ff66;
}
.unit-badge .ico { width: 12px; height: 12px; }

/* ——— Enemies: aim glow, intent extras, target mark ——— */
.enemy .portrait-wrap { position: relative; }
.enemy .target-mark {
  position: absolute; top: -6px; right: -6px; z-index: 4;
  width: 28px; height: 28px; border-radius: 50%;
  background: #2a2010ee; border: 2px solid var(--gold);
  color: var(--gold2); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px #d4af6a88; animation: targetPulse 1.4s ease infinite;
}
.enemy .target-mark .ico { width: 16px; height: 16px; }
@keyframes targetPulse {
  0%,100% { box-shadow: 0 0 8px #d4af6a66; transform: scale(1); }
  50% { box-shadow: 0 0 18px #d4af6acc; transform: scale(1.08); }
}
.enemy.targeted .portrait { outline: 2px solid var(--gold); outline-offset: 3px; box-shadow: 0 0 20px #d4af6a55; }
.intent-extra {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 0; margin-bottom: 2px;
}
.intent-sub {
  font-size: .62rem; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 3px;
}
.intent-sub .ico { width: 10px; height: 10px; }
.intent-sub.guard { background: #1a2840; border: 1px solid #7ec8ff; color: #b8e0ff; }
.intent-sub.sweep { background: #2a1810; border: 1px solid var(--ember-hot); color: #ffc090; }
.intent.weakened { opacity: .85; text-decoration: line-through; text-decoration-color: #ff6a7a66; }
.enemy.lunge .portrait { animation: enemyLunge .4s ease; }
@keyframes enemyLunge {
  0% { transform: translateY(0); }
  40% { transform: translateY(18px) scale(1.04); filter: brightness(1.2); }
  100% { transform: translateY(0); }
}

/* Aim mode (LoR) */
.aim-banner {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%) translateY(-8px);
  background: linear-gradient(180deg, #3a2a10f0, #1a1408f0);
  border: 1px solid var(--brass); color: var(--gold2);
  padding: 10px 22px; border-radius: var(--r-panel); z-index: 12;
  font-weight: 800; font-size: 1.05rem; letter-spacing: .04em;
  box-shadow: var(--shadow-ambient), 0 0 18px #c9a22733, var(--shadow-inset);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  text-align: center;
  backdrop-filter: blur(6px);
}
.aim-banner small { display: block; font-weight: 500; font-size: .72rem; color: var(--muted); margin-top: 2px; letter-spacing: 0; }
.aim-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.screen.battle.aiming .enemy:not(.dead) {
  cursor: crosshair;
  filter: drop-shadow(0 0 8px #d4af6a88);
}
.screen.battle.aiming .enemy:not(.dead):hover,
.screen.battle.aiming .enemy.aim-hover {
  transform: scale(1.08);
}
.screen.battle.aiming .enemy:not(.dead):hover .portrait,
.screen.battle.aiming .enemy.aim-hover .portrait {
  outline: 3px solid #fff3c0; outline-offset: 4px;
  box-shadow: 0 0 28px #d4af6aaa;
}
.screen.battle.aiming .hand .card:not(.aim-selected) { opacity: .45; filter: brightness(.7); }
.screen.battle.aiming .hand .card.aim-selected {
  transform: translateY(calc(var(--lift, 0px) - 40px)) rotate(0deg) scale(1.12);
  z-index: 15; box-shadow: 0 0 28px #d4af6a88, 0 16px 40px #000c;
  outline: 2px solid var(--gold);
}
.card.needs-target::after {
  content: "🎯"; position: absolute; top: 8px; right: 6px; z-index: 5;
  font-size: .7rem; opacity: .7; pointer-events: none;
}
.aim-arrow {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 50; opacity: 0; transition: opacity .15s;
}
.aim-arrow.show { opacity: 1; }
#aim-ring { animation: aimRing 1s ease infinite; }
@keyframes aimRing {
  0%,100% { opacity: .9; r: 16; }
  50% { opacity: .5; r: 22; }
}

/* Turn banners */
.turn-banner {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.9);
  z-index: 25; pointer-events: none;
  opacity: 0; transition: none;
}
.turn-banner span {
  display: block; padding: 16px 48px; border-radius: var(--r-panel);
  font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 900; letter-spacing: .08em;
  text-shadow: 0 2px 8px #000; white-space: nowrap;
  box-shadow: var(--shadow-ambient), var(--shadow-inset);
}
.turn-banner.player span {
  background: linear-gradient(180deg, #3a2a10f2, #1a1408f2);
  border: 1px solid var(--brass); color: var(--gold2);
}
.turn-banner.enemy span {
  background: linear-gradient(180deg, #3a1520f2, #1a0810f2);
  border: 1px solid color-mix(in srgb, var(--blood) 75%, transparent); color: #ffb8c0;
}
.turn-banner.show { animation: bannerIn 1.15s ease forwards; }
@keyframes bannerIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(.95); }
}

/* End-turn pulse when nothing left to play */
.end-turn.pulse {
  animation: endPulse 1.2s ease infinite;
}
@keyframes endPulse {
  0%,100% { box-shadow: 0 0 16px #c9a22744, inset 0 1px 0 #fff4, inset 0 -3px 0 #0006; }
  50% { box-shadow: 0 0 26px #c9a22766, inset 0 1px 0 #fff4, inset 0 -3px 0 #0006; }
}

/* Card preview panel (hover) */
.card-preview {
  position: fixed; left: 18px; top: 50%; transform: translateY(-50%) scale(.96);
  z-index: 80; pointer-events: none;
  display: flex; gap: 14px; align-items: stretch;
  background: #12100cf5; border: 1px solid color-mix(in srgb, var(--brass) 35%, var(--line));
  border-radius: 18px;
  padding: 14px; box-shadow: var(--shadow-ambient), 0 0 20px #c9a22718, var(--shadow-inset);
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
  max-width: min(520px, 92vw);
  backdrop-filter: blur(10px);
}
.card-preview.show { opacity: 1; transform: translateY(-50%) scale(1); }
.card.xl { --cw: 200px; --ch: 300px; }
.card.xl .name-bar { font-size: .95rem; }
.card.xl .effect { font-size: .85rem; }
.card.xl .type-ribbon { font-size: .7rem; padding: 4px 8px; }
.card.xl .kw { font-size: .65rem; }
.card.xl .kw .ico { width: 12px; height: 12px; }
.card.xl .cost { width: 48px; height: 48px; font-size: 1.5rem; }
.card.xl .stat { min-width: 42px; height: 34px; font-size: 1.25rem; }
.pv-info { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 8px; }
.pv-type {
  font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  padding: 2px 10px; border-radius: 999px; align-self: flex-start;
}
.pv-type.rb-unit  { background: #103028; color: #a8ffe8; border: 1px solid #4fe3c1; }
.pv-type.rb-spell { background: #3a1520; color: #ffb0bc; border: 1px solid #8a3040; }
.pv-type.rb-power { background: #2a1a3a; color: #d0b0ff; border: 1px solid #6040a0; }
.pv-type.rb-buff  { background: #2a2210; color: #ffe0a0; border: 1px solid #8a7040; }
.pv-type.rb-trap  { background: #241810; color: #c8b8a0; border: 1px solid #6a5840; }
.pv-text { font-size: .9rem; line-height: 1.45; color: #e8e0d4; }
.pv-unit, .pv-live {
  font-size: .78rem; color: #a8ffe8; display: flex; align-items: center; gap: 6px;
  background: #0a2018; border: 1px solid #2a5040; border-radius: 8px; padding: 6px 8px;
}
.pv-unit .ico, .pv-live .ico { width: 14px; height: 14px; }
.pv-gloss, .glossary-box {
  display: flex; flex-direction: column; gap: 5px; margin-top: 4px;
  max-height: 220px; overflow-y: auto; padding-right: 4px;
}
.glossary-box { max-height: 50vh; width: min(480px, 90vw); text-align: left; }
.gl {
  display: grid; grid-template-columns: 18px auto 1fr; gap: 6px 8px; align-items: start;
  font-size: .72rem; line-height: 1.35; padding: 4px 6px; border-radius: 6px;
  background: #16121c; border: 1px solid #2a2438;
}
.gl .ico { width: 16px; height: 16px; margin-top: 1px; }
.gl b { color: var(--gold2); white-space: nowrap; }
.gl span { color: var(--muted); }

/* Global keyword tooltip (escapes card overflow) */
.kw-tip {
  position: fixed; z-index: 90; pointer-events: none;
  background: #16120ef8; border: 1px solid color-mix(in srgb, var(--brass) 50%, transparent);
  color: var(--ink); padding: 8px 11px; border-radius: 10px;
  font-size: .72rem; line-height: var(--lh-tight); max-width: 220px;
  box-shadow: var(--shadow-ambient), var(--shadow-inset);
  opacity: 0; transition: opacity .12s ease;
  backdrop-filter: blur(6px);
}
.kw-tip.show { opacity: 1; }
.kw-tip b { color: var(--gold2); margin-right: 4px; }

/* Extra FX */
.fx-summon-ring {
  position: absolute; width: 120px; height: 120px; border-radius: 50%;
  border: 3px solid var(--sc, #4fe3c1);
  box-shadow: 0 0 24px var(--sc, #4fe3c1), inset 0 0 20px color-mix(in srgb, var(--sc, #4fe3c1) 40%, transparent);
  animation: fxSummonRing .7s ease-out forwards;
}
@keyframes fxSummonRing {
  0% { transform: scale(.3); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
.fx-soul-in {
  --sc: #4fe3c1;
  background: var(--sc) !important; box-shadow: 0 0 14px var(--sc) !important;
  animation: fxSoulIn .7s ease-out forwards !important;
}
@keyframes fxSoulIn {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: .2; }
}
.fx-soul-grey { background: #8a9aaa !important; box-shadow: 0 0 10px #8a9aaa !important; }
.float-dmg.soul { color: #4fe3c1; font-size: 1rem; }
.float-dmg.void { color: #a898d0; font-size: 1rem; }

.ghost-play {
  pointer-events: none; animation: ghostPlay .55s ease-out forwards;
}
@keyframes ghostPlay {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--gx), var(--gy)) scale(.55) rotate(6deg); opacity: 0; }
}

.card.nope { animation: cardNope .4s ease; }
@keyframes cardNope {
  0%,100% { transform: translateY(var(--lift, 0)) rotate(var(--rot, 0deg)); }
  20% { transform: translateY(var(--lift, 0)) rotate(calc(var(--rot, 0deg) - 4deg)) translateX(-6px); }
  40% { transform: translateY(var(--lift, 0)) rotate(calc(var(--rot, 0deg) + 4deg)) translateX(6px); }
  60% { transform: translateY(var(--lift, 0)) rotate(calc(var(--rot, 0deg) - 3deg)) translateX(-4px); }
}

.screen.battle.shake { animation: screenShake .35s ease; }
@keyframes screenShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.pill-btn {
  cursor: pointer; font-family: inherit; color: var(--text);
  appearance: none;
}
.pill-btn:hover { border-color: var(--gold); color: var(--gold2); }

.res .ico { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }
.chip .ico { width: 10px; height: 10px; vertical-align: -1px; }
.res.power { border-color: #a080c0; color: #d8c8e8; }

.hero-card .starter-unit {
  margin-top: 8px; font-size: .78rem; color: #a8ffe8;
  display: flex; align-items: center; gap: 5px;
  background: #0a2018; border: 1px solid #2a5040; border-radius: 6px; padding: 4px 8px;
}
.hero-card .starter-unit .ico { width: 14px; height: 14px; }

.ico { display: inline-block; vertical-align: middle; }

/* Responsive: stack board under hero on narrow screens */
@media (max-width: 900px) {
  .player-bar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "hero dock"
      "board board";
  }
  .hero-panel { grid-area: hero; }
  .board-lane { grid-area: board; }
  .turn-dock { grid-area: dock; }
  .player-board { min-height: 100px; }
  .board-slot { height: 100px; width: clamp(64px, 18vw, 88px); }
  .card-preview { left: 50%; top: auto; bottom: calc(var(--card-h) + 80px); transform: translateX(-50%) scale(.9); }
  .card-preview.show { transform: translateX(-50%) scale(1); }
  .card.xl { --cw: 150px; --ch: 225px; }
}
@media (max-width: 640px) {
  .aim-banner { font-size: .9rem; padding: 8px 14px; top: 46px; }
  .turn-banner span { padding: 12px 28px; }
  .gem { width: 16px; height: 20px; gap: 3px; }
  .card-preview { display: none; } /* touch: use glossary instead */
}
@media (hover: none) {
  .card-preview { display: none !important; }
}

/* short viewports (laptops 1366×680 etc.) */
@media (max-height: 780px) and (min-width: 641px) {
  :root { --card-w: 132px; --card-h: 196px; }
  .board-slot { height: 100px; }
  .player-board { min-height: 100px; }
  .battle-top { padding-top: 8px; }
  .card .effect { font-size: .68rem; }
  .card .name-bar { font-size: .72rem; }
}
@media (max-width: 900px) {
  .tip-stack { left: 50%; right: auto; transform: translateX(-50%); width: 92vw; top: 54px; flex-direction: column; align-items: stretch; gap: 6px; }
  .tip-stack > * { max-width: none; }
  .tip-stack > .class-tip { margin-left: 0; font-size: .78rem; }
  @keyframes tipIn { from { opacity: 0; } }
}

/* ——— v2.1 Class gimmick UI ——— */
.class-meter {
  --cm: var(--brass); --cm2: var(--gold2);
  margin-top: 5px; padding: 5px 8px 6px; border-radius: 10px;
  background: linear-gradient(180deg, #1a1612f2, #120e0af2);
  border: 1px solid color-mix(in srgb, var(--cm) 50%, var(--line));
  max-width: 300px; cursor: help;
  transition: box-shadow .25s ease, border-color .25s ease;
  box-shadow: inset 0 1px 0 #ffffff0a;
}
.class-meter:empty { display: none; }
.class-meter.cm-oathbreaker { --cm: var(--ember); --cm2: #ffc090; }
.class-meter.cm-hexblade { --cm: var(--blood); --cm2: #ff9aac; }
.class-meter.cm-gravewarden { --cm: var(--teal); --cm2: #a8ffe8; }
.class-meter.cm-voidseer { --cm: var(--void); --cm2: #d8ccff; }
.class-meter.lit { box-shadow: 0 0 12px color-mix(in srgb, var(--cm) 45%, transparent); border-color: var(--cm); }
.class-meter.warn { border-color: #ffb347; box-shadow: 0 0 12px #ffb34766; }
.class-meter.danger { border-color: var(--danger); box-shadow: 0 0 16px #ff5a6a88; animation: cmDanger 1s ease-in-out infinite; }
@keyframes cmDanger { 50% { box-shadow: 0 0 4px #ff5a6a44; } }
.cm-head {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: .78rem; font-weight: 700; color: var(--cm2); line-height: 1.25;
}
.cm-head b { color: #fff; font-size: 1rem; }
.cm-head .ico { width: 14px; height: 14px; color: var(--cm); }
.cm-tag {
  margin-left: auto; font-size: .64rem; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: #2a2430; border: 1px solid #4a4050; color: var(--muted); white-space: nowrap;
}
.cm-tag.hot, .cm-tag.warm { color: #fff; background: color-mix(in srgb, var(--cm) 35%, #1a1520); border-color: var(--cm); }
.cm-tag.danger { color: #fff; background: #5a1420; border-color: var(--danger); }
.cm-pips { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2px; margin: 4px 0 3px; }
.pip {
  height: 7px; border-radius: 2px; background: #2a2430; border: 1px solid #3a3242; position: relative;
}
.pip.on { background: var(--cm); border-color: var(--cm2); box-shadow: 0 0 5px color-mix(in srgb, var(--cm) 60%, transparent); }
.pip.dz { background: #3a1820; border-color: #6a2a34; }
.pip.dz.on { background: var(--danger); border-color: #ffb0b8; box-shadow: 0 0 6px #ff5a6a; }
.pip.mark::before {
  content: ""; position: absolute; left: -3px; top: -3px; bottom: -3px; width: 2px;
  background: var(--cm2); border-radius: 1px; opacity: .85;
}
.pip.dz.mark::before { background: var(--danger); width: 3px; opacity: 1; }
.cm-sub { font-size: .66rem; color: #c8c0d0; line-height: 1.3; }
.cm-sub b { color: #fff; }
.cm-sub .ico { width: 11px; height: 11px; vertical-align: -1px; }
.cm-bleed { color: #ffb0bc; white-space: nowrap; }
.cm-warn { color: #ffb0b8; font-weight: 800; }

/* hand badges */
.card .dmg-badge, .card .pay-badge {
  position: absolute; z-index: 7; pointer-events: none;
  font-size: .68rem; font-weight: 900; padding: 1px 6px; border-radius: 999px;
  box-shadow: 0 2px 6px #000a;
}
.card .dmg-badge { top: 4px; right: 4px; background: #3a1a10; border: 1px solid #ffb070; color: #ffe0b0; }
.card .dmg-badge.db-hexblade { background: #3a0a16; border-color: #ff6a8a; color: #ffd0da; }
.card .dmg-badge.db-voidseer { background: #1a1628; border-color: #8a78b8; color: #e0d8f0; }
.card .pay-badge { top: 34px; left: -2px; }
.card.alt-blood .pay-badge { background: #5a0a1c; border: 1px solid #ff6a8a; color: #fff; }
.card.alt-soul .pay-badge { background: #0a3a30; border: 1px solid #4fe3c1; color: #e0fff8; }
.card.alt-blood .cost {
  background: radial-gradient(ellipse 55% 35% at 40% 25%, #ffffffaa, transparent 70%),
              radial-gradient(circle at 50% 60%, #ff8aa0, #c0203e 45%, #4a0818 80%);
  box-shadow: 0 3px 10px #000c, 0 0 14px #ff2e5b88;
}
.card.alt-soul .cost {
  background: radial-gradient(ellipse 55% 35% at 40% 25%, #ffffffaa, transparent 70%),
              radial-gradient(circle at 50% 60%, #a8ffe8, #20a088 45%, #08362e 80%);
  box-shadow: 0 3px 10px #000c, 0 0 14px #4fe3c188;
}

/* board: army aura */
.unit .stat.atk.buffed { color: #a8ffe8; box-shadow: 0 0 8px #4fe3c1; }
#board-count.army-on { color: var(--teal); font-weight: 800; }

/* first-fight class tip */
.class-tip {
  --hc: var(--brass);
  background: #16120ef2; border: 1px solid var(--hc); border-left: 4px solid var(--hc);
  padding: 10px 12px 11px; border-radius: 12px;
  font-size: .82rem; line-height: var(--lh-body);
  box-shadow: var(--shadow-ambient), 0 0 14px color-mix(in srgb, var(--hc) 22%, transparent);
  animation: tipIn .4s ease;
  backdrop-filter: blur(6px);
}
.class-tip .ct-head { font-size: .78rem; color: var(--muted); margin-bottom: 4px; display: flex; align-items: center; gap: 5px; }
.class-tip .ct-head b { color: var(--hc); font-size: .9rem; }
.class-tip .ct-head .ico { width: 15px; height: 15px; color: var(--hc); }
.class-tip .ct-close {
  margin-top: 7px; font-family: inherit; font-size: .75rem; font-weight: 700; cursor: pointer;
  background: #2a2430; color: var(--text); border: 1px solid var(--hc); border-radius: 6px; padding: 3px 10px;
}
.class-tip .ct-close:hover { background: color-mix(in srgb, var(--hc) 30%, #2a2430); }

/* hero select: passive line */
.hero-card .passive {
  margin-top: 8px; font-size: .74rem; line-height: 1.4; color: #e8e0d4;
  display: flex; gap: 6px; align-items: flex-start;
  background: #1a1520; border: 1px solid color-mix(in srgb, var(--hc) 50%, #2a2430);
  border-radius: 6px; padding: 5px 8px;
}
.hero-card .passive b { color: var(--hc); }
.hero-card .passive .ico { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--hc); }

.float-dmg.guilt { color: #ffc090; font-size: 1rem; }
.float-dmg.blood { color: #ff8aa8; font-size: 1rem; }

@media (max-height: 780px) and (min-width: 641px) {
  .class-meter { padding: 3px 6px 4px; margin-top: 3px; }
  .cm-sub { font-size: .62rem; }
}


/* ——— v2.2 Rarity badge on cards ——— */
.rarity-badge {
  position: absolute; top: 6px; right: 6px; z-index: 5;
  font-size: .58rem; font-weight: 800; letter-spacing: .02em;
  padding: 2px 6px; border-radius: 999px;
  background: #0a0810cc; border: 1px solid currentColor;
  line-height: 1.2; pointer-events: none;
  max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rarity-badge.rarity-common { color: var(--common); }
.rarity-badge.rarity-rare { color: var(--rare); }
.rarity-badge.rarity-epic { color: var(--epic); }
.rarity-badge.rarity-curse { color: var(--curse); text-shadow: 0 0 8px #ff6b4a88; }
.card.sm .rarity-badge { font-size: .5rem; padding: 1px 4px; max-width: 54px; }
.card.xl .rarity-badge { font-size: .72rem; padding: 3px 8px; max-width: 110px; }

.rarity-common { color: var(--common); }
.rarity-rare { color: var(--rare); }
.rarity-epic { color: var(--epic); }
.rarity-curse { color: var(--curse); }

/* Ashes currency pills */
.ash-pill, .ash-gain, .ash-balance {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ash); font-weight: 700;
}
.ash-pill b, .ash-gain b, .ash-balance b { color: var(--gold2); }
.ash-gain::before { content: "⚜ "; opacity: .85; }
.path-meta .ash-pill {
  background: #2a2010aa; border: 1px solid #e8c87866;
  padding: 2px 10px; border-radius: 999px; font-size: .85rem;
}

/* ——— Shop UI ——— */
.shop-head { text-align: center; max-width: 720px; }
.shop-head h2 { color: var(--gold2); font-size: 1.45rem; margin-bottom: 6px; }
.shop-ash {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, #3a2e18, #1a140c);
  border: 1px solid color-mix(in srgb, var(--ash) 70%, transparent); color: var(--ash);
  padding: 6px 16px; border-radius: var(--r-pill); font-weight: 700; font-size: 1rem;
  box-shadow: var(--shadow-ambient), 0 0 16px #d4bc7828, var(--shadow-inset);
  margin-bottom: 4px;
}
.shop-ash b { color: var(--gold2); font-size: 1.15rem; }
.shop-desc { color: var(--muted); font-size: .88rem; margin-top: 4px; }

.shop-row {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  margin: 8px 0 4px;
}
.shop-slot {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 12px 14px;
  background: linear-gradient(180deg, #1e1a16f2, #12100cee);
  border: 1px solid var(--line); border-radius: var(--r-panel);
  box-shadow: var(--shadow-ambient), var(--shadow-inset);
  min-width: 170px;
  transition: border-color .2s ease, opacity .2s ease, box-shadow .2s ease;
  backdrop-filter: blur(6px);
}
.shop-slot:hover {
  border-color: color-mix(in srgb, var(--ash) 60%, var(--line));
  box-shadow: var(--shadow-ambient), 0 0 0 1px color-mix(in srgb, var(--ash) 25%, transparent);
}
.shop-slot.sold { opacity: .45; filter: grayscale(.55); }
.shop-slot.sold .shop-buy { pointer-events: none; }
.shop-rar {
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  text-transform: none;
}
.shop-buy { min-width: 120px; padding: 8px 14px; font-size: .92rem; }
.shop-buy .price-ash { color: var(--ash); font-weight: 800; }
.shop-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px;
}
.shop-legend {
  color: var(--muted); font-size: .75rem; text-align: center; margin-top: 4px;
  max-width: 560px; line-height: 1.5;
}
.shop-deck-row {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  max-width: 920px; max-height: 52vh; overflow-y: auto; padding: 8px;
}

/* Overlay roomier for shop */
.overlay:has(.shop-row) {
  justify-content: flex-start;
  padding-top: 28px;
  overflow-y: auto;
}

/* ═══════════ v2.3 — Game modes ═══════════ */
/* safe vertical centering for tall screens (no top clipping when scrolling) */
.mode-screen, #screen-heroes { justify-content: flex-start; padding: 22px 16px 26px; }
.mode-screen > :first-child, #screen-heroes > :first-child { margin-top: auto; }
.mode-screen > :last-child, #screen-heroes > :last-child { margin-bottom: auto; }

.mode-head { text-align: center; margin-bottom: 14px; }
.mode-eyebrow {
  color: var(--gold); font-size: .72rem; letter-spacing: .32em; opacity: .8; margin-bottom: 4px;
}
.mode-head h2 {
  font-size: clamp(1.35rem, 3.6vw, 2rem); font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(180deg, #f5e6c0, var(--gold2) 40%, var(--brass) 75%, var(--brass-dim));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 14px #c9a22733);
  line-height: 1.25;
}
.mode-head p { color: var(--muted); font-size: .88rem; margin-top: 6px; }

.mode-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; width: min(1180px, 100%);
}
.mode-card {
  --mc: var(--brass);
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1c1814, #12100c);
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  cursor: pointer; outline: none;
  box-shadow: var(--shadow-ambient), var(--shadow-inset);
  transition: transform .22s ease, border-color .22s ease, box-shadow .25s ease;
}
.mode-card::before { /* thin colored crest */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--mc), transparent);
  opacity: .85;
}
.mode-card:hover, .mode-card:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--mc) 70%, var(--line));
  box-shadow:
    var(--shadow-ambient),
    0 0 0 1px color-mix(in srgb, var(--mc) 35%, transparent),
    0 12px 36px color-mix(in srgb, var(--mc) 18%, transparent);
}
.mode-card.is-last { border-color: color-mix(in srgb, var(--mc) 60%, #3a3248); }
.mc-art {
  position: relative; height: 128px; background: #0a0810 center/cover no-repeat;
  filter: saturate(.85);
}
.mc-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--mc) 28%, transparent), transparent 55%),
    linear-gradient(180deg, #0c0a0944 0%, transparent 35%, #1c1814 100%);
}
.mc-sigil {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); z-index: 1;
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800; color: var(--mc);
  background: radial-gradient(circle, #0b0a0eee 55%, #0b0a0e99);
  border: 2px solid var(--mc);
  box-shadow: 0 0 24px color-mix(in srgb, var(--mc) 55%, transparent), inset 0 0 14px color-mix(in srgb, var(--mc) 30%, transparent);
  text-shadow: 0 0 12px var(--mc);
  transition: transform .3s;
}
.mode-card:hover .mc-sigil { transform: translate(-50%, -50%) scale(1.08) rotate(-4deg); }
.mc-last {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  background: #0b0a0ecc; border: 1px solid var(--mc); color: var(--mc);
  font-size: .68rem; font-weight: 800; padding: 2px 9px; border-radius: 999px;
}
.mc-body { padding: 10px 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mc-tag { color: var(--mc); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.mc-body h3 { font-size: 1.22rem; color: var(--ink); line-height: 1.2; font-weight: 800; }
.mc-blurb { color: #d4c8b8; font-size: .82rem; line-height: var(--lh-body); }
.mc-rules { list-style: none; display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.mc-rules li { font-size: .75rem; color: var(--muted); line-height: 1.35; padding-left: 14px; position: relative; }
.mc-rules li::before { content: "◆"; position: absolute; left: 0; top: 1px; font-size: .55rem; color: var(--mc); }
.mc-daily {
  display: flex; flex-direction: column; gap: 3px;
  background: color-mix(in srgb, var(--mc) 8%, #0b0a0e); border: 1px dashed color-mix(in srgb, var(--mc) 55%, transparent);
  border-radius: 10px; padding: 7px 10px; font-size: .76rem; line-height: 1.35; color: var(--text);
}
.mc-daily small { color: var(--muted); font-size: .68rem; }
.mode-card code, .mode-banner code, .path-mode code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .06em;
  color: var(--mc, var(--teal)); background: #0006; padding: 0 5px; border-radius: 4px;
}
.mc-rec {
  margin-top: auto; padding-top: 8px; border-top: 1px solid #ffffff12;
  font-size: .76rem; font-weight: 700; color: var(--gold2);
}

/* hero select: mode banner + daily lock */
.mode-banner {
  --mc: var(--brass);
  display: flex; align-items: center; gap: 12px;
  width: min(920px, 100%); margin-bottom: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 14%, #14110e), #14110ecc);
  border: 1px solid color-mix(in srgb, var(--mc) 45%, var(--line)); border-radius: var(--r-panel);
  padding: 10px 14px; box-shadow: var(--shadow-ambient), var(--shadow-inset);
  backdrop-filter: blur(6px);
}
.mode-banner:empty { display: none; }
.mb-glyph {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800;
  color: var(--mc); border: 1.5px solid var(--mc); background: #0b0a0e;
  box-shadow: 0 0 14px color-mix(in srgb, var(--mc) 45%, transparent);
}
.mb-text b { color: var(--mc); font-size: 1.02rem; }
.mb-text small { color: var(--muted); font-size: .72rem; margin-left: 4px; }
.mb-sub { color: #c8bfb2; font-size: .78rem; line-height: 1.4; margin-top: 2px; }
.hero-card.locked { filter: grayscale(.9) brightness(.55); cursor: not-allowed; }
.hero-card.locked:hover { transform: none; border-color: #3a3248; box-shadow: none; }
.hero-card.daily-pick {
  border-color: var(--hc); transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--hc), 0 10px 36px color-mix(in srgb, var(--hc) 40%, transparent);
  animation: dailyGlow 2.4s ease-in-out infinite;
}
@keyframes dailyGlow {
  0%, 100% { box-shadow: 0 0 0 1px var(--hc), 0 10px 30px color-mix(in srgb, var(--hc) 30%, transparent); }
  50% { box-shadow: 0 0 0 1px var(--hc), 0 10px 44px color-mix(in srgb, var(--hc) 60%, transparent); }
}
.daily-ribbon, .lock-tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: .7rem; font-weight: 800; padding: 2px 9px; border-radius: 999px;
}
.daily-ribbon { background: #0b0a0ee0; color: #5cf2e6; border: 1px solid #5cf2e6; }
.lock-tag { background: #000c; color: var(--muted); border: 1px solid #4a4058; }

/* path: mode chips */
.path-mode {
  --mc: var(--gold);
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  max-width: 920px; margin: 2px 0 8px;
}
.mode-chip {
  background: #0c0a09cc; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 4px 12px; font-size: .78rem; color: #d0c4b4;
  box-shadow: inset 0 1px 0 #ffffff08;
}
.mode-chip b { color: var(--gold2); }
.mode-chip.main { border-color: var(--mc); color: var(--mc); font-weight: 800; }
.mode-chip.main small { color: var(--muted); font-weight: 600; margin-left: 3px; }
.mode-chip.rec { border-color: #e8c87866; color: var(--ash); }
.node.draft { border-color: var(--teal); }
.node.draft .glyph { color: var(--teal); }
.node.more { border-style: dashed; opacity: .55; }
.node.endless-more .glyph { color: var(--ember); }

/* battle HUD pill */
.mode-pill { --mc: var(--gold); border-color: color-mix(in srgb, var(--mc) 70%, #4a4058); color: var(--mc); }
.mode-pill:empty { display: none; }

/* end screen stats */
.end-stats {
  --mc: var(--brass);
  min-width: min(440px, 92vw);
  background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 12%, #1a1612), #120f0c);
  border: 1px solid color-mix(in srgb, var(--mc) 50%, var(--line)); border-radius: var(--r-panel);
  padding: 14px 16px; box-shadow: var(--shadow-ambient), var(--shadow-inset);
}
.end-new {
  text-align: center; font-weight: 800; letter-spacing: .12em; color: var(--gold2);
  text-shadow: 0 0 14px #f0d78c88; margin-bottom: 8px; animation: recGlow 1.6s ease infinite;
}
@keyframes recGlow { 0%, 100% { text-shadow: 0 0 8px #f0d78c55; } 50% { text-shadow: 0 0 20px #f0d78ccc; } }
.end-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.end-stats { min-width: min(480px, 92vw); }
.end-grid .es {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #0b0a0e88; border: 1px solid #ffffff10; border-radius: 10px; padding: 6px 8px;
}
.end-grid .es span { font-size: .7rem; color: var(--muted); }
.end-grid .es b { font-size: 1.05rem; color: var(--mc); text-align: center; line-height: 1.25; }

@media (max-width: 1100px) { .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .mode-grid { grid-template-columns: 1fr; }
  .mc-art { height: 92px; }
  .mc-sigil { width: 52px; height: 52px; font-size: 1.6rem; }
}
.overlay > p { line-height: 1.55; }
.overlay > .reward-row { margin-top: 6px; }



/* HTML structure helpers (v-polish) */
.heroes-sub {
  color: var(--mist); margin: 6px 0 4px; font-size: .9rem; line-height: var(--lh-body);
  text-align: center;
}
.path-hint {
  color: var(--mist); margin-top: 18px; font-size: .8rem; letter-spacing: .04em;
}
.battle-title-block { min-width: 0; }
.battle-title {
  font-weight: 800; color: var(--gold2); font-size: 1.05rem; letter-spacing: .02em;
  line-height: 1.3;
}
.battle-hud-pills {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}

/* ═══════════ Ember Reliquary polish layer ═══════════ */
.screen h2 { line-height: 1.3; }
#heroes-title { color: var(--gold2) !important; letter-spacing: .03em; font-weight: 800; }
.gl {
  background: #16120e !important; border-color: var(--line) !important;
}
.pv-text { line-height: var(--lh-body); color: #e8e0d4; }
.chip {
  background: #1e1a16; border-color: var(--line);
}
.unit {
  border-width: 1.5px;
  box-shadow: 0 4px 14px #000a, 0 0 10px #3db8a033, inset 0 1px 0 #ffffff12;
}
.unit.guardian { box-shadow: 0 4px 14px #000a, 0 0 12px #6aa8d444, inset 0 1px 0 #ffffff12; }
.board-label { letter-spacing: .1em; color: var(--mist); }
.rarity-badge {
  background: #0a0806dd; box-shadow: 0 2px 6px #0008;
}
.path-meta .ash-pill {
  background: #1e1810cc; border-color: color-mix(in srgb, var(--ash) 45%, transparent);
}
.mc-rules li { line-height: var(--lh-tight); }
.mc-daily {
  background: color-mix(in srgb, var(--mc) 8%, #0c0a09) !important;
  border-radius: 12px !important;
}
.hero-card .passive, .hero-card .starter-unit {
  border-radius: 8px;
  line-height: var(--lh-tight);
}
.overlay .btn { min-width: 120px; }

/* Prefer reduced motion: keep functional, drop decorative loops */
@media (prefers-reduced-motion: reduce) {
  .card.rarity-epic .card-inner,
  .card.rarity-curse .card-inner,
  .node.current,
  .end-turn.pulse,
  .hero-card.daily-pick,
  .title-scene-art,
  .title-crest-aura,
  .title-ember { animation: none !important; }
  .title-ember { opacity: .35; }
}

/* ——— v2.5: title extras · guide · collection · audio ——— */
.title-extra {
  margin-top: 10px;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.title-extra .btn {
  padding: 8px 14px;
  font-size: .88rem;
  border-radius: 12px;
}
.title-overflow {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 10px;
  border-radius: 14px;
  background: #120e0acc;
  border: 1px solid #3a302866;
  animation: titleOverflowIn .18s ease-out;
}
.title-overflow[hidden] { display: none !important; }
@keyframes titleOverflowIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.title-overflow .btn {
  padding: 8px 12px;
  font-size: .84rem;
  border-radius: 12px;
}
#btn-title-menu.is-open {
  border-color: var(--brass);
  color: var(--gold2);
}
.st-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.st-menu-btn {
  width: 100%;
  padding: 10px 8px;
  font-size: .88rem;
  text-align: center;
  text-decoration: none;
}
.res.buff { color: #ffe0a0; }
.res.trap { color: #c8b8a0; }
.audio-toggle.is-muted {
  color: #a89888;
  border-color: #5a4a3a;
  opacity: .85;
}
.path-tools {
  display: flex; gap: 8px; justify-content: center; margin: 4px 0 10px;
}

.guide-screen, .collection-screen {
  justify-content: flex-start;
  padding: 18px 14px 28px;
  overflow: auto;
}
.guide-shell, .col-shell {
  width: min(820px, 100%);
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.guide-head, .col-head { text-align: center; }
.guide-eyebrow {
  font-size: .72rem; letter-spacing: .14em; color: var(--brass);
  font-weight: 700; margin-bottom: 4px;
}
.guide-head h2, .col-head h2 {
  color: var(--gold2); font-weight: 800; letter-spacing: .04em; margin: 0 0 4px;
}
.guide-head p, .col-head p { color: var(--mist); margin: 0; font-size: .92rem; }

.guide-tabs {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.guide-tab {
  appearance: none; font-family: inherit; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--brass) 35%, var(--line));
  background: linear-gradient(180deg, #241c14, #14100c);
  color: #c8bcae; font-weight: 700; font-size: .88rem;
  padding: 8px 16px; border-radius: 999px;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.guide-tab.is-on {
  color: var(--gold2);
  border-color: var(--brass);
  box-shadow: 0 0 16px #c9a22733, inset 0 0 12px #c45c2618;
}

.guide-pages { min-height: 280px; }
.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 640px) {
  .guide-grid { grid-template-columns: 1fr; }
}
.guide-card {
  border-radius: calc(var(--r-panel) + 2px);
  border: 1px solid color-mix(in srgb, var(--brass) 28%, var(--line));
  background:
    linear-gradient(165deg, #221a12f0 0%, #14100ce8 55%, #0e0b09f2 100%);
  box-shadow: var(--shadow-ambient), var(--shadow-inset), 0 0 24px #c45c2610;
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
}
.guide-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 0% 0%, color-mix(in srgb, var(--gc, var(--brass)) 22%, transparent), transparent 65%);
}
.guide-card > * { position: relative; z-index: 1; }
.gc-glyph {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.05rem; font-weight: 800; color: #1a1008;
  background: radial-gradient(circle at 35% 30%, #fff8, var(--gc, var(--brass)));
  box-shadow: 0 0 14px color-mix(in srgb, var(--gc, var(--brass)) 40%, transparent);
  margin-bottom: 8px;
}
.guide-card h3 {
  margin: 0 0 6px; color: var(--gold2); font-size: 1.02rem; font-weight: 800;
}
.guide-card p {
  margin: 0; color: #d4c8b4; font-size: .88rem; line-height: 1.5;
}
.guide-card p b { color: #f0e2c4; }
.guide-banner {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--r-panel);
  border: 1px solid color-mix(in srgb, var(--ember-hot) 35%, var(--line));
  background: linear-gradient(90deg, #2a1810cc, #1a120ecc 55%, #14100ccc);
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: inset 0 0 20px #c45c2618;
}
.guide-banner b { color: var(--gold2); font-size: .95rem; }
.guide-banner span { color: #d0c4b2; font-size: .86rem; line-height: 1.5; }
.guide-banner em { color: #f0d9a8; font-style: normal; font-weight: 700; }
.guide-foot {
  text-align: center; color: var(--mist); font-size: .84rem; margin: 12px 0 0;
}

/* Collection */
.col-filters {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-panel);
  border: 1px solid color-mix(in srgb, var(--brass) 28%, var(--line));
  background: linear-gradient(165deg, #1c1610f0, #100e0ce8);
  box-shadow: var(--shadow-inset);
}
.col-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cf-label {
  min-width: 72px; font-size: .72rem; letter-spacing: .08em;
  color: var(--mist); font-weight: 700;
}
.cf-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-chip {
  appearance: none; font-family: inherit; cursor: pointer;
  border: 1px solid var(--line);
  background: #1a1510;
  color: #c0b4a4; font-size: .78rem; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
}
.cf-chip.is-on {
  color: var(--gold2);
  border-color: color-mix(in srgb, var(--brass) 60%, var(--line));
  background: linear-gradient(180deg, #2e2418, #1a140e);
  box-shadow: 0 0 10px #c9a22722;
}
.col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  padding: 4px 2px 8px;
}
.col-slot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.col-slot .card { pointer-events: auto; }
.col-rar {
  font-size: .72rem; font-weight: 700; text-align: center;
  color: var(--mist); line-height: 1.3;
}
.col-sil {
  width: 120px; height: 168px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--brass) 30%, #3a3028);
  background:
    linear-gradient(165deg, #16120ecc, #0c0a08f2),
    repeating-linear-gradient(-45deg, transparent, transparent 6px, #1a141066 6px, #1a141066 7px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  box-shadow: inset 0 0 24px #000a;
}
.col-sil-crest {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.2rem; font-weight: 800; color: #5a4a3a;
  border: 1px solid #3a3028;
  background: #12100c;
}
.col-sil-name { color: #6a5a4a; font-size: .78rem; font-weight: 700; }
.col-sil-rar { font-size: .7rem; font-weight: 700; opacity: .75; }
.col-empty {
  grid-column: 1 / -1; text-align: center; color: var(--mist); padding: 24px;
}
.col-slot.locked .col-sil { filter: saturate(.4); }

@media (prefers-reduced-motion: reduce) {
  .guide-card, .col-sil { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   v2.6 — Login · Settings · Mobile scale · Card depth · Pull-to-play
   Figma: tokens mirrored in design/tokens.json (see README «Figma notes»)
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --tap: 44px;                 /* min touch target */
  --glow-play: #ffb85c;        /* affordable-card glow */
  --edge-common: #b0a89855;
  --edge-rare: #8cc0f0;
  --edge-epic: #c8a0ff;
  --edge-curse: #ff8a4a;
  --elev-1: 0 1px 1px #000a, 0 2px 4px #0008;
  --elev-2: 0 1px 1px #000a, 0 4px 8px #0008, 0 12px 24px #0007;
  --elev-3: 0 2px 2px #000a, 0 8px 16px #0009, 0 24px 48px -8px #000c;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { touch-action: manipulation; overscroll-behavior: none; }
.app { height: 100vh; height: 100dvh; }

/* safe areas — every screen keeps content out of notches / home bar */
.screen {
  padding-top: max(16px, calc(var(--safe-t) + 10px));
  padding-bottom: max(16px, calc(var(--safe-b) + 10px));
  padding-left: max(14px, calc(var(--safe-l) + 8px));
  padding-right: max(14px, calc(var(--safe-r) + 8px));
}
.screen.battle { padding: 0 var(--safe-r) 0 var(--safe-l); position: absolute; inset: 0; overflow: hidden; }
.battle-top { padding-top: calc(10px + var(--safe-t)); }
.hand-area {
  padding-bottom: calc(6px + var(--safe-b));
  height: calc(var(--card-h) + 40px + var(--safe-b));
}
.toast { bottom: calc(24px + var(--safe-b)); max-width: calc(100vw - 32px); text-align: center; }
.overlay { padding: max(20px, calc(var(--safe-t) + 12px)) max(16px, var(--safe-r)) max(20px, calc(var(--safe-b) + 12px)) max(16px, var(--safe-l)); overflow-y: auto; justify-content: safe center; }
.profile-modal { padding: max(16px, var(--safe-t)) 16px max(16px, var(--safe-b)); }

/* ——— Login (soft offline sign-in) ——— */
.login-screen { overflow-y: auto; justify-content: safe center; }
.login-art { background-image: url("assets/scenes/abbey.jpg"), linear-gradient(180deg, #1a1008, #0c0a09) !important; }
.login-shell {
  position: relative; z-index: 1;
  width: min(460px, 100%);
  display: flex; flex-direction: column; gap: 14px;
}
.login-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.login-crest { margin-bottom: 10px; transform: scale(.9); }
.login-screen h1 {
  font-size: clamp(1.7rem, 7vw, 2.4rem); font-weight: 800; letter-spacing: .05em; line-height: 1.25;
  background: linear-gradient(180deg, #fff4d4 0%, var(--gold2) 35%, var(--brass) 75%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 16px #c9a22755);
}
.login-sub { color: #d8cfc0; margin-top: 4px; font-size: .95rem; }
.login-list { display: flex; flex-direction: column; gap: 10px; }
.login-seal {
  --pc: var(--brass);
  appearance: none; font-family: inherit; color: var(--ink); text-align: left; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  min-height: 72px; padding: 12px 14px; width: 100%;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--pc) 30%, var(--line));
  background:
    radial-gradient(ellipse 60% 120% at 0% 50%, color-mix(in srgb, var(--pc) 16%, transparent), transparent 70%),
    linear-gradient(165deg, #221a12f2, #120e0bf0);
  box-shadow: var(--elev-2), var(--shadow-inset);
  backdrop-filter: blur(8px);
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
  animation: sealIn .45s cubic-bezier(.2,.8,.2,1) backwards;
  position: relative; overflow: hidden;
}
.login-seal::after { /* sweeping ember sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, #ffffff12 45%, transparent 60%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.login-seal:hover, .login-seal:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--pc) 70%, var(--line));
  box-shadow: var(--elev-3), 0 0 22px color-mix(in srgb, var(--pc) 28%, transparent), var(--shadow-inset);
  outline: none;
}
.login-seal:hover::after, .login-seal:focus-visible::after { transform: translateX(120%); }
.login-seal:active { transform: scale(.98); }
.login-seal.is-last { border-color: color-mix(in srgb, var(--pc) 60%, var(--line)); }
.login-seal .ls-avatar { width: 48px; height: 48px; font-size: 1.3rem; }
.ls-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.ls-name { font-weight: 800; font-size: 1.08rem; color: var(--gold2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-meta { font-size: .8rem; color: var(--mist); line-height: 1.35; }
.ls-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.ls-tags em {
  font-style: normal; font-size: .7rem; font-weight: 700; color: #d8ccb8;
  padding: 1px 8px; border-radius: 999px; background: #0c0a09aa; border: 1px solid var(--line);
}
.ls-tags em.ls-save { color: #ffd9a8; border-color: color-mix(in srgb, var(--ember-hot) 50%, var(--line)); }
.ls-go { font-size: .82rem; font-weight: 800; color: color-mix(in srgb, var(--pc) 70%, #fff); white-space: nowrap; }
.login-new { border-style: dashed; background: linear-gradient(165deg, #16120ee8, #0e0b09e8); }
.ls-plus {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 800; color: var(--gold2);
  border: 1.5px dashed color-mix(in srgb, var(--brass) 55%, transparent);
}
.login-seal.entering {
  animation: sealEnter .5s cubic-bezier(.2,.8,.2,1) forwards;
  border-color: var(--pc);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc) 60%, transparent), 0 0 40px color-mix(in srgb, var(--pc) 50%, transparent);
}
.login-screen.leaving .login-seal:not(.entering) { opacity: .35; transition: opacity .3s; }
.login-create {
  border-radius: 18px; padding: 14px;
  border: 1px solid color-mix(in srgb, var(--brass) 35%, var(--line));
  background: linear-gradient(180deg, #1c1612f5, #100e0af2);
  box-shadow: var(--elev-2);
  animation: tipIn .3s ease;
}
.login-create[hidden] { display: none; }
.login-foot { text-align: center; color: var(--mist); font-size: .76rem; opacity: .85; }
@keyframes sealIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes sealEnter {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); }
  100% { transform: scale(1.01); filter: brightness(1.25); }
}

/* ——— Title welcome ——— */
.title-welcome {
  --pc: var(--brass);
  width: 100%; margin: -4px 0 16px; padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--pc) 35%, var(--line));
  background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 12%, #14100c), #120e0bcc 70%);
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  box-shadow: inset 0 1px 0 #ffffff0d;
}
.title-welcome[hidden] { display: none; }
.title-welcome.pop { animation: welcomePop .55s cubic-bezier(.2,.8,.2,1); }
@keyframes welcomePop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.tw-greet { display: flex; align-items: center; gap: 10px; }
.tw-greet small { display: block; font-size: .72rem; color: var(--mist); letter-spacing: .06em; }
.tw-greet b { font-size: 1.05rem; color: var(--gold2); }
.tw-avatar { width: 36px; height: 36px; font-size: 1rem; }
.tw-line { font-size: .86rem; color: #d8cfc0; line-height: 1.45; }
.tw-line b { color: var(--gold2); }
.tw-quick {
  --mc: var(--brass);
  align-self: flex-start; padding: 10px 16px; font-size: .92rem; min-height: var(--tap);
  border-color: color-mix(in srgb, var(--mc) 70%, transparent);
  box-shadow: var(--elev-2), 0 0 18px color-mix(in srgb, var(--mc) 25%, transparent), var(--shadow-inset);
}

/* ——— Settings sheet ——— */
.settings-modal[hidden] { display: none !important; }
.settings-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; }
.settings-backdrop { position: absolute; inset: 0; background: #050403cc; backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; }
.settings-sheet {
  position: relative; z-index: 1;
  width: min(520px, calc(100vw - 24px));
  max-height: min(86vh, 760px); max-height: min(86dvh, 760px);
  display: flex; flex-direction: column;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--brass) 40%, var(--line));
  background: linear-gradient(180deg, #1e1813fa, #100d0af8);
  box-shadow: var(--elev-3), var(--shadow-rim), 0 0 60px #c45c2622;
  transform: translateY(14px) scale(.98); opacity: 0;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
.settings-modal.show .settings-backdrop { opacity: 1; }
.settings-modal.show .settings-sheet { transform: none; opacity: 1; }
.st-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px 18px 10px; border-bottom: 1px solid var(--line); }
.st-head h3 { color: var(--gold2); font-size: 1.3rem; font-weight: 800; }
.st-owner { font-size: .78rem; color: var(--mist); margin-top: 2px; }
.st-body { overflow-y: auto; padding: 6px 18px 12px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.st-foot { padding: 10px 18px calc(14px + var(--safe-b)); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.st-foot .btn { min-width: 140px; }
.st-sec { padding: 12px 0 6px; border-bottom: 1px dashed #3a322866; }
.st-sec:last-child { border-bottom: none; }
.st-sec h4 { font-size: .78rem; letter-spacing: .1em; color: var(--brass); font-weight: 800; margin-bottom: 6px; }
.st-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 0; }
.st-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-text b { font-size: .92rem; color: var(--ink); font-weight: 700; }
.st-text small { font-size: .74rem; color: var(--mist); line-height: 1.35; }
.st-switch {
  appearance: none; border: 1px solid var(--line); cursor: pointer; flex-shrink: 0;
  width: 56px; height: 32px; border-radius: 999px; position: relative;
  background: #0c0a09; box-shadow: inset 0 2px 4px #000a;
  transition: background .2s, border-color .2s;
  /* 44px hit area */
  outline-offset: 4px;
}
.st-switch::before { content: ""; position: absolute; inset: -7px -2px; }
.st-switch i {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8e8, #a89a88);
  box-shadow: 0 2px 6px #000a; transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s;
}
.st-switch.on { background: linear-gradient(90deg, #5a3a14, #8a5a1c); border-color: var(--brass); }
.st-switch.on i { transform: translateX(24px); background: radial-gradient(circle at 35% 30%, #fff4d4, var(--gold2)); }
.st-slider .st-text { flex: 0 0 auto; width: 42%; }
.st-slider input[type=range] {
  flex: 1; min-width: 0; height: var(--tap); background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.st-slider input[type=range]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ember-hot) 0, var(--gold2) var(--v), #2a241c var(--v));
  box-shadow: inset 0 1px 2px #000a;
}
.st-slider input[type=range]::-moz-range-track { height: 8px; border-radius: 999px; background: #2a241c; }
.st-slider input[type=range]::-moz-range-progress { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--ember-hot), var(--gold2)); }
.st-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; margin-top: -9px;
  background: radial-gradient(circle at 35% 30%, #fff4d4, var(--gold2) 55%, var(--brass));
  border: 2px solid #1a1008; box-shadow: 0 2px 8px #000c, 0 0 10px #c9a22766;
}
.st-slider input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid #1a1008;
  background: radial-gradient(circle at 35% 30%, #fff4d4, var(--gold2) 55%, var(--brass));
}
.st-slider.dim { opacity: .45; }
.st-val { width: 44px; text-align: right; font-weight: 800; color: var(--gold2); font-size: .85rem; font-variant-numeric: tabular-nums; }
.st-preview { flex-wrap: wrap; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-chip {
  appearance: none; font-family: inherit; cursor: pointer; min-height: 36px; min-width: var(--tap);
  padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  color: #d4c8b4; background: #1a1510; border: 1px solid var(--line);
}
.st-chip:hover, .st-chip:active { border-color: var(--brass); color: var(--gold2); }
.st-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.st-seg-btn {
  appearance: none; font-family: inherit; cursor: pointer; text-align: center;
  min-height: 56px; padding: 8px 6px; border-radius: 12px;
  background: #14110e; border: 1px solid var(--line); color: #d4c8b4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.st-seg-btn b { font-size: .85rem; }
.st-seg-btn small { font-size: .66rem; color: var(--mist); }
.st-seg-btn.on { border-color: var(--brass); color: var(--gold2); background: linear-gradient(180deg, #2e2418, #1a140e); box-shadow: 0 0 14px #c9a22733; }
.st-btn { padding: 8px 16px; font-size: .88rem; min-height: var(--tap); }
.st-badge { font-weight: 800; font-size: .8rem; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--brass); color: var(--gold2); }

/* ——— Card depth: 3D tilt · shine · layered shadows · rarity edge light ——— */
@property --ea { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.card { perspective: 760px; }
.card-inner {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
  transform-style: preserve-3d;
  box-shadow:
    inset 0 1px 0 #ffffff22,                       /* top bevel */
    inset 0 -1px 0 #00000080,                      /* bottom bevel */
    inset 0 0 0 1px #000c,                         /* frame line 1 */
    inset 0 0 0 3px color-mix(in srgb, var(--rarity, var(--common)) 22%, transparent), /* frame line 2 */
    inset 0 0 22px #000a,                          /* inner vignette */
    var(--elev-2);
}
.card.tilting .card-inner { transition: transform .08s linear, box-shadow .2s; }
.card.tilting { z-index: 15; }
/* denser frame: gilded rule under the art + engraved text plate */
.card .art-wrap { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--rarity, var(--brass)) 55%, transparent); }
.card .art-wrap img { transform: scale(1.04); transition: transform .4s ease; }
.card.tilting .art-wrap img { transform: scale(1.08) translate(var(--px, 0px), var(--py, 0px)); }
.card .name-bar { box-shadow: inset 0 1px 0 #ffffff14, inset 0 -1px 0 #0008, 0 2px 4px #0006; position: relative; z-index: 2; }
.card .effect {
  margin: 0 4px 4px; border-radius: 0 0 9px 9px;
  background: linear-gradient(180deg, #00000030, #00000055);
  box-shadow: inset 0 1px 0 #ffffff08, inset 0 0 0 1px #ffffff06;
}
.card .cost { box-shadow: 0 3px 10px #000c, 0 0 12px #4a90b866, inset 0 -4px 8px #08204a, inset 0 2px 3px #fff6, 0 0 0 3px #0c0a09aa; }
.card-shine {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity .25s ease;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 20%), #ffffff40, transparent 42%),
    linear-gradient(115deg, transparent 30%, #ffffff14 46%, transparent 60%);
  mix-blend-mode: overlay;
}
.card.tilting .card-shine, .hand .card:hover .card-shine { opacity: 1; }
.card.rarity-epic .card-shine, .card.rarity-curse .card-shine {
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 20%), #ffffff45, transparent 40%),
    linear-gradient(125deg, #ff6a6a00 20%, #ffd0702a 35%, #8affd02a 50%, #a08aff2a 65%, transparent 80%);
  background-size: 100% 100%, 220% 220%;
  background-position: 0 0, calc(var(--mx, 50%) * 1.2) calc(var(--my, 50%) * 1.2);
  mix-blend-mode: color-dodge;
}
.card-edge {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(160deg, #ffffff30, transparent 30%, transparent 70%, #ffffff10);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .8;
}
.card.rarity-rare .card-edge {
  background: linear-gradient(160deg, var(--edge-rare), transparent 35%, transparent 65%, color-mix(in srgb, var(--edge-rare) 60%, transparent));
  opacity: .75;
}
.card.rarity-epic .card-edge {
  padding: 2px;
  background: conic-gradient(from var(--ea), transparent 0 55%, var(--edge-epic) 70%, #fff 75%, var(--edge-epic) 80%, transparent 92%);
  animation: edgeSpin 4.5s linear infinite; opacity: 1;
}
.card.rarity-curse .card-edge {
  padding: 2px;
  background: conic-gradient(from var(--ea), transparent 0 45%, var(--edge-curse) 62%, #ffe0b0 70%, var(--edge-curse) 78%, transparent 92%);
  animation: edgeSpin 3.2s linear infinite; opacity: 1;
  filter: drop-shadow(0 0 3px #ff7a3a);
}
@keyframes edgeSpin { to { --ea: 360deg; } }
/* touch: subtle press (no hover on phones) */
@media (hover: none) {
  .card:active .card-inner { transform: scale(.96); transition-duration: .08s; }
  .card:hover { transform: none; box-shadow: none; }
  .hand .card:hover { transform: translateY(var(--lift, 0)) rotate(var(--rot, 0deg)); filter: drop-shadow(0 4px 8px #00000066); }
}

/* ——— Pull-to-play ——— */
/* affordable cards breathe an ember rim (gentle, never blinking) */
.hand .card.playable .card-inner {
  box-shadow:
    inset 0 1px 0 #ffffff22, inset 0 -1px 0 #00000080, inset 0 0 0 1px #000c,
    inset 0 0 0 3px color-mix(in srgb, var(--rarity, var(--common)) 22%, transparent),
    inset 0 0 22px #000a, var(--elev-2),
    0 0 0 1.5px color-mix(in srgb, var(--glow-play) 70%, transparent),
    0 0 16px color-mix(in srgb, var(--glow-play) 45%, transparent);
  animation: playableBreath 2.4s ease-in-out infinite;
}
.hand .card.playable .cost { border-color: #fff4d4; box-shadow: 0 0 0 2px #ffb85c66, 0 0 14px #ffb85c88, inset 0 -4px 8px #08204a, inset 0 2px 3px #fff6; }
@keyframes playableBreath {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.07); }
}
.hand .card.unplayable .card-edge, .hand .card.unplayable .card-shine { display: none; }

/* end-turn: punchier pulse + hint when no plays remain */
.end-turn { position: relative; }
.end-turn.pulse {
  border-color: #fff4d4;
  background: linear-gradient(180deg, #7a5420 0%, #4a3410 50%, #2a1c0a 100%);
  animation: endPulse2 1.3s ease-in-out infinite;
}
.end-turn.pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none;
  border: 2px solid #ffd27a; opacity: 0;
  animation: endRing 1.3s ease-out infinite;
}
@keyframes endPulse2 {
  0%, 100% { box-shadow: var(--elev-2), 0 0 16px #c9a22755, inset 0 1px 0 #fff4, inset 0 -3px 0 #0006; transform: scale(1); }
  50% { box-shadow: var(--elev-2), 0 0 30px #ffc06a99, inset 0 1px 0 #fff6, inset 0 -3px 0 #0006; transform: scale(1.04); }
}
@keyframes endRing {
  0% { opacity: .9; transform: scale(.96); }
  100% { opacity: 0; transform: scale(1.18); }
}
.end-hint {
  font-size: .72rem; font-weight: 700; color: #ffd9a8; text-align: right; min-height: 0;
  max-width: 180px; line-height: 1.3; opacity: 0; transform: translateY(-4px);
  transition: opacity .25s, transform .25s;
}
.end-hint.show { opacity: 1; transform: none; }

/* turn banners — streak + title + sub line */
.turn-banner { top: 40%; width: max-content; max-width: calc(100vw - 24px); }
.turn-banner .tb-inner .tb-title, .turn-banner .tb-inner .tb-streak {
  padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0;
}
.turn-banner .tb-inner .tb-streak { background: linear-gradient(100deg, transparent, #ffffff40, transparent); }
.turn-banner .tb-inner {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 54px 12px; border-radius: 18px;
  box-shadow: var(--elev-3), var(--shadow-inset);
}
.turn-banner.player .tb-inner {
  background: linear-gradient(180deg, #4a3412f5, #1e1608f5);
  border: 1px solid var(--gold2);
  box-shadow: var(--elev-3), 0 0 40px #c9a22766, inset 0 1px 0 #fff3;
}
.turn-banner.enemy .tb-inner {
  background: linear-gradient(180deg, #4a1424f5, #1a0810f5);
  border: 1px solid #ff6a7a;
  box-shadow: var(--elev-3), 0 0 40px #c83a4a77, inset 0 1px 0 #fff2;
}
.tb-title {
  display: block; font-size: clamp(1.5rem, 5vw, 2.4rem); font-weight: 900; letter-spacing: .1em;
  white-space: nowrap; text-shadow: 0 2px 10px #000, 0 0 18px currentColor;
}
.turn-banner.player .tb-title { color: #ffeec4; }
.turn-banner.enemy .tb-title { color: #ffc4cc; }
.tb-sub { font-size: .82rem; font-weight: 700; color: #e8dccb; letter-spacing: .04em; opacity: .9; white-space: nowrap; }
.tb-streak {
  position: absolute; top: 0; bottom: 0; width: 40%; left: -50%;
  background: linear-gradient(100deg, transparent, #ffffff40, transparent);
  transform: skewX(-20deg);
}
.turn-banner.show .tb-streak { animation: tbStreak .7s .12s ease-out forwards; }
@keyframes tbStreak { to { left: 120%; } }
.turn-banner.show { animation: bannerIn2 1.25s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes bannerIn2 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); letter-spacing: .3em; filter: blur(4px); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(.96); filter: blur(0); }
  22% { transform: translate(-50%, -50%) scale(1.02); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(.96); }
}
/* enemy phase: red-tinted edges */
.screen.battle::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 120px #c83a4a00; transition: box-shadow .5s ease;
}
.screen.battle.enemy-phase::after { box-shadow: inset 0 0 140px #c83a4a55; }

/* combo toast (class gimmick tier-ups) */
.combo-toast {
  --cc: var(--ember-hot);
  position: absolute; left: 50%; top: 30%; z-index: 26; pointer-events: none;
  transform: translate(-50%, -50%) scale(.8); opacity: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 22px; border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 30%, #1a120c), #120c08f0);
  border: 1.5px solid var(--cc);
  box-shadow: var(--elev-3), 0 0 30px color-mix(in srgb, var(--cc) 55%, transparent);
  text-align: center; max-width: calc(100vw - 32px); min-width: min(260px, calc(100vw - 32px));
}
.combo-toast b { font-size: 1.25rem; font-weight: 900; color: #fff4e0; letter-spacing: .06em; text-shadow: 0 0 14px var(--cc), 0 2px 4px #000; }
.combo-toast small { font-size: .78rem; color: #f0e2cc; font-weight: 600; }
.combo-toast.show { animation: comboPop 1.7s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes comboPop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  20% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -54%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -64%) scale(.96); }
}

/* reward / shop light FOMO */
.fomo { display: inline-block; font-size: .8rem; color: #e8cfa8; font-weight: 600; margin-top: 4px; }
.fomo.hot { color: #ffb88a; }
.fomo.ok { color: #a8f0c8; }
.shop-nudge { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; margin-top: 4px; }
.card.spotlight { position: relative; }
.card.spotlight::before {
  content: ""; position: absolute; inset: -10px; border-radius: 20px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--rarity) 45%, transparent), transparent 70%);
  filter: blur(6px); animation: spotGlow 2.6s ease-in-out infinite;
}
@keyframes spotGlow { 50% { opacity: .55; } }
.spot-tag {
  position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); z-index: 8;
  font-size: .68rem; font-weight: 800; white-space: nowrap; padding: 2px 10px; border-radius: 999px;
  background: #0c0a09f0; border: 1px solid var(--rarity, var(--brass)); color: #fff4e0;
  box-shadow: 0 0 12px color-mix(in srgb, var(--rarity, var(--brass)) 50%, transparent);
}
.reward-row { padding-bottom: 22px; }
.shop-slot.spotlight { border-color: color-mix(in srgb, var(--edge-curse) 50%, var(--line)); box-shadow: var(--elev-2), 0 0 22px #e87a3a33; }
.shop-slot.affordable .shop-buy { box-shadow: var(--elev-2), 0 0 16px #ffb85c55, var(--shadow-inset); }

/* tutorial tip close */
.tutorial-tip .tt-close { margin-top: 8px; }
.tutorial-tip .ct-close, .class-tip .ct-close {
  font-family: inherit; font-weight: 700; cursor: pointer; font-size: .78rem;
  background: #2a2430; color: var(--text); border: 1px solid var(--brass); border-radius: 8px; padding: 6px 12px;
}

/* ——— Touch targets ≥44px (coarse pointers) ——— */
@media (pointer: coarse) {
  .btn, .pill-btn, .pm-x, .pm-mini, .cf-chip, .guide-tab, .skip-link, .ct-close, .st-chip, .shop-buy { min-height: var(--tap); }
  .pill-btn, .pm-x { min-width: var(--tap); justify-content: center; }
  .pm-mini { padding: 8px 12px; }
  .pm-swatch, .pm-sigil { width: 40px; height: 40px; }
  .pm-swatches, .pm-sigils { gap: 6px; }
  .skip-link { display: inline-flex; align-items: center; padding: 0 12px; }
  .cf-chip { padding: 8px 12px; }
  .enemy .intent { min-height: 28px; }
}

/* ——— Phones (portrait) ——— */
@media (max-width: 600px) {
  :root { --card-w: 106px; --card-h: 160px; }
  .title-screen, .login-screen { justify-content: safe center; overflow-y: auto; }
  .title-frame { gap: 12px; }
  .title-hero-panel { padding: 20px 14px 18px; }
  .title-crest-wrap { width: 68px; height: 68px; margin-bottom: 10px; }
  .title-crest { width: 52px; height: 52px; font-size: 1.4rem; }
  .title-screen .title-blurb { font-size: .86rem; margin-bottom: 10px; }
  .title-actions .btn { min-width: 46%; }
  .title-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .title-extra .btn { width: 100%; padding: 10px 8px; }
  .title-overflow { width: 100%; }
  .title-overflow .btn { flex: 1 1 40%; }
  .title-profile-dock { padding: 10px 12px; }
  .pd-actions { width: 100%; }
  .pd-actions .btn { flex: 1; }

  /* battle HUD: one compact row */
  .battle-top { padding: calc(6px + var(--safe-t)) 8px 0; }
  .battle-hud { flex-wrap: nowrap; gap: 6px; align-items: center; }
  .battle-title-block { flex: 1; min-width: 0; }
  .region-tag { font-size: .66rem; }
  .battle-title { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .battle-hud-pills { flex-wrap: nowrap; gap: 4px; }
  .battle-hud-pills .pill { padding: 4px 8px; font-size: .72rem; min-height: 32px; }
  .battle-hud-pills .pill-btn { min-width: var(--tap); min-height: var(--tap); padding: 0 8px; }
  .pill-label { display: none; }
  .mode-pill { max-width: 92px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block !important; line-height: 22px; }

  /* tips: in-flow strip under HUD (enemies shrink instead of being covered) */
  .tip-stack { position: relative; top: auto; left: auto; right: auto; transform: none; width: auto; margin: 6px 0 2px; }
  .tutorial-tip, .class-tip { font-size: .76rem; padding: 8px 10px; max-height: 34vh; overflow-y: auto; line-height: 1.45; }
  .class-tip .ct-head { font-size: .72rem; }

  /* enemies */
  .enemies { gap: 10px; padding: 4px 4px; min-height: 0; }
  .enemy { width: clamp(72px, min(28vw, 14vh), 124px); }
  .enemy .intent { font-size: .7rem; padding: 2px 6px; margin-bottom: 4px; }
  .enemy .name { font-size: .78rem; margin-top: 3px; line-height: 1.25; }
  .enemy .status { min-height: 0; }
  .intent-sub { font-size: .62rem !important; }

  /* player bar */
  .player-bar { gap: 6px 8px; padding: 6px 8px 6px; }
  .player-portrait { width: 44px; height: 44px; }
  .hero-panel { gap: 8px; }
  .player-stats { min-width: 0; }
  .player-stats .name { font-size: .82rem; }
  .class-meter { padding: 4px 6px; margin-top: 3px; }
  .cm-head { font-size: .72rem !important; }
  .cm-sub { font-size: .64rem !important; line-height: 1.3; }
  .turn-dock { gap: 4px; }
  .end-turn { min-width: 104px; min-height: 48px; padding: 8px 12px; font-size: .95rem; border-radius: 14px; }
  .end-hint { font-size: .64rem; max-width: 120px; }
  .gem { width: 15px; height: 19px; }
  .gem-row { gap: 3px; }
  .gem-label { font-size: .64rem; }
  .board-label { font-size: .6rem; }
  .player-board { min-height: 0; gap: 6px; }
  .board-slot { height: clamp(62px, 9vh, 84px); width: clamp(56px, 19vw, 80px); }
  .board-lane { gap: 2px; }
  .unit .stat { min-width: 22px; height: 20px; font-size: .75rem; }
  .unit-name { font-size: .58rem !important; }

  /* hand: readable cards, inspect lifts one card */
  .hand-area { padding: 4px 4px calc(4px + var(--safe-b)); height: calc(var(--card-h) + 26px + var(--safe-b)); }
  .hand { padding: 4px 6px 0; }
  .pile-info { font-size: .66rem; }
  .card .effect { font-size: .62rem; padding: 3px 5px 5px; }
  .card .name-bar { font-size: .66rem; padding: 3px 4px; }
  .card .kw { font-size: .5rem; }
  .card .cost { width: 30px; height: 30px; font-size: 1rem; }
  .card .rarity-badge { font-size: .48rem; }
  .card.lg { --cw: 112px; --ch: 168px; }
  .reward-row { gap: 26px 8px; }
  .turn-banner .tb-inner { padding: 10px 26px 9px; }
  .tb-sub { font-size: .72rem; }
  .combo-toast b { font-size: 1.05rem; }
  .aim-banner { top: calc(48px + var(--safe-t)); width: calc(100vw - 24px); }
  .aim-banner small { display: none; }

  /* settings → bottom sheet */
  .settings-modal { place-items: end center; }
  .settings-sheet { width: 100vw; border-radius: 22px 22px 0 0; max-height: 92vh; max-height: 92dvh; transform: translateY(40px); }
  .settings-sheet::before { content: ""; width: 40px; height: 4px; border-radius: 4px; background: #5a4a3a; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); }
  .st-slider { flex-wrap: wrap; }
  .st-slider .st-text { width: 100%; }
  .st-seg-btn small { display: none; }
}
@media (max-width: 600px) and (hover: none) {
  .hand .card.inspect {
    transform: translateY(calc(-1 * var(--card-h) * .42)) rotate(0) scale(1.42) !important;
    z-index: 40; filter: drop-shadow(0 18px 30px #000c);
  }
  .screen.battle.aiming .hand .card.aim-selected {
    transform: translateY(calc(-1 * var(--card-h) * .3)) rotate(0) scale(1.25) !important; z-index: 40;
  }
  .hand .card.inspect::after {
    content: "แตะอีกครั้งเพื่อเล่น"; position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
    font-size: .5rem; font-weight: 800; white-space: nowrap; color: #fff4d4;
    background: #0c0a09ee; border: 1px solid var(--brass); border-radius: 999px; padding: 1px 8px;
  }
  .hand .card.inspect.unplayable::after { content: "ยังเล่นไม่ได้"; border-color: #8a4a4a; color: #ffc4c4; }
  .hand .card.inspect.unplayable { filter: drop-shadow(0 18px 30px #000c) brightness(.8); }
}
@media (max-width: 380px) {
  :root { --card-w: 98px; --card-h: 150px; }
  .cm-sub { display: none; }
  .enemy { width: clamp(76px, 27vw, 110px); }
}

/* phones: tip text + button side by side (keeps 44px target, saves height) */
@media (max-width: 600px), (max-height: 500px) {
  .tip-grid { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
  .tip-grid .ct-close { margin-top: 0 !important; white-space: nowrap; }
}
/* short phones (SE / mini): compress vertical rhythm */
@media (max-width: 600px) and (max-height: 760px) {
  :root { --card-w: 96px; --card-h: 146px; }
  .region-tag { display: none; }
  .cm-sub { display: none; }
  .player-portrait { width: 38px; height: 38px; }
  .player-stats .name { font-size: .78rem; }
  .enemy { width: clamp(62px, 12vh, 100px); }
  .enemy .intent { margin-bottom: 2px; }
  .board-slot { height: 58px; width: clamp(52px, 17vw, 72px); }
  .board-label { display: none; }
  .tutorial-tip, .class-tip { font-size: .7rem; padding: 6px 8px; max-height: 24vh; }
  .class-tip .ct-head { margin-bottom: 2px; }
  .end-turn { min-height: 44px; }
  .gem-label { display: none; }
}

/* ——— Phones (landscape) — OK-ish: everything visible without scrolling ——— */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --card-w: 84px; --card-h: 124px; }
  .screen { padding-top: max(8px, var(--safe-t)); padding-bottom: max(8px, var(--safe-b)); }
  .player-stats .name, .gem-label, .res-row:empty { display: none; }
  .turn-dock { flex-direction: row; align-items: center; gap: 8px; }
  .cm-pips { margin: 2px 0 0; }
  .title-frame { flex-direction: row; align-items: stretch; width: min(860px, 100%); gap: 12px; }
  .title-profile-dock { width: 34%; flex-direction: column; align-items: stretch; justify-content: center; }
  .title-hero-panel { padding: 12px 14px; }
  .title-crest-wrap, .title-screen .title-blurb, .title-ornament, .title-screen .sub { display: none; }
  .title-welcome { margin: 4px 0 8px; padding: 8px 10px; }
  .login-shell { width: min(720px, 100%); }
  .login-list { display: grid; grid-template-columns: 1fr 1fr; }
  .login-head .title-crest-wrap { display: none; }

  .battle-top { padding: calc(4px + var(--safe-t)) 8px 0; }
  .battle-hud { flex-wrap: nowrap; }
  .battle-title { font-size: .85rem; }
  .region-tag { display: none; }
  .battle-hud-pills .pill { padding: 3px 8px; font-size: .7rem; }
  .battle-hud-pills .pill-btn { min-width: 40px; min-height: 36px; }
  .pill-label { display: none; }
  .tip-stack { top: calc(40px + var(--safe-t)); left: auto; right: 8px; transform: none; width: min(46vw, 360px); }
  .tutorial-tip, .class-tip { font-size: .7rem; padding: 6px 8px; max-height: 42vh; overflow-y: auto; }
  .enemies { min-height: 0; gap: 10px; padding: 0 4px; }
  .enemy { width: clamp(54px, 14vh, 84px); }
  .enemy .intent { font-size: .64rem; padding: 1px 5px; margin-bottom: 2px; }
  .enemy .status { min-height: 0; margin-top: 2px; }
  .intent-extra:empty { display: none; }
  .enemy .name { font-size: .68rem; margin-top: 2px; }
  .enemy .hpbar { height: 9px; }
  .player-bar { grid-template-columns: minmax(170px, 230px) 1fr auto; grid-template-areas: none; padding: 2px 8px 4px; gap: 8px; }
  .hero-panel, .board-lane, .turn-dock { grid-area: auto; }
  .player-portrait { width: 36px; height: 36px; }
  .class-meter { padding: 3px 6px; }
  .cm-sub, .board-label { display: none; }
  .player-board { min-height: 0; }
  .board-slot { height: 56px; width: 48px; }
  .end-turn { min-height: 44px; min-width: 96px; padding: 6px 10px; font-size: .9rem; }
  .end-hint { display: none; }
  .gem { width: 13px; height: 16px; }
  .hand-area { height: calc(var(--card-h) + 24px + var(--safe-b)); padding: 2px 4px var(--safe-b); justify-content: flex-start; }
  .enemy .intent { white-space: nowrap; }
  .pile-info { display: none; }
  .card .effect { font-size: .56rem; }
  .card .name-bar { font-size: .6rem; }
  .card .kw-row { display: none; }
  .turn-banner .tb-inner { padding: 8px 24px; }
  .tb-title { font-size: 1.4rem; }
  .settings-sheet { max-height: 94vh; max-height: 94dvh; }
}

/* ——— Reduced motion (system OR per-profile setting) ——— */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
body.reduce-motion .title-ember { opacity: .35; }
body.reduce-motion .turn-banner.show { animation: bannerFade 1.25s linear forwards !important; animation-duration: 1.25s !important; }
body.reduce-motion .combo-toast.show { animation: bannerFadeC 1.7s linear forwards !important; animation-duration: 1.7s !important; }
@keyframes bannerFade { 0%, 80% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }
@keyframes bannerFadeC { 0%, 85% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }
body.reduce-motion .card-inner { transform: none !important; }
body.reduce-motion .float-dmg { animation-duration: .9s !important; }
/* "เต็มที่" overrides the OS preference for decorative loops */
body.force-motion .card.rarity-epic .card-edge { animation: edgeSpin 4.5s linear infinite !important; }
body.force-motion .card.rarity-curse .card-edge { animation: edgeSpin 3.2s linear infinite !important; }
@media (prefers-reduced-motion: reduce) {
  body:not(.force-motion) .card-edge, body:not(.force-motion) .hand .card.playable .card-inner,
  body:not(.force-motion) .end-turn.pulse::after, body:not(.force-motion) .card.spotlight::before { animation: none !important; }
}