@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#f3f3e9;background:#123f47;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{color:inherit}button{font:inherit;cursor:pointer}button:focus-visible,summary:focus-visible{outline:2px solid #f1c777;outline-offset:4px}button{border:1px solid #ffffff30;background:transparent}#sea,#vignette{position:fixed;inset:0;width:100%;height:100%}#vignette{pointer-events:none;background:linear-gradient(90deg,#061e29d9 0%,#08242e85 30%,transparent 66%),linear-gradient(0deg,#071e2b77,transparent 30%)}header{position:fixed;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:28px 38px;z-index:3}.brand{display:flex;gap:15px;align-items:center;font-size:18px;letter-spacing:5px;font-weight:600}.mark{font-size:37px;color:#e9c48b;border:1px solid #e9c48b80;padding:0 10px;line-height:45px}.brand small{display:block;font-size:10px;letter-spacing:2.4px;margin-top:7px;color:#c6d1cc}.topright{display:flex;align-items:center;gap:22px;font-size:11px;letter-spacing:1.5px}.topright button{padding:10px;font-size:11px}.panel{position:absolute;left:6%;top:15%;width:355px;max-height:82vh;overflow-y:auto;scrollbar-width:thin}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:#b2c8c9}h1{font-family:Manrope,sans-serif;font-size:43px;line-height:1.17;font-weight:500;letter-spacing:-1.7px;margin:18px 0}p{line-height:1.6}.intro{color:#c6d4d4;font-size:15px;margin:0 0 22px}.rule{height:1px;background:#ffffff26;margin:22px 0}.boats{display:flex;gap:10px;margin-top:13px}.boat{padding:16px;text-align:left;flex:1;background:#102b3555}.selected{border-color:#e9c48b!important;background:#e9c48b12!important}.boat span{display:block;font-size:10px;letter-spacing:2px;color:#d3d9d3}.boat strong{display:block;font-family:Manrope,sans-serif;font-size:31px;font-weight:500;margin:4px 0}.boat small{font-size:11px;color:#b6c8cc}#handling{font-size:12px;color:#c8d5d2;margin:12px 0 22px}.missions{display:grid;gap:6px;margin-top:12px}.missions button{display:flex;align-items:center;padding:12px;font-size:13px;text-align:left;gap:12px}.missions b{font-size:10px;color:#e9c48b}.missions small{margin-left:auto;font-size:10px;color:#b9cccc}.primary{background:#efc889!important;color:#172e33!important;border:0!important;padding:17px 20px;width:100%;letter-spacing:2px;font-size:12px;font-weight:700;margin-top:20px;display:flex;justify-content:space-between;align-items:center}.primary:hover{background:#ffe0ab!important}.fine{text-align:center;font-size:10px;letter-spacing:1px;color:#92aeb3;margin-top:13px}details{margin:17px 0;font-size:11px;color:#a8c0c5}details p{font-size:12px}summary{cursor:pointer}#sceneCaption{position:fixed;right:9%;bottom:12%;text-align:right}#sceneCaption span{font-size:10px;letter-spacing:3px;color:#eccc92}#sceneCaption h2{font-family:Manrope;font-size:35px;font-weight:400;margin:9px 0}#sceneCaption p{font-size:10px;letter-spacing:2px}.glass{background:#092630cf;border:1px solid #c8dad52b;backdrop-filter:blur(14px)}.objective{position:absolute;left:30px;top:110px;padding:19px 23px}.objective h3{font-size:18px;font-weight:500;margin:9px 0}.objective p{font-size:12px;color:#b5ced0;margin:0}.wind{position:absolute;right:30px;top:110px;padding:18px;width:200px}.windrow{display:flex;align-items:center;gap:15px;margin:8px 0}.windrow strong{font-size:36px;font-weight:400}.windrow>span:last-child{font-size:12px}#windArrow{font-size:35px;color:#eccc92;display:block}.wind small{font-size:10px;letter-spacing:1px}.map{position:absolute;right:30px;bottom:150px;padding:15px;width:250px}.map small{font-size:9px;display:flex;justify-content:space-between}.gold{color:#efc889}.instruments{position:absolute;bottom:57px;left:50%;transform:translateX(-50%);display:flex;padding:19px 6px;gap:0}.instruments>div{padding:0 27px;border-right:1px solid #ffffff20;min-width:125px}.instruments>div:last-child{border:0;min-width:180px}.instruments small{display:block;font-size:9px;letter-spacing:1.5px;color:#b3cbcb;margin-bottom:7px}.instruments strong{font-family:Manrope;font-weight:400;font-size:31px;white-space:nowrap}.instruments strong span{font-size:16px}.throttle strong{font-size:14px}.track{height:3px;background:#ffffff22;margin-top:14px}.track i{display:block;width:0;height:3px;background:#efc889}.controls{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:22px;font-size:10px;white-space:nowrap;color:#cfdddc}kbd{font:10px 'DM Sans';border:1px solid #ffffff45;border-radius:3px;padding:3px 5px;margin-right:5px}#alignment{position:absolute;left:30px;bottom:160px;width:270px;padding:20px}#alignment h3{font-weight:500;font-size:17px}#alignment p{font-size:11px;color:#c6d9d7}#alignBars label{font-size:11px;display:flex;justify-content:space-between;margin:10px 0}progress{width:100%;accent-color:#efc889;height:7px}#overlay{position:fixed;inset:0;background:#061e2988;backdrop-filter:blur(5px);z-index:5;display:grid;place-items:center}#overlay[hidden],[hidden]{display:none!important}.result{width:420px;padding:36px;text-align:center}.result h2{font-family:Manrope;font-size:38px;font-weight:500}.result p{font-size:14px;color:#b5cdcf}.result button{width:100%;padding:15px;margin-top:10px;font-size:12px}.result .primary{justify-content:center}#score{font-size:14px}#score div{display:flex;justify-content:space-between;padding:9px;border-bottom:1px solid #ffffff22}#toast{position:fixed;top:90px;left:50%;transform:translateX(-50%);padding:10px 20px;background:#092630dd;color:#f4cd92;font-size:13px;opacity:0;pointer-events:none;transition:opacity .3s;z-index:6}@media(max-height:800px){.panel{top:13%;width:330px}h1{font-size:34px;margin:12px 0}.rule{margin:15px 0}.boat{padding:10px}.missions button{padding:9px}#handling{margin:10px 0 15px}.primary{margin-top:13px}}@media(max-width:800px){header{padding:20px}.topright>span{display:none}.panel{left:25px;width:300px}.map{width:180px;right:15px;bottom:145px}.map canvas{width:150px;height:136px}.instruments>div{padding:0 14px;min-width:80px}.instruments>div:last-child{min-width:110px}.instruments strong{font-size:24px}.controls{gap:8px;font-size:9px}.objective{left:15px;max-width:55%}.wind{right:15px;width:165px}#sceneCaption{right:25px}#alignment{left:15px;width:220px}.brand{font-size:14px}#phase{display:none}} 

/* Clearer helm instruments over the brighter Mediterranean light. */
.glass{background:#092731e8;border-color:#e0e8dc38}.panel{background:linear-gradient(110deg,#08232ee6,#08232e33);padding:22px 24px 18px;margin-left:-24px;width:390px;top:13%;max-height:86vh}.brand small{letter-spacing:1.8px}#sceneCaption{text-shadow:0 2px 16px #001922b0}#vignette{background:linear-gradient(90deg,#08232eb8,transparent 60%),linear-gradient(0deg,#071e2b44,transparent 25%)}@media(max-height:800px){.panel{top:11%;padding-top:12px;width:370px}}@media(max-width:800px){.panel{width:335px;margin-left:-10px;padding:18px;left:20px}}

#captainPanel{position:absolute;left:30px;top:225px;width:300px;padding:17px 19px}#captainChecklist{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:13px 0;font-size:11px;color:#99b1b4}#captainChecklist .done{color:#efd095}#captainChecklist .done:before{content:'✓ ';}#interactLabel{font-size:14px;line-height:1.4;min-height:38px;margin:12px 0 8px}.captainActions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.captainActions button{padding:8px 7px;font-size:10px;letter-spacing:.6px}.captainActions .active{background:#e9c48b25;color:#f3d6a6;border-color:#e9c48b}#interactButton{padding:10px;width:100%;margin-top:8px;font-size:11px;touch-action:none}button:disabled{opacity:.5;cursor:default}#crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#ffefd2aa;font-size:18px;pointer-events:none}#damageStatus{position:absolute;top:96px;left:50%;transform:translateX(-50%);padding:10px 18px;border:1px solid #dc977c;background:#3d211ded;color:#ffd5ac;font-size:12px;letter-spacing:1px}#windEffect{display:block;color:#efd095;margin-top:9px;font-size:10px}.objective{max-width:430px}#alignment{bottom:153px;width:260px;padding:13px 18px}#alignment h3{margin:10px 0}#alignBars label{margin:6px 0}.controls{gap:12px}#captainPanel progress{height:5px}@media(max-height:850px){#captainPanel{top:215px;padding:12px 15px;width:285px}#captainChecklist{margin:8px 0}#interactLabel{margin:6px 0;font-size:13px;min-height:30px}.captainActions{margin-top:6px}#alignment{left:340px;bottom:153px;width:240px}}@media(max-width:900px){#captainPanel{left:15px;width:270px}#alignment{left:300px;width:220px}.controls span:nth-child(3),.controls span:nth-child(4){display:none}.objective{max-width:55%}}

#soloNext{font-size:11px;color:#e7c58e;line-height:1.4;margin:8px 0}.captainActions button{min-height:30px}#captainPanel #interactLabel{min-height:20px}.controls{font-size:9px}

.controlChoice{border:0;padding:0;margin:14px 0;display:flex;gap:12px}.controlChoice legend{font-size:11px;letter-spacing:2px;margin-bottom:8px;color:#c0cecc}.controlChoice label{flex:1;cursor:pointer;border:1px solid #ffffff30;padding:9px;font-size:14px}.controlChoice label:has(input:checked){border-color:#efc889;background:#efc88918}.controlChoice input{accent-color:#efc889}.controlChoice small{display:block;font-size:11px;margin:5px 0 0 21px;color:#b4c7c8}.easyMode #captainChecklist,.easyMode #holdButton,.easyMode #thrusterButton,.easyMode #ipsControl,.easyMode .controls,.easyMode #interactionProgress{display:none}.easyMode #captainPanel{width:290px}.easyMode #interactButton{background:#efc889;color:#172e33;font-size:15px;min-height:48px;line-height:1.35}.easyMode .captainActions button{font-size:14px;min-height:44px;flex:1}.easyMode #interactLabel{display:none}.easyMode #soloNext{font-size:15px;line-height:1.5}.easyHelp{display:none}.easyMode .easyHelp{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;font-size:14px;white-space:nowrap}.easyHelp b{color:#efc889;font-size:12px;margin-left:12px}#easyDrivePad{position:absolute;right:30px;bottom:172px;width:198px;padding:12px;touch-action:none}.driveGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:9px}.driveGrid button{height:49px;font-size:23px;background:#143944;touch-action:none;user-select:none}.driveGrid small{display:block;font-size:9px;letter-spacing:.5px}.driveGrid .forward{grid-column:2}.driveGrid .forward+button{grid-column:1}.driveGrid .backward{grid-column:2}.driveGrid .stop{font-size:14px;background:#c99e63;color:#142a30}.driveGrid button:active{background:#e9c48b;color:#132b32}.easyMode .map{width:198px;top:278px;bottom:auto;right:30px;padding:12px}.easyMode .map canvas{width:172px;height:145px}.easyMode .objective h3{font-size:20px}.easyMode .objective p{font-size:14px}.easyMode #alignment{left:340px;bottom:172px}.easyMode #alignBars label{font-size:13px}.easyMode #moorHint{font-size:13px}@media(max-height:780px){.easyMode .map{top:250px}.easyMode #captainPanel{top:235px}#easyDrivePad{bottom:151px}.panel{max-height:85vh}}@media(max-width:900px){#easyDrivePad{right:15px;width:180px}.easyMode .map{right:15px;width:180px}.easyMode .map canvas{width:154px}.easyMode #alignment{left:315px;width:220px}.easyMode .easyHelp{font-size:12px;gap:7px}}

/* Keep navigation and driving buttons separate on shorter laptop screens. */
.easyMode .map{top:205px}.easyMode .map canvas{height:120px}@media(max-height:820px){.easyMode .map{display:none}}

/* Beginner controls share one layout across mouse and touch. */
#sea{touch-action:none}button{touch-action:manipulation}.quickGuide{padding:14px;background:#092630ee;border:1px solid #e9c48b66;font-size:14px}.quickGuide ol{padding-left:20px;line-height:1.6;margin:8px 0}.quickGuide small{color:#d6e2df}.driveGrid .diagonal{font-size:26px}.driveGrid .forward+button{grid-column:3}.driveGrid .forward{grid-column:2}.driveGrid button{min-width:48px;height:54px}.easyMode #easyDrivePad{bottom:110px;width:216px}.easyMode .instruments>div:nth-child(2),.easyMode .throttle,.easyMode .map,.easyMode .wind{display:none}.easyMode .instruments{bottom:32px;padding:10px}.easyMode .instruments strong{font-size:22px}.easyMode .easyHelp{bottom:9px;font-size:12px}.easyMode #captainPanel{top:auto;bottom:110px;width:270px}.easyMode .objective{max-width:480px}.easyMode #soloNext{font-size:13px}.easyMode .captainActions button{font-size:12px}.easyMode .objective .eyebrow{display:none}
@media(max-width:600px){header{padding:10px 12px}.brand{font-size:12px;letter-spacing:2px}.brand small,.mark,#sound,#sceneCaption{display:none}.topright{gap:5px}#pause{min-width:48px;min-height:44px}.panel{left:12px;top:64px!important;margin:0;width:calc(100% - 24px)!important;max-height:calc(100dvh - 76px)!important}.result{width:calc(100% - 24px);max-height:90dvh;overflow:auto;padding:22px}.easyMode .objective{left:12px;right:12px;top:64px;max-width:none;padding:12px}.easyMode .objective h3{font-size:17px;margin:0 0 6px}.easyMode .objective p{font-size:13px}.easyMode #captainPanel{left:12px;bottom:105px;width:calc(100% - 214px);padding:9px}.easyMode #captainPanel .eyebrow,.easyMode #soloNext{display:none}.easyMode #interactButton{font-size:13px}.easyMode .captainActions{display:grid;grid-template-columns:1fr}.easyMode #easyDrivePad{right:12px;bottom:105px;width:184px;padding:8px}.driveGrid{gap:4px}.driveGrid button{height:50px}.easyMode .instruments{bottom:35px;width:calc(100% - 24px);justify-content:space-around}.easyMode .instruments>div{padding:0 8px;min-width:0}.easyMode .easyHelp{font-size:10px;white-space:normal;text-align:center;width:95%}#toast{top:160px;width:90%;font-size:12px}}
@media(max-height:520px) and (min-width:601px){header{padding:8px 16px}.brand small,.mark,#sound{display:none}.easyMode .objective{top:54px;max-width:55%;padding:10px}.easyMode .objective h3{font-size:16px;margin:0 0 5px}.easyMode .objective p{font-size:12px}.easyMode #captainPanel{left:15px;bottom:65px;width:240px;padding:8px}.easyMode #soloNext,.easyMode #stationName{display:none}.easyMode #easyDrivePad{bottom:65px;right:15px;width:190px;padding:8px}.driveGrid button{height:46px}.easyMode .instruments{bottom:6px}.easyMode .easyHelp{display:none}.panel{top:50px!important;max-height:calc(100dvh - 60px)!important}}

/* Joystick and STOP own separate pointers; wind and chart remain visible. */
#touchJoystick{position:relative;width:144px;height:144px;border-radius:50%;border:2px solid #b7d1d477;background:radial-gradient(circle,#376574,#143640);touch-action:none;user-select:none;cursor:grab;display:inline-block;vertical-align:middle;margin-top:8px}#joystickKnob{position:absolute;left:45px;top:45px;width:50px;height:50px;border-radius:50%;background:#efc889;box-shadow:0 3px 12px #00182088;pointer-events:none}.joyForward,.joyReverse{position:absolute;left:0;right:0;text-align:center;font-size:9px;pointer-events:none;color:#e0ecea}.joyForward{top:12px}.joyReverse{bottom:12px}#touchStop{width:76px;height:70px;margin-left:12px;border-radius:14px;background:#efc889;color:#142c35;font-weight:700;touch-action:none;vertical-align:middle}#touchStop small{display:block;font-size:8px;margin-top:7px}#touchStop.active{background:#f9e5bf;box-shadow:0 0 0 3px #ecca95aa}.easyMode #easyDrivePad{width:270px;padding:12px}.easyMode .map{display:block;top:205px;right:30px;width:170px;padding:10px}.easyMode .map canvas{width:148px;height:135px}.easyMode .wind{display:block;top:105px;right:30px;width:170px;padding:10px}.easyMode .windrow{margin:3px 0;gap:10px}.easyMode .windrow strong{font-size:24px}.easyMode #windEffect{display:none}.easyMode #windArrow{font-size:25px}.easyMode .wind small{font-size:9px}.easyMode .map .eyebrow{font-size:9px;letter-spacing:1px}
@media(max-width:600px){.easyMode #easyDrivePad{width:210px;right:10px;bottom:108px;padding:8px}#touchJoystick{width:120px;height:120px}#joystickKnob{left:33px;top:33px}#touchStop{width:60px;height:65px;margin-left:7px}.easyMode #captainPanel{width:calc(100% - 236px);min-width:100px;left:10px;bottom:108px}.easyMode .map{right:10px;top:160px;width:124px;padding:7px}.easyMode .map canvas{width:108px;height:98px}.easyMode .map small{font-size:7px}.easyMode .wind{left:10px;right:auto;top:160px;width:118px;padding:7px}.easyMode .wind .eyebrow{font-size:9px}.easyMode .objective{top:60px;max-height:94px;overflow:auto}.easyMode .map .eyebrow{font-size:8px}}
@media(max-height:520px) and (min-width:601px){.easyMode .objective{max-width:calc(100% - 380px)}.easyMode .map{top:52px;right:15px;width:124px;padding:6px}.easyMode .map canvas{width:110px;height:100px}.easyMode .wind{top:52px;right:151px;width:116px;padding:8px}.easyMode #easyDrivePad{width:254px;bottom:61px;padding:7px}.easyMode #captainPanel{bottom:61px}#touchJoystick{width:126px;height:126px}#joystickKnob{left:36px;top:36px}}

#joystickKnob{left:50%;top:50%;margin:-25px 0 0 -25px}@media(max-height:420px) and (min-width:601px){#touchJoystick{width:110px;height:110px}.easyMode .map canvas{height:67px}.easyMode .map{padding:5px}.easyMode #easyDrivePad{padding:6px}.easyMode .wind{padding:6px}.easyMode .wind .eyebrow{display:none}}

/* A stable, thumb-sized finish action; joystick and STOP remain separate. */
.easyMode #interactButton{min-height:64px;font-size:15px;font-weight:750;touch-action:manipulation}
.easyMode #interactButton.dockReady{background:#9be5bc;border:2px solid #e2ffe9;box-shadow:0 0 0 4px #9be5bc22;color:#12342b}
@media(max-width:600px){.easyMode #captainPanel{bottom:108px}.easyMode #interactButton{min-height:76px;font-size:13px;padding:10px 5px;overflow-wrap:normal}.easyMode .captainActions button{min-height:38px;padding:5px}}

.gameModes{margin:18px 0}.gameModes a{display:block;padding:14px;border:1px solid #efc57c;color:#ffe1a6;text-decoration:none;font-size:14px}.gameModes a[hidden]{display:none}.challengeMode .quickGuide,.challengeMode .controlChoice,.challengeMode .missions,.challengeMode #menu>.eyebrow,.challengeMode #menu>.rule{display:none}.challengeMode #menu{max-height:calc(100dvh - 100px);overflow:auto}.challengeMode #menu h1{font-size:clamp(30px,4vw,48px)}.challengeMode #handling{margin-bottom:12px}.raceInstructions{border-left:3px solid #f0bb68;padding:0 14px}.raceInstructions p,#raceStatus{font-size:14px;line-height:1.5}.nameLabel{display:block;margin:18px 0;font-size:14px}.nameLabel input,.joinRow input{width:100%;box-sizing:border-box;margin-top:6px;background:#173a47;border:1px solid #66838b;padding:12px;color:white;font:inherit;border-radius:4px;min-width:0}.raceOptions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.raceOptions button,.joinRow button,#raceLobby button{padding:12px;font-size:14px;min-height:48px}.raceOptions small{display:block;font-size:12px;opacity:.75;margin-top:6px}.joinRow{display:grid;grid-template-columns:1fr auto;gap:8px;margin:10px 0}.raceBoard{margin:14px 0}.raceBoard summary{font-size:14px}#leaderboard{padding:0;list-style:none;font-size:14px}#leaderboard li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #ffffff20;gap:10px}#raceLobby{padding:16px;background:#183e49;border:1px solid #66bcc9}#raceLobby small{display:block;font-size:13px;line-height:1.5;margin-top:12px}#raceHud{position:absolute;left:50%;top:85px;transform:translateX(-50%);padding:14px 24px;text-align:center;min-width:190px;pointer-events:auto}#raceHud>strong{display:block;font-size:32px;font-variant-numeric:tabular-nums}#raceHud>span{color:#ffd37c;font-size:14px}#raceHud small,#raceHud p{font-size:13px}#raceHud button{padding:8px 12px;font-size:13px}#raceCountdown{position:absolute;z-index:12;top:45%;left:50%;transform:translate(-50%,-50%);font-size:clamp(36px,8vw,90px);font-weight:700;color:#ffe2a5;text-shadow:0 3px 24px #061c2a;pointer-events:none}.challengeMode #captainPanel,.challengeMode #alignment{display:none!important}.challengeMode .objective{max-width:260px}.challengeMode .map .gold{font-size:0}.challengeMode .map .gold:after{content:'● NEXT RING';font-size:12px}@media(max-width:760px){#raceHud{left:12px;top:74px;transform:none;padding:9px 12px;min-width:140px}#raceHud>strong{font-size:25px}#raceHud p{max-width:180px;margin:5px 0}.challengeMode .objective{display:none}.challengeMode #menu{max-height:calc(100dvh - 88px)}.raceOptions{grid-template-columns:1fr}.challengeMode .wind{top:245px}.challengeMode #raceMenu{padding-bottom:4px}}

#takedownHud{position:absolute;left:50%;top:85px;transform:translateX(-50%);padding:14px 24px;text-align:center;min-width:210px;pointer-events:auto;border-top:3px solid #ff925c}#takedownHud>strong{display:block;font-size:36px;color:#ffd9be;font-variant-numeric:tabular-nums}#takedownHud>span{font-size:14px;color:#ffae83}#takedownHud small,#takedownHud p{font-size:14px}#takedownHud button{padding:8px 12px;font-size:13px}.takedownMode .raceInstructions{border-color:#ff925c}.takedownMode .raceInstructions li{font-size:16px;line-height:1.5;margin-bottom:10px}.takedownMode .map .gold:after{content:'● RING / ● TARGETS'}.gameModes a+a{margin-top:8px}@media(max-width:760px){#takedownHud{left:12px;top:74px;transform:none;padding:9px 12px;min-width:145px}#takedownHud>strong{font-size:29px}#takedownHud p,#takedownHud small{font-size:12px}.takedownMode .wind{top:255px}}