/* Red Rock Studio — mobile-first UI kit.
   Vendored, never linked (see ai-docs/adrs/ADR-002-mobile-first-studio-kit.md).
   Copy the parts you need into a game folder at creation time. Games stay
   self-contained per ADR-001. */

:root {
  /* design tokens — color (studio palette, matches homepage) */
  --rr-bg: #14100c;
  --rr-bg-soft: #1a1510;
  --rr-panel: #1f1a14;
  --rr-panel-line: #2c251e;
  --rr-ink: #f2e8da;
  --rr-muted: #b3a695;
  --rr-accent: #d96c3b;
  --rr-accent-soft: rgba(217, 108, 59, 0.14);
  --rr-ok: #2fa84f;
  --rr-warn: #e8a13a;
  --rr-focus: #e8a13a;

  /* design tokens — spacing scale (4px base) */
  --rr-space-1: 4px;
  --rr-space-2: 8px;
  --rr-space-3: 12px;
  --rr-space-4: 16px;
  --rr-space-5: 24px;
  --rr-space-6: 32px;

  --rr-radius: 14px;
  --rr-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* safe-area baselines: non-notch devices still get camera / gesture
     offset because env() resolves to 0px there and the minimum keeps the
     gap. */
  --rr-safe-min-top: 16px;
  --rr-safe-min-bottom: 12px;

  /* raw safe-area insets (0px where env() is unsupported or there is no
     notch). Use them in game CSS for side and bottom padding, e.g.
     padding-bottom: calc(var(--rr-space-3) + var(--rr-inset-bottom)). */
  --rr-inset-top: env(safe-area-inset-top, 0px);
  --rr-inset-right: env(safe-area-inset-right, 0px);
  --rr-inset-bottom: env(safe-area-inset-bottom, 0px);
  --rr-inset-left: env(safe-area-inset-left, 0px);

  /* menu bar height: 44px touch target + borders */
  --rr-menu-height: 48px;
  /* menu bar side columns: equal widths keep the title centred */
  --rr-menu-side: 44px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* no flash on tap (iOS/Android) */
}

html {
  color-scheme: dark;
  height: 100%;
}

body {
  background: var(--rr-bg);
  color: var(--rr-ink);
  font-family: var(--rr-font);
  line-height: 1.5;
  height: 100%;
  overflow: hidden;
  -webkit-touch-callout: none; /* no long-press callout on game UI */
}

a {
  color: var(--rr-accent);
  text-decoration: none;
}

/* Touch targets: at least 44x44px (Apple HIG / WCAG 2.5.8).
   .text-link overrides for inline text links that are not tap targets. */
button,
.btn,
[role="button"],
a[href],
input[type="button"],
input[type="submit"],
select {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation; /* no double-tap zoom delay on mobile */
}

a[href] {
  gap: var(--rr-space-1);
}

.text-link {
  min-width: 0;
  min-height: 0;
  display: inline;
  touch-action: auto;
}

:focus-visible {
  outline: 2px solid var(--rr-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Game shell: one full viewport, content stays on screen. */
.game-shell {
  position: relative;
  height: 100vh; /* fallback for browsers without dvh */
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Fit shell (opt-in: class="game-shell fit"). For games whose screens
   never scroll (canvas stages, action games): the shell is pinned to the
   window with position: fixed; inset: 0 instead of sized by 100dvh,
   which some iOS standalone (installed PWA) builds measure wrongly, so
   it fills the window exactly in a tab and in a PWA. The menu bar sits in
   flow (its own .safe-top covers the camera inset) and .game-scroll
   becomes a non-scrolling flex column: each screen is a flex child that
   takes the free height (flex: 1 1 auto; min-height: 0) and pads itself
   by --rr-inset-right/bottom/left. One screen visible at a time. */
.game-shell.fit {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
}

.game-shell.fit > .menu-bar {
  position: relative;
  flex: none;
}

.game-shell.fit > .game-scroll,
.game-shell.fit > .game-scroll.has-menu {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  padding: 0;
}

/* Centred column (P067): the studio makes portrait-only games. On a window
   wider than a portrait screen (aspect wider than 3:4) that is not a
   sideways phone (that gets the portrait guard instead), the shell is a
   centred column; the body background paints the sides. The shell's
   children lay out against the column, exactly as on a phone. */
@media (min-aspect-ratio: 3/4) and (min-height: 521px) {
  .game-shell,
  .game-shell.fit {
    width: min(100vw, 75vh, 600px);
    width: min(100vw, 75dvh, 600px);
    margin-left: auto;
    margin-right: auto;
  }

  .game-shell.fit {
    left: 0;
    right: 0;
  }
}

/* Scrollable content area inside the shell. */
.game-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: var(--rr-space-4);
}

/* Reserve room for the menu bar when it is pinned to the shell top. */
.game-scroll.has-menu {
  padding-top: calc(var(--rr-menu-height) + env(safe-area-inset-top, 0px) + var(--rr-space-3));
}

/* Safe-area utilities.
   Two declarations per rule: the first is the fallback for browsers
   without env() support; the second adds the real inset on top of a
   minimum so non-notch devices still keep content off the camera bar. */
.safe-top {
  padding-top: var(--rr-safe-min-top);
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--rr-safe-min-top));
}

.safe-bottom {
  padding-bottom: var(--rr-safe-min-bottom);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--rr-safe-min-bottom));
}

/* Side insets: keeps content clear of a notch on a phone held sideways. */
.safe-x {
  padding-left: var(--rr-space-3);
  padding-right: var(--rr-space-3);
  padding-left: calc(env(safe-area-inset-left, 0px) + var(--rr-space-3));
  padding-right: calc(env(safe-area-inset-right, 0px) + var(--rr-space-3));
}

/* Menu bar: top nav pinned to the shell top (kit header, P051).
   Three columns with equal side widths, so the title sits at the true
   centre of the bar whatever is on either side: column 1 is empty,
   column 2 the title, column 3 the one hamburger button (#btn-menu,
   .menu-burger) that opens RR_gameMenu (game-menu.js). Nothing else
   goes in the bar; game HUD belongs in the play stage. */
.menu-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  display: grid;
  grid-template-columns: var(--rr-menu-side) minmax(0, 1fr) var(--rr-menu-side);
  align-items: center;
  gap: var(--rr-space-2);
  min-height: var(--rr-menu-height);
  padding: var(--rr-safe-min-top) var(--rr-space-3) 0;
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--rr-safe-min-top));
  /* side insets: in landscape the notch sits on the left or right */
  padding-left: calc(env(safe-area-inset-left, 0px) + var(--rr-space-3));
  padding-right: calc(env(safe-area-inset-right, 0px) + var(--rr-space-3));
  background: var(--rr-panel);
  border-bottom: 1px solid var(--rr-panel-line);
}

.menu-bar .menu-title {
  grid-column: 2;
  min-width: 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The hamburger: a 44px icon button, three CSS bars (no font glyph). */
.menu-bar .menu-burger {
  grid-column: 3;
  justify-self: end;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--rr-ink);
  border: 1px solid var(--rr-panel-line);
  cursor: pointer;
}

.menu-burger .rr-burger {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.menu-burger[aria-expanded="true"] {
  color: var(--rr-accent);
  border-color: var(--rr-accent);
}

/* Game menu sheet (RR_gameMenu, game-menu.js): a modal over every screen.
   The backdrop eats taps so the game below never sees them. */
.rr-gm {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--rr-space-4) + var(--rr-inset-top)) calc(var(--rr-space-4) + var(--rr-inset-right))
    calc(var(--rr-space-4) + var(--rr-inset-bottom)) calc(var(--rr-space-4) + var(--rr-inset-left));
  user-select: none;
  -webkit-user-select: none;
}

.rr-gm[hidden] {
  display: none;
}

.rr-gm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.72);
  touch-action: none;
}

.rr-gm-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-3);
  width: 100%;
  max-width: 320px;
  max-height: 100%;
  overflow-y: auto;
  padding: var(--rr-space-5) var(--rr-space-4);
  background: var(--rr-panel);
  border: 1px solid var(--rr-panel-line);
  border-radius: var(--rr-radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  font-family: var(--rr-font);
  color: var(--rr-ink);
  text-align: center;
}

.rr-gm-title {
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rr-gm-sheet .btn {
  width: 100%;
}

.rr-gm-sound {
  justify-content: space-between;
  gap: var(--rr-space-3);
}

.rr-gm-sound .rr-gm-state {
  min-width: 3em;
  padding: 2px var(--rr-space-2);
  border-radius: 999px;
  background: var(--rr-ok);
  color: #0d1a10;
  font-size: 0.85rem;
}

.rr-gm-sound.off .rr-gm-state {
  background: var(--rr-panel-line);
  color: var(--rr-muted);
}

/* HUD icon buttons (pause / mute): icon-only, 44px targets. Put them in
   a stage HUD row (never the menu bar). `.off` = muted state. */
.hud-btn {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--rr-space-2);
  font-size: 0.85rem;
  border-radius: 10px;
  background: transparent;
  color: var(--rr-accent);
  border: 1px solid var(--rr-panel-line);
  touch-action: manipulation;
}

.hud-btn.off {
  color: var(--rr-muted);
  border-color: var(--rr-panel-line);
}

/* Buttons */
.btn {
  background: linear-gradient(170deg, var(--rr-accent), #b34d24);
  color: #14100c;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: none;
  border-radius: var(--rr-radius);
  padding: 0 var(--rr-space-5);
  cursor: pointer;
  transition: transform 90ms ease, box-shadow 120ms ease;
}

.btn:active {
  transform: translateY(2px);
}

.btn.secondary {
  background: var(--rr-panel);
  color: var(--rr-ink);
  border: 1px solid var(--rr-panel-line);
}

/* Panels */
.panel {
  background: var(--rr-panel);
  border: 1px solid var(--rr-panel-line);
  border-radius: var(--rr-radius);
  padding: var(--rr-space-4);
}

/* Pause overlay: audio settings panel (kit pause pattern).
   Wire it to AudioKit + GameStorage; see game-template README. */
#pause .audio-panel {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-2);
  text-align: left;
}

#pause .audio-panel .kv {
  font-size: 0.7rem;
}

#pause input[type="range"] {
  width: 100%;
  min-height: 44px; /* slider thumb stays a touch target */
  accent-color: var(--rr-accent);
  background: transparent;
}

/* Accessibility helper */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Portrait guard (RR_gameMenu, game-menu.js): a full-screen layer over the
   whole game and the menu sheet while the window is landscape and short (a
   phone held sideways). Opaque, no buttons; the only way on is to turn the
   phone. Respects the safe-area insets and prefers-reduced-motion. */
.rr-portrait {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rr-space-2);
  padding: calc(var(--rr-space-3) + var(--rr-inset-top)) calc(var(--rr-space-4) + var(--rr-inset-right))
    calc(var(--rr-space-3) + var(--rr-inset-bottom)) calc(var(--rr-space-4) + var(--rr-inset-left));
  background: var(--rr-bg);
  color: var(--rr-ink);
  font-family: var(--rr-font);
  text-align: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.rr-portrait[hidden] {
  display: none;
}

.rr-portrait-art {
  color: var(--rr-accent);
  flex: 0 1 auto;
  min-height: 0;
  height: min(40vh, 150px);
  height: min(40dvh, 150px);
  aspect-ratio: 4 / 3;
}

.rr-portrait-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Static pose (also the reduced-motion pose): the phone lies sideways. */
.rr-portrait-phone {
  transform-box: view-box;
  transform-origin: 72px 54px;
  transform: rotate(-90deg);
}

.rr-portrait-msg {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.rr-portrait-title {
  font-size: 0.9rem;
  color: var(--rr-muted);
  line-height: 1.25;
}

@media (prefers-reduced-motion: no-preference) {
  .rr-portrait-phone {
    animation: rr-portrait-turn 2.4s ease-in-out infinite;
  }
  .rr-portrait-arrow {
    animation: rr-portrait-nudge 2.4s ease-in-out infinite;
  }
}

@keyframes rr-portrait-turn {
  0%, 15% { transform: rotate(-90deg); }
  55%, 85% { transform: rotate(0deg); }
  100% { transform: rotate(-90deg); }
}

@keyframes rr-portrait-nudge {
  0%, 15% { opacity: 0; }
  35%, 70% { opacity: 1; }
  100% { opacity: 0; }
}