/* CB Emote Atlas. Same tokens and components as the main site (utils/design.md). */
:root{
  --color-deep-iris:#26114a;
  --color-plum-velvet:#312749;
  --color-royal-amethyst:#3e0079;
  --color-mist-violet:#edecff;
  --color-lavender-glow:#b99aff;
  --color-violet-bright:#7d43ff;
  --color-canvas:#fff;
  --color-paper:#f6f7fa;
  --color-mist:#e6e2e3;
  --color-smoke:#c1c7cf;
  --color-ash:#9491a1;
  --color-slate:#615e6e;
  --gradient-twilight-beam:linear-gradient(to right,#cf8aff,#ff66c1,#ffad74,#aa81ff);
  --font-display:'Plus Jakarta Sans','Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-ui:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --radius:8px;
  --radius-large:24px;
  --radius-pill:1440px;
  --shadow-sm:rgba(18,55,105,.08) 0 2px 4px 0,rgba(18,55,105,.04) 0 1px 1px 0,rgba(18,55,105,.08) 0 0 0 1px;
  --shadow-sm-2:rgba(18,55,105,.08) 0 2px 4px 0,rgba(18,55,105,.04) 0 1px 1px 0;
  --shadow-lg:rgba(14,59,101,.06) 0 32px 24px -12px,rgba(14,59,101,.01) 0 11px 4px 0,rgba(14,59,101,.02) 0 6px 4px 0,rgba(14,59,101,.03) 0 3px 3px 0,rgba(14,59,101,.04) 0 1px 1px 0;
  --shimmer:linear-gradient(100deg,var(--color-paper) 20%,var(--color-mist) 38%,var(--color-paper) 56%);
  --page-max:1200px;
  color-scheme:light;
  color:var(--color-deep-iris);
  background:var(--color-canvas);
  font-family:var(--font-ui);
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;overflow-x:clip;background:var(--color-canvas);font-size:16px;line-height:1.5}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
::selection{background:var(--color-mist-violet);color:var(--color-deep-iris)}
:focus-visible{outline:2px solid var(--color-royal-amethyst);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1;letter-spacing:-.03em;color:var(--color-deep-iris)}

/* Scrollbar: thin lavender thumb on a paper track; Royal Amethyst on hover. */
html{scrollbar-width:thin;scrollbar-color:var(--color-lavender-glow) var(--color-paper)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--color-paper)}
::-webkit-scrollbar-thumb{background:var(--color-lavender-glow);border:3px solid var(--color-paper);border-radius:var(--radius-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--color-royal-amethyst)}
::-webkit-scrollbar-corner{background:var(--color-paper)}

/* ---------- Buttons ---------- */
.button-primary,.button-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--radius);border:1px solid var(--color-deep-iris);font:500 14px/1 var(--font-ui);transition:background .2s,border-color .2s}
.button-primary{background:var(--color-deep-iris);color:#fff;box-shadow:var(--shadow-sm-2)}
.button-primary:hover:not(:disabled){background:var(--color-royal-amethyst);border-color:var(--color-royal-amethyst)}
.button-ghost{background:var(--color-canvas);color:var(--color-deep-iris)}
.button-ghost:hover:not(:disabled){background:var(--color-mist-violet)}
.button-primary:disabled,.button-ghost:disabled{border-color:var(--color-smoke);background:var(--color-paper);color:var(--color-ash);box-shadow:none;cursor:not-allowed}
.text-link{padding:0;border:0;background:none;color:var(--color-royal-amethyst);font:500 14px/1.3 var(--font-ui);text-decoration:underline;text-decoration-color:var(--color-lavender-glow);text-underline-offset:4px}
.text-link:hover{text-decoration-color:var(--color-royal-amethyst)}

/* ---------- Floating navigation bar ---------- */
.site-header{position:sticky;top:16px;z-index:30;width:min(var(--page-max),calc(100% - 48px));height:64px;margin:16px auto 0;display:flex;align-items:center;gap:32px;padding:0 8px 0 20px;background:var(--color-canvas);border-radius:var(--radius);box-shadow:var(--shadow-lg),0 0 0 1px var(--color-mist)}
.wordmark{display:inline-flex;align-items:center;font:700 24px/1 var(--font-ui);letter-spacing:-.06em;color:var(--color-deep-iris);white-space:nowrap}
.wordmark span{color:var(--color-violet-bright)}
.logo-mark{display:block;width:32px;height:32px;flex:none;margin-right:8px}
.header-nav{display:flex;align-items:center;gap:4px;flex:1}
.header-nav a{padding:8px 16px;border-radius:var(--radius-pill);font:500 14px/1.3 var(--font-ui);color:var(--color-plum-velvet);transition:background .2s}
.header-nav a:hover{background:var(--color-mist-violet)}
.header-actions{display:flex;align-items:center;gap:16px;margin-left:auto}
.catalog-status{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:var(--radius-pill);background:var(--color-paper);font:500 12px/1.3 var(--font-ui);color:var(--color-slate);white-space:nowrap}
.catalog-status i,.eyebrow-dot{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:var(--color-violet-bright)}
.language-switch{display:flex;align-items:center;gap:2px;padding:2px;border-radius:var(--radius-pill);background:var(--color-paper)}
.language-switch a{padding:6px 10px;border-radius:var(--radius-pill);font:500 12px/1.3 var(--font-ui);color:var(--color-slate)}
.language-switch a:hover{color:var(--color-deep-iris)}
.language-switch a[aria-current]{background:var(--color-canvas);color:var(--color-deep-iris);box-shadow:var(--shadow-sm)}

/* ---------- Hero ---------- */
.hero{position:relative;margin-top:-80px;padding-top:80px;background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(185,154,255,.32),transparent 70%),linear-gradient(180deg,#fff 0%,var(--color-mist-violet) 100%)}
.hero-inner{max-width:1040px;margin:0 auto;padding:72px 24px 64px;text-align:center}
.eyebrow,.section-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;padding:4px 12px;border-radius:var(--radius-pill);background:var(--color-mist-violet);color:var(--color-royal-amethyst);font:500 12px/1.3 var(--font-ui);letter-spacing:.04em;text-transform:uppercase}
.hero .eyebrow{background:var(--color-canvas);box-shadow:var(--shadow-sm)}
.hero h1{margin:24px 0 16px;font-size:clamp(40px,5.4vw,64px);letter-spacing:-.045em}
.gradient-text{color:var(--color-royal-amethyst)}
.hero-copy{max-width:600px;margin:0 auto 32px;font-size:18px;line-height:1.5;color:var(--color-slate)}

/* Search: white input card on the lavender wash */
.hero-search-wrap{display:flex;align-items:center;gap:8px;max-width:760px;margin:0 auto}
.search-inline{display:flex;align-items:center;gap:12px;flex:1;min-width:0;height:56px;padding:0 16px;border-radius:var(--radius);background:var(--color-canvas);box-shadow:var(--shadow-lg),0 0 0 1px var(--color-mist);text-align:left;transition:box-shadow .2s}
.search-inline:focus-within{box-shadow:var(--shadow-lg),0 0 0 2px var(--color-royal-amethyst)}
.search-inline svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--color-ash);stroke-width:1.7}
.search-inline input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px;color:var(--color-deep-iris)}
.search-inline input::placeholder{color:var(--color-ash)}
.search-inline kbd{padding:2px 8px;border-radius:6px;background:var(--color-paper);box-shadow:0 0 0 1px var(--color-mist);font:500 12px/1.3 var(--font-ui);color:var(--color-ash)}
.toolbar-actions{flex:none}
.toolbar-actions .button-ghost{height:56px;padding-inline:20px;border-color:var(--color-canvas);box-shadow:var(--shadow-lg),0 0 0 1px var(--color-mist)}
.hero-hints{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:16px;font-size:14px;color:var(--color-slate)}

/* ---------- Catalog ---------- */
.catalog-section{max-width:calc(var(--page-max) + 48px);margin:0 auto;padding:64px 24px 80px}
.catalog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.catalog-head h2{margin:16px 0 8px;font-size:clamp(32px,3.6vw,40px)}
.section-copy{margin:0;font-size:16px;color:var(--color-slate)}
.catalog-count{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px;color:var(--color-ash)}
.catalog-count strong{font:500 32px/1 var(--font-display);letter-spacing:-.03em;color:var(--color-deep-iris);font-variant-numeric:tabular-nums}
.results-meta{display:flex;justify-content:space-between;gap:16px;padding:24px 0 16px;font-size:14px;color:var(--color-slate)}
#page-description{color:var(--color-ash);font-variant-numeric:tabular-nums}

.emote-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;min-height:170px}
.emote-card{display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden;border:0;border-radius:var(--radius);background:var(--color-canvas);box-shadow:0 0 0 1px var(--color-mist);text-align:left;color:inherit;transition:box-shadow .2s,transform .2s}
.emote-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 0 1px var(--color-lavender-glow)}
.thumb{position:relative;height:128px;display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden;background:var(--color-paper)}
.thumb img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.thumb-placeholder{position:absolute;inset:12px;border-radius:6px;background:var(--shimmer);background-size:220% 100%;animation:shimmer 1.4s ease-in-out infinite}
.thumb img.loaded+.thumb-placeholder{display:none}
.broken-image{font-size:12px;color:var(--color-ash);text-align:center}
.card-info{padding:12px;min-width:0}
.card-slug{display:block;overflow:hidden;font-size:14px;font-weight:500;color:var(--color-deep-iris);white-space:nowrap;text-overflow:ellipsis}
.card-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;margin-top:4px;font-size:12px;line-height:1.3;color:var(--color-ash);font-variant-numeric:tabular-nums}
.skeleton-card{pointer-events:none}
.skeleton-box{border-radius:4px;background:var(--shimmer);background-size:220% 100%;animation:shimmer 1.4s ease-in-out infinite}
.skeleton-line{height:10px;margin-bottom:8px}
.skeleton-line.short{width:54%}
.skeleton-line.long{width:90%}
@keyframes shimmer{to{background-position-x:-220%}}

.state-panel{margin-top:8px;padding:48px 24px;border-radius:var(--radius);background:var(--color-paper);text-align:center}
.state-panel h3{margin:8px 0 12px;font-size:24px}
.state-panel p{margin:0 0 24px;font-size:16px;color:var(--color-slate)}
.state-icon{font-size:40px;color:var(--color-lavender-glow)}
.pagination{display:flex;justify-content:center;align-items:center;gap:16px;padding-top:32px}
.pagination button{min-width:128px}
.pagination span{min-width:96px;font-size:14px;color:var(--color-slate);text-align:center;font-variant-numeric:tabular-nums}

/* ---------- About ---------- */
.about-section{max-width:var(--page-max);margin:0 auto 80px;padding:32px;display:grid;grid-template-columns:auto minmax(200px,1fr) minmax(240px,.7fr);align-items:center;gap:32px;border-radius:var(--radius);background:var(--color-canvas);box-shadow:var(--shadow-lg),0 0 0 1px var(--color-mist)}
.about-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius);background:var(--color-mist-violet);color:var(--color-royal-amethyst);font-size:20px}
.about-section h2{margin:16px 0 8px;font-size:24px}
.about-section p:not(.section-eyebrow){margin:0;font-size:14px;line-height:1.5;color:var(--color-slate)}
.about-stats{display:grid;gap:12px}
.about-stats div{display:flex;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--color-mist);font-size:14px}
.about-stats div:last-child{padding:0;border:0}
.about-stats span{color:var(--color-ash)}
.about-stats strong{font-weight:500;color:var(--color-deep-iris);text-align:right}

/* ---------- Footer ---------- */
.site-footer{padding:32px max(24px,calc((100% - var(--page-max))/2)) 24px;border-top:1px solid var(--color-mist)}
.footer-main{display:grid;grid-template-columns:200px minmax(180px,1fr) auto;align-items:center;gap:32px;padding-bottom:24px}
.footer-main .wordmark{font-size:20px}
.footer-main .logo-mark{width:24px;height:24px}
.footer-main p{margin:0;font-size:14px;color:var(--color-slate)}
.footer-main nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-main nav a,.footer-bottom a{font-size:14px;color:var(--color-slate)}
.footer-main nav a:hover,.footer-bottom a:hover{color:var(--color-royal-amethyst)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid var(--color-mist);font-size:12px;color:var(--color-ash)}

/* ---------- Detail dialog ---------- */
.detail-dialog{width:min(800px,calc(100% - 32px));max-height:min(85vh,800px);padding:0;border:0;border-radius:var(--radius-large);background:var(--color-canvas);color:var(--color-deep-iris);box-shadow:var(--shadow-lg),0 0 0 1px var(--color-mist);grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:auto}
.detail-dialog[open]{display:grid}
.detail-dialog::backdrop{background:rgba(38,17,74,.4);backdrop-filter:blur(4px)}
.dialog-close{position:absolute;top:16px;right:16px;z-index:2;width:40px;height:40px;border:0;border-radius:var(--radius);background:var(--color-canvas);box-shadow:var(--shadow-sm);font-size:24px;line-height:1;color:var(--color-deep-iris)}
.dialog-close:hover{background:var(--color-mist-violet)}
.detail-preview{min-height:360px;display:grid;place-items:center;padding:32px;background:var(--color-paper)}
.detail-preview img{display:block;width:auto;height:auto;max-width:100%;max-height:65vh;object-fit:contain}
.detail-skeleton{width:65%;height:220px;border-radius:var(--radius);background:var(--shimmer);background-size:220% 100%;animation:shimmer 1.4s ease-in-out infinite}
.detail-content{min-width:0;padding:40px 32px 32px}
.detail-content h2{margin:16px 0 12px;font-size:32px;overflow-wrap:anywhere}
.detail-tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{padding:4px 12px;border-radius:var(--radius-pill);background:var(--color-mist-violet);color:var(--color-royal-amethyst);font:500 12px/1.3 var(--font-ui)}
.tag:empty{display:none}
.detail-fields{display:grid;gap:16px;margin:24px 0}
.detail-fields>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:12px 16px;border-radius:var(--radius);background:var(--color-paper)}
.detail-fields>div>span{grid-column:1/-1;font-size:12px;color:var(--color-ash)}
.detail-fields strong{font-size:14px;font-weight:500;overflow-wrap:anywhere}
.copy-button{padding:6px 12px;border:0;border-radius:var(--radius-pill);background:var(--color-canvas);box-shadow:var(--shadow-sm);font:500 12px/1.3 var(--font-ui);color:var(--color-deep-iris)}
.copy-button:hover{background:var(--color-mist-violet)}
.url-value{max-height:56px;overflow:auto}
.original-link{width:100%}

.toast{position:fixed;left:50%;bottom:24px;z-index:50;padding:12px 16px;border-radius:var(--radius);background:var(--color-deep-iris);color:#fff;font-size:14px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:opacity .2s,transform .2s}
.toast.visible{opacity:1;transform:translate(-50%,0)}

/* ---------- Age gate ---------- */
.age-gate{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:24px;background:rgba(38,17,74,.72);backdrop-filter:blur(10px)}
.age-gate-card{position:relative;overflow:hidden;width:min(480px,100%);padding:40px 32px 32px;border-radius:var(--radius-large);background:var(--color-canvas);box-shadow:var(--shadow-lg);text-align:center;color:var(--color-deep-iris)}
.age-gate-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--gradient-twilight-beam)}
.age-gate-kicker{display:inline-flex;padding:4px 12px;border-radius:var(--radius-pill);background:var(--color-mist-violet);color:var(--color-royal-amethyst);font:500 12px/1.3 var(--font-ui);letter-spacing:.04em}
.age-gate-card h2{margin:16px 0 12px;font-size:clamp(24px,5vw,32px)}
.age-gate-card p{font-size:14px;line-height:1.5;color:var(--color-slate)}
.age-confirm{width:100%;margin:16px 0;padding:16px 24px;font-size:16px}
.age-leave{display:inline-block;font-size:14px;color:var(--color-slate);text-decoration:underline;text-underline-offset:4px}
.age-gate-error{color:#b42318!important}
body.age-gate-active{overflow:hidden}

/* ---------- Responsive ---------- */
@media(min-width:1440px){.emote-grid{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(max-width:980px){
  .header-nav,.catalog-status{display:none}
  .emote-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .about-section{margin-inline:24px;grid-template-columns:auto 1fr}
  .about-stats{grid-column:1/-1;grid-template-columns:1fr 1fr}
  .footer-main{grid-template-columns:1fr auto}
  .footer-main nav{grid-column:1/-1}
}
@media(max-width:640px){
  .site-header{top:8px;margin-top:8px;width:calc(100% - 32px);padding-left:12px;gap:12px}
  .wordmark{font-size:22px}
  .language-switch a{padding:6px 8px}
  .hero{margin-top:-72px;padding-top:72px}
  .hero-inner{padding:48px 16px 40px}
  .hero-copy{font-size:16px}
  .search-inline{height:52px;padding:0 12px}
  .search-inline kbd{display:none}
  .toolbar-actions .button-ghost{height:52px;padding-inline:14px}
  .catalog-section{padding:48px 16px 64px}
  .catalog-head{align-items:flex-start}
  .catalog-count strong{font-size:24px}
  .emote-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .thumb{height:112px;padding:8px}
  .card-info{padding:10px}
  .pagination{gap:8px}
  .pagination button{min-width:0}
  .pagination span{min-width:72px}
  .about-section{margin:0 16px 64px;padding:24px;gap:16px}
  .about-stats{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr;gap:16px}
  .detail-dialog[open]{display:block}
  .detail-preview{min-height:220px;max-height:35vh}
  .detail-preview img{max-height:32vh}
  .detail-content{padding:24px 20px}
  .detail-content h2{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}