/* Tema de Halloween: solo se aplica con la clase "halloween" en <html> (la pone js/ui/halloween.js) */
html.halloween{ --bg:#0d0816; --panel:#16101f; --panel2:#1f1629; --border:#3d2a52; --text:#f1e9f7; --dim:#a493b8; --accent:#ff7a1a; }
html.halloween #pAvatar{background:linear-gradient(135deg,#ff7a1a,#8a3cff);}
html.halloween .resetPill{background:linear-gradient(135deg,#8a3cff,#ff7a1a);}
html.halloween .lvlBar i{background:linear-gradient(90deg,#ff7a1a,#8a3cff);}
html.halloween button.primary,html.halloween #connectBtn{background:#ff7a1a;border-color:#ff7a1a;color:#1a0d00;}
html.halloween .brand b{font-family:"Creepster","Fredoka",cursive;letter-spacing:.06em;font-weight:400;font-size:1.25em;color:#ff9a3c;text-shadow:0 0 10px rgba(255,122,26,.55);}
html.halloween .section h3{color:#ff9a3c;}
html.halloween #sidebar{box-shadow:inset 2px 0 0 rgba(255,122,26,.35);}
/* El logo se toca varias veces seguidas: que no se seleccione (se pintaba de azul), ni se arrastre, ni abra el menú de imagen en el celular */
#sidebar .brand,#sidebar .brand img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
#sidebar .brand img{-webkit-user-drag:none;}
#sidebar .brand,#sidebar .brand *{touch-action:manipulation;}   /* sin zoom por doble toque (el pellizco sigue andando) */
/* Onda de cambio de tema (la lanza js/ui/halloween.js): mientras dura, los colores de la interfaz pasan con un fundido en vez de saltar */
html.hwFade,html.hwFade *,html.hwFade *::before,html.hwFade *::after{transition:background-color var(--hw-ms,800ms) ease,border-color var(--hw-ms,800ms) ease,color var(--hw-ms,800ms) ease,box-shadow var(--hw-ms,800ms) ease !important;}
#hwFx{margin-top:6px;}
#hwFx summary{cursor:pointer;color:var(--dim);font-size:13px;margin-bottom:4px;}