/* fobm4ster — Streamer Hub
   Faithful production port of the Claude Design "Cozy (Light/Dark) × Retro" handoff.
   Palette + vibe tokens live on #app as CSS custom properties (set by app.js).
   Default: Cozy Night palette + Retro vibe. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  font-family: "Space Grotesk", system-ui, sans-serif;
  background: var(--bg, #1a1410);
  color: var(--text, #f5e9da);
}
::selection { background: var(--a1, #e8895a); color: #fff; }
a { color: inherit; }

/* fallback token defaults (cozy-dark + retro) until app.js sets them */
#app {
  --bg:#1a1410; --bg2:#221913; --surface:#271d15; --surface2:#33271b;
  --text:#f5e9da; --muted:#b79e86; --a1:#e8895a; --a2:#7bbfa6; --a3:#e9b65c;
  --line:rgba(255,210,160,.13);
  --rad:4px; --rad2:3px; --bw:3px; --tilt:-2.5deg;
  --glow:none; --shadow:0 0 0 3px var(--a3), 8px 8px 0 rgba(0,0,0,.42);
  background: var(--bg);
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  transition: background .35s ease, color .35s ease;
}

/* ---------- keyframes (from the design) ---------- */
@keyframes wiggle{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes floatb{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-22px) rotate(6deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pulsedot{0%{box-shadow:0 0 0 0 rgba(255,60,60,.65)}70%{box-shadow:0 0 0 16px rgba(255,60,60,0)}100%{box-shadow:0 0 0 0 rgba(255,60,60,0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.1)}66%{transform:translate(-30px,20px) scale(.95)}}
@keyframes pop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}

/* ---------- ambient background orbs ---------- */
.bg-orbs { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.bg-orbs i { position:absolute; border-radius:50%; filter:blur(110px); display:block; }
.orb1 { top:-120px; left:-80px; width:460px; height:460px; background:var(--a1); opacity:.28; animation:blob 18s ease-in-out infinite; }
.orb2 { top:200px; right:-120px; width:520px; height:520px; background:var(--a2); opacity:.22; animation:blob 22s ease-in-out infinite reverse; }
.orb3 { bottom:-160px; left:30%; width:480px; height:480px; background:var(--a3); opacity:.16; animation:blob 26s ease-in-out infinite; }

/* ---------- nav ---------- */
.nav {
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:16px;
  padding:14px 26px; background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:blur(14px); border-bottom:2px solid var(--line);
}
.logo { display:flex; align-items:center; gap:10px; font-family:"Fredoka",sans-serif; font-weight:700; font-size:23px; letter-spacing:-.5px; cursor:pointer; transition:transform .15s; }
.logo:hover { transform:rotate(-2deg); }
.logo .dot { width:14px; height:14px; border-radius:50%; background:var(--a1); box-shadow:0 0 14px var(--a1); }
.spacer { flex:1; }
.status-pill { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; font-weight:700; font-size:12px; letter-spacing:.6px; }
.status-pill .d { width:7px; height:7px; border-radius:50%; }
.status-live { background:#ff3c3c; color:#fff; animation:pulsedot 2s infinite; }
.status-live .d { background:#fff; }
.status-off { background:var(--surface2); color:var(--muted); }
.status-off .d { background:var(--muted); }

.btn { font-family:"Fredoka",sans-serif; text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px; border:none; }
.watch-sm { background:var(--a1); color:#150018; font-weight:600; font-size:15px; padding:10px 18px; border-radius:999px; box-shadow:0 6px 0 color-mix(in srgb,var(--a1) 60%,#000); transition:transform .12s, box-shadow .12s; }
.watch-sm:hover { transform:translateY(2px); box-shadow:0 4px 0 color-mix(in srgb,var(--a1) 60%,#000); }

/* ---------- marquee ---------- */
.marquee-wrap { position:relative; z-index:1; overflow:hidden; background:var(--surface); border-bottom:2px solid var(--line); padding:10px 0; }
.marquee { display:flex; width:max-content; animation:marquee 24s linear infinite; font-family:"Space Mono",monospace; font-weight:700; font-size:14px; letter-spacing:1px; color:var(--muted); }

/* ---------- layout ---------- */
.section { position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:34px 26px; }
.sec-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin-bottom:20px; }
.sec-head h2 { font-family:"Fredoka",sans-serif; font-weight:700; font-size:30px; margin:0; letter-spacing:-.5px; }
.sec-emoji { font-size:26px; animation:bob 3s ease-in-out infinite; }
.sub { font-family:"Space Mono",monospace; font-size:12px; color:var(--muted); margin-bottom:18px; }

/* ---------- customize bar ---------- */
.customize { position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:24px 26px 0; }
.customize-inner { background:var(--surface); border:2px dashed var(--line); border-radius:20px; padding:15px 18px; display:flex; flex-wrap:wrap; gap:16px 30px; align-items:center; }
.cust-group { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.cust-label { font-family:"Fredoka",sans-serif; font-weight:600; font-size:14px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { cursor:pointer; transition:transform .14s; border-radius:999px; font-family:"Fredoka",sans-serif; }
.chip:hover { transform:translateY(-2px) scale(1.05); }
.swatch { display:flex; align-items:center; gap:7px; background:var(--surface2); padding:6px 11px 6px 8px; border:2px solid var(--line); }
.swatch.active { border-color:var(--text); }
.swatch .dots { display:flex; gap:3px; }
.swatch .dots span { width:9px; height:9px; border-radius:50%; }
.swatch .name { font-family:"Space Mono",monospace; font-size:10px; font-weight:700; letter-spacing:.5px; color:var(--text); }
.vibe-chip { border:2px solid var(--line); background:transparent; color:var(--text); font-weight:600; font-size:13px; padding:7px 14px; }
.vibe-chip.active { background:var(--a3); color:#1a1300; border-color:var(--a3); }
.theme-toggle { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--line); background:var(--surface2); color:var(--text); font-size:17px; border-radius:999px; cursor:pointer; transition:transform .14s, border-color .14s; }
.theme-toggle:hover { transform:rotate(-12deg); border-color:var(--a3); }

/* ---------- hero ---------- */
.hero { display:flex; flex-wrap:wrap; gap:46px; align-items:center; padding:40px 26px 30px; }
.hero-l { flex:1 1 440px; min-width:300px; }
.kicker { font-family:"Space Mono",monospace; font-size:13px; letter-spacing:2px; color:var(--a2); margin-bottom:16px; }
.hero-title { font-family:"Fredoka",sans-serif; font-weight:700; font-size:clamp(56px,9vw,108px); line-height:.92; margin:0 0 18px; letter-spacing:-2px; display:inline-block; background:linear-gradient(100deg,var(--a1),var(--a2) 55%,var(--a3)); -webkit-background-clip:text; background-clip:text; color:transparent; animation:wiggle 5s ease-in-out infinite; transform-origin:left center; }
.hero-p { font-size:19px; line-height:1.5; color:var(--text); max-width:430px; margin:0 0 26px; opacity:.9; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; }
.cta-primary { background:var(--a1); color:#150018; font-weight:600; font-size:17px; padding:14px 26px; border-radius:var(--rad2); box-shadow:0 7px 0 color-mix(in srgb,var(--a1) 55%,#000); transition:transform .12s, box-shadow .12s; }
.cta-primary:hover { transform:translateY(3px); box-shadow:0 4px 0 color-mix(in srgb,var(--a1) 55%,#000); }
.cta-ghost { background:transparent; color:var(--text); font-weight:600; font-size:17px; padding:14px 26px; border-radius:var(--rad2); border:2px solid var(--line); transition:transform .12s, border-color .12s; }
.cta-ghost:hover { transform:translateY(-2px); border-color:var(--a2); }

.hero-r { flex:0 1 380px; min-width:280px; position:relative; }
.sticker { position:absolute; z-index:3; }
.st1 { top:-26px; left:-14px; font-size:40px; animation:floatb 6s ease-in-out infinite; }
.st2 { top:30px; right:-22px; font-size:34px; animation:float 5s ease-in-out infinite; }
.st3 { bottom:-18px; left:-22px; font-size:36px; animation:floatb 7s ease-in-out infinite reverse; }
.st4 { bottom:60px; right:-26px; font-size:30px; animation:float 6.5s ease-in-out infinite; }
.avatar { position:relative; border-radius:28px; overflow:hidden; border:3px solid var(--line); aspect-ratio:1/1; background:linear-gradient(140deg,var(--a1),var(--a2)); animation:bob 7s ease-in-out infinite; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.avatar .stripes { position:absolute; inset:0; background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.12) 0 3px,transparent 3px 16px); }
.avatar .cap { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:"Space Mono",monospace; font-size:13px; letter-spacing:1px; color:rgba(255,255,255,.92); text-shadow:0 2px 8px rgba(0,0,0,.3); }

/* ---------- live card ---------- */
.live-card { margin-top:18px; background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--rad); padding:16px 18px; box-shadow:0 14px 34px rgba(0,0,0,.28); }
.live-head { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.live-head .ld { width:11px; height:11px; border-radius:50%; }
.live-head.on .ld { background:#ff3c3c; animation:pulsedot 2s infinite; }
.live-head.off .ld { background:var(--muted); }
.live-head span.t { font-family:"Fredoka",sans-serif; font-weight:700; font-size:15px; letter-spacing:.5px; }
.live-row { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.big { font-family:"Fredoka",sans-serif; font-weight:700; font-size:30px; line-height:1; color:var(--a1); text-shadow:var(--glow); }
.cap-mono { font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.8px; color:var(--muted); margin-top:3px; }
.uptime { font-family:"Space Mono",monospace; font-weight:700; font-size:18px; color:var(--a2); }
.live-foot { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); font-size:13px; color:var(--muted); }
.live-foot b { color:var(--text); font-weight:600; }
.countdown { font-family:"Space Mono",monospace; font-weight:700; font-size:30px; line-height:1; color:var(--a3); }

/* ---------- stat cards ---------- */
.grid-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.stat-card { background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--rad); padding:18px 16px; transition:transform .15s, border-color .15s, box-shadow .15s; }
.stat-card:hover { transform:translateY(-6px) rotate(var(--tilt)); border-color:var(--accent,var(--a1)); box-shadow:var(--shadow); }
.stat-val { font-family:"Fredoka",sans-serif; font-weight:700; font-size:34px; line-height:1; color:var(--accent,var(--a1)); letter-spacing:-1px; text-shadow:var(--glow); }
.stat-lab { font-family:"Space Mono",monospace; font-size:11px; letter-spacing:1px; color:var(--muted); margin-top:8px; }

/* ---------- highlights ---------- */
.count-pill { font-family:"Space Mono",monospace; font-size:12px; color:var(--muted); background:var(--surface); padding:5px 10px; border-radius:999px; border:1px solid var(--line); }
.grid-clips { display:grid; grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); gap:18px; }
.clip { display:block; text-decoration:none; color:inherit; background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--rad); overflow:hidden; cursor:pointer; transition:transform .16s, box-shadow .16s, border-color .16s; }
.clip:hover { transform:translateY(-9px) rotate(var(--tilt)) scale(1.015); box-shadow:var(--shadow); border-color:var(--accent,var(--a1)); }
.clip-thumb { position:relative; aspect-ratio:16/9; background:var(--accent,linear-gradient(135deg,var(--a1),var(--a2))); overflow:hidden; }
.clip-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.clip-thumb .stripes { position:absolute; inset:0; background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.16) 0 2px,transparent 2px 13px); }
.clip-cat { position:absolute; top:9px; left:9px; font-family:"Space Mono",monospace; font-size:10px; font-weight:700; letter-spacing:.8px; color:#fff; background:rgba(0,0,0,.4); padding:4px 8px; border-radius:7px; backdrop-filter:blur(3px); }
.clip-dur { position:absolute; bottom:9px; right:9px; font-family:"Space Mono",monospace; font-size:11px; font-weight:700; color:#fff; background:rgba(0,0,0,.55); padding:3px 7px; border-radius:6px; }
.clip-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.3); animation:bob 2.6s ease-in-out infinite; }
.clip-play i { width:0; height:0; margin-left:4px; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #150018; }
.clip-body { padding:14px 14px 16px; }
.clip-title { font-family:"Fredoka",sans-serif; font-weight:600; font-size:16px; line-height:1.25; margin-bottom:9px; text-wrap:pretty; }
.clip-meta { display:flex; align-items:center; gap:7px; font-family:"Space Mono",monospace; font-size:12px; color:var(--muted); }
.clip-meta b { color:var(--accent,var(--a1)); font-weight:700; }
.clip-game { margin-top:10px; display:inline-block; font-family:"Space Mono",monospace; font-size:11px; color:var(--text); background:var(--surface2); padding:4px 9px; border-radius:7px; }
.filter-chip { border:2px solid var(--line); background:transparent; color:var(--text); font-family:"Fredoka",sans-serif; font-weight:600; font-size:14px; padding:8px 15px; border-radius:999px; cursor:pointer; transition:transform .14s; }
.filter-chip:hover { transform:scale(1.07) rotate(-1deg); }
.filter-chip.active { background:var(--a2); color:#08131a; border-color:var(--a2); }
.empty { grid-column:1/-1; font-family:"Space Mono",monospace; color:var(--muted); padding:1.5rem 0; }

/* ---------- quote ---------- */
.quote { position:relative; background:linear-gradient(120deg,var(--a1),var(--a2)); border-radius:26px; padding:46px 40px; overflow:hidden; box-shadow:0 22px 50px rgba(0,0,0,.3); }
.quote .stripes { position:absolute; inset:0; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 3px,transparent 3px 22px); }
.quote .mark { position:absolute; top:-20px; left:24px; font-family:"Fredoka",sans-serif; font-weight:700; font-size:150px; line-height:1; color:rgba(255,255,255,.22); }
.quote .inner { position:relative; }
.quote .lbl { font-family:"Space Mono",monospace; font-size:12px; letter-spacing:2px; color:rgba(20,0,24,.7); margin-bottom:14px; }
.quote p { font-family:"Fredoka",sans-serif; font-weight:600; font-size:clamp(26px,4vw,42px); line-height:1.15; color:#160018; margin:0; max-width:760px; text-wrap:pretty; }
.quote .by-row { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:22px; }
.quote .by { font-family:"Fredoka",sans-serif; font-weight:600; font-size:17px; color:rgba(20,0,24,.78); }
.reroll { border:none; cursor:pointer; background:#160018; color:#fff; font-family:"Fredoka",sans-serif; font-weight:600; font-size:14px; padding:9px 16px; border-radius:999px; transition:transform .14s; }
.reroll:hover { transform:scale(1.08) rotate(-2deg); }

/* ---------- gacha ---------- */
.panel { background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--rad); padding:22px; box-shadow:0 14px 34px rgba(0,0,0,.2); }
.gacha-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.gacha-box { background:var(--surface2); border:var(--bw) solid var(--line); border-radius:var(--rad2); padding:18px; }
.gacha-box.center { display:flex; flex-direction:column; justify-content:center; }
.gacha-num { font-family:"Fredoka",sans-serif; font-weight:700; font-size:54px; line-height:1; color:var(--a1); letter-spacing:-2px; text-shadow:var(--glow); }
.gacha-sub { font-size:13px; color:var(--text); opacity:.82; margin-top:10px; }
.gacha-sub b { color:var(--a3); }
.pity-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.pity-bar { height:14px; border-radius:999px; background:var(--bg2); overflow:hidden; border:1px solid var(--line); }
.pity-fill { height:100%; background:linear-gradient(90deg,var(--a2),var(--a3)); transition:width .45s cubic-bezier(.2,.8,.2,1); }
.gacha-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; align-items:center; }
.gbtn { cursor:pointer; font-family:"Fredoka",sans-serif; font-weight:600; font-size:15px; padding:11px 18px; border-radius:var(--rad2); transition:transform .14s, box-shadow .14s; }
.gbtn:hover { transform:translateY(-3px) rotate(var(--tilt)); box-shadow:var(--shadow); }
.gbtn.ghost { border:var(--bw) solid var(--a1); background:transparent; color:var(--text); }
.gbtn.win { border:var(--bw) solid transparent; background:var(--a2); color:#08131a; }
.gbtn.lose { border:var(--bw) solid transparent; background:var(--a1); color:#150018; }
.greset { border:none; cursor:pointer; background:transparent; color:var(--muted); font-family:"Space Mono",monospace; font-size:12px; padding:9px; transition:color .15s; }
.greset:hover { color:var(--text); }

/* ---------- guides ---------- */
.grid-guides { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px; }
.guide { background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--rad); padding:20px; transition:transform .16s, box-shadow .16s, border-color .16s; }
.guide:hover { transform:translateY(-7px) rotate(var(--tilt)); box-shadow:var(--shadow); border-color:var(--a3); }
.guide-head { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.guide-n { font-family:"Fredoka",sans-serif; font-weight:700; font-size:30px; color:var(--a3); letter-spacing:-1px; text-shadow:var(--glow); }
.guide-t { font-family:"Fredoka",sans-serif; font-weight:600; font-size:18px; line-height:1.15; text-wrap:pretty; }
.guide p { font-size:14px; line-height:1.5; color:var(--text); opacity:.85; margin:0 0 14px; text-wrap:pretty; }
.verdict { display:inline-block; font-family:"Space Mono",monospace; font-size:11px; font-weight:700; letter-spacing:.5px; color:var(--a1); background:var(--surface2); padding:5px 10px; border-radius:8px; }

/* ---------- socials ---------- */
.grid-socials { display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:16px; }
.social { text-decoration:none; display:flex; align-items:center; gap:15px; background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--rad); padding:18px; transition:transform .16s, box-shadow .16s; }
.social:hover { transform:rotate(0deg) translateY(-5px); box-shadow:var(--shadow); }
.social .tag { flex:none; width:52px; height:52px; border-radius:15px; color:#fff; display:flex; align-items:center; justify-content:center; font-family:"Fredoka",sans-serif; font-weight:700; font-size:18px; letter-spacing:-.5px; }
.social .name { display:block; font-family:"Fredoka",sans-serif; font-weight:600; font-size:18px; color:var(--text); }
.social .ssub { display:block; font-size:13px; color:var(--muted); margin:2px 0 4px; }
.social .handle { display:block; font-family:"Space Mono",monospace; font-size:12px; color:var(--a2); }

/* ---------- footer ---------- */
.footer { position:relative; z-index:1; text-align:center; padding:40px 26px 54px; color:var(--muted); font-size:13px; }
.footer .cozy { font-family:"Fredoka",sans-serif; font-weight:600; font-size:20px; color:var(--text); margin-bottom:8px; }
.footer .built { margin-top:12px; font-size:15px; color:var(--text); }
.footer .built a { color:var(--a1); font-weight:700; text-decoration:none; border-bottom:2px dotted var(--a1); }
.footer .built .heart { color:var(--a1); }

@media (prefers-reduced-motion: reduce) { * { animation:none !important; scroll-behavior:auto; } }