:root {
  --ink: #f3e3c0;
  --stone: #1b1712;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0a0806;
  background-image:
    radial-gradient(ellipse at 50% -10%, #2a1f16 0%, #0a0806 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px);
  color: var(--ink);
  font-family: "Courier New", ui-monospace, monospace;
  overflow: hidden;
}

/* The page heading and the description of the game. Present for search engines
 * and screen readers, taken off screen for everybody else - there is nowhere on
 * a full-bleed game screen to put a paragraph. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Said only when JavaScript is off, when it has the screen to itself. */
.noscript-note {
  max-width: 46ch;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #a58f68;
  text-align: center;
}

#frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

canvas#game {
  display: block;
  width: min(96vw, calc((100vh - 70px) * 1.6667));
  height: auto;
  aspect-ratio: 960 / 576;
  image-rendering: pixelated;
  border: 3px solid #4a3a26;
  border-radius: 3px;
  background: #0d0a08;
  box-shadow:
    0 0 0 1px #241a12,
    0 18px 60px rgba(0, 0, 0, .8),
    0 0 90px rgba(255, 150, 40, .07);
}

#hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: .5px;
  color: #6b5b45;
  text-align: center;
  padding: 0 10px;
  user-select: none;
}

/* --------------------------------------------------------- the info button */

#info-btn {
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid #5c4930;
  border-radius: 50%;
  background: #17120d;
  color: #a58f68;
  font: bold 13px "Courier New", ui-monospace, monospace;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color .15s, border-color .15s, box-shadow .15s;
}

#info-btn:hover,
#info-btn:focus-visible {
  color: #f3e3c0;
  border-color: #a8804a;
  box-shadow: 0 0 12px rgba(255, 150, 40, .25);
  outline: none;
}

/* ------------------------------------------------------- the about overlay */

#about {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

#about.hidden { display: none; }

#about-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 4, .82);
}

#about-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 30px 34px 26px;
  border: 3px solid #4a3a26;
  border-radius: 3px;
  background: radial-gradient(ellipse at 50% -20%, #241a12 0%, #120e0a 65%);
  box-shadow:
    0 0 0 1px #241a12,
    0 18px 60px rgba(0, 0, 0, .85),
    0 0 90px rgba(255, 150, 40, .06);
  color: #bfae8c;
  font-size: 14px;
  line-height: 1.65;
  outline: none;
}

#about-panel::-webkit-scrollbar { width: 10px; }
#about-panel::-webkit-scrollbar-track { background: #0f0c09; }
#about-panel::-webkit-scrollbar-thumb { background: #3d2f1f; border-radius: 5px; }

#about-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  color: #7d6b4f;
  font: 22px "Courier New", ui-monospace, monospace;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

#about-close:hover,
#about-close:focus-visible {
  color: #f3e3c0;
  border-color: #5c4930;
  outline: none;
}

#about-title {
  margin: 0;
  font-size: 26px;
  letter-spacing: 3px;
  color: var(--ink);
  text-shadow: 0 0 24px rgba(255, 150, 40, .18);
}

.about-lede {
  margin: 10px 0 0;
  color: #9d8f76;
}

.about-block {
  margin-top: 26px;
  border-top: 1px solid #2c2318;
  padding-top: 16px;
}

.about-block h2 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #d8a75a;
}

.about-block p { margin: 0 0 10px; }
.about-block p:last-child { margin-bottom: 0; }

.about-aside {
  color: #8a7b62;
  font-size: 13px;
}

/* --- controls --- */

.about-keys {
  border-collapse: collapse;
  width: 100%;
  max-width: 470px;
}

.about-keys th {
  text-align: left;
  color: #e8dcc0;
  white-space: nowrap;
  padding: 2px 18px 2px 0;
  vertical-align: top;
}

.about-keys td {
  padding: 2px 0;
  color: #9d8f76;
}

/* --- chests --- */

.about-chests {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 14px;
}

.about-chests > div {
  flex: 1 1 260px;
  min-width: 0;
}

.about-chests h3 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.about-chests h3.good { color: #ffd479; }
.about-chests h3.bad { color: #d8544a; }

.about-chests ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-chests li {
  margin-bottom: 7px;
  font-size: 13px;
  line-height: 1.45;
}

.about-chests li b {
  display: block;
  letter-spacing: 1px;
  color: #e8dcc0;
}

.about-chests li span { color: #8a7b62; }

/* --- traps --- */

.about-refusal {
  font-size: 30px;
  letter-spacing: 4px;
  color: #d8544a;
  margin: 4px 0 12px;
}

.about-dismiss {
  margin: 22px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #5f5140;
}

@media (max-width: 560px) {
  #about-panel { padding: 26px 20px 22px; font-size: 13px; }
  #about-title { font-size: 20px; }
}