/* Roll-N-Shoot — page and in-game UI.
   Palette and component rules follow /.agent/design.md. The 3D canvas is the
   only place extra colour is allowed. */

:root {
  --bg: #fafbfc;
  --surface: #ffffff;
  --border: #e0e0e0;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-deeper: #1e40af;
  --accent: #f97316;
  --accent-dark: #ea6c0a;
  --accent-deeper: #dc5f00;
  --text: #111827;
  --muted: #6b7280;
  --success: #16a34a;
  --error: #dc2626;
  --warning: #d97706;
}

.rns-hidden,
[hidden] { display: none !important; }

/* ── Home & lobby ──────────────────────────────────────────────────────────*/

.rns-intro { color: var(--muted); max-width: 62ch; }

.rns-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.rns-card h2 { font-size: 1.25rem; margin: 0 0 8px; }
.rns-card p { margin: 0 0 12px; color: var(--muted); }

.rns-field { display: block; margin-bottom: 12px; font-weight: 600; }
.rns-field input[type="text"] {
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 1rem;
  font-weight: 400;
  min-height: 44px;
}

.rns-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 600;
}
.rns-check input { width: 22px; height: 22px; }
.rns-check .rns-note { font-weight: 400; color: var(--muted); }

.rns-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rns-row > .rns-grow { flex: 1 1 160px; }

.rns-btn {
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}
.rns-btn:hover { background: var(--primary-dark); }
.rns-btn:active { background: var(--primary-deeper); }
.rns-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rns-btn--accent { background: var(--accent); }
.rns-btn--accent:hover { background: var(--accent-dark); }
.rns-btn--accent:active { background: var(--accent-deeper); }
.rns-btn--ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.rns-btn--ghost:hover { background: #f3f4f6; }
.rns-btn--ghost:active { background: #e5e7eb; }
.rns-btn--wide { width: 100%; }

.rns-btn:focus-visible,
.rns-chip:focus-visible,
input:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.rns-error {
  color: var(--error);
  font-weight: 600;
  margin-top: 8px;
}

.rns-code {
  font-size: 2.6rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--primary);
  margin: 8px 0;
}

.rns-steps { color: var(--muted); padding-left: 20px; }
.rns-steps li { margin-bottom: 6px; }

/* ── Game stage ────────────────────────────────────────────────────────────*/

.rns-stage {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.rns-hud {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.rns-hud .rns-tag {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: var(--primary-deeper);
}
.rns-hud .rns-tag--role { background: #fff7ed; color: var(--accent-deeper); }
.rns-hud .rns-score { margin-left: auto; font-size: 0.875rem; color: var(--muted); }
.rns-hud .rns-net {
  font-size: 0.75rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
}
.rns-hud .rns-net[data-tone="warn"] { color: var(--warning); border-color: var(--warning); }

.rns-canvas-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;   /* drawing and aiming need raw pointer events */
}

.rns-panels {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 12px;
  max-height: 46vh;
  overflow-y: auto;
}
.rns-panel { max-width: 760px; margin: 0 auto; }
.rns-panel h2 { font-size: 1.125rem; margin: 0 0 4px; }
.rns-hint { color: var(--muted); font-size: 0.9375rem; margin: 6px 0 8px; }

/* Chips: shape, size and weapon pickers */
.rns-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin-bottom: 8px; }
.rns-chips--compact { grid-template-columns: repeat(3, 1fr); }
.rns-chip {
  font: inherit;
  text-align: left;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.rns-chip:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.rns-chip[aria-pressed="true"] {
  border-color: var(--primary);
  background: #eff6ff;
}
.rns-chip .chip-name { display: block; font-weight: 700; }
/* On a phone the per-chip description costs more height than it is worth —
   the note line under the row carries it instead. */
.rns-chip .chip-note { display: none; font-size: 0.78rem; line-height: 1.35; color: var(--muted); margin-top: 2px; }
.rns-chips--quad { grid-template-columns: repeat(4, 1fr); }
.rns-chips--quad .rns-chip { text-align: center; font-weight: 600; padding: 10px 4px; }
.rns-note-line { margin: 0 0 8px; min-height: 1.2em; }
.rns-chip.chip-compact { text-align: center; font-weight: 600; }

/* Chalk meter */
.rns-meter {
  height: 12px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
  border: 1px solid var(--border);
}
.rns-meter > span { display: block; height: 100%; background: var(--primary); width: 0; transition: width 0.08s linear; }
.rns-meter-label { font-size: 0.875rem; color: var(--muted); margin: 0; }
.rns-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.rns-panel-head h2 { margin: 0; }

/* Power lever */
.rns-lever-wrap { display: flex; gap: 16px; align-items: stretch; }
.rns-lever {
  position: relative;
  width: 56px;
  min-height: 170px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f3f4f6;
  overflow: hidden;
  flex: none;
}
.rns-lever-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background: var(--accent);
}
.rns-lever-window {
  position: absolute;
  left: 0; right: 0;
  background: rgba(22, 163, 74, 0.26);
  border-top: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
}
.rns-lever-side { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.rns-lever-value { font-size: 1.5rem; font-weight: 700; }
.rns-lever-value[data-state="good"] { color: var(--success); }
.rns-lever-value[data-state="bad"] { color: var(--muted); }

/* Aim controls */
.rns-aim-row { display: flex; gap: 8px; align-items: center; }
.rns-aim-row .rns-btn--fire { flex: 1; font-size: 1.125rem; min-height: 56px; }
.rns-aim-row .rns-btn--nudge { width: 64px; min-height: 56px; font-size: 1.25rem; }
.rns-cooldown { height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden; margin: 8px 0; }
.rns-cooldown > span { display: block; height: 100%; width: 0; background: var(--success); }
.rns-status { font-weight: 600; }

/* Handover */
.rns-handover { text-align: center; padding: 8px 0 4px; }
.rns-handover h2 { font-size: 1.375rem; }

/* Result overlay */
.rns-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.55);
  padding: 16px;
}
.rns-overlay-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.rns-overlay-card h2 { margin: 0 0 8px; font-size: 1.5rem; }
.rns-overlay-card h2[data-tone="win"] { color: var(--success); }
.rns-overlay-card h2[data-tone="lose"] { color: var(--error); }
.rns-overlay-card p { color: var(--muted); margin: 0 0 12px; }
.rns-overlay-score { font-weight: 700; color: var(--text); font-size: 1.125rem; margin-bottom: 16px; }

/* Toast */
.rns-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 10001;
  background: var(--text);
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 600;
  max-width: 90vw;
}
.rns-toast[data-tone="success"] { background: var(--success); }
.rns-toast[data-tone="error"] { background: var(--error); }

/* Short phones in landscape, and small older handsets: give the controls more
   of the window, since a cramped panel hides the primary action. */
@media (orientation: portrait) and (max-height: 700px) {
  .rns-panels { max-height: 62vh; }
}

/* The page behind the stage must not scroll while a match is on. */
body.rns-playing { overflow: hidden; }

/* Side-by-side whenever the window is wider than it is tall — desktops, but
   also a phone held in landscape, where a stacked panel would leave barely a
   hundred pixels of table. */
@media (min-width: 900px), (min-width: 620px) and (min-aspect-ratio: 13/10) {
  /* Grid rather than a wrapped flex row: the second row then takes exactly
     the height left over, instead of growing to fit the panel's content. */
  .rns-stage { display: grid; grid-template-columns: 1fr 380px; grid-template-rows: auto 1fr; }
  .rns-hud { grid-column: 1 / -1; }
  .rns-canvas-wrap { grid-column: 1; grid-row: 2; min-height: 0; }
  .rns-panels {
    grid-column: 2;
    grid-row: 2;
    max-width: 44vw;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    border-top: 0;
    border-left: 1px solid var(--border);
    padding: 20px;
  }
  .rns-chips { grid-template-columns: 1fr 1fr; }
  .rns-chips--quad { grid-template-columns: 1fr 1fr; }
  .rns-chips--quad .rns-chip { text-align: left; padding: 8px 10px; }
  .rns-chips--compact { grid-template-columns: repeat(3, 1fr); }
  .rns-chip .chip-note { display: block; }
  .rns-note-line { display: none; }
  .rns-toast { left: auto; right: 24px; transform: none; }
}