/* Cinematic effects for the original tavern table. The motion director owns
   transient geometry and timing; these layers supply light, fire and texture. */
:root {
  --motion-gold: #f7d889;
  --motion-ember: #ff832d;
  --motion-emerald: #87edbc;
  --motion-ease: cubic-bezier(.18, .78, .24, 1);
}

.fx-layer,
.gwent-fx-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  overflow: clip;
  pointer-events: none !important;
  contain: layout style;
}
.fx-layer *,
.gwent-fx-layer * {
  pointer-events: none !important;
  user-select: none;
}
.fx-flight,
.fx-particle,
.fx-row-flash,
.fx-weather-sweep,
.fx-score,
.fx-score-pop,
.fx-flash,
.fx-life-burst,
.fx-round-banner {
  position: absolute;
  margin: 0;
  pointer-events: none !important;
}
.fx-flight.game-card {
  display: block;
  max-width: none !important;
  min-width: 0 !important;
  max-height: none !important;
  flex: none !important;
  border-color: #e4c889;
  box-shadow: 0 0 0 1px #2b190e, 0 10px 24px #000b,
    0 0 18px #e7be5940;
  transform-origin: center;
  transition: none !important;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.fx-flight::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(125deg, #fff2c21a, transparent 40%, #170b0040);
}
.fx-flight.fx-revive {
  border-color: #baffdd;
  box-shadow: 0 0 0 1px #183e2d, 0 0 22px #6ef1b781, 0 9px 22px #0009;
}
.fx-flight.fx-transform {
  border-color: #d6bf87;
  box-shadow: 0 0 0 1px #492b18, 0 0 24px #b2c86d66, 0 9px 22px #000a;
}
.fx-flight.fx-spy {
  border-color: #b8dced;
  box-shadow: 0 0 0 1px #253c43, 0 0 20px #9adbed57, 0 10px 25px #000b;
}
.fx-flight.fx-muster,
.fx-flight.fx-deal {
  box-shadow: 0 0 0 1px #463323, 0 0 12px #edd18745, 0 12px 24px #000a;
}
.fx-flight.fx-decoy {
  border-color: #d7c8a2;
  box-shadow: 0 0 0 1px #423722, 0 0 15px #e7d49b45, 0 12px 25px #000a;
}

/* Scorch burns through the face, with white-hot tongues below dark ash. */
.fx-flight.fx-scorch,
.fx-scorch-card {
  border-color: #ffce75;
  box-shadow: 0 0 0 1px #88321c, 0 0 18px #ff662ac4,
    0 0 35px #f43b164c, 0 10px 22px #000b;
}
.fx-flames,
.fx-scorch-flame {
  position: absolute;
  inset: -14% -8% -9%;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 106%, #fff7cc 0%,
    #ffcf55 17%, #ff682bb3 34%, #bc201940 55%, transparent 72%);
}
.fx-flames::before,
.fx-flames::after {
  content: '';
  position: absolute;
  inset: 0;
  transform-origin: bottom;
  pointer-events: none;
  background: linear-gradient(0deg, #fff8df 2%, #ffdc77 15%,
    #ff8b2d 35%, #d9341880 67%, transparent 90%);
  clip-path: polygon(0 100%, 0 65%, 9% 42%, 15% 68%, 21% 18%,
    31% 58%, 38% 8%, 44% 40%, 50% 0, 58% 56%, 67% 20%,
    73% 64%, 81% 33%, 86% 64%, 95% 14%, 100% 76%, 100% 100%);
  animation: fx-fire-lick .28s ease-in-out infinite alternate;
}
.fx-flames::after {
  inset: 13% -9% -5%;
  opacity: .75;
  animation-duration: .39s;
  animation-delay: -.17s;
  background: linear-gradient(0deg, #fffde9 5%, #ffc04f 35%,
    #f7632040 80%, transparent);
  clip-path: polygon(0 100%, 5% 40%, 15% 71%, 27% 10%,
    37% 63%, 49% 29%, 57% 76%, 70% 3%, 76% 67%, 89% 37%,
    99% 61%, 100% 100%);
}
.fx-ash-mask {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(ellipse at 25% 74%, #070302 0%,
    #24100aee 20%, transparent 46%),
    radial-gradient(ellipse at 73% 40%, #160804f2 0%, transparent 57%),
    linear-gradient(0deg, #170802f2, transparent 88%);
  mix-blend-mode: multiply;
}

/* Particles remain small composited elements; WAAPI moves and retires them. */
.fx-particle {
  --fx-size: 5px;
  width: var(--fx-size);
  height: var(--fx-size);
  border-radius: 50%;
  background: var(--fx-color, #e7c16e);
  will-change: transform, opacity;
}
.fx-ember,
.fx-spark {
  background: radial-gradient(circle at 35% 30%, #fff9d9 0%,
    #ffc154 27%, #f45f25 62%, #b52913 100%);
  box-shadow: 0 0 5px #ff972ad9, 0 0 10px #ef542552;
}
.fx-flame {
  width: calc(var(--fx-size) * .75);
  height: calc(var(--fx-size) * 2.3);
  border-radius: 75% 15% 65% 35%;
  background: linear-gradient(0deg, #fff5c6, #ffac36 35%, #ee54246e 72%, transparent);
  box-shadow: 0 0 8px #fd7b3855;
  transform-origin: center bottom;
  mix-blend-mode: screen;
}
.fx-ash {
  border-radius: 1px;
  background: linear-gradient(135deg, #b0a08a, #4e4135 55%, #211b16);
  box-shadow: 0 0 2px #f3a56030;
}
.fx-gold {
  background: radial-gradient(circle, #fffbe3 12%, #f5d285 45%, #bd853c 100%);
  box-shadow: 0 0 6px #f5d781b3, 0 0 12px #d7a55740;
}
.fx-snow,
.fx-frost {
  background: radial-gradient(circle, #fff 0%, #d4edff 35%, #8bb6d080 76%, transparent);
  box-shadow: 0 0 4px #d5f1ff88;
}
.fx-rain {
  width: max(1px, calc(var(--fx-size) * .18));
  height: calc(var(--fx-size) * 3.5);
  border-radius: 50%;
  background: linear-gradient(0deg, #e7f5ffd4, #95bdd96b, transparent);
  box-shadow: 0 0 2px #d0e7fa44;
}
.fx-smoke {
  width: calc(var(--fx-size) * 3);
  height: calc(var(--fx-size) * 2.5);
  border-radius: 50%;
  background: radial-gradient(ellipse, #b8b8a75c, #67715c38 45%, transparent 72%);
  box-shadow: none;
}
.fx-trail {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent,
    var(--fx-color, #f3cf76b3), #ffefb99c, transparent);
  mix-blend-mode: screen;
}

/* Horn light travels across the entire row. Emerald rings mark resurrection. */
.fx-row-flash,
.fx-weather-sweep {
  overflow: hidden;
  border-radius: 2px;
  box-shadow: inset 0 0 14px var(--fx-color, #f5d59077);
  background: linear-gradient(90deg, transparent, #f6d37a2b 45%, transparent);
}
.fx-row-flash.fx-horn {
  border-top: 1px solid #ffe9a4b3;
  border-bottom: 1px solid #eac57788;
  box-shadow: inset 0 0 17px #e5b54c4d, 0 0 10px #f0cc7540;
  background: linear-gradient(90deg, #f2c06a0d, #ffdf852e, #f2c06a0d);
}
.fx-row-wave,
.fx-horn-wave {
  position: absolute;
  inset: -25% 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 12%, #f6d68116 27%,
    #ffdf8688 43%, #fff9d7e8 49%, #f5d08570 54%, transparent 73%);
  mix-blend-mode: screen;
}
.fx-flash,
.fx-ring {
  border-radius: 50%;
  border: 1px solid var(--fx-color, #f5d589);
  box-shadow: 0 0 10px var(--fx-color, #f0bf6580),
    inset 0 0 10px var(--fx-color, #e7be6659);
  background: radial-gradient(ellipse, transparent 27%,
    #fff8d229 40%, transparent 62%);
  mix-blend-mode: screen;
}
.fx-flash::before,
.fx-ring::before {
  content: '';
  position: absolute;
  inset: 13%;
  border: 1px solid var(--fx-color, #f8e4ad8f);
  border-radius: inherit;
  pointer-events: none;
}
.fx-flash[data-effect="revive"],
.fx-ring[data-effect="revive"],
.fx-flash.fx-revive {
  --fx-color: #83f2bd;
  background: radial-gradient(ellipse, #8eebbc14 20%, #9ff6cc4d 48%, transparent 70%);
  box-shadow: 0 0 16px #76e9b29e, inset 0 0 12px #b0ffe657;
}
.fx-flash[data-effect="transform"],
.fx-ring[data-effect="transform"] {
  --fx-color: #b9ce7e;
  background: radial-gradient(ellipse, #d4ef9929 5%, #aac06627 45%, transparent 72%);
}

.fx-weather-sweep[data-effect="frost"] {
  --fx-color: #c4e8ff85;
  background: linear-gradient(100deg, transparent 10%, #8ac0e548 38%,
    #effaffb3 52%, #a0cfe849 62%, transparent 84%);
}
.fx-weather-sweep[data-effect="fog"] {
  --fx-color: #b3c8b05c;
  background: radial-gradient(ellipse at 25% 60%, #d9e2c85c, transparent 52%),
    radial-gradient(ellipse at 70% 40%, #dee6d070, transparent 55%);
}
.fx-weather-sweep[data-effect="rain"],
.fx-weather-sweep[data-effect="storm"] {
  --fx-color: #86b4d076;
  background: repeating-linear-gradient(110deg, transparent 0 15px,
    #dcefff3b 16px, transparent 18px 34px),
    linear-gradient(90deg, transparent, #749bc638, transparent);
}
.fx-weather-sweep[data-effect="clear"] {
  --fx-color: #ffe6a0a8;
  background: linear-gradient(105deg, transparent 15%, #ffdc6e1a 37%,
    #fff3bba8 50%, #ffdf7a28 64%, transparent 85%);
  box-shadow: inset 0 0 18px #ffe9a553;
  mix-blend-mode: screen;
}

.fx-score,
.fx-score-pop {
  z-index: 7;
  min-width: 2ch;
  color: var(--fx-color, #ffe9a8);
  font: bold clamp(18px, 2.4vw, 35px)/1 Georgia, 'Times New Roman', serif;
  text-align: center;
  letter-spacing: -.035em;
  white-space: nowrap;
  text-shadow: 0 2px 2px #080400, 1px 0 1px #26140c,
    -1px 0 1px #26140c, 0 0 13px var(--fx-color, #e9b95599);
}
.fx-score[data-negative="true"],
.fx-score[data-kind="loss"],
.fx-score.negative {
  --fx-color: #ffa08b;
}
.fx-life-burst {
  border-radius: 50%;
  background: radial-gradient(circle, #ffe6de 0%, #fa8b7990 9%,
    #e7403842 25%, transparent 66%);
  box-shadow: 0 0 13px #e86b5e51;
  mix-blend-mode: screen;
}
.fx-round-banner {
  color: #ffebbb;
  max-width: calc(100vw - 28px);
  padding: 15px 38px;
  border-top: 1px solid #eac8839c;
  border-bottom: 1px solid #b68f4a9c;
  background: linear-gradient(90deg, transparent, #130c07eb 15%,
    #30200fef 50%, #130c07eb 85%, transparent);
  font: 24px/1.2 Georgia, 'Times New Roman', serif;
  letter-spacing: .15em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 3px #000, 0 0 12px #eed09673;
  box-shadow: 0 10px 25px #0005;
}

/* The persistent weather has visible motion while preserving the source art. */
.weather-overlay {
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}
.weather-overlay::before,
.weather-overlay::after {
  content: '';
  position: absolute;
  inset: -30% -20%;
  pointer-events: none;
}
.weather-overlay[data-effect="frost"]::before {
  opacity: .7;
  background-image: radial-gradient(circle at 8% 22%, #e4f6ffbd 0 1px, transparent 2px),
    radial-gradient(circle at 29% 61%, #e4f6ff91 0 1px, transparent 2px),
    radial-gradient(circle at 48% 15%, #e4f6ffa8 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 76% 46%, #d9efff9e 0 1px, transparent 2px),
    radial-gradient(circle at 91% 82%, #e4f6ffbd 0 1px, transparent 2px);
  background-size: 130px 75px;
  animation: fx-snow-drift 5s linear infinite;
}
.weather-overlay[data-effect="frost"]::after {
  background: linear-gradient(0deg, #d7efff22, transparent 55%),
    linear-gradient(90deg, #def5ff22, transparent 22%, transparent 77%, #c8e8fb1c);
  animation: fx-ice-shimmer 4s ease-in-out infinite alternate;
}
.weather-overlay[data-effect="fog"]::before {
  background: radial-gradient(ellipse at 16% 75%, #d7decc58, transparent 48%),
    radial-gradient(ellipse at 66% 38%, #b8c7b84d, transparent 47%);
  animation: fx-fog-drift 7s ease-in-out infinite alternate;
}
.weather-overlay[data-effect="fog"]::after {
  background: radial-gradient(ellipse at 76% 76%, #e4e9d530, transparent 45%),
    radial-gradient(ellipse at 32% 25%, #bcc8b13d, transparent 43%);
  animation: fx-fog-drift 9s ease-in-out -3s infinite alternate-reverse;
}
.weather-overlay[data-effect="rain"]::before,
.weather-overlay[data-effect="storm"]::before {
  opacity: .6;
  background: repeating-linear-gradient(110deg, transparent 0 15px,
    #d6ecff66 16px, transparent 17px 29px);
  background-size: 83px 43px;
  animation: fx-rain-fall .8s linear infinite;
}
.weather-overlay[data-effect="rain"]::after,
.weather-overlay[data-effect="storm"]::after {
  background: linear-gradient(0deg, #99bde52c, transparent 65%);
  animation: fx-ice-shimmer 3s ease-in-out infinite alternate;
}
.weather-overlay[data-effect="storm"]::after {
  background: radial-gradient(ellipse at 50% 50%, #d8eaff28, transparent 70%);
  animation: fx-storm-glint 7.8s linear infinite;
}

/* Interaction detail: cards feel physical; brass catches the firelight. */
.game-card {
  transition: transform .23s var(--motion-ease), filter .23s ease,
    box-shadow .23s ease, border-color .23s ease;
}
.hand-cards .game-card {
  transform-origin: 50% 90%;
}
.hand-cards .game-card.selected {
  transform: translateY(-13%) scale(1.025);
  border-color: #ffdf87;
  box-shadow: 0 0 0 2px #b9914c, 0 0 16px #e8b96769, 0 9px 12px #0009;
  filter: brightness(1.1);
}
.game-card.hero::before {
  content: '';
  position: absolute;
  inset: -10% -60%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, #ffe4a70a 42%,
    #fff4cf35 49%, #fff1b912 54%, transparent 64%);
  transform: translateX(-65%);
  animation: fx-hero-gleam 7s ease-in-out infinite;
}
.game-card.hero:nth-child(2n)::before { animation-delay: -2.5s; }
.game-card.hero:nth-child(3n)::before { animation-delay: -4.6s; }
.game-card.fx-flight.hero::before { animation: none; opacity: .25; }
.game-card.targetable {
  border-color: #eed08a;
  box-shadow: 0 0 0 1px #e9ca76, 0 0 14px #edcc7061;
}
.combat-row.playable .row-hit {
  transition: background-color .2s ease, box-shadow .2s ease;
  animation: fx-target-breathe 2.3s ease-in-out infinite;
}
.tavern-glow {
  animation: fx-tavern-flicker 7s ease-in-out infinite alternate;
}
.quiet-button,
.brass-button,
.outline-button,
.text-button,
.selection-strip button,
.faction-tab,
.copy-controls button,
.dialog-close {
  transition: transform .2s var(--motion-ease), color .2s ease,
    border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.brass-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 2px #382617, inset 0 0 0 3px #c69b5166,
    0 4px 10px #0007, 0 0 13px #bd8a3138;
}
.brass-button:active:not(:disabled),
.outline-button:active:not(:disabled),
.quiet-button:active:not(:disabled) {
  transform: translateY(1px);
}
.parchment-dialog[open] {
  animation: fx-dialog-arrive .38s var(--motion-ease) both;
}
.parchment-dialog[open]::backdrop {
  animation: fx-backdrop-arrive .3s ease both;
}
.result-dialog[open] .dialog-ornament {
  animation: fx-result-ornament .7s var(--motion-ease) both;
}
.result-dialog[open] h2 {
  animation: fx-result-title .6s .08s var(--motion-ease) both;
}

@media (hover: hover) and (pointer: fine) {
  .hand-cards .game-card:hover:not(.selected) {
    transform: translateY(-9%) rotate(-1deg) scale(1.025);
    border-color: #e4c688;
    box-shadow: 0 0 0 1px #c3a365, 0 8px 14px #0009, 0 0 11px #d7b05c45;
    z-index: 8;
  }
  .hand-cards .game-card.selected:hover {
    transform: translateY(-15%) scale(1.035);
    z-index: 9;
  }
  .collection-card:hover,
  .mulligan-card:hover {
    transition: transform .2s var(--motion-ease), box-shadow .2s ease;
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px #d2b97a, 0 6px 14px #0008;
  }
}

@keyframes fx-fire-lick {
  from { transform: scaleY(.84) skewX(-3deg); opacity: .77; }
  to { transform: scaleY(1.08) skewX(4deg); opacity: 1; }
}
@keyframes fx-snow-drift {
  from { transform: translate(-8px, -18px); }
  to { transform: translate(20px, 17px); }
}
@keyframes fx-fog-drift {
  from { transform: translateX(-5%) scale(1); opacity: .5; }
  to { transform: translateX(6%) scale(1.04); opacity: .95; }
}
@keyframes fx-rain-fall {
  from { transform: translate(5px, -12px); }
  to { transform: translate(-10px, 18px); }
}
@keyframes fx-ice-shimmer {
  from { opacity: .35; }
  to { opacity: .85; }
}
@keyframes fx-storm-glint {
  0%, 46%, 50%, 57%, 100% { opacity: .15; }
  47%, 54% { opacity: .8; }
  48%, 55% { opacity: .3; }
}
@keyframes fx-hero-gleam {
  0%, 62% { transform: translateX(-65%); opacity: 0; }
  67% { opacity: .65; }
  83% { transform: translateX(65%); opacity: .55; }
  85%, 100% { transform: translateX(65%); opacity: 0; }
}
@keyframes fx-target-breathe {
  0%, 100% { box-shadow: inset 0 0 15px #dbbe5a18; }
  50% { box-shadow: inset 0 0 19px #dbbe5a3b; }
}
@keyframes fx-tavern-flicker {
  0%, 100% { opacity: .7; }
  24% { opacity: .92; }
  53% { opacity: .78; }
  77% { opacity: 1; }
}
@keyframes fx-dialog-arrive {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fx-backdrop-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fx-result-ornament {
  from { opacity: 0; transform: scale(.5) rotate(-25deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes fx-result-title {
  from { opacity: 0; transform: translateY(9px); letter-spacing: .09em; }
  to { opacity: 1; transform: translateY(0); letter-spacing: normal; }
}

@media (max-width: 700px) {
  .hand-cards .game-card.selected {
    transform: translateY(-3%);
    box-shadow: inset 0 0 0 1px #f8dc95, 0 0 6px #d9b76973;
  }
  .fx-flight.game-card {
    box-shadow: 0 0 0 1px #be9b58, 0 5px 10px #000a;
  }
  .fx-flight.fx-scorch { box-shadow: 0 0 12px #ff753895; }
  .fx-flame { box-shadow: none; }
  .fx-ember, .fx-spark, .fx-gold { box-shadow: 0 0 4px #ffc7777a; }
  .fx-score, .fx-score-pop { font-size: 21px; }
  .fx-round-banner { font-size: 17px; padding: 11px 20px; letter-spacing: .09em; }
  .weather-overlay[data-effect="frost"]::before { background-size: 180px 100px; }
  .weather-overlay[data-effect="fog"]::after { display: none; }
  .weather-overlay[data-effect="rain"]::before,
  .weather-overlay[data-effect="storm"]::before {
    opacity: .42;
    background-size: 110px 56px;
    animation-duration: 1.15s;
  }
  .game-card.hero::before { animation-duration: 9s; }
  .parchment-dialog[open] { animation-duration: .28s; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-layer, .gwent-fx-layer { display: none !important; }
  .weather-overlay,
  .weather-overlay::before,
  .weather-overlay::after,
  .game-card.hero::before,
  .combat-row.playable .row-hit,
  .tavern-glow,
  .parchment-dialog[open],
  .parchment-dialog[open]::backdrop,
  .result-dialog[open] .dialog-ornament,
  .result-dialog[open] h2 {
    animation: none !important;
  }
  .game-card.hero::before { opacity: 0; }
  .hand-cards .game-card:hover,
  .hand-cards .game-card.selected,
  .hand-cards .game-card.selected:hover,
  .collection-card:hover,
  .mulligan-card:hover,
  .brass-button:hover:not(:disabled),
  .brass-button:active:not(:disabled),
  .outline-button:active:not(:disabled),
  .quiet-button:active:not(:disabled) {
    transform: none !important;
  }
}