/* ============================================================
   RETRO — shared stylesheet
   Color Schemes 1–4 (Dark / Light / Red / Blue) as theme classes
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',-apple-system,'Segoe UI',Arial,sans-serif; background:var(--bg); color:var(--txt); }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
img { max-width:100%; display:block; }

/* ---------- Color Scheme 1 — DARK (default) ---------- */
.theme-1, :root {
  --bg:#161719; --side:#121315; --nav:#1a1b1e; --card:#1f2124; --card2:#26282c;
  --input:#161719; --thumb:#292b2f; --line:#2a2c30;
  --txt:#e6e7ea; --muted:#8f939c; --accent:#e2231a; --accent2:#5b7fb8; --good:#4caf6e;
  --logo:#e6e7ea;
  --banner:linear-gradient(120deg,#1f2124 0%,#2a2d33 50%,#1f2124 100%);
}
.theme-1 { --bg:#161719; }
/* ---------- Color Scheme 2 — LIGHT ---------- */
.theme-2 {
  --bg:#f6f7f8; --side:#ffffff; --nav:#ffffff; --card:#ffffff; --card2:#eef0f2;
  --input:#eef0f2; --thumb:#e4e7ea; --line:#e2e5e9;
  --txt:#22262e; --muted:#6b7180; --accent:#33569b; --accent2:#33569b; --good:#1e824c;
  --logo:#22262e;
  --banner:linear-gradient(120deg,#dfe3e9 0%,#eef1f5 50%,#dfe3e9 100%);
}
/* ---------- Color Scheme 3 — RED ---------- */
.theme-3 {
  --bg:#191113; --side:#140e10; --nav:#1e1416; --card:#241719; --card2:#2c1c1f;
  --input:#191113; --thumb:#31201f; --line:#332022;
  --txt:#ece0e1; --muted:#a08a8c; --accent:#a83240; --accent2:#a83240; --good:#4caf6e;
  --logo:#d8949c;
  --banner:linear-gradient(120deg,#3a161d 0%,#6b2430 50%,#3a161d 100%);
}
/* ---------- Color Scheme 4 — BLUE ---------- */
.theme-4 {
  --bg:#101720; --side:#0d131b; --nav:#131c28; --card:#18222f; --card2:#1e2a3a;
  --input:#101720; --thumb:#212e3f; --line:#243044;
  --txt:#dfe6ef; --muted:#8595ab; --accent:#3c6ea5; --accent2:#3c6ea5; --good:#4caf8e;
  --logo:#a9c2e0;
  --banner:linear-gradient(120deg,#182c45 0%,#2a4a73 50%,#182c45 100%);
}

/* ---------- Wordmark ---------- */
.wordmark { font-weight:900; letter-spacing:1px; font-size:22px; color:var(--logo); display:inline-flex; align-items:center; gap:2px; font-stretch:condensed; }
.wordmark .chip { background:var(--accent); color:#fff; padding:0 5px; margin:0 1px; transform:skewX(-8deg); border-radius:3px; display:inline-block; }

/* ---------- Retrobux pill ---------- */
.rbx { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:13.5px; background:var(--card); border:1px solid var(--line); padding:6px 12px; border-radius:20px; white-space:nowrap; }
.rbx .ric { width:19px; height:19px; border-radius:5px; background:var(--accent); color:#fff; font-weight:900; font-size:12px; display:inline-flex; align-items:center; justify-content:center; }

/* ---------- Buttons ---------- */
.btn { display:inline-block; padding:11px 24px; border-radius:24px; font-size:13.5px; font-weight:800; letter-spacing:.4px; border:none; text-align:center; }
.btn.primary { background:var(--accent); color:#fff; }
.btn.primary:hover { filter:brightness(1.12); }
.btn.ghost { background:var(--card); color:var(--txt); border:1px solid var(--line); }
.btn.ghost:hover { background:var(--card2); }
.btn.small { padding:7px 16px; font-size:12px; }
.btn.block { display:block; width:100%; }

/* ---------- Tags ---------- */
.tag { display:inline-block; font-size:10px; font-weight:800; letter-spacing:1px; padding:3px 8px; border-radius:4px; background:#e6a817; color:#211a02; vertical-align:middle; }
.tag.dev { background:#e6a817; color:#211a02; }
.tag.soon { background:var(--card2); color:var(--muted); border:1px solid var(--line); }
.ribbon { position:absolute; top:10px; left:-6px; background:#e6a817; color:#211a02; font-size:9.5px; font-weight:900; letter-spacing:1px; padding:3px 10px; border-radius:3px; box-shadow:0 2px 6px rgba(0,0,0,.3); z-index:2; }

/* ---------- Sticky header (signed-in) ---------- */
.site-header { position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:18px; padding:0 20px; height:60px; background:var(--nav); border-bottom:1px solid var(--line); }
.site-header nav.links { display:flex; gap:18px; }
.site-header nav.links a { color:var(--muted); font-weight:600; font-size:13.5px; }
.site-header nav.links a:hover, .site-header nav.links a.active { color:var(--txt); }
.site-header .search { flex:1; display:flex; justify-content:center; min-width:0; }
.site-header .search input { width:100%; max-width:420px; padding:9px 16px; border-radius:20px; border:1px solid var(--line); background:var(--input); color:var(--txt); font-size:13px; }
.site-header .hicons { display:flex; align-items:center; gap:14px; }
.site-header .hicon { width:34px; height:34px; border-radius:50%; background:var(--card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--muted); position:relative; }
.site-header .hicon .dot { position:absolute; top:2px; right:2px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.site-header .avatar-head { width:36px; height:36px; border-radius:50%; background:var(--thumb); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:var(--muted); border:2px solid var(--line); }
.getmore { font-size:11.5px; font-weight:800; color:var(--accent); margin-left:4px; }

/* ---------- Left icon rail ---------- */
.shell { display:flex; min-height:calc(100vh - 60px); }
.rail { width:210px; flex-shrink:0; background:var(--side); border-right:1px solid var(--line); padding:14px 8px; }
.rail a.ritem { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:8px; font-size:14px; font-weight:600; color:var(--muted); margin-bottom:2px; }
.rail a.ritem:hover { background:var(--card); color:var(--txt); }
.rail a.ritem.active { background:var(--card); color:var(--txt); box-shadow:inset 3px 0 0 var(--accent); }
.rail a.ritem .ic { width:20px; text-align:center; opacity:.85; }
.main-col { flex:1; min-width:0; }

/* ---------- Cards / carousels ---------- */
.microlabel { font-size:12.5px; font-weight:900; letter-spacing:1.6px; text-transform:uppercase; color:var(--txt); margin:26px 0 12px; display:flex; align-items:center; gap:10px; }
.microlabel .see { margin-left:auto; font-size:11.5px; color:var(--accent2); font-weight:700; letter-spacing:0; text-transform:none; }
.carousel { display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; }
.exp-card { flex:0 0 190px; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; position:relative; }
.exp-card .thumb { height:110px; background:var(--thumb); display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800; letter-spacing:1px; color:var(--muted); text-align:center; padding:0 8px; }
.exp-card .meta { padding:10px 12px 12px; }
.exp-card .ename { font-size:13.5px; font-weight:700; margin-bottom:4px; }
.exp-card .estats { font-size:11.5px; color:var(--muted); margin-bottom:9px; }
.exp-card .estats .live { color:var(--good); font-weight:700; }

/* ---------- Item grid (catalog) ---------- */
.item-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.item-card { background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; position:relative; }
.item-card .ithumb { aspect-ratio:1; background:var(--thumb); display:flex; align-items:center; justify-content:center; font-size:44px; color:var(--muted); opacity:.85; }
.item-card .imeta { padding:10px 12px 12px; }
.item-card .iname { font-size:13px; font-weight:700; margin-bottom:6px; }
.item-card .iprice { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:800; margin-bottom:10px; }
.item-card .iprice .ric { width:16px; height:16px; border-radius:4px; background:var(--accent); color:#fff; font-weight:900; font-size:10px; display:inline-flex; align-items:center; justify-content:center; }
.owned { display:inline-block; padding:7px 16px; border-radius:24px; font-size:12px; font-weight:800; background:var(--card2); color:var(--good); border:1px solid var(--line); }

/* ---------- Footer ---------- */
.site-footer { background:var(--side); border-top:1px solid var(--line); padding:40px 28px 24px; margin-top:40px; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; max-width:1200px; margin:0 auto; }
.foot-grid h4 { font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.foot-grid a { display:block; font-size:13px; color:var(--muted); margin-bottom:8px; }
.foot-grid a:hover { color:var(--txt); }
.foot-desc { font-size:12.5px; color:var(--muted); line-height:1.6; margin-top:10px; max-width:280px; }
.foot-legal { max-width:1200px; margin:28px auto 0; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:16px; align-items:center; font-size:12px; color:var(--muted); }
.foot-legal a { color:var(--txt); font-weight:600; }
.foot-fine { font-size:11px; color:var(--muted); margin-top:10px; max-width:1200px; margin-left:auto; margin-right:auto; line-height:1.6; }

/* ---------- Content wrappers ---------- */
.page-pad { padding:20px 28px 40px; max-width:1240px; margin:0 auto; }
.construction { background:var(--card); border:1px solid #e6a81755; border-left:4px solid #e6a817; padding:13px 18px; border-radius:8px; font-size:13.5px; font-weight:600; margin-bottom:20px; }

/* ---------- Legal pages ---------- */
.legal-wrap { max-width:820px; margin:0 auto; padding:36px 24px 60px; }
.legal-wrap h1 { font-size:30px; font-weight:900; margin-bottom:6px; }
.legal-wrap .updated { color:var(--muted); font-size:13px; margin-bottom:28px; }
.legal-wrap h2 { font-size:19px; font-weight:800; margin:30px 0 10px; }
.legal-wrap p, .legal-wrap li { font-size:14.5px; line-height:1.75; color:var(--txt); margin-bottom:12px; }
.legal-wrap ul { padding-left:22px; margin-bottom:12px; }
.legal-wrap a { color:var(--accent2); font-weight:600; }
.notice { background:var(--card); border:1px solid #e6a81755; border-left:4px solid #e6a817; padding:14px 18px; border-radius:8px; font-size:13.5px; margin-bottom:26px; line-height:1.6; }

/* ---------- Mobile ---------- */
.tabbar { display:none; }
@media (max-width: 860px) {
  .rail { display:none; }
  .site-header nav.links { display:none; }
  .site-header { gap:10px; padding:0 12px; }
  .foot-grid { grid-template-columns:1fr 1fr; }
  .tabbar { display:flex; position:fixed; bottom:0; left:0; right:0; background:var(--nav); border-top:1px solid var(--line); z-index:100; }
  .tabbar a { flex:1; text-align:center; padding:9px 0 10px; font-size:10px; font-weight:700; color:var(--muted); }
  .tabbar a.active { color:var(--accent); }
  .tabbar a .tic { display:block; font-size:18px; margin-bottom:2px; }
  body.has-tabbar { padding-bottom:64px; }
  .right-rail { display:none !important; }
}