:root {
  --bg: #f7f4ee;
  --surface: #fffdf9;
  --surface-2: #efe9df;
  --text: #22201c;
  --muted: #6b655c;
  --border: #ddd4c6;
  --accent: #b5371f;
  --accent-contrast: #fff;
  --focus: #2f6fdb;
  --bingo: #f6d97a;
  --free: #e9e2d6;
  --review: #e1eaf5;
  --review-ink: #3b6aa3;
  --radius: 12px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171614;
    --surface: #211f1c;
    --surface-2: #2c2a26;
    --text: #ece8e1;
    --muted: #a39d93;
    --border: #3b3833;
    --accent: #e0573c;
    --focus: #7aa7ff;
    --bingo: #6b5616;
    --free: #2c2a26;
    --review: #22303e;
    --review-ink: #8db4e2;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font);
}

a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 0.9rem; margin: 0.25rem 0 0.75rem; }
.eyebrow { margin: 0; color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ layout */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand { font-size: 1.15rem; font-weight: 700; text-decoration: none; }

#nav { display: flex; flex-wrap: wrap; gap: 0.25rem; }
#nav a { padding: 0.35rem 0.75rem; border-radius: 999px; text-decoration: none; }
#nav a:hover { background: var(--surface-2); }
#nav a[aria-current="page"] { background: var(--surface-2); font-weight: 600; }

main { max-width: 980px; margin: 0 auto; padding: 1rem; }

.stack > * + * { margin-top: 1rem; }

.panel {
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

h1 { margin: 0 0 0.5rem; font-size: 1.5rem; line-height: 1.25; }
h2 { margin: 0 0 0.5rem; font-size: 1.2rem; line-height: 1.3; }

.notice {
  margin-bottom: 1rem;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--focus);
  border-radius: 8px;
}
.notice.is-error { border-left-color: var(--accent); }

/* ------------------------------------------------------------ controls */

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  font: inherit;
  color: var(--text);
  text-decoration: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
button:hover:not(:disabled),
.button:hover:not([aria-disabled="true"]) { filter: brightness(0.96); }
button:disabled,
.button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
label.button:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

.primary { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); }
.danger { color: var(--accent); }

input[type="text"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
textarea { resize: vertical; }

progress { width: 100%; height: 0.5rem; accent-color: var(--accent); }

.field { display: grid; gap: 0.3rem; margin: 0.75rem 0; }
.field > span { font-weight: 600; }

fieldset { margin: 1rem 0; padding: 0; border: 0; }
legend { margin-bottom: 0.3rem; padding: 0; font-weight: 600; }

.choice { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.3rem 0; cursor: pointer; }
.choice input { margin-top: 0.3rem; }
.choice small { display: block; color: var(--muted); }
.choice.is-disabled { color: var(--muted); cursor: not-allowed; }

/* ------------------------------------------------------------ games */

.game-list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }

.game-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.game-item.is-active { border-color: var(--accent); }
.game-item-main { flex: 1 1 22rem; }
.game-item h2 { margin: 0; font-size: 1.1rem; }
.game-item p { margin: 0.2rem 0; }
.game-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.pattern-choices { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.choice.pattern {
  flex-direction: column;
  align-items: center;
  width: 10rem;
  padding: 0.6rem;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.choice.pattern:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.choice.pattern input { margin: 0; }

.pattern-preview { display: grid; grid-template-columns: repeat(5, 1.35rem); gap: 2px; font-size: 0.65rem; }
.pattern-preview span { display: grid; place-items: center; aspect-ratio: 1; background: var(--surface-2); border-radius: 3px; }

.summary { font-weight: 600; }

.rules summary { font-weight: 600; cursor: pointer; }
.rules ul { padding-left: 1.25rem; }

/* ------------------------------------------------------------ card */

.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.card-header h1 { margin: 0; }
.card-header p { margin: 0; }
.card-pager { display: flex; gap: 0.5rem; }

.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.banner p { margin: 0; flex: 1 1 18rem; }
.banner.is-bingo { background: var(--bingo); border-color: transparent; }
.banner.is-quiet { color: var(--muted); }

.card-layout {
  display: grid;
  /* Keep the whole card on screen on shorter laptop displays. */
  grid-template-columns: minmax(0, min(540px, max(320px, calc(100svh - 270px)))) minmax(220px, 1fr);
  align-items: start;
  gap: 1rem;
}

.bingo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  width: 100%;
  padding: 4px;
  background: var(--border);
  border-radius: var(--radius);
}
.bingo-grid.is-locked { background: repeating-linear-gradient(45deg, var(--border) 0 6px, var(--surface-2) 6px 12px); }

.cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  font-family: var(--font-ja);
  font-size: clamp(1.5rem, 8vw, 2.9rem);
  line-height: 1;
  background: var(--surface);
  border: 0;
  border-radius: 6px;
}
.cell:hover { filter: brightness(0.97); }
.cell.is-free { background: var(--free); }
.cell .free-label { font-family: var(--font); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; color: var(--muted); }

/* Review kanji returned from earlier cards to fill a short final card. */
.cell.is-review { background: var(--review); }
.cell.is-pending-review { background: var(--free); box-shadow: inset 0 0 0 2px var(--review-ink); opacity: 0.7; }
.cell.is-pending-review .free-label { color: var(--review-ink); }
.review-badge {
  position: absolute;
  top: 6%;
  right: 8%;
  font-family: var(--font);
  font-size: clamp(0.7rem, 2.5vw, 0.95rem);
  font-weight: 700;
  line-height: 1;
  color: var(--review-ink);
}

.cell.is-bingo { background: var(--bingo); }
.cell.is-selected { box-shadow: inset 0 0 0 3px var(--focus); }

/* A hanko-red circle, like circling the kanji on a paper card. */
.cell.is-marked::after {
  content: "";
  position: absolute;
  inset: 11%;
  border: 3px solid var(--accent);
  border-radius: 50%;
  opacity: 0.85;
  pointer-events: none;
}

.detail { text-align: center; }
.detail-kanji { margin: 0; font-family: var(--font-ja); font-size: 5rem; line-height: 1.15; }
.detail-kanji.is-free { font-family: var(--font); font-size: 2rem; letter-spacing: 0.12em; color: var(--muted); }
.detail-links { margin-top: 0; }
.detail .field { text-align: left; }
.found { margin: 0.5rem 0 0; font-weight: 700; color: var(--accent); }
.review-note { margin: 0.25rem 0; color: var(--review-ink); }

.complete { text-align: center; }

@media (max-width: 760px) {
  .card-layout { grid-template-columns: 1fr; }
  .detail-kanji { font-size: 4rem; }
}

/* ------------------------------------------------------------ overview */

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0.75rem 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.thumb {
  display: block;
  padding: 0.5rem;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.thumb:hover { border-color: var(--muted); }
.thumb.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.thumb.is-locked:not(.is-current) { opacity: 0.6; }

.mini-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; font-family: var(--font-ja); font-size: 0.8rem; line-height: 1; }
.mini-grid span { display: grid; place-items: center; aspect-ratio: 1; background: var(--surface-2); border-radius: 3px; }
.mini-grid .is-free { background: transparent; outline: 1px dashed var(--border); outline-offset: -1px; }
.mini-grid .is-pending-review { background: transparent; outline: 1px dashed var(--review-ink); outline-offset: -1px; }
.mini-grid .is-review { color: var(--review-ink); background: var(--review); }
.mini-grid .is-marked { color: var(--accent-contrast); background: var(--accent); }
.mini-grid .is-bingo { box-shadow: inset 0 0 0 2px var(--bingo); }

.thumb-label { display: block; margin-top: 0.35rem; font-size: 0.85rem; }

.sources { padding-left: 1.25rem; }

/* ------------------------------------------------------------ print */

@media print {
  .site-header, .banner, .detail, .card-pager, .notice { display: none !important; }
  body { color: #000; background: #fff; }
  main { max-width: none; }
  .card-layout { display: block; }
  .bingo-grid { max-width: 16cm; margin: 1rem auto; background: #000; }
  .cell { color: #000; background: #fff !important; }
}