@font-face {
  font-family: "SUSE";
  src: url("assets/SUSE-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --phone-scale: 1;
  --phone-height: 932px;
  --phone-left: 50%;
  --phone-top: 50%;
  --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;
}

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

button:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px rgba(2, 4, 10, 0.92), 0 0 18px rgba(67, 221, 255, 0.65);
}

#phone {
  position: fixed;
  left: var(--phone-left);
  top: var(--phone-top);
  width: 430px;
  height: var(--phone-height);
  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;
}

.fullscreen-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 105;
  width: 52px;
  height: 52px;
  display: none;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(190, 225, 245, 0.34);
  border-radius: 50%;
  background: rgba(4, 8, 14, 0.8);
  color: #ffffff;
  font: 900 24px/1 var(--font);
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.4), 0 0 14px rgba(67, 221, 255, 0.16);
  backdrop-filter: blur(10px);
  touch-action: manipulation;
}

.card-view-mode-toggle {
  position: fixed;
  z-index: 300;
  width: 124px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border: 2px solid rgba(67, 221, 255, 0.64);
  border-radius: 8px;
  background: rgba(5, 11, 18, 0.94);
  color: #8ff8ff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(67, 221, 255, 0.24);
  touch-action: manipulation;
}

.card-view-mode-toggle.panel-mode {
  border-color: rgba(255, 215, 102, 0.82);
  color: #ffe36e;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 215, 102, 0.28);
}

.card-view-mode-toggle:active { transform: scale(0.96); }

.card-view-mode-glyph {
  font: 900 25px/1 var(--mono);
}

.card-view-mode-label {
  font: 1000 9px/1.1 var(--mono);
  letter-spacing: 0.04em;
}

.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: 79;
  left: 50%;
  top: 50%;
  width: 1200px;
  height: 1250px;
  border-radius: 50%;
  transform: translate3d(-50%, -1780px, 0);
  background:
    radial-gradient(ellipse at 50% 10%, #e1fff8 0 1%, #4cffcf 9%, #1ee0cf 27%, #058481 50%, #02383a 72%, #010b10 100%);
  box-shadow:
    0 0 22px rgba(199, 255, 242, 0.98),
    0 0 58px rgba(67, 221, 255, 0.88),
    0 0 110px rgba(76, 255, 176, 0.62);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}

#wave::before,
#wave::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

#wave::before {
  inset: 10px;
  border: 5px solid rgba(168, 255, 238, 0.74);
  box-shadow:
    inset 0 0 34px rgba(67, 221, 255, 0.42),
    0 0 28px rgba(76, 255, 176, 0.48);
}

#wave::after {
  inset: 5%;
  background:
    linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, 0.16) 36%, transparent 54%),
    repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 18px);
  mix-blend-mode: screen;
  opacity: 0.72;
}

#wave.run {
  pointer-events: auto;
  animation: broadcastWipeIn 620ms cubic-bezier(0.45, 0, 0.55, 1) both;
}

#wave.run.exit {
  animation: broadcastWipeOut 700ms linear both;
}

.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; }

.crew-portrait-effect-icon.family-icon-glyph {
  position: absolute;
  z-index: 3;
  left: 8px;
  bottom: 7px;
  width: 38px;
  height: 38px;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 38px;
  opacity: 0.48;
  mix-blend-mode: screen;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.72), 0 2px 3px rgba(0, 0, 0, 0.9);
  filter: grayscale(1) brightness(2.4);
  pointer-events: none;
}

.crew-card .crew-avatar .crew-portrait-effect-icon {
  bottom: 29px;
}

.mini-avatar .crew-portrait-effect-icon {
  left: 6px;
  bottom: 5px;
  width: 26px;
  height: 26px;
  font-size: 26px;
}

.lane-avatar {
  position: relative;
}

.lane-avatar .crew-portrait-effect-icon {
  left: 8px;
  bottom: 8px;
  width: 40px;
  height: 40px;
  font-size: 40px;
}

.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;
  padding: 0;
  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 {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-bottom: 6px;
}

.inert-cards {
  --hand-pan-x: 0px;
  position: relative;
  height: 176px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  padding: 0 6px 6px;
  transform: translateX(var(--hand-pan-x));
  transform-origin: center bottom;
  transition: transform 140ms cubic-bezier(0.2, 0.8, 0.25, 1), gap 180ms ease;
  will-change: transform;
}

.inert-cards.hand-browsing {
  gap: 2px;
}

.poker-card {
  position: relative;
  width: var(--card-width-hand, 74.021px);
  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);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  isolation: isolate;
  transition:
    transform 170ms cubic-bezier(0.2, 0.8, 0.25, 1),
    translate 190ms cubic-bezier(0.2, 0.8, 0.25, 1),
    scale 190ms cubic-bezier(0.2, 0.8, 0.25, 1),
    filter 170ms ease,
    width 190ms cubic-bezier(0.2, 0.8, 0.25, 1),
    height 190ms cubic-bezier(0.2, 0.8, 0.25, 1),
    margin 190ms cubic-bezier(0.2, 0.8, 0.25, 1);
  touch-action: none;
}

.inert-cards .poker-card {
  flex: 0 0 auto;
}

.inert-cards.hand-browsing .poker-card {
  width: var(--card-width-browse, 88.826px);
  height: 120px;
  margin-right: calc(-12px + var(--finger-spacing, 0px));
  margin-left: calc(-12px + var(--finger-spacing, 0px));
}

.poker-card.card-scrub-hover:not(.card-inspecting) {
  transform: translateY(calc(var(--lift, 0px) - 16px)) rotate(var(--rot, 0deg)) scale(1.08);
  z-index: 14;
  filter: brightness(1.14) drop-shadow(0 0 9px rgba(255, 255, 255, 0.2));
}

.inert-cards .poker-card.hand-selected {
  transform: translateY(calc(var(--lift, 0px) - 12px)) rotate(var(--rot, 0deg)) scale(1.03);
  z-index: 24;
  filter: brightness(1.16) drop-shadow(0 0 12px rgba(255, 228, 72, 0.86));
}

.inert-cards .poker-card.hand-selected.card-scrub-hover:not(.card-inspecting) {
  transform: translateY(calc(var(--lift, 0px) - 18px)) rotate(var(--rot, 0deg)) scale(1.07);
  filter: brightness(1.2) drop-shadow(0 0 14px rgba(255, 228, 72, 0.92));
}

.inert-cards.hand-browsing .poker-card:not(.card-inspecting) {
  transform: translateY(calc(var(--lift, 0px) - var(--finger-lift, 0px))) rotate(var(--rot, 0deg));
}

.inert-cards.hand-browsing .poker-card.hand-selected:not(.card-inspecting) {
  transform: translateY(calc(var(--lift, 0px) - 12px - var(--finger-lift, 0px))) rotate(var(--rot, 0deg)) scale(1.03);
}

.inert-cards .poker-card.hand-selected::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: 5;
  border: 3px solid #ffe43f;
  border-radius: 17px;
  box-shadow: 0 0 10px rgba(255, 228, 63, 0.92), 0 0 22px rgba(80, 255, 196, 0.58);
  pointer-events: none;
  animation: handSelectionPulse 1.15s ease-in-out infinite;
}

@keyframes handSelectionPulse {
  0%, 100% { opacity: 0.72; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.35); }
}

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

.card-face {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transform: translateZ(0.2px);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-template-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
  filter: var(--card-effect-glow, none);
}

.card-rank {
  position: absolute;
  left: var(--card-rank-left, 15.835%);
  top: var(--card-rank-top, 10%);
  z-index: 3;
  display: block;
  margin: 0;
  color: var(--suit-color, #444037);
  font-family: "SUSE", sans-serif;
  font-size: var(--card-rank-size-hand, 25.395px);
  font-style: normal;
  font-variation-settings: "wght" 900;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.card-suit {
  position: absolute;
  left: var(--card-suit-left, 16.345%);
  top: var(--card-suit-top, 34.61%);
  z-index: 3;
  display: block;
  width: var(--card-suit-width, 28.33%);
  height: var(--card-suit-height, 27.58%);
  overflow: hidden;
  color: var(--suit-color, #444037);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.card-suit svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  color: inherit;
  fill: currentColor;
  transform: scale(var(--card-suit-scale-x, 1), var(--card-suit-scale-y, 1));
  transform-origin: center;
}

.inert-cards.hand-browsing .poker-card:not(.card-inspecting) .card-rank {
  font-size: var(--card-rank-size-browse, 30.474px);
}

.card-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 32%),
    radial-gradient(circle at 30% 24%, #50545d, #24272e 48%, #101217 100%);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.08), inset 0 0 24px rgba(0, 0, 0, 0.72);
  filter: var(--card-effect-glow, none);
  transform: rotateY(180deg) translateZ(0.2px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-mask-image: var(--card-template-mask);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--card-template-mask);
  mask-mode: alpha;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  pointer-events: none;
}

.has-surge { --card-effect-glow: drop-shadow(0 0 2px rgba(245, 146, 31, 0.92)); }
.has-luck { --card-effect-glow: drop-shadow(0 0 2px rgba(155, 53, 239, 0.92)); }
.has-crypto { --card-effect-glow: drop-shadow(0 0 2px rgba(33, 220, 167, 0.92)); }
.has-surge.has-luck { --card-effect-glow: drop-shadow(0 0 2px rgba(245, 146, 31, 0.88)) drop-shadow(0 0 3px rgba(155, 53, 239, 0.78)); }
.has-surge.has-crypto { --card-effect-glow: drop-shadow(0 0 2px rgba(245, 146, 31, 0.88)) drop-shadow(0 0 3px rgba(33, 220, 167, 0.78)); }
.has-luck.has-crypto { --card-effect-glow: drop-shadow(0 0 2px rgba(155, 53, 239, 0.88)) drop-shadow(0 0 3px rgba(33, 220, 167, 0.78)); }
.has-surge.has-luck.has-crypto { --card-effect-glow: drop-shadow(0 0 2px rgba(245, 146, 31, 0.84)) drop-shadow(0 0 3px rgba(155, 53, 239, 0.76)) drop-shadow(0 0 4px rgba(33, 220, 167, 0.68)); }

/* 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 300ms cubic-bezier(0.18, 0.86, 0.24, 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: var(--card-width-float, 69.594px);
  height: 94px;
  pointer-events: none;
  transition: transform 470ms cubic-bezier(0.2, 0.8, 0.25, 1), opacity 220ms ease;
}

.float-card .card-rank { font-size: var(--card-rank-size-float, 23.871px); }

/* 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: 30px 8px;
  align-content: start;
  overflow-y: auto;
  padding: 34px 4px 20px;
}

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

.deck-card {
  position: relative;
  width: var(--card-width-deck, 66.619px);
  height: 90px;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  isolation: isolate;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.deck-card .card-rank { font-size: var(--card-rank-size-deck, 22.856px); }

.card-focus {
  position: absolute;
  inset: 0;
  z-index: 110;
  display: none;
  background: transparent;
  pointer-events: none;
}

.card-focus.show {
  display: block;
  pointer-events: auto;
  touch-action: none;
}

.card-focus.transient {
  pointer-events: none;
}

.card-focus.transient .card-focus-close {
  display: none;
}

.card-focus.transient .card-tooltip {
  pointer-events: none;
}

#gameScreen.card-inspecting-context::after,
#deckScreen.card-inspecting-context::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 84;
  pointer-events: none;
  background: rgba(0, 2, 8, 0.34);
  animation: cardInspectScrimIn 180ms ease-out;
}

#gameScreen.card-inspecting-context .card-dock {
  position: relative;
  z-index: 90;
  translate: none;
}

.card-inspecting {
  z-index: 96 !important;
  transform: rotate(-2.2deg);
  translate: 0 0;
  scale: 1;
  animation: none !important;
  transition:
    translate 320ms cubic-bezier(0.16, 0.88, 0.25, 1.08),
    scale 320ms cubic-bezier(0.16, 0.88, 0.25, 1.08),
    filter 200ms ease !important;
  filter: drop-shadow(28px 52px 24px rgba(0, 0, 0, 0.6));
  transform-origin: center center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: visible;
}

.hand-card-ghost {
  position: absolute;
  z-index: 4;
  display: block;
  overflow: hidden;
  border: 3px solid rgba(212, 253, 255, 0.96);
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(220, 253, 255, 0.7), rgba(77, 226, 242, 0.42));
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.52),
    inset 0 -24px 30px rgba(42, 201, 224, 0.28),
    0 0 14px rgba(167, 248, 255, 0.76),
    0 0 28px rgba(69, 227, 244, 0.48);
  transform: translateY(var(--ghost-lift, 0px)) rotate(var(--ghost-rot, 0deg));
  transform-origin: center bottom;
  pointer-events: none;
  animation: handCardGhostBreathe 1.45s ease-in-out infinite;
}

.hand-card-ghost::after {
  content: "";
  position: absolute;
  inset: -30% -90%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.82) 48%, transparent 58%);
  transform: translateX(-45%);
  animation: handCardGhostShine 2.25s ease-in-out infinite;
}

@keyframes handCardGhostBreathe {
  0%, 100% { opacity: 0.72; filter: brightness(0.98); }
  50% { opacity: 1; filter: brightness(1.24); }
}

@keyframes handCardGhostShine {
  0%, 34% { transform: translateX(-48%); opacity: 0; }
  46% { opacity: 0.85; }
  66%, 100% { transform: translateX(48%); opacity: 0; }
}

.card-inspecting.inspect-expanded {
  translate: var(--inspect-shift-x, 0) calc(var(--inspect-shift-y, 0px) + var(--inspect-gesture-y, 0px));
  scale: var(--inspect-gesture-scale, var(--inspect-scale, 2));
  animation: inspectedCardShowcase 5s linear infinite !important;
}

.card-inspecting.inspect-expanded .card-template-face {
  animation: inspectedCardFrontFace 5s linear infinite;
}

.card-inspecting.inspect-expanded .card-back {
  animation: inspectedCardBackFace 5s linear infinite;
}

.card-inspecting.inspect-right {
  transform: rotate(2.2deg);
}

.card-inspecting.inspect-expanded.inspect-right {
  animation-name: inspectedCardShowcaseRight !important;
}

.card-inspecting.inspect-expanded.play-gesture-card {
  animation: none !important;
  transition: none !important;
  transform: rotate(-1deg) !important;
  filter: brightness(1.08) drop-shadow(0 20px 24px rgba(0, 0, 0, 0.68));
}

@keyframes inspectedCardShowcase {
  0% { transform: perspective(700px) translateY(0) rotateZ(-2.2deg) rotateY(0deg); }
  17% { transform: perspective(700px) translateY(-3px) rotateZ(-1.8deg) rotateY(0deg); }
  34% { transform: perspective(700px) translateY(0) rotateZ(-2.2deg) rotateY(0deg); }
  51% { transform: perspective(700px) translateY(-3px) rotateZ(-1.8deg) rotateY(0deg); }
  68% { transform: perspective(700px) translateY(0) rotateZ(-2.2deg) rotateY(0deg); animation-timing-function: cubic-bezier(0.2, 0.65, 0.3, 1); }
  88% { transform: perspective(700px) translateY(-1px) rotateZ(-2deg) rotateY(360deg); animation-timing-function: ease-out; }
  92% { transform: perspective(700px) translateY(-2px) rotateZ(-1.9deg) rotateY(352deg); animation-timing-function: ease-out; }
  97% { transform: perspective(700px) translateY(0) rotateZ(-2.1deg) rotateY(364deg); animation-timing-function: ease-out; }
  100% { transform: perspective(700px) translateY(0) rotateZ(-2.2deg) rotateY(360deg); }
}

@keyframes inspectedCardShowcaseRight {
  0% { transform: perspective(700px) translateY(0) rotateZ(2.2deg) rotateY(0deg); }
  17% { transform: perspective(700px) translateY(-3px) rotateZ(1.8deg) rotateY(0deg); }
  34% { transform: perspective(700px) translateY(0) rotateZ(2.2deg) rotateY(0deg); }
  51% { transform: perspective(700px) translateY(-3px) rotateZ(1.8deg) rotateY(0deg); }
  68% { transform: perspective(700px) translateY(0) rotateZ(2.2deg) rotateY(0deg); animation-timing-function: cubic-bezier(0.2, 0.65, 0.3, 1); }
  88% { transform: perspective(700px) translateY(-1px) rotateZ(2deg) rotateY(360deg); animation-timing-function: ease-out; }
  92% { transform: perspective(700px) translateY(-2px) rotateZ(1.9deg) rotateY(352deg); animation-timing-function: ease-out; }
  97% { transform: perspective(700px) translateY(0) rotateZ(2.1deg) rotateY(364deg); animation-timing-function: ease-out; }
  100% { transform: perspective(700px) translateY(0) rotateZ(2.2deg) rotateY(360deg); }
}

@keyframes inspectedCardFrontFace {
  0%, 69.4% { opacity: 1; }
  69.5%, 74.4% { opacity: 0; }
  74.5%, 100% { opacity: 1; }
}

@keyframes inspectedCardBackFace {
  0%, 69.4% { opacity: 0; }
  69.5%, 74.4% { opacity: 1; }
  74.5%, 100% { opacity: 0; }
}

.card-inspecting.inspect-expanded .card-face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(112deg, transparent 34%, rgba(76, 225, 255, 0.48) 43%, rgba(255, 255, 255, 0.96) 50%, rgba(66, 211, 255, 0.58) 57%, transparent 66%);
  background-position: 100% 50%;
  background-size: 260% 180%;
  mix-blend-mode: normal;
  opacity: 0;
  pointer-events: none;
  animation: inspectedCardShine 5s linear infinite;
}

.card-inspecting.inspect-expanded .card-template-face::after {
  -webkit-mask-image: var(--card-template-mask);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--card-template-mask);
  mask-mode: alpha;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

@keyframes inspectedCardShine {
  0% { background-position: 100% 50%; opacity: 0; }
  2% { opacity: 0.72; }
  11% { opacity: 0.82; }
  16%, 100% { background-position: 0 50%; opacity: 0; }
}


.card-focus-close {
  position: absolute;
  top: 52px;
  right: 18px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: rgba(5, 8, 15, 0.84);
  color: #fff;
  font: 800 28px/1 var(--font);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.card-tooltip {
  position: absolute;
  left: var(--card-tooltip-left, 215px);
  top: var(--card-tooltip-top, 0px);
  z-index: 2;
  width: 268px;
  max-width: calc(100% - 152px);
  max-height: none;
  display: none;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: auto;
}

.card-focus.play-gesture-active .card-tooltip {
  opacity: var(--inspect-tooltip-opacity, 1);
  transform: translateX(-50%) translateY(var(--inspect-tooltip-shift, 0px));
  transition: none;
}

.card-focus.play-gesture-active .card-focus-close {
  opacity: var(--inspect-tooltip-opacity, 1);
}

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

.card-tooltip.tooltip-measuring {
  display: grid;
  gap: 6px;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}

.card-focus.panel-only .card-tooltip {
  width: calc(100% - 24px);
  max-width: none;
}

.card-focus.panel-only .card-effect-group {
  min-height: 0;
  border-width: 3px;
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.72), 0 0 24px rgba(67, 221, 255, 0.12);
}

.card-focus.panel-only .card-effect-family {
  padding: 10px 14px 6px;
  font-size: 11px;
}

.card-focus.panel-only .card-effect-group .card-mod-detail {
  margin: 0 12px;
  padding: 10px 2px 12px;
}

.card-focus.panel-only .card-tooltip-effect-icon {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  font-size: 38px;
}

.card-focus.panel-only .card-mod-detail-head { gap: 10px; }

.card-focus.panel-only .card-mod-detail b {
  font-size: 16px;
}

.card-focus.panel-only .card-mod-detail p {
  margin-top: 9px;
  font-size: 16px;
  line-height: 1.42;
}

.card-focus.panel-only .card-effect-group .card-mod-live-values {
  margin: 0 12px 12px;
}

.card-effect-group {
  position: relative;
  min-height: 78px;
  overflow: hidden;
  border: 3px solid rgba(220, 240, 255, 0.32);
  border-radius: 14px;
  background: rgba(13, 16, 20, 0.97);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.48);
}

.card-effect-group.group-SURGE {
  border-color: var(--surge);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.48), 0 0 16px rgba(245, 146, 31, 0.2);
}

.card-effect-group.group-LUCK {
  border-color: var(--luck);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.48), 0 0 16px rgba(155, 109, 255, 0.22);
}

.card-effect-group.group-CRYPTO {
  border-color: var(--crypto);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.48), 0 0 16px rgba(70, 227, 154, 0.2);
}

.card-effect-group.group-LUCK.group-SURGE {
  border-color: #d9846f;
  box-shadow: -5px 0 14px rgba(155, 109, 255, 0.24), 5px 0 14px rgba(245, 146, 31, 0.22);
}

.card-effect-family {
  padding: 6px 10px 4px;
  color: #dbe5ef;
  font: 1000 9px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.72;
}

.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-effect-group .card-mod-detail {
  margin: 0 8px;
  padding: 7px 2px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.card-effect-group .card-mod-detail + .card-mod-detail {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.card-effect-group .card-mod-live-values {
  margin: 0 8px 8px;
}

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

.card-tooltip-effect-icon {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  font-size: 30px;
  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 13px var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

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

.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 {
  --live-color: #ffd23f;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 6px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--live-color) 58%, transparent);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.44);
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--live-color) 8%, transparent);
}

.card-mod-live-values.live-surge { --live-color: var(--surge); }
.card-mod-live-values.live-luck { --live-color: var(--luck); }
.card-mod-live-values.live-crypto { --live-color: var(--crypto); }

.card-mod-live-row {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 6px 7px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--live-color) 12%, rgba(255, 255, 255, 0.03));
  font-family: var(--mono);
  white-space: nowrap;
}

.card-mod-live-row small {
  color: #d3dae5;
  font-size: 10px;
  font-weight: 950;
}

.card-mod-live-row strong {
  flex: 0 0 auto;
  color: #ffffff;
  font-size: 14px;
  text-shadow: 0 0 6px var(--live-color);
}

.sheet {
  position: absolute;
  inset: 0;
  z-index: 78;
  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);
}

.sheet-hero .crew-avatar .crew-portrait-effect-icon {
  left: 5px;
  bottom: 4px;
  width: 22px;
  height: 22px;
  font-size: 22px;
}

.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: 46px;
  height: 46px;
  border-radius: 9px;
  font-size: 30px;
  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 broadcastWipeIn {
  0% {
    visibility: visible;
    opacity: 0;
    transform: translate3d(-50%, -1780px, 0);
  }
  8% { opacity: 1; }
  100% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0);
  }
}

@keyframes broadcastWipeOut {
  0% {
    visibility: visible;
    opacity: 1;
    transform: translate3d(-50%, -50%, 0);
  }
  12% {
    visibility: visible;
    opacity: 1;
    transform: translate3d(-50%, -50%, 0);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  96% {
    visibility: visible;
    opacity: 1;
    transform: translate3d(-50%, 1410px, 0);
  }
  100% {
    visibility: hidden;
    opacity: 0;
    transform: translate3d(-50%, 1410px, 0);
  }
}

@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: translate(-50%, 8px) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes cardInspectScrimIn {
  from { opacity: 0; }
  to { opacity: 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 var(--dock-offset, 0px); }
  50% { translate: 0 calc(var(--dock-offset, 0px) - 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;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .card-inspecting.inspect-expanded {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !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-point,
.score-pill.pill-mult {
  width: 64px;
  height: 42px;
  margin-top: -21px;
}

.score-pill.pill-special.pill-point,
.score-pill.pill-special.pill-mult {
  width: 74px;
}

.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 {
  border-radius: 999px;
  background: linear-gradient(160deg, #fff36a, #ffc21f 54%, #e99100);
  border: 2px solid #fff3a0;
  color: #211500;
  box-shadow: 0 0 14px rgba(255, 205, 38, 0.78), inset 0 1px rgba(255, 255, 255, 0.62);
}
.pill-mult .pill-inner {
  border-radius: 999px;
  background: linear-gradient(160deg, #ff73dc, #e42cc3 52%, #9819b7);
  border: 2px solid #ffb7ed;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(238, 55, 205, 0.76), inset 0 1px rgba(255, 255, 255, 0.38);
}

@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); }

.discard-hand {
  position: relative;
  flex: 0 0 auto;
  min-width: 72px;
  min-height: 40px;
  padding: 8px 10px;
  border: 2px solid #ff6a72;
  border-radius: 8px;
  background: linear-gradient(180deg, #d7283d, #8f1022);
  color: #ffffff;
  font: 1000 10px/1 var(--mono);
  letter-spacing: 0.04em;
  box-shadow: 0 7px 18px rgba(205, 27, 55, 0.32), inset 0 1px rgba(255, 255, 255, 0.24);
  touch-action: manipulation;
}

.discard-hand::before {
  content: "";
  position: absolute;
  inset: -6px -4px;
}

.discard-hand.hidden { display: none; }
.discard-hand:active { transform: translateY(1px) 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; }
@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); }
}

#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); }
}

/* ================= tap selection + played-hand transfer ================= */

/* Gameplay is a top-to-bottom flow: crew, [fill], counter, played area, 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);
}

.play-stage.swipe-ready {
  border-color: rgba(92, 255, 196, 0.95);
  background: rgba(50, 209, 255, 0.14);
  box-shadow: 0 0 28px rgba(80, 255, 196, 0.5), inset 0 0 22px rgba(80, 255, 196, 0.18);
}

.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); }
.stage-cards .poker-card.swipe-drop-target {
  opacity: 0;
  animation: none;
}
.stage-cards .poker-card.swipe-landed {
  animation: swipeCardLand 300ms cubic-bezier(0.18, 1.45, 0.28, 1) !important;
}

.stage-cards .poker-card.play-entry-target {
  visibility: hidden;
}

.stage-cards .poker-card.play-entry-arrived {
  animation: playEntryFlash 260ms ease-out !important;
}

.stage-cards .poker-card.card-discarding {
  z-index: 18;
  animation: discardCard 390ms cubic-bezier(0.4, 0, 0.8, 0.3) forwards;
}

.swipe-play-flight {
  position: fixed !important;
  z-index: 400 !important;
  margin: 0 !important;
  animation: none !important;
  transition: none !important;
  translate: none !important;
  scale: none !important;
  transform-origin: top left !important;
  pointer-events: none !important;
}

@keyframes swipeCardLand {
  0% { transform: translateY(-14px) scale(1.08); filter: brightness(1.8) drop-shadow(0 0 12px rgba(76, 255, 176, 0.75)); }
  58% { transform: translateY(3px) scale(0.97); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes playEntryFlash {
  0% { filter: brightness(1.55) drop-shadow(0 0 11px rgba(76, 255, 176, 0.7)); }
  100% { filter: brightness(1); }
}

@keyframes discardCard {
  0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; filter: brightness(1); }
  28% { transform: translate(0, -10px) rotate(0) scale(1.08); opacity: 1; filter: brightness(1.8) saturate(1.4) drop-shadow(0 0 10px #ff4358); }
  100% { transform: translate(var(--discard-x, 0), 48px) rotate(var(--discard-rot, 12deg)) scale(0.46); opacity: 0; filter: brightness(0.7) saturate(0.35); }
}
@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;
}

.discard-hand.disabled {
  opacity: 0.36;
  filter: saturate(0.35);
  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;
  gap: 8px;
  margin-top: 2px;
  translate: 0 -10px;
}

.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; }
.poker-card.playing-source { visibility: hidden; }

.inert-cards .poker-card.card-discarding {
  z-index: 30;
  animation: discardCard 390ms cubic-bezier(0.4, 0, 0.8, 0.3) forwards !important;
}

.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; }
}

/* Mobile uses the browser's live visual viewport. The logical stage becomes
   shorter before it scales, preserving usable touch targets when browser UI is visible. */
body.mobile-stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #070a12;
}

#phone.mobile-device {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#phone.mobile-device::before { display: none; }

body.mobile-stage .fullscreen-button {
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  display: grid;
}

body.mobile-stage .card-view-mode-toggle {
  top: max(8px, env(safe-area-inset-top));
  right: max(68px, calc(env(safe-area-inset-right) + 68px));
  left: auto !important;
  width: 124px;
  height: 52px;
  padding: 0 10px;
  border-radius: 8px;
}

#phone.card-inspection-active .fullscreen-button {
  opacity: 0;
  pointer-events: none;
}

body.mobile-stage .screen,
body.mobile-stage .collection,
body.mobile-stage .deck-screen {
  padding-top: max(64px, calc(env(safe-area-inset-top) + 8px));
  padding-right: max(14px, env(safe-area-inset-right));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  padding-left: max(14px, env(safe-area-inset-left));
}

body.mobile-stage .screen { overflow: hidden; }
body.mobile-stage .prep-spacer { min-height: 24px; }

body.mobile-stage .casino-card {
  min-height: 150px;
  margin-top: 14px;
  padding: 12px;
}

body.mobile-stage .rules-strip { margin-top: 8px; }
body.mobile-stage .rules-strip article { min-height: 82px; }

body.mobile-stage .crew-lane { padding-bottom: 10px; }
body.mobile-stage .lane-slot { height: 124px; }
body.mobile-stage .run-status-row { margin-top: 6px; }
body.mobile-stage .ai-hp { margin-top: 5px; }
body.mobile-stage .score-area {
  height: 84px;
  min-height: 84px;
  margin-top: 3px;
}

body.mobile-stage .play-stage {
  min-height: 92px;
  margin-top: 5px;
}

body.mobile-stage .card-dock { margin-top: 4px; }
body.mobile-stage .inert-cards { height: 116px; }
body.mobile-stage .hand-actions {
  flex-basis: 46px;
  min-height: 46px;
  margin-top: 0;
  margin-bottom: 6px;
  translate: 0 -10px;
}

body.mobile-stage .deck-grid {
  gap: 16px 6px;
  overflow: hidden;
  padding: 18px 2px 4px;
}

body.mobile-stage .deck-card {
  width: var(--card-width-mobileDeck, 50.327px);
  height: 68px;
}

body.mobile-stage .deck-card .card-rank { font-size: var(--card-rank-size-mobileDeck, 17.269px); }

body.mobile-stage .collection-grid {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.mobile-stage .sheet-card {
  overflow: visible;
}