html, body { height:100%; margin:0; background:#050914; overflow:hidden; touch-action:none; }
    canvas { display:block; }

    /* HUD */
    .hud { position:fixed; inset:0; pointer-events:none; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:rgba(255,255,255,.92); }
    .panel {
      position: absolute; left: 16px; top: 60px;
      width:min(520px, calc(100vw - 32px));
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(10px);
      border-radius:16px;
      padding:12px 14px;
      box-shadow:0 20px 60px rgba(0,0,0,.42);
      pointer-events:auto;
    }
    .title { margin:0 0 6px; font-size:14px; font-weight:800; letter-spacing:.2px; }
    .small { margin:0; font-size:12px; line-height:1.45; color:rgba(255,255,255,.78); }
    .row { margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    button {
      appearance:none;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.08);
      color:rgba(255,255,255,.92);
      border-radius:12px;
      padding:10px 12px;
      cursor:pointer;
      font-weight:700;
      font-size:12px;
    }
    button:hover { background:rgba(255,255,255,.12); }
    .badge {
      display:inline-block;
      padding:4px 9px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.06);
      font-size:11px;
      color:rgba(255,255,255,.84);
    }
    .status {
      position:absolute; right:16px; bottom:16px;
      width:min(520px, calc(100vw - 32px));
      background:rgba(0,0,0,.26);
      border:1px solid rgba(255,255,255,.14);
      border-radius:16px;
      padding:10px 12px;
      box-shadow:0 16px 50px rgba(0,0,0,.38);
      pointer-events:none;
      font-size:12px;
      color:rgba(255,255,255,.78);
    }

    /* Mobile touch direction */
    .touch direction {
      position:absolute; left:16px; bottom:16px;
      width:140px; height:140px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.05);
      backdrop-filter: blur(10px);
      pointer-events:auto;
      display:none;
    }
    .stick {
      position:absolute; left:50%; top:50%;
      width:56px; height:56px;
      transform:translate(-50%,-50%);
      border-radius:999px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.12);
    }
    .hintline { margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }

    /* 360 viewer overlay (HTML) */
    .viewer {
      position:fixed; inset:0;
      display:none;
      pointer-events:none;
    }
    .viewer .bar {
      position:absolute; left:16px; right:16px; top:16px;
      display:flex; justify-content:space-between; align-items:center; gap:12px;
      pointer-events:auto;
    }
    .viewer .bar .card {
      flex:1;
      background:rgba(0,0,0,.28);
      border:1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(10px);
      border-radius:16px;
      padding:10px 12px;
      box-shadow:0 16px 50px rgba(0,0,0,.38);
      color:rgba(255,255,255,.86);
    }
    .viewer .bar .card .t { font-weight:800; font-size:13px; margin:0 0 3px; }
    .viewer .bar .card .d { margin:0; font-size:12px; color:rgba(255,255,255,.74); }
    .fade {
      position:fixed; inset:0;
      background:#000; opacity:0; pointer-events:none;
      transition: opacity 220ms ease;
      z-index:10;
    }
    .fade.on { opacity:0.55; }

    @media (max-width: 720px){
      .panel { width: min(560px, calc(100vw - 32px)); }
    }
  
    /* Center reticle / crosshair */
    .reticle {
      position: fixed;
      left: 50%;
      top: 50%;
      width: 18px;
      height: 18px;
      transform: translate(-50%,-50%);
      pointer-events: none;
      z-index: 5;
      opacity: 0.85;
      filter: drop-shadow(0 2px 10px rgba(0,0,0,.55));
    }
    .reticle:before, .reticle:after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 18px;
      height: 2px;
      background: rgba(255,255,255,.85);
      transform: translate(-50%,-50%);
      border-radius: 999px;
    }
    .reticle:after {
      width: 2px;
      height: 18px;
    }

    /* Modal (billboard preview) */
    .modal {
      position: fixed; inset: 0;
      display: none;
      z-index: 20;
      pointer-events: none;
    }
    .modal.on { display:block; }
    .modal .sheet {
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%,-50%);
      width: min(720px, calc(100vw - 32px));
      background: rgba(8,12,20,.82);
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 18px;
      backdrop-filter: blur(14px);
      box-shadow: 0 28px 80px rgba(0,0,0,.55);
      overflow: hidden;
      pointer-events: auto;
    }
    .modal .hero {
      height: 220px;
      background: radial-gradient(1200px 320px at 20% 30%, rgba(120,200,255,.22), rgba(0,0,0,0)),
                  linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border-bottom: 1px solid rgba(255,255,255,.12);
      position: relative;
    }
    .modal .hero img {
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0.65;
      display:block;
      filter: saturate(1.1) contrast(1.05);
    }
    .modal .hero .overlay {
      position:absolute; inset:0;
      background: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.65));
    }
    .modal .content { padding: 14px 14px 16px; }
    .modal .content .h { margin:0 0 6px; font-size:14px; font-weight:900; }
    .modal .content .p { margin:0; font-size:12px; color: rgba(255,255,255,.74); line-height:1.5; }
    .modal .actions {
      padding: 0 14px 14px;
      display:flex; gap:10px; flex-wrap:wrap;
      justify-content:flex-end;
    }
    .modal .actions button.primary{
      background: rgba(110, 210, 255, 0.18);
      border-color: rgba(110, 210, 255, 0.35);
    }

    /* Loading indicator */
    .spinner {
      display:inline-block;
      width: 14px; height: 14px;
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,0.25);
      border-top-color: rgba(255,255,255,0.88);
      animation: spin 0.8s linear infinite;
      vertical-align: -2px;
      margin-right: 8px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Toggle row */
    .toggles { margin-top: 8px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
    .toggle {
      display:flex; gap:8px; align-items:center;
      font-size: 12px;
      color: rgba(255,255,255,.80);
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.05);
      padding: 6px 10px;
      border-radius: 999px;
      pointer-events: auto;
    }
    .toggle input { accent-color: #9ad9ff; }

  
    .settings { margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.12); }
    .settings .row { margin-top:8px; align-items:center; gap:10px; }
    .settings label { font-size:12px; opacity:.9; }
    input[type="range"]{ width:180px; }
    select { background:rgba(255,255,255,.08); color:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:8px 10px; }

  
    .infoBtn{
      position:absolute;
      left:16px; top:16px;
      pointer-events:auto;
      appearance:none;
      border:1px solid rgba(255,255,255,0.18);
      background:rgba(255,255,255,0.10);
      color:rgba(255,255,255,0.92);
      border-radius:12px;
      padding:10px 12px;
      cursor:pointer;
      font-weight:800;
      font-size:12px;
      z-index:25;
    }
    .infoBtn:hover{ background:rgba(255,255,255,0.14); }

    .panelClosed{
      transform: translateY(-6px);
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
    }
    .panelOpen{
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
    }


    /* Gyro permission prompt (iOS requires a user gesture) */
    .gyroPrompt{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      background:rgba(0,0,0,.58);
      backdrop-filter: blur(10px);
      z-index:40;
      pointer-events:auto;
      padding:18px;
    }
    .gyroPrompt.on{ display:flex; }
    .gyroPromptCard{
      width:min(520px, calc(100vw - 36px));
      background:rgba(8,12,20,.88);
      border:1px solid rgba(255,255,255,.16);
      border-radius:18px;
      box-shadow:0 28px 80px rgba(0,0,0,.62);
      padding:14px 14px 12px;
    }
    .gyroPromptTitle{ margin:0 0 6px; font-size:14px; font-weight:900; color:rgba(255,255,255,.92); }
    .gyroPromptText{ margin:0 0 10px; font-size:12px; line-height:1.5; color:rgba(255,255,255,.76); }
    .gyroPromptActions{ display:flex; gap:10px; justify-content:flex-end; }
    .gyroPromptNote{ margin:10px 0 0; font-size:11px; color:rgba(255,255,255,.60); }

/* Post box modal */

/* Post box modal */
.postboxModal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.56);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index:60;
  pointer-events:auto;
  padding:18px;
}
.postboxModal.on{ display:flex; }

.postboxSheet{
  width:min(580px, calc(100vw - 36px));
  max-height: calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(18,22,34,0.96), rgba(10,14,24,0.92));
  border:1px solid rgba(255,255,255,0.16);
  border-radius:20px;
  box-shadow: 0 28px 80px rgba(0,0,0,0.62);
  padding:16px 16px 14px;
  pointer-events:auto;
}

.postboxHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.postboxTitle{
  font-size:16px;
  font-weight:900;
  letter-spacing:0.02em;
  color:rgba(255,255,255,0.94);
}
.postboxSub{
  margin-top:4px;
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,0.70);
  max-width: 46ch;
}

.postboxClose{
  width:38px;
  height:38px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.88);
  cursor:pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.postboxClose:hover{
  background:rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
}
.postboxClose:active{ transform: scale(0.98); }

.postboxForm{
  margin-top:12px;
  display:grid;
  gap:12px;
  overflow:auto;
  padding-right:2px;
}

.postboxLabel{
  display:grid;
  gap:8px;
  font-size:12px;
  font-weight:800;
  letter-spacing:0.04em;
  color:rgba(255,255,255,0.86);
}

.postboxInput,
.postboxTextarea{
  width:100%;
  box-sizing:border-box;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.92);
  padding:10px 12px;
  font-size:14px;
  line-height:1.35;
  outline:none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.postboxInput{ height:44px; }

.postboxTextarea{
  min-height:150px;
  max-height: 34vh;
  resize:none;
  padding-top:10px;
}

.postboxInput:focus,
.postboxTextarea:focus{
  border-color: rgba(160,210,255,0.55);
  box-shadow: 0 0 0 3px rgba(120,170,255,0.18);
  background:rgba(255,255,255,0.08);
}

.postboxActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-top:2px;
}

.postboxActions button{
  appearance:none;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.92);
  border-radius:14px;
  height:42px;
  padding:0 14px;
  font-size:13px;
  font-weight:800;
  letter-spacing:0.02em;
  cursor:pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.postboxActions button:hover{
  background:rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
}
.postboxActions button:active{ transform: scale(0.985); }
.postboxActions button:disabled{
  opacity:0.55;
  cursor:not-allowed;
  transform:none;
}

.postboxStatus{
  font-size:12px;
  line-height:1.35;
  color:rgba(255,255,255,0.74);
  margin-right:auto;
}
.postboxError{
  font-size:12px;
  color:rgba(255,170,170,0.92);
}
.postboxOk{
  font-size:12px;
  color:rgba(170,255,210,0.92);
}
.postboxResult{
  margin-top:12px;
  font-size:13px;
  line-height:1.55;
  color:rgba(170,255,210,0.92);
}

/* Hide honeypot field */
.hpField{display:none !important;}


.postboxResult{ margin-top:12px; font-size:13px; line-height:1.5; color:rgba(170,255,210,0.92); }

.postboxActions #postboxSendBtn{
  background: rgba(120,170,255,0.22);
  border-color: rgba(120,170,255,0.40);
}
.postboxActions #postboxSendBtn:hover{
  background: rgba(120,170,255,0.28);
  border-color: rgba(160,210,255,0.55);
}

/* Photo viewer overlay (for non-360 images opened from billboards) */
.photoViewer{
  position:fixed;
  inset:0;
  z-index:45; /* below #viewer bar but above canvas */
  background: rgba(0,0,0,0.86);
  display:none;
  align-items:center;
  justify-content:center;
}
.photoViewer img{
  width: min(92vw, 1400px);
  height: min(78vh, 900px);
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.10);
}