:root {
  --bg: #111;
  --panel: #1c1c1c;
  --fg: #eee;
  --muted: #888;
  --accent: #f0a020;
  --ok: #4caf50;
  --bad: #e5533d;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.4 system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  padding: .75rem 1rem;
  background: var(--panel);
}
header h1 { font-size: 1.1rem; margin: 0; }
fieldset {
  border: 0; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center;
}
legend { color: var(--muted); font-size: .8rem; padding: 0; margin-right: .5rem; float: left; }
label { cursor: pointer; user-select: none; }
#stats { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
#stats b { color: var(--fg); }

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}
#card {
  width: min(100%, 1100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
#img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background: #000;
  border-radius: 6px;
}
#img.missing {
  min-height: 300px;
  display: grid; place-items: center;
  color: var(--muted);
}
#map { color: var(--muted); }
#answer {
  font-size: 2rem;
  font-weight: 700;
  min-height: 2.6rem;
  letter-spacing: .02em;
}
#answer.hidden { visibility: hidden; }

.actions { display: flex; gap: .5rem; }
button {
  font: inherit;
  padding: .6rem 1.2rem;
  border: 0;
  border-radius: 4px;
  background: #333;
  color: var(--fg);
  cursor: pointer;
}
button:hover { filter: brightness(1.2); }
button.primary { background: var(--accent); color: #000; font-weight: 600; }
button.ok  { background: var(--ok); }
button.bad { background: var(--bad); }
[hidden] { display: none !important; }

#empty { color: var(--muted); text-align: center; }
kbd {
  font-family: monospace; font-size: .8em;
  background: #333; padding: 0 .3em; border-radius: 3px;
}
footer { text-align: center; color: var(--muted); font-size: .8rem; padding: .5rem; }
#video { color: var(--muted); font-size: .85rem; align-self: flex-start; }
#video:hover { color: var(--accent); }
#aka { color: var(--muted); font-size: .95rem; margin-top: -.5rem; }