html{scrollbar-gutter:stable;}
:root{--green:#9cff25;--green2:#5dd51b;--black:#020604;--panel:#07100c;--line:#9cff2530;--text:#f4f8f5;--muted:#7e9187}
*{box-sizing:border-box}
body{margin:0;background:#020504;color:var(--text);font-family:Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}
/* V25 — single-piece header artwork */
/* V70 — clean, separated header */
.hero{
position:relative;
width:min(1420px,calc(100vw - 56px));
aspect-ratio:1706 / 610;
margin:22px auto 0;
overflow:hidden;
border:0;
border-radius:24px;
background:#020304;
box-shadow:0 18px 55px rgba(0,0,0,.82);
line-height:0;
}
.hero-v25-art{
display:block;
width:100%;
height:100%;
margin:0;
border:0;
border-radius:23px;
object-fit:cover;
}
/* V1(4) — subtle continuous pulse directly over the ORIGINAL headlights.
No replacement lamp discs; this only adds a localized glow. */
.hero-headlight-pulse{position:absolute;inset:0;z-index:3;pointer-events:none}
.hero-headlight{position:absolute;display:block;width:4.2%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0) 0 43%,rgba(255,245,190,.20) 55%,rgba(255,220,120,.10) 68%,rgba(255,210,80,0) 80%);box-shadow:0 0 10px 3px rgba(255,235,165,.24),0 0 24px 8px rgba(255,214,92,.13);transform:translate(-50%,-50%) scale(.92);opacity:.42;animation:heroHeadlightPulse 3.8s ease-in-out infinite}
.hero-headlight-left{left:55.53%;top:49.87%}
.hero-headlight-right{left:57.21%;top:49.82%;animation-delay:.12s}
@keyframes heroHeadlightPulse{0%,100%{opacity:.30;transform:translate(-50%,-50%) scale(.90);filter:brightness(.90)}50%{opacity:.90;transform:translate(-50%,-50%) scale(1.08);filter:brightness(1.30)}}
/* Live statistics — five identical, evenly aligned cards */
.live-stats-box{
width:min(1560px,calc(100vw - 32px));
max-width:1560px;
margin:42px auto 20px;
border:0;
border-radius:0;
overflow:visible;
background:transparent;
box-shadow:none;
}
.live-stats-box .stats{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:12px;
width:100%;
margin:0;
padding:0;
background:transparent;
align-items:stretch;
}
.live-stats-box .stats div{
width:100%;
min-width:0;
height:110px;
min-height:110px;
box-sizing:border-box;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:14px 10px;
border:1px solid rgba(156,255,37,.32);
border-radius:16px;
background:linear-gradient(145deg,#08130f,#030806);
box-shadow:0 12px 30px #0007;
}
.live-stats-box .stats div:last-child{border-right:1px solid rgba(156,255,37,.32)}
.live-stats-box .stats b{
display:block;
width:100%;
font-size:30px;
line-height:1;
text-align:center;
color:#f4f8f5;
font-variant-numeric:tabular-nums;
}
.live-stats-box .stats div:nth-child(2) b,
.live-stats-box .stats div:nth-child(5) b{color:var(--green)}
.live-stats-box .stats span{
display:block;
width:100%;
margin-top:8px;
font-size:8px;
line-height:1;
text-align:center;
color:var(--muted);
letter-spacing:2px;
white-space:nowrap;
}
main{width:min(1560px,calc(100vw - 32px));max-width:1560px;margin:auto;padding:0 0 30px}.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px}.stats div{padding:20px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#08130f,#030806)}.stats b{display:block;font-size:30px;color:#f4f8f5}.stats div:nth-child(2) b,.stats div:nth-child(5) b{color:var(--green)}.stats span{font-size:8px;color:var(--muted);letter-spacing:2px}
.board,.achievements{border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#07110d,#030806);box-shadow:0 18px 50px #0007;margin-bottom:14px;overflow:hidden}.board-head{display:flex;justify-content:space-between;align-items:center;padding:21px;border-bottom:1px solid #9cff2515}.board h2,.achievements h2{margin:4px 0 0;font-size:26px}.board-head button{background:#9cff25;color:#071004;border:0;border-radius:10px;padding:10px 13px;font-size:9px;font-weight:900;letter-spacing:1px}.driver-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:14px}.driver{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:15px;border:1px solid #9cff2526;border-radius:16px;background:#040b08;position:relative;overflow:hidden}.driver:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#9cff2508,transparent 60%);pointer-events:none}.avatar{width:68px;height:68px;border:2px solid var(--green);border-radius:50%;overflow:hidden;background:#020604;box-shadow:0 0 20px #9cff2520}.avatar img{width:280%;height:280%;max-width:none;max-height:none;object-fit:contain;position:relative;left:-90%;top:-90%}.name{font-size:17px;font-weight:900}.meta{font-size:9px;color:var(--muted);margin-top:5px}.mini{display:flex;gap:12px;margin-top:10px}.mini b{font-size:12px}.mini small{display:block;color:#687a70;font-size:7px;letter-spacing:1px;margin-top:2px}.rank{color:var(--green);font-size:11px;font-weight:900;align-self:start}.online-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#5b6861;margin-right:5px}.driver.online .online-dot{background:var(--green);box-shadow:0 0 10px var(--green)}
.section-title{padding:21px;border-bottom:1px solid #9cff2515}.badge-grid{display:grid;grid-template-columns:repeat(15,1fr);gap:7px;padding:14px}.badge{padding:8px 3px 10px;border:1px solid #9cff2510;border-radius:12px;background:#030806;text-align:center}.badge img{width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 8px 12px #000)}.badge span{display:block;color:#a8c2ac;font-size:8px;margin-top:4px}
footer{max-width:1560px;margin:auto;padding:15px 16px 35px;color:#61756b;font-size:9px;display:flex;gap:22px;letter-spacing:1px}footer strong{color:#a7c998}
.loading{text-align:center;color:var(--muted);padding:50px}.empty{text-align:center;color:var(--muted);padding:40px;grid-column:1/-1}
@media(max-width:1100px){.badge-grid{grid-template-columns:repeat(8,1fr)}.live-stats-box .stats{grid-template-columns:repeat(3,minmax(0,1fr))}.stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.driver-grid{grid-template-columns:1fr}.badge-grid{grid-template-columns:repeat(5,1fr)}.live-stats-box .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.live-stats-box .stats div:nth-child(2n){border-right:1px solid rgba(156,255,37,.32)}.live-stats-box .stats div{border-bottom:1px solid rgba(156,255,37,.18)}}
@media(max-width:520px){.hero{width:calc(100vw - 20px);margin:14px auto 0;border-radius:18px}.live-stats-box{width:calc(100vw - 20px);margin:26px auto 12px}.live-stats-box .stats{grid-template-columns:1fr 1fr}.badge-grid{grid-template-columns:repeat(3,1fr)}.driver{grid-template-columns:60px 1fr}.rank{grid-column:2}.avatar{width:58px;height:58px}}
/* V29: every driver is always listed; dot shows current presence */
.online-dot.is-online{background:#8cff00;box-shadow:0 0 8px #8cff00;}
.online-dot.is-offline{background:#4a5a4a;box-shadow:none;}
#onlineOnly[disabled]{opacity:1;cursor:default;}
/* V38 — clickable driver profiles and achievement pop-out */
.driver{cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.driver:hover,.driver:focus-visible{transform:translateY(-2px);border-color:#9cff2570;box-shadow:0 10px 28px #0008;outline:none}
body.modal-open{overflow:hidden}
.driver-modal[hidden]{display:none}
.driver-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px}
.driver-modal-backdrop{position:absolute;inset:0;background:#000b;backdrop-filter:blur(5px)}
.driver-modal-panel{position:relative;z-index:1;width:min(860px,calc(100vw - 30px));max-height:min(760px,calc(100vh - 30px));overflow:auto;border:1px solid #9cff2570;border-radius:20px;background:linear-gradient(145deg,#09130e,#020604);box-shadow:0 30px 90px #000; padding:26px}
.driver-modal-close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:1px solid #9cff2540;border-radius:50%;background:#07100c;color:#fff;font-size:25px;line-height:1;cursor:pointer}
.driver-modal-top{display:flex;gap:18px;align-items:center;padding-right:45px}
.driver-modal-avatar{width:140px;height:140px;border:2px solid var(--green);border-radius:50%;overflow:hidden;background:#020604;box-shadow:0 0 25px #9cff2530;flex:none}
.driver-modal-avatar img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;position:static;margin:0}
.modal-kicker{font-size:9px;letter-spacing:2px;color:var(--green);font-weight:800}
.driver-modal-panel h2{margin:4px 0 7px;font-size:28px}
.modal-status{font-size:10px;color:var(--muted)}
.driver-modal-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:24px 0}
.driver-modal-stats div{padding:16px 8px;text-align:center;border:1px solid #9cff2525;border-radius:12px;background:#030806}
.driver-modal-stats b{display:block;font-size:20px}.driver-modal-stats span{font-size:7px;letter-spacing:1.5px;color:var(--muted)}
.driver-modal .modal-achievements-title{margin-top:8px;margin-bottom:10px;font-size:9px;letter-spacing:2px;color:#a8c2ac}
.driver-modal .modal-achievements{display:grid;grid-template-columns:repeat(5,1fr);gap:8px};align-items:start
.driver-modal .modal-badge{min-height:156px;padding:8px 4px 10px;border:1px solid #9cff2510;border-radius:12px;background:#030806;text-align:center;opacity:1;overflow:visible}
.driver-modal .modal-badge.earned{opacity:1;border-color:#9cff2550;box-shadow:0 0 15px #9cff2512}
.driver-modal .modal-badge img{display:block;width:118px;height:118px;max-width:none;margin:0 auto;object-fit:contain;filter:drop-shadow(0 8px 12px #000);transform:scale(1.15);transform-origin:center center}
.driver-modal .modal-badge span{display:block;margin-top:4px;color:#a8c2ac;font-size:7px;line-height:1.2}
@media(max-width:600px){.driver-modal .modal-achievements{grid-template-columns:repeat(3,1fr)}}
.modal-achievements-title{font-size:9px;letter-spacing:2px;color:var(--green);font-weight:800;border-bottom:1px solid #9cff2515;padding-bottom:10px}
.modal-achievements{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-top:12px}
.modal-achievement{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:120px;border:1px solid #9cff2515;border-radius:12px;background:#030806;padding:8px;text-align:center}
.modal-achievement img{width:64px;height:64px;object-fit:contain}.modal-achievement span{font-size:8px;color:#a8c2ac;margin-top:4px}
.modal-no-achievements{grid-column:1/-1;padding:24px;text-align:center;color:var(--muted);font-size:11px}
@media(max-width:650px){.driver-modal-stats{grid-template-columns:repeat(2,1fr)}.modal-achievements{grid-template-columns:repeat(2,1fr)}.driver-modal-panel{padding:20px}}
/* V46: extra-large driver profile badge — website only */
.driver-modal-avatar{
width:140px!important;
height:140px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
overflow:hidden!important;
border-radius:50%!important;
}
.driver-modal-avatar img{
width:140px!important;
height:140px!important;
max-width:none!important;
max-height:none!important;
object-fit:contain!important;
display:block!important;
margin:0!important;
transform:scale(1.65)!important;
transform-origin:center center!important;
}
/* V57: large milestone driver achievement blocks */
.milestone-achievements,
.milestone-grid,
.driver-milestones,
.milestone-achievement-grid{
grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
gap:16px!important;
}
.milestone-achievement,
.milestone-card,
.driver-milestone,
.milestone-item{
min-height:190px!important;
min-width:180px!important;
padding:16px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
}
.milestone-achievement img,
.milestone-card img,
.driver-milestone img,
.milestone-item img{
width:150px!important;
height:150px!important;
max-width:150px!important;
max-height:150px!important;
object-fit:contain!important;
display:block!important;
margin:0 auto 10px!important;
}
/* V57 — large, highly visible milestone achievement blocks */
.badge-grid{
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:16px!important;
padding:16px!important;
}
.badge{
min-height:205px!important;
padding:18px 10px 16px!important;
border:1px solid #9cff2526!important;
border-radius:16px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
}
.badge img{
width:150px!important;
height:150px!important;
max-width:150px!important;
max-height:150px!important;
object-fit:contain!important;
display:block!important;
margin:0 auto 10px!important;
filter:drop-shadow(0 10px 16px #000)!important;
}
.badge span{
font-size:11px!important;
line-height:1.25!important;
margin-top:4px!important;
}
@media(max-width:1100px){
.badge-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:780px){
.badge-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.badge{min-height:190px!important}
.badge img{width:135px!important;height:135px!important;max-width:135px!important;max-height:135px!important}
}
@media(max-width:520px){
.badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.badge{min-height:180px!important}
.badge img{width:125px!important;height:125px!important;max-width:125px!important;max-height:125px!important}
}
/* V57 — achievement artwork fills the milestone blocks */
.badge-grid{
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:16px!important;
padding:16px!important;
}
.badge{
min-height:260px!important;
height:260px!important;
padding:10px 8px 12px!important;
overflow:hidden!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
}
.badge img{
width:210px!important;
height:210px!important;
max-width:210px!important;
max-height:210px!important;
flex:0 0 210px!important;
object-fit:contain!important;
display:block!important;
margin:0 auto 4px!important;
filter:drop-shadow(0 10px 16px #000)!important;
}
.badge span{
font-size:11px!important;
line-height:1.2!important;
margin-top:0!important;
flex:0 0 auto!important;
}
@media(max-width:1100px){
.badge-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.badge{height:250px!important;min-height:250px!important}
.badge img{width:200px!important;height:200px!important;max-width:200px!important;max-height:200px!important;flex-basis:200px!important}
}
@media(max-width:780px){
.badge-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.badge{height:235px!important;min-height:235px!important}
.badge img{width:185px!important;height:185px!important;max-width:185px!important;max-height:185px!important;flex-basis:185px!important}
}
@media(max-width:520px){
.badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.badge{height:220px!important;min-height:220px!important}
.badge img{width:175px!important;height:175px!important;max-width:175px!important;max-height:175px!important;flex-basis:175px!important}
}
/* V58 — Concept 5 achievement wall */
.achievements{position:relative;overflow:hidden}
.achievements::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 0%,rgba(156,255,37,.08),transparent 42%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.28))}
.achievements .section-title{position:relative;z-index:1}
.badge-grid{position:relative;z-index:1;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:18px!important;padding:18px!important}
.badge{--edge:#9cff25;--shine:rgba(156,255,37,.16);position:relative!important;isolation:isolate;width:100%!important;height:220px!important;min-height:220px!important;box-sizing:border-box!important;padding:14px!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;border:1px solid rgba(170,180,175,.58)!important;border-radius:18px!important;background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 20% 80%,rgba(156,255,37,.05)),repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 10px),linear-gradient(145deg,#121815 0%,#050806 46%,#101613 100%)!important;box-shadow:inset 0 0 0 2px rgba(0,0,0,.72),inset 0 0 30px rgba(0,0,0,.78),0 12px 28px rgba(0,0,0,.55),0 0 0 1px rgba(156,255,37,.10)!important;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.badge::before{content:"";position:absolute;inset:6px;z-index:-2;border:1px solid rgba(156,255,37,.38);border-radius:13px;box-shadow:inset 0 0 16px rgba(156,255,37,.08);pointer-events:none}
.badge::after{content:"";position:absolute;left:-20%;right:-20%;top:8%;height:22%;z-index:-1;transform:rotate(-14deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),rgba(156,255,37,.08),transparent);pointer-events:none}
.badge:hover{transform:translateY(-4px);border-color:rgba(156,255,37,.78)!important;box-shadow:inset 0 0 0 2px rgba(0,0,0,.72),inset 0 0 32px rgba(156,255,37,.08),0 18px 40px rgba(0,0,0,.68),0 0 24px rgba(156,255,37,.14)!important}
.badge-art{position:relative;width:174px;height:174px;display:grid;place-items:center;border-radius:12px}
.badge-art::before{content:"";position:absolute;inset:5px;border-radius:10px;background:radial-gradient(circle,var(--shine),transparent 66%);pointer-events:none}
.badge img{position:relative!important;z-index:1;width:166px!important;height:166px!important;max-width:166px!important;max-height:166px!important;object-fit:contain!important;display:block!important;margin:0!important;filter:drop-shadow(0 12px 12px rgba(0,0,0,.92)) drop-shadow(0 0 8px rgba(156,255,37,.10))!important}
.badge-label{position:absolute;left:10px;right:10px;bottom:8px;z-index:3;padding:6px 8px 5px;border:1px solid rgba(156,255,37,.22);border-radius:7px;background:linear-gradient(180deg,rgba(0,0,0,.86),rgba(2,6,4,.94));color:#d9eadb;font-size:10px;font-weight:900;line-height:1.1;letter-spacing:1px;text-transform:uppercase;text-shadow:0 1px 2px #000;box-shadow:inset 0 1px rgba(255,255,255,.07),0 4px 10px #0008}
.badge-01{background:linear-gradient(145deg,#121715,#040706 55%,#101611)!important}
.badge-02{background:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 2px,transparent 2px 9px),linear-gradient(145deg,#151a17,#050806)!important}
.badge-03{background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 8px),linear-gradient(145deg,#111714,#050806)!important}
.badge-04{background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 11px),linear-gradient(145deg,#151a17,#040605)!important}
.badge-05{background:radial-gradient(circle at 30% 20%,rgba(156,255,37,.12),transparent 25%),linear-gradient(145deg,#131916,#040605)!important}
.badge-06{background:radial-gradient(circle at 15% 15%,rgba(255,255,255,.12) 0 2px,transparent 3px),radial-gradient(circle at 80% 70%,rgba(156,255,37,.08) 0 2px,transparent 3px),linear-gradient(145deg,#121714,#040605)!important}
.badge-07{background:repeating-linear-gradient(45deg,rgba(156,255,37,.045) 0 3px,transparent 3px 13px),linear-gradient(145deg,#111714,#040605)!important}
.badge-08{background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 18% 75%,rgba(156,255,37,.10)),linear-gradient(145deg,#151916,#040605)!important}
.badge-09{background:radial-gradient(circle at 70% 30%,rgba(156,255,37,.14),transparent 22%),repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 7px),linear-gradient(145deg,#121714,#040605)!important}
.badge-10{background:linear-gradient(90deg,rgba(156,255,37,.07) 1px,transparent 1px),linear-gradient(rgba(156,255,37,.035) 1px,transparent 1px),linear-gradient(145deg,#111714,#040605)!important;background-size:18px 18px,18px 18px,auto!important}
.badge-11{background:repeating-linear-gradient(160deg,rgba(255,255,255,.035) 0 4px,transparent 4px 12px),linear-gradient(145deg,#151a17,#040605)!important}
.badge-12{background:radial-gradient(ellipse at 50% 110%,rgba(156,255,37,.16),transparent 42%),linear-gradient(145deg,#121714,#040605)!important}
.badge-13{background:linear-gradient(135deg,rgba(156,255,37,.12) 0 3%,transparent 3% 50%,rgba(255,255,255,.05) 50% 52%,transparent 52%),linear-gradient(145deg,#151a17,#040605)!important}
.badge-14{background:repeating-linear-gradient(30deg,rgba(255,255,255,.03) 0 2px,transparent 2px 15px),linear-gradient(145deg,#121815,#040605)!important}
.badge-15{background:radial-gradient(circle at 50% 50%,rgba(156,255,37,.10),transparent 48%),linear-gradient(145deg,#151916,#030504)!important}
@media(max-width:1250px){.badge-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.badge{height:215px!important;min-height:215px!important}.badge-art{width:170px;height:170px}.badge img{width:162px!important;height:162px!important;max-width:162px!important;max-height:162px!important}}
@media(max-width:900px){.badge-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}.badge{height:205px!important;min-height:205px!important;padding:10px!important}.badge-art{width:158px;height:158px}.badge img{width:150px!important;height:150px!important;max-width:150px!important;max-height:150px!important}}
@media(max-width:620px){.badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;padding:12px!important}.badge{height:195px!important;min-height:195px!important}.badge-art{width:148px;height:148px}.badge img{width:140px!important;height:140px!important;max-width:140px!important;max-height:140px!important}.badge-label{font-size:9px;left:10px;right:10px;bottom:7px}}
@media(max-width:390px){.badge-grid{grid-template-columns:1fr!important}.badge{width:min(270px,100%)!important;height:190px!important;min-height:190px!important;margin-inline:auto}.badge-art{width:142px;height:142px}.badge img{width:134px!important;height:134px!important;max-width:134px!important;max-height:134px!important}}
/* V61 — independent image scaling per UI window.
Badge artwork sizes are intentionally scoped so resizing the achievement wall
never changes driver-board avatars or driver-profile artwork. */
/* DRIVER BOARD */
.driver-grid .driver .avatar{
width:68px!important;
height:68px!important;
flex:0 0 68px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.driver-grid .driver .avatar img{
width:54px!important;
height:54px!important;
max-width:54px!important;
max-height:54px!important;
object-fit:contain!important;
position:static!important;
transform:none!important;
margin:0!important;
}
/* DRIVER PROFILE POP-OUT */
.driver-modal .driver-modal-avatar{
width:140px!important;
height:140px!important;
flex:0 0 140px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
position:relative!important;
}
.driver-modal .driver-modal-avatar img{
width:112px!important;
height:112px!important;
max-width:112px!important;
max-height:112px!important;
object-fit:contain!important;
position:static!important;
transform:none!important;
margin:0!important;
}
/* DRIVER PROFILE ACHIEVEMENT LIST */
.driver-modal .modal-achievement-grid,
.driver-modal .modal-achievements{
width:100%;
}
.driver-modal .modal-badge{
min-height:128px!important;
height:128px!important;
padding:8px 4px 7px!important;
box-sizing:border-box!important;
}
.driver-modal .modal-badge img{
width:82px!important;
height:82px!important;
max-width:82px!important;
max-height:82px!important;
object-fit:contain!important;
transform:none!important;
margin:0 auto!important;
}
/* MAIN ACHIEVEMENT WALL ONLY */
.achievements .badge-grid .badge .badge-art{
width:154px!important;
height:154px!important;
}
.achievements .badge-grid .badge .badge-art img,
.achievements .badge-grid .badge > img{
width:146px!important;
height:146px!important;
max-width:146px!important;
max-height:146px!important;
flex:0 0 146px!important;
object-fit:contain!important;
transform:none!important;
}
@media(max-width:1250px){
.achievements .badge-grid .badge .badge-art{width:146px!important;height:146px!important}
.achievements .badge-grid .badge .badge-art img,
.achievements .badge-grid .badge > img{width:138px!important;height:138px!important;max-width:138px!important;max-height:138px!important;flex-basis:138px!important}
}
@media(max-width:900px){
.achievements .badge-grid .badge .badge-art{width:136px!important;height:136px!important}
.achievements .badge-grid .badge .badge-art img,
.achievements .badge-grid .badge > img{width:128px!important;height:128px!important;max-width:128px!important;max-height:128px!important;flex-basis:128px!important}
}
@media(max-width:620px){
.driver-grid .driver .avatar{width:58px!important;height:58px!important;flex-basis:58px!important}
.driver-grid .driver .avatar img{width:46px!important;height:46px!important;max-width:46px!important;max-height:46px!important}
.driver-modal .driver-modal-avatar{width:110px!important;height:110px!important;flex-basis:110px!important}
.driver-modal .driver-modal-avatar img{width:88px!important;height:88px!important;max-width:88px!important;max-height:88px!important}
.driver-modal .modal-badge{min-height:108px!important;height:108px!important}
.driver-modal .modal-badge img{width:68px!important;height:68px!important;max-width:68px!important;max-height:68px!important}
.achievements .badge-grid .badge .badge-art{width:126px!important;height:126px!important}
.achievements .badge-grid .badge .badge-art img,
.achievements .badge-grid .badge > img{width:118px!important;height:118px!important;max-width:118px!important;max-height:118px!important;flex-basis:118px!important}
}
/* V62 — achievement hover explanations */
.badge{position:relative;cursor:pointer}
.badge:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.badge-tooltip{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,8px);width:min(280px,calc(100vw - 40px));padding:12px 14px;border:1px solid #9cff2570;border-radius:12px;background:linear-gradient(145deg,#0b1710,#020604);box-shadow:0 14px 35px #000c;color:var(--text);text-align:left;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease,visibility .15s ease;z-index:200}
.badge-tooltip:after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:#07100c;border-right:1px solid #9cff2570;border-bottom:1px solid #9cff2570;transform:translateX(-50%) rotate(45deg)}
.badge-tooltip strong{display:block;color:var(--green);font-size:11px;letter-spacing:.7px;margin-bottom:5px}
.badge-tooltip span{display:block;color:#d7e3da;font-size:10px;line-height:1.45}
.badge:hover .badge-tooltip,.badge:focus-visible .badge-tooltip{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(max-width:780px){.badge-tooltip{bottom:auto;top:calc(100% + 10px);transform:translate(-50%,-8px)}.badge-tooltip:after{top:-7px;bottom:auto}.badge:hover .badge-tooltip,.badge:focus-visible .badge-tooltip{transform:translate(-50%,0)}}
/* V64 — real achievement requirements + tracking UI */
.achievements{overflow:visible!important}
.badge-grid{overflow:visible!important}
.badge{overflow:visible!important}
.badge-tooltip{z-index:9999!important}
.modal-badge{position:relative!important;overflow:visible!important;cursor:pointer}
.modal-badge .achievement-progress{display:block!important;margin-top:3px;color:#9cff25;font-size:7px;line-height:1.15;font-weight:800;letter-spacing:.4px}
.modal-badge-tip{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translate(-50%,8px);width:230px;padding:10px 12px;border:1px solid #9cff2570;border-radius:10px;background:linear-gradient(145deg,#0b1710,#020604);box-shadow:0 14px 30px #000c;color:#d7e3da;text-align:left;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:10000}
.modal-badge-tip strong{display:block;color:#9cff25;font-size:9px;margin-bottom:4px}
.modal-badge-tip span{display:block;font-size:8px;line-height:1.4;color:#d7e3da}
.modal-badge:hover .modal-badge-tip,.modal-badge:focus-within .modal-badge-tip{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(max-width:650px){.modal-badge-tip{bottom:auto;top:calc(100% + 7px);transform:translate(-50%,-8px)}.modal-badge:hover .modal-badge-tip,.modal-badge:focus-within .modal-badge-tip{transform:translate(-50%,0)}}
/* V67: clear visual gap between the header and Live Server Stats */
.live-stats-box{
margin-top:24px !important;
}
/* V70: guaranteed separation between header and Live Server Stats */
.hero + .live-stats-box{
margin-top:42px !important;
}
/* V81 — Trucky data presentation; built from V70 */
.driver-trucky-line{margin-top:4px;color:#82938e;font-size:9px;letter-spacing:.4px;text-transform:uppercase}
.driver-trucky-line span{color:#9cff25;font-weight:800}
.driver-modal-trucky{margin:16px 0 18px;padding:14px;border:1px solid rgba(156,255,37,.16);border-radius:14px;background:linear-gradient(180deg,rgba(7,17,13,.96),rgba(3,8,6,.96))}
.modal-section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.modal-section-head span{color:#9cff25;font-size:10px;font-weight:900;letter-spacing:2px}
.modal-section-head b{color:#9caeaa;font-size:9px;letter-spacing:1px}
.trucky-profile-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid rgba(156,255,37,.10);border-radius:10px;overflow:hidden}
.trucky-profile-stats>div{padding:11px 8px;text-align:center;border-right:1px solid rgba(156,255,37,.10)}
.trucky-profile-stats>div:last-child{border-right:0}
.trucky-profile-stats b{display:block;font-size:20px;line-height:1}
.trucky-profile-stats span{display:block;margin-top:5px;color:#6f8580;font-size:7px;letter-spacing:1.5px}
.trucky-profile-secondary{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0;color:#728780;font-size:8px;letter-spacing:1px}
.trucky-profile-secondary b{color:#d6e2de}
.trucky-latest{display:flex;gap:10px;align-items:baseline;padding:9px 10px;border-radius:8px;background:rgba(156,255,37,.035);font-size:9px}
.trucky-latest strong{color:#9cff25;font-size:8px;letter-spacing:1px;white-space:nowrap}
.trucky-latest span{color:#b7c6c1}
.trucky-job-list{margin-top:9px;border-top:1px solid rgba(156,255,37,.08)}
.trucky-job-row{display:grid;grid-template-columns:86px 1fr 1.4fr 82px;gap:8px;align-items:center;padding:7px 2px;border-bottom:1px solid rgba(156,255,37,.06);font-size:8px}
.job-status{color:#9baaa5;text-transform:uppercase;letter-spacing:.5px}
.job-cargo{color:#d5dfdb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job-route{color:#7f918b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job-distance{color:#a9bbb5;text-align:right;white-space:nowrap}
@media(max-width:700px){.trucky-profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.trucky-profile-stats>div:nth-child(2){border-right:0}.trucky-job-row{grid-template-columns:72px 1fr 70px}.job-route{display:none}}
/* V91 — accessibility/readability typography boost.
Keeps the V90 layout intact; only increases text and key UI labels. */
body{
font-size:18px;
}
.driver-board .eyebrow,
.section-eyebrow,
.live-operations,
.driver-board .label{
font-size:14px;
}
.driver-board h2,
.driver-board h3{
font-size:28px;
}
.driver .name{
font-size:22px;
}
.driver .meta{
font-size:13px;
line-height:1.45;
}
.driver .mini{
font-size:12px;
}
.driver .mini b{
font-size:16px;
}
.driver-trucky-line{
font-size:12px;
line-height:1.4;
}
button,
.driver-modal{
font-size:18px;
}
.driver-modal .modal-kicker,
.driver-modal .eyebrow{
font-size:14px;
}
.driver-modal h2,
.driver-modal .driver-modal-name{
font-size:36px;
}
.driver-modal .driver-modal-status{
font-size:14px;
line-height:1.5;
}
.driver-modal-stats b{
font-size:28px;
}
.driver-modal-stats span{
font-size:10px;
letter-spacing:1.6px;
}
.driver-modal-trucky{
font-size:15px;
}
.driver-modal-trucky .modal-section-head span{
font-size:13px;
}
.driver-modal-trucky .modal-section-head b{
font-size:12px;
}
.trucky-profile-stats b{
font-size:27px;
}
.trucky-profile-stats span{
font-size:10px;
}
.trucky-profile-secondary{
font-size:12px;
}
.trucky-latest{
font-size:13px;
line-height:1.5;
}
.trucky-latest strong{
font-size:11px;
}
.trucky-job-row{
font-size:12px;
line-height:1.4;
}
.modal-achievements-title{
font-size:15px;
letter-spacing:2px;
}
.modal-badge{
font-size:13px;
}
.modal-badge span{
font-size:14px;
line-height:1.3;
}
.modal-badge small,
.achievement-progress{
font-size:11px;
}
.modal-badge-tip{
font-size:14px;
line-height:1.5;
}
.modal-badge-tip strong{
font-size:16px;
}
.modal-badge-tip span{
font-size:14px;
}
@media(max-width:700px){
body{font-size:17px}
.driver .name{font-size:20px}
.driver .meta{font-size:12px}
.driver-modal h2,
.driver-modal .driver-modal-name{font-size:30px}
.driver-modal-stats b{font-size:24px}
.modal-badge span{font-size:13px}
.modal-badge-tip{font-size:13px}
}
/* V108 — compact Trucky summary begins immediately beside BADGES on driver cards. */
.driver-trucky-inline{
display:flex;
align-items:flex-end;
gap:10px;
margin-left:4px;
padding-left:12px;
border-left:1px solid rgba(156,255,37,.14);
min-width:0;
white-space:nowrap;
}
.driver-trucky-inline .trucky-inline-title{
color:#9cff25;
font-size:8px;
font-weight:900;
letter-spacing:1.1px;
align-self:center;
}
.driver-trucky-inline span:not(.trucky-inline-title){
display:block;
}
.driver-trucky-inline b{
font-size:11px;
color:#dce8e2;
line-height:1;
}
.driver-trucky-inline small{
display:block;
color:#687a70;
font-size:6px;
letter-spacing:.9px;
margin-top:2px;
}
@media(max-width:900px){
.driver-trucky-inline{
gap:7px;
padding-left:8px;
}
.driver-trucky-inline .trucky-inline-title{
font-size:7px;
}
.driver-trucky-inline b{font-size:10px}
}
@media(max-width:700px){
.driver-trucky-inline{
margin-left:0;
padding-left:7px;
gap:5px;
}
.driver-trucky-inline .trucky-inline-title{
font-size:6px;
letter-spacing:.7px;
}
.driver-trucky-inline b{font-size:9px}
.driver-trucky-inline small{font-size:5px}
}
/* V122(6) — Server Connections / Community bar: Design 1 */
.server-connect-bar{
position:relative;
isolation:isolate;
overflow:hidden;
width:min(1560px,calc(100vw - 32px));
max-width:1560px;
margin:14px auto 22px;
min-height:126px;
padding:18px 18px 18px 22px;
display:grid;
grid-template-columns:minmax(360px,1.45fr) minmax(250px,.82fr) minmax(310px,1fr) minmax(330px,1.02fr);
align-items:center;
gap:18px;
border:1px solid #9cff2550;
border-radius:18px;
background:
linear-gradient(100deg,#050d09f7 0%,#08120ceF 55%,#050a07f5 100%),
url("/assets/basic-trucking-header-v26.png") center/cover;
box-shadow:0 12px 35px #0009,inset 0 0 30px #9cff2510;
}
.server-connect-bar:before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(90deg,rgba(156,255,37,.08),transparent 32%,transparent 72%,rgba(156,255,37,.035));
z-index:-1;
}
.server-connect-main,
.server-connect-guide,
.server-connect-social{
min-width:0;
min-height:86px;
display:flex;
align-items:center;
}
.server-connect-main{
gap:16px;
padding-right:18px;
border-right:1px solid #9cff2530;
}
.server-connect-icon{
flex:0 0 68px;
width:68px;
height:68px;
display:grid;
place-items:center;
border:1px solid #9cff2560;
border-radius:50%;
color:#9cff25;
font-size:39px;
line-height:1;
box-shadow:inset 0 0 20px #9cff2510,0 0 18px #9cff2508;
}
.server-connect-copy{min-width:0}
.server-connect-copy>span,
.server-connect-guide>div>span{
display:block;
color:#9cff25;
font-size:12px;
font-weight:900;
letter-spacing:1.8px;
}
.server-connect-copy h2{
margin:5px 0 6px;
color:#f4f8f5;
font-size:24px;
line-height:1.1;
}
.server-connect-copy p{
margin:0;
color:#a7b8a9;
font-size:13px;
line-height:1.35;
}
.server-connect-guide{
min-width:0;min-height:86px;display:flex;align-items:center;gap:13px;
padding:14px 18px;border:1px solid #9cff2550;border-radius:14px;
background:linear-gradient(180deg,#0c1b12e8,#07100be8);
color:inherit;text-align:left;cursor:pointer;font:inherit;
appearance:none;-webkit-appearance:none;box-sizing:border-box;
transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.server-connect-guide-icon{
flex:0 0 42px;
width:42px;
height:42px;
display:grid;
place-items:center;
border:1px solid #9cff2560;
border-radius:10px;
color:#9cff25;
font-size:25px;
}
.server-connect-guide>div:nth-child(2){min-width:0;flex:1}
.server-connect-guide p{
margin:5px 0 0;
color:#a7b8a9;
font-size:12px;
line-height:1.35;
}
.server-connect-social{
gap:13px;
padding:14px 12px;
border-left:1px solid #9cff2530;
border-radius:12px;
transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.server-connect-social:hover{
background:#9cff2508;
border-color:#9cff2550;
transform:translateY(-1px);
}
.social-icon{
flex:0 0 58px;
width:58px;
height:58px;
display:grid;
place-items:center;
border-radius:12px;
font-weight:900;
font-size:28px;
}
.discord-icon{
color:#fff;
background:linear-gradient(145deg,#7d8cff,#5865f2);
box-shadow:0 0 20px rgba(88,101,242,.22);
}
.youtube-icon{
color:#fff;
background:linear-gradient(145deg,#ff3030,#c80000);
border-radius:13px;
box-shadow:0 0 20px rgba(255,35,35,.18);
}
.social-copy{min-width:0;flex:1}
.social-copy b{
display:block;
color:#f4f8f5;
font-size:15px;
letter-spacing:1px;
}
.social-copy small{
display:block;
margin-top:4px;
color:#a7b8a9;
font-size:11px;
line-height:1.35;
}
.social-action{
flex:0 0 auto;
padding:10px 12px;
border:1px solid #6774ef;
border-radius:10px;
color:#dce0ff;
background:#14182f;
font-size:11px;
font-weight:900;
letter-spacing:.5px;
}
.youtube-connect{cursor:pointer}
.youtube-live-badge{
flex:0 0 auto;
display:flex;
align-items:center;
gap:7px;
padding:9px 11px;
border:1px solid #ef303055;
border-radius:10px;
color:#ff6a6a;
background:#260c0ce8;
font-size:11px;
font-weight:900;
letter-spacing:.7px;
opacity:.72;
}
.youtube-live-badge #youtubeLiveDot{
width:9px;
height:9px;
border-radius:50%;
background:#ef3030;
box-shadow:0 0 0 2px rgba(239,48,48,.16),0 0 9px rgba(239,48,48,.5);
opacity:0;
}
.youtube-live-badge.is-live{opacity:1}
.youtube-live-badge.is-live #youtubeLiveDot{
opacity:1;
animation:youtubeLivePulse 1.45s ease-in-out infinite;
}
@keyframes youtubeLivePulse{
0%,100%{box-shadow:0 0 0 2px rgba(239,48,48,.16),0 0 8px rgba(239,48,48,.62);transform:scale(.92)}
50%{box-shadow:0 0 0 4px rgba(239,48,48,.08),0 0 16px rgba(255,65,65,.95);transform:scale(1.08)}
}
@media(prefers-reduced-motion:reduce){
.youtube-live-badge.is-live #youtubeLiveDot,.hero-headlight{animation:none}
.hero-headlight-pulse.is-live{opacity:.55}
}
@media(max-width:1180px){
.server-connect-bar{
grid-template-columns:1.2fr .8fr;
}
.server-connect-main{border-right:1px solid #9cff2530}
.server-connect-guide{border-right:0}
.server-connect-social{border-left:0;border-top:1px solid #9cff2530}
}
@media(max-width:760px){
.server-connect-bar{
margin:12px 10px 18px;
width:calc(100% - 20px);
grid-template-columns:1fr;
gap:10px;
padding:14px;
}
.server-connect-main,.server-connect-guide,.server-connect-social{
border:0;
border-bottom:1px solid #9cff2530;
padding:12px 4px;
}
.server-connect-social:last-child{border-bottom:0}
.server-connect-copy h2{font-size:21px}
.social-copy small{font-size:10px}
}
/* V116 — site-wide readability upgrade */
body{
font-size:17px;
}
button,input,select,textarea{
font-size:16px;
}
.board h2,.achievements h2{
font-size:30px;
}
.board-head button{
font-size:12px;
padding:12px 15px;
}
.driver .name{
font-size:20px;
}
.driver .meta{
font-size:12px;
}
.mini b{
font-size:14px;
}
.mini small{
font-size:9px;
}
.rank{
font-size:13px;
}
.live-stats-box{
font-size:15px;
}
.trucky-profile-stats b{
font-size:30px;
}
.trucky-profile-stats span{
font-size:11px;
}
.trucky-profile-secondary{
font-size:14px;
}
.trucky-latest{
font-size:15px;
}
.trucky-latest strong{
font-size:13px;
}
.trucky-job-row{
font-size:14px;
}
.modal-achievements-title{
font-size:18px;
}
.modal-badge{
font-size:15px;
}
.modal-badge span{
font-size:16px;
}
.modal-badge small,.achievement-progress{
font-size:12px;
}
/* Achievement hover explanation — made roughly 2–3x larger */
.badge-tooltip{
width:min(560px,calc(100vw - 50px)) !important;
padding:24px 26px !important;
border-radius:17px !important;
box-shadow:0 22px 55px #000e !important;
}
.badge-tooltip strong{
font-size:22px !important;
line-height:1.25 !important;
margin-bottom:10px !important;
letter-spacing:1px !important;
}
.badge-tooltip span{
font-size:19px !important;
line-height:1.6 !important;
}
.badge-tooltip:after{
width:16px !important;
height:16px !important;
bottom:-9px !important;
}
@media(max-width:780px){
.badge-tooltip{
width:min(520px,calc(100vw - 28px)) !important;
padding:20px 21px !important;
}
.badge-tooltip strong{
font-size:19px !important;
}
.badge-tooltip span{
font-size:17px !important;
}
}
/* Achievement descriptions inside driver/profile pop-ups */
.modal-badge-tip{
width:min(460px,calc(100vw - 40px)) !important;
padding:20px 22px !important;
border-radius:15px !important;
}
.modal-badge-tip strong{
font-size:20px !important;
line-height:1.3 !important;
margin-bottom:8px !important;
}
.modal-badge-tip span{
font-size:17px !important;
line-height:1.55 !important;
}
@media(max-width:650px){
.modal-badge-tip{
width:min(420px,calc(100vw - 24px)) !important;
padding:18px 19px !important;
}
.modal-badge-tip strong{
font-size:18px !important;
}
.modal-badge-tip span{
font-size:16px !important;
}
}
/* V116 — larger driver profile window and readable profile text */
.driver-modal .driver-modal-content,
.driver-modal .driver-profile,
.driver-modal .profile-modal,
#driverModal .modal-content,
#driverModal .driver-card{
font-size:17px;
}
/* Make the driver profile modal substantially larger */
#driverModal .modal-content,
#driverModal .driver-modal-content{
width:min(1050px,calc(100vw - 40px)) !important;
max-width:1050px !important;
max-height:calc(100vh - 40px) !important;
}
/* Profile headings and identity */
#driverModal h1,
#driverModal h2,
#driverModal .driver-name,
#driverModal .profile-name{
font-size:30px !important;
line-height:1.15 !important;
}
#driverModal h3,
#driverModal .section-title{
font-size:20px !important;
}
#driverModal p,
#driverModal .profile-info,
#driverModal .driver-info,
#driverModal .driver-meta,
#driverModal .stats,
#driverModal .stat-label,
#driverModal .achievement-text{
font-size:16px !important;
line-height:1.65 !important;
}
/* Profile stats */
#driverModal .stat-value,
#driverModal .profile-stat-value{
font-size:28px !important;
font-weight:900 !important;
}
#driverModal .stat-label,
#driverModal .profile-stat-label{
font-size:12px !important;
letter-spacing:1px !important;
}
/* Achievements inside the driver profile */
#driverModal .achievement,
#driverModal .achievement-card,
#driverModal .badge{
min-height:92px;
padding:15px !important;
}
#driverModal .achievement-title,
#driverModal .badge-title{
font-size:17px !important;
line-height:1.35 !important;
}
#driverModal .achievement-description,
#driverModal .badge-description{
font-size:14px !important;
line-height:1.55 !important;
}
/* Close button is easier to see/click */
#driverModal .close,
#driverModal .modal-close{
width:46px !important;
height:46px !important;
font-size:28px !important;
}
/* Give profile sections more breathing room */
#driverModal .modal-body,
#driverModal .profile-body{
padding:24px !important;
}
@media(max-width:760px){
#driverModal .modal-content,
#driverModal .driver-modal-content{
width:calc(100vw - 20px) !important;
max-height:calc(100vh - 20px) !important;
}
#driverModal h1,
#driverModal h2,
#driverModal .driver-name,
#driverModal .profile-name{
font-size:25px !important;
}
#driverModal p,
#driverModal .profile-info,
#driverModal .driver-info,
#driverModal .driver-meta,
#driverModal .stats,
#driverModal .achievement-text{
font-size:15px !important;
}
}
/* V117 — enlarge existing driver-profile badge artwork without changing badge DOM/layout */
#driverModal img[src*="badge"],
#driverModal img[src*="achievement"],
#driverModal .badge img,
#driverModal .achievement img,
#driverModal .badge-image img,
#driverModal .achievement-image img,
#driverModal .badge-icon img,
#driverModal .achievement-icon img{
width:150px !important;
height:150px !important;
max-width:150px !important;
max-height:150px !important;
object-fit:contain !important;
display:block !important;
margin-left:auto !important;
margin-right:auto !important;
}
#driverModal .badge,
#driverModal .achievement,
#driverModal .badge-card,
#driverModal .achievement-card{
min-height:210px;
}
@media(max-width:760px){
#driverModal img[src*="badge"],
#driverModal img[src*="achievement"],
#driverModal .badge img,
#driverModal .achievement img,
#driverModal .badge-image img,
#driverModal .achievement-image img,
#driverModal .badge-icon img,
#driverModal .achievement-icon img{
width:120px !important;
height:120px !important;
max-width:120px !important;
max-height:120px !important;
}
#driverModal .badge,
#driverModal .achievement,
#driverModal .badge-card,
#driverModal .achievement-card{
min-height:175px;
}
}
/* V124 — final driver profile + achievement alignment fix */
#driverModal .driver-modal-panel{
width:min(1100px,calc(100vw - 30px)) !important;
max-width:1100px !important;
max-height:calc(100vh - 30px) !important;
box-sizing:border-box !important;
}
/* Driver profile identity: badge stays on the LEFT */
#driverModal .driver-modal-top{
display:grid !important;
grid-template-columns:160px minmax(0,1fr) !important;
gap:20px !important;
align-items:center !important;
padding-right:45px !important;
}
#driverModal .driver-modal-avatar{
grid-column:1 !important;
grid-row:1 !important;
width:160px !important;
height:160px !important;
flex:none !important;
border:2px solid var(--green) !important;
border-radius:50% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:hidden !important;
}
#driverModal .driver-modal-avatar img{
width:148px !important;
height:148px !important;
max-width:148px !important;
max-height:148px !important;
object-fit:contain !important;
position:static !important;
transform:none !important;
margin:0 !important;
}
#driverModal .driver-modal-top > div:last-child{
min-width:0 !important;
grid-column:2 !important;
grid-row:1 !important;
}
/* Profile achievement wall: every card gets the same box, art area and text area. */
#driverModal .modal-achievements-title{
margin:10px 0 10px !important;
}
#driverModal .modal-achievements{
display:grid !important;
grid-template-columns:repeat(5,minmax(0,1fr)) !important;
gap:12px !important;
width:100% !important;
align-items:stretch !important;
}
#driverModal .modal-badge{
min-width:0 !important;
width:100% !important;
height:205px !important;
min-height:205px !important;
box-sizing:border-box !important;
padding:8px 6px 10px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
text-align:center !important;
border:1px solid rgba(156,255,37,.18) !important;
border-radius:12px !important;
background:#030806 !important;
overflow:visible !important;
}
#driverModal .modal-badge img{
display:block !important;
width:140px !important;
height:140px !important;
max-width:140px !important;
max-height:140px !important;
flex:0 0 140px !important;
object-fit:contain !important;
margin:0 auto 2px !important;
transform:none !important;
}
#driverModal .modal-badge > span{
display:block !important;
width:100% !important;
min-height:18px !important;
margin:2px 0 0 !important;
color:#d7e3da !important;
font-size:12px !important;
line-height:1.25 !important;
font-weight:800 !important;
white-space:normal !important;
}
#driverModal .modal-badge .achievement-progress{
display:block !important;
min-height:15px !important;
margin-top:3px !important;
color:#9cff25 !important;
font-size:10px !important;
line-height:1.2 !important;
font-weight:900 !important;
}
@media(max-width:1000px){
#driverModal .modal-achievements{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
@media(max-width:760px){
#driverModal .driver-modal-top{
grid-template-columns:120px minmax(0,1fr) !important;
gap:15px !important;
}
#driverModal .driver-modal-avatar{width:120px !important;height:120px !important}
#driverModal .driver-modal-avatar img{width:110px !important;height:110px !important;max-width:110px !important;max-height:110px !important}
#driverModal .modal-achievements{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
#driverModal .modal-badge{height:175px !important;min-height:175px !important}
#driverModal .modal-badge img{width:112px !important;height:112px !important;max-width:112px !important;max-height:112px !important;flex-basis:112px !important}
}
@media(max-width:520px){
#driverModal .driver-modal-top{grid-template-columns:96px minmax(0,1fr) !important}
#driverModal .driver-modal-avatar{width:96px !important;height:96px !important}
#driverModal .driver-modal-avatar img{width:88px !important;height:88px !important;max-width:88px !important;max-height:88px !important}
#driverModal .modal-achievements{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
/* V125 — Driver board badge sizing
Keeps the driver card layout and information unchanged while enlarging
the displayed driver badge for better vehicle/logo visibility. */
.driver-grid .driver{
grid-template-columns:88px minmax(0,1fr) auto !important;
}
.driver-grid .driver .avatar{
width:84px !important;
height:84px !important;
flex:0 0 84px !important;
}
.driver-grid .driver .avatar img{
width:72px !important;
height:72px !important;
max-width:72px !important;
max-height:72px !important;
object-fit:contain !important;
position:static !important;
transform:none !important;
margin:0 !important;
}
@media(max-width:700px){
.driver-grid .driver{
grid-template-columns:76px minmax(0,1fr) !important;
}
.driver-grid .driver .avatar{
width:72px !important;
height:72px !important;
flex-basis:72px !important;
}
.driver-grid .driver .avatar img{
width:62px !important;
height:62px !important;
max-width:62px !important;
max-height:62px !important;
}
}
/* V125 experimental live features — no mileage/destination dependencies */
.feature-grid{
width:100%;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
margin:18px 0 24px;
}
.feature-panel{
min-width:0;
border:1px solid rgba(156,255,37,.72);
border-radius:18px;
background:linear-gradient(145deg,#07120d,#030806);
box-shadow:0 12px 30px #0008;
overflow:hidden;
}
.feature-head{
min-height:64px;
padding:14px 18px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid rgba(156,255,37,.28);
}
.feature-head span{display:block;color:var(--green);font-size:13px;letter-spacing:2px;font-weight:800}
.feature-head h2{margin:4px 0 0;font-size:21px;color:#f3f7f4}
.feature-live{color:var(--green);font-size:12px;letter-spacing:1px}
.activity-feed{padding:8px 18px 14px;max-height:220px;overflow:auto;scrollbar-width:thin}
.activity-item{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:15px;color:#f2f5f3;line-height:1.5}
.activity-time{flex:0 0 58px;color:#7c8a82;font-size:12px;font-weight:500;white-space:nowrap}
.activity-item:last-child{border-bottom:0}
.activity-icon{position:relative;display:block;width:22px;height:22px;font-size:0}
.join-icon:before{content:"";position:absolute;left:7px;top:1px;width:8px;height:8px;border-radius:50%;background:#ffc107;box-shadow:0 0 8px rgba(255,193,7,.25)}
.join-icon:after{content:"";position:absolute;left:3px;bottom:2px;width:16px;height:9px;border-radius:8px 8px 3px 3px;background:#ffc107;box-shadow:0 0 8px rgba(255,193,7,.18)}
.chat-icon:before{content:"";position:absolute;left:2px;top:2px;width:18px;height:14px;border-radius:3px;background:#ffc107;box-shadow:0 0 9px rgba(255,193,7,.18)}
.chat-icon:after{content:"";position:absolute;left:5px;bottom:2px;border-width:4px 4px 0 0;border-style:solid;border-color:#ffc107 transparent transparent transparent}
.activity-time{flex:0 0 58px;color:#7c8a82;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.activity-copy{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f2f5f3;font-weight:600}
.activity-copy strong{color:#ffffff;font-weight:700}
.activity-copy em{color:var(--green);font-style:normal;font-weight:700}
.activity-copy i{color:#7c8a82;font-style:normal;margin:0 7px}
.activity-copy label{font-weight:600}
.activity-copy .chat-player{color:#ffffff}
.activity-copy .chat-message{color:#d9e2dc}
.activity-copy .server-a{color:#ffc107}
.activity-copy .server-b{color:#ffc107}
.activity-copy .server-c{color:#ffc107}
.activity-copy .server-other{color:#ffc107}
.activity-copy .activity-connected{color:#9cff25;font-weight:800}
.activity-copy .activity-disconnected{color:#ff9800;font-weight:800}
.rank-feature{padding:18px}
.rank-main{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:13px;align-items:center}
.rank-badge{width:58px;height:58px;border:2px solid var(--green);border-radius:50%;display:grid;place-items:center;color:var(--green);font-size:24px;font-weight:900;box-shadow:0 0 18px rgba(156,255,37,.22)}
.rank-copy strong{display:block;color:#f4f8f5;font-size:17px}
.rank-copy span{display:block;color:var(--green);font-size:10px;font-weight:800;letter-spacing:1px;margin-top:3px}
.rank-copy b{display:block;color:#d8e3dc;font-size:12px;margin-top:5px}
.rank-next{font-size:10px;color:var(--muted);text-align:right}
.rank-bar{height:8px;background:#121b16;border-radius:99px;overflow:hidden;margin:17px 0 12px}
.rank-bar i{display:block;height:100%;background:var(--green);box-shadow:0 0 12px rgba(156,255,37,.5)}
.rank-list{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.rank-list span{text-align:center;font-size:8px;color:#718078}
.rank-list span.active{color:var(--green);font-weight:800}
.week-winner{display:grid;grid-template-columns:92px minmax(0,1fr);gap:18px;align-items:center;padding:18px}
.week-avatar{width:92px;height:92px;border:2px solid #d6ad35;border-radius:50%;padding:5px;box-shadow:0 0 20px rgba(214,173,53,.18)}
.week-avatar img{width:100%;height:100%;object-fit:contain}
.week-crown{color:#e4bc3e;font-size:10px;font-weight:900;letter-spacing:1px}
.week-winner h3{margin:5px 0 2px;font-size:22px;color:#fff}
.week-winner p{margin:0 0 12px;color:#87958d;font-size:10px}
.week-stats{display:flex;gap:18px}
.week-stats b{font-size:13px;color:#f2f7f3}
.week-stats small{display:block;color:#718078;font-size:7px;letter-spacing:1px;margin-top:2px}
.server-health{padding:10px 18px 15px}
.server-table{width:100%}
.server-row{display:grid;grid-template-columns:minmax(0,1.8fr) .9fr .8fr .7fr;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:10px;color:#d8e1db}
.server-row strong{font-size:11px;color:#f2f6f3}
.server-head{font-size:8px;color:#718078;letter-spacing:1px}
.status-on{color:var(--green);font-weight:800}.status-off{color:#ff5d5d;font-weight:800}
@media(max-width:900px){.feature-grid{grid-template-columns:1fr}}
@media(max-width:600px){.activity-item{grid-template-columns:24px 66px minmax(0,1fr);gap:7px;font-size:11px}.rank-main{grid-template-columns:52px minmax(0,1fr)}.rank-next{grid-column:2;text-align:left}.week-winner{grid-template-columns:72px minmax(0,1fr)}.week-avatar{width:72px;height:72px}.server-row{grid-template-columns:minmax(0,1.6fr) .9fr .7fr}.server-row span:last-child{display:none}}
/* Rank badge artwork */
.rank-badge.rank-art{
width:86px;
height:86px;
border:0;
border-radius:0;
box-shadow:none;
background:transparent;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.rank-badge.rank-art img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
/* V125 rank panel — large, properly aligned badge */
.rank-feature{
padding:18px 20px 20px;
}
.rank-main{
display:grid;
grid-template-columns:128px minmax(0,1fr) auto;
gap:18px;
align-items:center;
min-height:128px;
}
.rank-badge.rank-art{
width:128px !important;
height:128px !important;
min-width:128px;
min-height:128px;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
overflow:visible !important;
display:flex !important;
align-items:center;
justify-content:center;
}
.rank-badge.rank-art img{
width:128px !important;
height:128px !important;
max-width:none !important;
max-height:none !important;
object-fit:contain !important;
display:block;
}
.rank-copy{
min-width:0;
}
.rank-copy strong{
display:block;
color:#f4f8f5;
font-size:22px;
line-height:1.05;
}
.rank-copy span{
display:block;
color:var(--green);
font-size:11px;
font-weight:900;
letter-spacing:1.5px;
margin-top:7px;
}
.rank-copy b{
display:block;
color:#d8e3dc;
font-size:14px;
margin-top:7px;
}
.rank-next{
font-size:11px;
color:var(--muted);
text-align:right;
white-space:nowrap;
}
.rank-bar{
height:9px;
margin:15px 0 12px;
}
.rank-list{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:0;
}
.rank-list span{
text-align:center;
font-size:8px;
color:#718078;
}
.rank-list span.active{
color:var(--green);
font-weight:900;
}
@media(max-width:600px){
.rank-main{
grid-template-columns:96px minmax(0,1fr);
gap:12px;
}
.rank-badge.rank-art,
.rank-badge.rank-art img{
width:96px !important;
height:96px !important;
min-width:96px;
min-height:96px;
}
.rank-next{
grid-column:2;
text-align:left;
margin-top:-8px;
}
}
/* Driver Board pagination — 10 drivers per page */
.driver-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px 4px;margin-top:2px;border-top:1px solid rgba(156,255,37,.10)}
.driver-page-info{color:var(--muted);font-size:10px;letter-spacing:.5px}
.driver-page-buttons{display:flex;align-items:center;gap:6px}
.driver-page-buttons button{min-width:34px;height:34px;padding:0 10px;border:1px solid rgba(156,255,37,.30);border-radius:9px;background:#07110c;color:#aebbb3;font-weight:800;font-size:11px;cursor:pointer}
.driver-page-buttons button:hover:not(:disabled){border-color:var(--green);color:var(--green);background:#0b1a10}
.driver-page-buttons button.active{background:var(--green);border-color:var(--green);color:#061005;box-shadow:0 0 14px rgba(156,255,37,.22)}
.driver-page-buttons button:disabled{opacity:.32;cursor:not-allowed}
@media(max-width:700px){.driver-pagination{flex-direction:column;align-items:center}}
/* V125 final compact Driver Board */
#driverGrid{
margin-bottom:0 !important;
}
#driverPagination{
margin-bottom:0 !important;
}
/* Final rank artwork override */
.rank-badge.rank-art{
width:150px !important;
height:150px !important;
min-width:150px !important;
min-height:150px !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:visible !important;
}
.rank-badge.rank-art img{
width:150px !important;
height:150px !important;
max-width:none !important;
max-height:none !important;
object-fit:contain !important;
display:block !important;
}
.rank-main{
grid-template-columns:150px minmax(0,1fr) auto !important;
min-height:150px !important;
}
@media(max-width:600px){
.rank-main{grid-template-columns:110px minmax(0,1fr) !important}
.rank-badge.rank-art,.rank-badge.rank-art img{
width:110px !important;height:110px !important;
min-width:110px !important;min-height:110px !important;
}
}
.feature-grid{margin-bottom:16px !important;}
/* Force the requested page order: all four feature panels ABOVE Driver Board */
main{
display:flex !important;
flex-direction:column !important;
}
main > .feature-grid{
order:1 !important;
}
main > .board{
order:2 !important;
}
main > .achievements{
order:3 !important;
}
/* Server Health: hover the server name to see the full active mod list */
.server-mod-hover{
position:relative;
display:inline-flex;
align-items:center;
gap:7px;
cursor:help;
}
.mod-hint{
display:inline-flex;
align-items:center;
justify-content:center;
padding:2px 5px;
border:1px solid rgba(156,255,37,.28);
border-radius:4px;
color:var(--green);
font-size:7px;
font-weight:900;
letter-spacing:.8px;
opacity:.7;
}
.server-mod-popup{
position:absolute;
z-index:1000;
left:0;
top:calc(100% + 10px);
width:430px;
max-width:min(430px,70vw);
max-height:520px;
overflow:auto;
padding:14px 15px 16px;
border:1px solid rgba(156,255,37,.55);
border-radius:12px;
background:rgba(3,10,7,.98);
box-shadow:0 18px 50px rgba(0,0,0,.65),0 0 24px rgba(156,255,37,.10);
opacity:0;
visibility:hidden;
transform:translateY(-5px);
transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
pointer-events:none;
}
.server-mod-hover:hover .server-mod-popup,
.server-mod-hover:focus-within .server-mod-popup{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.mod-popup-title{
display:flex;
justify-content:space-between;
align-items:center;
color:#fff;
font-size:12px;
font-weight:900;
letter-spacing:1.2px;
margin-bottom:4px;
}
.mod-popup-title span{
color:var(--green);
}
.mod-popup-subtitle{
color:var(--muted);
font-size:9px;
margin-bottom:10px;
}
.server-mod-popup ol{
margin:0;
padding:0;
list-style:none;
columns:1;
}
.server-mod-popup li{
display:flex;
gap:8px;
align-items:flex-start;
padding:5px 0;
border-bottom:1px solid rgba(255,255,255,.055);
color:#d6dfd9;
font-size:9px;
line-height:1.25;
}
.mod-number{
flex:0 0 20px;
color:var(--green);
font-weight:900;
text-align:right;
}
@media(max-width:700px){
.server-mod-popup{
width:calc(100vw - 60px);
max-width:calc(100vw - 60px);
left:0;
}
}
/* Robust Server Health active-mod tooltip: fixed to viewport so no section can clip it */
.server-mod-trigger{
position:relative;
display:inline-flex;
align-items:center;
gap:7px;
cursor:help;
outline:none;
}
.server-mod-trigger small{
color:var(--green);
font-size:7px;
font-weight:900;
letter-spacing:1px;
border:1px solid rgba(156,255,37,.3);
border-radius:4px;
padding:2px 5px;
}
.server-mod-tooltip{
position:fixed;
z-index:2147483647;
max-height:min(560px,calc(100vh - 32px));
overflow:hidden;
padding:14px;
border:1px solid rgba(156,255,37,.7);
border-radius:12px;
background:#030a07;
box-shadow:0 20px 60px rgba(0,0,0,.8),0 0 28px rgba(156,255,37,.15);
color:#e7eee9;
opacity:0;
visibility:hidden;
transform:translateY(-4px);
transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
pointer-events:none;
}
.server-mod-tooltip.show{
opacity:1;
visibility:visible;
transform:translateY(0);
pointer-events:auto;
}
.server-mod-tooltip-head{
display:flex;
align-items:center;
justify-content:space-between;
padding-bottom:5px;
border-bottom:1px solid rgba(156,255,37,.18);
}
.server-mod-tooltip-head strong{
color:#fff;
font-size:13px;
letter-spacing:1.3px;
}
.server-mod-tooltip-head b{color:var(--green);font-size:13px}
.server-mod-tooltip-sub{
color:var(--muted);
font-size:9px;
margin:6px 0 9px;
}
.server-mod-tooltip-list{
max-height:450px;
overflow:auto;
padding-right:5px;
}
.server-mod-tooltip-list>div{
display:grid;
grid-template-columns:30px 1fr;
gap:8px;
padding:5px 0;
border-bottom:1px solid rgba(255,255,255,.055);
font-size:9px;
line-height:1.3;
}
.server-mod-tooltip-list span{
color:var(--green);
text-align:right;
font-weight:900;
}
.server-mod-tooltip-list em{font-style:normal;color:#d7e1db}
.server-mod-tooltip{
position:fixed!important;
z-index:2147483647!important;
display:block;
max-height:min(560px,calc(100vh - 32px));
overflow:hidden;
padding:14px;
border:1px solid rgba(156,255,37,.75);
border-radius:12px;
background:#030a07;
box-shadow:0 20px 60px rgba(0,0,0,.85),0 0 28px rgba(156,255,37,.18);
opacity:0;
visibility:hidden;
transform:translateY(-4px);
pointer-events:none;
}
.server-mod-tooltip.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.server-mod-trigger{cursor:help;display:inline-flex;align-items:center;gap:7px}
.server-mod-trigger small{color:var(--green);font-size:7px;font-weight:900;letter-spacing:1px;border:1px solid rgba(156,255,37,.3);border-radius:4px;padding:2px 5px}
.server-mod-tooltip-head{display:flex;justify-content:space-between;color:#fff;font-size:13px}
.server-mod-tooltip-head b{color:var(--green)}
.server-mod-tooltip-sub{color:var(--muted);font-size:9px;margin:5px 0 9px}
.server-mod-tooltip-list{max-height:450px;overflow:auto}
.server-mod-tooltip-list>div{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px;line-height:1.3}
.server-mod-tooltip-list span{color:var(--green);font-weight:900;text-align:right}
.server-mod-tooltip-list em{font-style:normal;color:#d7e1db}
/* FINAL: Server Health mod hover */
.server-mod-trigger{
display:inline-flex!important;
align-items:center;
gap:7px;
cursor:help!important;
}
.server-mod-trigger small{
color:var(--green);
border:1px solid rgba(156,255,37,.35);
border-radius:4px;
padding:2px 5px;
font-size:7px;
font-weight:900;
letter-spacing:1px;
}
.server-mod-tooltip{
position:fixed!important;
z-index:2147483647!important;
width:420px;
max-width:calc(100vw - 24px);
max-height:calc(100vh - 24px);
overflow:hidden;
box-sizing:border-box;
padding:14px;
border:1px solid rgba(156,255,37,.75);
border-radius:12px;
background:#030a07!important;
color:#e7eee9;
box-shadow:0 20px 60px rgba(0,0,0,.85),0 0 28px rgba(156,255,37,.18);
opacity:0;
visibility:hidden;
pointer-events:none;
}
.server-mod-tooltip.show{
opacity:1!important;
visibility:visible!important;
}
.server-mod-tooltip-head{
display:flex;
justify-content:space-between;
font-size:13px;
}
.server-mod-tooltip-head b{color:var(--green)}
.server-mod-tooltip-sub{
color:var(--muted);
font-size:9px;
margin:5px 0 10px;
}
.server-mod-tooltip-list{
max-height:calc(100vh - 125px);
overflow-y:auto;
padding-right:6px;
}
.server-mod-tooltip-list>div{
display:grid;
grid-template-columns:28px 1fr;
gap:8px;
padding:5px 0;
border-bottom:1px solid rgba(255,255,255,.055);
font-size:9px;
line-height:1.3;
}
.server-mod-tooltip-list span{
color:var(--green);
font-weight:900;
text-align:right;
}
.server-mod-tooltip-list em{font-style:normal;color:#d7e1db}
/* Click-to-open server mod list */
.server-mod-trigger{
appearance:none;
-webkit-appearance:none;
display:inline-flex!important;
align-items:center;
gap:7px;
margin:0;
padding:0;
border:0;
background:transparent;
color:inherit;
font:inherit;
text-align:left;
cursor:pointer!important;
}
.server-mod-trigger small{
color:var(--green);
border:1px solid rgba(156,255,37,.35);
border-radius:4px;
padding:2px 5px;
font-size:7px;
font-weight:900;
letter-spacing:1px;
}
.server-mod-trigger:hover strong{color:var(--green)}
.server-mod-close{
margin-left:12px;
border:0;
background:transparent;
color:#aebbb3;
font-size:22px;
line-height:1;
cursor:pointer;
}
.server-mod-close:hover{color:var(--green)}
/* Readable Active Mods popup */
.server-mod-tooltip{
width:620px !important;
max-width:calc(100vw - 40px) !important;
max-height:calc(100vh - 40px) !important;
padding:20px !important;
border-radius:14px !important;
}
.server-mod-tooltip-head{
font-size:17px !important;
padding-bottom:10px !important;
}
.server-mod-tooltip-head strong{
font-size:17px !important;
letter-spacing:1.4px;
}
.server-mod-tooltip-head b{
font-size:16px !important;
}
.server-mod-tooltip-sub{
font-size:11px !important;
margin:7px 0 13px !important;
}
.server-mod-tooltip-list{
max-height:calc(100vh - 150px) !important;
overflow-y:auto !important;
padding-right:8px;
}
.server-mod-tooltip-list>div{
grid-template-columns:38px 1fr !important;
gap:12px !important;
padding:8px 4px !important;
font-size:12px !important;
line-height:1.45 !important;
}
.server-mod-tooltip-list span{
font-size:11px !important;
}
.server-mod-tooltip-list em{
font-size:12px !important;
color:#f0f5f2 !important;
font-style:normal !important;
}
.server-mod-close{
font-size:26px !important;
padding:2px 6px !important;
}
/* Only Coast to Coast has an active mod list. Other servers explicitly show NO MODS. */
.server-no-mods{
display:inline-flex;
align-items:center;
gap:7px;
}
.server-no-mods small{
color:#7d8983;
border:1px solid rgba(255,255,255,.12);
border-radius:4px;
padding:2px 5px;
font-size:7px;
font-weight:900;
letter-spacing:1px;
}
.server-name-only{display:inline-flex;align-items:center}
/* Clickable Server Health player count */
.server-players-trigger{
appearance:none;
-webkit-appearance:none;
border:0;
background:transparent;
color:inherit;
font:inherit;
font-weight:800;
cursor:pointer;
padding:4px 8px;
border-radius:6px;
}
.server-players-trigger:hover{
color:var(--green);
background:rgba(156,255,37,.07);
}
.server-player-tooltip{
position:fixed!important;
z-index:2147483647!important;
width:360px;
max-width:calc(100vw - 24px);
max-height:calc(100vh - 24px);
overflow:hidden;
box-sizing:border-box;
padding:16px;
border:1px solid rgba(156,255,37,.65);
border-radius:12px;
background:#030a07!important;
color:#eef4f0;
box-shadow:0 20px 60px rgba(0,0,0,.85),0 0 28px rgba(156,255,37,.14);
opacity:0;
visibility:hidden;
pointer-events:none;
}
.server-player-tooltip.show{
opacity:1!important;
visibility:visible!important;
pointer-events:auto;
}
.server-player-head{
display:flex;
align-items:center;
gap:10px;
padding-bottom:10px;
border-bottom:1px solid rgba(156,255,37,.16);
}
.server-player-head strong{font-size:14px;flex:1}
.server-player-head b{font-size:10px;color:var(--green)}
.server-player-close{
border:0;background:transparent;color:#aebbb3;
font-size:24px;line-height:1;cursor:pointer;
}
.server-player-close:hover{color:var(--green)}
.server-player-list{
max-height:420px;
overflow-y:auto;
padding-top:7px;
}
.server-player-item{
display:grid;
grid-template-columns:28px 1fr;
gap:10px;
padding:9px 3px;
border-bottom:1px solid rgba(255,255,255,.055);
font-size:12px;
}
.server-player-item span{
color:var(--green);
text-align:right;
font-weight:900;
}
.server-player-empty{
padding:18px 4px 5px;
color:var(--muted);
font-size:11px;
text-align:center;
}
/* Driver Board: keep ALL DRIVERS fully inside the section header. */
.board .section-title,
.driver-board .section-title,
.board-header,
.driver-board-header{
min-width:0;
box-sizing:border-box;
}
.board .section-title > *,
.driver-board .section-title > *{
min-width:0;
}
.board .section-title button,
.driver-board .section-title button,
.board .all-drivers,
.driver-board .all-drivers{
flex:0 0 auto;
max-width:100%;
box-sizing:border-box;
white-space:nowrap;
margin-right:0;
}
@media (max-width:760px){
.board .section-title,
.driver-board .section-title{
gap:10px;
padding-right:12px;
}
.board .section-title button,
.driver-board .section-title button,
.board .all-drivers,
.driver-board .all-drivers{
padding-left:14px!important;
padding-right:14px!important;
}
}
/* V122(10) — Connection Guide modal */
.server-guide-modal[hidden]{display:none!important}
.server-guide-modal{
position:fixed;
inset:0;
z-index:5000;
display:grid;
place-items:center;
padding:24px;
}
.server-guide-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.78);
backdrop-filter:blur(6px);
}
.server-guide-panel{
position:relative;
z-index:1;
width:min(920px,calc(100vw - 32px));
max-height:min(820px,calc(100vh - 32px));
overflow:auto;
border:1px solid #9cff2570;
border-radius:20px;
background:linear-gradient(145deg,#09130e,#020604);
box-shadow:0 30px 90px #000;
color:#eef7ef;
padding:0;
overscroll-behavior:contain;
}
.server-guide-close{
position:absolute;
top:14px;
right:16px;
z-index:3;
width:40px;
height:40px;
border:1px solid #9cff2560;
border-radius:50%;
background:#07100be8;
color:#9cff25;
font-size:28px;
line-height:1;
cursor:pointer;
}
.server-guide-close:hover{
background:#9cff2518;
box-shadow:0 0 18px #9cff2530;
}
.server-guide-header{
position:relative;
min-height:170px;
display:flex;
align-items:center;
gap:22px;
padding:28px 68px 28px 30px;
overflow:hidden;
border-bottom:1px solid #9cff2530;
background:
linear-gradient(90deg,#07110bf4,#07110bdc),
url("/assets/basic-trucking-header-v26.png") center/cover;
}
.server-guide-header-art{
flex:0 0 74px;
width:74px;
height:74px;
border:1px solid #9cff2560;
border-radius:16px;
background:#07110bcc;
box-shadow:inset 0 0 25px #9cff2510;
}
.server-guide-header-copy{min-width:0}
.guide-download-button{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:14px;
padding:11px 18px;
border:1px solid #9cff2580;
border-radius:10px;
background:linear-gradient(180deg,#17300f,#0b1b08);
color:#9cff25;
font-size:13px;
font-weight:900;
letter-spacing:.8px;
text-decoration:none;
box-shadow:0 0 18px #9cff2512, inset 0 0 14px #9cff2508;
transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.guide-download-button:hover{
transform:translateY(-1px);
background:linear-gradient(180deg,#1d3d12,#0e220a);
box-shadow:0 0 24px #9cff2530, inset 0 0 16px #9cff2510;
}
.server-guide-header-copy>span{
display:block;
color:#9cff25;
font-size:12px;
font-weight:900;
letter-spacing:1.5px;
}
.server-guide-header-copy h2{
margin:7px 0 7px;
color:#fff;
font-size:27px;
line-height:1.12;
}
.server-guide-header-copy p{
margin:0;
color:#aab8ad;
font-size:14px;
line-height:1.45;
}
.server-guide-content{
padding:24px 28px 30px;
}
.server-guide-step{
display:grid;
grid-template-columns:58px 1fr;
gap:16px;
padding:18px 0;
border-bottom:1px solid #9cff2520;
}
.server-guide-step:last-child{border-bottom:0}
.guide-step-number{
width:48px;
height:48px;
display:grid;
place-items:center;
border:1px solid #9cff2555;
border-radius:12px;
color:#9cff25;
font-size:13px;
font-weight:900;
background:#9cff2508;
}
.server-guide-step h3{
margin:2px 0 8px;
color:#9cff25;
font-size:14px;
letter-spacing:1px;
}
.server-guide-step p{
margin:6px 0;
color:#c6d1c8;
font-size:13px;
line-height:1.55;
}
.server-guide-step code{
display:block;
margin:10px 0;
padding:10px 12px;
overflow:auto;
border:1px solid #9cff2525;
border-radius:9px;
background:#020704;
color:#dcebdc;
font-size:12px;
}
.guide-note{color:#9faa9f!important}
.guide-subbox{
margin-top:12px;
padding:13px 15px;
border:1px solid #9cff2530;
border-radius:10px;
background:#07100bd9;
}
.guide-subbox h4{
margin:0 0 8px;
color:#9cff25;
font-size:11px;
letter-spacing:1px;
}
.guide-subbox ol{
margin:0;
padding-left:20px;
color:#c6d1c8;
font-size:12px;
line-height:1.6;
}
@media(max-width:700px){
.server-guide-modal{padding:10px}
.server-guide-panel{width:calc(100vw - 20px);max-height:calc(100vh - 20px)}
.server-guide-header{padding:24px 58px 22px 20px;min-height:145px}
.server-guide-header-art{display:none}
.server-guide-header-copy h2{font-size:22px}
.server-guide-content{padding:18px}
.server-guide-step{grid-template-columns:44px 1fr;gap:12px}
.guide-step-number{width:40px;height:40px}
}
.server-connect-guide:hover{
background:linear-gradient(180deg,#102417ee,#09150def);
border-color:#9cff2590;
transform:translateY(-1px);
}
.server-connect-guide:focus-visible{
outline:2px solid #9cff25;
outline-offset:3px;
}
.server-connect-guide-icon{
flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;
border:1px solid #9cff2560;border-radius:10px;color:#9cff25;font-size:25px;
}
.server-connect-guide>div:nth-child(2){min-width:0;flex:1}
.server-connect-guide>div>span{
display:block;color:#9cff25;font-size:12px;font-weight:900;letter-spacing:1.8px;
}
.server-connect-guide p{margin:5px 0 0;color:#a7b8a9;font-size:12px;line-height:1.35}
.server-guide-modal[hidden]{display:none!important}
.server-guide-modal{
position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:24px;
}
.server-guide-backdrop{
position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);
}
.server-guide-panel{
position:relative;z-index:1;width:min(920px,calc(100vw - 32px));
max-height:min(820px,calc(100vh - 32px));overflow:auto;overscroll-behavior:contain;
border:1px solid #9cff2570;border-radius:20px;background:linear-gradient(145deg,#09130e,#020604);
box-shadow:0 30px 90px #000;color:#eef7ef;
}
.server-guide-close{
position:absolute;top:14px;right:16px;z-index:3;width:40px;height:40px;
border:1px solid #9cff2560;border-radius:50%;background:#07100be8;
color:#9cff25;font-size:28px;line-height:1;cursor:pointer;
}
.server-guide-close:hover{background:#9cff2518;box-shadow:0 0 18px #9cff2530}
.server-guide-header{
min-height:170px;display:flex;align-items:center;gap:22px;padding:28px 68px 28px 30px;
border-bottom:1px solid #9cff2530;
background:linear-gradient(90deg,#07110bf4,#07110bdc),url("/assets/basic-trucking-header-v26.png") center/cover;
}
.server-guide-header-art{
flex:0 0 74px;width:74px;height:74px;display:grid;place-items:center;
border:1px solid #9cff2560;border-radius:16px;background:#07110bcc;color:#9cff25;font-size:30px;
}
.server-guide-header-copy{min-width:0}
.server-guide-header-copy>span{display:block;color:#9cff25;font-size:12px;font-weight:900;letter-spacing:1.5px}
.server-guide-header-copy h2{margin:7px 0;color:#fff;font-size:27px;line-height:1.12}
.server-guide-header-copy p{margin:0;color:#aab8ad;font-size:14px;line-height:1.45}
.server-guide-content{padding:24px 28px 30px}
.server-guide-step{display:grid;grid-template-columns:58px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid #9cff2520}
.server-guide-step:last-child{border-bottom:0}
.guide-step-number{
width:48px;height:48px;display:grid;place-items:center;border:1px solid #9cff2555;
border-radius:12px;color:#9cff25;font-size:13px;font-weight:900;background:#9cff2508;
}
.server-guide-step h3{margin:2px 0 8px;color:#9cff25;font-size:14px;letter-spacing:1px}
.server-guide-step p{margin:6px 0;color:#c6d1c8;font-size:13px;line-height:1.55}
.guide-subbox{margin-top:12px;padding:13px 15px;border:1px solid #9cff2530;border-radius:10px;background:#07100bd9}
.guide-subbox h4{margin:0 0 8px;color:#9cff25;font-size:11px;letter-spacing:1px}
.guide-note{color:#aab8ad!important}
@media(max-width:700px){
.server-guide-modal{padding:10px}
.server-guide-panel{width:calc(100vw - 20px);max-height:calc(100vh - 20px)}
.server-guide-header{padding:24px 58px 22px 20px;min-height:145px}
.server-guide-header-art{display:none}
.server-guide-header-copy h2{font-size:22px}
.server-guide-content{padding:18px}
.server-guide-step{grid-template-columns:44px 1fr;gap:12px}
.guide-step-number{width:40px;height:40px}
}
.guide-quick{
margin-top:18px;
padding:16px 18px;
border:1px solid #9cff2535;
border-radius:12px;
background:linear-gradient(180deg,#0a170d,#06100a);
box-shadow:inset 0 0 18px #9cff2508;
}
.guide-quick h3{
margin:0 0 5px;
color:#9cff25;
font-size:14px;
letter-spacing:1px;
}
.guide-quick>p{
margin:0 0 10px;
color:#c6d1c8;
font-size:13px;
line-height:1.5;
}
.guide-quick ol{
margin:0;
padding-left:24px;
color:#dce9df;
font-size:13px;
line-height:1.55;
}
.guide-quick li{
margin:3px 0;
padding-left:4px;
}
.guide-quick li strong{color:#fff}
.guide-quick .guide-quick-note{
margin-top:12px;
margin-bottom:0;
padding-top:10px;
border-top:1px solid #9cff2520;
color:#aab8ad;
}
.guide-quick .guide-quick-note strong{color:#9cff25}
/* V126 — Server Hub redesign + Trucks & Trailers carousel */
.server-hub-redesign{
display:block;
min-height:0;
padding:20px;
}
.server-hub-heading{
display:flex;
align-items:center;
gap:18px;
min-width:0;
padding:4px 4px 18px;
border-bottom:1px solid #9cff2530;
}
.server-hub-heading .server-connect-icon{
flex:0 0 62px;
width:62px;
height:62px;
font-size:34px;
}
.server-hub-heading .server-connect-copy{
flex:1;
}
.server-hub-heading .server-connect-copy>span{
display:block;
color:#9cff25;
font-size:11px;
font-weight:900;
letter-spacing:1.8px;
}
.server-hub-heading .server-connect-copy h2{
margin:5px 0 5px;
font-size:25px;
}
.server-hub-heading .server-connect-copy p{
font-size:13px;
}
.server-hub-status{
flex:0 0 auto;
display:flex;
align-items:center;
gap:8px;
padding:10px 12px;
border:1px solid #9cff2538;
border-radius:10px;
color:#b9c8bb;
background:#06100bd0;
font-size:10px;
font-weight:900;
letter-spacing:1px;
}
.server-hub-status i{
width:8px;
height:8px;
border-radius:50%;
background:#9cff25;
box-shadow:0 0 10px #9cff25;
}
.server-hub-actions{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
padding-top:16px;
}
.server-hub-card{
min-width:0;
min-height:108px;
}
.server-hub-actions .server-connect-guide{
position:relative;
width:100%;
gap:12px;
padding:14px;
}
/* V3.1.1 — Connection Guide perimeter laser */
.server-hub-actions #openServerGuide{
position:relative;
overflow:visible;
isolation:isolate;
}
.server-hub-actions #openServerGuide::after{
content:"";
position:absolute;
top:-2px;
left:-2px;
z-index:3;
width:28px;
height:2px;
pointer-events:none;
border-radius:999px;
background:linear-gradient(90deg,transparent 0%,rgba(156,255,37,.18) 18%,rgba(245,255,215,.72) 55%,rgba(156,255,37,.48) 82%,transparent 100%);
box-shadow:0 0 3px rgba(156,255,37,.55),0 0 7px rgba(156,255,37,.22);
offset-path:inset(0 round 14px);
offset-distance:0%;
offset-rotate:auto;
animation:serverGuideLaserPerimeter 4s linear infinite;
}
@keyframes serverGuideLaserPerimeter{
0%{
offset-distance:0%;
opacity:0;
}
5%{opacity:1;}
94%{opacity:1;}
100%{
offset-distance:100%;
opacity:0;
}
}
@media (prefers-reduced-motion:reduce){
.server-hub-actions #openServerGuide::after{
animation:none;
opacity:0;
}
}
.server-hub-card-copy{
min-width:0;
flex:1;
}
.server-hub-card-copy>span{
display:block;
color:#9cff25;
font-size:11px;
font-weight:900;
letter-spacing:1.5px;
}
.server-hub-card-copy p{
margin:6px 0 0;
color:#a7b8a9;
font-size:12px;
line-height:1.4;
}
.server-hub-arrow{
flex:0 0 auto;
color:#9cff25;
font-size:18px;
}
.fleet-hub-card .fleet-icon{
font-size:23px;
}
.server-hub-actions .server-connect-social{
border:1px solid #9cff2530;
background:linear-gradient(180deg,#0b1710d9,#06100bd9);
}
.server-hub-actions .server-connect-social:hover{
border-color:#9cff2550;
}
.server-hub-actions .youtube-connect{
border-left:1px solid #9cff2530;
}
@media(max-width:1180px){
.server-hub-actions{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:760px){
.server-hub-redesign{
margin:12px 10px 18px;
width:calc(100% - 20px);
padding:14px;
}
.server-hub-heading{
align-items:flex-start;
gap:12px;
}
.server-hub-heading .server-connect-icon{
flex-basis:52px;
width:52px;
height:52px;
font-size:29px;
}
.server-hub-heading .server-connect-copy h2{
font-size:21px;
}
.server-hub-status{
display:none;
}
.server-hub-actions{
grid-template-columns:1fr;
gap:9px;
}
.server-hub-card{
min-height:88px;
}
}
/* Fleet modal */
.fleet-guide-modal[hidden]{display:none!important}
.fleet-guide-modal{
position:fixed;
inset:0;
z-index:5100;
display:grid;
place-items:center;
padding:20px;
}
.fleet-guide-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.82);
backdrop-filter:blur(7px);
}
.fleet-guide-panel{
position:relative;
z-index:1;
width:min(1000px,calc(100vw - 30px));
max-height:min(760px,calc(100vh - 30px));
overflow:auto;
border:1px solid #9cff2570;
border-radius:20px;
background:linear-gradient(145deg,#09130e,#020604);
box-shadow:0 30px 90px #000;
color:#eef7ef;
}
.fleet-guide-close{
position:absolute;
top:14px;
right:16px;
z-index:3;
width:40px;
height:40px;
border:1px solid #9cff2560;
border-radius:50%;
background:#07100be8;
color:#9cff25;
font-size:28px;
line-height:1;
cursor:pointer;
}
.fleet-guide-close:hover{
background:#9cff2518;
box-shadow:0 0 18px #9cff2530;
}
.fleet-guide-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:26px 68px 22px 28px;
border-bottom:1px solid #9cff2530;
background:linear-gradient(90deg,#07110bf5,#07110bdc),url("/assets/basic-trucking-header-v26.png") center/cover;
}
.fleet-guide-header>div:first-child{
min-width:0;
}
.fleet-guide-header span{
display:block;
color:#9cff25;
font-size:11px;
font-weight:900;
letter-spacing:1.5px;
}
.fleet-guide-header h2{
margin:7px 0 5px;
color:#fff;
font-size:28px;
}
.fleet-guide-header p{
margin:0;
color:#aab8ad;
font-size:13px;
line-height:1.45;
}
.fleet-page-count{
flex:0 0 auto;
min-width:70px;
display:flex;
align-items:baseline;
justify-content:center;
gap:5px;
padding:10px 12px;
border:1px solid #9cff2545;
border-radius:11px;
background:#07100bd9;
color:#aab8ad;
}
.fleet-page-count b{
color:#9cff25;
font-size:22px;
}
.fleet-carousel{
display:grid;
grid-template-columns:58px minmax(0,1fr) 58px;
align-items:center;
gap:14px;
padding:24px 22px 14px;
}
.fleet-slide-wrap{
min-width:0;
display:grid;
grid-template-columns:minmax(390px,1.12fr) minmax(330px,.88fr);
gap:30px;
align-items:stretch;
}
.fleet-visual{
min-height:300px;
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
overflow:hidden;
border:1px solid #9cff2535;
border-radius:16px;
background:
radial-gradient(circle at 50% 42%,#9cff2510,transparent 42%),
linear-gradient(145deg,#0b1810,#030805);
}
.fleet-visual:before{
content:"";
position:absolute;
width:180px;
height:180px;
border:1px solid #9cff2528;
border-radius:50%;
}
.fleet-visual-ring{
position:absolute;
width:230px;
height:230px;
border:1px dashed #9cff2520;
border-radius:50%;
}
.fleet-visual-icon{
position:relative;
z-index:1;
font-size:92px;
filter:drop-shadow(0 0 18px #9cff2530);
}
.fleet-visual>span{
position:relative;
z-index:1;
margin-top:12px;
color:#9cff25;
font-size:10px;
font-weight:900;
letter-spacing:2px;
}
.fleet-slide-copy{
min-width:0;
padding:12px 4px;
}
.fleet-slide-kicker{
display:block;
color:#9cff25;
font-size:11px;
font-weight:900;
letter-spacing:1.7px;
}
.fleet-slide-copy h3{
margin:8px 0 12px;
color:#fff;
font-size:30px;
line-height:1.1;
}
.fleet-slide-copy p{
margin:0;
color:#c6d1c8;
font-size:15px;
line-height:1.65;
}
.fleet-slide-note{
margin-top:20px;
padding:14px 15px;
border:1px solid #9cff2530;
border-radius:11px;
background:#07100bd9;
color:#aab8ad;
font-size:12px;
line-height:1.5;
}
.fleet-nav{
width:50px;
height:50px;
border:1px solid #9cff2550;
border-radius:50%;
background:#07100be8;
color:#9cff25;
font-size:27px;
line-height:1;
cursor:pointer;
}
.fleet-nav:hover{
background:#9cff2515;
border-color:#9cff2590;
}
.fleet-nav:disabled{
opacity:.3;
cursor:default;
}
.fleet-dots{
display:flex;
justify-content:center;
gap:7px;
padding:6px 20px 12px;
}
.fleet-dot{
width:9px;
height:9px;
padding:0;
border:1px solid #9cff2560;
border-radius:50%;
background:#07100b;
cursor:pointer;
}
.fleet-dot.is-active{
background:#9cff25;
box-shadow:0 0 10px #9cff2560;
}
.fleet-footer-hint{
padding:0 20px 20px;
text-align:center;
color:#718073;
font-size:11px;
}
@media(max-width:720px){
.fleet-guide-modal{padding:10px}
.fleet-guide-panel{width:calc(100vw - 20px);max-height:calc(100vh - 20px)}
.fleet-guide-header{padding:22px 58px 18px 20px}
.fleet-guide-header h2{font-size:23px}
.fleet-page-count{display:none}
.fleet-carousel{
grid-template-columns:42px minmax(0,1fr) 42px;
gap:7px;
padding:16px 9px 10px;
}
.fleet-slide-wrap{grid-template-columns:1fr;gap:16px}
.fleet-visual{min-height:190px}
.fleet-visual-icon{font-size:68px}
.fleet-slide-copy{padding:0 5px}
.fleet-slide-copy h3{font-size:24px}
.fleet-slide-copy p{font-size:14px}
.fleet-nav{width:40px;height:40px;font-size:22px}
}
/* V2 fleet hub icon — simple icon only, no text */
.fleet-icon-mark{
width:18px;
height:12px;
display:block;
position:relative;
border:2px solid currentColor;
border-radius:2px 3px 3px 2px;
box-sizing:border-box;
}
.fleet-icon-mark::before{
content:"";
position:absolute;
right:-7px;
bottom:-2px;
width:7px;
height:9px;
border:2px solid currentColor;
border-left:0;
border-radius:0 3px 3px 0;
box-sizing:border-box;
}
.fleet-icon-mark::after{
content:"";
position:absolute;
left:2px;
bottom:-6px;
width:4px;
height:4px;
border:2px solid currentColor;
border-radius:50%;
box-sizing:border-box;
box-shadow:14px 0 0 -2px currentColor;
}
/* V2 fleet supplied photos */
.fleet-product-photo img{
display:block;
width:100%;
height:100%;
object-fit:cover;
border-radius:inherit;
}
/* V2 supplied fleet photos */
.fleet-visual{overflow:hidden;position:relative;}
.fleet-product-photo{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit;z-index:3;}
/* V2 fleet model information */
.fleet-meta-row{
margin:2px 0;
}
.fleet-meta-row strong{
color:#9cff25;
font-weight:800;
}
.fleet-meta-row span{
color:#d6ded8;
}
/* V2 final supplied fleet photography */
.fleet-product-photo{
position:absolute;
inset:0;
width:100%;
height:100%;
display:block;
object-fit:contain;
object-position:center;
border-radius:inherit;
z-index:3;
}
.fleet-visual-icon,
#fleetVisualLabel{
display:none !important;
}
/* V2 Discord logo polish */
.discord-icon{
position:relative;
display:grid;
place-items:center;
width:58px;
height:58px;
flex:0 0 58px;
color:#fff;
background:linear-gradient(145deg,#7289da 0%,#5865f2 58%,#4752c4 100%);
border:1px solid rgba(255,255,255,.16);
border-radius:14px;
box-shadow:0 8px 22px rgba(88,101,242,.28), inset 0 1px 0 rgba(255,255,255,.16);
overflow:hidden;
}
.discord-icon::after{
content:"";
position:absolute;
inset:1px;
border-radius:13px;
background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 45%);
pointer-events:none;
}
.discord-mark{
width:38px;
height:29px;
display:block;
position:relative;
z-index:1;
filter:drop-shadow(0 2px 3px rgba(0,0,0,.18));
}
.discord-connect:hover .discord-icon{
transform:translateY(-1px);
box-shadow:0 10px 26px rgba(88,101,242,.38), inset 0 1px 0 rgba(255,255,255,.18);
}
/* WEATHER DEMO — subtle randomized particles, clipped inside the silver frame */
.hero-weather-demo{
position:absolute;
inset:0;
z-index:4;
width:100%;
height:100%;
pointer-events:none;
}
/* V3 — dual Trucks & Trailers / Server Screenshots modal */
.fleet-dual-panels{
position:relative;
z-index:1;
width:min(1580px,calc(100vw - 24px));
max-height:min(900px,calc(100vh - 24px));
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:18px;
align-items:stretch;
}
.fleet-dual-panels .fleet-guide-panel{
width:100%;
max-height:900px;
min-height:700px;
height:700px;
overflow:hidden;
box-sizing:border-box;
}
.fleet-dual-panels .fleet-guide-header{
min-height:126px;
box-sizing:border-box;
}
.fleet-dual-panels .fleet-carousel{
height:470px;
box-sizing:border-box;
}
.fleet-dual-panels .fleet-slide-wrap{
height:100%;
}
.fleet-dual-panels .fleet-visual{
min-height:0;
height:100%;
}
.fleet-dual-panels .fleet-slide-copy{
overflow:auto;
padding:18px 8px 18px 4px;
}
.screenshot-carousel{
height:470px;
display:grid;
grid-template-columns:52px minmax(0,1fr) 52px;
align-items:center;
gap:12px;
padding:24px 20px 14px;
box-sizing:border-box;
}
.screenshot-frame{
width:100%;
height:100%;
min-width:0;
min-height:0;
overflow:hidden;
border:1px solid #9cff2535;
border-radius:16px;
background:#030806;
box-shadow:inset 0 0 35px #0008;
}
.screenshot-frame img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.screenshot-page-count{
flex:0 0 auto;
min-width:70px;
display:flex;
align-items:baseline;
justify-content:center;
gap:5px;
padding:10px 12px;
border:1px solid #9cff2545;
border-radius:11px;
background:#07100bd9;
color:#aab8ad;
}
.screenshot-page-count b{color:#9cff25;font-size:22px}
.screenshots-header{min-height:126px}
.server-screenshots-panel .fleet-dots{padding-top:8px}
.server-screenshots-panel .fleet-footer-hint{padding-top:0}
.server-screenshots-panel .fleet-footer-hint strong{color:#9cff25}
@media(max-width:1100px){
.fleet-dual-panels{width:min(1000px,calc(100vw - 24px));grid-template-columns:1fr;max-height:calc(100vh - 20px);overflow:auto}
.fleet-dual-panels .fleet-guide-panel{height:620px;min-height:620px}
}
@media(max-width:720px){
.fleet-dual-panels{gap:12px;padding:5px;box-sizing:border-box}
.fleet-dual-panels .fleet-guide-panel{height:auto;min-height:0;max-height:none}
.fleet-dual-panels .fleet-carousel{height:auto}
.fleet-dual-panels .fleet-slide-wrap{height:auto}
.screenshot-carousel{height:300px;grid-template-columns:42px minmax(0,1fr) 42px;gap:7px;padding:16px 9px 10px}
.screenshot-frame{height:260px}
.screenshots-header{min-height:0}
.screenshot-page-count{display:none}
}
/* V4 — Fleet gallery layout correction: preserve original image scale and keep all text inside the panel. */
.fleet-dual-panels{
width:min(1720px,calc(100vw - 40px));
max-height:min(920px,calc(100vh - 40px));
gap:20px;
}
.fleet-dual-panels .fleet-guide-panel{
min-width:0;
height:720px;
min-height:720px;
}
.fleet-dual-panels .fleet-guide-header{
min-height:132px;
padding-left:30px;
padding-right:72px;
}
.fleet-dual-panels .fleet-carousel{
height:490px;
grid-template-columns:56px minmax(0,1fr) 56px;
gap:10px;
padding:24px 14px 12px;
}
.fleet-dual-panels .fleet-slide-wrap{
min-width:0;
grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
gap:28px;
}
.fleet-dual-panels .fleet-visual{
min-width:0;
height:100%;
min-height:360px;
}
.fleet-dual-panels .fleet-product-photo{
object-fit:contain;
object-position:center;
}
.fleet-dual-panels .fleet-slide-copy{
min-width:0;
overflow:hidden;
padding:18px 8px 18px 0;
}
.fleet-dual-panels .fleet-slide-copy h3{
font-size:28px;
line-height:1.12;
overflow-wrap:anywhere;
word-break:normal;
}
.fleet-dual-panels .fleet-slide-copy p{
font-size:14px;
line-height:1.62;
overflow-wrap:anywhere;
}
.fleet-dual-panels .fleet-slide-note{
font-size:11px;
line-height:1.5;
margin-top:18px;
}
.fleet-dual-panels .fleet-footer-hint{
padding-bottom:18px;
}
/* At narrower desktop widths, keep the two panels uniform but stack the fleet content internally. */
@media(max-width:1350px) and (min-width:901px){
.fleet-dual-panels{width:min(1180px,calc(100vw - 28px));}
.fleet-dual-panels .fleet-guide-panel{height:700px;min-height:700px;}
.fleet-dual-panels .fleet-carousel{height:470px;}
.fleet-dual-panels .fleet-slide-wrap{grid-template-columns:minmax(0,1.18fr) minmax(250px,.82fr);gap:20px;}
.fleet-dual-panels .fleet-slide-copy h3{font-size:25px;}
.fleet-dual-panels .fleet-slide-copy p{font-size:13px;}
}
@media(max-width:900px){
.fleet-dual-panels{width:calc(100vw - 20px);max-height:calc(100vh - 20px);}
.fleet-dual-panels .fleet-guide-panel{height:auto;min-height:0;}
.fleet-dual-panels .fleet-carousel{height:auto;}
.fleet-dual-panels .fleet-slide-wrap{grid-template-columns:1fr;gap:16px;}
.fleet-dual-panels .fleet-visual{height:380px;min-height:0;}
}
/* Readability update: larger server status text without changing the server panel dimensions */
.server-row{font-size:13px}
.server-row strong{font-size:14px}
.server-head{font-size:9px}
.server-row .status-on,.server-row .status-off{font-size:13px}
.server-row .server-players-trigger{font-size:13px}
/* V126 — NOW HIRING DRIVERS popup */
.hiring-popup{
position:fixed;
left:18px;
top:50%;
transform:translateY(-50%);
z-index:1100;
width:min(360px,calc(100vw - 36px));
padding:22px 22px 20px;
border:1px solid rgba(156,255,37,.55);
border-radius:18px;
background:linear-gradient(145deg,rgba(8,20,14,.98),rgba(2,7,5,.98));
box-shadow:0 18px 55px rgba(0,0,0,.58),0 0 28px rgba(156,255,37,.10);
color:#e8f2eb;
font-family:inherit;
}
.hiring-popup::before{
content:"";
position:absolute;
left:0;
top:18px;
bottom:18px;
width:3px;
border-radius:0 3px 3px 0;
background:#9cff25;
box-shadow:0 0 12px rgba(156,255,37,.45);
}
.hiring-popup-kicker{
color:#9cff25;
font-size:8px;
font-weight:900;
letter-spacing:2px;
margin-bottom:8px;
padding-right:30px;
}
.hiring-popup-title{
font-size:25px;
line-height:1.05;
font-weight:950;
letter-spacing:.5px;
margin-bottom:10px;
}
.hiring-popup-copy{
margin:0 28px 17px 0;
color:#a8b9ae;
font-size:11px;
line-height:1.55;
}
.hiring-popup-apply{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:44px;
padding:11px 16px;
border-radius:10px;
background:#9cff25;
color:#071007;
text-decoration:none;
font-size:10px;
font-weight:950;
letter-spacing:1.5px;
box-shadow:0 8px 22px rgba(156,255,37,.16);
transition:transform .15s ease,filter .15s ease;
}
.hiring-popup-apply span{font-size:15px;line-height:1}
.hiring-popup-apply:hover{filter:brightness(1.08);transform:translateY(-1px)}
.hiring-popup-close{
position:absolute;
right:10px;
top:9px;
width:38px;
height:38px;
border:1px solid rgba(156,255,37,.22);
border-radius:50%;
background:#07100c;
color:#d9e7dd;
font-size:24px;
line-height:1;
cursor:pointer;
}
.hiring-popup-close:hover{border-color:rgba(156,255,37,.65);color:#9cff25}
.hiring-popup-close:focus-visible,
.hiring-popup-apply:focus-visible{
outline:2px solid #9cff25;
outline-offset:3px;
}
@media(max-width:520px){
.hiring-popup{
left:10px;
bottom:10px;
top:auto;
transform:none;
width:calc(100vw - 20px);
padding:18px 18px 16px;
}
.hiring-popup-title{font-size:21px}
.hiring-popup-copy{font-size:10px;margin-bottom:13px}
}