.ocean-main{max-width:1120px;margin:auto;padding:18px 18px 28px;color:#163845}.ocean-main nav{font-size:14px}.ocean-main h1{font-size:28px;margin:16px 0 6px}.intro{margin:0 0 14px}.ocean-main a{color:#17688a}#stage{position:relative;background:#9bcde0;border-radius:12px;overflow:hidden;height:min(62vh,620px);min-height:380px}#ocean{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#ocean:active{cursor:grabbing}.top-controls{position:absolute;right:12px;top:12px;display:flex;gap:6px}.ocean-main button,.ocean-main select{font:inherit;border:1px solid #aac3cd;border-radius:7px;background:#fff;color:#163845;padding:8px 11px;cursor:pointer}.ocean-main button:focus-visible,.ocean-main select:focus-visible{outline:3px solid #e9bb48}#position{position:absolute;left:12px;top:16px;font-size:12px;color:#fff;text-shadow:0 1px 3px #143d52;pointer-events:none}#move-pad{position:absolute;bottom:20px;left:20px;width:106px;height:106px;border:1px solid #ffffff8a;background:#ffffff20;border-radius:50%;touch-action:none;user-select:none;display:grid;place-items:center;color:white;font-size:12px}#move-pad i{position:absolute;width:42px;height:42px;border-radius:50%;background:#ffffff66;border:1px solid #ffffffaa;pointer-events:none}#move-pad span{transform:translateY(37px);pointer-events:none}.look-hint{position:absolute;right:18px;bottom:24px;color:#fff;font-size:12px;text-shadow:0 1px 3px #143d52;pointer-events:none}.options{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0;font-size:13px}.instructions,#performance{border-top:1px solid #d3e0e5;padding:12px 0;font-size:14px}.instructions summary,#performance summary{cursor:pointer}#stats{white-space:pre-wrap;font-size:12px}#error{position:absolute;inset:0;background:#eff6f8;padding:55px 25px;line-height:1.8}#stage:fullscreen{height:100vh;border-radius:0}body{background:#f4f8fa}@media(max-width:600px){.ocean-main{padding:12px}.ocean-main h1{font-size:24px}.intro{font-size:14px}#stage{height:62vh;min-height:360px}.top-controls{top:10px;right:8px;gap:4px}.ocean-main button{font-size:12px;padding:7px}#position{top:49px;left:10px;font-size:11px}#move-pad{width:94px;height:94px;left:14px;bottom:18px}.look-hint{right:12px}.options span{font-size:12px}}

.ocean-main .top-controls button{min-height:44px;min-width:44px}

body{margin:0;font-family:Arial,'Noto Sans JP','Yu Gothic',Meiryo,sans-serif}

.fire-controls{position:absolute;right:12px;bottom:14px;text-align:right;color:white;font-size:12px;text-shadow:0 1px 3px #143d52}.fire-controls>div{display:flex;gap:6px;margin-top:6px}.ocean-main .fire-controls button{min-width:80px;min-height:44px;background:#fff;color:#163845}.ocean-main .fire-controls button:disabled{opacity:.65;cursor:default}.look-hint{bottom:91px}@media(max-width:600px){.fire-controls{right:10px;bottom:14px}.ocean-main .fire-controls button{min-width:76px;padding:8px}.look-hint{bottom:92px}}

#ship-health{position:absolute;left:12px;top:48px;width:170px;background:#ffffffd9;border:1px solid #ffffffc0;border-radius:8px;padding:8px 10px;color:#163845;font-size:12px;pointer-events:none}#ship-health>div+div{margin-top:7px}#ship-health progress{display:block;width:100%;height:6px;margin-top:3px;accent-color:#267550}@media(max-width:600px){#ship-health{left:10px;top:76px;width:157px;padding:7px 8px;font-size:11px}}

#view-panel{position:absolute;right:12px;top:64px;color:#163845;font-size:12px;z-index:2}#view-panel summary{box-sizing:border-box;min-width:64px;min-height:44px;display:grid;place-items:center;cursor:pointer;background:#ffffffed;border:1px solid #aac3cd;border-radius:7px;list-style:none}#view-panel[open]{width:210px;background:#ffffffed;border:1px solid #aac3cd;border-radius:8px}#view-panel[open] summary{border:0;border-bottom:1px solid #d3e0e5}#view-panel>div{padding:8px 10px}#view-mode{min-height:44px;width:100%}#external-view label{display:flex;justify-content:space-between;margin-top:8px}#external-view input{width:100%;height:44px;margin:0;cursor:pointer}#external-view[hidden]{display:none}@media(max-width:600px){#view-panel{top:60px;right:8px}#view-panel[open]{top:156px;width:204px;max-height:calc(100% - 288px);overflow:auto}}

@media(max-width:600px){.top-controls{max-width:calc(100% - 16px)}.ocean-main .top-controls button{white-space:nowrap}}

#aim-panel{position:absolute;right:84px;top:64px;color:#163845;font-size:12px;z-index:3}#aim-panel summary{box-sizing:border-box;min-width:64px;min-height:44px;display:grid;place-items:center;cursor:pointer;background:#ffffffed;border:1px solid #aac3cd;border-radius:7px;list-style:none}#aim-panel[open]{right:12px;top:112px;width:210px;max-height:calc(100% - 244px);overflow:auto;background:#ffffffed;border:1px solid #aac3cd;border-radius:8px}#aim-panel[open] summary{border:0;border-bottom:1px solid #d3e0e5}#aim-panel>div{padding:8px 10px}#aim-panel label{display:flex;justify-content:space-between;margin-top:8px}#aim-side{width:100%;min-height:44px;margin-top:4px}#aim-panel input{width:100%;height:44px;margin:0;cursor:pointer}.aim-directions{font-size:11px;text-align:center}#view-panel[open]{top:112px;max-height:calc(100% - 244px);overflow:auto}@media(max-width:600px){#aim-panel{top:60px;right:80px}#aim-panel[open],#view-panel[open]{top:156px;right:8px;width:204px;max-height:calc(100% - 288px)}}

#aim-panel[open] summary{position:sticky;top:0;z-index:1;background:#f5f9fa}

#aim-panel[open]{scroll-padding-top:44px}#aim-panel input{scroll-margin-top:22px;scroll-margin-bottom:8px}@media(max-width:600px){#aim-panel[open]{max-height:calc(100% - 276px)}}

#ship-panel{position:absolute;right:156px;top:64px;color:#163845;font-size:12px;z-index:4}#ship-panel summary{box-sizing:border-box;min-width:64px;min-height:44px;display:grid;place-items:center;cursor:pointer;background:#ffffffed;border:1px solid #aac3cd;border-radius:7px;list-style:none}#ship-panel[open]{right:12px;top:112px;width:230px;max-height:calc(100% - 244px);overflow:auto;scroll-padding-top:44px;background:#ffffffed;border:1px solid #aac3cd;border-radius:8px}#ship-panel[open] summary{position:sticky;top:0;z-index:1;border:0;border-bottom:1px solid #d3e0e5;background:#f5f9fa}#ship-panel>div{padding:8px 10px}#ship-panel label{display:block;margin-top:8px}#ship-panel select{width:100%;min-height:44px;scroll-margin-top:22px}#ship-performance{white-space:pre-line;font-size:11px;line-height:1.6;margin:8px 0 0}@media(max-width:600px){#ship-panel{top:108px;right:8px}#ship-panel[open]{top:156px;right:8px;width:204px;max-height:calc(100% - 276px)}}

#aim-panel select{width:100%;min-height:44px;scroll-margin-top:22px;scroll-margin-bottom:8px}

#prepare-cannons{display:block;margin:0 0 5px auto}.look-hint{bottom:142px}@media(max-width:600px){.look-hint{bottom:142px}}
/* Naval campaign screens reuse the game shell colors and spacing. */
body{background:#f2faf5}.ocean-main{color:#203f32}.ocean-main h1{font-size:24px}.ocean-main button,.ocean-main select{min-height:44px;box-sizing:border-box}.ocean-main button:disabled{opacity:.55;cursor:default}.fullscreen-control{position:absolute;right:10px;top:10px;z-index:12}#battle-controls[hidden],#campaign-overlay[hidden],#ship-panel[hidden]{display:none!important}.top-controls{left:10px;right:auto;top:10px}.top-controls button{font-size:12px}#position{top:auto;bottom:136px;left:12px}#battle-status{position:absolute;left:12px;top:61px;right:82px;color:white;font-size:12px;text-shadow:0 1px 3px #143d52;pointer-events:none}#ship-health{top:88px;width:160px;max-height:calc(100% - 245px);overflow:auto}#view-panel,#aim-panel{top:88px}#view-panel[open],#aim-panel[open]{top:136px;max-height:calc(100% - 280px)}#campaign-overlay{position:absolute;inset:0;z-index:10;background:#16384566;overflow:auto;overscroll-behavior:contain;padding:64px 16px 20px;box-sizing:border-box;touch-action:pan-y}.campaign-card{box-sizing:border-box;max-width:700px;margin:auto;padding:20px;background:#f8fcf9;border:1px solid #c9decf;border-radius:10px;box-shadow:0 3px 12px #17372730;color:#203f32;overflow-wrap:anywhere}.campaign-card h2{font-size:22px;margin:0 0 12px}.campaign-card h3{font-size:17px;margin:18px 0 8px}.campaign-card h4{font-size:15px;margin:0 0 6px}.campaign-card p{font-size:14px;line-height:1.6}.campaign-card label{display:block;margin:8px 0 5px}.campaign-card select{width:100%}.campaign-card button{margin:5px 6px 5px 0}.campaign-card button.primary{background:#267550;border-color:#267550;color:#fff;font-weight:bold;width:100%;margin:8px 0}.campaign-card fieldset{border:1px solid #c9decf;border-radius:7px;margin:14px 0;padding:8px 12px}.campaign-card fieldset label{min-height:44px;display:flex;align-items:center;gap:6px;margin:0}.future{color:#64716a}.setting-help{margin:5px 0 12px;color:#53685d}.reward{font-weight:bold}.departure{background:#e5f3e9;border:1px solid #bdd7c5;padding:4px 12px 10px;border-radius:8px}.shop-list,.mount-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.shop-list article,.mount-list article{border:1px solid #c9decf;padding:12px;border-radius:8px;min-width:0}.shop-list p{margin:5px 0}.shop-list button,.mount-list button{width:100%;margin:5px 0}.mount-list label{margin-top:0}.cannon-description{font-size:12px!important}#campaign-error{color:#a52e25;border:1px solid #dfb5ae;background:#fff3ee;padding:10px}#error{z-index:20}.howto-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.howto-cards article{background:#eaf5ed;border:1px solid #d0e2d5;border-radius:8px;padding:12px}.instructions h2{font-size:18px;margin:0 0 12px}.instructions h3{font-size:15px;margin:0 0 8px}.instructions p{line-height:1.7}.instructions details{margin-top:14px}.instructions summary{min-height:44px;display:flex;align-items:center}#stage:fullscreen #campaign-overlay{padding-top:64px;padding-bottom:max(20px,env(safe-area-inset-bottom))}@media(max-width:600px){.ocean-main h1{font-size:22px}#stage{height:72vh;min-height:460px}.campaign-card{padding:14px}#campaign-overlay{padding:64px 10px 16px}.shop-list,.mount-list,.howto-cards{grid-template-columns:1fr}.campaign-card h2{font-size:20px}.top-controls{gap:4px}.top-controls button{padding:7px;font-size:11px}#battle-status{left:10px;top:61px;right:10px;font-size:11px}#ship-health{left:10px;top:86px;width:142px}#view-panel,#aim-panel{top:86px}#view-panel[open],#aim-panel[open]{top:136px;max-height:calc(100% - 280px)}.look-hint{display:none}#position{font-size:10px;bottom:124px}#move-pad{left:10px;bottom:16px;width:88px;height:88px}.fire-controls{right:8px}.ocean-main .fire-controls button{min-width:72px;padding:8px}.campaign-card button{font-size:14px}.campaign-card select{font-size:14px}}

#campaign-overlay.menu-screen{padding-top:60px}.menu-screen .campaign-card{max-width:620px;padding:14px 18px}.menu-screen h2{margin-bottom:6px;font-size:20px}.menu-screen p{margin:6px 0;font-size:13px}.menu-screen fieldset{margin:10px 0;padding:4px 10px;display:flex;flex-wrap:wrap;gap:4px 16px}.menu-screen fieldset label{display:inline-flex;margin:0}.menu-screen .menu-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px}.menu-screen .menu-settings label{margin:0 0 4px}.menu-screen .setting-help{font-size:12px;margin:5px 0}.menu-screen button.primary{margin:8px 0 0}@media(max-width:600px){#campaign-overlay.menu-screen{padding-top:60px}.menu-screen .campaign-card{padding:12px}.menu-screen fieldset{gap:0 10px}.menu-screen fieldset label{font-size:12px}.menu-screen .menu-settings{gap:10px}}

#stage.menu-background{background-color:#9bcde0;background-image:url("assets/menu-sea.webp");background-size:cover;background-position:center}#stage.menu-background #ocean{visibility:hidden}

.fire-controls .broadside-controls{align-items:flex-end;gap:6px}.broadside{width:128px;min-width:0}.reload-panel{box-sizing:border-box;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;height:44px;margin-bottom:5px;padding:4px;background:#123c4ade;border-radius:5px;text-align:center;text-shadow:none}.reload-panel:empty{display:none}.mount-reload{display:grid;grid-template-rows:12px 22px;justify-items:center;gap:2px;font-size:11px;line-height:12px;min-width:0}.reload-bar{position:relative;display:block;width:10px;height:22px;background:#577481;border-radius:2px;overflow:hidden}.reload-fill{position:absolute;inset:0;display:block;background:#eabf58;transform:scaleY(0);transform-origin:center bottom}.mount-reload.ready{color:#b7f5c4}.mount-reload.ready .reload-fill{background:#69dc8d}.broadside>button{width:100%;min-height:44px}.fire-controls #cannon-status{display:block;margin-top:4px}#position{bottom:184px;right:12px}.look-hint{bottom:184px}#ship-health{max-height:max(72px,calc(100% - 325px))}#view-panel[open],#aim-panel[open]{max-height:calc(100% - 325px)}
@media(max-width:600px){.fire-controls{width:calc(100% - 110px);max-width:262px}.broadside{flex:1;width:auto}.ocean-main .broadside>button{min-width:0;font-size:11px;padding:8px 2px;min-height:44px}.fire-controls #cannon-status{font-size:11px}#position{bottom:184px;right:10px;font-size:11px}}
#stage:fullscreen{min-height:0}
@media(min-width:700px) and (max-height:520px){
 #stage:fullscreen .fire-controls{width:262px;right:12px;bottom:14px}
 #stage:fullscreen .broadside{width:auto;flex:1}
 #stage:fullscreen #ship-health{top:88px;max-height:110px;width:160px}
 #stage:fullscreen #view-panel[open],#stage:fullscreen #aim-panel[open]{left:210px;right:auto;top:88px;width:210px;max-height:calc(100% - 100px);overflow:auto}
 #stage:fullscreen #position{left:12px;right:auto;top:auto;bottom:136px;width:186px;font-size:11px}
 #stage:fullscreen .look-hint{display:none}
}
@media(max-width:360px){#ship-health{width:min(142px,calc(100% - 180px))}}

#stage .right-controls{position:absolute;right:10px;top:10px;z-index:12;display:flex;gap:6px}#stage .right-controls button{position:static;flex:none;white-space:nowrap;font-size:12px;padding:8px}@media(max-width:380px){#stage .top-controls{gap:3px;left:6px}#stage .top-controls button{padding:4px;font-size:11px}#stage .right-controls{right:6px}#stage .right-controls button{padding:6px;font-size:11px}}