:root{--ink:#0b252e;--cream:#fff6df;--gold:#ffc260;--mint:#83e4cd;--muted:#a9c4c7;--line:#ffffff24;color-scheme:dark;font-family:Arial,Helvetica,sans-serif;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--cream);overscroll-behavior:none;touch-action:none}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation;border:1px solid var(--line);color:var(--cream);background:#14333b;border-radius:8px;min-height:48px;padding:12px 22px;font-weight:700;transition:background .15s,transform .15s}button:hover{background:#244c52}button:active{transform:scale(.98)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--mint);outline-offset:3px}button.primary{background:var(--gold);color:var(--ink);border-color:var(--gold)}button.primary:hover{background:#ffd38c}button.secondary{background:#ffffff12}button.quiet{border:0;background:transparent;color:var(--muted)}button:disabled{opacity:.4;cursor:default}input[type=text],input[type=url],select{width:100%;background:#08212a;color:var(--cream);border:1px solid #557477;border-radius:7px;padding:12px 14px;min-height:46px}input[type=range]{accent-color:var(--gold);touch-action:none}label{font-size:13px;color:var(--muted);display:block;margin:14px 0 7px}h1,h2,h3,p{margin:0}h2{font:600 clamp(25px,4vw,42px)/1.13 Georgia,serif;letter-spacing:-1px}h3{font-size:20px}p{color:var(--muted);line-height:1.6;font-size:14px}small{color:var(--muted)}[hidden]{display:none!important}#sea,#shade,#labels,#ui,#hud{position:absolute;inset:0;width:100%;height:100%}#sea{display:block}#shade{pointer-events:none;background:linear-gradient(90deg,#071d2bec 0%,#071d2b8a 42%,transparent 78%),linear-gradient(0deg,#071d2bbb,transparent 35%)}body.racing #shade{background:linear-gradient(180deg,#071d2b80,transparent 23%,transparent 66%,#071d2b80)}#labels{pointer-events:none}.boat-label{position:absolute;text-align:center;font-size:11px;font-weight:bold;background:#0b252ebb;padding:4px 8px;border-radius:12px;white-space:nowrap;transform:translate(-50%,-50%)}#ui{padding:clamp(20px,4vw,54px);padding-left:max(clamp(20px,4vw,54px),env(safe-area-inset-left));display:flex;flex-direction:column;pointer-events:none}#ui>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:13px;font-size:14px;font-weight:bold;letter-spacing:3px}.brand img{width:40px;height:40px;border-radius:9px}.eyebrow{text-transform:uppercase;font-size:10px;letter-spacing:2px;font-weight:700;color:var(--muted);display:block}.hero{max-width:560px;margin:auto 0}.hero .eyebrow{color:var(--gold);margin-bottom:18px;letter-spacing:3px}.hero h1{font:600 clamp(52px,8.8vw,120px)/.88 Georgia,serif;letter-spacing:-5px;text-shadow:0 2px 20px #03232844}.hero h2{font:400 clamp(21px,3vw,34px)/1.2 Georgia,serif;letter-spacing:0;margin-top:20px}.hero p{max-width:360px;margin-top:16px}.hero-actions{display:flex;gap:12px;margin-top:30px}.hero-actions button{min-width:158px}.menu-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted)}.menu-footer nav{display:flex;gap:10px}.menu-footer button{min-height:40px;padding:8px 12px;font-size:12px}.edition{position:absolute;right:4vw;top:7vh;text-align:right}.edition strong{font:italic 23px Georgia;color:var(--cream);display:block;margin:5px 0}.panel{width:min(520px,100%);margin:auto;padding:28px;border:1px solid #ffffff28;border-radius:14px;background:#0b252ef0;box-shadow:0 22px 80px #0005;max-height:100%;overflow-y:auto;touch-action:pan-y}.panel.wide{width:min(780px,100%)}.panel .eyebrow{color:var(--gold);margin-bottom:10px}.panel h2{margin-bottom:14px}.panel p{margin-bottom:16px}.row{display:flex;gap:12px;align-items:center}.row>*{flex:1}.row .small{flex:0 0 auto}.panel .row{margin-top:14px}.subtle{font-size:11px;color:var(--muted);margin-top:12px}.back{align-self:flex-start;padding:9px 0;min-height:38px;border:0;background:none;color:var(--muted);font-size:12px}.room-code{background:#ffffff0c;border-radius:8px;padding:16px;text-align:center;margin:18px 0}.room-code strong{font-size:30px;letter-spacing:8px;color:var(--gold);display:block;margin:7px 0}.roster{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.sailor{display:flex;align-items:center;gap:9px;padding:12px;background:#ffffff09;border-radius:7px;font-size:13px;min-width:0}.sailor .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sailor small{font-size:10px}.sailor i{height:8px;width:8px;border-radius:50%;background:var(--gold)}.sailor.ready i{background:var(--mint)}.sailor.absent{opacity:.5}.empty-slot{border:1px dashed #ffffff20;padding:12px;color:#78999e;border-radius:7px;font-size:12px}.inline-error{color:#ffbcac;font-size:13px;line-height:1.5;min-height:20px;margin:10px 0}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}.step{border-top:1px solid var(--line);padding-top:18px}.step b{display:block;color:var(--gold);font:32px Georgia;margin-bottom:10px}.step h3{font-size:16px;margin-bottom:8px}.step p{font-size:12px}.pill{display:inline-block;padding:5px 8px;border:1px solid var(--line);border-radius:5px;color:var(--mint);font-size:11px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 25px}.settings-grid label{margin-top:0}.settings-grid input{width:100%}#hud{pointer-events:none;padding:24px max(28px,env(safe-area-inset-left)) 20px max(28px,env(safe-area-inset-right))}.hud-top{display:flex;align-items:start;gap:20px}.race-info>div{display:flex;align-items:baseline;gap:8px;margin-top:2px}.race-info strong{font:52px/.95 Georgia}.race-info #field-size{font-size:18px;color:var(--muted)}.race-info b{font-size:14px}.divider{width:1px;height:25px;background:var(--line);margin:0 12px}.timer{text-align:right;margin-left:auto}.timer b{display:block;font-size:25px;font-variant-numeric:tabular-nums;margin:5px 0}.timer small{font-size:10px}#pause-btn{pointer-events:auto;padding:10px 18px;min-height:48px;background:#0b252ecb}#checkpoint{position:absolute;left:50%;top:26px;transform:translateX(-50%);text-align:center}#checkpoint strong{display:block;font-size:16px;margin:7px 0 3px}#checkpoint small{font-size:12px;color:var(--gold)}#wind{position:absolute;right:34px;top:125px;text-align:center}.compass{position:relative;width:68px;height:68px;margin:10px auto 6px;border:1px solid #fff8;border-radius:50%;background:#0b252e66;display:flex;align-items:center;justify-content:center}.compass span{font-size:44px;line-height:1;display:block;color:var(--gold)}.compass i{position:absolute;top:4px;right:8px;font-size:8px;font-style:normal}#wind b{font-size:12px}#countdown{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font:110px Georgia;color:var(--cream);text-shadow:0 4px 40px #072530}#race-message{position:absolute;left:50%;top:27%;transform:translateX(-50%);font-size:14px;padding:8px 15px;max-width:60%;text-align:center;color:var(--cream);text-shadow:0 2px 8px #000;background:#0b252e88;border-radius:7px}#race-message:empty{display:none}.speed{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);text-align:center}.speed strong{font:56px/.95 Georgia;display:block}.speed>span{font-size:9px;letter-spacing:2px}.speed small{display:block;font-size:11px;margin-top:9px}#minimap{position:absolute;left:28px;top:126px;width:155px;height:140px;border-radius:10px;background:#07242b88;border:1px solid #ffffff24}#controls{position:absolute;bottom:30px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:end;pointer-events:none}#helm{pointer-events:auto;touch-action:none;position:relative;width:180px;height:80px;border:1px solid #ffffff55;background:#0b252e99;border-radius:48px;display:flex;align-items:center;justify-content:center}#helm:before{content:'';width:135px;border-top:1px solid #ffffff55}#helm-knob{position:absolute;width:62px;height:62px;border-radius:50%;background:#e8efe4e6;color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 2px 16px #0004}#helm>span{position:absolute;bottom:-17px;font-size:8px;letter-spacing:2px}.trim-wrap{width:210px;padding:16px;background:#0b252ebd;border:1px solid #ffffff44;border-radius:12px;pointer-events:auto}.trim-wrap>div:first-child{display:flex;justify-content:space-between}.trim-wrap b{font-size:11px;color:var(--gold)}.trim-track{position:relative;margin:11px 0 4px}.trim-track input{width:100%;margin:0;height:30px}.trim-track i{position:absolute;left:50%;top:0;height:30px;width:3px;background:var(--mint);pointer-events:none;border-radius:2px;box-shadow:0 0 8px #83e4cd88}.trim-labels{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:var(--muted)}#modal{position:absolute;inset:0;background:#041a27a6;backdrop-filter:blur(8px);display:flex;padding:24px;z-index:10}#connection-banner{position:absolute;top:90px;left:50%;transform:translateX(-50%);max-width:85%;padding:10px 16px;background:#704e18ed;border-radius:8px;font-size:12px;text-align:center;z-index:20}#connection-banner button{min-height:30px;padding:4px 12px;margin-left:10px;font-size:12px}#toast{position:absolute;left:50%;bottom:15%;transform:translateX(-50%);padding:12px 22px;background:#0b252ef5;border:1px solid var(--line);border-radius:8px;font-size:13px;z-index:30;max-width:90%;text-align:center}#rotate{display:none}.results-table{width:100%;border-collapse:collapse;font-size:13px;margin:20px 0}.results-table th{text-align:left;font-size:9px;letter-spacing:2px;color:var(--muted);padding:10px}.results-table td{padding:11px 10px;border-top:1px solid var(--line)}.results-table td:last-child,.results-table th:last-child{text-align:right;font-variant-numeric:tabular-nums}.results-table tr.me{background:#ffc26016;color:var(--gold)}.results-table td:first-child{font:21px Georgia;width:45px}.results-table .ai-tag{color:var(--muted);font-size:10px}.finish-note{color:var(--mint)!important}.info-scroll{max-height:48vh;overflow:auto;touch-action:pan-y}.info-scroll p{margin-bottom:12px}a{color:var(--gold)}
@media(max-height:620px){#ui{padding:20px 30px}.hero .eyebrow{margin-bottom:12px}.hero h1{font-size:64px}.hero h2{font-size:25px;margin-top:12px}.hero p{font-size:12px;margin-top:10px}.hero-actions{margin-top:18px}.hero-actions button{min-height:45px;padding:10px 20px}.brand{font-size:11px}.brand img{width:28px;height:28px}.panel{padding:20px;max-height:100%}.panel h2{font-size:29px}.panel p{font-size:12px;margin-bottom:10px}.panel .row{margin-top:10px}.room-code{padding:8px;margin:9px 0}.room-code strong{font-size:24px;margin:4px 0}.roster{gap:5px;margin:9px 0}.sailor,.empty-slot{padding:8px}.steps{margin:14px 0;gap:16px}.step{padding-top:12px}.step b{font-size:25px;margin-bottom:8px}.results-table{margin:10px 0}.results-table td{padding:7px 10px}.results-table th{padding:6px 10px}#hud{padding:16px 22px}.race-info strong{font-size:39px}.timer b{font-size:21px}#checkpoint{top:17px}#minimap{top:97px;left:23px;width:112px;height:101px}#wind{top:93px;right:25px}.compass{width:53px;height:53px;margin:5px auto}.compass span{font-size:36px}#controls{bottom:23px;left:24px;right:24px}#helm{width:155px;height:65px}#helm-knob{width:53px;height:53px}.trim-wrap{width:175px;padding:11px}.speed{bottom:24px}.speed strong{font-size:43px}#race-message{top:30%;font-size:12px}.eyebrow{font-size:9px}.edition{top:7vh}.settings-grid{gap:10px 20px}}
@media(max-width:700px){.edition{display:none}.hero h1{font-size:57px;letter-spacing:-3px}.hero p{max-width:280px}.hero-actions button{min-width:125px}.menu-footer>span{display:none}.timer{margin-left:auto}#checkpoint{top:78px}.race-info b{font-size:11px}.divider{margin:0 3px}.timer b{font-size:18px}#wind{top:145px}#minimap{top:135px;width:90px;height:81px}.speed small{max-width:125px}#mode-tag{font-size:8px;letter-spacing:1px}}
@media(orientation:portrait) and (max-width:650px){#rotate{position:absolute;inset:0;background:#0b252eea;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;text-align:center;padding:40px;z-index:50;pointer-events:none}#rotate strong{font:32px Georgia}#rotate span{line-height:1.6;color:var(--muted)}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
#ui{padding-top:max(clamp(20px,4vw,54px),var(--safe-top));padding-right:max(clamp(20px,4vw,54px),var(--safe-right));padding-bottom:max(clamp(20px,4vw,54px),var(--safe-bottom));padding-left:max(clamp(20px,4vw,54px),var(--safe-left))}#hud{padding: max(24px,var(--safe-top)) max(28px,var(--safe-right)) max(20px,var(--safe-bottom)) max(28px,var(--safe-left))}#modal{padding:max(24px,var(--safe-top)) max(24px,var(--safe-right)) max(24px,var(--safe-bottom)) max(24px,var(--safe-left))}#controls{left:max(30px,var(--safe-left));right:max(30px,var(--safe-right));bottom:max(30px,var(--safe-bottom))}#minimap{left:max(28px,var(--safe-left))}#wind{right:max(34px,var(--safe-right))}.menu-footer nav{min-width:0}.menu-footer [data-action=profile]{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-height:620px){#ui{padding:max(20px,var(--safe-top)) max(30px,var(--safe-right)) max(20px,var(--safe-bottom)) max(30px,var(--safe-left))}#hud{padding:max(16px,var(--safe-top)) max(22px,var(--safe-right)) 20px max(22px,var(--safe-left))}#controls{left:max(24px,var(--safe-left));right:max(24px,var(--safe-right));bottom:max(23px,var(--safe-bottom))}#minimap{left:max(23px,var(--safe-left))}#wind{right:max(25px,var(--safe-right))}}
@media(max-height:360px) and (orientation:landscape){#ui{padding:max(12px,var(--safe-top)) max(20px,var(--safe-right)) max(12px,var(--safe-bottom)) max(20px,var(--safe-left))}.brand img{width:24px;height:24px}.hero .eyebrow,.hero p{display:none}.hero h1{font-size:46px}.hero h2{font-size:21px;margin-top:8px}.hero-actions{margin-top:12px}.hero .subtle{margin-top:8px}.menu-footer nav{gap:3px}.menu-footer button{padding:6px 10px;min-height:36px}.menu-footer [data-action=profile]{max-width:130px}#wind{top:91px}#minimap{top:114px}#race-message{top:43%;max-width:48%}}
#boost{pointer-events:auto;touch-action:none;position:relative;overflow:hidden;width:72px;height:72px;min-height:0;padding:0;margin:0 14px 0 auto;border-radius:50%;border:2px solid #ffffff55;background:#0b252ecc;font-size:10px;letter-spacing:2px;color:var(--muted)}#boost i{position:absolute;left:0;right:0;bottom:0;height:0;background:#ffc26055;pointer-events:none}#boost span{position:relative;pointer-events:none}#boost.ready{border-color:var(--gold);background:var(--gold);color:var(--ink);box-shadow:0 0 18px #ffc26088}#boost.ready i{display:none}#boost.active{border-color:var(--mint);background:var(--mint);color:var(--ink)}#boost.active i{display:none}
@media(max-height:620px){#boost{width:60px;height:60px;margin-right:10px}}
#fps{position:fixed;z-index:30;top:8px;left:8px;padding:4px 7px;border-radius:5px;background:#09232dcc;color:#fff;font:600 11px/1.2 ui-monospace,monospace;pointer-events:none}
.language-toggle{margin-left:auto;min-height:36px;padding:7px 13px;font-size:12px;letter-spacing:0}
.hub-screen{width:min(900px,100%);margin:auto;display:grid;gap:14px}.hub-screen h1{font:600 clamp(38px,7vw,76px)/1 Georgia,serif;letter-spacing:-3px}.hub-screen>p{max-width:600px}.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;margin-top:12px}.game-card{position:relative;display:grid;grid-template-columns:64px 1fr;gap:4px 16px;padding:22px;border:1px solid #ffffff26;border-radius:12px;background:#09242ac9;box-shadow:0 18px 48px #001b2270;backdrop-filter:blur(12px)}.game-card>img{grid-row:1 / span 3;width:64px;height:64px;border-radius:12px}.game-card .eyebrow,.game-card h2,.game-card p,.game-card button{grid-column:2}.game-card h2{font:600 30px/1.1 Georgia,serif}.game-card p{margin:5px 0 12px}.game-card button{justify-self:start}.hub-future{font-size:12px}.brand{width:100%}
@media(max-width:600px){.hub-screen{margin:auto 0}.game-card{padding:16px;grid-template-columns:48px 1fr;gap:5px 12px}.game-card>img{width:48px;height:48px}}
/* Shared canvas layers; the Mandadi-only HUD fragment is mounted by its game entry. */
#mandadi-shell{display:contents}
#sea{z-index:0}
#shade{z-index:1}
#labels{z-index:2}
#ui{z-index:3}
#hud{z-index:4}
#modal{z-index:20}
#connection-banner,#toast{z-index:30}
.brand img.brand-logo{width:auto;height:clamp(64px,22vh,170px);border-radius:0}@media(max-height:360px) and (orientation:landscape){.brand img.brand-logo{height:44px}}
/* Web-only hub helpers (hidden in the Android app): link back to the website, fullscreen, rotate hint. */
.brand{flex-wrap:wrap}.web-tools{display:flex;gap:8px;align-items:center}.web-link{display:inline-flex;align-items:center;min-height:36px;padding:7px 13px;border:1px solid var(--line);border-radius:8px;color:var(--cream);text-decoration:none;font-size:12px;letter-spacing:0;background:#ffffff0d}.web-link:hover{background:#ffffff1f}.web-link:focus-visible{outline:3px solid var(--mint);outline-offset:3px}.web-fullscreen{min-height:36px;padding:7px 13px;font-size:12px;letter-spacing:0}.web-rotate{display:none}
@media(orientation:portrait) and (max-width:700px){.web-rotate{display:block;margin:10px 0 0;padding:10px 14px;border:1px solid #ffc26066;border-radius:10px;background:#ffc2601a;color:var(--cream);font-size:13px;line-height:1.45}}