:root {
  color-scheme: dark;
  --ink: #f7f2e8;
  --muted: #aeb8b5;
  --panel: rgba(8, 10, 14, 0.72);
  --panel-strong: rgba(14, 15, 20, 0.88);
  --edge: rgba(255, 255, 255, 0.22);
  --edge-hot: rgba(255, 186, 76, 0.66);
  --cyan: #4df2ff;
  --magenta: #ff4ca8;
  --amber: #ffb443;
  --green: #9bff75;
  --red: #ff5d5d;
  --blue: #6ea8ff;
  --shadow: rgba(0, 0, 0, 0.58);
  --home-vw: 100vw;
  --font-display: "Arial Black", "Segoe UI", "Trebuchet MS", sans-serif;
  --font-pixel: "Consolas", "Courier New", monospace;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  overflow-x: clip;
  scroll-behavior: auto;
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 76, 168, 0.22), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(77, 242, 255, 0.16), transparent 24%),
    linear-gradient(145deg, #06070a 0%, #111013 44%, #080b0d 100%);
  font-family: "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
}

body.is-player-open {
  overflow: hidden;
}

body.is-message-open {
  overflow: hidden;
}

body.is-player-open .topbar,
body.is-player-open .site-footer {
  display: none;
}

.edge-aura-canvas {
  position: fixed;
  inset: 0;
  z-index: 38;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.edge-aura-canvas[hidden],
body.is-player-open .edge-aura-canvas {
  display: none !important;
}

.three-background {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: -4;
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 76, 168, 0.16), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(77, 242, 255, 0.12), transparent 24%),
    linear-gradient(145deg, #06070a 0%, #111013 44%, #080b0d 100%);
}

body.three-fallback .three-background {
  display: none;
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.background-plate {
  position: fixed;
  inset: 0;
  z-index: -3;
  background-image:
    radial-gradient(circle at 16% 28%, rgba(255, 76, 168, 0.12), transparent 30%),
    radial-gradient(circle at 74% 14%, rgba(77, 242, 255, 0.1), transparent 27%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.82)),
    url("assets/lost-games-background.webp?v=1");
  background-size: cover;
  background-position: center;
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.015);
}

body.three-fallback .background-plate {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.86)),
    url("assets/lost-games-background.webp?v=1");
}

body.three-ready .background-plate {
  background-image:
    radial-gradient(circle at 16% 28%, rgba(255, 76, 168, 0.16), transparent 30%),
    radial-gradient(circle at 74% 14%, rgba(77, 242, 255, 0.13), transparent 27%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.82));
  filter: none;
  transform: none;
}

.background-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 4, 6, 0.82), rgba(5, 8, 11, 0.24) 45%, rgba(0, 0, 0, 0.76)),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 19px);
}

.scanline {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  opacity: 0.12;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0,
    rgba(255, 255, 255, 0.2) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: soft-light;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 74px;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(4, 5, 8, 0.68);
  backdrop-filter: blur(20px) saturate(1.25);
  box-shadow: 0 12px 42px rgba(0, 0, 0, 0.26);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}

.case-flip-button {
  position: relative;
  width: clamp(210px, 18vw, 280px);
  height: 54px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
    rgba(5, 6, 9, 0.82);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.2),
    0 0 26px rgba(77, 242, 255, 0.12),
    0 10px 28px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  cursor: pointer;
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.case-flip-button::before,
.case-flip-button::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
}

.case-flip-button::before {
  background:
    linear-gradient(105deg, transparent 0 34%, rgba(255, 255, 255, 0.64) 48%, transparent 62% 100%),
    radial-gradient(circle at 23% 48%, rgba(255, 76, 168, 0.36), transparent 36%),
    radial-gradient(circle at 78% 48%, rgba(77, 242, 255, 0.28), transparent 36%);
  mix-blend-mode: screen;
  transform: translateX(-120%);
}

.case-flip-button::after {
  border: 1px solid rgba(77, 242, 255, 0.78);
  border-radius: inherit;
  box-shadow:
    inset 0 0 28px rgba(77, 242, 255, 0.28),
    0 0 34px rgba(255, 76, 168, 0.35),
    0 0 52px rgba(77, 242, 255, 0.22);
}

.case-flip-button:hover,
.case-flip-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 180, 67, 0.58);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.25),
    0 0 30px rgba(77, 242, 255, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.32);
}

.case-flip-button.is-firing::before {
  animation: caseButtonSweep 620ms ease-out;
}

.case-flip-button.is-firing::after {
  animation: caseButtonPulse 620ms ease-out;
}

.case-flip-button-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  filter: saturate(1.08) contrast(1.08);
}

.brand-device {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(77, 242, 255, 0.16), rgba(255, 76, 168, 0.1)),
    rgba(6, 8, 11, 0.86);
  box-shadow:
    inset 0 0 18px rgba(77, 242, 255, 0.12),
    0 0 24px rgba(255, 76, 168, 0.16);
  overflow: hidden;
}

.brand-device::before,
.brand-device::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.brand-device::before {
  top: 8px;
}

.brand-device::after {
  bottom: 8px;
}

.brand-disc {
  position: absolute;
  width: 26px;
  height: 26px;
  left: 6px;
  top: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.82) 0 18%, rgba(255, 255, 255, 0.9) 19% 23%, transparent 24%),
    conic-gradient(from 30deg, #4df2ff, #ff4ca8, #ffb443, #f7f2e8, #4df2ff);
  box-shadow: 0 0 16px rgba(77, 242, 255, 0.28);
}

.brand-reel {
  position: absolute;
  bottom: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.72) 0 27%, rgba(255, 255, 255, 0.75) 28% 35%, rgba(50, 55, 64, 0.92) 36%),
    repeating-conic-gradient(rgba(255, 255, 255, 0.7) 0 12deg, rgba(255, 255, 255, 0.06) 12deg 28deg);
}

.brand-reel-a {
  right: 18px;
}

.brand-reel-b {
  right: 5px;
}

.brand-code {
  color: rgba(247, 242, 232, 0.8);
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255, 180, 67, 0.28);
}

.brand-logo {
  display: block;
  width: clamp(176px, 23vw, 318px);
  height: auto;
  filter:
    drop-shadow(0 0 18px rgba(77, 242, 255, 0.24))
    drop-shadow(0 0 20px rgba(255, 76, 168, 0.18));
}

.brand-mark {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.03)),
    rgba(13, 15, 19, 0.82);
  box-shadow:
    inset 0 0 20px rgba(77, 242, 255, 0.14),
    0 0 28px rgba(255, 76, 168, 0.18);
  overflow: hidden;
}

.brand-mark .disc {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 5px;
  top: 5px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 16%, rgba(255, 255, 255, 0.78) 17% 19%, transparent 20%),
    conic-gradient(from 10deg, #7df9ff, #ff4ca8, #ffb443, #f7f2e8, #7df9ff);
  opacity: 0.92;
}

.tape-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  bottom: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 25%, rgba(0, 0, 0, 0.55) 27% 34%, rgba(255, 255, 255, 0.72) 35% 39%, rgba(52, 56, 64, 0.95) 40%);
}

.tape-dot-a {
  right: 17px;
}

.tape-dot-b {
  right: 4px;
}

.brand-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.brand-copy strong {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-copy span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.transport {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(6, 7, 10, 0.82);
}

.transport-button,
.exit-home,
.retro-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    rgba(15, 17, 22, 0.9);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.14),
    0 10px 24px rgba(0, 0, 0, 0.28);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.transport-button {
  width: 42px;
  height: 38px;
  border-radius: 6px;
}

.message-trigger {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  border-color: rgba(77, 242, 255, 0.4);
  background:
    linear-gradient(180deg, rgba(77, 242, 255, 0.12), rgba(255, 76, 168, 0.06)),
    rgba(6, 9, 12, 0.94);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.16),
    inset 0 0 12px rgba(77, 242, 255, 0.08),
    0 0 18px rgba(77, 242, 255, 0.12);
}

.message-trigger:hover,
.message-trigger:focus-visible {
  transform: translate(-50%, -50%);
  border-color: var(--cyan);
  background:
    linear-gradient(180deg, rgba(77, 242, 255, 0.2), rgba(255, 76, 168, 0.1)),
    rgba(6, 9, 12, 0.98);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.2),
    inset 0 0 14px rgba(77, 242, 255, 0.12),
    0 0 22px rgba(77, 242, 255, 0.3);
  outline: none;
}

.message-terminal-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 18px;
  border: 2px solid var(--cyan);
  border-radius: 3px;
  background:
    linear-gradient(90deg, var(--green) 0 36%, transparent 36%) 4px 5px / 12px 2px no-repeat,
    linear-gradient(90deg, rgba(77, 242, 255, 0.76) 0 72%, transparent 72%) 4px 10px / 15px 2px no-repeat,
    #071116;
  box-shadow:
    inset 0 0 7px rgba(77, 242, 255, 0.2),
    0 0 7px rgba(77, 242, 255, 0.32);
}

.message-terminal-icon::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 4px;
  width: 2px;
  height: 4px;
  background: var(--green);
  box-shadow: 0 0 5px var(--green);
  animation: terminal-cursor 900ms steps(1, end) infinite;
}

.message-terminal-icon span {
  position: absolute;
  left: 6px;
  bottom: -5px;
  width: 10px;
  height: 3px;
  border: solid rgba(77, 242, 255, 0.82);
  border-width: 0 2px 2px;
}

@keyframes terminal-cursor {
  50% { opacity: 0; }
}

.language-switcher {
  position: relative;
}

.language-trigger {
  font-size: 0;
  line-height: 1;
}

.flag-icon,
[data-language-current] {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.38),
    0 0 8px rgba(0, 0, 0, 0.42);
  vertical-align: middle;
}

[data-language-current] {
  font-size: 0;
}

[data-language-current].flag-icon::before,
.language-menu .flag-icon::before {
  content: none;
}

[data-language-current]::before,
.language-menu button::before {
  content: "";
  display: block;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.flag-us,
[data-language-current][data-flag="us"]::before,
.language-menu button[data-language-option="en"]::before {
  background:
    linear-gradient(90deg, #254a9b 0 42%, transparent 42%),
    repeating-linear-gradient(180deg, #c83d3d 0 7.69%, #f8f8f4 7.69% 15.38%);
}

.flag-mx,
[data-language-current][data-flag="mx"]::before,
.language-menu button[data-language-option="es"]::before {
  background:
    radial-gradient(circle at 50% 50%, #b57f2a 0 9%, transparent 10%),
    linear-gradient(90deg, #138a45 0 33.33%, #f8f8f4 33.33% 66.66%, #c73535 66.66%);
}

.flag-fr,
[data-language-current][data-flag="fr"]::before,
.language-menu button[data-language-option="fr"]::before {
  background: linear-gradient(90deg, #244aa5 0 33.33%, #f8f8f4 33.33% 66.66%, #d63b3b 66.66%);
}

.flag-br,
[data-language-current][data-flag="br"]::before,
.language-menu button[data-language-option="pt"]::before {
  background:
    radial-gradient(circle at 50% 50%, #254a9b 0 18%, transparent 19%),
    linear-gradient(35deg, transparent 39%, #ffd84a 40% 60%, transparent 61%),
    linear-gradient(145deg, transparent 39%, #ffd84a 40% 60%, transparent 61%),
    #18964f;
}

.flag-jp,
[data-language-current][data-flag="jp"]::before,
.language-menu button[data-language-option="ja"]::before {
  background:
    radial-gradient(circle at 50% 50%, #c73535 0 28%, transparent 29%),
    #f8f8f4;
}

.flag-cn {
  background:
    radial-gradient(circle at 24% 28%, #ffd54d 0 9%, transparent 10%),
    radial-gradient(circle at 38% 17%, #ffd54d 0 3%, transparent 4%),
    radial-gradient(circle at 44% 29%, #ffd54d 0 3%, transparent 4%),
    radial-gradient(circle at 42% 43%, #ffd54d 0 3%, transparent 4%),
    #d9252e;
}

.flag-cz {
  background:
    linear-gradient(146deg, #244aa5 0 39%, transparent 40%),
    linear-gradient(180deg, #f8f8f4 0 50%, #d63b3b 50%);
}

.flag-vg {
  background:
    radial-gradient(circle at 73% 52%, #f8f8f4 0 10%, #ffd54d 11% 15%, transparent 16%),
    linear-gradient(135deg, transparent 0 29%, #f8f8f4 30% 35%, #c73535 36% 43%, #f8f8f4 44% 49%, transparent 50%),
    linear-gradient(45deg, transparent 0 29%, #f8f8f4 30% 35%, #c73535 36% 43%, #f8f8f4 44% 49%, transparent 50%),
    linear-gradient(90deg, #142b69 0 44%, #244aa5 44%);
}

.flag-in {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 10%, #244aa5 11% 14%, transparent 15%),
    linear-gradient(180deg, #f19532 0 33.33%, #f8f8f4 33.33% 66.66%, #18894b 66.66%);
}

.flag-ru {
  background: linear-gradient(180deg, #f8f8f4 0 33.33%, #244aa5 33.33% 66.66%, #c73535 66.66%);
}

.flag-ca {
  background:
    radial-gradient(circle at 50% 50%, #d12f35 0 11%, transparent 12%),
    linear-gradient(90deg, #d12f35 0 25%, #f8f8f4 25% 75%, #d12f35 75%);
}

.flag-gb {
  background:
    linear-gradient(33deg, transparent 0 42%, #f8f8f4 43% 48%, #c73535 49% 53%, #f8f8f4 54% 59%, transparent 60%),
    linear-gradient(147deg, transparent 0 42%, #f8f8f4 43% 48%, #c73535 49% 53%, #f8f8f4 54% 59%, transparent 60%),
    linear-gradient(90deg, transparent 0 41%, #f8f8f4 42% 45%, #c73535 46% 54%, #f8f8f4 55% 58%, transparent 59%),
    linear-gradient(180deg, transparent 0 35%, #f8f8f4 36% 41%, #c73535 42% 58%, #f8f8f4 59% 64%, transparent 65%),
    #142b69;
}

.flag-sc {
  background:
    linear-gradient(146deg, transparent 0 58%, #18894b 59%),
    linear-gradient(128deg, transparent 0 50%, #f8f8f4 51%),
    linear-gradient(108deg, transparent 0 43%, #d9252e 44%),
    linear-gradient(86deg, transparent 0 36%, #ffd54d 37%),
    #244aa5;
}

.flag-se {
  background:
    linear-gradient(90deg, transparent 0 30%, #ffd54d 31% 43%, transparent 44%),
    linear-gradient(180deg, transparent 0 40%, #ffd54d 41% 57%, transparent 58%),
    #24589b;
}

.flag-nl {
  background: linear-gradient(180deg, #b52635 0 33.33%, #f8f8f4 33.33% 66.66%, #244aa5 66.66%);
}

.flag-de {
  background: linear-gradient(180deg, #111111 0 33.33%, #d9252e 33.33% 66.66%, #ffd54d 66.66%);
}

.flag-ro {
  background: linear-gradient(90deg, #244aa5 0 33.33%, #ffd54d 33.33% 66.66%, #d9252e 66.66%);
}

[data-language-current].flag-icon::before,
.language-menu button:has(.flag-icon)::before {
  content: none;
  display: none;
}

.language-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(5, 34px);
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)),
    rgba(5, 6, 9, 0.94);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.14),
    0 16px 32px rgba(0, 0, 0, 0.42),
    0 0 24px rgba(77, 242, 255, 0.16);
  backdrop-filter: blur(14px);
}

.language-menu[hidden] {
  display: none;
}

.language-menu button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0;
}

.language-menu button:hover,
.language-menu button:focus-visible {
  border-color: rgba(255, 180, 67, 0.62);
  background: rgba(255, 180, 67, 0.14);
  outline: none;
}

.case-flip-button {
  width: 42px;
  height: 38px;
  border-radius: 6px;
}

.case-flip-button-image {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  object-position: left center;
  opacity: 0.95;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 12px rgba(77, 242, 255, 0.14);
}

.transport-button-hot {
  border-color: rgba(255, 180, 67, 0.52);
  background:
    linear-gradient(180deg, rgba(255, 180, 67, 0.24), rgba(255, 76, 168, 0.12)),
    rgba(24, 17, 16, 0.94);
}

.transport-button:not(.message-trigger):hover,
.transport-button:not(.message-trigger):focus-visible,
.exit-home:hover,
.exit-home:focus-visible,
.retro-button:hover,
.retro-button:focus-visible {
  transform: translateY(-1px);
  border-color: var(--edge-hot);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(255, 180, 67, 0.18);
  outline: none;
}

.icon-play,
.icon-stop,
.icon-grid {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
}

.icon-play::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}

.icon-stop::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: currentColor;
}

.icon-grid::before {
  content: "";
  position: absolute;
  inset: 2px;
  background:
    linear-gradient(currentColor 0 0) 0 0 / 6px 6px no-repeat,
    linear-gradient(currentColor 0 0) 10px 0 / 6px 6px no-repeat,
    linear-gradient(currentColor 0 0) 0 10px / 6px 6px no-repeat,
    linear-gradient(currentColor 0 0) 10px 10px / 6px 6px no-repeat;
}

.page-shell {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 24px 0 54px;
}

.hero {
  position: relative;
  min-height: 216px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 18px;
  padding: 34px 0 28px;
  text-align: center;
}

.hero-copy {
  width: min(100%, 760px);
  max-width: 760px;
}

.hero-logo-title {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  width: min(100%, 720px);
  margin: 0;
  line-height: 0;
}

.hero-logo-title::before,
.hero-logo-title::after {
  content: "";
  pointer-events: none;
  position: absolute;
}

/* The logo's effects. Everything that lights the lettering is MASKED to the
   logo's own alpha, so no light ever shows in the empty box around it:
   - aura     pink and cyan clouds behind the logo that drift across each other
   - glint    a bright edge that crosses the letters, a star at each end of it
   - glitch   every few seconds the signal tears: cyan/pink ghosts, a slipped
              band, and the tubes flicker
   - scan     a faint line rolling down through the lettering
   - light    desktop only: the logo tilts toward the mouse and the letters
              under it light up (hero-logo-fx-v1.js sets the --logo-* values)
   The layers are spans in index.html's h1, because an element has only two
   pseudo-elements. .hero-logo-fx must not set a z-index: that would make it
   a stacking context, and its layers could no longer screen-blend with the
   logo underneath. */
.hero-logo-title {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-logo-title.is-tilting {
  transform: perspective(900px) rotateX(var(--logo-tilt-x, 0deg)) rotateY(var(--logo-tilt-y, 0deg));
}

.hero-logo-title::before {
  z-index: -1;
  inset: -34% -12%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse 36% 60% at 30% 52%, rgba(255, 76, 168, 0.5), transparent 72%),
    radial-gradient(ellipse 38% 62% at 70% 46%, rgba(77, 242, 255, 0.46), transparent 72%),
    radial-gradient(ellipse 58% 42% at 50% 58%, rgba(110, 168, 255, 0.2), transparent 76%);
  filter: blur(22px) saturate(1.25);
  opacity: 0.72;
  mix-blend-mode: screen;
  /* drift and breath move the blurred cloud as a whole (translate, scale,
     opacity), so the GPU slides one cached layer instead of re-blurring it
     every frame */
  will-change: transform, opacity;
  animation:
    logoAuraDrift 14s ease-in-out infinite alternate,
    logoAuraBreath 4.8s ease-in-out infinite;
}

.hero-logo-title::after {
  z-index: 3;
  inset: 0;
  background: linear-gradient(
    105deg,
    /* 1% of this gradient is 2.5% of the logo's width: keep the band narrow */
    transparent 0 44%,
    rgba(255, 255, 255, 0.18) 47%,
    rgba(255, 255, 255, 0.9) 49.4%,
    rgba(190, 250, 255, 0.75) 50.4%,
    rgba(255, 120, 200, 0.35) 52.5%,
    transparent 55.5% 100%
  ) no-repeat;
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-mask: url("assets/tlg-logo-text-tight.png") center / 100% 100% no-repeat;
  mask: url("assets/tlg-logo-text-tight.png") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  animation: logoGlint 6.5s cubic-bezier(0.5, 0, 0.25, 1) infinite;
}

.hero-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  margin: 0 auto;
  height: auto;
  filter:
    drop-shadow(0 8px 34px rgba(255, 76, 168, 0.28))
    drop-shadow(0 0 34px rgba(77, 242, 255, 0.2));
  animation:
    logoNeonEmission 4.8s ease-in-out infinite,
    logoSignalFlicker 7.3s steps(1, end) infinite;
}

.hero-logo-fx,
.hero-logo-fx > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-logo-fx > span {
  z-index: 2;
}

.hero-logo-ghost,
.hero-logo-scan,
.hero-logo-light {
  -webkit-mask: url("assets/tlg-logo-text-tight.png") center / 100% 100% no-repeat;
  mask: url("assets/tlg-logo-text-tight.png") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
}

.hero-logo-ghost {
  opacity: 0;
}

.hero-logo-ghost.is-cyan {
  background: #4df2ff;
  animation: logoGhostCyan 7.3s steps(1, end) infinite;
}

.hero-logo-ghost.is-pink {
  background: #ff4ca8;
  animation: logoGhostPink 7.3s steps(1, end) infinite;
}

.hero-logo-tear {
  background: url("assets/tlg-logo-text-tight.png") center / 100% 100% no-repeat;
  opacity: 0;
  animation: logoTear 7.3s steps(1, end) infinite;
}

.hero-logo-scan {
  background: linear-gradient(180deg, transparent 0 44%, rgba(200, 252, 255, 0.75) 50%, transparent 56% 100%) no-repeat;
  background-size: 100% 300%;
  background-position: 0 100%;
  opacity: 0.5;
  animation: logoScan 5.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.hero-logo-light {
  background: radial-gradient(
    circle at var(--logo-light-x, 50%) var(--logo-light-y, 50%),
    rgba(255, 255, 255, 0.85),
    rgba(170, 240, 255, 0.35) 7%,
    transparent 16%
  );
  opacity: var(--logo-light, 0);
  transition: opacity 0.4s ease;
}

.hero-logo-spark {
  position: absolute;
  z-index: 4;
  width: clamp(16px, 3.4vw, 28px);
  aspect-ratio: 1;
  translate: -50% -50%;
  filter:
    drop-shadow(0 0 6px rgba(190, 250, 255, 0.95))
    drop-shadow(0 0 14px rgba(255, 76, 168, 0.6));
  opacity: 0;
  pointer-events: none;
}

/* a long four-point star, with a shorter one turned 45deg behind it */
.hero-logo-spark::before,
.hero-logo-spark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
}

.hero-logo-spark::after {
  background: rgba(200, 250, 255, 0.85);
  transform: rotate(45deg) scale(0.55);
}

.hero-logo-spark.is-left {
  left: 6%;
  top: 22%;
  animation: logoSparkLeft 6.5s ease-out infinite;
}

.hero-logo-spark.is-right {
  left: 94%;
  top: 18%;
  animation: logoSparkRight 6.5s ease-out infinite;
}

@keyframes logoAuraDrift {
  0% {
    translate: -7% 0;
  }

  100% {
    translate: 7% 0;
  }
}

@keyframes logoAuraBreath {
  0%,
  100% {
    opacity: 0.58;
    transform: scale(0.95, 0.9);
  }

  44% {
    opacity: 0.95;
    transform: scale(1.04, 1);
  }

  64% {
    opacity: 0.76;
    transform: scale(0.99, 0.96);
  }
}

/* background-size 250%: position 100% parks the bright edge left of the logo, 0% right of it */
@keyframes logoGlint {
  0%,
  58% {
    opacity: 0;
    background-position: 100% 0;
  }

  60% {
    opacity: 1;
  }

  78% {
    opacity: 1;
    background-position: 0% 0;
  }

  80%,
  100% {
    opacity: 0;
    background-position: 0% 0;
  }
}

/* the stars peak upright (a +, not an x) and keep turning as they fade */
@keyframes logoSparkLeft {
  0%,
  60% {
    opacity: 0;
    transform: scale(0) rotate(-60deg);
  }

  63% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }

  68%,
  100% {
    opacity: 0;
    transform: scale(0.2) rotate(60deg);
  }
}

@keyframes logoSparkRight {
  0%,
  75% {
    opacity: 0;
    transform: scale(0) rotate(-70deg);
  }

  79% {
    opacity: 1;
    transform: scale(1.15) rotate(0deg);
  }

  87%,
  100% {
    opacity: 0;
    transform: scale(0.2) rotate(80deg);
  }
}

/* The glitch: 7.3s against the glint's 6.5s, so the two drift apart instead of
   always landing together. steps(1, end) makes every keyframe a hard cut. */
@keyframes logoSignalFlicker {
  0%,
  100% {
    opacity: 1;
  }

  90% {
    opacity: 0.72;
  }

  91% {
    opacity: 1;
  }

  92.5% {
    opacity: 0.84;
  }

  94% {
    opacity: 1;
  }

  95.5% {
    opacity: 0.9;
  }

  96.5% {
    opacity: 1;
  }
}

@keyframes logoGhostCyan {
  0%,
  96%,
  100% {
    opacity: 0;
    transform: none;
    clip-path: inset(0 0 100% 0);
  }

  90% {
    opacity: 0.55;
    transform: translate(-9px, 0);
    clip-path: inset(8% 0 78% 0);
  }

  91.5% {
    opacity: 0.45;
    transform: translate(7px, 1px);
    clip-path: inset(58% 0 30% 0);
  }

  93% {
    opacity: 0.6;
    transform: translate(-5px, 0);
    clip-path: inset(34% 0 54% 0);
  }

  94.5% {
    opacity: 0.4;
    transform: translate(10px, -1px);
    clip-path: inset(76% 0 12% 0);
  }
}

@keyframes logoGhostPink {
  0%,
  96%,
  100% {
    opacity: 0;
    transform: none;
    clip-path: inset(0 0 100% 0);
  }

  90% {
    opacity: 0.5;
    transform: translate(8px, 0);
    clip-path: inset(44% 0 42% 0);
  }

  91.5% {
    opacity: 0.55;
    transform: translate(-8px, -1px);
    clip-path: inset(16% 0 72% 0);
  }

  93% {
    opacity: 0.45;
    transform: translate(6px, 1px);
    clip-path: inset(66% 0 20% 0);
  }

  94.5% {
    opacity: 0.5;
    transform: translate(-11px, 0);
    clip-path: inset(24% 0 64% 0);
  }
}

@keyframes logoTear {
  0%,
  95.5%,
  100% {
    opacity: 0;
    transform: none;
    clip-path: inset(0 0 100% 0);
  }

  91% {
    opacity: 1;
    transform: translate(14px, 0);
    clip-path: inset(38% 0 42% 0);
  }

  92.5% {
    opacity: 1;
    transform: translate(-10px, 0);
    clip-path: inset(64% 0 22% 0);
  }

  94% {
    opacity: 1;
    transform: translate(6px, 0);
    clip-path: inset(14% 0 72% 0);
  }
}

/* background-size 300%: position 100% parks the line above the logo, 0% below it */
@keyframes logoScan {
  0% {
    background-position: 0 100%;
  }

  45%,
  100% {
    background-position: 0 0;
  }
}

/* Phones and tablets have no mouse for the light to follow, so on a touch
   screen the light drifts across the letters by itself and the logo sways with
   it; a finger on the logo takes over (.is-touching, from hero-logo-fx-v1.js).
   The drift animates the same --logo-* values the mouse sets, which is why they
   are registered: an unregistered custom property cannot be animated. */
@property --logo-tilt-x {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --logo-tilt-y {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --logo-light-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --logo-light-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --logo-light {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@media (hover: none) {
  /* the sway animates transform itself, which the GPU runs off the main thread;
     only the small light layer repaints */
  .hero-logo-title:not(.is-touching) {
    animation:
      logoRoam 8s ease-in-out infinite alternate,
      logoRoamTilt 8s ease-in-out infinite alternate;
  }
}

@keyframes logoRoam {
  0% {
    --logo-light-x: -12%;
    --logo-light-y: 30%;
    --logo-light: 0;
  }

  18% {
    --logo-light: 0.95;
  }

  50% {
    --logo-light-x: 50%;
    --logo-light-y: 62%;
  }

  82% {
    --logo-light: 0.95;
  }

  100% {
    --logo-light-x: 112%;
    --logo-light-y: 36%;
    --logo-light: 0;
  }
}

@keyframes logoRoamTilt {
  0% {
    transform: perspective(900px) rotateX(1.5deg) rotateY(-2.5deg);
  }

  50% {
    transform: perspective(900px) rotateX(-1deg) rotateY(0deg);
  }

  100% {
    transform: perspective(900px) rotateX(1.5deg) rotateY(2.5deg);
  }
}

/* Reduced motion keeps the slow light - the aura, the glint and its stars, the
   scan - and drops what moves the logo or flashes: the glitch, the flicker, the
   tilt and the drift. The site's blanket reduced-motion rule sets every
   animation to 1ms and one run, which would end the kept layers after a frame,
   so they restate their own timing here (more specific, and also !important). */
@media (prefers-reduced-motion: reduce) {
  .hero-logo-ghost,
  .hero-logo-tear {
    animation: none !important;
  }

  .hero-logo {
    animation: logoNeonEmission 4.8s ease-in-out infinite !important;
  }

  .hero-logo-title::before {
    animation-duration: 14s, 4.8s !important;
    animation-iteration-count: infinite !important;
  }

  .hero-logo-title::after,
  .hero-logo-spark.is-left,
  .hero-logo-spark.is-right {
    animation-duration: 6.5s !important;
    animation-iteration-count: infinite !important;
  }

  .hero-logo-fx .hero-logo-scan {
    animation-duration: 5.2s !important;
    animation-iteration-count: infinite !important;
  }

  .hero-logo-title,
  .hero-logo-title:not(.is-touching) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

.kicker {
  margin: 0 0 12px;
  color: var(--amber);
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1.7;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255, 180, 67, 0.42);
}

.shelf-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 12px;
}

.shelf-selector-link {
  position: relative;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: rgba(255, 180, 67, 0.62);
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1.7;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, text-shadow 150ms ease;
}

.shelf-selector-link:hover,
.shelf-selector-link:focus-visible,
.shelf-selector-link[aria-current="page"] {
  border-color: rgba(255, 180, 67, 0.38);
  color: var(--amber);
  background: rgba(255, 180, 67, 0.07);
  text-shadow: 0 0 12px rgba(255, 180, 67, 0.56);
  outline: none;
}

.shelf-selector-link[aria-current="page"]::before {
  content: ">";
  margin-right: 6px;
  color: var(--green);
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 0.94;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.8),
    0 8px 40px rgba(255, 76, 168, 0.28),
    0 0 34px rgba(77, 242, 255, 0.14);
}

.hero-line {
  max-width: 630px;
  margin: 22px 0 0;
  color: #d7ddd8;
  font-size: 18px;
  line-height: 1.65;
}

.deck-meter {
  position: absolute;
  right: 0;
  top: 50%;
  display: grid;
  gap: 7px;
  width: 46px;
  transform: translateY(-50%);
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(5, 7, 10, 0.72);
  box-shadow: inset 0 0 24px rgba(77, 242, 255, 0.1);
}

.deck-meter span {
  display: block;
  height: 8px;
  border-radius: 2px;
  background: var(--green);
  box-shadow: 0 0 12px rgba(155, 255, 117, 0.5);
  animation: meterPulse 1.8s infinite ease-in-out;
}

.deck-meter span:nth-child(2) {
  animation-delay: 120ms;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(77, 242, 255, 0.48);
}

.deck-meter span:nth-child(3) {
  animation-delay: 240ms;
  background: var(--blue);
}

.deck-meter span:nth-child(4) {
  animation-delay: 360ms;
  background: var(--amber);
}

.deck-meter span:nth-child(5) {
  animation-delay: 480ms;
  background: var(--magenta);
}

.deck-meter span:nth-child(6) {
  animation-delay: 600ms;
  background: var(--red);
}

@keyframes meterPulse {
  0%, 100% {
    opacity: 0.38;
    transform: scaleX(0.72);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}


@keyframes logoNeonEmission {
  0%,
  100% {
    filter:
      drop-shadow(0 8px 34px rgba(255, 76, 168, 0.3))
      drop-shadow(0 0 34px rgba(77, 242, 255, 0.2))
      brightness(1)
      saturate(1.02);
  }

  44% {
    filter:
      drop-shadow(0 10px 42px rgba(255, 76, 168, 0.48))
      drop-shadow(0 0 48px rgba(77, 242, 255, 0.42))
      drop-shadow(0 0 14px rgba(255, 255, 255, 0.18))
      brightness(1.12)
      saturate(1.22);
  }

  58% {
    filter:
      drop-shadow(0 9px 36px rgba(255, 76, 168, 0.38))
      drop-shadow(0 0 40px rgba(77, 242, 255, 0.3))
      brightness(1.06)
      saturate(1.14);
  }
}


@keyframes caseButtonSweep {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }

  34% {
    opacity: 0.92;
  }

  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes caseButtonPulse {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }

  28% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

@keyframes caseShelfFlash {
  0% {
    opacity: 0;
    transform: translateX(-34%) skewX(-10deg);
  }

  32% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translateX(34%) skewX(-10deg);
  }
}

.game-selection {
  padding: 14px 0 0;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.section-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.game-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  perspective: 1200px;
}

.game-grid::before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 8;
  inset: -16px;
  border-radius: 10px;
  background:
    linear-gradient(105deg, transparent 0 24%, rgba(255, 255, 255, 0.5) 39%, rgba(77, 242, 255, 0.26) 45%, rgba(255, 76, 168, 0.18) 52%, transparent 68% 100%);
  opacity: 0;
  mix-blend-mode: screen;
  transform: translateX(-28%) skewX(-10deg);
}

.game-grid.is-flip-fx::before {
  animation: caseShelfFlash 760ms ease-out;
}

.game-card {
  position: relative;
  min-width: 0;
  padding: 12px 12px 14px 22px;
  --case-a: rgba(77, 242, 255, 0.28);
  --case-b: rgba(255, 76, 168, 0.2);
  --case-c: rgba(255, 180, 67, 0.18);
  --shell-line: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background:
    radial-gradient(circle at 9% 16%, var(--case-a), transparent 23%),
    radial-gradient(circle at 88% 82%, var(--case-b), transparent 26%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) 30%, rgba(77, 242, 255, 0.08) 61%, rgba(0, 0, 0, 0.24)),
    repeating-linear-gradient(90deg, var(--shell-line) 0 1px, transparent 1px 20px),
    rgba(9, 10, 14, 0.76);
  box-shadow:
    inset 1px 1px rgba(255, 255, 255, 0.18),
    inset 0 0 0 4px rgba(255, 255, 255, 0.025),
    inset -12px 0 rgba(255, 255, 255, 0.035),
    0 24px 70px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease;
  perspective: 980px;
  contain: layout paint style;
}

.game-card[data-game-id="bubblebat"] {
  order: 10;
  --case-a: rgba(65, 214, 255, 0.36);
  --case-b: rgba(42, 129, 255, 0.16);
  --case-c: rgba(155, 255, 117, 0.12);
}

.game-card[data-game-id="plash"] {
  order: 8;
  --case-a: rgba(255, 76, 168, 0.28);
  --case-b: rgba(111, 86, 255, 0.2);
  --case-c: rgba(77, 242, 255, 0.12);
}

.game-card[data-game-id="match-race"] {
  order: 6;
  --case-a: rgba(255, 180, 67, 0.28);
  --case-b: rgba(255, 93, 93, 0.18);
  --case-c: rgba(77, 242, 255, 0.12);
}

.game-card[data-game-id="sticker-hex"] {
  order: 4;
  --case-a: rgba(111, 168, 255, 0.3);
  --case-b: rgba(255, 118, 178, 0.18);
  --case-c: rgba(155, 255, 117, 0.13);
}

.game-card[data-game-id="uski"] {
  order: 9;
  --case-a: rgba(77, 242, 255, 0.25);
  --case-b: rgba(255, 255, 255, 0.15);
  --case-c: rgba(255, 180, 67, 0.12);
}

.game-card[data-game-id="zippa"] {
  order: 7;
  --case-a: rgba(77, 242, 255, 0.36);
  --case-b: rgba(255, 76, 168, 0.2);
  --case-c: rgba(111, 86, 255, 0.14);
}

.game-card[data-game-id="bytefall-protocol-demo"] {
  order: 1;
  --case-a: rgba(53, 217, 255, 0.34);
  --case-b: rgba(248, 120, 248, 0.2);
  --case-c: rgba(248, 184, 0, 0.12);
}

.game-card[data-game-id="gauntlet-blitz"] {
  order: 2;
  --case-a: rgba(66, 239, 255, 0.36);
  --case-b: rgba(255, 56, 184, 0.24);
  --case-c: rgba(255, 231, 74, 0.16);
}

.game-card[data-game-id="wordventure"] {
  order: 5;
  --case-a: rgba(255, 169, 194, 0.34);
  --case-b: rgba(154, 188, 224, 0.24);
  --case-c: rgba(255, 219, 132, 0.2);
}

.game-card[data-game-id="desktop-demolition"] {
  order: 3;
  --case-a: rgba(39, 151, 255, 0.38);
  --case-b: rgba(255, 151, 22, 0.28);
  --case-c: rgba(95, 255, 112, 0.16);
}

.game-card[data-game-id="borrowed-shadow"] {
  order: 4;
  --case-a: rgba(116, 92, 255, 0.4);
  --case-b: rgba(255, 76, 168, 0.24);
  --case-c: rgba(77, 242, 255, 0.14);
}

.game-card[data-game-id="ink-gremlin"] {
  order: 6;
  --case-a: rgba(20, 171, 170, 0.42);
  --case-b: rgba(217, 54, 54, 0.3);
  --case-c: rgba(242, 166, 31, 0.18);
}

.game-card[data-game-id="jungle-rumble"] {
  order: 8;
  --case-a: rgba(119, 239, 89, 0.38);
  --case-b: rgba(255, 190, 48, 0.28);
  --case-c: rgba(27, 137, 105, 0.2);
}

.game-card[data-game-id="scrap-em-sock-em"] {
  order: 1;
}

.game-card[data-game-id="ichiba"] {
  order: 2;
}

.game-card[data-game-id="picopet"] {
  order: 3;
}

.game-card[data-game-id="offset"] {
  order: 7;
}

/* Shelf II positions are explicit for every cassette: the four newest ones
   previously had no rule at all, so they fell back to order:0 and sorted by
   DOM position - which made 'swap these two' ambiguous. */
.game-card[data-game-id="drizzlewick"] {
  order: 5;
  --case-a: rgba(83, 206, 255, 0.4);
  --case-b: rgba(118, 76, 214, 0.3);
  --case-c: rgba(255, 218, 85, 0.2);
}

.game-card[data-game-id="drizzlewick"] .preview-video {
  object-position: center;
  filter: saturate(1.08) contrast(1.06) brightness(0.8);
}

.drizzlewick-preview-window {
  background:
    radial-gradient(circle at 50% 24%, rgba(83, 206, 255, 0.28), transparent 46%),
    linear-gradient(180deg, #151731, #070918);
}

/* ICHIBA -------------------------------------------------------------------
   `.game-card` prefix on purpose: the base `.preview-window` rule is declared
   LATER in this sheet at equal specificity and would silently win, leaving the
   pixel art sitting on a black slab. */
.game-card .ichiba-preview-window {
  background: #f2ecc0;
  border-color: rgba(36, 31, 26, 0.35);
}

/* ICHIBA lays itself out as a tall column - HUD, timer, shopping list, shelf,
   brand footer. The shared embedded stage hands a touch device a short 16:9
   box (344x194 on a 390x800 phone), which leaves the shelf 84px wide and its
   cells at 21px: unplayable, and a half-scale the game's integer-only scaler
   is not meant to hit. Give it the whole viewport on touch so its own layout
   gets the height it needs. Id-qualified for the same reason as Borrowed
   Shadow: the shared rule out-specifies a bare class selector. */
@media (hover: none), (pointer: coarse) {
  body.is-player-open[data-active-game="ichiba"] #embedded-game-view .embedded-stage,
  body.is-player-open[data-active-game="ichiba"] #ichiba-frame {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f2ecc0;
    box-shadow: none !important;
    transform: none !important;
  }
}

/* Scrap Em' Sock Em's corner logo is a WEB-only flourish. On touch the player
   is full-bleed and the logo would sit on the game, so it is dropped there -
   same reasoning as Borrowed Shadow's. */
@media (hover: none), (pointer: coarse) {
  body.is-player-open[data-active-game="scrap-em-sock-em"] .embedded-game-logo {
    display: none !important;
  }
}

.ichiba-preview-logo {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: min(88%, 340px);
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 rgba(36, 31, 26, 0.28));
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.drizzlewick-preview-logo {
  position: absolute;
  z-index: 4;
  top: 4%;
  left: 50%;
  width: min(58%, 330px);
  height: auto;
  filter: drop-shadow(0 5px 2px rgba(6, 6, 20, 0.76)) drop-shadow(0 0 18px rgba(83, 206, 255, 0.34));
  transform: translateX(-50%);
  pointer-events: none;
}

.drizzlewick-coming-soon {
  inset: auto 9px 9px auto;
  min-width: 0;
  padding: 6px 10px 5px;
  font-size: clamp(10px, 1.25vw, 15px);
  transform: rotate(-5deg);
}

.drizzlewick-coming-soon::before,
.drizzlewick-coming-soon::after {
  display: none;
}

.drizzlewick-card-back {
  background:
    radial-gradient(circle at 20% 20%, rgba(83, 206, 255, 0.28), transparent 34%),
    radial-gradient(circle at 82% 76%, rgba(255, 218, 85, 0.2), transparent 36%),
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 14px),
    #09091a;
}

.drizzlewick-card-back .case-back-image {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  background: #060911;
  filter: saturate(1.03) contrast(1.02);
}

.game-grid.layout-display .drizzlewick-card-back .case-back-image,
.game-grid.layout-rack .drizzlewick-card-back .case-back-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.drizzlewick-back-art {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 190px;
  padding: 20px;
  border: 1px solid rgba(83, 206, 255, 0.48);
  border-radius: 4px;
  color: rgba(247, 242, 232, 0.94);
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(145deg, rgba(83, 206, 255, 0.13), rgba(118, 76, 214, 0.12) 58%, rgba(255, 218, 85, 0.12));
  box-shadow: inset 0 0 44px rgba(118, 76, 214, 0.18), 0 0 26px rgba(83, 206, 255, 0.1);
}

.drizzlewick-back-art img {
  display: block;
  width: min(74%, 330px);
  max-height: 126px;
  object-fit: contain;
  filter: drop-shadow(0 5px 2px rgba(6, 6, 20, 0.74)) drop-shadow(0 0 16px rgba(83, 206, 255, 0.26));
}

.drizzlewick-back-art > span:last-child {
  color: #ffda55;
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.drizzlewick-back-code {
  color: #53ceff;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.game-card[data-game-id="jungle-rumble"] .preview-video {
  object-position: center;
  filter: saturate(1.12) contrast(1.08) brightness(0.94);
}

.game-card[data-game-id="jungle-rumble"] .label-strip h3 {
  max-width: 100%;
  font-size: clamp(14px, 1.7vw, 20px);
  letter-spacing: -0.025em;
  white-space: nowrap;
}

/* ROOMQUAKE is one long word, and the shared title rule's overflow-wrap:anywhere
   broke it into "ROOMQUAK / E", which read as an off-centre title. Keep it on
   one line and let it fill the strip: the card's width is not a function of the
   viewport (the shelf reflows by columns), so the size comes from the strip
   itself - 12.4cqi is the widest the word gets while still fitting - capped at
   the shared title size so it never outgrows its neighbours. */
.game-card[data-game-id="roomquake"] .label-strip {
  container-type: inline-size;
}

.game-card[data-game-id="roomquake"] .label-strip h3 {
  max-width: 100%;
  font-size: min(clamp(17px, 2.1vw, 22px), 12.4cqi);
  white-space: nowrap;
  overflow-wrap: normal;
}

.jungle-rumble-card-back {
  background:
    radial-gradient(circle at 18% 22%, rgba(119, 239, 89, 0.24), transparent 32%),
    radial-gradient(circle at 82% 76%, rgba(255, 190, 48, 0.2), transparent 34%),
    repeating-linear-gradient(125deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 15px),
    #04100a;
}

.jungle-rumble-back-art {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 190px;
  padding: 22px;
  border: 1px solid rgba(119, 239, 89, 0.45);
  border-radius: 4px;
  color: rgba(247, 242, 232, 0.92);
  text-align: center;
  text-transform: uppercase;
  background:
    linear-gradient(135deg, rgba(119, 239, 89, 0.16), transparent 48%, rgba(255, 190, 48, 0.14)),
    rgba(2, 12, 7, 0.78);
  box-shadow: inset 0 0 44px rgba(27, 137, 105, 0.18), 0 0 28px rgba(255, 190, 48, 0.1);
}

.jungle-rumble-back-art strong {
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 42px);
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 0 18px rgba(119, 239, 89, 0.5), 0 0 30px rgba(255, 190, 48, 0.24);
}

.jungle-rumble-back-art > span:last-child {
  color: #77ef59;
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.jungle-rumble-back-code {
  color: #ffbe30;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.ink-gremlin-preview-window {
  background: #ede3c7;
}

.ink-gremlin-preview-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 28%, rgba(77, 49, 26, 0.11) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 72%, rgba(77, 49, 26, 0.1) 0 2px, transparent 3px),
    repeating-linear-gradient(0deg, rgba(20, 17, 23, 0.055) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(20, 17, 23, 0.055) 0 1px, transparent 1px 16px),
    #ede3c7;
}

.game-card[data-game-id="ink-gremlin"] .preview-video {
  position: relative;
  z-index: 1;
  object-fit: cover;
  object-position: center;
  background: #ede3c7;
  filter: saturate(1.04) contrast(1.05) brightness(0.98);
}

.ink-gremlin-preview-art strong {
  position: absolute;
  z-index: 4;
  top: 12%;
  left: 8%;
  color: #141117;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.7vw, 36px);
  line-height: 0.78;
  letter-spacing: -0.05em;
  text-shadow: 2px 2px 0 rgba(237, 227, 199, 0.85);
  transform: rotate(-4deg);
}

.ink-preview-maze {
  position: absolute;
  z-index: 1;
  display: block;
  border-radius: 2px;
  background: #382e29;
  box-shadow: 54px 0 0 #382e29, 54px 28px 0 #382e29;
}

.ink-preview-maze-a {
  top: 20%;
  right: 28%;
  width: 8px;
  height: 42%;
}

.ink-preview-maze-b {
  right: 10%;
  bottom: 22%;
  width: 23%;
  height: 7px;
  transform: rotate(-2deg);
}

.ink-preview-exit {
  position: absolute;
  z-index: 2;
  right: 7%;
  top: 32%;
  width: 9%;
  height: 36%;
  border: 3px solid #14abaa;
  border-radius: 3px;
  background: #ede3c7;
  box-shadow: inset 5px 0 0 #14abaa, 0 0 13px rgba(20, 171, 170, 0.48);
}

.ink-preview-player,
.ink-preview-enemy {
  position: absolute;
  z-index: 3;
  display: block;
  width: 13%;
  aspect-ratio: 1.25;
  border-radius: 55% 45% 40% 55%;
}

.ink-preview-player {
  left: 30%;
  bottom: 22%;
  background: #141117;
  box-shadow: -7px 5px 0 -2px #141117, 8px 5px 0 -3px #141117;
}

.ink-preview-enemy {
  width: 10%;
  background: #d93636;
  box-shadow: -5px 4px 0 -2px #d93636, 6px 4px 0 -2px #d93636;
}

.ink-preview-enemy-a { left: 54%; top: 25%; }
.ink-preview-enemy-b { left: 65%; bottom: 18%; transform: scale(0.86); }

.ink-preview-player i,
.ink-preview-enemy i {
  position: absolute;
  top: 26%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ede3c7;
  box-shadow: inset 0 0 0 2px #14abaa;
}

.ink-preview-enemy i {
  box-shadow: inset 0 0 0 2px #141117;
}

.ink-preview-player i:first-child,
.ink-preview-enemy i:first-child { left: 22%; }
.ink-preview-player i:last-child,
.ink-preview-enemy i:last-child { right: 22%; }

.ink-gremlin-card-back {
  background:
    radial-gradient(circle at 18% 18%, rgba(217, 54, 54, 0.2), transparent 28%),
    radial-gradient(circle at 84% 82%, rgba(20, 171, 170, 0.22), transparent 32%),
    repeating-linear-gradient(0deg, rgba(20, 17, 23, 0.06) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(20, 17, 23, 0.06) 0 1px, transparent 1px 22px),
    #ede3c7;
}

.ink-gremlin-back-art {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  width: 100%;
  height: 100%;
  min-height: 190px;
  padding: 22px;
  border: 4px solid #141117;
  color: #141117;
  text-align: center;
  text-transform: uppercase;
  background: rgba(237, 227, 199, 0.82);
  box-shadow: inset 0 0 0 4px #14abaa, inset 0 0 36px rgba(20, 17, 23, 0.16);
}

.ink-gremlin-back-art strong {
  font-family: var(--font-display);
  font-size: clamp(25px, 3.2vw, 44px);
  line-height: 0.9;
  color: #141117;
  transform: rotate(-2deg);
}

.ink-gremlin-back-art > span:last-child,
.ink-gremlin-back-code {
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.ink-gremlin-back-art > span:last-child { color: #d93636; }
.ink-gremlin-back-code { color: #087f7e; }

.ink-gremlin-back-mark {
  position: relative;
  width: 68px;
  height: 52px;
  border-radius: 52% 48% 38% 56%;
  background: #141117;
  box-shadow: -14px 10px 0 -5px #141117, 14px 9px 0 -6px #141117;
}

.ink-gremlin-back-mark i {
  position: absolute;
  top: 15px;
  width: 13px;
  height: 13px;
  border: 4px solid #ede3c7;
  border-radius: 50%;
  background: #d93636;
}

.ink-gremlin-back-mark i:first-child { left: 16px; }
.ink-gremlin-back-mark i:last-child { right: 16px; }

.ink-gremlin-card-back .case-back-image {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  background: #0b0910;
  filter: saturate(1.02) contrast(1.02);
}

.game-grid.layout-display .ink-gremlin-card-back .case-back-image,
.game-grid.layout-rack .ink-gremlin-card-back .case-back-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.game-card[data-game-id="borrowed-shadow"] .preview-video {
  object-position: center;
  filter: saturate(1.08) contrast(1.14) brightness(0.9);
}

.borrowed-shadow-card-back {
  background:
    radial-gradient(circle at 24% 22%, rgba(255, 76, 168, 0.24), transparent 32%),
    radial-gradient(circle at 78% 76%, rgba(77, 242, 255, 0.2), transparent 36%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 16px),
    #06060b;
}

.borrowed-shadow-back-art {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 190px;
  padding: 22px;
  border: 1px solid rgba(179, 159, 255, 0.42);
  border-radius: 4px;
  color: rgba(247, 242, 232, 0.9);
  text-align: center;
  text-transform: uppercase;
  background:
    linear-gradient(135deg, rgba(116, 92, 255, 0.18), transparent 48%, rgba(255, 76, 168, 0.14)),
    rgba(3, 4, 9, 0.72);
  box-shadow: inset 0 0 44px rgba(116, 92, 255, 0.16), 0 0 28px rgba(255, 76, 168, 0.1);
}

.borrowed-shadow-back-art strong {
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 42px);
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 0 18px rgba(179, 159, 255, 0.56), 0 0 30px rgba(255, 76, 168, 0.3);
}

.borrowed-shadow-back-art > span:last-child {
  color: var(--cyan);
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.borrowed-shadow-back-code {
  color: var(--amber);
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.game-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 7px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px calc(100% - 1px), rgba(0, 0, 0, 0.34) calc(100% - 1px)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px calc(100% - 1px), rgba(0, 0, 0, 0.36) calc(100% - 1px)),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(255, 255, 255, 0.028) 12px 13px),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(0, 0, 0, 0.16) 28px 29px);
  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.035),
    inset 0 0 70px rgba(0, 0, 0, 0.28);
}

.game-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 8%, rgba(255, 255, 255, 0.19) 9%, transparent 11%),
    linear-gradient(75deg, transparent 58%, rgba(77, 242, 255, 0.13) 60%, transparent 64%);
  opacity: 0.55;
}

.game-card:hover,
.game-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(77, 242, 255, 0.48);
  box-shadow:
    inset 1px 1px rgba(255, 255, 255, 0.22),
    inset -12px 0 rgba(255, 255, 255, 0.04),
    0 28px 80px rgba(0, 0, 0, 0.44),
    0 0 34px rgba(77, 242, 255, 0.12);
}

.game-grid.layout-display {
  width: min(920px, 100%);
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 22px;
}

.game-grid.layout-rack {
  width: min(780px, 100%);
  margin-inline: auto;
  grid-template-columns: 1fr;
  gap: 12px;
}

.game-grid.layout-rack .game-card {
  padding: 10px 12px 10px 22px;
}

.game-grid.layout-rack .game-card-front {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 0.8fr);
  grid-template-areas:
    "preview label"
    "tape label";
  gap: 12px 16px;
  align-items: stretch;
}

.game-grid.layout-rack .preview-window {
  grid-area: preview;
}

.game-grid.layout-rack .cassette-face {
  grid-area: tape;
  height: 68px;
  margin: 0 2px;
  align-self: end;
}

.game-grid.layout-rack .label-strip {
  grid-area: label;
  min-height: 100%;
  align-content: end;
}

.game-grid.is-layout-fx .game-card {
  animation: layoutCasePop 320ms ease-out;
}

.game-card-inner {
  position: relative;
  z-index: 1;
  min-height: 100%;
  transform-style: preserve-3d;
  transition: transform 980ms cubic-bezier(0.18, 0.72, 0.12, 1);
}

.case-backs-visible .game-card-inner {
  transform: rotateY(180deg) rotateZ(1turn);
}

.game-card-face {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.game-card-front {
  position: relative;
}

.case-backs-visible .game-card-front {
  pointer-events: none;
}

.game-card-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04) 34%, rgba(77, 242, 255, 0.1)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 16px),
    rgba(3, 5, 8, 0.9);
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, 0.08),
    inset 0 0 70px rgba(77, 242, 255, 0.08);
  overflow: hidden;
  transform: rotateY(180deg);
}

.game-card-back::before,
.game-card-back::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.game-card-back::before {
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0.22), transparent 19%, transparent 74%, rgba(255, 255, 255, 0.12)),
    linear-gradient(90deg, rgba(77, 242, 255, 0.12), transparent 18%, transparent 82%, rgba(255, 76, 168, 0.1));
  mix-blend-mode: screen;
}

.game-card-back::after {
  z-index: 3;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 6px),
    linear-gradient(100deg, transparent 0 42%, rgba(255, 255, 255, 0.22) 48%, transparent 55% 100%);
  opacity: 0.28;
}

.case-back-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.38),
    0 0 28px rgba(77, 242, 255, 0.1);
}

.responsive-case-art {
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

.game-grid.layout-display .responsive-case-art,
.game-grid.layout-rack .responsive-case-art,
.game-grid:not(.layout-display):not(.layout-rack) .responsive-case-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zippa-bonus-back {
  padding: 8px;
}

.zippa-snakenspace-button {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 10px 10px 10px 24px;
  border: 1px solid rgba(255, 214, 72, 0.52);
  border-radius: 6px;
  color: rgba(247, 242, 232, 0.96);
  background:
    linear-gradient(140deg, rgba(255, 214, 72, 0.16), rgba(77, 242, 255, 0.07) 44%, rgba(255, 76, 168, 0.08)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 20px),
    rgba(8, 9, 14, 0.92);
  box-shadow:
    inset 1px 1px rgba(255, 255, 255, 0.16),
    inset -10px 0 rgba(255, 255, 255, 0.035),
    inset 0 0 34px rgba(255, 214, 72, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.42);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.zippa-bonus-cassette {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 64px auto;
  gap: 10px;
  align-items: stretch;
  overflow: hidden;
}

.zippa-bonus-cassette .case-spine {
  left: 0;
}

.zippa-bonus-cassette .preview-window {
  min-height: 0;
}

.zippa-bonus-cassette .preview-video,
.zippa-bonus-cassette .preview-window video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.18) contrast(1.1) brightness(1.02);
}

.zippa-bonus-cassette .cassette-face {
  height: 64px;
  margin: 0 2px;
}

.zippa-bonus-cassette .label-strip {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: end;
  min-height: 92px;
  gap: 5px;
}

.zippa-bonus-stamp {
  position: relative;
  z-index: 2;
  justify-self: start;
  padding: 4px 7px 3px;
  border: 1px solid rgba(255, 214, 72, 0.72);
  border-radius: 3px;
  color: rgba(255, 214, 72, 0.96);
  font-family: var(--font-pixel);
  font-size: clamp(7px, 0.78vw, 9px);
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-2deg);
  background:
    linear-gradient(90deg, rgba(255, 214, 72, 0.16), rgba(255, 76, 168, 0.12)),
    rgba(0, 0, 0, 0.28);
  box-shadow:
    inset 0 0 10px rgba(255, 214, 72, 0.08),
    0 0 12px rgba(255, 214, 72, 0.14);
}

.zippa-bonus-title {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1;
  letter-spacing: 0;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow:
    0 0 12px rgba(255, 214, 72, 0.3),
    0 2px rgba(0, 0, 0, 0.7);
}

.zippa-bonus-genre {
  position: relative;
  z-index: 2;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.zippa-bonus-cassette .zippa-bonus-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.86);
}

.zippa-snakenspace-button:hover,
.zippa-snakenspace-button:focus-visible {
  border-color: rgba(255, 214, 72, 0.86);
  outline: none;
  box-shadow:
    inset 1px 1px rgba(255, 255, 255, 0.18),
    inset -10px 0 rgba(255, 255, 255, 0.045),
    inset 0 0 34px rgba(255, 214, 72, 0.14),
    0 0 30px rgba(255, 214, 72, 0.18),
    0 14px 30px rgba(0, 0, 0, 0.44);
}

.game-grid.layout-rack .zippa-bonus-cassette {
  grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 0.8fr);
  grid-template-rows: auto 68px;
  grid-template-areas:
    "preview label"
    "tape label";
  gap: 12px 16px;
}

.game-grid.layout-rack .zippa-bonus-cassette .preview-window {
  grid-area: preview;
}

.game-grid.layout-rack .zippa-bonus-cassette .cassette-face {
  grid-area: tape;
  height: 68px;
  align-self: end;
}

.game-grid.layout-rack .zippa-bonus-cassette .label-strip {
  grid-area: label;
  min-height: 100%;
  grid-template-rows: 1fr auto auto auto;
}

.game-grid.layout-rack .zippa-bonus-cassette .cassette-tips > span {
  position: relative;
  display: block;
  padding-left: 14px;
}

.game-grid.layout-rack .zippa-bonus-cassette .cassette-tips > span::before {
  content: ">";
  position: absolute;
  left: 0;
  color: var(--cyan);
}

.game-card.is-reserved {
  filter: saturate(0.78);
}

.case-spine {
  position: absolute;
  inset: 0 auto 0 0;
  width: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-pixel);
  font-size: 7px;
  background:
    radial-gradient(circle at 50% 16px, rgba(255, 255, 255, 0.34) 0 2px, transparent 3px),
    radial-gradient(circle at 50% calc(100% - 16px), rgba(255, 255, 255, 0.24) 0 2px, transparent 3px),
    linear-gradient(180deg, var(--case-a), var(--case-b)),
    repeating-linear-gradient(180deg, transparent 0 9px, rgba(255, 255, 255, 0.14) 9px 10px),
    rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 1px 0 rgba(255, 255, 255, 0.18),
    inset -1px 0 rgba(0, 0, 0, 0.42);
}

.case-spine span {
  writing-mode: vertical-rl;
}

.preview-window {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 6px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 16px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.38) 0 7px, transparent 7px calc(100% - 7px), rgba(0, 0, 0, 0.38) calc(100% - 7px)),
    radial-gradient(circle at 50% 50%, rgba(77, 242, 255, 0.12), transparent 42%),
    linear-gradient(180deg, #06080b, #101015);
  box-shadow:
    inset 0 0 0 4px rgba(0, 0, 0, 0.34),
    inset 0 0 0 6px rgba(255, 255, 255, 0.025),
    inset 0 0 24px rgba(0, 0, 0, 0.62),
    0 12px 30px rgba(0, 0, 0, 0.32),
    0 0 22px rgba(77, 242, 255, 0.08);
}

.preview-window::before,
.preview-window::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.preview-window::before {
  inset: 7px;
  border: 1px solid rgba(77, 242, 255, 0.18);
  border-radius: 4px;
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.58),
    inset 0 0 26px rgba(77, 242, 255, 0.08);
}

.preview-window::after {
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 4px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 0 50%, rgba(255, 93, 93, 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 12px 50%, rgba(155, 255, 117, 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 2px) 50%, var(--case-a) 0 2px, transparent 3px),
    linear-gradient(90deg, transparent 0 30px, rgba(255, 255, 255, 0.28) 30px 58%, transparent 58%);
  opacity: 0.78;
}

.asciline-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.preview-video {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: saturate(1.18) contrast(1.12) brightness(0.96);
  transform: scale(1.035);
  transition: opacity 120ms ease;
}

.preview-still {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.08);
}

.game-card[data-game-id="sticker-hex"] .preview-still,
.game-card[data-game-id="sticker-hex"] .case-back-image {
  object-fit: contain;
  object-position: center;
}

.game-card[data-game-id="uski"] .preview-video {
  object-fit: contain;
  background:
    radial-gradient(circle at 50% 50%, rgba(77, 242, 255, 0.12), transparent 48%),
    linear-gradient(180deg, #05070a, #111116);
}

.has-video .asciline-canvas {
  display: block;
}

body.use-video-previews .preview-video {
  display: block;
}

body.use-video-previews .preview-video.is-preview-ready {
  opacity: 1;
}

body.use-video-previews .has-video .asciline-canvas {
  display: none;
}

body.use-asciline-previews .preview-video {
  display: none;
}

body.use-asciline-previews .has-video .asciline-canvas {
  display: block;
}

.preview-glass {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 9%, transparent 91%, rgba(0, 0, 0, 0.28)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 20%, transparent 68%, rgba(255, 255, 255, 0.08)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: 0.46;
}

.play-overlay {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.32),
    0 0 32px rgba(77, 242, 255, 0.22),
    0 14px 32px rgba(0, 0, 0, 0.34);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.86);
  transition: opacity 150ms ease, transform 150ms ease, background 150ms ease;
  z-index: 2;
}

.preview-window:hover .play-overlay,
.play-overlay:focus-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.play-overlay:hover {
  background: rgba(255, 180, 67, 0.28);
}

.play-triangle {
  position: absolute;
  left: 29px;
  top: 22px;
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 20px solid currentColor;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.44));
}

.preview-window.is-locked {
  cursor: default;
}

.preview-window.is-locked .preview-video {
  filter: saturate(1.28) contrast(1.16) brightness(0.9);
}

.coming-soon-sticker {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  min-width: min(78%, 245px);
  padding: 10px 18px 9px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(255, 76, 168, 0.96), rgba(77, 242, 255, 0.92)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.16) 0 8px, transparent 8px 16px);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.56),
    0 3px 0 rgba(5, 8, 14, 0.86),
    0 0 22px rgba(255, 76, 168, 0.36);
  font-family: var(--font-display);
  font-size: clamp(16px, 2.1vw, 26px);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.55),
    0 0 10px rgba(0, 0, 0, 0.48);
  transform: translate(-50%, -50%) rotate(-8deg);
  pointer-events: none;
}

.coming-soon-sticker::before,
.coming-soon-sticker::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(6, 8, 14, 0.8);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.36);
  transform: translateY(-50%);
}

.coming-soon-sticker::before {
  left: 7px;
}

.coming-soon-sticker::after {
  right: 7px;
}

/* The cassette under each preview, drawn after a real clear-shell tape: smoky
   see-through plastic lit from the left, Phillips screws in the corners, a
   raised bridge along the bottom edge with its screw, pressure pad and
   capstan holes, and two reels - a dark wound tape pack around a light plastic
   hub with teeth - that turn. The per-game --case-a / --case-b tint still
   washes across the plastic. Bottom screws and the bridge are background
   layers; the top screws are the pseudo-elements. */
.cassette-face {
  position: relative;
  display: block;
  /* Reel size and the space between the reels follow the cassette's width, so
     a narrow layout shrinks them symmetrically instead of pushing one reel out
     of the shell. On a normal-width cassette both clamps sit at the values the
     reels always had. */
  --reel: clamp(36px, 28%, 60px);
  --reel-gap: clamp(14px, 11.4%, 100px);   /* centre line to each reel's inner edge */
  height: 82px;
  margin: 12px 4px 10px;
  padding: 4px 22px 16px;
  border: 1px solid rgba(225, 240, 255, 0.34);
  border-radius: 9px;
  background:
    /* bottom screws: cross slots over a metal head */
    linear-gradient(0deg, transparent 42%, rgba(20, 22, 26, 0.78) 43% 57%, transparent 58%) left 12px bottom 9px / 7px 7px no-repeat,
    linear-gradient(90deg, transparent 42%, rgba(20, 22, 26, 0.78) 43% 57%, transparent 58%) left 12px bottom 9px / 7px 7px no-repeat,
    radial-gradient(circle at 38% 34%, #f4f6f8 0 20%, #a3abb3 46%, #4a5057 74%, transparent 76%) left 10px bottom 7px / 11px 11px no-repeat,
    linear-gradient(0deg, transparent 42%, rgba(20, 22, 26, 0.78) 43% 57%, transparent 58%) right 12px bottom 9px / 7px 7px no-repeat,
    linear-gradient(90deg, transparent 42%, rgba(20, 22, 26, 0.78) 43% 57%, transparent 58%) right 12px bottom 9px / 7px 7px no-repeat,
    radial-gradient(circle at 38% 34%, #f4f6f8 0 20%, #a3abb3 46%, #4a5057 74%, transparent 76%) right 10px bottom 7px / 11px 11px no-repeat,
    /* the bridge's screw, pressure pad and capstan holes (fixed size, so nothing stretches) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='22' viewBox='0 0 150 22'%3E%3Crect x='20' y='9' width='12' height='10' rx='3' fill='rgba(4,6,9,0.78)' stroke='rgba(230,240,255,0.3)'/%3E%3Crect x='118' y='9' width='12' height='10' rx='3' fill='rgba(4,6,9,0.78)' stroke='rgba(230,240,255,0.3)'/%3E%3Crect x='52' y='12' width='46' height='9' rx='1.5' fill='rgba(24,22,26,0.92)' stroke='rgba(230,240,255,0.2)'/%3E%3Ccircle cx='75' cy='6.5' r='4.6' fill='rgba(206,212,218,0.96)' stroke='rgba(0,0,0,0.55)'/%3E%3Cpath d='M72.4 6.5h5.2M75 3.9v5.2' stroke='rgba(0,0,0,0.72)' stroke-width='1.2'/%3E%3C/svg%3E") center bottom / 150px 22px no-repeat,
    /* the bridge: a raised trapezoid of clear plastic along the bottom edge */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M24 1H276L299 24H1Z' fill='rgba(214,230,246,0.12)' stroke='rgba(236,246,255,0.42)' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M36 6H264M42 11H258M48 16H252' stroke='rgba(255,255,255,0.09)' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center bottom / min(58%, 330px) 24px no-repeat,
    /* light through the plastic: cyan from the left, a softer pink from the right */
    linear-gradient(90deg, rgba(120, 222, 255, 0.2), transparent 20%, transparent 78%, rgba(255, 128, 222, 0.14)),
    linear-gradient(120deg, var(--case-a), transparent 26%, transparent 72%, var(--case-b)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.07) 34%, rgba(255, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0.22)),
    /* moulding ribs */
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px),
    rgba(26, 34, 46, 0.52);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.4),
    inset 0 -1px rgba(0, 0, 0, 0.35),
    inset 0 0 0 5px rgba(255, 255, 255, 0.035),
    inset 0 0 0 6px rgba(0, 0, 0, 0.16),
    0 10px 22px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.cassette-face::before,
.cassette-face::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 7px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background:
    linear-gradient(0deg, transparent 42%, rgba(20, 22, 26, 0.78) 43% 57%, transparent 58%) center / 64% 64% no-repeat,
    linear-gradient(90deg, transparent 42%, rgba(20, 22, 26, 0.78) 43% 57%, transparent 58%) center / 64% 64% no-repeat,
    radial-gradient(circle at 38% 34%, #f4f6f8 0 20%, #a3abb3 46%, #4a5057 76%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.cassette-face::before {
  left: 10px;
}

.cassette-face::after {
  right: 10px;
}

/* A reel: the wound tape pack is the element; ::before is the plastic hub with
   its teeth and pin, ::after the gloss of the clear shell above it. */
.spool {
  position: absolute;
  top: calc(50% - 6px);
  left: calc(50% - var(--reel-gap) - var(--reel) / 2);
  z-index: 1;
  width: var(--reel);
  /* not height: var(--reel) - a percentage height resolves against the shell's
     height, which squashed the reels into ovals */
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgba(64, 44, 34, 0.55) 0 1px, transparent 1px 3px),
    radial-gradient(circle, #241a15 0 58%, #150f0c 70%, #0b0807 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 12px rgba(0, 0, 0, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.45);
  animation: spoolSpin 8s linear infinite;
}

.spool-right {
  left: calc(50% + var(--reel-gap) + var(--reel) / 2);
  animation-duration: 7.2s;
  animation-direction: reverse;
}

.spool::before,
.spool::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.spool::before {
  inset: 26%;
  background:
    radial-gradient(circle, #eef1f4 0 9%, #5d646b 12%, transparent 14%),
    radial-gradient(circle, #101215 0 30%, transparent 31%),
    radial-gradient(circle, transparent 0 55%, #e9edf1 57%, #c4cad1 76%, #8e969e 92%, #3a3e44 97%),
    repeating-conic-gradient(from 8deg, #e3e7eb 0 16deg, transparent 16deg 60deg),
    #101215;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.spool::after {
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 58%, rgba(255, 255, 255, 0.07) 70%, transparent 74%);
}

.game-grid.layout-rack .cassette-face,
.zippa-bonus-cassette .cassette-face {
  --reel: clamp(32px, 16%, 48px);
}

@keyframes spoolSpin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes layoutCasePop {
  0% {
    opacity: 0.72;
    transform: translateY(6px) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* the window between the reels: tape running past, with the ruler ticks of the shell */
.tape-window {
  position: absolute;
  left: 50%;
  top: calc(50% - 6px);
  width: clamp(24px, calc(2 * var(--reel-gap) - 4px), 184px);
  height: 26px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(230, 242, 255, 0.3);
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, 0.26) 9px 10px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 40%, rgba(0, 0, 0, 0.3)),
    linear-gradient(90deg, rgba(8, 8, 12, 0.85), rgba(255, 150, 58, 0.62) 34%, rgba(255, 76, 168, 0.58) 66%, rgba(8, 8, 12, 0.85));
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.55),
    inset 0 1px rgba(255, 255, 255, 0.22),
    0 0 12px rgba(255, 120, 150, 0.12);
}

.tape-window::before,
.tape-window::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 32%;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(20, 12, 8, 0.8);
  box-shadow: 0 3px rgba(255, 255, 255, 0.08);
}

.tape-window::before {
  left: -18%;
}

.tape-window::after {
  right: -18%;
}

.label-strip {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background:
    radial-gradient(circle at 12% 30%, rgba(255, 255, 255, 0.12), transparent 26%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07)),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(255, 255, 255, 0.12) 17px 18px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 13px),
    rgba(8, 9, 12, 0.74);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -10px rgba(0, 0, 0, 0.16),
    0 10px 22px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.cassette-tips {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.game-grid.layout-rack .label-strip {
  grid-template-rows: 1fr auto auto;
  align-content: stretch;
}

.game-grid.layout-rack .cassette-tips {
  align-self: start;
  display: grid;
  gap: clamp(8px, 1vw, 12px);
  margin: clamp(20px, 3vw, 34px) 0 auto;
  color: rgba(246, 249, 244, 0.88);
  font-family: var(--font-pixel);
  font-size: clamp(9px, 0.95vw, 12px);
  line-height: 1.3;
  text-transform: uppercase;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.82),
    0 0 10px rgba(77, 242, 255, 0.18);
}

.game-grid.layout-rack .cassette-tips li {
  position: relative;
  padding-left: 14px;
}

.game-grid.layout-rack .cassette-tips li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: rgba(255, 180, 67, 0.95);
}

.label-strip::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 12px;
  right: 12px;
  top: 8px;
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--case-a), var(--magenta) 44%, var(--amber));
  opacity: 0.86;
  box-shadow: 0 0 12px var(--case-b);
}

.label-strip::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 10px 12px 8px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.09) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 42%, rgba(0, 0, 0, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 84%, rgba(255, 255, 255, 0.08) 0 1px, transparent 2px),
    linear-gradient(110deg, transparent 0 48%, rgba(255, 255, 255, 0.07) 52%, transparent 57% 100%);
  opacity: 0.86;
}

.label-strip h3,
.label-strip p,
.cassette-new-badge,
.label-strip .cassette-tips {
  position: relative;
  z-index: 2;
}

.label-strip h3 {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.45),
    0 0 14px var(--case-a);
}

.cassette-title-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.cassette-title-row h3 {
  min-width: 0;
  max-width: 100%;
}

.game-card[data-game-id="bytefall-protocol-demo"] .cassette-title-row h3,
.game-card[data-game-id="gauntlet-blitz"] .cassette-title-row h3,
.game-card[data-game-id="wordventure"] .cassette-title-row h3 {
  font-size: clamp(13px, 1.55vw, 18px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  white-space: normal;
  overflow-wrap: normal;
  text-wrap: balance;
}

.game-grid.layout-rack .game-card[data-game-id="bytefall-protocol-demo"] .cassette-title-row h3,
.game-grid.layout-rack .game-card[data-game-id="gauntlet-blitz"] .cassette-title-row h3,
.game-grid.layout-rack .game-card[data-game-id="wordventure"] .cassette-title-row h3 {
  font-size: clamp(11px, 1.25vw, 15px);
}

/* Reserve equal side space so controller badges never push long titles off center. */
.game-card[data-game-id="bytefall-protocol-demo"] .cassette-title-row,
.game-card[data-game-id="gauntlet-blitz"] .cassette-title-row,
.game-card[data-game-id="wordventure"] .cassette-title-row {
  display: block;
  padding-inline: 38px;
  text-align: center;
}

/* The two longest controller titles need the full label width in narrow/tall cases. */
.game-card[data-game-id="bytefall-protocol-demo"] .cassette-title-row,
.game-card[data-game-id="gauntlet-blitz"] .cassette-title-row {
  padding-inline: 0;
  text-align: left;
}

.game-card[data-game-id="bytefall-protocol-demo"] .cassette-title-row h3,
.game-card[data-game-id="gauntlet-blitz"] .cassette-title-row h3,
.game-card[data-game-id="wordventure"] .cassette-title-row h3 {
  width: 100%;
  text-align: center;
}

.game-card[data-game-id="bytefall-protocol-demo"] .controller-supported-icon,
.game-card[data-game-id="gauntlet-blitz"] .controller-supported-icon,
.game-card[data-game-id="wordventure"] .controller-supported-icon {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 5;
  transform: translateY(-50%);
}

.game-card[data-game-id="bytefall-protocol-demo"] .cassette-title-row h3,
.game-card[data-game-id="gauntlet-blitz"] .cassette-title-row h3 {
  width: 100%;
  font-size: clamp(12px, 1.38vw, 17px);
  letter-spacing: -0.035em;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  text-wrap: nowrap;
  text-align: left;
}

.game-card[data-game-id="bytefall-protocol-demo"] .controller-supported-icon,
.game-card[data-game-id="gauntlet-blitz"] .controller-supported-icon {
  top: calc(100% + 7px);
  right: 0;
  transform: none;
}

.controller-supported-icon {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 20px;
  border: 1px solid rgba(83, 206, 255, 0.84);
  border-radius: 12px 12px 15px 15px;
  background:
    radial-gradient(circle at 42% 70%, rgba(247, 242, 232, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 70%, rgba(247, 242, 232, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 34%, rgba(83, 206, 255, 0.62) 0 1.5px, transparent 2.5px),
    linear-gradient(180deg, rgba(247, 242, 232, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(9, 9, 26, 0.96), rgba(31, 24, 64, 0.96) 48%, rgba(7, 36, 45, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -6px 10px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 218, 85, 0.2),
    0 0 12px rgba(83, 206, 255, 0.38);
  transform: translateY(-1px);
  z-index: 3;
}

.controller-supported-icon::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 9px;
  height: 9px;
  background:
    linear-gradient(#f7f2e8, #f7f2e8) 50% 0 / 3px 100% no-repeat,
    linear-gradient(90deg, #f7f2e8, #f7f2e8) 0 50% / 100% 3px no-repeat;
  border-radius: 3px;
  filter: drop-shadow(0 0 4px rgba(83, 206, 255, 0.72));
}

.controller-supported-icon::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffda55;
  box-shadow:
    6px 0 0 #53ceff,
    3px 5px 0 #ff4da6,
    3px -5px 0 #7ed957,
    0 0 7px rgba(255, 218, 85, 0.5);
}

.controller-supported-icon i {
  position: absolute;
  inset: -3px -3px auto;
  height: 16px;
  border-radius: 12px 12px 8px 8px;
  border-top: 2px solid rgba(83, 206, 255, 0.45);
  pointer-events: none;
}

.controller-supported-icon i::before,
.controller-supported-icon i::after {
  content: "";
  position: absolute;
  top: 11px;
  width: 10px;
  height: 11px;
  border: 1px solid rgba(83, 206, 255, 0.72);
  background: linear-gradient(180deg, rgba(9, 9, 26, 0.96), rgba(15, 42, 52, 0.96));
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.42), 0 0 7px rgba(83, 206, 255, 0.28);
}

.game-card[data-game-id="jungle-rumble"] .cassette-title-row { gap: 5px; }
.game-card[data-game-id="jungle-rumble"] .cassette-title-row h3 {
  font-size: clamp(13px, 1.55vw, 18px);
  letter-spacing: -0.025em;
  white-space: nowrap;
}

@media (max-width: 430px) {
  .game-card[data-game-id="jungle-rumble"] .label-strip h3,
  .game-card[data-game-id="jungle-rumble"] .cassette-title-row h3 {
    font-size: clamp(13px, 4.5vw, 17px);
  }
}

.controller-supported-icon i::before {
  left: 0;
  border-radius: 6px 4px 9px 8px;
  transform: rotate(18deg);
}

.controller-supported-icon i::after {
  right: 0;
  border-radius: 4px 6px 8px 9px;
  transform: rotate(-18deg);
}

@media (max-width: 760px) {
  .cassette-title-row { gap: 6px; }
  .controller-supported-icon { transform: translateY(-1px) scale(0.84); transform-origin: left center; }
  .game-card[data-game-id="bytefall-protocol-demo"] .cassette-title-row,
  .game-card[data-game-id="gauntlet-blitz"] .cassette-title-row,
  .game-card[data-game-id="wordventure"] .cassette-title-row {
    padding-inline: 31px;
  }
  .game-card[data-game-id="bytefall-protocol-demo"] .cassette-title-row,
  .game-card[data-game-id="gauntlet-blitz"] .cassette-title-row {
    padding-inline: 0;
  }
  .game-card[data-game-id="bytefall-protocol-demo"] .controller-supported-icon,
  .game-card[data-game-id="gauntlet-blitz"] .controller-supported-icon,
  .game-card[data-game-id="wordventure"] .controller-supported-icon {
    transform: translateY(-50%) scale(0.84);
    transform-origin: right center;
  }
  .game-card[data-game-id="bytefall-protocol-demo"] .controller-supported-icon,
  .game-card[data-game-id="gauntlet-blitz"] .controller-supported-icon {
    transform: scale(0.84);
    transform-origin: right top;
  }
}

/* Match Drizzlewick's same-line title/controller treatment for the long Shelf I names. */
.game-card[data-game-id="bytefall-protocol-demo"] .cassette-title-row,
.game-card[data-game-id="gauntlet-blitz"] .cassette-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding-inline: 0;
  text-align: left;
}

.game-card[data-game-id="bytefall-protocol-demo"] .cassette-title-row h3,
.game-card[data-game-id="gauntlet-blitz"] .cassette-title-row h3 {
  width: auto;
  min-width: 0;
  font-size: clamp(11px, 1.18vw, 15px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: nowrap;
  text-align: left;
}

.game-card[data-game-id="bytefall-protocol-demo"] .controller-supported-icon,
.game-card[data-game-id="gauntlet-blitz"] .controller-supported-icon {
  position: relative;
  top: auto;
  right: auto;
  z-index: 3;
  transform: translateY(-1px);
  transform-origin: left center;
}

@media (max-width: 760px) {
  .game-card[data-game-id="bytefall-protocol-demo"] .cassette-title-row,
  .game-card[data-game-id="gauntlet-blitz"] .cassette-title-row {
    gap: 6px;
    padding-inline: 0;
  }
  .game-card[data-game-id="bytefall-protocol-demo"] .controller-supported-icon,
  .game-card[data-game-id="gauntlet-blitz"] .controller-supported-icon {
    transform: translateY(-1px) scale(.84);
    transform-origin: left center;
  }
}

/* Place controller support directly beside the translated genre label. */
.genre-with-controller {
  display: flex;
  align-items: center;
  gap: 8px;
}

.genre-with-controller .controller-supported-icon {
  position: relative;
  top: auto;
  right: auto;
  z-index: 5;
  transform: translateY(-1px);
  transform-origin: left center;
}

.game-card[data-game-id="wordventure"] .cassette-title-row { padding-inline: 0; }
.game-card[data-game-id="wordventure"] .cassette-title-row h3 {
  transform: translateX(10px);
}

@media (max-width: 760px) {
  .genre-with-controller { gap: 6px; }
  .genre-with-controller .controller-supported-icon {
    transform: translateY(-1px) scale(.84);
    transform-origin: left center;
  }
  .game-card[data-game-id="wordventure"] .cassette-title-row h3 {
    transform: translateX(7px);
  }
}

.label-strip p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.cassette-new-badge {
  display: block;
  width: 92px;
  max-width: 58%;
  height: auto;
  margin-top: -2px;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 2px 0 rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 10px rgba(255, 76, 168, 0.28));
}

.game-grid.layout-rack .cassette-new-badge {
  width: 104px;
  max-width: 46%;
  margin-top: 3px;
}

.embedded-game-view,
.player-view {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 24px;
  padding: 28px;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 76, 168, 0.16), transparent 30%),
    radial-gradient(circle at 78% 8%, rgba(77, 242, 255, 0.14), transparent 26%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.86));
}

.embedded-game-view[hidden],
.player-view[hidden] {
  display: none;
}

.embedded-topline,
.player-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.exit-home,
.retro-button {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 6px;
  text-transform: uppercase;
}

.now-playing {
  text-align: right;
  display: grid;
  justify-items: end;
  gap: 4px;
  max-width: min(34vw, 420px);
}

.now-playing h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.embedded-game-logo {
  display: block;
  width: clamp(180px, 24vw, 360px);
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
  object-position: right center;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 18px rgba(77, 242, 255, 0.16));
}

.embedded-game-logo[hidden] {
  display: none !important;
}

body[data-active-game="gauntlet-blitz"] .embedded-game-logo {
  width: clamp(72px, 10vw, 118px);
  max-height: 42px;
}

body[data-active-game="desktop-demolition"] .now-playing {
  position: fixed;
  z-index: 52;
  top: 8px;
  right: 8px;
  max-width: 132px;
  pointer-events: none;
}

body[data-active-game="desktop-demolition"] .embedded-game-logo {
  width: clamp(76px, 8vw, 118px);
  max-height: 38px;
  opacity: .46;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .52));
}

.embedded-stage {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(1040px, 100%);
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(4, 5, 8, 0.82);
  box-shadow:
    inset 0 0 60px rgba(77, 242, 255, 0.06),
    0 32px 80px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(18px);
}

.game-sound-toggle {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 140;
  width: 44px;
  height: 44px;
  padding: 0;
  --melody-a: #53ceff;
  --melody-b: #ff4da6;
  border: 1px solid color-mix(in srgb, var(--melody-a) 68%, transparent);
  border-radius: 12px;
  color: #f7f2e8;
  background: linear-gradient(145deg, rgba(10, 12, 27, 0.58), rgba(24, 13, 38, 0.48));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 0 18px color-mix(in srgb, var(--melody-a) 10%, transparent),
    0 0 13px color-mix(in srgb, var(--melody-a) 27%, transparent);
  backdrop-filter: blur(7px);
  opacity: .88;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Every game listed here draws its own sound control inside the canvas, so the
   host's corner toggle is a second button for the same job sitting on top of the
   game's own. Offset's lives in its pause screen (SOUND: ON); Ink Gremlin's is
   the corner note button, which the game itself hides when audio is
   unavailable. Both are present on web and on mobile, which is why neither is
   split by mode any more. */
.game-sound-toggle[hidden],
body[data-active-game="drizzlewick"] .game-sound-toggle,
body[data-active-game="borrowed-shadow"] .game-sound-toggle,
body[data-active-game="ichiba"] .game-sound-toggle,
body[data-active-game="ink-gremlin"] .game-sound-toggle,
body[data-active-game="offset"] .game-sound-toggle,
body[data-active-game="desktop-demolition"] .game-sound-toggle { display: none !important; }

.game-sound-toggle::before,
.game-sound-toggle::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--melody-a) 55%, transparent), transparent);
  opacity: .56;
}
.game-sound-toggle::before { top: 16px; }
.game-sound-toggle::after { top: 27px; }

.game-sound-toggle__note {
  position: absolute;
  z-index: 2;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1;
  color: var(--melody-a);
  text-shadow: 0 0 7px color-mix(in srgb, var(--melody-a) 72%, transparent);
  transform-origin: center;
}
.game-sound-toggle__note--one { left: 7px; top: 17px; font-size: 16px; transform: rotate(-9deg); }
.game-sound-toggle__note--two { left: 17px; top: 7px; font-size: 22px; color: var(--melody-b); text-shadow: 0 0 8px color-mix(in srgb, var(--melody-b) 72%, transparent); }
.game-sound-toggle__note--three { right: 6px; top: 18px; font-size: 15px; transform: rotate(10deg); }

.game-sound-toggle__slash {
  display: none;
  position: absolute;
  left: 20px;
  top: 8px;
  width: 3px;
  height: 29px;
  border-radius: 2px;
  background: #ff4d78;
  box-shadow: 0 0 7px rgba(255,77,120,.75);
  transform: rotate(-42deg);
}

.game-sound-toggle[aria-pressed="true"] { color: rgba(247,242,232,.62); border-color: rgba(255,77,120,.55); opacity: .58; }
.game-sound-toggle[aria-pressed="true"] .game-sound-toggle__note { filter: grayscale(.75); opacity: .45; }
.game-sound-toggle[aria-pressed="true"] .game-sound-toggle__slash { display: block; }
.game-sound-toggle:focus-visible { outline: 2px solid #ffda55; outline-offset: 3px; }
.game-sound-toggle:active { transform: scale(.94); }

@media (max-width: 760px) {
  .game-sound-toggle {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    width: 40px;
    height: 40px;
    opacity: .82;
  }
  .game-sound-toggle__note--one { left: 5px; top: 15px; }
  .game-sound-toggle__note--two { left: 15px; top: 5px; }
  .game-sound-toggle__note--three { right: 5px; top: 16px; }
  .game-sound-toggle__slash { left: 18px; top: 6px; }
}

body[data-active-game="bubblebat"] .game-sound-toggle { --melody-a: #62e8ff; --melody-b: #a578ff; }
body[data-active-game="plash"] .game-sound-toggle { --melody-a: #ef4058; --melody-b: #81858b; }
body[data-active-game="match-race"] .game-sound-toggle { --melody-a: #35d6ff; --melody-b: #ff354f; }
body[data-active-game="uski"] .game-sound-toggle { --melody-a: #70efff; --melody-b: #ffde4f; }
body[data-active-game="snakenspace"] .game-sound-toggle { --melody-a: #b9ff58; --melody-b: #ffe65a; }
body[data-active-game="sticker-hex"] .game-sound-toggle { --melody-a: #ff9fe5; --melody-b: #7fe7ff; }
body[data-active-game="zippa"] .game-sound-toggle { --melody-a: #f5d0ff; --melody-b: #ff5aa8; }
body[data-active-game="bytefall-protocol-demo"] .game-sound-toggle { --melody-a: #42dfff; --melody-b: #ff3bba; }
body[data-active-game="gauntlet-blitz"] .game-sound-toggle { --melody-a: #ffda35; --melody-b: #ff3b9d; }
body[data-active-game="wordventure"] .game-sound-toggle { --melody-a: #ffae45; --melody-b: #67cfff; }
body[data-active-game="desktop-demolition"] .game-sound-toggle { --melody-a: #72d7ff; --melody-b: #9fe870; }
body[data-active-game="borrowed-shadow"] .game-sound-toggle { --melody-a: #d5d0c5; --melody-b: #7e8791; }
body[data-active-game="ink-gremlin"] .game-sound-toggle { --melody-a: #18e3e6; --melody-b: #ff4d3f; }

.embedded-canvas,
.embedded-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: #020308;
  image-rendering: pixelated;
  outline: none;
  touch-action: none;
  box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.72);
}

/* The vertical space the player's own chrome needs: the topline, logo and
   title above the frame, plus the controls row below it. Measured at 217px
   above + a 39px control row + margins, so 188px (the previous value) left
   the frame and the controls hanging below the fold on any window shorter
   than roughly 780px - which is an ordinary Chrome window on a Mac once the
   tab bar, address bar and dock are subtracted. It only binds on short
   viewports; on tall ones the frame is already capped by its own max size,
   so nothing visibly changed there. */
:root { --player-chrome: 264px; --player-chrome-slim: 224px; }

.embedded-frame {
  height: min(58vw, 585px);
  max-height: calc(100vh - var(--player-chrome));
}

.embedded-frame.is-square-frame {
  justify-self: center;
  width: min(100%, 640px, calc(100vh - var(--player-chrome)));
  height: auto;
  max-height: none;
  aspect-ratio: 1;
}

/* PicoPet is a 160x212 handheld. In the default 16/9 stage it would sit as a
   stamp in the middle of a wide black frame, so the frame takes the game's own
   shape and is bounded by the stage HEIGHT rather than its width. */
.embedded-frame.is-portrait-frame {
  justify-self: center;
  width: min(100%, 460px, calc((100vh - var(--player-chrome)) * 0.7547));
  height: auto;
  max-height: none;
  aspect-ratio: 160 / 212;
}

/* ICHIBA is a 450x648 panel. Left in the default 16/9 stage it sat as a column
   in a wide tan field; sizing the FRAME to the game's own shape removes the
   surround entirely, the same treatment PicoPet gets above. Web only - on touch
   the frame is already full-bleed. */
@media (hover: hover) and (pointer: fine) {
  #ichiba-frame.embedded-frame {
    justify-self: center;
    width: min(100%, 470px, calc((100vh - var(--player-chrome)) * 0.7785));
    height: auto;
    max-height: none;
    aspect-ratio: 450 / 578;
  }
}

.embedded-canvas[hidden],
.embedded-frame[hidden] {
  display: none;
}

.embedded-canvas.is-paper-canvas {
  justify-self: center;
  width: min(100%, 860px);
  aspect-ratio: 4 / 3;
  background: #f8f7f4;
  image-rendering: auto;
}

.embedded-canvas.is-portrait-canvas {
  justify-self: center;
  width: min(100%, 480px);
  aspect-ratio: 2 / 3;
}

body[data-active-game="uski"] .embedded-game-view {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 16px 24px;
  overflow: hidden;
}

body[data-active-game="uski"] .embedded-topline {
  position: absolute;
  z-index: 4;
  top: 16px;
  right: 24px;
  left: 24px;
  pointer-events: none;
}

body[data-active-game="uski"] .exit-home {
  pointer-events: auto;
}

body[data-active-game="uski"] .now-playing {
  max-width: min(24vw, 230px);
}

body[data-active-game="uski"] .embedded-game-logo {
  width: min(24vw, 230px);
  max-height: 74px;
}

body[data-active-game="uski"] .embedded-stage {
  width: min(100%, 720px);
  max-height: calc(100svh - 28px);
  padding: 10px;
}

body[data-active-game="uski"] .embedded-canvas.is-portrait-canvas {
  width: auto;
  max-width: 100%;
  height: min(880px, calc(100svh - 92px));
}

body[data-active-game="snakenspace"] .embedded-stage {
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  body[data-active-game="snakenspace"] .embedded-game-view {
    grid-template-rows: 1fr;
    padding: 16px 24px;
    overflow: hidden;
  }

  body[data-active-game="snakenspace"] .embedded-topline {
    position: absolute;
    z-index: 4;
    top: 16px;
    right: 24px;
    left: 24px;
    pointer-events: none;
  }

  body[data-active-game="snakenspace"] .exit-home {
    pointer-events: auto;
  }

  body[data-active-game="snakenspace"] .now-playing {
    max-width: min(24vw, 230px);
  }

  body[data-active-game="snakenspace"] .embedded-game-logo {
    width: min(28vw, 260px);
    max-height: 88px;
  }

  body[data-active-game="snakenspace"] .embedded-stage {
    width: min(100%, 800px);
    max-height: calc(100svh - 20px);
  }

  body[data-active-game="snakenspace"] .embedded-frame.is-square-frame {
    width: min(100%, 724px, calc(100svh - 48px));
  }
}

.embedded-canvas:focus-visible {
  border-color: rgba(255, 180, 67, 0.72);
  box-shadow:
    inset 0 0 36px rgba(0, 0, 0, 0.72),
    0 0 28px rgba(255, 180, 67, 0.22);
}

.embedded-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.embedded-controls span {
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  color: rgba(247, 242, 232, 0.82);
  background: rgba(0, 0, 0, 0.28);
  font-family: var(--font-pixel);
  font-size: 9px;
  line-height: 1.4;
  text-transform: uppercase;
}

body[data-active-game="drizzlewick"][data-active-game-mode="mobile"] .embedded-controls {
  display: none !important;
}

.mobile-controls {
  display: none;
  width: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.mobile-controls[hidden] {
  display: none;
}

.mobile-control-pad,
.mobile-course-wheel,
.mobile-action-bank {
  touch-action: none;
}

.mobile-control-pad {
  display: grid;
  grid-template-columns: repeat(3, clamp(44px, 12vw, 58px));
  grid-template-rows: repeat(3, clamp(44px, 12vw, 58px));
  gap: 6px;
  place-content: center;
  justify-self: start;
}

.mobile-pad-button,
.mobile-action-button {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(247, 242, 232, 0.94);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)),
    rgba(2, 5, 8, 0.78);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.2),
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(77, 242, 255, 0.1);
  -webkit-tap-highlight-color: transparent;
}

.mobile-pad-button {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.mobile-pad-button::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid currentColor;
  filter: drop-shadow(0 0 8px rgba(77, 242, 255, 0.5));
}

.mobile-pad-up {
  grid-column: 2;
  grid-row: 1;
}

.mobile-pad-up::before {
  transform: rotate(-90deg);
}

.mobile-pad-left {
  grid-column: 1;
  grid-row: 2;
}

.mobile-pad-left::before {
  transform: rotate(180deg);
}

.mobile-pad-right {
  grid-column: 3;
  grid-row: 2;
}

.mobile-pad-down {
  grid-column: 2;
  grid-row: 3;
}

.mobile-pad-down::before {
  transform: rotate(90deg);
}

.mobile-course-wheel {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: clamp(150px, 38vw, 190px);
  aspect-ratio: 1;
  border: 1px solid rgba(77, 242, 255, 0.38);
  border-radius: 50%;
  color: rgba(247, 242, 232, 0.94);
  background:
    radial-gradient(circle at 50% 50%, rgba(77, 242, 255, 0.22) 0 20%, transparent 21%),
    radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(77, 242, 255, 0.16) 47% 49%, transparent 50%),
    conic-gradient(from -45deg, rgba(77, 242, 255, 0.18), rgba(255, 76, 168, 0.14), rgba(255, 180, 67, 0.16), rgba(77, 242, 255, 0.18)),
    rgba(2, 5, 12, 0.78);
  box-shadow:
    inset 0 0 34px rgba(77, 242, 255, 0.1),
    inset 0 0 0 10px rgba(255, 255, 255, 0.025),
    0 16px 32px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(77, 242, 255, 0.14);
  -webkit-tap-highlight-color: transparent;
}

.mobile-course-wheel::before,
.mobile-course-wheel::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.mobile-course-wheel::before {
  inset: 12%;
  border: 1px dashed rgba(247, 242, 232, 0.22);
}

.mobile-course-wheel::after {
  inset: 4px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(77, 242, 255, 0.18) 50%, transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(77, 242, 255, 0.18) 50%, transparent calc(50% + 1px));
  opacity: 0.82;
}

.mobile-course-core {
  position: relative;
  z-index: 2;
  width: 42%;
  aspect-ratio: 1;
  border: 1px solid rgba(247, 242, 232, 0.36);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.86) 0 8%, transparent 9%),
    radial-gradient(circle at 50% 50%, rgba(77, 242, 255, 0.58), rgba(17, 42, 92, 0.86) 58%, rgba(3, 7, 16, 0.96));
  box-shadow:
    inset -7px -8px 14px rgba(0, 0, 0, 0.34),
    inset 5px 5px 12px rgba(255, 255, 255, 0.12),
    0 0 18px rgba(77, 242, 255, 0.44);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.mobile-course-marker {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: rgba(247, 242, 232, 0.9);
  background: rgba(0, 7, 18, 0.44);
  box-shadow: inset 0 0 0 1px rgba(77, 242, 255, 0.18);
  transition: color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.mobile-course-marker::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid currentColor;
  filter: drop-shadow(0 0 8px rgba(77, 242, 255, 0.48));
}

.mobile-course-up {
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
}

.mobile-course-up::before {
  transform: rotate(-90deg);
}

.mobile-course-right {
  right: 7%;
  top: 50%;
  transform: translateY(-50%);
}

.mobile-course-down {
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
}

.mobile-course-down::before {
  transform: rotate(90deg);
}

.mobile-course-left {
  left: 7%;
  top: 50%;
  transform: translateY(-50%);
}

.mobile-course-left::before {
  transform: rotate(180deg);
}

.mobile-course-wheel[data-course="up"] .mobile-course-up,
.mobile-course-wheel[data-course="right"] .mobile-course-right,
.mobile-course-wheel[data-course="down"] .mobile-course-down,
.mobile-course-wheel[data-course="left"] .mobile-course-left {
  color: #ffffff;
  background: rgba(255, 180, 67, 0.24);
  box-shadow:
    inset 0 0 0 1px rgba(255, 180, 67, 0.68),
    0 0 18px rgba(255, 180, 67, 0.32);
}

.mobile-course-wheel.is-active .mobile-course-core {
  transform: scale(0.92);
  box-shadow:
    inset -7px -8px 14px rgba(0, 0, 0, 0.34),
    inset 5px 5px 12px rgba(255, 255, 255, 0.12),
    0 0 24px rgba(255, 180, 67, 0.42);
}

.mobile-action-bank {
  display: grid;
  grid-template-columns: repeat(2, minmax(68px, 1fr));
  gap: 8px;
  justify-self: end;
  align-self: center;
  width: min(232px, 100%);
}

.mobile-action-button {
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--font-pixel);
  font-size: 9px;
  line-height: 1.15;
  text-transform: uppercase;
}

.mobile-action-button span {
  pointer-events: none;
}

.mobile-action-button[data-mobile-icon] span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mobile-action-button[data-mobile-icon]::before {
  content: "";
  pointer-events: none;
  display: block;
}

.mobile-action-button[data-mobile-icon="bubble"]::before {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(180, 252, 255, 0.82);
  background:
    radial-gradient(circle at 33% 26%, rgba(255, 255, 255, 0.95) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 66%, rgba(255, 255, 255, 0.24) 0 14%, transparent 15%),
    radial-gradient(circle at 48% 48%, rgba(77, 242, 255, 0.34), rgba(48, 148, 255, 0.44) 56%, rgba(17, 38, 82, 0.52));
  box-shadow:
    inset -5px -6px 10px rgba(3, 16, 50, 0.4),
    inset 5px 5px 12px rgba(255, 255, 255, 0.22),
    0 0 16px rgba(77, 242, 255, 0.48);
}

.mobile-action-button[data-mobile-icon="carve"]::before {
  width: 34px;
  height: 28px;
  border: 4px solid transparent;
  border-left-color: rgba(247, 242, 232, 0.94);
  border-bottom-color: rgba(77, 242, 255, 0.92);
  border-radius: 50%;
  transform: rotate(-32deg);
  box-shadow: -4px 5px 0 -2px rgba(255, 180, 67, 0.72);
  filter: drop-shadow(0 0 8px rgba(77, 242, 255, 0.42));
}

.mobile-action-button[data-mobile-icon="shield"]::before {
  width: 34px;
  height: 38px;
  clip-path: polygon(50% 0, 88% 12%, 84% 60%, 50% 100%, 16% 60%, 12% 12%);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.9) 0 7%, transparent 8%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.76) 0 14%, transparent 15%),
    linear-gradient(180deg, rgba(101, 240, 255, 0.95), rgba(65, 116, 255, 0.88) 50%, rgba(24, 38, 124, 0.95));
  box-shadow:
    inset 0 0 0 3px rgba(247, 242, 232, 0.92),
    inset 0 -8px 12px rgba(0, 0, 0, 0.28),
    0 0 14px rgba(77, 242, 255, 0.5);
  filter: drop-shadow(0 0 8px rgba(77, 242, 255, 0.48));
}

.mobile-action-button[data-mobile-icon="dash"]::before {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(77, 242, 255, 0.18), transparent 62%),
    url("web-games/zippa-silk-circuit/assets/zippa-dash.png") center / 122% 122% no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(77, 242, 255, 0.22),
    0 0 14px rgba(77, 242, 255, 0.25);
  filter:
    drop-shadow(0 0 10px rgba(77, 242, 255, 0.52))
    drop-shadow(0 0 14px rgba(255, 76, 168, 0.28));
}

.mobile-action-button[data-mobile-icon="detonate"]::before {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: url("assets/zippa-detonate-icon.png?v=1") center / contain no-repeat;
  filter:
    drop-shadow(0 0 10px rgba(77, 242, 255, 0.5))
    drop-shadow(0 0 14px rgba(255, 76, 168, 0.34));
}

.mobile-action-button[data-mobile-icon="detonate"]::after {
  content: none;
}

.mobile-action-button[data-mobile-action="cycleDensity"]::after {
  content: attr(data-step);
  position: absolute;
  right: 6px;
  top: 5px;
  min-width: 12px;
  color: var(--amber);
  font-size: 8px;
}

.mobile-pad-button.is-active,
.mobile-action-button.is-active {
  border-color: rgba(255, 180, 67, 0.72);
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(255, 180, 67, 0.38), rgba(255, 76, 168, 0.18)),
    rgba(10, 8, 12, 0.86);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.26),
    0 0 28px rgba(255, 180, 67, 0.28),
    0 10px 24px rgba(0, 0, 0, 0.3);
  transform: translateY(1px) scale(0.98);
}

.player-stage {
  align-self: center;
  justify-self: center;
  width: min(760px, 100%);
  min-height: 420px;
  display: grid;
  place-items: center;
  gap: 18px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(4, 5, 8, 0.76);
  box-shadow:
    inset 0 0 60px rgba(77, 242, 255, 0.06),
    0 32px 80px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(18px);
}

.launch-disc {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.88) 0 13%, rgba(255, 255, 255, 0.95) 14% 16%, rgba(0, 0, 0, 0.18) 17% 21%, transparent 22%),
    conic-gradient(from 20deg, #55f1ff, #ff4ca8, #ffb443, #f7f2e8, #7cffe4, #55f1ff);
  box-shadow:
    inset 0 0 45px rgba(0, 0, 0, 0.36),
    0 0 60px rgba(77, 242, 255, 0.18),
    0 0 90px rgba(255, 76, 168, 0.12);
  animation: discTurn 5s linear infinite;
}

.launch-disc span {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.46), transparent 18%);
  mix-blend-mode: screen;
}

@keyframes discTurn {
  to {
    transform: rotate(1turn);
  }
}

.launch-copy {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.launch-status {
  min-height: 24px;
  margin: 0;
  color: #fdf8ed;
  font-family: var(--font-pixel);
  font-size: 11px;
  line-height: 1.8;
  text-align: center;
  text-transform: uppercase;
}

.file-fallback {
  color: var(--cyan);
  font-size: 13px;
  text-transform: uppercase;
}

.launch-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 25;
  max-width: min(360px, calc(100vw - 32px));
  padding: 13px 16px;
  border: 1px solid rgba(255, 180, 67, 0.42);
  border-radius: 6px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)),
    rgba(9, 10, 14, 0.92);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    0 16px 38px rgba(0, 0, 0, 0.42),
    0 0 26px rgba(255, 180, 67, 0.16);
  font-family: var(--font-pixel);
  font-size: 11px;
  line-height: 1.55;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.launch-toast[hidden] {
  display: none;
}

.donation-slot {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: min(100%, 840px);
  padding: 14px 16px;
  border: 1px solid rgba(255, 180, 67, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 180, 67, 0.14), rgba(77, 242, 255, 0.08)),
    rgba(5, 6, 9, 0.72);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.14),
    0 16px 42px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.donation-slot::before {
  content: "TLG-CREDIT";
  position: absolute;
  right: 14px;
  bottom: 6px;
  color: rgba(247, 242, 232, 0.2);
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0;
}

.coin-return {
  display: grid;
  place-items: center;
  width: 74px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
    rgba(2, 3, 8, 0.88);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.54);
}

.coin-return span {
  display: block;
  width: 52px;
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.84), rgba(255, 255, 255, 0.08)),
    #06070a;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.76),
    0 0 12px rgba(255, 180, 67, 0.18);
}

.donation-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.donation-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1;
  text-transform: uppercase;
}

.donation-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.donate-button,
.donation-checkout {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(255, 180, 67, 0.62);
  border-radius: 6px;
  color: #fff8e6;
  background:
    linear-gradient(180deg, rgba(255, 180, 67, 0.34), rgba(255, 76, 168, 0.14)),
    rgba(22, 13, 8, 0.92);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    0 0 24px rgba(255, 180, 67, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.32);
  font-family: var(--font-pixel);
  font-size: clamp(8px, 1.1vw, 11px);
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: normal;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.donate-button:hover,
.donate-button:focus-visible,
.donation-checkout:hover,
.donation-checkout:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(77, 242, 255, 0.74);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.2),
    0 0 28px rgba(77, 242, 255, 0.22),
    0 14px 30px rgba(0, 0, 0, 0.38);
  outline: none;
}

.coin-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.9) 0 10%, transparent 11%),
    radial-gradient(circle, rgba(0, 0, 0, 0.34) 0 18%, transparent 19%),
    conic-gradient(from 18deg, #ffb443, #f7f2e8, #cf7d24, #ffdb74, #ffb443);
  box-shadow:
    inset 0 0 0 1px rgba(50, 25, 4, 0.48),
    0 0 12px rgba(255, 180, 67, 0.36);
}

.donation-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 180, 67, 0.18), transparent 32%),
    rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(12px);
}

.recovery-message-modal {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100dvh;
  z-index: 46;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background: rgba(0, 2, 4, 0.78);
  backdrop-filter: blur(12px) saturate(0.9);
}

.recovery-message-modal[hidden] {
  display: none;
}

.recovery-message-panel {
  position: relative;
  box-sizing: border-box;
  width: min(620px, calc(100vw - 48px));
  max-width: 100%;
  min-width: 0;
  max-height: min(720px, calc(100dvh - 32px));
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: 30px 34px 34px;
  border: 1px solid rgba(77, 242, 255, 0.72);
  border-radius: 6px;
  color: #dfffe0;
  background:
    repeating-linear-gradient(180deg, rgba(155, 255, 117, 0.035) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, rgba(8, 26, 25, 0.98), rgba(4, 9, 14, 0.99));
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.5),
    inset 0 0 38px rgba(77, 242, 255, 0.08),
    0 0 0 1px rgba(255, 76, 168, 0.28),
    0 24px 80px rgba(0, 0, 0, 0.72),
    0 0 42px rgba(77, 242, 255, 0.18);
  font-family: var(--font-pixel);
}

.recovery-message-panel::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(155, 255, 117, 0.13);
  border-radius: 3px;
}

.recovery-terminal-status {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 24px;
  margin: 0 42px 24px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(77, 242, 255, 0.26);
  color: rgba(155, 255, 117, 0.74);
  font: 700 11px/1 var(--font-pixel);
}

.recovery-terminal-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: terminal-cursor 1.2s steps(1, end) infinite;
}

.recovery-message-panel .kicker {
  margin: 0 0 10px;
  color: var(--cyan);
  font-family: var(--font-pixel);
  letter-spacing: 0;
}

.recovery-message-panel h2 {
  margin: 0 46px 22px 0;
  color: #ffffff;
  font: 900 clamp(25px, 5vw, 42px)/1.08 var(--font-display);
  letter-spacing: 0;
  text-shadow: 2px 2px 0 rgba(255, 76, 168, 0.55), 0 0 15px rgba(77, 242, 255, 0.2);
}

.recovery-message-copy {
  position: relative;
  padding: 20px;
  border-left: 3px solid var(--green);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 18px rgba(155, 255, 117, 0.035);
}

.recovery-message-copy p {
  margin: 0 0 16px;
  color: #e2f9e2;
  font: 700 clamp(15px, 2.3vw, 18px)/1.6 var(--font-pixel);
  letter-spacing: 0;
}

.recovery-message-copy p:last-child {
  margin-bottom: 0;
}

.recovery-message-signature {
  padding-top: 6px;
  color: var(--cyan) !important;
}

body.is-message-open {
  overflow: hidden;
}

.recovery-email-form {
  position: relative;
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(77, 242, 255, 0.42);
  border-radius: 5px;
  background:
    repeating-linear-gradient(180deg, rgba(77, 242, 255, 0.025) 0 1px, transparent 1px 4px),
    rgba(0, 5, 9, 0.74);
  box-shadow: inset 0 0 18px rgba(77, 242, 255, 0.045);
}

.recovery-email-heading {
  display: grid;
  gap: 6px;
}

.recovery-email-heading > span {
  color: var(--cyan);
  font: 900 11px/1.2 var(--font-pixel);
}

.recovery-email-heading p {
  margin: 0;
  color: rgba(226, 249, 226, 0.82);
  font: 700 12px/1.45 var(--font-pixel);
}

.recovery-email-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.recovery-email-entry input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(155, 255, 117, 0.48);
  border-radius: 4px;
  color: #eaffea;
  background: rgba(0, 10, 8, 0.9);
  font: 700 16px/1 var(--font-pixel);
  letter-spacing: 0;
  outline: none;
}

.recovery-email-entry input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(155, 255, 117, 0.12), 0 0 14px rgba(155, 255, 117, 0.12);
}

.recovery-email-entry button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(77, 242, 255, 0.72);
  border-radius: 4px;
  color: #03100d;
  background: var(--cyan);
  font: 900 10px/1.2 var(--font-pixel);
  text-transform: uppercase;
}

.recovery-email-entry button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.recovery-email-consent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  color: rgba(226, 249, 226, 0.76);
  font: 700 10px/1.45 var(--font-pixel);
}

.recovery-email-consent input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--green);
}

.recovery-email-status {
  min-height: 15px;
  margin: 0;
  color: var(--cyan);
  font: 700 10px/1.5 var(--font-pixel);
}

.recovery-email-status.is-error {
  color: #ff8b8b;
}

.recovery-email-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.recovery-poll-form {
  position: relative;
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.recovery-poll-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.recovery-poll-grid label {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 54px;
  cursor: pointer;
}

.recovery-poll-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.recovery-poll-grid span {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 8px 7px;
  border: 1px solid rgba(77, 242, 255, 0.34);
  border-radius: 4px;
  color: rgba(226, 249, 226, 0.84);
  background:
    repeating-linear-gradient(180deg, rgba(77, 242, 255, 0.025) 0 1px, transparent 1px 4px),
    rgba(0, 7, 10, 0.82);
  font: 800 10px/1.35 var(--font-pixel);
  text-align: center;
  overflow-wrap: anywhere;
}

.recovery-poll-grid input:focus-visible + span {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.recovery-poll-grid input:checked + span {
  border-color: var(--green);
  color: #061009;
  background: var(--green);
  box-shadow: 0 0 16px rgba(155, 255, 117, 0.28);
}

.recovery-poll-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  align-items: center;
  justify-content: start;
  gap: 12px;
}

.recovery-poll-actions button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(77, 242, 255, 0.78);
  border-radius: 4px;
  color: #03100d;
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(77, 242, 255, 0.18);
  font: 900 10px/1.2 var(--font-pixel);
  text-transform: uppercase;
}

.recovery-poll-actions button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.recovery-poll-status {
  grid-column: 1 / -1;
  min-height: 16px;
  margin: 0;
  color: var(--cyan);
  font: 700 10px/1.45 var(--font-pixel);
}

.recovery-poll-actions .recovery-coin-button {
  min-height: 44px;
  margin: 0;
  color: rgba(255, 236, 174, 0.9);
  border-color: rgba(255, 207, 80, 0.58);
  background: rgba(31, 24, 8, 0.62);
  box-shadow:
    inset 0 0 12px rgba(255, 198, 54, 0.08),
    0 0 16px rgba(255, 198, 54, 0.08);
}

.recovery-poll-actions .recovery-coin-button:hover,
.recovery-poll-actions .recovery-coin-button:focus-visible {
  color: #fff1bd;
  border-color: rgba(255, 220, 112, 0.82);
  background: rgba(55, 39, 7, 0.72);
}

.recovery-poll-status.is-error {
  color: #ff8b8b;
}

.recovery-message-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 93, 93, 0.68);
  border-radius: 4px;
  color: #fff;
  background: rgba(90, 12, 18, 0.76);
  box-shadow: inset 0 0 10px rgba(255, 93, 93, 0.12);
  font: 900 25px/1 var(--font-pixel);
}

.recovery-message-close:hover,
.recovery-message-close:focus-visible {
  border-color: var(--red);
  background: rgba(145, 18, 28, 0.9);
  box-shadow: 0 0 16px rgba(255, 93, 93, 0.3);
  outline: none;
}

.donation-modal[hidden] {
  display: none;
}

.donation-panel {
  position: relative;
  width: min(440px, calc(100vw - 56px));
  max-height: calc(100svh - 36px);
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(255, 180, 67, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(6, 7, 10, 0.96);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.16),
    0 26px 70px rgba(0, 0, 0, 0.62),
    0 0 38px rgba(255, 180, 67, 0.14);
}

.donation-panel h2 {
  margin: 0 36px 10px 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 7vw, 36px);
  line-height: 1;
  text-transform: uppercase;
}

.donation-panel p {
  color: var(--muted);
  line-height: 1.55;
}

.donation-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.07);
  font-size: 24px;
  line-height: 1;
}

.donation-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 18px 0;
}

.donation-amounts button {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--font-pixel);
}

.donation-amounts button.is-selected,
.donation-amounts button:hover,
.donation-amounts button:focus-visible {
  border-color: rgba(255, 180, 67, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 180, 67, 0.24), rgba(255, 76, 168, 0.1)),
    rgba(255, 255, 255, 0.08);
  outline: none;
}

.donation-custom {
  display: grid;
  gap: 7px;
  margin: 0 0 14px;
  color: rgba(247, 242, 232, 0.78);
  font-family: var(--font-pixel);
  font-size: 10px;
  text-transform: uppercase;
}

.donation-custom input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(2, 3, 8, 0.84);
  font: 700 16px var(--font-pixel);
  outline: none;
}

.donation-custom input:focus {
  border-color: rgba(77, 242, 255, 0.74);
  box-shadow: 0 0 0 2px rgba(77, 242, 255, 0.14);
}

.donation-checkout {
  width: 100%;
  margin-bottom: 10px;
}

.donation-checkout[data-ready="false"] {
  opacity: 0.72;
}

.paypal-button-container {
  min-height: 46px;
  margin-top: 10px;
}

.paypal-button-container[data-state="loading"],
.paypal-button-container[data-state="missing"] {
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 10px;
  border: 1px dashed rgba(255, 180, 67, 0.42);
  border-radius: 6px;
  color: rgba(255, 180, 67, 0.86);
  background: rgba(255, 180, 67, 0.07);
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.paypal-button-container[data-state="loading"]::before {
  content: "Warming payment terminal...";
}

.purchase-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  margin-left: 8px;
  padding: 0 11px;
  border: 1px solid rgba(104, 246, 175, 0.65);
  border-radius: 4px;
  color: #d9ffe9;
  background: rgba(4, 28, 20, 0.88);
  box-shadow: inset 0 0 12px rgba(44, 255, 150, 0.1);
  font: 700 9px/1 var(--font-pixel);
  letter-spacing: 0;
  text-transform: uppercase;
  pointer-events: auto;
}

.purchase-open[hidden] {
  display: none;
}

.purchase-open:hover,
.purchase-open:focus-visible {
  border-color: #73ffba;
  color: #fff;
  background: rgba(7, 48, 34, 0.96);
}

.purchase-open-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
}

.purchase-modal {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: rgba(0, 3, 5, 0.88);
  backdrop-filter: blur(8px);
}

.purchase-modal[hidden] {
  display: none;
}

.purchase-panel {
  position: relative;
  width: min(100%, 700px);
  max-height: min(92vh, 760px);
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(77, 242, 255, 0.55);
  border-radius: 6px;
  color: #e9fbff;
  background:
    repeating-linear-gradient(0deg, rgba(90, 255, 190, 0.025) 0 1px, transparent 1px 4px),
    #071015;
  box-shadow:
    inset 0 0 40px rgba(25, 255, 169, 0.04),
    0 24px 70px rgba(0, 0, 0, 0.66);
  font-family: var(--font-pixel);
}

.purchase-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 4px;
  color: #fff;
  background: #101c22;
  font: 700 24px/1 Arial, sans-serif;
}

.purchase-terminal-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 46px;
  color: #70ffb8;
  font-size: 8px;
}

.purchase-terminal-status i {
  flex: 1;
  height: 1px;
  background: rgba(112, 255, 184, 0.4);
}

.purchase-panel h2 {
  margin: 8px 0;
  color: #fff;
  font: 900 clamp(22px, 4vw, 34px)/1.1 var(--font-display);
  letter-spacing: 0;
}

.purchase-copy {
  margin: 0 0 16px;
  color: rgba(233, 251, 255, 0.72);
  font-size: 10px;
  line-height: 1.6;
}

.purchase-customer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.purchase-customer label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: rgba(233, 251, 255, 0.72);
  font-size: 8px;
}

.purchase-customer input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(77, 242, 255, 0.34);
  border-radius: 4px;
  color: #fff;
  background: rgba(4, 14, 19, 0.92);
  font: 700 14px/1.2 var(--font-pixel);
  outline: none;
}

.purchase-customer input:focus {
  border-color: #70ffb8;
  box-shadow: 0 0 0 2px rgba(112, 255, 184, 0.12);
}

.purchase-customer input:invalid:not(:placeholder-shown) {
  border-color: rgba(255, 131, 158, 0.78);
}

.purchase-platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.purchase-platforms > div {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 10px;
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(77, 242, 255, 0.34);
  border-radius: 5px;
  color: #e9fbff;
  background: rgba(10, 28, 36, 0.9);
  text-align: left;
}

.purchase-platforms > div.is-ready {
  border-color: #70ffb8;
  box-shadow: inset 0 0 18px rgba(112, 255, 184, 0.12);
}

.purchase-platforms > div:not(.is-ready) {
  opacity: 0.52;
}

.platform-mark {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: #70ffb8;
  font-size: 8px;
}

.purchase-platforms strong {
  font-size: 11px;
}

.purchase-platforms small {
  color: rgba(233, 251, 255, 0.56);
  font-size: 8px;
}

.purchase-price-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 14px 0 10px;
  padding: 11px 0;
  border-top: 1px solid rgba(77, 242, 255, 0.18);
  border-bottom: 1px solid rgba(77, 242, 255, 0.18);
  color: rgba(233, 251, 255, 0.7);
  font-size: 10px;
}

.purchase-price-row strong {
  color: #70ffb8;
  font-size: 12px;
}

.purchase-methods {
  display: grid;
  gap: 8px;
}

.purchase-method {
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) minmax(180px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 9px;
}

.purchase-provider-slot {
  min-height: 34px;
}

.purchase-provider-slot[data-state="disabled"],
.purchase-provider-slot[data-state="unavailable"],
.purchase-provider-slot[data-state="loading"] {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  color: rgba(233, 251, 255, 0.48);
  font-size: 8px;
}

.purchase-provider-slot[data-state="disabled"]::before {
  content: "Complete receipt details";
}

.purchase-provider-slot[data-state="loading"]:empty::before {
  content: "Connecting...";
}

.purchase-status {
  min-height: 18px;
  margin: 12px 0 0;
  color: #ffd978;
  font-size: 9px;
  line-height: 1.5;
}

.purchase-status[data-state="success"] {
  color: #70ffb8;
}

.purchase-status[data-state="error"] {
  color: #ff839e;
}

.purchase-download {
  display: grid;
  place-items: center;
  min-height: 44px;
  margin-top: 10px;
  border: 1px solid #70ffb8;
  border-radius: 4px;
  color: #06130d;
  background: #70ffb8;
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}

.purchase-downloads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.purchase-downloads[hidden] {
  display: none;
}

.purchase-download[hidden] {
  display: none;
}

body.is-purchase-open {
  overflow: hidden;
}

.donation-note {
  margin: 12px 0 0;
  color: rgba(255, 180, 67, 0.84);
  font-family: var(--font-pixel);
  font-size: 10px;
  text-transform: uppercase;
}

.site-footer {
  display: grid;
  align-items: center;
  justify-items: center;
  justify-content: center;
  gap: 14px;
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 20px 0 32px;
  color: rgba(247, 242, 232, 0.62);
  font-size: 12px;
  text-transform: uppercase;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.footer-links a {
  min-height: 34px;
  padding: 9px 14px;
  border: 1px solid rgba(77, 242, 255, 0.28);
  border-radius: 5px;
  color: rgba(77, 242, 255, 0.84);
  background: rgba(6, 9, 13, 0.62);
  font-family: var(--font-pixel);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: #fff;
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(77, 242, 255, 0.2);
  outline: 0;
}

.footer-logo {
  display: block;
  width: clamp(128px, 17vw, 230px);
  height: auto;
  opacity: 0.82;
  filter: drop-shadow(0 0 14px rgba(77, 242, 255, 0.16));
}

@media (hover: none), (pointer: coarse) {
  .play-overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background: rgba(255, 255, 255, 0.2);
  }

  .mobile-controls.is-visible {
    display: grid;
    grid-template-columns: minmax(148px, 1fr) minmax(142px, 0.92fr);
    align-items: center;
    gap: clamp(14px, 5vw, 32px);
    max-width: 620px;
    margin: 0 auto;
  }

  body[data-active-game="bubblebat"] .mobile-controls.is-visible {
    --bubblebat-button-size: clamp(58px, 15vw, 72px);
    width: min(100%, 330px);
    max-width: 94vw;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-content: center;
    justify-items: center;
    gap: 9px;
    padding-inline: 0;
  }

  body[data-active-game="bubblebat"] .mobile-control-pad {
    width: min(100%, calc((var(--bubblebat-button-size) * 3) + 28px));
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: repeat(3, var(--bubblebat-button-size));
    grid-template-rows: var(--bubblebat-button-size);
    gap: clamp(8px, 2.4vw, 14px);
    justify-self: center;
    align-items: center;
  }

  body[data-active-game="bubblebat"] .mobile-pad-up {
    grid-column: 2;
  }

  body[data-active-game="bubblebat"] .mobile-pad-down {
    grid-column: 2;
    grid-row: 1;
  }

  body[data-active-game="bubblebat"] .mobile-pad-down::before {
    content: none;
  }

  body[data-active-game="bubblebat"] .mobile-pad-down span {
    pointer-events: none;
    font-family: var(--font-pixel);
    font-size: clamp(8px, 2.3vw, 10px);
    line-height: 1;
    text-transform: uppercase;
    color: rgba(247, 242, 232, 0.96);
    text-shadow: 0 0 8px rgba(77, 242, 255, 0.5);
  }

  body[data-active-game="bubblebat"] .mobile-pad-down.is-active {
    transform: translateY(1px) scale(0.98);
  }

  body[data-active-game="bubblebat"] .mobile-pad-left {
    grid-column: 1;
    grid-row: 1;
  }

  body[data-active-game="bubblebat"] .mobile-pad-left.is-active {
    transform: translateY(1px) scale(0.98);
  }

  body[data-active-game="bubblebat"] .mobile-pad-right {
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
  }

  body[data-active-game="bubblebat"] .mobile-pad-right.is-active {
    transform: translateY(1px) scale(0.98);
  }

  body[data-active-game="bubblebat"] .mobile-action-bank {
    grid-column: 1;
    grid-row: 2;
    width: min(190px, 54vw);
    grid-template-columns: repeat(2, minmax(58px, 1fr));
    gap: 7px;
    justify-self: center;
    align-self: center;
  }

  body[data-active-game="bubblebat"] .mobile-action-button {
    min-height: var(--bubblebat-button-size);
    border-radius: 999px;
  }

  body[data-active-game="plash"] .mobile-controls.is-visible {
    grid-template-columns: 1fr;
    max-width: min(520px, 92vw);
  }

  body[data-active-game="plash"] .mobile-control-pad {
    display: none;
  }

  body[data-active-game="plash"] .mobile-action-bank {
    justify-self: center;
    width: min(100%, 460px);
    grid-template-columns: repeat(5, minmax(54px, 1fr));
  }

  body[data-active-game="uski"] .embedded-game-view {
    grid-template-rows: auto 1fr;
    gap: 10px;
    overflow-y: auto;
  }

  body[data-active-game="uski"] .embedded-topline {
    position: static;
    pointer-events: auto;
  }

  body[data-active-game="uski"] .embedded-stage {
    max-height: none;
  }

  body[data-active-game="uski"] .embedded-canvas.is-portrait-canvas {
    width: auto;
    max-width: 100%;
    height: min(52svh, 520px);
  }

  body[data-active-game="snakenspace"] .embedded-controls {
    display: none;
  }

  body[data-active-game="snakenspace"] .mobile-controls.is-visible {
    grid-template-columns: 1fr;
    max-width: 240px;
  }

  body[data-active-game="snakenspace"] .mobile-control-pad {
    justify-self: center;
  }

  body[data-active-game="snakenspace"] .embedded-game-view {
    padding: 10px 12px 12px;
    overflow: hidden;
  }

  body[data-active-game="snakenspace"] .embedded-stage {
    width: min(100%, 700px);
    max-height: calc(100svh - 112px);
    padding: 8px;
  }

  body[data-active-game="snakenspace"] .embedded-frame.is-square-frame {
    width: min(100%, 640px, calc(100svh - 178px));
  }

  body[data-active-game="sticker-hex"] .embedded-controls {
    display: none;
  }

  body[data-active-game="zippa"] .embedded-controls {
    display: none;
  }

  body[data-active-game="zippa"].is-player-open {
    background: #020308;
    overflow: hidden;
  }

  body[data-active-game="zippa"] .mobile-controls.is-visible {
    grid-template-columns: 1fr;
    max-width: min(300px, 82vw);
  }

  body[data-active-game="zippa"] .mobile-action-bank {
    grid-template-columns: repeat(2, minmax(72px, 1fr));
    justify-self: center;
    width: min(270px, 82vw);
  }

  body[data-active-game="zippa"] .mobile-action-button {
    min-height: 54px;
  }

  body[data-active-game="zippa"] .mobile-action-button[data-mobile-icon] {
    border-radius: 999px;
  }

  body[data-active-game="sticker-hex"] .mobile-controls.is-visible {
    grid-template-columns: 1fr;
    max-width: min(280px, 82vw);
  }

  body[data-active-game="sticker-hex"] .mobile-action-bank {
    width: min(240px, 76vw);
    grid-template-columns: 1fr;
    justify-self: center;
  }

  body[data-active-game="sticker-hex"] .mobile-action-button {
    min-height: 62px;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    align-items: center;
    justify-items: start;
    text-align: left;
  }

  body[data-active-game="sticker-hex"] .mobile-action-button[data-mobile-icon="shield"]::before {
    justify-self: center;
  }

  body[data-active-game="sticker-hex"] .mobile-action-button[data-mobile-icon] span {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  body[data-active-game="sticker-hex"].is-player-open {
    background: #020308;
    overflow: hidden;
  }

  body[data-active-game="sticker-hex"] .embedded-game-view {
    grid-template-rows: 1fr;
    gap: 0;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    overflow: hidden;
    align-content: center;
    background:
      radial-gradient(circle at 18% 16%, rgba(77, 242, 255, 0.14), transparent 28%),
      radial-gradient(circle at 82% 84%, rgba(245, 76, 62, 0.14), transparent 30%),
      #03050a;
  }

  body[data-active-game="sticker-hex"] .embedded-topline {
    position: absolute;
    z-index: 4;
    top: max(6px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    left: max(12px, env(safe-area-inset-left));
    align-items: flex-start;
    pointer-events: none;
  }

  body[data-active-game="sticker-hex"] .exit-home {
    pointer-events: auto;
    min-height: 32px;
    padding-inline: 12px;
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(2, 3, 8, 0.78);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(12px);
  }

  body[data-active-game="sticker-hex"] .now-playing {
    pointer-events: none;
    max-width: min(18vw, 112px);
    justify-items: end;
  }

  body[data-active-game="sticker-hex"] .embedded-game-logo {
    width: min(18vw, 112px);
    max-height: 42px;
    object-position: right top;
  }

  body[data-active-game="sticker-hex"] .embedded-stage {
    align-self: center;
    justify-self: center;
    width: min(calc(100svw - 16px), 177.78svh);
    height: auto;
    aspect-ratio: 16 / 9;
    max-width: none;
    max-height: calc(100svh - 16px);
    gap: 0;
    padding: 34px 6px 6px;
    border: 2px solid rgba(247, 242, 232, 0.64);
    border-radius: 8px;
    background: rgba(2, 3, 8, 0.94);
  }

  body[data-active-game="sticker-hex"] .embedded-frame {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 4px;
  }

  body[data-active-game="match-race"] .embedded-controls {
    display: none;
  }

  body[data-active-game="match-race"].is-player-open {
    background: #020308;
    overflow: hidden;
  }

  body[data-active-game="match-race"] .embedded-game-view,
  body[data-active-game="sticker-hex"] .embedded-game-view {
    grid-template-rows: 1fr;
    gap: 0;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    overflow: hidden;
    align-content: center;
    background:
      radial-gradient(circle at 16% 14%, rgba(77, 242, 255, 0.18), transparent 26%),
      radial-gradient(circle at 84% 84%, rgba(245, 76, 62, 0.18), transparent 30%),
      #03050a;
  }

  body[data-active-game="match-race"] .embedded-topline {
    position: absolute;
    z-index: 4;
    top: max(6px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    left: max(12px, env(safe-area-inset-left));
    align-items: flex-start;
    pointer-events: none;
  }

  body[data-active-game="match-race"] .exit-home {
    pointer-events: auto;
    min-height: 32px;
    padding-inline: 12px;
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(2, 3, 8, 0.78);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(12px);
  }

  body[data-active-game="match-race"] .now-playing {
    pointer-events: none;
    max-width: min(16vw, 86px);
    justify-items: end;
  }

  body[data-active-game="match-race"] .embedded-game-logo {
    width: min(16vw, 86px);
    max-height: 28px;
    object-position: right top;
    filter:
      drop-shadow(0 5px 10px rgba(0, 0, 0, 0.8))
      drop-shadow(0 0 12px rgba(77, 242, 255, 0.22));
  }

  body[data-active-game="match-race"] .embedded-stage,
  body[data-active-game="sticker-hex"] .embedded-stage {
    align-self: center;
    justify-self: center;
    width: min(calc(100svw - 16px), 177.78svh);
    height: auto;
    aspect-ratio: 16 / 9;
    max-width: none;
    max-height: calc(100svh - 16px);
    gap: 0;
    padding: 34px 6px 6px;
    border: 2px solid rgba(247, 242, 232, 0.78);
    border-radius: 8px;
    background:
      linear-gradient(135deg, rgba(77, 242, 255, 0.24), rgba(245, 76, 62, 0.18)),
      rgba(2, 3, 8, 0.94);
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, 0.82),
      0 0 0 1px rgba(77, 242, 255, 0.18),
      0 18px 48px rgba(0, 0, 0, 0.62);
  }

  body[data-active-game="match-race"] .embedded-frame,
  body[data-active-game="sticker-hex"] .embedded-frame {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 4px;
  }

  body[data-active-game="sticker-hex"] .embedded-stage {
    position: relative;
  }

  body[data-active-game="sticker-hex"] .embedded-frame {
    position: absolute;
    inset: 34px auto auto 6px;
    width: calc(100% - 12px);
    height: calc(100% - 40px);
  }
}

@media (max-width: 1080px) {
  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-grid.layout-display {
    width: 100%;
  }

  .game-grid.layout-rack {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .three-background,
  .background-plate,
  .scanline {
    right: auto;
    width: 100dvw;
    max-width: 100dvw;
  }

  .topbar {
    align-items: flex-start;
    padding: 12px 16px;
  }

  .brand-copy strong {
    font-size: 16px;
  }

  .brand-copy span {
    display: none;
  }

  .brand-device {
    width: 48px;
    height: 38px;
  }

  .brand-code {
    display: none;
  }

  .transport {
    gap: 6px;
    padding: 6px;
  }

  .transport-button {
    width: 36px;
    height: 34px;
  }

  .message-trigger {
    width: 36px;
    height: 34px;
  }

  .message-terminal-icon {
    transform: scale(0.88);
  }

  .language-menu {
    grid-template-columns: repeat(5, 30px);
    gap: 5px;
    right: -4px;
  }

  .language-menu button {
    width: 30px;
    height: 28px;
    font-size: 17px;
  }

  .case-flip-button {
    width: 36px;
    height: 34px;
  }

  .case-flip-button-image {
    width: 20px;
    height: 20px;
  }

  .recovery-message-modal {
    inset: auto;
    top: var(--recovery-vv-top, 0px);
    left: var(--recovery-vv-left, 0px);
    width: min(var(--recovery-vv-width, 100dvw), 100dvw);
    height: min(var(--recovery-vv-height, 100dvh), 100dvh);
    place-items: center;
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  .recovery-message-panel {
    align-self: center;
    justify-self: center;
    width: min(calc(100% - 2px), 560px);
    max-width: 100%;
    max-height: calc(100% - 2px);
    margin: 0;
    padding: 14px 12px 18px;
    scrollbar-gutter: stable;
  }

  .recovery-terminal-status {
    margin-bottom: 18px;
  }

  .recovery-message-panel h2 {
    margin-right: 34px;
    margin-bottom: 16px;
    font-size: 24px;
  }

  .recovery-message-copy {
    padding: 13px;
  }

  .recovery-message-copy p {
    margin-bottom: 11px;
    font-size: 13px;
    line-height: 1.45;
  }

  .recovery-message-close {
    position: sticky;
    z-index: 10;
    top: 2px;
    width: 44px;
    height: 44px;
    margin: 0 0 -44px auto;
    border-width: 2px;
    background: #6d0d16;
    box-shadow:
      inset 0 0 10px rgba(255, 93, 93, 0.2),
      0 0 0 3px rgba(0, 0, 0, 0.75),
      0 0 18px rgba(255, 93, 93, 0.32);
    touch-action: manipulation;
  }

  .recovery-poll-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .recovery-poll-grid label {
    min-height: 48px;
  }

  .recovery-poll-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .recovery-poll-actions button {
    width: 100%;
  }

  .recovery-email-form {
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
  }

  .recovery-email-entry {
    grid-template-columns: 1fr;
  }

  .recovery-email-entry button {
    width: 100%;
  }

  .page-shell {
    width: calc(100dvw - 20px);
    max-width: calc(100dvw - 20px);
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 14px;
  }

  .hero {
    min-height: 178px;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 22px 0 26px;
  }

  .hero-logo-title {
    width: calc(100% - 12px);
  }

  h1 {
    font-size: 46px;
  }

  .hero-line {
    font-size: 16px;
  }

  .deck-meter {
    display: none;
  }

  .section-heading {
    display: block;
  }

  .section-heading h2 {
    font-size: 28px;
  }

  .game-grid {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 1fr;
  }

  .game-grid.layout-display,
  .game-grid.layout-rack {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .game-grid.layout-rack .game-card-front {
    display: block;
  }

  .game-card {
    padding-right: 10px;
  }

  .game-card-back {
    padding: 7px;
  }

  .play-overlay {
    width: 64px;
    height: 64px;
  }

  .play-triangle {
    left: 26px;
    top: 20px;
    border-top-width: 12px;
    border-bottom-width: 12px;
    border-left-width: 18px;
  }

  .embedded-game-view,
  .player-view {
    gap: 10px;
    padding: 10px 12px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    overflow-y: auto;
    align-content: start;
  }

  .embedded-topline,
  .player-topline {
    align-items: flex-start;
    gap: 10px;
  }

  .exit-home,
  .retro-button {
    min-height: 40px;
    padding: 0 11px;
    font-size: 11px;
  }

  .now-playing h2 {
    font-size: 28px;
  }

  .now-playing {
    max-width: 42vw;
  }

  .embedded-game-logo {
    width: clamp(118px, 36vw, 190px);
    max-height: 92px;
  }

  .embedded-stage {
    align-self: start;
    width: 100%;
    gap: 8px;
    padding: 8px;
  }

  body[data-active-game="match-race"] .embedded-game-view,
  body[data-active-game="sticker-hex"] .embedded-game-view {
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: max(4px, env(safe-area-inset-right));
    padding-left: max(4px, env(safe-area-inset-left));
  }

  body[data-active-game="match-race"] .embedded-stage,
  body[data-active-game="sticker-hex"] .embedded-stage {
    position: relative;
    left: auto;
    width: min(calc(100svw - 16px), 177.78svh);
    max-width: none;
    max-height: calc(100svh - 16px);
    aspect-ratio: 16 / 9;
    justify-self: center;
    gap: 0;
    padding: 34px 6px 6px;
    transform: none;
  }

  .embedded-canvas,
  .embedded-frame {
    max-height: calc(100svh - 286px);
    object-fit: contain;
  }

  .embedded-frame {
    height: auto;
  }

  .embedded-frame.is-square-frame {
    width: min(100%, 640px, calc(100svh - 260px));
    height: auto;
    max-height: none;
  }

  /* mirrors the is-square-frame override above: without it the portrait frame
     reverts to 16/9 here and overflows the viewport */
  .embedded-frame.is-portrait-frame {
    width: min(100%, 460px, calc((100svh - 260px) * 0.7547));
    height: auto;
    max-height: none;
  }

  #ichiba-frame.embedded-frame {
    width: min(100%, 470px, calc((100svh - 260px) * 0.7785));
    height: auto;
    max-height: none;
  }

  body[data-active-game="match-race"] .embedded-frame {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: none;
  }

  .embedded-canvas.is-paper-canvas {
    max-height: calc(100svh - 286px);
  }

  .embedded-canvas.is-portrait-canvas {
    width: auto;
    max-width: 100%;
    height: min(48svh, 520px);
  }

  body[data-active-game="uski"] .embedded-game-view {
    grid-template-rows: auto 1fr;
    gap: 10px;
    padding: 10px 12px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    overflow-y: auto;
  }

  body[data-active-game="uski"] .embedded-topline {
    position: static;
    pointer-events: auto;
  }

  body[data-active-game="uski"] .now-playing {
    max-width: 42vw;
  }

  body[data-active-game="uski"] .embedded-game-logo {
    width: clamp(118px, 36vw, 190px);
    max-height: 92px;
  }

  body[data-active-game="uski"] .embedded-stage {
    width: 100%;
    max-height: none;
    padding: 8px;
  }

  body[data-active-game="uski"] .embedded-canvas.is-portrait-canvas {
    width: auto;
    max-width: 100%;
    height: min(48svh, 520px);
  }

  .embedded-controls {
    gap: 5px;
  }

  .embedded-controls span {
    padding: 4px 6px;
    font-size: 8px;
  }

  .mobile-control-pad {
    grid-template-columns: repeat(3, clamp(40px, 12vw, 54px));
    grid-template-rows: repeat(3, clamp(40px, 12vw, 54px));
    gap: 5px;
  }

  .mobile-action-bank {
    grid-template-columns: repeat(2, minmax(58px, 1fr));
    gap: 6px;
  }

  .mobile-action-button {
    min-height: 44px;
    padding: 7px 8px;
    font-size: 8px;
  }

  .mobile-action-button[data-mobile-icon="bubble"]::before {
    width: 36px;
    height: 36px;
  }

  .mobile-action-button[data-mobile-icon="carve"]::before {
    width: 36px;
    height: 30px;
  }

  .mobile-action-button[data-mobile-icon="shield"]::before {
    width: 36px;
    height: 40px;
  }

  .mobile-action-button[data-mobile-icon="dash"]::before {
    width: 40px;
    height: 40px;
  }

  .mobile-action-button[data-mobile-icon="detonate"]::before {
    width: 42px;
    height: 42px;
  }

  .player-stage {
    min-height: 360px;
    padding: 20px;
  }

  .launch-disc {
    width: 170px;
    height: 170px;
  }

  .launch-toast {
    right: 12px;
    bottom: 12px;
  }

  .site-footer {
    width: min(100% - 24px, 1180px);
    display: grid;
  }

  .donation-slot {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 16px 14px;
  }

  .coin-return {
    width: 82px;
  }

  .donate-button {
    width: min(100%, 260px);
    min-height: 54px;
  }

  .donation-panel {
    padding: 18px;
  }

  .donation-amounts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 360px) {
  .transport {
    gap: 4px;
    padding: 4px;
  }

  .transport-button,
  .case-flip-button,
  .message-trigger {
    width: 32px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .message-terminal-icon::after,
  .recovery-terminal-status i {
    animation: none;
  }
}

/* Desktop Chrome can round a fixed 100vh player a few pixels past the visible
   content area. Keep one shared bottom safety inset so every canvas and iframe
   remains fully visible without changing any game's aspect ratio. */
@media (hover: hover) and (pointer: fine) {
  body.is-player-open .embedded-game-view {
    top: 0;
    right: 0;
    bottom: 24px;
    left: 0;
    height: auto;
    min-height: 0;
  }

  body.is-player-open .embedded-canvas,
  body.is-player-open .embedded-frame {
    box-sizing: border-box;
  }

  body.is-player-open[data-active-game="bubblebat"] .embedded-canvas,
  body.is-player-open[data-active-game="match-race"] .embedded-frame,
  body.is-player-open[data-active-game="sticker-hex"] .embedded-frame,
  body.is-player-open[data-active-game="zippa"] .embedded-frame,
  body.is-player-open[data-active-game="drizzlewick"] .embedded-frame {
    justify-self: center;
    width: min(100%, calc((100dvh - 236px) * 16 / 9));
    height: auto;
    max-height: none;
  }

  /* Ink Gremlin was grouped with Drizzlewick above, which sized the frame from
     a 16/9 ratio - but this frame is 11/7, which is TALLER for the same width.
     Paired with max-height:none that left nothing to clamp it, so the bottom
     of the game sat below the fold on any short window. It gets its own real
     ratio and a reserve. The reserve is slimmer than --player-chrome because
     this game hides the controls row (see .embedded-controls below). */
  body.is-player-open[data-active-game="ink-gremlin"] .embedded-frame {
    justify-self: center;
    width: min(100%, calc((100dvh - var(--player-chrome-slim)) * 11 / 7));
    height: auto;
    max-height: calc(100dvh - var(--player-chrome-slim));
  }

  body.is-player-open[data-active-game="plash"] .embedded-canvas.is-paper-canvas {
    justify-self: center;
    width: min(100%, calc((100dvh - 236px) * 4 / 3));
    height: auto;
    max-height: none;
  }
}

/* Final phone-player placement rules. Keep these after the legacy mobile passes. */
@media (hover: none), (pointer: coarse) {
  body.is-game-fullscreen[data-active-game="uski"] .mobile-controls.is-visible {
    right: max(5px, env(safe-area-inset-right));
    bottom: max(5px, env(safe-area-inset-bottom));
    left: max(5px, env(safe-area-inset-left));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    width: auto;
    max-width: none;
    padding: 5px;
    overflow: hidden;
  }

  body.is-game-fullscreen[data-active-game="uski"] .mobile-control-pad {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    gap: 4px;
    width: min(100%, 184px);
    min-width: 0;
  }

  body.is-game-fullscreen[data-active-game="uski"] .mobile-action-bank {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px;
    width: min(100%, 220px);
    min-width: 0;
  }

  body.is-game-fullscreen[data-active-game="uski"] .mobile-pad-button,
  body.is-game-fullscreen[data-active-game="uski"] .mobile-action-button {
    width: 100%;
    min-width: 0;
    min-height: clamp(48px, 13vw, 60px);
    padding: 5px 3px;
  }

  body[data-active-game="wordventure"] .mobile-action-button,
  body[data-active-game="wordventure"] .mobile-action-button span {
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-weight: 800;
  }

  body[data-active-game="wordventure"] .mobile-action-button[data-mobile-key="KeyT"] {
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-weight: 800;
  }
}

@media (orientation: landscape) and (hover: none),
  (orientation: landscape) and (pointer: coarse) {
  body[data-active-game="zippa"] .mobile-controls.is-visible {
    position: absolute;
    z-index: 100;
    top: 50%;
    right: max(8px, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
    grid-template-columns: 1fr;
    width: min(224px, 29vw);
    max-width: 224px;
    max-height: none;
    transform: translateY(-50%);
  }

  body[data-active-game="zippa"] .mobile-action-bank {
    grid-template-columns: repeat(2, minmax(64px, 1fr)) !important;
    width: 100%;
  }
}

@media (hover: none), (pointer: coarse) {
  body.is-player-open[data-active-game="gauntlet-blitz"] .embedded-stage {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body.is-player-open[data-active-game="gauntlet-blitz"] #gauntlet-blitz-frame {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.is-player-open[data-active-game="gauntlet-blitz"] .mobile-controls.is-visible {
    position: absolute !important;
    z-index: 80 !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
  }

  body.is-game-fullscreen[data-active-game="wordventure"] .mobile-control-pad,
  body.is-game-fullscreen[data-active-game="wordventure"] .mobile-pad-button,
  body.is-game-fullscreen[data-active-game="wordventure"] .mobile-action-button {
    border-color: rgba(239, 229, 202, 0.46) !important;
    background: rgba(14, 11, 10, 0.48) !important;
    opacity: 0.9 !important;
  }
}

@media (hover: none), (pointer: coarse) {
  body.is-game-fullscreen[data-active-game="bubblebat"] .mobile-controls.is-visible,
  body.is-game-fullscreen[data-active-game="gauntlet-blitz"] .mobile-controls.is-visible,
  body.is-game-fullscreen[data-active-game="wordventure"] .mobile-controls.is-visible {
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.is-game-fullscreen[data-active-game="bubblebat"] .mobile-control-pad,
  body.is-game-fullscreen[data-active-game="bubblebat"] .mobile-pad-button,
  body.is-game-fullscreen[data-active-game="bubblebat"] .mobile-action-button {
    border-color: rgba(77, 242, 255, 0.24);
    background: rgba(3, 12, 22, 0.2);
    box-shadow: none;
    opacity: 0.72;
  }

  body.is-game-fullscreen[data-active-game="gauntlet-blitz"] .mobile-action-button,
  body.is-game-fullscreen[data-active-game="wordventure"] .mobile-control-pad,
  body.is-game-fullscreen[data-active-game="wordventure"] .mobile-pad-button,
  body.is-game-fullscreen[data-active-game="wordventure"] .mobile-action-button {
    background: rgba(5, 8, 14, 0.2);
    box-shadow: none;
    opacity: 0.76;
  }

  body.is-game-fullscreen[data-active-game="bubblebat"] .mobile-pad-button:active,
  body.is-game-fullscreen[data-active-game="bubblebat"] .mobile-action-button:active,
  body.is-game-fullscreen[data-active-game="gauntlet-blitz"] .mobile-action-button:active,
  body.is-game-fullscreen[data-active-game="wordventure"] .mobile-pad-button:active,
  body.is-game-fullscreen[data-active-game="wordventure"] .mobile-action-button:active {
    background: rgba(77, 242, 255, 0.38);
    opacity: 1;
  }

  body[data-active-game="gauntlet-blitz"] .embedded-topline {
    right: max(8px, env(safe-area-inset-right));
    left: auto;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    max-width: calc(100vw - 16px);
    gap: 5px;
  }

  body[data-active-game="gauntlet-blitz"] .now-playing {
    display: none;
  }

  body[data-active-game="gauntlet-blitz"] .exit-home,
  body[data-active-game="gauntlet-blitz"] .fullscreen-toggle,
  body[data-active-game="gauntlet-blitz"] .purchase-open {
    min-height: 34px;
    height: 34px;
    margin: 0;
  }

  body[data-active-game="gauntlet-blitz"] .exit-home,
  body[data-active-game="gauntlet-blitz"] .purchase-open {
    padding-inline: 9px;
    font-size: 8px;
  }

  body[data-active-game="gauntlet-blitz"] .fullscreen-toggle {
    flex-basis: 34px;
    width: 34px;
    min-width: 34px;
  }

  body[data-active-game="gauntlet-blitz"] .mobile-controls.is-visible {
    grid-template-columns: minmax(180px, 26vw) minmax(330px, 58vw);
    gap: clamp(14px, 3vw, 36px);
    max-height: 88px;
  }

  body[data-active-game="gauntlet-blitz"] .mobile-move-slider {
    --slider-position: 50%;
    position: relative;
    width: min(230px, 27vw);
    min-width: 180px;
    height: 66px;
    border: 1px solid rgba(66, 239, 255, 0.34);
    border-radius: 999px;
    background: rgba(2, 8, 17, 0.18);
    box-shadow: inset 0 0 16px rgba(66, 239, 255, 0.08);
    touch-action: none;
    pointer-events: auto;
  }

  body[data-active-game="gauntlet-blitz"] .mobile-move-slider-track {
    position: absolute;
    top: 50%;
    right: 22px;
    left: 22px;
    height: 5px;
    border-radius: 999px;
    background:
      linear-gradient(90deg, rgba(66, 239, 255, 0.42), rgba(255, 255, 255, 0.18) 50%, rgba(255, 79, 193, 0.42));
    transform: translateY(-50%);
  }

  body[data-active-game="gauntlet-blitz"] .mobile-move-slider-thumb {
    position: absolute;
    top: 50%;
    left: var(--slider-position);
    width: 48px;
    height: 48px;
    border: 2px solid rgba(238, 252, 255, 0.74);
    border-radius: 50%;
    background: rgba(20, 36, 52, 0.32);
    box-shadow:
      0 0 0 4px rgba(66, 239, 255, 0.08),
      0 0 18px rgba(66, 239, 255, 0.22);
    transform: translate(-50%, -50%);
    transition: left 70ms linear;
  }

  body[data-active-game="gauntlet-blitz"] .mobile-move-slider.is-active .mobile-move-slider-thumb {
    background: rgba(66, 239, 255, 0.42);
    transition: none;
  }

  body[data-active-game="gauntlet-blitz"] .mobile-action-bank {
    grid-template-columns: repeat(5, minmax(48px, 1fr)) !important;
    max-width: 430px;
  }

  body[data-active-game="wordventure"] .mobile-controls.is-visible {
    border: 0;
  }

  body[data-active-game="wordventure"] .mobile-action-button {
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.05;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82);
  }

  .embedded-game-view:fullscreen .purchase-modal,
  .embedded-game-view:-webkit-full-screen .purchase-modal {
    z-index: 2147483647;
    display: grid;
  }

  .embedded-game-view:fullscreen .purchase-panel,
  .embedded-game-view:-webkit-full-screen .purchase-panel {
    max-height: calc(100dvh - 20px);
  }
}

@media (max-width: 760px) and (max-height: 540px) and (hover: none),
  (max-width: 760px) and (max-height: 540px) and (pointer: coarse) {
  .embedded-controls {
    display: none;
  }

  .embedded-canvas,
  .embedded-frame {
    max-height: calc(100svh - 186px);
  }

  .embedded-canvas.is-portrait-canvas {
    height: min(43svh, 300px);
  }

  .embedded-frame.is-square-frame {
    width: min(100%, clamp(180px, calc(100svh - 152px), 420px));
  }

  .embedded-frame.is-portrait-frame {
    width: min(100%, clamp(150px, calc((100svh - 152px) * 0.7547), 360px));
  }

  body[data-active-game="snakenspace"] .embedded-stage {
    grid-template-columns: minmax(0, auto) auto;
    align-items: center;
    justify-content: center;
    width: min(100%, 760px);
    max-height: none;
  }

  body[data-active-game="snakenspace"] .embedded-frame.is-square-frame {
    width: min(calc(100svh - 96px), calc(100svw - 280px), 520px);
  }

  body[data-active-game="snakenspace"] .mobile-controls.is-visible {
    max-width: 164px;
  }

  .mobile-controls.is-visible {
    max-width: 460px;
    gap: 10px;
  }

  body[data-active-game="bubblebat"] .mobile-controls.is-visible {
    --bubblebat-button-size: 50px;
    width: min(100%, 292px);
    max-width: 94vw;
    gap: 6px;
  }

  .mobile-control-pad {
    grid-template-columns: repeat(3, 38px);
    grid-template-rows: repeat(3, 38px);
  }

  .mobile-action-button {
    min-height: 38px;
    padding: 5px 7px;
    font-size: 7px;
  }

  body[data-active-game="bubblebat"] .mobile-action-bank {
    width: min(178px, 50vw);
  }

  body[data-active-game="plash"] .mobile-action-bank {
    grid-template-columns: repeat(3, minmax(52px, 1fr));
  }

  body[data-active-game="sticker-hex"] .mobile-controls.is-visible {
    max-width: 240px;
  }

  body[data-active-game="sticker-hex"] .mobile-action-bank {
    width: min(220px, 70vw);
  }

  body[data-active-game="sticker-hex"] .mobile-action-button {
    min-height: 48px;
    grid-template-columns: 32px 1fr;
  }

  body[data-active-game="sticker-hex"] .embedded-frame {
    position: absolute;
    inset: 34px auto auto 6px;
    width: calc(100% - 12px);
    max-width: 100%;
    height: calc(100% - 40px);
    max-height: none;
  }

  body[data-active-game="uski"] .embedded-canvas.is-portrait-canvas {
    height: min(43svh, 300px);
  }
}

@media (orientation: landscape) and (hover: none),
  (orientation: landscape) and (pointer: coarse) {
  body[data-active-game="zippa"] .embedded-game-view,
  body[data-active-game="snakenspace"] .embedded-game-view {
    grid-template-rows: 1fr;
    gap: 0;
    padding: 8px 10px;
    overflow: hidden;
  }

  body[data-active-game="zippa"] .embedded-topline,
  body[data-active-game="snakenspace"] .embedded-topline {
    position: absolute;
    z-index: 5;
    top: 8px;
    right: 10px;
    left: 10px;
    pointer-events: none;
  }

  body[data-active-game="zippa"] .exit-home,
  body[data-active-game="snakenspace"] .exit-home {
    pointer-events: auto;
  }

  body[data-active-game="zippa"] .now-playing,
  body[data-active-game="snakenspace"] .now-playing {
    max-width: 26vw;
  }

  body[data-active-game="zippa"] .embedded-game-logo,
  body[data-active-game="snakenspace"] .embedded-game-logo {
    width: clamp(96px, 18vw, 150px);
    max-height: 62px;
  }

  body[data-active-game="zippa"] .embedded-stage,
  body[data-active-game="snakenspace"] .embedded-stage {
    align-self: center;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: none;
    max-height: none;
    min-height: 0;
    padding: 52px 10px 8px;
  }

  body[data-active-game="snakenspace"] .embedded-stage {
    grid-template-columns: 1fr;
  }

  body[data-active-game="zippa"] .embedded-frame {
    width: min(100%, calc((100svh - 72px) * 1.7778));
    max-width: 100%;
    max-height: calc(100svh - 72px);
    height: auto;
  }

  body[data-active-game="zippa"] .mobile-controls.is-visible {
    grid-template-columns: 1fr;
    gap: 8px;
    width: min(230px, 28vw);
    max-width: 230px;
  }

  body[data-active-game="zippa"] .mobile-action-bank {
    width: 100%;
    grid-template-columns: repeat(2, minmax(72px, 1fr));
  }

  body[data-active-game="snakenspace"] .embedded-frame.is-square-frame {
    justify-self: center;
    width: min(calc(100svh - 70px), calc(100svw - 24px), 560px);
    max-width: 100%;
  }

  body[data-active-game="snakenspace"] .mobile-controls.is-visible {
    grid-template-columns: 1fr;
    width: min(190px, 26vw);
    max-width: 190px;
  }
}

/* Desktop Demolition is a remote desktop, so its iframe should use the whole
   fullscreen surface instead of inheriting the compact canvas-game limits. */
@media (hover: none), (pointer: coarse) {
  body.is-game-fullscreen[data-active-game="desktop-demolition"] .embedded-game-view {
    display: block;
    padding: 0;
    overflow: hidden;
    background: #000;
  }

  body.is-game-fullscreen[data-active-game="desktop-demolition"] .embedded-topline {
    position: fixed;
    z-index: 100;
    top: max(3px, env(safe-area-inset-top));
    right: auto;
    left: max(3px, env(safe-area-inset-left));
    width: auto;
    pointer-events: none;
  }

  body.is-game-fullscreen[data-active-game="desktop-demolition"] .exit-home {
    width: auto;
    min-width: 0;
    min-height: 24px;
    height: 24px;
    gap: 0;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 0;
    line-height: 1;
    opacity: 0.68;
    pointer-events: auto;
  }

  body.is-game-fullscreen[data-active-game="desktop-demolition"] .exit-home .icon-stop {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
  }

  body.is-game-fullscreen[data-active-game="desktop-demolition"] .exit-home span:last-child {
    display: none;
  }

  body.is-game-fullscreen[data-active-game="desktop-demolition"] .now-playing {
    display: none !important;
  }

  body.is-game-fullscreen[data-active-game="desktop-demolition"] .embedded-stage {
    position: absolute;
    inset: 0;
    display: block !important;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #000;
    box-shadow: none;
  }

  body.is-game-fullscreen[data-active-game="desktop-demolition"] #desktop-demolition-frame {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
  }
}

@media (orientation: portrait) and (hover: none),
  (orientation: portrait) and (pointer: coarse) {
  body.is-game-fullscreen[data-active-game="desktop-demolition"] .embedded-stage {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 100svh !important;
    height: 100svw !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    transform-origin: center !important;
  }

  body[data-active-game="match-race"] .embedded-game-view {
    display: block;
  }

  body[data-active-game="match-race"] .embedded-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(calc(100svh - 16px), 177.78svw);
    max-height: calc(100svw - 16px);
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
  }
}

@media (hover: none), (pointer: coarse) {
  body[data-active-game="sticker-hex"] .mobile-controls.is-visible {
    position: absolute;
    z-index: 6;
    top: auto;
    left: 8px;
    bottom: 6px;
    display: grid;
    width: min(150px, calc(100% - 16px));
    min-width: 0;
    max-width: 150px;
    height: 42px;
    max-height: 42px;
    margin: 0;
    gap: 0;
    transform: none;
    pointer-events: auto;
  }

  body[data-active-game="sticker-hex"] .mobile-action-bank {
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr;
    gap: 0;
    justify-self: stretch;
    align-self: stretch;
  }

  body[data-active-game="sticker-hex"] .mobile-action-button {
    min-height: 42px;
    height: 42px;
    padding: 4px 8px;
    border-radius: 999px;
    grid-template-columns: 28px 1fr;
    gap: 6px;
    justify-items: center;
    text-align: center;
    font-size: 7px;
    line-height: 1;
  }

  body[data-active-game="sticker-hex"] .mobile-action-button[data-mobile-icon="shield"]::before {
    width: 25px;
    height: 29px;
  }

  body[data-active-game="sticker-hex"] .mobile-action-button[data-mobile-icon] span {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}
.game-card[data-game-id="bytefall-protocol-demo"] .preview-video,
.game-card[data-game-id="bytefall-protocol-demo"] .case-back-image {
  object-fit: contain;
  object-position: center;
  background:
    radial-gradient(circle at 50% 48%, rgba(53, 217, 255, 0.16), transparent 44%),
    #02020a;
}

.game-card[data-game-id="bytefall-protocol-demo"] .label-strip h3 {
  max-width: 100%;
  font-size: clamp(17px, 2.1vw, 24px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

body[data-active-game="bytefall-protocol-demo"] .embedded-game-view {
  display: block;
  padding: 0;
  overflow: hidden;
  background: #02020a;
}

body[data-active-game="bytefall-protocol-demo"] .embedded-topline {
  position: absolute;
  z-index: 40;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  right: auto;
  width: auto;
  pointer-events: none;
}

body[data-active-game="bytefall-protocol-demo"] .embedded-topline .exit-home {
  pointer-events: auto;
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
  body[data-active-game="bytefall-protocol-demo"] .embedded-topline,
  body[data-active-game="bytefall-protocol-demo"] .embedded-game-view:fullscreen .embedded-topline,
  body[data-active-game="bytefall-protocol-demo"] .embedded-game-view:-webkit-full-screen .embedded-topline {
    position: fixed;
    z-index: 2147483647;
    top: max(8px, env(safe-area-inset-top));
    right: auto;
    left: max(8px, env(safe-area-inset-left));
    display: flex;
    width: auto;
    visibility: visible;
    opacity: 1;
    pointer-events: none;
  }

  body[data-active-game="bytefall-protocol-demo"] .embedded-topline .exit-home {
    min-height: 36px;
    padding: 0 12px;
    border-color: rgba(77, 242, 255, 0.78);
    background: rgba(2, 5, 10, 0.9);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.9),
      0 0 16px rgba(77, 242, 255, 0.3);
    font-size: 10px;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

body[data-active-game="bytefall-protocol-demo"] .now-playing,
body[data-active-game="bytefall-protocol-demo"] .embedded-controls,
body[data-active-game="bytefall-protocol-demo"] .mobile-controls {
  display: none;
}

body[data-active-game="bytefall-protocol-demo"] .embedded-stage {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #02020a;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-active-game="bytefall-protocol-demo"] .embedded-frame {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body[data-active-game="bytefall-protocol-demo"] .embedded-frame[hidden] {
  display: none;
}

.game-card[data-game-id="gauntlet-blitz"] .preview-video {
  object-fit: cover;
  object-position: center;
  background: #05040d;
}

.game-card[data-game-id="gauntlet-blitz"] .label-strip h3 {
  max-width: 100%;
  font-size: clamp(17px, 2.1vw, 23px);
  overflow-wrap: anywhere;
}

.game-card[data-game-id="wordventure"] .preview-still {
  object-fit: cover;
  object-position: center;
  background: #d3a16c;
}

.game-card[data-game-id="wordventure"] .label-strip h3 {
  max-width: 100%;
  font-size: clamp(14px, 1.7vw, 20px);
  white-space: nowrap;
  overflow-wrap: normal;
}

.wordventure-card-back .case-back-image {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  background: #d3c8b7;
  filter: saturate(0.98) contrast(1.03) brightness(0.98);
}

.wordventure-cover-logo {
  position: relative;
  z-index: 4;
  display: block;
  width: min(88%, 560px);
  height: auto;
  max-height: 56%;
  object-fit: contain;
  border: 3px solid rgba(35, 31, 29, 0.76);
  box-shadow:
    0 8px 0 rgba(35, 31, 29, 0.38),
    0 18px 34px rgba(0, 0, 0, 0.58);
}

body[data-active-game="wordventure"] .embedded-frame {
  background: #b98d5e;
}

.gauntlet-card-back .case-back-image {
  object-fit: contain;
  object-position: center;
  background: #03020a;
  filter: saturate(1.04) contrast(1.04) brightness(0.96);
}

.desktop-demolition-card-back .case-back-image {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  background: #020407;
  filter: saturate(1.04) contrast(1.03);
}

.game-card[data-game-id="desktop-demolition"] .label-strip h3 {
  max-width: 100%;
  font-size: 16px;
  line-height: 1.08;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

body[data-active-game="desktop-demolition"] .embedded-controls {
  display: none;
}

body[data-active-game="desktop-demolition"] .embedded-frame {
  background: #000;
}

body[data-active-game="ink-gremlin"] .embedded-stage {
  width: min(1120px, 100%);
}

body[data-active-game="ink-gremlin"] .embedded-frame {
  justify-self: center;
  width: min(100%, calc((100vh - var(--player-chrome)) * 11 / 7));
  height: auto;
  max-height: calc(100vh - var(--player-chrome));
  aspect-ratio: 11 / 7;
  background: #ede3c7;
  image-rendering: auto;
}

body[data-active-game="ink-gremlin"] .embedded-controls {
  display: none;
}

body[data-active-game="ink-gremlin"] .now-playing {
  max-width: min(34vw, 360px);
}

body[data-active-game="ink-gremlin"] .embedded-game-logo {
  width: clamp(160px, 22vw, 310px);
  max-height: 124px;
}

@media (hover: none), (pointer: coarse) {
  body[data-active-game="ink-gremlin"].is-player-open:not(.is-game-fullscreen) .embedded-frame {
    width: min(100%, calc((100dvh - var(--player-chrome-slim)) * 11 / 7)) !important;
    height: auto !important;
    max-height: calc(100dvh - var(--player-chrome-slim)) !important;
    aspect-ratio: 11 / 7 !important;
  }
}

body[data-active-game="ink-gremlin"][data-active-game-mode="mobile"].is-player-open:not(.is-game-fullscreen) .embedded-frame {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

.gauntlet-cover-logo {
  position: relative;
  z-index: 4;
  display: block;
  width: min(88%, 520px);
  height: auto;
  max-height: 70%;
  object-fit: contain;
  filter:
    drop-shadow(0 5px 2px rgba(0, 0, 0, 0.92))
    drop-shadow(0 0 18px rgba(66, 239, 255, 0.58))
    drop-shadow(0 0 24px rgba(255, 56, 184, 0.38));
}

body[data-active-game="gauntlet-blitz"] .embedded-controls {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  body[data-active-game="gauntlet-blitz"].is-player-open {
    overflow: hidden;
    background: #03030a;
  }

  body[data-active-game="gauntlet-blitz"] .embedded-game-view,
  body[data-active-game="gauntlet-blitz"] .embedded-game-view:fullscreen,
  body[data-active-game="gauntlet-blitz"] .embedded-game-view:-webkit-full-screen {
    display: block;
    padding: 0;
    overflow: hidden;
    background: #03030a;
  }

  body[data-active-game="gauntlet-blitz"] .embedded-topline {
    position: fixed;
    z-index: 2147483647;
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    display: flex;
    width: auto;
    pointer-events: none;
  }

  body[data-active-game="gauntlet-blitz"] .exit-home {
    min-height: 34px;
    padding: 0 10px;
    border-color: rgba(66, 239, 255, 0.8);
    background: rgba(3, 3, 10, 0.9);
    font-size: 9px;
    pointer-events: auto;
  }

  body[data-active-game="gauntlet-blitz"] .now-playing {
    margin-left: auto;
  }

  body[data-active-game="gauntlet-blitz"] .embedded-game-logo {
    width: min(18vw, 86px);
    max-height: 30px;
  }

  body[data-active-game="gauntlet-blitz"] .embedded-stage {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #03030a;
    box-shadow: none;
    backdrop-filter: none;
  }

  body[data-active-game="gauntlet-blitz"] .embedded-frame {
    display: block;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-active-game="gauntlet-blitz"] .embedded-frame[hidden] {
    display: none;
  }

  body[data-active-game="gauntlet-blitz"] .mobile-controls.is-visible {
    position: relative;
    z-index: 70;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(180px, auto) minmax(250px, 360px);
    justify-content: space-between;
    align-items: center;
    gap: clamp(20px, 5vw, 64px);
    width: 100%;
    max-width: none;
    margin: 0;
    padding:
      7px max(14px, env(safe-area-inset-right))
      max(7px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
    border-top: 1px solid rgba(66, 239, 255, 0.3);
    background: rgba(3, 3, 10, 0.96);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.34);
    pointer-events: auto;
  }

  body[data-active-game="gauntlet-blitz"] .mobile-control-pad {
    position: relative;
    grid-template-columns: repeat(3, clamp(46px, 10vh, 56px));
    grid-template-rows: repeat(2, clamp(46px, 10vh, 56px));
    justify-self: start;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(66, 239, 255, 0.38);
    border-radius: 8px;
    background: rgba(5, 12, 22, 0.92);
    pointer-events: auto;
  }

  body[data-active-game="gauntlet-blitz"] .mobile-pad-left {
    grid-column: 1;
    grid-row: 1;
  }

  body[data-active-game="gauntlet-blitz"] .mobile-pad-down {
    grid-column: 2;
    grid-row: 2;
  }

  body[data-active-game="gauntlet-blitz"] .mobile-pad-right {
    grid-column: 3;
    grid-row: 1;
  }

  body[data-active-game="gauntlet-blitz"] .mobile-pad-button {
    border-radius: 7px;
  }

  body[data-active-game="gauntlet-blitz"] .mobile-action-bank {
    grid-template-columns: repeat(4, minmax(48px, 1fr));
    justify-self: end;
    gap: 7px;
    width: min(100%, 360px);
    pointer-events: auto;
  }

  body[data-active-game="gauntlet-blitz"] .mobile-action-button {
    min-height: clamp(50px, 11vh, 62px);
    padding: 5px;
    border-radius: 6px;
    font-size: 9px;
  }

  body[data-active-game="wordventure"].is-player-open {
    overflow: hidden;
    background: #2d2118;
  }

  body[data-active-game="wordventure"] .embedded-game-view,
  body[data-active-game="wordventure"] .embedded-game-view:fullscreen,
  body[data-active-game="wordventure"] .embedded-game-view:-webkit-full-screen {
    display: block;
    padding: 0;
    overflow: hidden;
    background: #2d2118;
  }

  body[data-active-game="wordventure"] .embedded-topline {
    position: fixed;
    z-index: 2147483647;
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    display: flex;
    width: auto;
    pointer-events: none;
  }

  body[data-active-game="wordventure"] .exit-home {
    min-height: 34px;
    padding: 0 10px;
    border-color: rgba(255, 219, 132, 0.88);
    color: #fff8e8;
    background: rgba(45, 33, 24, 0.9);
    font-size: 9px;
    pointer-events: auto;
  }

  body[data-active-game="wordventure"] .now-playing {
    margin-left: auto;
    max-width: min(30vw, 180px);
  }

  body[data-active-game="wordventure"] .embedded-game-logo {
    width: min(30vw, 180px);
    max-height: 42px;
    object-position: right top;
  }

  body[data-active-game="wordventure"] .embedded-stage {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #2d2118;
    box-shadow: none;
    backdrop-filter: none;
  }

  body[data-active-game="wordventure"] .embedded-frame {
    display: block;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-active-game="wordventure"] .embedded-frame[hidden] {
    display: none;
  }

  body[data-active-game="wordventure"] .embedded-controls {
    display: none;
  }

  body[data-active-game="wordventure"] .mobile-controls.is-visible {
    position: relative;
    z-index: 70;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(150px, auto) minmax(330px, 460px);
    justify-content: space-between;
    align-items: center;
    gap: clamp(20px, 6vw, 72px);
    width: 100%;
    max-width: none;
    margin: 0;
    padding:
      7px max(14px, env(safe-area-inset-right))
      max(7px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
    border-top: 1px solid rgba(255, 219, 132, 0.34);
    background: rgba(45, 33, 24, 0.96);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.34);
    pointer-events: auto;
  }

  body[data-active-game="wordventure"] .mobile-control-pad {
    position: relative;
    grid-template-columns: repeat(2, clamp(50px, 11vh, 62px));
    grid-template-rows: clamp(50px, 11vh, 62px);
    justify-self: start;
    gap: 14px;
    padding: 4px;
    border: 1px solid rgba(255, 219, 132, 0.42);
    border-radius: 8px;
    background: rgba(20, 13, 9, 0.8);
    box-shadow:
      inset 0 1px rgba(255, 248, 232, 0.12),
      0 5px 12px rgba(0, 0, 0, 0.28);
  }

  body[data-active-game="wordventure"] .mobile-control-pad--side-scroller::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 219, 132, 0.32);
    border-radius: 50%;
    background: #241710;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.58);
    transform: translate(-50%, -50%);
  }

  body[data-active-game="wordventure"] .mobile-pad-left {
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
  }

  body[data-active-game="wordventure"] .mobile-pad-right {
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
  }

  body[data-active-game="wordventure"] .mobile-pad-button {
    border-color: rgba(255, 219, 132, 0.58);
    border-radius: 6px;
    color: #fff3d1;
    background:
      linear-gradient(180deg, rgba(255, 239, 190, 0.2), rgba(83, 54, 32, 0.12)),
      #352217;
    box-shadow:
      inset 0 1px rgba(255, 248, 232, 0.22),
      0 3px 0 #160e09,
      0 6px 12px rgba(0, 0, 0, 0.28);
  }

  body[data-active-game="wordventure"] .mobile-action-bank {
    grid-template-columns: repeat(5, minmax(46px, 1fr));
    justify-self: end;
    gap: 6px;
    width: 100%;
    max-width: 460px;
  }

  body[data-active-game="wordventure"] .mobile-action-button {
    min-height: clamp(50px, 11vh, 62px);
    padding: 5px;
    border-color: rgba(255, 219, 132, 0.48);
    border-radius: 6px;
    color: #fff3d1;
    background:
      linear-gradient(180deg, rgba(255, 239, 190, 0.18), rgba(83, 54, 32, 0.1)),
      #352217;
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: none;
  }
}

@media (max-width: 620px) {
  .purchase-panel {
    max-height: calc(100dvh - 20px);
    padding: 18px 14px 14px;
  }

  .purchase-method {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .purchase-customer {
    grid-template-columns: 1fr;
  }

  .purchase-downloads {
    grid-template-columns: 1fr;
  }
}

/* Universal phone landscape player */
.fullscreen-toggle {
  display: none;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(77, 242, 255, 0.62);
  border-radius: 4px;
  color: #effcff;
  background: rgba(2, 7, 13, 0.82);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.34);
  pointer-events: auto;
}

.fullscreen-toggle[hidden] {
  display: none !important;
}

.icon-fullscreen {
  position: relative;
  display: block;
  width: 17px;
  height: 17px;
  background:
    linear-gradient(currentColor, currentColor) left top / 7px 2px no-repeat,
    linear-gradient(currentColor, currentColor) left top / 2px 7px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 7px 2px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 2px 7px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 7px 2px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 2px 7px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 7px 2px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 2px 7px no-repeat;
}

.fullscreen-toggle.is-fullscreen .icon-fullscreen {
  transform: rotate(180deg);
  background:
    linear-gradient(currentColor, currentColor) left 4px top 4px / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) left 4px top 4px / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) right 4px top 4px / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) right 4px top 4px / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) left 4px bottom 4px / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) left 4px bottom 4px / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) right 4px bottom 4px / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) right 4px bottom 4px / 2px 6px no-repeat;
}

@media (hover: none), (pointer: coarse) {
  body.is-player-open .embedded-game-view,
  body.is-player-open .embedded-game-view:fullscreen,
  body.is-player-open .embedded-game-view:-webkit-full-screen {
    width: 100%;
    height: 100%;
    min-height: 100svh;
    padding: 0;
    overflow: hidden;
    background: #02040a;
  }

  body.is-player-open .embedded-topline,
  body.is-player-open .embedded-game-view:fullscreen .embedded-topline,
  body.is-player-open .embedded-game-view:-webkit-full-screen .embedded-topline {
    position: fixed;
    z-index: 2147483647;
    top: max(7px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    left: max(8px, env(safe-area-inset-left));
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7px;
    width: auto;
    pointer-events: none;
  }

  body.is-player-open .exit-home {
    order: 0;
    min-height: 38px;
    pointer-events: auto;
  }

  body.is-player-open .fullscreen-toggle {
    order: 1;
    display: grid;
    flex: 0 0 38px;
  }

  body.is-player-open .purchase-open {
    order: 2;
    pointer-events: auto;
  }

  body.is-player-open .now-playing {
    order: 3;
    margin-left: auto;
  }

  body.is-player-open .embedded-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
  }

  body.is-player-open .embedded-canvas {
    align-self: center;
    justify-self: center;
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  body[data-active-game="bubblebat"] .embedded-stage,
  body[data-active-game="plash"] .embedded-stage,
  body[data-active-game="uski"] .embedded-stage {
    display: grid !important;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr) !important;
    place-items: center;
    padding: 0 !important;
    overflow: hidden;
  }

  body[data-active-game="bubblebat"] .embedded-controls,
  body[data-active-game="plash"] .embedded-controls,
  body[data-active-game="uski"] .embedded-controls {
    display: none;
  }

  body.is-player-open .mobile-controls.is-visible {
    position: absolute;
    z-index: 100;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(6px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, auto);
    justify-content: space-between;
    align-items: end;
    gap: clamp(12px, 4vw, 42px);
    width: auto;
    max-width: none;
    min-height: 0;
    max-height: min(24svh, 118px);
    margin: 0;
    padding: 6px 8px;
    border: 1px solid rgba(77, 242, 255, 0.22);
    border-radius: 7px;
    background: rgba(2, 8, 15, 0.46);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
  }

  body.is-player-open .mobile-control-pad,
  body.is-player-open .mobile-action-bank {
    pointer-events: auto;
  }

  body.is-player-open .mobile-control-pad {
    background-color: rgba(3, 10, 18, 0.54);
  }

  body.is-player-open .mobile-pad-button,
  body.is-player-open .mobile-action-button {
    min-width: 46px;
    min-height: 46px;
    background-color: rgba(7, 17, 28, 0.68);
    opacity: 0.88;
    pointer-events: auto;
  }

  body.is-player-open .mobile-action-bank {
    justify-self: end;
  }

  body[data-active-game="plash"] .mobile-controls.is-visible,
  body[data-active-game="zippa"] .mobile-controls.is-visible,
  body[data-active-game="sticker-hex"] .mobile-controls.is-visible {
    left: auto;
    grid-template-columns: 1fr;
    width: min(58vw, 360px);
  }

  body[data-active-game="sticker-hex"] .mobile-controls.is-visible {
    width: min(170px, 42vw);
    height: auto;
    max-height: none;
  }

  body[data-active-game="bubblebat"] .mobile-controls.is-visible {
    --bubblebat-button-size: 58px;
    grid-template-columns: auto minmax(126px, 164px) !important;
    grid-template-rows: 1fr !important;
    justify-content: space-between;
    justify-items: stretch;
    width: auto;
    max-width: none;
    gap: clamp(18px, 7vw, 72px);
    padding-inline: 8px;
  }

  body[data-active-game="bubblebat"] .mobile-control-pad {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start;
  }

  body[data-active-game="bubblebat"] .mobile-action-bank {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center;
    justify-self: end;
    width: 100%;
  }

  body[data-active-game="bubblebat"] .mobile-action-button {
    min-height: 54px;
  }

  body[data-active-game="uski"] .mobile-control-pad {
    grid-template-columns: repeat(3, 52px) !important;
    grid-template-rows: 52px !important;
    gap: 7px;
  }

  body[data-active-game="uski"] .mobile-pad-left {
    grid-column: 1;
    grid-row: 1;
  }

  body[data-active-game="uski"] .mobile-pad-down {
    grid-column: 2;
    grid-row: 1;
  }

  body[data-active-game="uski"] .mobile-pad-right {
    grid-column: 3;
    grid-row: 1;
  }

  body[data-active-game="uski"] .mobile-pad-button,
  body[data-active-game="uski"] .mobile-action-button {
    min-width: 52px;
    min-height: 52px;
  }

  body[data-active-game="uski"] .mobile-action-bank {
    grid-template-columns: repeat(3, minmax(58px, 76px));
    width: auto;
  }

  body[data-active-game="zippa"] .mobile-controls.is-visible {
    width: min(52vw, 430px);
    max-height: 74px;
  }

  body[data-active-game="zippa"] .mobile-action-bank {
    grid-template-columns: repeat(4, minmax(58px, 1fr)) !important;
  }

  body[data-active-game="zippa"] .mobile-action-button {
    min-height: 54px;
  }

  body[data-active-game="gauntlet-blitz"] .embedded-stage,
  body[data-active-game="wordventure"] .embedded-stage {
    display: block;
  }

  body[data-active-game="gauntlet-blitz"] .mobile-controls.is-visible,
  body[data-active-game="wordventure"] .mobile-controls.is-visible {
    grid-template-columns: minmax(150px, auto) minmax(280px, 52vw);
    background: rgba(3, 7, 13, 0.48);
  }

  body[data-active-game="gauntlet-blitz"] .mobile-control-pad {
    grid-template-columns: repeat(3, 38px) !important;
    grid-template-rows: repeat(2, 38px) !important;
    gap: 4px;
    padding: 3px;
  }

  body[data-active-game="gauntlet-blitz"] .mobile-pad-button {
    min-width: 38px;
    min-height: 38px;
  }

  body[data-active-game="gauntlet-blitz"] .mobile-action-button {
    min-height: 48px;
  }
}

@media (hover: none), (pointer: coarse) {
  body.is-game-fullscreen[data-active-game="bubblebat"] .mobile-controls.is-visible,
  body.is-game-fullscreen[data-active-game="gauntlet-blitz"] .mobile-controls.is-visible,
  body.is-game-fullscreen[data-active-game="wordventure"] .mobile-controls.is-visible {
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.is-game-fullscreen[data-active-game="bubblebat"] .mobile-control-pad,
  body.is-game-fullscreen[data-active-game="bubblebat"] .mobile-pad-button,
  body.is-game-fullscreen[data-active-game="bubblebat"] .mobile-action-button,
  body.is-game-fullscreen[data-active-game="gauntlet-blitz"] .mobile-action-button,
  body.is-game-fullscreen[data-active-game="wordventure"] .mobile-control-pad,
  body.is-game-fullscreen[data-active-game="wordventure"] .mobile-pad-button,
  body.is-game-fullscreen[data-active-game="wordventure"] .mobile-action-button {
    background-color: rgba(3, 10, 18, 0.18);
    box-shadow: none;
    opacity: 0.72;
  }

  body[data-active-game="gauntlet-blitz"] .embedded-topline {
    right: max(8px, env(safe-area-inset-right));
    left: auto;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    gap: 5px;
  }

  body[data-active-game="gauntlet-blitz"] .exit-home,
  body[data-active-game="gauntlet-blitz"] .fullscreen-toggle,
  body[data-active-game="gauntlet-blitz"] .purchase-open {
    min-height: 34px;
    height: 34px;
    margin: 0;
  }

  body[data-active-game="gauntlet-blitz"] .fullscreen-toggle {
    width: 34px;
    min-width: 34px;
    flex-basis: 34px;
  }

  body[data-active-game="gauntlet-blitz"] .mobile-controls.is-visible {
    grid-template-columns: minmax(180px, 26vw) minmax(330px, 58vw);
    gap: clamp(14px, 3vw, 36px);
    max-height: 88px;
  }
}

@media (orientation: portrait) and (hover: none),
  (orientation: portrait) and (pointer: coarse) {
  body.is-game-fullscreen:not([data-active-game="uski"]) .embedded-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    inset: auto;
    width: 100svh;
    height: 100svw;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
  }
}

@media (hover: none), (pointer: coarse) {
  body.is-player-open:not(.is-game-fullscreen):not([data-active-game="match-race"]):not([data-active-game="bytefall-protocol-demo"]):not([data-active-game="offset"]) .embedded-game-view {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    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: auto;
    background:
      radial-gradient(circle at 16% 20%, rgba(255, 76, 168, 0.12), transparent 30%),
      radial-gradient(circle at 78% 8%, rgba(77, 242, 255, 0.12), transparent 26%),
      #03050a;
  }

  body.is-player-open:not(.is-game-fullscreen):not([data-active-game="match-race"]):not([data-active-game="bytefall-protocol-demo"]):not([data-active-game="offset"]) .embedded-topline {
    position: relative;
    inset: auto;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    pointer-events: auto;
  }

  body.is-player-open:not(.is-game-fullscreen):not([data-active-game="match-race"]):not([data-active-game="bytefall-protocol-demo"]):not([data-active-game="offset"]) .now-playing {
    display: grid !important;
    margin-left: auto;
    max-width: min(34vw, 180px);
  }

  body.is-player-open:not(.is-game-fullscreen):not([data-active-game="match-race"]):not([data-active-game="bytefall-protocol-demo"]):not([data-active-game="offset"]) .embedded-game-logo {
    width: min(34vw, 180px);
    max-height: 54px;
  }

  body.is-player-open:not(.is-game-fullscreen):not([data-active-game="match-race"]):not([data-active-game="bytefall-protocol-demo"]):not([data-active-game="offset"]) .embedded-stage {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    align-self: center;
    justify-self: center;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 10px;
    width: min(1040px, 100%) !important;
    height: auto !important;
    min-height: 0;
    max-height: none;
    padding: 10px !important;
    overflow: visible;
    border: 1px solid rgba(77, 242, 255, 0.42);
    border-radius: 7px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
      rgba(3, 8, 14, 0.92);
    box-shadow:
      inset 0 0 32px rgba(77, 242, 255, 0.06),
      0 16px 38px rgba(0, 0, 0, 0.48);
    transform: none !important;
  }

  body.is-player-open:not(.is-game-fullscreen):not([data-active-game="match-race"]):not([data-active-game="bytefall-protocol-demo"]):not([data-active-game="offset"]) .embedded-canvas,
  body.is-player-open:not(.is-game-fullscreen):not([data-active-game="match-race"]):not([data-active-game="bytefall-protocol-demo"]):not([data-active-game="offset"]) .embedded-frame {
    position: relative !important;
    inset: auto !important;
    grid-row: 1;
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    max-width: 100% !important;
    max-height: calc(100dvh - 230px) !important;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 5px;
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.62);
    transform: none !important;
  }

  body.is-player-open:not(.is-game-fullscreen)[data-active-game="uski"] .embedded-canvas.is-portrait-canvas {
    justify-self: center;
    width: auto !important;
    height: min(62dvh, 620px) !important;
    max-width: 100% !important;
  }

  body.is-player-open:not(.is-game-fullscreen):not([data-active-game="match-race"]):not([data-active-game="bytefall-protocol-demo"]):not([data-active-game="offset"]) .mobile-controls.is-visible {
    position: relative !important;
    inset: auto !important;
    grid-row: 2;
    display: grid;
    width: 100% !important;
    max-width: 620px !important;
    min-height: 0;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 8px 6px 4px;
    border: 0;
    border-top: 1px solid rgba(77, 242, 255, 0.25);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none !important;
    pointer-events: none;
  }
}

/* Keep off-screen cassettes out of the paint pipeline while preserving rack size. */
.game-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

@media (hover: none), (pointer: coarse) {
  html {
    scroll-behavior: auto;
  }

  /* BubbleBat and Plash retain the framed portrait player shown in the mobile design. */
  body.is-player-open:not(.is-game-fullscreen)[data-active-game="bubblebat"] .embedded-stage,
  body.is-player-open:not(.is-game-fullscreen)[data-active-game="plash"] .embedded-stage {
    width: min(100%, 720px) !important;
    grid-template-rows: auto auto !important;
  }

  /* Restore Match Race's dedicated mobile player after the shared fullscreen layer. */
  body[data-active-game="match-race"] .embedded-game-view {
    display: grid;
    grid-template-rows: 1fr;
    gap: 0;
    min-height: 100svh;
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    overflow: hidden;
  }

  body[data-active-game="match-race"] .embedded-stage {
    position: relative;
    inset: auto;
    align-self: center;
    justify-self: center;
    width: min(calc(100svw - 16px), 177.78svh);
    height: auto;
    max-width: none;
    max-height: calc(100svh - 16px);
    aspect-ratio: 16 / 9;
    gap: 0;
    padding: 34px 6px 6px;
    border: 2px solid rgba(247, 242, 232, 0.78);
    border-radius: 8px;
    transform: none;
  }

  body[data-active-game="match-race"] .embedded-frame {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: none;
    aspect-ratio: auto;
    transform: none;
  }

  /* Stack Wordventure's compact store button below Exit Home, clear of the game HUD. */
  body[data-active-game="wordventure"] .embedded-topline {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    justify-content: stretch;
    gap: 4px 8px;
  }

  body[data-active-game="wordventure"] .exit-home {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  body[data-active-game="wordventure"] .purchase-open {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    width: 92px;
    min-height: 27px;
    height: 27px;
    margin: 0;
    padding: 0 6px;
    gap: 4px;
    font-size: 7px;
  }

  body[data-active-game="wordventure"] .purchase-open-icon {
    width: 15px;
    height: 15px;
    font-size: 8px;
  }

  body[data-active-game="wordventure"] .now-playing {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    margin-left: 0;
  }
}

@media (orientation: portrait) and (hover: none),
  (orientation: portrait) and (pointer: coarse) {
  body.is-player-open:not(.is-game-fullscreen)[data-active-game="bubblebat"] .embedded-game-view,
  body.is-player-open:not(.is-game-fullscreen)[data-active-game="plash"] .embedded-game-view {
    grid-template-rows: auto auto 1fr !important;
    align-content: start !important;
  }

  body.is-player-open:not(.is-game-fullscreen)[data-active-game="bubblebat"] .embedded-stage,
  body.is-player-open:not(.is-game-fullscreen)[data-active-game="plash"] .embedded-stage {
    align-self: start !important;
    margin-top: 96px !important;
  }

  body.is-player-open:not(.is-game-fullscreen)[data-active-game="bubblebat"] .mobile-controls.is-visible {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 12px;
  }

  body.is-player-open:not(.is-game-fullscreen)[data-active-game="bubblebat"] .mobile-control-pad {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center;
  }

  body.is-player-open:not(.is-game-fullscreen)[data-active-game="bubblebat"] .mobile-action-bank {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center;
    width: min(100%, 330px);
  }

  body[data-active-game="match-race"] .embedded-game-view,
  body.is-player-open:not(.is-game-fullscreen)[data-active-game="zippa"] #embedded-game-view {
    display: block;
  }

  body[data-active-game="match-race"] .embedded-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(calc(100svh - 16px), 177.78svw);
    height: auto;
    max-height: calc(100svw - 16px);
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
  }

  /* Zippa remains a landscape game even when orientation lock is unavailable. */
  body[data-active-game="zippa"] .embedded-game-view {
    overflow: hidden;
  }

  body.is-player-open:not(.is-game-fullscreen)[data-active-game="zippa"] .embedded-topline {
    position: absolute;
    z-index: 5;
    top: max(8px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    left: max(10px, env(safe-area-inset-left));
    pointer-events: none;
  }

  body.is-player-open:not(.is-game-fullscreen)[data-active-game="zippa"] .exit-home {
    pointer-events: auto;
  }

  body.is-player-open:not(.is-game-fullscreen)[data-active-game="zippa"] .now-playing {
    max-width: 28vw;
  }

  body.is-player-open:not(.is-game-fullscreen)[data-active-game="zippa"] .embedded-game-logo {
    width: clamp(88px, 24vw, 116px);
    max-height: 48px;
  }

  body.is-player-open:not(.is-game-fullscreen)[data-active-game="zippa"] #embedded-game-view .embedded-stage {
    position: absolute !important;
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    width: min(calc(100svh - 16px), 177.78svw) !important;
    height: auto !important;
    max-height: calc(100svw - 16px);
    grid-template-columns: minmax(0, 1fr) minmax(150px, 26svh) !important;
    grid-template-rows: 1fr !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 8px 8px !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    transform-origin: center;
    overflow: hidden;
  }

  body.is-player-open:not(.is-game-fullscreen)[data-active-game="zippa"] #zippa-frame {
    width: 100% !important;
    height: auto !important;
    max-height: calc(100svw - 72px) !important;
  }

  body.is-player-open:not(.is-game-fullscreen)[data-active-game="zippa"] #embedded-game-view .mobile-controls.is-visible {
    grid-template-columns: 1fr;
    gap: 8px;
    width: min(190px, 28svh) !important;
    max-width: 190px !important;
  }

  body.is-player-open:not(.is-game-fullscreen)[data-active-game="zippa"] #embedded-game-view .mobile-action-bank {
    width: 100%;
    grid-template-columns: repeat(2, minmax(64px, 1fr)) !important;
  }

  body.is-player-open:not(.is-game-fullscreen)[data-active-game="zippa"] #embedded-game-view .mobile-action-button {
    min-height: 46px;
  }
}

/* Final phone-player overrides. These must remain after the legacy mobile rules. */
@media (hover: none), (pointer: coarse) {
  body.is-game-fullscreen[data-active-game="uski"] .mobile-controls.is-visible {
    right: max(5px, env(safe-area-inset-right)) !important;
    bottom: max(5px, env(safe-area-inset-bottom)) !important;
    left: max(5px, env(safe-area-inset-left)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
    gap: 6px !important;
    width: auto !important;
    max-width: none !important;
    padding: 5px !important;
    overflow: hidden;
  }

  body.is-game-fullscreen[data-active-game="uski"] .mobile-control-pad {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.is-game-fullscreen[data-active-game="uski"] .mobile-action-bank {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.is-game-fullscreen[data-active-game="uski"] .mobile-pad-button,
  body.is-game-fullscreen[data-active-game="uski"] .mobile-action-button {
    width: 100% !important;
    height: clamp(50px, 13vw, 62px) !important;
    min-width: 0 !important;
    min-height: clamp(50px, 13vw, 62px) !important;
    aspect-ratio: auto !important;
    padding: 5px 3px !important;
  }

  body[data-active-game="wordventure"] .mobile-action-button,
  body[data-active-game="wordventure"] .mobile-action-button span,
  body[data-active-game="wordventure"] .mobile-action-button[data-mobile-key="KeyT"] {
    font-family: "Segoe Print", "Comic Sans MS", Arial, sans-serif !important;
    font-weight: 800 !important;
  }
}

@media (orientation: landscape) and (hover: none),
  (orientation: landscape) and (pointer: coarse) {
  body[data-active-game="zippa"] .mobile-controls.is-visible,
  body.is-game-fullscreen[data-active-game="zippa"] .mobile-controls.is-visible {
    position: absolute !important;
    z-index: 100 !important;
    top: 50% !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    left: auto !important;
    grid-template-columns: 1fr !important;
    width: min(224px, 29vw) !important;
    max-width: 224px !important;
    max-height: none !important;
    transform: translateY(-50%) !important;
  }

  body[data-active-game="zippa"] .mobile-action-bank {
    grid-template-columns: repeat(2, minmax(64px, 1fr)) !important;
    width: 100% !important;
  }
}

.recovery-coin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  margin: 10px auto 0;
  padding: 7px 13px;
  border: 1px solid rgba(255, 207, 80, 0.42);
  border-radius: 4px;
  color: rgba(255, 236, 174, 0.88);
  background: rgba(31, 24, 8, 0.48);
  box-shadow: inset 0 0 12px rgba(255, 198, 54, 0.08);
  font: 700 9px/1 "IBM Plex Mono", "Courier New", monospace;
  text-transform: uppercase;
  cursor: pointer;
}

.recovery-coin-button:hover,
.recovery-coin-button:focus-visible {
  border-color: rgba(255, 220, 112, 0.82);
  color: #fff1bd;
  background: rgba(55, 39, 7, 0.66);
}

.recovery-coin-button .coin-icon {
  width: 16px;
  height: 16px;
}

@media (hover: hover) and (pointer: fine) {
  body.is-player-open[data-active-game="gauntlet-blitz"] #gauntlet-blitz-frame,
  body.is-player-open[data-active-game="wordventure"] #wordventure-frame {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (hover: none), (pointer: coarse) {
  body[data-active-game="wordventure"] .mobile-pad-button,
  body[data-active-game="wordventure"] .mobile-action-button,
  body[data-active-game="wordventure"] .mobile-action-button span {
    font-family: Arial, sans-serif !important;
  }

  .recovery-coin-button {
    flex: 0 0 auto;
    min-height: 38px;
    margin-top: 8px;
    padding: 8px 14px;
    font-size: 10px;
  }
}

@media (orientation: landscape) and (hover: none),
  (orientation: landscape) and (pointer: coarse) {
  body[data-active-game="bubblebat"] .mobile-action-bank {
    grid-template-columns: repeat(3, minmax(68px, 1fr)) !important;
  }

  body[data-active-game="bubblebat"] .mobile-action-button[data-mobile-key="ArrowUp"] {
    order: 0;
  }

  body[data-active-game="bubblebat"] .mobile-action-button[data-mobile-key="Space"] {
    order: 1;
  }

  body[data-active-game="bubblebat"] .mobile-action-button[data-mobile-key="Enter"] {
    order: 2;
  }

  body.is-game-fullscreen[data-active-game="bubblebat"] .mobile-controls.is-visible {
    right: max(12px, env(safe-area-inset-right));
    left: max(12px, env(safe-area-inset-left));
    grid-template-columns: auto minmax(192px, 234px) !important;
    gap: clamp(12px, 3vw, 36px);
    overflow: visible;
  }

  body.is-game-fullscreen[data-active-game="bubblebat"] .mobile-action-bank {
    width: min(234px, 40vw);
    grid-template-columns: repeat(3, minmax(54px, 1fr)) !important;
    gap: 6px;
    padding-right: 2px;
  }

  body.is-game-fullscreen[data-active-game="bubblebat"] .mobile-action-button {
    width: 100%;
    min-width: 0;
    min-height: 50px;
  }
}

body.is-game-fullscreen[data-active-game="bubblebat"] .embedded-game-logo {
  display: none !important;
}

@media (hover: none), (pointer: coarse) {
  body[data-active-game="sticker-hex"] .mobile-controls.is-visible {
    right: auto;
    bottom: max(4px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    width: min(160px, 42vw);
    max-width: 160px;
    height: 42px;
    max-height: 42px;
    padding: 0;
  }

  body[data-active-game="sticker-hex"] .mobile-action-button {
    min-height: 42px;
    height: 42px;
  }

  body[data-active-game="wordventure"] .mobile-action-button[data-mobile-icon] {
    display: grid;
    place-items: center;
    padding: 4px;
  }

  body[data-active-game="wordventure"] .mobile-action-button[data-mobile-icon]::before {
    width: clamp(32px, 8.5vh, 42px);
    height: clamp(32px, 8.5vh, 42px);
    filter:
      drop-shadow(2px 3px 0 rgba(45, 33, 24, 0.7))
      drop-shadow(0 0 4px rgba(255, 248, 232, 0.22));
  }

  body[data-active-game="wordventure"] .mobile-action-button[data-mobile-icon="word-kick"]::before {
    background: url("assets/wordventure-mobile-actions.png?v=1") 50% 50% / 300% 100% no-repeat;
  }

  body[data-active-game="wordventure"] .mobile-action-button[data-mobile-icon="word-punch"]::before {
    background: url("assets/wordventure-mobile-actions.png?v=1") 0 50% / 300% 100% no-repeat;
  }

  body[data-active-game="wordventure"] .mobile-action-button[data-mobile-icon="word-jump"]::before {
    background: url("assets/wordventure-mobile-actions.png?v=1") 100% 50% / 300% 100% no-repeat;
  }

  body[data-active-game="wordventure"] .mobile-action-button[data-mobile-icon="word-slow"]::before {
    border: 4px solid #33291f;
    border-radius: 50%;
    background:
      linear-gradient(90deg, transparent 45%, #33291f 46% 54%, transparent 55%) center 24% / 50% 44% no-repeat,
      linear-gradient(35deg, transparent 46%, #33291f 47% 54%, transparent 55%) 62% 59% / 48% 48% no-repeat,
      radial-gradient(circle, #c9b4f2 0 62%, #fdfaf1 63% 74%, #33291f 75% 100%);
    box-sizing: border-box;
  }

  body[data-active-game="wordventure"] .mobile-action-button[data-mobile-icon="word-notebook"]::before {
    border: 3px solid #33291f;
    border-radius: 3px;
    background:
      linear-gradient(90deg, transparent 0 20%, #ef7979 21% 25%, transparent 26%),
      repeating-linear-gradient(180deg, #fdfaf1 0 7px, #9fc8ef 8px 9px);
    box-sizing: border-box;
    transform: rotate(-3deg);
  }
}

@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  body.is-player-open[data-active-game="gauntlet-blitz"] .embedded-game-view {
    display: block;
    padding: 0;
    overflow: hidden;
  }

  body.is-player-open[data-active-game="gauntlet-blitz"] .embedded-topline {
    position: fixed;
    z-index: 50;
    top: 20px;
    right: 24px;
    left: 24px;
    width: auto;
    pointer-events: none;
  }

  body.is-player-open[data-active-game="gauntlet-blitz"] .exit-home {
    pointer-events: auto;
  }

  body.is-player-open[data-active-game="gauntlet-blitz"] .embedded-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(1280px, calc(100vw - 48px));
    height: min(806px, calc(100vh - 28px));
    max-width: none;
    max-height: none;
    padding: 0;
    gap: 0;
    border: 0;
    transform: translate(-50%, -50%);
  }

  body.is-player-open[data-active-game="gauntlet-blitz"] #gauntlet-blitz-frame {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    border: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  body.is-player-open[data-active-game="desktop-demolition"] .embedded-game-view {
    display: block;
    padding: 0;
    overflow: hidden;
  }

  body.is-player-open[data-active-game="desktop-demolition"] .embedded-topline {
    position: fixed;
    z-index: 50;
    top: 6px;
    right: auto;
    left: 6px;
    width: auto;
    pointer-events: none;
  }

  body.is-player-open[data-active-game="desktop-demolition"] .exit-home {
    min-height: 26px;
    height: 26px;
    padding: 0 7px;
    gap: 0;
    border-radius: 4px;
    font-size: 0;
    opacity: 0.72;
    pointer-events: auto;
  }

  body.is-player-open[data-active-game="desktop-demolition"] .exit-home .icon-stop {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
  }

  body.is-player-open[data-active-game="desktop-demolition"] .exit-home span:last-child {
    display: none;
  }

  body.is-player-open[data-active-game="desktop-demolition"] .embedded-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: min(1500px, calc(100vw - 32px));
    height: min(940px, calc(100vh - 28px));
    max-width: none;
    max-height: none;
    padding: 8px;
    overflow: hidden;
    transform: translate(-50%, -50%);
  }

  body.is-player-open[data-active-game="desktop-demolition"] #desktop-demolition-frame {
    display: block !important;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
  }
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
  body[data-active-game="desktop-demolition"] .now-playing {
    top: max(6px, env(safe-area-inset-top));
    right: max(6px, env(safe-area-inset-right));
    max-width: 90px;
  }

  body[data-active-game="desktop-demolition"] .embedded-game-logo {
    width: 76px;
    max-height: 28px;
    opacity: .4;
  }

  body.is-player-open[data-active-game="desktop-demolition"] .embedded-topline {
    padding-left: 0;
  }

  body.is-game-fullscreen[data-active-game="desktop-demolition"] .embedded-topline {
    padding-left: 0;
  }
}

/* Final Ink Gremlin mobile player overrides; keep after the universal phone rules. */
@media (min-width: 0px) {
  body[data-active-game="ink-gremlin"][data-active-game-mode="mobile"].is-player-open .embedded-game-view,
  body[data-active-game="ink-gremlin"][data-active-game-mode="mobile"].is-player-open .embedded-game-view:fullscreen,
  body[data-active-game="ink-gremlin"][data-active-game-mode="mobile"].is-player-open .embedded-game-view:-webkit-full-screen {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
    background: #ede3c7;
  }

  body[data-active-game="ink-gremlin"][data-active-game-mode="mobile"].is-player-open .embedded-topline {
    position: fixed;
    z-index: 2147483647;
    top: max(4px, env(safe-area-inset-top));
    right: max(5px, env(safe-area-inset-right));
    left: max(5px, env(safe-area-inset-left));
    align-items: center;
    justify-content: space-between;
    width: auto;
    min-height: 38px;
    pointer-events: none;
  }

  body[data-active-game="ink-gremlin"][data-active-game-mode="mobile"].is-player-open .exit-home,
  body[data-active-game="ink-gremlin"][data-active-game-mode="mobile"].is-player-open .fullscreen-toggle {
    opacity: 0.72;
    pointer-events: auto;
  }

  body[data-active-game="drizzlewick"][data-active-game-mode="mobile"].is-player-open .embedded-topline {
    position: fixed;
    z-index: 2147483647;
    top: max(6px, env(safe-area-inset-top));
    right: auto;
    left: max(6px, env(safe-area-inset-left));
    width: auto;
    pointer-events: none;
  }

  body[data-active-game="drizzlewick"][data-active-game-mode="mobile"].is-player-open .exit-home {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 0.68;
    min-height: 38px;
    pointer-events: auto;
    background: rgba(5, 8, 19, 0.76);
    -webkit-tap-highlight-color: transparent;
  }

  body[data-active-game="drizzlewick"][data-active-game-mode="mobile"] .fullscreen-toggle,
  body[data-active-game="drizzlewick"][data-active-game-mode="mobile"] .now-playing {
    display: none !important;
  }

  body[data-active-game="drizzlewick"][data-active-game-mode="mobile"].is-player-open .embedded-stage {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #111827;
    box-shadow: none;
  }

  body[data-active-game="drizzlewick"][data-active-game-mode="mobile"] #drizzlewick-frame {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    max-height: none !important;
    aspect-ratio: auto !important;
    border: 0;
    border-radius: 0;
    background: #111827;
  }

  body[data-active-game="ink-gremlin"][data-active-game-mode="mobile"] .now-playing {
    display: grid;
    max-width: 48vw;
    margin-left: auto;
    gap: 2px;
  }

  body[data-active-game="ink-gremlin"][data-active-game-mode="mobile"] .now-playing::before {
    content: "THE LOST GAMES / SHELF II";
    color: rgba(77, 242, 255, 0.8);
    font: 700 8px / 1.2 var(--font-pixel);
    letter-spacing: 0.12em;
  }

  body[data-active-game="ink-gremlin"][data-active-game-mode="mobile"] #embedded-game-title {
    display: none !important;
  }

  body[data-active-game="ink-gremlin"][data-active-game-mode="mobile"] .embedded-game-logo {
    width: clamp(104px, 28vw, 168px);
    max-width: 48vw;
    max-height: 46px;
    object-position: right center;
  }

  body[data-active-game="ink-gremlin"][data-active-game-mode="mobile"].is-player-open .embedded-stage {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #ede3c7;
    box-shadow: none;
  }

  body[data-active-game="ink-gremlin"][data-active-game-mode="mobile"] #ink-gremlin-frame {
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    max-height: none !important;
    aspect-ratio: auto !important;
    border: 0;
    border-radius: 0;
    background: #ede3c7;
  }

}

/* Portrait-held phones get a measured, forced landscape player even when orientation locking is unavailable. */
body.game-force-landscape.is-player-open .embedded-game-view,
body.game-force-landscape.is-player-open .embedded-game-view:fullscreen,
body.game-force-landscape.is-player-open .embedded-game-view:-webkit-full-screen {
  position: fixed !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  width: var(--game-landscape-width, 100dvh) !important;
  height: var(--game-landscape-height, 100dvw) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  transform-origin: center !important;
}

/* Current content, Desktop Demolition-era mobile framing. */
.case-flip-button {
  background:
    linear-gradient(135deg, rgba(116, 72, 142, 0.2), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18)),
    #050409;
}

.case-jewel-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(203, 182, 225, 0.48);
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 8%, transparent 9% 92%, rgba(255, 255, 255, 0.08) 93%),
    linear-gradient(180deg, rgba(93, 52, 111, 0.44), rgba(3, 3, 7, 0.92));
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.68),
    inset 0 0 9px rgba(166, 98, 193, 0.22),
    0 0 8px rgba(156, 86, 186, 0.2);
}

.case-jewel-art::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #08070c 0 17%, rgba(216, 202, 222, 0.92) 18% 22%, #17121d 23% 31%, transparent 32%),
    conic-gradient(from 18deg, #b873c9, #ff9b69 17%, #e5b27b 31%, #b77fc5 48%, #e68098 63%, #8474d1 78%, #c489cc 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    inset 4px -3px 7px rgba(35, 5, 52, 0.34),
    0 0 7px rgba(217, 135, 210, 0.3);
}

.case-jewel-art::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 1px;
  background:
    linear-gradient(118deg, transparent 0 34%, rgba(255, 255, 255, 0.22) 38%, transparent 43%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 12% 88%, rgba(255, 255, 255, 0.1));
  pointer-events: none;
}

@media (max-width: 760px) {
  body:not(.is-player-open) .shelf-selector {
    justify-content: center;
    gap: 8px 18px;
    margin: 0 0 12px;
  }

  body:not(.is-player-open) .shelf-selector-link {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 10px;
    line-height: 17px;
  }

  body:not(.is-player-open) .shelf-selector-link:hover,
  body:not(.is-player-open) .shelf-selector-link:focus-visible,
  body:not(.is-player-open) .shelf-selector-link[aria-current="page"] {
    border: 0;
    background: transparent;
  }

  body:not(.is-player-open) .shelf-selector-link[aria-current="page"]::before {
    content: none;
  }

  .case-jewel-art {
    width: 27px;
    height: 27px;
  }
}

@media (max-width: 360px) {
  .case-jewel-art {
    width: 25px;
    height: 25px;
  }
}

/* Feral Blob-inspired email companion, rebuilt as a Lost Games recovery sprite. */
.recovery-email-form {
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
}

.recovery-email-fields {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.recovery-signal-mascot {
  --mascot-gaze-x: 0px;
  --mascot-gaze-y: 0px;
  position: relative;
  z-index: 1;
  width: 112px;
  height: 126px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  justify-self: center;
  align-self: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.42));
}

.recovery-signal-mascot:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
  border-radius: 44%;
}

.recovery-mascot-shadow {
  position: absolute;
  right: 17px;
  bottom: 2px;
  left: 17px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.68);
  box-shadow: 0 0 15px rgba(77, 242, 255, 0.28);
  transform: scaleX(1);
  transition: transform 180ms ease, opacity 180ms ease;
}

.recovery-mascot-body {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 9px;
  box-sizing: border-box;
  width: 94px;
  height: 102px;
  overflow: visible;
  border: 2px solid rgba(77, 242, 255, 0.9);
  border-radius: 46% 54% 49% 51% / 39% 41% 59% 61%;
  background:
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(0, 0, 0, 0.12) 5px 6px),
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.82) 0 3%, transparent 4%),
    radial-gradient(circle at 32% 22%, rgba(77, 242, 255, 0.5), transparent 28%),
    linear-gradient(148deg, #4df2ff 0 18%, #6b61df 46%, #ff4ca8 78%, #8d255f 100%);
  box-shadow:
    inset 0 -12px 18px rgba(11, 1, 29, 0.34),
    inset 0 0 0 3px rgba(0, 0, 0, 0.18),
    0 0 0 2px rgba(255, 76, 168, 0.24),
    0 0 18px rgba(77, 242, 255, 0.35),
    0 0 26px rgba(255, 76, 168, 0.16);
  transform-origin: 50% 92%;
  animation: recovery-mascot-idle 3.8s ease-in-out infinite;
  transition: filter 180ms ease, background 180ms ease;
}

.recovery-mascot-glint {
  position: absolute;
  top: 11px;
  left: 15px;
  width: 19px;
  height: 8px;
  border-radius: 50%;
  border-top: 3px solid rgba(255, 255, 255, 0.62);
  transform: rotate(-24deg);
  opacity: 0.75;
}

.recovery-mascot-antenna {
  position: absolute;
  z-index: -1;
  top: -18px;
  left: 48%;
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: linear-gradient(#ff4ca8, #4df2ff);
  box-shadow: 0 0 7px rgba(77, 242, 255, 0.7);
  transform: rotate(7deg);
  transform-origin: 50% 100%;
}

.recovery-mascot-antenna i {
  position: absolute;
  top: -6px;
  left: -4px;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: #ff4ca8;
  box-shadow: 0 0 9px #ff4ca8, 0 0 15px rgba(77, 242, 255, 0.64);
}

.recovery-mascot-arm {
  position: absolute;
  z-index: 1;
  top: 69px;
  width: 25px;
  height: 14px;
  border: 2px solid rgba(77, 242, 255, 0.72);
  background: linear-gradient(135deg, #6675eb, #db3d9b);
  box-shadow: inset 0 -4px 7px rgba(26, 2, 45, 0.28), 0 0 8px rgba(77, 242, 255, 0.2);
  transition: transform 180ms ease;
}

.recovery-mascot-arm-left {
  left: 0;
  border-radius: 80% 24% 56% 54%;
  transform: rotate(15deg);
  transform-origin: 100% 50%;
}

.recovery-mascot-arm-right {
  right: 0;
  border-radius: 24% 80% 54% 56%;
  transform: rotate(-15deg);
  transform-origin: 0 50%;
}

.recovery-mascot-screen {
  position: absolute;
  z-index: 3;
  top: 31px;
  left: 14px;
  box-sizing: border-box;
  width: 66px;
  height: 39px;
  overflow: hidden;
  border: 2px solid rgba(5, 8, 18, 0.86);
  border-radius: 7px 7px 10px 10px;
  background:
    repeating-linear-gradient(180deg, rgba(77, 242, 255, 0.035) 0 2px, transparent 2px 4px),
    radial-gradient(circle at 50% 48%, rgba(77, 242, 255, 0.12), transparent 72%),
    #030710;
  box-shadow:
    inset 0 0 9px rgba(77, 242, 255, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 8px rgba(2, 8, 14, 0.52);
}

.recovery-mascot-eye {
  position: absolute;
  top: 10px;
  width: 14px;
  height: 12px;
  border: 1px solid rgba(155, 255, 117, 0.52);
  border-radius: 46%;
  background: rgba(77, 242, 255, 0.14);
  box-shadow: inset 0 0 6px rgba(77, 242, 255, 0.2);
  transition: height 140ms ease, border-radius 140ms ease, transform 140ms ease;
}

.recovery-mascot-eye-left {
  left: 10px;
}

.recovery-mascot-eye-right {
  right: 10px;
}

.recovery-mascot-eye i {
  position: absolute;
  top: 3px;
  left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: #9bff75;
  box-shadow: 0 0 6px rgba(155, 255, 117, 0.9);
  transform: translate(var(--mascot-gaze-x), var(--mascot-gaze-y));
  transition: transform 90ms ease, background 140ms ease;
}

.recovery-mascot-mouth {
  position: absolute;
  top: 27px;
  left: 27px;
  width: 9px;
  height: 3px;
  border-radius: 1px;
  background: #9bff75;
  box-shadow: 0 0 5px rgba(155, 255, 117, 0.72);
  transition: width 140ms ease, height 140ms ease, border-radius 140ms ease, transform 140ms ease;
}

.recovery-mascot-scan {
  position: absolute;
  right: 0;
  left: 0;
  top: -4px;
  height: 3px;
  background: rgba(77, 242, 255, 0.74);
  box-shadow: 0 0 6px rgba(77, 242, 255, 0.74);
  opacity: 0;
}

.recovery-mascot-tape {
  position: absolute;
  z-index: 3;
  top: 77px;
  left: 24px;
  box-sizing: border-box;
  width: 46px;
  height: 17px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px 4px 6px 6px;
  background: rgba(2, 4, 10, 0.52);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5), 0 0 5px rgba(255, 76, 168, 0.2);
}

.recovery-mascot-tape i,
.recovery-mascot-tape b {
  position: absolute;
  top: 4px;
  width: 7px;
  height: 7px;
  border: 2px dotted rgba(247, 242, 232, 0.84);
  border-radius: 50%;
}

.recovery-mascot-tape i {
  left: 6px;
}

.recovery-mascot-tape b {
  right: 6px;
}

.recovery-mascot-tape em {
  position: absolute;
  top: 7px;
  right: 15px;
  left: 15px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, #ffb443, #ff4ca8, #4df2ff);
}

.recovery-mascot-callout {
  position: absolute;
  z-index: 5;
  top: 0;
  right: -1px;
  min-width: 24px;
  padding: 4px 5px 3px;
  border: 1px solid rgba(155, 255, 117, 0.66);
  border-radius: 4px 4px 4px 1px;
  color: #9bff75;
  background: rgba(2, 9, 13, 0.94);
  box-shadow: 0 0 8px rgba(155, 255, 117, 0.18);
  font: 900 8px/1 var(--font-pixel);
  text-align: center;
  transition: color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.recovery-mascot-callout::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-right: 1px solid rgba(155, 255, 117, 0.66);
  border-bottom: 1px solid rgba(155, 255, 117, 0.66);
  background: rgba(2, 9, 13, 0.94);
  transform: rotate(45deg);
}

.recovery-signal-mascot[data-mood="watch"] .recovery-mascot-body {
  animation-duration: 2.5s;
}

.recovery-signal-mascot[data-mood="typing"] .recovery-mascot-body {
  animation: recovery-mascot-typing 360ms steps(2, end) infinite;
}

.recovery-signal-mascot[data-mood="typing"] .recovery-mascot-mouth {
  width: 8px;
  height: 7px;
  border-radius: 45%;
  transform: translateX(1px);
}

.recovery-signal-mascot[data-mood="typing"] .recovery-mascot-tape i,
.recovery-signal-mascot[data-mood="typing"] .recovery-mascot-tape b,
.recovery-signal-mascot[data-mood="sending"] .recovery-mascot-tape i,
.recovery-signal-mascot[data-mood="sending"] .recovery-mascot-tape b {
  animation: recovery-mascot-reel 500ms linear infinite;
}

.recovery-signal-mascot[data-mood="sending"] .recovery-mascot-body {
  filter: saturate(1.22) brightness(1.08);
  animation: recovery-mascot-transmit 720ms ease-in-out infinite;
}

.recovery-signal-mascot[data-mood="sending"] .recovery-mascot-scan {
  opacity: 1;
  animation: recovery-mascot-scan 850ms linear infinite;
}

.recovery-signal-mascot[data-mood="sending"] .recovery-mascot-antenna i {
  animation: recovery-mascot-beacon 480ms steps(2, end) infinite;
}

.recovery-signal-mascot[data-mood="happy"] .recovery-mascot-body {
  animation: recovery-mascot-happy 800ms cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}

.recovery-signal-mascot[data-mood="happy"] .recovery-mascot-eye {
  height: 6px;
  border-color: #9bff75;
  border-radius: 50% 50% 10% 10%;
  transform: translateY(3px);
}

.recovery-signal-mascot[data-mood="happy"] .recovery-mascot-eye i {
  opacity: 0;
}

.recovery-signal-mascot[data-mood="happy"] .recovery-mascot-mouth {
  top: 24px;
  width: 12px;
  height: 8px;
  border-radius: 2px 2px 8px 8px;
  transform: translateX(-2px);
}

.recovery-signal-mascot[data-mood="happy"] .recovery-mascot-arm-left {
  transform: translateY(-8px) rotate(-24deg);
}

.recovery-signal-mascot[data-mood="happy"] .recovery-mascot-arm-right {
  transform: translateY(-8px) rotate(24deg);
}

.recovery-signal-mascot[data-mood="glitch"] .recovery-mascot-body {
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0 3px, transparent 3px 7px),
    linear-gradient(148deg, #ff5151, #ff4ca8 45%, #5530a8 100%);
  animation: recovery-mascot-glitch 520ms steps(2, end) 2;
}

.recovery-signal-mascot[data-mood="glitch"] .recovery-mascot-eye {
  height: 4px;
  border-color: #ff8b8b;
  border-radius: 0;
  transform: translateY(4px) rotate(8deg);
}

.recovery-signal-mascot[data-mood="glitch"] .recovery-mascot-eye-right {
  transform: translateY(4px) rotate(-8deg);
}

.recovery-signal-mascot[data-mood="glitch"] .recovery-mascot-eye i {
  opacity: 0;
}

.recovery-signal-mascot[data-mood="glitch"] .recovery-mascot-mouth {
  width: 13px;
  height: 2px;
  background: #ff8b8b;
  box-shadow: 0 0 5px rgba(255, 81, 81, 0.72);
  transform: translateX(-2px) rotate(-7deg);
}

.recovery-signal-mascot[data-mood="glitch"] .recovery-mascot-callout {
  color: #ff8b8b;
  border-color: rgba(255, 139, 139, 0.72);
}

.recovery-signal-mascot[data-mood="poked"] .recovery-mascot-body {
  animation: recovery-mascot-poked 460ms cubic-bezier(0.2, 0.85, 0.35, 1.35) both;
}

.recovery-signal-mascot[data-mood="poked"] .recovery-mascot-shadow {
  transform: scaleX(1.18);
  opacity: 0.82;
}

.recovery-signal-mascot[data-mood="poked"] .recovery-mascot-eye {
  height: 4px;
  transform: translateY(4px);
}

.recovery-signal-mascot[data-mood="poked"] .recovery-mascot-eye i {
  opacity: 0;
}

.recovery-signal-mascot[data-mood="poked"] .recovery-mascot-callout {
  transform: translateY(-4px) rotate(3deg);
}

@keyframes recovery-mascot-idle {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  48% { transform: translateY(-4px) scale(0.985, 1.02); }
  54% { transform: translateY(-4px) scale(1.012, 0.99); }
}

@keyframes recovery-mascot-typing {
  0%, 100% { transform: translateY(0) rotate(-1deg) scale(1.01, 0.99); }
  50% { transform: translateY(-3px) rotate(1deg) scale(0.99, 1.02); }
}

@keyframes recovery-mascot-transmit {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: inset 0 -12px 18px rgba(11, 1, 29, 0.34), 0 0 18px rgba(77, 242, 255, 0.35); }
  50% { transform: translateY(-2px) scale(1.025, 0.985); box-shadow: inset 0 -12px 18px rgba(11, 1, 29, 0.28), 0 0 28px rgba(77, 242, 255, 0.65), 0 0 32px rgba(255, 76, 168, 0.24); }
}

@keyframes recovery-mascot-scan {
  from { transform: translateY(0); }
  to { transform: translateY(42px); }
}

@keyframes recovery-mascot-beacon {
  0%, 49% { opacity: 1; transform: scale(1); }
  50%, 100% { opacity: 0.38; transform: scale(0.72); }
}

@keyframes recovery-mascot-happy {
  0% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-14px) scale(0.96, 1.06); }
  68% { transform: translateY(2px) scale(1.08, 0.92); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes recovery-mascot-glitch {
  0%, 100% { transform: translate(0, 0) skewX(0); }
  20% { transform: translate(-4px, 1px) skewX(5deg); }
  40% { transform: translate(5px, -1px) skewX(-7deg); }
  60% { transform: translate(-2px, 2px) skewX(3deg); }
  80% { transform: translate(3px, -1px) skewX(-3deg); }
}

@keyframes recovery-mascot-poked {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(6px) scale(1.13, 0.84); }
  70% { transform: translateY(-7px) scale(0.94, 1.08); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes recovery-mascot-reel {
  to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
  .recovery-email-form {
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 8px;
  }

  .recovery-email-fields {
    gap: 10px;
  }

  .recovery-signal-mascot {
    width: 92px;
    height: 112px;
    transform: scale(0.86);
    transform-origin: center;
  }
}

@media (max-width: 360px) {
  .recovery-email-form {
    grid-template-columns: 82px minmax(0, 1fr);
    column-gap: 5px;
  }

  .recovery-signal-mascot {
    transform: scale(0.77);
  }
}

@media (prefers-reduced-motion: reduce) {
  .recovery-mascot-body,
  .recovery-mascot-scan,
  .recovery-mascot-tape i,
  .recovery-mascot-tape b,
  .recovery-mascot-antenna i {
    animation: none !important;
  }
}

/* BubbleBat mobile fullscreen must always retain a reachable exit control. */
@media (hover: none), (pointer: coarse) {
  body.is-game-fullscreen[data-active-game="bubblebat"] .embedded-topline {
    display: flex !important;
    position: fixed !important;
    z-index: 2147483647 !important;
    top: max(7px, env(safe-area-inset-top)) !important;
    right: auto !important;
    bottom: auto !important;
    left: max(7px, env(safe-area-inset-left)) !important;
    width: auto !important;
    pointer-events: none !important;
  }

  body.is-game-fullscreen[data-active-game="bubblebat"] .exit-home {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 0.94 !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    pointer-events: auto !important;
    color: #fff !important;
    border-color: rgba(77, 242, 255, 0.78) !important;
    background: rgba(5, 8, 19, 0.9) !important;
    box-shadow: 0 0 0 1px rgba(255, 76, 168, 0.3), 0 5px 18px rgba(0, 0, 0, 0.58) !important;
    -webkit-tap-highlight-color: transparent;
  }

  body.is-game-fullscreen[data-active-game="bubblebat"] .exit-home span:last-child {
    display: inline !important;
  }

body.is-game-fullscreen[data-active-game="bubblebat"] .fullscreen-toggle,
  body.is-game-fullscreen[data-active-game="bubblebat"] .now-playing {
    display: none !important;
  }
}

/* Keep the three long Shelf I titles comfortably inside the cassette label. */
.game-card[data-game-id="bytefall-protocol-demo"] .label-strip .cassette-title-row h3,
.game-card[data-game-id="gauntlet-blitz"] .label-strip .cassette-title-row h3 {
  font-size: clamp(11px, 1.18vw, 15px);
}

.game-card[data-game-id="wordventure"] .label-strip .cassette-title-row h3 {
  font-size: clamp(13px, 1.55vw, 18px);
}

.game-grid.layout-rack .game-card[data-game-id="bytefall-protocol-demo"] .label-strip .cassette-title-row h3,
.game-grid.layout-rack .game-card[data-game-id="gauntlet-blitz"] .label-strip .cassette-title-row h3,
.game-grid.layout-rack .game-card[data-game-id="wordventure"] .label-strip .cassette-title-row h3 {
  font-size: clamp(10px, 1.05vw, 13px);
}

@media (max-width: 760px) {
  .game-card[data-game-id="bytefall-protocol-demo"] .label-strip .cassette-title-row h3,
  .game-card[data-game-id="gauntlet-blitz"] .label-strip .cassette-title-row h3,
  .game-card[data-game-id="wordventure"] .label-strip .cassette-title-row h3 {
    font-size: clamp(12px, 4.1vw, 16px);
  }
}

/* Fine alignment: a subtle left nudge without changing title or badge sizing. */
.game-card[data-game-id="bytefall-protocol-demo"] .label-strip .cassette-title-row h3 {
  transform: translateX(-8px);
}

.game-card[data-game-id="wordventure"] .label-strip .cassette-title-row h3 {
  transform: translateX(0);
}

@media (max-width: 760px) {
  .game-card[data-game-id="bytefall-protocol-demo"] .label-strip .cassette-title-row h3 {
    transform: translateX(-6px);
  }

.game-card[data-game-id="wordventure"] .label-strip .cassette-title-row h3 {
    transform: translateX(-1px);
  }
}
/* Final Borrowed Shadow mobile fullscreen override. */
@media (hover: none), (pointer: coarse) {
  body.is-player-open[data-active-game="borrowed-shadow"] .embedded-game-view,
  body.is-player-open[data-active-game="borrowed-shadow"] .embedded-game-view:fullscreen,
  body.is-player-open[data-active-game="borrowed-shadow"] .embedded-game-view:-webkit-full-screen {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #090a0c;
  }

  body.is-player-open[data-active-game="borrowed-shadow"] .embedded-topline {
    position: fixed !important;
    z-index: 2147483647 !important;
    top: max(6px, env(safe-area-inset-top)) !important;
    right: auto !important;
    bottom: auto !important;
    left: max(6px, env(safe-area-inset-left)) !important;
    display: flex !important;
    width: auto !important;
    pointer-events: none !important;
  }

  /* On touch this game runs full-bleed, so there is no chrome left to hold the
     corner logo - it could only sit on top of gameplay, over the game's own
     top-right readout. Drop it here; the web build keeps it. */
  body.is-player-open[data-active-game="borrowed-shadow"] .embedded-game-logo {
    display: none !important;
  }

  body.is-player-open[data-active-game="borrowed-shadow"] .exit-home {
    display: inline-flex !important;
    visibility: visible !important;
    min-height: 38px !important;
    opacity: 0.7 !important;
    pointer-events: auto !important;
    background: rgba(7, 9, 12, 0.78) !important;
    -webkit-tap-highlight-color: transparent;
  }

  body.is-player-open[data-active-game="borrowed-shadow"] .fullscreen-toggle,
  body.is-player-open[data-active-game="borrowed-shadow"] .now-playing,
  body.is-player-open[data-active-game="borrowed-shadow"] .embedded-controls,
  body.is-player-open[data-active-game="borrowed-shadow"] .mobile-controls {
    display: none !important;
  }

  body.is-player-open[data-active-game="borrowed-shadow"] .embedded-stage {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #090a0c;
    box-shadow: none !important;
    transform: none !important;
  }

  body.is-player-open[data-active-game="borrowed-shadow"] #borrowed-shadow-frame {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #090a0c;
    box-shadow: none !important;
  }
}

/* --- Multiplayer support badge (Bytefall Protocol) -------------------------
   Two overlapping neon busts drawn from four pseudo-elements, in the same
   asset-free style as .controller-supported-icon so the pair reads as one set.
   The front figure carries a dark navy halo, which is what separates the two
   silhouettes at this size instead of an outline. */

.multiplayer-supported-icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 20px;
  transform: translateY(-1px);
  z-index: 3;
}

/* Back figure - magenta, tucked up and to the right. */
.multiplayer-supported-icon::before,
.multiplayer-supported-icon::after {
  content: "";
  position: absolute;
  right: 0;
  background: linear-gradient(180deg, rgba(255, 138, 199, 0.96), rgba(255, 77, 166, 0.88));
  filter: drop-shadow(0 0 4px rgba(255, 77, 166, 0.6));
}

.multiplayer-supported-icon::before {
  top: 3.5px;
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
}

.multiplayer-supported-icon::after {
  top: 11px;
  width: 10px;
  height: 8px;
  border-radius: 5px 5px 1.5px 1.5px / 6.5px 6.5px 1.5px 1.5px;
}

/* Front figure - cyan, low and to the left, punched out of the magenta one. */
.multiplayer-supported-icon i {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.multiplayer-supported-icon i::before,
.multiplayer-supported-icon i::after {
  content: "";
  position: absolute;
  left: 0;
  background: linear-gradient(180deg, rgba(160, 230, 255, 0.98), rgba(83, 206, 255, 0.92));
  box-shadow: 0 0 0 1.5px rgba(9, 9, 26, 0.96);
  filter: drop-shadow(0 0 4px rgba(83, 206, 255, 0.72));
}

.multiplayer-supported-icon i::before {
  top: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.multiplayer-supported-icon i::after {
  top: 12.5px;
  width: 11px;
  height: 6.5px;
  border-radius: 5.5px 5.5px 1.5px 1.5px / 6px 6px 1.5px 1.5px;
}

/* Bytefall's genre lane is the tightest on the shelf, so the badge pair gets a
   tighter gap and a slightly smaller genre label to stay on one line. */
.game-card[data-game-id="bytefall-protocol-demo"] .genre-with-controller {
  gap: 6px;
}

.game-card[data-game-id="bytefall-protocol-demo"] .genre-with-controller > span[data-i18n] {
  font-size: 11px;
}

.game-card[data-game-id="bytefall-protocol-demo"] .controller-supported-icon + .multiplayer-supported-icon {
  margin-left: -1px;
}

@media (max-width: 760px) {
  .genre-with-controller .multiplayer-supported-icon {
    transform: translateY(-1px) scale(.84);
    transform-origin: left center;
  }
}

/* The Borrowed Shadow mobile-fullscreen override further up this file sets
   `inset: 0` at the same specificity as the shared rotate-when-upright rule,
   and being later it won - leaving the player rotated but anchored to the
   corner instead of centred. Restating the rotated geometry last fixes the
   ordering for every forced-landscape game. */
@media (hover: none), (pointer: coarse) {
  body.game-force-landscape.is-player-open .embedded-game-view,
  body.game-force-landscape.is-player-open .embedded-game-view:fullscreen,
  body.game-force-landscape.is-player-open .embedded-game-view:-webkit-full-screen {
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    width: var(--game-landscape-width, 100dvh) !important;
    height: var(--game-landscape-height, 100dvw) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    transform-origin: center !important;
  }
}

/* Borrowed Shadow's mobile player must fill the viewport whether or not the
   browser granted fullscreen. The shared `:not(.is-game-fullscreen)` rule
   collapses .embedded-stage to a grid of auto height, and it out-specifies
   Borrowed Shadow's own full-bleed rule (0,4,1 against 0,3,1) - so when
   fullscreen is unavailable, as on iOS Safari where a <section> cannot enter
   it, the stage shrank to a sliver and the canvas had no room to draw. The
   game's intro and touch pad are position:fixed inside the frame, so they kept
   painting and only the artwork disappeared. Qualifying by id outranks the
   shared rule without weakening it for any other game. */
@media (hover: none), (pointer: coarse) {
  body.is-player-open[data-active-game="borrowed-shadow"] #embedded-game-view .embedded-stage,
  body.is-player-open[data-active-game="borrowed-shadow"] #borrowed-shadow-frame {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }
}


/* Scrap Em' Sock Em plays landscape-only on mobile and enters fullscreen the
   moment it launches, so its player has to be full-bleed. Two separate things
   fight that, and both need answering here:

   1. The shared `:not(.is-game-fullscreen)` rule collapses .embedded-stage to
      an auto-height grid with !important, and it out-specifies a plain
      per-game selector - the same trap documented for Borrowed Shadow above.
      Qualifying by id outranks it without weakening it for any other game. It
      matters because fullscreen is not always granted: on iOS Safari a
      <section> cannot enter it at all, and the forced-landscape rotation still
      has to produce a usable player.
   2. .embedded-frame carries `aspect-ratio: 16 / 9`, which computes 449px of
      height inside a 390px-tall rotated player. The 59px that overflows is
      exactly the move tray and the RUN button, so the game comes up looking
      like it has no controls at all. */
@media (hover: none), (pointer: coarse) {
  body.is-player-open[data-active-game="scrap-em-sock-em"] #embedded-game-view .embedded-stage,
  body.is-player-open[data-active-game="scrap-em-sock-em"] #scrap-em-sock-em-frame {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #0e141b !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  /* The topline floats over the arena rather than taking a grid row above it,
     so the game's own console keeps the whole bottom edge of the screen. */
  body.is-player-open[data-active-game="scrap-em-sock-em"] #embedded-game-view .embedded-topline {
    position: fixed !important;
    z-index: 2147483647;
    top: max(4px, env(safe-area-inset-top)) !important;
    right: max(5px, env(safe-area-inset-right)) !important;
    left: auto !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    pointer-events: none;
  }

  body.is-player-open[data-active-game="scrap-em-sock-em"] .exit-home {
    opacity: 0.72;
    pointer-events: auto;
  }

  /* The site's control-hint chips would take a row out of the stage. This game
     lays its whole move set out on screen, so they are redundant here. */
  body.is-player-open[data-active-game="scrap-em-sock-em"] #embedded-controls,
  body.is-player-open[data-active-game="scrap-em-sock-em"] .now-playing {
    display: none !important;
  }
}


/* ---------------------------------------------------------------- Offset --
   Immersive landscape player. The stage goes full-bleed and the pad and action
   bank float ON TOP of the frame rather than sitting in a strip beneath it.

   The container is pointer-events:none and only the two clusters take a touch.
   That is the whole point: in Offset you aim by tapping the room, so the middle
   of the screen has to reach the iframe. A control bar that swallowed touches
   across the bottom would make the game unplayable, not merely cramped.

   Keyed on is-player-open rather than is-game-fullscreen so the layout is the
   same when fullscreen is refused — iOS Safari grants neither fullscreen on a
   div nor an orientation lock, and the game still has to be playable there. */
@media (hover: none), (pointer: coarse) {
  body.is-player-open[data-active-game="offset"] .embedded-stage {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #05070c !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: hidden !important;
  }

  body.is-player-open[data-active-game="offset"] #offset-frame {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    /* the windowed player caps the frame with a viewport-relative max-height;
       without clearing it, inset:0 still leaves a letterboxed strip */
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* the printed control list is redundant once the buttons are on the glass */
  body.is-player-open[data-active-game="offset"] #embedded-controls {
    display: none !important;
  }

  body.is-player-open[data-active-game="offset"] .mobile-controls.is-visible {
    position: absolute !important;
    z-index: 80 !important;
    top: auto !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    display: flex !important;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }

  body.is-player-open[data-active-game="offset"] .mobile-control-pad,
  body.is-player-open[data-active-game="offset"] .mobile-action-bank {
    pointer-events: auto !important;
  }

  /* sized off viewport HEIGHT: in landscape that is the scarce axis, and a pad
     scaled off width grows enormous on a wide phone */
  body.is-player-open[data-active-game="offset"] .mobile-control-pad {
    grid-template-columns: repeat(3, clamp(32px, 11vh, 48px)) !important;
    grid-template-rows: repeat(3, clamp(32px, 11vh, 48px)) !important;
    gap: 4px !important;
    width: auto !important;
    justify-self: start !important;
    place-content: end start !important;
  }

  body.is-player-open[data-active-game="offset"] .mobile-action-bank {
    grid-template-columns: repeat(3, minmax(0, auto)) !important;
    gap: 5px !important;
    width: auto !important;
    justify-self: end !important;
    align-self: end !important;
  }

  body.is-player-open[data-active-game="offset"] .mobile-action-button {
    min-height: clamp(28px, 9.5vh, 42px) !important;
    min-width: clamp(46px, 13vw, 70px) !important;
    padding: 4px 8px !important;
    font-size: clamp(8.5px, 2.2vw, 11px) !important;
    letter-spacing: 0.08em;
  }

  /* translucent, so the chamber reads through them */
  body.is-player-open[data-active-game="offset"] .mobile-pad-button,
  body.is-player-open[data-active-game="offset"] .mobile-action-button {
    border-color: rgba(150, 205, 235, 0.32) !important;
    background: rgba(4, 10, 18, 0.42) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.34) !important;
  }

  body.is-player-open[data-active-game="offset"] .mobile-pad-button.is-active,
  body.is-player-open[data-active-game="offset"] .mobile-action-button.is-active {
    border-color: rgba(53, 200, 255, 0.7) !important;
    background: rgba(53, 200, 255, 0.3) !important;
  }
}

/* PicoPet ---------------------------------------------------------------- */
/* The game already draws its own handheld shell, so the hub's dark stage panel
   sat around it as a second frame around a frame - a 1040x678 slab holding a
   460x610 game. Drop the stage chrome for this cassette only and put a themed
   border on the game frame itself, keyed to the game's own pink. */
body.is-player-open[data-active-game="picopet"] #embedded-game-view .embedded-stage {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* ICHIBA gets the same treatment as PicoPet above: the game already draws its
   own bordered panel with corner brackets, so the hub's dark stage slab behind
   it read as a second frame around a frame. Size is untouched - only the stage
   chrome goes. */
body.is-player-open[data-active-game="ichiba"] #embedded-game-view .embedded-stage {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

body.is-player-open[data-active-game="picopet"] #picopet-frame {
  background: #f3d3de;                 /* the ground the game paints when embedded */
  border: 3px solid #ffb0c8;           /* its own theme-color */
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(120, 70, 100, 0.38),
              0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

/* ============================================================
   ONLINE HIGH SCORES  (leaderboard-v1.js)
   ============================================================ */

.tlg-lb {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(4, 6, 10, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tlg-lb[hidden] { display: none !important; }
/* Any rule that sets `display` out-specifies the browser's own
   [hidden] { display: none }, so toggling .hidden on a flex child
   silently does nothing without this. */
.tlg-lb [hidden] { display: none !important; }

.tlg-lb-panel {
  position: relative;
  width: min(460px, 100%);
  max-height: min(86vh, 720px);
  overflow-y: auto;
  padding: 22px 22px 18px;
  color: var(--ink, #f7f2e8);
  background: var(--panel-strong, rgba(14, 15, 20, 0.94));
  border: 1px solid var(--edge, rgba(255, 255, 255, 0.22));
  border-radius: 14px;
  box-shadow: 0 24px 70px var(--shadow, rgba(0, 0, 0, 0.58)),
              inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.tlg-lb-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-size: 13px;
  color: var(--muted, #aeb8b5);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--edge, rgba(255, 255, 255, 0.22));
  border-radius: 8px;
  cursor: pointer;
}
.tlg-lb-close:hover { color: var(--ink, #f7f2e8); border-color: var(--edge-hot, rgba(255,186,76,.66)); }

.tlg-lb-kicker {
  margin: 0 0 2px;
  font-family: var(--font-pixel, "Consolas", monospace);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--amber, #ffb443);
}
.tlg-lb-title {
  margin: 0 0 12px;
  font-family: var(--font-display, "Arial Black", sans-serif);
  font-size: clamp(19px, 4.6vw, 25px);
  letter-spacing: 0.02em;
}

.tlg-lb-scoreline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 9px 12px;
  background: rgba(77, 242, 255, 0.09);
  border: 1px solid rgba(77, 242, 255, 0.3);
  border-radius: 10px;
}
.tlg-lb-scorelabel {
  font-family: var(--font-pixel, monospace);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--muted, #aeb8b5);
}
.tlg-lb-scorevalue {
  font-family: var(--font-pixel, monospace);
  font-size: 15px;
  font-weight: 700;
  color: var(--cyan, #4df2ff);
}

.tlg-lb-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-pixel, monospace);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--muted, #aeb8b5);
}
.tlg-lb-input {
  width: 100%;
  padding: 11px 12px;
  font-family: var(--font-pixel, monospace);
  font-size: 16px;              /* 16px keeps iOS from zooming the page */
  color: var(--ink, #f7f2e8);
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid var(--edge, rgba(255, 255, 255, 0.22));
  border-radius: 9px;
}
.tlg-lb-input:focus {
  outline: none;
  border-color: var(--cyan, #4df2ff);
  box-shadow: 0 0 0 3px rgba(77, 242, 255, 0.16);
}

.tlg-lb-emoji {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 9px 0 13px;
}
.tlg-lb-emojibtn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  font-size: 16px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--edge, rgba(255, 255, 255, 0.22));
  border-radius: 8px;
  cursor: pointer;
}
.tlg-lb-emojibtn:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); }

.tlg-lb-actions { display: flex; gap: 8px; }
.tlg-lb-btn {
  flex: 1 1 auto;
  padding: 11px 14px;
  font-family: var(--font-pixel, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #06121a;
  background: var(--cyan, #4df2ff);
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}
.tlg-lb-btn:hover { filter: brightness(1.08); }
.tlg-lb-btn[disabled] { opacity: 0.55; cursor: default; }
.tlg-lb-skip {
  flex: 0 0 auto;
  color: var(--muted, #aeb8b5);
  background: transparent;
  border: 1px solid var(--edge, rgba(255, 255, 255, 0.22));
}
.tlg-lb-skip:hover { color: var(--ink, #f7f2e8); }

.tlg-lb-msg {
  min-height: 15px;
  margin: 9px 0 0;
  font-family: var(--font-pixel, monospace);
  font-size: 11px;
  color: var(--amber, #ffb443);
}

.tlg-lb-list { margin: 14px 0 0; padding: 0; list-style: none; }
.tlg-lb-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--font-pixel, monospace);
  font-size: 13px;
}
.tlg-lb-row:nth-child(odd) { background: rgba(255, 255, 255, 0.04); }
.tlg-lb-row.is-you {
  background: rgba(255, 180, 67, 0.16);
  box-shadow: inset 0 0 0 1px var(--edge-hot, rgba(255, 186, 76, 0.66));
}
.tlg-lb-rank { color: var(--muted, #aeb8b5); text-align: right; }
.tlg-lb-row:nth-child(1) .tlg-lb-rank { color: var(--amber, #ffb443); }
.tlg-lb-row:nth-child(2) .tlg-lb-rank { color: #d9e2e0; }
.tlg-lb-row:nth-child(3) .tlg-lb-rank { color: #d09a5e; }
.tlg-lb-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tlg-lb-score { color: var(--cyan, #4df2ff); font-weight: 700; }

.tlg-lb-empty {
  margin: 14px 0 0;
  font-family: var(--font-pixel, monospace);
  font-size: 12px;
  color: var(--muted, #aeb8b5);
}

@media (max-width: 460px) {
  .tlg-lb-panel { padding: 18px 15px 14px; }
  .tlg-lb-emojibtn { width: 30px; height: 30px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .tlg-lb-emojibtn:hover { transform: none; }
}

/* ------------------------------------------------------------------
   Jungle Rumble: a see-through cassette.

   Offset was here too until it got real back-cover art - a card cannot both
   show a printed back and show its own front through, so it went back to the
   normal flip.

   Neither has back art. Rather than show an empty panel, the back face is
   removed entirely and the FRONT is allowed to render its reverse side.
   The card already flips with rotateY(180deg), so the browser draws that
   reverse mirrored for free - you appear to be looking at the case from
   the inside. Text reading backwards is the point, not a bug.

   backface-visibility defaults to hidden on .game-card-face, which is what
   normally stops a flipped face showing through; these two opt out of it.
   ------------------------------------------------------------------ */
.game-card[data-game-id="jungle-rumble"] .game-card-back {
  display: none !important;
}

.game-card[data-game-id="jungle-rumble"] .game-card-front {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

/* Offset + Jungle Rumble show their own FRONT mirrored instead of a back panel
   (see the backface note above). Fading it while the shelf is flipped makes the
   reverse read as the inside of a case rather than a second front. Scoped to
   .case-backs-visible so the normal, forward-facing card is untouched. */
.case-backs-visible .game-card[data-game-id="offset"] .game-card-front,
.case-backs-visible .game-card[data-game-id="jungle-rumble"] .game-card-front {
  opacity: 0.5;
}


/* ICHIBA's corner logo, phone only.
   Keyed to data-active-game-mode="mobile" - the flag the host sets when it
   launches the mobile frame - rather than to a width or a coarse-pointer
   query, because the iframe can be desktop-wide on a phone and a touch laptop
   is not the case being targeted. The desktop player keeps its logo. */
body[data-active-game="ichiba"][data-active-game-mode="mobile"] .embedded-game-logo {
  display: none !important;
}

/* Offset now carries its own wordmark in that corner, so it comes back
   on mobile — small and tucked in, so it reads as chrome rather than as
   UI sitting on top of the game. */
body[data-active-game="offset"][data-active-game-mode="mobile"] .embedded-game-logo {
  width: min(26vw, 118px) !important;
  max-width: min(26vw, 118px) !important;
  max-height: 34px !important;
  opacity: 0.94;
}


/* ICHIBA's exit button on the phone.
   ICHIBA's mobile frame is FULL-BLEED - it fills the screen - so unlike
   Desktop Demolition (whose small letterboxed frame sits well below the
   button) anything in the corner here lands on the artwork. It cannot be
   moved off the canvas, so it is made to cost as little of it as possible:
   the same treatment Desktop Demolition uses in fullscreen - icon only, no
   word, a small translucent chip - tucked tighter into the corner.
   font-size:0 collapses the label's box; the span is hidden outright so it
   claims no width either. */
body[data-active-game="ichiba"][data-active-game-mode="mobile"] .exit-home {
  width: auto;
  min-width: 0;
  min-height: 22px;
  height: 22px;
  gap: 0;
  padding: 0 6px;
  margin: -8px 0 0 -8px;          /* hug the corner, clear of the game's SCORE readout */
  border-radius: 5px;
  font-size: 0;
  line-height: 1;
  opacity: 0.5;
  pointer-events: auto;
}

body[data-active-game="ichiba"][data-active-game-mode="mobile"] .exit-home .icon-stop {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}

body[data-active-game="ichiba"][data-active-game-mode="mobile"] .exit-home span:last-child {
  display: none;
}

/* Still reachable while it is faint - a press brings it back to full. */
body[data-active-game="ichiba"][data-active-game-mode="mobile"] .exit-home:active {
  opacity: 0.95;
}

/* The chip is 22px, comfortably under the ~44px a thumb wants. Rather than
   draw a bigger button, an invisible pad extends the HIT AREA around it, so
   it stays discreet without becoming fiddly to press. */
body[data-active-game="ichiba"][data-active-game-mode="mobile"] .exit-home {
  position: relative;
}

body[data-active-game="ichiba"][data-active-game-mode="mobile"] .exit-home::before {
  content: "";
  position: absolute;
  inset: -11px;
}


/* ============================================================
   MESSAGE CENTRE TABS  (message-tabs-v1.js)
   The transmission and the signal poll share the panel now.
   ============================================================ */

.recovery-tabs {
  display: flex;
  gap: 6px;
  margin: 2px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--edge, rgba(255, 255, 255, 0.22));
}

.recovery-tab {
  flex: 0 1 auto;
  padding: 7px 13px;
  font-family: var(--font-pixel, "Consolas", monospace);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted, #aeb8b5);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--edge, rgba(255, 255, 255, 0.22));
  border-radius: 6px 6px 0 0;
  cursor: pointer;
}

.recovery-tab:hover { color: var(--ink, #f7f2e8); }

.recovery-tab.is-active {
  color: #06121a;
  background: var(--cyan, #4df2ff);
  border-color: var(--cyan, #4df2ff);
  box-shadow: 0 0 16px rgba(77, 242, 255, 0.28);
}

.recovery-tab:focus-visible {
  outline: 2px solid var(--amber, #ffb443);
  outline-offset: 2px;
}

.recovery-tabpanel[hidden] { display: none !important; }

.recovery-news-title {
  margin: 0 0 12px;
  font-family: var(--font-display, "Arial Black", sans-serif);
  font-size: clamp(18px, 3.4vw, 24px);
  color: var(--ink, #f7f2e8);
}

.recovery-news-body p {
  margin: 0 0 11px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink, #f7f2e8);
}

.recovery-news-link {
  color: var(--cyan, #4df2ff);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(77, 242, 255, 0.5);
}

.recovery-news-link:hover,
.recovery-news-link:focus-visible {
  color: var(--amber, #ffb443);
  border-bottom-color: var(--amber, #ffb443);
}

/* The real Insert Coin button, sitting inside a sentence. It shares
   .recovery-coin-button with the one in the poll - and the same
   [data-donate-open] hook, which the site wires up at load and which already
   closes this modal before opening the donation one. */
.recovery-news-coin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  margin: 0 2px;
  transform: translateY(-1px);
}

.recovery-news-emoji {
  font-size: 15px;
  line-height: 1;
  vertical-align: -2px;
}

.recovery-news-signoff {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px dashed var(--edge, rgba(255, 255, 255, 0.22));
  font-family: var(--font-pixel, monospace);
  font-size: 12px;
  color: var(--muted, #aeb8b5);
}

.recovery-news-signoff strong {
  color: var(--amber, #ffb443);
  letter-spacing: 0.06em;
}

@media (max-width: 460px) {
  .recovery-tab { padding: 6px 10px; font-size: 9.5px; letter-spacing: 0.12em; }
  .recovery-news-body p { font-size: 13px; }
}



/* ------------------------------------------------------------------
   OFFSET, mobile: symbols on the action buttons instead of words.

   Drawn as inline SVG data URIs rather than a sprite sheet, for the same
   reason Wordventure draws its clock and notebook in CSS - no extra file to
   ship, cache-bust or lose. The <span> label stays in the DOM and is hidden
   visually, because the button's accessible name falls back to it; deleting
   it would leave a screen reader announcing nothing but "button".
   ------------------------------------------------------------------ */
@media (hover: none), (pointer: coarse) {
  body[data-active-game="offset"] .mobile-action-button[data-mobile-icon] {
    display: grid;
    place-items: center;
    padding: 4px;
  }

  body[data-active-game="offset"] .mobile-action-button[data-mobile-icon] > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  body[data-active-game="offset"] .mobile-action-button[data-mobile-icon]::before {
    width: clamp(26px, 7.2vh, 34px);
    height: clamp(26px, 7.2vh, 34px);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55));
  }

  body[data-active-game="offset"] .mobile-action-button[data-mobile-icon="offset-jump"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f2e8' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 15V4'/><path d='M7.5 8.5L12 4l4.5 4.5'/><path d='M4.5 20h15' opacity='.5'/></svg>");
  }

  body[data-active-game="offset"] .mobile-action-button[data-mobile-icon="offset-lift"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f2e8' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='6.5' y='14' width='11' height='6.5' rx='1.2'/><path d='M12 11V3.5'/><path d='M8.4 7.1L12 3.5l3.6 3.6'/></svg>");
  }

  body[data-active-game="offset"] .mobile-action-button[data-mobile-icon="offset-throw"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f2e8' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 19.5C7 9 12.5 6.5 18 9' opacity='.75' stroke-dasharray='2.6 2.4'/><rect x='15.5' y='4.5' width='6' height='6' rx='1.2'/></svg>");
  }

  body[data-active-game="offset"] .mobile-action-button[data-mobile-icon="offset-clear"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f2e8' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M7 7l10 10'/><path d='M17 7L7 17'/></svg>");
  }

  body[data-active-game="offset"] .mobile-action-button[data-mobile-icon="offset-turn"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f2e8' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a8 8 0 1 1-2.4-5.7'/><path d='M20.5 3.2v4.4h-4.4' /></svg>");
  }

  body[data-active-game="offset"] .mobile-action-button[data-mobile-icon="offset-pause"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f2e8' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='5.5' width='3.2' height='13' rx='1.1' fill='%23f7f2e8' stroke='none'/><rect x='12.8' y='5.5' width='3.2' height='13' rx='1.1' fill='%23f7f2e8' stroke='none'/></svg>");
  }
}


/* ------------------------------------------------------------------
   The message-centre nudge (message-nudge-v1.js).

   A "1" and a caption under the transport button, four seconds, at most once
   every three hours. Deliberately quiet: no backdrop, no pointer events, and
   it never covers the button it is pointing at.
   ------------------------------------------------------------------ */
.message-nudge {
  position: fixed;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 6px 7px;
  transform: translate(-50%, -6px);
  opacity: 0;
  pointer-events: none;          /* never intercepts the click it is asking for */
  color: var(--ink, #f7f2e8);
  background: var(--panel-strong, rgba(14, 15, 20, 0.92));
  border: 1px solid var(--edge-hot, rgba(255, 186, 76, 0.66));
  border-radius: 999px;
  box-shadow:
    0 10px 26px var(--shadow, rgba(0, 0, 0, 0.58)),
    0 0 18px rgba(77, 242, 255, 0.16);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.3, 1.2);
  white-space: nowrap;
}

.message-nudge.is-in {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* the little pointer up at the button */
.message-nudge::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--panel-strong, rgba(14, 15, 20, 0.92));
  border-left: 1px solid var(--edge-hot, rgba(255, 186, 76, 0.66));
  border-top: 1px solid var(--edge-hot, rgba(255, 186, 76, 0.66));
}

.message-nudge-count {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  font-family: var(--font-pixel, "Consolas", monospace);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #06121a;
  background: var(--cyan, #4df2ff);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(77, 242, 255, 0.55);
}

.message-nudge-text {
  font-family: var(--font-pixel, "Consolas", monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber, #ffb443);
}

@media (max-width: 460px) {
  .message-nudge { padding: 5px 9px 5px 6px; gap: 6px; }
  .message-nudge-text { font-size: 9px; letter-spacing: 0.1em; }
}

@media (prefers-reduced-motion: reduce) {
  .message-nudge { transition: opacity 320ms ease; transform: translate(-50%, 0); }
}


/* ==========================================================================
   Cassette SHARE control  (injected by share-v1.js)
   Sits in the genre row immediately after the controller and multiplayer
   icons, and reads as the third member of that set: same 20px box, same neon
   line-art, same drop-shadow glow.
   ========================================================================== */

.cassette-share-icon {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 20px;
  padding: 0;
  margin-left: 1px;
  border: 0;
  background: none;
  color: var(--cyan);
  cursor: pointer;
  transform: translateY(-1px);
  z-index: 4;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, transform .15s ease;
}

.cassette-share-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(77, 242, 255, 0.72));
}

.cassette-share-icon svg circle {
  fill: currentColor;
  stroke: none;
}

.cassette-share-icon:hover,
.cassette-share-icon[aria-expanded="true"] {
  color: #ffda55;
  transform: translateY(-2px);
}

.cassette-share-icon:focus-visible {
  outline: 2px solid #ffda55;
  outline-offset: 3px;
  border-radius: 6px;
}

.cassette-share-panel {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 140;
  width: min(288px, calc(100vw - 24px));
  padding: 14px 14px 12px;
  border: 1px solid var(--edge-hot);
  border-radius: 14px;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 76, 168, 0.16), transparent 42%),
    linear-gradient(160deg, rgba(14, 15, 20, 0.97), rgba(8, 10, 14, 0.97));
  box-shadow:
    0 18px 44px var(--shadow),
    0 0 0 1px rgba(255, 218, 85, 0.14),
    0 0 22px rgba(77, 242, 255, 0.18);
  animation: cassetteShareIn .16s ease-out both;
}

/* A rule that sets display out-specifies the UA's [hidden] { display:none },
   so the panel has to opt back out by hand. */
.cassette-share-panel[hidden] { display: none !important; }

@keyframes cassetteShareIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.cassette-share-panel h4 {
  margin: 0 22px 4px 0;
  font: 800 12px/1.2 var(--font-display);
  letter-spacing: .14em;
  color: #ffda55;
  text-shadow: 0 0 10px rgba(255, 218, 85, 0.32);
}

.cassette-share-sub {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}

.cassette-share-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.cassette-share-close:hover { color: var(--ink); }

.cassette-share-linkrow {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.cassette-share-link {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--edge);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.42);
  color: var(--ink);
  font: 500 11px/1.2 var(--font-pixel);
}

.cassette-share-copy {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid rgba(77, 242, 255, 0.5);
  border-radius: 9px;
  background: rgba(77, 242, 255, 0.12);
  color: var(--cyan);
  font: 800 10px/1.2 var(--font-display);
  letter-spacing: .1em;
  cursor: pointer;
  white-space: nowrap;
}

.cassette-share-copy:hover { background: rgba(77, 242, 255, 0.22); }

.cassette-share-copy.is-copied {
  border-color: rgba(155, 255, 117, 0.62);
  background: rgba(155, 255, 117, 0.16);
  color: var(--green);
}

.cassette-share-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.cassette-share-dest {
  display: block;
  padding: 8px 9px;
  border: 1px solid var(--edge);
  border-left: 3px solid var(--dest-accent, var(--cyan));
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font: 700 11px/1.2 var(--font-display);
  letter-spacing: .06em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.cassette-share-dest:hover {
  border-color: var(--dest-accent, var(--cyan));
  background: rgba(255, 255, 255, 0.09);
}

.cassette-share-more {
  grid-column: 1 / -1;
  --dest-accent: #ffda55;
  text-align: center;
}

@media (max-width: 720px) {
  .cassette-share-icon { transform: translateY(-1px) scale(.86); transform-origin: left center; }
  .cassette-share-panel { width: min(288px, calc(100vw - 20px)); }
}

/* Wordventure: the share button takes the controller's pinned far-right spot in
   the genre row, and the controller drops into the inline slot right after the
   genre text. The earlier per-game rules pin the controller absolutely at
   (0,3,0); these carry one more class so they win at every width. */
.game-card[data-game-id="wordventure"] .genre-with-controller .controller-supported-icon {
  position: relative;
  top: auto;
  right: auto;
  transform: translateY(-1px);
  transform-origin: left center;
}

.game-card[data-game-id="wordventure"] .genre-with-controller .cassette-share-icon {
  position: absolute;
  top: 50%;
  right: 0;
  margin-left: 0;
  transform: translateY(-50%);
  transform-origin: right center;
}

.game-card[data-game-id="wordventure"] .genre-with-controller .cassette-share-icon:hover,
.game-card[data-game-id="wordventure"] .genre-with-controller .cassette-share-icon[aria-expanded="true"] {
  transform: translateY(calc(-50% - 1px));
}

@media (max-width: 760px) {
  .game-card[data-game-id="wordventure"] .genre-with-controller .controller-supported-icon {
    transform: translateY(-1px) scale(.84);
    transform-origin: left center;
  }
  .game-card[data-game-id="wordventure"] .genre-with-controller .cassette-share-icon,
  .game-card[data-game-id="wordventure"] .genre-with-controller .cassette-share-icon:hover,
  .game-card[data-game-id="wordventure"] .genre-with-controller .cassette-share-icon[aria-expanded="true"] {
    transform: translateY(-50%) scale(.86);
  }
}

/* Drizzlewick's title is one eleven-letter word. The shared title rule allows
   overflow-wrap:anywhere, which is harmless for names with spaces but cut this
   one to "DRIZZLEWI / CK" wherever the shelf layout narrows the label strip to
   ~160-186px (every window from ~1100px up). Keep the word whole and size it
   against the row's own width instead of the viewport.
   The row also still carried the shared two-column grid meant for a title plus
   a controller badge; the badge moved down to the genre line, so the empty
   column and its 8px gap only squeezed the title. */
.game-card[data-game-id="drizzlewick"] .cassette-title-row {
  grid-template-columns: minmax(0, 1fr);
  container-type: inline-size;
}

.game-card[data-game-id="drizzlewick"] .label-strip .cassette-title-row h3 {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  /* "DRIZZLEWICK" in the display face measures ~7.6em, so 12.5cqi keeps it at
     ~95% of the row; the clamp is the size every other title uses, so it never
     grows past its neighbours. Browsers without container units keep the clamp. */
  font-size: clamp(17px, 2.1vw, 22px);
  font-size: min(clamp(17px, 2.1vw, 22px), 12.5cqi);
}

/* ------------------------------------------------------------------
   RubixWRLD (TLG-20)
   Newest playable cassette sits right after Offset on shelf 2; the
   reserved Jungle Rumble slot moves to the end so "Coming Soon" stays last.
   ------------------------------------------------------------------ */
.game-card[data-game-id="rubixwrld"] {
  order: 8;
}

.game-card[data-game-id="jungle-rumble"] {
  order: 9;
}

/* No back art yet: same see-through treatment as Jungle Rumble (see the
   backface note above) rather than an empty panel. */
.game-card[data-game-id="rubixwrld"] .game-card-back {
  display: none !important;
}

.game-card[data-game-id="rubixwrld"] .game-card-front {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.case-backs-visible .game-card[data-game-id="rubixwrld"] .game-card-front {
  opacity: 0.5;
}

/* RubixWRLD on a phone held upright. The shared mobile player gives every frame
   16:9, which on a 390px-wide phone is a 344x194 letterbox: the game's atlas card
   and bottom rail then cover the whole cube. The game frames itself for any
   aspect (its camera backs off on narrow frames), so give it the full width and
   most of the height instead. Scoped to mobile mode + portrait so the desktop
   player keeps its wide view. The id outranks the shared :not()-chained mobile
   frame rule - but that rule (touch devices) sets width, height and max-height
   with !important, so these have to as well or the frame collapses to 344x152. */
@media (orientation: portrait) {
  body.is-player-open[data-active-game="rubixwrld"][data-active-game-mode="mobile"] #rubixwrld-frame {
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(360px, calc(100svh - 270px), 700px) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
}

/* The host sound toggle has to stay (the game draws no mute of its own), but its
   corner is exactly where the game prints MOVES / TIME. Drop it just below that
   readout, into open sky. */
body.is-player-open[data-active-game="rubixwrld"] .game-sound-toggle {
  top: 78px;
}

@media (max-width: 760px) {
  body.is-player-open[data-active-game="rubixwrld"] .game-sound-toggle {
    top: 62px;
  }
}

/* ...and held sideways. A landscape phone leaves the shared 16:9 frame about
   158px tall under the hub chrome, which is the same letterbox the portrait
   rule fixes. Let the frame take nearly the whole screen height instead,
   leaving just enough below it for the control chips (this view does not
   scroll, so a larger frame pushes them off the bottom edge). */
@media (orientation: landscape) and (max-height: 520px) {
  body.is-player-open[data-active-game="rubixwrld"][data-active-game-mode="mobile"] #rubixwrld-frame {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100svh - 128px) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
}


/* ------------------------------------------------------------------
   Roomquake (TLG-20) and the shelf swap
   Roomquake takes the slot after Offset; RubixWRLD (now TLG-21) moves one
   along; the reserved Jungle Rumble slot stays last.
   ------------------------------------------------------------------ */
.game-card[data-game-id="roomquake"] { order: 8; }
.game-card[data-game-id="rubixwrld"] { order: 9; }
.game-card[data-game-id="jungle-rumble"] { order: 10; }

/* No back art yet: the same see-through back as RubixWRLD and Jungle Rumble. */
.game-card[data-game-id="roomquake"] .game-card-back { display: none !important; }
.game-card[data-game-id="roomquake"] .game-card-front {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
.case-backs-visible .game-card[data-game-id="roomquake"] .game-card-front { opacity: 0.5; }

/* Roomquake on a phone: landscape-only and fullscreen on launch, like Scrap Em'
   Sock Em (the four registry flags), so the player is full-bleed for the same two
   reasons documented on that block - the shared :not(.is-game-fullscreen) stage
   collapse has to be out-specified by id, and the frame's 16:9 aspect-ratio would
   overflow the rotated player and hide the game's GRAB / DODGE buttons. The game
   draws its own stick and buttons, so the hub's control chips go too. */
@media (hover: none), (pointer: coarse) {
  body.is-player-open[data-active-game="roomquake"] #embedded-game-view .embedded-stage,
  body.is-player-open[data-active-game="roomquake"] #roomquake-frame {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #160722 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  body.is-player-open[data-active-game="roomquake"] #embedded-game-view .embedded-topline {
    position: fixed !important;
    z-index: 2147483647;
    top: max(4px, env(safe-area-inset-top)) !important;
    right: max(5px, env(safe-area-inset-right)) !important;
    left: auto !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    pointer-events: none;
  }

  body.is-player-open[data-active-game="roomquake"] .exit-home {
    opacity: 0.72;
    pointer-events: auto;
  }

  body.is-player-open[data-active-game="roomquake"] #embedded-controls,
  body.is-player-open[data-active-game="roomquake"] .now-playing {
    display: none !important;
  }
}

/* Roomquake's HUD owns both right-hand corners: the mission name and goal list
   sit top-right, and on touch screens GRAB / DODGE sit bottom-right. The game's
   own #btn-mute is zero-size, so the host sound toggle has to stay - it just
   cannot use its usual top-right corner.
   Desktop: the in-game key legend (bottom-right) is hidden under embed=hub, so
   that corner is free. */
body.is-player-open[data-active-game="roomquake"] .game-sound-toggle {
  top: auto;
  /* The toggle is positioned against the whole stage, which also holds the
     control-chip row under the frame - so plain 12px put it below the game,
     on top of the chips. 72px lifts it into the frame's own bottom-right. */
  bottom: 72px;
}

/* Phone (full-bleed, landscape): both right corners are taken and the left ones
   hold the score and room stability, so Exit Home and the sound toggle float
   together at top-centre, over open floor. */
@media (hover: none), (pointer: coarse) {
  body.is-player-open[data-active-game="roomquake"] #embedded-game-view .embedded-topline {
    right: auto !important;
    left: 50% !important;
    transform: translateX(calc(-50% - 26px)) !important;
  }

  body.is-player-open[data-active-game="roomquake"] .game-sound-toggle {
    position: fixed;
    top: max(4px, env(safe-area-inset-top));
    bottom: auto;
    right: auto;
    left: calc(50% + 52px);
    z-index: 2147483647;
  }
}


/* ------------------------------------------------------------------
   Jungle Rumble, now playable (TLG-14)
   It trades places with RubixWRLD: Jungle Rumble takes the slot after
   Roomquake, and RubixWRLD becomes the last cassette on shelf 2.
   ------------------------------------------------------------------ */
.game-card[data-game-id="jungle-rumble"] { order: 9; }
.game-card[data-game-id="rubixwrld"] { order: 10; }

/* Phone: landscape-locked and fullscreen like Offset (the four registry flags),
   with the same full-bleed player and the d-pad / action bank floating over the
   arena instead of a strip beneath it. Unlike Offset, Jungle Rumble is not
   excluded from the shared :not()-chained phone rule that collapses the stage and
   controls with !important, so every selector here is anchored on an id to
   out-rank it (without that the player came up as an 820x157 strip). The game has no touch input of its own, so
   these hub buttons are its phone controls. */
@media (hover: none), (pointer: coarse) {
  body.is-player-open[data-active-game="jungle-rumble"] #embedded-game-view .embedded-stage {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #050912 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: hidden !important;
  }

  body.is-player-open[data-active-game="jungle-rumble"] #jungle-rumble-frame {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.is-player-open[data-active-game="jungle-rumble"] #embedded-controls {
    display: none !important;
  }

  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls.is-visible {
    position: absolute !important;
    z-index: 80 !important;
    top: auto !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    display: flex !important;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }

  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-control-pad,
  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-action-bank {
    pointer-events: auto !important;
  }

  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-control-pad {
    grid-template-columns: repeat(3, clamp(32px, 11vh, 48px)) !important;
    grid-template-rows: repeat(3, clamp(32px, 11vh, 48px)) !important;
    gap: 4px !important;
    width: auto !important;
    justify-self: start !important;
    place-content: end start !important;
  }

  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-action-bank {
    grid-template-columns: repeat(3, minmax(0, auto)) !important;
    gap: 5px !important;
    width: auto !important;
    justify-self: end !important;
    align-self: end !important;
  }

  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-action-button {
    min-height: clamp(28px, 9.5vh, 42px) !important;
    min-width: clamp(46px, 13vw, 70px) !important;
    padding: 4px 8px !important;
    font-size: clamp(8.5px, 2.2vw, 11px) !important;
    letter-spacing: 0.08em;
  }

  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-pad-button,
  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-action-button {
    border-color: rgba(150, 235, 140, 0.34) !important;
    background: rgba(4, 14, 10, 0.44) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.34) !important;
  }

  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-pad-button.is-active,
  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-action-button.is-active {
    border-color: rgba(119, 239, 89, 0.75) !important;
    background: rgba(119, 239, 89, 0.3) !important;
  }
}

/* Joystick pad (Offset and Jungle Rumble on phones; createJoystickControl in
   script-translations-mobile-v19.js). A smoked-glass disc with a neon rim, four
   chevrons that light with the held direction, and a knob that follows the
   thumb and springs back to the centre. --joy is the accent colour, as RGB. */
.mobile-joystick {
  --joy: 120, 215, 255;
  position: relative;
  flex: 0 0 auto;
  width: clamp(108px, 36vh, 156px);
  aspect-ratio: 1;
  border-radius: 50%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background:
    radial-gradient(circle, rgba(var(--joy), 0.12) 0 29%, transparent 30%),
    repeating-radial-gradient(circle, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 10px),
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.16), transparent 56%),
    rgba(6, 10, 18, 0.48);
  box-shadow:
    inset 0 0 0 2px rgba(var(--joy), 0.45),
    inset 0 0 24px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(var(--joy), 0.2),
    0 6px 18px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: box-shadow 0.15s ease;
}

.mobile-joystick.is-engaged {
  box-shadow:
    inset 0 0 0 2px rgba(var(--joy), 0.85),
    inset 0 0 24px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(var(--joy), 0.45),
    0 6px 18px rgba(0, 0, 0, 0.42);
}

.mobile-joystick-chevron {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15%;
  aspect-ratio: 1;
  border-top: 3px solid rgba(255, 255, 255, 0.5);
  border-left: 3px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px 0 0 0;
  translate: -50% -50%;
  pointer-events: none;
  transition: border-color 0.12s ease, filter 0.12s ease;
}

.mobile-joystick-chevron.is-up { transform: translateY(-255%) rotate(45deg); }
.mobile-joystick-chevron.is-right { transform: translateX(255%) rotate(135deg); }
.mobile-joystick-chevron.is-down { transform: translateY(255%) rotate(225deg); }
.mobile-joystick-chevron.is-left { transform: translateX(-255%) rotate(-45deg); }

.mobile-joystick.is-up .mobile-joystick-chevron.is-up,
.mobile-joystick.is-right .mobile-joystick-chevron.is-right,
.mobile-joystick.is-down .mobile-joystick-chevron.is-down,
.mobile-joystick.is-left .mobile-joystick-chevron.is-left {
  border-color: rgb(var(--joy));
  filter: drop-shadow(0 0 5px rgba(var(--joy), 0.95));
}

.mobile-joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  aspect-ratio: 1;
  margin: -21% 0 0 -21%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(var(--joy), 0.38) 0 20%, transparent 22%),
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08) 42%, transparent 62%),
    radial-gradient(circle, #2b3446 0 62%, #151b26 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.16),
    inset 0 -4px 8px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(var(--joy), 0.35),
    0 4px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.25), box-shadow 0.15s ease;
}

.mobile-joystick.is-engaged .mobile-joystick-knob {
  transition: box-shadow 0.15s ease;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.2),
    inset 0 -4px 8px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(var(--joy), 0.7),
    0 0 18px rgba(var(--joy), 0.6);
}

@media (hover: none), (pointer: coarse) {
  body.is-player-open[data-active-game="offset"] .mobile-joystick,
  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-joystick {
    pointer-events: auto !important;
  }

  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-joystick {
    --joy: 132, 240, 96;
  }
}

/* Jungle Rumble's fight HUD owns the whole top edge of its 960x540 canvas:
   portrait panels in both corners (x 7-99 and 861-953, y 13-95), health bars,
   guard / breaker meters and the timer between them. The game draws its own mute
   only as a key (M), so the host toggle stays - just not over player 2's portrait.
   Desktop: the bottom edge is clear during a fight, so the toggle goes there, inside
   the frame (72px clears the control-chip row that shares the stage). */
body.is-player-open[data-active-game="jungle-rumble"] .game-sound-toggle {
  top: auto;
  bottom: 72px;
}

/* Phone (full-bleed, landscape): the bottom corners hold the d-pad and the action
   bank, and the top corners hold both portraits - so Exit Home and the sound toggle
   sit just under the HUD row (canvas y~100), in the sky above the fighters.
   vmin, not vh: an upright phone is rotated into landscape, and vh would still
   measure the long side, dropping both buttons halfway down the arena. */
@media (hover: none), (pointer: coarse) {
  body.is-player-open[data-active-game="jungle-rumble"] #embedded-game-view .embedded-topline {
    position: fixed !important;
    z-index: 2147483647;
    top: calc(max(4px, env(safe-area-inset-top)) + 19vmin) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: auto !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    pointer-events: none;
  }

  body.is-player-open[data-active-game="jungle-rumble"] .exit-home {
    opacity: 0.72;
    pointer-events: auto;
    transform: scale(0.86);
    transform-origin: left top;
  }

  body.is-player-open[data-active-game="jungle-rumble"] .game-sound-toggle {
    position: fixed;
    top: calc(max(4px, env(safe-area-inset-top)) + 19vmin);
    bottom: auto;
    right: max(10px, env(safe-area-inset-right));
    left: auto;
    z-index: 2147483647;
    opacity: 0.82;
  }
}

/* ==========================================================================
   LOST CHAT  (chat-v1.js; renamed TRANSMISSIONS (CHAT) in chat-v3.js, see the end of this file)
   Visitor-to-visitor chat, after WebChat. A floating console button bottom
   right and a panel in the site's neon-on-dark cabinet style: same tokens as
   the share panel (edge-hot border, amber heading, cyan / magenta accents).
   ========================================================================== */

.lost-chat-button {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 130;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid rgba(77, 242, 255, 0.55);
  border-radius: 16px;
  color: var(--cyan);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 76, 168, 0.28), transparent 55%),
    linear-gradient(160deg, rgba(14, 15, 20, 0.94), rgba(8, 10, 14, 0.96));
  box-shadow: 0 10px 28px var(--shadow), 0 0 0 1px rgba(255, 218, 85, 0.14), 0 0 18px rgba(77, 242, 255, 0.28);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, color .15s ease, box-shadow .15s ease;
}

.lost-chat-button[hidden], .lost-chat-panel[hidden], .lost-chat-badge[hidden], .lost-chat-empty[hidden] {
  display: none !important;
}

.lost-chat-button:hover,
.lost-chat-button[aria-expanded="true"] {
  color: #ffda55;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px var(--shadow), 0 0 0 1px rgba(255, 218, 85, 0.3), 0 0 22px rgba(255, 218, 85, 0.28);
}

.lost-chat-button:focus-visible { outline: 2px solid #ffda55; outline-offset: 3px; }

.lost-chat-button svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(77, 242, 255, 0.7));
}

.lost-chat-button svg circle { fill: currentColor; stroke: none; }

.lost-chat-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--magenta);
  color: #fff;
  font: 800 11px/20px var(--font-display);
  text-align: center;
  box-shadow: 0 0 12px rgba(255, 76, 168, 0.6);
}

.lost-chat-panel {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 66px);
  z-index: 131;
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 24px));
  height: min(540px, calc(100vh - 110px));
  height: min(540px, calc(100dvh - 110px));
  border: 1px solid var(--edge-hot);
  border-radius: 16px;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 76, 168, 0.16), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(77, 242, 255, 0.1), transparent 45%),
    linear-gradient(160deg, rgba(14, 15, 20, 0.97), rgba(8, 10, 14, 0.98));
  box-shadow: 0 22px 54px var(--shadow), 0 0 0 1px rgba(255, 218, 85, 0.14), 0 0 26px rgba(77, 242, 255, 0.16);
  overflow: hidden;
  animation: lostChatIn .18s ease-out both;
}

@keyframes lostChatIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.lost-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lost-chat-title {
  margin: 0;
  font: 800 13px/1 var(--font-display);
  letter-spacing: .16em;
  color: #ffda55;
  text-shadow: 0 0 10px rgba(255, 218, 85, 0.35);
}

.lost-chat-status {
  flex: 1 1 auto;
  font: 600 10px/1 var(--font-pixel);
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase;
}

.lost-chat-status.is-live { color: var(--green); }

.lost-chat-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.lost-chat-close:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }

.lost-chat-me {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 0;
}

.lost-chat-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(77, 242, 255, 0.4);
  border-radius: 10px;
  background: rgba(77, 242, 255, 0.08);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.lost-chat-name,
.lost-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.42);
  color: var(--ink);
  font: 600 12px/1.2 var(--font-pixel);
}

.lost-chat-name { text-transform: uppercase; letter-spacing: .05em; }

.lost-chat-name:focus,
.lost-chat-input:focus { outline: none; border-color: rgba(77, 242, 255, 0.7); box-shadow: 0 0 0 2px rgba(77, 242, 255, 0.16); }

.lost-chat-save,
.lost-chat-send {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid rgba(77, 242, 255, 0.5);
  border-radius: 10px;
  background: rgba(77, 242, 255, 0.12);
  color: var(--cyan);
  font: 800 10px/1.2 var(--font-display);
  letter-spacing: .1em;
  cursor: pointer;
}

.lost-chat-send {
  border-color: rgba(255, 76, 168, 0.6);
  background: rgba(255, 76, 168, 0.16);
  color: #ff8ac8;
}

.lost-chat-save:hover { background: rgba(77, 242, 255, 0.22); }
.lost-chat-send:hover { background: rgba(255, 76, 168, 0.26); }

.lost-chat-privacy {
  margin: 8px 12px 0;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--muted);
}

.lost-chat-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 8px 0 0;
  padding: 4px 12px 8px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(77, 242, 255, 0.35) transparent;
}

.lost-chat-line {
  margin: 0 0 8px;
  padding: 7px 9px 5px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid rgba(77, 242, 255, 0.55);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.lost-chat-line.is-mine {
  border-left-color: rgba(255, 76, 168, 0.7);
  background: rgba(255, 76, 168, 0.06);
}

.lost-chat-line.is-muted { opacity: .5; }

.lost-chat-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 10px;
}

.lost-chat-ava { font-size: 13px; }

.lost-chat-author {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font: 800 10px/1.2 var(--font-display);
  letter-spacing: .06em;
  color: #ffda55;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.lost-chat-time { color: var(--muted); font-family: var(--font-pixel); }

.lost-chat-body {
  margin: 4px 0 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.lost-chat-acts {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.lost-chat-like,
.lost-chat-mute {
  padding: 1px 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font: 700 10px/1.6 var(--font-pixel);
  cursor: pointer;
}

.lost-chat-like:hover,
.lost-chat-mute:hover { border-color: var(--edge); color: var(--ink); }
.lost-chat-like.is-on { color: var(--magenta); }

.lost-chat-empty {
  margin: 0 12px;
  padding: 12px;
  border: 1px dashed rgba(77, 242, 255, 0.3);
  border-radius: 10px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.lost-chat-notices {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 12px;
}

.lost-chat-notice {
  font: 600 10px/1.4 var(--font-pixel);
  color: var(--green);
  letter-spacing: .04em;
}

.lost-chat-form {
  display: flex;
  gap: 6px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* The game player owns the screen; the script also hides the button then. */
body.is-player-open .lost-chat-button,
body.is-player-open .lost-chat-panel { display: none !important; }

@media (max-width: 560px) {
  .lost-chat-button { width: 48px; height: 48px; border-radius: 14px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .lost-chat-button svg { width: 24px; height: 24px; }
  .lost-chat-panel {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: min(78vh, 560px);
    height: min(78dvh, 560px);
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}


/* ------------------------------------------------------------------
   RubixWRLD on a phone held sideways: no box around the game.
   The stage's glass panel, its cyan edge and the frame's own border read as a
   frame drawn around the cube and cost ~30px of an already short screen, so
   the game runs edge to edge under the Exit Home row. The tip chips never fit
   under a landscape frame (they were cut off at the bottom edge) and the
   game's own rail carries every control, so they go too.
   ------------------------------------------------------------------ */
@media (orientation: landscape) and (max-height: 520px) {
  body.is-player-open[data-active-game="rubixwrld"][data-active-game-mode="mobile"] #embedded-game-view .embedded-stage {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.is-player-open[data-active-game="rubixwrld"][data-active-game-mode="mobile"] #rubixwrld-frame {
    height: calc(100svh - 50px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.is-player-open[data-active-game="rubixwrld"][data-active-game-mode="mobile"] #embedded-controls {
    display: none !important;
  }
}


/* ------------------------------------------------------------------
   Roomquake, RubixWRLD and Jungle Rumble now have back art (assets/case-art/*-case.webp), so
   they drop the see-through treatment above: the back panel comes back, the
   front hides its reverse again like every other cassette, and the flipped
   shelf no longer fades their fronts.
   ------------------------------------------------------------------ */
.game-card[data-game-id="roomquake"] .game-card-back,
.game-card[data-game-id="rubixwrld"] .game-card-back,
.game-card[data-game-id="jungle-rumble"] .game-card-back {
  display: grid !important;
}

.game-card[data-game-id="roomquake"] .game-card-front,
.game-card[data-game-id="rubixwrld"] .game-card-front,
.game-card[data-game-id="jungle-rumble"] .game-card-front {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.case-backs-visible .game-card[data-game-id="roomquake"] .game-card-front,
.case-backs-visible .game-card[data-game-id="rubixwrld"] .game-card-front,
.case-backs-visible .game-card[data-game-id="jungle-rumble"] .game-card-front {
  opacity: 1;
}


/* ==========================================================================
   MESSAGE CENTRE: HIGH SCORES TAB  (leaderboard-v3.js mounts into [data-hall])
   First tab of three. A game picker, then one board: the top three on a
   podium, the rest as rows, skeleton rows while it loads.
   ========================================================================== */
.recovery-tabs { flex-wrap: wrap; }
.recovery-tab::before { margin-right: 6px; letter-spacing: 0; }
.recovery-tab[data-rx-tab="scores"]::before { content: "\1F3C6"; }
.recovery-tab[data-rx-tab="news"]::before { content: "\1F4E1"; }
.recovery-tab[data-rx-tab="poll"]::before { content: "\1F5F3\FE0F"; }

.tlg-hall { display: grid; gap: 12px; }
.tlg-hall [hidden] { display: none !important; }
.tlg-hall-games {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(77, 242, 255, 0.35) transparent;
}
.tlg-hall-game {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px 7px 8px;
  font: 700 10px/1 var(--font-pixel);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--edge);
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.tlg-hall-game b { font-weight: 700; }
.tlg-hall-gameicon { font-size: 15px; line-height: 1; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6)); }
.tlg-hall-game:hover { color: var(--ink); border-color: rgba(77, 242, 255, 0.5); transform: translateY(-1px); }
.tlg-hall-game.is-active {
  color: #06121a;
  background: linear-gradient(180deg, #8ff8ff, var(--cyan));
  border-color: var(--cyan);
  box-shadow: 0 0 14px rgba(77, 242, 255, 0.35);
}
.tlg-hall-game:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.tlg-hall-board {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(77, 242, 255, 0.28);
  border-radius: 12px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% -20%, rgba(255, 180, 67, 0.16), transparent 60%),
    rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 30px rgba(77, 242, 255, 0.06);
}
.tlg-hall-boardhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tlg-hall-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  font-size: 22px;
  border-radius: 10px;
  background: rgba(255, 180, 67, 0.12);
  border: 1px solid var(--edge-hot);
  box-shadow: 0 0 12px rgba(255, 180, 67, 0.18);
}
.tlg-hall-meta { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.tlg-hall-top { font: 700 9px/1 var(--font-pixel); letter-spacing: 0.24em; color: var(--amber); }
.tlg-hall-name {
  font: 900 16px/1.1 var(--font-display);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tlg-hall-play {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  font: 800 10px/1 var(--font-display);
  letter-spacing: 0.12em;
  color: #1a0f00;
  background: linear-gradient(180deg, #ffd88a, var(--amber));
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255, 180, 67, 0.3);
}
.tlg-hall-play::before {
  content: "";
  border-left: 7px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.tlg-hall-play:hover { filter: brightness(1.08); }

.tlg-hall-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.tlg-hall-podium:empty { display: none; }
.tlg-hall-step {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 5px;
  min-width: 0;
  padding: 10px 6px 9px;
  text-align: center;
  border: 1px solid var(--edge);
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
}
.tlg-hall-step.is-rank-1 {
  order: 2;
  min-height: 122px;
  border-color: rgba(255, 210, 90, 0.75);
  background: linear-gradient(180deg, rgba(255, 205, 80, 0.24), rgba(255, 180, 67, 0.05));
  box-shadow: 0 0 22px rgba(255, 190, 70, 0.25);
}
.tlg-hall-step.is-rank-2 { order: 1; min-height: 104px; border-color: rgba(215, 226, 224, 0.55); }
.tlg-hall-step.is-rank-3 { order: 3; min-height: 92px; border-color: rgba(208, 154, 94, 0.6); }
.tlg-hall-medal { font-size: 24px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.tlg-hall-step.is-rank-1 .tlg-hall-medal { font-size: 30px; animation: tlgHallBob 2.4s ease-in-out infinite; }
@keyframes tlgHallBob { 50% { transform: translateY(-3px); } }
.tlg-hall-steprank { font: 700 9px/1 var(--font-pixel); letter-spacing: 0.18em; color: var(--muted); }
.tlg-hall-stepname {
  max-width: 100%;
  font: 800 11px/1.2 var(--font-display);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tlg-hall-stepscore { font: 700 13px/1 var(--font-pixel); color: var(--cyan); text-shadow: 0 0 8px rgba(77, 242, 255, 0.45); }
.tlg-hall-step.is-you { box-shadow: inset 0 0 0 1px var(--magenta), 0 0 16px rgba(255, 76, 168, 0.3); }
.tlg-hall-step .tlg-lb-you { position: absolute; top: -8px; right: 6px; margin: 0; }

.tlg-hall-step.is-ghost,
.tlg-lb-row.is-ghost {
  min-height: 70px;
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%) 0 0 / 200% 100%;
  animation: tlgGhost 1.1s linear infinite;
}
.tlg-lb-row.is-ghost { min-height: 34px; margin-bottom: 4px; }
@keyframes tlgGhost { to { background-position: -200% 0; } }

.tlg-hall-list { margin: 0; }
.tlg-hall-status {
  min-height: 16px;
  margin-top: 8px;
  font: 600 11px/1.4 var(--font-pixel);
  color: var(--muted);
  text-align: center;
}
.tlg-hall-status:empty { display: none; }
.tlg-hall-retry {
  margin-left: 6px;
  padding: 5px 9px;
  font: 800 9px/1 var(--font-display);
  letter-spacing: 0.12em;
  color: var(--cyan);
  background: rgba(77, 242, 255, 0.1);
  border: 1px solid rgba(77, 242, 255, 0.45);
  border-radius: 7px;
  cursor: pointer;
}

@media (max-width: 520px) {
  .recovery-tab { padding: 6px 8px; font-size: 9px; letter-spacing: 0.08em; }
  .tlg-hall-step { padding: 8px 4px; }
  .tlg-hall-step.is-rank-1 { min-height: 108px; }
  .tlg-hall-stepname { font-size: 10px; }
  .tlg-hall-stepscore { font-size: 11px; }
}

/* ==========================================================================
   HIGH SCORE ENTRY v2  (leaderboard-v3.js): cabinet corners, a trophy badge,
   drawers of gaming emoji, the live "on the board" preview row, medals
   ========================================================================== */
.tlg-lb-panel {
  border-color: var(--edge-hot, rgba(255, 186, 76, 0.66));
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 18% -10%, rgba(255, 76, 168, 0.18), transparent 46%),
    radial-gradient(circle at 100% 110%, rgba(77, 242, 255, 0.14), transparent 50%),
    var(--panel-strong, rgba(14, 15, 20, 0.94));
  box-shadow: 0 24px 70px var(--shadow, rgba(0, 0, 0, 0.58)), 0 0 0 1px rgba(255, 218, 85, 0.12),
              0 0 34px rgba(77, 242, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: tlgLbIn .22s ease-out both;
}
@keyframes tlgLbIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.tlg-lb-corner { position: absolute; width: 16px; height: 16px; border: 2px solid var(--cyan); pointer-events: none; opacity: 0.8; }
.tlg-lb-corner.is-tl { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.tlg-lb-corner.is-tr { top: 7px; right: 7px; border-left: 0; border-bottom: 0; opacity: 0.3; }
.tlg-lb-corner.is-bl { bottom: 7px; left: 7px; border-right: 0; border-top: 0; border-color: var(--magenta); }
.tlg-lb-corner.is-br { bottom: 7px; right: 7px; border-left: 0; border-top: 0; border-color: var(--magenta); }

.tlg-lb-head { display: flex; align-items: center; gap: 12px; margin: 0 34px 12px 0; }
.tlg-lb-badge {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  font-size: 27px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 35%, rgba(255, 210, 90, 0.38), rgba(255, 180, 67, 0.08) 70%);
  border: 1px solid var(--edge-hot);
  box-shadow: 0 0 18px rgba(255, 190, 70, 0.3);
  animation: tlgHallBob 2.6s ease-in-out infinite;
}
.tlg-lb-headings { min-width: 0; }
.tlg-lb-head .tlg-lb-title { margin: 0; }

.tlg-lb-scoreline { position: relative; overflow: hidden; }
.tlg-lb-scoreline::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.14) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: tlgShine 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tlgShine { 60%, 100% { transform: translateX(100%); } }
.tlg-lb-scorevalue { font-size: 20px; letter-spacing: 0.06em; text-shadow: 0 0 10px rgba(77, 242, 255, 0.55); }

.tlg-lb-inputwrap { position: relative; }
.tlg-lb-inputwrap .tlg-lb-input { padding-right: 60px; }
.tlg-lb-count {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  font: 700 10px/1 var(--font-pixel);
  color: var(--muted);
  pointer-events: none;
}
.tlg-lb-count.is-full { color: var(--amber); }

.tlg-lb-emoji {
  display: block;
  margin: 10px 0 12px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.28);
}
.tlg-lb-drawers {
  display: flex;
  gap: 4px;
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}
.tlg-lb-drawer {
  flex: 1 1 0;
  height: 32px;
  font-size: 17px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  filter: grayscale(0.55);
  opacity: 0.75;
  transition: filter .15s ease, opacity .15s ease, background .15s ease;
}
.tlg-lb-drawer:hover { opacity: 1; filter: none; }
.tlg-lb-drawer.is-active {
  opacity: 1;
  filter: none;
  background: rgba(77, 242, 255, 0.14);
  border-color: rgba(77, 242, 255, 0.5);
  box-shadow: 0 0 10px rgba(77, 242, 255, 0.2);
}
.tlg-lb-emojigrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.tlg-lb-emojigrid .tlg-lb-emojibtn { width: auto; height: 34px; font-size: 18px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.tlg-lb-emojigrid .tlg-lb-emojibtn:hover { transform: translateY(-2px) scale(1.08); border-color: rgba(255, 76, 168, 0.55); box-shadow: 0 0 12px rgba(255, 76, 168, 0.35); }
.tlg-lb-emojigrid .tlg-lb-emojibtn:active { transform: scale(0.94); }

.tlg-lb-preview { display: grid; gap: 5px; margin: 0 0 12px; }
.tlg-lb-preview-label { font: 700 9px/1 var(--font-pixel); letter-spacing: 0.22em; color: var(--muted); }
.tlg-lb-preview-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--font-pixel);
  font-size: 13px;
  background: rgba(255, 180, 67, 0.12);
  box-shadow: inset 0 0 0 1px var(--edge-hot);
}
.tlg-lb-preview-medal { text-align: center; font-size: 16px; }
.tlg-lb-preview-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlg-lb-preview-score { color: var(--cyan); font-weight: 700; }

.tlg-lb-submit { background: linear-gradient(180deg, #8ff8ff, var(--cyan)); box-shadow: 0 0 16px rgba(77, 242, 255, 0.3); }

.tlg-lb-row { grid-template-columns: 48px 1fr auto; }
.tlg-lb-rank { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.tlg-lb-rank i { font-style: normal; }
.tlg-lb-medal { font-size: 15px; line-height: 1; }
.tlg-lb-row[data-rank="1"] { background: linear-gradient(90deg, rgba(255, 200, 80, 0.18), transparent 75%); }
.tlg-lb-row[data-rank="2"] { background: linear-gradient(90deg, rgba(215, 226, 224, 0.13), transparent 75%); }
.tlg-lb-row[data-rank="3"] { background: linear-gradient(90deg, rgba(208, 154, 94, 0.15), transparent 75%); }
.tlg-lb-you {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 5px;
  font: 800 8px/1 var(--font-display);
  font-style: normal;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--magenta);
  border-radius: 5px;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(255, 76, 168, 0.5);
}

/* ==========================================================================
   TRANSMISSIONS (CHAT)  (chat-v3.js; was LOST CHAT, styled above)
   Signal bars in the header, a tray of gaming emoji over the message box,
   avatar tiles and a little more cabinet detail on the panel.
   ========================================================================== */
.lost-chat-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px);
  pointer-events: none;
}
.lost-chat-head { position: relative; background: linear-gradient(180deg, rgba(255, 218, 85, 0.07), transparent); }
.lost-chat-head::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(77, 242, 255, 0.7), rgba(255, 76, 168, 0.7), transparent);
}
.lost-chat-title { font-size: 12px; letter-spacing: 0.1em; white-space: nowrap; }
.lost-chat-signal { display: inline-flex; align-items: flex-end; gap: 2px; flex: 0 0 auto; height: 14px; }
.lost-chat-signal i { display: block; width: 3px; border-radius: 1px; background: rgba(174, 184, 181, 0.45); }
.lost-chat-signal i:nth-child(1) { height: 4px; }
.lost-chat-signal i:nth-child(2) { height: 7px; }
.lost-chat-signal i:nth-child(3) { height: 10px; }
.lost-chat-signal i:nth-child(4) { height: 14px; }
.lost-chat-panel.is-live .lost-chat-signal i {
  background: var(--green);
  box-shadow: 0 0 6px rgba(155, 255, 117, 0.6);
  animation: lostChatSignal 1.6s ease-in-out infinite;
}
.lost-chat-panel.is-live .lost-chat-signal i:nth-child(2) { animation-delay: .15s; }
.lost-chat-panel.is-live .lost-chat-signal i:nth-child(3) { animation-delay: .3s; }
.lost-chat-panel.is-live .lost-chat-signal i:nth-child(4) { animation-delay: .45s; }
@keyframes lostChatSignal { 50% { opacity: 0.35; } }

.lost-chat-ava {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 13px;
  border-radius: 7px;
  background: rgba(77, 242, 255, 0.1);
  border: 1px solid rgba(77, 242, 255, 0.3);
}
.lost-chat-line.is-mine .lost-chat-ava { background: rgba(255, 76, 168, 0.12); border-color: rgba(255, 76, 168, 0.4); }

.lost-chat-emoji-toggle {
  flex: 0 0 auto;
  width: 38px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  border: 1px solid rgba(255, 218, 85, 0.45);
  border-radius: 10px;
  background: rgba(255, 218, 85, 0.1);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.lost-chat-emoji-toggle:hover,
.lost-chat-emoji-toggle.is-on {
  background: rgba(255, 218, 85, 0.2);
  box-shadow: 0 0 12px rgba(255, 218, 85, 0.35);
  transform: translateY(-1px);
}
.lost-chat-emoji {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  margin: 0 12px 8px;
  padding: 8px;
  border: 1px solid rgba(255, 218, 85, 0.3);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
  animation: lostChatIn .14s ease-out both;
}
.lost-chat-emoji[hidden] { display: none !important; }
.lost-chat-emoji-btn {
  height: 32px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: transform .1s ease, background .1s ease, border-color .1s ease;
}
.lost-chat-emoji-btn:hover { background: rgba(255, 76, 168, 0.16); border-color: rgba(255, 76, 168, 0.45); transform: translateY(-1px) scale(1.1); }
.lost-chat-emoji-btn:active { transform: scale(0.92); }

/* The tray's two pages: EMOJI (typed into the box) and STICKERS (sent on tap).
   The tray keeps .lost-chat-emoji for its frame and [hidden] rule; the grid moves
   down onto each page. Stickers come from one sheet (tools/chat-stickers). */
.lost-chat-tray {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lost-chat-tray-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
}
.lost-chat-tray-tab {
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font: 800 10px/1.1 var(--font-display);
  letter-spacing: .1em;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.lost-chat-tray-tab:hover { color: #ffffff; background: rgba(255, 255, 255, 0.06); }
.lost-chat-tray-tab.is-active {
  color: #ffe27a;
  border-color: rgba(255, 218, 85, 0.5);
  background: rgba(255, 218, 85, 0.14);
  box-shadow: 0 0 10px rgba(255, 218, 85, 0.18);
}
.lost-chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  max-height: min(236px, 36vh);
  padding-right: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 218, 85, 0.35) transparent;
}
.lost-chat-sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  max-height: min(236px, 36vh);
  padding-right: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 218, 85, 0.35) transparent;
}
.lost-chat-emoji-grid[hidden],
.lost-chat-sticker-grid[hidden] { display: none !important; }
.lost-chat-sticker-group {
  grid-column: 1 / -1;
  margin-top: 2px;
  color: rgba(77, 242, 255, 0.8);
  font: 800 9px/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lost-chat-sticker-btn {
  aspect-ratio: 1;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.lost-chat-sticker-btn:hover,
.lost-chat-sticker-btn:focus-visible {
  outline: none;
  border-color: rgba(255, 76, 168, 0.45);
  background: rgba(255, 76, 168, 0.14);
  transform: translateY(-2px) rotate(-3deg) scale(1.06);
}
.lost-chat-sticker-btn:active { transform: scale(0.94); }
.lost-chat-sticker-face,
.lost-chat-sticker {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}
/* A sent sticker stands on its own, no bubble text around it. */
.lost-chat-body.is-sticker {
  margin: 4px 0 0;
  line-height: 0;
}
.lost-chat-sticker {
  width: 112px;
  height: 112px;
}
/* Tray faces are pinned to the button's edges instead of height:100%. Older iOS
   WebKit resolves a percentage height inside an aspect-ratio <button> to 0, which
   left every tray sticker (and avatar) blank on phones. Absolute insets size off
   the button box on every engine; the padding-bottom square covers browsers
   without aspect-ratio at all. */
.lost-chat-sticker-btn,
.lost-chat-avatars-btn {
  position: relative;
  min-width: 0;
}
.lost-chat-sticker-btn .lost-chat-sticker-face {
  position: absolute;
  inset: 3px;
  width: auto;
  height: auto;
}
.lost-chat-avatars-btn .lost-chat-avatars-face {
  position: absolute;
  inset: 2px;
  width: auto;
  height: auto;
}
@supports not (aspect-ratio: 1 / 1) {
  .lost-chat-sticker-btn,
  .lost-chat-avatars-btn {
    height: 0;
    padding: 0 0 100%;
  }
}

/* Character avatars (tools/chat-stickers bakes the round badges): the "me"
   button, the badge on every line, and the picker the button opens. A legacy
   emoji avatar keeps the old square chip - only .is-char goes round. */
.lost-chat-avatar,
.lost-chat-ava {
  background-repeat: no-repeat;
}
.lost-chat-avatar { transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.lost-chat-avatar:hover { transform: translateY(-1px); }
.lost-chat-avatar.is-char,
.lost-chat-ava.is-char {
  border-radius: 50%;
  background-color: #10131c;
  font-size: 0;
}
.lost-chat-avatar.is-char {
  border: 2px solid rgba(77, 242, 255, 0.55);
  box-shadow: 0 0 10px rgba(77, 242, 255, 0.2);
}
.lost-chat-avatar.is-on {
  border-color: #ffe27a;
  box-shadow: 0 0 12px rgba(255, 218, 85, 0.4);
}
.lost-chat-ava.is-char {
  width: 24px;
  height: 24px;
  border: 1.5px solid rgba(77, 242, 255, 0.45);
}
.lost-chat-line.is-mine .lost-chat-ava.is-char { border-color: rgba(255, 76, 168, 0.55); }
.lost-chat-avatars {
  margin: 8px 12px 0;
  padding: 8px;
  border: 1px solid rgba(77, 242, 255, 0.3);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}
.lost-chat-avatars[hidden] { display: none !important; }
.lost-chat-avatars-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.lost-chat-avatars-title {
  color: #ffe27a;
  font: 800 10px/1 var(--font-display);
  letter-spacing: .12em;
}
.lost-chat-avatars-close {
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.lost-chat-avatars-close:hover { color: #ffffff; }
.lost-chat-avatars-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  max-height: min(220px, 34vh);
  padding-right: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(77, 242, 255, 0.35) transparent;
}
.lost-chat-avatars-group {
  grid-column: 1 / -1;
  margin-top: 2px;
  color: rgba(77, 242, 255, 0.8);
  font: 800 9px/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lost-chat-avatars-btn {
  aspect-ratio: 1;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.lost-chat-avatars-btn:hover,
.lost-chat-avatars-btn:focus-visible {
  outline: none;
  border-color: rgba(255, 76, 168, 0.6);
  transform: scale(1.08);
}
.lost-chat-avatars-btn.is-selected {
  border-color: #ffe27a;
  box-shadow: 0 0 10px rgba(255, 218, 85, 0.45);
}
.lost-chat-avatars-face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-repeat: no-repeat;
}

/* Phonetic typing key beside the message box: shows the site language's script
   (Я, あ, अ, č ...), lit while typing converts, dimmed when switched off. */
.lost-chat-script,
.lost-phonetic-key {
  flex: 0 0 auto;
  width: 38px;
  padding: 0;
  border: 1px solid rgba(77, 242, 255, 0.3);
  border-radius: 10px;
  background: rgba(77, 242, 255, 0.05);
  color: rgba(223, 247, 255, 0.5);
  font: 700 16px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lost-chat-script.is-on,
.lost-phonetic-key.is-on {
  border-color: rgba(77, 242, 255, 0.7);
  background: rgba(77, 242, 255, 0.16);
  color: #dff7ff;
  box-shadow: 0 0 10px rgba(77, 242, 255, 0.25);
}
.lost-chat-script[hidden],
.lost-phonetic-key[hidden] { display: none !important; }

/* The same key in the high-score name entry, left of the name box. The count
   stays pinned inside the box's right edge, since the box is the last item. */
.tlg-lb-inputwrap {
  display: flex;
  gap: 8px;
}
.tlg-lb-inputwrap .tlg-lb-input {
  flex: 1 1 auto;
  min-width: 0;
}
.tlg-lb-script {
  width: 46px;
  border-radius: 9px;
  font-size: 19px;
}

@media (prefers-reduced-motion: reduce) {
  .lost-chat-sticker-btn, .lost-chat-sticker-btn:hover { transition: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tlg-hall-step.is-rank-1 .tlg-hall-medal, .tlg-hall-step.is-ghost, .tlg-lb-row.is-ghost,
  .tlg-lb-panel, .tlg-lb-badge, .tlg-lb-scoreline::after,
  .lost-chat-panel.is-live .lost-chat-signal i, .lost-chat-emoji { animation: none; }
}

/* ==========================================================================
   JUNGLE RUMBLE: DESKTOP FULLSCREEN
   The phone player's fullscreen button on the web player too, right beside
   Exit Home. Fullscreen fills the screen with the fight (16:9, letterboxed);
   Esc - the browser's own exit - or the button again returns to the normal
   view. Scoped to a fine pointer so the phone player keeps its own layout.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  body.is-player-open[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) .embedded-topline {
    justify-content: flex-start;
    gap: 10px;
  }

  body.is-player-open[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) .now-playing {
    margin-left: auto;
  }

  body.is-player-open[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) .fullscreen-toggle:not([hidden]) {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    min-width: 46px;
    height: 46px;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }

  body.is-player-open[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) .fullscreen-toggle:hover,
  body.is-player-open[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) .fullscreen-toggle:focus-visible {
    border-color: var(--cyan);
    box-shadow: 0 0 16px rgba(77, 242, 255, 0.35);
    transform: translateY(-1px);
  }

  body.is-game-fullscreen[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) #embedded-game-view {
    grid-template-rows: 1fr;
    place-items: center;
    gap: 0;
    padding: 0;
    background: #000;
  }

  /* Exit Home and the toggle float over the arena's top-left corner, dimmed
     until the pointer reaches them, so the HUD portrait stays readable. */
  body.is-game-fullscreen[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) #embedded-game-view .embedded-topline {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 150;
    opacity: 0.3;
    transition: opacity .2s ease;
  }

  body.is-game-fullscreen[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) #embedded-game-view .embedded-topline:hover,
  body.is-game-fullscreen[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) #embedded-game-view .embedded-topline:focus-within {
    opacity: 1;
  }

  body.is-game-fullscreen[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) .now-playing,
  body.is-game-fullscreen[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) #embedded-controls {
    display: none !important;
  }

  body.is-game-fullscreen[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) #embedded-game-view .embedded-stage {
    width: min(100vw, 177.78vh);
    max-width: none;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  body.is-game-fullscreen[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) #jungle-rumble-frame {
    width: 100%;
    height: auto;
    max-height: 100vh;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.is-game-fullscreen[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) .game-sound-toggle {
    top: auto;
    bottom: 14px;
    right: 14px;
  }
}


/* ==========================================================================
   RubixWRLD + Roomquake logos, top right of the web player only (registry
   `logo`). The phone players are full-bleed or short on height, so the logo
   stays out of them.
   ========================================================================== */
body[data-active-game="rubixwrld"][data-active-game-mode="mobile"] .embedded-game-logo,
body[data-active-game="roomquake"][data-active-game-mode="mobile"] .embedded-game-logo {
  display: none !important;
}

/* RubixWRLD's logo is nearly square; capped so the top row does not take the cube's room. */
body[data-active-game="rubixwrld"] .embedded-game-logo {
  width: clamp(120px, 14vw, 200px);
  max-height: 124px;
}

body[data-active-game="roomquake"] .embedded-game-logo {
  width: clamp(200px, 22vw, 330px);
  max-height: 100px;
}

/* ==========================================================================
   Roomquake, Jungle Rumble, RubixWRLD: the sound toggle, web player
   Top-right like every other game, but OUTSIDE the game: each of these HUDs
   owns its canvas corners (Roomquake's mission list, Jungle Rumble's player-2
   portrait, RubixWRLD's MOVES / TIME), which is why the toggle had been pushed
   down inside the frame. Level with the top of the frame instead:
   - wide windows: just past the stage's right edge, in the page margin;
   - narrower windows: the stage gives the frame a slim right-hand gutter and
     the toggle sits in it;
   - Jungle Rumble fullscreen: the fight fills the screen, so the toggle joins
     the dimmed Exit Home group at top-left.
   Phones keep their own placements (fine pointer + web mode only).
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  body.is-player-open[data-active-game="roomquake"]:not([data-active-game-mode="mobile"]) .game-sound-toggle,
  body.is-player-open[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) .game-sound-toggle,
  body.is-player-open[data-active-game="rubixwrld"]:not([data-active-game-mode="mobile"]) .game-sound-toggle {
    top: 14px;
    bottom: auto;
    right: -58px;
    left: auto;
  }
}

@media (hover: hover) and (pointer: fine) and (max-width: 1179.98px) {
  body.is-player-open[data-active-game="roomquake"]:not([data-active-game-mode="mobile"]) #embedded-game-view .embedded-stage,
  body.is-player-open[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) #embedded-game-view .embedded-stage,
  body.is-player-open[data-active-game="rubixwrld"]:not([data-active-game-mode="mobile"]) #embedded-game-view .embedded-stage {
    padding-right: 66px;
  }

  body.is-player-open[data-active-game="roomquake"]:not([data-active-game-mode="mobile"]) .game-sound-toggle,
  body.is-player-open[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) .game-sound-toggle,
  body.is-player-open[data-active-game="rubixwrld"]:not([data-active-game-mode="mobile"]) .game-sound-toggle {
    right: 11px;
  }
}

/* Roomquake, web player: a bigger game. The game scales to fill its frame
   (sharp-bilinear, src/roomquake/Render.js), so the frame sets the game's size.
   It takes the game's own 5:3 shape and grows with the window, up to the same
   vertical chrome budget every player uses. The stage keeps 90px either side,
   where the sound toggle sits just past its right edge. */
@media (hover: hover) and (pointer: fine) {
  body.is-player-open[data-active-game="roomquake"]:not([data-active-game-mode="mobile"]) #embedded-game-view .embedded-stage {
    width: min(1480px, calc(100vw - 180px));
  }

  body.is-player-open[data-active-game="roomquake"]:not([data-active-game-mode="mobile"]) #roomquake-frame {
    height: auto;
    aspect-ratio: 5 / 3;
    max-height: calc(100vh - var(--player-chrome));
  }
}

/* Jungle Rumble, web player: the frame takes the game's own 16:9. The shared
   frame is the stage's full width at a capped height - 1.73:1 on a big window
   and wider still on a short one - so the 16:9 fight sat in a letterbox with
   dark bars down both sides. The width now follows the height budget, so the
   frame and the canvas are always the same shape. Fullscreen keeps its own rules. */
@media (hover: hover) and (pointer: fine) {
  body.is-player-open[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]):not(.is-game-fullscreen) #jungle-rumble-frame {
    justify-self: center;
    width: min(100%, calc((100vh - var(--player-chrome)) * 16 / 9));
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
  }
}

/* Controller legend, Jungle Rumble web player: while a pad is connected, a
   strip inside the stage's border, under the fight, lists that pad's buttons -
   Xbox letters or PlayStation symbols (renderPadLegend in
   script-translations-mobile-v19.js). The frame gives up the strip's height
   from the same vertical budget, so the whole stage still fits the window. */
.pad-legend {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  body.is-player-open.has-pad-legend[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) #embedded-controls {
    display: none !important;
  }

  body.is-player-open.has-pad-legend[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]):not(.is-game-fullscreen) #jungle-rumble-frame {
    width: min(100%, calc((100vh - var(--player-chrome) - 46px) * 16 / 9));
  }

  body.is-player-open.has-pad-legend[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]):not(.is-game-fullscreen) .pad-legend:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 16px;
    padding: 8px 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #dfe8f2;
    font: 700 11px/1 var(--font-pixel, monospace);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

.pad-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.pad-legend-name {
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #9fe8b8;
  letter-spacing: 0.14em;
}

.pad-legend.is-playstation .pad-legend-name {
  color: #9fc0ff;
}

.pad-glyph {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  background: #1b2230;
  color: #eef3f8;
  font: 800 10px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: inset 0 -2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.pad-glyph.is-face,
.pad-glyph.is-stick {
  width: 20px;
  padding: 0;
  border-radius: 50%;
}

.pad-glyph.is-stick {
  background: radial-gradient(circle, #3a4456 0 44%, #1b2230 50%);
}

.pad-glyph.is-dpad {
  font-size: 12px;
}

.pad-legend.is-xbox .pad-glyph.is-b0 { background: #3fae4a; color: #fff; }
.pad-legend.is-xbox .pad-glyph.is-b1 { background: #d9383f; color: #fff; }
.pad-legend.is-xbox .pad-glyph.is-b2 { background: #2f6fd8; color: #fff; }
.pad-legend.is-xbox .pad-glyph.is-b3 { background: #e6b422; color: #1b1405; }
.pad-legend.is-playstation .pad-glyph.is-face { font-size: 12px; }
.pad-legend.is-playstation .pad-glyph.is-b0 { color: #8fb2ff; }
.pad-legend.is-playstation .pad-glyph.is-b1 { color: #ff6f7d; }
.pad-legend.is-playstation .pad-glyph.is-b2 { color: #f39ad4; }
.pad-legend.is-playstation .pad-glyph.is-b3 { color: #52d8a8; }

@media (hover: hover) and (pointer: fine) {
  body.is-game-fullscreen[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) .game-sound-toggle {
    position: fixed;
    top: 14px;
    bottom: auto;
    left: 228px;   /* Exit Home 148 + 10 gap + fullscreen 46 + 10 gap, from 14 */
    right: auto;
    opacity: 0.3;
    transition: opacity .2s ease;
  }

  body.is-game-fullscreen[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) .game-sound-toggle:hover,
  body.is-game-fullscreen[data-active-game="jungle-rumble"]:not([data-active-game-mode="mobile"]) .game-sound-toggle:focus-visible {
    opacity: 1;
  }
}


/* ------------------------------------------------------------------
   JUNGLE RUMBLE, mobile: symbols on the action buttons instead of words,
   like Offset's and Wordventure's. Same technique as Offset's block: inline
   SVG data URIs, and the word kept in the DOM, hidden visually, as each
   button's accessible name. Light is three claw scratches, Heavy an impact
   burst, Dash a double chevron, Flurry three impact sparks, Breaker a cracked
   shield, Pause two bars. The green is the game's own accent.
   ------------------------------------------------------------------ */
@media (hover: none), (pointer: coarse) {
  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-action-button[data-mobile-icon] {
    display: grid !important;
    place-items: center;
    min-width: clamp(44px, 12.5vh, 58px) !important;
    min-height: clamp(44px, 12.5vh, 58px) !important;
    padding: 4px !important;
    border-radius: 14px !important;
  }

  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-action-button[data-mobile-icon] > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-action-button[data-mobile-icon]::before {
    width: clamp(26px, 8vh, 36px);
    height: clamp(26px, 8vh, 36px);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55));
  }

  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-action-button[data-mobile-icon="jr-light"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(2 1.6)' fill='%2384f060' fill-opacity='.55'><path d='M16 4C16.8 18.2 13.8 31.5 7 44C8.9 30.4 11.9 17.1 16 4Z'/><path d='M27 2C28.3 17.5 25.3 32.2 18 46C19.4 31 22.4 16.3 27 2Z'/><path d='M37 4C37.8 18.2 34.8 31.5 28 44C29.9 30.4 32.9 17.1 37 4Z'/></g><g fill='%23f7f2e8' stroke='%23f7f2e8' stroke-width='.6'><path d='M16 4C16.8 18.2 13.8 31.5 7 44C8.9 30.4 11.9 17.1 16 4Z'/><path d='M27 2C28.3 17.5 25.3 32.2 18 46C19.4 31 22.4 16.3 27 2Z'/><path d='M37 4C37.8 18.2 34.8 31.5 28 44C29.9 30.4 32.9 17.1 37 4Z'/></g><path d='M42 28 L42.9 32.1 L47 33 L42.9 33.9 L42 38 L41.1 33.9 L37 33 L41.1 32.1Z' fill='%23ffd166'/><path d='M8.8 6.7 L7.4 9 L8.8 11.3 L6.5 9.9 L4.2 11.3 L5.6 9 L4.2 6.7 L6.5 8.1Z' fill='%23f7f2e8' fill-opacity='.85'/></svg>");
  }

  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-action-button[data-mobile-icon="jr-heavy"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M24 2.5 L27.9 12.1 L36.6 6.6 L34.1 16.7 L44.4 17.4 L36.5 24 L44.4 30.6 L34.1 31.3 L36.6 41.4 L27.9 35.9 L24 45.5 L20.1 35.9 L11.4 41.4 L13.9 31.3 L3.6 30.6 L11.5 24 L3.6 17.4 L13.9 16.7 L11.4 6.6 L20.1 12.1Z' fill='%2384f060' fill-opacity='.3' stroke='%23f7f2e8' stroke-width='2.4'/><path d='M27.6 13.1 L27.8 18.8 L33.3 17.2 L30.1 22 L35.5 24 L30.1 26 L33.3 30.8 L27.8 29.2 L27.6 34.9 L24 30.4 L20.4 34.9 L20.2 29.2 L14.7 30.8 L17.9 26 L12.5 24 L17.9 22 L14.7 17.2 L20.2 18.8 L20.4 13.1 L24 17.6Z' fill='%23ffd166' stroke='%23f7f2e8' stroke-width='1.4'/><circle cx='24' cy='24' r='2.7' fill='%23fffdf6'/></svg>");
  }

  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-action-button[data-mobile-icon="jr-dash"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 16H9M1 24h7.5M2.5 32H9' stroke='%2384f060' stroke-width='2.3' stroke-opacity='.8'/><path d='M12 9h7.5L31 24 19.5 39H12l11.5-15z' fill='%23f7f2e8' fill-opacity='.42' stroke='%23f7f2e8' stroke-opacity='.42' stroke-width='1.2'/><path d='M23 9h7.5L42 24 30.5 39H23l11.5-15z' fill='%23f7f2e8' stroke='%23f7f2e8' stroke-width='1.2'/><path d='M31.5 10.5L41 24l-9.5 13.5' stroke='%2384f060' stroke-width='1.6'/></svg>");
  }

  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-action-button[data-mobile-icon="jr-flurry"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 27Q5.5 38 14.5 43.5M21 4q6-1.4 11 .2' stroke='%23f7f2e8' stroke-opacity='.55' stroke-width='2'/><path d='M30.5 16.5 L33 28 L44.5 30.5 L33 33 L30.5 44.5 L28 33 L16.5 30.5 L28 28Z' fill='%2384f060' fill-opacity='.55'/><path d='M29 15 L31.5 26.5 L43 29 L31.5 31.5 L29 43 L26.5 31.5 L15 29 L26.5 26.5Z' fill='%23f7f2e8'/><path d='M19 8 L15.4 14 L19 20 L13 16.4 L7 20 L10.6 14 L7 8 L13 11.6Z' fill='%23ffd166'/><path d='M40.5 3.5 L41.6 7.9 L46 9 L41.6 10.1 L40.5 14.5 L39.4 10.1 L35 9 L39.4 7.9Z' fill='%2384f060'/></svg>");
  }

  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-action-button[data-mobile-icon="jr-breaker"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M24 4l15 5.5V21c0 10-6.5 18.5-15 23-8.5-4.5-15-13-15-23V9.5z' fill='%23163016' fill-opacity='.7' stroke='%23f7f2e8' stroke-width='2.4'/><path d='M24 8.6l11 4v8.6c0 7.6-4.7 14.2-11 18-6.3-3.8-11-10.4-11-18v-8.6z' stroke='%23f7f2e8' stroke-opacity='.35' stroke-width='1.2'/><path d='M27 10L16.5 26h7L20 38.5l12-17h-7z' fill='%2384f060' stroke='%23f7f2e8' stroke-width='1.2'/><path d='M3.5 12l4.5 2.5-3 3zM43 31l-3 4.2 4.6.9z' fill='%23ffd166'/></svg>");
  }

  body.is-player-open[data-active-game="jungle-rumble"] #mobile-controls .mobile-action-button[data-mobile-icon="jr-pause"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke-linecap='round' stroke-linejoin='round'><circle cx='24' cy='24' r='19.5' fill='%2384f060' fill-opacity='.14' stroke='%23f7f2e8' stroke-opacity='.4' stroke-width='1.8'/><g fill='%2384f060' fill-opacity='.55'><rect x='16.7' y='14.2' width='6.5' height='22' rx='2.2'/><rect x='27.2' y='14.2' width='6.5' height='22' rx='2.2'/></g><g fill='%23f7f2e8'><rect x='15.5' y='13' width='6.5' height='22' rx='2.2'/><rect x='26' y='13' width='6.5' height='22' rx='2.2'/></g><g fill='%23ffffff' fill-opacity='.8'><rect x='17' y='15' width='1.6' height='8' rx='.8'/><rect x='27.5' y='15' width='1.6' height='8' rx='.8'/></g></svg>");
  }
}

/* Jungle Rumble on a phone: landscape only (syncRotatePrompt in
   script-translations-mobile-v19.js). Upright, the player shows a
   turn-sideways card, and the game frame and its controls are hidden - which
   also pauses the game, because a hidden frame gets no animation frames. */
.rotate-landscape-prompt {
  display: none;
}

@media (orientation: portrait) and (hover: none), (orientation: portrait) and (pointer: coarse) {
  body.is-player-open[data-active-game="jungle-rumble"][data-active-game-mode="mobile"] .rotate-landscape-prompt:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    padding: 32px 28px;
    text-align: center;
    background: radial-gradient(circle at 50% 38%, rgba(119, 239, 89, 0.16), transparent 55%), #050912;
    color: #eaf6e6;
  }

  body.is-player-open[data-active-game="jungle-rumble"][data-active-game-mode="mobile"] #jungle-rumble-frame,
  body.is-player-open[data-active-game="jungle-rumble"][data-active-game-mode="mobile"] #mobile-controls {
    display: none !important;
  }
}

.rlp-phone {
  position: relative;
  width: 58px;
  height: 96px;
  border: 4px solid #84f060;
  border-radius: 12px;
  box-shadow: 0 0 22px rgba(132, 240, 96, 0.35), inset 0 0 12px rgba(132, 240, 96, 0.12);
  animation: rlpTurn 2.4s cubic-bezier(0.6, 0, 0.2, 1) infinite;
}

.rlp-phone i {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 14px;
  height: 4px;
  margin-left: -7px;
  border-radius: 2px;
  background: #84f060;
}

.rlp-title {
  margin: 10px 0 0;
  font: 800 clamp(20px, 6vw, 26px) / 1.15 var(--font-display, "Arial Black", sans-serif);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.rlp-copy {
  max-width: 260px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(234, 246, 230, 0.72);
}

.rlp-exit {
  margin-top: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(132, 240, 96, 0.5);
  border-radius: 999px;
  background: rgba(132, 240, 96, 0.08);
  color: #eaf6e6;
  font: 700 12px / 1 var(--font-pixel, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@keyframes rlpTurn {
  0%, 18% { transform: rotate(0deg); }
  52%, 80% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}