/* ============================================================
   Pixel-art city look: hard edges, chunky borders, no blur.
   Fonts: Press Start 2P (titles, buttons, numbers: very readable),
          VT323 (names and rules text)
   ============================================================ */
:root {
  --ink: #1a1020;
  --text: #f6ecd2;
  --paper: #f2e3bf;
  --wood: #8a5a2b;
  --gold: #f5c542;
  --gold-dark: #b8741a;
  --blue: #3f8cff;
  --blue-dark: #1b3f8f;
  --red: #e0403a;
  --red-dark: #7a1414;
  --green: #5ce65c;
  --money: #2e9e4f;
  --money-dark: #145c2a;
  --money-light: #8be39f;
  --shadow: 4px 4px 0 rgba(0,0,0,.5);
  --font-title: 'Press Start 2P', 'Lucida Console', monospace;
  --font-text: 'VT323', 'Lucida Console', monospace;
  --font-num: 'Press Start 2P', 'Lucida Console', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-text);
  font-size: 17px;
  color: var(--text);
  /* asphalt with faint pavement seams */
  background-color: #2b2e35;
  background-image:
    linear-gradient(rgba(0,0,0,.25) 3px, transparent 3px),
    linear-gradient(90deg, rgba(0,0,0,.25) 3px, transparent 3px);
  background-size: 64px 64px;
  overflow: hidden;
  user-select: none;
}
#app { height: 100vh; }
b { font-weight: 700; }

.sprite { display: block; image-rendering: crisp-edges; image-rendering: pixelated; }

/* ---------- layout ---------- */
.table {
  height: 100%;
  display: grid;
  /* each half gets at least the room its contents need, so nothing is squeezed off-screen */
  grid-template-rows: minmax(min-content, 1fr) auto minmax(min-content, 1fr);
  padding: 16px 256px 16px 16px;
}
.side { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 0; }
/* each side's board is a city block: concrete tiles inside a curb */
.board {
  display: flex; justify-content: center; align-items: center; gap: 14px; min-height: 132px;
  background-color: #6b707a;
  background-image:
    linear-gradient(rgba(0,0,0,.18) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0,0,0,.18) 2px, transparent 2px);
  background-size: 32px 32px;
  border: 4px solid var(--ink);
  box-shadow: inset 0 0 0 5px #a9aeb6, inset 0 0 0 8px #50545c;
}
.hero-row { display: flex; justify-content: center; align-items: center; gap: 36px; padding-bottom: 14px; }
/* the road between the two blocks, with a dashed center line */
.midline {
  display: flex; align-items: center; justify-content: center; gap: 20px; padding: 10px 0;
  background:
    linear-gradient(90deg, #f5c542 50%, transparent 0) 0 50% / 48px 4px repeat-x,
    #1f2126;
  border-top: 3px solid #0e0f12; border-bottom: 3px solid #0e0f12;
}
.status {
  min-width: 300px; padding: 4px 12px; text-align: center; font-size: 20px;
  background: #15171b; border: 3px solid var(--ink);
}

/* ---------- buttons ---------- */
.btn {
  padding: 12px 18px; font-family: var(--font-title); font-size: 13px; cursor: pointer;
  color: var(--ink); background: var(--gold); border: 3px solid var(--ink); border-radius: 0;
  box-shadow: inset -4px -4px 0 var(--gold-dark), inset 4px 4px 0 #fff3b0, var(--shadow);
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translate(2px, 2px); box-shadow: inset -4px -4px 0 var(--gold-dark), inset 4px 4px 0 #fff3b0, 2px 2px 0 rgba(0,0,0,.5); }
.btn.alt { background: #7fb3ff; box-shadow: inset -4px -4px 0 var(--blue-dark), inset 4px 4px 0 #d6e6ff, var(--shadow); }
.btn.danger { background: #ff7a6b; box-shadow: inset -4px -4px 0 var(--red-dark), inset 4px 4px 0 #ffc2ba, var(--shadow); }
.btn.small { padding: 8px 10px; font-size: 10px; }
.btn:disabled { cursor: default; filter: grayscale(1) brightness(.7); transform: none; }
.end-turn.nothing-left { animation: ready-blink 1s steps(2) infinite; }

/* ---------- cards ---------- */
.card {
  position: relative; width: 118px; height: 172px; padding: 8px 7px 18px;
  display: flex; flex-direction: column; align-items: center;
  color: var(--ink); background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 3px var(--wood), var(--shadow);
}
/* spells are blueprints: dark blue paper with a light grid, so they never look like units */
.card-spell {
  color: #eaf2ff;
  background-color: #24508f;
  background-image:
    linear-gradient(rgba(190,215,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190,215,255,.16) 1px, transparent 1px);
  background-size: 10px 10px;
  box-shadow: inset 0 0 0 3px #8fb6ea, var(--shadow);
}
.card-spell .c-art { background: #16335e; }
.card-spell .c-text b { color: #ffe066; }
/* type tag on the bottom edge: UNIT / SPELL */
.c-type {
  position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); padding: 3px 5px 2px;
  font-family: var(--font-title); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--paper); background: var(--ink); border: 2px solid var(--wood);
}
.card-spell .c-type { color: #eaf2ff; border-color: #8fb6ea; }
.c-art {
  flex: none; width: 56px; height: 56px; margin-top: 4px; display: grid; place-items: center;
  background: #2a2238; border: 3px solid var(--ink);
}
.c-art .sprite { width: 48px; height: 48px; }
.c-name {
  flex: none; width: calc(100% + 14px); margin: 5px 0 3px; padding: 1px 4px 2px;
  font-size: 17px; text-align: center; line-height: .85;
  color: #fff; background: var(--banner, #5a5f68); border: 3px solid var(--ink);
  text-shadow: 1px 1px 0 var(--ink);
}
.c-text {
  flex: 1; min-height: 0; width: 100%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 15px; line-height: 1;
}
.c-text span { display: block; max-width: 100%; overflow-wrap: break-word; }
.c-text b { color: #6b1f5a; }
.text-probe { position: absolute; left: -9999px; top: 0; visibility: hidden; }

/* square pixel badges: cost, attack, health */
.c-cost, .stat, .hero-hp {
  position: absolute; display: grid; place-items: center; padding-top: 2px;
  font-family: var(--font-num); color: #fff; border: 3px solid var(--ink);
  text-shadow: 2px 2px 0 var(--ink);
}
.c-cost {
  top: -11px; left: -11px; width: 32px; height: 32px; font-size: 14px;
  background: var(--money); box-shadow: inset -3px -3px 0 var(--money-dark), inset 3px 3px 0 var(--money-light);
}
.stat { bottom: -11px; width: 30px; height: 30px; font-size: 12px; }
.stat.atk { left: -11px; background: #e8a317; box-shadow: inset -3px -3px 0 #8a5a0a, inset 3px 3px 0 #ffd66b; }
.stat.hp { right: -11px; background: var(--red); box-shadow: inset -3px -3px 0 var(--red-dark), inset 3px 3px 0 #ff9a90; }
.buffed { color: var(--green); }
.stat.hp.damaged, .hero-hp.damaged { background: #4a0f0f; box-shadow: none; color: #ff8a80; }

/* ---------- hand ---------- */
.hand { display: flex; justify-content: center; align-items: flex-end; min-height: 188px; padding-bottom: 12px; }
.hand-slot {
  position: relative; margin: 0 var(--overlap, -4px); cursor: grab; touch-action: none;
  transform-origin: center bottom; transition: transform .1s steps(3);
}
.hand-slot:hover { transform: translateY(-14px) scale(1.3); z-index: 5; }
.hand-slot:not(.playable) .card { filter: brightness(.7); }
.hand-slot.playable .card { outline: 4px solid var(--green); }
.hand-slot.selected { transform: translateY(-14px) scale(1.3); z-index: 6; }
.hand-slot.selected .card { outline: 4px solid var(--gold); }
.hand-slot.dragging { opacity: .25; transform: none; }

/* ---------- drag and drop ---------- */
.drag-ghost { position: fixed; z-index: 200; pointer-events: none; filter: drop-shadow(6px 6px 0 rgba(0,0,0,.5)); transition: opacity .12s; }
/* a targeted spell over the table: the ghost fades into an aiming arrow, and the card waits raised in the hand */
.drag-ghost.aiming { opacity: 0; }
.drag-arrow.hidden-arrow { display: none; }
.hand-slot.dragging.aiming { opacity: 1; transform: translateY(-14px) scale(1.15); z-index: 6; }
.hand-slot.aiming .card { outline: 4px solid var(--gold); }
.drag-arrow { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 200; pointer-events: none; }
.drag-arrow line { stroke: var(--red); stroke-width: 6; stroke-dasharray: 12 8; }
.drag-arrow rect { fill: var(--red); stroke: var(--ink); stroke-width: 3; }
.board.drop-ready { background: rgba(92, 230, 92, .22); border-color: var(--green); }
.drop-hover { outline-color: #fff !important; transform: scale(1.08); }
.is-dragging .preview { display: none !important; }
.is-dragging .hand-slot:not(.dragging):hover { transform: none; }
.is-dragging, .is-dragging * { cursor: grabbing !important; }

.hand-backs { display: flex; justify-content: center; align-items: flex-start; height: 52px; }
/* card back: a tiny skyscraper with lit windows */
.card-back {
  width: 36px; height: 50px; margin: 0 -3px; border: 3px solid var(--ink);
  background: conic-gradient(#ffd66b 25%, #26324a 0) 2px 2px / 8px 8px, #26324a;
  box-shadow: inset 0 0 0 3px #7d8aa3, var(--shadow);
}

/* ---------- minions ---------- */
.minion {
  position: relative; width: 90px; height: 106px; cursor: pointer; touch-action: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #2f3440; border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 3px #59627a, var(--shadow);
}
/* Roadblock: striped construction-barrier frame */
.minion.taunt {
  border: 6px solid transparent;
  border-image: repeating-linear-gradient(45deg, #f5a623 0 8px, #1a1020 8px 16px) 6;
  box-shadow: var(--shadow);
}
.minion.shield::after {
  content: ''; position: absolute; inset: -10px; pointer-events: none;
  border: 3px solid #ffe680; animation: shimmer 1.2s steps(2) infinite;
}
.minion.sleeping .m-art { filter: grayscale(.7) brightness(.8); }
.minion.spawn { animation: spawn .4s steps(6); }
.m-art { width: 48px; height: 48px; margin-top: -6px; }
.m-name { max-width: 84px; margin-top: 2px; font-size: 15px; line-height: .85; text-align: center; }
.m-icons { position: absolute; top: -12px; display: flex; gap: 2px; }
.m-icons .icon { width: 20px; height: 20px; }
.zzz { position: absolute; top: 6px; right: 7px; font-family: var(--font-title); font-weight: 700; color: #cfe3ff; text-shadow: 2px 2px 0 var(--ink); animation: bob 1.4s steps(2) infinite; }

.preview { position: absolute; left: 50%; transform: translateX(-50%); display: none; z-index: 20; pointer-events: none; }
.side.top .preview { top: 112%; }
.side.bottom .preview { bottom: 112%; }
.minion:hover .preview { display: block; }

/* ---------- heroes ---------- */
.hero {
  position: relative; width: 84px; height: 84px; display: grid; place-items: center;
  background: #20242d; border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 5px var(--hero, var(--gold)), inset 0 0 0 7px var(--ink), var(--shadow);
}
.hero-art { width: 64px; height: 64px; }
.hero-hp {
  right: -13px; bottom: -11px; width: 40px; height: 34px; font-size: 14px;
  background: var(--red); box-shadow: inset -3px -3px 0 var(--red-dark), inset 3px 3px 0 #ff9a90;
}
.info {
  display: flex; flex-direction: column; gap: 5px; min-width: 200px; padding: 6px 10px;
  background: rgba(0,0,0,.45); border: 3px solid var(--ink);
}
.pname { font-size: 24px; line-height: .9; }
.pname small { font-size: 17px; margin-left: 4px; filter: brightness(1.6); }
.mana { display: flex; align-items: center; gap: 8px; }
.mana b { font-family: var(--font-num); font-weight: 400; font-size: 11px; color: var(--money-light); }
.gems { display: flex; gap: 2px; }
.gem { width: 10px; height: 12px; border: 2px solid var(--ink); }
.gem.full { background: var(--money); box-shadow: inset 2px 2px 0 var(--money-light); }
.gem.spent { background: #1d3325; }
.gem.locked { background: transparent; border-color: rgba(255,255,255,.12); }
.counts { opacity: .75; font-size: 17px; line-height: 1; }

.power {
  position: relative; width: 58px; height: 58px; padding: 0; display: grid; place-items: center; cursor: pointer;
  font-family: inherit; color: var(--text);
  background: #3a4254; border: 3px solid var(--ink);
  box-shadow: inset -3px -3px 0 #1f2430, inset 3px 3px 0 #6c7894, var(--shadow);
}
.power-art { width: 32px; height: 32px; }
.power-name {
  position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); width: 96px;
  font-size: 16px; line-height: .85; text-align: center; text-shadow: 2px 2px 0 var(--ink);
}
.power .c-cost { width: 28px; height: 28px; top: -11px; left: -11px; font-size: 12px; }
/* dim the contents, not the button itself: a filter on the button would also dim its tooltip
   and trap it underneath the board */
.power.used { background: #23272f; box-shadow: inset -3px -3px 0 #15181f, inset 3px 3px 0 #3a4050, var(--shadow); }
.power.used > :not(.tip) { filter: grayscale(1) brightness(.55); }
.power.usable { outline: 4px solid var(--green); outline-offset: 2px; }

/* ---------- tooltips (hover a card, unit or hero power) ---------- */
.tip {
  position: absolute; z-index: 40; display: none; width: 240px; padding: 8px 10px; pointer-events: none;
  font-family: var(--font-text); font-size: 17px; line-height: 1; text-align: left; color: var(--text);
  text-shadow: none; white-space: normal;
  background: #15171b; border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 3px #4a5570, var(--shadow);
}
.hand-slot:hover > .tip, .preview .tip, .power:hover > .tip { display: block; }
.is-dragging .tip { display: none !important; }
.tip > span { display: block; }
.tip-title { font-family: var(--font-title); font-size: 10px; line-height: 1.4; color: #fff; }
.tip-sub { margin-top: 2px; opacity: .7; }
.tip-line { margin-top: 7px; }
.tip b { color: var(--gold); }
.tip-status { color: #9cc4ff; }
.tip.right { left: calc(100% + 10px); }
.tip.left { right: calc(100% + 10px); }
.tip.above { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); }
.tip.below { top: calc(100% + 38px); left: 50%; transform: translateX(-50%); }   /* clears the power's name label */
/* line side tooltips up with the card: bottom edges near your hand, top edges on the enemy's side */
.hand-slot > .tip, .side.bottom .preview .tip { bottom: 0; }
.side.top .preview .tip { top: 0; }
/* hovered hand cards are scaled up 1.3x; shrink their tooltip back to normal size */
.hand-slot > .tip { zoom: .77; }

/* ---------- highlight states ---------- */
.minion.ready { outline: 4px solid var(--green); outline-offset: 3px; }
.minion.selected, .power.selected { outline: 4px solid var(--gold) !important; outline-offset: 3px; }
.minion.selected { transform: translateY(-6px); }
.targetable { outline: 4px solid var(--red) !important; outline-offset: 3px; cursor: crosshair; animation: target-blink .7s steps(2) infinite; }
.focus { outline: 4px solid #fff; outline-offset: 3px; animation: target-blink .5s steps(2) infinite; }
.hit { animation: shake .3s steps(4); }

/* ---------- popups ---------- */
.pop {
  position: absolute; top: 40%; left: 50%; z-index: 30; pointer-events: none;
  font-family: var(--font-num); font-size: 22px;
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 3px 3px 0 var(--ink);
  animation: pop 1.2s steps(12) forwards;
}
.pop.dmg { color: #ff5a4a; }
.pop.heal { color: var(--green); font-size: 14px; }
.pop.shield { color: #ffe680; font-size: 11px; }

/* ---------- computer's played card ---------- */
.reveal {
  position: fixed; z-index: 150; pointer-events: none; text-align: center;
  animation: reveal 1.8s ease-out forwards;
}
.reveal p {
  margin: 0 0 10px; font-family: var(--font-title); font-size: 10px; color: var(--gold);
  text-shadow: 2px 2px 0 var(--ink);
}
.reveal .card { box-shadow: 0 0 0 4px var(--gold), 0 0 0 8px var(--ink), 8px 8px 0 8px rgba(0,0,0,.4); }

/* ---------- enemy aiming arrow & destroyed units ---------- */
.aim-arrow { z-index: 160; }   /* above the enemy's revealed card */
.aim-arrow line { animation: march .5s linear infinite; }
.destroyed { position: fixed; z-index: 60; pointer-events: none; transform-origin: top left; }
.destroyed .minion { animation: destroyed .8s steps(8) forwards; }

/* ---------- log ---------- */
.log {
  position: fixed; top: 0; right: 0; bottom: 0; width: 224px; padding: 12px; overflow-y: auto;
  font-size: 17px; background: rgba(14,16,22,.85); border-left: 4px solid var(--ink);
}
.log h3 { margin: 0 0 12px; font-family: var(--font-title); font-size: 10px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.log p { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; opacity: .65; line-height: 1; }
.log-icon { flex: none; width: 24px; height: 24px; }
.log-icon[data-card] { cursor: help; }
.log-icon .sprite { width: 24px; height: 24px; }
.log-preview { position: fixed; z-index: 150; pointer-events: none; transform-origin: top right; }
.log p:first-of-type { opacity: 1; }
@media (max-width: 1000px) {
  .table { padding-right: 16px; }
  .log { display: none; }
}

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgba(12,14,20,.94); text-align: center;
}
.overlay.see-through { background: rgba(12,14,20,.7); }
.panel {
  max-width: 500px; padding: 28px 30px; font-size: 19px;
  background: #1f2430; border: 4px solid var(--ink);
  box-shadow: inset 0 0 0 4px #4a5570, 6px 6px 0 rgba(0,0,0,.6);
}
.panel.wide { width: min(940px, 100%); max-width: none; }
.panel h1 { margin: 0 0 16px; font-family: var(--font-title); font-size: 24px; line-height: 1.3; font-weight: 400; }
/* neon sign */
.logo { font-size: 40px !important; color: #ffe066; text-shadow: 4px 4px 0 #d9480f, 8px 8px 0 var(--ink); }

/* ---------- hero select ---------- */
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 8px 0 22px; }
.hero-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px 14px; cursor: pointer;
  font-family: var(--font-text); font-size: 17px; line-height: 1; color: var(--text); text-align: center;
  background: #2a3040; border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 4px var(--hero), var(--shadow);
  transition: transform .1s steps(2);
}
.hero-tile:hover { transform: translateY(-4px); outline: 4px solid #fff; outline-offset: 2px; }
.tile-art { width: 64px; height: 64px; }
.tile-name { font-family: var(--font-title); font-size: 12px; line-height: 1.4; color: #fff; text-shadow: 2px 2px 0 var(--hero); }
.tile-blurb { opacity: .85; min-height: 3em; }
.tile-power { display: flex; gap: 6px; align-items: center; text-align: left; padding: 6px; background: rgba(0,0,0,.3); border: 2px solid var(--ink); }
.tile-power-art { width: 24px; height: 24px; flex: none; }
.tile-samples { display: flex; gap: 4px; }
.tile-samples .sample { width: 24px; height: 24px; }
.title-sprites { display: flex; justify-content: center; align-items: center; gap: 16px; margin-bottom: 10px; }
.title-art { width: 64px; height: 64px; animation: bob 1.4s steps(2) infinite; }
.title-art:nth-child(even) { animation-delay: .7s; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .12em; opacity: .6; }
.names { display: flex; gap: 12px; justify-content: center; margin: 20px 0; flex-wrap: wrap; }
.names label { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.names input {
  width: 180px; padding: 6px 10px; font-size: 20px; font-family: inherit; color: var(--text);
  background: #150e1a; border: 3px solid var(--ink); box-shadow: inset 3px 3px 0 rgba(0,0,0,.5); border-radius: 0;
}
.modes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.howto { margin-top: 22px; text-align: left; }
.howto summary { cursor: pointer; text-align: center; opacity: .8; }
.howto li { margin-bottom: 6px; }

/* ---------- patch notes (title screen, bottom left) ---------- */
.patch-notes {
  position: absolute; left: 16px; bottom: 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left;
}
.patch-row { display: flex; align-items: center; gap: 12px; }
.version { font-family: var(--font-num); font-size: 9px; opacity: .6; }
.patch-list {
  width: 360px; max-height: 60vh; overflow-y: auto; padding: 14px 16px 4px;
  background: #1f2430; border: 4px solid var(--ink);
  box-shadow: inset 0 0 0 4px #4a5570, 6px 6px 0 rgba(0,0,0,.6);
}
.patch-list h4 { margin: 0 0 6px; font-family: var(--font-title); font-size: 11px; font-weight: 400; color: var(--gold); }
.patch-list h4 small { margin-left: 6px; font-family: var(--font-text); font-size: 15px; color: var(--text); opacity: .6; }
.patch-list ul { margin: 0 0 14px; padding-left: 18px; }
.patch-list li { margin-bottom: 5px; line-height: 1; }

/* ---------- online menus ---------- */
.online-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.online-choice {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 12px; background: rgba(0,0,0,.3); border: 3px solid var(--ink);
}
.online-choice p { margin: 0; }
.code-input, .invite {
  font-family: var(--font-num); color: var(--text); text-align: center; border-radius: 0;
  background: #150e1a; border: 3px solid var(--ink); box-shadow: inset 3px 3px 0 rgba(0,0,0,.5);
}
.code-input { width: 150px; padding: 8px; font-size: 16px; letter-spacing: .2em; text-transform: uppercase; }
.code-input::placeholder { color: rgba(246,236,210,.3); }
.game-code {
  margin: 8px 0 16px; font-family: var(--font-title); font-size: 40px; letter-spacing: .25em;
  color: #ffe066; text-shadow: 4px 4px 0 #d9480f, 8px 8px 0 var(--ink);
}
.invite-row { display: flex; gap: 8px; justify-content: center; align-items: center; }
.invite { flex: 1; min-width: 0; padding: 8px; font-family: var(--font-text); font-size: 17px; text-align: left; user-select: text; }
.hint { margin-top: 6px; font-size: 16px; opacity: .7; }
.waiting { color: var(--gold); animation: blink 1.2s steps(2) infinite; }
.error { padding: 8px 10px; color: #ffc2ba; background: rgba(224,64,58,.18); border: 3px solid var(--red-dark); }

/* ---------- animations (mostly stepped for a retro feel) ---------- */
@keyframes target-blink { 50% { outline-color: #ffb0a8; } }
@keyframes ready-blink { 50% { box-shadow: inset -4px -4px 0 var(--gold-dark), inset 4px 4px 0 #fff3b0, 0 0 0 4px var(--green); } }
@keyframes blink { 50% { opacity: .45; } }
@keyframes march { to { stroke-dashoffset: -20; } }
/* flash, shake, turn to rubble, fall away */
@keyframes destroyed {
  0%   { filter: brightness(2.5); }
  15%  { filter: none; translate: -5px 0; }
  30%  { translate: 5px 0; filter: grayscale(1); }
  45%  { translate: -3px 0; filter: grayscale(1); opacity: 1; }
  100% { translate: 0 24px; rotate: 10deg; scale: .8; filter: grayscale(1) brightness(.4); opacity: 0; }
}
@keyframes shimmer { 50% { border-color: #fff8d0; } }
@keyframes bob { 50% { translate: 0 -3px; } }
@keyframes shake { 25% { translate: -5px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }
@keyframes spawn { from { opacity: 0; transform: translateY(-24px) scale(1.25); } }
@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -120%); }
}
/* card flies in from the enemy's hand, holds big in the middle, then drops toward the board */
@keyframes reveal {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateY(-260px) scale(calc(var(--s) * .4)); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(calc(var(--s) * 1.7)); }
  75%  { opacity: 1; transform: translate(-50%, -50%) scale(calc(var(--s) * 1.7)); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateY(-120px) scale(calc(var(--s) * .6)); }
}