/* 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;

  /* menu bar height: 44px touch target + borders */
  --rr-menu-height: 48px;
}

* {
  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;
}

/* 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 bottom. */
.game-scroll.has-menu {
  padding-bottom: calc(var(--rr-menu-height) + env(safe-area-inset-bottom, 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));
}

/* Menu bar: bottom nav pinned to the shell bottom. */
.menu-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--rr-space-2);
  min-height: var(--rr-menu-height);
  padding: 0 var(--rr-space-3) var(--rr-safe-min-bottom);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--rr-safe-min-bottom));
  background: var(--rr-panel);
  border-top: 1px solid var(--rr-panel-line);
}

.menu-bar a[href] {
  color: var(--rr-accent);
  font-weight: 600;
  white-space: nowrap;
}

.menu-bar .menu-title {
  flex: 1;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-bar .menu-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--rr-space-1);
}

/* 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);
}

/* 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;
}