/* Port Authority case desk — intentionally scoped so the shared game collection stays untouched. */
.harbor-page {
  --harbor-ink: #18262a;
  --harbor-navy: #173a43;
  --harbor-deep: #0d252d;
  --harbor-water: #2a6772;
  --harbor-water-light: #6da6a4;
  --harbor-paper: #efe6d2;
  --harbor-paper-dark: #d8c9aa;
  --harbor-red: #a64736;
  --harbor-gold: #c99b4a;
  --harbor-rule: rgba(26, 48, 52, .28);
  min-width: 300px;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--harbor-ink);
  background:
    linear-gradient(rgba(15, 42, 48, .93), rgba(8, 29, 36, .97)),
    url("/assets/lab/harbor-cover.webp") center 24% / cover fixed,
    #102d35;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
}

.harbor-page *, .harbor-page *::before, .harbor-page *::after { box-sizing: border-box; }
.harbor-page button, .harbor-page a, .harbor-page summary { -webkit-tap-highlight-color: transparent; }
.harbor-page button { font: inherit; }

.harbor-page .harbor-shell {
  width: min(100%, 1440px);
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    max(18px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(30px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  display: grid;
  gap: 14px;
}
.harbor-page .harbor-shell > *, .harbor-page .harbor-case-strip, .harbor-page .harbor-levels { min-width: 0; }

.harbor-page .harbor-header {
  min-height: 112px;
  padding: 18px clamp(18px, 3vw, 34px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  overflow: hidden;
  position: relative;
  color: var(--harbor-paper);
  border: 1px solid rgba(217, 193, 145, .52);
  border-radius: 3px 3px 16px 3px;
  background:
    linear-gradient(90deg, rgba(9, 31, 37, .96) 0 53%, rgba(9, 31, 37, .67)),
    url("/assets/lab/harbor-cover.webp") center 56% / cover;
  box-shadow: 0 16px 35px rgba(0, 0, 0, .28), inset 0 0 0 4px rgba(242, 223, 184, .06);
}

.harbor-page .harbor-header::after {
  content: "PORT AUTHORITY · 1936";
  position: absolute;
  right: 22px;
  bottom: 8px;
  color: rgba(239, 230, 210, .38);
  font: 700 9px/1.2 Consolas, monospace;
  letter-spacing: .22em;
}

.harbor-page .harbor-brand { min-width: 0; display: flex; align-items: center; gap: 17px; }
.harbor-page .harbor-brand > div { min-width: 0; }
.harbor-page .harbor-emblem {
  flex: 0 0 62px;
  width: 62px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--harbor-gold);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px rgba(201, 155, 74, .12);
}
.harbor-page .harbor-emblem::before { content: "⚓"; color: var(--harbor-gold); font: 32px/1 Georgia, serif; }
.harbor-page .harbor-emblem i { position: absolute; width: 46px; height: 1px; background: rgba(201,155,74,.6); transform: rotate(-25deg); }
.harbor-page .harbor-eyebrow { margin: 0 0 5px; color: var(--harbor-gold); font: 700 10px/1.3 Consolas, monospace; letter-spacing: .18em; }
.harbor-page .harbor-brand h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); font-weight: 900; line-height: 1; letter-spacing: .1em; text-shadow: 0 2px 14px #051417; }
.harbor-page .harbor-brand h1 + p { margin: 10px 0 0; color: #d6d1c4; font-size: 13px; letter-spacing: .04em; }

.harbor-page .back-link {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(239, 230, 210, .52);
  border-radius: 2px;
  color: var(--harbor-paper);
  background: rgba(8, 31, 37, .76);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .04em;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.harbor-page .back-link svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.harbor-page .back-link:hover { border-color: var(--harbor-gold); background: rgba(117, 65, 43, .78); }

.harbor-page .harbor-case-strip,
.harbor-page .harbor-statusbar,
.harbor-page .passenger-queue,
.harbor-page .dock-card,
.harbor-page .sea-panel,
.harbor-page .harbor-briefing,
.harbor-page .harbor-legend,
.harbor-page .harbor-actions,
.harbor-page .harbor-complete {
  border: 1px solid rgba(41, 52, 48, .38);
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, rgba(70, 55, 35, .018) 0 1px, transparent 1px 4px),
    var(--harbor-paper);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .19);
}

.harbor-page .harbor-case-strip { padding: 12px 15px 15px; }
.harbor-page .case-strip-heading { margin-bottom: 10px; display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.harbor-page .case-strip-heading > div { display: flex; align-items: baseline; gap: 10px; }
.harbor-page .case-strip-heading span { color: var(--harbor-red); font: 700 9px/1 Consolas, monospace; letter-spacing: .15em; }
.harbor-page .case-strip-heading h2 { margin: 0; font-size: 16px; letter-spacing: .12em; }
.harbor-page .case-strip-heading p { margin: 0; color: #665f50; font-size: 11px; }

.harbor-page .harbor-levels { display: grid; grid-template-columns: repeat(10, minmax(42px, 1fr)); gap: 7px; overflow-x: auto; scrollbar-width: thin; }
.harbor-page .harbor-levels button {
  min-width: 42px;
  min-height: 44px;
  padding: 3px;
  position: relative;
  border: 1px solid #8c826d;
  border-radius: 2px;
  color: #4f594f;
  background: rgba(255, 252, 240, .46);
  font: 800 13px/1 Consolas, monospace;
  cursor: pointer;
}
.harbor-page .harbor-levels button::after { content: ""; position: absolute; inset: 4px; pointer-events: none; border: 1px solid rgba(79, 89, 79, .2); }
.harbor-page .harbor-levels button.active { color: #f4ead5; border-color: var(--harbor-red); background: var(--harbor-red); box-shadow: 0 3px 0 #783326; }
.harbor-page .harbor-levels button.active::after { border-color: rgba(255,255,255,.36); }
.harbor-page .harbor-levels button:disabled { color: #8b877e; border-style: dashed; background: rgba(94, 91, 84, .12); cursor: not-allowed; opacity: .58; }
.harbor-page .harbor-levels button:disabled::before { content: "×"; position: absolute; right: 5px; top: 3px; color: #867a65; font-size: 9px; }

.harbor-page .harbor-statusbar {
  overflow: hidden;
  display: grid;
  grid-template-columns: .9fr .8fr 1.5fr;
  gap: 0;
  background: #ded2ba;
}
.harbor-page .harbor-statusbar > div { min-width: 0; padding: 11px 15px; display: grid; grid-template-columns: 1fr; align-content: center; gap: 3px; background: var(--harbor-paper); }
.harbor-page .harbor-statusbar > div + div { border-left: 1px solid var(--harbor-rule); }
.harbor-page .harbor-statusbar span:not(.harbor-progress-track) { color: #786b56; font: 700 9px/1.2 Consolas, monospace; letter-spacing: .12em; }
.harbor-page .harbor-statusbar strong { min-width: 0; overflow: hidden; color: var(--harbor-navy); font-size: 14px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.harbor-page .harbor-statusbar .dispatch-readout { position: relative; padding-left: 38px; }
.harbor-page .dispatch-readout::before { content: "✦"; position: absolute; left: 15px; top: 50%; color: var(--harbor-red); transform: translateY(-50%); }
.harbor-page .harbor-progress-track { height: 3px; margin-top: 4px; overflow: hidden; border-radius: 4px; background: #c4b99f; }
.harbor-page .harbor-progress-track i { display: block; width: var(--progress, 0%); height: 100%; background: var(--harbor-red); transition: width 220ms ease; }

.harbor-page .harbor-game { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 310px); gap: 14px; align-items: start; }
.harbor-page .harbor-playfield, .harbor-page .harbor-controls { min-width: 0; display: grid; gap: 12px; align-content: start; }

.harbor-page .passenger-queue {
  min-height: 70px;
  padding: 9px 13px;
  display: grid;
  grid-template-columns: minmax(108px, auto) auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.harbor-page .manifest-label { padding-right: 12px; display: grid; gap: 3px; border-right: 1px solid var(--harbor-rule); }
.harbor-page .manifest-label span { color: var(--harbor-red); font: 700 8px/1 Consolas, monospace; letter-spacing: .12em; }
.harbor-page .manifest-label strong { color: var(--harbor-navy); font-size: 15px; letter-spacing: .1em; }
.harbor-page .queue-label { padding: 5px 7px; color: var(--harbor-paper); background: var(--harbor-red); font: 700 10px/1 Consolas, monospace; letter-spacing: .08em; transform: rotate(-2deg); }
.harbor-page .passenger-queue > div#passengerQueue { min-width: 0; padding: 4px 2px; display: flex; align-items: end; gap: 7px; overflow: hidden; }
.harbor-page .passenger {
  flex: 0 0 30px;
  width: 30px;
  height: 35px;
  position: relative;
  display: grid;
  place-items: end center;
  border: 0;
  border-radius: 15px 15px 4px 4px;
  color: #152329;
  font: 900 9px/14px sans-serif;
  box-shadow: inset 0 -10px 0 rgba(27, 37, 39, .17), 0 2px 3px rgba(23, 32, 34, .2);
}
.harbor-page .passenger::before { content: ""; width: 11px; height: 11px; position: absolute; top: 4px; border: 2px solid rgba(255,255,255,.55); border-radius: 50%; background: inherit; }
.harbor-page .passenger.front { outline: 2px solid var(--harbor-red); outline-offset: 3px; }
.harbor-page .passenger.front::after { content: "1"; width: 15px; height: 15px; position: absolute; right: -7px; top: -7px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--harbor-red); font: 700 9px/1 Consolas, monospace; }
.harbor-page .passenger-queue > span:last-child { color: #655e50; font: 700 11px/1 Consolas, monospace; white-space: nowrap; }

.harbor-page .dock-card, .harbor-page .sea-panel { padding: 12px; }
.harbor-page .stage-heading { min-height: 38px; margin-bottom: 10px; display: flex; align-items: center; gap: 9px; }
.harbor-page .stage-heading > span { width: 29px; height: 29px; display: grid; place-items: center; color: var(--harbor-paper); background: var(--harbor-navy); font: 800 11px/1 Consolas, monospace; transform: rotate(-2deg); }
.harbor-page .stage-heading > div { display: grid; gap: 1px; }
.harbor-page .stage-heading p { margin: 0; color: var(--harbor-red); font: 700 8px/1 Consolas, monospace; letter-spacing: .13em; }
.harbor-page .stage-heading h2 { margin: 0; color: var(--harbor-navy); font-size: 16px; letter-spacing: .1em; }
.harbor-page .stage-heading small { margin-left: auto; color: #746d5f; font-size: 10px; }

.harbor-page .dock-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.harbor-page .dock-slot {
  min-width: 0;
  min-height: 84px;
  padding: 7px;
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 4px;
  overflow: hidden;
  border: 1px solid #706c5e;
  border-radius: 1px;
  background:
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.14) 50%, transparent 52%),
    repeating-linear-gradient(90deg, #695743 0 17px, #857057 17px 19px);
}
.harbor-page .dock-slot::after { content: ""; position: absolute; inset: 27px 0 auto; height: 8px; background: repeating-linear-gradient(90deg, #b3a582 0 10px, #514838 10px 12px); box-shadow: 0 2px 3px rgba(0,0,0,.35); }
.harbor-page .dock-slot > span:first-child { z-index: 2; width: max-content; padding: 2px 5px; color: #eee4d1; background: rgba(23,42,44,.83); font: 700 8px/1.3 Consolas, monospace; letter-spacing: .05em; }
.harbor-page .dock-slot small { z-index: 2; overflow: hidden; padding: 2px 3px; color: #fff8e8; background: rgba(19,32,33,.73); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.harbor-page .sea-panel { overflow: hidden; background: var(--harbor-paper); }
.harbor-page .sea-instruction { margin: -2px 0 9px 38px; color: #6e685c; font-size: 10px; line-height: 1.45; }
.harbor-page .sea-chart {
  min-width: 0;
  padding: clamp(8px, 1.4vw, 16px);
  position: relative;
  overflow: hidden;
  border: 1px solid #173b43;
  background:
    linear-gradient(rgba(23, 71, 81, .77), rgba(14, 48, 59, .9)),
    url("/assets/lab/harbor-water.webp") center / cover,
    #225c68;
  box-shadow: inset 0 0 38px rgba(3, 25, 32, .58);
}
.harbor-page .sea-chart::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background: repeating-linear-gradient(174deg, transparent 0 20px, rgba(177, 220, 211, .23) 21px, transparent 22px 39px);
}
.harbor-page .chart-compass { position: absolute; right: 9px; top: 7px; z-index: 2; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(236,224,194,.63); border-radius: 50%; color: #eee0bf; font: 700 9px/1 Georgia, serif; }
.harbor-page .chart-compass::before { content: ""; position: absolute; top: -4px; border-width: 0 3px 5px; border-style: solid; border-color: transparent transparent #eee0bf; }
.harbor-page .sea-grid {
  width: min(100%, 850px);
  margin: auto;
  aspect-ratio: var(--columns) / var(--rows);
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  background-image:
    linear-gradient(rgba(224, 237, 223, .095) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 237, 223, .095) 1px, transparent 1px);
  background-size: calc(100% / var(--columns)) calc(100% / var(--rows));
}

.harbor-page .sea-ship { position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; display: grid; place-items: center; color: #fff; background: transparent; cursor: pointer; }
.harbor-page .sea-ship::after { content: ""; position: absolute; z-index: 0; width: 76%; height: 14%; bottom: 17%; border-radius: 50%; background: rgba(4, 25, 31, .32); filter: blur(2px); }
.harbor-page .sea-ship:hover .harbor-boat, .harbor-page .sea-ship:focus-visible .harbor-boat { filter: brightness(1.1); transform: translateY(-2px); }
.harbor-page .sea-ship:focus-visible { z-index: 5; outline: 3px solid #fff3cf; outline-offset: -2px; background: rgba(232, 212, 168, .13); }
.harbor-page .ship-arrow { position: absolute; z-index: 4; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; color: #fff7de; background: rgba(9,40,47,.78); font: 900 11px/1 sans-serif; text-shadow: 0 1px 2px #000; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.harbor-page .ship-arrow.up { top: 0; left: calc(50% - 10px); }
.harbor-page .ship-arrow.down { bottom: 0; left: calc(50% - 10px); }
.harbor-page .ship-arrow.left { left: 0; top: calc(50% - 10px); }
.harbor-page .ship-arrow.right { right: 0; top: calc(50% - 10px); }

.harbor-page .harbor-boat {
  width: 84%;
  height: 55%;
  padding: 5% 12% 8%;
  z-index: 2;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 48% 52% 42% 42% / 28% 28% 72% 72%;
  color: #152529;
  box-shadow: inset 0 -7px 0 rgba(35,37,32,.2), inset 0 2px 0 rgba(255,255,255,.38), 0 5px 7px rgba(3,23,29,.4);
  transition: transform 150ms ease, filter 150ms ease;
}
.harbor-page .boat-sprite {
  position: absolute;
  z-index: 0;
  inset: -35% -14%;
  background: url("/assets/lab/boat.webp") center / contain no-repeat;
  transform: rotate(var(--boat-rotation, 0deg));
  transform-origin: center;
  filter: drop-shadow(0 5px 4px rgba(2, 22, 28, .5));
}
.harbor-page .harbor-boat.direction-right { --boat-rotation: 90deg; }
.harbor-page .harbor-boat.direction-down { --boat-rotation: 180deg; }
.harbor-page .harbor-boat.direction-left { --boat-rotation: -90deg; }
.harbor-page .harbor-boat.compact { width: 90%; height: 25px; margin: 16px auto 3px; padding: 3px 8%; }
.harbor-page .harbor-boat.compact .boat-sprite { inset: -75% -18%; }
.harbor-page .boat-seats { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(2px, 1fr)); gap: 2px; }
.harbor-page .boat-seats { z-index: 2; padding: 2px; border-radius: 2px; background: rgba(245, 233, 202, .78); }
.harbor-page .boat-seats i { aspect-ratio: 1; border: 1px solid rgba(18, 37, 40, .52); border-radius: 1px; background: rgba(248, 241, 217, .86); }
.harbor-page .boat-seats i.filled { border-radius: 50%; background: #17343a; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.harbor-page .boat-flag { position: absolute; z-index: 3; left: 2px; bottom: 0; width: 13px; height: 13px; display: grid; place-items: center; border-radius: 50%; color: #fff8e6; background: #19373e; font: 900 7px/1 sans-serif; }
.harbor-page .sea-ship.blocked { opacity: .56; }
.harbor-page .sea-ship.blocked .harbor-boat { filter: saturate(.55); }
.harbor-page .sea-ship.blocked::before { content: "×"; position: absolute; z-index: 5; right: 8%; top: 8%; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: #f6e7cb; background: #843b31; font: 900 11px/1 sans-serif; }
.harbor-page .sea-ship.hinted { z-index: 4; animation: harbor-page-hint .72s ease-in-out infinite alternate; }
.harbor-page .sea-ship.hinted .harbor-boat { outline: 3px solid #ffe6a2; outline-offset: 2px; }

.harbor-page .color-red { background: #bd594a; }
.harbor-page .color-blue { background: #4f819e; }
.harbor-page .color-yellow { background: #d4a749; }
.harbor-page .color-green { background: #5e866e; }
.harbor-page .color-purple { background: #806b8d; }
.harbor-page .color-orange { background: #c57b42; }
.harbor-page .harbor-boat { background: transparent; border-color: transparent; box-shadow: none; }
.harbor-page .harbor-boat.color-blue .boat-sprite { filter: hue-rotate(185deg) saturate(.92) drop-shadow(0 5px 4px rgba(2, 22, 28, .5)); }
.harbor-page .harbor-boat.color-yellow .boat-sprite { filter: hue-rotate(52deg) saturate(.92) brightness(1.12) drop-shadow(0 5px 4px rgba(2, 22, 28, .5)); }
.harbor-page .harbor-boat.color-green .boat-sprite { filter: hue-rotate(106deg) saturate(.8) drop-shadow(0 5px 4px rgba(2, 22, 28, .5)); }
.harbor-page .harbor-boat.color-purple .boat-sprite { filter: hue-rotate(258deg) saturate(.76) drop-shadow(0 5px 4px rgba(2, 22, 28, .5)); }
.harbor-page .harbor-boat.color-orange .boat-sprite { filter: hue-rotate(24deg) saturate(.95) drop-shadow(0 5px 4px rgba(2, 22, 28, .5)); }

.harbor-page .harbor-briefing { overflow: hidden; }
.harbor-page .harbor-briefing summary { min-height: 58px; padding: 12px 15px; display: grid; gap: 3px; position: relative; cursor: pointer; list-style: none; }
.harbor-page .harbor-briefing summary::-webkit-details-marker { display: none; }
.harbor-page .harbor-briefing summary::after { content: "+"; position: absolute; right: 15px; top: 18px; color: var(--harbor-red); font: 800 20px/1 Consolas, monospace; }
.harbor-page .harbor-briefing[open] summary::after { content: "−"; }
.harbor-page .harbor-briefing summary span { color: var(--harbor-red); font: 700 9px/1 Consolas, monospace; letter-spacing: .15em; }
.harbor-page .harbor-briefing summary strong { color: var(--harbor-navy); font-size: 17px; letter-spacing: .08em; }
.harbor-page .harbor-briefing ol { margin: 0; padding: 0 15px 12px; display: grid; gap: 8px; list-style: none; }
.harbor-page .harbor-briefing li { padding-top: 8px; display: grid; grid-template-columns: 28px 1fr; gap: 9px; border-top: 1px solid var(--harbor-rule); }
.harbor-page .harbor-briefing li > span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--harbor-red); border-radius: 50%; color: var(--harbor-red); font: 800 10px/1 Consolas, monospace; }
.harbor-page .harbor-briefing li p { margin: 0; color: #675f50; font-size: 11px; line-height: 1.45; }
.harbor-page .harbor-briefing li strong { display: block; margin-bottom: 2px; color: var(--harbor-ink); font-size: 12px; }
.harbor-page .briefing-warning { margin: 0 15px 15px; padding: 9px; display: flex; gap: 8px; color: #6f332d; border: 1px dashed rgba(166, 71, 54, .55); background: rgba(166, 71, 54, .08); font-size: 10px; line-height: 1.4; }
.harbor-page .briefing-warning span { flex: 0 0 18px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--harbor-red); font: 800 10px/1 sans-serif; }

.harbor-page .harbor-legend { padding: 13px 15px; display: grid; grid-template-columns: 1fr; gap: 8px; }
.harbor-page .harbor-legend h2 { margin: 0 0 2px; color: var(--harbor-navy); font-size: 14px; letter-spacing: .12em; }
.harbor-page .harbor-legend > div { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 8px; }
.harbor-page .harbor-legend > div > span { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #837b69; }
.harbor-page .legend-arrow { color: #fff; background: var(--harbor-navy); font-weight: 900; }
.harbor-page .legend-clear { background: radial-gradient(circle, #f6d47e 0 22%, #547c6a 24% 65%, transparent 67%); }
.harbor-page .legend-blocked { background: linear-gradient(45deg, transparent 44%, var(--harbor-red) 45% 55%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--harbor-red) 45% 55%, transparent 56%); }
.harbor-page .harbor-legend p { margin: 0; display: grid; gap: 1px; }
.harbor-page .harbor-legend strong { color: var(--harbor-ink); font-size: 11px; }
.harbor-page .harbor-legend small { color: #746c5d; font-size: 9px; }

.harbor-page .harbor-actions { padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.harbor-page .harbor-actions button, .harbor-page .harbor-complete > button { min-height: 48px; padding: 0 12px; border-radius: 2px; font-weight: 800; letter-spacing: .04em; cursor: pointer; }
.harbor-page .harbor-actions .secondary-button { border: 1px solid #536561; color: var(--harbor-navy); background: transparent; }
.harbor-page .harbor-actions .primary-button { grid-column: 1 / -1; border: 1px solid #7b3027; color: #fff5df; background: var(--harbor-red); box-shadow: inset 0 0 0 3px rgba(255,255,255,.08); }
.harbor-page .harbor-actions button:hover:not(:disabled), .harbor-page .harbor-complete > button:hover { filter: brightness(1.08); }
.harbor-page .harbor-actions button:disabled { opacity: .38; cursor: not-allowed; }

.harbor-page .harbor-complete { padding: 14px; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; border-color: var(--harbor-red); background: var(--harbor-paper); }
.harbor-page .harbor-complete[hidden] { display: none; }
.harbor-page .harbor-complete .result-symbol { width: 45px; height: 45px; margin: 0; display: grid; place-items: center; border: 2px solid var(--harbor-red); border-radius: 50%; color: var(--harbor-red); font-size: 25px; }
.harbor-page .harbor-complete .result-kicker { margin: 0; color: var(--harbor-red); font: 700 8px/1 Consolas, monospace; letter-spacing: .15em; }
.harbor-page .harbor-complete h2 { margin: 3px 0 0; color: var(--harbor-navy); font-size: 17px; }
.harbor-page .harbor-complete p:not(.result-kicker) { margin: 3px 0 0; color: #665f52; font-size: 10px; line-height: 1.4; }
.harbor-page .harbor-complete > button { grid-column: 1 / -1; border: 1px solid var(--harbor-navy); color: #f4ead3; background: var(--harbor-navy); }

.harbor-page :is(button, a, summary):focus-visible { outline: 3px solid #ffe6a2; outline-offset: 3px; }

@keyframes harbor-page-hint {
  to { filter: brightness(1.25); }
}

@media (max-width: 1000px) {
  .harbor-page .harbor-game { grid-template-columns: 1fr; }
  .harbor-page .harbor-controls { grid-template-columns: 1fr 1fr; }
  .harbor-page .harbor-briefing { grid-row: span 2; }
  .harbor-page .harbor-complete { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .harbor-page .harbor-shell { padding-inline: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)); gap: 10px; }
  .harbor-page .harbor-header { min-height: 94px; padding: 14px; }
  .harbor-page .harbor-header::after, .harbor-page .harbor-brand h1 + p { display: none; }
  .harbor-page .harbor-emblem { flex-basis: 46px; width: 46px; }
  .harbor-page .harbor-emblem::before { font-size: 24px; }
  .harbor-page .harbor-emblem i { width: 34px; }
  .harbor-page .harbor-brand { gap: 10px; }
  .harbor-page .harbor-brand h1 { font-size: 31px; }
  .harbor-page .back-link { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .harbor-page .back-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .harbor-page .case-strip-heading p { display: none; }
  .harbor-page .harbor-levels { padding-bottom: 4px; grid-template-columns: repeat(10, 44px); }
  .harbor-page .harbor-statusbar { grid-template-columns: 1fr 1fr; }
  .harbor-page .harbor-statusbar > div:nth-child(2) { border-left: 1px solid var(--harbor-rule); }
  .harbor-page .harbor-statusbar .dispatch-readout { grid-column: 1 / -1; border-top: 1px solid var(--harbor-rule); border-left: 0; }
  .harbor-page .passenger-queue { grid-template-columns: auto 1fr auto; gap: 9px; }
  .harbor-page .manifest-label { grid-column: 1 / -1; padding: 0 0 7px; grid-template-columns: auto 1fr; align-items: baseline; border-right: 0; border-bottom: 1px solid var(--harbor-rule); }
  .harbor-page .queue-label { font-size: 9px; }
  .harbor-page .passenger { flex-basis: 27px; width: 27px; height: 32px; }
  .harbor-page .dock-card, .harbor-page .sea-panel { padding: 9px; }
  .harbor-page .stage-heading small { display: none; }
  .harbor-page .sea-instruction { margin-left: 0; }
  .harbor-page .harbor-controls { grid-template-columns: 1fr; }
  .harbor-page .harbor-briefing { grid-row: auto; }
  .harbor-page .harbor-complete { grid-column: auto; }
}

@media (max-width: 430px) {
  .harbor-page .harbor-shell { padding-inline: max(8px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .harbor-page .harbor-header { min-height: 80px; }
  .harbor-page .harbor-emblem { display: none; }
  .harbor-page .harbor-eyebrow { font-size: 8px; }
  .harbor-page .harbor-brand h1 { font-size: 28px; }
  .harbor-page .harbor-case-strip { padding: 10px; }
  .harbor-page .harbor-levels { grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; }
  .harbor-page .harbor-levels button { min-width: 0; }
  .harbor-page .harbor-statusbar > div { padding: 9px 10px; }
  .harbor-page .harbor-statusbar strong { font-size: 12px; }
  .harbor-page .dock-row { gap: 4px; }
  .harbor-page .dock-slot { min-height: 69px; padding: 4px; }
  .harbor-page .dock-slot::after { top: 23px; }
  .harbor-page .dock-slot > span:first-child { font-size: 7px; }
  .harbor-page .harbor-boat.compact { height: 20px; margin-top: 13px; }
  .harbor-page .boat-seats { gap: 1px; }
  .harbor-page .sea-chart { padding: 5px; }
  .harbor-page .ship-arrow { width: 17px; height: 17px; font-size: 9px; }
  .harbor-page .ship-arrow.up { left: calc(50% - 8px); }
  .harbor-page .ship-arrow.down { left: calc(50% - 8px); }
  .harbor-page .ship-arrow.left { top: calc(50% - 8px); }
  .harbor-page .ship-arrow.right { top: calc(50% - 8px); }
  .harbor-page .sea-ship.blocked::before { right: 4%; top: 4%; width: 13px; height: 13px; font-size: 9px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .harbor-page .harbor-shell { padding-block: 8px; }
  .harbor-page .harbor-header { min-height: 70px; padding-block: 9px; }
  .harbor-page .harbor-brand h1 { font-size: 27px; }
  .harbor-page .harbor-emblem { flex-basis: 42px; width: 42px; }
  .harbor-page .harbor-case-strip { padding-block: 8px; }
  .harbor-page .harbor-levels button { min-height: 38px; }
  .harbor-page .harbor-controls { grid-template-columns: 1fr 1fr; }
  .harbor-page .harbor-briefing { grid-row: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .harbor-page *, .harbor-page *::before, .harbor-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}