/* CodeLine Digital Universe — HUD & panel styles (extracted from Home/Index).
   Lives in wwwroot so styling changes never require an app rebuild. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;overflow:hidden!important;background:#000;font-family:'Cairo',sans-serif;cursor:none;}
body>div[style*="margin-top"]{margin-top:0!important;overflow:hidden;position:fixed;inset:0;z-index:0;}
#mainNavbar{transition:opacity .5s,transform .5s;background:rgba(0,0,0,.4)!important;backdrop-filter:blur(8px)!important;border-bottom:1px solid rgba(0,200,255,.1)!important;z-index:2000;}
#mainNavbar.nav-hidden{opacity:0;pointer-events:none;transform:translateY(-100%);}
#cl-gl{position:fixed;inset:0;z-index:1;display:block;}
#cl-cur{position:fixed;width:10px;height:10px;border-radius:50%;background:rgba(0,220,255,.9);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);box-shadow:0 0 12px rgba(0,220,255,.7);}
#cl-cur-ring{position:fixed;width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,220,255,.5);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .2s,height .2s,border-color .2s;}
body.hovering #cl-cur{width:18px;height:18px;background:rgba(0,235,205,.95);}
body.hovering #cl-cur-ring{width:52px;height:52px;border-color:rgba(0,235,205,.55);}
#cl-loading{position:fixed;inset:0;z-index:5000;background:#000;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity 1.2s;}
#cl-loading.fade-out{opacity:0;pointer-events:none;}
.cl-load-logo{font-family:'Outfit',monospace;font-size:3rem;font-weight:900;color:#fff;letter-spacing:4px;text-shadow:0 0 40px rgba(0,220,255,.6);margin-bottom:36px;}
.cl-load-logo span{color:#00e0ff;}
.cl-load-bar{width:280px;height:2px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;margin-bottom:14px;}
.cl-load-fill{height:100%;width:0%;background:linear-gradient(90deg,#00e0ff,#00ffcc);border-radius:2px;transition:width .35s;box-shadow:0 0 10px rgba(0,220,255,.8);}
.cl-load-status{color:rgba(140,200,240,.7);font-size:.8rem;letter-spacing:1px;font-family:monospace;}
.cl-load-dots::after{content:'';animation:dotA 1.4s infinite;}
@keyframes dotA{0%{content:'.';}33%{content:'..';}66%{content:'...'}}
#cl-journey-bar{position:fixed;bottom:0;left:0;width:100%;height:2px;background:rgba(255,255,255,.04);}
#cl-journey-fill{height:100%;width:0%;background:linear-gradient(90deg,#00e0ff,#00ffcc);transition:width .3s;box-shadow:0 0 8px rgba(0,220,255,.5);}
#cl-station{position:fixed;top:88px;left:50%;transform:translateX(-50%);color:rgba(200,240,255,0);font-size:.68rem;font-family:monospace;letter-spacing:4px;text-transform:uppercase;text-shadow:0 0 20px rgba(0,220,255,.8);transition:color .6s;pointer-events:none;white-space:nowrap;}
#cl-station.visible{color:rgba(0,200,255,.8);}
#cl-scroll-hint{position:fixed;bottom:34px;left:50%;transform:translateX(-50%);color:rgba(160,220,255,.6);font-size:.78rem;display:flex;align-items:center;gap:8px;pointer-events:none;transition:opacity .6s;direction:rtl;}
#cl-scroll-hint.hidden{opacity:0;}
.sh-arr{animation:shB 1.8s ease-in-out infinite;}
@keyframes shB{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}
#cl-type-badge{position:fixed;top:88px;right:80px;padding:4px 14px;border-radius:20px;font-size:.65rem;font-family:monospace;letter-spacing:2px;border:1px solid;background:rgba(0,4,12,.7);backdrop-filter:blur(8px);pointer-events:none;opacity:0;transition:opacity .5s;z-index:300;}
#cl-type-badge.show{opacity:1;}
#cl-daynight{position:fixed;top:94px;right:24px;width:42px;height:42px;border-radius:50%;background:rgba(0,8,20,.7);border:1px solid rgba(0,200,255,.25);color:rgba(0,200,255,.85);font-size:1.1rem;cursor:pointer;pointer-events:all;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:300;backdrop-filter:blur(8px);}
#cl-daynight:hover{border-color:rgba(0,200,255,.7);box-shadow:0 0 18px rgba(0,200,255,.3);color:#fff;}
#cl-rel-btn{position:fixed;top:144px;right:24px;width:42px;height:42px;border-radius:50%;background:rgba(0,8,20,.7);border:1px solid rgba(0,200,255,.25);color:rgba(0,200,255,.85);font-size:1rem;cursor:pointer;pointer-events:all;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:300;backdrop-filter:blur(8px);}
#cl-rel-btn:hover{border-color:rgba(0,200,255,.7);box-shadow:0 0 18px rgba(0,200,255,.3);color:#fff;}
#cl-rel-btn.on{background:rgba(0,150,200,.55);color:#fff;border-color:rgba(0,230,255,.85);box-shadow:0 0 22px rgba(0,220,255,.55);}
#cl-nav-dots{position:fixed;right:28px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;pointer-events:all;z-index:300;}
.cl-dot{width:6px;height:6px;border-radius:50%;background:rgba(0,200,255,.2);border:1px solid rgba(0,200,255,.35);cursor:pointer;transition:all .3s;position:relative;}
.cl-dot:hover{background:rgba(0,200,255,.6);transform:scale(1.4);}
.cl-dot.active{background:rgba(0,200,255,.9);box-shadow:0 0 10px rgba(0,200,255,.6);}
.cl-dot-label{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:rgba(0,200,255,.8);font-size:.65rem;font-family:monospace;white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none;direction:rtl;}
.cl-dot:hover .cl-dot-label{opacity:1;}
#cl-social{position:fixed;left:24px;bottom:76px;display:flex;flex-direction:column;gap:12px;z-index:300;pointer-events:all;animation:floaty 8s ease-in-out infinite;}
.cl-soc{width:40px;height:40px;border-radius:50%;background:rgba(0,8,20,.75);border:1px solid rgba(0,200,255,.18);color:rgba(0,200,255,.72);font-size:.95rem;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all .3s;backdrop-filter:blur(8px);}
.cl-soc:hover{border-color:rgba(0,200,255,.7);color:#fff;box-shadow:0 0 16px rgba(0,200,255,.32);transform:scale(1.15);}
#cl-event-msg{position:fixed;top:86px;left:50%;transform:translateX(-50%);background:rgba(0,4,16,.8);border:1px solid rgba(0,200,255,.18);color:rgba(0,220,255,.88);padding:6px 20px;border-radius:30px;font-size:.68rem;font-family:monospace;letter-spacing:2px;pointer-events:none;opacity:0;transition:opacity .4s;backdrop-filter:blur(8px);z-index:250;white-space:nowrap;}
#cl-event-msg.show{opacity:1;}
#cl-narration{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);max-width:580px;text-align:center;color:rgba(200,235,255,0);font-size:1.05rem;line-height:1.85;direction:rtl;pointer-events:none;z-index:200;transition:color .8s;text-shadow:0 2px 20px rgba(0,0,0,.9);}
#cl-narration.show{color:rgba(200,235,255,.82);}
.holo-panel{position:fixed;z-index:400;background:rgba(0,5,18,.88);border:1px solid rgba(0,200,255,.25);border-radius:12px;backdrop-filter:blur(22px);box-shadow:0 0 50px rgba(0,140,255,.1);color:rgba(200,240,255,.95);font-family:'Cairo',sans-serif;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .5s,transform .5s;}
.holo-panel::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,180,255,.012) 3px,rgba(0,180,255,.012) 4px);pointer-events:none;z-index:1;}
.holo-panel.open{opacity:1;pointer-events:all;}
.holo-inner{position:relative;z-index:2;padding:22px;}
#proj-holo{right:24px;top:50%;transform:translateY(-46%) translateX(28px);width:min(360px,40vw);max-height:78vh;overflow-y:auto;}
#proj-holo.open{transform:translateY(-50%) translateX(0);}
.ph-type-tag{display:inline-block;padding:2px 10px;border-radius:12px;font-size:.6rem;font-family:monospace;letter-spacing:1.5px;border:1px solid;margin-bottom:8px;}
.ph-title{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:2px;direction:rtl;}
.ph-cat{font-size:.66rem;color:rgba(0,200,255,.72);font-family:monospace;letter-spacing:1px;margin-bottom:12px;}
.ph-desc{font-size:.8rem;color:rgba(180,220,255,.76);line-height:1.7;direction:rtl;margin-bottom:12px;}
.ph-tech-wrap{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px;direction:rtl;}
.ph-tech{background:rgba(0,30,65,.6);border:1px solid rgba(0,170,255,.18);border-radius:4px;padding:2px 8px;font-size:.62rem;color:rgba(0,200,255,.8);font-family:monospace;}
.ph-meta{display:flex;gap:14px;direction:rtl;font-size:.72rem;color:rgba(130,190,235,.62);}
.ph-close{position:absolute;top:11px;left:11px;width:26px;height:26px;border-radius:50%;background:rgba(0,24,52,.8);border:1px solid rgba(0,200,255,.18);color:rgba(0,200,255,.65);font-size:.72rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:3;}
.ph-close:hover{background:rgba(180,0,40,.4);color:#fff;}
#contact-holo{left:50%;bottom:22px;transform:translateX(-50%) translateY(18px);width:min(440px,88vw);opacity:0;}
#contact-holo.open{transform:translateX(-50%) translateY(0);opacity:1;}
.ch-title{font-size:1.1rem;font-weight:700;color:#fff;text-align:center;margin-bottom:4px;direction:rtl;}
.ch-sub{font-size:.66rem;color:rgba(0,200,255,.52);text-align:center;margin-bottom:16px;font-family:monospace;letter-spacing:1px;}
.ch-field{display:block;width:100%;background:rgba(0,18,44,.6);border:1px solid rgba(0,150,255,.18);border-radius:6px;padding:9px 12px;color:rgba(220,240,255,.95);font-family:'Cairo',sans-serif;font-size:.85rem;direction:rtl;margin-bottom:9px;outline:none;transition:border-color .2s;}
.ch-field:focus{border-color:rgba(0,200,255,.45);}
.ch-field::placeholder{color:rgba(110,160,210,.35);}
.ch-btn{width:100%;padding:10px;background:linear-gradient(135deg,rgba(0,140,190,.6),rgba(0,185,170,.5));border:1px solid rgba(0,200,255,.28);border-radius:6px;color:#fff;font-family:'Cairo',sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s;margin-top:2px;}
.ch-btn:hover{border-color:rgba(0,200,255,.65);box-shadow:0 0 18px rgba(0,130,255,.28);}
.ch-status{text-align:center;margin-top:8px;font-size:.78rem;min-height:20px;direction:rtl;}
#cl-enter-btn{position:fixed;left:50%;bottom:118px;transform:translateX(-50%) translateY(10px);padding:11px 26px;border-radius:30px;background:linear-gradient(135deg,rgba(0,150,200,.55),rgba(0,200,180,.45));border:1px solid rgba(0,230,255,.55);color:#fff;font-family:'Cairo',sans-serif;font-size:.92rem;font-weight:600;cursor:pointer;pointer-events:all;z-index:350;opacity:0;backdrop-filter:blur(8px);box-shadow:0 0 24px rgba(0,200,255,.3);transition:opacity .4s,transform .4s,box-shadow .3s;}
#cl-enter-btn.show{opacity:1;transform:translateX(-50%) translateY(0);}
#cl-enter-btn:hover{box-shadow:0 0 34px rgba(0,220,255,.6);border-color:rgba(0,240,255,.9);}
#cl-interior{position:fixed;inset:0;z-index:1500;background:transparent;opacity:0;pointer-events:none;transition:opacity .8s;direction:rtl;}
#cl-interior.show{opacity:1;pointer-events:all;}
#cl-interior .ci-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(0,200,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,200,255,.05) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 28%,transparent 78%);mask-image:radial-gradient(ellipse at 50% 40%,#000 28%,transparent 78%);pointer-events:none;}
/* Above #mainNavbar (z-index:2000) — the exit button sits in the same top-left
   zone that reveals the site nav on mouse-move, so it must win that stacking
   fight even if the nav reappears while the interior is open. */
#ci-exit{position:fixed;top:20px;left:24px;padding:8px 16px;border-radius:24px;background:rgba(0,18,34,.85);border:1px solid rgba(0,200,255,.3);color:rgba(0,210,255,.9);font-family:'Cairo',sans-serif;font-size:.82rem;cursor:pointer;pointer-events:all;z-index:2100;transition:all .25s;}
#ci-exit:hover{border-color:rgba(0,230,255,.8);color:#fff;box-shadow:0 0 18px rgba(0,200,255,.35);}
.ci-wrap{position:fixed;top:0;right:0;width:min(420px,92vw);height:100%;overflow-y:auto;background:linear-gradient(to left,rgba(0,8,18,.93),rgba(0,8,18,.55) 75%,transparent);padding:84px 26px 40px;animation:floaty 7s ease-in-out infinite;}
.ci-badge{display:inline-block;padding:4px 14px;border-radius:14px;font-size:.66rem;font-family:monospace;letter-spacing:2px;border:1px solid rgba(0,210,255,.45);color:rgba(0,220,255,.9);margin-bottom:14px;}
.ci-title{font-size:2.4rem;font-weight:900;color:#fff;margin:0 0 6px;text-shadow:0 0 30px rgba(0,200,255,.4);}
.ci-sub{display:flex;flex-wrap:wrap;gap:16px;color:rgba(150,210,245,.8);font-size:.82rem;margin-bottom:22px;}
.ci-desc{color:rgba(200,228,248,.85);font-size:1rem;line-height:1.95;margin-bottom:8px;}
.ci-section-t{color:rgba(0,210,255,.8);font-size:.8rem;font-family:monospace;letter-spacing:2px;margin:26px 0 12px;}
.ci-tech{display:flex;flex-wrap:wrap;gap:10px;}
.ci-tech span{background:rgba(0,40,70,.6);border:1px solid rgba(0,180,255,.3);border-radius:8px;padding:7px 14px;font-size:.82rem;color:rgba(190,230,255,.92);box-shadow:0 0 14px rgba(0,150,255,.08);}
.ci-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.ci-gallery img{width:100%;height:120px;object-fit:cover;border-radius:10px;border:1px solid rgba(0,180,255,.25);background:rgba(0,18,34,.6);cursor:zoom-in;transition:transform .2s,border-color .2s,box-shadow .2s;}
.ci-gallery img:hover{transform:scale(1.035);border-color:rgba(0,220,255,.6);box-shadow:0 0 18px rgba(0,180,255,.25);}

/* ── Project image lightbox (interior gallery) — full-quality view, no easy save ── */
#ci-lightbox{position:fixed;inset:0;z-index:3000;background:rgba(0,4,10,.94);backdrop-filter:blur(14px);
    display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;}
#ci-lightbox.open{opacity:1;pointer-events:all;}
#ci-lightbox-img{max-width:min(92vw,1600px);max-height:88vh;object-fit:contain;border-radius:10px;
    box-shadow:0 0 60px rgba(0,180,255,.18);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
    pointer-events:none;transform:scale(.97);transition:transform .3s;}
#ci-lightbox.open #ci-lightbox-img{transform:scale(1);}
#ci-lightbox-close{position:fixed;top:22px;left:26px;width:44px;height:44px;border-radius:50%;background:rgba(0,18,34,.85);
    border:1px solid rgba(0,200,255,.3);color:rgba(0,210,255,.9);font-size:1.1rem;cursor:pointer;display:flex;
    align-items:center;justify-content:center;transition:all .2s;z-index:1;}
#ci-lightbox-close:hover{border-color:rgba(0,230,255,.8);color:#fff;box-shadow:0 0 18px rgba(0,200,255,.35);}
.ci-lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
    background:rgba(0,18,34,.7);border:1px solid rgba(0,200,255,.25);color:rgba(0,210,255,.85);font-size:1.3rem;
    cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;backdrop-filter:blur(8px);}
.ci-lightbox-nav:hover{border-color:rgba(0,230,255,.8);color:#fff;box-shadow:0 0 18px rgba(0,200,255,.35);}
.ci-lightbox-nav:disabled{opacity:.25;cursor:default;box-shadow:none;}
#ci-lightbox-prev{right:26px;}
#ci-lightbox-next{left:26px;}
@media(max-width:768px){
    #ci-lightbox-close{top:14px;left:14px;width:38px;height:38px;}
    .ci-lightbox-nav{width:42px;height:42px;font-size:1.1rem;}
    #ci-lightbox-prev{right:12px;}
    #ci-lightbox-next{left:12px;}
}
#cl-overview-btn{position:fixed;top:94px;left:24px;width:42px;height:42px;border-radius:50%;background:rgba(0,8,20,.7);border:1px solid rgba(0,200,255,.25);color:rgba(0,200,255,.85);font-size:1rem;cursor:pointer;pointer-events:all;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:300;backdrop-filter:blur(8px);}
#cl-overview-btn:hover{border-color:rgba(0,200,255,.7);box-shadow:0 0 18px rgba(0,200,255,.3);color:#fff;}
#cl-finale-msg{position:fixed;left:50%;top:36%;transform:translate(-50%,-50%);text-align:center;direction:rtl;pointer-events:none;z-index:600;opacity:0;transition:opacity 1s;}
#cl-finale-msg.show{opacity:1;}
#cl-finale-msg .fin-l1{font-size:1.5rem;color:rgba(210,240,255,.92);font-weight:600;text-shadow:0 0 24px rgba(0,180,255,.6);margin-bottom:8px;}
#cl-finale-msg .fin-l2{font-size:1.9rem;color:#fff;font-weight:900;text-shadow:0 0 34px rgba(0,210,255,.8);}
#cl-overview{position:fixed;inset:0;z-index:1400;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .7s;}
#cl-overview.show{opacity:1;pointer-events:all;}
#cl-overview .ov-inner{background:rgba(0,8,20,.82);border:1px solid rgba(0,200,255,.28);border-radius:16px;backdrop-filter:blur(22px);box-shadow:0 0 60px rgba(0,140,255,.15);padding:30px 34px;max-width:min(640px,92vw);text-align:center;direction:rtl;}
.ov-title{font-size:1.5rem;font-weight:800;color:#fff;}
.ov-sub{font-size:.66rem;color:rgba(0,200,255,.55);font-family:monospace;letter-spacing:2px;margin-bottom:20px;}
.ov-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px;}
.ov-card{background:rgba(0,24,46,.6);border:1px solid rgba(0,180,255,.2);border-radius:12px;padding:14px 8px;}
.ov-num{font-size:1.8rem;font-weight:900;color:#00e0ff;font-family:'Outfit',sans-serif;text-shadow:0 0 18px rgba(0,200,255,.5);}
.ov-lbl{font-size:.74rem;color:rgba(160,210,245,.78);margin-top:4px;}
.ov-types-t{font-size:.72rem;color:rgba(0,200,255,.7);font-family:monospace;letter-spacing:1px;margin-bottom:10px;}
.ov-types{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:22px;}
.ov-chip{background:rgba(0,30,58,.6);border:1px solid rgba(0,180,255,.3);border-radius:20px;padding:6px 14px;font-size:.8rem;color:rgba(200,235,255,.9);font-family:'Cairo',sans-serif;cursor:pointer;transition:all .25s;}
.ov-chip:hover{border-color:rgba(0,230,255,.8);color:#fff;box-shadow:0 0 16px rgba(0,200,255,.35);}
.ov-chip b{color:#00e0ff;margin-right:4px;}
.ov-close{padding:10px 28px;background:linear-gradient(135deg,rgba(0,150,200,.6),rgba(0,200,180,.5));border:1px solid rgba(0,230,255,.5);border-radius:24px;color:#fff;font-family:'Cairo',sans-serif;font-weight:600;cursor:pointer;transition:all .3s;}
.ov-close:hover{box-shadow:0 0 24px rgba(0,210,255,.5);}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
#cl-planet-title{position:fixed;transform:translate(-50%,-50%);padding:5px 16px;border-radius:18px;background:rgba(0,10,22,.72);border:1px solid rgba(0,210,255,.4);color:rgba(220,245,255,.96);font-family:'Cairo',sans-serif;font-size:.9rem;font-weight:600;white-space:nowrap;pointer-events:none;z-index:340;opacity:0;backdrop-filter:blur(8px);box-shadow:0 0 18px rgba(0,180,255,.25);transition:opacity .25s,border-color .25s,box-shadow .25s;direction:rtl;text-align:center;}
#cl-planet-title.show{opacity:1;}
#cl-planet-title.hov{border-color:rgba(0,240,255,.85);box-shadow:0 0 26px rgba(0,220,255,.55);color:#fff;}
#cl-planet-title::after{content:'⬡ اضغط على الكوكب لعرض تفاصيل وصور المشروع';display:block;font-size:.58rem;font-family:monospace;color:rgba(0,210,255,.75);letter-spacing:.5px;margin-top:2px;opacity:.85;transition:opacity .25s,color .25s;}
#cl-planet-title.hov::after{opacity:1;color:rgba(0,230,255,.95);}
#cl-flash{position:fixed;inset:0;z-index:1700;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(185,242,255,.95),rgba(80,185,255,.7) 40%,rgba(0,20,40,0) 75%);opacity:0;transition:opacity .26s;}
#cl-flash.on{opacity:1;}
#cl-world-labels{position:fixed;inset:0;z-index:1480;pointer-events:none;}
#cl-world-labels .wl{position:absolute;transform:translate(-50%,-160%);padding:3px 10px;border-radius:12px;background:rgba(0,12,24,.72);border:1px solid rgba(0,200,255,.35);color:rgba(210,240,255,.95);font-family:'Outfit','Cairo',sans-serif;font-size:.72rem;white-space:nowrap;backdrop-filter:blur(6px);box-shadow:0 0 12px rgba(0,160,255,.2);}
body.planet-hover #cl-cur{width:20px;height:20px;background:rgba(0,235,205,.95);}
body.planet-hover #cl-cur-ring{width:58px;height:58px;border-color:rgba(0,235,205,.6);}
@media(max-width:768px){
    #cl-nav-dots{display:none;}
    #cl-social{left:10px;bottom:56px;}
    .cl-soc{width:34px;height:34px;font-size:.8rem;}
    /* Typed project-detail card is desktop-only — the floating title
       (#cl-planet-title) stays. Forced in CSS (not just gated in JS) so it
       can never slip through: CSS re-evaluates live on every resize, while
       the JS IS_MOB check is a load-time constant that would go stale if the
       viewport is resized/rotated after the page already loaded. */
    #proj-holo, #proj-holo.open{display:none!important;}
    #contact-holo{width:92vw;}
}

/* ══════════ Bi-Dimensional Universe — UI color language ══════════
   The engine flips body.dim-day mid-crossing; these transitions ease the
   HUD between the night language (cyan/mystery) and the day language
   (warm gold-white/hope). Slow, staged, never a snap. */
#cl-daynight,#cl-rel-btn,#cl-overview-btn,.cl-soc,#cl-station,#cl-narration,#cl-type-badge,
#cl-journey-fill,#cl-planet-title,.holo-panel,#cl-enter-btn,#cl-event-msg,.cl-dot{
    transition-property:color,background,background-color,border-color,box-shadow,opacity,transform,width;
    transition-duration:1.4s;transition-timing-function:cubic-bezier(.3,.6,.2,1);}
body.dim-day #cl-daynight,body.dim-day #cl-rel-btn,body.dim-day #cl-overview-btn,body.dim-day .cl-soc{
    border-color:rgba(255,205,130,.4);color:rgba(255,222,170,.92);background:rgba(20,26,16,.55);}
body.dim-day #cl-journey-fill{background:linear-gradient(90deg,#ffd27a,#9fe8ff);box-shadow:0 0 8px rgba(255,210,130,.5);}
body.dim-day #cl-station.visible{color:rgba(255,222,170,.85);text-shadow:0 0 20px rgba(255,200,120,.7);}
body.dim-day #cl-narration.show{color:rgba(255,244,225,.88);}
body.dim-day #cl-planet-title{border-color:rgba(255,210,140,.55);box-shadow:0 0 18px rgba(255,190,110,.28);}
body.dim-day .holo-panel{border-color:rgba(255,205,130,.3);box-shadow:0 0 50px rgba(255,170,80,.08);}
body.dim-day #cl-enter-btn{background:linear-gradient(135deg,rgba(220,160,60,.5),rgba(120,200,220,.45));border-color:rgba(255,220,150,.6);}
body.dim-day .cl-dot.active{background:rgba(255,210,130,.9);box-shadow:0 0 10px rgba(255,200,120,.6);}
body.dim-day #cl-event-msg{color:rgba(255,225,175,.9);border-color:rgba(255,205,130,.25);}

/* Soft dimensional veil during the crossing (reuses #cl-flash, gentler look) */
#cl-flash.dim-veil{
    background:radial-gradient(circle at 50% 45%,rgba(255,244,224,.5),rgba(160,214,255,.28) 45%,rgba(10,20,40,0) 80%);
    transition:opacity 2.6s cubic-bezier(.3,.6,.2,1);}
#cl-flash.dim-veil.on{opacity:.34;}

/* Accessibility: respect reduced motion in the DOM layer too */
@media (prefers-reduced-motion:reduce){
    .sh-arr,#cl-social{animation:none;}
    .ci-wrap{animation:none;}
}