/* RETROX1 · "PALCO" — o sistema visual único do site (aprovado pelo Wagner em 12/10/2026).
   Proposta: retrox1-net/prototipo-violao/proposta-visual/. Regras: uma marca, UMA cor para agir (âmbar), uma cor por
   instrumento (identidade, nunca botão), uma letra, botões com volume (luz em cima, aresta em baixo, afundam ao tocar),
   cartões em camadas, toque ≥ 44 px, ícones desenhados (sem emoji).
   Entra em todas as páginas por <link rel="stylesheet" href="/palco/palco.css">; as regras de cada página ficam no fim. */

:root {
  --p-noite: #0c0a12; --p-palco: #15121d; --p-palco2: #1e1a28; --p-linha: rgba(255, 255, 255, .085);
  --p-texto: #f5f1ea; --p-texto2: #bdb4c7; --p-texto3: #8f869c;
  --p-acao: #f5a524; --p-acao-claro: #ffc556; --p-acao-escuro: #e8901a; --p-acao-aresta: #a8620c; --p-acao-texto: #1a1206;
  --p-certo: #34d27b; --p-erro: #ff5d5d; --p-aviso: #ffb547; --p-info: #59c8ff;
  --p-flauta: #ff8a3d; --p-violao: #2fc47a; --p-guitarra: #9b6bff; --p-piano: #4aa3ff;
  --p-r1: 12px; --p-r2: 18px; --p-r3: 26px;
  --p-sombra: 0 22px 40px -24px rgba(0, 0, 0, .95);
  --p-luz: inset 0 1px 0 rgba(255, 255, 255, .07);
  --p-ui: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
}

/* ---------------------------------------------------------------- peças */
.p-bt { font: 800 16px/1 var(--p-ui); min-height: 48px; padding: 0 22px; border-radius: 14px; border: 1px solid transparent; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; position: relative; transition: transform .08s, box-shadow .08s, filter .15s; }
.p-bt.p, .p-acao { background: linear-gradient(180deg, var(--p-acao-claro) 0%, var(--p-acao) 55%, var(--p-acao-escuro) 100%) !important; color: var(--p-acao-texto) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.12), 0 5px 0 var(--p-acao-aresta), 0 14px 24px -10px rgba(245,165,36,.65) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.3); border: 0 !important; }
.p-bt.p:hover, .p-acao:hover { filter: brightness(1.05); }
.p-bt.p:active, .p-acao:active { transform: translateY(4px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 var(--p-acao-aresta), 0 4px 10px -4px rgba(245,165,36,.6) !important; }
.p-bt.s, .p-sec { background: linear-gradient(180deg, #2a2536, #1d1927) !important; color: var(--p-texto) !important; border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 4px 0 #0d0b12, 0 10px 18px -10px rgba(0,0,0,.8) !important; }
.p-bt.s:active, .p-sec:active { transform: translateY(3px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 0 #0d0b12 !important; }
.p-cartao { background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)), var(--p-palco); border: 1px solid var(--p-linha);
  border-radius: var(--p-r2); box-shadow: var(--p-luz), var(--p-sombra); }
.p-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 99px; font: 700 14px var(--p-ui); color: var(--p-texto2);
  background: linear-gradient(180deg, #24202f, #1b1824); border: 1px solid var(--p-linha); box-shadow: var(--p-luz); }
.p-chip.on { color: var(--p-acao); background: linear-gradient(180deg, rgba(255,197,86,.28), rgba(245,165,36,.12)), var(--p-palco); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 0 1px var(--p-acao); }
:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; }

/* ================================================================ PÁGINA INICIAL (#ent, topo, conta) */
/* o topo: botões de vidro escuro com volume; o "Entrar" é a ação */
.uni-top .imp3d-btn, .uni-top a.imp3d-btn, .uni-top > button:not(.cs-entrar), .hud .dir > a, .hud .dir > button {
  background: linear-gradient(180deg, #2a2536, #1d1927) !important;   /* sólido: nada de botão transparente sobre o planeta (15/10/2026) */ border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 3px 0 rgba(0,0,0,.5) !important; border-radius: 14px !important; min-height: 44px; }
.cs-entrar { background: linear-gradient(180deg, var(--p-acao-claro), var(--p-acao) 55%, var(--p-acao-escuro)) !important; color: var(--p-acao-texto) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 0 var(--p-acao-aresta), 0 12px 20px -10px rgba(245,165,36,.7) !important; border-radius: 14px !important; min-height: 44px; font-weight: 800 !important; }
.cs-entrar:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 var(--p-acao-aresta) !important; }

/* a faixa "crie a sua conta": discreta, não compete com a escolha do instrumento */
#cs-faixa { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--p-palco) !important; border: 1px dashed rgba(255,255,255,.16) !important;
  border-radius: var(--p-r2) !important; font: 600 14px var(--p-ui) !important; color: var(--p-texto2) !important; box-shadow: var(--p-luz) !important; }
#cs-faixa button, #cs-faixa a { border-radius: 14px !important; min-height: 44px; }
#cs-faixa button:first-of-type { background: linear-gradient(180deg, var(--p-acao-claro), var(--p-acao) 55%, var(--p-acao-escuro)) !important; color: var(--p-acao-texto) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 0 var(--p-acao-aresta), 0 12px 20px -10px rgba(245,165,36,.7) !important; }
#cs-faixa button:not(:first-of-type) { background: linear-gradient(180deg, #2a2536, #1d1927) !important; color: var(--p-texto) !important; border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 4px 0 #0d0b12 !important; }
#cs-faixa button:active { transform: translateY(3px); }

/* os cartões dos instrumentos: vidro escuro com o brilho da cor do instrumento; a IMAGEM em cima, o nome em baixo */
#ent .ent-bloco { background: linear-gradient(165deg, #2a2236 0%, #15121d 72%) !important;
  background: linear-gradient(165deg, color-mix(in srgb, var(--c1) 30%, #15121d) 0%, #15121d 72%) !important;
  border: 1px solid rgba(255,255,255,.09) !important; border-radius: var(--p-r3) !important; color: var(--p-texto) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 20px 34px -20px var(--c2), 0 2px 0 rgba(0,0,0,.45) !important; overflow: hidden; }
#ent .ent-bloco::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 70% at 80% 0%, color-mix(in srgb, var(--c1) 45%, transparent), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.09), transparent 40%); }
#ent button.ent-bloco:hover, #ent button.ent-bloco:focus-visible { transform: translateY(-3px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 26px 40px -18px var(--c2), 0 2px 0 rgba(0,0,0,.45) !important; }
#ent .ent-bloco b { position: relative; z-index: 2; font: 800 clamp(19px, 4.4vw, 26px)/1.1 var(--p-ui) !important; text-shadow: 0 2px 10px rgba(0,0,0,.5) !important; }
#ent .ent-arte { position: relative; z-index: 1; }
#ent .ent-arte img { filter: drop-shadow(0 16px 16px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(0,0,0,.6)); }
/* as imagens novas: flautas em 3D deitadas → em diagonal; a guitarra deitada → em diagonal; o violão já vem em pé */
#ent .ent-arte img[data-des="flauta-diagonal"], #ent .ent-arte img[src*="flauta-diagonal"] { max-width: 118% !important; max-height: none !important; height: auto !important; width: min(118%, 250px) !important; transform: rotate(-24deg); }
#ent .ent-arte img[data-des="guitarra"], #ent .ent-arte img[src*="/guitarra.webp"] { max-width: 120% !important; max-height: none !important; height: auto !important; width: min(118%, 215px) !important; transform: rotate(-34deg); }
#ent .ent-arte img[data-des="violao"], #ent .ent-arte img[src*="/violao.webp"] { transform: rotate(6deg); }
#ent .ent-arte img[src*="flauta-doce"], #ent .ent-arte img[src*="whistle"], #ent .ent-arte img[src*="transversal-"] { max-width: 112% !important; width: min(112%, 240px) !important; height: auto !important; max-height: none !important; transform: rotate(-20deg); }
/* o selo "TOCAR": uma pastilha âmbar com volume */
#ent .ent-vai { position: relative; z-index: 2; background: linear-gradient(180deg, var(--p-acao-claro), var(--p-acao) 60%, var(--p-acao-escuro)) !important; color: var(--p-acao-texto) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 0 var(--p-acao-aresta) !important; font-weight: 900 !important; letter-spacing: .04em; border-radius: 99px !important; }
#ent .ent-breve { filter: saturate(.55); }
#ent .ent-breve em { position: relative; z-index: 2; background: #0b0910 !important; color: var(--p-texto2) !important; border: 1px solid rgba(255,255,255,.12); }
/* "continuar de onde parou": um cartão escuro com o play âmbar (antes era branco) */
#ent .ent-cont { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), var(--p-palco) !important; color: var(--p-texto) !important;
  border: 1px solid var(--p-linha) !important; box-shadow: var(--p-luz), var(--p-sombra) !important; }
#ent .ent-cont i { background: linear-gradient(180deg, var(--p-acao-claro), var(--p-acao-escuro)) !important; color: var(--p-acao-texto) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 0 var(--p-acao-aresta) !important; }
/* os passos seguintes (qual flauta, que tom, jogar ou estudar) */
#ent .ent-volta { background: linear-gradient(180deg, #2a2536, #1d1927) !important; color: var(--p-texto) !important; border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 3px 0 #0d0b12 !important; border-radius: 12px !important; min-height: 44px; }
#ent .ent-tons button { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 0 rgba(0,0,0,.45), 0 12px 20px -12px var(--c) !important; border-radius: 18px !important; }
#ent .ent-tons button:active { transform: translateY(3px); }
#ent .ent-acao { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), var(--p-palco) !important; border: 1px solid var(--p-linha) !important;
  border-radius: var(--p-r2) !important; box-shadow: var(--p-luz), var(--p-sombra) !important; color: var(--p-texto) !important; }
#ent .ent-acao.ent-jogar { background: linear-gradient(160deg, rgba(255,197,86,.22), rgba(245,165,36,.06) 60%), var(--p-palco) !important; border-color: rgba(245,165,36,.5) !important; }
#ent h1 { letter-spacing: -.02em; }