/* StakeMarker Composer page chrome and the read-only scenario laboratory. */

:root {
  /* main.css's own --text-xs/sm/base/md/lg/xl tokens all add this one step
     (the same mechanism the app's own small/medium/large font-size SETTING
     uses — see main.css's :root[data-font-size="..."] rules, medium=0px,
     large=+8px) — bumping it here scales every size token on THIS page a
     little, without touching the main app's own :root (each page is its
     own document with its own :root, so this can't leak elsewhere). Real
     user feedback: text throughout the Composer read too small. */
  --font-size-step: 2px;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  /* main.css (loaded above) sets html/body to `height:100%; overflow:hidden`
     for the MAIN app's own architecture, where internal elements own their
     own scroll regions and the outer document never scrolls. This page has
     no such internal scroll container (#cpMain/.cp-main just flows in normal
     document layout, same as tournament.html/tournament.css's own html/body
     rule) — inheriting that overflow:hidden left the whole page unable to
     scroll on mobile once content (the library list, the node/wire canvas,
     the Inputs editor) exceeds one screen. Restore normal document scroll. */
  overflow: visible;
  height: auto;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.cp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  padding-top: max(14px, env(safe-area-inset-top, 0px));
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-header, 3);
}
.cp-header-left {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 10px;
}
.cp-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.cp-header-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  gap: 10px;
}

.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--panel-alt);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.cp-btn-ghost { background: transparent; }
.cp-btn-primary { background: var(--accent); border-color: var(--accent); color: #06201d; font-weight: 600; }
.cp-btn.cp-theme-toggle { padding: 8px; line-height: 0; min-width: 44px; min-height: 44px; }
.cp-theme-toggle .icon-theme-moon { display: none; }
:root[data-theme="light"] .cp-theme-toggle .icon-theme-sun { display: none; }
:root[data-theme="light"] .cp-theme-toggle .icon-theme-moon { display: block; }

/* ── Side menu ──────────────────────────────────────────────────────── */
.cp-menu-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  z-index: var(--z-dialog, 10050);
  opacity: 0; transition: opacity 0.22s ease; pointer-events: none;
}
.cp-menu-backdrop.is-open { opacity: 1; pointer-events: all; }
.cp-menu {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(88vw, 420px);
  background: var(--panel); border-right: 1px solid var(--line);
  z-index: calc(var(--z-dialog, 10050) + 1);
  transform: translateX(-104%); transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex; flex-direction: column;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}
.cp-menu.is-open { transform: translateX(0); }
.cp-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: max(14px, calc(env(safe-area-inset-top, 0px) + 8px)) 14px 10px;
  border-bottom: 1px solid var(--line);
}
.cp-menu-header h2 { margin: 0; font-size: 18px; font-weight: 600; }
.cp-menu-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
}
.cp-menu-section {
  flex-shrink: 0;
  padding: 0 0 14px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
}
.cp-menu-section:last-child { border-bottom: none; }
.cp-menu-section-title {
  margin: 0 0 12px;
  font-size: calc(var(--text-xs) + var(--font-size-step));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  padding: 12px 14px 10px;
  background: rgba(0,0,0,0.05);
  border-bottom: 1px solid var(--line);
}
.cp-menu-section:first-child .cp-menu-section-title { padding-top: 14px; }
.cp-menu-account-email {
  margin: 0 14px 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* The app's hamburger menu uses the standard .btn chrome for every action.
   Keep the standalone page's regular Composer controls independent, while
   making this navigation surface use the same 44px touch target, padding,
   border weight, and typography as the main app. */
.cp-header .cp-menu-toggle,
.cp-menu .cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-md) var(--space-lg);
  border: 2px solid var(--btn-line);
  border-radius: var(--radius-lg);
  background: var(--btn-bg);
  color: var(--ink-strong);
  min-height: 44px;
  font-size: 15px;
  line-height: normal;
  touch-action: manipulation;
  transition: transform 0.1s ease, opacity 0.1s ease;
}
.cp-menu .cp-btn { width: 100%; text-align: left; text-decoration: none; justify-content: flex-start; }
.cp-menu .cp-btn[hidden] { display: none; }
.cp-menu-header .cp-btn {
  width: auto;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  justify-content: center;
  flex-shrink: 0;
}
:root[data-theme="light"] .cp-header .cp-menu-toggle,
:root[data-theme="light"] .cp-menu .cp-btn {
  background: #fff;
  border-color: #c5d1de;
  color: #1e293b;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
:root[data-theme="light"] .cp-header .cp-menu-toggle:hover,
:root[data-theme="light"] .cp-menu .cp-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
.cp-btn.cp-menu-toggle {
  min-width: 0;
}
.cp-menu-link { margin-bottom: 6px; }
.cp-menu-link:last-child { margin-bottom: 0; }

/* Match the main app's compact header treatment in phone landscape. */
@media (max-height: 520px) {
  .cp-header .cp-menu-toggle {
    min-height: 30px;
    padding: 4px 9px;
  }
}

/* ── Main / cards ───────────────────────────────────────────────────── */
.cp-main {
  width: 100%;
  max-width: 1240px;
  min-width: 0;
  margin: 0 auto;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.cp-card {
  background: var(--card-bg, var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 20px;
  text-align: center;
  max-width: 480px;
  margin: 40px auto;
}
.cp-card h2 { margin: 0 0 8px; }
.cp-muted { color: var(--muted); }
.cp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-xs); }
.cp-spinner {
  width: 28px; height: 28px; margin: 0 auto 12px;
  border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: cp-spin 0.8s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }

.cp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-bottom: 16px;
}
.cp-section-title {
  min-width: 0;
  margin: 0;
  font-size: 20px;
  overflow-wrap: anywhere;
}

.cp-library-body { display: flex; flex-direction: column; gap: 12px; }
/* [uge-builder 2026-07-25, Phase 1 scope note] "Activate for this round"
   only makes sense from inside a live round (docs/index.js's RoundState) —
   there is no round context on this standalone page. Hiding it here rather
   than reusing library-modal.js's renderList unconditionally, since that
   same row-rendering function is also shared by the in-app modal (where
   there IS always an active round). A real "open this game in the app"
   deep-link is a tracked follow-up, not shipped here. */
.cp-library-body .custom-game-library-row-activate { display: none; }

/* Create/Edit detail view — CustomGameCreateModal.mountCreateBody()'s
   content (docs/js/games/custom/create-modal.js), mounted here as page
   content instead of a modal panel. Its own classes (.custom-game-*,
   .final-round-report-section) already carry all the real layout/spacing.
   [2026-07-25] Was capped at 640px (a prose-reading width) — real user
   feedback that the detail view (in particular the value-trace view's node/
   wire canvas and multi-column seed editor, both genuinely wide content)
   was cramped into a narrow column on desktop with huge empty margins on
   either side. This max-width only ever GATES GROWTH on wide viewports —
   raising it changes nothing on mobile/tablet, which are already narrower
   than either number. */
.cp-detail-body,
.cp-play-body {
  max-width: 1200px;
  min-width: 0;
  width: 100%;
}
/* Same reason as .cp-library-body's activate-row hide above — no live round
   on this standalone page, only "Save to my library" is meaningful here. */
.cp-detail-body .custom-game-create-activate { display: none; }
/* Modal instances reserve space for their sticky dialog header. This page's
   toolbar is outside the detail body, so its save state can use the viewport
   edge directly. */
.cp-detail-body .custom-game-create-actions { top: 0; }

/* Error and progress messages sit before the mounted authoring form. Keep a
   long backend message readable on a phone instead of letting it widen the
   page or appear as an unexplained clipped line. */
.cp-detail-body .custom-game-create-status {
  min-width: 0;
  margin: 0 0 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.cp-detail-body .custom-game-create-status:empty { display: none; }
.cp-detail-body .custom-game-create-status.is-error {
  color: var(--danger, #e05252);
}
.cp-detail-body .custom-game-create-status.is-success {
  color: var(--accent);
}

/* ── Rules inspector and scenario lab ───────────────────────────────── */
.cp-play-picker { text-align: left; }
.cp-play-picker-title { margin: 0 0 4px; font-size: 16px; }
.cp-play-group { margin-top: 14px; }
.cp-play-group-title {
  margin: 0 0 8px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.cp-play-list,
.cp-play-actions,
.cp-play-lab-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cp-play-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--panel-alt, var(--panel));
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: var(--text-sm);
  cursor: pointer;
  min-height: 40px;
}
.cp-play-chip-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.cp-play-chip:hover,
.cp-play-chip:focus-visible { border-color: var(--accent); }
.cp-play-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}
.cp-play-heading { min-width: 0; }
.cp-play-heading p { margin: 4px 0 0; font-size: var(--text-sm); }
.cp-play-rulebook {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-alt, var(--panel));
}
.cp-play-rulebook > h3 { margin: 0; }
.cp-play-rulebook > p { margin: 6px 0 0; }
.cp-play-experience-note {
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--ink);
}
.cp-play-rulebook-group {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cp-play-rulebook-group > h4 { margin: 0 0 10px; }
.cp-play-rulebook-section + .cp-play-rulebook-section { margin-top: 12px; }
.cp-play-rulebook-section h5 {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cp-play-rulebook-items { display: grid; gap: 5px; }
.cp-play-rulebook-item {
  margin: 0;
  line-height: 1.45;
}
.cp-play-result-group {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 8px;
}
.cp-play-result-group h4 { margin: 0 0 6px; }
.cp-play-result-list { margin: 0; padding-left: 20px; }
.cp-play-sample {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-alt, var(--panel));
}
.cp-play-sample > h3 { margin: 0; }
.cp-play-sample > p { margin: 6px 0 0; }
.cp-play-sample-surface {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line-soft, var(--line));
  border-radius: 10px;
  background: var(--panel, transparent);
}
.cp-play-sample-surface > h4 { margin: 0 0 8px; }
.cp-play-sample-surface .custom-game-v2-results-title { display: none; }
.cp-play-technical {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.cp-play-technical > summary {
  min-height: 44px;
  padding: 10px 0;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 24px;
}
.cp-play-technical[open] > summary { color: var(--ink); }
.cp-play-lab {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.cp-play-lab-controls { align-items: center; margin-bottom: 10px; }
.cp-play-lab-controls select { width: auto; min-width: 180px; }
.cp-play-lab-editor { min-height: 280px; }
.cp-play-lab-output { margin-top: 12px; }

@media (max-width: 600px) {
  .cp-main { padding: 12px; }
  .cp-play-lab-controls > * { width: 100%; }
}

@media (max-width: 480px) {
  .cp-header {
    gap: 8px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .cp-header-left { gap: 8px; }
  .cp-header h1 { font-size: 17px; }
  .cp-header-right { gap: 6px; }
  .cp-header-right > .cp-btn:not(.cp-theme-toggle) {
    min-height: 44px;
    padding-right: 10px;
    padding-left: 10px;
    white-space: nowrap;
  }

  /* A detail title is a page heading, not a second inline toolbar control.
     Give it the full phone width so titles such as "Describe a Game with AI"
     wrap naturally below Back instead of being clipped at the right edge. */
  .cp-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .cp-toolbar .cp-section-title {
    width: 100%;
    font-size: clamp(18px, 6vw, 22px);
    line-height: 1.2;
  }

  .cp-card {
    max-width: none;
    margin: 24px 0;
    padding: 20px 16px;
  }
}