/*
  Rack-it's acid-punk skin. The foundation stylesheet owns layout and
  accessibility; this layer deliberately turns the interface into a loud,
  asymmetrical arcade cabinet.
*/

:root {
  --ink: #08090d;
  --wood: #1e25ce;
  --wood-light: #ff3f82;
  --cream: #fffbe7;
  --paper: #fffbe7;
  --brass: #eaff38;
  --brass-hot: #f7ff65;
  --felt: #00a98f;
  --felt-deep: #00685f;
  --pink: #ff3f82;
  --red: #ff4f35;
  --cyan: #22f2d0;
  --cobalt: #2536f5;
  --acid: #eaff38;
  --display: "Futura Condensed ExtraBold", "DIN Condensed", Impact, sans-serif;
  --body: "Avenir Next Condensed", "Franklin Gothic Condensed", sans-serif;
}

body {
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 63, 130, 0.42), transparent 22%),
    radial-gradient(circle at 91% 14%, rgba(37, 54, 245, 0.5), transparent 25%),
    linear-gradient(118deg, transparent 0 57%, rgba(234, 255, 56, 0.07) 57% 58%, transparent 58%),
    #08090d;
}

body::before {
  position: fixed;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.13) 1px, transparent 1.5px);
  background-size: 12px 12px;
  opacity: 0.22;
  mask-image: linear-gradient(120deg, black, transparent 72%);
}

.room-glow {
  inset: -30svh -20vw;
  height: 90svh;
  background:
    conic-gradient(from 220deg at 50% 50%, transparent, rgba(255, 63, 130, 0.2), transparent 25%, rgba(37, 54, 245, 0.26), transparent 55%),
    radial-gradient(ellipse, rgba(234, 255, 56, 0.12), transparent 60%);
  filter: blur(42px);
}

.grain {
  opacity: 0.19;
  mix-blend-mode: overlay;
}

.cabinet {
  width: min(1760px, calc(100vw - 18px));
  padding-top: 8px;
}

.masthead {
  position: relative;
  z-index: 90;
  grid-template-columns: 1fr auto;
  min-height: 96px;
  padding: 0 12px;
  overflow: visible;
}

.masthead::after {
  position: absolute;
  z-index: -1;
  top: 10px;
  right: 120px;
  color: transparent;
  content: "SINK / STACK / SURVIVE";
  font-family: var(--display);
  font-size: clamp(42px, 6vw, 96px);
  font-style: italic;
  font-weight: 950;
  letter-spacing: -0.05em;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
  transform: rotate(-2deg);
  white-space: nowrap;
}

.brand-lockup {
  grid-column: 1;
  justify-self: start;
  gap: 12px;
  text-align: left;
  transform: translateY(6px) rotate(-1.5deg);
}

.brand-lockup > div {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.brand-lockup .eyebrow {
  order: 2;
  width: 88px;
  margin: 14px 0 0;
  padding: 5px 6px;
  color: #fff;
  background: var(--cobalt);
  box-shadow: 4px 4px 0 #000;
  line-height: 1.15;
}

.brand-lockup h1 {
  margin: 0;
  color: var(--pink);
  font-family: var(--display);
  font-size: clamp(58px, 7vw, 104px);
  font-style: italic;
  font-weight: 950;
  line-height: 0.76;
  letter-spacing: -0.065em;
  text-shadow:
    3px 3px 0 #000,
    6px 6px 0 var(--acid),
    9px 9px 0 #000;
}

.brand-crown {
  display: none;
}

.header-actions {
  grid-column: 2;
  align-items: center;
}

.mix-controls {
  display: grid;
  grid-template-columns: 58px 88px;
  gap: 3px 7px;
  padding: 5px 8px;
  border: 3px solid #000;
  color: #05060a;
  background: #fffbe7;
  box-shadow: 4px 4px 0 #000;
  transform: rotate(-0.5deg);
}

.mix-controls label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.mix-controls output {
  min-width: 19px;
  color: var(--cobalt);
  text-align: right;
}

.mix-controls input[type="range"] {
  width: 88px;
  height: 14px;
  margin: 0;
  accent-color: var(--pink);
  cursor: pointer;
}

.icon-button,
.sound-button {
  height: 43px;
  border: 3px solid #000;
  color: #08090d;
  background: var(--acid);
  box-shadow: 4px 4px 0 #000;
}

.icon-button:hover,
.sound-button:hover {
  border-color: #000;
  color: #08090d;
  background: #fff;
  box-shadow: 7px 7px 0 var(--pink);
  transform: translate(-2px, -2px) rotate(-1deg);
}

.icon-button {
  border-radius: 0;
  font-family: var(--display);
  font-size: 24px;
}

.sound-button {
  border-radius: 0;
  font-weight: 950;
}

.sound-bars i {
  width: 3px;
  background: var(--cobalt);
}

.settings-shell {
  position: relative;
  z-index: 90;
}

.settings-button svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
  transition: transform 180ms steps(3, end);
}

.settings-button[aria-expanded="true"] {
  color: #fff;
  background: var(--pink);
  box-shadow: 7px 7px 0 var(--cyan);
  transform: translate(-2px, -2px) rotate(-2deg);
}

.settings-button[aria-expanded="true"] svg {
  transform: rotate(52deg);
}

.settings-scrim {
  position: fixed;
  z-index: 80;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(8, 9, 13, 0.54);
  cursor: default;
}

.settings-scrim[hidden],
.settings-panel[hidden],
.ultra-aim-overlay[hidden] {
  display: none;
}

.settings-panel {
  position: fixed;
  z-index: 95;
  top: max(58px, calc(env(safe-area-inset-top) + 48px));
  right: max(12px, env(safe-area-inset-right));
  width: min(390px, calc(100vw - 24px));
  padding: 12px;
  border: 5px solid #000;
  color: #08090d;
  background:
    linear-gradient(135deg, transparent 0 72%, rgba(37, 54, 245, 0.11) 72% 74%, transparent 74%),
    var(--cream);
  box-shadow: 10px 11px 0 var(--pink), 15px 16px 0 #000;
  font-family: var(--body);
  text-align: left;
  transform: rotate(0.45deg);
}

.settings-panel::after {
  position: absolute;
  right: 22px;
  bottom: -10px;
  width: 88px;
  height: 18px;
  content: "";
  background: rgba(34, 242, 208, 0.78);
  mix-blend-mode: multiply;
  transform: rotate(-3deg);
}

.settings-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 9px;
  padding: 2px 2px 9px;
  border-bottom: 4px solid #000;
}

.settings-panel__header > div {
  display: grid;
}

.settings-panel__header span {
  color: var(--cobalt);
  font-family: var(--display);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.settings-panel__header strong {
  font-family: var(--display);
  font-size: 31px;
  font-style: italic;
  font-weight: 950;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

#settings-close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0 0 3px;
  border: 3px solid #000;
  color: #fff;
  background: var(--cobalt);
  box-shadow: 3px 3px 0 #000;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 9px 2px;
}

.setting-row--ultra {
  margin-top: 8px;
  border-top: 3px solid #000;
}

.setting-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.setting-copy strong {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 950;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.setting-copy span {
  color: rgba(8, 9, 13, 0.68);
  font-size: 11px;
  font-weight: 700;
}

.setting-toggle {
  display: flex;
  min-width: 112px;
  height: 36px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border: 3px solid #000;
  color: #fff;
  background: var(--cobalt);
  box-shadow: 4px 4px 0 #000;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.setting-toggle[aria-pressed="false"] {
  color: #08090d;
  background: #b8b4a7;
}

.setting-toggle[aria-pressed="false"] .sound-bars i {
  height: 2px;
  animation: none;
  background: #4f4c47;
}

.settings-panel .mix-controls {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 4px 8px;
  margin: 1px 2px 4px;
  padding: 7px 8px;
  border-width: 3px;
  background: var(--acid);
  box-shadow: 4px 4px 0 #000;
  transform: rotate(-0.25deg);
}

.settings-panel .mix-controls input[type="range"] {
  width: 100%;
}

.cabinet-switch {
  display: grid;
  grid-template-columns: 66px;
  justify-items: center;
  gap: 3px;
  cursor: pointer;
}

.cabinet-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.cabinet-switch > span {
  position: relative;
  display: block;
  width: 66px;
  height: 30px;
  border: 3px solid #000;
  background: #b8b4a7;
  box-shadow: 3px 3px 0 #000;
}

.cabinet-switch > span i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border: 2px solid #000;
  background: var(--cream);
  transition: 120ms steps(2, end);
}

.cabinet-switch input:checked + span {
  background: var(--cyan);
}

.cabinet-switch input:checked + span i {
  left: 39px;
  background: var(--pink);
}

.cabinet-switch input:focus-visible + span {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
}

.cabinet-switch b {
  color: var(--cobalt);
  font-family: var(--display);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.settings-note {
  position: relative;
  z-index: 1;
  margin: 7px 2px 1px;
  padding: 7px 9px;
  border: 2px solid #000;
  color: #fff;
  background: #08090d;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.3;
}

.setting-row--aim-line {
  margin-top: 8px;
  border-top: 3px solid #000;
}

.aim-line-swatches {
  display: flex;
  gap: 7px;
}

.aim-line-swatches button {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 3px solid #000;
  background: var(--swatch);
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
}

.aim-line-swatches button[aria-checked="true"] {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
  box-shadow: 1px 1px 0 #000;
  transform: translate(2px, 2px);
}

.aim-line-swatches button:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
}

.run-board {
  position: relative;
  z-index: 5;
  grid-template-columns: minmax(250px, 1fr) minmax(390px, 1.55fr) minmax(210px, 0.72fr);
  min-height: 84px;
  margin: 4px 0 -4px;
  border: 5px solid #000;
  background: #000;
  box-shadow: 8px 9px 0 rgba(255, 63, 130, 0.85);
  transform: rotate(0.15deg);
}

.blind-plaque {
  position: relative;
  padding: 11px 23px;
  overflow: hidden;
  border: 0;
  color: #08090d;
  background: var(--pink);
}

.blind-plaque::after {
  position: absolute;
  right: -22px;
  bottom: -35px;
  color: rgba(0, 0, 0, 0.13);
  content: "◆";
  font-size: 105px;
  transform: rotate(18deg);
}

.blind-plaque span,
.blind-plaque small,
.shots-plaque > span,
.score-readout span,
.target-readout span {
  position: relative;
  z-index: 1;
  color: currentColor;
  font-weight: 950;
}

.blind-plaque span {
  display: inline-block;
  margin-bottom: 3px;
  padding: 2px 6px;
  color: #fff;
  background: #000;
  transform: translateY(-5px) rotate(-2deg);
}

.blind-plaque strong {
  position: relative;
  z-index: 1;
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 34px);
  font-style: italic;
  font-weight: 950;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.blind-plaque small {
  color: rgba(0, 0, 0, 0.74);
  font-family: var(--body);
  font-weight: 800;
}

.score-cluster {
  padding: 5px 50px 18px;
  color: #08090d;
  background:
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.045) 0 4px, transparent 4px 12px),
    var(--acid);
}

.score-cluster::before {
  width: 4px;
  height: 48px;
  background: #000;
  transform: rotate(8deg);
}

.score-readout strong,
.target-readout strong {
  color: #08090d;
  font-family: var(--display);
  font-size: 46px;
  font-style: italic;
  font-weight: 950;
  letter-spacing: -0.055em;
  text-shadow: none;
}

.score-readout strong {
  color: var(--cobalt);
  text-shadow: 2px 2px 0 #fff;
}

.progress-track {
  right: 36px;
  bottom: 8px;
  left: 36px;
  height: 8px;
  border: 2px solid #000;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.progress-track > div {
  border-radius: 0;
  background: var(--pink);
  box-shadow: none;
}

.shots-plaque {
  position: relative;
  align-items: center;
  padding: 12px 18px;
  overflow: hidden;
  border: 0;
  color: #fff;
  background: var(--cobalt);
}

.shots-plaque::before {
  position: absolute;
  inset: 0;
  content: "";
  background: repeating-radial-gradient(circle at 120% 50%, transparent 0 9px, rgba(255, 255, 255, 0.13) 10px 11px);
}

.shots-plaque > span,
.shot-pips {
  position: relative;
}

.shot-pips {
  gap: 9px;
}

.shot-pips i {
  width: 16px;
  height: 16px;
  border: 3px solid #000;
  background: #fff;
  box-shadow: 3px 3px 0 #000;
}

.shot-pips i.is-spent {
  opacity: 1;
  background: var(--pink);
  box-shadow: none;
  transform: scale(0.72) rotate(45deg);
}

.game-layout {
  position: relative;
  grid-template-columns: minmax(180px, 0.21fr) minmax(620px, 1fr) minmax(180px, 0.21fr);
  gap: 0;
  align-items: center;
  margin-top: 0;
}

.side-panel {
  z-index: 4;
  min-height: 78%;
  padding: 14px;
  border: 5px solid #000;
  color: #08090d;
  background: var(--acid);
  box-shadow: 9px 9px 0 #000;
}

.side-panel--left {
  margin-right: 8px;
  transform: rotate(-1.2deg);
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.side-panel--right {
  margin-left: -17px;
  color: #fff;
  background: var(--pink);
  box-shadow: -9px 9px 0 #000;
  transform: rotate(1.1deg);
}

.panel-heading {
  gap: 8px;
  margin-bottom: 12px;
  color: currentColor;
  font-family: var(--display);
  font-size: 14px;
  font-style: italic;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.panel-heading i {
  height: 4px;
  background: currentColor;
}

.shot-card {
  min-height: 223px;
  padding: 17px 12px;
  border: 4px solid #000;
  color: #fff;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.11) 1px, transparent 1.5px) 0 0 / 9px 9px,
    var(--cobalt);
  box-shadow: 7px 7px 0 var(--pink);
}

.shot-card::before {
  display: none;
}

.shot-card__overline {
  display: inline-block;
  padding: 2px 5px;
  color: #000;
  background: #fff;
  font-weight: 900;
}

.shot-card > strong {
  margin: 18px 0 12px;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(24px, 2vw, 34px);
  font-style: italic;
  font-weight: 950;
  letter-spacing: -0.035em;
  text-shadow: 3px 3px 0 #000;
  text-transform: uppercase;
}

.score-equation {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 900;
}

.score-equation span b,
.score-equation span:last-child b {
  color: var(--acid);
  font-family: var(--display);
  font-size: 27px;
  font-style: italic;
}

.score-equation span:last-child b {
  color: var(--pink);
  text-shadow: 2px 2px 0 #000;
}

.shot-total {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin-top: 11px;
  padding: 2px 8px;
  color: #000;
  background: var(--acid);
  font-family: var(--display);
  font-size: 33px;
  font-style: italic;
  font-weight: 950;
  text-align: center;
  transform: rotate(-2deg);
}

.shot-total.is-long-value {
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.run-meter {
  border: 4px solid #000;
  border-radius: 0;
  color: rgba(0, 0, 0, 0.68);
  background: #fff;
  box-shadow: 5px 5px 0 #000;
  font-weight: 800;
  transition: none;
  animation: none;
}

.run-meter__label {
  color: #000;
  font-weight: 950;
}

.run-meter strong {
  color: #000;
  font-style: italic;
  font-weight: 950;
  letter-spacing: -0.04em;
  transition: none;
}

.run-meter em {
  font-weight: 900;
}

.run-meter.is-live {
  border-color: #000;
  background: var(--acid);
}

.run-meter[data-tier="hot"] {
  background: var(--pink);
  color: rgba(255, 255, 255, 0.92);
  transform: rotate(-1deg);
}

.run-meter[data-tier="hot"] .run-meter__label {
  color: #fff;
}

.run-meter[data-tier="hot"] strong {
  color: #fff;
  -webkit-text-stroke: 1.5px #000;
  text-shadow: 3px 3px 0 #000;
}

.run-meter[data-tier="hot"] small {
  color: rgba(255, 255, 255, 0.75);
}

.run-meter[data-tier="blazing"] {
  background: repeating-linear-gradient(135deg, var(--pink) 0 14px, #ff7a2f 14px 28px);
  color: #fff;
  box-shadow:
    5px 5px 0 #000,
    0 0 22px rgba(255, 63, 130, 0.6);
  transform: rotate(-1deg);
  animation: run-meter-march 0.9s linear infinite;
}

.run-meter[data-tier="blazing"] .run-meter__label {
  color: #000;
  background: var(--acid);
  padding: 1px 4px;
  justify-self: start;
}

.run-meter[data-tier="blazing"] strong {
  color: var(--acid);
  -webkit-text-stroke: 1.5px #000;
  text-shadow: 3px 3px 0 #000;
}

.run-meter[data-tier="blazing"] small {
  color: rgba(255, 255, 255, 0.85);
}

@keyframes run-meter-march {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 39.6px 0;
  }
}

.table-stage {
  z-index: 2;
  overflow: visible;
  border: 7px solid #000;
  border-radius: 0;
  background: var(--cobalt);
  box-shadow:
    0 0 0 5px var(--pink),
    13px 15px 0 #000,
    -6px -6px 0 var(--acid);
  transform: rotate(-0.15deg);
}

.table-stage.is-pocket-hit {
  animation: cabinet-slam 440ms steps(2, end);
}

@keyframes cabinet-slam {
  0% { filter: saturate(1) brightness(1); transform: translate(0, 0) rotate(-0.15deg); }
  12% { filter: saturate(2.2) brightness(1.7); transform: translate(-5px, 3px) rotate(-0.8deg) scale(1.008); }
  26% { transform: translate(5px, -2px) rotate(0.55deg) scale(1.004); }
  45% { filter: saturate(1.5) brightness(1.2); transform: translate(-3px, 2px) rotate(-0.35deg); }
  70% { transform: translate(2px, -1px) rotate(0.15deg); }
  100% { filter: none; transform: rotate(-0.15deg); }
}

.table-stage::before {
  display: none;
}

.marquee-lights {
  inset: -5px;
  border: 3px solid var(--acid);
  border-radius: 0;
}

.aim-hint {
  bottom: 16px;
  padding: 9px 15px;
  border: 3px solid #000;
  border-radius: 0;
  color: #000;
  background: var(--acid);
  box-shadow: 5px 5px 0 #000;
  font-weight: 950;
  transform: translateX(-50%) rotate(-1deg);
}

.aim-hint.is-hidden {
  transform: translate(-50%, 8px) rotate(-1deg);
}

.mouse-glyph {
  border: 2px solid #000;
  border-radius: 0;
}

.mouse-glyph::after {
  background: #000;
}

.power-rack {
  color: #fff;
  font-weight: 950;
}

.power-rack > div {
  height: 12px;
  border: 3px solid #000;
  border-radius: 0;
  background: #fff;
}

.power-rack i {
  border-radius: 0;
  background: linear-gradient(90deg, var(--cyan), var(--acid) 55%, var(--pink));
}

.table-stage.is-fine-tuning #game-canvas {
  cursor: ew-resize;
  touch-action: none;
}

.ultra-aim-overlay {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  touch-action: none;
}

.ultra-console {
  --ultra-helper-rest-shadow: 5px 5px 0 #000;
  --ultra-helper-attention-shadow: 0 0 0 4px var(--acid), 10px 11px 0 var(--pink), 14px 15px 0 #000;
  position: absolute;
  bottom: 20px;
  left: 50%;
  display: flex;
  width: max-content;
  max-width: calc(100% - 24px);
  align-items: center;
  gap: 11px;
  padding: 8px 9px 8px 12px;
  border: 3px solid #fffbe7;
  color: #fffbe7;
  background: rgba(8, 9, 13, 0.88);
  box-shadow: var(--ultra-helper-rest-shadow);
  font-family: var(--display);
  pointer-events: none;
  touch-action: none;
  transform: translateX(-50%);
  transform-origin: center bottom;
}

.ultra-console::before {
  position: absolute;
  top: -24px;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 12px solid var(--acid);
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  content: "";
  filter: drop-shadow(3px 3px 0 #000);
  opacity: 0;
  transform: translate(-50%, -12px);
}

.ultra-aim-overlay:not([hidden]):not(.is-cancel-armed) .ultra-console {
  animation: ultra-helper-arrive 1050ms cubic-bezier(0.16, 0.86, 0.2, 1) 1 both;
}

.ultra-aim-overlay:not([hidden]):not(.is-cancel-armed) .ultra-console::before {
  animation: ultra-helper-pointer 1050ms ease-out 1 both;
}

.ultra-aim-overlay:not([hidden]):not(.is-cancel-armed) .ultra-console > small {
  animation: ultra-helper-copy-cue 1050ms ease-out 1 both;
}

.ultra-lock-label {
  color: var(--acid);
  font-size: 12px;
  font-style: italic;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#ultra-power-value {
  color: var(--cyan);
  font-size: 22px;
  font-style: italic;
  font-weight: 950;
}

#ultra-angle-value {
  min-width: 58px;
  color: #fffbe7;
  font-size: 18px;
  font-style: italic;
  font-weight: 950;
  text-align: center;
}

.ultra-cancel {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 3px solid #000;
  color: #08090d;
  background: var(--pink);
  box-shadow: 3px 3px 0 #000;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
}

.ultra-console > small {
  padding-left: 10px;
  border-left: 1px solid rgba(255, 251, 231, 0.45);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.ultra-help-cancel {
  display: none;
}

.ultra-aim-overlay.is-cancel-armed .ultra-console {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 63, 130, 0.94);
  box-shadow: var(--ultra-helper-rest-shadow);
}

.ultra-aim-overlay.is-cancel-armed #ultra-power-value,
.ultra-aim-overlay.is-cancel-armed #ultra-angle-value {
  color: #fff;
}

.ultra-aim-overlay.is-cancel-armed .ultra-help-default {
  display: none;
}

.ultra-aim-overlay.is-cancel-armed .ultra-help-cancel {
  display: inline;
}

@keyframes ultra-helper-arrive {
  0% {
    opacity: 0;
    box-shadow: var(--ultra-helper-rest-shadow);
    transform: translate(-50%, 18px) scale(0.94);
  }

  34% {
    opacity: 1;
    box-shadow: var(--ultra-helper-attention-shadow);
    transform: translate(-50%, -4px) scale(1.045);
  }

  64% {
    box-shadow: var(--ultra-helper-attention-shadow);
    transform: translate(-50%, 1px) scale(0.995);
  }

  100% {
    opacity: 1;
    box-shadow: var(--ultra-helper-rest-shadow);
    transform: translateX(-50%) scale(1);
  }
}

@keyframes ultra-helper-pointer {
  0%, 12% {
    opacity: 0;
    transform: translate(-50%, -14px);
  }

  30%, 66% {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, 5px);
  }
}

@keyframes ultra-helper-copy-cue {
  0%, 18% {
    color: #fffbe7;
    opacity: 0.45;
  }

  38%, 66% {
    color: var(--acid);
    opacity: 1;
    text-shadow: 0 0 8px rgba(234, 255, 56, 0.85);
  }

  100% {
    color: #fffbe7;
    opacity: 1;
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ultra-aim-overlay:not([hidden]):not(.is-cancel-armed) .ultra-console,
  .ultra-aim-overlay:not([hidden]):not(.is-cancel-armed) .ultra-console::before,
  .ultra-aim-overlay:not([hidden]):not(.is-cancel-armed) .ultra-console > small {
    animation: none;
  }
}

.callout {
  width: 96%;
  color: var(--acid);
  font-family: var(--display);
  font-size: clamp(58px, 8vw, 132px);
  font-style: italic;
  font-weight: 950;
  letter-spacing: -0.065em;
  -webkit-text-stroke: 5px #000;
  text-shadow:
    6px 6px 0 var(--pink),
    11px 11px 0 #000;
}

.empty-chalk {
  min-height: 190px;
  border: 4px dashed #000;
  color: #000;
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(-1deg);
}

.side-panel--right .empty-chalk {
  border-color: #000;
  color: #000;
  background: var(--acid);
}

.empty-chalk > span {
  border: 4px solid #000;
  border-radius: 0;
  color: #fff;
  background: var(--cobalt);
  box-shadow: 4px 4px 0 #000;
}

.chalk-mini {
  min-height: 76px;
  border: 4px solid #000;
  color: #000;
  background: var(--chalk-accent);
  box-shadow: 6px 6px 0 #000;
  transform: rotate(-1deg);
}

.chalk-mini:nth-child(even) {
  transform: rotate(1.4deg);
}

.chalk-mini__icon {
  border: 3px solid #000;
  color: #fff;
  background: var(--cobalt);
  box-shadow: 3px 3px 0 #000;
}

.chalk-mini strong {
  font-size: 16px;
  font-style: italic;
  font-weight: 950;
  text-transform: uppercase;
}

.chalk-mini span {
  color: #000;
  font-weight: 950;
}

.run-stat {
  border-color: #000;
  color: #000;
  font-weight: 900;
}

.run-stat strong {
  color: #fff;
  font-size: 25px;
  text-shadow: 3px 3px 0 #000;
}

.footer-line {
  padding: 18px 7px 0;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 900;
}

.footer-line i {
  color: var(--acid);
}

.modal-backdrop {
  background:
    linear-gradient(116deg, rgba(255, 63, 130, 0.17) 0 18%, transparent 18% 75%, rgba(234, 255, 56, 0.12) 75%),
    rgba(2, 3, 6, 0.93);
  backdrop-filter: blur(9px) saturate(1.4);
}

.modal-card {
  overflow: visible;
  border: 7px solid #000;
  color: #08090d;
  background: var(--cobalt);
  box-shadow:
    15px 15px 0 var(--acid),
    20px 20px 0 #000;
}

.is-open .modal-card {
  transform: rotate(-0.7deg);
}

.intro-card {
  max-width: 870px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.13) 1.5px, transparent 2px) 0 0 / 13px 13px,
    var(--cobalt);
}

.modal-card.intro-card > p.intro-tagline {
  margin: -6px auto 18px;
  color: var(--pink);
  font-family: var(--display);
  font-size: clamp(20px, 2.5vw, 30px);
  font-style: italic;
  font-weight: 950;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.intro-card::before,
.reward-card::before {
  top: -35px;
  left: -45px;
  width: 130px;
  height: 75px;
  border: 5px solid #000;
  background: var(--pink);
  transform: rotate(-14deg);
}

.intro-card::after,
.reward-card::after {
  right: -42px;
  bottom: -28px;
  width: 150px;
  height: 64px;
  border: 5px solid #000;
  background: var(--acid);
  transform: rotate(8deg);
}

.intro-sun {
  z-index: 0;
  top: 50%;
  width: 460px;
  height: 460px;
  border: 0;
  background: repeating-conic-gradient(from 0deg, rgba(0, 0, 0, 0.09) 0 7deg, transparent 7deg 15deg);
}

.modal-card .eyebrow {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 5px 8px;
  color: #000;
  background: var(--acid);
  box-shadow: 4px 4px 0 #000;
  font-weight: 950;
  transform: rotate(-2deg);
}

.modal-card h2 {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(60px, 8.5vw, 118px);
  font-style: italic;
  font-weight: 950;
  letter-spacing: -0.07em;
  -webkit-text-stroke: 3px #000;
  text-shadow: 7px 7px 0 #000;
}

.modal-card h2 em {
  color: var(--pink);
  text-shadow:
    5px 5px 0 #000,
    9px 9px 0 var(--acid);
}

.modal-card > p:not(.eyebrow) {
  position: relative;
  z-index: 1;
  max-width: 580px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  text-shadow: 2px 2px 0 #000;
}

.intro-rules {
  position: relative;
  z-index: 1;
}

.intro-rules span {
  padding: 5px 8px;
  border: 3px solid #000;
  color: #000;
  background: #fff;
  box-shadow: 4px 4px 0 #000;
  font-weight: 950;
}

.intro-rules span:nth-child(2) {
  background: var(--pink);
  transform: rotate(1.5deg);
}

.intro-rules span:nth-child(3) {
  background: var(--acid);
  transform: rotate(-1.5deg);
}

.intro-rules b {
  color: var(--cobalt);
  font-weight: 950;
}

.hero-button {
  z-index: 2;
  min-width: 270px;
  height: 66px;
  border: 5px solid #000;
  color: #000;
  background: var(--acid);
  box-shadow: 8px 8px 0 var(--pink), 13px 13px 0 #000;
  font-family: var(--display);
  font-size: 18px;
  font-style: italic;
  font-weight: 950;
  letter-spacing: -0.01em;
  transform: rotate(-1deg);
}

.hero-button:hover {
  box-shadow: 4px 4px 0 var(--pink), 8px 8px 0 #000;
  transform: translate(4px, 4px) rotate(1deg);
}

.hero-button i {
  border-color: #000;
  font-size: 27px;
}

.hero-button > .button-arrow {
  position: relative;
  font-size: 0;
}

.hero-button > .button-arrow::before {
  width: 17px;
  height: 3px;
  content: "";
  background: currentColor;
  transform: rotate(-45deg);
}

.hero-button > .button-arrow::after {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  content: "";
}

.save-stamp {
  position: relative;
  z-index: 2;
  display: inline-flex;
  margin: -9px auto 3px;
  padding: 5px 10px;
  border: 3px solid #000;
  color: #fff;
  background: var(--pink);
  box-shadow: 4px 4px 0 #000;
  font-family: var(--display);
  font-size: 12px;
  font-style: italic;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(1deg);
}

.save-stamp[hidden] {
  display: none;
}

.menu-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.reset-save-button {
  display: inline-flex;
  align-items: center;
  min-width: 154px;
  height: 48px;
  padding: 0 7px 0 16px;
  border: 4px solid #000;
  color: #fff;
  background: #090a10;
  box-shadow: 5px 5px 0 var(--pink);
  cursor: pointer;
  font-family: var(--display);
  font-size: 13px;
  font-style: italic;
  font-weight: 950;
  text-transform: uppercase;
  transform: rotate(1deg);
  transition: 140ms steps(2, end);
}

.reset-save-button i {
  display: grid;
  width: 30px;
  height: 30px;
  margin-left: auto;
  place-items: center;
  border: 3px solid #000;
  color: #000;
  background: var(--pink);
  font-size: 21px;
  font-style: normal;
}

.reset-save-button:hover,
.reset-save-button.is-confirming {
  color: #000;
  background: var(--pink);
  box-shadow: 5px 5px 0 var(--acid), 9px 9px 0 #000;
  transform: translate(-2px, -2px) rotate(-1deg);
}

.reset-save-button.is-confirming i {
  background: var(--acid);
}

.intro-card > small {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.68);
  font-weight: 900;
}

@media (max-width: 620px) {
  .menu-actions {
    flex-direction: column;
    gap: 14px;
  }

  .reset-save-button {
    min-width: 180px;
  }
}

/* The entry screen keeps one hierarchy at every size: title, byline, actions,
   and only the recovered-run stamp when a save exists. */
.modal-card.intro-card {
  display: grid;
  min-height: min(560px, calc(100dvh - 48px));
  align-content: center;
  justify-items: center;
  gap: 12px;
  background: linear-gradient(106deg, var(--pink) 0 19%, var(--cobalt) 19% 80%, var(--acid) 80% 100%);
}

.intro-card::before,
.intro-card::after,
.intro-card .intro-sun,
.intro-card > .eyebrow,
.intro-card > #start-copy,
.intro-card > .intro-rules,
.intro-card > #menu-note {
  display: none;
}

.intro-card #start-title {
  order: 1;
  margin: 0;
  padding: 0 10px 14px;
  color: var(--pink);
  font-size: clamp(100px, 13vw, 168px);
  line-height: 0.76;
  white-space: nowrap;
  -webkit-text-stroke: 4px #000;
  text-shadow: 8px 8px 0 var(--acid), 14px 14px 0 #000;
}

.modal-card.intro-card > p.intro-tagline {
  order: 2;
  margin: 0 0 12px;
  padding: 6px 13px 7px;
  border: 4px solid #000;
  color: #000;
  background: var(--acid);
  box-shadow: 5px 5px 0 #000;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1;
  text-shadow: none;
}

.intro-card .menu-actions {
  order: 3;
  margin: 0;
}

.intro-card .reset-save-button {
  color: #fff;
  background: var(--cobalt);
  box-shadow: 5px 5px 0 var(--acid), 9px 9px 0 #000;
}

.intro-card .save-stamp {
  order: 4;
  margin: 8px 0 0;
  transform: none;
}

.intro-card > small {
  display: none;
}

.reward-card {
  background: var(--pink);
}

.reward-card h2,
.howto-card h2 {
  font-size: clamp(54px, 6vw, 86px);
}

.reward-choice {
  min-height: 280px;
  border: 5px solid #000;
  color: #000;
  background: var(--chalk-accent);
  box-shadow: 8px 8px 0 #000;
}

.reward-choice:nth-child(1) {
  transform: rotate(-1.8deg);
}

.reward-choice:nth-child(2) {
  transform: translateY(-9px) rotate(1deg);
}

.reward-choice:nth-child(3) {
  transform: rotate(2deg);
}

.reward-choice:hover,
.reward-choice:focus-visible,
.reward-choice:nth-child(2):hover {
  border-color: #000;
  box-shadow: 4px 4px 0 #000;
  transform: translate(5px, 5px) rotate(-1deg) scale(1.025);
}

.reward-choice__icon {
  border: 5px solid #000;
  color: #fff;
  background: var(--cobalt);
  box-shadow: 6px 6px 0 #000;
}

.reward-choice strong {
  font-size: 29px;
  font-style: italic;
  font-weight: 950;
  text-transform: uppercase;
}

.reward-choice b {
  display: inline-block;
  padding: 3px 6px;
  color: #fff;
  background: #000;
}

.reward-choice p {
  color: rgba(0, 0, 0, 0.76);
  font-weight: 800;
}

.gameover-card {
  background: var(--pink);
}

.final-score {
  position: relative;
  z-index: 1;
  border: 4px solid #000;
  color: #000;
  background: #fff;
  box-shadow: 5px 5px 0 #000;
  font-weight: 950;
}

.final-score strong {
  color: var(--cobalt);
  font-size: 38px;
  font-style: italic;
}

.howto-card {
  color: #000;
  background: var(--acid);
}

.howto-card > p:not(.eyebrow) {
  color: #000;
  text-shadow: none;
}

.howto-card li {
  border: 4px solid #000;
  color: #fff;
  background: var(--cobalt);
  box-shadow: 5px 5px 0 var(--pink);
}

.howto-card li::before {
  color: var(--acid);
  font-weight: 950;
}

.howto-card li b {
  color: #fff;
  font-family: var(--display);
  font-style: italic;
  font-weight: 950;
  text-transform: uppercase;
}

.howto-card li span {
  color: rgba(255, 255, 255, 0.75);
}

.modal-close {
  border: 4px solid #000;
  border-radius: 0;
  color: #000;
  background: var(--pink);
  box-shadow: 4px 4px 0 #000;
  font-weight: 950;
}

@keyframes card-hit {
  0% { transform: scale(0.82) rotate(-6deg); filter: saturate(2) brightness(1.5); }
  48% { transform: scale(1.08) rotate(3deg); }
  100% { transform: scale(1); }
}

@keyframes callout-pop {
  0% { opacity: 0; transform: translate(-50%, -35%) scale(0.32) rotate(-8deg); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.17) rotate(2deg); }
  32% { opacity: 1; transform: translate(-50%, -50%) scale(0.96) rotate(-1deg); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -72%) scale(1.1) rotate(1deg); }
}

/* Modal chrome stays fluid (modals live outside the scaled cabinet). */
@media (max-width: 780px) {
  .modal-card {
    box-shadow: 8px 8px 0 var(--acid), 13px 13px 0 #000;
  }
}

@media (max-width: 520px) {
  .modal-card h2 {
    font-size: 47px;
    -webkit-text-stroke-width: 2px;
  }

  .intro-rules span {
    display: block;
  }
}

.table-stage.is-hard-shot {
  animation: hard-launch 330ms steps(2, end);
}

.table-stage.is-charging .marquee-lights {
  border-color: var(--acid);
  box-shadow:
    inset 0 0 calc(8px + var(--charge) * 34px) rgba(234, 255, 56, 0.46),
    0 0 calc(6px + var(--charge) * 26px) rgba(255, 63, 130, 0.52);
}

.table-stage.is-max-charge {
  animation: max-charge-rattle 90ms steps(2, end) infinite;
}

.table-stage.is-overdrive .marquee-lights {
  border-width: calc(3px + var(--overdrive) * 5px);
  box-shadow:
    inset 0 0 calc(22px + var(--overdrive) * 58px) rgba(234, 255, 56, 0.62),
    0 0 calc(18px + var(--overdrive) * 44px) rgba(255, 63, 130, 0.7);
}

.table-stage.is-overdrive .power-rack > div {
  background: repeating-linear-gradient(135deg, #fff 0 8px, var(--pink) 8px 16px);
}

.power-rack.is-visible > div {
  box-shadow: 0 0 calc(8px + var(--charge, 0) * 28px) var(--pink);
}

/* Compact screen-print kit: the art carries identity, hover carries detail. */
.chalk-case {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}

.chalk-case .empty-chalk {
  grid-column: 1 / -1;
  grid-template-columns: 48px minmax(0, 1fr);
  min-height: 96px;
  padding: 14px;
  place-items: center start;
  gap: 12px;
  text-align: left;
  transform: rotate(-0.5deg);
}

.chalk-case .empty-chalk > span {
  width: 42px;
  height: 42px;
  margin: 0;
}

.chalk-case .empty-chalk p {
  margin: 0;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.chalk-mini {
  position: relative;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  padding: 5px;
  overflow: visible;
  border: 3px solid #000;
  background: var(--chalk-accent);
  box-shadow: 4px 4px 0 #000;
  cursor: help;
}

.chalk-mini:nth-child(even) {
  transform: rotate(1deg);
}

.chalk-mini:hover,
.chalk-mini:focus-visible {
  z-index: 20;
  outline: 3px solid #fff;
  transform: translate(-2px, -3px) rotate(-1deg) scale(1.06);
}

.chalk-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  border: 0;
  background-color: #fffbe7;
  background-image: url("/assets/images/powerup-atlas-04.png");
  background-repeat: no-repeat;
  background-size: 500% 500%;
  background-position: var(--art-x) var(--art-y);
  image-rendering: auto;
}

.shot-card.is-hot .shot-total {
  animation: shot-total-lock 460ms cubic-bezier(0.2, 1.35, 0.4, 1) 1 both;
  transform-origin: center;
}

@keyframes shot-total-lock {
  0%, 100% {
    filter: none;
    scale: 1;
    box-shadow: none;
  }

  46% {
    filter: brightness(1.18);
    scale: 1.07;
    box-shadow: 0 0 0 3px var(--pink), 5px 5px 0 #000;
  }
}

.chalk-mini .chalk-level {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: block;
  margin: 0;
  padding: 3px 5px;
  border: 2px solid #000;
  color: #fff;
  background: #2536f5;
  font-family: var(--display);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.chalk-mini .chalk-mini__tooltip {
  position: absolute;
  z-index: 40;
  top: 50%;
  right: calc(100% + 13px);
  display: none;
  width: 210px;
  margin: 0;
  padding: 12px;
  border: 4px solid #000;
  color: #05060a;
  background: #fffbe7;
  box-shadow: 7px 7px 0 var(--chalk-accent), 11px 11px 0 #000;
  line-height: 1.25;
  text-align: left;
  transform: translateY(-50%);
}

.chalk-mini:hover .chalk-mini__tooltip,
.chalk-mini:focus-visible .chalk-mini__tooltip {
  display: block;
}

.chalk-mini .chalk-mini__tooltip strong,
.chalk-mini .chalk-mini__tooltip b,
.chalk-mini .chalk-mini__tooltip span {
  display: block;
  margin: 0;
  color: #05060a;
}

.chalk-mini .chalk-mini__tooltip strong {
  font-family: var(--display);
  font-size: 20px;
  font-style: italic;
  text-transform: uppercase;
}

.chalk-mini .chalk-mini__tooltip b {
  margin: 5px 0;
  color: #2536f5;
  font-size: 10px;
  text-transform: uppercase;
}

.chalk-mini .chalk-mini__tooltip span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* Miss-based contracts and the full-width contraband loadout dock. */
.game-layout {
  grid-template-columns: minmax(176px, 0.16fr) minmax(700px, 1fr);
  align-items: start;
}

.play-stack {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 20px;
  justify-self: center;
}

.shots-plaque {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.misses-copy {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.misses-copy span {
  max-width: 52px;
  color: #fff;
  font-size: 9px;
  font-weight: 950;
  line-height: 0.95;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.misses-copy strong {
  color: var(--acid);
  font-family: var(--display);
  font-size: clamp(42px, 4vw, 64px);
  font-style: italic;
  font-weight: 950;
  line-height: 0.72;
  -webkit-text-stroke: 3px #000;
  text-shadow: 4px 4px 0 var(--pink), 7px 7px 0 #000;
}

.shot-pips {
  align-items: center;
  margin: 0;
}

.shot-pips i {
  position: relative;
  width: 19px;
  height: 19px;
  background: var(--acid);
}

.shot-pips i.is-spent {
  background: #0a0b11;
  transform: rotate(45deg) scale(0.78);
}

.shot-pips i.is-spent::after {
  position: absolute;
  inset: 5px 1px;
  content: "";
  background: var(--pink);
  transform: rotate(-45deg);
}

.kit-dock {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr) 116px;
  align-items: stretch;
  gap: 16px;
  min-height: 126px;
  padding: 14px 17px;
  border: 6px solid #000;
  color: #05060a;
  background:
    linear-gradient(105deg, transparent 0 70%, rgba(255, 255, 255, 0.2) 70% 71%, transparent 71% 100%),
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0 3px, transparent 3px 16px),
    var(--acid);
  box-shadow: 10px 11px 0 var(--pink), 16px 17px 0 #000;
  transform: none;
}

.kit-dock::before {
  position: absolute;
  top: -13px;
  right: 7%;
  width: 154px;
  height: 19px;
  border: 4px solid #000;
  content: "EQUIPPED / LIVE";
  color: #fff;
  font-family: var(--display);
  font-size: 11px;
  font-style: italic;
  font-weight: 950;
  line-height: 19px;
  letter-spacing: 0.08em;
  text-align: center;
  background: var(--cobalt);
  transform: rotate(-1.4deg);
}

.kit-dock__heading {
  position: relative;
  padding: 12px 11px;
  border: 4px solid #000;
  color: #fff;
  background: var(--cobalt);
  box-shadow: 5px 5px 0 #000;
  transform: rotate(-0.8deg);
}

.kit-dock__heading .panel-heading {
  margin: 7px 0 4px;
  color: var(--acid);
  font-size: 21px;
}

.kit-dock__heading .panel-heading i {
  display: none;
}

.kit-dock__heading p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.kit-dock__stamp {
  display: inline-block;
  padding: 2px 5px;
  border: 2px solid #000;
  color: #000;
  background: var(--pink);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(2deg);
  cursor: pointer;
  font-family: inherit;
}

.kit-dock__stamp:hover,
.kit-dock__stamp:focus-visible {
  color: #fff;
  background: var(--cobalt);
  outline: 3px solid var(--acid);
  outline-offset: 2px;
}

.kit-dock .chalk-case {
  display: flex;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 11px;
  min-width: 0;
  max-width: 100%;
  padding: 3px 0 7px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--pink) #05060a;
  scrollbar-width: thin;
  touch-action: pan-x;
}

.kit-dock .chalk-mini {
  flex: 0 0 58px;
  width: 58px;
}

.kit-dock .chalk-case .empty-chalk {
  display: flex;
  min-width: 260px;
  min-height: 88px;
  flex: 1 1 300px;
  padding: 13px 17px;
  border-style: solid;
  background: #fffbe7;
}

.kit-dock .chalk-mini .chalk-mini__tooltip {
  top: auto;
  right: auto;
  bottom: calc(100% + 13px);
  left: 50%;
  transform: translateX(-50%);
}

.kit-dock .run-stat {
  position: relative;
  inset: auto;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 10px;
  border: 4px solid #000;
  color: #fff;
  background: var(--pink);
  box-shadow: 5px 5px 0 #000;
  text-align: center;
  transform: rotate(1deg);
}

.kit-dock .run-stat span {
  font-weight: 950;
}

.kit-dock .run-stat strong {
  color: var(--acid);
  font-size: clamp(24px, 2.4vw, 39px);
  font-style: italic;
  line-height: 1;
  -webkit-text-stroke: 2px #000;
  text-shadow: 3px 3px 0 #000;
}

.last-chance {
  position: absolute;
  z-index: 14;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(94%, 900px);
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.4) rotate(-7deg);
}

.last-chance span,
.last-chance small {
  position: relative;
  z-index: 2;
  padding: 4px 10px;
  border: 4px solid #000;
  color: #000;
  background: var(--acid);
  box-shadow: 5px 5px 0 #000;
  font-weight: 950;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.last-chance span {
  margin-bottom: 12px;
}

.last-chance strong {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(70px, 11vw, 190px);
  font-style: italic;
  font-weight: 950;
  line-height: 0.72;
  letter-spacing: -0.07em;
  text-align: center;
  text-transform: uppercase;
  -webkit-text-stroke: 7px #000;
  text-shadow: 9px 9px 0 var(--pink), 16px 16px 0 #000;
  white-space: nowrap;
}

.last-chance small {
  color: #fff;
  background: var(--cobalt);
  transform: rotate(1.5deg);
}

.last-chance.is-live {
  animation: last-chance-takeover 2.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.table-stage.is-last-chance .marquee-lights {
  border-color: var(--pink);
  box-shadow: inset 0 0 42px rgba(255, 63, 130, 0.72), 0 0 28px rgba(255, 63, 130, 0.82);
  animation: danger-frame 680ms steps(2, end) infinite;
}

.table-stage.is-last-chance::after {
  position: absolute;
  z-index: 6;
  inset: 0;
  border: 12px solid transparent;
  content: "";
  background: repeating-linear-gradient(135deg, var(--pink) 0 12px, #000 12px 24px) border-box;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@keyframes last-chance-takeover {
  0% { opacity: 0; filter: blur(10px); transform: translate(-50%, -50%) scale(0.35) rotate(-8deg); }
  12% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1.14) rotate(2deg); }
  24% { transform: translate(-50%, -50%) scale(0.96) rotate(-1deg); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(1.08) rotate(1deg); }
}

@keyframes danger-frame {
  50% { filter: brightness(1.45) saturate(1.7); }
}

.reward-choice .chalk-art {
  width: 104px;
  height: 104px;
  margin: 0 auto 18px;
  border: 5px solid #000;
  background-color: #fffbe7;
  box-shadow: 6px 6px 0 #000;
}

@keyframes hard-launch {
  0% { transform: rotate(-0.15deg); }
  18% { transform: translate(-7px, 2px) rotate(-0.8deg) scale(1.008); }
  42% { transform: translate(5px, -1px) rotate(0.55deg); }
  70% { transform: translate(-2px, 1px) rotate(-0.25deg); }
  100% { transform: rotate(-0.15deg); }
}

@keyframes max-charge-rattle {
  0% { transform: translate(-1px, 0) rotate(-0.2deg); }
  100% { transform: translate(1px, 0) rotate(-0.1deg); }
}

/* ---- The fixed-shape cabinet ----
   The whole game is composed ONCE at a golden 1446x930 design size (the pool
   table at its native 1200x650), then uniformly scaled to fit the viewport by
   the fit script in index.html (CSS zoom on .cabinet). Nothing inside the
   cabinet may use viewport units or media queries: the shape never changes,
   only the scale. Slack around the cabinet letterboxes onto the room glow.
   Modals stay outside the scaled shell and remain fluid. */
html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  display: grid;
  height: 100dvh;
  place-items: center;
}

.cabinet {
  display: grid;
  grid-template-rows: 56px auto minmax(0, 1fr) 20px;
  width: 1446px;
  height: 960px;
  min-height: 0;
  padding: 6px 0 0;
  overflow: visible;
}

.masthead {
  min-height: 56px;
  overflow: visible;
}

.masthead::after {
  top: 2px;
  right: 90px;
  font-size: 56px;
}

.brand-lockup h1 {
  font-size: 42px;
}

/* Condensed HUD strip: tight plaques, no dead acid. */
.run-board {
  min-height: 72px;
  margin: 4px 0 8px;
  grid-template-columns: 320px minmax(0, 1fr) 252px;
}

.blind-plaque {
  padding: 8px 18px;
}

.blind-plaque strong {
  font-size: 25px;
}

.score-cluster {
  grid-template-columns: minmax(0, auto) 4px minmax(0, auto);
  justify-content: center;
  column-gap: 52px;
  padding: 6px 40px 16px;
}

.score-cluster::before {
  height: 40px;
}

.score-readout,
.target-readout {
  min-width: 150px;
}

.score-readout strong,
.target-readout strong {
  font-size: 38px;
}

.misses-copy strong {
  font-size: 46px;
}

.shot-card > strong {
  font-size: 28px;
}

/* The shot card absorbs the side rail's slack instead of leaving dead acid. */
.side-panel--left .shot-card {
  display: grid;
  flex: 1 1 auto;
  align-content: center;
}

.callout {
  font-size: 96px;
}

.last-chance strong {
  font-size: 140px;
}

/* Side rail + play column add up to exactly the cabinet width. */
.game-layout {
  height: 100%;
  min-height: 0;
  grid-template-columns: 232px 1200px;
  gap: 14px;
}

.play-stack {
  width: 1200px;
  height: 100%;
  max-width: none;
  min-height: 0;
  grid-template-rows: 650px minmax(0, 1fr);
  gap: 12px;
}

.table-slot {
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: visible;
}

.table-slot .table-stage {
  width: 1200px;
}

/* The loadout drawer matches the table width and fills the leftover row.
   Explicit grid areas: the drawer never wraps or grows past its slot. */
.kit-dock {
  min-height: 0;
  padding: 10px 14px;
  grid-template-columns: 150px minmax(0, 1fr) 110px;
  grid-template-rows: minmax(0, 1fr) auto;
}

.kit-dock__heading {
  grid-area: 1 / 1 / -1 / 2;
}

.kit-dock .chalk-case {
  grid-area: 1 / 2 / 2 / 3;
  align-self: start;
}

.kit-dock .kit-meters {
  grid-area: 2 / 2 / 3 / 3;
  margin-top: 4px;
}

.kit-dock .run-stat {
  grid-area: 1 / 3 / -1 / 4;
}

.kit-dock__heading {
  padding: 8px 10px;
}

.kit-dock__heading .panel-heading {
  margin: 5px 0 0;
  font-size: 18px;
}

.kit-dock__heading p {
  display: none;
}

.kit-dock .chalk-case .empty-chalk {
  min-height: 0;
}

.kit-dock .run-stat {
  padding: 6px;
}

.kit-dock .run-stat strong {
  font-size: 28px;
}

/* Bankroll mirror for the compact tier; the side rail owns it on desktop. */
.kit-dock .cash-chip {
  display: none;
}

.status-line {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.footer-line {
  position: relative;
  z-index: 9;
  height: 20px;
  justify-content: flex-end;
  padding: 2px 6px 0;
}

/* ---- Chalk expansion (50-card pool) ---- */

.chalk-art--glyph {
  position: relative;
  display: grid;
  place-items: center;
  background-color: var(--chalk-accent, #eaff38);
  background-image:
    radial-gradient(rgba(5, 6, 10, 0.22) 1.5px, transparent 1.6px),
    linear-gradient(145deg, rgba(255, 251, 231, 0.5), transparent 48%),
    linear-gradient(var(--chalk-accent, #eaff38), var(--chalk-accent, #eaff38));
  background-size: 8px 8px, auto, auto;
  background-position: 0 0, center, center;
}

.chalk-art--glyph i {
  font-family: var(--display, Impact, sans-serif);
  font-style: italic;
  font-weight: 950;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -0.5px;
  color: #05060a;
  text-shadow: 2px 2px 0 rgba(255, 251, 231, 0.9);
  transform: rotate(-6deg);
}

.reward-choice .chalk-art--glyph i {
  font-size: 34px;
  text-shadow: 3px 3px 0 rgba(255, 251, 231, 0.9);
}

.chalk-mini.is-understudy {
  box-shadow: 0 0 0 3px #f7c8ff, 5px 5px 0 #000;
}

.reward-choice__rarity {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 7px;
  border: 2px solid #05060a;
  font-family: var(--display, Impact, sans-serif);
  font-style: normal;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #05060a;
  background: #d8d4c4;
}

.reward-choice__rarity--uncommon {
  background: #6ce8ff;
}

.reward-choice__rarity--rare {
  background: #ff65bd;
  color: #fffbe7;
}

.kit-meters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  min-height: 0;
}

.kit-meter {
  display: inline-block;
  padding: 3px 7px;
  border: 2px solid #05060a;
  background: var(--meter-accent, #eaff38);
  color: #05060a;
  font-family: var(--display, Impact, sans-serif);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.5px;
  box-shadow: 2px 2px 0 #05060a;
  transform: rotate(-0.6deg);
}

.power-rack.has-goldilocks > div {
  position: relative;
}

.power-rack.has-goldilocks > div::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 55%;
  width: 10%;
  border-inline: 2px dashed #ffd97a;
  background: rgba(255, 217, 122, 0.28);
  pointer-events: none;
}

/* ── Economy: bankroll, Table Stakes den, Pool Shark's shop ───────────── */

.cash-dock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 3px solid #000;
  text-align: center;
  transform: rotate(-1deg);
}

.cash-dock > span {
  color: #08090d;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.cash-dock strong {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1em;
  color: var(--pink);
  font-family: var(--display);
  font-size: 72px;
  font-style: italic;
  font-weight: 950;
  line-height: 0.82;
  -webkit-text-stroke: 3px #000;
  text-shadow: 3px 3px 0 var(--cobalt), 6px 6px 0 #000;
}

.currency-sign,
.currency-amount {
  display: inline-block;
}

/* Vendor portraits (generated character art) */

.vendor-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 8px;
  text-align: left;
}

.vendor-lockup h2 {
  margin: 0;
}

img.vendor-portrait {
  display: block;
  width: clamp(84px, 12svh, 128px);
  height: clamp(84px, 12svh, 128px);
  flex: 0 0 auto;
  object-fit: cover;
  background: #05060a;
  border: 5px solid #000;
  box-shadow: 6px 6px 0 #000;
  transform: rotate(-3deg);
}

/* ── Table Stakes: the snake's den ── */

.stakes-card {
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  height: min(88svh, 820px);
  padding: clamp(16px, 3svh, 32px);
  overflow: visible;
}

.den-snake {
  position: absolute;
  top: clamp(-72px, -8svh, -40px);
  left: clamp(-66px, -4.5vw, -30px);
  height: clamp(210px, 36svh, 330px);
  width: auto;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(6px 8px 0 rgba(0, 0, 0, 0.5));
  animation: den-loom 5.5s ease-in-out infinite alternate;
}

@keyframes den-loom {
  from {
    transform: rotate(-4.5deg) translateY(0);
  }
  to {
    transform: rotate(-2deg) translateY(9px);
  }
}

.den-header {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 22px);
  margin-bottom: clamp(10px, 2svh, 18px);
  padding-left: clamp(120px, 14vw, 210px);
  text-align: left;
}

.den-title {
  min-width: 0;
  flex: 1;
}

.den-title h2 {
  margin: 0;
  font-size: clamp(34px, 5.5svh, 58px);
}

.den-title .eyebrow {
  margin-bottom: 2px;
}

.den-title > p:not(.eyebrow) {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 700;
}

.den-bankroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.32);
  border: 4px solid #000;
  box-shadow: 5px 5px 0 #000;
  transform: rotate(1.6deg);
}

.den-bankroll span {
  color: #fff;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.den-bankroll b {
  color: var(--brass-hot);
  font-family: var(--display);
  font-size: clamp(26px, 4svh, 40px);
  font-style: italic;
  -webkit-text-stroke: 1.5px #000;
  text-shadow: 2px 2px 0 var(--pink);
}

.felt {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 2svh, 18px);
  padding: clamp(14px, 2.6svh, 26px);
  padding-left: clamp(56px, 7vw, 110px);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.1), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, 0.42), transparent 62%),
    var(--felt);
  border: 5px solid #000;
  box-shadow: inset 0 0 0 3px rgba(255, 251, 231, 0.22), inset 0 12px 34px rgba(0, 0, 0, 0.38), 7px 7px 0 #000;
}

.stakes-commit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.4vw, 24px);
}

.stakes-commit[hidden],
.stakes-bet[hidden],
.stakes-game[hidden],
.stakes-result[hidden] {
  display: none;
}

.stakes-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: clamp(14px, 2.4svh, 24px) 18px;
  cursor: pointer;
  text-align: center;
  color: #000;
  background: var(--cream);
  border: 5px solid #000;
  box-shadow: 8px 8px 0 #000;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.stakes-option__card {
  display: grid;
  place-items: center;
  width: clamp(46px, 7.5svh, 66px);
  aspect-ratio: 5 / 7;
  margin-bottom: 2px;
  background: #fffbe7;
  color: #000;
  font-family: var(--display);
  font-size: clamp(22px, 4svh, 34px);
  font-weight: 950;
  border: 3px solid #000;
  border-radius: 7px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
  transform: rotate(-4deg);
}

.stakes-option__card--back {
  background:
    repeating-linear-gradient(45deg, var(--cobalt) 0 7px, #101a9e 7px 14px);
  box-shadow: inset 0 0 0 3px #fffbe7, 3px 3px 0 rgba(0, 0, 0, 0.55);
}

.stakes-option__card--blackjack {
  position: relative;
  display: block;
  width: clamp(76px, 12svh, 94px);
  aspect-ratio: 1.18;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.blackjack-tease-card {
  position: absolute;
  display: block;
  width: clamp(46px, 7svh, 58px);
  aspect-ratio: 5 / 7;
  border: 3px solid #000;
  border-radius: 6px;
  color: #10121c;
  background: #fffbe7;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
  font-style: normal;
}

.blackjack-tease-card b {
  position: absolute;
  top: 4px;
  left: 5px;
  font-family: var(--display);
  font-size: clamp(15px, 2.4svh, 20px);
  font-weight: 950;
  line-height: 1;
}

.blackjack-tease-card em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(22px, 4svh, 32px);
  font-style: normal;
}

.blackjack-tease-card--king {
  bottom: 0;
  left: 5px;
  transform: rotate(-9deg);
}

.blackjack-tease-card--ace {
  top: 0;
  right: 4px;
  z-index: 1;
  color: var(--red);
  transform: rotate(8deg);
}

.stakes-option strong {
  font-family: var(--display);
  font-size: clamp(20px, 3.4svh, 27px);
  font-style: italic;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.stakes-option__sub {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.stakes-option--deal {
  background: var(--acid);
}

.stakes-option:hover:not(:disabled),
.stakes-option:focus-visible:not(:disabled) {
  transform: translate(-2px, -3px) rotate(-0.7deg);
  box-shadow: 11px 12px 0 #000;
}

.stakes-option:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: saturate(0.4);
}

/* Bet stage */

.stakes-bet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2svh, 18px);
  padding: clamp(8px, 1.6svh, 16px) clamp(12px, 3vw, 40px);
}

.stakes-bet__selector {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px;
  width: min(300px, 100%);
  min-height: 120px;
  overflow: hidden;
  border: 5px solid #000;
  background: var(--acid);
  box-shadow: 7px 7px 0 #000;
}

.stakes-bet__readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 12px;
}

.stakes-bet__readout span {
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.stakes-bet__readout output {
  color: #fffbe7;
  font-family: var(--display);
  font-size: clamp(44px, 8svh, 72px);
  font-style: italic;
  font-weight: 950;
  line-height: 0.9;
  -webkit-text-stroke: 2.5px #000;
  text-shadow: 4px 4px 0 var(--pink), 7px 7px 0 #000;
}

.stakes-bet__stepper {
  display: grid;
  grid-template-rows: 1fr 1fr;
  border-left: 4px solid #000;
}

.stakes-bet__stepper button {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  border-bottom: 2px solid #000;
  color: #fff;
  background: var(--cobalt);
  cursor: pointer;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 950;
}

.stakes-bet__stepper button:last-child {
  border-bottom: 0;
  color: #000;
  background: var(--pink);
}

.stakes-bet__stepper button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.stepper-chevron {
  display: block;
  width: 0;
  height: 0;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
}

.stepper-chevron--up {
  border-bottom: 10px solid currentColor;
}

.stepper-chevron--down {
  border-top: 10px solid currentColor;
}

.stakes-bet input[type="range"]:not([hidden]) {
  width: min(520px, 100%);
  height: 14px;
  accent-color: var(--acid);
  cursor: pointer;
}

.stakes-bet__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stakes-bet__actions button:not(.hero-button) {
  padding: 12px 18px;
  cursor: pointer;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
  background: var(--cyan);
  border: 4px solid #000;
  box-shadow: 5px 5px 0 #000;
}

/* The hand */

.stakes-game {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6svh, 14px);
  min-height: 0;
}

.bj-row {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 20px);
}

.bj-row__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: clamp(84px, 11vw, 128px);
}

.bj-row__label span {
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.bj-row__label b {
  color: #fffbe7;
  font-family: var(--display);
  font-size: clamp(24px, 4.4svh, 38px);
  font-style: italic;
  -webkit-text-stroke: 1.5px #000;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.bj-row--player .bj-row__label b {
  color: var(--acid);
}

.bj-cards {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
  flex: 1;
  min-height: calc(clamp(58px, 10.5svh, 86px) * 1.4 + 8px);
  perspective: 900px;
}

.bj-card {
  position: relative;
  width: clamp(58px, 10.5svh, 86px);
  aspect-ratio: 5 / 7;
  flex: 0 0 auto;
  transform: rotate(-1.6deg);
}

.bj-card:nth-child(even) {
  transform: rotate(1.9deg);
}

.bj-card__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.bj-card__face,
.bj-card__back {
  position: absolute;
  inset: 0;
  border: 3px solid #000;
  border-radius: 9px;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.5);
}

.bj-card__face {
  display: block;
  background: #fffbe7;
  color: #10121c;
  overflow: hidden;
}

.bj-card.is-red .bj-card__face {
  color: var(--red);
}

.bj-card__index {
  position: absolute;
  top: 5px;
  left: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--display);
  font-size: clamp(15px, 2.6svh, 22px);
  font-weight: 950;
  line-height: 0.86;
}

.bj-card__index--flip {
  top: auto;
  left: auto;
  right: 7px;
  bottom: 5px;
  transform: rotate(180deg);
}

.bj-card__pip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(26px, 5svh, 42px);
  text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.12);
}

.bj-card__back {
  background:
    repeating-linear-gradient(45deg, var(--cobalt) 0 8px, #101a9e 8px 16px);
  box-shadow: inset 0 0 0 4px #fffbe7, 3px 4px 0 rgba(0, 0, 0, 0.5);
}

.bj-card.is-dealt {
  animation: bj-deal-in 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes bj-deal-in {
  from {
    opacity: 0;
    transform: translate(-46px, -64px) rotate(-16deg) scale(0.62);
  }
  to {
    opacity: 1;
  }
}

.bj-card.is-flipping .bj-card__inner {
  animation: bj-flip 0.45s cubic-bezier(0.3, 1.3, 0.5, 1);
}

@keyframes bj-flip {
  from {
    transform: rotateY(92deg);
  }
  to {
    transform: rotateY(0deg);
  }
}

.bj-tray {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(2px, 1svh, 8px);
}

.bj-bet-chip {
  display: grid;
  place-items: center;
  min-width: clamp(72px, 11svh, 96px);
  min-height: clamp(72px, 11svh, 96px);
  padding: 8px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.22), transparent 55%),
    var(--pink);
  color: #fffbe7;
  font-family: var(--display);
  font-size: clamp(13px, 2.2svh, 17px);
  font-style: italic;
  font-weight: 950;
  text-align: center;
  border: 4px solid #000;
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px #fffbe7, inset 0 0 0 8px rgba(0, 0, 0, 0.35), 4px 5px 0 #000;
  transform: rotate(-5deg);
  -webkit-text-stroke: 0.5px #000;
}

.bj-actions {
  display: flex;
  gap: clamp(8px, 1.6vw, 16px);
}

.bj-actions button {
  min-width: clamp(86px, 12vw, 118px);
  padding: clamp(9px, 1.8svh, 14px) 16px;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(17px, 2.8svh, 22px);
  font-style: italic;
  font-weight: 950;
  text-transform: uppercase;
  color: #000;
  background: var(--acid);
  border: 4px solid #000;
  box-shadow: 6px 6px 0 #000;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.bj-actions button:nth-child(2) {
  background: var(--pink);
  color: #fff;
  -webkit-text-stroke: 0.5px #000;
}

.bj-actions button:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #000;
}

.bj-actions button:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

.bj-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: saturate(0.35);
}

/* Result banner — overlays the felt so the card never changes size */

.stakes-result {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2svh, 16px);
  background: rgba(5, 6, 10, 0.34);
}

.stakes-result__banner {
  margin: 0;
  padding: 10px 22px;
  background: #fffbe7;
  color: #000;
  font-size: clamp(13px, 2.2svh, 16px);
  font-weight: 900;
  text-align: center;
  border: 4px solid #000;
  box-shadow: 6px 6px 0 #000;
  transform: rotate(-1.2deg);
  animation: stamp-in 0.32s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.stakes-result__banner.is-win {
  background: var(--acid);
}

.stakes-result__banner.is-loss {
  background: var(--pink);
  color: #fffbe7;
  -webkit-text-stroke: 0.4px #000;
}

@keyframes stamp-in {
  from {
    opacity: 0;
    transform: rotate(5deg) scale(1.7);
  }
  to {
    opacity: 1;
    transform: rotate(-1.2deg) scale(1);
  }
}

/* ── The Pool Shark's shop ── */

/* Content-sized with a ceiling: the stock never scrolls when it fits, and
   the scroll area keeps padding so price tags and offset shadows survive
   clipping when it genuinely overflows. */
.shop-card {
  display: grid;
  grid-template-columns: clamp(230px, 22vw, 315px) minmax(0, 1fr);
  gap: clamp(18px, 2vw, 30px);
  width: min(1380px, 100%);
  height: auto;
  max-height: min(92svh, 900px);
  padding: clamp(20px, 2.4vw, 34px);
  overflow: hidden;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.12), transparent 34%),
    var(--pink);
  isolation: isolate;
}

/* On shorter windows the title gives way so a full stock row never clips. */
@media (max-height: 860px) {
  .shop-card {
    padding-block: 22px;
  }

  .shop-host {
    min-height: 350px;
  }
}

.shop-host {
  position: relative;
  min-width: 0;
  min-height: 410px;
  overflow: hidden;
  border: 6px solid #000;
  background:
    radial-gradient(circle at 54% 47%, rgba(255, 255, 255, 0.24), transparent 37%),
    repeating-conic-gradient(from -12deg at 50% 54%, rgba(234, 255, 56, 0.12) 0 7deg, transparent 7deg 15deg),
    var(--cobalt);
  box-shadow: 9px 9px 0 #000;
  transform: rotate(-0.8deg);
}

.shop-host::after {
  position: absolute;
  z-index: 1;
  right: -18%;
  bottom: 17%;
  width: 74%;
  height: 16px;
  content: "";
  background: var(--acid);
  opacity: 0.78;
  transform: rotate(-5deg);
}

.shop-card .vendor-lockup {
  position: relative;
  z-index: 4;
  display: block;
  margin: 0;
  padding: 18px 16px 0;
  text-align: left;
}

.shop-card .vendor-lockup h2 {
  display: grid;
  justify-items: start;
  margin: 0;
  font-size: clamp(48px, 5vw, 70px);
  line-height: 0.74;
  text-align: left;
  text-shadow: 5px 5px 0 #000;
  -webkit-text-stroke: 2px #000;
}

/* Tagline sits under the big lockup; stroke/shadow are killed because the
   inherited h2 treatment swallows glyphs at tagline sizes. */
.shop-card .vendor-lockup h2 span {
  margin-top: 12px;
  color: var(--acid);
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  -webkit-text-stroke: 0;
  text-shadow: 2px 2px 0 #000;
}

.shop-card .vendor-lockup h2 b {
  color: #fff;
  font-size: 1em;
  line-height: 0.78;
}

.shop-host > #shop-copy {
  position: absolute;
  z-index: 5;
  top: 43%;
  right: 10px;
  width: min(190px, calc(100% - 20px));
  margin: 0;
  padding: 10px 12px;
  border: 4px solid #000;
  color: #000;
  background: var(--acid);
  box-shadow: 5px 5px 0 #000;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.25;
  text-align: left;
  text-shadow: none;
  transform: rotate(2deg);
}

.shop-host > #shop-copy::after {
  position: absolute;
  right: 22px;
  bottom: -13px;
  width: 19px;
  height: 19px;
  border-right: 4px solid #000;
  border-bottom: 4px solid #000;
  content: "";
  background: var(--acid);
  transform: rotate(45deg);
}

.shop-offerings {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.shop-offerings-heading {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  padding: 2px 6px 9px;
  border-bottom: 5px solid #000;
  color: #000;
  text-align: left;
}

.shop-offerings-heading span {
  padding: 4px 7px;
  background: var(--acid);
  box-shadow: 3px 3px 0 #000;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

.shop-offerings-heading strong {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 42px);
  font-style: italic;
  font-weight: 950;
  line-height: 0.85;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.shop-stock.reward-choices {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 10px;
  overflow-y: auto;
  padding: 16px 10px 18px;
}

.shop-slot {
  position: relative;
  min-width: 0;
  min-height: 240px;
}

.shop-slot .price-tag {
  position: absolute;
  top: -12px;
  right: -10px;
  padding: 5px 10px;
  color: #000;
  background: var(--brass-hot);
  font-family: var(--display);
  font-size: 21px;
  font-style: italic;
  font-weight: 950;
  border: 4px solid #000;
  box-shadow: 4px 4px 0 #000;
  transform: rotate(6deg);
}

.shop-slot:disabled:not(.is-sold) {
  cursor: not-allowed;
  opacity: 0.6;
  filter: saturate(0.45);
}

.shop-slot.is-sold {
  background: #191d24;
  color: var(--cream);
  opacity: 0.8;
}

.shop-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}

.shop-cash {
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.shop-cash b {
  margin-left: 8px;
  color: var(--brass-hot);
  font-family: var(--display);
  font-size: 30px;
  font-style: italic;
  -webkit-text-stroke: 1.5px #000;
  text-shadow: 2px 2px 0 var(--pink);
}

.shop-actions #shop-reroll {
  padding: 12px 18px;
  cursor: pointer;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
  background: var(--cyan);
  border: 4px solid #000;
  box-shadow: 5px 5px 0 #000;
}

.shop-actions #shop-reroll:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: saturate(0.4);
}

/* Responsive */

@media (max-width: 1100px) {
  .shop-stock.reward-choices {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .shop-stock.reward-choices {
    grid-template-columns: repeat(2, 1fr);
  }

  .stakes-commit {
    grid-template-columns: 1fr;
  }

  .den-bankroll {
    display: none;
  }

  .cash-copy {
    padding-left: 8px;
  }
}

@media (max-height: 720px) {
  .den-snake {
    height: 250px;
    top: -40px;
    left: -30px;
  }

  .den-header,
  .felt {
    padding-left: 110px;
  }

  .den-title h2 {
    font-size: 30px;
  }

  .den-title > p:not(.eyebrow) {
    display: none;
  }
}

@media (max-width: 900px) {
  .den-snake {
    height: 210px;
    top: -34px;
    left: -18px;
  }

  .den-header,
  .felt {
    padding-left: 92px;
  }
}

.den-title h2 {
  letter-spacing: -0.04em;
  -webkit-text-stroke: 2px #000;
  text-shadow: 3px 3px 0 #000;
}

.stakes-option {
  position: relative;
}

.stakes-price {
  position: absolute;
  top: -13px;
  right: -11px;
  padding: 4px 10px;
  color: #000;
  background: var(--brass-hot);
  font-family: var(--display);
  font-size: 19px;
  font-style: italic;
  font-weight: 950;
  border: 4px solid #000;
  box-shadow: 4px 4px 0 #000;
  transform: rotate(7deg);
}

.stakes-option:disabled .stakes-price {
  filter: saturate(0.4);
}

.stakes-skip {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 2px;
  padding: 6px 12px;
  cursor: pointer;
  background: none;
  border: 0;
  color: var(--cream);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 0.75;
}

.stakes-skip:hover,
.stakes-skip:focus-visible {
  opacity: 1;
}

.shop-shark {
  position: absolute;
  z-index: 3;
  right: clamp(-74px, -5vw, -42px);
  bottom: clamp(-58px, -5svh, -32px);
  width: clamp(320px, 31vw, 450px);
  max-width: none;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(-6px 8px 0 rgba(0, 0, 0, 0.5));
  animation: shark-loom 6.5s ease-in-out infinite alternate;
}

@keyframes shark-loom {
  from {
    transform: rotate(1.5deg) translateY(0);
  }
  to {
    transform: rotate(-0.5deg) translateY(7px);
  }
}

@media (max-width: 900px) {
  .shop-card {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .shop-card .vendor-lockup h2 {
    font-size: 50px;
  }

  .shop-shark {
    right: -58px;
    width: 340px;
  }
}

.run-stat {
  left: auto;
  right: 14px;
  bottom: 12px;
  gap: 10px;
  padding: 7px 12px;
  border: 3px solid #000;
  background: var(--pink);
  color: #fffbe7;
  box-shadow: 4px 4px 0 #000;
  transform: rotate(-1.2deg);
}

.run-stat strong {
  color: #fffbe7;
  -webkit-text-stroke: 1px #000;
}

.shop-cash {
  font-size: 12px;
}

.shop-cash b {
  font-size: clamp(38px, 5svh, 56px);
  -webkit-text-stroke: 2px #000;
  text-shadow: 3px 3px 0 var(--pink);
}

.chalk-art--page-2 {
  background-image: url("/assets/images/powerup-atlas-05.png");
}

.chalk-art--page-3 {
  background-image: url("/assets/images/powerup-atlas-06.png");
}

.chalk-art--page-4 {
  background-image: url("/assets/images/powerup-atlas-07.png");
}

.chalk-art--page-5 {
  background-image: url("/assets/images/powerup-atlas-08.png");
}

.cash-dock strong.is-long {
  font-size: 46px;
}

/* ---- Rotate prompt (small portrait screens) ----
   The cabinet is a landscape shape; on a phone held upright we ask for a
   quarter turn instead of shipping a second layout. */
.rotate-overlay {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(155, 54, 31, 0.42), transparent 52%),
    #0b0605;
}

.rotate-overlay__card {
  display: grid;
  gap: 12px;
  justify-items: center;
  max-width: 320px;
  padding: 32px 26px 26px;
  border: 5px solid #000;
  color: #08090d;
  background: var(--acid);
  box-shadow: 8px 8px 0 var(--pink), 13px 13px 0 #000;
  text-align: center;
  transform: rotate(-1.2deg);
}

.rotate-overlay__glyph {
  display: grid;
  place-items: center;
  width: 44px;
  height: 72px;
  border: 4px solid #000;
  border-radius: 9px;
  color: #fff;
  background: var(--cobalt);
  font-size: 20px;
  font-weight: 950;
  animation: rotate-nudge 1.8s ease-in-out infinite;
}

.rotate-overlay__card strong {
  font-family: var(--display);
  font-size: 30px;
  font-style: italic;
  font-weight: 950;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.rotate-overlay__card p {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}

@keyframes rotate-nudge {
  0%, 15% { transform: rotate(0deg); }
  45%, 80% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}

@media (orientation: portrait) and (max-width: 700px) {
  .rotate-overlay {
    display: grid;
  }
}

/* ---- Install gate (mobile browsers) ----
   Phones only get the real cabinet: the home-screen app. The gate outranks
   every modal and the rotate prompt because until it's installed there is
   nothing to rotate to. */
.pwa-gate {
  position: fixed;
  z-index: 400;
  inset: 0;
  display: none;
  place-items: center;
  padding:
    max(20px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  background:
    radial-gradient(ellipse at 50% -10%, rgba(155, 54, 31, 0.42), transparent 52%),
    #0b0605;
}

.pwa-gate.is-open {
  display: grid;
}

.pwa-gate__card {
  display: grid;
  gap: 13px;
  justify-items: center;
  width: min(400px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 28px 24px 22px;
  border: 5px solid #000;
  color: #08090d;
  background: var(--acid);
  box-shadow: 8px 8px 0 var(--pink), 13px 13px 0 #000;
  text-align: center;
  transform: rotate(-1.2deg);
}

.pwa-gate__glyph {
  display: grid;
  place-items: center;
  width: 44px;
  height: 72px;
  border: 4px solid #000;
  border-radius: 9px;
  color: #fff;
  background: var(--cobalt);
  font-size: 20px;
  font-weight: 950;
}

.pwa-gate__overline {
  margin: 0;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.72;
}

.pwa-gate__card > strong {
  font-family: var(--display);
  font-size: 32px;
  font-style: italic;
  font-weight: 950;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.pwa-gate__copy {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}

.pwa-gate__steps {
  display: grid;
  gap: 8px;
  width: 100%;
  text-align: left;
}

.pwa-gate__steps span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 3px solid #000;
  background: #fffbe7;
  box-shadow: 4px 4px 0 #000;
  font-size: 12.5px;
  font-weight: 950;
  line-height: 1.25;
}

.pwa-gate__steps b {
  color: var(--cobalt);
  font-weight: 950;
}

.pwa-gate__steps svg {
  flex: none;
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.pwa-gate__install {
  min-width: 0;
  width: 100%;
  height: 56px;
  background: var(--pink);
  box-shadow: 8px 8px 0 var(--cobalt), 13px 13px 0 #000;
  font-size: 16px;
}

.pwa-gate__copy-link {
  max-width: 100%;
  padding: 10px 16px;
  border: 3px solid #000;
  background: #fffbe7;
  box-shadow: 4px 4px 0 #000;
  color: #08090d;
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.pwa-gate__card small {
  font-size: 11px;
  font-weight: 800;
  opacity: 0.68;
}

.pwa-gate__steps[hidden],
.pwa-gate__install[hidden],
.pwa-gate__copy-link[hidden] {
  display: none;
}

/* Short landscape: trade the tall poster for a wider, tighter card. */
@media (orientation: landscape) and (max-height: 480px) {
  .pwa-gate__card {
    gap: 9px;
    width: min(560px, 100%);
    padding: 18px 18px 16px;
    transform: none;
  }

  .pwa-gate__glyph {
    display: none;
  }

  .pwa-gate__card > strong {
    font-size: 26px;
  }
}

/* ---- Scotch Doubles: realtime co-op ---- */

.menu-secondary-actions {
  display: grid;
  gap: 9px;
  min-width: 154px;
}

.mp-open-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  padding: 0 7px 0 14px;
  border: 4px solid #000;
  background: #090a10;
  color: var(--cream);
  font-family: var(--display);
  font-size: 12px;
  font-style: italic;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 var(--acid);
  transform: rotate(-1deg);
  cursor: pointer;
  transition: 140ms steps(2, end);
}

.mp-open-button i {
  display: grid;
  width: 34px;
  height: 28px;
  place-items: center;
  border: 3px solid #000;
  background: var(--acid);
  color: #08090d;
  font-size: 10px;
  font-style: normal;
  letter-spacing: -0.02em;
}

.mp-open-button:hover,
.mp-open-button[aria-expanded="true"] {
  background: var(--pink);
  color: #08090d;
  box-shadow: 5px 5px 0 var(--acid), 9px 9px 0 #000;
  transform: translate(-2px, -2px) rotate(1deg);
}

.multiplayer-card {
  position: relative;
  display: grid;
  width: min(640px, calc(100vw - 48px));
  min-height: min(560px, calc(100dvh - 48px));
  align-content: center;
  justify-items: center;
  gap: 12px;
  overflow: hidden;
  background:
    linear-gradient(112deg, var(--pink) 0 13%, transparent 13% 87%, var(--acid) 87%),
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.13), transparent 42%),
    var(--cobalt);
}

.multiplayer-card::before {
  position: absolute;
  inset: 18px;
  border: 3px solid rgba(0, 0, 0, 0.38);
  content: "";
  pointer-events: none;
}

.multiplayer-card .eyebrow,
.multiplayer-card h2,
.multiplayer-card__copy,
.multiplayer-card .mp-panel {
  position: relative;
  z-index: 1;
}

.multiplayer-card h2 {
  margin: 0;
  color: var(--pink);
  font-size: clamp(56px, 9vw, 88px);
  line-height: 0.84;
  letter-spacing: -0.065em;
  -webkit-text-stroke: 3px #000;
  text-shadow: 6px 6px 0 var(--acid), 10px 10px 0 #000;
}

.modal-card.multiplayer-card > p.multiplayer-card__copy {
  max-width: 470px;
  margin: 2px auto 4px;
  color: var(--cream);
  font-size: 15px;
  text-align: center;
}

.mp-panel {
  display: grid;
  width: min(470px, 100%);
  gap: 12px;
  padding: 18px;
  border: 5px solid #000;
  background: rgba(8, 9, 13, 0.88);
  box-shadow: 7px 7px 0 var(--pink), 11px 11px 0 #000;
  transform: rotate(0.5deg);
}

.mp-setup {
  display: grid;
  gap: 11px;
}

.mp-setup[hidden],
.mp-room[hidden] {
  display: none;
}

.mp-panel__row {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: end;
}

.mp-panel__divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  color: rgba(255, 251, 231, 0.68);
  font-family: var(--display);
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.mp-panel__divider::before,
.mp-panel__divider::after {
  height: 2px;
  background: rgba(255, 251, 231, 0.3);
  content: "";
}

.mp-field {
  display: grid;
  gap: 3px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
}

.mp-field input {
  width: 64px;
  padding: 7px 8px;
  border: 3px solid #000;
  background: var(--cream);
  color: #08090d;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
}

.mp-field--code input {
  width: 108px;
}

.mp-panel__row > button {
  min-width: 144px;
  min-height: 44px;
  padding: 9px 14px;
  border: 3px solid #000;
  background: var(--acid);
  color: #08090d;
  font-family: var(--display);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
}

.mp-panel__row > button:disabled {
  opacity: 0.5;
  cursor: default;
}

.mp-room {
  display: grid;
  gap: 13px;
  justify-items: center;
}

.mp-room__code {
  display: grid;
  justify-items: center;
  gap: 2px;
  font-family: var(--display);
  text-transform: uppercase;
  color: var(--cream);
}

.mp-room__code span {
  font-size: 10px;
  letter-spacing: 0.18em;
  opacity: 0.75;
}

.mp-room__code strong {
  font-size: 42px;
  letter-spacing: 0.28em;
  color: var(--acid);
  -webkit-text-stroke: 1.5px #000;
  text-shadow: 3px 3px 0 var(--pink);
}

.mp-seat-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mp-seat-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 2.5px solid #000;
  background: var(--cream);
  color: #08090d;
  font-family: var(--display);
  font-size: 13px;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 #000;
  transform: rotate(-1deg);
}

.mp-seat-list li:nth-child(even) {
  transform: rotate(1.1deg);
}

.mp-seat-list li i {
  width: 11px;
  height: 11px;
  border: 2px solid #000;
  border-radius: 50%;
  background: var(--seat-color, var(--pink));
}

.mp-seat-list li.is-away {
  opacity: 0.45;
}

.mp-room-note {
  margin: 0;
  min-height: 16px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255, 251, 231, 0.8);
  text-align: center;
}

.mp-room__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.mp-room__actions button {
  min-height: 42px;
  padding: 8px 14px;
  border: 3px solid #000;
  background: var(--acid);
  color: #08090d;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mp-room__actions #mp-leave-button {
  background: var(--cream);
}

.mp-room__actions button:disabled {
  cursor: default;
  opacity: 0.52;
}

@media (max-width: 620px) {
  .menu-secondary-actions {
    display: flex;
    min-width: 0;
  }

  .menu-secondary-actions > button {
    width: 154px;
  }

  .multiplayer-card {
    width: calc(100vw - 28px);
  }
}

.turn-banner {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.3deg);
  padding: 6px 18px;
  border: 3px solid #000;
  background: var(--seat-color, var(--pink));
  color: #08090d;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 #000;
  pointer-events: none;
  z-index: 6;
}

.turn-banner.is-yours {
  animation: turn-banner-pop 0.45s ease;
}

@keyframes turn-banner-pop {
  0% { transform: translateX(-50%) rotate(-1.3deg) scale(0.6); }
  60% { transform: translateX(-50%) rotate(-1.3deg) scale(1.14); }
  100% { transform: translateX(-50%) rotate(-1.3deg) scale(1); }
}

.mp-solo-banner {
  position: absolute;
  inset: auto 0 18px 0;
  margin: 0 auto;
  width: max-content;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  border: 3px solid #000;
  background: var(--cream);
  color: #08090d;
  font-family: var(--display);
  font-size: 14px;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 #000;
  z-index: 7;
}

.mp-solo-banner[hidden] {
  display: none;
}

.mp-solo-banner button {
  padding: 6px 12px;
  border: 3px solid #000;
  background: var(--acid);
  font-family: var(--display);
  font-size: 13px;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
}

.cursor-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  overflow: hidden;
}

.remote-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}

.remote-cursor.is-idle {
  opacity: 0.4;
}

.remote-cursor.is-gone {
  opacity: 0;
}

.remote-cursor i {
  position: absolute;
  left: 0;
  top: 0;
  width: 19px;
  height: 22px;
  background: var(--seat-color, var(--pink));
  border: 0;
  clip-path: polygon(0 0, 100% 62%, 56% 66%, 78% 100%, 62% 100%, 42% 72%, 0 92%);
  filter: drop-shadow(2px 2px 0 #000);
}

.remote-cursor b {
  position: absolute;
  left: 15px;
  top: 20px;
  padding: 1px 6px;
  border: 2px solid #000;
  background: var(--seat-color, var(--pink));
  color: #08090d;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.08em;
  box-shadow: 2px 2px 0 #000;
  white-space: nowrap;
  transform: rotate(-2deg);
}

/* ─── Score reel: the chalk card that just paid pops and shows its cut ─── */

.chalk-mini,
.loadout-item {
  position: relative;
}

[data-chalk-id].is-scoring {
  z-index: 12;
  animation: chalk-score-pop 0.5s cubic-bezier(0.2, 1.6, 0.35, 1);
}

/* Score chips render on a body-level overlay above everything — the kit
   scrollers clip anything hung outside a card, and sibling cards paint over
   each other's protrusions. Chips anchor to the card's screen rect in JS. */
.score-pop-layer {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}

.card-score-pop {
  position: absolute;
  padding: 1px 6px;
  border: 3px solid #000;
  font-family: var(--display);
  font-style: italic;
  font-weight: 950;
  font-size: 13px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #000;
  background: var(--score-accent, var(--acid));
  box-shadow: 3px 3px 0 #000;
  transform: translate(calc(-100% + 9px), -62%) scale(var(--pop-scale, 1));
  transform-origin: top right;
  opacity: 0;
  animation: card-score-pop 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes chalk-score-pop {
  0% {
    scale: 1;
    filter: brightness(1);
  }
  30% {
    scale: 1.16;
    filter: brightness(1.35);
  }
  100% {
    scale: 1;
    filter: brightness(1);
  }
}

@keyframes card-score-pop {
  0% {
    opacity: 0;
    translate: 0 6px;
  }
  18% {
    opacity: 1;
    translate: 0 0;
  }
  78% {
    opacity: 1;
    translate: 0 -2px;
  }
  100% {
    opacity: 0;
    translate: 0 -5px;
  }
}