/* JeremiahScottie liquid visual system. Existing page behavior stays in app.js. */
:root {
  --green: #39ff2d;
  --cyan: #08e7ef;
  --ice: #e0f7fa;
  --lime: #daf7a6;
  --pink: #ffebee;
  --lav: #f3e5f5;
  --bg: #0b1110;
  --panel: #16231f;
  --line: rgba(190, 255, 224, .16);
  --muted: #bfcec7;
  --white: #f4fff9;
  --liquid-shadow: 0 22px 55px rgba(0, 0, 0, .27), inset 0 1px 0 rgba(255, 255, 255, .10);
}
html { scroll-padding-top: 120px; }
body {
  background: radial-gradient(ellipse at 3% 0%, rgba(57,255,45,.11), transparent 32rem),
              radial-gradient(ellipse at 95% 11%, rgba(8,231,239,.12), transparent 32rem),
              linear-gradient(160deg, #0c1411 0%, #111b19 35%, #0b1110 100%);
  overflow-x: hidden;
}
body::before {
  content: ''; position: fixed; z-index: -1; width: 44rem; height: 44rem; right: -23rem; top: 32vh;
  border-radius: 49% 51% 70% 30% / 40% 39% 61% 60%;
  background: radial-gradient(circle at 35% 30%, rgba(8,231,239,.10), rgba(57,255,45,.05) 50%, transparent 70%);
  filter: blur(30px); pointer-events: none; animation: liquid-drift 18s ease-in-out infinite alternate;
}
@keyframes liquid-drift { to { transform: translate3d(-40px, -25px, 0) rotate(14deg); border-radius: 62% 38% 42% 58%; } }
.shell { width: min(1220px, calc(100% - 64px)); }
.preview-ribbon { background: #d9f6bf; color: #17301e; border: 0; font-size: 10px; font-weight: 700; }
.preview-ribbon b { color: #174825; }
.top {
  top: 12px; width: min(1280px, calc(100% - 40px)); margin: 12px auto 0;
  border: 1px solid rgba(201,255,226,.18); border-radius: 999px;
  background: rgba(16, 30, 26, .83); box-shadow: 0 14px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.top .nav { width: 100%; min-height: 72px; padding: 9px 12px 9px 24px; gap: 26px; }
.brand { font-size: 18px; letter-spacing: -.6px; }
.brand img { width: 34px; height: 34px; filter: drop-shadow(0 3px 9px #39ff2d40); }
.nav-links { font-size: 13px; gap: 27px; color: #d1e1d7; }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover, .nav-links a[aria-current=page] { color: var(--green); }
.nav-join, .btn {
  position: relative; overflow: hidden; min-height: 50px; border-radius: 999px;
  border: 1px solid rgba(238,255,225,.65); color: #082015;
  background: linear-gradient(120deg, #7aff66 0%, #39ff2d 48%, #80f8ca 100%);
  box-shadow: 0 9px 23px rgba(42,255,85,.19), inset 0 1px 0 rgba(255,255,255,.75);
  font-size: 13px; font-weight: 800;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.nav-join { padding: 13px 22px; }
.btn { padding: 13px 23px; }
.nav-join::before, .btn::before {
  content: ''; position: absolute; top: -60%; left: -32%; width: 35%; height: 220%;
  transform: rotate(25deg) translateX(-160%); background: rgba(255,255,255,.3); transition: transform .6s ease;
}
.nav-join:hover, .btn:hover { transform: translateY(-4px); color: #082015; box-shadow: 0 16px 32px rgba(42,255,85,.24), inset 0 1px 0 #fff9; }
.nav-join:hover::before, .btn:hover::before { transform: rotate(25deg) translateX(480%); }
.nav-join:active, .btn:active { transform: translateY(0); }
.btn.secondary { color: #effff6; background: rgba(245,255,250,.065); border-color: rgba(221,255,236,.24); box-shadow: 0 9px 20px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08); }
.btn.secondary:hover { color: #fff; background: rgba(245,255,250,.12); border-color: rgba(8,231,239,.7); }
.text-link { color: #8effac; font-size: 13px; }
.text-link:hover { color: var(--ice); }
.menu-toggle { border-radius: 999px; padding: 10px 16px; background: rgba(255,255,255,.06); }
.hero { padding: 52px 0 50px; }
.hero::before {
  inset: -50px -30px -25px; background: radial-gradient(ellipse at 73% 45%, rgba(8,231,239,.13), transparent 34%),
  radial-gradient(ellipse at 25% 25%, rgba(57,255,45,.09), transparent 42%);
}
.hero::after {
  content: ''; position: absolute; z-index: -1; right: -4%; top: 3%; width: 47%; height: 80%;
  border-radius: 62% 38% 63% 37% / 42% 58% 42% 58%;
  background: radial-gradient(ellipse at 38% 38%, rgba(8,231,239,.17), rgba(57,255,45,.08) 48%, transparent 75%);
  filter: blur(25px); pointer-events: none;
}
.hero-grid { grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,72px); }
.hero-brand { position: relative; width: min(390px, 90%); height: 138px; overflow: hidden; margin: -8px 0 12px; }
.hero-brand img { position: absolute; width: 100%; height: auto; top: 50%; transform: translateY(-50%); filter: drop-shadow(0 9px 18px rgba(0,0,0,.35)); }
.eyebrow,.kicker { letter-spacing: .14em; font-size: 10px; }
.eyebrow { color: var(--lime); }
.square { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 16px #39ff2d; }
.hero h1 { font-size: clamp(45px,5.1vw,69px); letter-spacing: -.055em; line-height: 1.04; margin: 20px 0; }
.hero h1 em, .page-hero h1 em { color: var(--green); }
.lead { color: #d1dfd7; font-size: 16px; line-height: 1.75; max-width: 510px; }
.hero .actions { gap: 12px; margin-top: 27px; }
.meta-row { margin-top: 24px; color: #abc2b1; font-size: 10px; letter-spacing: .13em; }
.meta-row span + span { color: var(--cyan); }
.meet-card {
  position: relative; grid-template-columns: 43% 57%; border-radius: 34px 58px 38px 48px;
  background: linear-gradient(145deg, rgba(40,71,54,.94), rgba(19,35,29,.96));
  border: 1px solid rgba(174,255,196,.28); box-shadow: 0 28px 65px rgba(0,0,0,.35), 0 0 0 8px rgba(57,255,45,.035), inset 0 1px 0 #ffffff28;
  transform: rotate(1deg);
}
.meet-photo { min-height: 450px; }
.meet-photo img { object-position: 48% 35%; }
.meet-photo::after { background: linear-gradient(transparent 42%,rgba(8,28,17,.8)); }
.meet-photo-label { padding: 8px 10px; left: 13px; bottom: 15px; width: fit-content; border: 1px solid #ddffda45; border-radius: 999px; background: #10281dc9; font-size: 8px; letter-spacing: .11em; }
.meet-body { padding: 35px 25px 28px; }
.meet-body h2 { font-size: clamp(25px,2.5vw,34px); letter-spacing: -.04em; }
.meet-body>p,.fun-fact p { font-size: 13px; color: #d2e2d7; }
.fun-facts { border-color: rgba(202,255,216,.18); }
.fun-fact { min-height: 140px; }
.fun-fact h3 { color: var(--lime); font-size: 16px; }
.fact-controls button { border-radius: 50%; background: rgba(240,255,246,.06); min-width: 42px; min-height: 42px; border-color: rgba(209,255,218,.24); }
.fact-controls #fact-pause { border-radius: 999px; min-width: 72px; }
.quick-links { border: 0; gap: 16px; margin: 6px 0 76px; }
.quick-link,.quick-link:first-child,.quick-link:last-child {
  border: 1px solid rgba(200,255,223,.14); border-radius: 22px; padding: 20px 20px;
  background: linear-gradient(145deg,rgba(33,57,45,.9),rgba(21,35,30,.9)); box-shadow: var(--liquid-shadow);
  transition: transform .24s ease, border-color .24s ease, background .24s ease;
}
.quick-link:hover { transform: translateY(-5px); border-color: #80ffa077; background: #243e30; }
.quick-link strong { font-size: 13px; }
.quick-link small { font-size: 11px; }
.quick-icon { display: grid; place-items: center; flex: 0 0 43px; height: 43px; border-radius: 15px; background: rgba(57,255,45,.10); font-size: 22px; }
.quick-link:nth-child(2) .quick-icon { background: rgba(8,231,239,.10); }
.quick-link:nth-child(3) .quick-icon { background: rgba(243,229,245,.09); color: var(--lav); }
.arrow { color: #d5fbe0; }
.section { margin: 78px 0; }
.section-head { margin-bottom: 27px; }
.section-head h2,.section h2 { font-size: clamp(30px,3.4vw,43px); letter-spacing: -.04em; }
.section-head p { font-size: 14px; }
.watch-layout { gap: 32px; }
.embed-frame,.twitch-chat { border-radius: 24px; border-color: #baffd02c; box-shadow: var(--liquid-shadow); }
.watch-copy { padding: 22px 8px; }
.watch-copy h3 { font-size: clamp(25px,2.7vw,34px); letter-spacing: -.04em; }
.watch-copy p { font-size: 14px; }
.watch-copy .text-link { margin-right: 22px; }
.collection,.panel,.video-item,.spot-card,.spot-player,.spot-feature,.spot-archive article {
  border-radius: 24px; border-color: rgba(192,255,217,.16); box-shadow: var(--liquid-shadow);
  background: linear-gradient(145deg,rgba(35,57,45,.9),rgba(20,34,28,.94));
}
.collection { transition: transform .25s ease, border-color .25s ease; }
.collection:hover { transform: translateY(-5px); border-color: #8bff9b70; }
.collection-art { border-radius: 22px 22px 0 0; background: radial-gradient(circle at 85% 10%,#39ff2d45,transparent 35%),linear-gradient(120deg,#285d3b,#1a3328); }
.collection-art:before { border-radius: 45% 55% 60% 40%; border-width: 14px; box-shadow: 15px 15px 0 #39ff2d14; }
.collection-art.cyan { background: radial-gradient(circle at 82% 5%,#08e7ef50,transparent 38%),linear-gradient(120deg,#22605a,#193c3a); }
.collection-art.lav { background: radial-gradient(circle at 82% 5%,#f3e5f542,transparent 40%),linear-gradient(120deg,#4d4353,#302c3b); }
.collection-body { padding: 25px; }
.collection h3 { font-size: 16px; }
.collection p,.panel p { font-size: 13px; }
.bay-banner {
  position: relative; overflow: hidden; border-radius: 36px 52px 36px 52px;
  border-color: rgba(180,255,200,.25); background: radial-gradient(ellipse at 90% 0%,rgba(8,231,239,.16),transparent 42%),linear-gradient(115deg,#285235,#182e23 72%);
  box-shadow: var(--liquid-shadow); padding: 48px;
}
.bay-banner h2 { font-size: clamp(36px,4vw,50px); }
.bay-banner p { font-size: 14px; color: #d3e7d7; }
.bay-fact { border-radius: 20px; border-color: rgba(198,255,211,.14); background: rgba(7,27,15,.45); box-shadow: inset 0 1px 0 #ffffff15; }
.bay-fact strong { color: var(--lime); }
.panel { padding: 32px; }
.panel h3 { font-size: 25px; }
.page-hero { position: relative; padding-top: 72px; }
.page-hero h1 { font-size: clamp(43px,5.5vw,70px); letter-spacing: -.055em; }
.page-hero p { color: #cadbd1; font-size: 16px; }
.subnav { gap: 10px; }
.subnav a { border: 1px solid rgba(8,231,239,.20); background: rgba(8,231,239,.055); padding: 10px 14px; border-radius: 999px; }
.steps { gap: 16px; }
.step { border: 1px solid rgba(184,255,206,.16); border-radius: 22px; padding: 24px; background: rgba(29,53,39,.6); box-shadow: var(--liquid-shadow); }
.step:before { color: var(--cyan); }
#apply-flow > .panel { margin-top: 18px; }
.server-stat { border-radius: 22px; background: linear-gradient(155deg,#243a2d,#17281f); border: 1px solid #a6ffbd38; box-shadow: var(--liquid-shadow); }
.tab,.search { border-radius: 999px; }
.search { padding: 15px 20px; background: rgba(14,28,19,.85); }
.notice,.empty,.spot-empty { border-radius: 18px; background: rgba(24,56,45,.75); }
.faq { border: 0; display: grid; gap: 10px; }
.faq details { border: 1px solid #baf7ca24; border-radius: 18px; background: rgba(31,51,40,.66); padding: 18px 20px; }
.faq details p { padding-left: 0; }
.spot-welcome,.spot-submit { border-radius: 32px; border-color: #b5ffd13b; background: linear-gradient(125deg,#264a32,#1c3630); box-shadow: var(--liquid-shadow); }
.spot-intro h1 em { color: var(--green); font-style: normal; }
.spot-feature,.spot-card,.spot-player,.spot-archive article { overflow: hidden; }
.spot-avatar { border-radius: 18px; }
.spot-small-build { border-radius: 12px; overflow: hidden; }
.spot-lightbox { border-radius: 24px; overflow: hidden; }
.footer { border-color: rgba(199,255,216,.14); background: rgba(4,15,10,.25); padding-top: 45px; }
.footer-links a:hover { color: var(--green); }
.footer-bottom { border-color: rgba(199,255,216,.12); }
@media (max-width: 1000px) and (min-width: 761px) {
  .top .nav { gap: 14px; }
  .nav-links { gap: 14px; font-size: 12px; }
  .nav-join { padding: 12px 16px; font-size: 12px; }
  .meet-card { grid-template-columns: 1fr; transform: none; }
  .meet-photo { min-height: 220px; }
  .meet-body { padding: 23px; }
  .fun-fact { min-height: 100px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 155px; }
  .shell { width: calc(100% - 36px); }
  .top { top: 8px; width: calc(100% - 24px); border-radius: 24px; margin-top: 8px; }
  .top .nav { padding: 12px 14px; min-height: 0; gap: 9px; }
  .brand { font-size: 17px; }
  .brand img { width: 30px; height: 30px; }
  .menu-toggle { min-height: 43px; }
  .nav-join { order: 3; width: 100%; min-height: 43px; font-size: 13px; padding: 10px 16px; }
  .nav-links { top: calc(100% + 7px); left: 0; right: 0; border: 1px solid #9fffb341; border-radius: 20px; background: #15271ff5; padding: 10px; box-shadow: 0 18px 40px #0009; }
  .nav-links a { border-radius: 12px; padding: 12px 14px; }
  .hero { padding: 36px 0 25px; }
  .hero-brand { width: min(330px,90%); height: 116px; margin: -7px 0 9px; }
  .hero h1 { font-size: clamp(43px,10vw,56px); letter-spacing: -.055em; }
  .lead { font-size: 15px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .meet-card { width: 100%; max-width: 560px; grid-template-columns: 40% 60%; border-radius: 28px 38px 28px 38px; transform: none; }
  .meet-photo { min-height: 390px; }
  .meet-body { padding: 24px 20px; }
  .fun-fact { min-height: 130px; }
  .quick-links { margin: 5px 0 55px; gap: 10px; }
  .quick-link,.quick-link:first-child,.quick-link:last-child { padding: 15px; border: 1px solid rgba(200,255,223,.14); }
  .section { margin: 58px 0; }
  .section h2,.section-head h2 { font-size: 32px; }
  .watch-copy { padding: 0; }
  .collection { grid-template-columns: 1fr 1.15fr; }
  .collection-art { border-radius: 22px 0 0 22px; }
  .bay-banner { padding: 28px; border-radius: 28px 38px 28px 38px; }
  .steps { gap: 12px; }
  .step { padding: 22px; }
  .page-hero { padding-top: 49px; }
  .page-hero h1 { font-size: clamp(39px,9vw,54px); }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 42px; }
  .meet-card { grid-template-columns: 1fr; }
  .meet-photo { min-height: 240px; }
  .meet-body { padding: 24px; }
  .fun-fact { min-height: 105px; }
  .collection { display: flex; }
  .collection-art { border-radius: 22px 22px 0 0; }
  .actions .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}