/* The Daily Inquiry. Everything is scoped to .di-game so the site theme and the game don't restyle each other. */
.di-game {
	--di-paper: #EDF1F4;
	--di-card: #FFFFFF;
	--di-ink: #15212C;
	--di-muted: #586776;
	--di-line: #CCD5DE;
	--di-accent: #2348D8;
	--di-accent-ink: #FFFFFF;
	--di-fact: #1C7F55;
	--di-fiction: #C23A2B;
	--di-unknown: #A86A12;
	--di-fact-bg: #E3F3EB;
	--di-fiction-bg: #FBE8E5;
	--di-unknown-bg: #FAF0DD;
	--di-shadow: 0 1px 2px rgba(21, 33, 44, .06), 0 8px 28px rgba(21, 33, 44, .08);
	--di-display: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
	--di-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
	--di-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

	max-width: 680px;
	margin: 0 auto;
	padding: 20px 16px 28px;
	border-radius: 8px;
	background-color: var(--di-paper);
	background-image: radial-gradient(var(--di-line) 1px, transparent 1px);
	background-size: 22px 22px;
	color: var(--di-ink);
	font-family: var(--di-body);
	font-size: 17px;
	line-height: 1.55;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.di-game *, .di-game *::before, .di-game *::after { box-sizing: border-box; }
.di-game p, .di-game h1, .di-game h2, .di-game h3, .di-game ul, .di-game pre { margin: 0; }
.di-game a { color: var(--di-accent); text-decoration: underline; text-underline-offset: 3px; }
.di-game :focus-visible { outline: 3px solid var(--di-accent); outline-offset: 2px; }

/* Masthead */
.di-mast { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.di-brand { display: flex; flex-direction: column; gap: 2px; }
.di-brand small { font-family: var(--di-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--di-muted); }
.di-game .di-brand h2 { font-family: var(--di-display); font-weight: 700; font-size: clamp(30px, 7vw, 42px); line-height: 1; letter-spacing: -.01em; color: var(--di-ink); text-transform: none; }
.di-brand h2 em { font-style: normal; color: var(--di-accent); }
.di-meta { font-family: var(--di-mono); font-size: 12px; color: var(--di-muted); text-align: right; line-height: 1.5; }
.di-badge { display: inline-block; font-family: var(--di-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; background: var(--di-unknown-bg); color: var(--di-unknown); }

/* Progress */
.di-rack { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.di-cell { height: 10px; border-radius: 5px; background: var(--di-card); border: 1px solid var(--di-line); transition: background .3s, border-color .3s; }
.di-cell.is-now { border-color: var(--di-accent); background: #DCE3FA; }
.di-cell.is-right { background: var(--di-fact); border-color: var(--di-fact); }
.di-cell.is-wrong { background: var(--di-fiction); border-color: var(--di-fiction); }

/* Card */
.di-slide { background: var(--di-card); border: 1px solid var(--di-line); border-radius: 6px; box-shadow: var(--di-shadow); position: relative; overflow: hidden; }
.di-slide-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px dashed var(--di-line); font-family: var(--di-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--di-muted); }
.di-subject { color: var(--di-accent); font-weight: 500; }
.di-slide-body { padding: 26px 22px 24px; display: flex; flex-direction: column; gap: 22px; }
.di-game .di-claim { font-family: var(--di-display); font-weight: 500; font-size: clamp(24px, 5.4vw, 31px); line-height: 1.22; text-wrap: balance; color: var(--di-ink); }
.di-prompt { color: var(--di-muted); font-size: 15px; }

/* Buttons: explicit values so theme button styles don't leak in */
.di-game button {
	font-family: var(--di-body); font-size: 16px; font-weight: 700; line-height: 1.3;
	text-transform: none; letter-spacing: normal; text-shadow: none; box-shadow: none;
	margin: 0; min-height: 0; width: auto; cursor: pointer;
}
.di-verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.di-game .di-vbtn {
	padding: 14px 8px; border-radius: 6px; border: 2px solid var(--di-line);
	background: var(--di-card); color: var(--di-ink);
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	transition: border-color .15s, background .15s, transform .1s;
}
.di-vbtn .di-glyph { font-family: var(--di-mono); font-size: 18px; line-height: 1; }
.di-vbtn[data-v="fact"] .di-glyph { color: var(--di-fact); }
.di-vbtn[data-v="fiction"] .di-glyph { color: var(--di-fiction); }
.di-vbtn[data-v="unknown"] .di-glyph { color: var(--di-unknown); }
.di-game .di-vbtn:hover:not(:disabled) { transform: translateY(-1px); }
.di-game .di-vbtn[data-v="fact"]:hover:not(:disabled), .di-game .di-vbtn.is-picked[data-v="fact"] { border-color: var(--di-fact); background: var(--di-fact-bg); }
.di-game .di-vbtn[data-v="fiction"]:hover:not(:disabled), .di-game .di-vbtn.is-picked[data-v="fiction"] { border-color: var(--di-fiction); background: var(--di-fiction-bg); }
.di-game .di-vbtn[data-v="unknown"]:hover:not(:disabled), .di-game .di-vbtn.is-picked[data-v="unknown"] { border-color: var(--di-unknown); background: var(--di-unknown-bg); }
.di-game .di-vbtn:disabled { cursor: default; opacity: .45; }
.di-game .di-vbtn.is-picked { opacity: 1; }
.di-verdicts.is-busy { opacity: .6; pointer-events: none; }

.di-game .di-btn { padding: 12px 20px; border-radius: 6px; border: 2px solid var(--di-accent); background: var(--di-accent); color: var(--di-accent-ink); }
.di-game .di-btn:hover { filter: brightness(1.08); background: var(--di-accent); color: var(--di-accent-ink); }

/* Stamp */
.di-stamp {
	position: absolute; top: 54px; right: 16px; pointer-events: none;
	font-family: var(--di-mono); font-weight: 500; font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
	padding: 6px 12px; border: 3px solid currentColor; border-radius: 4px; background: var(--di-card);
	transform: rotate(-9deg); animation: di-stamp .35s cubic-bezier(.2, 1.6, .4, 1) both;
}
.di-stamp.is-fact { color: var(--di-fact); }
.di-stamp.is-fiction { color: var(--di-fiction); }
.di-stamp.is-unknown { color: var(--di-unknown); }
@keyframes di-stamp { from { transform: rotate(-9deg) scale(1.8); opacity: 0; } to { transform: rotate(-9deg) scale(1); opacity: 1; } }

/* Reveal */
.di-reveal { border-top: 1px solid var(--di-line); padding-top: 20px; display: flex; flex-direction: column; gap: 14px; animation: di-rise .35s ease both; }
@keyframes di-rise { from { transform: translateY(6px); opacity: .3; } to { transform: none; opacity: 1; } }
.di-result { font-family: var(--di-display); font-weight: 700; font-size: 22px; }
.di-result.is-ok { color: var(--di-fact); }
.di-result.is-no { color: var(--di-fiction); }
.di-explain { max-width: 62ch; }
.di-source { font-family: var(--di-mono); font-size: 13px; line-height: 1.5; color: var(--di-muted); background: var(--di-paper); border-radius: 4px; padding: 10px 12px; overflow-wrap: anywhere; }
.di-source b { color: var(--di-ink); font-weight: 500; }
.di-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.di-row.is-end { justify-content: flex-end; }
.di-error { color: var(--di-fiction); font-size: 15px; }

/* Intro */
.di-game .di-intro-title { font-family: var(--di-display); font-weight: 700; font-size: clamp(26px, 6vw, 34px); line-height: 1.15; text-wrap: balance; color: var(--di-ink); text-transform: none; }
.di-game .di-legend { display: grid; gap: 10px; padding: 0; list-style: none; }
.di-legend li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: baseline; margin: 0; }
.di-legend .di-glyph { font-family: var(--di-mono); font-size: 18px; text-align: center; }
.di-legend b { display: block; }
.di-legend .di-d { color: var(--di-muted); font-size: 15px; }
.di-facts { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--di-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--di-muted); }

/* Results */
.di-score { display: flex; align-items: baseline; gap: 10px; }
.di-score .di-n { font-family: var(--di-display); font-weight: 700; font-size: 72px; line-height: .9; }
.di-score .di-of { font-family: var(--di-display); font-size: 28px; color: var(--di-muted); }
.di-rank { font-family: var(--di-display); font-size: 22px; }
.di-game .di-share { font-family: var(--di-mono); font-size: 14px; line-height: 1.5; white-space: pre; background: var(--di-paper); color: var(--di-ink); border: 0; border-radius: 4px; padding: 12px 14px; overflow-x: auto; user-select: all; }
.di-game .di-recap { list-style: none; padding: 0; display: flex; flex-direction: column; }
.di-recap li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; padding: 10px 0; margin: 0; border-top: 1px solid var(--di-line); align-items: baseline; }
.di-recap li:first-child { border-top: 0; }
.di-mark { font-family: var(--di-mono); font-weight: 500; }
.di-mark.is-ok { color: var(--di-fact); }
.di-mark.is-no { color: var(--di-fiction); }
.di-recap .di-txt { min-width: 0; font-size: 15px; }
.di-ans { font-family: var(--di-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.di-ans.is-fact { color: var(--di-fact); }
.di-ans.is-fiction { color: var(--di-fiction); }
.di-ans.is-unknown { color: var(--di-unknown); }
.di-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.di-stat { border: 1px solid var(--di-line); border-radius: 6px; padding: 10px 12px; }
.di-stat .di-k { font-family: var(--di-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--di-muted); }
.di-stat .di-v { font-family: var(--di-display); font-weight: 700; font-size: 26px; font-variant-numeric: tabular-nums; }
.di-label { font-family: var(--di-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--di-muted); }
.di-block { display: flex; flex-direction: column; gap: 10px; }
.di-bars { display: flex; flex-direction: column; gap: 8px; }
.di-bar { display: grid; grid-template-columns: 110px 1fr 44px; gap: 10px; align-items: center; font-size: 14px; }
.di-track { height: 8px; background: var(--di-paper); border-radius: 4px; overflow: hidden; }
.di-fill { height: 100%; background: var(--di-accent); border-radius: 4px; }
.di-pct { font-family: var(--di-mono); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; color: var(--di-muted); }
.di-side { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.di-panel { background: var(--di-card); border: 1px solid var(--di-line); border-radius: 6px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.di-game .di-panel h3 { font-family: var(--di-display); font-weight: 700; font-size: 19px; line-height: 1.25; text-wrap: balance; color: var(--di-ink); text-transform: none; }
.di-panel p { font-size: 15px; color: var(--di-muted); }
.di-soon { font-family: var(--di-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--di-unknown); }
.di-toast { font-family: var(--di-mono); font-size: 13px; color: var(--di-fact); min-height: 1.2em; }
.di-loading, .di-empty { color: var(--di-muted); }

/* Sound toggle */
.di-mast-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.di-game .di-sound {
	display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
	border: 1px solid var(--di-line); background: var(--di-card); color: var(--di-muted);
	font-family: var(--di-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em;
}
.di-game .di-sound[aria-pressed="true"] { color: var(--di-accent); border-color: var(--di-accent); }
.di-game .di-sound:hover { border-color: var(--di-accent); background: var(--di-card); }

/* Links between today and the archive */
.di-game .di-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 700; font-size: 15px; }
.di-game .di-nav a { text-decoration: none; }
.di-game .di-nav a:hover { text-decoration: underline; }
.di-game .di-nav a:only-child { margin-left: auto; }
.di-game .di-nav a[data-go="today"]:only-child { margin-left: 0; }

/* Archive list */
.di-game .di-alist { list-style: none; padding: 0; display: flex; flex-direction: column; }
.di-alist li { margin: 0; border-top: 1px solid var(--di-line); }
.di-alist li:first-child { border-top: 0; }
.di-game .di-arow {
	display: grid; grid-template-columns: 150px 1fr auto; gap: 14px; align-items: center;
	padding: 12px 6px; color: var(--di-ink); text-decoration: none; border-radius: 4px;
}
.di-game .di-arow:hover { background: var(--di-paper); }
.di-adate { display: flex; flex-direction: column; }
.di-adate b { font-weight: 700; }
.di-adate small { font-family: var(--di-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--di-muted); }
.di-asubj { min-width: 0; font-size: 14px; color: var(--di-muted); }
.di-chip {
	font-family: var(--di-mono); font-size: 12px; font-weight: 500; white-space: nowrap;
	padding: 4px 10px; border-radius: 999px; border: 1px solid var(--di-accent); color: var(--di-accent);
}
.di-chip.is-done { border-color: var(--di-fact); background: var(--di-fact-bg); color: var(--di-fact); font-variant-numeric: tabular-nums; }
.di-chip.is-going { border-color: var(--di-unknown); background: var(--di-unknown-bg); color: var(--di-unknown); }
.di-game .di-btn.is-quiet { background: transparent; color: var(--di-accent); }
.di-game .di-btn.is-quiet:hover { background: var(--di-paper); color: var(--di-accent); }
.di-game .di-btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 520px) {
	.di-game .di-arow { grid-template-columns: 1fr auto; gap: 4px 12px; }
	.di-asubj { grid-column: 1; grid-row: 2; }
	.di-chip { grid-column: 2; grid-row: 1 / span 2; }
	.di-game .di-sound span { display: none; }
	.di-game { padding: 16px 12px 22px; border-radius: 0; }
	.di-slide-body { padding: 22px 16px 20px; }
	.di-slide-head { padding: 10px 16px; }
	.di-game .di-vbtn { font-size: 15px; padding: 12px 4px; }
	.di-side { grid-template-columns: 1fr; }
	.di-stamp { top: 46px; font-size: 13px; }
	.di-bar { grid-template-columns: 90px 1fr 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.di-game *, .di-game *::before, .di-game *::after { animation: none !important; transition: none !important; }
}