/* Spot the Charge: poster style statement board. Loaded after ../poster.css. */
body.game-charge .intro{background:var(--tomato)}
body.game-charge .intro .eyebrow{color:var(--cream)}
body.game-charge .intro::after{background:var(--gold)}
body.game-charge .subhead{color:var(--cream)}
.statement-card{background:var(--paper);border:4px solid var(--ink);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.stmt-head{padding:16px 18px 10px;background:var(--sand);border-bottom:4px solid var(--ink)}
.stmt-head h2{margin:4px 0 0;font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(20px,5vw,26px);line-height:1.05}
.stmt-acct{margin:2px 0 0;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}
.stmt-note{margin:0;padding:12px 18px;border-bottom:2px dashed var(--ink);font-size:15px;line-height:1.45;background:var(--paper)}
.stmt-note b{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-right:4px}
.statement{list-style:none;margin:0;padding:0}
.stmt-item+.stmt-item{border-top:2px solid rgba(20,17,15,.2)}
.stmt-line{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:56px;padding:10px 18px;border:0;background:transparent;text-align:left;color:var(--ink);transition:background-color .12s,transform .1s}
.stmt-line:hover:not(:disabled){background:var(--sand)}
.stmt-line:active:not(:disabled){transform:translate(2px,2px)}
.stmt-line:focus-visible{outline:4px solid var(--indigo);outline-offset:-4px}
.sl-date{font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.sl-text{font-weight:700;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.sl-amt{font-family:var(--mono);font-weight:800;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums;position:relative;isolation:isolate}
.stmt-line.cr .sl-amt{color:var(--exact)}
.stmt-line.found{background:var(--gold);cursor:default}
.stmt-line.miss{background:rgba(20,17,15,.06);text-decoration:line-through;text-decoration-color:var(--tomato);text-decoration-thickness:2px}
.stmt-line.revealed{background:#FBD6CE;box-shadow:inset 6px 0 0 var(--tomato)}
.stmt-line:disabled{color:var(--ink);opacity:1}
.slip-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 2px 0}
.slips{display:inline-flex;gap:8px}
.slips .pip{width:22px;height:22px;border-radius:50%;border:3px solid var(--ink);background:var(--paper);box-shadow:2px 2px 0 var(--ink)}
.slips .pip.used{background:var(--tomato)}
.found-count{margin:0;font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.line-note{min-height:1.4em;margin:10px 2px 0;font-weight:700;color:var(--tomato)}
.explanations{display:grid;gap:14px;margin-top:10px}
.explain{padding:14px 16px;border:3px solid var(--ink);border-radius:16px;background:var(--gold);box-shadow:4px 4px 0 var(--ink)}
.explain.missed{background:var(--paper)}
.explain h3{margin:2px 0 6px;font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:20px;line-height:1.05;letter-spacing:-.01em}
.explain p{margin:0 0 8px;font-size:15px;line-height:1.5;color:var(--ink)}
.explain .ex-what{font-weight:700}
.explain .ex-row b{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em}
.takeaway{margin-top:10px;font-weight:700}
.how{margin:0;font-size:15px}
@media(max-width:380px){.stmt-line{grid-template-columns:46px minmax(0,1fr) auto;gap:8px;padding:10px 12px}.stmt-head,.stmt-note{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){.stmt-line{transition:none}}

/* statement lines look alike: same case for every line so the odd one is not given away by its formatting */
.sl-text{text-transform:uppercase;letter-spacing:.01em;font-size:14px}