/* lumaroom.app, the teaser: the app's look (web/app.css). 80s neon, soft and glowy, black glass
   with glowing edges; one look on purpose (a room with the lights down), so there is no light theme.
   The sign is the app's .brand at hero size, under the game room's arch, on a wall over a floor. */
@font-face { font-family: "Monoton"; src: url(/fonts/monoton-latin.woff2) format("woff2"); font-display: block; }
@font-face { font-family: "Tilt Neon"; src: url(/fonts/tiltneon-latin.woff2) format("woff2"); font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #030208; --line2: #352a5c;
  --ink: #f6f3ff; --mute: #a69ec9;
  --cyan: #3df2ff; --mag: #ff3ec8; --yel: #ffe45c; --vio: #8d6bff;
  --cyan-a: rgba(61, 242, 255, .55);
  --glow-c: 0 0 1px #fff, 0 0 6px rgba(61, 242, 255, .85), 0 0 18px rgba(61, 242, 255, .45);
  --f-neon: "Tilt Neon", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --f-word: "Monoton", "Tilt Neon", system-ui, sans-serif;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden;
  background: radial-gradient(120% 75% at 50% 0%, #0c0720 0%, var(--bg) 62%) no-repeat var(--bg);
  color: var(--ink); font: 16px/1.45 var(--f-body); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--yel); outline-offset: 3px; border-radius: 4px; }

/* ---------- the wall ---------- */
.wall { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(64px + env(safe-area-inset-top, 0px)) 16px 36px; text-align: center;
  overflow-x: clip; }                                 /* the glow runs past the screen's edge on a phone; no sideways scroll */

/* the sign: 9.6em wide, the arch's posts 1.2em tall (2.5 cells of 0.48em), the caps sitting
   just inside them so the posts end a little under the baseline */
.sign { position: relative; width: 9.6em; height: 1.2em; font-size: clamp(26px, min(9.4vw, 15vh), 100px); }

/* white-hot tubes in a magenta haze (em, so it scales with the type), lighting the wall behind it:
   the app's .brand, as is */
.brand { position: relative; isolation: isolate; margin: 0; padding-top: .22em; font: 400 1em/1 var(--f-word); letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap; color: #fff4fc;
  text-shadow: 0 0 .04em #fff, 0 0 .12em #fff, 0 0 .3em var(--mag), 0 0 .6em var(--mag), 0 0 1.1em rgba(255, 62, 200, .9),
               0 0 2em rgba(255, 62, 200, .55), 0 0 3.4em rgba(255, 62, 200, .3);
  animation: switch-on 1.6s ease-out 1; }
.brand::before { content: ""; position: absolute; z-index: -1; inset: -1.1em -.6em; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 62, 200, .3), rgba(255, 62, 200, .1) 60%, transparent);
  animation: hum 7s ease-in-out 1.6s infinite; }
@keyframes switch-on { 0%, 10% { opacity: .15; } 12% { opacity: 1; } 16% { opacity: .3; } 22%, 100% { opacity: 1; } }
@keyframes hum { 50% { opacity: .65; } }

/* the arch (arch.js colors its cells, the gradient stops; strokes are in the SVG's units, hundredths of an em) */
.arch { position: absolute; left: -1.2em; top: -1.2em; width: 12em; height: 3.6em; overflow: visible; pointer-events: none;
  animation: tube-in .5s ease-out both; }
.arch .tube { fill: none; stroke: var(--line2); stroke-width: 7; stroke-linejoin: round; opacity: .85; }
.arch .bloom { stroke-width: 54; opacity: .7; }
.arch .glow { stroke-width: 18; }
.arch .core { stroke-width: 7; }
@keyframes tube-in { from { opacity: 0; } }

.line { margin: clamp(40px, 8vh, 72px) 0 0; font: 400 clamp(22px, 6.2vw, 32px)/1.25 var(--f-neon); color: #fff;
  text-shadow: 0 0 1px #fff, 0 0 8px rgba(61, 242, 255, .55), 0 0 22px rgba(61, 242, 255, .28); }

/* what it's doing now: the app's now-playing pill, in black glass */
.now { display: inline-flex; align-items: center; gap: 9px; margin: 26px 0 0; padding: 8px 16px 8px 12px; border-radius: 99px;
  background: rgba(3, 2, 8, .62); border: 1px solid rgba(61, 242, 255, .32);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 17px/1 var(--f-neon); }
.now .pip { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--yel);
  box-shadow: 0 0 2px #fff, 0 0 8px var(--yel), 0 0 16px var(--yel); animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; transform: scale(.85); } }

/* ---------- the floor: the wall's glass edge, a grid running back to it, the arch's light on it ---------- */
.floor { --arch: 255 62 200; --arch-a: .5;
  position: relative; flex: none; height: 26vh; height: 26dvh; min-height: 110px; overflow: hidden;
  perspective: 700px; perspective-origin: 50% 0; }
.floor::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: -12px; height: 24px; pointer-events: none;
  background: linear-gradient(transparent 11.5px, rgba(233, 227, 255, .8) 11.5px 12.5px, transparent 12.5px),
              radial-gradient(50% 50% at 50% 50%, rgba(141, 107, 255, .45), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); }
.floor::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: radial-gradient(46% 80% at 50% 0%, rgb(var(--arch) / calc(var(--arch-a) * .32)), transparent 72%); }
.grid { position: absolute; left: -60%; width: 220%; top: 0; height: 700px; transform-origin: 50% 0; transform: rotateX(76deg);
  background: linear-gradient(rgba(141, 107, 255, .32) 1px, transparent 1px) 0 0 / 56px 56px,
              linear-gradient(90deg, rgba(141, 107, 255, .32) 1px, transparent 1px) 50% 0 / 56px 56px;
  -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); }

.scan { position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px); }

/* ---------- 404 ---------- */
.lost .brand { font-size: clamp(30px, 9vw, 56px); padding: 0; }
.lost .line { margin-top: 40px; }
.back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 26px; padding: 10px 18px; border-radius: 12px;
  border: 1px solid var(--cyan-a); background: rgba(61, 242, 255, .05); color: #fff; text-decoration: none; font: 18px/1 var(--f-neon);
  box-shadow: 0 0 10px rgba(61, 242, 255, .16), inset 0 0 10px rgba(61, 242, 255, .07); }
.back:hover { text-shadow: var(--glow-c); border-color: var(--cyan); }

@media (orientation: portrait) {                   /* a tall screen: more floor, less bare wall */
  .floor { height: 31vh; height: 31dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .brand, .brand::before, .arch, .now .pip { animation: none; }
}