.belote-scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  justify-content: stretch;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
  padding: max(4px, var(--scoreboard-bottom, 56px)) 0 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  color: #fff;
  background: #2e7534 url("/src/games/belote/felt.jpg") center / 408px 294px repeat;
}

.belote-scene[hidden] {
  display: none;
}

.belote-scene,
.belote-scene * {
  box-sizing: border-box;
}

.belote-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  min-width: 0;
  margin: 0;
}

.belote-scene .card-table {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  /* Equal side columns keep the turned card and the trick in the middle of the screen. */
  grid-template-columns: var(--belote-side) minmax(0, 1fr) var(--belote-side);
  --belote-side: clamp(62px, 15vw, 150px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: stretch;
  align-items: center;
  gap: 4px 0;
}

.belote-scene .card-seat.is-west {
  justify-self: start;
  align-items: flex-start;
}

.belote-scene .card-seat.is-east {
  justify-self: end;
  align-items: flex-end;
}

.belote-scene .card-seat.is-north {
  justify-self: center;
}

.belote-hand .belote-card {
  width: clamp(72px, 18.5vw, 144px);
  height: calc(clamp(72px, 18.5vw, 144px) * 1.447);
}


.belote-seats,
.belote-trick,
.belote-hand,
.belote-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.belote-hand {
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: safe center;
  gap: 0;
  padding: 28px 8px 10px;
  overflow-x: auto;
  overflow-y: hidden;
}

.belote-scene .scroll-bar {
  --scroll-thumb: rgb(255 255 255 / 0.75);
  --scroll-thumb-on: #fff;
  margin-bottom: 4px;
}

.belote-hand.is-scrollable {
  justify-content: flex-start;
}

.belote-note,
.belote-seat,
.belote-play span {
  margin: 0;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
}

/* Spoken for screen readers only: on screen it sat over the hand. */
.belote-note {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.belote-trump {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto 2px;
  color: #1a1a1a;
}

.belote-trump[data-red="true"] {
  color: #e10600;
}

.belote-trump svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.belote-bid-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.5);
  color: #fff;
  font: 700 12px/1 ui-sans-serif, system-ui, sans-serif;
  vertical-align: middle;
}

.belote-bid-tag.is-take {
  background: #f7f4ee;
  color: #1a1a1a;
}

.belote-bid-tag .belote-trump {
  width: 14px;
  height: 14px;
  margin: 0;
}

.belote-you {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.belote-scene .card-center {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

/* Rows are fixed so the round keeps the tall row while the contract line is hidden. */
.belote-scene .card-center > .belote-contract { grid-row: 1; }
.belote-scene .card-center > .belote-note { grid-row: 3; }

.belote-scene .card-center .play-round {
  grid-row: 2;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  container-type: size;
}

.belote-scene .belote-trick {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
}

.belote-scene .belote-trick .belote-turned {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.belote-scene .belote-trick .belote-turned-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 6px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.belote-scene .belote-play {
  --play-w: min(25vw, 34cqh, 152px);
  --play-h: calc(var(--play-w) * 1.447);
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  margin: 0;
}

/* The four cards of a trick sit close around the middle, each nudged toward its player. */
.belote-scene .belote-play.is-north {
  transform: translate(-50%, -50%) translate(4%, calc(var(--play-h) * -0.48)) rotate(-4deg);
}

.belote-scene .belote-play.is-south {
  transform: translate(-50%, -50%) translate(-4%, calc(var(--play-h) * 0.48)) rotate(3deg);
}

.belote-scene .belote-play.is-east {
  transform: translate(-50%, -50%) translate(calc(var(--play-w) * 0.94), 2%) rotate(7deg);
}

.belote-scene .belote-play.is-west {
  transform: translate(-50%, -50%) translate(calc(var(--play-w) * -0.94), -2%) rotate(-6deg);
}

.belote-scene .belote-play .belote-card {
  padding: 0;
  width: var(--play-w);
  height: var(--play-h);
}

/* Every card, face up or down, lifts off the cloth with the same shadow. */
.belote-scene {
  --belote-card-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 3px 8px rgb(0 0 0 / 28%);
}

.card-back.belote-back {
  border: 0;
  border-radius: 8px;
  background: #1f35dc url("/src/games/belote/backs/back-blue.svg") center / cover no-repeat;
  box-shadow: var(--belote-card-shadow);
}

.belote-card.is-art {
  border: 0;
  background: transparent;
  box-shadow: var(--belote-card-shadow);
}

.belote-card.is-art::before {
  display: none;
}

.belote-card.is-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.belote-scene .card-seat-name {
  background: transparent;
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.55);
}

.belote-turned {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.belote-turned-label {
  margin: 0;
  color: #fff;
  font: 700 15px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.45);
}

.belote-scene .belote-trick .belote-turned .belote-card {
  width: min(36vw, 38cqh, 210px);
  height: calc(min(36vw, 38cqh, 210px) * 1.447);
  padding: 0;
}

/* While the take/pass box is open, the turned card sits centred in the room above it. */
.belote-scene.is-bidding .belote-trick .belote-turned {
  top: calc(50% - 40px);
}

.belote-scene.is-bidding .belote-trick .belote-turned .belote-card {
  --turned-w: max(56px, min(36vw, calc((100cqh - 150px) / 1.447), 210px));
  width: var(--turned-w);
  height: calc(var(--turned-w) * 1.447);
}

/* A bot's take is called out over the table for a moment. */
.belote-announce {
  position: absolute;
  z-index: 45;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #f7f4ee;
  color: #1a1a1a;
  font: 700 18px/1.1 ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: belote-announce 1800ms ease forwards;
}

.belote-announce .belote-trump {
  width: 22px;
  height: 22px;
  margin: 0;
}

@keyframes belote-announce {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  20% { transform: translate(-50%, -50%) scale(1); }
  82% { opacity: 1; }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .belote-announce { animation: none; }
}

.belote-bid {
  position: absolute;
  z-index: 40;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: calc(100vw - 16px);
  margin: 0;
  padding: 8px;
  border-radius: 22px;
  background: #1b1b1b;
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.28);
}

.belote-bid[hidden] {
  display: none;
}

.belote-bid::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 22px;
  height: 12px;
  background: #1b1b1b;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  transform: translateX(-50%);
}


.belote-take,
.belote-pass {
  display: grid;
  place-items: center;
  min-width: 92px;
  height: 58px;
  padding: 0 16px;
  border: 0;
  border-radius: 16px;
  background: #f7f7f7;
  color: #1a1a1a;
  font: 700 20px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.belote-take .belote-trump {
  width: 28px;
  height: 28px;
  margin: 0;
}

.belote-scene.is-bidding .play-round {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.is-dealing .belote-turned .belote-card {
  animation: none;
}

/* Each card casts its shadow left, onto the card it overlaps, so white edges stay apart. */
.belote-hand .belote-card,
.belote-hand .belote-card.is-art {
  z-index: var(--fan-z, 1);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 10%), -4px 1px 10px rgb(0 0 0 / 30%), 0 3px 8px rgb(0 0 0 / 22%);
  margin-inline: -14px;
  transform-origin: 50% 128%;
  transform: translateY(var(--fan-y, 0px)) rotate(var(--fan-rot, 0deg));
  transition: transform 180ms ease;
}

.belote-hand button.belote-card:not(:disabled) {
  cursor: grab;
  touch-action: none;
}

.belote-hand.is-scrollable button.belote-card:not(:disabled) {
  touch-action: pan-x;
}

.belote-hand button.belote-card:not(:disabled):hover {
  z-index: 20;
  transform: translateY(calc(var(--fan-y, 0px) - 12px)) rotate(var(--fan-rot, 0deg));
}

.belote-hand button.belote-card.is-dragging,
.belote-hand button.belote-card.is-dragging:hover {
  z-index: 60;
  transform: none;
}

.belote-card.is-dragging {
  position: fixed;
  z-index: 60;
  margin: 0;
  cursor: grabbing;
  touch-action: none;
  transform: none;
  transition: none;
  box-shadow: 0 14px 28px rgb(0 0 0 / 28%);
}

.belote-card.is-dragging.is-settling {
  transition:
    left 240ms cubic-bezier(0.22, 0.8, 0.24, 1),
    top 240ms cubic-bezier(0.22, 0.8, 0.24, 1),
    transform 240ms cubic-bezier(0.22, 0.8, 0.24, 1);
}

.belote-slot {
  visibility: hidden;
  pointer-events: none;
}

.belote-scene .play-round.is-drop {
  background: #ffffff;
}

.belote-card {
  position: relative;
  display: block;
  width: 96px;
  height: 138px;
  min-height: 0;
  padding: 0;
  border: 1px solid #d0d0d4;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  color: #1a1a1a;
  box-shadow: 0 1px 1px rgb(0 0 0 / 8%), 0 5px 12px rgb(0 0 0 / 14%);
  touch-action: manipulation;
}

.belote-card[data-red="true"] {
  color: #e10600;
}

.belote-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #e2e2e6;
  border-radius: 5px;
  pointer-events: none;
}

.belote-card .playing-corner {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.belote-card .playing-corner.is-tl {
  top: 12px;
  left: 11px;
}

.belote-card .playing-corner.is-br {
  right: 11px;
  bottom: 12px;
  transform: rotate(180deg);
}

.belote-card .playing-rank {
  font: 700 24px/0.85 Georgia, "Times New Roman", serif;
  letter-spacing: -0.04em;
}

.belote-card .playing-suit {
  display: block;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.belote-card .playing-suit svg,
.belote-card .playing-pip svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.belote-card .playing-pip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  aspect-ratio: 1;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}


button.belote-card {
  cursor: pointer;
}

button.belote-card:disabled {
  cursor: default;
}

.belote-scene .belote-action {
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border: 1px solid var(--tool-line);
  border-radius: 12px;
  background: var(--tool-bg);
  color: var(--tool-text);
  font: 600 15px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}

.belote-scene .belote-action.is-primary {
  border-color: var(--tool-accent);
  background: var(--tool-accent);
  color: var(--tool-accent-ink);
}

.belote-card,
button.belote-card,
button.belote-card:disabled,
.belote-card.is-art,
.belote-card.is-art img {
  opacity: 1;
}

.belote-layout {
  position: relative;
}

.belote-scene .card-seat,
.belote-scene .card-south {
  position: relative;
}

/* Each side's won tricks sit just beside its seat. */
.belote-won {
  position: absolute;
  z-index: 3;
  width: 50px;
  height: 72px;
  pointer-events: none;
}

/* A trick on its way to the pile shows its back, never its face. */
.belote-card.is-face-down {
  background: #1f35dc url("/src/games/belote/backs/back-blue.svg") center / cover no-repeat;
  box-shadow: var(--belote-card-shadow);
}

.belote-card.is-face-down img {
  visibility: hidden;
}

.belote-won.is-north { top: 50%; left: calc(100% + 18px); transform: translateY(-40%); }
.belote-won.is-south { top: -76px; right: 14px; }
.belote-won.is-west { top: calc(100% + 16px); left: 6px; }
.belote-won.is-east { top: calc(100% + 16px); right: 6px; }

/* Won tricks are a face-down pile, each card a little askew. */
.belote-won .belote-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  transform: translate(var(--pile-x, 0px), var(--pile-y, 0px)) rotate(var(--pile-rot, 0deg));
}

.belote-won .belote-card.is-collected {
  animation: belote-collect 320ms cubic-bezier(0.16, 0.84, 0.32, 1);
}

@keyframes belote-collect {
  from { scale: 1.25; }
}

.belote-scene .belote-action:disabled {
  cursor: default;
  opacity: 0.45;
}

.belote-card:focus-visible,
.belote-action:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (max-width: 680px) {
  .belote-scene {
    padding-top: max(4px, var(--scoreboard-bottom, 64px));
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .belote-scene {
    padding-top: max(4px, var(--scoreboard-bottom, 52px));
    padding-bottom: 0;
    overflow: hidden;
  }

  .belote-hand {
    padding: 4px 8px 2px;
  }

  .belote-hand .belote-card {
    width: min(12vw, 13.5vh, 80px);
    height: calc(min(12vw, 13.5vh, 80px) * 1.447);
    margin-inline: -14px;
  }

  /* The trick fills the middle band between the north seat and the hand. */
  .belote-scene .card-center {
    position: relative;
  }

  .belote-scene .belote-contract {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
  }

  .belote-scene .card-center .play-round {
    position: absolute;
    z-index: 3;
    inset: 22px 0 0;
    width: auto;
    height: auto;
  }

  .belote-scene .belote-play {
    --play-w: min(14vw, 37cqh, 120px);
  }

  /* Low screens stack north and south closer so the whole trick fits the band. */
  .belote-scene .belote-play.is-north {
    transform: translate(-50%, -50%) translate(4%, calc(var(--play-h) * -0.36)) rotate(-4deg);
  }

  .belote-scene .belote-play.is-south {
    transform: translate(-50%, -50%) translate(-4%, calc(var(--play-h) * 0.36)) rotate(3deg);
  }

  .belote-scene .belote-trick .belote-turned .belote-card {
    width: min(14vw, 62cqh, 120px);
    height: calc(min(14vw, 62cqh, 120px) * 1.447);
  }
}

/* Start menu, drawn like Brawl's title: the kind of game, then the teams. */
.belote-scene.is-picking .belote-layout {
  visibility: hidden;
}

.belote-start {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px 16px;
  background: #111725;
  color: #e8ecf5;
}

.belote-start[hidden] {
  display: none;
}

.belote-start-title {
  margin: 0;
  color: #ffd447;
  font-size: clamp(26px, 9vw, 48px);
  line-height: 1;
}

.belote-start-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.belote-start-item {
  display: block;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: #c7cfdf;
  font-size: clamp(13px, 3.6vw, 18px);
  line-height: 1;
  cursor: pointer;
}

.belote-start-item.is-on {
  color: #ffd447;
}

.belote-start-item:disabled {
  color: #4b5568;
  cursor: default;
}

.belote-start-item:focus-visible {
  outline: 2px solid #ffd447;
  outline-offset: 2px;
}

.belote-start-hint {
  margin: 0;
  color: #8b97b0;
  font: 600 13px/1.4 ui-sans-serif, system-ui, sans-serif;
  text-align: center;
}