/* Light Up the Network — styles. Colors come from config.js as --lun-* variables. */

:root {
  --lun-night: #0A1220;
  --lun-land: #22324D;
  --lun-lit: #FFC861;
  --lun-network: #4C8DFF;
  --lun-ink: #E9EEF6;
  --lun-muted: #8796AE;
  --lun-sign: #FFD100;
  --lun-line: #1C2A43;
  --lun-field: #101B2F;
  --lun-sans: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --lun-cond: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

.lun-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Airfield location sign: yellow legend and border on black. Used for every base code. */
.lun-sign {
  display: inline-block;
  font-family: var(--lun-cond);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--lun-sign);
  background: #000;
  border: 2px solid var(--lun-sign);
  border-radius: 4px;
  padding: 4px 7px 3px;
  min-width: 3.3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Phone                                                               */
/* ------------------------------------------------------------------ */

.lun-page-phone {
  margin: 0;
  min-height: 100%;
  background: var(--lun-night);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.lun-page-phone #app { min-height: 100vh; min-height: 100dvh; }

.lun-phone {
  background: var(--lun-night);
  color: var(--lun-ink);
  font-family: var(--lun-sans);
  font-size: 17px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
.lun-phone button { font: inherit; color: inherit; }
.lun-phone :focus-visible { outline: 2px solid var(--lun-sign); outline-offset: 2px; }

.lun-p-head { padding: 28px 20px 10px; }
.lun-p-event { margin: 0; color: var(--lun-muted); font-size: 15px; }
.lun-p-q {
  margin: 4px 0 0;
  font-family: var(--lun-cond);
  font-weight: 600;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.005em;
}

.lun-p-search {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 16px 12px;
  background: var(--lun-night);
}
.lun-p-search input {
  box-sizing: border-box;
  width: 100%;
  font: 500 18px/1.2 var(--lun-sans);
  color: var(--lun-ink);
  background: var(--lun-field);
  border: 1.5px solid #2B3D5E;
  border-radius: 12px;
  padding: 14px 16px;
  -webkit-appearance: none;
  appearance: none;
}
.lun-p-search input::placeholder { color: #6E7E98; }
.lun-p-search input:focus { outline: 2px solid var(--lun-sign); outline-offset: 1px; border-color: transparent; }

.lun-p-list { list-style: none; margin: 0; padding: 0 8px 32px; }
.lun-p-list li[hidden] { display: none; }
.lun-p-list button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  padding: 12px 12px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--lun-line);
  cursor: pointer;
}
.lun-p-list button:active { background: #13213B; }
@media (hover: hover) { .lun-p-list button:hover { background: #111D33; } }
.lun-p-name { display: flex; flex-direction: column; font-weight: 500; }
.lun-p-city { font-size: 14px; font-weight: 400; color: var(--lun-muted); }

.lun-p-empty, .lun-p-error { margin: 8px 20px; font-size: 16px; }
.lun-p-empty { color: var(--lun-muted); }
.lun-p-error {
  color: var(--lun-ink);
  border-left: 3px solid var(--lun-sign);
  padding: 4px 0 4px 12px;
}

.lun-p-done {
  min-height: inherit;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px 40px;
}
.lun-p-done[hidden], .lun-p-pick[hidden] { display: none; }
.lun-p-beacon {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  margin-bottom: 8px;
  background: radial-gradient(circle, #FFF7E2 0 6%, var(--lun-lit) 11%, rgba(255, 200, 97, 0.32) 30%, rgba(255, 200, 97, 0.06) 58%, transparent 70%);
  animation: lun-breathe 2.6s ease-in-out infinite;
}
.lun-phone.is-finale .lun-p-beacon {
  background: radial-gradient(circle, #E8F1FF 0 6%, var(--lun-network) 11%, rgba(76, 141, 255, 0.32) 30%, rgba(76, 141, 255, 0.06) 58%, transparent 70%);
}
@keyframes lun-breathe { 50% { transform: scale(1.12); opacity: 0.85; } }
.lun-p-code { margin: 0 0 18px; }
.lun-sign-xl { font-size: 40px; border-width: 3px; border-radius: 6px; padding: 7px 14px 5px; }
.lun-p-lit {
  margin: 0;
  font-family: var(--lun-cond);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.05;
  max-width: 14em;
}
.lun-p-next { margin: 10px 0 0; font-size: 20px; color: var(--lun-ink); }
.lun-p-status { margin: 22px 0 0; min-height: 1.4em; font-size: 15px; color: var(--lun-muted); max-width: 22em; }
.lun-p-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.lun-p-actions button {
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid #34486C;
  background: transparent;
  cursor: pointer;
  font-weight: 500;
}
.lun-p-actions button[hidden] { display: none; }
.lun-p-actions button:active { background: #13213B; }

/* ------------------------------------------------------------------ */
/* Stage                                                               */
/* ------------------------------------------------------------------ */

.lun-stage {
  position: relative;
  overflow: hidden;
  container-type: size;
  background: var(--lun-night);
  color: var(--lun-ink);
  font-family: var(--lun-sans);
}
.lun-stage.idle { cursor: none; }
.lun-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.lun-title, .lun-qr, .lun-count, .lun-ticker, .lun-finale {
  position: absolute;
  margin: 0;
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.lun-title {
  left: 5cqw;
  top: 6cqh;
  font-family: var(--lun-cond);
  font-weight: 600;
  font-size: clamp(18px, 3.3cqw, 140px);
  line-height: 1;
  letter-spacing: -0.005em;
}

.lun-qr {
  right: 5cqw;
  top: 47cqh;
  transform: translateY(-50%);
  width: min(21cqw, 44cqh);
}
.lun-qr-code {
  background: #fff;
  border-radius: min(1.1cqw, 2cqh);
  padding: min(0.9cqw, 1.6cqh);
  line-height: 0;
}
.lun-qr-code svg { width: 100%; height: auto; display: block; }
.lun-qr-prompt {
  margin: 0.8em 0 0.25em;
  font-size: clamp(12px, 1.45cqw, 60px);
  line-height: 1.2;
  font-weight: 500;
}
.lun-qr-url {
  margin: 0;
  font-family: var(--lun-cond);
  font-weight: 600;
  font-size: clamp(12px, 1.5cqw, 62px);
  color: var(--lun-sign);
  overflow-wrap: anywhere;
}

.lun-count {
  left: 5cqw;
  bottom: 6.5cqh;
  max-width: 58cqw;
  font-size: clamp(14px, 2.15cqw, 90px);
  line-height: 1.15;
  font-weight: 500;
}
.lun-count .num {
  font-family: var(--lun-cond);
  font-weight: 700;
  font-size: 1.55em;
  line-height: 0.9;
  color: var(--lun-lit);
  font-variant-numeric: tabular-nums;
}

.lun-ticker {
  right: 5cqw;
  bottom: 6.5cqh;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45em;
  font-size: clamp(11px, 1.15cqw, 48px);
}
.lun-ticker li { display: flex; align-items: center; gap: 0.7em; animation: lun-in 0.5s ease both; }
.lun-ticker li:nth-child(2) { opacity: 0.6; }
.lun-ticker li:nth-child(3) { opacity: 0.35; }
.lun-ticker li:nth-child(4) { opacity: 0.15; }
.lun-ticker .lun-sign { font-size: 1.15em; border-width: 0.12em; }
@keyframes lun-in { from { opacity: 0; transform: translateY(0.4em); } }

.lun-finale {
  left: 5cqw;
  bottom: 6cqh;
  font-family: var(--lun-cond);
  font-weight: 600;
  font-size: clamp(28px, 7cqw, 300px);
  line-height: 0.95;
  opacity: 0;
  transform: translateY(0.15em);
  transition-duration: 1.4s;
}

.lun-stage.is-finale .lun-qr { opacity: 0; transform: translate(40%, -50%); }
.lun-stage.is-finale .lun-ticker,
.lun-stage.is-finale .lun-count { opacity: 0; }
.lun-stage.show-headline .lun-finale { opacity: 1; transform: none; }
.lun-stage.qr-hidden .lun-qr { opacity: 0; }
.lun-stage.hide-hud .lun-title,
.lun-stage.hide-hud .lun-qr,
.lun-stage.hide-hud .lun-count,
.lun-stage.hide-hud .lun-ticker,
.lun-stage.hide-hud .lun-finale { opacity: 0; }

/* Operator controls: appear on mouse movement, invisible to the room otherwise. */
.lun-ops {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  padding: 6px;
  border-radius: 10px;
  background: rgba(8, 14, 26, 0.88);
  border: 1px solid #263756;
  font: 500 13px/1.2 var(--lun-sans);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lun-stage.show-ops .lun-ops { opacity: 1; pointer-events: auto; }
.lun-ops button {
  font: inherit;
  color: var(--lun-ink);
  background: #14223B;
  border: 1px solid #2C3F62;
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
}
.lun-ops button:hover { background: #1B2D4D; }
.lun-ops button:focus-visible { outline: 2px solid var(--lun-sign); outline-offset: 1px; }
.lun-ops kbd {
  font: 600 11px/1 var(--lun-sans);
  color: var(--lun-muted);
  border: 1px solid #3A4E74;
  border-radius: 4px;
  padding: 2px 4px;
  margin-left: 4px;
}
.lun-ops button[data-act="finale"] { background: #23406F; border-color: #3C63A4; }
.lun-status { display: inline-flex; align-items: center; gap: 7px; padding: 0 8px; color: var(--lun-muted); }
.lun-status i { width: 8px; height: 8px; border-radius: 50%; background: #4CD08A; }
.lun-status.is-bad i { background: #FF6B5E; }

.lun-toast {
  position: absolute;
  left: 50%;
  top: 14px;
  z-index: 6;
  transform: translate(-50%, -8px);
  max-width: min(560px, 80%);
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(8, 14, 26, 0.94);
  border: 1px solid #2C3F62;
  font: 500 14px/1.35 var(--lun-sans);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lun-stage.show-toast .lun-toast { opacity: 1; transform: translate(-50%, 0); }

.lun-page-stage { margin: 0; height: 100%; background: var(--lun-night); overflow: hidden; }
html:has(.lun-page-stage) { height: 100%; }
.lun-page-stage #stage { position: fixed; inset: 0; }

@media (prefers-reduced-motion: reduce) {
  .lun-p-beacon { animation: none; }
  .lun-ticker li { animation: none; }
  .lun-title, .lun-qr, .lun-count, .lun-ticker, .lun-finale { transition-duration: 0.01s; }
}