/* ===========================================================================
   ON / BEAT — global shell (owned by the lead agent).
   Selection and play styles live in selection.css / game.css; this file only
   provides the page shell, the touch layer, overlays, library panel and toasts.
   Loaded FIRST, so the two screen stylesheets can win on their own selectors.
   =========================================================================== */

:root {
  color-scheme: dark;
  --ob-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --ob-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --ob-ink: #f6efe6;
  --ob-accent: #ff8a3d;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  overflow: hidden;
  background: #160e0b;
  color: var(--ob-ink);
  font-family: var(--ob-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
}

#app { position: fixed; inset: 0; overflow: hidden; }

/* --- play screen shell ---------------------------------------------------- */
.ob-play[hidden] { display: none; }

/* The touch layer is sized in JS from layoutFor().track so its four equal
   columns line up exactly with the four drawn lanes. It sits above both
   canvases and below the (pointer-transparent) HUD. */
#input-layer {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; width: 100%;
  z-index: 2;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  pointer-events: auto;
}

/* Overlay panels (result / calibration) are appended by their own modules.
   Global layer: calibration is reachable from the selection screen too. */
#overlay-root {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
}
#overlay-root .ob-result,
#overlay-root .ob-calib { pointer-events: auto; }
#overlay-root[hidden] { display: none; }

/* --- landscape-only hint for the play screen ------------------------------ */
.ob-play-rotate {
  position: absolute; inset: 0; z-index: 30;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 2vmin;
  padding: 8vmin;
  text-align: center;
  background: rgba(18, 12, 14, .97);
  font-size: 14px; letter-spacing: .06em;
}
.ob-play-rotate-icon {
  width: 9vmin; height: 14vmin;
  border: 2px solid currentColor; border-radius: 1.6vmin;
  transform: rotate(-90deg);
  opacity: .8;
}
.ob-play-rotate-title { font-family: var(--ob-serif); font-style: italic; font-size: clamp(24px, 4vmin, 40px); }
.ob-play-rotate-sub { opacity: .6; font-size: 12px; }
@media (orientation: portrait) and (max-width: 900px) {
  #play:not([hidden]) .ob-play-rotate { display: flex; }
}

/* --- upload state panel --------------------------------------------------- */
#upload-root {
  position: fixed;
  right: calc(18px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 40;
  width: clamp(180px, 20vw, 250px);
  pointer-events: none;
}
#upload-root:empty { display: none; }
#upload-root > * { border-radius: 10px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.38); }

/* --- local library -------------------------------------------------------- */
.ob-library-btn {
  position: fixed;
  left: calc(20px + env(safe-area-inset-left));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 35;
  padding: 9px 16px;
  border: 1px solid rgba(246,239,230,.28);
  border-radius: 999px;
  background: rgba(28,18,15,.42);
  color: var(--ob-ink);
  font: 11px/1 var(--ob-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.ob-library-btn:hover, .ob-library-btn:focus-visible { background: rgba(28,18,15,.72); outline: none; }

.ob-library {
  position: fixed;
  left: calc(20px + env(safe-area-inset-left));
  bottom: calc(64px + env(safe-area-inset-bottom));
  z-index: 36;
  width: min(360px, 82vw);
  max-height: min(60vh, 420px);
  display: flex; flex-direction: column;
  padding: 18px;
  border: 1px solid rgba(246,239,230,.16);
  border-radius: 14px;
  background: rgba(24,16,16,.94);
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
  backdrop-filter: blur(14px);
}
.ob-library-head { display: flex; align-items: center; justify-content: space-between; }
.ob-library-title { font-family: var(--ob-serif); font-style: italic; font-size: 24px; }
.ob-library-close {
  border: 0; background: transparent; color: var(--ob-ink);
  font-size: 22px; line-height: 1; cursor: pointer; opacity: .7;
}
.ob-library-note { margin: 8px 0 14px; font-size: 11px; line-height: 1.6; opacity: .58; }
.ob-library-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.ob-library-empty { font-size: 12px; opacity: .55; padding: 12px 0; }
.ob-library-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 8px;
  background: rgba(246,239,230,.06);
}
.ob-library-thumb { width: 42px; height: 42px; border-radius: 5px; object-fit: cover; flex: none; }
.ob-library-meta { flex: 1; min-width: 0; }
.ob-library-name {
  font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ob-library-sub { font-size: 10px; opacity: .55; letter-spacing: .08em; margin-top: 3px; }
.ob-library-del {
  flex: none; border: 1px solid rgba(240,150,130,.35); border-radius: 999px;
  background: transparent; color: #f0a08c;
  font: 10px/1 var(--ob-sans); letter-spacing: .1em;
  padding: 7px 11px; cursor: pointer;
}
.ob-library-del:hover { background: rgba(240,150,130,.14); }

/* --- difficulty selector (appended to the calibration panel) -------------- */
.ob-diff-row {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 8px 20px; margin: 4px 0;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.ob-diff-row label { opacity: .6; text-align: right; }
.ob-diff-select {
  background: rgba(246,239,230,.08); color: var(--ob-ink);
  border: 1px solid rgba(246,239,230,.2); border-radius: 6px;
  padding: 6px 10px; font: 12px/1 var(--ob-sans); letter-spacing: .06em;
}
.ob-manual-row {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 8px 20px; margin: 4px 0;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.ob-manual-row label { opacity: .6; text-align: right; }
.ob-offset-input {
  width: 110px; background: rgba(246,239,230,.08); color: var(--ob-ink);
  border: 1px solid rgba(246,239,230,.2); border-radius: 6px;
  padding: 6px 10px; font: 12px/1 var(--ob-sans);
  font-variant-numeric: tabular-nums;
}
.ob-calib-tap {
  font-size: 12px; line-height: 1.6; opacity: .78;
  max-width: 54ch; text-align: center;
}

/* --- toasts --------------------------------------------------------------- */
#toast-root {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  max-width: min(560px, 88vw);
}
.ob-toast {
  padding: 11px 18px;
  border: 1px solid rgba(246,239,230,.18);
  border-radius: 999px;
  background: rgba(24,16,16,.92);
  color: var(--ob-ink);
  font-size: 12px; line-height: 1.5; letter-spacing: .02em;
  text-align: center;
  box-shadow: 0 10px 32px rgba(0,0,0,.4);
  animation: ob-toast-in 220ms ease-out both;
}
.ob-toast[data-kind="error"] { border-color: rgba(240,150,130,.5); color: #f3c6b7; }
.ob-toast[data-kind="success"] { border-color: rgba(150,220,180,.4); color: #c8ecd4; }
@keyframes ob-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---- shared interaction polish (all screens) ---------------------------- */
:root { --ob-ease: cubic-bezier(.22, 1, .36, 1); }
button, [role="button"], select, input, a { -webkit-tap-highlight-color: transparent; }
:where(button, [role="button"], select, a, input):focus-visible {
  outline: 2px solid var(--ob-accent, #ff8a3d);
  outline-offset: 3px;
}
.ob-toast { transition: opacity 180ms var(--ob-ease), transform 180ms var(--ob-ease); }
.ob-library-btn, .ob-library-del, .ob-library-close, .ob-btn {
  transition: background 180ms var(--ob-ease), border-color 180ms var(--ob-ease),
              transform 160ms var(--ob-ease), color 180ms var(--ob-ease);
}
.ob-library-btn:active, .ob-library-del:active, .ob-library-close:active { transform: scale(.96); }
.ob-library-row { transition: background 180ms var(--ob-ease); }
.ob-library-row:hover { background: rgba(246,239,230,.10); }
.ob-nav-link:active, .ob-locale:active, .ob-arrow:active, .ob-dot:active { opacity: .68; }
.ob-play-rotate-icon { animation: ob-tilt 2.4s var(--ob-ease) infinite alternate; }
@keyframes ob-tilt {
  from { transform: rotate(-90deg) translateY(0); }
  to   { transform: rotate(-90deg) translateY(-6px); }
}

/* --- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .ob-play-rotate-icon { animation: none; }
}