/* The Daily Case — noir case-file aesthetic. System fonts only (no external calls),
   so it runs offline / behind a strict host with zero dependencies. */

:root {
  --ink: #14110e;          /* near-black brown-ink background */
  --ink-2: #1d1913;
  --paper: #e8dfca;        /* aged parchment */
  --paper-2: #ddd1b4;
  --line: #b6a681;
  --oxblood: #7c1c1c;      /* wax-seal red accent */
  --oxblood-2: #9a2a24;
  --brass: #b8894a;        /* gold/brass detail */
  --good: #2f6b3a;
  --bad: #8a2b2b;
  --shadow: 0 8px 30px rgba(0,0,0,.45);
  --serif: Georgia, 'Times New Roman', serif;
  --type: 'Courier New', ui-monospace, monospace;   /* typewriter */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, #2a241b 0%, var(--ink) 55%) fixed;
  color: var(--paper);
  font-family: var(--serif);
  -webkit-text-size-adjust: 100%;
}

body { max-width: 760px; margin: 0 auto; padding: 0 16px 64px; }

/* ---------- masthead ---------- */
.masthead { text-align: center; padding: 26px 0 10px; }
.masthead .rule { height: 2px; background: linear-gradient(90deg, transparent, var(--brass), transparent); }
.masthead h1 {
  font-family: var(--serif);
  font-weight: 900;
  letter-spacing: .06em;
  font-size: clamp(30px, 8vw, 52px);
  margin: 12px 0 6px;
  color: var(--paper);
  text-shadow: 0 2px 0 #000, 0 0 28px rgba(184,137,74,.25);
}
.masthead .sub {
  font-family: var(--type);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 12px;
  color: var(--brass);
  margin: 0 0 12px;
}

/* ---------- dossier / story ---------- */
.dossier {
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  color: var(--ink);
  border-radius: 4px 4px 3px 3px;
  padding: 22px 20px 20px;
  margin: 18px 0;
  box-shadow: var(--shadow);
  position: relative;
  border: 1px solid #00000022;
}
.dossier::before {   /* manila file tab */
  content: "CASE FILE";
  position: absolute; top: -13px; left: 18px;
  background: var(--oxblood); color: #f4e7c9;
  font-family: var(--type); font-size: 10px; letter-spacing: .2em;
  padding: 3px 12px; border-radius: 3px 3px 0 0;
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.dossier h2 { font-size: clamp(21px, 5vw, 28px); margin: 6px 0 8px; font-style: italic; }
.flavour { margin: 0; color: #4a4132; font-size: 15px; line-height: 1.5; }

/* ---------- panels ---------- */
.panel {
  background: var(--ink-2);
  border: 1px solid #ffffff12;
  border-radius: 5px;
  padding: 16px 16px 18px;
  margin: 16px 0;
}
.panel h3 {
  font-family: var(--type);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 13px;
  color: var(--brass);
  margin: 0 0 12px;
  border-bottom: 1px dashed #ffffff20;
  padding-bottom: 8px;
}
.panel h3 .hint { float: right; text-transform: none; letter-spacing: 0; color: #9c8f74; font-family: var(--serif); font-size: 12px; font-style: italic; }

.clues ol { margin: 0; padding-left: 22px; }
.clues li { margin: 7px 0; line-height: 1.45; font-size: 15.5px; }
.clues li::marker { color: var(--oxblood-2); font-family: var(--type); }

/* ---------- deduction grids ---------- */
.grid-wrap { display: flex; flex-direction: column; gap: 22px; overflow-x: auto; }
.lg { border-collapse: collapse; margin: 0 auto; }
.lg caption {
  font-family: var(--type); font-size: 11px; letter-spacing: .12em;
  color: #a99a7c; text-transform: uppercase; padding-bottom: 6px;
}
.lg th, .lg td { border: 1px solid #ffffff1f; }
.lg th {
  font-weight: 600; font-size: 12px; color: var(--paper);
  padding: 4px 6px; background: #241f18; max-width: 92px;
}
.lg th.col { height: 96px; vertical-align: bottom; padding-bottom: 8px; }
.lg th.col span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; display: inline-block; }
.lg th.row { text-align: right; white-space: nowrap; }
.lg td.cell {
  width: 38px; height: 38px; text-align: center; cursor: pointer;
  font-family: var(--type); font-size: 20px; font-weight: 700;
  background: #100d0a; color: transparent; user-select: none;
  transition: background .08s;
}
.lg td.cell:hover { background: #1c1712; }
.lg td.cell.yes { color: var(--good); background: #16241a; }
.lg td.cell.no  { color: var(--bad);  background: #241514; }
.lg td.corner { background: transparent; border: none; }

/* ---------- verdict ---------- */
#verdict { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.vrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #100d0a; border: 1px solid #ffffff14; border-radius: 4px;
  padding: 8px 10px; font-size: 15px;
}
.vrow .who { font-weight: 700; color: var(--brass); min-width: 120px; }
.vrow .val { color: var(--paper); }
.vrow .val.empty { color: #6d6350; font-style: italic; }
.vrow .arrow { color: #6d6350; }

/* ---------- buttons / result ---------- */
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  font-family: var(--type); text-transform: uppercase; letter-spacing: .1em;
  font-size: 13px; border: none; border-radius: 4px; padding: 12px 18px;
  cursor: pointer; transition: transform .05s, filter .15s;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, var(--oxblood-2), var(--oxblood)); color: #f4e7c9; box-shadow: 0 3px 0 #4c1010; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: #b9ac90; border: 1px solid #ffffff22; }
.result { margin: 14px 0 0; font-size: 15px; min-height: 20px; }
.result.win { color: #7fd393; font-weight: 700; }
.result.miss { color: #e2a06a; }

/* ---------- win overlay ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(8,6,4,.82);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 20;
}
.overlay[hidden] { display: none; }   /* explicit display above would otherwise beat [hidden] */
.seal-card {
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  color: var(--ink); border-radius: 6px; padding: 30px 26px; text-align: center;
  max-width: 380px; width: 100%; box-shadow: var(--shadow); position: relative;
}
.seal {
  width: 92px; height: 92px; margin: -60px auto 10px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--oxblood-2), var(--oxblood) 70%);
  color: #f4e7c9; font-family: var(--type); font-weight: 700; font-size: 15px; letter-spacing: .1em;
  display: flex; align-items: center; justify-content: center; line-height: 1.1;
  box-shadow: inset 0 0 12px #3c0d0d, 0 6px 16px rgba(0,0,0,.4); border: 3px solid #5a1414;
}
.seal-card h2 { font-style: italic; margin: 6px 0; font-size: 26px; }
.seal-card p { color: #4a4132; margin: 6px 0 16px; }
.seal-card .btn { margin: 4px; }
.seal-card .next { font-family: var(--type); font-size: 11px; color: #7a6f58; margin-top: 14px; }

/* ---------- footer ---------- */
.foot { text-align: center; color: #8a7f68; font-size: 13px; margin-top: 26px; line-height: 1.5; }
.foot .soon { display: block; color: var(--brass); font-style: italic; margin-top: 4px; }

@media (max-width: 420px) {
  .lg td.cell { width: 32px; height: 32px; font-size: 17px; }
  .lg th { font-size: 11px; }
  .vrow .who { min-width: 90px; }
}