/* Fishbowl Boys skin for the Neko web client (React/Tailwind build), 2026-11-02.
   Loaded after Neko's CSS. Tailwind keeps its theme in layered :root vars, and unlayered rules
   win over layered ones, so redefining the vars here re-themes the whole app. */
@font-face{ font-family:FBBungee; src:url(fb-bungee.woff2) format("woff2"); }
@font-face{ font-family:FBMono; src:url(fb-mono.woff2) format("woff2"); }

:root{
  --color-style-primary:#e0a636;
  --color-text-link:#e0a636;
  --color-text-normal:#ece2ce;
  --color-text-muted:#9c8d72;
  --color-background-primary:#1d1810;
  --color-background-secondary:#17130c;
  --color-background-tertiary:#0b0906;
  --color-background-floating:#0b0906;
  --color-background-accent:#3a2f1c;
  --fb-sodium:#e0a636; --fb-clay:#cf5330; --fb-abyss:#120f0a; --fb-ink:#ece2ce; --fb-dim:#9c8d72;
}
body > p{ display:none !important; }

/* ---- Neko logo -> Fishbowl Boys (room header + anywhere else it appears) ---- */
img[alt="n.eko"]{ content:url(fb-emblem.svg); }
img[alt="n.eko"] + span{ font-size:0 !important; }
img[alt="n.eko"] + span::after{ content:"Fishbowl Boys"; font-family:FBBungee, sans-serif; font-size:20px; color:var(--fb-sodium);
  letter-spacing:.02em; text-shadow:2px 2px 0 var(--fb-clay); }

/* ---- login screen ---- */
[data-testid="connect"]{ background:radial-gradient(ellipse at 50% 25%, #2a2112 0%, #15110a 55%, #070604 100%) !important;
  flex-direction:column !important; overflow-y:auto !important; padding:16px 0 !important; box-sizing:border-box; }
[data-testid="connect"]::before{ content:""; display:block; flex:0 0 auto; width:min(340px, 80vw); aspect-ratio:1000 / 1060;
  background:url(fb-logo.svg) center / contain no-repeat; margin:0 0 4px; filter:drop-shadow(0 10px 24px rgba(0,0,0,.6)); }
[data-testid="connect"] > div{ width:min(320px, 88vw) !important; box-sizing:border-box; background:rgba(18,15,10,.94) !important;
  border:2px solid rgba(224,166,54,.55); border-radius:14px !important; padding:14px 16px !important;
  box-shadow:0 16px 40px rgba(0,0,0,.6), 0 0 40px rgba(224,166,54,.12); }
[data-testid="connect"] > div > div:has(> img[alt="n.eko"]){ display:none !important; }   /* the big logo sits above the box */
[data-testid="connect"] form > span{ font-family:FBMono, monospace; letter-spacing:.2em; color:var(--fb-sodium); }
[data-testid="connect"] input{ background:#0b0906 !important; color:var(--fb-ink) !important; border:1px solid rgba(224,166,54,.35) !important;
  font-size:16px !important; padding:10px 12px !important; border-radius:9px !important; }
[data-testid="connect"] input:focus{ outline:2px solid var(--fb-sodium); outline-offset:1px; }
[data-testid="connect"] input::placeholder{ color:#6f6249 !important; }
/* "Sign in with Fishbowl" (fb-ui.js) is the main action; the room-password button is secondary */
[data-testid="connect"] button[type="submit"]{ background:#1d1810 !important; color:var(--fb-sodium) !important;
  border:1px solid rgba(224,166,54,.55) !important; font-family:FBBungee, sans-serif !important; font-weight:400 !important;
  letter-spacing:.06em; font-size:16px !important; border-radius:12px !important; padding:8px !important; box-shadow:none; }
[data-testid="connect"] button[type="submit"]:hover{ border-color:var(--fb-sodium) !important; background:#2a2318 !important; }
[data-testid="connect"] button[type="submit"]:active{ transform:translateY(1px); }
[data-testid="connect"] form::after{ content:"No Fishbowl sign-in? Any name + the room password"; display:block; margin-top:8px; text-align:center;
  font-family:FBMono, monospace; font-size:12px; letter-spacing:.08em; color:var(--fb-dim); }
::selection{ background:var(--fb-sodium); color:var(--fb-abyss); }