/* Everything is drawn on the HUD's pixel grid: --u is the size of one pixel of a 320x200 screen
   (set by src/pixelui.js), and menu text is rendered to canvases with the bitmap font. */
:root {
  --u: 3;
  --px: calc(var(--u) * 1px);
  --stone: none;
  --skull: none;
  --skull-w: 39px;
  --skull-h: 48px;
  --hi: #b8a890;     /* bevel highlight, as on the status bar */
  --lo: #140e0a;     /* bevel shadow */
  --well: #1c130d;   /* sunken areas */
  --gold: #f0b828;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #c4b8a8;
  font-family: system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

#game {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#view, #hud, #melt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#view { image-rendering: pixelated; }

#vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.5) 100%);
}
#hud, #melt { pointer-events: none; }
#hud[hidden], #melt[hidden] { display: none; }
#melt { z-index: 2; }

#fade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.6s steps(6);
}

#ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------- screens ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--px) * 7);
  padding: calc(var(--px) * 8) 16px;
  text-align: center;
  pointer-events: auto;
  background-color: rgba(8, 3, 1, 0.55);
  overflow-y: auto;
}

/* (the melt wipe covers the big transitions; menus within a screen stack just pop in) */
.screen[data-active] {
  display: flex;
  animation: screen-in 0.12s steps(2) both;
}

.screen.dim { background-color: rgba(12, 2, 0, 0.7); }
#screen-loading { background-color: #000; }
#screen-dead, #screen-gameover { background-color: rgba(70, 0, 0, 0.55); }

@keyframes screen-in {
  from { opacity: 0; }
}

/* ---------- pixel text (see pixelui.js) ---------- */
[data-px] {
  margin: 0;
  font-size: 0;
  line-height: 0;
}

.pw {
  display: inline-block;
  vertical-align: top;
  image-rendering: pixelated;
}

.sp { display: inline-block; }
.pv { display: contents; }
.ph { display: none; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  font-size: 12px;
}

.logo { margin-bottom: calc(var(--px) * 2); }
.hint:empty { display: none; }
#im-next-info, #dead-text, #go-text, #victory-text { max-width: calc(var(--px) * 210); }

/* ---------- menus: Doom-style items with the flaming skull cursor ---------- */
.menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--px) * 6);
  min-width: min(calc(var(--px) * 150), 100%);
  padding: 0 calc(var(--skull-w) + var(--px) * 6);
}

.menu button {
  position: relative;
  padding: var(--px) 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.menu button:focus { outline: none; }
.menu button:focus .pv { display: none; }
.menu button:focus .ph { display: contents; }

.menu .back { margin-top: calc(var(--px) * 4); }

.menu button .desc {
  display: block;
  margin-top: calc(var(--px) * 3);
}

.skull {
  position: absolute;
  left: calc(-1 * var(--skull-w) - var(--px) * 5);
  top: calc(var(--px) * 5 - var(--skull-h) / 2);
  width: var(--skull-w);
  height: var(--skull-h);
  background: var(--skull) 0 0 / calc(var(--skull-w) * 2) var(--skull-h) no-repeat;
  animation: skull-blink 0.46s steps(1) infinite;
  pointer-events: none;
}

.menu button:not(:focus) .skull { display: none; }

@keyframes skull-blink {
  50% { background-position: calc(-1 * var(--skull-w)) 0; }
}

/* ---------- stone panels ---------- */
.panel {
  width: min(calc(var(--px) * 216), 100%);
  padding: calc(var(--px) * 7) calc(var(--px) * 8);
  text-align: left;
  background: #251a12 var(--stone) 0 0 / calc(var(--px) * 48) repeat;
  image-rendering: pixelated;
  box-shadow:
    inset var(--px) var(--px) 0 var(--hi),
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--lo),
    0 0 0 var(--px) #000;
}

.panel.wide { width: min(calc(var(--px) * 256), 100%); }
.objective { margin-bottom: calc(var(--px) * 6); }

.keys { width: 100%; border-collapse: collapse; }
.keys td { padding: calc(var(--px) * 2) calc(var(--px) * 2); vertical-align: middle; }
.keys tr + tr td { box-shadow: inset 0 var(--px) 0 rgba(0, 0, 0, 0.45); }
.keys td:first-child { white-space: nowrap; width: 1%; padding-right: calc(var(--px) * 8); }

/* keycaps, bevelled like the status bar */
.kbd {
  display: inline-block;
  min-width: calc(var(--px) * 9);
  margin: var(--px) calc(var(--px) * 2) var(--px) 0;
  padding: calc(var(--px) * 2) calc(var(--px) * 2);
  background: #3a2c22;
  text-align: center;
  box-shadow:
    inset var(--px) var(--px) 0 #8a7462,
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #120a06,
    0 0 0 var(--px) #000;
}

/* ---------- options: name | control | value per row, the switches two to a row ---------- */
.options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--px) * 6) calc(var(--px) * 8);
}

.options label {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: calc(var(--px) * 104) 1fr calc(var(--px) * 26);
  grid-template-areas: "name control value";
  gap: 0 calc(var(--px) * 5);
  align-items: center;
  cursor: pointer;
}

.options label > [data-px="label"] { grid-area: name; }
.options label > output { grid-area: value; text-align: right; }
.options label > input[type="range"], .options label > .cycle { grid-area: control; }
.options label.check {
  grid-column: auto;
  grid-template-columns: auto 1fr;
  grid-template-areas: none;
}
.options label.check > [data-px="label"] { grid-area: auto; }
.options select { display: none; }

/* the setting's value in a sunken box, stepped with clicks or left/right */
.cycle {
  justify-self: start;
  padding: calc(var(--px) * 2) calc(var(--px) * 4);
  border: 0;
  background: var(--well);
  cursor: pointer;
  box-shadow: inset var(--px) var(--px) 0 #000, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #6a5844;
}

.options input:focus-visible, .cycle:focus-visible {
  outline: var(--px) solid var(--gold);
  outline-offset: var(--px);
}
.options input:focus, .cycle:focus { outline-color: var(--gold); }

/* Doom's "thermometer" slider: a notched groove and a bevelled red block */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: calc(var(--px) * 9);
  margin: 0;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: calc(var(--px) * 7);
  background: repeating-linear-gradient(90deg, #4a3a2c 0 var(--px), var(--well) var(--px) calc(var(--px) * 6));
  box-shadow: inset var(--px) var(--px) 0 #000, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #6a5844;
}

input[type="range"]::-moz-range-track {
  height: calc(var(--px) * 7);
  background: repeating-linear-gradient(90deg, #4a3a2c 0 var(--px), var(--well) var(--px) calc(var(--px) * 6));
  box-shadow: inset var(--px) var(--px) 0 #000, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #6a5844;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(var(--px) * 5);
  height: calc(var(--px) * 9);
  margin-top: calc(var(--px) * -1);
  border: 0;
  border-radius: 0;
  background: #b8180c;
  box-shadow: inset var(--px) var(--px) 0 #ff7a5a, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #3a0202, 0 0 0 var(--px) #120000;
}

input[type="range"]::-moz-range-thumb {
  width: calc(var(--px) * 5);
  height: calc(var(--px) * 9);
  border: 0;
  border-radius: 0;
  background: #b8180c;
  box-shadow: inset var(--px) var(--px) 0 #ff7a5a, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #3a0202, 0 0 0 var(--px) #120000;
}

input[type="range"]:focus::-webkit-slider-thumb { background: #e0301c; }
input[type="range"]:focus::-moz-range-thumb { background: #e0301c; }

/* checkboxes are status lights */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: calc(var(--px) * 9);
  height: calc(var(--px) * 9);
  margin: 0;
  background: var(--well);
  cursor: pointer;
  box-shadow: inset var(--px) var(--px) 0 #000, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #6a5844;
}

input[type="checkbox"]:checked {
  background:
    linear-gradient(#ecffe0, #ecffe0) calc(var(--px) * 3) calc(var(--px) * 3) / var(--px) var(--px) no-repeat,
    linear-gradient(#62e44a, #62e44a) calc(var(--px) * 2) calc(var(--px) * 2) / calc(var(--px) * 5) calc(var(--px) * 5) no-repeat,
    #0e5a08;
}

/* ---------- stats ---------- */
.stats {
  border-collapse: collapse;
  min-width: min(calc(var(--px) * 170), 100%);
}

.stats td { padding: calc(var(--px) * 2) calc(var(--px) * 4); }
.stats td:first-child { text-align: left; }
.stats td:last-child { text-align: right; }
.stats tr.total td { box-shadow: inset 0 var(--px) 0 #6e0d08; padding-top: calc(var(--px) * 5); }

.victory-art {
  width: min(calc(var(--px) * 176), 80vw);
  height: auto;
  box-shadow: 0 0 0 var(--px) #000, 0 0 0 calc(var(--px) * 2) #6e0d08;
}

/* ---------- loading: a segmented bar like the boss health bar ---------- */
.progress {
  width: min(calc(var(--px) * 120), 80vw);
  height: calc(var(--px) * 8);
  padding: var(--px);
  background: var(--well);
  box-shadow: inset var(--px) var(--px) 0 #000, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #6a5844;
}

.progress-bar {
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, #d8261c 0 calc(var(--px) * 3), transparent calc(var(--px) * 3) calc(var(--px) * 4));
  box-shadow: inset 0 var(--px) 0 rgba(255, 140, 100, 0.6);
}

@media (max-width: 480px) {
  .keys td:first-child { width: auto; }
}