:root{--red:#f11818;--red2:#9d0000;--blue:#178bff;--blue2:#005cc8;--dark:#050505;--line:rgba(255,35,35,.42);--bline:rgba(35,145,255,.48);--text:#f4f4f4;--muted:#bdbdbd} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#030303;color:var(--text);font-family:Inter,Arial,sans-serif;overflow-x:hidden;cursor:none}.bg{position:fixed;inset:0;z-index:-5;background:radial-gradient(circle at 12% 38%,rgba(255,0,0,.22),transparent 22%),radial-gradient(circle at 86% 36%,rgba(255,0,0,.2),transparent 24%),linear-gradient(180deg,#050505 0%,#101010 42%,#050505 100%)}.bg:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.76)),url('https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=2200&q=90') center/cover no-repeat;opacity:.78;transform:scale(1.015)}.bg:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at bottom,rgba(225,0,0,.18),transparent 46%),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:auto,130px 100%;opacity:.72}.red-orb{position:fixed;z-index:-4;width:340px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(255,0,0,.2),transparent 68%);filter:blur(16px);pointer-events:none;animation:orbFloat 12s ease-in-out infinite}.red-orb.one{left:-90px;bottom:14vh}.red-orb.two{right:-90px;top:34vh;animation-delay:-5s}.nav{height:86px;position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;padding:0 7vw;border-bottom:1px solid rgba(255,0,0,.3);background:rgba(0,0,0,.66);backdrop-filter:blur(10px);animation:navDrop .5s ease both}.brand{height:86px;width:176px;display:flex;align-items:center;justify-content:flex-start;margin-right:42px;overflow:visible;position:relative}.brand:after{content:"";position:absolute;inset:8px 90px 8px 0;border-radius:20px;background:radial-gradient(circle,rgba(255,0,0,.16),transparent 68%);filter:blur(12px);opacity:.9;animation:brandPulse 3.8s ease-in-out infinite;z-index:-1}.logo{height:74px;width:74px;object-fit:contain;display:block;border-radius:10px;filter:drop-shadow(0 0 13px rgba(255,0,0,.46));animation:logoFloat 5.8s ease-in-out infinite,logoGlow 2.6s ease-in-out infinite;will-change:transform;transform-origin:center}.brand:hover .logo{animation-duration:2.5s}.nav nav{display:flex;gap:24px;align-items:center;flex:1}.nav a{color:white;text-decoration:none;text-transform:uppercase;font-size:13px;font-weight:800;letter-spacing:.08em}.nav nav a{opacity:.9;padding:35px 0 29px;border-bottom:3px solid transparent;transition:color .18s ease,border-color .18s ease,opacity .18s ease}.nav nav a.active,.nav nav a:hover{color:var(--red);border-color:var(--red);opacity:1}.discord{border:1px solid var(--line);border-radius:6px;padding:17px 28px;background:rgba(255,0,0,.05);transition:background .18s ease,box-shadow .18s ease,transform .18s ease}.discord:hover{background:rgba(255,0,0,.13);box-shadow:0 0 18px rgba(255,0,0,.22);transform:translateY(-1px)}.hero,.civilian-hero{min-height:640px;height:100vh;max-height:780px;position:relative;display:grid;place-items:center;text-align:center;border-bottom:1px solid var(--line);overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 78%,rgba(255,0,0,.26),transparent 18%),radial-gradient(circle at 87% 76%,rgba(255,0,0,.24),transparent 22%),linear-gradient(180deg,transparent 52%,rgba(0,0,0,.95));z-index:-1;animation:heroGlow 8s ease-in-out infinite}.hero-content,.civilian-content{margin-top:72px;max-width:950px;padding:0 24px;animation:heroRise .75s ease .1s both}.hero h1,.blue-title{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(82px,10vw,170px);letter-spacing:.02em;line-height:.82;margin:0;text-transform:uppercase;text-shadow:0 0 28px rgba(0,0,0,.9)}.hero h1 span{color:var(--red);text-shadow:0 0 34px rgba(255,0,0,.48)}.hero h2{font-family:'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;font-size:clamp(32px,4vw,60px);letter-spacing:.055em;margin:18px 0 10px}.hero h2 b{color:var(--red)}.hero p,.civilian-content>p{font-size:20px;line-height:1.5;color:#eee;max-width:690px;margin:0 auto 30px}.btn{display:inline-flex;align-items:center;justify-content:center;min-width:180px;padding:18px 30px;margin:6px 8px;border-radius:4px;text-decoration:none;color:#fff;text-transform:uppercase;font-weight:900;font-size:14px;letter-spacing:.08em;border:1px solid rgba(255,255,255,.25);transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease}.btn:hover{transform:translateY(-2px)}.primary{background:linear-gradient(180deg,#ff2424,#b90000);box-shadow:0 0 22px rgba(255,0,0,.3);border-color:#ff3a3a}.primary:hover{box-shadow:0 0 28px rgba(255,0,0,.45)}.secondary{background:rgba(0,0,0,.38)}.secondary:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.08)}.blue-primary{background:linear-gradient(180deg,#2697ff,#0068d9);border-color:#46a8ff;box-shadow:0 0 22px rgba(0,120,255,.3)}.blue-primary:hover{box-shadow:0 0 28px rgba(0,140,255,.45)}.arrow{position:absolute;right:3.5vw;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.28);color:#fff;font-size:34px;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;z-index:3}.arrow:hover{transform:scale(1.06);border-color:var(--line)}.arrow.left{top:44%}.arrow.right{top:52%;color:var(--red);border-color:var(--line)}.blue-arrow.right{color:var(--blue);border-color:var(--bline)}.blue-arrow:hover{border-color:var(--bline);box-shadow:0 0 18px rgba(0,130,255,.22)}.scroll{position:absolute;bottom:26px;text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:#ddd;animation:scrollPulse 1.8s ease-in-out infinite}.panel{padding:42px 7vw 54px}.eyebrow{text-align:center;color:var(--red);text-transform:uppercase;font-weight:900;letter-spacing:.2em;font-size:12px;margin:0 0 5px}.eyebrow.blue{color:var(--blue)}.panel h3{font-family:'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;text-align:center;letter-spacing:.07em;font-size:40px;margin:0 0 26px}.crime-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.card,.rule-card,.path-card{border:1px solid rgba(255,255,255,.2);border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));text-align:center;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;contain:paint;will-change:transform;position:relative;overflow:hidden}.card{min-height:174px;padding:22px 15px}.card:hover,.rule-card:hover{transform:translateY(-3px);border-color:var(--red);background:linear-gradient(180deg,rgba(255,0,0,.08),rgba(255,255,255,.02))}.icon{height:66px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}.icon svg{width:64px;height:64px;fill:none;stroke:var(--red);stroke-width:3.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(255,0,0,.38));transition:transform .18s ease,filter .18s ease;will-change:transform}.card:hover .icon svg{transform:translateY(-2px) scale(1.06);filter:drop-shadow(0 0 13px rgba(255,0,0,.58))}.card h4,.rule-card h4,.path-card h4{text-transform:uppercase;margin:10px 0 8px;font-size:16px;letter-spacing:.04em}.card p,.rule-card p,.path-card p{color:#c9c9c9;margin:0;line-height:1.35;font-size:14px}.card:after,.path-card:after,.rule-card:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.075) 48%,transparent 72%);transform:translateX(-120%);transition:transform .5s ease;pointer-events:none}.card:hover:after,.path-card:hover:after,.rule-card:hover:after{transform:translateX(120%)}.rules-panel{border-top:1px solid rgba(255,0,0,.22);background:linear-gradient(180deg,rgba(255,0,0,.035),rgba(0,0,0,.18))}.rule-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.rule-card{min-height:150px;padding:26px 20px}.civilian-hero{border-color:var(--bline);background:radial-gradient(circle at 10% 72%,rgba(0,119,255,.33),transparent 22%),radial-gradient(circle at 88% 70%,rgba(0,119,255,.22),transparent 25%),linear-gradient(180deg,rgba(0,19,48,.36),rgba(0,0,0,.94)),url('https://images.unsplash.com/photo-1519501025264-65ba15a82390?auto=format&fit=crop&w=2200&q=90') center/cover no-repeat}.civilian-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,80,255,.18),transparent 42%,rgba(0,132,255,.18)),radial-gradient(ellipse at bottom,rgba(0,100,255,.24),transparent 45%);z-index:0;animation:bluePulse 8s ease-in-out infinite}.civilian-content{position:relative;z-index:1}.blue-title{color:#f2f8ff;text-shadow:0 0 34px rgba(0,125,255,.58)}.civilian-content .eyebrow{margin-bottom:16px}.civilian-panel{background:linear-gradient(180deg,rgba(0,105,255,.055),rgba(0,0,0,.18));border-top:1px solid rgba(0,130,255,.3)}.path-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.path-card{min-height:206px;padding:26px 18px;border-color:rgba(40,145,255,.35)}.path-card:hover,.blue-card:hover{transform:translateY(-3px);border-color:var(--blue);background:linear-gradient(180deg,rgba(0,128,255,.12),rgba(255,255,255,.02));box-shadow:0 0 22px rgba(0,120,255,.12)}.blue-icon{font-size:38px;color:var(--blue);filter:drop-shadow(0 0 10px rgba(0,125,255,.5));margin-bottom:12px}.blue-rules{background:linear-gradient(180deg,rgba(0,105,255,.05),rgba(0,0,0,.18));border-color:rgba(0,130,255,.28)}.blue-card{border-color:rgba(40,145,255,.3)}.placeholder-panel{border-top:1px solid rgba(255,0,0,.22);background:linear-gradient(180deg,rgba(255,0,0,.035),rgba(0,0,0,.18));min-height:240px}.section-copy{max-width:760px;margin:0 auto;text-align:center;color:#cfcfcf;font-size:18px;line-height:1.55}.feature-strip{position:relative;overflow:hidden;border:1px solid rgba(255,0,0,.18);margin:0 7vw 20px;border-radius:10px;padding-left:5vw;padding-right:5vw}.feature-strip:before{content:"";position:absolute;inset:auto -10% 0;height:1px;background:linear-gradient(90deg,transparent,var(--red),transparent);opacity:.6;animation:stripScan 5.5s linear infinite;will-change:transform}.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;transform:translate3d(-50%,-50%,0);display:block}.cursor-dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 15px rgba(255,0,0,.8)}.cursor-ring{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.55);box-shadow:0 0 18px rgba(255,0,0,.3);transition:width .12s ease,height .12s ease,border-color .12s ease,background .12s ease}.cursor-ring.active{width:48px;height:48px;border-color:var(--red);background:rgba(255,0,0,.08)}body.blue-mode .cursor-dot{background:var(--blue);box-shadow:0 0 15px rgba(0,130,255,.8)}body.blue-mode .cursor-ring{box-shadow:0 0 18px rgba(0,130,255,.3)}body.blue-mode .cursor-ring.active{border-color:var(--blue);background:rgba(0,130,255,.08)}.click-layer{position:fixed;inset:0;pointer-events:none;z-index:9998}.click-burst{position:fixed;width:10px;height:10px;border:1px solid var(--red);border-radius:50%;transform:translate(-50%,-50%);animation:clickBurst .45s ease-out forwards;box-shadow:0 0 20px rgba(255,0,0,.55)}body.blue-mode .click-burst{border-color:var(--blue);box-shadow:0 0 20px rgba(0,130,255,.55)}.nav,.card,.btn,.discord,.audio,.arrow,.rule-card,.path-card{cursor:none}.audio{position:fixed;right:28px;bottom:28px;z-index:20;border:1px solid var(--line);background:rgba(0,0,0,.72);color:#fff;padding:15px 24px;border-radius:999px;text-transform:uppercase;font-weight:900;box-shadow:0 0 18px rgba(255,0,0,.2);transition:background .18s ease,transform .18s ease}.audio:hover{background:rgba(255,0,0,.12);transform:translateY(-1px)}.title-shine,.title-shine-blue{position:relative;display:inline-block;overflow:hidden;isolation:isolate}.title-shine:after,.title-shine-blue:after{content:"";position:absolute;top:-15%;bottom:-15%;left:-30%;width:18%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),rgba(255,0,0,.35),transparent);filter:blur(.5px);opacity:.78;animation:titleShine 4.6s ease-in-out infinite;mix-blend-mode:screen;pointer-events:none;will-change:transform}.title-shine-blue:after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),rgba(0,140,255,.45),transparent);animation-delay:1.2s}@keyframes clickBurst{0%{opacity:.9;width:8px;height:8px}100%{opacity:0;width:54px;height:54px}}@keyframes logoGlow{0%,100%{filter:drop-shadow(0 0 13px rgba(255,0,0,.48))}50%{filter:drop-shadow(0 0 23px rgba(255,0,0,.78))}}@keyframes brandPulse{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:1;transform:scale(1.05)}}@keyframes navDrop{from{transform:translateY(-18px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes logoFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}25%{transform:translate3d(2px,-2px,0) scale(1.012)}50%{transform:translate3d(0,3px,0) scale(1.018)}75%{transform:translate3d(-2px,-1px,0) scale(1.01)}}@keyframes heroRise{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes scrollPulse{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(5px)}}@keyframes orbFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(22px,-15px,0) scale(1.06)}}@keyframes heroGlow{0%,100%{opacity:.95}50%{opacity:.72}}@keyframes bluePulse{0%,100%{opacity:.75}50%{opacity:.95}}@keyframes stripScan{from{transform:translateX(-60%)}to{transform:translateX(60%)}}@keyframes titleShine{0%,58%{transform:translateX(-220%) skewX(-22deg);opacity:0}67%{opacity:.85}82%,100%{transform:translateX(780%) skewX(-22deg);opacity:0}} @media(max-width:1250px){.nav nav{gap:15px}.nav a{font-size:12px}.crime-row{grid-template-columns:repeat(3,1fr)}.path-row{grid-template-columns:repeat(2,1fr)}.rule-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:1050px){.nav{padding:0 24px}.nav nav{display:none}.hero h1,.blue-title{font-size:84px}.brand{width:92px;margin-right:18px}.logo{height:66px;width:66px}.feature-strip{margin-left:24px;margin-right:24px}.icon svg{width:58px;height:58px}.icon{height:60px}}@media(max-width:560px){.crime-row,.path-row,.rule-grid{grid-template-columns:1fr}.hero p,.civilian-content>p{font-size:16px}.discord{display:none}.arrow{display:none}.panel{padding:32px 20px}.audio{right:16px;bottom:16px}.logo{height:62px;width:62px}.feature-strip{margin-left:16px;margin-right:16px}.title-shine:after,.title-shine-blue:after{display:none}.hero h1,.blue-title{font-size:70px}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}@media(hover:none){body{cursor:auto}.cursor-dot,.cursor-ring{display:none}.nav,.card,.btn,.discord,.audio,.arrow,.rule-card,.path-card{cursor:auto}} /* === Two-world vertical transition foundation === */ html,body{height:100%;overflow:hidden;} .world-stage{position:fixed;inset:0;overflow:hidden;background:#030303;} .world{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;transition:transform .78s cubic-bezier(.22,.86,.24,1),filter .78s ease,opacity .78s ease;will-change:transform;scroll-behavior:smooth;overscroll-behavior:contain;background:#030303;} .red-world{transform:translate3d(0,0,0);z-index:2;} .blue-world{transform:translate3d(0,100%,0);z-index:3;background:#02101f;} body.blue-mode .red-world{transform:translate3d(0,-100%,0);filter:brightness(.6);} body.blue-mode .blue-world{transform:translate3d(0,0,0);} body.world-red .blue-world{filter:brightness(.75);} .world::-webkit-scrollbar{width:8px}.world::-webkit-scrollbar-track{background:#050505}.world::-webkit-scrollbar-thumb{background:rgba(255,30,30,.55);border-radius:999px}body.blue-mode .world::-webkit-scrollbar-thumb{background:rgba(30,140,255,.65)} body.blue-mode .nav{border-bottom-color:rgba(35,145,255,.45);background:rgba(0,8,18,.72)} body.blue-mode .nav nav a.active,body.blue-mode .nav nav a:hover{color:var(--blue);border-color:var(--blue)} body.blue-mode .discord{border-color:var(--bline);box-shadow:0 0 16px rgba(0,120,255,.12)} body.blue-mode .discord:hover{background:rgba(0,120,255,.13);box-shadow:0 0 20px rgba(0,120,255,.24)} body.blue-mode .brand:after{background:radial-gradient(circle,rgba(0,130,255,.2),transparent 68%)} body.blue-mode .logo{filter:drop-shadow(0 0 17px rgba(0,130,255,.55));} .world-switch{position:fixed;right:3.4vw;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:auto;} .world-btn,.world-dot{width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:34px;line-height:1;display:grid;place-items:center;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;cursor:none;backdrop-filter:blur(6px)} .world-btn.down{color:var(--red);border-color:var(--line);box-shadow:0 0 16px rgba(255,0,0,.18)} .world-dot{width:38px;height:38px;position:relative}.world-dot:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 18px rgba(255,0,0,.82)} .world-btn:hover,.world-dot:hover{transform:scale(1.06);} body.blue-mode .world-btn.down{color:#fff;border-color:rgba(255,255,255,.25);box-shadow:none} body.blue-mode .world-btn.up{color:var(--blue);border-color:var(--bline);box-shadow:0 0 16px rgba(0,130,255,.2)} body.blue-mode .world-dot:before{background:var(--blue);box-shadow:0 0 18px rgba(0,130,255,.85)} .transition-flash{position:fixed;inset:0;pointer-events:none;z-index:25;opacity:0;background:linear-gradient(180deg,transparent,rgba(255,0,0,.28),transparent);transform:translateY(-100%);} body.switching-red .transition-flash{animation:redWipe .72s ease both}body.switching-blue .transition-flash{background:linear-gradient(180deg,transparent,rgba(0,130,255,.32),transparent);animation:blueWipe .72s ease both} @keyframes redWipe{0%{opacity:0;transform:translateY(100%)}35%{opacity:1}100%{opacity:0;transform:translateY(-100%)}} @keyframes blueWipe{0%{opacity:0;transform:translateY(-100%)}35%{opacity:1}100%{opacity:0;transform:translateY(100%)}} @media(max-width:560px){.world-switch{right:16px}.world-btn{width:42px;height:42px}.world-dot{width:34px;height:34px}} /* === PATCH: restore criminal world background + theme-aware controls === */ .world-stage{background:#030303;} .red-world{ background: radial-gradient(circle at 12% 38%,rgba(255,0,0,.22),transparent 23%), radial-gradient(circle at 86% 34%,rgba(255,0,0,.22),transparent 25%), linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.80)), url('https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=2200&q=90') center top/cover no-repeat, #030303; } .red-world .hero{ background: radial-gradient(circle at 18% 78%,rgba(255,0,0,.26),transparent 18%), radial-gradient(circle at 87% 76%,rgba(255,0,0,.24),transparent 22%), linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.22) 55%,rgba(0,0,0,.96) 100%); } .red-world .crime-panel,.red-world .red-rules{ background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.88)); } body.blue-mode .logo{ filter:drop-shadow(0 0 17px rgba(0,130,255,.65)); animation:logoFloat 5.8s ease-in-out infinite,logoGlowBlue 2.6s ease-in-out infinite; } body.blue-mode .brand:after{ background:radial-gradient(circle,rgba(0,130,255,.24),transparent 68%); } body.blue-mode .audio{ border-color:var(--bline); box-shadow:0 0 18px rgba(0,130,255,.26); color:#eef8ff; } body.blue-mode .audio:hover{ background:rgba(0,120,255,.14); } body.blue-mode .nav:before{ background:linear-gradient(90deg,transparent,var(--blue),transparent); } @keyframes logoGlowBlue{0%,100%{filter:drop-shadow(0 0 15px rgba(0,130,255,.55))}50%{filter:drop-shadow(0 0 27px rgba(0,150,255,.9))}} /* Store/business sections + expandable rules */ .store-panel{border-top:1px solid rgba(255,0,0,.25);background:linear-gradient(180deg,rgba(255,0,0,.045),rgba(0,0,0,.22));} .blue-store{border-top-color:rgba(35,145,255,.32);background:linear-gradient(180deg,rgba(0,105,255,.055),rgba(0,0,0,.24));} .business-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1180px;margin:0 auto;} .civilian-businesses{grid-template-columns:repeat(4,1fr);} .business-card{position:relative;min-height:178px;padding:24px 20px;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));overflow:hidden;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;contain:paint;} .business-card:hover{transform:translateY(-3px);border-color:var(--red);box-shadow:0 0 24px rgba(255,0,0,.12);background:linear-gradient(180deg,rgba(255,0,0,.075),rgba(255,255,255,.02));} .blue-business:hover{border-color:var(--blue);box-shadow:0 0 24px rgba(0,130,255,.14);background:linear-gradient(180deg,rgba(0,130,255,.10),rgba(255,255,255,.02));} .business-card h4{text-transform:uppercase;margin:42px 0 10px;font-size:17px;letter-spacing:.05em;} .business-card p{color:#cfcfcf;margin:0;line-height:1.45;font-size:14px;} .status{position:absolute;top:16px;left:16px;padding:7px 10px;border-radius:999px;text-transform:uppercase;font-size:11px;font-weight:900;letter-spacing:.08em;border:1px solid rgba(255,255,255,.22);} .status.available-purchase{color:#fff;background:rgba(0,210,105,.16);border-color:rgba(0,255,140,.45);box-shadow:0 0 14px rgba(0,255,140,.12);} .status.owned{color:#fff;background:rgba(255,0,0,.18);border-color:rgba(255,30,30,.45);box-shadow:0 0 14px rgba(255,0,0,.16);} .status.coming-soon{color:#fff;background:rgba(255,190,0,.16);border-color:rgba(255,205,50,.45);box-shadow:0 0 14px rgba(255,190,0,.13);} .status.staff-managed{color:#fff;background:rgba(130,70,255,.18);border-color:rgba(160,115,255,.48);box-shadow:0 0 14px rgba(140,90,255,.16);} .blue-business .status.owned{background:rgba(0,120,255,.22);border-color:rgba(40,150,255,.55);box-shadow:0 0 14px rgba(0,130,255,.18);} .business-card .owner-line{margin-top:12px;font-size:12px;color:#fff;opacity:.8;text-transform:uppercase;letter-spacing:.08em;} .business-card.available-purchase{border-color:rgba(0,255,140,.2)} .business-card.owned{border-color:rgba(255,255,255,.18)} .business-card.coming-soon{opacity:.9} .business-card.staff-managed{border-color:rgba(160,115,255,.35)} .business-card:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.07) 48%,transparent 72%);transform:translateX(-120%);transition:transform .5s ease;pointer-events:none;} .business-card:hover:after{transform:translateX(120%);} .rule-card.expandable{cursor:none;text-align:left;} .rule-card.expandable h4{position:relative;padding-right:24px;} .rule-card.expandable h4:after{content:"+";position:absolute;right:0;top:0;color:var(--red);font-size:22px;line-height:1;transition:transform .18s ease;} .rule-card.expandable.open h4:after{transform:rotate(45deg);} .blue-card.expandable h4:after{color:var(--blue);} .rule-details{max-height:0;opacity:0;overflow:hidden;margin-top:0;color:#e4e4e4;font-size:13px;line-height:1.45;border-top:1px solid transparent;transition:max-height .24s ease,opacity .18s ease,margin-top .18s ease,padding-top .18s ease,border-color .18s ease;} .rule-card.open .rule-details{max-height:180px;opacity:1;margin-top:14px;padding-top:12px;border-color:rgba(255,255,255,.16);} @media(max-width:1100px){.civilian-businesses{grid-template-columns:repeat(2,1fr)}.business-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.business-grid,.civilian-businesses{grid-template-columns:1fr}.nav nav{gap:12px}.nav a{font-size:11px}} /* Lightweight premium alive effects */ .cursor-ring.active{box-shadow:0 0 18px rgba(255,0,0,.36), inset 0 0 12px rgba(255,255,255,.08);} body.blue-mode .cursor-ring.active{box-shadow:0 0 18px rgba(0,135,255,.36), inset 0 0 12px rgba(255,255,255,.08);} .btn,.business-card,.card,.rule-card,.path-card{will-change:transform;} .title-shine,.title-shine-blue{position:relative;overflow:hidden;} .title-shine:after,.title-shine-blue:after{content:"";position:absolute;top:0;bottom:0;width:18%;transform:translateX(-180%) skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);animation:titleSweep 7.5s ease-in-out infinite;pointer-events:none;} .title-shine-blue:after{background:linear-gradient(90deg,transparent,rgba(130,210,255,.34),transparent);} @keyframes titleSweep{0%,72%{transform:translateX(-180%) skewX(-18deg)}88%,100%{transform:translateX(620%) skewX(-18deg)}} .business-card:hover,.card:hover,.rule-card:hover,.path-card:hover{transform:translateY(-4px) scale(1.01);} /* === Premium alive pack: low-cost UI polish === */ :root{--world-accent:var(--red);--world-soft:rgba(255,0,0,.18)} body.blue-mode{--world-accent:var(--blue);--world-soft:rgba(0,130,255,.2)} .preloader{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:radial-gradient(circle at center,rgba(255,0,0,.13),transparent 32%),#020202;transition:opacity .45s ease,visibility .45s ease;} .preloader img{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 0 24px rgba(255,0,0,.7));animation:preLogo 1.2s ease-in-out infinite alternate;} .preloader p{position:absolute;top:calc(50% + 88px);font-size:12px;text-transform:uppercase;font-weight:900;letter-spacing:.22em;color:#ddd;} .preloader.hide{opacity:0;visibility:hidden;} @keyframes preLogo{from{transform:translateY(2px) scale(.98)}to{transform:translateY(-2px) scale(1.02)}} .ambient-layer{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:.72;} .ambient-layer span{position:absolute;bottom:-40px;width:4px;height:4px;border-radius:50%;background:var(--world-accent);box-shadow:0 0 14px var(--world-accent);opacity:.55;animation:driftUp 10s linear infinite;} .ambient-layer span:nth-child(1){left:14%;animation-delay:-1s}.ambient-layer span:nth-child(2){left:32%;animation-delay:-6s}.ambient-layer span:nth-child(3){left:58%;animation-delay:-3s}.ambient-layer span:nth-child(4){left:75%;animation-delay:-8s}.ambient-layer span:nth-child(5){left:90%;animation-delay:-4s} @keyframes driftUp{0%{transform:translate3d(0,0,0) scale(.7);opacity:0}12%{opacity:.55}100%{transform:translate3d(34px,-105vh,0) scale(1.15);opacity:0}} .cursor-dot{background:var(--world-accent)!important;box-shadow:0 0 10px var(--world-accent)!important}.cursor-ring{border-color:var(--world-accent)!important;box-shadow:0 0 12px var(--world-soft)} .click-burst{border-color:var(--world-accent)!important;box-shadow:0 0 22px var(--world-accent)!important}.click-burst:after{background:var(--world-accent)!important} .world-indicator{position:fixed;right:7vw;top:104px;z-index:28;border:1px solid var(--world-soft);border-radius:10px;padding:10px 14px;background:rgba(0,0,0,.46);backdrop-filter:blur(7px);box-shadow:0 0 18px rgba(0,0,0,.2);text-transform:uppercase;min-width:170px;} .world-indicator span{display:block;color:#aaa;font-size:10px;letter-spacing:.18em;font-weight:900}.world-indicator b{display:block;color:var(--world-accent);font-size:15px;letter-spacing:.1em;margin-top:3px;} .server-status{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:28;display:flex;align-items:center;gap:14px;white-space:nowrap;padding:11px 17px;border-radius:999px;border:1px solid var(--world-soft);background:rgba(0,0,0,.55);backdrop-filter:blur(7px);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#d8d8d8;} .server-status b{color:#fff}.online-dot{width:9px;height:9px;border-radius:50%;background:#27ff8a;box-shadow:0 0 12px #27ff8a;animation:statusPulse 1.7s ease infinite}@keyframes statusPulse{50%{opacity:.55;transform:scale(.82)}} .time-greeting{display:inline-block;margin-top:10px;color:var(--red);font-weight:900;text-transform:uppercase;font-size:13px;letter-spacing:.12em}.blue-greeting{color:var(--blue)} .section-anchor{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}.section-anchor.in-view{opacity:1;transform:translateY(0)}.hero.section-anchor,.civilian-hero.section-anchor{opacity:1;transform:none} .business-filters{display:flex;justify-content:center;gap:10px;margin:-10px 0 22px}.filter-btn{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#fff;border-radius:999px;padding:10px 16px;text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.08em;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease}.filter-btn:hover,.filter-btn.active{border-color:var(--red);background:rgba(255,0,0,.12);box-shadow:0 0 16px rgba(255,0,0,.13);transform:translateY(-1px)}.blue-filters .filter-btn:hover,.blue-filters .filter-btn.active{border-color:var(--blue);background:rgba(0,130,255,.13);box-shadow:0 0 16px rgba(0,130,255,.14)} .business-card.is-hidden{display:none!important} /* Specific lightweight card personality effects */ .card:before,.business-card:before,.path-card:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .18s ease;pointer-events:none}.card:hover:before,.business-card:hover:before,.path-card:hover:before{opacity:1}.vibe-drug:before{background:radial-gradient(circle at 50% 100%,rgba(255,0,0,.14),transparent 44%)}.vibe-heist:before{background:radial-gradient(circle at 50% 15%,rgba(255,255,255,.10),transparent 36%)}.vibe-race:before{background:linear-gradient(110deg,transparent,rgba(255,255,255,.12),transparent)}.vibe-weapon:before{background:linear-gradient(120deg,transparent,rgba(210,210,210,.13),transparent)}.vibe-enterprise:before{background:radial-gradient(circle at 50% 45%,rgba(255,0,0,.12),transparent 44%)} .business-card.available-purchase .status{animation:badgePulse 2.5s ease-in-out infinite}@keyframes badgePulse{50%{box-shadow:0 0 22px rgba(0,255,140,.25)}} /* magnetic buttons get a visible premium edge without heavy blur */ .btn:hover,.discord:hover,.audio:hover,.world-btn:hover{box-shadow:0 0 18px var(--world-soft)} @media(max-width:900px){.server-status{left:16px;right:16px;transform:none;justify-content:center;flex-wrap:wrap;border-radius:14px}.world-indicator{right:16px;top:92px}.ambient-layer{display:none}} @media(prefers-reduced-motion:reduce){.ambient-layer,.preloader img,.title-shine:after,.title-shine-blue:after,.section-anchor,.online-dot{animation:none!important;transition:none!important}} /* === Performance fix pack === Keeps the premium look but removes the lag sources: heavy blur, constant particles, continuous parallax RAF, full-card 3D tilt, and excessive will-change. */ .nav,.world-indicator,.server-status,.world-btn,.world-dot{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;} .ambient-layer{display:none!important;} .red-orb{filter:none!important;opacity:.35!important;animation:none!important;} .bg:after{opacity:.38!important;} .world{will-change:transform;transition:transform .62s cubic-bezier(.22,.86,.24,1),opacity .55s ease!important;} .btn,.business-card,.card,.rule-card,.path-card,.icon svg,.logo{will-change:auto!important;} .business-card:hover,.card:hover,.rule-card:hover,.path-card:hover{transform:translateY(-3px)!important;} .business-card:after,.card:after,.path-card:after,.rule-card:after{transition:transform .28s ease!important;} .business-card.available-purchase .status{animation:none!important;} .online-dot{animation:none!important;} .title-shine:after,.title-shine-blue:after{animation:titleSweep 10s ease-in-out infinite!important;} .logo{animation:logoFloat 8s ease-in-out infinite,logoGlow 4s ease-in-out infinite!important;} .hero:before,.civilian-hero:before{animation:none!important;} .cursor-ring{transition:width .12s ease,height .12s ease,box-shadow .12s ease,border-color .12s ease!important;} .click-burst{animation:clickFade .34s ease-out forwards!important;} @keyframes clickFade{from{opacity:.9;transform:translate(-50%,-50%) scale(.35)}to{opacity:0;transform:translate(-50%,-50%) scale(1.9)}} @media(max-width:900px){.cursor-dot,.cursor-ring{display:none!important}body{cursor:auto!important}.title-shine:after,.title-shine-blue:after{animation:none!important}.logo{animation:none!important}} /* === Lightweight particles restored + live status states === */ .ambient-layer{display:block!important;position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:.55;} .ambient-layer span{position:absolute;bottom:-36px;width:3px;height:3px;border-radius:50%;background:var(--world-accent);box-shadow:0 0 10px var(--world-accent);opacity:.45;animation:driftUpLite 16s linear infinite;will-change:transform,opacity;} .ambient-layer span:nth-child(1){left:14%;animation-delay:-1s}.ambient-layer span:nth-child(2){left:33%;animation-delay:-8s}.ambient-layer span:nth-child(3){left:57%;animation-delay:-4s}.ambient-layer span:nth-child(4){left:76%;animation-delay:-11s}.ambient-layer span:nth-child(5){left:90%;animation-delay:-6s} @keyframes driftUpLite{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.45}100%{transform:translate3d(18px,-105vh,0);opacity:0}} .server-status.offline .online-dot{background:#ff3131;box-shadow:0 0 12px #ff3131;} .server-status.checking .online-dot{background:#ffd166;box-shadow:0 0 12px #ffd166;} @media(max-width:900px){.ambient-layer{display:none!important}} @media(prefers-reduced-motion:reduce){.ambient-layer{display:none!important}} /* === FINAL LOGO FIX: prevent blue-world logo from switching to the boxed jpeg === */ .brand{overflow:visible!important;} .logo{height:78px!important;width:78px!important;object-fit:contain!important;border-radius:0!important;background:transparent!important;} body.blue-mode .brand:after{ inset:4px 84px 4px -4px!important; background:radial-gradient(circle,rgba(0,132,255,.38),rgba(0,132,255,.12) 34%,transparent 72%)!important; filter:blur(14px)!important; } body.blue-mode .logo{ filter:drop-shadow(0 0 16px rgba(0,140,255,.78)) drop-shadow(0 0 30px rgba(0,140,255,.35))!important; } body:not(.blue-mode) .brand:after{ background:radial-gradient(circle,rgba(255,0,0,.24),rgba(255,0,0,.08) 34%,transparent 72%)!important; } /* === CIVILIAN LOGO SWITCH === */ .logo.is-blue-logo{ height:82px!important; width:82px!important; object-fit:contain!important; border-radius:8px!important; background:#000!important; } body.blue-mode .logo.is-blue-logo{ filter:drop-shadow(0 0 15px rgba(0,140,255,.85)) drop-shadow(0 0 32px rgba(0,140,255,.38))!important; } body:not(.blue-mode) .logo{ border-radius:0!important; background:transparent!important; } /* === FINAL PREMIUM PERFORMANCE PASS === Adds extra life without client-side lag: CSS-only shimmer, lightweight badge pulse, theme-aware audio/button states, stronger cursor feedback, and zero video/heavy canvas. */ body.world-red{--world-accent:#f11818;--world-soft:rgba(255,0,0,.18);--world-line:rgba(255,35,35,.42)} body.blue-mode{--world-accent:#178bff;--world-soft:rgba(0,130,255,.2);--world-line:rgba(35,145,255,.48)} .btn,.discord,.audio,.world-btn,.filter-btn{position:relative;overflow:hidden;isolation:isolate;} .btn:after,.discord:after,.audio:after,.world-btn:after,.filter-btn:after{content:"";position:absolute;inset:-40% auto -40% -55%;width:42%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);opacity:0;pointer-events:none;transition:transform .42s ease,opacity .16s ease;} .btn:hover:after,.discord:hover:after,.audio:hover:after,.world-btn:hover:after,.filter-btn:hover:after{opacity:.9;transform:translateX(360%) skewX(-18deg);} .audio{border-color:var(--world-line)!important;box-shadow:0 0 14px var(--world-soft)!important;} body.blue-mode .audio{background:rgba(0,16,36,.72)!important;color:#dff0ff!important;} body.blue-mode .audio:hover{background:rgba(0,130,255,.14)!important;} .nav nav a.active,.nav nav a:hover{color:var(--world-accent)!important;border-color:var(--world-accent)!important;} body.blue-mode .nav{border-bottom-color:rgba(35,145,255,.34)!important;} body.blue-mode .discord{border-color:rgba(35,145,255,.48)!important;background:rgba(0,130,255,.06)!important;} body.blue-mode .discord:hover{background:rgba(0,130,255,.14)!important;} .status{position:relative;} .status.available-purchase,.business-card.available-purchase .status{animation:statusBlink 3.2s ease-in-out infinite!important;} @keyframes statusBlink{0%,100%{opacity:1;transform:translateZ(0) scale(1)}50%{opacity:.82;transform:translateZ(0) scale(1.025)}} .cursor-ring.active{width:54px!important;height:54px!important;background:color-mix(in srgb,var(--world-accent) 10%,transparent)!important;} .cursor-dot{width:6px!important;height:6px!important;} .click-burst{border-color:var(--world-accent)!important;} .card:hover,.business-card:hover,.rule-card:hover,.path-card:hover{border-color:var(--world-accent)!important;} .business-card:hover,.card:hover,.rule-card:hover,.path-card:hover{box-shadow:0 0 0 1px var(--world-soft),0 10px 28px rgba(0,0,0,.24)!important;} .world-indicator,.server-status{border-color:var(--world-line)!important;} .world-indicator b{color:var(--world-accent)!important;} /* Keep particles very small and sparse. They are disabled on mobile and reduced motion. */ .ambient-layer span{width:2.5px!important;height:2.5px!important;animation-duration:18s!important;} @media(max-width:900px){ .btn:after,.discord:after,.audio:after,.world-btn:after,.filter-btn:after{display:none!important;} .business-card:hover,.card:hover,.rule-card:hover,.path-card:hover{box-shadow:none!important;} } @media(prefers-reduced-motion:reduce){ .btn:after,.discord:after,.audio:after,.world-btn:after,.filter-btn:after,.status{animation:none!important;transition:none!important;} } /* === CLEAN MODE NAV + SHRINKING HEADER FIX === */ .nav{transition:height .22s ease,padding .22s ease,background .22s ease,border-color .22s ease!important;} .nav nav{justify-content:center;min-width:0;} .nav nav a{white-space:nowrap;transition:padding .22s ease,font-size .22s ease,color .18s ease,border-color .18s ease,opacity .18s ease!important;} body.nav-compact .nav{height:64px!important;background:rgba(0,0,0,.86)!important;border-bottom-color:var(--world-line)!important;} body.nav-compact .brand{height:64px!important;width:118px!important;margin-right:26px!important;} body.nav-compact .logo{height:54px!important;width:54px!important;animation:logoFloat 5.8s ease-in-out infinite,logoGlow 2.6s ease-in-out infinite!important;} body.nav-compact .nav nav a{padding:24px 0 19px!important;font-size:12px!important;} body.nav-compact .discord{padding:12px 20px!important;} body.blue-mode .nav nav a[data-nav="primary"]::after{content:"";} .nav nav a[data-nav="home"],.nav nav a[data-nav="primary"],.nav nav a[data-nav="businesses"],.nav nav a[data-nav="rules"],.nav nav a[data-nav="join"]{display:inline-flex;align-items:center;} .nav nav a.active{color:var(--world-accent)!important;border-bottom-color:var(--world-accent)!important;} body.blue-mode .nav nav a.active,body.blue-mode .nav nav a:hover{color:#52adff!important;border-bottom-color:#52adff!important;} body:not(.blue-mode) .nav nav a.active,body:not(.blue-mode) .nav nav a:hover{color:#ff3030!important;border-bottom-color:#ff3030!important;} /* Keep the audio control locked to the bottom-right corner in every mode. */ .audio#audioToggle{position:fixed!important;right:28px!important;bottom:28px!important;left:auto!important;top:auto!important;z-index:9997!important;transform:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:118px!important;max-width:max-content!important;height:auto!important;} .audio#audioToggle:hover{transform:translateY(-1px)!important;} body.blue-mode .audio#audioToggle{border-color:rgba(35,145,255,.58)!important;box-shadow:0 0 16px rgba(0,130,255,.26)!important;} /* Make the mode switch clearer and less confusing. */ .world-indicator{top:82px!important;right:28px!important;min-width:155px!important;} body.nav-compact .world-indicator{top:72px!important;transform:scale(.92);transform-origin:top right;} .world-switch{right:28px!important;} .world-btn.up::before{content:"UNDERWORLD";position:absolute;right:58px;font-size:10px;letter-spacing:.14em;font-weight:900;color:#ff4a4a;opacity:0;transition:opacity .18s ease;pointer-events:none;} .world-btn.down::before{content:"CIVILIAN";position:absolute;right:58px;font-size:10px;letter-spacing:.14em;font-weight:900;color:#52adff;opacity:0;transition:opacity .18s ease;pointer-events:none;} .world-btn:hover::before{opacity:1;} body.blue-mode .world-btn.down{color:#52adff!important;border-color:rgba(35,145,255,.58)!important;box-shadow:0 0 16px rgba(0,130,255,.22)!important;} body:not(.blue-mode) .world-btn.up{color:#ff4a4a!important;border-color:rgba(255,35,35,.58)!important;box-shadow:0 0 16px rgba(255,0,0,.22)!important;} @media(max-width:1050px){ .nav nav{gap:18px!important;display:flex!important;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;} .nav nav::-webkit-scrollbar{display:none;} .world-indicator{display:none!important;} } @media(max-width:650px){ .audio#audioToggle{right:16px!important;bottom:16px!important;padding:12px 18px!important;min-width:100px!important;} .nav{padding:0 16px!important;} .brand{width:88px!important;margin-right:12px!important;} .nav nav{gap:16px!important;} } /* === Large bilingual rules system === */ .rule-toolkit{max-width:1040px;margin:-8px auto 24px;padding:18px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(0,0,0,.18));box-shadow:0 0 22px rgba(255,0,0,.08)} .blue-toolkit{border-color:rgba(60,150,255,.22);box-shadow:0 0 22px rgba(0,130,255,.08)} .rule-search-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-bottom:14px}.rule-search-label{text-transform:uppercase;font-weight:900;font-size:12px;letter-spacing:.12em;color:#eee;white-space:nowrap}.rule-search{width:100%;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:14px 18px;background:rgba(0,0,0,.42);color:#fff;font-weight:800;outline:none}.rule-search:focus{border-color:var(--world-accent);box-shadow:0 0 0 3px var(--world-soft)}.rule-clear,.rule-filter,.rule-lang-btn{border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.04);color:#fff;text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.08em;padding:10px 14px;transition:background .15s ease,border-color .15s ease,transform .15s ease}.rule-clear:hover,.rule-filter:hover,.rule-filter.active,.rule-lang-btn:hover,.rule-lang-btn.active{border-color:var(--world-accent);background:var(--world-soft);transform:translateY(-1px)}.rule-control-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.rule-filter-tabs,.rule-language-tabs{display:flex;gap:8px;flex-wrap:wrap}.rule-helper{margin-top:12px;display:flex;justify-content:space-between;gap:14px;color:#aaa;font-size:12px;line-height:1.4}.rule-count{color:var(--world-accent);font-weight:900;text-transform:uppercase;letter-spacing:.08em}.advanced-rule-grid{grid-template-columns:repeat(2,1fr);align-items:start}.advanced-rule-card{min-height:auto!important;padding:0!important;text-align:left!important;contain:layout paint}.advanced-rule-card.rule-hidden{display:none}.rule-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:22px 22px 8px}.rule-code{display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:7px 9px;border-radius:999px;border:1px solid var(--world-line);color:var(--world-accent);font-weight:900;font-size:12px;letter-spacing:.08em;background:var(--world-soft)}.advanced-rule-card h4{margin:0!important;padding:0!important}.advanced-rule-card h4:after{display:none!important}.expand-hint{color:#aaa;text-transform:uppercase;font-size:11px;font-weight:900;letter-spacing:.1em}.advanced-rule-card.open .expand-hint{color:var(--world-accent)}.advanced-rule-card>p{padding:0 22px 20px;margin:0!important}.advanced-rule-card .rule-details{margin:0 22px 22px!important;padding:0!important;border-top:1px solid transparent;max-height:0;overflow:hidden;opacity:0;transition:max-height .24s ease,opacity .18s ease,padding .18s ease,border-color .18s ease}.advanced-rule-card.open .rule-details{max-height:650px;overflow:auto;opacity:1;padding:16px 0 4px!important;border-color:rgba(255,255,255,.16)}.rule-lang-block{font-size:14px;line-height:1.6;color:#ddd}.rule-lang-block ol{margin:0;padding-left:22px}.rule-lang-block li{margin:0 0 8px}.rule-ar{display:none}.rules-ar .rule-en{display:none}.rules-ar .rule-ar{display:block}.rules-ar .advanced-rule-card{text-align:right!important}.rules-ar .rule-lang-block ol{padding-left:0;padding-right:22px}.rule-empty{text-align:center;color:#bbb;border:1px dashed rgba(255,255,255,.18);border-radius:12px;padding:18px;margin:20px auto 0;max-width:680px;background:rgba(255,255,255,.035)} @media(max-width:900px){.rule-search-row{grid-template-columns:1fr}.rule-search-label{white-space:normal}.advanced-rule-grid{grid-template-columns:1fr}.rule-helper{display:block}.rule-helper span{display:block;margin-top:6px}} /* Rules Reading Mode - light reading mode only for rule sections */ .rules-reading-mode .rules-panel { background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,246,250,.96)) !important; border-color: rgba(20, 30, 45, .14) !important; color: #111827 !important; box-shadow: 0 22px 70px rgba(0,0,0,.18) !important; } .rules-reading-mode .rules-panel::before, .rules-reading-mode .rules-panel::after { opacity: .08 !important; } .rules-reading-mode .rules-panel h3, .rules-reading-mode .rules-panel h4, .rules-reading-mode .rules-panel p, .rules-reading-mode .rules-panel li, .rules-reading-mode .rules-panel label, .rules-reading-mode .rules-panel span { color: #111827 !important; text-shadow: none !important; } .rules-reading-mode .rules-panel .eyebrow, .rules-reading-mode .rules-panel .eyebrow.blue { color: #9b111e !important; } .rules-reading-mode .blue-rules .eyebrow.blue { color: #1268d6 !important; } .rules-reading-mode .rule-toolkit, .rules-reading-mode .blue-toolkit { background: rgba(255,255,255,.88) !important; border: 1px solid rgba(20,30,45,.12) !important; box-shadow: 0 10px 30px rgba(16,24,40,.08) !important; } .rules-reading-mode .rule-search { background: #ffffff !important; color: #111827 !important; border: 1px solid rgba(17,24,39,.18) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7) !important; } .rules-reading-mode .rule-search::placeholder { color: #6b7280 !important; } .rules-reading-mode .rule-filter, .rules-reading-mode .rule-lang-btn, .rules-reading-mode .rule-clear, .rules-reading-mode .rules-reading-toggle { background: rgba(255,255,255,.9) !important; color: #111827 !important; border: 1px solid rgba(17,24,39,.16) !important; box-shadow: 0 8px 18px rgba(16,24,40,.08) !important; } .rules-reading-mode .rule-filter.active, .rules-reading-mode .rule-lang-btn.active, .rules-reading-mode .rules-reading-toggle.active { color: #ffffff !important; border-color: transparent !important; background: linear-gradient(135deg, #9b111e, #d71920) !important; } .rules-reading-mode .blue-rules .rule-filter.active, .rules-reading-mode .blue-rules .rule-lang-btn.active, .rules-reading-mode .blue-rules .rules-reading-toggle.active { background: linear-gradient(135deg, #1268d6, #22a7ff) !important; } .rules-reading-mode .rule-card, .rules-reading-mode .advanced-rule-card, .rules-reading-mode .blue-card { background: #ffffff !important; color: #111827 !important; border: 1px solid rgba(17,24,39,.12) !important; box-shadow: 0 14px 34px rgba(16,24,40,.10) !important; } .rules-reading-mode .rule-card:hover { transform: translateY(-2px) !important; box-shadow: 0 18px 42px rgba(16,24,40,.14) !important; } .rules-reading-mode .rule-code { color: #ffffff !important; background: linear-gradient(135deg, #9b111e, #d71920) !important; border: none !important; } .rules-reading-mode .blue-rules .rule-code { background: linear-gradient(135deg, #1268d6, #22a7ff) !important; } .rules-reading-mode .rule-details { background: rgba(248,250,252,.95) !important; border-color: rgba(17,24,39,.10) !important; } .rules-reading-mode .rule-lang-block { color: #111827 !important; } .rules-reading-mode .rule-lang-block b { color: #0f172a !important; } .rules-reading-mode .rule-helper { color: #374151 !important; } .rules-reading-mode .rule-count { background: rgba(17,24,39,.08) !important; color: #111827 !important; } .rules-reading-mode .expand-hint { color: #6b7280 !important; } .rules-reading-mode .rule-card.is-open .expand-hint { color: #111827 !important; } .rules-reading-toggle { cursor: pointer; border-radius: 999px; padding: 10px 14px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .rules-reading-toggle:hover { transform: translateY(-1px); } @media (max-width: 720px) { .rules-reading-toggle { width: 100%; justify-content: center; } } /* VIP Vehicle Store */ .vehicle-showroom { margin-top: 38px; padding-top: 34px; border-top: 1px solid rgba(80, 190, 255, .22); } .vehicle-showroom-head { max-width: 860px; margin-bottom: 22px; } .vehicle-showroom-head h3 { margin: 6px 0 10px; } .vehicle-intro { color: rgba(232, 246, 255, .76); line-height: 1.65; } .vehicle-tools { position: sticky; top: 76px; z-index: 15; display: grid; gap: 14px; padding: 16px; margin: 18px 0 22px; border: 1px solid rgba(66, 180, 255, .18); border-radius: 22px; background: linear-gradient(180deg, rgba(7, 17, 29, .92), rgba(5, 11, 20, .88)); backdrop-filter: blur(10px); box-shadow: 0 18px 46px rgba(0,0,0,.24); } .vehicle-search-wrap { display: grid; gap: 8px; } .vehicle-search-wrap label { font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: rgba(184, 230, 255, .82); } #vehicleSearch { width: 100%; border: 1px solid rgba(90, 190, 255, .22); border-radius: 16px; padding: 14px 16px; outline: none; color: #f5fbff; background: rgba(2, 8, 16, .72); font-weight: 800; } #vehicleSearch::placeholder { color: rgba(220,240,255,.42); } .vehicle-tabs, .vehicle-tier-tabs { display: flex; flex-wrap: wrap; gap: 8px; } .vehicle-filter, .vehicle-tier-filter { border: 1px solid rgba(90, 190, 255, .18); border-radius: 999px; padding: 9px 12px; cursor: pointer; color: rgba(236,248,255,.78); background: rgba(255,255,255,.045); font-weight: 900; letter-spacing: .035em; transition: transform .18s ease, background .18s ease, border-color .18s ease; } .vehicle-filter:hover, .vehicle-tier-filter:hover { transform: translateY(-1px); border-color: rgba(90,190,255,.45); } .vehicle-filter.active, .vehicle-tier-filter.active { color: #04121f; background: linear-gradient(135deg, #78d8ff, #1d8cff); border-color: transparent; } .vehicle-result-count { color: rgba(229,245,255,.72); font-weight: 900; font-size: 13px; } .vehicle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .vehicle-card { overflow: hidden; border: 1px solid rgba(86, 190, 255, .16); border-radius: 22px; background: linear-gradient(180deg, rgba(12, 25, 40, .9), rgba(6, 12, 22, .96)); box-shadow: 0 18px 44px rgba(0,0,0,.26); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; contain: content; } .vehicle-card:hover { transform: translateY(-4px); border-color: rgba(115, 210, 255, .46); box-shadow: 0 22px 58px rgba(22, 147, 255, .13); } .vehicle-img-wrap { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(2,8,16,.9); } .vehicle-img-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(4,10,18,.8)); pointer-events: none; } .vehicle-img-wrap img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.012); transition: transform .35s ease; } .vehicle-card:hover .vehicle-img-wrap img { transform: scale(1.055); } .vehicle-info { padding: 15px; } .vehicle-info h4 { margin: 10px 0 8px; font-size: 20px; } .vehicle-info p { color: rgba(232,246,255,.68); line-height: 1.55; font-size: 14px; } .vehicle-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: rgba(232,246,255,.56); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .tier-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 9px; font-size: 11px; color: #06101a; background: #d9e7f2; } .tier-bronze { background: linear-gradient(135deg, #b16b36, #f0b36f); } .tier-silver { background: linear-gradient(135deg, #aeb7c2, #f3f8ff); } .tier-gold { background: linear-gradient(135deg, #b98b22, #ffd96c); } .tier-platinum { background: linear-gradient(135deg, #b7e8ff, #ffffff); } .tier-diamond { background: linear-gradient(135deg, #8ae8ff, #d9b7ff); } .vehicle-card.hidden { display: none; } .rules-reading-mode .vehicle-showroom, .rules-reading-mode .vehicle-tools, .rules-reading-mode .vehicle-card { color: #111827; } @media (max-width: 1050px) { .vehicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vehicle-tools { position: relative; top: auto; } } @media (max-width: 680px) { .vehicle-grid { grid-template-columns: 1fr; } .vehicle-tools { padding: 13px; border-radius: 18px; } .vehicle-filter, .vehicle-tier-filter { font-size: 12px; padding: 8px 10px; } } .vehicle-load-more { display: inline-flex; margin: 22px auto 0; align-items: center; justify-content: center; border: 1px solid rgba(90,190,255,.35); border-radius: 999px; padding: 12px 18px; cursor: pointer; color: #eaf8ff; background: rgba(0,120,255,.13); font-weight: 900; letter-spacing: .04em; } .vehicle-load-more:hover { border-color: rgba(120,220,255,.75); background: rgba(0,130,255,.22); } /* Vehicle store fixes */ .vehicle-showroom .vehicle-tools, .vehicle-tools { position: static !important; top: auto !important; z-index: auto !important; transform: none !important; } .vehicle-showroom-head .vehicle-intro { max-width: 760px; } /* ===== Requested fixes: hero animation, Arabic rules readability, generic full vehicle catalog ===== */ /* Fix title shine glitch on final hero letters by removing the moving overlay only. */ .title-shine::after, .title-shine-blue::after, .title-shine:after, .title-shine-blue:after { content: none !important; display: none !important; animation: none !important; opacity: 0 !important; } /* Keep hero titles stable and avoid clipping/glitching at the last letters. */ .title-shine, .title-shine-blue { overflow: visible !important; } /* Larger Arabic rule text for readability. */ .rules-ar .rule-ar, .rules-ar .rule-lang-block, .rule-ar { font-size: 17px !important; line-height: 1.9 !important; letter-spacing: 0 !important; } .rules-ar .advanced-rule-card h4, .rules-ar .advanced-rule-card h5, .rules-ar .rule-card h4, .rules-ar .rule-card h5 { font-size: 20px !important; line-height: 1.55 !important; } .rules-ar .rule-lang-block li, .rule-ar li { margin-bottom: 11px !important; } /* Remove vehicle search area; category filters only. */ .vehicle-search-wrap { display: none !important; } .vehicle-tabs { width: 100%; } .vehicle-card h4 { letter-spacing: .035em; } .tier-review { background: rgba(255,255,255,.12) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.35) !important; } /* ===== Blue side background visibility + safe vehicle performance ===== Base: user-uploaded civilian-bg-applied version. No scroll overrides are used here. */ /* Stronger global blue background when civilian side is active. */ body.blue-mode .bg { background: radial-gradient(circle at 12% 38%, rgba(0,135,255,.30), transparent 23%), radial-gradient(circle at 86% 34%, rgba(0,190,255,.22), transparent 25%), linear-gradient(180deg, #061527 0%, #09233f 42%, #050914 100%) !important; } body.blue-mode .bg:before { background: linear-gradient(rgba(0,6,15,.12), rgba(0,7,16,.46)), url('assets/civilian-bg.png') center center / cover no-repeat !important; opacity: .96 !important; transform: scale(1.015) !important; } body.blue-mode .bg:after { background: radial-gradient(ellipse at bottom, rgba(0,135,255,.34), transparent 46%), linear-gradient(90deg, rgba(255,255,255,.020) 1px, transparent 1px) !important; background-size: auto, 130px 100% !important; opacity: .62 !important; } /* Make the civilian hero use the generated background clearly. */ .civilian-hero { background: radial-gradient(circle at 10% 72%, rgba(0,119,255,.26), transparent 23%), radial-gradient(circle at 88% 70%, rgba(0,170,255,.22), transparent 26%), linear-gradient(180deg, rgba(0,15,34,.12), rgba(0,0,0,.66)), url('assets/civilian-bg.png') center center / cover no-repeat !important; } /* Blue sections remain readable but less flat/opaque. */ body.blue-mode .civilian-panel, body.blue-mode .blue-rules, body.blue-mode .blue-store, body.blue-mode .store-panel.blue-store { background: linear-gradient(180deg, rgba(3,18,36,.46), rgba(1,7,16,.64)) !important; border-top-color: rgba(50,165,255,.44) !important; } /* Add a visible blue city wash behind the vehicle area only, without fixed/scroll hacks. */ body.blue-mode .vehicle-showroom { position: relative !important; border: 1px solid rgba(80,175,255,.32) !important; border-radius: 22px !important; padding: 28px 24px 34px !important; background: linear-gradient(180deg, rgba(4,18,36,.50), rgba(2,8,18,.68)), url('assets/civilian-bg.png') center center / cover no-repeat !important; box-shadow: 0 14px 42px rgba(0,0,0,.30), inset 0 0 0 1px rgba(120,210,255,.06) !important; } /* Remove expensive old overlay pseudo images if they exist from the previous patch. */ body.blue-mode .civilian-panel::before, body.blue-mode .blue-rules::before, body.blue-mode .blue-store::before, body.blue-mode .vehicle-showroom::before { content: none !important; display: none !important; } /* Performance: remove expensive blur/glass effects in the big vehicle/card areas. */ body.blue-mode .vehicle-card, body.blue-mode .vehicle-card *, body.blue-mode .vehicle-tools, body.blue-mode .business-card, body.blue-mode .path-card, body.blue-mode .rule-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.blue-mode .vehicle-card { contain: paint !important; will-change: auto !important; transition: border-color .14s ease, box-shadow .14s ease, background .14s ease !important; background: linear-gradient(180deg, rgba(5,18,34,.78), rgba(3,9,18,.88)) !important; border-color: rgba(70,160,255,.34) !important; } body.blue-mode .vehicle-card:hover { transform: none !important; box-shadow: 0 0 0 1px rgba(70,160,255,.25), 0 10px 24px rgba(0,0,0,.22) !important; } /* Disable card shine scans only in the vehicle grid. */ body.blue-mode .vehicle-card::after, body.blue-mode .vehicle-card:after { content: none !important; display: none !important; } /* Keep cards crisp and readable. */ body.blue-mode .path-card, body.blue-mode .blue-card, body.blue-mode .business-card.blue-business, body.blue-mode .rule-toolkit.blue-toolkit, body.blue-mode .vehicle-tools { background: linear-gradient(180deg, rgba(5,18,34,.76), rgba(3,9,18,.86)) !important; border-color: rgba(70,160,255,.32) !important; } /* Prevent oversized vehicle images from costing too much paint/layout. */ .vehicle-img-wrap { overflow: hidden !important; background: rgba(0,0,0,.28) !important; } .vehicle-img-wrap img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* ===== Final business/rules polish ===== */ .business-card .owner-line { color: #fff !important; font-weight: 900 !important; } .vehicle-card .vehicle-info p { min-height: auto !important; } /* ===== Rule search highlight ===== */ .rule-search-highlight { background: linear-gradient(135deg, #ffe44d, #ffb800) !important; color: #06101f !important; border-radius: 4px; padding: 0 4px; box-shadow: 0 0 12px rgba(255, 210, 0, .45); font-weight: 950; } .rules-reading-mode .rule-search-highlight { background: linear-gradient(135deg, #ffcf33, #ff9f00) !important; color: #111827 !important; box-shadow: 0 0 0 1px rgba(80, 60, 0, .18); } /* ===== Useful Commands / Binds section ===== */ .useful-commands-panel { border-top: 1px solid rgba(35,145,255,.34); background: linear-gradient(180deg, rgba(0,105,255,.055), rgba(0,0,0,.20)); } .commands-intro { max-width: 720px; margin: -12px auto 26px; text-align: center; color: #c9d9e8; font-size: 16px; line-height: 1.55; font-weight: 800; } .commands-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .command-card { position: relative; min-height: 138px; padding: 18px 18px 16px; border: 1px solid rgba(70,160,255,.34); border-radius: 14px; background: linear-gradient(180deg, rgba(5,18,34,.78), rgba(3,9,18,.88)); box-shadow: 0 10px 24px rgba(0,0,0,.18), inset 0 0 0 1px rgba(120,210,255,.04); overflow: hidden; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; } .command-card:hover { border-color: rgba(90,190,255,.72); box-shadow: 0 0 0 1px rgba(70,160,255,.24), 0 12px 28px rgba(0,0,0,.26); background: linear-gradient(180deg, rgba(8,28,52,.88), rgba(3,10,20,.94)); } .command-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 10%, rgba(0,145,255,.16), transparent 38%); pointer-events: none; } .command-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; z-index: 1; } .command-top code { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 11px; border-radius: 9px; background: rgba(0,135,255,.16); border: 1px solid rgba(70,170,255,.38); color: #7fd3ff; font-family: Inter, Arial, sans-serif; font-size: 15px; font-weight: 950; letter-spacing: .02em; box-shadow: 0 0 14px rgba(0,130,255,.14); } .command-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.08); color: #dcecff; border: 1px solid rgba(255,255,255,.14); text-transform: uppercase; font-size: 10px; line-height: 1; font-weight: 950; letter-spacing: .09em; } .command-card p { position: relative; z-index: 1; margin: 0; color: #c7d3df; font-size: 14px; line-height: 1.45; font-weight: 750; } body.blue-mode .useful-commands-panel { background: linear-gradient(180deg, rgba(3,18,36,.46), rgba(1,7,16,.64)) !important; border-top-color: rgba(50,165,255,.44) !important; } @media(max-width:1100px) { .commands-grid { grid-template-columns: repeat(3, 1fr); } } @media(max-width:760px) { .commands-grid { grid-template-columns: repeat(2, 1fr); } } @media(max-width:520px) { .commands-grid { grid-template-columns: 1fr; } .command-card { min-height: auto; } } /* ===== Civilian business store: clean 3 x 3 layout ===== */ .civilian-businesses { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: 1180px !important; margin: 0 auto !important; gap: 18px !important; align-items: stretch !important; } .civilian-businesses .business-card { min-height: 230px !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; } .civilian-businesses .business-card h4 { margin-top: 38px !important; } @media(max-width: 980px) { .civilian-businesses { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media(max-width: 620px) { .civilian-businesses { grid-template-columns: 1fr !important; } } /* ===== Business label fit + alive glow polish ===== */ /* Fix business status labels so they fit cleanly around the text instead of stretching/cutting. */ .business-card .status, .business-card .status.available-purchase, .business-card .status.owned, .business-card .status.coming-soon, .business-card .status.staff-managed { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: calc(100% - 28px) !important; min-width: 0 !important; min-height: 28px !important; padding: 7px 13px !important; margin: 0 0 18px 0 !important; border-radius: 999px !important; line-height: 1 !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; font-size: 10.5px !important; font-weight: 950 !important; letter-spacing: .045em !important; text-align: center !important; } /* Reset the old spacing that assumed a stretched status bar. */ .business-card h4 { margin-top: 0 !important; } .civilian-businesses .business-card h4 { margin-top: 0 !important; } /* Keep each business card clean and balanced. */ .business-card { overflow: hidden !important; } .civilian-businesses .business-card { padding-top: 34px !important; } /* Green available label: crisp, contained, readable. */ .business-card.available-purchase .status, .status.available-purchase { background: linear-gradient(135deg, rgba(0,160,92,.82), rgba(0,72,52,.88)) !important; border: 1px solid rgba(0,255,160,.62) !important; color: #f2fff8 !important; box-shadow: 0 0 0 1px rgba(0,255,160,.10), 0 0 14px rgba(0,255,140,.25) !important; } /* Blue owned label: same fitted style. */ .business-card.owned .status, .status.owned { background: linear-gradient(135deg, rgba(0,105,210,.86), rgba(0,45,95,.90)) !important; border: 1px solid rgba(80,180,255,.68) !important; color: #f3fbff !important; box-shadow: 0 0 0 1px rgba(80,180,255,.10), 0 0 14px rgba(0,130,255,.26) !important; } /* Subtle alive glow, performance-safe. */ @keyframes redlineSoftPulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(80,170,255,.10), 0 10px 24px rgba(0,0,0,.20); } 50% { box-shadow: 0 0 0 1px rgba(90,190,255,.28), 0 14px 30px rgba(0,110,255,.12); } } @keyframes redlineBadgeGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } body.blue-mode .business-card, body.blue-mode .path-card, body.blue-mode .command-card, body.blue-mode .vehicle-tools, body.blue-mode .rule-toolkit.blue-toolkit { animation: redlineSoftPulse 5.8s ease-in-out infinite; } body:not(.blue-mode) .business-card, body:not(.blue-mode) .card, body:not(.blue-mode) .rule-card { animation: redlineSoftPulse 6.4s ease-in-out infinite; } .business-card .status { animation: redlineBadgeGlow 3.8s ease-in-out infinite; } /* Add tasteful glows on section titles and blue cards. */ body.blue-mode .panel h3, body.blue-mode .blue-title { text-shadow: 0 0 18px rgba(0,130,255,.32), 0 0 34px rgba(0,130,255,.18), 0 4px 0 rgba(0,0,0,.72) !important; } body.blue-mode .eyebrow.blue { text-shadow: 0 0 14px rgba(0,150,255,.45); } body.blue-mode .business-card:hover, body.blue-mode .path-card:hover, body.blue-mode .command-card:hover, body.blue-mode .vehicle-card:hover, body.blue-mode .blue-card:hover { border-color: rgba(95,195,255,.78) !important; box-shadow: 0 0 0 1px rgba(70,170,255,.24), 0 0 26px rgba(0,130,255,.18), 0 14px 34px rgba(0,0,0,.30) !important; } /* Small ambient blue glow behind civilian store, no heavy blur or scrolling impact. */ body.blue-mode .blue-store, body.blue-mode .useful-commands-panel, body.blue-mode .vehicle-showroom { position: relative !important; } body.blue-mode .blue-store::after, body.blue-mode .useful-commands-panel::after, body.blue-mode .vehicle-showroom::after { content: ""; position: absolute; inset: 8% 6% auto auto; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(0,145,255,.18), transparent 68%); pointer-events: none; z-index: 0; } body.blue-mode .blue-store > *, body.blue-mode .useful-commands-panel > *, body.blue-mode .vehicle-showroom > * { position: relative; z-index: 1; } /* Respect reduced motion. */ @media (prefers-reduced-motion: reduce) { body.blue-mode .business-card, body.blue-mode .path-card, body.blue-mode .command-card, body.blue-mode .vehicle-tools, body.blue-mode .rule-toolkit.blue-toolkit, body:not(.blue-mode) .business-card, body:not(.blue-mode) .card, body:not(.blue-mode) .rule-card, .business-card .status { animation: none !important; } } /* ===== Theme-correct business tags + world glow cleanup ===== */ /* Cleaner, more professional status tag look. */ .business-card .status, .business-card .status.available-purchase, .business-card .status.owned, .business-card .status.coming-soon, .business-card .status.staff-managed { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: calc(100% - 36px) !important; min-width: 0 !important; min-height: 30px !important; padding: 8px 16px !important; margin: 0 0 16px 0 !important; border-radius: 999px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 10px !important; font-weight: 950 !important; letter-spacing: .09em !important; line-height: 1 !important; text-transform: uppercase !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.04) !important; } /* Make card copy sit neatly under the tag. */ .business-card h4 { margin-top: 2px !important; } .civilian-businesses .business-card h4 { margin-top: 2px !important; } .business-card p { margin-top: 10px !important; } /* Available tag keeps premium green in both worlds. */ .business-card.available-purchase .status, .status.available-purchase { background: linear-gradient(180deg, rgba(3,123,78,.95), rgba(3,93,63,.94)) !important; border: 1px solid rgba(0,255,170,.42) !important; color: #effff7 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(0,255,170,.08), 0 0 18px rgba(0,255,140,.16) !important; } /* Owned tag must follow the active world color. */ body.blue-mode .business-card.owned .status, body.blue-mode .status.owned { background: linear-gradient(180deg, rgba(16,117,220,.96), rgba(8,74,152,.95)) !important; border: 1px solid rgba(102,190,255,.52) !important; color: #f5fbff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(80,180,255,.10), 0 0 18px rgba(0,130,255,.18) !important; } body:not(.blue-mode) .business-card.owned .status, body:not(.blue-mode) .status.owned { background: linear-gradient(180deg, rgba(188,22,28,.96), rgba(122,6,10,.95)) !important; border: 1px solid rgba(255,102,102,.48) !important; color: #fff5f5 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,80,80,.10), 0 0 18px rgba(255,0,0,.16) !important; } /* World-correct title and card glow. */ @keyframes blueWorldCardPulse { 0%,100% { box-shadow: 0 0 0 1px rgba(75,170,255,.12), 0 10px 24px rgba(0,0,0,.18); } 50% { box-shadow: 0 0 0 1px rgba(98,190,255,.28), 0 0 26px rgba(0,110,255,.13), 0 12px 28px rgba(0,0,0,.22); } } @keyframes redWorldCardPulse { 0%,100% { box-shadow: 0 0 0 1px rgba(255,70,70,.10), 0 10px 24px rgba(0,0,0,.18); } 50% { box-shadow: 0 0 0 1px rgba(255,90,90,.25), 0 0 24px rgba(255,24,24,.11), 0 12px 28px rgba(0,0,0,.22); } } body.blue-mode .business-card, body.blue-mode .path-card, body.blue-mode .command-card, body.blue-mode .vehicle-tools, body.blue-mode .rule-toolkit.blue-toolkit, body.blue-mode .blue-card, body.blue-mode .vehicle-card { animation: blueWorldCardPulse 5.9s ease-in-out infinite !important; } body:not(.blue-mode) .business-card, body:not(.blue-mode) .card, body:not(.blue-mode) .rule-card, body:not(.blue-mode) .vehicle-tools, body:not(.blue-mode) .vehicle-card { animation: redWorldCardPulse 5.9s ease-in-out infinite !important; } body.blue-mode .business-card:hover, body.blue-mode .path-card:hover, body.blue-mode .command-card:hover, body.blue-mode .vehicle-card:hover, body.blue-mode .blue-card:hover, body.blue-mode .rule-card:hover { border-color: rgba(95,195,255,.82) !important; box-shadow: 0 0 0 1px rgba(70,170,255,.26), 0 0 28px rgba(0,130,255,.18), 0 14px 34px rgba(0,0,0,.30) !important; } body:not(.blue-mode) .business-card:hover, body:not(.blue-mode) .card:hover, body:not(.blue-mode) .rule-card:hover, body:not(.blue-mode) .vehicle-card:hover, body:not(.blue-mode) .path-card:hover { border-color: rgba(255,82,82,.86) !important; box-shadow: 0 0 0 1px rgba(255,60,60,.22), 0 0 28px rgba(255,0,0,.15), 0 14px 34px rgba(0,0,0,.30) !important; } body.blue-mode .panel h3, body.blue-mode .blue-title { text-shadow: 0 0 18px rgba(0,130,255,.34), 0 0 34px rgba(0,130,255,.18), 0 4px 0 rgba(0,0,0,.72) !important; } body.blue-mode .eyebrow, body.blue-mode .eyebrow.blue { color: #3ea5ff !important; text-shadow: 0 0 12px rgba(0,145,255,.35) !important; } body:not(.blue-mode) .panel h3 { text-shadow: 0 0 18px rgba(255,40,40,.26), 0 0 30px rgba(255,0,0,.14), 0 4px 0 rgba(0,0,0,.74) !important; } body:not(.blue-mode) .eyebrow { color: #ff4545 !important; text-shadow: 0 0 12px rgba(255,40,40,.28) !important; } /* Subtle color-correct tag glow animation. */ @keyframes ownedBlueGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.08); } } @keyframes ownedRedGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.08); } } @keyframes availableGreenGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.06); } } .business-card.available-purchase .status, .status.available-purchase { animation: availableGreenGlow 3.8s ease-in-out infinite !important; } body.blue-mode .business-card.owned .status, body.blue-mode .status.owned { animation: ownedBlueGlow 3.8s ease-in-out infinite !important; } body:not(.blue-mode) .business-card.owned .status, body:not(.blue-mode) .status.owned { animation: ownedRedGlow 3.8s ease-in-out infinite !important; } /* Tone down the generic brightness animation from previous pass. */ .business-card .status { filter: none !important; } /* ===== Centered extended business status tags: theme-correct for all states ===== */ .business-card .status, .business-card .status.available-purchase, .business-card .status.owned, .business-card .status.coming-soon, .business-card .status.staff-managed { display: flex !important; align-items: center !important; justify-content: center !important; width: min(305px, calc(100% - 26px)) !important; max-width: min(305px, calc(100% - 26px)) !important; min-width: 220px !important; margin: 4px auto 20px auto !important; padding: 9px 18px !important; min-height: 30px !important; border-radius: 999px !important; position: relative !important; left: 0 !important; right: 0 !important; top: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: center !important; font-size: 11px !important; font-weight: 950 !important; letter-spacing: .075em !important; line-height: 1 !important; text-transform: uppercase !important; box-sizing: border-box !important; } /* Give headings more breathing room under centered tags. */ .business-card h4 { margin-top: 2px !important; margin-bottom: 12px !important; } .business-card p { margin-top: 0 !important; } /* Theme-correct tag colors for all possible business states. */ .business-card.available-purchase .status, .status.available-purchase { background: linear-gradient(180deg, rgba(5,134,88,.95), rgba(4,104,69,.94)) !important; border: 1px solid rgba(0,255,166,.44) !important; color: #f0fff7 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(0,255,166,.07), 0 0 18px rgba(0,255,140,.16) !important; } body.blue-mode .business-card.owned .status, body.blue-mode .status.owned { background: linear-gradient(180deg, rgba(19,126,233,.97), rgba(10,84,167,.96)) !important; border: 1px solid rgba(97,189,255,.54) !important; color: #f6fbff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(86,183,255,.10), 0 0 18px rgba(0,128,255,.19) !important; } body:not(.blue-mode) .business-card.owned .status, body:not(.blue-mode) .status.owned { background: linear-gradient(180deg, rgba(201,28,32,.97), rgba(132,8,13,.96)) !important; border: 1px solid rgba(255,110,110,.50) !important; color: #fff5f5 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,88,88,.10), 0 0 18px rgba(255,10,10,.17) !important; } body.blue-mode .business-card.coming-soon .status, body.blue-mode .status.coming-soon { background: linear-gradient(180deg, rgba(225,155,20,.96), rgba(172,114,10,.95)) !important; border: 1px solid rgba(255,213,110,.48) !important; color: #fffaf1 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,206,120,.08), 0 0 18px rgba(255,177,32,.16), 0 0 24px rgba(0,110,255,.08) !important; } body:not(.blue-mode) .business-card.coming-soon .status, body:not(.blue-mode) .status.coming-soon { background: linear-gradient(180deg, rgba(234,135,20,.96), rgba(182,85,8,.95)) !important; border: 1px solid rgba(255,189,95,.48) !important; color: #fff7ef !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,179,86,.08), 0 0 18px rgba(255,140,35,.18), 0 0 24px rgba(255,0,0,.06) !important; } body.blue-mode .business-card.staff-managed .status, body.blue-mode .status.staff-managed { background: linear-gradient(180deg, rgba(92,104,255,.96), rgba(69,76,189,.95)) !important; border: 1px solid rgba(157,170,255,.50) !important; color: #f7f8ff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(166,176,255,.08), 0 0 18px rgba(94,121,255,.18), 0 0 24px rgba(0,130,255,.07) !important; } body:not(.blue-mode) .business-card.staff-managed .status, body:not(.blue-mode) .status.staff-managed { background: linear-gradient(180deg, rgba(151,80,255,.97), rgba(109,42,197,.96)) !important; border: 1px solid rgba(197,143,255,.48) !important; color: #fbf7ff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(204,155,255,.08), 0 0 18px rgba(160,94,255,.19), 0 0 24px rgba(255,20,20,.05) !important; } /* Mobile safety */ @media (max-width: 640px) { .business-card .status, .business-card .status.available-purchase, .business-card .status.owned, .business-card .status.coming-soon, .business-card .status.staff-managed { width: calc(100% - 22px) !important; min-width: 0 !important; max-width: calc(100% - 22px) !important; font-size: 10px !important; letter-spacing: .06em !important; } } /* ===== Complete Design Upgrade Sections ===== */ .design-panel{position:relative;overflow:hidden;border-top:1px solid rgba(35,145,255,.30);background:linear-gradient(180deg,rgba(3,18,36,.42),rgba(1,7,16,.60))} .design-panel:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 10%,rgba(0,135,255,.10),transparent 34%),radial-gradient(circle at 86% 82%,rgba(0,180,255,.08),transparent 36%);pointer-events:none}.design-panel>*{position:relative;z-index:1}.design-intro{max-width:780px;margin:-12px auto 26px;text-align:center;color:#c9d9e8;font-size:16px;line-height:1.55;font-weight:800}.design-grid{max-width:1180px;margin:0 auto;display:grid;gap:16px}.design-grid.three{grid-template-columns:repeat(3,1fr)}.design-grid.six{grid-template-columns:repeat(3,1fr)} .join-step-card,.feature-card,.support-card,.gallery-card,.vip-tier-card{position:relative;min-height:178px;padding:24px 22px;border:1px solid rgba(70,160,255,.30);border-radius:16px;background:linear-gradient(180deg,rgba(5,18,34,.78),rgba(3,9,18,.88));box-shadow:0 10px 24px rgba(0,0,0,.18),inset 0 0 0 1px rgba(120,210,255,.04);overflow:hidden}.join-step-card:before,.feature-card:before,.support-card:before,.gallery-card:before,.vip-tier-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 8%,rgba(0,145,255,.15),transparent 38%);pointer-events:none}.join-step-card h4,.feature-card h4,.support-card h4,.gallery-card h4,.vip-tier-card h4{position:relative;z-index:1;text-transform:uppercase;margin:0 0 10px;color:#f4f8ff;letter-spacing:.045em}.join-step-card p,.feature-card p,.support-card p,.gallery-card p,.vip-tier-card p{position:relative;z-index:1;margin:0;color:#c8d4df;line-height:1.5;font-size:14px;font-weight:750} .step-number{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin-bottom:18px;border-radius:50%;color:#fff;font-weight:950;background:linear-gradient(180deg,#2ca5ff,#005fd0);border:1px solid rgba(100,190,255,.58);box-shadow:0 0 20px rgba(0,130,255,.22)}.design-icon{position:relative;z-index:1;font-size:34px;margin-bottom:14px;filter:drop-shadow(0 0 12px rgba(0,130,255,.35))} .quick-stats-strip{padding:20px 7vw;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}.quick-stats-strip.red-stats{background:linear-gradient(90deg,rgba(255,0,0,.10),rgba(0,0,0,.30),rgba(255,0,0,.08))}.quick-stats-strip.blue-stats{background:linear-gradient(90deg,rgba(0,120,255,.12),rgba(0,0,0,.28),rgba(0,160,255,.08))}.quick-stats-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.quick-stat{text-align:center;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(3,10,18,.55);padding:14px 10px}.quick-stat strong{display:block;color:#fff;font-size:21px;font-weight:950;text-transform:uppercase}.quick-stat span{display:block;margin-top:4px;color:#b8c4d2;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:900} .world-divider-section{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;padding:32px 7vw;background:linear-gradient(90deg,rgba(255,0,0,.18),rgba(0,0,0,.86),rgba(0,125,255,.18));border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}.divider-word{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(28px,4vw,54px);font-weight:950;letter-spacing:.06em;text-transform:uppercase}.divider-word.red{color:#ff3333;text-align:right;text-shadow:0 0 18px rgba(255,0,0,.34)}.divider-word.blue{color:#3ea5ff;text-align:left;text-shadow:0 0 18px rgba(0,130,255,.34)}.divider-core{min-width:220px;text-align:center;padding:13px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.45);box-shadow:0 0 28px rgba(255,255,255,.06)}.divider-core span{display:block;color:#aaa;text-transform:uppercase;font-size:10px;letter-spacing:.18em;font-weight:900}.divider-core b{display:block;margin-top:3px;color:#fff;text-transform:uppercase;letter-spacing:.08em} .rules-warning{margin:0;padding:22px 7vw;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}.rules-warning strong{display:block;max-width:1120px;margin:0 auto 6px;text-transform:uppercase;letter-spacing:.12em;font-size:13px}.rules-warning p{max-width:1120px;margin:0 auto;color:#cfd8e3;font-weight:800;line-height:1.45}.red-warning{background:linear-gradient(90deg,rgba(255,0,0,.12),rgba(0,0,0,.30));border-color:rgba(255,45,45,.22)}.red-warning strong{color:#ff4242}.blue-warning{background:linear-gradient(90deg,rgba(0,120,255,.14),rgba(0,0,0,.28));border-color:rgba(45,150,255,.24)}.blue-warning strong{color:#3ea5ff} .vip-tier-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.vip-tier-name{display:inline-flex;margin-bottom:14px;border-radius:999px;padding:8px 14px;color:#06101f;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.vip-bronze .vip-tier-name{background:linear-gradient(135deg,#b16b36,#f0b36f)}.vip-silver .vip-tier-name{background:linear-gradient(135deg,#aeb7c2,#f3f8ff)}.vip-gold .vip-tier-name{background:linear-gradient(135deg,#b98b22,#ffd96c)}.vip-diamond .vip-tier-name{background:linear-gradient(135deg,#8ae8ff,#d9b7ff)}.vip-tier-card ul{position:relative;z-index:1;margin:16px 0 0;padding-left:18px;color:#c8d4df;font-size:13px;line-height:1.7;font-weight:800} .gallery-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.gallery-card{min-height:180px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.82)),radial-gradient(circle at 25% 15%,rgba(0,150,255,.18),transparent 36%),linear-gradient(135deg,rgba(0,80,160,.22),rgba(5,12,22,.92))}.gallery-card:nth-child(even){background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.82)),radial-gradient(circle at 75% 18%,rgba(255,0,0,.16),transparent 34%),linear-gradient(135deg,rgba(100,12,22,.26),rgba(5,12,22,.92))} .vehicle-category-showcase{padding:34px 7vw 18px;background:linear-gradient(180deg,rgba(0,120,255,.05),rgba(0,0,0,.06))}.vehicle-category-showcase h3{font-family:'Barlow Condensed',Impact,sans-serif;text-align:center;text-transform:uppercase;font-size:38px;letter-spacing:.07em;margin:0 0 22px}.vehicle-category-grid{max-width:1180px;margin:0 auto 8px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.vehicle-category-chip{min-height:84px;display:flex;gap:9px;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid rgba(70,160,255,.28);border-radius:14px;background:linear-gradient(180deg,rgba(5,18,34,.72),rgba(3,9,18,.84));color:#f3f8ff;box-shadow:0 10px 24px rgba(0,0,0,.16)}.vehicle-category-chip span{font-size:24px}.vehicle-category-chip b{font-size:11px;letter-spacing:.05em;text-transform:uppercase} .redline-footer{position:relative;padding:44px 7vw 22px;background:radial-gradient(circle at 10% 10%,rgba(255,0,0,.12),transparent 30%),radial-gradient(circle at 90% 10%,rgba(0,130,255,.14),transparent 32%),linear-gradient(180deg,rgba(2,7,14,.98),#02050a);border-top:1px solid rgba(255,255,255,.10)}.footer-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.5fr .8fr 1.2fr;gap:28px}.redline-footer h3,.redline-footer h4{text-transform:uppercase;margin:0 0 12px;color:#fff;letter-spacing:.08em}.redline-footer p{color:#c6d0dc;margin:0;line-height:1.55;font-weight:750}.footer-links{display:flex;flex-direction:column}.footer-links a{color:#9ed4ff;text-decoration:none;font-weight:850;margin:3px 0}.footer-contact code{display:inline-flex;margin-top:12px;padding:9px 12px;border-radius:10px;color:#eaf7ff;background:rgba(0,130,255,.12);border:1px solid rgba(70,160,255,.30)}.footer-bottom{max-width:1180px;margin:30px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);color:#798898;text-align:center;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:850} @media(max-width:1100px){.design-grid.six,.design-grid.three,.gallery-grid{grid-template-columns:repeat(2,1fr)}.vip-tier-grid{grid-template-columns:repeat(2,1fr)}.vehicle-category-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.quick-stats-grid{grid-template-columns:repeat(2,1fr)}.world-divider-section{grid-template-columns:1fr;text-align:center}.divider-word.red,.divider-word.blue{text-align:center}.footer-grid{grid-template-columns:1fr}}@media(max-width:560px){.design-grid.six,.design-grid.three,.gallery-grid,.vip-tier-grid,.vehicle-category-grid{grid-template-columns:1fr}} /* ===== Footer, Gallery, and Vehicle Category Refresh ===== */ .redline-footer{ position: static !important; width: 100%; margin-top: 56px; clear: both; isolation: isolate; z-index: 1; border-top: 1px solid rgba(100,170,255,.18); box-shadow: 0 -18px 60px rgba(0,0,0,.22); } .footer-grid{align-items:start} .footer-links a{display:inline-block;padding:4px 0;transition:color .18s ease, transform .18s ease} .footer-links a:hover{color:#fff;transform:translateX(3px)} .footer-discord-btn{ display:inline-flex;align-items:center;justify-content:center; margin-top:14px;padding:11px 16px;border-radius:999px; background:linear-gradient(135deg,#4db8ff,#197fff);color:#04101d; text-decoration:none;font-weight:950;letter-spacing:.05em;text-transform:uppercase; border:1px solid rgba(140,220,255,.5);box-shadow:0 0 18px rgba(35,125,255,.22); } .footer-discord-btn:hover{filter:brightness(1.05);transform:translateY(-1px)} #redline-gallery .gallery-grid{gap:18px} .gallery-card.has-photo{ min-height: 255px; padding: 0; overflow: hidden; display: block; background: #08111e; } .gallery-photo{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transform:scale(1.01);filter:saturate(1.02) contrast(1.03); } .gallery-card.has-photo::before{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(3,9,16,.08),rgba(4,10,18,.18) 35%,rgba(2,7,12,.82) 100%); z-index:1; } .gallery-card.has-photo::after{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 12% 12%,rgba(80,170,255,.18),transparent 34%); z-index:1;pointer-events:none; } .gallery-badge{ position:absolute;top:16px;left:16px;z-index:2; display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px; background:rgba(5,15,28,.72);color:#cbe8ff;border:1px solid rgba(104,190,255,.28); font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase; backdrop-filter: blur(8px); } .gallery-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px} .gallery-copy h4{margin:0 0 8px} .gallery-copy p{margin:0;max-width:92%} .vehicle-category-showcase{padding-bottom:10px} .vehicle-category-grid{ max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(7,1fr);gap:12px; } .vehicle-category-chip{ min-height:92px;display:flex;gap:10px;flex-direction:column;align-items:center;justify-content:center; text-align:center;border:1px solid rgba(70,160,255,.28);border-radius:16px; background:linear-gradient(180deg,rgba(5,18,34,.72),rgba(3,9,18,.84));color:#f3f8ff; box-shadow:0 10px 24px rgba(0,0,0,.16);padding:14px 10px;cursor:pointer; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; } .vehicle-category-chip:hover{transform:translateY(-2px);border-color:rgba(111,210,255,.52);box-shadow:0 16px 32px rgba(18,120,255,.12)} .vehicle-category-chip.active{ color:#06101a;background:linear-gradient(135deg,#78d8ff,#1d8cff);border-color:transparent; box-shadow:0 14px 34px rgba(24,132,255,.22); } .vehicle-chip-icon{font-size:28px;line-height:1} .vehicle-category-chip b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;line-height:1.3} .vehicle-category-note{max-width:1180px;margin:14px auto 0;text-align:center;color:#c3d7e9;font-weight:850} .vehicle-tabs.is-secondary-filter{display:none !important} .vehicle-tools{top:86px} .vehicle-showroom-head{margin-bottom:0} .vehicle-intro{max-width:720px} #server-features .design-icon{font-size:32px} @media(max-width:1200px){ .vehicle-category-grid{grid-template-columns:repeat(4,1fr)} } @media(max-width:760px){ .vehicle-category-grid{grid-template-columns:repeat(2,1fr)} .gallery-card.has-photo{min-height:220px} } @media(max-width:560px){ .vehicle-category-grid{grid-template-columns:1fr 1fr} } /* ===== Hover Effects + World Footers Fix ===== */ /* Make Support & Staff Contact cards and RedLine Gallery react like path cards. */ .support-card, .gallery-card { cursor: default; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease, filter .22s ease !important; will-change: transform; } .support-card:hover, .gallery-card:hover { transform: translateY(-6px) !important; border-color: rgba(95, 195, 255, .82) !important; box-shadow: 0 0 0 1px rgba(70,170,255,.26), 0 0 30px rgba(0,130,255,.22), 0 18px 42px rgba(0,0,0,.34) !important; } .support-card:hover .design-icon { filter: drop-shadow(0 0 18px rgba(0, 150, 255, .70)) brightness(1.18); } .gallery-card.has-photo:hover .gallery-photo { transform: scale(1.065) !important; filter: saturate(1.12) contrast(1.06) brightness(1.04); } .gallery-card.has-photo:hover .gallery-badge { border-color: rgba(120, 210, 255, .70); box-shadow: 0 0 18px rgba(0, 135, 255, .28); } /* Red world gets red hover glow; blue world keeps blue glow. */ body:not(.blue-mode) .support-card:hover, body:not(.blue-mode) .gallery-card:hover { border-color: rgba(255, 82, 82, .86) !important; box-shadow: 0 0 0 1px rgba(255,60,60,.24), 0 0 30px rgba(255,0,0,.18), 0 18px 42px rgba(0,0,0,.34) !important; } /* Footer is now inside each world, so it exists on both red and blue sides. */ .redline-footer.world-footer { position: relative !important; width: 100%; margin: 64px 0 0; padding: 46px 7vw 24px; clear: both; isolation: isolate; z-index: 1; overflow: hidden; } .redline-footer.world-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; } .redline-footer.world-footer > * { position: relative; z-index: 1; } .redline-footer.red-footer { background: radial-gradient(circle at 10% 12%, rgba(255,0,0,.16), transparent 32%), radial-gradient(circle at 92% 8%, rgba(255,40,40,.10), transparent 34%), linear-gradient(180deg, rgba(10,4,7,.96), #030407) !important; border-top: 1px solid rgba(255, 60, 60, .22) !important; box-shadow: 0 -18px 60px rgba(255, 0, 0, .06), 0 -18px 60px rgba(0,0,0,.28); } .redline-footer.blue-footer { background: radial-gradient(circle at 10% 12%, rgba(0,130,255,.17), transparent 32%), radial-gradient(circle at 92% 8%, rgba(0,180,255,.10), transparent 34%), linear-gradient(180deg, rgba(2,10,22,.96), #02050a) !important; border-top: 1px solid rgba(80, 170, 255, .24) !important; box-shadow: 0 -18px 60px rgba(0, 130, 255, .08), 0 -18px 60px rgba(0,0,0,.28); } .redline-footer .footer-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr .8fr 1.25fr; gap: 28px; align-items: start; } .redline-footer h3, .redline-footer h4 { text-transform: uppercase; margin: 0 0 12px; color: #fff; letter-spacing: .08em; } .redline-footer p { color: #c6d0dc; margin: 0; line-height: 1.55; font-weight: 750; } .footer-links { display: flex; flex-direction: column; } .footer-links a, .discord-profile-link { color: #9ed4ff; text-decoration: none; font-weight: 950; transition: color .18s ease, transform .18s ease, text-shadow .18s ease; } .footer-links a { display: inline-block; padding: 4px 0; } .footer-links a:hover, .discord-profile-link:hover { color: #ffffff; transform: translateX(3px); text-shadow: 0 0 14px rgba(80,170,255,.55); } .red-footer .footer-links a, .red-footer .discord-profile-link { color: #ff9d9d; } .red-footer .footer-links a:hover, .red-footer .discord-profile-link:hover { color: #ffffff; text-shadow: 0 0 14px rgba(255,60,60,.55); } .footer-contact code { display: inline-flex; margin-top: 12px; padding: 9px 12px; border-radius: 10px; color: #eaf7ff; background: rgba(0,130,255,.12); border: 1px solid rgba(70,160,255,.30); } .red-footer .footer-contact code { color: #fff1f1; background: rgba(255,0,0,.10); border-color: rgba(255,90,90,.28); } .footer-discord-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; padding: 11px 16px; border-radius: 999px; text-decoration: none; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; color: #04101d; background: linear-gradient(135deg, #4db8ff, #197fff); border: 1px solid rgba(140,220,255,.50); box-shadow: 0 0 18px rgba(35,125,255,.22); transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; } .footer-discord-btn:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 0 24px rgba(35,125,255,.32); } .red-footer .footer-discord-btn { color: #fff; background: linear-gradient(135deg, #ff3333, #9d0808); border-color: rgba(255,125,125,.48); box-shadow: 0 0 18px rgba(255,0,0,.20); } .red-footer .footer-discord-btn:hover { box-shadow: 0 0 24px rgba(255,0,0,.32); } .footer-bottom { max-width: 1180px; margin: 30px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); color: #798898; text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 850; } @media(max-width: 760px) { .redline-footer .footer-grid { grid-template-columns: 1fr; } } /* ===== Remove quick stats + add hover to join/offers sections ===== */ .quick-stats-strip{display:none !important;} .join-step-card, .feature-card{ cursor: default; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease, filter .22s ease !important; will-change: transform; } .join-step-card:hover, .feature-card:hover{ transform: translateY(-6px) !important; border-color: rgba(95,195,255,.82) !important; background: linear-gradient(180deg, rgba(8,24,46,.92), rgba(3,10,20,.96)) !important; box-shadow: 0 0 0 1px rgba(70,170,255,.26), 0 0 30px rgba(0,130,255,.22), 0 18px 42px rgba(0,0,0,.34) !important; } .join-step-card:hover::after, .feature-card:hover::after{ transform: translateX(120%); } .join-step-card::after, .feature-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.075) 48%, transparent 72%); transform: translateX(-120%); transition: transform .5s ease; pointer-events:none; } .join-step-card:hover .step-number{ box-shadow: 0 0 18px rgba(0,145,255,.28); border-color: rgba(110,205,255,.6); transform: translateY(-2px) scale(1.03); } .feature-card:hover .design-icon{ filter: drop-shadow(0 0 18px rgba(0,150,255,.70)) brightness(1.18); transform: translateY(-2px) scale(1.05); } .join-step-card .step-number, .feature-card .design-icon{ transition: transform .22s ease, filter .22s ease, box-shadow .22s ease, border-color .22s ease; } /* If these sections are ever reused on the red side, keep correct glow colors there too. */ body:not(.blue-mode) .join-step-card:hover, body:not(.blue-mode) .feature-card:hover{ border-color: rgba(255,82,82,.86) !important; background: linear-gradient(180deg, rgba(34,10,10,.92), rgba(16,4,4,.96)) !important; box-shadow: 0 0 0 1px rgba(255,60,60,.24), 0 0 30px rgba(255,0,0,.18), 0 18px 42px rgba(0,0,0,.34) !important; } body:not(.blue-mode) .join-step-card:hover .step-number, body:not(.blue-mode) .feature-card:hover .design-icon{ filter: drop-shadow(0 0 18px rgba(255,70,70,.60)) brightness(1.1); box-shadow: 0 0 18px rgba(255,60,60,.22); } /* ===== Final Launch Polish ===== */ .section-cta-row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:28px auto 0}.mini-cta{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:13px 18px;border-radius:999px;text-decoration:none;text-transform:uppercase;font-size:12px;letter-spacing:.08em;font-weight:950;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}.mini-cta.blue{color:#04121f;background:linear-gradient(135deg,#78d8ff,#1d8cff);border:1px solid rgba(130,220,255,.5);box-shadow:0 0 22px rgba(0,130,255,.18)}.mini-cta.ghost{color:#e8f6ff;border:1px solid rgba(100,190,255,.28);background:rgba(255,255,255,.045)}.mini-cta:hover{transform:translateY(-2px);box-shadow:0 0 28px rgba(0,130,255,.28)}body:not(.blue-mode) .mini-cta.blue{color:#fff;background:linear-gradient(135deg,#ff3333,#a80000);border-color:rgba(255,120,120,.45);box-shadow:0 0 22px rgba(255,0,0,.16)}body:not(.blue-mode) .mini-cta.ghost{border-color:rgba(255,100,100,.28)}body:not(.blue-mode) .mini-cta:hover{box-shadow:0 0 28px rgba(255,0,0,.26)}.back-to-top{position:fixed;right:28px;bottom:88px;z-index:30;width:46px;height:46px;border:1px solid rgba(120,200,255,.36);border-radius:999px;color:#fff;background:rgba(4,12,22,.78);font-size:24px;font-weight:950;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease,background .2s ease,border-color .2s ease;box-shadow:0 10px 28px rgba(0,0,0,.28)}.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.back-to-top:hover{background:rgba(0,130,255,.20);border-color:rgba(120,210,255,.70)}body:not(.blue-mode) .back-to-top{border-color:rgba(255,100,100,.36)}body:not(.blue-mode) .back-to-top:hover{background:rgba(255,0,0,.18);border-color:rgba(255,110,110,.70)}.vehicle-img-wrap img,.gallery-photo{opacity:.96;transition:opacity .25s ease,transform .35s ease,filter .25s ease}.vehicle-card:hover .vehicle-img-wrap img{opacity:1}@media(max-width:760px){.nav{padding:0 18px}.brand{width:92px;margin-right:12px}.logo{width:58px;height:58px}.nav nav{gap:10px;overflow-x:auto;scrollbar-width:none}.nav nav::-webkit-scrollbar{display:none}.nav a{white-space:nowrap;font-size:11px}.discord{padding:12px 14px;font-size:11px}.hero,.civilian-hero{min-height:680px;height:auto;padding:110px 0 70px}.hero p,.civilian-content>p{font-size:16px}.panel{padding:34px 18px 44px}.panel h3{font-size:34px}.vehicle-tools{position:relative;top:auto}.vehicle-grid{grid-template-columns:1fr!important}.audio{right:18px;bottom:24px;padding:12px 16px}.back-to-top{right:18px;bottom:78px}}@media(max-width:430px){.hero h1,.blue-title{font-size:64px}.hero h2{font-size:30px}.btn{width:100%;margin-left:0;margin-right:0}.section-cta-row .mini-cta{width:100%}} /* ===== Mobile Test Fixes: status widget + mobile-only performance ===== */ .rl-status-widget{position:fixed;right:28px;bottom:148px;z-index:34;font-family:Inter,Arial,sans-serif} .rl-status-toggle{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(120,200,255,.36);background:rgba(4,12,22,.82);color:#fff;min-height:44px;padding:0 16px;border-radius:999px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;font-size:12px;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:transform .18s ease,border-color .18s ease,background .18s ease} .rl-status-toggle:hover{transform:translateY(-1px);border-color:rgba(120,210,255,.7);background:rgba(0,130,255,.18)} .rl-status-dot{width:9px;height:9px;border-radius:50%;background:#41ff8b;box-shadow:0 0 14px rgba(65,255,139,.65)} .rl-status-panel{position:absolute;right:0;bottom:56px;width:min(320px,calc(100vw - 36px));padding:18px;border:1px solid rgba(120,200,255,.28);border-radius:20px;background:rgba(4,12,22,.94);box-shadow:0 22px 70px rgba(0,0,0,.44);opacity:0;pointer-events:none;transform:translateY(10px) scale(.98);transition:opacity .18s ease,transform .18s ease} .rl-status-widget.open .rl-status-panel{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)} .rl-status-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px} .rl-status-head strong{font-size:15px;letter-spacing:.08em;text-transform:uppercase} .rl-status-close{width:30px;height:30px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font-size:20px;line-height:1} .rl-status-panel p{margin:0 0 14px;color:#b9c7da;line-height:1.45;font-size:14px} .rl-status-actions{display:grid;gap:10px} .rl-status-actions a{display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:12px;text-decoration:none;color:#fff;font-weight:950;letter-spacing:.06em;text-transform:uppercase;font-size:12px;background:linear-gradient(135deg,rgba(255,55,55,.82),rgba(38,145,255,.82));border:1px solid rgba(255,255,255,.1)} body:not(.blue-mode) .rl-status-toggle,body:not(.blue-mode) .rl-status-panel{border-color:rgba(255,100,100,.36)} body:not(.blue-mode) .rl-status-toggle:hover{border-color:rgba(255,110,110,.7);background:rgba(255,0,0,.16)} @media (max-width:760px),(hover:none) and (pointer:coarse){ .cursor-dot,.cursor-ring,.click-layer,.transition-flash,.ambient-layer,.red-orb,.bg::before,.bg::after{display:none!important;animation:none!important} *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important} .title-shine::after,.title-shine-blue::after,.card::after,.path-card::after,.rule-card::after,.btn::after,.discord::after,.audio::after,.world-btn::after,.filter-btn::after{display:none!important} .card,.path-card,.rule-card,.blue-card,.support-card,.gallery-card,.vehicle-card,.business-card,.store-card,.feature-card,.join-step-card{transform:none!important;box-shadow:0 8px 22px rgba(0,0,0,.18)!important;backdrop-filter:none!important} .card:hover,.path-card:hover,.rule-card:hover,.blue-card:hover,.support-card:hover,.gallery-card:hover,.vehicle-card:hover,.business-card:hover,.store-card:hover,.feature-card:hover,.join-step-card:hover{transform:none!important} #civilian-store,#criminal-store,#vehicle-category-showcase,#vip-vehicles,.store-section,.business-section,.vehicle-showcase,.vehicle-catalog,.vehicle-grid,.store-grid,.business-grid,.design-grid,.gallery-grid{display:block!important;visibility:visible!important;opacity:1!important;overflow:visible!important;content-visibility:visible!important;contain:none!important} .vehicle-grid,.store-grid,.business-grid,.design-grid.three,.crime-row,.path-row,.rule-grid{display:grid!important;grid-template-columns:1fr!important;gap:16px!important} .vehicle-card,.store-card,.business-card,.gallery-card{min-height:auto!important} .vehicle-img-wrap,.vehicle-img-wrap img,.gallery-photo,.store-card img,.business-card img{max-width:100%!important} img{height:auto} .rl-status-widget{left:16px;right:auto;bottom:82px;z-index:45} .rl-status-toggle{min-height:42px;padding:0 13px;font-size:11px;background:rgba(4,12,22,.88)} .rl-status-panel{left:0;right:auto;bottom:52px;width:min(300px,calc(100vw - 32px));max-height:58vh;overflow:auto;backdrop-filter:none} .audio{right:16px!important;bottom:82px!important;min-height:42px!important;padding:0 14px!important;font-size:11px!important;z-index:44!important;backdrop-filter:none!important} .back-to-top{right:16px!important;bottom:136px!important;z-index:43!important} .hero,.civilian-hero{background-attachment:scroll!important} .vehicle-card.mobile-vehicle-hidden{display:none!important} .mobile-load-more{display:flex;align-items:center;justify-content:center;width:calc(100% - 32px);max-width:360px;min-height:48px;margin:18px auto 0;border-radius:999px;border:1px solid rgba(120,200,255,.34);color:#fff;background:rgba(4,12,22,.88);font-weight:950;letter-spacing:.08em;text-transform:uppercase} } /* ===== Status + Audio Fix v2 ===== */ .rl-status-widget{display:none!important} .world-switcher,.world-status,.current-world,.status-strip,.server-status-bar,.quick-status-bar{ position:fixed!important;left:0!important;right:auto!important;top:50%!important;bottom:auto!important; transform:translate(calc(-100% + 42px),-50%)!important;z-index:42!important; display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important; max-width:250px!important;width:max-content!important;min-width:160px!important; padding:12px 14px 12px 50px!important;border-radius:0 18px 18px 0!important; transition:transform .22s ease,opacity .22s ease!important;cursor:pointer!important; } .world-switcher:hover,.world-switcher:focus-within,.world-switcher.open, .world-status:hover,.world-status:focus-within,.world-status.open, .current-world:hover,.current-world:focus-within,.current-world.open, .status-strip:hover,.status-strip:focus-within,.status-strip.open, .server-status-bar:hover,.server-status-bar:focus-within,.server-status-bar.open, .quick-status-bar:hover,.quick-status-bar:focus-within,.quick-status-bar.open{transform:translate(0,-50%)!important} .world-switcher::before,.world-status::before,.current-world::before,.status-strip::before,.server-status-bar::before,.quick-status-bar::before{ content:"STATUS";position:absolute;left:9px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:center; color:#fff;font-size:11px;letter-spacing:.16em;font-weight:950;text-transform:uppercase;opacity:.95; } .audio,#audioToggle{pointer-events:auto!important;user-select:none!important;touch-action:manipulation!important} @media (max-width:760px),(hover:none) and (pointer:coarse){ .world-switcher,.world-status,.current-world,.status-strip,.server-status-bar,.quick-status-bar{ left:0!important;top:58%!important;transform:translate(calc(-100% + 38px),-50%)!important; max-width:220px!important;min-width:150px!important;padding:10px 12px 10px 46px!important; border-radius:0 16px 16px 0!important;font-size:11px!important;backdrop-filter:none!important; } .world-switcher.open,.world-switcher:focus-within, .world-status.open,.world-status:focus-within, .current-world.open,.current-world:focus-within, .status-strip.open,.status-strip:focus-within, .server-status-bar.open,.server-status-bar:focus-within, .quick-status-bar.open,.quick-status-bar:focus-within{transform:translate(0,-50%)!important} .audio,#audioToggle{right:16px!important;left:auto!important;bottom:18px!important;z-index:44!important;min-height:42px!important;padding:0 14px!important;font-size:11px!important} .back-to-top{right:16px!important;bottom:74px!important} } /* ===== Final Clean Fix: one audio + left slide server status ===== */ .rl-status-widget{display:none!important} /* Move the ORIGINAL server status bar to left side and make it slideable */ #serverStatus.server-status, #serverStatus { position: fixed !important; left: 0 !important; right: auto !important; top: 54% !important; bottom: auto !important; transform: translate(calc(-100% + 44px), -50%) !important; z-index: 50 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 7px !important; width: 230px !important; max-width: 230px !important; min-height: 132px !important; padding: 16px 14px 16px 52px !important; border-radius: 0 18px 18px 0 !important; cursor: pointer !important; transition: transform .24s ease, box-shadow .24s ease !important; writing-mode: horizontal-tb !important; } #serverStatus.open, #serverStatus:hover, #serverStatus:focus-within { transform: translate(0, -50%) !important; } #serverStatus::before { content: "STATUS"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; color: #fff; font-size: 11px; letter-spacing: .16em; font-weight: 950; text-transform: uppercase; opacity: .95; white-space: nowrap; } #serverStatus span, #serverStatus b { white-space: nowrap !important; } #audioToggle, .audio { pointer-events: auto !important; touch-action: manipulation !important; user-select: none !important; z-index: 52 !important; } /* Mobile-only: smaller slide tab and keep audio bottom-right */ @media (max-width:760px),(hover:none) and (pointer:coarse) { #serverStatus.server-status, #serverStatus { top: 58% !important; width: 210px !important; max-width: 210px !important; min-height: 120px !important; padding: 13px 12px 13px 48px !important; transform: translate(calc(-100% + 40px), -50%) !important; border-radius: 0 16px 16px 0 !important; backdrop-filter: none !important; font-size: 11px !important; } #serverStatus.open, #serverStatus:focus-within { transform: translate(0, -50%) !important; } #audioToggle, .audio { right: 16px !important; left: auto !important; bottom: 18px !important; min-height: 42px !important; padding: 0 14px !important; font-size: 11px !important; } } /* ===== Final Mobile Audio + OG + Setup Status ===== */ .rl-status-widget{display:none!important} #serverStatus.server-status,#serverStatus{position:fixed!important;left:0!important;right:auto!important;top:54%!important;bottom:auto!important;transform:translate(calc(-100% + 44px),-50%)!important;z-index:50!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:7px!important;width:240px!important;max-width:240px!important;min-height:150px!important;padding:16px 14px 16px 52px!important;border-radius:0 18px 18px 0!important;cursor:pointer!important;transition:transform .24s ease!important;writing-mode:horizontal-tb!important} #serverStatus.open,#serverStatus:hover,#serverStatus:focus-within{transform:translate(0,-50%)!important} #serverStatus::before{content:"STATUS";position:absolute;left:8px;top:50%;transform:translateY(-50%) rotate(-90deg);color:#fff;font-size:11px;letter-spacing:.16em;font-weight:950;text-transform:uppercase;white-space:nowrap} #serverStatus span,#serverStatus b{white-space:nowrap!important} #audioToggle,.audio{pointer-events:auto!important;touch-action:manipulation!important;user-select:none!important;z-index:52!important;cursor:pointer!important;-webkit-tap-highlight-color:transparent!important} @media (max-width:760px),(hover:none) and (pointer:coarse){ #serverStatus.server-status,#serverStatus{top:58%!important;width:220px!important;max-width:220px!important;min-height:140px!important;padding:13px 12px 13px 48px!important;transform:translate(calc(-100% + 40px),-50%)!important;border-radius:0 16px 16px 0!important;backdrop-filter:none!important;font-size:11px!important} #serverStatus.open,#serverStatus:focus-within{transform:translate(0,-50%)!important} #audioToggle,.audio{right:16px!important;left:auto!important;bottom:18px!important;min-height:46px!important;min-width:116px!important;padding:0 16px!important;font-size:11px!important;line-height:1!important} } /* ===== REDLINE FINAL PROFESSIONAL CONTROLS + STATUS UPGRADE ===== */ /* Non-destructive override: visual/layout only. Existing JS functions remain attached to same IDs/classes. */ :root{ --rl-red:#ff3030; --rl-red-soft:rgba(255,48,48,.22); --rl-blue:#42aaff; --rl-blue-soft:rgba(66,170,255,.22); --rl-glass:rgba(5,8,13,.82); --rl-glass-strong:rgba(3,5,9,.92); --rl-muted:rgba(235,245,255,.68); } /* Professional status card with icons */ #serverStatus.server-status, #serverStatus{ position:fixed!important; left:0!important; right:auto!important; top:52%!important; bottom:auto!important; width:270px!important; max-width:270px!important; min-height:0!important; padding:15px 16px 15px 54px!important; transform:translate(calc(-100% + 46px),-50%)!important; z-index:70!important; display:grid!important; grid-template-columns:1fr!important; gap:8px!important; border-radius:0 18px 18px 0!important; background:linear-gradient(135deg,rgba(7,10,16,.96),rgba(12,6,6,.90))!important; border:1px solid rgba(255,80,80,.34)!important; border-left:0!important; box-shadow:0 18px 38px rgba(0,0,0,.45),0 0 22px rgba(255,0,0,.13)!important; backdrop-filter:blur(10px)!important; -webkit-backdrop-filter:blur(10px)!important; color:#fff!important; cursor:pointer!important; overflow:hidden!important; transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease!important; } body.blue-mode #serverStatus{ background:linear-gradient(135deg,rgba(5,10,18,.96),rgba(3,16,32,.91))!important; border-color:rgba(80,175,255,.42)!important; box-shadow:0 18px 38px rgba(0,0,0,.45),0 0 22px rgba(0,130,255,.16)!important; } #serverStatus.open, #serverStatus:hover, #serverStatus:focus-within{ transform:translate(0,-50%)!important; } #serverStatus::before{ content:"LIVE"!important; position:absolute!important; left:10px!important; top:50%!important; transform:translateY(-50%) rotate(-90deg)!important; transform-origin:center!important; color:#fff!important; font-size:10px!important; line-height:1!important; letter-spacing:.28em!important; font-weight:950!important; text-transform:uppercase!important; opacity:.82!important; white-space:nowrap!important; } #serverStatus::after{ content:""!important; position:absolute!important; left:43px!important; top:12px!important; bottom:12px!important; width:1px!important; background:linear-gradient(180deg,transparent,rgba(255,255,255,.18),transparent)!important; } #serverStatus span, #serverStatus b{ position:relative!important; display:flex!important; align-items:center!important; gap:9px!important; width:100%!important; min-height:22px!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; font-size:12px!important; letter-spacing:.04em!important; color:var(--rl-muted)!important; text-transform:uppercase!important; } #serverStatus b#serverState{ color:#fff!important; font-size:13px!important; font-weight:950!important; letter-spacing:.12em!important; } #serverDot{ width:10px!important; height:10px!important; min-width:10px!important; min-height:10px!important; border-radius:50%!important; padding:0!important; display:inline-flex!important; background:#ff3030!important; box-shadow:0 0 14px rgba(255,48,48,.8)!important; } #serverState::before{content:"";display:none!important} #playerCount::before{content:"👥";font-size:13px;filter:saturate(1.2)} #lspdCount::before{content:"🛡";font-size:13px} #emsCount::before{content:"✚";font-size:13px;color:#63d7ff} #adminCount::before{content:"👑";font-size:13px} #serverName::before{content:"◆";font-size:10px;color:var(--rl-red)} body.blue-mode #serverName::before{color:var(--rl-blue)} #serverName{ margin-top:2px!important; padding-top:6px!important; border-top:1px solid rgba(255,255,255,.10)!important; color:#fff!important; font-weight:900!important; } /* Professional world command dock */ .world-switch{ position:fixed!important; right:26px!important; top:50%!important; transform:translateY(-50%)!important; z-index:65!important; width:88px!important; min-height:188px!important; padding:42px 12px 14px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:10px!important; border-radius:22px!important; background:linear-gradient(180deg,rgba(8,8,12,.92),rgba(20,4,4,.82))!important; border:1px solid rgba(255,75,75,.30)!important; box-shadow:0 18px 38px rgba(0,0,0,.42),0 0 24px rgba(255,0,0,.14)!important; backdrop-filter:blur(10px)!important; -webkit-backdrop-filter:blur(10px)!important; pointer-events:auto!important; } body.blue-mode .world-switch{ background:linear-gradient(180deg,rgba(5,10,18,.94),rgba(2,18,38,.84))!important; border-color:rgba(80,175,255,.36)!important; box-shadow:0 18px 38px rgba(0,0,0,.42),0 0 24px rgba(0,130,255,.16)!important; } .world-switch::before{ content:"WORLD"!important; position:absolute!important; top:13px!important; left:0!important; right:0!important; text-align:center!important; color:rgba(255,255,255,.68)!important; font-size:9px!important; letter-spacing:.20em!important; font-weight:950!important; } .world-switch::after{ content:"Underworld"!important; position:absolute!important; left:50%!important; bottom:-34px!important; transform:translateX(-50%)!important; min-width:118px!important; padding:7px 10px!important; border-radius:999px!important; color:#ffdede!important; background:rgba(8,0,0,.88)!important; border:1px solid rgba(255,75,75,.32)!important; box-shadow:0 0 18px rgba(255,0,0,.13)!important; font-size:10px!important; font-weight:950!important; letter-spacing:.11em!important; text-transform:uppercase!important; text-align:center!important; } body.blue-mode .world-switch::after{ content:"Civilian World"!important; color:#def2ff!important; background:rgba(2,13,28,.90)!important; border-color:rgba(80,175,255,.34)!important; box-shadow:0 0 18px rgba(0,130,255,.14)!important; } .world-btn, .world-dot{ position:relative!important; width:46px!important; height:46px!important; border-radius:16px!important; display:grid!important; place-items:center!important; cursor:pointer!important; color:#fff!important; background:rgba(255,255,255,.045)!important; border:1px solid rgba(255,255,255,.16)!important; box-shadow:none!important; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease!important; } .world-btn{ font-size:30px!important; font-weight:900!important; line-height:1!important; } .world-btn:hover, .world-dot:hover{ transform:translateY(-1px)!important; background:rgba(255,255,255,.075)!important; } body:not(.blue-mode) .world-btn.up, body:not(.blue-mode) .world-dot{ border-color:rgba(255,75,75,.46)!important; box-shadow:0 0 16px rgba(255,0,0,.18)!important; } body.blue-mode .world-btn.down, body.blue-mode .world-dot{ border-color:rgba(80,175,255,.50)!important; box-shadow:0 0 16px rgba(0,130,255,.20)!important; } .world-btn.up::before, .world-btn.down::before{ display:none!important; } .world-dot{ width:54px!important; height:28px!important; border-radius:999px!important; cursor:default!important; pointer-events:none!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; } .world-dot::before, .world-dot::after{ content:""!important; display:block!important; width:8px!important; height:8px!important; border-radius:50%!important; background:rgba(255,255,255,.28)!important; box-shadow:none!important; } body:not(.blue-mode) .world-dot::before{ background:var(--rl-red)!important; box-shadow:0 0 12px rgba(255,48,48,.85)!important; } body.blue-mode .world-dot::after{ background:var(--rl-blue)!important; box-shadow:0 0 12px rgba(66,170,255,.85)!important; } .world-indicator{ display:none!important; } /* Align existing sound and top buttons into the same professional control language */ #audioToggle, .audio, #backToTop.back-to-top{ position:fixed!important; right:26px!important; left:auto!important; border-radius:999px!important; background:rgba(5,8,13,.88)!important; color:#fff!important; border:1px solid rgba(255,75,75,.30)!important; box-shadow:0 14px 30px rgba(0,0,0,.35),0 0 18px rgba(255,0,0,.10)!important; backdrop-filter:blur(10px)!important; -webkit-backdrop-filter:blur(10px)!important; z-index:66!important; } body.blue-mode #audioToggle, body.blue-mode .audio, body.blue-mode #backToTop.back-to-top{ border-color:rgba(80,175,255,.36)!important; box-shadow:0 14px 30px rgba(0,0,0,.35),0 0 18px rgba(0,130,255,.12)!important; } #audioToggle, .audio{ bottom:26px!important; min-width:122px!important; min-height:44px!important; padding:0 16px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; font-size:11px!important; line-height:1!important; font-weight:950!important; letter-spacing:.09em!important; text-transform:uppercase!important; } #audioToggle::before, .audio::before{ content:"🔇"; margin-right:7px; font-size:13px; } #audioToggle.is-playing::before, .audio.is-playing::before{ content:"🔊"; } #backToTop.back-to-top{ bottom:82px!important; width:44px!important; height:44px!important; font-size:20px!important; font-weight:950!important; } /* Mobile: bottom dock, does not cover cards aggressively */ @media (max-width:760px),(hover:none) and (pointer:coarse){ #serverStatus.server-status, #serverStatus{ top:55%!important; width:248px!important; max-width:248px!important; padding:13px 12px 13px 50px!important; transform:translate(calc(-100% + 42px),-50%)!important; font-size:11px!important; border-radius:0 16px 16px 0!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } #serverStatus.open, #serverStatus:focus-within{ transform:translate(0,-50%)!important; } .world-switch{ left:50%!important; right:auto!important; top:auto!important; bottom:14px!important; transform:translateX(-50%)!important; width:min(288px,calc(100vw - 30px))!important; min-height:54px!important; height:54px!important; padding:7px 70px 7px 54px!important; border-radius:999px!important; flex-direction:row!important; gap:9px!important; justify-content:center!important; z-index:64!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .world-switch::before{ content:"WORLD"!important; top:50%!important; left:14px!important; right:auto!important; transform:translateY(-50%)!important; font-size:8px!important; writing-mode:vertical-rl!important; letter-spacing:.10em!important; } .world-switch::after{ left:auto!important; right:12px!important; bottom:50%!important; transform:translateY(50%)!important; min-width:0!important; width:64px!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; font-size:8px!important; line-height:1.15!important; white-space:normal!important; } .world-btn{ width:40px!important; height:40px!important; border-radius:14px!important; font-size:26px!important; } .world-dot{ width:48px!important; height:24px!important; } #audioToggle, .audio{ right:16px!important; bottom:78px!important; min-width:48px!important; width:48px!important; height:48px!important; min-height:48px!important; padding:0!important; font-size:0!important; z-index:66!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } #audioToggle::before, .audio::before{ margin:0!important; font-size:17px!important; } #backToTop.back-to-top{ right:16px!important; bottom:132px!important; width:44px!important; height:44px!important; z-index:65!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } } /* Owner/creator footer readiness: applies only when owner markup is added later. */ .owner-credit{color:#ffd36a!important;text-shadow:0 0 12px rgba(255,195,70,.26)} .creator-credit{color:#fff!important;text-shadow:0 0 12px rgba(255,45,45,.22)} body.blue-mode .creator-credit{ text-shadow:0 0 12px rgba(66,170,255,.22) } /* ===== HOTFIX: status red blur removal, owner addition, audio polish ===== */ /* Remove red oval/blur artifact on the live status card. */ #serverStatus b#serverState::before, #serverStatus b#serverState::after, #serverStatus #serverState::before, #serverStatus #serverState::after, #serverStatus .status-glow, #serverStatus .status-pulse, #serverStatus .live-glow, #serverStatus .server-glow{ content:none!important; display:none!important; background:none!important; box-shadow:none!important; filter:none!important; } #serverStatus{ isolation:isolate!important; } #serverStatus::marker{ display:none!important; } #serverStatus b#serverState{ padding-top:0!important; margin-top:0!important; } #serverStatus #serverDot{ position:relative!important; z-index:2!important; } #lspdCount,#emsCount,#adminCount{ color:rgba(235,245,255,.76)!important; } /* Owner placements */ .owner-hero-badge{ display:inline-flex!important; align-items:center!important; gap:9px!important; margin:14px 0 4px!important; padding:8px 12px!important; border-radius:999px!important; color:#ffe6a3!important; text-decoration:none!important; background:linear-gradient(135deg,rgba(255,191,71,.13),rgba(255,48,48,.10))!important; border:1px solid rgba(255,207,111,.34)!important; box-shadow:0 0 20px rgba(255,185,60,.10)!important; font-size:12px!important; font-weight:900!important; letter-spacing:.08em!important; text-transform:uppercase!important; } .owner-hero-badge strong{ color:#fff2bd!important; } .owner-crown{ filter:drop-shadow(0 0 8px rgba(255,197,70,.38))!important; } .owner-about-line{ margin-top:12px!important; color:rgba(238,246,255,.78)!important; } .owner-about-line a{ color:#ffd36a!important; text-decoration:none!important; font-weight:900!important; } .redline-footer-credits{ display:flex!important; flex-wrap:wrap!important; justify-content:center!important; align-items:center!important; gap:8px!important; margin-top:14px!important; font-size:12px!important; letter-spacing:.04em!important; text-transform:uppercase!important; } .owner-credit, .owner-credit a{ color:#ffd36a!important; text-decoration:none!important; text-shadow:0 0 12px rgba(255,195,70,.26)!important; font-weight:900!important; } .creator-credit{ color:#fff!important; text-shadow:0 0 12px rgba(255,45,45,.22)!important; font-weight:800!important; } body.blue-mode .creator-credit{ text-shadow:0 0 12px rgba(66,170,255,.22)!important; } .credit-sep{ color:rgba(255,255,255,.35)!important; } @media (max-width:760px),(hover:none) and (pointer:coarse){ .owner-hero-badge{ font-size:10px!important; padding:7px 10px!important; gap:7px!important; max-width:calc(100vw - 32px)!important; white-space:normal!important; } .redline-footer-credits{ flex-direction:column!important; gap:5px!important; font-size:10px!important; } .credit-sep{display:none!important;} } /* ===== FINAL CLEAN STATUS CARD: remove red top blur/strip in all worlds/devices ===== */ #serverStatus::before, #serverStatus::after, #serverStatus.server-status::before, #serverStatus.server-status::after{ background: none !important; box-shadow: none !important; filter: none !important; } /* Rebuild only the side LIVE label without any glowing top strip. */ #serverStatus::before{ content:"LIVE" !important; position:absolute !important; left:10px !important; top:50% !important; transform:translateY(-50%) rotate(-90deg) !important; transform-origin:center !important; color:rgba(255,255,255,.78) !important; font-size:10px !important; line-height:1 !important; letter-spacing:.28em !important; font-weight:950 !important; text-transform:uppercase !important; opacity:.9 !important; white-space:nowrap !important; } /* Rebuild only the vertical divider, no red horizontal glow. */ #serverStatus::after{ content:"" !important; position:absolute !important; left:43px !important; top:12px !important; bottom:12px !important; width:1px !important; height:auto !important; border-radius:0 !important; background:linear-gradient(180deg,transparent,rgba(255,255,255,.18),transparent) !important; box-shadow:none !important; filter:none !important; } /* Kill every possible internal status glow/accent layer. */ #serverStatus .status-glow, #serverStatus .status-accent, #serverStatus .status-pulse, #serverStatus .live-glow, #serverStatus .server-glow, #serverStatus .red-glow, #serverStatus .blue-glow, #serverStatus .neon-strip, #serverStatus .status-strip{ display:none !important; opacity:0 !important; visibility:hidden !important; background:none !important; box-shadow:none !important; filter:none !important; } /* Kill top pseudo effects on all direct children that could create the oval strip. */ #serverStatus > *::before, #serverStatus > *::after, #serverStatus span::after, #serverStatus b::after, #serverStatus #serverState::before, #serverStatus #serverState::after{ box-shadow:none !important; filter:none !important; } #serverStatus #serverState::before, #serverStatus #serverState::after{ content:none !important; display:none !important; background:none !important; } /* Keep the status card itself clean. */ #serverStatus{ overflow:hidden !important; background: linear-gradient(135deg,rgba(7,10,16,.96),rgba(12,6,6,.90)) !important; } body.blue-mode #serverStatus{ background: linear-gradient(135deg,rgba(5,10,18,.96),rgba(3,16,32,.91)) !important; } /* Fix EMS/LSPD/Admin setup wording visual consistency. */ #lspdCount,#emsCount,#adminCount{ color:rgba(235,245,255,.78) !important; } /* Final footer credit styling with correct clickable links. */ .final-footer-credits, .redline-footer-credits{ display:flex !important; flex-wrap:wrap !important; justify-content:center !important; align-items:center !important; gap:8px !important; margin-top:14px !important; font-size:12px !important; letter-spacing:.04em !important; text-transform:uppercase !important; } .owner-credit, .owner-credit a{ color:#ffd36a !important; text-decoration:none !important; text-shadow:0 0 12px rgba(255,195,70,.28) !important; font-weight:950 !important; } .creator-credit, .creator-credit a{ color:#fff !important; text-decoration:none !important; text-shadow:0 0 12px rgba(255,45,45,.25) !important; font-weight:900 !important; } body.blue-mode .creator-credit, body.blue-mode .creator-credit a{ text-shadow:0 0 12px rgba(66,170,255,.25) !important; } .credit-sep{ color:rgba(255,255,255,.38) !important; } @media (max-width:760px),(hover:none) and (pointer:coarse){ #serverStatus::before{ left:9px !important; font-size:9px !important; } #serverStatus::after{ left:40px !important; } .final-footer-credits, .redline-footer-credits{ flex-direction:column !important; gap:5px !important; font-size:10px !important; } .credit-sep{display:none !important;} } /* ===== FINAL CLEAN OWNER + FOOTER + STATUS FIX ===== */ /* Remove broken old owner placement styles from affecting layout. */ .owner-hero-badge{display:none!important} /* Clean hero owner strip: centered, compact, not interfering with the title. */ .owner-hero-strip{ display:flex!important; justify-content:center!important; align-items:center!important; margin:12px auto 20px!important; width:100%!important; } .owner-hero-strip a{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:9px!important; padding:8px 14px!important; border-radius:999px!important; text-decoration:none!important; color:#fff!important; font-size:11px!important; line-height:1!important; font-weight:950!important; letter-spacing:.09em!important; text-transform:uppercase!important; background:linear-gradient(135deg,rgba(255,199,68,.12),rgba(255,45,45,.10))!important; border:1px solid rgba(255,207,111,.30)!important; box-shadow:0 0 18px rgba(255,185,60,.10)!important; } .owner-hero-strip strong{ color:#ffd36a!important; text-shadow:0 0 10px rgba(255,195,70,.35)!important; } body.blue-mode .owner-hero-strip a{ background:linear-gradient(135deg,rgba(255,199,68,.12),rgba(35,145,255,.10))!important; border-color:rgba(255,207,111,.28)!important; } /* Footer: keep credits centered inside footer, not floating on the left. */ .footer-bottom{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:10px!important; text-align:center!important; width:100%!important; margin:0 auto!important; padding-top:18px!important; } .footer-copy{ display:block!important; color:#8fa0b4!important; font-size:12px!important; letter-spacing:.12em!important; font-weight:900!important; text-transform:uppercase!important; } .redline-footer-credits, .final-footer-credits{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; justify-content:center!important; gap:8px!important; width:100%!important; margin:0 auto!important; padding:0!important; text-align:center!important; font-size:12px!important; letter-spacing:.04em!important; text-transform:uppercase!important; } .owner-credit, .owner-credit a{ color:#ffd36a!important; text-decoration:none!important; text-shadow:0 0 12px rgba(255,195,70,.28)!important; font-weight:950!important; } .creator-credit, .creator-credit a{ color:#fff!important; text-decoration:none!important; text-shadow:0 0 12px rgba(255,45,45,.25)!important; font-weight:900!important; } body.blue-mode .creator-credit, body.blue-mode .creator-credit a{ text-shadow:0 0 12px rgba(66,170,255,.25)!important; } .credit-sep{ color:rgba(255,255,255,.42)!important; } /* STATUS: remove actual old dot/oval completely. */ #serverDot, #serverStatus #serverDot, #serverStatus .online-dot{ display:none!important; visibility:hidden!important; opacity:0!important; width:0!important; height:0!important; min-width:0!important; min-height:0!important; max-width:0!important; max-height:0!important; padding:0!important; margin:0!important; background:none!important; border:0!important; box-shadow:none!important; filter:none!important; animation:none!important; } #serverDot::before, #serverDot::after, #serverStatus .online-dot::before, #serverStatus .online-dot::after{ content:none!important; display:none!important; } /* STATUS: no red horizontal strip anywhere. */ #serverStatus > span:first-child, #serverStatus > span:first-child::before, #serverStatus > span:first-child::after, #serverStatus .status-glow, #serverStatus .status-accent, #serverStatus .status-pulse, #serverStatus .live-glow, #serverStatus .server-glow, #serverStatus .red-glow, #serverStatus .neon-strip, #serverStatus .status-strip{ display:none!important; content:none!important; opacity:0!important; visibility:hidden!important; background:none!important; box-shadow:none!important; filter:none!important; } /* STATUS: clean small dot rebuilt before Server Online/Offline text. */ #serverStatus #serverState{ display:flex!important; align-items:center!important; gap:9px!important; margin-top:0!important; padding-top:0!important; } #serverStatus #serverState::before{ content:""!important; display:inline-block!important; width:9px!important; height:9px!important; min-width:9px!important; min-height:9px!important; border-radius:50%!important; background:#ff3030!important; box-shadow:0 0 10px rgba(255,48,48,.70)!important; filter:none!important; opacity:1!important; position:static!important; transform:none!important; } #serverStatus.status-online #serverState::before{ background:#00ff66!important; box-shadow:0 0 10px rgba(0,255,102,.75)!important; } #serverStatus.status-offline #serverState::before{ background:#ff3030!important; box-shadow:0 0 10px rgba(255,48,48,.70)!important; } /* STATUS: side label and divider only. */ #serverStatus::before{ content:"LIVE"!important; position:absolute!important; left:10px!important; top:50%!important; transform:translateY(-50%) rotate(-90deg)!important; transform-origin:center!important; color:rgba(255,255,255,.78)!important; font-size:10px!important; letter-spacing:.28em!important; font-weight:950!important; text-transform:uppercase!important; background:none!important; box-shadow:none!important; filter:none!important; } #serverStatus::after{ content:""!important; position:absolute!important; left:43px!important; top:12px!important; bottom:12px!important; width:1px!important; height:auto!important; border-radius:0!important; background:linear-gradient(180deg,transparent,rgba(255,255,255,.18),transparent)!important; box-shadow:none!important; filter:none!important; } /* STATUS: clean text labels. */ #lspdCount,#emsCount,#adminCount{ color:rgba(235,245,255,.78)!important; } /* Mobile compact footer and owner strip. */ @media (max-width:760px),(hover:none) and (pointer:coarse){ .owner-hero-strip{ margin:10px auto 16px!important; } .owner-hero-strip a{ font-size:10px!important; padding:7px 11px!important; max-width:calc(100vw - 34px)!important; } .footer-bottom{ gap:8px!important; padding-top:16px!important; } .redline-footer-credits, .final-footer-credits{ flex-direction:column!important; gap:5px!important; font-size:10px!important; } .credit-sep{display:none!important} #serverStatus::before{ left:9px!important; font-size:9px!important; } #serverStatus::after{ left:40px!important; } }