/* A: chart/sailcloth; B: compass, teal and brass; C: red sail and printed ink. */
:root{--sail-red:#963d35;--sail-bright:#b95643;--paper-ink:#302e27;--paper-dim:#625740;--paper-surface:repeating-linear-gradient(4deg,#8c692014 0 1px,transparent 1px 6px),radial-gradient(ellipse at 35% 15%,#fff0ce,#e2c898);--cloth-surface:repeating-linear-gradient(90deg,#fff1 0 1px,transparent 1px 4px),linear-gradient(130deg,#aa473c,#7e302d)}
.screen:not(.menu),.creator .cpanel,.chart-sheet,.town-dialog,.pausecard,.resultcard{--ink:var(--paper-ink);--dim:var(--paper-dim);color:var(--ink);background-image:var(--paper-surface);background-color:#e6d0a3;border:2px solid #b69257;box-shadow:inset 0 0 0 4px #e9d4a6,inset 0 0 0 5px #785b37,inset 0 0 0 8px #e2c68c,0 16px 40px #00141b88;border-radius:18px 6px 18px 6px}
.screen:not(.menu) h2,.screen:not(.menu) h3,.creator-heading h2,.chart-sheet h2,.town-dialog h3,.pausecard h3{color:var(--ink);text-shadow:none;font-family:Georgia,serif}.screen:not(.menu) :is(p,small,.clabel,.eyebrow,.auto-note,.shipname,.sheet-subtitle),.creator .setup-identity .field,.creator .setup-note,.chart-key,.chart-note{color:var(--dim)}
.screen :is(.panel,.sailor,.job,.upg,.upgrade-card,.trait-card,.vcard,.selected-court,.crew-profile,.relic-card),.creator .wardrobe-card,.first-stop,.chart-destination,.chart-pick{--ink:#f7e7c2;--dim:#c8d0bb;color:var(--ink);background:repeating-linear-gradient(3deg,#00181b24 0 1px,transparent 1px 7px),linear-gradient(130deg,#34565a,#18343e);border:1px solid #ac8d59;border-radius:10px;box-shadow:inset 0 0 0 3px #0a263330,inset 0 0 0 4px #ddbc6c20,0 3px 0 #3d372320}
.screen :is(.panel,.sailor,.job,.upg,.upgrade-card,.trait-card,.vcard,.selected-court,.crew-profile,.relic-card) :is(h3,b),.wardrobe-card .clabel{color:var(--ink)}.screen :is(.panel,.sailor,.job,.upg,.upgrade-card,.trait-card,.vcard,.selected-court,.crew-profile,.relic-card) :is(small,p){color:var(--dim)}
.screen .sheet-heading,.creator-tabs,.chart-sheet>header{border-bottom:1px solid #8b683a70}.screen .eyebrow,.chart-key{color:#6d5737}.screen .action-dock,.screen .portfoot{background:linear-gradient(0deg,#ead3a5,#ead3a500);border-color:#9c794a70}.screen summary{color:var(--ink)}
.wbtn.go,.cbtn.go,.menubtn.primary,#stage .chart-sheet .chart-route footer [data-chart-follow],.town-dialog .go{color:#fff1d0;background:var(--cloth-surface);border:1px solid #ca8c62;text-shadow:0 1px #4c2723;box-shadow:inset 0 0 0 3px #61272160,inset 0 0 0 4px #e4ac6a50,0 3px 0 #4c332866;border-radius:8px 18px 8px 18px}.wbtn.go:hover,.cbtn.go:hover,.menubtn.primary:hover{background:linear-gradient(130deg,#bb5845,#913a32)}.menubtn.primary:after{color:#f0d199}
.creator-tabs .wbtn.on,.tab.on,.sbtn.on,.sizebtn.on,.flag.on{color:#fff0cc;background:var(--cloth-surface);border-color:#d3a56b}.creator-tabs .wbtn{border-radius:7px 12px 7px 12px}.creator-heading .roll{background:radial-gradient(circle,#385a5b,#14323b);border-color:#aa824d}.creator .wardrobe-card{border-radius:9px 9px 15px 9px}.creator .cname{background:#122e37dc;border-color:#bc955a}
.screen .sheet-heading>.ico,.porthead>.ico,.quarters-heading>.ico{color:#8b3931}.town-dialog{border-radius:16px 5px 16px 5px}.town-dialog h3{color:#263d40}.town-dialog p{color:#433c2d}.town-dialog [data-conversation=close]{color:#3c4e4c;border-color:#8e754f;background:#f1dfb780}.town-action{background:var(--paper-surface)!important;color:#2c3f41!important;border-color:#ac8953!important;box-shadow:inset 0 0 0 3px #f3dfb7,0 5px 18px #08242d88!important}.town-action small{color:#6b5639}.town-compass{box-shadow:0 3px 10px #04182188,inset 0 0 0 3px #735c39!important}
.pausecard .pausenote,.pausecard .pausehint{color:#67573e}.pausecard kbd{background:#dfc48f;color:#3b3c30}.chart-filters button.on{background:var(--cloth-surface);color:#fff0ce}.chart-pick[aria-pressed=true]{border-left:5px solid #b45b43;background:linear-gradient(120deg,#3a6261,#23454b)}.chart-pick small{color:#c8d0bb}.chart-sheet .chart-key,.chart-sheet .chart-note{color:#60533d}.chart-map{border:3px solid #967547;box-shadow:0 2px 10px #46331c40}.chart-map-tools button{border-color:#c5a36c}.chart-sheet .chart-route footer{border-top:1px solid #9c794a70}
.hud .scoreboard,.scoreboard,.replay-controls,.seabar,.sea-tools,.course-chip{background:repeating-linear-gradient(90deg,#ffffff08 0 1px,transparent 1px 5px),#15353eeb;border-color:#bc9a61;color:#f5dfb4;border-radius:8px 16px 8px 16px;box-shadow:inset 0 0 0 2px #081f2d55,0 3px 10px #051b2860}.scoreboard.serve-us{border-left:3px solid #f0d99e}.scoreboard.serve-them{border-right:3px solid #c66c56}.shottag>b,.tension.show{color:#f4dfb0}.servehint,.hudhelp{color:#f5dfb4;background:#102d34bd;border-radius:12px;padding:5px 10px}.toast,.sheetnote{color:#fff0cd;background:#183c45;border:1px solid #bba16c}.replay-controls button{border-color:#bf9b5b}.wprompt{background:var(--cloth-surface);color:#fff0d0}
/* Keep the actual rally bright; controls use the perimeter, not a screen wash. */
.menubtn.primary .ico{color:#f5dfb4}
.screen:not(.menu),.creator .cpanel,.chart-sheet,.town-dialog,.pausecard{background-image:url('./ink-corners.svg'),var(--paper-surface);background-size:170px 170px,auto,auto;background-position:right bottom,0 0,0 0;background-repeat:no-repeat,repeat,repeat}
.screen.menu{height:100dvh;min-height:100dvh;box-sizing:border-box}
.screen.menu{padding:26px 3vw;background:none;align-items:center}.screen.menu:before{background:linear-gradient(90deg,#06232b50,transparent 34%);opacity:1}.menuwrap{width:min(27vw,340px);gap:28px}.title-brand{width:100%;filter:drop-shadow(0 3px 3px #001c2780)}.title-logo{max-height:24vh}.title-navframe{padding:22px 12px 14px;background:linear-gradient(130deg,#20474cce,#102c35d9);border:1px solid #c0a06a;border-radius:5px 16px 5px 16px;box-shadow:inset 0 0 0 4px #09202b44,0 5px 18px #001c2744}.title-compass{width:36px;height:36px;top:-20px;left:calc(50% - 18px);padding:3px;border-width:1px}.title-navframe .menubtns{gap:8px}.title-navframe .menubtn{min-height:52px;padding:10px 12px}.title-navframe .mb-t{font-size:17px}.title-navframe .menubtn>.ico{width:22px;height:22px}
@media(max-width:700px) and (orientation:portrait){.screen.menu{padding:12px 16px max(18px,env(safe-area-inset-bottom));align-items:stretch}.screen.menu:before{background:linear-gradient(#041e2630,transparent 20% 82%,#041e2650)}.menuwrap{width:100%;gap:12px;justify-content:space-between}.title-brand{width:min(64vw,260px);margin:0 auto}.title-logo{max-height:18vh}.title-navframe{max-width:390px;padding:20px 10px 12px}.title-navframe .menubtns{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.title-navframe .menubtn{min-height:54px;gap:6px;padding:8px;grid-template-columns:22px minmax(0,1fr)}.title-navframe .menubtn:after{display:none}.title-navframe .mb-t{font-size:15px}.title-navframe .menubtn[data-act=continue]{grid-column:1/-1;justify-content:center}.screen:not(.menu){border-radius:14px 5px 14px 5px}.chart-sheet{border-width:1px}.creator .cpanel{border-width:1px}}
@media(max-height:550px) and (orientation:landscape){.screen.menu{padding:14px 20px}.menuwrap{width:min(29vw,290px);gap:20px}.title-logo{max-height:22vh}.title-navframe{padding:18px 10px 10px}.title-navframe .menubtn{min-height:44px;padding:6px 10px}.title-navframe .mb-t{font-size:15px}.title-navframe .menubtns{gap:6px}.title-compass{width:30px;height:30px;top:-17px;left:calc(50% - 15px)}}
@media(prefers-reduced-motion:reduce){.menubtn:hover{transform:none}}

/* Larger registered illustration, independent of the compact navigation width.
   Keep its 3:2 canvas intact: a height clamp alone letterboxes every art layer. */
.screen.menu .title-brand{width:min(34vw,440px,51svh);align-self:flex-start;flex-shrink:0}
.screen.menu .title-logo{width:100%;max-height:none}
/* Reuse the attract loop's eased, paused/reduced-motion-aware variables. No
   second animation clock and no movement of the lettering or menu hit targets. */
.screen.menu .logo-captain{transform:translate(calc(var(--logo-x)*-.8%),calc(var(--logo-y)*-.7% - var(--logo-float)*.65%)) rotate(calc(var(--logo-roll)*-.7deg + var(--logo-sway)*1deg))}
.screen.menu .logo-tentacle{transform:translate(calc(var(--logo-x)*-1%),calc(var(--logo-y)*-.8% + var(--logo-float)*.5%)) rotate(calc(var(--logo-x)*1.1deg - var(--logo-sway)*1.25deg))}
.screen.menu .logo-waves{transform:translate(calc(var(--logo-x)*.7% + var(--logo-sway)*.65%),calc(var(--logo-y)*.5% + var(--logo-float)*.25%)) rotate(calc(var(--logo-roll)*.35deg))}
.screen.menu .logo-ball{transform:translate(calc(var(--logo-x)*1.4%),calc(var(--logo-y)*1% - var(--logo-float)*1.25%)) rotate(calc(var(--logo-x)*2.4deg + var(--logo-sway)*1.1deg)) scale(calc(1 + var(--logo-zoom)*.024))}
@media(max-width:700px) and (orientation:portrait){.screen.menu .title-brand{width:min(88vw,380px,39svh);align-self:center}}
@media(max-height:550px) and (orientation:landscape){.screen.menu .title-brand{width:min(36vw,350px,42svh);align-self:center}}
@media(prefers-reduced-motion:reduce){.screen.menu .logo-part{transform:none}}
/* The saved voyage stays behind a real, interruptible confirmation. */
.voyage-confirm{box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:3px solid #a67c40;border-radius:12px;background:repeating-linear-gradient(3deg,#ead7ad 0 3px,#e8d4a7 4px 5px);color:#30271c;box-shadow:0 15px 60px #0009;font-family:inherit}
.voyage-confirm::backdrop{background:#071c22b8;backdrop-filter:blur(3px)}
.voyage-confirm h2{font-family:Georgia,serif;font-size:clamp(24px,5vw,32px);margin:8px 0 14px;color:#263f3c}
.voyage-confirm p{line-height:1.5}.voyage-confirm .eyebrow{color:#765c32;margin:0;letter-spacing:.12em;font-size:12px}
.confirm-actions{display:grid;gap:10px;margin-top:22px}.confirm-actions .wbtn{width:100%;min-height:48px;font:inherit;font-weight:700;border:2px solid #a67c40;border-radius:7px;background:#294c4b;color:#f4e4bc;padding:12px}
.confirm-actions .go{background:#843d30;color:#ffebc0}.confirm-actions button:focus-visible{outline:3px solid #244a63;outline-offset:3px}