/* Live HUD + overlay: oak, brass, ink. 1400–1800 trim, still readable. */
:root {
    --oo-ink: #1a140e;
    --oo-oak: #221a12;
    --oo-oak-2: #140f0a;
    --oo-brass: #c4a056;
    --oo-brass-dim: #8a6e2e;
    --oo-parchment: #e8dcc4;
    --oo-cream: #f3ead4;
    --oo-muted: #a89468;
    --oo-line: #5a4818;
    --oo-sea: #1a2c28;
    --oo-danger: #8a3028;
    --oo-font: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --oo-shadow: 0 14px 40px #000a;
}

.oo-sheet,
#pauseMenu .pause-card,
.ocean-bridge-panel,
.atlas-char-panel,
.oo-dev-sheet {
    font-family: var(--oo-font);
    color: var(--oo-parchment);
    background:
        linear-gradient(180deg, rgba(44, 34, 22, 0.97), rgba(16, 12, 8, 0.98));
    border: 1px solid var(--oo-brass-dim);
    box-shadow: inset 0 0 0 1px #3a2a10, var(--oo-shadow);
    border-radius: 2px;
}

#pauseMenu {
    background: rgba(10, 8, 6, 0.72);
}
#pauseMenu .pause-card {
    width: min(540px, 100%);
    margin: auto;
    padding: 22px 20px 24px;
    gap: 12px;
    border-radius: 2px;
    border: 1px solid var(--oo-brass);
    box-shadow: inset 0 0 0 1px #3a2a10, 0 18px 48px #000c;
}
#pauseMenu h1 {
    font-family: var(--oo-font);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 22px;
    color: var(--oo-brass);
    text-shadow: none;
}
#pauseMenu .pause-hint {
    color: var(--oo-muted);
    font: 13px/1.45 var(--oo-font);
}

#pauseMenu button,
.input-row button {
    font-family: var(--oo-font) !important;
    font-size: 14px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    border-radius: 2px !important;
    border: 1px solid var(--oo-brass-dim) !important;
    background: #2a2116 !important;
    color: var(--oo-cream) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    display: inline-block !important;
}
#pauseMenu .pause-actions button {
    min-width: 108px !important;
}
#pauseMenu button:hover,
.input-row button:hover {
    background: #3a2e1c !important;
    color: var(--oo-cream) !important;
    border-color: var(--oo-brass) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
#pauseMenu button:active,
.input-row button:active {
    background: #1a140e !important;
    color: var(--oo-brass) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

#pauseMenu .pause-more,
#pauseMenu .look-settings,
#pauseMenu .sound-settings,
#pauseMenu .controls-settings {
    border: 1px solid var(--oo-line);
    border-radius: 2px;
    background: rgba(16, 12, 8, 0.92);
    color: var(--oo-parchment);
    font-family: var(--oo-font);
}
#pauseMenu .pause-more > summary,
#pauseMenu .look-settings > summary,
#pauseMenu .sound-settings > summary,
#pauseMenu .controls-settings > summary {
    color: var(--oo-brass);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 13px;
}

#pauseMenu .look-picker button {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 8px 10px;
    font: 13px/1.3 var(--oo-font);
    text-align: left;
    color: var(--oo-parchment);
    background: var(--oo-oak-2);
    border: 1px solid var(--oo-line);
    border-radius: 2px;
    box-shadow: none;
    text-shadow: none;
}
#pauseMenu .look-picker button.on {
    border-color: var(--oo-brass);
    background: #2a2010;
    color: var(--oo-cream);
}
#pauseMenu .look-picker button:hover {
    box-shadow: none;
    text-shadow: none;
    color: var(--oo-cream);
    background: #2a2116;
}

.look-picker {
    font-family: var(--oo-font);
    color: var(--oo-parchment);
}
.look-picker button {
    border-color: var(--oo-line);
    background: var(--oo-oak-2);
    color: var(--oo-parchment);
    border-radius: 2px;
}
.look-picker button.on {
    border-color: var(--oo-brass);
    background: #2a2010;
    color: var(--oo-cream);
}
.look-settings {
    color: var(--oo-brass);
    font-family: var(--oo-font);
}
.look-crt, .look-lines {
    border-color: var(--oo-line);
    background: var(--oo-oak-2);
    color: var(--oo-parchment);
    font-family: var(--oo-font);
}
.look-lines input { accent-color: var(--oo-brass); }

.sound-settings {
    border: 1px solid var(--oo-line);
    border-radius: 2px;
    background: rgba(16, 12, 8, 0.94);
    color: var(--oo-parchment);
    font-family: var(--oo-font);
}
.sound-settings > summary { color: var(--oo-brass); }
.sound-settings input[type="range"],
.sound-settings input[type="checkbox"] { accent-color: var(--oo-brass); }
.sound-help, .sound-save-status { color: var(--oo-muted); }

.wind-hud {
    background: linear-gradient(180deg, rgba(34, 26, 18, 0.96), rgba(14, 10, 8, 0.96));
    border: 1px solid var(--oo-brass-dim);
    border-radius: 2px;
    color: var(--oo-parchment);
    font-family: var(--oo-font);
    box-shadow: inset 0 0 0 1px #3a2a10, 0 8px 22px #0008;
}
.wind-speed { color: var(--oo-cream); }
.wind-word, .wind-point { color: var(--oo-brass); }

.ocean-bridge {
    font-family: var(--oo-font);
    color: var(--oo-parchment);
    text-shadow: none;
}
.ocean-bridge button {
    border: 1px solid var(--oo-line);
    background: var(--oo-oak);
    color: var(--oo-parchment);
    border-radius: 2px;
}
.ocean-bridge button:hover { background: #2a2116; }
.ocean-bridge button.on {
    background: #2a2010;
    border-color: var(--oo-brass);
    color: var(--oo-cream);
}
.ocean-bridge-toggle {
    background: var(--oo-oak-2);
    border: 1px solid var(--oo-brass-dim);
    color: var(--oo-brass);
    letter-spacing: 0.08em;
}
.ocean-bridge-panel {
    background: linear-gradient(180deg, rgba(34, 26, 18, 0.97), rgba(16, 12, 8, 0.98));
    border: 1px solid var(--oo-brass-dim);
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px #3a2a10, var(--oo-shadow);
}
.ocean-bridge h2 { color: var(--oo-brass); letter-spacing: 0.1em; }
.ocean-bridge h3 { color: var(--oo-muted); }
.ocean-bridge-bar { background: #0c0a08; border-color: var(--oo-line); }
.ocean-bridge-bar > i { background: var(--oo-brass-dim); }
.ocean-bridge-bar.hp > i { background: #a06040; }
.ocean-bridge-stations {
    background: rgba(16, 12, 8, 0.92);
    border: 1px solid var(--oo-brass-dim);
    border-radius: 2px;
}

.atlas-char {
    font-family: var(--oo-font);
    background: rgba(10, 8, 6, 0.62);
}
.atlas-char-panel {
    border-color: var(--oo-brass-dim);
    background: linear-gradient(180deg, #2c2418f2, #120e0af5);
}

.oo-dev-sheet {
    position: fixed;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    z-index: 10005;
    width: min(320px, calc(100vw - 24px));
    max-height: 80vh;
    overflow-y: auto;
    padding: 14px 14px 16px;
    color: var(--oo-parchment);
    font: 12px/1.35 var(--oo-font);
}
.oo-dev-sheet.oo-dev-bg {
    top: 12px;
    right: 12px;
    transform: none;
}
.oo-dev-tab.oo-dev-bg {
    top: 12px;
    transform: none;
}
.oo-dev-tab {
    position: fixed;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    z-index: 10005;
    padding: 8px 12px;
    background: var(--oo-oak);
    color: var(--oo-parchment);
    border: 1px solid var(--oo-brass-dim);
    border-radius: 2px;
    cursor: pointer;
    font: 12px var(--oo-font);
}
.oo-dev-sheet button {
    font-family: var(--oo-font);
    background: var(--oo-oak);
    color: var(--oo-parchment);
    border: 1px solid var(--oo-line);
    border-radius: 2px;
    cursor: pointer;
}
.oo-dev-sheet input[type="range"] { accent-color: var(--oo-brass); }

#spectatorIndicator {
    background: rgba(42, 32, 18, 0.9) !important;
    color: var(--oo-parchment) !important;
    border: 1px solid var(--oo-brass-dim);
    font-family: var(--oo-font);
}

#mainMenu {
    font-family: var(--oo-font);
}
#mainMenu > .main-menu-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(100%, 320px);
}
#mainMenu .main-menu-actions {
    gap: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#mainMenu.menu-folded {
    pointer-events: none;
}
#mainMenu.menu-folded .main-menu-actions,
#mainMenu.menu-folded #loggedInAs {
    display: none !important;
}
#mainMenu.menu-folded #menuFoldToggle {
    pointer-events: auto;
}
#mainMenu #menuFoldToggle {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    font-size: 0 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 0 !important;
    align-self: center;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #000 !important;
    cursor: pointer;
    filter: none;
}
#mainMenu #menuFoldToggle:hover,
#mainMenu #menuFoldToggle:focus-visible {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #000 !important;
}
#mainMenu .menu-fold-arrow {
    display: block;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.18s ease, color 0.18s ease;
}
#mainMenu.menu-folded .menu-fold-arrow {
    transform: rotate(225deg);
}
#mainMenu #loggedInAs {
    position: absolute;
    top: 26px;
    left: 0;
    right: 0;
    z-index: 4;
    margin: 0;
    padding: 2px 16px;
    text-align: center;
    pointer-events: none;
    color: var(--oo-cream) !important;
    font-family: var(--oo-font) !important;
    font-size: 13px !important;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 2px #000c !important;
}
#mainMenu button:not(#menuFoldToggle),
#mainMenu #startButton,
#mainMenu #homeWatersButton,
#mainMenu #testingButton,
#mainMenu #tradeButton,
#mainMenu #missionsButton,
#mainMenu #statsButton,
#mainMenu #storageButton,
#mainMenu #logoutMenuButton,
#mainMenu #deleteAccountButton,
#mainMenu #buyGoldButton {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 44px;
    margin: 0 !important;
    padding: 11px 16px !important;
    display: block !important;
    font-family: var(--oo-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2 !important;
    color: var(--oo-cream) !important;
    background: #2a2116 !important;
    border: 1px solid var(--oo-brass-dim) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
#mainMenu #startButton {
    font-size: 18px !important;
    min-height: 52px;
    border-color: var(--oo-brass) !important;
    color: var(--oo-cream) !important;
}
#mainMenu button:not(#menuFoldToggle):hover,
#mainMenu button:not(#startButton):not(#menuFoldToggle):hover,
#mainMenu #startButton:hover,
#mainMenu #startButton:active {
    background: #3a2e1c !important;
    color: var(--oo-cream) !important;
    border-color: var(--oo-brass) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
#mainMenu #homeWatersButton:disabled,
#mainMenu button#homeWatersButton:disabled:hover {
    opacity: 0.42;
    filter: none;
    background: #1a140e !important;
    color: var(--oo-muted) !important;
    border-color: var(--oo-line) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
#mainMenu #deleteAccountButton {
    border-color: var(--oo-danger) !important;
    color: #e8c4b8 !important;
}
#mainMenu .look-settings,
#mainMenu .sound-settings {
    width: 100%;
    margin: 0;
    border: 1px solid var(--oo-line);
    border-radius: 2px;
    background: rgba(16, 12, 8, 0.92);
    font-family: var(--oo-font);
    color: var(--oo-parchment);
}
#mainMenu .look-settings > summary,
#mainMenu .sound-settings > summary {
    padding: 11px 16px;
    color: var(--oo-brass);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 13px;
}

#loginScreen,
#createScreen {
    font-family: var(--oo-font);
    background: linear-gradient(180deg, rgba(34, 26, 18, 0.96), rgba(16, 12, 8, 0.98)) !important;
    border: 1px solid var(--oo-brass-dim) !important;
    border-radius: 2px !important;
    color: var(--oo-parchment) !important;
    box-shadow: inset 0 0 0 1px #3a2a10, var(--oo-shadow) !important;
}
#loginScreen h2,
#createScreen h2 {
    color: var(--oo-brass);
    letter-spacing: 0.08em;
}
#loginScreen button,
#createScreen button,
#loginForm button,
#createForm button {
    font-family: var(--oo-font) !important;
    background: #2a2116 !important;
    color: var(--oo-cream) !important;
    border: 1px solid var(--oo-brass-dim) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
#switchToCreate,
#switchToLogin {
    background: none !important;
    border: none !important;
    color: var(--oo-brass) !important;
    text-decoration: underline;
}

/* Live HUD at phone width: wind window compact, hull bar tucked under the crew strip (CrewUI.fitStrip). */
@media (max-width: 720px) {
    .wind-hud { transform: scale(0.68); transform-origin: top right; }
    .wind-key { display: none; }
    #shipIntegrityHud {
        top: var(--oo-hull-top, 64px) !important;
        left: 8px !important;
        transform: none !important;
        width: min(var(--oo-strip-max, 150px), 200px) !important;
    }
    /* Island build / deed strips (style.css island-hud-phone) move under the hull bar, beside the wind window. */
    body.island-hud-phone #islandBuildHud {
        top: calc(var(--oo-hull-top, 64px) + 22px);
        left: 8px;
        right: auto;
        width: var(--oo-strip-max, 60vw);
    }
    body.island-hud-phone #islandDeedHud {
        top: calc(var(--oo-hull-top, 64px) + 22px + 3.9em);
        left: 8px;
        right: auto;
        width: var(--oo-strip-max, 60vw);
    }
}
.ocean-account { box-sizing: border-box; margin: 16px auto; padding: 14px; width: min(100%, 420px); border: 1px solid #8e793e; border-radius: 9px; color: #eee; background: #101d2dee; font: 14px/1.45 Arial, sans-serif; text-align: left; }
.ocean-account strong { color: #ffd700; }
.ocean-account p { margin: 8px 0; }
.ocean-account button { display: block; width: 100%; margin: 7px 0; padding: 10px; border: 1px solid #d7bc70; border-radius: 5px; color: #182334; background: #faf7ee; cursor: pointer; font: inherit; }
.ocean-account button:disabled { opacity: .55; cursor: default; }
.ocean-account small { display: block; margin-top: 8px; }
.ocean-account a { color: #ffd700; }
.ocean-account-menu { width: 100%; color: #ffd700; }
.ocean-account-menu summary { padding: 12px; border: 1px solid #8e793e; border-radius: 5px; cursor: pointer; text-align: center; }
.ocean-account-menu .ocean-account { margin: 8px 0; }