/* Touch devices: joystick, thumb-friendly toolbar, safe areas, no page zoom/scroll. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html, body {
  overscroll-behavior: none;
  touch-action: none;
  -webkit-touch-callout: none;
}
button { touch-action: manipulation; }
.picker-sheet { touch-action: pan-y; }

.hint-touch { display: none; }

/* Night mode: deep warm background behind the diorama. */
html, body { transition: background 0.8s; }
body.night { background: radial-gradient(circle at 50% 40%, #3a3140, #17141c); }
[hidden] { display: none !important; }

.joystick {
  display: none;
  position: fixed;
  left: calc(20px + var(--safe-left));
  bottom: calc(24px + var(--safe-bottom));
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.25));
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  touch-action: none;
}
.joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #e6defd);
  box-shadow: 0 4px 10px rgba(120, 60, 50, 0.25);
  transition: transform 0.12s ease-out;
  pointer-events: none;
}
.joystick.active .joystick-knob { transition: none; background: linear-gradient(145deg, #cfc4ff, var(--accent)); }

@media (pointer: coarse) {
  .joystick { display: block; }
  .hint-desktop { display: none; }
  .hint-touch { display: inline; }
  .hint {
    display: block;
    left: 50%;
    right: auto;
    bottom: auto;
    top: calc(180px + var(--safe-top));
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 32px);
    text-align: center;
    font-size: 13px;
  }

  .panel {
    top: calc(12px + var(--safe-top));
    left: calc(12px + var(--safe-left));
    width: min(260px, calc(100vw - 24px));
    padding: 10px 12px;
  }
  .panel h1 { font-size: 18px; margin-bottom: 8px; }
  .stats { font-size: 13px; }

  .toolbar {
    left: auto;
    right: calc(14px + var(--safe-right));
    bottom: calc(20px + var(--safe-bottom));
    transform: none;
    flex-direction: column;
    border-radius: 28px;
    padding: 6px;
    gap: 6px;
  }
  .toolbar .label { display: none; }
  .toolbar button { width: 48px; height: 48px; padding: 0; justify-content: center; font-size: 20px; }
  .toolbar #btn-turbo { order: 99; width: 64px; height: 64px; font-size: 28px; align-self: center; }

  /* max-content: otherwise left:50% squeezes the toast into half the screen and it wraps. */
  .toast { top: calc(124px + var(--safe-top)); font-size: 15px; width: max-content; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .panel { width: 220px; }
  .hint { display: none; }
  .joystick { width: 112px; height: 112px; }
  .toolbar { flex-direction: row; align-items: center; border-radius: 999px; }
}