:root {
  --azul-claro: #dff3ff;
  --azul-forte: #2479a8;
  --verde-claro: #e7f7df;
  --verde-forte: #4f8b55;
  --texto: #34424a;
  --foco: #f2b705;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--texto);
  background: radial-gradient(circle at 12% 15%, #fff 0 8%, transparent 27%), linear-gradient(145deg, var(--azul-claro), #fbfdff 52%, var(--verde-claro));
}
.navegacao-ambiente { position: fixed; z-index: 100; inset-block-start: 14px; inset-inline-start: 14px; }
.botao-voltar-ambiente { min-width: 112px; min-height: 52px; padding: 10px 20px; border: 3px solid #fff; border-radius: 999px; color: #24434f; background: rgb(255 255 255 / 96%); box-shadow: 0 7px 18px rgb(47 93 113 / 14%); font: inherit; font-weight: 900; cursor: pointer; }

.pagina-salada { width: min(1160px, calc(100% - 32px)); min-height: 100vh; margin: auto; padding: clamp(20px, 4vw, 48px) 0; }
.cartao-tela { min-height: calc(100vh - clamp(40px, 8vw, 96px)); border: 3px solid #fff; border-radius: 38px; background: rgb(255 255 255 / 88%); box-shadow: 0 18px 50px rgb(53 102 122 / 14%); }
.acolhimento { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 30px; padding: clamp(28px, 6vw, 72px); }
.acolhimento h1, .cabecalho-centralizado h1 { margin: .2em 0; font-size: clamp(2.2rem, 6vw, 4.5rem); }
.personagens { width: min(100%, 510px); justify-self: center; }
.tela-selecao { display: grid; grid-template-rows: auto 1fr auto; gap: 22px; padding: clamp(22px, 4vw, 46px); outline: none; }
.cabecalho-centralizado { text-align: center; }
.cabecalho-centralizado h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
.cabecalho-centralizado p { margin-inline: auto; }
.contador-selecao, .progresso { min-height: 1.5em; margin: 10px 0 0; color: #52636c; font-size: 1.1rem; font-weight: 900; }
.grade-frutas { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); align-content: center; gap: clamp(10px, 2vw, 20px); }
.opcao-fruta, .fruta-disponivel {
  position: relative; display: grid; place-items: center; gap: 5px; min-width: 0; padding: 10px; border: 3px solid #d5e7ee; border-radius: 25px;
  color: var(--texto); background: #fff; box-shadow: 0 8px 18px rgb(47 93 113 / 10%); font: inherit; font-weight: 800; cursor: pointer; touch-action: manipulation;
}
.opcao-fruta img { width: min(100%, 112px); aspect-ratio: 1; object-fit: contain; }
.opcao-fruta-selecionada { border-color: var(--azul-forte); box-shadow: 0 0 0 4px rgb(223 243 255 / 95%), 0 8px 18px rgb(47 93 113 / 14%); }
.marcador-selecao { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #aabdc5; border-radius: 50%; background: #fff; font-size: 1.2rem; font-weight: 900; }
.opcao-fruta-selecionada .marcador-selecao { border-color: var(--azul-forte); }
.controle-confirmar { display: grid; justify-content: center; }
.botao-confirmar, .botao-icone { min-width: 158px; min-height: 68px; padding: 12px 24px; border: 3px solid #fff; border-radius: 23px; color: #24434f; background: var(--verde-claro); box-shadow: 0 9px 22px rgb(47 93 113 / 15%); font: inherit; font-weight: 900; cursor: pointer; }

.tela-preparacao { display: grid; grid-template-rows: auto 1fr auto auto; gap: 16px; padding: clamp(18px, 3vw, 36px); outline: none; }
.cabecalho-preparacao { text-align: center; }
.painel-comando { display: flex; justify-content: center; align-items: center; gap: clamp(10px, 2vw, 22px); min-height: 100px; }
.painel-comando h1 { margin: 0; font-size: clamp(1.4rem, 3.5vw, 2.2rem); }
.comando-numeral { display: grid; place-items: center; width: clamp(68px, 9vw, 96px); aspect-ratio: 1; border: 4px solid #fff; border-radius: 25px; background: var(--azul-claro); box-shadow: 0 7px 18px rgb(47 93 113 / 14%); font-size: clamp(2.7rem, 7vw, 4.5rem); font-weight: 900; }
.comando-imagem { width: clamp(64px, 8vw, 92px); height: auto; object-fit: contain; }
.area-preparacao { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(480px, 1.28fr); align-items: stretch; gap: clamp(16px, 3vw, 34px); min-height: 400px; }
.painel-frutas { display: grid; align-content: center; gap: 12px; padding: 18px; border-radius: 28px; background: rgb(223 243 255 / 62%); }
.painel-frutas h2 { margin: 0; text-align: center; font-size: 1.2rem; }
.frutas-disponiveis { display: grid; grid-template-columns: repeat(2, minmax(88px, 1fr)); gap: 10px; }
.fruta-disponivel img { width: min(100%, 84px); aspect-ratio: 1; object-fit: contain; }
.tigela { position: relative; display: grid; place-items: center; min-height: 390px; overflow: hidden; border-radius: 38px; background: linear-gradient(180deg, rgb(231 247 223 / 48%), rgb(223 243 255 / 25%)); }
.conteudo-tigela { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(52px, 78px)); place-content: center; gap: 2px 5px; width: min(92%, 480px); min-height: 245px; padding: 18px 20px 70px; }
.unidade-tigela { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 3px; border: 0; border-radius: 18px; background: transparent; }
.unidade-tigela img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 4px rgb(55 79 44 / 18%)); }
button.unidade-provisoria { border: 3px dashed var(--azul-forte); background: rgb(255 255 255 / 74%); cursor: pointer; touch-action: manipulation; }
.indicador-retirar { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 25px; height: 25px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #52636c; font-size: 1.2rem; font-weight: 900; }
.frente-tigela { position: absolute; z-index: 1; left: 8%; bottom: 15px; width: 84%; height: 48%; border: 7px solid #4f91ad; border-top-width: 13px; border-radius: 20px 20px 48% 48%; background: linear-gradient(165deg, rgb(223 243 255 / 78%), rgb(114 184 214 / 88%)); box-shadow: inset 0 -15px 25px rgb(42 117 150 / 14%), 0 18px 26px rgb(53 102 122 / 17%); pointer-events: none; }
.frente-tigela::before { content: ""; position: absolute; left: -2%; top: -17px; width: 104%; height: 23px; border: 6px solid #397e9c; border-radius: 50%; background: #dff3ff; }
.tigela-vazia .conteudo-tigela::after { content: ""; width: 125px; height: 35px; border-radius: 50%; background: rgb(68 137 163 / 10%); }
.feedback { min-height: 1.5em; margin: 0; text-align: center; font-weight: 900; }
.titulo-conclusao { margin: 15px 0 0; font-size: clamp(1.8rem, 4vw, 3rem); }
.controles-conclusao { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.botao-icone { display: inline-flex; justify-content: center; align-items: center; gap: 10px; background: var(--azul-claro); }
.botao-icone > span { font-size: 2rem; }
button:focus-visible { outline: 5px solid var(--foco); outline-offset: 4px; }
button:disabled { cursor: default; opacity: .5; }
.falha { padding: 48px; }

@media (min-width: 821px) {
  .pagina-salada { height: 100svh; min-height: 0; padding: 12px 0; }
  .cartao-tela { height: calc(100svh - 24px); min-height: 0; }
  .tela-selecao { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); gap: 12px 18px; padding: clamp(16px, 2vh, 22px); }
  .tela-selecao > .cabecalho-centralizado { grid-column: 1; grid-row: 1; }
  .tela-selecao > .controle-confirmar { grid-column: 2; grid-row: 1; align-self: end; margin-inline-end: 132px; padding-bottom: 2px; }
  .tela-selecao > .grade-frutas { grid-column: 1 / -1; grid-row: 2; }
  .cabecalho-centralizado h1 { margin-top: 0; }
  .contador-selecao { margin-top: 5px; }
  .grade-frutas { gap: clamp(10px, 1.5vw, 16px); }
  .tela-preparacao { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px 18px; padding: clamp(12px, 1.8vh, 18px); }
  .cabecalho-preparacao { grid-column: 1; grid-row: 1; }
  .tela-preparacao > .controle-confirmar { grid-column: 2; grid-row: 1; align-self: center; margin-inline-end: 132px; }
  .tela-preparacao > .feedback { grid-column: 1 / -1; grid-row: 2; }
  .tela-preparacao > .feedback:empty { min-height: 0; }
  .tela-preparacao > .area-preparacao { grid-column: 1 / -1; grid-row: 3; }
  .tela-preparacao > .controles-conclusao { grid-column: 1 / -1; grid-row: 4; }
  .painel-comando { min-height: 82px; }
  .area-preparacao { min-height: 0; gap: clamp(14px, 2vw, 24px); }
  .painel-frutas { gap: 8px; padding: 10px; }
  .frutas-disponiveis { grid-template-columns: repeat(2, minmax(78px, 1fr)); gap: 7px; }
  .fruta-disponivel { min-height: 94px; gap: 2px; padding: 6px; border-radius: 18px; }
  .fruta-disponivel img { width: min(100%, 64px); }
  .tigela { min-height: 0; }
  .tela-preparacao:has(.titulo-conclusao:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .area-preparacao:has(.painel-frutas[hidden]) { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .area-preparacao:has(.painel-frutas[hidden]) .tigela { width: min(100%, 660px); }
  .titulo-conclusao { margin-top: 6px; }
}