/* A compact captain's desk. The separate mobile layout starts at 950px. */
@media (min-width: 951px) {
  .content-page { padding-top: 16px; }
  .scene-banner,
  body[data-view="island"] .scene-banner {
    min-height: 106px;
    margin-bottom: 17px;
    padding: 15px 23px;
    border-width: 3px;
    background-position: center 43%;
  }
  .scene-banner h3 { font-size: 34px; margin: 3px 0 5px; }
  .scene-banner > span { font-size: 10px; }
  .scene-banner p { font-size: 16px; line-height: 1.4; margin: 0; }
  .content-intro { margin: 0 0 13px; min-height: 36px; }
  .content-intro h3 { font-size: 26px; }
  .content-intro button,
  .plan-shortcut { font-size: 16px; min-height: 36px; }
  .plan-shortcut { margin-top: 0; }
  .queue { margin-bottom: 13px; padding: 11px 14px; font-size: 16px; }

  /* Artwork identifies a building; its level, cost and action lead the row. */
  .illustrated-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .building-card.illustrated-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: center;
    border-width: 3px;
    overflow: visible;
  }
  .building-card .card-painting,
  .building-card .legacy-building {
    width: 96px;
    height: 106px;
    min-height: 0;
    max-height: none;
    margin: 10px 0 10px 10px;
    aspect-ratio: auto;
    object-fit: cover;
    border: 1px solid #997039;
    box-shadow: inset 0 0 0 2px #f8e6bb66, 0 2px 5px #68441f33;
  }
  .card-info,
  .ship-cards .card-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 8px;
    padding: 11px 14px;
    min-width: 0;
    border: 0;
    background: none;
  }
  .card-info:before { display: none; }
  .card-info h3,
  .ship-cards .card-info h3 {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
    padding: 0;
    min-height: 0;
    font-size: 25px;
    line-height: 1.12;
    overflow-wrap: anywhere;
  }
  .card-info .level,
  .ship-cards .card-info .level {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    margin: 0;
    padding: 4px 6px;
    white-space: nowrap;
    font-size: 17px;
  }
  .card-info .level small { font-size: 12px; }
  .illustrated-cards:not(.ship-cards) .card-info h3 { grid-column: 1 / -1; padding-right: 52px; }
  .card-info .costs {
    grid-column: 1 / -1;
    margin: 0;
    gap: 7px 10px;
    font-size: 16px;
    line-height: 1.4;
  }
  .card-info .costs img { width: 23px; height: 23px; }
  .card-info .duration { grid-column: 1; align-self: center; margin: 0; font-size: 16px; }
  .card-info > button {
    grid-column: 2;
    width: auto;
    min-width: 126px;
    min-height: 38px;
    margin: 0;
    padding: 8px 12px;
    font-size: 15px;
  }
  .card-info .card-explanation { position: static; margin: 0; min-height: 0; grid-column: 1 / -1; }
  .card-info .card-explanation:not([open]) { display: contents; }
  .card-info .card-explanation summary {
    position: absolute;
    left: -36px;
    right: auto;
    top: auto;
    bottom: 14px;
    width: 28px;
    height: 28px;
    font-size: 16px;
    background: #f7e4bbef;
    border-color: #946c36;
    box-shadow: 0 1px 4px #422b2544;
  }
  .card-info .card-explanation p { font-size: 16px; line-height: 1.5; margin: 0 0 4px; }

  /* The three vessels stay comparable without full-size painting panels. */
  .ship-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .ship-cards .building-card.illustrated-card { grid-template-columns: 1fr; }
  .ship-cards .building-card .card-painting {
    width: 140px;
    max-width: calc(100% - 20px);
    height: 112px;
    margin: 10px auto 0;
    background-size: 300% 300%;
    border: 1px solid #997039;
  }
  .ship-cards .card-info { gap: 10px 8px; }
  .ship-cards .card-info .card-explanation summary { left: auto; right: 16px; top: -35px; bottom: auto; }
  .ship-cards .card-info .ship-strength { grid-column: 1 / -1; margin: 0; font-size: 16px; gap: 14px; }
  .ship-cards .card-info form {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin: 0;
  }
  .ship-cards .card-info form input { margin: 0; width: 76px; min-height: 38px; font-size: 16px; }
  .ship-cards .card-info form .duration { grid-column: 2; font-size: 16px; }
  .ship-cards .card-info form button { grid-column: 1 / -1; min-height: 38px; margin: 0; font-size: 15px; }

  .progress-cards,
  .troop-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .progress-card,
  .troop-card { grid-template-columns: 94px minmax(0, 1fr); border-width: 3px; align-items: center; }
  .progress-card > img,
  .troop-card > img {
    width: 94px;
    height: 112px;
    min-height: 0;
    max-height: 112px;
    padding: 8px;
    border: 0;
    object-fit: contain;
  }
  .progress-card > div,
  .troop-card > div { padding: 14px; min-width: 0; }
  .progress-card > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .progress-card h3,
  .troop-card h3 { font-size: 25px; line-height: 1.15; margin: 0 0 8px; padding-right: 45px; }
  .progress-card .level,
  .troop-card .level { font-size: 16px; right: 12px; top: 14px; }
  .progress-card p,
  .troop-card p { font-size: 16px; line-height: 1.4; margin: 0 0 10px; }
  .progress-card .costs,
  .troop-card .costs { font-size: 16px; gap: 8px; margin: 7px 0; }
  .progress-card .duration,
  .troop-card .ship-strength,
  .troop-card .training-estimate { font-size: 16px; margin: 7px 0; }
  .progress-card button,
  .troop-card button { min-height: 38px; font-size: 15px; padding: 8px 13px; }
  .progress-card h3,
  .progress-card p,
  .progress-card .costs { grid-column: 1 / -1; margin: 0; }
  .progress-card .duration { grid-column: 1; align-self: center; margin: 0; }
  .progress-card button { grid-column: 2; width: auto; min-width: 116px; margin: 0; }
  .troop-card form { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 9px; }
  .troop-card form label { grid-column: 1; grid-row: 1; font-size: 16px; margin: 0; }
  .troop-card form input { grid-column: 2; grid-row: 1; justify-self: end; width: 80px; font-size: 16px; min-height: 38px; margin: 0; }
  .troop-card .training-estimate { grid-column: 1; grid-row: 2; margin: 0; }
  .troop-card form button { grid-column: 2; grid-row: 2; margin: 0; }

  .fleet-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
  .fleet-overview-card { padding: 9px 12px; gap: 9px; }
  .fleet-overview-card > img { width: 43px; height: 46px; }
  .fleet-overview-card strong { font-size: 24px; }
  .fleet-overview-card span { font-size: 17px; }
  .painted-fleet-row {
    grid-template-columns: 96px minmax(150px, .95fr) minmax(170px, 1.2fr) 125px;
    gap: 14px;
    padding: 10px 14px 10px 0;
    margin-bottom: 14px;
    border-width: 3px;
  }
  .fleet-painting { grid-row: auto; min-height: 122px; }
  .fleet-painting > img { width: 90px; height: 96px; }
  .fleet-mission-ribbon { padding: 5px 2px; font-size: 15px; }
  .fleet-order { grid-column: auto; padding: 0; }
  .fleet-order h3 { font-size: 25px; margin-bottom: 7px; }
  .fleet-captain { font-size: 16px; }
  .fleet-captain > img { width: 25px; height: 25px; }
  .painted-ship-tokens { gap: 8px; margin-top: 7px; }
  .painted-ship-token > img { width: 29px; height: 27px; }
  .painted-ship-token > strong { font-size: 16px; }
  .fleet-order .troop-tokens,
  .fleet-cargo { font-size: 16px; margin-top: 7px; }
  .fleet-order .troop-tokens img { width: 22px; height: 32px; }
  .painted-fleet-row .fleet-route { grid-column: auto; grid-row: auto; padding: 0; font-size: 16px; }
  .fleet-route-port { font-size: 16px; }
  .fleet-route .voyage-progress { margin: 19px 8px; }
  .fleet-time { grid-column: auto; grid-row: auto; padding: 0; gap: 5px; }
  .fleet-time > small { font-size: 12px; margin: 3px 0; }
  .fleet-time strong { font-size: 24px; }
  .fleet-time .text-button { font-size: 16px; min-height: 32px; }

  .harbor-build-plan,
  .route-panel { padding: 17px; border-width: 3px; }
  .plan-panel-header { gap: 12px; padding-bottom: 11px; margin-bottom: 13px; }
  .plan-panel-art > img { width: 48px; height: 48px; }
  .plan-panel-header h3 { font-size: 28px; }
  .plan-count-seal { width: 47px; height: 47px; font-size: 18px; flex-shrink: 0; }
  .plan-count-seal small { font-size: 11px; }
  .build-plan { margin-bottom: 13px; gap: 10px; }
  .build-plan > li { min-width: 180px; padding: 8px; }
  .build-plan .plan-building-icon { width: 39px; height: 39px; }
  .plan-queue-label { font-size: 16px; }
  .plan-queue-label small,
  .plan-paid { font-size: 12px; }
  .harbor-build-plan .community-actions { margin-top: 12px; }
  .harbor-build-plan .community-actions button,
  .plan-rules summary { font-size: 16px; min-height: 36px; }
  .plan-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 15px; }
  .plan-options .plan-building-card {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    gap: 0;
  }
  .plan-options .plan-building-icon { width: 60px; min-width: 0; height: 60px; margin: 9px 0 9px 9px; border: 1px solid #ac8347; }
  .plan-building-info { padding: 10px; }
  .plan-building-info > strong { font-size: 22px; line-height: 1.15; }
  .plan-building-target { display: block; margin-top: 5px; font-size: 13px; }
  .plan-building-info .costs { font-size: 13px; gap: 5px; margin: 7px 0 0; }
  .plan-building-info .costs img { width: 19px; height: 19px; }
  .plan-options .plan-building-card > button { grid-column: 1 / -1; margin: 0 9px 9px; min-height: 36px; font-size: 16px; }
  .route-port > img { width: 48px; height: 48px; }
  .route-vessel { flex-basis: 130px; }
  .route-vessel > img { width: 100px; height: 76px; }
  .route-port b { font-size: 24px; }

  .captain-standing { gap: 17px; padding: 13px 20px; margin-bottom: 16px; border-width: 3px; }
  .standing-portrait { width: 57px; height: 57px; }
  .standing-identity h3 { font-size: 28px; }
  .standing-identity p { font-size: 16px; margin-top: 5px; }
  .standing-position strong,
  .standing-score strong { font-size: 28px; }
  .standing-position small,
  .standing-score small { font-size: 12px; }
  .ranking-tabs { margin: 14px 0; }
  .ranking-tabs button { font-size: 16px; min-height: 36px; padding: 8px 13px; }
  .painted-ranking-table th { font-size: 12px; padding: 11px 14px; }
  .painted-ranking-table td { padding: 9px 14px; font-size: 16px; }
  .ranking-portrait { width: 37px; height: 37px; }
  .ranking-captain { font-size: 22px; }
  .ranking-crew { font-size: 12px; }
  .painted-ranking-table .ranking-message {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    min-height: 36px;
    font-size: 18px;
    padding: 6px;
  }
  .ranking-rules summary { min-height: 36px; font-size: 16px; }
  .brotherhood-page .crew-member-actions .text-button,
  .tavern-page .chat-message .text-button {
    min-width: 36px;
    min-height: 36px;
    font-size: 16px;
    padding: 5px 8px;
  }
  .tavern-page .chat-messages {
    height: clamp(160px, calc(var(--game-height,100dvh) - 660px), 420px);
    min-height: 160px;
    max-height: none;
  }
  .captain-stats { margin-top: 17px; gap: 12px; }
  .captain-stats > div { padding: 13px 12px 13px 59px; }
  .captain-stat-art { width: 35px; height: 35px; left: 12px; top: 13px; }
  .captain-stats strong { font-size: 25px; }
  .captain-stats small { font-size: 13px; }
}

@media (min-width: 1360px) {
  .illustrated-cards:not(.ship-cards) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .illustrated-cards:not(.ship-cards) .building-card.illustrated-card { grid-template-columns: 78px minmax(0, 1fr); }
  .illustrated-cards:not(.ship-cards) .card-painting,
  .illustrated-cards:not(.ship-cards) .legacy-building { width: 68px; height: 86px; margin-left: 8px; }
  .illustrated-cards:not(.ship-cards) .card-info { padding: 11px; }
  .illustrated-cards:not(.ship-cards) .card-info h3 { font-size: 23px; }
  .illustrated-cards:not(.ship-cards) .card-info > button { min-width: 110px; padding: 8px; }
}

@media (min-width: 951px) and (max-width: 1150px) {
  .illustrated-cards { gap: 12px; }
  .building-card.illustrated-card { grid-template-columns: 82px minmax(0, 1fr); }
  .building-card .card-painting,
  .building-card .legacy-building { width: 72px; height: 92px; margin-left: 8px; }
  .card-info,
  .ship-cards .card-info { padding: 12px; }
  .card-info h3,
  .ship-cards .card-info h3 { font-size: 23px; }
  .card-info > button { min-width: 108px; }
  .ship-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ship-cards .building-card.illustrated-card { grid-template-columns: 1fr; }
  .ship-cards .building-card .card-painting { width: 120px; height: 96px; margin: 10px auto 0; }
  .progress-card,
  .troop-card { grid-template-columns: 72px minmax(0, 1fr); }
  .progress-card > img,
  .troop-card > img { width: 72px; height: 92px; max-height: 92px; padding: 5px; }
  .progress-card > div,
  .troop-card > div { padding: 12px; }
  .progress-card h3,
  .troop-card h3 { font-size: 23px; }
  .painted-fleet-row { grid-template-columns: 85px minmax(0, 1fr) 118px; gap: 12px; }
  .fleet-painting { grid-row: 1 / 3; min-height: 140px; }
  .fleet-painting > img { width: 82px; height: 90px; }
  .fleet-order { grid-column: 2; }
  .painted-fleet-row .fleet-route { grid-column: 2; grid-row: 2; }
  .fleet-time { grid-column: 3; grid-row: 1 / 3; }
  .fleet-overview-card { padding: 8px; gap: 6px; }
  .fleet-overview-card > img { width: 33px; height: 39px; }
  .fleet-overview-card span { font-size: 15px; }
  .plan-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Island status uses the same circular plaques and colors as the sea chart. */
.map-legend > .legend-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.map-legend .legend-label { color: #f3e7c9; font:14px/20px var(--font-body); }
.map-legend .legend-own { --island-status: #f3ce7e; }
.map-legend .legend-ally { --island-status: #9edace; }
.map-legend .legend-pirate { --island-status: #e1a084; }
.map-legend .legend-other { --island-status: #f3e1b8; }
.map-legend .legend-free { --island-status: #c0d9bd; }
.map-legend .legend-marker {
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1px solid #0d3539;
  border-radius: 50%;
  transform: none;
  color: #12383c;
  background: var(--island-status);
  box-shadow: 0 1px 3px #001c2966;
}
.map-legend .legend-marker svg { width: 15px; height: 15px; }
.map-legend .legend-free .legend-marker { color: var(--island-status); background: none; border-color: transparent; box-shadow: none; }
.map-legend .legend-free .legend-marker svg { width: 22px; height: 22px; }
@media (min-width: 951px) {
  .map-legend { left: 210px; right: 225px; bottom: 24px; display: flex; flex-wrap: wrap; gap: 7px 13px; padding: 8px 10px; background: #08343ce8; border: 1px solid #acaa7855; border-radius: 2px; }
  .map-legend > .legend-item { white-space: nowrap; }
}

/* Keep the next-level effect and all eight island actions on the captain's desk. */
@media (min-width: 951px) {
  body[data-view="island"] .content-page { padding-top: 12px; }
  body[data-view="island"] .scene-banner {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0 26px;
    min-height: 74px;
    padding: 8px 20px;
    margin-bottom: 10px;
  }
  body[data-view="island"] .scene-banner > span { grid-column: 1; grid-row: 1; align-self: end; }
  body[data-view="island"] .scene-banner h3 { grid-column: 1; grid-row: 2; margin: 0; }
  body[data-view="island"] .scene-banner p { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  body[data-view="island"] .content-intro { margin-bottom: 9px; }
  body[data-view="island"] .illustrated-cards { gap: 10px; }
  body[data-view="island"] .card-info { row-gap: 5px; padding-top: 8px; padding-bottom: 8px; }
  body[data-view="island"] .card-info .level { padding-top: 2px; padding-bottom: 2px; line-height: 1.2; }
}