/* =========================================================
   NEILNEST — DESIGN SYSTEM
   Dark cinematic base, violet + electric-green accents.
   Wordmark identity, no mascot, no generic camera icon.
========================================================= */

:root{
  /* --- Color: matched to NeilNest style guide (navy-charcoal base, not purple-tinted) --- */
  --bg:          #0B0F1E;
  --bg-elev-1:   #121729;
  --bg-elev-2:   #1A1F2E;
  --bg-elev-3:   #232941;
  --border:      #2C334A;
  --border-soft: #1E2436;

  --violet:      #8B5CF6;
  --violet-deep: #6B3FE0;
  --violet-soft: rgba(139,92,246,.16);
  --violet-glow: rgba(139,92,246,.35);

  --green:       #3EF08E;
  --green-deep:  #1FC96F;
  --green-soft:  rgba(62,240,142,.14);
  --green-glow:  rgba(62,240,142,.35);

  --gold:        #F2C14E;
  --danger:      #FF6480;

  --topbar-bg:   rgba(11,15,30,.86);
  --nav-bg:      rgba(11,15,30,.94);
  --on-green:    #0B1310;
  --text:        #E5E7EB;
  --text-muted:  #9CA3B8;
  --text-faint:  #666E85;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  --font-display: 'Sora', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --nav-h: 66px;
  --header-h: 58px;
  --max-w: 460px;      /* mobile canvas */
  --max-w-desktop: 1180px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x:hidden; width:100%; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -0.01em;
  font-weight: 600;
}
p{ margin:0; }
a{ color: inherit; text-decoration: none; }
button{ font-family: var(--font-body); cursor:pointer; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }

:focus-visible{
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- App shell ---------- */
.app{
  max-width: var(--max-w);
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  background: transparent;
  padding-bottom: calc(var(--nav-h) + 12px);
}
.app.no-bottom-pad{ padding-bottom: 0; }

.screen{ animation: fadeIn .28s ease; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }

/* ---------- Top bar ---------- */
.topbar{
  position: sticky; top:0; z-index: 40;
  height: var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 var(--sp-4);
  background: var(--topbar-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.topbar-left{ display:flex; align-items:center; gap:var(--sp-3); }
.icon-btn{
  width:32px; height:32px; border-radius: var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  background: transparent; border:none;
  color: var(--text); position:relative;
}
.icon-btn svg{ width:19px; height:19px; }
.icon-btn:active{ transform: scale(.94); opacity:.8; }
.icon-btn.emoji{ font-size:17px; }
.icon-btn .dot{
  position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%;
  background: var(--green); box-shadow: 0 0 6px var(--green-glow);
}
.back-btn{ background:none; border:none; color:var(--text); display:flex; align-items:center; gap:6px; padding:0; font-size:15px; }

/* ---------- Wordmark ---------- */
.wordmark{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  display:flex; align-items:baseline; gap:1px;
}
.wordmark .neil{ color: var(--text); }
.wordmark .nest{
  background: linear-gradient(90deg, var(--violet), var(--green));
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
.wordmark.lg{ font-size: 38px; }
.tagline{ color: var(--text-muted); font-size: 13px; letter-spacing:.02em; }

/* ---------- Bottom nav ---------- */
.bottom-nav{
  position: fixed; left:50%; transform: translateX(-50%);
  bottom:0; width:100%; max-width: var(--max-w);
  height: var(--nav-h);
  display:flex; align-items:center; justify-content:space-around;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  border-top:1px solid var(--border-soft);
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-item{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color: var(--text-faint); font-size: 11px; background:none; border:none;
  width: 20%; padding: 6px 0;
}
.nav-item svg{ width:22px; height:22px; }
.nav-item.active{ color: var(--green); }
.nav-item.active svg{ filter: drop-shadow(0 0 6px var(--green-glow)); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: var(--r-pill);
  padding: 13px 22px;
  font-weight:600; font-size:14.5px;
  border: 1px solid transparent;
  transition: transform .12s ease;
  width:100%;
}
.btn:active{ transform: scale(.97); }
.btn svg{ width:16px; height:16px; flex:0 0 auto; }
.btn-primary{
  background: linear-gradient(90deg, var(--green-deep), var(--green));
  color: var(--on-green);
  box-shadow: 0 6px 20px -6px var(--green-glow);
}
.btn-violet{
  background: linear-gradient(90deg, var(--violet-deep), var(--violet));
  color: #fff;
  box-shadow: 0 6px 20px -6px var(--violet-glow);
}
.btn-ghost{
  background: var(--bg-elev-2);
  color: var(--text);
  border-color: var(--border);
}
.btn-outline{
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-sm{ padding: 9px 16px; font-size:13px; width:auto; }
.btn-icon{ width:auto; }
.btn:disabled{ opacity:.5; pointer-events:none; }

/* ---------- Sections ---------- */
.section{ padding: var(--sp-6) var(--sp-4) 0; }
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: var(--sp-3);
}
.section-title{ font-size:16.5px; display:flex; align-items:center; gap:8px; }
.section-link{ font-size:12.5px; color: var(--green); font-weight:600; }
.hscroll{
  display:flex; gap: var(--sp-3); overflow-x:auto; padding-bottom:4px;
  scroll-snap-type: x proximity;
  -ms-overflow-style:none; scrollbar-width:none;
}
.hscroll::-webkit-scrollbar{ display:none; }

/* ---------- Cards ---------- */
.card{
  background: var(--bg-elev-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow:hidden;
}
.movie-card{
  flex: 0 0 132px; scroll-snap-align:start;
}
.movie-card .poster{
  width:132px; height:188px; border-radius: var(--r-md);
  object-fit:cover; background: var(--bg-elev-3);
  border:1px solid var(--border-soft);
}
.movie-card .poster-wrap{ position:relative; }
.movie-card .rating-chip{
  position:absolute; top:8px; left:8px;
  background: rgba(11,15,30,.8); color:#fff; backdrop-filter: blur(6px);
  border-radius: var(--r-pill); padding: 3px 8px; font-size:11px;
  display:flex; align-items:center; gap:3px; font-weight:600;
}
.movie-card .title{ font-size:13px; font-weight:600; margin-top:8px; line-height:1.3; }
.movie-card .meta{ font-size:11px; color:var(--text-muted); margin-top:2px; }

.badge{
  display:inline-flex; align-items:center; gap:4px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight:600;
  background: var(--violet-soft); color: var(--violet);
  border: 1px solid rgba(139,92,246,.25);
}
.badge.green{ background: var(--green-soft); color: var(--green); border-color: rgba(51,230,166,.25); }
.badge.gold{ background: rgba(242,193,78,.14); color: var(--gold); border-color: rgba(242,193,78,.25); }
.badge.muted{ background: var(--bg-elev-3); color: var(--text-muted); border-color: var(--border); }

/* ---------- Chips / tabs ---------- */
.chip-row{ display:flex; gap:8px; overflow-x:auto; padding: 0 var(--sp-4); }
.chip-row::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; padding: 8px 16px; border-radius: var(--r-pill);
  font-size:13px; font-weight:600; color: var(--text-muted);
  background: var(--bg-elev-2); border:1px solid var(--border-soft);
  white-space:nowrap;
}
.chip.active{
  background: linear-gradient(90deg, var(--violet-deep), var(--violet));
  color:#fff; border-color:transparent;
}

/* ---------- Forms ---------- */
.field{ margin-bottom: var(--sp-4); }
.field label{ font-size:12.5px; color:var(--text-muted); display:block; margin-bottom:6px; }
.input-wrap{
  display:flex; align-items:center; gap:10px;
  background: var(--bg-elev-2); border:1px solid var(--border);
  border-radius: var(--r-md); padding: 13px 14px;
}
.input-wrap:focus-within{ border-color: var(--violet); }
.input-wrap input, .input-wrap textarea{
  background:none; border:none; outline:none; color:var(--text);
  font-size:14.5px; width:100%; font-family:var(--font-body);
}
.input-wrap svg{ flex:0 0 auto; opacity:.6; }

/* ---------- Hero ---------- */
.hero{
  position:relative; border-radius: var(--r-lg); overflow:hidden;
  margin: 0 var(--sp-4); min-height:400px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background-size:cover; background-position:center;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background: rgba(11,15,30,.5);
}
.hero-content{ position:relative; z-index:2; padding: var(--sp-5); color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.55); }
.hero-content .text-muted{ color:rgba(255,255,255,.78); }
.hero{ background-color:#1A1F2E; }
.hero-carousel{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  -ms-overflow-style:none; scrollbar-width:none;
}
.hero-carousel::-webkit-scrollbar{ display:none; }
.hero-carousel .hero{ flex:0 0 100%; scroll-snap-align:center; margin:0; }
.hero-dots{ display:flex; justify-content:center; gap:6px; margin-top:var(--sp-4); }
.hero-dots span{ width:6px; height:6px; border-radius:50%; background:var(--border); cursor:pointer; transition:.15s; }
.hero-dots span.on{ width:16px; border-radius:4px; background:var(--green); }
.hero-actions{ display:flex; gap:10px; margin-top: var(--sp-4); }
.hero-actions .btn{ width:auto; padding-left:28px; padding-right:28px; }

/* ---------- Empty / error / loading states ---------- */
.state-block{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding: var(--sp-8) var(--sp-5);
  color: var(--text-muted);
}
.state-block .emoji{ font-size:38px; margin-bottom:var(--sp-3); }
.state-block h3{ color:var(--text); font-size:17px; margin-bottom:6px; }
.state-block p{ font-size:13.5px; max-width:280px; }
.skeleton{
  background: linear-gradient(90deg, var(--bg-elev-2) 25%, var(--bg-elev-3) 37%, var(--bg-elev-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-md);
}
@keyframes shimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }

/* ---------- Toast ---------- */
.toast{
  position: fixed; left:50%; bottom: calc(var(--nav-h) + 14px);
  transform: translateX(-50%) translateY(10px);
  background: var(--bg-elev-3); border:1px solid var(--border);
  padding: 11px 18px; border-radius: var(--r-pill);
  font-size:13px; font-weight:600; z-index:200;
  opacity:0; pointer-events:none; transition: all .25s ease;
  display:flex; align-items:center; gap:8px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.6);
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }
.toast .dotc{ color: var(--green); }

/* ---------- Footer ---------- */
.site-footer{
  margin-top: var(--sp-8); padding: var(--sp-7) var(--sp-5) var(--sp-8);
  border-top: 1px solid var(--border-soft);
  background: var(--bg-elev-1);
}
.footer-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-6); margin: var(--sp-6) 0; }
.footer-col h4{ font-size:12.5px; color:var(--text-muted); margin-bottom:10px; letter-spacing:.02em; }
.footer-col a{ display:block; font-size:13.5px; padding:5px 0; color:var(--text); }
.footer-social{ display:flex; gap:10px; margin-top:var(--sp-5); }
.footer-bottom{ margin-top:var(--sp-6); font-size:11.5px; color:var(--text-faint); }

/* ---------- Progress / XP ---------- */
.progress-track{ height:8px; border-radius:var(--r-pill); background:var(--bg-elev-3); overflow:hidden; }
.progress-fill{ height:100%; background: linear-gradient(90deg, var(--violet), var(--green)); border-radius:var(--r-pill); transition: width .5s ease; }

.streak-pill{
  display:flex; align-items:center; gap:8px;
  background: var(--bg-elev-2);
  border:1px solid rgba(242,193,78,.25);
  border-radius: var(--r-pill); padding: 10px 16px;
}

/* ---------- Utility ---------- */
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-2{ gap:8px; } .gap-3{ gap:12px; } .gap-4{ gap:16px; }
.mt-2{margin-top:8px;} .mt-3{margin-top:12px;} .mt-4{margin-top:16px;} .mt-5{margin-top:20px;} .mt-6{margin-top:24px;}
.mb-2{margin-bottom:8px;} .mb-3{margin-bottom:12px;}
.text-muted{ color:var(--text-muted); } .text-faint{ color:var(--text-faint); }
.text-sm{ font-size:12.5px; } .text-xs{ font-size:11px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.w-full{ width:100%; }
.center{ text-align:center; }
.divider{ height:1px; background:var(--border-soft); margin: var(--sp-4) 0; }
.avatar{ border-radius:50%; object-fit:cover; background:var(--bg-elev-3); }

/* ---------- Desktop ---------- */
@media (min-width: 900px){
  .app{ max-width:100%; padding-bottom:0; }
  .bottom-nav{ display:none; }
  .mobile-only{ display:none !important; }
  .desktop-header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 0 var(--sp-8); height:72px; position:sticky; top:0; z-index:40;
    background: var(--topbar-bg); backdrop-filter: blur(14px);
    border-bottom:1px solid var(--border-soft);
  }
  .desktop-nav{ display:flex; gap: var(--sp-6); align-items:center; }
  .desktop-nav a{ font-size:14px; color:var(--text-muted); font-weight:500; }
  .desktop-nav a.active{ color: var(--text); }
  .desktop-actions{ display:flex; align-items:center; gap:var(--sp-3); }
  .page-wrap{ max-width: var(--max-w-desktop); margin:0 auto; padding: var(--sp-7) var(--sp-6); }
  .section{ padding: var(--sp-7) 0 0; max-width: var(--max-w-desktop); margin:0 auto; }
  .hero{ margin:0 auto; max-width: var(--max-w-desktop); min-height: 460px; }
  .footer-grid{ grid-template-columns: repeat(4,1fr); max-width: var(--max-w-desktop); margin: var(--sp-6) auto; }
  .site-footer > .fw{ max-width: var(--max-w-desktop); margin:0 auto; }
}
.desktop-header, .desktop-nav{ display:none; }
@media (min-width:900px){ .desktop-header{ display:flex; } .desktop-nav{ display:flex; } }


/* ---------- Light theme ---------- */
:root[data-theme="light"]{
  --bg:          #F6F7FB;
  --bg-elev-1:   #FFFFFF;
  --bg-elev-2:   #FFFFFF;
  --bg-elev-3:   #ECEEF5;
  --border:      #D3D8E6;
  --border-soft: #E3E6EF;
  --violet:      #6D3FE0;
  --violet-deep: #5A2FC8;
  --violet-soft: rgba(109,63,224,.10);
  --green:       #0E9F5A;
  --green-deep:  #0B8048;
  --green-soft:  rgba(14,159,90,.12);
  --green-glow:  rgba(14,159,90,.30);
  --gold:        #B7791F;
  --danger:      #D93A5B;
  --text:        #11162A;
  --text-muted:  #525A74;
  --text-faint:  #8089A3;
  --topbar-bg:   rgba(246,247,251,.9);
  --nav-bg:      rgba(255,255,255,.94);
  --on-green:    #FFFFFF;
  color-scheme: light;
}
:root[data-theme="light"] .toast{ box-shadow: 0 10px 30px -10px rgba(17,22,42,.25); }
:root[data-theme="light"] .site-footer{ background:#FFFFFF; }
.theme-toggle{ font-size:17px; cursor:pointer; }

/* =========================================================
   Animated avatars
========================================================= */
.nn-av{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%; flex:0 0 auto; overflow:hidden; line-height:1; box-shadow:0 0 0 2px rgba(255,255,255,.06) inset; vertical-align:middle; }
.nn-av i{ font-style:normal; display:block; will-change:transform; }
.anim-clap i{ transform-origin:20% 80%; animation:av-clap 1.6s ease-in-out infinite; }
.anim-bounce i{ animation:av-bounce 1.1s ease-in-out infinite; }
.anim-spin i{ animation:av-spin 6s linear infinite; }
.anim-pulse i{ animation:av-pulse 1.4s ease-in-out infinite; }
.anim-float i{ animation:av-float 2.4s ease-in-out infinite; }
.anim-wiggle i{ animation:av-wiggle 1.3s ease-in-out infinite; }
.anim-drift i{ animation:av-drift 2.2s ease-in-out infinite; }
.anim-pop i{ animation:av-pop 1.5s ease-in-out infinite; }
.anim-flicker i{ animation:av-flicker 1s ease-in-out infinite; }
.anim-shake i{ animation:av-shake 1.8s ease-in-out infinite; }
.anim-glow i{ animation:av-glow 2s ease-in-out infinite; }
@keyframes av-clap{ 0%,55%,100%{ transform:rotate(0) } 65%{ transform:rotate(-22deg) } 80%{ transform:rotate(4deg) } }
@keyframes av-bounce{ 0%,100%{ transform:translateY(8%) scale(1.05,.92) } 50%{ transform:translateY(-14%) scale(.95,1.06) } }
@keyframes av-spin{ to{ transform:rotate(360deg) } }
@keyframes av-pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.18) } }
@keyframes av-float{ 0%,100%{ transform:translateY(8%) } 50%{ transform:translateY(-10%) } }
@keyframes av-wiggle{ 0%,100%{ transform:rotate(-10deg) } 50%{ transform:rotate(10deg) } }
@keyframes av-drift{ 0%,100%{ transform:translate(-8%,8%) } 50%{ transform:translate(8%,-8%) } }
@keyframes av-pop{ 0%,100%{ transform:scale(1) } 40%{ transform:scale(1.25) } 60%{ transform:scale(.95) } }
@keyframes av-flicker{ 0%,100%{ transform:scale(1) rotate(-3deg); filter:brightness(1) } 50%{ transform:scale(1.12) rotate(3deg); filter:brightness(1.3) } }
@keyframes av-glow{ 0%,100%{ transform:scale(1); filter:drop-shadow(0 0 0 rgba(255,236,160,0)) } 50%{ transform:scale(1.14); filter:drop-shadow(0 0 7px rgba(255,236,160,.95)) } }
@keyframes av-shake{ 0%,70%,100%{ transform:translateX(0) } 75%{ transform:translateX(-8%) } 85%{ transform:translateX(8%) } 95%{ transform:translateX(-4%) } }

.av-set-title{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin:18px 0 10px; font-weight:600; }
.av-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.av-opt{ background:var(--bg-elev-2); border:2px solid var(--border-soft); border-radius:var(--r-md); padding:10px 0; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; }
.av-opt.on{ border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
.av-opt.on::after{ content:"✓"; position:absolute; top:4px; right:6px; font-size:11px; color:var(--green); font-weight:700; }

/* =========================================================
   Category page: column picker + back-to-top
========================================================= */
.view-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.view-select{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-muted); }
.view-select select{
  background:var(--bg-elev-2); color:var(--text); border:1px solid var(--border); border-radius:var(--r-pill);
  padding:8px 30px 8px 14px; font-size:13px; font-family:inherit; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3B8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
.movie-grid{ display:grid; gap:var(--sp-3); margin-top:var(--sp-4); }
.movie-grid.cols-1{ grid-template-columns:1fr; }
.movie-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.movie-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.movie-grid .movie-card{ flex:none; width:100%; min-width:0; }
.movie-grid .movie-card .poster{ width:100%; height:auto; aspect-ratio:2/3; background-size:cover; background-position:center top; }
.movie-grid.cols-1 .movie-card .poster{ aspect-ratio:16/10; background-position:center 20%; }
.movie-grid.cols-1 .movie-card .title{ font-size:16px; margin-top:8px; }
.movie-grid.cols-3 .movie-card .title{ font-size:11.5px; }
.movie-grid.cols-3 .movie-card .meta{ font-size:10px; }
.movie-grid.cols-3 .rating-chip{ top:5px; left:5px; padding:2px 6px; font-size:10px; }
@media (min-width:900px){ .movie-grid.cols-1{ max-width:640px; } .movie-grid.cols-3{ grid-template-columns:repeat(4,1fr); } .movie-grid.cols-2{ grid-template-columns:repeat(3,1fr); } }

.to-top{
  position:fixed; right:max(16px, calc(50% - 230px + 16px)); bottom:84px; z-index:60;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border);
  background:var(--bg-elev-3); color:var(--green); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.6); cursor:pointer;
  opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .2s, transform .2s;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top svg{ width:20px; height:20px; }
@media (min-width:900px){ .to-top{ right:28px; bottom:28px; } }

/* =========================================================
   Leaderboard
========================================================= */
.lb-row{ cursor:pointer; border-radius:var(--r-sm); }
.lb-row:active{ background:var(--bg-elev-2); }
.lb-row.me{ background:var(--violet-soft); padding-left:8px; padding-right:8px; }
.chip{ cursor:pointer; user-select:none; }
.sheet-back{ position:fixed; inset:0; background:rgba(5,8,18,.6); z-index:90; display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s; }
.sheet-back.show{ opacity:1; pointer-events:auto; }
.sheet{ width:100%; max-width:var(--max-w); background:var(--bg-elev-1); border-radius:22px 22px 0 0; padding:22px 20px 28px; text-align:center; transform:translateY(30px); transition:transform .2s; border:1px solid var(--border-soft); }
.sheet-back.show .sheet{ transform:none; }

/* The global reduced-motion rule above would freeze the profile animations (battery saver triggers it on many phones).
   They are small, looping and the whole point of the picker, so keep them running. */
.anim-clap{--d:1.6s}.anim-bounce{--d:1.1s}.anim-spin{--d:6s}.anim-pulse{--d:1.4s}.anim-float{--d:2.4s}
.anim-wiggle{--d:1.3s}.anim-drift{--d:2.2s}.anim-pop{--d:1.5s}.anim-flicker{--d:1s}.anim-glow{--d:2s}.anim-shake{--d:1.8s}
@media (prefers-reduced-motion: reduce){ .nn-av i{ animation-duration:var(--d,1.5s) !important; } }

/* ---------- Added: no resize grip on text areas, eye toggle for passwords ---------- */
textarea{ resize:none; }
.input-wrap textarea{ resize:none; display:block; }
.input-wrap .pw-eye{
  flex:0 0 auto; width:34px; height:34px; margin:-8px -6px -8px 0; border:0; background:none; color:var(--text-muted);
  display:inline-flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; padding:0;
}
.input-wrap .pw-eye svg{ width:20px; height:20px; opacity:1; }
.input-wrap .pw-eye .eye-off{ display:none; }
.input-wrap .pw-eye.on{ color:var(--green); }
.input-wrap .pw-eye.on .eye-on{ display:none; }
.input-wrap .pw-eye.on .eye-off{ display:block; }
.input-wrap .pw-eye:focus-visible{ outline:2px solid var(--violet); }

/* ---------- Skeleton shimmer ---------- */
@keyframes nn-shimmer{ 0%{ background-position:-420px 0; } 100%{ background-position:420px 0; } }
.sk, .sk-line, .sk-card, .sk-poster, .sk-circle{
  background-color:var(--bg-elev-2);
  background-image:linear-gradient(90deg, transparent 0, rgba(255,255,255,.07) 45%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.07) 55%, transparent 100%);
  background-size:420px 100%; background-repeat:no-repeat; animation:nn-shimmer 1.3s linear infinite;
}
.sk-line{ height:12px; border-radius:6px; margin:8px 0; } .sk-line.w60{ width:60%; } .sk-line.w40{ width:40%; } .sk-line.w80{ width:80%; }
.sk-poster{ width:128px; aspect-ratio:2/3; border-radius:14px; flex:0 0 auto; }
.sk-card{ border-radius:16px; height:96px; margin-bottom:12px; }
.sk-hero{ height:210px; border-radius:20px; margin:0 16px; }
.sk-circle{ border-radius:50%; }
.sk-row{ display:flex; gap:12px; padding:0 16px; overflow:hidden; }
/* images shimmer until they finish loading */
img:not([data-loaded]){ background-color:var(--bg-elev-2); background-image:linear-gradient(90deg, transparent 0, rgba(255,255,255,.08) 50%, transparent 100%); background-size:420px 100%; background-repeat:no-repeat; animation:nn-shimmer 1.3s linear infinite; }
img[data-loaded]{ animation:none; background-image:none; }
@media (prefers-reduced-motion: reduce){ .sk, .sk-line, .sk-card, .sk-poster, .sk-circle, img:not([data-loaded]){ animation:none; } }


/* ---------- Category strip under the Home hero (slides sideways) ---------- */
.cat-strip{
  display:flex; gap:4px; overflow-x:auto; padding:2px var(--sp-4) 6px; margin-top:4px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 88%, transparent 100%); mask-image:linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
}
.cat-strip::-webkit-scrollbar{ display:none; }
.cat-tab{ flex:0 0 auto; padding:10px 14px; font-size:15px; font-weight:700; color:var(--text-muted); white-space:nowrap; border-radius:var(--r-pill); }
.cat-tab.all{ color:var(--green); }
.cat-tab:active{ background:var(--bg-elev-2); color:var(--text); }