:root { --ink: #1c1b19; --muted: #8b877f; --faint: #c9c5bd; --paper: #fff; --fire: #b8431e; --spirit: #5b3fa6; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--paper); color: var(--ink); }
body {
  font: 13px/1.45 ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); height: 100dvh; overflow: hidden;
}
canvas { display: block; image-rendering: pixelated; touch-action: manipulation; cursor: pointer; outline: none; }
button, textarea { font: inherit; }

#top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}
.brand b { font-size: 16px; font-weight: 600; letter-spacing: .02em; margin-right: 10px; }
.brand span { color: var(--muted); }
.tools { display: flex; gap: 16px; align-items: baseline; color: var(--muted); white-space: nowrap; }
@media (max-width: 600px) {
  .brand span { display: none; }
  .tools { gap: 12px; }
  #score, #account span { display: none; }
}
.link { color: var(--muted); background: none; border: 0; padding: 6px 0; cursor: pointer; }
.link:hover, .link:focus-visible { color: var(--ink); }

#stage { position: relative; overflow: hidden; min-height: 0; }
#account span { color: var(--ink); }
/* Turnstile shows itself only when it needs the player; it sits over the bottom right corner */
#turnstile { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 20; }

#panel {
  padding: 14px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  border-top: 1px solid var(--ink); max-height: 55dvh; overflow-y: auto; overscroll-behavior: contain;
}
#panel:empty { display: none; }
@media (min-width: 960px) {
  body { grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: auto minmax(0, 1fr); }
  #top { grid-column: 1 / -1; }
  #panel { grid-row: 2; grid-column: 2; max-height: none; border-top: 0; border-left: 1px solid var(--ink); padding: 18px 20px; }
}

.status { color: var(--muted); margin: 0 0 12px; }
.say { margin: 0 0 14px; }
.say .who { display: block; color: var(--fire); font-weight: 600; margin-bottom: 2px; }
.say q { quotes: none; font-style: italic; }
.mantra { color: var(--spirit); font-style: italic; min-height: 3.2em; }
.mantra p { margin: 0 0 2px; animation: rise .8s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .mantra p { animation: none; } }

.choice { border: 0; margin: 0 0 12px; padding: 0; }
.mode-switch { display: flex; border-bottom: 1px solid var(--faint); margin: 0 0 18px; gap: 16px; }
.mode-switch button { color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 0; cursor: pointer; text-align: left; }
.mode-switch button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--fire); }
.mode-switch button:disabled { cursor: wait; }
.mode-switch button:focus-visible, .reveal summary:focus-visible { outline: 2px solid var(--fire); outline-offset: 2px; }
.compose-field { margin-bottom: 18px; }
.compose-field label { display: block; margin-bottom: 6px; }
.compose-field textarea { display: block; width: 100%; resize: vertical; min-height: 68px; max-height: 160px; border: 1px solid var(--ink); border-radius: 0; padding: 9px 10px; background: var(--paper); color: var(--ink); }
.compose-field textarea:focus-visible { outline: 2px solid var(--fire); outline-offset: 1px; }
.field-note { display: flex; gap: 12px; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: 6px; }
#target-count { white-space: nowrap; }
.compose-field .small { margin: 8px 0 0; }
.reveal { margin-top: 16px; border-top: 1px solid var(--faint); padding-top: 10px; }
.reveal summary { cursor: pointer; }
.target-answer { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: var(--spirit); padding: 10px; border: 1px solid var(--faint); background: #fbfaf7; }
.steps li, .speech p { overflow-wrap: anywhere; }
.choice legend { color: var(--muted); padding: 0; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--faint); background: var(--paper); color: var(--ink); padding: 7px 10px; cursor: pointer; }
.chip:hover, .chip:focus-visible { border-color: var(--ink); outline: none; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 12px; }
.primary { display: inline-block; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 9px 14px; cursor: pointer; text-decoration: none; }
.primary:hover, .primary:focus-visible { background: var(--paper); color: var(--ink); outline: none; }
.primary:disabled { opacity: .45; cursor: default; background: var(--ink); color: var(--paper); }

.riddle h2 { font: inherit; font-weight: 600; font-size: 15px; margin: 0 0 2px; }
.riddle .meta { color: var(--muted); margin: 0 0 10px; }
/* the riddle is Mbah Terra speaking: a warm left rule, his words as prose, the data set apart */
.speech { border-left: 2px solid var(--fire); padding: 2px 0 2px 12px; }
.speech .who { display: block; color: var(--fire); font-weight: 600; margin-bottom: 4px; }
.speech p { margin: 0 0 8px; }
.speech .story { font-style: italic; margin-bottom: 12px; }
.speech pre.data {
  white-space: pre-wrap; word-break: break-word; font: inherit; margin: 2px 0 10px; padding: 8px 10px;
  border: 1px solid var(--faint); background: #fbfaf7;
}
.answer { display: flex; gap: 8px; margin-top: 12px; }
.answer input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 10px; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink);
}
.answer input:focus-visible { outline: 2px solid var(--fire); outline-offset: 1px; }
.feedback { min-height: 1.45em; margin: 8px 0 0; }
.feedback.wrong { color: var(--fire); }
.feedback.right { color: #2f6b3a; font-weight: 600; }
.hints { margin: 10px 0 0; padding-left: 18px; color: var(--spirit); }
.steps { margin: 10px 0 0; padding-left: 22px; }
.steps li { margin-bottom: 2px; }
.small { color: var(--muted); font-size: 12px; }

#rules { width: min(380px, calc(100vw - 32px)); padding: 16px; border: 1px solid var(--ink); color: var(--ink); background: var(--paper); font: inherit; }
#rules::backdrop { background: rgba(255, 255, 255, .72); }
#rules h2 { margin: 0 0 10px; font: inherit; font-weight: 600; }
#rules ol { margin: 0 0 8px; padding-left: 18px; }
#rules li { margin-bottom: 8px; }
#rules form { text-align: right; }