/* A late-90s desktop media player: gunmetal panels, a green LCD, real keys. */
:root {
  --desk: #101015;
  --panel-hi: #55587a;
  --panel: #3a3c58;
  --panel-lo: #25263a;
  --edge-hi: #8a8eb4;
  --edge-lo: #08080c;
  --lcd: #020a02;
  --lcd-text: #2cf52c;
  --lcd-dim: #0f6a16;
  --key-hi: #dfe2f0;
  --key: #a9adc6;
  --key-lo: #6f7391;
  --ink: #14152a;
  --gold: #d9c27a;
  --amber: #ffb000;
  --label: #b4b8d6;
  --mono: "Lucida Console", "DejaVu Sans Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--desk);
  color: var(--label);
  font: 15px/1.45 Tahoma, Verdana, "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 440px;
  margin: 0 auto;
  padding: 14px 10px calc(24px + env(safe-area-inset-bottom));
}

button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ---------- windows ---------- */
.win {
  margin-bottom: 8px;
  padding: 3px;
  background: linear-gradient(160deg, var(--panel-hi), var(--panel) 30%, var(--panel-lo));
  border: 1px solid var(--edge-lo);
  box-shadow: inset 1px 1px 0 var(--edge-hi), inset -1px -1px 0 #14141a, 0 6px 18px #000a;
}
.titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  padding: 0 6px;
}
/* The ridged grab-strips either side of the title. */
.titlebar::before, .titlebar::after {
  content: "";
  flex: 1;
  height: 8px;
  background: repeating-linear-gradient(to bottom, var(--gold) 0 1px, #5d5330 1px 2px, transparent 2px 4px);
}
.titlebar h1, .titlebar h2 {
  margin: 0;
  font: bold 11px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.body { padding: 8px; }

/* ---------- display ---------- */
.lcd {
  padding: 10px 12px 8px;
  background: var(--lcd);
  background-image: repeating-linear-gradient(to bottom, #ffffff07 0 1px, transparent 1px 3px);
  border: 2px solid;
  border-color: var(--edge-lo) var(--edge-hi) var(--edge-hi) var(--edge-lo);
  font-family: var(--mono);
  color: var(--lcd-text);
  text-shadow: 0 0 6px #2cf52c88;
}
.lcd-top { display: flex; align-items: flex-end; gap: 10px; height: 44px; }
.state { font-size: 14px; padding-bottom: 6px; width: 16px; }
.time { font-size: 40px; line-height: 40px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.vis { flex: 1; display: flex; align-items: flex-end; justify-content: flex-end; gap: 2px; height: 100%; }
.vis i {
  width: 7px;
  height: 100%;
  transform: scaleY(0.06);
  transform-origin: bottom;
  background: linear-gradient(to top, var(--lcd-text) 0 55%, #e6e62a 55% 82%, #ff5a2a 82%);
}
/* Bars follow the real signal; this canned bounce is only the fallback. */
.fake.playing .vis i { animation: bounce 0.9s ease-in-out infinite alternate; }
.fake.playing .vis i:nth-child(3n) { animation-duration: 0.55s; }
.fake.playing .vis i:nth-child(3n+1) { animation-duration: 0.75s; animation-delay: -0.3s; }
.fake.playing .vis i:nth-child(4n+2) { animation-duration: 0.42s; animation-delay: -0.2s; }
@keyframes bounce {
  0% { transform: scaleY(0.12); }
  40% { transform: scaleY(0.85); }
  70% { transform: scaleY(0.35); }
  100% { transform: scaleY(0.65); }
}
@media (prefers-reduced-motion: reduce) {
  .fake.playing .vis i { animation: none; transform: scaleY(0.4); }
}
.status {
  min-height: 2.9em;
  margin: 8px 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lcd-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--lcd-dim);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--lcd-dim);
  text-shadow: none;
}

.seek {
  height: 10px;
  margin: 8px 0 10px;
  background: #0a0a0f;
  border: 1px solid;
  border-color: var(--edge-lo) var(--edge-hi) var(--edge-hi) var(--edge-lo);
}
#bar {
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(to right, var(--amber) 0 3px, #7a5200 3px 5px);
}

/* ---------- keys ---------- */
.key {
  position: relative;
  border: 1px solid var(--edge-lo);
  border-radius: 3px;
  background: linear-gradient(to bottom, var(--key-hi), var(--key) 45%, var(--key-lo));
  color: var(--ink);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #5c5c69, 0 4px 0 #0b0b10, 0 5px 6px #0009;
  transition: transform 0.04s, box-shadow 0.04s;
}
.key:active:not(:disabled), .key[aria-pressed="true"] {
  transform: translateY(3px);
  background: linear-gradient(to bottom, var(--key-lo), var(--key) 70%, var(--key-hi));
  box-shadow: inset 2px 2px 3px #0008, 0 1px 0 #0b0b10;
}
.key:focus-visible, #vol:focus-visible, #guess:focus-visible, #year:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.key:disabled { cursor: default; color: #6f6f7c; }
.key:disabled svg { fill: #7d7d8a; }
.key svg { display: block; width: 100%; height: 100%; fill: var(--ink); }

.controls { display: flex; justify-content: center; }
.keys { display: flex; gap: 12px; }
.keycap { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.keycap span { font: 9px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }
.key.big { width: 68px; height: 48px; padding: 9px 18px; }
/* "Another clip" lights up when a clip has finished. */
.key.offer {
  background: linear-gradient(to bottom, #ffe2a0, var(--amber) 50%, #b97400);
  animation: pulse 1s ease-in-out infinite alternate;
}
@keyframes pulse { to { box-shadow: inset 1px 1px 0 #fff, 0 4px 0 #0b0b10, 0 0 16px var(--amber); } }

.volume { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.volume span { font: 9px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }
#vol {
  flex: 1;
  height: 28px;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
#vol::-webkit-slider-runnable-track {
  height: 8px;
  background: var(--level, #2a9d2a);
  border: 1px solid;
  border-color: var(--edge-lo) var(--edge-hi) var(--edge-hi) var(--edge-lo);
  border-radius: 4px;
}
#vol::-moz-range-track {
  height: 8px;
  background: var(--level, #2a9d2a);
  border: 1px solid var(--edge-lo);
  border-radius: 4px;
}
#vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 20px;
  margin-top: -7px;
  border: 1px solid var(--edge-lo);
  border-radius: 3px;
  background:
    linear-gradient(to right, #0000 0 12px, #5c5f7a 12px 13px, #fff 13px 14px, #0000 14px 16px, #5c5f7a 16px 17px, #fff 17px 18px, #0000 18px),
    linear-gradient(to bottom, var(--key-hi), var(--key) 45%, var(--key-lo));
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #5c5c69, 0 2px 3px #000a;
}
#vol::-moz-range-thumb {
  width: 30px;
  height: 20px;
  border: 1px solid var(--edge-lo);
  border-radius: 3px;
  background: linear-gradient(to bottom, var(--key-hi), var(--key) 45%, var(--key-lo));
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #5c5c69, 0 2px 3px #000a;
}

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; padding-bottom: 4px; }
.modes + .modes { margin-top: 12px; }
.key.latch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 6px;
  font: bold 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.key.latch i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #233a23;
  box-shadow: inset 0 0 0 1px #0008;
}
.key.latch[aria-pressed="true"] i { background: #4dff4d; box-shadow: 0 0 6px #4dff4d, inset 0 0 0 1px #0006; }
.key.latch:disabled { opacity: 0.5; }

.key.small {
  display: block;
  margin: 12px auto 4px;
  padding: 8px 14px;
  font: bold 10px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- guesses ---------- */
.guessbox { position: relative; }
#guess, #year {
  width: 100%;
  padding: 12px;
  border: 2px solid;
  border-color: var(--edge-lo) var(--edge-hi) var(--edge-hi) var(--edge-lo);
  border-radius: 0;
  background: var(--lcd);
  color: var(--lcd-text);
  font: 16px var(--mono);
}
#guess::placeholder, #year::placeholder { color: var(--lcd-dim); }
.yearbox { display: flex; align-items: flex-start; gap: 10px; }
.yearbox input { flex: 1; min-width: 0; }
.yearbox .key {
  padding: 0 18px;
  height: 43px;
  font: bold 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hint { margin: 8px 2px 0; font-size: 12px; line-height: 1.4; }
#suggest {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 240px;
  margin: 0;
  padding: 2px;
  overflow-y: auto;
  list-style: none;
  background: var(--lcd);
  border: 1px solid var(--lcd-text);
  font: 14px var(--mono);
  color: var(--lcd-text);
}
#suggest li { padding: 10px; cursor: pointer; }
#suggest li[aria-selected="true"], #suggest li:hover { background: #1b57ff; color: #fff; }

.guesses {
  min-height: 46px;
  margin: 8px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--lcd);
  border: 2px solid;
  border-color: var(--edge-lo) var(--edge-hi) var(--edge-hi) var(--edge-lo);
  font: 13px var(--mono);
  color: var(--lcd-text);
}
.guesses:empty::before { content: "No guesses yet"; display: block; padding: 9px 6px; color: var(--lcd-dim); }
.guesses li {
  display: grid;
  grid-template-columns: 1fr auto 30px 40px;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
}
.guesses li + li { border-top: 1px dotted var(--lcd-dim); }
.guesses .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guesses .km { font-variant-numeric: tabular-nums; }
.guesses .dir { text-align: center; font-size: 9px; line-height: 1.1; color: var(--lcd-dim); }
.guesses .dir b { display: block; font-size: 16px; color: var(--lcd-text); }
.guesses .pct { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.guesses li.hit { background: #1b57ff; color: #fff; }

/* ---------- answer ---------- */
.result { color: #dcdce6; }
.result h2 { margin: 2px 0; font-size: 1.4rem; color: #fff; }
.result .sub { margin: 0 0 10px; font: 12px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); }
.result img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  margin-bottom: 10px;
  padding: 6px;
  background: var(--lcd);
  border: 2px solid;
  border-color: var(--edge-lo) var(--edge-hi) var(--edge-hi) var(--edge-lo);
}
.result dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 12px 0; }
.result dt { font: 11px/1.8 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); }
.result dd { margin: 0; }
.result h3 { margin: 16px 0 6px; font: bold 11px var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); }
.result ul { margin: 0; padding-left: 18px; }
.result a { color: var(--amber); }
.result .blurb { margin: 3px 0 9px; font-size: 13px; line-height: 1.4; color: #b4b8d6; }
.result .more { margin: 8px 0 0; }
.again {
  display: block;
  width: 100%;
  margin: 18px 0 6px;
  padding: 14px;
  font: bold 12px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- credit: same line and type as the other Rutherford Ecology apps ---------- */
.credit {
  margin: 18px 0 0;
  text-align: center;
  font: 600 11px/1.7 Nunito, system-ui, -apple-system, sans-serif;
  letter-spacing: 0.01em;
  color: rgba(253, 248, 240, 0.52);
}
.credit a { color: rgba(253, 248, 240, 0.78); text-decoration: none; border-bottom: 1px solid rgba(253, 248, 240, 0.3); }
.credit a:hover { color: #fff; border-bottom-color: #fff; }
.credit .sep { opacity: 0.4; margin: 0 5px; }
.credit a.bmc { color: #f5a623; font-weight: 700; white-space: nowrap; border-bottom-color: rgba(245, 166, 35, 0.4); }
.credit a.bmc:hover { color: #ffc45c; border-bottom-color: #ffc45c; }

/* ---------- about ---------- */
dialog.win {
  width: min(420px, calc(100vw - 20px));
  max-height: calc(100vh - 40px);
  margin: auto;
  overflow-y: auto;
  color: #dcdce6;
}
dialog.win::backdrop { background: #000b; }
.about p { margin: 4px 0 0; }
.about a { color: var(--amber); }
.about h3 { margin: 16px 0 6px; font: bold 11px var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); }
.apps {
  margin: 0;
  padding: 2px 4px;
  list-style: none;
  background: var(--lcd);
  border: 2px solid;
  border-color: var(--edge-lo) var(--edge-hi) var(--edge-hi) var(--edge-lo);
}
.apps li + li { border-top: 1px dotted var(--lcd-dim); }
.apps a { display: block; padding: 9px 6px; text-decoration: none; }
.apps a:hover, .apps a:focus-visible { background: #1b57ff; outline: none; }
.apps b { display: block; font: bold 13px var(--mono); color: var(--lcd-text); }
.apps a:hover b, .apps a:focus-visible b { color: #fff; }
.apps span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: #b9c7b9; }

footer { margin-top: 12px; text-align: center; font-size: 11px; color: #6f6f80; }
footer p { margin: 4px 0; }