.dusk-page {
  --night: #10132d;
  --ink: #f4f4ff;
  --muted: #c7c8e7;
  --aqua: #a1ffe2;
  color: var(--ink);
  background: var(--night);
  color-scheme: dark;
}
.dusk-page .collection-header, .dusk-page .collection-footer { border-color: #424469; }
.dusk-page .brand, .dusk-page .all-games-link { color: var(--ink); }
.dusk-page .brand-light { color: var(--aqua); }
.dusk-page .collection-footer, .dusk-page .ad-label, .dusk-page .mini-instructions p { color: var(--muted); }
.dusk-page .ad-slot, .dusk-page .mini-instructions { border-color: #424469; }
.dusk-page .mini-instructions a { color: var(--aqua); }
.dusk-main { max-width: 1040px; }
.dusk-hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 60px);
  margin: 23px 0;
  padding: clamp(14px, 3.6vw, 38px);
  border: 1px solid #4e4b75;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 10% 93%, #31247a, transparent 65%),
    radial-gradient(ellipse at 99% 5%, #542f5f, transparent 60%), #191d3c;
}
.dusk-kicker {
  display: inline-block;
  margin: 0 0 12px;
  color: var(--aqua);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.dusk-title {
  margin: 0;
  color: #f8f6ff;
  font-size: clamp(3rem, 7.2vw, 6.1rem);
  line-height: .87;
  letter-spacing: -.075em;
}
.dusk-title span { display: block; color: #ffa5d6; }
.dusk-rule { margin: 20px 0 0; color: #deddf4; font-size: clamp(1rem, 2vw, 1.19rem); line-height: 1.45; }
.dusk-rule strong { color: var(--ink); }
.dusk-console {
  min-width: 0;
  padding: clamp(10px, 2.5vw, 20px);
  border: 1px solid #706497;
  border-radius: 21px;
  background: #171a36;
  box-shadow: 0 14px 36px #070923a3;
}
.dusk-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 9px;
  color: var(--aqua);
  font-size: 12px;
  font-weight: 770;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.dusk-score strong { color: var(--ink); font-size: 1rem; letter-spacing: normal; font-variant-numeric: tabular-nums; }
.dusk-board {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1.25;
  border: 1px solid #8171a7;
  border-radius: 14px;
  background:
    radial-gradient(circle at 77% 28%, #ffe7bd 0 5%, #ffe2be30 5.3% 9%, transparent 9.5%),
    linear-gradient(176deg, #241958 7%, #623c96 56%, #ef8cb0 94%);
}
.dusk-board::before {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle, #fff8 0 1px, transparent 1.6px) 3px 12px / 38px 39px;
  opacity: .55;
  pointer-events: none;
}
.dusk-skyline { position: absolute; inset: auto 0 0; width: 100%; height: 32%; color: #201f48; }
.dusk-floor, .dusk-guide {
  position: absolute;
  z-index: 1;
  bottom: calc(5% + var(--row) * 9.7%);
  height: 8.8%;
  border-radius: 5px;
  pointer-events: none;
}
.dusk-floor {
  --hue: calc(182 + var(--row) * 24);
  border: 1px solid hsl(var(--hue) 100% 86%);
  background:
    repeating-linear-gradient(90deg, transparent 0 11px, #27244a55 11px 13px) center / auto 45% no-repeat,
    linear-gradient(180deg, hsl(var(--hue) 100% 81%), hsl(var(--hue) 75% 53%));
  box-shadow: inset 0 -3px 0 #34244c55, 0 0 12px hsl(var(--hue) 100% 68% / .36);
}
.dusk-guide { z-index: 0; border: 2px dashed #fff8ec; }
.dusk-moving { --hue: calc(182 + var(--row) * 24); z-index: 2; }
.dusk-board.dusk-hit { animation: dusk-fit .35s ease-out; }
@keyframes dusk-fit { 40% { filter: brightness(1.25); } }
.dusk-status {
  display: grid;
  place-items: center;
  min-height: 38px;
  margin: 6px 0;
  color: var(--muted);
  text-align: center;
  font-size: .83rem;
  line-height: 1.3;
}
.dusk-console[data-outcome="perfect"] .dusk-status { color: var(--aqua); }
.dusk-console[data-state="lost"] .dusk-status { color: #ffc0ce; }
.dusk-actions { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; }
.dusk-actions button {
  min-height: 46px;
  padding: 5px 8px;
  border: 1px solid #72658f;
  border-radius: 10px;
  color: var(--ink);
  background: #29274d;
  font: 760 .91rem system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.dusk-actions .dusk-action { border-color: #bcfff0; color: #1c253d; background: var(--aqua); }
.dusk-actions button:active { filter: brightness(.9); }
.dusk-actions button:disabled { opacity: .65; cursor: default; }
.dusk-page :focus-visible { outline: 3px solid #fff1ab; outline-offset: 3px; }
.dusk-page [hidden] { display: none !important; }
@media (max-width: 680px) {
  .dusk-page .collection-header { height: 52px; }
  .dusk-hero { grid-template-columns: 1fr; gap: 13px; margin: 12px 0; border-radius: 20px; }
  .dusk-kicker { margin-bottom: 8px; font-size: 10px; }
  .dusk-title { font-size: clamp(2.6rem, 10vw, 4rem); line-height: .94; }
  .dusk-title span { display: inline; }
  .dusk-rule { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .dusk-board.dusk-hit { animation: none; } }