body[data-screen="partida"] :is(.test-head, #install-help) { display: none; }

.game-control {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: url("artes-controles/ardosia-quadrada.webp") center / 100% 100% no-repeat;
  color: #fff1ca;
  filter: drop-shadow(0 2px 1px #29190ac2);
}
.game-control svg { width: 50%; height: 50%; }
.game-control:disabled { filter: grayscale(.6) brightness(.73); opacity: .65; cursor: default; }
.game-control:not(:disabled):active { transform: translateY(2px); }
.game-control[aria-pressed="true"] { filter: drop-shadow(0 0 3px #fff0ad); }
.game-control :is(.use-count, .video-badge) {
  position: absolute;
  top: -4px;
  right: -4px;
  pointer-events: none;
}
.game-control .use-count {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid #9d6435;
  border-radius: 50%;
  background: #fff3cb;
  color: #362c1c;
  box-shadow: 0 1px 1px #1d170b70;
  font: 800 12px/1 system-ui, sans-serif;
}
.game-control .video-badge { width: 29px; height: auto; top: -7px; }

#partida { isolation: isolate; }
#partida .scene { overflow: hidden; padding-bottom: 0; }
#partida .game-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  padding: max(10px, env(safe-area-inset-top)) 4.5% 6px;
}
#pause-game { width: 48px; height: 48px; }
#partida #phase-title {
  display: grid;
  place-items: center;
  min-width: 116px;
  min-height: 36px;
  margin-top: 2px;
  white-space: nowrap;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
#partida .trip {
  position: static;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 4px;
  min-height: 35px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
#partida .trip svg { width: 18px; height: 18px; }
#partida .dispatch { min-height: 0; padding-block: 0; }
#partida .dispatch .order { padding: 22% 8% 9%; }
#partida .tickets { justify-content: center; }
#partida .ticket.done .wood-fruit { opacity: .44; }
.ticket-strike { position: absolute; inset: 4%; display: grid; place-items: center; color: #6a2f38; pointer-events: none; }
.ticket-strike svg { width: 100%; height: 100%; stroke-width: 1.8; }
.ticket:nth-child(even) .ticket-strike { transform: rotate(-6deg); }
#partida .pickup-bed { inset: auto 58% 67% 5%; height: 24%; z-index: 2; }
#partida .pickup-bed .cargo-crate { align-self: end; }

#partida #board {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-block: 0;
  overflow: clip;
  container-type: size;
}
html:has(body[data-screen="partida"]), body[data-screen="partida"] { overflow: hidden; }
#partida .wood-board {
  /* Cada prateleira reserva quatro caixas, a base, a tábua e a folga do topo. */
  --crate-width: min(74px, 18.5cqw, calc((100cqh - 10px) / var(--shelf-count) / 2.85));
  --crate-height: calc(var(--crate-width) * .62);
  --piece-step: calc(var(--crate-height) * var(--stack-pitch, .97));
  --base-width: calc(var(--crate-width) * 1.16);
  --base-height: calc(var(--base-width) * .303125);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin: 0;
  padding-block: calc(var(--crate-height) - var(--piece-step) + 5px) 5px;
}
#partida #board[data-crate-design="pintada"] { --stack-pitch: .9; }
#partida #board[data-open-crates="true"] { --stack-pitch: .74; }
#partida .wood-shelf { flex: 0 0 auto; }
#partida .wood-board .cell[data-layer="1"] { z-index: 1; }
#partida .wood-board .cell[data-layer="2"] { z-index: 2; }
#partida .wood-board .cell[data-layer="3"] { z-index: 3; }
#partida .wood-board .cell[data-layer="4"] { z-index: 4; }
#partida .wood-shelf + .wood-shelf { margin-top: calc(var(--crate-height) - var(--piece-step)); }
#partida .wood-shelf .shelf-plank { height: calc(var(--crate-width) * .17); }
#partida .shuffle-space { min-height: calc(var(--piece-step) * 4 + var(--base-height) * .68); }
#partida .controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  align-items: center;
  min-height: 0;
  padding: 9px 8% max(10px, env(safe-area-inset-bottom));
  border: 0;
  background: transparent;
}
.aid-toolbar { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; gap: 5px; }
.aid-toolbar .game-control { width: min(52px, 100%); height: auto; aspect-ratio: 1; }

#partida:is(.reordering, .showing-hint) {
  background-image: linear-gradient(#1c1712a6, #1c1712a6), url("pomar/estande.webp");
}
#partida.reordering :is(.dispatch, .shelf-plank) { filter: brightness(.43); }
#partida.showing-hint :is(.game-head, .order, .shelf-plank, .base, .crate, .cart, .aid-toolbar) { filter: brightness(.43); }
#partida.showing-hint .hint-target {
  filter: brightness(1.12) drop-shadow(0 0 2px #fff9d9) drop-shadow(0 0 7px #ffcf64);
}
#partida.showing-hint .cart.ready { border-color: transparent; background: transparent; }

.game-dialog {
  padding: 16px;
  border: 1px solid #d8a95f;
  border-radius: 13px;
  background: #283c2c;
  color: #fff1ca;
}
.game-dialog::backdrop { background: #1c1712af; }
#pause-dialog[open] { display: flex; gap: 14px; }
#reward-video { width: min(88vw, 360px); padding: 0; overflow: hidden; }
#reward-video video { display: block; width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }
#close-video, #retry-video { position: absolute; right: 8px; }
#close-video { top: 8px; width: 44px; height: 44px; }
#retry-video { bottom: 8px; }