:root { --azul:#2576c6; --azul-claro:#59c8df; --amarelo:#ffd45a; --laranja:#f1844b; --verde:#54af73; --creme:#fff7df; --tinta:#273348; }
* { box-sizing:border-box; }
body { margin:0; color:var(--tinta); background:#d6eef0; font-family:'Nunito',sans-serif; }
.app { min-height:100vh; background:linear-gradient(#d5f1ef 0 55%,#a7d69e 55%); }
.tela { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px; }
.escondida { display:none; }
.cartaz { width:min(680px,100%); text-align:center; padding:38px 42px 30px; border:7px solid #fff; border-radius:30px; background:var(--creme); box-shadow:0 14px 0 #c17e58,0 20px 34px #32756b33; position:relative; overflow:hidden; }
.cartaz:before,.cartaz:after { content:''; position:absolute; width:150%; height:22px; background:repeating-linear-gradient(120deg,var(--azul) 0 34px,var(--amarelo) 34px 68px,var(--laranja) 68px 102px); top:0; left:-25%; transform:rotate(-2deg); }
.etiqueta { letter-spacing:3px; font-size:12px; font-weight:800; color:var(--laranja); margin:14px 0 4px; }
h1 { font:800 clamp(42px,7vw,72px)/.83 'Baloo 2',sans-serif; margin:12px 0 25px; color:var(--azul); }
.intro { font-size:17px; line-height:1.45; max-width:460px; margin:0 auto 22px; }
.controles { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.controles div { background:#fff; border:2px solid #e8d9a7; border-radius:14px; padding:12px 18px; line-height:1.6; font-size:13px; text-align:left; flex:1; min-width:190px; }
.controles strong { color:var(--azul); font-size:14px; }
.controles b { background:var(--amarelo); padding:1px 5px; border-radius:5px; }
.botao { border:0; border-radius:14px; padding:14px 34px; color:#fff; background:var(--laranja); font:800 20px 'Nunito'; cursor:pointer; box-shadow:0 5px 0 #c35e32; transition:.15s; margin:24px 0 12px; }
.botao:hover { transform:translateY(-2px); box-shadow:0 7px 0 #c35e32; }
.cartaz small { display:block; color:#79806f; }
.topo { width:min(1280px,100%); padding:16px 26px; display:flex; justify-content:space-between; align-items:center; gap:20px; }.sala-jogo { color:var(--laranja); font-weight:800; letter-spacing:1px; font-size:13px; margin-left:auto; }
.marca { display:flex; align-items:center; gap:12px; color:var(--azul); font:700 18px/1 'Baloo 2'; }
.marca b { color:var(--verde); font-size:24px; }.bandeirinha { width:34px;height:42px;background:var(--laranja); clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%); }
.placar { display:flex; gap:10px; }.placar div { background:#fffaf0; border-radius:13px; padding:6px 17px; text-align:center; box-shadow:0 3px #bfdfce; }.placar small { display:block; color:#778579; font-size:10px; letter-spacing:1px; }.placar strong { font:800 25px 'Baloo 2'; color:var(--azul); }
.jogo-wrap { display:flex; width:min(1280px,100%); gap:16px; align-items:stretch; }.jogo-wrap canvas { width:calc(100% - 285px); min-width:0; height:auto; max-height:none; border:5px solid #fff8d9; border-radius:20px; box-shadow:0 8px 0 #6ca375; background:#b8dfa4; image-rendering:auto; }
.painel { width:270px; display:flex; flex-direction:column; gap:11px; }.cartao { background:#fffaf0; border-radius:15px; padding:13px 15px; box-shadow:0 4px #b2d7be; }.cartao h2 { margin:0 0 6px; font:800 15px 'Baloo 2'; color:var(--laranja); text-transform:uppercase; letter-spacing:.5px; }.pedido #nome-npc { font-weight:800; color:var(--azul); }.pedido p { margin:4px 0; line-height:1.3; font-size:14px; }.item-pedido { display:flex; align-items:center; gap:7px; margin:6px 0; font-size:13px; font-weight:700; }.item-pedido span { display:inline-grid; place-items:center; width:25px; height:25px; border-radius:8px; color:#fff; font-size:16px; }.pedido-pronto { color:var(--verde); font-weight:800; }.bancada-info h2 { display:flex; justify-content:space-between; }.bancada-info h2 span { color:#799079; font-size:12px; }.bancada-info div { font-size:13px; line-height:1.65; }.status { flex:1; }.status p { font-size:13px; line-height:1.4; margin:3px 0; }.legenda { font-size:12px; line-height:1.8; }.bolinha { display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px; }.azul{background:var(--azul)}.claro{background:var(--azul-claro)}.dica{color:#7c8d80;line-height:1.2;margin-top:4px}.rodape { width:min(1280px,100%); margin:12px auto 0; justify-content:space-around; color:#385e53; font-size:13px; }.rodape b { color:var(--azul); }
.pedido-subtitulo { color:#8a906f; font-size:10px; font-weight:800; letter-spacing:.7px; margin-top:5px; }.colocados-titulo { color:var(--verde); margin-top:9px; }.colocados { color:#4d795b; font-size:12px; font-weight:700; line-height:1.3; }
.resultado-numeros { display:flex; justify-content:center; gap:35px; margin:15px 0; }.resultado-numeros strong { display:block; color:var(--azul); font:800 48px 'Baloo 2'; }.resultado-numeros small { color:#75806f; }
.salas { display:flex; gap:14px; margin:14px auto 4px; max-width:520px; }.salas > div { flex:1; background:#fff; border:2px solid #e8d9a7; border-radius:14px; padding:13px; }.salas h2 { margin:0; color:var(--azul); font-size:17px; }.salas .botao { margin:12px 0 4px; padding:10px 16px; font-size:15px; }.sala-entrar label { display:block; margin-top:9px; font-size:12px; font-weight:800; color:#79806f; }.sala-entrar input { width:100%; margin-top:4px; padding:9px; border:2px solid #d8e0c7; border-radius:8px; text-align:center; font:800 18px Arial; text-transform:uppercase; }.codigo-sala { display:block; min-height:22px; color:var(--laranja); letter-spacing:4px; font-size:22px; }.botao-entrar-jogo { background:var(--verde) !important; box-shadow:0 5px 0 #397c53 !important; }.status-sala { min-height:22px; margin:10px 0 0; color:#4d795b; font-weight:700; font-size:13px; }
.escolha-jogador { display:flex; gap:12px; justify-content:center; margin-top:22px; }.escolha-jogador .botao { margin:0; font-size:16px; padding:12px 18px; }.fluxo-cartaz { max-width:560px; }.fluxo-cartaz .intro { max-width:430px; }.fluxo-cartaz label { display:block; color:#79806f; font-size:13px; font-weight:800; margin-top:18px; }.codigo-entrada { display:block; width:min(260px,100%); margin:6px auto 0; padding:12px; border:2px solid #d8e0c7; border-radius:8px; text-align:center; font:800 24px Arial; letter-spacing:4px; text-transform:uppercase; }.botao-reconectar { background:var(--azul) !important; box-shadow:0 5px 0 #18558e !important; }.botao-link { border:0; background:transparent; color:var(--azul); cursor:pointer; font-weight:800; margin-top:12px; }.botao-link:hover { text-decoration:underline; }
@media (max-width:800px) { .topo{padding:10px 4px}.marca{font-size:14px}.marca b{font-size:18px}.placar{gap:4px}.placar div{padding:4px 8px}.placar strong{font-size:20px}.jogo-wrap{display:block}.jogo-wrap canvas{width:100%;max-height:none;border-radius:14px}.painel{width:100%;display:grid;grid-template-columns:1fr 1fr;margin-top:12px}.status{grid-column:1/-1}.rodape{font-size:11px}.cartaz{padding:30px 20px 25px} }
@media (max-width:480px) { .topo{align-items:flex-start}.marca{display:none}.placar{width:100%;justify-content:space-between}.painel{grid-template-columns:1fr}.status{grid-column:auto}.inicio-controles div{min-width:100%}h1{font-size:48px} }
/* Camada de acabamento: mantém a paleta da feira, mas cria mais contraste e profundidade. */
:root { --azul-noite:#173b58; --verde-profundo:#2d765d; --sombra:#174b4a44; }
body { background:#b9e4e1; font-family:Arial, sans-serif; }
.app { background:radial-gradient(circle at 50% -15%, #f7f1cc 0, #d4efeb 38%, #abd29f 100%); }
.tela { padding:28px; }
.cartaz { border:4px solid #fffdf2; background:linear-gradient(145deg,#fffdf3,#fff2d4); box-shadow:0 10px 0 #a85d3d,0 24px 55px var(--sombra); }
.cartaz:before,.cartaz:after { height:18px; opacity:.95; }
h1 { color:var(--azul-noite); text-shadow:0 3px #f6d66c; }
h1 span { color:var(--verde-profundo); }
.intro { color:#45626a; }
.controles div { background:#fffdf5; border-color:#dfc987; box-shadow:0 4px 0 #eadcaf; }
.botao { background:linear-gradient(#f49a5d,#dd653e); box-shadow:0 5px 0 #ad4e31; }
.botao:hover { filter:saturate(1.12) brightness(1.04); }
.topo { padding:14px 24px; }
.sala-jogo { color:#d5653e; background:#fff8df; border:2px solid #eed48e; border-radius:99px; padding:8px 14px; box-shadow:0 3px 0 #c0d8bf; }
.placar div { background:linear-gradient(#fffdf5,#fff4d9); border:2px solid #fff; box-shadow:0 4px 0 #a9cfbe,0 8px 18px #377c6c22; }
.placar strong { color:var(--azul-noite); }
.jogo-wrap { gap:20px; }
.jogo-wrap { width:min(1280px,100%); margin:0 auto; justify-content:center; }
.jogo-wrap canvas { display:block; width:calc(100% - 290px); border:6px solid #fff8da; border-radius:24px; box-shadow:0 10px 0 #5c9870,0 18px 30px #2b665044; }
.painel { gap:14px; }
.painel { flex:0 0 270px; }
.cartao { background:linear-gradient(145deg,#fffdf5,#fff4d9); border:2px solid #fff; box-shadow:0 5px 0 #b2d7be,0 10px 18px #2b665022; }
.cartao h2 { color:#d86742; }
.pedido #nome-npc { color:var(--azul-noite); font-size:18px; }
.status { background:linear-gradient(145deg,#f9fff0,#eaf5dc); }
.legenda { background:#eef8ed; }
.rodape { color:#315b55; font-weight:700; }
.rodape b { color:#d05f3d; }
.logo-amigos { display:inline-flex; align-items:center; gap:9px; margin-bottom:8px; color:#2d765d; font-size:11px; font-weight:800; letter-spacing:1.5px; line-height:1.05; text-align:left; }
.logo-amigos img { width:58px; height:58px; object-fit:contain; border-radius:50%; box-shadow:0 5px 0 #ad4e3155; }
.logo-simbolo { display:grid; place-items:center; width:34px; height:34px; border-radius:12px 12px 12px 3px; color:#fff9d0; background:#d86742; font-size:22px; transform:rotate(-5deg); box-shadow:0 4px 0 #ad4e31; }
.logo-amigos b { color:#d86742; }
.logo-pequeno { display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:5px 8px; border:1px solid #e9c879; border-radius:999px; color:#d86742; font:bold 10px Arial; letter-spacing:.5px; background:#fff8df; }
.simbolo-amigos { display:grid; place-items:center; width:42px; height:42px; border-radius:14px 14px 14px 4px; color:#fff8d0; background:linear-gradient(145deg,#ee8850,#d45c3d); font:800 25px Arial; transform:rotate(-4deg); box-shadow:0 5px 0 #ad4e31, inset 3px 3px 0 #f6b06d55; }
.logo-oficial { width:46px; height:46px; object-fit:contain; border-radius:50%; box-shadow:0 4px 0 #ad4e3155; }
.topo,.rodape { margin-left:auto; margin-right:auto; }
.botao:focus-visible,.botao-link:focus-visible,.codigo-entrada:focus-visible { outline:3px solid #2576c6; outline-offset:4px; }
.codigo-entrada { background:#fffdf5; color:#173b58; box-shadow:inset 0 2px 0 #eadcaf; }
.cartao h2 { display:flex; align-items:center; gap:8px; }
.cartao h2:before { content:''; width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#f1844b; box-shadow:0 0 0 4px #f1844b22; }
.pedido-subtitulo { color:#66816c; }
.fila-pedidos { border-top:2px solid #eadcaf; margin-top:12px; padding-top:8px; }
.fila-pedido { display:grid; grid-template-columns:auto 1fr; gap:2px 7px; padding:7px 8px; border-left:4px solid #c9d9c1; margin-top:5px; background:#f1f5e7; border-radius:7px; font-size:11px; }
.fila-pedido.atual { border-left-color:#f1844b; background:#fff0d1; }
.fila-pedido strong { color:#71846f; font-size:9px; letter-spacing:.5px; }
.fila-pedido.atual strong { color:#d86742; }
.fila-pedido span { font-weight:800; color:#173b58; }
.fila-pedido small { grid-column:1/-1; color:#66816c; line-height:1.25; }
@media (max-width:800px) { .topo { flex-wrap:wrap; } .sala-jogo { order:3; width:100%; text-align:center; margin-left:0; } .jogo-wrap canvas { width:100%; box-shadow:0 7px 0 #5c9870,0 12px 22px #2b665044; } }
@media (max-width:800px) { .logo-amigos img { width:50px; height:50px; } .logo-oficial { width:38px; height:38px; } }