/* A small HUD and a white glass pause menu. Inventory stays in the menu. */
:root {--roam-ink:#243e39;--roam-muted:#586c64;--roam-edge:rgba(255,255,255,.82);--roam-glass:linear-gradient(145deg,rgba(255,255,255,.91),rgba(242,250,248,.74));}
#pause-btn,#hud>.hud-pill,#field-guide,body #safari-panel,body #safari-launch,body #wild-trails-button {
  background:var(--roam-glass);border:1px solid var(--roam-edge);color:var(--roam-ink);
  box-shadow:inset 0 1px 0 #fff,0 4px 20px #17382b1a;
  -webkit-backdrop-filter:blur(20px) saturate(145%);backdrop-filter:blur(20px) saturate(145%);
}
#pause-btn {left:16px;top:14px;width:auto;min-width:82px;height:44px;padding:0 18px;border-radius:16px;font:700 15px/1.2 system-ui,sans-serif;z-index:1501;}
#pause-btn:hover {background:#fff;}
#hud {top:14px;right:16px;padding:0;gap:8px;max-width:calc(100vw - 120px);flex-wrap:nowrap;}
#hud>.hud-pill {display:flex!important;min-height:44px;border-radius:16px;padding:7px 13px;gap:7px;}
#hud .hud-icon,#menu-stats .hud-icon {display:none;}
#hud .hud-val {font:750 17px/1.2 system-ui,sans-serif;color:var(--roam-ink);text-shadow:none;}
#hud .hud-label,#menu-stats .hud-label {display:block;position:static;width:auto;height:auto;clip:auto;clip-path:none;overflow:visible;margin:0;white-space:normal;color:var(--roam-muted);font:600 10px/1.3 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.07em;}
#hud .hud-pill>div {display:flex;align-items:center;gap:7px;}
#hud .book-btn {cursor:pointer;pointer-events:auto;}
#field-guide {top:72px;border-radius:20px;}
#field-guide .guide-title,#field-guide #guide-title {color:var(--roam-ink);text-shadow:none;}
#field-guide .guide-pill,#field-guide .guide-toggle {background:#e3eee8;color:#34584c;border:1px solid #baccbf;}
#field-guide .guide-chip {background:#ffffff70;border-color:#ffffffb0;color:var(--roam-ink);}
#field-guide .guide-chip strong {color:var(--roam-ink);text-shadow:none;}
#field-guide .guide-chip-icon,#field-guide .guide-action>[aria-hidden] {display:none;}
#field-guide .guide-chip-label,#field-guide .guide-action-label {display:block!important;position:static;width:auto;height:auto;clip:auto;clip-path:none;overflow:visible;margin:3px 0 0;white-space:normal;color:var(--roam-muted);font:600 10px/1.3 system-ui,sans-serif;letter-spacing:.03em;}
#field-guide .guide-kicker {color:var(--roam-muted);}
#field-guide .guide-action {background:#ecf3ee;color:#29473b;border:1px solid #cfddd3;border-radius:12px;box-shadow:none;}
#field-guide .guide-action-label {margin:0;color:#29473b;font-size:12px;}
#pause-overlay {z-index:1500;cursor:default;background:rgba(25,47,41,.19);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);padding:24px;}
#pause-overlay .pause-card {width:min(470px,100%);max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;text-align:left;padding:32px;border-radius:32px;color:var(--roam-ink);background:linear-gradient(135deg,#ffffffed,#f2f8f6d9);border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,0 24px 80px #173b3238;-webkit-backdrop-filter:blur(32px) saturate(160%);backdrop-filter:blur(32px) saturate(160%);font-family:system-ui,sans-serif;}
.menu-eyebrow {font-size:11px;letter-spacing:.18em;font-weight:750;color:#58736b;}
#menu-title {font:650 31px/1.12 system-ui,sans-serif;letter-spacing:-.035em;margin:12px 0 8px;}
.menu-subtitle {font-size:14px;line-height:1.5;color:var(--roam-muted);margin:0 0 24px;}
#pause-overlay button,#pause-overlay .back-btn {position:static;inset:auto;transform:none;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;height:auto;border-radius:14px;font:600 14px/1.3 system-ui,sans-serif;padding:12px 14px;text-decoration:none;box-shadow:none;cursor:pointer;transition:background .15s;}
#menu-resume {background:#284c40;border:1px solid #284c40;color:#fff;}
#menu-resume:hover {background:#1d3c31;}
.menu-settings {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0;}
#pause-overlay .mute-btn,#menu-read-story {background:#ffffff85;border:1px solid #d4e0db;color:var(--roam-ink);}
#pause-overlay .mute-btn.muted {opacity:1;color:#60716b;}
#pause-overlay .mute-btn:hover,#menu-read-story:hover {background:#fff;}
.menu-story-setting {grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 2px;cursor:pointer;}
.menu-story-setting strong {display:block;font-size:14px;font-weight:650;}
.menu-story-setting small {display:block;font-size:12px;color:var(--roam-muted);line-height:1.4;margin-top:4px;}
.menu-story-setting input {appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:20px;background:#c4d1ca;border:1px solid #b2c5ba;flex:0 0 auto;position:relative;cursor:pointer;}
.menu-story-setting input::after {content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0002;transition:transform .18s;}
.menu-story-setting input:checked {background:#335e4d;border-color:#335e4d;}
.menu-story-setting input:checked::after {transform:translateX(18px);}
#menu-read-story {grid-column:1/-1;}
.menu-progress {border-top:1px solid #cbdad3;border-bottom:1px solid #cbdad3;padding:12px 0;margin:4px 0 12px;}
.menu-progress summary {cursor:pointer;padding:4px 0;font-size:13px;font-weight:650;color:#4a6258;}
#menu-stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px;}
#menu-stats .hud-pill {display:block!important;padding:10px 6px;background:#fff7;border:1px solid #fff;border-radius:10px;}
#menu-stats .hud-val {color:var(--roam-ink);font:650 18px/1.3 system-ui,sans-serif;text-shadow:none;}
#menu-stats .hud-label {font-size:9px;letter-spacing:0;}
#pause-overlay .back-btn {padding:8px 0;min-height:40px;background:transparent;border:0;color:#526c60;}
#pause-overlay :is(button,a,input,summary):focus-visible,#pause-btn:focus-visible {outline:3px solid #247c91;outline-offset:3px;}
@media(max-width:700px) {
  #pause-btn {left:10px;top:10px;min-width:74px;padding:0 14px;}
  #hud {right:10px;top:10px;max-width:calc(100vw - 98px);gap:6px;}
  #hud>.hud-pill {padding:7px 10px;}
  #hud .hud-val {font-size:16px;}
  #hud .hud-label {font-size:9px;}
  #field-guide {top:68px;left:10px;}
  #pause-overlay {padding:18px;}
  #pause-overlay .pause-card {padding:25px 22px;border-radius:26px;max-height:calc(100dvh - 72px);}
  #menu-title {font-size:28px;}
}
@media(prefers-reduced-motion:reduce) {.menu-story-setting input::after {transition:none;}}
@supports not (backdrop-filter:blur(1px)) {#pause-overlay .pause-card {background:#f8fcfa;}#field-guide,#hud>.hud-pill,#pause-btn {background:#f3f8f4;}}