/* Nuts and Bolts — chunky 3D hex prism nuts on threaded bolts.
   Floats in a dark void. Mobile builds collapse the panel chrome so the
   game fills the screen edge-to-edge. */

html, body {
  min-height: 100%;
  /* Prevent the page from scrolling and prevent double-tap zoom on the
     interactive surface. */
  overflow: hidden;
  touch-action: manipulation;
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 16px;
  min-height: 100vh;
  /* Use the dynamic viewport unit on supporting browsers so the layout
     compensates for the iOS/Android URL bar collapsing. */
  min-height: 100dvh;
}

.app {
  width: 100%;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.top {
  width: 100%;
  text-align: center;
  padding-left: 52px;
  padding-right: 8px;
}
.top h1 {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel {
  width: 100%;
  background: linear-gradient(145deg, rgba(16, 20, 38, 0.95), #090c18 50%, #05060f 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 26px;
  padding: 20px 18px 16px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hidden { display: none !important; }
[hidden] { display: none !important; }

/* ---- Menu / level grid (unchanged dark theme) ---- */
.menu-panel {
  padding: 22px 18px 18px;
  /* The 150-level grid is taller than the viewport — scroll inside the
     panel rather than letting the page scroll, since the body is locked
     to prevent the canvas from scrolling during play. */
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.menu-title {
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.menu-hint {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.level-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.level-card {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text);
  font: inherit;
}
.level-card:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(138, 124, 255, 0.25);
}
.level-card:disabled { cursor: not-allowed; opacity: 0.55; }
.level-card .lvl-num {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}
.level-card .lvl-preview {
  display: flex; gap: 4px; margin: 4px 0;
}
.level-card .lvl-preview .swatch {
  width: 12px; height: 12px; border-radius: 50%;
}
.level-card .lvl-name { font-size: 12px; font-weight: 700; }
.level-card.cleared::after {
  content: '✓';
  position: absolute; top: 6px; right: 8px;
  width: 18px; height: 18px;
  background: var(--accent); color: #0b0b12;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px;
}
.level-card.locked .lock-svg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px; color: rgba(255, 255, 255, 0.4);
}
.level-card.locked .lvl-num,
.level-card.locked .lvl-preview,
.level-card.locked .lvl-name { display: none; }

/* ---- Game header ---- */
.game-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.level-tag {
  font-weight: 700; font-size: 14px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text);
}
.level-info-tag {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 3px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--muted);
  margin-left: auto;
}
.icon-btn {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 50%; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--surface-hover); color: var(--accent); border-color: var(--accent); }

/* ---- Settings panel ---- */
.settings-list {
  display: flex; flex-direction: column; gap: 12px;
  margin: 8px 0 4px;
  width: 100%;
}
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 14px; color: var(--text);
  cursor: pointer;
}
.setting-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 38px; height: 22px;
  background: var(--line); border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 0.18s ease;
}
.setting-row input[type="checkbox"]::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: var(--text); border-radius: 50%;
  transition: transform 0.18s ease;
}
.setting-row input[type="checkbox"]:checked { background: var(--accent); }
.setting-row input[type="checkbox"]:checked::after { transform: translateX(16px); background: #0b0b12; }

.status-msg {
  /* Status bar hidden by default — the game communicates via animation,
     sound, and overlays rather than text feedback. The element is kept in
     the DOM so JS code that writes to it doesn't have to check, but it's
     never visible. */
  display: none;
}

/* ---- The stage — hosts the Three.js canvas. Plain dark background that
   matches the rest of the site. Three.js canvas is transparent over it. ---- */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: 16px;
  background: var(--bg, #0b0b12);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.06));
  overflow: hidden;
  box-shadow: inset 0 12px 32px rgba(0, 0, 0, 0.4);
  touch-action: manipulation;
}
.stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  /* `touch-action: none` disables ALL native gestures on the canvas:
     no double-tap zoom, no pinch zoom, no pan, no fling-scroll. We
     handle every input ourselves through pointerdown. */
  touch-action: none;
  /* Cross-fade between levels when auto-advancing — handled by toggling
     the `.transitioning` class on the parent stage. */
  opacity: 1;
  transition: opacity 250ms ease;
}
.stage.transitioning canvas {
  opacity: 0;
}
/* Buttons stay tappable but don't trigger double-tap zoom. */
button, .level-card, .icon-btn, .home-btn, .chip {
  touch-action: manipulation;
}

/* ---- Buttons & actions ---- */
.primary-btn {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
  font-weight: 600; font-size: 14px; letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.primary-btn:hover {
  background: rgba(138, 124, 255, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(138, 124, 255, 0.3);
}
.ghost-btn {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill); color: var(--text);
  padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.ghost-btn:hover { background: var(--surface-hover); border-color: var(--accent); color: var(--accent); }
.ghost-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.game-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---- Overlay ---- */
.overlay {
  position: fixed; inset: 0;
  background: rgba(8, 10, 22, 0.78);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 24px;
}
.overlay-card {
  background: linear-gradient(145deg, #1a1c30, #0d0e1d);
  border: 1px solid rgba(138, 124, 255, 0.3);
  border-radius: 22px; padding: 28px 32px; text-align: center;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
  box-shadow: 0 0 40px rgba(138, 124, 255, 0.2);
  max-width: 340px;
}
.overlay-card h2 {
  font-size: 1.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
}
.overlay-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.muted { color: var(--muted); font-size: 0.85rem; }

@media (max-width: 600px) {
  /* MOBILE FULL-SCREEN: the game owns the entire viewport. We strip the
     panel chrome (border, padding, rounded corners, gradient) and let the
     stage canvas flex-grow to fill the remaining vertical space. */
  body {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .app {
    max-width: none;
    margin-top: 0;
    gap: 0;
    height: 100dvh;
    min-height: 100dvh;
  }
  /* Hide the "NUTS & BOLTS" page title on mobile — wastes vertical space. */
  .top { display: none; }

  .panel {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    background: transparent;
    padding: 56px 12px 16px;
    box-sizing: border-box;
  }
  .menu-panel {
    padding: 56px 14px 16px;
    max-height: 100dvh;
    overflow-y: auto;
  }

  /* Stage takes all leftover vertical space — no aspect-ratio constraint. */
  .stage {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 12px;
  }

  .game-header { padding: 0 2px; }
  .game-actions { padding: 0 2px; gap: 8px; }
  .ghost-btn, .primary-btn { padding: 8px 14px; font-size: 13px; }
}