* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: #05070d;
  color: #cfe9ff;
  font-family: "Share Tech Mono", "DejaVu Sans Mono", ui-monospace, Menlo, Consolas, monospace;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }

#hud {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: calc(14px + env(safe-area-inset-left));
  right: calc(14px + env(safe-area-inset-right));
  display: flex;
  align-items: flex-start;
  gap: 14px;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(80, 220, 255, 0.8);
  letter-spacing: 0.1em;
}
#place { display: flex; flex-direction: column; gap: 3px; font-size: 11px; max-width: 40vw; }
#mission { font-size: 13px; color: #ff4fa3; text-shadow: 0 0 8px rgba(255, 60, 160, 0.9); }
#objective { color: #ffe9b0; text-shadow: 0 0 8px rgba(255, 190, 80, 0.7); letter-spacing: 0.04em; font-size: 12px; }
#sector { opacity: 0.7; font-size: 10px; }
#gauges { margin-left: auto; display: flex; gap: 14px; text-align: right; }
#gauges span { display: block; font-size: 9px; opacity: 0.7; }
#gauges b { font-size: 18px; font-weight: 400; color: #7df3ff; font-variant-numeric: tabular-nums; }
#signal i { display: block; width: 74px; height: 9px; margin-top: 6px; border: 1px solid rgba(125, 255, 107, 0.6); }
#signal u { display: block; height: 100%; width: 0; background: #7dff6b; box-shadow: 0 0 8px #7dff6b; }
#menu-button { pointer-events: auto; width: 38px; height: 38px; border: 1px solid rgba(125, 243, 255, 0.4); border-radius: 6px; background: rgba(5, 12, 24, 0.5); color: #7df3ff; font-size: 20px; }

#subtitle {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(76vw, 720px);
  padding: 8px 14px 10px;
  border-left: 2px solid var(--who, #f3e9d2);
  background: rgba(4, 7, 14, 0.72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(13px, 2.1vw, 19px);
  line-height: 1.35;
  color: #f3efe6;
  pointer-events: none;
}
#subtitle b { display: block; margin-bottom: 2px; font-family: "Share Tech Mono", "DejaVu Sans Mono", ui-monospace, monospace; font-size: 0.62em; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--who, #f3e9d2); }
#subtitle.radio { font-family: "Share Tech Mono", "DejaVu Sans Mono", ui-monospace, monospace; font-size: clamp(12px, 1.9vw, 17px); }

#toast { position: fixed; left: 50%; top: 24%; transform: translateX(-50%); font-size: clamp(16px, 3vw, 28px); letter-spacing: 0.2em; color: #ffd98a; text-shadow: 0 0 12px rgba(255, 190, 80, 0.9); opacity: 0; pointer-events: none; transition: opacity 0.6s; white-space: nowrap; }
#toast.on { opacity: 1; }

#action {
  position: fixed;
  right: calc(22px + env(safe-area-inset-right));
  bottom: calc(26px + env(safe-area-inset-bottom));
  min-width: 96px;
  height: 96px;
  padding: 0 14px;
  border: 2px solid #ffb02e;
  border-radius: 50%;
  background: rgba(40, 24, 4, 0.6);
  color: #ffd98a;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  box-shadow: 0 0 22px rgba(255, 176, 46, 0.6), inset 0 0 16px rgba(255, 176, 46, 0.3);
  animation: pulse 1.2s ease-in-out infinite;
}

.panel { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(3, 5, 10, 0.8); z-index: 4; }
.panel .box { width: min(92vw, 520px); max-height: 100%; overflow-y: auto; touch-action: pan-y; padding: 18px 22px; border: 1px solid rgba(125, 243, 255, 0.45); background: rgba(6, 12, 24, 0.94); box-shadow: 0 0 30px rgba(80, 220, 255, 0.25); }
.panel h2 { margin: 0 0 12px; font-weight: 400; letter-spacing: 0.3em; color: #ff4fa3; text-shadow: 0 0 10px rgba(255, 60, 160, 0.9); }
.panel label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 9px 0; font-size: 13px; letter-spacing: 0.05em; }
.panel label.check { justify-content: flex-start; }
.panel input[type=range] { width: 52%; accent-color: #7df3ff; touch-action: pan-x; }
.panel .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.panel button, #debug button { padding: 9px 12px; border: 1px solid #7df3ff; background: rgba(8, 20, 36, 0.8); color: #7df3ff; font: inherit; font-size: 12px; letter-spacing: 0.12em; }
.panel p { margin: 8px 0; line-height: 1.45; font-size: 14px; }
.panel .dim { opacity: 0.75; font-size: 12px; }
#end-text { font-family: Georgia, serif; font-size: 16px; color: #f3efe6; }

#debug { position: fixed; left: 8px; bottom: 8px; z-index: 6; max-width: 70vw; padding: 8px 10px; border: 1px solid #7dff6b; background: rgba(2, 10, 4, 0.9); color: #b9ffb0; font-size: 11px; }
#debug div { margin: 5px 0; }
#debug button { padding: 4px 7px; border-color: #7dff6b; color: #b9ffb0; font-size: 11px; letter-spacing: 0; }
#debug select { max-width: 150px; background: #04140a; color: #b9ffb0; border: 1px solid #7dff6b; font: inherit; }
#debug pre { margin: 4px 0 0; white-space: pre-wrap; opacity: 0.8; }
#fresh { margin: 22px 0 0; padding: 6px 16px; font-size: clamp(11px, 1.7vw, 14px); letter-spacing: 0.25em; color: #ff4fa3; border: 1px solid rgba(255, 79, 163, 0.6); border-radius: 4px; }

/* the floating stick shows where the thumb went down */
#stick { position: fixed; left: 0; top: 0; width: 112px; height: 112px; margin: -56px 0 0 -56px; border: 1px solid rgba(125, 243, 255, 0.45); border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
#stick.on { opacity: 1; }
#stick i { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(125, 243, 255, 0.28); box-shadow: 0 0 14px rgba(125, 243, 255, 0.6); }

#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(5, 7, 13, 0.25), rgba(5, 7, 13, 0.78));
}
#overlay h1 {
  margin: 0;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(34px, 8.5vw, 104px);
  font-weight: 200;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
  color: #ffd9ec;
  text-shadow: 0 0 6px #ff4fa3, 0 0 26px #ff2f92, 0 0 60px rgba(255, 47, 146, 0.7);
  animation: flicker 5s infinite;
}
#sub { margin: 0; font-size: clamp(13px, 2.4vw, 20px); letter-spacing: 0.25em; color: #7df3ff; text-shadow: 0 0 10px rgba(80, 220, 255, 0.8); }
#how { margin: 6px 0 0; font-size: clamp(11px, 1.8vw, 15px); opacity: 0.75; letter-spacing: 0.08em; }
#go { margin: 18px 0 0; padding: 10px 26px; border: 1px solid #7df3ff; border-radius: 4px; font-size: clamp(14px, 2.4vw, 20px); letter-spacing: 0.3em; color: #7df3ff; box-shadow: 0 0 18px rgba(80, 220, 255, 0.45), inset 0 0 14px rgba(80, 220, 255, 0.25); animation: pulse 1.6s ease-in-out infinite; }

#rotate { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: #05070d; z-index: 5; letter-spacing: 0.15em; }
#rotate .phone { width: 54px; height: 96px; border: 2px solid #7df3ff; border-radius: 9px; box-shadow: 0 0 18px rgba(80, 220, 255, 0.6); animation: turn 2.4s ease-in-out infinite; }
#rotate p { margin: 0; color: #7df3ff; }

@keyframes pulse { 50% { opacity: 0.55; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 41% { opacity: 1; } 42% { opacity: 0.6; } 43% { opacity: 1; } 77% { opacity: 1; } 78% { opacity: 0.75; } 79.5% { opacity: 1; } }
@keyframes turn { 0%, 20% { transform: rotate(0deg); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }