html,
body {
    overflow-y: hidden !important;
	background: #000 !important;
}

body.game-page {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 85vh;
  display: flex;
  flex-direction: column;

  /* Elegant slate table background: subtle radial center light, soft vignette, and slightly warm tint */
  background-color: #02050a;
  background-image:
    radial-gradient(1200px 600px at 50% 38%, rgba(120,130,140,0.03), transparent 12%),
    linear-gradient(180deg, rgba(4,6,8,1) 0%, rgba(8,10,12,1) 18%, rgba(3,5,7,1) 100%);
  color: #e6e6e6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Soft, large vignette and textured overlay for refinement */
body.game-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background: radial-gradient(60% 50% at 50% 40%, rgba(255,255,255,0.06), transparent 25%),
              radial-gradient(40% 30% at 10% 70%, rgba(0,0,0,0.55), transparent 35%),
              radial-gradient(40% 30% at 90% 70%, rgba(0,0,0,0.55), transparent 35%);
  filter: blur(40px);
  opacity: 0.9;
}

/* Very subtle repeating grain using gradients for a tactile surface without images */
body.game-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 48px);
  opacity: 0.04;
  mix-blend-mode: overlay;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.top-panel {
  background-color: #000 !important;
  background-image: none !important;
  background: #000 !important;
  display: flex;
  justify-content: space-between;
  padding: 8px 20px;
  position: fixed;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 99999; /* ensure it's above decorative layers */
  border-bottom: none !important; /* remove segmenting line */
  box-shadow: none !important; /* remove subtle shadows that can create bands */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Ensure top-bar score numbers are the requested grey */
.top-panel .score .score-value,
#score-player,
#score-opponent {
  color: #B8B8B8 !important;
}

/* Ensure no pseudo-elements create visual bands across the top panel */
.top-panel::before, .top-panel::after { display: none !important; content: none !important; }

.game-info {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #c8c8c8; /* slightly off-white */  
}

.progress-bar {
  background-color: #555;
  border-radius: 30px;
  width: calc(100% - 40px);
  height: 16px;
  margin: 7px 20px;
  position: relative;
  overflow: hidden;
  opacity: 0;                /* start hidden */
  transition: opacity 1s ease; /* smooth fade-in */
}

.progress-bar.visible {
  opacity: 1;                /* fade to visible */
}

#progress {
  background-color: #F00;
  height: 100%;
  width: 100%;
  border-radius: 3px;
  transition: width 0.1s linear;
}

.deck-count {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
  color: #B8B8B8;
  text-shadow: 1px 1px 2px black;
}

.page-container {
  display: flex;
  justify-content: space-between;
  padding: 60px 20px 20px;
  gap: 0;
  min-height: 65vh;
  opacity: 1;

  /* Stronger, darker canvas with a straighter-edge central illumination
     so cards (with black edges) remain readable against a cool center.
  */
  background-color: transparent; /* uses body for outermost black */

  background-size: auto, 72% 56%, 100% 100%, 100% 100%;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-blend-mode: overlay, normal, multiply, multiply;
}

.page-container2 {
  display: flex;
  justify-content: space-between;
  padding: 70px 20px 20px;
  gap: 0px;
  background-color: #000; /* charcoal base */
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 2px),
    radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 2px),
    linear-gradient(0deg, rgba(0, 0, 0, 0.12) 50%, transparent 50%);
  background-size:
    8px 8px,  /* lighter speckles, more spacing */
    10px 10px, /* darker speckles, even spacing */
    100% 4px;
  background-blend-mode: normal;
  min-height: 65vh;
}

section {
  width: 45%;
}

.section-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #c8c8c8; /* slightly off-white */  
}

.card-row {
  display: flex;
  gap: 5px;
  margin-bottom: 0px;
}

/* Opponent hand — deterministic resting fan (no animation on load) */
.card-row-OPHAND-overlap { position: relative; height: 12vw; max-height: 55px; margin-bottom: 10px; }
.card-row-OPHAND-overlap .card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 5vw; height: 6vw;
  max-width: 50px; max-height: 60px;
  background-size: cover; background-position: center;
  border-radius: 8px;
  transform-origin: center center;
  transition: none !important;   /* prevent CSS animating before JS takes control */
  will-change: transform;
  /* default safe fallback */
  transform: translateX(-50%) translateY(0) rotate(0deg);
}

/* Slightly fanned resting positions (approximate; up to 11 cards) */
.card-row-OPHAND-overlap .card:nth-child(1)  { transform: translateX(calc(-50% - 12vw)) rotate(-15deg); }
.card-row-OPHAND-overlap .card:nth-child(2)  { transform: translateX(calc(-50% - 9.6vw)) rotate(-12deg); }
.card-row-OPHAND-overlap .card:nth-child(3)  { transform: translateX(calc(-50% - 7.2vw)) rotate(-9deg);  }
.card-row-OPHAND-overlap .card:nth-child(4)  { transform: translateX(calc(-50% - 4.8vw)) rotate(-6deg);  }
.card-row-OPHAND-overlap .card:nth-child(5)  { transform: translateX(calc(-50% - 2.4vw)) rotate(-3deg);  }
.card-row-OPHAND-overlap .card:nth-child(6)  { transform: translateX(calc(-50% + 0vw))    rotate(0deg);   }
.card-row-OPHAND-overlap .card:nth-child(7)  { transform: translateX(calc(-50% + 2.4vw))  rotate(3deg);   }
.card-row-OPHAND-overlap .card:nth-child(8)  { transform: translateX(calc(-50% + 4.8vw))  rotate(6deg);   }
.card-row-OPHAND-overlap .card:nth-child(9)  { transform: translateX(calc(-50% + 7.2vw))  rotate(9deg);   }
.card-row-OPHAND-overlap .card:nth-child(10) { transform: translateX(calc(-50% + 9.6vw))  rotate(12deg);  }
.card-row-OPHAND-overlap .card:nth-child(11) { transform: translateX(calc(-50% + 12vw))  rotate(15deg);  }

/* Larger-screen tweak (optional) */
@media (min-width: 768px) {
  .card-row-OPHAND-overlap .card { width:4vw; height:5vw; max-width:70px; max-height:84px; }
  .card-row-OPHAND-overlap .card:nth-child(1)  { transform: translateX(calc(-50% - 7.2vw)) rotate(-15deg); }
  .card-row-OPHAND-overlap .card:nth-child(2)  { transform: translateX(calc(-50% - 5.8vw)) rotate(-12deg); }
  .card-row-OPHAND-overlap .card:nth-child(3)  { transform: translateX(calc(-50% - 4.4vw)) rotate(-9deg);  }
  .card-row-OPHAND-overlap .card:nth-child(4)  { transform: translateX(calc(-50% - 3.0vw)) rotate(-6deg);  }
  .card-row-OPHAND-overlap .card:nth-child(5)  { transform: translateX(calc(-50% - 1.6vw)) rotate(-3deg);  }
  .card-row-OPHAND-overlap .card:nth-child(6)  { transform: translateX(calc(-50% + 0vw))    rotate(0deg);   }
  .card-row-OPHAND-overlap .card:nth-child(7)  { transform: translateX(calc(-50% + 1.6vw))  rotate(3deg);   }
  .card-row-OPHAND-overlap .card:nth-child(8)  { transform: translateX(calc(-50% + 3.0vw))  rotate(6deg);   }
  .card-row-OPHAND-overlap .card:nth-child(9)  { transform: translateX(calc(-50% + 4.4vw))  rotate(9deg);   }
  .card-row-OPHAND-overlap .card:nth-child(10) { transform: translateX(calc(-50% + 5.8vw))  rotate(12deg);  }
  .card-row-OPHAND-overlap .card:nth-child(11) { transform: translateX(calc(-50% + 7.2vw))  rotate(15deg);  }
}

/* Remove red glow/highlight for score blocks to keep UI neutral */
.top-panel .score,
.top-panel .score .content,
.score.turn-highlight,
.score.turn-highlight .content,
.score.turn-flash .content {
  box-shadow: none !important;
}

/* Ensure no pulsing border color is applied by inline/embedded rules */
@keyframes kapyle-border-pulse { from { box-shadow: none; } to { box-shadow: none; } }

/* Spaceship-style multiplier boxes */

#mult-left-box.mult-single,
#mult-right-box.mult-single,
.mult-single {
  min-width: 72px !important;
  height: 42px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 6px 14px !important;
  position: relative !important;
  overflow: visible !important;

  color: #00FF33 !important;
  font-weight: 300 !important;
  font-size: 25px !important;

  text-shadow:
    0 0 5px rgba(0,255,0,.18),
    0 0 10px rgba(0,255,0,.06) !important;

  opacity: 0.97 !important;

  background: #060606 !important;

  border-top: 2px solid #323232 !important;
  border-left: 2px solid #323232 !important;
  border-right: 2px solid #323232 !important;
  border-bottom: 0 !important;

  border-radius: 0 !important;

  box-shadow:
    0 0 3px rgba(0,0,0,.45),
    0 0 8px rgba(0,0,0,.28),
    inset 0 0 8px rgba(255,255,255,.02),
    inset 0 -3px 8px rgba(0,0,0,.35) !important;

  clip-path: polygon(
    10% 0%,
    90% 0%,
    100% 20%,
    100% 100%,
    0% 100%,
    0% 20%
  );

  -webkit-clip-path: polygon(
    10% 0%,
    90% 0%,
    100% 20%,
    100% 100%,
    0% 100%,
    0% 20%
  );

  transform-origin: center center !important;
  transition:
    transform .15s ease,
    box-shadow .15s ease !important;
}

/* Force child elements (value/suffix) to black as well */
.mult-single .mult-value,
.mult-single .mult-suffix {
  color: #00FF00 !important;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Remove any inherited overlays */
#mult-left-box.mult-single::before,
#mult-right-box.mult-single::before,
.mult-single::before {
  content: none !important;
}

/* Remove any inherited glow layers */
#mult-left-box.mult-single::after,
#mult-right-box.mult-single::after,
.mult-single::after {
  content: none !important;
}

/* Hover / active state */
.mult-single.mult-over {
  color: #262626 !important;
}

.mult-single.mult-active {
  box-shadow:
    0 0 4px rgba(76,76,76,1),
    0 0 12px rgba(76,76,76,0.7),
    0 0 20px rgba(76,76,76,0.35),
    inset 0 0 8px rgba(76,76,76,0.18) !important;

  transform: none !important;
}

/* subtle active/shudder adjustments keep existing class hooks but ensure color stays consistent */
.mult-single.mult-over { color: #262626 !important; }

.score-inline {
	display:flex;
	align-items:center;
	gap:10px;
	background: linear-gradient(180deg, #3c2b18 0%, #4a371e 20%, #3d2b17 45%, #2c1b10 80%, #312011 100%);
	background-image:
		linear-gradient(180deg, #3c2b18 0%, #4a371e 20%, #3d2b17 45%, #2c1b10 80%, #312011 100%),
		repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.02) 1px, transparent 2px, transparent 10px);
	box-shadow: inset 0 0 20px rgba(0,0,0,0.35), 0 0 6px rgba(0,0,0,0.22);
	opacity: 0.98;
	color:#F2FFD1 !important;
	padding:6px 10px;
	border-radius:10px;
	border: 2px solid #24180d;
    clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px),
        0 10px
    );
}

/* Large desktop */
@media (min-width: 1200px) {
  .card-row-OPHAND-overlap .card {
    width: 3.5vw;
    height: 4.2vw;
    max-width: 117px;
    max-height: 140px;
  }
}

.card-row-overlap {
  display: flex;
  gap: 5px;
  margin-bottom: 10px; 
}

.face-down-card.fade-out,
.face-down-card.back.fade-out {
  /* Subtle robotic teleport/pop for face-down reveal only.
     Keeps other generic `.card.fade-out` removals unchanged. */
  animation: subtleRoboticReveal 0.6s steps(3, end) forwards;
  z-index: 1500;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.face-down-card.phase2-active,
.opponent-face-down-card.phase2-active {
  animation: phase2Enlarge 0.75s ease-out both;
  transform-origin: center center;
}

@keyframes phase2Enlarge {
  0% {
    transform: scale(1) translateY(0);
  }
  40% {
    transform: scale(1.12) translateY(-6px);
  }
  70% {
    transform: scale(1.08) translateY(-3px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

@keyframes subtleRoboticReveal {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
  30% {
    opacity: 0.98;
    transform: translate(-6px, 6px) scale(1.02) rotate(-3deg);
  }
  60% {
    opacity: 0.9;
    transform: translate(6px, -6px) scale(1.04) rotate(3deg);
  }
  90% {
    opacity: 0.6;
    transform: translate(-4px, 4px) scale(1.01) rotate(-2deg);
  }
  100% {
    opacity: 0;
    transform: translateY(18px) scale(0.96) rotate(0deg);
  }
}

.card.fade-in {
  animation: dropIn 0.6s ease-out 0.65s forwards;
  opacity: 0; /* ensure it starts hidden */
}

.card.fade-in2 {
  animation: dropIn 1s ease-out 1.1s forwards;
  opacity: 0; /* ensure it starts hidden */
}

.card.fade-in-discard {
  animation: dropInDiscard 1.6s cubic-bezier(0.55, 0, 0.9, 1) 0.65s forwards;
  opacity: 0; /* ensure it starts hidden */
}

.card.fade-in-discard2 {
  animation: dropInDiscard 2.0s cubic-bezier(0.55, 0, 0.9, 1) 1.1s forwards;
  opacity: 0; /* ensure it starts hidden */
}

/* Fade-out animation for cards that should vanish (restore from styles8.css) */
.card.fade-out {
  animation: fadeAndFall 0.8s ease-in forwards;
  z-index: 5;
}

@keyframes fadeAndFall {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(10px) scale(0.95);
  }
  80% {
    opacity: 1;
    transform: translateY(10px) scale(0.90);
  }
  90% {
    opacity: 0.9;
    transform: translateY(10px) scale(0.85);
  }
  100% {
    opacity: 0;
    transform: translateY(30px) scale(0.80);
  }
}

/* Remove any bright/white glow or outline applied during reveal/fade-out
   The partials add `fade-out` when a card is revealed/removed; override
   any `box-shadow`/pseudo-element styling so no white border appears. */
.card.fade-out,
.card.fade-out::before,
.card.fade-out::after,
.card.face-down.fade-out,
.card.opponent-face-up-card.fade-out,
.card.fade-out.flash,
.card.fade-out.flash2,
.card.fade-out.flash22 {
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  background-clip: padding-box !important;
}

/* Remove glow/white border from flash variants */
.card.flash,
.card.flash2,
.card.flash22 {
  box-shadow: none !important;
  outline: none !important;
}
.card.flash::before,
.card.flash::after,
.card.flash2::before,
.card.flash2::after,
.card.flash22::before,
.card.flash22::after {
  box-shadow: none !important;
  background: none !important;
  background-image: none !important;
}


@keyframes dropIn {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.7);
  }
  30% {
    opacity: 0;
    transform: translateY(-30px) scale(0.8);
  }
  45% {
    opacity: 0.5;
    transform: translateY(-30px) scale(0.9);
  }   
  60% {
    opacity: 1;
    transform: translateY(5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dropInDiscard {
  0% {
    opacity: 0;
    transform: translateY(-60px) scale(0.8);
  }
  30% {
    opacity: 0;
    transform: translateY(-60px) scale(0.8);
  }
  70% {
    opacity: 0.5;
    transform: translateY(-60px) scale(0.9);
  }   
  90% {
    opacity: 1;
    transform: translateY(5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.discarded-overlap-row {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 10px;
  /* optional: width control */
  /* width: fit-content; */
}

/* Deck card */
.card-row-OPHAND-overlap2 {
  display: flex;
  align-items: center;
  position: relative;
  margin-left: -55px;  
}

/* Dark grey slab behind discarded/deck area for visual separation */
.discard-slab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(12,12,12,0.6));
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.015);
}

@media (max-width: 600px) {
  .discard-slab { padding: 8px; border-radius:8px; }
}

/* Discarded cards base style */
.discarded-overlap-row .discarded-card {
  display: flex;
  align-items: center;
  position: relative;
  margin-left: -55px;  
}

/* Action buttons: refined appearance per request */
.action-button {
  background:#000;
  border:1px solid #B8B8B8;
  border-radius:0;

  color:#B8B8B8;
  font-weight:800;
  letter-spacing:0.06em;

  transition:all 0.15s ease;
}

.action-button:hover {
  border-color:#B8B8B8;
}

.action-button:active {
  transform:scale(0.98);
}


.card {
  width: 100px;
  height: 123px;
  background-color: transparent;  /* Set the background to transparent */
  background-image: url('images/back.png');
  background-size: contain;  /* Ensures the image fits without stretching */
  background-position: center; /* Center the background image */
  background-repeat: no-repeat;
  border-radius: 5px; /* Rounded corners */
  border: none;  /* Ensure there's no border */
  padding: 0;  /* No internal padding */
  margin: 0;  /* No margin */
  box-sizing: border-box;  /* Ensure proper box model */
  gap: 0; /* No gap between cards */
  backface-visibility: hidden; /* optional, prevents flicker on rotation */ 
  
}


/* Specific styles for face-up cards based on their color */
.card.red {
  background-image: url('images/red.png'); /* Override for red cards */
}

.card.green {
  background-image: url('images/green.png'); /* Override for green cards */
}

.card.blue {
  background-image: url('images/blue.png'); /* Override for blue cards */
}

.card.yellow {
  background-image: url('images/yellow.png'); /* Override for yellow cards */
}

.card.purple {
  background-image: url('images/purple.png'); /* Override for purple cards */
}

/* Layout: place icons flush with page edges and keep only a rectangle around the numeric score.
   Left: icon then score. Right: score then icon (icon aligned to page edge). */
.top-panel {
  /* ensure symmetric spacing from page edges so icons align */
  padding-left: 20px;
  padding-right: 20px;
}

.top-panel .score {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  min-width: 80px;
}

.top-panel .score .content {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Left side: icon then number */
.top-panel .score-left .content { justify-content: flex-start; }

/* Right side: reverse inline order so number appears before icon; keep icon at the far right */
.top-panel .score-right .content { flex-direction: row-reverse; justify-content: flex-end; }

.top-panel .score .top-faction-icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  border-radius: 4px;
  flex: 0 0 auto;
}

.top-panel .score .score-value {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(40,110,190,0.10);
  line-height: 1;
}

@media (max-width: 640px) {
  .top-panel { padding-left: 12px; padding-right: 12px; }
  .top-panel .score .top-faction-icon { width: 14px; height: 14px; }
  .top-panel .score .score-value { font-size: 22px; padding: 4px 8px; }
}

/* Hand-only spacing: increase spacing between cards in the player's hand
   Use `gap` when supported; provide a margin fallback for older browsers. */
@supports (gap: 1px) {
  .hand-container .hand-scroll { gap: 0.8vw; align-items: center; }
}
@supports not (gap: 1px) {
  .hand-container .hand-scroll .card.hand-card:not(:last-child) { margin-right: 0.8vw; }
}

.card-row-overlap .card {
  width: 130px;  /* Set card width (increased ~30%) */
  height: 160px;  /* Set card height (increased ~30%) */
  margin-left: -33px;  /* Overlapping effect reduced ~15% */
  transition: margin 0.3s ease;  /* Smooth transition for the overlap */
  z-index: 1;
}

.card-row-OPHAND-overlap .card {
  width: 5vw;  /* responsive base, capped by max-width */
  height: 6vw;
  max-width: 65px; /* increased from 50px ~30% */
  max-height: 78px; /* increased from 60px ~30% */
  margin-left: -5px;  /* Overlapping effect reduced ~15% */
  transition: margin 0.3s ease;  /* Smooth transition for the overlap */
  z-index: 1;
}

.card-row-overlap .card:first-child {
  margin-left: 0; /* No overlap for the first card */
}

.card-row-OPHAND-overlap .card:first-child {
  margin-left: 0; /* No overlap for the first card */
}

@media (min-width: 768px) {
  .card-row-OPHAND-overlap .card { width:4vw; height:5vw; max-width:91px; max-height:109px; }
}

.hand-section {
  position: fixed;
  bottom: 10px;
  width: 100%;
  padding: 12px 0;
  display: flex;
  justify-content: center;
  gap: 0;
  opacity: 1;
  z-index: 10000;
  pointer-events: auto;

  /* translucent, blurred strip to separate the hand from the table while keeping depth */
  background-color: rgba(6, 8, 12, 0.54);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border-top: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 -18px 48px rgba(2,6,10,0.72);
}

/* Ensure action buttons remain plain and without glow even when wrapped or highlighted */
.hand-action-button.tutorial-highlight-button {
  position: relative;
  z-index: 10001;
  box-shadow: none !important; /* no external glow */
  animation: tutorial-button-pulse 1.3s ease-in-out infinite !important;
  background: #d64545 !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 0 !important;
  color: #fff !important;
  text-shadow: 0 0 8px rgba(255,255,255,0.2) !important;
  font-weight: 800 !important;
}
.hand-action-button.tutorial-highlight-button::after {
  /* no overlay; the button stays red while pulsing */
  display: none !important;
  content: none !important;
}

@keyframes tutorial-button-pulse {
  0%, 100% {
    background-color: #d64545 !important;
    box-shadow: 0 0 0 0 rgba(255, 70, 70, 0.08);
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    background-color: #ff5b5b !important;
    box-shadow: 0 0 0 10px rgba(255, 70, 70, 0.24);
    transform: scale(1.05);
    filter: brightness(1.16);
  }
}

.hand-scroll {
  display: flex;
  gap: 0px;
  overflow-x: auto;
  overflow-y: hidden;

  max-width: calc(100vw - 20px);
  box-sizing: border-box;
  padding: 0 20px 0 10px; /* ← Increased right padding from 10px to 20px */
}

.hand-card {
  width: 130px;
  height: 160px;
  position: relative; /* needed for pseudo-element highlight */
  background-color: transparent;  /* Set the background to transparent */
  background-image: url('images/back.png');
  background-size: contain;  /* Ensures the image fits without stretching */
  background-position: center; /* Center the background image */
  background-repeat: no-repeat;
  border-radius: 5px; /* Rounded corners */
  border: none;  /* Ensure there's no border */
  padding: 0;  /* No internal padding */
  margin: 0;  /* No margin */
  box-sizing: border-box;  /* Ensure proper box model */
   gap: 0; /* No gap between cards */
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

.hand-card:active,
.hand-card:focus,
.hand-card:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  filter: none !important;
}

.hand-card::selection {
  background: transparent;
}

.hand-container.selection-active .hand-card:not(.selected) {
  opacity: 0.5 !important;
  transition: opacity 0.15s ease;
}

.hand-card:first-child {
  margin-left: 5px
}

@keyframes handActive2Pulse {
  0% {
      border-top: 12px solid #FF0000;
  }
  50% {
      border-top: 6px solid #FF0000;
  }
  100% {
      border-top: 4px solid #FF0000;
  }
}

/* Hide by default (mobile first) */
br.desktop-only {
  display: none;
}

/* Show on wider screens (desktop) */
@media (min-width: 768px) {
  br.desktop-only {
    display: block;
  }
}

.hand-active {
  padding-top: 0px;
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: none;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.18) !important;
}

.hand-active2 {
  padding-top: 0px;
  border-top: 2px solid #00FFFF !important;
  border-bottom: none;
  border-left: none;
  border-right: none;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.12) !important;
}

.hand-section {
  transition: border 0.3s ease, box-shadow 0.3s ease;
}

#card-preview {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 350px;
  background-image: url('images/back.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0px;
  padding: 5px; /* Padding to give space between the border and the content */
  z-index: 100;
  display: none; /* Hidden by default */
}

.wonky-rect {
  position: relative;
  width: 168px;
  height: 58px;
  background-color: #4C4C4C !important;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #4C4C4C !important;
  margin: 3px;
  border-radius: 6px;
  clip-path: polygon(0% 20%, 28% 0%, 72% 0%, 100% 20%, 100% 80%, 72% 100%, 28% 100%, 0% 80%);
  -webkit-clip-path: polygon(0% 20%, 28% 0%, 72% 0%, 100% 20%, 100% 80%, 72% 100%, 28% 100%, 0% 80%);
}

/* Static glitch pattern */
.wonky-rect::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(3deg, rgba(255,255,255,0.15) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-4deg, rgba(255,255,255,0.1) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 10px);
  background-blend-mode: lighten;
  opacity: 0.3; /* subtle */
  z-index: 1;
}

.wonky-rect .hand-action-button {
  position: relative;
  z-index: 2;
  background: #4C4C4C !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 35%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.02) 1px, transparent 2px, transparent 10px);
  background-blend-mode: lighten;
  border: 2px solid #1B1B1B !important;
  border-radius: 0;
  clip-path: polygon(0% 20%, 28% 0%, 72% 0%, 100% 20%, 100% 80%, 72% 100%, 28% 100%, 0% 80%);
  -webkit-clip-path: polygon(0% 20%, 28% 0%, 72% 0%, 100% 20%, 100% 80%, 72% 100%, 28% 100%, 0% 80%);
  color: #F2FFD1 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  width: 100%;
  height: 100%;
  letter-spacing: 0.06em;
  transition: all 0.15s ease;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.12);
}

.wonky-rect .hand-action-button:hover {
  border-color: #6B6B6B;
}

.wonky-rect .hand-action-button:active {
  transform: scale(0.98);
}


.overlay-text {
  position: fixed;
  top: 23%;
  left: 50%;
  transform: translateX(-50%);
  
  color: #d0d0d0;
  background: rgba(0, 0, 0, 0.85);
  
  padding: 10px 20px;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;

  width: 70vw;
  max-width: 900px;

  pointer-events: none !important;
  opacity: 0;
  animation: fadeInOverlay 1s 1.2s forwards;

  /* Visual polish */
  border-radius: 6px;
  border: 1px solid rgba(200, 200, 200, 0.25);

  /* Depth */
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;

  /* Subtle glass feel */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  z-index: 9000;
}

.overlay-text3 {
  position: fixed;
  top: 19%;
  left: 50%;
  transform: translateX(-50%);
  
  color: #d0d0d0;
  background: rgba(0, 0, 0, 0.85);
  
  padding: 10px 20px;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;

  width: 70vw;
  max-width: 900px;

  pointer-events: none !important;
  opacity: 0;
  animation: fadeInOverlay 1s 3.0s forwards;

  /* Visual polish */
  border-radius: 6px;
  border: 1px solid rgba(200, 200, 200, 0.25);

  /* Depth */
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;

  /* Subtle glass feel */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  z-index: 9000;
}

.overlay-text2 {
  position: fixed;
  top: 19%;
  left: 50%;
  transform: translateX(-50%);
  
  color: #d0d0d0;
  background: rgba(0, 0, 0, 0.85);
  
  padding: 10px 20px;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;

  width: 70vw;
  max-width: 900px;

  pointer-events: none !important;
  opacity: 0;
  animation: fadeInOverlay 1s 5.2s forwards;

  /* Visual polish */
  border-radius: 6px;
  border: 1px solid rgba(200, 200, 200, 0.25);

  /* Depth */
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;

  /* Subtle glass feel */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  z-index: 9000;
}

@keyframes fadeInOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.92;
  }
}

/* Base overlay styles */
.overlay {
  position: fixed;
  top: 0;
  width: 50vw;          /* half screen width */
  height: 100vh;        /* full screen height */
  background-color: rgba(0, 0, 0, 0); /* starts transparent */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 5rem;      /* large text */
  z-index: 9999;        /* above all other content */
  transition: background-color 3.5s ease; /* fade effect */
}

/* Left and right positioning */
.left {
  left: 0;
}

.right {
  right: 0;
}

/* Text styling */
.overlay-text {
  pointer-events: none; /* so clicks pass through if needed */
}

/* Active class to fade in */
.overlay.active {
  background-color: rgba(0, 0, 0, 0.8); /* fades in black */
}

.card.selected,
.card.selected2,
.selected-opponent {
  border: none !important;
  position: relative;
}

.card.selected::after,
.card.selected2::after,
.selected-opponent::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-sizing: border-box;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: none;
  border-bottom: none;
  clip-path: polygon(0% 18%, 18% 0%, 82% 0%, 100% 18%, 100% 82%, 82% 100%, 18% 100%, 0% 82%);
}

.card.selected::after {
  border-left-color: #4C4C4C;
  border-right-color: #4C4C4C;
}

.card.selected2::after,
.selected-opponent::after {
  border-left-color: red;
  border-right-color: red;
}

.button-container {
  display: flex;
  flex-direction: row;
  width: 100%;          /* Full width container */
  justify-content: space-between;
  padding: 0;
  margin: 0;
  z-index: 500; /* ensure it's on top */  
  flex-wrap: wrap;
}

/* Mobile: make buttons larger but allow them to wrap and fit within viewport */
@media (max-width: 480px) {
  .hand-buttons, .hand-buttons2 { bottom: 120px; gap: 10px; padding: 0 8px; }
  /* Make container account for padding and use small gap; keep wrapping allowed */
  .button-container { justify-content: space-between; gap: 8px; padding: 0 6px; box-sizing: border-box; }
  /* Each button takes roughly half the available width using flex-basis; remove horizontal margins */
  .wonky-rect { box-sizing: border-box; flex: 0 0 calc(50% - 8px); height: 43px; margin: 6px 0; border-radius: 8px; }
  .wonky-rect .hand-action-button { font-size: 14px; font-weight: 800; }
  .hand-action-button { font-size: 14px; padding: 6px 6px; }
}

.hand-buttons {
  position: fixed;
  bottom: 165px; /* nudged down 15px */
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
  z-index: 500; /* ensure it's on top */
  font-size: 10px;
  /* Fade-in effect */
  opacity: 0;               /* start invisible */
  animation: fadeIn 0.5s ease forwards;
  animation-delay: 0.5s;      /* 3-second delay before starting */
}

.hand-buttons2 {
  position: fixed;
  bottom: 165px; /* nudged down 15px */
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
  z-index: 500; /* ensure it's on top */
  font-size: 10px;
  /* Fade-in effect */
  opacity: 0;               /* start invisible */
  animation: fadeIn 0.5s ease forwards;
  animation-delay: 0.5s;      /* 3-second delay before starting */  
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.score-flash {
}

@keyframes fadeOut {
  0% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.hand-action-button {
  padding: 8px 10px;
  background: #000;
  border: 1px solid #B8B8B8;
  border-radius: 0;

  color: #B8B8B8;
  font-weight: 800;
  letter-spacing: 0.06em;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  font-size: 14px;
  cursor: pointer;
  z-index: 500;
  transition: all 0.15s ease;
}

.cards-container {
  flex: 1;
}

.game-interface {
  display: flex;
  flex-direction: row; /* default: cards and buttons side-by-side */
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}



@keyframes flashFade {
  0% {
    opacity: 1;  /* fully visible */
  }
  100% {
    opacity: 0;  /* fully transparent */
  }
}

/* === RED CARD STOP-MOTION IMPACT === */
.card.red.flash2 {
  position: relative;
  overflow: hidden;
}

/* Overlay that animates the frames */
.card.red.flash2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Start frame = base card */
  background-image: url("red.png");

  animation:
    redStepFrames 600ms steps(6) forwards,
    redImpactShake 550ms cubic-bezier(.22,.61,.36,1) forwards;

  will-change: transform;
  pointer-events: none;
}

.card.flash {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  z-index: 2;
  animation: flashFade 3s ease-in-out forwards;
}

/* === CARD BASE (flash2 + flash22) === */
.card.flash2,
.card.flash22 {
  position: relative;
  opacity: 1; /* always visible – no pop-in failure */
  transform: translate3d(0, 0, 0);
  animation: impactShake 920ms cubic-bezier(.22,.61,.36,1) forwards;
  will-change: transform;
}

/* === IMPACT / TABLE HIT MICRO-SHAKE === */
@keyframes impactShake {
  0% {
    transform: translate3d(0, 0, 0);
  }

  12% {
    transform: translate3d(-10px, 1px, 0);
  }

  26% {
    transform: translate3d(8px, -1px, 0);
  }

  38% {
    transform: translate3d(-6px, 1px, 0);
  }

  52% {
    transform: translate3d(6px, -1px, 0);
  }

  68% {
    transform: translate3d(-4px, 0, 0);
  }

  82% {
    transform: translate3d(2px, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* === PURPLE CARD SIDEWAYS ROTATE + SHAKE === */
@keyframes purpleSidewaysRotateShake {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(2);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* === PURPLE CARD FLASH2 STYLE (FACTION 2 ONLY) === */
.card.purple.flash2.faction2,
.card.purple.flash22.faction2 {
  position: relative;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  animation: purpleSidewaysRotateShake 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
  will-change: transform, opacity;
  transform-origin: center center;
}

/* === YELLOW CARD FLASH2 STYLE (FACTION 3 ONLY) === */
.card.yellow.flash2.faction3,
.card.yellow.flash22.faction3 {
  position: relative;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  animation: purpleSidewaysRotateShake 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
  will-change: transform, opacity;
  transform-origin: center center;
}

/* === Prevent overlap brightness for multiple cards === */
.card.flash2:not(.flash2-first)::after,
.card.flash22:not(.flash2-first)::after {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.card.flash2:not(.flash2-last)::after,
.card.flash22:not(.flash2-last)::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Fade in + out */
@keyframes delayedGlow {
  0%   { opacity: 0; }
  10%  { opacity: 1; }   /* fade in */
  80%  { opacity: 1; }   /* stay visible */
  100% { opacity: 0; }   /* fade out */
}


@keyframes showThenHide {
  0%   { opacity: 1; }
  99%  { opacity: 1; }
  100% { opacity: 0; } /* abruptly disappears at the end */
}

@keyframes borderFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.game-container {
  transform: scale(1.4);
  transform-origin: top left;
  width: 71.4285%; /* 100 / 1.5 */
  z-index: 500; /* ensure it's on top */
}



.hand-action-button:hover {
  border-color: rgba(255,255,255,0.6);
}

.hand-action-button:active {
  transform: scale(0.98);
}

.side-strip {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 25px; /* adjust based on your image */
  z-index: 1000; /* ensure it's on top */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* ensures users can still interact with underlying content */
}

.side-strip2 {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 25px; /* adjust based on your image */
  z-index: 1000; /* ensure it's on top */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* ensures users can still interact with underlying content */
}

.side-strip img {
  height: 90vh;
  opacity: 0.82; /* semi-transparent */
}

.side-strip2 img {
  height: 90vh;
  opacity: 0.0; /* semi-transparent */
}

.left-strip {
  left: 0;
}

/* Fix mobile/antialiasing white-seam flashes for top-faction banner images
   Targets the top-faction containers and banner images (e.g. images/topf1.png)
   - ensure images are block-level (removes baseline gaps)
   - hint GPU compositing to avoid subpixel seams
   - hide overflow on the container to prevent background bleed
*/
.top-faction-wrap {
  position: relative;
  overflow: hidden;
}
.top-faction-bg,
.top-faction-overlay,
.top-faction-wrap img,
img[src*="topf1"],
img[src*="topf2"],
img[src*="topf3"],
img[src*="topf4"] {
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform, opacity;
}


img[src*="topf1"], img[src*="topf2"], img[src*="topf3"], img[src*="topf4"] {
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin: -1px;
}

/* Ensure images inside the top-panel score content cover the full area
   and use GPU compositing to avoid sub-pixel white seams during resize */
.top-panel .score .content img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform, opacity;
}

.right-strip {
  right: 0;
}

.versus-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-size: 3rem;
  font-family: sans-serif;
  opacity: 1;
  z-index: 10005; /* ensure it's on top */
}

  .soul-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 200px;
    height: 200px;
    z-index: 1000;
  }

  .soul-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;
    filter: blur(20px);
    animation: soulFlow 1.5s forwards;
  }

  .layer1 { background: rgba(180,180,180,0.38); animation-delay: 0s; }
  .layer2 { background: rgba(220,220,220,0.22); animation-delay: 0.3s; }
  .layer3 { background: rgba(140,140,140,0.46); animation-delay: 0.5s; }

  .soul-text {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    font-size: 120px;
    color: black;
    opacity: 0;
    animation: textFade 1.5s forwards;
    text-align: center;
  }

  @keyframes soulFlow {
    0% {
      transform: scale(0.5) rotate(0deg);
      opacity: 0;
    }
    30% {
      transform: scale(1.1) rotate(15deg);
      opacity: 1;
    }
    60% {
      transform: scale(1.3) rotate(-10deg);
      opacity: 0.7;
    }
    100% {
      transform: scale(1.6) rotate(25deg);
      opacity: 0;
    }
  }

  @keyframes textFade {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
  }


.versus-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.hidden2 {
    visibility: hidden; /* invisible but still takes up space */
}

/* Exit Tutorial button (top-right) */
#exit-tutorial-btn {
  position: fixed;
  top: 80px;
  right: 30px;
  background: rgba(255,0,0,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 3001; /* above top-panel (2000) and its pseudo-element */
  opacity: 0.55;
  pointer-events: auto;
  backdrop-filter: blur(4px);
  font-size: 13px;
}

#exit-tutorial-btn:hover {
  background: rgba(255,255,255,0.10);
}

/* Pulse indicator for opponent facedown play: uses filter/box-shadow so it
   doesn't overwrite inline transform positioning applied by JS. */
.opponent-pulse {
  animation: opponentPulse 2.0s ease-in-out;
  /* subtle lift using translateZ to trigger GPU compositor without changing 2D transform */
  will-change: filter, box-shadow, opacity;
}

@keyframes opponentPulse {
  0% {
    transform: scale(1.00) rotate(-0deg);
    opacity: 0;
  }
  10% {
    transform: scale(0.95) rotate(-0deg);
    opacity: 0;
  }
  60% {
    transform: scale(0.68) rotate(-0deg);
    opacity: 0;
  }
  80% {
    transform: scale(0.38) rotate(-0deg);
    opacity: 0;
  }  
  100% {
    transform: scale(0.0) rotate(-0deg);
    opacity: 0;
  }
}

/* Tutorial highlight for hand cards to draw attention (wobble + glow) */
.hand-card.tutorial-highlight {
  /* Bright glow on the card itself; no transform so layout unaffected */
  z-index: 20000;
  will-change: box-shadow;
  animation: tutorial-bright-glow 2.2s ease-in-out infinite;
}

/* Full-card red overlay that becomes opaque at the pulse peak. Uses
   pointer-events:none so clicks still reach the card. */
.hand-card.tutorial-highlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: rgba(255,0,0,0);
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 2; /* sit above card image but below UI chrome */
  animation: tutorial-red-overlay 2.2s ease-in-out infinite;
}

/* Brighten the card briefly every few seconds using box-shadow only */
@keyframes tutorial-bright-glow {
  0%, 45% { box-shadow: 0 0 0 0 rgba(255,60,60,0); }
  50% { box-shadow: 0 18px 50px 10px rgba(255,60,60,0.45); }
  58% { box-shadow: 0 10px 30px 6px rgba(255,60,60,0.28); }
  100% { box-shadow: 0 0 0 0 rgba(255,60,60,0); }
}

@keyframes tutorial-red-overlay {
  0%, 45% { background: rgba(255,0,0,0); }
  50% { background: rgba(255,0,0,0.95); }
  58% { background: rgba(255,0,0,0.6); }
  100% { background: rgba(255,0,0,0); }
}

/* Apply same tutorial highlight to face-down card elements */
.face-down-card.tutorial-highlight {
  z-index: 20000;
  will-change: box-shadow;
  animation: tutorial-bright-glow 3s ease-in-out infinite;
  position: relative; /* ensure pseudo-element positions correctly */
}
.face-down-card.tutorial-highlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: rgba(255,0,0,0);
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 2;
  animation: tutorial-red-overlay 3s ease-in-out infinite;
}

/* Highlight for action buttons during tutorial: stay red while pulsing */
.hand-action-button.tutorial-highlight-button {
  position: relative;
  z-index: 30000;
  box-shadow: none !important;
  animation-name: tutorial-button-pulse !important;
  animation-duration: 1.3s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  background: #d64545 !important;
  border-radius: 0 !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
  text-shadow: 0 0 8px rgba(255,255,255,0.2) !important;
  font-weight: 800 !important;
}

.hand-action-button.tutorial-highlight-button::after {
  display: none !important;
  content: none !important;
}

/* When tutorial requires disabling hand clicks (step 36), prevent clicks on cards */
.hand-section.no-hand-click .hand-card {
  pointer-events: none;
  cursor: default;
  opacity: 0.7;
}

.hand-section.no-hand-click .hand-card.blank { /* keep blanks visually subdued */
  opacity: 0.5;
}