:root{--ouro:#d9a441;--ambar:#f2b33d;--texto:#e8e2d4;--suave:#9aa5b1}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#05070a;color:var(--texto);font:14px/1.4 Inter,system-ui,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}
#tela{position:fixed;inset:0;width:100%;height:100%;display:block}
.suave{color:var(--suave)}
h1,h2,.nome,.placar b{font-family:Cinzel,Georgia,serif;letter-spacing:.06em}

#carregando{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#141c26,#05070a 70%);z-index:40;transition:opacity .6s}
#carregando.some{opacity:0;pointer-events:none}
#carregando .caixa{width:min(520px,90vw);text-align:center}
#carregando h1{color:var(--ambar);font-size:44px;margin:0 0 6px;text-shadow:0 0 30px rgba(242,179,61,.4)}
.barra{height:6px;background:#1b2430;border-radius:3px;overflow:hidden;margin:18px 0 8px}
.barra div{height:100%;width:0;background:linear-gradient(90deg,#b9852c,#f2b33d);transition:width .2s}
.dicas{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-top:22px;color:var(--suave);font-size:13px}
.dicas b{color:var(--texto);border:1px solid #334155;border-radius:5px;padding:0 5px;margin-right:3px;font-weight:600}

#hud{position:fixed;inset:0;pointer-events:none;z-index:20}
.ficha{position:absolute;left:14px;top:14px;display:flex;gap:10px;align-items:center;background:#0b0f14b0;border:1px solid #263241;border-radius:12px;padding:8px 12px 8px 8px}
.ficha img{width:54px;height:54px;border-radius:9px;object-fit:cover;object-position:30% 20%;border:1px solid var(--ouro)}
.nome{color:var(--ambar);font-size:15px;margin-bottom:5px}
.vida,.especial{width:220px;max-width:42vw;height:10px;background:#2a1414;border-radius:5px;overflow:hidden;border:1px solid #00000080}
.especial{height:6px;margin-top:4px;background:#14202a}
.vida div{height:100%;width:100%;background:linear-gradient(90deg,#b23a3a,#e25b4f);transition:width .15s}
.especial div{height:100%;width:0;background:linear-gradient(90deg,#2f8f8a,#7fe0d6);transition:width .15s}
.especial.cheio div{background:linear-gradient(90deg,#f2b33d,#fff1c4);box-shadow:0 0 8px #f2b33d}
.placar{position:absolute;left:50%;top:12px;transform:translateX(-50%);text-align:center;background:#0b0f14a0;border:1px solid #263241;border-radius:10px;padding:4px 16px}
.placar span{display:block;font-size:11px;color:var(--suave);text-transform:uppercase;letter-spacing:.12em}
.placar b{font-size:24px;color:var(--ambar);display:block;line-height:1.1}
.placar small{color:var(--suave);font-size:11px}
.rank{position:absolute;right:18px;top:50%;transform:translateY(-50%);font:700 64px Cinzel,serif;color:var(--ambar);text-shadow:0 0 24px rgba(242,179,61,.5);opacity:0;transition:opacity .3s}
.rank.on{opacity:.95}
.arma-hud{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);max-width:calc(100vw - 180px);background:#0b0f14b0;border:1px solid #263241;border-radius:10px;padding:5px 12px;font-size:12.5px;color:var(--suave);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arma-hud:empty{display:none}
.arma-hud span{color:var(--texto)}
.arma-hud b{color:var(--ambar);font-weight:700}
.arma-hud u{color:var(--texto);text-decoration:none;border-bottom:1px solid var(--ambar)}
@media (pointer:coarse){.arma-hud{bottom:auto;top:64px}}
.sair{position:absolute;left:14px;bottom:14px;pointer-events:auto;color:var(--suave);text-decoration:none;background:#0b0f14b0;border:1px solid #263241;border-radius:8px;padding:4px 10px;font-size:12px}
.aviso{position:absolute;left:50%;top:30%;transform:translateX(-50%);font:700 26px Cinzel,serif;color:var(--ambar);text-shadow:0 2px 20px #000;opacity:0;transition:opacity .4s;text-align:center}
.aviso.on{opacity:1}
#morte[hidden],#hud[hidden],#toque[hidden]{display:none}
#morte{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,#3a0b0b90,#000c);z-index:30;text-align:center}
#morte h2{color:#ff8a80;font-size:40px;margin:0}

#toque{position:fixed;inset:0;z-index:25;pointer-events:none}
#manche{position:absolute;left:24px;bottom:28px;width:130px;height:130px;border-radius:50%;background:#ffffff10;border:1px solid #ffffff30;pointer-events:auto}
#manche-bola{position:absolute;left:40px;top:40px;width:50px;height:50px;border-radius:50%;background:#f2b33d90}
.botoes{position:absolute;right:18px;bottom:24px;display:grid;grid-template-columns:repeat(2,64px);gap:10px;pointer-events:auto}
.botoes button{width:64px;height:64px;border-radius:50%;border:1px solid #ffffff40;background:#0b0f14a0;color:#fff;font-size:22px}
.botoes button.grande{background:#b9852cc0}
@media (max-width:700px){.placar b{font-size:18px}.rank{font-size:44px}}