:root {
  --forno: #141110;
  --forno-2: #1d1816;
  --forno-3: #2a221e;
  --tijolo: #3b2a22;
  --massa: #f3e7d3;
  --massa-2: #c9b89c;
  --massa-3: #8f7f68;
  --tomate: #e4412b;
  --brasa: #ff8a3d;
  --manjericao: #7fb35b;
  --papel: #faf6ee;
  --tinta: #221c18;
  --agente: #5fe1c8;
  --fonte-titulo: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --fonte-texto: "Figtree", system-ui, sans-serif;
  --fonte-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--forno);
  color: var(--massa);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: var(--brasa); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--agente); outline-offset: 3px; }

/* brasa ao fundo: acende quando o agente conecta */
.brasa {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60vmax 40vmax at 50% 110%, rgba(255, 110, 40, .20), transparent 60%),
    radial-gradient(30vmax 20vmax at 50% 105%, rgba(255, 170, 60, .16), transparent 70%);
  transition: opacity 1.2s ease;
}
body.agente-on .brasa { animation: brasa 3.2s ease-in-out infinite; }
@keyframes brasa { 0%, 100% { opacity: .85; } 50% { opacity: 1.35; filter: saturate(1.3); } }

.topo, .palco, .console, .cardapio, .rodape { position: relative; z-index: 1; }

.topo {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 18px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--forno-3);
}
.marca { display: flex; align-items: center; gap: 10px; color: var(--massa); text-decoration: none; }
.marca svg { width: 38px; height: 38px; }
.marca span { font-family: var(--fonte-titulo); font-weight: 900; font-size: 30px; letter-spacing: .02em; text-transform: uppercase; }
.endereco { margin: 0; color: var(--massa-3); font-size: 14px; flex: 1; }
.status-agente {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fonte-mono); font-size: 13px; color: var(--massa-2);
  padding: 6px 12px; border: 1px solid var(--forno-3); border-radius: 999px;
}
.status-agente .led { width: 9px; height: 9px; border-radius: 50%; background: var(--massa-3); }
body.agente-on .status-agente { color: var(--agente); border-color: rgba(95, 225, 200, .45); box-shadow: 0 0 22px rgba(95, 225, 200, .18); }
body.agente-on .status-agente .led { background: var(--agente); box-shadow: 0 0 10px var(--agente); animation: pisca 1.1s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: .35; } }

/* ------------------------------------------------------------ palco */
.palco {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr) minmax(280px, .9fr);
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(20px, 4vw, 48px);
  align-items: start;
}
@media (max-width: 1100px) { .palco { grid-template-columns: 1fr 1fr; } .comanda-wrap { grid-column: 1 / -1; } }
@media (max-width: 720px) { .palco { grid-template-columns: 1fr; } }

.sobretitulo, .rotulo {
  font-family: var(--fonte-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--brasa); margin: 0 0 8px;
}
h1 {
  font-family: var(--fonte-titulo); font-weight: 900; text-transform: uppercase;
  font-size: clamp(54px, 7vw, 104px); line-height: .86; margin: 0 0 18px; letter-spacing: -.005em;
  text-wrap: balance;
}
.lede { color: var(--massa-2); max-width: 44ch; margin: 0 0 22px; }
.como blockquote {
  margin: 0 0 22px; padding: 12px 16px; border-left: 3px solid var(--tomate); background: var(--forno-2);
  font-size: 16px; color: var(--massa); max-width: 46ch;
}
.ferramentas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ferramentas li {
  display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px;
  font-family: var(--fonte-mono); font-size: 13px; color: var(--massa-2);
  padding: 7px 10px; background: var(--forno-2); border: 1px solid var(--forno-3); border-radius: 6px;
  transition: border-color .3s, color .3s, background-color .3s;
}
.ferramentas li .led { width: 8px; height: 8px; border-radius: 50%; background: var(--forno-3); transition: background-color .2s, box-shadow .2s; }
.ferramentas li .n { color: var(--massa-3); font-size: 12px; }
.ferramentas li.ativa { border-color: var(--agente); color: var(--massa); background: #16201e; }
.ferramentas li.ativa .led { background: var(--agente); box-shadow: 0 0 10px var(--agente); }
.suporte { margin-left: 6px; letter-spacing: 0; text-transform: none; }
.suporte.ok { color: var(--manjericao); }
.suporte.nao { color: var(--massa-3); }
.rodape-hero { margin: 18px 0 0; font-size: 13px; color: var(--massa-3); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.botao-fantasma { background: transparent; border: 1px solid var(--forno-3); color: var(--massa-2); padding: 7px 12px; border-radius: 6px; cursor: pointer; }
.botao-fantasma:hover { border-color: var(--massa-3); color: var(--massa); }
.botao-fantasma:disabled { opacity: .45; cursor: default; }

/* ------------------------------------------------------------ forno */
.forno { position: relative; display: grid; justify-items: center; gap: 10px; padding-top: 10px; }
.aro {
  position: absolute; top: 0; left: 50%; width: min(100%, 520px); aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 61, .10), transparent 62%);
}
body.agente-on .aro { background: radial-gradient(circle, rgba(255, 138, 61, .20), rgba(95, 225, 200, .05) 58%, transparent 66%); }
.pizza { position: relative; width: min(100%, 500px); aspect-ratio: 1; overflow: visible; }
.pizza.ociosa { animation: gira 60s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.pz-rotulo { font-family: var(--fonte-mono); font-size: 8px; font-weight: 600; fill: #fff7e6; }
.legenda { font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 2.4vw, 32px); text-align: center; min-height: 1.2em; line-height: 1.05; }
.legenda small { display: block; font-family: var(--fonte-mono); font-weight: 400; font-size: 13px; letter-spacing: .04em; text-transform: none; color: var(--massa-2); margin-top: 6px; }
.preco { font-family: var(--fonte-mono); font-size: clamp(26px, 3vw, 38px); font-weight: 600; color: var(--brasa); min-height: 1.3em; font-variant-numeric: tabular-nums; }
.bandeja { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bandeja figure { margin: 0; display: grid; justify-items: center; gap: 2px; font-family: var(--fonte-mono); font-size: 11px; color: var(--massa-2); }
.bandeja svg { width: 64px; height: 64px; }

/* ------------------------------------------------------------ comanda */
.comanda-wrap { position: relative; }
.impressora { height: 18px; background: var(--forno-3); border-radius: 8px 8px 0 0; position: relative; }
.impressora span { position: absolute; left: 10%; right: 10%; bottom: 4px; height: 3px; background: #0b0908; border-radius: 2px; }
.comanda {
  position: relative; margin: -4px 7% 0; background: var(--papel); color: var(--tinta);
  font-family: var(--fonte-mono); font-size: 13.5px; line-height: 1.55;
  padding: 18px 18px 26px; min-height: 280px;
  transition: padding-bottom .3s;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 95% 100%, 90% calc(100% - 8px), 85% 100%, 80% calc(100% - 8px), 75% 100%, 70% calc(100% - 8px), 65% 100%, 60% calc(100% - 8px), 55% 100%, 50% calc(100% - 8px), 45% 100%, 40% calc(100% - 8px), 35% 100%, 30% calc(100% - 8px), 25% 100%, 20% calc(100% - 8px), 15% 100%, 10% calc(100% - 8px), 5% 100%, 0 calc(100% - 8px));
  transform-origin: top center;
}
.comanda header { display: flex; justify-content: space-between; border-bottom: 1px dashed #bdb2a0; padding-bottom: 8px; margin-bottom: 8px; }
.comanda header strong { font-family: var(--fonte-titulo); font-size: 22px; letter-spacing: .06em; }
.comanda header span { color: #7a6f60; }
.linhas p { margin: 0; }
.linhas .vazia { color: #8a7f70; font-family: var(--fonte-texto); font-size: 14px; }
.linhas .l { display: flex; justify-content: space-between; gap: 10px; animation: imprime .35s ease-out both; }
.linhas .l span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.linhas .sub { color: #6d6254; padding-left: 12px; font-size: 12.5px; }
.linhas .sep { border-top: 1px dashed #bdb2a0; margin: 8px 0; }
.linhas .total { font-weight: 600; font-size: 16px; }
@keyframes imprime { from { opacity: 0; transform: translateY(-4px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
.carimbo {
  position: absolute; right: 18px; bottom: 22px; transform: rotate(-8deg);
  border: 3px solid #b3261e; color: #b3261e; padding: 6px 12px; border-radius: 6px;
  font-family: var(--fonte-titulo); font-weight: 900; font-size: 26px; text-transform: uppercase; letter-spacing: .04em; line-height: 1;
  background: rgba(250, 246, 238, .7); text-align: center;
}
.carimbo small { display: block; font-size: 13px; letter-spacing: .08em; }
.comanda.impressa { animation: sai 0.9s cubic-bezier(.2, .8, .2, 1) both; padding-bottom: 92px; }
@keyframes sai { from { transform: translateY(-40px) scaleY(.6); opacity: 0; } to { transform: none; opacity: 1; } }

.entrega { margin: 18px 7% 0; font-family: var(--fonte-mono); font-size: 13px; color: var(--massa-2); }
.entrega svg { width: 100%; height: 70px; overflow: visible; }
.entrega .etapas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.entrega .etapas li { text-align: center; padding: 6px 2px; border-top: 3px solid var(--forno-3); color: var(--massa-3); font-size: 11.5px; transition: all .4s; }
.entrega .etapas li.feita { border-color: var(--manjericao); color: var(--massa); }
.entrega .etapas li.agora { border-color: var(--brasa); color: var(--brasa); }

/* ------------------------------------------------------------ console */
.console { margin: 0 clamp(16px, 4vw, 48px); background: #0c0a09; border: 1px solid var(--forno-3); border-radius: 10px; overflow: hidden; }
.console header { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--forno-3); }
.console .rotulo { margin: 0; }
.relogio { font-family: var(--fonte-mono); font-size: 12px; color: var(--massa-3); }
#log { list-style: none; margin: 0; padding: 10px 14px; max-height: 260px; overflow: auto; font-family: var(--fonte-mono); font-size: 13px; display: grid; gap: 6px; }
#log li { display: grid; grid-template-columns: 70px 1fr; gap: 10px; animation: entra .3s ease-out both; }
#log li.dica { display: block; color: var(--massa-3); }
#log .t { color: var(--massa-3); }
#log .f { color: var(--agente); font-weight: 600; }
#log .a { color: var(--massa-2); word-break: break-word; }
#log .r { color: var(--manjericao); }
#log .e { color: var(--tomate); }
@keyframes entra { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ cardápio */
.cardapio { padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px) 24px; }
.cardapio-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--forno-3); padding-bottom: 12px; margin-bottom: 18px; }
h2 { font-family: var(--fonte-titulo); font-weight: 900; text-transform: uppercase; font-size: clamp(36px, 4vw, 56px); margin: 0; line-height: 1; }
.cardapio-topo p { margin: 0; color: var(--massa-3); font-size: 14px; max-width: 60ch; }
.tamanhos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.tamanhos div { background: var(--forno-2); border: 1px solid var(--forno-3); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--massa-2); }
.tamanhos b { color: var(--massa); font-size: 15px; display: block; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.sabor {
  display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center;
  background: var(--forno-2); border: 1px solid var(--forno-3); border-radius: 10px; padding: 10px 12px;
  transition: border-color .25s, background-color .25s, transform .25s;
}
.sabor svg { width: 58px; height: 58px; }
.sabor h3 { margin: 0; font-size: 15px; font-weight: 700; }
.sabor p { margin: 2px 0 0; font-size: 12.5px; color: var(--massa-3); line-height: 1.35; }
.sabor .v { font-family: var(--fonte-mono); color: var(--brasa); font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.sabor .tag { font-family: var(--fonte-mono); font-size: 10.5px; color: var(--manjericao); margin-left: 6px; }
.sabor.lido { border-color: rgba(95, 225, 200, .55); background: #15201d; }
.sabor.escolhido { border-color: var(--brasa); background: #2a1b12; transform: translateY(-2px); }

.rodape { padding: 24px clamp(16px, 4vw, 48px) 40px; color: var(--massa-3); font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rodape p { margin: 0; max-width: 70ch; }

/* ------------------------------------------------------------ efeitos */
.flash {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; display: grid; place-items: center; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(95, 225, 200, .28), rgba(20, 17, 16, 0) 60%);
}
.flash span { font-family: var(--fonte-titulo); font-weight: 900; text-transform: uppercase; font-size: clamp(48px, 9vw, 140px); color: var(--agente); letter-spacing: .02em; text-shadow: 0 0 40px rgba(95, 225, 200, .6); }
.flash.on { animation: flash 1.8s cubic-bezier(.2, .8, .2, 1) both; }
.flash.on span { animation: flashTexto 1.8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes flashTexto { 0% { transform: scale(1.6); filter: blur(8px); } 20% { transform: scale(1); filter: blur(0); } 100% { transform: scale(.96); } }

.confete { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.confete i { position: absolute; top: -30px; width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .pizza.ociosa { animation: none; }
}