:root{color-scheme:dark;--ink:#f4f5eb;--muted:#ccd5ce;--gold:#d5d7a7;--glass:rgba(15,32,33,.65);--line:rgba(233,242,224,.19)}
.game-navigation { display: none; }
.mobile-panel-toggle { display: none; }
#gust-status{margin-top:5px;font-size:8px;color:#cbd7ca;white-space:nowrap}#gust-status.in-gust{color:#efcf86}.gust-help{display:block;margin-top:8px;font-size:10px;line-height:1.5;color:var(--muted);font-weight:400}
.river-legend{display:block;font-size:8px;line-height:1.4;color:#b8d9d1;margin-top:7px}
#race-panel .race-standing{margin-top:16px;padding-bottom:9px;border-bottom:1px solid var(--line);align-items:center;font-size:10px;color:#d1dbcb}#race-panel>div:last-of-type{display:flex;justify-content:space-between;font-size:11px}#race-position{font-size:22px;font-weight:400;color:#ecedce}#race-opponent{display:block;color:#f1ba78;margin:9px 0 7px}#opponent-legend i{background:#f1ba78}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:#8ba6a7;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px}button,a,input,select{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #d3dc9b;outline-offset:4px}button{border:0;background:none}a{color:inherit;text-decoration:none}#scene{position:fixed;width:100%;height:100%;inset:0;display:block;touch-action:none}#vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(12,30,30,.44),transparent 57%),linear-gradient(0deg,rgba(6,23,25,.2),transparent 40%)}body.playing #vignette{background:linear-gradient(0deg,rgba(5,20,22,.16),transparent 32%)}.hidden{display:none!important}.topbar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:28px 38px;z-index:5}.wordmark{display:flex;align-items:center;gap:14px;font-size:25px;letter-spacing:5px;font-weight:500}.wordmark svg{height:33px;width:29px;fill:var(--ink)}.tagline{display:block;font-size:8px;letter-spacing:2.45px;margin-top:5px;font-weight:500}.top-actions{display:flex;gap:9px;align-items:center}.icon-btn{width:37px;height:37px;border-radius:50%;font-size:21px;border:1px solid var(--line);background:rgba(16,39,41,.28);backdrop-filter:blur(8px)}.icon-btn:hover{background:rgba(44,65,56,.7)}.live-pill{display:flex;gap:8px;align-items:center;font-size:9px;letter-spacing:1.8px;margin-right:15px}.live-pill i{width:5px;height:5px;border-radius:50%;background:#d4d999;box-shadow:0 0 9px #d4d966}.welcome{position:fixed;left:7.3%;top:21%;width:420px;z-index:3}.eyebrow{font-size:9px;letter-spacing:2.4px;display:flex;align-items:center;gap:12px;font-weight:500}.welcome .eyebrow>span{height:1px;width:31px;background:var(--gold)}h1{font-size:clamp(48px,5.45vw,84px);line-height:1.03;letter-spacing:-3px;font-weight:400;margin:24px 0}h1 em,h2 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-2px;color:#dfe6c0}.welcome>p{font-size:14px;line-height:1.8;color:#e4e8df;letter-spacing:.15px}.welcome-specs{display:flex;gap:21px;margin:27px 0 30px;font-size:9px;line-height:1.4;color:#e0e4d9}.welcome-specs b{display:block;font-size:18px;font-weight:400;margin-bottom:3px}.primary{background:#e5e7d0;color:#183234;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:53px;padding:15px 20px;font-size:12px;font-weight:600;letter-spacing:.4px;border-radius:2px;transition:background .2s}.primary:hover{background:#f0f1df}.primary>span:last-child{font-size:24px;font-weight:300}.start-options{margin-top:15px;display:flex;flex-direction:column;align-items:flex-start;gap:15px;font-size:10px;color:#d8ddd2}.start-options button{padding:0}.start-options button:first-child{font-size:11px;letter-spacing:.4px}.start-options span{margin-left:15px}.load-status{height:1px;background:var(--line);margin-top:18px}.load-status div{height:1px;background:#e2e5bb;width:3%;transition:width .5s}.welcome>small{font-size:9px;color:#cad3c8;display:block;margin-top:8px}.location-note{position:fixed;right:38px;bottom:40px;text-align:right}.location-note span{font-size:8px;letter-spacing:2px;display:block}.location-note b{display:block;font-size:19px;font-family:Georgia,serif;font-weight:400;margin:10px 0 8px}.location-note small{font-size:9px;letter-spacing:.4px}.glass{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 35px #0d292219;border-radius:4px}.instruments{position:fixed;bottom:65px;left:50%;transform:translateX(-50%);display:flex;align-items:center;padding:17px 25px;gap:29px;max-width:calc(100vw - 40px)}.speed-instrument{min-width:105px;white-space:nowrap}.speed-instrument strong{font-size:43px;font-weight:300;letter-spacing:-1.5px}.speed-instrument>span{font-size:9px;color:#bac8bf;margin-left:6px}.speed-instrument>.eyebrow{font-size:8px;letter-spacing:1.8px;margin-bottom:5px}.instrument>span,.wind-instrument span,.trim-instrument span{font-size:8px;letter-spacing:1.5px;color:#c0cdc2}.instrument b{font-size:23px;font-weight:300;display:block;margin:8px 0}.instrument small,.wind-instrument small,.trim-instrument small{font-size:9px;display:block;color:#b3c2b7;white-space:nowrap}.instrument{min-width:78px}.wind-instrument{display:flex;align-items:center;gap:10px;min-width:178px}.wind-instrument svg{width:63px;height:63px;overflow:visible}.wind-instrument b{display:block;font-size:19px;font-weight:300;margin:8px 0 5px}.wind-instrument circle{stroke:#bac8b44d;stroke-width:1;fill:none}.no-go{fill:#aa615349;stroke:none}.boat-icon{fill:#e3e9d3}.wind-instrument #wind-arrow{fill:#cad899;stroke:#cad899;stroke-width:1.5;transform-origin:36px 36px}.trim-instrument{width:105px}.trim-instrument>div:first-child{display:flex;justify-content:space-between}.trim-instrument b{font-size:11px;font-weight:400}.trim-bar{height:4px;background:#ffffff1f;margin:12px 0;position:relative;border-radius:2px}.trim-bar i{height:4px;display:block;background:#c9d69b;width:45%;border-radius:2px}.trim-bar span{position:absolute;height:10px;width:1px;background:#ffffffb0;top:-3px;left:45%}.control-strip{position:fixed;bottom:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 29px;background:rgba(11,30,30,.55);border-top:1px solid var(--line);backdrop-filter:blur(10px);font-size:9px;letter-spacing:.5px}.control-strip>div{display:flex;align-items:center;gap:8px}.control-strip button{font-size:8px;letter-spacing:1px;padding:7px 11px;white-space:nowrap}.control-strip button.active{color:#d5e9a9;border:1px solid #d5e9a936;border-radius:3px}.control-strip>div>span{margin:0 9px;color:#ffffff4d}kbd{display:inline-flex;align-items:center;justify-content:center;border:1px solid #dce7d336;background:#c8ddbb08;border-radius:3px;min-width:19px;height:20px;font-size:10px;font-family:inherit;padding:0 4px;color:#e2e9d8}.control-strip kbd{min-width:17px;height:18px;font-size:9px}.map-panel{position:fixed;right:29px;top:108px;width:205px;padding:14px 13px 10px}.map-heading{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:2px}.map-heading button{font-size:18px;color:#c4d2bd;line-height:10px;padding:0}#map{width:100%;display:block;aspect-ratio:1;margin:4px 0}.map-legend{display:flex;align-items:center;justify-content:space-between;font-size:8px;color:#b4c3b9}.map-legend i{display:inline-block;width:5px;height:5px;background:#deefba;margin-right:4px}.race-panel{position:fixed;left:30px;top:111px;width:239px;padding:17px}.race-panel .eyebrow{font-size:8px;letter-spacing:1.5px;justify-content:space-between}.race-panel>b{display:block;font-size:18px;font-weight:400;margin:15px 0}.race-panel>div:nth-of-type(2){display:flex;justify-content:space-between;font-size:11px}.race-panel time{color:#dbe5b7}.race-panel small{display:block;font-size:9px;color:#b8c9bc;margin-top:12px;line-height:1.7}.sailing-hint{position:fixed;left:50%;transform:translateX(-50%);bottom:211px;font-size:11px;letter-spacing:.3px;text-shadow:0 1px 8px #14312c;background:#132f2955;padding:8px 13px;border-radius:3px;white-space:nowrap;transition:opacity .4s}.toast{position:fixed;top:113px;left:50%;transform:translateX(-50%) translateY(-8px);padding:11px 18px;border:1px solid var(--line);background:#193831df;backdrop-filter:blur(10px);border-radius:4px;opacity:0;transition:opacity .3s,transform .3s;font-size:12px;pointer-events:none;max-width:70vw;text-align:center}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.drawer{position:fixed;right:22px;top:90px;width:302px;z-index:8;background:#132d2cf5;backdrop-filter:blur(22px);padding:20px 23px;border:1px solid #d4e0c72e;border-radius:6px;max-height:calc(100vh - 111px);overflow-y:auto;box-shadow:0 10px 45px #0a25294d}.panel-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.8px;margin-bottom:24px}.panel-heading .icon-btn{border:0;background:transparent;width:28px;height:28px;font-size:26px}.drawer label{display:block;margin-bottom:24px;font-size:10px;color:#cdd8cb;line-height:1.8}.drawer label>b{float:right;font-size:11px;color:#eef0da;font-weight:400}.drawer input[type=range]{display:block;width:100%;accent-color:#d8e3b4;margin-top:12px;height:3px;cursor:pointer}.drawer select{display:block;width:100%;padding:8px 9px;margin-top:8px;background:#34514a;color:#e4ead9;border:1px solid #b0cfa22b;border-radius:2px;font-size:11px}.drawer .check{margin-bottom:16px;font-size:11px}.check input{accent-color:#c7d7a1;margin-right:7px;vertical-align:middle}.check small{display:block;font-size:9px;margin-left:23px;color:#a8baae}.drawer-buttons{display:flex;flex-direction:column;gap:8px}.secondary{padding:12px 16px;background:#c9dfb211;border:1px solid #c9dfb232;border-radius:2px;font-size:11px}.secondary:hover{background:#c9dfb223}.text-button{font-size:10px;padding:10px;text-align:left;color:#ced8b7}dialog{color:var(--ink);background:#153330f5;border:1px solid #cfdfbb40;border-radius:7px;width:min(610px,92vw);max-height:87vh;overflow-y:auto;padding:27px 33px;box-shadow:0 20px 130px #051a23aa}dialog::backdrop{background:#08272b6b;backdrop-filter:blur(7px)}dialog h2{font-size:34px;letter-spacing:-1px;font-weight:400;line-height:1.17;margin:8px 0 20px}dialog p{font-size:12px;line-height:1.8;color:#d4decf}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 27px;margin:28px 0}.help-grid b{font-size:12px;color:#e3e9b5;font-weight:500}.help-grid p{font-size:11px}.help-footer{border-top:1px solid var(--line);padding-top:16px}.help-footer kbd{font-size:9px;height:18px}dialog>.primary{margin-top:22px}.spec-table{display:grid;grid-template-columns:1fr 1fr;gap:0 29px;font-size:11px;margin:24px 0}.spec-table>div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:10px 0;gap:10px}.spec-table dt{color:#c4d4c1}.spec-table dd{margin:0;color:#edf0cc}.source-note{font-size:10px!important;color:#aabeab!important}.source-links{display:flex;gap:13px;flex-wrap:wrap;font-size:10px;color:#dce5ae;margin-top:22px}.source-links a:hover{text-decoration:underline}#finish-dialog{max-width:390px;text-align:center;padding:40px}#finish-dialog>.eyebrow{justify-content:center}#finish-dialog h2{margin-top:20px}#finish-dialog>strong{font-size:59px;font-weight:300;color:#e7ecc2}#finish-dialog .secondary{margin-top:12px;width:100%}.touch-controls{display:none}body.paused #mode-label{color:#e5d7ab}body.paused .live-pill i{background:#e5d7ab}body.error .welcome>small{color:#ffe0cb}noscript{position:fixed;inset:40%;background:#183e32;padding:30px}
.weather-presets,.paint-presets{display:flex;gap:6px;margin:0 0 22px}.weather-presets button,.paint-presets button{font-size:9px;background:#c3d5a50d;border:1px solid #c3d5a529;border-radius:3px;padding:8px 9px;flex:1}.weather-presets button:hover,.paint-presets button:hover{background:#c3d5a524}.weather-presets button.selected{border-color:#d5e4ae;color:#e1e6bd}.weather-presets:has(>[data-boat-capability]:not([hidden])) button{padding-inline:4px}.paint-controls{border:0;border-top:1px solid var(--line);padding:16px 0 0;margin:10px 0 17px;display:flex;gap:16px}.paint-controls legend{font-size:10px;color:#d5dfc5;padding:0 8px 0 0}.paint-controls label{font-size:9px;flex:1;margin:0}.paint-controls input{display:block;width:100%;height:32px;border:1px solid #d9e1c73d;background:transparent;padding:2px;margin-top:5px;cursor:pointer;border-radius:2px}.paint-presets{margin-bottom:23px}.hull-livery-controls{flex-direction:column;gap:8px}.hull-livery-controls small{font-size:9px;color:#c9d3bc;line-height:1.5}.hull-livery-templates{display:flex;gap:12px;flex-wrap:wrap}.hull-livery-templates a{font-size:9px}.hull-livery-sources{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-end}
.hull-livery-sources .hull-livery-upload{flex:0 0 auto}
.hull-livery-sources .text-button{font-size:9px;padding:6px 0}
.hull-livery-upload{font-size:9px}.hull-livery-upload input{height:auto;padding:6px;font-size:9px}#hull-livery-preview{width:100%;aspect-ratio:4/1;border-radius:2px;background:#e6ebe9}.control-strip>div:last-child{gap:3px}
.crew-controls{border:0;border-top:1px solid var(--line);padding:16px 0 0;margin:2px 0 22px}.crew-controls legend{font-size:10px;color:#d5dfc5;padding:0 8px 0 0}.crew-seats{display:flex;gap:12px}.drawer .crew-seat{flex:1;margin:0;font-size:9px;line-height:1.4}.crew-controls small{display:block;margin-top:9px;font-size:9px;color:#a8baae;line-height:1.5}
@media(min-width:1600px){.welcome{top:23%;width:440px}.instruments{bottom:78px}.control-strip{padding:19px 40px}.sailing-hint{bottom:226px}}
@media(max-height:800px){.welcome{top:18%;width:350px}h1{font-size:62px;margin:19px 0}.welcome-specs{margin:20px 0}.welcome>p{font-size:12px}.instruments{padding:13px 20px;gap:25px}.sailing-hint{bottom:187px}}
@media(max-height:640px){.welcome{top:18%;width:325px}h1{font-size:46px;margin:17px 0}.welcome-specs{margin:15px 0}.welcome-specs b{font-size:15px}.welcome>p{font-size:11px}.start-options{gap:10px}.primary{min-height:45px}.topbar{padding:21px 28px}.load-status{margin-top:11px}}
@media(max-width:950px){.instruments{gap:20px}.wind-instrument{min-width:145px}.wind-instrument span{font-size:7px}.trim-instrument{width:84px}.control-strip{padding:12px 18px}.control-strip>div:first-child{font-size:8px;gap:5px}.control-strip>div>span{margin:0 4px}.control-strip button{padding:7px 8px}.map-panel{width:173px;right:20px}.topbar{padding:25px}.welcome{left:7%;}.live-pill{display:none}}
@media(max-width:700px){.topbar{padding:21px 19px}.wordmark{font-size:21px;letter-spacing:3px;gap:10px}.tagline{font-size:7px}.icon-btn{width:32px;height:32px;font-size:18px}.top-actions{gap:7px}.welcome{left:25px;top:21%;width:calc(100% - 50px);max-width:350px}h1{font-size:61px}.welcome>p{font-size:13px}.welcome-specs{gap:22px}.welcome-specs b{font-size:18px}.location-note{display:none}.welcome>small{font-size:8px}.instruments{width:calc(100vw - 24px);gap:12px;padding:12px 15px;justify-content:space-between;bottom:141px}.speed-instrument{min-width:64px}.speed-instrument strong{font-size:32px}.speed-instrument>span{display:none}.instrument{min-width:54px}.instrument b{font-size:19px}.instrument small{font-size:7px}.instrument>span{font-size:7px;letter-spacing:.5px}.wind-instrument{min-width:60px;gap:4px}.wind-instrument svg{width:45px;height:45px}.wind-instrument>div{display:none}.trim-instrument{width:72px}.trim-instrument span{font-size:7px;letter-spacing:.5px}.trim-instrument small{font-size:7px}.control-strip{bottom:0;padding:12px;justify-content:center}.control-strip>div:first-child{display:none}.control-strip button{font-size:7px;padding:9px 11px}.touch-controls{position:fixed;bottom:59px;display:flex;justify-content:space-between;left:17px;right:17px;gap:15px}.touch-controls button{width:60px;height:59px;border:1px solid #d4e5ba4d;backdrop-filter:blur(10px);background:#1e40378c;border-radius:9px;font-size:26px;touch-action:none}.touch-controls button:active{background:#86a572a6}.touch-controls button:nth-child(3){margin-left:auto;font-size:18px}.touch-controls button:nth-child(4){font-size:18px}.sailing-hint{bottom:243px;width:90vw;text-align:center;white-space:normal;font-size:10px}.map-panel{top:91px;right:13px;width:131px;padding:11px 9px}.map-heading{font-size:7px}.map-legend{font-size:6px}.race-panel{top:91px;left:13px;width:180px;padding:12px}.race-panel>b{font-size:15px;margin:12px 0}.race-panel small{font-size:8px}.race-panel .eyebrow{font-size:7px}.toast{top:240px;width:90vw;max-width:90vw;font-size:11px}.drawer{top:77px;right:12px;width:min(302px,calc(100vw - 24px));max-height:calc(100vh - 88px)}dialog{padding:22px 25px}.help-grid{gap:8px 21px}.spec-table{grid-template-columns:1fr}.source-links{font-size:9px}}

.mooring-prompt{position:fixed;left:38px;top:115px;width:230px;padding:15px;z-index:2}.mooring-prompt small{display:block;color:#dedcc2;font-size:11px;line-height:1.5;margin-bottom:10px}.mooring-prompt .secondary{width:100%;margin:0;min-height:40px;font-size:11px}.mooring-settings{border-top:1px solid var(--line);margin-top:20px;padding-top:17px}.mooring-settings .secondary{width:100%}.mooring-settings small{display:block;color:var(--muted);font-size:10px;line-height:1.6;margin:9px 0}.mooring-settings .text-button{padding:8px 0;font-size:11px;color:#dfdcb8}
@media(max-width:700px){.mooring-prompt{left:13px;top:91px;width:180px;padding:12px}.mooring-prompt small{font-size:10px}.mooring-prompt .secondary{font-size:10px}.start-options{gap:12px}.welcome-specs{margin-bottom:22px}.welcome{top:18%}}
@media(max-height:800px){.welcome{top:15%}h1{font-size:clamp(45px,5vw,67px);margin:18px 0}.welcome-specs{margin:18px 0 20px}.start-options{gap:11px}.welcome>p{line-height:1.6}}
@media(max-width:700px) and (max-height:760px){.welcome{top:14%}h1{font-size:52px}.welcome-specs{margin:16px 0 18px}.welcome>p{font-size:12px}.start-options{gap:10px}.load-status{margin-top:12px}}

.wind-instrument #true-wind-arrow{fill:none;stroke:#f1eee0;stroke-width:1.5;transform-origin:36px 36px}.wind-key{font-size:8px!important;color:#d5daca!important;margin-top:5px}.wind-key i{font-style:normal;font-size:10px}.apparent-wind-key{color:#cad899}.true-wind-key{color:#f1eee0}.wind-instrument .wind-source-note{font-size:8px;color:#d5daca;margin-top:3px}#race-shadow{color:#e0e8b7;line-height:1.5}#race-shadow.dirty-air{color:#f4b78b}#map-mode{font-size:7px;letter-spacing:.5px;line-height:1.4;padding:3px 4px;border:1px solid var(--line);margin-left:auto;margin-right:8px}

.toast{z-index:3}.control-strip #sails-toggle{display:inline-flex;align-items:center;gap:5px;padding:7px 8px;border:1px solid var(--line);border-radius:3px;letter-spacing:.55px}.control-strip #sails-toggle[aria-pressed=true]{color:#e2e9b9;background:#d5e4ad12}.control-strip #sails-toggle:disabled,.paddle-panel button:disabled,.sail-maneuver-settings button:disabled{cursor:not-allowed}
.paddle-panel{position:fixed;left:30px;bottom:211px;width:246px;padding:15px;z-index:2}.paddle-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.paddle-heading>span{font-size:8px;letter-spacing:1.5px}.paddle-heading>small{font-size:9px;color:var(--muted)}.paddle-side{display:flex;gap:5px;margin-bottom:10px}.paddle-side button{flex:1;min-height:36px;border:1px solid var(--line);border-radius:3px;font-size:10px;background:#c9dfb209}.paddle-side button[aria-pressed=true]{background:#d4e3b725;border-color:#d8e5bd75;color:#e8edcf}.paddle-action{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;padding:11px 12px;border:1px solid #d8e5bd65;border-radius:3px;background:#cbdca51c;touch-action:none;user-select:none;-webkit-user-select:none}.paddle-action>span:first-child{font-size:11px;letter-spacing:1px}.paddle-action>span:last-child{display:flex;align-items:center;gap:6px;font-size:8px;letter-spacing:.45px;color:#dce6c8}.paddle-action:active:not(:disabled),.paddle-action.active{background:#b4d09248}.paddle-panel #paddle-status{display:block;font-size:10px;color:#d7dfc9;line-height:1.5;margin-top:9px}.paddle-help{font-size:9px;line-height:1.8;color:var(--muted);margin:10px 0 0}.paddle-help kbd{height:17px;min-width:16px;font-size:8px;padding:0 3px}.sail-maneuver-settings{margin:0 0 22px}.sail-maneuver-settings .secondary{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px}.sail-maneuver-settings small{display:block;font-size:10px;color:var(--muted);line-height:1.6;margin-top:8px}
@media(max-width:700px){.paddle-panel{left:13px;top:91px;bottom:auto;width:190px;padding:12px}.paddle-heading>span{font-size:7px;letter-spacing:1px}.paddle-heading>small{font-size:8px}.paddle-side button{min-height:38px;font-size:9px}.paddle-action{min-height:48px;padding:10px}.paddle-action>span:first-child{font-size:10px}.paddle-action>span:last-child{font-size:7px}.paddle-help{font-size:8px}#mooring-prompt:not(.hidden)~#paddle-panel{top:221px}}
@media(max-width:520px){.control-strip>div:last-child{gap:1px}.control-strip button{padding-left:7px;padding-right:7px;letter-spacing:.65px}.control-strip #sails-toggle{padding-left:5px;padding-right:5px;letter-spacing:.35px}.control-strip #weather-open{display:none}}

.paddle-reverse{margin-top:6px}

/* The spinnaker / gennaker shares the paddle panel's place: one needs the sails up, the other down. */
.spinnaker-panel{position:fixed;left:30px;bottom:211px;width:214px;padding:13px 15px;z-index:2}
.spinnaker-heading{display:flex;align-items:baseline;gap:8px}
.spinnaker-heading>span{font-size:8px;letter-spacing:1.5px;color:#c0cdc2}
.spinnaker-heading>small{margin-right:auto;font-size:7px;letter-spacing:1px;color:#a8baae}
.spinnaker-heading>b{font-size:16px;font-weight:400;font-variant-numeric:tabular-nums}
.spinnaker-panel .trim-bar{margin:10px 0 8px}
#spinnaker-status{display:block;font-size:10px;color:#d3e0c8}
.spinnaker-panel.broach{border-color:#f1b47599;background:#7a3a1f66}
.spinnaker-panel.broach #spinnaker-status{color:#ffd2b8;font-weight:600}
.spinnaker-sheet{display:flex;gap:6px;margin-top:10px}
.spinnaker-sheet[hidden]{display:none}
.spinnaker-sheet button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:36px;border:1px solid var(--line);border-radius:3px;background:#c9dfb211;font-size:9px;letter-spacing:.6px;touch-action:none}
.spinnaker-sheet button:active{background:#86a572a6}
.control-strip #spinnaker-toggle,.control-strip #wing-toggle{display:inline-flex;align-items:center;gap:5px;padding:7px 8px;border:1px solid var(--line);border-radius:3px;letter-spacing:.55px}
.control-strip #spinnaker-toggle[hidden],.control-strip #wing-toggle[hidden]{display:none}
.control-strip #spinnaker-toggle.active,.control-strip #wing-toggle.active{color:#d5e9a9;border-color:#d5e9a966;background:#d5e4ad12}
.control-strip #spinnaker-toggle.unavailable,.control-strip #wing-toggle.unavailable{opacity:.55}
/* Aground in a race: the button of the next step (B, then Z) and the step itself stand out. */
.control-strip #board-toggle.attention,.control-strip #sails-toggle.attention{color:#ffe7c2;border:1px solid #f1b475;border-radius:3px;background:#954b2852}
.sailing-hint.shoal-alert{color:#ffe7c2;background:#5b2a1fd9;border:1px solid #f1b47580}
@media(max-width:700px), (max-width:950px) and (max-height:500px){
  .spinnaker-panel{left:auto;right:12px;bottom:188px;width:156px;padding:9px 10px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .spinnaker-sheet{gap:5px;margin-top:8px}
  .spinnaker-sheet button{min-height:44px}
  .spinnaker-sheet kbd{display:none}
  .control-strip #spinnaker-toggle,.control-strip #wing-toggle{min-height:44px;padding:6px 7px;gap:0;font-size:7px;letter-spacing:.25px}
  /* With the board button in it the strip is wider than a phone: aground the kite buttons give way. */
  body.shoal-aground .control-strip #spinnaker-toggle,body.shoal-aground .control-strip #wing-toggle{display:none}
}
@media(min-width:500px) and (max-width:950px) and (max-height:500px){
  .spinnaker-panel{bottom:120px}
}

#regatta-dialog{width:min(650px,94vw)}.regatta-modes{display:flex;gap:8px;margin-bottom:20px}.regatta-modes button{flex:1;padding:12px;border:1px solid var(--line);border-radius:3px;font-size:12px}.regatta-modes button[aria-pressed=true]{background:#dce8b629;border-color:#dce8b677;color:#eef1cf}.regatta-label{display:block;font-size:11px;color:var(--muted);margin:16px 0}.regatta-label select,.regatta-label input,.invite-link{display:block;width:100%;margin-top:8px;border:1px solid #bed1b94d;border-radius:3px;padding:12px;background:#284941;color:var(--ink);font:inherit}.regatta-label input{font-size:15px}.course-card{background:#102923;border:1px solid var(--line);border-radius:4px;overflow:hidden}.course-card canvas{display:block;width:100%;height:180px;object-fit:contain}.course-card>div{padding:12px 16px}.course-card b{font-size:14px;font-weight:500}.course-card span{float:right;font-size:11px;color:var(--gold)}.course-card p{margin:6px 0 0;font-size:11px}.regatta-help{font-size:11px!important}.online-join{display:flex;align-items:flex-end;gap:12px;margin-top:16px}.online-join label{flex:1;margin:0}.online-join button{min-height:44px}.room-code{margin-top:24px;display:flex;align-items:center;flex-wrap:wrap;gap:12px}.room-code>span{font-size:9px;letter-spacing:1px}.room-code strong{font-size:26px;letter-spacing:4px;color:var(--gold);font-weight:400}.room-code button{margin-left:auto}.invite-link{font-size:11px;margin:12px 0}.online-players{margin:18px 0}.online-players>div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}.online-players b{font-weight:400}.online-players span{color:var(--gold);font-size:11px}.online-lobby-actions{display:grid;gap:10px}.online-lobby-actions .primary{font-size:11px}#online-status{font-size:11px;min-height:22px}#online-status.error-message{color:#ffc6ad}.regatta-modes button:disabled,.online-lobby-actions button:disabled{cursor:not-allowed}#regatta-dialog h2{margin-top:0}#online-room-weather{font-size:11px;color:var(--gold)}
@media(max-width:700px){#regatta-dialog{padding:20px}.course-card canvas{height:140px}.course-card span{float:none;display:block;margin-top:5px}.online-join{gap:8px}.room-code strong{font-size:23px}.room-code button{font-size:10px;padding:10px}.control-strip button{font-size:6px;padding-left:6px;padding-right:6px}.control-strip #pause{display:none}}
/* Recorded race routes share the game's calm, nautical palette. */
#replay-dialog{width:min(1000px,calc(100vw - 32px));max-width:1000px}
#replay-canvas{display:block;width:100%;height:auto;border:1px solid #9da69244;border-radius:8px;margin:20px 0}
.replay-intro{max-width:650px}.replay-controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.replay-controls label{display:flex;align-items:center;gap:10px}.replay-controls select{min-width:80px}.replay-controls output{margin-left:auto;font-variant-numeric:tabular-nums}
.replay-seek-label{display:flex;flex-direction:column;gap:10px;margin:18px 0 22px;font-size:12px;color:var(--muted)}
.replay-seek-label input{width:100%;accent-color:var(--gold)}
#replay-status{font-size:13px;line-height:1.6}#replay-download{display:inline-block;margin-top:12px;text-decoration:none}#replay-download[hidden]{display:none}
#finish-replay{margin-top:10px}
.race-signal{position:fixed;top:108px;left:50%;transform:translateX(-50%);padding:13px 24px;text-align:center;background:#153330dd;border:1px solid #e8c66e88;border-radius:5px;pointer-events:none;min-width:205px}
.race-signal>span{display:block;letter-spacing:2px;font-size:10px;color:#e8c66e}.race-signal>strong{display:block;font-size:34px;font-weight:300;line-height:1.4;font-variant-numeric:tabular-nums}.race-signal>small{display:block;font-size:11px;color:#d4decf}
.race-signal.ocs{border-color:#e89b8c}.race-signal.ocs>span{color:#f6b1a1}.race-signal.go{border-color:#bce7d2}.race-signal.go>span{color:#bce7d2}
@media(max-width:700px){.race-signal{top:auto;bottom:255px;padding:9px 15px;min-width:180px;max-width:calc(100vw - 32px)}.race-signal>strong{font-size:25px}.race-signal>small{max-width:270px}}
.regatta-cta{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center;text-align:left;background:#e5e7d0;color:#183234;border:0;border-radius:2px;padding:10px 17px;margin-right:12px;box-shadow:0 3px 18px #071f2c33;font-size:12px;font-weight:600;letter-spacing:.4px;min-height:48px}
.regatta-cta>span{grid-row:span 2;font-size:24px}.regatta-cta>small{font-size:9px;letter-spacing:.2px;font-weight:500;margin-top:3px}.regatta-cta:hover{background:#f0f1df}.regatta-cta:focus-visible{outline-color:#fff1b8}
.start-options #start-race{width:100%;padding:15px 20px;min-height:53px;font-size:12px;color:#183234;background:#e5e7d0;letter-spacing:.4px}.start-options #start-race:hover{background:#f0f1df}.start-options #start-race>span:first-child{margin-left:0;font-size:12px}.start-options #start-race>span:last-child{font-size:24px;line-height:1}
@media(max-width:700px){.regatta-cta{padding:8px 10px;column-gap:6px;margin-right:3px;font-size:10px;letter-spacing:.5px;min-height:40px}.regatta-cta>span{font-size:19px}.regatta-cta>small{font-size:7px}.top-actions #photo,.top-actions #fullscreen{display:none}.top-actions{gap:5px}}
#regatta-weather-description{display:block;font-size:10px;line-height:1.6;color:var(--muted);margin-top:8px}
#race-penalty{padding:10px;background:#a8433438;border:1px solid #f4ac8e66;border-radius:3px;color:#ffdac7;font-size:10px;line-height:1.6}
.regatta-rules{margin-top:22px;padding-top:15px;border-top:1px solid var(--line)}.regatta-rules>summary{font-size:11px;color:#e5e7d0;cursor:pointer}.regatta-rules p{font-size:11px}
@media(max-height:640px){.start-options #start-race{min-height:45px;padding-top:10px;padding-bottom:10px}.start-options{gap:8px}}

.shoal-legend,.course-shoal-legend{display:flex;flex-wrap:wrap;gap:5px 9px;color:#e1e6d7}
.shoal-legend{margin-top:9px;padding-top:8px;border-top:1px solid var(--line);font-size:8px}
.shoal-legend span,.course-shoal-legend span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.shoal-legend i,.course-shoal-legend i{display:inline-block;width:7px;height:7px;border-radius:1px;flex:none}
.shoal-boundary{display:flex;align-items:center;gap:5px;margin-top:6px;color:#b9c8bd;font-size:8px}
.shoal-boundary i{width:13px;height:2px;background:#eb7c91;box-shadow:0 0 0 1px #8a2439}
.shoal-status{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:8px;color:#b6cabe;line-height:1.35}
.shoal-status b{font-weight:500;color:#d3e6c4}
.shoal-status b[data-risk="shallow"]{color:#efc271}
.shoal-status b[data-risk="grounding"]{color:#ffada1}
.shoal-note{display:block;margin-top:7px;font-size:7px;line-height:1.5;color:#a9bcb0}
.map-mooring{display:block;margin-top:8px;padding-top:7px;border-top:1px solid #75e3df40;font-size:9px;line-height:1.5;font-weight:600;color:#75e3df}
.map-mooring[hidden]{display:none}
.course-shoal-legend{margin-top:12px;font-size:10px;gap:7px 10px}
.course-shoal-legend span{float:none!important;font-size:10px}
.course-shoal-legend i{width:10px;height:10px}
.course-shoal-note{display:block;margin-top:7px;font-size:10px;line-height:1.5;color:var(--muted)}
@media(max-width:700px){.shoal-legend{font-size:7px;gap:4px 7px}.shoal-boundary,.shoal-status{font-size:7px}.shoal-note{font-size:6px}.shoal-legend i{width:6px;height:6px}}

.tournament-nav{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.4px;border:1px solid var(--line);border-radius:2px;padding:13px 14px;background:#14312d66;backdrop-filter:blur(8px)}.tournament-nav:hover{background:#23493c}.tournament-welcome{font-size:11px;letter-spacing:.4px;padding:2px 0}.tournament-welcome:hover{text-decoration:underline}
@media(max-width:700px){.tournament-nav{font-size:9px;padding:10px 8px;gap:4px}.top-actions #sound{display:none}.topbar{gap:10px}.top-actions{flex-wrap:wrap;justify-content:flex-end}}
@media(max-width:380px){.wordmark{font-size:16px;letter-spacing:1.8px;gap:7px}.wordmark svg{width:24px;height:29px}}

/* Keep every start-menu action within reach below the fixed header. */
.welcome {
  --welcome-top: clamp(108px, 13vh, 160px);
  top: var(--welcome-top);
  max-height: calc(100vh - var(--welcome-top) - 24px);
  max-height: calc(100dvh - var(--welcome-top) - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d5d7a766 transparent;
  padding-right: 6px;
}
@media (max-height: 900px) {
  .welcome h1 { font-size: clamp(44px, 8.5vh, 72px); margin: 18px 0; }
  .welcome-specs { margin: 20px 0 22px; }
  .welcome .start-options { gap: 12px; }
}
@media (max-height: 760px) {
  .welcome h1 { font-size: clamp(38px, 7.4vh, 56px); margin: 13px 0; }
  .welcome-specs { margin: 14px 0 16px; }
  .welcome .start-options { gap: 8px; margin-top: 12px; }
  .welcome > p { line-height: 1.6; }
  .welcome .load-status { margin-top: 12px; }
  .welcome > small { margin-top: 6px; }
}
@media (max-height: 520px) {
  .welcome { --welcome-top: 90px; }
}

/* The landing-page wordmark and welcome content share one left alignment. */
:root { --home-gutter: 7.3vw; }
.welcome { left: var(--home-gutter); }
body:not(.playing) > .topbar { padding-left: var(--home-gutter); }
@media (max-width: 950px) {
  :root { --home-gutter: 7vw; }
}
@media (max-width: 700px) {
  :root { --home-gutter: 25px; }
}

/* Leave more of the lake visible around the mobile start actions. */
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  .welcome #start,
  .welcome .start-options #start-race {
    width: min(100%, clamp(230px, 76%, 260px));
    min-height: 44px;
    padding: 9px 14px;
    gap: 10px;
    font-size: 11px;
    line-height: 1.3;
  }
  .welcome #start > span:first-child,
  .welcome .start-options #start-race > span:first-child {
    margin-left: 0;
    font-size: 11px;
    line-height: 1.3;
  }
  .welcome #start > span:last-child,
  .welcome .start-options #start-race > span:last-child {
    flex: 0 0 auto;
    margin-left: 0;
    font-size: 20px;
    line-height: 1;
  }
  .welcome .start-options { margin-top: 10px; }
}

/* The start page offers the regattas in its hero button right under "Wypłyń
   na jezioro", so the top-bar REGATY button appears only on the water, where
   it is the visible way to open the regatta dialog. */
body:not(.playing) .top-actions .regatta-cta { display: none; }

/* Keep the mobile landing navigation in one balanced row below the logo. */
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  body:not(.playing) > .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px var(--home-gutter) 8px;
  }
  body:not(.playing) .topbar .wordmark { gap: 9px; font-size: 20px; }
  body:not(.playing) .topbar .wordmark svg { width: 25px; height: 28px; }
  body:not(.playing) .top-actions {
    display: grid;
    grid-template-columns: auto 44px;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    max-width: 340px;
  }
  body:not(.playing) .top-actions .tournament-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: #14312db0;
    color: var(--ink);
    backdrop-filter: blur(8px);
    box-shadow: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  body:not(.playing) .top-actions .tournament-nav:hover { background: #23493c; }
  body:not(.playing) .top-actions .tournament-nav > span { font-size: 16px; }
  body:not(.playing) .top-actions .live-pill,
  body:not(.playing) .top-actions #photo,
  body:not(.playing) .top-actions #sound,
  body:not(.playing) .top-actions #fullscreen { display: none; }
  body:not(.playing) .top-actions #settings-toggle { width: 44px; height: 44px; }
  .welcome { --welcome-top: 108px; }
}

/* During mobile sailing, secondary destinations stay in a compact disclosure. */
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  body.playing > .topbar { padding: 12px 14px; gap: 10px; }
  body.playing .topbar .wordmark { font-size: 17px; gap: 7px; }
  body.playing .topbar .wordmark svg { width: 22px; height: 26px; }
  body.playing .top-actions { flex-wrap: nowrap; gap: 7px; }
  body.playing .top-actions > .tournament-nav,
  body.playing .top-actions > .regatta-cta,
  body.playing .top-actions > .live-pill,
  body.playing .top-actions #photo,
  body.playing .top-actions #sound,
  body.playing .top-actions #fullscreen { display: none; }
  body.playing .game-navigation { display: block; position: relative; }
  .game-navigation > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #14312db0;
    backdrop-filter: blur(8px);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
  }
  .game-navigation > summary::-webkit-details-marker { display: none; }
  .game-navigation > summary > span { font-size: 17px; }
  .game-navigation > summary:focus-visible { outline: 2px solid #d3dc9b; outline-offset: 4px; }
  .game-navigation[open] > summary { background: #23493c; }
  .game-navigation > nav { display: none; }
  .game-navigation[open] > nav {
    display: grid;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 190px;
    max-width: calc(100vw - 28px);
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #132d2cf5;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 28px #071f2c55;
  }
  .game-navigation > nav > a,
  .game-navigation > nav > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 3px;
    font-size: 12px;
    text-align: left;
  }
  .game-navigation > nav > a:hover,
  .game-navigation > nav > button:hover { background: #c9dfb223; }
  body.playing .top-actions #settings-toggle { width: 44px; height: 44px; }
}

.regatta-course-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(112px,.36fr);gap:14px;align-items:end}.regatta-course-settings .regatta-label{min-width:0}.regatta-course-settings select{min-height:44px}#race-panel #race-lap{color:var(--gold);font-size:10px;margin-top:8px}
@media(max-width:400px){.regatta-course-settings{grid-template-columns:1fr;gap:0}.regatta-course-settings .regatta-label:last-child{margin-top:0}}

@media(max-width:700px){
  .wind-instrument{flex-direction:column;gap:3px;width:60px;min-width:60px}
  .wind-instrument>div{display:block;width:60px;text-align:center}
  .wind-instrument>div>*{display:none}
  .wind-instrument>div>#wind-angle,.wind-instrument>div>#true-wind-angle{display:block;font-size:7px;line-height:1.25;white-space:normal;letter-spacing:0}
  .wind-instrument>div>#wind-angle::before{content:"Pozorny: "}
  .wind-instrument>div>#true-wind-angle{margin-top:3px;color:#f1eee0}
}

/* Keep navigation below the header when its controls need the full row. */
.buoy-navigation{position:fixed;top:104px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:11px;min-width:228px;padding:9px 15px 9px 10px;pointer-events:none;z-index:2;background:#14312deb;border-color:#d8e7b75c}
.navigation-dial{width:52px;height:52px;flex:none;overflow:visible}
.navigation-dial circle{fill:none;stroke:#dce7c638;stroke-width:1}
.navigation-bow{fill:#c6d1c2}
#navigation-arrow{transform-origin:30px 30px}
.navigation-shaft,.navigation-head{fill:none;stroke:#eef0b7;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.navigation-copy>span{display:block;color:#c6d7bd;font-size:8px;letter-spacing:1.4px}
.navigation-copy>strong{display:block;margin:3px 0 4px;color:#f0f2d3;font-size:20px;font-weight:500;line-height:1.2}
.navigation-copy>small{display:block;color:#cbd7c9;font-size:10px;white-space:nowrap}
.navigation-copy>small>b{font-weight:500;color:#ebedcc;font-variant-numeric:tabular-nums}
.buoy-navigation.at-target #navigation-arrow{opacity:.35}
#hud.navigation-active .race-signal{top:194px}
#hud.navigation-active .toast{top:184px}
/* On desktop, align the dial with the header controls and reserve their space. */
@media(min-width:1200px){
  .buoy-navigation{top:16px;left:min(50%,calc(100vw - 740px))}
}
@media(min-width:1200px) and (max-height:640px){
  .buoy-navigation{top:9px}
}
/* Mobile details open on demand; the default HUD leaves the yacht in view. */
@media(max-width:700px), (max-width:950px) and (max-height:500px){
  .buoy-navigation,.map-panel,.race-panel,.instruments{backdrop-filter:none;-webkit-backdrop-filter:none}
  .buoy-navigation{top:74px;left:12px;transform:none;width:fit-content;max-width:154px;min-width:0;min-height:44px;padding:4px 6px;gap:6px}
  .navigation-dial{width:26px;height:26px}
  .navigation-copy{min-width:0}
  .navigation-copy>span{font-size:6px;letter-spacing:.5px;line-height:1.1}
  .navigation-copy>strong{font-size:14px;margin:2px 0;line-height:1.1}
  .navigation-copy>small{font-size:7px;line-height:1.25}

  .map-panel,.race-panel{top:78px;width:110px;padding:0;max-height:none;overflow:hidden;z-index:3}
  .map-panel{right:12px;width:76px}
  .race-panel{left:12px;width:126px}
  #hud.navigation-active .map-panel,#hud.navigation-active .race-panel{top:128px}
  #hud.navigation-active .map-panel{top:74px}
  .map-panel:not(.mobile-expanded)>:not(.mobile-panel-toggle),
  .race-panel:not(.mobile-expanded)>:not(.mobile-panel-toggle){display:none!important}
  .mobile-panel-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:0 11px;font-size:10px;font-weight:500;letter-spacing:.5px;text-align:left}
  .mobile-panel-toggle>span:first-child{margin-right:auto;white-space:nowrap}
  .mobile-panel-toggle [aria-hidden=true]{font-size:15px;transition:transform .15s}
  .mobile-panel-toggle[aria-expanded=true] [aria-hidden=true]{transform:rotate(180deg)}
  .mobile-panel-toggle.has-penalty{color:#ffdbc3;background:#954b282f;box-shadow:inset 0 0 0 1px #f1b47580}
  #race-toggle-position{font-size:11px;font-weight:500;letter-spacing:0;color:#ecedce;white-space:nowrap;font-variant-numeric:tabular-nums}
  .map-panel.mobile-expanded,.race-panel.mobile-expanded{width:178px;padding:0 10px 10px;max-height:calc(100vh - 274px);max-height:calc(100dvh - 274px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .race-panel.mobile-expanded{width:176px}
  .mobile-expanded>.mobile-panel-toggle{position:sticky;top:0;z-index:1;width:calc(100% + 20px);margin:0 -10px 8px;border-bottom:1px solid var(--line);background:#14312df5}
  .map-heading{font-size:7px;letter-spacing:1px}
  .map-heading button{min-height:32px}
  #map-mode{min-width:44px;padding:3px 5px;margin-right:4px}
  .map-legend{font-size:7px}
  .race-panel .eyebrow{font-size:7px;letter-spacing:1px}
  #race-panel .race-standing{margin-top:10px;padding-bottom:7px;font-size:9px}
  #race-position{font-size:19px}
  .race-panel>b{font-size:14px;margin:10px 0}
  .race-panel small{font-size:8px;line-height:1.5;margin-top:8px}
  #race-panel>div:last-of-type{font-size:10px}
  #race-panel #race-lap{font-size:8px;margin-top:7px}

  .instruments{bottom:118px;display:grid;grid-template-columns:1.05fr .9fr 1.4fr .75fr .75fr;align-items:center;width:min(calc(100vw - 24px),460px);height:62px;padding:8px 10px;gap:6px;max-width:calc(100vw - 24px)}
  .speed-instrument,.instrument,.wind-instrument,.trim-instrument{min-width:0;width:auto}
  .speed-instrument>.eyebrow{display:block;font-size:7px;letter-spacing:.3px;line-height:1.2;margin-bottom:4px}
  .speed-instrument>.eyebrow::after{content:" · kn";letter-spacing:0}
  .speed-instrument strong{font-size:24px;letter-spacing:-.8px;line-height:1}
  .speed-instrument>span{display:none}
  .instrument>span,.trim-instrument span{font-size:7px;letter-spacing:.3px;line-height:1.2}
  .instrument b{font-size:16px;line-height:1.2;margin:4px 0 0}
  .instrument #heel{font-size:14px}
  .instrument small{display:none}
  .wind-instrument{display:flex;flex-direction:row;gap:5px}
  .wind-instrument svg{width:32px;height:32px;flex:none}
  .wind-instrument>div{display:block;width:auto;min-width:0;text-align:left}
  .wind-instrument>div>*{display:none}
  .wind-instrument>div::before{content:"WIATR";display:block;font-size:7px;letter-spacing:.3px;line-height:1.2;color:#c0cdc2}
  .wind-instrument>div>#wind-speed{display:block;font-size:11px;font-weight:400;letter-spacing:0;line-height:1.2;margin:4px 0 0;white-space:nowrap}
  .wind-instrument>div>#wind-angle,.wind-instrument>div>#true-wind-angle{display:none}
  .trim-instrument>div:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  .trim-instrument b{font-size:14px;line-height:1.2}
  .trim-instrument .trim-bar,.trim-instrument small{display:none}

  .control-strip{min-height:48px;padding:2px 8px;justify-content:center;gap:0}
  .control-strip>div:first-child{display:none}
  .control-strip>div:last-child{justify-content:center;gap:3px;min-width:0}
  .control-strip button{min-height:44px;font-size:7px;letter-spacing:.25px;padding:6px 7px}
  .control-strip #sails-toggle{min-height:44px;padding:6px 7px;gap:0;font-size:7px;letter-spacing:.25px}
  .control-strip #weather-open,.control-strip kbd{display:none}
  .touch-controls{position:fixed;display:flex;left:12px;right:12px;bottom:60px;gap:10px}
  .touch-controls button{width:48px;height:48px;border:1px solid #d4e5ba4d;background:#1e40378c;backdrop-filter:blur(10px);border-radius:7px;font-size:24px;touch-action:none}
  .touch-controls button:active{background:#86a572a6}
  .touch-controls button:nth-child(3){margin-left:auto;font-size:16px}
  .touch-controls button:nth-child(4){font-size:16px}
  .sailing-hint{display:none}
  /* Phones show no sailing hint, except the next step aground in a race. */
  .sailing-hint.shoal-alert{display:block;bottom:188px;width:max-content;max-width:calc(100vw - 24px);padding:7px 11px;font-size:10px;line-height:1.35;white-space:normal;text-align:center}
  .race-signal,#hud.navigation-active .race-signal{top:184px;bottom:auto;width:max-content;min-width:0;max-width:calc(100vw - 24px);padding:6px 10px}
  .race-signal>span{font-size:8px;letter-spacing:1px}
  .race-signal>strong{font-size:16px;line-height:1.4;white-space:nowrap}
  .race-signal:not(.go):not(.ocs)>strong{font-size:22px}
  .race-signal>small{font-size:8px}
  .toast,#hud.navigation-active .toast{top:250px;width:auto;max-width:calc(100vw - 32px);font-size:10px;padding:8px 12px}
  #hud.navigation-active .mooring-prompt,#hud.navigation-active .paddle-panel{top:184px}
  #hud.navigation-active #mooring-prompt:not(.hidden)~#paddle-panel{top:284px}
}
@media(min-width:360px) and (max-width:700px){
  #hud.navigation-active .race-panel{top:74px;left:auto;right:96px;width:88px}
  .race-panel>.mobile-panel-toggle{gap:4px;padding:0 6px;font-size:9px}
  #hud.navigation-active .race-panel.mobile-expanded{top:128px;width:176px}
  .race-panel.mobile-expanded>.mobile-panel-toggle{padding:0 11px}
}
@media(max-width:700px){
  #hud.navigation-active .map-panel.mobile-expanded{top:128px}
}
/* The short landscape viewport keeps navigation in the header. */
@media(min-width:500px) and (max-width:950px) and (max-height:500px){
  .buoy-navigation{top:12px;left:50%;transform:translateX(-50%)}
  .map-panel,.race-panel,#hud.navigation-active .map-panel,#hud.navigation-active .race-panel{top:78px}
  #hud.navigation-active .race-panel{left:12px;right:auto;width:126px}
  .map-panel.mobile-expanded,.race-panel.mobile-expanded,#hud.navigation-active .map-panel.mobile-expanded,#hud.navigation-active .race-panel.mobile-expanded{top:78px;max-height:calc(100vh - 196px);max-height:calc(100dvh - 196px)}
  .instruments{bottom:60px;height:52px;width:min(calc(100vw - 264px),460px);padding:5px 8px}
  .race-signal,#hud.navigation-active .race-signal{top:78px;max-width:calc(100vw - 400px)}
  .toast,#hud.navigation-active .toast{top:148px;max-width:calc(100vw - 400px)}
  .sailing-hint.shoal-alert{bottom:120px;max-width:calc(100vw - 420px)}
  #hud.navigation-active .mooring-prompt,#hud.navigation-active .paddle-panel{top:78px}
  #hud.navigation-active #mooring-prompt:not(.hidden)~#paddle-panel{top:174px}
}

/* The spectator has a compact score strip and a camera dock below the lake view. */
body.spectator-mode .topbar,body.spectator-mode #welcome,body.spectator-mode #welcome-side,body.spectator-mode #location-note,
body.spectator-mode #hud,body.spectator-mode .control-strip,body.spectator-mode .touch-controls,body.spectator-mode .sailing-hint,
body.spectator-mode #vignette,body.spectator-mode .toast{display:none!important}
.spectator-viewer{position:fixed;inset:0;z-index:12;pointer-events:none;color:#f2f2e6;font-size:11px}
.spectator-viewer[hidden]{display:none!important}
.spectator-scoreboard,.spectator-camera-dock{position:absolute;left:50%;transform:translateX(-50%);width:min(640px,calc(100vw - 32px));background:rgba(15,39,37,.88);border:1px solid #eff3dd40;border-radius:8px;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 8px 32px #071d1c40}
.spectator-scoreboard{top:max(14px,env(safe-area-inset-top));padding:10px 14px}
.spectator-heading{display:flex;align-items:center;justify-content:space-between;gap:18px}
.spectator-live{display:grid;grid-template-columns:7px minmax(0,1fr);align-items:center;gap:3px 7px;min-width:0;flex:1}
.spectator-live i{grid-row:span 3;width:6px;height:6px;border-radius:50%;background:#e86d5a;box-shadow:0 0 10px #f2716680}
.spectator-live>span{font-size:7px;letter-spacing:.14em;color:#f3d5cb}
.spectator-live>b{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spectator-live>small{grid-column:2;font-size:9px;color:#c4d4ca;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spectator-clock{display:grid;gap:2px;text-align:right;flex:none}
.spectator-clock>span{font-size:7px;letter-spacing:.09em;color:#c4d4ca}
.spectator-clock>time{font-size:23px;line-height:1.2;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.spectator-crews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:9px;padding-top:8px;border-top:1px solid #eff3dd25}
.spectator-crew{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.spectator-crew-letter{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:4px;font-size:9px;font-weight:600;background:#a7e0cf1a;color:#9fe2ce;border:1px solid #a7e0cf50}
.spectator-crew-guest .spectator-crew-letter{color:#f1bc7c;background:#f1bc7c1a;border-color:#f1bc7c50}
.spectator-crew>b{font-size:11px;font-weight:600;letter-spacing:.03em}
.spectator-target{margin-left:auto;font-size:10px;overflow:hidden;text-overflow:ellipsis;color:#e0e9dc}
.spectator-camera-dock{bottom:max(14px,env(safe-area-inset-bottom));padding:7px;pointer-events:auto}
.spectator-camera-buttons{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.spectator-camera-buttons>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:54px;padding:6px 3px;border:1px solid #dce5c830;border-radius:5px;background:#c6d5c609;color:#dce6da;font-size:10px;white-space:nowrap;touch-action:manipulation;transition:background .15s,border-color .15s,color .15s}
.spectator-camera-buttons>button>svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.spectator-camera-buttons>button:hover{background:#c6d5c61a;border-color:#dce5c86b}
.spectator-camera-buttons>button[aria-pressed="true"]{color:#183234;background:#e5e7d0;border-color:#e5e7d0}
.spectator-camera-buttons>button:focus-visible{outline-offset:1px}
.spectator-camera-help{margin:7px 2px 1px;text-align:center;font-size:9px;line-height:1.3;color:#c4d4ca}
@media(max-width:560px){
  .spectator-scoreboard,.spectator-camera-dock{width:calc(100vw - 16px);border-radius:6px}
  .spectator-scoreboard{top:max(8px,env(safe-area-inset-top));padding:8px 9px}
  .spectator-heading{gap:10px}
  .spectator-live>b{font-size:11px}
  .spectator-live>small{font-size:8px}
  .spectator-clock>time{font-size:20px}
  .spectator-clock>span{font-size:6px}
  .spectator-crews{gap:8px;margin-top:7px;padding-top:7px}
  .spectator-crew{gap:4px}
  .spectator-crew>b{font-size:10px}
  .spectator-crew-letter{width:16px;height:16px;font-size:8px}
  .spectator-target{font-size:9px}
  .spectator-camera-dock{bottom:max(8px,env(safe-area-inset-bottom));padding:5px}
  .spectator-camera-buttons{gap:3px}
  .spectator-camera-buttons>button{min-height:50px;font-size:9px;padding:5px 1px;gap:4px}
  .spectator-camera-buttons>button>svg{width:16px;height:16px}
  .spectator-camera-help{font-size:8px;margin-top:6px}
}
@media(max-width:380px){.spectator-crew{display:grid;grid-template-columns:16px minmax(0,1fr);gap:2px 4px}.spectator-target{grid-column:2;margin-left:0;font-size:9px}.spectator-crew-letter{grid-row:span 2}.spectator-camera-buttons>button{font-size:8px}}
@media(max-height:500px){.spectator-camera-help{display:none}.spectator-camera-buttons>button{min-height:44px;flex-direction:row;gap:5px}.spectator-camera-buttons>button>svg{width:15px;height:15px}.spectator-scoreboard{padding-top:7px;padding-bottom:7px}.spectator-crews{margin-top:5px;padding-top:5px}}

.boat-choice{display:flex;align-items:center;gap:14px;font-size:12px;margin:18px 0 12px;color:var(--paper,#f4f3e7)}.boat-choice select{appearance:none;font:inherit;font-size:13px;padding:10px 32px 10px 12px;border:1px solid #e4ead26b;border-radius:4px;color:#f4f3e7;background:#123b35c9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23f4f3e7'/%3E%3C/svg%3E") no-repeat right 12px center}.boat-choice select option{background:#173f38}.boat-choice select:disabled{opacity:.65}#boat-capabilities{font-size:11px;line-height:1.5;display:block;color:#c1d0bf;margin-top:6px}@media(max-width:600px){.boat-choice{margin:10px 0;font-size:11px;gap:10px}.boat-choice select{font-size:12px;padding:8px 27px 8px 10px}.welcome-specs{margin-top:12px}}

[hidden]{display:none!important}

.welcome .eyebrow>#lake-coordinates{height:auto;width:auto;background:none}
.voyage-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 8px}
.voyage-choices .boat-choice{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:0;font-size:10px;letter-spacing:.3px}
.voyage-choices select{width:100%;min-width:0;font-size:12px;padding-left:10px}
@media(max-width:600px){.voyage-choices{gap:8px;margin:10px 0 6px}.voyage-choices .boat-choice{font-size:10px}.voyage-choices select{font-size:11px;padding:8px 24px 8px 8px;background-position:right 9px center}}

/* Static share links work before the game loads and keep the start actions clear. */
.welcome-share{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px;font-size:10px;color:#e4e8df}
.welcome-share>span{margin-right:3px;font-size:9px;color:#cad3c8;letter-spacing:.3px}
.welcome-share>a{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:8px 11px;border:1px solid #d4e0c73d;border-radius:4px;background:#183a3459;white-space:nowrap}
.welcome-share>a:hover{background:#34584bd9;border-color:#dfe6c085}
.share-mark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:2px;background:#e4e8df;color:#183234;font:bold 12px/1 Arial,sans-serif;letter-spacing:-.4px}
.welcome-information{margin-top:12px;color:#cad3c8;font-size:10px;line-height:1.7}
.welcome-information>summary{cursor:pointer;padding:7px 0;min-height:30px}
.welcome-information p{font-size:11px;line-height:1.8;margin:10px 0;color:#e4e8df}
.welcome-information a{text-decoration:underline;text-underline-offset:3px}
.welcome-information>summary:focus-visible{outline:2px solid #d3dc9b;outline-offset:2px}
.welcome noscript{position:static;inset:auto;display:block;background:none;padding:0;font-size:11px;line-height:1.8}
@media(max-width:700px){.welcome-share{column-gap:8px;row-gap:6px;margin-top:12px}.welcome-share>span{font-size:9px}.welcome-share>a{min-height:44px;padding:9px 13px;font-size:11px}.welcome-information{margin-top:9px}}
@media(max-width:380px){.welcome-share>span{flex-basis:100%;margin-right:0}}

/* Keep the two start actions and sharing visible; secondary options have their own panel. */
.welcome-footer{margin-top:12px}
.welcome-footer>.welcome-contact{display:flex;align-items:center;gap:8px;min-height:32px;margin:0;padding:4px 0;font-size:11px}
.welcome-footer .welcome-share{margin-top:4px}
.welcome-footer .welcome-share>a{background:none}
.welcome-footer .welcome-share>a:hover{background:#ffffff0d}
.welcome-side{position:fixed;right:38px;bottom:140px;width:280px;max-height:calc(100vh - 270px);max-height:calc(100dvh - 270px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:16px 20px;z-index:3;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:0 1px 6px #071f20b3}
body.playing .welcome-side{display:none}
.welcome-side-toggle{display:none}
.welcome-side .start-links{margin:0;gap:2px;align-items:stretch}
.welcome-side .start-links>a,.welcome-side .start-links>button{display:flex;align-items:center;justify-content:space-between;min-height:30px;padding:5px 0;width:100%;font-size:11px;line-height:1.4;text-align:left}
.welcome-side .start-links span{margin-left:12px}
.welcome-side .load-status{margin-top:14px}
.welcome-side #load-label{display:block;margin-top:8px;font-size:9px;line-height:1.5;color:#cad3c8}
body.error .welcome-side #load-label{color:#ffe0cb}
.welcome-side .welcome-information{margin-top:10px;font-size:9px}
.welcome-side .welcome-information>summary{min-height:32px}
@media(min-width:951px) and (max-height:800px){
  .welcome h1{font-size:clamp(38px,7.2vh,58px);margin:12px 0}
  .welcome-specs{margin:14px 0 16px}
  .welcome-side{bottom:110px}
}
@media(max-width:700px), (max-width:950px) and (max-height:500px){
  .welcome h1{font-size:clamp(38px,7.5vh,58px);margin:12px 0}
  .welcome>p{font-size:11px;line-height:1.6;margin:12px 0}
  .welcome-specs{margin:12px 0 14px}
  .welcome-specs b{font-size:16px}
  .welcome-footer{margin-top:8px}
  .welcome-footer>.welcome-contact{min-height:32px;font-size:10px}
  .welcome-footer .welcome-share{margin-top:2px;flex-wrap:nowrap}
  .welcome-footer .welcome-share>span{display:none}
  .welcome-footer .welcome-share>a{min-height:44px;padding:9px 12px;font-size:11px}
  .welcome-side{top:108px;right:var(--home-gutter);bottom:auto;width:44px;max-height:none;padding:0;overflow:visible;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:6}
  .welcome-side-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:4px;background:#14312ddb;font-size:25px}
  .welcome-side-content{display:none}
  .welcome-side.expanded{right:var(--home-gutter);width:min(310px,calc(100vw - 50px));padding:8px 14px 12px;border:1px solid var(--line);background:#14312df5;border-radius:5px;box-shadow:0 8px 35px #0d292240}
  .welcome-side.expanded .welcome-side-toggle{margin-left:auto;margin-bottom:4px;border:0;background:none}
  .welcome-side.expanded .welcome-side-content{display:block;max-height:calc(100vh - 188px);max-height:calc(100dvh - 188px);overflow-y:auto;overscroll-behavior:contain}
  .welcome-side .start-links>a,.welcome-side .start-links>button{min-height:44px;font-size:12px}
  .welcome-side .welcome-information>summary{min-height:44px;display:flex;align-items:center}
}
@media(max-width:700px) and (max-height:740px){
  .welcome h1{font-size:38px;margin:10px 0}
  .welcome-specs{display:none}
}
@media(min-width:500px) and (max-width:950px) and (max-height:500px){
  .welcome{display:grid;grid-template-columns:minmax(210px,.9fr) minmax(230px,1fr);column-gap:24px;width:calc(100vw - 2 * var(--home-gutter));max-width:none;padding-right:0}
  .welcome>.eyebrow{grid-column:1;grid-row:1}
  .welcome h1{grid-column:1;grid-row:2;font-size:28px;margin:8px 0}
  .welcome>p{grid-column:1;grid-row:3}
  .welcome .voyage-choices{grid-column:2;grid-row:1;margin:0}
  .welcome .voyage-choices select{font-size:10px;padding-top:7px;padding-bottom:7px}
  .welcome #start{grid-column:2;grid-row:2;align-self:start;width:100%}
  .welcome>.start-options{grid-column:2;grid-row:2;align-self:end;margin:0}
  .welcome .start-options #start-race{width:100%}
  .welcome-footer{grid-column:2;grid-row:3;margin-top:4px}
  .welcome>p{margin:8px 0;font-size:10px}
  .welcome-specs{display:none}
  .welcome-footer>.welcome-contact{min-height:28px}
  .welcome-footer .welcome-share>a{min-height:40px;padding:8px 10px;font-size:10px}
  .welcome-side{top:48px}
}
/* A tournament match link goes straight from this transition to its room. */
#match-entry{display:none}.match-entry #match-entry{display:block}
.match-entry #welcome>:not(#match-entry),.match-entry #welcome-side,.match-entry #location-note{display:none!important}
.match-entry-card>p{font-size:14px;line-height:1.8;color:#e4e8df;letter-spacing:.15px}
.match-entry-card>small{font-size:9px;color:#cad3c8;display:block;margin-top:8px}
#regatta-dialog.tournament-room .free-only{display:none!important}
/* A spectator sees only this match loading screen until the first live frame. */
#watch-entry{display:none}
.watch-entry #watch-entry{display:flex;position:fixed;inset:0;z-index:30;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(120% 70% at 50% 0%,#cfe0dc 0%,#8fb0b0 34%,#3f6f74 62%,#173b40 100%)}
.watch-entry #watch-entry::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;pointer-events:none;opacity:.32;
  background:repeating-linear-gradient(176deg,transparent 0 14px,#e8f1e81a 14px 15px,transparent 15px 31px);animation:watch-water 7s linear infinite}
@keyframes watch-water{from{background-position:0 0}to{background-position:-180px 31px}}
.watch-entry #welcome,.watch-entry #welcome-side,.watch-entry #location-note{display:none!important}
.watch-entry.lake-mikolajskie #watch-entry{background:radial-gradient(120% 70% at 50% 0%,#d3dfe4 0%,#86a7b6 34%,#335f76 62%,#122f40 100%)}
.watch-entry-card{position:relative;z-index:1;width:min(520px,100%);text-align:left}
.watch-entry-hero{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:6px;margin-bottom:22px;box-shadow:0 14px 40px #0a242a66}
.watch-entry-logo{display:block;width:min(260px,70%);height:auto;margin-bottom:26px}
.watch-entry-card h1{margin:18px 0 10px;font-size:clamp(36px,6vw,58px)}
.watch-entry-card>p{font-size:14px;line-height:1.7;color:#e4e8df;margin:0}
.watch-entry-card>strong{display:block;margin-top:18px;font-size:30px;font-weight:300;letter-spacing:.5px;color:#eef1cf}
.watch-entry-card>small{font-size:10px;color:#d6dfd3;display:block;margin-top:8px}
/* During a race the system sets wind, waves and light; participants only read them. */
.race-conditions-note{display:none}
body.race-conditions-locked #settings .race-conditions,body.race-conditions-locked #settings .race-venue{display:none!important}
body.race-conditions-locked .race-conditions-note{display:block;font-size:11px;line-height:1.6;color:#dfe6c8;background:#c9dfb20f;border:1px solid #c9dfb226;border-radius:3px;padding:10px 12px;margin:0 0 18px}
/* A class this venue refuses (the IACC on a lake): the reason and the way to its venue. */
.venue-class-note{font-size:11px;line-height:1.5;color:#c1d0bf;margin:4px 0 8px}.venue-class-note .text-button{font-size:11px;padding:0;margin-left:2px}

/* The start page's yachts under sail (src/welcome-showcase.js): the poster at once, the clips over it, crossfaded; gone for the game. */
.welcome-showcase{position:fixed;inset:0;background:#8ba6a7 62% center/cover no-repeat;transition:opacity .7s ease;pointer-events:none}
.welcome-showcase.hidden,body.playing .welcome-showcase{opacity:0}
.match-entry .welcome-showcase,.watch-entry .welcome-showcase,body.spectator-mode .welcome-showcase{display:none}
.welcome-showcase-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;opacity:0;transition:opacity .7s ease}
.welcome-showcase-video.visible{opacity:1}
@media (max-aspect-ratio:1/1){.welcome-showcase{background-position:66% center}.welcome-showcase-video{object-position:66% center}}
/* Pressed before the game was ready: the start button shows the progress until it sails. */
body.start-pending #start{animation:start-pending 1.4s ease-in-out infinite}
@keyframes start-pending{50%{filter:brightness(1.12)}}
@media (prefers-reduced-motion:reduce){body.start-pending #start{animation:none}}


/* A phone held upright, on the start page: the tournaments in the top right
   corner, the settings and the side panel's toggle in a column under it; the
   start, the regattas, the contact and the sharing at the foot of the screen,
   the yacht of the showcase between (its clip centred on her). */
@media (max-width: 700px) and (min-height: 600px) {
  body:not(.playing) .top-actions .tournament-nav { position: absolute; top: 10px; right: var(--home-gutter); z-index: 1; }
  body:not(.playing) .top-actions { grid-template-columns: 44px; justify-content: end; max-width: none; margin-top: 14px; }
  .welcome-side { top: 114px; }
  .welcome {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--welcome-top) - 24px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--welcome-top) - 24px - env(safe-area-inset-bottom, 0px));
  }
  .welcome > * { flex-shrink: 0; }
  .welcome > #start { margin-top: auto; }
  .welcome-showcase { background-position: 57% center; }
  .welcome-showcase-video { object-position: 57% center; }
  /* the text over a bright sail stays legible */
  .welcome > .eyebrow, .welcome > h1, .welcome > p, .welcome-specs, .welcome [data-venue-note], .welcome .boat-choice, .welcome-footer > .welcome-contact, .welcome-share > span { text-shadow: 0 1px 2px #0b1f1f99, 0 0 14px #0b1f1f8c; }
}