html,
body{
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
overscroll-behavior:none;
-webkit-overflow-scrolling:touch;
background:#090b12;
font-family:
-apple-system,
BlinkMacSystemFont,
"SF Pro Display",
sans-serif;
color:white;
}
*{
box-sizing:border-box;
}
.hidden{
display:none !important;
}
/* =========================
AUTH
========================= */
#authScreen{
position:fixed;
top:0;
left:0;
width:100%;
height:100dvh;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(
circle at top,
#1c2333,
#090b12 70%
);
padding:24px;
overflow-y:auto;
}
.auth-card{
width:100%;
max-width:420px;
background:
rgba(18,18,28,0.96);
border:
1px solid rgba(255,255,255,0.08);
border-radius:28px;
padding:28px;
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
box-shadow:
0 0 40px rgba(0,0,0,0.45);
}
.logo{
font-size:42px;
font-weight:900;
letter-spacing:2px;
text-align:center;
margin-bottom:6px;
}
.logo span{
color:#39ff14;
}
.tagline{
text-align:center;
font-size:18px;
font-weight:700;
margin-bottom:4px;
}
.subtag{
text-align:center;
font-size:14px;
opacity:0.7;
margin-bottom:26px;
}
.tabs{
display:flex;
gap:10px;
margin-bottom:22px;
}
.tab{
flex:1;
height:48px;
border:none;
border-radius:16px;
background:#181d2a;
color:white;
font-weight:700;
font-size:15px;
}
.tab.active{
background:#39ff14;
color:#000;
}
input,
select{
width:100%;
height:54px;
padding:0 16px;
margin-bottom:14px;
border:none;
border-radius:16px;
background:#161b28;
color:white;
font-size:16px;
outline:none;
}
button{
cursor:pointer;
}
#signupBtn,
#loginBtn{
width:100%;
height:56px;
border:none;
border-radius:18px;
background:#39ff14;
color:#000;
font-size:16px;
font-weight:800;
margin-top:6px;
}
.clubRequest{
margin-top:18px;
font-size:13px;
line-height:1.6;
text-align:center;
opacity:0.8;
}
.clubRequest a{
color:#39ff14;
text-decoration:none;
}
.madeby{
margin-top:24px;
text-align:center;
font-size:12px;
opacity:0.5;
}
/* =========================
GAME
========================= */
#gameScreen{
position:fixed;
top:0;
left:0;
width:100%;
height:100dvh;
overflow:hidden;
background:#090b12;
}
/* =========================
MAP
========================= */
#map{
position:fixed;
top:0;
left:0;
width:100%;
height:100dvh;
z-index:1;
}
/* =========================
TOP BAR
========================= */
#topBar{
position:fixed;
top:0;
left:0;
width:100%;
padding-top:
calc(12px + env(safe-area-inset-top));
padding-left:16px;
padding-right:16px;
padding-bottom:12px;
display:flex;
justify-content:space-between;
align-items:center;
z-index:9999;
background:
linear-gradient(
to bottom,
rgba(0,0,0,0.7),
transparent
);
}
.miniLogo{
font-size:20px;
font-weight:900;
letter-spacing:1px;
}
.miniLogo span{
color:#39ff14;
}
#gpsStatus{
padding:10px 14px;
border-radius:14px;
background:
rgba(0,0,0,0.5);
font-size:13px;
font-weight:700;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
#devBadge{
padding:10px 14px;
border-radius:14px;
background:#ff3b6b;
font-size:13px;
font-weight:800;
}
/* =========================
BOTTOM NAV
========================= */
#bottomNav{
position:fixed;
left:0;
bottom:0;
width:100%;
height:78px;
padding-bottom:
env(safe-area-inset-bottom);
display:flex;
align-items:center;
justify-content:space-around;
background:
rgba(10,10,18,0.96);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border-top:
1px solid rgba(255,255,255,0.08);
z-index:10000;
}
.navBtn{
background:none;
border:none;
color:white;
font-size:13px;
font-weight:700;
opacity:0.65;
}
.navBtn.active{
opacity:1;
color:#39ff14;
}
/* =========================
TERRITORY PANEL
========================= */
#territoryPanel{
position:fixed;
left:50%;
bottom:90px;
transform:translateX(-50%);
width:92%;
max-width:420px;
max-height:78vh;
overflow-y:auto;
padding:20px;
border-radius:24px;
background:
rgba(12,12,18,0.96);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border:
1px solid rgba(255,255,255,0.08);
box-shadow:
0 0 40px rgba(0,0,0,0.55);
z-index:9999;
padding-bottom:
calc(24px + env(safe-area-inset-bottom));
}
.closeBtn{
position:absolute;
top:16px;
right:16px;
width:36px;
height:36px;
border:none;
border-radius:50%;
background:#1f2636;
color:white;
font-size:16px;
}
#territoryTitle{
font-size:24px;
font-weight:900;
margin-bottom:10px;
padding-right:40px;
}
#territoryOwner{
font-size:16px;
font-weight:700;
color:#39ff14;
margin-bottom:6px;
}
#territoryStatus{
font-size:13px;
opacity:0.7;
margin-bottom:18px;
}
.territoryStats{
display:flex;
gap:12px;
margin-bottom:18px;
}
.statBox{
flex:1;
background:#151b27;
border-radius:18px;
padding:14px;
}
.statLabel{
font-size:12px;
opacity:0.6;
margin-bottom:6px;
}
.statValue{
font-size:18px;
font-weight:800;
}
.uploadBox{
width:100%;
height:56px;
display:flex;
align-items:center;
justify-content:center;
background:#171d2a;
border-radius:18px;
margin-bottom:14px;
font-size:14px;
font-weight:700;
}
#attackBtn{
width:100%;
height:58px;
border:none;
border-radius:18px;
background:#ff3b6b;
color:white;
font-size:16px;
font-weight:900;
}
/* =========================
FULLSCREEN PANELS
========================= */
.fullscreen{
position:fixed;
top:0;
left:0;
width:100%;
height:100dvh;
overflow-y:auto;
background:#090b12;
z-index:9998;
padding-top:
calc(24px + env(safe-area-inset-top));
padding-bottom:
calc(90px + env(safe-area-inset-bottom));
}
.fullscreenTitle{
font-size:28px;
font-weight:900;
padding:24px;
}
#feedList,
#leaderboardList,
#pendingRuns{
padding:0 18px 120px;
}
.feedItem,
.leaderCard,
.modCard{
background:#151b27;
border-radius:20px;
padding:18px;
margin-bottom:14px;
}
.rank{
font-size:16px;
font-weight:800;
margin-bottom:6px;
}
.rankKm{
opacity:0.75;
}
.leaderTabs{
display:flex;
gap:10px;
padding:0 18px 18px;
}
.leaderTab{
flex:1;
height:48px;
border:none;
border-radius:16px;
background:#151b27;
color:white;
font-weight:700;
}
.leaderTab.active{
background:#39ff14;
color:#000;
}
/* =========================
MODERATOR
========================= */
.modTitle{
font-size:18px;
font-weight:800;
margin-bottom:6px;
}
.modSub{
font-size:14px;
opacity:0.75;
margin-bottom:8px;
}
.proofBtn{
display:flex;
align-items:center;
justify-content:center;
height:48px;
border-radius:16px;
background:#1f2636;
color:white;
text-decoration:none;
font-size:14px;
font-weight:700;
margin-top:12px;
margin-bottom:12px;
}
.modActions{
display:flex;
gap:10px;
}
.approveBtn{
flex:1;
height:48px;
border:none;
border-radius:16px;
background:#39ff14;
color:#000;
font-weight:800;
}
.rejectBtn{
flex:1;
height:48px;
border:none;
border-radius:16px;
background:#ff3b6b;
color:white;
font-weight:800;
}
/* =========================
ADS
========================= */
#adPopup{
position:fixed;
top:0;
left:0;
width:100%;
height:100dvh;
display:flex;
align-items:center;
justify-content:center;
background:
rgba(0,0,0,0.92);
z-index:20000;
padding:24px;
}
#adImage{
max-width:100%;
max-height:80vh;
border-radius:24px;
box-shadow:
0 0 50px rgba(0,0,0,0.5);
}
/* =========================
DEV PANEL
========================= */
#devPanel{
position:fixed;
right:16px;
bottom:100px;
display:flex;
flex-direction:column;
gap:10px;
z-index:12000;
}
#devPanel button{
width:160px;
height:52px;
border:none;
border-radius:16px;
background:#ff3b6b;
color:white;
font-weight:800;
}
/* =========================
FOOTER
========================= */
#footer{
position:fixed;
top:
calc(64px + env(safe-area-inset-top));
right:16px;
font-size:11px;
opacity:0.45;
z-index:9999;
}
/* =========================
IOS INPUT FIX
========================= */
input,
button,
select{
font-size:16px;
}