/* Courtdle (SPEC 11.2): a dark wood courtroom, cream text, brass for what you
   can press, and the case file on paper. One column, mobile first. */
:root {
  --bg: #1b1410;
  --panel: #2a1f18;
  --panel-2: #33261d;
  --cream: #f3e9d2;
  --muted: #a89a86;
  --brass: #d6b04f;
  --brass-dark: #9c7a2c;
  --paper: #f4ecd8;
  --paper-shade: #e2d6b8;
  --ink: #2a2420;
  --red: #c8102e;
  --blue: #1f4fa8;
  --amber: #d98a1c;
  --green: #3f9b5a;
  --judge: #17151c;
  --lex: #5e2a52;
  --court: #4a2e1c;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font: 16px/1.45 var(--sans);
}
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

.app { max-width: 560px; margin: 0 auto; padding: 0 16px 24px; min-height: 100dvh; display: flex; flex-direction: column; }

/* ---- header ---------------------------------------------------------- */
.topbar { display: flex; align-items: center; gap: 4px; padding: 10px 0 8px; }
.wordmark { margin: 0; line-height: 0; }
.wordmark canvas { image-rendering: pixelated; height: 26px; }
.grow { flex: 1; }
.icon {
  min-width: 40px; height: 40px; border-radius: 8px; border: 1px solid #4a3a2e;
  background: var(--panel); cursor: pointer; font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon:hover { border-color: var(--brass-dark); }
.icon[aria-pressed='false'] { color: var(--muted); }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.bars i { display: block; width: 4px; background: currentColor; }
.bars i:nth-child(1) { height: 6px; } .bars i:nth-child(2) { height: 14px; } .bars i:nth-child(3) { height: 10px; }

/* ---- the scene and the dialogue box ------------------------------------ */
.col { flex: 1; }
.stage {
  position: relative; display: flex; justify-content: center; align-items: center;
  background: #0f0b09; border: 2px solid #3b2a1f; border-radius: 6px; overflow: hidden;
  aspect-ratio: 16 / 9; max-height: 42vh; margin: 0 auto; cursor: pointer;
}
.stage canvas { image-rendering: pixelated; display: block; max-width: 100%; max-height: 100%; }
.dialogue {
  position: relative; margin-top: 8px; min-height: 4.6em; padding: 10px 14px 12px;
  background: var(--panel); border: 2px solid #4a3a2e; border-radius: 6px; cursor: pointer;
  font: 16px/1.4 var(--mono);
}
.dialogue .tag {
  position: absolute; top: -11px; left: 10px; padding: 1px 8px; border-radius: 4px;
  font: 700 11px/18px var(--sans); letter-spacing: .12em; color: var(--cream); background: var(--court);
}
.dialogue[data-speaker='judge'] .tag { background: var(--judge); border: 1px solid #45414f; }
.dialogue[data-speaker='lex'] .tag { background: var(--lex); }
.dialogue .line { margin: 6px 0 0; min-height: 2.8em; white-space: pre-wrap; }
.dialogue .more { position: absolute; right: 10px; bottom: 6px; color: var(--brass); animation: bob 1s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(2px); } }

/* ---- views ---------------------------------------------------------- */
.view { padding-top: 14px; }
.primary {
  display: inline-block; min-height: 48px; padding: 10px 22px; border-radius: 8px; cursor: pointer;
  background: var(--brass); color: #20160e; border: 0; font-weight: 700;
}
.primary:disabled { opacity: .5; cursor: default; }
.primary.big { min-width: 70%; font-size: 18px; display: block; margin: 12px auto; }
.secondary {
  min-height: 44px; padding: 8px 16px; border-radius: 8px; cursor: pointer;
  background: var(--panel); border: 1px solid #5a4636;
}
.dim { color: var(--muted); }
.warn { color: #ffb3a7; }
.title-line { text-align: center; color: var(--muted); margin: 6px 0 0; }
.docket { text-align: center; font-size: 20px; margin: 4px 0 0; }
.countdown { text-align: center; color: var(--muted); }
.howto { padding-left: 1.4em; }
.howto li { margin: 6px 0; }

/* ---- the case file and the choices ------------------------------------ */
.case-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 14px; }
.pips { display: inline-flex; gap: 6px; }
.pip { min-width: 26px; height: 26px; border-radius: 6px; border: 1px solid #5a4636; background: var(--panel); font-size: 14px; cursor: default; padding: 0; }
.pip.done { cursor: pointer; }
.file {
  margin-top: 8px; padding: 14px 16px 16px; background: var(--paper); color: var(--ink);
  border-radius: 4px; box-shadow: 0 2px 0 var(--paper-shade), 0 6px 18px rgba(0,0,0,.35);
}
.file-title { margin: 0 0 8px; font: 700 15px/1.3 var(--mono); letter-spacing: .02em; text-transform: uppercase; }
.facts { margin: 0; font: 17px/1.45 var(--sans); }
.choices { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.choice-line { display: flex; gap: 6px; }
.choice {
  flex: 1; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px;
  text-align: left; border-radius: 8px; cursor: pointer; background: var(--panel-2); border: 1px solid #5a4636;
  font-size: 17px;
}
.choice:hover:not(:disabled) { border-color: var(--brass); }
.choice:disabled { cursor: default; }
.choice .key { min-width: 22px; height: 22px; border-radius: 4px; background: #4a3a2e; color: var(--muted); font: 12px/22px var(--mono); text-align: center; }
.choice-row.picked .choice { border-color: var(--brass); }
.choice-row.struck .choice { opacity: .55; text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.info { width: 48px; border-radius: 8px; background: var(--panel); border: 1px solid #5a4636; cursor: pointer; font: italic 700 17px/1 Georgia, serif; }
.note { margin: 4px 4px 0 6px; font-style: italic; color: #e7c9a8; font-size: 15px; }
.note b { font-style: normal; font: 700 11px/1 var(--sans); letter-spacing: .1em; color: var(--muted); }
.drawer { margin: 6px 0 2px; padding: 10px 12px; background: var(--panel); border-left: 3px solid var(--brass-dark); border-radius: 4px; font-size: 15px; }

/* ---- Charge Book entries (drawers and the panel) ----------------------- */
.entry h3 { margin: 0 0 2px; font-size: 17px; }
.entry .aka { color: var(--muted); font-size: 14px; margin: 0; }
.entry .summary { margin: 4px 0; }
.entry ol { margin: 6px 0; padding-left: 1.4em; }
.entry li { margin: 3px 0; }
.entry .absent { color: var(--muted); font-size: 13px; }
.entry ul.notes { margin: 6px 0 0; padding-left: 1.2em; color: #d8cbb2; font-size: 14px; }
.book-toc { columns: 2; padding-left: 1.2em; }
.book-chapter { margin-top: 18px; border-top: 1px solid #4a3a2e; padding-top: 8px; }
.book-chapter > p { color: var(--muted); margin-top: 0; }
.book .entry { margin: 14px 0; scroll-margin-top: 12px; }
.book .entry.flash { outline: 2px solid var(--brass); outline-offset: 6px; border-radius: 4px; }

/* ---- the verdict card ---------------------------------------------------- */
.verdict h2 { margin: 6px 0; font-size: 20px; }
.verdict h3 { margin: 16px 0 6px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.verdict-charge { font-size: 18px; margin: 4px 0; }
.why { margin: 6px 0; }
.elements { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.elements li { display: grid; grid-template-columns: 22px 1fr; gap: 2px 6px; background: var(--panel); border-radius: 6px; padding: 8px 10px; }
.elements .tick { color: var(--green); font-weight: 700; }
.elements .quotes { grid-column: 2; font-style: italic; color: #e7c9a8; font-size: 15px; }
.facts.marked { background: var(--paper); color: var(--ink); padding: 12px 14px; border-radius: 4px; }
.facts.marked mark { background: #f2d98a; color: var(--ink); padding: 0 1px; }
.your-picks { padding-left: 1.2em; margin: 0; }
.your-picks li { margin: 4px 0; }
.your-picks .right strong { color: #9fe0b0; }
.your-picks .wrong strong { color: #ffb3a7; }
.row { display: flex; gap: 8px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* ---- results ------------------------------------------------------------ */
.headline { text-align: center; margin: 8px 0 0; font-size: 22px; }
.score { text-align: center; font: 700 40px/1.1 var(--mono); color: var(--brass); margin: 4px 0; }
.case-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.case-list button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; min-height: 48px; padding: 8px 12px; border-radius: 8px; background: var(--panel); border: 1px solid #4a3a2e; cursor: pointer; }
.case-list .answer { margin-left: auto; color: var(--muted); font-size: 14px; text-align: right; }
.community { background: var(--panel); border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
.community h3 { margin: 4px 0 8px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hist { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; align-items: end; height: 80px; margin: 6px 0 2px; }
.hist .bar { background: #5a4636; border-radius: 3px 3px 0 0; min-height: 2px; }
.hist .bar.you { background: var(--brass); }
.hist-labels { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font: 12px var(--mono); color: var(--muted); }
.charged { margin: 10px 0 4px; }
.charged p { margin: 8px 0 4px; font-size: 14px; color: var(--muted); }
.pick-bar { display: grid; grid-template-columns: 1fr 44px; gap: 6px; align-items: center; font-size: 14px; margin: 3px 0; }
.pick-bar .track { position: relative; background: #3b2c22; border-radius: 4px; overflow: hidden; min-height: 26px; }
.pick-bar .fill { position: absolute; inset: 0 auto 0 0; background: #6e4528; }
.pick-bar.answer .fill { background: #3f7a4f; }
.pick-bar .name { position: relative; padding: 4px 8px; display: block; }
.pick-bar .pct { text-align: right; font-family: var(--mono); }
.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; text-align: center; margin: 8px 0; }
.stat-grid b { display: block; font: 700 22px/1.2 var(--mono); }
.stat-grid span { font-size: 12px; color: var(--muted); }
.share-status { text-align: center; color: var(--muted); min-height: 1.4em; margin: 4px 0; }

/* ---- panels ------------------------------------------------------------- */
.panel { position: fixed; inset: 0; background: rgba(12, 8, 6, .82); z-index: 20; overflow-y: auto; }
.panel-inner { max-width: 560px; margin: 0 auto; min-height: 100%; background: var(--bg); padding: 8px 16px 32px; border-left: 1px solid #3b2a1f; border-right: 1px solid #3b2a1f; }
.panel-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; background: var(--bg); padding: 8px 0; z-index: 1; }
.panel-head h2 { margin: 0; font-size: 20px; }
.settings fieldset { border: 1px solid #4a3a2e; border-radius: 8px; margin: 12px 0; padding: 8px 12px 12px; }
.settings legend { padding: 0 6px; color: var(--muted); }
.settings label { display: inline-flex; align-items: center; gap: 6px; margin: 6px 14px 0 0; min-height: 32px; }
.scoring { width: 100%; border-collapse: collapse; margin: 8px 0; }
.scoring td { padding: 6px 4px; border-bottom: 1px solid #3b2a1f; }

/* ---- footer ------------------------------------------------------------- */
.foot { margin-top: 28px; color: var(--muted); font-size: 13px; text-align: center; }
.foot p { margin: 6px 0; }
.noscript { padding: 20px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .dialogue .more { animation: none; }
}

/* The confetti canvas (fx.js). */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 30; image-rendering: pixelated; width: 100vw; height: 100vh; }

/* Phones: five header buttons and the wordmark have to share 343 px. */
@media (max-width: 420px) {
  .topbar { gap: 3px; }
  .icon { min-width: 36px; height: 36px; font-size: 16px; }
  .wordmark canvas { height: 21px !important; }
}

a { color: var(--brass); }
a:hover { color: #f2d98a; }