/*
  Rack-it mobile modal system
  ---------------------------------
  Modal chrome lives outside the scaled cabinet. This layer gives short,
  landscape touch screens one stable sheet geometry and deliberately keeps
  all decoration inside the visual viewport.
*/

/* Power-up inspection is useful at every size, so its visual contract is
   defined outside the phone tier and then tightened below. */
#powerup-modal .powerup-detail-card {
  display: grid;
  grid-template-columns: minmax(132px, 190px) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  gap: 8px 24px;
  width: min(650px, 100%);
  max-width: 650px;
  padding: clamp(24px, 4vw, 44px);
  overflow: hidden;
  color: #08090d;
  background:
    linear-gradient(118deg, transparent 0 72%, rgba(234, 255, 56, 0.78) 72% 76%, transparent 76%),
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.2) 0 2px, transparent 2.5px) 0 0 / 13px 13px,
    var(--pink);
  text-align: left;
}

.powerup-detail-card__copy {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  align-self: center;
  gap: 8px;
}

#powerup-art {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  width: 100%;
  max-width: 190px;
  aspect-ratio: 1;
  margin: 0;
  border: 5px solid #000;
  background-color: #fffbe7;
  box-shadow: 7px 7px 0 #000;
}

#powerup-name {
  grid-column: 2;
  align-self: end;
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 58px);
  font-style: italic;
  font-weight: 950;
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  -webkit-text-stroke: 2px #000;
  text-shadow: 4px 4px 0 #000;
}

#powerup-kicker {
  grid-column: 2;
  display: inline-block;
  justify-self: start;
  margin: 0;
  padding: 4px 7px;
  border: 3px solid #000;
  color: #000;
  background: var(--acid);
  box-shadow: 3px 3px 0 #000;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

#powerup-description {
  grid-column: 2;
  margin: 2px 0 0;
  color: #08090d;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
  text-shadow: none;
}

#powerup-level {
  grid-column: 2;
  justify-self: start;
  align-self: flex-start;
  display: block;
  max-width: 100%;
  min-height: 30px;
  margin: 4px 0 0;
  padding: 6px 11px 7px 8px;
  overflow: visible;
  border: 3px solid #000;
  color: #fff;
  background: var(--cobalt);
  box-shadow: 3px 3px 0 #000;
  font-family: var(--display);
  font-size: 12px;
  font-style: italic;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1.18;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.powerup-action-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  margin-top: 5px;
  padding: 8px;
  align-items: center;
  gap: 10px;
  border: 3px solid #000;
  background: #fffbe7;
  box-shadow: 4px 4px 0 #000;
}

.powerup-action-panel[hidden] {
  display: none;
}

.powerup-action-panel.has-secondary {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.powerup-action-panel.has-secondary .powerup-action-buttons {
  justify-content: stretch;
}

.powerup-action-panel.has-secondary .powerup-action-buttons > button {
  flex: 1 1 0;
}

#powerup-action-status {
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.powerup-action-buttons {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 6px;
}

#powerup-action-button,
#powerup-action-secondary {
  min-width: 118px;
  min-height: 44px;
  padding: 7px 11px;
  border: 3px solid #000;
  color: #05060a;
  background: var(--cyan);
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
  font-family: var(--display);
  font-size: 12px;
  font-style: italic;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

#powerup-action-secondary {
  color: #fff;
  background: var(--pink);
}

#powerup-action-secondary[hidden] {
  display: none;
}

.powerup-action-panel.is-armed #powerup-action-button {
  background: var(--acid);
}

.powerup-action-panel.is-spent {
  background: color-mix(in srgb, var(--red) 22%, #fffbe7);
}

.powerup-action-panel.is-spent #powerup-action-button,
#powerup-action-button:disabled,
#powerup-action-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

/* CHALKS is a first-class inventory surface. The dock opens this tray; each
   equipped item then drills into the existing single-power-up dialog. */
#loadout-modal {
  z-index: 70;
}

#powerup-modal {
  z-index: 80;
}

.loadout-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  width: min(1120px, 100%);
  height: min(760px, 100%);
  max-width: 1120px;
  max-height: 760px;
  padding: clamp(24px, 4vw, 42px);
  overflow: hidden;
  color: #08090d;
  background:
    linear-gradient(118deg, var(--pink) 0 7%, transparent 7% 91%, var(--acid) 91% 100%),
    radial-gradient(circle, rgba(255, 255, 255, 0.14) 1.5px, transparent 2px) 0 0 / 13px 13px,
    var(--cobalt);
  text-align: left;
}

.loadout-card__header {
  display: flex;
  min-width: 0;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-right: 54px;
}

.loadout-card__header .eyebrow {
  margin: 0 0 7px;
}

.loadout-card__header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(46px, 6vw, 78px);
  line-height: 0.8;
  -webkit-text-stroke: 2px #000;
  text-shadow: 5px 5px 0 #000;
}

.loadout-card__header > p {
  max-width: 310px;
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
  text-shadow: 2px 2px 0 #000;
}

.loadout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-auto-rows: minmax(215px, auto);
  align-content: start;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  padding: 3px 8px 12px 3px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--acid) #05060a;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.loadout-item {
  position: relative;
  display: grid;
  grid-template-rows: 86px minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 215px;
  padding: 10px;
  overflow: hidden;
  border: 4px solid #000;
  color: #08090d;
  background: #fffbe7;
  box-shadow: 6px 6px 0 #000;
  cursor: pointer;
  text-align: left;
}

.loadout-item:hover,
.loadout-item:focus-visible {
  background: color-mix(in srgb, var(--chalk-accent) 24%, #fffbe7);
  outline: 4px solid var(--acid);
  outline-offset: -7px;
  transform: translate(-2px, -2px);
}

.chalk-mini.is-activatable,
.loadout-item.is-activatable {
  --ability-ring: var(--cyan);
}

.chalk-mini.is-ability-waiting,
.loadout-item.is-ability-waiting {
  --ability-ring: var(--cobalt);
}

.chalk-mini.is-ability-armed,
.loadout-item.is-ability-armed {
  --ability-ring: var(--acid);
}

.chalk-mini.is-ability-spent,
.loadout-item.is-ability-spent {
  --ability-ring: var(--red);
}

.chalk-mini.is-activatable::after,
.loadout-item.is-activatable::after {
  position: absolute;
  z-index: 12;
  inset: 2px;
  border: 3px solid var(--ability-ring);
  content: "";
  pointer-events: none;
}

.chalk-mini.is-activatable .chalk-level {
  z-index: 13;
}

.loadout-item.is-activatable > em {
  position: relative;
  z-index: 13;
}

.loadout-item__art {
  width: 78px;
  height: 78px;
  justify-self: center;
  border: 3px solid #000;
  background-color: var(--chalk-accent);
  box-shadow: 4px 4px 0 #000;
}

.loadout-item__copy {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 3px;
}

.loadout-item__copy b,
.loadout-item__copy strong,
.loadout-item__copy span,
.loadout-item > em {
  display: block;
}

.loadout-item__copy b {
  overflow: hidden;
  color: var(--cobalt);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.loadout-item__copy strong {
  overflow: hidden;
  font-family: var(--display);
  font-size: 19px;
  font-style: italic;
  font-weight: 950;
  line-height: 0.95;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.loadout-item__copy span {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.loadout-item > em {
  justify-self: end;
  padding: 3px 6px;
  border: 2px solid #000;
  color: #fff;
  background: var(--cobalt);
  font-family: var(--display);
  font-size: 10px;
  font-style: italic;
  font-weight: 950;
  line-height: 1;
}

.loadout-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 210px;
  place-content: center;
  gap: 8px;
  padding: 24px;
  border: 4px dashed #000;
  color: #08090d;
  background: var(--acid);
  text-align: center;
}

.loadout-empty strong {
  font-family: var(--display);
  font-size: 28px;
  font-style: italic;
  text-transform: uppercase;
}

.loadout-empty span {
  font-size: 12px;
  font-weight: 850;
}

.reward-snake {
  position: absolute;
  z-index: 1;
  top: 42px;
  left: 22px;
  width: auto;
  height: clamp(110px, 18vw, 170px);
  filter: drop-shadow(5px 7px 0 rgba(0, 0, 0, 0.48));
  pointer-events: none;
  transform: rotate(-5deg);
}

/* Gameplay remains landscape-first. Include portrait tablets rather than
   leaving iPad-sized devices in a scaled cabinet with huge dead bands. */
@media (orientation: portrait) and (max-width: 1100px) {
  .rotate-overlay {
    display: grid;
    padding:
      max(24px, env(safe-area-inset-top))
      max(24px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(24px, env(safe-area-inset-left));
  }

  .rotate-overlay__card {
    width: min(360px, 100%);
    max-width: 360px;
    transform: none;
  }
}

/* Narrow non-landscape sheets still use one vertical scroll root. The rotate
   prompt normally covers this state, but keeping it sound prevents broken
   modal geometry during orientation transitions and split-screen use. */
@media (max-width: 780px) and (min-height: 601px) {
  .modal-backdrop {
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
    overflow: hidden;
  }

  .modal-card,
  .shop-card {
    width: 100%;
    max-width: 720px;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    transform: none !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .reward-choices,
  .shop-stock.reward-choices {
    max-height: none;
    overflow: visible;
  }

  #powerup-modal .powerup-detail-card {
    grid-template-columns: minmax(90px, 132px) minmax(0, 1fr);
    gap: 7px 18px;
  }
}

/* Short landscape phones, including the iPhone 16 family. */
@media (max-height: 600px) and (orientation: landscape) {
  :root {
    --mobile-card-title-row: 30px;
    --mobile-card-effect-row: 24px;
    --mobile-card-copy-gap: 7px;
    --mobile-card-row-gap: 4px;
  }

  .modal-backdrop {
    --sheet-gutter-block: max(6px, env(safe-area-inset-top));
    --sheet-gutter-right: max(10px, env(safe-area-inset-right));
    --sheet-gutter-bottom: max(6px, env(safe-area-inset-bottom));
    --sheet-gutter-left: max(10px, env(safe-area-inset-left));
    z-index: 200;
    place-items: stretch;
    padding:
      var(--sheet-gutter-block)
      var(--sheet-gutter-right)
      var(--sheet-gutter-bottom)
      var(--sheet-gutter-left);
    overflow: hidden;
    overscroll-behavior: none;
    background:
      linear-gradient(116deg, rgba(255, 63, 130, 0.12) 0 18%, transparent 18% 75%, rgba(234, 255, 56, 0.09) 75%),
      rgba(2, 3, 6, 0.96);
  }

  /* The card is the sole scroll root for every modal except the shop. */
  .modal-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    padding: clamp(9px, 2.5svh, 13px) clamp(12px, 2.1vw, 20px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 3px solid #000;
    border-radius: 0;
    color: #08090d;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 34%),
      var(--cobalt);
    box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.13),
      inset 0 -5px 0 rgba(0, 0, 0, 0.18);
    text-align: center;
    transform: none !important;
    overscroll-behavior: contain;
    scrollbar-color: var(--acid) #05060a;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .modal-card::-webkit-scrollbar,
  .shop-stock::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }

  .modal-card::-webkit-scrollbar-track,
  .shop-stock::-webkit-scrollbar-track {
    background: #05060a;
  }

  .modal-card::-webkit-scrollbar-thumb,
  .shop-stock::-webkit-scrollbar-thumb {
    border: 1px solid #05060a;
    background: var(--acid);
  }

  .is-open .modal-card,
  .modal-card:hover {
    transform: none !important;
  }

  .modal-card::before,
  .modal-card::after {
    pointer-events: none;
  }

  .intro-card::before,
  .reward-card::before {
    top: 7px;
    left: 7px;
    width: 54px;
    height: 12px;
    border: 2px solid #000;
    background: var(--pink);
    transform: rotate(-3deg);
  }

  .intro-card::after,
  .reward-card::after {
    right: 7px;
    bottom: 7px;
    width: 62px;
    height: 11px;
    border: 2px solid #000;
    background: var(--acid);
    transform: rotate(2deg);
  }

  .modal-card .eyebrow {
    margin: 0 0 4px;
    padding: 3px 6px;
    border: 0;
    box-shadow: 2px 2px 0 #000;
    font-size: clamp(7px, 2.15svh, 9px);
    letter-spacing: 0.14em;
    line-height: 1.15;
    transform: none;
  }

  .modal-card h2,
  .reward-card h2,
  .howto-card h2 {
    margin: 2px 0 6px;
    color: #fff;
    font-size: clamp(28px, 9.2svh, 40px);
    font-style: italic;
    font-weight: 950;
    line-height: 0.88;
    letter-spacing: -0.045em;
    -webkit-text-stroke: 1px #000;
    text-shadow: 2px 2px 0 #000;
  }

  .modal-card h2 em {
    color: var(--pink);
    -webkit-text-stroke: 1px #000;
    text-shadow: 2px 2px 0 #000, 3px 3px 0 var(--acid);
  }

  .modal-card > p:not(.eyebrow) {
    max-width: 650px;
    margin: 0 auto 7px;
    color: #fff;
    font-size: clamp(9px, 2.7svh, 11px);
    font-weight: 800;
    line-height: 1.25;
    text-shadow: 1px 1px 0 #000;
  }

  .modal-card button,
  .modal-card input,
  .modal-close {
    touch-action: manipulation;
  }

  .modal-card button:focus-visible,
  .modal-close:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
  }

  .hero-button,
  .modal-card .hero-button {
    min-width: 160px;
    height: 44px;
    min-height: 44px;
    padding: 0 6px 0 15px;
    border: 3px solid #000;
    box-shadow: 4px 4px 0 var(--pink);
    font-size: 12px;
    line-height: 1;
    transform: none;
  }

  .hero-button:hover,
  .hero-button:active,
  .modal-card .hero-button:hover,
  .modal-card .hero-button:active {
    box-shadow: 2px 2px 0 var(--pink);
    transform: translate(2px, 2px);
  }

  .hero-button i,
  .modal-card .hero-button i {
    width: 32px;
    height: 32px;
    border-width: 0 0 0 2px;
    font-size: 18px;
  }

  .modal-close {
    top: 7px;
    right: 7px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 3px solid #000;
    border-radius: 0;
    color: #000;
    background: var(--pink);
    box-shadow: 3px 3px 0 #000;
    font-size: 24px;
    line-height: 1;
    transform: none;
  }

  /* Start / resume sheet */
  .modal-card.intro-card {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    row-gap: clamp(5px, 1.6svh, 8px);
    max-width: none;
    padding-inline: clamp(20px, 5vw, 48px);
    background:
      linear-gradient(106deg, var(--pink) 0 19%, var(--cobalt) 19% 80%, var(--acid) 80% 100%);
  }

  .intro-card::before,
  .intro-card::after {
    display: none;
  }

  .intro-sun {
    display: none;
  }

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

  .intro-card #start-title {
    order: 1;
    display: inline-block;
    margin: 0;
    padding: 0 6px 8px;
    border: 0;
    color: var(--pink);
    background: transparent;
    box-shadow: none;
    font-size: clamp(90px, 32svh, 138px);
    line-height: 0.78;
    letter-spacing: -0.055em;
    white-space: nowrap;
    -webkit-text-stroke: 3px #000;
    text-shadow: 6px 6px 0 var(--acid), 11px 11px 0 #000;
  }

  .modal-card.intro-card > p.intro-tagline {
    order: 2;
    display: table;
    max-width: none;
    margin: 0 0 7px;
    padding: 4px 11px 5px;
    border: 3px solid #000;
    color: #000;
    background: var(--acid);
    box-shadow: 4px 4px 0 #000;
    font-family: var(--display);
    font-size: clamp(13px, 3.8svh, 18px);
    font-style: italic;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.015em;
    text-shadow: none;
    text-transform: uppercase;
  }

  .intro-card .save-stamp {
    order: 4;
    max-width: 100%;
    margin: 5px 0 0;
    padding: 4px 8px;
    overflow-wrap: anywhere;
    border-width: 2px;
    box-shadow: 2px 2px 0 #000;
    font-size: clamp(8px, 2.25svh, 10px);
    transform: none;
  }

  .intro-card .menu-actions {
    order: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .intro-card #start-button {
    min-width: 220px;
    height: 48px;
    min-height: 48px;
  }

  .intro-card .reset-save-button {
    min-width: 132px;
    height: 44px;
    min-height: 44px;
    padding: 0 5px 0 12px;
    border: 3px solid #000;
    color: #fff;
    background: var(--cobalt);
    box-shadow: 3px 3px 0 var(--acid);
    font-size: 10px;
    transform: none;
  }

  .intro-card .reset-save-button i {
    width: 28px;
    height: 28px;
    border-width: 2px;
    font-size: 18px;
  }

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

  /* Full-screen inventory tray opened by the CHALKS stamp. */
  #loadout-modal {
    z-index: 240;
    touch-action: none;
  }

  #powerup-modal {
    z-index: 260;
  }

  #loadout-modal .loadout-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: 7px;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    padding: 8px clamp(12px, 2vw, 18px) 9px;
    overflow: hidden;
    background:
      linear-gradient(108deg, var(--pink) 0 8%, transparent 8% 92%, var(--acid) 92% 100%),
      var(--cobalt);
    text-align: left;
    touch-action: none;
  }

  .loadout-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 57px;
    padding: 0 48px 0 4px;
  }

  .loadout-card__header .eyebrow {
    margin: 0 0 3px;
    padding: 2px 5px;
  }

  .loadout-card__header h2,
  .modal-card .loadout-card__header h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(31px, 9.5svh, 42px);
    line-height: 0.82;
    -webkit-text-stroke: 1.5px #000;
    text-shadow: 3px 3px 0 #000;
  }

  .loadout-card__header > p {
    max-width: 260px;
    margin: 0 0 2px;
    color: #fff;
    font-size: clamp(7.5px, 2.25svh, 9px);
    font-weight: 850;
    line-height: 1.18;
    text-align: right;
    text-shadow: 1px 1px 0 #000;
  }

  .loadout-grid {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    grid-auto-rows: 160px;
    gap: 7px;
    padding: 3px 6px 10px 3px;
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
  }

  .loadout-item {
    grid-template-rows: 56px minmax(0, 1fr) auto;
    min-height: 160px;
    padding: 6px;
    border-width: 3px;
    box-shadow: 3px 3px 0 #000;
    touch-action: manipulation;
  }

  .loadout-item__art {
    width: 51px;
    height: 51px;
    border-width: 2px;
    box-shadow: 2px 2px 0 #000;
  }

  .loadout-item__copy {
    gap: 2px;
  }

  .loadout-item__copy b {
    font-size: 7.5px;
  }

  .loadout-item__copy strong {
    font-size: clamp(13px, 3.7svh, 16px);
    line-height: 0.95;
  }

  .loadout-item__copy span {
    margin-top: 1px;
    font-size: clamp(7.5px, 2.1svh, 8.5px);
    line-height: 1.18;
    -webkit-line-clamp: 2;
  }

  .loadout-item > em {
    padding: 2px 4px;
    border-width: 1.5px;
    font-size: 7px;
  }

  .loadout-empty {
    min-height: 100%;
    padding: 18px;
    border-width: 3px;
  }

  .loadout-empty strong {
    font-size: clamp(22px, 7svh, 30px);
  }

  .loadout-empty span {
    font-size: 9px;
  }

  /* House Special / reward pick: one coherent row at the iPhone 16 widths.
     The sheet itself remains the only scroll root at smaller fallbacks. */
  .reward-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    background:
      linear-gradient(122deg, rgba(255, 255, 255, 0.12), transparent 38%),
      var(--pink);
  }

  .reward-snake {
    position: absolute;
    z-index: 1;
    top: clamp(37px, 10svh, 45px);
    left: clamp(8px, 2vw, 18px);
    width: auto;
    height: clamp(76px, 24svh, 96px);
    filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.48));
    pointer-events: none;
    transform: rotate(-5deg);
  }

  .reward-card > .eyebrow {
    margin-bottom: 8px;
  }

  .reward-card > h2 {
    margin-top: 3px;
  }

  #powerup-modal .powerup-detail-card__copy {
    grid-column: 2;
    grid-row: 1 / -1;
    gap: 5px;
  }

  .reward-card > p:not(.eyebrow) {
    margin-bottom: 5px;
  }

  .reward-card .reward-choices {
    display: flex;
    flex: 1 0 auto;
    grid-template-columns: none;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2.4vw, 22px);
    width: 100%;
    max-height: none;
    margin: 5px 0 0;
    padding: 0 2px 4px;
    overflow: visible;
  }

  .reward-card .reward-choice {
    display: grid;
    grid-template-rows:
      auto
      minmax(var(--mobile-card-title-row), auto)
      minmax(var(--mobile-card-effect-row), auto)
      minmax(0, 1fr)
      auto;
    justify-items: center;
    flex: 0 0 clamp(145px, 20vw, 166px);
    width: clamp(145px, 20vw, 166px);
    height: clamp(198px, 58svh, 218px);
    min-width: 0;
    min-height: clamp(188px, 52svh, 204px);
    padding: clamp(7px, 2svh, 10px);
    border: 3px solid #000;
    color: #000;
    background: var(--chalk-accent, var(--acid));
    box-shadow: 4px 4px 0 #000;
    text-align: center;
    transform: none;
  }

  .reward-card .reward-choice:hover,
  .reward-card .reward-choice:focus-visible,
  .reward-card .reward-choice:nth-child(2):hover {
    box-shadow: 2px 2px 0 #000;
    transform: translate(2px, 2px);
  }

  .reward-card .reward-choice .chalk-art,
  .reward-card .reward-choice__icon {
    position: static;
    width: clamp(48px, 15svh, 64px);
    height: clamp(48px, 15svh, 64px);
    margin: 0 auto 2px;
    border: 3px solid #000;
    box-shadow: 3px 3px 0 #000;
  }

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

  .reward-card .reward-choice strong {
    display: flex;
    min-height: var(--mobile-card-title-row);
    align-items: center;
    justify-content: center;
    margin: 2px 0 var(--mobile-card-row-gap);
    overflow-wrap: anywhere;
    font-size: clamp(13px, 3.8svh, 17px);
    line-height: 0.95;
    -webkit-text-stroke: 0;
    text-shadow: none;
  }

  .reward-card .reward-choice b {
    display: flex;
    min-height: var(--mobile-card-effect-row);
    align-items: center;
    justify-content: center;
    margin: 0 0 var(--mobile-card-copy-gap);
    padding: 2px 5px;
    overflow: visible;
    font-size: clamp(6.5px, 1.9svh, 8px);
    line-height: 1.24;
    overflow-wrap: anywhere;
  }

  .reward-card .reward-choice p {
    display: -webkit-box;
    align-self: start;
    margin: 0;
    padding: 1px 2px 0;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.78);
    font-size: clamp(7.5px, 2.15svh, 9.5px);
    font-weight: 800;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  .reward-card .reward-choice__rarity {
    margin-top: 2px;
    padding: 1px 5px;
    border-width: 2px;
    font-size: 7px;
  }

  /* Draft-widening upgrades can reveal three or four cards. Compact the
     complete row as a unit so expanded House Specials never clip sideways. */
  .reward-card .reward-choices[data-choice-count="3"] .reward-choice {
    flex-basis: clamp(138px, 18.5vw, 154px);
    width: clamp(138px, 18.5vw, 154px);
    height: clamp(194px, 55svh, 212px);
  }

  .reward-card .reward-choices[data-choice-count="4"] {
    --mobile-card-title-row: 26px;
    --mobile-card-effect-row: 22px;
    --mobile-card-copy-gap: 4px;
    --mobile-card-row-gap: 3px;

    gap: clamp(8px, 1.5vw, 14px);
  }

  .reward-card .reward-choices[data-choice-count="4"] .reward-choice {
    flex-basis: clamp(128px, 16.4vw, 140px);
    width: clamp(128px, 16.4vw, 140px);
    height: clamp(180px, 51svh, 202px);
    padding: 6px;
  }

  .reward-card .reward-choices[data-choice-count="4"] .reward-choice .chalk-art,
  .reward-card .reward-choices[data-choice-count="4"] .reward-choice__icon {
    width: clamp(40px, 11svh, 46px);
    height: clamp(40px, 11svh, 46px);
  }

  .reward-card .reward-choices[data-choice-count="4"] .reward-choice strong {
    font-size: clamp(11px, 3.2svh, 13px);
  }

  .reward-card .reward-choices[data-choice-count="4"] .reward-choice b {
    font-size: clamp(6px, 1.7svh, 7px);
  }

  .reward-card .reward-choices[data-choice-count="4"] .reward-choice p {
    font-size: clamp(7px, 1.9svh, 8px);
    -webkit-line-clamp: 3;
  }

  /* Table Stakes shared shell */
  .stakes-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: clamp(7px, 1.9svh, 10px) clamp(10px, 1.8vw, 16px);
    overflow-x: hidden;
    overflow-y: auto;
    background:
      linear-gradient(125deg, rgba(255, 255, 255, 0.08), transparent 34%),
      var(--cobalt);
  }

  .den-snake {
    top: 4px;
    left: 5px;
    width: auto;
    height: clamp(74px, 25svh, 104px);
    filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.5));
    animation: none;
    transform: none;
  }

  .den-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: clamp(43px, 12svh, 52px);
    margin: 0 0 5px;
    padding: 0 0 0 clamp(72px, 12vw, 102px);
    text-align: left;
  }

  .den-title .eyebrow {
    margin: 0;
    font-size: 7px;
  }

  .den-title h2,
  .modal-card .den-title h2 {
    margin: 0;
    font-size: clamp(24px, 7.7svh, 32px);
    line-height: 0.88;
    letter-spacing: -0.035em;
    -webkit-text-stroke: 1px #000;
    text-shadow: 2px 2px 0 #000;
  }

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

  .den-bankroll {
    display: flex;
    min-width: 74px;
    min-height: 46px;
    padding: 3px 8px 4px;
    overflow: visible;
    border: 2px solid #000;
    box-shadow: 2px 2px 0 #000;
    transform: none;
  }

  .stakes-card .den-bankroll span {
    color: #fff;
    font-size: 7px;
  }

  .den-bankroll b {
    display: block;
    min-width: 46px;
    min-height: 31px;
    padding: 2px 5px 4px 2px;
    overflow: visible;
    font-size: clamp(20px, 6svh, 25px);
    font-variant-numeric: tabular-nums;
    line-height: 1.08;
    white-space: nowrap;
    -webkit-text-stroke: 1px #000;
    text-shadow: 1px 1px 0 var(--pink);
  }

  .felt {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(224px, 71svh, 312px);
    gap: 6px;
    padding: clamp(7px, 1.9svh, 10px);
    border: 3px solid #000;
    box-shadow:
      inset 0 0 0 2px rgba(255, 251, 231, 0.2),
      inset 0 8px 22px rgba(0, 0, 0, 0.3);
    overflow: visible;
  }

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

  /* Commit stage */
  .stakes-commit {
    display: grid;
    grid-template-columns: repeat(2, clamp(172px, 25vw, 210px));
    justify-content: center;
    gap: 7px clamp(14px, 3vw, 24px);
  }

  .stakes-option {
    display: grid;
    grid-template-rows:
      auto
      minmax(var(--mobile-card-title-row), auto)
      minmax(30px, auto);
    align-content: center;
    justify-items: center;
    min-width: 0;
    width: 100%;
    min-height: clamp(188px, 55svh, 215px);
    gap: 6px;
    padding: 7px 9px;
    border: 3px solid #000;
    box-shadow: 4px 4px 0 #000;
    transform: none;
  }

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

  .stakes-option__card {
    width: clamp(38px, 12svh, 50px);
    margin: 0;
    border-width: 2px;
    border-radius: 4px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
    font-size: clamp(18px, 5svh, 23px);
    transform: none;
  }

  .stakes-option__card--blackjack {
    width: clamp(68px, 19svh, 78px);
    height: clamp(62px, 17svh, 70px);
    aspect-ratio: auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .blackjack-tease-card {
    width: clamp(40px, 12svh, 48px);
    border-width: 2px;
    border-radius: 4px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  }

  .blackjack-tease-card b {
    top: 3px;
    left: 4px;
    font-size: clamp(13px, 3.8svh, 16px);
  }

  .blackjack-tease-card em {
    font-size: clamp(20px, 6svh, 25px);
  }

  .stakes-option strong {
    display: flex;
    min-height: var(--mobile-card-title-row);
    align-items: center;
    justify-content: center;
    font-size: clamp(14px, 4.2svh, 18px);
    line-height: 1;
  }

  .stakes-option__sub {
    display: flex;
    min-height: 30px;
    align-items: flex-start;
    justify-content: center;
    max-width: 270px;
    font-size: clamp(8px, 2.35svh, 10px);
    line-height: 1.18;
  }

  .stakes-price {
    top: 3px;
    right: 3px;
    display: grid;
    min-width: 38px;
    min-height: 28px;
    padding: 3px 8px 4px 5px;
    place-items: center;
    overflow: visible;
    border-width: 2px;
    box-shadow: 2px 2px 0 #000;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    line-height: 1.08;
    transform: none;
    white-space: nowrap;
  }

  .stakes-skip {
    min-height: 44px;
    margin: 0;
    padding: 8px 12px;
    font-size: 8px;
    line-height: 1.15;
    touch-action: manipulation;
  }

  /* Bet stage */
  .stakes-bet {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(460px, 100%);
    min-height: clamp(156px, 48svh, 188px);
    margin: 0 auto;
    padding: 12px;
    border: 3px solid #000;
    background:
      radial-gradient(circle, rgba(255, 255, 255, 0.12) 1px, transparent 1.5px) 0 0 / 12px 12px,
      var(--cobalt);
    box-shadow: 4px 4px 0 var(--pink), 7px 7px 0 #000;
  }

  .stakes-bet__selector {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    width: min(280px, 100%);
    min-height: 104px;
    overflow: hidden;
    border: 3px solid #000;
    background: var(--acid);
    box-shadow: 3px 3px 0 var(--pink);
  }

  .stakes-bet__readout {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px;
    overflow: visible;
    border: 0;
    color: #000;
    background: var(--acid);
    box-shadow: none;
  }

  .stakes-bet__readout span {
    font-size: 8px;
  }

  .stakes-bet__readout output {
    display: block;
    min-width: 72px;
    min-height: 46px;
    padding: 3px 8px 5px 2px;
    overflow: visible;
    color: var(--cobalt);
    font-size: clamp(30px, 9.5svh, 40px);
    font-variant-numeric: tabular-nums;
    line-height: 1.02;
    white-space: nowrap;
    -webkit-text-stroke: 0.8px #000;
    text-shadow: 2px 2px 0 #fff;
  }

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

  .stakes-bet__stepper button {
    min-width: 52px;
    min-height: 50px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid #000;
    color: #fff;
    background: var(--pink);
    cursor: pointer;
    font-family: var(--display);
    font-size: 18px;
    font-weight: 950;
    line-height: 1;
    box-shadow: none;
  }

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

  .stakes-bet__stepper button:disabled {
    opacity: 0.36;
  }

  .stakes-bet__actions {
    display: flex;
    align-self: center;
    justify-content: center;
    gap: 7px;
  }

  .stakes-bet__actions button:not(.hero-button),
  .stakes-bet__actions .hero-button {
    min-width: 88px;
    min-height: 44px;
    padding: 0 10px;
    border-width: 3px;
    box-shadow: 3px 3px 0 #000;
    font-size: 10px;
  }

  .stakes-bet__actions .hero-button {
    min-width: 108px;
    padding-left: 12px;
  }

  /* Blackjack hand */
  .stakes-game {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 5px 7px;
  }

  .bj-row {
    display: flex;
    align-items: center;
    gap: 7px;
    width: min(680px, 100%);
    min-height: clamp(67px, 20svh, 84px);
    margin: 0 auto;
    padding: 4px 9px;
    border: 2px solid rgba(0, 0, 0, 0.64);
    background: rgba(5, 6, 10, 0.13);
  }

  .bj-row--player {
    background: rgba(234, 255, 56, 0.09);
  }

  .bj-row__label {
    min-width: clamp(62px, 10vw, 82px);
    gap: 0;
    overflow: visible;
  }

  .bj-row__label span {
    font-size: 7px;
  }

  .bj-row__label b {
    display: block;
    min-width: 30px;
    min-height: 30px;
    padding: 2px 5px 4px 1px;
    overflow: visible;
    font-size: clamp(20px, 5.8svh, 25px);
    font-variant-numeric: tabular-nums;
    line-height: 1.08;
    white-space: nowrap;
    -webkit-text-stroke: 1px #000;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
  }

  .bj-cards {
    justify-content: safe center;
    gap: 4px;
    min-width: 0;
    min-height: clamp(65px, 19svh, 80px);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  .bj-cards::-webkit-scrollbar {
    display: none;
  }

  .bj-card {
    width: clamp(44px, 12.5svh, 54px);
    transform: none;
  }

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

  .bj-card__face,
  .bj-card__back {
    border-width: 2px;
    border-radius: 5px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .bj-card__back {
    box-shadow: inset 0 0 0 2px #fffbe7, 2px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .bj-card__index {
    top: 4px;
    left: 5px;
    min-width: 15px;
    min-height: 22px;
    padding: 1px 2px 2px 1px;
    overflow: visible;
    font-size: clamp(12px, 3.5svh, 15px);
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
  }

  .bj-card__index--flip {
    inset: auto 5px 4px auto;
  }

  .bj-card__pip {
    font-size: clamp(21px, 6.5svh, 28px);
    text-shadow: none;
  }

  .bj-tray {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(680px, 100%);
    min-height: 44px;
    margin: 1px auto 0;
    padding-top: 3px;
    border-top: 2px solid rgba(0, 0, 0, 0.64);
  }

  .bj-bet-chip {
    display: grid;
    min-width: 78px;
    min-height: 42px;
    padding: 7px 12px 8px;
    overflow: visible;
    border: 3px solid #000;
    border-radius: 999px;
    box-shadow: inset 0 0 0 3px #fffbe7, 2px 2px 0 #000;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    white-space: nowrap;
    -webkit-text-stroke: 0;
    transform: none;
  }

  .bj-actions {
    display: flex;
    gap: 7px;
    margin-left: auto;
  }

  .bj-actions button {
    min-width: clamp(76px, 11vw, 98px);
    min-height: 44px;
    padding: 0 10px;
    border-width: 3px;
    box-shadow: 3px 3px 0 #000;
    font-size: clamp(14px, 3.8svh, 17px);
  }

  .stakes-game.is-result-underlay .bj-row {
    opacity: 0.28;
    filter: grayscale(0.45) saturate(0.5);
  }

  .stakes-game.is-result-underlay .bj-tray {
    visibility: hidden;
  }

  .stakes-result {
    gap: 8px;
    padding: 10px;
    overflow: hidden;
    background: rgba(5, 6, 10, 0.52);
  }

  .stakes-result__banner {
    max-width: calc(100% - 20px);
    margin: 0;
    padding: 7px 13px;
    border-width: 3px;
    box-shadow: 3px 3px 0 #000;
    font-size: 11px;
    transform: none;
  }

  .stakes-result .hero-button {
    min-width: 172px;
  }

  /* Pool Shark shop. The vendor owns the left side and physically presents
     the stock; the offerings rail remains this modal's only scroll root. */
  .shop-card {
    display: grid;
    grid-template-columns: clamp(142px, 19.5vw, 176px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(7px, 1.15vw, 10px);
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: 100%;
    padding: clamp(7px, 1.9svh, 10px) clamp(10px, 1.8vw, 16px);
    overflow: hidden;
    background:
      linear-gradient(130deg, rgba(255, 255, 255, 0.1), transparent 36%),
      var(--pink);
  }

  .shop-host {
    min-width: 0;
    min-height: 0;
    height: 100%;
    border-width: 3px;
    box-shadow: 4px 4px 0 #000;
    transform: none;
  }

  .shop-host::after {
    right: -25%;
    bottom: 18%;
    height: 9px;
  }

  .shop-shark {
    top: auto;
    right: clamp(-31px, -3vw, -18px);
    bottom: clamp(-21px, -4svh, -13px);
    width: clamp(205px, 27vw, 238px);
    max-width: none;
    height: auto;
    filter: drop-shadow(-4px 5px 0 rgba(0, 0, 0, 0.52));
    animation: none;
    transform: rotate(1deg);
  }

  .shop-card .vendor-lockup {
    display: block;
    min-height: 0;
    margin: 0;
    padding: 8px 7px 0;
    text-align: left;
  }

  .shop-card .vendor-lockup h2,
  .modal-card.shop-card .vendor-lockup h2 {
    margin: 0;
    font-size: clamp(29px, 8.4svh, 35px);
    line-height: 0.74;
    -webkit-text-stroke: 1px #000;
    text-shadow: 2px 2px 0 #000;
  }

  .shop-card .vendor-lockup h2 span {
    margin-top: 7px;
    font-size: 11px;
    line-height: 1;
    text-shadow: 1px 1px 0 #000;
  }

  .shop-host > #shop-copy {
    display: block;
    top: 33%;
    right: 7px;
    width: calc(100% - 14px);
    padding: 6px 7px;
    border-width: 2px;
    box-shadow: 2px 2px 0 #000;
    font-size: 9px;
    line-height: 1.24;
    transform: rotate(1deg);
  }

  .shop-host > #shop-copy::after {
    right: 16px;
    bottom: -7px;
    width: 10px;
    height: 10px;
    border-right-width: 2px;
    border-bottom-width: 2px;
  }

  .shop-offerings {
    min-width: 0;
    min-height: 0;
    height: 100%;
  }

  .shop-offerings-heading {
    min-height: clamp(34px, 9.5svh, 39px);
    gap: 7px;
    padding: 0 3px 5px;
    border-bottom-width: 3px;
  }

  .shop-offerings-heading span {
    padding: 2px 4px;
    box-shadow: 2px 2px 0 #000;
    font-size: 5.5px;
    white-space: nowrap;
  }

  .shop-offerings-heading strong {
    font-size: clamp(18px, 5.2svh, 22px);
    line-height: 0.88;
    white-space: nowrap;
  }

  .shop-stock.reward-choices {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(7px, 0.9vw, 8px);
    width: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 5px 4px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 4px;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .shop-stock .shop-slot {
    display: grid;
    grid-template-rows:
      auto
      minmax(var(--mobile-card-title-row), auto)
      minmax(var(--mobile-card-effect-row), auto)
      minmax(0, 1fr)
      auto;
    justify-items: center;
    flex: 1 0 clamp(104px, 13.6vw, 118px);
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 7px 6px 5px;
    border: 3px solid #000;
    box-shadow: 3px 3px 0 #000;
    scroll-snap-align: start;
    text-align: center;
    transform: none;
  }

  .shop-stock .shop-slot:hover,
  .shop-stock .shop-slot:focus-visible {
    box-shadow: 2px 2px 0 #000;
    transform: translate(1px, 1px);
  }

  .shop-stock .shop-slot .chalk-art,
  .shop-stock .shop-slot .reward-choice__icon {
    position: static;
    width: clamp(43px, 13svh, 56px);
    height: clamp(43px, 13svh, 56px);
    margin: 0 auto 2px;
    border: 3px solid #000;
    box-shadow: 2px 2px 0 #000;
  }

  .shop-stock .shop-slot .chalk-art--glyph i {
    font-size: 19px;
    text-shadow: 1px 1px 0 rgba(255, 251, 231, 0.9);
  }

  .shop-stock .shop-slot strong {
    display: flex;
    min-height: var(--mobile-card-title-row);
    align-items: center;
    justify-content: center;
    margin: 2px 0 var(--mobile-card-row-gap);
    overflow-wrap: anywhere;
    font-size: clamp(11px, 3.4svh, 14px);
    line-height: 1.05;
  }

  .shop-stock .shop-slot b {
    display: flex;
    min-height: var(--mobile-card-effect-row);
    align-items: center;
    justify-content: center;
    margin: 0 0 var(--mobile-card-copy-gap);
    padding: 2px 4px;
    overflow: visible;
    font-size: clamp(6px, 1.7svh, 7.5px);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .shop-stock .shop-slot p {
    display: -webkit-box;
    margin: 0;
    padding: 1px 2px 0;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.76);
    font-size: clamp(7px, 2svh, 8.5px);
    font-weight: 800;
    line-height: 1.22;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .shop-stock .shop-slot .reward-choice__rarity {
    margin-top: 2px;
    padding: 1px 4px;
    border-width: 1px;
    font-size: 6px;
  }

  .shop-stock .shop-slot.is-sold {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mobile-card-copy-gap);
  }

  .shop-stock .shop-slot.is-sold strong,
  .shop-stock .shop-slot.is-sold p {
    min-height: 0;
    margin: 0;
  }

  .shop-slot .price-tag {
    top: 3px;
    right: 3px;
    display: grid;
    min-width: 35px;
    min-height: 26px;
    padding: 3px 7px 4px 5px;
    place-items: center;
    overflow: visible;
    border-width: 2px;
    box-shadow: 2px 2px 0 #000;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 1.08;
    transform: none;
    white-space: nowrap;
  }

  .shop-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    margin: 5px 0 0;
  }

  .shop-cash {
    display: flex;
    flex: 0 0 auto;
    min-height: 34px;
    align-items: center;
    overflow: visible;
    font-size: 8px;
    line-height: 1.15;
  }

  .shop-cash b {
    display: inline-block;
    min-width: 42px;
    min-height: 32px;
    margin-left: 4px;
    padding: 2px 5px 4px 2px;
    overflow: visible;
    font-size: clamp(19px, 5.7svh, 24px);
    font-variant-numeric: tabular-nums;
    line-height: 1.08;
    vertical-align: middle;
    white-space: nowrap;
    -webkit-text-stroke: 1px #000;
    text-shadow: 1px 1px 0 var(--pink);
  }

  .shop-actions #shop-reroll {
    min-width: 104px;
    min-height: 44px;
    padding: 0 10px;
    border-width: 3px;
    box-shadow: 3px 3px 0 #000;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
  }

  .shop-actions #shop-leave {
    min-width: clamp(170px, 25vw, 210px);
    height: 44px;
  }

  /* Game over */
  .gameover-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: none;
    background:
      linear-gradient(124deg, rgba(255, 255, 255, 0.12), transparent 40%),
      var(--pink);
  }

  .gameover-card h2 {
    margin-bottom: 6px;
  }

  .gameover-card > #gameover-copy {
    margin-bottom: 7px;
  }

  .final-score {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 12px;
    margin: 0 0 9px;
    padding: 4px 11px 5px;
    overflow: visible;
    border: 3px solid #000;
    color: #000;
    background: #fff;
    box-shadow: 3px 3px 0 #000;
    font-size: 8px;
    line-height: 1.15;
  }

  .final-score strong {
    display: block;
    min-width: 50px;
    min-height: 38px;
    padding: 2px 6px 4px 2px;
    overflow: visible;
    color: var(--cobalt);
    font-size: clamp(24px, 7svh, 30px);
    font-variant-numeric: tabular-nums;
    line-height: 1.08;
    white-space: nowrap;
    -webkit-text-stroke: 0;
    text-shadow: none;
  }

  /* How to play */
  .howto-card {
    display: block;
    width: 100%;
    max-width: none;
    padding-right: clamp(15px, 2.5vw, 22px);
    color: #000;
    background:
      radial-gradient(circle, rgba(0, 0, 0, 0.11) 1px, transparent 1.5px) 0 0 / 12px 12px,
      var(--acid);
    text-align: left;
  }

  .howto-card .eyebrow,
  .howto-card h2 {
    margin-left: 2px;
  }

  .howto-card h2 {
    padding-right: 50px;
    color: #fff;
  }

  .howto-card ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
    margin: 6px 0 0;
    padding: 0 3px 4px;
    overflow: visible;
  }

  .howto-card li {
    min-width: 0;
    min-height: 64px;
    padding: 7px 8px 7px 36px;
    border: 2px solid #000;
    background: var(--cobalt);
    box-shadow: 3px 3px 0 var(--pink);
  }

  .howto-card li::before {
    left: 8px;
    font-size: 15px;
  }

  .howto-card li b {
    margin-bottom: 2px;
    font-size: clamp(11px, 3svh, 13px);
    line-height: 1;
  }

  .howto-card li span {
    font-size: clamp(8px, 2.25svh, 9.5px);
    line-height: 1.18;
  }

  /* Power-up detail */
  #powerup-modal {
    place-items: center;
  }

  #powerup-modal .powerup-detail-card {
    grid-template-columns: clamp(88px, 26svh, 112px) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    align-content: center;
    gap: 5px clamp(14px, 2.5vw, 24px);
    width: min(620px, 100%);
    height: auto;
    min-height: min(250px, 100%);
    max-height: 100%;
    padding: clamp(13px, 3.5svh, 18px) clamp(18px, 3vw, 26px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 3px solid #000;
    background:
      linear-gradient(118deg, transparent 0 72%, rgba(234, 255, 56, 0.8) 72% 76%, transparent 76%),
      radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.2) 0 1.5px, transparent 2px) 0 0 / 11px 11px,
      var(--pink);
  }

  #powerup-art {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    width: 100%;
    max-width: 112px;
    margin: 0;
    border-width: 3px;
    box-shadow: 4px 4px 0 #000;
  }

  #powerup-name,
  .modal-card #powerup-name {
    grid-column: 2;
    align-self: flex-start;
    margin: 0 42px 0 0;
    padding: 1px 3px 3px 0;
    overflow: visible;
    font-size: clamp(25px, 7.5svh, 34px);
    line-height: 1.04;
    text-align: left;
    -webkit-text-stroke: 1px #000;
    text-shadow: 2px 2px 0 #000;
  }

  #powerup-kicker {
    grid-column: 2;
    margin: 0;
    padding: 3px 6px;
    border-width: 2px;
    box-shadow: 2px 2px 0 #000;
    font-size: clamp(7px, 2.2svh, 9px);
  }

  #powerup-description,
  .modal-card > #powerup-description {
    grid-column: 2;
    max-width: none;
    margin: 2px 0 0;
    color: #08090d;
    font-size: clamp(9px, 2.6svh, 11px);
    line-height: 1.25;
    text-shadow: none;
  }

  #powerup-level {
    grid-column: 2;
    display: block;
    max-width: 100%;
    min-height: 27px;
    margin: 2px 0 0;
    padding: 4px 9px 5px 6px;
    overflow: visible;
    border-width: 2px;
    box-shadow: 2px 2px 0 #000;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    line-height: 1.22;
    overflow-wrap: anywhere;
  }

  .powerup-action-panel {
    margin-top: 2px;
    padding: 4px;
    gap: 6px;
    border-width: 2px;
    box-shadow: 2px 2px 0 #000;
  }

  .powerup-action-panel.has-secondary {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .powerup-action-panel.has-secondary .powerup-action-buttons {
    justify-content: flex-end;
  }

  .powerup-action-panel.has-secondary .powerup-action-buttons > button {
    flex: 0 1 auto;
  }

  #powerup-action-status {
    font-size: clamp(7px, 1.9svh, 8.5px);
    line-height: 1.12;
  }

  #powerup-action-button,
  #powerup-action-secondary {
    min-width: clamp(106px, 15vw, 128px);
    min-height: 44px;
    padding: 5px 8px;
    border-width: 2px;
    box-shadow: 2px 2px 0 #000;
    font-size: clamp(9px, 2.4svh, 11px);
  }
}

/* The 667x375 fallback gets a little more room for actions than typography.
   Current iPhone 16 widths use the main rules above. */
@media (max-width: 700px) and (max-height: 600px) and (orientation: landscape) {
  .modal-card {
    padding-inline: 10px;
  }

  .reward-card .reward-choice p {
    font-size: 7.5px;
  }

  .stakes-bet {
    gap: 8px;
    padding: 10px;
  }

  .stakes-bet__actions button:not(.hero-button) {
    min-width: 76px;
  }

  .stakes-bet__actions .hero-button {
    min-width: 96px;
  }

  .bj-actions button {
    min-width: 72px;
  }

  .shop-stock .shop-slot {
    flex-basis: 104px;
  }

  .shop-actions #shop-leave {
    min-width: 164px;
  }
}

/* Multiplayer is a fixed control surface, never a document or card scroll.
   Its short-landscape layout uses the otherwise dead title column so every
   setup and room control remains visible at once. */
#multiplayer-modal {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

#multiplayer-modal .multiplayer-card {
  overflow: hidden;
  overscroll-behavior: none;
}

@media (max-height: 600px) and (orientation: landscape) {
  #multiplayer-modal .multiplayer-card {
    display: grid;
    grid-template-columns: minmax(105px, 0.6fr) minmax(0, 1.4fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    align-items: center;
    justify-items: stretch;
    column-gap: clamp(10px, 2.3vw, 26px);
    row-gap: clamp(3px, 1.2svh, 7px);
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: clamp(9px, 2.5svh, 16px) clamp(11px, 2.2vw, 24px);
    background:
      linear-gradient(112deg, var(--pink) 0 13%, transparent 13% 87%, var(--acid) 87%),
      radial-gradient(circle at 25% 50%, rgba(255, 255, 255, 0.13), transparent 38%),
      var(--cobalt);
  }

  #multiplayer-modal .multiplayer-card::before {
    inset: 7px;
    border-width: 2px;
  }

  #multiplayer-modal .multiplayer-card > .eyebrow {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    justify-self: start;
    max-width: calc(100% - 4px);
    margin: 0 0 2px;
    font-size: clamp(7px, 1.8svh, 10px);
  }

  #multiplayer-modal .multiplayer-card > h2 {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    justify-self: start;
    max-width: 100%;
    margin: 0;
    font-size: clamp(30px, 5.6vw, 62px);
    line-height: 0.82;
    -webkit-text-stroke-width: clamp(1.5px, 0.25vw, 3px);
    text-shadow:
      clamp(3px, 0.6vw, 6px) clamp(3px, 0.6vw, 6px) 0 var(--acid),
      clamp(5px, 0.9vw, 9px) clamp(5px, 0.9vw, 9px) 0 #000;
  }

  #multiplayer-modal .modal-card.multiplayer-card > p.multiplayer-card__copy {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    justify-self: start;
    max-width: 220px;
    margin: 3px 0 0;
    color: var(--cream);
    font-size: clamp(9px, 2.4svh, 13px);
    line-height: 1.18;
    text-align: left;
  }

  #multiplayer-modal .mp-panel {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: center;
    width: min(470px, 100%);
    gap: clamp(5px, 1.6svh, 9px);
    padding: clamp(8px, 2.4svh, 15px);
    overflow: hidden;
    border-width: 3px;
    box-shadow: 4px 4px 0 var(--pink), 7px 7px 0 #000;
  }

  #multiplayer-modal .mp-setup {
    gap: clamp(4px, 1.4svh, 8px);
  }

  #multiplayer-modal .mp-panel__row {
    gap: clamp(5px, 1vw, 8px);
  }

  #multiplayer-modal .mp-panel__divider {
    gap: 5px;
    font-size: clamp(7px, 1.8svh, 9px);
  }

  #multiplayer-modal .mp-field {
    gap: 1px;
    font-size: clamp(8px, 2svh, 10px);
  }

  #multiplayer-modal .mp-field input {
    width: clamp(56px, 7vw, 64px);
    min-height: clamp(32px, 8svh, 40px);
    padding: 4px 6px;
    border-width: 2px;
    font-size: clamp(14px, 3.8svh, 18px);
  }

  #multiplayer-modal .mp-field--code input {
    width: clamp(88px, 12vw, 108px);
  }

  #multiplayer-modal .mp-panel__row > button {
    min-width: clamp(112px, 16vw, 144px);
    min-height: clamp(36px, 8svh, 44px);
    padding: 6px 10px;
    border-width: 2px;
    font-size: clamp(10px, 2.8svh, 14px);
    box-shadow: 2px 2px 0 #000;
  }

  #multiplayer-modal .mp-room {
    gap: clamp(4px, 1.4svh, 8px);
  }

  #multiplayer-modal .mp-room__code {
    gap: 0;
  }

  #multiplayer-modal .mp-room__code span {
    font-size: clamp(7px, 1.8svh, 9px);
  }

  #multiplayer-modal .mp-room__code strong {
    font-size: clamp(27px, 7svh, 38px);
    line-height: 0.95;
  }

  #multiplayer-modal .mp-seat-list {
    gap: clamp(4px, 1vw, 7px);
  }

  #multiplayer-modal .mp-seat-list li {
    gap: 4px;
    padding: 3px 7px;
    border-width: 2px;
    font-size: clamp(9px, 2.5svh, 12px);
    box-shadow: 2px 2px 0 #000;
  }

  #multiplayer-modal .mp-seat-list li i {
    width: 9px;
    height: 9px;
    border-width: 1.5px;
  }

  #multiplayer-modal .mp-room__actions {
    gap: clamp(5px, 1vw, 9px);
  }

  #multiplayer-modal .mp-room__actions button {
    min-height: clamp(34px, 8svh, 42px);
    padding: 5px clamp(7px, 1.2vw, 12px);
    border-width: 2px;
    font-size: clamp(9px, 2.4svh, 12px);
    box-shadow: 2px 2px 0 #000;
  }

  #multiplayer-modal .mp-room-note {
    min-height: 11px;
    font-size: clamp(8px, 2.2svh, 10px);
    line-height: 1.15;
  }

  #multiplayer-modal #multiplayer-close {
    top: 7px;
    right: auto;
    left: 7px;
  }
}

/* Three full-width actions do not fit side by side on the 568px shell.
   Keep the primary action beside the original compact secondary stack. */
@media (max-width: 620px) and (max-height: 600px) and (orientation: landscape) {
  .intro-card .menu-secondary-actions {
    display: grid;
    gap: 6px;
    min-width: 154px;
  }
}