:root{
  --bg:#02040a;
  --white:#ffffff;
  --gold:#ffd166;
  --accent:#49ffea;
  --glass:rgba(255,255,255,.08);
  --shadow:0 6px 30px rgba(0,0,0,.35);
  --radius:14px;
}

*{
  box-sizing:border-box;
}


html,

body{
  height:100%;
}

body{
  margin:0;
  background:
    radial-gradient(circle at 50% -10%, rgba(120,150,255,.25), transparent 40%),
    radial-gradient(circle at 20% 10%, rgba(80,120,255,.18), transparent 35%),
    radial-gradient(circle at 80% 0%, rgba(150,120,255,.15), transparent 35%),
    linear-gradient(180deg,#03050c 0%,#02040a 100%);
}




/* =========================
   CINEMATIC SPACE BACKGROUND
   ========================= */

body{
margin:0;
background:
radial-gradient(circle at 20% 10%, rgba(120,150,255,.18), transparent 40%),
radial-gradient(circle at 80% 0%, rgba(180,120,255,.15), transparent 40%),
radial-gradient(circle at 50% -10%, rgba(100,140,255,.22), transparent 45%),
linear-gradient(180deg,#02040a 0%,#010208 100%);
position:relative;
overflow:hidden;
}

/* FAR STARS */





/* TWINKLE */

@keyframes twinkle{
0%{opacity:.4}
100%{opacity:1}
}




@keyframes starsMove{
  from{ transform:translateY(0); }
  to{ transform:translateY(-220px); }
}

@keyframes starsMoveSlow{
  from{ transform:translateY(0); }
  to{ transform:translateY(-260px); }
}

@keyframes starsTwinkle{
  0%{ opacity:.45; }
  100%{ opacity:.9; }
}



@keyframes beamPulse{
  0%,100%{ opacity:.55; transform:translateY(0); }
  50%{ opacity:.30; transform:translateY(6px); }
}

/* top bar */
.topbar{
  display:grid;
  grid-template-columns:40px 1fr 40px;
  align-items:center;
  gap:10px;
  padding:10px 14px 6px;
  position:fixed;
  top:0;
  left:0;
  right:0;
  backdrop-filter:blur(6px);
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.15));
  z-index:5;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.topbar img{
  width:40px;
  height:40px;
  object-fit:contain;
}

.location{
  text-align:center;
  font-weight:800;
  background:linear-gradient(90deg, #fff, var(--gold), #fff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 1px 8px rgba(255,245,200,.25);
}

/* tabs */
.tabs{
  display:flex;
  gap:10px;
  justify-content:center;
  position:fixed;
  top:56px;
  left:0;
  right:0;
  padding:8px 12px 10px;
  z-index:4;
  flex-wrap:wrap;
}

.tab{
  flex:1;
  max-width:140px;
  text-align:center;
  text-decoration:none;
  color:#002;
  font-weight:900;
  padding:12px 14px;
  border-radius:999px;
  background:linear-gradient(135deg, #ffe485, #ffc942 45%, #ffb703);
  box-shadow:0 8px 20px rgba(255,199,61,.4), inset 0 1px 0 #fff8;
  position:relative;
  overflow:hidden;
  font-size:14px;
}

.tab::after{
  content:"";
  position:absolute;
  inset:-30% auto -30% -40%;
  width:40px;
  transform:skewX(-22deg);
  background:linear-gradient(90deg, #0000, #fff9, #0000);
  animation:sweep 2.6s infinite;
}

.tab.active{
  filter:saturate(1.15) drop-shadow(0 0 20px rgba(73,255,234,.45));
  outline:2px solid #49ffea99;
}

@media (max-width:768px){
  .tab{
    max-width:110px;
    padding:10px 12px;
    font-size:13px;
  }
}

@media (max-width:480px){
  .tab{
    max-width:95px;
    padding:8px 10px;
    font-size:12px;
  }
}

/* content */
.content{
  position:fixed;
  left:0;
  right:0;
  bottom:70px;
  top:110px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px;
}

/* grid */
.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
padding:10px;
}



/* =========================
   CINEMATIC MODEL CARDS
   ========================= */

.card{
position:relative;
border-radius:16px;
overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.55));
border:1px solid rgba(255,255,255,.15);
box-shadow:
0 8px 30px rgba(0,0,0,.6),
inset 0 0 0 1px rgba(255,255,255,.05);
transition:
transform .35s ease,
box-shadow .35s ease,
border .35s ease;
}

/* GOLD GLOW HOVER */

.card:hover{

transform:translateY(-8px) scale(1.04);

border:1px solid rgba(255,215,0,.6);

box-shadow:
0 14px 40px rgba(0,0,0,.7),
0 0 25px rgba(255,215,0,.45);

}

/* IMAGE FRAME */

.frame{
aspect-ratio:3/4;
width:100%;
overflow:hidden;
position:relative;
}

.frame img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:
transform .6s ease,
filter .4s ease;
}

/* IMAGE ZOOM */

.card:hover .frame img{

transform:scale(1.12);

filter:brightness(1.05);

}

/* IMAGE SHINE EFFECT */

.frame::after{

content:"";

position:absolute;

top:-100%;

left:-100%;

width:200%;

height:200%;

background:

linear-gradient(
120deg,
transparent 40%,
rgba(255,255,255,.15),
transparent 60%
);

transform:rotate(25deg);

transition:all .7s ease;

}

.card:hover .frame::after{

top:0;

left:0;

}

/* INFO AREA */

.meta{

text-align:center;

padding:10px;

background:linear-gradient(
180deg,
rgba(0,0,0,.0),
rgba(0,0,0,.45)
);

}

/* MODEL NAME */

.meta .name{

font-weight:900;

font-size:13px;

letter-spacing:.8px;

text-transform:uppercase;

color:#ffffff;

cursor:pointer;

transition:all .25s ease;

}

.meta .name:hover{

color:#ffd166;

}

/* VOTES */

.meta .votes{

font-size:12px;

color:#ffd166;

font-weight:800;

margin-top:3px;

text-shadow:

0 0 8px rgba(255,215,0,.5);

}

/* VOTE GLOW */

.meta .votes strong{

animation:votepulse 2.5s infinite;

}

@keyframes votepulse{

0%{ text-shadow:0 0 6px rgba(255,215,0,.3); }

50%{ text-shadow:0 0 16px rgba(255,215,0,.9); }

100%{ text-shadow:0 0 6px rgba(255,215,0,.3); }

}

/* vote button */
.cta-wrap{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  padding:10px 14px 16px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
}

.vote-btn{
  width:100%;
  max-width:420px;
  text-align:center;
  color:#002;
  text-decoration:none;
  font-weight:900;
  padding:14px 18px;
  border-radius:12px;
  background:linear-gradient(135deg, #ffe485, #ffc942 45%, #ffb703);
  box-shadow:0 12px 34px rgba(255,199,61,.45), inset 0 1px 0 #fff8;
  position:relative;
  overflow:hidden;
}

.vote-btn::after{
  content:"";
  position:absolute;
  inset:-50% auto -50% -40%;
  width:60px;
  transform:skewX(-20deg);
  background:linear-gradient(90deg, #0000, #fffa, #0000);
  animation:sweep 2.2s infinite;
}

@keyframes sweep{
  0%{ left:-40%; }
  100%{ left:120%; }
}






/* helper */
.sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

.name{
  font-weight:800;
  font-size:13px;
  color:#fff;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .18s ease, transform .15s ease;
  display:inline-block;
  padding:4px 6px;
  border-radius:6px;
}

.name:hover{
  color:#ffd166;
  transform:translateY(-1px);
}

.name:focus{
  outline:none;
  box-shadow:0 0 0 6px rgba(255,209,102,0.08);
}

.copy-toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:20px;
  background:rgba(0,0,0,.85);
  color:#fff;
  padding:8px 12px;
  border-radius:8px;
  z-index:99999;
  font-size:13px;
  pointer-events:none;
}

/* =====================
   CINEMATIC FIREFLIES V2
   ===================== */

#fireflies{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
overflow:hidden;
z-index:0;
}

.firefly{
position:absolute;
border-radius:50%;
background:#ffd166;

box-shadow:
0 0 6px #ffd166,
0 0 12px #ffd166,
0 0 20px rgba(255,209,102,.7);

opacity:.7;

animation:
floatUp linear infinite,
driftSide ease-in-out infinite,
glowPulse 4s ease-in-out infinite;
}

@keyframes floatUp{
from{ transform:translateY(110vh); }
to{ transform:translateY(-10vh); }
}

@keyframes driftSide{
0%{ margin-left:-20px }
50%{ margin-left:20px }
100%{ margin-left:-20px }
}

@keyframes glowPulse{
0%{ opacity:.3 }
50%{ opacity:1 }
100%{ opacity:.3 }
}