body {
  background:
    radial-gradient(circle at 15% 10%, rgba(236, 72, 153, 0.25), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(34, 211, 238, 0.2), transparent 40%),
    #1a1033;
  background-attachment: fixed;
}

/* ---------- Componentes ---------- */
.card {
  background: #2a1a56;
  border: 3px solid #a78bfa;
  border-radius: 1.75rem;
  box-shadow: 6px 6px 0 #0d0620;
}

.hud {
  background: rgba(42, 26, 86, 0.95);
  border-bottom: 3px solid #a78bfa;
  backdrop-filter: blur(6px);
}

.arena {
  background:
    radial-gradient(circle, rgba(167, 139, 250, 0.18) 1.5px, transparent 1.5px) 0 0 / 24px 24px,
    #20134a;
  border: 3px dashed #a78bfa;
}

.btn-fun {
  background: #fde047;
  color: #1a1033;
  font-weight: 700;
  border: 3px solid #0d0620;
  border-radius: 1rem;
  box-shadow: 4px 4px 0 #0d0620;
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn-fun:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #0d0620; }
.btn-fun:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #0d0620; }
.btn-fun:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-coffee { background: #fb923c; }

/* ---------- Bolinhas ---------- */
.bug {
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 9999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 3px solid currentColor;
  background: #2a1a56;
  box-shadow: 0 0 22px -2px currentColor, 3px 3px 0 #0d0620;
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
  padding: 4px;
  transition: transform 0.1s, opacity 0.2s;
  will-change: left, top;
  animation: jelly 1.1s ease-in-out infinite;
}

.bug:hover { transform: scale(1.15) rotate(-6deg); animation-play-state: paused; }
.bug .emoji { font-size: 26px; }
.bug .label { color: #f5f3ff; margin-top: 2px; font-weight: 600; }

.bug .ring {
  position: absolute;
  inset: -8px;
  border-radius: 9999px;
  background: conic-gradient(currentColor var(--p, 100%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  pointer-events: none;
}

.bug.fixed { transform: scale(1.8) rotate(20deg); opacity: 0; pointer-events: none; animation: none; }
.bug.failed { transform: scale(0.3) rotate(-30deg); opacity: 0; pointer-events: none; animation: none; }

/* ---------- Avatar e tiro ---------- */
.arena { cursor: crosshair; }
.bug { z-index: 2; }

.avatar {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 230px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}
.avatar svg { display: block; width: 100%; height: auto; overflow: visible; }
.av .shoot { display: none; }
.av.shooting .shoot { display: inline; }
.av.shooting .typing { display: none; }

.av .hl, .av .hr { transform-box: fill-box; animation: key 0.22s ease-in-out infinite alternate; }
.av .hr { animation-delay: 0.11s; }
.av .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flick 0.45s ease-in-out infinite alternate; }
.av .recoil, .av .flash { transform-box: fill-box; }

.bullet {
  position: absolute;
  width: 26px;
  height: 4px;
  margin-top: -2px;
  border-radius: 9999px;
  background: linear-gradient(90deg, transparent, #fde047);
  box-shadow: 0 0 8px 2px #fde047;
  transform-origin: 0 50%;
  pointer-events: none;
  z-index: 3;
}
.impact {
  position: absolute;
  font-size: 30px;
  line-height: 1;
  pointer-events: none;
  z-index: 3;
}

.avatar-card { padding: 4px; }
.avatar-card svg { display: block; width: 100%; height: auto; }

@keyframes key { to { transform: translateY(-4px); } }
@keyframes flick { from { transform: scaleY(0.85); } to { transform: scaleY(1.15); } }

/* ---------- Animações ---------- */
@keyframes jelly {
  0%, 100% { scale: 1 1; }
  30% { scale: 1.08 0.92; }
  60% { scale: 0.94 1.06; }
}

@keyframes wobble {
  0%, 100% { rotate: -1.5deg; }
  50% { rotate: 1.5deg; }
}
.wobble { animation: wobble 2.2s ease-in-out infinite; }

@keyframes pop {
  0% { transform: scale(0.8); opacity: 0; }
  70% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
.pop { animation: pop 0.25s ease-out; }

@keyframes shake {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(-6px, 3px); }
  75% { transform: translate(6px, -3px); }
}
.shake { animation: shake 0.25s; }

/* ---------- Setup / opções ---------- */
.spec-card {
  background: #20134a;
  border: 3px solid #a78bfa;
  border-radius: 1rem;
  box-shadow: 3px 3px 0 #0d0620;
}
.spec-card.selected { border-color: #fde047; background: #3b2478; }

.opt-correct { border-color: #34d399 !important; background: rgba(52, 211, 153, 0.25) !important; }
.opt-wrong { border-color: #f87171 !important; background: rgba(248, 113, 113, 0.2) !important; text-decoration: line-through; opacity: 0.7; }
.opt-trap { border-color: #fbbf24 !important; background: rgba(251, 191, 36, 0.2) !important; text-decoration: line-through; opacity: 0.7; }

/* ---------- Multiplayer ---------- */
.mini-av svg { display: block; width: 100%; height: auto; }
button:disabled { cursor: not-allowed; }
#btn-join-room:disabled, #btn-create-room:disabled { opacity: 0.45; }
#chat-log::-webkit-scrollbar { width: 6px; }
#chat-log::-webkit-scrollbar-thumb { background: #a78bfa; border-radius: 9999px; }

/* ---------- Login / cadastro ---------- */
.login-bg { background: #140a33; }
.login-panel { background: rgba(42, 26, 86, 0.94); backdrop-filter: blur(4px); }
.login-bg .code-scroll { animation: codeScroll 9s linear infinite; }
@keyframes codeScroll { to { transform: translateY(-120px); } }
.login-bg .blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.login-bg .steam { animation: steam 2.4s ease-in-out infinite; }
@keyframes steam { 0% { opacity: 0.2; transform: translateY(6px); } 50% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-8px); } }
.login-bg .typing { animation: key 0.22s ease-in-out infinite alternate; }
.login-sym {
  position: absolute;
  font-size: 28px;
  font-weight: 700;
  color: #67e8f9;
  text-shadow: 0 0 12px #22d3ee;
  opacity: 0;
  pointer-events: none;
  animation: symFloat 7s ease-in infinite;
}
@keyframes symFloat {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-160px) rotate(12deg); }
}
.filter-chip { padding: 2px 10px; border-radius: 9999px; border: 2px solid #a78bfa; background: #20134a; font-size: 0.8rem; }
.filter-chip.on { border-color: #fde047; background: #3b2478; color: #fde047; }
@media (prefers-reduced-motion: reduce) {
  .login-bg .code-scroll, .login-bg .blink, .login-bg .steam, .login-bg .typing, .login-sym { animation: none; }
}

/* ---------- Administrador ---------- */
.admin-bg { background: radial-gradient(circle at 15% 10%, rgba(236, 72, 153, 0.25), transparent 40%), radial-gradient(circle at 85% 90%, rgba(34, 211, 238, 0.2), transparent 40%), #1a1033; }
#admin-drop.drag { border-color: #fde047; background: rgba(253, 224, 71, 0.12); }

/* ---------- Superpoderes ---------- */
.power-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border-radius: 9999px; border: 3px solid #a78bfa; background: #20134a; font-weight: 600; }
.power-btn:hover:not(:disabled) { border-color: #fde047; transform: translateY(-1px); }
.power-btn:disabled { opacity: 0.4; }
.power-btn.on { border-color: #67e8f9; background: #164e63; }
#arena.frozen { box-shadow: inset 0 0 70px rgba(125, 211, 252, 0.55); filter: saturate(0.75); }

/* ---------- Telas baixas (celular deitado) ---------- */
@media (max-height: 520px) {
  #ticket .card { padding: 0.6rem 0.9rem; }
  #ticket .card > div:first-child { margin-bottom: 0.4rem; }
  #ticket .card > div:nth-child(2) { margin-bottom: 0.5rem; }
  #t-text { font-size: 1rem; line-height: 1.3; margin-bottom: 0.5rem; }
  #t-options { gap: 0.3rem; }
  #t-options .opt { padding: 0.3rem 0.8rem; font-size: 0.95rem; }
  #t-feedback { min-height: 1.6rem !important; margin-top: 0.3rem !important; font-size: 1rem !important; }
  #arena { min-height: 230px !important; }
}

/* ---------- Botões flutuantes: ajuda e oficina (engrenagem) ---------- */
.fab {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.8rem; font-weight: 800; font-size: 1.05rem; color: #1a1033;
  border: 3px solid #0d0620; border-radius: 999px; box-shadow: 3px 3px 0 #0d0620;
  transition: transform 0.08s, box-shadow 0.08s;
}
.fab:hover { transform: translate(-1px, -1px) rotate(-2deg); box-shadow: 4px 4px 0 #0d0620; }
.fab:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0d0620; }
.fab-help { background: #67e8f9; }
.fab-gear { background: #fde047; }
.fab-label { font-size: 0.8rem; }
@media (max-width: 420px) { .fab-label { display: none; } }
.gear-icon { display: inline-block; animation: gear-idle 6s linear infinite; }
.fab-gear:hover .gear-icon { animation: gear-spin 0.7s linear infinite; }
@keyframes gear-idle { to { transform: rotate(360deg); } }
@keyframes gear-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gear-icon, .fab-gear:hover .gear-icon { animation: none; } }

/* ---------- Cenários da arena (escolhidos na loja) ---------- */
.arena[data-scenario="datacenter"] {
  background:
    repeating-linear-gradient(90deg, rgba(34, 211, 238, 0.10) 0 2px, transparent 2px 70px),
    radial-gradient(circle, rgba(52, 211, 153, 0.55) 2px, transparent 2.5px) 0 0 / 70px 46px,
    #06141f;
  border-color: #22d3ee;
}
.arena[data-scenario="homeoffice"] {
  background:
    repeating-linear-gradient(0deg, rgba(251, 146, 60, 0.20) 0 28px, transparent 28px 56px),
    repeating-linear-gradient(90deg, rgba(251, 146, 60, 0.20) 0 28px, transparent 28px 56px),
    #3a2418;
  border-color: #fb923c;
}
.arena[data-scenario="madrugada"] {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 1px, transparent 1.5px) 0 0 / 90px 70px,
    radial-gradient(circle, rgba(253, 224, 71, 0.6) 1.5px, transparent 2px) 30px 25px / 130px 110px,
    linear-gradient(#050a24, #1b1244);
  border-color: #818cf8;
}
.arena[data-scenario="openspace"] {
  background:
    repeating-linear-gradient(45deg, rgba(148, 163, 184, 0.14) 0 22px, transparent 22px 44px),
    repeating-linear-gradient(-45deg, rgba(148, 163, 184, 0.14) 0 22px, transparent 22px 44px),
    #1e293b;
  border-color: #94a3b8;
}
.scenario-thumb { width: 3rem; height: 2.2rem; border-radius: 0.6rem; border: 2px solid #0d0620; flex-shrink: 0; }

/* ---------- Quem está online ---------- */
.fab-gear { position: relative; }
.online-dot {
  position: absolute; top: -6px; right: -6px; min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; color: #052e16; background: #4ade80;
  border: 2px solid #0d0620; border-radius: 999px; animation: online-pulse 2s ease-in-out infinite;
}
@keyframes online-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); } 50% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } }
@media (prefers-reduced-motion: reduce) { .online-dot { animation: none; } }
.live-dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: #4ade80; display: inline-block; animation: online-pulse 2s ease-in-out infinite; }
.mimo-btn { padding: 0.15rem 0.45rem; border-radius: 0.7rem; border: 2px solid #7c3aed; background: #1a1033; font-size: 1.05rem; line-height: 1.4; transition: transform 0.1s; }
.mimo-btn:hover:not(:disabled) { border-color: #fde047; transform: translateY(-2px) scale(1.12); }
.mimo-btn:disabled { opacity: 0.4; cursor: not-allowed; }