/* ============================================================
   UNTIL IT BREAKS — animations
   ============================================================ */
@keyframes dealIn { from { transform: translateY(60px) rotate(4deg); opacity: 0; } to { transform: none; opacity: 1; } }
.tcard.dealing, .type-card.dealing { animation: dealIn 0.32s cubic-bezier(0.22,1,0.36,1) backwards; }

@keyframes shake { 0%,100% { transform: translateX(0);} 20%{transform:translateX(-6px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(4px);} }
.shake { animation: shake 0.35s ease; }

@keyframes popIn { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.pop-in { animation: popIn 0.3s cubic-bezier(0.34,1.56,0.64,1); }

@keyframes napkinFlip { 0%{transform:rotateY(0);} 49%{transform:rotateY(90deg);filter:brightness(2);} 51%{transform:rotateY(90deg);} 100%{transform:rotateY(0);} }
.tcard.napkin-flip { animation: napkinFlip 0.5s ease; }

@keyframes flyOut { to { transform: translateY(-120vh) rotate(12deg) scale(0.75); opacity: 0; } }
.tcard.playing-out, .type-card.playing-out { animation: flyOut 0.4s cubic-bezier(0.5,0,0.9,0.4) forwards; pointer-events: none; }
@keyframes scoreTick {
  0% { transform: translateY(-18px) scale(1); filter: brightness(1); }
  55% { transform: translateY(-26px) scale(1.12); filter: brightness(1.8); }
  100% { transform: translateY(-18px) scale(1); filter: brightness(1); }
}
@keyframes barrierUploadCardFx {
  0%, 100% { transform: translateY(-18px) scale(1); filter: brightness(1); }
  35% { transform: translateY(-24px) scale(1.06); filter: brightness(1.8); box-shadow: 0 0 0 2px rgba(255,93,122,0.9), 0 0 28px rgba(255,93,122,0.7); }
}
@keyframes typeFloatWiggle {
  0%,100% { transform: translateX(-50%) translateY(0) rotate(-1deg); }
  35% { transform: translateX(-50%) translateY(-3px) rotate(1.5deg); }
  70% { transform: translateX(-50%) translateY(1px) rotate(-0.5deg); }
}
@keyframes flyDiscard { to { transform: translateY(110vh) rotate(-16deg) scale(0.8); opacity: 0.2; } }
.tcard.discarding, .type-card.discarding { animation: flyDiscard 0.35s ease-in forwards; pointer-events: none; }

/* bar pulses */
@keyframes barPulseHot { 0% { box-shadow: 0 0 0 0 rgba(255,77,94,0.7);} 100% { box-shadow: 0 0 0 12px rgba(255,77,94,0);} }
.heat-bar.pulse-hot { animation: barPulseHot 0.6s ease-out; }
@keyframes barPulseCool { 0% { box-shadow: 0 0 0 0 rgba(65,245,143,0.7);} 100% { box-shadow: 0 0 0 12px rgba(65,245,143,0);} }
.heat-bar.pulse-cool { animation: barPulseCool 0.6s ease-out; }
@keyframes hpChunk { 0% { filter: brightness(2.2);} 100% { filter: brightness(1);} }
.fw-bar.chunk { animation: hpChunk 0.5s ease-out; }

@keyframes warnShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-1px);} 75%{transform:translateX(1px);} }
#heat-panel.warn { animation: warnShake 0.5s ease infinite; }
@keyframes alarmGlow { 0%,100%{border-color:var(--line);} 50%{border-color:var(--red);box-shadow:0 0 22px rgba(255,77,94,0.35);} }
#heat-panel.danger { animation: warnShake 0.3s ease infinite, alarmGlow 0.8s ease infinite; }
@keyframes heartPulse { 0%,100%{opacity:.55;} 50%{opacity:1;} }
#screenfx.alarm::before { content:""; position:absolute; inset:0; box-shadow: inset 0 0 140px rgba(255,30,50,0.28); animation: heartPulse 0.8s ease infinite; }

/* AI reactions */
@keyframes eyeTwitch { 0%,100%{transform:translate(0,0);} 25%{transform:translate(-5px,2px);} 50%{transform:translate(4px,-3px);} 75%{transform:translate(-2px,-2px);} }
.ai-eye.twitch .ai-pupil { animation: eyeTwitch 0.4s ease; }
@keyframes glitch { 0%,100%{transform:translate(0);filter:none;} 20%{transform:translate(-2px,1px);filter:hue-rotate(60deg);} 40%{transform:translate(2px,-1px);filter:hue-rotate(-60deg) saturate(3);} 60%{transform:translate(-1px,-1px);} 80%{transform:translate(1px,1px);filter:hue-rotate(30deg);} }
#ai-bar.glitch { animation: glitch 0.4s steps(2) 2; }
@keyframes statusBlink { 50% { opacity: 0.25; } }
.ai-status.blink { animation: statusBlink 0.5s step-end 3; }

/* hand reveal + floats */
@keyframes handReveal { 0%{transform:scale(0.7);opacity:0;letter-spacing:0.4em;} 60%{transform:scale(1.08);opacity:1;} 100%{transform:scale(1);opacity:1;letter-spacing:0.08em;} }
.pv-hand.reveal { animation: handReveal 0.45s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes floatUp { 0%{transform:translateY(0);opacity:0;} 15%{opacity:1;} 100%{transform:translateY(-60px);opacity:0;} }
.float-num { position: fixed; z-index: 97; pointer-events: none; font-family: var(--mono); font-weight: 700; font-size: 17px; animation: floatUp 1.15s ease-out forwards; text-shadow: 0 2px 8px rgba(0,0,0,0.8); }

/* damage beam */
.beam { position: fixed; z-index: 79; pointer-events: none; height: 3px; border-radius: 2px; transform-origin: left center; background: linear-gradient(90deg, transparent, var(--orange), #fff); box-shadow: 0 0 12px var(--orange); animation: beamZip 0.32s ease-in forwards; }
@keyframes beamZip { 0%{clip-path:inset(0 100% 0 0);opacity:1;} 60%{clip-path:inset(0 0 0 0);} 100%{clip-path:inset(0 0 0 70%);opacity:0;} }

/* flashes */
@keyframes flashGold { 0%{opacity:.55;} 100%{opacity:0;} }
#screenfx.flash-gold::after { content:""; position:absolute; inset:0; background: radial-gradient(circle, rgba(255,215,94,0.5), rgba(255,160,40,0.15)); animation: flashGold 0.8s ease-out forwards; }
@keyframes flashRed { 0%{opacity:.6;} 100%{opacity:0;} }
#screenfx.flash-red::after { content:""; position:absolute; inset:0; background: radial-gradient(circle, rgba(255,40,60,0.5), rgba(120,0,20,0.25)); animation: flashRed 0.9s ease-out forwards; }
@keyframes lockSweep { 0%{transform:translateY(-100%);} 100%{transform:translateY(100%);} }
#screenfx.lockout::before { content:""; position:absolute; left:0; right:0; top:0; height:100%; background: linear-gradient(180deg, transparent, rgba(255,20,40,0.35) 45%, rgba(255,20,40,0.5) 50%, rgba(255,20,40,0.35) 55%, transparent); animation: lockSweep 0.9s ease-in forwards; }

/* modal */
@keyframes modalIn { from { transform: translateY(26px) scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
#modal, #shop { animation: modalIn 0.4s cubic-bezier(0.22,1,0.36,1); }

/* prep entrance */
@keyframes riseIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.rise-in { animation: riseIn 0.4s cubic-bezier(0.22,1,0.36,1) backwards; }

/* ---------- slot-specific ---------- */
@keyframes slotPulse { 0%,100%{box-shadow: inset 0 0 0 0 transparent;} 50%{box-shadow: inset 0 0 24px var(--tg);} }
.crew-slot.fill-flash { animation: slotPulse 0.45s ease; }
@keyframes slotFlipFx { 0%{filter:brightness(1);} 30%{filter:brightness(2.6) saturate(2);} 100%{filter:brightness(1);} }
.crew-slot.flip-flash { animation: slotFlipFx 0.55s ease; }
@keyframes slotReduceFx { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-3px);} 75%{transform:translateX(3px);} }
.crew-slot.reduce-flash { animation: slotReduceFx 0.4s ease; }
@keyframes summonPop { 0%{transform:scale(0.3) translateY(20px);opacity:0;} 65%{transform:scale(1.12);opacity:1;} 100%{transform:scale(1);opacity:1;} }
.slot-crew.summoning { animation: summonPop 0.45s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes dismissFx { to { transform: scale(0.4) translateY(-30px); opacity: 0; } }
.slot-crew.dismissing { animation: dismissFx 0.35s ease-in forwards; }

/* big breathing glow: armed crew (will activate with the prepared hand) */
@keyframes breatheGlow {
  0%, 100% { box-shadow: inset 0 0 8px var(--tg), 0 0 4px rgba(255,215,94,0.25); transform: scale(1); }
  50% { box-shadow: inset 0 0 26px var(--tg), 0 0 26px rgba(255,215,94,0.55), 0 0 46px var(--tg); transform: scale(1.03); }
}
.crew-slot.armed { animation: breatheGlow 1.3s ease-in-out infinite; border-color: var(--gold) !important; border-style: solid !important; z-index: 4; }

/* ---------- slot charging / draining (noticeable fill & empty) ---------- */
@keyframes chargePulse {
  0%, 100% { box-shadow: inset 0 0 10px var(--tg); }
  50% { box-shadow: inset 0 0 30px var(--tg), 0 0 22px var(--tg); }
}
.crew-slot.slot-charging { border-color: var(--tc); animation: chargePulse 0.5s ease-in-out 2; }
@keyframes drainPulse {
  0%, 100% { box-shadow: inset 0 0 10px rgba(255,77,94,0.4); filter: saturate(1); }
  50% { box-shadow: inset 0 0 30px rgba(255,77,94,0.7), 0 0 20px rgba(255,77,94,0.5); filter: saturate(0.6) brightness(0.85); }
}
.crew-slot.slot-draining { border-color: var(--red) !important; animation: drainPulse 0.5s ease-in-out 2; }

/* ---------- READY pop + CALLING… + summon flash ---------- */
@keyframes slotReadyPop {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.07); filter: brightness(2); }
  100% { transform: scale(1); filter: brightness(1); }
}
.crew-slot.ready-pop { animation: slotReadyPop 0.6s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes slotUnlockFx {
  0% { transform: scale(0.96); filter: brightness(0.7) saturate(0.4); box-shadow: inset 0 0 0 transparent; }
  35% { transform: scale(1.05); filter: brightness(2.2) saturate(1.4); box-shadow: inset 0 0 26px var(--tg), 0 0 30px var(--tg); }
  100% { transform: scale(1); filter: brightness(1); box-shadow: inset 0 0 10px color-mix(in srgb, var(--tc) 18%, transparent); }
}
.crew-slot.slot-unlocking { animation: slotUnlockFx 0.85s cubic-bezier(0.22,1,0.36,1); border-style: solid; border-color: var(--tc); }
@keyframes callWiggle { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes callDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } 100% { content: ""; } }
@keyframes callScan { from { top: -26px; } to { top: 100%; } }
@keyframes summonFlashFx {
  0% { filter: brightness(1); }
  15% { filter: brightness(3.2) saturate(0.4); }
  40% { filter: brightness(1.6); }
  100% { filter: brightness(1); }
}
.crew-slot.summon-flash { animation: summonFlashFx 0.55s ease-out; }

/* activation flash */
@keyframes activateFx { 0%{filter:brightness(1);} 20%{filter:brightness(2.4);} 100%{filter:brightness(1);} }
.crew-slot.activate-flash { animation: activateFx 0.5s ease; }

@keyframes crewSpotlightIn {
  from { transform: translate(-50%, -42%) scale(0.86); opacity: 0; filter: brightness(1.8); }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: brightness(1); }
}
@keyframes crewSpotlightBreathe {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc) 32%, transparent), 0 20px 70px rgba(0,0,0,0.65), 0 0 24px var(--tg); }
  50% { box-shadow: 0 0 0 1px var(--tc), 0 20px 70px rgba(0,0,0,0.65), 0 0 48px var(--tg); }
}
@keyframes crewSpotlightOut {
  to { transform: translate(-50%, -58%) scale(0.94); opacity: 0; filter: brightness(0.7); }
}

@keyframes corePop {
  from { transform: scale(0.88); opacity: 0; filter: brightness(1.6); }
  to { transform: scale(1); opacity: 1; filter: brightness(1); }
}
@keyframes coreLeave {
  to { transform: scale(0.94); opacity: 0; filter: brightness(0.7); }
}

/* section focus (director spotlight) */
.section-focus { box-shadow: 0 0 0 1px var(--focus-c, var(--gold)), 0 0 22px var(--focus-c, rgba(255,215,94,0.4)) !important; border-radius: var(--radius); transition: box-shadow 0.2s; position: relative; z-index: 3; }
.focus-surge { --focus-c: var(--surge-glow); }
.focus-luck { --focus-c: var(--luck-glow); }
.focus-crypto { --focus-c: var(--crypto-glow); }
.focus-damage { --focus-c: rgba(255,159,67,0.55); }
.focus-heat { --focus-c: rgba(255,77,94,0.55); }
.focus-barrier { --focus-c: rgba(255,93,122,0.55); }

/* resolving lock */
#screen-game.resolving #hand-cards,
#screen-game.resolving #type-cards,
#screen-game.resolving #actions .btn:not(#btn-restart):not(#btn-stepmode) { pointer-events: none; }
#screen-game.resolving #type-cards,
#screen-game.resolving #actions .btn:not(#btn-restart):not(#btn-stepmode) { opacity: 0.45; }

/* ---------- damage impact: yellow shockwave + screen shake ---------- */
.fx-shockwave {
  position: fixed; z-index: 79; pointer-events: none;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border: 3px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(255, 215, 94, 0.55), inset 0 0 14px rgba(255, 215, 94, 0.35);
  animation: shockwaveFx 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes shockwaveFx {
  0% { transform: scale(1); opacity: 0.95; border-width: 4px; }
  70% { opacity: 0.45; }
  /* ~360px ring ≈ a third of the screen */
  100% { transform: scale(18); opacity: 0; border-width: 1px; }
}
@keyframes screenShakeFx {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-7px, 3px); }
  30% { transform: translate(6px, -4px); }
  45% { transform: translate(-5px, -2px); }
  60% { transform: translate(4px, 3px); }
  75% { transform: translate(-2px, 1px); }
  90% { transform: translate(1px, -1px); }
}
#screen-game.screen-shake { animation: screenShakeFx 0.45s ease-out; }

@keyframes barrierCrushProjectile {
  0% {
    transform: translate(var(--sx), var(--sy)) translate(-50%, -50%) scale(0.48) rotate(-18deg);
    opacity: 0;
    filter: brightness(1.4);
  }
  18% {
    opacity: 1;
    transform: translate(var(--sx), var(--sy)) translate(-50%, -50%) scale(1.08) rotate(-10deg);
  }
  78% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) translate(-50%, -50%) scale(1.18) rotate(7deg);
  }
  100% {
    transform: translate(var(--tx), var(--ty)) translate(-50%, -50%) scale(1.55, 0.62) rotate(0deg);
    opacity: 0;
    filter: brightness(1.8);
  }
}

@keyframes barrierCrushedFx {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  18% { transform: scale(1.08, 0.76); filter: brightness(1.75); }
  40% { transform: scale(0.96, 1.05); }
  62% { transform: scale(1.02, 0.94); }
}
#score-core.barrier-crushed { animation: barrierCrushedFx 0.54s cubic-bezier(0.2, 0.9, 0.22, 1); }

@keyframes barrierCrushSourceFx {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(255,93,122,0.18), inset 0 0 22px rgba(255,93,122,0.06); }
  50% { transform: scale(1.03); box-shadow: 0 0 0 2px rgba(255,93,122,0.7), 0 0 34px rgba(255,93,122,0.48), inset 0 0 28px rgba(255,93,122,0.16); }
}
.barrier-inline.barrier-crush-source { animation: barrierCrushSourceFx 0.76s ease-in-out; }

/* ---------- heat spike: vibrate + rapid red flash (0.7s) ---------- */
@keyframes heatHitFx {
  0%, 100% { transform: translateX(0); background: var(--panel); border-color: var(--line); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); background: rgba(120, 10, 22, 0.55); border-color: var(--red); box-shadow: 0 0 26px rgba(255, 77, 94, 0.5); }
  20%, 40%, 60%, 80% { transform: translateX(3px); background: var(--panel); border-color: var(--line); box-shadow: none; }
}
#heat-panel.heat-hit { animation: heatHitFx 0.7s linear; }

/* ---------- crew-effect target: highlight + wiggle while affected ---------- */
@keyframes uiHitFx {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-1.2deg) scale(1.03); }
  40% { transform: rotate(1.2deg) scale(1.04); }
  60% { transform: rotate(-0.8deg) scale(1.02); }
  80% { transform: rotate(0.6deg) scale(1.01); }
}
.ui-hit {
  animation: uiHitFx 0.7s ease-in-out;
  box-shadow: 0 0 0 1px var(--hit-c, var(--gold)), 0 0 26px var(--hit-c, rgba(255, 215, 94, 0.5)) !important;
  border-radius: var(--radius);
  position: relative; z-index: 6;
}

/* ---------- trickle-down source & receiver highlights ---------- */
@keyframes tpSourcePulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--tc), 0 0 10px var(--tg); transform: scale(1); }
  50% { box-shadow: 0 0 0 2px var(--tc), 0 0 30px var(--tg); transform: scale(1.05); }
}
.tp-bar.tp-source { animation: tpSourcePulse 0.55s ease-in-out infinite; z-index: 5; position: relative; }
@keyframes slotReceivePulse {
  0%, 100% { box-shadow: inset 0 0 12px var(--tg), 0 0 8px var(--tg); }
  50% { box-shadow: inset 0 0 34px var(--tg), 0 0 30px var(--tg), 0 0 0 2px var(--tc); }
}
.crew-slot.slot-receiving { animation: slotReceivePulse 0.55s ease-in-out infinite; border-color: var(--tc) !important; border-style: solid !important; z-index: 5; }

/* ---------- "Overflow!" bubble on downstream slots ---------- */
@keyframes overflowWiggle {
  0%, 100% { transform: translateX(-50%) rotate(-4deg) scale(1); }
  25% { transform: translateX(-50%) rotate(4deg) scale(1.09); }
  50% { transform: translateX(-50%) rotate(-3deg) scale(1.02); }
  75% { transform: translateX(-50%) rotate(3deg) scale(1.07); }
}
.overflow-bubble {
  position: absolute; top: -14px; left: 50%; z-index: 22;
  font-family: var(--mono); font-size: 11px; font-weight: 900; letter-spacing: 0.04em;
  color: #140b02; background: var(--gold);
  border-radius: 999px; padding: 4px 10px;
  box-shadow: 0 0 18px rgba(255, 215, 94, 0.75), 0 3px 10px rgba(0, 0, 0, 0.5);
  animation: overflowWiggle 0.5s ease-in-out infinite;
  pointer-events: none;
  white-space: nowrap;
}
.overflow-bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--gold); border-bottom: none;
}

@keyframes synergyArrowWiggle {
  0%, 100% { transform: translate(50%, -50%) rotate(-5deg) scale(1); }
  35% { transform: translate(50%, -56%) rotate(5deg) scale(1.12); }
  70% { transform: translate(50%, -46%) rotate(-2deg) scale(1.04); }
}
.synergy-arrow {
  position: absolute; right: -28px; top: 46%; z-index: 90;
  width: 54px; height: 34px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 30px; font-weight: 950;
  color: var(--gold); background: rgba(7,11,18,0.96);
  border: 2px solid var(--gold); border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255,215,94,0.18), 0 0 30px rgba(255,215,94,0.85), 0 8px 24px rgba(0,0,0,0.72);
  animation: synergyArrowWiggle 0.65s ease-in-out infinite;
  pointer-events: none;
}
.synergy-arrow.live { color: #fff; background: linear-gradient(135deg, var(--gold-deep), #ff9f43); text-shadow: 0 0 12px rgba(255,255,255,0.9); }
.crew-slot.synergy-hit {
  position: relative;
  z-index: 80 !important;
  box-shadow: inset 0 0 26px var(--tg), 0 0 36px rgba(255,215,94,0.62) !important;
}
.crew-slot.synergy-hit .slot-crew { position: relative; z-index: 2; }

/* ---------- firewall cleared: big whole-screen flashing ---------- */
@keyframes flashClear {
  0% { opacity: 0; }
  8% { opacity: 0.9; }
  18% { opacity: 0.1; }
  30% { opacity: 0.8; }
  45% { opacity: 0.15; }
  60% { opacity: 0.65; }
  100% { opacity: 0; }
}
#screenfx.flash-clear::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255, 240, 180, 0.85), rgba(255, 195, 60, 0.45) 60%, rgba(255, 160, 40, 0.2));
  animation: flashClear 1.15s ease-out forwards;
}