/* Shared look for every wall screen.
   THEME: change --glow to recolour everything (CSS and the 3D scene read it). */
:root {
  --glow: #3da9ff;          /* <== THE theme colour (room LEDs are blue). Not the same as the glow setting, see the end of this file */
  --bg: #01040b;            /* near-black navy */
  --panel: rgba(3, 12, 28, 0.62);
  --line: color-mix(in srgb, var(--glow) 35%, transparent);
  --dim: color-mix(in srgb, var(--glow) 55%, #8aa0c0);
  --text: #dceaff;
  --red: #ff3b5c;
  --amber: #ffb547;
  --ok: #4dffc3;
  --mono: "JetBrains Mono", "Cascadia Mono", "DejaVu Sans Mono", Consolas, monospace;
  --sans: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --banner-h: 12vh;         /* height of the top banner strip, on or off */
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); }
/* Wall screens never scroll or respond to the browser's own touch gestures. Only they get this: on every other page
   it blocked finger scrolling on phones. The class is on <html> in the markup, so it applies before any script runs. */
html.wall, html.wall body { width: 100%; height: 100%; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
/* Everything else (launcher, seat, admin) is a normal page that scrolls and grows with its content. */
html:not(.wall) { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
html:not(.wall) body { min-height: 100vh; min-height: 100dvh; }
html:not(.wall) button { user-select: none; -webkit-user-select: none; }
html:not(.wall) #conn, html:not(.wall) #errbox { font-size: 13px; }
body.wall {
  background:
    radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--glow) 7%, transparent), transparent 60%),
    radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--glow) 4%, transparent), transparent 55%),
    var(--bg);
  display: flex; flex-direction: column;
}
body.nocursor, body.nocursor * { cursor: none !important; }
/* inputs must stay selectable or browsers refuse typing in them */
input, textarea { user-select: text; -webkit-user-select: text; touch-action: manipulation; }
/* the wall-spanning network backdrop (static layer + moving dots, see common.js) */
#backdrop, #backdrop-fx, #backdrop-gl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
#backdrop-fx.top { z-index: 2; }
body.wall > .banner, body.wall > .main { position: relative; z-index: 1; }
body.wall > .banner { z-index: 3; }   /* opaque, so the backdrop stops at the same line on every screen */

/* OFFICIAL BANNER. Event rule: "use of banner as is, do not modify". So no filter, crop, stretch or overlay: plain white
   strip, image at its own aspect ratio, nothing drawn on top. z-index 3 keeps it above screen B's backdrop dots (z 2)
   and everything in .main. Anything added later that covers the wall, like a presentation mode, must stay below it too. */
.banner { height: var(--banner-h); flex: 0 0 var(--banner-h); width: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.banner img { display: none; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
/* /admin's Top banner setting. Off leaves an empty dark strip of the same height: nothing below moves, and a host's own banner has room to
   sit there. It's only shown once the setting is known, so a reload can't flash a second logo under a host's overlay. */
html.banner-on .banner { background: #fff; }
html.banner-on .banner img { display: block; }
.main { flex: 1; min-height: 0; position: relative; padding: 2vh 2vw; display: flex; flex-direction: column; gap: 1.6vh; }

.hdr { display: flex; align-items: baseline; gap: 1.2vw; }
.hdr h1 { margin: 0; font-size: 4.2vh; letter-spacing: .12em; font-weight: 700; color: #fff;
  text-shadow: 0 0 1.2vh var(--glow), 0 0 3vh var(--glow); text-transform: uppercase; }
.hdr .sub { font: 1.8vh var(--mono); color: var(--dim); letter-spacing: .15em; text-transform: uppercase; }
.hdr .right { margin-left: auto; font: 2.2vh var(--mono); color: var(--dim); }
.tag { display: inline-block; font: 600 1.4vh var(--mono); letter-spacing: .2em; padding: .4vh .8vw;
  border: 1px solid var(--glow); color: var(--glow); border-radius: .4vh; text-transform: uppercase;
  box-shadow: 0 0 1vh color-mix(in srgb, var(--glow) 40%, transparent) inset; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 1vh;
  box-shadow: 0 0 2.5vh color-mix(in srgb, var(--glow) 18%, transparent), inset 0 0 3vh color-mix(in srgb, var(--glow) 8%, transparent);
  padding: 1.6vh 1.4vw; min-height: 0; overflow: hidden; position: relative; }
.panel > h2 { margin: 0 0 1.2vh; font: 600 1.9vh var(--mono); letter-spacing: .2em; color: var(--glow); text-transform: uppercase; }
.red { color: var(--red); } .amber { color: var(--amber); } .ok { color: var(--ok); } .glow { color: var(--glow); }
.mono { font-family: var(--mono); }

#conn { position: fixed; right: 1vw; bottom: 1vh; font: 1.4vh var(--mono); color: var(--red); display: none; z-index: 50; }
#errbox { position: fixed; left: 0; bottom: 0; max-width: 60vw; font: 1.4vh var(--mono); color: #f66; background: #000c; z-index: 99; white-space: pre-wrap; }
#errbox:empty { display: none; }

@keyframes slidein { from { transform: translateY(-1.5vh); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes blink { 50% { opacity: .35; } }
.new { animation: slidein .5s ease-out; }

/* ---- PRESENTATION MODE (see present.js). Hidden, not removed: screen B's 3D needs its real size to come straight back.
   Screen B keeps #stage, because its share of the rotating backdrop is drawn in there. */
html.presenting body.wall > .main { pointer-events: none; }
html.presenting body.wall > .main > *:not(#stage) { visibility: hidden !important; }
html.presenting #soundhint { display: none; }
/* z-index 2 is above the game (1) and below the official banner (3), and it starts under the banner strip. Nothing here may touch the banner. */
#pres { position: fixed; left: 0; right: 0; top: var(--banner-h); bottom: 0; z-index: 2; overflow: hidden; pointer-events: none; }
/* one canvas five screens wide, moved along so this screen shows its own slice. Lines can cross a seam. Text never does: it stays in a .col */
#pres .pwide { position: absolute; top: 0; bottom: 0; width: 500vw; left: calc(var(--idx) * -100vw); animation: presin .5s ease-out; }
@keyframes presin { from { opacity: 0; } to { opacity: 1; } }
#pres svg, #pres canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#pres .col { position: absolute; top: 0; bottom: 0; width: 100vw; left: calc(var(--c) * 100vw); padding: 6vh 7vh; display: flex; flex-direction: column; gap: 3vh; }
#pres .cen { justify-content: center; }
#pres .mid { justify-content: center; align-items: center; text-align: center; }
#pres h1 { margin: 0; font: 900 15vh/1.05 var(--sans); letter-spacing: .03em; color: #fff; text-shadow: 0 0 2vh var(--glow), 0 0 6vh var(--glow); }
#pres h2 { margin: 0; font: 800 11vh/1.08 var(--sans); color: #fff; text-shadow: 0 0 1.5vh var(--glow); }
#pres p { margin: 0; font: 500 6.5vh/1.22 var(--sans); color: var(--text); }
#pres .tg { font: 700 4.5vh var(--mono); letter-spacing: .14em; color: var(--glow); text-transform: uppercase; }
#pres .r, #pres .r h1, #pres .r h2 { color: var(--red); text-shadow: 0 0 2vh var(--red); }
#pres .tg.r { color: var(--red); text-shadow: none; }
#pres .box { background: var(--panel); border: .3vh solid var(--line); border-radius: 1.4vh; padding: 3.4vh 3.4vh; display: flex; flex-direction: column; gap: 1.6vh; }
#pres .box.hot { border-color: var(--glow); }
#pres .box.redb { border-color: var(--red); }
#pres ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.5vh; font: 600 6.5vh/1.2 var(--sans); color: var(--text); }
#pres .ask { color: #1a1000; background: var(--amber); border-radius: .8vh; padding: .4vh 1.2vh; font: 800 4.5vh var(--mono); text-shadow: none; display: inline-block; }
#pres .credit { position: absolute; left: 0; right: 0; bottom: .9vh; text-align: center; font: 1.7vh var(--mono); color: var(--dim); padding: 0 2vw; }
#pres .fact { font: 800 8vh/1.1 var(--mono); color: #fff; }
#pres .top { align-items: center; text-align: center; padding-top: 24vh; }
#pres .top2 { align-items: center; text-align: center; padding-top: 12vh; }
#pres .num { font: 900 18vh/1 var(--sans); }
#pres .huge { font: 900 27vh/1 var(--sans); color: #fff; text-shadow: 0 0 2vh var(--glow), 0 0 6vh var(--glow); white-space: nowrap; }
#pres .huge.r { color: var(--red); text-shadow: 0 0 2vh var(--red), 0 0 6vh var(--red); }
#pres .io { margin-top: auto; margin-bottom: 10vh; font: 800 7vh var(--mono); letter-spacing: .1em; color: var(--glow); text-align: center; }
#pres .sm { font: 500 3vh/1.3 var(--mono); color: var(--dim); }
#pres .ln { fill: none; stroke: var(--line); stroke-width: 3; }
#pres .ln.r { stroke: color-mix(in srgb, var(--red) 40%, transparent); }
#pres .ln.thin { stroke-width: 2; }
#pres .dot { fill: var(--glow); }
#pres .dot.r { fill: var(--red); }
#pres .tick { stroke: #fff; stroke-width: 5; }
#pres .day { stroke: var(--dim); stroke-width: 3; stroke-dasharray: 8 8; }
#pres .dayt { fill: var(--dim); font: 700 40px var(--mono); }
/* live server time on the shared clock slide */
#pres .clk { font: 800 14vh/1 var(--mono); color: #fff; letter-spacing: -.02em; text-shadow: 0 0 2vh var(--glow); }
/* the BCP slide: a label sits at its site's real position on the map */
#pres .psite { position: absolute; transform: translate(-50%, -100%); text-align: center; white-space: nowrap; padding-bottom: 2.6vh; }
#pres .psite b { display: block; font: 800 4.6vh/1.1 var(--sans); color: #fff; text-shadow: 0 0 .4vh #000, 0 0 1vh #000 !important; }
#pres .psite i { display: block; font: 700 2.7vh var(--mono); font-style: normal; color: var(--glow); text-shadow: 0 0 .4vh #000, 0 0 1vh #000 !important; }
#pres .psite.fake i { color: var(--amber); }
#pres .psite.below { transform: translate(-50%, 0); padding: 2.6vh 0 0; }
#pres .qr { background: #fff; padding: 2vh; border-radius: 1.4vh; width: 46vh; height: 46vh; }
#pres .qr img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
/* glow off (the default): the same outline the game's map labels use, so text stays readable over the backdrop */
html:not(.glow-on) #pres h1, html:not(.glow-on) #pres h2, html:not(.glow-on) #pres p, html:not(.glow-on) #pres li, html:not(.glow-on) #pres .tg, html:not(.glow-on) #pres .clk, html:not(.glow-on) #pres .fact { text-shadow: 0 0 .3vh #000, 0 0 .7vh #000 !important; }

/* room sound messages on a wall screen, see audio.js */
#soundhint, #soundtest { position: fixed; left: 50%; transform: translateX(-50%); z-index: 60; padding: 1.4vh 2vw; border-radius: .8vh; font: 700 2.6vh var(--sans); text-align: center; white-space: nowrap; pointer-events: none; }
#soundhint { bottom: 11vh; background: #2a1700; color: #ffd28a; border: .3vh solid var(--amber); }
#soundtest { top: 44vh; background: #03233f; color: #fff; border: .3vh solid var(--glow); font-size: 4.5vh; }

/* ---- GLOW SETTING. /admin's Glow toggle adds .glow-on to <html> on every page. Off is the default, and this block is
   what makes it look deliberate: flat solid panels, plain text, no blur. It comes last and uses !important so it beats
   the shadows in each page's own <style>, which only show when glow is on. Text over the map keeps a thin dark outline,
   for reading it, not for looks. Screen B's 3D bloom is a separate setting. */
html:not(.glow-on) { --panel: #071327; --line: #1f3f66; }
html:not(.glow-on) body { background: var(--bg) !important; }
html:not(.glow-on) *, html:not(.glow-on) *::before, html:not(.glow-on) *::after { text-shadow: none !important; box-shadow: none !important; }
html:not(.glow-on) .tag { border-color: var(--line); }
html:not(.glow-on) button:hover, html:not(.glow-on) a:hover { filter: brightness(1.2); }