/* A steady icon with a slow pulsing outline; never flash the whole screen. */
.fullscreen-button{position:relative;flex:none;background:#f8d24d;color:#173238;border:2px solid #173238;border-radius:8px;box-shadow:3px 3px 0 #173238;isolation:isolate}
.fullscreen-button:hover{background:#ffe88a;color:#173238}
.fullscreen-button::after{content:'';position:absolute;inset:-5px;border:2px solid #fff1a9;border-radius:12px;pointer-events:none;animation:fullscreen-beacon 2.8s ease-in-out infinite}
.fullscreen-button.is-fullscreen{background:#f04732;color:#fff7de}
.fullscreen-button.is-fullscreen:hover{background:#ff6551}
.fullscreen-button .fullscreen-contract{display:none}
.fullscreen-button.is-fullscreen .fullscreen-expand{display:none}
.fullscreen-button.is-fullscreen .fullscreen-contract{display:block}
.fullscreen-button:disabled{cursor:wait}
.fullscreen-label{position:absolute;top:calc(100% + 7px);right:-3px;width:max-content;max-width:150px;font:800 12px/1.15 Barlow,sans-serif;background:#173238;color:#fff7de;padding:3px 6px;border-radius:3px;pointer-events:none;text-align:center;overflow-wrap:anywhere}
.fullscreen-button.is-dialog{position:absolute;left:calc(max(20px,env(safe-area-inset-left)) + 108px);top:max(14px,env(safe-area-inset-top));z-index:100;transform:translateY(var(--spotify-scroll,0px))}
.fullscreen-button.is-dialog .fullscreen-label{left:50%;right:auto;transform:translateX(-50%);max-width:108px}
.fullscreen-button.is-standalone::after{animation:none;opacity:.4}
.fullscreen-help{position:fixed;inset:0;box-sizing:border-box;width:min(520px,calc(100% - 28px));max-height:calc(100dvh - 32px);margin:auto;padding:92px 24px 24px;border:3px solid #173238;border-radius:8px;background:#fff3d6;color:#173238;box-shadow:7px 8px 0 #17323899;overflow:auto;overscroll-behavior:contain}
.fullscreen-help::backdrop{background:#062831b8}
.fullscreen-help h2{font:900 clamp(30px,7vw,42px)/1 Condensed,sans-serif;text-transform:uppercase;margin:0 0 18px}
.fullscreen-help p,.fullscreen-help li{font:500 16px/1.45 Barlow,sans-serif}
.fullscreen-help ol{padding-left:24px}.fullscreen-help li{padding-left:5px;margin:13px 0}
.fullscreen-help .primary-button{margin-top:20px;width:100%;min-height:48px}
html:fullscreen,html:-webkit-full-screen{background:#087f92}
@keyframes fullscreen-beacon{0%,100%{opacity:.25}50%{opacity:1}}
@media(max-width:600px){.hud .identity{display:none}.hud .tools{margin-left:auto;gap:4px}.fullscreen-label{font-size:11px}}
@media(max-width:520px){.run-hud{top:78px}}
@media(prefers-reduced-motion:reduce){.fullscreen-button::after{animation:none;opacity:.65}}