/* Word Hive — all rules scoped to .wh-game. */
.wh-game {
	--wh-gold: #f7da21;
	--wh-cell: #e6e6e6;
	--wh-ink: #1d1b26;
	--wh-muted: color-mix(in srgb, var(--wh-ink) 58%, transparent);
	--wh-line: color-mix(in srgb, var(--wh-ink) 12%, transparent);
	--wh-surface: #ffffff;
	--wh-good: #1f9d55;
	--wh-bad: #d64545;
	--wh-radius: 18px;

	box-sizing: border-box;
	max-width: 940px;
	margin: 1.5em auto;
	padding: clamp(16px, 3vw, 28px);
	border: 1px solid var(--wh-line);
	border-radius: 22px;
	background: var(--wh-surface);
	color: var(--wh-ink);
	font-family: inherit;
	box-shadow: 0 10px 40px -20px rgba(20, 20, 50, 0.35);
}
.wh-game *,
.wh-game *::before,
.wh-game *::after { box-sizing: border-box; }
.wh-game [hidden] { display: none !important; }
.wh-game .wh-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; }
.wh-loading,
.wh-error { margin: 0; padding: 40px 0; text-align: center; color: var(--wh-muted); }
.wh-error { color: var(--wh-bad); }

/* ---------- Buttons ---------- */
.wh-game .wh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 20px;
	border: 1px solid var(--wh-line);
	border-radius: 999px;
	background: var(--wh-surface);
	color: var(--wh-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;
}
.wh-game .wh-btn:hover { background: color-mix(in srgb, var(--wh-ink) 6%, var(--wh-surface)); }
/* `scale`, never `transform`, so pressing never moves anything that is positioned. */
.wh-game .wh-btn:active { scale: 0.95; }
.wh-game .wh-btn:focus-visible { outline: 3px solid var(--wh-gold); outline-offset: 2px; }
.wh-game .wh-primary { border-color: var(--wh-ink); background: var(--wh-ink); color: #fff; }
.wh-game .wh-primary:hover { background: color-mix(in srgb, var(--wh-ink) 85%, #fff); }
.wh-game .wh-round { width: 46px; padding: 0; font-size: 1.3rem; }
.wh-game .wh-small { min-height: 32px; padding: 0 12px; font-size: 0.85rem; }
.wh-game .wh-small[aria-expanded="true"] { border-color: var(--wh-gold); background: var(--wh-gold); }
.wh-game .wh-link { min-height: 32px; padding: 0 8px; border: 0; background: transparent; color: var(--wh-muted); font-size: 0.85rem; text-decoration: underline; }
.wh-game .wh-big { min-height: 52px; padding: 0 34px; font-size: 1.05rem; }

/* ---------- Top + rank ---------- */
.wh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.wh-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wh-muted); white-space: nowrap; }
.wh-top-right { display: inline-flex; align-items: center; gap: 10px; }
.wh-score {
	min-width: 40px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--wh-gold);
	font-weight: 800;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.wh-game .wh-help { width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%; font-weight: 800; }

.wh-rank { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; margin-bottom: 18px; }
.wh-rank-name { min-width: 96px; font-weight: 800; }
.wh-rank-bar { position: relative; height: 4px; margin: 0 7px; border-radius: 999px; background: var(--wh-line); }
.wh-rank-fill { height: 100%; width: 0; border-radius: inherit; background: var(--wh-gold); transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.wh-rank-dot {
	position: absolute;
	top: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: var(--wh-surface);
	border: 2px solid var(--wh-line);
}
.wh-rank-dot.is-reached { border-color: var(--wh-gold); background: var(--wh-gold); }
.wh-next-rank { grid-column: 2; font-size: 0.8rem; color: var(--wh-muted); text-align: right; }

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

/* ---------- Play area ---------- */
.wh-play { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.wh-toast {
	position: absolute;
	top: -6px;
	left: 50%;
	z-index: 3;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--wh-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;
}
.wh-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.wh-toast.is-good { background: var(--wh-good); }
.wh-toast.is-pangram { background: var(--wh-gold); color: var(--wh-ink); }

.wh-current {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	margin-top: 28px;
	font-size: clamp(1.7rem, 5.5vw, 2.3rem);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.wh-letter.is-center { color: #caa700; }
.wh-letter.is-bad { color: color-mix(in srgb, var(--wh-ink) 30%, transparent); }
.wh-letter.is-new { animation: wh-pop 0.16s ease-out; }
@keyframes wh-pop { from { opacity: 0; translate: 0 6px; } }
.wh-caret { width: 3px; height: 1.1em; margin-left: 4px; background: var(--wh-gold); animation: wh-blink 1s steps(1) infinite; }
@keyframes wh-blink { 50% { opacity: 0; } }
.wh-game .is-shake { animation: wh-shake 0.35s ease; }
@keyframes wh-shake { 20%, 60% { translate: -7px 0; } 40%, 80% { translate: 7px 0; } }

/* The honeycomb: flat-topped hexagons placed with left/top (never transform). */
.wh-hive { position: relative; width: min(82vw, 300px); aspect-ratio: 1; }
.wh-game .wh-cell {
	position: absolute;
	width: 33.34%;
	height: 28.87%;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--wh-cell);
	color: var(--wh-ink);
	font-size: clamp(1.5rem, 7vw, 2rem);
	font-weight: 800;
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.12s ease, opacity 0.14s ease, scale 0.1s ease;
}
.wh-game .wh-cell:hover { background: color-mix(in srgb, var(--wh-cell) 85%, var(--wh-ink)); }
.wh-game .wh-cell.is-center { background: var(--wh-gold); }
.wh-game .wh-cell.is-center:hover { background: color-mix(in srgb, var(--wh-gold) 88%, #000); }
.wh-game .wh-cell.is-pressed { animation: wh-press 0.18s ease; }
@keyframes wh-press { 50% { scale: 0.9; } }
.wh-pos-0 { left: 33.33%; top: 35.57%; }
.wh-pos-1 { left: 33.33%; top: 5.2%; }
.wh-pos-2 { left: 59.6%; top: 20.4%; }
.wh-pos-3 { left: 59.6%; top: 50.73%; }
.wh-pos-4 { left: 33.33%; top: 65.93%; }
.wh-pos-5 { left: 7.07%; top: 50.73%; }
.wh-pos-6 { left: 7.07%; top: 20.4%; }
.wh-hive.is-shuffling .wh-cell:not(.is-center) { animation: wh-fade 0.3s ease; }
@keyframes wh-fade { 45% { opacity: 0; } }
.wh-celebrate .wh-hive { animation: wh-celebrate 0.8s ease; }
@keyframes wh-celebrate { 25% { rotate: 8deg; scale: 1.06; } 60% { rotate: -5deg; } }

.wh-controls { display: flex; gap: 10px; }

/* ---------- Side: found words + hints ---------- */
.wh-side { min-height: 100%; padding: 18px; border: 1px solid var(--wh-line); border-radius: var(--wh-radius); }
.wh-found-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.wh-found-count { font-weight: 800; }
.wh-head-buttons { display: inline-flex; align-items: center; gap: 6px; }
.wh-game .wh-list {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 3 110px;
	column-gap: 18px;
}
.wh-game .wh-list li {
	break-inside: avoid;
	margin: 0;
	padding: 6px 0;
	border-bottom: 1px solid var(--wh-line);
	font-size: 0.95rem;
	text-transform: capitalize;
}
.wh-game .wh-list li.is-pangram { font-weight: 800; }
.wh-game .wh-list li.is-pangram::after { content: " ★"; color: #caa700; }
.wh-game .wh-list li.is-missed { color: var(--wh-muted); font-style: italic; }
.wh-game .wh-list li.is-new { animation: wh-new 0.8s ease; }
@keyframes wh-new { from { background: color-mix(in srgb, var(--wh-gold) 60%, transparent); } }

.wh-hints { margin-bottom: 14px; padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--wh-gold) 14%, var(--wh-surface)); font-size: 0.85rem; }
.wh-hints p { margin: 0 0 8px; }
.wh-hints-title { font-weight: 800; font-size: 0.95rem; }
.wh-hints-sub { font-weight: 700; margin-top: 12px !important; }
.wh-hints-note { color: var(--wh-muted); font-size: 0.78rem; }
.wh-hint-scroll { overflow-x: auto; }
.wh-game .wh-hint-table { border-collapse: collapse; margin: 0; font-variant-numeric: tabular-nums; }
.wh-game .wh-hint-table th,
.wh-game .wh-hint-table td { min-width: 30px; padding: 4px 6px; border: 0; text-align: center; background: transparent; }
.wh-game .wh-hint-table th { font-weight: 800; }
.wh-game .wh-hint-table .is-zero { color: color-mix(in srgb, var(--wh-ink) 28%, transparent); }
.wh-game .wh-hint-table .wh-sum,
.wh-game .wh-hint-table tr.wh-sum td { font-weight: 800; }
.wh-pairs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-variant-numeric: tabular-nums; }
.wh-pairs .is-zero { color: color-mix(in srgb, var(--wh-ink) 28%, transparent); text-decoration: line-through; }

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

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

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