:root{color-scheme:dark;--gold:#f3dca6;--glass:#081d2bc9}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:system-ui,sans-serif;color:#fff5e3;background:#102c3c}#game{height:100dvh;position:relative;overflow:hidden}#world{display:block;width:100%;height:100%;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#04121d70,transparent 22%,transparent 65%,#03142199)}header{position:absolute;left:24px;right:24px;top:max(18px,env(safe-area-inset-top));display:flex;align-items:center;gap:10px;z-index:5}header>a{margin-right:auto;font-size:12px;letter-spacing:.15em;font-weight:800}a{color:var(--gold);text-decoration:none}header>span{font-size:11px;letter-spacing:.13em;margin-right:15px}i{display:block;font:9px monospace;color:#cbdbe3;text-align:right;margin-top:4px}button{min-height:46px;padding:10px 18px;color:#fff4db;background:var(--glass);border:1px solid #ffffff35;border-radius:99px;font:600 13px system-ui;cursor:pointer;touch-action:manipulation}button:hover{background:#245267}button.primary{background:var(--gold);color:#163344;font-size:17px;border:0;padding:17px 30px;box-shadow:0 8px 35px #0003}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffdc8a;outline-offset:4px}.eyebrow{font:11px monospace;letter-spacing:.16em;color:var(--gold)}.navigation{position:absolute;top:96px;left:26px;background:var(--glass);padding:16px 20px;border:1px solid #ffffff24;border-radius:22px;min-width:250px}.navigation h2{font-size:20px;letter-spacing:-.03em;margin:5px 0 10px}.navigation>div{display:flex;align-items:center;gap:15px;font:12px monospace;color:#c8d9e2}#bearing{font-size:25px;color:var(--gold);display:inline-block}#routeStage{font-size:9px;margin-left:auto}.instruments{position:absolute;top:96px;right:26px;display:flex;gap:1px;border:1px solid #ffffff26;border-radius:22px;overflow:hidden;background:var(--glass)}.instruments>div{min-width:95px;display:flex;flex-direction:column;text-align:center;padding:14px}.instruments span,.instruments small{font:9px monospace;letter-spacing:.1em;color:#b4cbd6}.instruments strong{font:32px monospace;line-height:1.5}.radio{position:absolute;top:207px;left:28px;width:min(360px,45vw);text-shadow:0 2px 6px #000}.radio span{font:10px monospace;color:var(--gold);letter-spacing:.15em}.radio p{font-size:13px;line-height:1.5;margin:6px 0}#warning{position:absolute;left:50%;top:26%;transform:translateX(-50%);background:#873817e6;border:1px solid #ffc6a7;padding:12px 22px;border-radius:99px;font:700 13px monospace;white-space:nowrap}.controls{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:30px;right:30px;display:flex;justify-content:space-between;align-items:end;pointer-events:none}.controls>*{pointer-events:auto}.stickWrap{display:flex;flex-direction:column;align-items:center;gap:12px;font:9px monospace;letter-spacing:.15em;color:#c2d4dd}#stick{height:150px;width:150px;border:1px solid #ffffff50;background:radial-gradient(circle,#ffffff15,#09283965);border-radius:50%;position:relative;touch-action:none;user-select:none;-webkit-user-select:none}.crosshair{position:absolute;left:50%;top:10%;height:80%;width:1px;background:#ffffff22}.crosshair:after{content:'';position:absolute;top:50%;left:-60px;width:120px;height:1px;background:#ffffff22}#knob{position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px;background:#e7d7b9d9;border:2px solid #fff8e4;border-radius:50%;box-shadow:0 4px 16px #0004;pointer-events:none}.throttle{width:220px;background:var(--glass);border:1px solid #ffffff2b;padding:18px 22px;border-radius:24px}.throttle label{font:11px monospace;display:flex;justify-content:space-between}.throttle input{width:100%;min-height:48px;accent-color:var(--gold);touch-action:none}.throttle>span{font:8px monospace;color:#acc1ce}.objective{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);max-width:35%;text-align:center;font:12px/1.6 monospace;color:#ffebbf;text-shadow:0 2px 7px #000}#map{position:absolute;right:30px;bottom:190px;width:150px;height:150px;background:#09222bd9;border:1px solid #ffffff35;border-radius:50%}.overlay{position:absolute;inset:0;display:flex;align-items:center;padding:7vw;background:linear-gradient(90deg,#061824c9,transparent 95%);z-index:6}.briefCard{max-width:590px}.briefCard h1{font-size:clamp(48px,7vw,100px);line-height:.95;letter-spacing:-.065em;margin:25px 0}.lead{font-size:18px;color:#dde7e9;line-height:1.65}.briefSteps{display:flex;gap:20px;margin:30px 0;font-size:12px}.briefSteps b{display:block;font:12px monospace;color:var(--gold);margin-bottom:8px}.hint{font-size:12px;color:#c3d0d8;line-height:1.7;margin-top:24px}.fine{font:10px monospace;color:#9fb6c4}.compact{padding:35px;background:#0a2233ec;border:1px solid #ffffff30;border-radius:30px;max-width:520px}.compact h1{font-size:48px}.compact p{line-height:1.7}.compact button,.compact a{display:block;margin-top:18px}#unsupported{background:#0a2233}[hidden]{display:none!important}@media(max-width:700px){header{left:14px;right:14px;top:12px}header>span{display:none}header>a{font-size:10px;letter-spacing:.06em}header button{padding:8px 12px;font-size:11px}.navigation{left:14px;top:77px;padding:12px;min-width:180px}.navigation h2{font-size:15px}.navigation .eyebrow{font-size:8px}.instruments{top:176px;right:14px}.instruments>div{min-width:62px;padding:8px}.instruments strong{font-size:22px}.instruments span,.instruments small{font-size:7px}.radio{left:16px;top:175px;width:42vw}.radio p{font-size:11px}.controls{left:15px;right:15px;bottom:22px}#stick{width:126px;height:126px}.throttle{width:155px;padding:14px}.throttle>span{display:none}#map{right:18px;bottom:155px;width:105px;height:105px}.objective{bottom:185px;left:18px;transform:none;max-width:50%;font-size:10px;text-align:left}.overlay{padding:25px}.briefCard h1{font-size:62px}.lead{font-size:15px}.briefSteps{gap:15px;font-size:10px}.hint{font-size:10px}#warning{top:40%;font-size:10px;padding:9px 12px}}@media(max-height:530px){.navigation{top:68px;padding:10px}.navigation h2{font-size:15px;margin:3px 0}.radio{top:160px;width:230px}.radio p{font-size:11px}.instruments{top:68px}.instruments strong{font-size:22px}.instruments>div{padding:8px;min-width:75px}#map{width:100px;height:100px;bottom:150px}.controls{bottom:14px}#stick{width:115px;height:115px}.stickWrap{gap:5px}.throttle{padding:10px 15px;width:180px}.objective{bottom:25px}.overlay{padding:30px 6vw}.briefCard{max-width:600px}.briefCard h1{font-size:48px;margin:10px 0}.lead{font-size:13px;margin:10px 0}.briefSteps{margin:14px 0}.hint{margin:12px 0;font-size:10px}.fine{font-size:9px}.primary{padding:12px 25px!important}}


.scoreboard{position:absolute;right:26px;top:210px;border-radius:20px;background:var(--glass);padding:12px 18px;display:flex;flex-direction:column;gap:3px;min-width:170px;pointer-events:none}.scoreboard span{font:9px monospace;letter-spacing:.12em;color:var(--gold)}.scoreboard strong{font:28px monospace}.scoreboard small{font:11px monospace;color:#a8f5df}#pickup{position:absolute;top:36%;left:50%;transform:translateX(-50%);padding:10px 20px;border-radius:24px;background:#092a35dc;color:#fff0ae;font-weight:700;text-align:center;pointer-events:none}#pointReport>strong{display:block;color:var(--gold);font-size:26px}#pointReport dl{margin:12px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}#pointReport dl div{display:flex;justify-content:space-between;gap:12px;font-size:12px}#pointReport dd{margin:0;color:#a8f5df}#pointReport small{font-size:10px;color:#bfd1db}.overlay{overflow-y:auto}.compact{margin:auto 0}#finish .compact h1{font-size:36px;margin:12px 0}#finish .compact{padding:24px}#finish .compact p{margin:10px 0;font-size:12px}@media(max-width:700px){.scoreboard{top:267px;right:14px;padding:10px 14px;min-width:145px}.scoreboard strong{font-size:23px}#pickup{top:47%;font-size:12px;max-width:80%}}@media(max-height:530px){.scoreboard{top:154px;right:26px;padding:8px 14px;min-width:145px}.scoreboard strong{font-size:21px}#finish{align-items:flex-start}#finish .compact h1{font-size:28px}}


/* Palm Beach beta: safe areas and a clear centre view on phones. */
.palmBeta .graphicsSetting{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:12px;color:#d5e4e8}
.palmBeta select{max-width:100%;min-height:44px;border-radius:14px;padding:8px 12px;background:#102c3c;color:#fff4db;border:1px solid #ffffff50}
.palmBeta #rotateScreen{z-index:20;background:#071d29ed;justify-content:center}
.palmBeta .overlay{padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom));align-items:safe center}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){
.palmBeta header{left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));top:max(6px,env(safe-area-inset-top));gap:6px}
.palmBeta header>span{display:none}.palmBeta header button{min-height:44px;padding:8px 12px}
.palmBeta .navigation{left:max(14px,env(safe-area-inset-left));top:58px;min-width:160px;padding:7px 10px;border-radius:16px}
.palmBeta .navigation .eyebrow{display:none}.palmBeta .navigation h2{font-size:14px}.palmBeta .navigation>div{font-size:10px;gap:8px}
.palmBeta .instruments{right:max(14px,env(safe-area-inset-right));top:58px;border-radius:16px}.palmBeta .instruments>div{min-width:62px;padding:5px}.palmBeta .instruments strong{font-size:20px}.palmBeta .instruments>div:last-child{display:none}
.palmBeta .scoreboard{top:58px;left:50%;right:auto;transform:translateX(-50%);min-width:128px;padding:6px 12px;border-radius:16px}.palmBeta .scoreboard strong{font-size:20px}.palmBeta .scoreboard span{display:none}
.palmBeta .controls{left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom))}
.palmBeta #stick{width:104px;height:104px}.palmBeta .crosshair:after{left:-42px;width:84px}.palmBeta #knob{width:46px;height:46px;margin:-23px}
.palmBeta .stickWrap{gap:3px}.palmBeta .stickWrap>span,.palmBeta .throttle>span{display:none}
.palmBeta .throttle{width:164px;padding:8px 12px;border-radius:18px}.palmBeta .throttle input{min-height:44px}
.palmBeta .boostControls small{font-size:8px}.palmBeta .rollControls small{display:none}.palmBeta .rollControls button{padding:6px 8px;font-size:10px}
.palmBeta #hud #map{width:68px;height:68px;left:50%;right:auto;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%)}
.palmBeta .radio{top:118px;left:50%;transform:translateX(-50%);width:38vw;text-align:center}.palmBeta .radio span{font-size:8px}.palmBeta .radio p{font-size:10px;line-height:1.3;margin:3px}
.palmBeta .objective{bottom:82px;left:50%;transform:translateX(-50%);max-width:38%;font-size:9px;text-align:center}
.palmBeta #pickup{top:45%;font-size:12px;padding:7px 14px}.palmBeta #warning{top:36%;font-size:10px;max-width:65%;white-space:normal;text-align:center}
.palmBeta .overlay{align-items:flex-start}.palmBeta .briefCard{max-width:540px}.palmBeta .briefCard h1{font-size:38px}.palmBeta .briefSteps{margin:10px 0}
}

.palmBeta header>a{display:flex;align-items:center;gap:8px}.brandLogo{width:32px;height:32px;border-radius:9px}.reportLogo{width:64px;height:64px;border-radius:16px;display:block;margin-bottom:12px}

#missionStatus{position:absolute;top:66px;left:50%;transform:translateX(-50%);font:10px monospace;color:#e1caff;background:#201738bb;padding:6px 12px;border-radius:20px;pointer-events:none;max-width:80%;text-align:center}@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){#missionStatus{top:6px;max-width:35%;font-size:8px;padding:4px 8px}}