/* 4thPeriod "Clay Brutal" (v35). Claymorphism (puffy rounded shapes, soft inner highlight/shade) crossed with
   Neo-Brutalism (thick ink outlines, hard offset shadows, loud flat color, chunky type). Loaded after glass.css on
   every page and re-points its tokens, so everything built on the glass tokens picks up the new look.
   No backdrop blur anywhere: it also makes the site way faster on Chromebooks. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@500;600;700&display=swap');

html:root{
  --cb-edge:#151318;--cb-ink:#151318;--cb-paper:#fff5e4;--cb-bw:2.5px;
  --cb-y:#ffd84d;--cb-p:#ff9bcf;--cb-g:#86e3ad;--cb-b:#8fb4ff;--cb-o:#ffad66;--cb-l:#c9b0ff;--cb-r:#ff6b6b;
  --cb-clay:inset 3px 4px 0 rgba(255,255,255,.75),inset -3px -5px 0 rgba(0,0,0,.08);
  --cb-sh:4px 4px 0 var(--cb-edge);--cb-sh-lg:7px 7px 0 var(--cb-edge);--cb-sh-sm:2.5px 2.5px 0 var(--cb-edge);
  --lg-tint:#ffffff;--lg-tint-2:#fbeed6;--lg-tint-3:#ffffff;--lg-blur:none;--lg-spec:none;
  --lg-rim:0 0 0 var(--cb-bw) var(--cb-edge),var(--cb-clay);
  --lg-drop:var(--cb-sh);
  --lg-accent:#3b5bff;--lg-accent-2:#8a4dff;
  --bg:var(--cb-paper);--surface:#ffffff;--surface-2:#fbeed6;--surface-3:#f5e2c0;--card:#ffffff;--on-card:var(--cb-ink);
  --ink:var(--cb-ink);--muted:#4b4552;--faint:#7c7484;--line:rgba(21,19,24,.2);
  --primary:var(--cb-ink);--on-primary:#fff;--primary-c:var(--cb-y);--on-primary-c:var(--cb-ink);
  --shadow-1:var(--cb-sh-sm);--shadow-2:var(--cb-sh);--shadow-3:var(--cb-sh-lg);
  --body:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Archivo Black','Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --lg-bg:radial-gradient(rgba(21,19,24,.14) 1.2px,transparent 1.6px) 0 0/22px 22px,var(--cb-paper);
}
html:root[data-theme=dark]{
  --cb-edge:#000;--cb-ink:#f7efe2;--cb-paper:#1a1720;
  --cb-clay:inset 3px 4px 0 rgba(255,255,255,.07),inset -3px -5px 0 rgba(0,0,0,.28);
  --lg-tint:#2c2733;--lg-tint-2:#231f29;--lg-tint-3:#37313f;--lg-accent:#7f97ff;
  --surface:#2c2733;--surface-2:#231f29;--surface-3:#3a3443;--card:#2c2733;--on-card:#f7efe2;
  --muted:#c0b6c8;--faint:#8f8697;--line:rgba(255,255,255,.14);--primary:#f7efe2;--on-primary:#151318;--on-primary-c:#151318;
  --lg-bg:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.6px) 0 0/22px 22px,var(--cb-paper);color-scheme:dark;
}
@media (prefers-color-scheme:dark){html:root:not([data-theme=light]){
  --cb-edge:#000;--cb-ink:#f7efe2;--cb-paper:#1a1720;
  --cb-clay:inset 3px 4px 0 rgba(255,255,255,.07),inset -3px -5px 0 rgba(0,0,0,.28);
  --lg-tint:#2c2733;--lg-tint-2:#231f29;--lg-tint-3:#37313f;--lg-accent:#7f97ff;
  --surface:#2c2733;--surface-2:#231f29;--surface-3:#3a3443;--card:#2c2733;--on-card:#f7efe2;
  --muted:#c0b6c8;--faint:#8f8697;--line:rgba(255,255,255,.14);--primary:#f7efe2;--on-primary:#151318;--on-primary-c:#151318;
  --lg-bg:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.6px) 0 0/22px 22px,var(--cb-paper);color-scheme:dark;
}}
html{background:var(--lg-bg)!important}
html:not(.walled) body::before{background:var(--lg-bg)!important;animation:none!important}
body{font-family:var(--body);letter-spacing:-.005em}
h1,h2,h3,.brand{font-family:var(--display);font-weight:400!important;letter-spacing:-.02em!important}
*,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ---- the material: white clay slabs with an ink outline and a hard shadow ---- */
.bar,.tabs,.card,.tile,.prow,.tp,.modal,.menu,.notice,.nudge,.panel,header .hd,.sc,.ach,.rep,.gate,#pill,#bar,.toast,.chat-glass,.posts > *,.inst,.cont,.pe-prev{
  background-color:var(--lg-tint)!important;background-image:none!important;box-shadow:var(--lg-rim),var(--lg-drop)!important;border-color:transparent!important}
.bar{background-color:var(--lg-tint)!important;border-radius:22px;margin:12px auto 0;width:min(1200px,calc(100% - 24px))}
.bar.scrolled{box-shadow:var(--lg-rim),var(--cb-sh-lg)!important}
.card{border-radius:26px}
.tile,.prow,.tp,.panel,.sc,.ach,.rep{border-radius:22px}
.modal,.gate{border-radius:28px;box-shadow:var(--lg-rim),var(--cb-sh-lg)!important;animation:cbPop .26s var(--ease-out) both}
@keyframes cbPop{from{opacity:0;transform:translateY(10px) scale(.96)}}
.menu{border-radius:20px;animation:cbPop .18s var(--ease-out) both}
.scrim{background:rgba(21,19,24,.5)!important}
.toast{background-color:var(--cb-y)!important;color:#151318!important;border-radius:16px!important}
.toast button{background:#151318!important;color:#fff!important}
.about{background:#151318!important;color:#fff7ea;box-shadow:0 0 0 var(--cb-bw) var(--cb-edge),var(--cb-sh-lg)!important}
.nudge{background-color:var(--cb-y)!important;color:#151318!important}

/* ---- buttons: chunky clay keys that physically press down ---- */
.btn,.chip .who,#bar .btn,.wm-btn{border-radius:14px!important;background-color:var(--lg-tint-3)!important;background-image:none!important;color:var(--ink)!important;font-weight:700!important;
  box-shadow:0 0 0 var(--cb-bw) var(--cb-edge),var(--cb-clay),var(--cb-sh-sm)!important;transition:transform .12s ease,box-shadow .12s ease,filter .2s!important}
@media (hover:hover) and (pointer:fine){.btn:hover,.chip .who:hover{transform:translate(-1px,-1px)!important;box-shadow:0 0 0 var(--cb-bw) var(--cb-edge),var(--cb-clay),4px 4px 0 var(--cb-edge)!important;filter:none!important}}
.btn:active,.chip .who:active{transform:translate(2.5px,2.5px)!important;box-shadow:0 0 0 var(--cb-bw) var(--cb-edge),var(--cb-clay)!important;transition-duration:60ms!important}
.btn.primary{background-color:var(--cb-y)!important;color:#151318!important}
.btn.dark{background-color:#151318!important;color:#fff7ea!important}
:root[data-theme=dark] .btn.dark{background-color:#f7efe2!important;color:#151318!important}
.btn.tonal{background-color:var(--cb-l)!important;color:#151318!important}
.btn.qcta{background-color:var(--cb-g)!important;color:#151318!important}
.btn[disabled]{opacity:.45}

/* ---- tabs + segmented controls ---- */
.tabs{border-radius:16px!important;padding:5px!important;background-color:var(--lg-tint-2)!important;box-shadow:0 0 0 var(--cb-bw) var(--cb-edge)!important}
.tabs a,.tabs button{border-radius:11px!important;font-weight:700!important;color:var(--muted)!important}
.tabs a[aria-current=true],.tabs button[aria-selected=true]{color:#151318!important}
.tabs .ind{background:var(--cb-y)!important;border-radius:11px!important;box-shadow:0 0 0 2px var(--cb-edge),var(--cb-clay)!important;top:5px}
.tabs button[aria-selected=true]{background:var(--cb-y)!important;box-shadow:0 0 0 2px var(--cb-edge)!important}
.seg button{border-radius:12px!important;background:var(--lg-tint-3)!important;box-shadow:0 0 0 2px var(--cb-edge)!important;font-weight:700}
.seg button[aria-pressed=true]{background:var(--cb-y)!important;color:#151318!important}
.gfilt button,.ch-sub button,.flt button,.cats button{border-radius:12px!important;box-shadow:0 0 0 2px var(--cb-edge)!important;font-weight:700!important}
.gfilt button[aria-pressed=true],.ch-sub button[aria-pressed=true]{background:var(--cb-p)!important;color:#151318!important;box-shadow:0 0 0 2px var(--cb-edge),var(--cb-sh-sm)!important}

/* ---- inputs ---- */
.field input,.field textarea,.field select,input[type=text],input[type=search],input[type=number],input[type=email],input[type=password],textarea,select{
  background:var(--lg-tint-3)!important;border:0!important;border-radius:14px!important;box-shadow:0 0 0 var(--cb-bw) var(--cb-edge),inset 2px 3px 0 rgba(0,0,0,.06)!important;color:var(--ink)}
.field input:focus,.field textarea:focus,input:focus,textarea:focus,select:focus{box-shadow:0 0 0 var(--cb-bw) var(--cb-edge),4px 4px 0 var(--lg-accent)!important;outline:none}
.modal .x{background:var(--lg-tint-3)!important;box-shadow:0 0 0 2px var(--cb-edge),var(--cb-sh-sm)!important;border-radius:12px!important}
:focus-visible{outline:3px solid var(--lg-accent)!important;outline-offset:3px}
.card .thumb{border-radius:18px!important;box-shadow:0 0 0 var(--cb-bw) var(--cb-edge)!important}
.tag{background:#151318!important;color:var(--cb-y)!important;border-radius:10px!important;box-shadow:2px 2px 0 var(--cb-y)}
.tiles .tile:nth-child(1){background-color:var(--cb-b)!important;color:#151318!important}
.tiles .tile:nth-child(2){background-color:var(--cb-g)!important;color:#151318!important}
.tiles .tile:nth-child(3){background-color:var(--cb-p)!important;color:#151318!important}
.tiles .tile:nth-child(4){background-color:var(--cb-o)!important;color:#151318!important}
.tiles .tile:nth-child(-n+4) span{color:#151318!important;opacity:.75}

/* ---- motion: things tilt like stickers ---- */
@media (hover:hover) and (pointer:fine){
  .card,.tile,.prow{transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)!important}
  .card:hover{transform:translate(-3px,-3px) rotate(-.6deg)!important;box-shadow:var(--lg-rim),9px 9px 0 var(--cb-edge)!important}
  .card:nth-child(even):hover{transform:translate(-3px,-3px) rotate(.6deg)!important}
}
.card:active{transform:translate(3px,3px)!important;box-shadow:var(--lg-rim),1px 1px 0 var(--cb-edge)!important}
.reveal:not(.in){filter:none!important}

/* ---- chat panel keeps its iMessage insides, gets the outline ---- */
.ch-panel{border-radius:26px!important;box-shadow:0 0 0 var(--cb-bw) var(--cb-edge),var(--cb-sh-lg)!important}
.ch-fab{background:var(--cb-y)!important;box-shadow:0 0 0 var(--cb-bw) var(--cb-edge),var(--cb-clay),var(--cb-sh)!important;color:#151318!important}
.ch-tabs{box-shadow:0 0 0 2px var(--cb-edge)!important;background:var(--lg-tint-2)!important}
.ch-tabs i{background:var(--cb-y)!important;box-shadow:0 0 0 2px var(--cb-edge)!important}
.ch-tabs button[aria-pressed=true]{color:#151318!important}
.ch-x,.ch-coins{box-shadow:0 0 0 2px var(--cb-edge)!important}

@media (prefers-contrast:more){:root{--cb-bw:3px}}
@media (prefers-reduced-motion:reduce){.card:hover,.card:nth-child(even):hover{transform:none!important}}
html.lite .card,html.lite .tile{transition-duration:.15s!important}

/* v36: motion tokens from the animate skill (strong ease-out, UI under 300ms), custom icon badges, phone tab bar */
html:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}
.btn .ic,.tabs .ic{width:1.15em;height:1.15em}
.bnav{display:none}
@media (max-width:700px){
  html.has-bnav body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .bnav{position:fixed;z-index:70;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:6px;border-radius:22px;
    background:var(--lg-tint);box-shadow:0 0 0 var(--cb-bw) var(--cb-edge),var(--cb-clay),var(--cb-sh)}
  .bnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border-radius:16px;text-decoration:none;color:var(--muted);font:700 11px var(--body);transition:transform .12s var(--ease-out),background-color .15s ease}
  .bnav a .ic{width:24px;height:24px}
  .bnav a[aria-current=page]{background:var(--cb-y);color:#151318;box-shadow:0 0 0 2px var(--cb-edge)}
  .bnav a:active{transform:scale(.94)}
  html.has-bnav .mobc,html.has-bnav .ch-fab{display:none!important}
}
@media (prefers-reduced-motion:reduce){.bnav a,.btn,.card,.b-tile{transition-duration:0s!important}.modal,.gate,.menu{animation-name:cbFade!important}}
@keyframes cbFade{from{opacity:0}}
.brand .mark{background:var(--cb-y)!important;color:#151318!important;border-radius:11px!important;box-shadow:0 0 0 2.5px var(--cb-edge),2.5px 2.5px 0 var(--cb-edge);font-family:var(--display);rotate:-6deg;transition:rotate .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.brand:hover .mark{rotate:4deg}}
@media (max-width:700px){html.has-bnav .bar a.btn:not(.primary){display:none!important}html.has-bnav .bar .bar-in{gap:6px!important}}