.ct-vibe {
  --ct-ink: #243c42;
  --ct-muted: #637d7c;
  --ct-surface: #fff9eb;
  color: var(--ct-ink);
}
.ct-vibe .game-stage {
  background: radial-gradient(circle at 18% 6%, #f9e8b6, transparent 48%),
    linear-gradient(155deg, #d2e6d2, #f0ddaf 65%, #d0e7d9);
  min-height: 620px;
  padding: clamp(12px, 2.5vw, 30px);
  border-radius: 20px;
}
.ct-table {
  max-width: 1320px;
  margin: auto;
  font-family: ui-rounded, "Avenir Next", Avenir, system-ui, sans-serif;
}
.ct-banner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  border-bottom: 1px solid #52777356;
  margin-bottom: 18px;
  padding: 4px 8px 14px;
}
.ct-banner h3 { margin: 5px 0 0; font-size: clamp(1.3rem, 2.4vw, 2rem); letter-spacing: -.04em; }
.ct-banner p { margin: 0; font-size: .88rem; max-width: 300px; color: #455d5b; }
.ct-eyebrow {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .18em;
  color: #567c77;
}
.ct-layout { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(290px, .8fr); gap: 20px; }
.ct-chart-area { min-width: 0; }
.ct-opening-order {
  margin: -8px 8px 18px; padding: 10px 14px; border-radius: 11px;
  background: #fff8df; color: #315d54; font-size: .85rem; font-weight: 750;
}
.ct-harbor-mode {
  margin: 0 8px 10px; color: #315d54; font-size: .78rem; font-weight: 800;
}
.ct-scroll-hint { display: none; }
.ct-chart-wrap {
  position: relative;
  align-self: start;
  border: 8px solid #c99556;
  border-radius: 24px;
  box-shadow: 0 24px 48px #263e3e32, inset 0 0 0 2px #fdf3d2;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x pan-y;
  background: radial-gradient(circle at 75% 20%, #65b7d2 0, transparent 60%),
    repeating-linear-gradient(120deg, #2586a8 0, #2586a8 3px, #3196b4 3px, #3196b4 8px);
}
.ct-chart { display: block; width: calc(100% * var(--ct-zoom, 1)); height: auto; min-height: 340px; overflow: visible; }
.ct-waves { stroke: #dcf6dc88; stroke-width: 2; fill: none; }
.ct-hex .ct-ground {
  fill: var(--ct-land); stroke: #eed6a0; stroke-width: 4;
  transition: filter .18s, stroke .18s;
}
.ct-hex .ct-hex-inset { fill: none; stroke: #fff4d144; stroke-width: 2; }
.ct-hex--forest { --ct-land: #48a45f; }
.ct-hex--hills { --ct-land: #d0784c; }
.ct-hex--fields { --ct-land: #ebc751; }
.ct-hex--pasture { --ct-land: #9cc661; }
.ct-hex--mountains { --ct-land: #8da9af; }
.ct-hex--desert { --ct-land: #dfb974; }
.ct-chart--colorblock .ct-hex .ct-hex-inset { stroke: #fffaf080; stroke-width: 3; }
.ct-chart--colorblock .ct-hex--forest { --ct-land: #31874e; }
.ct-chart--colorblock .ct-hex--hills { --ct-land: #b85636; }
.ct-chart--colorblock .ct-hex--fields { --ct-land: #d9a729; }
.ct-chart--colorblock .ct-hex--pasture { --ct-land: #75ac46; }
.ct-chart--colorblock .ct-hex--mountains { --ct-land: #668b9b; }
.ct-chart--colorblock .ct-hex--desert { --ct-land: #c69b58; }
.ct-colorblock-icon { filter: drop-shadow(0 2px 2px #172c3370); pointer-events: none; }
.ct-hex--blocked .ct-ground { filter: saturate(.55) brightness(.8); }
.ct-hex .ct-ground[tabindex="0"]:hover, .ct-hex .ct-ground:focus-visible {
  stroke: white; stroke-width: 5; filter: brightness(1.14); outline: none; cursor: pointer;
}
.ct-art { filter: saturate(1.2) drop-shadow(0 3px 2px #273e392b); }
.ct-number { text-anchor: middle; font-family: ui-rounded, "Avenir Next", system-ui, sans-serif; }
.ct-number-rim { fill: #896640; filter: drop-shadow(0 3px 2px #3a2f2680); }
.ct-number-face { fill: #fff4d7; stroke: #d6bb7e; stroke-width: 1.5; }
.ct-number-value { fill: #42332b; font-size: 21px; font-weight: 950; }
.ct-number-dot { fill: #976341; }
.ct-number--hot .ct-number-face { fill: #9b3738; stroke: #ffd4aa; }
.ct-number--hot .ct-number-value, .ct-number--hot .ct-number-dot { fill: #fff2d8; }
.ct-raider { fill: #18262b; stroke: #f9ecbd; stroke-width: 1.5; filter: drop-shadow(0 2px 2px #14272a99); }
.ct-path { stroke-linecap: round; }
.ct-path--free { stroke: #5d594759; stroke-width: 4; }
.ct-path--owned {
  stroke: var(--ct-owner); stroke-width: 16; paint-order: stroke; stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px #142321dd) drop-shadow(0 0 2px #142321aa);
}
.ct-edge-hit { stroke: transparent; stroke-width: 42; fill: none; cursor: pointer; }
.ct-edge-group:hover .ct-path.ct-clickable, .ct-edge-group:focus-within .ct-path.ct-clickable {
  stroke: #fff9ed; stroke-width: 12; outline: none; cursor: pointer;
}
.ct-edge-hit:focus-visible, .ct-vertex-hit:focus-visible {
  outline: 3px solid #fff9ed; outline-offset: 2px;
}
.ct-junction--empty circle { fill: #503f35; stroke: #ffebc2; stroke-width: 2; }
.ct-junction--empty.ct-clickable circle { fill: #fff1c3; stroke: #235d50; stroke-width: 3; }
.ct-junction--owned { filter: drop-shadow(0 3px 2px #122626a6); }
.ct-building-base { fill: #fffdf0; stroke: #192d31; stroke-width: 2.8; }
.ct-building-wall { fill: var(--ct-owner); stroke: #192d31; stroke-width: 2.3; stroke-linejoin: round; }
.ct-building-roof { fill: none; stroke: #342c2a; stroke-width: 3; stroke-linejoin: round; }
.ct-building-door { fill: #fff1d4; stroke: #42332b; stroke-width: 1.5; }
.ct-vertex-hit { fill: transparent; cursor: pointer; }
.ct-vertex-group:hover .ct-junction.ct-clickable circle, .ct-vertex-group:focus-within .ct-junction.ct-clickable circle {
  fill: #fff9dc; stroke: #fff; stroke-width: 4;
}
.ct-harbor {
  text-anchor: middle; font-family: ui-rounded, "Avenir Next", system-ui, sans-serif;
}
.ct-harbor-mooring { stroke: #aa7548; stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 1px 1px #183f4488); }
.ct-harbor-mooring-cord { stroke: #e7c28a; stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; }
.ct-harbor-berth { fill: #ba8a5a; stroke: #fff3ce; stroke-width: 3; filter: drop-shadow(0 1px 2px #183f4488); }
.ct-harbor-vessel-hull { fill: #9a6139; stroke: #533c2d; stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 2px 2px #183f4488); }
.ct-harbor-vessel-plank { fill: none; stroke: #d8a46c; stroke-width: 1.5; stroke-linecap: round; }
.ct-harbor-mast { stroke: #65452f; stroke-width: 2.5; stroke-linecap: round; }
.ct-harbor-sail { fill: #fff0c9; stroke: #876341; stroke-width: 1.5; stroke-linejoin: round; }
.ct-harbor-disc { fill: #f8e9c3; stroke: #426677; stroke-width: 2.5; filter: drop-shadow(0 1px 2px #183f4488); }
.ct-harbor--timber .ct-harbor-disc { fill: #77a960; }
.ct-harbor--clay .ct-harbor-disc { fill: #cc7152; }
.ct-harbor--grain .ct-harbor-disc { fill: #e8bd3e; }
.ct-harbor--wool .ct-harbor-disc { fill: #a6ca64; }
.ct-harbor--ore .ct-harbor-disc { fill: #9ca7ab; }
.ct-harbor .ct-icon { overflow: visible; }
.ct-harbor-wave { stroke: #397c87; stroke-width: 2.5; fill: none; stroke-linecap: round; }
.ct-harbor-rate { fill: #293e40; font-size: 12px; font-weight: 900; }
.ct-sidebar { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ct-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ct-player {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 5px;
  border-radius: 13px;
  padding: 9px 11px;
  background: #fffbefdb;
  border-left: 5px solid var(--ct-owner);
  box-shadow: 0 3px 14px #34423c13;
}
.ct-player--active { outline: 2px solid #4b746c; background: white; }
.ct-player strong { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-player .ct-player-pawn {
  display: inline-block; flex: 0 0 13px; width: 13px; height: 17px;
  background: var(--ct-owner); border: 2px solid #fff7df; border-radius: 6px 6px 3px 3px;
  box-shadow: 0 1px 0 1px #45544b88;
}
.ct-player > span { grid-row: 2; grid-column: 1 / -1; color: var(--ct-muted); font-size: .67rem; }
.ct-player b { color: #325f54; font-size: .85rem; }
.ct-awards { margin: 0; font-size: .7rem; color: #48665f; line-height: 1.5; }
.ct-hand, .ct-actions {
  background: var(--ct-surface);
  border: 1px solid #e6d8bc;
  border-radius: 18px;
  padding: 15px;
  box-shadow: 0 9px 24px #32413813;
}
.ct-hand h4, .ct-actions h4 {
  font-size: .83rem; letter-spacing: .02em; margin: 0 0 10px;
}
.ct-hand-section {
  border-top: 1px solid #e6d8bc;
}
.ct-hand-section summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 7px 25px 7px 3px;
  color: #315d54;
  font-size: .78rem;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}
.ct-hand-section summary::-webkit-details-marker { display: none; }
.ct-hand-section summary::after {
  content: '+';
  position: absolute;
  right: 5px;
  font-size: 1.15rem;
  line-height: 1;
}
.ct-hand-section[open] summary::after { content: '−'; }
.ct-hand-section summary:focus-visible {
  outline: 3px solid #de9747;
  outline-offset: 2px;
  border-radius: 4px;
}
.ct-actions h4:not(:first-child) { margin-top: 18px; }
.ct-cargo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.ct-good {
  min-width: 0; min-height: 83px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  border-radius: 10px; padding: 7px 2px 4px;
  color: #24373a; background: radial-gradient(circle at 50% 25%, #ffffffa8, transparent 60%), var(--ct-good-bg);
  border: 2px solid #fff9dc; outline: 1px solid #574d3766;
  box-shadow: 0 3px 0 #42372836, inset 0 0 0 1px #684b2c44;
  font-size: .6rem; font-weight: 850; text-align: center;
}
.ct-good--timber { --ct-good-bg: #77a960; }
.ct-good--clay { --ct-good-bg: #cc7152; }
.ct-good--grain { --ct-good-bg: #e8bd3e; }
.ct-good--wool { --ct-good-bg: #a6ca64; }
.ct-good--ore { --ct-good-bg: #9ca7ab; }
.ct-good .ct-icon { width: 40px; height: 36px; overflow: visible;
  filter: saturate(1.5) drop-shadow(0 2px 1px #182b2950); }
.ct-good b { font-size: 1.15rem; color: #283c35; }
.ct-cards { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 3px; color: var(--ct-muted); font-size: .74rem; }
.ct-card {
  position: relative; display: flex; flex: 0 1 105px; min-height: 112px;
  flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  padding: 23px 6px 11px; border: 2px solid #a57b45; border-radius: 10px;
  background: radial-gradient(circle at 50% 45%, #ffe4a9, transparent 52%),
    linear-gradient(155deg, #d2e0cb, #f8e9bd 55%, #dcb673);
  box-shadow: inset 0 0 0 3px #fffae9, 0 3px 7px #2b342a45;
  color: #30423b; font-weight: 850; text-align: center;
}
.ct-card::before {
  content: 'DISCOVERY'; position: absolute; top: 9px;
  font-size: .52rem; letter-spacing: .11em; color: #675236;
}
.ct-card .ct-icon { width: 45px; height: 45px; color: #85542d; }
.ct-btn {
  border: 1px solid #9bad9e; border-radius: 10px;
  padding: 9px 12px; background: #f4f4e9;
  font: inherit; font-size: .77rem; font-weight: 800; color: #31514c;
  cursor: pointer; transition: transform .14s, background .14s;
}
.ct-btn:hover:not(:disabled) { transform: translateY(-2px); background: white; }
.ct-btn:focus-visible, .ct-field select:focus-visible { outline: 3px solid #de9747; outline-offset: 2px; }
.ct-btn:disabled { opacity: .48; cursor: not-allowed; }
.ct-btn.ct-primary { background: #315d54; color: #fff7e7; border-color: #315d54; }
.ct-btn.ct-primary:hover:not(:disabled) { background: #224a44; }
.ct-actions { display: flex; flex-direction: column; gap: 9px; }
.ct-actions p { margin: 1px 0; }
.ct-hint { font-size: .78rem; color: var(--ct-muted); line-height: 1.5; }
.ct-tabs, .ct-tools { display: flex; flex-wrap: wrap; gap: 5px; }
.ct-tabs .ct-btn, .ct-tools .ct-btn { flex: 1; }
.ct-tabs .ct-tab--active, .ct-tools .ct-tool--active { background: #d2e8d7; border-color: #568474; }
.ct-tools .ct-btn.ct-build-button { display: flex; flex: 1 1 112px; flex-direction: column; align-items: center; gap: 4px; }
.ct-cost { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; }
.ct-cost-item { display: inline-flex; align-items: center; position: relative; }
.ct-cost-item .ct-icon { width: 24px; height: 24px; }
.ct-cost-item b {
  position: absolute; bottom: -3px; right: -2px; padding: 0 2px; border-radius: 4px;
  background: #fff9e8; color: #31514c; font-size: .65rem; line-height: 1.2;
}
.ct-buy-button { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px; }
.ct-dice {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.2rem; font-weight: 900; color: #694427;
}
.ct-roll-button { display: grid; justify-items: center; gap: 8px; }
.ct-roll-button:disabled { opacity: 1; }
.ct-roll-button .arcade-die-arena, .ct-dice .arcade-die-arena,
.ct-roll-showcase .arcade-die-arena { background: radial-gradient(ellipse, #258072, #143c3f); }
.ct-dice { flex-wrap: wrap; }
.ct-roll-showcase { display: grid; place-items: center; margin: 0 auto 12px; }
.ct-roll-showcase[hidden] { display: none; }
.ct-roll-showcase button { border: 0; background: transparent; padding: 0; }
.ct-field {
  display: flex; align-items: center; justify-content: space-between; gap: 9px;
  font-size: .72rem; font-weight: 750;
}
.ct-field select {
  min-width: 105px; max-width: 66%; padding: 6px;
  border: 1px solid #b7c2b4; border-radius: 8px; background: white;
  color: #243c42; font: inherit;
}
.ct-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ct-form-grid .ct-field select { min-width: 48px; }
.ct-trade-notice {
  padding: 10px; background: #e5ebd3; border-radius: 10px;
  font-size: .76rem; line-height: 1.5;
}
.ct-shield {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 470px;
  background: radial-gradient(circle at 50% 38%, #fbf4d7, #a5c9b4);
  border: 6px solid #fdf6e4; border-radius: 24px;
}
.ct-shield::before { content: '✦'; font-size: 4rem; color: #37675c; }
.ct-shield h3 { font-size: clamp(1.4rem, 4vw, 2.4rem); margin: 6px 0; }
.ct-shield p { color: #526d61; margin: 6px 0 22px; }
.ct-waiting, .ct-warning { padding: 50px 20px; text-align: center; }
@media (max-width: 980px) {
  .ct-layout { grid-template-columns: 1fr; }
  .ct-sidebar { display: grid; grid-template-columns: 1fr 1fr; }
  .ct-roster, .ct-awards { grid-column: 1 / -1; }
}
@media (max-width: 650px) {
  .ct-vibe .game-stage { padding: 7px; }
  .ct-banner { align-items: start; flex-direction: column; gap: 6px; }
  .ct-scroll-hint {
    display: block;
    margin: 0 0 6px;
    color: #315d54;
    font-size: .75rem;
    font-weight: 800;
  }
  .ct-chart-wrap {
    border-width: 3px;
    border-radius: 13px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: auto;
  }
  .ct-chart { min-height: 0; }
  .ct-sidebar { display: flex; }
  .ct-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-hand, .ct-actions { padding: 12px; }
}