:root {
  --azul-claro: #dff3ff;
  --azul-forte: #5ba9cc;
  --verde-claro: #dff3d7;
  --texto: #30434c;
  --foco: #8b4fc3;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-height: 100vh; margin: 0; color: var(--texto); background: linear-gradient(150deg, #eefaff, #f2faed); font-family: system-ui, sans-serif; }
.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-pagamento { width: min(1120px, 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 / 90%); 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 { margin: .2em 0; font-size: clamp(2.2rem, 6vw, 4.5rem); }
.personagens { width: min(100%, 510px); justify-self: center; }
.botao-grande { min-height: 62px; margin-top: 18px; font-size: 1.08rem; }
.tela-pagamento { display: grid; grid-template-rows: auto 1fr auto auto; gap: 12px; padding: clamp(16px, 3vw, 34px); outline: none; }
.cabecalho-compra { text-align: center; }
.orientacao { min-height: 1.4em; margin: 0; font-size: clamp(1.4rem, 3.5vw, 2.2rem); font-weight: 900; }
.area-compra { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(500px, 1.3fr); gap: clamp(16px, 3vw, 32px); align-items: stretch; }
.cartao-produto { position: relative; display: grid; place-items: center; align-content: center; min-width: 0; padding: 20px; overflow: hidden; border: 4px solid #fff; border-radius: 30px; background: var(--azul-claro); box-shadow: 0 10px 24px rgb(53 102 122 / 13%); }
.imagem-produto { width: min(100%, 230px); height: 230px; object-fit: contain; }
.nome-produto { margin: 4px 0 12px; text-align: center; font-size: clamp(1.3rem, 2.6vw, 1.8rem); text-transform: capitalize; }
.etiqueta-preco { display: grid; place-items: center; min-width: 148px; padding: 9px 18px; border: 3px solid #fff; border-radius: 21px; background: var(--verde-claro); }
.etiqueta-preco span { font-size: .9rem; font-weight: 800; }
.etiqueta-preco strong { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1; }
.selo-pago { position: absolute; inset: 15px 15px auto auto; display: none; place-items: center; width: 62px; aspect-ratio: 1; border: 4px solid #fff; border-radius: 50%; color: #245a36; background: #bce9c5; font-size: 2.5rem; font-weight: 900; }
.compra-paga { border-color: #8dd3a0; }
.compra-paga .selo-pago { display: grid; }
.area-interacao { display: grid; grid-template-columns: minmax(150px, .38fr) minmax(330px, 1fr); gap: 16px; }
.painel-moeda, .painel-pagamento { display: grid; align-content: center; justify-items: center; min-width: 0; padding: 15px; border-radius: 28px; background: rgb(223 243 215 / 48%); }
.painel-moeda h2, .painel-pagamento h2 { margin: 0 0 10px; text-align: center; font-size: 1.1rem; }
.pecas-disponiveis { display: grid; place-items: center; gap: 12px; width: 100%; }
.fase-2 .pecas-disponiveis { grid-template-columns: repeat(2, minmax(95px, 1fr)); }
.fase-3 .pecas-disponiveis { grid-template-columns: 1fr; }
.peca-disponivel, .peca-pagamento { position: relative; display: grid; place-items: center; padding: 3px; border: 3px solid transparent; background: transparent; cursor: pointer; touch-action: manipulation; }
.peca-disponivel { width: min(130px, 100%); }
.peca-disponivel img, .imagem-peca-pagamento { width: 100%; height: 100%; object-fit: contain; }
.peca-disponivel > span { position: absolute; right: 0; bottom: 4px; display: grid; place-items: center; width: 35px; aspect-ratio: 1; border: 3px solid #fff; border-radius: 50%; color: #fff; background: #397e9c; font-size: 1.6rem; font-weight: 900; }
.peca-moeda { border-radius: 50%; }
.peca-cedula { border-radius: 16px; }
.peca-disponivel.peca-cedula { width: min(170px, 100%); aspect-ratio: 1.5; }
.painel-pagamento { background: rgb(223 243 255 / 58%); }
.area-moedas { position: relative; display: grid; place-items: center; width: 100%; min-height: 330px; padding: 12px; border: 4px dashed #91bed1; border-radius: 27px; background: rgb(255 255 255 / 76%); }
.grade-moedas { display: grid; grid-template-columns: repeat(3, minmax(72px, 102px)); place-content: center; gap: 7px; width: 100%; min-height: 290px; }
.peca-pagamento { width: 100%; aspect-ratio: 1; border-color: #d5e7ee; background: #fff; }
.peca-pagamento.peca-cedula { padding: 6px 2px; }
.indicador-retirar { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 28px; aspect-ratio: 1; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #52636c; font-size: 1.3rem; font-weight: 900; }
.pagamento-vazio { position: absolute; margin: 0; color: #52636c; font-weight: 800; pointer-events: none; }
.contagem-moedas, .feedback { min-height: 1.5em; margin: 8px 0 0; text-align: center; font-weight: 900; }
.feedback { margin: 0; }
.controle-confirmar { display:flex; justify-content:center; gap:8px; }
.botao-confirmar, .botao-icone { min-width: 158px; min-height: 64px; padding: 11px 23px; border: 3px solid #fff; border-radius: 22px; color: #24434f; background: var(--verde-claro); box-shadow: 0 9px 22px rgb(47 93 113 / 15%); font: inherit; font-weight: 900; cursor: pointer; }
.botao-finalizar { min-width:120px; min-height:64px; padding:11px 20px; border:3px solid #d5e7ee; border-radius:22px; color:#40545d; background:#f5f8f9; box-shadow:0 7px 16px rgb(47 93 113 / 10%); font:inherit; font-weight:800; cursor:pointer; }
.conclusao { text-align: center; }
.conclusao h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 3.5vw, 2.3rem); }
.conclusao h2 { display:none; }
.controles-conclusao { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.botao-icone > span { display: block; font-size: 1.8rem; }
button:focus-visible { outline: 5px solid var(--foco); outline-offset: 4px; }
button:disabled { cursor: default; opacity: .5; }
.falha { padding: 48px; }
.configuracao { display:grid; place-content:center; gap:18px; padding:clamp(24px,5vw,56px); text-align:center; }
.configuracao h1 { margin:.2em 0 .5em; font-size:clamp(2rem,4vw,3.2rem); }
.configuracao fieldset { margin:0; padding:16px; border:0; }
.configuracao legend { width:100%; margin-bottom:10px; font-size:1.2rem; font-weight:900; }
.opcoes-configuracao { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.opcoes-configuracao button { min-height:50px; padding:9px 18px; border:3px solid #fff; border-radius:18px; color:var(--texto); background:var(--azul-claro); box-shadow:0 7px 16px rgb(47 93 113 / 12%); font:inherit; font-weight:900; cursor:pointer; }
.opcoes-configuracao button.selecionado { border-color:#397e9c; background:#bfe8fa; }
.pecas-disponiveis { align-content:center; }
.grupo-pecas { position:relative; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; column-gap:clamp(5px,.65vw,9px); row-gap:3px; width:100%; margin-inline:auto; padding:22px 4px 4px; }
.grupo-pecas[data-label="REAIS"] { max-width:402px; }
.grupo-pecas[data-label="CENTAVOS"] { max-width:454px; gap:2px; }
.grupo-pecas::before { content:attr(data-label); position:absolute; top:0; left:4px; color:#52636c; font-size:.7rem; font-weight:900; letter-spacing:.08em; }
.grupo-pecas .peca-disponivel { flex:0 0 auto; min-width:0; }
.grupo-pecas .peca-disponivel.peca-moeda { width:clamp(68px,6.2vw,84px); max-width:none; transform:scale(var(--coin-scale,1)); }
.grupo-pecas .peca-disponivel.peca-cedula { width:clamp(108px,9vw,126px); max-width:none; aspect-ratio:1.5; }
.quantidade-peca { position:absolute; right:-3px; bottom:-3px; display:grid; place-items:center; min-width:28px; height:28px; padding:0 5px; border:2px solid #fff; border-radius:999px; color:#fff; background:#397e9c; font-size:.78rem; }
.grade-moedas { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); place-items:center; align-content:center; gap:7px; }
.grade-moedas .peca-pagamento { width:clamp(48px,6vw,76px); height:clamp(48px,6vw,76px); }
.grade-moedas .peca-pagamento.peca-cedula { width:clamp(72px,8vw,105px); }
.contagem-moedas { font-size:1.05rem; }
.transicao-fase { display: grid; place-items: center; align-content: center; gap: clamp(22px, 4vw, 38px); padding: clamp(28px, 6vw, 70px); text-align: center; outline: none; }
.cabecalho-transicao h1 { margin: .15em 0; font-size: clamp(2.1rem, 5vw, 3.8rem); }
.cabecalho-transicao p { margin-inline: auto; }
.apresentacao-pecas { display: grid; grid-template-columns: minmax(150px, 230px) minmax(260px, 390px); align-items: center; gap: clamp(20px, 5vw, 64px); }
.apresentacao-tres-pecas { grid-template-columns: minmax(130px, 190px) repeat(2, minmax(210px, 310px)); gap: clamp(12px, 2.5vw, 30px); }
.peca-apresentada { display: grid; place-items: center; gap: 10px; margin: 0; padding: 18px; border: 4px solid #fff; border-radius: 28px; background: var(--azul-claro); box-shadow: 0 10px 24px rgb(53 102 122 / 13%); }
.peca-apresentada img { width: 100%; height: 190px; object-fit: contain; }
.peca-apresentada figcaption { font-weight: 900; }

@media (min-width: 841px) {
  body { overflow:hidden; }
  .pagina-pagamento { height: 100svh; min-height: 0; padding: 12px 0; }
  .cartao-tela { height: calc(100svh - 24px); min-height: 0; }
  .tela-pagamento { 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); }
  .tela-pagamento > .cabecalho-compra { grid-column: 1; grid-row: 1; align-self: center; }
  .tela-pagamento > .controle-confirmar { grid-column: 2; grid-row: 1; align-self: center; margin-inline-end: 132px; }
  .tela-pagamento > .feedback { grid-column: 1 / -1; grid-row: 2; }
  .tela-pagamento > .feedback:empty { min-height: 0; }
  .tela-pagamento > .area-compra { grid-column: 1 / -1; grid-row: 3; min-height: 0; }
  .tela-pagamento > .conclusao { grid-column: 1 / -1; grid-row: 4; }
  .area-compra { grid-template-columns:minmax(180px,.48fr) minmax(0,1.52fr); gap:clamp(10px,1.4vw,16px); }
  .area-compra:has(.conclusao:not([hidden])) { grid-template-rows: minmax(0, 1fr) auto; }
  .area-compra > .conclusao:not([hidden]) { display: contents; }
  .area-compra > .conclusao h2 { grid-column: 2; grid-row: 2; align-self: center; margin: 0; padding-top: 4px; font-size: clamp(1.25rem, 2.3vw, 1.8rem); }
  .area-compra > .conclusao .controles-conclusao { grid-column: 1; grid-row: 2; align-self: center; flex-wrap: nowrap; padding-top: 4px; }
  .tela-pagamento:has(.conclusao:not([hidden])) > .feedback { display: none; }
  .tela-pagamento:has(.conclusao:not([hidden])) > .feedback { display:block; }
  .cartao-produto { padding: 14px; }
  .imagem-produto { width:min(100%,150px); height:150px; }
  .nome-produto { font-size:1.2rem; }
  .etiqueta-preco strong { font-size:clamp(1.7rem,3vw,2.4rem); }
  .area-interacao { grid-template-columns:minmax(460px,.98fr) minmax(360px,1.02fr); min-height:0; }
  .painel-moeda,
  .painel-pagamento { padding: 11px; }
  .painel-moeda { align-self:start; }
  .painel-moeda .pecas-disponiveis { gap:4px; }
  .painel-pagamento { align-content:stretch; grid-template-rows:auto minmax(0,1fr) auto; }
  .painel-pagamento h2 { margin-bottom:3px; }
  .painel-pagamento .area-moedas { transform:translateY(-2px); }
  .painel-pagamento .contagem-moedas { transform:translateY(-5px); }
  .area-moedas { min-height: 0; }
  .grade-moedas { min-height:0; }
  .fase-2 .pecas-disponiveis,
  .fase-3 .pecas-disponiveis { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fase-2 .peca-disponivel.peca-moeda,
  .fase-3 .peca-disponivel.peca-moeda { width: min(112px, 100%); }
  .fase-2 .peca-disponivel.peca-cedula,
  .fase-3 .peca-disponivel.peca-cedula { width: min(170px, 100%); }
  .area-interacao:has(.painel-moeda[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .transicao-fase { gap: clamp(14px, 2vh, 22px); padding: clamp(18px, 3vh, 30px); }
  .cabecalho-transicao h1 { margin-block: 0.08em; }
  .cabecalho-transicao p { margin-block: 0.4em; }
  .peca-apresentada { padding: 14px; }
  .peca-apresentada img { height: clamp(145px, 21vh, 175px); }
  .transicao-fase > .botao-grande { margin-top: 0; }
}