/* ==========================================================================
   Dispensary Dash — arcade section, cabinet, leaderboard, phone play overlay
   ========================================================================== */

.dash-retro .arcade { --pix: "Tiny5", "JetBrains Mono", monospace; --pix-big: "Silkscreen", "JetBrains Mono", monospace; font-synthesis: none; --sat: #ffa31a; --hyb: #4ee04e; --ind: #b26bff; }
.dash-retro .arcade__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: clamp(32px, 6vw, 96px); row-gap: 0; align-items: start; }
.dash-retro .arcade__copy { grid-column: 1; grid-row: 1; align-self: end; }
.dash-retro .cab { grid-column: 2; grid-row: 1 / span 2; }
.dash-retro .lb { grid-column: 1; grid-row: 2; }
.dash-retro .arcade__copy .lede { max-width: 420px; }
/* room for glyph overhang (the y of "Dispensary") inside the line-reveal clip */
.dash-retro .arcade .lines .ln { padding-inline: 0.1em; margin-inline: -0.1em; }

/* ---------- leaderboard panel ---------- */
.dash-retro .lb { margin-top: 44px; max-width: 420px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); padding: 22px 24px 18px; }
.dash-retro .lb__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
.dash-retro .lb__test { letter-spacing: 0.04em; text-transform: none; font-size: 11px; }
.dash-retro .lb__head { flex-wrap: wrap; row-gap: 4px; }
.dash-retro .lb__head > span { white-space: nowrap; }
.dash-retro .lb__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.dash-retro .lb__list li { display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-family: var(--dot); font-weight: 800; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.dash-retro .lb__list li:first-child { border-top: 0; }
.dash-retro .lb__list li:nth-child(-n+3) .lb__rank { color: var(--accent); }
.dash-retro .lb__rank { color: var(--fg-3); font-size: 16px; }
.dash-retro .lb__name { letter-spacing: 0.12em; }
.dash-retro .lb__score { text-align: right; }
.dash-retro .lb__dot { width: 18px; height: 6px; border-radius: 99px; background: var(--hyb); }
.dash-retro .lb__dot--green { background: #6dff2e; }
.dash-retro .lb__dot--purple { background: #a46bff; }
.dash-retro .lb__list li.is-new { color: var(--accent); }
.dash-retro .lb__empty { min-height: 300px; border: 0 !important; }

/* ---------- cabinet ---------- */
.dash-retro .cab { --screen-w: min(512px, calc(100vw - 2 * var(--gutter) - 40px), calc((100svh - 290px) * 0.8)); width: calc(var(--screen-w) + 40px); max-width: 100%; margin-inline: auto; }
.dash-retro .cab__marquee {
  position: relative; height: 64px; display: grid; place-items: center;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 28px 28px 0 0;
  background: radial-gradient(120% 140% at 50% 120%, var(--accent-soft), transparent 60%), #070709;
  overflow: hidden;
}
.dash-retro .cab__marquee::after { content: ""; position: absolute; inset: auto 12% 0; height: 1px; background: var(--accent); box-shadow: 0 0 18px 2px var(--accent); opacity: 0.8; }
.dash-retro .cab__marquee span { font-family: var(--pix-big); font-weight: 700; font-size: clamp(22px, 3vw, 30px); letter-spacing: 0.04em; text-transform: uppercase;
  background: linear-gradient(180deg, #ffd27a 0 34%, #6dff2e 34% 68%, #b26bff 68% 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dash-retro .cab__bezel { position: relative; padding: 20px; background: #050506; border-inline: 1px solid var(--line); }
.dash-retro .dd-screen { position: relative; width: var(--screen-w); max-width: 100%; aspect-ratio: 192 / 240; margin-inline: auto; border-radius: 14px; overflow: hidden; background: #0b0818; outline: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 60px -20px var(--accent); }
.dash-retro .dd-screen:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.dash-retro .dd-stage { position: relative; width: 100%; height: 100%; }
.dash-retro .dd-stage canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: manipulation; }
.dash-retro .dd-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px), radial-gradient(130% 100% at 50% 50%, transparent 62%, rgba(0,0,0,0.45)); }
.dash-retro .cab__fs { position: absolute; right: 26px; bottom: 26px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.18); opacity: 0; transition: opacity .3s; z-index: 2; }
.dash-retro .cab__bezel:hover .cab__fs, .dash-retro .cab__fs:focus-visible { opacity: 1; }
.dash-retro .cab__fs svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; }
.dash-retro .dd-screen:fullscreen { width: 100%; height: 100%; border-radius: 0; display: grid; place-items: center; background: #000; }
.dash-retro .dd-screen:fullscreen .dd-stage { height: 100%; width: auto; aspect-ratio: 192 / 240; }

.dash-retro .cab__deck {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px;
  padding: 20px 24px 24px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 28px 28px;
  background: linear-gradient(180deg, #0c0c10, #050506);
}
.dash-retro .cab__stick, .dash-retro .cab__btns { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* joystick: dark base plate with a glossy ball top */
.dash-retro .cab__stick { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #24242c, #0b0b0f 70%); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.06); }
.dash-retro .cab__stick i { width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0 9%, var(--accent) 34%, color-mix(in srgb, var(--accent) 35%, #000) 100%);
  box-shadow: 0 6px 10px rgba(0,0,0,0.6), 0 0 16px -2px var(--accent); }
/* buttons: domed caps in a dark bezel ring */
.dash-retro .cab__btns { display: flex; gap: 18px; justify-content: center; }
.dash-retro .cab__btns i { width: 34px; height: 34px; border-radius: 50%; position: relative;
  box-shadow: 0 0 0 5px #0b0b0f, 0 0 0 6px rgba(255,255,255,0.12), inset 0 -5px 0 rgba(0,0,0,0.35), inset 0 3px 4px rgba(255,255,255,0.35), 0 6px 10px rgba(0,0,0,0.6); }
.dash-retro .cab__btns .s { background: var(--sat); } .dash-retro .cab__btns .h { background: var(--hyb); } .dash-retro .cab__btns .i { background: var(--ind); }

.dash-retro .cab__coinbox { display: flex; align-items: center; gap: 22px; }
/* Insert Coin: one big button with a bobbing pixel arrow pointing at the slot */
.dash-retro .cab__slot {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px 10px 12px; border-radius: 14px;
  background: none; border: 1px solid transparent; color: var(--accent);
  cursor: pointer; outline: none; font: inherit;
  transition: border-color .25s, background-color .25s;
}
.dash-retro .cab__slot:hover, .dash-retro .cab__slot:focus-visible { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.dash-retro .cab__arrow {
  width: 38px; height: 38px; fill: var(--accent); flex: none;
  filter: drop-shadow(0 0 4px var(--accent)) drop-shadow(0 0 10px var(--accent));
  animation: dd-nudge .7s steps(2) infinite;
}
@keyframes dd-nudge { 50% { transform: translateX(7px); } }
.dash-retro .cab__slit { width: 14px; height: 52px; flex: none; border-radius: 7px; background: #000; border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 0 0 5px #121216, 0 0 18px 0 var(--accent); transition: box-shadow .25s; }
.dash-retro .cab__slot:hover .cab__slit, .dash-retro .cab__slot:focus-visible .cab__slit { box-shadow: 0 0 0 5px #121216, 0 0 28px 6px var(--accent); }
.dash-retro .cab__slot.is-hit .cab__slit { box-shadow: 0 0 0 5px #121216, 0 0 34px 10px #fff; }
.dash-retro .cab__label {
  font-family: var(--pix-big); font-weight: 700; font-size: clamp(20px, 2vw, 26px); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  color: var(--accent); text-shadow: 0 0 8px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: dd-blink 1.1s steps(2) infinite;
}
/* keyboard controls as key caps */
.dash-retro .cab__keys {
  margin: 22px auto 0; max-width: 760px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; color: var(--fg-2);
}
.dash-retro .cab__keys span { display: inline-flex; align-items: center; gap: 5px; }
.dash-retro .cab__keys kbd {
  min-width: 28px; height: 28px; padding: 0 7px; display: inline-grid; place-items: center;
  font: 600 13px var(--mono); color: #fff;
  border: 1px solid rgba(255,255,255,0.28); border-bottom-width: 3px; border-radius: 7px; background: #111116;
}

/* ---------- desktop photo cabinet (data-cab-photo="on" + img/arcade-cabinet.webp) ----------
   The photo has a transparent screen hole; the game sits behind it so the CRT bezel frames it.
   --scr-x/--scr-w are % of photo width, --scr-y is % of photo height. */
.dash-retro .cab__photo { display: none; }
.dash-retro .cab--photo .arcade__grid { grid-template-columns: 1fr; grid-template-rows: none; justify-items: center; }
.dash-retro .cab--photo .arcade__copy, .dash-retro .cab--photo .cab, .dash-retro .cab--photo .lb { grid-column: 1; grid-row: auto; }
.dash-retro .cab--photo .arcade__copy { text-align: center; margin-bottom: 8px; }
.dash-retro .cab--photo .arcade__copy .lede { margin-inline: auto; }
.dash-retro .cab--photo .lb { width: 100%; margin-top: 40px; order: 3; }
/* slim leaderboard: top 5, compact rows (the full top 10 is in the game) */
.dash-retro .lb { max-width: 380px; padding: 16px 20px 12px; }
.dash-retro .lb__list li { font-size: 18px; padding: 5px 0; grid-template-columns: 30px 1fr auto auto; gap: 10px; }
.dash-retro .lb__rank { font-size: 14px; }
.dash-retro .lb__empty { min-height: 150px; }
.dash-retro .cab--photo .cab { order: 2; }
.dash-retro .cab--photo .cab { display: grid; grid-template-columns: 100%; max-width: none;
  width: min(1200px, calc(100vw - 2 * var(--gutter)), calc((100svh - 150px) / 0.5634 / var(--photo-ar, 1.04))); }
.dash-retro .cab--photo .cab__photo { display: block; position: relative; z-index: 2; grid-area: 1 / 1; pointer-events: none; }
/* fade the photo (and its glow, below) out towards every edge so nothing ends in a hard line */
.dash-retro .cab--photo .cab__photo img, .dash-retro .cab--photo .cab__photo::before, .dash-retro .cab--photo .cab__photo::after {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.dash-retro .cab--photo .cab__photo img { width: 100%; height: auto; }
.dash-retro .cab--photo .cab__photo::before, .dash-retro .cab--photo .cab__photo::after {
  /* slow neon pulse over the photo's green (left) and purple (right) strips */
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0.35;
}
.dash-retro .cab--photo .cab__photo::before {
  background: radial-gradient(16% 48% at 7.5% 46%, rgba(109, 255, 46, 0.85), rgba(109, 255, 46, 0.25) 45%, transparent 100%);
  animation: dd-neon 4.2s ease-in-out infinite alternate;
}
.dash-retro .cab--photo .cab__photo::after {
  background: radial-gradient(16% 50% at 93% 47%, rgba(184, 120, 255, 0.85), rgba(184, 120, 255, 0.25) 45%, transparent 100%);
  animation: dd-neon 5.6s ease-in-out -2.4s infinite alternate;
}
@keyframes dd-neon { 0% { opacity: 0.08; } 50% { opacity: 0.9; } 100% { opacity: 0.35; } }
.dash-retro .cab--photo .cab__marquee { display: none; }
.dash-retro .cab--photo .cab__bezel { grid-area: 1 / 1; align-self: start; justify-self: start; margin: calc(var(--scr-y) * var(--photo-ar, 1.04)) 0 0 var(--scr-x); width: var(--scr-w); padding: 0; background: none; border: 0; }
.dash-retro .cab--photo .dd-screen { width: 100%; border-radius: 0; box-shadow: none; }
/* inset so the CRT bezel's curved corners don't clip the HUD */
.dash-retro .cab--photo .dd-stage { width: 92%; height: auto; aspect-ratio: 192 / 240; margin: 5% auto 0; }
.dash-retro .cab--photo .dd-screen:focus-visible { box-shadow: none; }
.dash-retro .cab--photo .cab__fs { z-index: 3; right: 10px; bottom: 10px; }
.dash-retro .cab--photo .cab__deck { border: 0; background: none; padding: 0; grid-template-columns: 1fr; justify-items: center; margin-top: -3%; position: relative; z-index: 3; }
.dash-retro .cab--photo .cab__stick, .dash-retro .cab--photo .cab__btns { display: none; }

.dash-retro .arcade__fine { color: var(--fg-3); font-size: 0.85em; }
.dash-retro .arcade__rules { color: var(--fg-2); font-size: 0.85em; text-decoration: underline; text-underline-offset: 3px; }
.dash-retro .arcade__rules[hidden], .dash-retro .arcade__fine:empty { display: none; }
.dash-retro .dd-age { inset: 22% 8% auto; }
.dash-retro .dd-age__row { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 8px; }
.dash-retro .dd-age__row[hidden], .dash-retro .dd-age [hidden] { display: none; }
.dash-retro .dd-age__row input { font: 600 18px var(--pix); text-align: center; padding: 10px 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.3); background: #000; color: #fff; min-width: 0; }
.dash-retro .dd-age__err { margin: 0; color: #ff6a50; font-size: 14px; }
.dash-retro .dd-age__no { margin: 0; font-size: 16px; line-height: 1.35; color: #fff; }
.dash-retro .dd-age .dd-form__t, .dash-retro .dd-age__err, .dash-retro .dd-age__no { text-align: center; text-wrap: balance; }

.dash-retro .cab__coinbox { position: relative; }
.dash-retro .cab__21 { font-family: var(--pix-big); font-weight: 700; font-size: 20px; letter-spacing: 0.04em; color: #fff; border: 2px solid rgba(255,255,255,0.8); border-radius: 8px; padding: 6px 9px 5px; line-height: 1; }

/* desktop: headline on one line, fine print on its own line */
@media (min-width: 981px) {
  .dash-retro .arcade__copy .lines .ln { display: inline-block; vertical-align: top; }
  .dash-retro .cab--photo .arcade__copy .lede { max-width: 640px; }
}
.dash-retro .arcade__copy .arcade__fine { display: block; margin-top: 6px; }

@keyframes dd-blink { 50% { opacity: 0.25; } }

/* email form over the game screen */
.dash-retro .dd-form { position: absolute; inset: 14% 8% auto; z-index: 2; padding: 18px; border-radius: 12px; background: rgba(11, 8, 24, 0.96); border: 2px solid var(--accent); font-family: var(--pix); display: grid; gap: 10px; color: #fff; }
.dash-retro .dd-form[hidden] { display: none; }
.dash-retro .dd-form__t { margin: 0; font-family: var(--pix-big); font-size: 18px; font-weight: 700; color: #ffd23f; }
.dash-retro .dd-form__s { margin: 0; font-size: 14px; line-height: 1.3; color: #c8cce0; }
.dash-retro .dd-form input[type=email] { font: 500 16px var(--pix); padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.3); background: #000; color: #fff; }
.dash-retro .dd-form label { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.dash-retro .dd-form input[type=checkbox] { accent-color: var(--accent); width: 18px; height: 18px; }
.dash-retro .dd-form__row { display: flex; gap: 10px; margin-top: 4px; }
.dash-retro .dd-form__row button { flex: 1; font: 700 15px var(--pix-big); padding: 10px; border-radius: 8px; background: var(--accent); color: #000; }
.dash-retro .dd-form__row [data-skip] { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); }

/* ---------- phone play overlay ---------- */
html.dd-lock, html.dd-lock body { overflow: hidden; }
html.dd-lock body { position: fixed; width: 100%; }
.dash-retro .dd-ov {
  position: fixed; inset: 0; z-index: 80; height: 100vh; height: 100dvh; background: #000;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.dash-retro .dd-ov[hidden] { display: none; }
.dash-retro .dd-ov__bar { display: grid; grid-template-columns: 44px 1fr 44px 44px; align-items: center; gap: 6px; padding: 6px 10px; font-family: var(--pix-big); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 13px; color: var(--fg-2); text-align: center; }
.dash-retro .dd-ov__bar button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 18px; }
.dash-retro .dd-ov__bar svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.dash-retro .dd-ov__bar svg path:first-child { fill: #fff; }
.dash-retro .dd-ov__bar [data-act="pause"] svg path:first-child { fill: none; }
/* while paused the button shows a play triangle (resume) */
.dash-retro .dd-ov__bar [data-act="pause"] .pl { display: none; fill: #fff; stroke-linejoin: round; }
.dash-retro .dd-ov__bar [data-act="pause"].is-paused .pz { display: none; }
.dash-retro .dd-ov__bar [data-act="pause"].is-paused .pl { display: block; }
.dash-retro .dd-ov__bar [aria-pressed="true"] .w { opacity: 0.15; }
.dash-retro .dd-ov__screen { display: grid; place-items: center; min-height: 0; min-width: 0; padding: 0 8px; }
.dash-retro .dd-ov__screen canvas { max-width: 100%; }
.dash-retro .dd-ov__screen .dd-stage { height: auto; width: min(100%, calc((100dvh - 250px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 0.8)); aspect-ratio: 192 / 240; border-radius: 10px; overflow: hidden; }
.dash-retro .dd-ov__screen .dd-form { inset: 8% 5% auto; }

.dash-retro .dd-pad { --dp: min(54px, 11.6vw); --sv: min(64px, 13vw); display: flex; justify-content: space-between; align-items: center; padding: 10px 18px 30px; gap: 16px; }
.dash-retro .dd-pad button { touch-action: none; -webkit-tap-highlight-color: transparent; }
.dash-retro .dd-dpad { display: grid; grid-template-columns: repeat(3, var(--dp)); grid-template-rows: repeat(3, var(--dp)); }
.dash-retro .dd-dpad { padding: 6px; border-radius: 22px; background: #0b0b0f; box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.08); }
.dash-retro .dd-dpad button { background: linear-gradient(180deg, #2a2a33, #18181e); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 3px 0 #050507; position: relative; }
.dash-retro .dd-dpad button::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border: 9px solid transparent; }
.dash-retro .dd-dpad .u { grid-area: 1 / 2; border-radius: 14px 14px 4px 4px; } .dash-retro .dd-dpad .u::after { border-bottom-color: #fff; border-top-width: 0; }
.dash-retro .dd-dpad .d { grid-area: 3 / 2; border-radius: 4px 4px 14px 14px; } .dash-retro .dd-dpad .d::after { border-top-color: #fff; border-bottom-width: 0; }
.dash-retro .dd-dpad .l { grid-area: 2 / 1; border-radius: 14px 4px 4px 14px; } .dash-retro .dd-dpad .l::after { border-right-color: #fff; border-left-width: 0; }
.dash-retro .dd-dpad .r { grid-area: 2 / 3; border-radius: 4px 14px 14px 4px; } .dash-retro .dd-dpad .r::after { border-left-color: #fff; border-right-width: 0; }
.dash-retro .dd-dpad .is-down { background: #33333e; transform: translateY(2px); box-shadow: 0 1px 0 #050507; }
.dash-retro .dd-serve { display: grid; grid-template-columns: repeat(3, var(--sv)); gap: 14px; align-items: end; }
.dash-retro .dd-serve button { height: var(--sv); border-radius: 50%; display: grid; place-items: end center; padding-bottom: 0; position: relative;
  box-shadow: 0 0 0 3px #0b0b0f, 0 0 0 4px rgba(255,255,255,0.14), inset 0 -6px 0 rgba(0,0,0,0.3), inset 0 4px 6px rgba(255,255,255,0.35), 0 8px 12px rgba(0,0,0,0.6); }
.dash-retro .dd-serve button:nth-child(2) { margin-bottom: 26px; }
.dash-retro .dd-serve b { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font: 600 11px var(--pix); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-2); }
.dash-retro .dd-serve .s { background: var(--sat); } .dash-retro .dd-serve .h { background: var(--hyb); } .dash-retro .dd-serve .i { background: var(--ind); }
.dash-retro .dd-serve .is-down { transform: translateY(3px); box-shadow: 0 0 0 3px #0b0b0f, 0 0 0 4px rgba(255,255,255,0.14), inset 0 -2px 0 rgba(0,0,0,0.3), 0 3px 6px rgba(0,0,0,0.6); filter: brightness(1.15); }

@media (orientation: landscape) and (max-height: 560px) {
  .dash-retro .dd-ov { grid-template-rows: auto minmax(0, 1fr); grid-template-columns: 1fr; }
  .dash-retro .dd-ov__screen .dd-stage { width: auto; height: calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .dash-retro .dd-pad { position: absolute; inset: auto 0 0; pointer-events: none; padding: 0 calc(16px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
  .dash-retro .dd-pad > * { pointer-events: auto; }
  .dash-retro .dd-pad { --sv: 56px; --dp: 48px; }
}

@media (max-width: 980px) {
  .dash-retro .arcade__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .dash-retro .arcade__copy, .dash-retro .cab, .dash-retro .lb { grid-column: 1; grid-row: auto; }
  .dash-retro .arcade__copy { text-align: center; margin-bottom: 40px; }
  .dash-retro .arcade__copy .lede, .dash-retro .lb { margin-inline: auto; }
  .dash-retro .lb { width: 100%; order: 3; margin-top: 40px; }
  .dash-retro .cab { order: 2; }
}
@media (pointer: coarse) {
  .dash-retro .cab__keys, .dash-retro .cab__fs { display: none; }
  .dash-retro .dd-screen { cursor: pointer; }
}
@media (max-width: 640px) {
  .dash-retro .cab__bezel { padding: 12px; }
  .dash-retro .cab__deck { padding: 16px; gap: 14px; grid-template-columns: auto 1fr; }
  .dash-retro .cab__stick { width: 60px; height: 60px; } .dash-retro .cab__stick i { width: 32px; height: 32px; }
  .dash-retro .cab__btns { gap: 22px; justify-content: flex-end; padding-right: 6px; }
  .dash-retro .cab__btns i { width: 38px; height: 38px; }
  /* Insert Coin gets its own row under the stick and buttons */
  .dash-retro .cab__coinbox { grid-column: 1 / -1; justify-self: center; gap: 14px; }
  .dash-retro .cab__slot { gap: 10px; padding: 8px 12px 8px 8px; }
  .dash-retro .cab__arrow { width: 30px; height: 30px; }
  .dash-retro .cab__slit { height: 44px; width: 12px; }
  .dash-retro .cab__label { font-size: 19px; }
  .dash-retro .cab__21 { font-size: 17px; padding: 5px 7px 4px; }
  .dash-retro .lb { padding: 18px; }
  .dash-retro .lb__list li { font-size: 19px; }
}

/* ---------- end-of-game board: Play again + Shop Now ---------- */
.dash-retro .dd-end { display: none; flex-wrap: wrap; justify-content: center; gap: 12px; }
.dash-retro .dd-end [data-c] { display: none; }
html:not([data-cw="purple"]) .dash-retro .dd-end [data-c="green"],
html[data-cw="purple"] .dash-retro .dd-end [data-c="purple"] { display: inline-flex; }
.dash-retro .dd-end__again { font: inherit; cursor: pointer; border: 1px solid rgba(255,255,255,0.35); color: #fff; background: rgba(255,255,255,0.04); }
.dash-retro .dd-end__again:hover, .dash-retro .dd-end__again:focus-visible { border-color: #fff; }
.dash-retro .dd-is-end .dd-end { display: flex; animation: dd-end-in .45s cubic-bezier(.22,1,.36,1) both; }
.dash-retro .dd-is-end .cab__coinbox { display: none; }
@keyframes dd-end-in { from { opacity: 0; transform: translateY(10px); } }
/* on the cabinet the buttons sit on the lower part of the score board, where the player is looking */
.dash-retro .cab__bezel .dd-end { position: absolute; left: 6%; right: 6%; bottom: 3%; z-index: 4; }
/* phone game: the buttons take the controls' place */
.dash-retro .dd-end--ov { padding: 18px 18px calc(30px + env(safe-area-inset-bottom)); }
.dash-retro .dd-is-end .dd-ov .dd-pad { display: none; }
.dash-retro .dd-end--ov .btn { flex: 1 1 100%; justify-content: center; }

/* phones: the title block sits closer to the cabinet */
@media (max-width: 640px) {
  .dash-retro .arcade__copy, .dash-retro .cab--photo .arcade__copy { margin-bottom: 22px; }
  /* keyboard controls are for computers; also hidden on phone-width screens, not just touch screens */
  .dash-retro .cab__keys { display: none; }
  .dash-retro .lb, .dash-retro .cab--photo .lb { margin-top: 24px; }
}