/* Caribbean expedition: dark sea glass, engraved brass and ivory type. */
:root { --hull:#0d1e23; --hull-2:#142b30; --brass:#d7b77b; --brass-hi:#f4dfad; --brass-lo:#9f8557; --parchment:#efe8d7; }
#boot { background:#122e35 url('/public/assets/art/harbour.jpg') center/cover no-repeat; }
#boot video { display:none; }
#boot::before { background:linear-gradient(90deg,rgba(5,19,25,.78),rgba(5,19,25,.32) 55%,rgba(5,19,25,.1)),linear-gradient(0deg,rgba(5,19,25,.65),transparent 45%); }
#boot > div { padding:28px 38px; max-width:640px; border:1px solid rgba(215,183,123,.35); background:linear-gradient(145deg,rgba(9,28,33,.9),rgba(9,28,33,.72)); box-shadow:0 22px 100px #00151a55,inset 0 0 0 5px #d7b77b0a; border-radius:4px; backdrop-filter:blur(12px); }
#boot h1 { font-family:Georgia,'Times New Roman',serif; font-weight:400; color:var(--brass-hi); letter-spacing:.13em; text-shadow:0 3px 18px #0008; }
#boot .mark { width:88px; height:88px; margin-bottom:12px; }
#boot .sub { color:#d7c29c; letter-spacing:.27em; margin-bottom:20px; }
#boot .motto,#bootStatus { color:#bfc9c5; }
#bootCaptain { border-radius:50%; width:68px; height:68px; border:2px solid var(--brass); box-shadow:0 0 0 5px #d7b77b13; }
input { background:#081a20bd; border-color:#9f855755; border-radius:4px; }
input:focus-visible,button:focus-visible { outline:2px solid #f4dfad; outline-offset:3px; }
button { border-color:#bda06a; border-radius:4px; background:linear-gradient(180deg,#e2c68a0d,#e2c68a03); }
#setSail { background:linear-gradient(135deg,#f0d7a0,#b89250); color:#14272b; border-color:#f4dfad; font-weight:700; box-shadow:0 4px 20px #0003; }
.panel { background:linear-gradient(145deg,#0c242bdc,#0a1b22e6); border-color:#c6a46b55; border-radius:5px; box-shadow:0 8px 28px #0004,inset 0 1px #f6e4b114; backdrop-filter:blur(12px); }
.lbl { color:#bdc8c5; letter-spacing:.12em; }
.bar { background:#06161b; height:6px; border-radius:10px; box-shadow:inset 0 1px 3px #0008; }
.bar > i { border-radius:10px; box-shadow:inset 0 1px #ffffff55; }
#compass { border-radius:40px; background:linear-gradient(180deg,#102b32eb,#081a22d9); }
#helm { background-image:linear-gradient(145deg,#0b252bed,#081c23eb),url('/public/assets/env/blackbrine-wheel.jpg'); }
#keys button { border-color:#c6a46b4d; background:linear-gradient(180deg,#142e35eb,#091c24e8); box-shadow:0 5px 20px #0004; }
#prompt { background:#0b242be8; border-color:#d7b77b88; box-shadow:0 8px 28px #0005; color:#f4dfad; }
#overlay { background:radial-gradient(ellipse at center,#17383adb,#041018f2); backdrop-filter:blur(8px); }
.forge-sheet { background:#10292f; border-color:#b99b6355; box-shadow:0 24px 90px #0006; }
.forge-stage { background:radial-gradient(ellipse at 50% 35%,#3e5550,#102930 65%,#091c23); }
#forge { background:radial-gradient(ellipse at center,#244442,#07191f); }
#forge h2,.ttl { font-family:Georgia,'Times New Roman',serif; color:#f4dfad; }
#forge header p { color:#b2c0b8; }
@media(max-width:600px) { #boot > div { padding:20px 16px; width:100%; } #boot .mark { width:64px;height:64px; } #boot h1 { font-size:30px; } #boot .sub { font-size:10px;letter-spacing:.18em; } }
@media(prefers-reduced-motion:reduce) { button,.bar > i { transition:none; } }

#boot .mark { mix-blend-mode:screen; }
@media(min-width:1000px) { #boot > div { justify-self:center; margin-left:0; } }

/* Opening and compact landscape instruments. */
#boot { background-color:#426c79; background-image:linear-gradient(135deg,#567e8d66,#163b4555),url('/public/assets/art/harbour.jpg'); overflow:auto; }
#boot::before { background:linear-gradient(180deg,#102c3322,#102c3355); }
#boot > div { justify-self:center; margin:0; width:min(640px,100%); box-sizing:border-box; }
#rotateDevice { display:none; }
/* Native disclosure dismissal works even before the game loads or if scripts fail. */
#rotateDevice:not([open]) { display:none; }
#rotateDevice summary { order:1; display:block; list-style:none; cursor:pointer; padding:12px 24px; border:1px solid #d7b77b; border-radius:5px; background:#e2c68a; color:#14272b; font-weight:700; }
#rotateDevice summary::-webkit-details-marker { display:none; }
#rotateDevice summary:focus-visible { outline:3px solid #fff; outline-offset:4px; }
@media (pointer:coarse) and (orientation:portrait) {
 #rotateDevice { display:flex; position:fixed; inset:0; z-index:2000; background:#153742; color:#f4dfad; align-items:center; justify-content:center; flex-direction:column; gap:16px; padding:32px; text-align:center; box-sizing:border-box; }
 #rotateDevice .rotate-icon { font-size:70px; line-height:1; }
 #rotateDevice h2 { margin:0; font:28px Georgia,serif; }
 #rotateDevice p { max-width:270px; margin:0; color:#d1dfdf; line-height:1.6; }
}
@media (pointer:coarse) and (orientation:landscape) {
 #boot { padding:12px; }
 #boot > div { padding:16px 24px; max-width:600px; }
 #boot .mark,#bootCaptain,#boot .motto { display:none; }
 #boot h1 { font-size:28px; }
 #boot .sub { margin-bottom:12px; }
 #walletRow { margin-top:10px; }
 body.touch #vitals { left:calc(8px + env(safe-area-inset-left)); top:calc(8px + env(safe-area-inset-top)); right:auto; bottom:auto; width:160px; min-width:0; padding:7px 9px; box-sizing:border-box; }
 body.touch #vitals .lbl { font-size:9px; letter-spacing:.05em; }
 body.touch #vitals .bar { height:5px; margin:3px 0 5px; }
 body.touch #purse { font-size:11px; margin-top:3px; }
 body.touch #landfallLine { position:fixed; left:184px; top:48px; width:calc(100vw - 378px); max-width:380px; font-size:10px; line-height:1.3; margin:0; padding:5px 7px; border:0; border-radius:4px; background:#10292fcc; box-sizing:border-box; }
 body.touch #compass { top:8px; gap:7px; font-size:10px; padding:7px 10px; }
 body.touch #log { top:116px; left:184px; width:calc(100vw - 378px); max-width:300px; max-height:52px; font-size:10px; }
 body.touch #objective { top:58px; right:8px; width:164px; max-height:96px; overflow:auto; font-size:10px; }
 body.touch #helm { top:58px; right:8px; bottom:auto; width:164px; max-height:110px; overflow:auto; padding:7px; font-size:10px; }
 body.touch:has(#helm:not(.hidden)) #objective { display:none; }
 body.touch #helmStill { display:none; }
 body.touch #prompt { top:36%; max-width:45vw; font-size:12px; }
 body.touch #keys { bottom:8px; max-width:calc(100vw - 340px); gap:3px; }
 body.touch #keys button { padding:5px; }
 body.touch #keys .k-lbl { display:none; }
 body.touch #placeStill,body.touch #tideH { display:none; }
}

#pirateAccount { margin:12px auto; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; font-size:12px; color:#d1dfdf; }
#deletePirate { font-size:10px; padding:6px 8px; border-color:#b47a65; color:#e6b8a7; }
#playerName[readonly] { color:#f4dfad; border-color:#d7b77b66; }

/* Compact treasury entry points; details remain in the treasury dialog. */
#goldHome{margin:10px auto 0;padding:0;border:0;background:none;max-width:none}
#goldHome>div,#goldHome>p,#goldHome>small{display:none}
#goldHomeOpen{padding:9px 14px;font-size:12px;letter-spacing:.04em}
#goldHudOpen{padding:8px 12px;min-height:40px;max-width:110px;text-align:center}
#goldHudOpen #goldHudBalance,#goldHudOpen #goldHudPhase{display:none}
#goldHudOpen .goldCompactLabel{display:inline;margin:0;font-size:12px;font-weight:700}

/* Moonlit opening, composed around the original Solana Seas banner. */
#boot { background:#080f13; padding:0; overflow:auto; isolation:isolate; }
#boot::before { z-index:0; background:linear-gradient(0deg,#060d12 4%,#060d1288 37%,transparent 72%),url('/public/assets/art/title-harbor.png') center/cover; filter:blur(18px); opacity:.62; transform:scale(1.08); }
#boot > #titleScene { position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;backdrop-filter:none;pointer-events:none;overflow:hidden; }
.titleArtwork { position:absolute;top:7vh;left:-.6%;width:101.2%;aspect-ratio:3/1;animation:titleVoyage 24s ease-in-out infinite alternate;transform-origin:72% 70%; }
.titleArtwork > img { position:absolute;inset:0;width:100%;height:100%;object-fit:contain; }
.titleArtwork > video { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; }
.titleLantern { position:absolute;width:22px;height:22px;border-radius:50%;background:#ffba4960;filter:blur(9px);mix-blend-mode:screen;animation:titleFlame 4.7s ease-in-out infinite alternate; }
.titleMist { position:absolute;inset:48% -20% 0;background:radial-gradient(ellipse at 30% 70%,#98bdc312,transparent 55%),radial-gradient(ellipse at 80% 25%,#b2c6cc0c,transparent 48%);filter:blur(25px);animation:titleMist 32s ease-in-out infinite alternate; }
#boot > #titleControls { position:relative;align-self:end;justify-self:start;z-index:2;text-align:left;width:min(650px,89vw);max-width:650px;margin:0 0 25px 5.6vw;padding:20px 0 0;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;background:linear-gradient(90deg,#080f13a8,transparent); }
#titleControls .mark,#titleControls .sub,#titleControls .motto,#titleControls #bootCaptain { display:none; }
#titleControls h1 { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
#titleControls #nameRow,#titleControls #walletRow,#titleControls #pirateAccount { justify-content:flex-start; }
#titleControls #playerName { background:#081217d9;color:#eee5d3;border-color:#ae8a5266; }
#titleControls #setSail { background:linear-gradient(145deg,#e2b875,#ac793a);color:#111b20;border-color:#e6c18c;box-shadow:0 0 24px #c9923e18; }
#titleControls button,#titleControls #nftPage { min-height:42px; }
#titleControls #bootStatus { color:#cfcbc2;margin-top:12px; }
#titleControls #goldHome { text-align:left; }
#boot.hidden * { animation-play-state:paused; }
@keyframes titleVoyage { from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3px,3px,0) scale(1.008)} }
@keyframes titleFlame { 0%,100%{opacity:.4;transform:scale(.85)}30%{opacity:.75}70%{opacity:.52;transform:scale(1.12)} }
@keyframes titleMist { from{transform:translateX(-3%);opacity:.4}to{transform:translateX(4%);opacity:.9} }
@media(max-width:700px) {
 .titleArtwork { top:9vh;left:0;width:155%; }
 #boot > #titleControls { margin:0 5vw 22px;width:90vw;padding-top:20px;background:linear-gradient(0deg,#080f13ee,#080f1380); }
 #titleControls #nameRow { flex-wrap:wrap; }
 #titleControls #playerName { width:100%;max-width:none;box-sizing:border-box; }
 #titleControls #walletRow { flex-wrap:wrap;gap:8px; }
}
@media(max-height:620px) and (min-width:701px) { .titleArtwork{top:0} #boot > #titleControls { margin-bottom:10px;padding:10px 0; } }
@media(prefers-reduced-motion:reduce) { .titleArtwork,.titleLantern,.titleMist { animation:none; } .titleArtwork > video { display:none; } }

/* Centered title: crop away the banner's printed lettering and use live type. */
.titleArtwork { inset:0;top:0;left:0;width:100%;height:100%;aspect-ratio:auto; }
.titleArtwork > img { width:200%;height:100%;object-fit:cover;object-position:right center;transform:translateX(-50%); }
#boot::before { filter:none;transform:none;opacity:1;background:linear-gradient(180deg,#050c1366,#050c1333 35%,#050c13e8 100%);z-index:1; }
#boot > #titleControls { align-self:center;justify-self:center;margin:0;width:min(650px,90vw);padding:30px 20px;text-align:center;background:radial-gradient(ellipse,#0610189c,transparent 75%); }
#titleControls h1 { position:static;width:auto;height:auto;overflow:visible;clip-path:none;font-size:clamp(34px,5.3vw,76px);letter-spacing:.13em;line-height:1.12;margin:0 0 18px;color:#e8bd7e;text-shadow:0 3px 30px #000,0 1px 1px #000; }
#titleControls .sub { display:block;font-size:12px;letter-spacing:.25em;color:#e1d8c7;margin-bottom:42px; }
#titleControls #nameRow,#titleControls #walletRow,#titleControls #pirateAccount { justify-content:center; }
#titleControls #goldHome { text-align:center; }
@media(max-width:700px) { #boot > #titleControls { margin:0;width:94vw;padding:24px 12px; } #titleControls h1{font-size:34px;letter-spacing:.10em} #titleControls .sub{font-size:10px;letter-spacing:.16em;margin-bottom:32px} .titleArtwork{inset:0;width:100%;height:100%} }
@media(max-height:620px) and (min-width:701px) { #boot > #titleControls { margin:0;padding:16px; } #titleControls .sub { margin-bottom:18px; } }
#titleControls h1 { font-size:clamp(32px,4.6vw,68px);letter-spacing:.10em; }
@media(max-width:400px) { #titleControls h1 { font-size:32px;letter-spacing:.08em; } }