:root{
  --fundo:#f3efe6;
  --painel:#f8f3ea;
  --cartao:#ffffff;
  --linha:#d6c7b3;
  --texto:#29576b;
  --muted:#617a81;
  --ativo:#d7e7ea;
  --ativo-borda:#2c8fbd;
  --verde:#2e8b6f;
  --verde-hover:#26745d;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:linear-gradient(180deg,#f0f4f0 0%, var(--fundo) 100%);
  color:var(--texto);
}
.app{max-width:1500px;margin:0 auto;padding:18px}
.cabecalho-geral{text-align:center;margin-bottom:14px}
.marca{font-size:.78rem;letter-spacing:.17em;color:#50817d;font-weight:800;margin:0 0 4px}
h1{font:700 clamp(2rem,4vw,3.25rem) Georgia,serif;margin:.1em 0;color:#28596f}
.aviso{margin:0;color:var(--muted)}
.jogo{
  background:rgba(255,255,255,.58);
  border-radius:34px;
  padding:12px;
  box-shadow:0 12px 40px rgba(53,73,62,.08);
}
.jogo-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(380px,.95fr);gap:0;align-items:stretch}
.painel-palco,.painel-menu{background:var(--painel)}
.painel-palco{
  border-radius:28px 0 0 28px;
  padding:16px 18px 10px;
  min-width:0;
}
.painel-menu{
  border-radius:0 28px 28px 0;
  padding:24px 28px 18px;
  border-left:1px solid rgba(111,130,120,.15);
}
.palco-wrap{
  background:transparent;
  border-radius:24px;
  overflow:hidden;
}
#palco{display:block;width:100%;height:auto}
.nome-area{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:12px;
}
.nome-area label{
  font:400 clamp(1.1rem,2vw,1.35rem) Georgia,serif;
  color:#234f63;
}
.nome-area input{
  width:min(100%,290px);
  padding:14px 18px;
  border-radius:999px;
  border:1px solid #b8c7cf;
  background:#f1efeb;
  color:#234f63;
  font:400 1rem Georgia,serif;
}
.nota-palco{
  text-align:center;
  color:var(--muted);
  margin:14px 0 4px;
}
.menu-topo h2{font:700 clamp(1.8rem,3vw,2.3rem) Georgia,serif;margin:0 0 8px;color:#214f66}
.menu-topo p{margin:0 0 20px;color:var(--muted);line-height:1.45}
.categorias{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:24px;
}
.cat-btn,.opcao-btn,.acoes button{
  appearance:none;
  border:1px solid var(--linha);
  background:#fbfaf7;
  color:#2a556a;
  border-radius:22px;
  cursor:pointer;
  font:inherit;
}
.cat-btn{
  min-height:86px;
  padding:10px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
}
.cat-btn .emoji{font-size:1.15rem;line-height:1}
.cat-btn .label{font-size:.95rem}
.cat-btn.ativo{
  background:var(--ativo);
  border:2px solid var(--ativo-borda);
  font-weight:700;
}
.menu-opcoes h3{font:400 1.9rem Georgia,serif;margin:0 0 14px;color:#234f63}
.opcoes-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.opcao-btn{
  min-height:104px;
  padding:12px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-align:center;
  line-height:1.22;
}
.opcao-btn .emoji{font-size:2rem;line-height:1}
.opcao-btn .nome{font-size:.95rem}
.opcao-btn.ativo{
  background:#dbeaec;
  border:2px solid #2f8cb7;
  font-weight:700;
}
.acoes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:18px;
}
.acoes button{
  min-height:58px;
  padding:12px 16px;
  font-size:1.05rem;
  font-weight:700;
}
.acoes .primario{
  background:var(--verde);
  color:#fff;
  border-color:var(--verde);
}
.acoes .primario:hover{background:var(--verde-hover)}
.feedback{
  margin:14px 2px 0;
  min-height:1.4em;
  color:#2d7769;
  font-weight:600;
}
button:focus-visible,input:focus-visible{outline:3px solid #dba54d;outline-offset:3px}
button:disabled{opacity:.45;cursor:not-allowed}
footer{text-align:center;font-size:.84rem;color:var(--muted);padding:14px}

@media(max-width:1150px){
  .jogo-grid{grid-template-columns:1fr}
  .painel-palco{border-radius:28px 28px 0 0}
  .painel-menu{border-radius:0 0 28px 28px;border-left:0;border-top:1px solid rgba(111,130,120,.15)}
}
@media(max-width:720px){
  .app{padding:8px}
  .jogo{border-radius:18px;padding:8px}
  .painel-palco,.painel-menu{padding:14px}
  .categorias,.opcoes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nome-area{gap:10px}
  .nome-area label{text-align:center}
}
@media(max-width:420px){
  .acoes{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}