/* Native mobile button padding/appearance must not distort the reference
   circles. Keep these rules shared by title, crew selection and gameplay. */
.sound-icon-button,
.rulebook-icon-button,
.market-eye-toggle,
.swatch {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  padding: 0;
  min-width: 0;
  min-height: 0;
  flex: none;
  aspect-ratio: 1;
  border-radius: 50%;
  line-height: 1;
}

.sound-icon-button,
.rulebook-icon-button,
.market-eye-toggle {
  --control-size: 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  width: var(--control-size);
  height: var(--control-size);
  min-width: var(--control-size);
  min-height: var(--control-size);
  max-width: var(--control-size);
  max-height: var(--control-size);
}
.sound-icon-button { position: relative; }
.menu-music-toggle.sound-icon-button { --control-size: 2.85rem; }
.rulebook-icon-button { --control-size: 2.85rem; }
.market-eye-toggle { --control-size: 2rem; }
.swatch { width: 2rem; height: 2rem; }

.sound-icon-button > svg,
.sound-icon-button > img,
.rulebook-icon-button > svg,
.market-eye-toggle > svg {
  grid-area: 1 / 1;
  display: block;
  place-self: center;
  pointer-events: none;
}
.rulebook-icon-button > svg,
.market-eye-toggle > svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.market-eye-toggle > svg { width: 1.25rem; height: 1.25rem; }
.sound-icon-button .music-icon { width: 1.28rem; height: 1.28rem; }
.settings-gear .music-icon,
.sound-icon-button .gear-icon { width: 1.45rem; height: 1.45rem; }

.sound-icon-button.is-muted::after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-47deg);
  transform-origin: center;
  pointer-events: none;
}

/* Popup dice share the main die's zero-padding square surface. Safari's native
   button content sizing must not stretch it or collapse the result image. */
.sea-breath-die {
  --die-size: 5.6rem;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  position: relative;
  width: var(--die-size);
  height: var(--die-size);
  min-width: var(--die-size);
  min-height: var(--die-size);
  max-width: var(--die-size);
  max-height: var(--die-size);
  aspect-ratio: 1;
  flex: none;
  padding: 0;
  line-height: 1;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.sea-breath-die.battleship-die,
.sea-breath-die.battleship-cannonball { --die-size: 4.9rem; }
.sea-breath-die.battleship-cannonball { padding: .25rem; }
.sea-breath-die.has-result:disabled { opacity: 1; }
.sea-breath-die.has-result > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  pointer-events: none;
}

/* Preloaded faces stay attached between rolls; only the selected one paints.
   Override the older has-result img display rule, including on disabled dice. */
.die > .die-face-frame[hidden],
.sea-breath-die > .die-face-frame[hidden] { display: none !important; }