/* Illustrated island materials sit inside the established tournament shell. */
.st-catan .ct-table {
  color: var(--ink);
}
.st-catan .ct-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 25px 0 12px;
}
.st-catan .ct-section-head h3 {
  margin: 0;
  font-size: 17px;
}
.st-catan .ct-section-head > span,
.st-catan .ct-desk > span {
  font-size: 12px;
  color: var(--muted);
}
.st-catan .ct-art {
  width: 64px;
  height: 64px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  pointer-events: none;
}
.st-catan .ct-art > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.st-catan .ct-desk {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 8px 0 14px;
}
.st-catan .ct-dice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}
.st-catan .ct-die {
  display: block;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  box-shadow: 0 3px 7px #14213b12;
}
.st-catan .ct-die svg {
  width: 100%;
  height: 100%;
  fill: var(--ink);
}
.st-catan .ct-map-scroll {
  overflow: auto;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  scrollbar-color: var(--club-blue) var(--club-light-blue);
  overscroll-behavior-inline: contain;
  scroll-padding: 20px;
}
.st-catan .ct-island {
  width: 100%;
  min-width: 720px;
  aspect-ratio: 1;
  background: #154d71 url("/images/battleship/ocean.webp") center / cover;
  border-radius: 0;
}
.st-catan .ct-island > svg {
  width: 100%;
  height: 100%;
}
.st-catan .ct-hex-border {
  fill: none;
  stroke: #f4ead2;
  stroke-width: 0.55;
  stroke-linejoin: round;
}
.st-catan .ct-production > circle {
  fill: #fffdf5;
  stroke: #56432c;
  stroke-width: 0.22;
}
.st-catan .ct-island .ct-production text {
  font:
    800 2.35px Vazirmatn,
    sans-serif;
  fill: #14213b;
  text-anchor: middle;
}
.st-catan .ct-production.hot text {
  fill: #b12d43;
}
.st-catan .ct-probability {
  fill: #14213b;
}
.st-catan .ct-production.hot .ct-probability {
  fill: #b12d43;
}
.st-catan .ct-node,
.st-catan .ct-road-target,
.st-catan .ct-robber-target,
.st-catan .ct-port {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: 0;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
}
.st-catan .ct-node {
  z-index: 4;
  border-radius: 50%;
}
.st-catan .ct-island .ct-node.ct-target {
  border: 0;
  background: transparent;
  outline: 0;
}
.st-catan .ct-island .ct-node.ct-target:focus-visible {
  outline: 3px solid #ad4c13;
  outline-offset: 2px;
}
.st-catan .ct-node .ct-art {
  width: 42px;
  height: 42px;
}
.st-catan .ct-owned::before {
  content: "";
  position: absolute;
  inset: 6px 3px 0;
  background: var(--ct-owner);
  border: 2px solid white;
  border-radius: 50%;
  z-index: -1;
}
.st-catan .ct-owner-tag {
  position: absolute;
  bottom: -3px;
  right: -2px;
  width: 17px;
  height: 17px;
  background: var(--ct-owner);
  color: white;
  border: 1px solid white;
  border-radius: 50%;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}
.st-catan .ct-build-cross {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fffdf2;
  outline: 1px solid #3468d5;
}
.st-catan .ct-build-cross::before,
.st-catan .ct-build-cross::after {
  content: "";
  position: absolute;
  background: var(--club-blue);
  top: 7px;
  left: 3px;
  width: 10px;
  height: 2px;
}
.st-catan .ct-build-cross::after {
  transform: rotate(90deg);
}
.st-catan .ct-road-target {
  z-index: 3;
  border-radius: 8px;
}
.st-catan .ct-island .ct-road-target.ct-target {
  /* The held road stays reachable beside an existing settlement in fit view. */
  z-index: 5;
}
.st-catan .ct-road-target span {
  width: 38px;
  height: 13px;
  border: 2px dashed #14213b;
  background: #fff0c7;
  border-radius: 4px;
  transform: rotate(var(--angle));
}
.st-catan .ct-island .ct-road-target.pg-legal {
  outline: 0;
  background: transparent;
}
.st-catan .ct-port {
  width: 46px;
  height: 46px;
  z-index: 2;
  border-radius: 8px;
  background: #ffffffed;
  border: 1px solid #cbd6e5;
}
.st-catan .ct-port .ct-art {
  width: 30px;
  height: 27px;
  align-self: start;
}
.st-catan .ct-port b {
  position: absolute;
  bottom: 0;
  font-size: 11px;
  color: var(--ink);
  line-height: 17px;
}
.st-catan .ct-robber {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 44px;
  pointer-events: none;
  z-index: 3;
}
.st-catan .ct-robber .ct-art {
  width: 100%;
  height: 100%;
}
.st-catan .ct-robber-target {
  border: 2px dashed var(--club-blue);
  border-radius: 50%;
  background: #e6eeffb8;
  z-index: 5;
}
.st-catan .ct-robber-target .ct-art {
  width: 26px;
  height: 32px;
  opacity: 0.65;
}
.st-catan .ct-target:hover {
  background-color: #ffdaa4;
}
.st-catan .ct-node:hover .ct-art {
  transform: translateY(-2px);
}
.st-catan .ct-map-hint {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  margin: 8px 0 0;
  color: var(--secondary-text);
}
.st-catan .ct-map-hint > span {
  display: none;
}
.st-catan .ct-resources {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.st-catan .ct-resource {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 3px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}
.st-catan .ct-resource > .ct-art {
  width: 100%;
  max-width: 100px;
  height: 85px;
}
.st-catan .ct-resource > strong {
  font-size: 26px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.st-catan .ct-resource > span:not(.ct-art) {
  font-size: 13px;
  font-weight: 700;
}
.st-catan .ct-resource small {
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
}
.st-catan .ct-resource.empty > .ct-art {
  opacity: 0.65;
}
.st-catan .ct-recipes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.st-catan .ct-recipe {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  border-radius: 7px;
}
.st-catan .ct-recipe.is-active {
  border-color: var(--club-blue);
  background: var(--club-light-blue);
  box-shadow: inset 0 0 0 1px var(--club-blue);
}
.st-catan .ct-recipe > .ct-art {
  width: 65px;
  height: 58px;
}
.st-catan .ct-recipe > strong {
  font-size: 14px;
}
.st-catan .ct-recipe small {
  font-size: 11px;
  color: var(--muted);
}
.st-catan .ct-recipe-state {
  font-size: 10px;
  color: var(--secondary-text);
}
.st-catan .ct-cost {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1px;
  min-height: 34px;
}
.st-catan .ct-cost > span {
  display: flex;
  align-items: center;
  font-size: 11px;
}
.st-catan .ct-cost .ct-art {
  width: 24px;
  height: 27px;
}
.st-catan .ct-cost b {
  font-size: 11px;
}
.st-catan .ct-dev-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.st-catan .ct-dev-card {
  width: 124px;
  min-height: 145px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--status-ground);
  color: var(--ink);
  padding: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.st-catan .ct-dev-card .ct-art {
  width: 78px;
  height: 78px;
}
.st-catan .ct-dev-card strong {
  font-size: 13px;
}
.st-catan .ct-dev-card small {
  font-size: 10px;
  color: var(--muted);
}
.st-catan .ct-dev-card.new {
  border-style: dashed;
}
.st-catan .ct-empty,
.st-catan .ct-private-note {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0;
}
.st-catan .ct-player {
  display: grid;
  grid-template-columns: 27px minmax(80px, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.st-catan .ct-player.active {
  background: var(--club-light-blue);
}
.st-catan .ct-player > strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.st-catan .ct-seat {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  color: white;
  background: var(--ct-owner);
  font-size: 12px;
  font-weight: 800;
}
.st-catan .ct-points {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 20px;
}
.st-catan .ct-points small {
  font-size: 11px;
  font-weight: 400;
}
.st-catan .ct-player > small {
  grid-column: 3;
  font-size: 11px;
  color: var(--muted);
}
.st-catan .ct-piece-counts {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: 14px;
}
.st-catan .ct-piece-counts > span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.st-catan .ct-piece-counts .ct-art {
  width: 35px;
  height: 34px;
}
.st-catan .ct-awards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.st-catan .ct-awards > div {
  display: flex;
  gap: 10px;
  align-items: center;
}
.st-catan .ct-awards > div > span:not(.ct-art) {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.st-catan .ct-awards strong {
  font-size: 13px;
}
.st-catan .ct-awards small {
  font-size: 11px;
  color: var(--muted);
}
.st-catan .ct-commands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.st-catan .ct-resource-actions,
.st-catan .ct-player-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.st-catan .ct-resource-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
}
.st-catan .ct-resource-choice .ct-art {
  width: 54px;
  height: 54px;
}
.st-catan .ct-resource-choice strong {
  font-size: 12px;
}
.st-catan .ct-trade-desk {
  margin-top: 15px;
  padding: 12px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.st-catan .ct-exchange {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
}
.st-catan .ct-exchange .ct-art {
  width: 55px;
  height: 55px;
}
.st-catan .ct-exchange > small {
  flex-basis: 100%;
  text-align: center;
  color: var(--muted);
}
.st-catan .ct-trade-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin-top: 10px;
}
.st-catan .ct-trade-fields label {
  flex: 1 1 110px;
  font-size: 12px;
}
.st-catan .ct-trade-fields select {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 5px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 5px;
}
.st-catan .ct-inspection {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--club-light-blue);
}
.st-catan .ct-inspection > button:first-child {
  float: left;
  min-height: 44px;
}
.st-catan .ct-inspection h3 {
  font-size: 16px;
}
.st-catan .ct-inspection p {
  font-size: 13px;
  line-height: 1.9;
}
.st-catan .ct-neighbors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
}
.st-catan .ct-neighbors > span {
  display: flex;
  align-items: center;
}
.st-catan .ct-neighbors .ct-art {
  width: 38px;
  height: 38px;
}
.st-catan :is(button, select, .ct-map-scroll):focus-visible {
  outline: 3px solid var(--club-blue);
  outline-offset: 3px;
}
.st-catan button {
  cursor: pointer;
}
.st-catan button:disabled {
  cursor: default;
}
.st-catan .ct-recipe:disabled {
  opacity: 0.65;
}
.st-catan .ct-art :is(svg, image) {
  pointer-events: none;
}
@media (max-width: 760px) {
  .st-catan .ct-map-hint {
    display: block;
  }
  .st-catan .ct-map-hint > span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
  }
  .st-catan .ct-desk > span {
    display: none;
  }
  .st-catan .ct-resource > .ct-art {
    height: 54px;
  }
  .st-catan .ct-resource > strong {
    font-size: 22px;
  }
  .st-catan .ct-resource > span:not(.ct-art) {
    font-size: 11px;
  }
  .st-catan .ct-resource small {
    font-size: 10px;
  }
  .st-catan .ct-resources {
    gap: 4px;
  }
  .st-catan .ct-recipes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .st-catan .ct-player {
    grid-template-columns: 25px minmax(0, 1fr) auto;
    gap: 6px;
  }
  .st-catan .ct-player > small {
    grid-column: 2 / 4;
    grid-row: 3;
  }
  .st-catan .ct-points {
    flex-direction: column;
    gap: 0;
  }
  .st-catan .ct-piece-counts {
    grid-column: 2 / 4;
  }
  .st-catan .ct-awards {
    grid-template-columns: 1fr;
  }
  .st-catan .ct-section-head h3 {
    font-size: 15px;
  }
  .st-catan .ct-section-head > span {
    font-size: 11px;
  }
  .st-catan .ct-dev-card {
    width: calc(50% - 4px);
  }
}

.st-catan .ct-harbor-link {
  fill: none;
  stroke: #fff5cf;
  stroke-width: 0.45;
  stroke-linejoin: round;
}
.st-catan .ct-production.last-roll > circle {
  stroke: #ad4c13;
  stroke-width: 0.85;
}
.st-catan .ct-production.blocked > circle {
  fill: #dbe4f1;
  stroke: #14213b;
  stroke-width: 0.45;
}

/* Play happens around one island, with the supply within reach. */
.st-catan .ct-table {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.st-catan .ct-turn {
  min-width: 0;
  padding: 12px;
  background: var(--surface);
  border-radius: 10px;
}
.st-catan .ct-turn-title { display: block; font-size: 15px; line-height: 1.8; }
.st-catan .ct-turn > p { font-size: 13px; margin-top: 8px; }
.st-catan .ct-command-status:empty { display: none; }
.st-catan .ct-command-status { padding: 8px; background: var(--status-ground); border-radius: 6px; }
.st-catan .ct-command-status[role="alert"] { color: var(--danger); }
.st-catan .ct-turn-controls { min-width: 0; }
.st-catan .ct-roll {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px;
  margin: 8px 0 0;
  border: 1px solid var(--club-blue);
  border-radius: 8px;
  color: var(--ink);
  background: var(--club-light-blue);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}
.st-catan .ct-roll:hover:enabled { background: var(--secondary-hover); }
.st-catan .ct-roll-result { background: transparent; border: 0; padding: 0; min-height: 44px; }
.st-catan .ct-die { width: 36px; height: 36px; }
.st-catan .ct-commands { margin-top: 8px; gap: 6px; }
.st-catan .ct-commands:empty { display: none; }
.st-catan .ct-commands > button { flex: 1 1 auto; min-height: 44px; font-size: 12px; padding: 6px 10px; }
.st-catan .ct-playfield { min-width: 0; }
.st-catan .ct-seats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.st-catan .ct-seat-player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding: 6px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}
.st-catan .ct-seat-player[aria-current] { border-color: var(--ct-owner); background: var(--status-ground); }
.st-catan .ct-seat-player > strong { flex: 1; font-size: 11px; overflow-wrap: anywhere; }
.st-catan .ct-seat-player > b { font-size: 14px; font-variant-numeric: tabular-nums; }
.st-catan .ct-seats .ct-seat { width: 22px; height: 22px; font-size: 11px; }
.st-catan .ct-map-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.st-catan .ct-placement-hint { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.st-catan .ct-placement-hint .ct-art { width: 38px; height: 38px; }
.st-catan .ct-zoom {
  flex: none;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--secondary-text);
  font: inherit;
  font-size: 12px;
}
.st-catan .ct-zoom:hover { background: var(--club-light-blue); }
.st-catan .ct-board-fit { min-width: 0; }
.st-catan .ct-map-scroll { aspect-ratio: 1; margin-inline: auto; }
.st-catan .ct-island { min-width: 720px; }
.st-catan .ct-pan-hint { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.st-catan .ct-supply { min-width: 0; padding: 0 2px 8px; }
.st-catan .ct-supply .ct-section-head { margin: 16px 0 8px; }
.st-catan .ct-supply > :first-child .ct-section-head { margin-top: 0; }
.st-catan .ct-section-head h3 { font-size: 15px; }
.st-catan .ct-section-head > span { font-size: 11px; }
.st-catan .ct-resource { padding: 6px 2px; gap: 2px; }
.st-catan .ct-resource > .ct-art { height: 44px; }
.st-catan .ct-resource > strong { font-size: 20px; }
.st-catan .ct-resource > span:not(.ct-art) { font-size: 10px; }
.st-catan .ct-resource small { font-size: 10px; margin-top: 0; }
.st-catan .ct-recipes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.st-catan .ct-recipe { padding: 6px 3px; gap: 2px; }
.st-catan .ct-recipe > .ct-art { width: 48px; height: 42px; }
.st-catan .ct-recipe > strong { font-size: 13px; }
.st-catan .ct-recipe small { font-size: 10px; }
.st-catan .ct-cost { min-height: 28px; }
.st-catan .ct-cost .ct-art { width: 20px; height: 23px; }
.st-catan .ct-disclosure { margin-top: 12px; border-top: 1px solid var(--line); }
.st-catan .ct-disclosure > summary { min-height: 44px; padding: 10px 2px; cursor: pointer; font-size: 12px; font-weight: 700; }
.st-catan .ct-disclosure .ct-section-head { margin-top: 8px; }
.st-catan .ct-player { grid-template-columns: 25px minmax(0, 1fr) auto; }
.st-catan .ct-player > small { grid-column: 2 / -1; grid-row: 3; }
.st-catan .ct-piece-counts { grid-column: 2 / -1; gap: 8px; }
.st-catan .ct-points { flex-direction: column; gap: 0; }
.st-catan .ct-awards { grid-template-columns: minmax(0, 1fr); }
.st-catan .ct-inspection { scroll-margin: 12px; }
.st-catan .ct-target > .ct-ghost-piece { display: none; }
/* A preview belongs to the pointer/focus only; committed ownership stays authoritative. */
.st-catan .ct-node:is(:hover, :focus-visible) > .ct-ghost-piece {
  display: inline-flex;
  width: 40px;
  height: 40px;
  opacity: .85;
}
.st-catan .ct-node:is(:hover, :focus-visible) > :not(.ct-ghost-piece) { display: none; }
.st-catan .ct-road-target:is(:hover, :focus-visible) > .ct-ghost-piece {
  display: inline-flex;
  width: 40px;
  height: 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform: rotate(var(--angle));
}
.st-catan .ct-road-target:is(:hover, :focus-visible) > span:not(.ct-ghost-piece) { display: none; }
.st-catan :is(.ct-supply, summary):focus-visible { outline: 3px solid var(--club-blue); outline-offset: 3px; }

@container game-arena (min-width: 880px) {
  .st-catan .ct-table {
    grid-template-columns: minmax(0, 1fr) 304px;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px 16px;
  }
  .st-catan .ct-playfield { grid-column: 1; grid-row: 1 / span 2; }
  .st-catan .ct-turn { grid-column: 2; grid-row: 1; }
  .st-catan .ct-supply { grid-column: 2; grid-row: 2; }
  .st-catan .ct-island { min-width: 0; }
  .st-catan .ct-map-scroll[data-ct-zoom="close"] .ct-island { width: max(100%, 720px); }
  .st-catan .ct-map-scroll { max-width: 800px; }
  .st-catan .ct-pan-hint { display: none; }
}
@container game-arena (max-width: 879px) {
  .st-catan .ct-zoom { display: none; }
}