:root {
  --orchard: #284d36;
  --honey: #e7ad62;
  --cream: #fff6e1;
  --peach: #efb39a;
  --wood-button: url("pomar/botao-verde.webp");
  --wood-plaque: url("pomar/placa.webp");
  --wood-ticket: url("pomar/bilhete.webp");
}

body[data-model="madeira"] {
  background: radial-gradient(ellipse at top, #3a5743, #162c22 77%);
  min-height: 100dvh;
  font-family: Nunito, system-ui, sans-serif;
}
body[data-model="madeira"] .page {
  --stage-height: 100dvh;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: min(100%, 490px);
  padding: 0;
}
body[data-screen="ferramentas"][data-model="madeira"] { background: #f9edda; }
body[data-screen="ferramentas"][data-model="madeira"] .page { width: min(1000px, calc(100% - 24px)); padding: 12px 0 20px; }
body[data-model="madeira"] .layout { display: block; }
.test-head {
  position: absolute;
  top: max(9px, env(safe-area-inset-top));
  inset-inline: max(9px, env(safe-area-inset-left)) max(9px, env(safe-area-inset-right));
  z-index: 8;
  margin: 0;
  padding: 0;
  justify-content: space-between;
  pointer-events: none;
}
.test-head button { pointer-events: auto; font-size: .77rem; }
#install { margin-left: auto; }
.install-help { position: absolute; z-index: 9; inset: 52px 9px auto; box-shadow: 0 3px 10px #2a201d60; }
.orchard-home, .orchard-finish, .crate-screen, .game[data-theme="madeira"] {
  position: relative;
  height: var(--stage-height);
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  box-shadow: 0 8px 45px #07140d88;
}
.orchard-home, .orchard-finish {
  background: #edb183 url("pomar/capa.webp") center center / cover no-repeat;
}
.orchard-home {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  padding: max(42px, calc(env(safe-area-inset-top) + 24px)) 13px max(18px, env(safe-area-inset-bottom));
  gap: 10px;
}
.orchard-home h1 { align-self: start; margin: 0; width: min(74%, 32dvh, 360px); }
.orchard-home h1 img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 4px #5c33195c); }
.home-pickup {
  position: relative;
  width: min(72%, 41dvh, 340px);
  isolation: isolate;
  margin-block: 12px 0;
  transform: translate(5%, clamp(24px, 7svh, 48px));
  filter: drop-shadow(0 8px 3px #4e2f234f);
}
.home-truck { position: relative; display: block; width: 100%; height: auto; }
.home-cargo { display: flex; gap: 1%; position: absolute; left: 6%; bottom: 66%; width: 35%; z-index: -1; }
.home-cargo > .crate-art { flex: 1; min-width: 0; }
.home-actions { display: grid; justify-items: center; align-self: end; gap: 7px; }
.art-button, .art-control { border: 0; font: inherit; font-weight: 800; background-color: transparent; }
.art-button {
  width: clamp(186px, 55vw, 242px);
  min-height: 66px;
  display: grid;
  align-content: center;
  justify-items: center;
  color: var(--cream);
  background: var(--wood-button) center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 2px #5d32104f);
  padding: 6px 18px 9px;
  line-height: 1.16;
}
.art-button strong { font-size: clamp(1.26rem, 4.9vw, 1.66rem); }
.art-button span { font-size: .85rem; color: #ffdda2; }
.art-control, .action.art-control {
  min-height: 36px;
  padding: 7px 14px;
  border: 0;
  color: #342619;
  background: var(--wood-plaque) center / 100% 100% no-repeat;
}
.art-control:is(a) { display: inline-grid; place-items: center; text-decoration: none; }
.action.art-control:not(:disabled):hover { background: var(--wood-plaque) center / 100% 100% no-repeat; }
.art-control:not(:disabled):hover, .art-button:not(:disabled):hover { filter: brightness(1.07); }
.home-actions .art-control { font-size: .76rem; }
.orchard-footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: .75rem;
  color: #3c5540;
}
.orchard-finish { display: grid; align-items: center; padding: 15px; }
.finish-card {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 12px;
  margin-inline: auto;
  width: min(100%, 350px);
  padding: clamp(133px, 38cqw, 152px) 16px 24px;
  background: var(--wood-ticket) center / 100% 100% no-repeat;
  filter: drop-shadow(0 7px 5px #4b2e1745);
}
.finish-card h2 { font-size: clamp(1.28rem, 5.4vw, 1.7rem); margin: 0; color: #284d36; }
.crate-screen {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: 9px;
  padding: max(58px, calc(env(safe-area-inset-top) + 51px)) 18px max(18px, env(safe-area-inset-bottom));
  background: #f5cb9e url("pomar/estande.webp") center / 100% 100% no-repeat;
}
.crate-screen h2 { margin: 0; font-size: 1.05rem; padding-inline: 21px; }
.crate-groups { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.crate-groups .art-control { min-height: 33px; padding-inline: 9px; font-size: .76rem; }
.crate-groups .art-control[aria-pressed="true"] {
  color: var(--cream);
  background-image: var(--wood-button);
}
.crate-models { align-self: center; min-height: 0; max-height: 100%; overflow: auto; width: min(100%, 340px); display: grid; gap: 5px; padding: 3px; }
.crate-option {
  display: grid; grid-template-columns: 48% minmax(0, 1fr); align-items: center; gap: 7px;
  text-align: left; padding: 5px 7px; min-height: 47px; border: 1px solid #9d7146;
  border-radius: 8px; color: #352619; background: #fff1d5de;
}
.crate-option strong { font-size: .82rem; }
.crate-option[aria-pressed="true"] { outline: 2px solid #315e42; outline-offset: -2px; background: #eaf0d5; }
.crate-samples { display: flex; align-items: end; justify-content: center; gap: 4px; padding-block: 1px; }
.crate-samples > * { flex: 1; min-width: 0; max-width: 53px; }
.crate-samples > .crate-art[data-labelled="true"] { flex: 1.2; max-width: 66px; }
.crate-sample-stack { display: flex; flex-direction: column; }
.crate-sample-stack > .crate-art:first-child { z-index: 1; }
.crate-sample-stack > .crate-art[data-open="true"]:last-child { margin-top: -13%; }
.crate-painted-option { grid-template-columns: 1fr; text-align: center; gap: 12px; padding: 12px 8px; }
.crate-painted-samples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 5px; }
.crate-painted-samples > span { display: grid; gap: 4px; }
.crate-painted-samples strong { font-size: .74rem; }
.crate-painted-stack {
  display: flex;
  flex-direction: column-reverse;
  width: min(35%, 108px);
  margin-inline: auto;
}
.crate-painted-stack > .crate-art + .crate-art { margin-bottom: -16.12%; }
.crate-screen .art-button strong { font-size: clamp(.9rem, 4vw, 1.2rem); }
.crate-screen .art-button { min-height: 55px; }
.tools-layout { display: grid; gap: 10px; }
.tools-layout { padding-top: 45px; }
.tools-nav { display: flex; gap: 14px; flex-wrap: wrap; color: var(--orchard); font-weight: 750; }
.tools-phase { font-size: .85rem; font-weight: 700; }
.tools-phase select { margin-left: 3px; max-width: 100%; font: inherit; padding: 5px; border-radius: 5px; }

.game[data-theme="madeira"] {
  --crate-width: clamp(32px, min(18cqw, calc((var(--stage-height) - 400px) / 7.65)), 78px);
  --crate-height: calc(var(--crate-width) * .62);
  --piece-step: calc(var(--crate-height) * .97);
  display: flex;
  flex-direction: column;
  color: #3e281a;
  background: #b57243 url("pomar/estande.webp") center / 100% 100% no-repeat;
}
.game[data-theme="madeira"] .scene {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  padding: 0 0 7px;
  background: none;
}
.game[data-theme="madeira"] .game-head {
  position: relative;
  justify-content: center;
  padding: max(8px, env(safe-area-inset-top)) 12px 5px;
  min-height: 50px;
  background: transparent;
}
.game[data-theme="madeira"] .game-head h2 { margin: 0; min-height: 34px; padding: 6px 18px; color: #28472e; font-size: .94rem; }
.game[data-theme="madeira"] .trip {
  position: absolute; right: 10px; bottom: 9px; padding: 4px 8px; color: #3b2b20;
  background: var(--wood-plaque) center / 100% 100% no-repeat; font-size: .72rem;
}
.game[data-theme="madeira"] #loading { flex-shrink: 0; }
.game[data-theme="madeira"] .dispatch .order {
  background-image: var(--wood-ticket);
  padding: 18% 10% 6%;
  filter: drop-shadow(0 3px 2px #77301140);
}
.game[data-theme="madeira"] .dispatch { padding-inline: clamp(17px, 5cqw, 27px); }
.game[data-theme="madeira"] .order-head { border-bottom-color: #80593358; }
.game[data-theme="madeira"] .cart .pickup { aspect-ratio: 800 / 381; }
.game[data-theme="madeira"] .cart .pickup-caption {
  display: block;
  padding: 3px 8px 4px;
  border-radius: 5px;
  background: #392317da;
}
.game[data-theme="madeira"] .cart :is(.pickup-action, small) { color: #fff0cf; }
.game[data-theme="madeira"] .pickup-bed { inset: auto 59% 68% 4%; height: 28%; }
.game[data-theme="madeira"] .pickup .cargo-crate { width: 100%; }
.game[data-theme="madeira"] .controls {
  position: relative;
  flex-shrink: 0;
  display: grid;
  justify-items: center;
  min-height: 81px;
  gap: 4px;
  padding: 6px 11px max(8px, env(safe-area-inset-bottom));
  background: linear-gradient(#3b2517b0, #3a2112e6);
  border-top: 1px solid #f3c585a8;
}
.game[data-theme="madeira"] .controls p {
  min-height: 2.3em;
  font-size: .74rem;
  text-align: center;
  color: #ffecc6;
}
.game[data-theme="madeira"] .controls p[data-tone="warning"] { color: #ffd999; }
.game[data-theme="madeira"] .controls p[data-tone="success"] { color: #e4f4c0; }
.game[data-theme="madeira"] .controls .actions { justify-content: center; margin: 0; }
.game[data-theme="madeira"] .controls .action { min-height: 34px; padding-block: 5px; font-size: .77rem; }
.game[data-theme="madeira"] .stock-bar { margin-inline: 5%; background: #fff1d298; border-radius: 5px; }
.game[data-theme="madeira"] #board { margin-block: auto; }
#board[data-open-crates="true"] .cell:has(.crate:not(.top)) { min-height: 0; }
.game[data-theme="madeira"] .wood-board { padding-inline: 4.5%; }
.wood-board .shelf-plank { height: clamp(14px, 3.7vw, 28px); }
.wood-board .crate.top.selected { filter: brightness(1.13) drop-shadow(0 2px 2px #21492d); }
.wood-board .pile.drag-over .crate.top,
.wood-board .pile.drag-over .base { filter: brightness(1.18) drop-shadow(0 0 4px #fce294); }
.action.art-control:disabled { filter: saturate(.5); }
.crate-art { display: block; position: relative; width: 100%; aspect-ratio: 300 / 186; pointer-events: none; transform-origin: 50% 90%; }
.crate .crate-art { position: absolute; left: 0; bottom: 0; }
.crate-shell, .crate-fruit { display: block; width: 100%; height: 100%; object-fit: contain; }
.crate-art .crate-fruit {
  position: absolute; left: var(--fruit-x, 50%); top: var(--fruit-y, 53%);
  width: var(--fruit-width, 39%); height: var(--fruit-height, 66%); transform: translate(-50%, -50%);
}
.crate-art[data-crate-model="pintada"] { --fruit-y: 56%; }
.crate-art[data-open="true"] { --fruit-y: 65%; --fruit-height: 52%; --fruit-width: 34%; }
.crate-art[data-labelled="true"] .crate-label-face {
  position: absolute;
  top: var(--label-y, 68%);
  left: var(--label-x, 50%);
  width: var(--label-width, 29%);
  height: var(--label-height, 21%);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
}
.crate-art[data-crate-model="feira-azul"] { --label-y: 71%; --label-width: 16%; --label-height: 28%; }
.crate-art[data-crate-model="feira-menta"] { --label-y: 77%; }
.crate-art[data-crate-model="feira-amarela"] { --label-y: 72%; }
.crate-art[data-crate-model="feira-terracota"] { --label-y: 75%; }
.crate-art[data-crate-model="feira-violeta"] { --label-y: 77%; }
.crate-art[data-labelled="true"] .crate-label-face .crate-fruit {
  position: static;
  width: 100%;
  height: 90%;
  transform: none;
}

@media (min-width: 560px), (orientation: landscape) {
  body[data-model="madeira"] .page { --stage-height: min(calc(100dvh - 24px), 870px); width: min(100%, calc(var(--stage-height) * .5625)); padding-block: 12px; }
  body[data-model="madeira"] .test-head { top: 21px; }
  .orchard-home, .orchard-finish, .crate-screen, .game[data-theme="madeira"] { border-radius: 13px; }
}
@media (max-height: 720px) {
  .game[data-theme="madeira"] { --crate-width: clamp(32px, min(18cqw, calc((var(--stage-height) - 348px) / 7.65)), 78px); }
  .game[data-theme="madeira"] .dispatch .order { padding: 16% 8% 5%; }
  .wood-board .shelf-plank { height: 13px; }
}
@media (max-width: 350px) { .game[data-theme="madeira"] .game-head h2 { font-size: .83rem; padding-inline: 12px; } }
.game[data-theme="madeira"][data-labelled-crates="true"] {
  --crate-width: clamp(33px, min(18.5cqw, calc((var(--stage-height) - 420px) / 6.2)), 74px);
}
@media (max-height: 850px) {
  .game[data-theme="madeira"][data-labelled-crates="true"] {
    --crate-width: clamp(33px, min(18.5cqw, calc((var(--stage-height) - 352px) / 6.2)), 74px);
  }
}