/* Aquamarine's overlays follow the flat game art: ink, chart paper and a little brass. */
:root {
  color-scheme:light;
  --ink:#263b49;
  --muted:#637575;
  --sea:#006fbc;
  --glass:#fcf5e5f5;
  --line:#b2aa8b66;
  --mint:#3f868d;
  --gold:#a5732a;
  --paper:#fcf5e5;
  --wood:#806646;
  --radius:14px;
}
html,body {background:var(--sea)}
#ocean {background:var(--sea)}
button:focus-visible,a:focus-visible,canvas:focus-visible {
  outline:2px solid #244e64;outline-offset:4px;
}
.glass {
  border:1.5px solid var(--wood);
  background:var(--glass);
  box-shadow:0 3px 0 #4f52403a,0 5px 16px #00294826,inset 0 0 0 3px #fffaf4;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.navigation {border-radius:14px 14px 14px 5px;gap:16px;padding:0 19px 0 12px}
.home-link {color:#5a655d;letter-spacing:1.4px}
.home-link:hover {color:#006798}
.home-link svg {width:25px;height:25px;padding:5px;border-radius:50%;background:#e4e6d5}
.nav-divider {background:#b5ab8a99}
h1 {font:700 21px/1.1 Georgia,"Yu Mincho",serif;letter-spacing:-.5px;color:#28576a}
.tools {padding:5px;gap:3px;border-radius:14px 14px 5px 14px}
.icon-button {width:40px;height:40px;border-radius:9px;color:#40555a}
.icon-button:hover {background:#dce9e3;color:#205f77;transform:translateY(-1px)}
.icon-button:active {transform:translateY(1px)}
.icon-button[aria-expanded="true"] {background:#cce4df;color:#20556a;box-shadow:inset 0 0 0 1px #4e7f7f55}
.tools [data-action="map"] {background:#e2eee5;color:#286a7a}
.tools [data-action="map"]:hover {background:#cce4df}
.tools .notebook-tool {
  width:auto;padding:0 13px 0 10px;gap:7px;display:flex;align-items:center;
  color:#785e35;background:#efe1bf;font-size:11px;font-weight:700;
  border:1px solid #b9a06c66;white-space:nowrap;
}
.tools .notebook-tool:hover,.tools .notebook-tool[aria-expanded="true"] {background:#e6d4a7;color:#624b24}
.notebook-tool svg {width:18px;height:18px}
.zone-readout {
  font-size:11px;letter-spacing:.2px;gap:7px;left:max(25px,calc(env(safe-area-inset-left) + 10px));
  top:88px;padding:6px 10px;color:#284d5c;background:#fff7e9ed;
  border:1px solid #80664680;border-radius:3px 11px 11px 3px;text-shadow:none;
  box-shadow:0 2px 6px #0033511f;
}
.zone-dot {width:6px;height:6px;background:#378987;box-shadow:0 0 0 3px #37898722}
.ship-hud {border-radius:7px 18px 7px 18px;padding:13px 20px;gap:18px}
.health-status svg {color:#ba6251;fill:#ebad96;stroke-width:1.6}
.health-track {width:100px;height:9px;border:1px solid #6c877d;background:#d3d9c5;padding:1px;border-radius:3px}
.health-track>span {background:#65a797;border-radius:1px}
.health-track.is-low>span {background:#cb6655}
#health-text {font-size:11px;font-weight:700;color:#436462}
.hud-divider {background:#b2aa8b66;height:24px}
.resource {font-size:14px;font-weight:700;gap:7px}
.resource svg {width:22px;height:22px}
.resource .coin-icon {fill:#f0ce69;stroke:#a5732a;stroke-width:1.5}
.fragments-status .fragment-icon {fill:#c2afea;stroke:#6e629b;stroke-width:1.3;width:23px;height:23px}
.count-total {color:#7c8480;font-size:11px;font-weight:400}
.dash-status {color:#326f81;font-size:11px}
.dash-status svg {color:#448494;fill:#bddfe1;stroke-width:1.4}
.dash-track {height:5px;background:#d3dbcc}
.dash-track>span {background:#548f9b}
.dash-status.is-cooling,.dash-status.is-cooling svg {color:#889c99}
.interaction-hint {border-radius:9px;padding:7px 8px 7px 12px;font-weight:600;gap:9px}
.interaction-hint kbd {background:#eee3cb;border-color:#b6a788;color:#53625e}
.interaction-hint button {background:#3c788a;color:#fff8e9;border-radius:6px;border:1px solid #286276}
.interaction-hint button:hover {background:#285f76}
.toast {color:#284d5c;background:#fff7e9f5;border:1px solid #80664699;border-radius:6px 16px 6px 16px;box-shadow:0 4px 0 #403d3530,0 7px 24px #00335130}

/* A folded chart rather than a glass dashboard. Keep the water visible around it. */
.game-dialog {
  width:454px;color:var(--ink);border:2px solid #806646;border-radius:8px 24px 8px 24px;
  background-color:var(--paper);
  background-image:radial-gradient(#96826112 .7px,transparent .8px);
  background-size:9px 9px;
  box-shadow:0 7px 0 #77684ed9,0 9px 0 #34494c70,0 18px 65px #00315044,inset 0 0 0 5px #fffaf0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  animation:chart-unfold .2s ease-out;
}
.game-dialog::backdrop {background:#06283e38;backdrop-filter:none}
.game-dialog.is-start::backdrop {background:#123a4714}
.game-dialog.is-start {width:446px}
.dialog-heading {height:56px;padding:10px 17px 0 28px}
.dialog-eyebrow {color:#857048;font-size:10px;letter-spacing:2.2px;display:flex;align-items:center;gap:8px}
.dialog-eyebrow::before {content:"";width:5px;height:5px;background:#b69a56;transform:rotate(45deg)}
.dialog-heading .icon-button {border:1px solid #b9aa8870;border-radius:50%;background:#ede7d6;color:#56685f}
.dialog-heading .icon-button:hover {background:#dfdac5}
.dialog-content {padding:0 30px 29px;scrollbar-color:#a5a98b77 transparent}
.panel h2 {font-weight:700;color:#28576a;letter-spacing:-.65px;font-size:32px;margin:8px 0 13px}
.panel-intro {color:#5d7270;font-size:13px;line-height:1.8}
.start-heading {gap:17px;padding-top:1px}
.start-heading h2 {font-size:30px}
.start-compass {width:60px;height:60px;stroke:#678d89;stroke-width:1.5;opacity:1;filter:drop-shadow(0 1px 0 white)}
.is-start .panel-intro {margin-top:18px;margin-bottom:19px}
.control-summary {background:#f1ecd9;border:1px solid #b3af9066;border-radius:6px;padding:16px 10px;margin-bottom:21px}
.control-summary>div {color:#627573;font-size:11px}
kbd {color:#3f5859;background:#fffaf0;border-color:#b7ad9090;border-radius:4px;box-shadow:0 1px 0 #c7bea0}
.primary-button,.secondary-button {border-radius:6px 13px 6px 13px;min-height:48px;font-size:13px}
.primary-button {
  background:#397b8e;color:#fffaf0;border:1.5px solid #28566d;
  box-shadow:0 3px 0 #244d61,inset 0 1px 0 #98b9bd80;
}
.primary-button:not(:disabled):hover {background:#286c83;transform:translateY(-1px)}
.primary-button:not(:disabled):active {background:#245a70;transform:translateY(2px);box-shadow:0 1px 0 #244d61}
.primary-button:disabled {opacity:.55}
.secondary-button {color:#5e706a;background:#f1ecd9;border:1px solid #b7ad9080;margin-top:14px}
.secondary-button:hover {background:#e7e2cd;color:#354f51}
.start-footnote {color:#7c8679;font-size:10px;line-height:1.6;margin-top:17px}
.loading-state {color:#6b7c70}
.loading-track {background:#e0ddc9}
.loading-track span {background:#69a198}
.controls-list>div {border-bottom:1px solid #b3af9038}
.controls-list dt {color:#5d716f}
.touch-intro {color:#526d6e;border-color:#b3af9066;background:#f1ecd9;border-radius:6px;line-height:1.8}
.touch-help {color:#526d6e}
.chart-frame {background:#dae5d5;border:1.5px solid #b1a583;border-radius:5px;box-shadow:0 2px 0 #b5ab8f45}
.chart-frame canvas {background:#dce7d9}
.chart-compass {color:#416674;text-shadow:0 1px 0 #fffaf0;top:12px;right:12px}
.chart-legend {color:#617575;font-size:10px}
.chart-legend .legend-ship {background:#285b73}
.chart-legend .legend-fragment {background:#8d72c4}
.chart-legend .legend-shop {border-color:#ad762c;background:#fff7e9}
.notebook-panel h2 {font-size:30px}
.notebook-panel .panel-intro {margin-bottom:17px}
.notebook-entry {gap:17px;border-top:1px solid #b3af9060;padding:23px 0 3px}
.entry-number {
  width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;padding:0;
  border:1px solid #b5a574;border-radius:50%;font-size:11px;color:#90743f;background:#f3e8ca;
}
.notebook-entry h3 {color:#3b5b63;font-size:14px;margin-top:4px}
.notebook-entry p {color:#627573;line-height:1.85;font-size:13px}
.notebook-placeholder p {color:#7b8776}
.notebook-panel .primary-button {margin-top:18px}
.workshop-wallet {color:#947332;background:#eee5c8;border:1px solid #b8ab7e66;border-radius:6px;padding:8px 10px;width:fit-content;margin-top:-7px}
.workshop-wallet svg {stroke:#a5732a;fill:#f0ce69}
.upgrade {background:#fffaf0;border:1px solid #b3af9066;border-radius:6px 12px 6px 12px;padding:12px 14px;gap:13px}
.upgrade:not(:disabled):hover {background:#edf0df;border-color:#6e998f;box-shadow:0 2px 0 #6e998f40}
.upgrade:disabled {opacity:1;background:#f5f0e1;border-color:#b3af904d}
.upgrade:disabled .upgrade-symbol {color:#819387;background:#e8ebde}
.upgrade:disabled .upgrade-price {color:#7b795f;background:#e7e2cd}
.upgrade:disabled strong {color:#607574}
.upgrade-symbol {color:#4d8484;background:#e4eee1;border:1px solid #849c8860;border-radius:50%;width:35px;height:35px;display:grid;place-items:center;font-size:25px;flex-shrink:0}
.upgrade-symbol svg {width:23px;height:23px;stroke-width:1.5}
.upgrade strong {color:#365a63}
.upgrade small {color:#647770}
.upgrade-price {color:#986e25;background:#f3e6ba;padding:5px 7px;border-radius:5px}
.upgrade-price::after {color:#bc8f38}
.compact-panel {padding-top:7px}
.outcome-icon {stroke:#52898b;fill:#e2eada}
.win-icon {stroke:#8d72c4;fill:#ded1f1}
.outcome-summary {color:#637575;border-color:#b3af9066}
.outcome-summary strong {color:#8065ac}
.modal-open .navigation,.modal-open .tools,.modal-open .ship-hud,.modal-open .zone-readout {opacity:.55}
.no-script {background:var(--paper);color:var(--ink)}

/* A small helm and brass-rimmed controls float over the water on touch screens. */
@media(pointer:coarse),(max-width:600px) {
  .joystick-ring {
    border:2px solid #fff8e9b3;background:#1e526a4d;box-shadow:0 0 0 1px #2a566a99,inset 0 0 0 17px #fff7e912;
    backdrop-filter:none;
  }
  .helm-mark {width:100%;height:100%;fill:none;stroke:#fff8e9a3;stroke-width:2;stroke-linecap:round}
  .joystick-knob {width:44px;height:44px;border:2px solid #fffaf0;background:#f0e2bddd;box-shadow:0 3px 0 #355c6477,0 3px 13px #003a4833}
  .joystick-knob::after {content:"";position:absolute;inset:8px;border:1px solid #9a916ca6;border-radius:50%}
  .joystick-label {color:#fff8e9;font-weight:700;text-shadow:0 1px 3px #234f68;font-size:10px;letter-spacing:.2px}
  .touch-button {
    color:#fff8e9;background:#245e75c9;border:2px solid #f8ebc5d9;
    box-shadow:0 3px 0 #254a56a8,inset 0 0 0 4px #f9ebc526;backdrop-filter:none;
  }
  .touch-button:active,.touch-button.is-pressed,.touch-button.is-held {background:#ebd9a8;color:#285367;box-shadow:0 1px 0 #254a5680,inset 0 0 0 4px #fff8e970}
  .touch-dash.is-cooling {opacity:1;background:#335d718c;color:#bdd0d1;border-color:#bfd0c980;box-shadow:0 1px 0 #254a5670,inset 0 0 0 4px #ffffff0c}
}
/* A narrow desktop pane still has a keyboard. Only coarse primary pointers select touch instructions. */
@media(pointer:fine) {
  .control-summary {display:grid}
  .controls-list {display:block}
  .touch-intro,.touch-help {display:none}
}
@media(max-width:800px) {
  .navigation {gap:12px;padding:0 13px 0 9px;min-height:46px}
  .home-link {font-size:9px;letter-spacing:1px}
  h1 {font-size:19px}
  .tools {padding:4px;gap:2px}
  .tools .icon-button {width:35px;height:36px}
  .tools .notebook-tool {width:auto;padding:0 10px;font-size:10px;gap:5px}
  .zone-readout {top:74px;left:19px}
  .ship-hud {gap:13px;padding:12px 16px}
  .health-track {width:76px}
}
@media(max-width:700px) {
  .home-link span {display:none}
  .navigation {gap:9px;padding:0 13px 0 7px}
  .nav-divider {display:none}
  .tools .notebook-tool {
    position:fixed;right:max(14px,env(safe-area-inset-right));top:76px;height:38px;
    padding:0 12px;border:1.5px solid #806646a6;border-radius:6px 12px 6px 12px;
    box-shadow:0 3px 0 #4f52403a,0 5px 16px #00294826;
  }
}
@media(max-width:600px) {
  h1 {display:block;font-size:18px}
  .navigation {min-height:44px}
  .home-link svg {width:25px;height:25px}
  .tools {padding:3px;gap:2px}
  .tools .icon-button {width:36px;height:36px}
  .tools .notebook-tool {width:auto;height:38px;top:76px}
  .zone-readout {font-size:10px;padding:6px 9px}
  .ship-hud {padding:10px 12px;gap:11px}
  .health-track {width:66px;height:9px}
  .health-status {gap:6px}
  .health-status svg {width:17px}
  .resource {font-size:12px;gap:5px}
  .resource svg {width:20px;height:20px}
  .fragments-status .fragment-icon {width:20px;height:20px}
  .game-dialog {max-width:calc(100vw - 28px);border-radius:6px 21px 6px 21px}
  .dialog-content {padding:0 25px 25px}
  .dialog-heading {height:51px;padding:8px 15px 0 25px}
  .panel h2 {font-size:28px}
  .start-heading h2 {font-size:28px}
  .start-compass {width:50px;height:50px}
  .control-summary {padding:14px 7px;gap:6px}
  .key-cluster {gap:2px}
  .control-summary kbd {min-width:22px;padding:5px}
  .notebook-panel h2 {font-size:26px}
  .notebook-entry {gap:13px}
  .upgrade {padding:11px;gap:10px}
  .upgrade-symbol {width:31px;height:31px;font-size:24px}
}
@media(max-width:600px) and (orientation:portrait) {
  .tools .notebook-tool {top:max(129px,calc(env(safe-area-inset-top) + 111px))}
  .zone-readout {top:max(135px,calc(env(safe-area-inset-top) + 117px));left:max(14px,env(safe-area-inset-left));max-width:calc(100vw - 154px)}
  .zone-readout #zone-name {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ship-hud {border-radius:6px 14px 6px 14px}
}
@media(max-width:380px) {
  .navigation {gap:5px;padding-right:10px}
  h1 {font-size:15px}
  .tools .icon-button {width:32px;height:36px}
  .tools .notebook-tool {width:auto}
  .dialog-content {padding:0 20px 23px}
  .dialog-heading {padding-left:20px}
  .start-heading {gap:12px}
  .start-heading h2 {font-size:25px}
  .start-compass {width:44px;height:44px}
}
@media(max-height:540px) {
  .tools .notebook-tool {top:67px;height:34px}
  .zone-readout {top:67px;padding:5px 9px}
  .ship-hud {padding:10px 14px}
  .dialog-heading {height:47px;padding-top:5px}
  .dialog-content {max-height:calc(100dvh - 76px);padding-bottom:22px}
  .game-dialog.is-start {width:480px}
  .is-start .start-heading h2 {font-size:25px}
  .is-start .panel-intro {font-size:12px;margin:10px 0 13px}
  .is-start .control-summary {padding:11px 9px;margin-bottom:16px}
  .is-start .start-footnote {display:none}
  .is-map .dialog-content {max-height:calc(100dvh - 66px);padding-bottom:16px}
  .is-map .panel h2 {font-size:24px}
}
@keyframes chart-unfold {from {opacity:0;translate:0 7px}to {opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important}
}