*{box-sizing:border-box}
:root{
  --verde:#cfe3c6; --verde2:#bcd8b6; --tinta:#3d3440; --creme:#fff8e6; --lilas:#7b6a96; --rosa:#f3b6c4;
  --topo:64px; --rodape:30px;
}
html,body{height:100%}
body{
  margin:0; overflow:hidden; color:var(--tinta); background:var(--verde);
  font-family:"Nunito","Quicksand","Trebuchet MS",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%; overscroll-behavior:none;
}
#topo{
  position:fixed; z-index:20; top:0; left:0; right:0; height:var(--topo);
  padding:max(8px,env(safe-area-inset-top)) 14px 6px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:linear-gradient(#e9f2dd,#e9f2ddcc 70%,#e9f2dd00);
  pointer-events:none;
}
#topo > *{pointer-events:auto}
h1{margin:0; font-size:clamp(17px,4.6vw,24px); line-height:1.1; letter-spacing:.2px; color:#4a3f55}
h1.logo{display:flex; align-items:center; gap:7px}
.logo-ico{height:clamp(27px,7.4vw,34px); width:auto; flex:none; transform:rotate(-6deg); filter:drop-shadow(0 1px 0 #fff8)}
.wm{font-weight:900; font-size:clamp(22px,6.4vw,30px); letter-spacing:.2px; color:#e08a24; -webkit-text-stroke:.6px #a8561a; paint-order:stroke fill; text-shadow:0 2px 0 #fff3d6, 0 3px 0 #a8561a40}
#dica{margin:2px 0 0; font-size:clamp(11.5px,3.2vw,14px); color:#6b6173; opacity:.9}
.controles{display:flex; align-items:center; gap:10px; flex:none}
#contador{font-size:13px; background:#fff8e6cc; padding:6px 10px; border-radius:999px; border:1.5px solid #d9cfae; white-space:nowrap}
button:focus-visible,a:focus-visible,.fig:focus-visible{outline:3px dashed #6f5a9c; outline-offset:2px}

#campo{
  position:fixed; left:0; right:0; top:var(--topo); bottom:var(--rodape); overflow:hidden; isolation:isolate;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='220' viewBox='0 0 260 220'%3E%3Cg fill='none' stroke='%239cc29a' stroke-width='2.2' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M30 60q-4-12-9-16M30 60q1-13 0-19M30 60q5-10 11-13'/%3E%3Cpath d='M170 150q-4-12-9-16M170 150q1-13 0-19M170 150q5-10 11-13'/%3E%3Cpath d='M215 40q-3-9-7-12M215 40q1-10 0-14M215 40q4-8 9-10'/%3E%3Cpath d='M90 190q-3-9-7-12M90 190q1-10 0-14M90 190q4-8 9-10'/%3E%3C/g%3E%3Cg opacity='.75'%3E%3Ccircle cx='110' cy='70' r='4' fill='%23fff7d6'/%3E%3Ccircle cx='110' cy='70' r='1.6' fill='%23f4c95d'/%3E%3Ccircle cx='60' cy='150' r='4' fill='%23ffe3ea'/%3E%3Ccircle cx='60' cy='150' r='1.6' fill='%23f4c95d'/%3E%3Ccircle cx='230' cy='195' r='4' fill='%23fff7d6'/%3E%3Ccircle cx='230' cy='195' r='1.6' fill='%23f4c95d'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 40% 35%,#e6efcf 0,#d3e6c6 60%,#c4dcbd 100%);
  background-size:260px 220px,cover;
}
.fig{
  position:absolute; left:0; top:0; padding:0; border:0; background:none; margin:0;
  touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent; will-change:transform; outline:none;
}
.fig.arrastando{cursor:grabbing}
.sombra{position:absolute; left:14%; width:72%; bottom:-3px; height:9%; border-radius:50%; background:#5f8a6a44; transform-origin:center}
.corpo{position:absolute; inset:0; display:block; transform-origin:50% 100%}
.corpo svg{width:100%; height:100%; overflow:visible; display:block; pointer-events:none; filter:drop-shadow(0 1.5px 0 #ffffff55)}
.nome{
  position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:4px;
  font-weight:700; font-size:11.5px; line-height:1; font-family:inherit; white-space:nowrap; color:#4a3f55;
  background:#fffaf0d9; padding:3px 7px; border-radius:999px; pointer-events:none; box-shadow:0 1px 3px #4a3f5522;
}
.fig.tentou .corpo{opacity:.72}
.fig.tentou .nome{background:#fffaf099; color:#7a6f80}
.fig.vencedor{filter:drop-shadow(0 0 10px #fff3a8) drop-shadow(0 0 22px #ffe58a)}
.fig.vencedor .nome{background:#fff1a8; font-size:14px}
.fim .fig:not(.vencedor){opacity:.5; pointer-events:none}

#balao{
  position:fixed; z-index:30; max-width:min(310px,calc(100vw - 20px)); min-width:200px;
  background:#fff9d8; color:#3d3440; border:2px solid #e8d48a; border-radius:18px; padding:12px 14px 12px;
  box-shadow:0 6px 18px #3d344026; font-size:14.5px; line-height:1.35; cursor:pointer;
  animation:surge .22s ease-out both;
}
#balao[hidden]{display:none}
#balao .quem{display:block; font-weight:800; font-size:13px; color:#7b6a96; margin-bottom:3px}
#balao .fala{margin:0 0 7px; font-weight:700}
#balao .fato{margin:0; font-size:13.5px; color:#4d4552; border-top:1.5px dashed #e3cf82; padding-top:7px}
#balao .fato b{color:#6a5a86}
#balao::after{
  content:""; position:absolute; left:var(--cauda,50%); width:16px; height:16px; margin-left:-8px;
  background:#fff9d8; border:2px solid #e8d48a; border-top:0; border-left:0; transform:rotate(45deg);
}
#balao.acima::after{bottom:-10px}
#balao.abaixo::after{top:-10px; transform:rotate(225deg)}
@keyframes surge{from{opacity:0; transform:translateY(6px) scale(.97)}to{opacity:1; transform:none}}

#confete{position:fixed; inset:0; width:100%; height:100%; z-index:40; pointer-events:none}

#vitoria{
  position:fixed; z-index:50; left:50%; bottom:calc(var(--rodape) + 12px); transform:translateX(-50%);
  width:min(360px,calc(100vw - 24px)); text-align:center;
  background:#fffaf0; border:2.5px solid #ecd58a; border-radius:24px; padding:16px 16px 14px;
  box-shadow:0 10px 30px #3d344033; animation:sobe .45s cubic-bezier(.2,.8,.3,1) both;
}
#vitoria[hidden]{display:none}
#vitoria h2{margin:0 0 2px; font-size:28px; color:#6a5a86}
#vitoria p{margin:3px 0}
#vit-quem{font-weight:800; font-size:16px}
#vit-resultado{font-size:16px; color:#4d4552}
#vit-curiosidade{font-size:13px; color:#6b6173; margin-top:6px!important}
.botoes{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.primario,.secundario{
  font-weight:800; font-size:16px; line-height:1; font-family:inherit; border-radius:999px; padding:13px 18px; cursor:pointer; text-decoration:none;
  display:block; text-align:center; -webkit-tap-highlight-color:transparent;
}
.duplo{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.duplo .secundario{font-size:13px; line-height:1.15; padding:10px 8px; display:flex; align-items:center; justify-content:center; font-family:inherit}
.insta{border-color:#b9a3da; color:#5b4a86}
#dica-ig{margin:2px 0 0; font-size:12.5px; color:#6b6173}
.primario{background:#8fbf8b; color:#25402a; border:2px solid #6ea06b}
.secundario{background:#fff; color:#1f7a4a; border:2px solid #7cc79b; font-size:14.5px}
@keyframes sobe{from{opacity:0; transform:translate(-50%,16px)}to{opacity:1; transform:translate(-50%,0)}}

#rodape{
  position:fixed; z-index:20; left:0; right:0; bottom:0; height:var(--rodape);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:0 10px max(0px,env(safe-area-inset-bottom));
  font-size:11.5px; color:#6b6173; background:#e9f2ddf0;
}

@media (min-width:900px){
  :root{--topo:72px}
  #topo{padding:12px 28px 6px}
  #balao{font-size:15.5px; max-width:340px}
  #vitoria{width:400px}
}
@media (prefers-reduced-motion:reduce){
  #balao,#vitoria{animation:none}
  *{scroll-behavior:auto!important}
}

/* contador de pessoas online (some se a API falhar) */
#online{
  position:fixed; z-index:19; left:10px; bottom:calc(var(--rodape) + 8px); pointer-events:none;
  display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:#2f5a3a;
  background:#fff8e6e6; border:1.5px solid #d9cfae; padding:4px 10px; border-radius:999px; white-space:nowrap;
}
#online[hidden]{display:none}
#online i{width:9px; height:9px; border-radius:50%; background:#2fb85a; box-shadow:0 0 0 3px #2fb85a33; flex:none}

/* configurações */
#config{
  width:40px; height:40px; border-radius:50%; border:1.5px solid #d9cfae; background:#fff8e6; color:#6b5b7e;
  display:grid; place-items:center; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent;
}
#config svg{width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
#config[aria-expanded="true"]{background:#efe4ff; border-color:#b9a4d9}
#painel-config{
  position:fixed; z-index:60; top:calc(var(--topo) - 4px); right:12px; width:min(300px,calc(100vw - 24px));
  background:#fffaf0; border:2px solid #ecd58a; border-radius:18px; padding:12px 14px; box-shadow:0 8px 24px #3d34402e;
  animation:surge .18s ease-out both;
}
#painel-config[hidden]{display:none}
#painel-config h2{margin:0 0 6px; font-size:15px; color:#6a5a86}
#painel-config .linha{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; font-size:14.5px; font-weight:700; border-top:1.5px dashed #eadfb4}
#painel-config .linha:first-of-type{border-top:0}
.chave{
  flex:none; width:48px; height:28px; border-radius:999px; border:2px solid #c9bfa0; background:#e7e1cf; padding:0; position:relative; cursor:pointer;
  transition:background .15s; -webkit-tap-highlight-color:transparent;
}
.chave i{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0003; transition:transform .15s}
.chave[aria-checked="true"]{background:#8fbf8b; border-color:#6ea06b}
.chave[aria-checked="true"] i{transform:translateX(20px)}
#chip{
  position:fixed; z-index:31; transform:translate(-50%,-100%); pointer-events:none; white-space:nowrap;
  background:#fff9d8; color:#6b5b7e; border:1.5px solid #e8d48a; border-radius:999px; padding:4px 11px; font-size:13px; font-weight:800;
  box-shadow:0 3px 10px #3d34401f; animation:surge .18s ease-out both;
}
#chip[hidden]{display:none}
@keyframes balanca{0%,100%{translate:0 0}20%{translate:-5px 0}40%{translate:5px 0}60%{translate:-3px 0}80%{translate:3px 0}}
.corpo.balanca{animation:balanca .36s ease-in-out}
@media (prefers-reduced-motion:reduce){.corpo.balanca{animation:none}}