:root{
  --glass: 600px;
  --hud: #57f0c8;       /* primary HUD cyan-green, high contrast on dark */
  --hud-dim: #2f8f78;
  --warn: #ffcf4d;
  --bad: #ff6a6a;
  --bg: #04100d;
}

*{ box-sizing: border-box; margin:0; padding:0; }

html,body{
  height:100%;
  background:#000;
  color:var(--hud);
  font-family: "SF Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  -webkit-user-select:none; user-select:none;
  overflow:hidden;
}

/* The stage = the world your eye sees; subtle gradient so the HUD reads like a glanceable overlay. */
.stage{
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
  background:
    radial-gradient(1200px 700px at 30% 20%, #0b1f1a 0%, #050b0a 60%, #000 100%);
  padding:18px;
}

/* The lens. Monocular HUD, ~600x600, slight bezel + vignette to feel like a waveguide display. */
.glass{
  position:relative;
  width:min(92vw, var(--glass));
  height:min(92vw, var(--glass));
  max-width:var(--glass);
  max-height:var(--glass);
  aspect-ratio:1/1;
  border-radius:26px;
  overflow:hidden;
  background:#020806;
  box-shadow:
    0 0 0 2px #0d2620,
    0 0 60px rgba(87,240,200,.08),
    inset 0 0 80px rgba(0,0,0,.7);
}
.glass::after{ /* vignette */
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius:26px;
  box-shadow: inset 0 0 90px rgba(0,0,0,.85);
}

canvas#screen{
  position:absolute; inset:0;
  width:100%; height:100%;
  image-rendering: optimizeQuality;
}

/* Overlays */
.overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(2,8,6,.86);
  backdrop-filter: blur(2px);
  z-index:5;
}
.overlay.hidden{ display:none; }

.boot{ text-align:center; }
.boot-logo{
  font-size:46px; font-weight:800; letter-spacing:4px;
  text-shadow:0 0 18px rgba(87,240,200,.55);
}
.boot-logo span{ color:#fff; }
.boot-sub{ margin-top:6px; color:var(--hud-dim); letter-spacing:3px; font-size:16px; }
.boot-btn{
  margin-top:34px;
  background:transparent; color:var(--hud);
  border:2px solid var(--hud); border-radius:999px;
  padding:12px 26px; font:inherit; font-weight:700; letter-spacing:2px;
  cursor:pointer;
  box-shadow:0 0 20px rgba(87,240,200,.25);
  animation: pulse 2s infinite ease-in-out;
}
.boot-btn:hover{ background:var(--hud); color:#04100d; }
@keyframes pulse{ 50%{ box-shadow:0 0 34px rgba(87,240,200,.6); } }
.boot-hint{ margin:40px auto 0; max-width:96%; color:var(--hud-dim); font-size:16px; letter-spacing:0; line-height:1.5; }
.boot-credit{
  margin:26px auto 0; max-width:92%; font-size:16px; letter-spacing:.5px;
  color:#2a5e52;                 /* dim — present but not competing with the logo */
  line-height:1.7; white-space:nowrap;
}
.boot-credit a{ color:#3f8f7c; text-decoration:none; white-space:nowrap; }
.boot-credit a:hover{ color:var(--hud); text-decoration:underline; }
.boot-credit .sep{ opacity:.5; margin:0 4px; }

/* Desktop helper pad */
.pad{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--hud-dim);
}
.pad-row{ display:flex; gap:8px; }
.pad button{
  font:inherit; font-size:14px;
  background:#07140f; color:var(--hud);
  border:1px solid #134034; border-radius:10px;
  min-width:54px; padding:12px 14px; cursor:pointer;
}
.pad button:active{ background:var(--hud); color:#04100d; }
.pad button.primary{ border-color:var(--hud); font-weight:700; min-width:84px; }
.pad-tools{ display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; justify-content:center; max-width:300px; }
.pad-tools button{ font-size:12px; min-width:0; padding:10px 12px; }
.pad-help{ margin-top:10px; font-size:11px; max-width:300px; text-align:center; line-height:1.5; opacity:.7; }

@media (max-width:760px){
  .pad-help{ display:none; }
}