/* GameHub OS theme — the shared synthwave background that every page wears,
   so the hub and the games feel like one console. Pure CSS (no JS, no extra
   canvas or per-frame work), painted entirely BEHIND page content, so it is
   safe to sit under a running game without costing frame time.

   Link this from every game page (the hub paints its own richer version).
   New games: add <link rel="stylesheet" href=".../css/os-theme.css">. */
@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");

/* Shared game logo — the same glossy 80s-chrome Bungee wordmark the hub
   uses, so every game's title matches. Each context sets its own size. */
.os-logo {
  font-family: "Bungee", "Orbitron", sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #ffffff 0%, #ffe58a 20%, #ff9f40 44%, #ff3ca6 66%, #9b6bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 3px 0 #2a1030)
    drop-shadow(0 5px 2px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 22px rgba(255, 120, 180, 0.5))
    drop-shadow(0 0 44px rgba(120, 80, 255, 0.32));
}

html {
  min-height: 100%;
  background:
    radial-gradient(ellipse 120% 80% at 50% 8%, #1a0f3d 0%, #0a0613 55%, #05030c 100%) fixed;
}

/* Let the shared atmosphere show through each page's own body background. */
body {
  background: transparent !important;
}

/* Retro synthwave sun at the horizon. */
html::before {
  content: "";
  position: fixed;
  left: 50%;
  bottom: 30vh;
  transform: translateX(-50%);
  width: min(440px, 74vw);
  height: min(440px, 74vw);
  border-radius: 50%;
  z-index: -2;
  background:
    repeating-linear-gradient(180deg, transparent 0 7px, #0a0613 7px 10px) bottom / 100% 52% no-repeat,
    linear-gradient(180deg, #ffe58a 0%, #ff9f40 44%, #ff3ca6 100%);
  box-shadow: 0 0 100px 26px rgba(255, 120, 90, 0.35), 0 0 40px 6px rgba(255, 60, 166, 0.3);
  opacity: 0.8;
  pointer-events: none;
}

/* Shared neon monitor bezel — the frame each game's screen wears, so every
   game looks like a cabinet on the same console. Border + glows only (no
   opaque fill), so the synthwave scene still shows around and behind it. */
.game-bezel {
  border: 3px solid rgba(155, 107, 255, 0.7);
  border-radius: 18px;
  box-shadow:
    0 0 0 2px rgba(8, 4, 18, 0.9),
    0 0 46px 4px rgba(124, 92, 255, 0.4),
    0 0 20px rgba(255, 60, 166, 0.28),
    inset 0 0 0 2px rgba(60, 240, 255, 0.22),
    inset 0 0 30px rgba(124, 92, 255, 0.18);
}

/* Perspective grid floor. Static (no animation) so it adds zero per-frame
   cost when it sits under a canvas game that is already rendering. */
html::after {
  content: "";
  position: fixed;
  left: -25%;
  right: -25%;
  bottom: 0;
  height: 62vh;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 60, 166, 0.55) 2px, transparent 2px),
    linear-gradient(90deg, rgba(60, 240, 255, 0.45) 2px, transparent 2px);
  background-size: 100% 46px, 46px 100%;
  transform: perspective(58vh) rotateX(74deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(transparent, #000 52%);
  mask-image: linear-gradient(transparent, #000 52%);
  opacity: 0.75;
  pointer-events: none;
}