@import url('/fonts.css');
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#fff7dd;background:#177d88;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden;touch-action:none}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible{outline:3px solid #f6d781;outline-offset:4px}[hidden]{display:none!important}#ocean{display:block;width:100vw;height:100dvh}header{position:fixed;top:max(24px,env(safe-area-inset-top));left:max(28px,env(safe-area-inset-left));right:max(28px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{display:flex;align-items:center;gap:12px}.brandmark{font-size:48px;line-height:1;color:#edcb7c}.brand strong{font-size:20px;letter-spacing:.14em}.brand em{font-style:normal;font-weight:400}.brand small{display:block;font-size:9px;letter-spacing:.28em;margin-top:7px;color:#b0d3ca}.connection{font-size:11px;background:#103b42db;border:1px solid #ffffff24;border-radius:30px;padding:10px 15px;display:flex;gap:8px;align-items:center}#signal{width:7px;height:7px;border-radius:50%;background:#e5bc71}#signal.online{background:#68e5b8}#lobby{position:fixed;inset:0;display:flex;align-items:center;background:linear-gradient(90deg,#0d343deb 0%,#0d343d99 42%,transparent 76%)}.welcome{margin:60px 7vw 20px;max-width:560px}.eyebrow{font-size:10px;letter-spacing:.32em;color:#b9dbcc}.welcome h1{font-family:Georgia,serif;font-weight:normal;letter-spacing:-.055em;font-size:clamp(44px,6.5vw,88px);line-height:1.03;margin:24px 0}.welcome p{font-size:15px;line-height:1.8;color:#b8d5cd}.welcome form{margin-top:28px}.welcome label{display:block;font-size:9px;letter-spacing:.2em;margin-bottom:10px;color:#e6d6ad}.joinrow{display:flex;gap:10px;flex-wrap:wrap}input{width:220px;padding:16px;background:#123e48;border:1px solid #73938b;border-radius:6px;color:#fff7dd}.joinrow button{background:#edca7a;color:#143940;padding:15px 20px;font-weight:700;border:0;border-radius:6px;min-width:190px}.joinrow button span{margin-left:18px}#error{color:#ffb69b;font-size:12px;min-height:20px;margin:4px 0}.facts{display:flex;border-top:1px solid #f1ebcb30;margin-top:18px;padding-top:22px;gap:28px}.facts span{display:flex;flex-direction:column;font-size:10px;color:#afd0c7;gap:7px}.facts b{font:26px Georgia,serif;color:#f7e8c0}.scope{display:block;margin-top:26px;font-size:8px;letter-spacing:.16em;color:#86b0a9}footer{position:fixed;bottom:max(15px,env(safe-area-inset-bottom));left:28px;right:28px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.12em;pointer-events:none;color:#c8e4d6a6}footer span:first-child{font-weight:800}.captain,.roster,.minimap{position:fixed;background:#103b42d9;border:1px solid #bcdbc52d;border-radius:12px;backdrop-filter:blur(12px)}.captain{top:110px;left:28px;width:225px;padding:18px}.captain>small{font-size:9px;letter-spacing:.12em;color:#acd0c6}.captain>strong{display:block;font-family:Georgia,serif;font-size:24px;margin:6px 0}.shiptype{font-size:11px;color:#afd4c7;display:flex;justify-content:space-between}.shiptype span{font-size:9px;border:1px solid #edca7a66;color:#edca7a;padding:2px 5px;border-radius:3px}.speedtrack{height:3px;background:#72978944;margin:17px 0 7px;border-radius:4px}.speedtrack i{display:block;background:#edca7a;height:3px;width:0;transition:width .1s}.roster{top:110px;right:28px;width:220px;padding:16px}.row{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em;color:#c4ddce}.row span{color:#edca7a}.roster #players{max-height:150px;overflow:auto;margin:12px 0}.playerrow{font-size:12px;padding:6px 0;display:flex;gap:9px;align-items:center}.playerrow i{width:6px;height:6px;border-radius:50%;background:#82c7e8}.playerrow.self i{background:#edca7a}.roster button{font-size:10px;color:#edca7a;background:transparent;border:0;border-top:1px solid #ffffff25;padding:13px 0 0;width:100%;text-align:left}.minimap{bottom:65px;right:27px;padding:10px;text-align:center;pointer-events:none}.minimap canvas{width:145px;height:145px;display:block}.minimap span{font-size:8px;letter-spacing:.2em;color:#bdd7c9}#joystick{position:fixed;bottom:max(75px,calc(env(safe-area-inset-bottom) + 35px));left:max(50px,env(safe-area-inset-left));width:120px;height:120px;border-radius:50%;border:1px solid #e3e9c977;background:radial-gradient(circle,#315d6399,#173e4599);touch-action:none;user-select:none}#joystick:after{content:'';position:absolute;inset:18px;border:1px dashed #d2dfc433;border-radius:50%;pointer-events:none}#stick{position:absolute;width:48px;height:48px;left:35px;top:35px;border:1px solid #fff3c2;border-radius:50%;background:#e6c478aa;box-shadow:0 5px 20px #103b4266;pointer-events:none}#joystick>span{position:absolute;bottom:-23px;left:44px;font-size:9px;letter-spacing:.18em;color:#b8d7c8}.helm{position:fixed;bottom:80px;right:225px;display:flex;align-items:center;flex-direction:column;gap:12px}.helm #brake{background:#123d46c9;color:#edca7a;border:1px solid #e0c37b77;border-radius:50%;width:78px;height:78px;font-size:28px;touch-action:none}.helm small{display:block;font-size:7px;letter-spacing:.1em}.helm #leave{border:0;background:none;color:#b5d4cc;font-size:10px;padding:8px}.help{position:fixed;bottom:50px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.13em;color:#b4d6cc;pointer-events:none}#notice{position:fixed;top:80px;left:50%;transform:translateX(-50%);font-size:12px;padding:10px 18px;border-radius:24px;background:#163d44ed;opacity:0;transition:opacity .3s;max-width:80vw;text-align:center}#notice.visible{opacity:1}#hud{pointer-events:none}#hud .roster,#hud .helm,#hud #joystick{pointer-events:auto}@media(max-width:850px){header{top:max(14px,env(safe-area-inset-top));left:18px;right:18px}.brand strong{font-size:15px}.brandmark{font-size:34px}.brand small{font-size:7px}.connection{font-size:9px;padding:8px 10px}.captain{top:76px;left:18px;width:180px;padding:12px}.captain>strong{font-size:20px}.roster{top:76px;right:18px;width:170px;padding:12px}.roster #players{max-height:80px}.minimap{bottom:26px;right:18px}.minimap canvas{width:85px;height:85px}.helm{right:145px;bottom:35px}.help{display:none}#joystick{left:35px;bottom:45px;width:110px;height:110px}#stick{left:30px;top:30px}#joystick>span{left:40px}.welcome{margin:70px 6vw 25px}.welcome h1{font-size:46px;margin:14px 0}.welcome p{font-size:12px}.welcome form{margin-top:12px}.facts{gap:22px;padding-top:12px;margin-top:10px}.facts b{font-size:21px}.scope{margin-top:14px}.joinrow input{width:180px;padding:12px}.joinrow button{padding:12px;min-width:175px}footer{left:18px;right:18px;font-size:7px}#notice{top:58px}}@media(max-height:510px){.welcome{max-width:550px;margin-top:60px}.welcome h1{font-size:38px}.welcome>p{margin:8px 0}.facts,.scope{display:none}.captain{width:155px}.captain .shiptype{display:none}.captain .speedtrack{margin-top:8px}.roster #players{max-height:45px}.minimap{bottom:20px}.helm #brake{width:65px;height:65px}#joystick{width:100px;height:100px;bottom:36px}#stick{left:25px;top:25px}.helm{bottom:20px}footer #footerInfo{display:none}}

/* Gameplay controls preserve the joystick and safe-area margins. */
.actions{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(30px,env(safe-area-inset-bottom));width:235px;display:grid;grid-template-columns:1fr 1fr;gap:7px;pointer-events:auto}.actions button{min-height:48px;border:1px solid #e6c47899;border-radius:9px;background:#123d46ef;color:#fff0cf;padding:8px;font-size:11px;touch-action:none}.actions #fire{background:#af4937}.actions #upgrade,.actions #repair{grid-column:span 2}.mission{position:fixed;bottom:30px;left:200px;right:285px;text-align:center;font-size:12px;pointer-events:none}.mission small{display:block;font-size:10px;color:#b8d8d0;margin-top:6px}#inventory,#vitals{font-size:11px;line-height:1.7;margin-top:4px}.helm{right:280px;bottom:135px}.minimap{bottom:245px}.help{display:none}.roster #players{max-height:65px}header{z-index:2}
@media(max-width:850px){.actions{width:205px;right:max(12px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom))}.actions button{font-size:10px;min-height:42px}.helm{right:230px;bottom:35px}.minimap{display:none}.mission{left:185px;right:230px;bottom:130px;font-size:10px}.mission small{font-size:9px}.captain{width:175px}.roster{width:160px}.captain>strong{font-size:16px}}
@media(max-height:510px){.captain{top:65px;padding:8px;width:175px}.captain .shiptype{display:block}.captain>small,.captain .speedtrack,#speed{display:none}.captain>strong{margin:2px 0}.roster{top:65px;padding:8px}.roster #players{max-height:28px}.mission{bottom:auto;top:75px;left:205px;right:195px}.actions{bottom:20px}.helm{right:235px;bottom:20px}.helm #leave{padding:2px}#joystick{left:max(35px,env(safe-area-inset-left))}#notice{z-index:5;top:45px}}
@media(max-width:550px) and (min-height:511px){.roster{top:245px;left:18px;right:auto}.mission{left:18px;right:18px;top:185px;bottom:auto}.helm{right:235px;bottom:170px}.actions{width:190px}.captain{top:75px;width:calc(100vw - 36px)}#joystick{left:25px}.connection{max-width:150px}.brand small{display:none}}

#cargo{font-size:11px;color:#edca7a;margin-top:4px}#workshop{background:#103b42;color:#fff0cf;border:1px solid #edca7a;border-radius:14px;width:min(560px,92vw);max-height:85dvh;padding:20px;overflow:auto;touch-action:pan-y}#workshop::backdrop{background:#071c26aa}.workshopHead{display:flex;justify-content:space-between;align-items:center;gap:12px}.workshopHead h2{font:26px Georgia;margin:0}.workshopHead button{padding:10px;color:#fff;background:transparent;border:1px solid #a9c9bd;border-radius:8px}#workshop p{font-size:12px;line-height:1.5}.workshopChoices{display:grid;gap:8px}.workshopChoices button{min-height:50px;text-align:left;background:#24525a;border:1px solid #edca7a88;color:#fff0cf;padding:12px;border-radius:8px;font-size:13px}.workshopChoices button:disabled{cursor:not-allowed;opacity:.5}#workshopMessage{color:#f5ce7a;min-height:20px}@media(max-height:510px){#workshop{padding:12px}.workshopChoices button{min-height:40px;padding:8px}#workshop p{margin:6px 0;font-size:11px}.captain #vitals{display:none}}

#islandPanel{background:#103b42;color:#fff0cf;border:1px solid #edca7a;border-radius:14px;width:min(580px,92vw);max-height:85dvh;padding:20px;overflow:auto;touch-action:pan-y}#islandPanel::backdrop{background:#071c26aa}#islandPanel p,#islandPanel li{font-size:13px;line-height:1.55}#captureProgress{width:100%;accent-color:#edca7a}#siegeSummary{display:block;font-size:11px;color:#f4d384}#islandStatus{color:#f4d384;font-weight:700}.mission>br{display:none}@media(max-height:510px){.mission #objective{display:none}.roster #players{max-height:20px}.roster button{padding-top:7px;font-size:9px}#siegeSummary{font-size:10px}.mission small{font-size:8px}.roster #invite{display:none}}

#clanPanel,#scoreboard{background:#103b42;color:#fff0cf;border:1px solid #edca7a;border-radius:14px;width:min(620px,94vw);max-height:85dvh;overflow:auto;padding:20px;touch-action:pan-y}#clanPanel::backdrop,#scoreboard::backdrop{background:#071c26dd}#clanPanel p{font-size:12px;line-height:1.5}#createClan{display:grid;gap:10px}#createClan label{display:grid;gap:4px;font-size:12px}#createClan input{width:100%;padding:9px}.clanRow{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #ffffff33;padding:10px 0;font-size:12px}#clanPanel button{background:#edca7a;color:#123d46;border:0;border-radius:7px;padding:10px}#scoreboard table{width:100%;border-collapse:collapse;text-align:left}#scoreboard td,#scoreboard th{padding:10px;border-bottom:1px solid #ffffff33}#winnerText{font-size:20px;color:#edca7a}#islandSelect{background:#204c52;color:white;padding:8px;border-radius:6px;max-width:100%}#roundClock{color:#f3cf7e;white-space:nowrap}.roster #players{max-height:42px}@media(max-height:510px){.roster #players{display:none}.roster button{padding:5px 0}.connection{max-width:280px;font-size:8px}}

#hud #toggleHud{pointer-events:auto;position:fixed;z-index:20;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:44px;height:44px;border:1px solid #edca7a88;border-radius:50%;background:#103b42d9;color:#ffe2a1;font-size:24px;touch-action:manipulation}
body.minimal-ui #hud>:not(#joystick):not(#toggleHud):not(#contextActions):not(#captureStatus){display:none!important}
body.minimal-ui:has(#hud:not([hidden])) header{display:none!important}
body.minimal-ui #joystick span{display:none}
#clanList:empty::after{content:"Aucun clan pour le moment. Un capitaine doit d’abord en créer un.";display:block;padding:12px 0;font-size:13px;color:#d3e5df}
.clanRow span{min-width:0;overflow-wrap:anywhere}.clanRow button{flex-shrink:0;min-height:44px}#clanPanel h3{font-size:15px;margin:18px 0 8px}

/* Actions appear only when useful; remain accessible in minimal HUD mode. */
#hud #contextActions{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(94px,calc(env(safe-area-inset-bottom) + 84px));display:flex;gap:10px;pointer-events:auto;z-index:12}
#contextActions button{width:52px;height:52px;border-radius:50%;border:2px solid #edca7a;background:#123d46ee;color:#ffe3a2;font-size:27px;touch-action:none;user-select:none;-webkit-user-select:none}
#contextActions button:disabled{opacity:.45;cursor:default}
.actions #gather,.actions #upgrade,.actions #repair{display:none!important}
.actions{width:auto;grid-template-columns:1fr}.actions #fire{min-width:140px}
body.minimal-ui #contextActions{bottom:max(24px,env(safe-area-inset-bottom))}

#contextActions #repairTower{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-size:25px}#towerCost{font-size:10px;line-height:12px;color:#ffe3a2}

#clanColor,#editClanColor{width:64px;min-height:44px;padding:3px}#roomsLink{color:#f3d27f}#fire:disabled{opacity:.6}form[hidden]{display:none}

/* v0.9.1: thumb controls, compact HUD, scrollable crew drawer. */
#mobileMenu,#closeMobileMenu,#mobileLeave{display:none}
button,a,input,select{-webkit-tap-highlight-color:transparent}
#lobby{overflow-y:auto;touch-action:pan-y}dialog{overscroll-behavior:contain}dialog button,dialog select{min-height:44px}dialog input{font-size:16px}
@media(max-width:900px),(pointer:coarse){
 body:has(#hud:not([hidden])) header .brand,body:has(#hud:not([hidden])) footer{display:none}
 body:has(#hud:not([hidden])) header{top:calc(env(safe-area-inset-top) + 14px);left:50%;right:auto;transform:translateX(-50%)}
 .connection{padding:8px 10px;font-size:11px}.connection #status{display:none}
 .captain{top:calc(env(safe-area-inset-top) + 10px);left:calc(env(safe-area-inset-left) + 12px);width:220px;padding:8px 10px;border-radius:10px;pointer-events:none}
 .captain>small,.captain>strong,.captain .speedtrack,.captain #speed{display:none}
 .captain .shiptype{display:block;font-size:11px}.captain #vitals{display:block;font-size:12px;line-height:1.4;margin:3px 0 0}.captain #cargo{font-size:10px;margin:2px 0}.captain #inventory{font-size:11px;line-height:1.4;margin:2px 0}
 .mission,.help,.minimap{display:none}
 #hud #mobileMenu{display:block;position:fixed;top:calc(env(safe-area-inset-top) + 10px);right:calc(env(safe-area-inset-right) + 12px);width:48px;height:48px;pointer-events:auto;z-index:21;background:#103b42ed;border:1px solid #edca7a88;border-radius:12px;color:#ffe2a1;font-size:24px;touch-action:manipulation}
 #hud #toggleHud{left:auto;right:calc(env(safe-area-inset-right) + 68px);top:calc(env(safe-area-inset-top) + 10px);transform:none;width:48px;height:48px;border-radius:12px}
 .roster{display:none;top:calc(env(safe-area-inset-top) + 66px);bottom:calc(env(safe-area-inset-bottom) + 12px);right:calc(env(safe-area-inset-right) + 12px);left:auto;width:min(310px,calc(100vw - 24px - env(safe-area-inset-right)));padding:16px;overflow-y:auto;touch-action:pan-y;z-index:22;max-height:calc(100dvh - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom));background:#103b42fa}
 body.crew-open .roster{display:block} .roster #players{display:block;max-height:110px;overflow-y:auto;touch-action:pan-y}
 .roster button,.roster #invite,.roster #mobileLeave,.roster #closeMobileMenu{display:block;min-height:46px;font-size:13px;padding:12px 0;touch-action:manipulation}
 .roster #closeMobileMenu{text-align:right;border:0;margin-bottom:8px}
 #joystick{width:112px;height:112px;left:calc(env(safe-area-inset-left) + 20px);bottom:calc(env(safe-area-inset-bottom) + 20px)}
 #stick{left:31px;top:31px}#joystick>span{display:none}
 .actions{right:calc(env(safe-area-inset-right) + 20px);bottom:calc(env(safe-area-inset-bottom) + 20px);width:100px}
 .actions #fire{width:100px;min-width:0;height:76px;min-height:76px;border-radius:24px;font-size:12px;font-weight:700;padding:9px;box-shadow:0 4px 16px #071c2640}
 .helm{right:calc(env(safe-area-inset-right) + 132px);bottom:calc(env(safe-area-inset-bottom) + 20px)}
 .helm #brake{width:52px;height:52px;font-size:23px}.helm small,.helm #leave{display:none}
 #hud #contextActions{right:calc(env(safe-area-inset-right) + 20px);bottom:calc(env(safe-area-inset-bottom) + 110px);gap:10px}
 #contextActions button{width:52px;height:52px}
 body.minimal-ui #hud #contextActions{bottom:calc(env(safe-area-inset-bottom) + 20px)}
 #notice{top:calc(env(safe-area-inset-top) + 105px);max-width:70vw;width:max-content;font-size:12px;padding:8px 12px;pointer-events:none;z-index:25}
 .welcome{margin:80px max(20px,env(safe-area-inset-left)) 24px;max-width:540px}.welcome h1{font-size:42px}.welcome input{font-size:16px;min-height:48px}.welcome button{min-height:48px}.welcome .scope{display:none}
 #workshop,#clanPanel,#islandPanel,#scoreboard{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));width:min(580px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));padding:16px}
 .workshopHead{position:sticky;top:-16px;background:#103b42;padding:10px 0;z-index:2}.workshopHead h2{font-size:23px}.workshopChoices button{min-height:52px;font-size:13px;padding:10px}
}
@media(max-width:600px){
 .captain{width:calc(100vw - 144px - env(safe-area-inset-left) - env(safe-area-inset-right));min-width:156px}
 body:has(#hud:not([hidden])) header{top:calc(env(safe-area-inset-top) + 68px);left:auto;right:calc(env(safe-area-inset-right) + 12px);transform:none}
 .connection{font-size:10px;padding:6px 9px}
 .helm{right:calc(env(safe-area-inset-right) + 140px);bottom:calc(env(safe-area-inset-bottom) + 28px)}
 .clanRow{flex-wrap:wrap}.clanRow button{width:100%}.joinrow input,.joinrow button{width:100%}.welcome .facts{display:none}
 #notice{max-width:90vw;top:calc(env(safe-area-inset-top) + 120px)}
}
@media(max-height:450px) and (min-width:601px){
 .welcome{margin-top:72px;margin-bottom:16px}.welcome h1{font-size:30px;margin:4px 0}.welcome>p{display:none}.welcome form{margin:8px 0}.welcome p{margin:6px 0}.welcome .facts{display:none}
}
@media(max-width:600px){.helm{right:calc(50% - 26px);bottom:calc(env(safe-area-inset-bottom) + 24px)}}

#captureStatus{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 95px);transform:translateX(-50%);display:grid;grid-template-columns:48px minmax(100px,230px);align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:#103b42ed;color:#ffe39b;max-width:90vw;pointer-events:none;z-index:10;font-size:12px}
#captureStatus svg{width:48px;height:48px;grid-area:1/1}#captureStatus strong{grid-area:1/1;text-align:center;font-size:11px}#captureStatus circle{fill:none;stroke:#ffffff25;stroke-width:3}#captureStatus #captureFill{stroke:#f8d773;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .1s linear}#captureStatus.contested #captureFill{stroke:#ff735e}
.rulesLink{display:block;color:#f3d27f;padding:12px 0;min-height:44px;font-size:13px}
#workshop.exposed{position:fixed;inset:auto 12px 180px auto;margin:0;width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 260px);padding:12px;z-index:15;box-shadow:0 8px 30px #071c2655}#workshop.exposed p:not(#workshopLocation):not(#workshopStats):not(#workshopMessage),#workshop.exposed details{display:none}#workshop.exposed #workshopLocation{color:#ffb19b}#workshop.exposed .workshopChoices button{font-size:12px;min-height:44px;padding:8px}#workshop.exposed .workshopHead{top:-12px}#workshop.exposed .workshopHead h2{font-size:19px}
@media(max-height:450px){#workshop.exposed{top:64px;bottom:auto;right:126px;max-height:calc(100dvh - 76px);width:280px}#workshop.exposed #workshopStats{display:none}}
@media(max-width:600px){#captureStatus{top:calc(env(safe-area-inset-top) + 110px)}}

body.minimal-ui #captureStatus span{display:none}body.minimal-ui #captureStatus{grid-template-columns:48px}
@media(min-width:901px) and (min-height:651px) and (pointer:fine){.minimap{top:350px;bottom:auto}.minimap canvas{width:90px;height:90px}}
@media(min-width:901px) and (max-height:650px) and (pointer:fine){.minimap{display:none}}
#startTutorial{border:1px solid #edca7a77;border-radius:8px;color:#ffe2a1;background:#123d46;padding:12px;min-height:44px}
#tutorialCoach{position:fixed;top:82px;left:50%;transform:translateX(-50%);width:min(340px,calc(100vw - 24px));padding:12px 16px;background:#0d343df5;border:1px solid #78e9c7;border-radius:12px;z-index:18;color:#eafff4;font-size:12px;pointer-events:auto}#tutorialCoach small{display:block;color:#8be5c5;font-size:9px;letter-spacing:.12em}#tutorialCoach strong{display:block;font-size:16px;margin:5px 0}#tutorialCoach p{margin:4px 0;line-height:1.4}#tutorialCoach>div{display:flex;gap:8px;align-items:center}#tutorialArrow{display:inline-block;color:#8be5c5;font-size:24px}#tutorialQuit{margin-left:auto;min-height:36px;padding:6px;background:none;border:0;color:#edca7a;font-size:11px}.tutorial-mode .mission,.tutorial-mode #showClans,.tutorial-mode #invite,.tutorial-mode .roster .rulesLink{display:none!important}.tutorial-mode #captureStatus{top:240px}.tutorial-mode #notice{display:none}.tutorial-mode #workshop{z-index:30}.tutorial-mode #tutorialCoach:has(~dialog[open]){pointer-events:none}
#tutorialComplete{background:#103b42;color:#fff0cf;border:1px solid #8be5c5;border-radius:16px;padding:24px;width:min(520px,94vw);max-height:85dvh;overflow:auto;touch-action:pan-y}#tutorialComplete::backdrop{background:#071c26da}#tutorialComplete button{min-height:48px;padding:12px;border-radius:8px;border:0;margin:6px;background:#edca7a;color:#123d46}#tutorialComplete p{line-height:1.5;font-size:14px}
@media(max-width:900px),(pointer:coarse){#tutorialCoach{top:calc(env(safe-area-inset-top) + 10px);width:310px;padding:9px 12px}#tutorialCoach strong{font-size:14px}.tutorial-mode #captureStatus{top:165px}.tutorial-mode header .connection{display:none}.tutorial-mode #tutorialCoach:has(~dialog[open]){visibility:hidden}}
@media(max-width:600px){#tutorialCoach{top:calc(env(safe-area-inset-top) + 112px);width:calc(100vw - 24px)}.tutorial-mode #captureStatus{top:300px}}
@media(max-height:450px) and (min-width:601px){#tutorialCoach{width:calc(100vw - 370px);min-width:260px;font-size:11px}.tutorial-mode #captureStatus{top:160px;font-size:10px}}
#tutorialQuit{min-height:44px}
@media(orientation:landscape) and (max-height:500px){.tutorial-mode .captain{width:135px;padding:8px}.tutorial-mode #cargo,.tutorial-mode .captain .shiptype{font-size:10px}.tutorial-mode #tutorialCoach{top:calc(env(safe-area-inset-top) + 8px);width:clamp(260px,calc(100vw - 370px),310px);font-size:11px;padding:8px 10px}.tutorial-mode #captureStatus{top:168px;width:260px;grid-template-columns:44px 1fr}}
@media(min-width:901px) and (min-height:651px) and (pointer:fine){.roster{max-height:240px;overflow-y:auto}.minimap{top:370px}}

@media(orientation:landscape) and (max-height:500px){.tutorial-mode .captain{min-width:0}}
@media(orientation:landscape) and (max-width:600px){.tutorial-mode .captain{width:115px}.tutorial-mode #tutorialCoach{width:286px}}
.tutorial-mode #workshop details{display:none}
.soundControls{border-top:1px solid #ffffff25;margin-top:10px;padding:8px 0}.soundControls label{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#edca7a}.soundControls input[type=range]{width:100%;min-height:44px;padding:0;border:0;accent-color:#edca7a;touch-action:pan-x;background:transparent}.soundControls small{display:block;color:#b5d4cc;font-size:10px}.roster .soundControls button{min-height:44px;border:0;padding:8px 0}

/* Illustrated upgrades and a collapsible mobile chart. */
.workshopChoices{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.workshopChoices button{display:flex;flex-direction:column;align-items:stretch;gap:7px;text-align:center;touch-action:manipulation}
.workshopChoices img{display:block;width:100%;height:auto;max-height:110px;object-fit:contain}
.workshopChoices strong{font-size:15px;color:#ffe3a2}.upgradeDescription{font-size:12px;line-height:1.45}.upgradeCost{font-size:11px;line-height:1.5;margin-top:auto;color:#fae7ba}
#workshop.exposed .workshopChoices{grid-template-columns:1fr}#workshop.exposed .workshopChoices button{display:grid;grid-template-columns:56px 1fr;text-align:left;gap:3px 8px}#workshop.exposed .workshopChoices img{grid-row:1/4;width:56px;height:56px}#workshop.exposed .upgradeCost{margin:0}
#toggleMap{pointer-events:auto;min-height:44px;padding:6px 10px;background:#103b42f2;border:1px solid #edca7a88;color:#ffe3a2;border-radius:8px;font-size:11px;touch-action:manipulation;width:100%}
#mapContent>span{display:block}#mapContent canvas{display:block;margin:auto}
@media(max-width:900px),(pointer:coarse){
 .minimap{display:block;position:fixed;top:calc(env(safe-area-inset-top) + 10px);left:calc(env(safe-area-inset-left) + 10px);right:auto;bottom:auto;width:104px;z-index:19}
 .minimap canvas{width:94px;height:94px}.minimap span{font-size:8px}#mapContent{background:#103b42b8;border-radius:8px;padding:4px}
 .captain{left:calc(env(safe-area-inset-left) + 124px);width:190px;min-width:0}
 #tutorialCoach{top:calc(env(safe-area-inset-top) + 112px)}
}
@media(max-width:600px){
 .captain{top:calc(env(safe-area-inset-top) + 70px);width:calc(100vw - 136px - env(safe-area-inset-left) - env(safe-area-inset-right))}
 body:has(#hud:not([hidden])) header{top:calc(env(safe-area-inset-top) + 16px);left:calc(env(safe-area-inset-left) + 124px);right:auto;transform:none}
 .connection{gap:3px;padding:6px;font-size:9px}
 #tutorialCoach{top:calc(env(safe-area-inset-top) + 174px)}.tutorial-mode #captureStatus{top:350px}#captureStatus{top:180px}
}
@media(orientation:landscape) and (max-height:500px){
 .captain,.tutorial-mode .captain{left:calc(env(safe-area-inset-left) + 124px);width:135px;min-width:0}
 .tutorial-mode #tutorialCoach{top:calc(env(safe-area-inset-top) + 8px);left:274px;transform:none;width:calc(100vw - 410px);min-width:0;font-size:10px}
 .tutorial-mode #tutorialCoach strong{font-size:12px}.tutorial-mode #tutorialCoach p{font-size:10px}
 .minimap canvas{width:68px;height:68px}
}

@media(max-width:600px){#tutorialCoach{top:calc(env(safe-area-inset-top) + 196px)}.tutorial-mode #captureStatus{top:375px}}
@media(orientation:landscape) and (max-height:500px){.tutorial-mode #tutorialCoach{top:calc(env(safe-area-inset-top) + 8px)}}
.workshopChoices button:disabled{opacity:.72}

#toggleTutorialInstructions{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 155px);left:12px;z-index:24;max-width:145px;min-height:44px;background:#103b42ed;color:#ffe3a2;border:1px solid #edca7a;border-radius:10px;padding:8px;touch-action:manipulation}