/* Shared player controls, compact workspaces, and readable interaction states. */
.page-tabs {
  position:sticky;
  top:var(--masthead);
  z-index:24;
  background:#e9eef4;
  margin-bottom:16px;
  gap:22px;
}
.page-tabs button {padding-block:10px;}
.page-head {margin-bottom:15px;}
.page-head h1 {font-size:26px;}
main :is(section[id],details[id],.crew-card) {scroll-margin-top:calc(var(--masthead) + 66px);}
main :is(button,input,select,summary):focus-visible {
  outline:3px solid #315f91;
  outline-offset:3px;
}
.sidebar button:focus-visible {outline:2px solid #e5f2ff;outline-offset:3px;}
.sea-tabs button:not(:disabled):hover,
.tabs button:not(:disabled):hover,
.sailing-modes button:not(:disabled):hover,
.salvage-stages button:not(:disabled):hover,
.quantity-control button:not(:disabled):hover,
.speed-control button:not(:disabled):hover {
  background:#e1ecf9;
  color:#244b78;
  border-color:#97b3d5;
}
.sea-tabs button.active:not(:disabled):hover,
.tabs button.active:not(:disabled):hover,
.quantity-control button.active:not(:disabled):hover,
.sailing-modes button.active:not(:disabled):hover,
.salvage-stages button.active:not(:disabled):hover {
  background:#d5e4f6;
  color:#1d456f;
  border-color:#829fc6;
}
.btn.primary:not(:disabled):hover {background:#284e7d;color:#fff;}
.world-map-canvas :is(.world-port,.continent-name):focus-visible {
  outline-color:#e8f5ff;
  outline-offset:3px;
}
.ad-painted-grid .ad-cell:focus-visible,
.ad-painted-field .ad-fish-cell:focus-visible {
  outline-color:#f2fbff;
  outline-offset:-3px;
}

.atlas-horizon {padding:14px 17px;gap:13px 22px;margin-bottom:14px;}
.atlas-horizon .eyebrow {display:none;}
.atlas-horizon-title h2 {font-size:20px;margin-top:0;}
.atlas-progress {gap:11px 17px;}
.tide-panel {padding:9px 13px;gap:14px;margin-bottom:13px;}
.right-column .tide-panel {flex-wrap:wrap;gap:10px;}
.right-column .tide-panel>p {flex:1 1 110px;min-width:0;}
.right-column .tide-panel>.tide-phases {flex:1 1 100%;justify-content:space-between;margin:0;padding-left:0;border-left:0;}
.atlas-navigation {gap:10px;margin-bottom:12px;}
.continent-tabs {gap:5px;}
.continent-tabs button {min-height:34px;}
.world-chart .panel-head {padding:11px 15px;}
.world-chart .map-toolbar {padding:8px 12px;}
.world-chart .chart-tools button {min-width:32px;min-height:32px;}
.world-chart .chart-tools .map-fit {min-width:64px;}
.city-search button {min-height:36px;}

.play-next {padding:15px 19px;gap:18px;margin-bottom:15px;}
.play-next h2 {font-size:20px;margin:3px 0;}
.play-next p {margin:3px 0;}
.play-start {padding:25px;gap:22px;}
.ad-map-panel,.ad-controls {padding:19px;}
.ad-map-head {margin-bottom:13px;}
.treasure-workspace,.fishing-workspace,.dive-workspace {gap:16px;align-items:start;}
.fishing-workspace .ad-painted-field .ad-fish-cell {aspect-ratio:1.5;min-height:83px;}
.fishing-workspace .ad-fish-cell .fish-school {min-height:42px;max-height:58px;}
.ad-controls h3 {margin-bottom:15px;}
.ad-controls .ad-clues {margin-bottom:0;}
.crew-grid {align-items:start;}
.crew-development>summary {min-height:40px;}
.crew-development .ad-camp-focus {margin-block:14px;padding-block:13px;gap:10px;}
.crew-development .ad-camp-tasks {margin-top:14px;}
.crew-development .ad-camp-tasks>div {padding-block:11px;}
.ship-visual .ship-name {position:absolute;left:14px;right:14px;bottom:12px;font-size:18px;}
.ship-drawing.ship-portrait {container-type:size;}
.ship-rig-inner,
.ship-tier-portrait .ship-rig-inner {
  width:min(100%,calc(100cqh * 5 / 3));
  height:auto;
  aspect-ratio:5/3;
}
.survey-progress {display:grid;grid-template-columns:auto minmax(50px,1fr) auto;align-items:center;gap:10px;margin:14px 0;font-size:11px;color:#4e7197;}
.survey-progress .bar {height:4px;}
.survey-record {border-top:1px solid #d3dfed;margin-top:16px;padding-top:11px;color:#496d96;}
.survey-record summary {cursor:pointer;min-height:32px;font-size:11px;}
.survey-record p {font-size:11px;line-height:1.7;margin-top:8px;}
.survey-location h3 {display:flex;align-items:center;gap:6px;}
.survey-location .icon {flex:none;width:22px;height:22px;}
.treasure-workspace .survey-geo-grid {width:100%;}

@media(min-width:1101px) {
  .treasure-workspace:has(.survey-geo-grid) {
    grid-template-columns:minmax(0,clamp(410px,calc(100vh - 480px),660px)) minmax(250px,310px);
    justify-content:center;
  }
  .crew-grid:has(>.crew-card:only-child) {grid-template-columns:minmax(0,1fr);}
  .crew-grid>.crew-card:only-child {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .crew-grid>.crew-card:only-child>.crew-main {grid-column:1;grid-row:1;}
  .crew-grid>.crew-card:only-child>.crew-trait {grid-column:1;grid-row:2;}
  .crew-grid>.crew-card:only-child>.crew-training {grid-column:1;grid-row:3;}
  .crew-grid>.crew-card:only-child>.crew-learning {grid-column:2;grid-row:1/4;border-left:1px solid #dce5f0;border-top:0;}
  .crew-grid>.crew-card:only-child>.crew-development {grid-column:1/-1;}
}

.tavern-scene {min-height:188px;padding:21px 26px;margin-bottom:17px;}
.tavern-scene h2 {font-size:25px;margin-block:5px 9px;}
.tavern-scene small {margin-top:11px;}
.recruit-card {padding:17px;}
.recruit-skill {min-height:36px;margin-block:14px 10px;}
.ad-companion-grid {gap:15px;align-items:start;}
.ad-companion {display:grid;grid-template-columns:minmax(90px,.7fr) minmax(0,1.3fr);}
.ad-companion .ad-portrait {aspect-ratio:auto;min-height:270px;height:100%;}
.ad-companion .ad-portrait img {object-fit:contain;}
.ad-companion .ad-portrait .pill {left:6px;right:6px;bottom:8px;width:max-content;max-width:calc(100% - 12px);font-size:9px;white-space:normal;}
.ad-companion-info {min-width:0;padding:16px 13px;}
.ad-companion-info h2 {font-size:21px;margin:9px 0;}
.ad-companion-info p {font-size:11px;line-height:1.75;}
.ad-companion-effect {min-height:0;margin-top:8px;}
.ad-companion-info .btn {font-size:11px;line-height:1.5;padding:9px 6px;}
.ad-companion-panorama {height:115px;}

@media(min-width:1200px) {
  .atlas-horizon {grid-template-columns:minmax(220px,.7fr) minmax(0,2fr);align-items:center;}
  .atlas-progress {grid-template-columns:repeat(4,minmax(0,1fr));}
  .commodity-row {min-height:78px;padding-block:10px;}
}
@media(min-width:901px) {
  .play-controls {position:sticky;top:calc(var(--masthead) + 65px);}
}
@media(max-width:1150px) and (min-width:761px) {
  .ad-companion-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .ad-companion .ad-portrait {min-height:250px;}
}
@media(max-width:760px) {
  html {scroll-padding-bottom:84px;}
  .page-tabs {gap:7px;overflow:visible;margin-bottom:14px;}
  .page-tabs button {flex:1 1 0;min-width:0;white-space:normal;letter-spacing:0;font-size:10.5px;line-height:1.45;padding:10px 1px;}
  .page-tabs:after {display:none;}
  .page-head {margin-bottom:13px;}
  .page-head h1 {font-size:23px;}
  .atlas-horizon {padding:13px 14px;gap:11px;margin-bottom:13px;}
  .atlas-horizon-title h2 {font-size:18px;}
  .atlas-progress {gap:10px 15px;}
  .atlas-progress>div>span {font-size:9px;margin-bottom:4px;}
  .continent-tabs button {min-height:34px;font-size:10px;}
  .map-toolbar .tabs button {min-height:34px;}
  .map-destinations .map-select {min-height:34px;}
  .text-button {min-width:32px;min-height:32px;}
  .tide-panel {padding:9px 11px;gap:10px;}
  .tide-panel>.btn {min-height:34px;font-size:10px;}
  .play-next {padding:14px 15px;gap:9px;}
  .play-next h2 {font-size:18px;}
  .play-next>.btn {min-height:42px;}
  .play-next p {font-size:11px;}
  .ad-map-panel,.ad-controls {padding:15px;}
  .fishing-workspace .ad-painted-field .ad-fish-cell {aspect-ratio:.84;min-height:69px;}
  .fishing-workspace .ad-fish-cell .fish-school {min-height:34px;max-height:46px;}
  .ad-map-head {margin-bottom:11px;}
  .quantity-control button {min-width:34px;min-height:34px;}
  .tavern-scene {min-height:172px;padding:18px;margin-bottom:15px;}
  .tavern-scene h2 {font-size:23px;}
  .recruit-card {padding:16px;}
  .recruit-top h3 {font-size:23px;}
  .recruit-skill {min-height:0;margin-block:12px 9px;}
  .ad-companion-grid {grid-template-columns:1fr;gap:12px;}
  .ad-companion {grid-template-columns:110px minmax(0,1fr);}
  .ad-companion .ad-portrait {min-height:245px;}
  .ad-companion-info {padding:14px;}
  .ad-companion-info h2 {font-size:22px;}
  .ad-companion-info p {font-size:11px;}
  .ad-companion-info .btn {min-height:38px;}
  .ad-companion-panorama {height:100px;}
}
@media(max-width:370px) {
  .page-tabs {gap:3px;}
  .page-tabs button {font-size:10px;}
  .ad-companion {grid-template-columns:91px minmax(0,1fr);}
  .ad-companion-info {padding:12px;}
  .ship-visual .ship-name {font-size:17px;}
}