:root {
  /* An 8-bit home computer: black screen, and colours only from the Amstrad
     CPC's hardware palette — yellow, cyan, red, white. */
  --bg: #000000;
  --bg-2: #000080;
  --panel: rgba(0, 0, 0, 0.94);
  --ink: #ffffff;
  --muted: #b8b8c8;
  --accent: #ffff00;     /* yellow — logo, gems counter, primary action */
  --accent-2: #00ffff;   /* cyan — the gems themselves */
  --warn: #ff0000;       /* the clock running out */
  --line: rgba(255, 255, 255, 0.16);
  --radius: 4px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(1100px 620px at 50% 118%, #00003a, var(--bg));
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 14px;
}

/* Ads */
.ad-rail { display: flex; justify-content: center; align-items: center; min-height: 90px; }
.ad-slot { width: 100%; max-width: 728px; }
.ad-placeholder {
  width: 100%; max-width: 728px; min-height: 90px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line); border-radius: 12px;
  color: var(--muted); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; background: rgba(255, 255, 255, 0.02);
}
.ad-rail.ad-live .ad-placeholder { display: none; }
.ad-rail:not(.ad-live) .ad-slot { display: none !important; }

/* Stage */
.stage { max-width: 1040px; width: 100%; margin: 0 auto; }
.game-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 11 / 7;              /* 704 x 448: a 22 x 13 cell view plus the status bar */
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid #808080;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  background: #000;
}
#game {
  image-rendering: pixelated;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  cursor: pointer;
  touch-action: none;
}

/* The status bar is drawn in the canvas; these buttons sit at its right-hand
   end, which the bar leaves empty for them. Square and flat, like the rest. */
.controls {
  position: absolute; top: 1.2%; right: 1%; z-index: 5;
  display: flex; gap: 6px; align-items: center;
}
.ctrl-btn {
  height: 32px; border-radius: 0;
  border: 2px solid #808080; background: #000;
  color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  transition: filter 0.15s ease, transform 0.06s ease;
}
.ctrl-btn:hover { border-color: var(--accent); color: var(--accent); }
.ctrl-btn:active { transform: scale(0.94); }
.back-btn { padding: 0 10px; }
.mute-btn { width: 32px; font-size: 15px; }
/* Restart costs a life, so it is deliberately not the biggest thing on screen —
   but it has to be reachable on a phone, where there is no Esc key. */
.restart-btn { width: 32px; font-size: 18px; padding-bottom: 2px; }
@media (max-width: 620px) {
  .ctrl-btn { height: 26px; font-size: 11px; }
  .mute-btn, .restart-btn { width: 26px; }
  .back-btn { padding: 0 6px; }
}
.restart-btn:hover { color: var(--warn); }
.mute-btn.is-muted { opacity: 0.6; }

/* Overlay */
.overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 7, 12, 0.68); backdrop-filter: blur(3px);
  transition: opacity 0.2s ease;
}
.overlay.hidden { opacity: 0; pointer-events: none; }

/* On a phone the game-wrap is only a couple of hundred pixels tall (it holds a
   landscape aspect ratio), and the start panel is more than twice that — inside
   `overflow: hidden` the Play button was being silently clipped off the bottom
   of the screen. Below 760px the overlay leaves the wrap and covers the
   viewport instead, and scrolls if it still does not fit. */
@media (max-width: 760px) {
  .overlay {
    position: fixed; z-index: 20;
    align-items: flex-start;
    overflow-y: auto;
    padding: 14px 0;
  }
  .overlay .panel { width: min(480px, 92%); margin: auto; padding: 20px 18px; }
  .overlay .msg { font-size: 13px; line-height: 1.55; }
  .overlay .logo { font-size: clamp(26px, 8vw, 34px); }
}
.panel {
  width: min(480px, 88%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px; text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}
.logo {
  margin: 0 0 10px; font-size: clamp(30px, 5.4vw, 46px); font-weight: 900;
  letter-spacing: 0.12em; color: var(--accent-2);
  font-family: "Courier New", ui-monospace, monospace;
  text-shadow: 4px 4px 0 #0000ff;
}
.logo span { color: var(--accent); text-shadow: 4px 4px 0 #ff0000; }

/* Start-cave picker — only shown once there is more than one cave to pick. */
.start-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; }
.start-label { color: var(--muted); font-size: 13px; margin-right: 4px; }
.start-row button {
  width: 36px; height: 34px; border-radius: 0; cursor: pointer;
  border: 2px solid #808080; background: #000; color: var(--ink);
  font: 900 17px "Courier New", ui-monospace, monospace;
}
.start-row button:disabled { opacity: 0.3; cursor: default; }
.start-row button.is-on { border-color: var(--accent); color: #000; background: var(--accent); }
.msg { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 20px; }
.msg b { color: var(--ink); }
.kbd {
  display: inline-block; min-width: 18px; padding: 1px 6px; margin: 0 1px;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.04); color: var(--ink);
  font: 600 12px/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.result { margin-bottom: 16px; }
.big-score { font-size: 56px; font-weight: 900; color: var(--accent); line-height: 1; font-family: "Courier New", ui-monospace, monospace; text-shadow: 4px 4px 0 #ff0000; }
.result-line { color: var(--muted); font-size: 14px; margin-top: 6px; }
.btn {
  border: none; border-radius: 12px; padding: 13px 18px;
  font-size: 16px; font-weight: 700; cursor: pointer;
  transition: transform 0.06s ease, filter 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  width: 100%;
  border-radius: 0;
  background: var(--accent);
  color: #000;
  font-family: "Courier New", ui-monospace, monospace; font-weight: 900; letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 #ff0000;
}
.btn--primary:hover { filter: brightness(1.06); }
.hint { margin-top: 12px; color: var(--muted); font-size: 13px; }
.hidden { display: none !important; }

.btn--ghost { background: rgba(255, 255, 255, 0.08); color: var(--ink); white-space: nowrap; }
.name-row { display: flex; gap: 8px; margin-bottom: 16px; }
#name-input {
  flex: 1; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line);
  border-radius: 10px; color: var(--ink); padding: 10px 12px; font-size: 15px; outline: none;
}
#name-input:focus { border-color: var(--accent); }

/* Leaderboard */
.leaderboard {
  margin-top: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.leaderboard h2 {
  margin: 0 0 12px; font-size: 16px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
#leaderboard-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
#leaderboard-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
#leaderboard-list li:last-child { border-bottom: none; }
#leaderboard-list li:not(.lb-empty)::before {
  counter-increment: rank; content: counter(rank);
  width: 26px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.lb-name { flex: 1; margin: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.lb-empty { color: var(--muted); justify-content: center !important; }
li.is-you { color: var(--accent); }

/* --- About / how-to-play (crawlable page content) -------------------------- */
.game-info {
  max-width: 900px; margin: 26px auto 10px; padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}
.game-info h2 { margin: 26px 0 10px; font-size: 20px; color: var(--ink); }
.game-info h3 { margin: 20px 0 8px; font-size: 16px; color: var(--ink); }
.game-info p, .game-info li { color: var(--muted); line-height: 1.65; font-size: 14.5px; }
.game-info ul { padding-left: 20px; margin: 8px 0; }
.game-info a { color: var(--accent); text-decoration: none; }
.game-info a:hover { text-decoration: underline; }
.game-info kbd {
  display: inline-block; padding: 1px 6px; margin: 0 1px;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.05); color: var(--ink);
  font: 600 12px/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.game-info .foot-link { margin-top: 16px; }

/* --- Review widget ---------------------------------------------------------- */
.review-form { display: flex; flex-direction: column; gap: 10px; max-width: 520px; margin-top: 6px; }
.review-stars { display: flex; gap: 4px; }
.review-stars button {
  background: none; border: none; cursor: pointer; padding: 2px;
  font-size: 26px; line-height: 1; color: rgba(255, 255, 255, 0.25);
  transition: color 0.12s, transform 0.12s;
}
.review-stars button:hover { transform: scale(1.15); }
.review-stars button.on { color: #ffc83c; }
.review-form input, .review-form textarea {
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px; padding: 9px 12px; color: var(--ink); font: inherit; font-size: 14px;
}
.review-form textarea { resize: vertical; }
.review-send {
  align-self: flex-start; cursor: pointer; border: none; border-radius: 8px;
  padding: 9px 18px; font: inherit; font-size: 14px; font-weight: 700;
  background: var(--accent); color: #140f04;
}
.review-send:disabled { opacity: 0.6; cursor: default; }
.review-msg { min-height: 1em; font-size: 13.5px; color: var(--muted); }

/* --- Public reviews display ------------------------------------------------- */
.review-stars span { color: rgba(255, 255, 255, 0.25); font-size: 16px; line-height: 1; }
.review-stars span.on { color: #ffc83c; }
.review-stars.big span { font-size: 20px; }
.reviews-summary { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; }
.reviews-summary .rv-avg { font-size: 28px; font-weight: 800; color: var(--ink); }
.reviews-summary .rv-count { color: var(--muted); font-size: 13.5px; }
.reviews-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.reviews-list li { border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; padding: 10px 14px; background: rgba(255, 255, 255, 0.02); }
.reviews-list .rv-row { display: flex; align-items: center; gap: 8px; }
.reviews-list .rv-row b { font-size: 14px; }
.reviews-list .rv-when { color: var(--muted); font-size: 12px; margin-left: auto; }
.reviews-list p { margin: 6px 0 0; line-height: 1.55; font-size: 14px; color: var(--ink); white-space: pre-wrap; }

/* Gate 2: the written section's subsections are h2 now, so they need room
   above them — except the first, which follows the section's own top margin. */
.game-info h2:first-of-type { margin-top: 0; }