/* 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; }