:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: #0b0908;
  display: flex; align-items: center; justify-content: center;
  padding: max(0px, env(safe-area-inset-top, 0px)) 0 max(0px, env(safe-area-inset-bottom, 0px));
}
/* The game is the whole interface. Everything else is pixels inside it. */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
#screen {
  width: 100%; max-width: min(100vw, calc(100vh * 2.2));
  aspect-ratio: 880 / 400;
  image-rendering: pixelated;
  background: #0b0908; touch-action: none; display: block;
}
/* Fit the game to the visible area. The fullscreen icon overlays its corner. */
html:not(.dev) body {
  width: var(--view-w, 100vw); height: var(--view-h, 100dvh);
  overflow: hidden;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
html:not(.dev) #screen {
  --available-h: calc(var(--view-h, 100dvh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  width: min(100%, calc(var(--available-h) * 2.2));
  height: auto; max-width: 100%; min-width: 0; flex: none;
}
#display-tools {
  position: fixed; width: 40px; height: 40px; z-index: 2;
}
#fullscreen-toggle {
  flex: none; width: 100%; height: 100%; padding: 4px; border: 2px solid #b1854a;
  background: #33241a; color: #f2b33d; cursor: pointer;
  box-shadow: inset -2px -2px #140f0d, inset 2px 2px #66492e;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#fullscreen-toggle canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
#fullscreen-toggle:hover, #fullscreen-toggle:focus-visible { border-color: #f2b33d; outline: 2px solid #f2b33d; outline-offset: -2px; }
#fullscreen-toggle:active { background: #4a3323; }
#display-status { position: absolute; right: 6px; bottom: 46px; width: min(320px, calc(100vw - 12px)); color: #f6dc9a; font: 12px/1.5 monospace; background: #221812; border: 1px solid #b1854a; padding: 8px; }
#display-status:empty { display: none; }

#rotate { display: none; }
@media (orientation: portrait) and (max-width: 900px) {
  #screen { display: none; }
  #rotate {
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    text-align: center; padding: 24px; color: #8a6338;
    font-family: ui-sans-serif, system-ui, sans-serif;
  }
  #rotate .phone {
    width: 84px; height: 140px; border: 4px solid #f2b33d; border-radius: 10px;
    animation: tip 2.2s ease-in-out infinite;
  }
  #rotate b { color: #f2b33d; font-size: 18px; letter-spacing: 2px; }
  #rotate span { font-size: 13px; }
}
@keyframes tip { 0%,45% { transform: rotate(0deg); } 65%,100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { #rotate .phone { animation: none; transform: rotate(-90deg); } }

/* The board: the one piece of the game that is HTML, because three initials
   want a real text field. It sits over the canvas in the game's own colours. */
.dp-board { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #0b0908d9; z-index: 10; padding: 16px; }
.dp-board[hidden] { display: none; }
.dp-board-card {
  width: min(520px, 94%); max-height: 94%; overflow: auto; padding: clamp(16px, 3vw, 30px); text-align: center;
  color: #ffe9c2; font: 800 14px/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em;
  border: 2px solid #f2b33d; background: #1a120c; box-shadow: 0 16px 60px #000c, inset 0 0 0 4px #0b0908;
}
.dp-board-card .dp-eyebrow { margin: 0; color: #b1854a; font-size: 12px; letter-spacing: .3em; }
.dp-board-card h2 { margin: 6px 0 8px; color: #f2b33d; font-size: clamp(24px, 4.5vw, 40px); letter-spacing: .06em; }
.dp-board-card .dp-copy, .dp-board-card .dp-message { margin: 6px 0 10px; color: #d8ab63; font-size: 12px; min-height: 1.2em; }
.dp-form { display: grid; justify-items: center; gap: 12px; margin: 10px 0 14px; }
.dp-form[hidden] { display: none; }
.dp-form label { display: grid; gap: 8px; color: #ffe9c2; font-size: 12px; letter-spacing: .2em; }
.dp-form input {
  width: 5ch; padding: 6px 8px; text-align: center; text-transform: uppercase;
  font: 800 30px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3em; color: #fffbe8;
  background: #0b0908; border: 2px solid #b1854a; border-radius: 4px; outline: none;
}
.dp-form input:focus { border-color: #f2b33d; box-shadow: 0 0 14px #f2b33d55; }
.dp-primary {
  padding: 10px 18px; font: 800 14px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; cursor: pointer;
  color: #0b0908; background: #f2b33d; border: 2px solid #ffe9c2; border-radius: 4px;
}
.dp-primary:hover, .dp-primary:focus-visible { background: #ffe9c2; }
.dp-primary[hidden] { display: none; }
.dp-list { list-style: none; counter-reset: rank; margin: 8px 0 10px; padding: 0; display: grid; gap: 6px; text-align: left; }
.dp-list[hidden] { display: none; }
.dp-list li { display: grid; grid-template-columns: 2.2em 5em 1fr auto; align-items: baseline; gap: 10px; padding: 6px 10px; background: #0b0908; border: 1px solid #4a3323; }
.dp-list li::before { counter-increment: rank; content: counter(rank) "."; color: #b1854a; text-align: right; }
.dp-list .dp-initials { color: #ffe9c2; font-size: 18px; letter-spacing: .2em; }
.dp-list .dp-score { color: #f2b33d; font-size: 18px; text-align: right; }
.dp-list .dp-detail { color: #8a6338; font-size: 11px; }
.dp-list .dp-empty { display: block; text-align: center; color: #8a6338; }

/* Dev notes: the parent's companion box, HTML beside the canvas, only with
   ?dev=1. Modern and plain on purpose — it is not part of the game. */
html.dev body { gap: 18px; padding-left: 12px; padding-right: 12px; overflow: auto; }
/* beside the box the canvas gives up the phone's fill-the-screen rule, whatever the window's height */
html.dev #screen { height: auto; width: 100%; min-width: 0; object-fit: fill; max-width: min(calc(100vw - 400px), calc(100vh * 2.2)); }
.dev-notes {
  color-scheme: light; width: 350px; max-height: calc(100vh - 24px); overflow: auto; flex: none;
  background: #f3f3f3; color: #1b1b1b; border: 1px solid #e0e0e0; border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45); padding: 14px 16px 12px;
  font: 14px/1.4 "Segoe UI", ui-sans-serif, system-ui, sans-serif; display: flex; flex-direction: column; gap: 10px;
}
.dev-notes header { display: flex; align-items: center; justify-content: space-between; position: sticky; top: -14px; margin: -14px -16px 0; padding: 14px 16px 8px; background: #f3f3f3; z-index: 1; }   /* the buttons stay put while the panel scrolls */
.dev-notes h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .2px; }
.dev-notes button { font: inherit; border-radius: 6px; padding: 6px 12px; cursor: pointer; border: 1px solid #c9c9c9; background: #fbfbfb; color: #1b1b1b; }
.dev-notes button:hover { background: #f0f0f0; }
.dev-notes .dev-save { background: #0067c0; border-color: #0067c0; color: #fff; font-weight: 600; }
.dev-notes .dev-save:hover { background: #1975d1; }
.dev-now { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 10px 12px; }
.dev-scene { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #6b6b6b; }
.dev-what { margin-top: 4px; font-size: 15px; font-weight: 600; }
.dev-where { margin-top: 4px; font-size: 12px; color: #6b6b6b; }
.dev-box { width: 100%; resize: vertical; min-height: 120px; font: inherit; padding: 10px 12px; border: 1px solid #c9c9c9; border-radius: 8px; background: #fff; color: #1b1b1b; }
.dev-box:focus { outline: 2px solid #0067c0; outline-offset: 0; border-color: #0067c0; }
.dev-notes footer { display: flex; align-items: center; gap: 10px; }
.dev-status { font-size: 12px; color: #4a4a4a; }
.dev-status.bad { color: #b3261e; }
.dev-hint { margin: 0; font-size: 12px; color: #6b6b6b; }
.dev-notes h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #6b6b6b; }
.dev-before { background: #fff8e6; border: 1px solid #f0dfb0; border-radius: 8px; padding: 6px 10px; }
.dev-before summary { cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #6b6b6b; user-select: none; }
.dev-before[open] summary { margin-bottom: 4px; }
.dev-feed { border-top: 1px solid #e0e0e0; padding-top: 10px; max-height: 46vh; overflow: auto; }
.dev-note { background: #fff; border: 1px solid #e5e5e5; border-left: 4px solid #c9c9c9; border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.dev-note.done { border-left-color: #1a7f37; }
.dev-note-where { font-size: 11px; color: #6b6b6b; margin-bottom: 2px; }
.dev-note-when { font-size: 11px; color: #9a9a9a; }
.dev-note-text { margin: 2px 0 4px; white-space: pre-wrap; }
.dev-note-done { font-size: 12px; color: #1a7f37; }
.dev-note:not(.done) .dev-note-done { color: #9a9a9a; font-style: italic; }
.dev-feed-btn { margin-left: auto; margin-right: 8px; }

/* Entry notice overlays the title's empty lower edge, never adds a game row. */
#stats-notice { position: fixed; bottom: max(4px, env(safe-area-inset-bottom, 0px)); left: 48px; width: calc(100% - 96px); margin: 0; padding: 4px; color: #d8ab63; background: #0b0908; z-index: 1; font-size: 11px; }
#stats-notice[hidden] { display: none; }

/* --- Writing a case ---------------------------------------------------------
   The same panel as the board, wider: a case is five fields and six choices
   rather than three initials. ⚠️ THE MEDIA QUERIES GO LAST. They add no
   specificity of their own, so a plain rule written below one simply wins and
   the layout silently does not change on the screen it was written for. */
.dp-board-card.dp-wide {
  width: min(760px, 96%); max-height: 96%; text-align: left; overflow: hidden;
  display: flex; flex-direction: column; padding: clamp(10px, 2vw, 22px);
}
.dp-wide .dp-head, .dp-wide .dp-foot { flex: none; }
/* the only part that scrolls, so the buttons can never go below the fold */
.dp-wide .dp-scroll {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding-right: 4px;
  /* a shadow where the content is cut, so a short screen shows there is more */
  background:
    linear-gradient(#1a120c 30%, #1a120c00),
    linear-gradient(#1a120c00, #1a120c 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, #0008, #0000),
    radial-gradient(farthest-side at 50% 100%, #0008, #0000) 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 20px, 100% 20px, 100% 9px, 100% 9px;
  background-attachment: local, local, scroll, scroll;
}
.dp-wide h2 { margin: 2px 0 4px; font-size: clamp(18px, 3.4vw, 30px); }
.dp-wide .dp-copy { margin: 0 0 6px; }
.dp-wide .dp-message { margin: 4px 0 0; }

.dp-write-form { display: grid; gap: 10px; margin: 8px 0; }
.dp-write-form label { display: grid; gap: 5px; color: #d8ab63; font-size: 11px; letter-spacing: .16em; }
.dp-write-form input, .dp-write-form select {
  width: 100%; padding: 8px 10px; color: #fffbe8; background: #0b0908;
  border: 2px solid #b1854a; border-radius: 4px; outline: none;
  font: 700 15px/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em;
}
.dp-write-form input:focus, .dp-write-form select:focus { border-color: #f2b33d; box-shadow: 0 0 12px #f2b33d55; }
.dp-rooms, .dp-bits { display: grid; gap: 10px; align-content: start; }
.dp-rooms-head { margin: 0; color: #b1854a; font-size: 11px; letter-spacing: .16em; }
.dp-roomrow { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 8px; border: 1px solid #4a3323; background: #130d09; }

.dp-faults { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 3px; }
.dp-faults[hidden] { display: none; }
.dp-faults li { color: #e89aa4; font-size: 11px; letter-spacing: .1em; }
.dp-faults li.dp-good { color: #63d0c0; }
.dp-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
.dp-primary.dp-quiet { color: #ffe9c2; background: #33241a; border-color: #b1854a; }
.dp-primary.dp-quiet:hover { background: #4a3323; }
.dp-primary:disabled { opacity: .4; cursor: not-allowed; }

.dp-mine { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.dp-mine[hidden] { display: none; }
.dp-mine li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #0b0908; border: 1px solid #4a3323; }
.dp-mine-text { display: grid; gap: 2px; }
.dp-mine-text b { color: #ffe9c2; font-size: 13px; letter-spacing: .1em; }
.dp-mine-text span { color: #8a6338; font-size: 10px; letter-spacing: .1em; }
.dp-mine-acts { display: flex; gap: 6px; }
.dp-mine-acts .dp-primary { padding: 6px 10px; font-size: 11px; }
.dp-mine .dp-empty { display: block; color: #8a6338; text-align: center; }
.dp-paste { display: grid; gap: 8px; margin: 8px 0; padding: 10px; border: 1px dashed #4a3323; }
.dp-paste[hidden] { display: none; }
.dp-pastebox { display: grid; gap: 5px; color: #d8ab63; font-size: 11px; letter-spacing: .16em; }
.dp-pastebox input {
  width: 100%; padding: 8px 10px; color: #fffbe8; background: #0b0908;
  border: 2px solid #b1854a; border-radius: 4px; outline: none;
  font: 700 13px/1.3 ui-monospace, Menlo, Consolas, monospace;
}

/* Drama Pig is played in landscape — wide and short — so the three rooms
   stand BESIDE the name, the culprit and the confession rather than under
   them. That is the difference between the whole case being on the screen at
   once and a scroll nobody has been told about. Wide is the only condition:
   in one column the form is 560px tall, so a perfectly ordinary desktop
   window hid the confession below the fold while a phone showed everything. */
@media (min-width: 680px) {
  .dp-write-form { grid-template-columns: 1fr 1fr; column-gap: 14px; align-items: start; }
  .dp-write-form > .dp-rooms { grid-column: 2; grid-row: 1; }
  .dp-write-form > .dp-bits  { grid-column: 1; grid-row: 1; }
  .dp-roomrow { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-height: 470px) {
  .dp-board { padding: 4px; }
  .dp-board-card.dp-wide { padding: 8px 10px; }
  /* Everything that is only decoration goes. What is left is the case. */
  .dp-wide .dp-eyebrow, .dp-wide .dp-copy { display: none; }
  .dp-wide h2 { font-size: 16px; margin: 0 0 2px; }
  .dp-write-form { gap: 6px; margin: 4px 0; }
  .dp-write-form input, .dp-write-form select { padding: 4px 8px; font-size: 13px; }
  .dp-write-form label { gap: 3px; font-size: 10px; }
  .dp-rooms { gap: 6px; }
  /* The labels go; the words stay on the fields themselves as placeholders,
     which is what makes three rooms, a culprit and a confession fit at once. */
  .dp-roomrow { padding: 5px; grid-template-columns: 1fr 1.5fr; gap: 6px; align-items: center; }
  .dp-roomrow label span { display: none; }
  .dp-rooms-head { font-size: 10px; }
  .dp-primary { padding: 7px 12px; }
  .dp-row { margin: 6px 0 2px; }
  .dp-faults li { font-size: 10px; }
}