/**
 * Capitol Grid — newspaper-style native WP design.
 * Matches the live site: white card, plain header cells (no dark fill),
 * unified navy grid lines, "NEW EDITION" pill button.
 */

:root {
	--cap-navy: #002855;
	--cap-red: #a42a38;
	--cap-line: #1f2937;
	--cap-cell: #ffffff;
	--cap-cell-filled: #f0fdf4;
	--cap-cell-hover: #f3f4f6;
}

/* Full-bleed wrapper bg: React app/games/page.tsx outer div is `min-h-screen
 * flex flex-col bg-[#f9fafb]` — page-level light gray, edge-to-edge. Lift the
 * WP containers so the bg spans the viewport. */
.tdn-container:has(.tdn-capitol),
.tdn-page__content:has(.tdn-capitol) {
	max-width: 100% !important;
	padding: 0 !important;
	background: #f9fafb;
}
.tdn-page:has(.tdn-capitol) { padding-block: 0; background: #f9fafb; }

.tdn-capitol {
	max-width: 920px;                                 /* React max-w-4xl ≈ 896px */
	margin: 32px auto;                                /* py-8 = 32px */
	background: #fff;
	padding: 16px;                                    /* p-4 mobile */
	border: 1px solid #e5e7eb;                        /* border-gray-200 */
	font-family: var(--tdn-sans, system-ui, sans-serif);
	color: var(--cap-line);
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);         /* shadow-sm */
}
@media ( min-width: 768px ) {
	.tdn-capitol { padding: 48px; }                   /* md:p-12 */
}

/* ---------- newspaper header ---------- */
/* React: text-center border-b-4 border-double border-[#1f2937] pb-6 mb-8. */
.tdn-capitol__head {
	text-align: center;
	border-bottom: 4px double #1f2937;                /* React's double border */
	padding-bottom: 24px;                             /* pb-6 */
	margin-bottom: 32px;                              /* mb-8 */
}
/* Title: h1 text-4xl md:text-6xl font-serif font-black text-[#1f2937]
 * mb-4 tracking-tight. Double-class to beat theme.css `h1 { color: navy }`. */
.tdn-page__content .tdn-capitol__title,
.tdn-capitol .tdn-capitol__title {
	font-family: var(--tdn-serif, Georgia, "Times New Roman", serif);
	font-weight: 900;                                 /* font-black */
	font-size: 2.25rem;                               /* text-4xl */
	color: #1f2937 !important;
	margin: 0 0 16px;                                 /* mb-4 */
	letter-spacing: -0.025em;                         /* tracking-tight */
	line-height: 1.1;
}
@media ( min-width: 768px ) {
	.tdn-page__content .tdn-capitol__title,
	.tdn-capitol .tdn-capitol__title {
		font-size: 3.75rem;                           /* md:text-6xl */
	}
}
.tdn-capitol__meta {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--cap-line);
	border-top: 1px solid var(--cap-line);
	border-bottom: 1px solid var(--cap-line);
	padding: 8px 0;
}
.tdn-capitol__meta-l, .tdn-capitol__meta-r { font-weight: 700; }

/* ---------- score bar (SCORE | GUESSES on left, NEW EDITION on right) ---------- */
.tdn-capitol__scorebar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 0 22px;
	border-bottom: 4px double var(--cap-line);
	gap: 24px;
	flex-wrap: wrap;
}
.tdn-capitol__scores {
	display: flex;
	gap: 36px;
}
.tdn-capitol__stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}
.tdn-capitol__stat-label {
	color: var(--cap-navy);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
}
.tdn-capitol__stat-value {
	font-family: var(--tdn-serif, Georgia, serif);
	color: var(--cap-navy);
	font-size: 2.2rem;
	font-weight: 900;
	line-height: 1;
}
.tdn-capitol__stat--guesses .tdn-capitol__stat-value { color: var(--cap-red); }

.tdn-capitol__new-edition {
	background: #fff;
	border: 2px solid var(--cap-navy);
	color: var(--cap-navy);
	padding: 12px 28px;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .7px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s, color .15s;
	font-family: inherit;
}
.tdn-capitol__new-edition:hover {
	background: var(--cap-navy);
	color: #fff;
}

/* ---------- 4×4 grid: corner + 3 col headers + 3 row headers + 9 cells ----------
   "1px gap with navy bg" trick creates clean unified grid lines. */
.tdn-capitol__board-wrap {
	margin-top: 28px;
}
.tdn-capitol__board {
	display: grid;
	/* Row-header column auto-sizes to the longest state name; data columns share remaining space. */
	grid-template-columns: minmax(160px, auto) repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--cap-navy);
	padding: 1px;
	border: 1px solid var(--cap-navy);
}
.tdn-capitol__loading { padding: 40px; text-align: center; color: #6b7280; background: #fff; grid-column: 1 / -1; }

.tdn-capitol__header,
.tdn-capitol__cell,
.tdn-capitol__corner {
	background: var(--cap-cell);
	min-height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px 16px;
	box-sizing: border-box;
	min-width: 0; /* let flex/grid items shrink instead of overflowing */
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}
.tdn-capitol__corner { /* empty top-left */ }
.tdn-capitol__header {
	font-family: var(--tdn-serif, Georgia, serif);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--cap-line);
	line-height: 1.25;
}
.tdn-capitol__header--row {
	padding: 12px 14px;
}

/* ---------- cells (clickable) ---------- */
.tdn-capitol__cell {
	cursor: pointer;
	transition: background-color .12s;
}
.tdn-capitol__cell:hover:not(.is-filled):not(.is-locked) { background: var(--cap-cell-hover); }
.tdn-capitol__cell:focus-visible { outline: 2px solid var(--cap-red); outline-offset: -4px; }

.tdn-capitol__cell.is-filled {
	cursor: default;
	background: var(--cap-cell-filled);
	flex-direction: column;
	gap: 6px;
}
.tdn-capitol__cell.is-locked { cursor: not-allowed; opacity: .55; }
.tdn-capitol__cell-name { font-weight: 700; color: var(--cap-line); font-size: 1rem; line-height: 1.2; font-family: var(--tdn-serif, Georgia, serif); }
.tdn-capitol__cell-pct { font-size: .76rem; color: #6b7280; font-weight: 600; }

/* ---------- final state ---------- */
.tdn-capitol__final {
	grid-column: 1 / -1;
	background: linear-gradient(180deg, #fffbeb, #fff);
	padding: 18px;
	text-align: center;
}
.tdn-capitol__final-title { font-family: var(--tdn-serif, Georgia, serif); font-size: 1.4rem; margin: 0 0 6px; color: var(--cap-line); font-weight: 900; }
.tdn-capitol__final-score { font-size: 1rem; color: #4b5563; }

/* ---------- picker modal ---------- */
.tdn-capitol__picker {
	position: fixed; top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(15, 23, 42, .55);
	z-index: 100000;
	align-items: flex-start;
	justify-content: center;
	padding: 60px 16px;
}
.tdn-capitol__picker-inner {
	background: #fff; border-radius: 10px; padding: 26px 24px;
	max-width: 560px; width: 100%;
	box-shadow: 0 20px 60px rgba(0,0,0,.25);
	position: relative;
}
.tdn-capitol__picker-close {
	position: absolute; top: 8px; right: 14px; background: transparent; border: 0;
	font-size: 1.8rem; color: #9ca3af; cursor: pointer; line-height: 1;
}
.tdn-capitol__picker-close:hover { color: var(--cap-line); }
.tdn-capitol__picker-prompt {
	margin: 0 0 14px;
	font-weight: 700;
	color: var(--cap-line);
	font-size: 1.05rem;
}
.tdn-capitol__picker-prompt span { color: var(--cap-red); }
.tdn-capitol__search {
	width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 1rem;
	border: 2px solid #e5e7eb; border-radius: 8px; outline: none;
}
.tdn-capitol__search:focus { border-color: var(--cap-navy); }
.tdn-capitol__picker-hint { margin: 8px 0 0; font-size: .8rem; color: #6b7280; }
.tdn-capitol__results { list-style: none; margin: 14px 0 0; padding: 0; max-height: 280px; overflow-y: auto; border-top: 1px solid #f1f5f9; }
.tdn-capitol__results li { padding: 12px 12px; cursor: pointer; border-bottom: 1px solid #f1f5f9; font-size: .95rem; }
.tdn-capitol__results li:hover { background: #eef2ff; }
.tdn-capitol__results li small { color: #6b7280; margin-left: 8px; font-weight: 500; }
.tdn-capitol__results-empty,
.tdn-capitol__results-error { padding: 14px; color: #6b7280; font-style: italic; }
.tdn-capitol__results-error { color: var(--cap-red); font-weight: 600; }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
	.tdn-capitol { padding: 18px; }
	.tdn-capitol__board { grid-template-columns: minmax(95px, auto) repeat(3, minmax(0, 1fr)); }
	.tdn-capitol__header, .tdn-capitol__cell, .tdn-capitol__corner { min-height: 80px; padding: 6px 8px; }
	.tdn-capitol__header { font-size: .82rem; line-height: 1.15; }
	.tdn-capitol__cell-name { font-size: .85rem; }
	.tdn-capitol__scorebar { gap: 12px; }
	.tdn-capitol__stat-value { font-size: 1.6rem; }
	.tdn-capitol__new-edition { padding: 8px 18px; font-size: .72rem; }
}