/* A MÁQUINA DO CAOS (30/10, SQL 2042): aba do Ferreiro, tela B escolhida pelo autor (29/10).
   As receitas no alto, a joia no meio do círculo, os materiais em volta e LIGAR A MÁQUINA embaixo.
   src/ui/maquina-caos-ui.js desenha; tests/maquina-caos-browser.mjs fotografa PC e celular. */
#forgeView:not([data-fx-aba="maquina"]) #forgeMaquina{display:none}
#forgeView[data-fx-aba="maquina"] .fx-corpo{display:none}
.vendor-subtab.mq-aba{border-color:#7d4fc4;color:#e3d0ff}
.vendor-subtab.mq-aba.hidden{display:none}
.vendor-subtab.mq-aba.active{background:linear-gradient(135deg,#8a5ad6,#5b3499);border-color:#c39bff;color:#fff}

.mq-painel{margin-top:12px;color:#e3e9f3;background:radial-gradient(120% 60% at 50% 0%,#2a0f3d 0%,#140d18 55%,#0c0d12 100%);
  border:1px solid #5b2a86;border-radius:14px;padding:18px;box-sizing:border-box;min-width:0}
.mq-painel *{box-sizing:border-box}
.mq-titulo{margin:0 0 10px;text-align:center;font-size:11px;font-weight:800;letter-spacing:.08em;color:#a99cc0;text-transform:uppercase}
.mq-escolha{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.mq-rec{display:flex;flex-direction:column;align-items:center;gap:4px;width:112px;min-height:76px;background:#0f1520aa;border:1px solid #3a2a55;border-radius:12px;
  padding:8px 6px;color:#cdb8ef;font-size:11px;font-weight:800;cursor:var(--cur-mao,pointer);line-height:1.2}
.mq-rec:hover{border-color:#8f69cf}
.mq-rec.sel{border-color:#c39bff;background:#2a1640;color:#fff;box-shadow:0 0 16px #8a4dff66}
.mq-rec img{width:36px;height:36px;object-fit:contain}
.mq-rec small{display:block;font-size:10px;font-weight:700;color:#b9a3dc}
.mq-rec:focus-visible,.mq-ligar:focus-visible{outline:2px solid #ffe08a;outline-offset:2px}

.mq-maq{position:relative;width:min(100%,560px);height:350px;margin:0 auto}
.mq-anel{position:absolute;left:50%;top:140px;width:250px;height:250px;transform:translate(-50%,-50%);border-radius:50%;
  border:2px dashed #7d4fc4;box-shadow:0 0 50px #8a4dff44 inset,0 0 30px #8a4dff33}
.mq-maq.girando .mq-anel{animation:mqGira .45s linear infinite;border-color:#ffe08a;box-shadow:0 0 60px #c39bffaa inset,0 0 50px #8a4dff88}
.mq-meio{position:absolute;left:50%;top:140px;transform:translate(-50%,-50%);width:140px;height:140px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,#4b1d7d 0%,#170b25 75%);border:2px solid #b98cff;box-shadow:0 0 40px #9a5cff99}
.mq-meio img{width:86px;height:86px;object-fit:contain;filter:drop-shadow(0 0 12px #e0c8ff)}
.mq-meio em{position:absolute;right:10px;bottom:16px;font-style:normal;font-weight:900;color:#ffe08a;text-shadow:0 1px 3px #000}
.mq-maq.girando .mq-meio{animation:mqPulsa .5s ease-in-out infinite alternate}
.mq-slot{position:absolute;width:130px;text-align:center;font-size:11px;line-height:1.3}
.mq-slot .mq-bola{width:70px;height:70px;margin:0 auto 4px;border-radius:50%;display:grid;place-items:center;background:#0f1520;border:2px solid #3a4a6a}
.mq-slot.ok .mq-bola{border-color:#5fd27a;box-shadow:0 0 14px #5fd27a55}
.mq-slot.falta .mq-bola{border-color:#e0605a;box-shadow:0 0 14px #e0605a55}
.mq-slot img{width:44px;height:44px;object-fit:contain}
.mq-slot b{display:block;font-size:12px}
.mq-slot small{display:block;color:#8fd9a0}
.mq-slot.falta small{color:#ff8a80}
.mq-s0{left:0;top:80px}
.mq-s1{right:0;top:80px}
.mq-s2{left:50%;bottom:0;transform:translateX(-50%)}
.mq-slot.mq-dois{top:100px}
.mq-nome{text-align:center;font-weight:800;color:#e6d3ff;margin:4px 0 8px}
.mq-rodape{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;max-width:520px;margin:0 auto}
.mq-chance small{display:block;color:#8c95a8;font-size:11px}
.mq-chance b{font-family:Georgia,"Times New Roman",serif;color:#ffe08a;font-weight:900;font-size:34px;line-height:1}
/* 2459: sorte acumulada das falhas seguidas */
.mq-chance.sorte b{color:#9dffb0;text-shadow:0 0 10px rgba(80,255,140,.45)}
.mq-chance em{display:block;font-style:normal;font-size:11px;font-weight:800;color:#9dffb0;white-space:nowrap;margin-top:3px}
.mq-ligar{width:100%;border:1px solid #c39bff;border-radius:11px;background:linear-gradient(#8a5ad6,#5b3499);color:#fff;font-weight:900;font-size:14px;
  letter-spacing:.06em;padding:12px 10px;cursor:var(--cur-mao,pointer)}
.mq-ligar small{display:block;font-size:10px;font-weight:700;opacity:.85;letter-spacing:0;margin-top:2px}
.mq-ligar[disabled]{opacity:.5;filter:grayscale(.6);cursor:var(--cur-seta,default)}
.mq-nota{max-width:520px;margin:10px auto 0;font-size:11px;color:#8c95a8;line-height:1.45}
@keyframes mqGira{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* Girando: os materiais são puxados para o meio e a joia do meio acende (2,2 s). */
.mq-maq.girando .mq-slot .mq-bola{animation:mqSuga 1.1s ease-in infinite}
.mq-maq.girando .mq-meio img{animation:mqAcende 2.2s ease-in forwards}
@keyframes mqSuga{0%{transform:scale(1);opacity:1}70%{transform:scale(.55);opacity:.35;box-shadow:0 0 26px #c39bff}100%{transform:scale(1);opacity:1}}
@keyframes mqAcende{0%{filter:drop-shadow(0 0 12px #e0c8ff) brightness(1)}100%{filter:drop-shadow(0 0 34px #fff) brightness(1.9)}}
/* A janela do resultado. */
.mq-res-fundo{position:fixed;inset:0;z-index:1400;display:grid;place-items:center;padding:16px;background:rgba(6,3,12,.78);opacity:0;transition:opacity .2s}
.mq-res-fundo.show{opacity:1}
.mq-res-card{position:relative;overflow:hidden;width:min(100%,340px);text-align:center;padding:26px 20px 20px;border-radius:16px;color:#f1e9ff;
  background:radial-gradient(120% 80% at 50% 0%,#3a1660 0%,#160c22 70%);border:2px solid #c39bff;box-shadow:0 0 60px #8a4dff88;transform:scale(.8);transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.mq-res-fundo.show .mq-res-card{transform:scale(1)}
.mq-res-raios{position:absolute;left:50%;top:84px;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(#ffe08a33 0 10deg,transparent 10deg 30deg);animation:mqRaios 6s linear infinite}
.mq-res-arte{position:relative;width:116px;height:116px;margin:0 auto 6px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#5b2a96 0%,#1a0c2b 75%);border:2px solid #ffe08a}
.mq-res-arte img{width:80px;height:80px;object-fit:contain}
.mq-res-fundo.ok .mq-res-arte img{animation:mqSalta .7s cubic-bezier(.2,1.8,.4,1) both;filter:drop-shadow(0 0 18px #fff3c4)}
.mq-res-selo{position:relative;display:block;font-size:22px;color:#ffe08a}
.mq-res-card h3{position:relative;margin:2px 0 6px;font-size:22px;font-weight:900;letter-spacing:.04em;color:#ffe08a;text-transform:uppercase}
.mq-res-card b{position:relative;display:block;font-size:15px}
.mq-res-card p{position:relative;margin:6px 0 14px;font-size:12px;color:#b9a3dc}
.mq-res-ok{position:relative;min-width:120px;border:1px solid #c39bff;border-radius:10px;background:linear-gradient(#8a5ad6,#5b3499);color:#fff;font-weight:900;padding:10px 18px;cursor:var(--cur-mao,pointer)}
.mq-res-ok:focus-visible{outline:2px solid #ffe08a;outline-offset:2px}
.mq-res-fundo.falhou .mq-res-card{border-color:#e0605a;box-shadow:0 0 50px #e0605a55;background:radial-gradient(120% 80% at 50% 0%,#3a1418 0%,#140c10 70%)}
.mq-res-fundo.falhou .mq-res-raios{display:none}
.mq-res-fundo.falhou .mq-res-arte{border-color:#e0605a}
.mq-res-fundo.falhou .mq-res-arte img{filter:grayscale(1) brightness(.55);animation:mqTreme .45s ease-in-out both}
.mq-res-fundo.falhou h3,.mq-res-fundo.falhou .mq-res-selo{color:#ff8a80}
.mq-res-fundo.aviso .mq-res-raios{display:none}
.mq-res-fundo.aviso .mq-res-arte img{filter:grayscale(.4) brightness(.8)}
@keyframes mqRaios{to{transform:rotate(360deg)}}
@keyframes mqSalta{0%{transform:scale(.2) rotate(-25deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes mqTreme{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@keyframes mqPulsa{to{box-shadow:0 0 70px #c39bffcc}}
@media (prefers-reduced-motion:reduce){.mq-maq.girando .mq-anel,.mq-maq.girando .mq-meio,.mq-maq.girando .mq-slot .mq-bola,.mq-maq.girando .mq-meio img,.mq-res-raios,.mq-res-arte img{animation:none!important}}

@media (max-width:700px){
  .mq-painel{padding:14px 10px}
  .mq-rec{width:calc(25% - 6px);font-size:10px;padding:6px 2px;min-height:68px}
  .mq-rec img{width:30px;height:30px}
  .mq-maq{height:auto;display:flex;flex-wrap:wrap;justify-content:center}
  .mq-anel{display:none}
  .mq-meio{position:relative;left:auto;top:auto;transform:none;width:120px;height:120px;margin:4px calc(50% - 60px) 14px}
  .mq-maq.girando .mq-meio{animation:mqPulsa .5s ease-in-out infinite alternate}
  .mq-meio img{width:72px;height:72px}
  .mq-slot,.mq-slot.mq-dois{position:static;transform:none;width:33.3%}
  .mq-slot .mq-bola{width:58px;height:58px}
  .mq-slot img{width:36px;height:36px}
  .mq-rodape{grid-template-columns:1fr;text-align:center;gap:8px}
}

/* A CÂMARA DO CAOS (02/11, SQL 2062): receita secreta. 5 encaixes (o 1º é a base), o Gold e ATIVAR A CÂMARA.
   Nenhuma receita aparece; o servidor decide se a máquina reage. */
.mq-cam{max-width:560px;margin:18px auto 0;padding:14px 12px 12px;border-top:1px dashed #5b2a86;min-width:0}
.mq-cam-dica{margin:0 auto 10px;max-width:460px;text-align:center;font-size:11px;line-height:1.45;color:#a99cc0}
.mq-cam-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.mq-cam-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:92px;min-width:0;padding:6px 4px;
  border:2px dashed #4a3566;border-radius:12px;background:#0f1520aa;color:#cdb8ef;cursor:var(--cur-mao,pointer);font:inherit}
.mq-cam-slot.base{border-color:#8f69cf}
.mq-cam-slot.cheio{border-style:solid;border-color:#7d4fc4}
.mq-cam-slot.sel{border-color:#ffe08a;box-shadow:0 0 14px #ffe08a55}
.mq-cam-slot .mq-cam-arte{width:44px;height:44px;object-fit:contain}
.mq-cam-slot b{display:block;max-width:100%;font-size:10px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq-cam-slot em{position:absolute;top:-8px;left:50%;transform:translateX(-50%);padding:0 6px;border-radius:6px;background:#2a1640;
  font-style:normal;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#e6d3ff}
.mq-cam-mais{font-size:26px;font-weight:300;color:#7d6a9a;line-height:1}
.mq-cam-lista{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;max-height:260px;overflow:auto;
  padding:8px;border:1px solid #3a2a55;border-radius:10px;background:#0b0d14}
.mq-cam-item{display:flex;align-items:center;gap:6px;min-width:0;padding:5px;border:1px solid #2a3348;border-radius:8px;background:#111723;color:#dfe6f3;cursor:var(--cur-mao,pointer);text-align:left;font:inherit}
.mq-cam-item:hover{border-color:#8f69cf}
.mq-cam-item .mq-cam-arte{width:34px;height:34px;flex:0 0 34px;object-fit:contain}
.mq-cam-item span{min-width:0}
.mq-cam-item b{display:block;font-size:11px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq-cam-item small{display:block;font-size:10px;color:#8c95a8}
.mq-cam-vazio{grid-column:1/-1;margin:4px;font-size:11px;color:#a99cc0;text-align:center}
.mq-cam-fechar{grid-column:1/-1;justify-self:center;border:1px solid #5b2a86;border-radius:8px;background:#1a1226;color:#e3d0ff;font-weight:800;padding:6px 16px;cursor:var(--cur-mao,pointer)}
.mq-cam-ouro{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin:12px 0 10px}
.mq-cam-ouro label{font-size:11px;font-weight:800;letter-spacing:.06em;color:#a99cc0;text-transform:uppercase}
.mq-cam-ouro input{width:min(100%,220px);min-width:0;padding:8px 10px;border:1px solid #5b2a86;border-radius:9px;background:#0b0d14;color:#ffe08a;
  font-weight:900;font-size:15px;text-align:right;font-variant-numeric:tabular-nums}
.mq-cam-ouro input:focus{outline:2px solid #ffe08a;outline-offset:1px}
.mq-cam-ouro small{flex-basis:100%;text-align:center;font-size:11px;color:#8fd9a0}
.mq-cam-ativar{display:block;width:100%;max-width:520px;margin:0 auto;border:1px solid #c39bff;border-radius:11px;background:linear-gradient(#5a2c08,#3a1a04);
  color:#ffd36b;font-weight:900;font-size:14px;letter-spacing:.06em;padding:12px 10px;cursor:var(--cur-mao,pointer)}
.mq-cam-ativar[disabled]{opacity:.5;filter:grayscale(.6);cursor:var(--cur-seta,default)}
.mq-cam-slot:focus-visible,.mq-cam-item:focus-visible,.mq-cam-ativar:focus-visible,.mq-cam-fechar:focus-visible{outline:2px solid #ffe08a;outline-offset:2px}
/* o resultado do Mítico: laranja e ouro (Sol nascente) */
.mq-res-fundo.mitico .mq-res-card{border-color:#ff9d2e;box-shadow:0 0 70px rgba(255,140,0,.6);background:radial-gradient(120% 80% at 50% 0%,#5a2c08 0%,#1c1006 70%)}
.mq-res-fundo.mitico .mq-res-raios{background:repeating-conic-gradient(rgba(255,180,60,.28) 0 10deg,transparent 10deg 30deg)}
.mq-res-fundo.mitico .mq-res-arte{border-color:#ffb13b;background:radial-gradient(circle,#8a4a10 0%,#2a1404 75%);animation:col-mitico-respira 2.6s ease-in-out infinite}
.mq-res-fundo.mitico h3,.mq-res-fundo.mitico .mq-res-selo{color:#ffb13b}
.mq-res-fundo.mitico .mq-res-ok{border-color:#ff9d2e;background:linear-gradient(#b8620e,#6e3606)}
@media (max-width:700px){
  .mq-cam{padding:12px 0 6px}
  .mq-cam-slots{gap:5px}
  .mq-cam-slot{min-height:78px;padding:6px 2px}
  .mq-cam-slot .mq-cam-arte{width:36px;height:36px}
  .mq-cam-slot b{font-size:9px}
  .mq-cam-lista{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}
@media (prefers-reduced-motion:reduce){.mq-res-fundo.mitico .mq-res-arte{animation:none}}

/* 2064: as joias da Câmara e o Livro de Receitas */
.mq-cam-joias{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:520px;margin:0 auto 12px}
.mq-cam-joia{display:grid;justify-items:center;gap:3px;padding:6px 4px;border:1px solid #3a2456;border-radius:10px;background:#120c1c;cursor:text}
.mq-cam-joia img{width:30px;height:30px;object-fit:contain}
.mq-cam-joia input{width:100%;min-width:0;padding:5px 4px;border:1px solid #5b2a86;border-radius:7px;background:#0b0d14;color:#ffe08a;font-weight:800;text-align:center;font-size:14px}
.mq-cam-joia input:focus{outline:2px solid #ffe08a;outline-offset:1px}
.mq-cam-joia small{font-size:10px;color:#8fd9a0}
.mq-livro-abrir{display:block;margin:0 auto 12px;padding:7px 14px;border:1px solid #8a6a3a;border-radius:9px;background:linear-gradient(#3a2810,#22170a);color:#ffd98a;font-weight:800;cursor:var(--cur-mao,pointer)}
.mq-livro-abrir:focus-visible{outline:2px solid #ffe08a;outline-offset:2px}
.mq-livro .mq-livro-corpo{width:min(100%,460px);max-height:min(88vh,640px);overflow:auto}
.mq-livro-card{border:1px solid #8a6a3a;border-radius:14px;padding:18px 16px;background:radial-gradient(120% 80% at 50% 0%,#3a2810 0%,#140d06 75%);color:#f3e6cf;text-align:center;transform:scale(.96);transition:transform .2s}
.mq-livro.show .mq-livro-card{transform:none}
.mq-livro-card h3{margin:0 0 4px;color:#ffd98a;font-size:19px}
.mq-livro-conta{margin:0 0 10px;font-size:12px;color:#c9b38e}
.mq-livro-lista{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px;text-align:left}
.mq-livro-pag{display:grid;gap:3px;padding:9px 11px;border:1px solid #5a4424;border-radius:10px;background:rgba(0,0,0,.28)}
.mq-livro-pag b{color:#ffd98a;font-size:14px}
.mq-livro-pag span{font-size:13px;color:#f3e6cf}
.mq-livro-pag small{font-size:12px;color:#c9b38e}
.mq-livro-pag.oculta{opacity:.6;border-style:dashed}
.mq-livro-pag.oculta b{letter-spacing:.2em}
.mq-livro-pag.mitico b{color:#ffb13b}
.mq-livro-pag.tinta-rubro b{color:#ff6b5b}.mq-livro-pag.tinta-celeste b{color:#7cc7ff}.mq-livro-pag.tinta-abissal b{color:#b18cff}
.mq-livro-pag.tinta-esmeralda b{color:#6fe39a}.mq-livro-pag.tinta-aureo b{color:#ffd36b}
.mq-livro-volta{margin:0 0 12px;font-size:12px;color:#c9b38e}
.mq-res-fundo.tinta .mq-res-arte img{filter:var(--tinta,none)}
.mq-res-fundo.tinta-volta .mq-res-arte img{filter:none}

/* 2064: a janela do set tingido mostra as 3 peças e o bônus novo */
.mq-res-pecas{position:relative;display:flex;justify-content:center;gap:8px;margin:10px 0 4px}
.mq-res-pecas figure{margin:0;width:31%;max-width:92px;padding:6px 4px;border-radius:10px;background:rgba(20,10,34,.72);border:1px solid rgba(255,224,138,.35)}
.mq-res-pecas img{width:52px;height:52px;object-fit:contain;animation:mqSalta .7s cubic-bezier(.2,1.8,.4,1) both}
.mq-res-pecas figure:nth-child(2) img{animation-delay:.12s}.mq-res-pecas figure:nth-child(3) img{animation-delay:.24s}
.mq-res-pecas figcaption{font-size:11px;line-height:1.2;color:#e9dcff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq-res-bonus{position:relative;display:block;margin:2px 0 6px;font-size:13px;font-weight:700;color:#ffe08a}

/* 03/11 (o autor: "preciso rolar muito"): a Chave do Portal e a Câmara são botões na fila das receitas e abrem no meio
   da tela (.mq-outro), mais baixas, para caber sem rolar no PC. */
/* 03/11 (o autor: "o título do Ferreiro só ocupa espaço"): na Máquina o cartão do Ferreiro some; o "você tem" de cada material já mostra o saldo. */
#forgeView[data-fx-aba="maquina"] .fx-topo{display:none}
/* um risco separa as receitas da Chave e da Câmara, que não são receitas */
.mq-sep{flex:0 0 1px;align-self:stretch;margin:4px 6px;background:#4a3566}
.mq-rec-extra{border-style:dashed}
.mq-rec-extra.sel{border-style:solid}
.mq-outro{min-width:0}
@media (min-width:701px){
  .mq-outro .po-chave-maquina{max-width:880px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;align-items:stretch}
  .mq-outro .po-chave-maquina>.mq-titulo,.mq-outro .po-chave-maquina>.po-nota{grid-column:1/-1;margin:0 0 2px}
  .mq-outro .po-chave-maquina>.po-receita{margin:4px 0 0}
  .mq-outro .mq-cam{max-width:900px;margin:0 auto;padding:2px 0 0;border-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;align-items:center}
  .mq-outro .mq-cam>.mq-titulo{grid-column:1/-1;margin:0}
  .mq-outro .mq-cam-dica{grid-column:1;margin:0;max-width:none;text-align:left}
  .mq-outro .mq-livro-abrir{grid-column:2;justify-self:end;margin:0}
  .mq-outro .mq-cam-slots,.mq-outro .mq-cam-lista,.mq-outro .mq-cam-ativar{grid-column:1/-1}
  .mq-outro .mq-cam-slot{min-height:74px}
  .mq-outro .mq-cam-lista{margin-top:0;max-height:170px}
  .mq-outro .mq-cam-ouro{grid-column:1;margin:0}
  .mq-outro .mq-cam-joias{grid-column:2;margin:0;max-width:none}
  .mq-outro .mq-cam-ativar{max-width:none}
}
@media (max-width:700px){.mq-outro .mq-cam{margin-top:4px;border-top:0;padding-top:0}.mq-outro .po-chave-maquina{margin-top:4px}}

/* 03/11, OPÇÃO B (escolha do autor): o mesmo círculo, mais enxuto, com a chance e LIGAR A MÁQUINA ao lado dele.
   As receitas numa fila só em cima. Cabe inteira sem rolar no PC 1366x768 (tests/maquina-caos-browser.mjs confere). */
.mq-lado{min-width:0}
@media (min-width:701px){
  .mq-painel{padding:12px 18px}
  .mq-corpo{display:grid;grid-template-columns:minmax(0,560px) 300px;grid-template-areas:"esq esq" "maq lado";justify-content:center;gap:10px 30px;align-items:center}
  .mq-esq{grid-area:esq;min-width:0}
  .mq-escolha{flex-wrap:nowrap;gap:6px;margin:0}
  .mq-rec{flex:0 1 112px;min-width:0;min-height:62px;padding:6px 4px;gap:3px;font-size:10.5px}
  .mq-rec img{width:28px;height:28px}
  .mq-maq{grid-area:maq;height:262px;width:100%;margin:0 auto}
  .mq-anel,.mq-meio{top:108px}
  .mq-anel{width:200px;height:200px}
  .mq-meio{width:104px;height:104px}
  .mq-meio img{width:64px;height:64px}
  .mq-s0,.mq-s1{top:28px}
  .mq-slot.mq-dois{top:70px}
  .mq-slot .mq-bola{width:62px;height:62px}
  .mq-slot img{width:40px;height:40px}
  .mq-lado{grid-area:lado;display:flex;flex-direction:column;gap:10px}
  .mq-lado .mq-nome{margin:0;font-size:17px}
  .mq-lado .mq-rodape{grid-template-columns:1fr;gap:10px;max-width:none;margin:0;text-align:center}
  .mq-lado .mq-chance b{font-size:40px}
  .mq-lado .mq-ligar{padding:16px 10px;font-size:15px}
  .mq-lado .mq-nota{margin:0;text-align:center}
  .mq-outro{grid-column:1/-1}
}
/* celular: as receitas numa fila que corre de lado; os materiais e a joia numa linha só */
@media (max-width:700px){
  .mq-escolha{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 6px;margin-bottom:8px;scrollbar-width:thin}
  .mq-rec{flex:0 0 72px;width:72px;min-height:64px;scroll-snap-align:start}
  .mq-titulo{margin-bottom:6px}
  .mq-maq{flex-wrap:nowrap;align-items:center;gap:0;margin:6px 0 4px}
  .mq-meio{order:2;width:84px;height:84px;margin:0;flex:0 0 84px}
  .mq-meio img{width:54px;height:54px}
  .mq-slot,.mq-slot.mq-dois{order:1;width:auto;flex:1 1 0;min-width:0}
  .mq-slot .mq-bola{width:50px;height:50px}
  .mq-slot img{width:30px;height:30px}
  .mq-slot b{font-size:10px}
  .mq-slot small{font-size:9px}
  .mq-nome{margin:2px 0 6px}
  .mq-rodape{grid-template-columns:auto minmax(0,1fr);text-align:left;gap:12px}
  .mq-nota{margin-top:8px}
}