@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&display=swap');


*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root{
  --lux-gold-text: #152d4d;

  --accent-color: rgba(120,170,255,0.95); 
  --hud-glass: rgba(10,12,18,0.35);
  --hud-stroke: rgba(255,255,255,0.16);
  --hud-beige: #e8dcc7;

 
  --hero1: 120,170,255;
  --hero2: 120,170,255;


  --heroGold1: 231, 197, 120;
  --heroGold2: 196, 155, 92;
}

html, body{
  width:100%;
  height:100%;
  margin:0;
  background:#0b0b0f;
  font-family:system-ui,-apple-system,sans-serif;
  overflow:hidden;
}


#app-root{
  position: relative;
  z-index: 20;
}


#luxury-bg{ z-index:0; }


.hud{
  pointer-events:none;
}

.hud-logo,
.hud-profile,
.hud-menu{
  pointer-events:auto;
}

.hud-logo{
  background: transparent;
  border: none;
  box-shadow: none;
}

.hud-logo img{
  opacity:.75;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.25));
}

.hud-profile{
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
}

.avatar-img{
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  background: rgba(255,255,255,0.04);
}

.avatar-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(120,170,255,.18) 0%,
    transparent 55%
  );
}
.avatar-ring::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  border:2px solid rgba(120,170,255,.65);
  box-shadow: 0 0 18px rgba(120,170,255,.45), 0 0 42px rgba(120,170,255,.22);
  animation: hudPulse 2.6s ease-in-out infinite;
}
@keyframes hudPulse{
  0%,100%{ transform:scale(1); opacity:.95; }
  50%{ transform:scale(1.03); opacity:.72; }
}


.hud-menu-btn{
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 26px;
  width: 44px;
  height: 44px;
  cursor:pointer;
  opacity:.85;
  transition:.25s ease;
}
.hud-menu-btn:hover{
  opacity:1;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.6),
              inset 0 0 0 1px rgba(255,255,255,.55);
}
.hud-menu-btn:active{ transform: translateY(0) scale(.98); }


.hud-panel{
  width:240px;
  padding:10px;
  border-radius:16px;
  background: rgba(10,12,18,0.55);
  border:1px solid rgba(120,170,255,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 22px rgba(120,170,255,.14);
  display:grid;
  gap:6px;

  opacity:0;
  transform: translateY(-10px);
  pointer-events:none;
  transition: opacity .16s ease, transform .16s ease;
}
.hud-menu.open .hud-panel{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

.hud-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color:#fff;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.hud-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(120,170,255,.25);
}
.hud-text{ font-weight:600; font-size:14px; opacity:.95; }


.wheel{
  position:relative;
  overflow:visible;
  isolation:isolate;
  user-select:none;
  touch-action:none;
}

.wheel-track{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
}

.wheel-item{
  position:absolute;
  top:50%;
  left:50%;
  transform-style:preserve-3d;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;

  transform:
    translate3d(var(--x,0),var(--y,0),var(--z,0))
    scale(var(--s,1));
  z-index:var(--z-index,1);
}

.wheel-card{
  width:100%;
  height:100%;
  position:relative;
  border-radius:30px;
  overflow:hidden;
  background:linear-gradient(135deg,var(--c1,#222),var(--c2,#111));
  box-shadow:0 15px 40px rgba(0,0,0,.6);
  text-decoration:none;
  color:white;
}

.card-inner{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.card-logo{
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-logo img{
  width:86%;
  height:86%;
  object-fit:contain;
}

.card-footer{
  position:absolute;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.card-title{
  color: #f2f5fa;
  font-size:1.3rem;
  font-weight:700;
}

.card-btn{
  /*font-family: 'Parisienne', cursive;*/
  font-size: 20px;
  font-weight: 400;
  color: rgba(4, 28, 58, 0.74) !important;

  padding: 8px 26px;
  border-radius: 999px;

  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none !important;

  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: all .3s ease;
}
.card-btn:hover{
  background: rgba(255,255,255,.28);
  color: rgba(180,140,90,1) !important;
  box-shadow: 0 6px 18px rgba(180,140,90,.25);
}


.wheel-controls{
  display:flex;
  align-items:center;
  gap:16px;
}

.wheel-controls .nav{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:white;
  font-size:22px;
  cursor:pointer;
  transition:.25s;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 0 22px rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.25);
}
.wheel-controls .nav:hover{ background:rgba(255,255,255,.18); }

.dots{ display:flex; gap:10px; }
.dots span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
}
.dots span.active{
  background:rgba(255,255,255,.9);
  box-shadow:0 0 14px rgba(120,170,255,.9);
}


.card-avatar-wrap,
.card-avatar{
  display:none !important;
}


.wheel-overlay{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:500;
  pointer-events:auto;
}
.wheel-overlay .avatar-img{
  border-radius:50%;
}
.wheel-overlay .hud-menu{ margin-top:18px; }
.wheel-overlay .hud-panel{
  right:auto;
  left:50%;
  transform:translateX(-50%);
}


.hero-avatar{
  display: grid;
  place-items: center;
  pointer-events: none;
  isolation: isolate;
}

.hero-avatar.profile-light img{
  position: relative;
  z-index: 3;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
  background: rgba(255,255,255,0.03);
}


.hero-avatar.profile-light .light-core,
.hero-avatar.profile-light .light-halo,
.hero-avatar.profile-light .light-fog{
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}


.hero-avatar.profile-light .light-core{
  inset: 10px;
  background: radial-gradient(circle,
    transparent 58%,
    rgba(var(--heroGold1),0.95) 66%,
    rgba(var(--heroGold2),0.70) 74%,
    transparent 84%);
  filter: blur(6px);
  opacity: .95;
}


.hero-avatar.profile-light .light-halo{
  inset: -14px;
  background: radial-gradient(circle,
    rgba(var(--heroGold1),0.20) 0%,
    rgba(var(--heroGold2),0.10) 42%,
    transparent 74%);
  filter: blur(26px);
  opacity: .95;
}


.hero-avatar.profile-light .light-fog{
  inset: -55px;
  background: radial-gradient(circle,
    rgba(var(--heroGold2),0.10) 0%,
    rgba(var(--heroGold1),0.06) 38%,
    transparent 80%);
  filter: blur(60px);
  opacity: .9;
}

@keyframes heroHalo{
  0%,100%{ transform: scale(1); opacity: .82; }
  50%{ transform: scale(1.04); opacity: .62; }
}


#footer-hud{
  display: flex;
  pointer-events: auto;
}

#footer-hud .mini-logo{
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}

#bg-layer{
  position: fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
}

#world{
  position: fixed;
  inset:0;
  z-index:5;
  perspective:1200px;
  overflow:hidden;
  transform: translateZ(0);
}

#hud-layer{
  position: fixed;
  inset:0;
  z-index:20;
  pointer-events:none;
}

#footer-layer{
  position: fixed;
  inset:0;
  z-index:30;
  pointer-events:none;
}

#footer-hud{
  display:flex;
  pointer-events:auto;
}
body.dragging .wheel-card{
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
body.dragging .card-btn{
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
html, body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif !important;
}
.card-btn{
  font-family: inherit !important;
}
.hud-title{
  font-family: inherit !important;
}