:root {
  color-scheme: dark;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: #000;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
body { overscroll-behavior: none; touch-action: none; }
button, a { font: inherit; }

#app { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
#room-canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }

#reticle {
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .1s ease;
}
#reticle.reticle--active { transform: scale(1.45); }
.game-entered #reticle { opacity: 1; }

#status {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  padding: 6px 9px;
  background: rgba(0,0,0,.48);
  border-radius: 6px;
  color: rgba(255,255,255,.82);
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
#status.status--visible { opacity: 1; }

.overlay {
  position: absolute; inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(0,0,0,.74);
  z-index: 20;
}
.overlay--visible { display: grid; }

.panel {
  width: min(440px, 100%);
  padding: 24px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(14,14,14,.96);
  text-align: center;
}
.panel h1, .panel h2 { margin: 0 0 16px; font-size: 22px; font-weight: 600; }
.panel p { margin: 10px 0 18px; color: rgba(255,255,255,.72); line-height: 1.5; }
.panel__hint { font-size: 11px; margin-bottom: 0 !important; }
.panel button, .panel a.modal-link {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 10px 0 0;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.35);
  background: #f2f2f2;
  color: #111;
  text-decoration: none;
  cursor: pointer;
}
.panel button:disabled { opacity: .4; cursor: default; }
#modal-exit { background: transparent; color: #fff; }

#mobile-joystick {
  position: absolute;
  left: max(24px, env(safe-area-inset-left));
  bottom: max(42px, env(safe-area-inset-bottom));
  width: 132px; height: 132px;
  display: none;
  border: 2px solid rgba(255,255,255,.26);
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  z-index: 8;
  touch-action: none;
}
#mobile-joystick-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.28);
  transform: translate(0,0);
  pointer-events: none;
}
.is-mobile.game-entered #mobile-joystick { display: block; }
.modal-open #mobile-joystick { display: none !important; }

.fatal-error {
  position: absolute; inset: 16px;
  z-index: 100;
  overflow: auto;
  padding: 18px;
  background: #240b0b;
  border: 1px solid #a44;
  color: #fff;
  white-space: pre-wrap;
  touch-action: pan-y;
}



/* Dedicated interactive iPhone overlay. The screenshot sits over a CSS phone body;
   app links are transparent percentage-based hit targets layered over the image. */
.iphone-overlay {
  background: rgba(0,0,0,.78);
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
.iphone-dialog {
  width: min(390px, 88vw);
  height: min(820px, 86vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.iphone-phone-body {
  position: relative;
  width: auto;
  height: min(730px, calc(86vh - 72px));
  aspect-ratio: 9 / 19.5;
  max-width: 82vw;
  padding: 7px;
  border-radius: 12.5% / 5.8%;
  background: #1a1a1a;
  box-shadow: 0 18px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.15);
}
.iphone-screen-stage {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 11.5% / 5.3%;
  overflow: hidden;
}
.iphone-screenshot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.iphone-screenshot[hidden] { display: none; }
.iphone-app-targets {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.iphone-app-target {
  position: absolute;
  display: block;
  border-radius: 22%;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.iphone-app-target:focus-visible {
  outline: 2px solid rgba(255,255,255,.95);
  outline-offset: 2px;
}
/* Add .iphone-debug to <body> while tuning coordinates to reveal hitboxes. */
.iphone-debug .iphone-app-target {
  background: rgba(255,100,0,.22);
  outline: 1px solid rgba(255,170,70,.95);
}
.iphone-exit {
  width: min(260px, 70vw);
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(12,12,12,.92);
  color: #fff;
  cursor: pointer;
}

@media (max-width: 480px) {
  .overlay { padding: 16px; }
  .panel { padding: 20px; }
}

/* -------------------------------------------------------------------------
   Mobile interaction polish
   Prevent accidental text/image selection, iOS callouts, and tap highlights
   while navigating the 3D room and HTML overlays.
   ------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  html,
  body,
  canvas,
  #ui,
  #overlay,
  #modal,
  #iphoneOverlay,
  .n_iphone-overlay,
  .n_iphone-phone,
  .n_iphone-screen,
  .n_iphone-app-target {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  a,
  button,
  [role="button"],
  .n_iphone-app-target {
    -webkit-tap-highlight-color: transparent;
  }

  img {
    -webkit-user-drag: none;
    user-drag: none;
  }
}

/* -------------------------------------------------------------------------
   iOS long-press magnifier / loupe suppression
   Keep Safari from treating gameplay and overlay surfaces as selectable
   text or draggable image content.
   ------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  html,
  body,
  canvas,
  #ui,
  #overlay,
  #modal,
  #iphoneOverlay,
  .n_iphone-overlay,
  .n_iphone-phone,
  .n_iphone-screen,
  .n_iphone-app-target,
  a,
  button,
  img,
  span,
  div {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
  }

  img,
  canvas {
    -webkit-user-drag: none !important;
    user-drag: none !important;
  }

  a,
  button,
  [role="button"],
  .n_iphone-app-target {
    -webkit-tap-highlight-color: transparent !important;
  }
}