:root{color-scheme:dark;--green:#78ff20;--bg:#010403}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;height:100dvh;background:#010403;overflow:hidden}
body{font-family:Arial,Helvetica,sans-serif;color:#fff}
button,a{-webkit-tap-highlight-color:transparent}
.world{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden;background:#010403}
.backdrop{position:absolute;inset:-8%;background:url('assets/rap-universe-desktop.png') center/cover no-repeat;filter:blur(36px) brightness(.23) saturate(1.15);transform:scale(1.08);opacity:.8}
.viewport{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;overscroll-behavior:none;touch-action:pan-x}
.artboard{position:relative;aspect-ratio:16/9;height:100%;max-width:100%;flex:0 0 auto;overflow:hidden;isolation:isolate;transform:scale(1);filter:brightness(1);transition:transform .56s cubic-bezier(.2,.75,.2,1),filter .44s ease,opacity .38s ease;background:#020605}
.world-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;user-select:none;-webkit-user-drag:none;z-index:0}
#cityFx{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:.78}
.rain{position:absolute;inset:-20%;z-index:1;pointer-events:none;opacity:.15;background-image:repeating-linear-gradient(100deg,transparent 0 13px,rgba(205,235,255,.26) 14px,transparent 15px 36px);background-size:82px 230px;filter:blur(.35px);transform:rotate(-2deg);animation:rainFall 1.5s linear infinite}
.haze,.neon-breathe{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.haze{z-index:3;filter:blur(24px);opacity:.14}
.haze-a{background:radial-gradient(ellipse at 50% 76%,rgba(95,255,20,.32),transparent 34%);animation:hazeMove 10s ease-in-out infinite alternate}
.haze-b{background:radial-gradient(ellipse at 16% 67%,rgba(0,190,255,.18),transparent 24%),radial-gradient(ellipse at 83% 63%,rgba(210,45,255,.18),transparent 25%);animation:hazeMove 14s ease-in-out infinite alternate-reverse}
.neon-breathe{z-index:1;background:radial-gradient(circle at 50% 35%,rgba(110,255,30,.08),transparent 31%),radial-gradient(circle at 82% 43%,rgba(220,40,255,.055),transparent 24%),radial-gradient(circle at 16% 45%,rgba(20,190,255,.05),transparent 22%);animation:neonBreathe 6.5s ease-in-out infinite}
.hotspot,.district{position:absolute;z-index:5;border:0;background:transparent;padding:0;cursor:pointer;outline:none;touch-action:pan-x}
.back-hotspot{left:84.7%;top:1.2%;width:11.2%;height:5.6%}.sound-hotspot{left:.8%;top:89.2%;width:34.2%;height:9.4%}.social-hotspot{left:68.4%;top:89.2%;width:30.6%;height:9.4%}
.district{border-radius:9px}
.district::before{content:"";position:absolute;pointer-events:none;opacity:0;transition:opacity .22s ease,transform .28s ease;inset:8%;border-radius:18px;box-shadow:0 0 20px rgba(var(--glow),.42),inset 0 0 20px rgba(var(--glow),.09);transform:scale(.992)}
.district:hover::before,.district:focus-visible::before{opacity:.72;transform:scale(1.01)}
.district:focus-visible{outline:1px solid rgba(var(--glow),.86);outline-offset:2px}
.district-professor{--glow:190,45,255;left:1.2%;top:7%;width:25.3%;height:31.6%}
.district-coderage{--glow:0,205,255;left:2.3%;top:38.7%;width:24.5%;height:23.6%}
.district-furie{--glow:255,92,15;left:2.0%;top:61.2%;width:24.8%;height:28.2%}
.district-aislop{--glow:115,255,20;left:36.2%;top:19%;width:29.2%;height:67.5%}
.district-purplehex{--glow:222,55,255;left:73.8%;top:13%;width:24.2%;height:43.6%}
.district-stronger{--glow:220,220,220;left:72.1%;top:56%;width:26.1%;height:33%}
.artboard.departing{transform:scale(1.075);filter:brightness(.58) saturate(1.18);opacity:.94;transform-origin:var(--zoom-x,50%) var(--zoom-y,50%)}
.transition{position:fixed;inset:0;z-index:100;pointer-events:none;background:rgba(0,0,0,0);opacity:0;transition:opacity .38s ease,background .38s ease}.transition.active{opacity:1;background:rgba(1,4,2,.86);pointer-events:auto}.transition-core{position:absolute;left:var(--x,50%);top:var(--y,50%);width:22vmin;height:22vmin;border-radius:50%;transform:translate(-50%,-50%) scale(.25);background:radial-gradient(circle,rgba(var(--flash,115,255,20),.86),rgba(var(--flash,115,255,20),.13) 43%,transparent 72%);filter:blur(13px);opacity:0;transition:transform .5s ease-out,opacity .24s ease}.transition.active .transition-core{transform:translate(-50%,-50%) scale(4.6);opacity:.66}
.toast{position:fixed;z-index:120;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%,18px);opacity:0;background:rgba(3,8,5,.95);border:1px solid rgba(132,255,35,.42);box-shadow:0 0 25px rgba(95,255,20,.14);padding:11px 15px;color:#e8ffe0;text-transform:uppercase;letter-spacing:.11em;font-size:11px;white-space:nowrap;pointer-events:none;transition:.22s ease}.toast.show{opacity:1;transform:translate(-50%,0)}
.story-modal{width:min(620px,calc(100% - 28px));max-height:min(82dvh,760px);padding:0;border:1px solid rgba(132,255,35,.42);background:linear-gradient(145deg,rgba(9,18,11,.99),rgba(2,5,3,.99));color:#f2f5ef;box-shadow:0 24px 90px #000,0 0 40px rgba(80,255,25,.13);overflow:auto}.story-modal::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(5px)}.story-modal article{position:relative;padding:38px}.close-modal{position:absolute;right:13px;top:8px;border:0;background:transparent;color:#fff;font-size:31px;cursor:pointer}.kicker{color:var(--green);font-size:11px;letter-spacing:.28em}.story-modal h2{margin:.4em 0;font-size:clamp(25px,4vw,40px);font-weight:800;text-transform:uppercase}.story-modal p{line-height:1.68;color:#cfd5ce;white-space:pre-line}.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.modal-actions a,.modal-actions button{border:1px solid rgba(132,255,35,.5);background:rgba(91,255,20,.06);color:#eaffdf;padding:11px 15px;text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-size:11px;cursor:pointer}.modal-actions a:hover{background:rgba(91,255,20,.14)}
.mobile-hub,.mobile-sound,.pan,.drag-hint{display:none}
@keyframes rainFall{from{background-position:0 -220px}to{background-position:34px 220px}}
@keyframes hazeMove{from{transform:translate3d(-2%,2%,0) scale(1)}to{transform:translate3d(3%,-2%,0) scale(1.07)}}
@keyframes neonBreathe{0%,100%{opacity:.55}50%{opacity:1}}

@media(max-aspect-ratio:1/1){
  .viewport{display:block;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x}
  .viewport::-webkit-scrollbar{display:none}
  .artboard{height:100%;height:100dvh;width:auto;max-width:none;min-width:177.7778dvh;aspect-ratio:16/9}
  .rain{opacity:.09}.haze{opacity:.11}#cityFx{opacity:.64}
  .district::before{display:none}
  .mobile-hub,.mobile-sound,.pan,.drag-hint{display:flex;position:fixed;z-index:45;align-items:center;justify-content:center}
  .mobile-hub{right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));height:38px;padding:0 13px;border:1px solid rgba(125,255,48,.38);border-radius:8px;background:rgba(1,7,3,.78);backdrop-filter:blur(7px);color:#dfffd5;text-decoration:none;font-size:11px;letter-spacing:.12em}
  .mobile-sound{left:max(10px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));width:38px;height:38px;border:1px solid rgba(125,255,48,.38);border-radius:50%;background:rgba(1,7,3,.78);color:#9aff4a;font-size:18px}
  .pan{top:50%;width:38px;height:64px;border:1px solid rgba(120,255,55,.25);background:rgba(1,7,3,.52);backdrop-filter:blur(5px);color:#cfffad;font-size:38px;transform:translateY(-50%);opacity:.72}
  .pan-left{left:4px;border-radius:0 12px 12px 0}.pan-right{right:4px;border-radius:12px 0 0 12px}
  .drag-hint{left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);height:24px;padding:0 9px;border-radius:20px;background:rgba(0,0,0,.52);color:rgba(230,255,223,.68);font-size:8px;letter-spacing:.18em;pointer-events:none;transition:opacity .3s ease}
  .story-modal article{padding:30px 24px 26px}
}
@media(hover:none){.district::before{display:none}}
@media(prefers-reduced-motion:reduce){.rain,.haze,.neon-breathe{animation:none}.artboard,.transition,.transition-core{transition-duration:.01ms}}
\n/* v0.3 — mobile overview + embedded stories */
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;margin:16px 0 18px;background:#000;border:1px solid rgba(132,255,35,.28);box-shadow:0 0 28px rgba(80,255,25,.08)}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-aspect-ratio:1/1){
  .viewport{overflow:auto;display:block;touch-action:pan-x pan-y;background:#010403}
  .artboard{height:auto;width:142dvh;min-width:142dvh;max-width:none;aspect-ratio:16/9;margin-top:7dvh;margin-bottom:7dvh}
  .world{overflow:hidden}
  .mobile-hub,.mobile-sound{top:max(10px,env(safe-area-inset-top))}
  .pan{top:48%}
  .drag-hint{display:none}
  .story-modal{max-height:88dvh}
}