/* The /feedback/ page (plan C, FD-2). Site colours from /styles.css; no web font, so the page stays small for players arriving from the game. */
:root {
  color-scheme: light;
  --paper: #f8f7ef;
  --ink: #1c443b;
  --muted: #5d6c61;
  --yellow: #ffd266;
  --yellow-hover: #ffe08f;
  --orange: #d76b3d;
  --line: #dcded1;
  --green: #e7ecd9;
  font-family: Lato, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100svh; display: grid; place-items: start center; padding: clamp(16px, 6vw, 72px) 16px; background: var(--paper); }
main { width: min(100%, 680px); padding: clamp(22px, 5vw, 48px); background: #fff; border: 1px solid var(--line); border-radius: 20px; }
a { color: inherit; }
.brand { font-size: 1.25rem; font-weight: 900; text-decoration: none; }
.brand span { color: var(--orange); }
.eyebrow { margin: 28px 0 0; font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
h1 { margin: 8px 0 14px; font-size: clamp(2rem, 7vw, 2.9rem); font-weight: 900; line-height: 1.08; letter-spacing: -.02em; }
h2 { margin: 28px 0 8px; font-size: 1.1rem; font-weight: 900; }
p, li { line-height: 1.65; }
p { margin: 0 0 1em; }
.lead { font-size: 1.1rem; }
.build { margin: 24px 0 0; padding: 16px 18px; background: var(--green); border-radius: 14px; }
.build h2 { margin-top: 0; }
.stamp { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; overflow-wrap: anywhere; }
.facts { margin: 4px 0 0; color: var(--muted); }
.copy { margin-top: 12px; padding: 8px 16px; font: inherit; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid var(--ink); border-radius: 999px; cursor: pointer; }
.copy:hover { background: var(--paper); }
.status { min-height: 1.5em; margin: 6px 0 0; font-size: .9rem; color: var(--muted); }
.status:empty { min-height: 0; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 8px; }
.button { display: inline-block; padding: 14px 22px; font-weight: 800; text-decoration: none; color: var(--ink); background: var(--yellow); border: 2px solid var(--yellow); border-radius: 999px; }
.button:hover { background: var(--yellow-hover); border-color: var(--yellow-hover); }
.button.secondary { background: transparent; border-color: var(--ink); }
.button.secondary:hover { background: var(--paper); }
ol { margin: 0 0 1em; padding-left: 1.4em; }
.privacy { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.footnote { margin: 0; font-size: .9rem; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
@media (max-width: 420px) { .actions .button { width: 100%; text-align: center; } }