/* v31: a clear action frame and a warm, illustrated Caribbean interface. */
:root { --play-ink:#173947; --play-paper:#fff4dc; --play-mango:#ffcc75; --play-sea:#93e2d8; }
.course-entry { color:var(--play-paper); border-color:#ffcc7575; background:#254e58d9; }
.course-entry span { font-size:12px; letter-spacing:.06em; }
#course-btn[hidden],.qa-course-help[hidden] { display:none!important; }
#course-invite { position:absolute;right:30px;top:96px;width:256px;padding:19px 21px;border:1px solid #fff4dc55;border-radius:19px;background:#173947eb;box-shadow:0 8px 26px #142f442b;pointer-events:auto; }
#course-invite[hidden] { display:none; }
#course-invite .eyebrow { color:var(--play-sea);font-size:10px;letter-spacing:.14em; }
#course-invite strong { display:block;font-family:Anton,sans-serif;font-size:25px;letter-spacing:.025em;color:var(--play-paper);margin-top:7px; }
#course-invite p { color:#d6e7df;font:13px/1.5 system-ui,sans-serif;margin:8px 0 15px; }
#course-invite button { display:block;width:100%;border:0;min-height:40px;border-radius:10px;font:700 13px system-ui,sans-serif;cursor:pointer; }
#course-invite-start { background:var(--play-mango);color:var(--play-ink); }
#course-invite-start span { float:right;font-size:17px; }
#course-invite-later { background:transparent;color:#d6e7df;margin-top:5px; }
body.playing:not(.route-on):not(.hud-peek) #destination { opacity:0;pointer-events:none;visibility:hidden; }
body.playing .map-wrap { width:180px;border:1px solid #fff4dc66;border-radius:15px;box-shadow:0 4px 16px #102d3d24;background:#173947d9; }
body.playing #minimap { width:100%;height:126px; }
body.playing .map-wrap>div { padding:11px 13px; }
body.playing .map-wrap>div>span { font-size:11px; }
body.playing .flight-hud strong { font-size:39px; }
body.playing.on-foot-grounded .flight-hud strong { font-size:24px; }
body.playing.on-foot-grounded .flight-hud strong small { font-size:10px;letter-spacing:.5px; }
body.playing .location h1 { font-size:28px;text-shadow:0 2px 7px #17394780; }
body.playing .location.fresh h1 { font-size:37px; }
body.playing header .wordmark { text-shadow:0 2px 6px #17394750; }
#anchor-marker { filter:drop-shadow(0 2px 3px #173947a6); }
#anchor-marker i { width:17px;height:17px;border:2px solid #fff4dc;background:#17394755;box-shadow:0 0 0 2px #17394750; }
#anchor-marker:not(.attached) span { color:#fff4dc;background:#173947dc;border:1px solid #fff4dc50;border-radius:6px;padding:4px 7px;font-size:10px; }
#anchor-marker.attached i { background:#ffcc75;border-color:#fff4dc; }
#anchor-marker.attached span { display:none; }
#traversal-hint.visible { background:#173947e8;color:#fff4dc;border:1px solid #fff4dc45;border-radius:10px;padding:9px 14px;text-shadow:none;font:600 13px/1.45 system-ui,sans-serif;max-width:min(620px,70vw); }
body.course-running #traversal-hint { display:none; }
body.course-running #course-invite { display:none; }
body.course-running .location:not(.fresh) { opacity:.55; }
body.course-running .mi-wallet,body.course-running .mi-track { display:none; }
body.playing:not(.hud-peek) footer .controls { opacity:0;pointer-events:none; }
button:focus-visible { outline:3px solid #93e2d8;outline-offset:4px; }
@media(max-width:760px) {
  #course-invite { right:15px;top:83px;width:208px;padding:14px; }
  #course-invite strong { font-size:22px; }
  .course-entry span { display:none; }
  body.playing .map-wrap { width:132px; }
  body.playing #minimap { width:100%;height:92px; }
  body.playing .map-wrap>div { padding:7px 9px; }
  #traversal-hint.visible { max-width:84vw;font-size:11px;bottom:130px; }
}
@media(max-height:540px) { #course-invite p { display:none; } #course-invite { top:72px;padding:11px 14px; } #course-invite strong { font-size:21px;margin-bottom:8px; } }
@media(prefers-reduced-motion:reduce) { #anchor-marker,.location,#traversal-hint { transition:none!important;animation:none!important; } }
@media(prefers-reduced-motion:reduce) { #flow-hud.hot .flow-score em,.flow-pop { animation:none!important; } } /* the combo meter pulsed forever and its feed popped in regardless of the OS setting */
/* Q09: prefers-contrast: more / Windows forced colors. HUD text no longer relies on a soft shadow over the live world (bright sky, white facades):
   it sits on a solid dark chip at full opacity with a visible rim. Only people who ask for it (OS setting) see any change. */
@media (prefers-contrast: more), (forced-colors: active) {
  .location, .destination, .flight-hud, .controls, .coordinates {
    background: #04141af2; border: 1px solid #fff; border-radius: 10px; padding: 8px 12px; opacity: 1; text-shadow: none;
  }
  .location { width: fit-content; }
  .location p, .coordinates, .controls { opacity: 1; color: #fff; }
  .eyebrow { color: #ffd9a3; }
  .toast, #traversal-hint, #action-prompt, #move-prompts .chip { background: #04141a; border: 1px solid #fff; color: #fff; backdrop-filter: none; }
  kbd { border-color: #fff; color: #fff; }
  .pill, .icon-btn { background: #04141a; border-color: #fff; backdrop-filter: none; }
  button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #000; }
}
/* Q09: Safari before 18 only knows the prefixed backdrop-filter, so the glass chips (top bar pills, minimap, toasts, dialogs, route card)
   lost their blur there. Same radii as the unprefixed rules; evaluated only where the prefixed property is the one that exists. */
@supports (-webkit-backdrop-filter: blur(1px)) and (not (backdrop-filter: blur(1px))) {
  .pill, .icon-btn { -webkit-backdrop-filter: blur(14px); }
  .map-wrap { -webkit-backdrop-filter: blur(18px); }
  .toast { -webkit-backdrop-filter: blur(10px); }
  dialog { -webkit-backdrop-filter: blur(35px); }
  dialog::backdrop { -webkit-backdrop-filter: blur(8px); }
  .destination, .playing .destination { -webkit-backdrop-filter: blur(10px); }
  #flight-btn { -webkit-backdrop-filter: blur(10px); }
  #exit-photo { -webkit-backdrop-filter: blur(12px); }
  .traversal-course-card { -webkit-backdrop-filter: blur(14px); }
}
/* R18: Windows forced-colors / high-contrast. The OS replaces every authored colour, so the wanted stars (lit vs unlit differed ONLY by colour),
   the mission meters / step pips and the route bar all collapsed to one colour or vanished (a solid background-color becomes Canvas).
   Keep the state differences with system colours; nothing changes outside forced-colors. */
@media (forced-colors: active) {
  /* "html" prefix: police.js and mission-ui.js inject their own <style> after this file with equal-specificity selectors. */
  html .pl-hud { background: Canvas; border: 1px solid CanvasText; border-radius: 10px; padding: 6px 12px; }
  html .pl-stars i { forced-color-adjust: none; color: GrayText; text-shadow: none; }
  html .pl-stars i.lit { color: Highlight; }
  html .pl-state { text-shadow: none; }
  html .pl-bar, html .mi-bar, html .mi-meter, html .route-progress, html .course-progress { border: 1px solid CanvasText; }
  html .pl-bar i, html .mi-bar i, html .mi-meter i, html .route-progress i, html .course-progress span { forced-color-adjust: none; background: Highlight; }
  html .mi-pips i { forced-color-adjust: none; background: GrayText; }
  html .mi-pips i.d { background: Highlight; }
  html .mi-pips i.c { background: LinkText; }
}
/* R18: gamepad menu cursor (gamepad-input.js menuStep) is drawn like the keyboard focus ring: a script focus() after a mouse click does not match :focus-visible. */
dialog [data-pad] { outline: 3px solid #93e2d8; outline-offset: 4px; }
.lkr-dialog [data-pad] { outline-color: #2f7d63; }
.lkg-dialog [data-pad] { outline-color: #23806a; }