/* Last Rites — page styling.
 *
 * The chrome around the canvas follows the site scheme (cyan on near-black).
 * The canvas itself does not: the mortuary owns everything inside it, and its
 * palette is generated with the art. Nothing here sets a background on body or
 * html — that belongs to cryptic.css.
 */

[hidden] { display: none !important; }

.lr-cabinet {
  max-width: 1152px;
  margin: 0 auto;
}

.lr-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid #008b8b;
  border-bottom: none;
  background: rgba(0, 20, 20, 0.35);
}

.lr-hud .keeper-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  letter-spacing: 1px;
  color: #aefefe;
}

.lr-hud input[type="text"],
.lr-hud input:not([type]) {
  width: 190px;
  padding: 5px 7px;
  background: #04191a;
  border: 1px solid #008b8b;
  color: #d3f7f7;
  font-family: inherit;
  font-size: 0.9rem;
}

.lr-hud input[aria-invalid="true"] {
  border-color: #d24a3c;
  box-shadow: 0 0 6px rgba(210, 74, 60, 0.55);
}

.lr-hud button {
  padding: 6px 14px;
  background: #05282a;
  border: 1px solid #00cccc;
  color: #aefefe;
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 1px;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}

.lr-hud button:hover { background: #073a3d; color: #00ffff; }
.lr-hud button:disabled { cursor: not-allowed; opacity: 0.5; }
.lr-hud button:focus-visible,
.lr-hud input:focus-visible {
  outline: 2px solid #f0d98a;
  outline-offset: 2px;
}

#continueButton {
  max-width: 255px;
  white-space: normal;
  line-height: 1.15;
}

#longNightButton,
#longNightContinueButton,
#longNightRetryButton {
  max-width: 300px;
  white-space: normal;
  line-height: 1.15;
}

#longNightButton.is-locked {
  border-color: #6f7777;
  color: #95a1a1;
}

#longNightRetryButton {
  border-color: #c88b6f;
}

#newCampaignButton { border-color: #c88b6f; }

.lr-text-controls-toggle {
  border-color: #d0b86f !important;
  color: #f0d98a !important;
}

.lr-text-controls-toggle[aria-expanded="true"] {
  background: #1b3d3b;
  box-shadow: 0 0 0 1px rgba(240, 217, 138, 0.24);
}

.lr-hud label.lr-volume {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  letter-spacing: 1px;
  color: #7fd7d7;
}

.lr-hud input[type="range"] { width: 96px; accent-color: #00cccc; }

.lr-screen {
  position: relative;
  border: 1px solid #008b8b;
  background: #16171b;
  line-height: 0;
}

/* The canvas is authored at 576x324 and scaled by the browser. Nearest
 * neighbour is mandatory: a smoothed upscale turns the generated bitmap font
 * into mush, and the whole game is reading small text. */
#lrCanvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* documents are dragged with a pointer; the page must not scroll under them */
  touch-action: none;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}

.lr-status {
  margin: 8px 0 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: #7fd7d7;
  text-align: center;
}

.lr-controls-note {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: #5fb3b3;
  text-align: center;
}

.game-divider {
  margin: 26px auto 18px;
  border: 0;
  border-top: 1px solid rgba(0, 204, 204, 0.35);
}

.leaderboard h2 {
  text-align: center;
  letter-spacing: 2px;
}

#lbTable {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  border-collapse: collapse;
  border: 1px solid #008b8b;
  font-size: 0.88rem;
}

/* Progressive semantic desk. It stays collapsed so the canvas remains the
 * product UI; the Text controls disclosure reveals this ordinary document flow
 * for screen-reader, keyboard and low-vision users. The 44px controls and 16px
 * text are independent of the bitmap game's small native typography. */
.lr-semantic {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  border-top: 1px solid #008b8b;
  background: #071617;
  color: #d3f7f7;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  overflow-wrap: anywhere;
}

.lr-semantic h2,
.lr-semantic h3,
.lr-semantic h4,
.lr-semantic p,
.lr-semantic ul { margin: 0 0 8px; }

.lr-semantic h2 { color: #aefefe; font-size: 1.15rem; }
.lr-semantic h3 { color: #aefefe; font-size: 1rem; }
.lr-semantic h4 { color: #cfeaea; font-size: 1rem; text-transform: capitalize; }
.lr-semantic ul { padding-left: 1.3em; }

.lr-semantic-live {
  min-height: 1.4em;
  margin: 4px 0 10px;
}

.lr-semantic-live p { margin: 0; }
.lr-semantic-live p + p { color: #ffd0c7; }

.lr-semantic-actions,
.lr-semantic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lr-semantic-actions { margin: 0 0 12px; }

.lr-semantic-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 204, 204, 0.32);
}

.lr-semantic-section > ul,
.lr-semantic-section > .lr-semantic-list { margin-bottom: 0; }

.lr-semantic button {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #00cccc;
  border-radius: 2px;
  background: #05282a;
  color: #d3f7f7;
  font: inherit;
  line-height: 1.3;
  cursor: url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}

.lr-semantic button:hover:not(:disabled) { background: #073a3d; color: #fff; }
.lr-semantic button:disabled { cursor: not-allowed; opacity: 0.48; }
.lr-semantic button:focus-visible,
.lr-semantic a:focus-visible,
.lr-hud button:focus-visible,
.lr-hud input:focus-visible {
  outline: 3px solid #f0d98a;
  outline-offset: 3px;
}

.lr-semantic-document {
  flex: 1 1 260px;
  min-width: min(100%, 260px);
  padding: 10px;
  border: 1px solid rgba(0, 204, 204, 0.45);
  background: rgba(0, 28, 28, 0.6);
}

.lr-semantic-field { flex: 1 1 220px; text-align: left; }
.lr-semantic-body-button { flex: 1 1 150px; }
.lr-semantic-tool,
.lr-semantic-disposition { flex: 1 1 120px; }
.lr-law-status { color: #f0d98a; }

.lr-semantic-dialogs { position: relative; z-index: 2; }
.lr-dialog {
  box-sizing: border-box;
  max-width: 760px;
  margin: 12px auto 0;
  padding: 16px;
  border: 2px solid #00cccc;
  background: #071617;
  color: #d3f7f7;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
  line-height: 1.4;
}

.lr-dialog > button { margin: 4px 8px 0 0; }

.lr-screen:fullscreen,
.lr-screen.is-fullscreen {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: auto;
}

.lr-screen:fullscreen .lr-semantic,
.lr-screen.is-fullscreen .lr-semantic {
  flex: 0 0 auto;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  line-height: 1.4;
}

@media (forced-colors: active) {
  .lr-semantic,
  .lr-dialog,
  .lr-semantic-document,
  .lr-hud { border-color: CanvasText; background: Canvas; color: CanvasText; }
  .lr-semantic button,
  .lr-hud button,
  .lr-hud input { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .lr-semantic button:focus-visible,
  .lr-hud button:focus-visible,
  .lr-hud input:focus-visible { outline: 3px solid Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

.long-night-briefing {
  margin: 14px auto 0;
  max-width: 900px;
  padding: 12px 16px;
  border: 1px solid #008b8b;
  background: rgba(0, 20, 20, 0.45);
  color: #cfeaea;
  text-align: left;
}

.long-night-briefing h2 {
  margin: 0 0 8px;
  color: #aefefe;
  font-size: 1rem;
  letter-spacing: 1px;
}

.long-night-briefing p { margin: 0 0 8px; font-size: 0.85rem; }
.long-night-briefing ol {
  columns: 2;
  column-gap: 28px;
  margin: 0;
  padding-left: 25px;
  font-size: 0.78rem;
}
.long-night-briefing li { break-inside: avoid; margin: 0 0 4px; }
.long-night-briefing li strong { color: #aefefe; }

@media (max-width: 760px) {
  #lbTable { font-size: 0.75rem; }
  #lbTable th,
  #lbTable td { padding: 4px 5px; }
}

#lbTable th,
#lbTable td {
  border: 1px solid #008b8b;
  padding: 5px 8px;
  text-align: center;
}

#lbTable th {
  background: rgba(0, 204, 204, 0.14);
  color: #aefefe;
  letter-spacing: 1px;
}

#lbTable td { color: #cfeaea; }

#lbTable .empty-cell {
  font-style: italic;
  color: #6f9a9a;
}

@media (max-width: 900px) {
  .lr-hud { gap: 10px; padding: 8px; }
  .lr-hud input[type="text"],
  .lr-hud input:not([type]) { width: 150px; }
  .lr-hud label.lr-volume { display: none; }
}

/* Fullscreen. The .lr-screen wrapper goes fullscreen rather than the canvas
 * itself, so the letterboxing either side of a 16:9 canvas on a taller display
 * is the game's own near-black rather than the browser's white default.
 *
 * The class is set by the runtime on fullscreenchange as well as matching
 * :fullscreen. Two reasons: the pseudo-class is still prefixed on some engines,
 * and a plain class can be asserted in a headless test — which is how the first
 * version's bug would have been caught before it shipped. */
.lr-screen:fullscreen,
.lr-screen.is-fullscreen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: auto;
  width: 100%;
  min-height: 100%;
  height: auto;
  border: 0;
  background: #0e1009;
}

/* The first version set `width: auto` here, which is what broke it: `auto` on a
 * canvas means its intrinsic 576px attribute width, and max-width/max-height
 * only ever shrink a box — they never grow one. So the canvas sat at 576px in
 * the middle of a black screen and nothing appeared to happen.
 *
 * `min()` picks whichever axis runs out first: the full viewport width, or the
 * width that a full-viewport-height 16:9 image would need. Height follows from
 * the canvas's own intrinsic ratio. */
.lr-screen:fullscreen #lrCanvas,
.lr-screen.is-fullscreen #lrCanvas {
  width: min(100vw, calc(100vh * 576 / 324));
  height: auto;
  max-width: none;
  max-height: 100vh;
}

@media (min-width: 1200px) {
  .lr-cabinet { max-width: 1152px; }
}