/* The new site look (everything but the casino). Every rule is under html:not(.legacy), so the Legacy switch
   (site.js, class "legacy" on <html>) brings back the old look untouched. Starry sky, dark windows with soft
   baby blue frames and title bars, hard shadows, a rounded top bar. Static shadows only: no animation, no filters. */
html:not(.legacy) {
  --sky-day: #6d5ad6; --sky-night: #141a5c; --baby: #7ea6dc; --shade: #2f2580; --win-ink: #120720;
  --vp-pink: #ff71ce; --vp-mint: #05ffa1; --vp-cyan: #01cdfe;
  --stars: radial-gradient(#fff 1px, transparent 1.5px) 0 0 / 38px 38px, radial-gradient(#fff 1px, transparent 1.5px) 19px 23px / 61px 61px;
}
html.night:not(.legacy) { --shade: #05072a; }

/* the sky replaces the random backgrounds (bg.js) */
html:not(.legacy) body:not(.casino), html:not(.legacy)[data-bg] body:not(.casino) { background: var(--stars), var(--sky-day); background-attachment: fixed; }
html.night:not(.legacy) body:not(.casino), html.night:not(.legacy)[data-bg] body:not(.casino) { background: var(--stars), var(--sky-night); background-attachment: fixed; }

/* windows: site.css builds them from these tokens, so this restyles every non-casino window at once */
html:not(.legacy) body:not(.casino) {
  --surface: #120720; --surface-2: #1d1236; --text: #f2ecff; --text-2: #c6b8e6; --edge: var(--baby);
  --bar: var(--baby); --bar-off: #4d5f86; --status: #ff9de0; --good: #05ffa1; --bad: #ff8fa8;
  color-scheme: dark;
}
html:not(.legacy) body:not(.casino) .win { border: 2px solid var(--baby); border-radius: 6px; box-shadow: 6px 6px 0 var(--shade); }
html:not(.legacy) body:not(.casino) .win-title { color: var(--win-ink); font-weight: 700; border-radius: 3px 3px 0 0; }
html:not(.legacy) body:not(.casino) .win-title .x { color: var(--win-ink); }
html:not(.legacy) body:not(.casino) .btn.hot { background: var(--vp-pink); border-color: var(--vp-pink); color: var(--win-ink); }
html:not(.legacy) body:not(.casino) .btn.hot:hover { background: #ff9ad9; }
html:not(.legacy) body:not(.casino) .btn:hover { border-color: var(--baby); }
html:not(.legacy) body:not(.casino) :focus-visible { outline-color: var(--vp-mint); }

/* the top bar: a rounded dark rectangle with a drop shadow */
html:not(.legacy) body:not(.casino) > .top, html:not(.legacy) body:not(.casino) > .ctop {
  background: #120720; border: 2px solid var(--baby); border-radius: 14px; box-shadow: 0 5px 0 var(--shade), 0 12px 24px rgba(5, 4, 30, .45);
  margin-top: 14px; padding-top: 8px; padding-bottom: 8px; color: #e6eeff;
}
html:not(.legacy) body:not(.casino) > .top .logo, html:not(.legacy) body:not(.casino) > .ctop .logo { color: var(--baby); text-shadow: 2px 2px 0 var(--win-ink); }

/* the Legacy switch (site.js) */
.lookbtn { margin-right: auto; padding: 6px 10px; border: 1px solid var(--edge, #c8bfe6); border-radius: 6px; background: transparent; color: var(--text, #1b1240); font: 600 13px var(--body); cursor: pointer; }
.lookbtn:hover { border-color: var(--pink); }
html:not(.legacy) .lookbtn { border-color: var(--baby); color: var(--baby); }

/* big page headings in the banner style: pink lowercase with a mint shadow */
html:not(.legacy) .page h1 { font: 400 clamp(44px, 7vw, 76px)/0.95 Impact, "Arial Black", sans-serif; text-transform: lowercase; color: var(--vp-pink); text-shadow: 3px 3px 0 var(--win-ink), 6px 6px 0 var(--vp-mint); letter-spacing: .01em; }
html:not(.legacy) .page .lead { background: #120720; border: 2px solid var(--baby); border-radius: 6px; box-shadow: 4px 4px 0 var(--shade); }
html:not(.legacy) .page .lead a { color: var(--vp-mint); }
html:not(.legacy) .win a:not(.btn) { color: var(--vp-cyan); }
html:not(.legacy) .todo { border-color: var(--vp-pink); }

/* small page banner (Fish tank, Tycoon): the same palm beach / rainbow city coin flip as the hub, with the page name in the logo style */
.mini-banner { display: none; }
html:not(.legacy) .mini-banner { display: block; position: relative; height: clamp(90px, 14vh, 130px); margin: 12px auto 12px; border: 2px solid var(--baby); border-radius: 6px; box-shadow: 6px 6px 0 var(--vp-mint); background: #120720 center / cover no-repeat; image-rendering: pixelated; overflow: hidden; }
html:not(.legacy) .mini-banner.palms { background-image: url("/shared/img/bg/magenta-beach.png?v=cb9366d130"); }
html.night:not(.legacy) .mini-banner.palms { background-image: url("/shared/img/bg/night-flight.png?v=e5e1571ebc"); }
html:not(.legacy) .mini-banner.rainbow { background-image: url("/shared/img/bg/computer-city.png?v=901a7ba530"); }
.mini-banner span { position: absolute; left: 18px; bottom: 6px; white-space: nowrap; font: 400 min(clamp(40px, 7vh, 66px), 11vw)/0.9 Impact, "Arial Black", sans-serif; color: var(--vp-pink); text-transform: lowercase; text-shadow: 3px 3px 0 #120720, 6px 6px 0 var(--vp-mint); }