/* KA Heardle 1.0.0. Fonts and page background come from the theme; panels are translucent black. */
.kh-page .entry-title,
.kh-page .page-title { display: none; }

.kh-app {
	--kh-red: #c9363b;
	--kh-red-dark: #7d2124;
	--kh-text: #fff;
	--kh-muted: rgba(255, 255, 255, 0.72);
	--kh-line: rgba(255, 255, 255, 0.22);
	box-sizing: border-box;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	padding: 4px 16px 32px;
	color: var(--kh-text);
	font-family: inherit;
	line-height: 1.4;
}
.kh-app *, .kh-app *::before, .kh-app *::after { box-sizing: border-box; font-family: inherit; }
.kh-app [hidden] { display: none !important; }

.kh-head { text-align: center; margin: 0 0 14px; }
.kh-logo { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto 6px; }
.kh-tagline { margin: 0; color: var(--kh-text); font-size: 1rem; letter-spacing: 0.04em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }

.kh-panel {
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid var(--kh-line);
	border-radius: 12px;
	padding: 16px;
	margin: 0 0 14px;
	color: var(--kh-text);
}

.kh-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.kh-quiz { font-size: 1.05rem; }
.kh-attempt { color: var(--kh-muted); font-size: 0.9rem; white-space: nowrap; }

.kh-attempts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; }
.kh-box {
	display: flex; align-items: center; justify-content: center;
	height: 46px; border-radius: 8px; font-weight: 700; font-size: 1.1rem;
	background: rgba(255, 255, 255, 0.08); border: 1px solid var(--kh-line);
}
.kh-box.kh-current { border: 2px solid var(--kh-red); }
/* Stems mode only: instrument icon over its name. Classic and Shuffle keep the numbered boxes. */
.kh-attempts.kh-stems { gap: 6px; }
.kh-stems .kh-box.kh-stem { flex-direction: column; gap: 3px; height: auto; min-width: 0; padding: 5px 2px 4px; position: relative; font-size: 0.64rem; line-height: 1; }
.kh-stem-ic { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.kh-stem-ic .kh-peg { fill: currentColor; stroke: none; }
.kh-stem-lb { font-weight: 600; letter-spacing: 0; white-space: nowrap; pointer-events: none; }
.kh-stem-mk { position: absolute; top: 2px; right: 3px; font-size: 0.6rem; font-weight: 700; pointer-events: none; }
@media (max-width: 360px) {
	.kh-attempts.kh-stems { gap: 4px; }
	.kh-stem-ic { width: 24px; height: 24px; }
	.kh-stems .kh-box.kh-stem { font-size: 0.6rem; }
}
.kh-box.kh-wrong { background: var(--kh-red); border-color: var(--kh-red); }
.kh-box.kh-skip { background: #6b6f76; border-color: #6b6f76; }
.kh-box.kh-correct { background: #2e9d5b; border-color: #2e9d5b; }

.kh-btn {
	display: inline-block; width: 100%; margin: 0; padding: 12px 10px;
	font: inherit; font-weight: 700; color: var(--kh-text); text-align: center; text-transform: none;
	background: rgba(255, 255, 255, 0.14); border: 1px solid var(--kh-line); border-radius: 8px;
	cursor: pointer; -webkit-appearance: none; appearance: none; letter-spacing: normal;
}
.kh-btn:hover:not(:disabled) { filter: brightness(1.15); }
.kh-btn:focus-visible, .kh-input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kh-btn:disabled { cursor: not-allowed; color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.07); }
.kh-primary { background: var(--kh-red); border-color: var(--kh-red); color: #fff; }
.kh-primary:disabled { background: var(--kh-red-dark); border-color: var(--kh-red-dark); color: rgba(255, 255, 255, 0.7); }
.kh-play { padding: 16px 10px; font-size: 1.15rem; }

.kh-progress { height: 6px; margin: 14px 0 10px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.2); }
.kh-bar { height: 100%; width: 0; background: var(--kh-red); }

.kh-status { min-height: 1.4em; margin: 0 0 12px; text-align: center; color: var(--kh-muted); font-size: 0.9rem; }
.kh-status.kh-error { color: #ffb4b6; }

.kh-combo { position: relative; margin-bottom: 10px; }
.kh-input {
	display: block; width: 100%; margin: 0; padding: 12px; font: inherit; font-size: 16px; color: #fff;
	background: rgba(0, 0, 0, 0.55); border: 1px solid var(--kh-line); border-radius: 8px; -webkit-appearance: none; appearance: none;
}
.kh-input::placeholder { color: rgba(255, 255, 255, 0.55); }
.kh-input:disabled { color: rgba(255, 255, 255, 0.6); }
.kh-list {
	position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 0; list-style: none;
	max-height: 260px; overflow-y: auto; background: #111; border: 1px solid var(--kh-line); border-radius: 8px;
}
.kh-opt { padding: 11px 12px; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #fff; }
.kh-opt:last-child { border-bottom: 0; }
.kh-opt:hover, .kh-opt.kh-active { background: rgba(201, 54, 59, 0.45); }

.kh-row { display: flex; gap: 10px; margin-top: 8px; align-items: center; }
.kh-row > * { flex: 1; min-width: 0; }

.kh-result { text-align: center; }
.kh-r-title { margin: 0 0 4px; font-size: 2rem; line-height: 1.1; color: #fff; text-transform: uppercase; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.kh-r-title.kh-win { color: #fff; }
.kh-r-title.kh-loss { color: #C9363B; }
.kh-r-label { margin: 0; color: var(--kh-muted); }
.kh-r-answer { margin: 12px 0 2px; font-size: 1.25rem; font-weight: 700; }
.kh-r-score { margin: 0 0 14px; color: var(--kh-muted); }
.kh-r-stats { list-style: none; margin: 0 auto 16px; padding: 12px 14px; max-width: 260px; text-align: left; background: rgba(255, 255, 255, 0.06); border-radius: 8px; }
.kh-r-stats li { display: flex; justify-content: space-between; padding: 2px 0; }
.kh-share-msg { min-height: 1.3em; margin: 8px 0; font-size: 0.9rem; color: var(--kh-muted); word-break: break-word; }
.kh-countdown { margin: 10px 0 0; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.kh-fresh { margin-top: 12px; }
.kh-notice { text-align: center; }

.kh-testbanner { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--kh-red); color: #fff; font-weight: 700; font-size: 0.85rem; text-align: center; }
.kh-testpanel summary { cursor: pointer; font-weight: 700; margin-bottom: 10px; }
.kh-t-field { display: block; margin-bottom: 10px; }
.kh-t-label { display: block; margin-bottom: 4px; color: var(--kh-muted); font-size: 0.85rem; }
.kh-select { display: block; width: 100%; padding: 10px; font: inherit; font-size: 16px; color: #fff; background: rgba(0, 0, 0, 0.55); border: 1px solid var(--kh-line); border-radius: 8px; }
.kh-select option { color: #000; }
.kh-t-info { margin: 6px 0; font-size: 0.8rem; color: var(--kh-muted); }
.kh-t-check { font-size: 0.85rem; }
.kh-t-btn { padding: 9px 6px; font-size: 0.85rem; }
.kh-t-out { margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 0.8rem; color: #fff; }

@media (min-width: 600px) { .kh-app { padding-top: 12px; } }

/* 1.0.7: private beta "New game", the beta password screen and the pre-launch coming-soon screen. */
.kh-newgame { margin-top: 14px; padding: 16px 10px; font-size: 1.15rem; }
.kh-soon, .kh-gate { text-align: center; }
.kh-soon-title, .kh-gate-title { margin: 0 0 8px; font-size: 1.6rem; line-height: 1.15; color: #fff; text-transform: uppercase; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.kh-soon-text, .kh-gate-note { margin: 0 0 10px; color: var(--kh-muted); }
.kh-soon-count { margin: 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kh-gate-form { display: block; }
.kh-gate-pw { margin-bottom: 10px; }
.kh-gate-err { min-height: 1.4em; margin: 10px 0 0; color: #ffb4b6; font-size: 0.9rem; }