:root {
  --phone-scale: 1;
  --bg: #05070b;
  --panel: rgba(12, 17, 28, 0.72);
  --panel-strong: rgba(14, 22, 34, 0.9);
  --line: rgba(160, 195, 230, 0.18);
  --line-hot: rgba(88, 246, 204, 0.52);
  --text: #e8f1ff;
  --muted: #8a99aa;
  --faint: #526071;
  --gold: #ffd766;
  --cyan: #43ddff;
  --green: #4cffb0;
  --red: #ff4d67;
  --pink: #ff73c7;
  --orange: #ff9a46;
  --violet: #a988ff;
  --surge: #f5921f;
  --crypto: #46e39a;
  --luck: #9b6dff;
  --radius: 8px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: clip;
  background:
    radial-gradient(900px 540px at 50% 0%, rgba(40, 90, 116, 0.26), transparent 58%),
    radial-gradient(780px 600px at 20% 100%, rgba(150, 56, 84, 0.18), transparent 62%),
    #020307;
  color: var(--text);
  font-family: var(--font);
  user-select: none;
}

.ftue-review-rail {
  position: fixed;
  z-index: 300;
  left: calc(50% + var(--phone-half-width, 215px) + 20px);
  top: 50%;
  width: min(300px, calc(50vw - var(--phone-half-width, 215px) - 38px));
  min-width: 238px;
  max-height: calc(100vh - 28px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(-50%);
  border: 2px solid rgba(67, 221, 255, 0.32);
  border-radius: 8px;
  background: rgba(5, 9, 15, 0.96);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.58), 0 0 28px rgba(67, 221, 255, 0.1);
}

.review-rail-header {
  flex: 0 0 auto;
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, rgba(67, 221, 255, 0.13), rgba(255, 215, 102, 0.05));
}

.review-rail-header p,
.review-rail-header h1 {
  margin: 0;
}

.review-rail-header p {
  color: var(--cyan);
  font: 900 9px var(--mono);
  text-transform: uppercase;
}

.review-rail-header h1 {
  margin-top: 5px;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.05;
}

.review-rail-header span {
  display: block;
  margin-top: 7px;
  color: var(--gold);
  font: 800 10px var(--mono);
}

.review-rail-title {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 8px;
}

.review-rail-title b {
  color: #ffffff;
  font: 950 13px var(--mono);
  text-transform: uppercase;
}

.review-rail-title small {
  color: var(--muted);
  font: 700 8px var(--mono);
  text-align: right;
}

.ftue-review-timeline {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 4px 10px 8px;
  overflow-y: auto;
  list-style: none;
}

.ftue-review-timeline::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 15px;
  bottom: 18px;
  width: 2px;
  background: rgba(138, 153, 170, 0.22);
}

.review-step-button {
  position: relative;
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 24px;
  gap: 8px;
  align-items: center;
  padding: 5px 7px;
  border-left: 3px solid transparent;
  background: transparent;
  text-align: left;
}

.review-step-button:hover {
  background: rgba(255, 255, 255, 0.055);
}

.review-step-number {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid #465264;
  border-radius: 50%;
  color: #a9b5c4;
  background: #090e16;
  font: 900 9px var(--mono);
}

.review-step-copy b,
.review-step-copy small {
  display: block;
}

.review-step-copy b {
  color: #cbd5e2;
  font-size: 11px;
  line-height: 1.1;
}

.review-step-copy small {
  margin-top: 2px;
  color: #647285;
  font: 700 8px var(--mono);
}

.review-step-check {
  opacity: 0;
  font-size: 15px;
  text-align: center;
}

.review-step-button.completed .review-step-number {
  border-color: var(--green);
  color: #04100b;
  background: var(--green);
}

.review-step-button.completed .review-step-check {
  opacity: 1;
}

.review-step-button.current {
  border-left-color: var(--gold);
  background: rgba(255, 215, 102, 0.1);
}

.review-step-button.current .review-step-number {
  border-color: var(--gold);
  color: #080b10;
  background: var(--gold);
  box-shadow: 0 0 15px rgba(255, 215, 102, 0.62);
}

.review-step-button.current .review-step-copy b {
  color: var(--gold);
}

.review-rail-controls {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: #080d15;
}

.review-rail-controls button {
  width: 44px;
  height: 38px;
  border: 2px solid rgba(67, 221, 255, 0.42);
  border-radius: 5px;
  color: var(--cyan);
  background: rgba(67, 221, 255, 0.08);
  font: 1000 20px var(--mono);
}

.review-rail-controls button:disabled {
  cursor: default;
  opacity: 0.28;
  filter: grayscale(1);
}

.review-rail-controls span {
  color: #aab6c6;
  font: 900 10px var(--mono);
  text-align: center;
}

@media (max-width: 900px) {
  .ftue-review-rail { display: none; }
}

button {
  color: inherit;
  font: inherit;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#phone {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 430px;
  height: 932px;
  transform: translate(-50%, -50%) scale(var(--phone-scale));
  transform-origin: center;
  overflow: clip;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 10%),
    radial-gradient(380px 340px at 82% 20%, rgba(60, 221, 255, 0.14), transparent 68%),
    radial-gradient(340px 310px at 20% 88%, rgba(255, 115, 199, 0.1), transparent 62%),
    #070a12;
  border: 1px solid rgba(210, 237, 255, 0.16);
  border-radius: 42px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 10px #02040a;
}

#phone::before {
  content: "";
  position: absolute;
  left: 145px;
  top: 10px;
  width: 140px;
  height: 30px;
  border-radius: 0 0 18px 18px;
  background: #02040a;
  z-index: 80;
}

#phone::after {
  content: "";
  position: absolute;
  z-index: 80;
  left: 50%;
  bottom: 8px;
  width: 118px;
  height: 4px;
  border-radius: 999px;
  background: rgba(235, 243, 250, 0.72);
  transform: translateX(-50%);
  pointer-events: none;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  padding: 58px 18px 18px;
}

.screen.active { display: flex; flex-direction: column; }

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

#flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 76;
}

#flash.burst {
  animation: flashBurst 420ms ease-out;
}

#wave {
  position: absolute;
  z-index: 75;
  left: 50%;
  top: -42px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background:
    radial-gradient(circle, rgba(79, 255, 194, 0.95) 0 12%, rgba(67, 221, 255, 0.86) 13% 38%, rgba(5, 7, 11, 0.98) 39% 100%);
  opacity: 0;
  pointer-events: none;
}

#wave.run {
  animation: waveDrop 980ms cubic-bezier(0.2, 0.9, 0.15, 1) forwards;
}

.topbar,
.game-top,
.collection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

h1,
h2,
p { margin: 0; }

h1 {
  font-size: 31px;
  line-height: 0.95;
  letter-spacing: 0;
}

h2 {
  font-size: 21px;
  line-height: 1.05;
  letter-spacing: 0;
}

.eyebrow {
  margin-bottom: 6px;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chip-pill {
  min-width: 92px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(255, 215, 102, 0.34);
  border-radius: 999px;
  background: rgba(31, 23, 8, 0.72);
  box-shadow: inset 0 0 22px rgba(255, 215, 102, 0.08), 0 0 22px rgba(255, 215, 102, 0.08);
  font-family: var(--mono);
}

.chip-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  background: url("e-chip.png") center / contain no-repeat;
}

.chip-icon.has-img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.casino-card {
  margin-top: 24px;
  min-height: 178px;
  display: grid;
  grid-template-columns: 94px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(18, 28, 44, 0.86), rgba(8, 12, 22, 0.7));
  backdrop-filter: blur(18px);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 18px 48px rgba(0, 0, 0, 0.32);
}

.casino-card p:not(.eyebrow) {
  margin-top: 10px;
  color: #acbac9;
  font-size: 14px;
  line-height: 1.35;
}

.casino-ring {
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(from 40deg, var(--gold), var(--red), var(--cyan), var(--green), var(--gold));
  box-shadow: 0 0 30px rgba(67, 221, 255, 0.22);
  animation: slowSpin 12s linear infinite;
}

.casino-ring span {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #090e17;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.rules-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.rules-strip article {
  min-height: 92px;
  padding: 10px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(6, 10, 18, 0.68);
}

.rules-strip b {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 12px;
}

.rules-strip span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.prep-spacer { flex: 1; min-height: 210px; }

.loadout-panel {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 12, 21, 0.76);
  backdrop-filter: blur(14px);
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

.section-title small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.prep-slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.prep-slot,
.lane-slot {
  position: relative;
  border: 1px dashed rgba(170, 205, 230, 0.28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.prep-slot {
  height: 86px;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: manipulation;
}

.prep-slot::after,
.lane-slot.empty::after {
  content: "+";
  color: rgba(232, 241, 255, 0.44);
  font: 800 28px var(--mono);
}

.prep-slot.filled,
.lane-slot.filled {
  border-style: solid;
  border-width: 3px;
  border-color: rgba(88, 246, 204, 0.34);
  background: rgba(9, 22, 28, 0.78);
}

.prep-slot.filled { touch-action: none; }

.prep-slot.dragging {
  opacity: 0.28;
  border-color: rgba(255, 215, 102, 0.8);
}

.prep-slots.returning .prep-slot:not(.dragging) { opacity: 0.58; }

.prep-drag-ghost {
  position: fixed;
  z-index: 240;
  overflow: hidden;
  border: 3px solid rgba(255, 215, 102, 0.8);
  border-radius: var(--radius);
  background: #071018;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.58), 0 0 22px rgba(255, 215, 102, 0.38);
  transform: translate(-50%, -50%) rotate(-3deg) scale(1.06);
  pointer-events: none;
  transition: border-color 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

.prep-drag-ghost .mini-avatar { width: 100%; height: 100%; }

.prep-drag-ghost.return-ready {
  border-color: #4cffb0;
  filter: brightness(1.16);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.62), 0 0 28px rgba(76, 255, 176, 0.72);
}

.mini-avatar {
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--avatar-bg, linear-gradient(145deg, #203a52, #7a295f));
  box-shadow: 0 0 22px rgba(67, 221, 255, 0.14);
}

.prep-slot .mini-avatar {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  box-shadow: none;
}

.avatar-SURGE {
  --avatar-bg: linear-gradient(145deg, #33170f, #ff9a46);
}

.avatar-LUCK {
  --avatar-bg: linear-gradient(145deg, #2c2408, #ffd766);
}

.avatar-CRYPTO {
  --avatar-bg: linear-gradient(145deg, #101c33, #43ddff);
}

.mini-avatar img,
.crew-avatar img,
.lane-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-avatar span,
.crew-avatar span,
.lane-avatar span {
  font-weight: 950;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.play-button {
  height: 76px;
  margin-top: 12px;
  border-radius: 24px;
  border: 1px solid rgba(92, 255, 196, 0.65);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(135deg, rgba(80, 255, 179, 0.86), rgba(48, 209, 255, 0.82));
  color: #04100e;
  box-shadow: 0 16px 40px rgba(50, 233, 207, 0.24), inset 0 1px rgba(255, 255, 255, 0.55);
  text-align: center;
  touch-action: manipulation;
}

.play-button span {
  display: block;
  font-size: 30px;
  font-weight: 1000;
  line-height: 0.95;
}

.play-button small {
  font: 800 10px var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.76;
}

.play-button:active,
.icon-button:active,
.crew-card:active,
.prep-slot:active,
.lane-card:active {
  transform: scale(0.97);
}

.collection {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  padding: 58px 14px 18px;
  background:
    radial-gradient(320px 270px at 50% -4%, rgba(67, 221, 255, 0.18), transparent 70%),
    #03050a;
  transform: translateY(104%);
  transition: transform 360ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.collection.open { transform: translateY(0); }

.budget-warning {
  display: none;
  margin: 12px 0 2px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 77, 103, 0.78);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(95, 10, 22, 0.96), rgba(35, 5, 12, 0.94));
  color: #ffdbe0;
  box-shadow: 0 0 28px rgba(255, 77, 103, 0.36), inset 0 0 28px rgba(255, 77, 103, 0.12);
  font: 1000 16px var(--mono);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.budget-warning.show {
  display: block;
  animation: warningBreathe 1.1s ease-in-out infinite;
}

.icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 30px;
  line-height: 1;
}

.collection-sort {
  position: relative;
  z-index: 8;
  margin-top: 14px;
}

.sort-button {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border: 3px solid #070707;
  border-radius: 8px;
  background: #ffe34f;
  color: #070707;
  box-shadow: 5px 5px 0 #000000, 0 0 18px rgba(255, 227, 79, 0.34);
  text-align: left;
}

.sort-button span {
  font-size: 22px;
  font-weight: 1000;
}

.sort-button small {
  font: 950 11px var(--mono);
  text-transform: uppercase;
}

.sort-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 10px;
  border: 2px solid rgba(255, 227, 79, 0.76);
  border-radius: 8px;
  background: rgba(4, 7, 12, 0.98);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.72), 0 0 22px rgba(255, 227, 79, 0.16);
}

.sort-menu.open { display: grid; }

.sort-menu > button,
.sort-type-options button {
  min-height: 44px;
  padding: 7px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #f6f8fb;
  font: 900 10px var(--mono);
  text-transform: uppercase;
}

.sort-menu button.active {
  border-color: #ffe34f;
  background: #ffe34f;
  color: #050505;
  box-shadow: 0 0 16px rgba(255, 227, 79, 0.42);
}

.sort-type-options {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 62px repeat(3, 1fr);
  gap: 7px;
  align-items: center;
}

.sort-type-options b {
  color: #ffe34f;
  font: 1000 11px var(--mono);
  text-transform: uppercase;
}

.sort-type-options button.type-SURGE { color: var(--surge); }
.sort-type-options button.type-LUCK { color: #c89aff; }
.sort-type-options button.type-CRYPTO { color: var(--crypto); }
.sort-type-options button.active { color: #050505; }

.tier-heads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0 8px;
  color: var(--muted);
  font: 900 11px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tier-heads b {
  padding-left: 4px;
}

.collection-grid {
  flex: 1;
  display: block;
  overflow-y: auto;
  padding-bottom: 18px;
}

.family-SURGE {
  --family-color: var(--surge);
  --family-color-2: var(--surge);
}

.family-LUCK {
  --family-color: var(--luck);
  --family-color-2: var(--luck);
}

.family-CRYPTO {
  --family-color: var(--crypto);
  --family-color-2: var(--crypto);
}

.family-LUCK.family-SURGE {
  --family-color: var(--luck);
  --family-color-2: var(--surge);
}

.crew-family-row {
  margin-bottom: 12px;
  padding: 12px;
  border: 2px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--family-color) 14%, rgba(7, 10, 17, 0.97)),
      color-mix(in srgb, var(--family-color-2) 7%, rgba(4, 6, 11, 0.98))
    ) padding-box,
    linear-gradient(135deg, var(--family-color), var(--family-color-2)) border-box;
  box-shadow:
    inset 0 0 28px color-mix(in srgb, var(--family-color) 8%, transparent),
    0 7px 18px rgba(0, 0, 0, 0.3);
}

.crew-family-row:first-child {
  margin-top: 0;
}

.crew-family-label {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0 0 12px;
}

.crew-family-copy {
  min-width: 0;
}

.crew-family-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.crew-family-title strong {
  color: #ffe34f;
  font-size: 22px;
  font-weight: 1000;
  line-height: 0.95;
  -webkit-text-stroke: 1px #050505;
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 #000000, 0 0 16px rgba(255, 218, 65, 0.38);
}

.family-icon-tile {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 2px solid rgba(0, 0, 0, 0.72);
  border-radius: 7px;
  background: linear-gradient(135deg, var(--family-color), var(--family-color-2));
  color: #050505;
  font-size: 22px;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 14px color-mix(in srgb, var(--family-color) 36%, transparent);
}

.family-icon-glyph {
  --icon-scale: 1;
  --icon-x: 0px;
  --icon-y: 0px;
  position: relative;
  z-index: 1;
  width: 1em;
  height: 1em;
  display: grid;
  place-items: center;
  color: inherit;
  font: 1000 1em/1 var(--font);
  text-align: center;
  transform: translate(var(--icon-x), var(--icon-y)) scale(var(--icon-scale));
  transform-origin: center;
}

.family-icon-glyph.icon-cash { --icon-scale: 0.88; }
.family-icon-glyph.icon-risk { --icon-scale: 1.12; --icon-y: -0.5px; }
.family-icon-glyph.icon-ghost { --icon-scale: 1.08; }
.family-icon-glyph.icon-deck-dups { --icon-scale: 0.92; }
.family-icon-glyph.icon-voltage { --icon-scale: 0.96; }
.family-icon-glyph.icon-malware { --icon-scale: 1.12; --icon-y: -0.5px; }
.family-icon-glyph.icon-card-spike { --icon-scale: 0.94; }
.family-icon-glyph.icon-heat { --icon-scale: 0.94; }
.family-icon-glyph.icon-crisis { --icon-scale: 1.08; --icon-y: -0.5px; }
.family-icon-glyph.icon-bomber { --icon-scale: 0.86; }
.family-icon-glyph.icon-brute-force { --icon-scale: 1.14; }
.family-icon-glyph.icon-payback { --icon-scale: 1.04; --icon-y: 0.5px; }
.family-icon-glyph.icon-truce { --icon-scale: 0.94; }
.family-icon-glyph.icon-royal-fixation { --icon-scale: 0.96; --icon-y: -0.5px; }
.family-icon-glyph.icon-piercer { --icon-scale: 0.94; --icon-x: -0.5px; }
.family-icon-glyph.icon-random-rage { --icon-scale: 0.9; }

.collection-family-icon {
  width: 40px;
  height: 40px;
  font-size: 25px;
}

.family-tech-tags {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.crew-family-title .family-tech-tags {
  margin-left: auto;
  justify-content: flex-end;
}

.crew-family-description {
  margin: 5px 0 0;
  color: #f3f6fb;
  font: 850 10px var(--mono);
  line-height: 1.25;
  text-shadow: 2px 2px 0 #000000;
}

.crew-family-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 188px;
  gap: 8px;
}

.crew-choice {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr 34px;
  gap: 5px;
  overflow: visible;
}

.crew-card {
  position: relative;
  min-width: 0;
  overflow: visible;
  padding: 0;
  border: 3px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(21, 30, 48, 0.92), rgba(7, 10, 18, 0.86));
  text-align: center;
  touch-action: manipulation;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transition: transform 150ms ease, border-color 180ms ease, filter 180ms ease;
}

.crew-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.crew-choice.locked .crew-card,
.crew-card.locked {
  filter: saturate(0.25) brightness(0.56);
}

.crew-choice.depleted .crew-card {
  filter: saturate(0.12) brightness(0.45);
}

.crew-choice.unaffordable .crew-card {
  border-color: rgba(255, 77, 103, 0.72);
  filter: none;
  box-shadow: inset 0 0 0 2px rgba(255, 77, 103, 0.38);
}

.crew-choice:not(.affordable):not(.installed):not(.unaffordable) .crew-card,
.crew-choice.budget-empty:not(.unaffordable) .crew-card {
  filter: saturate(0.18) brightness(0.48);
}

.crew-choice.affordable:not(.locked) .crew-card {
  border-color: rgba(88, 246, 204, 0.34);
}

.crew-choice.stacked .crew-card {
  box-shadow:
    4px 4px 0 rgba(255, 255, 255, 0.08),
    8px 8px 0 rgba(67, 221, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.crew-choice.stack-4 .crew-card,
.crew-choice.stack-5 .crew-card {
  box-shadow:
    3px 3px 0 rgba(255, 255, 255, 0.09),
    7px 7px 0 rgba(67, 221, 255, 0.1),
    11px 11px 0 rgba(255, 215, 102, 0.07),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.crew-choice.installed .crew-card {
  border-color: rgba(255, 215, 102, 0.62);
  box-shadow: inset 0 0 28px rgba(255, 215, 102, 0.12), 0 0 22px rgba(255, 215, 102, 0.32);
  animation: selectedCrewBreathe 1.45s ease-in-out infinite;
}

.crew-choice.type-SURGE .crew-card,
.crew-choice.type-SURGE.affordable:not(.locked) .crew-card { border-color: rgba(255, 154, 70, 0.52); }
.crew-choice.type-LUCK .crew-card,
.crew-choice.type-LUCK.affordable:not(.locked) .crew-card { border-color: rgba(255, 215, 102, 0.5); }
.crew-choice.type-CRYPTO .crew-card,
.crew-choice.type-CRYPTO.affordable:not(.locked) .crew-card { border-color: rgba(67, 221, 255, 0.5); }

.crew-choice.unaffordable .crew-card {
  border-color: rgba(255, 77, 103, 0.72);
}

.crew-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--avatar-bg, linear-gradient(145deg, #203a52, #7a295f));
}

.tier-role-pill {
  position: absolute;
  z-index: 4;
  top: 8px;
  left: 50%;
  max-width: calc(100% - 12px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  transform: translateX(-50%);
  border: 1px solid currentColor;
  background: rgba(3, 5, 10, 0.8);
  font: 950 9px var(--mono);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75), 0 0 12px color-mix(in srgb, currentColor 34%, transparent);
}

.tier-role-pill.type-SURGE { color: var(--surge); }
.tier-role-pill.type-LUCK { color: #c89aff; }
.tier-role-pill.type-CRYPTO { color: var(--crypto); }

.crew-choice .quantity-badge {
  top: auto;
  bottom: 7px;
}

.quantity-badge {
  position: absolute;
  z-index: 5;
  top: 6px;
  left: 6px;
  min-width: 34px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(3, 5, 10, 0.68);
  color: #ffffff;
  font: 950 10px var(--mono);
  line-height: 1;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}

.crew-choice.depleted .quantity-badge {
  border-color: rgba(255, 77, 103, 0.5);
  color: rgba(255, 190, 199, 0.95);
  background: rgba(43, 6, 12, 0.72);
}

.row-chevron {
  position: absolute;
  z-index: 20;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(67, 221, 255, 0.9);
  font-size: 42px;
  font-weight: 1000;
  line-height: 1;
  pointer-events: none;
  text-shadow:
    0 0 8px #d8fbff,
    0 0 18px rgba(67, 221, 255, 1),
    0 0 34px rgba(67, 221, 255, 0.92),
    0 2px 8px rgba(0, 0, 0, 1);
  filter: drop-shadow(0 0 6px rgba(67, 221, 255, 1)) drop-shadow(0 0 14px rgba(67, 221, 255, 0.82));
  animation: chevronWiggle 1.15s ease-in-out infinite;
}

.choice-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--gold);
  font: 950 12px var(--mono);
}

.choice-cost strong {
  font: 1000 24px/1 var(--mono);
}

.crew-choice.unaffordable .choice-cost,
.crew-choice.unaffordable .choice-cost strong {
  color: var(--red);
}

.crew-choice.unaffordable .choice-cost .chip-icon {
  opacity: 0.6;
}

.choice-cost .chip-icon {
  width: 24px;
  height: 24px;
}

.lock-chip {
  color: var(--red);
}

.locked-cost {
  color: var(--red);
  font: 900 9px var(--mono);
  letter-spacing: 0.08em;
}

.fam-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.family-identity {
  display: flex;
  align-items: center;
  gap: 7px;
}

.fam-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 8px;
  border: 0;
  border-radius: 999px;
  color: #08090a;
  font: 1000 9px var(--mono);
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 7px rgba(0, 0, 0, 0.34);
}

.fam-SURGE {
  background: var(--surge);
}

.fam-LUCK {
  background: var(--luck);
}

.fam-CRYPTO {
  background: var(--crypto);
}

.ai-status {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 12, 21, 0.72);
}

.ai-eye {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 77, 103, 0.2), rgba(255, 77, 103, 0.04) 62%, transparent 63%);
  border: 1px solid rgba(255, 77, 103, 0.28);
}

.ai-eye span {
  width: 29px;
  height: 14px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 18px rgba(255, 77, 103, 0.8);
  animation: eyeScan 3.8s ease-in-out infinite;
}

.ai-status b {
  display: block;
  font-size: 16px;
}

.ai-status span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.crew-lane-wrap {
  margin-top: 126px;
}

.crew-lane {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 5px 2px 18px;
  scroll-snap-type: x mandatory;
}

.lane-slot {
  width: 118px;
  height: 156px;
  flex: 0 0 118px;
  display: grid;
  place-items: center;
  scroll-snap-align: start;
}

.lane-card {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 3px solid rgba(88, 246, 204, 0.5);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(20, 32, 44, 0.94), rgba(8, 12, 20, 0.92));
  overflow: hidden;
  position: relative;
  touch-action: manipulation;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
  animation: crewGlow 2.8s ease-in-out infinite;
}

.lane-avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--avatar-bg, linear-gradient(145deg, #203a52, #7a295f));
}

.lane-avatar span {
  font-size: 32px;
}

.online-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(3, 5, 10, 0.9);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(76, 255, 176, 0.8);
  animation: onlineBreathe 1.25s ease-in-out infinite;
}

.lane-slot.promoting {
  animation: promoteFlash 0.36s ease-in-out 2;
}

.lane-slot.promoted {
  animation: promotedPop 0.8s cubic-bezier(0.2, 1, 0.22, 1);
}

.prep-slot.crew-connected,
.lane-slot.crew-connected {
  animation: crewConnectJump 0.82s cubic-bezier(0.18, 1.25, 0.22, 1);
}

.card-dock {
  margin-top: auto;
  padding-bottom: 6px;
}

.inert-cards {
  height: 176px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  padding: 0 6px 6px;
}

.poker-card {
  position: relative;
  width: 64px;
  height: 100px;
  margin: 0 -11px;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  transform: translateY(var(--lift, 0px)) rotate(var(--rot, 0deg));
  transform-origin: center bottom;
  animation: cardBreathe 3.2s ease-in-out infinite;
  animation-delay: var(--delay, 0ms);
  transition: transform 170ms cubic-bezier(0.2, 0.8, 0.25, 1);
  touch-action: manipulation;
}

.poker-card:hover {
  transform: translateY(calc(var(--lift, 0px) - 16px)) rotate(var(--rot, 0deg)) scale(1.05);
  z-index: 14;
}

.poker-card.mod-removing { z-index: 12; }

.card-face {
  --frame: #eccb78;
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  padding: 9px;
  border: 3px solid #0b0b10;
  border-radius: 13px;
  background: linear-gradient(165deg, #fbf4e0, #efe2c4);
  box-shadow: inset 0 0 0 4px var(--frame), 0 10px 20px rgba(0, 0, 0, 0.4);
  color: var(--suit-color, #2f6bff);
  text-align: left;
  overflow: hidden;
}

.card-face .suit {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 22px;
  line-height: 1;
}

.card-face b {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 3px;
  font: 900 25px var(--font);
  line-height: 1;
}

/* Crew card mods: one fixed left-side tab and one concentric stroke per Type. */
.has-mod .card-face { border-color: transparent; }

.card-mod-tags {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 6;
  pointer-events: none;
}

.card-mod-tag {
  position: absolute;
  left: -11px;
  width: 27px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 2px solid #08090d;
  border-radius: 7px 3px 3px 7px;
  color: #050505;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55), inset 0 1px rgba(255, 255, 255, 0.35);
}

.card-mod-tag::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1px 3px 45% 3px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.22);
}

.card-mod-tag .card-tag-icon {
  z-index: 1;
  font-size: 14px;
}

.card-mod-tag.tag-surge { top: 18px; background: linear-gradient(160deg, #ffbe34, var(--surge)); }
.card-mod-tag.tag-luck { top: 41px; background: linear-gradient(160deg, #c445ff, #6c20db); }
.card-mod-tag.tag-crypto { top: 64px; background: linear-gradient(160deg, #23f3c4, #08a58c); }

.card-mod-strokes {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.card-mod-stroke {
  position: absolute;
  inset: calc(var(--stroke-index) * 3px);
  border: 3px solid currentColor;
  border-radius: max(5px, calc(13px - var(--stroke-index) * 3px));
  filter: drop-shadow(0 0 2px currentColor);
}

.card-mod-stroke.stroke-surge { color: var(--surge); }
.card-mod-stroke.stroke-luck { color: #9b35ef; }
.card-mod-stroke.stroke-crypto { color: #21dca7; }

/* Hot Potato: a tiny bomb bubble that flashes red/yellow and floats above the card at all times */
.hot-badge {
  position: absolute;
  z-index: 7;
  top: -14px;
  left: 50%;
  width: 25px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1.5px solid #ffd23f;
  border-radius: 8px;
  background: #ff3b30;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  transform: translateX(-50%);
  animation: hotFlash 0.5s step-end infinite, hotFloat 1.5s ease-in-out infinite;
}

.hot-badge::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: #ff3b30;
  border-right: 1.5px solid #ffd23f;
  border-bottom: 1.5px solid #ffd23f;
  animation: hotFlash 0.5s step-end infinite;
}

@keyframes hotFlash {
  0%, 49% { background: #ff3b30; border-color: #ffd23f; box-shadow: 0 0 9px rgba(255, 59, 48, 0.85); }
  50%, 100% { background: #ffd23f; border-color: #ff3b30; box-shadow: 0 0 9px rgba(255, 210, 63, 0.9); }
}

@keyframes hotFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

/* A crew was dismissed: shake + flash the cards whose mod is being stripped. */
.poker-card.mod-removing {
  z-index: 12;
  animation: cardModRemove 460ms ease-in-out;
}

@keyframes cardModRemove {
  0% { translate: 0 0; filter: brightness(1); }
  12% { translate: -4px 0; filter: brightness(2.5) drop-shadow(0 0 7px rgba(255, 255, 255, 0.9)); }
  28% { translate: 4px 0; filter: brightness(1.15); }
  44% { translate: -3px 0; filter: brightness(2.2) drop-shadow(0 0 6px rgba(255, 120, 120, 0.85)); }
  60% { translate: 3px 0; filter: brightness(1.1); }
  76% { translate: -2px 0; filter: brightness(1.7); }
  100% { translate: 0 0; filter: brightness(1); }
}

/* A mod is being applied to a card: flash + pop. */
.mod-adding { animation: cardModAdd 540ms ease-out; }

@keyframes cardModAdd {
  0% { filter: brightness(1); scale: 0.98; }
  22% { filter: brightness(2.5) drop-shadow(0 0 9px rgba(255, 255, 255, 0.95)); scale: 1.14; }
  48% { filter: brightness(1.2); scale: 1.02; }
  72% { filter: brightness(1.75); scale: 1.06; }
  100% { filter: brightness(1); scale: 1; }
}

/* Dealt hand-card entrance */
.poker-card.dealing { animation: cardDeal 440ms cubic-bezier(0.2, 0.8, 0.25, 1) both; animation-delay: var(--delay, 0ms); }

@keyframes cardDeal {
  0% { opacity: 0; transform: translateY(70px) rotate(calc(var(--rot, 0deg) * 0.4)) scale(0.7); }
  100% { opacity: 1; transform: translateY(var(--lift, 0px)) rotate(var(--rot, 0deg)) scale(1); }
}

/* Crew member casting a mod during the intro */
.lane-card.crew-casting { animation: crewCast 900ms ease-in-out; z-index: 6; }

@keyframes crewCast {
  0%, 100% { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24); filter: brightness(1); }
  45% { box-shadow: 0 0 24px rgba(255, 255, 255, 0.55), 0 0 48px var(--cast-color, rgba(120, 220, 255, 0.6)); filter: brightness(1.4) saturate(1.2); }
}

/* Deck button (draw pile) */
.deck-button {
  position: absolute;
  right: 16px;
  bottom: 158px;
  z-index: 40;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(160, 195, 230, 0.32);
  background: radial-gradient(circle at 38% 32%, rgba(44, 64, 96, 0.95), rgba(8, 12, 20, 0.96));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.12);
  color: var(--text);
  touch-action: manipulation;
}

.deck-button:active { transform: scale(0.94); }

.deck-icon { position: relative; width: 24px; height: 30px; }

.deck-icon span {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  border: 1.5px solid rgba(220, 235, 255, 0.85);
  background: linear-gradient(160deg, #1a2740, #0c1220);
}

.deck-icon span:nth-child(1) { transform: translate(-4px, -3px) rotate(-11deg); opacity: 0.55; }
.deck-icon span:nth-child(2) { transform: translate(-2px, -1px) rotate(-5deg); opacity: 0.8; }
.deck-icon span:nth-child(3) { background: linear-gradient(160deg, #274063, #101a2e); }

.deck-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--luck);
  color: #0a0713;
  font: 950 10px var(--mono);
  box-shadow: 0 0 10px rgba(155, 109, 255, 0.7);
}

.deck-count.empty { display: none; }

.deck-button small {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font: 800 8px var(--mono);
  letter-spacing: 0.14em;
}

/* Cards floating up from the deck during the intro sequence */
.float-card {
  position: absolute;
  z-index: 44;
  width: 60px;
  height: 94px;
  pointer-events: none;
  transition: transform 470ms cubic-bezier(0.2, 0.8, 0.25, 1), opacity 220ms ease;
}

/* Deck screen overlay */
.deck-screen {
  position: absolute;
  inset: 0;
  z-index: 72;
  display: flex;
  flex-direction: column;
  padding: 58px 14px 18px;
  background:
    radial-gradient(320px 260px at 50% -4%, rgba(155, 109, 255, 0.16), transparent 70%),
    #04060c;
  transform: translateY(104%);
  transition: transform 340ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.deck-screen.open { transform: translateY(0); }

.deck-header-spacer { width: 44px; flex: 0 0 44px; }

.deck-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 8px;
  align-content: start;
  overflow-y: auto;
  padding: 14px 4px 20px;
}

.deck-cell { display: flex; flex-direction: column; align-items: center; gap: 7px; }

.deck-card { position: relative; width: 58px; height: 90px; }

.deck-tags { display: flex; gap: 4px; min-height: 9px; }
.deck-tags i { width: 9px; height: 9px; border-radius: 50%; }
.deck-tags .t-SURGE { background: var(--surge); box-shadow: 0 0 6px rgba(245, 146, 31, 0.7); }
.deck-tags .t-LUCK { background: var(--luck); box-shadow: 0 0 6px rgba(155, 109, 255, 0.7); }
.deck-tags .t-CRYPTO { background: var(--crypto); box-shadow: 0 0 6px rgba(70, 227, 154, 0.7); }

.card-tooltip {
  position: absolute;
  z-index: 95;
  width: 270px;
  max-height: 420px;
  display: none;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(220, 240, 255, 0.28);
  border-radius: 14px;
  background: rgba(5, 8, 15, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.58), 0 0 24px rgba(67, 221, 255, 0.16);
  backdrop-filter: blur(18px);
}

.card-tooltip.show {
  display: grid;
  gap: 7px;
  animation: cardTooltipIn 160ms ease-out;
}

.card-mod-detail {
  padding: 8px;
  border: 1px solid rgba(160, 195, 230, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.card-mod-detail-head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.card-tooltip-effect-icon {
  width: 23px;
  height: 23px;
  border-radius: 5px;
  font-size: 15px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 9px color-mix(in srgb, var(--family-color) 30%, transparent);
}

.card-mod-detail b {
  display: block;
  color: #ffffff;
  font: 1000 12px var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.card-mod-detail p {
  margin-top: 7px;
  color: #c2cedd;
  font-size: 11px;
  line-height: 1.32;
}

.card-mod-detail p strong { font-weight: 950; }

.card-mod-detail.mod-SURGE { border-color: rgba(245, 146, 31, 0.5); }
.card-mod-detail.mod-LUCK { border-color: rgba(155, 109, 255, 0.5); }
.card-mod-detail.mod-CRYPTO { border-color: rgba(70, 227, 154, 0.5); }

.card-mod-detail.mod-SURGE b { color: #ffb066; }
.card-mod-detail.mod-LUCK b { color: #c3a6ff; }
.card-mod-detail.mod-CRYPTO b { color: #6ff0b6; }

.card-mod-live-values {
  padding: 9px 10px;
  border: 1px solid rgba(255, 210, 63, 0.52);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.44);
  box-shadow: inset 0 0 14px rgba(255, 210, 63, 0.07);
}

.card-mod-live-title {
  margin-bottom: 6px;
  color: #ffd83d;
  font: 1000 10px var(--mono);
  text-transform: uppercase;
}

.card-mod-live-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  color: #cbd6e4;
  font: 800 10px var(--mono);
}

.card-mod-live-row + .card-mod-live-row {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.card-mod-live-row strong {
  flex: 0 0 auto;
  color: #ffffff;
  font-size: 13px;
}

.sheet {
  position: absolute;
  inset: 0;
  z-index: 225;
  display: none;
  align-items: end;
  padding: 18px;
  background: rgba(0, 0, 0, 0.52);
}

.sheet.open { display: flex; }

.sheet-card {
  width: 100%;
  max-height: calc(100% - 18px);
  overflow-y: auto;
  padding: 14px;
  border: 1px solid var(--line-hot);
  border-radius: 22px;
  background: rgba(9, 14, 23, 0.94);
  backdrop-filter: blur(18px);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.4);
  animation: sheetUp 240ms ease-out;
}

.sheet-hero {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 12px;
  align-items: center;
}

.sheet-hero .crew-avatar {
  position: relative;
  inset: auto;
  width: 66px;
  height: 66px;
  border: 3px solid var(--avatar-stroke, rgba(67, 221, 255, 0.72));
  border-radius: 16px;
  box-shadow: 0 0 22px rgba(67, 221, 255, 0.16);
}

.avatar-SURGE { --avatar-stroke: var(--surge); }
.avatar-LUCK { --avatar-stroke: var(--luck); }
.avatar-CRYPTO { --avatar-stroke: var(--crypto); }

.sheet-hero h3 {
  margin: 0;
  font-size: 20px;
}

.sheet-hero-copy {
  min-width: 0;
}

.sheet-family-identity {
  margin-top: 7px;
}

.sheet-family-identity .family-icon-tile {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 18px;
}

.sheet-hero p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.rich-desc {
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(160, 195, 230, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  color: #b9c7d6;
  font-size: 13px;
  line-height: 1.38;
}

.rich-desc strong {
  font-weight: 950;
}

.crew-description-copy {
  color: #d3deea;
}

.effect-definition {
  position: relative;
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--effect-color) 56%, transparent);
  border-left-width: 4px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--effect-color) 11%, rgba(2, 5, 10, 0.84));
  color: #cbd7e4;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--effect-color) 7%, transparent);
}

.effect-definition-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}

.effect-icon-tile {
  width: 23px;
  height: 23px;
  border-radius: 5px;
  font-size: 15px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 9px color-mix(in srgb, var(--family-color) 30%, transparent);
}

.effect-definition-head > strong {
  color: var(--effect-color);
  font-family: var(--mono);
  letter-spacing: 0;
  text-transform: uppercase;
}

.effect-definition-copy {
  display: block;
}

.effect-SURGE { --effect-color: var(--surge); }
.effect-LUCK { --effect-color: var(--luck); }
.effect-CRYPTO { --effect-color: var(--crypto); }

.promotion-delta {
  position: relative;
  overflow: hidden;
  margin-top: 10px;
  padding: 9px 10px;
  border: 2px solid var(--effect-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--effect-color) 14%, rgba(3, 6, 11, 0.96));
  box-shadow: 0 0 18px color-mix(in srgb, var(--effect-color) 34%, transparent);
  animation: promotionShine 1.35s ease-in-out infinite;
}

.promotion-delta::after {
  content: "";
  position: absolute;
  inset: -35% auto -35% -40%;
  width: 34%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
  animation: promotionSweep 1.35s ease-in-out infinite;
  pointer-events: none;
}

.promotion-delta > strong {
  display: block;
  margin-bottom: 5px;
  color: #ffffff;
  font: 1000 11px var(--mono);
  text-transform: uppercase;
}

.promotion-delta > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.promotion-delta span {
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--effect-color) 42%, transparent);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.34);
  color: #e9f0f7;
  font: 850 10px var(--mono);
}

.promotion-delta span b { color: var(--effect-color); }

.kw-mechanic { color: var(--orange); }
.kw-card { color: var(--gold); }
.kw-defense { color: var(--cyan); }
.kw-power { color: var(--green); }
.kw-number { color: #ffffff; }

.sheet-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.sheet-actions button {
  flex: 1;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  font-weight: 900;
}

.sheet-actions button:first-child {
  border-color: rgba(88, 246, 204, 0.5);
  color: var(--green);
}

.sheet-actions button:nth-child(2) {
  border-color: rgba(255, 77, 103, 0.44);
  color: var(--red);
}

.sheet-actions button:disabled {
  opacity: 0.42;
}

.action-chip-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: 1000 13px var(--mono);
}

.action-chip-value .chip-icon {
  width: 17px;
  height: 17px;
}

.action-chip-value.cost { color: var(--gold); }
.action-chip-value.gain { color: var(--green); }

@keyframes promotionShine {
  0%, 100% { filter: brightness(0.95); box-shadow: 0 0 13px color-mix(in srgb, var(--effect-color) 26%, transparent); }
  50% { filter: brightness(1.2); box-shadow: 0 0 27px color-mix(in srgb, var(--effect-color) 58%, transparent); }
}

@keyframes promotionSweep {
  0%, 18% { left: -45%; opacity: 0; }
  46% { opacity: 0.9; }
  76%, 100% { left: 118%; opacity: 0; }
}

#toast {
  position: absolute;
  z-index: 90;
  left: 40px;
  right: 40px;
  bottom: 220px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(3, 5, 10, 0.88);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 850;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

#toast.show {
  opacity: 1;
  transform: translateY(0);
}

.fly-chip {
  position: absolute;
  z-index: 88;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: url("e-chip.png") center / contain no-repeat;
  pointer-events: none;
  animation: flyChip 1040ms cubic-bezier(0.32, 0.72, 0.26, 1) both;
}

.fly-chip.spend {
  box-shadow: 0 0 16px rgba(255, 215, 102, 0.72), 0 0 24px rgba(76, 255, 176, 0.28);
}

.fly-chip.gain {
  box-shadow: 0 0 16px rgba(255, 215, 102, 0.72), 0 0 24px rgba(67, 221, 255, 0.28);
}

.crew-callout {
  position: absolute;
  z-index: 96;
  width: 224px;
  max-width: 224px;
  transform: translate(-50%, -100%);
  pointer-events: none;
  animation: calloutFloat 1.15s ease-in-out infinite;
}

.crew-callout.leaving {
  animation: none;
  opacity: 0;
  transition: opacity 240ms ease;
}

.callout-online {
  width: max-content;
  max-width: 112px;
  margin: 0 auto 5px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  background: #0fbd55;
  color: #ffffff;
  font: 950 11px "Courier New", Courier, monospace;
  letter-spacing: 0.08em;
  text-align: center;
  box-shadow: 0 0 14px rgba(76, 255, 176, 0.68);
}

.callout-speech {
  position: relative;
  min-width: 0;
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid rgba(30, 24, 0, 0.5);
  border-radius: 12px;
  background: #ffe46a;
  color: #080600;
  font: 900 14px "Courier New", Courier, monospace;
  line-height: 1.2;
  text-align: left;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.36), 0 0 16px rgba(255, 215, 102, 0.5);
}

.callout-speech::after {
  content: "";
  position: absolute;
  left: calc(50% + var(--tail, 0px));
  bottom: -6px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: #ffe46a;
  border-right: 1px solid rgba(30, 24, 0, 0.5);
  border-bottom: 1px solid rgba(30, 24, 0, 0.5);
}

.callout-speech span::after {
  content: "_";
  display: inline-block;
  margin-left: 1px;
  animation: caretBlink 0.5s steps(2, end) infinite;
}

.pulse {
  animation: pulsePop 300ms ease-out;
}

@keyframes waveDrop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  8% { opacity: 1; }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(38); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(42); }
}

@keyframes flashBurst {
  0% { opacity: 0; background: radial-gradient(circle, rgba(88, 246, 204, 0.54), transparent); }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes slowSpin { to { transform: rotate(360deg); } }

@keyframes eyeScan {
  0%, 100% { transform: translateX(-4px) scaleX(1); }
  45% { transform: translateX(5px) scaleX(1.16); }
  52% { transform: translateX(5px) scaleX(0.22); }
  60% { transform: translateX(0) scaleX(1); }
}

@keyframes crewGlow {
  0%, 100% { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24); }
  50% { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24), 0 0 22px rgba(88, 246, 204, 0.12); }
}

@keyframes selectedCrewBreathe {
  0%, 100% {
    filter: brightness(1);
    box-shadow: inset 0 0 28px rgba(255, 215, 102, 0.12), 0 0 18px rgba(255, 215, 102, 0.28);
  }
  50% {
    filter: brightness(1.18);
    box-shadow: inset 0 0 30px rgba(255, 215, 102, 0.18), 0 0 30px rgba(255, 215, 102, 0.52);
  }
}

@keyframes warningBreathe {
  0%, 100% {
    filter: brightness(1);
    transform: scale(1);
    box-shadow: 0 0 24px rgba(255, 77, 103, 0.28), inset 0 0 24px rgba(255, 77, 103, 0.1);
  }
  50% {
    filter: brightness(1.28);
    transform: scale(1.018);
    box-shadow: 0 0 42px rgba(255, 77, 103, 0.6), inset 0 0 34px rgba(255, 77, 103, 0.2);
  }
}

@keyframes cardTooltipIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes calloutFloat {
  0%, 100% { transform: translate(-50%, -100%); }
  50% { transform: translate(-50%, calc(-100% - 5px)); }
}

@keyframes crewConnectJump {
  0% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
    box-shadow: 0 0 0 rgba(76, 255, 176, 0);
  }
  35% {
    transform: translateY(-14px) scale(1.07);
    filter: brightness(1.55);
    box-shadow: 0 0 30px rgba(76, 255, 176, 0.86), 0 0 52px rgba(76, 255, 176, 0.34);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
    box-shadow: 0 0 0 rgba(76, 255, 176, 0);
  }
}

@keyframes caretBlink {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

@keyframes onlineBreathe {
  0%, 100% { transform: scale(0.92); opacity: 0.72; }
  50% { transform: scale(1.16); opacity: 1; }
}

@keyframes chevronWiggle {
  0%, 100% { transform: translateY(-50%) translateX(0) rotate(0deg); }
  35% { transform: translateY(-50%) translateX(3px) rotate(5deg); }
  70% { transform: translateY(-50%) translateX(-1px) rotate(-3deg); }
}

@keyframes promoteFlash {
  0%, 100% { filter: brightness(1); box-shadow: none; }
  50% { filter: brightness(2.4); box-shadow: 0 0 30px rgba(76, 255, 176, 0.7), 0 0 42px rgba(255, 215, 102, 0.5); }
}

@keyframes promotedPop {
  0% { transform: scale(0.82); filter: brightness(2.2); }
  55% { transform: scale(1.08); filter: brightness(1.45); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes cardBreathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@keyframes sheetUp {
  from { transform: translateY(32px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes flyChip {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  16% { opacity: 1; }
  38% { transform: translate(calc(var(--dx) * 0.36), calc(var(--dy) * 0.36 - 20px)) scale(1.08); }
  82% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.7); opacity: 0; }
}

@keyframes pulsePop {
  0% { transform: scale(1); filter: brightness(1); }
  42% { transform: scale(1.08); filter: brightness(1.45); }
  100% { transform: scale(1); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================= AI HP + hand scoring ================= */

.heat-meter { margin-top: 10px; }

.heat-meter-head,
.ai-hp-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font: 900 10px var(--mono);
  letter-spacing: 0.1em;
  color: var(--muted);
}

.heat-meter-head span:first-child { color: #3fe9ed; }
.heat-meter-head span:last-child { color: #82f7f4; }

.heat-meter-track {
  height: 14px;
  border-radius: 999px;
  background: rgba(24, 220, 224, 0.08);
  border: 1px solid rgba(63, 233, 237, 0.5);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.72), 0 0 10px rgba(63, 233, 237, 0.12);
  overflow: hidden;
}

.heat-meter-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #27e8e8 0%, #43f5c2 25%, #ffe446 55%, #ff7a2c 76%, #ff1738 100%);
  box-shadow: 0 0 14px rgba(39, 232, 232, 0.7);
  transition: width 650ms cubic-bezier(0.3, 0.9, 0.3, 1);
}

.heat-meter.heat-up { animation: heatMeterUp 600ms ease-out; }
.heat-meter.heat-down { animation: heatMeterDown 600ms ease-out; }

@keyframes heatMeterUp {
  35% { filter: brightness(1.8); transform: scaleX(1.025); }
}
@keyframes heatMeterDown {
  35% { filter: drop-shadow(0 0 12px #43ddff) brightness(1.5); transform: scaleX(1.025); }
}

.ai-hp { margin-top: 7px; }

.ai-hp-head {
  margin-bottom: 4px;
}
.ai-hp-head span:last-child { color: #ff8ea0; }

.ai-hp-track {
  height: 18px;
  border-radius: 999px;
  background: rgba(74, 0, 14, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.16), inset 0 0 8px rgba(0, 0, 0, 0.72);
  overflow: hidden;
}
.ai-hp-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #db0028, #ff173f);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.22), 0 0 14px rgba(255, 23, 63, 0.72);
  transition: width 700ms cubic-bezier(0.3, 0.9, 0.3, 1);
}
.ai-hp-fill.low { background: #ff173f; }

.run-status-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 8px;
  margin-top: 4px;
}

.game-chip-pill {
  width: 108px;
  min-width: 0;
  height: 42px;
  border-radius: 8px;
}

.barrier-status {
  position: relative;
  min-width: 0;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 4px 10px;
  border: 1px solid rgba(67, 221, 255, 0.55);
  border-radius: 8px;
  color: #baf6ff;
  background: linear-gradient(135deg, rgba(13, 52, 69, 0.9), rgba(12, 23, 40, 0.9));
  box-shadow: inset 0 0 18px rgba(67, 221, 255, 0.08), 0 0 14px rgba(67, 221, 255, 0.1);
  overflow: hidden;
}

.barrier-status::after {
  content: "";
  position: absolute;
  inset: -80% -20%;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.22), transparent 70%);
  transform: translateX(-55%) rotate(-16deg);
  animation: barrierScan 2.4s linear infinite;
}

.barrier-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.barrier-copy b { font: 950 11px var(--mono); letter-spacing: 0.08em; }
.barrier-copy small { color: #fff; font: 850 9px var(--mono); white-space: nowrap; }

.barrier-pips {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.barrier-pip {
  width: 17px;
  display: inline-grid;
  place-items: center;
  color: var(--barrier-suit-color, #e5384d);
  font: 1000 20px/1 var(--font);
  text-shadow: 0 0 10px var(--barrier-suit-color, #e5384d);
  transform-origin: center;
}

.barrier-pip.empty {
  color: rgba(170, 187, 205, 0.45);
  text-shadow: none;
}

.barrier-pip.just-emptied { animation: barrierPipEmpty 720ms ease-out; }

.barrier-status.hit { animation: barrierTick 420ms ease-out; }
.barrier-status.broken {
  border-color: rgba(110, 126, 145, 0.35);
  color: #778495;
  filter: saturate(0.18);
  box-shadow: none;
}
.barrier-status.broken::after { display: none; }
.barrier-status.breaking { animation: barrierBreak 700ms ease-out; }

@keyframes barrierScan { to { transform: translateX(55%) rotate(-16deg); } }
@keyframes barrierTick {
  35% { transform: scale(1.08); filter: brightness(1.8); box-shadow: 0 0 26px rgba(67,221,255,0.75); }
}
@keyframes barrierBreak {
  25% { transform: scale(1.12) rotate(-2deg); filter: brightness(2.4); }
  55% { transform: scale(0.96) rotate(2deg); opacity: 0.45; }
}
@keyframes barrierPipEmpty {
  0% { transform: translateX(0) scale(1); filter: brightness(1); }
  16% { transform: translateX(-5px) rotate(-10deg) scale(1.35); filter: brightness(2.4); }
  30% { transform: translateX(5px) rotate(10deg) scale(1.18); }
  44% { transform: translateX(-4px) rotate(-8deg) scale(1.12); }
  58% { transform: translateX(3px) rotate(6deg) scale(1.05); }
  74% { transform: translateX(-2px) rotate(-3deg); }
  100% { transform: translateX(0) rotate(0) scale(1); filter: brightness(1); }
}

/* tighten the old spacer now that the HP bar + score area live here */
.crew-lane-wrap { margin-top: 10px; }

.score-area {
  position: relative;
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 150px 1fr;
  align-items: center;
  min-height: 108px;
}

.score-rail { position: relative; height: 100%; min-width: 0; }

.score-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 3;
}

.score-hand {
  min-height: 14px;
  font: 900 11px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  opacity: 0;
  transform: translateY(4px);
}
.score-hand.reveal { opacity: 1; transform: translateY(0); transition: opacity 200ms ease, transform 200ms ease; }
.score-hand:empty { display: none; }

.score-mode {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 15px 5px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  font: 1000 14px/1 var(--mono);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 0 14px color-mix(in srgb, currentColor 28%, transparent), inset 0 1px rgba(255, 255, 255, 0.34);
}

.score-mode.mode-damage { background: #ffd23f; color: #100d02; }
.score-mode.mode-heat-positive,
.score-mode.mode-heat-negative,
.score-mode.mode-heat-neutral { background: #ff1f35; color: #fff; }
.score-mode.mode-echips { background: #9d3cff; color: #fff; }

.score-mode.switching { animation: scoreModeSwitch 520ms cubic-bezier(0.2, 1.4, 0.4, 1); }
.score-mode.mode-exit { animation: counterModeExit 320ms ease-in forwards; }

@keyframes scoreModeSwitch {
  0% { opacity: 0; transform: translateY(5px) scale(0.9); }
  50% { filter: brightness(1.28); box-shadow: 0 0 22px currentColor; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.score-counter {
  min-width: 118px;
  padding: 8px 16px;
  border-radius: 16px;
  background: #05060a;
  border: 1px solid rgba(255, 215, 102, 0.4);
  color: #ffd23f;
  font: 1000 42px var(--mono);
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 calc(10px + 22px * var(--glow, 0.3)) rgba(255, 210, 63, var(--glow, 0.5)), 0 2px 3px #000;
  box-shadow: 0 0 calc(8px + 34px * var(--glow, 0.3)) rgba(255, 200, 40, calc(0.12 + 0.55 * var(--glow, 0.3))), inset 0 0 16px rgba(0, 0, 0, 0.75);
  transition: transform 130ms ease, font-size 180ms cubic-bezier(0.3, 1.4, 0.5, 1);
}

.score-counter.counter-mode-damage {
  color: #ffe12d;
  border-color: rgba(255, 225, 45, 0.78);
  text-shadow: 0 0 22px rgba(255, 225, 45, 0.9), 0 2px 3px #000;
  box-shadow: 0 0 30px rgba(255, 213, 35, 0.5), inset 0 0 16px rgba(0, 0, 0, 0.75);
}

.score-counter.counter-mode-heat {
  color: #ff1f35;
  border-color: rgba(255, 31, 53, 0.85);
  text-shadow: 0 0 22px rgba(255, 31, 53, 0.95), 0 2px 3px #000;
  box-shadow: 0 0 32px rgba(255, 31, 53, 0.56), inset 0 0 16px rgba(0, 0, 0, 0.75);
}

.score-counter.counter-mode-echips {
  color: #b55cff;
  border-color: rgba(181, 92, 255, 0.88);
  text-shadow: 0 0 22px rgba(181, 92, 255, 0.95), 0 2px 3px #000;
  box-shadow: 0 0 32px rgba(157, 60, 255, 0.58), inset 0 0 16px rgba(0, 0, 0, 0.75);
}

/* Damage stays yellow while brightness and glow ramp up as contributions land. */
.score-counter.pouring {
  animation: counterFlash var(--flash-speed, 0.34s) step-end infinite;
  will-change: color, text-shadow, box-shadow, border-color;
}
@keyframes counterFlash {
  0%, 49% {
    color: #fff17a;
    border-color: rgba(255, 230, 90, calc(0.48 + 0.45 * var(--glow, 0.3)));
    text-shadow: 0 0 calc(14px + 34px * var(--glow, 0.3)) rgba(255, 225, 74, calc(0.58 + 0.42 * var(--glow, 0.3))), 0 2px 3px #000;
    box-shadow: 0 0 calc(12px + 46px * var(--glow, 0.3)) rgba(255, 220, 45, calc(0.18 + 0.7 * var(--glow, 0.3))), inset 0 0 18px rgba(255, 210, 50, calc(0.04 + 0.18 * var(--glow, 0.3)));
  }
  50%, 100% {
    color: #ffd400;
    border-color: rgba(255, 212, 0, calc(0.5 + 0.46 * var(--glow, 0.3)));
    text-shadow: 0 0 calc(16px + 38px * var(--glow, 0.3)) rgba(255, 212, 0, calc(0.62 + 0.38 * var(--glow, 0.3))), 0 2px 3px #000;
    box-shadow: 0 0 calc(14px + 50px * var(--glow, 0.3)) rgba(255, 212, 0, calc(0.22 + 0.72 * var(--glow, 0.3))), inset 0 0 20px rgba(255, 212, 0, calc(0.06 + 0.2 * var(--glow, 0.3)));
  }
}

.score-counter.mega { animation: counterMega 520ms ease-out; }
@keyframes counterMega {
  0% { transform: scale(1); }
  22% { transform: scale(1.5); filter: brightness(1.9); }
  55% { transform: scale(1.18); }
  100% { transform: scale(1); filter: brightness(1); }
}

.score-pill {
  position: absolute;
  top: 50%;
  margin-top: -24px;
  width: 48px;
  height: 48px;
  will-change: transform;
  transition: transform 260ms cubic-bezier(0.3, 0.9, 0.3, 1);
}
.rail-point .score-pill { right: 8px; }
.rail-mult .score-pill { left: 8px; }

.pill-wobble {
  display: block;
  width: 100%;
  height: 100%;
  animation: pillWobble 1.35s ease-in-out infinite;
  animation-delay: calc(var(--wobble-delay, 0) * -120ms);
}

.pill-inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  font: 950 15px var(--mono);
  color: #fff;
  animation: pillPop 260ms cubic-bezier(0.2, 1.5, 0.4, 1);
}

.score-pill.pill-special { width: 60px; }
.score-pill.pill-special .pill-inner { font-size: 14px; }

.score-pill.pill-heat-up .pill-inner {
  background: linear-gradient(160deg, #ffcf3e, #e84427);
  border: 1px solid #ffe387;
  box-shadow: 0 0 16px rgba(255, 105, 38, 0.72);
}
.score-pill.pill-heat-down .pill-inner {
  background: linear-gradient(160deg, #40eaff, #1470bb);
  border: 1px solid #9af5ff;
  box-shadow: 0 0 16px rgba(49, 219, 255, 0.7);
}

.score-counter.barrier-hit { animation: barrierCounterHit 620ms ease-out; color: #ff3c4f; }
.score-counter.heat-positive { animation: heatPositive 420ms ease-in-out infinite; }
.score-counter.heat-negative,
.score-counter.heat-zero { color: #ff1f35; border-color: #ff1f35; box-shadow: 0 0 32px rgba(255,31,53,0.65); text-shadow: 0 0 20px rgba(255,31,53,0.9); }
.score-counter.chips-mode { color: #b55cff; border-color: rgba(181,92,255,0.88); box-shadow: 0 0 32px rgba(157,60,255,0.58); }

@keyframes barrierCounterHit {
  15%, 45%, 75% { transform: translateX(-10px) scale(1.12); }
  30%, 60%, 90% { transform: translateX(10px) scale(0.96); }
}
@keyframes heatPositive {
  0%, 100% { color: #ff1f35; box-shadow: 0 0 28px rgba(255,31,53,0.55); }
  50% { color: #ff1f35; box-shadow: 0 0 44px rgba(255,31,53,0.95); filter: brightness(1.35); }
}

@keyframes pillWobble {
  0%, 100% { transform: translateY(-2px) rotate(-1deg); }
  50% { transform: translateY(3px) rotate(1deg); }
}

.score-counter.counter-exit { animation: counterExitDown 320ms ease-in forwards; }
.score-counter.counter-enter { animation: counterEnterFromTop 460ms cubic-bezier(0.16, 1.2, 0.32, 1) both; }

@keyframes counterExitDown {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(24px) scale(0.78); filter: blur(2px); }
}
@keyframes counterModeExit {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(14px) scale(0.86); }
}
@keyframes counterEnterFromTop {
  0% { opacity: 0; transform: translateY(-28px) scale(0.78); filter: blur(2px); }
  62% { opacity: 1; transform: translateY(3px) scale(1.08); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.status-particle {
  position: absolute;
  z-index: 78;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  pointer-events: none;
  color: #fff;
  font: 1000 14px var(--mono);
  background: #122b3f;
  border: 1px solid #7cefff;
  box-shadow: 0 0 24px rgba(67,221,255,0.95), 0 4px 12px rgba(0,0,0,0.7);
  opacity: 0;
  will-change: transform, opacity;
}
.status-particle.flying { animation: statusFly var(--flight, 720ms) cubic-bezier(0.24, 0.72, 0.18, 1) forwards; }
.status-particle.preparing { animation: none; opacity: 0; }
.status-particle.barrier-tick-shot { color: #dffaff; background: #0d4260; border-color: #77eaff; }
.status-particle.barrier-shot { min-width: 66px; height: 50px; border-width: 3px; font-size: 15px; background: #123d55; }
.status-particle.damage-shot { min-width: 64px; height: 44px; color: #fff; background: linear-gradient(160deg, #ffb12e, #d9233f); border-color: #ffe17a; box-shadow: 0 0 30px rgba(255,64,57,0.95), 0 5px 14px #000; }
.status-particle.heat-up-shot { min-width: 58px; height: 44px; background: #e94a24; border-color: #ffd348; box-shadow: 0 0 30px #ff5939, 0 5px 14px #000; }
.status-particle.heat-down-shot { min-width: 58px; height: 44px; background: #087aa1; border-color: #8df7ff; box-shadow: 0 0 30px #42ddff, 0 5px 14px #000; }
.status-particle.chip-shot { min-width: 66px; height: 46px; gap: 7px; color: #fff; background: #a61f37; border-color: #ff8da0; box-shadow: 0 0 30px rgba(255,55,88,0.9), 0 5px 14px #000; }
.status-particle.chip-shot::before {
  content: "";
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: url("e-chip.png") center / contain no-repeat;
}
.status-particle.chip-shot { display: flex; }

@keyframes statusFly {
  0% { transform: translate(var(--x0), var(--y0)) scale(0.48); opacity: 0; }
  8% { opacity: 1; }
  42% { transform: translate(var(--xm), var(--ym)) scale(1.16); opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translate(var(--x1), var(--y1)) scale(0.56); opacity: 0; }
}
.pill-point .pill-inner {
  background: linear-gradient(160deg, #ff5566, #d81f38);
  border: 1px solid #ff8a97;
  box-shadow: 0 0 10px rgba(255, 60, 90, 0.65);
}
.pill-mult .pill-inner {
  background: linear-gradient(160deg, #4d8bff, #1f49d8);
  border: 1px solid #8fb3ff;
  box-shadow: 0 0 10px rgba(70, 120, 255, 0.65);
}

@keyframes pillPop {
  0% { transform: scale(0); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.play-hand {
  flex: 0 0 auto;
  align-self: center;
  margin: 8px auto 0;
  z-index: 42;
  padding: 11px 34px;
  border-radius: 999px;
  border: 1px solid rgba(92, 255, 196, 0.7);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 45%),
    linear-gradient(135deg, #50ffb3, #30d1ff);
  color: #04100e;
  font: 1000 16px var(--font);
  letter-spacing: 0.06em;
  box-shadow: 0 10px 30px rgba(50, 233, 207, 0.35), inset 0 1px rgba(255, 255, 255, 0.55);
  animation: playHandPulse 1.6s ease-in-out infinite;
  touch-action: manipulation;
}
.play-hand.hidden { display: none; }
.play-hand:active { transform: scale(0.95); }

@keyframes playHandPulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(50, 233, 207, 0.35), inset 0 1px rgba(255, 255, 255, 0.55); }
  50% { box-shadow: 0 10px 40px rgba(50, 233, 207, 0.6), 0 0 22px rgba(80, 255, 179, 0.55), inset 0 1px rgba(255, 255, 255, 0.55); }
}

.lane-card.crew-scoring { animation: crewScore 700ms ease-in-out; z-index: 6; }
@keyframes crewScore {
  0%, 100% { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24); filter: brightness(1); }
  40% { box-shadow: 0 0 22px rgba(255, 255, 255, 0.6), 0 0 42px rgba(255, 215, 102, 0.75); filter: brightness(1.4) saturate(1.2); }
}

.poker-card.card-scoring .card-face { animation: cardScorePulse 420ms ease-out; }
.ftue-guided #stageCards .poker-card.card-scoring {
  z-index: 14;
  animation: ftueCardCountJump 440ms cubic-bezier(0.2, 0.9, 0.25, 1.15);
}
@keyframes cardScorePulse {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.85) drop-shadow(0 0 9px rgba(255, 255, 255, 0.85)); }
  100% { filter: brightness(1); }
}

@keyframes ftueCardCountJump {
  0%, 100% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-18px) scale(1.11) rotate(-1.5deg); filter: brightness(1.38); }
  72% { transform: translateY(3px) scale(0.98) rotate(0.5deg); }
}

#stageCards .poker-card.barrier-contributing {
  z-index: 12;
  animation: barrierContribution 980ms ease-in-out;
}
.poker-card.barrier-contributing .card-face {
  box-shadow: 0 0 0 3px var(--barrier-suit-color, #43ddff), 0 0 24px var(--barrier-suit-color, #43ddff);
}
@keyframes barrierContribution {
  0%, 100% { transform: translateY(0) scale(1); }
  28%, 72% { transform: translateY(-9px) scale(1.08); }
}

#gameScreen.screen-shake { animation: screenShake 520ms ease-in-out; }
@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(calc(var(--shake, 6px) * -1), 3px); }
  22% { transform: translate(var(--shake, 6px), -4px); }
  34% { transform: translate(calc(var(--shake, 6px) * -0.7), 4px); }
  46% { transform: translate(calc(var(--shake, 6px) * 0.6), -3px); }
  58% { transform: translate(calc(var(--shake, 6px) * -0.4), 2px); }
  72% { transform: translate(calc(var(--shake, 6px) * 0.3), -2px); }
  86% { transform: translate(calc(var(--shake, 6px) * -0.15), 1px); }
}

/* ================= drag-to-stage + re-deal ================= */

/* Gameplay is a top-to-bottom flow: crew, [fill], counter, stage, hand, PLAY HAND.
   Nothing is absolutely positioned so nothing overlaps. */
.game-fill { flex: 1 1 auto; min-height: 4px; }

.score-area {
  flex: 0 0 auto;
  margin-top: 6px;
  height: 104px;
  min-height: 104px;
  overflow: visible;
}

.play-stage {
  flex: 0 0 auto;
  position: relative;
  margin: 10px 6px 0;
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1.5px dashed rgba(120, 200, 255, 0.32);
  border-radius: 16px;
  background: rgba(20, 40, 70, 0.16);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  z-index: 1;
}
.play-stage.has-cards { border-style: solid; border-color: rgba(120, 200, 255, 0.42); background: rgba(20, 40, 70, 0.3); }
.play-stage.full { border-color: rgba(255, 200, 90, 0.6); }
.play-stage.drop-hot {
  border-color: rgba(92, 255, 196, 0.95);
  background: rgba(50, 209, 255, 0.15);
  box-shadow: 0 0 26px rgba(80, 255, 196, 0.4), inset 0 0 26px rgba(80, 255, 196, 0.15);
}

.stage-cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.stage-cards .poker-card {
  margin: 0;
  transform: none;
  animation: none;
}
.stage-cards .poker-card:hover { transform: translateY(-6px) scale(1.03); }
.stage-cards .poker-card.staged { animation: stagePop 260ms cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes stagePop {
  0% { transform: translateY(16px) scale(0.7); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.stage-hint {
  font: 800 10px var(--mono);
  letter-spacing: 0.12em;
  color: rgba(160, 200, 240, 0.6);
  text-transform: uppercase;
  pointer-events: none;
}
.play-stage.has-cards .stage-hint { display: none; }

.play-hand.disabled {
  opacity: 0.4;
  filter: saturate(0.35);
  animation: none;
  pointer-events: none;
  box-shadow: none;
}

/* Hand and controls stay in document flow so nothing can cover the cards. */
.card-dock { flex: 0 0 auto; margin-top: 8px; padding-bottom: 0; }
.inert-cards { height: 138px; }

.hand-actions {
  position: relative;
  flex: 0 0 50px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.hand-actions .play-hand { margin: 0; min-height: 44px; }

.hand-actions .deck-button {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: auto;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
}

.hand-actions .deck-button:active { transform: translateY(-50%) scale(0.94); }
.hand-actions .deck-icon { width: 19px; height: 24px; }
.hand-actions .deck-button small { display: none; }

/* Only Crew and their flying effect cards remain visible during the match intro. */
#gameScreen.applying-mods .score-area,
#gameScreen.applying-mods .play-stage,
#gameScreen.applying-mods .card-dock,
#gameScreen.applying-mods .hand-actions {
  visibility: hidden;
  pointer-events: none;
}

.poker-card.drag-src { opacity: 0.28; }

.drag-ghost {
  position: fixed;
  width: 64px;
  height: 100px;
  margin: 0;
  transform: translate(-50%, -56%) rotate(-4deg) scale(1.08);
  transform-origin: center;
  z-index: 220;
  pointer-events: none;
  opacity: 0.96;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6));
  animation: none;
}

/* ---- AI HP defeat + refill reset ---- */
.ai-hp-fill.defeated { animation: hpDefeat 360ms ease-out; }
@keyframes hpDefeat {
  0% { filter: brightness(1); }
  35% { filter: brightness(2.7) saturate(1.4); box-shadow: 0 0 26px rgba(255, 90, 90, 0.95); }
  100% { filter: brightness(1); }
}
.ai-hp-fill.refill { animation: hpRefill 720ms ease-out; }
@keyframes hpRefill {
  0% { filter: brightness(2.4) saturate(1.5); box-shadow: 0 0 28px rgba(255, 190, 120, 0.95); }
  100% { filter: brightness(1); }
}
.ai-hp.reset-flash .ai-hp-head span:last-child { animation: hpTextFlash 1s ease-out; }
.ai-hp.resetting .ai-hp-track { animation: hpTrackReboot 1.1s ease-out; }
@keyframes hpTrackReboot {
  0%, 30% { border-color: rgba(255, 77, 103, 0.35); box-shadow: 0 0 0 rgba(255, 77, 103, 0); }
  52% { border-color: rgba(255, 230, 120, 0.95); box-shadow: 0 0 24px rgba(255, 160, 70, 0.9); }
  100% { border-color: rgba(255, 77, 103, 0.3); box-shadow: 0 0 0 rgba(255, 77, 103, 0); }
}
@keyframes hpTextFlash {
  0% { color: #ffffff; text-shadow: 0 0 12px rgba(255, 255, 255, 0.9); }
  100% { color: #ff8ea0; text-shadow: none; }
}

/* ================= FTUE immersive flow ================= */

#transitionVeil {
  position: absolute;
  inset: 0;
  z-index: 79;
  pointer-events: none;
  opacity: 0;
  background: #020307;
}

#transitionVeil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(67, 221, 255, 0.18) 22px 23px);
  opacity: 0.35;
}

#transitionVeil.closing {
  pointer-events: auto;
  animation: veilClose 520ms cubic-bezier(0.65, 0, 0.25, 1) forwards;
}

#transitionVeil.opening {
  pointer-events: auto;
  animation: veilOpen 420ms cubic-bezier(0.3, 0.8, 0.2, 1) forwards;
}

@keyframes veilClose {
  from { opacity: 0; clip-path: inset(50% 0 50%); }
  to { opacity: 1; clip-path: inset(0); }
}

@keyframes veilOpen {
  from { opacity: 1; clip-path: inset(0); }
  to { opacity: 0; clip-path: inset(0 50%); }
}

.splash-screen,
.casino-screen {
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}

.splash-art,
.casino-selection-art {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.splash-art {
  object-position: 50% 50%;
  filter: saturate(0.75) contrast(1.08) brightness(0.68);
  animation: splashArtIn 1.4s ease-out both;
}

.splash-scrim,
.casino-selection-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.splash-scrim {
  background:
    linear-gradient(180deg, rgba(1, 3, 8, 0.22), rgba(1, 3, 8, 0.18) 36%, rgba(1, 3, 8, 0.92) 82%),
    linear-gradient(90deg, rgba(2, 4, 10, 0.74), transparent 78%);
}

.splash-brand {
  margin: auto 28px 0;
  transform: translateY(-68px);
  animation: splashBrandIn 780ms 160ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.splash-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--cyan);
  font: 900 11px var(--mono);
  letter-spacing: 0.14em;
}

.splash-brand h1 {
  max-width: 350px;
  color: #ffffff;
  font-size: 74px;
  line-height: 0.78;
  letter-spacing: 0;
  text-shadow:
    4px 4px 0 #07090d,
    0 0 20px rgba(67, 221, 255, 0.55),
    0 0 42px rgba(255, 77, 103, 0.28);
}

.splash-brand p {
  margin-top: 18px;
  color: #f4db83;
  font: 800 14px var(--mono);
}

.splash-login {
  padding: 0 24px 36px;
}

.login-button {
  width: 100%;
  min-height: 72px;
  border: 2px solid rgba(67, 221, 255, 0.9);
  border-radius: 8px;
  color: #02100d;
  background: #59f4c3;
  box-shadow:
    6px 6px 0 #02050a,
    0 0 24px rgba(67, 221, 255, 0.68),
    inset 0 2px rgba(255, 255, 255, 0.55);
  animation: loginBreathe 1.8s ease-in-out infinite;
}

.login-button span,
.casino-start-button span,
.van-next-button span {
  display: block;
  font-size: 29px;
  font-weight: 1000;
  line-height: 1;
}

.login-button small,
.casino-start-button small,
.van-next-button small {
  display: block;
  margin-top: 5px;
  font: 900 10px var(--mono);
  text-transform: uppercase;
}

.login-button.connecting {
  animation: none;
  filter: saturate(0.55);
  opacity: 0.58;
}

.login-loading {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(67, 221, 255, 0.4);
  border-radius: 8px;
  background: rgba(2, 6, 12, 0.9);
}

.login-loading.show { display: block; animation: loginPanelIn 180ms ease-out; }
.login-loading.complete { border-color: rgba(76, 255, 176, 0.85); box-shadow: 0 0 18px rgba(76, 255, 176, 0.22); }

.login-loading-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #bcecff;
  font: 800 10px var(--mono);
  text-transform: uppercase;
}

.login-track {
  height: 8px;
  border: 1px solid rgba(67, 221, 255, 0.4);
  background: #050911;
  overflow: hidden;
}

.login-track i {
  display: block;
  width: 0;
  height: 100%;
  background: #59f4c3;
  box-shadow: 0 0 14px rgba(76, 255, 176, 0.9);
  transition: width 320ms ease;
}

.casino-selection-art {
  object-position: 50% 50%;
  transform: scale(1.04);
}

.casino-screen.arrived .casino-selection-art {
  animation: casinoArtSettle 1.1s ease-out forwards;
}

.casino-selection-scrim {
  background:
    linear-gradient(180deg, rgba(2, 4, 8, 0.7), transparent 30%, transparent 55%, rgba(2, 4, 8, 0.94) 88%),
    linear-gradient(90deg, rgba(2, 4, 8, 0.44), transparent 70%);
}

.casino-selection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 58px 20px 0;
}

.casino-availability {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffffff;
  font: 900 9px var(--mono);
}

.casino-availability i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
  animation: onlineBreathe 1.25s ease-in-out infinite;
}

.casino-selection-copy {
  margin: auto 22px 0;
  padding-bottom: 26px;
  text-shadow: 0 3px 9px rgba(0, 0, 0, 0.95);
}

.casino-selection-copy > p {
  margin-bottom: 8px;
  color: var(--gold);
  font: 1000 12px var(--mono);
}

.casino-selection-copy h1 {
  color: #ffffff;
  font-size: 42px;
  line-height: 0.94;
}

.casino-selection-copy > span {
  display: block;
  margin-top: 12px;
  color: #cbd8e5;
  font: 800 11px/1.4 var(--mono);
}

.casino-selection-action {
  padding: 0 20px 34px;
}

.casino-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-bottom: 12px;
}

.casino-dots i {
  width: 22px;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
}

.casino-dots i.active {
  background: var(--gold);
  box-shadow: 0 0 10px rgba(255, 215, 102, 0.8);
}

.casino-start-button {
  width: 100%;
  min-height: 82px;
  border: 2px solid #fff19b;
  border-radius: 8px;
  color: #080704;
  background: var(--gold);
  box-shadow:
    7px 7px 0 rgba(2, 4, 8, 0.95),
    0 0 24px rgba(255, 215, 102, 0.88),
    0 0 52px rgba(67, 221, 255, 0.36);
  animation: startBreathe 1.6s ease-in-out infinite;
}

.casino-start-button.launching { animation: casinoLaunch 260ms ease-out both; }

.screen-arrive > * {
  animation: prepItemIn 420ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.screen-arrive > *:nth-child(2) { animation-delay: 60ms; }
.screen-arrive > *:nth-child(3) { animation-delay: 120ms; }
.screen-arrive > *:nth-child(4) { animation-delay: 180ms; }
.screen-arrive > *:nth-child(5) { animation-delay: 240ms; }

/* Compact only the new gameplay header rows; preserve scoring, cards and PLAY HAND. */
#gameScreen { padding: 56px 14px 12px; }

#gameScreen .ai-status {
  min-height: 58px;
  grid-template-columns: 42px 1fr;
  gap: 9px;
  padding: 7px 9px;
}

#gameScreen .ai-eye { width: 40px; height: 40px; }
#gameScreen .ai-eye span { width: 21px; height: 10px; }
#gameScreen .ai-status b { font-size: 13px; }
#gameScreen .ai-status span { font-size: 10px; }
#gameScreen .heat-meter { margin-top: 6px; }
#gameScreen .crew-lane-wrap { margin-top: 5px; }
#gameScreen .section-title { margin-bottom: 4px; font-size: 13px; }
#gameScreen .section-title small { font-size: 11px; }
#gameScreen .crew-lane { gap: 8px; padding: 2px 2px 5px; }
#gameScreen .lane-slot { width: 76px; height: 82px; flex: 0 0 76px; }
#gameScreen .online-dot { top: 5px; right: 5px; width: 10px; height: 10px; }

.spike-lane-wrap { margin-top: 4px; }

.game-spike-slots {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 1px 2px 4px;
  scroll-snap-type: x mandatory;
}

.game-spike-slot {
  position: relative;
  width: 54px;
  height: 74px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid rgba(255, 215, 102, 0.38);
  border-radius: 7px;
  background: rgba(7, 10, 16, 0.82);
  overflow: hidden;
  scroll-snap-align: start;
}

.game-spike-slot.empty {
  border-style: dashed;
  color: rgba(255, 215, 102, 0.42);
  font-size: 25px;
}

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

.game-spike-art {
  padding: 3px;
  background: #0b0d12;
}

.game-spike-art img {
  object-fit: contain;
  border-radius: 3px;
}

.spike-online-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  border: 2px solid #05070b;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 9px rgba(255, 215, 102, 0.95);
  animation: onlineBreathe 1.25s ease-in-out infinite;
}

.game-spike-slot.returning { animation: spikeReturnPop 680ms cubic-bezier(0.2, 1.2, 0.25, 1); }

#gameScreen .run-status-row { margin-top: 3px; }
#gameScreen .ai-hp { margin-top: 4px; }
#gameScreen .game-fill { min-height: 0; }
#gameScreen .score-area { height: 92px; min-height: 92px; margin-top: 3px; }
#gameScreen .play-stage { min-height: 104px; margin-top: 6px; }
#gameScreen .inert-cards { height: 128px; }

/* The Van */
.van-screen {
  padding: 58px 16px 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(67, 221, 255, 0.08), transparent 20%),
    #08090d;
}

.van-screen::before,
.van-screen::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.van-screen::before {
  inset: 115px 0 215px;
  border-top: 2px solid rgba(67, 221, 255, 0.2);
  border-bottom: 2px solid rgba(67, 221, 255, 0.2);
  background:
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(255, 255, 255, 0.045) 52px 54px),
    #0d1118;
}

.van-screen::after {
  left: -40px;
  right: -40px;
  bottom: 192px;
  height: 18px;
  background: repeating-linear-gradient(135deg, #f6c431 0 14px, #17191e 14px 28px);
  opacity: 0.72;
}

.van-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.van-header h1 { font-size: 34px; }

.van-brief {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 215, 102, 0.32);
  border-radius: 8px;
  background: rgba(9, 12, 18, 0.92);
}

.van-brief b { color: var(--gold); font-size: 13px; }
.van-brief p { margin-top: 3px; color: #b5c1cd; font-size: 12px; line-height: 1.25; }

.van-status-light {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px rgba(76, 255, 176, 0.9);
  animation: onlineBreathe 1.25s ease-in-out infinite;
}

.van-offer-stage {
  flex: 1 1 auto;
  min-height: 322px;
  display: flex;
  align-items: center;
}

.van-offers {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.van-offer {
  min-width: 0;
  text-align: center;
  animation: vanOfferFloat calc(2.5s + var(--offer-index) * 0.28s) ease-in-out infinite;
  animation-delay: calc(var(--offer-index) * -0.4s);
}

.van-offer-card {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 3px solid rgba(67, 221, 255, 0.56);
  border-radius: 8px;
  background: #05070b;
  box-shadow: 5px 7px 0 rgba(0, 0, 0, 0.52), 0 0 18px rgba(67, 221, 255, 0.18);
  overflow: hidden;
  touch-action: none;
}

.van-offer-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.van-offer.selected .van-offer-card {
  border-color: var(--gold);
  box-shadow: 5px 7px 0 rgba(0, 0, 0, 0.52), 0 0 24px rgba(255, 215, 102, 0.72);
}

.van-offer.unaffordable .van-offer-card { border-color: rgba(255, 77, 103, 0.9); }
.van-offer.unaffordable .van-offer-cost { color: #ff536b; }
.van-offer.sold .van-offer-card { filter: grayscale(0.78) brightness(0.48); border-color: rgba(76, 255, 176, 0.5); }
.van-offer-card.dragging { opacity: 0.32; }
.van-offer-card.denied { animation: vanDeny 240ms ease-in-out; }
.van-offer-card.snap-back { animation: vanSnapBack 320ms ease-out; }

.van-offer-rarity {
  position: absolute;
  left: 5px;
  top: 5px;
  padding: 4px 6px;
  border-radius: 4px;
  color: #05070b;
  background: #ffffff;
  font: 1000 9px var(--mono);
  text-transform: uppercase;
}

.rarity-common { background: #b8c3ce; color: #080a0d; }
.rarity-epic { background: #b58cff; color: #0b0615; }

.van-sold {
  position: absolute;
  inset: auto 5px 5px;
  padding: 6px 4px;
  border: 1px solid rgba(76, 255, 176, 0.72);
  border-radius: 4px;
  color: #d8ffed;
  background: rgba(2, 16, 12, 0.9);
  font: 1000 9px var(--mono);
}

.van-offer-state {
  position: absolute;
  inset: auto 5px 5px;
  padding: 5px 4px;
  border-radius: 4px;
  font: 1000 8px var(--mono);
}

.selected-state {
  color: #090704;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(255, 215, 102, 0.75);
}

.insufficient-state {
  color: #ffffff;
  background: rgba(195, 18, 48, 0.94);
}

.van-offer-copy {
  min-height: 52px;
  padding-top: 8px;
}

.van-offer-copy b {
  display: block;
  min-height: 24px;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.08;
}

.van-offer-cost {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--gold);
  font: 1000 16px var(--mono);
}

.van-offer-cost .chip-icon { width: 18px; height: 18px; }

.van-loadout {
  flex: 0 0 auto;
  padding: 10px;
  border: 1px solid rgba(255, 215, 102, 0.3);
  border-radius: 8px;
  background: rgba(5, 7, 11, 0.94);
}

.van-spike-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.van-spike-slot {
  position: relative;
  height: 104px;
  padding: 0;
  border: 2px dashed rgba(255, 215, 102, 0.38);
  border-radius: 7px;
  color: rgba(255, 215, 102, 0.62);
  background: rgba(16, 18, 22, 0.88);
  overflow: hidden;
}

.van-spike-slot.empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
}

.van-spike-slot.empty small { font: 900 10px var(--mono); }
.van-empty-mark { font-size: 30px; line-height: 0.8; }

.van-spike-slot.drop-hot {
  transform: translateY(-4px);
  border-style: solid;
  border-color: var(--green);
  color: var(--green);
  background: rgba(76, 255, 176, 0.1);
  box-shadow: 0 0 24px rgba(76, 255, 176, 0.5), inset 0 0 18px rgba(76, 255, 176, 0.12);
}

.van-slot-art,
.van-slot-art img {
  display: block;
  width: 100%;
  height: 100%;
}

.van-slot-art img { object-fit: cover; }

.van-slot-name {
  position: absolute;
  inset: auto 0 0;
  padding: 14px 5px 5px;
  color: #ffffff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.92));
  font: 900 10px var(--mono);
}

.van-spike-slot.just-installed { animation: spikeInstall 820ms cubic-bezier(0.2, 1.2, 0.25, 1); }

.van-next-button {
  min-height: 66px;
  margin-top: 10px;
  border: 2px solid var(--cyan);
  border-radius: 8px;
  color: #021014;
  background: #63e6ff;
  box-shadow: 5px 5px 0 #020407, 0 0 20px rgba(67, 221, 255, 0.5);
}

.van-next-button.purchase-ready { animation: nextReady 600ms ease-out; }

.van-drag-ghost {
  position: fixed;
  z-index: 240;
  width: 90px;
  height: 135px;
  border: 3px solid var(--green);
  border-radius: 8px;
  overflow: hidden;
  pointer-events: none;
  transform: translate(-50%, -70%) rotate(-3deg) scale(1.06);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.72), 0 0 22px rgba(76, 255, 176, 0.56);
}

.van-drag-ghost img { width: 100%; height: 100%; object-fit: cover; }

.spike-sheet-hero {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 14px;
  align-items: center;
}

.spike-sheet-art {
  width: 108px;
  height: 152px;
  display: block;
  border: 3px solid rgba(255, 215, 102, 0.72);
  border-radius: 8px;
  overflow: hidden;
}

.spike-sheet-art img { width: 100%; height: 100%; object-fit: cover; }
.spike-sheet-hero h3 { margin: 8px 0 5px; font-size: 23px; line-height: 1; }
.spike-sheet-hero p { color: var(--muted); font: 800 9px var(--mono); }
.spike-rarity { display: inline-flex; padding: 4px 7px; border-radius: 4px; font: 1000 9px var(--mono); text-transform: uppercase; }
.spike-description { margin-top: 14px; }
.spike-effect-definition { border-color: rgba(255, 215, 102, 0.5); }
.spike-effect-definition .effect-definition-head strong { color: var(--gold); }

.login-button:focus-visible,
.casino-start-button:focus-visible,
.van-next-button:focus-visible,
.van-offer-card:focus-visible,
.van-spike-slot:focus-visible,
.game-spike-slot:focus-visible {
  outline: 4px solid #ffffff;
  outline-offset: 4px;
}

.van-arrive .van-brief { animation: vanElementIn 360ms ease-out both; }
.van-arrive .van-offer { animation-name: vanElementIn, vanOfferFloat; animation-duration: 420ms, calc(2.5s + var(--offer-index) * 0.28s); animation-delay: calc(var(--offer-index) * 90ms), calc(var(--offer-index) * -0.4s); animation-iteration-count: 1, infinite; }
.van-arrive .van-loadout { animation: vanElementIn 420ms 90ms ease-out both; }
.van-arrive .van-next-button { animation: vanElementIn 420ms 180ms ease-out both; }

@keyframes splashArtIn {
  from { opacity: 0; transform: scale(1.06); filter: saturate(0.4) contrast(1.2) brightness(0.45) blur(5px); }
  to { opacity: 1; transform: scale(1); filter: saturate(0.75) contrast(1.08) brightness(0.68) blur(0); }
}

@keyframes splashBrandIn {
  from { opacity: 0; transform: translateY(-48px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(-68px); filter: blur(0); }
}

@keyframes loginBreathe {
  50% { filter: brightness(1.14); box-shadow: 6px 6px 0 #02050a, 0 0 36px rgba(67, 221, 255, 0.9), inset 0 2px rgba(255, 255, 255, 0.55); }
}

@keyframes loginPanelIn {
  from { opacity: 0; transform: translateY(8px); }
}

@keyframes casinoArtSettle {
  to { transform: scale(1); }
}

@keyframes startBreathe {
  50% { filter: brightness(1.12); box-shadow: 7px 7px 0 rgba(2, 4, 8, 0.95), 0 0 36px rgba(255, 215, 102, 1), 0 0 64px rgba(67, 221, 255, 0.52); }
}

@keyframes casinoLaunch {
  45% { transform: scale(0.96); filter: brightness(1.7); }
  to { transform: scale(1.04); filter: brightness(2); }
}

@keyframes prepItemIn {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes spikeReturnPop {
  0% { opacity: 0; transform: translateY(-12px) scale(0.65); }
  55% { transform: translateY(2px) scale(1.12); filter: brightness(1.8); }
}

@keyframes vanOfferFloat {
  50% { transform: translateY(-6px); }
}

@keyframes vanDeny {
  25% { transform: translateX(-5px); filter: brightness(1.4); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

@keyframes vanSnapBack {
  0% { transform: translateY(-8px) scale(1.04); }
  60% { transform: translateY(3px) scale(0.98); }
}

@keyframes spikeInstall {
  0% { opacity: 0.3; transform: translateY(-22px) scale(0.72); }
  48% { transform: translateY(-7px) scale(1.12); filter: brightness(2); box-shadow: 0 0 28px rgba(76, 255, 176, 0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes nextReady {
  42% { transform: scale(1.035); filter: brightness(1.4); box-shadow: 5px 5px 0 #020407, 0 0 34px rgba(67, 221, 255, 0.95); }
}

@keyframes vanElementIn {
  from { opacity: 0; transform: translateY(16px); }
}

/* ================= METROID PRIMER FTUE ================= */

button:disabled {
  cursor: default;
}

.casino-start-button:disabled,
.play-button:disabled,
.van-next-button:disabled {
  animation: none;
  filter: grayscale(0.65) brightness(0.62);
  opacity: 0.72;
  box-shadow: 4px 4px 0 rgba(2, 4, 8, 0.95);
}

#casinoStartLabel {
  font-size: 25px;
}

#casinoScreen:not(.post-emp) .casino-selection-scrim {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.52), transparent 31%, transparent 52%, rgba(0, 0, 0, 0.94) 88%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 74%),
    radial-gradient(circle at 76% 30%, rgba(255, 196, 56, 0.16), transparent 34%);
}

#casinoScreen:not(.post-emp) .casino-selection-copy > p {
  color: #fff2a7;
  text-shadow: 2px 2px 0 #000, 0 0 16px rgba(255, 215, 102, 0.85);
}

#casinoScreen:not(.post-emp) .casino-selection-copy h1 {
  color: #fff7d0;
  text-shadow: 4px 4px 0 #000, 0 0 26px rgba(255, 194, 61, 0.65);
}

.ftue-handler {
  display: none;
}

.ftue-prep .topbar .chip-pill,
.ftue-prep .loadout-panel {
  display: none;
}

.ftue-prep .prep-spacer {
  flex: 1 1 auto;
  min-height: 36px;
}

.ftue-prep .casino-card {
  min-height: 120px;
  border-width: 2px;
  border-color: rgba(255, 215, 102, 0.58);
  background:
    linear-gradient(145deg, rgba(36, 27, 8, 0.92), rgba(7, 10, 18, 0.82));
  box-shadow: 0 0 30px rgba(255, 215, 102, 0.16), inset 0 1px rgba(255, 255, 255, 0.08);
}

.ftue-prep .ftue-handler {
  min-height: 110px;
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px;
  border: 2px solid rgba(70, 227, 154, 0.72);
  border-radius: 8px;
  background: rgba(4, 20, 16, 0.9);
  box-shadow: 0 0 24px rgba(70, 227, 154, 0.22), inset 0 0 18px rgba(70, 227, 154, 0.08);
}

.ftue-handler-avatar {
  position: relative;
  width: 78px;
  height: 86px;
  border: 3px solid var(--crypto);
  border-radius: 6px;
  overflow: hidden;
}

.ftue-handler-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 23%;
}

.ftue-handler-avatar i {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 11px;
  height: 11px;
  border: 2px solid #04120e;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 11px var(--green);
  animation: onlineBreathe 1.2s ease-in-out infinite;
}

.ftue-handler h2 {
  font-size: 22px;
}

.ftue-handler span {
  display: block;
  margin-top: 6px;
  color: #b9d9ce;
  font: 800 11px/1.35 var(--mono);
}

.ftue-guided .card-dock,
.ftue-guided .deck-button {
  opacity: 0.32;
  filter: saturate(0.4);
}

.ftue-guided .play-stage {
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(255, 215, 102, 0.28), inset 0 0 22px rgba(255, 215, 102, 0.06);
}

.ftue-guided #playHand {
  min-width: 270px;
  padding-inline: 18px;
  font-size: 17px;
  color: #070704;
  background: var(--gold);
  border-color: #fff4ae;
  box-shadow: 0 0 24px rgba(255, 215, 102, 0.62), 5px 5px 0 #020407;
}

.ftue-comms {
  position: absolute;
  z-index: 220;
  left: 16px;
  right: 16px;
  bottom: 30px;
  min-height: 154px;
  display: none;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  gap: 10px 12px;
  padding: 14px;
  border: 2px solid var(--gold);
  border-radius: 8px;
  color: #f8fbff;
  background:
    linear-gradient(135deg, rgba(3, 28, 32, 0.98), rgba(7, 42, 43, 0.98));
  box-shadow: 7px 7px 0 #010205, 0 0 30px rgba(255, 215, 102, 0.34);
}

.ftue-comms.show {
  display: grid;
  animation: ftueCommsIn 260ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.ftue-comms-signal {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font: 1000 11px var(--mono);
}

.ftue-comms-signal i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: onlineBreathe 1s ease-in-out infinite;
}

#ftueDialogueText {
  min-height: 58px;
  align-self: center;
  font: 800 15px/1.35 var(--mono);
}

#ftueDialogueNext {
  align-self: end;
  min-width: 92px;
  min-height: 46px;
  padding: 0 14px;
  border: 2px solid #070604;
  border-radius: 6px;
  color: #070604;
  background: var(--gold);
  box-shadow: 3px 3px 0 #000;
  font: 1000 12px var(--mono);
}

.ftue-crew-call {
  position: absolute;
  z-index: 180;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: 62px 18px 30px;
  background:
    linear-gradient(180deg, rgba(9, 12, 19, 0.97), rgba(2, 4, 8, 0.99)),
    #05070b;
}

.ftue-crew-call.show {
  display: flex;
  animation: ftuePanelIn 340ms ease-out both;
}

.ftue-crew-call header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ftue-crew-call header h2 {
  font-size: 32px;
}

.ftue-crew-call-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ftue-crew-call-actions > span {
  padding: 7px 9px;
  border-radius: 5px;
  color: #07100c;
  background: var(--green);
  box-shadow: 0 0 15px rgba(76, 255, 176, 0.55);
  font: 1000 10px var(--mono);
}

#ftueCrewClose {
  width: 38px;
  height: 38px;
  display: none;
  border: 2px solid #ffffff;
  border-radius: 5px;
  color: #ffffff;
  background: #11151c;
  font-size: 25px;
}

#ftueCrewClose.show {
  display: grid;
  place-items: center;
}

.ftue-crew-call.all-busy .ftue-crew-call-actions > span {
  color: #ffffff;
  background: var(--red);
  box-shadow: 0 0 15px rgba(255, 77, 103, 0.55);
}

.corrupted-contact {
  border-color: rgba(255, 77, 103, 0.52);
}

.ftue-crew-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 28px;
}

.ftue-contact {
  position: relative;
  min-width: 0;
  height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 9px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  color: #9da7b3;
  text-align: left;
  background: #0c1017;
}

.ftue-contact b,
.ftue-contact small {
  position: relative;
  z-index: 2;
}

.ftue-contact b {
  font-size: 12px;
  line-height: 1.05;
}

.ftue-contact small {
  color: #79828e;
  font: 900 8px var(--mono);
}

.ftue-contact-static {
  position: absolute;
  inset: 0;
  opacity: 0.42;
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(255, 255, 255, 0.07) 6px 7px),
    linear-gradient(140deg, #1a2029, #07090e);
}

.ftue-contact.busy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: translateX(-100%);
  animation: busyScan 1.4s calc(var(--contact-index) * -120ms) linear infinite;
}

.ftue-contact.available {
  border-color: var(--surge);
  color: #ffffff;
  background: #1c1106;
  box-shadow: 0 0 24px rgba(245, 146, 31, 0.54), inset 0 0 18px rgba(245, 146, 31, 0.1);
  animation: availableCall 1.2s ease-in-out infinite;
}

.ftue-contact.available small {
  color: #ffd29d;
}

.ftue-contact-avatar,
.ftue-contact-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ftue-contact-avatar img {
  object-fit: cover;
}

.ftue-contact.available::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.94));
}

.ftue-crew-prompt {
  margin-top: auto;
  color: #d9e3ed;
  font: 800 13px/1.4 var(--mono);
  text-align: center;
}

.game-spike-slot.ftue-triggered {
  z-index: 3;
  animation: ftueSpikeTrigger 980ms cubic-bezier(0.2, 1.2, 0.25, 1);
}

.ftue-spike-pill {
  border-color: var(--gold);
  box-shadow: 0 0 17px rgba(255, 215, 102, 0.7);
}

.ftue-guam-pill {
  border-color: var(--surge);
  color: #170b02;
  background: #ffac48;
  box-shadow: 0 0 18px rgba(245, 146, 31, 0.85);
}

.ftue-emp {
  position: absolute;
  z-index: 205;
  inset: 0;
  display: none;
  place-items: center;
  overflow: hidden;
  color: #ffffff;
  background: rgba(2, 3, 5, 0.92);
}

.ftue-emp.show {
  display: grid;
}

.emp-rings {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 250px;
  height: 250px;
  transform: translate(-50%, -50%);
}

.emp-rings i {
  position: absolute;
  inset: calc(var(--ring) * 28px);
  border: 3px solid rgba(255, 219, 112, 0.75);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 215, 102, 0.24);
}

.emp-rings i:nth-child(1) { --ring: 0; }
.emp-rings i:nth-child(2) { --ring: 1; }
.emp-rings i:nth-child(3) { --ring: 2; }

.ftue-emp.revealing .emp-rings i {
  animation: empRingReveal 780ms calc(var(--ring) * 90ms) ease-out both;
}

.ftue-emp.charging .emp-rings {
  animation: empCharge 240ms steps(2) infinite;
}

.ftue-emp.charging .emp-rings i {
  border-color: #ffffff;
  box-shadow: 0 0 34px rgba(255, 255, 255, 0.76);
  animation: empRingCharge 700ms calc(var(--ring) * -150ms) ease-in-out infinite;
}

.emp-copy {
  position: relative;
  z-index: 2;
  width: 86%;
  margin-top: 300px;
  text-align: center;
}

.emp-copy p {
  color: var(--gold);
  font: 1000 11px var(--mono);
}

.emp-copy h2 {
  margin-top: 9px;
  font-size: 31px;
  text-shadow: 3px 3px 0 #000, 0 0 24px rgba(255, 255, 255, 0.55);
}

.emp-copy span {
  display: inline-flex;
  margin-top: 12px;
  padding: 7px 9px;
  color: #080808;
  background: #ffffff;
  font: 1000 10px var(--mono);
}

.emp-contacts {
  position: absolute;
  top: 82px;
  left: 28px;
  right: 28px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
}

.emp-contacts i {
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, #37131a, #0a0b0e);
  animation: contactCorrupt 340ms steps(2) infinite;
}

.ftue-emp.detonating {
  animation: empDetonate 760ms ease-out both;
}

.ftue-emp.blackout {
  display: grid;
  background: #000000;
}

.ftue-emp.blackout > * {
  opacity: 0;
}

.ftue-reconnect {
  position: absolute;
  z-index: 230;
  inset: 0;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 28px;
  color: #ffffff;
  background: #000000;
  text-align: center;
}

.ftue-reconnect.show {
  display: grid;
  animation: reconnectScreenIn 240ms steps(2) both;
}

.reconnect-signal {
  height: 78px;
  display: flex;
  align-items: end;
  gap: 8px;
}

.reconnect-signal i {
  width: 12px;
  height: calc(18px + var(--bar) * 11px);
  border: 2px solid #07100d;
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(67, 221, 255, 0.82);
  transform-origin: bottom;
  animation: reconnectSignal 640ms calc(var(--bar) * -90ms) ease-in-out infinite;
}

.reconnect-signal i:nth-child(1) { --bar: 0; }
.reconnect-signal i:nth-child(2) { --bar: 1; }
.reconnect-signal i:nth-child(3) { --bar: 2; }
.reconnect-signal i:nth-child(4) { --bar: 3; }
.reconnect-signal i:nth-child(5) { --bar: 4; }

.ftue-reconnect p {
  margin: 0;
  color: var(--cyan);
  font: 1000 28px var(--mono);
  text-shadow: 3px 3px 0 #000, 0 0 26px rgba(67, 221, 255, 0.9);
}

.ftue-reconnect span {
  color: #bdeff2;
  font: 900 12px var(--mono);
}

.reconnect-progress {
  width: 260px;
  height: 12px;
  overflow: hidden;
  border: 2px solid rgba(67, 221, 255, 0.8);
  background: rgba(67, 221, 255, 0.08);
  box-shadow: 0 0 18px rgba(67, 221, 255, 0.3);
}

.reconnect-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  transform-origin: left;
  animation: reconnectProgress 3s linear both;
}

.ftue-reconnect.connected p,
.ftue-reconnect.connected span {
  color: var(--green);
  text-shadow: 0 0 18px rgba(76, 255, 176, 0.9);
}

.lane-slot.emp-burned {
  animation: crewEmpBurn 560ms ease-in forwards;
}

.game-spike-slot.emp-decompiled {
  animation: spikeEmpDecompile 620ms ease-in forwards;
}

.casino-map-journey {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: none;
  padding: 66px 28px 34px;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(2, 4, 8, 0.96), rgba(4, 7, 12, 0.86)),
    #04070d;
}

.casino-screen.map-return .casino-map-journey {
  display: block;
}

.casino-screen.map-return .casino-selection-head,
.casino-screen.map-return .casino-selection-copy,
.casino-screen.map-return .casino-selection-action {
  opacity: 0;
}

.casino-map-track {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transform: translateY(-720px);
  animation: casinoMapFall 2.15s cubic-bezier(0.22, 0.78, 0.18, 1) forwards;
}

.casino-map-track > i {
  width: 3px;
  height: 92px;
  margin: 0 auto;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.32) 0 7px, transparent 7px 14px);
}

.map-target {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: rgba(8, 12, 19, 0.92);
  box-shadow: 5px 5px 0 #000;
}

.map-target b {
  font-size: 21px;
}

.map-target span {
  margin-top: 5px;
  color: #8c99a8;
  font: 900 9px var(--mono);
}

.map-golden {
  border-color: rgba(255, 215, 102, 0.6);
  filter: grayscale(0.7);
}

.map-sunset {
  border-color: var(--cyan);
  color: #071015;
  background: var(--cyan);
  box-shadow: 5px 5px 0 #000, 0 0 30px rgba(67, 221, 255, 0.6);
}

.map-sunset span {
  color: #15323b;
}

.post-emp .casino-selection-copy > p {
  color: var(--cyan);
}

@keyframes ftueCommsIn {
  from { opacity: 0; transform: translateY(24px); }
}

@keyframes ftuePanelIn {
  from { opacity: 0; clip-path: inset(0 0 100%); }
}

@keyframes busyScan {
  to { transform: translateX(100%); }
}

@keyframes availableCall {
  50% { transform: translateY(-4px); filter: brightness(1.25); box-shadow: 0 0 34px rgba(245, 146, 31, 0.82); }
}

@keyframes ftueSpikeTrigger {
  0% { transform: scale(1); }
  38% { transform: translateY(-12px) scale(1.2) rotate(-3deg); filter: brightness(1.8); box-shadow: 0 0 28px rgba(255, 215, 102, 0.9); }
  70% { transform: translateY(2px) scale(0.97) rotate(1deg); }
}

@keyframes empRingReveal {
  from { opacity: 0; transform: scale(1.5); filter: blur(9px); }
}

@keyframes empCharge {
  50% { transform: translate(-50%, -50%) translateX(5px); }
}

@keyframes empRingCharge {
  50% { transform: scale(0.72); opacity: 0.44; }
}

@keyframes contactCorrupt {
  50% { transform: translateY(3px); filter: invert(1); }
}

@keyframes empDetonate {
  0% { filter: brightness(1); }
  18% { filter: brightness(6) saturate(0); }
  40% { background: #ffffff; color: #000000; }
  100% { background: #020202; }
}

@keyframes crewEmpBurn {
  30% { transform: translateX(5px); filter: invert(1) brightness(2); }
  100% { opacity: 0; transform: scaleY(0.08); filter: grayscale(1) brightness(0); }
}

@keyframes spikeEmpDecompile {
  25% { transform: translateY(-6px); filter: invert(1); }
  100% { opacity: 0; transform: translateY(28px) scaleX(0.1); filter: grayscale(1); }
}

@keyframes casinoMapFall {
  0% { transform: translateY(-720px); }
  72% { transform: translateY(-30px); }
  88% { transform: translateY(8px); }
  100% { transform: translateY(0); }
}

/* FTUE call framing, guided input, and revised reset sequence */

.ftue-prep #prepTargetDescription {
  display: none;
}

.ftue-comms-backdrop {
  position: absolute;
  z-index: 210;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: rgba(0, 0, 0, 0.78);
  transition: opacity 220ms ease;
}

.ftue-comms-backdrop.position-bottom {
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 42%,
    rgba(0, 0, 0, 0.22) 50%,
    rgba(0, 0, 0, 0.88) 68%,
    rgba(0, 0, 0, 0.97) 100%);
}

.ftue-comms-backdrop.position-top {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.97) 0%,
    rgba(0, 0, 0, 0.88) 30%,
    rgba(0, 0, 0, 0.22) 48%,
    transparent 58%,
    transparent 100%);
}

.ftue-comms-backdrop.position-middle {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.9) 28%,
    rgba(0, 0, 0, 0.9) 72%,
    rgba(0, 0, 0, 0.72) 100%);
}

.ftue-comms-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.ftue-comms {
  left: 12px;
  right: 12px;
  bottom: auto;
  min-height: 174px;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: 12px;
  padding: 10px;
}

.ftue-comms.position-top {
  top: 54px;
}

.ftue-comms.position-middle {
  top: 50%;
  transform: translateY(-50%);
}

.ftue-comms.position-bottom {
  bottom: 28px;
}

.ftue-video-call {
  position: relative;
  min-height: 150px;
  overflow: hidden;
  border: 3px solid var(--cyan);
  border-radius: 6px;
  background: #02070a;
  box-shadow: 0 0 18px rgba(67, 221, 255, 0.42), inset 0 0 18px rgba(67, 221, 255, 0.12);
}

.ftue-video-call img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 24%;
}

.ftue-video-call > span {
  position: absolute;
  inset: auto 4px 4px;
  padding: 4px;
  color: #07100d;
  background: var(--green);
  font: 1000 7px var(--mono);
  text-align: center;
}

.ftue-video-call > i {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(67, 221, 255, 0.1) 4px 5px);
  mix-blend-mode: screen;
}

.ftue-comms-body {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
}

.ftue-comms-signal {
  grid-column: auto;
}

#ftueDialogueText {
  min-height: 64px;
  color: #ffffff;
  font: 900 16px/1.35 var(--mono);
  -webkit-text-stroke: 1px #000000;
  paint-order: stroke fill;
  text-shadow: 2px 2px 0 #000000, -1px -1px 0 #000000, 0 0 10px rgba(255, 255, 255, 0.16);
}

#ftueDialogueNext {
  justify-self: end;
  min-height: 40px;
}

.ftue-comms.incoming-call {
  animation: incomingCallPanel 1.05s steps(2) both;
}

.ftue-comms.incoming-call .ftue-video-call {
  animation: incomingVideoLock 1.05s cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.ftue-keyword {
  color: #ff49d7;
  text-shadow: 2px 2px 0 #000000, -1px -1px 0 #000000, 0 0 8px rgba(255, 73, 215, 0.95);
  animation: keywordBreathe 1.15s ease-in-out infinite;
}

.ftue-focus {
  position: relative !important;
  z-index: 218 !important;
  transform: scale(1.075) !important;
  border-color: #ff31d0 !important;
  outline: 3px solid #ff31d0 !important;
  outline-offset: 3px;
  animation: ftueFocusPulse 1.05s ease-in-out infinite !important;
}

.ftue-crew-call {
  z-index: 217;
}

.ftue-required-card {
  border-color: var(--gold) !important;
  box-shadow: 0 0 18px rgba(255, 215, 102, 0.78) !important;
  animation: requiredCardBreathe 1.2s ease-in-out infinite;
}

.ftue-extra-card {
  filter: saturate(0.34) brightness(0.62);
}

.ftue-guided .card-dock {
  opacity: 1;
  filter: none;
}

.ftue-guided .deck-button {
  opacity: 0.26;
}

.ftue-guided #playHand.disabled {
  filter: grayscale(0.7) brightness(0.58);
  box-shadow: 4px 4px 0 #020407;
}

.ftue-prompt-slot {
  border-style: solid !important;
  border-color: #ff31d0 !important;
  color: #ff31d0 !important;
  animation: promptCrewSlot 880ms ease-in-out infinite !important;
}

.ftue-contact.busy {
  justify-content: center;
  text-align: center;
}

.ftue-contact.busy .ftue-contact-avatar {
  filter: grayscale(0.82) brightness(0.42) contrast(1.4);
}

.ftue-contact.busy .ftue-contact-static {
  z-index: 1;
  opacity: 0.56;
}

.ftue-contact.busy b {
  position: absolute;
  z-index: 3;
  left: 6px;
  right: 6px;
  bottom: 9px;
  color: #d4d9df;
  text-shadow: 2px 2px 0 #000;
}

.ftue-contact.busy small {
  position: absolute;
  z-index: 4;
  left: 6px;
  right: 6px;
  top: 50%;
  padding: 5px 2px;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.78);
  box-shadow: 0 0 12px rgba(255, 215, 102, 0.28);
  font-size: 11px;
  transform: translateY(-50%);
}

.float-card.ftue-guam-modded {
  border-color: var(--surge);
  box-shadow: 0 0 30px rgba(245, 146, 31, 0.96), inset 0 0 18px rgba(245, 146, 31, 0.25);
}

.float-card.ftue-guam-modded::after {
  content: "×2";
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 4px 6px;
  border-radius: 4px;
  color: #160a01;
  background: var(--surge);
  box-shadow: 0 0 12px rgba(245, 146, 31, 0.9);
  font: 1000 15px var(--mono);
}

.ftue-patch {
  position: absolute;
  z-index: 230;
  inset: 0;
  display: none;
  place-items: center;
  align-content: center;
  overflow: hidden;
  color: #ffffff;
  background: #03070c;
}

.ftue-patch.show {
  display: grid;
}

.ftue-patch p {
  z-index: 2;
  color: var(--cyan);
  font: 1000 12px var(--mono);
}

.ftue-patch h2 {
  z-index: 2;
  margin-top: 8px;
  font-size: 54px;
  text-shadow: 4px 4px 0 #000, 0 0 28px rgba(67, 221, 255, 0.8);
}

.ftue-patch > span {
  z-index: 2;
  margin-top: 14px;
  color: var(--gold);
  font: 900 11px var(--mono);
}

.patch-tunnel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 280px;
  transform: translate(-50%, -50%);
}

.patch-tunnel i {
  position: absolute;
  inset: calc(var(--patch-ring) * 32px);
  border: 3px solid rgba(67, 221, 255, 0.7);
  transform: rotate(45deg);
  animation: patchTunnel 920ms calc(var(--patch-ring) * -170ms) ease-in-out infinite;
}

.patch-tunnel i:nth-child(1) { --patch-ring: 0; }
.patch-tunnel i:nth-child(2) { --patch-ring: 1; }
.patch-tunnel i:nth-child(3) { --patch-ring: 2; }
.patch-tunnel i:nth-child(4) { --patch-ring: 3; }

.ftue-patch.complete {
  animation: patchComplete 360ms ease-out forwards;
}

#flash.ftue-warning-flash {
  opacity: 1;
  background: rgba(255, 0, 42, 0.7);
  animation: ftueRedWarning 240ms steps(2) infinite;
}

#phone.ftue-red-alert {
  box-shadow: 0 0 70px rgba(255, 0, 42, 0.96), inset 0 0 70px rgba(255, 0, 42, 0.42);
}

.casino-screen.map-choice .casino-map-journey {
  display: block;
}

.casino-screen.map-choice .casino-selection-head,
.casino-screen.map-choice .casino-selection-copy,
.casino-screen.map-choice .casino-selection-action {
  opacity: 0;
  pointer-events: none;
}

.casino-screen.map-choice .casino-map-track {
  transform: translateY(0);
  animation: none;
}

.casino-screen.map-choice .map-target:not(.map-sunset) {
  opacity: 0.28;
  filter: grayscale(1);
  transition: opacity 260ms ease, border-color 260ms ease, transform 260ms ease, background 260ms ease;
}

.casino-screen.map-choice .map-target.marked-locked {
  opacity: 1;
  border-color: #ff002b;
  color: #ffffff;
  background: #780014;
  box-shadow: 5px 5px 0 #000, 0 0 18px #ff002b, inset 0 0 20px rgba(255, 0, 43, 0.6);
  transform: translateX(5px);
  animation: casinoLockStamp 360ms cubic-bezier(0.18, 0.9, 0.25, 1.3) both,
    casinoLockThreat 780ms steps(2) 360ms infinite;
}

.casino-screen.map-choice .map-target.marked-locked::after {
  content: "🔒 LOCKED";
  align-self: flex-end;
  margin-top: -25px;
  padding: 4px 7px;
  color: #ffffff;
  background: #ff002b;
  border: 2px solid #000000;
  box-shadow: 2px 2px 0 #000000;
  font: 1000 12px var(--mono);
}

.casino-screen.map-choice .map-sunset {
  opacity: 0.32;
  pointer-events: none;
  filter: grayscale(1);
  color: #ffffff;
  background: #15191f;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 5px 5px 0 #000;
  text-align: left;
}

.casino-screen.map-choice .map-sunset.available-now {
  opacity: 1;
  pointer-events: auto;
  filter: none;
  color: #071015;
  background: var(--cyan);
  border-color: #ffffff;
  box-shadow: 5px 5px 0 #000, 0 0 34px rgba(67, 221, 255, 0.78);
  animation: sunsetAvailable 1.05s ease-in-out infinite;
}

@keyframes incomingCallPanel {
  0%, 18%, 36% { transform: translateX(-8px); filter: brightness(1.8); }
  9%, 27%, 45% { transform: translateX(8px); }
  60% { transform: scale(0.96); opacity: 0.55; }
  100% { transform: none; opacity: 1; }
}

@keyframes incomingVideoLock {
  from { opacity: 0; transform: scaleY(0.04); filter: brightness(5) grayscale(1); }
  45% { opacity: 1; transform: scaleY(1); filter: brightness(2) grayscale(1); }
  to { filter: none; }
}

@keyframes keywordBreathe {
  50% { color: #ff8ee8; text-shadow: 0 0 14px #ff31d0, 0 0 24px rgba(255, 49, 208, 0.8); }
}

@keyframes ftueFocusPulse {
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 28px #ff31d0, 0 0 54px rgba(255, 49, 208, 0.88), inset 0 0 20px rgba(255, 49, 208, 0.2);
  }
}

@keyframes requiredCardBreathe {
  50% { transform: translateY(-7px) scale(1.04); filter: brightness(1.18); box-shadow: 0 0 28px rgba(255, 215, 102, 1); }
}

@keyframes promptCrewSlot {
  50% { transform: translateY(-8px) scale(1.08); box-shadow: 0 0 30px #ff31d0, 0 0 56px rgba(255, 49, 208, 0.8); }
}

@keyframes patchTunnel {
  0%, 100% { opacity: 0.2; transform: rotate(45deg) scale(0.72); }
  50% { opacity: 1; transform: rotate(135deg) scale(1.06); box-shadow: 0 0 24px rgba(67, 221, 255, 0.8); }
}

@keyframes patchComplete {
  to { opacity: 0; filter: brightness(4); transform: scale(1.08); }
}

@keyframes ftueRedWarning {
  50% { background: rgba(255, 0, 42, 0.18); }
}

@keyframes reconnectScreenIn {
  from { opacity: 0; filter: brightness(4) contrast(2); }
}

@keyframes reconnectSignal {
  50% { transform: scaleY(0.35); opacity: 0.35; filter: brightness(2); }
}

@keyframes reconnectProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes sunsetAvailable {
  50% { transform: translateY(-5px) scale(1.02); filter: brightness(1.18); }
}

@keyframes casinoLockStamp {
  0% { opacity: 0.2; transform: translateX(24px) scale(1.18) rotate(1.5deg); filter: brightness(3); }
  72% { transform: translateX(1px) scale(0.97) rotate(-0.5deg); }
  100% { opacity: 1; transform: translateX(5px) scale(1); filter: none; }
}

@keyframes casinoLockThreat {
  50% { box-shadow: 5px 5px 0 #000, 0 0 30px #ff002b, inset 0 0 28px rgba(255, 0, 43, 0.82); }
}

@media (prefers-reduced-motion: reduce) {
  .casino-screen.map-choice .map-target.marked-locked {
    animation: none;
  }
}