/* ---------- Theme Variables ---------- */
:root {
  /* Light palette */
  --bg: #f3f4f6;
  --text: #1f2937;
  --monitor: #222;
  --border: #555;
  --person: #4a90e2;
  --face: #f5f7fa;
  --stand: #555;
  --base: #777;
  --hint: #6b7280;
  transition: background 0.4s ease, color 0.4s ease;
}

html.dark {
  /* Dark palette overrides */
  --bg: #0d1117;
  --text: #f0f3f5;
  --monitor: #0d1117;
  --border: #8b949e;
  --person: #238636;
  --face: #c9d1d9;
  --stand: #8b949e;
  --base: #6e7681;
  --hint: #9ca3af;
}

/* ---------- Global Arrangement ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  min-height: 100vh;
}

h1 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: 1.5rem;
}

/* ---------- Monitor & Persons ---------- */
.monitor {
  width: 220px;
  height: 140px;
  background: var(--monitor);
  border: 8px solid var(--border);
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  padding: 4px;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
  outline: none;
}

.monitor:focus-visible {
  box-shadow: 0 0 0 3px var(--person);
}

.person {
  background: var(--person);
  border-radius: 4px;
  position: relative;
}

.person::before {
  content: "";
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  background: var(--face);
  border-radius: 50%;
}

.person::after {
  content: "";
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 18px;
  background: var(--face);
  border-radius: 18px 18px 4px 4px;
}

/* ---------- Stand & Base ---------- */
.stand {
  width: 60px;
  height: 8px;
  background: var(--stand);
  border-radius: 4px;
}

.base {
  width: 120px;
  height: 14px;
  background: var(--base);
  border-radius: 8px 8px 0 0;
}

/* ---------- Clue text ---------- */
.clue {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--hint);
  font-style: italic;
  user-select: none;
}