:root{
  --brand-purple:#ffafcc;
  --brand-purple-deep:#ff8fab;
  --brand-orange:#c8b6ff;
  --brand-orange-deep:#9d8cff;
  --cat-ranks-1:#ffafcc; --cat-ranks-2:#ff8fab;
  --cat-tags-1:#c8b6ff; --cat-tags-2:#a2d2ff;
  --cat-cosmetics-1:#ffc8dd; --cat-cosmetics-2:#cdb4db;
  --cat-chatcolors-1:#a2d2ff; --cat-chatcolors-2:#b8f2e6;
  --cat-donations-1:#ffd6a5; --cat-donations-2:#ffafcc;
  --cat-armours-1:#b8f2e6; --cat-armours-2:#a2d2ff;
  --cat-custom-1:#cdb4db; --cat-custom-2:#ffc8dd;
  --brand-glow-rgb:255,175,204;
  --brand-gradient:linear-gradient(90deg,var(--brand-purple),var(--brand-orange));
  --brand-gradient-diag:linear-gradient(135deg,var(--brand-purple),var(--brand-orange-deep));
  --surface:rgba(17,24,39,.9);
  --surface-soft:rgba(255,255,255,.06);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Inter',Arial,sans-serif;
  background:
  radial-gradient(circle at top,#251447,#08111f 65%);
  color:white;
  min-height:100vh;
  overflow-x:hidden;
  padding-bottom:90px;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,
.menu-btn,
.timer span,
.store-card-content h2{
  font-family:'Sora',Arial,sans-serif;
}

/* SHARED BUTTON SYSTEM */

.btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:none;
  padding:12px 20px;
  border-radius:14px;
  cursor:pointer;
  color:white;
  font-family:'Sora',Arial,sans-serif;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.2px;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-gradient{
  background:linear-gradient(90deg,var(--brand-purple),var(--brand-orange),var(--brand-purple));
  background-size:200% 100%;
  animation:gradientShimmer 4s ease-in-out infinite;
  box-shadow:0 8px 20px rgba(var(--brand-glow-rgb),.22);
}

@keyframes gradientShimmer{
  0%, 100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

.btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}

.btn:active{
  transform:translateY(0) scale(.97);
}

.btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  filter:none;
}

/* PARTICLES */

#aurora{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
}

#aurora::before,
#aurora::after{
  content:"";
  position:absolute;
  width:70vmax;
  height:70vmax;
  border-radius:50%;
  filter:blur(80px);
  opacity:.35;
  will-change:transform;
}

#aurora::before{
  top:-20%;
  left:-15%;
  background:radial-gradient(circle,var(--brand-purple),transparent 70%);
  animation:auroraDrift1 22s ease-in-out infinite;
}

#aurora::after{
  bottom:-25%;
  right:-15%;
  background:radial-gradient(circle,var(--brand-orange),transparent 70%);
  animation:auroraDrift2 26s ease-in-out infinite;
}

@keyframes auroraDrift1{
  0%, 100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(10vw,8vh) scale(1.15); }
}

@keyframes auroraDrift2{
  0%, 100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-8vw,-10vh) scale(1.2); }
}

#particles{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}

.particle{
  position:absolute;
  bottom:-20px;
  border-radius:50%;
  background:var(--particle-color, var(--brand-purple));
  box-shadow:0 0 8px 2px rgba(var(--brand-glow-rgb),.6);
  animation:floatParticle linear infinite, twinkle ease-in-out infinite;
  will-change:transform, opacity;
}

.particle-glow{
  filter:blur(3px);
  box-shadow:0 0 20px 6px rgba(var(--brand-glow-rgb),.5);
}

.particle-ember{
  top:-10px;
  bottom:auto;
  animation-name:sinkParticle, twinkle;
  animation-timing-function:ease-in-out, ease-in-out;
}

@keyframes floatParticle{
  0%{
    transform:translateY(0) translateX(0) scale(var(--min-scale, 1));
  }
  25%{
    transform:translateY(-27vh) translateX(var(--drift, 40px)) scale(calc((var(--min-scale, 1) + var(--max-scale, 1)) / 2));
  }
  50%{
    transform:translateY(-55vh) translateX(0) scale(var(--max-scale, 1));
  }
  75%{
    transform:translateY(-82vh) translateX(calc(var(--drift, 40px) * -1)) scale(calc((var(--min-scale, 1) + var(--max-scale, 1)) / 2));
  }
  100%{
    transform:translateY(-110vh) translateX(0) scale(var(--max-scale, 1));
  }
}

@keyframes twinkle{
  0%, 100%{ opacity:var(--min-opacity, .15); }
  50%{ opacity:var(--max-opacity, .8); }
}

@keyframes sinkParticle{
  0%{
    transform:translateY(0) translateX(0) scale(var(--min-scale, 1));
  }
  25%{
    transform:translateY(27vh) translateX(var(--drift, 40px)) scale(calc((var(--min-scale, 1) + var(--max-scale, 1)) / 2));
  }
  50%{
    transform:translateY(55vh) translateX(0) scale(var(--max-scale, 1));
  }
  75%{
    transform:translateY(82vh) translateX(calc(var(--drift, 40px) * -1)) scale(calc((var(--min-scale, 1) + var(--max-scale, 1)) / 2));
  }
  100%{
    transform:translateY(110vh) translateX(0) scale(var(--min-scale, 1));
  }
}

/* PAGE SYSTEM */

.page{
  display:none;
  animation:fade .3s ease;
}

.page.active{
  display:block;
}

@keyframes fade{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* MENU BUTTON */

.menu-btn{
  position:fixed;
  top:15px;
  right:15px;
  width:50px;
  height:50px;
  border:none;
  border-radius:15px;
  background:#111827;
  color:white;
  font-size:28px;
  cursor:pointer;
  z-index:1001;
  box-shadow:0 0 20px rgba(var(--brand-glow-rgb),.25);
}

.theme-btn{
  position:fixed;
  top:15px;
  right:75px;
  width:50px;
  height:50px;
  border:none;
  border-radius:15px;
  background:#111827;
  color:white;
  font-size:22px;
  cursor:pointer;
  z-index:1001;
  box-shadow:0 0 20px rgba(var(--brand-glow-rgb),.25);
  transition:.25s;
}

.theme-btn:hover{
  transform:translateY(-2px) rotate(15deg);
}

/* OVERLAY */

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:.3s;
  z-index:999;
}

.overlay.active{
  opacity:1;
  visibility:visible;
}

/* SIDE MENU */

.side-menu{
  position:fixed;
  top:0;
  right:-320px;
  width:300px;
  height:100%;
  background:rgba(17,24,39,.97);
  backdrop-filter:blur(12px);
  border-left:1px solid rgba(255,255,255,.06);
  padding:20px;
  overflow-y:auto;
  transition:right .35s cubic-bezier(.25,.8,.25,1);
  z-index:1000;
}

.side-menu.active{
  right:0;
}

.side-menu h2{
  margin-bottom:20px;
  font-family:'Sora',Arial,sans-serif;
}

.info-card{
  position:relative;
  background:#1f2937;
  padding:15px 15px 15px 18px;
  border-radius:15px;
  margin-bottom:15px;
  border-left:3px solid var(--brand-orange);
  transition:transform .2s ease, background .2s ease;
}

.info-card:hover{
  transform:translateX(3px);
  background:#242f42;
}

.info-card strong{
  display:block;
  margin-bottom:8px;
  font-family:'Sora',Arial,sans-serif;
}

.info-card a{
  color:var(--brand-orange);
  text-decoration:none;
}

/* HERO */

.hero{
  position:relative;
  text-align:center;
  padding:100px 24px 44px;
}

.hero::before{
  content:"";
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:260px;
  height:120px;
  background:radial-gradient(circle,rgba(var(--brand-glow-rgb),.28),transparent 70%);
  filter:blur(20px);
  z-index:-1;
}

.hero h1{
  font-size:2.7rem;
  font-weight:800;
  letter-spacing:-.5px;
  background:linear-gradient(90deg,var(--brand-purple),var(--brand-orange),var(--brand-purple));
  background-size:200% 100%;
  animation:gradientShimmer 5s ease-in-out infinite;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 40px rgba(var(--brand-glow-rgb),.35);
}

.hero p{
  margin-top:12px;
  opacity:.7;
  font-size:.95rem;
}

/* BOXES */

.box{
  position:relative;
  background:var(--surface);
  margin:20px;
  padding:22px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}

.box:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
}

.box::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--brand-gradient);
  opacity:.8;
}

.box h2{
  margin-bottom:10px;
  font-weight:700;
}

/* BUTTONS */

.copy-btn{
  position:relative;
  overflow:hidden;
  margin-top:12px;
  margin-right:8px;
  border:none;
  padding:11px 16px;
  border-radius:12px;
  cursor:pointer;
  color:white;
  font-family:'Sora',Arial,sans-serif;
  font-weight:600;
  background:linear-gradient(90deg,var(--brand-purple),var(--brand-orange),var(--brand-purple));
  background-size:200% 100%;
  animation:gradientShimmer 4s ease-in-out infinite;
  box-shadow:0 8px 20px rgba(var(--brand-glow-rgb),.22);
  transition:transform .2s ease, filter .2s ease;
}

.copy-btn::after,
.btn-gradient::after{
  content:"";
  position:absolute;
  top:0;
  left:-75%;
  width:50%;
  height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
}

.copy-btn:hover::after,
.btn-gradient:hover::after{
  left:125%;
}

.copy-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}

.copy-btn:active{
  transform:translateY(0) scale(.96);
}

/* SALE */

.sale{
  position:relative;
  margin:80px 20px 20px;
  padding:26px;
  border-radius:25px;
  text-align:center;
  overflow:hidden;
  background:var(--brand-gradient-diag);
  box-shadow:0 15px 40px rgba(var(--brand-glow-rgb),.18);
}

.sale::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.25),transparent 55%);
  pointer-events:none;
}

.sale p{
  margin:10px 0 20px;
}

.timer{
  display:flex;
  justify-content:center;
  gap:10px;
}

.timer div{
  background:rgba(0,0,0,.2);
  padding:12px;
  border-radius:12px;
  min-width:65px;
}

.timer span{
  display:block;
  font-size:1.3rem;
  font-weight:bold;
}

/* SEARCH */

.search-container{
  margin:20px;
}

.search-container input{
  width:100%;
  padding:14px 18px;
  border:1px solid rgba(255,255,255,.08);
  outline:none;
  border-radius:15px;
  background:#111827;
  color:white;
  font-family:'Inter',Arial,sans-serif;
  transition:border-color .2s ease, box-shadow .2s ease;
}

.search-container input:focus{
  border-color:var(--brand-purple);
  box-shadow:0 0 0 3px rgba(var(--brand-glow-rgb),.15);
}

.search-container input::placeholder{
  color:rgba(255,255,255,.4);
}

/* STORE CATEGORY CARDS */

.store-grid{

display:grid;

grid-template-columns:1fr;

gap:16px;

padding:20px;

}

@media (min-width:720px){

.store-grid{
grid-template-columns:1fr 1fr;
}

}

.store-card{

position:relative;

overflow:hidden;

min-height:140px;

padding:24px;

border-radius:20px;

cursor:pointer;

display:flex;

align-items:center;

isolation:isolate;

border:1px solid rgba(255,255,255,.08);

transition:transform .25s ease, box-shadow .25s ease;

animation:cardIn .5s ease backwards;

}

.store-grid .store-card:nth-child(1){animation-delay:.03s}
.store-grid .store-card:nth-child(2){animation-delay:.09s}
.store-grid .store-card:nth-child(3){animation-delay:.15s}
.store-grid .store-card:nth-child(4){animation-delay:.21s}
.store-grid .store-card:nth-child(5){animation-delay:.27s}

@keyframes cardIn{
from{opacity:0; transform:translateY(14px);}
to{opacity:1; transform:translateY(0);}
}

.store-card:hover{

transform:translateY(-4px) scale(1.015);

box-shadow:0 18px 40px rgba(var(--brand-glow-rgb),.22);

}

.store-card:active{

transform:scale(.98);

}

.store-card--ranks{
background:linear-gradient(135deg,var(--cat-ranks-1),var(--cat-ranks-2));
}

.store-card--tags{
background:linear-gradient(135deg,var(--cat-tags-1),var(--cat-tags-2));
}

.store-card--cosmetics{
background:linear-gradient(135deg,var(--cat-cosmetics-1),var(--cat-cosmetics-2));
}

.store-card--chatcolors{
background:linear-gradient(135deg,var(--cat-chatcolors-1),var(--cat-chatcolors-2));
}

.store-card--donations{
background:linear-gradient(135deg,var(--cat-donations-1),var(--cat-donations-2));
}

.store-card--armours{
background:linear-gradient(135deg,var(--cat-armours-1),var(--cat-armours-2));
}

.store-card--custom{
background:linear-gradient(135deg,var(--cat-custom-1),var(--cat-custom-2));
}

.store-card-emoji{

position:absolute;

right:-6px;

top:50%;

width:108px;
height:108px;

transform:translateY(-50%) rotate(-8deg);

z-index:1;

pointer-events:none;

filter:drop-shadow(0 10px 20px rgba(0,0,0,.25));

-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,1) 45%,rgba(0,0,0,0) 92%);

mask-image:linear-gradient(to left,rgba(0,0,0,1) 45%,rgba(0,0,0,0) 92%);

transition:transform .35s ease;

}

.store-card:hover .store-card-emoji{

transform:translateY(-50%) rotate(-2deg) scale(1.08);

}

.store-card-content{

position:relative;

z-index:2;

color:#fff;

}

.store-card-content h2{

font-size:1.3rem;

margin-bottom:6px;

text-shadow:0 2px 8px rgba(0,0,0,.2);

}

.store-card-content p{

font-size:.85rem;

font-weight:600;

opacity:.92;

display:flex;

align-items:center;

gap:5px;

}

.store-card-content .arrow{

display:inline-block;

transition:transform .25s ease;

}

.store-card:hover .arrow{

transform:translateX(4px);

}

.store-card::after{

content:"";

position:absolute;

inset:0;

background:radial-gradient(circle at 15% 20%,rgba(255,255,255,.18),transparent 55%);

pointer-events:none;

}

.card-ripple{

position:absolute;

width:12px;

height:12px;

margin:-6px 0 0 -6px;

border-radius:50%;

background:rgba(255,255,255,.55);

pointer-events:none;

z-index:3;

animation:cardRipple .55s ease-out;

}

@keyframes cardRipple{
from{
transform:scale(0);
opacity:.7;
}
to{
transform:scale(22);
opacity:0;
}
}

.card h2,
.card p{
  position:relative;
  z-index:2;
}

/* TOAST */

.toast{
  position:fixed;
  left:50%;
  bottom:90px;
  transform:translateX(-50%) translateY(20px);
  max-width:88%;
  padding:14px 22px;
  border-radius:16px;
  background:rgba(17,24,39,.95);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.1);
  border-left:4px solid var(--brand-orange);
  color:white;
  font-family:'Inter',Arial,sans-serif;
  font-size:.9rem;
  font-weight:500;
  text-align:center;
  box-shadow:0 15px 40px rgba(0,0,0,.4);
  opacity:0;
  z-index:5000;
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}

.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
/* PROFILE */

#profilePage .box{
  text-align:center;
}

/* BOTTOM NAV */

.bottom-nav{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:rgba(17,24,39,.9);
  backdrop-filter:blur(14px);
  display:flex;
  justify-content:space-around;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.08);
  z-index:100;
}

.bottom-nav a{
  color:rgba(255,255,255,.6);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  cursor:pointer;
  transition:color .2s ease, transform .2s ease;
}

.bottom-nav a:active{
  transform:scale(.9);
}

.bottom-nav a.nav-active{
  color:white;
}

.bottom-nav a.nav-active span{
  background:var(--brand-gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:600;
}

.bottom-nav span{
  margin-top:4px;
  font-size:.75rem;
}

/* MOBILE */

@media(max-width:600px){

  .hero h1{
    font-size:1.7rem;
  }

  .timer{
    flex-wrap:wrap;
  }

  .side-menu{
    width:280px;
  }

}
/* ===========================
   IGN POPUP
=========================== */

.ign-popup{
  position:fixed;
  inset:0;

  display:flex;
  justify-content:center;
  align-items:center;

  background:rgba(0,0,0,.65);
  backdrop-filter:blur(12px);

  z-index:999999;
}

.ign-card{

  width:min(92%,420px);

  background:#111827;

  border-radius:25px;

  padding:28px;

  text-align:center;

  border:1px solid rgba(255,255,255,.08);

  box-shadow:
  0 20px 60px rgba(0,0,0,.45);

  animation:popup .35s ease;
}

@keyframes popup{

from{
opacity:0;
transform:scale(.9);
}

to{
opacity:1;
transform:scale(1);
}

}

.ign-card h1{

font-size:2.1rem;
font-family:'Sora',Arial,sans-serif;
font-weight:800;

margin-bottom:12px;

background:var(--brand-gradient);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.ign-desc{

opacity:.8;

margin-bottom:20px;

line-height:1.5;

}

#ignInput{

width:100%;

padding:15px;

border:none;
outline:none;

border-radius:15px;

background:#1f2937;

color:white;

font-size:16px;

margin-bottom:18px;

}

.confirm-box{

display:flex;

align-items:flex-start;

gap:10px;

text-align:left;

margin-bottom:18px;

font-size:.92rem;

}

.confirm-box input{

margin-top:4px;

}

.warning{

background:rgba(245,158,11,.12);

border:1px solid rgba(245,158,11,.25);

padding:14px;

border-radius:14px;

color:#ffd166;

font-size:.9rem;

line-height:1.5;

margin-bottom:20px;

}

#continueBtn{

width:100%;

padding:16px;

border:none;

border-radius:15px;

cursor:pointer;

font-size:16px;
font-family:'Sora',Arial,sans-serif;

font-weight:700;

color:white;

background:var(--brand-gradient);

box-shadow:0 10px 25px rgba(var(--brand-glow-rgb),.22);

transition:transform .2s ease, filter .2s ease;

}

#continueBtn:disabled{

opacity:.45;

cursor:not-allowed;

}

#continueBtn:not(:disabled):hover{

transform:translateY(-2px);

box-shadow:
0 0 25px rgba(var(--brand-glow-rgb),.25);

}
/* ===========================
   CHANGE IGN BUTTON
=========================== */

.change-ign-btn{

position:fixed;

top:15px;
right:135px;

width:50px;
height:50px;

border:none;
border-radius:15px;

background:#111827;

color:white;

font-size:22px;

cursor:pointer;

z-index:1001;

box-shadow:
0 0 20px rgba(var(--brand-glow-rgb),.25);

transition:.25s;

}

.change-ign-btn:hover{

transform:translateY(-2px);

box-shadow:
0 0 30px rgba(var(--brand-glow-rgb),.32);

}
/* ===========================
   OWNER ACCESS
=========================== */

#ownerCode{

width:100%;

margin-top:10px;
margin-bottom:12px;

padding:12px;

border:none;
outline:none;

border-radius:12px;

background:#0f172a;

color:white;

font-size:15px;

}
/* ===========================
   ONGOING ORDER CHAT
=========================== */

.chat-window{
    height:320px;
    overflow-y:auto;
    background:#0c1220;
    border:1px solid rgba(255,255,255,.06);
    padding:14px;
    border-radius:16px;
    margin-bottom:14px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.chat-empty{
    margin:auto;
    text-align:center;
    opacity:.5;
    font-size:.85rem;
}

.chat-message{
    max-width:78%;
    padding:10px 14px;
    border-radius:16px;
    word-break:break-word;
    animation:cardIn .25s ease backwards;
}

.chat-left{
    background:#1f2937;
    margin-right:auto;
    border-bottom-left-radius:4px;
}

.chat-right{
    background:var(--brand-gradient);
    margin-left:auto;
    border-bottom-right-radius:4px;
}

.chat-author{
    font-size:.75rem;
    font-weight:700;
    font-family:'Sora',Arial,sans-serif;
    opacity:.85;
    margin-bottom:4px;
}

.chat-time{
    font-size:.7rem;
    opacity:.55;
    margin-top:6px;
}

.chat-image{
    max-width:220px;
    width:100%;
    border-radius:12px;
    margin-top:8px;
    cursor:pointer;
    display:block;
    transition:transform .2s ease;
}

.chat-image:hover{
    transform:scale(1.03);
}

.chat-composer{
    display:flex;
    gap:10px;
}

#chatInput{
    flex:1;
    padding:14px 16px;
    border:1px solid rgba(255,255,255,.08);
    outline:none;
    border-radius:14px;
    background:#0f172a;
    color:white;
    font-family:'Inter',Arial,sans-serif;
    font-size:15px;
    transition:border-color .2s ease, box-shadow .2s ease;
}

#chatInput:focus{
    border-color:var(--brand-purple);
    box-shadow:0 0 0 3px rgba(var(--brand-glow-rgb),.15);
}

.chat-send-btn{
    flex-shrink:0;
    padding:14px 22px;
}

.chat-image-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:12px;
    cursor:pointer;
}

.chat-image-row input[type="file"]{
    color:rgba(255,255,255,.6);
    font-size:.8rem;
    max-width:130px;
}

.chat-image-btn{
    flex-shrink:0;
}

.loading-overlay{
    position:fixed;
    inset:0;
    background:#0b1020;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.loader{
    width:55px;
    height:55px;
    border-radius:50%;
    background:conic-gradient(var(--brand-purple),var(--brand-orange),var(--brand-purple));
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 5px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 5px));
    animation:spin 1s linear infinite;
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

.loading-overlay p{
    margin-top:20px;
    color:white;
    font-size:18px;
}

/* PANEL (replaces native prompt/confirm/alert) */

.panel-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(4px);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease;
    z-index:6000;
}

.panel-overlay.active{
    opacity:1;
    visibility:visible;
}

.panel-box{
    width:100%;
    max-width:480px;
    background:rgba(17,24,39,.98);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.08);
    border-top:3px solid var(--brand-orange);
    border-radius:24px 24px 0 0;
    padding:26px 22px calc(26px + env(safe-area-inset-bottom));
    transform:translateY(30px);
    transition:transform .3s cubic-bezier(.25,.8,.25,1);
    max-height:85vh;
    overflow-y:auto;
}

.panel-overlay.active .panel-box{
    transform:translateY(0);
}

@media (min-width:600px){
    .panel-overlay{
        align-items:center;
    }
    .panel-box{
        border-radius:24px;
        transform:translateY(0) scale(.95);
    }
    .panel-overlay.active .panel-box{
        transform:translateY(0) scale(1);
    }
}

.panel-box h2{
    font-family:'Sora',Arial,sans-serif;
    margin-bottom:14px;
}

.panel-message{
    opacity:.8;
    line-height:1.5;
    margin-bottom:20px;
    white-space:pre-line;
}

.panel-box label{
    display:block;
    font-size:.8rem;
    font-weight:600;
    opacity:.7;
    margin:14px 0 6px;
}

.panel-box label:first-of-type{
    margin-top:0;
}

.panel-box input,
.panel-box select{
    width:100%;
    padding:13px 14px;
    border:1px solid rgba(255,255,255,.08);
    outline:none;
    border-radius:12px;
    background:#0f172a;
    color:white;
    font-family:'Inter',Arial,sans-serif;
    font-size:.95rem;
    transition:border-color .2s ease, box-shadow .2s ease;
}

.panel-box input:focus,
.panel-box select:focus{
    border-color:var(--brand-purple);
    box-shadow:0 0 0 3px rgba(var(--brand-glow-rgb),.15);
}

.panel-actions{
    display:flex;
    gap:10px;
    margin-top:24px;
}

.panel-actions .btn{
    flex:1;
}

.btn-secondary{
    background:rgba(255,255,255,.08);
}

.btn-secondary:hover{
    background:rgba(255,255,255,.14);
}

/* FOOTER */

.site-footer{
    text-align:center;
    padding:30px 20px 10px;
    opacity:.5;
    font-size:.8rem;
}

.site-footer p{
    margin:4px 0;
}

.site-footer .rights{
    font-size:.72rem;
    opacity:.8;
}

/* RANK ID CARDS */

.rank-id-card{
    position:relative;
    overflow:hidden;
    text-align:center;
    padding-top:30px;
}

.rank-id-card-strip{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:20px;
    background:var(--brand-gradient);
}

.rank-id-card-label{
    font-size:.65rem;
    font-weight:700;
    letter-spacing:1.5px;
    opacity:.5;
    margin-bottom:10px !important;
}

.tag-swatch{
    display:inline-block;
    width:16px;
    height:16px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.5);
    vertical-align:middle;
    margin-right:2px;
}

.live-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 rgba(34,197,94,.6);
    animation:livePulse 1.6s infinite;
}

@keyframes livePulse{
    0%{box-shadow:0 0 0 0 rgba(34,197,94,.6);}
    70%{box-shadow:0 0 0 8px rgba(34,197,94,0);}
    100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}
}