/*
 * Quantum Pong — base layout (integration, SPEC §14 + SPEC_V2 §E).
 * Full-screen layered stage inside #app:
 *   z 0  #field-canvas    wave function + potential landscape (WebGL / 2D)
 *   z 1  #overlay-canvas  HUD, paddles, effects (2D, transparent, no input)
 *   z 20 #controls-layer  touch buttons / sliders (QP.Controls)
 *   z 26 #qp-fs           fullscreen button (play only, next to the pause button)
 *   z 30 #ui-root         menus (QP.UI, .qp-ui from ui.css)
 *   z 90 #qp-rotate       portrait-phone "rotate your device" overlay
 * No scrollbars, no rubber-band, no text selection, no double-tap zoom; safe areas respected by the
 * modules that place content (ui.css / controls.css / overlay margins); the canvases stay edge to edge.
 */
:root {
  color-scheme: dark;
  --qp-bg: #05060d;
  --qp-ink: #eaf4ff;
  --qp-dim: #93a7c8;
  --qp-cyan: #38e8ff;
  --qp-magenta: #ff4fd8;
  --qp-safe-t: env(safe-area-inset-top, 0px);
  --qp-safe-r: env(safe-area-inset-right, 0px);
  --qp-safe-b: env(safe-area-inset-bottom, 0px);
  --qp-safe-l: env(safe-area-inset-left, 0px);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--qp-bg);
  color: var(--qp-ink);
}
html {
  height: -webkit-fill-available;          /* iOS Safari: the real visible height */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  position: fixed;                          /* no rubber-band scrolling of the page on iOS */
  inset: 0;
  left: 0; top: 0; right: 0; bottom: 0;
  overscroll-behavior: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#app {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--qp-bg);
  touch-action: none;
  -ms-touch-action: none;
  overscroll-behavior: none;
  contain: layout paint;
  isolation: isolate;
}
#app:fullscreen { width: 100%; height: 100%; background: var(--qp-bg); }
#app:-webkit-full-screen { width: 100%; height: 100%; background: var(--qp-bg); }
#app::backdrop { background: var(--qp-bg); }

#field-canvas, #overlay-canvas {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  border: 0;
  outline: none;
  touch-action: none;
  will-change: transform;
}
#field-canvas { z-index: 0; background: var(--qp-bg); }
#overlay-canvas { z-index: 1; pointer-events: none; }

#controls-layer {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 20;
  touch-action: none;
}
#ui-root {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 30;
}

/* ---------------- fullscreen button (SPEC_V2 §E) ---------------- */
.qp-chrome-btn {
  position: absolute;
  z-index: 26;
  top: 8px;
  top: calc(8px + var(--qp-safe-t));
  right: 8px;
  right: calc(8px + var(--qp-safe-r));
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1.5px solid rgba(200, 228, 255, .45);
  background: rgba(6, 9, 22, .55);
  color: #d6ecff;
  box-shadow: 0 0 10px rgba(200, 228, 255, .16);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .2s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.qp-chrome-btn[hidden] { display: none !important; }
.qp-chrome-btn:hover { border-color: rgba(56, 232, 255, .8); box-shadow: 0 0 14px rgba(56, 232, 255, .35); }
.qp-chrome-btn:active { transform: scale(.94); }
.qp-chrome-btn:focus { outline: none; }
.qp-chrome-btn:focus-visible { outline: 2px solid var(--qp-cyan); outline-offset: 2px; }
.qp-chrome-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#qp-fs .qp-fs-off { display: none; }
#app.qp-is-fs #qp-fs .qp-fs-on { display: none; }
#app.qp-is-fs #qp-fs .qp-fs-off { display: block; }
/* with the controls' pause button (48 px at top/right 8 px) the fullscreen button sits just left of it */
#app.qp-has-pause #qp-fs { right: 64px; right: calc(64px + var(--qp-safe-r)); top: 10px; top: calc(10px + var(--qp-safe-t)); }
/* menus cover the stage: the button only shows during play (main toggles qp-playing) */
#app:not(.qp-playing) #qp-fs { opacity: 0; pointer-events: none; visibility: hidden; }

/* ---------------- portrait phones: rotate overlay (SPEC_V2 §E) ---------------- */
#qp-rotate {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding: calc(24px + var(--qp-safe-t)) calc(24px + var(--qp-safe-r)) calc(24px + var(--qp-safe-b)) calc(24px + var(--qp-safe-l));
  background:
    radial-gradient(ellipse at 50% 42%, rgba(56, 232, 255, .10), rgba(5, 6, 13, 0) 60%),
    radial-gradient(ellipse at 50% 70%, rgba(255, 79, 216, .07), rgba(5, 6, 13, 0) 55%),
    var(--qp-bg);
  text-align: center;
  touch-action: none;
}
#app.qp-portrait #qp-rotate { display: flex; }
.qp-rotate-card { display: flex; flex-direction: column; align-items: center; max-width: 320px; }
.qp-rotate-phone { width: 108px; height: 108px; margin-bottom: 18px; overflow: visible; filter: drop-shadow(0 0 10px rgba(56, 232, 255, .45)); }
.qp-rotate-body { transform-origin: 48px 48px; animation: qp-rotate-turn 2.6s cubic-bezier(.6, 0, .3, 1) infinite; }
.qp-rotate-arrow { animation: qp-rotate-fade 2.6s ease-in-out infinite; }
.qp-rotate-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--qp-ink);
  text-shadow: 0 0 12px rgba(56, 232, 255, .55);
}
.qp-rotate-sub { margin-top: 8px; font-size: 14px; color: var(--qp-dim); letter-spacing: .02em; }
@keyframes qp-rotate-turn { 0%, 25% { transform: rotate(0deg); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@keyframes qp-rotate-fade { 0%, 20% { opacity: 1; } 50%, 85% { opacity: .15; } 100% { opacity: 1; } }

.qp-noscript {
  position: absolute; left: 0; right: 0; top: 40%;
  text-align: center; color: var(--qp-ink); font-size: 16px; padding: 0 24px;
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .qp-rotate-body, .qp-rotate-arrow { animation: none; }
  .qp-rotate-body { transform: rotate(-90deg); }
  .qp-chrome-btn { transition: none; }
}
#app.qp-reduce-motion .qp-rotate-body, #app.qp-reduce-motion .qp-rotate-arrow { animation: none; }
#app.qp-reduce-motion .qp-rotate-body { transform: rotate(-90deg); }