/* A Web — FIXES: contrast, transparent logo, chat spacing, neon pitch. Load LAST (after perf.css). */

/* 1) homepage stats numbers: bright gradient instead of dark red */
.stats b{
  background:linear-gradient(120deg,color-mix(in srgb,var(--g) 40%,#fff),color-mix(in srgb,var(--g2,var(--g)) 35%,#fff))!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;-webkit-text-fill-color:transparent;
  text-shadow:none;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--g) 55%,transparent));
}
.stats small,.stats span{color:var(--mut)}
html.lite .stats b{filter:none}

/* 2) sent messages (class chat + A-AI): darker background, white text */
.m.me,.mr .m.me{
  background:linear-gradient(135deg,color-mix(in srgb,var(--g) 48%,#12061f),color-mix(in srgb,var(--g2,var(--g)) 42%,#12061f))!important;
  color:#fff!important;
}
.m.me b,.m.me .tm,.m.me small,.m.me a{color:#fff!important;opacity:.9}
.u .at{
  background:linear-gradient(135deg,color-mix(in srgb,var(--g) 48%,#12061f),color-mix(in srgb,var(--g2,var(--g)) 42%,#12061f))!important;
  color:#fff!important;
}

/* 3) logo: no white plate, floats on the dark background */
header .logo,.fw img,.auth-logo,.lgo img,#splash img{background:transparent!important;padding:0!important;box-shadow:none!important}
.lgo img{border-radius:0!important;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--g) 55%,transparent))}
#splash img{border-radius:0!important;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--g) 60%,transparent))}
header .logo{border-radius:0!important}

/* 4) chat list: more room between rows, bigger tap targets */
.cx .rooms .rlist{gap:8px!important;padding:10px!important}
.cx .rooms .rlist .rr{padding:4px 2px}
.cx .rooms .rlist .rr>button.rm{min-height:66px!important;padding:12px 12px!important;gap:12px}
.cx .rooms .rlist .rn{gap:4px}
.cx .rooms .rlist .rn small{margin-top:2px}
.cx .rooms .rlist .rr>button.pn{min-height:34px!important;padding:6px 12px!important}
@media(max-width:800px){
 .cx .rooms{max-height:240px!important}
 .cx .rooms .rlist .rr>button.rm{min-height:68px!important}
}

/* 5) fantasy pitch: grass texture, penalty boxes, neon outline */
.fxp{
  border:2px solid color-mix(in srgb,var(--g) 65%,#fff)!important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='white' stroke-opacity='.5' stroke-width='2'%3E%3Crect vector-effect='non-scaling-stroke' x='22' y='-2' width='56' height='18'/%3E%3Crect vector-effect='non-scaling-stroke' x='37' y='-2' width='26' height='8'/%3E%3Crect vector-effect='non-scaling-stroke' x='22' y='84' width='56' height='18'/%3E%3Crect vector-effect='non-scaling-stroke' x='37' y='94' width='26' height='8'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px),
    radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.1),transparent 70%),
    repeating-linear-gradient(180deg,#23853f 0 56px,#2b9a4b 56px 112px)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--g) 40%,transparent),0 0 24px color-mix(in srgb,var(--g) 60%,transparent),0 0 60px -8px color-mix(in srgb,var(--g) 45%,transparent),inset 0 0 36px rgba(0,0,0,.35)!important;
}
.fxp::before{border-top-color:rgba(255,255,255,.5)}
.fxp::after{border-color:rgba(255,255,255,.5);box-shadow:0 0 12px color-mix(in srgb,var(--g) 50%,transparent)}
html.lite .fxp{box-shadow:0 0 0 1px color-mix(in srgb,var(--g) 40%,transparent),0 0 14px color-mix(in srgb,var(--g) 45%,transparent)!important}