/* ---------- Tokens (direção A, "Noite Arena": docs/ui-discovery/SPEC-direcao-a.md) ---------- */
:root {
  --ink-0: #070910;
  --ink-1: #0d1120;
  --ink-2: #151a2d;
  --ink-3: #1e2440;
  --line: #2a3152;
  --line-strong: #3a4266;
  --text: #ece6d6;
  --muted: #959ab3;
  --gold: #e3b25c;
  --gold-deep: #9c7330;
  --gold-ink: #1a1408;
  --ember: #ff7b2e;
  --ember-deep: #c2410c;
  --ember-ring: #5a1d05;
  --sky: #59b8ff;
  --blood: #e5484d;
  --ok: #3fbf7f;
  --warn: #f5c46b;
  --warn-bg: #2a2414;
  --scrim: rgba(4, 6, 12, .65);
  --steel: #8fb0d6;
  --poison: #9be08f;
  /* Nomes antigos, ainda usados em alguns lugares. */
  --bg: var(--ink-0);
  --panel: var(--ink-1);
  --panel-2: var(--ink-2);
  --accent: var(--gold);
  --accent-ink: var(--gold-ink);
  --danger: var(--blood);
  --radius: var(--r-md);

  --playmat:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(89,184,255,.10), transparent 70%),
    radial-gradient(ellipse 70% 55% at 30% 20%, #1f3157 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 75% 85%, #2a2246 0%, transparent 60%),
    linear-gradient(180deg, #0c1428 0%, #121c38 48%, #141a33 52%, #0a0f1e 100%);
  --playmat-vignette: inset 0 0 160px 40px rgba(0, 0, 0, .75);

  --f-display: "Cormorant SC", Georgia, serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-cond: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 16px; --r-pill: 999px;

  --sh-card: 0 4px 10px rgba(0, 0, 0, .5);
  --sh-lift: 0 12px 28px rgba(0, 0, 0, .6);
  --sh-panel: 0 12px 32px rgba(0, 0, 0, .5);
  --glow-sky: 0 0 0 2px var(--sky), 0 0 18px 2px color-mix(in srgb, var(--sky) 55%, transparent);
  --glow-gold: 0 0 0 2px var(--gold), 0 0 18px 2px color-mix(in srgb, var(--gold) 55%, transparent);
  --glow-blood: 0 0 0 2px var(--blood), 0 0 20px 4px color-mix(in srgb, var(--blood) 60%, transparent);
  --glow-steel: 0 0 0 2px var(--steel), 0 0 16px 2px color-mix(in srgb, var(--steel) 50%, transparent);
  --glow-ember: 0 0 0 2px var(--ember), 0 0 24px 5px color-mix(in srgb, var(--ember) 65%, transparent);

  --z-hud: 1000; --z-hand: 1100; --z-preview: 1200; --z-drawer: 1300; --z-modal: 1400; --z-menu: 2000; --z-drag: 2500; --z-toast: 3000;

  --dur-fast: 120ms; --dur-med: 180ms; --dur-slow: 250ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);

  --card-back: conic-gradient(from 45deg at 50% 50%, #1a2346, #0c1124, #1a2346, #0c1124, #1a2346);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-med: 0ms; --dur-slow: 0ms; }
  *, *::before, *::after { animation-iteration-count: 1 !important; animation-duration: 0ms !important; }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ink-0);
  color: var(--text);
  font: 400 15px/1.5 var(--f-body);
}
a { color: var(--gold); }
h1, h2, h3 { margin: 0; line-height: 1.2; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.spacer { flex: 1; }
.empty { grid-column: 1 / -1; color: var(--muted); padding: 32px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-lg); }
.label { font: 600 13px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Botões e formulários ---------- */
.btn {
  appearance: none; border: 1px solid var(--line); background: var(--ink-3); color: var(--text);
  padding: 8px 14px; border-radius: var(--r-md); font: 600 13px/1.2 var(--f-cond); letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: border-color var(--dur-fast), filter var(--dur-fast), transform var(--dur-fast), background var(--dur-fast);
}
.btn:hover:not(:disabled) { border-color: var(--line-strong); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary {
  border: 0; color: #fff; text-shadow: 0 1px 0 rgba(90, 29, 5, .6);
  background: linear-gradient(180deg, #ff9a55 0%, var(--ember) 45%, var(--ember-deep) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 170, .35), 0 0 0 1px var(--ember-ring), 0 6px 16px rgba(0, 0, 0, .45);
}
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn.primary:disabled { background: var(--ink-3); box-shadow: none; text-shadow: none; border: 1px solid var(--line); }
.btn.danger { background: transparent; border-color: var(--blood); color: var(--blood); }
.btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--blood) 15%, transparent); border-color: var(--blood); }
.btn.ghost { background: transparent; }
.btn.danger.ghost { color: var(--blood); background: transparent; }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.tiny { padding: 2px 8px; font-size: 11px; }
.btn.block { width: 100%; justify-content: center; }
.icon-btn {
  appearance: none; border: 1px solid var(--line); background: var(--ink-3); color: var(--text);
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--r-sm); cursor: pointer; font: 700 13px var(--f-cond);
}
.icon-btn:hover { border-color: var(--line-strong); }
.icon-btn.danger { color: var(--blood); }

.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font: 600 13px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.form label > input, .form label > select { text-transform: none; letter-spacing: normal; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input, select {
  font: 400 15px var(--f-body); color: var(--text); background: var(--ink-0); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 9px 11px; min-width: 0;
}
input:focus, select:focus { outline: 2px solid var(--gold); outline-offset: -1px; border-color: transparent; }

.badge { font: 700 12px var(--f-cond); letter-spacing: .04em; padding: 2px 8px; border-radius: var(--r-pill); background: var(--ink-3); border: 1px solid var(--line); color: var(--muted); }
.badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-bg); }

/* ---------- Logo ---------- */
.gem { display: inline-block; flex: none; width: 16px; height: 16px; transform: rotate(45deg); border: 2px solid var(--gold);
  box-shadow: inset 0 0 0 3px var(--ink-0), inset 0 0 0 6px color-mix(in srgb, var(--gold) 50%, transparent); }

/* ---------- Login ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--playmat); box-shadow: var(--playmat-vignette); }
.auth-card { width: min(400px, 100%); background: var(--ink-1); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: var(--r-xl); padding: 28px; text-align: center; box-shadow: var(--sh-panel); }
.auth-logo { display: flex; align-items: center; justify-content: center; gap: 16px; font: 700 44px/1 var(--f-display); margin-bottom: 8px; }
.auth-logo .gem { width: 26px; height: 26px; }
.auth-card .form { text-align: left; margin-top: 18px; }
.tabs { display: flex; margin-top: 20px; border-bottom: 1px solid var(--line); }
.tabs a { flex: 1; padding: 10px; color: var(--muted); text-decoration: none; font: 600 15px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.active { color: var(--text); border-color: var(--gold); }

/* ---------- Layout de páginas ---------- */
.topbar { display: flex; align-items: center; gap: 28px; padding: 0 24px; min-height: 64px; background: linear-gradient(180deg, rgba(7,9,16,.95), rgba(7,9,16,.6)); border-bottom: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; font: 700 26px/1 var(--f-display); color: var(--text); text-decoration: none; letter-spacing: .02em; }
.topbar nav { display: flex; gap: 24px; align-self: stretch; }
.topbar nav a { display: flex; align-items: center; color: var(--muted); text-decoration: none; font: 600 15px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.topbar nav a:hover { color: var(--text); }
.topbar nav a.active { color: var(--text); border-color: var(--gold); }
.topbar .who { font: 600 15px var(--f-cond); letter-spacing: .04em; }
.page { max-width: 1200px; margin: 0 auto; padding: 24px 16px 60px; }
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h2 { font: 700 30px var(--f-display); }

/* Lobby (Início, spec 4.1): conteúdo à esquerda e o painel Jogar fixo à direita */
#app:has(> .topbar) { min-height: 100%; background:
  radial-gradient(ellipse 50% 60% at 78% 30%, rgba(255,123,46,.12), transparent 70%),
  radial-gradient(ellipse 60% 70% at 15% 10%, #1d2c55, transparent 70%),
  linear-gradient(180deg, #0b1022, #070910); background-attachment: fixed; }
.me-btn { display: flex; align-items: center; gap: 12px; background: none; border: 0; color: var(--text); cursor: pointer; padding: 0; }
.me-ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--f-display); color: rgba(255,255,255,.92);
  background: linear-gradient(140deg, #ff9a55, #7a1f0a); box-shadow: 0 0 0 2px var(--gold-deep), inset 0 0 0 2px rgba(0,0,0,.5), inset 0 -8px 14px rgba(0,0,0,.4); }
.me-btn:hover .me-ava { box-shadow: 0 0 0 2px var(--gold), inset 0 0 0 2px rgba(0,0,0,.5); }
.page.lobby { display: grid; grid-template-columns: minmax(0, 1fr) 388px; gap: 24px; align-items: start; max-width: 1280px; padding-top: 24px; }
.lobby-main { display: grid; gap: 20px; min-width: 0; }

/* Arte procedural dos cartões de partida (céu, sol e silhueta por modo) */
.game-art { position: absolute; inset: 0; overflow: hidden; background: var(--sky); }
.game-art::before { content: ""; position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%; left: 58%; top: 12%; background: var(--sun, transparent); filter: blur(.5px); }
.game-art::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: 0; height: 52%; background: var(--sil); clip-path: var(--clip, polygon(0 60%, 14% 30%, 26% 55%, 42% 10%, 58% 50%, 72% 25%, 86% 55%, 100% 35%, 100% 100%, 0 100%)); }

/* Partidas abertas: cartões de 268×196 com arte por modo */
.sec-head { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
.sec-head h3 { font: 700 14px var(--f-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.sec-head span { color: var(--muted); font: 500 14px var(--f-cond); letter-spacing: .06em; }
.game-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.game-card { position: relative; min-height: 196px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--ink-2); display: grid; grid-template-rows: 78px 1fr; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.game-card:hover { border-color: var(--gold-deep); transform: translateY(-2px); }
.game-art { position: relative; inset: auto; }
.art-free { --sky: linear-gradient(#2b0c05, #a32a10 55%, #ffb44d); --sun: radial-gradient(#fff3c4, #ff9b3d 45%, transparent 70%); --sil: #1c0703; }
.art-sealed { --sky: linear-gradient(#ffe2a1, #b7d4ef 55%, #eef3fb); --sun: radial-gradient(#ffffff, #fff1c4 45%, transparent 70%); --sil: #c4d2e6; --clip: polygon(0 70%, 12% 55%, 22% 65%, 35% 48%, 48% 62%, 60% 50%, 74% 64%, 88% 52%, 100% 62%, 100% 100%, 0 100%); }
.art-constructed { --sky: linear-gradient(#251d2c, #5a4c63 55%, #8e8170); --sun: radial-gradient(#e8f0c0, #9fae6f 40%, transparent 70%); --sil: #141017; --clip: polygon(0 62%, 8% 30%, 10% 62%, 30% 58%, 34% 20%, 37% 60%, 60% 64%, 66% 26%, 69% 62%, 88% 58%, 92% 36%, 95% 60%, 100% 60%, 100% 100%, 0 100%); }
.game-chip { position: absolute; left: 10px; top: 10px; z-index: 2; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 11px/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px; border-radius: 99px; background: rgba(7,9,16,.8); color: var(--gold); }
.game-card-body { padding: 10px 14px 12px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.game-card h3 { font: 700 18px/1.1 var(--f-cond); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-info { color: var(--muted); font: 500 13px var(--f-cond); letter-spacing: .04em; }
.game-card-foot { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.seat-dots { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }
.seat-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--f-cond); color: #fff; background: var(--pc, #3a4266); box-shadow: inset 0 0 0 2px rgba(0,0,0,.4); flex: none; }
.seat-dot.free { background: none; border: 1.5px dashed #4a5378; box-shadow: none; }
.seat-dot.bot { border-radius: 7px; }
.btn.icon-only { padding: 6px; display: grid; place-items: center; }
.btn.icon-only .ico { width: 16px; height: 16px; }

/* Painel Jogar */
.play-panel { position: sticky; top: 16px; border-radius: 16px; padding: 18px 20px !important; background: linear-gradient(180deg, rgba(21,26,45,.96), rgba(10,13,26,.96)); border: 1px solid var(--line); padding: 20px; }
.play-form { display: grid; gap: 10px; }
.play-form h2 { font: 700 26px/1.1 var(--f-display); }
.play-form hr { border: 0; border-top: 1px solid var(--line); margin: 2px 0; width: 100%; }
.mode-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.mode-card { appearance: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px 6px; background: none; cursor: pointer; text-align: center; color: var(--muted); display: grid; gap: 2px; }
.mode-card b { font: 700 14px/1.1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; }
.mode-card small { font: 500 11px var(--f-cond); letter-spacing: .04em; }
.mode-card:hover { color: var(--text); border-color: var(--gold-deep); }
.mode-card.on { border-color: var(--gold); color: var(--text); background: rgba(227,178,92,.08); }
.play-note, .play-hint { color: var(--muted); font-size: 12px; line-height: 1.35; margin: -4px 0 0; }
.play-row { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; font: 600 15px var(--f-cond) !important; letter-spacing: .04em !important; text-transform: none !important; color: var(--text) !important; margin: 0 !important; }
.play-row select, .play-row .play-input { width: 60%; min-width: 0; }
.play-input { padding: 6px 10px; }
.play-check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); cursor: pointer; }
.play-check input { accent-color: var(--gold); }
.stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: none; }
.stepper button { appearance: none; border: 0; background: var(--ink-3); color: var(--muted); padding: 5px 12px; font: 700 16px var(--f-cond); cursor: pointer; }
.stepper button:hover:not(:disabled) { color: var(--text); }
.stepper button:disabled { opacity: .4; cursor: default; }
.stepper b { min-width: 46px; text-align: center; font: 700 16px var(--f-cond); font-variant-numeric: tabular-nums; }
.deck-head a { color: var(--muted); font: 500 14px var(--f-cond); text-decoration: none; }
.deck-head a:hover { color: var(--gold); }
.deck-carousel { display: flex; gap: 10px; overflow-x: auto; padding: 4px 4px 8px; margin: 0 -4px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.deck-box { appearance: none; flex: none; width: 104px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; display: grid; gap: 2px; text-align: center; scroll-snap-align: start; }
.deck-box-cover { position: relative; display: block; aspect-ratio: 104 / 108; border-radius: 10px; overflow: hidden; border: 2px solid var(--gold-deep); background: var(--card-back); box-shadow: 0 12px 24px rgba(0,0,0,.6), inset 0 0 0 2px #0b0f1d; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.deck-box-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Imagem inteira da carta enviada: amplia até a janela da arte. */
.deck-box-cover img.whole, .ds-cover img.whole { object-position: 50% 0; transform: scale(1.8); transform-origin: 50% 35%; }
.deck-box-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(7,9,16,.85)); }
.deck-box.on .deck-box-cover { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 26px rgba(227,178,92,.4), 0 12px 24px rgba(0,0,0,.6); }
.deck-box:hover .deck-box-cover { border-color: var(--gold); }
.deck-box b { font: 700 13px/1.1 var(--f-cond); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.deck-box small { color: var(--muted); font-size: 11px; }
.deck-colors { position: absolute; left: 6px; bottom: 6px; z-index: 2; display: flex; gap: 3px; font-size: 14px; }
.play-cta { justify-self: end; width: 226px; height: 58px; font-size: 26px; margin-top: 2px; }
@media (max-width: 1000px) {
  .page.lobby { grid-template-columns: 1fr; }
  .play-panel { position: static; }
}

/* Decks (spec 4.2): lista em caixas e editor com coleção, lista em faixas e curva */
.deck-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 18px; }
.deck-tile { appearance: none; display: grid; gap: 3px; padding: 0; border: 0; background: none; text-decoration: none; color: var(--text); text-align: center; cursor: pointer; font: inherit; }
.deck-tile .deck-box-cover { aspect-ratio: 104 / 120; }
.deck-tile:hover .deck-box-cover { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 26px rgba(227,178,92,.35), 0 12px 24px rgba(0,0,0,.6); }
.deck-tile b { font: 700 16px/1.1 var(--f-cond); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 6px; }
.deck-tile small { color: var(--muted); font: 500 13px var(--f-cond); letter-spacing: .04em; }
.deck-tile .deck-colors { font-size: 18px; left: 8px; bottom: 8px; }
.deck-tile.new .deck-box-cover { display: grid; place-items: center; background: rgba(7,9,16,.5); border: 2px dashed var(--line-strong); box-shadow: none; color: var(--muted); }
.deck-tile.new .deck-box-cover::after { display: none; }
.deck-tile.new .deck-box-cover .ico { width: 44px; height: 44px; }
.deck-tile.new:hover .deck-box-cover { border-color: var(--gold); color: var(--gold); box-shadow: none; }
.deck-cover { position: relative; aspect-ratio: 5 / 7; border-radius: var(--r-md); overflow: hidden; background: var(--card-back); display: grid; place-items: center; color: var(--muted); font-size: 13px; border: 2px solid var(--gold-deep); }
.deck-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(7,9,16,.85)); pointer-events: none; }
.deck-cover img { width: 100%; height: 100%; object-fit: cover; }
.deck-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.deck-option { display: grid; gap: 4px; padding: 8px; border: 2px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.deck-option input { display: none; }
.deck-option:has(input:checked) { border-color: var(--gold); box-shadow: var(--glow-gold); }

.deck-editor { position: relative; display: grid; grid-template-columns: 1fr 320px; height: calc(100vh - 64px); min-height: 0; }
.collection { overflow-y: auto; padding: 24px 24px 40px 40px; min-width: 0; }
.col-filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.col-filters .search { width: 230px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: rgba(7,9,16,.7); display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--muted); }
.col-filters .search .ico { width: 16px; height: 16px; flex: none; }
.col-filters .search input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; font-size: 14px; outline: 0; }
.f-colors { display: flex; gap: 6px; }
.f-color.ms { appearance: none; border: 0; cursor: pointer; font-size: 30px; opacity: .45; transition: opacity var(--dur-fast), box-shadow var(--dur-fast); }
.f-color.ms:hover { opacity: .8; }
.f-color.ms[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(227,178,92,.5); }
.f-cost { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.f-cost button { appearance: none; border: 0; border-right: 1px solid var(--line); background: none; padding: 7px 10px; font: 700 14px var(--f-cond); color: var(--muted); cursor: pointer; }
.f-cost button:last-child { border-right: 0; }
.f-cost button:hover { color: var(--text); }
.f-cost button[aria-pressed="true"] { background: var(--ink-3); color: var(--text); }
.f-type { width: 104px; padding: 8px 12px; border-radius: 8px; background: var(--ink-3); font: 700 13px var(--f-cond); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, 136px); gap: 20px 16px; }
.col-card { position: relative; width: 136px; cursor: pointer; }
.col-card .card-img { position: relative; width: 136px; aspect-ratio: 5 / 7; border-radius: 7px; overflow: hidden; background: #000; box-shadow: 0 8px 18px rgba(0,0,0,.55); transition: transform var(--dur-fast), box-shadow var(--dur-fast); }
.col-card .card-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.col-card .back-thumb { position: absolute; right: 4px; bottom: 4px; width: 34%; height: auto !important; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.6); }
.col-card:hover .card-img { transform: translateY(-3px); box-shadow: 0 0 0 2px #fff, 0 12px 22px rgba(0,0,0,.6); }
.col-card.dim .card-img { filter: saturate(.4) brightness(.55); }
.col-card .inq { position: absolute; z-index: 3; left: 50%; bottom: -10px; transform: translateX(-50%); font: 700 13px/1 var(--f-cond); padding: 4px 9px; border-radius: 99px; background: #0b0f1d; color: var(--gold); border: 1px solid var(--gold-deep); white-space: nowrap; pointer-events: none; }
.col-card.dim .inq { color: var(--muted); border-color: var(--line-strong); }
.warn-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--warn); color: #1a1408; font: 800 12px/1 var(--f-cond); flex: none; cursor: help; }
.col-card .warn-mark { position: absolute; z-index: 3; right: -5px; top: -5px; box-shadow: 0 0 0 2px #0b0f1d; }
.collection .empty { grid-column: 1 / -1; }

.deck-side { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: rgba(9,12,24,.92); border-left: 1px solid var(--line); }
/* A lista rola sozinha; o Concluído fica num rodapé fixo, separado dela (não passa por cima das faixas). */
.ds-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.ds-foot { flex: none; display: flex; padding: 12px 18px; border-top: 1px solid var(--line); background: rgba(7,9,16,.96); box-shadow: 0 -10px 20px rgba(0,0,0,.35); }
.ds-head { display: flex; gap: 12px; align-items: center; }
.ds-cover { position: relative; flex: none; width: 56px; height: 76px; border-radius: 8px; overflow: hidden; border: 2px solid var(--gold-deep); background: var(--card-back); }
.ds-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-id { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ds-name { font: 700 21px/1.1 var(--f-display); background: transparent; border: 1px solid transparent; padding: 2px 4px; margin-left: -5px; border-radius: 6px; width: 100%; }
.ds-name:hover { border-color: var(--line); }
.ds-id small { color: var(--muted); font: 500 13px var(--f-cond); letter-spacing: .06em; text-transform: uppercase; }
.ds-more { align-self: flex-start; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; }
.ds-more .ico { width: 18px; height: 18px; }
.ds-actions { display: flex; gap: 6px; }
.ds-actions .ghost-btn { flex: 1; justify-content: center; cursor: pointer; }
.ds-validate { display: grid; gap: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(7,9,16,.6); border: 1px solid var(--line); font-size: 13px; }
.ds-validate label { display: flex; align-items: center; gap: 8px; font: 600 12px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ds-validate select { flex: 1; min-width: 0; padding: 4px 8px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.ds-validate .format-result { display: grid; gap: 4px; }
.ds-validate .format-result:empty { display: none; }
.fmt-badge { flex: none; font: 700 12px var(--f-cond); letter-spacing: .06em; text-transform: none; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--line); }
.fmt-badge:empty { display: none; }
.fmt-badge.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.fmt-badge.bad { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.ds-validate .format-result ul { padding-left: 16px; font-size: 12px; }
.ds-validate .small, .ds-validate p.small { font-size: 12px; }
.ds-list { display: grid; gap: 10px; }
.ds-sec { display: grid; gap: 4px; border-radius: 8px; transition: box-shadow var(--dur-fast), background var(--dur-fast); }
.ds-sec.over { box-shadow: 0 0 0 2px var(--gold); background: rgba(227,178,92,.06); }
.ds-sec h4 { display: flex; justify-content: space-between; font: 600 12px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 2px 2px 0; }
.ds-sec h4 span { color: var(--text); }
.ds-sec.empty-sec { gap: 2px; }
.ds-sec .drop-hint { display: block; padding: 8px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); font: 500 12px var(--f-cond); text-align: center; letter-spacing: .04em; }
.strip { position: relative; height: 34px; border-radius: 6px; overflow: hidden; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 10px; font: 700 15px var(--f-cond); color: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); background: var(--ink-3) var(--art, none) center 30% / cover no-repeat; cursor: pointer; user-select: none; flex: none; }
.strip.whole { background-size: 160% auto; background-position: 50% 26%; }
.strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,9,16,.95) 0%, rgba(7,9,16,.8) 55%, rgba(7,9,16,.2) 100%); pointer-events: none; }
.strip > * { position: relative; z-index: 1; }
.strip:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.strip.dragging { opacity: .4; }
.strip .q { width: 24px; text-align: center; color: var(--gold); flex: none; }
.strip .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip .cost { display: flex; gap: 2px; font-size: 22px; flex: none; }
.strip-minus { display: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(7,9,16,.9); color: var(--text); font: 700 15px/1 var(--f-cond); cursor: pointer; flex: none; padding: 0; }
.strip:hover .strip-minus { display: block; }
.strip-minus:hover { border-color: var(--blood); color: var(--blood); }
.ds-curve { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.ds-curve h4 { display: flex; justify-content: space-between; font: 600 12px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ds-curve h4 .muted { letter-spacing: .04em; text-transform: none; }
.ds-curve .bars { display: flex; align-items: flex-end; gap: 6px; height: 80px; }
.ds-curve .bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; font: 600 11px var(--f-cond); color: var(--muted); }
.ds-curve .bar i { width: 100%; background: linear-gradient(180deg, var(--gold), var(--gold-deep)); border-radius: 3px 3px 0 0; display: block; }
.ds-curve .bar b { color: var(--text); font-size: 12px; min-height: 14px; }
.ds-foot .ds-done { width: 100%; height: 48px; }
.drop-veil { position: absolute; inset: 12px; z-index: 20; display: grid; place-content: center; gap: 6px; text-align: center; border: 2px dashed var(--gold); border-radius: 16px; background: rgba(7,9,16,.82); color: var(--muted); font: 500 14px var(--f-cond); }
.drop-veil b { color: var(--gold); font: 700 26px var(--f-display); }
.drop-veil[hidden] { display: none; }
@media (max-width: 900px) {
  .deck-editor { grid-template-columns: 1fr; height: auto; }
  .collection { padding: 16px; overflow: visible; }
  .deck-side { border-left: 0; border-top: 1px solid var(--line); overflow: visible; padding: 18px; gap: 12px; }
  .ds-scroll { display: contents; }
  .ds-foot { padding: 0; border: 0; background: none; box-shadow: none; }
  .col-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .col-card, .col-card .card-img { width: 100%; }
}

/* Preferências de som */
.snd { display: grid; gap: 12px; }
.snd-row { display: grid !important; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 12px !important; text-transform: none !important; letter-spacing: .04em !important; font: 600 15px var(--f-cond) !important; color: var(--text) !important; }
.snd-row input { accent-color: var(--gold); padding: 0; border: 0; background: none; }
.snd-row output { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.snd-switch { display: flex !important; align-items: center; gap: 10px !important; text-transform: none !important; letter-spacing: .04em !important; font: 600 15px var(--f-cond) !important; color: var(--text) !important; cursor: pointer; }
.snd-switch input { accent-color: var(--gold); width: 18px; height: 18px; }
.snd :disabled { opacity: .45; }
.snd-h { font: 700 13px var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 6px 0 -2px; }
.snd-seg { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.snd-seg button { flex: 1; appearance: none; border: 0; border-right: 1px solid var(--line); background: none; padding: 8px 6px; font: 700 14px var(--f-cond); letter-spacing: .04em; color: var(--muted); cursor: pointer; }
.snd-seg button:last-child { border-right: 0; }
.snd-seg button[aria-pressed="true"] { background: var(--ink-3); color: var(--text); box-shadow: inset 0 -2px 0 var(--gold); }

/* ---------- Celular em pé (spec 6): fora da mesa numa coluna, com abas embaixo ---------- */
.tabbar, .play-dock, .sheet-scrim, .sheet-close, .de-tabs { display: none; }
@media (max-width: 767px) {
  #app:has(> .tabbar) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .topbar { min-height: 56px; padding: 0 16px; gap: 12px; }
  .topbar nav, .topbar .who { display: none; }
  .brand { font-size: 22px; }
  .tabbar { position: fixed; z-index: 900; left: 0; right: 0; bottom: 0; height: calc(72px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(9,12,24,.97); border-top: 1px solid var(--line); backdrop-filter: blur(8px); }
  .tabbar > * { appearance: none; border: 0; background: none; display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--muted); text-decoration: none; font: 600 12px var(--f-cond); letter-spacing: .06em; cursor: pointer; }
  .tabbar .ico { width: 24px; height: 24px; }
  .tabbar .active { color: var(--gold); }
  .page { padding: 16px 16px 24px; }
  .page.lobby { display: block; padding-bottom: 150px; }
  .game-list { grid-template-columns: 1fr; gap: 10px; }
  .game-card { min-height: 0; grid-template-rows: none; grid-template-columns: 64px 1fr; align-items: center; padding: 10px; gap: 12px; border-radius: 12px; }
  .game-card:hover { transform: none; }
  .game-art { width: 64px; height: 56px; border-radius: 8px; overflow: hidden; }
  .game-chip, .game-card .seat-dots, .game-card .icon-only { display: none; }
  .game-card-body { padding: 0 !important; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
  .game-card-body h3 { grid-column: 1; font-size: 17px; }
  .game-card-body .game-info { grid-column: 1; }
  .game-card-foot { grid-column: 2; grid-row: 1 / span 2; margin: 0 !important; }
  .play-dock { display: grid; gap: 10px; position: fixed; z-index: 880; left: 0; right: 0; bottom: calc(72px + env(safe-area-inset-bottom)); padding: 12px 16px; background: linear-gradient(180deg, transparent, rgba(7,9,16,.92) 22%); }
  .play-dock .cta { width: 100%; height: 54px; font-size: 22px; }
  .pd-deck { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--gold-deep); background: rgba(14,18,34,.95); }
  .pd-deck .pd-art { position: relative; flex: none; width: 44px; height: 52px; border-radius: 6px; overflow: hidden; background: var(--card-back); }
  .pd-deck .pd-art img { width: 100%; height: 100%; object-fit: cover; }
  .pd-deck .pd-art img.whole { object-position: 50% 0; transform: scale(1.8); transform-origin: 50% 35%; }
  .pd-deck > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
  .pd-deck small { font: 600 11px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .pd-deck b { font: 700 17px var(--f-cond); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pd-deck .deck-colors { position: static; font-size: 20px; }
  .play-panel { position: fixed !important; z-index: 950; left: 0; right: 0; top: auto; bottom: 0; max-height: 88vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) !important; transform: translateY(105%); transition: transform var(--dur-slow, .28s) cubic-bezier(.2,.8,.2,1); box-shadow: 0 -12px 40px rgba(0,0,0,.6); }
  .play-panel.open { transform: none; }
  .sheet-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 940; background: var(--scrim); }
  .play-form h2 { display: flex; align-items: center; justify-content: space-between; }
  .sheet-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; }
  .sheet-close .ico { width: 18px; height: 18px; }
  .play-form .play-cta { width: 100%; justify-self: stretch; }
  .deck-list { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .deck-editor { display: block; height: auto; padding-bottom: 130px; }
  .deck-editor[data-tab=list] .collection, .deck-editor[data-tab=col] .deck-side { display: none; }
  .deck-side { border: 0; background: none; padding: 16px; overflow: visible; }
  .ds-foot { display: contents; }
  .collection { padding: 16px; }
  .col-filters { gap: 10px; }
  .col-filters .search { width: 100%; }
  .f-color.ms { font-size: 26px; }
  .col-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 18px 10px; }
  .col-card, .col-card .card-img { width: 100%; }
  .strip { height: 40px; font-size: 16px; }
  .strip-minus { display: block; }
  .deck-editor .ds-done { position: fixed; z-index: 880; left: 16px; right: 16px; width: auto; bottom: calc(72px + 12px + env(safe-area-inset-bottom)); height: 50px; }
  .de-tabs { display: flex; position: fixed; z-index: 880; left: 16px; right: 16px; bottom: calc(72px + 74px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: rgba(9,12,24,.95); }
  .de-tabs button { flex: 1; appearance: none; border: 0; background: none; padding: 10px; font: 700 14px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
  .de-tabs button[aria-selected="true"] { background: var(--ink-3); color: var(--text); }
}

/* Mesa em pé no celular (spec 6): só funciona deitada. O selado funciona em pé. */
.rotate-hint { display: none; }
@media (max-width: 767px) and (orientation: portrait) {
  .game:not(.sealed-phase) > .rotate-hint { display: grid; position: absolute; inset: 0; z-index: 2600; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; background: var(--ink-0); }
  .rotate-hint b { font: 700 24px var(--f-display); }
  .rotate-hint small { color: var(--muted); font: 500 14px var(--f-cond); letter-spacing: .04em; }
  .rh-phone { width: 46px; height: 78px; border: 3px solid var(--gold); border-radius: 10px; margin-bottom: 12px; box-shadow: inset 0 -8px 0 -5px var(--gold); animation: rh-turn 2.4s cubic-bezier(.6,0,.25,1) infinite; }
  @keyframes rh-turn { 0%, 25% { rotate: 0deg; } 55%, 100% { rotate: -90deg; } }
  @media (prefers-reduced-motion: reduce) { .rh-phone { animation: none; rotate: -90deg; } }
}

/* ---------- Modal, menu, toast ---------- */
.modal-backdrop { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; padding: 16px; z-index: var(--z-modal); }
.modal { width: min(440px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-panel); }
.modal.wide { width: min(720px, 100%); }
.modal header, .modal footer { display: flex; align-items: center; gap: 8px; padding: 14px 18px; }
.modal header h3 { flex: 1; font: 700 22px var(--f-display); }
.modal footer { justify-content: flex-end; border-top: 1px solid var(--line); }
.modal-body { padding: 4px 18px 18px; overflow: auto; }

.ctx-menu { position: fixed; z-index: var(--z-menu); min-width: 230px; background: var(--ink-1); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 5px; box-shadow: var(--sh-panel); }
.ctx-title { padding: 6px 10px 4px; font: 600 12px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); font: 400 14px var(--f-body); padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer; }
.ctx-menu button:hover, .ctx-menu button:focus-visible { background: var(--ink-3); outline: 0; }
.ctx-menu button.danger { color: var(--blood); }
.ctx-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
/* Menu de habilidades (mesa com regras): maior, uma habilidade por opção no formato "custo: efeito", com símbolos. */
.ctx-menu.abil { min-width: 300px; max-width: min(460px, calc(100vw - 16px)); padding: 6px; }
.ctx-menu.abil .ctx-title { font-size: 14px; max-width: none; padding: 8px 12px 6px; }
.ctx-menu.abil button { font-size: 17px; line-height: 1.35; padding: 10px 12px; }
.ctx-menu.abil .ms { font-size: .95em; margin: 0 1px; vertical-align: -.12em; }
.ab-kw { display: block; font: 600 12px var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.ab-cost { white-space: nowrap; }

#toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: var(--z-toast); pointer-events: none; }
.toast { background: var(--ink-2); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); padding: 10px 16px; border-radius: var(--r-md); box-shadow: var(--sh-panel); transition: opacity .3s, transform .3s; }
.toast.error { border-left-color: var(--blood); }
.toast.success { border-left-color: var(--ok); }
.toast.out { opacity: 0; transform: translateY(8px); }

/* ---------- Cartas ---------- */
.back { width: 100%; height: 100%; position: relative; background: var(--card-back); border-radius: inherit; box-shadow: inset 0 0 0 3px #0a0e1c, inset 0 0 0 4px var(--gold-deep); }
/* Virada para baixo (metamorfose, disfarce): o verso; quem controla vê o nome da carta. */
.back.fd { display: flex; align-items: flex-end; justify-content: center; }
.back.fd .fd-name { margin: 0 6% 22%; padding: 2px 6px; border-radius: 6px; background: rgba(8, 11, 22, .82); color: var(--muted); font-size: 10px; line-height: 1.2; text-align: center; max-width: 88%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-cover { position: relative; }
.fd-cover .fd-name { position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%); z-index: 1; padding: 2px 6px; border-radius: 6px; background: rgba(8, 11, 22, .88); color: #e6dcff; font-size: 10px; line-height: 1.2; max-width: 88%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.back.fd .fd-kind { position: absolute; left: 0; right: 0; top: 17%; z-index: 1; padding: 3px 2px; text-align: center; white-space: nowrap; overflow: hidden;
  font: 700 9px/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; color: #e6dcff;
  background: linear-gradient(90deg, transparent, #33285aee 14% 86%, transparent); border-block: 1px solid #a996e866; }
.fx-zoom .back.fd .fd-kind { zoom: min(var(--zk, 1.9), 2); }
.a-bigface .back.fd .fd-kind { zoom: 2; }
.a-bigface .back.fd { aspect-ratio: 5 / 7; border-radius: 4.5% / 3.2%; }
.back::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(45deg); border: 2px solid var(--gold);
  box-shadow: inset 0 0 0 4px #0c1124, inset 0 0 0 6px color-mix(in srgb, var(--gold) 50%, transparent); }
img.face { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; user-select: none; -webkit-user-drag: none; }
/* Carta desenhada (cardface.js) ocupando o lugar da imagem. */
.face.drawn { width: 100%; height: 100%; border-radius: inherit; }
.face.drawn .cf, .mini .cf { height: 100%; aspect-ratio: auto; }
.mini:not(.back) { display: block; }
.g-bigface { width: 100%; }
.g-bigface .face.drawn { height: auto; }
.g-bigface .face.drawn .cf { height: auto; aspect-ratio: 63 / 88; border-radius: var(--r-md); }
/* Carta desenhada na prévia: a caixa cresce para caber o texto Oracle (quando a carta está traduzida). */
.g-bigface .dfc { display: none; }
.g-preview:has(.g-bigface) { aspect-ratio: auto; overflow: visible; padding: 0; border: 0; background: none; }

/* ---------- Mesa (direção A, fase 2): o campo ocupa a tela, o resto flutua por cima ---------- */
.game {
  --hand-w: clamp(96px, 9vw, 136px);
  --pv-w: 230px;
  position: relative; height: 100vh; overflow: hidden; background: var(--ink-0);
}
.g-table { position: absolute; inset: 0; overflow: hidden; container-type: size; background: var(--playmat); box-shadow: var(--playmat-vignette); user-select: none; }
.table-empty { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.35); }

/* Camada de efeitos do motion.js: acima das cartas e da mão, abaixo da ampliação */
.game > .fx-layer, .game .fx-layer { z-index: 1150; }

/* Topo compacto */
.hud-top { position: absolute; z-index: var(--z-hud); left: var(--sp-3); top: var(--sp-3); display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 4px; border-radius: var(--r-pill); background: rgba(9,12,24,.72); border: 1px solid var(--line); backdrop-filter: blur(6px); max-width: calc(50vw - 80px); }
.hud-top h2 { font: 700 18px var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hud-top .btn { border-radius: var(--r-pill); }
.hud-top .mode-badge { margin: 0; white-space: nowrap; }
.hud-menu { border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; }
.hud-menu .ico { width: 18px; height: 18px; }

/* Dock e gavetas */
.dock { position: absolute; z-index: var(--z-hud); left: var(--sp-3); top: 50%; transform: translateY(-50%); display: grid; gap: 6px; padding: 8px; border-radius: var(--r-lg); background: rgba(9,12,24,.72); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.dock:empty { display: none; }
.dock button { appearance: none; position: relative; width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid transparent; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.dock button:hover { color: var(--text); background: var(--ink-3); border-color: var(--line); }
.dock button.on { color: var(--gold); }
.dock .ico { width: 22px; height: 22px; }
.dock hr { border: 0; border-top: 1px solid var(--line); margin: 2px 4px; }
.dot-new { position: absolute; right: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); }
.drawer { position: absolute; z-index: var(--z-drawer); left: 76px; top: 50%; transform: translateY(-50%); width: 330px; max-height: 70vh; display: flex; flex-direction: column;
  background: rgba(13,17,32,.97); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-panel); animation: drawer-in var(--dur-slow) var(--ease-out); }
.drawer[hidden] { display: none; }
@keyframes drawer-in { from { opacity: 0; translate: -12px 0; } }
.drawer > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); font: 600 13px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; }
.drawer-body { overflow: auto; padding: 12px 14px; min-height: 0; }
.drawer-body > [hidden] { display: none !important; }
.drawer-sec { display: grid; gap: 8px; margin-bottom: 14px; }
.g-log { font-size: 13px; display: grid; align-content: start; gap: 4px; }
.g-log time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
.g-players { display: grid; gap: 10px; align-content: start; }

/* Painel de um jogador (na gaveta "Jogadores") */
.pbox { background: var(--ink-0); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; display: grid; gap: 8px; }
.pbox.me { box-shadow: 0 0 0 1px var(--gold-deep); }
.pbox-head { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 12px; }
.pbox-id { flex: 1; min-width: 0; display: grid; gap: 4px; }
.pbox-nick { font: 700 16px var(--f-cond); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbox-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pbox-tags:empty { display: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.dot.on { background: var(--ok); }
.life { display: flex; align-items: center; gap: 4px; }
.life .icon-btn { min-width: 30px; }
.life-val { font: 700 24px var(--f-cond); flex: 1; text-align: center; font-variant-numeric: tabular-nums; }
.life-val[data-life-set] { cursor: pointer; }
.counters { display: flex; flex-wrap: wrap; gap: 5px; }
.counter { display: inline-flex; align-items: center; gap: 4px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px 4px 3px 8px; font-size: 13px; }
.counter b { min-width: 20px; text-align: center; font: 700 16px var(--f-cond); font-variant-numeric: tabular-nums; }
.counter .icon-btn { min-width: 22px; height: 22px; padding: 0 4px; display: inline-grid; place-items: center; }
.counter .close { color: var(--muted); border-color: transparent; background: none; }
.cname { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.pstats { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font: 700 12px var(--f-cond); letter-spacing: .04em; padding: 3px 9px; border-radius: var(--r-pill); background: var(--ink-3); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.chip.static { cursor: default; }
.chip.add { border-style: dashed; color: var(--muted); }
.chip:not(.static):hover { border-color: var(--gold-deep); }
.mini-hand { display: flex; gap: 3px; flex-wrap: wrap; }
.mini { position: relative; width: 26px; height: 36px; border-radius: 3px; object-fit: cover; }
.mini.back { box-shadow: inset 0 0 0 1px var(--gold-deep); }
.mini.back::after { display: none; }

/* Áreas dos jogadores e cartas da mesa */
.tzone { position: absolute; overflow: hidden; }
.tzone::before { content: ""; position: absolute; inset: 0; background: var(--pc); opacity: .035; pointer-events: none; }
/* Linha do meio: no topo da sua área, com o losango no centro. */
.tzone.mine::after { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 45%, transparent), transparent); pointer-events: none; }
.g-table:has(.tzone.mine)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); background: var(--ink-1); pointer-events: none; }
.game.spectating .tzone { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.game.spectating .g-table::after { display: none; }
.zone-ava { position: absolute; left: 10px; top: 10px; z-index: 0; display: flex; align-items: center; gap: 12px; font: 700 15px var(--f-cond); pointer-events: none; }
.zone-ava .ava { margin-bottom: 8px; }
.tcard {
  position: absolute; width: var(--tcw, 80px); aspect-ratio: 5 / 7; border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), var(--sh-card);
  transition: transform .15s ease, box-shadow var(--dur-fast); touch-action: none; z-index: 1;
}
.tcard.own { cursor: grab; }
.tcard, .hcard, .a-card, .pcard { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.tcard.rot { transform: rotate(90deg); filter: brightness(.85) saturate(.8); }
/* Mesa em fileiras: a carta fica no centro da vaga (as mesmas vagas e pilhas ×N da mesa com regras). */
.bf-slot .tcard { left: 50%; top: 50%; width: var(--u); translate: -50% -50%; }
.bf-slot .tcard.rot { transform: none; rotate: 90deg; }
.tzone .a-row.front { top: 20px; }
.tzone .a-row.lands { top: calc(26px + var(--cw) * 1.4); }
.tzone.mirror .a-row.front { top: auto; bottom: 8px; }
.tzone.mirror .a-row.lands { top: auto; bottom: calc(16px + var(--cw) * 1.4); }
.tcard:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.55), var(--sh-lift); }
.tcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tcard.dragging, .hcard.dragging, .pcard.dragging { opacity: .25; }
.peek { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 18px; height: 18px; background: rgba(7,9,16,.7); border-radius: var(--r-pill); }
.peek .ico { width: 12px; height: 12px; }
.ccount { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; font: 700 15px/1 var(--f-cond); border-radius: var(--r-pill); min-width: 30px; height: 30px; display: grid; place-items: center; padding: 0 6px; font-variant-numeric: tabular-nums;
  background: radial-gradient(#2a7a48, #11331f); border: 2px solid #8fe0ab; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.ccount.neg { background: radial-gradient(#8a2a2d, #3a0d10); border-color: #ffb4b0; }
.tcard.rot .ccount { transform: translate(-50%, -50%) rotate(-90deg); }
.zone.drop-over, .tzone.drop-over, .hpile.drop-over .hpile-card, .hand-fan.drop-over { box-shadow: inset 0 0 0 2px var(--gold); background-color: color-mix(in srgb, var(--gold) 8%, transparent); }

/* Pilhas (deck, cemitério, exílio) */
.hpiles { display: flex; gap: 10px; align-items: flex-end; }
.hpile { position: relative; display: grid; justify-items: center; gap: 4px; --w: 58px; }
.hpile-card { width: var(--w); aspect-ratio: 5 / 7; border-radius: var(--r-sm); position: relative; display: grid; place-items: center; }
.hpile-card.empty { border: 1.5px dashed rgba(255,255,255,.18); color: rgba(255,255,255,.35); font: 600 10px var(--f-cond); letter-spacing: .1em; text-transform: uppercase; }
.hpile.deck .hpile-card:not(.empty) { box-shadow: 2px 2px 0 #141b36, 4px 4px 0 #0c1124, var(--sh-card); }
.hpile-card[data-deck] { cursor: pointer; }
.hpile-n { position: absolute; right: -6px; bottom: 18px; z-index: 2; font: 700 13px/1 var(--f-cond); padding: 3px 7px; border-radius: var(--r-pill); background: var(--ink-0); border: 1px solid var(--gold-deep); color: var(--text); font-variant-numeric: tabular-nums; pointer-events: none; }
.hpile-lbl { font: 600 11px var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-shadow: 0 1px 3px #000; background: none; border: 0; padding: 0; }
button.hpile-lbl { cursor: pointer; }
button.hpile-lbl:hover { color: var(--text); }
.pcard { width: 100%; height: 100%; border-radius: var(--r-sm); cursor: grab; touch-action: none; box-shadow: var(--sh-card); }
.pcard[data-view] { cursor: pointer; }

/* Seu canto: avatar e pilhas */
.g-hud { position: absolute; z-index: var(--z-hud); left: var(--sp-6); bottom: var(--sp-6); display: flex; align-items: flex-end; gap: 18px; pointer-events: none; }
.g-hud > * { pointer-events: auto; }
.me-plate { display: grid; justify-items: start; gap: 8px; padding-bottom: 14px; }
.me-nick { display: grid; gap: 1px; justify-items: start; font: 600 14px/1.1 var(--f-cond); letter-spacing: .04em; text-shadow: 0 1px 4px #000; max-width: 220px; white-space: nowrap; margin-left: -12px; }
.me-nick small, .opp-info small { font: 500 12px var(--f-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cnt { font: 700 12px/1 var(--f-cond); letter-spacing: .02em; padding: 3px 7px; border-radius: 99px; background: rgba(7,9,16,.8); border: 1px solid var(--line); color: var(--text); display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; text-transform: none; }
.cnt i { font-style: normal; color: var(--muted); font-weight: 600; }
.cnt.poison { border-color: #3b7a3f; color: #b6f0b9; }
.cnt.speed { border-color: #8a5a1c; color: #ffd08a; }
.cnt.monarch { border-color: color-mix(in srgb, var(--gold) 60%, transparent); color: var(--gold); }
.cnt.monarch svg { width: 12px; height: 12px; }
.cnt.warn { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); }

/* O oponente (1v1): avatar no topo, ao centro; pilhas no canto */
.zone-hud { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.zone-hud > * { pointer-events: auto; }
.opp-plate { position: absolute; left: 50%; top: var(--sp-3); transform: translateX(-48px); display: flex; gap: 14px; align-items: flex-start; }
.opp-info { display: grid; gap: 1px; justify-items: start; padding-top: 16px; font: 600 14px/1.1 var(--f-cond); letter-spacing: .04em; text-shadow: 0 1px 4px #000; }
/* Mão do oponente: versos em leque saindo pela borda de cima */
.opp-hand { position: absolute; left: 50%; top: 0; width: 0; height: 0; pointer-events: none; }
.opp-hand .ohc { position: absolute; width: 62px; aspect-ratio: 5 / 7; top: -78px; left: calc(var(--m) * 30px - 31px); rotate: calc(var(--m) * -5deg); translate: 0 calc(var(--m) * var(--m) * -2px); transform-origin: 50% -20%; border-radius: var(--r-sm); }
.opp-piles { position: absolute; right: var(--sp-4); top: var(--sp-3); }
.opp-piles .hpile { --w: 52px; }

/* Resumos dos oponentes (3 a 6 jogadores) */
.g-pods { position: absolute; z-index: var(--z-hud); left: 0; right: 0; top: var(--sp-3); display: flex; justify-content: center; align-items: center; gap: var(--sp-3); pointer-events: none; }
.g-pods > * { pointer-events: auto; }
.game.multi .hud-top h2, .game.multi .hud-top #g-specs, .game.multi .hud-top .lbl { display: none; }
.game.multi .hud-top { gap: 4px; }
.game.multi .g-pods { left: 120px; right: var(--sp-3); }
.game.multi .pod { flex: 0 1 236px; min-width: 180px; }
.focus-lbl { position: absolute; left: 96px; top: 12px; z-index: 0; font: 600 12px var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-shadow: 0 1px 3px #000; pointer-events: none; white-space: nowrap; }
.focus-lbl b { color: var(--gold); font-weight: 700; }
.pod { position: relative; width: 236px; height: 152px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(20,26,48,.92), rgba(10,14,28,.92)); border: 1px solid var(--line); padding: 10px; display: grid; grid-template-rows: auto 1fr; gap: 8px; cursor: pointer; }
.pod:hover { border-color: var(--gold-deep); }
.pod.focus { border-color: var(--gold); box-shadow: var(--glow-gold); }
.pod-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font: 700 11px/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--r-pill); background: var(--gold); color: var(--gold-ink); white-space: nowrap; z-index: 2; }
.pod-head { display: flex; gap: 10px; align-items: center; }
.pod-name { flex: 1; min-width: 0; display: grid; font: 600 15px/1.1 var(--f-cond); }
.pod-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-name small { color: var(--muted); font: 500 12px var(--f-cond); letter-spacing: .05em; }
.pod-life { font: 700 28px/1 var(--f-cond); font-variant-numeric: tabular-nums; }
.pod-life.low { color: var(--blood); }
.pod-sep { color: var(--muted); font: 700 16px var(--f-cond); }
.pod-mini { position: relative; border-radius: var(--r-sm); background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); overflow: hidden; }
.pod-mini { display: grid; grid-template-rows: 1fr 1fr; align-items: center; gap: 2px; padding: 3px 6px; }
.pm-row { display: flex; justify-content: center; gap: 3px; min-width: 0; overflow: hidden; }
.pod-card { position: relative; flex: none; width: 20px; aspect-ratio: 5 / 7; border-radius: 2px; overflow: hidden; }
.pod-card.rot { margin: 0 4px; }
.pod-card.rot { rotate: 90deg; }
.ava.no-plate .ava-life { display: none; }
@media (max-width: 1279px) {
  .pod { width: 180px; height: auto; grid-template-rows: auto; }
  .pod-mini { display: none; }
}

/* Mão em leque (3.3) */
.g-hand { position: absolute; z-index: var(--z-hand); left: 410px; right: 250px; bottom: 0; height: calc(var(--hand-w) * 1.4 * .78); container-type: inline-size; pointer-events: none; transition: translate var(--dur-slow) var(--ease-out); }
body.is-dragging .g-hand { translate: 0 calc(var(--hand-w) * 1.4 * .48); }
.hand-fan { position: absolute; inset: 0; }
body.is-dragging .hand-fan { pointer-events: auto; }
.hand-fan .hcard { pointer-events: auto; position: absolute; top: 0; width: var(--hand-w); aspect-ratio: 5 / 7; border-radius: var(--r-sm); cursor: grab; touch-action: none; box-shadow: var(--sh-card);
  --step: min(calc(var(--hand-w) * .6), calc((100cqw - var(--hand-w)) / max(1, var(--n) - 1)));
  left: calc(50% + var(--m) * var(--step) - var(--hand-w) / 2 + var(--push, 0px));
  rotate: clamp(-14deg, calc(var(--m) * 4deg), 14deg);
  translate: 0 calc(var(--m) * var(--m) * 3px);
  transform-origin: 50% 120%; z-index: calc(10 + var(--i));
  transition: rotate var(--dur-med) var(--ease-out), translate var(--dur-med) var(--ease-out), scale var(--dur-med) var(--ease-out), left var(--dur-med) var(--ease-out), box-shadow var(--dur-med); }
.hand-fan .hcard:hover, .hand-fan .hcard:focus-visible { rotate: 0deg; scale: 1.66; translate: 0 calc(var(--hand-w) * -0.1232 - 12px); z-index: 40; box-shadow: var(--sh-lift); outline: 0; }
/* Ampliada, a carta sobe e deixa descoberta a faixa de baixo do lugar dela: uma ponte invisível cobre essa faixa para o
   mouse na borda não ficar entrando e saindo do zoom. */
.hand-fan .hcard:hover::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--hand-w) * .6); }
.hand-fan .hcard:hover ~ .hcard { --push: 20px; }
.hand-fan .hcard:has(~ .hcard:hover) { --push: -20px; }
.hand-fan .hcard.revealed { box-shadow: var(--glow-gold); }
.hand-empty { position: absolute; left: 50%; bottom: 40%; transform: translateX(-50%); white-space: nowrap; color: var(--muted); font-size: 14px; text-shadow: 0 1px 3px #000; pointer-events: auto; }
.hand-eye { position: absolute; left: -40px; bottom: 30%; pointer-events: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; padding: 0; }
.hand-eye .ico { width: 16px; height: 16px; }
.eye { position: absolute; z-index: 3; top: -10px; right: -6px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--ink-1); color: var(--muted); cursor: pointer; padding: 0; display: grid; place-items: center; }
.eye .ico { width: 14px; height: 14px; }
.hcard.revealed .eye { border-color: var(--gold); color: var(--gold); }
.hand-fan .hcard:not(.revealed):not(:hover):not(:focus-within) .eye { opacity: 0; }
@media (pointer: coarse) { .hand-fan .hcard .eye { opacity: 1 !important; } }

/* Botão principal (3.5): uma ação por vez */
.g-cta { position: absolute; z-index: var(--z-hud); right: var(--sp-6); bottom: var(--sp-6); display: grid; gap: 8px; justify-items: end; }
.g-cta:empty { display: none; }
.cta-row { display: flex; gap: 8px; }
.ghost-btn { appearance: none; cursor: pointer; border-radius: 10px; font: 600 14px/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--text); background: rgba(9,12,24,.75); border: 1px solid var(--line); padding: 10px 14px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ghost-btn:hover:not(:disabled) { border-color: var(--gold-deep); }
.ghost-btn:disabled { opacity: .5; cursor: not-allowed; }
.ghost-btn .ico { width: 16px; height: 16px; }
.cta { appearance: none; border: 0; cursor: pointer; width: 200px; height: 52px; border-radius: var(--r-md); font: 700 22px/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, #ff9a55 0%, var(--ember) 45%, var(--ember-deep) 100%);
  box-shadow: inset 0 0 0 2px rgba(255,214,170,.35), 0 0 0 2px var(--ember-ring), 0 0 30px color-mix(in srgb, var(--ember) 45%, transparent), 0 10px 24px rgba(0,0,0,.6);
  text-shadow: 0 2px 0 rgba(90,29,5,.6); transition: filter var(--dur-fast), transform var(--dur-fast); display: grid; place-content: center; gap: 2px; }
.cta:hover:not(:disabled) { filter: brightness(1.08); }
.cta:active:not(:disabled) { transform: scale(.97); }
.cta:disabled { background: var(--ink-3); box-shadow: 0 0 0 1px var(--line); text-shadow: none; color: var(--muted); cursor: not-allowed; }
.cta small { font: 600 12px var(--f-cond); letter-spacing: .1em; opacity: .85; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px; }
/* Na cor do jogador ativo (--who, a cor do assento). */
.cta.turn:not(:disabled) { background: linear-gradient(180deg, color-mix(in srgb, var(--who) 55%, white) 0%, var(--who) 50%, color-mix(in srgb, var(--who) 55%, black) 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), 0 0 0 2px color-mix(in srgb, var(--who) 70%, white), 0 0 30px color-mix(in srgb, var(--who) 45%, transparent), 0 10px 24px rgba(0,0,0,.6);
  text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.cta.turn.wait, .cta.turn:disabled { display: grid; place-content: center; height: 52px; opacity: 1; color: #fff; text-transform: uppercase;
  background: linear-gradient(180deg, color-mix(in srgb, var(--who) 42%, #0b1020) 0%, color-mix(in srgb, var(--who) 24%, #070a14) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--who) 65%, transparent), 0 0 22px color-mix(in srgb, var(--who) 25%, transparent); }
.cta.turn.wait small { text-transform: none; }

/* Ampliação flutuante (3.6) */
.float-preview { position: fixed; z-index: var(--z-preview); width: var(--pv-w); pointer-events: none; animation: pv-in var(--dur-fast) var(--ease-out); }
.float-preview[hidden] { display: none; }
.float-preview > img { width: 100%; border-radius: var(--r-md); display: block; box-shadow: var(--sh-lift); }
.float-preview .g-bigface .cf { box-shadow: var(--sh-lift); }
.float-preview .cf-oracle { display: none; }
@keyframes pv-in { from { opacity: 0; scale: .96; } }

.drag-ghost { position: fixed; z-index: var(--z-drag); pointer-events: none; aspect-ratio: 5 / 7; border-radius: var(--r-sm); transform: translate(-50%, -50%) rotate(3deg); box-shadow: var(--sh-lift); opacity: .92; }
.drag-ghost.rot { transform: translate(-50%, -50%) rotate(90deg); }
.drag-ghost > .face, .drag-ghost > .back { width: 100%; height: 100%; }
/* Arraste da mão na mesa com regras: a carta segue o ponteiro; brilha quando soltar ali joga a carta. */
.drag-ghost.a-drag .a-face, .drag-ghost.a-drag > img { width: 100%; height: 100%; }
.drag-ghost.a-drag .a-face .cf { height: 100%; aspect-ratio: auto; border-radius: var(--r-sm); }
.drag-ghost.a-drag :is(.a-badges, .a-pt, .a-counters, .a-tok) { display: none; }
.drag-ghost.a-drag.ok .cf, .drag-ghost.a-drag.ok > img { box-shadow: var(--glow-sky); }
.drag-ghost.a-drag.aiming { transform: translate(-50%, calc(-100% - 22px)) scale(.55); transform-origin: 50% 100%; transition: transform .12s; }
.hand-fan .a-card.hcard.dragging { opacity: 0; } /* arrastando: a carta sai da mão */
#a-board.drop-over .a-half.me::before { opacity: .12; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; }

/* Espectador: sem mão, sem botão principal e sem as suas pilhas. */
.game.spectating .g-hud, .game.spectating .g-hand, .game.spectating .g-cta { display: none; }

/* Modal da mesa (procurar no deck / ver descarte) */
.gmodal { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--scrim); display: grid; place-items: center; padding: 20px; }
.gmodal.hidden { display: none; }
.gmodal-box { width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-panel); }
.gmodal-box header { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.gmodal-box header h3 { font: 700 22px var(--f-display); }
.gmodal-body { overflow: auto; padding: 14px 18px 20px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.mcard { position: relative; aspect-ratio: 5 / 7; border-radius: var(--r-sm); box-shadow: var(--sh-card); }
.mcard.own { cursor: pointer; }
.mcard.own:hover { box-shadow: var(--glow-gold); }
.mcard .pos { position: absolute; top: 4px; left: 4px; background: rgba(7,9,16,.85); font: 700 11px var(--f-cond); padding: 0 6px; border-radius: var(--r-pill); }

/* Toque (tablet): alvos maiores (3.8). */
@media (pointer: coarse) {
  .dock button { width: 54px; height: 54px; }
  .dock .ico { width: 26px; height: 26px; }
  .drawer { left: 92px; }
  .cta { width: 230px; height: 60px; }
  .hud-menu { width: 44px; height: 44px; }
}
@media (max-width: 680px) {
  .form .row { grid-template-columns: 1fr; }
}

/* Resultado de dados */
#g-roll { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: var(--z-hud); opacity: 0; transition: opacity .25s; }
#g-roll.show { opacity: 1; }
.roll-box { display: grid; justify-items: center; gap: 4px; padding: 18px 34px; border-radius: var(--r-lg); background: rgba(9,12,24,.92); backdrop-filter: blur(6px); border: 2px solid var(--pc); box-shadow: 0 16px 48px rgba(0,0,0,.6); transform: scale(.85); transition: transform .25s; }
#g-roll.show .roll-box { transform: scale(1); }
.roll-die { font-size: 34px; line-height: 1; }
.roll-die span { display: inline-block; font: 700 15px var(--f-cond); padding: 4px 10px; border-radius: var(--r-sm); background: var(--pc); color: #fff; }
.roll-die.coin { animation: coin-flip .6s ease-out; }
.roll-result { font: 700 56px/1.1 var(--f-cond); font-variant-numeric: tabular-nums; color: var(--muted); }
.roll-result.final { color: var(--text); animation: roll-pop .3s ease-out; }
.roll-who { font-size: 14px; color: var(--muted); }
@keyframes roll-pop { from { transform: scale(1.5); } to { transform: scale(1); } }
@keyframes coin-flip { from { transform: rotateY(0); } to { transform: rotateY(1080deg); } }

/* Importação de lista */
textarea { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; resize: vertical; width: 100%; }
textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.import-warn { margin-top: 12px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-bg); border-radius: var(--r-md); color: var(--warn); }
.import-warn ul { margin: 6px 0; padding-left: 20px; color: var(--text); }
.missing-list { display: grid; gap: 6px; margin-top: 10px; }
.missing-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--ink-1); color: var(--text); flex-wrap: wrap; }
.missing-row.done { opacity: .55; }
.missing-row .mname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.qty-badge { font-size: 12px; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line); }
.import-warn > .small { display: block; margin-top: 2px; color: var(--muted); }
.form label.check { display: flex; align-items: center; gap: 8px; color: var(--text); font: 500 14px var(--f-body); letter-spacing: normal; text-transform: none; cursor: pointer; }
.form label.check input { width: 16px; height: 16px; accent-color: var(--gold); }

/* Seleção múltipla na mesa */
.tcard.selected { box-shadow: 0 0 0 3px var(--gold), 0 0 22px 3px rgba(227,178,92,.55), var(--sh-lift); }
#g-lasso { position: absolute; z-index: var(--z-hud); border: 1px dashed var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); border-radius: 4px; pointer-events: none; }
#g-selbar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: var(--z-hud); max-width: calc(100% - 20px); }
.selbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 6px 10px; background: rgba(9,12,24,.92); backdrop-filter: blur(6px); border: 1px solid var(--gold); border-radius: var(--r-lg); box-shadow: var(--sh-panel); }
.selbar b { font-size: 13px; margin-right: 4px; }
.ghost-count { position: absolute; top: -10px; right: -10px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--r-pill); background: var(--gold); color: var(--gold-ink); font: 700 14px var(--f-cond); display: grid; place-items: center; }
.g-table { user-select: none; }

/* Cartas do topo reveladas por outro jogador */
#g-reveals { position: absolute; left: var(--sp-3); top: 64px; z-index: var(--z-hud); display: grid; gap: 8px; max-width: min(520px, calc(100% - 24px)); pointer-events: none; }
.reveal-panel { pointer-events: auto; background: rgba(9,12,24,.92); backdrop-filter: blur(6px); border: 1px solid var(--pc); border-radius: var(--r-lg); padding: 8px 10px; box-shadow: var(--sh-panel); }
.reveal-panel header { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.reveal-cards { display: flex; gap: 6px; overflow-x: auto; }
.rcard { position: relative; flex: none; width: 64px; aspect-ratio: 5 / 7; border-radius: 5px; }
.rcard .pos { position: absolute; top: 2px; left: 2px; background: rgba(7,9,16,.85); font: 700 10px var(--f-cond); padding: 0 5px; border-radius: var(--r-pill); }

/* Dupla face no editor */
.card-img { position: relative; }
.back-thumb { position: absolute; right: 4px; bottom: 4px; width: 38% !important; height: auto !important; border-radius: 4px; box-shadow: 0 0 0 2px var(--ink-1), 0 4px 10px rgba(0,0,0,.6); }
.back-row { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.back-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-btn { color: var(--gold); cursor: pointer; text-decoration: underline dotted; }

/* Dupla face e controle no jogo */
.dfc { position: absolute; left: 3px; bottom: 3px; font-size: 11px; line-height: 1; background: rgba(7,9,16,.85); border-radius: var(--r-pill); padding: 2px 4px; pointer-events: none; }
.pcard, .mcard, .rcard { position: relative; }
.preview-back { position: absolute; right: 8px; bottom: 8px; width: 38% !important; height: auto !important; border-radius: var(--r-sm); box-shadow: 0 0 0 2px var(--ink-1), 0 6px 16px rgba(0,0,0,.7); }
.owner-tag { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); white-space: nowrap; font: 700 11px var(--f-cond); padding: 0 6px; border-radius: var(--r-pill); background: var(--oc); color: #fff; pointer-events: none; }
.tcard.rot .owner-tag { transform: translateX(-50%) rotate(-90deg); }

/* Reordenar cartas do topo */
.mcard[draggable="true"] { cursor: grab; }
.mcard.dragging { opacity: .3; }
.mcard.drop-before { box-shadow: -6px 0 0 -2px var(--gold); }
.mcard.drop-after { box-shadow: 6px 0 0 -2px var(--gold); }
.reorder { position: absolute; left: 0; right: 0; bottom: -14px; display: flex; justify-content: center; gap: 6px; }
.reorder .icon-btn { background: var(--ink-1); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.reorder .icon-btn:disabled { opacity: .35; cursor: default; }
.mgrid:has(.reorder) { row-gap: 26px; padding-bottom: 14px; }

/* Criar partida: modo */
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-option { display: grid !important; gap: 4px !important; padding: 12px; border: 2px solid var(--line); border-radius: var(--r-md); cursor: pointer; color: var(--text) !important; text-transform: none !important; letter-spacing: normal !important; }
.mode-option input { display: none; }
.mode-option:has(input:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.mode-option b { font: 700 16px var(--f-cond); letter-spacing: .08em; text-transform: uppercase; }
.mode-option .muted { font: 400 13px var(--f-body); }
.sealed-opts { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; margin: 0; display: grid; gap: 12px; }
.sealed-opts[hidden] { display: none; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mode-badge { justify-self: start; font: 700 12px var(--f-cond); letter-spacing: .04em; padding: 2px 9px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); color: var(--gold); margin-top: 4px; }
@media (max-width: 680px) { .mode-pick, .row3 { grid-template-columns: 1fr; } }

/* ---------- Selado (spec 4.3) ---------- */
.g-sealed { display: none; }
.game.sealed-phase :is(.g-table, .g-pods, .dock, .drawer, #g-reveals, .g-hud, .g-hand, .g-cta) { display: none; }
.game.sealed-phase .g-sealed { display: block; position: absolute; inset: 0; overflow: hidden; background: var(--playmat, var(--ink-0)); }
/* O topo compacto (Lobby e ⋯) fica no canto, dentro do cabeçalho do selado. */
.game.sealed-phase .hud-top { top: 15px; background: rgba(7,9,16,.6); }
.game.sealed-phase .hud-top :is(h2, #g-specs) { display: none; }
.sd { position: relative; display: flex; flex-direction: column; height: 100%; }
.sd-head { position: relative; flex: none; height: 70px; display: flex; align-items: center; gap: 20px; padding: 0 24px 0 150px; background: linear-gradient(180deg, rgba(7,9,16,.95), rgba(7,9,16,.5)); border-bottom: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); }
.sd-head h2 { font: 700 24px var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: calc(50% - 110px); }
.sd-timer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; }
.sd-timer small { font: 600 11px var(--f-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.sd-timer b { font: 700 28px/1 var(--f-cond); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.sd-timer.urgent b { color: var(--ember); text-shadow: 0 0 14px color-mix(in srgb, var(--ember) 60%, transparent); }
.sd-seats { margin-left: auto; display: flex; gap: 8px; }
.sd-ava { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--f-display); color: rgba(255,255,255,.92); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc) 85%, #fff), color-mix(in srgb, var(--pc) 70%, #000)); box-shadow: 0 0 0 2px #0b0f1d, 0 0 0 3px color-mix(in srgb, var(--pc) 60%, transparent), 0 4px 10px rgba(0,0,0,.5); }
.sd-ava.me { box-shadow: 0 0 0 2px #0b0f1d, 0 0 0 3px var(--gold), 0 4px 10px rgba(0,0,0,.5); }
.sd-ava.ok::after { content: "✓"; position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font: 800 11px/1 var(--f-cond); color: #06140c; background: var(--ok); box-shadow: 0 0 0 2px #0b0f1d; }
.zone-lbl { font: 700 13px var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; }
.zone-lbl i { font-style: normal; color: var(--muted); letter-spacing: .06em; font-weight: 600; }
.zone-lbl b.ok { color: var(--ok); }

/* Espera e preparo */
.sd-wait { flex: 1; overflow: auto; max-width: 640px; width: 100%; margin: 0 auto; padding: 40px 16px; display: grid; gap: 14px; justify-items: center; align-content: start; text-align: center; }
.sd-wait h3 { font: 700 30px var(--f-display); }
.sd-wait p { margin: 0; }
.sd-wait .cta { width: auto; min-width: 280px; padding: 0 28px; height: 54px; margin-top: 6px; }
.sd-fan { position: relative; width: 150px; height: 104px; margin-bottom: 4px; }
.sd-fan .pack { position: absolute; left: 47px; top: 6px; transform-origin: 50% 110%; }
.sd-fan .pack:nth-child(1) { transform: rotate(-16deg); }
.sd-fan .pack:nth-child(3) { transform: rotate(16deg); }
.sd-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sd-names span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: var(--ink-2); border: 1px solid var(--line); font: 600 14px var(--f-cond); letter-spacing: .04em; }
.sd-names i { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); }
.sd-await { font: 600 16px var(--f-cond); letter-spacing: .04em; color: var(--muted); }
.sd-names .bot-tag { margin-left: 0; }
.sd-names .icon-btn { width: 22px; height: 22px; min-width: 0; padding: 0; margin: -2px -6px -2px 0; }
.sd-names .icon-btn .ico { width: 14px; height: 14px; }
.sd-bot { display: flex; gap: 8px; align-items: center; }
.sd-bot select { width: auto; }

/* Draft: o booster da vez e as escolhas */
.dr-seats { gap: 4px; align-items: center; }
.dr-seat { width: 32px; height: 32px; font-size: 12px; }
.dr-seat.bot { border-radius: 9px; }
.dr-seat small { position: absolute; right: -5px; bottom: -5px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 99px; display: grid; place-items: center; font: 700 10px/1 var(--f-cond); color: var(--text); background: var(--ink-3); box-shadow: 0 0 0 2px #0b0f1d; }
.dr-seat.busy { box-shadow: 0 0 0 2px #0b0f1d, 0 0 0 3px var(--sky), 0 4px 10px rgba(0,0,0,.5); }
.dr-seat.me { box-shadow: 0 0 0 2px #0b0f1d, 0 0 0 3px var(--gold), 0 4px 10px rgba(0,0,0,.5); }
.dr-arrow { color: var(--muted); font: 700 14px var(--f-cond); }
.dr-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; padding: 18px 24px 24px; }
.dr-pack { min-height: 0; overflow-y: auto; }
.dr-pack .zone-lbl i, .sd .zone-lbl i { font-style: normal; color: var(--muted); letter-spacing: .04em; text-transform: none; font-weight: 500; }
.dr-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--pw, 172px)); justify-content: start; gap: 16px 14px; padding: 4px 4px 24px 0; }
.dr-size { margin: -2px 0 12px; }
.dr-grid .sd-card.picked { opacity: .45; transform: scale(.95); pointer-events: none; }
.dr-grid .sd-card.chosen { box-shadow: 0 0 0 3px var(--gold), 0 0 22px color-mix(in srgb, var(--gold) 55%, transparent), 0 10px 22px rgba(0,0,0,.6); transform: translateY(-4px); }
/* Escolher: fica embaixo do booster, à vista mesmo rolando a lista. */
.dr-confirm { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: center; padding: 14px 0 6px; background: linear-gradient(transparent, var(--bg, #0b0f1d) 45%); }
.dr-confirm .cta { width: 240px; }
.dr-next { padding: 40px 0; text-align: center; }
.dr-picks { min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); padding-left: 20px; }
.dr-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 3px; align-content: start; }
.dr-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; background: var(--ink-1); font: 600 14px var(--f-cond); letter-spacing: .02em; cursor: default; }
.dr-row:hover { background: var(--ink-2); }
.dr-row .ms { font-size: 16px; margin: 0; flex: none; }
.dr-land { width: 16px; height: 16px; flex: none; border-radius: 4px; border: 1.5px solid #8a7a5a; background: #3b3222; }
.dr-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-row small { color: var(--muted); font-variant-numeric: tabular-nums; }
.dr-row em { font-style: normal; color: var(--muted); font-size: 11px; min-width: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.dr-row.last { box-shadow: inset 0 0 0 1px var(--gold-deep); }
.dr-seat[data-draftwatch] { cursor: pointer; }
.dr-seat[data-draftwatch]:hover { transform: translateY(-1px); }
.dr-grid.watch .sd-card { cursor: default; }
.dr-grid.watch .sd-card:hover { transform: none; box-shadow: 0 6px 14px rgba(0,0,0,.55); }
@media (max-width: 767px) {
  .dr-body { grid-template-columns: 1fr; padding: 12px 16px; }
  .dr-picks { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; max-height: 30vh; }
  .dr-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
  .dr-seats { display: none; }
}
.progress { width: 100%; height: 10px; background: var(--ink-2); border-radius: var(--r-pill); overflow: hidden; }
.progress div { height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width .3s; }

/* Montagem: filtros à esquerda; à direita o pool em cima e o deck embaixo, com uma divisória que dá para arrastar. */
.sd-body { --pw: 172px; flex: 1; min-height: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); column-gap: 22px; padding: 16px 20px 0; }
.pack { appearance: none; position: relative; width: 56px; height: 78px; border-radius: 8px; display: grid; place-items: center; padding: 0; font: 700 11px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); cursor: pointer;
  background: radial-gradient(circle at 50% 30%, rgba(227,178,92,.18), transparent 60%), linear-gradient(160deg, #3a2f6e, #1a1440 60%, #0e0b26); border: 2px solid var(--gold-deep); box-shadow: 0 8px 18px rgba(0,0,0,.55), inset 0 0 0 2px #0b0f1d; }
.pack::before { content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: 6px; background: repeating-linear-gradient(90deg, rgba(227,178,92,.5) 0 2px, transparent 2px 5px); border-radius: 2px; }
button.pack:hover { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(227,178,92,.4), 0 8px 18px rgba(0,0,0,.55); transform: translateY(-2px); }
.pack.open { cursor: default; color: var(--muted); background: transparent; border: 2px dashed var(--line-strong); box-shadow: none; opacity: .65; }
.pack.open::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 5px); }

/* Barra lateral: boosters e filtros */
.sd-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 0 6px 90px 0; }
.sd-packs { display: flex; flex-direction: column; gap: 10px; }
.sd-packs .zone-lbl { margin: 0; }
.sd-packgrid { display: grid; grid-template-columns: repeat(auto-fill, 44px); gap: 10px; }
.sd-packgrid .pack { width: 44px; height: 62px; font-size: 9px; letter-spacing: .1em; }
.sd-packs .ghost-btn { align-self: flex-start; }
.sd-fh { display: block; margin: 0 0 8px; font: 700 12px var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.sd-fh small { margin-left: 4px; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--muted); }
.sd-search input { width: 100%; }
.sd-opts { display: grid; gap: 2px; }
.sd-opt { appearance: none; display: flex; align-items: center; gap: 9px; width: 100%; min-height: 30px; padding: 3px 10px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--text); font: 600 15px var(--f-cond); letter-spacing: .02em; text-align: left; cursor: pointer; }
.sd-opt > span:not(.ms) { flex: 1; min-width: 0; }
.sd-opt .ms { font-size: 18px; margin: 0; flex: none; }
.sd-opt b { min-width: 24px; padding: 1px 7px; border-radius: 99px; background: var(--ink-2); color: var(--muted); font: 600 12px var(--f-cond); text-align: center; font-variant-numeric: tabular-nums; }
.sd-opt:hover { background: var(--ink-1); }
.sd-opt.on { border-color: color-mix(in srgb, var(--gold) 70%, transparent); background: rgba(227,178,92,.12); }
.sd-opt.on b { background: var(--gold-deep); color: #1a1206; }
.sd-opt.on::after { content: "✓"; order: -1; width: 14px; margin-right: -4px; color: var(--gold); font: 800 13px var(--f-cond); }
.sd-opt:not(.on)::after { content: ""; order: -1; width: 14px; margin-right: -4px; }
.sd-opt.none:not(.on) { opacity: .4; }
.sd-help { margin: 6px 2px 0; color: var(--muted); font: 500 12.5px/1.35 var(--f-body, var(--f-cond)); }
.sd-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sd-seg button { appearance: none; min-width: 0; padding: 7px 4px; white-space: nowrap; border: 0; border-left: 1px solid var(--line); background: rgba(7,9,16,.5); color: var(--muted); font: 700 14px var(--f-cond); letter-spacing: .02em; cursor: pointer; font-variant-numeric: tabular-nums; }
.sd-seg button:first-child { border-left: 0; }
.sd-seg.cost { grid-template-columns: auto; }
.sd-seg.cost button:first-child { padding: 7px 9px; }
.sd-seg button:hover { color: var(--text); }
.sd-seg button.on { background: rgba(227,178,92,.16); color: var(--text); box-shadow: inset 0 -2px 0 var(--gold); }
.sd-side select { width: 100%; }
.sd-clear { align-self: flex-start; }
.sd-fbox { display: contents; }
.sd-ftoggle { display: none; }

/* Pool e deck */
.sd-main { --split: 56%; min-height: 0; display: grid; grid-template-rows: minmax(150px, var(--split)) 14px minmax(150px, 1fr); }
.sd-pool { display: flex; flex-direction: column; min-height: 0; }
.sd-pool .zone-lbl { margin-bottom: 8px; }
.sd-link { appearance: none; margin-left: 10px; padding: 0; border: 0; background: none; color: var(--sky); font: 600 13px var(--f-cond); letter-spacing: .04em; text-transform: none; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sd-link:hover { color: var(--text); }
.sd-poolgrid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, var(--pw)); justify-content: start; align-content: start; gap: 16px 14px; padding: 6px 10px 18px 4px; }
.sd-split { position: relative; display: grid; place-items: center; cursor: row-resize; touch-action: none; }
.sd-split::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.sd-split i { position: relative; width: 46px; height: 6px; border-radius: 99px; background: var(--ink-3); box-shadow: 0 0 0 1px var(--line-strong); }
.sd-split:hover i, .sd-split.on i { background: var(--gold-deep); }
.sd-card { position: relative; aspect-ratio: 5 / 7; border-radius: 6px; cursor: pointer; box-shadow: 0 6px 14px rgba(0,0,0,.55); transition: transform var(--dur-fast), box-shadow var(--dur-fast); }
.sd-card .face, .sd-card .back { width: 100%; height: 100%; border-radius: inherit; }
.sd-card .dfc { position: absolute; left: 3px; bottom: 3px; font-size: 10px; }
/* No pool e no deck, o texto de regras vale mais que o de ambientação: sem ele, a fonte fica maior. */
.sd-card .cf-flavor { display: none; }
.sd-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px #fff, 0 12px 20px rgba(0,0,0,.6); }
.sd-card.fresh { animation: sd-in .42s cubic-bezier(.2,.8,.2,1.1) both; animation-delay: calc(min(var(--i), 30) * 18ms); }
@keyframes sd-in { from { opacity: 0; transform: translateY(-18px) rotate(-6deg) scale(.86); } }
@media (prefers-reduced-motion: reduce) { .sd-card.fresh { animation: none; } }
.sd-hint, .sd-poolgrid .empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 12px; color: var(--muted); font: 500 15px var(--f-cond); letter-spacing: .04em; padding: 30px 0; text-align: center; }
.sd-deck { display: flex; flex-direction: column; min-height: 0; padding-top: 6px; }
.sd-deckhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-bottom: 10px; }
.sd-deckhead .zone-lbl { margin: 0; }
.sd-basics { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-left: auto; padding-right: 230px; }
.sd-basics .sd-fh { margin: 0; }
.sd-basic { display: inline-flex; align-items: center; gap: 5px; }
.sd-basic > .ms { font-size: 20px; margin: 0; }
.sd-basic .stepper b { min-width: 26px; font-size: 15px; }
.sd-basic .stepper button { padding: 3px 9px; font-size: 15px; }
.sd-cols { --dw: calc(var(--pw) * .92); flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(7, minmax(0, var(--dw))); gap: 16px; align-items: start; padding: 2px 4px 80px 2px; }
.sd-col { display: grid; gap: 8px; justify-items: stretch; min-width: 0; }
.col-h { font: 700 12px var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-empty { display: grid; place-items: center; aspect-ratio: 5 / 7; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); font: 600 11px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
/* Cascata: cada carta mostra a faixa do nome e do custo; a última fica inteira; passar o mouse traz a carta para a frente. */
.sd-stack { display: grid; container-type: inline-size; }
.sd-casc { grid-area: 1 / 1; margin-top: calc(var(--j) * 17cqw); z-index: var(--j); }
.sd-casc:hover { z-index: 50; }
.sd-casc .sd-card:hover { transform: translateY(-2px); }
.sd-ready { position: absolute; right: 20px; bottom: 20px; width: 200px; height: 52px; z-index: 5; }
.sd-ready.wait { width: auto; min-width: 200px; padding: 0 18px; }
@media (max-width: 1000px) {
  .sd-body { grid-template-columns: minmax(0, 1fr); overflow-y: auto; padding: 16px 16px 90px; }
  .sd-body { grid-auto-rows: max-content; }
  .sd-side, .sd-main { min-height: auto; }
  .sd-side { overflow: visible; padding: 0 0 14px; gap: 12px; }
  .sd-ftoggle { display: block; align-self: flex-start; }
  .sd-fbox { display: none; }
  .sd-fbox.open { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 20px; }
  .sd-main { display: block; }
  .sd-poolgrid { max-height: 70vh; }
  .sd-split { display: none; }
  .sd-deck { padding-top: 16px; }
  .sd-basics { margin-left: 0; padding-right: 0; }
  .sd-cols { overflow: visible; grid-template-columns: repeat(7, minmax(84px, 1fr)); overflow-x: auto; gap: 8px; padding-bottom: 0; }
  .sd-head { padding-left: 140px; }
  .sd-head h2 { font-size: 18px; }
  .sd-timer { position: static; transform: none; margin-left: auto; }
  .sd-seats { margin-left: 0; }
}
@media (max-width: 640px) {
  .sd-body { --pw: 132px !important; }
  .sd-poolgrid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
}

/* Fichas */
.token-tag { position: absolute; right: 3px; top: 3px; font: 700 9px var(--f-cond); letter-spacing: .12em; padding: 1px 6px; border-radius: var(--r-pill); background: #111; color: var(--gold); border: 1px solid var(--gold-deep); pointer-events: none; }
.tcard.rot .token-tag { transform: rotate(-90deg); }
.tk-top { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.tk-top label { display: grid; gap: 4px; font: 600 13px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tk-top input { width: 90px; }
.tk-tabs { margin: 0; flex: 1; }
.tk-pane[hidden] { display: none; }
.tk-pane > input { width: 100%; margin-bottom: 10px; }
.tk-group { margin: 6px 0 8px; font-size: 13px; color: var(--muted); }
.tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-bottom: 8px; }
.tk-card { display: grid; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-0); color: var(--text); cursor: pointer; font: 600 13px var(--f-cond); text-align: center; }
.tk-card:hover { border-color: var(--gold); }
.tk-card img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: var(--r-sm); }

/* ---------- Formatos (editor de deck) ---------- */
.section-title { font: 600 13px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 22px 0 10px; }
.sec-row { display: flex; align-items: center; gap: 6px; }
.sec-row select { flex: 1; min-width: 0; padding: 4px 6px; font-size: 12px; }
.oracle-mark { font-size: 13px; font-weight: 800; width: 18px; text-align: center; cursor: help; }
.oracle-mark.ok { color: var(--ok); }
.oracle-mark.miss { color: var(--warn); }
.format-check { background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 16px; display: grid; gap: 8px; }
.format-check label { display: flex; align-items: center; gap: 10px; font: 600 13px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); flex-wrap: wrap; }
.format-result p { margin: 0; }
.format-result ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
.format-result .ok { color: var(--ok); }
.format-result .err { color: var(--blood); }
.format-result .warn { color: var(--warn); }
.free-opts[hidden], .rules-opt[hidden] { display: none !important; }
.tcard .cmd-tag { right: auto; left: 3px; }

/* ---------- Partida com regras automáticas (arena.js): o mesmo shell da mesa livre (seção 5) ---------- */
.arena {
  /* A mão fica inteira na tela; o resto da altura vai para as quatro fileiras (criaturas 1,4 e terrenos 0,84 da
     largura de cada lado). --top: o espaço livre em cima (o avatar do oponente fica no canto, não no meio).
     --mid: a linha entre as duas metades (a sua é maior, por causa da mão). */
  --hand-w: clamp(104px, min(10.5vw, 19vh), 168px);
  --hand-h: calc(var(--hand-w) * 1.4 + 18px);
  --top: 24px;
  --cw: clamp(56px, min((100vh - var(--top) - 50px - var(--hand-h)) / 4.48, 10.5vw), 190px);
  --lw: calc(var(--cw) * .6); /* terrenos */
  --mid: calc(var(--top) + var(--cw) * 2.24 + 16px);
}
.arena.multi { --top: 150px; --cw: clamp(48px, min((100vh - var(--top) - 50px - var(--hand-h)) / 4.48, 8vw), 160px); }
.a-board { position: absolute; inset: 0; overflow: hidden; background: var(--playmat); box-shadow: var(--playmat-vignette); user-select: none; }
.a-field { position: absolute; inset: 0; }
.arena.waiting .a-field::after { display: none; }
/* Metades: a sua embaixo, a do oponente (em foco) em cima; véu na cor do jogador, mais forte na vez dele. */
.a-half { position: absolute; left: 0; right: 0; }
.a-half.opp { top: 0; height: var(--mid); }
.a-half.me { top: var(--mid); bottom: 0; }
.a-half::before { content: ""; position: absolute; inset: 0; background: var(--pc); opacity: .03; pointer-events: none; }
.a-half.active::before { opacity: .06; }
.a-half.me::after { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 45%, transparent), transparent); pointer-events: none; }
/* Combate: véu vermelho no cenário (abaixo das cartas), linha do meio em brasa; ao entrar, um pulso e o título. */
.a-board::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(ellipse 75% 60% at 50% 50%, rgba(229,72,77,.10), rgba(229,72,77,.22) 70%, rgba(150,20,28,.36) 100%);
  box-shadow: inset 0 0 120px 20px rgba(200,30,40,.35); }
.arena.combat .a-board::before { opacity: 1; }
.arena.combat-in .a-board::before { animation: combat-pulse 1.4s ease-out; }
@keyframes combat-pulse { 0% { opacity: 0; } 25% { opacity: 1; filter: brightness(1.9) saturate(1.3); } 100% { opacity: 1; filter: none; } }
.arena.combat .a-half.me::after { background: linear-gradient(90deg, transparent, rgba(255,90,80,.75), transparent); height: 3px; }
.arena.combat .a-field::after { border-color: var(--blood); background: #3a0d12; box-shadow: 0 0 12px 3px rgba(229,72,77,.6); }
.a-combat-fx { position: absolute; left: 0; right: 0; top: calc(var(--mid) + 52px); transform: translateY(-50%); display: grid; place-items: center; pointer-events: none; z-index: 30; opacity: 0; }
.a-combat-fx span { font: 700 64px/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: #ffd6cf; text-shadow: 0 0 18px rgba(229,72,77,.95), 0 0 46px rgba(229,72,77,.7), 0 2px 4px #000; }
.arena.combat-in .a-combat-fx { animation: combat-title 1.5s ease-out forwards; }
@keyframes combat-title {
  0% { opacity: 0; transform: translateY(-50%) scale(1.25); letter-spacing: .5em; }
  20% { opacity: 1; transform: translateY(-50%) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-50%) scale(.96); }
}
@media (prefers-reduced-motion: reduce) {
  .arena.combat-in .a-board::before { animation: none; }
  .arena.combat-in .a-combat-fx { animation: combat-title-still 1.5s steps(1) forwards; }
  @keyframes combat-title-still { 0% { opacity: 1; } 100% { opacity: 0; } }
}
.a-field::after { content: ""; position: absolute; left: 50%; top: var(--mid); width: 12px; height: 12px; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); background: var(--ink-1); pointer-events: none; }

/* Fileiras (5.1): criaturas e outros perto da linha do meio, terrenos do lado de quem joga. */
.a-row { position: absolute; left: 96px; right: 96px; display: flex; justify-content: center; align-items: center; --k: 1; --u: calc(var(--w) * var(--k)); height: var(--rh, calc(var(--u) * 1.4)); }
.a-row.front { --w: var(--cw); --gap: 16px; }
.a-row.lands { --w: var(--lw); --gap: 10px; }
/* O vão encolhe com as cartas. Fileira cheia demais (fitRow, --wrap): quebra em linhas na altura de sempre, e os
   grupos também quebram (encolhem até caber em vez de ficar com a largura de tudo numa linha só). */
.a-row { column-gap: calc(var(--gap) * var(--k)); row-gap: 4px; flex-wrap: var(--wrap, nowrap); align-content: center; }
.a-row:has(> .a-grp) { flex-wrap: nowrap; }
.a-row > .a-grp { flex-wrap: var(--wrap, nowrap); align-content: center; }
.a-row > .a-grp:not(.fill) { flex: 0 var(--gshrink, 0) auto; min-width: 0; }
.a-row > .a-grp.fill { min-width: max-content; }
.a-row.split3 > .a-grp:not(.fill) { justify-content: center; }
.a-row.split { justify-content: space-between; }
.a-grp { display: flex; align-items: center; gap: inherit; flex: none; }
.a-grp.fill { flex: 1 1 0; min-width: 0; }
.a-grp.fill.end { justify-content: flex-end; }
.a-half.opp .a-row.front { bottom: 8px; }
.a-half.opp .a-row.lands { bottom: calc(16px + var(--cw) * 1.4); }
.a-half.me .a-row.front { top: 18px; }
.a-half.me .a-row.lands { top: calc(24px + var(--cw) * 1.4); }

/* Vaga de uma carta: a virada gira sem encolher (--tap, 30°, mais perto do Arena) e a vaga alarga até a largura da carta girada. */
.arena { --tap: 30deg; }
.bf-slot { --tap-w: calc(var(--u) * (cos(var(--tap)) + 1.4 * sin(var(--tap)))); position: relative; flex: none; width: var(--u); height: calc(var(--u) * 1.4); }
.bf-slot.tapped { width: var(--tap-w); }
.bf-slot .a-card { position: absolute; left: 50%; top: 50%; width: var(--u); translate: -50% -50%; }
.bf-slot .a-card.tapped { rotate: var(--tap); }

/* Mesa em perspectiva (preferência "Mesa inclinada", ligada por padrão): o campo deita para trás como no MTG Arena.
   As cartas ficam deitadas no plano da mesa; mão, retratos, pilhas e a pilha de mágicas continuam planos por cima.
   O lado do oponente recua e encolhe; a escala compensa a altura que a inclinação tira.
   preserve-3d até a carta: as animações sobem a carta da mesa (translate no eixo z). Fora do celular deitado. */
@media not all and (max-width: 900px) and (max-height: 500px) {
  .persp3d .arena:not(.waiting) .a-field {
    --tilt: 26deg;
    transform-origin: 50% 58%;
    transform: perspective(1600px) translateY(-1%) rotateX(var(--tilt)) scale(1.06);
    transform-style: preserve-3d;
  }
  /* A mesa deitada fica mais larga perto de você: as fileiras recuam das bordas para caber na tela. */
  .persp3d .arena .a-half .a-row { left: 150px; right: 150px; }
  .persp3d .arena .a-half, .persp3d .arena .a-row, .persp3d .arena .a-grp, .persp3d .arena .bf-slot,
  .persp3d .arena .stk-i, .persp3d .arena .att, .persp3d .arena .att-host { transform-style: preserve-3d; }
}

/* Efeitos das receitas escolhidas no laboratório de animações (anim.js): fantasma que voa entre zonas (com verso
   para virar no caminho), portal do exílio, bola de fogo, símbolo de mana e o texto grande do turno.
   O fantasma tem o tamanho da carta de destino (ver flight): a cópia usa o mesmo layout da carta que vai aparecer. */
.fx-flight { position: absolute; left: 0; top: 0; z-index: 1500; pointer-events: none; transform-style: preserve-3d; will-change: transform; }
.fx-flight > .a-card, .fx-flight > .ff-back { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; rotate: 0deg; scale: 1; translate: none; backface-visibility: hidden; }
.fx-flight > .ff-back { transform: rotateY(180deg); border-radius: var(--r-sm); }
.fx-portal { border-radius: 50%; background: conic-gradient(from 0deg, #2a1450, #7a4ed0, #1a0d33, #a77cff, #2a1450); filter: blur(2px); box-shadow: 0 0 30px 6px rgba(140,100,230,.6); }
.fx-orb { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: radial-gradient(circle, #fff 0, #ffd27a 30%, var(--c) 65%, transparent 72%); box-shadow: 0 0 22px 8px color-mix(in srgb, var(--c) 55%, transparent); }
.fx-mana { font-size: 22px; filter: drop-shadow(0 0 8px rgba(255,236,180,.9)); }
.fx-bigtxt { left: 0; right: 0; top: 46%; transform: translateY(-50%); text-align: center; font: 700 clamp(48px, 8vw, 96px)/1 var(--f-display); letter-spacing: .08em; color: var(--tone); text-shadow: 0 0 40px color-mix(in srgb, var(--tone) 60%, transparent), 0 4px 0 #000; white-space: nowrap; }
.fx-bigtxt.small { font-size: clamp(32px, 5vw, 60px); }

/* Carta do campo com o mouse em cima: uma cópia plana e de pé (fx-zoom) cresce no lugar dela, com a mesma
   transição das cartas da mão (jeito do MTG Arena). Ver zoomIn em anim.js. */
/* Camada de efeitos em WebGL (fx3d.js): partículas por cima da mesa, abaixo da carta ampliada e dos diálogos. */
.fx3d { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1450; pointer-events: none; }
.fx-zoom { position: absolute; left: 0; top: 0; z-index: 1500; pointer-events: none; transform-origin: 50% 50%; transition: transform var(--dur-med) var(--ease-out); }
/* Detalhes do item da pilha (alvos, modo, X) embaixo da carta ampliada. */
.fx-zoom > .si-info { display: grid; top: calc(100% + 8px); z-index: 1; }
.fx-zoom > :is(.a-card, .zc) {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; box-shadow: var(--sh-lift);
  --tu: 0; --tv: 0; transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
/* As miniaturas das outras telas (escolhas, cemitério, deck, draft, mesa livre: cardzoom.js) ampliam por cima de tudo,
   menos dos menus. A cópia toma o tamanho da ampliação, venha de onde vier. */
.zoom-root { position: fixed; inset: 0; z-index: 1950; pointer-events: none; overflow: clip; }
/* A camada de efeitos da mesa fica no #app (sem posição: ela cobre a tela). Nada nela (a carta ampliada perto da borda,
   uma carta voando) pode passar da tela: a página ganharia barras de rolagem, a mesa mudaria de tamanho e o mouse sairia
   e voltaria à carta, piscando. */
.game ~ .fx-layer, .fx-layer:has(> .fx-zoom) { overflow: clip; }
.fx-zoom > .zc { max-width: none; max-height: none; aspect-ratio: auto; rotate: none; scale: none; translate: none; animation: none; opacity: 1; filter: none; border-radius: 4.6% / 3.3%; }
.fx-zoom > .zc > :is(img:not(.back-thumb), .face, .back) { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.fx-zoom > .zc > .back-thumb { position: absolute; right: 4%; bottom: 3%; width: 34%; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.6); }
.fx-zoom > .zc > :is(.stk, .inq) { zoom: min(var(--zk, 1.9), 2); }
.fx-zoom.tilting > .zc { box-shadow: calc(var(--tu) * -18px) calc(14px + var(--tv) * -14px) 30px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4); }
/* A cópia ampliada já nasce no tamanho final (--zk: quantas vezes a carta do campo, em anim.js): os selos, que têm
   tamanho em px, crescem um pouco menos que a carta para não cobrir o texto. */
.fx-zoom > .a-card > .stk { zoom: min(var(--zk, 1.9), 2); }
.fx-zoom > .a-card > :is(.a-badges, .a-pt, .a-ctr, .a-counters, .a-tok) { zoom: min(var(--zk, 1.9), 2); }
/* Inclinada para o mouse (zoomTilt): a sombra vai para o lado oposto e um brilho atravessa a carta. */
.fx-zoom.tilting > .a-card { box-shadow: calc(var(--tu) * -18px) calc(14px + var(--tv) * -14px) 30px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4); }
.fx-zoom .fx-shine { position: absolute; inset: 0; z-index: 3; border-radius: 4.6% / 3.3%; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity var(--dur-med) var(--ease-out); }
.fx-zoom .fx-shine::before {
  content: ""; position: absolute; inset: -60%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .26) 50%, transparent 58%);
  transform: translate(calc(var(--tu) * -55%), calc(var(--tv) * -55%));
}
.fx-zoom.tilting .fx-shine { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fx-zoom .fx-shine { display: none; } }
.arena .a-field .bf-slot:hover, .arena .a-field .att-host:hover { z-index: 60; }

/* Pilha de iguais (terrenos, fichas): deslocamento de 6px e o selo ×N; abre em leque depois de 600 ms. */
.bf-stack { width: calc(var(--u) + (var(--n) - 1) * 6px); height: calc(var(--u) * 1.4 + (var(--n) - 1) * 3px); }
.bf-stack.tapped { width: calc(var(--tap-w) + (var(--n) - 1) * 6px); }
.stk-i { position: absolute; left: calc(var(--i) * 6px); top: calc(var(--i) * 3px); width: var(--u); height: calc(var(--u) * 1.4); z-index: calc(1 + var(--i)); transition: left var(--dur-med) var(--ease-out), top var(--dur-med) var(--ease-out); }
.bf-stack.tapped .stk-i { width: var(--tap-w); }
.bf-stack:hover { z-index: 30; }
.stk { position: absolute; right: -10px; top: -10px; z-index: 40; font: 700 12px/1 var(--f-cond); padding: 3px 7px; border-radius: 99px; background: #0b0f1d; color: var(--gold); border: 1px solid var(--gold-deep); pointer-events: none; }

/* Auras e Equipamentos (2.7): atrás da criatura, deslocados para cima com o nome à mostra; abrem ao lado no hover. */
.att-group { --peek: calc(var(--u) * min(.2, .6 / var(--na))); --tx: 0px; }
.att-group.tapped { --tx: calc(var(--u) * .2); }
.att-group .att { position: absolute; left: 50%; top: 0; width: var(--u); height: 100%; translate: -50% calc(var(--j) * var(--peek) * -1); transition: translate var(--dur-med) var(--ease-out); }
.att-group .att-host { position: absolute; inset: 0; z-index: 20; }
.att-group:hover { z-index: 40; }
/* Cada carta anexada aparece pela faixa de cima, atrás da criatura; passar o mouse amplia, como qualquer carta. */
.att-group .att:hover .a-card :is(img, .cf) { box-shadow: 0 0 0 2px #fff, var(--sh-card); }
.att.theirs .a-card :is(img, .cf) { box-shadow: 0 0 0 2px var(--oc), var(--sh-card); }
.att-owner { position: absolute; left: 50%; top: 0; transform: translate(-50%, -110%); z-index: 3; font: 700 11px/1 var(--f-cond); padding: 3px 7px; border-radius: 99px; background: var(--oc); color: #fff; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.5); pointer-events: none; }
.att-owner.dup { display: none; }
.att-ico { position: absolute; left: 4px; bottom: 4px; z-index: 3; display: flex; gap: 3px; align-items: center; padding: 2px 6px; border-radius: 99px; background: rgba(7,9,16,.85); color: var(--gold); font: 700 12px/1 var(--f-cond); pointer-events: none; }
.att-group.tapped .att-ico { bottom: auto; top: calc(var(--u) * .2 + 4px); left: 6px; }
.att-ico i { display: grid; }
.att-ico .ico { width: 12px; height: 12px; }
.att-ico b { color: var(--text); }
.att-lock { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 3; width: 40%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(120,20,25,.85); border: 2px solid #ffb4b0; box-shadow: 0 2px 6px rgba(0,0,0,.6); pointer-events: none; }
.att-lock .ico { width: 60%; height: 60%; }

/* Cartas do motor */
.a-card { position: relative; width: 72px; aspect-ratio: 5 / 7; border-radius: var(--r-sm); overflow: visible; cursor: pointer; transition: rotate var(--dur-med) var(--ease-out); flex: none; }
.a-card img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); display: block; box-shadow: var(--sh-card); transition: box-shadow var(--dur-fast); }
.a-card .a-face { width: 100%; height: 100%; }
.a-card .a-face .cf { height: 100%; aspect-ratio: auto; box-shadow: var(--sh-card); border-radius: var(--r-sm); transition: box-shadow var(--dur-fast); }
.a-card.tapped { filter: brightness(.85) saturate(.8); }
.a-card:hover :is(img, .cf) { box-shadow: 0 0 0 2px rgba(255,255,255,.55), var(--sh-lift); }
.a-card.can :is(img, .cf) { box-shadow: var(--glow-sky); }
.hpile.can .hpile-card { box-shadow: var(--glow-sky); border-radius: 6px; }
.a-modes-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.a-modes-list .a-mode { text-align: left; white-space: normal; height: auto; padding: 10px 14px; line-height: 1.35; text-transform: none; letter-spacing: 0; font-family: var(--f-body); }
.a-modes-list .a-mode.picked { box-shadow: var(--glow-sky); border-color: var(--sky, #7cc4ff); }
.a-card.mana:hover :is(img, .cf) { box-shadow: 0 0 0 2px var(--gold), var(--sh-lift); }
/* Fontes que o pagamento automático vai virar para a carta sob o mouse, arrastada ou sendo jogada. */
.a-card.will-pay :is(img, .cf) { box-shadow: 0 0 0 3px var(--gold), 0 0 18px 4px color-mix(in srgb, var(--gold) 55%, transparent); animation: will-pay 1.1s ease-in-out infinite alternate; }
.a-card.will-pay { translate: 0 -6px; transition: translate var(--dur-fast) var(--ease-out); }
.bf-slot .a-card.will-pay { translate: -50% calc(-50% - 6px); }
@keyframes will-pay { to { box-shadow: 0 0 0 3px var(--gold), 0 0 8px 1px color-mix(in srgb, var(--gold) 35%, transparent); } }
.a-card.attacking :is(img, .cf) { box-shadow: var(--glow-blood); }
.a-card.blocking :is(img, .cf) { box-shadow: var(--glow-steel); }
.a-card.picked :is(img, .cf) { box-shadow: var(--glow-gold); }
.a-card.target :is(img, .cf) { box-shadow: var(--glow-ember); animation: a-aim 1.2s ease-in-out infinite; }
.a-card.target { cursor: crosshair; }
@keyframes a-aim { 50% { box-shadow: 0 0 0 2px var(--ember), 0 0 8px 1px color-mix(in srgb, var(--ember) 40%, transparent); } }
.a-card.sick :is(img, .cf) { filter: saturate(.8); }
.a-card.unsupported { opacity: .55; }
/* Mão: o que dá para jogar agora sobe um pouco e brilha; o resto não responde a clique (cursor normal) e, com a
   prioridade na sua mão, fica apagado para o jogável saltar aos olhos. */
.hand-fan .a-card.hcard.locked { cursor: default; }
.hand-fan .a-card.hcard.dim :is(img, .cf) { filter: brightness(.55) saturate(.7); transition: filter .2s; }
.hand-fan .a-card.hcard.dim:hover :is(img, .cf) { filter: none; }
.arena .hand-fan .a-card.hcard.can:not(:hover):not(.picked):not(.dragging) { translate: 0 calc(var(--m) * var(--m) * 1.5px - 14px); }
.hand-fan .a-card.hcard.can :is(img, .cf) { box-shadow: 0 0 0 2px var(--sky), 0 0 22px 4px color-mix(in srgb, var(--sky) 70%, transparent); }
.a-bigface { width: 100%; }
.a-bigface .cf { border-radius: var(--r-md); box-shadow: var(--sh-lift); }

.a-badges { position: absolute; left: 3px; top: 15%; display: grid; gap: 2px; pointer-events: none; z-index: 2; }
.a-badge { width: 18px; height: 18px; border-radius: var(--r-pill); display: grid; place-items: center; background: rgba(7,9,16,.85); color: var(--text); }
.a-badge .ico { width: 12px; height: 12px; }
.a-badge.atk { color: var(--blood); }
.a-badge.blk { color: var(--steel); }
.a-badge.sick { color: var(--muted); font: 700 10px/1 var(--f-cond); }
.a-badge.frz { color: var(--sky); }
.a-badge.lock { color: #ffb4b0; }
.a-badge.cmd, .a-badge.copy, .a-badge.ctl { color: var(--gold); }
.a-badge.warn { color: var(--warn); font: 700 11px/1 var(--f-cond); }
.a-card.tapped :is(.a-badges, .a-pt, .a-counters, .a-tok) { rotate: calc(var(--tap, 90deg) * -1); }
.a-pt { position: absolute; right: -4px; bottom: -4px; font: 700 13px/1 var(--f-cond); padding: 2px 5px; border-radius: var(--r-sm); background: linear-gradient(180deg, #f8f2de, #d8cfb4); color: #15120c; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.6); font-variant-numeric: tabular-nums; z-index: 2; }
.a-pt.hurt, .a-pt.down { background: linear-gradient(180deg, #f6c3b4, #e08f78); color: #3a0d05; }
.a-pt.up { background: linear-gradient(180deg, #c9f2d4, #8fd6a4); color: #0b2a14; }
.a-cost { position: absolute; right: 4px; top: 4px; z-index: 2; pointer-events: none; padding: 2px 4px; border-radius: var(--r-pill); font-size: 13px; line-height: 1; background: rgba(9,12,24,.85); box-shadow: 0 0 0 2px #e0533a, 0 1px 3px rgba(0,0,0,.6); }
.a-cost.down { box-shadow: 0 0 0 2px #3fbf6a, 0 1px 3px rgba(0,0,0,.6); }
.a-cost .ms { margin: 0 1px; }
.a-pt.loyal { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: var(--gold-ink); }
.a-ctr { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); z-index: 2; min-width: 30%; aspect-ratio: 1; padding: 0 4px; border-radius: 99px; display: grid; place-items: center; font: 700 14px/1 var(--f-cond); color: #fff; background: radial-gradient(#2a7a48, #11331f); border: 2px solid #8fe0ab; box-shadow: 0 2px 6px rgba(0,0,0,.6); pointer-events: none; }
.a-ctr.neg { background: radial-gradient(#8a2a2d, #3a0d10); border-color: #ffb4b0; }
.a-card.tapped .a-ctr { transform: translate(-50%, -50%) rotate(calc(var(--tap, 90deg) * -1)); }
.a-counters { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font: 700 11px/1 var(--f-cond); letter-spacing: .04em; padding: 2px 6px; border-radius: var(--r-pill); background: rgba(7,9,16,.85); color: var(--ok); pointer-events: none; white-space: nowrap; z-index: 2; font-variant-numeric: tabular-nums; }
/* Selo embaixo da carta no campo: o que ela é além do que está impresso (ficha, virada para baixo). */
.a-tok { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  font: 700 10px/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--r-pill);
  background: linear-gradient(#f4f1e8, #c9c3b3); color: #1b1d26; border: 1px solid #fff8; box-shadow: 0 1px 4px rgba(0,0,0,.7), 0 0 0 1px #0008; pointer-events: none; z-index: 2; }
.a-tok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.a-tok.a-prep::before { display: none; }
.a-tok.a-prep { bottom: auto; top: -8px; background: #111; color: #9fd3ff; border-color: #4a7fa8; } /* preparada (cartas "prepare") */

/* Oponente: o avatar no topo (1v1) ou o rótulo da área em foco (3 ou mais), pilhas e zona de comando no canto. */
.a-opp { position: absolute; z-index: var(--z-hud); left: 0; right: 0; top: 0; height: var(--mid); pointer-events: none; }
/* 1x1: o avatar do oponente no canto de cima, embaixo do título (o meio do topo fica para as fileiras). */
.a-opp .opp-plate { left: var(--sp-4); top: 62px; transform: none; gap: 12px; }
.a-opp .opp-plate .ava { --s: 84px !important; }
.a-opp .opp-info { padding-top: 6px; }
.a-opp .opp-hand { display: none; }
.a-opp > *:not(.opp-hand) { pointer-events: auto; }
.a-opp .opp-piles { display: flex; gap: 10px; align-items: flex-end; }
.arena.multi .a-opp .opp-piles { top: 176px; }
.arena.multi .a-opp .focus-lbl { top: 182px; pointer-events: none; }
.a-cmdzone { display: flex; gap: 6px; align-items: flex-end; }
.a-cmd { display: grid; justify-items: center; gap: 4px; }
.a-cmd .a-card { width: 52px; }
.a-cmd-lbl { font: 600 11px var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 3px #000; }
.hpile-card .a-card { width: 100%; height: 100%; }
/* Card fora do campo que é alvo de algo na pilha: sai de cima do cemitério/exílio, com brilho, enquanto isso. */
.hpile-aim { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); z-index: 6; display: grid; justify-items: center; gap: 4px; pointer-events: auto; animation: aim-lift .25s ease-out; }
.hpile-aim.side { --w: 52px; left: auto; bottom: auto; right: calc(100% + 16px); top: 0; transform: none; }
.hpile-aim-cards { display: flex; gap: 6px; }
.hpile-aim .a-card { width: calc(var(--w) * 1.6); border-radius: var(--r-sm); box-shadow: 0 0 0 2px var(--ember), 0 0 18px 4px rgba(255,123,46,.65), var(--sh-card); }
.hpile-aim-lbl { font: 700 11px/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: #1a0d04; background: var(--ember); padding: 3px 8px; border-radius: var(--r-pill); }
@keyframes aim-lift { from { opacity: 0; translate: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .hpile-aim { animation: none; } }
.hpile[data-pile] { cursor: pointer; }

/* Seu canto: reserva de mana em cima das pilhas */
.me-side { display: grid; gap: 6px; justify-items: start; }
.me-piles { display: flex; gap: 10px; align-items: flex-end; }
.arena.spectating .g-hud { display: none; }

/* Mão da mesa com regras: inteira na tela (leque mais suave), ampliada ao passar o mouse. */
.arena .g-hand { height: var(--hand-h); left: 490px; right: 385px; }
/* A linha de status fica na coluna do botão (até duas linhas), para não ficar atrás da mão. */
.arena .a-status { max-width: 320px; border-radius: 14px; }
.arena .hand-fan .hcard { rotate: clamp(-8deg, calc(var(--m) * 2.5deg), 8deg); translate: 0 calc(var(--m) * var(--m) * 1.5px);
  --step: min(calc(var(--hand-w) * .82), calc((100cqw - var(--hand-w)) / max(1, var(--n) - 1))); }
.arena .hand-fan .hcard:hover, .arena .hand-fan .hcard:focus-visible { rotate: 0deg; scale: 1.5; }
.arena .a-tray { bottom: calc(var(--hand-h) + 10px); }
/* Mão: as escolhidas (descarte) sobem 18px */
.hand-fan .a-card.hcard.picked { translate: 0 calc(var(--m) * var(--m) * 3px - 34px); }
.hand-fan .a-card.hcard:hover, .hand-fan .a-card.hcard:focus-visible { translate: 0 calc(var(--hand-w) * -0.1232 - 12px); }
/* Menu de habilidades da carta aberto: nenhuma carta da mão amplia (os terrenos que vão pagar ficam à vista) e a
   carta do menu fica marcada. */
.arena .hand-fan.menu-open .hcard:hover { rotate: clamp(-8deg, calc(var(--m) * 2.5deg), 8deg); translate: 0 calc(var(--m) * var(--m) * 1.5px); scale: 1; z-index: calc(10 + var(--i)); }
.hand-fan.menu-open .hcard:hover ~ .hcard, .hand-fan.menu-open .hcard:has(~ .hcard:hover) { --push: 0px; }
.hand-fan.menu-open .hcard:hover::after { content: none; }
.hand-fan .hcard.menu-src :is(img, .cf) { box-shadow: var(--glow-gold); }

/* Chip de turno (na linha do meio, à esquerda) */
.a-turn { position: absolute; z-index: var(--z-hud); left: 84px; top: var(--mid); translate: 0 -50%; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 99px; background: rgba(9,12,24,.75); border: 1px solid var(--line); font: 600 14px var(--f-cond); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; white-space: nowrap; }
.a-turn:empty { display: none; }
.a-turn small { color: var(--muted); font: 500 14px var(--f-cond); }
.a-turn.mine { border-color: var(--gold-deep); }
.a-turn.mine small { color: var(--gold); }
.a-turn small.daynight { display: inline-flex; align-items: center; gap: 4px; padding-left: 8px; border-left: 1px solid var(--line); }
.a-turn small.daynight svg { width: 14px; height: 14px; }
.a-turn small.daynight.day { color: var(--gold); }
.a-turn small.daynight.night { color: var(--sky); }
.a-turn .clock { width: 30px; height: 30px; border-radius: 50%; background: var(--pc); display: grid; place-items: center; }
.a-turn .clock.mine { background: var(--gold); }
.a-turn .clock::after { content: ""; width: 22px; height: 22px; border-radius: 50%; background: #0b0f1d; }

/* Faixa de evento (sobre a linha do meio) */
.a-banner { position: absolute; z-index: var(--z-hud); left: 50%; top: calc(var(--mid) - 22px); transform: translate(-50%, -50%); padding: 9px 26px; border-radius: 99px; background: linear-gradient(90deg, rgba(9,12,24,0), rgba(9,12,24,.9) 15%, rgba(9,12,24,.9) 85%, rgba(9,12,24,0)); font: 600 16px var(--f-cond); letter-spacing: .04em; white-space: nowrap; pointer-events: none; }
.a-banner[hidden] { display: none; }
.a-banner.in { animation: banner-in var(--dur-slow) var(--ease-out), banner-out 400ms ease-in 3.6s forwards; }
.a-banner .nick { color: var(--pc); }
.a-banner b { color: var(--ember); }
.a-banner em, .a-banner span { font-style: normal; color: var(--sky); }
@keyframes banner-in { from { opacity: 0; translate: 0 6px; } }
@keyframes banner-out { to { opacity: 0; } }

/* Pilha (5.4), como no MTG Arena: cartas grandes à direita, por cima do campo, sem painel nem título. O topo fica
   inteiro na frente; os de baixo ficam atrás em leque: cada um mais para a esquerda, um pouco mais alto e girado,
   para ver quantas cartas há por baixo. O tamanho e o leque bastam para separar a pilha do campo. Os de baixo
   ampliam com o mouse em cima, vindo para a frente (zoomIn em anim.js).
   Sem rolagem: a parte à mostra de cada item encolhe para o leque inteiro caber (--n é o número de itens). */
.a-stackp { position: absolute; z-index: var(--z-hud); right: max(16px, 3vw); top: 50%; translate: 0 -54%; animation: stack-in var(--dur-med) var(--ease-out);
  --sw: clamp(190px, min(16vw, 31vh), 320px); --room: 34vw;
  --peek: min(calc(var(--sw) * .3), max(14px, calc((var(--room) - var(--sw)) / max(1, var(--n, 1) - 1)))); }
.a-stackp[hidden] { display: none; }
@keyframes stack-in { from { opacity: 0; translate: 24px -54%; } }
.a-stackp header { display: none; }
.si-list { display: flex; align-items: center; perspective: 1400px; }
.si { position: relative; flex: none; z-index: calc(20 - var(--d)); border-radius: var(--r-sm); }
.si + .si { margin-left: calc(var(--sw) * -1 + var(--peek)); }
/* Leque: o giro cresce com a profundidade (--d), com o eixo embaixo da carta, até 4 passos (dali em diante só desloca). */
.si:not(.top) { --f: min(var(--d), 4); transform: translateY(calc(var(--f) * var(--sw) * -.035)) rotate(calc(var(--f) * -2.5deg)) rotateY(10deg) scale(calc(1 - var(--f) * .025));
  transform-origin: 70% 100%; }
.si .a-card { width: var(--sw); border-radius: var(--r-sm); }
.si .a-card :is(img, .cf) { box-shadow: 0 0 0 2px #0a0e1c, -3px 0 0 2px var(--pc), 0 14px 34px rgba(0,0,0,.65); }
.si:not(.top) .a-card :is(img, .cf) { filter: brightness(.78); }
.si.top .a-card :is(img, .cf) { box-shadow: 0 0 0 2px #0a0e1c, -3px 0 0 2px var(--pc), 0 0 0 4px rgba(255,123,46,.85), 0 18px 40px rgba(0,0,0,.7), 0 0 30px rgba(255,123,46,.4); }
/* Habilidade na pilha com a imagem original: uma caixa com a habilidade cobre o texto impresso. */
.a-abil-box { position: absolute; left: 7%; right: 7%; top: 59%; bottom: 8.5%; display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  padding: 3% 4.5%; border-radius: 3px; background: #f1ead8; color: #1a1712; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  font: 400 calc(var(--sw) * .056)/1.25 Georgia, serif; pointer-events: none; }
.a-abil-box p { margin: 0; }
.a-abil-box .ms { font-size: .95em; }
.si-info { position: absolute; left: 0; right: 0; top: calc(var(--sw) * 1.4 + 10px); display: grid; gap: 2px; padding: 6px 8px; border-radius: 8px; background: var(--ink-2); border-left: 3px solid var(--pc); box-shadow: var(--sh-lift); }
.si:not(.top) .si-info { display: none; }
.si-info b { font: 700 13px var(--f-cond); display: flex; gap: 4px; align-items: center; color: var(--gold); }
.si-info b .ico { width: 13px; height: 13px; }
.si-info small { color: var(--text); font-size: 12px; line-height: 1.25; }
.si-info em { font: 600 13px var(--f-cond); font-style: normal; color: var(--ember); display: flex; gap: 4px; align-items: center; }
.si-info em .ico { width: 12px; height: 12px; }

/* Setas e linhas por cima do campo */
.a-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 29; overflow: visible; }
/* Setas da pilha: por cima dela (e abaixo da mão). */
.a-lines.a-lines-top { z-index: calc(var(--z-hud) + 1); }
/* Com o mouse num item da pilha, por cima da carta ampliada (a camada de efeitos, fx-layer, fica em 1900). */
.a-lines.a-lines-top.lift { z-index: 1910; }
/* Permanente de onde veio a habilidade da pilha sob o mouse. */
.a-field .a-card.stack-src :is(img, .cf) { box-shadow: 0 0 0 3px var(--gold), 0 0 22px 6px rgba(244,196,96,.65); }
.a-lines .ln { fill: none; stroke-linecap: round; }
/* Alvo da pilha (laboratório, A · seta curva com divisas): faixa larga e translúcida, a linha com a ponta e as divisas
   correndo em direção ao alvo. */
.a-lines .ln.ember-case { stroke: rgba(255,123,46,.28); stroke-width: 18; filter: drop-shadow(0 0 4px rgba(8,6,4,.9)); }
.a-lines .ln.ember { stroke: var(--ember); stroke-width: 4; filter: drop-shadow(0 0 6px rgba(255,123,46,.85)); }
.a-lines .ln.ember-flow { stroke: #ffc58a; stroke-width: 10; stroke-linecap: butt; stroke-dasharray: 6 14; animation: ember-flow .45s linear infinite; filter: drop-shadow(0 0 5px rgba(255,123,46,.9)); }
@keyframes ember-flow { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: reduce) { .a-lines .ln.ember-flow { animation: none; } }
.a-lines .ln.blood { stroke: var(--blood); stroke-width: 4; opacity: .9; filter: drop-shadow(0 0 5px rgba(229,72,77,.6)); }
.a-lines .ln.gold { stroke: var(--gold); stroke-width: 4; filter: drop-shadow(0 0 2px rgba(8,6,4,.9)) drop-shadow(0 0 6px rgba(244,196,96,.85)); }
.a-lines .ln.steel { stroke: var(--steel); stroke-width: 4; opacity: .9; filter: drop-shadow(0 0 5px rgba(143,176,214,.6)); }
.a-lines .ln.aim { stroke: var(--blood); stroke-width: 4; stroke-dasharray: 10 8; filter: drop-shadow(0 0 5px rgba(229,72,77,.7)); }
.a-lines .ln.aim.steel { stroke: var(--steel); filter: drop-shadow(0 0 5px rgba(143,176,214,.7)); }
.drop-aim.steel-aim { filter: drop-shadow(0 0 10px var(--steel)) drop-shadow(0 0 4px var(--steel)); }
/* Ataque: criaturas na seleção (Shift+clique ou área) e o alvo sob o ponteiro ao arrastar. */
.a-card.sel { outline: 2px dashed #fff; outline-offset: 4px; }
.drop-aim { filter: drop-shadow(0 0 10px var(--blood)) drop-shadow(0 0 4px var(--blood)); }
/* Mágica arrastada da mão: os alvos possíveis brilham; o que está sob o ponteiro fica marcado. */
.a-card.aim-hint :is(img, .cf), .ava.aim-hint { box-shadow: var(--glow-ember); }
.drop-aim.ember-aim { filter: drop-shadow(0 0 12px var(--ember)) drop-shadow(0 0 4px var(--ember)); }
.ava.aim-hint::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px dashed var(--ember); pointer-events: none; }

#a-lasso { position: fixed; z-index: var(--z-hud); border: 1px dashed var(--sky); background: color-mix(in srgb, var(--sky) 12%, transparent); border-radius: 4px; pointer-events: none; }

/* Canto do botão principal: linha de status, trilha de fases e o botão (5.2, 5.3, 5.5) */
.a-ctl { position: absolute; z-index: var(--z-hud); right: 30px; bottom: 20px; display: grid; justify-items: end; gap: 8px; pointer-events: none; }
.a-ctl > * { pointer-events: auto; }
.a-status { padding: 7px 18px; border-radius: 99px; background: rgba(9,12,24,.9); border: 1px solid var(--line); font: 600 15px/1.35 var(--f-body); max-width: 420px; text-align: right; margin-bottom: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.a-status .sky { color: var(--sky); }
.a-status .ember { color: var(--ember); }
.a-status .gold { color: var(--gold); }
.a-status .nick, .a-banner .nick { color: var(--pc); font-weight: 700; }
.phase-wrap { display: grid; grid-template-columns: auto auto; grid-template-areas: ". lbl" "full pill"; gap: 4px 6px; align-items: center; }
.phase-lbl { grid-area: lbl; font: 600 12px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--sky); text-shadow: 0 1px 4px #000; }
.phase-wrap .ctl-btns { grid-area: full; display: flex; gap: 6px; }
.phase-wrap .phase { grid-area: pill; }
.phase { display: flex; gap: 4px; align-items: center; padding: 6px; border-radius: 99px; background: rgba(9,12,24,.75); border: 1px solid var(--line); transition: box-shadow var(--dur-med), border-color var(--dur-med); }
/* A barra de quem está no turno brilha na cor do jogador. */
.phase.turn { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc), 0 0 22px color-mix(in srgb, var(--pc) 60%, transparent), inset 0 0 14px color-mix(in srgb, var(--pc) 25%, transparent); }
.phase > :is(span, button) { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.phase > button { appearance: none; padding: 0; border: 0; background: none; cursor: pointer; }
.phase > button:hover { color: var(--text); background: rgba(255,255,255,.07); }
.phase > :is(span, button) .ico { width: 18px; height: 18px; }
.phase > .past { opacity: .45; }
.phase > .cur { color: #0b0f1d; background: var(--sky); box-shadow: 0 0 16px rgba(89,184,255,.6); }
.phase > button.cur:hover { color: #0b0f1d; background: var(--sky); }
/* Parada marcada: anel e ponto dourados. */
.phase > .stop { box-shadow: inset 0 0 0 2px var(--gold); color: var(--gold); opacity: 1; }
.phase > .stop.cur { box-shadow: inset 0 0 0 2px var(--gold), 0 0 16px rgba(89,184,255,.6); color: #0b0f1d; }
.phase > .stop::after { content: ""; position: absolute; right: 1px; top: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px #0b0f1d; }
.phase.idle > span { opacity: .45; }
.opp-info .opp-phase { margin-top: 8px; }
.opp-phase > :is(span, button) { width: 30px; height: 30px; }
.opp-phase > :is(span, button) .ico { width: 16px; height: 16px; }
.opp-phase.multi { position: absolute; left: 50%; top: 206px; transform: translateX(-50%); }
.phase .steps { position: absolute; left: 50%; bottom: -9px; translate: -50% 0; display: flex; gap: 3px; align-items: center; }
.phase .steps i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.35); }
.phase .steps i.cur { width: 6px; height: 6px; background: var(--sky); box-shadow: 0 0 6px var(--sky); }
.fullctl { width: 40px; height: 40px; border-radius: 50%; padding: 0; display: grid; place-items: center; background: rgba(9,12,24,.75); border: 1px solid var(--line); color: var(--muted); cursor: pointer; }
.fullctl .ico { width: 18px; height: 18px; }
.fullctl:hover { color: var(--gold); border-color: var(--gold-deep); }
.fullctl.on { color: var(--gold); border-color: var(--gold-deep); background: color-mix(in srgb, var(--gold) 14%, rgba(9,12,24,.85)); }
.a-ctarow { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.a-ctarow:empty { display: none; }
.cta.wait { height: 46px; font: 600 15px/1 var(--f-cond); letter-spacing: .1em; color: var(--text); background: rgba(9,12,24,.75); box-shadow: 0 0 0 1px var(--line); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; padding: 0 14px; }
.a-ctarow .ghost-btn { height: 46px; }
.a-ctacol { display: grid; gap: 6px; }
.a-ctacol .ghost-btn { height: 38px; justify-content: center; }
.a-ctacol .cta.all { font-size: 18px; letter-spacing: .08em; white-space: nowrap; }

/* Bandeja de alvos fora da mesa (acima da mão) */
.a-tray { position: absolute; z-index: var(--z-hud); left: 50%; translate: -50% 0; bottom: calc(var(--hand-w) * 1.4 * .78 + 14px); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 50vw; }
.chip.aim { border-color: var(--ember); }
.chip.aim:hover { background: color-mix(in srgb, var(--ember) 25%, var(--ink-3)); }

/* Topo: formato e fim de jogo */
.fmt-chip, .over-chip { font: 700 11px/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border-radius: 99px; white-space: nowrap; }
.fmt-chip { color: var(--gold); border: 1px solid var(--gold-deep); }
.over-chip { color: #fff; background: var(--ember-deep); }
.over-chip[hidden] { display: none; }
.game.multi .hud-top .fmt-chip { display: none; }

/* Resumos (3 ou mais jogadores) na mesa com regras: a contagem por tipo no lugar da miniatura */
.arena .pod { height: auto; grid-template-rows: auto auto; }
.pod-count { font: 600 13px var(--f-cond); letter-spacing: .04em; color: var(--muted); text-align: center; padding: 8px 4px; border-radius: var(--r-sm); background: rgba(255,255,255,.035); }
.pod-tag.sky { background: var(--sky); color: var(--ink-0); }
.pod.turnnow { border-color: color-mix(in srgb, var(--sky) 70%, transparent); }
.pod.aimable { cursor: crosshair; box-shadow: 0 0 0 2px var(--ember); }
.pod.targeted { box-shadow: var(--glow-ember); }
.pod-eye { position: absolute; right: 6px; top: 6px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; padding: 0; display: grid; place-items: center; background: var(--ink-1); border: 1px solid var(--line); color: var(--muted); cursor: pointer; }
.pod-eye .ico { width: 14px; height: 14px; }
@media (pointer: fine) { .pod-eye { opacity: 0; } .pod:hover .pod-eye { opacity: 1; } }

/* Gaveta "Jogadores" e histórico */
.cnt.gold { border-color: var(--gold-deep); color: var(--gold); }
.cnt.sky { border-color: color-mix(in srgb, var(--sky) 55%, transparent); color: var(--sky); }
.cnt.blood { border-color: var(--blood); color: #ffb4b0; }
.g-log .turn { margin-top: 6px; font: 600 13px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* Ampliação flutuante da mesa com regras: a carta, as observações do motor e os anexos ao lado */
.float-preview .pv-main { display: grid; gap: 6px; }
.pv-notes { font-size: 12px; line-height: 1.35; padding: 8px 10px; border-radius: var(--r-md); background: rgba(9,12,24,.94); border: 1px solid var(--line); display: grid; gap: 3px; }
.pv-notes .warn { color: var(--warn); }
.pv-notes .up { color: var(--ok); }
.float-preview.with-att { width: calc(var(--pv-w) * 1.72); display: grid; grid-template-columns: 1fr .72fr; gap: 10px; align-items: start; }
.pv-att { display: grid; gap: 6px; }
.float-preview.with-att.many { width: calc(var(--pv-w) * 2.1); grid-template-columns: 1fr 1.1fr; }
.pv-att.many { grid-template-columns: 1fr 1fr; }
.pv-att.many > span { grid-column: 1 / -1; }
.pv-att > span { font: 600 12px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 3px #000; }
.pv-att img { width: 100%; border-radius: var(--r-md); }

/* Painéis de decisão */
.a-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--scrim); display: grid; place-items: center; padding: 16px; }
.a-overlay[hidden] { display: none; }
/* "Ver campo de batalha": no topo, acima dos painéis; espiando, a pilha e os painéis somem até clicar de novo. */
.a-peek { position: fixed; top: 12px; left: 50%; translate: -50% 0; z-index: calc(var(--z-modal) + 1); display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-pill); font: 700 12px/1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  background: rgba(9, 12, 24, .9); color: var(--gold); border: 1px solid var(--gold-deep); box-shadow: 0 4px 14px rgba(0,0,0,.55); backdrop-filter: blur(6px); }
.a-peek:hover { border-color: var(--gold); color: #fff; }
.a-peek[hidden] { display: none; }
.a-peek svg { width: 14px; height: 14px; }
.peeking .a-peek { background: var(--gold); color: #14100a; border-color: var(--gold); }
.peeking :is(#a-overlay, #a-stack, .a-lines-top, .a-banner) { visibility: hidden; }
.a-overlay.soft { background: transparent; pointer-events: none; }
.a-overlay.soft > * { pointer-events: auto; }
.a-dialog { background: var(--ink-1); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: var(--r-xl); padding: 22px; display: grid; gap: 12px; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: var(--sh-panel); }
.a-dialog.wide { width: min(1180px, 100%); }
.a-dialog h3 { margin: 0; font: 700 22px var(--f-display); }
.a-dialog .warn { color: var(--warn); }
.a-dialog .gold { color: var(--gold); }
.a-dialog > .cta, .a-dialog > .btn { justify-self: center; }
.a-dialog .cta { width: auto; min-width: 200px; padding: 0 28px; white-space: nowrap; }
.a-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.a-wait { width: min(520px, 100%); }
.a-seats { display: grid; gap: 6px; }
.a-seat-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r-md); background: var(--ink-2); }
.a-seat-row > span { display: grid; gap: 1px; min-width: 0; }
.a-seat-row small { color: var(--muted); font-size: 12px; }
.a-seat-row.empty { color: var(--muted); background: none; border: 1px dashed var(--line-strong); }
.a-seat-row > span:not(.ava-slot) { flex: 1; }
.a-seat-x { margin-left: auto; }
.bot-tag { display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 2px 7px; border-radius: 99px; font: 700 10px/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase;
  color: var(--sky); background: color-mix(in srgb, var(--sky) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sky) 45%, transparent); }
.a-wait .ghost-btn { justify-self: start; }
/* Cartas escondidas que você conhece (gaveta Jogadores) */
.known { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.known > div { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.known .zone-lbl { margin: 0 4px 0 0; }
.known-card { display: inline-flex; gap: 5px; align-items: center; padding: 3px 8px; border-radius: 99px; background: var(--ink-2); border: 1px solid var(--line); font: 600 12px var(--f-cond); cursor: default; white-space: nowrap; }
.known-card i { font-style: normal; color: var(--muted); }
.known-card:hover { border-color: var(--line-strong); }
.ava-slot { width: 40px; height: 40px; border-radius: 50%; border: 1.5px dashed var(--line-strong); flex: none; }
/* Bot chegando (addBotDialog): o lugar gira até o servidor sentar o bot. */
.a-seat-row.pending { border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.ava-slot.spin { border: 3px solid color-mix(in srgb, var(--gold) 22%, transparent); border-top-color: var(--gold); animation: ava-spin .9s linear infinite; }
@keyframes ava-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .ava-slot.spin { animation-duration: 2.4s; } }
.a-end { justify-items: center; text-align: center; }
.a-end .a-buttons { justify-content: center; }
.a-end-ico { color: var(--muted); }
.a-end-ico .ico { width: 44px; height: 44px; }
.a-end.won .a-end-ico, .a-end.won h3 { color: var(--gold); }
.a-mull { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* Escolha de cards: a lista rola e o título e o botão ficam sempre à vista. */
.a-dialog.a-choose { grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; }
.a-choose-list { overflow-y: auto; min-height: 0; padding: 4px; align-content: flex-start; }
.a-choose-g { position: relative; }
.a-choose-sep { flex-basis: 100%; width: 100%; grid-column: 1 / -1; margin: 10px 0 2px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font: 600 12px var(--f-cond); letter-spacing: .1em; text-transform: uppercase; }
.a-choose-g.look { opacity: .5; filter: grayscale(.6); }
.a-choose-g.look:hover { opacity: .85; filter: none; }
.a-choose-n { position: absolute; right: -4px; top: -6px; min-width: 26px; padding: 2px 7px; border-radius: 999px; background: var(--ink-0, #000); border: 1px solid var(--gold); color: var(--gold); font-weight: 700; font-size: 13px; text-align: center; pointer-events: none; }
.a-mull .a-card { width: 100px; }
.a-mull.big .a-card { width: 150px; }
.a-pile { display: flex; gap: 8px; flex-wrap: wrap; }
.a-pile .a-card { width: 110px; }
.a-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: ord; }
.a-order li { display: grid; grid-template-columns: auto 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: var(--r-md); background: var(--ink-2); counter-increment: ord; }
.a-order li::before { content: counter(ord) "º"; font: 700 15px var(--f-cond); color: var(--gold); }
.a-order img { width: 44px; border-radius: 4px; }
.a-order small { display: block; color: var(--muted); font-size: 11px; line-height: 1.3; }
.a-order-btns { display: flex; gap: 4px; }
.a-scry li { grid-template-columns: auto 64px minmax(0, 1fr) auto; }
.a-scry .a-card { width: 64px; }
.a-assign { display: grid; gap: 6px; }
.a-assign-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-md); background: var(--ink-2); }
.a-assign-row.player { border-left: 3px solid var(--blood); }
.a-stepper { display: flex; align-items: center; gap: 8px; }
.a-stepper b { min-width: 22px; text-align: center; font: 700 18px var(--f-cond); font-variant-numeric: tabular-nums; }
.a-xs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.a-xs .btn { min-width: 44px; }
.a-free { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.a-free input { min-width: 0; flex: 1; max-width: 240px; }

/* ---------- Shell da mesa (hud.js): ícones, avatar, reserva de mana ---------- */
.ico { width: 1em; height: 1em; flex: none; }
.ava { position: relative; width: var(--s, 64px); height: var(--s, 64px); flex: none; border-radius: 50%; }
.ava-ring { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.ava-ring circle { fill: none; stroke-width: 5; }
.ava-ring .bg { stroke: rgba(255,255,255,.08); }
.ava-ring .fg { stroke-linecap: round; transition: stroke-dasharray var(--dur-slow) var(--ease-out), stroke var(--dur-slow); }
.ava-ring .over { stroke: var(--ok); stroke-width: 2; stroke-linecap: round; }
.ava-face { position: absolute; inset: 9%; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, color-mix(in srgb, var(--pc) 80%, #fff), color-mix(in srgb, var(--pc) 55%, #000));
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.6), inset 0 -10px 20px rgba(0,0,0,.45);
  font: 700 calc(var(--s, 64px) * .3)/1 var(--f-display); color: rgba(255,255,255,.92); text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.ava-life { position: absolute; left: 50%; bottom: -14%; transform: translateX(-50%); min-width: 58%; padding: 1px 8px; text-align: center;
  font: 700 calc(var(--s, 64px) * .27)/1.1 var(--f-cond); color: #fff; font-variant-numeric: tabular-nums;
  background: linear-gradient(#20283f, #0b0f1d); border: 2px solid var(--gold-deep); border-radius: var(--r-md); box-shadow: 0 4px 14px rgba(0,0,0,.6); cursor: default; }
.ava-life[data-life-set] { cursor: pointer; }
.ava-life[data-life-set]:hover { border-color: var(--gold); }
.ava-life.flash-down { animation: life-down 400ms ease; }
.ava-life.flash-up { animation: life-up 400ms ease; }
@keyframes life-down { 0%, 60% { border-color: var(--blood); box-shadow: 0 0 14px var(--blood); } }
@keyframes life-up { 0%, 60% { border-color: var(--ok); box-shadow: 0 0 14px var(--ok); } }
.ava.active::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--gold); pointer-events: none; }
.ava.acting::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; box-shadow: var(--glow-sky); pointer-events: none; }
.ava.off .ava-face { filter: grayscale(.8); }
.ava.dead .ava-face, .ava.lost .ava-face { filter: grayscale(1); }
.ava.dead .ava-life { border-color: var(--blood); color: #ffb4b0; }
.ava.lost { opacity: .5; }
.ava.aimable { cursor: crosshair; }
.ava.aimable::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px dashed var(--ember); pointer-events: none; }
.ava.targeted::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; box-shadow: var(--glow-ember); border: 0; pointer-events: none; }
.ava-poison { position: absolute; right: -4px; top: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: #12301a; border: 1px solid var(--poison); color: var(--poison); font: 700 12px var(--f-cond); }
.ava-cmd { position: absolute; left: -6px; top: -6px; display: grid; gap: 2px; }
.ava-cmd span { display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px; border-radius: var(--r-pill); background: rgba(7,9,16,.9); border: 1px solid var(--gold-deep); color: var(--gold); font: 700 11px var(--f-cond); }
.ava-cmd span.lethal { color: var(--blood); border-color: var(--blood); }
.ava-acting { position: absolute; left: 50%; top: calc(100% + var(--s, 64px) * .17); transform: translateX(-50%); white-space: nowrap; font: 700 10px var(--f-cond); letter-spacing: .14em; color: var(--sky); text-shadow: 0 1px 3px #000; }
.ava-out { position: absolute; left: -10%; right: -10%; top: 50%; transform: translateY(-50%) rotate(-12deg); text-align: center; background: var(--blood); color: #fff; font: 700 12px var(--f-cond); letter-spacing: .2em; text-transform: uppercase; border-radius: 3px; }

.pool { display: inline-flex; gap: 4px; align-items: center; padding: 2px 8px 2px 4px; border-radius: var(--r-pill); background: rgba(9,12,24,.85); border: 1px solid var(--line); font-size: 18px; }
.pool-m { display: inline-flex; align-items: center; gap: 1px; }
.pool-m b { font: 700 12px var(--f-cond); color: var(--muted); }

/* ---------- Celular deitado (spec 6): visão compacta das duas mesas (largura ≤ 900 e altura ≤ 500) ---------- */
.cmp-chips, .cmp-life, .hand-toggle, .dock-fab, .cmp-scrim { display: none; }
/* ---------- Layout no jeito do MTG Arena (experimental, ?layout=arena) ----------
   Avatares no meio de cada lado: o do oponente no alto (com a mão dele quase escondida atrás), o seu embaixo, logo
   acima da mão, que fica baixa (só o topo à mostra; sobe ao passar o mouse). Atrás, os terrenos à esquerda e os
   outros permanentes à direita, com um vão no meio para o avatar. Pilhas nos cantos; fases ao lado do seu avatar. */
.a-me { display: none; }
@media not all and (max-width: 900px) and (max-height: 500px) {
  /* Layout atual (avatar do oponente no canto de cima à esquerda, pilhas à direita): a fileira de trás dele fica entre
     os dois (e depois do título, que fica no alto à esquerda). */
  .arena:not(.lay-arena) .a-half.opp .a-row.lands { left: 530px; right: 290px; }
  .arena.lay-arena {
    --top: 72px;
    --sink: calc(var(--hand-w) * 1.4 * .45);
    --peek: calc(var(--hand-w) * 1.4 - var(--sink));
    --cw: clamp(56px, min((100vh - var(--top) - 62px - var(--peek)) / 4.48, 10vw), 190px);
    --split-w: 250px;
    /* Avatares do tamanho das cartas: o seu cabe na altura da fileira de trás; o do oponente, no vão dela. */
    --mava: clamp(60px, calc(var(--cw) * .66), 100px);
    --oava: clamp(56px, calc(var(--cw) * .56), 84px);
  }
  .arena.lay-arena.multi { --top: 176px; --cw: clamp(48px, min((100vh - var(--top) - 62px - var(--peek)) / 4.48, 8vw), 160px); }
  /* Fileira de trás: terrenos | vão do avatar | outros. */
  .arena.lay-arena .a-row.lands.split { display: grid; grid-template-columns: minmax(0, 1fr) var(--split-w) minmax(0, 1fr); --split-gap: var(--split-w); }
  .arena.lay-arena .a-row.lands.split > .a-grp:first-child { grid-column: 1; justify-self: start; }
  .arena.lay-arena .a-row.lands.split > .a-grp:last-child { grid-column: 3; justify-self: end; }
  .arena.lay-arena .a-half .a-row { left: 110px; right: 110px; }
  /* As pilhas do oponente ficam no canto de cima: a fileira de trás dele para antes delas (dos dois lados, para o
     vão continuar no meio). */
  .arena.lay-arena .a-half.opp .a-row.lands { left: 270px; right: 270px; }
  .arena.lay-arena.multi .a-opp .focus-lbl { left: 50%; top: 136px; translate: -50% 0; white-space: nowrap; }

  /* Oponente (1x1): avatar no meio do topo, nome e fases à direita dele; a mão (versos) espiando por trás. */
  .arena.lay-arena .a-opp .opp-plate { left: 50%; top: 8px; transform: translateX(calc(var(--oava) / -2)); }
  .arena.lay-arena .a-opp .opp-plate .ava { --s: var(--oava) !important; }
  .arena.lay-arena .a-opp .opp-hand { display: block; z-index: -1; }
  .arena.lay-arena .a-opp .opp-hand .ohc { top: -58px; }
  .arena.lay-arena .a-opp .opp-piles { right: var(--sp-4); top: var(--sp-3); }
  .arena.lay-arena .a-opp .opp-info { padding-top: 2px; gap: 2px; }
  .arena.lay-arena .a-opp .opp-phase:not(.multi) { position: absolute; left: calc(var(--oava) / 2); top: calc(var(--oava) + 24px); translate: -50% 0; padding: 3px; }
  .arena.lay-arena .a-opp .opp-phase:not(.multi) > :is(span, button) { width: 26px; height: 26px; }
  .arena.lay-arena.multi .a-opp .opp-piles { top: 176px; }

  /* Você: avatar no meio, embaixo, entre os botões de passar e as fases. */
  .arena.lay-arena .a-me { display: grid; grid-template-columns: 1fr auto 1fr; width: 620px; position: absolute; z-index: var(--z-hud); left: 50%; top: calc(var(--mid) + 24px + var(--cw) * 1.4 + var(--cw) * .42 - var(--mava) / 2 - 8px); translate: -50% 0; align-items: center; gap: 18px; pointer-events: none; }
  .arena.lay-arena .me-wing .phase-lbl { grid-area: auto; }
  .arena.lay-arena .a-me > * { pointer-events: auto; }
  .arena.lay-arena .a-me .ava { --s: var(--mava) !important; }
  .arena.lay-arena .me-wing { display: grid; gap: 4px; justify-items: center; min-width: 96px; }
  .arena.lay-arena .me-wing.left { justify-items: end; justify-self: end; }
  .arena.lay-arena .me-wing.right { justify-items: start; justify-self: start; }
  .arena.lay-arena .me-wing .ctl-btns { display: flex; gap: 6px; }
  .arena.lay-arena .me-wing .phase { padding: 4px; }
  .arena.lay-arena .me-wing .phase > :is(span, button) { width: 30px; height: 30px; }
  .arena.lay-arena.spectating .a-me { display: none; }
  /* Canto de baixo à esquerda: nome, mana e pilhas. */
  .arena.lay-arena .g-hud { left: var(--sp-5); bottom: var(--sp-4); }
  .arena.lay-arena .me-side { gap: 8px; }
  .arena.lay-arena .me-nick { margin-left: 0; }

  /* Mão baixa, no meio, embaixo do avatar: só o topo à mostra; a carta sob o mouse sobe inteira. */
  .arena.lay-arena .g-hand { left: 400px; right: 400px; bottom: calc(var(--sink) * -1); }
  .arena.lay-arena .hand-fan .a-card.hcard:hover, .arena.lay-arena .hand-fan .a-card.hcard:focus-visible { translate: 0 calc(var(--hand-w) * -0.1232 - 12px - var(--sink)); }
  .arena.lay-arena .a-tray { bottom: calc(var(--peek) + 150px); }
  .arena.lay-arena .a-ctl { bottom: 14px; gap: 6px; }
  .arena.lay-arena .a-status { margin-bottom: 2px; font-size: 13px; max-width: 290px; padding: 5px 14px; }
}

@media (max-width: 900px) and (max-height: 500px) {
  .a-combat-fx span { font-size: 34px; }
  .game { --hand-w: 64px; }
  .arena { --hand-w: 64px; --cw: clamp(34px, 11.7vh, 70px); --mid: 50%; }
  .arena .g-hand { height: 54px; }
  .a-row { left: 56px; right: 56px; }
  .tzone .a-row.front { top: 12px; }
  .tzone .a-row.lands { top: calc(16px + var(--cw) * 1.4); }
  .a-half.me .a-row.front { top: 12px; }
  .a-half.me .a-row.lands { top: calc(16px + var(--cw) * 1.4); }
  .a-half.opp .a-row.front, .tzone.mirror .a-row.front { bottom: 6px; }
  .a-half.opp .a-row.lands, .tzone.mirror .a-row.lands { bottom: calc(10px + var(--cw) * 1.4); }
  .a-row.front { --gap: 10px; }
  .a-row.lands { --gap: 6px; }

  /* Topo: só voltar e o menu */
  .hud-top { top: 8px; left: 8px; height: 34px; }
  .hud-top :is(h2, #g-specs, #a-specs, .fmt-chip, .lbl) { display: none; }
  .a-turn, .focus-lbl { display: none; }

  /* Oponente: uma barra no topo */
  .opp-hand, .opp-piles, .opp-info small, .opp-info .chips, .opp-plate .ava-life, .opp-plate .ava-cmd { display: none !important; }
  .opp-plate { top: 6px; left: 50%; transform: translateX(-50%); align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 99px; background: rgba(9,12,24,.85); border: 1px solid var(--line); }
  .opp-plate .ava { --s: 34px !important; }
  .opp-info { display: flex; align-items: center; gap: 10px; padding: 0; white-space: nowrap; }
  .opp-info > b { font-size: 14px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
  .cmp-life { display: block; font: 700 22px/1 var(--f-cond); font-variant-numeric: tabular-nums; }
  .cmp-chips { display: flex; gap: 5px; }
  .cmp-chip { padding: 3px 8px; border-radius: 99px; border: 1px solid var(--line); background: rgba(7,9,16,.6); font: 600 11px var(--f-cond); letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
  .cmp-chip b { color: var(--text); font-weight: 700; }
  .cmp-chip.poison { color: #8fe08a; border-color: color-mix(in srgb, #8fe08a 45%, transparent); }
  .cmp-chip[data-view], .cmp-chip[data-deck] { cursor: pointer; }

  /* Seu canto: avatar menor e chips no lugar das pilhas */
  .g-hud { left: 8px; bottom: 8px; gap: 8px; }
  .g-hud .hpiles, .g-hud .me-piles, .me-nick, .me-plate .ava-cmd { display: none !important; }
  .me-plate { grid-template-columns: auto auto; align-items: end; gap: 8px; padding: 0; }
  .me-plate .ava { --s: 66px !important; grid-row: 1; grid-column: 1; }
  .me-plate .cmp-chips { grid-row: 1; grid-column: 2; flex-direction: column; align-items: flex-start; padding-bottom: 4px; }

  /* Ferramentas: botão redondo à esquerda; o dock abre ao lado */
  .dock-fab { display: grid; place-items: center; position: absolute; z-index: var(--z-hud); left: 10px; top: 50%; translate: 0 -50%; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid var(--gold-deep); background: rgba(9,12,24,.85); color: var(--gold); cursor: pointer; }
  .dock-fab .ico { width: 26px; height: 26px; }
  .game:not(.dock-open) .dock { display: none; }
  .game.dock-open .dock { left: 64px; z-index: calc(var(--z-drawer) + 1); }
  .cmp-scrim { position: absolute; inset: 0; z-index: var(--z-drawer); background: var(--scrim); }
  .game:is(.hand-open, .dock-open) .cmp-scrim { display: block; }

  /* Mão recolhida: só o topo das cartas e "Mão · N ▴"; tocar abre a folha */
  .g-hand { left: 50%; right: auto; width: min(320px, 44vw); translate: -50% 0; height: 54px; overflow: hidden; pointer-events: auto; }
  .g-hand .hand-fan { pointer-events: none; top: 18px; }
  .g-hand .hand-eye, .g-hand .hand-empty { display: none; }
  .hand-toggle { display: flex; justify-content: center; align-items: flex-start; position: absolute; inset: 0; z-index: 50; padding: 0; border: 0; background: none; cursor: pointer; }
  .hand-toggle { font: 700 12px/1 var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--text); text-shadow: 0 1px 4px #000; }
  .hand-toggle::before { content: ""; position: absolute; left: 50%; top: 0; translate: -50% 0; width: 100px; height: 20px; border-radius: 0 0 10px 10px; background: rgba(9,12,24,.85); border: 1px solid var(--line); border-top: 0; z-index: -1; }
  .hand-toggle { padding-top: 4px; }
  /* Folha da mão: os 60% de baixo, cartas de 86px com rolagem */
  .game.hand-open .g-hand { z-index: calc(var(--z-drawer) + 1); left: 0; right: 0; width: auto; translate: none; height: 60%; overflow: visible; background: linear-gradient(180deg, rgba(14,18,34,.98), rgba(7,9,16,.98)); border-top: 1px solid var(--gold-deep); border-radius: 16px 16px 0 0; }
  .game.hand-open .hand-toggle { inset: 0 0 auto 0; height: 30px; align-items: center; padding: 0; }
  .game.hand-open .hand-toggle::before { display: none; }
  .game.hand-open .hand-toggle span { display: inline-block; rotate: 180deg; }
  .game.hand-open .hand-fan { pointer-events: auto; position: absolute; inset: 30px 0 0 0; top: 30px; display: flex; gap: 12px; align-items: center; overflow-x: auto; padding: 0 16px 12px; }
  .game.hand-open .hand-fan .hcard { position: relative; flex: none; left: auto; top: auto; width: 86px; rotate: none; translate: none; scale: 1; margin: 0; }
  .game.hand-open .hand-fan .hcard:hover { scale: 1; translate: 0 -6px; }
  .game.hand-open .hand-fan .hand-empty { display: block; position: static; margin: auto; }

  /* Botão principal ao alcance do polegar */
  .g-cta, .a-ctl { right: 10px; bottom: 10px; gap: 6px; }
  .g-cta .cta, .a-ctl .cta { width: 162px; height: 46px; font-size: 18px; }
  .a-ctl .cta small { font-size: 10px; }
  .cta-row .ghost-btn { padding: 5px 9px; font-size: 11px; }

  /* Mesa com regras: fase atual com o rótulo, linha de status no topo, pilha num selo */
  .phase > :is(span, button):not(.cur) { display: none; }
  .phase:not(.turn):not(.idle) { display: none; }
  .phase { padding: 3px; }
  .phase > :is(span, button) { width: 28px; height: 28px; }
  .phase-lbl { font-size: 11px; }
  .a-ctl .a-status { position: fixed; top: 50px; left: 50%; translate: -50% 0; margin: 0; max-width: 70vw; font-size: 12px; padding: 5px 12px; text-align: center; }
  .a-stackp { right: 10px; top: 50px; width: auto; padding: 6px 10px; cursor: pointer; border-radius: 14px; background: rgba(9,12,24,.82); border: 1px solid var(--line); backdrop-filter: blur(6px); --room: 52vh; }
  .a-stackp header { display: flex; justify-content: space-between; align-items: baseline; font: 600 12px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; }
  .a-stackp header b { color: var(--ember); }
  .a-stackp header span { display: none; }
  .a-stackp { translate: none; --sw: 150px; }
  .a-stackp.open .si-list { padding-top: 6px; flex-direction: column; perspective: none; }
  .a-stackp.open .si + .si { margin-left: 0; margin-top: calc(var(--sw) * -1.4 + 26px); }
  .a-stackp.open .si:not(.top) { transform: none; }
  .a-stackp:not(.open) .si-list { display: none; }
  .a-stackp.open { width: 250px; }
  .me-side .pool { font-size: 18px; }
  /* Painéis de decisão viram folhas de altura total */
  .a-overlay .a-dialog { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; overflow-y: auto; }
  .a-overlay .a-dialog.a-choose { overflow: hidden; }
}

/* Tablet e toque (spec 3.8): alvos de pelo menos 44px, detectados pelo ponteiro e não pela largura. */
@media (pointer: coarse) and (min-height: 501px) {
  .dock > button, .dock .icon-btn { min-width: 54px; min-height: 54px; }
  .phase > :is(span, button) { width: 42px; height: 42px; }
  .g-cta .cta, .a-ctl .cta { min-width: 230px; height: 60px; }
  .icon-btn, .ghost-btn, .btn { min-height: 44px; }
  .icon-btn { min-width: 44px; }
  .hand-fan .hcard .eye { opacity: 1 !important; }
}

/* ---------- Torneio (suíço ou todos contra todos) ---------- */
.play-tourney button { line-height: 1.15; padding: 8px 4px; }
.play-row .play-bo { flex: none; }
.play-row .play-bo button { padding: 6px 12px; white-space: nowrap; }
.sd.tn .sd-head h2 { max-width: none; flex: 1; }
.tn-round-chip { font: 700 13px/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-deep); padding: 7px 12px; border-radius: 99px; white-space: nowrap; }
.tn-body { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: 24px; align-items: start; padding: 24px; max-width: 1280px; width: 100%; margin: 0 auto; }
.tn-main { display: grid; gap: 18px; min-width: 0; }
.tn-me { display: grid; gap: 8px; padding: 20px 22px; border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(227,178,92,.12), rgba(9,12,24,.85) 60%); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); box-shadow: var(--sh-panel); }
.tn-me small { font: 700 12px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tn-me b { font: 700 26px/1.15 var(--f-display); }
.tn-me b em { font-style: normal; color: var(--gold); margin: 0 4px; }
.tn-me.champ { text-align: center; justify-items: center; }
.tn-me.champ b { font-size: 34px; color: var(--gold); }
.tn-me > .tn-tag { justify-self: start; }
.tn-me.champ > span { color: var(--muted); }
.tn-me-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.tn-me-act .cta { min-width: 200px; }
.tn-round { display: grid; gap: 6px; }
.tn-round h4, .tn-side h4 { font: 700 13px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.tn-match { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); background: rgba(9,12,24,.7); border: 1px solid var(--line); font-size: 15px; }
.tn-match.me { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.tn-match.done { opacity: .85; }
.tn-tbl { font: 600 12px var(--f-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tn-p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-p.pa { text-align: right; }
.tn-p.win { color: var(--gold); font-weight: 700; }
.tn-sc { text-align: center; font: 700 18px var(--f-cond); letter-spacing: .06em; }
.tn-tag { font: 700 11px/1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 99px; white-space: nowrap; color: var(--muted); border: 1px solid var(--line); }
.tn-tag.live { color: var(--sky, #7cc4ff); border-color: color-mix(in srgb, var(--sky, #7cc4ff) 50%, transparent); }
.tn-tag.done { color: var(--text); }
.tn-acts { display: flex; gap: 6px; justify-content: flex-end; }
.tn-acts .ico { width: 14px; height: 14px; }
.tn-side { position: sticky; top: 0; display: grid; gap: 10px; padding: 18px; border-radius: var(--r-lg); background: rgba(9,12,24,.8); border: 1px solid var(--line); }
.tn-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tn-table th { font: 700 11px var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: right; padding: 6px 6px; border-bottom: 1px solid var(--line); cursor: help; }
.tn-table td { text-align: right; padding: 8px 6px; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); white-space: nowrap; }
.tn-table :is(th, td):nth-child(2) { text-align: left; white-space: normal; }
.tn-table :is(th, td):first-child { text-align: left; width: 24px; }
.tn-table tr.me td { color: var(--gold); }
.tn-table tr.out td { opacity: .5; }
.tn-table tbody tr:first-child td:first-child { color: var(--gold); font-weight: 700; }
.a-series { font: 700 20px var(--f-cond); letter-spacing: .04em; margin: 0; }
.a-series b { color: var(--gold); font-size: 24px; margin: 0 2px; }
.g-tourney { display: flex; align-items: center; gap: 8px; min-width: 0; }
@media (max-width: 900px) {
  .tn-body { grid-template-columns: 1fr; padding: 14px; }
  .tn-side { position: static; }
  .tn-match { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); row-gap: 6px; }
  .tn-tbl { grid-column: 1 / -1; }
  .tn-match > .tn-tag, .tn-acts { grid-column: 1 / -1; justify-self: start; }
  .sd.tn .sd-head { padding-left: 110px; height: auto; min-height: 60px; flex-wrap: wrap; row-gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .sd.tn .sd-head h2 { font-size: 18px; }
}
.game.hand-open .hand-fan .a-card.hcard.can:not(:hover):not(.picked):not(.dragging) { translate: none; }

/* ---------- Histórico e replay (public/js/replay.js, docs/persistencia.md) ---------- */
.hist-seg { margin-left: auto; }
.hist-seg button { padding: 7px 14px; white-space: nowrap; }
.match-list { display: grid; gap: 10px; }
.match-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 8px 16px;
  padding: 12px 16px; background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r-md);
}
.match-row.live { border-color: var(--gold-deep); }
.mr-main { display: grid; gap: 2px; min-width: 0; }
.mr-main b { font: 700 16px var(--f-cond); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-main small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-res { font: 600 14px var(--f-cond); }
.match-row.live .mr-res { color: var(--gold); }
.match-row .btn .ico { width: 16px; height: 16px; }
@media (max-width: 767px) {
  .match-row { grid-template-columns: minmax(0, 1fr) auto; }
  .match-row .fmt-chip, .match-row .mr-meta { display: none; }
  .match-row .mr-res { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--muted); }
  .match-row > :last-child { grid-column: 2; grid-row: 1 / span 2; }
}

.game.replaying .hud-top { display: none; }
.replay-bar {
  position: absolute; z-index: calc(var(--z-hud) + 2); left: var(--sp-3); top: var(--sp-3); max-width: min(920px, calc(100% - 300px));
  display: grid; gap: 6px; padding: 4px 6px; border-radius: 22px;
  background: rgba(9, 12, 24, .9); border: 1px solid var(--line-strong);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5); backdrop-filter: blur(6px);
}
.rp-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rp-ctl { display: inline-flex; gap: 3px; }
.replay-bar .icon-btn { height: 30px; min-width: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; border-radius: 15px; }
.replay-bar .icon-btn .ico { width: 16px; height: 16px; }
.replay-bar .icon-btn .ico + .ico { margin-left: -9px; }
.replay-bar .icon-btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.replay-bar .rp-play { min-width: 38px; background: var(--ember-deep); border-color: var(--ember); }
.rp-title { display: grid; min-width: 0; max-width: 200px; font: 700 14px var(--f-cond); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-title small { font: 700 10px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.rp-seek { flex: 1; min-width: 80px; width: 160px; accent-color: var(--gold); }
.rp-pos { font: 600 13px var(--f-cond); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-opts { flex-wrap: wrap; padding: 2px 4px 4px; border-top: 1px solid var(--line); }
.rp-opts[hidden] { display: none; }
.rp-what { flex: 1 1 200px; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-opts select { background: var(--ink-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 6px; font: 600 13px var(--f-cond); }
.rp-check { display: inline-flex; align-items: center; gap: 4px; font: 600 13px var(--f-cond); color: var(--muted); white-space: nowrap; }
.rp-warn { font-size: 12px; color: var(--warn); background: var(--warn-bg); border-radius: var(--r-sm); padding: 4px 8px; }
.replay-list {
  position: absolute; z-index: calc(var(--z-hud) + 2); top: 120px; right: 10px; bottom: 200px; width: min(340px, calc(100% - 32px));
  display: grid; grid-template-rows: auto minmax(0, 1fr); background: rgba(9, 12, 24, .96);
  border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
}
.replay-list[hidden] { display: none; }
.replay-list header { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.rp-items { overflow-y: auto; padding: 0 6px 10px; }
.rp-items h4 { position: sticky; top: 0; background: rgba(9, 12, 24, .98); font: 700 12px var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding: 8px 4px 4px; }
.rp-item { display: block; width: 100%; text-align: left; appearance: none; border: 0; background: none; color: var(--text); font-size: 13px; line-height: 1.35; padding: 5px 6px; border-radius: var(--r-sm); cursor: pointer; }
.rp-item:hover { background: var(--ink-3); }
.rp-item.current { background: var(--ink-3); box-shadow: inset 2px 0 0 var(--gold); }
@media (max-width: 1100px) {
  .rp-title { display: none; }
  /* Tela estreita: a barra fica na metade da esquerda (o oponente fica no meio do topo), em duas linhas. */
  .replay-bar { max-width: calc(50% - 56px); }
  .rp-main { flex-wrap: wrap; }
  .rp-seek { order: 9; flex: 1 1 calc(100% - 70px); }
  .rp-pos { order: 10; }
}
/* No replay da mesa livre, só se assiste: sem botões de jogar. */
.game.replaying :is(#g-cta, #g-selbar, #g-dock [data-dock=tokens], #g-dock [data-dock=dice], #g-dock [data-dock=untap], #g-dock hr) { display: none; }
@media (max-width: 767px) {
  .replay-bar { left: 8px; right: 8px; max-width: none; top: 8px; }
  .rp-main { flex-wrap: wrap; }
  .rp-seek { order: 9; flex-basis: 100%; }
  .rp-pos { display: none; }
  .replay-bar .icon-btn { height: 28px; min-width: 26px; }
  .replay-list { top: 96px; bottom: 110px; right: 8px; }
}

/* Replay do draft (public/js/draftReplay.js) */
.draft-replay .sd { overflow: hidden; }
.drr-head { padding-left: 16px; }
.drr-head .rp-exit { flex: none; height: 32px; min-width: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; }
.dr-seat.locked { opacity: .45; }
.dr-seat[data-seat] { cursor: pointer; }
.drr-bar { position: static; transform: none; margin: 12px 24px 0; max-width: 760px; }
.drr-bar select { background: var(--ink-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 6px; font: 600 13px var(--f-cond); }
.drr-warn { margin: 8px 24px 0; }
.drr-grid .sd-card { transition: opacity var(--dur-fast), transform var(--dur-fast); }
.drr-grid .sd-card:not(.chosen) { opacity: .62; }
.drr-grid .sd-card.chosen { opacity: 1; transform: translateY(-4px); box-shadow: 0 0 0 3px var(--gold), 0 10px 22px rgba(0, 0, 0, .6); }
.dr-row[data-go] { appearance: none; border: 0; width: 100%; text-align: left; color: var(--text); cursor: pointer; }
.drr-pool { margin-top: 12px; }
.drr-chips { display: flex; flex-wrap: wrap; gap: 4px; max-height: 30%; overflow-y: auto; }
.drr-chips span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 6px; background: var(--ink-1); font: 600 12px var(--f-cond); }
.drr-chips .ms { font-size: 12px; margin: 0; }
.hist-drafts { margin-top: 28px; }

/* ---------- Admin: regras geradas (docs/regras-automaticas.md) ---------- */
.ra-row { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.ra-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ra-notes { grid-column: 1 / -1; margin: 0; padding: 8px 10px; background: var(--ink-0); border-radius: var(--r-sm); color: var(--muted); font: 12px/1.45 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; }
.ra-json { width: 100%; min-height: 320px; font: 12px/1.45 ui-monospace, monospace; background: var(--ink-0); color: inherit; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; resize: vertical; }
@media (max-width: 767px) {
  .ra-row { grid-template-columns: minmax(0, 1fr); }
  .ra-row .ra-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}

/* ---------- Admin: contas (aprovação dos cadastros) ---------- */
.acc-badge {
  margin-left: 6px; min-width: 18px; padding: 1px 5px; border-radius: var(--r-pill); background: var(--ember); color: var(--gold-ink);
  font: 700 11px/16px var(--f-body); letter-spacing: 0; text-align: center;
}
.acc-badge[hidden] { display: none; }
.acc-search {
  width: 100%; max-width: 360px; margin: 0 0 12px; padding: 8px 12px; background: var(--ink-1); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit;
}
.acc-row .mr-meta { line-height: 1.35; text-align: right; }
.acc-row .mr-main b .fmt-chip { font: 600 11px var(--f-cond); padding: 1px 6px; border-radius: var(--r-pill); vertical-align: 2px; }
.acc-pending { color: var(--warn); }
.acc-approved { color: var(--ok); }
.acc-rejected, .acc-blocked { color: var(--blood); }
@media (max-width: 767px) {
  .acc-row .mr-meta { display: none; }
}

/* Mão com a ampliação do campo (zoomIn em anim.js, classe zoomfx): a carta sob o mouse não sobe nem cresce por CSS —
   quem amplia é a cópia por cima — e fica parada no leque, sem fugir do ponteiro. As que podem ser jogadas continuam
   um pouco acima. */
.arena .hand-fan.zoomfx.zoomfx .hcard:hover { rotate: clamp(-8deg, calc(var(--m) * 2.5deg), 8deg); translate: 0 calc(var(--m) * var(--m) * 1.5px); scale: 1; z-index: calc(10 + var(--i)); }
.arena .hand-fan.zoomfx.zoomfx .a-card.hcard.can:hover:not(.picked) { translate: 0 calc(var(--m) * var(--m) * 1.5px - 14px); }
.arena .hand-fan.zoomfx.zoomfx .a-card.hcard.picked:hover { translate: 0 calc(var(--m) * var(--m) * 3px - 34px); }
.hand-fan.zoomfx .hcard:hover ~ .hcard, .hand-fan.zoomfx .hcard:has(~ .hcard:hover) { --push: 0px; }
.hand-fan.zoomfx .hcard:hover::after { content: none; }
/* Escolha do bot: resumo e pontos fortes/fracos do nível (hud.js, botAbout) */
.bot-about { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-3); text-transform: none; letter-spacing: normal; font: 400 14px/1.4 var(--f-body); color: inherit; }
.bot-about p { margin: 0; }
.bot-about-head { display: flex; gap: 8px; align-items: center; }
.bot-about-sum { color: var(--muted); }
.bot-about-ins { font-size: 13px; font-style: italic; color: var(--muted); }
.bot-about-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.bot-about-cols b { font: 600 12px var(--f-cond); letter-spacing: .12em; text-transform: uppercase; }
.bot-about ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.bot-pros b { color: var(--ok); }
.bot-cons b { color: var(--danger); }
.sd-bot-wrap { display: grid; gap: 8px; }