:root{--lime:#b8f53c;--orange:#ff9d2f;--ink:#0d0f0f;--white:#fff}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0b0d0d;color:#fff;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
button,a{font:inherit;color:inherit}
button{border:0;cursor:pointer}
a{text-decoration:none}
.screen{position:fixed;inset:0;overflow:hidden}.hidden{display:none!important}
.topbar{position:absolute;z-index:50;left:0;right:0;top:0;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 28px}
.brand{font-weight:900;font-size:14px;letter-spacing:.08em}
.brand span{color:var(--lime)}
.live{padding:10px 16px;border:1px solid #ffffff2e;border-radius:999px;background:#090b0bcc;backdrop-filter:blur(12px);font-size:13px}
.live i,.mini-live i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#8ff43b;box-shadow:0 0 12px #8ff43b;margin-right:7px}
.top-actions{display:flex;gap:9px}
.top-actions button{background:#0b0d0d88;border:1px solid #ffffff2e;border-radius:14px;padding:9px 13px}
.top-actions button span{margin-left:5px;font-size:11px}
.change-mode{position:absolute;z-index:60;right:18px;bottom:14px;background:#0008;border:1px solid #ffffff24;border-radius:999px;padding:7px 12px;font-size:10px}

/* age */
.gate-screen{background:#0b0d0d}
.gate-bg{position:absolute;inset:-2%;background:linear-gradient(180deg,#0003,#000d),url("assets/images/auto-pov.jpg") center/cover;filter:blur(3px);opacity:.48}
.gate-top{position:absolute;z-index:30;left:0;right:0;top:0;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 28px}
.mini-live{padding:10px 15px;border:1px solid #ffffff2e;border-radius:999px;background:#090b0bcc;font-size:12px}
.gate-content{position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,92vw);text-align:center}
.gate-kicker{font-size:11px;letter-spacing:.16em;opacity:.7}
.gate-content h1{font-size:clamp(42px,6vw,78px);line-height:.96;margin:14px 0;letter-spacing:-.05em}
.gate-content h1 span{color:var(--lime)}
.gate-content p{font-size:16px;line-height:1.5;margin:0}
.gate-content p small{opacity:.55}
.gate-question{font-size:26px;color:var(--lime);font-family:cursive;margin:20px 0 12px}
.age-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.age-card{padding:24px 18px 18px;border-radius:24px;background:#101313e8;border:1px solid #ffffff25;backdrop-filter:blur(13px);transition:.22s;text-align:center;box-shadow:0 25px 70px #0008}
.age-card:hover{transform:translateY(-6px);border-color:#fff7}
.age-card.genz{border-color:#a8ee4280}.age-card.classic{border-color:#ff9d2f70}
.age-icon{font-size:22px}.age-card strong{display:block;font-size:58px;line-height:1;margin:3px}.age-card.genz strong{color:var(--lime)}.age-card.classic strong{color:var(--orange)}
.age-card>b{display:block;font-size:19px}.age-card span{display:block;font-size:12px;color:#b9c0bc;margin:9px 0 15px}.age-card em{display:block;font-style:normal;padding:10px;border-radius:11px;background:#ffffff10;font-weight:800;font-size:12px}
.gate-foot{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:10px;opacity:.45}

/* gen-z scene */
.genz-screen{background:#2f7732}
.genz-scene{position:absolute;inset:0;background:linear-gradient(#62a8c1 0 42%,#73b94a 42% 70%,#286c2d 70%);overflow:hidden}
.sky{position:absolute;inset:0 0 54%;background:linear-gradient(#478fae,#9bd0d5)}
.sun{position:absolute;width:120px;height:120px;border-radius:50%;right:13%;top:13%;background:#ffeaa4;box-shadow:0 0 90px #ffeaa466}
.cloud{position:absolute;width:180px;height:40px;border-radius:50px;background:#fff8;filter:blur(5px)}.c1{left:9%;top:17%}.c2{right:27%;top:9%;transform:scale(.7)}
.field{position:absolute;left:-5%;right:-5%;border-radius:50% 50% 0 0/30% 30% 0 0}.far{bottom:27%;height:43%;background:linear-gradient(#65ad45,#3d8a38)}.near{bottom:-8%;height:45%;background:linear-gradient(#428a34,#235e29)}
.road{position:absolute;left:35%;bottom:-8%;width:30%;height:72%;background:linear-gradient(90deg,#202526,#44494a 50%,#202526);clip-path:polygon(34% 0,66% 0,100% 100%,0 100%);box-shadow:0 -20px 40px #142a1b66}
.road-dash{position:absolute;left:48.8%;bottom:-8%;width:2.4%;height:70%;background:repeating-linear-gradient(#f7eec5 0 35px,transparent 35px 75px);clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);animation:dashMove 1.1s linear infinite}
@keyframes dashMove{to{background-position-y:75px}}
.trees{position:absolute;width:90px;height:120px;background:radial-gradient(circle at 50% 35%,#2d7d36 0 48%,transparent 50%),linear-gradient(90deg,transparent 45%,#5d4129 46% 54%,transparent 55%)}.t1{left:5%;bottom:36%;transform:scale(1.3)}.t2{right:6%;bottom:34%;transform:scale(1.5)}.t3{left:22%;bottom:31%;transform:scale(.7)}
.auto-wrap{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);animation:autoBob 1.7s ease-in-out infinite;z-index:5}
@keyframes autoBob{50%{transform:translateX(-50%) translateY(-4px)}}
.auto{position:relative;width:155px;height:175px;filter:drop-shadow(0 18px 12px #0008)}.auto-roof{position:absolute;left:16px;top:0;width:123px;height:45px;border-radius:48px 48px 10px 10px;background:#f5b42f;border:4px solid #166b42}.auto-window{position:absolute;left:30px;top:23px;width:95px;height:45px;border-radius:8px 8px 18px 18px;background:#263c3c;border:4px solid #17623e}.auto-body{position:absolute;left:13px;top:57px;width:129px;height:100px;border-radius:10px 10px 25px 25px;background:linear-gradient(#16824e,#087044);border:4px solid #16643d}.auto-wheel{position:absolute;bottom:0;width:22px;height:32px;border-radius:8px;background:#111}.wleft{left:7px}.wright{right:7px}.auto-light{position:absolute;bottom:33px;width:16px;height:10px;border-radius:50%;background:#ffed79}.l1{left:20px}.l2{right:20px}.auto-plate{position:absolute;left:40px;top:82px;width:74px;padding:7px 0;text-align:center;background:#193a2b;color:#f7f3cc;font-size:10px;line-height:1.05;border-radius:4px}
.genz-copy{position:absolute;z-index:20;inset:0;pointer-events:none}.hero-line{position:absolute;left:50%;top:18%;transform:translateX(-50%);font-family:cursive;font-weight:900;font-size:clamp(34px,5vw,68px);line-height:.95;text-align:center;text-shadow:0 4px 22px #0008;white-space:nowrap}.hero-line span{color:#b8f53c}.sticker{position:absolute;background:#0b0d0de8;color:#fff;padding:20px 24px;border-radius:20px 20px 20px 7px;font-size:19px;line-height:1.3;box-shadow:0 16px 40px #0007;transform:rotate(-4deg)}.sticker b{color:var(--lime)}.left-sticker{left:5%;top:25%}.right-sticker{right:5%;top:31%;transform:rotate(4deg)}.horn-btn{position:absolute;left:7%;top:55%;width:96px;height:96px;border-radius:50%;background:#b8f53c;color:#14200e;border:6px solid #efffc8;font-size:34px;box-shadow:0 15px 40px #0007;pointer-events:auto}.horn-btn small{display:block;font-size:11px;font-weight:800;line-height:1.05;margin-top:4px}.mood-note{position:absolute;right:6%;bottom:27%;background:#f5eebd;color:#2a251c;padding:15px 20px;transform:rotate(4deg);box-shadow:0 14px 30px #0006}.mood-note small{opacity:.7}.mood-note b{font-size:18px}.late-note{position:absolute;left:6%;bottom:20%;font-size:18px;transform:rotate(-5deg);color:#fff}.late-note b{color:#ff7fd7}.next-note{position:absolute;right:7%;bottom:20%;font-size:18px;color:#d7ff5d;transform:rotate(3deg)}
.music-card{position:absolute;z-index:30;left:50%;bottom:9%;transform:translateX(-50%);width:min(850px,72vw);height:110px;border:1px solid #ffffff20;border-radius:23px;background:#090a09e8;backdrop-filter:blur(15px);display:flex;align-items:center;gap:15px;padding:14px 18px;box-shadow:0 25px 70px #0009}.cover{width:78px;height:78px;border-radius:14px;background:#c2e84a;color:#111;display:grid;place-items:center;font-size:34px;font-weight:900;flex:none}.track-meta{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.track-meta small{color:#b8f53c;font-size:10px;font-weight:800;letter-spacing:.12em}.track-meta strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-meta span{font-size:11px;opacity:.6}.music-card button{background:none;font-size:18px;min-width:34px}.music-card .play{width:54px;height:54px;border-radius:50%;background:#b8f53c;color:#101510;font-size:22px}.progress{position:absolute;left:112px;right:120px;bottom:10px;height:3px;background:#ffffff25;border-radius:3px}.progress span{display:block;width:35%;height:100%;background:#b8f53c;border-radius:3px}.vibes{position:absolute;z-index:25;left:50%;bottom:1.5%;transform:translateX(-50%);display:flex;gap:9px;align-items:center;width:min(1100px,90vw);padding:7px 10px;border:1px solid #ffffff22;border-radius:18px;background:#0b0d0dcc;backdrop-filter:blur(10px);overflow:auto}.vibes span{color:#b8f53c;white-space:nowrap;font-size:12px}.vibes b{font-size:11px;white-space:nowrap;padding:9px 13px;border-radius:11px;background:#ffffff0d;font-weight:600}

/* classic / 25+ */
.classic-screen{background:#0e0c0a}
.classic-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.38)),url("assets/images/auto-pov.jpg") center/cover;filter:saturate(.78) contrast(1.02) brightness(1.12)}
.classic-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),transparent 35%,rgba(0,0,0,.48) 100%)}
.classic-content{position:absolute;inset:0;z-index:20}
.classic-boring-tag{position:absolute;top:13%;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.12em;padding:7px 12px;border:1px solid #fff2;border-radius:999px;background:#15110dcc;color:#d6cbbd}
.classic-title{position:absolute;top:19%;left:50%;transform:translateX(-50%);width:min(850px,90vw);text-align:center;font-size:clamp(34px,5vw,64px);font-weight:900;letter-spacing:-.045em;text-shadow:0 6px 28px #000}.classic-title small{display:block;margin-top:9px;font-size:clamp(16px,2vw,24px);font-weight:500;color:#d9cdbc}.classic-title small b{color:#f2b45b}
.classic-cargo{position:absolute;right:7%;top:25%;padding:10px 14px;border:1px dashed #c49a5b77;border-radius:9px;background:#1a1510dd;color:#eadfce;font-size:12px;transform:rotate(2deg);box-shadow:0 12px 30px #0007}
.classic-thoughts{position:absolute;max-width:250px;padding:12px 15px;background:#efe2b9;color:#2b2419;border-radius:7px 18px 18px 18px;font-size:13px;font-weight:750;box-shadow:5px 8px 25px #0006;transition:.35s;z-index:25}.thought1{left:5%;top:28%;transform:rotate(-3deg)}.thought2{right:5%;top:30%;transform:rotate(3deg);background:#e8d5ad}.thought3{left:8%;bottom:35%;transform:rotate(2deg);background:#f0e0b8}.thought4{right:8%;bottom:38%;transform:rotate(-3deg);background:#ead9b5}.classic-thoughts.fade{opacity:.35;transform:scale(.98)}
.classic-quote{position:absolute;top:52%;left:50%;transform:translateX(-50%);padding:9px 16px;border-radius:999px;background:#090807cc;border:1px solid #fff2;color:#f2e7d5;font-size:13px;white-space:nowrap}.classic-quote b{color:#f0b05a}
.classic-player{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);width:min(820px,80vw);height:106px;background:rgba(10,9,8,.91);border:1px solid #ffffff30;border-radius:22px;display:flex;align-items:center;gap:12px;padding:13px 18px;backdrop-filter:blur(14px);box-shadow:0 20px 50px #0008}.classic-player .cover{background:#8b7355;color:#fff3df}.classic-player button{background:#ffffff12;min-width:38px;height:38px;border-radius:50%;font-size:15px}.classic-player .play{width:52px;height:52px;border-radius:50%;background:#f0e5d1;color:#17130f;font-size:20px;font-weight:900}.classic-player button:hover{background:#ffffff24}.classic-player .progress{left:112px;right:126px}
.classic-horn{position:absolute;left:6%;bottom:23%;display:flex;align-items:center;gap:10px;color:#e7d8c3;font-size:12px;line-height:1.1}.classic-horn button{width:66px;height:66px;border-radius:50%;background:#c18d43;color:#21180e;font-size:25px;border:4px solid #2b2116;box-shadow:0 10px 25px #0008}.classic-horn small{font-size:10px;color:#bcae9d}
.classic-chaos{position:absolute;left:50%;bottom:27%;transform:translateX(-50%);display:flex;gap:7px;justify-content:center;flex-wrap:wrap;width:min(800px,84vw)}.classic-chaos span{padding:6px 9px;border-radius:999px;background:#161311cc;border:1px solid #fff2;color:#cfc3b4;font-size:10px}
.classic-nav{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);width:min(720px,82vw);display:flex;justify-content:space-around;padding:9px;border:1px solid #fff2;border-radius:16px;background:#080706d9}.classic-nav button{background:none;display:flex;flex-direction:column;gap:4px;align-items:center;color:#ddd2c2}.classic-nav small{font-size:10px}
.start-overlay{position:fixed;z-index:100;inset:0;background:rgba(0,0,0,.62);display:grid;place-items:center;text-align:center}.start-overlay button{background:var(--lime);color:#10200c;padding:18px 30px;border-radius:999px;font-weight:900;font-size:17px;box-shadow:0 15px 50px #0008}.start-overlay small{position:absolute;top:57%;opacity:.7}
#ytPlayer{position:fixed;width:1px;height:1px;left:-10px;top:-10px;opacity:.01;pointer-events:none}
.page-enter{animation:pageEnter .45s ease both}@keyframes pageEnter{from{opacity:0;transform:scale(1.01)}to{opacity:1;transform:scale(1)}}

@media(max-width:700px){
 .topbar,.gate-top{height:58px;padding:0 15px}.brand{font-size:10px}.live,.mini-live{font-size:10px;padding:8px 10px}.top-actions button{padding:8px 10px}.top-actions button span{display:none}
 .gate-content{top:49%}.gate-content h1{font-size:42px}.gate-content p{font-size:13px}.age-cards{gap:9px}.age-card{padding:17px 9px;border-radius:18px}.age-card strong{font-size:45px}.age-card.classic strong{font-size:40px}.age-card>b{font-size:15px}.age-card span{font-size:9px}.age-card em{font-size:10px;padding:9px}
 .hero-line{top:14%;font-size:33px}.sticker{font-size:14px;padding:12px 14px}.left-sticker{left:3%;top:24%}.right-sticker{right:3%;top:29%}.horn-btn{left:5%;top:52%;width:72px;height:72px;font-size:25px;border-width:5px}.horn-btn small{font-size:10px}.mood-note{right:3%;bottom:32%;font-size:12px;padding:9px}.mood-note b{font-size:14px}.late-note{font-size:13px;bottom:25%}.next-note{font-size:12px;bottom:26%}
 .music-card{bottom:8%;width:94vw;height:86px;padding:9px 10px;gap:8px}.cover{width:54px;height:54px;font-size:23px}.track-meta strong{font-size:12px}.track-meta span{font-size:9px}.music-card>button{font-size:14px;min-width:24px}.music-card .play{width:41px;height:41px}.progress{left:74px;right:98px;bottom:7px}.vibes{bottom:0;width:96vw}.vibes b{font-size:9px;padding:7px 9px}
 .classic-title{top:17%;font-size:39px}.classic-cargo{right:4%;top:27%;font-size:10px}.classic-thoughts{font-size:11px;max-width:205px}.thought1{left:3%;top:29%}.thought2{right:3%;top:31%}.thought3{left:4%;bottom:35%}.thought4{right:4%;bottom:39%}.classic-quote{top:48%;font-size:10px}.classic-player{bottom:10%;width:94vw;height:82px}.classic-horn{bottom:22%;left:4%}.classic-nav{bottom:1%;width:95vw}.classic-chaos{bottom:25%;width:90vw}.change-mode{bottom:66px}
}

.classic-screen .live{background:#11100ed9;border-color:#ffffff42}.classic-screen .classic-boring-tag{background:#15120fd9}.classic-screen .classic-quote{background:#090807e0;box-shadow:0 8px 25px #0006}.classic-screen .track-meta strong{color:#fff}.classic-screen .track-meta span{color:#cfc4b5}

/* Classic V4 refinements */
.classic-screen .classic-boring-tag{display:none!important}
.classic-screen .classic-thoughts{
  min-width:190px;
  max-width:300px;
  padding:16px 20px;
  font-size:15px;
  line-height:1.35;
  letter-spacing:.1px;
  z-index:40;
}
.classic-screen .thought1{left:5%;top:27%}
.classic-screen .thought2{right:5%;top:28%}
.classic-screen .thought3{left:7%;bottom:34%}
.classic-screen .thought4{right:7%;bottom:36%}
.classic-screen .classic-quote{display:none}
.classic-screen .classic-chaos{
  z-index:45;
}
.classic-screen .classic-nav{
  z-index:50;
}
.classic-screen .classic-nav button{
  cursor:pointer;
  min-width:74px;
  height:52px;
  font-size:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.55);
  color:#fff;
  transition:transform .18s,background .18s;
}
.classic-screen .classic-nav button:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.12);
}
.classic-screen .classic-nav button small{
  display:block;
  font-size:10px;
  margin-top:3px;
}
.classic-screen .change-mode{
  z-index:80;
  right:22px;
  bottom:18px;
  padding:13px 22px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(10,10,10,.72);
  color:#fff;
  border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.classic-screen .track-meta{
  min-width:0;
  flex:1;
}
.classic-screen .track-meta strong{
  display:block;
  max-width:380px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:16px;
}
.classic-screen .track-meta span{
  display:block;
  font-size:11px;
}
.classic-screen .classic-player button{
  position:relative;
  z-index:60;
  cursor:pointer;
}
@media (max-width:800px){
  .classic-screen .classic-thoughts{
    min-width:145px;
    max-width:205px;
    padding:11px 13px;
    font-size:12px;
  }
  .classic-screen .thought1{left:3%;top:27%}
  .classic-screen .thought2{right:3%;top:29%}
  .classic-screen .thought3{left:3%;bottom:35%}
  .classic-screen .thought4{right:3%;bottom:38%}
  .classic-screen .change-mode{right:12px;bottom:12px;padding:10px 16px;font-size:12px}
}

/* V5: make bottom controls unquestionably clickable */
.classic-screen .classic-nav{
  z-index:200!important;
  pointer-events:auto!important;
}
.classic-screen .classic-nav button{
  position:relative;
  z-index:201!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.classic-screen .classic-player{
  z-index:150!important;
}
.classic-screen .change-mode{
  z-index:220!important;
}