/* The canvas is 640 x 360 logical px, integer scaled and letterboxed. Nothing here is gameplay. */
:root { color-scheme: dark; }

html, body {
  margin: 0;
  height: 100%;
  background: #120E0B;
  color: #C4B49A;
  font: 12px/1.5 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  overflow: hidden;
}

#stage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#game {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #120E0B;
  cursor: none;   /* Patch 15.1: the game draws its own (src/ui/cursor.js) */
}

#debug {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  overflow-y: auto;
  background: #1a1410;
  border-left: 1px solid #443A31;
  display: none;
  padding: 6px;
  box-sizing: border-box;
}
#debug.open { display: block; width: 260px; }

#debug fieldset {
  border: 1px solid #443A31;
  margin: 0 0 6px;
  padding: 4px 6px 6px;
}
#debug legend { color: #D2A24C; padding: 0 4px; }
#debug label { display: block; margin: 2px 0; }
#debug button, #debug select, #debug input[type="text"] {
  font: inherit;
  background: #241C16;
  color: #C4B49A;
  border: 1px solid #443A31;
  margin: 1px;
  padding: 1px 4px;
  cursor: pointer;
}
#debug button:hover { background: #443A31; }
#debug input[type="text"] { width: 100%; box-sizing: border-box; cursor: text; }
#debug p { margin: 2px 0; color: #6E6154; }
#debug .cues { max-height: 200px; overflow-y: auto; }
#debug .cues button { display: block; width: 100%; text-align: left; }

/* The playtest questionnaire (Patch 3.2). */
/* Placed by main.js on the title and results screens only, centred on its point (port D-058). The short form's
   button sits just above the point and the long form's just below (port D-164). */
.pt-launch {
  position: fixed; left: 50%; top: 75%; transform: translate(-50%, -50%); z-index: 20;
  font: 12px/1 monospace; letter-spacing: 1px;
  background: #241C16; color: #F6DD93; border: 1px solid #D2A24C; padding: 6px 10px; cursor: pointer;
}
.pt-launch:hover { background: #443A31; }
.pt-launch[hidden] { display: none; }
.pt-launch-above { transform: translate(-50%, calc(-100% - 3px)); }
.pt-launch-below { transform: translate(-50%, 3px); }
.pt-overlay .pt-version { flex-basis: 100%; margin: 8px 0 0; color: #6E6154; font-size: 11px; letter-spacing: 1px; }
.pt-overlay {
  position: fixed; inset: 0; z-index: 30; display: none;
  background: rgba(18, 14, 11, 0.86); overflow-y: auto;
}
.pt-overlay.open { display: block; }
.pt-overlay .pt-panel {
  max-width: 720px; margin: 24px auto; padding: 16px 20px; box-sizing: border-box;
  background: #1a1410; border: 1px solid #443A31; color: #C4B49A; font: 13px/1.4 monospace;
}
.pt-overlay header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pt-overlay h2 { margin: 0; color: #F6DD93; font-size: 16px; }
.pt-overlay .pt-build { margin: 0; color: #6E6154; flex: 1; }
.pt-overlay .pt-intro { color: #C4B49A; }
.pt-overlay fieldset { border: 1px solid #443A31; margin: 14px 0; padding: 8px 12px; }
.pt-overlay legend { color: #D2A24C; padding: 0 6px; }
.pt-overlay .pt-q { margin: 10px 0 14px; }
.pt-overlay .pt-text { margin: 0 0 6px; color: #F2DCAE; }
.pt-overlay .pt-scale, .pt-overlay .pt-choice { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pt-overlay .pt-scale span { color: #6E6154; }
.pt-overlay label { cursor: pointer; }
.pt-overlay textarea {
  width: 100%; box-sizing: border-box; margin-top: 6px; resize: vertical;
  background: #120E0B; color: #F2DCAE; border: 1px solid #443A31; font: 13px/1.4 monospace; padding: 4px 6px;
}
.pt-overlay button {
  background: #241C16; color: #F6DD93; border: 1px solid #D2A24C; padding: 6px 12px; cursor: pointer; font: 12px monospace;
}
.pt-overlay button:hover { background: #443A31; }
.pt-overlay footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-top: 1px solid #443A31; padding-top: 12px; }
.pt-overlay .pt-note { flex-basis: 100%; margin: 0; color: #F6DD93; }
.pt-overlay .pt-clear { border-color: #443A31; color: #6E6154; }
#debug .tune-row select { max-width: 150px; }
@media (max-width: 760px) { .pt-overlay .pt-panel { margin: 0; border: 0; } }

/* The RAT: asking before runs are sent (port D-079, D-117). Placed by main.js on the title screen. */
#consent {
  position: fixed; transform: translateX(-50%); z-index: 25; box-sizing: border-box; width: calc(100% - 24px);
  background: #1a1410; border: 1px solid #D2A24C; color: #C4B49A; font: 12px/1.45 monospace; padding: 10px 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}
#consent[hidden] { display: none; }
#consent h2 { margin: 0 0 6px; color: #F6DD93; font-size: 13px; letter-spacing: 1px; }
#consent p { margin: 0 0 8px; }
#consent .consent-note { margin: 8px 0 0; color: #6E6154; }
#consent .consent-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
#consent button, .pt-overlay .pt-share button {
  background: #241C16; color: #F6DD93; border: 1px solid #D2A24C; padding: 6px 12px; cursor: pointer; font: 12px monospace;
}
#consent button:hover { background: #443A31; }
#consent .consent-no { border-color: #443A31; color: #C4B49A; }
.pt-overlay .pt-share { flex-basis: 100%; margin: 0; color: #C4B49A; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pt-overlay .pt-share .pt-tester { color: #6E6154; font-size: 11px; }
.pt-overlay .pt-sent { color: #3E8D7A; }
.pt-overlay .pt-sent.pt-bad { color: #D93A32; }