/* base.css — shared core theme consolidated */
:root{
  --bg:#0b0b0e; --panel:#111216; --panel-2:#0f1114; --text:#f5f5f7; --muted:#b7bcc6;
  --orange:#ff7a00; --border:rgba(255,255,255,0.08);
  --pillH:59px; --pillW:132px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--orange);text-decoration:none}
a:hover{opacity:.9}
.wrap{max-width:1560px;margin:0 auto;padding:10px 16px}
header{position:sticky;top:0;z-index:100;background:rgba(11,11,14,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand .badge{padding:10px 14px;border-radius:10px;background:linear-gradient(135deg,#7a1f1f,#4d1313);box-shadow:0 10px 30px rgba(0,0,0,.5);color:#fff;display:inline-block}
.badge .top{font:800 18px/1 Inter}
.badge .bottom{font-family:"Permanent Marker",cursive;font-size:14px;line-height:1;opacity:.95;transform:rotate(-6deg);margin-top:2px;background:#611717;padding:2px 6px;border-radius:6px;display:inline-block}
nav ul{display:flex;gap:10px;list-style:none;margin:0;padding:0;align-items:center}
.pill,.stack{min-width:var(--pillW); height:var(--pillH); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6px 10px; border:1px solid var(--border); border-radius:12px; background:#111216; font-weight:700; text-align:center;}
.pill .sub,.stack .tiny{font-family:"Permanent Marker",cursive; font-size:12px; line-height:1; margin-top:4px; background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.35)); -webkit-background-clip:text; background-clip:text; color:transparent}
.homebtn{min-width:calc(var(--pillW)*0.5)}
.homebtn svg{width:20px;height:20px;display:block}
.homebtn .label{font-size:12px;opacity:.85;margin-top:4px}
.stack[disabled]{color:var(--orange);cursor:not-allowed}
.subbar{position:sticky;top:calc(var(--pillH) + 20px);z-index:95;border-bottom:1px solid var(--border);background:#111216}
.subgrid{max-width:1560px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:12px;align-items:stretch;padding:8px 16px;transform:scale(0.85);transform-origin: top left;}
.controls{display:flex;gap:8px;align-items:center}
.controls button{border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);color:#fff;border-radius:10px;padding:8px 12px;font-weight:800;cursor:pointer;font-family:"Permanent Marker",cursive}
.controls button.icon{width:42px;height:36px;display:flex;align-items:center;justify-content:center;padding:0}
.wanted{padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(135deg,#7a1f1f,#4d1313);display:flex;flex-direction:column;justify-content:center}
.wanted .t{font-weight:800;margin-bottom:4px}
.wanted .n{font-size:12px;line-height:1.25}
/* v28 hero */
.hero{position:relative;margin-top:12px}
.hero .bg{position:relative;height:360px;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.hero .bg .slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:38px;text-shadow:0 2px 10px rgba(0,0,0,.5);opacity:0;transition:opacity .6s ease}
.hero .bg .slide.active{opacity:1}
.hero .bg .s1{background:linear-gradient(135deg,#0f2027,#203a43,#2c5364)}
.hero .bg .s2{background:linear-gradient(135deg,#3a1c71,#d76d77,#ffaf7b)}
.hero .bg .s3{background:linear-gradient(135deg,#232526,#414345)}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));border-radius:12px}
.hero .content{position:absolute;inset:0;display:flex;align-items:center;padding:18px}
.hero .panel{max-width:720px;background:rgba(17,18,22,.88);border:1px solid var(--border);border-radius:12px;padding:16px 18px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.hero h1{margin:0 0 6px 0;font-size:28px}
.hero p{margin:6px 0;color:#d6d9e0}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.hero .cta a{border:1px solid var(--border);background:#14171c;color:#fff;border-radius:10px;padding:8px 12px;font-weight:700}
.hero .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;font-family:"Permanent Marker",cursive}
.hero .badgepill{padding:6px 10px;border-radius:10px;background:linear-gradient(90deg,#ff4d2e,#2ec5ff);color:#fff;border:1px solid rgba(255,255,255,.25)}


main{max-width:1560px;margin:0 auto;padding:16px}

.lane{background:#121319;border:1px solid var(--border);border-radius:12px;padding:16px;margin-top:16px}

.cards{display:grid;gap:12px}

.cards.cols-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.cards.cols-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.card{background:#111216;border:1px solid var(--border);border-radius:12px;padding:16px}

.lane-sep{height:3px;border-radius:3px;margin:16px 0;background:linear-gradient(90deg,#ff4d2e,#2ec5ff)}

footer{margin:24px 0 60px;color:#9aa0aa;text-align:center}

.nav .stack.alltime .tiny{font-size:10px}

.brand .badge{position:relative}

.brand .badge .homeicon{position:absolute;top:6px;right:6px;width:16px;height:16px;opacity:.9}


/* Safe mobile adjustments (prevent overflow without changing desktop look) */
html, body { overflow-x: hidden; }
nav a, nav span { max-width: 100%; word-break: break-word; }

/* Wine red badge style (unified) */
.badge-wine{
  background: linear-gradient(135deg,#7a1f1f,#4d1313) !important;
  border-color: rgba(255,255,255,.25) !important;
  color: #fff !important;
}

/* global: 20% bigger + italic subtext */
.pill .sub, .stack .tiny{font-size:14.4px !important;font-style:italic !important}


/* Normalize hero pills */
.pill.badge-wine{
  font-weight: 700;
  padding: 8px 14px;
  line-height: 1;
  display: inline-block;
  border-radius: 12px;
  margin: 6px 0;
}


/* SlapBot signature line */
.slapbot-note{font-style:italic;background:linear-gradient(90deg,#ec4899,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.95}


/* Center + bold CTA pills */
.cta .pill {
  font-weight: 800 !important;
  text-align: center !important;
  justify-content: center !important;
}

/* Center + bold CTA pills (hero only) */
.cta .pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  text-align: center !important;
  width: auto;
}