/* ─────────────────────────────────────────────
   WCINU — Shared Chalkboard Brand Chassis
   Brand variables + universal components.
   Page-specific styles live inline per page.
   ───────────────────────────────────────────── */

:root{
  --chalk-bg:#1c3d27;
  --chalk-bg-2:#163322;
  --chalk-bg-3:#0d2014;
  --chalk-white:#f7f3e9;
  --chalk-cream:#f0e6c8;
  --chalk-dim:#a4b6a9;
  --chalk-dim-2:#7a8d7f;
  --chalk-yellow:#f2c94c;
  --chalk-amber:#e89b2c;
  --chalk-pink:#f08aa8;
  --chalk-red:#e25656;
  --chalk-green:#5dc77a;
  --board-edge:#0a1b11;
  --r-card:8px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{
  background:var(--board-edge);
  color:var(--chalk-white);
  font-family:'Inter', system-ui, sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  letter-spacing:0.005em;
  overflow-x:hidden;
}
body{
  background:
    radial-gradient(ellipse 1200px 600px at 18% 6%, rgba(247,243,233,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 1400px 800px at 82% 96%, rgba(247,243,233,0.045) 0%, transparent 60%),
    radial-gradient(ellipse 900px 500px at 50% 50%, rgba(247,243,233,0.02) 0%, transparent 70%),
    repeating-linear-gradient(118deg, rgba(247,243,233,0.011) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--chalk-bg) 0%, var(--chalk-bg-2) 60%, var(--chalk-bg-3) 100%);
  background-attachment:fixed;
  min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence baseFrequency='0.78' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 0.91  0 0 0 0.12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:260px 260px;
  opacity:0.50;
  mix-blend-mode:overlay;
}
body > *{position:relative; z-index:1;}

.container{max-width:1760px; margin:0 auto; padding:0 32px;}

/* ── Type helpers ── */
.script{ font-family:'Permanent Marker', cursive; font-weight:400; letter-spacing:0.02em;}
.caveat{ font-family:'Caveat', cursive; font-weight:700;}

a{ color:inherit; text-decoration:none;}

/* ── Chalk-edge card ── */
.chalk-edge{
  border:1.5px solid rgba(247,243,233,0.40);
  border-radius:var(--r-card);
  background:linear-gradient(180deg, rgba(247,243,233,0.025), rgba(247,243,233,0.005) 60%, rgba(0,0,0,0.12) 100%);
  box-shadow:inset 0 0 0 1px rgba(247,243,233,0.05), 4px 4px 0 var(--board-edge), 0 12px 28px rgba(0,0,0,0.35);
  position:relative;
}
.chalk-edge.tilted-left{ transform:rotate(-0.5deg);}
.chalk-edge.tilted-right{ transform:rotate(0.5deg);}

/* ── Chalk arrow icon ── */
.chalk-arrow{ display:inline-block; vertical-align:middle; position:relative; width:36px; height:14px;}
.chalk-arrow::before{ content:""; position:absolute; left:0; top:50%; width:100%; height:1.8px; background:var(--chalk-white); transform:translateY(-50%);}
.chalk-arrow::after{ content:""; position:absolute; right:-2px; top:50%; width:0; height:0; border-left:10px solid var(--chalk-white); border-top:6px solid transparent; border-bottom:6px solid transparent; transform:translateY(-50%);}
.chalk-arrow.sm{ width:24px; height:10px;}
.chalk-arrow.sm::after{ border-left:7px solid var(--chalk-white); border-top:4px solid transparent; border-bottom:4px solid transparent;}

/* ── Wordmark ── */
.wordmark{display:inline-flex; align-items:center; gap:10px;}
.wordmark .mark{ font-family:'Permanent Marker', cursive; font-size:26px; line-height:1; letter-spacing:0.03em; color:var(--chalk-white);}
.wordmark .mark .dot{ color:var(--chalk-yellow);}
.wordmark.lg .mark{ font-size:42px;}

/* ── Buttons ── */
.btn{padding:11px 18px; border-radius:6px; font-weight:800; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; border:none; font-family:'Inter', sans-serif;}
.btn-bot{ background:var(--chalk-yellow); color:#0d2014; box-shadow:3px 3px 0 var(--board-edge);}
.btn-wallet{background:transparent; color:var(--chalk-white); border:1.5px solid rgba(247,243,233,0.50);}
.btn-ghost{background:transparent; color:var(--chalk-dim); border:1px dashed rgba(247,243,233,0.30); font-weight:700;}
.btn-pri-lg{ padding:18px 32px; font-size:14px;}
.btn-sec-lg{ padding:17px 30px; font-size:13px;}

/* ── Nav ── */
.nav{
  padding:16px 0;
  border-bottom:1px dashed rgba(247,243,233,0.22);
  background:rgba(13,32,20,0.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  position:sticky; top:0; left:0; right:0; z-index:30;
  width:100%;
}
.nav-inner{display:flex; align-items:center; gap:32px;}
.nav-links{display:flex; gap:4px; margin-left:16px;}
.nav-links a{padding:8px 13px; border-radius:5px; color:var(--chalk-dim); font-size:13px; font-weight:700; letter-spacing:0.02em;}
.nav-links a:hover, .nav-links a.active{color:var(--chalk-white); background:rgba(247,243,233,0.07);}
.nav-links a.live::after{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--chalk-red); margin-left:7px; box-shadow:0 0 6px var(--chalk-red); animation:livepulse 1.5s ease-in-out infinite;}
.nav-links .nav-sep{display:inline-block; width:1px; height:14px; margin:0 6px; background:rgba(247,243,233,0.22); align-self:center; font-size:0; line-height:0; overflow:hidden; color:transparent;}
.nav-links a.nav-mkt{ font-size:11.5px; padding:7px 7px; color:var(--chalk-dim-2); font-style:italic; letter-spacing:0.03em;}
.nav-links a.nav-mkt:hover, .nav-links a.nav-mkt.active{ color:var(--chalk-yellow); background:rgba(242,201,76,0.06); font-style:normal;}
@keyframes livepulse{0%,100%{opacity:1;} 50%{opacity:0.4;}}
.nav-cta{margin-left:auto; display:flex; gap:10px; align-items:center;}
.nav-cta .cta-wallet{ display:none;} /* wallet-connect.js handles connect/disconnect via #nav-wallet-btn */

/* Hamburger menu (mobile only) */
.nav-hamburger{
  display:none; background:none; border:none; cursor:pointer; padding:12px;
  flex-direction:column; gap:5px; z-index:50; position:relative;
  -webkit-tap-highlight-color:rgba(242,201,76,0.2);
}
.nav-hamburger span{
  display:block; width:22px; height:2px; background:var(--chalk-white);
  border-radius:1px; transition:all 0.25s; transform-origin:center;
}
.nav-links.open{
  display:flex !important; flex-direction:column; position:fixed;
  top:0; left:0; right:0; height:100vh; height:100dvh;
  background:rgba(13,32,20,0.98);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  padding:80px 24px 24px; gap:4px; z-index:40;
  overflow-y:auto;
}
.nav-links.open a{
  padding:14px 0; font-size:18px; color:var(--chalk-white);
  border-bottom:1px dashed rgba(247,243,233,0.12);
  font-family:'Permanent Marker', cursive; letter-spacing:0.02em;
}
.nav-links.open a:last-child{ border-bottom:none;}
.nav-links.open a.nav-auth-only{ display:block !important;}

/* ── Section frame ── */
.section{ padding:72px 0;}
.section.tight{ padding:48px 0;}
.sec-head{ display:flex; align-items:end; justify-content:space-between; margin-bottom:36px; gap:24px;}
.sec-head .eyebrow{ font-family:'Inter', sans-serif; font-size:11.5px; font-weight:800; color:var(--chalk-cream); opacity:0.8; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:8px;}
.sec-head h2{ font-family:'Bebas Neue', sans-serif; font-size:54px; line-height:0.98; color:var(--chalk-white); letter-spacing:0.02em; font-weight:400;}
.sec-head h2 .accent{ font-family:'Permanent Marker', cursive; color:var(--chalk-yellow); font-size:0.92em; letter-spacing:0.005em; padding-left:4px;}
.sec-head .sub{ color:var(--chalk-dim); font-size:14px; font-style:italic; margin-top:8px; max-width:540px; line-height:1.5;}
.sec-head .more{ color:var(--chalk-white); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; display:flex; align-items:center; gap:8px; white-space:nowrap;}
.sec-head .more:hover{ color:var(--chalk-yellow);}

/* ── Page header (h1 + subtitle for subpages) ── */
.page-head{ padding:56px 0 32px;}
.page-head .eyebrow{ font-family:'Inter', sans-serif; font-size:11.5px; font-weight:800; color:var(--chalk-cream); opacity:0.8; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:14px; display:inline-flex; align-items:center; gap:10px;}
.page-head h1{ font-family:'Bebas Neue', sans-serif; font-size:84px; line-height:0.95; letter-spacing:0.02em; color:var(--chalk-white); font-weight:400;}
.page-head h1 .accent{ font-family:'Permanent Marker', cursive; color:var(--chalk-yellow); font-size:0.82em; letter-spacing:0.005em; padding-left:6px;}
.page-head .lede{ color:var(--chalk-cream); font-size:17px; line-height:1.55; max-width:660px; margin-top:18px;}
.page-head .lede strong{ color:var(--chalk-white);}

/* ── Tag/Pill component ── */
.chalk-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  border:1.5px dashed rgba(247,243,233,0.32);
  font-family:'Inter', sans-serif; font-size:11px; font-weight:800;
  color:var(--chalk-white); letter-spacing:0.08em;
}
.chalk-pill.yellow{ border-color:rgba(242,201,76,0.55); color:var(--chalk-yellow);}
.chalk-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--chalk-green); box-shadow:0 0 8px var(--chalk-green); animation:livepulse 1.6s ease-in-out infinite;}

/* ── Community CTA (reused on token, portfolio, leaderboard) ── */
.community{ text-align:center; max-width:800px; margin:0 auto; padding:48px 0;}
.community h2{ font-family:'Bebas Neue', sans-serif; font-size:48px; line-height:0.98; margin-bottom:14px; color:var(--chalk-white); letter-spacing:0.02em; font-weight:400;}
.community h2 .accent{ font-family:'Permanent Marker', cursive; color:var(--chalk-yellow); font-size:0.92em; letter-spacing:0.005em; padding-left:4px;}
.community p{ color:var(--chalk-cream); font-size:15px; line-height:1.55; margin-bottom:24px;}
.community .links{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.community .pill{
  padding:10px 18px; border-radius:999px;
  border:1.5px solid rgba(247,243,233,0.35);
  color:var(--chalk-cream); font-weight:700; font-size:12px;
  letter-spacing:0.03em; white-space:nowrap;
}
.community .pill.primary{ background:var(--chalk-yellow); color:#0d2014; border-color:var(--chalk-yellow); box-shadow:3px 3px 0 var(--board-edge);}
.community .pill:hover{ background:rgba(247,243,233,0.08);}
.community .pill.primary:hover{ background:var(--chalk-amber);}

/* ── Pick of the Day (brand pattern — used on home + portfolio empty-state) ── */
.pick{ display:grid; grid-template-columns:1.45fr 1fr; gap:32px; align-items:stretch;}
.pick-art{
  position:relative; border-radius:14px; overflow:hidden;
  border:1.5px solid rgba(247,243,233,0.35);
  box-shadow:6px 6px 0 var(--board-edge), 0 18px 40px rgba(0,0,0,0.4);
  transform:rotate(-0.3deg);
}
.pick-art img{ display:block; width:100%; height:auto;}
.pick-art .stamp{
  position:absolute; bottom:18px; left:18px;
  padding:9px 14px;
  background:rgba(13,32,20,0.85);
  border:1.5px solid rgba(242,201,76,0.6);
  border-radius:6px;
  font-family:'Permanent Marker', cursive; font-size:13px;
  color:var(--chalk-yellow); letter-spacing:0.05em;
  display:flex; align-items:center; gap:10px;
}
.pick-card{
  padding:28px 28px 24px;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(242,201,76,0.05), rgba(247,243,233,0.01) 50%, rgba(0,0,0,0.10) 100%);
  border:1.5px solid rgba(242,201,76,0.45);
}
.pick-card .label{ font-family:'Inter', sans-serif; font-size:11px; font-weight:800; color:var(--chalk-cream); opacity:0.8; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:10px;}
.pick-card h3{ font-family:'Inter', sans-serif; font-size:22px; font-weight:800; line-height:1.25; color:var(--chalk-white); margin-bottom:14px;}
.pick-card .why{
  padding:12px 14px; margin-bottom:18px;
  background:rgba(242,201,76,0.06);
  border-left:3px solid var(--chalk-yellow);
  border-radius:0 4px 4px 0;
  font-size:13.5px; line-height:1.55; color:var(--chalk-cream); font-style:italic;
}
.pick-card .opts{ display:grid; grid-template-columns:1.6fr 1fr; gap:10px; margin-bottom:14px;}
.opt-big{
  padding:16px 18px; border-radius:6px; border:1.5px solid; text-align:left;
  font-family:'Inter', sans-serif;
}
.opt-big.yes{ background:rgba(93,199,122,0.13); border-color:rgba(93,199,122,0.55); color:var(--chalk-green);}
.opt-big.no { background:rgba(226,86,86,0.08);  border-color:rgba(226,86,86,0.45);  color:var(--chalk-red);}
.opt-big .l  { display:block; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.8; font-family:'Inter', sans-serif; font-weight:800;}
.opt-big .pct{ display:block; font-family:'JetBrains Mono', monospace; font-size:34px; font-weight:700; line-height:1; margin-top:4px;}
.opt-big .stk{ display:block; font-size:11px; font-family:'Inter', sans-serif; font-weight:700; color:var(--chalk-dim); margin-top:6px; letter-spacing:0.04em;}
.pick-card .meta-row{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:14px; border-top:1px dashed rgba(247,243,233,0.20);
  font-size:11.5px; color:var(--chalk-dim); letter-spacing:0.04em;
}
.pick-card .meta-row .pool{ color:var(--chalk-white); font-family:'JetBrains Mono', monospace; font-size:16px; font-weight:700;}
.pick-card .place{
  margin-top:14px; width:100%; padding:14px;
  background:var(--chalk-yellow); color:#0d2014;
  font-family:'Inter', sans-serif; font-weight:900; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  border:none; border-radius:6px; cursor:pointer; box-shadow:3px 3px 0 var(--board-edge);
}

/* ── Footer ── */
.footer{
  border-top:1px dashed rgba(247,243,233,0.22);
  padding:48px 0 24px;
  background:rgba(10,27,17,0.55);
  margin-top:48px;
}
.foot-row{ display:grid; grid-template-columns:auto 1fr auto; gap:36px; align-items:start;}
.foot-brand .tag{ display:block; font-size:11.5px; color:var(--chalk-dim); letter-spacing:0.18em; margin-top:8px;}
.foot-cols{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;}
.foot-col h5{ font-family:'Inter', sans-serif; font-size:12px; font-weight:800; color:var(--chalk-white); letter-spacing:0.10em; text-transform:uppercase; margin-bottom:10px;}
.foot-col a{ display:block; color:var(--chalk-dim); font-size:12.5px; padding:4px 0;}
.foot-col a:hover{ color:var(--chalk-white);}
.foot-disclaimer{
  margin-top:32px; padding-top:24px;
  border-top:1px dashed rgba(247,243,233,0.15);
  font-size:11.5px; color:var(--chalk-dim-2); line-height:1.6; max-width:1000px;
}

/* ── Mobile bottom nav ── */
.mobile-bottom-nav{
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  background:rgba(10,27,17,0.95);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(247,243,233,0.15);
  padding:8px 0 max(8px, env(safe-area-inset-bottom));
  justify-content:space-around;
}
.mobile-bottom-nav a{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--chalk-dim); font-size:10px; font-weight:700; text-decoration:none;
  padding:4px 8px;
}
.mobile-bottom-nav a:hover, .mobile-bottom-nav a.active{ color:var(--chalk-yellow);}
.mobile-bottom-nav .nav-icon{ font-size:18px; line-height:1;}

/* ── Activity Toasts ── */
.activity-toast-container{
  position:fixed; bottom:80px; left:20px; z-index:45;
  display:flex; flex-direction:column-reverse; gap:10px;
  pointer-events:none; max-width:380px;
}
.activity-toast{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:10px;
  background:rgba(13,32,20,0.92);
  border:1.5px solid rgba(247,243,233,0.25);
  border-left:3px solid var(--chalk-yellow);
  box-shadow:4px 4px 0 var(--board-edge), 0 8px 24px rgba(0,0,0,0.4);
  pointer-events:auto; cursor:pointer;
  animation:toastSlideIn 0.35s ease-out;
  backdrop-filter:blur(8px);
  transition:opacity 0.3s, transform 0.3s;
}
.activity-toast.hiding{
  opacity:0; transform:translateX(-20px);
}
.at-avatar{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background-size:cover; background-position:center top;
  border:1.5px solid rgba(247,243,233,0.35);
}
.at-body{ flex:1; min-width:0;}
.at-user{
  font-family:'Inter',sans-serif; font-size:12px; font-weight:800;
  color:var(--chalk-white); letter-spacing:0.02em;
}
.at-action{
  font-size:12px; color:var(--chalk-dim); line-height:1.4; margin-top:2px;
}
.at-action strong{ color:var(--chalk-yellow); font-weight:700;}
.at-action em{ color:var(--chalk-cream); font-style:normal;}
.at-close{
  color:var(--chalk-dim); font-size:18px; padding:4px;
  cursor:pointer; flex-shrink:0; line-height:1;
}
.at-close:hover{ color:var(--chalk-white);}
@keyframes toastSlideIn{
  from{ opacity:0; transform:translateX(-30px);}
  to{ opacity:1; transform:translateX(0);}
}

/* ── Responsive breakpoints for universal pieces ── */
@media (max-width: 1280px){
  .container{ padding:0 24px;}
  .sec-head h2{ font-size:44px;}
  .page-head h1{ font-size:64px;}
  .foot-row{ grid-template-columns:1fr; gap:32px;}
  .pick{ grid-template-columns:1fr; gap:24px;}
  .pick-card h3{ font-size:24px;}
  .pick-card .opts{ grid-template-columns:1fr;}
  .opt-big .pct{ font-size:32px;}
}

@media (max-width: 720px){
  .container{ padding:0 16px;}
  .nav{ padding:14px 0; width:100%; background:rgba(13,32,20,0.85);}
  .nav-inner{ gap:8px; flex-wrap:nowrap; justify-content:space-between; width:100%;}
  .nav-links{ display:none;}
  .nav-cta{ gap:6px; flex-shrink:0;}
  .nav-cta .btn-bot{ display:none;}
  .nav-cta .btn-wallet, .nav-cta .cta-wallet{ display:none;}
  .nav-cta #nav-wallet-btn{ display:block; max-width:120px; overflow:hidden;}
  .nav-cta #lang-select{ font-size:11px; padding:4px 2px;}
  .nav-hamburger{ display:flex; order:10; flex-shrink:0; z-index:50;}
  .wordmark{ flex-shrink:0;}
  .wordmark .mark{ font-size:20px;}
  .wordmark .chalk-arrow{ width:24px;}
  .mobile-bottom-nav{ display:flex;}
  body{ padding-bottom:64px;}
  .sec-head{ flex-direction:column; align-items:flex-start; gap:12px;}
  .sec-head h2{ font-size:36px;}
  .page-head{ padding:36px 0 24px;}
  .page-head h1{ font-size:46px;}
  .foot-cols{ grid-template-columns:repeat(2, 1fr);}
  .community .links{ flex-wrap:wrap;}
  .community .pill{ flex:1 1 auto; text-align:center; min-width:140px; min-height:44px; display:flex; align-items:center; justify-content:center;}
  .btn{ min-height:44px;}
  .mobile-bottom-nav a{ min-height:44px; min-width:44px; justify-content:center;}
  .activity-toast-container{ bottom:72px; left:12px; right:12px; max-width:none;}
}