/* Warpforge — stellar foundry card table.
   BoomPop night-sky chrome; interior art direction: forged holo-cards
   floating over a nebula. Faction hue rides on --fc per card. */

:root {
  --bg: #0b0918;
  --bg2: #151228;
  --bg3: #1c1736;
  --ink: #f4ecff;
  --dim: #9d8fc4;
  --line: #2b2450;
  --boom: #ffbf3f;
  --pop: #ff6b35;
  --gold: #ffd166;
  --teal: #2a9d8f;
  --danger: #e63946;
  --energy: #7ef0ff;
  --cw: 116px;               /* base card width */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background:
    radial-gradient(1100px 600px at 70% -180px, #221c46 0%, transparent 60%),
    radial-gradient(900px 700px at 10% 110%, #1b0f2e 0%, transparent 55%),
    linear-gradient(180deg, #0d0a1e 0%, var(--bg) 45%, #080614 100%);
  color: var(--ink);
  font-family: 'Chakra Petch', sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  /* rapid tap-tap attack sequences must not arm double-tap zoom on phones */
  touch-action: manipulation;
}
#stars, #glfx {
  position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
#stars { z-index: 0; }
#glfx { z-index: 65; mix-blend-mode: screen; }

button { font-family: inherit; cursor: pointer; }

/* ------------------------------------------------------------- topbar */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  pointer-events: none;
}
#topbar > * { pointer-events: auto; }
.back {
  font-family: 'Bungee', sans-serif; font-size: 13px;
  color: var(--boom); text-decoration: none;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(11, 9, 24, .72); backdrop-filter: blur(4px);
}
.back:hover { border-color: var(--boom); }
#title {
  font-family: 'Bungee', sans-serif; font-size: 16px; letter-spacing: .06em;
  color: var(--ink); text-shadow: 0 0 18px rgba(255, 191, 63, .35);
}
#title small { display: block; font-size: 8px; color: var(--dim); letter-spacing: .34em; }
.top-actions { margin-left: auto; display: flex; gap: 8px; }
.iconbtn {
  background: rgba(21, 18, 40, .8); color: var(--dim);
  border: 1px solid var(--line); border-radius: 10px;
  font-size: 12px; font-weight: 700; padding: 7px 10px;
}
.iconbtn:hover { color: var(--ink); border-color: var(--boom); }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, #ffd166, #ff9f1c);
  color: #1a0f00; border: 0; border-radius: 12px;
  font-weight: 700; font-size: 15px; padding: 12px 20px;
  box-shadow: 0 6px 22px -8px rgba(255, 159, 28, .8);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -8px rgba(255, 159, 28, .9); }
.btn:disabled { filter: grayscale(.8) brightness(.6); cursor: not-allowed; transform: none; }
.btn.big { font-family: 'Bungee', sans-serif; font-size: 16px; padding: 14px 26px; width: 100%; }
.btn.ghost {
  background: transparent; color: var(--dim);
  border: 1px solid var(--line); box-shadow: none;
}
.btn.ghost:hover { color: var(--ink); border-color: var(--boom); }
.btn.small { font-size: 12px; padding: 7px 12px; border-radius: 9px; }

/* ------------------------------------------------------------- screens */
.screen { position: fixed; inset: 0; z-index: 10; }
.screen[hidden] { display: none !important; }

/* ------------------------------------------------------------- lobby */
#lobby {
  display: flex;
  padding: 70px 16px 24px; overflow-y: auto;
}
.lobby-card {
  /* margin:auto centers like align/justify center but stays scrollable when
     the card is taller than a short (landscape phone) viewport */
  margin: auto;
  width: min(560px, 100%);
  background: linear-gradient(170deg, rgba(28, 23, 54, .92), rgba(21, 18, 40, .92));
  border: 1px solid var(--line); border-radius: 22px;
  padding: 34px 34px 28px;
  box-shadow: 0 40px 90px -40px #000, 0 0 0 1px rgba(255, 191, 63, .06) inset;
  backdrop-filter: blur(6px);
}
.kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .4em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 8px;
}
.wordmark h1 {
  font-family: 'Bungee', sans-serif; font-size: clamp(40px, 8vw, 58px); line-height: .95;
  background: linear-gradient(180deg, #fff6dd 0%, var(--gold) 40%, var(--pop) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(255, 159, 28, .35));
}
.wordmark h1 span {
  background: linear-gradient(180deg, #d6f6ff 0%, #4cc9f0 55%, #b388eb 100%);
  -webkit-background-clip: text; background-clip: text;
}
.wordmark .sub { margin: 14px 0 22px; color: var(--dim); font-size: 14px; line-height: 1.65; }

#lobby-body .menu { display: flex; flex-direction: column; gap: 10px; }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 16px stops iOS Safari from zooming the page when the field focuses */
#lobby-body input {
  min-width: 0; width: 100%; min-height: 46px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 12px; padding: 10px 14px;
  font-family: inherit; font-size: 16px; letter-spacing: .06em;
}
#lobby-body input::placeholder { color: var(--dim); }
#lobby-body input:focus { outline: none; border-color: var(--boom); }
.hint { font-size: 12.5px; color: var(--dim); line-height: 1.6; margin-top: 12px; }
.roomcode { color: var(--gold); font-weight: 700; letter-spacing: .1em; }
.deck-select {
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
  padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px;
}
.deck-select label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .16em; }
.deck-select select {
  flex: 1; background: var(--bg2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  font-family: inherit; font-size: 13px;
}
.members { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.member {
  display: flex; align-items: center; gap: 10px;
  background: rgba(11, 9, 24, .55); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px; font-size: 14px;
}
.member .dot { width: 10px; height: 10px; border-radius: 50%; }
.member .tag {
  margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .14em;
  color: var(--dim);
}
.member .tag.host { color: var(--gold); }

/* ------------------------------------------------------------- foundry */
#foundry { display: flex; flex-direction: column; padding: 58px 14px 12px; z-index: 20; }
.foundry-head {
  display: flex; align-items: center; gap: 14px; padding: 4px 2px 10px;
}
.foundry-title {
  font-family: 'Bungee', sans-serif; font-size: 18px;
  color: var(--gold); text-shadow: 0 0 16px rgba(255, 209, 102, .4);
}
.foundry-status { margin-left: auto; font-size: 13px; color: var(--dim); }
.foundry-status b { color: var(--gold); }
.foundry-status .bad { color: var(--danger); }
.foundry-main {
  flex: 1; display: grid; grid-template-columns: 1fr 300px; gap: 14px; min-height: 0;
}
.pool-pane { display: flex; flex-direction: column; min-height: 0; }
.pool-filters {
  display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 10px; align-items: center;
}
.fchip {
  --fc: var(--dim);
  border: 1px solid var(--line); background: rgba(21, 18, 40, .8);
  color: var(--dim); border-radius: 999px; font-size: 12px; font-weight: 600;
  padding: 5px 12px;
}
.fchip.on { color: #10091e; background: var(--fc); border-color: var(--fc); }
.pool-filters input[type="search"] {
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 6px 12px; font-family: inherit; font-size: 12.5px;
  width: 150px;
}
.pool-grid {
  flex: 1; overflow-y: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 10px; padding: 4px 6px 30px 2px; align-content: start;
  overscroll-behavior: contain; scrollbar-gutter: stable;
  contain: layout paint; isolation: isolate;
}
.pool-grid .wf {
  cursor: pointer;
  content-visibility: auto;
  contain: layout paint style;
  contain-intrinsic-size: 124px 174px;
}
.pool-grid .wf[data-rarity="legendary"] { animation: none; }
.pool-grid .wf .stars-mini { box-shadow: none !important; }
.pool-grid .wf.maxed { filter: grayscale(.75) brightness(.55); }
.pool-grid .wf .incount {
  position: absolute; top: -7px; right: -7px; z-index: 5;
  background: var(--gold); color: #1a0f00; font-weight: 700; font-size: 12px;
  border-radius: 999px; min-width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

/* Foundry inspect zoom -------------------------------------------------- */
.foundry-inspect {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
}
.foundry-inspect[hidden] { display: none !important; }
.fi-scrim {
  position: absolute; inset: 0;
  background: rgba(4, 2, 14, .72);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .28s ease;
  cursor: pointer;
}
.foundry-inspect.open .fi-scrim { opacity: 1; }
.fi-stage {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  pointer-events: none;
}
.fi-fly {
  position: fixed;
  z-index: 2;
  --cw: 124px;
  transform-origin: top left;
  will-change: transform, left, top;
  pointer-events: none;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .85));
}
.fi-fly .wf {
  width: var(--cw);
  cursor: default;
  content-visibility: visible;
  contain: none;
}
.fi-fly.settled { pointer-events: auto; }
.fi-actions {
  position: fixed; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  align-items: center;
  max-width: min(360px, calc(100vw - 24px));
  pointer-events: auto;
  opacity: 0;
  transition: opacity .22s ease .12s;
}
.foundry-inspect.open .fi-actions:not([hidden]) { opacity: 1; }
.fi-meta {
  flex: 1 0 100%; text-align: center; font-size: 12px; color: var(--dim);
}
.fi-meta b { color: var(--gold); }

.deck-pane {
  display: flex; flex-direction: column; gap: 10px; min-height: 0;
  background: rgba(15, 12, 32, .85); border: 1px solid var(--line);
  border-radius: 16px; padding: 14px;
}
.deck-pane input[type="text"] {
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 14px; font-weight: 600;
}
.curve { display: flex; gap: 3px; align-items: flex-end; height: 46px; padding: 0 2px; }
.curve .bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
.curve .bar i {
  display: block; background: linear-gradient(180deg, var(--gold), var(--pop));
  border-radius: 3px 3px 0 0; min-height: 2px;
}
.curve .bar s { text-decoration: none; font-size: 9px; color: var(--dim); text-align: center; }
.deck-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.deck-row {
  --fc: var(--dim);
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fc) 18%, transparent), rgba(11, 9, 24, .6));
  border: 1px solid color-mix(in srgb, var(--fc) 35%, var(--line));
  border-radius: 8px; padding: 4px 8px; font-size: 12.5px; cursor: pointer;
}
.deck-row:hover { border-color: var(--danger); }
.deck-row .cost {
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  background: #0d2033; color: var(--energy); font-weight: 700; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(126, 240, 255, .4);
}
.deck-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-row .ct { margin-left: auto; color: var(--gold); font-weight: 700; }
.deck-actions { display: flex; gap: 8px; }
.deck-actions .btn { flex: 1; }

/* ------------------------------------------------------------- cards */
.wf {
  --fc: var(--dim);
  position: relative;
  width: var(--cw);
  aspect-ratio: 5 / 7;
  border-radius: calc(var(--cw) * .075);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--fc) 55%, #0a0716), #0a0716 55%);
  padding: 2px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .9);
  flex: none;
  font-size: calc(var(--cw) * .085);
}
.wf .inner {
  position: relative; height: 100%; border-radius: inherit;
  background: linear-gradient(180deg, #171230, #0e0a20);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.wf .art {
  position: relative; height: 46%;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--fc) 55%, transparent), transparent 70%),
    radial-gradient(60% 50% at 20% 80%, color-mix(in srgb, var(--fc) 25%, transparent), transparent 70%),
    #0a0716;
  display: flex; align-items: center; justify-content: center;
}
.wf .art .stars-mini { position: absolute; inset: 0; opacity: .8; }
.wf .art .glyph {
  position: relative; z-index: 2;
  font-size: calc(var(--cw) * .34); line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .8)) drop-shadow(0 0 18px color-mix(in srgb, var(--fc) 60%, transparent));
}

/* Full-bleed art (fixed 5:7) under heuristic frame chrome ---------------- */
.wf.has-art .inner {
  background: #0a0716;
}
.wf.has-art .art-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
/* Readability scrim: keeps name/rules legible without baking text into the art. */
.wf.has-art .art-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--fc) 22%, transparent) 0%,
      transparent 28%,
      transparent 42%,
      rgba(8, 5, 18, .55) 62%,
      rgba(6, 4, 14, .92) 82%,
      #070510 100%),
    radial-gradient(120% 70% at 50% 100%,
      color-mix(in srgb, var(--fc) 18%, transparent),
      transparent 70%);
}
.wf.has-art .kwrow {
  top: auto;
  bottom: calc(var(--cw) * .52);
  right: calc(var(--cw) * .04);
  z-index: 3;
}
.wf.has-art .nm,
.wf.has-art .typeline,
.wf.has-art .txt,
.wf.has-art .stats,
.wf.has-art .gem {
  position: relative;
  z-index: 2;
}
.wf.has-art .nm {
  margin-top: auto;
  min-height: 0;
  padding-top: calc(var(--cw) * .02);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .6);
}
.wf.has-art .typeline {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}
.wf.has-art .txt {
  flex: 0 1 auto;
  max-height: calc(var(--cw) * .34);
  color: color-mix(in srgb, var(--ink) 78%, var(--dim));
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
}
.wf.has-art .stats {
  height: calc(var(--cw) * .22);
}
.wf.has-art .atk,
.wf.has-art .hp {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .35);
}

/* Type on small fans uses max() floors: proportional to the card, but never
   below legible sizes (stats/cost ≥12px) even at phone --cw. */
.wf .cost {
  position: absolute; top: calc(var(--cw) * -.04); left: calc(var(--cw) * -.04); z-index: 4;
  width: max(23px, calc(var(--cw) * .26)); height: max(23px, calc(var(--cw) * .26));
  background: radial-gradient(circle at 35% 30%, #b8f6ff, #0d5c74 75%);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  color: #04222e; font-weight: 700; font-size: max(12px, calc(var(--cw) * .14));
  display: flex; align-items: center; justify-content: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
.wf .nm {
  padding: calc(var(--cw) * .035) calc(var(--cw) * .06) 0;
  font-weight: 700; font-size: max(10.5px, calc(var(--cw) * .085));
  line-height: 1.15; letter-spacing: .01em;
  color: var(--ink);
  min-height: calc(var(--cw) * .21);
}
.wf .typeline {
  padding: 0 calc(var(--cw) * .06);
  font-size: max(8px, calc(var(--cw) * .062));
  letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--fc) 80%, #fff);
}
.wf .txt {
  flex: 1; padding: calc(var(--cw) * .03) calc(var(--cw) * .06);
  font-size: max(9.5px, calc(var(--cw) * .07)); line-height: 1.28; color: var(--dim);
  overflow: hidden;
}
.wf .txt b { color: var(--ink); }
.wf .stats {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 calc(var(--cw) * .035) calc(var(--cw) * .035);
  height: calc(var(--cw) * .2);
}
.wf .atk, .wf .hp {
  min-width: max(22px, calc(var(--cw) * .22)); height: max(18px, calc(var(--cw) * .19));
  border-radius: calc(var(--cw) * .06);
  font-weight: 700; font-size: max(12px, calc(var(--cw) * .115));
  display: flex; align-items: center; justify-content: center;
  padding: 0 calc(var(--cw) * .04);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.wf .atk { background: linear-gradient(180deg, #ffbf3f, #e2601c); color: #200c00; }
.wf .hp { background: linear-gradient(180deg, #ff8f8f, #c22030); color: #2a0106; }
.wf .hp.planet { background: linear-gradient(180deg, #9be8ff, #2379a8); color: #032031; }
.wf .gem {
  position: absolute; bottom: calc(var(--cw) * .045); left: 50%; transform: translateX(-50%);
  width: calc(var(--cw) * .075); height: calc(var(--cw) * .075); border-radius: 50%;
  background: var(--dim);
  z-index: 3;
}
.wf[data-rarity="rare"] .gem { background: #4cc9f0; box-shadow: 0 0 8px #4cc9f0; }
.wf[data-rarity="epic"] .gem { background: #b388eb; box-shadow: 0 0 8px #b388eb; }
.wf[data-rarity="legendary"] .gem { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.wf[data-rarity="legendary"] {
  background: linear-gradient(160deg, #ffe9ae, var(--fc) 40%, #6a4a00 80%);
  animation: legend-glow 3s ease-in-out infinite;
}
@keyframes legend-glow {
  0%, 100% { box-shadow: 0 8px 20px -8px #000, 0 0 14px -4px var(--gold); }
  50% { box-shadow: 0 8px 20px -8px #000, 0 0 26px -4px var(--gold); }
}
.wf .kwrow {
  position: absolute; top: calc(46% - var(--cw) * .1); right: calc(var(--cw) * .04);
  display: flex; gap: 2px; font-size: max(10px, calc(var(--cw) * .085)); z-index: 3;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.9));
}

/* card back */
.wf.cardback .inner {
  background:
    radial-gradient(80% 60% at 50% 35%, #241c4d, #0e0a20 75%);
  display: flex; align-items: center; justify-content: center;
}
.wf.cardback .anvil { font-size: calc(var(--cw) * .3); filter: grayscale(.2) drop-shadow(0 0 12px rgba(255,191,63,.5)); }
.wf.cardback { background: linear-gradient(160deg, #3c3170, #191238 60%); }

/* ------------------------------------------------------------- match layout */
#match { display: flex; z-index: 15; }
.turn-clock {
  position: fixed; inset: 0 0 auto; height: 5px; z-index: 950;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.turn-clock.show { opacity: 1; }
.turn-clock-bar {
  position: absolute; inset: 0; overflow: hidden;
  background: rgba(24, 19, 48, .94); box-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.turn-clock-bar i {
  display: block; width: 100%; height: 100%; transform-origin: left center;
  background: linear-gradient(90deg, #4cc9f0, var(--energy) 55%, #d8fbff);
  box-shadow: 0 0 14px var(--energy);
  transition: transform .1s linear, background .25s ease;
}
.turn-clock-label {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  min-width: 152px; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 5px 12px; border: 1px solid #31546d; border-radius: 999px;
  background: rgba(9, 11, 25, .9); backdrop-filter: blur(8px);
  color: #bdefff; font-family: 'Bungee', sans-serif; font-size: 9px; letter-spacing: .11em;
  box-shadow: 0 8px 24px -12px #000, inset 0 0 14px rgba(76, 201, 240, .08);
}
.turn-clock-label b { color: #fff; font-size: 14px; min-width: 22px; text-align: right; }
.turn-clock.mine .turn-clock-label { color: var(--gold); border-color: #715b2b; }
.turn-clock.urgent .turn-clock-bar i {
  background: linear-gradient(90deg, #ff8b35, var(--danger)); box-shadow: 0 0 18px var(--danger);
}
.turn-clock.urgent .turn-clock-label {
  color: #ffb2b9; border-color: var(--danger);
  animation: clock-heartbeat 1s ease-in-out infinite;
}
.turn-clock.urgent .turn-clock-label b { color: #fff; }
@keyframes clock-heartbeat {
  0%, 30%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 8px 24px -12px #000; }
  10% { transform: translateX(-50%) scale(1.07); box-shadow: 0 0 24px -4px var(--danger); }
  18% { transform: translateX(-50%) scale(1.025); }
}
.table {
  flex: 1; display: flex; gap: clamp(10px, 1.3vw, 22px);
  width: 100%; max-width: 1920px; margin: 0 auto;
  padding: 54px clamp(10px, 1.3vw, 24px) 10px; min-width: 0;
}
.side-col {
  width: clamp(170px, 14vw, 236px); flex: none;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  padding: 4px 0;
}
.battlefield {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 50%, rgba(46, 38, 92, .18), transparent 68%);
}

.hand { display: flex; justify-content: center; align-items: flex-end; min-height: 64px; }
.hand.foe { --cw: 46px; height: 58px; align-items: flex-start; }
.hand.foe .wf { margin: -18px -8px 0; transform: rotate(calc(var(--fan) * 1deg)); }
.hand.mine {
  --cw: clamp(104px, 8vw, 148px); height: clamp(130px, 18vh, 194px); position: relative; z-index: 30;
  padding-bottom: 4px;
}
.hand.mine .wf {
  /* --mx: JS-computed overlap that keeps a big hand inside the viewport */
  margin: 0 var(--mx, clamp(-24px, -1.25vw, -12px)); cursor: grab; touch-action: none;
  transform: translateY(calc(var(--lift, 0px) + 22px)) rotate(calc(var(--fan) * 1deg));
  transition: transform .2s cubic-bezier(.2,.8,.2,1), filter .16s ease, opacity .14s ease;
}
.hand.mine .wf:hover, .hand.mine .wf.sel {
  transform: translateY(-14px) rotate(0deg) scale(1.12); z-index: 40;
}
.hand.mine .wf.unaffordable { filter: brightness(.55) saturate(.6); }
.hand.mine .wf.playable::before {
  content: ''; position: absolute; inset: 1px; z-index: 8; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(126,240,255,.2) 48%, transparent 61%);
  background-size: 240% 100%; animation: card-sheen 3.8s ease-in-out infinite;
}
.hand.mine .wf.sel { outline: 2px solid var(--gold); border-radius: 10px; }
.hand.mine .wf.dragging { opacity: .14; transform: translateY(-10px) scale(.92); }
.wf.draw-in { animation: deal-in .42s cubic-bezier(.16,.8,.24,1); }
@keyframes deal-in { from { opacity: 0; filter: blur(8px) brightness(1.8); clip-path: inset(0 50% 0 50% round 12px); } }
@keyframes card-sheen { 0%, 65% { background-position: 170% 0; } 100% { background-position: -70% 0; } }
.drag-ghost {
  --cw: clamp(116px, 9vw, 154px);
  position: fixed !important; z-index: 180; pointer-events: none;
  transform: translate(-50%, -60%) rotate(3deg) scale(1.08);
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.72)) drop-shadow(0 0 16px rgba(126,240,255,.45));
  animation: drag-lift .18s ease-out;
}
@keyframes drag-lift { from { opacity: .3; transform: translate(-50%, -45%) scale(.8); } }
/* On touch the ghost rides well above the finger so the card isn't hidden
   under the player's own hand. */
.drag-ghost.touch { transform: translate(-50%, -130%) rotate(3deg) scale(1.08); }

.rows { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.rows.drop-ready::after {
  content: 'RELEASE TO DEPLOY'; position: absolute; inset: 6px; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed rgba(126, 240, 255, .45); border-radius: 22px;
  background: rgba(11, 18, 36, .48); color: rgba(190, 246, 255, .78);
  font-family: 'Bungee', sans-serif; font-size: clamp(13px, 1.4vw, 22px); letter-spacing: .14em;
  pointer-events: none; backdrop-filter: blur(1px); transition: .14s ease;
}
.rows.drop-hover::after {
  border-color: var(--energy); color: #fff; background: rgba(17, 54, 74, .48);
  box-shadow: inset 0 0 70px rgba(76,201,240,.14), 0 0 24px -8px var(--energy);
  transform: scale(.99);
}
.row {
  display: flex; justify-content: center; align-items: center; gap: clamp(7px, .9vw, 15px);
  flex: 1; min-height: 0;
}
.row.orbit { flex: .85; }
.divider {
  position: relative; height: 26px; flex: none;
  display: flex; align-items: center;
}
.divider .scanline {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 15%, #4a3f8a 50%, var(--line) 85%, transparent);
  box-shadow: 0 0 12px rgba(94, 76, 180, .6);
  animation: scan-breathe 3s ease-in-out infinite;
}
@keyframes scan-breathe { 50% { filter: brightness(1.65); box-shadow: 0 0 22px rgba(94,76,180,.85); } }
.endturn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: 'Bungee', sans-serif; font-size: 12px;
  padding: 10px 16px; border-radius: 999px; border: 0;
  background: linear-gradient(180deg, #ffd166, #ff9f1c); color: #1a0f00;
  box-shadow: 0 4px 18px -4px rgba(255, 159, 28, .8);
  transition: transform .12s ease, filter .12s ease;
  z-index: 25;
}
.endturn:hover { transform: translateY(-50%) scale(1.06); }
.endturn:disabled { filter: grayscale(.9) brightness(.55); cursor: default; }
.endturn.pulse { animation: pulse-gold 1.4s ease-in-out infinite; }
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 4px 18px -4px rgba(255, 159, 28, .8); }
  50% { box-shadow: 0 4px 30px 0 rgba(255, 209, 102, .95); }
}

/* ------------------------------------------------------------- board units */
.chip {
  --fc: var(--dim);
  position: relative;
  width: clamp(74px, 6.2vw, 108px); height: clamp(91px, 7.6vw, 132px); flex: none;
  border-radius: 12px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--fc) 45%, #0c0918), #0d0a1c 60%);
  border: 1.5px solid color-mix(in srgb, var(--fc) 55%, var(--line));
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .9);
  transition: transform .14s ease, box-shadow .14s ease, outline-color .14s;
  cursor: pointer;
}
.chip:hover { transform: translateY(-4px); box-shadow: 0 12px 22px -8px rgba(0,0,0,.95), 0 0 16px -8px var(--fc); }
.chip .unit-art, .disc .unit-art {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
  border-radius: inherit; pointer-events: none; user-select: none;
}
.chip.has-art::before {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, transparent 38%, rgba(7, 5, 16, .3) 58%, rgba(7, 5, 16, .92) 100%);
}
.chip.has-art .glyph, .disc.has-art .glyph { visibility: hidden; }
.chip.has-art .nm { position: relative; z-index: 2; margin-top: auto; margin-bottom: 8px; color: var(--ink); text-shadow: 0 1px 4px #000, 0 0 10px #000; }
.chip .glyph { font-size: clamp(31px, 2.7vw, 46px); margin-top: clamp(9px, .8vw, 14px); line-height: 1; filter: drop-shadow(0 3px 6px rgba(0,0,0,.7)); }
.chip .nm {
  font-size: clamp(8.5px, .7vw, 11px); font-weight: 600; letter-spacing: .02em; color: var(--dim);
  max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
}
.chip .atk, .chip .hp {
  position: absolute; bottom: -7px;
  z-index: 4;
  min-width: 24px; height: 21px; border-radius: 7px;
  font-weight: 700; font-size: 12.5px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .7);
}
.chip .atk { left: -7px; background: linear-gradient(180deg, #ffbf3f, #e2601c); color: #200c00; }
.chip .hp { right: -7px; background: linear-gradient(180deg, #ff8f8f, #c22030); color: #2a0106; }
.chip .hp.hurt { color: #ffe3e3; background: linear-gradient(180deg, #d94b4b, #7e0f1c); }
.chip .hp.buffed { box-shadow: 0 0 10px #7bff9e, 0 2px 6px rgba(0,0,0,.7); }
.chip .badges {
  position: absolute; z-index: 4; bottom: calc(100% - 9px); left: 50%;
  width: max-content; max-width: calc(100% + 34px); transform: translateX(-50%);
  display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: 3px;
  pointer-events: none;
}
.chip .badges:empty { display: none; }
.chip .status-badge {
  width: 22px; height: 22px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; font-size: 13px; line-height: 1;
  color: var(--ink); background: rgba(10, 7, 24, .92);
  border: 1px solid color-mix(in srgb, var(--fc) 66%, #fff);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .78), 0 0 8px -4px var(--fc);
  text-shadow: 0 1px 2px #000;
}
.chip .status-flying { animation: status-hover 1.8s ease-in-out infinite; }
.chip .status-ion { border-color: #9be8ff; background: rgba(18, 72, 101, .94); }
.chip .status-sleep { opacity: .82; }
@keyframes status-hover {
  0%, 100% { transform: translateY(1px) rotate(-5deg); }
  50% { transform: translateY(-2px) rotate(5deg); }
}

.chip.shield { outline: 2.5px solid rgba(255, 209, 102, .8); outline-offset: 1px; }
.chip.cloak { opacity: .55; filter: saturate(.5); }
.chip.ion { border-color: #6fd8ff; }
.chip.ion::after {
  content: '❄'; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(111, 216, 255, .18);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #bfeeff; text-shadow: 0 0 12px #6fd8ff;
}
.chip.sleep::after {
  content: '💤'; position: absolute; top: 2px; right: 3px; font-size: 13px;
}
.chip.canact { box-shadow: 0 0 0 2px color-mix(in srgb, #7bff9e 75%, transparent), 0 0 18px -2px #7bff9e; }
.chip.sel { transform: translateY(-6px) scale(1.08); z-index: 5; outline: 2px solid var(--gold); }

.disc {
  --fc: var(--dim);
  position: relative;
  width: clamp(62px, 5.2vw, 90px); height: clamp(62px, 5.2vw, 90px); flex: none; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--fc) 85%, #fff) 0%, var(--fc) 35%, color-mix(in srgb, var(--fc) 30%, #06040e) 78%);
  border: 2px solid color-mix(in srgb, var(--fc) 60%, var(--line));
  box-shadow: 0 0 18px -4px color-mix(in srgb, var(--fc) 70%, transparent), inset -6px -8px 16px rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .14s ease;
}
.disc:hover { transform: translateY(-3px) scale(1.04); }
.disc.has-art::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 18px 4px rgba(4, 2, 10, .78);
}
.disc .glyph { font-size: clamp(24px, 2.2vw, 36px); filter: drop-shadow(0 2px 5px rgba(0,0,0,.8)); }
.disc .hp {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  min-width: 24px; height: 20px; border-radius: 7px;
  background: linear-gradient(180deg, #9be8ff, #2379a8); color: #032031;
  font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .7);
}
.disc .forge {
  position: absolute; top: -10px; right: -12px;
  background: radial-gradient(circle at 35% 30%, #b8f6ff, #0d5c74 75%);
  border: 0; border-radius: 999px;
  font-size: 10px; font-weight: 700; color: #04222e;
  padding: 3px 7px; box-shadow: 0 2px 8px rgba(0, 0, 0, .7);
  z-index: 4;
}
.disc .forge:disabled { filter: grayscale(1) brightness(.6); cursor: default; }
.disc.sel { transform: scale(1.12); outline: 2px solid var(--gold); outline-offset: 2px; }
.orbit .slot {
  width: clamp(62px, 5.2vw, 90px); height: clamp(62px, 5.2vw, 90px); border-radius: 50%;
  border: 1.5px dashed rgba(157, 143, 196, .28); flex: none;
}
.chip.warp-in, .disc.warp-in { animation: warp-arrive .46s cubic-bezier(.15,.9,.25,1); }
@keyframes warp-arrive {
  from { opacity: 0; transform: translateY(28px) scale(.35) rotate(-8deg); filter: blur(8px) brightness(2.4); }
  65% { opacity: 1; filter: blur(0) brightness(1.45); }
}

/* legal-target highlight (chips, discs, portraits) */
.legal {
  animation: legal-pulse 1s ease-in-out infinite;
  outline: 2.5px solid var(--danger); outline-offset: 2px;
}
.legal.friendly-legal { outline-color: #7bff9e; }
@keyframes legal-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.45); }
}

/* ------------------------------------------------------------- portraits */
.portrait {
  position: relative;
  background: rgba(15, 12, 32, .8);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 12px 12px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.portrait .pname {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.portrait .world {
  --pc: var(--pop);
  position: relative; width: clamp(76px, 6.4vw, 106px); height: clamp(76px, 6.4vw, 106px); border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--pc) 90%, #fff), var(--pc) 40%, color-mix(in srgb, var(--pc) 25%, #05030c) 80%);
  box-shadow: 0 0 26px -6px var(--pc), inset -8px -10px 22px rgba(0, 0, 0, .6);
  cursor: pointer;
  transition: transform .14s ease;
}
.portrait .world::after { /* ring */
  content: ''; position: absolute; left: -12%; right: -12%; top: 42%; height: 22%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--pc) 55%, #fff0);
  transform: rotate(-16deg);
  border-top-color: transparent;
  animation: orbit-ring 8s linear infinite;
}
@keyframes orbit-ring { to { transform: rotate(344deg); } }
.portrait .hull {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #ff8f8f, #c22030); color: #2a0106;
  min-width: 34px; height: 24px; border-radius: 8px;
  font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; padding: 0 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .8); z-index: 3;
}
.portrait .meta {
  display: flex; gap: 10px; margin-top: 8px;
  font-size: 10.5px; color: var(--dim); letter-spacing: .04em;
}
.portrait .meta b { color: var(--ink); }
.portrait .energy {
  display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; max-width: 150px;
  min-height: 10px;
}
.portrait .energy i {
  width: 9px; height: 13px;
  background: #17324a; border-radius: 2px;
  clip-path: polygon(50% 0, 100% 30%, 78% 100%, 22% 100%, 0 30%);
}
.portrait .energy i.on {
  background: linear-gradient(180deg, #d8fbff, var(--energy) 60%, #1d90b5);
  box-shadow: 0 0 6px var(--energy);
}
.portrait .timer {
  width: 100%; height: 4px; border-radius: 2px; background: #241d45; overflow: hidden;
}
.portrait .timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--pop), var(--gold)); }
.portrait.active { border-color: color-mix(in srgb, var(--gold) 65%, var(--line)); box-shadow: 0 0 24px -10px var(--gold); }

.mid-info { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; justify-content: center; }
.turn-pill {
  align-self: center;
  font-family: 'Bungee', sans-serif; font-size: 11px; letter-spacing: .1em;
  color: var(--dim); text-align: center;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
  background: rgba(11, 9, 24, .6);
}
.turn-pill.mine { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); }
.battle-log {
  font-size: 10.5px; color: var(--dim); line-height: 1.55;
  overflow: hidden; max-height: 150px;
  display: flex; flex-direction: column-reverse;
  mask-image: linear-gradient(180deg, transparent, #000 30%);
  padding: 0 4px;
}
.battle-log div b { color: var(--ink); }

.match-actions { position: fixed; right: 14px; top: 52px; z-index: 40; }

/* ------------------------------------------------------------- aiming */
#aim { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
#aim line { stroke: var(--danger); stroke-width: 3; stroke-dasharray: 8 6; filter: drop-shadow(0 0 6px var(--danger)); }
#aim circle { fill: var(--danger); filter: drop-shadow(0 0 6px var(--danger)); }

/* ------------------------------------------------------------- preview */
#preview {
  position: fixed; z-index: 80; pointer-events: none;
  --cw: 210px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .8));
  animation: pv-in .14s ease;
}
@keyframes pv-in { from { opacity: 0; transform: scale(.9); } }
#preview .pv-actions { pointer-events: auto; display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
#preview .pv-actions .btn { font-size: 14px; padding: 11px 24px; min-height: 44px; border-radius: 999px; }

/* ------------------------------------------------------------- fx */
#fxlayer { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.dmgfloat {
  position: absolute; transform: translate(-50%, -50%);
  font-family: 'Bungee', sans-serif; font-size: 26px; color: var(--danger);
  text-shadow: 0 0 12px rgba(230, 57, 70, .9), 0 2px 0 #4d0209;
  animation: dmg-float 1s ease-out forwards;
}
.dmgfloat.heal { color: #7bff9e; text-shadow: 0 0 12px rgba(123, 255, 158, .8), 0 2px 0 #073b16; }
@keyframes dmg-float {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  15% { opacity: 1; transform: translate(-50%, -60%) scale(1.25); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(1); }
}
.boomp {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: boom-p .7s ease-out forwards;
}
@keyframes boom-p {
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity: 0; }
}
.banner {
  position: fixed; left: 0; right: 0; top: 38%; z-index: 75; pointer-events: none;
  text-align: center;
  font-family: 'Bungee', sans-serif; font-size: clamp(28px, 6vw, 54px);
  color: var(--gold); text-shadow: 0 0 34px rgba(255, 191, 63, .8), 0 4px 0 #4d2b00;
  animation: banner-sweep 1.5s ease forwards;
}
@keyframes banner-sweep {
  0% { opacity: 0; transform: translateX(-40px) skewX(-8deg); }
  20%, 75% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(40px); }
}
.shake { animation: shake .3s ease; }
@keyframes shake {
  25% { transform: translate(3px, -2px); } 50% { transform: translate(-3px, 2px); }
  75% { transform: translate(2px, 1px); }
}

/* ------------------------------------------------------------- overlays */
.overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 4, 14, .82); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.overlay[hidden] { display: none; }
.overlay .panel {
  margin: auto;                 /* center; scrolls when taller than viewport */
  text-align: center; max-width: 720px; width: 100%;
}
.overlay h2 {
  font-family: 'Bungee', sans-serif; font-size: clamp(24px, 5vw, 40px);
  color: var(--gold); text-shadow: 0 0 30px rgba(255, 191, 63, .6);
  margin-bottom: 6px;
}
.overlay .note { color: var(--dim); font-size: 14px; margin-bottom: 18px; }
.mull-hand { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 22px; --cw: 110px; }
.mull-hand .wf { cursor: pointer; transition: transform .14s ease, filter .14s ease; }
.mull-hand .wf.toss { filter: grayscale(.9) brightness(.5); transform: translateY(10px) scale(.94); }
.mull-hand .wf.toss::after {
  content: '↻'; position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; color: var(--gold); text-shadow: 0 0 14px #000;
}
#gameover .sparks { color: var(--gold); font-weight: 700; font-size: 16px; margin-bottom: 16px; }
#gameover .panel .btn { margin: 4px; }
.supernova {
  position: fixed; z-index: 190; left: 50%; top: 40%; width: 10px; height: 10px;
  border-radius: 50%; pointer-events: none;
  background: #fff;
  animation: supernova 1.6s ease-out forwards;
}
@keyframes supernova {
  0% { box-shadow: 0 0 0 0 #fff, 0 0 0 0 var(--gold); opacity: 1; }
  60% { box-shadow: 0 0 200px 130px #ffdf8a, 0 0 420px 260px rgba(255, 107, 53, .55); opacity: 1; }
  100% { box-shadow: 0 0 300px 180px transparent, 0 0 600px 380px transparent; opacity: 0; }
}

/* ------------------------------------------------------------- help modal */
.modal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(6, 4, 14, .8); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.modal[hidden] { display: none; }
.modal-card {
  position: relative; width: min(640px, 100%); max-height: 86vh; overflow-y: auto;
  background: linear-gradient(170deg, var(--bg3), var(--bg2));
  border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px;
}
.modal-card h2 { font-family: 'Bungee', sans-serif; color: var(--gold); margin-bottom: 14px; }
.modal-card h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--boom); margin: 16px 0 6px; }
.modal-card p, .modal-card li { font-size: 13.5px; color: var(--dim); line-height: 1.65; }
.modal-card li { margin-left: 18px; margin-bottom: 4px; }
.modal-card b { color: var(--ink); }
.modal-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: 0; color: var(--dim); font-size: 26px;
}
.modal-close:hover { color: var(--ink); }
.rar-legendary { color: var(--gold); font-weight: 700; }

/* ------------------------------------------------------------- attract (?shot) */
.attract-card { text-align: center; margin: auto; }
.attract-card .kicker { margin-bottom: 10px; }
.attract-card h1 {
  font-family: 'Bungee', sans-serif; font-size: 74px; line-height: .95;
  background: linear-gradient(180deg, #fff6dd, var(--gold) 40%, var(--pop) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(255, 159, 28, .4));
}
.attract-card .tag { color: var(--dim); font-size: 16px; margin-top: 12px; }
.attract-card .foot { color: var(--dim); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin-top: 18px; }
.attract-fan {
  display: flex; justify-content: center; margin-top: 26px; --cw: 150px;
}
.attract-fan .wf { margin: 0 -26px; }
.attract-fan .wf:nth-child(1) { transform: rotate(-14deg) translateY(18px); }
.attract-fan .wf:nth-child(2) { transform: rotate(-7deg) translateY(5px); }
.attract-fan .wf:nth-child(4) { transform: rotate(7deg) translateY(5px); }
.attract-fan .wf:nth-child(5) { transform: rotate(14deg) translateY(18px); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .table { gap: 7px; padding: 50px 7px 6px; }
  .side-col { width: 142px; }
  .portrait .world { width: 64px; height: 64px; }
  .portrait .meta { gap: 6px; font-size: 9.5px; }
  .battle-log { display: none; }
  .foundry-main { grid-template-columns: 1fr 240px; }
}

@media (max-width: 700px) {
  body { overflow-y: auto; }
  #match { overflow-y: auto; }
  #title small { display: none; }
  #title { font-size: 13px; }
  .turn-clock-label { top: 47px; min-width: 138px; padding: 4px 10px; }
  .table { flex: none; flex-direction: column; min-height: max(100%, 720px); padding: 76px 4px 4px; }
  .side-col {
    order: 0; width: 100%; flex-direction: row; align-items: stretch;
    justify-content: space-between;
  }
  .portrait { flex-direction: row; padding: 8px; gap: 8px; align-items: center; }
  .portrait .world { width: 46px; height: 46px; flex: none; }
  .portrait .hull { font-size: 12px; min-width: 26px; height: 19px; bottom: -6px; }
  .portrait .pcol { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .portrait .pname { font-size: 10.5px; max-width: 90px; }
  .portrait .meta { margin-top: 0; font-size: 9px; }
  .portrait .energy { justify-content: flex-start; max-width: 110px; }
  .mid-info { display: none; }
  .hand.mine { --cw: 92px; height: 122px; }
  .hand.mine .wf {
    margin: 0 var(--mx, -18px);
    transform: translateY(calc(var(--lift, 0px) - 10px)) rotate(calc(var(--fan) * 1deg));
  }
  .hand.mine .wf:hover, .hand.mine .wf.sel { transform: translateY(-18px) rotate(0deg) scale(1.08); }
  .chip { width: 64px; height: 82px; }
  .chip .glyph { font-size: 26px; }
  .chip .nm { font-size: 9px; max-width: 58px; }
  .disc, .orbit .slot { width: 52px; height: 52px; }
  .disc .glyph { font-size: 20px; }
  .row { gap: 5px; }
  .endturn { font-size: 11px; padding: 10px 14px; min-height: 40px; right: 2px; }
  .match-actions { left: auto; right: 6px; top: 206px; bottom: auto; }
  .mull-hand { --cw: 92px; gap: 8px; }
  .foundry-main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .deck-pane { max-height: 38vh; }
  .pool-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  #preview { --cw: 160px; }
  .menu-row { grid-template-columns: 1fr; }

  /* Keep the social dock above the hand on phones. */
  .gl-build #gamr-social { bottom: 150px; }
}

/* ------------------------------------------------------------- large desktop UI
   The match was tuned too conservatively for modern desktop displays. Keep the
   battlefield footprint usable by fanning cards more tightly while making the
   interactive pieces and their type substantially easier to read. */
@media (min-width: 1101px) {
  #topbar { gap: 20px; padding: 13px 20px; }
  .back { font-size: 16px; padding: 8px 13px; }
  #title { font-size: 21px; }
  #title small { font-size: 10px; }
  .iconbtn { font-size: 15px; padding: 9px 13px; }

  .table {
    gap: clamp(12px, 1.6vw, 28px);
    padding: 70px clamp(12px, 1.6vw, 30px) 12px;
  }
  .side-col { width: clamp(205px, 17vw, 294px); gap: 11px; }

  .hand.foe { --cw: 64px; height: 76px; }
  .hand.foe .wf { margin: -24px -11px 0; }
  .hand.mine {
    --cw: clamp(148px, 11.2vw, 208px);
    height: clamp(184px, 25vh, 260px);
  }
  .hand.mine .wf {
    margin-inline: var(--mx, clamp(-39px, -2.25vw, -20px));
    transform: translateY(calc(var(--lift, 0px) - 10px)) rotate(calc(var(--fan) * 1deg));
  }

  .chip {
    width: clamp(96px, 8vw, 142px);
    height: clamp(118px, 9.8vw, 174px);
    border-radius: 16px;
  }
  .chip .glyph { font-size: clamp(40px, 3.5vw, 60px); margin-top: clamp(12px, 1vw, 18px); }
  .chip .nm { font-size: clamp(11px, .9vw, 14px); }
  .chip .atk, .chip .hp { min-width: 32px; height: 28px; font-size: 16px; }
  .chip .badges { font-size: 16px; }

  .disc, .orbit .slot { width: clamp(80px, 6.7vw, 116px); height: clamp(80px, 6.7vw, 116px); }
  .disc .glyph { font-size: clamp(31px, 2.8vw, 47px); }
  .disc .hp { min-width: 31px; height: 26px; font-size: 15px; }
  .disc .forge { font-size: 13px; padding: 4px 9px; }
  .row { gap: clamp(9px, 1.1vw, 19px); }
  .divider { height: 34px; }
  .endturn { font-size: 16px; padding: 13px 21px; }

  .portrait { padding: 16px 16px 13px; gap: 8px; }
  .portrait .pname { font-size: 16px; }
  .portrait .world { width: clamp(98px, 8vw, 137px); height: clamp(98px, 8vw, 137px); }
  .portrait .hull { min-width: 44px; height: 31px; font-size: 20px; }
  .portrait .meta { gap: 13px; margin-top: 11px; font-size: 14px; }
  .portrait .energy { gap: 4px; max-width: 195px; min-height: 13px; }
  .portrait .energy i { width: 12px; height: 17px; }
  .turn-pill { font-size: 14px; padding: 8px 16px; }
  .battle-log { font-size: 14px; max-height: 195px; }

  .turn-clock-label { min-width: 198px; gap: 13px; padding: 7px 16px; font-size: 12px; }
  .turn-clock-label b { font-size: 19px; min-width: 29px; }
  #preview { --cw: 280px; }
  .match-actions .btn { font-size: 15px; padding: 9px 15px; }
}

/* Tablet and small-desktop layout: preserve readable cards without letting the
   full social stack consume the hand's interaction area. */
@media (min-width: 701px) and (max-width: 1100px) {
  .hand.mine {
    --cw: clamp(104px, 11vw, 121px);
    padding-right: 190px;
  }
  .hand.mine .wf {
    margin-inline: var(--mx, clamp(-28px, -2.4vw, -18px));
    transform: translateY(calc(var(--lift, 0px) - 20px)) rotate(calc(var(--fan) * 1deg));
  }
  .hand.mine .wf:hover, .hand.mine .wf.sel { transform: translateY(-30px) rotate(0deg) scale(1.1); }
  #preview { --cw: 220px; }
}

/* Below full desktop the shared social dock collapses to the essentials so it
   stays clear of the card fan. (The column layout itself is unconditional —
   see the GL build tuning section.) */
@media (max-width: 1100px) {
  .gl-build .gs-dock [data-me],
  .gl-build .gs-dock [data-tab="shop"],
  .gl-build .gs-dock [data-tab="players"] { display: none; }
}

/* Short landscape viewports (phones on their side): the whole table has to
   fit ~390px of height with no scrolling, so every band gets compacted and
   the hand tucks into the bottom edge, popping up on selection. */
@media (min-width: 701px) and (max-height: 520px) {
  .turn-clock-label { top: 6px; min-width: 138px; padding: 4px 10px; }
  .table { gap: 8px; padding: 48px 8px 2px; }
  .side-col { width: 150px; gap: 4px; padding: 0; }
  .portrait { padding: 5px 8px; gap: 2px; }
  .portrait .world { width: 40px; height: 40px; }
  .portrait .hull { min-width: 26px; height: 18px; font-size: 12px; bottom: -5px; }
  .portrait .pname { font-size: 11px; }
  .portrait .meta { margin-top: 2px; gap: 6px; font-size: 9.5px; }
  .portrait .energy { max-width: 130px; min-height: 8px; }
  .portrait .energy i { width: 7px; height: 10px; }
  .mid-info { display: none; }
  .hand.foe { --cw: 30px; height: 20px; }
  .hand.foe .wf { margin: -12px -5px 0; }
  .hand.mine { --cw: 84px; height: 96px; padding-right: 0; padding-bottom: 2px; }
  .hand.mine .wf {
    margin: 0 var(--mx, -20px);
    transform: translateY(calc(var(--lift, 0px) + 16px)) rotate(calc(var(--fan) * 1deg));
  }
  .hand.mine .wf:hover, .hand.mine .wf.sel { transform: translateY(-30px) rotate(0deg) scale(1.15); }
  .chip { width: 56px; height: 68px; }
  .chip .glyph { font-size: 20px; margin-top: 5px; }
  .chip .nm { font-size: 8.5px; max-width: 52px; }
  .chip .atk, .chip .hp { bottom: -5px; min-width: 22px; height: 18px; font-size: 12px; border-radius: 5px; }
  .chip .status-badge { width: 16px; height: 16px; font-size: 10px; }
  .chip .badges { bottom: calc(100% - 7px); }
  .disc, .orbit .slot { width: 40px; height: 40px; }
  .disc .glyph { font-size: 15px; }
  .disc .hp { min-width: 22px; height: 17px; font-size: 12px; bottom: -6px; }
  .disc .forge { top: -8px; right: -10px; font-size: 9px; padding: 2px 5px; }
  .row { gap: 5px; }
  .row.orbit { flex: .7; }
  .divider { height: 18px; }
  .endturn { font-size: 10px; padding: 8px 12px; min-height: 34px; right: 2px; }
  .match-actions { top: 52px; right: 8px; }
  .match-actions .btn { font-size: 11px; padding: 6px 10px; }
  #preview { --cw: 150px; }
  .mull-hand { --cw: 88px; gap: 6px; margin: 10px 0 12px; }
  .overlay h2 { font-size: 22px; }
  /* full-width CTAs would run under the social dock in the corner */
  .overlay .panel .btn.big { width: min(100%, 440px); }
  .gl-build #gamr-social { bottom: 6px; right: 8px; }

  /* Deck pane moves to the left column so its controls stay clear of the
     social dock; the scrollable pool absorbs the overlap instead. */
  #foundry { padding: 48px 10px 8px; }
  .foundry-main { grid-template-columns: 240px 1fr; }
  .deck-pane { grid-column: 1; grid-row: 1; }
  .pool-pane { grid-column: 2; grid-row: 1; padding-right: 6px; }
}

/* Finger-sized targets and no-focus-zoom fields on touch devices. */
@media (pointer: coarse) {
  .iconbtn { font-size: 13px; padding: 10px 13px; min-height: 40px; }
  .fchip { padding: 9px 14px; min-height: 38px; }
  .deck-select select { min-height: 44px; font-size: 16px; }
  .pool-filters input[type="search"] { font-size: 16px; min-height: 38px; }
  .deck-pane input[type="text"] { font-size: 16px; min-height: 44px; }
  .modal-close { width: 44px; height: 44px; top: 4px; right: 4px; }
  .deck-row { padding: 8px 10px; }
  .member .btn { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .hand.mine .wf, .turn-clock-bar i, .fi-fly, .fi-scrim, .fi-actions { transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------- GL build tuning */
/* Warpforge stacks the shared social dock in a corner column at every width so
   it never spreads across the player's hand. */
.gl-build .gs-dock { flex-direction: column; align-items: flex-end; gap: 8px; }
.gl-build .wf[data-rarity="legendary"] {
  animation: none;
  box-shadow: 0 8px 20px -8px #000, 0 0 18px -6px var(--gold);
}
.gl-build .hand.mine .wf.playable::before {
  animation: none;
  background-position: 40% 0;
  opacity: .45;
}
.gl-build .wf.draw-in {
  animation: gl-deal-in .24s cubic-bezier(.16,.8,.24,1);
}
@keyframes gl-deal-in {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
}
.gl-build .chip.warp-in,
.gl-build .disc.warp-in {
  animation: gl-warp-arrive .28s cubic-bezier(.15,.9,.25,1);
}
@keyframes gl-warp-arrive {
  from { opacity: 0; transform: translateY(16px) scale(.72); }
}
.gl-build .portrait .world::after {
  animation: none;
}
.gl-build #aim {
  display: none;
}