.marine{--gold:#a7e4d0;--green:#73e3c2;--bg:#071d2a;--panel:#10303d;background:radial-gradient(ellipse at 70% 0,#164a53 0,transparent 65%),var(--bg)}
.marine .brand-mark{color:#9ddbd3}.marine .nav-active{color:#b0e9d6}.marine .primary-button{background:#a7e4d0}.marine .primary-button:hover{background:#c4f3e5}
.marine .ocean-world{background:radial-gradient(ellipse at 50% 10%,#216477 0,#104355 47%,#092b41 100%)}
.marine .sea-lettering{opacity:.09;transform:translate(-50%,-50%);top:51%}.marine .sea-lettering b{font-size:48px;letter-spacing:4px}.marine .compass{display:none}
.marine .harbour-label{background:#123743e8;color:#b1dacc}.marine .harbour-label b{color:#a9ddd2}.marine .harbour-label small{color:#91b7bc}
.marine .king-card{border-color:#d4b46f88;background:linear-gradient(115deg,#143c43f5,#173f4aed);color:#f4d79a}.marine .king-card strong{font-size:13px}.marine .king-card small{color:#f4d79a}
.marine .ship-art{animation:none;filter:drop-shadow(0 5px 3px #02172166)}
.marine .ship:not(.docked) .creature-body{transform:scaleX(var(--facing,1));transform-origin:85px 85px}
.marine .tail{transform-box:view-box;transform-origin:42px 86px;animation:tail-stroke var(--swim-duration,3.5s) ease-in-out infinite;animation-delay:var(--phase)}
.marine .fin{transform-origin:90px 90px;animation:fin-stroke 3s ease-in-out infinite;animation-delay:var(--phase)}
.marine .tentacles{transform-origin:85px 92px;animation:tentacle-pulse 3s ease-in-out infinite;animation-delay:var(--phase)}
.marine .legs{transform-origin:85px 85px;animation:fin-stroke 2.8s ease-in-out infinite;animation-delay:var(--phase)}
.marine .plankton-rays{transform-origin:85px 85px;animation:plankton-turn 14s linear infinite}
.marine .breath-bubbles{animation:breath 4s ease-out infinite;animation-delay:var(--phase)}
.marine .whale-spout{animation:spout 8s ease-out infinite}
.marine .stock-badge{filter:drop-shadow(0 1px 2px #06253466)}
.marine .ship-label{bottom:0;gap:4px;background:#082c40e8;border-color:#87c4cf38;font-size:8px;padding:2px 3px;letter-spacing:0}
.marine .lp-size{color:#a6d7dd;font-size:7px;font-weight:400;font-variant-numeric:tabular-nums}
.marine .ship-principal{bottom:-14px;color:#cee7db}
.marine .ship.docked .creature-art{animation:reef-breathe 6s ease-in-out infinite;animation-delay:var(--phase)}
.marine .ship.docked .ship-label{bottom:-15px;font-size:7px;background:#12343fdd;border-color:#83b4aa55;padding:1px 2px;gap:1px;line-height:1.05;min-width:30px}
.marine .ship.docked .lp-size{font-size:6px;color:#b2d6d7}
.marine .ship.docked .apr-pennant{transform:translate(17px,12px) scale(.7);transform-origin:85px 85px}
.marine .ship.docked .treasure{transform:translate(0,-5px)}
.marine .ship.docked .breath-bubbles{transform:translate(-24px,0)}
.marine .ship.docked .king-banner{font-size:6px;padding:2px 4px;top:-23px;letter-spacing:.3px}.marine .ship.docked .king-banner span{font-size:10px;margin-right:2px}
.marine .king-banner{font-size:9px;top:-16px;color:#322817;letter-spacing:.7px}.marine .king-aura{top:50%;width:117%;height:83%;border-color:#e7cd84;background:radial-gradient(ellipse,#f8d4740a,transparent 70%)}.marine .ship.king .ship-label{color:#ffe5a6;border-color:#e3c273}.marine .king .lp-size{color:#f4deb1}
.marine .ship.docked .king-aura{width:145%;height:100%}
.marine .ship.in-battle .ship-art{animation:water-duel .3s infinite}.marine .ship.dueling .ship-label{border-color:#ff6c66;background:#491f27}
.marine .tier-table{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#355b64;border:1px solid #355b64;border-radius:6px;overflow:hidden;margin-bottom:28px}
.marine .tier-table>div{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 12px;background:#13333f;font-size:11px}.marine .tier-table span{color:#99b8be;font-size:10px}.marine .tier-table .whale-tier{background:#35433d;color:#f6da95}
.marine #priceStatus{color:#9ddfcc;font-size:9px}.marine #priceStatus.stale{color:#e9c890}.marine .footer-right{flex-wrap:wrap;justify-content:flex-end}
.marine .version-link{font-size:12px}.marine .rules-grid h3{color:#d5efdf}
.marine .paused .creature-art,.marine .paused .creature-art *{animation-play-state:paused!important}
@keyframes tail-stroke{0%,100%{transform:rotate(-8deg) scaleX(.88)}50%{transform:rotate(8deg) scaleX(1.06)}}
@keyframes fin-stroke{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(7deg)}}
@keyframes tentacle-pulse{0%,100%{transform:scaleX(.9) scaleY(1.04)}50%{transform:scaleX(1.06) scaleY(.92)}}
@keyframes plankton-turn{to{transform:rotate(360deg)}}
@keyframes breath{0%{opacity:0;translate:0 8px}35%{opacity:.65}100%{opacity:0;translate:3px -18px}}
@keyframes spout{0%,70%,100%{opacity:0}76%,88%{opacity:.7}}
@keyframes reef-breathe{0%,100%{translate:0 -1px;scale:.98}50%{translate:0 1px;scale:1.02}}
@keyframes water-duel{0%,100%{translate:0 -1px}50%{translate:0 2px}}
@media(max-width:750px){.marine .site-header nav>a.version-link{display:block;font-size:9px}.marine .site-header{gap:12px}.marine .site-header nav{gap:12px}.marine .chain{display:none}.marine .sea-lettering b{font-size:35px}.marine .tier-table{grid-template-columns:1fr}.marine .footer-right{max-width:175px}.marine .king-card{max-width:255px}}
@media(prefers-reduced-motion:reduce){.marine .creature-art,.marine .creature-art *{animation:none!important}}

/* Approved hand-painted sprites; faces stay clear of data badges. */
.marine .painted-art{filter:drop-shadow(0 3px 2px #03213166)}
.marine .painted-swimmer{transform-origin:85px 85px;animation:painted-swim var(--swim-duration,4s) ease-in-out infinite;animation-delay:var(--phase)}
.marine .octopus .painted-swimmer{animation-name:painted-pulse}
.marine .plankton .painted-swimmer{animation-name:painted-drift}
.marine .ship.docked .painted-swimmer{animation-duration:7s}
.marine .ship.dragging .painted-swimmer,.marine .ship.dueling .painted-swimmer{animation-play-state:paused}
.marine .ship.docked .stock-badge{opacity:.95}
.marine .painted-crown{filter:drop-shadow(0 1px 1px #092a3a55)}
.marine .ocean-world{background:radial-gradient(ellipse at 45% 12%,#397783 0,#225968 47%,#153f53 100%)}
@keyframes painted-swim{0%,100%{transform:translateY(-1.5px) rotate(-2deg) scaleX(.985)}50%{transform:translateY(1.5px) rotate(2deg) scaleX(1.015)}}
@keyframes painted-pulse{0%,100%{transform:translateY(-2px) scale(.97,1.02)}50%{transform:translateY(2px) scale(1.025,.97)}}
@keyframes painted-drift{0%,100%{transform:translateY(-3px) rotate(-5deg)}50%{transform:translateY(3px) rotate(5deg)}}

.marine .captain-ship svg:not(.creature-art){filter:none}

/* Articulated skin is driven by the paused-aware ocean clock. */
.marine .painted-swimmer{animation:none!important}
.marine .ship:not(.docked) .creature-body{transition:transform .65s ease-in-out}
@media(prefers-reduced-motion:reduce){.marine .ship:not(.docked) .creature-body{transition:none}}

.marine .ship:not(.docked) .painted-swimmer{transform:rotate(var(--swim-pitch,0deg));transform-origin:85px 85px}
/* Octopuses streamline their arms behind the mantle during a short jet. */
.marine .octopus .anatomy-rig{transform-origin:85px 85px;transition:transform .65s ease}
.marine .ship[data-burst="true"] .octopus .anatomy-rig{transform:rotate(65deg)}
@media(prefers-reduced-motion:reduce){.marine .octopus .anatomy-rig{transition:none}}

/* Click selection keeps navigation and hit areas unchanged. */
.marine .ship>.ship-art{pointer-events:none}
.marine #ships.selection-muted{filter:grayscale(1);opacity:.24}
.marine .selected-ships{z-index:4;pointer-events:none}
.marine .selected-ships>.ship{pointer-events:auto}
.marine .ship.selected::after{content:'';position:absolute;inset:-5px;border:2px solid #ffc66b;border-radius:50%;pointer-events:none}
.marine .ship.selected::before{content:'';position:absolute;left:50%;top:-16px;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #ffc66b;pointer-events:none}
.marine .ship.selected .ship-label{border-color:#ffc66b;color:#fff0c8}
.marine .ship-label{flex-direction:column;gap:1px}
.marine .ship.docked .ship-label{bottom:-21px}
.marine #previewFee{background:#183f4d;border:1px solid #4d7680;border-radius:5px;color:#d6e9df;padding:5px 9px;font-size:10px}
.marine .fee-demo .fee-amount{border-color:#e4cb8c}.marine .fee-demo .fee-amount small{color:#ffe1a0}

.marine .swim-status{padding:10px 2px 0;color:#91b6bd;font-size:10px;font-variant-numeric:tabular-nums}.marine .swim-status.burst-active{color:#c2f5e2}

.marine .ocean-behaviours{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;color:#b5d8d9;font-size:11px;font-variant-numeric:tabular-nums}
.marine .ocean-behaviours>div{display:flex;gap:8px;flex-wrap:wrap}
.marine .ocean-behaviours button{background:#183f4d;border:1px solid #4d7680;border-radius:6px;color:#d6e9df;padding:7px 11px;font:inherit;cursor:pointer}
.marine .ocean-behaviours button:disabled{opacity:.45;cursor:default}
.marine .ocean-event-banner{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:105;padding:8px 15px;border:1px solid #9bc7c980;border-radius:20px;background:#123541ed;color:#d4f2ea;font-size:11px;white-space:nowrap;pointer-events:none}

/* Small swimmers keep their articulated pose; avoid per-frame shadow/filter surfaces. */
.marine .ship[data-detail="compact"]>.ship-art,.marine .ship[data-detail="compact"] .stock-badge{filter:none}
.marine .ship[data-detail="compact"] .breath-bubbles{display:none}
.marine .ship.offscreen{visibility:hidden;will-change:auto}
.marine .ship.offscreen .creature-art,.marine .ship.offscreen .creature-art *{animation-play-state:paused!important}
.marine .ship>.marine-body{position:absolute;top:50%;left:0;width:100%;height:auto;pointer-events:none;transform:translateY(-50%) scaleX(var(--facing,1)) rotate(var(--swim-pitch,0deg));transform-origin:center}
.marine .ship.docked>.marine-body{transform:translateY(-50%) rotate(var(--reef-angle)) scale(.86,.60)}

/* Pre-laid-out duel results fade in without scaling a large shadow surface. */
.marine .battle-result{background:#15313c;box-shadow:0 4px 16px #00121b55;contain:layout style;isolation:isolate;animation:none;opacity:0;visibility:hidden;transition:opacity .14s ease-out}
.marine .battle-result:not([hidden]){will-change:opacity}
.marine .battle-result.is-visible{visibility:visible;opacity:1}
.marine .ship.winner .ship-art,.marine .ship.loser .ship-art{filter:none}
.marine .ship.winner .ship-label{border-color:#f3cd7c;background:#374332;color:#fff0c8}
.marine .ship.loser .ship-label{border-color:#6f9098;background:#17313d;color:#b7c7cb}
@media(prefers-reduced-motion:reduce){.marine .battle-result{transition:none}}

/* Keep the ocean in view; explanations and demos live in the dialogs. */
.marine main{padding:26px 24px 16px}.marine .site-header{height:62px;padding:0 24px;gap:36px;position:sticky;top:0;z-index:45;background:#0d222cf7}
.marine .heading-row{margin-bottom:24px;gap:28px;align-items:flex-end}.marine .hero-copy{flex:1 1 560px;max-width:850px}.marine .hero-copy .eyebrow{font-size:9px;letter-spacing:2.2px;margin-bottom:12px;color:#91b7aa}.marine .hero-copy .eyebrow:before{content:'';width:24px;height:1px;background:currentColor}.marine .heading-row h1{font:500 clamp(36px,3.1vw,54px)/1.08 var(--serif);letter-spacing:-.7px;margin:0 0 12px}.marine .heading-row h1 em{font-weight:500;color:#a7e4d0}.marine .heading-row p{font-size:12px;color:#a9c0c5;line-height:1.6;margin:0}
.marine .heading-actions{flex:0 0 auto}.marine .heading-actions .turbo-cta{width:100%}
.marine .heading-actions{flex-wrap:wrap;justify-content:flex-end}.marine .turbo-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:12px 17px;font-size:12px;font-weight:700;line-height:1.3;text-align:center;text-decoration:none;border:1px solid #b8efdc;box-shadow:0 3px 12px #001c2940}
.marine .turbo-cta:focus-visible{outline:3px solid #ffe39d;outline-offset:3px}.marine .header-cta{min-height:38px;padding:9px 14px}.marine .header-cta[hidden]{display:none}.marine .drawer-actions .turbo-cta{width:100%}.marine .drawer-actions{margin-bottom:22px}
@media(max-width:1100px){.marine .heading-row{flex-wrap:wrap}.marine .heading-actions{justify-content:flex-start;max-width:none;flex:1 1 100%}.marine .heading-actions .turbo-cta{width:auto;margin-left:auto}}
@media(max-width:750px){.marine .heading-actions .turbo-cta{flex:1 0 100%;margin-left:0}.marine .has-header-cta nav,.marine .has-header-cta .chain{display:none}.marine .has-header-cta .brand{font-size:17px}.marine .has-header-cta .brand-mark{font-size:26px}.marine .header-cta{font-size:10px;padding:8px 10px;min-height:38px;gap:6px}.marine .has-header-cta{gap:8px}.marine .has-header-cta .header-end{gap:0}}
@media(max-width:400px){.marine .has-header-cta .brand>span:not(.brand-mark){display:none}}
.marine .stats-bar{min-height:68px;margin-bottom:14px}.marine .stat{padding:12px 18px;gap:10px}.marine .stat strong{font-size:23px}.marine .stat-label{font-size:9px;letter-spacing:.7px;margin-bottom:6px}.marine .stat-icon{display:none}.marine .session-stat{flex:1}
.marine .stat-label small{display:inline;font-size:inherit;letter-spacing:inherit;color:inherit}.marine .harbour-label{font-size:13px;letter-spacing:1.3px;padding:7px 12px;border-color:#8cbbac70;color:#d4f0e6;background:#12343ff2}.marine .harbour-label span{font-size:15px}.marine .harbour-label small{font-size:10px;letter-spacing:.7px;color:#bbd8da}.marine .harbour-label b{font-size:10px;letter-spacing:.3px;color:#d5eee8}
.marine .ocean-viewport{height:clamp(570px,calc(100dvh - 260px),880px);scroll-margin-top:86px;scroll-margin-bottom:12px}
.marine .plaza{isolation:isolate}
.marine .toolbar{min-height:50px;padding:8px 14px}.marine .toolbar .icon-button{width:36px;height:34px;border-radius:5px;background:#193b47}.marine .segmented button{min-height:30px;font-size:11px}.mobile-pan-hint{display:none}
.marine .below-ocean{margin-top:10px}.marine .data-button{display:flex;align-items:center;gap:14px;background:none;padding:7px 0;font-size:11px;color:#9ab8bd}.marine .data-button>span:last-child{color:#b3d3d6}.marine .connection{font-size:11px}.marine .log-toggle{font-size:12px;min-height:36px}
.marine .ocean-footer{min-height:40px;font-size:11px}.marine .footer-right{font-size:10px;max-width:none}.marine .footer-right button{min-width:30px;min-height:28px}
.marine .ship{contain:layout style}.marine .ship>.ship-art,.marine .ship .stock-badge{filter:none;animation:none}.marine .ship .breath-bubbles{display:none}.marine .ship:not(.docked) .creature-body{transition:none}
.marine dialog::backdrop{backdrop-filter:none;background:#03161dbb}.marine dialog{width:660px;padding:24px}.marine .dialog-heading h2{font:600 24px var(--sans);margin:0 0 22px}.marine .dialog-heading button{min-width:32px;min-height:32px}.marine .rules-grid{gap:20px 24px}.marine .rules-grid h3{font:600 14px var(--sans);margin:0 0 7px}.marine .rules-grid p{font-size:12px;line-height:1.65}.marine .rules-note{font-size:11px}.marine .tier-table{margin-bottom:24px}.marine .tier-table>div{font-size:12px}.marine .tier-table span{font-size:11px}
.marine .settings-section{padding:18px 0;border-top:1px solid var(--line)}.marine .settings-section h3,.marine .settings-section label{display:block;font-size:13px;font-weight:600;margin:0 0 14px}.marine .layer-options{display:flex;flex-wrap:wrap;gap:12px 22px}.marine .layer-options .toggle{font-size:12px;min-height:30px}.marine .settings-section select{width:100%;padding:10px;background:#10323f;border:1px solid #52747d;border-radius:6px;color:#dceee9;font:inherit}.marine .settings-section p{color:#97b6bd;font-size:11px;line-height:1.6;margin:10px 0 0}
.marine .animation-previews{border-top:1px solid var(--line);padding-top:18px}.marine .animation-previews summary{cursor:pointer;font-size:13px;padding:4px 0}.marine .ocean-behaviours{font-size:11px;line-height:1.6}.marine .fee-status{display:grid;gap:10px;padding:0}.marine #lastFee{margin:0;font-size:12px}.marine #feeFeedState,.marine #feeFeedChecked{font-size:12px}.marine #dataDialog .source-note{font-size:12px;line-height:1.7;color:#94b1ba;margin-top:24px}.marine #dataDialog #priceStatus{font-size:13px}
.marine .drawer h2{font:600 28px var(--sans)}.marine .drawer-footnote{font-size:11px}.marine .captain-metrics{padding:18px 0;gap:18px 10px}.marine .captain-metrics dd{font-size:21px}.marine .captain-metrics dd small{font-size:10px}.marine .captain-details{font-size:12px}.marine .range-box h3{font-size:13px}.marine .captain-ship{height:150px}.marine .captain-ship svg{width:150px;height:150px}
.marine .modal-paused .creature-art *,.marine .modal-paused .king-aura,.marine .modal-paused .king-aura:after,.marine .modal-paused .battle-ring{animation-play-state:paused!important}
@media(max-width:750px){
 .marine .site-header{padding:0 14px;gap:16px;height:56px}.marine .site-header nav{gap:12px}.marine main{padding:20px 12px}.marine .heading-row{display:flex;flex-wrap:wrap;margin-bottom:18px;gap:18px}.marine .heading-row h1{font-size:36px}.marine .heading-row p{font-size:11px}.marine .hero-copy .eyebrow{font-size:8px}.marine .heading-actions{margin:0;flex-wrap:wrap}.marine .heading-actions button{font-size:11px;padding:8px 12px}.marine .harbour-label{font-size:11px;letter-spacing:1px}.marine .harbour-label small,.marine .harbour-label b{font-size:9px}
 .marine .stats-bar{display:grid;grid-template-columns:repeat(3,1fr)}.marine .stat{padding:10px;min-height:62px;border:0}.marine .stat strong{font-size:20px}.marine .stat-label{font-size:8px;letter-spacing:0}.marine .stat-label small{display:inline;font-size:7px}.marine .stat:before{display:none}.marine .stat.session-stat{grid-column:2/4;border-top:1px solid var(--line)}.marine .stat:nth-child(4){border-top:1px solid var(--line)}
 .marine .toolbar{gap:8px}.marine .filter-group{width:100%;justify-content:space-between;gap:6px}.marine .display-controls{width:100%;justify-content:flex-end;gap:8px}.marine .segmented button{padding:5px 9px;min-height:32px}.mobile-pan-hint{display:block;margin-right:auto;font-size:10px;color:#9dbcc4}.marine .ocean-viewport{height:65dvh;overscroll-behavior-x:contain}.marine .ocean-footer{flex-wrap:wrap;gap:6px}.marine .ocean-footer>span:first-child{max-width:none}.marine .footer-right{font-size:10px}.marine .data-button{gap:8px;flex-wrap:wrap;font-size:10px}.marine .connection{font-size:10px}.marine .below-ocean{align-items:center}.marine .rules-grid{grid-template-columns:1fr}.marine .king-card{max-width:200px}.marine dialog{padding:20px}.marine .drawer{width:360px;max-width:100%;padding:22px}
}
/* Mute the cached creature pixels; avoid a filter over the entire moving ocean. */
.marine #ships.selection-muted{filter:none;opacity:.28}
.marine #ships.selection-muted .ship-art{filter:grayscale(1)}
.marine .ship.docked>.ship-art{animation:none}
.marine .modal-paused .creature-art{animation-play-state:paused!important}

.marine #dataDialog{width:440px}.marine #dataDialog .dialog-heading h2{margin:0 0 24px}.marine #dataDialog #feeFeedState{font-size:16px;font-weight:600}.marine #dataDialog .source-note{margin:20px 0 0;font-size:11px}

/* Recent earnings: a readable, bounded companion to the moving creatures. */
.marine .earnings-total-note{display:block;color:#9bb9bd;font-size:9px;margin-top:5px;font-weight:400;line-height:1.4}
.marine .ocean-stage{position:relative}.marine .plaza:fullscreen .ocean-stage{display:flex;flex-direction:column;flex:1;min-height:0}
.marine .earnings-card{position:absolute;right:12px;bottom:12px;margin:0;width:320px;max-width:calc(100% - 24px);z-index:24;background:#102a35e8;border:1px solid #547c7d99;border-radius:10px;box-shadow:0 5px 18px #00151b33;color:#e5f0ec;overflow:hidden}
.marine .earnings-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid #34545c88}
.marine .earnings-card h2{font-family:var(--sans);font-size:11px;letter-spacing:.1px;margin:0 0 3px;font-weight:600}
.marine #earningsState{font-size:9px;color:#e2c88d}.marine .is-live #earningsState{color:#83dfb4}
.marine .earnings-card button{background:transparent}.marine #toggleEarnings{font-size:10px;color:#b8ced0;padding:6px 0;white-space:nowrap}
.marine .earnings-scroll{max-height:182px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#567d80 transparent}
.marine .earnings-row{width:100%;display:grid;grid-template-columns:47px minmax(0,1fr) 77px;gap:5px;align-items:center;padding:4px 10px;text-align:left;border:0;min-height:26px;line-height:18px;font-variant-numeric:tabular-nums;white-space:nowrap}
.marine .earnings-row:hover,.marine .earnings-row:focus-visible{background:#24434c}.marine .earnings-row:focus-visible{outline:1px solid #a1d8c9;outline-offset:-1px}.marine .earnings-row time{display:flex;gap:4px;align-items:center;font-size:10px;color:#a4bfc3}.marine .earnings-kind{color:#d5c28f;font-size:11px}.marine .earnings-kind.is-new{color:#86efb9}.marine .earnings-position{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}.marine .earnings-position b{font-size:11px;flex-shrink:0}.marine .earnings-owner{font-size:10px;color:#92adb4;overflow:hidden;text-overflow:ellipsis}.marine .earnings-value{color:#86efb9;text-align:right;font-size:11px;font-weight:600}
.marine .earnings-card-foot{display:flex;align-items:center;justify-content:space-between;padding:3px 10px;gap:8px;border-top:1px solid #36565c88}.marine #earningsCoverage{font-size:8px;color:#a2bdc0}.marine #replayRecent{font-size:10px;color:#d5c28f;white-space:nowrap;padding:6px 0}.marine #replayRecent:disabled{opacity:.4;cursor:default}.marine .earnings-details{padding:6px 0;text-align:right;color:#b8cece;font-size:10px;white-space:nowrap}
.marine .earnings-empty{padding:18px 14px;margin:0;font-size:11px;color:#9fb9bc;line-height:1.6}.marine .visit-total{display:flex;justify-content:space-between;font-size:11px;color:#9bb9bd}.marine .visit-total strong{color:#86efb9}
.marine .fee-amount{flex-direction:column;gap:3px;padding:7px 11px}.marine .fee-amount b{font-size:16px}.marine .fee-amount small{font-size:7px;letter-spacing:.7px}.marine .fee-coins{color:#8df3bd}
.marine .fee-target{--fee-highlight:#8df3bd;position:absolute;transform:translate(-50%,-50%);pointer-events:none;color:var(--fee-highlight)}
.marine .fee-target-ring{position:absolute;inset:0;border:2px solid currentColor;border-radius:50%;box-shadow:0 0 0 3px #072d4080,0 0 14px #8df3bd66,inset 0 0 10px #8df3bd33}
.marine .fee-target-link{position:absolute;bottom:100%;left:50%;width:2px;height:var(--fee-link-height,12px);transform:translateX(-50%);background:currentColor;box-shadow:0 0 5px #072d40}
.marine .fee-target-link:after{content:'';position:absolute;bottom:-3px;left:50%;width:6px;height:6px;transform:translateX(-50%);border-radius:50%;background:currentColor;box-shadow:0 0 0 2px #10303d}
.marine .fee-target.fee-demo{--fee-highlight:#e4cb8c}.marine .fee-target.fee-demo .fee-target-ring{box-shadow:0 0 0 3px #072d4080,0 0 14px #e4cb8c66,inset 0 0 10px #e4cb8c33}
@media(max-width:750px){.marine .earnings-card{width:300px;right:8px;bottom:8px;margin:0;max-width:calc(100% - 16px)}.marine .earnings-scroll{max-height:160px}.marine .earnings-row{min-height:32px;padding-block:7px;grid-template-columns:47px minmax(0,1fr) 70px}.marine .earnings-card-head{padding:7px 10px}.marine .earnings-total-note{font-size:8px}}
@media(prefers-reduced-motion:reduce){.marine .fee-coins i{animation:none!important}}

/* Reveal a complete creature once its bitmap is ready; avoid painting hundreds
   of filtered SVG fallbacks while startup work is still in flight. */
.ship.preparing{visibility:hidden;pointer-events:none}

/* Money effects stay on one non-interactive canvas above the visible frame. */
.marine .fee-sound-toggle{display:flex;align-items:center;gap:5px;white-space:nowrap;padding:8px 10px;border:1px solid #a9d9ce38;border-radius:6px;background:#173943;color:#b6d6d3;font-size:11px;cursor:pointer}
.marine .fee-sound-toggle[aria-pressed="true"]{background:#255349;color:#fff0c4;border-color:#dcb96699}
.marine .sound-heading,.marine .volume-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.marine .sound-heading{margin-bottom:20px}.marine .sound-heading h3,.marine .volume-heading label{margin:0}.marine .volume-heading output{font-size:13px;font-variant-numeric:tabular-nums;color:#b7f1d5}.marine #feeVolume{display:block;width:100%;height:32px;margin:4px 0 10px;accent-color:#8ceac2;cursor:pointer}.marine .sound-previews{display:flex;flex-wrap:wrap;gap:8px}.marine .sound-previews button{min-height:36px;border:1px solid #52747d;border-radius:6px}.marine .sound-previews button:disabled{opacity:.45;cursor:default}.marine .guide-basics{margin:0 0 24px}.marine .guide-basics article{border-left:2px solid #8ceac260;padding-left:14px}.marine .guide-details{padding:15px 0;border-top:1px solid var(--line)}.marine .guide-details summary{font-size:13px;font-weight:600;cursor:pointer}.marine .guide-details>p{color:#97b6bd;font-size:12px;line-height:1.6;margin:14px 0}.marine .guide-details .tier-table{margin:0}.marine .guide-legend{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;font-size:12px;line-height:1.6;margin:16px 0 0}.marine .guide-legend dt{font-weight:600;color:#d5efdf}.marine .guide-legend dd{margin:0;color:#97b6bd}.marine #rulesDialog .rules-note{margin:6px 0 0;padding-top:16px}
.fee-celebration{position:absolute;inset:0;z-index:1600;pointer-events:none;overflow:hidden;border-radius:inherit;box-shadow:inset 0 0 0 2px #efd38ca6,inset 0 0 48px #eccb6440;contain:layout paint}
.fee-celebration[hidden]{display:none}
#feeConfetti{position:absolute;inset:0;width:100%;height:100%}
.fee-celebration-label{position:absolute;top:50px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;padding:10px 16px;border:1px solid #ffe39d;border-radius:10px;background:linear-gradient(135deg,#163f3ff7,#0a242df7);color:#ffe6a4;font-size:32px;line-height:1.1;letter-spacing:-.2px;font-weight:800;text-align:center;box-shadow:0 5px 24px #001e2d77,0 0 25px #f8d77830}
.fee-celebration-label[data-badge]:not([data-badge=""]):before{content:attr(data-badge);display:block;color:#f3d79c;font-size:9px;font-weight:600;line-height:1.3;letter-spacing:1.8px;margin-bottom:7px}
.fee-celebration:not(.gentle) .fee-celebration-label{animation:fee-headline-in .24s ease-out}
@keyframes fee-headline-in{from{opacity:0;transform:translateX(-50%) scale(.92)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.fee-celebration.gentle{box-shadow:inset 0 0 0 2px #efd38c88,inset 0 0 24px #eccb6425}
@media(max-width:750px){.marine .fee-sound-toggle{padding:7px;font-size:10px}.fee-celebration-label{font-size:26px;padding:9px 13px;top:46px}.marine .toolbar{flex-wrap:wrap;gap:8px}.marine .display-controls{margin-left:auto}}

.marine .fee-target.fee-jackpot{--fee-highlight:#ffe39d;z-index:3}
.marine .fee-target.fee-jackpot .fee-target-ring{border-width:3px;background:radial-gradient(ellipse,#ffe39d15,transparent 70%);box-shadow:0 0 0 5px #092c3ae0,0 0 28px #ffd469a6,inset 0 0 18px #ffe39d55}
.marine .fee-target.fee-jackpot .fee-target-ring:before{content:'';position:absolute;inset:-10px;border:2px solid #ffe39da6;border-radius:50%;animation:fee-winner-halo 1.25s ease-out infinite}
.marine .fee-target.fee-jackpot .fee-target-ring:after{content:'✦';position:absolute;right:0;top:-9px;font-size:26px;color:#fff1c2;text-shadow:0 0 10px #ffc94a}
.marine .fee-target.fee-jackpot .fee-target-link{width:3px}.marine .fee-target.fee-jackpot .fee-target-link:after{width:10px;height:10px;box-shadow:0 0 0 3px #12333c}
.marine .fee-pop.fee-jackpot{z-index:4;filter:drop-shadow(0 5px 10px #001a27aa)}
.marine .fee-pop.fee-below{transform:translate(-50%,0)}
.marine .fee-target.fee-below .fee-target-link{top:100%;bottom:auto}.marine .fee-target.fee-below .fee-target-link:after{top:-3px;bottom:auto}
.marine .fee-pop.fee-jackpot .fee-amount{padding:8px 12px;gap:4px;border:1px solid #ffe39d;border-radius:10px;background:#143b39fa;color:#fff0b8;box-shadow:0 0 24px #ffd46944}
.marine .fee-pop.fee-jackpot .fee-amount b{font-size:clamp(13px,1.35vw,21px);line-height:1.1}.marine .fee-pop.fee-jackpot .fee-amount small{font-size:8px;color:#f3dda6}.marine .fee-pop.fee-jackpot .fee-coins{color:#ffe39d;font-size:23px}
@keyframes fee-winner-halo{from{transform:scale(.96);opacity:.9}to{transform:scale(1.16);opacity:0}}
@media(max-width:750px){.marine .fee-pop.fee-jackpot .fee-amount b{font-size:13px}.marine .fee-pop.fee-jackpot .fee-amount{padding:7px 10px}}
@media(prefers-reduced-motion:reduce){.marine .fee-target.fee-jackpot .fee-target-ring:before,.fee-celebration-label{animation:none!important}}

/* Compact ocean actions share one row, with accessible names on icon buttons. */
.marine .display-controls{display:flex;align-items:center;flex-wrap:nowrap;gap:6px}
.marine .toolbar .ocean-control{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;gap:6px;width:40px;height:40px;padding:0;border:1px solid #466c7666;border-radius:6px;background:#173943;color:#bbd6d8;font-size:11px;cursor:pointer}
.marine .toolbar .duel-control{width:auto;padding:0 12px}
.marine .ocean-control svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.marine .toolbar .ocean-control:hover{background:#214b55;border-color:#8dc9ba;color:#e2f8ee}
.marine .toolbar .ocean-control:focus-visible{outline:2px solid #ffe39d;outline-offset:2px}
.marine .toolbar .ocean-control[aria-pressed="true"]{background:#255349;color:#fff0c4;border-color:#dcb96699}
.marine #feeSoundToggle[data-audible="true"] .sound-off-icon,.marine #feeSoundToggle:not([data-audible="true"]) .sound-on-icon,.marine #motionButton[data-paused="true"] .pause-icon,.marine #motionButton:not([data-paused="true"]) .play-icon,.marine #fullscreenButton[aria-pressed="true"] .expand-icon,.marine #fullscreenButton:not([aria-pressed="true"]) .shrink-icon{display:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:750px){.marine .display-controls{gap:6px}.marine .display-controls .mobile-pan-hint{display:none}.marine .desktop-interaction{display:none}.marine .ocean-footer .mobile-pan-hint{display:inline;margin:0;font-size:inherit;color:inherit}}
@media(max-width:360px){.marine .toolbar .duel-control{width:40px;padding:0}.marine .duel-control span{display:none}}
.marine .brand{gap:10px;flex-shrink:0;letter-spacing:-1.2px}
.marine .brand-fish{width:39px;height:34px;color:#a7e4d0;flex-shrink:0}
.marine .brand-wordmark{font-family:ui-rounded,'Avenir Next',var(--sans);font-size:29px;font-weight:700;color:#e5eae9;line-height:1}
.marine .brand-fee{color:#a7e4d0}.marine .brand-dot{color:#e1bd78}
.marine .brand .alpha{margin:0 0 12px 2px;color:#a7e4d0;border-color:#47746b}
.marine .site-header nav>a.nav-active{color:#b0e9d6;border-color:#a7e4d0;font-weight:500}
.marine .heading-actions{align-items:center;flex-wrap:wrap;justify-content:flex-end}
.marine .explore-link{display:inline-flex;align-items:center;gap:12px;color:#b0e9d6;font-size:12px;padding:12px 0;white-space:nowrap}
.marine .explore-link:hover{color:#e5fff5}.marine #ocean{scroll-margin-top:78px}
@media(max-width:750px){.marine .heading-actions{justify-content:flex-start}.marine .brand-wordmark{font-size:25px}.marine .brand-fish{width:32px}.marine .brand .alpha{display:none}.marine .has-header-cta .brand-wordmark{font-size:22px}.marine .has-header-cta .brand-fish{width:27px}.marine #ocean{scroll-margin-top:68px}}
@media(max-width:400px){.marine .has-header-cta .brand>span.brand-wordmark{display:inline}.marine .has-header-cta .brand-fish{display:none}}