/* Shared premium visual layer for Dimension Marta browser games. */

:root {
  --dm-game-ink: #24162d;
  --dm-game-muted: #62526b;
  --dm-game-gold: #ffc93c;
  --dm-game-blue: #8edfff;
  --dm-game-pink: #ffc5df;
  --dm-game-mint: #b8ffd8;
  --dm-game-lilac: #b98cff;
  --dm-game-shadow: 0 24px 64px rgba(50, 31, 65, 0.24);
}

body.sphinx-game-page,
body.sphinx-game-embed,
body.sphinx-runner-page,
body.sphinx-runner-embed,
body.sphinx-breakout-page,
body.sphinx-breakout-embed,
body.sphinx-race-page,
body.sphinx-race-embed,
body.pug-torre-page,
body.pug-torre-embed,
body.hamster-turbo-page,
body.hamster-turbo-embed,
body.sphynx-canon-page,
body.sphynx-canon-embed {
  min-height: 100vh;
  color: var(--dm-game-ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(255, 242, 130, 0.84), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(142, 223, 255, 0.66), transparent 27%),
    radial-gradient(circle at 16% 86%, rgba(255, 166, 219, 0.48), transparent 30%),
    radial-gradient(circle at 80% 90%, rgba(184, 255, 216, 0.54), transparent 28%),
    linear-gradient(155deg, #fffaf0 0%, #ffeaf7 48%, #eaf7ff 100%) !important;
  overflow-x: hidden;
}

body.sphinx-game-page::before,
body.sphinx-game-embed::before,
body.sphinx-runner-page::before,
body.sphinx-runner-embed::before,
body.sphinx-breakout-page::before,
body.sphinx-breakout-embed::before,
body.sphinx-race-page::before,
body.sphinx-race-embed::before,
body.pug-torre-page::before,
body.pug-torre-embed::before,
body.hamster-turbo-page::before,
body.hamster-turbo-embed::before,
body.sphynx-canon-page::before,
body.sphynx-canon-embed::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.72;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 2px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 201, 60, 0.55) 0 3px, transparent 3.5px),
    radial-gradient(circle, rgba(185, 140, 255, 0.36) 0 2px, transparent 2.5px);
  background-position: 18px 30px, 92px 74px, 160px 18px;
  background-size: 190px 170px, 230px 210px, 260px 240px;
}

.sphinx-game-shell,
.runner-game-shell,
.ark-game-shell,
.race-game-shell,
.torre-game-shell,
.turbo-game-shell,
.canon-game-shell {
  position: relative;
  isolation: isolate;
  padding: clamp(10px, 2.5vw, 22px) 0 clamp(20px, 4vw, 34px);
}

.sphinx-game,
.runner-game,
.ark-game,
.race-game,
.torre-game,
.turbo-game,
.canon-game {
  position: relative;
  isolation: isolate;
  border: 3px solid rgba(36, 22, 45, 0.96) !important;
  border-radius: 30px !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.95), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(255, 242, 130, 0.66), transparent 26%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 241, 249, 0.94) 48%, rgba(230, 248, 255, 0.94) 100%) !important;
  box-shadow: 0 12px 0 rgba(36, 22, 45, 0.14), var(--dm-game-shadow) !important;
}

.sphinx-game::before,
.runner-game::before,
.ark-game::before,
.race-game::before,
.torre-game::before,
.turbo-game::before,
.canon-game::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 0;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 24px;
  pointer-events: none;
  box-shadow: inset 0 0 32px rgba(255, 255, 255, 0.72);
}

.sphinx-game > *,
.runner-game > *,
.ark-game > *,
.race-game > *,
.torre-game > *,
.turbo-game > *,
.canon-game > * {
  position: relative;
  z-index: 1;
}

.game-topbar,
.runner-topbar,
.ark-topbar,
.race-topbar,
.torre-topbar,
.turbo-topbar,
.canon-topbar {
  gap: 8px !important;
  padding: 12px !important;
  border-bottom: 2px solid rgba(36, 22, 45, 0.86) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.34), transparent 24%),
    linear-gradient(120deg, rgba(36, 22, 45, 0.98), rgba(64, 35, 96, 0.96) 56%, rgba(16, 118, 110, 0.95)) !important;
}

.game-stat,
.runner-stat,
.ark-stat,
.race-stat,
.torre-stat,
.turbo-stat,
.canon-stat {
  min-width: 0;
  padding: 9px 8px !important;
  border: 2px solid rgba(36, 22, 45, 0.92) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 48%),
    linear-gradient(145deg, #fff68a, var(--dm-game-gold)) !important;
  box-shadow: inset 0 -5px 0 rgba(36, 22, 45, 0.12), 0 6px 12px rgba(36, 22, 45, 0.14) !important;
  text-align: center;
}

.game-stat:nth-child(2),
.runner-stat:nth-child(2),
.ark-stat:nth-child(2),
.race-stat:nth-child(2),
.torre-stat:nth-child(2),
.turbo-stat:nth-child(2),
.canon-stat:nth-child(2) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 48%),
    linear-gradient(145deg, #e8fbff, var(--dm-game-blue)) !important;
}

.game-stat:nth-child(3),
.runner-stat:nth-child(3),
.ark-stat:nth-child(3),
.race-stat:nth-child(3),
.torre-stat:nth-child(3),
.turbo-stat:nth-child(3),
.canon-stat:nth-child(3) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 48%),
    linear-gradient(145deg, #ffe6f3, var(--dm-game-pink)) !important;
}

.game-stat:nth-child(4),
.runner-stat:nth-child(4),
.ark-stat:nth-child(4),
.race-stat:nth-child(4),
.torre-stat:nth-child(4),
.turbo-stat:nth-child(4),
.canon-stat:nth-child(4) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 48%),
    linear-gradient(145deg, #e3fff0, var(--dm-game-mint)) !important;
}

.game-stat span,
.runner-stat span,
.ark-stat span,
.race-stat span,
.torre-stat span,
.turbo-stat span,
.canon-stat span {
  color: rgba(36, 22, 45, 0.72) !important;
  font-size: 0.66rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

.game-stat strong,
.runner-stat strong,
.ark-stat strong,
.race-stat strong,
.torre-stat strong,
.turbo-stat strong,
.canon-stat strong {
  color: var(--dm-game-ink);
  font-size: clamp(1.08rem, 4.6vw, 1.55rem) !important;
  line-height: 1;
}

.game-stage,
.runner-stage,
.ark-stage,
.race-stage,
.torre-stage,
.turbo-stage,
.canon-stage {
  border-radius: 0 0 26px 26px;
  box-shadow: inset 0 16px 34px rgba(255, 255, 255, 0.16);
}

.ark-canvas,
.race-canvas,
.torre-canvas,
.turbo-canvas,
.canon-canvas {
  filter: saturate(1.08) contrast(1.02);
}

@media (max-width: 520px) {
  body.sphinx-game-page .sphinx-game,
  body.sphinx-game-embed .sphinx-game,
  body.sphinx-runner-page .runner-game,
  body.sphinx-runner-embed .runner-game,
  body.sphinx-breakout-page .ark-game,
  body.sphinx-breakout-embed .ark-game,
  body.sphinx-race-page .race-game,
  body.sphinx-race-embed .race-game,
  body.pug-torre-page .torre-game,
  body.pug-torre-embed .torre-game,
  body.hamster-turbo-page .turbo-game,
  body.hamster-turbo-embed .turbo-game,
  body.sphynx-canon-page .canon-game,
  body.sphynx-canon-embed .canon-game {
    border-width: 3px !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 0 rgba(21, 22, 40, 0.16), 0 18px 42px rgba(21, 22, 40, 0.2) !important;
  }

  body.sphinx-game-page .game-topbar,
  body.sphinx-game-embed .game-topbar,
  body.sphinx-runner-page .runner-topbar,
  body.sphinx-runner-embed .runner-topbar,
  body.sphinx-breakout-page .ark-topbar,
  body.sphinx-breakout-embed .ark-topbar,
  body.sphinx-race-page .race-topbar,
  body.sphinx-race-embed .race-topbar,
  body.pug-torre-page .torre-topbar,
  body.pug-torre-embed .torre-topbar,
  body.hamster-turbo-page .turbo-topbar,
  body.hamster-turbo-embed .turbo-topbar,
  body.sphynx-canon-page .canon-topbar,
  body.sphynx-canon-embed .canon-topbar {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  body.sphinx-game-page .game-stat,
  body.sphinx-game-embed .game-stat,
  body.sphinx-runner-page .runner-stat,
  body.sphinx-runner-embed .runner-stat,
  body.sphinx-breakout-page .ark-stat,
  body.sphinx-breakout-embed .ark-stat,
  body.sphinx-race-page .race-stat,
  body.sphinx-race-embed .race-stat,
  body.pug-torre-page .torre-stat,
  body.pug-torre-embed .torre-stat,
  body.hamster-turbo-page .turbo-stat,
  body.hamster-turbo-embed .turbo-stat,
  body.sphynx-canon-page .canon-stat,
  body.sphynx-canon-embed .canon-stat {
    padding: 6px 4px !important;
    border-radius: 12px !important;
  }

  body.sphinx-game-page .game-stat span,
  body.sphinx-game-embed .game-stat span,
  body.sphinx-runner-page .runner-stat span,
  body.sphinx-runner-embed .runner-stat span,
  body.sphinx-breakout-page .ark-stat span,
  body.sphinx-breakout-embed .ark-stat span,
  body.sphinx-race-page .race-stat span,
  body.sphinx-race-embed .race-stat span,
  body.pug-torre-page .torre-stat span,
  body.pug-torre-embed .torre-stat span,
  body.hamster-turbo-page .turbo-stat span,
  body.hamster-turbo-embed .turbo-stat span,
  body.sphynx-canon-page .canon-stat span,
  body.sphynx-canon-embed .canon-stat span {
    font-size: 0.56rem !important;
    letter-spacing: 0.01em !important;
  }

  body.sphinx-game-page .game-stat strong,
  body.sphinx-game-embed .game-stat strong,
  body.sphinx-runner-page .runner-stat strong,
  body.sphinx-runner-embed .runner-stat strong,
  body.sphinx-breakout-page .ark-stat strong,
  body.sphinx-breakout-embed .ark-stat strong,
  body.sphinx-race-page .race-stat strong,
  body.sphinx-race-embed .race-stat strong,
  body.pug-torre-page .torre-stat strong,
  body.pug-torre-embed .torre-stat strong,
  body.hamster-turbo-page .turbo-stat strong,
  body.hamster-turbo-embed .turbo-stat strong,
  body.sphynx-canon-page .canon-stat strong,
  body.sphynx-canon-embed .canon-stat strong {
    margin-top: 1px !important;
    font-size: clamp(0.95rem, 4.5vw, 1.25rem) !important;
  }

  body.sphinx-game-page .game-stage,
  body.sphinx-game-embed .game-stage,
  body.sphinx-runner-page .runner-stage,
  body.sphinx-runner-embed .runner-stage,
  body.sphinx-breakout-page .ark-stage,
  body.sphinx-breakout-embed .ark-stage,
  body.sphinx-race-page .race-stage,
  body.sphinx-race-embed .race-stage,
  body.pug-torre-page .torre-stage,
  body.pug-torre-embed .torre-stage,
  body.hamster-turbo-page .turbo-stage,
  body.hamster-turbo-embed .turbo-stage,
  body.sphynx-canon-page .canon-stage,
  body.sphynx-canon-embed .canon-stage {
    height: min(74svh, 620px) !important;
    min-height: 500px !important;
  }

  body.sphinx-game-page .start-visual img,
  body.sphinx-game-embed .start-visual img,
  body.sphinx-runner-page .runner-start-visual img,
  body.sphinx-runner-embed .runner-start-visual img,
  body.sphinx-breakout-page .ark-start-visual img,
  body.sphinx-breakout-embed .ark-start-visual img,
  body.sphinx-race-page .race-start-visual img,
  body.sphinx-race-embed .race-start-visual img,
  body.pug-torre-page .torre-start-visual img,
  body.pug-torre-embed .torre-start-visual img,
  body.hamster-turbo-page .turbo-start-visual img,
  body.hamster-turbo-embed .turbo-start-visual img,
  body.sphynx-canon-page .canon-start-visual img,
  body.sphynx-canon-embed .canon-start-visual img {
    width: min(48vw, 190px) !important;
  }
}

.game-screen,
.runner-screen,
.ark-screen,
.race-screen,
.torre-screen,
.turbo-screen,
.canon-screen {
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.88), transparent 28%),
    radial-gradient(circle at 78% 20%, rgba(255, 201, 60, 0.32), transparent 24%),
    rgba(44, 25, 54, 0.48) !important;
  backdrop-filter: blur(8px);
}

.screen-panel,
.runner-panel,
.ark-panel,
.race-panel,
.torre-panel,
.turbo-panel,
.canon-panel {
  border: 3px solid rgba(36, 22, 45, 0.96) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.95), transparent 32%),
    linear-gradient(160deg, #fffdf6 0%, #fff0f8 50%, #e9f9ff 100%) !important;
  box-shadow: 0 10px 0 rgba(36, 22, 45, 0.14), 0 28px 60px rgba(36, 22, 45, 0.28) !important;
  scrollbar-gutter: stable;
}

.screen-panel h1,
.screen-panel h2,
.runner-panel h1,
.runner-panel h2,
.ark-panel h1,
.ark-panel h2,
.race-panel h1,
.race-panel h2,
.torre-panel h1,
.torre-panel h2,
.turbo-panel h1,
.turbo-panel h2,
.canon-panel h1,
.canon-panel h2 {
  color: var(--dm-game-ink);
  font-size: clamp(1.7rem, 7vw, 2.45rem) !important;
  line-height: 1.02 !important;
  text-wrap: balance;
}

.screen-panel p,
.runner-panel p,
.ark-panel p,
.race-panel p,
.torre-panel p,
.turbo-panel p,
.canon-panel p {
  color: var(--dm-game-muted) !important;
  font-weight: 720;
}

.start-visual,
.runner-start-visual,
.ark-start-visual,
.race-start-visual,
.torre-start-visual,
.turbo-start-visual,
.canon-start-visual {
  position: relative;
  margin-inline: auto;
  border-radius: 24px;
}

.start-visual::before,
.runner-start-visual::before,
.ark-start-visual::before,
.race-start-visual::before,
.torre-start-visual::before,
.turbo-start-visual::before,
.canon-start-visual::before {
  content: "";
  position: absolute;
  inset: 14% 20%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 28%, rgba(255, 201, 60, 0.42) 29% 48%, rgba(142, 223, 255, 0.2) 49% 64%, transparent 65%);
  filter: blur(1px);
}

.start-visual img,
.runner-start-visual img,
.ark-start-visual img,
.race-start-visual img,
.torre-start-visual img,
.turbo-start-visual img,
.canon-start-visual img {
  width: min(68vw, 260px) !important;
  height: auto;
  filter: drop-shadow(0 16px 14px rgba(36, 22, 45, 0.22)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.86)) !important;
}

.wish-preview span,
.runner-preview-token,
.ark-preview-token,
.race-preview-token,
.torre-preview-token,
.turbo-preview-token,
.canon-preview-token {
  border: 2px solid #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 7px 0 rgba(36, 22, 45, 0.16), 0 12px 22px rgba(36, 22, 45, 0.18) !important;
}

.start-rules,
.runner-rules,
.ark-rules,
.race-rules,
.torre-rules,
.turbo-rules,
.canon-rules {
  gap: 7px !important;
}

.start-rules li,
.runner-rules li,
.ark-rules li,
.race-rules li,
.torre-rules li,
.turbo-rules li,
.canon-rules li {
  border: 1px solid rgba(36, 22, 45, 0.06);
  border-radius: 14px !important;
  color: var(--dm-game-ink) !important;
  background: rgba(255, 255, 255, 0.66) !important;
  box-shadow: inset 0 -3px 0 rgba(36, 22, 45, 0.04);
}

.sphinx-button,
.runner-button,
.ark-button,
.race-button,
.torre-button,
.turbo-button,
.canon-button {
  min-height: 48px !important;
  border: 2px solid rgba(36, 22, 45, 0.95) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 0 rgba(36, 22, 45, 0.16) !important;
  font-weight: 950 !important;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.sphinx-button:hover,
.runner-button:hover,
.ark-button:hover,
.race-button:hover,
.torre-button:hover,
.turbo-button:hover,
.canon-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 rgba(36, 22, 45, 0.16) !important;
}

.sphinx-button.primary,
.runner-button.primary,
.ark-button.primary,
.race-button.primary,
.torre-button.primary,
.turbo-button.primary,
.canon-button.primary {
  color: var(--dm-game-ink) !important;
  background: linear-gradient(145deg, #fff78d 0%, var(--dm-game-gold) 55%, #ff9b1a 100%) !important;
}

.sphinx-button.secondary,
.runner-button.secondary,
.ark-button.secondary,
.race-button.secondary,
.torre-button.secondary,
.turbo-button.secondary,
.canon-button.secondary {
  color: var(--dm-game-ink) !important;
  background: linear-gradient(145deg, #e8fbff 0%, #9be4ff 100%) !important;
}

.sphinx-button.dark,
.runner-button.dark,
.ark-button.dark,
.race-button.dark,
.torre-button.dark,
.turbo-button.dark,
.canon-button.dark {
  background: var(--dm-game-ink) !important;
  color: #ffffff !important;
}

.reward-panel,
.runner-reward-panel,
.ark-reward-panel,
.race-reward-panel,
.torre-reward-panel,
.turbo-reward-panel,
.canon-reward-panel {
  border: 2px solid rgba(36, 22, 45, 0.94) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.88), transparent 36%),
    linear-gradient(145deg, #fff789, #ffc93c 58%, #ffb0d3) !important;
  box-shadow: 0 8px 18px rgba(36, 22, 45, 0.14), inset 0 -5px 0 rgba(36, 22, 45, 0.1) !important;
}

.reward-locked,
.runner-reward-locked,
.ark-reward-locked,
.race-reward-locked,
.torre-reward-locked,
.turbo-reward-locked,
.canon-reward-locked {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.76), transparent 36%),
    linear-gradient(145deg, #f4eef9, #d9d0e8) !important;
}

.sphinx-bubble,
.runner-bubble,
.ark-live-line,
.race-live-line,
.torre-bubble,
.turbo-bubble-line,
.canon-bubble-line {
  border: 2px solid rgba(36, 22, 45, 0.9) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--dm-game-ink) !important;
  box-shadow: 0 6px 0 rgba(36, 22, 45, 0.1), 0 14px 22px rgba(36, 22, 45, 0.13) !important;
}

.sphinx-character img,
.runner-sphinx img,
.torre-pug img,
.turbo-player img,
.canon-sphynx img {
  filter: drop-shadow(0 16px 14px rgba(36, 22, 45, 0.24)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.82)) !important;
}

.sphinx-content-section,
.runner-content-section,
.ark-content-section,
.race-content-section,
.torre-content-section,
.turbo-content-section,
.canon-content-section {
  border: 1px solid rgba(36, 22, 45, 0.1) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 14px 34px rgba(36, 22, 45, 0.08);
  backdrop-filter: blur(12px);
}

@media (max-width: 720px) {
  .game-topbar,
  .runner-topbar,
  .ark-topbar,
  .race-topbar,
  .torre-topbar,
  .turbo-topbar,
  .canon-topbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sphinx-game,
  .runner-game,
  .ark-game,
  .race-game,
  .torre-game,
  .turbo-game,
  .canon-game {
    border-radius: 24px !important;
  }

  .screen-panel,
  .runner-panel,
  .ark-panel,
  .race-panel,
  .torre-panel,
  .turbo-panel,
  .canon-panel {
    border-radius: 22px !important;
  }

  .sphinx-button,
  .runner-button,
  .ark-button,
  .race-button,
  .torre-button,
  .turbo-button,
  .canon-button {
    width: 100%;
  }
}

@media (min-width: 760px) {
  .runner-rules,
  .ark-rules,
  .race-rules,
  .torre-rules,
  .turbo-rules,
  .canon-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .torre-panel,
  .turbo-panel,
  .canon-panel {
    width: min(100%, 640px) !important;
  }

  .canon-panel {
    padding: 16px 20px !important;
  }

  .canon-panel h1 {
    font-size: clamp(1.7rem, 4vw, 2.08rem) !important;
  }

  .canon-panel p {
    margin-top: 8px !important;
  }

  .canon-start-visual img {
    width: min(42vw, 205px) !important;
  }

  .canon-rules {
    gap: 6px !important;
  }

  .canon-rules li {
    padding: 7px 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sphinx-button,
  .runner-button,
  .ark-button,
  .race-button,
  .torre-button,
  .turbo-button,
  .canon-button,
  .sphinx-character img,
  .runner-sphinx img,
  .torre-pug img,
  .turbo-player img,
  .canon-sphynx img {
    transition: none !important;
    animation: none !important;
  }
}

/* Premium alignment with the current home shell. */
:root {
  --dm-home-ink: #0b0710;
  --dm-home-green: #9cff19;
  --dm-home-purple: #8b55ff;
  --dm-home-red: #ff3138;
  --dm-home-yellow: #ffd738;
  --dm-home-line: rgba(18, 11, 23, 0.12);
}

body.sphinx-game-page,
body.sphinx-game-embed,
body.sphinx-runner-page,
body.sphinx-runner-embed,
body.sphinx-breakout-page,
body.sphinx-breakout-embed,
body.sphinx-race-page,
body.sphinx-race-embed,
body.pug-torre-page,
body.pug-torre-embed,
body.hamster-turbo-page,
body.hamster-turbo-embed,
body.sphynx-canon-page,
body.sphynx-canon-embed {
  color: var(--dm-home-ink);
  background:
    radial-gradient(circle at 12% 4%, rgba(156, 255, 25, 0.18), transparent 24rem),
    radial-gradient(circle at 88% 0%, rgba(139, 85, 255, 0.13), transparent 26rem),
    linear-gradient(180deg, #ffffff 0%, #fff9ed 58%, #fff3dc 100%) !important;
}

.sphinx-site-header,
.runner-site-header,
.ark-site-header,
.race-site-header,
.torre-site-header,
.turbo-site-header,
.canon-site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 11px max(18px, calc((100vw - 1180px) / 2)) !important;
  background: rgba(8, 7, 11, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 34px rgba(8, 7, 11, 0.18);
  backdrop-filter: blur(18px);
}

.sphinx-brand,
.runner-brand,
.ark-brand,
.race-brand,
.torre-brand,
.turbo-brand,
.canon-brand {
  gap: 9px !important;
  padding: 0 !important;
  color: #ffffff !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sphinx-brand::before,
.runner-brand::before,
.ark-brand::before,
.race-brand::before,
.torre-brand::before,
.turbo-brand::before,
.canon-brand::before {
  content: "";
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: url("/assets/img/logo-160.png") center / contain no-repeat;
  filter:
    drop-shadow(0 0 14px rgba(255, 184, 44, 0.25))
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
}

.sphinx-nav a,
.runner-nav a,
.ark-nav a,
.race-nav a,
.torre-nav a,
.turbo-nav a,
.canon-nav a {
  color: rgba(255, 255, 255, 0.86) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

.sphinx-nav a:hover,
.sphinx-nav a:focus-visible,
.runner-nav a:hover,
.runner-nav a:focus-visible,
.ark-nav a:hover,
.ark-nav a:focus-visible,
.race-nav a:hover,
.race-nav a:focus-visible,
.torre-nav a:hover,
.torre-nav a:focus-visible,
.turbo-nav a:hover,
.turbo-nav a:focus-visible,
.canon-nav a:hover,
.canon-nav a:focus-visible {
  color: var(--dm-home-ink) !important;
  background: var(--dm-home-green) !important;
  outline: none;
}

.sphinx-page-main,
.runner-page-main,
.ark-page-main,
.race-page-main,
.torre-page-main,
.turbo-page-main,
.canon-page-main,
.sphinx-site-footer,
.runner-site-footer,
.ark-site-footer,
.race-site-footer,
.torre-site-footer,
.turbo-site-footer,
.canon-site-footer {
  width: min(1180px, calc(100vw - 40px)) !important;
}

.sphinx-page-hero,
.runner-page-hero,
.ark-page-hero,
.race-page-hero,
.torre-page-hero,
.turbo-page-hero,
.canon-page-hero {
  position: relative;
  overflow: hidden;
  margin-top: 18px !important;
  padding: clamp(28px, 5vw, 56px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 76% 20%, rgba(156, 255, 25, 0.18), transparent 22rem),
    radial-gradient(circle at 96% 70%, rgba(139, 85, 255, 0.18), transparent 18rem),
    linear-gradient(135deg, #0a0710 0%, #16111d 55%, #0b0d13 100%) !important;
  box-shadow: 0 22px 54px rgba(10, 7, 16, 0.22) !important;
}

.sphinx-page-hero::before,
.runner-page-hero::before,
.ark-page-hero::before,
.race-page-hero::before,
.torre-page-hero::before,
.turbo-page-hero::before,
.canon-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.08), transparent 32%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 78px);
  pointer-events: none;
}

.sphinx-page-hero > *,
.runner-page-hero > *,
.ark-page-hero > *,
.race-page-hero > *,
.torre-page-hero > *,
.turbo-page-hero > *,
.canon-page-hero > * {
  position: relative;
  z-index: 1;
}

.sphinx-kicker,
.runner-kicker,
.ark-kicker,
.race-kicker,
.torre-kicker,
.turbo-kicker,
.canon-kicker {
  color: var(--dm-home-green) !important;
}

.sphinx-page-hero h1,
.runner-page-hero h1,
.ark-page-hero h1,
.race-page-hero h1,
.torre-page-hero h1,
.turbo-page-hero h1,
.canon-page-hero h1 {
  color: #ffffff !important;
  font-size: clamp(2.25rem, 6vw, 4.9rem) !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

.sphinx-summary,
.runner-summary,
.ark-summary,
.race-summary,
.torre-summary,
.turbo-summary,
.canon-summary {
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 820 !important;
}

.sphinx-button.primary,
.runner-button.primary,
.ark-button.primary,
.race-button.primary,
.torre-button.primary,
.turbo-button.primary,
.canon-button.primary {
  color: var(--dm-home-ink) !important;
  background: linear-gradient(180deg, #b8ff3c 0%, var(--dm-home-green) 58%, #73df00 100%) !important;
  border: 0 !important;
  box-shadow: 0 8px 0 rgba(156, 255, 25, 0.2), 0 16px 28px rgba(156, 255, 25, 0.18) !important;
}

.sphinx-button.secondary,
.runner-button.secondary,
.ark-button.secondary,
.race-button.secondary,
.torre-button.secondary,
.turbo-button.secondary,
.canon-button.secondary {
  color: #ffffff !important;
  background: linear-gradient(145deg, rgba(139, 85, 255, 0.96), rgba(96, 52, 215, 0.96)) !important;
  border: 0 !important;
}

.sphinx-button.dark,
.runner-button.dark,
.ark-button.dark,
.race-button.dark,
.torre-button.dark,
.turbo-button.dark,
.canon-button.dark {
  color: #ffffff !important;
  background: linear-gradient(145deg, #17121f, #0b0710) !important;
}

.sphinx-game,
.runner-game,
.ark-game,
.race-game,
.torre-game,
.turbo-game,
.canon-game {
  border-color: var(--dm-home-ink) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 52px rgba(18, 11, 23, 0.18) !important;
}

.sphinx-content-section,
.runner-content-section,
.ark-content-section,
.race-content-section,
.torre-content-section,
.turbo-content-section,
.canon-content-section {
  border: 1px solid var(--dm-home-line) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 14px 34px rgba(18, 11, 23, 0.1) !important;
}

.sphinx-site-footer,
.runner-site-footer,
.ark-site-footer,
.race-site-footer,
.torre-site-footer,
.turbo-site-footer,
.canon-site-footer {
  margin-top: 20px !important;
  padding: 24px !important;
  border-radius: 22px 22px 0 0 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  background: #0b0710 !important;
}

.sphinx-site-footer a,
.runner-site-footer a,
.ark-site-footer a,
.race-site-footer a,
.torre-site-footer a,
.turbo-site-footer a,
.canon-site-footer a {
  color: var(--dm-home-green) !important;
}

@media (max-width: 720px) {
  .sphinx-site-header,
  .runner-site-header,
  .ark-site-header,
  .race-site-header,
  .torre-site-header,
  .turbo-site-header,
  .canon-site-header {
    position: relative !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: stretch !important;
    gap: 8px !important;
    padding-block: 8px !important;
    padding-inline: 12px !important;
    box-shadow: 0 8px 22px rgba(8, 7, 11, 0.16) !important;
  }

  .sphinx-brand,
  .runner-brand,
  .ark-brand,
  .race-brand,
  .torre-brand,
  .turbo-brand,
  .canon-brand {
    justify-content: center !important;
    min-height: 34px !important;
    font-size: 0.92rem !important;
  }

  .sphinx-nav,
  .runner-nav,
  .ark-nav,
  .race-nav,
  .torre-nav,
  .turbo-nav,
  .canon-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch !important;
    gap: 7px !important;
    width: 100% !important;
  }

  .sphinx-nav a,
  .runner-nav a,
  .ark-nav a,
  .race-nav a,
  .torre-nav a,
  .turbo-nav a,
  .canon-nav a {
    width: auto !important;
    min-height: 34px !important;
    padding: 7px 8px !important;
    font-size: 0.78rem !important;
    line-height: 1.12 !important;
    text-align: center !important;
  }

  .sphinx-game-shell,
  .runner-game-shell,
  .ark-game-shell,
  .race-game-shell,
  .torre-game-shell,
  .turbo-game-shell,
  .canon-game-shell {
    scroll-margin-top: 10px !important;
    padding-top: 8px !important;
  }

  .sphinx-brand::before,
  .runner-brand::before,
  .ark-brand::before,
  .race-brand::before,
  .torre-brand::before,
  .turbo-brand::before,
  .canon-brand::before {
    width: 34px;
    height: 34px;
  }

  .sphinx-page-main,
  .runner-page-main,
  .ark-page-main,
  .race-page-main,
  .torre-page-main,
  .turbo-page-main,
  .canon-page-main,
  .sphinx-site-footer,
  .runner-site-footer,
  .ark-site-footer,
  .race-site-footer,
  .torre-site-footer,
  .turbo-site-footer,
  .canon-site-footer {
    width: min(100vw - 22px, 560px) !important;
  }

  .sphinx-page-hero,
  .runner-page-hero,
  .ark-page-hero,
  .race-page-hero,
  .torre-page-hero,
  .turbo-page-hero,
  .canon-page-hero {
    margin-top: 12px !important;
    padding: 20px 16px !important;
    border-radius: 22px !important;
  }
}

/* Dimension Blocks also uses this shared file, so align its outer shell too. */
body.dimension-blocks-page {
  color: var(--dm-home-ink);
  background:
    radial-gradient(circle at 12% 4%, rgba(156, 255, 25, 0.18), transparent 24rem),
    radial-gradient(circle at 88% 0%, rgba(139, 85, 255, 0.13), transparent 26rem),
    linear-gradient(180deg, #ffffff 0%, #fff9ed 58%, #fff3dc 100%) !important;
}

.blocks-site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 11px max(18px, calc((100vw - 1180px) / 2)) !important;
  background: rgba(8, 7, 11, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 34px rgba(8, 7, 11, 0.18);
  backdrop-filter: blur(18px);
}

.blocks-brand {
  gap: 9px !important;
  padding: 0 !important;
  color: #ffffff !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.blocks-brand::before {
  content: "";
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: url("/assets/img/logo-160.png") center / contain no-repeat;
  filter:
    drop-shadow(0 0 14px rgba(255, 184, 44, 0.25))
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
}

.blocks-nav a {
  color: rgba(255, 255, 255, 0.86) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

.blocks-nav a:hover,
.blocks-nav a:focus-visible {
  color: var(--dm-home-ink) !important;
  background: var(--dm-home-green) !important;
  outline: none;
}

.blocks-page-main,
.blocks-site-footer {
  box-sizing: border-box !important;
  width: min(1180px, calc(100vw - 40px)) !important;
}

.blocks-page-hero {
  position: relative;
  overflow: hidden;
  max-width: none !important;
  margin-top: 18px !important;
  padding: clamp(28px, 5vw, 56px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 76% 20%, rgba(156, 255, 25, 0.18), transparent 22rem),
    radial-gradient(circle at 96% 70%, rgba(139, 85, 255, 0.18), transparent 18rem),
    linear-gradient(135deg, #0a0710 0%, #16111d 55%, #0b0d13 100%) !important;
  box-shadow: 0 22px 54px rgba(10, 7, 16, 0.22) !important;
  text-align: left !important;
}

.blocks-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.08), transparent 32%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 78px);
  pointer-events: none;
}

.blocks-page-hero > * {
  position: relative;
  z-index: 1;
}

.blocks-kicker {
  color: var(--dm-home-green) !important;
}

.blocks-page-hero h1 {
  color: #ffffff !important;
  font-size: clamp(2.25rem, 6vw, 4.9rem) !important;
}

.blocks-summary {
  margin-left: 0 !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

.blocks-button.primary {
  color: var(--dm-home-ink) !important;
  background: linear-gradient(180deg, #b8ff3c 0%, var(--dm-home-green) 58%, #73df00 100%) !important;
}

.blocks-button.secondary {
  color: #ffffff !important;
  background: linear-gradient(145deg, rgba(139, 85, 255, 0.96), rgba(96, 52, 215, 0.96)) !important;
}

.blocks-site-footer {
  margin-top: 20px !important;
  padding: 24px !important;
  border-radius: 22px 22px 0 0 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  background: #0b0710 !important;
}

.blocks-site-footer a {
  color: var(--dm-home-green) !important;
}

.blocks-shell {
  width: min(1060px, 100%) !important;
  max-width: 100% !important;
  overflow: hidden;
}

.blocks-character-stage {
  max-width: 100% !important;
  overflow: hidden;
}

@media (max-width: 720px) {
  .blocks-site-header {
    padding-inline: 12px !important;
  }

  .blocks-brand::before {
    width: 34px;
    height: 34px;
  }

  .blocks-page-main,
  .blocks-site-footer {
    width: min(100vw - 22px, 560px) !important;
  }

  .blocks-page-hero {
    margin-top: 12px !important;
    padding: 20px 16px !important;
    border-radius: 22px !important;
  }
}