:root{
  --bg:#0c0805; --bg-grad-1:#2a1405; --bg-grad-2:#1a0f06;
  --surface:rgba(255,255,255,.04); --surface-2:rgba(255,255,255,.065);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,160,80,.22);
  --fg:#fdf6f0; --fg-2:#c2b1a3; --fg-3:#83736a;
  --primary:#ff7a1a; --primary-2:#ff9d2e; --primary-3:#ff5e1f;
  --accent:#ffc24d;       /* warm amber highlight */
  --live:#ff2e57;
  --grad:linear-gradient(120deg,#ff7a1a 0%,#ff5e2e 55%,#ff8a3d 100%);
  --grad-soft:linear-gradient(120deg,rgba(255,122,26,.20),rgba(255,158,46,.12));
  --r:18px; --r-sm:12px; --r-lg:26px; --r-pill:999px;
  --maxw:1240px;
  --shadow:0 18px 50px -12px rgba(0,0,0,.6);
  --shadow-glow:0 12px 40px -8px rgba(255,122,26,.4);
  --bez:cubic-bezier(.16,1,.3,1);
  --font-title:'Outfit',system-ui,sans-serif; --font:'Plus Jakarta Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg); font-family:var(--font); line-height:1.5;
  min-height:100vh; position:relative; overflow-x:hidden;
}
/* Ambient brand glows */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 12% -8%, rgba(255,122,26,.16), transparent 60%),
    radial-gradient(55vw 55vw at 95% 0%, rgba(255,94,46,.12), transparent 58%),
    radial-gradient(50vw 40vw at 50% 120%, rgba(255,194,77,.06), transparent 60%);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:rgba(255,122,26,.35)}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:20px;
  padding:14px clamp(16px,4vw,44px);
  background:rgba(8,9,18,.7); backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px}
.brand span{
  font-family:var(--font-title); font-weight:800; font-size:25px; letter-spacing:-1px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand .live-dot{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 4px rgba(255,59,92,.18);animation:pulse 2s infinite}
.topnav{display:flex;gap:4px;margin-left:8px;flex:1;overflow-x:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav a{
  position:relative; padding:9px 15px; border-radius:var(--r-pill); color:var(--fg-2);
  font-weight:600; font-size:14px; white-space:nowrap; transition:.25s var(--bez);
}
.topnav a:hover{color:var(--fg)}
.topnav a.active{color:var(--fg); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line-2)}
.topbar-right{display:flex;gap:5px;align-items:center}
.lang{
  border:1px solid var(--line); color:var(--fg-2); border-radius:var(--r-pill);
  padding:7px 12px; font-weight:700; font-size:12px; transition:.2s var(--bez);
}
.lang:hover{color:var(--fg);border-color:var(--line-2)}
.lang.on{color:#0a0b14; background:var(--accent); border-color:transparent}

.view{max-width:var(--maxw);margin:0 auto;padding:clamp(20px,3vw,40px) clamp(16px,4vw,44px) 90px}
section{margin-bottom:48px}

/* ---------- Hero ---------- */
.hero{
  position:relative; padding:clamp(34px,6vw,72px) clamp(22px,4vw,52px);
  margin:8px 0 36px; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(135deg,rgba(255,122,26,.16),rgba(255,94,46,.08) 60%,transparent);
  border:1px solid var(--line);
}
.hero::after{
  content:""; position:absolute; right:-80px; top:-80px; width:340px; height:340px;
  background:radial-gradient(circle,rgba(255,122,26,.4),transparent 60%); filter:blur(30px); pointer-events:none;
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; color:var(--fg-2);
  background:var(--surface); border:1px solid var(--line); padding:7px 13px; border-radius:var(--r-pill); margin-bottom:18px;
}
.hero .eyebrow .d{width:7px;height:7px;border-radius:50%;background:var(--live);animation:pulse 2s infinite}
.hero h1{
  font-family:var(--font-title); font-weight:800; letter-spacing:-1.5px; line-height:1.02;
  font-size:clamp(34px,6.5vw,68px);
}
.hero h1 .amp{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{color:var(--fg-2); margin-top:14px; font-size:clamp(15px,2vw,19px); max-width:600px}
.hero.sm{padding:clamp(22px,3vw,38px) clamp(20px,3vw,40px)}
.hero.sm h1{font-size:clamp(26px,4vw,40px)}

/* ---------- Section header ---------- */
.section-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px}
.section-head h2{
  font-family:var(--font-title); font-size:22px; font-weight:700; letter-spacing:-.5px;
  display:flex; align-items:center; gap:11px;
}
.section-head h2::before{content:"";width:4px;height:20px;border-radius:3px;background:var(--grad)}
.see-all{color:var(--fg-2);font-size:13.5px;font-weight:600;transition:.2s var(--bez)}
.see-all:hover{color:var(--primary)}

/* ---------- Chips ---------- */
.chips{display:flex;gap:9px;overflow-x:auto;padding:2px 0 24px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  padding:9px 16px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line);
  color:var(--fg-2); font-size:13.5px; font-weight:600; white-space:nowrap; transition:.25s var(--bez);
}
.chip:hover{color:var(--fg); border-color:transparent; background:var(--grad-soft); transform:translateY(-2px)}

/* ---------- Grid + cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.card{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:transform .35s var(--bez),border-color .35s var(--bez),box-shadow .35s var(--bez);
}
.card:hover{transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow)}
.card-media{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#161a2b,#0e1120);overflow:hidden}
.card-media.square{aspect-ratio:1/1}
.card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,8,16,.55),transparent 45%);opacity:.9}
.cover{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--bez)}
.card:hover .cover{transform:scale(1.06)}
.img-fallback{width:100%;height:100%;display:grid;place-items:center;color:var(--fg-3);background:linear-gradient(135deg,#161a2b,#0e1120)}
.card-body{padding:13px 14px 15px}
.card-title{font-size:15px;font-weight:700;line-height:1.3;letter-spacing:-.2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.card-meta{display:flex;align-items:center;gap:6px;color:var(--fg-2);font-size:12.5px;margin-top:6px}
.card-meta .seller{color:var(--fg);font-weight:600}
.dot{color:var(--fg-3)}
.card-when{color:var(--fg-2);font-size:12px;margin-top:9px;display:flex;align-items:center;gap:6px}
.price{
  font-weight:800;font-size:16.5px;margin-top:10px;letter-spacing:-.3px;
  color:var(--accent);
}
/* play affordance on live stream cards */
.stream-card .card-media .play{
  position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;background:rgba(10,11,20,.55);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25);opacity:0;transform:scale(.8);transition:.3s var(--bez);z-index:2;
}
.stream-card:hover .card-media .play{opacity:1;transform:scale(1)}
.stream-card .card-media .play svg{width:22px;height:22px;margin-left:3px;fill:#fff}

/* Badges */
.badge{position:absolute;top:11px;left:11px;font-size:11px;font-weight:800;padding:5px 10px;border-radius:var(--r-pill);letter-spacing:.4px;z-index:2;display:inline-flex;align-items:center;gap:5px}
.badge.live{background:var(--live);color:#fff;box-shadow:0 4px 14px rgba(255,59,92,.45)}
.badge.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
.badge.soon{background:rgba(10,11,20,.6);color:#fff;backdrop-filter:blur(8px);border:1px solid var(--line-2)}
.badge.ended{background:rgba(0,0,0,.6);color:var(--fg-2)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.viewers{position:absolute;top:11px;right:11px;background:rgba(10,11,20,.6);color:#fff;font-size:12px;font-weight:700;padding:5px 10px;border-radius:var(--r-pill);backdrop-filter:blur(8px);z-index:2;border:1px solid var(--line)}
.viewers.solid{position:static;background:var(--surface-2)}

/* ---------- Skeleton ---------- */
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.sk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sk .sk-media{aspect-ratio:16/10}
.sk .sk-line{height:13px;margin:13px 14px 0;border-radius:6px}
.sk .sk-line.sm{width:55%}
.shimmer{position:relative;overflow:hidden;background:rgba(255,255,255,.05)}
.shimmer::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ---------- States ---------- */
.state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:60px 20px;color:var(--fg-2)}
.state h3{color:var(--fg);font-family:var(--font-title);font-size:19px;letter-spacing:-.3px}
.state p{max-width:380px;font-size:14px}
.state-icon{font-size:30px;width:72px;height:72px;display:grid;place-items:center;border-radius:50%;background:var(--grad-soft);border:1px solid var(--line)}
.spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--primary);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Buttons ---------- */
.btn{background:var(--surface-2);border:1px solid var(--line-2);color:var(--fg);border-radius:var(--r-pill);padding:11px 22px;font-weight:700;font-size:14px;transition:.25s var(--bez)}
.btn:hover{transform:translateY(-2px);border-color:var(--primary)}
.btn.primary{background:var(--grad);border:none;color:#fff;box-shadow:var(--shadow-glow)}
.btn.primary:hover{filter:brightness(1.08)}

/* ---------- Watch ---------- */
.watch{display:grid;grid-template-columns:1.7fr 1fr;gap:28px;align-items:start;padding-top:6px}
.player{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.lk-video{width:100%;height:100%;object-fit:contain;background:#000}
.player-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--fg-2);text-align:center;padding:20px;background:radial-gradient(circle at 50% 40%,rgba(255,122,26,.12),transparent 60%)}
.player-overlay h3{color:var(--fg);font-family:var(--font-title);font-size:20px}
.watch-top{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.watch-top .badge{position:static}
.watch-info h1{font-family:var(--font-title);font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.6px}
.watch-seller{display:flex;align-items:center;gap:10px;color:var(--fg-2);margin-top:14px;font-weight:600}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--grad);font-size:15px}
.watch-desc{color:var(--fg-2);margin-top:16px;line-height:1.65;font-size:14.5px}
.cta-box{margin-top:20px;padding:18px;background:var(--grad-soft);border:1px solid var(--line);border-radius:var(--r)}
.cta-box p{color:var(--fg);font-size:13.5px;margin-bottom:13px;font-weight:600}
.store-ctas{display:flex;gap:10px;flex-wrap:wrap}
.store-btn{flex:1;min-width:130px;text-align:center;padding:12px 14px;border-radius:var(--r-sm);font-weight:700;background:rgba(10,11,20,.4);border:1px solid var(--line-2);color:var(--fg);transition:.25s var(--bez)}
.store-btn:hover{border-color:var(--primary);transform:translateY(-2px)}
.lot{display:flex;gap:13px;margin-top:18px;padding:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.lot-media{width:78px;height:78px;border-radius:var(--r-sm);overflow:hidden;flex:none;background:var(--bg)}
.lot-tag{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--primary-2)}
.lot-body h4{font-size:15px;margin:4px 0;letter-spacing:-.2px}

/* ---------- Detail ---------- */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;padding-top:8px}
.detail-media .big{aspect-ratio:1/1;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow)}
.thumbs{display:flex;gap:9px;margin-top:11px;overflow-x:auto}
.thumb{width:68px;height:68px;border-radius:var(--r-sm);overflow:hidden;flex:none;border:1px solid var(--line);background:var(--bg)}
.detail-body h1{font-family:var(--font-title);font-size:28px;font-weight:800;letter-spacing:-.6px}
.price.big{font-size:30px;margin:12px 0}

/* ---------- Menu ---------- */
.menu-list{display:flex;flex-direction:column;gap:13px}
.menu-item{display:flex;gap:15px;padding:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);transition:.25s var(--bez)}
.menu-item:hover{border-color:var(--line-2)}
.menu-item.off{opacity:.5}
.menu-media{width:88px;height:88px;border-radius:var(--r-sm);overflow:hidden;flex:none;background:var(--bg)}
.menu-body{flex:1}
.menu-body h4{font-size:16px;letter-spacing:-.2px}
.menu-body p{color:var(--fg-2);font-size:13px;margin:5px 0;line-height:1.5}

/* ---------- Reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:13px}
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.review .r-top{font-weight:800;color:var(--accent);margin-bottom:7px}
.review p{color:var(--fg-2);font-size:13.5px;line-height:1.55}

/* ---------- Footer ---------- */
.footer{max-width:var(--maxw);margin:0 auto;padding:30px clamp(16px,4vw,44px);display:flex;justify-content:space-between;align-items:center;color:var(--fg-3);border-top:1px solid var(--line);font-size:13px}
.footer a:hover{color:var(--fg)}

/* ---------- Landing chooser ---------- */
body.landing .topbar,body.landing .footer{display:none}
body.landing .view{max-width:none;margin:0;padding:0}
.chooser{min-height:100vh;display:flex;flex-direction:column}
.chooser-head{display:flex;justify-content:center;align-items:center;gap:9px;padding:30px 20px 6px}
.chooser-head .brand span{font-family:var(--font-title);font-weight:800;font-size:30px;letter-spacing:-1px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.chooser-sub{text-align:center;color:var(--fg-2);font-size:15px;margin-bottom:18px;padding:0 20px}
.chooser-panes{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 clamp(16px,4vw,44px) 44px;max-width:1240px;width:100%;margin:0 auto}
.pane{
  position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:min(72vh,640px);
  padding:38px;cursor:pointer;transition:transform .4s var(--bez),border-color .4s var(--bez),box-shadow .4s var(--bez);
}
.pane:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--shadow)}
.pane::before{content:"";position:absolute;inset:0;z-index:0;transition:transform .5s var(--bez)}
.pane:hover::before{transform:scale(1.05)}
.pane.bidda::before{background:radial-gradient(120% 120% at 30% 20%,rgba(255,122,26,.32),transparent 55%),linear-gradient(160deg,#1c0f06,#0c0805)}
.pane.food::before{background:radial-gradient(120% 120% at 70% 20%,rgba(255,94,46,.3),transparent 55%),linear-gradient(160deg,#1f0d06,#0c0805)}
.pane>*{position:relative;z-index:1}
.pane .p-icon{font-size:40px;margin-bottom:auto}
.pane .p-tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--primary-2);margin-bottom:10px}
.pane h2{font-family:var(--font-title);font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-1px;line-height:1.05}
.pane p{color:var(--fg-2);margin-top:12px;font-size:15px;max-width:380px;line-height:1.6}
.pane .enter{margin-top:22px;display:inline-flex;align-items:center;gap:9px;font-weight:800;color:#fff;background:var(--grad);padding:13px 24px;border-radius:var(--r-pill);box-shadow:var(--shadow-glow);width:max-content;transition:.25s var(--bez)}
.pane:hover .enter{gap:14px}
.chooser-foot{text-align:center;color:var(--fg-3);font-size:12.5px;padding:0 20px 26px}
.mode-pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--primary-2);background:var(--grad-soft);border:1px solid var(--line);padding:5px 11px;border-radius:var(--r-pill)}

@media (max-width:860px){
  .watch{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr}
  .chooser-panes{grid-template-columns:1fr}
  .pane{min-height:46vh}
}
@media (max-width:520px){
  .grid,.sk-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px}
  .card-title{font-size:14px}
  .topbar{gap:12px}
}