/* ============================================================
   KEEP CALM - the game maker (/games/create/) and the runtime that
   draws a member-made game.

   IT BORROWS THE COLORS RATHER THAN INVENTING THEM. Every --rc-*
   token below is defined by assets/refined-create.css, on :root and
   again on html[data-mode="batman"], with the contrast ratios in both
   themes measured and written down next to each value. This page
   loads that file (it needs it anyway for the .kcw__ wait panel and
   the .kcg__ game scaffold), so a second palette here would be a
   second thing to keep above 4.5:1 forever, and the site has already
   paid for one. Only the five board palettes are new, and they carry
   no text.

   Dark mode on this site is html[data-mode="batman"], NOT
   prefers-color-scheme and NOT data-theme. Anything hung off the
   other two silently does nothing here.

   Mobile first. Every interactive target is at least 44x44, inputs
   are 16px so iOS does not zoom on focus, and nothing is allowed to
   set a width that scrolls the page sideways at 390px.
   ============================================================ */

/* Zero-specificity reset, scoped to this root only. :where() so a
   component's own color always wins; refined-create.css documents the
   invisible-button bug that an ID-specificity reset caused there. */
:where(#game-create-root) *, :where(#game-create-root) { box-sizing: border-box; }
#game-create-root { font-family: "Montserrat", system-ui, sans-serif; color: var(--rc-ink); }
:where(#game-create-root) button, :where(#game-create-root) input,
:where(#game-create-root) select, :where(#game-create-root) textarea { font: inherit; }
:where(#game-create-root) button { color: inherit; }

.gcx-wrap { max-width: 1140px; margin: 0 auto; padding: 20px 16px 64px; }
.gcx-intro { max-width: 62ch; }
.gcx-h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.01em; }
.gcx-lede { color: var(--rc-muted); margin: 0 0 24px; line-height: 1.55; }
.gcx-loading { color: var(--rc-muted); }

.gcx-cols { display: grid; gap: 24px; }
@media (min-width: 900px) { .gcx-cols { grid-template-columns: 1fr 380px; align-items: start; } }

.gcx-card {
  background: var(--rc-panel); border: 1px solid var(--rc-rule);
  border-radius: 14px; padding: 18px;
}
.gcx-card + .gcx-card { margin-top: 16px; }
.gcx-legend { font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
.gcx-sub { color: var(--rc-muted); font-size: 0.9rem; margin: 0 0 14px; line-height: 1.5; }

/* ---------- the description field ---------- */
.gcx-field { display: block; margin: 0 0 6px; font-weight: 600; }
.gcx-text {
  width: 100%; min-height: 108px; resize: vertical;
  font-size: 16px;                       /* 16px or iOS zooms the page on focus */
  line-height: 1.5; padding: 12px;
  color: var(--rc-ink); background: var(--rc-panel);
  border: 1px solid var(--rc-control); border-radius: 10px;
}
.gcx-text::placeholder { color: var(--rc-placeholder); }
.gcx-text:focus-visible { outline: 3px solid var(--rc-accent); outline-offset: 2px; }
/* The optional "games you love" line. One row, not a box, so it reads as a
   smaller ask than the description above it. 44px tall and still 16px type. */
.gcx-text--one { min-height: 44px; height: 44px; resize: none; }
.gcx-field--sp { margin-top: 18px; }
.gcx-count { display: block; text-align: right; color: var(--rc-muted); font-size: 0.82rem; margin-top: 4px; }

/* ---------- the archetype picker ----------
   A radio group, not a select, because the point of the picker is that
   the member SEES the ten safe shapes and is steered into one. A select
   hides nine of them behind a tap. */
.gcx-kinds { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
@media (min-width: 560px) { .gcx-kinds { grid-template-columns: 1fr 1fr; } }
.gcx-kind { position: relative; display: block; }
.gcx-kind input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gcx-kind span {
  display: block; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--rc-control); border-radius: 10px;
  background: var(--rc-panel-deep); cursor: pointer; line-height: 1.35;
}
.gcx-kind b { display: block; font-size: 0.95rem; }
.gcx-kind em { display: block; font-style: normal; color: var(--rc-muted); font-size: 0.82rem; margin-top: 2px; }
.gcx-kind input:checked + span { border-color: var(--rc-accent); box-shadow: inset 0 0 0 2px var(--rc-accent); }
.gcx-kind input:focus-visible + span { outline: 3px solid var(--rc-accent); outline-offset: 2px; }

/* ---------- buttons ---------- */
.gcx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.gcx-btn {
  min-height: 44px; min-width: 44px; padding: 11px 20px;
  border-radius: 999px; border: 1px solid var(--rc-control);
  background: var(--rc-panel); color: var(--rc-ink);
  font-weight: 600; cursor: pointer;
}
.gcx-btn--primary { background: var(--rc-accent); color: var(--rc-on-accent); border-color: var(--rc-accent); }
.gcx-btn:focus-visible { outline: 3px solid var(--rc-accent); outline-offset: 2px; }

/* The helper line under the field. Same idea as .rc-helper in the poster
   flow: a refusal is a sentence where the member is looking, never a
   modal and never a browser alert. */
.gcx-helper { margin: 12px 0 0; line-height: 1.55; color: var(--rc-muted); }
.gcx-helper--error { color: var(--rc-error); }
.gcx-helper a { color: inherit; }

/* ---------- the stall panel ----------
   .kcw__* comes from refined-create.css; only the frame is ours. */
.gcx-wait { border: 1px solid var(--rc-rule); border-radius: 14px; padding: 16px; background: var(--rc-panel); }
.gcx-wait__label { margin: 0 0 10px; font-weight: 700; }
.gcx-wait__track { height: 8px; border-radius: 999px; background: var(--rc-panel-deep); overflow: hidden; }
.gcx-wait__fill { display: block; height: 100%; width: 2%; background: var(--rc-accent); transition: width 0.2s linear; }
.gcx-wait__hint { margin: 10px 0 14px; color: var(--rc-muted); font-size: 0.9rem; line-height: 1.5; }
.gcx-wait__play { min-height: 340px; }
@media (prefers-reduced-motion: reduce) { .gcx-wait__fill { transition: none; } }

/* ---------- the finished game ---------- */
.gcx-made { display: grid; gap: 16px; }
.gcx-stagewrap {
  border: 1px solid var(--rc-rule); border-radius: 14px; background: var(--rc-panel);
  padding: 12px; min-height: 380px;
}
.gcx-where { color: var(--rc-muted); line-height: 1.6; margin: 0; }
.gcx-where strong { color: var(--rc-ink); }
.gcx-badge {
  display: inline-block; padding: 3px 10px; border-radius: 7px;   /* 7px: tags are rectangles, pills are buttons */
  background: var(--rc-panel-deep); border: 1px solid var(--rc-rule);
  font-size: 0.8rem; color: var(--rc-ink);
}
/* The "we could not place what you mentioned" note. Quiet, not an error: the
   member did nothing wrong and their game was still made.

   THE LEFT BAR IS NOT DECORATION. Measured in both themes, the --rc-rule
   hairline reads 1.4:1 against the page, which is fine for a card whose job is
   only to group things and not fine as the only thing marking off a block that
   carries something the member needs to read. The accent bar is a token with
   real contrast in both themes, so the region is unmistakable without relying
   on the hairline to do work it cannot do. */
.gcx-note {
  margin: 0; padding: 10px 12px 10px 14px; border-radius: 10px;
  background: var(--rc-panel-deep);
  border: 1px solid var(--rc-rule);
  border-left: 4px solid var(--rc-accent);
  color: var(--rc-ink); font-size: 0.9rem; line-height: 1.5;
}

/* ---------- the board palettes ----------
   Chips and tiles only. NOTHING here ever carries text, so these need to
   read as distinct shapes against the panel rather than to pass a text
   ratio; each one also gets a --rc-control border below, so a boundary
   exists whatever the hue does in either theme. */
.gcm[data-pal="moss"]  { --g1:#2f6b4f; --g2:#4e8f5e; --g3:#7aa851; --g4:#a3bd6a; --g5:#c9c886; }
.gcm[data-pal="sea"]   { --g1:#1f5f7a; --g2:#2e7f96; --g3:#3f9fae; --g4:#6cbcc2; --g5:#9ccfd0; }
.gcm[data-pal="dusk"]  { --g1:#4a3f7a; --g2:#6a4f92; --g3:#8a5f9e; --g4:#a87fb5; --g5:#c09dc9; }
.gcm[data-pal="ember"] { --g1:#8a3b1e; --g2:#a85a24; --g3:#c07a2c; --g4:#d29a52; --g5:#dcb47c; }
.gcm[data-pal="slate"] { --g1:#3a4750; --g2:#4f5f6a; --g3:#667883; --g4:#85949d; --g5:#a3b0b7; }
html[data-mode="batman"] .gcm[data-pal="moss"]  { --g1:#7fc79f; --g2:#9ed48a; --g3:#b9dd85; --g4:#d3e3a0; --g5:#e8e6b6; }
html[data-mode="batman"] .gcm[data-pal="sea"]   { --g1:#7ec8dd; --g2:#93d6e2; --g3:#a9e0e4; --g4:#c2ebe9; --g5:#d9f1ef; }
html[data-mode="batman"] .gcm[data-pal="dusk"]  { --g1:#b4a4e8; --g2:#c3aee9; --g3:#d1b9ec; --g4:#dfc9f0; --g5:#ebdbf4; }
html[data-mode="batman"] .gcm[data-pal="ember"] { --g1:#f0a878; --g2:#f4b98c; --g3:#f7c9a3; --g4:#fad8bb; --g5:#fce5d1; }
html[data-mode="batman"] .gcm[data-pal="slate"] { --g1:#9fb0ba; --g2:#b0bec7; --g3:#c1ccd3; --g4:#d2dae0; --g5:#e1e8ec; }

/* ---------- the runtime's own furniture ----------
   Every tappable thing here is >= 44x44 at 390px. The grids use
   minmax(44px, 1fr) rather than a fixed column count so a 4x4 board
   shrinks its gutters instead of overflowing the screen. */
.gcm { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.gcm__grid { display: grid; gap: 8px; width: 100%; }
.gcm__cell {
  min-height: 44px; min-width: 0; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.1rem, 7vw, 1.9rem); line-height: 1;
  border: 1px solid var(--rc-control); border-radius: 10px;
  background: var(--rc-panel-deep); color: var(--rc-ink); cursor: pointer;
  padding: 0;
}
.gcm__cell:focus-visible { outline: 3px solid var(--rc-accent); outline-offset: 2px; }
.gcm__cell[aria-pressed="true"], .gcm__cell[data-on="1"] { background: var(--g2); border-color: var(--rc-ink); }
.gcm__cell[data-done="1"] { background: var(--g4); border-color: var(--rc-ink); cursor: default; }
.gcm__cell[data-blank="1"] { background: transparent; border-style: dashed; cursor: default; }
.gcm__cell[disabled] { cursor: default; opacity: 0.85; }

.gcm__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gcm__chip {
  min-height: 44px; min-width: 44px; padding: 8px 14px;
  border: 1px solid var(--rc-control); border-radius: 10px;
  background: var(--rc-panel-deep); color: var(--rc-ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 0.85rem; line-height: 1.2;
}
.gcm__chip:focus-visible { outline: 3px solid var(--rc-accent); outline-offset: 2px; }
.gcm__swatch { display: block; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--rc-control); }
.gcm__prompt { text-align: center; font-size: clamp(1.4rem, 12vw, 3rem); line-height: 1.1; min-height: 48px; }
.gcm__pad {
  flex: 1 1 44px; min-height: 88px; min-width: 44px;
  border: 1px solid var(--rc-control); border-radius: 12px;
  background: var(--rc-panel-deep); cursor: pointer;
}
.gcm__pad:focus-visible { outline: 3px solid var(--rc-accent); outline-offset: 2px; }
.gcm__pad[data-lit="1"] { background: var(--g2); }
.gcm__big {
  width: 100%; min-height: 160px; border-radius: 14px;
  border: 1px solid var(--rc-control); background: var(--rc-panel-deep);
  color: var(--rc-ink); font-weight: 700; font-size: 1.05rem; cursor: pointer;
}
.gcm__big:focus-visible { outline: 3px solid var(--rc-accent); outline-offset: 2px; }
.gcm__big[data-go="1"] { background: var(--g1); color: var(--rc-panel); }
.gcm__canvas { width: 100%; height: auto; max-width: 100%; border-radius: 12px; background: var(--rc-panel-deep); display: block; }
.gcm__canvas:focus-visible { outline: 3px solid var(--rc-accent); outline-offset: 2px; }

/* The breathing circle. Driven by a JS-set scale rather than a keyframe so
   the phase always matches the words being announced, and it holds still
   for anyone who asked for reduced motion. */
.gcm__breath { display: grid; place-items: center; min-height: 200px; }
.gcm__orb {
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--g2); border: 2px solid var(--rc-control);
  transform: scale(0.6); transition: transform 0.9s ease-in-out;
}
@media (prefers-reduced-motion: reduce) { .gcm__orb { transition: none; } }
.gcm__phase { text-align: center; font-size: 1.15rem; font-weight: 700; margin-top: 12px; }

/* The kind picker, now a select above the brief rather than a grid of radio
   cards below it. Sized like the text fields it sits with so the form reads as
   one column of controls. 16px on the font is not a taste call: anything
   smaller makes iOS Safari zoom the page on focus and the member loses their
   place in the form. */
.gcx-select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 40px 10px 12px;
  margin: 0 0 4px;
  border: 1px solid var(--rc-control, #c9d3cc);
  border-radius: 10px;
  /* BOTH the ink and the surface are set per theme, and that is the whole fix.
     Neither --rc-ink nor --rc-surface flips with dark mode, so the first attempt
     painted dark text on a dark field (unreadable), and inheriting only the text
     colour produced the mirror image, light text on a white field at 1.12:1.
     Measured both times rather than assumed, which is the only reason the second
     bug was caught before it shipped. */
  background-color: #fffdf9;
  color: #1a1a1a;
  font: 500 16px/1.4 "Montserrat", system-ui, sans-serif;
  /* The caret is drawn rather than left to the platform, because the platform
     one is invisible against the dark surface in batman mode. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c6b64' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  -webkit-appearance: none;
  appearance: none;
}
.gcx-select:focus-visible {
  outline: 3px solid var(--kc-focus, #2c5f4e);
  outline-offset: 2px;
}
html[data-mode="batman"] .gcx-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238fd0b4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* "Write one for me" is deliberately quieter than "Make my game": it is a way
   in, not the thing you came to do. */
.gcx-btn--ghost {
  margin-top: 8px;
  background: transparent;
  font-weight: 600;
}

/* The options themselves are painted by the OS, which does not inherit the page
   theme, so they are set explicitly or a dark-mode menu drops to black on black
   in some browsers. */
.gcx-select option { background: #14181a; color: #e8ede9; }
@media (prefers-color-scheme: light) { .gcx-select option { background: #fffdf9; color: #1a1a1a; } }

html[data-mode="batman"] .gcx-select { background-color: #14181a; color: #e8ede9; border-color: #31413a; }

/* Two-up rows, the song flow's shape. Stacks on a phone, where side by side
   would make both controls too narrow to read. */
.gcx-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; align-items: start; }
.gcx-row .gcx-col { min-width: 0; }
.gcx-row .gcx-field { margin-top: 0; }
@media (max-width: 700px) { .gcx-row { grid-template-columns: 1fr; gap: 4px; } }