:root { --ink: #eaf4f7; --dim: #9fb9c4; --glass: rgba(8, 28, 40, .46); --line: rgba(255, 255, 255, .13); --accent: #7fe3d4; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #06202e; color: var(--ink); font: 14px/1.35 "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.glass { position: fixed; background: var(--glass); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 10px 40px rgba(0, 0, 0, .28); }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }

#title { top: max(14px, env(safe-area-inset-top)); left: 14px; padding: 12px 40px 11px 18px; }
#title h1 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: .02em; }
#title p { margin: 1px 0 0; font-size: 11.5px; color: var(--dim); letter-spacing: .16em; text-transform: uppercase; }

#wx { top: max(14px, env(safe-area-inset-top)); right: 14px; width: 252px; padding: 14px 14px 12px; }
.wx-top { display: flex; align-items: center; gap: 12px; padding-right: 22px; }
#wxTemp { font-size: 40px; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.wx-top b { display: block; font-weight: 600; font-size: 14px; }
.wx-top small { color: var(--dim); font-size: 11px; }
.wx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 6px; margin: 13px 0 12px; }
.wx-grid > div { display: flex; align-items: center; gap: 6px; }
.wx-grid b { display: block; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wx-grid small { display: block; font-size: 9.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .09em; white-space: nowrap; }
#wxArrow { width: 17px; height: 17px; fill: var(--accent); flex: none; transition: transform .8s; }
.seg { display: flex; background: rgba(255, 255, 255, .07); border-radius: 10px; padding: 2px; }
.seg button { flex: 1; border: 0; background: none; padding: 5px 0; border-radius: 8px; font-size: 12px; color: var(--dim); }
.seg button.on { background: rgba(255, 255, 255, .18); color: #fff; }

#places { left: 14px; top: 132px; padding: 30px 6px 6px; display: flex; flex-direction: column; gap: 1px; max-height: calc(100vh - 210px); overflow: auto; scrollbar-width: none; }
#places::before { content: 'Places'; position: absolute; left: 18px; top: 10px; font-size: 10.5px; color: var(--dim); letter-spacing: .14em; text-transform: uppercase; }
#places.min::before { display: none; }
#places button:not(.win-min) { border: 0; background: none; text-align: left; padding: 6px 12px; border-radius: 10px; font-size: 12.5px; color: #d5e6ec; white-space: nowrap; }
#places button:not(.win-min):hover { background: rgba(255, 255, 255, .13); color: #fff; }

/* bottom dock: the walking help sits on top of the toolbar, both centred */
#dock { position: fixed; left: 10px; right: 10px; bottom: max(30px, calc(env(safe-area-inset-bottom) + 22px)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
#bar { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; max-width: 100%; pointer-events: auto; }
.pill { border: 1px solid var(--line); background: rgba(255, 255, 255, .06); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; white-space: nowrap; color: #cfe1e7; transition: background .2s; }
.pill.on { background: rgba(127, 227, 212, .22); border-color: rgba(127, 227, 212, .5); color: #fff; }
#btLive.on { background: rgba(255, 106, 90, .25); border-color: rgba(255, 106, 90, .6); }
#clock { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 52px; text-align: center; }
#time { width: min(300px, 26vw); accent-color: var(--accent); }
.sep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
#btNorth { padding: 3px 6px; display: flex; }
#btSave { margin-top: 8px; padding: 4px 10px; font-size: 11.5px; }
#compass { width: 22px; height: 22px; }

#hint { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); font-size: 12px; color: #dcecf1; background: rgba(8, 28, 40, .5); padding: 6px 14px; border-radius: 999px; pointer-events: none; transition: opacity 1.2s; white-space: nowrap; }
#credit { position: fixed; left: 0; right: 0; bottom: max(6px, env(safe-area-inset-bottom)); text-align: center; font-size: 10px; color: rgba(255, 255, 255, .62); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); padding: 0 8px; pointer-events: none; }
#credit a { pointer-events: auto; }

#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.lb { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 20, 30, .75); pointer-events: auto; cursor: pointer; will-change: transform, opacity; transition: opacity .35s; letter-spacing: .02em; transform-origin: 0 0; }
.lb i { font-style: normal; display: block; font-size: 10px; font-weight: 500; opacity: .8; margin-top: -1px; }
.lb::before { content: ""; position: absolute; left: -9px; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.lb.town { font-size: 15px; letter-spacing: .05em; }
.lb.peak::before { border-radius: 0; background: none; box-shadow: none; border: 4px solid transparent; border-bottom: 7px solid #ffe2a8; top: 0; left: -11px; width: 0; height: 0; }
.lb.peak { color: #ffeccb; }
.lb.sea { color: #bfeaf5; font-style: italic; font-weight: 500; letter-spacing: .14em; }
.lb.sea::before, .lb.sand::before { display: none; }
.lb.sand { color: #fff1cf; font-style: italic; letter-spacing: .1em; }
.lb.wreck { color: #ffc9a8; } .lb.wreck::before { background: #ff9a6b; }
.lb.camp { color: #d9f5c8; font-weight: 500; } .lb.camp::before { background: #9be07a; }
.lb.lake { color: #bfe6ff; } .lb.lake::before { background: #6cc4ff; }
.lb.view { color: #f3e6ff; font-weight: 500; } .lb.view::before { background: #d0a8ff; }

#loading { position: fixed; inset: 0; background: radial-gradient(120% 90% at 50% 40%, #0d3a4d, #041721 70%); display: flex; align-items: center; justify-content: center; z-index: 10; transition: opacity 1.4s; }
.ld-box { text-align: center; }
.ld-title { font-size: 34px; font-weight: 300; letter-spacing: .08em; }
.ld-sub { color: var(--dim); letter-spacing: .3em; text-transform: uppercase; font-size: 11px; margin: 4px 0 26px; }
.ld-bar { width: min(280px, 70vw); height: 6px; background: rgba(255, 255, 255, .14); margin: 0 auto 10px; overflow: hidden; border-radius: 6px; }
.ld-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #4fc3c8, var(--accent)); border-radius: 6px; transition: width .25s ease-out; }
.ld-pct { font-size: 22px; font-weight: 300; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.ld-msg { font-size: 12px; color: var(--dim); }

body.ui-off .glass, body.ui-off #hint, body.ui-off #credit { display: none !important; }
@media (max-width: 820px) {
  #places { display: none; }
  #wx { width: 176px; padding: 9px; right: 8px; }
  #title { left: 8px; max-width: calc(100vw - 200px); }
  #btSpin { display: none; }
  .wx-grid b { font-size: 12.5px; } .wx-grid small { font-size: 8px; letter-spacing: .04em; }
  .wx-top b { font-size: 12.5px; } #wxArrow { width: 13px; height: 13px; }
  .pill { padding: 5px 10px; font-size: 12px; }
  #wxTemp { font-size: 30px; }
  .wx-grid { grid-template-columns: repeat(3, 1fr); gap: 6px 4px; margin: 8px 0; }
  #title { padding: 7px 34px 7px 10px; } #title h1 { font-size: 15px; white-space: nowrap; } #title p { font-size: 8px; letter-spacing: .1em; white-space: nowrap; }
  #dock { bottom: max(44px, calc(env(safe-area-inset-bottom) + 38px)); }      /* clear of the credit lines */
  #bar { flex-wrap: wrap; justify-content: center; border-radius: 18px; }
  #time { width: 46vw; }
  .sep { display: none; }
  #hint { display: none; }
  #credit { font-size: 8px; }
}

.pill.wide { display: block; width: 100%; margin-top: 8px; text-align: center; }
#wx { max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; }
#wxPanel { margin-top: 10px; display: grid; gap: 7px; }
#wxPanel[hidden] { display: none; }
#wxPanel label { display: grid; grid-template-columns: 1fr auto; align-items: center; font-size: 11.5px; color: #cfe1e7; gap: 1px 8px; }
#wxPanel output { font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; }
#wxPanel input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); margin: 0; height: 18px; }
#wxPanel select { grid-column: 1 / -1; background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; font: inherit; font-size: 12px; }
#wxPanel select option { color: #111; }
#wxPanel .chk { grid-template-columns: auto 1fr; justify-content: start; }
#walkHint { position: relative; display: none; font-size: 12px; color: #e6f2f5; background: rgba(8, 28, 40, .55); padding: 8px 36px 8px 16px; border-radius: 14px; text-align: center; pointer-events: none; max-width: min(100%, 760px); }
#walkHint small { color: var(--dim); }
#dot { position: fixed; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35); display: none; pointer-events: none; }
#stick { position: fixed; width: 0; height: 0; display: none; pointer-events: none; }
#stick::before { content: ''; position: absolute; left: calc(var(--r) * -1); top: calc(var(--r) * -1); width: calc(var(--r) * 2); height: calc(var(--r) * 2); box-sizing: border-box; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); background: rgba(8, 28, 40, .18); }
#stick i { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .38); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .25); }
body.walking #walkHint, body.walking #dot { display: block; }
body.walking #title, body.walking #places, body.walking #hint { display: none; }
body.ui-off #walkHint, body.ui-off #dot, body.ui-off #stick { display: none !important; }
/* every window has a button that shrinks it to a small named chip and back */
.win-min { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; gap: 6px; height: 22px; min-width: 22px; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #cfe1e7; font-size: 12px; line-height: 1; white-space: nowrap; pointer-events: auto; }
.win-min span { display: none; }
.win-min i { font-style: normal; font-size: 15px; width: 10px; text-align: center; }
.win-min i::before { content: '\2013'; }
#bar > .win-min { position: static; flex: none; }
.win.min { padding: 0 !important; width: auto !important; min-width: 0; border-radius: 999px; overflow: visible; }
.win.min > :not(.win-min) { display: none !important; }
.win.min > .win-min { position: static; height: auto; padding: 7px 12px; border: 0; background: none; color: #fff; }
.win.min > .win-min span { display: inline; }
.win.min > .win-min i::before { content: '+'; }
@media (max-width: 820px) { #walkHint { font-size: 10.5px; } body.walking #wx { display: none; } }
@media (pointer: coarse) { #walkHint .kb { display: none; } }

/* diving mask and bubbles, shown while the walker's eyes are under the water */
#dive { position: fixed; inset: 0; pointer-events: none; display: none; }
#dive svg, #dive canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* riding in a 4WD: the cabin drawn round the view */
#ride { position: fixed; inset: 0; display: none; pointer-events: none; overflow: hidden; }
#ride .cab { position: absolute; left: -40vw; top: 0; width: 180vw; height: 100vh; will-change: transform; }
#ride .shell { position: absolute; inset: 0; width: 100%; height: 100%; }
#ride .hat { position: absolute; left: calc(50% - 47vmin); top: calc(60vh - 6.5vmin); width: 22vmin; }
#ride .screen { position: absolute; left: calc(50% - 10.5vmin); top: 64vh; width: 21vmin; height: 31vh; min-height: 24vmin; box-sizing: border-box; background: #06080a; border: 0.5vmin solid #2c3035; border-radius: 2vmin; padding: 1vmin; color: #dfe9ee; font: 600 1.7vmin/1.25 system-ui, sans-serif; text-align: center; overflow: hidden; }
#ride .screen .cam { height: 26%; border-radius: 1vmin; background: linear-gradient(#6fa9cf 0 44%, #e6d6a2 45% 100%); position: relative; }
#ride .screen .cam::after { content: ''; position: absolute; left: 30%; right: 30%; top: 45%; bottom: 0; background: linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.7) 10% 14%, transparent 14% 86%, rgba(255,255,255,.7) 86% 90%, transparent 90%); clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%); }
#ride .screen .spd b { font-size: 6.4vmin; line-height: 1.05; display: block; margin-top: 0.8vmin; font-variant-numeric: tabular-nums; }
#ride .screen .spd span { color: #8fa3ad; font-weight: 500; }
#ride .screen .row { display: flex; justify-content: space-between; gap: 1vmin; margin-top: 1vmin; padding: 0.6vmin 1vmin; background: #101820; border-radius: 1vmin; }
#ride .screen .row span:first-child { color: #7fe3d4; }
#ride .screen .near { margin-top: 0.8vmin; color: #9fb4bd; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ride .screen .knobs { position: absolute; left: 0; right: 0; bottom: 1vmin; display: flex; justify-content: center; gap: 2.4vmin; }
#ride .screen .knobs i { width: 2.4vmin; height: 2.4vmin; border-radius: 50%; background: radial-gradient(#555b61, #15181b); }
#ride .dials { position: absolute; left: calc(50% + 32.5vmin); top: calc(64vh + 1vmin); width: 15vmin; color: #cfe7ff; font: 500 1.5vmin system-ui, sans-serif; text-align: center; opacity: .85; }
#ride .dials b { font-size: 3.4vmin; display: block; }
#ride .wheel { position: absolute; left: calc(50% + 19vmin); top: calc(64vh - 3vmin); width: 42vmin; }
#ride .cab::before, #ride .cab::after { content: ''; position: absolute; left: 0; right: 0; height: 40vh; background: #0b0c0d; }
#ride .cab::before { bottom: 100%; } #ride .cab::after { top: 100%; }
#ride .seat { position: absolute; bottom: -4vh; width: 34vmin; height: 20vh; background: linear-gradient(#2a2e32, #111315 30%, #08090a); border-radius: 9vmin 9vmin 0 0; box-shadow: inset 0 0.6vmin 0 rgba(255,255,255,.06); }
#ride .seat.l { left: calc(50% - 54vmin); } #ride .seat.r { left: calc(50% + 22vmin); }
#rideExit { position: absolute; left: 12px; top: 12px; pointer-events: auto; background: rgba(8, 28, 40, .7); color: #fff; }
#ride .tip { position: absolute; left: 0; right: 0; top: 14px; text-align: center; color: rgba(255,255,255,.75); font-size: 12px; text-shadow: 0 1px 3px #000; }
body.riding #title, body.riding #places, body.riding #hint, body.riding #labels { display: none !important; }

/* aboard a boat: instruments and the helm */
#ride .helm { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 8px; pointer-events: auto; background: rgba(8, 28, 40, .45); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 7px 12px; color: #e6f2f5; font: 500 12.5px system-ui, sans-serif; max-width: 94vw; }
#ride .helm .gauges { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
#ride .helm .gauges b { color: #7fe3d4; font-size: 15px; font-variant-numeric: tabular-nums; }
#ride .helm .where { color: #9fb4bd; }
#ride .helm .keys { display: none; align-items: center; gap: 8px; }
#ride.steering .helm .keys { display: flex; }
#ride .helm .keys .pill { min-width: 44px; min-height: 40px; font-size: 16px; touch-action: none; user-select: none; }
#ride .helm .spokes { width: 64px; height: 64px; transition: transform .12s linear; }
#ride.incar .helm .gauges { display: none; }
#ride.incar .helm .spokes { display: none; }
#ride .helm i { font-style: normal; }
#ride .wheel { transform-origin: 50% 50%; transition: transform .1s linear; }
@media (max-width: 640px) { #ride .tip { top: 48px; } }
#ride.incar .helm { left: 14px; transform: none; }