:root {
  --full-purple: #24102f;
  --full-purple-deep: #0f0717;
  --full-magenta: #ff4fa7;
  --full-violet: #8f5cff;
  --spike-gold: #ffd766;
}

.reward-free {
  color: #06120e !important;
  background: #69f2c5 !important;
  text-shadow: none !important;
  box-shadow: 0 0 14px rgba(105,242,197,.72);
  font-weight: 1000 !important;
}

body {
  background:
    linear-gradient(145deg, #08050d 0%, #1a0b25 44%, #31123d 100%);
}

#phone {
  background: #110819;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.82), 0 0 50px rgba(255, 79, 167, 0.16);
}

#phone::before {
  border-color: rgba(255, 116, 187, 0.18);
}

.screen {
  background:
    radial-gradient(circle at 50% 0%, rgba(143, 92, 255, 0.16), transparent 38%),
    linear-gradient(180deg, #1a0b25 0%, #0d0714 55%, #07050b 100%);
}

.prep-screen,
#prepScreen {
  gap: 10px;
  overflow: hidden;
  padding: 44px 14px 14px;
  background:
    linear-gradient(180deg, rgba(48, 14, 58, 0.97), rgba(13, 7, 20, 0.99)),
    #13091d;
}

.prep-map-header {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  text-align: center;
}
.prep-map-header p {
  margin: 0 0 3px;
  color: #59f0c4;
  font: 1000 19px/.95 var(--font);
  text-transform: uppercase;
  text-shadow: 4px 4px 0 #000, 0 0 20px rgba(89,240,196,.78);
}
.prep-map-header h1 {
  color: #ffd766;
  font: 1000 45px/.85 var(--font);
  text-transform: uppercase;
  text-shadow: 6px 6px 0 #000, 0 0 28px rgba(255,215,102,.74);
  animation: prepTitleGlow 2.2s ease-in-out infinite;
}
.prep-map-stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 190px;
  overflow: hidden;
  border: 2px solid rgba(89,240,196,.28);
  border-radius: 8px;
  background: #111118;
  box-shadow: inset 0 0 34px rgba(0,0,0,.62), 0 0 25px rgba(89,240,196,.09);
  opacity: 0;
}
#prepScreen.prep-map-screen.casino-entering.map-revealing > .prep-map-stage {
  animation: prepMapFadeIn 3s cubic-bezier(.2,.7,.2,1) both;
}
.prep-map-grid {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .16;
  background-image: linear-gradient(rgba(89,240,196,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(89,240,196,.13) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.prep-route-map {
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 0;
  overflow-y: hidden;
  scrollbar-width: none;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}
.prep-route-map::-webkit-scrollbar { display: none; }
.prep-briefings {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: grid;
  gap: 6px;
}
.prep-briefings article {
  position: relative;
  min-height: 58px;
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 2px solid rgba(89,240,196,.5);
  border-radius: 7px;
  color: #fff;
  background: rgba(13,10,20,.96);
  box-shadow: 4px 4px 0 #000, inset 0 0 18px rgba(89,240,196,.07);
}
.prep-briefings article:nth-child(2) { border-color: rgba(255,215,102,.58); box-shadow: 4px 4px 0 #000, inset 0 0 18px rgba(255,215,102,.07); }
.prep-briefings strong { color: #59f0c4; font: 1000 12px/1 var(--mono); }
.prep-briefings article:nth-child(2) strong { color: #ffd766; }
.prep-briefings span { color: #eee8f1; font: 800 10px/1.25 var(--mono); }
#prepScreen .play-button { flex: 0 0 76px; width: 100%; margin-top: 0; }

@keyframes prepMapFadeIn {
  0% { opacity: 0; filter: brightness(.45); }
  24% { opacity: .72; filter: brightness(.7); }
  100% { opacity: 1; filter: brightness(1); }
}
@keyframes prepTitleGlow {
  0%, 100% { filter: brightness(.9); }
  50% { filter: brightness(1.22); }
}

.server-start-screen {
  background:
    radial-gradient(circle at 50% 20%, rgba(89,240,196,.18), transparent 34%),
    linear-gradient(180deg, rgba(48,14,58,.98), rgba(13,7,20,.99));
}
.server-start-screen > header { text-align: center; }
.server-start-screen > header h1 { color: #ffd766; font-size: 48px; text-transform: uppercase; text-shadow: 6px 6px 0 #000, 0 0 28px rgba(255,215,102,.62); }
.server-start-card { min-height: 190px; display: grid; grid-template-columns: 108px 1fr; align-items: center; gap: 16px; margin-top: 28px; padding: 18px; border: 3px solid rgba(89,240,196,.5); border-radius: 8px; background: rgba(17,10,24,.9); box-shadow: 7px 7px 0 #000, inset 0 0 28px rgba(89,240,196,.08); }
.server-start-card h2 { color: #fff; font-size: 27px; text-shadow: 3px 3px 0 #000; }
.server-start-card p:not(.eyebrow) { margin-top: 10px; color: #d8cfdf; font-size: 15px; line-height: 1.35; }
.server-start-signal { width: 96px; height: 96px; display: grid; place-items: center; border: 4px solid #59f0c4; border-radius: 50%; box-shadow: 0 0 28px rgba(89,240,196,.75), inset 0 0 20px rgba(89,240,196,.22); animation: serverSignalBreathe 1.8s ease-in-out infinite; }
.server-start-signal span { width: 50px; height: 50px; border: 8px double #ffd766; border-radius: 50%; box-shadow: 0 0 15px #ffd766; }
.server-start-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.server-start-stats article { min-height: 88px; display: grid; align-content: center; gap: 7px; padding: 12px; border: 2px solid rgba(255,215,102,.3); border-radius: 7px; background: rgba(10,7,15,.76); text-align: center; }
.server-start-stats small { color: #a99caf; font: 1000 9px/1 var(--mono); }
.server-start-stats strong { color: #ffd766; font: 1000 15px/1.05 var(--mono); overflow-wrap: anywhere; }
.server-start-spacer { flex: 1; min-height: 30px; }
.server-start-button { flex: 0 0 76px; width: 100%; }
@keyframes serverSignalBreathe { 0%,100% { transform: scale(.96); filter: brightness(.88); } 50% { transform: scale(1.04); filter: brightness(1.3); } }

.casino-card,
.rules-strip,
.loadout-panel {
  border-color: rgba(255, 99, 177, 0.28);
  background: rgba(25, 9, 33, 0.88);
}

.spike-lane-wrap {
  flex: 0 0 auto;
  margin-top: 3px;
}

#gameScreen {
  isolation: isolate;
  padding-top: 42px;
  padding-bottom: 8px;
  background: #09050d;
}

.gameplay-casino-backdrop {
  position: absolute;
  z-index: 0;
  inset: -8%;
  overflow: hidden;
  pointer-events: none;
  background: #09050d;
}

#gameScreen > :not(.gameplay-casino-backdrop):not(.abandon-run-button) {
  position: relative;
  z-index: 1;
}

#gameScreen > .abandon-run-button {
  position: absolute;
  z-index: 12;
  top: 8px;
  left: 10px;
  min-width: 108px;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 72, 103, .72);
  border-radius: 6px;
  color: #ff8ca0;
  background: rgba(39, 5, 14, .82);
  box-shadow: inset 0 0 12px rgba(255, 49, 89, .12), 0 0 12px rgba(255, 49, 89, .14);
  font: 1000 9px/1 var(--mono);
  letter-spacing: 0;
  touch-action: manipulation;
}

#gameScreen > .abandon-run-button:active {
  color: #fff;
  border-color: #ff3159;
  background: rgba(91, 7, 27, .96);
  transform: translateY(1px);
}

.gameplay-casino-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,5,14,.64), rgba(10,5,14,.52) 42%, rgba(7,4,10,.76)),
    rgba(19,7,25,.16);
}

.gameplay-casino-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(4px) brightness(.62) saturate(.85);
  opacity: .88;
  transform: scale(1.08);
  animation: casinoBackdropDrift 70s ease-in-out infinite alternate;
}

@keyframes casinoBackdropDrift {
  0% { transform: scale(1.08) translate3d(-1%, -.5%, 0); }
  100% { transform: scale(1.18) translate3d(1%, .75%, 0); }
}

#gameScreen .ai-hp { margin-top: 0; }
#gameScreen .ai-hp-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 142px;
  align-items: stretch;
  gap: 8px;
}
#gameScreen .ai-status { min-width: 0; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; min-height: 60px; padding: 8px 9px; }
#gameScreen .ai-eye { width: 40px; height: 40px; }
#gameScreen .ai-eye span { width: 22px; height: 10px; }
#gameScreen .ai-status b { font-size: 13px; }
#gameScreen .ai-status span {
  display: -webkit-box;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.12;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#gameScreen .ai-hp-head {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 6px;
  margin: 0;
  padding: 8px 9px;
  border: 2px solid rgba(255,255,255,.34);
  border-radius: 7px;
  background: rgba(44,3,13,.82);
  box-shadow: inset 0 0 18px rgba(255,23,63,.11), 0 0 12px rgba(255,255,255,.07);
  text-align: right;
}
#gameScreen .ai-hp-head span:first-child {
  max-width: 100%;
  color: #ffc2cb;
  font: 1000 9px/1.05 var(--mono);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
#gameScreen .ai-hp-head span:last-child {
  color: #fff;
  font: 1000 24px/.9 var(--mono);
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 2px 2px 0 #6e0016, 0 0 15px rgba(255,49,89,.72);
}
#gameScreen .ai-hp-track { height: 20px; margin-top: 6px; }
#gameScreen .heat-meter { margin-top: 8px; }
#gameScreen .heat-meter-track { height: 15px; }
#gameScreen .crew-lane-wrap { margin-top: 7px; }
#gameScreen .crew-lane {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  overflow: visible;
  padding: 0;
  scroll-snap-type: none;
}
#gameScreen .lane-slot { width: 100%; height: auto; aspect-ratio: 2 / 3; flex-basis: auto; }
#gameScreen .run-status-row { margin-top: 8px; }
#gameScreen .game-chip-pill,
#gameScreen .barrier-status { height: 40px; }
#gameScreen .score-area { height: 96px; min-height: 96px; margin-top: 5px; }
#gameScreen .play-stage { margin-top: 5px; }
#gameScreen .card-dock { margin-top: 6px; }
#gameScreen .inert-cards { height: 124px; }
#gameScreen .hand-actions { flex-basis: 50px; min-height: 50px; margin-top: 12px; translate: 0; }
#gameScreen .hand-actions .play-hand { min-height: 46px; }
#gameScreen .game-fill { min-height: 2px; flex-grow: .2; }
#gameScreen.selecting-hand .game-fill { flex-grow: 1; }

.game-spike-slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  height: auto;
}

.game-spike-slot {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 215, 102, 0.58);
  border-radius: 6px;
  color: rgba(255, 215, 102, 0.72);
  background: linear-gradient(145deg, rgba(64, 20, 78, 0.96), rgba(15, 8, 22, 0.98));
  box-shadow: inset 0 0 14px rgba(255, 79, 167, 0.12);
}

.game-spike-slot.empty {
  display: grid;
  place-items: center;
  border-style: dashed;
  border-color: rgba(184, 190, 202, .58);
  color: rgba(220, 224, 232, .72);
  background: linear-gradient(145deg, rgba(54, 55, 65, .84), rgba(20, 20, 25, .96));
  box-shadow: inset 0 0 14px rgba(220, 224, 232, .08);
  font-size: 25px;
}

.game-spike-slot.ultra-charged,
.van-spike-slot.ultra-charged {
  --ultra-charge: #6cf9ff;
  border-color: #c8ffff;
  box-shadow:
    inset 0 0 16px rgba(71,243,255,.28),
    0 0 9px rgba(108,249,255,.9),
    0 0 22px rgba(91,126,255,.6);
  isolation: isolate;
}

.game-spike-slot.ultra-charged::before,
.van-spike-slot.ultra-charged::before {
  content: '';
  position: absolute;
  z-index: 8;
  inset: 0;
  padding: 3px;
  border-radius: inherit;
  background: linear-gradient(90deg, #3e75ff, #7cffff, #fff, #42dfff, #3e75ff) 0 0 / 240% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 5px var(--ultra-charge));
  animation: ultraChargeFlow 1.05s linear infinite;
  pointer-events: none;
}

.game-spike-slot.ultra-charged::after,
.van-spike-slot.ultra-charged::after {
  content: '';
  position: absolute;
  z-index: 7;
  inset: 3px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 8% 18%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 94% 37%, #79ffff 0 1px, transparent 2px),
    radial-gradient(circle at 18% 91%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 82% 83%, #5fa7ff 0 1px, transparent 2px);
  filter: drop-shadow(0 0 5px var(--ultra-charge));
  animation: ultraChargeFlicker .72s steps(4, end) infinite;
  pointer-events: none;
}

.game-spike-slot.spike-ultra-triggered {
  animation: ultraChargeTrigger 720ms cubic-bezier(.16,1,.3,1);
  z-index: 9;
}

@keyframes ultraChargeFlow { to { background-position: 240% 0; } }
@keyframes ultraChargeFlicker {
  0%, 100% { opacity: .38; filter: drop-shadow(0 0 4px var(--ultra-charge)); }
  50% { opacity: 1; filter: drop-shadow(0 0 11px #fff); }
}
@keyframes ultraChargeTrigger {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  35% { transform: translateY(-8px) scale(1.14); filter: brightness(2.2) drop-shadow(0 0 22px #76ffff); }
  62% { transform: translateY(1px) scale(.98); filter: brightness(1.35); }
}

#gameScreen .lane-slot.empty {
  border: 2px dashed rgba(255, 215, 102, .76);
  background: linear-gradient(145deg, rgba(74, 58, 15, .52), rgba(25, 19, 7, .9));
  box-shadow: inset 0 0 16px rgba(255, 215, 102, .1);
  animation: crewEmptyWave 3s ease-out infinite;
}

#gameScreen .lane-slot.empty::after { color: rgba(255, 215, 102, .88); }
#gameScreen .lane-slot.empty:nth-child(2) { animation-delay: 80ms; }
#gameScreen .lane-slot.empty:nth-child(3) { animation-delay: 160ms; }
#gameScreen .lane-slot.empty:nth-child(4) { animation-delay: 240ms; }
#gameScreen .lane-slot.empty:nth-child(5) { animation-delay: 320ms; }

.game-spike-art,
.game-spike-art img {
  display: block;
  width: 100%;
  height: 100%;
}

.game-spike-art img { object-fit: cover; }

#gameScreen .play-stage {
  transition: min-height 260ms cubic-bezier(.2,.8,.25,1), height 260ms cubic-bezier(.2,.8,.25,1), margin 220ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

#gameScreen.selecting-hand .play-stage {
  min-height: 58px;
  height: 58px;
}

#gameScreen.selecting-hand .stage-cards { gap: 2px; }
#gameScreen.selecting-hand .stage-cards .poker-card {
  width: 40px;
  height: 54px;
  margin: 0 -3px;
}
#gameScreen.selecting-hand .stage-hint { font-size: 8px; }

#gameScreen.resolving-hand .play-stage {
  min-height: 132px;
  height: 132px;
  border-color: rgba(120, 200, 255, 0.52);
  background: rgba(20, 40, 70, 0.32);
}

#gameScreen.resolving-hand .card-dock {
  margin-top: auto;
  translate: 0 12px;
}

#gameScreen.resolving-hand .hand-actions,
#gameScreen.crew-call-active .hand-actions,
#gameScreen.crew-intro-sequence .hand-actions {
  flex-basis: 0;
  min-height: 0;
  height: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  translate: 0 18px;
  pointer-events: none;
}

#gameScreen .hand-actions {
  transition: opacity 180ms ease, min-height 220ms ease, flex-basis 220ms ease, margin 220ms ease, translate 220ms ease;
}

#gameScreen.crew-call-active .card-dock,
#gameScreen.crew-call-active .inert-cards,
#gameScreen.crew-call-active .poker-card {
  pointer-events: none !important;
}

.crew-call-sequence {
  --crew-call-solid: #62eeb6;
  position: absolute;
  z-index: 580;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.crew-call-sequence.family-SURGE { --crew-call-solid: #ffad3d; }
.crew-call-sequence.family-LUCK { --crew-call-solid: #b56cff; }
.crew-call-sequence.family-CRYPTO { --crew-call-solid: #63e4ad; }

.crew-call-window {
  position: absolute;
  left: 50%;
  top: 22%;
  /* Same presentation as the detail-popup artwork: full 2:3 portrait, rounded, with a
     type-coloured frame and glow. The static/noise overlay, the CALLING.../CONNECTED
     readout and the feed-lock beat all still run on top of it. */
  width: 206px;
  height: 309px;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -18px) scale(.82);
  transform-origin: top center;
  transition: top 520ms cubic-bezier(.22,1,.3,1), transform 520ms cubic-bezier(.22,1,.3,1), opacity 300ms ease;
  border: 3px solid var(--crew-call-solid);
  border-radius: 12px;
  background: #09080c;
  box-shadow:
    0 0 18px var(--crew-call-solid),
    0 0 46px color-mix(in srgb, var(--crew-call-solid) 45%, transparent),
    0 26px 46px rgba(0, 0, 0, .8);
}

/* the portrait fills the window edge to edge, like the enlarged detail artwork */
.crew-call-avatar { border-radius: 0; }
.crew-call-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.crew-call-sequence.show-call .crew-call-window {
  opacity: 1;
}

.crew-call-sequence.show-call:not(.show-effect) .crew-call-window {
  animation: crewCallWindowIn 360ms cubic-bezier(.18,1.45,.3,1) both;
}

.crew-call-sequence.show-effect .crew-call-window {
  top: 4%;
  transform: translate(-50%, 0) scale(.55);
}

.crew-call-sequence.effect-exit .crew-call-window {
  opacity: 0;
  transform: translate(-50%, -10px) scale(.5);
}

.crew-call-static {
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: .82;
  background:
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.8) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.28) 0 1px, rgba(0,0,0,.5) 1px 4px),
    #15121a;
  background-size: 7px 7px, 100% 5px, auto;
  animation: crewCallStatic 110ms steps(2, end) infinite;
}

.crew-call-sequence.connected .crew-call-static { opacity: .17; }

.crew-call-status {
  position: absolute;
  z-index: 7;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 8px 9px;
  border: 3px solid #050407;
  color: #050407;
  background: var(--crew-call-solid);
  box-shadow: 4px 4px 0 #050407;
  font: 1000 15px/1 var(--mono);
  text-align: center;
}

.crew-call-feed,
.crew-call-avatar,
.crew-call-avatar img {
  width: 100%;
  height: 100%;
}

.crew-call-feed { position: relative; z-index: 2; opacity: 0; }
.crew-call-sequence.connected .crew-call-feed { opacity: 1; animation: crewFeedLock 360ms steps(3, end) both; }
.crew-call-avatar { position: relative; overflow: hidden; background: #111; }
.crew-call-avatar img { display: block; object-fit: cover; }
.crew-call-avatar .crew-portrait-effect-icon { width: 34px; height: 34px; }

.crew-effect-broadcast {
  position: absolute;
  isolation: isolate;
  z-index: 9;
  left: -8%;
  right: -8%;
  top: 27%;
  min-height: 132px;
  display: grid;
  place-content: center;
  gap: 7px;
  padding: 17px 40px;
  opacity: 0;
  transform: translateX(-110%) rotate(-2deg);
  border-block: 7px solid #050407;
  color: #050407;
  text-align: center;
  background: var(--crew-call-solid);
  box-shadow: 0 0 48px var(--crew-call-solid), 0 12px 0 #050407;
}

.crew-effect-broadcast::before,
.crew-effect-broadcast::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.crew-effect-broadcast::before {
  opacity: .2;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.72) 0 7px, transparent 7px 29px);
  background-size: 52px 52px;
  animation: crewBannerParallaxNear 4.2s linear infinite;
}

.crew-effect-broadcast::after {
  opacity: .2;
  background:
    radial-gradient(circle, #050407 0 2px, transparent 2.5px) 0 0 / 27px 27px,
    linear-gradient(90deg, transparent 48%, rgba(5,4,7,.45) 49% 51%, transparent 52%) 0 0 / 62px 62px;
  animation: crewBannerParallaxFar 7s linear infinite;
}

.crew-call-sequence.family-LUCK.family-SURGE .crew-effect-broadcast {
  background: linear-gradient(90deg, #b56cff, #ffad3d);
}

.crew-call-sequence.show-effect .crew-effect-broadcast {
  opacity: 1;
  animation: crewEffectBroadcastIn 420ms cubic-bezier(.16,1,.3,1) both;
}

.crew-call-sequence.show-effect.effect-exit .crew-effect-broadcast {
  animation: crewEffectBroadcastOut 320ms cubic-bezier(.7,0,.84,0) both;
}

.crew-effect-broadcast span,
.crew-effect-broadcast strong { position: relative; z-index: 1; }
.crew-effect-broadcast span { font: 1000 12px/1 var(--mono); }
.crew-effect-broadcast strong {
  max-width: 360px;
  font: 1000 42px/.9 var(--mono);
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-shadow: 3px 3px 0 rgba(255,255,255,.72);
}

.crew-effect-flight {
  position: absolute !important;
  z-index: 590 !important;
  margin: 0 !important;
  pointer-events: none !important;
  animation: none !important;
  transform-origin: center !important;
}

.crew-effect-origin { opacity: .16 !important; filter: saturate(.25) brightness(.7); }
.crew-effect-flight.effect-applied .card-face { animation: crewEffectApplied 390ms cubic-bezier(.18,1.5,.3,1) both; }

#gameScreen .crew-state-banner {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  top: 50%;
  min-height: 23px;
  display: grid;
  place-items: center;
  padding: 4px 2px;
  transform: translateY(-50%);
  border-block: 2px solid #07050a;
  color: #07050a;
  background: var(--crew-call-solid, #63e4ad);
  box-shadow: 0 0 18px var(--crew-call-solid, #63e4ad), 0 5px 0 rgba(0,0,0,.72);
  font: 1000 10px/1 var(--mono);
}

#gameScreen .lane-card.family-SURGE { --crew-call-solid: #ffad3d; }
#gameScreen .lane-card.family-LUCK { --crew-call-solid: #b56cff; }
#gameScreen .lane-card.family-CRYPTO { --crew-call-solid: #63e4ad; }
#gameScreen .lane-card.crew-state-ready {
  border-color: var(--crew-call-solid, #63e4ad);
  animation: crewReadyBreathe 1.8s ease-in-out infinite;
}
#gameScreen .lane-card.crew-state-ready .crew-state-banner {
  min-height: 29px;
  font-size: 14px;
  animation: crewReadyFlash 920ms steps(2, end) infinite;
}
/* Dim the portrait, not the card: the old card-level filter also greyed out the
   cooldown readout on top of it, which is why the countdown looked washed. */
#gameScreen .lane-card.crew-state-cooldown { filter: none; animation: none; }
#gameScreen .lane-card.crew-state-cooldown .lane-avatar { filter: grayscale(.72) brightness(.58); }
#gameScreen .lane-card.crew-state-cooldown .crew-cooldown-banner {
  inset: 0;
  top: 0;
  min-height: 100%;
  transform: none;
  align-content: center;
  gap: 2px;
  border: 0;
  color: #fff;
  background: rgba(18, 8, 14, .38);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .44);
}
#gameScreen .crew-cooldown-banner small { font: 1000 8px/1 var(--mono); }
#gameScreen .crew-cooldown-banner strong {
  color: #ff3159;
  font: 1000 48px/.82 var(--mono);
  text-shadow: 0 0 10px rgba(255, 49, 89, .8), 3px 3px 0 #080509;
}
#gameScreen .lane-card.crew-state-cooldown .online-dot { opacity: .28; animation: none; }

.crew-lifecycle-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 2px solid #63e4ad;
  border-radius: 6px;
  color: #08060b;
  background: #63e4ad;
  font: 800 10px/1.2 var(--mono);
}
.crew-lifecycle-note span { text-align: right; }
.crew-lifecycle-note.cooldown { border-color: #746b7d; color: #f5f0fa; background: #332c3a; }

@keyframes crewCallWindowIn {
  0% { opacity: 0; transform: translate(-50%, -22px) scale(.72) rotate(-4deg); }
  70% { opacity: 1; transform: translate(-50%, 3px) scale(1.04) rotate(1deg); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0); }
}
@keyframes crewCallStatic { to { background-position: 5px -3px, 0 4px, 0 0; } }
@keyframes crewFeedLock {
  0% { opacity: 0; filter: contrast(3) brightness(2); transform: translateX(-8px); }
  35% { opacity: 1; transform: translateX(7px); }
  100% { opacity: 1; filter: none; transform: translateX(0); }
}
@keyframes crewEffectBroadcastIn {
  0% { opacity: 0; transform: translateX(-110%) rotate(-2deg); }
  72% { opacity: 1; transform: translateX(3%) rotate(1deg); filter: brightness(1.25); }
  100% { opacity: 1; transform: translateX(0) rotate(-1deg); filter: brightness(1); }
}
@keyframes crewEffectBroadcastOut {
  0% { opacity: 1; transform: translateX(0) rotate(-1deg); filter: brightness(1); }
  28% { opacity: 1; transform: translateX(-2%) rotate(1deg); filter: brightness(1.35); }
  100% { opacity: 0; transform: translateX(110%) rotate(2deg); }
}
@keyframes crewBannerParallaxNear { to { background-position: 0 104px; } }
@keyframes crewBannerParallaxFar { to { background-position: 0 124px, 0 186px; } }
@keyframes crewEffectApplied {
  0% { filter: brightness(1); transform: scale(1); }
  48% { filter: brightness(2.4) drop-shadow(0 0 24px var(--effect-flight-color, #fff)); transform: scale(1.12); }
  100% { filter: brightness(1.2); transform: scale(1); }
}
@keyframes crewReadyFlash { 50% { filter: brightness(1.55); box-shadow: 0 0 25px var(--crew-call-solid, #63e4ad); } }
@keyframes crewReadyBreathe {
  0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,.3), 0 0 8px color-mix(in srgb, var(--crew-call-solid, #63e4ad) 45%, transparent); }
  50% { box-shadow: 0 8px 22px rgba(0,0,0,.3), 0 0 25px var(--crew-call-solid, #63e4ad); }
}
@keyframes crewEmptyWave {
  0%, 12%, 100% { border-color: rgba(255, 215, 102, .58); box-shadow: inset 0 0 16px rgba(255, 215, 102, .08), 0 0 0 rgba(255, 215, 102, 0); }
  5% { border-color: #ffd766; box-shadow: inset 0 0 20px rgba(255, 215, 102, .22), 0 0 18px rgba(255, 215, 102, .52); }
}

.generic-spike-art {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 5px;
  color: #09050b;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.2) 0 7px, transparent 7px 14px),
    linear-gradient(145deg, var(--rarity-color, #ffd766), #ff4fa7);
  font: 1000 18px/0.94 var(--mono);
  text-align: center;
  text-transform: uppercase;
}

.game-spike-art.generic-spike-art { font-size: 15px; }
.van-slot-art.generic-spike-art { font-size: 14px; }
.van-offer-card > .generic-spike-art { font-size: 24px; }
.spike-detail-art > .generic-spike-art { font-size: 28px; }

.spike-online-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #54ffaf;
  box-shadow: 0 0 10px #54ffaf;
  animation: fullPulse 1.45s ease-in-out infinite;
}

.game-spike-slot.spike-triggered {
  animation: spikeTriggered 700ms cubic-bezier(.16,1,.3,1);
}
.game-spike-slot.spike-scoring { animation: spikeScoring 900ms cubic-bezier(.16,1,.3,1); z-index: 8; }
.game-spike-slot.destroyed { filter: grayscale(.9) brightness(.45); border-color: #ff3159; }
.spike-offline-label { position: absolute; inset: auto 3px 3px; padding: 2px 4px; color: #fff; background: #c20d31; font: 1000 7px var(--mono); }

.deck-view-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 8px 14px 10px;
}

.deck-view-tabs button {
  min-height: 42px;
  border: 2px solid rgba(255,255,255,0.16);
  border-radius: 6px;
  color: #b9a8c5;
  background: #1b0d23;
  font: 1000 11px var(--mono);
}

.deck-view-tabs button.active {
  border-color: var(--spike-gold);
  color: #100713;
  background: var(--spike-gold);
  box-shadow: 0 0 18px rgba(255, 215, 102, 0.42);
}

.deck-cell.spent .deck-card {
  filter: grayscale(0.82) brightness(0.48);
}

.deck-cell.spent::after {
  content: 'SPENT';
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 5;
  padding: 3px 6px;
  border: 2px solid #ff3159;
  color: #ff3159;
  transform: translate(-50%, -50%) rotate(-12deg);
  font: 1000 9px var(--mono);
  background: rgba(8, 3, 8, 0.82);
}

.deck-cell { position: relative; }

.hand-level-grid {
  grid-template-columns: 1fr;
  gap: 8px;
  overflow-y: auto !important;
  padding: 6px 4px 20px;
}

.hand-level-row {
  display: grid;
  gap: 6px;
  padding: 10px 11px 9px;
  border: 2px solid rgba(255, 215, 102, .36);
  border-radius: 6px;
  color: #f5eef8;
  background: rgba(24, 10, 32, .92);
  box-shadow: inset 0 0 18px rgba(181, 108, 255, .08);
}

.hand-level-row-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.hand-level-row-head strong { min-width: 0; font: 1000 13px/1 var(--font); }

.hand-level-row-head span {
  color: #59f0c4;
  font: 1000 15px/1 var(--mono);
  text-shadow: 0 0 7px #59f0c4, 0 0 16px rgba(89,240,196,.78);
}

.hand-level-row-stats { display: flex; align-items: center; gap: 7px; }

.hand-points-pill,
.hand-mult-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 5px 9px;
  border: 2px solid #09050d;
  border-radius: 999px;
  color: #09050d;
  font: 1000 12px/1 var(--mono);
  box-shadow: 3px 3px 0 #09050d;
  white-space: nowrap;
}

.hand-points-pill { background: #ffd633; }
.hand-mult-pill { color: #fff; background: #ff4fc3; text-shadow: 1px 1px 0 #09050d; }

.hand-level-row > small { color: #a99ab6; font: 900 9px/1 var(--mono); }

.hand-level-row.maxed {
  border-color: #59f0c4;
  box-shadow: inset 0 0 18px rgba(89, 240, 196, .1), 0 0 13px rgba(89, 240, 196, .16);
}

.hand-level-row.maxed > small { color: #59f0c4; }

.hand-level-up {
  position: absolute;
  z-index: 620;
  inset: 0;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  overflow: hidden;
  pointer-events: none;
  color: #09050d;
  text-align: center;
  isolation: isolate;
  background: rgba(8, 3, 13, .46);
}

.hand-level-up::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -18%;
  right: -18%;
  top: 50%;
  height: 330px;
  border-block: 8px solid #070309;
  background: #ffd633;
  box-shadow: 0 0 70px rgba(255, 211, 54, .92), 0 18px 0 #ff4fc3, 0 -18px 0 #58f0c5;
  transform: translateY(-50%) rotate(-2deg);
}

.hand-level-up.show {
  display: grid;
  animation: handLevelScene 2.35s cubic-bezier(.16, 1, .3, 1) both;
}

.hand-level-up > span { font: 1000 18px/1 var(--mono); text-shadow: 2px 2px 0 rgba(255,255,255,.72); }

.hand-level-up > strong {
  max-width: 330px;
  font: 1000 36px/.9 var(--font);
  text-shadow: 3px 3px 0 #fff, 6px 6px 0 #ff55c4;
  animation: handLevelName 520ms cubic-bezier(.18, 1.5, .32, 1) 120ms both;
}

.hand-level-change { display: flex; align-items: center; justify-content: center; gap: 13px; }

.hand-level-change div {
  display: grid;
  min-width: 74px;
  gap: 3px;
  color: #59f0c4;
  text-shadow: 0 0 8px #59f0c4, 0 0 20px rgba(89,240,196,.88);
}

.hand-level-change small { font: 1000 9px/1 var(--mono); }
.hand-level-change b { font: 1000 34px/.9 var(--mono); }
.hand-level-change i { color: #59f0c4; font: 1000 34px/1 var(--font); font-style: normal; text-shadow: 0 0 10px #59f0c4; }
.hand-level-change div:last-child { animation: handLevelTarget 720ms cubic-bezier(.16, 1.4, .3, 1) 450ms both; }

.hand-stat-changes { display: flex; align-items: stretch; justify-content: center; gap: 9px; }

.hand-points-change,
.hand-mult-change {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 7px;
  min-width: 144px;
  padding: 7px 11px;
  border: 3px solid #09050d;
  border-radius: 999px;
  box-shadow: 5px 5px 0 #09050d;
}

.hand-points-change { background: #ffd633; }
.hand-mult-change { color: #fff; background: #ff4fc3; }
.hand-points-change small,
.hand-mult-change small { grid-column: 1 / -1; font: 1000 9px/1 var(--mono); }
.hand-points-change b,
.hand-mult-change b { min-width: 40px; font: 1000 18px/1 var(--mono); }
.hand-points-change i,
.hand-mult-change i { font: 1000 24px/1 var(--font); font-style: normal; }
.hand-points-change b:last-child { color: #fff; text-shadow: 2px 2px 0 #09050d, 0 0 10px #fff; }
.hand-mult-change b:last-child { color: #fff; text-shadow: 2px 2px 0 #09050d, 0 0 10px #fff; }

@keyframes handLevelScene {
  0% { opacity: 0; transform: scale(1.14); filter: brightness(2); }
  12%, 82% { opacity: 1; transform: scale(1); filter: brightness(1); }
  100% { opacity: 0; transform: scale(.96); }
}

@keyframes handLevelName {
  from { opacity: 0; transform: translateY(24px) scale(.72); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes handLevelTarget {
  0% { transform: scale(.5) rotate(-7deg); filter: brightness(2.4); }
  65% { transform: scale(1.12) rotate(2deg); }
  100% { transform: scale(1) rotate(0); filter: brightness(1); }
}

.deck-alarm {
  position: absolute;
  z-index: 520;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 7px;
  pointer-events: none;
  opacity: 0;
  color: #fff;
  text-align: center;
  background: rgba(71, 0, 20, 0.2);
}

.deck-alarm.show { animation: deckAlarm 2.7s ease both; }
.deck-alarm span { font: 1000 18px var(--mono); letter-spacing: 0; }
.deck-alarm strong {
  padding: 12px 18px;
  border: 4px solid #fff;
  color: #fff;
  background: #e20d36;
  box-shadow: 8px 8px 0 #080308, 0 0 34px rgba(255, 30, 74, 0.84);
  font: 1000 34px/0.95 var(--mono);
}

.deck-restart-banner {
  position: absolute;
  z-index: 570;
  inset: 0;
  display: none;
  place-content: center;
  gap: 9px;
  padding: 24px;
  overflow: hidden;
  pointer-events: none;
  text-align: center;
  background: rgba(5, 5, 10, 0.38);
}

.deck-restart-banner::before,
.deck-restart-banner::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: 50%;
  height: 190px;
  transform: translateY(-50%) rotate(-3deg);
  background: #5dffcf;
  border-block: 8px solid #08030c;
  box-shadow: 0 0 70px rgba(72, 255, 201, 0.95), 0 16px 0 #ffcf32;
}

.deck-restart-banner::after {
  height: 12px;
  transform: translateY(84px) rotate(3deg);
  background: #bd66ff;
  border: 0;
  box-shadow: 0 0 28px #bd66ff;
}

.deck-restart-banner.show {
  display: grid;
  animation: deckRestartCurtain 3.3s cubic-bezier(.16, 1, .3, 1) both;
}

.deck-restart-banner > * {
  position: relative;
  z-index: 2;
  color: #08030c;
}

.deck-restart-banner span,
.deck-restart-banner b {
  font: 1000 12px/1 var(--mono);
}

.deck-restart-banner strong {
  font: 1000 52px/0.88 var(--mono);
  letter-spacing: 0;
  text-shadow: 4px 4px 0 #fff, 8px 8px 0 #ffca31;
  animation: deckRestartTitle 460ms cubic-bezier(.18, 1.5, .32, 1) 180ms both;
}

@keyframes deckRestartCurtain {
  0% { opacity: 0; transform: scale(1.16) rotate(2deg); filter: brightness(2.2); }
  10%, 82% { opacity: 1; transform: scale(1) rotate(0); filter: brightness(1); }
  18%, 30%, 42% { transform: translateX(-5px); }
  24%, 36%, 48% { transform: translateX(5px); }
  100% { opacity: 0; transform: scale(.94); }
}

@keyframes deckRestartTitle {
  0% { opacity: 0; transform: scale(.28) rotate(-8deg); }
  70% { opacity: 1; transform: scale(1.15) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

.run-outcome {
  position: absolute;
  z-index: 600;
  inset: 0;
  display: none;
  place-content: center;
  gap: 18px;
  padding: 28px;
  overflow: hidden;
  color: white;
  text-align: center;
  background: #120817;
}

.run-outcome.show { display: grid; animation: outcomeIn 480ms cubic-bezier(.16,1,.3,1) both; }
.run-outcome.server { background: #06170f; }
.run-outcome.casino { background: #13051d; }
.run-outcome.defeat { background: #2a050d; }
.run-outcome p { margin: 0; font: 1000 12px var(--mono); color: #ffd766; }
.run-outcome h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #fff;
  font-family: var(--font);
  font-size: 59px;
  font-weight: 1000;
  line-height: 0.82;
  text-shadow: 7px 7px 0 #000, 0 0 32px rgba(255,79,167,.72);
}
.run-outcome.server h2 { color: #6affbd; text-shadow: 7px 7px 0 #000, 0 0 35px #36ff9a; }
.run-outcome.casino h2 { color: #ffd766; font-size: 68px; text-shadow: 7px 7px 0 #000, 0 0 40px #ff4fa7; }
.run-outcome.defeat h2 { color: #ff3159; text-shadow: 7px 7px 0 #000, 0 0 35px #ff1748; }

.crew-state-denied .lane-avatar { filter: grayscale(.72) brightness(.56); }
.crew-denied-banner { color: #fff; background: #d71332; box-shadow: 0 0 16px #ff3159; font-size: 8px; }

.poker-card.suit-locked .card-face { filter: grayscale(.82) brightness(.62); }
.poker-card.suit-locked::after {
  content: 'LOCKED';
  position: absolute;
  z-index: 8;
  inset: 43% 5px auto;
  padding: 3px 1px;
  border: 2px solid #ff3159;
  color: #fff;
  background: rgba(123,0,24,.9);
  font: 1000 7px/1 var(--mono);
  text-align: center;
  transform: rotate(-8deg);
}

.napkin-face { display: grid; place-content: center; gap: 8px; color: #362d24; text-align: center; }
.napkin-face .card-template-art { filter: grayscale(1) sepia(.15) brightness(1.05); }
.napkin-title, .napkin-face small { position: relative; z-index: 2; font: 1000 13px/1 var(--mono); }
.napkin-face small { font-size: 7px; }
.napkin-fold { position: relative; z-index: 2; width: 28px; height: 22px; margin: auto; border: 2px solid #6e6254; background: #eee8da; transform: skew(-8deg) rotate(4deg); box-shadow: 3px 3px 0 rgba(0,0,0,.24); }
.run-outcome button {
  min-height: 62px;
  border: 3px solid #fff;
  border-radius: 7px;
  color: #0d0610;
  background: #ffd766;
  box-shadow: 7px 7px 0 #000;
  font: 1000 15px var(--mono);
}
.run-ended .fullscreen-button { display: none !important; }
.run-outcome > :not(.outcome-scan) { position: relative; z-index: 2; }
.outcome-scan { position: absolute; z-index: 0; inset: -20%; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 8px, rgba(255,255,255,.035) 8px 10px); animation: scanDrift 5s linear infinite; }

.firewall-route {
  position: absolute;
  z-index: 590;
  inset: 0;
  display: none;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg, #13081b 0%, #08040d 58%, #040307 100%);
  opacity: 0;
}
.firewall-route.show { display: block; animation: routeFadeIn 420ms cubic-bezier(.16,1,.3,1) both; }
.firewall-route.leaving { animation: routeFadeOut 420ms cubic-bezier(.55,0,1,.45) both; }
.firewall-route-grid { position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(86,243,202,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(86,243,202,.14) 1px, transparent 1px); background-size: 28px 28px; }
.firewall-route header { position: absolute; z-index: 6; top: 48px; right: 16px; left: 16px; text-align: center; pointer-events: none; }
.firewall-route header p { margin: 0 0 5px; color: #59f0c4; font: 1000 9px/1 var(--mono); letter-spacing: .12em; }
.firewall-route header h2 { max-width: 380px; margin: 0 auto; color: #ffd766; font: 1000 25px/.92 var(--font); text-align: center; text-shadow: 4px 4px 0 #000, 0 0 20px rgba(255,215,102,.55); overflow-wrap: anywhere; }

.route-map-stage { position: absolute; z-index: 2; inset: 12px 14px 82px; min-height: 0; overflow: hidden; border-radius: 10px; }
.route-map-scroll {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(89,240,196,.65) rgba(255,255,255,.06);
  scrollbar-width: thin;
  border: 1px solid #242331;
  border-radius: 10px;
  background: #111118;
  box-shadow: inset 0 0 34px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.32);
  -webkit-overflow-scrolling: touch;
}
.route-map-scroll::-webkit-scrollbar { width: 5px; }
.route-map-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
.route-map-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(89,240,196,.66); }
.firewall-route.choices-visible .route-map-scroll { overflow-y: hidden; touch-action: none; }
.node-map-canvas { position: relative; min-width: 100%; }
.node-map-paths { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.node-map-edge {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .42;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.8));
  transition: stroke-width 180ms ease, opacity 180ms ease, filter 180ms ease;
}
.node-map-edge.skipped { stroke-dasharray: 0.045 0.035; }
.node-map-edge.complete { stroke-width: 4; opacity: 1; filter: drop-shadow(0 0 5px rgba(69,205,168,.86)); }
.node-map-edge.reachable { stroke-width: 4; opacity: .95; stroke-dasharray: 0.055 0.04; }
.node-map-edge.selected { stroke-width: 6; opacity: 1; filter: drop-shadow(0 0 7px #ffd766); }
.node-map-edge.route-pending { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .16; }
.node-map-edge.route-revealing { stroke-width: 6; filter: drop-shadow(0 0 7px #59f0c4); }
.prep-route-map .node-map-edge.preview {
  stroke-width: 3.5;
  stroke-dasharray: 0.05 0.035;
  opacity: .82;
  filter: drop-shadow(0 0 5px rgba(89,240,196,.58));
  animation: prepRouteFlow 1.8s linear infinite;
  will-change: stroke-dashoffset;
}
.prep-route-map .node-map-edge.preview.skipped { stroke-dasharray: 0.035 0.045; }

@keyframes prepRouteFlow {
  to { stroke-dashoffset: -0.17; }
}

.node-map-node {
  position: absolute;
  z-index: 3;
  left: var(--node-left);
  top: var(--node-top);
  width: var(--node-width, 110px);
  min-height: 80px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding: 0;
  border: 0;
  color: var(--node-color);
  background: transparent;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease, filter 180ms ease;
}
.node-map-node:disabled { opacity: 1; }
.node-map-core {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 3px solid var(--node-color);
  border-radius: 50%;
  color: #fff;
  background: #1a1a24;
  box-shadow: 0 0 18px color-mix(in srgb, var(--node-color) 28%, transparent), inset 0 0 12px rgba(0,0,0,.5);
  transition: width 190ms cubic-bezier(.16,1.3,.3,1), height 190ms cubic-bezier(.16,1.3,.3,1), transform 190ms cubic-bezier(.16,1.3,.3,1), filter 190ms ease;
}
.node-map-core > b { position: relative; z-index: 3; font: 1000 17px/.8 var(--mono); text-shadow: 1px 1px 0 #000; }
.node-map-user-icon { width: 24px; height: 24px; display: block; filter: drop-shadow(0 0 5px rgba(255,255,255,.92)); }
.node-map-user-icon::before,
.node-map-user-icon::after { content: ''; position: absolute; left: 50%; background: #08060a; transform: translateX(-50%); }
.node-map-user-icon::before { top: 1px; width: 9px; height: 9px; border-radius: 50%; }
.node-map-user-icon::after { bottom: 1px; width: 20px; height: 11px; border-radius: 11px 11px 5px 5px; }
.node-map-inner-dot { position: absolute; z-index: 1; left: 50%; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--node-color); opacity: .88; transform: translate(-50%, -50%); box-shadow: 0 0 10px color-mix(in srgb, var(--node-color) 75%, transparent); }
.node-map-check { position: absolute; z-index: 7; top: -9px; right: -10px; width: 25px; height: 25px; display: grid; place-items: center; border: 3px solid #08060a; border-radius: 50%; color: #08060a; background: #59f0c4; box-shadow: 0 0 14px #59f0c4; font: 1000 14px/1 var(--mono); font-style: normal; opacity: 0; transform: scale(.25) rotate(-24deg); }
.node-map-node.completed .node-map-check,
.node-map-node.route-completed .node-map-check { opacity: 1; transform: scale(1) rotate(0); animation: nodeCheckBreathe 2.4s ease-in-out infinite; animation-delay: calc(var(--check-delay) - 2.4s); }
.node-map-node.route-completing .node-map-core { animation: nodeCompleting 1s cubic-bezier(.16,1,.3,1) both; }
.node-map-node.route-completing .node-map-check { animation: nodeCheckIn 420ms 560ms cubic-bezier(.16,1.5,.3,1) both; }
.node-map-statuses { position: absolute; z-index: 5; top: 38px; left: 50%; display: flex; gap: 3px; transform: translateX(-50%); }
.node-map-statuses:not(:empty) + small { margin-top: 5px; }
.node-map-statuses > i { width: 17px; height: 17px; display: grid; place-items: center; border: 2px solid #111118; border-radius: 50%; color: #08070b; background: var(--status-color); box-shadow: 0 0 8px var(--status-color); font-style: normal; }
.node-map-statuses b { font: 1000 9px/1 var(--mono); }
.node-map-statuses .node-defense-barrier { --status-color: #79e9ff; }
.node-map-statuses .node-defense-ai { --status-color: #ff5a67; }
.node-map-statuses .node-defense-ai b { font-size: 7px; }
.node-map-statuses .node-defense-cypher { --status-color: #d49cff; }
.node-map-node small {
  display: block;
  width: min(104px, var(--node-width, 110px));
  color: var(--node-color);
  font: 1000 9px/1.15 var(--mono);
  text-align: center;
  text-shadow: 2px 2px 0 #000, 0 0 6px color-mix(in srgb, var(--node-color) 55%, transparent);
  overflow-wrap: anywhere;
}
.node-map-node.visited:not(.current) { opacity: .94; filter: none; }
.node-map-node.visited .node-map-core { border-color: var(--node-color); background: color-mix(in srgb, var(--node-color) 27%, #0b0710); box-shadow: 0 0 20px color-mix(in srgb, var(--node-color) 48%, transparent), inset 0 0 12px rgba(0,0,0,.5); }
.node-map-node.dead { opacity: .28; filter: grayscale(1); }
.node-map-node:not(.dead):not(.fogged) { filter: none; }
.node-map-node.current { z-index: 9; opacity: 1; filter: none; }
.node-map-node.current .node-map-core { border-color: #fff; color: #08070b; background: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #050307, 0 0 22px rgba(255,255,255,.72); }
.node-map-node.current .node-map-inner-dot { background: #fff; box-shadow: none; }
.node-map-node.current .node-map-core { animation: nodeCurrentBreathe 1.7s ease-in-out infinite; }
.node-map-node.current.route-completing .node-map-core { animation: nodeCompleting 1s cubic-bezier(.16,1,.3,1) both; }
.node-map-node.current::after { content: 'YOU'; position: absolute; top: -15px; padding: 3px 6px; border-radius: 999px; color: #050307; background: #59f0c4; font: 1000 9px/1 var(--mono); box-shadow: 2px 2px 0 #000; }
.node-map-node.available { z-index: 6; opacity: 1; cursor: pointer; }
.node-map-node.available::before { content: ''; position: absolute; z-index: -1; top: -8px; left: 50%; width: 70px; height: 70px; border: 3px dotted var(--node-color); border-radius: 50%; filter: drop-shadow(0 0 7px var(--node-color)); transform: translateX(-50%); animation: nodeReachableSpin 4.2s linear infinite; }
.node-map-node.available .node-map-core { width: 58px; height: 58px; filter: brightness(1.12); animation: nodeAvailableBeat 1.1s ease-in-out infinite; }
.node-map-node.available:hover .node-map-core,
.node-map-node.available:focus-visible .node-map-core { filter: brightness(1.38); outline: none; }
.node-map-node.available:focus-visible { outline: none; }
.node-map-node.cypher-locked.available { cursor: not-allowed; }
.node-map-node.cypher-locked.available::before { animation: none; opacity: .38; }
.node-map-node.cypher-locked.available .node-map-core { animation: none; filter: grayscale(.8) brightness(.62); }
.node-map-node.selected { z-index: 8; }
.node-map-node.selected .node-map-core { width: 68px; height: 68px; background: #1a1a24; box-shadow: 0 0 0 4px #fff, 0 0 0 7px #050307, 0 0 30px var(--node-color); animation: nodeSelectedBeat .78s ease-in-out infinite; }
.node-map-node.selected small { font-size: 10px; }
.node-map-node.start-node small { color: #a8b1c0; }
.node-map-node.boss-node small { color: #f59e0b; font-size: 10px; }
.node-map-node.fogged { opacity: .58; filter: grayscale(1) contrast(1.32); }
.node-map-node.fogged small { color: #aaa5ae; text-shadow: 2px 2px 0 #000, -2px 0 rgba(255,255,255,.22); animation: nodeFogTextGlitch 1.2s steps(1,end) infinite; }
.node-map-node.fogged .node-map-core { border-color: #75717a; color: #cbc7ce; background: #0a080c; box-shadow: inset 0 0 20px #000, 0 0 12px rgba(142,136,149,.42); animation: nodeFogGlitch 1.15s steps(1,end) infinite; }
.node-map-node.fogged .node-map-core::after { content: ''; position: absolute; z-index: 6; right: -8px; left: -8px; height: 7px; border-top: 2px solid rgba(255,255,255,.58); border-bottom: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); mix-blend-mode: screen; animation: nodeFogScan .72s steps(4,end) infinite; }
.node-map-node.fogged::before { content: ''; position: absolute; inset: -12px -2px 10px; border-radius: 50%; background: radial-gradient(circle, rgba(170,165,181,.14), rgba(45,42,50,.72) 68%, transparent 72%); filter: blur(7px); animation: nodeFogDrift 3.2s ease-in-out infinite alternate; }
.node-map-node.fogged .node-map-core { position: relative; z-index: 1; }
.route-node-choices { position: absolute; z-index: 32; top: 46%; right: 7px; left: 7px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; pointer-events: none; }
.route-node-choices[hidden] { display: none; }
.route-node-choices.single { grid-template-columns: minmax(0, 230px); justify-content: center; }
.firewall-route.route-revealing .node-map-node.available { pointer-events: none; }
.node-choice-card { min-width: 0; min-height: 230px; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 6px; padding: 10px; border: 3px solid var(--choice-color); border-radius: 7px; color: #fff; background: rgba(17,13,22,.96); box-shadow: 5px 5px 0 #000, 0 0 18px color-mix(in srgb, var(--choice-color) 36%, transparent); pointer-events: auto; animation: routeTooltipIn 240ms cubic-bezier(.16,1.2,.3,1) both; }
.node-choice-heading { min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--choice-color); }
.node-choice-heading > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 2px solid #070509; border-radius: 4px; color: #070509; background: var(--choice-color); font: 1000 20px/1 var(--mono); box-shadow: 2px 2px 0 #000; }
.node-choice-heading strong { min-width: 0; font: 1000 18px/.95 var(--mono); overflow-wrap: anywhere; }
.node-choice-type { color: var(--choice-color); font: 1000 10px/1 var(--mono); text-transform: uppercase; }
.node-choice-card > p { min-height: 40px; margin: 0; color: #f0ebf3; font: 800 16px/1.22 var(--mono); }
.node-choice-extras { min-height: 20px; display: grid; align-content: start; gap: 3px; }
.node-choice-marker { min-height: 24px; display: flex; align-items: center; justify-content: center; padding: 4px 6px; border: 2px solid #08060a; border-radius: 4px; color: #09070b; background: #79e9ff; font: 1000 11px/1 var(--mono); }
.node-choice-marker.ai { background: #ff5a67; }
.node-choice-marker.cypher { background: #d49cff; }
.node-choice-stats { min-height: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.node-choice-stats b { display: grid; place-items: center; padding: 4px 2px; border: 1px solid color-mix(in srgb, var(--choice-color) 70%, #fff); border-radius: 3px; color: var(--choice-color); background: rgba(0,0,0,.36); font: 1000 8px/1 var(--mono); text-align: center; }
.node-choice-status,
.node-choice-reward,
.node-choice-empty { min-height: 25px; display: flex; align-items: center; gap: 5px; padding: 4px 6px; border: 1px solid color-mix(in srgb, var(--tag-color, #77727f) 72%, #fff); border-radius: 3px; color: #0a080c; background: var(--tag-color, #77727f); font: 1000 13px/1.05 var(--mono); overflow-wrap: anywhere; }
.node-choice-status b,
.node-choice-reward b { min-width: 11px; text-align: center; }
.node-choice-reward { --tag-color: var(--reward-color); }
.node-choice-empty { color: #a49ba9; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.node-choice-card > button { min-height: 48px; border: 2px solid #08060a; border-radius: 999px; color: #09070b; background: var(--choice-color); box-shadow: 3px 3px 0 #000, 0 0 15px color-mix(in srgb, var(--choice-color) 72%, transparent); font: 1000 18px/1 var(--mono); animation: nodeConnectBreathe 1.45s ease-in-out infinite; }
.node-choice-card > button:disabled { animation: none; filter: grayscale(.8) brightness(.58); }
.route-see-map { width: 100%; min-height: 46px; padding: 0 12px; border: 3px solid #fff; border-radius: 5px; color: #fff; background: rgba(7,5,10,.96); box-shadow: 4px 4px 0 #000; font: 1000 12px/1 var(--mono); }
.route-see-map[hidden] { display: none; }

.route-footer { position: absolute; z-index: 35; right: 14px; bottom: 13px; left: 14px; min-height: 22px; display: grid; place-items: center; gap: 6px; }
.route-footer p { margin: 0; color: #bcaec7; font: 1000 9px/18px var(--mono); letter-spacing: .08em; text-align: center; }
.firewall-route.travelling .route-footer { opacity: .42; pointer-events: none; }
.firewall-route.upgrade-node-active > header,
.firewall-route.upgrade-node-active > .route-map-stage,
.firewall-route.upgrade-node-active > .route-footer { opacity: 0; transform: scale(.94); pointer-events: none; transition: opacity 280ms ease, transform 280ms ease; }

.route-upgrade-choice {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: none;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-content: center;
  gap: 7px;
  padding: 48px 22px 30px;
  color: #fff;
  text-align: center;
  background: radial-gradient(circle at 50% 34%, rgba(255, 215, 102, .16), transparent 46%), rgba(9, 4, 16, .9);
}
.route-upgrade-choice[aria-hidden="false"] { display: grid; animation: routeUpgradeReveal 520ms cubic-bezier(.16,1,.3,1) both; }
.route-upgrade-choice > p { margin: 0; color: #59f0c4; font: 1000 11px/1 var(--mono); }
.route-upgrade-choice > h2 { margin: 0; color: #ffd766; font: 1000 40px/.88 var(--font); text-shadow: 5px 5px 0 #000, 0 0 25px rgba(255,215,102,.72); }
.route-upgrade-choice > small { color: #bfaeca; font: 900 9px/1 var(--mono); }
.route-upgrade-options { min-height: 0; display: grid; align-content: center; gap: 9px; margin-top: 6px; }
.route-upgrade-option {
  position: relative;
  min-height: 116px;
  display: grid;
  grid-template-columns: 1fr 18px 1fr;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: 7px;
  padding: 9px;
  border: 3px solid var(--hand-color, #ffd766);
  border-radius: 7px;
  color: #fff;
  background: #1b0b24;
  box-shadow: 6px 6px 0 #000, inset 0 0 18px color-mix(in srgb, var(--hand-color, #ffd766) 18%, transparent);
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, filter 180ms ease;
}
.route-upgrade-option strong { grid-column: 1 / -1; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 7px; color: var(--hand-color, #ffd766); font-family: var(--mono); text-align: center; text-transform: uppercase; overflow-wrap: anywhere; }
.route-upgrade-option strong span { font-size: 15px; font-weight: 1000; line-height: 1; }
.route-upgrade-option strong b { font-size: 23px; font-weight: 1000; line-height: .9; text-shadow: 3px 3px 0 #000; }
.route-upgrade-option > i { color: var(--hand-color, #ffd766); font: 1000 28px/1 var(--font); font-style: normal; text-align: center; }
.route-upgrade-values { min-height: 62px; display: grid; place-content: center; gap: 3px; padding: 6px 3px; border: 2px solid rgba(255,255,255,.16); border-radius: 5px; background: rgba(0,0,0,.32); text-align: center; }
.route-upgrade-values small { color: #a99ab6; font: 1000 7px/1 var(--mono); }
.route-upgrade-values b { color: #fff; font: 1000 15px/1 var(--mono); }
.route-upgrade-values span { color: #d9cadf; font: 900 9px/1 var(--mono); }
.route-upgrade-values.next { border-color: var(--hand-color, #59f0c4); background: rgba(0,0,0,.2); box-shadow: 0 0 13px var(--hand-color, #59f0c4); }
.route-upgrade-values.next b,
.route-upgrade-values.next span { color: var(--hand-color, #59f0c4); }
.route-upgrade-values b.hand-node-level {
  color: #59f0c4;
  text-shadow: 0 0 7px #59f0c4, 0 0 15px rgba(89,240,196,.8);
}
.route-upgrade-values .hand-points-pill,
.route-upgrade-values .hand-mult-pill {
  min-height: 18px;
  padding: 3px 6px;
  border-width: 1px;
  color: #09050d;
  font: 1000 8px/1 var(--mono);
  box-shadow: 2px 2px 0 #09050d;
}
.route-upgrade-values .hand-points-pill { background: #ffd633; }
.route-upgrade-values .hand-mult-pill { color: #fff; background: #ff4fc3; }
.route-upgrade-option:hover,
.route-upgrade-option:focus-visible { transform: translateY(-2px); border-color: var(--hand-color, #59f0c4); filter: brightness(1.12); outline: none; }
.route-upgrade-option.selected { border-color: var(--hand-color, #59f0c4); background: #1b0b24; box-shadow: 6px 6px 0 #000, 0 0 32px var(--hand-color, #59f0c4); animation: routeUpgradeSelected 620ms cubic-bezier(.16,1.4,.3,1) both; }
.route-upgrade-option:disabled:not(.selected) { opacity: .38; filter: grayscale(.65); }
@keyframes routeFadeIn { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
@keyframes routeFadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.97); } }
@keyframes nodeCompleting { 0%, 58% { filter: brightness(1); } 76% { filter: brightness(2.1) drop-shadow(0 0 18px #59f0c4); } 100% { filter: brightness(1.15); } }
@keyframes nodeCheckIn { from { opacity: 0; transform: scale(.2) rotate(-24deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes nodeCheckBreathe { 0%, 100% { transform: scale(.86); filter: brightness(.9); box-shadow: 0 0 8px rgba(89,240,196,.62); } 50% { transform: scale(1.14); filter: brightness(1.35); box-shadow: 0 0 20px #59f0c4; } }
@keyframes nodeCurrentBreathe { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px #fff, 0 0 0 6px #050307, 0 0 20px rgba(255,255,255,.65); } 50% { transform: scale(1.07); box-shadow: 0 0 0 3px #fff, 0 0 0 6px #050307, 0 0 36px #fff; } }
@keyframes nodeConnectBreathe { 0%, 100% { filter: brightness(1); box-shadow: 3px 3px 0 #000, 0 0 12px color-mix(in srgb, var(--choice-color) 64%, transparent); } 50% { filter: brightness(1.22); box-shadow: 3px 3px 0 #000, 0 0 27px var(--choice-color); } }
@keyframes nodeFogGlitch { 0%, 68%, 100% { transform: translate(0) skewX(0); filter: brightness(.82); } 70% { transform: translate(-5px, 1px) skewX(8deg); filter: brightness(1.5); } 73% { transform: translate(4px, -1px) skewX(-6deg); } 76% { transform: translate(-2px, 0) skewX(3deg); filter: brightness(.65); } 79% { transform: translate(0) skewX(0); } 91% { transform: translate(3px, 1px); } 93% { transform: translate(-3px, -1px); filter: brightness(1.25); } 95% { transform: translate(0); } }
@keyframes nodeFogTextGlitch { 0%, 74%, 100% { transform: translateX(0); opacity: 1; } 76% { transform: translateX(-4px); opacity: .55; } 79% { transform: translateX(4px); opacity: 1; } 82% { transform: translateX(0); } 93% { opacity: .35; } 95% { opacity: 1; } }
@keyframes nodeFogScan { 0% { top: 5px; opacity: 0; } 18% { opacity: 1; } 100% { top: 40px; opacity: 0; } }
@keyframes nodeAvailableBeat { 0%, 100% { transform: scale(1); box-shadow: 0 0 14px var(--node-color), inset 0 0 12px rgba(0,0,0,.5); } 48% { transform: scale(1.08); box-shadow: 0 0 30px var(--node-color), inset 0 0 12px rgba(0,0,0,.5); } }
@keyframes nodeSelectedBeat { 0%, 100% { transform: scale(1); filter: brightness(1); } 48% { transform: scale(1.09); filter: brightness(1.32); } }
@keyframes nodeReachableSpin { from { transform: translateX(-50%) rotate(0); } to { transform: translateX(-50%) rotate(360deg); } }
@keyframes nodeFogDrift { from { transform: translate(-4px, 3px) scale(.94); opacity: .62; } to { transform: translate(5px, -4px) scale(1.08); opacity: .88; } }
@keyframes routeTooltipIn { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes routeUpgradeReveal { from { opacity: 0; transform: scale(1.08); filter: brightness(1.8); } to { opacity: 1; transform: scale(1); filter: brightness(1); } }
@keyframes routeUpgradeSelected { 0% { transform: scale(1); } 48% { transform: scale(1.045); filter: brightness(1.55); } 100% { transform: scale(1); } }

#wave.route-wipe-advanced,
#wave.route-wipe-golden { z-index: 700; }
#wave.route-wipe-advanced {
  background: radial-gradient(ellipse at 50% 7%, #fff2e8 0 1%, #ff7b45 8%, #e51d31 25%, #760817 52%, #19050a 79%, #050204 100%);
  box-shadow: 0 0 34px rgba(255,90,47,.98), 0 0 92px rgba(230,20,38,.84), 0 0 150px rgba(117,0,18,.72);
}
#wave.route-wipe-advanced::before { border-color: rgba(255,168,104,.9); box-shadow: inset 0 0 44px rgba(255,38,30,.7), 0 0 42px rgba(255,70,28,.76); }
#wave.route-wipe-golden {
  background: radial-gradient(ellipse at 50% 7%, #fffef0 0 2%, #ffe778 10%, #e9a516 30%, #85520a 56%, #2b1603 78%, #090501 100%);
  box-shadow: 0 0 38px rgba(255,242,143,.98), 0 0 92px rgba(255,194,40,.82), 0 0 150px rgba(184,107,2,.65);
}
#wave.route-wipe-golden::before { border-color: rgba(255,246,177,.94); box-shadow: inset 0 0 44px rgba(255,196,37,.62), 0 0 42px rgba(255,223,93,.8); }

.firewall-arrival-fx { position: absolute; z-index: 690; inset: 0; display: none; overflow: hidden; pointer-events: none; }
.firewall-arrival-fx.show { display: block; }
.firewall-arrival-fx::before { content: ''; position: absolute; inset: 0; opacity: 0; animation: firewallArrivalGlow 2.4s ease-out both; }
.firewall-arrival-fx.advanced::before { background: radial-gradient(circle at 50% 65%, rgba(255,55,23,.38), transparent 54%), linear-gradient(rgba(145,0,18,.26), rgba(28,0,7,.46)); box-shadow: inset 0 0 74px rgba(255,29,20,.78); }
.firewall-arrival-fx.golden::before { background: radial-gradient(circle at 50% 48%, rgba(255,235,126,.38), transparent 56%), linear-gradient(rgba(133,80,0,.12), rgba(255,205,59,.18)); box-shadow: inset 0 0 76px rgba(255,211,69,.72); }
.firewall-arrival-fx > i { position: absolute; left: var(--fx-x); bottom: -8%; width: 5px; height: 13px; border-radius: 50%; opacity: 0; animation-delay: var(--fx-delay); }
.firewall-arrival-fx.advanced > i { background: #ffdd72; box-shadow: 0 0 7px #ff4b16, 0 0 16px #e20c24; animation: firewallEmber 1.8s ease-out infinite; }
.firewall-arrival-fx.golden > i { width: 7px; height: 7px; bottom: auto; top: var(--fx-y); border-radius: 1px; background: #fff6b0; box-shadow: 0 0 9px #fff, 0 0 18px #ffc92e; animation: firewallSparkle 1.65s ease-in-out infinite; }
@keyframes firewallArrivalGlow { 0% { opacity: 0; } 18%, 56% { opacity: 1; } 100% { opacity: 0; } }
@keyframes firewallEmber { 0% { opacity: 0; transform: translate3d(0,0,0) rotate(0); } 16% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--fx-drift),-650px,0) rotate(280deg); } }
@keyframes firewallSparkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 42% { opacity: 1; transform: scale(1.4) rotate(90deg); } 72% { opacity: .45; transform: scale(.7) rotate(150deg); } }

.debug-tools {
  position: fixed;
  z-index: 300;
  left: calc(50% + 230px);
  top: 72px;
  width: 146px;
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 2px solid rgba(255, 215, 102, 0.72);
  border-radius: 7px;
  background: rgba(17, 7, 23, 0.96);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.56), 0 0 18px rgba(255, 79, 167, 0.18);
}

.debug-tools > strong {
  color: #ffd766;
  font: 1000 10px/1 var(--mono);
  letter-spacing: 0.12em;
  text-align: center;
}

.debug-divider { height: 1px; margin: 2px 0; background: rgba(255, 255, 255, 0.16); }

.debug-tools button {
  min-height: 44px;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 5px;
  color: #fff;
  background: #2a1235;
  font: 1000 8px/1.16 var(--mono);
  text-align: left;
  box-shadow: inset 0 0 12px rgba(255, 79, 167, 0.08);
}

.debug-tools button:hover { border-color: #ffd766; color: #ffd766; }
.debug-tools button:active { transform: translateY(1px); background: #3b194b; }
.debug-tools button span { color: #ffd766; font: 1000 21px/1 var(--mono); text-align: center; }
.debug-tools .music-toggle { background: #17372f; box-shadow: inset 0 0 12px rgba(86, 243, 202, 0.14); }
.debug-tools .music-toggle span { color: #56f3ca; }
.debug-tools .music-toggle.muted { color: #b6afbb; background: #211b25; }
.debug-tools .music-toggle.muted span { color: #ff5a67; }

.crew-pricing-debug { display: none; }
body.casino-selection-active .crew-pricing-debug {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 7px 0 2px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.crew-pricing-debug > strong {
  grid-column: 1 / -1;
  color: #67f5c0;
  font: 1000 8px/1 var(--mono);
  text-align: center;
}
.debug-tools .crew-pricing-debug button {
  min-height: 38px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 5px;
  color: #bcb6c4;
  font-size: 7px;
  text-align: center;
}
.debug-tools .crew-pricing-debug button.active {
  border-color: #67f5c0;
  color: #07130e;
  background: #67f5c0;
  box-shadow: 0 0 14px rgba(103,245,192,.55);
}

.van-jack-transition {
  position: absolute;
  z-index: 680;
  inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  color: #fff;
  background: rgba(15,1,10,.9);
  pointer-events: auto;
}
.van-jack-transition.show { display: grid; animation: vanJackIn 240ms ease-out both; }
.van-jack-panel { width: min(340px, 100%); display: grid; gap: 12px; padding: 24px 18px; border: 4px solid #ff3159; border-radius: 7px; background: #210514; box-shadow: 8px 8px 0 #000, 0 0 48px rgba(255,35,130,.65), inset 0 0 30px rgba(255,49,89,.12); text-align: center; }
.van-jack-panel p { color: #ff7bc3; font: 1000 11px/1 var(--mono); letter-spacing: .14em; }
.van-jack-panel h2 { color: #fff; font: 1000 36px/.88 var(--font); text-shadow: 4px 4px 0 #000, 0 0 18px #ff3159; }
.van-jack-track { height: 24px; padding: 4px; overflow: hidden; border: 3px solid #ff7bc3; border-radius: 3px; background: #080207; box-shadow: inset 0 0 12px #000, 0 0 16px rgba(255,49,89,.46); }
.van-jack-track i { display: block; width: 0; height: 100%; border-radius: 1px; background: repeating-linear-gradient(90deg, #ff3159 0 12px, #ff73c1 12px 19px, #7d092f 19px 22px); box-shadow: 0 0 18px #ff3159; animation: vanJackLoad 1.55s steps(12,end) forwards; }
.van-jack-panel > strong { color: #ffb2dd; font: 1000 12px/1 var(--mono); }

@keyframes vanJackIn { from { opacity: 0; filter: brightness(1.8); } to { opacity: 1; filter: brightness(1); } }
@keyframes vanJackLoad { 0% { width: 4%; } 22% { width: 24%; } 48% { width: 51%; } 72% { width: 73%; } 88% { width: 91%; } 100% { width: 100%; } }

.van-screen {
  display: none;
  padding: 20px 16px 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 4%, rgba(255,49,89,.34), transparent 35%),
    radial-gradient(circle at 15% 38%, rgba(255,36,155,.18), transparent 34%),
    linear-gradient(180deg, #3b0a30 0%, #190511 62%, #070207 100%);
}
.van-screen.active { display: flex; flex-direction: column; }
.van-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; }
.van-header h1 { margin: 1px 0 0; color: #ff4fa7; font-size: 34px; text-shadow: 3px 3px 0 #000, 0 0 18px rgba(255,49,89,.82); }
.van-header .eyebrow { color: #ff3159; }
.van-brief {
  display: grid;
  grid-template-columns: 13px 1fr;
  gap: 9px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 2px solid rgba(255,49,89,.52);
  border-radius: 7px;
  background: rgba(42,4,18,.86);
  box-shadow: inset 0 0 18px rgba(255,49,89,.1), 0 0 14px rgba(255,79,167,.12);
}
.van-brief b { color: #ff72bd; font-size: 13px; }
.van-brief p { margin: 2px 0 0; color: #c9b8d2; font-size: 11px; line-height: 1.2; }
.van-status-light { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: #ff3159; box-shadow: 0 0 12px #ff3159; animation: fullPulse 1.3s infinite; }
.van-offer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 9px 0 7px; }
.van-offer-toolbar > div { display: grid; gap: 2px; }
.van-offer-toolbar b { color: #ff72bd; font: 1000 12px/1 var(--mono); }
.van-offer-toolbar small { color: #a994b4; font: 900 8px/1 var(--mono); }
.van-offer-toolbar > button { min-height: 38px; display: flex; align-items: center; gap: 5px; padding: 5px 8px; border: 2px solid #ff3159; border-radius: 6px; color: #17030c; background: #ff4fa7; font: 1000 9px/1 var(--mono); box-shadow: 3px 3px 0 #000, 0 0 18px rgba(255,49,89,.42); }
.van-offer-toolbar > button > span:first-child { font-size: 18px; }
.van-offer-toolbar > button.unaffordable { color: #fff; border-color: #ff3159; background: #8b1026; box-shadow: 3px 3px 0 #000; }
.reroll-cost { display: inline-flex; align-items: center; gap: 2px; }
.reroll-cost .chip-icon { width: 15px; height: 15px; }
.van-offer-stage { flex: 1 1 0; min-height: 0; overflow: hidden; }
.van-offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 2px 14px; }
.van-offers.rerolled { animation: vanOffersReroll 460ms cubic-bezier(.16,1,.3,1); }
.van-offer { min-width: 0; }
.van-offer-card { position: relative; width: 100%; aspect-ratio: 2 / 3; padding: 0; overflow: hidden; border: 4px solid var(--rarity-color); border-radius: 7px; color: #fff; background: #180b20; box-shadow: 0 8px 15px rgba(0,0,0,.5), inset 0 0 20px rgba(0,0,0,.22); }
.van-offer-card > img,
.van-offer-card > .generic-spike-art,
.van-offer-card > .hand-level-spike-art { width: 100%; height: 100%; object-fit: cover; }
.van-offer.selected .van-offer-card { transform: translateY(-5px); box-shadow: 0 0 22px var(--rarity-color); }
.van-offer.unaffordable .van-offer-card { border-color: #ff3159; }
.van-offer.unaffordable .van-offer-cost { color: #ff3159; }
.van-offer.installed .van-offer-card { filter: grayscale(.8) brightness(.52); }
.van-offer-rarity,
.van-offer-state { position: absolute; left: 5px; top: 5px; padding: 3px 5px; border-radius: 4px; color: #09050a; background: var(--rarity-color); font: 1000 7px var(--mono); }
.van-offer-state { inset: auto 4px 4px; color: #fff; background: rgba(8,4,10,.9); }
.van-offer-copy { padding: 5px 1px 7px; }
.van-offer-copy b { display: block; min-height: 23px; color: #fff; font-size: 10px; line-height: 1.05; }
.van-offer-cost { display: flex; align-items: center; gap: 3px; color: #ffd766; font: 1000 15px var(--mono); }
.van-offer-cost .chip-icon { width: 17px; height: 17px; }
.van-hand-level-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0 6px;
}
.van-hand-level-toolbar > div { display: grid; gap: 2px; }
.van-hand-level-toolbar b { color: #ff3159; font: 1000 12px/1 var(--mono); }
.van-hand-level-toolbar small { color: #a994b4; font: 900 9px/1 var(--mono); }
.van-hand-level-toolbar > span {
  padding: 4px 6px;
  border: 1px solid #ff4fa7;
  border-radius: 999px;
  color: #07100c;
  background: #ff4fa7;
  font: 1000 8px/1 var(--mono);
}
.van-hand-offer-stage { flex: 0 0 211px; min-height: 211px; margin-bottom: 7px; overflow: hidden; }
.van-hand-offer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  height: 100%;
  padding: 4px 2px 0;
}
.van-hand-level-offer { grid-column: 2; min-width: 0; }
.van-hand-level-offer .van-offer-state { color: #07100c; background: var(--hand-color); }
.hand-level-offer-copy { padding: 2px 1px 0; }
.hand-level-offer-copy .van-offer-cost { justify-content: center; color: var(--hand-color); }
.van-hand-level-offer.unaffordable .van-offer-card { border-color: #ff3159; }
.van-hand-level-offer.unaffordable .van-offer-cost { color: #ff3159; }
.van-hand-offer-empty {
  grid-column: 2;
  display: grid;
  place-content: center;
  width: 100%;
  aspect-ratio: 2 / 3;
  align-self: start;
  padding: 10px;
  border: 3px solid #59f0c4;
  border-radius: 7px;
  background: linear-gradient(105deg, rgba(89,240,196,.17), rgba(31,12,40,.97) 42%, rgba(181,108,255,.16));
  box-shadow: inset 0 0 20px rgba(89,240,196,.08), 0 0 15px rgba(89,240,196,.17);
  color: #59f0c4;
  text-align: center;
}
.van-hand-offer-empty b { font: 1000 14px/1 var(--mono); }
.van-hand-offer-empty small { color: #a994b4; font: 900 9px/1 var(--mono); }
.van-loadout { flex: 0 0 auto; padding: 8px; border: 2px solid rgba(255,49,89,.42); border-radius: 7px; background: rgba(24,3,13,.96); box-shadow: inset 0 0 18px rgba(255,79,167,.08); }
.van-spike-slots { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; justify-items: center; gap: 6px; }
.van-spike-slot { position: relative; width: 100%; height: auto; aspect-ratio: 2 / 3; padding: 0; overflow: hidden; border: 2px dashed rgba(255,215,102,.42); border-radius: 6px; color: #ffd766; background: #160a1c; }
.van-spike-slot.empty {
  display: grid;
  place-content: center;
  gap: 1px;
  border-color: rgba(184, 190, 202, .52);
  color: rgba(220, 224, 232, .74);
  background: linear-gradient(145deg, rgba(54, 55, 65, .84), rgba(20, 20, 25, .96));
}
.van-spike-slot.empty.ultra-charged {
  border-color: #c8ffff;
  box-shadow:
    inset 0 0 16px rgba(71,243,255,.28),
    0 0 9px rgba(108,249,255,.9),
    0 0 22px rgba(91,126,255,.6);
}
.van-spike-slot.empty span { font-size: 26px; }
.van-spike-slot.empty small { font: 900 8px var(--mono); }
.van-spike-slot img,
.van-spike-slot .generic-spike-art { width: 100%; height: 100%; object-fit: cover; }
.van-slot-name { position: absolute; inset: auto 0 0; padding: 12px 4px 4px; color: #fff; background: linear-gradient(transparent, #050207); font: 900 8px var(--mono); }
.van-next-button { flex: 0 0 auto; min-height: 58px; margin-top: 8px; border: 3px solid #ff8bc8; border-radius: 7px; color: #17030c; background: #ff4fa7; box-shadow: 6px 6px 0 #030205, 0 0 24px rgba(255,49,89,.5); }
.van-next-button span { display: block; font: 1000 17px var(--display); }
.van-next-button small { display: block; font: 900 9px var(--mono); }

.spike-detail-card { display: grid; grid-template-columns: 94px 1fr; gap: 12px; align-items: center; }
.spike-detail-art { width: 94px; height: auto; aspect-ratio: 2 / 3; overflow: hidden; border: 3px solid var(--rarity-color); border-radius: 7px; }
.spike-detail-art img,
.spike-detail-art .generic-spike-art,
.spike-detail-art .hand-level-spike-art { width: 100%; height: 100%; object-fit: cover; }
.spike-detail-card h3 { margin: 4px 0 6px; font-size: 22px; line-height: .98; }
.hand-level-sheet-head h3 { color: var(--hand-color); font: 1000 28px/.9 var(--mono); text-transform: uppercase; text-shadow: 3px 3px 0 #000; }
.spike-detail-card p { margin: 0; color: #c7b5d0; font-size: 11px; line-height: 1.3; }
.spike-detail-card .spike-rarity { display: inline-flex; padding: 4px 7px; border-radius: 4px; color: #080409; background: var(--rarity-color); font: 1000 9px var(--mono); }
.spike-detail-effect { margin-top: 12px; padding: 10px; border: 2px solid var(--rarity-color); border-radius: 6px; background: rgba(255,255,255,.05); }
.spike-detail-effect b { color: var(--rarity-color); }
.spike-level-preview { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 7px; margin-top: 9px; padding: 9px; border: 2px solid rgba(255,255,255,.14); border-radius: 5px; background: rgba(0,0,0,.28); }
.spike-level-preview .hand-preview-level { color: #59f0c4; font: 1000 13px/1 var(--mono); text-shadow: 0 0 7px #59f0c4, 0 0 14px rgba(89,240,196,.74); }
.spike-level-preview .hand-points-pill,
.spike-level-preview .hand-mult-pill { min-height: 22px; padding: 4px 7px; font-size: 10px; }

.score-hand .hand-preview-level,
.score-hand .hand-preview-points,
.score-hand .hand-preview-mult { display: inline-flex; align-items: center; justify-content: center; margin: 0; letter-spacing: 0; }
.score-hand .hand-preview-level { padding: 6px 10px; border: 2px solid #09050d; border-radius: 999px; color: #071315; background: #59f0c4; font-weight: 1000; box-shadow: 3px 3px 0 #09050d, 0 0 12px rgba(89,240,196,.7); text-shadow: none; }
.score-hand .hand-preview-points,
.score-hand .hand-preview-mult { padding: 6px 10px; border: 2px solid #09050d; border-radius: 999px; color: #09050d; box-shadow: 3px 3px 0 #09050d; }
.score-hand .hand-preview-points { background: #ffd633; }
.score-hand .hand-preview-mult { color: #fff; background: #ff4fc3; text-shadow: 1px 1px 0 #09050d; }

#gameScreen .score-area.hand-ready-preview { grid-template-columns: 0 minmax(0, 1fr) 0; }
.score-area.hand-ready-preview .score-center { width: 100%; gap: 8px; }
.score-mode.hand-preview-hidden { display: none; }
.score-counter.hand-preview { order: -1; width: min(300px, 86%); min-width: 0; padding: 9px 14px; border-width: 2px; border-radius: 8px; }
.score-hand.hand-preview-stats {
  width: 100%;
  min-height: 32px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font: 1000 14px/1 var(--mono);
  white-space: nowrap;
}
.score-hand.hand-preview-stats .hand-preview-heat { animation: preparedHeatBreathe 1.25s ease-in-out infinite; }
@keyframes preparedHeatBreathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.075); filter: brightness(1.35); box-shadow: 3px 3px 0 #09050d, 0 0 18px var(--prepared-heat-glow, #ef253f); }
}

.hand-level-spike-art {
  position: relative;
  container-type: inline-size;
  display: grid;
  place-content: center;
  gap: 6px;
  overflow: hidden;
  padding: 10px 6px;
  color: #09050a;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.34), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--hand-color, #ffd766) 88%, white), var(--hand-color, #ffd766) 54%, color-mix(in srgb, var(--hand-color, #ffd766) 70%, black));
  text-align: center;
  isolation: isolate;
}
.hand-level-spike-art::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 8px;
  border: 4px solid #09050a;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.32), 5px 5px 0 rgba(0,0,0,.34);
}
.hand-level-spike-art::after {
  content: '\2303\A\2303\A\2303';
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  color: #09050a;
  font: 1000 clamp(40px, 48cqi, 82px)/.36 var(--mono);
  white-space: pre;
  opacity: .2;
  transform: translate(-50%, -44%) scaleX(1.42);
}
.hand-level-spike-art small,
.hand-level-spike-art strong,
.hand-level-spike-art i { position: relative; z-index: 1; font-family: var(--mono); font-style: normal; letter-spacing: 0; text-transform: uppercase; }
.hand-level-spike-art small { font-size: clamp(11px, 12cqi, 21px); font-weight: 1000; line-height: 1; }
.hand-level-spike-art strong {
  font-size: clamp(18px, 19cqi, 38px);
  font-weight: 1000;
  line-height: .84;
  overflow-wrap: anywhere;
  text-shadow: 3px 0 rgba(255,255,255,.28), 0 3px rgba(255,255,255,.28);
}
.hand-level-spike-art i { font-size: clamp(15px, 16cqi, 30px); font-weight: 1000; line-height: 1; }

@keyframes fullPulse { 50% { transform: scale(.72); opacity: .55; } }
@keyframes spikeTriggered {
  0% { transform: scale(1); filter: brightness(1); }
  38% { transform: translateY(-8px) scale(1.12); filter: brightness(2.1); box-shadow: 0 0 30px var(--rarity-color); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes spikeScoring {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); box-shadow: inset 0 0 14px rgba(255,79,167,.12); }
  22% { transform: translateY(-9px) scale(1.13); filter: brightness(1.9) saturate(1.35); box-shadow: 0 0 0 3px #fff, 0 0 24px var(--rarity-color), 0 0 44px var(--rarity-color); }
  56% { transform: translateY(-4px) scale(1.07); filter: brightness(1.35); box-shadow: 0 0 0 2px #fff, 0 0 28px var(--rarity-color); }
}
@keyframes vanOffersReroll {
  0% { opacity: .25; transform: translateY(-10px) scale(.94); filter: blur(5px); }
  65% { opacity: 1; transform: translateY(2px) scale(1.02); filter: blur(0); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes deckAlarm {
  0% { opacity: 0; transform: scale(1.18); }
  12%, 78% { opacity: 1; transform: scale(1); }
  22%, 36%, 50%, 64% { background-color: rgba(255, 0, 50, .2); }
  29%, 43%, 57%, 71% { background-color: rgba(255, 210, 0, .11); }
  100% { opacity: 0; transform: scale(.96); }
}
@keyframes outcomeIn { from { opacity: 0; transform: scale(1.08); filter: brightness(2); } to { opacity: 1; transform: scale(1); filter: brightness(1); } }
@keyframes scanDrift { to { transform: translateY(40px); } }

@media (max-width: 600px) {
  .debug-tools { display: none; }
  body.mobile-stage .firewall-route {
    padding-top: max(46px, calc(env(safe-area-inset-top) + 8px));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
  }
  body.mobile-stage #gameScreen > .abandon-run-button {
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
  }
  body.mobile-stage #gameScreen {
    padding-top: max(42px, calc(env(safe-area-inset-top) + 6px));
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }
  body.mobile-stage #gameScreen .ai-status { min-height: 54px; padding-block: 6px; }
  body.mobile-stage #gameScreen .heat-meter { margin-top: 4px; }
  body.mobile-stage #gameScreen .heat-meter-track { height: 12px; }
  body.mobile-stage #gameScreen .crew-lane-wrap { margin-top: 4px; }
  body.mobile-stage #gameScreen .crew-lane { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.mobile-stage #gameScreen .lane-slot { width: 100%; height: auto; flex-basis: auto; }
  body.mobile-stage #gameScreen .run-status-row { margin-top: 4px; }
  body.mobile-stage #gameScreen .game-chip-pill,
  body.mobile-stage #gameScreen .barrier-status { height: 34px; }
  body.mobile-stage #gameScreen .ai-hp { margin-top: 0; }
  body.mobile-stage #gameScreen .ai-hp-summary { grid-template-columns: minmax(0, 1fr) 132px; gap: 6px; }
  body.mobile-stage #gameScreen .ai-hp-head { padding: 6px 7px; }
  body.mobile-stage #gameScreen .ai-hp-head span:last-child { font-size: 22px; }
  body.mobile-stage #gameScreen .score-area { height: 82px; min-height: 82px; margin-top: 2px; }
  body.mobile-stage #gameScreen.selecting-hand .play-stage { min-height: 54px; height: 54px; margin-top: 2px; }
  body.mobile-stage #gameScreen.resolving-hand .play-stage { min-height: 122px; height: 122px; margin-top: 2px; }
  body.mobile-stage #gameScreen .card-dock { margin-top: 2px; }
  body.mobile-stage #gameScreen .inert-cards { height: 106px; }
  body.mobile-stage #gameScreen .hand-actions {
    grid-template-columns: minmax(0, 112px) minmax(0, 1fr) 42px;
    gap: 7px;
    flex-basis: 42px;
    min-height: 42px;
    margin: 2px 0 0;
  }
  body.mobile-stage #gameScreen .hand-actions .play-hand { min-height: 40px; }
  body.mobile-stage #gameScreen .game-spike-slots { grid-template-columns: repeat(5, minmax(0, 1fr)); height: auto; }
  body.mobile-stage #gameScreen .game-spike-slot { width: 100%; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .server-start-signal,
  .deck-alarm.show,
  .deck-restart-banner.show,
  .deck-restart-banner strong,
  .crew-call-window,
  .crew-call-static,
  .crew-call-feed,
  .crew-effect-broadcast,
  .crew-effect-flight.effect-applied .card-face,
  .crew-state-banner,
  #gameScreen .lane-card.crew-state-ready,
  #gameScreen .lane-slot.empty,
  .run-outcome.show,
  .firewall-route.show,
  .firewall-route.leaving,
  .node-map-edge.reachable,
  .node-map-edge.preview,
  .node-map-node.available::before,
  .node-map-node.available .node-map-core,
  .node-map-node.selected .node-map-core,
  .node-map-node.fogged::before,
  .node-map-node.route-completing .node-map-core,
  .node-map-node.route-completing .node-map-check,
  .node-map-node.completed .node-map-check,
  .node-map-node.route-completed .node-map-check,
  .node-map-node.current .node-map-core,
  .node-map-node.fogged .node-map-core,
  .node-map-node.fogged small,
  .node-map-node.fogged .node-map-core::after,
  .node-choice-card,
  .node-choice-card > button,
  .route-upgrade-choice[aria-hidden="false"],
  .route-upgrade-option.selected,
  .firewall-arrival-fx::before,
  .firewall-arrival-fx > i,
  .van-jack-transition.show,
  .van-jack-track i,
  .gameplay-casino-backdrop img,
  .game-spike-slot.ultra-charged::before,
  .game-spike-slot.ultra-charged::after,
  .game-spike-slot.spike-scoring,
  .van-spike-slot.ultra-charged::before,
  .van-spike-slot.ultra-charged::after,
  .van-offers.rerolled,
  .spike-online-dot,
  .van-status-light,
  .outcome-scan { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .crew-call-window { transition-duration: 1ms !important; }
}

/* ============================================================
   Overlay layering lock
   Card inspection raises .card-dock to z-index 90/120 and the focused card to
   96/130 !important. Those sit ABOVE .collection(70), .deck-screen(72) and
   .sheet(78), so hovering the hand while a modal was open popped cards through
   the overlay. The JS guard (handInteractionBlocked) stops the hover starting;
   this is the defensive net for any path that slips through, and it also covers
   the Spike sheet opened from run-ui.js.
   ============================================================ */
#phone:has(> #collection.open) #gameScreen .card-dock,
#phone:has(> #deckScreen.open) #gameScreen .card-dock,
#phone:has(> #actionSheet.open) #gameScreen .card-dock,
#phone:has(> #runOutcome.show) #gameScreen .card-dock,
#phone:has(> #deckAlarm.show) #gameScreen .card-dock,
#phone:has(> #deckRestartBanner.show) #gameScreen .card-dock,
body.overlay-lock #gameScreen .card-dock {
  z-index: auto !important;
}

#phone:has(> #collection.open) .card-inspecting,
#phone:has(> #deckScreen.open) .card-inspecting,
#phone:has(> #actionSheet.open) .card-inspecting,
#phone:has(> #runOutcome.show) .card-inspecting,
#phone:has(> #collection.open) .panel-inspecting-card,
#phone:has(> #deckScreen.open) .panel-inspecting-card,
#phone:has(> #actionSheet.open) .panel-inspecting-card,
#phone:has(> #runOutcome.show) .panel-inspecting-card,
body.overlay-lock .card-inspecting,
body.overlay-lock .panel-inspecting-card {
  z-index: auto !important;
  transform: translateY(var(--lift, 0px)) rotate(var(--rot, 0deg)) !important;
  filter: none !important;
}

/* The inspection scrim must never sit over an open modal either. */
#phone:has(> #collection.open) #gameScreen.card-inspecting-context::after,
#phone:has(> #deckScreen.open) #gameScreen.card-inspecting-context::after,
#phone:has(> #actionSheet.open) #gameScreen.card-inspecting-context::after,
body.overlay-lock #gameScreen.card-inspecting-context::after {
  display: none !important;
}

/* While a modal owns the screen the hand is inert to pointer input. */
body.overlay-lock #gameScreen .card-dock,
body.overlay-lock #gameScreen .play-stage {
  pointer-events: none;
}

/* ============================================================
   Layout + legibility pass
   ============================================================ */

/* --- Reclaim the dead vertical band ---------------------------------------
   All layout slack used to collapse into a single .game-fill spacer, leaving a
   ~170px void between the Firewall bar and the DAMAGE counter while the counter
   and pill rails stayed cramped at a fixed 96px. Let the score area absorb the
   slack instead: it is display:grid + align-items:center, so the counter sits
   centred in the free band ("central third") and the void disappears. */
#gameScreen .score-area {
  flex: 1 1 auto;
  height: auto;
  min-height: 96px;
  margin-top: 5px;
}
#gameScreen .game-fill,
#gameScreen.selecting-hand .game-fill {
  flex: 0 0 auto;
  min-height: 2px;
}

/* --- Text legibility ------------------------------------------------------
   These labels sat at 7-10px in var(--muted) #8a99aa on a near-black panel,
   which read as "too small / too dark". Bumped a step and brightened; the
   monospace display face keeps the same visual rhythm. */
.heat-meter-head,
.ai-hp-head {
  font-size: 11px;
  color: #b9c9da;
}
.ai-hp-head span:last-child { color: #ff9fae; }

.tier-heads {
  color: #b9c9da;
  font-size: 11.5px;
}

.stage-hint {
  font-size: 11px;
  color: rgba(190, 218, 245, 0.82);
}
#gameScreen.selecting-hand .stage-hint { font-size: 10px; }

#gameScreen .barrier-status { color: #d3f8ff; }
.barrier-copy small { font-size: 10px; }

#gameScreen .crew-cooldown-banner small { font-size: 9px; }
.spike-offline-label { font-size: 9px; }
.van-offer-state { font-size: 8.5px; }
.van-offer-toolbar small { font-size: 9px; color: #c3b0cf; }
.van-spike-slot.empty small,
.van-slot-name { font-size: 9px; }
.van-next-button small { font-size: 10px; }

/* --- Hand fan fit ---------------------------------------------------------
   The fan used a fixed -11px overlap; at 7-8 cards it was ~48px wider than the
   430px frame and #phone{overflow:hidden} clipped the outer cards away.
   fitHandFan() in app.js measures the dock and sets --hand-overlap to the
   tightest value that still fits, never below the designed 11px. */
.inert-cards .poker-card {
  margin: 0 calc(-1 * var(--hand-overlap, 11px));
}

/* ============================================================
   Hot Potato blow-up beat
   Each held Hot Potato pumps at the start of the player's turn, then either
   detonates (card destroyed, Heat applied) or settles. Driven by
   resolveHotPotatoes() in app.js.
   ============================================================ */
.poker-card.hot-pumping { z-index: 30; animation: hotPump 760ms cubic-bezier(.36,.07,.19,.97); }
@keyframes hotPump {
  0%   { transform: translateY(var(--lift,0px)) rotate(var(--rot,0deg)) scale(1); filter: none; }
  18%  { transform: translateY(calc(var(--lift,0px) - 6px)) rotate(var(--rot,0deg)) scale(1.1); filter: brightness(1.5) drop-shadow(0 0 10px #ff5a2e); }
  34%  { transform: translateY(var(--lift,0px)) rotate(var(--rot,0deg)) scale(1.02); filter: brightness(1.05); }
  52%  { transform: translateY(calc(var(--lift,0px) - 9px)) rotate(var(--rot,0deg)) scale(1.16); filter: brightness(1.85) drop-shadow(0 0 15px #ff3b17); }
  68%  { transform: translateY(var(--lift,0px)) rotate(var(--rot,0deg)) scale(1.03); filter: brightness(1.1); }
  86%  { transform: translateY(calc(var(--lift,0px) - 13px)) rotate(var(--rot,0deg)) scale(1.24); filter: brightness(2.3) drop-shadow(0 0 22px #ff2a00); }
  100% { transform: translateY(var(--lift,0px)) rotate(var(--rot,0deg)) scale(1.06); filter: brightness(1.3); }
}

.poker-card.hot-exploding { z-index: 32; animation: hotExplode 560ms cubic-bezier(.2,.9,.3,1) forwards; pointer-events: none; }
@keyframes hotExplode {
  0%   { transform: translateY(var(--lift,0px)) rotate(var(--rot,0deg)) scale(1.06); filter: brightness(2.4); opacity: 1; }
  22%  { transform: translateY(calc(var(--lift,0px) - 10px)) rotate(calc(var(--rot,0deg) + 6deg)) scale(1.42); filter: brightness(3.4) drop-shadow(0 0 30px #ff4d16); opacity: 1; }
  100% { transform: translateY(calc(var(--lift,0px) + 26px)) rotate(calc(var(--rot,0deg) - 16deg)) scale(0.32); filter: brightness(0.6) blur(3px); opacity: 0; }
}

.poker-card.hot-safe { animation: hotSafe 620ms ease-out; }
@keyframes hotSafe {
  0%   { filter: brightness(1.3); }
  40%  { filter: brightness(1) drop-shadow(0 0 8px rgba(120, 230, 255, .8)); }
  100% { filter: none; }
}

.hot-blast {
  position: absolute;
  z-index: 33;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  font-size: 58px;
  pointer-events: none;
  animation: hotBlast 720ms cubic-bezier(.15,.9,.3,1) forwards;
}
@keyframes hotBlast {
  0%   { transform: scale(0.2); opacity: 0; filter: brightness(2.5); }
  26%  { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* ============================================================
   Current: bolt + charge glow on the adjacent cards it multiplies
   ============================================================ */
.poker-card.current-source { filter: drop-shadow(0 0 5px #7be9ff) drop-shadow(0 0 16px rgba(123, 233, 255, .95)); }
.poker-card.current-linked { filter: drop-shadow(0 0 4px rgba(123, 233, 255, .8)) drop-shadow(0 0 12px rgba(123, 233, 255, .7)); }
.poker-card.current-source,
.poker-card.current-linked { z-index: 26; }
.poker-card.current-source { animation: currentSurge 620ms ease-out forwards; }
.poker-card.current-linked { animation: currentLinked 620ms ease-out forwards; }
@keyframes currentSurge {
  0%   { filter: drop-shadow(0 0 5px #7be9ff); }
  38%  { filter: brightness(1.75) drop-shadow(0 0 6px #d6f7ff) drop-shadow(0 0 26px #7be9ff); }
  100% { filter: drop-shadow(0 0 5px #7be9ff) drop-shadow(0 0 16px rgba(123, 233, 255, .95)); }
}
@keyframes currentLinked {
  0%   { filter: drop-shadow(0 0 4px rgba(123,233,255,.8)); }
  46%  { filter: brightness(1.4) drop-shadow(0 0 6px #bff2ff) drop-shadow(0 0 20px #7be9ff); }
  100% { filter: drop-shadow(0 0 4px rgba(123,233,255,.8)) drop-shadow(0 0 12px rgba(123, 233, 255, .7)); }
}

.current-bolt {
  position: absolute;
  z-index: 34;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 26px;
  color: #d8f8ff;
  text-shadow: 0 0 10px #7be9ff, 0 0 22px #26c8ff;
  pointer-events: none;
  animation: currentBolt 640ms cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes currentBolt {
  0%   { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  30%  { transform: scale(1.25) rotate(4deg); opacity: 1; }
  100% { transform: scale(0.9) rotate(0deg); opacity: 0; }
}

.current-arc {
  position: absolute;
  z-index: 33;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(123,233,255,0), #9ff0ff, rgba(123,233,255,0));
  box-shadow: 0 0 12px #56dcff;
  pointer-events: none;
  transform-origin: left center;
  animation: currentArc 560ms ease-out forwards;
}
@keyframes currentArc {
  0%   { opacity: 0; transform: scaleX(0.2); }
  35%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

/* ============================================================
   BURNED cards (Overload aftermath)
   An Overload card that has triggered keeps its slot in the deck but loses its
   rank and suit and only ever deals 1 damage. Before this it rendered the literal
   text "BURNED" in the rank slot and fell back to a spade glyph, so it read as a
   normal spade. Now it reads as charred stock.
   ============================================================ */
.is-burned .burned-face .card-template-art {
  filter: grayscale(1) brightness(0.3) contrast(1.2);
}

.burned-face { position: relative; }

/* Solid scorch, not mix-blend: the card template sits behind a mask + isolation,
   which neutralised multiply blending and left the stock looking clean. */
.burned-face .burned-scorch {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(115% 85% at 50% 116%, rgba(0,0,0,.95) 20%, rgba(30,13,6,.9) 46%, rgba(18,10,8,.78) 78%),
    linear-gradient(160deg, rgba(26,17,13,.9), rgba(8,5,5,.96));
}

.burned-face .burned-glyph {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  line-height: 1;
  opacity: 1;
  text-shadow: 0 0 14px rgba(255, 140, 50, .95);
  filter: drop-shadow(0 0 10px rgba(255, 116, 32, 1)) saturate(1.35) brightness(1.25);
}

.burned-face .burned-value {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 63%;
  transform: translateX(-50%);
  color: #ffc08d;
  font: 1000 15px var(--mono);
  text-shadow: 0 0 8px rgba(255, 110, 40, .9), 0 2px 0 #000;
}

.burned-face .burned-strip {
  position: absolute;
  z-index: 2;
  left: 4%;
  right: 4%;
  bottom: 8%;
  padding: 2px 0;
  border-radius: 3px;
  background: #1a0b05;
  border: 1px solid rgba(255, 132, 54, .7);
  color: #ffa367;
  font: 1000 8px var(--mono);
  letter-spacing: .14em;
  text-align: center;
}

/* smaller contexts: keep the strip legible, drop the redundant damage number */
.deck-card.is-burned .burned-value { display: none; }
.deck-card.is-burned .burned-glyph { font-size: 24px; top: 40%; }
.deck-card.is-burned .burned-strip { font-size: 7px; letter-spacing: .08em; }

/* the moment it burns, in hand, before it is spent */
.poker-card.card-burning { z-index: 28; animation: cardBurnOut 720ms ease-out; }
@keyframes cardBurnOut {
  0%   { filter: brightness(1); }
  22%  { filter: brightness(2.6) drop-shadow(0 0 20px #ff6a20) saturate(1.5); }
  55%  { filter: brightness(0.85) sepia(.5); }
  100% { filter: none; }
}

/* ============================================================
   Crew activation sequence — restaged
   The avatar used to shrink to 55% and dock to the top edge while the banner ran
   as a separate band. Now the Crew stays zoomed, the effect banner overlaps the
   bottom of the portrait, the affected cards land large underneath it, and
   everything else on screen is dimmed and blurred so the beat reads clearly.
   ============================================================ */

/* Dim + blur everything behind the sequence. */
.crew-call-sequence::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: opacity 320ms ease;
  pointer-events: none;
}
.crew-call-sequence.show-call::before { opacity: 1; }
.crew-call-sequence.effect-exit::before { opacity: 0; }

/* Portrait: stays zoomed through the whole beat instead of shrinking away. */
.crew-call-sequence.show-effect .crew-call-window {
  top: 9%;
  transform: translate(-50%, 0) scale(1);
}
.crew-call-sequence.show-effect.effect-exit .crew-call-window {
  opacity: 0;
  transform: translate(-50%, -14px) scale(.94);
}

/* Banner: overlaps the lower part of the portrait rather than sitting apart. */
.crew-call-sequence.show-effect .crew-effect-broadcast {
  top: 39.5%;
  min-height: 104px;
  padding: 13px 34px;
  z-index: 11;
}
.crew-call-sequence.show-effect .crew-effect-broadcast strong {
  font-size: 34px;
}
.crew-call-sequence.show-effect .crew-effect-broadcast span {
  font-size: 11px;
}

/* The flying cards land below the banner and read large. */
.crew-effect-flight { z-index: 592 !important; }

@media (max-height: 780px) {
  .crew-call-sequence.show-effect .crew-call-window { top: 5%; transform: translate(-50%, 0) scale(.82); }
  .crew-call-sequence.show-effect .crew-effect-broadcast { top: 35%; min-height: 88px; }
  .crew-call-sequence.show-effect .crew-effect-broadcast strong { font-size: 28px; }
}

/* ============================================================
   Round-4 pass
   ============================================================ */

/* --- Crew cooldown readout -------------------------------------------------
   Was dim red text on a dark scrim. Now bright, breathing, and ramping from red
   (long wait) through orange to yellow on the final turn. data-cooldown is set
   in renderLane(). */
#gameScreen .lane-card.crew-state-cooldown .crew-cooldown-banner {
  --cd: #ff2f52;
  background: rgba(8, 3, 6, .74);
}
/* Same specificity as the base rule above, or the ramp never wins. */
#gameScreen .lane-card.crew-state-cooldown .crew-cooldown-banner[data-cooldown="2"] { --cd: #ff9020; }
#gameScreen .lane-card.crew-state-cooldown .crew-cooldown-banner[data-cooldown="1"] { --cd: #ffe23a; }

#gameScreen .crew-cooldown-banner small {
  color: var(--cd);
  font: 1000 10px/1 var(--mono);
  letter-spacing: .06em;
  padding: 0 4px;
  -webkit-text-stroke: 0;
  text-shadow:
    1px 0 0 #10040a, -1px 0 0 #10040a, 0 1px 0 #10040a, 0 -1px 0 #10040a,
    0 0 10px var(--cd);
}
#gameScreen .crew-cooldown-banner strong {
  color: var(--cd);
  font: 1000 54px/.82 var(--mono);
  /* paint-order is unreliable for HTML text in WebKit, so -webkit-text-stroke
     paints over the fill and washes the digit out. Build the dark outline from
     offset shadows instead, then add the coloured glow on top. */
  -webkit-text-stroke: 0;
  text-shadow:
    2px 0 0 #10040a, -2px 0 0 #10040a, 0 2px 0 #10040a, 0 -2px 0 #10040a,
    2px 2px 0 #10040a, -2px 2px 0 #10040a, 2px -2px 0 #10040a, -2px -2px 0 #10040a,
    0 0 16px var(--cd), 0 0 30px var(--cd);
}
#gameScreen .lane-card.crew-state-cooldown .crew-cooldown-banner {
  animation: cooldownBreathe 1.9s ease-in-out infinite;
}
@keyframes cooldownBreathe {
  0%, 100% { filter: brightness(1) saturate(1.15); transform: scale(1); }
  50%      { filter: brightness(1.14) saturate(1.3); transform: scale(1.05); }
}

/* --- Installed Crew slot: one stroke, in the Crew's own type colour ---------
   The filled slot and the card each drew their own 3px border, which read as an
   ugly double stroke. The slot border is dropped and the card fills it. */
#gameScreen .lane-slot.filled {
  border: 0;
  padding: 0;
  background: transparent;
}
#gameScreen .lane-slot.filled .lane-card {
  width: 100%;
  height: 100%;
  border: 3px solid var(--crew-call-solid, #62eeb6);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
  animation: none;
}
#gameScreen .lane-slot.filled .lane-avatar,
#gameScreen .lane-slot.filled .lane-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- e-Chips are purple everywhere ---------------------------------------- */
:root { --echip: #b56cff; --echip-deep: #7b32d6; }

#gameScreen .run-status-row .game-chip-pill,
.chip-pill {
  border-color: rgba(181, 108, 255, .55);
  background: rgba(38, 16, 62, .82);
  box-shadow: inset 0 0 22px rgba(181, 108, 255, .14), 0 0 20px rgba(181, 108, 255, .18);
}
.chip-pill strong { color: #e2ccff; }
.choice-cost,
.choice-cost strong { color: var(--echip); }
.status-particle.chip-shot {
  background: #4a1180 !important;
  border-color: #c88dff !important;
  box-shadow: 0 0 30px rgba(181, 108, 255, .9), 0 5px 14px #000 !important;
}
.score-counter.chips-mode {
  color: var(--echip);
  border-color: rgba(181, 108, 255, .9);
  box-shadow: 0 0 32px rgba(157, 60, 255, .58);
}
.score-mode.mode-echips { background: var(--echip); color: #12061f; }

/* --- Glows must follow rounded / masked shapes ----------------------------
   Card faces are mask-clipped, so a box-shadow on them paints the un-masked
   rectangle and the glow shows square corners. Anything glowing a card uses
   drop-shadow on the card element instead. */
.poker-card .card-face,
.deck-card .card-face,
.stage-cards .poker-card .card-face { box-shadow: none; }

.poker-card.hand-selected { filter: drop-shadow(0 0 6px rgba(120, 240, 255, .85)); }
.poker-card.card-scoring { filter: drop-shadow(0 0 10px rgba(255, 236, 150, .9)); }

/* Any element that glows and is rounded keeps the glow on its own radius. */
.deck-button,
.chip-pill,
.barrier-status,
.ai-hp-track,
.heat-meter-track,
.score-counter,
.play-hand,
.discard-hand { border-radius: inherit; }
.ai-hp-track,
.heat-meter-track { overflow: hidden; }

/* ============================================================
   Crew / Spike detail: floating artwork, one information box
   The artwork is the point, so it sits outside any container - floating over the
   dimmed screen, slightly tilted, drifting slowly. Below it a single box holds
   the plain-language explanation, the colour-coded effect box, and the actions.
   Header text is name + type (Crew) or name + rarity (Spike); nothing else.
   ============================================================ */
.sheet.open {
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.58);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* The stack must not clip: the artwork tilts and drifts upward out of its own
   layout box, and an overflow here sliced the top off the portrait. Scrolling
   lives on .sheet instead. */
.sheet-stack {
  width: 100%;
  max-width: 340px;
  margin: auto;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  overflow: visible;
}

/* --- floating artwork ------------------------------------------------------ */
.sheet-art {
  flex: 0 0 auto;
  width: min(214px, 56vw);
  aspect-ratio: 2 / 3;
  margin-bottom: -22px;
  z-index: 2;
  pointer-events: none;
  animation: sheetArtFloat 6.5s ease-in-out infinite;
}
.sheet-art.empty { display: none; }

.sheet-art .crew-avatar,
.sheet-art .spike-detail-art {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 3px solid var(--art-color, rgba(255, 255, 255, .3));
  border-radius: 12px;
  overflow: hidden;
  background: #0b0712;
  /* Type-coloured frame plus a faint glow of the same colour: the portrait art is
     dark at the edges and would otherwise dissolve into the dimmed backdrop, which
     also hid the tilt. */
  box-shadow:
    0 0 18px var(--art-glow, rgba(255, 255, 255, .28)),
    0 0 44px var(--art-glow, rgba(255, 255, 255, .18)),
    0 26px 46px rgba(0, 0, 0, .8);
}

.sheet-art.family-SURGE  { --art-color: #ffad3d; --art-glow: rgba(255, 173, 61, .42); }
.sheet-art.family-LUCK   { --art-color: #b56cff; --art-glow: rgba(181, 108, 255, .42); }
.sheet-art.family-CRYPTO { --art-color: #63e4ad; --art-glow: rgba(99, 228, 173, .42); }
/* fusion Crew: blend the two type colours across the frame */
.sheet-art.family-LUCK.family-SURGE {
  --art-color: #b56cff;
  --art-glow: rgba(211, 138, 190, .45);
  border-image: linear-gradient(135deg, #b56cff, #ffad3d) 1;
}
/* Spikes colour the frame and the glow by rarity */
.sheet-art .spike-detail-art {
  --art-color: var(--rarity-color);
  --art-glow: color-mix(in srgb, var(--rarity-color) 45%, transparent);
}
.sheet-art .crew-avatar img,
.sheet-art .spike-detail-art img,
.sheet-art .generic-spike-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sheet-art .crew-portrait-effect-icon { display: none; }

@keyframes sheetArtFloat {
  0%, 100% { transform: rotate(-5.5deg) translateY(0); }
  50%      { transform: rotate(-3deg) translateY(-11px); }
}

/* --- the single information box -------------------------------------------- */
.sheet .sheet-card {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 30px 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(181, 108, 255, .42);
  background: rgba(10, 6, 18, 0.95);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
  animation: none;
}

.sheet-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.sheet-head h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.02;
}
.sheet-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.sheet-tags .spike-rarity {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 4px;
  color: #080409;
  background: var(--rarity-color);
  font: 1000 10px var(--mono);
  letter-spacing: .06em;
}

/* explanation + colour-coded effect box keep their existing treatment */
.sheet .rich-desc.crew-description { margin-top: 11px; }
.sheet .spike-detail-effect { margin-top: 11px; }

/* actions live inside the information box, below the effect box */
.sheet .sheet-actions { margin-top: 12px; }

@media (max-height: 780px) {
  .sheet-art { width: min(158px, 42vw); margin-bottom: -18px; }
  .sheet-head h3 { font-size: 20px; }
  .sheet .sheet-card { padding: 24px 12px 12px; }
}

/* ============================================================
   Round-4 pass
   ============================================================ */

/* --- Crew cooldown readout -------------------------------------------------
   Was dim red text on a dark scrim. Now bright, breathing, and ramping from red
   (long wait) through orange to yellow on the final turn. data-cooldown is set
   in renderLane(). */
#gameScreen .lane-card.crew-state-cooldown .crew-cooldown-banner {
  --cd: #ff2f52;
  background: rgba(8, 3, 6, .74);
}
/* Same specificity as the base rule above, or the ramp never wins. */
#gameScreen .lane-card.crew-state-cooldown .crew-cooldown-banner[data-cooldown="2"] { --cd: #ff9020; }
#gameScreen .lane-card.crew-state-cooldown .crew-cooldown-banner[data-cooldown="1"] { --cd: #ffe23a; }

#gameScreen .crew-cooldown-banner small {
  color: var(--cd);
  font: 1000 10px/1 var(--mono);
  letter-spacing: .06em;
  padding: 0 4px;
  -webkit-text-stroke: 0;
  text-shadow:
    1px 0 0 #10040a, -1px 0 0 #10040a, 0 1px 0 #10040a, 0 -1px 0 #10040a,
    0 0 10px var(--cd);
}
#gameScreen .crew-cooldown-banner strong {
  color: var(--cd);
  font: 1000 54px/.82 var(--mono);
  /* paint-order is unreliable for HTML text in WebKit, so -webkit-text-stroke
     paints over the fill and washes the digit out. Build the dark outline from
     offset shadows instead, then add the coloured glow on top. */
  -webkit-text-stroke: 0;
  text-shadow:
    2px 0 0 #10040a, -2px 0 0 #10040a, 0 2px 0 #10040a, 0 -2px 0 #10040a,
    2px 2px 0 #10040a, -2px 2px 0 #10040a, 2px -2px 0 #10040a, -2px -2px 0 #10040a,
    0 0 16px var(--cd), 0 0 30px var(--cd);
}
#gameScreen .lane-card.crew-state-cooldown .crew-cooldown-banner {
  animation: cooldownBreathe 1.9s ease-in-out infinite;
}
@keyframes cooldownBreathe {
  0%, 100% { filter: brightness(1) saturate(1.15); transform: scale(1); }
  50%      { filter: brightness(1.14) saturate(1.3); transform: scale(1.05); }
}

/* --- Installed Crew slot: one stroke, in the Crew's own type colour ---------
   The filled slot and the card each drew their own 3px border, which read as an
   ugly double stroke. The slot border is dropped and the card fills it. */
#gameScreen .lane-slot.filled {
  border: 0;
  padding: 0;
  background: transparent;
}
#gameScreen .lane-slot.filled .lane-card {
  width: 100%;
  height: 100%;
  border: 3px solid var(--crew-call-solid, #62eeb6);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
  animation: none;
}
#gameScreen .lane-slot.filled .lane-avatar,
#gameScreen .lane-slot.filled .lane-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- e-Chips are purple everywhere ---------------------------------------- */
:root { --echip: #b56cff; --echip-deep: #7b32d6; }

#gameScreen .run-status-row .game-chip-pill,
.chip-pill {
  border-color: rgba(181, 108, 255, .55);
  background: rgba(38, 16, 62, .82);
  box-shadow: inset 0 0 22px rgba(181, 108, 255, .14), 0 0 20px rgba(181, 108, 255, .18);
}
.chip-pill strong { color: #e2ccff; }
.choice-cost,
.choice-cost strong { color: var(--echip); }
.status-particle.chip-shot {
  background: #4a1180 !important;
  border-color: #c88dff !important;
  box-shadow: 0 0 30px rgba(181, 108, 255, .9), 0 5px 14px #000 !important;
}
.score-counter.chips-mode {
  color: var(--echip);
  border-color: rgba(181, 108, 255, .9);
  box-shadow: 0 0 32px rgba(157, 60, 255, .58);
}
.score-mode.mode-echips { background: var(--echip); color: #12061f; }

/* --- Glows must follow rounded / masked shapes ----------------------------
   Card faces are mask-clipped, so a box-shadow on them paints the un-masked
   rectangle and the glow shows square corners. Anything glowing a card uses
   drop-shadow on the card element instead. */
.poker-card .card-face,
.deck-card .card-face,
.stage-cards .poker-card .card-face { box-shadow: none; }

.poker-card.hand-selected { filter: drop-shadow(0 0 6px rgba(120, 240, 255, .85)); }
.poker-card.card-scoring { filter: drop-shadow(0 0 10px rgba(255, 236, 150, .9)); }

/* Any element that glows and is rounded keeps the glow on its own radius. */
.deck-button,
.chip-pill,
.barrier-status,
.ai-hp-track,
.heat-meter-track,
.score-counter,
.play-hand,
.discard-hand { border-radius: inherit; }
.ai-hp-track,
.heat-meter-track { overflow: hidden; }

/* ============================================================
   Crew / Spike detail: artwork first
   Both detail popups used a small thumbnail beside a text block docked to the
   bottom of the screen. The artwork is the point, so it now sits large and
   centred with the information panel directly beneath it, over a dimmed,
   blurred backdrop.
   ============================================================ */
.sheet.open {
  align-items: center;
  justify-content: center;
  padding: 18px 16px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

.sheet .sheet-card {
  width: 100%;
  max-width: 350px;
  max-height: 100%;
  overflow-y: auto;
  background: rgba(9, 6, 16, 0.9);
  border-color: rgba(181, 108, 255, 0.45);
}

/* Stale round-3 detail rules removed: they still sized and shadowed .sheet-hero /
   .spike-detail-art for the old in-card layout and, sitting later in the file, were
   overriding the floating-artwork frame and glow. */

/* The CALLING.../CONNECTED readout has done its job by the time the effect banner
   slides over the bottom of the portrait; fade it out rather than leaving it
   half-covered. */
.crew-call-sequence .crew-call-status { transition: opacity 260ms ease; }
.crew-call-sequence.show-effect .crew-call-status { opacity: 0; }

/* Compact defense rail: e-Chips, Barrier, and the active AI Counter. */
#gameScreen .run-status-row {
  grid-template-columns: 88px minmax(0, 1fr) 94px;
  gap: 5px;
}
#gameScreen .run-status-row .game-chip-pill { width: 88px; height: 38px; }
#gameScreen .barrier-status { height: 38px; padding: 3px 7px; }
#gameScreen .barrier-copy { gap: 4px; }
#gameScreen .barrier-copy b { font-size: 9px; letter-spacing: 0; white-space: nowrap; }
#gameScreen .barrier-copy small { font-size: 9px; }
#gameScreen .barrier-pip { width: 14px; font-size: 17px; }

.ai-counter-status {
  min-width: 0;
  height: 38px;
  display: grid;
  grid-template-columns: 15px 1fr;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid rgba(117,126,139,.42);
  border-radius: 7px;
  color: #77808b;
  background: rgba(19,18,24,.9);
  box-shadow: inset 0 0 14px rgba(0,0,0,.38);
  text-align: left;
  touch-action: manipulation;
}
.ai-counter-copy { min-width: 0; display: grid; gap: 2px; }
.ai-counter-copy b { overflow: hidden; font: 1000 8px/1 var(--mono); white-space: nowrap; }
.ai-counter-copy small { font: 1000 10px/1 var(--mono); }
.ai-counter-light {
  width: 14px;
  height: 14px;
  border: 3px solid #3e4249;
  border-radius: 50%;
  background: #191b1f;
  box-shadow: inset 0 0 5px #000;
}
.ai-counter-status.active {
  border-color: rgba(255,49,89,.82);
  color: #fff;
  background: rgba(64,8,20,.92);
  box-shadow: inset 0 0 16px rgba(255,49,89,.16), 0 0 15px rgba(255,23,72,.24);
}
.ai-counter-status.active .ai-counter-copy small { color: #ff6b84; }
.ai-counter-status.active .ai-counter-light {
  border-color: #ff9aad;
  background: #ff173f;
  box-shadow: 0 0 8px #ff173f, 0 0 18px rgba(255,23,63,.9);
  animation: aiCounterAlert 1s ease-in-out infinite alternate;
}
.ai-counter-info {
  position: absolute;
  z-index: 210;
  inset: 0;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(3,3,7,.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.ai-counter-info.open { display: grid; animation: counterInfoIn 180ms ease-out both; }
.ai-counter-info-panel {
  position: relative;
  width: 100%;
  padding: 18px 17px;
  border: 2px solid #626a75;
  border-radius: 7px;
  color: #d6dbe1;
  background: rgba(21,20,27,.98);
  box-shadow: 7px 7px 0 #050307, 0 0 25px rgba(0,0,0,.6);
}
.ai-counter-info.active .ai-counter-info-panel { border-color: #ff3159; box-shadow: 7px 7px 0 #050307, 0 0 28px rgba(255,23,63,.46); }
.ai-counter-info-panel > button { position: absolute; top: 7px; right: 7px; width: 38px; height: 38px; padding: 0; border: 0; color: #fff; background: transparent; font: 1000 28px/1 var(--font); }
.ai-counter-info-panel > span { color: #89929e; font: 1000 9px/1 var(--mono); }
.ai-counter-info.active .ai-counter-info-panel > span { color: #ff5f79; }
.ai-counter-info-panel h2 { max-width: calc(100% - 36px); margin: 8px 0 9px; color: #fff; font: 1000 25px/.95 var(--font); }
.ai-counter-info-panel p { margin: 0; color: #d6dbe1; font: 750 12px/1.45 var(--mono); }
@keyframes aiCounterAlert { from { filter: brightness(.8); transform: scale(.9); } to { filter: brightness(1.45); transform: scale(1.08); } }
@keyframes counterInfoIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-height: 760px) {
  #gameScreen .run-status-row .game-chip-pill,
  #gameScreen .barrier-status,
  #gameScreen .ai-counter-status { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-counter-status.active .ai-counter-light,
  .ai-counter-info.open,
  .hand-level-up.show,
  .hand-level-up > strong,
  .hand-level-change div:last-child {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  .hand-xp-track i { transition-duration: 1ms !important; }
}

/* Hand Heat, free discards, and the central Crew call control. */
#gameScreen .crew-call-button {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  padding: 4px;
  overflow: hidden;
  border: 3px solid #baffdf;
  border-radius: 8px;
  color: #06150e;
  background: linear-gradient(180deg, #69ffc0, #13b66f);
  box-shadow: inset 0 1px rgba(255,255,255,.72), 0 0 18px rgba(66,255,174,.58), 4px 4px 0 #06080a;
  opacity: 1;
  touch-action: manipulation;
}

#gameScreen .crew-call-button::after {
  content: '';
  position: absolute;
  inset: -40% -80%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.76) 50%, transparent 60%);
  transform: translateX(-70%);
  animation: crewCallShine 2.4s ease-in-out infinite;
}

#gameScreen .crew-call-button-icon {
  position: relative;
  z-index: 1;
  font: 1000 31px/.8 var(--font);
  text-shadow: 0 2px rgba(255,255,255,.4);
}

#gameScreen .crew-call-button b { position: relative; z-index: 1; font: 1000 9px/1 var(--mono); }
#gameScreen .crew-call-price {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  border-radius: 999px;
  color: #fff;
  background: #07100c;
  font: 1000 8px/1 var(--mono);
}
#gameScreen .crew-call-price .chip-icon { width: 11px; height: 11px; }
#gameScreen .crew-call-button.refreshing {
  border-color: #d8ffff;
  color: #031617;
  background: linear-gradient(180deg, #71ffff, #15cbd2);
  box-shadow: 0 0 28px rgba(64,246,255,.95), 4px 4px 0 #06080a;
}
#gameScreen .crew-call-button.refreshing .crew-call-button-icon { animation: crewCallSpin 460ms cubic-bezier(.2,.8,.25,1) both; }
#gameScreen .crew-call-button.updated { animation: crewCallUpdated 520ms cubic-bezier(.16,1.4,.3,1) both; }

@keyframes crewCallSpin { to { transform: rotate(360deg) scale(1.08); } }
@keyframes crewCallShine { 0%, 62% { transform: translateX(-70%); } 88%, 100% { transform: translateX(70%); } }
@keyframes crewCallUpdated {
  0% { transform: scale(.88); filter: brightness(2.1); }
  45% { transform: scale(1.1); filter: brightness(1.5); }
  100% { transform: scale(1); filter: brightness(1); }
}

.discard-hand { display: grid; place-content: center; gap: 2px; min-width: 82px; }
.discard-hand span { font: inherit; }
.discard-hand small { font: 1000 7px/1 var(--mono); letter-spacing: 0; }
.discard-hand.free-discard {
  border-color: #8fffe0;
  background: linear-gradient(180deg, #157f66, #094c40);
  box-shadow: 0 7px 18px rgba(62,255,199,.26), inset 0 1px rgba(255,255,255,.24);
}
.discard-hand.discard-cooling small { color: #ffd43b; }

#gameScreen .hand-actions .discard-hand {
  position: static;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 7px 10px;
  font-size: 13px;
}
#gameScreen .hand-actions .discard-hand small { font-size: 8px; }

#gameScreen .hand-actions {
  display: grid;
  grid-template-columns: minmax(0, 118px) minmax(0, 1fr) 44px;
  gap: 10px;
}
#gameScreen .hand-actions .play-hand {
  width: 100%;
  min-width: 0;
  padding-inline: 12px;
}
#gameScreen .hand-actions .deck-button {
  position: static;
  align-self: center;
  transform: none;
}
#gameScreen .hand-actions .deck-button:active { transform: scale(.94); }

.hand-points-pill,
.hand-mult-pill,
.hand-heat-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 6px 10px;
  border: 2px solid #09050d;
  border-radius: 999px;
  font: 1000 12px/1 var(--mono);
  box-shadow: 3px 3px 0 #09050d;
  white-space: nowrap;
}
.hand-heat-pill { color: #fff; background: #ef253f; text-shadow: 1px 1px 0 #09050d; }
.hand-heat-pill.heat-zero,
.score-hand .hand-preview-heat.heat-zero {
  color: #fff;
  background: #737982;
  text-shadow: 1px 1px 0 #09050d;
}
.hand-heat-pill.heat-negative,
.score-hand .hand-preview-heat.heat-negative {
  color: #071315;
  background: #62f5ff;
  text-shadow: none;
}
.hand-level-row-stats { flex-wrap: wrap; }

.score-hand .hand-preview-heat {
  --prepared-heat-glow: #ef253f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 5px 9px;
  border: 2px solid #09050d;
  border-radius: 999px;
  color: #fff;
  background: #ef253f;
  box-shadow: 3px 3px 0 #09050d;
  text-shadow: 1px 1px 0 #09050d;
  letter-spacing: 0;
}
.score-hand .hand-preview-heat.heat-zero { --prepared-heat-glow: #9aa0aa; }
.score-hand .hand-preview-heat.heat-negative { --prepared-heat-glow: #62f5ff; }

.hand-heat-up {
  position: absolute;
  z-index: 621;
  inset: 0;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 9px;
  padding: 24px;
  overflow: hidden;
  pointer-events: none;
  color: #fff;
  text-align: center;
  isolation: isolate;
  background: rgba(13, 2, 5, .42);
}
.hand-heat-up::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  top: 50%;
  height: 230px;
  border-block: 8px solid #080305;
  background: repeating-linear-gradient(-12deg, #c8102f 0 26px, #f04427 26px 52px);
  box-shadow: 0 0 70px rgba(255,33,54,.85), 0 16px 0 #ffb21c;
  transform: translateY(-50%) rotate(-2deg);
}
.hand-heat-up.show { display: grid; animation: handHeatScene 4.05s cubic-bezier(.16,1,.3,1) both; }
.hand-heat-warning { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 4px solid #080305; border-radius: 6px; color: #080305; background: #ffcf35; box-shadow: 5px 5px 0 #080305, 0 0 24px rgba(255,207,53,.8); font: 1000 18px/1 var(--mono); }
.hand-heat-warning b { font-size: 24px; line-height: 1; }
.hand-heat-up > strong { max-width: 380px; font: 1000 34px/.9 var(--font); text-shadow: 4px 4px 0 #080305, 0 0 18px #ffdf69; }
.hand-heat-change { display: flex; align-items: center; gap: 16px; }
.hand-heat-change b { min-width: 116px; padding: 11px 16px; border: 4px solid #080305; border-radius: 999px; color: #fff; background: #ef253f; box-shadow: 6px 6px 0 #080305, 0 0 20px rgba(239,37,63,.65); font: 1000 34px/1 var(--mono); text-shadow: 2px 2px 0 #080305; opacity: 0; transform: translateY(14px) scale(.82); transition: opacity 260ms ease, transform 420ms cubic-bezier(.16,1.35,.3,1); }
.hand-heat-change b.heat-zero { color: #fff; background: #737982; box-shadow: 6px 6px 0 #080305, 0 0 18px rgba(150,156,166,.5); }
.hand-heat-change b.heat-negative { color: #071315; background: #62f5ff; box-shadow: 6px 6px 0 #080305, 0 0 22px rgba(98,245,255,.75); text-shadow: none; }
.hand-heat-change i { color: #fff; font: 1000 34px/1 var(--font); font-style: normal; text-shadow: 3px 3px 0 #080305; opacity: 0; transform: scale(.7); transition: opacity 220ms ease, transform 340ms cubic-bezier(.16,1.35,.3,1); }
.hand-heat-up.reveal-previous #handHeatPrevious,
.hand-heat-up.reveal-current #handHeatCurrent { opacity: 1; transform: translateY(0) scale(1); }
.hand-heat-up.reveal-current .hand-heat-change i { opacity: 1; transform: scale(1); }
@keyframes handHeatScene {
  0% { opacity: 0; transform: translateX(-110%) skewX(-5deg); filter: brightness(2); }
  10%, 84% { opacity: 1; transform: translateX(0) skewX(0); filter: brightness(1); }
  91% { transform: translateX(3%); }
  100% { opacity: 0; transform: translateX(110%) skewX(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  #gameScreen .crew-call-button::after,
  #gameScreen .crew-call-button.refreshing .crew-call-button-icon,
  #gameScreen .crew-call-button.updated,
  .hand-heat-up.show { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .score-hand.hand-preview-stats .hand-preview-heat { animation: none !important; }
}