/* Table background (original: deep-sea slate, no Arena assets) */
#board { background:
  radial-gradient(ellipse 70% 50% at 50% 50%, rgba(60, 120, 170, 0.20), transparent 70%),
  radial-gradient(ellipse 120% 80% at 50% 120%, #10314a 0%, transparent 60%),
  radial-gradient(ellipse 120% 80% at 50% -20%, #1c2140 0%, transparent 60%),
  linear-gradient(180deg, #0d1426 0%, #0b1a2c 50%, #0a2236 100%); }
.board-half { position: absolute; left: 190px; right: 300px; border-radius: 28px; }
.board-opp { top: 130px; height: 300px; background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(120,90,200,0.05)); box-shadow: inset 0 0 0 1px rgba(170,150,255,0.06); }
.board-you { top: 470px; height: 300px; background: linear-gradient(0deg, rgba(255,255,255,0.015), rgba(60,160,220,0.06)); box-shadow: inset 0 0 0 1px rgba(120,200,255,0.07); }
.board-line { position: absolute; left: 230px; right: 340px; top: 449px; height: 2px; background: linear-gradient(90deg, transparent, rgba(126,240,255,0.35), transparent); }

/* Table cards: motion-api owns the wrapper transform; the face fills it */
.tcard { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; pointer-events: auto; cursor: pointer; }
.tcard-inner { position: absolute; inset: 0; border-radius: 6.5%; }
.tcard-inner > * { width: 100%; height: 100%; }
.tcard.is-dragging { pointer-events: none; cursor: grabbing; }
.tcard[data-zone="hand"] { cursor: grab; }
/* Rings for playable/target/selected/attacking/blocking are the motion engine's ([data-mo-glow]::after,
   pop on enter, slow breathe; web/motion/motion.css). B's .tcard-glow only draws the 'source' cue now. */
.tcard-glow { position: absolute; inset: -5px; border-radius: 10px; opacity: 0; pointer-events: none;
  transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1); }
.tcard.hl-source .tcard-glow { opacity: 1; box-shadow: 0 0 0 2px rgba(255,214,120,0.8), 0 0 18px 4px rgba(255,200,90,0.4); }
@keyframes pulse-ring { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
/* countered spell: static desaturation while it shakes and leaves the stack (no filter animation) */
.tcard.fx-counter .tcard-inner { filter: grayscale(0.7) brightness(0.8); }
#stage.drop-armed .board-you, #stage.drop-armed .board-opp { box-shadow: inset 0 0 0 2px rgba(89,183,255,0.45), inset 0 0 60px rgba(89,183,255,0.15); }

/* fallback card face (used only without web/cards) */
.fb-card { position: relative; width: 100%; height: 100%; border-radius: 7px; overflow: hidden; font-size: 10px; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #2a6f9c, #12385a); border: 3px solid #0c1a28; color: #0d1b26; box-shadow: 0 4px 10px rgba(0,0,0,0.45); }
.fb-card.fb-land { background: linear-gradient(160deg, #b9a27a, #6f5b3c); }
.fb-head { display: flex; justify-content: space-between; align-items: center; background: #dfeaf2; margin: 4px; padding: 2px 4px; border-radius: 3px; font-weight: 700; font-size: 1.05em; }
.fb-art { flex: 0 0 38%; margin: 0 6px; border-radius: 2px; background: radial-gradient(circle at 30% 30%, #9fdcff, #1f5f8a 60%, #0d2b45); }
.fb-type { background: #dfeaf2; margin: 4px; padding: 1px 4px; border-radius: 3px; font-size: 0.9em; font-weight: 600; }
.fb-text { flex: 1; background: #eef3f6; margin: 0 6px 6px; padding: 3px 4px; border-radius: 2px; font-size: 0.82em; line-height: 1.2; overflow: hidden; }
.fb-text mark { background: #ffe08a; padding: 0 1px; }
.fb-pt { position: absolute; right: 5px; bottom: 5px; background: #dfeaf2; border-radius: 3px; padding: 0 5px; font-weight: 800; font-size: 1.3em; }
.fb-pt.fb-damaged { color: #c0262d; }
.fb-pip { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; background: #9fd6ea; color: #0a2c47; font-style: normal; font-weight: 800; font-size: 0.85em; margin-left: 1px; }
.fb-pip-n, .fb-pip-C { background: #d9d0bf; }
.fb-back { background: radial-gradient(circle at 50% 45%, #2e7fb5 0%, #0f3a5e 45%, #081a2c 100%); border-color: #04101c; }
.fb-back-mark { position: absolute; inset: 18%; border-radius: 50%; border: 3px solid rgba(160,220,255,0.5); }
.fb-sick { position: absolute; left: 6px; bottom: 6px; background: #fff; border-radius: 50%; width: 1.6em; height: 1.6em; display: grid; place-items: center; font-weight: 800; }

/* floating numbers / text */
.float-text { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 34px; color: #ffefe6; text-shadow: 0 2px 0 #7a1010, 0 0 14px rgba(255,60,60,0.8); pointer-events: none; white-space: nowrap; }
.float-text.text-change { font-size: 18px; color: #fff3c4; text-shadow: 0 1px 0 #3d2c00, 0 0 10px rgba(255,200,80,0.7); }
/* content of the motion engine's rollover zoom (fills its sized box) */
.zoom-mo-content { width: 100%; height: 100%; }
.zoom-mo-content > * { width: 100%; height: 100%; }
/* PROTOCOL v1.5 intention arrows: a target of the shown stack item glows in its controller's colour.
   Sizes and colours come from app/intention-style.js (CSS vars set by app/intentions.js). */
.tcard.targeted .tcard-glow, .avatar-ring.targeted {
  box-shadow: 0 0 0 var(--intent-ring, 3px) var(--intent-glow, rgba(255,120,50,0.95)),
              0 0 var(--intent-blur, 22px) var(--intent-spread, 6px) var(--intent-glow-soft, rgba(255,110,40,0.45));
}
.tcard.targeted .tcard-glow { opacity: 1; animation: intent-breathe var(--intent-pulse, 1.4s) ease-in-out infinite; }
@keyframes intent-breathe { 0%, 100% { opacity: 1; } 50% { opacity: var(--intent-pulse-min, 0.6); } }
@media (prefers-reduced-motion: reduce) { .tcard.targeted .tcard-glow { animation: none; } }
.mo-reduced .tcard.targeted .tcard-glow { animation: none; }
/* PROTOCOL v1.6: changed basic land type (Magical Hack / Crystal Spray) stays legible on the battlefield */
.tcard-type-badge { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); z-index: 2; pointer-events: none; white-space: nowrap;
  padding: 3px 10px; border-radius: 14px; font-size: 19px; font-weight: 700; color: #fff3c4; background: rgba(40,24,0,0.88);
  border: 1px solid rgba(255,200,80,0.8); box-shadow: 0 0 8px rgba(255,190,70,0.45); display: inline-flex; align-items: center; gap: 3px; }
.tcard-type-badge svg { width: 20px; height: 20px; }
.tcard-type-badge i { font-style: normal; font-size: 14px; opacity: 0.8; }
.tcard[data-zone="hand"] .tcard-type-badge, .tcard[data-zone="stack"] .tcard-type-badge { display: none; }

/* PROTOCOL v1.7 (F): invalid click flash on a card */
.tcard.flash-invalid .tcard-glow { opacity: 1; box-shadow: 0 0 0 2px rgba(255,70,60,0.9), 0 0 16px 4px rgba(255,60,40,0.45); transition: none; }
@media (prefers-reduced-motion: no-preference) { .tcard.flash-invalid > :not(.tcard-glow) { animation: flash-nudge 0.32s ease-out; } }
@keyframes flash-nudge { 0%, 100% { translate: 0 0; } 25% { translate: -4px 0; } 50% { translate: 4px 0; } 75% { translate: -2px 0; } }
/* v1.7 (F): identical lands stacked in one slot, xN on the top card */
.tcard-stack-badge { position: absolute; right: -8px; top: -10px; z-index: 3; min-width: 30px; padding: 2px 7px; border-radius: 12px; text-align: center;
  font: 800 20px/1.2 system-ui, sans-serif; color: #fff; background: rgba(8,18,30,0.92); border: 2px solid rgba(160,210,245,0.8); box-shadow: 0 2px 8px rgba(0,0,0,0.5); pointer-events: none; }

/* 3-4 seats: Agent T's tilted table (web/table) under the cards (app/table-stage.js). F styles the seat surfaces only. */
#table-mount { position: absolute; inset: 0; pointer-events: none; }
body.table-tilt #board .board-half, body.table-tilt #board .board-line { display: none; }
#table-mount .tbl-seat { border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(120,170,230,0.05));
  box-shadow: inset 0 0 0 1px rgba(150,200,255,0.10); transition: box-shadow 300ms ease; }
#table-mount .tbl-seat.tbl-pos-bottom { background: linear-gradient(0deg, rgba(255,255,255,0.015), rgba(60,160,220,0.07)); }
#table-mount .tbl-seat.is-active { box-shadow: inset 0 0 0 2px rgba(241,196,107,0.45), 0 0 30px rgba(241,196,107,0.12); }
#table-mount .tbl-zone { border-radius: 10px; }
#table-mount .tbl-zone-lands, #table-mount .tbl-zone-other { background: rgba(255,255,255,0.015); }
#table-mount .tbl-centre { border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(150,200,255,0.06); }
.avatar.is-plate { transition: left 450ms cubic-bezier(0.23,1,0.32,1), top 450ms cubic-bezier(0.23,1,0.32,1), width 450ms, height 450ms; }
/* 3-4 seats: an avatar fills its seat plate (web/table zoneRect 'plate'): ring left, name / counts / chips right */
.avatar.is-plate, .avatar.is-plate.is-compact { transform: none; box-sizing: border-box; display: grid; grid-template-columns: var(--ring, 56px) minmax(0, 1fr);
  grid-auto-rows: min-content; column-gap: 8px; align-content: center; padding: 4px 8px 4px 6px; border-radius: 12px;
  background: rgba(6,14,24,0.72); border: 1px solid color-mix(in srgb, var(--seat, #8fb4d0) 55%, transparent); overflow: visible; }
.avatar.is-plate .avatar-ring, .avatar.is-plate.is-compact .avatar-ring { grid-row: 1 / span 4; width: var(--ring, 56px); height: var(--ring, 56px); padding: 3px; align-self: center; }
.avatar.is-plate .avatar-initial { font-size: calc(var(--ring, 56px) * 0.45); }
.avatar.is-plate .avatar-life, .avatar.is-plate.is-compact .avatar-life { left: calc(6px + var(--ring, 56px) / 2); top: auto; bottom: 2px; transform: translateX(-50%); font-size: 15px; min-width: 38px; padding: 0 6px; }
.avatar.is-plate .avatar-name, .avatar.is-plate.is-compact .avatar-name { margin: 0; font-size: 13px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.avatar.is-plate .avatar-meta { font-size: 11px; justify-content: flex-start; min-height: 0; flex-wrap: wrap; }
.avatar.is-plate .avatar-cmdr { justify-content: flex-start; }
.avatar.is-plate .avatar-wait { text-align: left; }
.avatar.is-plate .avatar-pool, .avatar.is-plate .avatar-pool:not(:empty) { position: static; transform: none; padding: 0; background: none; border: 0; box-shadow: none; } /* the pool joins the counts row on a plate */
.avatar.is-plate .avatar-pool svg { width: 16px; height: 16px; }
.avatar-gy { display: none; }
.avatar.is-plate .avatar-gy:not(:empty) { display: inline-flex; padding: 0 6px; border-radius: 8px; border: 1px solid rgba(160,200,235,0.4); background: rgba(255,255,255,0.05); color: var(--ink); font: 700 11px/16px system-ui, sans-serif; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .avatar.is-plate { transition: none; } }
body.table-tilt .pile .pile-label { display: none; } /* tilted table: no room under the piles; their tooltips name them */
body.table-tilt .banner { z-index: 5650; } /* the stack sits under the banner in the table centre */
/* PROTOCOL v3.2: an ability whose source is not a card (The Monarch, an emblem) carries a generic source mark */
.tcard.src-generic::after { content: ''; position: absolute; left: 50%; top: 42%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 4; pointer-events: none;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a5f78, #18222f 70%); box-shadow: 0 0 0 3px rgba(243,210,122,0.85), 0 6px 16px rgba(0,0,0,0.5);
  -webkit-mask: none; }
.tcard.src-generic::before { content: '✦'; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 5; pointer-events: none; color: #f3d27a; font: 900 34px/1 system-ui, sans-serif; text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.banner.is-beside { transform: translate(-100%, -50%); max-width: 380px; white-space: normal; text-align: right; }

/* Declare blockers (14/10): pointer arrows per pending blocker and the attacker -> blocker lines, drawn as added
   light (see app/arrow.js for the values). Other straight lines: a plain stroke (colour inline for attack lines). */
#arrows .block-arrow, #arrows .combat-line { mix-blend-mode: plus-lighter; }
#arrows .ba-glow { opacity: 0.75; filter: blur(3px); }
#arrows .ba-core { opacity: 0.95; }
#arrows .ba-head { opacity: 0.95; }
#arrows .line line { stroke: rgba(255,200,120,0.85); stroke-width: 4; stroke-linecap: round; }
#arrows .line circle { fill: rgba(255,200,120,0.95); }