:root {
  --bg: #0d0f14;
  --panel: rgba(13, 15, 20, 0.78);
  --text: #f2f4f8;
  --muted: #9aa3b2;
  --accent: #00e5ff;
  --ok: #3ddc84;
  --warn: #ffc23d;
  --err: #ff5a5a;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--accent); }

.hud {
  position: fixed;
  z-index: 1000;
  left: 12px;
  right: 12px;
  top: calc(10px + env(safe-area-inset-top));
  max-width: 360px;
  margin: 0 auto;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--panel);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 12px;
  opacity: 0.85;
  line-height: 1.3;
}

.hud-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.hud-status { font-weight: 600; color: var(--muted); }
.hud-status.ok { color: var(--ok); }
.hud-status.scan { color: var(--warn); }
.hud-status.err { color: var(--err); }

.hud-grid {
  display: grid;
  grid-template-columns: repeat(4, auto 1fr);
  gap: 2px 8px;
  font-variant-numeric: tabular-nums;
}

.hud-grid span { color: var(--muted); }

.hud-links {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.hud-links a { text-decoration: none; font-weight: 600; }

/* "Visit website" call to action, styled after purgatoryedit.com:
   chamfered panel, plumbob green, IBM Plex Mono. */
.visit-btn {
  --chamfer: 8px;
  position: fixed;
  z-index: 1001;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom));
  transform: translate(-50%, 24px);
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  min-width: 154px;
  justify-content: center;
  background: #37ff34;
  color: #050805;
  font: 600 10.5px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  box-shadow: 0 0 17px rgba(55, 255, 52, 0.45);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
  -webkit-tap-highlight-color: transparent;
}

.visit-btn.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.visit-btn:active { background: #afffae; }

@media (prefers-reduced-motion: reduce) {
  .visit-btn { transition: opacity 0.2s ease; transform: translate(-50%, 0); }
}

/* Headset readings graph (after the purgatoryedit.com archive player), on frosted grey
   glass just above the Visit website button. About twice the button's width. */
.readings {
  --w: min(310px, calc(100vw - 32px));
  position: fixed;
  z-index: 1001;
  left: 50%;
  bottom: calc(22px + 33px + 10px + env(safe-area-inset-bottom));
  inline-size: var(--w);
  block-size: calc(var(--w) * 0.27);
  margin: 0;
  padding: 7px 10px 6px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  background: rgba(150, 150, 158, 0.22);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.readings.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.readings__legend {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-block-end: 6px;
  font: 500 8px/1 'IBM Plex Mono', ui-monospace, monospace;
}
.readings__legend abbr { text-decoration: none; }
.readings__timeline { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.readings__timeline svg { flex: 1; inline-size: 100%; block-size: 100%; display: block; min-block-size: 0; }
.readings__track { flex: none; block-size: 2px; background: rgba(255, 255, 255, 0.22); }
@media (prefers-reduced-motion: reduce) {
  .readings { transition: opacity 0.2s ease; transform: translate(-50%, 0); }
}

/* Screen-space date signal above the visit action. */
@font-face{font-family:'Register Pixel';src:url('../fonts/register-pixel.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
.visit-dates{position:fixed;z-index:1001;left:50%;bottom:calc(65px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:20px;width:min(602px,calc((100vw - 32px)*.7));margin:0;padding:6px 10px;text-align:center;font:500 30.8px/1.3 'IBM Plex Mono',monospace;letter-spacing:.025em;color:#37ff34;text-shadow:0 1px 8px #000;opacity:0;pointer-events:none;transition:opacity .3s}
.visit-dates.show{opacity:1;animation:date-signal 5s linear infinite}
.visit-dates i{font-style:normal;font-size:36px;color:#d1d8c9}
.visit-dates:after{content:'';position:absolute;left:10px;right:10px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#37ff34,transparent);transform-origin:left;animation:date-scan 3s ease-in-out infinite}
.visit-dates:before{content:attr(data-text);position:absolute;inset:6px 10px;color:#37ff34;opacity:0;clip-path:inset(35% 0 35%);animation:date-echo 5s steps(1) infinite}
.has-visit-dates .readings{bottom:calc(145px + env(safe-area-inset-bottom))}
@media(max-width:760px){.visit-dates{flex-direction:row;gap:8px;height:calc(var(--visit-button-height,32.5px)*1.4);font-size:clamp(9.8px,3.36vw,15.4px);white-space:nowrap}.visit-dates span{max-width:100%}.visit-dates i{font-size:.7em}.visit-dates:before{inset:0 10px;display:flex;align-items:center;justify-content:center}.has-visit-dates .readings{bottom:calc(75px + var(--visit-button-height,32.5px)*1.4 + env(safe-area-inset-bottom))}}
@keyframes date-signal{0%,75%,91%,94%,100%{transform:translateX(-50%)}92%{transform:translateX(calc(-50% + 2px))}93%{transform:translateX(calc(-50% - 1px))}}
@keyframes date-scan{0%,100%{transform:scaleX(.2);opacity:.25}50%{transform:scaleX(1);opacity:.9}}
@keyframes date-echo{0%,90%,95%,100%{opacity:0}91%,94%{opacity:.8;translate:3px 0}92%{opacity:.6;translate:-2px 0}}
@media(prefers-reduced-motion:reduce){.visit-dates.show,.visit-dates:after,.visit-dates:before{animation:none}}

/* Registration link: quiet text and a slow green glow, without a button panel. */
.visit-btn{min-width:0;max-width:calc(100vw - 32px);padding:8px 10px;background:transparent;color:#37ff34;font:500 clamp(12px,3.5vw,17px)/1.25 'IBM Plex Mono',monospace;letter-spacing:0;text-transform:none;text-decoration:underline;text-underline-offset:4px;clip-path:none;box-shadow:none;white-space:nowrap}
.visit-btn.show{animation:register-link-glow 5.5s ease-in-out infinite}
.visit-btn:active{background:transparent}
.visit-dates{bottom:calc(61px + env(safe-area-inset-bottom));width:calc(100vw - 32px);height:auto;padding:0;font:400 clamp(10px,2.7vw,13px)/1.4 'IBM Plex Mono',monospace;letter-spacing:0;color:#dbe3d8}
.visit-dates.show{animation:none}
.visit-dates:before,.visit-dates:after{display:none}
@keyframes register-link-glow{0%,100%{text-shadow:0 0 3px #37ff342e,0 0 7px #37ff3417}50%{text-shadow:0 0 5px #37ff345c,0 0 13px #37ff343d}}
@media(prefers-reduced-motion:reduce){.visit-btn.show{animation:none;text-shadow:0 0 5px #37ff3433}}