/* Ken's Rock Run -- a dark cabinet around a 320x192 screen. */

:root {
  --ink:      #e8e4d8;
  --dim:      #8b8578;
  --panel:    #16141a;
  --edge:     #2b2732;
  --amber:    #c9d684;
  --hot:      #c37b75;
  --shell:    #0a090c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--shell);
  color: var(--ink);
  font-family: "Consolas", "SF Mono", "Menlo", ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2vh, 28px) 12px;
}

#cabinet {
  /* Grow to 1500px, but stop early when the window is too short to show the
   * 320x192 screen plus the HUD and footer -- and never below the 1000px the
   * layout used before, so narrower windows behave exactly as they always did. */
  width: min(96vw, 1500px, max(1000px, (100vh - 160px) * 1.667));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- status panel ------------------------------------------------------ */

#hud {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}

#hud .stat {
  flex: 1 1 0;
  min-width: 74px;
  background: var(--panel);
  padding: 7px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#hud .stat.wide { flex: 1.4 1 0; }

#hud .label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

#hud .value {
  font-size: clamp(15px, 2.2vw, 19px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

#hud-diamonds.done { color: var(--amber); }

/* Progress toward the quota: a stepped bar, filled in whole pixels' worth of
 * segments rather than smoothly, to keep the 8-bit feel. */
#hud .meter {
  display: block;
  height: 4px;
  margin-top: 2px;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, var(--panel) 7px 8px),
    #26222c;
}
#hud-bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(#eafeff, #79c1c8);
  transition: width 0.15s steps(3, end);
}
#hud-diamonds.done + .meter #hud-bar { background: linear-gradient(#f2f7c8, var(--amber)); }
#hud-time.low      { color: var(--hot); animation: pulse 0.6s steps(2, end) infinite; }

@keyframes pulse { 50% { opacity: 0.35; } }

/* ---- screen ------------------------------------------------------------ */

#stage {
  position: relative;
  width: 100%;
  aspect-ratio: 320 / 192;
  background: #000;
  border: 1px solid var(--edge);
  border-radius: 0 0 6px 6px;
  overflow: hidden;
  /* A faint phosphor bloom around the glass, and the bezel's inner lip. */
  box-shadow:
    0 0 0 1px #000,
    0 0 36px rgba(201, 214, 132, 0.07),
    0 18px 40px rgba(0, 0, 0, 0.55);
}

#screen {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* The glass: scanlines and a soft vignette, painted over the canvas but under
 * the overlay so titles stay crisp. Purely decorative, so it never takes input. */
#stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(130% 110% at 50% 45%,
                    rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.30) 100%),
    repeating-linear-gradient(to bottom,
                    rgba(0, 0, 0, 0.10) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.6), inset 0 0 2px rgba(255, 255, 255, 0.06);
}

/* Shown in the corner of the screen while the sound is off. */
#mute-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  padding: 2px 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--dim);
  background: rgba(8, 7, 10, 0.7);
  border: 1px solid var(--edge);
  border-radius: 3px;
  pointer-events: none;
}
#mute-badge[hidden] { display: none; }

/* ---- toolbar ----------------------------------------------------------- */

#toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: -2px;
}

.tool {
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
}
.tool:hover { color: var(--ink); border-color: #4c4658; }
.tool:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.tool[aria-pressed="true"] { color: var(--hot); }
.tool[hidden] { display: none; }

/* ---- fullscreen -------------------------------------------------------- */

#cabinet:fullscreen {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 2vh 2vw;
  background: var(--shell);
}
#cabinet:fullscreen > * {
  width: min(100%, (100vh - 150px) * 1.667);
}
#cabinet:fullscreen #dedication { display: none; }

#overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6% 8%;
  text-align: center;
  background: rgba(8, 7, 10, 0.86);
  backdrop-filter: blur(2px);
}

#overlay.visible { display: flex; }

#overlay h1 {
  margin: 0;
  font-size: clamp(18px, 4.4vw, 34px);
  letter-spacing: 0.16em;
  color: var(--amber);
}

/* ---- the title screen -------------------------------------------------- */

/* A cave runs live behind the title, so the scrim only knocks it back rather
 * than hiding it, and a vignette keeps the type legible over the busy middle. */
#overlay.title {
  gap: 10px;
  background:
    radial-gradient(80% 70% at 50% 42%,
                    rgba(8, 7, 10, 0.90) 0%, rgba(8, 7, 10, 0.72) 60%,
                    rgba(8, 7, 10, 0.88) 100%);
  backdrop-filter: blur(1px) saturate(0.85);
}

/* Extruded metal type: a gradient poured through the glyphs, then stacked
 * hard-edged drop shadows for the outline and the block extrusion under it.
 * Each shadow filters the result of the one before, so they compound into a
 * genuine border rather than four separate smears. */
#overlay.title h1 {
  font-size: clamp(28px, 7.6vw, 64px);
  line-height: 1.04;
  letter-spacing: 0.09em;
  color: transparent;
  background-image: linear-gradient(
    100deg,
    #fffdf0 0%, #f6e79a 18%, #c9a227 34%, #6f5410 44%,
    #f2e27a 56%, #fffdf0 68%, #c9a227 84%, #8a6a12 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow( 2px 0 0 #17131a) drop-shadow(-2px 0 0 #17131a)
    drop-shadow(0  2px 0 #17131a) drop-shadow(0 -2px 0 #17131a)
    drop-shadow(0  5px 0 #4a3a12)
    drop-shadow(0  8px 0 #17131a)
    drop-shadow(0 0 22px rgba(242, 226, 122, 0.40));
  animation: sheen 6s linear infinite;
}

/* The shimmer is the gradient sliding under the glyphs, not the glyphs moving. */
@keyframes sheen {
  to { background-position: -240% 0; }
}

#overlay.title #overlay-sub {
  font-size: clamp(11px, 2.3vw, 16px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  text-shadow: 0 2px 0 #17131a;
}

/* The controls sit in a bevelled panel: lit top-left, shadowed bottom-right,
 * the way a 16-bit menu box was drawn. */
#overlay.title #overlay-body {
  margin-top: 4px;
  padding: 10px clamp(12px, 3vw, 22px);
  color: var(--ink);
  background: rgba(22, 20, 26, 0.82);
  border: 2px solid;
  border-color: #4c4658 #14121a #14121a #4c4658;
  border-radius: 2px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#overlay-prompt {
  margin: 0;
  font-size: clamp(11px, 2.2vw, 15px);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--amber);
  text-shadow: 0 2px 0 #17131a, 0 0 14px rgba(201, 214, 132, 0.5);
}

/* Only the title screen sets a prompt; everywhere else it collapses away. */
#overlay-prompt:empty { display: none; }
#overlay.title #overlay-prompt { animation: blink 1.15s steps(2, end) infinite; }
/* The cave picker's instructions hold still so they can be read. */
#overlay #overlay-prompt.steady { animation: none; white-space: pre-line; letter-spacing: 0.12em; line-height: 1.6; }

@keyframes blink { 50% { opacity: 0.15; } }

/* Motion here is decoration, so it goes when the viewer has asked it to. */
@media (prefers-reduced-motion: reduce) {
  #overlay.title h1,
  #overlay.title #overlay-prompt { animation: none; }
}

#overlay p {
  margin: 0;
  font-size: clamp(11px, 2.1vw, 15px);
  letter-spacing: 0.08em;
  color: var(--ink);
}

#overlay pre {
  margin: 8px 0 0;
  font: inherit;
  font-size: clamp(10px, 1.7vw, 13px);
  line-height: 1.6;
  color: var(--dim);
  white-space: pre-wrap;
}

/* ---- touch pad --------------------------------------------------------- */

#pad {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  user-select: none;
  touch-action: none;
}

.dpad {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(3, 56px);
  gap: 4px;
}

.dpad .up    { grid-area: 1 / 2; }
.dpad .left  { grid-area: 2 / 1; }
.dpad .right { grid-area: 2 / 3; }
.dpad .down  { grid-area: 3 / 2; }

.buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.key {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  padding: 10px;
  cursor: pointer;
}

.key.held, .key:active { background: var(--edge); color: var(--amber); }
.key.grab  { padding: 20px 26px; font-size: 14px; letter-spacing: 0.1em; }
.key.small { font-size: 11px; padding: 8px 14px; letter-spacing: 0.1em; color: var(--dim); }

/* Show the pad on anything without a proper pointer. */
@media (hover: none), (pointer: coarse) {
  #pad { display: flex; }
}

#dedication {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: #5a5566;
  text-align: center;
}