/* Qoob Dash: the /play game. Loaded only on the "Qoob Dash (game)" template
   (inc/qoob-dash.php), after main.css. Everything is scoped to .qoob-dash.

   The canvas keeps the game's own pastel desk artwork; the interface around it
   uses the site's type, colours and buttons.

   Panels: every state's markup is always in the page; [data-mode] on the root
   decides which one shows (see the "Panels" section).

   Stage: on phones a run takes over the screen (position: fixed, page scroll
   locked) so nothing scrolls, zooms or catches a thumb mid-run. The two media
   queries below must match data-stage-query in template-parts/qoob-dash.php,
   which the script uses to decide when to stage. */

.qoob-dash {
	--dash-paper: #f4f4ee;
	--dash-line: #dfe1d7;
	--dash-board-line: #ced8c8;
	--dash-muted: #6c7369;
	--dash-accent: var(--teal);
	--dash-board-h: 520px;
	background: var(--dash-paper);
	color: var(--midnight);
	padding-block: 28px 56px;
}

.qoob-dash .qoob-dash__inner {
	position: relative;
}

.qoob-dash__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 24px;
	align-items: start;
}

.qoob-dash__stage {
	min-width: 0;
}

/* ---------- Title row ---------- */
.qoob-dash__title-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}

.qoob-dash__title-copy {
	margin-right: auto;
	min-width: 0;
}

.qoob-dash .qoob-dash__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
}

.qoob-dash .qoob-dash__title {
	margin: 0;
	font-size: clamp(34px, 4.2vw, 52px);
	font-weight: var(--w-semibold);
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.qoob-dash__title span {
	color: var(--dash-accent);
}

.qoob-dash__best {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	background: #fff;
	border: 1px solid var(--dash-line);
	border-radius: 14px;
	white-space: nowrap;
}

.qoob-dash__best > svg {
	color: var(--dash-accent);
	flex-shrink: 0;
}

.qoob-dash__best-label {
	display: block;
	font-size: 11px;
	font-weight: var(--w-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dash-muted);
}

.qoob-dash__best strong {
	font-size: 22px;
	font-weight: var(--w-semibold);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.qoob-dash__best small {
	font-size: 11px;
	font-weight: var(--w-medium);
	color: var(--dash-muted);
}

.qoob-dash__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--dash-line);
	border-radius: 50%;
	background: #fff;
	color: var(--midnight);
	cursor: pointer;
	touch-action: manipulation;
}

.qoob-dash__icon-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.qoob-dash__sound .qoob-dash__sound-on,
.qoob-dash__sound[aria-pressed="true"] .qoob-dash__sound-off {
	display: none;
}

.qoob-dash__sound[aria-pressed="true"] .qoob-dash__sound-on {
	display: block;
}

/* ---------- Board ---------- */
.qoob-dash__board {
	position: relative;
	height: var(--dash-board-h);
	overflow: hidden;
	isolation: isolate;
	border: 1px solid var(--dash-board-line);
	border-radius: var(--radius-card);
	background: #e7eee1;
}

.qoob-dash__canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

.qoob-dash__hud {
	position: absolute;
	z-index: 2;
	inset: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 18px 20px;
	background: linear-gradient(#e4ede5e6, #e4ede500);
	pointer-events: none;
}

.qoob-dash__hud-score span,
.qoob-dash__hud-time span {
	display: block;
	font-size: 10px;
	font-weight: var(--w-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #61705f;
}

.qoob-dash__hud-score strong,
.qoob-dash__hud-time strong {
	font-size: 24px;
	font-weight: var(--w-semibold);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.qoob-dash__hud-time {
	text-align: center;
}


.qoob-dash__hud-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

.qoob-dash__hearts {
	display: flex;
	gap: 4px;
	color: var(--coral);
}

.qoob-dash__heart svg {
	fill: currentColor;
}

.qoob-dash__heart.is-lost {
	color: #b8c2b0;
}

.qoob-dash__heart.is-lost svg {
	fill: none;
}

.qoob-dash .qoob-dash__pause {
	width: 40px;
	height: 40px;
	border-color: transparent;
	background: #fbfdf6b3;
	pointer-events: auto;
}

/* Only a run can be paused; between runs the button would sit on the scenery. */
.qoob-dash:is([data-mode="idle"], [data-mode="loading"], [data-mode="ended"]) .qoob-dash__pause {
	visibility: hidden;
}

.qoob-dash__pause .qoob-dash__play-icon,
.qoob-dash__pause.is-paused .qoob-dash__pause-icon {
	display: none;
}

.qoob-dash__pause.is-paused .qoob-dash__play-icon {
	display: block;
}

/* ---------- Panels: one per mode ---------- */
.qoob-dash__panel {
	display: none;
}

.qoob-dash[data-mode="idle"] [data-dash-panel="intro"],
.qoob-dash[data-mode="loading"] [data-dash-panel="intro"] {
	display: block;
}

.qoob-dash[data-mode="countdown"] [data-dash-panel="countdown"],
.qoob-dash[data-mode="paused"] [data-dash-panel="paused"],
.qoob-dash[data-mode="ended"] [data-dash-panel="ended"] {
	display: flex;
}

.qoob-dash__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border: 1px solid #ffffffb3;
	border-radius: var(--radius-pill);
	background: #ffffffa6;
	font-size: 11px;
	font-weight: var(--w-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.qoob-dash__intro {
	position: absolute;
	z-index: 3;
	top: 92px;
	left: 28px;
	max-width: min(380px, calc(100% - 40px));
}

.qoob-dash__intro h2 {
	margin: 16px 0 12px;
	font-size: clamp(36px, 4vw, 54px);
	font-weight: var(--w-semibold);
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.qoob-dash__intro h2 em {
	font-style: normal;
	color: var(--dash-accent);
}

.qoob-dash__intro p {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.55;
	color: #556051;
}

.qoob-dash .qoob-dash__start {
	min-width: 200px;
	justify-content: space-between;
}

.qoob-dash .qoob-dash__start:disabled {
	opacity: 0.7;
	cursor: default;
	transform: none;
}

.qoob-dash__start-note {
	display: block;
	margin-top: 10px;
	font-size: 13px;
	color: #5f6b5b;
}

.qoob-dash .qoob-dash__nojs {
	display: none;
}

.no-js .qoob-dash .qoob-dash__nojs {
	display: block;
	font-weight: var(--w-semibold);
	color: var(--midnight);
}

.no-js .qoob-dash .qoob-dash__start,
.no-js .qoob-dash .qoob-dash__start-note {
	display: none;
}

.qoob-dash__countdown {
	position: absolute;
	z-index: 3;
	inset: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #e9eee057;
	pointer-events: none;
	text-align: center;
}

.qoob-dash__countdown > span {
	font-size: 13px;
	font-weight: var(--w-bold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.qoob-dash__countdown strong {
	font-size: clamp(96px, 16vw, 140px);
	font-weight: var(--w-bold);
	line-height: 1;
	color: var(--dash-accent);
}

.qoob-dash__countdown p {
	margin: 4px 0 0;
	font-size: 15px;
	color: #556051;
}

.qoob-dash__overlay {
	position: absolute;
	z-index: 4;
	inset: 0;
	align-items: flex-start; /* The card's auto margins centre it, and let it scroll from the top when it is taller than the board. */
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #e5ecdfd9;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	text-align: center;
}

.qoob-dash__card {
	width: 100%;
	max-width: 420px;
	margin: auto;
}

.qoob-dash__card h2 {
	margin: 12px 0 8px;
	font-size: clamp(26px, 3.4vw, 34px);
	font-weight: var(--w-semibold);
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.qoob-dash__card > p {
	margin: 0 0 20px;
	font-size: 15px;
	color: #556051;
}

.qoob-dash__card .qoob-btn {
	gap: 8px;
}

.qoob-dash__text-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 6px 10px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	font-weight: var(--w-medium);
	color: #4d5949;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.qoob-dash__overlay .qoob-dash__card > .qoob-dash__text-btn {
	display: flex;
	margin: 8px auto 0;
}

.qoob-dash__final {
	margin: 6px 0 4px;
	font-size: clamp(48px, 7vw, 64px);
	font-weight: var(--w-semibold);
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: var(--dash-accent);
	font-variant-numeric: tabular-nums;
}

.qoob-dash__final small {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	font-weight: var(--w-bold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #61705f;
}

.qoob-dash__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 14px;
	margin: 10px 0 14px;
	font-size: 13px;
	color: #4f5c4b;
}

.qoob-dash__stats > span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.qoob-dash__form {
	margin: 0 0 14px;
	padding: 12px;
	border: 1px solid #ffffffc0;
	border-radius: 14px;
	background: #fffef7cc;
	text-align: left;
}

.qoob-dash__form[hidden] {
	display: none;
}

.qoob-dash__form label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: var(--w-semibold);
}

.qoob-dash__form-row {
	display: flex;
	gap: 6px;
}

.qoob-dash__form input {
	flex: 1;
	min-width: 0;
	height: 46px;
	padding: 0 12px;
	border: 1px solid #c9d0bf;
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 16px; /* 16px stops iOS zooming the page on focus. */
	color: var(--midnight);
}

.qoob-dash__form button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 46px;
	padding: 0 14px;
	border: 0;
	border-radius: 10px;
	background: var(--coral);
	font: inherit;
	font-size: 14px;
	font-weight: var(--w-semibold);
	color: var(--midnight);
	white-space: nowrap;
	cursor: pointer;
	touch-action: manipulation;
}

.qoob-dash__form button:disabled {
	opacity: 0.6;
	cursor: default;
}

.qoob-dash__form small {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: #5f6b5b;
}

.qoob-dash__error {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--coral-4);
}

.qoob-dash__error[hidden],
.qoob-dash__saved[hidden] {
	display: none;
}

.qoob-dash__saved {
	margin: 4px 0 16px;
	font-size: 15px;
	font-weight: var(--w-medium);
	color: var(--teal-3);
}

.qoob-dash__actions {
	display: flex;
	gap: 8px;
}

.qoob-dash__actions .qoob-btn {
	flex: 1;
	min-width: 0;
	height: 50px;
	padding: 0 12px;
	font-size: 15px;
}

.qoob-dash__actions .qoob-btn svg {
	flex-shrink: 0;
}

.qoob-dash .qoob-dash__secondary {
	border: 2px solid var(--midnight);
	background: transparent;
	color: var(--midnight);
}

.qoob-dash__share-msg {
	display: block;
	min-height: 1.2em;
	margin-top: 8px;
	font-size: 13px;
	color: #4f5c4b;
}

.qoob-dash__result-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 12px;
}

/* ---------- On-board extras ---------- */
.qoob-dash__powers {
	position: absolute;
	z-index: 2;
	top: 76px;
	left: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	pointer-events: none;
}

.qoob-dash__powers [hidden] {
	display: none;
}

.qoob-dash__powers span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	border: 1px solid #d5dfcc;
	border-radius: var(--radius-pill);
	background: #fffef8e6;
	font-size: 12px;
	font-weight: var(--w-semibold);
	color: #5f55a8;
}

.qoob-dash[data-mode="idle"] .qoob-dash__powers,
.qoob-dash[data-mode="loading"] .qoob-dash__powers {
	display: none;
}

.qoob-dash__practice {
	position: absolute;
	z-index: 2;
	right: 18px;
	bottom: 38px;
	font-size: 11px;
	font-weight: var(--w-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #7a6a4b;
}

.qoob-dash__practice[hidden] {
	display: none;
}

.qoob-dash__board-foot {
	position: absolute;
	z-index: 2;
	right: 18px;
	bottom: 12px;
	left: 18px;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 10px;
	font-weight: var(--w-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #7d7258;
	pointer-events: none;
}

.qoob-dash__board-foot > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.qoob-dash__board-foot i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #877955;
}

/* ---------- Controls ---------- */
.qoob-dash__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	padding: 10px 12px 10px 16px;
	border: 1px solid var(--dash-line);
	border-radius: 16px;
	background: #fff;
}

.qoob-dash__how {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #5f6b5b;
}

.qoob-dash__how kbd {
	padding: 3px 7px;
	border: 1px solid #dfe1d8;
	border-radius: 5px;
	background: #f1f2ec;
	font: inherit;
	font-size: 12px;
	font-weight: var(--w-semibold);
}

.qoob-dash__how-touch {
	display: none;
}

@media (hover: none) and (pointer: coarse) {
	.qoob-dash__how-keys { display: none; }
	.qoob-dash__how-touch { display: inline; }
}

.qoob-dash__buttons {
	display: flex;
	flex-shrink: 0;
	gap: 8px;
}

.qoob-dash__control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 112px;
	height: 52px;
	padding: 0 18px;
	border: 2px solid transparent;
	border-radius: 14px;
	font: inherit;
	font-size: 16px;
	font-weight: var(--w-semibold);
	color: var(--midnight);
	cursor: pointer;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

.qoob-dash__control:active:not(:disabled) {
	transform: translateY(2px);
}

.qoob-dash__control:disabled {
	opacity: 0.5;
	cursor: default;
}

.qoob-dash__control--slide {
	border-color: #d4d9c8;
	background: #f2f4ea;
}

.qoob-dash__control--jump {
	background: var(--coral);
}

/* ---------- Side panels ---------- */
.qoob-dash__side {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.qoob-dash__panel-card {
	padding: 18px;
	border: 1px solid var(--dash-line);
	border-radius: var(--radius-card);
	background: #fff;
}

.qoob-dash__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.qoob-dash .qoob-dash__heading h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 16px;
	font-weight: var(--w-semibold);
	letter-spacing: -0.01em;
}

.qoob-dash__heading h2 svg {
	color: var(--dash-accent);
}

.qoob-dash__heading > span {
	font-size: 11px;
	letter-spacing: 0.1em;
	color: #8d9385;
}

.qoob-dash__heading .qoob-dash__icon-btn {
	width: 40px;
	height: 40px;
}

.qoob-dash__bots {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 14px;
}

.qoob-dash__bots button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 78px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 14px;
	background: #f0f0e8;
	cursor: pointer;
	touch-action: manipulation;
}

.qoob-dash__bots button.is-selected {
	border-color: var(--dash-accent);
	background: var(--teal-8);
}

.qoob-dash__bots button:disabled:not(.is-selected) {
	opacity: 0.55;
	cursor: default;
}

.qoob-dash__bot {
	display: block;
	width: 54px;
	height: 63px;
	object-fit: contain;
	filter: drop-shadow(0 2px 2px #27283b18);
}

.qoob-dash__picked {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: var(--w-medium);
}

.qoob-dash__picked small {
	margin-left: auto;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8d9385;
}

.qoob-dash__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #8762b5;
}

.qoob-dash__board-label {
	display: flex;
	justify-content: space-between;
	margin: 14px 0 6px;
	font-size: 11px;
	font-weight: var(--w-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8d9385;
}

.qoob-dash__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qoob-dash__list[hidden] {
	display: none;
}

.qoob-dash__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #eef0e7;
	font-size: 15px;
}

.qoob-dash__list li:last-child {
	border-bottom: 0;
}

.qoob-dash__list .qoob-dash__bot {
	width: 28px;
	height: 33px;
}

.qoob-dash__rank {
	width: 22px;
	font-size: 13px;
	font-weight: var(--w-semibold);
	color: #8d9385;
	font-variant-numeric: tabular-nums;
}

.qoob-dash__list li:first-child .qoob-dash__rank {
	color: var(--coral-4);
}

.qoob-dash__player {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qoob-dash__list strong {
	margin-left: auto;
	font-weight: var(--w-semibold);
	font-variant-numeric: tabular-nums;
}

.qoob-dash__list-status {
	margin: 8px 0 4px;
	font-size: 14px;
	line-height: 1.5;
	color: #5f6b5b;
}

.qoob-dash__list-status[hidden] {
	display: none;
}

.qoob-dash__rules {
	background: #ecedda;
	border-color: #dedfc8;
}

.qoob-dash .qoob-dash__rules h2 {
	margin: 0 0 14px;
	font-size: 22px;
	font-weight: var(--w-medium);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.qoob-dash__rules h2 em {
	font-style: normal;
	color: var(--dash-accent);
}

.qoob-dash__rule-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qoob-dash__rule-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 12px 0;
}

.qoob-dash__rule-list li > span {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid #d9ddc6;
	border-radius: 11px;
	background: #f6f6e9;
	color: var(--dash-accent);
}

.qoob-dash__rule-list strong {
	font-size: 15px;
	font-weight: var(--w-semibold);
}

.qoob-dash__rule-list p {
	margin: 2px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: #5f6b5b;
}

.qoob-dash__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid #daddc5;
	font-size: 13px;
	color: #4f5c4b;
}

.qoob-dash__legend span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.qoob-dash__small {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #5f6b5b;
}

/* ---------- Widths ---------- */
@media (min-width: 1400px) {
	.qoob-dash { --dash-board-h: 540px; }
}

@media (max-width: 1080px) {
	.qoob-dash__layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; }
	.qoob-dash__control { min-width: 96px; padding: 0 14px; }
	.qoob-dash__bots button { height: 66px; }
	.qoob-dash__bot { width: 46px; height: 54px; }
}

@media (max-width: 799px) {
	.qoob-dash { --dash-board-h: 480px; padding-block: 16px 36px; }
	.qoob-dash__layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.qoob-dash__title-row { gap: 10px; margin-bottom: 12px; }
	.qoob-dash .qoob-dash__eyebrow { font-size: 11px; }
	.qoob-dash__best { padding: 7px 12px; gap: 8px; }
	.qoob-dash__best strong { font-size: 18px; }
	.qoob-dash__intro { top: 80px; left: 20px; }
	.qoob-dash__intro h2 { font-size: 42px; }
	.qoob-dash__side { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
	.qoob-dash__picker { grid-column: 1 / -1; }
	.qoob-dash__bots button { height: 78px; }
	.qoob-dash__bot { width: 54px; height: 63px; }
}

@media (max-width: 560px) {
	.qoob-dash { --dash-board-h: 450px; }
	.qoob-dash__best > svg { display: none; }
	.qoob-dash__hud { padding: 12px 12px 18px; }
	.qoob-dash__hud-score strong,
	.qoob-dash__hud-time strong { font-size: 21px; }
	.qoob-dash__hud-right { gap: 8px; }
	.qoob-dash__heart svg { width: 16px; height: 16px; }
	.qoob-dash__intro { top: 72px; left: 16px; }
	.qoob-dash__intro h2 { font-size: 38px; }
	.qoob-dash__intro p,
	.qoob-dash__start-note:not(.is-error) { display: none; }
	.qoob-dash .qoob-dash__start { min-width: 0; }
	.qoob-dash__board-foot { display: none; }
	.qoob-dash__practice { bottom: 12px; right: 12px; }
	.qoob-dash__powers { top: 66px; left: 12px; }
	.qoob-dash__controls { flex-wrap: wrap; padding: 10px; }
	.qoob-dash__how { flex: 1 1 100%; font-size: 13px; text-align: center; }
	.qoob-dash__buttons { flex: 1 1 100%; }
	.qoob-dash__control { flex: 1; height: 56px; }
	.qoob-dash__side { grid-template-columns: minmax(0, 1fr); }
	.qoob-dash__picker { grid-column: auto; }
	.qoob-dash__actions .qoob-btn { font-size: 14px; }
	.qoob-dash .qoob-dash__secondary svg { display: none; } /* No room beside "Challenge a friend". */
}

@media (max-width: 360px) {
	.qoob-dash .qoob-dash__title { font-size: 30px; }
	.qoob-dash__intro h2 { font-size: 34px; }
	.qoob-dash__best-label { font-size: 10px; }
	/* Side by side, "Challenge a friend" outgrows its button at 320px. */
	.qoob-dash__actions { flex-wrap: wrap; }
	.qoob-dash__actions .qoob-btn { flex-basis: 100%; }
	.qoob-dash__form button svg { display: none; }
}

/* ---------- Stage: a run takes over a phone's screen ----------
   Same two queries as data-stage-query in the template part. */
html.qoob-dash-lock,
html.qoob-dash-lock body {
	overflow: hidden;
	overscroll-behavior: none;
}

@media (max-width: 799px), (pointer: coarse) and (max-height: 600px) {
	.qoob-dash.is-staged .qoob-dash__stage {
		position: fixed;
		z-index: 1200;
		inset: 0;
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
		overflow: hidden;
		overscroll-behavior: none;
		background: var(--dash-paper);
	}

	.qoob-dash.is-staged .qoob-dash__title-row {
		margin: 0;
		flex-shrink: 0;
	}

	.qoob-dash.is-staged .qoob-dash__eyebrow {
		display: none;
	}

	.qoob-dash.is-staged .qoob-dash__title {
		font-size: 26px;
	}

	/* The board takes what is left, up to a 1:1.2 portrait shape: a robot's
	   highest double jump needs about that much, and taller is empty sky. Auto
	   margins share any spare height above and below it, which keeps the
	   controls at the bottom, under the thumbs. The results card needs the room,
	   so between runs the cap comes off. */
	.qoob-dash.is-staged .qoob-dash__board {
		flex: 1 1 auto;
		height: auto;
		min-height: 0;
		max-height: calc((100vw - 20px) * 1.2);
		margin-block: auto;
	}

	.qoob-dash.is-staged[data-mode="ended"] .qoob-dash__board,
	.qoob-dash.is-staged[data-mode="paused"] .qoob-dash__board {
		max-height: none;
	}

	.qoob-dash.is-staged .qoob-dash__board-foot {
		display: none;
	}

	.qoob-dash.is-staged .qoob-dash__controls {
		flex-shrink: 0;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
	}

	.qoob-dash.is-staged .qoob-dash__how {
		display: none;
	}

	/* Nothing to press between runs, and the results card wants the room. */
	.qoob-dash.is-staged[data-mode="ended"] .qoob-dash__controls {
		display: none;
	}

	.qoob-dash.is-staged .qoob-dash__buttons {
		flex: 1 1 100%;
		gap: 10px;
	}

	.qoob-dash.is-staged .qoob-dash__control {
		flex: 1;
		height: 68px;
		font-size: 17px;
		border-radius: 18px;
	}

}

/* Phones on their side: no room above or below, so the board fills the height
   and the two buttons stand in a column on the right, Jump lowest. */
@media (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
	.qoob-dash.is-staged .qoob-dash__stage {
		flex-direction: row;
		align-items: stretch;
	}

	.qoob-dash.is-staged .qoob-dash__title-row {
		display: none;
	}

	.qoob-dash.is-staged .qoob-dash__board {
		max-height: none;
		margin: 0;
	}

	.qoob-dash.is-staged .qoob-dash__controls {
		width: 118px;
	}

	.qoob-dash.is-staged .qoob-dash__buttons {
		flex-direction: column;
		justify-content: flex-end;
		height: 100%;
	}

	.qoob-dash.is-staged .qoob-dash__control {
		flex: 0 0 auto;
		height: 46%;
		max-height: 150px;
		flex-direction: column;
		gap: 4px;
	}

	.qoob-dash.is-staged .qoob-dash__intro,
	.qoob-dash.is-staged .qoob-dash__hud {
		padding-top: 10px;
	}

	.qoob-dash.is-staged .qoob-dash__card h2 {
		font-size: 24px;
	}

	.qoob-dash.is-staged .qoob-dash__final {
		font-size: 44px;
	}

	/* One column of results is taller than a board on its side, so the score
	   sits beside the form and Go again stays in view without scrolling. */
	.qoob-dash.is-staged .qoob-dash__overlay--results {
		padding: 14px;
	}

	.qoob-dash.is-staged .qoob-dash__result {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
		align-items: center;
		gap: 20px;
		max-width: 640px;
	}

	.qoob-dash.is-staged .qoob-dash__stats {
		margin-bottom: 0;
	}

	.qoob-dash.is-staged .qoob-dash__form {
		margin-bottom: 10px;
		padding: 10px;
	}

	.qoob-dash.is-staged .qoob-dash__actions .qoob-btn {
		height: 44px;
		padding: 0 10px;
		font-size: 14px;
	}

	.qoob-dash.is-staged .qoob-dash__secondary svg {
		display: none;
	}

	.qoob-dash.is-staged .qoob-dash__share-msg {
		margin-top: 4px;
	}
}