/* PLAY — website-owned header and menu CSS (CANDIDATE, local build 3 Nov 2026; not installed).
   Loaded on every public page by the Arcade plugin; switching the plugin off removes all of it.
   Selectors start with "html body" so they outrank the site's existing !important header rules without needing a new one. */

/* ---- 1. Desktop header: PLAY is black like the other headings, red on hover / keyboard focus, never underlined. */
html body #ast-hf-menu-1 > .menu-item.bb-play > .menu-link { position: relative; transition: color .15s ease; }
html body #ast-hf-menu-1 > .menu-item.bb-play > .menu-link::before,
html body #ast-hf-menu-1 > .menu-item.bb-play > .menu-link::after { display: none !important; }
@media (hover: hover) {
	html body #ast-hf-menu-1 > .menu-item.bb-play > .menu-link:hover { color: #ff3b2f !important; }
}
html body #ast-hf-menu-1 > .menu-item.bb-play > .menu-link:focus-visible { color: #ff3b2f !important; outline: none; }
html body #ast-hf-menu-1 > .menu-item.bb-play > .menu-link:focus-visible::before {
	content: ""; display: block !important; position: absolute; left: 6px; right: 6px; top: calc(50% - 17px); bottom: auto; width: auto; height: 34px;
	border: 2px solid #0a0a0a; background: none; transform: none; opacity: 1;
}
@media (prefers-reduced-motion: reduce) { html body #ast-hf-menu-1 > .menu-item.bb-play > .menu-link { transition: none; } }

/* ---- 2. 1025–1109 px: seven items need 84 px more room. Side padding 14 → 8 px (the site's own calc() pattern); font size untouched. */
@media (min-width: 1025px) and (max-width: 1109px) {
	html body #ast-hf-menu-1 > .menu-item > .menu-link {
		padding-left: calc(8px - min(6px, var(--bb-safe-inset, 0px))) !important;
		padding-right: calc(8px - min(6px, var(--bb-safe-inset, 0px))) !important;
	}
}

/* ---- 3. Phone / tablet ☰ menu: PLAY is the last row, red with black letters, in Light AND Dark (the header is never re-coloured by Dark Mode). */
html body .ast-mobile-header-wrap .main-header-menu > .menu-item.bb-play > .menu-link { background-color: #ff3b2f !important; color: #0a0a0a !important; }
html body .ast-mobile-header-wrap .main-header-menu > .menu-item.bb-play > .menu-link:active { background-color: #0a0a0a !important; color: #ff3b2f !important; }
html body .ast-mobile-header-wrap .main-header-menu > .menu-item.bb-play > .menu-link:focus-visible { outline: 3px solid #0a0a0a; outline-offset: -6px; }

/* ---- 4. ☰ menu spacing (approved): the empty yellow above / below the Subscribe block, the SUBSCRIBE → "sign in!" gap,
        and rows that shrink only on short screens: clamp(52, (small viewport − 218) / 10 − 1, 64) px. Font size and typography untouched. */
html body .ast-mobile-header-wrap .ast-mobile-header-content .ast-header-html-1 { padding-top: 0 !important; padding-bottom: 0 !important; }
html body .ast-mobile-header-wrap .ast-header-html { padding: 12px 24px 14px !important; }
html body .ast-mobile-header-wrap .bbc-oc-in { margin-top: 4px !important; }
html body .ast-mobile-header-wrap .main-header-menu > .menu-item > .menu-link { min-height: 57px !important; }
@supports (height: 100svh) {
	html body .ast-mobile-header-wrap .main-header-menu > .menu-item > .menu-link { min-height: clamp(52px, calc((100svh - 218px) / 10 - 1px), 64px) !important; }
}

/* ---- 5. The existing guest prompt (Community) opens in front of the open ☰ menu: its heading and × were hidden behind the header (z-index 90 < 100). */
.bbe-gate-layer { z-index: 2147483000 !important; }
.bbe-gate { z-index: 2147483001 !important; }