:root {
  color-scheme: dark;
  --ink: #eaf8fb;
  --muted: #a9c4cb;
  --deep: #023b62;
  --navy: #075f91;
  --navy-2: #087eae;
  --ocean: #08aee0;
  --cyan: #7ae8ff;
  --gold: #f4b72d;
  --gold-dark: #be7711;
  --paper: #f4e2b9;
  --line: rgba(178, 229, 239, 0.18);
  --shadow: 0 1.75rem 5rem rgba(0, 9, 18, 0.5);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@font-face {
  font-family: "Caribbean";
  src: url("./caribbean.ttf") format("truetype");
  font-display: swap;
}

h1,
h2,
.brand-button,
.order-result strong {
  font-family: "Caribbean", Georgia, serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--deep);
  color: var(--ink);
}

body {
  min-width: 20rem;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible {
  outline: 0.1875rem solid var(--cyan);
  outline-offset: 0.1875rem;
}

.screen {
  display: none;
  min-height: calc(100 * var(--layout-svh, 1svh));
}

.screen.is-active {
  display: flex;
}

.eyebrow {
  margin: 0 0 0.65rem;
  color: var(--gold);
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.button {
  min-height: 3.35rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.45rem;
  padding: 0.9rem 1.35rem;
  cursor: pointer;
  font-weight: 850;
  letter-spacing: 0.025em;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.intro-actions .button {
  font-family: "Caribbean", Georgia, serif;
  font-size: 1.28rem;
  letter-spacing: .055em;
}

.button:hover {
  transform: translateY(-0.125rem);
}

.button:active {
  transform: translateY(0);
}

.button-primary {
  background: linear-gradient(135deg, #ffd15e, var(--gold) 62%, #df9118);
  box-shadow: 0 0.625rem 1.5rem rgba(244, 183, 45, 0.22), inset 0 0.0625rem rgba(255, 255, 255, 0.35);
  color: #231403;
}

.button-primary:hover {
  box-shadow: 0 0.9375rem 1.875rem rgba(244, 183, 45, 0.3), inset 0 0.0625rem rgba(255, 255, 255, 0.35);
}

.button-ghost {
  border-color: rgba(234, 248, 251, 0.42);
  background: rgba(2, 20, 31, 0.42);
  color: var(--ink);
  backdrop-filter: blur(0.625rem);
}

.button-secondary {
  border-color: rgba(66, 213, 239, 0.36);
  background: rgba(66, 213, 239, 0.1);
  color: var(--cyan);
}

.button-full {
  width: 100%;
}

.text-button,
.brand-button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.text-button {
  padding: 0.75rem 0;
  color: var(--muted);
  font-weight: 700;
}

.text-button:hover {
  color: var(--ink);
}

.brand-button {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0;
  color: var(--ink);
  font-family: "Caribbean", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.brand-button > span:last-child > span {
  color: var(--gold);
}

.mini-crest {
  display: grid;
  width: 2rem;
  height: 2rem;
  grid-template-rows: 3.8rem minmax(0, 1fr);
  overflow: hidden;
  place-items: center;
}

.mini-crest img { width: 100%; height: 100%; object-fit: contain; }

/* Intro */
.intro-screen {
  position: relative;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 3rem 1.5rem;
  background: #01abff;
  isolation: isolate;
}

.intro-screen::before,
.intro-screen::after {
  position: absolute;
  z-index: 1;
  width: calc(42 * var(--layout-vw, 1vw));
  height: calc(42 * var(--layout-vw, 1vw));
  border: 0.0625rem solid rgba(66, 213, 239, 0.09);
  border-radius: 50%;
  content: "";
}

.intro-screen::before,
.intro-screen::after { display: none; }

.intro-screen::before {
  top: calc(-22 * var(--layout-vw, 1vw));
  right: calc(-10 * var(--layout-vw, 1vw));
}

.intro-screen::after {
  bottom: calc(-26 * var(--layout-vw, 1vw));
  left: calc(-13 * var(--layout-vw, 1vw));
}

.intro-map {
  position: absolute;
  inset: -10%;
  z-index: -2;
  width: 120%;
  height: 120%;
  object-fit: cover;
  filter: blur(0.5625rem) saturate(0.75) brightness(0.34);
  transform: scale(1.04) rotate(-2deg);
}

.menu-waves {
  position: absolute;
  inset: -13%;
  z-index: -2;
  background: #01abff url("./menu-sea-new2.png") repeat;
  background-size: 60rem auto;
  animation: drift-menu-waves 22s linear infinite;
  opacity: .96;
}

@keyframes drift-menu-waves {
  from { background-position: 0 0; transform: scale(1.08); }
  to { background-position: 60rem 60rem; transform: scale(1.08); }
}

.sea-haze {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 38%, rgba(0, 160, 196, 0.08), transparent 36%), linear-gradient(180deg, rgba(0,74,127,.08), rgba(0,74,127,.18));
}

.intro-content {
  z-index: 2;
  width: min(47.5rem, 100%);
  text-align: center;
}

.intro-pretitle-art { display: block; width: min(18rem, calc(72 * var(--layout-vw, 1vw))); height: auto; margin: 0 auto .25rem; transform: translateX(-1.25%); }

.crest {
  position: relative;
  display: grid;
  width: 6.4rem;
  height: 6.4rem;
  margin: 0 auto 1.5rem;
  place-items: center;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.4);
}

.crest img { width: 140%; height: 140%; object-fit: contain; }

.crest::before,
.crest::after {
  position: absolute;
  top: 50%;
  width: 4rem;
  height: 0.0625rem;
  background: linear-gradient(90deg, transparent, rgba(244, 183, 45, 0.55));
  content: "";
}

.crest::before {
  right: calc(100% + 1rem);
}

.crest::after {
  left: calc(100% + 1rem);
  transform: rotate(180deg);
}

.intro-content h1 {
  margin: 0 0 1rem;
  line-height: 0;
  transform: translateY(-.5rem);
}

.intro-content > .eyebrow { position: relative; top: -.5rem; }

.intro-content h1 img {
  display: block;
  width: min(38.75rem, calc(94 * var(--layout-vw, 1vw)));
  height: auto;
  margin: 0 auto;
  transform: translateX(-5%);
}

.intro-actions {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
}

.intro-actions .button { min-width: 13rem; }
.intro-actions .rulebook-launch { border-color: rgba(255, 239, 178, .88); background: rgba(0, 48, 86, .68); color: #fff0b4; }
.intro-secondary-actions { display: grid; width: min(26.8rem, 100%); gap: .55rem; margin: .8rem auto 0; }
.intro-secondary-button { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: .48rem; border-color: rgba(255, 239, 178, .88); padding-block: .595rem; background: rgba(0, 48, 86, .68); color: #fff0b4; font-family: "Caribbean", Georgia, serif; font-size: 1.28rem; letter-spacing: .055em; }
.intro-secondary-button:disabled { opacity: 1; cursor: default; }
.intro-secondary-button svg { width: 2.16rem; height: 2.16rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Read-only Rulebook viewer */
.rulebook-dialog { width: calc(100 * var(--layout-vw, 1vw)); max-width: none; height: calc(100 * var(--layout-svh, 1svh)); max-height: none; margin: 0; border: 0; padding: 0; background: #061b2a; color: #f7f0d3; overflow: hidden; }
.rulebook-dialog::backdrop { background: rgba(0, 8, 16, .84); }
.rulebook-header { display: grid; height: 4.6rem; place-items: center; border-bottom: 0.0625rem solid rgba(255, 225, 116, .42); background: linear-gradient(180deg, #0d4f6e, #062d45); }
.rulebook-header h2 { margin: 0; color: #ffe476; font-family: "Caribbean", Georgia, serif; font-size: clamp(2rem, calc(4 * var(--layout-vw, 1vw)), 3rem); font-weight: 400; letter-spacing: .04em; }
.rulebook-close { position: fixed; z-index: 3; top: .88rem; right: 1.15rem; display: grid; width: 2.85rem; height: 2.85rem; place-items: center; border: 0.0625rem solid rgba(255, 235, 172, .78); border-radius: 50%; background: rgba(1, 28, 47, .85); color: #ffe476; cursor: pointer; font: 400 2rem/1 Arial, sans-serif; }
.rulebook-close:hover, .rulebook-close:focus-visible { background: #0e5c7d; color: #fff9db; }
.rulebook-zoom-controls { position: fixed; z-index: 3; top: .88rem; right: 5rem; display: flex; gap: .38rem; }
.rulebook-zoom-controls button { display: grid; width: 2.85rem; height: 2.85rem; place-items: center; border: 0.0625rem solid rgba(255, 235, 172, .78); border-radius: 50%; background: rgba(1, 28, 47, .85); color: #ffe476; cursor: pointer; font: 700 1.6rem/1 Arial, sans-serif; }
.rulebook-zoom-controls button:hover, .rulebook-zoom-controls button:focus-visible { background: #0e5c7d; color: #fff9db; }
.rulebook-layout { display: grid; height: calc(calc(100 * var(--layout-svh, 1svh)) - 4.6rem); grid-template-columns: minmax(15.5rem, calc(22 * var(--layout-vw, 1vw))) minmax(0, 1fr); }
.rulebook-nav { overflow-y: auto; border-right: 0.0625rem solid rgba(171, 229, 239, .25); padding: 1.05rem .78rem 2rem; background: linear-gradient(180deg, #083f5a, #052d43); }
.rulebook-nav button { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: .6rem; border: 0; border-radius: .35rem; padding: .58rem .66rem; background: transparent; color: #fff; cursor: pointer; font: 750 .84rem/1.25 system-ui, sans-serif; text-align: left; }
.rulebook-nav button > span:not(.rulebook-nav-label):not(.game-term-button) { flex: 0 0 auto; color: #ffe476; font-size: .75rem; font-weight: 900; }
.rulebook-nav-label { min-width: 0; color: #fff; word-spacing: normal; }
.rulebook-nav button:hover, .rulebook-nav button:focus-visible, .rulebook-nav button.is-active { background: rgba(255, 226, 116, .14); color: #fff; outline: none; }
.rulebook-viewport { --rulebook-zoom: 1; --rulebook-fit-height: 40rem; display: flex; overflow-y: auto; align-items: center; flex-direction: column; gap: 1rem; padding: clamp(1rem, calc(2 * var(--layout-vw, 1vw)), 2rem); background: #031722; scroll-behavior: smooth; }
.rulebook-viewport img { display: block; width: auto; max-width: 100%; height: calc(var(--rulebook-fit-height) * var(--rulebook-zoom)); user-select: none; -webkit-user-drag: none; box-shadow: 0 .8rem 2.1rem rgba(0, 0, 0, .62); }
@media print { body > * { display: none !important; } }

.menu-audio-controls { position: fixed; z-index: 4; top: 1.15rem; right: 1.2rem; display: flex; gap: .48rem; }
.menu-music-toggle {
  display: grid;
  width: 2.85rem;
  height: 2.85rem;
  place-items: center;
  border: 0.125rem solid rgba(255,255,255,.7);
  border-radius: 50%;
  background: rgba(0, 75, 135, .55);
  color: #fff;
  cursor: pointer;
  font-size: 1.28rem;
  box-shadow: 0 .35rem .8rem rgba(0,55,105,.25);
}
.sound-icon-button.is-muted { filter: grayscale(1); opacity: .7; }
.sound-icon-button.is-muted::after { position: absolute; content: ""; width: 1.75rem; height: .16rem; border-radius: 6.1875rem; background: #f3e7d1; box-shadow: 0 0 .12rem rgba(0,0,0,.8); transform: rotate(-47deg); }
.sound-icon-button svg { display: block; width: 1.25rem; height: 1.25rem; fill: currentColor; }
.setup-screen .topbar { padding-right: 6.8rem; }

.intro-footnote {
  position: absolute;
  bottom: 1.4rem;
  z-index: 2;
  margin: 0;
  color: #07151d;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Setup */
.setup-screen,
.game-screen {
  flex-direction: column;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 158, 198, 0.1), transparent 24rem),
    linear-gradient(135deg, #034f78, #087fb0 58%, #03456d);
}

.game-screen { background: #01abff; }

.setup-screen { background: rgb(0, 162, 243); }

.topbar,
.game-topbar {
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.0625rem solid var(--line);
  padding: 0 calc(4 * var(--layout-vw, 1vw));
  background: linear-gradient(180deg, #85898d, #585e64);
}

.step-label,
.game-status {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#current-captain {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

#current-captain::before {
  width: 0.9rem;
  height: 0.9rem;
  border: 0.125rem solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: var(--captain-color, var(--gold));
  box-shadow: 0 0 0.65rem var(--captain-color, var(--gold));
  content: "";
}

.setup-layout {
  display: grid;
  width: min(80rem, 100%);
  min-height: calc(calc(100 * var(--layout-svh, 1svh)) - 4.5rem);
  margin: auto;
  grid-template-columns: minmax(20rem, 0.85fr) minmax(31.25rem, 1.15fr);
}

.setup-art {
  position: relative;
  min-height: 42.5rem;
  overflow: hidden;
  border-right: 0.0625rem solid var(--line);
}

.setup-art::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 23, 34, 0.12), rgba(3, 23, 34, 0.84));
  content: "";
}

.setup-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) brightness(0.74);
}

.art-caption {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  left: 2rem;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

.caption-number {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.2rem;
  line-height: 1;
}

.art-caption p {
  max-width: 17.5rem;
  margin: 0 0 0.3rem;
  color: #d5e9ed;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.45;
}

.setup-panel {
  align-self: center;
  width: min(42.5rem, 100%);
  padding: 3.5rem clamp(2rem, calc(5 * var(--layout-vw, 1vw)), 5rem);
}

.setup-panel h2,
.board-title-row h2,
.roll-panel h2,
dialog h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, calc(4 * var(--layout-vw, 1vw)), 3.25rem);
  line-height: 1.04;
}

.panel-intro {
  max-width: 35.625rem;
  margin: 1rem 0 2.3rem;
  color: var(--muted);
  line-height: 1.6;
}

.count-fieldset {
  margin: 0 0 2rem;
  border: 0;
  padding: 0;
}

.count-fieldset legend {
  margin-bottom: 0.8rem;
  color: #d7e8eb;
  font-size: 0.86rem;
  font-weight: 800;
}

.segmented {
  display: inline-grid;
  grid-template-columns: repeat(4, 4.4rem);
  gap: 0.35rem;
  padding: 0.35rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.6rem;
  background: rgba(0, 12, 20, 0.35);
}

.segmented button {
  height: 2.8rem;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 850;
}

.segmented button.is-selected {
  background: var(--paper);
  box-shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, 0.2);
  color: #1f180c;
}

.crew-heading,
.player-row {
  display: grid;
  grid-template-columns: minmax(11.25rem, 1fr) minmax(14.6875rem, auto);
  align-items: center;
  gap: 1.2rem;
}

.crew-heading {
  border-bottom: 0.0625rem solid var(--line);
  padding: 0 0 0.65rem;
  color: #7197a0;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.crew-heading small { display: block; margin-top: .2rem; color: #c6efff; font-size: .62rem; letter-spacing: .06em; }

.player-row {
  border-bottom: 0.0625rem solid var(--line);
  padding: 0.85rem 0;
}

.player-name-wrap {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.7rem;
}

.player-index {
  display: grid;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 0.0625rem solid rgba(244, 183, 45, 0.4);
  border-radius: 50%;
  color: #07151d;
  font-size: 0.78rem;
  font-weight: 900;
}

.player-name {
  min-width: 0;
  width: 100%;
  border: 0;
  border-bottom: 0.0625rem solid transparent;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 750;
  padding: 0.55rem 0.2rem;
}

.player-name:hover,
.player-name:focus {
  border-bottom-color: rgba(66, 213, 239, 0.5);
}

.swatches {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.swatch {
  position: relative;
  width: 2rem;
  height: 2rem;
  border: 0.125rem solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 0.125rem rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.swatch.is-selected::after {
  position: absolute;
  inset: -0.38rem;
  border: 0.125rem solid var(--paper);
  border-radius: inherit;
  content: "";
}

.swatch:disabled {
  opacity: 0.18;
  cursor: not-allowed;
}

.setup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  gap: 1rem;
}

/* Game */
.game-topbar {
  min-height: 4.25rem;
}

.game-screen {
  height: calc(100 * var(--layout-dvh, 1dvh));
  min-height: 0;
  overflow: hidden;
}

.game-screen .game-topbar,
.game-screen .board-title-row { display: none; }

.turn-timer { position: fixed; top: .99rem; right: 12.6rem; z-index: 16; min-width: 4.7rem; padding: .48rem .55rem; border: 0.0625rem solid rgba(255,255,255,.38); border-radius: .55rem; background: rgba(3,20,31,.82); color: #ffe476; font: 800 .88rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; box-shadow: 0 .35rem .9rem rgba(0,0,0,.22); }
.roll-panel #panel-kicker:empty { display: none; }
.ship-placement-toggle { position: fixed; bottom: 1rem; left: calc(50% + 5rem); z-index: 16; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 0.0625rem solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(3,20,31,.88); color: #d5faff; font-size: 1.45rem; line-height: 1; cursor: pointer; box-shadow: 0 .35rem .9rem rgba(0,0,0,.4); transition: transform .18s ease, background .18s ease; }
.game-control-button { position: fixed; bottom: 1rem; left: calc(50% + 8rem); z-index: 16; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 0.0625rem solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(3,20,31,.88); color: #ffe476; font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: 0 .35rem .9rem rgba(0,0,0,.4); transition: transform .18s ease, background .18s ease; }
.coin-placement-control { position: fixed; bottom: 1rem; left: calc(50% + 11rem); z-index: 16; display: none; align-items: center; gap: .15rem; height: 2.5rem; padding: 0 .16rem; border: 0.0625rem solid rgba(255,255,255,.45); border-radius: 1.25rem; background: rgba(3,20,31,.88); box-shadow: 0 .35rem .9rem rgba(0,0,0,.4); }
.coin-placement-control button { display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; padding: 0; background: transparent; cursor: grab; }
.coin-placement-control button:active { cursor: grabbing; }
.coin-placement-control img { display: block; width: 1.5rem; height: 1.5rem; object-fit: contain; }
.game-control-button:hover { background: #0b637e; transform: scale(1.06); }
.ship-placement-toggle:hover, .ship-placement-toggle.is-active { background: #0b637e; transform: scale(1.06); }
.ship-placement-toggle.is-active { color: #ffe476; box-shadow: 0 0 0 .16rem rgba(255,226,116,.26), 0 .35rem .9rem rgba(0,0,0,.28); }
.ship-placement-toggle, .game-control-button, .test-die-faces { display: none; }
.game-screen.is-developer-controls .ship-placement-toggle, .game-screen.is-developer-controls .game-control-button { display: grid; }
.game-screen.is-developer-controls .coin-placement-control { display: flex; }
.game-screen.is-developer-controls .test-die-faces { display: grid; }
.bottom-next-players { position: fixed; right: calc(50% + 8.25rem); bottom: 1rem; z-index: 16; width: auto; flex-wrap: nowrap; }
.bottom-next-players { display: none; }
#admin-next-players[hidden] { display: none !important; }
.game-screen.is-developer-controls .bottom-next-players { display: flex; }
.game-audio-controls { position: fixed; top: .72rem; right: .9rem; z-index: 16; display: flex; gap: .42rem; }
.settings-gear { position: relative; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 0.0625rem solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(3,20,31,.82); color: #f6d46c; font-size: 1.45rem; line-height: 1; cursor: pointer; box-shadow: 0 .35rem .9rem rgba(0,0,0,.28); transition: transform .18s ease, background .18s ease; }
.settings-gear:hover { background: #0b445d; transform: scale(1.06); }
.game-exit-button { color: #f6d46c; font-weight: 900; }
.game-exit-button img { display: block; width: 1.45rem; height: 1.45rem; object-fit: contain; transform: translateX(.09rem); }

.game-status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0.3125rem rgba(244, 183, 45, 0.1);
}

.game-layout {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: minmax(13rem, 1fr) minmax(0, min(calc(100 * var(--layout-dvh, 1dvh)), calc(58 * var(--layout-vw, 1vw)))) minmax(13rem, 1fr);
}

.space-panel,
.roll-panel {
  min-height: 0;
  overflow: hidden;
  background: rgba(2, 17, 27, .68);
}

.current-card-inventory { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; margin-top: .35rem; border-top: 0.0625rem solid rgba(169,246,255,.2); padding-top: .55rem; }
.roll-panel { position: relative; display: flex; flex-direction: column; }
.hand-limit-right-panel { position: absolute; z-index: 12; inset: 0; display: flex; flex-direction: column; gap: .55rem; overflow: hidden; padding: 3.8rem .75rem .75rem; background: #052b40; }
.hand-limit-right-panel[hidden] { display: none; }
.roll-panel .hand-limit-right-panel h2 { max-width: 100%; margin: 0; color: #ffe476; font-family: "Caribbean", Georgia, serif; font-size: clamp(.68rem, calc(3.25 * var(--layout-vw, 1vw)), 1rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.08; white-space: nowrap; }
.hand-limit-right-panel > p:not(.eyebrow) { margin: 0; color: #d7f3f8; line-height: 1.4; }
.hand-limit-card-grid { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: clamp(.55rem, calc(1.2 * var(--layout-vw, 1vw)), .9rem); min-height: 0; align-content: space-evenly; justify-items: center; }
.hand-limit-card { position: relative; width: min(100%, 8.75rem); min-width: 0; min-height: 0; aspect-ratio: 700 / 448; align-self: center; border: 0; padding: 0; overflow: hidden; background: transparent; cursor: pointer; }
.hand-limit-card > img:first-child { display: block; width: 100%; height: 100%; border: 0.0625rem solid rgba(255,226,116,.46); border-radius: .2rem; background: #061c29; object-fit: contain; }
.hand-limit-card .card-medallion { position: absolute; z-index: 2; right: .22rem; bottom: .2rem; width: 27%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 .08rem .12rem rgba(0,0,0,.7)); }
.selection-card-view { position: absolute; z-index: 4; top: .22rem; right: .22rem; border: 0.0625rem solid rgba(255,242,176,.95); border-radius: .28rem; padding: .14rem .3rem; background: rgba(3,27,43,.9); color: #fff2b0; font: 900 .58rem/1 system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 .08rem .18rem rgba(0,0,0,.45); }
.selection-card-view:hover { background: #0d6672; color: #fff; }
.selection-card-locate { position: absolute; z-index: 4; top: .22rem; left: .22rem; cursor: pointer; }
.hand-limit-card:hover, .hand-limit-card:focus-visible, .hand-limit-card.is-hand-limit-selected { transform: translateY(-.15rem) scale(1.02); border-color: #ffe476; }
.hand-limit-card.is-hand-limit-selected { outline: .2rem solid #f6c946; outline-offset: .1rem; }
.hand-limit-card.is-hand-limit-locked { cursor: not-allowed; filter: grayscale(1); opacity: .35; }
.hand-limit-card.is-hand-limit-locked:hover, .hand-limit-card.is-hand-limit-locked:focus-visible { transform: none; }
.hand-limit-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; }
.hand-limit-actions .button { min-width: 0; padding-inline: .65rem; }
.hand-limit-panel { position: fixed; z-index: 65; inset: 0; display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(0, min(calc(100 * var(--layout-dvh, 1dvh)), calc(58 * var(--layout-vw, 1vw)))) minmax(13rem, 1fr); grid-template-rows: clamp(3.15rem, calc(6.8 * var(--layout-vh, 1vh)), 4.2rem) minmax(0, 1fr) clamp(3.35rem, calc(7.4 * var(--layout-vh, 1vh)), 4.5rem); gap: 0; padding: 0; overflow: visible; pointer-events: none; background: transparent; }
.hand-limit-panel[hidden] { display: none; }
.hand-limit-topbar, .hand-limit-bottombar { grid-column: 2; display: flex; align-items: center; border-inline: 0.0625rem solid rgba(125,229,242,.26); background: linear-gradient(180deg, rgba(3,39,59,.98), rgba(2,25,39,.96)); box-shadow: 0 .35rem .9rem rgba(0,0,0,.28); pointer-events: auto; }
.hand-limit-topbar { grid-row: 1; justify-content: center; border-bottom: 0.0625rem solid rgba(255,226,116,.5); }
.hand-limit-topbar h2 { margin: 0; color: #ffe476; font-family: "Caribbean", Georgia, serif; font-size: 2.1rem; font-weight: 400; line-height: 1; }
.hand-limit-content { grid-column: 3; grid-row: 1 / 4; display: flex; flex-direction: column; min-height: 0; padding: .72rem .6rem; overflow: hidden; pointer-events: auto; background: linear-gradient(155deg, rgba(4,49,71,.98), rgba(2,26,40,.98)); box-shadow: inset 0 0 0 0.0625rem rgba(125,229,242,.18); }
.hand-limit-content .hand-limit-card-grid { margin-top: .62rem; }
.hand-limit-content .market-sell-card-entry:nth-child(-n + 2), .debt-sale-content .market-sell-card-entry:nth-child(-n + 2) { transform: translateY(22.5%); }
.hand-limit-content .market-sell-card-entry:nth-child(n + 3):nth-child(-n + 4), .debt-sale-content .market-sell-card-entry:nth-child(n + 3):nth-child(-n + 4) { transform: translateY(7.5%); }
.hand-limit-content .market-sell-card-entry:nth-child(n + 5):nth-child(-n + 6), .debt-sale-content .market-sell-card-entry:nth-child(n + 5):nth-child(-n + 6) { transform: translateY(-7.5%); }
.hand-limit-content .market-sell-card-entry:nth-child(n + 7), .debt-sale-content .market-sell-card-entry:nth-child(n + 7) { transform: translateY(-22.5%); }
.hand-limit-bottombar { grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); gap: .8rem; border-top: 0.0625rem solid rgba(255,226,116,.5); }
.hand-limit-summary { margin-left: .6rem; color: #d7f3f8; font-size: .68rem; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.hand-limit-footer-spacer { min-width: 0; }
.hand-limit-bottombar .button { min-width: clamp(5.4rem, calc(10 * var(--layout-vw, 1vw)), 7.4rem); min-height: 2.2rem; padding: .42rem .85rem; font-size: .9rem; }

@media (prefers-reduced-motion: no-preference) {
  .hand-limit-panel:not([hidden]) .hand-limit-topbar { animation: market-enter-top .42s cubic-bezier(.2,.8,.2,1) both; }
  .hand-limit-panel:not([hidden]) .hand-limit-bottombar { animation: market-enter-bottom .42s cubic-bezier(.2,.8,.2,1) both; }
  .hand-limit-panel:not([hidden]) .hand-limit-content { animation: market-enter-right .46s cubic-bezier(.2,.8,.2,1) both; }
}
.debt-sale-panel { position: fixed; z-index: 65; inset: 0; display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(0, min(calc(100 * var(--layout-dvh, 1dvh)), calc(58 * var(--layout-vw, 1vw)))) minmax(13rem, 1fr); grid-template-rows: clamp(3.15rem, calc(6.8 * var(--layout-vh, 1vh)), 4.2rem) minmax(0, 1fr) clamp(3.35rem, calc(7.4 * var(--layout-vh, 1vh)), 4.5rem); gap: 0; padding: 0; overflow: visible; pointer-events: none; background: transparent; }
.debt-sale-panel[hidden] { display: none; }
.debt-sale-topbar, .debt-sale-bottombar { grid-column: 2; display: flex; align-items: center; border-inline: 0.0625rem solid rgba(125,229,242,.26); background: linear-gradient(180deg, rgba(3,39,59,.98), rgba(2,25,39,.96)); box-shadow: 0 .35rem .9rem rgba(0,0,0,.28); pointer-events: auto; }
.debt-sale-topbar { position: relative; grid-row: 1; justify-content: center; border-bottom: 0.0625rem solid rgba(255,226,116,.5); }
.debt-sale-topbar h2 { margin: 0; color: #ffe476; font-family: "Caribbean", Georgia, serif; font-size: 2.1rem; font-weight: 400; line-height: 1; }
.debt-sale-topbar strong { position: absolute; right: .6rem; top: 50%; color: #fff; font-size: .68rem; font-weight: 900; line-height: 1.2; white-space: nowrap; transform: translateY(-50%); }
.market-topbar h2, .roll-panel .hand-limit-topbar h2, .roll-panel .debt-sale-topbar h2 { font-size: 2.1rem; }
.debt-sale-content { grid-column: 3; grid-row: 1 / 4; display: flex; flex-direction: column; min-height: 0; padding: .72rem .6rem; overflow: hidden; pointer-events: auto; background: linear-gradient(155deg, rgba(4,49,71,.98), rgba(2,26,40,.98)); box-shadow: inset 0 0 0 0.0625rem rgba(125,229,242,.18); }
.debt-sale-ships { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.debt-sale-ship { display: flex; align-items: center; gap: .35rem; min-width: 0; border: 0.0625rem solid rgba(255,226,116,.46); border-radius: .5rem; padding: .28rem; color: #ecfbff; background: rgba(4,24,39,.74); cursor: pointer; text-align: left; }
.debt-sale-ship:disabled { cursor: not-allowed; filter: grayscale(1); opacity: .32; }
.debt-sale-ship img { width: 2rem; height: 2rem; object-fit: contain; }
.debt-sale-ship span { display: grid; font-size: .68rem; font-weight: 900; }
.debt-sale-ship small { color: #ffe476; font-size: .6rem; }
.debt-sale-ship.is-hand-limit-selected { border-color: #ffe476; box-shadow: 0 0 .75rem rgba(255,226,116,.95); transform: translateY(-.08rem); }
.debt-sale-panel #debt-sale-action.is-debt-insufficient { border-color: #ed6b66; box-shadow: inset 0 0 0 .08rem #ed6b66; }
.debt-sale-panel #debt-sale-action.is-debt-sufficient { border-color: #65d47a; box-shadow: inset 0 0 0 .08rem #65d47a, 0 0 .55rem rgba(101,212,122,.35); }
.debt-sale-bottombar { position: relative; grid-row: 3; justify-content: center; border-top: 0.0625rem solid rgba(255,226,116,.5); }
.debt-sale-summary { position: absolute; left: .6rem; top: 50%; color: #d7f3f8; font-size: .68rem; font-weight: 900; line-height: 1.2; white-space: nowrap; transform: translateY(-50%); }
.debt-sale-bottombar .button { min-width: clamp(5.4rem, calc(10 * var(--layout-vw, 1vw)), 7.4rem); min-height: 2.2rem; padding: .42rem .85rem; font-size: .9rem; }

@media (prefers-reduced-motion: no-preference) {
  .debt-sale-panel:not([hidden]) .debt-sale-topbar { animation: market-enter-top .42s cubic-bezier(.2,.8,.2,1) both; }
  .debt-sale-panel:not([hidden]) .debt-sale-bottombar { animation: market-enter-bottom .42s cubic-bezier(.2,.8,.2,1) both; }
  .debt-sale-panel:not([hidden]) .debt-sale-content { animation: market-enter-right .46s cubic-bezier(.2,.8,.2,1) both; }
}
.current-card-inventory > div:first-child { display: flex; justify-content: space-between; color: #c4e7ed; font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.current-card-inventory b { color: #ffe476; }
.current-card-grid { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: clamp(.55rem, calc(1.2 * var(--layout-vw, 1vw)), .9rem); min-height: 0; margin-top: .52rem; align-content: space-evenly; justify-items: center; }
.current-card-entry { position: relative; width: min(100%, 8.75rem); min-width: 0; min-height: 0; height: auto; aspect-ratio: 700 / 448; align-self: center; }
.current-card-grid .inventory-card { width: 100%; height: 100%; }
.inventory-card { position: relative; display: block; width: 100%; aspect-ratio: 700 / 448; border: 0; padding: 0; background: transparent; cursor: pointer; }
.inventory-card:hover, .inventory-card:focus-visible { transform: translateY(-.12rem) scale(1.03); }
.inventory-card.is-hand-limit-selected { outline: .22rem solid #f6c946; outline-offset: .12rem; transform: translateY(-.18rem); }
.inventory-card.is-protection-card-lost { animation: protection-card-loss .72s ease-in both; pointer-events: none; }
.inventory-card.is-loaded-die-ready { animation: loaded-die-card-pulse 1.15s ease-in-out infinite; box-shadow: 0 0 .1rem rgba(255, 226, 116, .2); }
.inventory-card.is-sea-spirit-ready { animation: loaded-die-card-pulse 1.15s ease-in-out infinite; box-shadow: 0 0 .1rem rgba(255, 226, 116, .2); }
.inventory-card.is-loaded-die-selected { animation: loaded-die-card-pulse .9s ease-in-out infinite; box-shadow: 0 0 1rem rgba(255, 226, 116, .98); }
.inventory-card.is-protection-card-lost.is-loaded-die-selected { animation: protection-card-loss .72s ease-in both; }
@keyframes loaded-die-card-pulse { 0%, 100% { filter: brightness(1); box-shadow: 0 0 .15rem rgba(255,226,116,.35); } 50% { filter: brightness(1.32); box-shadow: 0 0 .9rem rgba(255,226,116,.98); } }
@keyframes protection-card-loss { 0%, 34% { filter: brightness(1) drop-shadow(0 0 0 rgba(255,226,116,0)); transform: scale(1); } 35%, 68% { filter: brightness(1.55) drop-shadow(0 0 .85rem #ffe476); transform: scale(1.14); opacity: 1; } 100% { filter: brightness(2); transform: scale(.65) rotate(-8deg); opacity: 0; } }
.inventory-card > img:first-child { display: block; width: 100%; height: 100%; border: 0.0625rem solid rgba(255,226,116,.46); border-radius: .2rem; background: #061c29; object-fit: contain; }
.inventory-card .card-medallion { position: absolute; z-index: 2; right: .22rem; bottom: .2rem; width: 27%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 .08rem .12rem rgba(0,0,0,.7)); }

.space-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  border-right: 0.0625rem solid var(--line);
  padding: clamp(.55rem, calc(1 * var(--layout-vw, 1vw)), .9rem);
}

.storm-card-hold { margin-top: .35rem; padding: 0; border: 0; }
.storm-card-hold .special-card-hold { margin: 0; }

.captain-detail-panel { position: absolute; z-index: 12; inset: 0; overflow: auto; padding: 1.1rem; background: #052b40; }
.captain-detail-panel[hidden] { display: none; }
.captain-detail-close { position: absolute; top: 2.2rem; right: .2rem; display: grid; width: 2rem; height: 3.3rem; place-items: center; border: 0.0625rem solid rgba(255,226,116,.65); border-radius: .55rem 0 0 .55rem; background: #0a526f; color: #ffe476; font-size: 1.35rem; cursor: pointer; transform: translateY(-50%); }
.captain-detail-panel h2 { margin: .15rem 0 1.25rem; color: var(--captain-color, #fff); font-size: clamp(1.7rem, calc(3 * var(--layout-vw, 1vw)), 2.4rem); }
.captain-detail-items { display: grid; min-width: 0; grid-template-rows: auto auto; gap: .22rem; padding: .8rem 0 1.15rem; border-block: 0.0625rem solid rgba(174,210,219,.2); }
.captain-detail-unit { display: inline-flex; align-items: center; gap: .22rem; color: #d7f3f8; font-size: 1rem; font-weight: 900; }
.captain-detail-unit > img, .captain-detail-unit .flag-token, .captain-detail-unit .house-token { width: 2.05rem; height: 2.05rem; font-size: 2.1rem; }
.captain-detail-unit.credits { color: #ffe476; }
.captain-detail-unit.credits b { font-size: 1.5rem; }
.captain-detail-score { justify-self: end; color: #b9d7dc; font-size: .9rem; font-weight: 850; line-height: 1; }
.captain-detail-score b { color: #ffe89b; }
.captain-detail-row { display: inline-flex; width: 100%; min-width: 0; align-items: center; justify-content: flex-start; gap: .42rem; color: #b9d7dc; font-size: .69rem; font-weight: 850; white-space: nowrap; }
.captain-detail-row .inventory-unit.inventory-flag .flag-token { width: 1.35rem; height: 1.35rem; }
.captain-detail-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: 1.1rem; }
.captain-detail-cards > p { grid-column: 1 / -1; color: var(--muted); }
.detail-card { position: relative; min-width: 0; aspect-ratio: 700 / 448; border: 0.0625rem solid rgba(255,226,116,.48); border-radius: .32rem; padding: 0; overflow: hidden; background: #061c29; cursor: pointer; }
.detail-card > img:first-child { display: block; width: 100%; height: 100%; object-fit: contain; }
.detail-card:hover, .detail-card:focus-visible { transform: translateY(-.15rem) scale(1.02); border-color: #ffe476; }
.bottle-choice-card.is-unavailable { opacity: .38; filter: grayscale(1); cursor: not-allowed; border-color: var(--card-owner-color); box-shadow: 0 0 .6rem color-mix(in srgb, var(--card-owner-color) 62%, transparent); }
.detail-card .card-medallion { position: absolute; right: .28rem; bottom: .24rem; width: 28%; filter: drop-shadow(0 .1rem .14rem rgba(0,0,0,.75)); }

.board-area {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 0;
  place-items: center;
  background: #076e9a;
}

/* At the A/K board corridors, a split ghost can extend into a side panel.
   Raise only this temporary choice layer above those panels. */
.board-area:has(.ghost-choice-fan) { z-index: 20; }

.board-title-row {
  display: flex;
  max-width: 58.125rem;
  margin: 0 auto 1.2rem;
  align-items: center;
  justify-content: space-between;
}

.board-title-row h2 {
  font-size: clamp(1.8rem, calc(3 * var(--layout-vw, 1vw)), 2.7rem);
}

.board-shell {
  position: relative;
  width: min(100%, calc(100 * var(--layout-dvh, 1dvh)));
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  border: 0.1875rem solid #bc801e;
  border-radius: 0.5rem;
  aspect-ratio: 1;
  background: #087daf;
  box-shadow: var(--shadow), 0 0 0 0.0625rem rgba(255, 220, 126, 0.38);
}

/* Let the temporary split choices extend beyond the board border at A/K. */
.board-shell:has(.ghost-choice-fan) { overflow: visible; }

.board-shell > img:not(.barrel-explosion) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.board-shell.is-opening > img:not(.barrel-explosion) { animation: board-unfold .7s cubic-bezier(.2,.8,.2,1) both; transform-origin: center; }
.board-chest.is-opening-hidden, .ship-piece.is-opening-hidden { opacity: 0; }
.board-chest.is-opening-in { animation: opening-pop .32s ease-out both; }
.ship-piece.is-opening-in { animation: opening-sail-in .65s cubic-bezier(.2,.8,.2,1) both; }
@keyframes board-unfold { from { clip-path: inset(0 48%); transform: scaleX(.05); } to { clip-path: inset(0); transform: scaleX(1); } }
.point-banner.is-opening-banner { z-index: 80; min-height: 4.5rem; display: grid; place-items: center; padding-block: .85rem; background: linear-gradient(90deg, rgba(0,0,0,0), #000 16%, #000 84%, rgba(0,0,0,0)); color: #fff; font-family: "Caribbean", Georgia, serif; font-size: clamp(1.2rem, calc(2.6 * var(--layout-vw, 1vw)), 2rem); animation: opening-turn-banner 3s ease-in-out both !important; }
@keyframes opening-turn-banner { 0% { opacity: 0; clip-path: inset(0 50% 0 50%); transform: translateY(-50%) scaleX(.2); } 14% { opacity: 1; clip-path: inset(0); transform: translateY(-50%) scaleX(1); } 86% { opacity: 1; clip-path: inset(0); transform: translateY(-50%) scaleX(1); } 100% { opacity: 0; clip-path: inset(0 50% 0 50%); transform: translateY(-50%) scaleX(.2); } }
@keyframes opening-pop { from { opacity: 0; transform: translate(-50%,-50%) scale(.2); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes opening-sail-in { from { opacity: 0; margin-left: 16rem; } to { opacity: 1; margin-left: 0; } }

/* The Market frames the board rather than replacing it: the sea board remains
   visible between the title/action bars and the two dedicated market panels. */
.market-event { position: fixed; z-index: 60; inset: 0; display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(0, min(calc(100 * var(--layout-dvh, 1dvh)), calc(58 * var(--layout-vw, 1vw)))) minmax(13rem, 1fr); grid-template-rows: clamp(3.15rem, calc(6.8 * var(--layout-vh, 1vh)), 4.2rem) minmax(0, 1fr) clamp(3.35rem, calc(7.4 * var(--layout-vh, 1vh)), 4.5rem); pointer-events: none; }
.market-event[hidden] { display: none; }
.market-side { position: relative; z-index: 1; min-height: 0; padding: .72rem .6rem; pointer-events: auto; background: linear-gradient(155deg, rgba(4,49,71,.98), rgba(2,26,40,.98)); box-shadow: inset 0 0 0 0.0625rem rgba(125,229,242,.18); transition: opacity .2s ease, visibility .2s ease; }
.market-side-left { grid-column: 1; grid-row: 1 / 4; display: flex; flex-direction: column; overflow: hidden; }
.market-side-right { grid-column: 3; grid-row: 1 / 4; }
.market-side-right { display: flex; flex-direction: column; overflow: hidden; }
.market-topbar, .market-bottombar { grid-column: 2; display: flex; align-items: center; border-inline: 0.0625rem solid rgba(125,229,242,.26); background: linear-gradient(180deg, rgba(3,39,59,.98), rgba(2,25,39,.96)); box-shadow: 0 .35rem .9rem rgba(0,0,0,.28); pointer-events: auto; }
.market-topbar { position: relative; grid-row: 1; justify-content: center; border-bottom: 0.0625rem solid rgba(255,226,116,.5); }
.market-balance { position: absolute; left: .6rem; color: #fff; font-size: .68rem; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.market-balance > span { display: block; }
.market-balance-after { right: .6rem; left: auto; text-align: right; }
.market-balance.is-negative { color: rgb(255, 0, 0); }
#market-insufficient-copy { text-align: center; }
.market-topbar h2 { margin: 0; color: #ffe476; font-family: "Caribbean", Georgia, serif; font-size: 2.1rem; font-weight: 400; line-height: 1; }
.market-eye-toggle { display: grid; width: 2rem; height: 2rem; margin-left: .58rem; place-items: center; border: 0.0625rem solid rgba(255,226,116,.72); border-radius: 50%; background: #0a5c78; color: #fff4ca; font-size: 1.05rem; cursor: pointer; box-shadow: 0 .15rem .35rem rgba(0,0,0,.32); }
.market-eye-toggle:hover, .market-eye-toggle:focus-visible { background: #117e9d; transform: scale(1.06); }
.market-bottombar { grid-row: 3; justify-content: center; gap: .8rem; border-top: 0.0625rem solid rgba(255,226,116,.5); }
.market-total { color: #fff; font-size: .68rem; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.market-total > span { display: block; }
.market-total:first-child { margin-right: auto; margin-left: .6rem; }
.market-total:nth-of-type(2) { margin-left: auto; margin-right: .6rem; text-align: right; }
.market-bottombar .is-market-insufficient { color: rgb(255, 0, 0); }
.market-bottombar .button { min-width: clamp(5.4rem, calc(10 * var(--layout-vw, 1vw)), 7.4rem); min-height: 2.2rem; padding: .42rem .85rem; font-size: .9rem; }
.market-event.is-sides-hidden .market-side { visibility: hidden; opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .market-event:not([hidden]) .market-topbar { animation: market-enter-top .42s cubic-bezier(.2,.8,.2,1) both; }
  .market-event:not([hidden]) .market-bottombar { animation: market-enter-bottom .42s cubic-bezier(.2,.8,.2,1) both; }
  .market-event:not([hidden]) .market-side-left { animation: market-enter-left .46s cubic-bezier(.2,.8,.2,1) both; }
  .market-event:not([hidden]) .market-side-right { animation: market-enter-right .46s cubic-bezier(.2,.8,.2,1) both; }
}

@keyframes market-enter-top {
  from { opacity: 0; transform: translateY(-115%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes market-enter-bottom {
  from { opacity: 0; transform: translateY(115%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes market-enter-left {
  from { opacity: 0; transform: translateX(-105%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes market-enter-right {
  from { opacity: 0; transform: translateX(105%); }
  to { opacity: 1; transform: translateX(0); }
}
.market-captain-status { width: 100%; pointer-events: none; }
.market-captain-status .captain-status { cursor: default; }
.market-captain-status .captain-status:hover { background: transparent; }
.market-status-spacer { visibility: hidden; }
.market-panel-heading { margin: .65rem 0 0; color: var(--gold); font-family: inherit; font-size: .77rem; font-weight: 800; letter-spacing: .18em; line-height: 1; text-align: center; text-transform: uppercase; }
.market-buy-grid { position: relative; display: grid; flex: 1 1 0; grid-template-rows: repeat(6, minmax(0, 1fr)); min-height: 0; margin-top: .62rem; overflow: hidden; }
.market-buy-entry { display: grid; grid-template-columns: 2.8rem minmax(0, 6.35rem) minmax(0, 1fr); align-items: start; gap: .7rem; min-height: 0; }
.market-deal-panel { position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column; min-height: 0; padding: .72rem .6rem; overflow: hidden; pointer-events: none; background: linear-gradient(155deg, rgba(4,49,71,.98), rgba(2,26,40,.98)); box-shadow: inset 0 0 0 0.0625rem rgba(125,229,242,.18); }
.market-deal-grid { display: grid; flex: 1 1 0; grid-template-rows: repeat(6, minmax(0, 1fr)); min-height: 0; margin-top: .62rem; overflow: hidden; }
.market-deal-row { display: grid; grid-template-columns: 2.8rem minmax(0, 6.35rem) minmax(0, 1fr); align-items: start; gap: .7rem; min-height: 0; }
.market-deal-card { position: relative; width: min(100%, 8.75rem); aspect-ratio: 700 / 448; align-self: center; opacity: 0; overflow: hidden; transform: translateX(-140%); }
.market-deal-card img { display: block; width: 100%; height: 100%; border: 0.0625rem solid rgba(255,226,116,.46); border-radius: .2rem; background: #061c29; object-fit: contain; box-shadow: .16rem .2rem .42rem rgba(0,0,0,.55); }
@media (prefers-reduced-motion: no-preference) {
  .market-deal-card { animation: market-deal-card 1.05s calc(.55s + var(--deal-index) * .22s) cubic-bezier(.2,.82,.25,1) both; }
  .market-event.is-deal-revealing .market-deal-card { animation: market-deal-pulse .5s ease-out both; }
  .market-event.is-deal-revealing .market-deal-panel { animation: market-deal-panel-fade .5s ease-out both; }
}
@keyframes market-deal-card {
  0% { opacity: 0; transform: translateX(-140%) rotate(-4deg); }
  16%, 100% { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes market-deal-pulse { 0% { opacity: 1; transform: scale(1); } 45% { opacity: .9; transform: scale(1.09); } 100% { opacity: 0; transform: scale(.94); } }
@keyframes market-deal-panel-fade { to { opacity: 0; } }
.market-buy-entry { cursor: pointer; border-radius: .3rem; }
.market-buy-entry.is-market-buy-selected .market-buy-card { outline: .18rem solid #f6c946; outline-offset: .1rem; transform: translateY(-.08rem) scale(1.02); }
.market-deck-number { align-self: center; color: #fff1b4; font-size: .64rem; font-weight: 900; text-align: right; white-space: nowrap; }
.market-buy-card { width: 100%; }
.market-buy-entry[data-market-ship-id] .market-buy-card { width: 3.2rem; aspect-ratio: 1; align-self: center; }
.market-buy-entry[data-market-ship-id] .market-buy-card > img:first-child { border: 0; background: transparent; object-fit: contain; }
.market-buy-ship { grid-template-columns: 2.8rem minmax(0, 6.35rem) minmax(0, 1fr); align-items: center; }
.market-buy-ship .market-buy-card { justify-self: center; }
.market-buy-ship .market-buy-details { align-self: center; margin-top: 0; }
.market-buy-ship.is-market-buy-selected .market-buy-card { filter: drop-shadow(0 0 .4rem #ffe476) drop-shadow(0 0 .8rem rgba(255,226,116,.85)); transform: scale(1.12); }
.market-buy-card .selection-card-view { cursor: pointer; }
.market-buy-details { align-self: start; margin-top: clamp(.95rem, calc(2.25 * var(--layout-vh, 1vh)), 1.35rem); }
.market-buy-name { margin: 0; color: #ffe476; font-size: .66rem; font-weight: 900; line-height: 1.13; text-transform: uppercase; }
.market-buy-name span { display: block; margin-top: .18rem; color: #d7f3f8; font-size: .76rem; }
.market-buy-actions { display: flex; flex-wrap: wrap; gap: .28rem; margin-top: .34rem; }
.market-buy-action { border: 0.0625rem solid rgba(255,226,116,.72); border-radius: .25rem; padding: .19rem .3rem; background: #0b617a; color: #fff2b0; cursor: pointer; font: 900 .5rem/1 system-ui, sans-serif; letter-spacing: .025em; text-transform: uppercase; }
.market-buy-action:hover, .market-buy-action:focus-visible { background: #1383a2; color: #fff; }
.market-buy-action:disabled { background: #5c6265; border-color: #777d80; color: #b8bcbd; cursor: not-allowed; opacity: 1; }
.market-buy-action:disabled:hover, .market-buy-action:disabled:focus-visible { background: #5c6265; color: #b8bcbd; }
.market-buy-action.is-market-discount-active, .market-buy-action.is-market-discount-active:hover, .market-buy-action.is-market-discount-active:focus-visible { background: #fff; border-color: rgb(255, 0, 0); color: rgb(255, 0, 0); }
.market-buy-action.is-locating { outline: 0.125rem solid #ff8d1e; outline-offset: 0.125rem; }
.market-locate-marker { position: absolute; z-index: 14; width: 7.4%; height: 7.4%; transform: translate(-50%, -50%); pointer-events: none; }
.market-locate-marker span { position: absolute; inset: 4%; border: 0.1875rem solid #ff8d1e; border-radius: 50%; background: rgba(255,126,20,.18); box-shadow: 0 0 .55rem rgba(255,126,20,.96), inset 0 0 .65rem rgba(255,207,128,.82); animation: market-locate-pulse 1.2s ease-in-out infinite; }
.market-locate-line { position: fixed; z-index: 70; inset: 0; width: calc(100 * var(--layout-vw, 1vw)); height: calc(100 * var(--layout-vh, 1vh)); overflow: visible; pointer-events: none; }
.market-locate-line line { stroke: #ff8d1e; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 .3rem rgba(255,126,20,.95)); }
@keyframes market-locate-pulse { 50% { transform: scale(1.15); filter: brightness(1.25); } }
.market-sell-grid { flex: 1 1 0; grid-template-rows: repeat(4, minmax(0, 1fr)); margin-top: .62rem; overflow: hidden; }
.market-sell-card-entry { display: grid; grid-template-rows: minmax(0, 1fr) .88rem; width: min(100%, 8.75rem); min-height: 0; align-content: stretch; justify-items: center; gap: .08rem; }
.market-sell-grid .hand-limit-card { width: 100%; align-self: end; }
.market-card-price { color: #ffe476; font-size: .58rem; font-weight: 900; letter-spacing: .035em; white-space: nowrap; }
.market-card-price.is-discount-used { color: #fff; font-size: .48rem; letter-spacing: .01em; }
.market-card-price.is-hidden { visibility: hidden; }
/* Keep every overlay card/price pair on the same baseline. */
.hand-limit-content .market-card-price, .debt-sale-content .market-card-price { position: relative; top: 0.0625rem; }
.market-empty-cards { grid-column: 1 / -1; grid-row: 1 / -1; align-self: center; justify-self: center; margin: 0; color: #fff; font-size: .75rem; font-weight: 900; text-align: center; }
.market-buy-name { font-size: .76rem; }
.market-buy-name span { font-size: .76rem; }
.sea-breath-dialog h2.sea-breath-title { margin: .12rem 0 1.05rem; color: #ffe476; font-family: "Caribbean", Georgia, serif; font-size: clamp(1.4rem, calc(3.2 * var(--layout-vw, 1vw)), 1.8rem); font-weight: 400; line-height: 1.1; letter-spacing: .02em; text-transform: none; }
.sea-breath-dialog #sea-breath-heading { margin: 0; color: #bceff5; font-family: inherit; font-size: inherit; font-weight: 700; line-height: 1.5; letter-spacing: normal; }
.game-screen.is-market-open .turn-timer, .game-screen.is-market-open .game-audio-controls { z-index: 65; }
.game-screen.is-debt-sale-open .turn-timer, .game-screen.is-debt-sale-open .game-audio-controls, .game-screen.is-debt-sale-open .ship-placement-toggle, .game-screen.is-debt-sale-open .game-control-button, .game-screen.is-debt-sale-open .coin-placement-control, .game-screen.is-debt-sale-open .bottom-next-players { z-index: 66; }
.game-screen:has(#hand-limit-right-panel:not([hidden])) .turn-timer, .game-screen:has(#hand-limit-right-panel:not([hidden])) .game-audio-controls, .game-screen:has(#hand-limit-right-panel:not([hidden])) .ship-placement-toggle, .game-screen:has(#hand-limit-right-panel:not([hidden])) .game-control-button, .game-screen:has(#hand-limit-right-panel:not([hidden])) .coin-placement-control, .game-screen:has(#hand-limit-right-panel:not([hidden])) .bottom-next-players { z-index: 66; }

@media (max-width: 720px) {
  .market-event { grid-template-columns: minmax(4.5rem, .55fr) minmax(0, 1fr) minmax(4.5rem, .55fr); }
  .hand-limit-panel { grid-template-columns: minmax(4.5rem, .55fr) minmax(0, 1fr) minmax(4.5rem, .55fr); }
  .debt-sale-panel { grid-template-columns: minmax(4.5rem, .55fr) minmax(0, 1fr) minmax(4.5rem, .55fr); }
  .market-topbar h2 { font-size: 2.1rem; }
  .hand-limit-topbar h2 { font-size: 2.1rem; }
  .debt-sale-topbar h2 { font-size: 2.1rem; }
}

.ship-layer,
.move-options {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ship-layer { z-index: 15; }
.move-options { z-index: 13; }

.board-token-layer { position: absolute; z-index: 14; inset: 0; pointer-events: none; }
.board-chest { position: absolute; width: clamp(1.1rem, calc(2.6 * var(--layout-vw, 1vw)), 1.9rem); aspect-ratio: 1; border: 0; padding: 0; background: transparent; transform: translate(-50%, -50%); filter: drop-shadow(0 .12rem .12rem rgba(0,0,0,.48)); cursor: pointer; pointer-events: auto; }
.board-chest:hover, .board-chest:focus-visible { filter: drop-shadow(0 0 .45rem #ffe476) drop-shadow(0 0 .9rem rgba(255,202,30,.85)); outline: 0; }
.board-token-layer > * { animation: board-item-pulse 1.15s ease-in-out infinite; }
.board-chest img { display: block; width: 100%; height: 100%; object-fit: contain; }
.board-medallion { position: absolute; width: clamp(1rem, calc(2.3 * var(--layout-vw, 1vw)), 1.72rem); aspect-ratio: 1; border: 0; padding: 0; background: transparent; transform: translate(-50%, -50%); filter: drop-shadow(0 .12rem .12rem rgba(0,0,0,.48)); cursor: pointer; pointer-events: auto; }
.board-medallion:hover, .board-medallion:focus-visible { filter: drop-shadow(0 0 .45rem #ffe476) drop-shadow(0 0 .9rem rgba(255,202,30,.85)); outline: 0; }
.board-medallion img { display: block; width: 100%; height: 100%; object-fit: contain; }
.board-medallion[draggable="true"] { cursor: grab; }
.board-medallion[draggable="true"]:active { cursor: grabbing; }
.storm-coin-images { display: flex; justify-content: center; align-items: center; min-height: 5.25rem; margin: .4rem auto .8rem; }
.storm-coin-images img { display: block; width: 5.25rem; height: 5.25rem; object-fit: contain; }
.storm-coin-images img + img { margin-left: -.85rem; }
.board-house { z-index: 2; width: clamp(1.45rem, calc(3.2 * var(--layout-vw, 1vw)), 2.3rem); cursor: pointer; }
.board-house:hover, .board-house:focus-visible { filter: drop-shadow(0 0 .45rem #ffe476) drop-shadow(0 0 .9rem rgba(255,202,30,.85)); outline: 0; }
.board-house img { display: block; width: 100%; height: 100%; object-fit: contain; }
.board-treasure-flag { z-index: 3; width: clamp(1.45rem, calc(3.2 * var(--layout-vw, 1vw)), 2.3rem); cursor: pointer; }
.board-treasure-flag img { display: block; width: 100%; height: 100%; object-fit: contain; }
.inventory-unit.inventory-flag { gap: 0; color: #ffe600; }
.inventory-unit.inventory-flag .flag-token { width: 1.5rem; height: 1.5rem; margin-right: -.12rem; }
.captain-status .inventory-unit.inventory-flag .flag-token { width: 1.35rem; height: 1.35rem; }
.inventory-card.is-treasure-pulsing { animation: treasure-card-pulse .72s ease-in-out infinite; box-shadow: 0 0 .7rem rgba(255,220,69,.95), 0 0 1.35rem rgba(255,177,37,.58); }
.card-treasure-flag { position: absolute; z-index: 3; right: .18rem; bottom: .18rem; width: 29%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 .08rem .12rem rgba(0,0,0,.72)); }
@keyframes treasure-card-pulse { 50% { transform: translateY(-.14rem) scale(1.045); filter: brightness(1.18); } }
.inspector-token.color-house::after { top: 0; width: 100%; height: 100%; transform: none; }

@keyframes board-item-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.13); }
}

.space-hotspots { position: absolute; z-index: 1; inset: 0; }
.space-hotspots button { position: absolute; width: 7.4%; height: 7.4%; border: 0; border-radius: .2rem; outline: 0; background: transparent; cursor: default; transform: translate(-50%, -50%); }

.ship-piece {
  position: absolute;
  z-index: 3;
  width: clamp(1.35rem, calc(3.15 * var(--layout-vw, 1vw)), 2.25rem);
  aspect-ratio: 1.15;
  pointer-events: none;
  transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y));
  isolation: isolate;
  filter: none;
  transition: left 145ms cubic-bezier(0.2, 0.9, 0.3, 1), top 145ms cubic-bezier(0.2, 0.9, 0.3, 1);
  animation: board-ship-pulse 1.15s ease-in-out infinite;
}

@keyframes board-ship-pulse {
  0%, 100% { transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) scale(1); }
  50% { transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) scale(1.1); }
}

.ship-piece img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  transform: translateY(-8%);
}
.ship-piece.is-facing-flipped img { transform: translateY(-8%) scaleX(-1); }

.barrel-explosion {
  position: absolute;
  z-index: 10;
  width: clamp(4.8rem, calc(12 * var(--layout-vw, 1vw)), 8.5rem);
  height: auto;
  max-width: none;
  pointer-events: none;
  filter: none;
  mix-blend-mode: normal;
  transform-origin: 50% 50%;
  animation: barrel-explosion .6s cubic-bezier(.12,.8,.26,1) forwards;
}

@keyframes barrel-explosion {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.16) rotate(-10deg); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.22) rotate(4deg); }
  45% { opacity: .93; transform: translate(-50%, -50%) scale(1.48) rotate(-3deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.05) rotate(8deg); }
}

.ship-piece::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--ship-color);
  content: "";
  mix-blend-mode: color;
  opacity: 0.98;
  -webkit-mask: var(--ship-art) center / contain no-repeat;
  mask: var(--ship-art) center / contain no-repeat;
}
.ship-piece::after { display: none; }
.ship-piece.is-yellow-fleet::after { background: #fff200; mix-blend-mode: color; opacity: .88; filter: saturate(1.45) brightness(1.12); }

.ship-piece.sloop {
  width: clamp(1.45rem, calc(3.35 * var(--layout-vw, 1vw)), 2.45rem);
}

.ship-piece.frigate {
  width: clamp(1.45rem, calc(3.35 * var(--layout-vw, 1vw)), 2.45rem);
}

.ship-piece.is-current {
  z-index: 7;
  animation: active-fleet-glimmer 1.15s ease-in-out infinite;
}

.turn-ship-marker {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 93%;
  width: clamp(.55rem, calc(1.25 * var(--layout-vw, 1vw)), .9rem);
  aspect-ratio: 1.25;
  background: var(--ship-color);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 .08rem .08rem rgba(0,0,0,.52));
  transform-origin: 50% 100%;
  animation: turn-marker-hover 1.15s ease-in-out infinite;
}

@keyframes turn-marker-hover {
  0%, 100% { transform: translate(-50%, 0) rotate(-5deg); }
  50% { transform: translate(-50%, -.38rem) rotate(5deg); }
}

.ship-piece.is-cursed::before { position: absolute; z-index: 3; inset: -23%; border-radius: 50%; background: radial-gradient(ellipse at 50% 72%, rgba(215,236,240,.08) 0 22%, rgba(192,222,225,.28) 37%, rgba(182,218,220,0) 70%); content: ""; filter: blur(.25rem); mix-blend-mode: screen; animation: cursed-smoke 1.8s ease-in-out infinite; pointer-events: none; }
.ship-piece.is-cursed img { opacity: .82; filter: grayscale(1) brightness(3.1) contrast(.42) drop-shadow(0 0 .28rem rgba(255,255,255,.96)); animation: curse-white-in 1s ease-out both; }
.ship-piece.is-curse-clearing img { animation: curse-color-return .64s ease-out both; }
.cursed-label { position: absolute; right: 50%; bottom: .28rem; z-index: 5; min-width: 2.65rem; border: 0.0625rem solid rgba(255,255,255,.95); border-radius: 62.4375rem; padding: .13rem .3rem; background: #17374a; color: #fff; font-size: .58rem; font-weight: 900; line-height: 1; white-space: nowrap; transform: translateX(50%); }
@keyframes curse-white-in { from { opacity: 1; filter: none; } to { opacity: .82; filter: grayscale(1) brightness(3.1) contrast(.42) drop-shadow(0 0 .28rem rgba(255,255,255,.96)); } }
@keyframes curse-color-return { from { opacity: .82; filter: grayscale(1) brightness(3.1) contrast(.42) drop-shadow(0 0 .28rem rgba(255,255,255,.96)); } to { opacity: 1; filter: none; } }
@keyframes cursed-smoke { 0%,100% { opacity: .35; transform: translate(-.15rem,.25rem) scale(.82); } 48% { opacity: .72; transform: translate(.2rem,-.42rem) scale(1.14); } }

@keyframes active-fleet-glimmer {
  0%, 100% { transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) scale(1.16); filter: drop-shadow(0 0 .18rem var(--ship-color)); }
  50% { transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) scale(1.32); filter: drop-shadow(0 0 .62rem var(--ship-color)); }
}

.ship-piece.is-sailing {
  z-index: 8;
  --offset-x: 0rem !important;
  --offset-y: 0rem !important;
  transition: none;
  animation: ship-rock .52s ease-in-out infinite;
}

.ship-piece.is-forced-spin { animation: forced-ship-spin .55s linear infinite; }

@keyframes forced-ship-spin {
  from { transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) rotate(0deg); }
  to { transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) rotate(360deg); }
}

@keyframes ship-rock {
  0%, 100% { transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) rotate(-5deg); }
  50% { transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) rotate(5deg); }
}

.ship-piece.is-swirl-swallowed {
  z-index: 9;
  animation: swirl-swallow .27s cubic-bezier(.3,.02,.7,.25) forwards;
}

.ship-piece.is-swirl-emerging {
  z-index: 9;
  animation: swirl-emerge .41s cubic-bezier(.15,.8,.28,1.25) both;
}

@keyframes swirl-swallow {
  0% { opacity: 1; transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) scale(.08) rotate(200deg); }
}

@keyframes swirl-emerge {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) scale(.08) rotate(-180deg); }
  72% { opacity: 1; transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) scale(1.18) rotate(12deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) scale(1) rotate(0); }
}

.move-options {
  z-index: 30;
}

.move-option {
  position: absolute;
  width: clamp(2.25rem, calc(5.8 * var(--layout-vw, 1vw)), 4.05rem);
  height: clamp(2.25rem, calc(5.8 * var(--layout-vw, 1vw)), 4.05rem);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.move-option:hover .landing-ring,
.move-option:focus-visible .landing-ring {
  border-color: #fff3b2;
  background: rgba(255, 210, 75, 0.28);
  transform: scale(1.15);
}

.landing-ring {
  position: absolute;
  inset: 4%;
  border: 0.1875rem solid var(--gold);
  border-radius: 50%;
  background: rgba(244, 183, 45, 0.17);
  box-shadow: 0 0 0.5rem rgba(244, 183, 45, 0.9), inset 0 0 0.6rem rgba(255, 244, 168, 0.75);
  animation: landing-pulse 1.25s ease-in-out infinite, market-glimmer 2.4s linear infinite;
  transition: 160ms ease;
}

.loaded-die-option .landing-ring { opacity: 0; }
.mixed-die-option .landing-ring { border-color: var(--gold); background: rgba(244, 183, 45, 0.17); -webkit-mask: none; mask: none; box-shadow: 0 0 .5rem rgba(244, 183, 45, .9), inset 0 0 .6rem rgba(255, 244, 168, .75); animation: landing-pulse 1.25s ease-in-out infinite, market-glimmer 2.4s linear infinite; }
.loaded-die-diamond { position: absolute; inset: 18%; border: 0.1875rem solid #58f49a; border-radius: .2rem; box-shadow: 0 0 .55rem rgba(45, 195, 90, .94), inset 0 0 .5rem rgba(163, 255, 192, .38); transform: rotate(45deg); animation: loaded-die-pulse 1.25s ease-in-out infinite, market-glimmer 2.4s linear infinite; transition: 160ms ease; }
.move-option:hover .loaded-die-diamond, .move-option:focus-visible .loaded-die-diamond { border-color: #d5ffe2; box-shadow: 0 0 .8rem rgba(157, 255, 199, 1), inset 0 0 .6rem rgba(163, 255, 192, .52); transform: rotate(45deg) scale(1.12); }
@keyframes loaded-die-pulse { 0%, 100% { box-shadow: 0 0 .35rem rgba(45, 195, 90, .6), inset 0 0 .45rem rgba(163, 255, 192, .32); } 50% { box-shadow: 0 0 1rem rgba(91, 246, 143, 1), inset 0 0 .8rem rgba(163, 255, 192, .62); } }

@keyframes market-glimmer {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.45) saturate(1.35); }
}

@keyframes landing-pulse {
  0%, 100% { box-shadow: 0 0 0.35rem rgba(244, 183, 45, 0.6), inset 0 0 0.45rem rgba(255, 244, 168, 0.45); }
  50% { box-shadow: 0 0 1rem rgba(255, 216, 90, 1), inset 0 0 0.9rem rgba(255, 244, 168, 0.9); }
}

.ghost-ship {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.76;
  filter: grayscale(1) sepia(1) saturate(1.7) brightness(1.75) drop-shadow(0 0 0.2rem #fff8cc);
}
.ghost-ship.is-facing-flipped, .ghost-choice img.is-facing-flipped { transform: scaleX(-1); }

.ghost-fleet {
  position: absolute;
  inset: 14%;
}
.ghost-fleet.is-paired { transform: translateX(-21%); }

.ghost-fleet .ghost-ship:only-child {
  inset: 0;
}

.ghost-fleet .ghost-ship:first-child:not(:only-child) {
  inset: 0 36% 0 0;
}

.ghost-fleet .ghost-ship:last-child:not(:only-child) {
  inset: 0 0 0 36%;
}

.move-option.sloop .ghost-ship {
  inset: 16% 25%;
}

.move-option.frigate .ghost-ship {
  inset: 16% 19%;
}

.swirl-option .landing-ring {
  border-color: #49f6ff;
  background: rgba(35, 220, 255, 0.2);
  box-shadow: 0 0 0.5rem rgba(35, 233, 255, 0.95), inset 0 0 0.6rem rgba(190, 255, 255, 0.85);
  animation: swirl-pulse 1.2s ease-in-out infinite, swirl-glimmer 2s linear infinite;
}

.swirl-option:hover .landing-ring,
.swirl-option:focus-visible .landing-ring {
  border-color: #e5ffff;
  background: rgba(82, 240, 255, 0.35);
}

.swirl-option .ghost-ship {
  position: absolute;
  z-index: 1;
  inset: 13%;
  width: 74%;
  height: 74%;
  object-fit: contain;
  opacity: .8;
  filter: sepia(1) saturate(1.1) hue-rotate(135deg) brightness(1.75) drop-shadow(0 0 .22rem #cfffff);
}

.swirl-label {
  position: absolute;
  z-index: 3;
  top: -1.25rem;
  left: 50%;
  border: 0.0625rem solid rgba(146, 250, 255, .9);
  border-radius: 62.4375rem;
  padding: .12rem .38rem;
  background: #043e5b;
  color: #d9ffff;
  font-size: .66rem;
  font-weight: 900;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swirl-option .landing-label {
  border-color: rgba(132, 248, 255, .82);
  background: #043e5b;
  color: #d9ffff;
}

@keyframes swirl-pulse {
  0%, 100% { box-shadow: 0 0 .35rem rgba(35, 233, 255, .65), inset 0 0 .45rem rgba(190, 255, 255, .5); }
  50% { box-shadow: 0 0 1rem rgba(60, 242, 255, 1), inset 0 0 .9rem rgba(210, 255, 255, .95); }
}

@keyframes swirl-glimmer {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.4) saturate(1.5); }
}

.landing-label {
  position: absolute;
  right: 50%;
  bottom: -0.4rem;
  z-index: 2;
  min-width: 1.7rem;
  border: 0.0625rem solid rgba(255, 238, 164, 0.8);
  border-radius: 62.4375rem;
  padding: 0.13rem 0.3rem;
  background: #432f08;
  color: #fff1b6;
  font-size: 0.66rem;
  font-weight: 900;
  transform: translateX(50%);
}

.loaded-die-option .landing-label,
.mixed-die-option .landing-label {
  border-color: rgba(88, 244, 154, .9);
  background: #063f33;
  color: #a3ffc0;
  box-shadow: 0 0 .42rem rgba(45, 195, 90, .58);
}

.mixed-die-option .landing-label { color: #fff1b6; }

.ship-picker {
  display: grid;
  margin: 1.25rem 0 0.7rem;
  gap: 0.6rem;
}

.ship-picker[hidden] {
  display: none;
}

.ship-choice {
  display: grid;
  width: 100%;
  min-height: 4.2rem;
  grid-template-columns: 3.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  border: 0.0625rem solid rgba(169, 196, 203, 0.22);
  border-radius: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: rgba(3, 30, 42, 0.62);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: 160ms ease;
}

.ship-choice:hover:not(:disabled),
.ship-choice.is-selected {
  border-color: rgba(244, 183, 45, 0.78);
  background: rgba(244, 183, 45, 0.12);
  transform: translateY(-0.0625rem);
}

.ship-choice:disabled {
  cursor: default;
}

.ship-choice-art {
  display: block;
  width: 3.25rem;
  height: 3.1rem;
  object-fit: contain;
  filter: drop-shadow(0 0.18rem 0.16rem rgba(0, 0, 0, 0.72));
}

.ship-choice strong,
.ship-choice small {
  display: block;
}

.ship-choice strong {
  color: #effcff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
}

.ship-choice small {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.choose-mark {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
}

.ship-choice.is-selected .choose-mark {
  color: var(--gold);
}

.ghost-choice-fan {
  position: absolute;
  z-index: 9;
  width: 12rem;
  height: 10rem;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.ghost-choice-fan::before,
.ghost-choice-fan::after {
  position: absolute;
  top: 51%;
  left: 50%;
  width: 4.25rem;
  border-top: 0.125rem solid rgba(255, 222, 100, 0.86);
  content: "";
  transform-origin: left center;
}

.ghost-choice-fan::before { transform: rotate(-133deg); }
.ghost-choice-fan::after { transform: rotate(-47deg); }

.ghost-choice-origin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.5rem;
  height: 3.5rem;
  border: 0.1875rem solid var(--gold);
  border-radius: 50%;
  background: rgba(244, 183, 45, 0.15);
  box-shadow: 0 0 0.75rem rgba(255, 222, 100, 0.88), inset 0 0 0.65rem rgba(255, 243, 177, 0.64);
  transform: translate(-50%, -50%);
}

.ghost-choice-fan.is-loaded-die-choice .ghost-choice-origin {
  opacity: 0;
}

.ghost-choice-diamond { position: absolute; z-index: 1; top: 50%; left: 50%; width: 2.45rem; height: 2.45rem; border: 0.1875rem solid #58f49a; border-radius: .2rem; box-shadow: 0 0 .6rem rgba(45, 195, 90, .94), inset 0 0 .5rem rgba(163, 255, 192, .38); transform: translate(-50%, -50%) rotate(45deg); animation: loaded-die-pulse 1.25s ease-in-out infinite; }

.ghost-choice-fan.is-loaded-die-choice::before,
.ghost-choice-fan.is-loaded-die-choice::after {
  border-color: rgba(88, 244, 154, .9);
}

.ghost-choice-fan.is-mixed-die-choice::before { border-color: rgba(244, 183, 45, .9); box-shadow: 0 0 .4rem rgba(244, 183, 45, .8); }
.ghost-choice-fan.is-mixed-die-choice::after { border-color: rgba(244, 183, 45, .9); box-shadow: 0 0 .4rem rgba(244, 183, 45, .8); }
.ghost-choice-fan.is-mixed-die-choice .ghost-choice-origin { opacity: 1; border: 0.1875rem solid var(--gold); background: rgba(244, 183, 45, .15); box-shadow: 0 0 .75rem rgba(255, 222, 100, .88), inset 0 0 .65rem rgba(255, 243, 177, .64); }
.ghost-choice-fan.is-mixed-die-choice:has(.ghost-choice.sloop.is-loaded-die-choice)::before,
.ghost-choice-fan.is-mixed-die-choice:has(.ghost-choice.frigate.is-loaded-die-choice)::after { border-color: rgba(88, 244, 154, .95); box-shadow: 0 0 .45rem rgba(45, 195, 90, .88); }

.ghost-choice-prompt {
  position: absolute;
  left: 50%;
  top: 53%;
  z-index: 2;
  padding: 0.2rem 0.45rem;
  border: 0.0625rem solid rgba(255, 241, 182, 0.75);
  border-radius: 62.4375rem;
  background: #063958;
  color: #fff5c0;
  font-size: 0.64rem;
  font-weight: 900;
  white-space: nowrap;
  transform: translate(-50%, 0);
}

.ghost-choice {
  position: absolute;
  top: 0;
  display: grid;
  width: 4.1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff8ca;
  cursor: pointer;
  filter: drop-shadow(0 0 0.32rem rgba(255, 225, 110, 0.9));
  animation: ghost-rise 380ms cubic-bezier(0.16, 0.85, 0.3, 1) both;
}

.ghost-choice img {
  width: 100%;
  height: 3.15rem;
  object-fit: contain;
  opacity: .76;
  filter: grayscale(1) sepia(1) saturate(1.7) brightness(1.75) drop-shadow(0 0 .2rem #fff8cc);
}

.ghost-choice.sloop { left: 0; --split-x: -0.5rem; }
.ghost-choice.frigate { right: 0; --split-x: 0.5rem; animation-delay: 70ms; }
.ghost-choice:hover,
.ghost-choice:focus-visible { filter: drop-shadow(0 0 0.55rem #fff3a4); transform: translateY(-0.25rem) scale(1.08); }
.ghost-choice.is-loaded-die-choice { filter: drop-shadow(0 0 .5rem rgba(88, 244, 154, .95)); }
.ghost-choice.is-loaded-die-choice img { filter: grayscale(1) sepia(1) saturate(1.45) hue-rotate(68deg) brightness(1.8) drop-shadow(0 0 .28rem #a3ffc0); }
.ghost-choice.is-loaded-die-choice:hover,
.ghost-choice.is-loaded-die-choice:focus-visible { filter: drop-shadow(0 0 .65rem rgba(157, 255, 199, 1)); }

@keyframes ghost-rise {
  from { opacity: 0; transform: translate(2.55rem, 4.6rem) scale(0.5) rotate(0deg); }
  to { opacity: 1; transform: translate(var(--split-x), 0); }
}

.movement-note {
  margin: 0.8rem 0 0;
  color: #7faab4;
  font-size: 0.76rem;
  line-height: 1.4;
}

.roll-panel {
  border-left: 0.0625rem solid var(--line);
  padding: clamp(.9rem, calc(2 * var(--layout-vw, 1vw)), 1.8rem) clamp(.8rem, calc(1.4 * var(--layout-vw, 1vw)), 1.4rem);
  background: rgba(2, 17, 27, 0.68);
}

.space-inspector {
  position: relative;
  display: grid;
  grid-template-columns: clamp(14rem, calc(16 * var(--layout-vw, 1vw)), 20rem) 4.8rem;
  grid-template-rows: auto auto;
  column-gap: .45rem;
  width: min(100%, 23rem);
  margin-top: auto;
  overflow: visible;
  color: #effcff;
  pointer-events: none;
}

.space-inspector[hidden] { display: none; }
.space-inspector-art { grid-column: 1; grid-row: 1; position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border: 0.0625rem solid rgba(255, 226, 116, .62); border-radius: .5rem; background: #042b42; }
.space-inspector-art > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.space-inspector > div:last-child { grid-column: 1; grid-row: 2; padding: .48rem .05rem 0; }
.space-inspector span { display: block; margin-bottom: .1rem; color: #ffe476; font-size: .66rem; font-weight: 900; letter-spacing: .12em; }
.space-inspector strong { display: block; font-size: .82rem; line-height: 1.18; }
.space-inspector-rail { grid-column: 2; grid-row: 1; display: block; width: 100%; }
.space-inspector-items { width: 100%; height: 100%; }
.space-inspector-ships { display: none; }
.space-inspector-table { display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); height: 100%; }
.space-inspector-table-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.space-inspector-table-row > span { display: grid; min-width: 0; min-height: 0; place-items: center; }
.inspector-ship { position: relative; display: inline-block; width: 2.5rem; aspect-ratio: 1.15; isolation: isolate; }
.space-inspector-table .inspector-ship.frigate { width: 2.5rem; }
.inspector-ship img { display: block; width: 100%; height: 100%; object-fit: contain; filter: none; }
.inspector-ship::after { position: absolute; z-index: 1; inset: 0; background: var(--ship-color); content: ""; mix-blend-mode: color; opacity: .98; -webkit-mask: var(--ship-art) center / contain no-repeat; mask: var(--ship-art) center / contain no-repeat; }
.inspector-ship::after { display: none; }
.inspector-token { position: relative; display: inline-block; width: 2.2rem; height: 2.2rem; isolation: isolate; }
.inspector-token img { display: block; width: 100%; height: 100%; object-fit: contain; }
.token-color-grey { --token-color-filter: grayscale(1) contrast(.8) brightness(1.12); filter: var(--token-color-filter); }
.token-color-red { --token-color-filter: saturate(1.08) contrast(1.04); filter: var(--token-color-filter); }
.token-color-green { --token-color-filter: hue-rotate(105deg) saturate(1.4) brightness(.92); filter: var(--token-color-filter); }
.token-color-purple { --token-color-filter: hue-rotate(275deg) saturate(1.2) brightness(.66) contrast(1.14); filter: var(--token-color-filter); }
.token-color-yellow { --token-color-filter: sepia(1) saturate(3.2) hue-rotate(2deg) brightness(1.1); filter: var(--token-color-filter); }
.inspector-house { color: #d3a564; font-size: 2.3rem; font-style: normal; line-height: 1; text-align: center; }

.order-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 30;
  width: min(23rem, calc(calc(100 * var(--layout-vw, 1vw)) - 2.4rem));
  border: 0.0625rem solid rgba(255, 226, 116, .82);
  border-radius: .9rem;
  padding: 1.35rem;
  background: #052f46;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .65);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
  transition: opacity .18s ease-in, transform .18s cubic-bezier(.45, 0, .7, .25);
}

.order-popup[hidden] { display: none; }
.order-popup.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: order-popup-in .24s cubic-bezier(.16,.85,.3,1) both; }
.order-popup.is-closing { opacity: 0; transform: translate(-50%, -50%) scale(.72); animation: order-popup-out .18s cubic-bezier(.45,0,.7,.25) both; }
.order-popup { text-align: center; }
.order-popup h2 { margin: 0 0 1rem; color: #ffe476; font-size: clamp(1.4rem, calc(3.2 * var(--layout-vw, 1vw)), 1.8rem); line-height: 1.1; }
.order-popup-title { font-family: "Caribbean", Georgia, serif; font-weight: 400; }
.order-popup-close { position: absolute; top: .5rem; right: .65rem; border: 0; background: transparent; color: #d5eef1; font-size: 1.65rem; cursor: pointer; }
.order-popup-list { display: grid; gap: .35rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.order-popup-list li { display: grid; grid-template-columns: 1.3rem .85rem 1fr; align-items: center; gap: .45rem; min-height: 2.4rem; border-bottom: 0.0625rem solid rgba(174, 210, 219, .18); color: #effcff; }
.order-popup-list li > span { color: #ffe476; font-family: Georgia, serif; font-weight: 900; }
.order-popup-list i { width: .7rem; height: .7rem; border: 0.125rem solid rgba(255,255,255,.75); border-radius: 50%; background: var(--player-color); }
.order-popup-list strong { font-family: "Caribbean", Georgia, serif; font-size: 1.15rem; }
@keyframes order-popup-in { 0% { opacity:0; transform:translate(-50%,-50%) scale(.72); } 74% { opacity:1; transform:translate(-50%,-50%) scale(1.055); } 100% { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes order-popup-out { 0% { opacity:1; transform:translate(-50%,-50%) scale(1); } 26% { opacity:1; transform:translate(-50%,-50%) scale(1.055); } 100% { opacity:0; transform:translate(-50%,-50%) scale(.72); } }

.roll-panel h2 {
  font-size: clamp(2rem, calc(3 * var(--layout-vw, 1vw)), 2.7rem);
}

.fleet-status {
  margin: 0;
  border: 0.0625rem solid rgba(174, 210, 219, 0.24);
  border-radius: 0.72rem;
  overflow: hidden;
  background: rgba(1, 25, 39, 0.58);
}

.fleet-status-heading {
  display: flex;
  justify-content: space-between;
  padding: 0.52rem 0.72rem;
  border-bottom: 0.0625rem solid rgba(174, 210, 219, 0.18);
  color: #84aeb8;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.captain-status {
  padding: 0.54rem 0.72rem 0.58rem;
  border-bottom: 0.0625rem solid rgba(174, 210, 219, 0.15);
}

.captain-status { cursor: pointer; }
.captain-status:hover, .captain-status:focus-visible { background: rgba(70,155,181,.2); outline: none; }

.captain-status:last-child { border-bottom: 0; }

.captain-status.is-current { background: linear-gradient(90deg, color-mix(in srgb, var(--captain-color) 19%, transparent), transparent); }

.captain-status-main {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto 2rem;
  align-items: center;
  gap: 0.48rem;
}

.captain-status-main strong {
  overflow: hidden;
  color: #effcff;
  font-family: "Caribbean", Georgia, serif;
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.captain-status-dot-wrap { position: relative; display: block; width: .76rem; height: .76rem; }
.captain-status-dot {
  display: block;
  width: 0.76rem;
  height: 0.76rem;
  border: 0.125rem solid rgba(255,255,255,0.82);
  border-radius: 50%;
  background: var(--captain-color);
  box-shadow: 0 0 0.45rem var(--captain-color);
}
.captain-admin-inventory-button { position: absolute; inset: -.24rem; display: none; border: 0; border-radius: 50%; padding: 0; background: transparent; cursor: pointer; }
.game-screen.is-developer-controls .captain-admin-inventory-button { display: block; }
.game-screen.is-developer-controls .captain-admin-inventory-button:hover, .game-screen.is-developer-controls .captain-admin-inventory-button:focus-visible { transform: scale(1.25); outline: 0.125rem solid #ffe476; outline-offset: .12rem; }

.captain-score-wrap { display: grid; justify-self: end; min-width: 2rem; text-align: right; }
.captain-points { min-width: 2rem; color: #ffe89b; font-family: Georgia, serif; font-size: 1.12rem; font-weight: 900; text-align: right; }
.captain-eliminated { color: rgb(255, 0, 0); font-family: "Caribbean", Georgia, serif; font-size: .78rem; line-height: .88; white-space: nowrap; }
.victory-dialog { width:min(calc(100 * var(--layout-vw, 1vw)),calc(100 * var(--layout-dvh, 1dvh))); height:min(calc(100 * var(--layout-vw, 1vw)),calc(100 * var(--layout-dvh, 1dvh))); max-width:none; max-height:none; border:0.125rem solid #ffe476; border-radius:0; padding:clamp(1.5rem,calc(5 * var(--layout-vw, 1vw)),4rem); background:#052b40; color:#effcff; text-align:center; }.victory-dialog::backdrop{background:rgba(0,17,30,.78)}.victory-dialog h2{margin:0;color:#ffe476;font:clamp(2.6rem,calc(6 * var(--layout-vw, 1vw)),5rem) "Caribbean",Georgia,serif}.victory-subtitle{font:clamp(1.25rem,calc(3 * var(--layout-vw, 1vw)),2rem) "Caribbean",Georgia,serif}.victory-last-move{display:grid;gap:.45rem;max-width:38rem;margin:1.5rem auto}.victory-last-move strong{color:#ffe476;font-family:"Caribbean",Georgia,serif}.victory-score-summary{display:grid;justify-items:center;gap:.2rem;max-width:24rem;margin:1.5rem auto 0;padding-bottom:1.25rem;border-bottom:0.0625rem solid rgba(255,228,118,.7);color:#d7f3f8;font-weight:900}.victory-score-summary span{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase}.victory-score-summary strong{color:#ffe476;font:clamp(2rem,calc(5 * var(--layout-vw, 1vw)),3rem) "Caribbean",Georgia,serif;line-height:1}.victory-status{margin:1.25rem 0 2rem;color:#d7f3f8;font-weight:900}
.victory-status{display:flex;justify-content:center;align-items:center;gap:.85rem}.victory-status .inventory-house img{width:1.815rem;height:1.815rem}.victory-status .inventory-medallion img{width:1.265rem;height:1.265rem}.victory-port-ships{display:inline-flex;align-items:center;gap:.3rem}.victory-port-ship{display:inline-flex;align-items:center;gap:.03rem}.victory-port-ship img{width:1.652rem;height:1.4rem;object-fit:contain}.victory-port-ship.sloop img,.captain-ship-marker.sloop img{transform:scale(1.22)}.victory-port-ship b{color:#ffe600;font-size:inherit}.victory-turn-number{margin-top:-.5rem;color:#d7f3f8;font-weight:900}
.captain-eliminated-row { grid-column: 1 / -1; align-self: center; }
.captain-detail-eliminated { color: rgb(255, 0, 0); font-family: "Caribbean", Georgia, serif; font-size: 1.28rem; }

.captain-inventory {
  display: grid;
  grid-template-columns: minmax(3.6rem, auto) minmax(0, 1fr);
  min-height: 1.5rem;
  align-items: center;
  column-gap: 0.42rem;
  margin-top: 0.32rem;
  color: #b9d7dc;
  font-size: 0.69rem;
  font-weight: 850;
}
.captain-cash-column { display: inline-flex; align-items: center; min-width: 0; }
.captain-inventory-items { display: inline-flex; min-width: 0; align-items: center; gap: 0.42rem; }

.captain-ship-status { display: inline-flex; min-height: 0; align-items: center; gap: .2rem; }
.status-card { display: inline-flex; align-items: center; gap: .1rem; color: #b9d7dc; font-size: .69rem; font-weight: 850; }
.captain-ship-marker { position: relative; display: inline-flex; align-items: center; gap: .16rem; min-width: 1.428rem; height: 1.21rem; }
.captain-ship-marker img { width: 1.428rem; height: 1.21rem; object-fit: contain; opacity: 1; }
.captain-ship-marker::before { position: absolute; z-index: 1; inset: 0; background: var(--ship-color); content: ""; opacity: 1; -webkit-mask: var(--ship-art) center / contain no-repeat; mask: var(--ship-art) center / contain no-repeat; }
.captain-ship-marker::before { display: none; }
.captain-ship-marker.is-lost::after { position: absolute; z-index: 2; inset: 0; color: #ff665d; content: "×"; font-family: Arial, sans-serif; font-size: 1.5rem; font-weight: 900; line-height: .76rem; text-align: center; text-shadow: 0 0.0625rem 0.125rem #0a1820; }
.captain-ship-marker.is-port { gap: 0; }
.captain-ship-marker.is-port b { position: relative; z-index: 2; margin-left: -.16rem; color: #ffe600; font-size: .68rem; line-height: 1; }
.captain-ship-marker.is-medallion { min-width: 1.95rem; gap: .08rem; }
.captain-ship-marker.is-medallion::before { display: none; }
.captain-ship-marker.is-medallion img { width: 1rem; height: 1rem; opacity: 1; }
.captain-ship-marker.is-medallion b { color: #ffe600; font-size: .68rem; }

.inventory-unit { display: inline-flex; align-items: center; gap: 0.12rem; white-space: nowrap; }
.inventory-unit img { width: 1.15rem; height: 1.15rem; object-fit: contain; }
.inventory-unit.inventory-house img { width: 1.65rem; height: 1.65rem; }
.inventory-unit.inventory-house { gap: 0; color: #ffe600; }
.inventory-unit.inventory-house img { margin-right: -.16rem; }
.inventory-medallion { color: #ffe600; }
.flag-token { position: relative; display: inline-block; width: 1.15rem; height: 1.15rem; isolation: isolate; }
.flag-token img { display: block; width: 100%; height: 100%; }
.inventory-unit.credits { margin-right: 0.14rem; color: #ffe7a0; }
.inventory-unit.credits b { color: #ffe600; font-family: Georgia, serif; font-size: 1rem; }
.house-token { width: 1rem; color: var(--token-color, #d3a564); font-size: 1.15rem; font-style: normal; line-height: 1; }
.color-house { position: relative; isolation: isolate; }
.color-house > img { filter: grayscale(1) contrast(1.08); }
.color-house::after { display: none; }
.inventory-unit.color-house::after { width: 1.65rem; height: 1.65rem; }
.captain-detail-unit.color-house::after { width: 2.05rem; height: 2.05rem; }
.card-token { display: inline-block; width: 0.62rem; height: 0.9rem; border: 0.0625rem solid #d4a169; border-radius: 0.12rem; background: #70401f; box-shadow: inset 0 0 0 0.0625rem rgba(42,16,5,.5); }
.coin-token { display: inline-block; width: 0.82rem; height: 0.82rem; border: 0.125rem solid #ffe161; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 0.0625rem #a97509; }

.roll-controls { flex: 0 0 auto; padding-top: 0; }

.roll-instruction {
  margin: .65rem 0 .65rem;
  color: var(--muted);
  line-height: 1.38;
}

.die-stage {
  position: relative;
  display: grid;
  margin-bottom: .55rem;
  grid-template-columns: 5.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.test-die-faces { position: absolute; top: -.3rem; left: 4.25rem; z-index: 3; display: grid; grid-template-columns: repeat(3, 1.25rem); gap: .14rem; }
.test-die-faces button { display: grid; width: 1.25rem; height: 1.25rem; place-items: center; overflow: hidden; border: 0.0625rem solid rgba(255,255,255,.62); border-radius: .18rem; padding: 0; background: #e8edf0; cursor: pointer; box-shadow: 0 .08rem .18rem rgba(0,0,0,.35); transition: transform .14s ease, opacity .14s ease; }
.test-die-faces button:hover:not(:disabled), .test-die-faces button:focus-visible:not(:disabled) { transform: scale(1.18); border-color: #ffe476; }
.test-die-faces button:disabled { cursor: not-allowed; opacity: .32; }
.test-die-faces img { display: block; width: 100%; height: 100%; object-fit: cover; }
.game-screen:not(.is-developer-controls) .test-die-faces { display: none; }
.game-screen.is-developer-controls .test-die-faces { position: fixed; top: auto; bottom: 1rem; left: 50%; z-index: 16; grid-template-columns: repeat(6, 1.25rem); transform: translateX(-50%); }

.special-card-hold { display: flex; flex-wrap: nowrap; align-items: center; gap: .28rem; min-height: 1.45rem; }
.held-cards-label { color: #ffe476; font-size: .58rem; font-weight: 900; letter-spacing: .05em; line-height: 1.08; text-align: left; text-transform: uppercase; white-space: nowrap; }
.held-cards-row { display: flex; flex: 0 0 auto; align-items: center; gap: .25rem; }
.die-stage-info { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.die-stage .held-card-button { width: 2.25rem; }
.held-card-button { display: block; width: 3.1rem; aspect-ratio: 700 / 448; border: 0.0625rem solid rgba(255,226,116,.72); border-radius: 0; padding: 0; overflow: hidden; background: rgba(0,14,25,.32); cursor: pointer; transition: filter .16s ease, transform .16s ease, box-shadow .16s ease; }
.held-card-button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.held-card-button:hover, .held-card-button:focus-visible { filter: brightness(1.2); transform: translateY(-.12rem) scale(1.04); box-shadow: 0 0 .75rem rgba(255,226,116,.9); outline: 0; }

.test-roll-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.9rem 0;
  padding: 0.56rem 0.68rem;
  border: 0.0625rem solid rgba(244, 183, 45, 0.42);
  border-radius: 0.65rem;
  background: rgba(6, 27, 42, 0.68);
  color: #fff1b6;
  font-size: 0.85rem;
  font-weight: 800;
}

.test-roll-control select {
  min-width: 4.25rem;
  border: 0.0625rem solid rgba(255, 243, 178, 0.7);
  border-radius: 0.42rem;
  padding: 0.35rem 0.45rem;
  background: #061d2d;
  color: #fff;
  font: inherit;
}

.die {
  display: grid;
  width: 5.4rem;
  height: 5.4rem;
  place-items: center;
  padding: 0;
  border: 0.0625rem solid rgba(244, 183, 45, 0.72);
  border-radius: 1rem;
  border-color: rgba(255,255,255,0.76);
  background: #eef0f1 url('./dice.png') center / 86% no-repeat;
  box-shadow: 0 0.8125rem 1.5rem rgba(0, 0, 0, 0.55), inset 0 0.0625rem rgba(255,255,255,0.34);
  color: transparent;
  font-size: 3.75rem;
  line-height: 1;
  cursor: pointer;
}

.die:disabled {
  border-color: rgba(154, 168, 174, .45);
  background-color: #c7ccd0;
  box-shadow: none;
  color: #8c969b;
  cursor: not-allowed;
  opacity: .7;
}

.die.has-result { background-image: none; border-color: #050709; background-color: #050709; color: #fff; text-shadow: none; }
.die.has-result:disabled { border-color: #050709; background-color: #050709; color: #fff; opacity: 1; }
.die.has-result img { display: block; width: 100%; height: 100%; object-fit: contain; }
.die:not(:disabled):not(.has-result):not(.is-rolling),
.sea-breath-die:not(:disabled):not(.has-result) { animation: die-ready-pulse 1.15s ease-in-out infinite; }

@keyframes die-ready-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.075); }
}

.die.is-rolling {
  animation: die-roll 520ms cubic-bezier(0.4, 0.05, 0.2, 1);
}

@keyframes die-roll {
  0% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-11deg) scale(0.92); }
  50% { transform: rotate(9deg) scale(1.06); }
  75% { transform: rotate(-5deg) scale(0.97); }
  100% { transform: rotate(0) scale(1); }
}

.turn-label {
  display: block;
  margin-bottom: 0.35rem;
  color: #6f969f;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#current-captain {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Caribbean", Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  white-space: nowrap;
}

.roll-list {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
.roll-panel.is-order-ceremony .roll-list { margin-top: .55rem; order: 0; }
.roll-panel.is-order-ceremony .current-card-inventory { display: none; }
.roll-panel.is-order-ceremony .roll-controls { padding-top: 1.57rem; }

.roll-item {
  display: grid;
  min-height: 3.65rem;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 0.0625rem solid var(--line);
}

.roll-rank {
  color: #7197a0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  text-align: center;
}

.player-dot {
  display: inline-block;
  width: 0.78rem;
  height: 0.78rem;
  margin-right: 0.55rem;
  border: 0.125rem solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: var(--player-color);
  vertical-align: -0.05rem;
}

.roll-name {
  min-width: 0;
  overflow: hidden;
  color: #dceef1;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roll-value {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 900;
}

.roll-value.pending {
  color: #5d7f87;
  font-family: inherit;
  font-size: 0.78rem;
  text-transform: uppercase;
}

/* Dialog and feedback */
dialog {
  position: relative;
  width: min(29.375rem, calc(100% - 2rem));
  border: 0.0625rem solid rgba(244, 183, 45, 0.55);
  border-radius: 0.75rem;
  padding: 2.7rem;
  background: linear-gradient(145deg, #0b3445, #041720);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-align: center;
}

dialog::backdrop {
  background: rgba(0, 9, 16, 0.42);
}

.sea-breath-dialog { width: min(25rem, calc(calc(100 * var(--layout-vw, 1vw)) - 2rem)); border: 0.0625rem solid rgba(103, 239, 255, .8); border-radius: .85rem; padding: 1.6rem; background: #04344f; color: #effcff; text-align: center; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.6); }
.sea-breath-dialog h2 { margin: .2rem 0 .45rem; }
.sea-breath-dialog p:not(.eyebrow) { color: #bceff5; line-height: 1.5; }
.sea-breath-dice { display: flex; justify-content: center; gap: 1.1rem; margin-top: 1.2rem; }
.sea-breath-die { display: grid; width: 5.6rem; height: 5.6rem; min-width: 0; min-height: 0; place-items: center; overflow: hidden; border: 0.125rem solid #050709; border-radius: .85rem; background: #eef0f1 url('./dice.png') center / 86% no-repeat; color: #fff; font-size: 3.5rem; cursor: pointer; }
.sea-breath-die:disabled { opacity: .55; cursor: wait; }
.sea-breath-die.has-result { background-image: none; background-color: #050709; color: #fff; }
.sea-breath-die.has-result img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.battleship-dialog { position: fixed; z-index: 70; top: 50%; left: 50%; width: min(34rem, calc(calc(100 * var(--layout-vw, 1vw)) - 2rem)); margin: 0; transform: translate(-50%, -50%); }
.battleship-dialog h2 { font-family: "Caribbean", Georgia, serif; }
.battleship-sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: .7rem; margin-top: 1.2rem; }
.battleship-side { position: relative; display: grid; justify-items: center; gap: .42rem; min-width: 0; color: #fff4ca; }
.battleship-side strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battleship-fleet { display: flex; justify-content: center; align-items: end; min-height: 4.1rem; }
.battleship-fleet img { width: min(4.8rem, calc(18 * var(--layout-vw, 1vw))); height: 3.55rem; object-fit: contain; }
.battleship-attacker .battleship-fleet img { transform: scaleX(-1); }
.battleship-vs { align-self: center; padding-bottom: 1.4rem; color: #fff; font-family: "Caribbean", Georgia, serif; font-size: clamp(1.4rem, calc(5 * var(--layout-vw, 1vw)), 2.25rem); text-shadow: 0 .12rem .2rem rgba(0,0,0,.75); }
.battleship-die { width: 4.9rem; height: 4.9rem; }
.battleship-actions { display: flex; justify-content: center; gap: .85rem; }
.battleship-cannonball { width: 4.9rem; height: 4.9rem; padding: .25rem; background: #eef0f1; }
.battleship-cannonball[hidden], .battleship-test-dice[hidden] { display: none; }
.battleship-cannonball img { width: 100%; height: 100%; object-fit: contain; }
.battleship-cannonball:disabled { filter: grayscale(1); }
.battleship-test-dice { display: flex; justify-content: center; gap: .22rem; margin-top: 1.15rem; }
.battleship-test-dice button { width: 1.55rem; height: 1.55rem; border: 0.0625rem solid #a7cdda; border-radius: .2rem; padding: 0; background: #eef0f1; cursor: pointer; }
.battleship-test-dice button:disabled { opacity: .35; cursor: not-allowed; }
.battleship-test-dice img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reward-options { display: grid; gap: .65rem; margin-top: 1.15rem; }
.reward-options .button { width: 100%; min-height: 3rem; font-size: .9rem; }
.reward-coin-images { margin-top: .6rem; }
.battleship-side small { display: block; min-height: 1.2em; color: #bceff5; font-weight: 800; }
.battleship-side-winner:not([hidden]) { position: absolute; top: calc(100% + .15rem); color: #ffe476; font-family: "Caribbean", Georgia, serif; font-size: 1.3rem; animation: battleship-winner-label .32s ease-out both; }
.battleship-winner { grid-column: 1 / -1; justify-self: center; display: grid; justify-items: center; gap: .4rem; color: #ffe476; font-size: 1.08rem; }
.battleship-winner .battleship-fleet { min-height: 5.2rem; }
.battleship-winner .battleship-fleet img { width: min(6.2rem, calc(23 * var(--layout-vw, 1vw))); height: 4.7rem; }
.battleship-winner.is-arriving .battleship-fleet { animation: battleship-winner-arrive .62s cubic-bezier(.18,.85,.22,1) both; }
.battleship-winner.is-from-left .battleship-fleet { --battle-winner-offset: -9rem; }
.battleship-winner.is-from-right .battleship-fleet { --battle-winner-offset: 9rem; }
.battleship-winner-label:not([hidden]) { animation: battleship-winner-label .32s ease-out both; }
@keyframes battleship-winner-arrive { from { opacity: .2; transform: translateX(var(--battle-winner-offset, 0)) scale(.7); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes battleship-winner-label { from { opacity: 0; transform: translateY(-.45rem); } to { opacity: 1; transform: translateY(0); } }
.point-banner.is-battleship { padding-block: .85rem; background: linear-gradient(90deg, rgba(0,0,0,0), #050505 16%, #050505 84%, rgba(0,0,0,0)); }
.battleship-banner { display: grid; justify-items: center; gap: .2rem; }
.battleship-banner-title { display: block; }
.battleship-banner-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; width: min(26rem, calc(90 * var(--layout-vw, 1vw))); }
.battleship-banner-stage .battleship-banner-fleet:first-child { justify-self: end; }
.battleship-banner-stage .battleship-banner-fleet:last-child { justify-self: start; }
.battleship-banner-fleet { display: flex; align-items: center; justify-content: center; }
.battleship-banner-fleet img { width: clamp(2.4rem, calc(5 * var(--layout-vw, 1vw)), 4.2rem); height: 2.9rem; object-fit: contain; }
.battleship-banner .battleship-banner-fleet:first-child img { transform: scaleX(-1); }
.battleship-logo { width: clamp(3.4rem, calc(8 * var(--layout-vw, 1vw)), 6.2rem); height: 3.5rem; object-fit: contain; }
@media (max-width: 420px) { .battleship-sides { gap: .3rem; } .battleship-fleet img { width: 3.8rem; } }

.storm-cloud-effect { position: absolute; z-index: 20; width: clamp(3.8rem, calc(10 * var(--layout-vw, 1vw)), 6.5rem); aspect-ratio: 1; background: url('./bad-cloud.png') center / contain no-repeat; pointer-events: none; transform: translate(-50%, -108%); animation: storm-cloud-flicker 1s steps(1, end) forwards; }
@keyframes storm-cloud-flicker { 0%, 100% { opacity: 0; } 8%, 36% { opacity: 1; } 37%, 54% { opacity: 0; } 55%, 88% { opacity: 1; } }
.storm-card-toss { position: absolute; z-index: 21; object-fit: contain; pointer-events: none; filter: drop-shadow(0 .15rem .2rem rgba(0,0,0,.52)); transform-origin: center; }
.ship-piece.is-storm-rocking { animation: storm-ship-rock 1s ease-in-out both; }
@keyframes storm-ship-rock { 0%, 100% { transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) rotate(0deg); } 18% { transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) rotate(-13deg); } 42% { transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) rotate(12deg); } 67% { transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) rotate(-9deg); } 85% { transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) rotate(6deg); } }

.ship-piece.is-cyclone-flying { z-index: 12; isolation: isolate; animation: cyclone-ship-spin .5s linear infinite; transition: none; }
@keyframes cyclone-ship-spin { from { transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) rotate(0deg) scale(1.15); } to { transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y)) rotate(720deg) scale(1.15); } }
.ship-piece > img:not(.cyclone-flight-effect) { position: relative; z-index: 1; }
.ship-piece .cyclone-flight-effect { position: absolute; z-index: 0; left: 50%; top: 54%; width: 264%; height: auto; aspect-ratio: 1; object-fit: contain; pointer-events: none; transform: translate(-50%, -50%); opacity: .94; filter: drop-shadow(0 .18rem .35rem rgba(21,111,175,.48)); animation: cyclone-effect-spin .42s linear infinite; }
@keyframes cyclone-effect-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

.settings-dialog { width: min(24rem, calc(calc(100 * var(--layout-vw, 1vw)) - 2rem)); border: 0.0625rem solid rgba(255,226,116,.75); border-radius: .9rem; padding: 1.65rem; background: linear-gradient(145deg, #0a405a, #041924); color: #effcff; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.65); }
.settings-dialog h2 { margin: .12rem 0 1.05rem; font-family: "Caribbean", Georgia, serif; font-size: 2rem; color: #ffe476; }
.settings-controls, .settings-exit { width: 100%; border: 0.0625rem solid rgba(255,226,116,.7); border-radius: .55rem; padding: .82rem 1rem; background: #0d5d78; color: #fff4ca; font: inherit; font-weight: 900; cursor: pointer; }
.settings-controls { margin-top: .65rem; background: #07506d; }
.settings-row { display: flex; align-items: center; justify-content: space-between; margin-top: .65rem; border-bottom: 0.0625rem solid rgba(159,224,237,.18); padding: .75rem .08rem; color: #eaf8fa; font-size: .95rem; font-weight: 850; }
.sound-toggle { display: inline-flex; min-width: 4.4rem; align-items: center; justify-content: space-between; border: 0.0625rem solid #6f8993; border-radius: 6.1875rem; padding: .18rem .35rem .18rem .2rem; background: #263c46; color: #bbced3; cursor: pointer; font: inherit; font-size: .68rem; font-weight: 900; letter-spacing: .06em; }
.sound-toggle i { width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #9aafb5; transition: transform .18s ease, background .18s ease; }
.sound-toggle.is-on { border-color: #ffe476; background: #0d6672; color: #fff2b0; }
.sound-toggle.is-on i { background: #ffe476; transform: translateX(1.8rem); }
.settings-exit { margin-top: 1.35rem; border-color: rgba(244,117,105,.85); background: #772f36; color: #fff0ee; }

.lost-chest-dialog { width: min(34rem, calc(calc(100 * var(--layout-vw, 1vw)) - 2rem)); border: 0.0625rem solid rgba(255,226,116,.82); border-radius: .9rem; padding: 1.4rem 1.7rem; background: #052f46; color: #effcff; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.65); text-align: center; }
.lost-chest-dialog::backdrop { background: rgba(0,12,20,.52); backdrop-filter: blur(0.25rem); }
.lost-chest-dialog h2 { margin: 0 0 .4rem; color: #ffe476; font-family: "Caribbean", Georgia, serif; font-size: 2.1rem; word-spacing: .25em; }
.lost-chest-dialog > img { display: block; width: 4.8rem; height: 4.8rem; margin: .2rem auto .85rem; object-fit: contain; filter: drop-shadow(0 .2rem .2rem rgba(0,0,0,.45)); }
.lost-chest-dialog p { margin: 0; line-height: 1.48; text-align: left; }
.lost-chest-dialog ul { margin: .85rem 0 1.1rem; padding-left: 1.25rem; text-align: left; line-height: 1.5; }
.flag-dialog { width: min(34rem, calc(calc(100 * var(--layout-vw, 1vw)) - 2rem)); }
.flag-dialog #flag-dialog-message > p + p { margin-top: .85rem; }
.hut-dialog { width: min(34rem, calc(calc(100 * var(--layout-vw, 1vw)) - 2rem)); }
.hut-dialog #hut-dialog-message > p + p { margin-top: .85rem; }
.storm-coin-dialog p { margin: .35rem 0 1.15rem; line-height: 1.48; text-align: left; }
.storm-coin-choice-actions { display: grid; gap: .65rem; }
.storm-coin-choice-actions .button { width: 100%; min-height: 3rem; padding: .6rem .85rem; font-size: .84rem; line-height: 1.25; }
.market-visit-no { border-color: rgba(125,229,242,.6); background: #0d5d78; color: #fff4ca; }
.market-visit-no:hover, .market-visit-no:focus-visible { background: #117e9d; }

/* Keep regular game popups visually consistent and their headings compact. */
dialog:not(.admin-dialog):not(.admin-inventory-dialog) h2 {
  font-family: "Caribbean", Georgia, serif;
  font-size: clamp(1.4rem, calc(3.2 * var(--layout-vw, 1vw)), 1.8rem);
  line-height: 1.1;
  letter-spacing: .02em;
  word-spacing: normal;
}

.bottle-dialog { width: min(25rem, calc(calc(100 * var(--layout-vw, 1vw)) - 2rem)); color: #effcff; overflow: visible; }
.bottle-dialog h2 { font-family: "Caribbean", Georgia, serif; font-weight: 400; }
.bottle-card { display: block; width: min(18rem, calc(68 * var(--layout-vw, 1vw))); margin: 0 auto; border-radius: .4rem; box-shadow: 0 1.2rem 2.5rem rgba(0,0,0,.58); transform-origin: left center; }
.bottle-card.is-unfurling { animation: bottle-unroll 1.5s cubic-bezier(.2,.86,.24,1) both; }
.bottle-card.is-flipping { animation: bottle-flip .58s cubic-bezier(.35,.03,.45,1) both; }
.bottle-draw-count { margin: .7rem 0; color: #ffe476; font-size: .86rem; font-weight: 900; letter-spacing: .09em; }
.bottle-ok { min-width: 8.5rem; }
@keyframes bottle-unroll { from { clip-path: inset(0 100% 0 0); opacity: .2; transform: perspective(28rem) rotateY(25deg) scale(.9); } to { clip-path: inset(0 0 0 0); opacity: 1; transform: perspective(28rem) rotateY(0) scale(1); } }
@keyframes bottle-flip { 0% { transform: perspective(35rem) rotateY(0); } 48% { transform: perspective(35rem) rotateY(90deg); } 52% { transform: perspective(35rem) rotateY(90deg); } 100% { transform: perspective(35rem) rotateY(0); } }

.admin-dialog { width: min(calc(100 * var(--layout-vw, 1vw)), 100rem); max-width: none; height: calc(100 * var(--layout-vh, 1vh)); max-height: none; border: 0; border-radius: 0; padding: clamp(1.25rem, calc(3 * var(--layout-vw, 1vw)), 3rem); background: linear-gradient(145deg, #0a405a, #041924); color: #effcff; box-shadow: none; }
.admin-dialog h2 { margin: .1rem 0 1rem; font-family: "Caribbean", Georgia, serif; font-size: 2rem; color: #ffe476; }
.admin-form { display: grid; gap: .62rem; margin-top: .9rem; padding-top: .95rem; border-top: 0.0625rem solid rgba(159,224,237,.2); }
.admin-form h3 { margin: 0; color: #c8f2f4; font-size: .92rem; letter-spacing: .08em; text-transform: uppercase; }
.admin-form label { display: grid; gap: .28rem; color: #bceff5; font-size: .78rem; font-weight: 850; }
.admin-form select { width: 100%; border: 0.0625rem solid rgba(185,238,244,.45); border-radius: .45rem; padding: .54rem .62rem; background: #06283a; color: #fff; font: inherit; }
.admin-form .button { justify-content: center; margin-top: .15rem; }
.admin-next-form .button { border-color: rgba(255,226,116,.72); color: #fff0bd; }
.admin-next-players { display: flex; flex-wrap: wrap; gap: .55rem; }
.bottom-next-players.admin-next-players { display: none; }
.game-screen.is-developer-controls .bottom-next-players.admin-next-players { display: flex; }
.admin-next-player { display: inline-flex; align-items: center; gap: .42rem; border: 0.0625rem solid color-mix(in srgb, var(--captain-color) 75%, white); border-radius: .55rem; padding: .55rem .72rem; background: #06283a; color: #effcff; cursor: pointer; font: inherit; font-weight: 900; }
.admin-next-player i { width: .84rem; height: .84rem; border-radius: 50%; background: var(--captain-color); box-shadow: 0 0 .45rem var(--captain-color); }
.admin-next-player:hover, .admin-next-player:focus-visible { background: #0a4259; transform: translateY(-.1rem); }
.bottom-next-players .admin-next-player { width: 2.25rem; height: 2.25rem; justify-content: center; border-radius: 50%; padding: 0; box-shadow: 0 .25rem .7rem rgba(0,0,0,.36); }
.bottom-next-players .admin-next-player span { display: none; }
.bottom-next-players .admin-next-player i { width: 1.1rem; height: 1.1rem; }
.bottle-control { padding-top: .55rem; }
.market-offer-control { margin-top: 1.35rem; }
.market-offer-control .settings-row > b { color: #ffe476; font-size: .82rem; }
.bottle-control .settings-row { margin-top: 0; }
.bottle-choice-actions { display: inline-flex; align-items: center; gap: .5rem; }
.bottle-deck-reset { min-height: 2.1rem; padding: .35rem .6rem; font-size: .75rem; font-weight: 900; }
.bottle-choice-gallery { display: grid; gap: 1.35rem; width: 100%; margin-top: .8rem; overflow-y: auto; padding: .45rem .25rem 1rem; }
.bottle-choice-section { border-top: 0.0625rem solid rgba(185,238,244,.28); padding-top: 1rem; }
.bottle-choice-section h3 { margin: 0 0 .7rem; color: #ffe476; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
.bottle-choice-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 17rem)); justify-content: center; gap: clamp(.7rem, calc(1.5 * var(--layout-vw, 1vw)), 1.1rem); }
.bottle-choice-card { position: relative; min-width: 0; aspect-ratio: 700 / 448; overflow: hidden; border: 0.125rem solid transparent; border-radius: .34rem; padding: 0; background: #06283a; cursor: pointer; scroll-snap-align: start; }
.bottle-choice-card img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bottle-choice-card::after { position: absolute; right: .16rem; bottom: .12rem; min-width: 1.2rem; border-radius: 6.1875rem; padding: .06rem .2rem; background: rgba(0,12,20,.85); color: #ffe476; content: attr(data-card-id); font: 800 .64rem/1 Georgia, serif; }
.bottle-choice-card.is-selected { border-color: #ffe476; box-shadow: 0 0 .7rem rgba(255,226,116,.75); }
.deck-card-used { position: absolute; inset: 50% auto auto 50%; z-index: 2; display: grid; width: 1.7rem; height: 1.7rem; place-items: center; transform: translate(-50%, -50%); border: 0.125rem solid #fff4db; border-radius: 50%; background: #a72c29; color: #fff; font: 900 1.35rem/1 Arial, sans-serif; font-style: normal; }
.admin-card-gallery .bottle-choice-card { border: 0.1875rem solid transparent; border-radius: .4rem; }
.admin-card-gallery .bottle-choice-card.is-selected { border-color: #ffe476; box-shadow: 0 0 .8rem rgba(255,226,116,.75); }

.custom-inventory-control > p { margin: -.25rem 0 .1rem; color: #9fd6df; font-size: .83rem; }
.admin-inventory-players { display: flex; flex-wrap: wrap; gap: .5rem; }
.admin-inventory-player { display: inline-flex; align-items: center; gap: .38rem; min-width: 8.5rem; border: 0.0625rem solid color-mix(in srgb, var(--captain-color) 75%, white); border-radius: .55rem; padding: .48rem .58rem; background: #06283a; color: #effcff; cursor: pointer; font-weight: 850; }
.admin-inventory-player i { width: .75rem; height: .75rem; border-radius: 50%; background: var(--captain-color); box-shadow: 0 0 .4rem var(--captain-color); }
.admin-inventory-player b { margin-left: auto; color: #ffe476; font-size: .76rem; }
.admin-inventory-player:hover { transform: translateY(-.1rem); background: #0a4259; }
.admin-inventory-dialog { width: min(calc(100 * var(--layout-vw, 1vw)), 100rem); max-width: none; height: calc(100 * var(--layout-vh, 1vh)); max-height: none; overflow-y: auto; border: 0; border-radius: 0; padding: clamp(1.25rem, calc(3 * var(--layout-vw, 1vw)), 3rem); background: linear-gradient(145deg, #0a405a, #041924); color: #effcff; box-shadow: none; }
.game-control-dialog { width: min(calc(100 * var(--layout-vw, 1vw)), 100rem); max-width: none; height: calc(100 * var(--layout-vh, 1vh)); max-height: none; overflow-y: auto; border: 0; border-radius: 0; padding: clamp(1.25rem, calc(3 * var(--layout-vw, 1vw)), 3rem); background: linear-gradient(145deg, #0a405a, #041924); color: #effcff; box-shadow: none; }
.game-control-dialog h2 { margin: .1rem 0 .35rem; color: #ffe476; font-family: "Caribbean", Georgia, serif; font-size: 2rem; }
.game-control-dialog .admin-form { max-width: none; margin-top: 1rem; }
.game-control-dialog .game-control-section[hidden], .game-control-dialog .admin-card-gallery[hidden] { display: none !important; }
.admin-inventory-dialog h2 { margin: .1rem 0 .35rem; color: var(--captain-color, #ffe476); font-family: "Caribbean", Georgia, serif; font-size: 2rem; }
.admin-inventory-count { margin: 0; color: #ffe476; font-weight: 900; }
.admin-inventory-summary { display: flex; align-items: center; gap: 1rem; }
.admin-inventory-summary label { display: inline-flex; align-items: center; gap: .38rem; color: #c8f2f4; font-size: .85rem; font-weight: 850; }
.admin-inventory-summary input { width: 8rem; border: 0.0625rem solid rgba(185,238,244,.5); border-radius: .42rem; padding: .4rem .52rem; background: #06283a; color: #ffe476; font: inherit; font-weight: 900; }
.admin-card-decks { display: flex; gap: .55rem; margin-top: 1.3rem; }
.admin-deck-tab { border: 0.0625rem solid rgba(185,238,244,.45); border-radius: .55rem; padding: .55rem .85rem; background: #06283a; color: #c8f2f4; cursor: pointer; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.admin-deck-tab.is-active { border-color: #ffe476; background: #14516a; color: #ffe476; }
.admin-card-gallery { display: grid; gap: 1.35rem; width: 100%; margin-top: .9rem; padding: .45rem .25rem 2rem; }
.admin-card-section { border-top: 0.0625rem solid rgba(185,238,244,.28); padding-top: 1rem; }
.admin-card-section h3 { margin: 0 0 .7rem; color: #ffe476; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
.admin-card-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 17rem)); justify-content: center; gap: clamp(.7rem, calc(1.5 * var(--layout-vw, 1vw)), 1.1rem); }
.admin-card-choice { position: relative; min-width: 0; aspect-ratio: 700 / 448; overflow: hidden; border: 0.1875rem solid transparent; border-radius: .4rem; padding: 0; background: #06283a; cursor: pointer; scroll-snap-align: start; }
.admin-card-choice img { display: block; width: 100%; height: 100%; object-fit: contain; }
.admin-card-choice.is-owned { border-color: var(--card-owner-color); box-shadow: 0 0 .8rem var(--card-owner-color); cursor: not-allowed; }
.admin-card-choice.is-owned > img { opacity: .35; filter: grayscale(1); }
.admin-card-choice.is-owned::after { position: absolute; z-index: 2; inset: 0; border: .32rem solid var(--card-owner-color); border-radius: .18rem; box-shadow: inset 0 0 .7rem var(--card-owner-color), 0 0 .8rem var(--card-owner-color); content: ""; pointer-events: none; }
.admin-card-choice.is-owned-by-current { opacity: 1; filter: none; cursor: pointer; }
.board-shell.is-placement-mode { outline: .22rem dashed rgba(255,226,116,.86); outline-offset: -.22rem; }
.ship-layer.is-placement-mode { pointer-events: auto; z-index: 15; }
.ship-layer.is-placement-mode .ship-piece { pointer-events: auto; cursor: grab; }
.ship-layer.is-placement-mode .ship-piece:active { cursor: grabbing; }
.ship-piece.is-being-dragged { opacity: .3; }

.money-float-layer { position: fixed; z-index: 80; inset: 0; pointer-events: none; overflow: hidden; }
.money-float { position: fixed; z-index: 1; color: var(--money-color); font-family: Georgia, serif; font-size: clamp(1.1rem, calc(2 * var(--layout-vw, 1vw)), 1.75rem); font-weight: 1000; letter-spacing: .03em; text-shadow: 0 .12rem .2rem rgba(0,0,0,.72), 0 0 .6rem color-mix(in srgb, var(--money-color) 45%, transparent); white-space: nowrap; transform: translate(-50%, -50%); }
.battle-transfer-coin { position: fixed; z-index: 4; width: 2.2rem; height: 2.2rem; object-fit: contain; pointer-events: none; filter: drop-shadow(0 .15rem .2rem rgba(0,0,0,.65)); transform: translate(-50%, -50%); }
.credit-sparkle { position: fixed; z-index: 2; width: .46rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffde0 0 18%, #ffe476 26%, #e5a81b 72%); box-shadow: 0 0 .5rem #ffe476, 0 0 .18rem .08rem rgba(255,225,99,.8); }
.inventory-unit.credits.is-credit-pulsing { animation: credit-pulse .6s ease-out both; }
@keyframes credit-pulse { 40% { color: #ffe476; transform: scale(1.18); filter: drop-shadow(0 0 .35rem #ffe476); } }

.point-banner { position: fixed; z-index: 65; top: 13%; left: 0; width: 100%; padding: .85rem 1rem; background: linear-gradient(90deg, rgba(0,0,0,0), var(--point-color) 16%, var(--point-color) 84%, rgba(0,0,0,0)); color: #fff; font-family: "Caribbean", Georgia, serif; font-size: clamp(1.75rem, calc(4 * var(--layout-vw, 1vw)), 3.2rem); line-height: 1; text-align: center; text-shadow: 0 .16rem .25rem rgba(0,0,0,.65); pointer-events: none; }
.point-banner.is-visible { animation: point-banner 2s ease-in-out both; }
@keyframes point-banner { 0% { opacity: 0; clip-path: inset(0 50% 0 50%); transform: scaleX(.2); } 14% { opacity: 1; clip-path: inset(0 0 0 0); transform: scaleX(1); } 77% { opacity: 1; clip-path: inset(0 0 0 0); transform: scaleX(1); } 100% { opacity: 0; clip-path: inset(0 50% 0 50%); transform: scaleX(.2); } }

.dialog-close {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.75rem;
}

.dialog-icon {
  margin-bottom: 1rem;
  color: var(--gold);
  font-size: 2.5rem;
}

dialog p:not(.eyebrow) {
  margin: 1rem 0 1.5rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Arrival and token feedback */
.current-card-grid .inventory-card.is-card-arriving { animation: card-arrive .72s cubic-bezier(.2,.85,.25,1) both; }
@keyframes card-arrive { 0% { opacity: 0; transform: scale(.62); } 58% { opacity: 1; transform: scale(1.14); } 100% { transform: scale(1); } }
.inventory-unit.is-chest-pulsing { animation: chest-pulse .58s ease-in-out both; }
@keyframes chest-pulse { 50% { transform: scale(1.32); filter: drop-shadow(0 0 .36rem #ffe476); } }
.point-banner { top: 50%; transform: translateY(-50%); }
.point-banner img { width: 1.2em; height: 1.2em; margin: -.1em .18em; vertical-align: middle; object-fit: contain; }
.point-banner.is-sale { pointer-events: auto; }
.point-banner.is-protection-banner { pointer-events: none; font-size: clamp(1rem, calc(2.35 * var(--layout-vw, 1vw)), 1.7rem); }
.protection-banner-copy { display: grid; justify-items: center; gap: .65rem; color: #fff; }
.protection-banner-copy img { display: block; width: min(16rem, calc(42 * var(--layout-vw, 1vw))); height: auto; margin: 0; }
.point-banner.is-sale.is-visible { animation: sale-banner-in .32s ease-out both; }
.sale-banner-ok { position: absolute; top: calc(100% + .55rem); left: 50%; margin: 0; padding: .38rem .85rem; border: 0.0625rem solid #fff3a6; border-radius: .32rem; background: #ffd35b; color: #18222c; font: 900 .84rem/1 system-ui, sans-serif; cursor: pointer; transform: translateX(-50%); }
.sale-banner-ok:hover, .sale-banner-ok:focus-visible { background: #ffe485; outline: 0.125rem solid #fff; outline-offset: 0.125rem; }
@keyframes sale-banner-in { from { opacity: 0; clip-path: inset(0 50% 0 50%); transform: translateY(-50%) scaleX(.2); } to { opacity: 1; clip-path: inset(0); transform: translateY(-50%) scaleX(1); } }

.card-preview-dialog { width: min(46rem, calc(calc(100 * var(--layout-vw, 1vw)) - 2rem)); border: 0.0625rem solid rgba(255,226,116,.8); border-radius: .7rem; padding: 1rem; background: #05283c; box-shadow: 0 1.2rem 3rem rgba(0,0,0,.65); text-align: center; }
.card-preview-dialog::backdrop { background: rgba(0,13,23,.7); }
.card-preview-art { position: relative; margin-bottom: 1rem; }
.card-preview-art > img:first-child { display: block; width: 100%; height: auto; margin: 0 auto; object-fit: contain; }
.card-preview-medallion { position: absolute; right: 2%; bottom: 3%; width: 16%; filter: drop-shadow(0 .18rem .24rem rgba(0,0,0,.75)); }

/* Card art always reads as a physical card, with no oversized wrapper around it. */
.hand-limit-card,
.inventory-card,
.detail-card,
.held-card-button,
.bottle-choice-card,
.admin-card-choice {
  border-radius: .62rem;
  overflow: hidden;
  padding: 0;
}

.hand-limit-card > img:first-child,
.inventory-card > img:first-child,
.detail-card > img:first-child,
.held-card-button img,
.bottle-choice-card img,
.admin-card-choice img {
  border-radius: inherit;
  object-fit: cover;
}

.card-preview-art { overflow: hidden; border-radius: .72rem; }
.card-preview-art > img:first-child { border-radius: inherit; object-fit: cover; }
.bottle-card { border-radius: .72rem; }
.protection-banner-copy img { border-radius: .45rem; }
.held-card-button, .held-card-button img { border-radius: 0.125rem; }

.exit-confirm-dialog { max-width: min(28rem, calc(calc(100 * var(--layout-vw, 1vw)) - 2rem)); text-align: center; }
.exit-confirm-dialog p { color: var(--muted); line-height: 1.45; }
.exit-confirm-actions { display: flex; justify-content: center; gap: .75rem; margin-top: 1.3rem; }

/* Every game popup uses the Warning treatment.  The full-screen rulebook and
   card-management windows deliberately remain their own working surfaces. */
dialog:not(.rulebook-dialog):not(.admin-dialog):not(.admin-inventory-dialog) {
  --popup-base-transform: translate(0, 0);
  border: 0.0625rem solid rgba(255, 226, 116, .82);
  border-radius: .9rem;
  background: #052f46;
  color: #effcff;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .65);
  opacity: 0;
  transform: var(--popup-base-transform) scale(.72);
  animation: popup-zoom-pulse-out .18s cubic-bezier(.45, 0, .7, .25) both;
  transition: opacity .16s ease-in, transform .16s cubic-bezier(.45, 0, .7, .25), overlay .16s allow-discrete, display .16s allow-discrete;
  transition-behavior: allow-discrete;
}

dialog.battleship-dialog {
  --popup-base-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%) scale(.72);
}

/* This ID-level override keeps the shared popup rule from resetting the
   transform used to center the Battleship dialog in the viewport. */
#battleship-dialog { --popup-base-transform: translate(-50%, -50%); }
#reward-dialog, #battle-cancel-dialog { top: 50%; left: 50%; margin: 0; --popup-base-transform: translate(-50%, -50%); }

dialog:not(.rulebook-dialog):not(.admin-dialog):not(.admin-inventory-dialog)[open] {
  opacity: 1;
  transform: var(--popup-base-transform) scale(1);
  animation: popup-zoom-pulse-in .24s cubic-bezier(.16, .85, .3, 1) both;
}

dialog:not(.rulebook-dialog):not(.admin-dialog):not(.admin-inventory-dialog).is-popup-closing {
  pointer-events: none;
  animation: popup-zoom-pulse-out .18s cubic-bezier(.45, 0, .7, .25) both;
}

dialog.battleship-dialog[open] {
  transform: translate(-50%, -50%) scale(1);
  animation: battleship-popup-zoom-pulse-in .24s cubic-bezier(.16, .85, .3, 1) both;
}

@starting-style {
  dialog:not(.rulebook-dialog):not(.admin-dialog):not(.admin-inventory-dialog)[open] {
    opacity: 0;
    transform: var(--popup-base-transform) scale(.72);
  }
}

dialog:not(.rulebook-dialog):not(.admin-dialog):not(.admin-inventory-dialog)::backdrop {
  background: rgba(0, 12, 20, .52);
  backdrop-filter: blur(0.25rem);
  transition: opacity .16s ease-in, overlay .16s allow-discrete, display .16s allow-discrete;
  transition-behavior: allow-discrete;
}

dialog:not(.rulebook-dialog):not(.admin-dialog):not(.admin-inventory-dialog) h2 {
  color: #ffe476;
  font-family: "Caribbean", Georgia, serif;
  font-size: clamp(1.4rem, calc(3.2 * var(--layout-vw, 1vw)), 1.8rem);
  line-height: 1.1;
}

dialog:not(.rulebook-dialog):not(.admin-dialog):not(.admin-inventory-dialog) .button:not(.button-primary),
dialog:not(.rulebook-dialog):not(.admin-dialog):not(.admin-inventory-dialog) .settings-controls,
dialog:not(.rulebook-dialog):not(.admin-dialog):not(.admin-inventory-dialog) .settings-exit,
dialog:not(.rulebook-dialog):not(.admin-dialog):not(.admin-inventory-dialog) .market-visit-no {
  border-color: rgba(234, 248, 251, .42);
  background: rgba(2, 20, 31, .42);
  color: #effcff;
}

@keyframes popup-zoom-pulse-in {
  0% { opacity: 0; transform: var(--popup-base-transform) scale(.72); }
  74% { opacity: 1; transform: var(--popup-base-transform) scale(1.055); }
  100% { opacity: 1; transform: var(--popup-base-transform) scale(1); }
}

@keyframes battleship-popup-zoom-pulse-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  74% { opacity: 1; transform: translate(-50%, -50%) scale(1.055); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes popup-zoom-pulse-out {
  0% { opacity: 1; transform: var(--popup-base-transform) scale(1); }
  26% { opacity: 1; transform: var(--popup-base-transform) scale(1.055); }
  100% { opacity: 0; transform: var(--popup-base-transform) scale(.72); }
}
@keyframes point-banner { 0% { opacity: 0; clip-path: inset(0 50% 0 50%); transform: translateY(-50%) scaleX(.2); } 14% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(-50%) scaleX(1); } 77% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(-50%) scaleX(1); } 100% { opacity: 0; clip-path: inset(0 50% 0 50%); transform: translateY(-50%) scaleX(.2); } }

.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 10;
  max-width: min(24.375rem, calc(100% - 2rem));
  border: 0.0625rem solid rgba(66, 213, 239, 0.32);
  border-radius: 0.5rem;
  padding: 0.9rem 1rem;
  background: #082b3a;
  box-shadow: 0 1.125rem 2.25rem rgba(0, 0, 0, 0.38);
  color: #dff7fb;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.7rem);
  transition: 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 980px) {
  .setup-layout {
    grid-template-columns: 1fr;
  }

  .setup-art {
    display: none;
  }

  .setup-panel {
    margin: auto;
  }

  .game-screen .game-layout {
    grid-template-columns: minmax(8rem, calc(16 * var(--layout-vw, 1vw))) minmax(0, 1fr) minmax(13rem, calc(27 * var(--layout-vw, 1vw)));
  }

  .game-screen .roll-panel {
    border-top: 0;
    border-left: 0.0625rem solid var(--line);
  }
}

@media (max-width: 620px) {
  .topbar,
  .game-topbar {
    padding: 0 1rem;
  }

  .game-status {
    display: none;
  }

  .setup-panel {
    padding: 2.2rem 1rem;
  }

  .segmented {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
  }

  .crew-heading {
    display: none;
  }

  .player-row {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    padding: 1rem 0;
  }

  .swatches {
    justify-content: flex-start;
    padding-left: 2.7rem;
  }

  .setup-footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .intro-content h1 {
    font-size: clamp(3.2rem, calc(17 * var(--layout-vw, 1vw)), 5.2rem);
  }

  .crest::before,
  .crest::after {
    width: 2.2rem;
  }

  .game-screen .board-area { padding: 0; }

  .game-screen .roll-panel {
    padding: .6rem;
  }

  .board-title-row {
    align-items: flex-end;
  }

}

.setup-panel,
.setup-panel .panel-intro,
.setup-panel .player-name,
.setup-panel .text-button,
.setup-panel .crew-heading,
.setup-panel .count-fieldset legend { color: #07151d; }
.setup-panel .crew-heading small { color: #173b4d; }

/* Centered crew setup */
.setup-screen { position: relative; justify-content: center; min-height: calc(100 * var(--layout-svh, 1svh)); }
.setup-layout { display: flex; width: min(47.5rem, 100%); min-height: calc(100 * var(--layout-svh, 1svh)); align-items: center; justify-content: center; }
.setup-panel { width: min(42.5rem, 100%); padding: 5.5rem clamp(1.25rem, calc(5 * var(--layout-vw, 1vw)), 4rem) 3rem; text-align: center; }
.setup-title-art { display: block; position: relative; left: 50%; width: min(42rem, calc(96 * var(--layout-vw, 1vw))); height: auto; margin: 0 0 1.4rem; transform: translateX(-49.2%); }
.setup-panel h2 { font-family: "Caribbean", Georgia, serif; color: #07151d; }
.setup-panel .panel-intro { margin: 1.8rem auto 3.3rem; white-space: nowrap; }
.setup-panel .count-fieldset { display: grid; justify-items: center; }
.setup-panel .crew-heading { text-align: left; }
.setup-panel .setup-footer { justify-content: center; }
.setup-panel .setup-footer .button { min-width: 13rem; font-family: "Caribbean", Georgia, serif; font-size: 1.2rem; letter-spacing: .055em; }
.setup-panel .setup-footer .rulebook-launch { border-color: rgba(255, 239, 178, .88); background: rgba(0, 48, 86, .68); color: #fff0b4; }
@media (max-width: 700px) { .setup-panel .panel-intro { white-space: normal; } }

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

.game-stage { display: contents; }
.game-term-popup { font-weight: 700; text-transform: uppercase; }
.game-term-title { font-family: "Caribbean", Georgia, serif; font-weight: inherit; }
button .game-term-button { font: inherit !important; font-weight: inherit !important; letter-spacing: inherit; text-transform: none; }
dialog button { font-weight: 700; }
#exit-confirm-dialog > p, #market-exit-confirm-dialog > p, #market-visit-dialog > p, #last-ship-sale-message, #hand-limit-dialog > p { text-align: center; }
#storm-coin-collect-dialog, #explosive-barrel-dialog, #hand-limit-dialog, #bottle-hand-limit-dialog, #exit-confirm-dialog { text-align: center; }
#storm-coin-collect-dialog p, #explosive-barrel-dialog p, #hand-limit-dialog p, #bottle-hand-limit-dialog p { width: 100%; margin-left: auto; margin-right: auto; text-align: center; }