#hud #pausehint{pointer-events:auto;z-index:25;top:50%;width:min(410px,calc(100vw - 32px));padding:24px;letter-spacing:0;text-align:left;border:1px solid #93bca063;background:#0a1719f2;box-shadow:0 24px 90px #0008;backdrop-filter:blur(18px);border-radius:12px;max-height:calc(100dvh - 80px);overflow:auto}
#hud #pausehint[hidden]{display:none}
/* The touch bar and the course mode buttons are body-level (z-index 15) and would otherwise float above this card, which lives in the HUD (z-index 10): while the pause card is open they are hidden, so they cannot cover its text or be pressed behind it. */
body:has(#pausehint:not([hidden])) #touchbar,body:has(#pausehint:not([hidden])) #coursebtns{visibility:hidden}
#pausehint .pause-kicker{margin:0;color:var(--accent);font-size:10px;letter-spacing:2px}
#pausehint h2{font-size:28px;font-weight:500;margin:8px 0 5px;letter-spacing:-1px}
#pausehint .pause-description{font-size:12px;color:#b7c8be;line-height:1.6;margin:0 0 18px}
#pausehint .pause-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#pausehint .pause-actions button{min-height:44px;border:1px solid #8fae9d50;border-radius:6px;background:#1b2d2b;color:#eff7ee;font-size:12px;padding:10px}
#pausehint .pause-actions button:first-child{grid-column:1/-1;background:var(--accent);color:#132115;font-size:14px;font-weight:700}
#pausehint .pause-actions button:disabled{opacity:.6;cursor:wait}
#pausehint .pause-footnote{font-size:10px;line-height:1.5;color:#9eafa5;margin:14px 0 0}
#help .controller-guide{margin:18px 0;padding:12px 14px;background:#ffffff06;border:1px solid #afc5b729;border-radius:6px;font-size:11px;line-height:1.7;color:#b9cabb}
#help .controller-guide strong{color:#e4eddf}
@media(max-width:600px){.brandline{flex-wrap:wrap;gap:12px}.brand-tools{width:100%;justify-content:space-between}.brand-tools .build-tag{display:none}.brand-tools .menu-mute{min-height:38px}}
@media(max-width:480px){#hud #pausehint{padding:18px;max-height:calc(100dvh - 120px)}#pausehint h2{font-size:24px}}