/* Word Grid — all rules scoped to .wg-game. */
.wg-game {
	--wg-accent: #f5b301;
	--wg-accent-ink: #1b1b1b;
	--wg-ink: #1d1b26;
	--wg-muted: color-mix(in srgb, var(--wg-ink) 58%, transparent);
	--wg-line: color-mix(in srgb, var(--wg-ink) 12%, transparent);
	--wg-surface: #ffffff;
	--wg-tile: #f3ecdc;
	--wg-tile-edge: #d9ccae;
	--wg-select: #2f6fed;
	--wg-good: #1f9d55;
	--wg-bad: #d64545;
	--wg-radius: 18px;

	box-sizing: border-box;
	max-width: 940px;
	margin: 1.5em auto;
	padding: clamp(16px, 3vw, 28px);
	border: 1px solid var(--wg-line);
	border-radius: 22px;
	background: var(--wg-surface);
	color: var(--wg-ink);
	font-family: inherit;
	box-shadow: 0 10px 40px -20px rgba(20, 20, 50, 0.35);
}
.wg-game *,
.wg-game *::before,
.wg-game *::after { box-sizing: border-box; }
.wg-game [hidden] { display: none !important; }

.wg-game .wg-title {
	margin: 0 0 14px;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-align: center;
	color: inherit;
}
.wg-loading,
.wg-error { margin: 0; padding: 40px 0; text-align: center; color: var(--wg-muted); }
.wg-error { color: var(--wg-bad); }

/* ---------- Buttons ---------- */
.wg-game .wg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--wg-line);
	border-radius: 999px;
	background: var(--wg-surface);
	color: var(--wg-ink);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: scale 0.08s ease, background-color 0.15s ease;
}
.wg-game .wg-btn:hover { background: color-mix(in srgb, var(--wg-ink) 6%, var(--wg-surface)); }
/* `scale`, never `transform`: pressing must not move anything. */
.wg-game .wg-btn:active { scale: 0.95; }
.wg-game .wg-btn:focus-visible { outline: 3px solid var(--wg-accent); outline-offset: 2px; }
.wg-game .wg-primary { border-color: var(--wg-ink); background: var(--wg-ink); color: #fff; }
.wg-game .wg-primary:hover { background: color-mix(in srgb, var(--wg-ink) 85%, #fff); }
.wg-game .wg-link {
	min-height: 32px;
	padding: 0 10px;
	border: 0;
	background: transparent;
	color: var(--wg-muted);
	font-size: 0.85rem;
	text-decoration: underline;
}
.wg-game .wg-big { min-height: 52px; padding: 0 34px; font-size: 1.05rem; }

/* ---------- Top bar ---------- */
.wg-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
	font-variant-numeric: tabular-nums;
}
.wg-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wg-muted); }
.wg-top-right { display: inline-flex; align-items: center; gap: 10px; }
.wg-score { font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.wg-label { white-space: nowrap; }
.wg-timer { padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--wg-ink) 7%, transparent); font-weight: 800; font-size: 1.05rem; }
.wg-timer.is-low { background: var(--wg-bad); color: #fff; animation: wg-pulse 1s ease-in-out infinite; }
@keyframes wg-pulse { 50% { opacity: 0.7; } }
.wg-game .wg-help { width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%; font-weight: 800; }

/* ---------- Layout ---------- */
.wg-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(18px, 3vw, 36px);
	align-items: start;
}

/* ---------- Play area ---------- */
.wg-play { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wg-toast {
	position: absolute;
	top: -8px;
	left: 50%;
	z-index: 3;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--wg-ink);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 6px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.wg-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.wg-toast.is-good { background: var(--wg-good); }

.wg-current {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin-top: 22px;
	font-size: clamp(1.6rem, 5vw, 2.1rem);
	font-weight: 800;
	letter-spacing: 0.08em;
}
.wg-current.is-invalid { color: var(--wg-bad); }
.wg-caret { width: 3px; height: 1.05em; margin-left: 4px; background: var(--wg-accent); animation: wg-blink 1s steps(1) infinite; }
@keyframes wg-blink { 50% { opacity: 0; } }

/* The grid */
.wg-grid-wrap {
	position: relative;
	width: min(100%, 380px);
	padding: clamp(8px, 2vw, 12px);
	border-radius: 22px;
	background: color-mix(in srgb, var(--wg-ink) 88%, #3a3350);
	box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35), 0 14px 30px -18px rgba(0, 0, 0, 0.6);
}
.wg-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	gap: clamp(6px, 1.8vw, 10px);
	aspect-ratio: 1;
	/* Swiping across the letters must not scroll the page. */
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.wg-grid.is-rotating { animation: wg-rotate 0.35s ease; }
@keyframes wg-rotate { 0% { opacity: 0.2; } 100% { opacity: 1; } }

.wg-game .wg-tile {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: var(--wg-tile);
	color: var(--wg-ink);
	font-size: clamp(1.5rem, 6.5vw, 2.1rem);
	font-weight: 800;
	box-shadow: inset 0 -4px 0 var(--wg-tile-edge);
	cursor: pointer;
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.12s ease, color 0.12s ease, scale 0.12s ease;
}
.wg-game .wg-tile:hover { background: color-mix(in srgb, var(--wg-tile) 88%, var(--wg-ink)); }
.wg-tile-letter.is-qu { font-size: 0.78em; letter-spacing: -0.02em; }
.wg-game .wg-tile.is-selected { background: var(--wg-select); color: #fff; box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--wg-select) 70%, #000); }
.wg-game .wg-tile.is-last { scale: 1.06; }
.wg-game .wg-tile.is-right { background: var(--wg-good); color: #fff; }
.wg-game .wg-tile.is-wrong { background: var(--wg-bad); color: #fff; }
.wg-showing .wg-tile.is-selected { background: var(--wg-accent); color: var(--wg-accent-ink); }

/* Line joining the chosen letters */
.wg-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}
.wg-lines polyline {
	fill: none;
	stroke: #fff;
	stroke-width: 8;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.42;
}

.wg-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.wg-hint { margin: 0; font-size: 0.85rem; color: var(--wg-muted); text-align: center; }

/* ---------- Found words ---------- */
.wg-found {
	min-height: 100%;
	padding: 18px;
	border-radius: var(--wg-radius);
	background: color-mix(in srgb, var(--wg-ink) 4%, var(--wg-surface));
}
.wg-found-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wg-found-count { font-weight: 800; font-variant-numeric: tabular-nums; }
.wg-groups { display: grid; gap: 14px; }
.wg-group-title {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wg-muted);
	font-variant-numeric: tabular-nums;
}
.wg-group.is-complete .wg-group-tally { color: var(--wg-good); }
.wg-game .wg-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; margin: 0; padding: 0; list-style: none; }
.wg-game .wg-list li { margin: 0; padding: 0; }
.wg-game .wg-word {
	min-height: 30px;
	padding: 0 11px;
	border-radius: 999px;
	font-size: 0.9rem;
	text-transform: capitalize;
}
.wg-game .wg-word.is-new { animation: wg-new 0.6s ease; border-color: var(--wg-good); }
@keyframes wg-new { from { background: var(--wg-good); color: #fff; } }
.wg-game .wg-word.is-missed { border-style: dashed; background: transparent; color: var(--wg-muted); font-weight: 500; }

/* ---------- End panel ---------- */
.wg-end { margin-bottom: 20px; padding: 18px 20px; border-radius: var(--wg-radius); background: var(--wg-ink); color: #fff; text-align: center; }
.wg-end p { margin: 0 0 8px; }
.wg-end-title { font-size: 1.3rem; font-weight: 800; }
.wg-end-note { font-size: 0.9rem; opacity: 0.75; }
.wg-end-actions { margin-top: 12px; }
.wg-game .wg-end .wg-primary { border-color: var(--wg-accent); background: var(--wg-accent); color: var(--wg-accent-ink); }
.wg-over .wg-grid { pointer-events: none; }
.wg-over .wg-controls,
.wg-over .wg-hint,
.wg-over .wg-current { display: none; }

/* ---------- How to play card ---------- */
.wg-reading .wg-layout,
.wg-reading .wg-end { display: none !important; }
.wg-start { display: flex; justify-content: center; padding: 4px 0; }
.wg-start-card {
	width: 100%;
	max-width: 540px;
	padding: clamp(18px, 3vw, 28px);
	border: 1px solid var(--wg-line);
	border-radius: var(--wg-radius);
	background: var(--wg-surface);
	box-shadow: 0 18px 44px -24px rgba(20, 20, 50, 0.45);
	font-size: 0.95rem;
	text-align: center;
}
.wg-game .wg-rules-title { margin: 0 0 12px; font-size: 1.3rem; font-weight: 800; color: inherit; }
.wg-game .wg-rules { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: wg-rule; text-align: left; }
.wg-game .wg-rules li { position: relative; margin: 0 0 10px; padding-left: 38px; font-size: 0.95rem; line-height: 1.5; counter-increment: wg-rule; }
.wg-game .wg-rules li::before {
	content: counter(wg-rule);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wg-accent);
	color: var(--wg-accent-ink);
	font-size: 0.85rem;
	font-weight: 800;
}
.wg-scoring { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--wg-ink) 6%, transparent); font-size: 0.88rem; line-height: 1.5; }
.wg-keys { margin: 0 0 8px; color: var(--wg-muted); font-size: 0.8rem; }
.wg-choose-label { margin: 16px 0 8px; font-weight: 800; }
.wg-time-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.wg-game .wg-time-option[aria-checked="true"] { border-color: var(--wg-accent); background: var(--wg-accent); color: var(--wg-accent-ink); }
.wg-start-time { margin: 12px 0 16px; font-weight: 800; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
	.wg-layout { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.wg-game *,
	.wg-game *::before,
	.wg-game *::after { animation: none !important; transition: none !important; }
}