/* Funny Bidness Auctions — shared styles for every page */
:root{
  --ink:#0a0822; --panel:#1a1450; --panel2:#241a66; --line:#3a2a8a;
  --yellow:#ffc21e; --blue:#36aae8; --red:#ee2a24; --pink:#ec1e79; --purple:#8a45f0;
  --green:#39c06a; --cream:#fff7e6; --wood:#8a5a2c;
  --disp:'Luckiest Guy',system-ui,sans-serif; --body:'Fredoka',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body); color:var(--cream); background:var(--ink);
  background-image:radial-gradient(circle at 50% -10%, #2a1f7a 0%, #160f44 45%, #0a0822 80%);
  background-attachment:fixed; line-height:1.6; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.06;
  background-image:radial-gradient(var(--cream) 1.4px, transparent 1.4px);
  background-size:20px 20px;
}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px; position:relative; z-index:1}
h1,h2,h3,.disp{font-family:var(--disp); font-weight:400; letter-spacing:.5px; line-height:1.05}
a{color:inherit; text-decoration:none}

/* nav */
nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(8px);
  background:rgba(10,8,34,.82); border-bottom:3px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; padding:12px 20px; max-width:1180px; margin:0 auto}
.mark{font-family:var(--disp); font-size:22px; -webkit-text-stroke:1.5px #000; text-shadow:2px 2px 0 #000}
.mark{white-space:nowrap} .mark .f{color:var(--yellow)} .mark .b{color:var(--blue)} .mark .r{color:var(--red)}
.nav-links{display:flex; gap:18px; align-items:center; font-weight:600; white-space:nowrap}
.nav-links a{opacity:.92; transition:.15s} .nav-links a:hover{color:var(--yellow); opacity:1}
.nav-links .wn{background:var(--pink); color:#fff; padding:8px 16px; border-radius:40px; border:3px solid #000;
  box-shadow:3px 3px 0 #000; -webkit-text-stroke:0}
.nav-links .wn:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 #000; color:#fff}
.menu-btn{display:none; font-family:var(--body); font-weight:700; font-size:15px; color:var(--cream); background:var(--panel2);
  border:3px solid #000; border-radius:40px; padding:7px 14px; box-shadow:3px 3px 0 #000; cursor:pointer}
@media(max-width:1250px){
  .nav-in{position:relative}
  .menu-btn{display:block}
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(10,8,34,.97); border-bottom:3px solid var(--line); padding:8px 20px 18px}
  nav.open .nav-links{display:flex}
  .nav-links a{padding:12px 4px; border-bottom:1px solid rgba(255,255,255,.08); font-size:17px}
  .nav-links .wn{margin-top:12px; text-align:center; border-bottom:3px solid #000}
}
@media(max-width:420px){.mark{font-size:17px}}

/* buttons + bits */
.btn{display:inline-block; font-family:var(--disp); font-size:18px; padding:14px 26px; border-radius:50px;
  border:4px solid #000; box-shadow:5px 5px 0 #000; cursor:pointer; transition:.12s; -webkit-text-stroke:.4px #000}
.btn:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 #000}
.btn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 #000}
.btn-pink{background:var(--pink); color:#fff} .btn-yellow{background:var(--yellow); color:#1a1450}
.btn-blue{background:var(--blue); color:#06234a}
.burst{display:inline-block; font-family:var(--disp); color:#1a1450; background:var(--yellow);
  padding:6px 14px; border:3px solid #000; box-shadow:3px 3px 0 #000; transform:rotate(-3deg)}
.tag{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  background:#000; color:var(--yellow); padding:4px 10px; border-radius:30px; border:2px solid var(--yellow)}
.draft{display:inline-block; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:#1a1450; background:repeating-linear-gradient(45deg,var(--yellow),var(--yellow) 8px,#ffd966 8px,#ffd966 16px);
  padding:3px 10px; border:2px dashed #000; border-radius:6px}

/* section frame */
section{padding:64px 0; position:relative}
.eyebrow{font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--blue); font-size:13px}
.sec-title{font-size:clamp(32px,5vw,52px); -webkit-text-stroke:2px #000; text-shadow:4px 4px 0 #000; margin:6px 0 14px}
.sec-title .y{color:var(--yellow)} .sec-title .rd{color:var(--red)} .sec-title .wt{color:#fff} .sec-title .p{color:var(--pink)} .sec-title .bl{color:var(--blue)}
.lead{font-size:18px; max-width:720px; color:#e9e3ff}

/* hero */
.hero{padding:26px 0 34px}
.hero-img{width:100%; border-radius:18px; border:5px solid #000; box-shadow:0 14px 0 rgba(0,0,0,.45), 0 0 0 4px var(--yellow)}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:30px}
.hero-sub{text-align:center; margin-top:22px}
.hero-sub p{font-size:20px; font-weight:600}

/* live strip */
.strip{background:var(--pink); border-top:4px solid #000; border-bottom:4px solid #000;
  font-family:var(--disp); color:#fff; -webkit-text-stroke:.5px #000; text-align:center; padding:14px 12px; font-size:clamp(16px,2.6vw,24px)}
.strip .y{color:var(--yellow)}

/* hosts */
.hosts{display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:center}
.hosts img,.hosts video{width:100%; display:block; border-radius:16px; border:5px solid #000; box-shadow:6px 6px 0 #000; transform:rotate(-2deg)}
@media(max-width:780px){.hosts{grid-template-columns:1fr; gap:24px}.hosts img,.hosts video{max-width:300px; margin:0 auto; display:block}}

/* day grid */
.days{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:34px}
@media(max-width:780px){.days{grid-template-columns:1fr}}
.day{background:var(--panel); border:4px solid #000; border-radius:18px; overflow:hidden;
  box-shadow:6px 6px 0 #000; transition:.15s; display:flex; flex-direction:column}
.day:hover{transform:translate(-3px,-3px); box-shadow:9px 9px 0 #000}
.day img{width:100%; display:block; border-bottom:4px solid #000}
.day-body{padding:18px 20px 22px}
.day-body h3{font-size:24px; color:var(--yellow); -webkit-text-stroke:1px #000; text-shadow:2px 2px 0 #000}
.day-body p{margin-top:8px; color:#e9e3ff}
.chips{margin-top:12px; display:flex; flex-wrap:wrap; gap:7px}
.chip{font-size:12px; font-weight:700; background:var(--panel2); border:2px solid var(--line); border-radius:30px; padding:4px 11px}

/* horizon cards */
.horizon{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:30px}
@media(max-width:780px){.horizon{grid-template-columns:1fr}}
.tba{background:transparent; border:3px dashed var(--blue); border-radius:18px; padding:26px 22px; text-align:center}
.tba h3{font-size:22px; color:var(--blue)} .tba p{margin-top:8px; color:#cfc8ff; font-size:15px}
.collect{background:linear-gradient(160deg,var(--purple),#5a1fb0); border:4px solid #000; border-radius:18px;
  padding:26px 22px; box-shadow:6px 6px 0 #000; grid-column:span 1}
.collect h3{font-size:24px; color:var(--yellow); -webkit-text-stroke:1px #000; text-shadow:2px 2px 0 #000}
.collect p{margin-top:10px; color:#fff}

/* schedule */
.sched{margin-top:26px; display:flex; flex-direction:column; gap:12px}
.row{display:flex; align-items:center; gap:16px; background:var(--panel); border:3px solid #000;
  border-radius:14px; padding:14px 18px; box-shadow:4px 4px 0 #000}
.row .what{font-weight:700; font-size:22px; color:var(--yellow)}
.row .when{margin-left:auto; text-align:right; font-family:var(--disp); color:var(--blue); font-size:20px}
@media(max-width:560px){.row{flex-direction:column; align-items:stretch; gap:4px}.row .when{margin-left:0; font-size:18px}}

/* sold + testimonials */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:30px}
@media(max-width:780px){.cards3{grid-template-columns:1fr}}
.sold{background:var(--panel); border:4px solid #000; border-radius:16px; box-shadow:5px 5px 0 #000; overflow:hidden}
.sold .ph{height:150px; background:repeating-linear-gradient(135deg,#2a2070,#2a2070 14px,#241a66 14px,#241a66 28px);
  display:flex; align-items:center; justify-content:center; color:#9b8fe0; font-weight:700; border-bottom:4px solid #000}
.sold-body{padding:14px 16px}
.sold-body .name{font-weight:700}
.sold-body .price{font-family:var(--disp); color:var(--green); font-size:20px; margin-top:2px}
.sold-body .quip{color:#cfc8ff; font-size:14px; margin-top:6px}
.quote{background:var(--panel); border:4px solid #000; border-radius:16px; box-shadow:5px 5px 0 #000; padding:22px}
.quote p{font-size:17px} .quote .who{margin-top:12px; font-weight:700; color:var(--blue)}

/* faq */
.faq{margin-top:26px; max-width:840px}
.faq details{background:var(--panel); border:3px solid #000; border-radius:14px; box-shadow:4px 4px 0 #000;
  padding:4px 20px; margin-bottom:14px}
.faq summary{font-family:var(--disp); font-size:19px; color:var(--yellow); cursor:pointer; padding:14px 0; list-style:none; -webkit-text-stroke:.4px #000}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--pink)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 16px; color:#e9e3ff}

/* contact */
.email-link{font-family:var(--body); font-weight:600; font-size:19px; letter-spacing:.3px; -webkit-text-stroke:0; text-transform:none; overflow-wrap:anywhere}
@media(max-width:480px){.email-link{font-size:15px; padding:12px 16px}}
.contact-note{margin-top:18px; max-width:720px; color:#cfc8ff; font-size:15px}

/* footer */
footer{background:var(--panel); border-top:5px solid #000; margin-top:30px; padding:54px 0 30px; text-align:center}
.socials{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin:24px 0}
.soc{display:inline-flex; align-items:center; gap:10px; font-family:var(--disp); font-size:16px; padding:12px 22px; border-radius:50px; border:4px solid #000;
  box-shadow:4px 4px 0 #000; transition:.12s; -webkit-text-stroke:.3px #000}
.soc:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 #000}



.s-wn,.s-yt,.s-fb,.s-ig,.s-tt,.s-x{background:#fff; color:#1a1450; -webkit-text-stroke:0}
.s-x{color:#1a1450; justify-content:center; min-width:72px}
.soc-ic{height:26px; width:auto; display:block}
.foot-note{color:#9b8fe0; font-size:14px; margin-top:14px}

/* reveal */
.rv{opacity:0; transform:translateY(24px); animation:rise .7s ease forwards}
@keyframes rise{to{opacity:1; transform:none}}

/* ---- Theme-day page styles ---- */
:root{--accent:#ffc21e} /* default (yellow) for the home page; each theme-day page sets its own color on <body> */
.hero-img{box-shadow:0 14px 0 rgba(0,0,0,.45), 0 0 0 4px var(--accent)}
.next{display:inline-block;margin-top:20px;font-family:var(--disp);font-size:18px;background:#000;color:var(--accent);padding:9px 20px;border-radius:40px;border:3px solid var(--accent);-webkit-text-stroke:.3px #000}
.feat,.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
@media(max-width:780px){.feat,.steps{grid-template-columns:1fr}}
.fcard,.step{background:var(--panel);border:4px solid #000;border-radius:16px;box-shadow:5px 5px 0 #000;padding:22px}
.fcard h3{font-size:20px;color:var(--accent);-webkit-text-stroke:.5px #000}
.fcard p,.step p{margin-top:6px;color:#e9e3ff}
.step .n{font-family:var(--disp);font-size:34px;color:var(--accent);-webkit-text-stroke:1px #000}
.step h3{font-size:19px;margin-top:4px}
.pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.pill{font-family:var(--disp);font-size:15px;padding:10px 18px;border-radius:40px;background:var(--panel);border:4px solid #000;box-shadow:4px 4px 0 #000;transition:.12s;-webkit-text-stroke:.3px #000}
.pill:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000;color:var(--accent)}
.backbar{padding:14px 0}
.backbar a{font-weight:700;color:var(--accent)}

/* ---- Funny Bidness Auctions Theater (home page) ---- */
.thumbs{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:30px}
@media(max-width:700px){.thumbs{grid-template-columns:1fr}}
.thumb{margin:0}
.reel-screen{position:relative; display:block; width:100%; padding:0; cursor:pointer; border:4px solid #000; border-radius:16px;
  overflow:hidden; background:#0b0820; box-shadow:6px 6px 0 #000; transition:.15s; container-type:inline-size}
.reel-screen:hover{transform:translate(-3px,-3px); box-shadow:9px 9px 0 #000}
.reel-screen:focus-visible{outline:4px solid var(--blue); outline-offset:4px}
.reel-screen img{display:block; width:100%; height:auto; aspect-ratio:4/3}
/* text placed inside the blank screen of the theater artwork */
.thumb-screen{position:absolute; left:11.8%; top:29.9%; width:76.5%; height:52%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3cqw; padding:0 4cqw; text-align:center}
.thumb-title{font-family:var(--disp); font-size:6.4cqw; line-height:1.05; color:var(--yellow); -webkit-text-stroke:.25cqw #000; text-shadow:.5cqw .5cqw 0 #000}
.reel-play{width:11cqw; height:11cqw; border-radius:50%; background:var(--pink); border:.6cqw solid #000; box-shadow:.5cqw .5cqw 0 #000; position:relative; flex:none}
.reel-play::after{content:""; position:absolute; left:38%; top:26%; border-style:solid; border-width:2.4cqw 0 2.4cqw 3.8cqw; border-color:transparent transparent transparent #fff}
.reel-soon{font-family:var(--body); font-size:2.6cqw; font-weight:700; letter-spacing:.3cqw; text-transform:uppercase; color:#cfc8ff}
/* video pop-up player */
.vbox{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(5,3,20,.88)}
.vbox[hidden]{display:none}
.vbox-in{position:relative; width:min(960px,100%)}
.vbox-frame{aspect-ratio:16/9; background:#000; border:4px solid #000; border-radius:12px; overflow:hidden; box-shadow:0 0 0 4px var(--yellow)}
.vbox.vertical .vbox-in{width:min(calc((100vh - 140px) * 9 / 16), 100%)}
.vbox.vertical .vbox-frame{aspect-ratio:9/16}
.vbox-frame iframe,.vbox-frame video{width:100%; height:100%; border:0; display:block}
.vbox-alt{margin-top:12px; text-align:center}
.vbox-alt a{color:var(--yellow); font-weight:600; text-decoration:underline}
.vbox-close{position:absolute; top:-52px; right:0; font-family:var(--disp); font-size:16px; padding:8px 16px; border-radius:40px;
  background:var(--pink); color:#fff; border:3px solid #000; box-shadow:3px 3px 0 #000; cursor:pointer}