/* 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) */
  --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;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; width: 100%; height: 100%; overflow: hidden;   /* wall screens never scroll */
  background: var(--bg); color: var(--text); font-family: var(--sans);
  user-select: none; -webkit-user-select: none; touch-action: none;
}
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 wireframe backdrop (drawn by KCR.drawBackdrop in common.js) */
#backdrop { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
body.wall > .banner, body.wall > .main { position: relative; z-index: 1; }

/* BANNER PLACEHOLDER: the organisers will provide a banner/logo strip. Drop it in here
   (e.g. <img src="/banner.png">). Keep the 6vh height so the layout below still fits. */
.banner {
  height: 6vh; flex: 0 0 6vh; width: 100%;
  border-bottom: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: center;
  color: color-mix(in srgb, var(--glow) 30%, transparent); font: 1.2vh var(--mono); letter-spacing: .4em;
}
.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; }