:root{
  --ink:#080b12; --panel:#101823; --panel2:#16212f; --edge:#26344a;
  --accent:#38e0d0; --flare:#7c5cff; --gold:#ffc24b; --danger:#ff6b6b; --live:#34d399;
  --fog:#cbd5e1; --text:#f4f7fb; --me:var(--accent);
  --display:"Lalezar",system-ui,sans-serif; --body:"IBM Plex Sans Arabic",system-ui,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px);color-scheme:dark;direction:rtl!important;text-align:right}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;min-height:100vh;direction:rtl!important;text-align:right;
  background-image:radial-gradient(1100px 480px at 85% -10%,color-mix(in oklab,var(--flare) 26%,transparent),transparent 60%),radial-gradient(800px 420px at 5% 110%,color-mix(in oklab,var(--accent) 16%,transparent),transparent 60%);
  background-attachment:fixed}
#root{direction:rtl!important;text-align:right;width:100%;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--me);outline-offset:2px}
.display{font-family:var(--display);font-weight:400}
.num{font-variant-numeric:tabular-nums;direction:ltr!important;unicode-bidi:isolate;display:inline-block}
.muted{color:#cbd5e1}

/* layout */
.app{display:flex;flex-direction:row;direction:rtl!important;width:100%;max-width:100%;min-height:100vh}
.side{width:254px;flex-shrink:0;position:sticky;top:0;height:100vh;order:1;direction:rtl!important;text-align:right;padding:18px 14px;display:flex;flex-direction:column;gap:6px;border-left:1px solid var(--edge);border-right:none;background:color-mix(in oklab,var(--panel) 70%,transparent);backdrop-filter:blur(14px);z-index:90;scrollbar-width:thin;scrollbar-color:var(--edge) transparent}
.brand{display:flex;align-items:center;gap:10px;padding:8px 8px 18px}
.brand-mark{width:38px;height:38px;border-radius:10px;border:1px solid color-mix(in oklab,var(--me) 55%,transparent);background:color-mix(in oklab,var(--me) 14%,transparent);display:grid;place-items:center;font-family:var(--display);font-size:20px;color:var(--me)}
.brand b{font-family:var(--display);font-weight:400;font-size:22px;display:block;line-height:1}
.brand small{color:var(--gold);font-size:11.5px;font-weight:700}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#dce7f5;font-size:14px;border:1px solid transparent;transition:background .2s ease,color .2s ease,border-color .2s ease}
.nav a:hover{background:color-mix(in oklab,var(--text) 6%,transparent);color:var(--text)}
.nav a.on{background:color-mix(in oklab,var(--me) 14%,transparent);border-color:color-mix(in oklab,var(--me) 35%,transparent);color:var(--me);font-weight:700}
.nav svg{width:18px;height:18px;flex-shrink:0}
.side-foot{margin-top:auto;display:grid;gap:8px}
.livebox{border:1px solid var(--edge);background:var(--panel2);border-radius:12px;padding:12px}
.pulse{position:relative;display:inline-flex;width:8px;height:8px}
.pulse::before,.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--live)}
.pulse::before{animation:ping 2.8s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.4);opacity:0}}
.main{order:2;flex:1;min-width:0;max-width:1400px;margin:0 auto;width:100%;direction:rtl!important;text-align:right;padding:24px clamp(16px,3.5vw,36px) 50px;display:grid;gap:28px;align-content:start}
.top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:48px}
.top .grow{flex:1}
@media (max-width:900px){
  .top{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;gap:8px}
  .top::-webkit-scrollbar{display:none}
}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--edge);background:color-mix(in oklab,var(--panel) 80%,transparent);border-radius:999px;padding:6px 13px;font-size:12.5px;line-height:1;white-space:nowrap!important;flex-shrink:0!important;transition:background .2s ease,border-color .2s ease,transform .15s ease}
.chip.gold{border-color:color-mix(in oklab,var(--gold) 45%,transparent);color:var(--gold)}
.chip:hover{transform:translateY(-1px)}
.profile-header-chip{padding:3px 10px 3px 5px!important;gap:7px!important}
.bottom{display:none}

/* primitives */
.card{border:1px solid var(--edge);background:color-mix(in oklab,var(--panel) 78%,transparent);backdrop-filter:blur(10px);border-radius:16px;padding:18px}
.card.flat{background:var(--panel2)}
.h1{font-family:var(--display);font-size:clamp(34px,5.4vw,60px);line-height:1.12;margin:0;text-wrap:balance;font-weight:400}
.h2{font-family:var(--display);font-size:26px;margin:0;font-weight:400}
.h3{font-family:var(--display);font-size:19px;margin:0;font-weight:400}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.btn{border:1px solid transparent;border-radius:12px;padding:10px 18px;font-weight:700;font-size:14px;background:var(--me);color:#06121a;transition:filter .2s ease,transform .2s ease,background .2s ease,border-color .2s ease;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:linear-gradient(135deg,rgba(15,23,42,0.9),rgba(30,41,59,0.75));border:1px solid rgba(56,224,208,0.45);color:#38e0d0;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,0.35)}
.btn.ghost:hover{background:linear-gradient(135deg,rgba(56,224,208,0.22),rgba(30,41,59,0.95));border-color:#38e0d0;color:#ffffff;box-shadow:0 0 16px rgba(56,224,208,0.5);transform:translateY(-1px)}
.btn.danger{background:rgba(239,68,68,0.14);border:1px solid #ef4444;color:#ff8080}
.btn.danger:hover{background:#ef4444;color:#fff;box-shadow:0 0 14px rgba(239,68,68,0.5)}
.btn.good{background:rgba(16,185,129,0.16);border:1px solid #10b981;color:#34d399}
.btn.good:hover{background:#10b981;color:#050b14;box-shadow:0 0 14px rgba(16,185,129,0.5)}
.btn.sm{padding:6px 14px;font-size:12.5px;border-radius:9px}
.btn[disabled]{opacity:.55;cursor:not-allowed;filter:none}
.btn.btn-equipped,.btn[disabled].btn-equipped{background:linear-gradient(135deg,rgba(16,185,129,0.22),rgba(5,150,105,0.35))!important;border:1px solid #10b981!important;color:#34d399!important;font-weight:800!important;cursor:default!important;opacity:1!important;box-shadow:0 0 14px rgba(16,185,129,0.3)!important}
.btn-cart-add{background:linear-gradient(135deg,rgba(245,158,11,0.18),rgba(15,23,42,0.85))!important;border:1px solid rgba(245,158,11,0.55)!important;color:#fef08a!important;font-weight:700!important}
.btn-cart-add:hover{background:rgba(245,158,11,0.3)!important;border-color:#fbbf24!important;color:#ffffff!important;box-shadow:0 0 14px rgba(245,158,11,0.5)!important}
.btn-cart-in{background:linear-gradient(135deg,#f59e0b,#d97706)!important;border:1px solid #ffd700!important;color:#050b14!important;font-weight:900!important;box-shadow:0 0 14px rgba(245,158,11,0.5)!important}
.btn-preview-profile{background:linear-gradient(135deg,rgba(37,99,235,0.18),rgba(15,23,42,0.85))!important;border:1px solid rgba(56,189,248,0.45)!important;color:#38bdf8!important;font-weight:700!important}
.btn-preview-profile:hover{background:rgba(56,189,248,0.28)!important;border-color:#38bdf8!important;color:#ffffff!important;box-shadow:0 0 14px rgba(56,189,248,0.5)!important}
.input,.select,.textarea{width:100%;border:1px solid rgba(56,224,208,0.35);background:rgba(15,23,42,0.95);color:#f1f5f9;border-radius:10px;padding:10px 12px;outline:none;font-size:14px}
.input:focus,.select:focus,.textarea:focus{border-color:var(--me);box-shadow:0 0 12px rgba(56,224,208,0.4)}
.select option,select option{background:#0f172a;color:#f1f5f9}
.field{display:grid;gap:6px;font-size:13px}
.field>span{color:#cbd5e1}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.row{display:flex;align-items:center;gap:10px}
.wrap{flex-wrap:wrap}
.mr-auto{margin-inline-start:auto}
.tag{font-size:11px;padding:3px 9px;border-radius:6px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.06);color:#f1f5f9;font-weight:700}
.tag.gold{color:var(--gold);border-color:color-mix(in oklab,var(--gold) 55%,transparent);background:color-mix(in oklab,var(--gold) 12%,transparent)}
.tag.acc{color:var(--me);border-color:color-mix(in oklab,var(--me) 55%,transparent);background:color-mix(in oklab,var(--me) 12%,transparent)}
.tag.red{color:var(--danger);border-color:color-mix(in oklab,var(--danger) 55%,transparent);background:color-mix(in oklab,var(--danger) 12%,transparent)}
.tag.grn{color:var(--live);border-color:color-mix(in oklab,var(--live) 55%,transparent);background:color-mix(in oklab,var(--live) 12%,transparent)}
.tag.blue{color:#38bdf8;border-color:rgba(56,189,248,0.55);background:rgba(56,189,248,0.12)}
.tag.ghost{color:#a5b4fc;border-color:rgba(165,180,252,0.45);background:rgba(165,180,252,0.12)}
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,0.1);overflow:hidden;position:relative;direction:rtl}
.bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#00f0ff,var(--me));margin-right:0;margin-left:auto;transition:width .4s ease;transform-origin:right center}
.empty{border:1px dashed rgba(245,158,11,0.35);background:rgba(15,23,42,0.65);border-radius:14px;padding:26px;text-align:center;color:#e2e8f0;font-size:14px;box-shadow:0 4px 20px rgba(0,0,0,0.3)}

/* ==========================================================================
   نظام إطارات الصور الفاخر والمتقن (Premium Gamer Avatar Frames)
   ========================================================================== */
.av {
  position: relative;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  display: inline-grid;
  place-items: center;
  font-family: var(--display);
  overflow: visible !important;
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 30%, #0a0f1d), #040711);
  border: 2px solid rgba(255, 255, 255, 0.12);
  transition: all 0.25s ease;
  box-sizing: border-box;
}
.av > img, .av img, .avatar-img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(10, 15, 26, 0.95) !important;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.6) !important;
}
.avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  text-transform: uppercase;
}
.av .on {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px var(--panel), 0 0 8px #10b981;
  z-index: 10;
}

/* Master Frame Base: Concentric Decorative Rings with Masks & Glows */
.av[class*="f-"] {
  border-color: transparent !important;
}
.av[class*="f-"]::before {
  content: "";
  position: absolute;
  inset: -4.5px;
  border-radius: 50% !important;
  padding: 3.2px;
  background: var(--f-ring, linear-gradient(135deg, #ffd700, #ff8c00));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: var(--f-anim, spinFrame 6s linear infinite);
  z-index: 3;
}
.av[class*="f-"]::after {
  content: "";
  position: absolute;
  inset: -5.5px;
  border-radius: 50% !important;
  background: var(--f-glow, radial-gradient(circle, rgba(255, 215, 0, 0.5), transparent 70%));
  filter: blur(5px);
  opacity: 0.75;
  pointer-events: none;
  z-index: 1;
  animation: var(--f-anim, spinFrame 6s linear infinite);
}

/* 1. الإطار الذهبي الإمبراطوري (Gold Emperor) */
.av.f-gold {
  --f-ring: conic-gradient(from 0deg, #ffe066, #f59e0b, #ffd700, #d97706, #fff3a0, #ffd700);
  --f-glow: radial-gradient(circle, rgba(255, 215, 0, 0.65), transparent 70%);
  --f-anim: spinFrame 8s linear infinite;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.45) !important;
}

/* 2. البلور الماسي الخارق (Diamond Crystal) */
.av.f-diamond, .av.f-diamond_shimmer {
  --f-ring: conic-gradient(from 45deg, #00f2fe, #4facfe, #ffffff, #38bdf8, #00f2fe);
  --f-glow: radial-gradient(circle, rgba(56, 189, 248, 0.7), transparent 70%);
  --f-anim: spinFrame 6s linear infinite;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.6) !important;
}

/* 3. لهب التنين الأسطوري (Dragon Flame) */
.av.f-flame, .av.f-dragon_flame {
  --f-ring: conic-gradient(from 0deg, #ff1a1a, #ff7b00, #ffea00, #ff3700, #ff1a1a);
  --f-glow: radial-gradient(circle, rgba(255, 87, 34, 0.8), transparent 70%);
  --f-anim: flameAuraPulse 2s ease-in-out infinite alternate;
  box-shadow: 0 0 22px rgba(255, 69, 0, 0.65) !important;
}

/* 4. الصاعقة الكهربائية الخاطفة (Electric Zap / Storm) */
.av.f-electric, .av.f-electric_storm, .av.f-thunder_god {
  --f-ring: conic-gradient(from 90deg, #00f0ff, #38bdf8, #ffffff, #6366f1, #00f0ff);
  --f-glow: radial-gradient(circle, rgba(0, 240, 255, 0.75), transparent 70%);
  --f-anim: electricZapAnim 1.8s steps(3) infinite;
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.65) !important;
}

/* 5. التاج الإمبراطوري الملكي (Royal Majestic) */
.av.f-royal, .av.f-cosmic_crown {
  --f-ring: conic-gradient(from 0deg, #ffd700, #9333ea, #f59e0b, #c084fc, #ffd700);
  --f-glow: radial-gradient(circle, rgba(147, 51, 234, 0.7), transparent 70%);
  --f-anim: spinFrame 7s linear infinite;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.6) !important;
}

/* 6. غليتش الأبعاد الرقمية (Cyber Glitch) */
.av.f-glitch, .av.f-cosmic_glitch {
  --f-ring: conic-gradient(from 0deg, #ef4444, #06b6d4, #ef4444, #10b981, #ef4444);
  --f-glow: radial-gradient(circle, rgba(239, 68, 68, 0.65), transparent 70%);
  --f-anim: glitchFlickerAnim 2s steps(4) infinite;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.55) !important;
}

/* 7. قمر الدم القرمزي (Blood Moon) */
.av.f-blood, .av.f-blood_moon {
  --f-ring: conic-gradient(from 0deg, #991b1b, #ef4444, #581c87, #dc2626, #991b1b);
  --f-glow: radial-gradient(circle, rgba(220, 38, 38, 0.8), transparent 70%);
  --f-anim: bloodBeatAnim 2s ease-in-out infinite;
  box-shadow: 0 0 24px rgba(220, 38, 38, 0.7) !important;
}

/* 8. قوس قزح الطيفي الخارق (Rainbow Spectrum) */
.av.f-rainbow {
  --f-ring: conic-gradient(from 0deg, #f43f5e, #fbbf24, #10b981, #06b6d4, #8b5cf6, #ec4899, #f43f5e);
  --f-glow: radial-gradient(circle, rgba(236, 72, 153, 0.6), transparent 70%);
  --f-anim: spinFrame 4s linear infinite;
  box-shadow: 0 0 22px rgba(139, 92, 246, 0.6) !important;
}

/* 9. ثقب الفيد المظلم (Cosmic Void) */
.av.f-void, .av.f-void_blackhole {
  --f-ring: conic-gradient(from 0deg, #312e81, #6366f1, #a855f7, #1e1b4b, #6366f1);
  --f-glow: radial-gradient(circle, rgba(99, 102, 241, 0.75), transparent 70%);
  --f-anim: spinFrame 6s linear infinite reverse;
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.65) !important;
}

/* 10. الصقيع القطبي الأزلي (Arctic Frost / Aurora) */
.av.f-frost, .av.f-aurora_flow {
  --f-ring: conic-gradient(from 45deg, #bae6fd, #38bdf8, #ffffff, #0284c7, #bae6fd);
  --f-glow: radial-gradient(circle, rgba(56, 189, 248, 0.7), transparent 70%);
  --f-anim: spinFrame 8s linear infinite;
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.6) !important;
}

/* 11. سايبر نيون ويف (Neon Wave) */
.av.f-neon, .av.f-cyber_neon {
  --f-ring: conic-gradient(from 0deg, #00f0ff, #ff007f, #00f0ff, #ff007f, #00f0ff);
  --f-glow: radial-gradient(circle, rgba(0, 240, 255, 0.7), transparent 70%);
  --f-anim: spinFrame 5s linear infinite;
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.65) !important;
}

/* 12. أجنحة الفينيق النارية (Phoenix Blaze) */
.av.f-phoenix_wings {
  --f-ring: conic-gradient(from 0deg, #fbbf24, #f97316, #dc2626, #ffe066, #fbbf24);
  --f-glow: radial-gradient(circle, rgba(249, 115, 22, 0.8), transparent 70%);
  --f-anim: flameAuraPulse 1.8s ease-in-out infinite alternate;
  box-shadow: 0 0 24px rgba(249, 115, 22, 0.7) !important;
}

/* 13. إمبراطور التنانين الأسطوري (Dragon Emperor) */
.av.f-dragon_emperor {
  --f-ring: conic-gradient(from 0deg, #ffd700, #ff4500, #ea580c, #ffe066, #ffd700);
  --f-glow: radial-gradient(circle, rgba(255, 215, 0, 0.85), transparent 70%);
  --f-anim: spinFrame 4.5s linear infinite;
  box-shadow: 0 0 26px rgba(255, 215, 0, 0.75) !important;
}

@keyframes spinFrame {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes flameAuraPulse {
  0%, 100% { filter: drop-shadow(0 0 8px #ff4500); transform: scale(1); }
  50% { filter: drop-shadow(0 0 18px #ff9800); transform: scale(1.04); }
}
@keyframes electricZapAnim {
  0%, 100% { filter: drop-shadow(0 0 8px #00f0ff); transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); filter: drop-shadow(0 0 16px #38bdf8); }
  50% { transform: translate(1px, -1px); filter: drop-shadow(0 0 14px #818cf8); }
  75% { transform: translate(-1px, -1px); filter: drop-shadow(0 0 18px #00f0ff); }
}
@keyframes bloodBeatAnim {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px #dc2626); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 20px #ef4444); }
}
@keyframes glitchFlickerAnim {
  0%, 90%, 100% { transform: translate(0, 0); opacity: 1; }
  92% { transform: translate(-2px, 1px); opacity: 0.8; }
  95% { transform: translate(2px, -1px); opacity: 0.9; }
  98% { transform: translate(-1px, -1px); opacity: 0.85; }
}

/* hero */
.hero{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:stretch}
.hero-main{position:relative;overflow:hidden;border:1px solid var(--edge);border-radius:20px;padding:28px;background:linear-gradient(135deg,color-mix(in oklab,var(--panel2) 80%,transparent),color-mix(in oklab,var(--panel) 50%,transparent));display:flex;flex-direction:column;justify-content:space-between}
.hero-main::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:color-mix(in oklab,var(--me) 22%,transparent);filter:blur(60px);top:-90px;left:-40px;pointer-events:none}
.hero-main>*{position:relative}
.radar-stage{display:flex;justify-content:center;align-items:center;padding:14px 0 16px;margin:4px 0;position:relative;overflow:hidden;border-radius:14px}
.radar{position:relative;width:120px;height:120px;margin:8px auto;display:grid;place-items:center}
.radar i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--me);box-shadow:0 0 12px color-mix(in oklab,var(--me) 40%,transparent);animation:radarRipple 2.7s cubic-bezier(0.15,0.7,0.3,1) infinite;pointer-events:none;will-change:transform,opacity}
.radar i:nth-child(1){animation-delay:0s}
.radar i:nth-child(2){animation-delay:0.9s}
.radar i:nth-child(3){animation-delay:1.8s}
.radar b{position:absolute;inset:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,color-mix(in oklab,var(--me) 30%,#0f172a),#050812);border:2px solid var(--me);display:grid;place-items:center;font-family:var(--display);font-size:26px;color:#fff;font-weight:900;box-shadow:0 0 20px color-mix(in oklab,var(--me) 55%,transparent),inset 0 0 10px color-mix(in oklab,var(--me) 35%,transparent);text-shadow:0 0 10px var(--me);animation:radarPulse 2.7s ease-in-out infinite;user-select:none;z-index:2;will-change:transform,box-shadow}
@keyframes radarRipple{0%{transform:scale(.45);opacity:.85}50%{opacity:.45}100%{transform:scale(1.55);opacity:0}}
@keyframes radarPulse{0%,100%{transform:scale(1);box-shadow:0 0 16px color-mix(in oklab,var(--me) 45%,transparent),inset 0 0 8px color-mix(in oklab,var(--me) 25%,transparent)}50%{transform:scale(1.03);box-shadow:0 0 24px var(--me),inset 0 0 12px color-mix(in oklab,var(--me) 50%,transparent)}}

/* game cards */
.game{display:flex;flex-direction:column;text-align:right;border:1px solid var(--edge);background:color-mix(in oklab,var(--panel) 78%,transparent);border-radius:16px;padding:14px;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;width:100%;height:100%;box-sizing:border-box}
.game:hover{border-color:color-mix(in oklab,var(--me) 55%,transparent);transform:translateY(-3px);box-shadow:0 8px 24px color-mix(in oklab,var(--me) 15%,transparent)}
.game .cover{width:100%;height:auto;aspect-ratio:16/10;border-radius:11px;object-fit:cover;display:block;margin-bottom:12px;background:#050810}
.game svg.cover{background:#050810}

/* feed */
.feed{display:grid;gap:8px;max-height:310px;overflow:hidden}
.feed .it{display:flex;gap:8px;align-items:center;font-size:13px;border:1px solid var(--edge);background:var(--panel2);border-radius:10px;padding:8px 10px;animation:slide .4s}
@keyframes slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* leaderboard */
.lb{display:grid;gap:8px}
.lb .r{display:flex;align-items:center;gap:12px;border:1px solid var(--edge);background:var(--panel2);border-radius:12px;padding:9px 12px;font-size:14px}
.lb .r.me{border-color:color-mix(in oklab,var(--me) 55%,transparent);background:color-mix(in oklab,var(--me) 9%,var(--panel2))}
.lb .pos{width:28px;font-family:var(--display);font-size:20px;color:var(--fog);text-align:center}
.lb .r:nth-child(1) .pos{color:var(--gold)}
.lb .r:nth-child(2) .pos{color:#cfd8e6}
.lb .r:nth-child(3) .pos{color:#d9935a}

/* duel */
.score{font-family:var(--display);font-size:42px;display:flex;gap:10px;align-items:center;justify-content:center}
.timer{height:6px;border-radius:99px;background:color-mix(in oklab,var(--text) 10%,transparent);overflow:hidden}
.timer i{display:block;height:100%;background:var(--me);width:100%;transform-origin:right;transition:width 0.25s linear}
.timer.low i{background:var(--danger)}
.choice{text-align:right;border:1px solid var(--edge);background:var(--panel2);border-radius:12px;padding:14px 16px;font-size:15px;transition:border-color .15s,background .15s,opacity .15s;position:relative;display:flex;align-items:center;gap:12px;unicode-bidi:isolate}
.choice-text{unicode-bidi:isolate;text-align:right}
.choice-text bdi{unicode-bidi:isolate;display:inline}
.choice:not([disabled]):hover{border-color:color-mix(in oklab,var(--me) 60%,transparent)}
.choice.right{border-color:var(--live);background:color-mix(in oklab,var(--live) 14%,transparent)}
.choice.wrong{border-color:var(--danger);background:color-mix(in oklab,var(--danger) 14%,transparent)}
.choice.dim{opacity:.45}
.choice.hidden{visibility:hidden}
.choice-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:color-mix(in oklab,var(--text) 8%,transparent);border:1px solid var(--edge);font-size:12px;font-weight:700;color:var(--muted);flex-shrink:0;unicode-bidi:isolate;direction:ltr}
.choice.right .choice-num{background:var(--live);color:#fff;border-color:var(--live)}
.choice.wrong .choice-num{background:var(--danger);color:#fff;border-color:var(--danger)}
.choice.picked .choice-num{background:var(--me);color:#080b12;border-color:var(--me)}
.opp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--fog);margin-inline-end:6px}
.opp-dot.done{background:var(--live)}
.q-prompt{font-family:var(--display);font-size:clamp(22px,3.4vw,32px);line-height:1.4;margin:14px 0 4px;font-weight:400;direction:rtl;text-align:right;unicode-bidi:isolate}
.q-prompt bdi{unicode-bidi:isolate;display:inline}
.memory-preview{margin-top:16px;padding:clamp(16px,3vw,26px);border:1px solid color-mix(in oklab,#a78bfa 48%,var(--edge));border-radius:18px;background:radial-gradient(ellipse at 50% 0%,color-mix(in oklab,#8b5cf6 18%,transparent),transparent 70%),var(--panel2);overflow:hidden}
.memory-countdown{font-size:18px;color:#c4b5fd;min-width:42px;text-align:center}
.memory-sequence{display:flex;justify-content:center;align-items:stretch;gap:clamp(7px,2vw,14px);margin:24px 0 18px;transition:opacity .25s,filter .25s,transform .25s}
.memory-token{position:relative;display:grid;place-items:center;width:clamp(48px,10vw,78px);height:clamp(60px,12vw,92px);border:1px solid color-mix(in oklab,#a78bfa 58%,var(--edge));border-radius:15px;background:linear-gradient(150deg,color-mix(in oklab,#8b5cf6 18%,var(--panel)),var(--panel2));box-shadow:0 8px 24px #0004,0 0 18px color-mix(in oklab,#8b5cf6 15%,transparent);animation:memoryDeal .38s both}
.memory-token:nth-child(2){animation-delay:.08s}.memory-token:nth-child(3){animation-delay:.16s}.memory-token:nth-child(4){animation-delay:.24s}.memory-token:nth-child(5){animation-delay:.32s}.memory-token:nth-child(6){animation-delay:.4s}.memory-token:nth-child(7){animation-delay:.48s}.memory-token:nth-child(8){animation-delay:.56s}
.memory-token small{position:absolute;top:4px;left:7px;color:var(--fog);font-size:10px}.memory-token b{font-size:clamp(24px,5vw,38px);font-weight:500}
.memory-sequence.memory-hidden{opacity:0;filter:blur(12px);transform:scale(.94);pointer-events:none}
.memory-hint{text-align:center;color:var(--muted);font-size:13px;min-height:20px}
@keyframes memoryDeal{from{opacity:0;transform:translateY(12px) rotateY(70deg)}to{opacity:1;transform:none}}
.memory-choice,.reaction-choice{min-height:72px}
.memory-choice>span:last-child,.reaction-choice>span:last-child{font-size:clamp(24px,4vw,36px);text-align:center!important}
.reaction-signal{position:relative;display:grid;justify-items:center;gap:7px;margin:20px auto 10px;padding:20px;width:min(100%,360px);border:1px solid color-mix(in oklab,#ff6b6b 52%,var(--edge));border-radius:20px;background:radial-gradient(ellipse at center,color-mix(in oklab,#ef4444 17%,transparent),var(--panel2) 72%);overflow:hidden}
.reaction-signal::before{content:"";position:absolute;inset:8px;border:1px solid color-mix(in oklab,#ff6b6b 22%,transparent);border-radius:14px;animation:signalRing 1.6s ease-out infinite;pointer-events:none}
.reaction-signal>span{font-size:12px;color:var(--muted)}.reaction-signal>b{font-size:clamp(54px,11vw,82px);line-height:1.1;filter:drop-shadow(0 0 18px #ff6b6b88);animation:signalPulse .8s ease-in-out infinite alternate}.reaction-signal>small{font-size:13px;color:var(--text)}
.reaction-choice{justify-content:center!important;border-color:color-mix(in oklab,#ff6b6b 22%,var(--edge))}.reaction-choice:not([disabled]):hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 20px #ff6b6b22}
@keyframes signalPulse{to{transform:scale(1.08);filter:drop-shadow(0 0 28px #ff6b6bcc)}}
@keyframes signalRing{0%{transform:scale(.96);opacity:.7}100%{transform:scale(1.06);opacity:0}}
@media(prefers-reduced-motion:reduce){.memory-token,.reaction-signal>b,.reaction-signal::before{animation:none!important}.memory-sequence,.memory-token{transition:none}}
.pips{display:flex;gap:6px}
.pips i{width:26px;height:6px;border-radius:99px;background:color-mix(in oklab,var(--text) 14%,transparent)}
.pips i.ok{background:var(--live)}.pips i.no{background:var(--danger)}.pips i.cur{background:var(--me)}

/* store */
.item{display:grid;gap:10px;border:1px solid var(--edge);background:color-mix(in oklab,var(--panel) 78%,transparent);border-radius:16px;padding:14px}
.item.eq{border-color:color-mix(in oklab,var(--me) 65%,transparent)}
.preview{height:92px;border-radius:12px;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--edge);overflow:hidden}
.swatch{width:56px;height:56px;border-radius:50%}
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.tabs button{white-space:nowrap;border:1px solid rgba(245,158,11,0.35);background:linear-gradient(135deg,rgba(15,23,42,0.9),rgba(30,41,59,0.75));color:#f1f5f9;border-radius:12px;padding:9px 18px;font-size:14px;font-weight:700;transition:all .2s ease;box-shadow:0 2px 8px rgba(0,0,0,0.35)}
.tabs button:hover{background:linear-gradient(135deg,rgba(245,158,11,0.22),rgba(30,41,59,0.95));border-color:rgba(245,158,11,0.7);color:#ffffff;transform:translateY(-2px);box-shadow:0 4px 14px rgba(245,158,11,0.35)}
.tabs button.on{background:linear-gradient(135deg,#f59e0b,#d97706)!important;border-color:#ffd700!important;color:#050b14!important;font-weight:900!important;box-shadow:0 4px 18px rgba(245,158,11,0.6)!important}
.coin{display:inline-block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe29a,var(--gold) 55%,#c98b12);box-shadow:inset 0 0 0 1px #9a6a0a}

/* profile */
.profile-banner{height:120px;border-radius:16px 16px 0 0}
.stat{border:1px solid var(--edge);background:var(--panel2);border-radius:12px;padding:12px}
.stat small{color:var(--fog);font-size:12px}
.stat b{display:block;font-family:var(--display);font-weight:400;font-size:26px;color:var(--me)}
.badge{text-align:right;border:1px solid var(--edge);background:var(--panel2);border-radius:12px;padding:12px;transition:border-color .15s}
.badge.on{border-color:var(--me);background:color-mix(in oklab,var(--me) 10%,var(--panel2))}
.badge.lock{opacity:.5}

/* toast */
#toasts{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:90;display:grid;gap:8px;width:min(92vw,380px);pointer-events:none}
.toast{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:11px 14px;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:slide .3s;pointer-events:auto}
.toast.ok{border-color:color-mix(in oklab,var(--live) 60%,transparent)}
.toast.err{border-color:color-mix(in oklab,var(--danger) 60%,transparent)}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(3,6,12,.78);backdrop-filter:blur(6px);z-index:80;display:grid;place-items:center;padding:16px}
.modal{width:min(100%,480px);max-height:90vh;overflow:auto}
.modal [data-x="close"],.modal [data-x^="close"]{
  background:rgba(239,68,68,0.14)!important;
  border:1px solid rgba(239,68,68,0.45)!important;
  color:#fca5a5!important;
  font-weight:700!important;
  transition:all .2s ease;
}
.modal [data-x="close"]:hover,.modal [data-x^="close"]:hover{
  background:#ef4444!important;
  border-color:#ef4444!important;
  color:#ffffff!important;
  box-shadow:0 0 14px rgba(239,68,68,0.5)!important;
  transform:scale(1.02);
}

/* auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:16px}
.auth .card{width:min(100%,440px);padding:26px}

table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{color:var(--fog);font-weight:500;text-align:right;padding:8px 10px;border-bottom:1px solid var(--edge)}
table.t td{padding:9px 10px;border-bottom:1px solid color-mix(in oklab,var(--edge) 60%,transparent)}
.scroll-x{overflow-x:auto}

@media (max-width:1080px){
  .hero{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .side{display:none}
  .bottom{display:flex;position:sticky;bottom:0;z-index:30;justify-content:space-around;border-top:1px solid var(--edge);background:color-mix(in oklab,var(--panel) 92%,transparent);backdrop-filter:blur(14px);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .bottom a,.bottom .mbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 8px;font-size:11px;color:var(--fog);border-radius:10px;transition:color .2s ease}
  .bottom a svg,.bottom .mbtn svg{width:20px;height:20px}
  .bottom a.on{color:var(--me);font-weight:700}
  .app{flex-direction:column}
}
@media (max-width:580px){
  .main{padding:16px 14px 90px;gap:20px}
  .g-auto{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .game{padding:10px}
  .game .h3{font-size:14.5px}
  .game p{font-size:12px;line-height:1.5}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .h1{font-size:clamp(26px,7vw,34px)}
  .h2{font-size:22px}
  .h3{font-size:17px}
  .score{font-size:32px}
  .card{padding:14px}
}
@media (prefers-reduced-motion:reduce){.bg-aurora,.bg-grid,.bg-stars{animation:none!important}}
/* ===== v4 ===== */
html{--r:16px;--r2:12px;--r3:10px}
#bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#bg>div{position:absolute;inset:0}
.bg-aurora{background:radial-gradient(1100px 480px at 85% -10%,color-mix(in oklab,var(--flare) 30%,transparent),transparent 60%),radial-gradient(800px 420px at 5% 110%,color-mix(in oklab,var(--me) 20%,transparent),transparent 60%);animation:aur 18s ease-in-out infinite alternate}
@keyframes aur{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-2%,2%,0)}}
.bg-glow{background:radial-gradient(900px 420px at 80% -10%,color-mix(in oklab,var(--flare) 22%,transparent),transparent 62%),radial-gradient(700px 380px at 0% 110%,color-mix(in oklab,var(--me) 16%,transparent),transparent 60%)}
.bg-grid{background-image:linear-gradient(color-mix(in oklab,var(--me) 14%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--me) 14%,transparent) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 75%);animation:gridmove 30s linear infinite}
@keyframes gridmove{to{background-position:46px 46px,46px 46px}}
.bg-dots{background-image:radial-gradient(color-mix(in oklab,var(--me) 30%,transparent) 1.4px,transparent 1.6px);background-size:26px 26px;mask-image:radial-gradient(ellipse at 50% 20%,#000 5%,transparent 70%)}
.bg-stars{background-image:radial-gradient(1.4px 1.4px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 60%,#fff,transparent),radial-gradient(1.6px 1.6px at 40% 80%,#fff,transparent),radial-gradient(1px 1px at 85% 20%,#fff,transparent),radial-gradient(1.2px 1.2px at 10% 70%,#fff,transparent);background-size:340px 340px;opacity:.8;animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.45}to{opacity:.95}}
.bg-img{background-size:cover;transform-origin:center;transition:filter .2s}
.bg-shade{background:var(--ink)}
#fx-bg,#fx-top{position:fixed;inset:0;pointer-events:none}
#fx-bg{z-index:0}#fx-top{z-index:120}
body{background-image:none!important;background-color:var(--ink)}
.app,.auth{position:relative;z-index:1}
html[data-anim="off"] *:not(.radar):not(.radar *):not(.pulse):not(.engine-pulse-dot){animation:none!important;transition:none!important}
html[data-anim="off"] .bg-aurora,html[data-anim="off"] .bg-grid{animation:none}

/* radii from template */
.card,.game,.item,.hero-main,.modal{border-radius:var(--r)}
.btn,.input,.select,.textarea,.stat,.badge,.choice,.lb .r,.feed .it,.tabs button,.tpl-prev,.dz,.nav-row,.pcard{border-radius:var(--r2)}
.toast{border-radius:var(--r2)}.preview,.cover,.game .cover{border-radius:var(--r3)}

/* sidebar v4 */
.side{overflow-y:auto}
.nav{display:grid;gap:2px}
.nav-g{font-size:11px;color:var(--fog);padding:10px 12px 4px;opacity:.8}
.nav a{position:relative}
.nbadge{margin-inline-start:auto;background:var(--danger);color:#fff;font-size:11px;border-radius:99px;padding:1px 7px;font-weight:700;animation:pulsebadge 2.8s ease-in-out infinite}
@keyframes pulsebadge{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.pcard{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--edge);background:var(--panel2);margin-bottom:8px;transition:border-color .2s,transform .2s}
.pcard:hover{border-color:color-mix(in oklab,var(--me) 55%,transparent);transform:translateY(-1px)}
.ringbox{position:relative;width:52px;height:52px;flex-shrink:0;display:grid;place-items:center}
.ringbox svg{position:absolute;inset:0}
.ring-l{position:relative;font-weight:400;font-size:20px;color:var(--me)}
.ring-p{transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1)}
.pname{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92px}
.coinsm{margin-inline-start:auto;display:flex;align-items:center;gap:5px;font-size:13px;color:var(--gold)}
.quick{display:flex;gap:6px}
.qbtn{flex:1;border:1px solid var(--edge);background:transparent;border-radius:var(--r2);padding:7px 0;font-size:15px;opacity:.55;transition:opacity .15s,background .15s,transform .1s}
.qbtn.on{opacity:1;background:color-mix(in oklab,var(--me) 12%,transparent)}
.qbtn:hover{transform:translateY(-1px)}
.chip.flame{border-color:color-mix(in oklab,#ff7a3d 55%,transparent);color:#ff9a5c;animation:flick 2.8s ease-in-out infinite}
@keyframes flick{0%,100%{box-shadow:none}50%{box-shadow:0 0 16px rgba(255,122,61,.45)}}
.mbrand{display:none}
.hide-s{}
.bottom .mbtn{background:none;border:0;display:grid;place-items:center;gap:2px;padding:6px 10px;font-size:11px;color:var(--fog)}
.bottom .mbtn svg{width:20px;height:20px}
.more-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.more-it{display:flex;align-items:center;gap:10px;border:1px solid var(--edge);background:var(--panel2);border-radius:var(--r2);padding:12px;font-size:14px}
.more-it svg{width:20px;height:20px;color:var(--me)}

/* route enter + micro interactions */
.route-enter .main>*{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.route-enter .main>*:nth-child(2){animation-delay:.04s}.route-enter .main>*:nth-child(3){animation-delay:.08s}.route-enter .main>*:nth-child(4){animation-delay:.12s}.route-enter .main>*:nth-child(5){animation-delay:.16s}.route-enter .main>*:nth-child(6){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.btn{position:relative;overflow:hidden}
.btn:hover{transform:translateY(-1px)}
.card,.game,.item{transition:border-color .2s,transform .2s,box-shadow .2s}
.item:hover,.arc-card:hover{box-shadow:0 10px 30px color-mix(in oklab,var(--me) 14%,transparent)}
.bar>i{animation:grow .9s cubic-bezier(.2,.8,.2,1) both;transform-origin:right}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
.shake{animation:shk .35s}
@keyframes shk{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.choice.right{animation:pop .4s}
@keyframes pop{40%{transform:scale(1.03)}}

/* event + quests */
.event-banner{border:1px solid color-mix(in oklab,var(--gold) 55%,transparent);background:linear-gradient(110deg,color-mix(in oklab,var(--gold) 20%,transparent),transparent);border-radius:var(--r);padding:16px 20px;position:relative;overflow:hidden}
.event-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);animation:shine 3.2s linear infinite;transform:translateX(-100%)}
@keyframes shine{to{transform:translateX(100%)}}
.qrow{display:flex;align-items:center;gap:10px;font-size:14px}
.quest.done{border-color:color-mix(in oklab,var(--live) 55%,transparent)}
.arc-mini{display:grid;place-items:center;gap:6px;padding:16px 8px;text-align:center}
.arc-mini:hover,.arc-card:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--me) 55%,transparent)}
.arc-ico{font-size:34px;transition:transform .25s}.arc-mini:hover .arc-ico{transform:scale(1.2) rotate(-6deg)}
.arc-big{font-size:46px;margin-bottom:8px}

/* arcade games */
.ag-box{height:clamp(220px,40vh,320px);border-radius:var(--r);display:grid;place-items:center;text-align:center;cursor:pointer;user-select:none;transition:background .1s;border:1px solid var(--edge);background:var(--panel2);outline:none}
.ag-box.wait{background:#7a1f2a}.ag-box.go{background:#14a05a;animation:pop .2s}.ag-box.early{background:#8a5a14}
.ag-q{font-family:var(--display);font-size:clamp(36px,7vw,64px);text-align:center;margin:10px 0 16px;letter-spacing:2px}
.ag-in{font-size:22px;text-align:center}
#ty-p span{opacity:.55}#ty-p span.ok{opacity:1;color:var(--live)}#ty-p span.bad{opacity:1;color:var(--danger);text-decoration:underline}#ty-p span.cur{opacity:1;background:color-mix(in oklab,var(--me) 25%,transparent);border-radius:3px}
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:420px;margin:0 auto}
.mem-card{aspect-ratio:1;border-radius:var(--r2);border:1px solid var(--edge);background:var(--panel2);font-size:34px;display:grid;place-items:center;transition:transform .25s,background .2s}
.mem-card:hover{transform:translateY(-2px)}.mem-card.open{background:color-mix(in oklab,var(--me) 16%,var(--panel2));transform:rotateY(0)}.mem-card.done{background:color-mix(in oklab,var(--live) 18%,var(--panel2));animation:pop .4s}
.tg-arena{position:relative;height:clamp(260px,50vh,380px);border-radius:var(--r);border:1px dashed var(--edge);background:var(--panel2);overflow:hidden;touch-action:manipulation}
.tg{position:absolute;border-radius:50%;border:0;background:radial-gradient(circle,#fff 0 12%,var(--danger) 13% 38%,#fff 39% 52%,var(--danger) 53%);box-shadow:0 0 22px color-mix(in oklab,var(--danger) 55%,transparent);animation:tgin .18s}
@keyframes tgin{from{transform:scale(.2)}to{transform:none}}
.tg.pop{transform:scale(1.4);opacity:0;transition:.12s}
.cd-inline{min-height:50vh;display:grid;place-items:center}
.cd-num{font-family:var(--display);font-size:clamp(90px,22vw,200px);color:var(--me);animation:cdpop .8s both;text-shadow:0 0 50px color-mix(in oklab,var(--me) 60%,transparent)}
@keyframes cdpop{0%{transform:scale(.4);opacity:0}30%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:.9}}
.cd-overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:color-mix(in oklab,var(--ink) 75%,transparent);backdrop-filter:blur(5px)}
.star{font-size:44px;color:color-mix(in oklab,var(--text) 18%,transparent)}.star.on{color:var(--gold);text-shadow:0 0 18px var(--gold);animation:starin .5s both}
.star.on:nth-child(2){animation-delay:.15s}.star.on:nth-child(3){animation-delay:.3s}
@keyframes starin{from{transform:scale(0) rotate(-90deg)}to{transform:none}}
.stars-big{display:flex;justify-content:center;gap:6px;margin:6px 0}
.breakdown{margin:16px auto;max-width:520px;border:1px solid var(--edge);border-radius:var(--r2);overflow:hidden;text-align:right}
.bl{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:9px 14px;font-size:13.5px;border-bottom:1px solid color-mix(in oklab,var(--edge) 60%,transparent);flex-wrap:wrap}
.bl.tot{background:color-mix(in oklab,var(--me) 10%,transparent);font-weight:700;border-bottom:0}
.combo-pill{background:linear-gradient(90deg,#ff7a3d,var(--gold));color:#2a1200;border-radius:99px;padding:3px 12px;font-weight:700;font-size:13px;animation:pop .35s}

/* studio */
.tpl-prev{position:relative;height:96px;border:1px solid;overflow:hidden;display:grid;place-items:center}
.tpl-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5}
.tpl-card{position:relative;width:62%;height:56%;border:1px solid;display:flex;gap:6px;align-items:center;justify-content:center}
.tpl-card i{width:12px;height:12px;border-radius:50%}
.tpl-line{position:absolute;bottom:0;left:0;right:0;height:4px}
.swt{width:34px;height:34px;border-radius:50%;border:3px solid transparent;transition:transform .15s}.swt:hover{transform:scale(1.15)}.swt.on{border-color:var(--text)}
.colorin{width:38px;height:34px;border:1px solid var(--edge);border-radius:8px;background:none;padding:2px;cursor:pointer}
input[type=range]{width:100%;accent-color:var(--me)}
.tgl{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.tgl input{width:18px;height:18px;accent-color:var(--me)}
.tabbtn{border:1px solid var(--edge);background:transparent;color:var(--fog);border-radius:var(--r2);padding:8px 14px;font-size:14px}.tabbtn.on{border-color:var(--me);color:var(--me);background:color-mix(in oklab,var(--me) 12%,transparent)}
.dz{display:grid;gap:4px;place-items:center;text-align:center;border:2px dashed var(--edge);padding:20px 12px;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.dz:hover,.dz.over{border-color:var(--me);background:color-mix(in oklab,var(--me) 9%,transparent)}.dz.over{transform:scale(1.015)}
.dz-i{font-size:24px;color:var(--me)}
.focal{position:relative;height:190px;border-radius:var(--r2);border:1px solid var(--edge);background-size:cover;cursor:crosshair;touch-action:none}
.pin{position:absolute;width:20px;height:20px;border-radius:50%;border:3px solid #fff;background:var(--me);transform:translate(-50%,-50%);box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 14px var(--me);pointer-events:none}
.nav-row{display:flex;align-items:center;gap:10px;border:1px solid var(--edge);background:var(--panel2);padding:8px 12px;margin-bottom:6px;cursor:grab;font-size:14px;transition:transform .15s,border-color .15s}
.nav-row svg{width:18px;height:18px}.nav-row.dragging{opacity:.4}.nav-row.dropt{border-color:var(--me);transform:translateY(2px)}
.grip{color:var(--fog);letter-spacing:-3px;cursor:grab}
.cov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.cov{display:grid;gap:8px}.cov-img img,.cov-img svg{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r3);display:block;height:auto}
.cov .dz{padding:10px}

@media (max-width:900px){
  .mbrand{display:flex}.hide-s{display:none}
  .main{padding-bottom:84px}
  .bottom{position:fixed;left:0;right:0;bottom:0}
}


/* ===== v5: server version ===== */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;position:relative;z-index:1}
.login-card{width:min(100%,980px);display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--edge);border-radius:calc(var(--r) + 6px);overflow:hidden;background:color-mix(in oklab,var(--panel) 85%,transparent);backdrop-filter:blur(14px)}
.login-hero{padding:38px 34px;display:grid;gap:16px;align-content:center;background:linear-gradient(150deg,color-mix(in oklab,var(--me) 14%,transparent),transparent 70%)}
.login-covers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:20px;align-content:center;background:color-mix(in oklab,var(--ink) 55%,transparent)}
.login-covers .cv{border-radius:var(--r3);overflow:hidden;aspect-ratio:16/10;animation:rise .6s both}
.login-covers .cv svg,.login-covers .cv img{width:100%;height:100%;display:block;object-fit:cover}
.btn.discord{background:#5865f2;color:#fff;font-size:16px;padding:14px 20px;width:100%}
.cover-art{width:100%;aspect-ratio:16/10;border-radius:var(--r3);overflow:hidden;margin-bottom:12px;background:#070b14;display:block;flex-shrink:0;position:relative}
.cover-art svg,.cover-art img{width:100%;height:100%;display:block;object-fit:cover}
.cover-art .spin{transform-origin:280px 175px;animation:spin 36s linear infinite}
.cover-art .spin2{transform-origin:280px 175px;animation:spin 28s linear infinite reverse}
.cover-art .float{animation:floaty 5.5s ease-in-out infinite}
.cover-art .pulse2{animation:pulse2 4s ease-in-out infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5px)}}
@keyframes pulse2{0%,100%{opacity:.65}50%{opacity:1}}
.game:hover .cover-art svg{transform:scale(1.02)}.cover-art svg{transition:transform .4s ease}
.avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.opp-row{display:flex;align-items:center;gap:10px}
.empty-wait{display:grid;place-items:center;text-align:center;gap:10px;padding:30px}
.me-chip{cursor:pointer}
.tag.bot{color:var(--gold);border-color:color-mix(in oklab,var(--gold) 45%,transparent)}
.status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--fog)}.status-dot.on{background:var(--live)}.status-dot.bad{background:var(--danger)}
.kbd{font-family:monospace;background:var(--panel2);border:1px solid var(--edge);border-radius:6px;padding:1px 6px;font-size:12px}
@media (max-width:760px){.login-card{grid-template-columns:1fr}.login-covers{order:-1;grid-template-columns:repeat(4,1fr);padding:12px}}

/* ===== Luxury Styling & Owner Sidebar Layout ===== */
.owner-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start;min-width:0;width:100%}
@media (max-width:860px){.owner-layout{grid-template-columns:100%}}
.owner-sidebar{background:color-mix(in oklab,var(--panel2) 90%,transparent);border:1px solid var(--edge);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:6px;position:sticky;top:80px;box-shadow:0 8px 32px rgba(0,0,0,0.25)}
.owner-sidebar button{display:flex;align-items:center;gap:10px;width:100%;text-align:right;border:1px solid transparent;background:transparent;color:var(--text);border-radius:10px;padding:10px 14px;font-size:14px;cursor:pointer;transition:all .2s ease}
.owner-sidebar button:hover{background:color-mix(in oklab,var(--me) 12%,transparent);border-color:color-mix(in oklab,var(--me) 30%,transparent);transform:translateX(-3px)}
.owner-sidebar button.on, .owner-sidebar button.active, .owner-nav-btn.on, .owner-nav-btn.active{background:color-mix(in oklab,var(--me) 20%,transparent);border-color:var(--me);color:var(--me);font-weight:700;box-shadow:0 0 16px color-mix(in oklab,var(--me) 30%,transparent)}
.owner-content{display:grid;gap:16px;min-width:0;overflow-x:hidden}

/* Clean Profile Header: Banner & Circular Avatar are 100% Separated with Zero Overlap */
.profile-header-grid{display:flex;align-items:center;gap:20px;padding:20px 24px 20px;position:relative;z-index:5;background:color-mix(in oklab,var(--panel) 92%,transparent)}
.profile-avatar-wrap{margin-top:0;position:relative;z-index:10;flex-shrink:0}
.profile-avatar-box{padding:4px;border-radius:50%;background:var(--panel);box-shadow:0 8px 24px rgba(0,0,0,0.65);border:2px solid color-mix(in oklab,var(--me) 40%,var(--edge));display:inline-flex;align-items:center;justify-content:center}
.profile-info-wrap{flex:1;min-width:0;padding-top:0;display:flex;flex-direction:column;gap:5px}
.profile-rank-card{padding:10px 14px;background:rgba(15,23,42,0.7);border:1px solid var(--edge);border-radius:12px;width:min(100%,280px);margin-top:0;margin-inline-start:auto;flex-shrink:0}
@media (max-width:860px){
  .profile-header-grid{flex-direction:column;align-items:center;text-align:center;gap:14px;padding:16px 16px 18px}
  .profile-avatar-wrap{margin-top:0}
  .profile-info-wrap{align-items:center;padding-top:0;width:100%}
  .profile-info-wrap .row{justify-content:center}
  .profile-rank-card{margin-top:4px;margin-inline-start:0;width:100%}
}

/* Drag and Drop Zone */
.dropzone{border:2px dashed color-mix(in oklab,var(--me) 45%,transparent);border-radius:16px;padding:28px 20px;text-align:center;background:color-mix(in oklab,var(--panel2) 60%,transparent);cursor:pointer;transition:all .25s ease}
.dropzone:hover,.dropzone.dragover{border-color:var(--me);background:color-mix(in oklab,var(--me) 12%,transparent);box-shadow:0 0 24px color-mix(in oklab,var(--me) 30%,transparent)}

/* Shopping Cart */
.cart-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:90;background:color-mix(in oklab,var(--panel2) 95%,transparent);border:1px solid var(--me);box-shadow:0 12px 40px rgba(0,0,0,0.6),0 0 20px color-mix(in oklab,var(--me) 35%,transparent);border-radius:99px;padding:8px 20px;display:flex;align-items:center;gap:14px;backdrop-filter:blur(16px);animation:rise .4s ease}
.cart-item-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--edge);border-radius:12px;background:var(--panel2);transition:all .2s}
.cart-item-row:hover{border-color:color-mix(in oklab,var(--me) 40%,transparent)}

/* Text animations */
.txt-rainbow{background:linear-gradient(90deg,#ff4e50,#f9d423,#10b981,#3b82f6,#ec4899,#ff4e50);background-size:200% auto;color:transparent;-webkit-background-clip:text;background-clip:text;animation:rainbowText 4s linear infinite;font-weight:bold}
.txt-fire{background:linear-gradient(180deg,#ffeb3b,#ff5722);color:transparent;-webkit-background-clip:text;background-clip:text;text-shadow:0 0 12px rgba(255,87,34,0.6);font-weight:bold}
@keyframes rainbowText{to{background-position:200% center}}

/* Interactive Clicker Mini-game */
.clicker-box{display:grid;place-items:center;padding:30px 20px;text-align:center;gap:16px}
.clicker-orb{width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--me),#050810);border:4px solid var(--me);display:grid;place-items:center;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;box-shadow:0 0 35px color-mix(in oklab,var(--me) 60%,transparent);transition:transform .06s ease,box-shadow .06s ease;outline:none}
.clicker-orb:active,.clicker-orb.tapped{transform:scale(.90);box-shadow:0 0 55px var(--me)}
.clicker-orb b{font-size:36px;color:#fff;font-family:var(--display);pointer-events:none}

/* Interactive Wheel Mini-game */
.wheel-wrap{position:relative;width:280px;height:280px;margin:20px auto}
.wheel-arrow{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:24px solid var(--gold);z-index:10;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5))}
.wheel-canvas{width:100%;height:100%;border-radius:50%;box-shadow:0 0 30px rgba(0,0,0,0.6),0 0 20px color-mix(in oklab,var(--gold) 40%,transparent);border:4px solid var(--gold)}

/* ==================== Profile & Store Banner Themes ==================== */
.profile-banner{height:160px;border-radius:16px 16px 0 0;position:relative;overflow:hidden;background-size:cover;background-position:center;border-bottom:1px solid var(--edge);transition:all .3s ease}
.banner-preview-box{height:92px;border-radius:12px;margin-bottom:10px;position:relative;overflow:hidden;background-size:cover;background-position:center;border:1px solid var(--edge);transition:all .3s ease;display:flex;align-items:flex-end;padding:8px 10px}
.banner-preview-box:hover{transform:scale(1.02);box-shadow:0 8px 24px rgba(0,0,0,0.5)}

/* Default Banner */
.profile-banner.banner-none, .banner-preview-box.banner-none, .banner-none {
  background: radial-gradient(500px 160px at 80% 0%,color-mix(in oklab,var(--me) 40%,transparent),transparent 70%),linear-gradient(120deg,color-mix(in oklab,var(--me) 20%,transparent),transparent 60%),var(--panel2);
  border-color: color-mix(in oklab,var(--me) 30%,var(--edge));
}

/* Cyberpunk Neon */
.profile-banner.banner-cyber, .banner-preview-box.banner-cyber, .banner-cyber {
  background: linear-gradient(135deg,#0d0221 0%,#0f051d 30%,#261447 60%,#ff3864 100%),radial-gradient(circle at 20% 40%,#05d9e8 0%,transparent 50%);
  background-size: 200% 200%;
  border-color: rgba(5,217,232,0.45);
  box-shadow: inset 0 0 25px rgba(255,56,100,0.25);
  animation: bannerCyberShift 8s ease infinite alternate;
}

/* Galaxy */
.profile-banner.banner-galaxy, .banner-preview-box.banner-galaxy, .banner-galaxy {
  background: radial-gradient(ellipse at bottom,#1b2735 0%,#090a0f 100%),linear-gradient(45deg,#302b63,#24243e,#0f0c29);
  background-size: 200% 200%;
  border-color: rgba(147,51,234,0.45);
  box-shadow: inset 0 0 25px rgba(112,0,255,0.25);
  animation: bannerAuroraDrift 12s ease-in-out infinite alternate;
}

/* Royal Gold */
.profile-banner.banner-royal, .banner-preview-box.banner-royal, .banner-royal {
  background: linear-gradient(135deg,#141414 0%,#282412 40%,#d4af37 90%,#ffd700 100%);
  background-size: 200% 200%;
  border-color: rgba(255,215,0,0.45);
  box-shadow: inset 0 0 25px rgba(212,175,55,0.3);
  animation: bannerCyberShift 7s ease infinite;
}

/* Dragon Fire */
.profile-banner.banner-fire, .banner-preview-box.banner-fire, .banner-fire {
  background: linear-gradient(135deg,#1f0000 0%,#450a0a 40%,#dc2626 70%,#f97316 100%);
  background-size: 200% 200%;
  border-color: rgba(239,68,68,0.45);
  box-shadow: inset 0 0 25px rgba(249,115,22,0.3);
  animation: bannerFireWave 5s ease-in-out infinite alternate;
}

/* Matrix Code */
.profile-banner.banner-matrix, .banner-preview-box.banner-matrix, .banner-matrix {
  background: radial-gradient(circle at 50% 50%,#032b13 0%,#02140a 60%,#000000 100%);
  background-size: 100% 200%;
  border-color: rgba(0,255,102,0.4);
  box-shadow: inset 0 0 25px rgba(0,255,102,0.2);
  animation: bannerMatrixScan 6s linear infinite;
}

/* Aurora */
.profile-banner.banner-aurora, .banner-preview-box.banner-aurora, .banner-aurora {
  background: linear-gradient(135deg,#041f1e 0%,#064e3b 40%,#059669 70%,#a7f3d0 100%);
  background-size: 200% 200%;
  border-color: rgba(16,185,129,0.45);
  box-shadow: inset 0 0 25px rgba(5,150,105,0.25);
  animation: bannerAuroraDrift 9s ease-in-out infinite alternate;
}

/* Sunset */
.profile-banner.banner-sunset, .banner-preview-box.banner-sunset, .banner-sunset {
  background: linear-gradient(135deg,#2e0854 0%,#6b21a8 40%,#c026d3 70%,#f43f5e 100%);
  background-size: 200% 200%;
  border-color: rgba(192,38,211,0.45);
  box-shadow: inset 0 0 25px rgba(244,63,94,0.25);
  animation: bannerCyberShift 8s ease infinite alternate;
}

/* Blood Moon */
.profile-banner.banner-blood, .banner-preview-box.banner-blood, .banner-blood {
  background: linear-gradient(135deg,#180303 0%,#3f0713 50%,#881337 100%);
  background-size: 200% 200%;
  border-color: rgba(225,29,72,0.45);
  box-shadow: inset 0 0 25px rgba(136,19,55,0.3);
  animation: bannerFireWave 6s ease infinite alternate;
}

/* Custom Upload */
.profile-banner.banner-custom, .banner-preview-box.banner-custom, .banner-custom {
  background: radial-gradient(circle at 70% 30%,rgba(56,189,248,0.18),transparent 70%),var(--panel2);
  border-color: color-mix(in oklab,var(--me) 40%,var(--edge));
}

.banner-svg-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:1}
.banner-box-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,8,16,0.75) 0%,rgba(5,8,16,0.15) 55%,transparent 100%);pointer-events:none;z-index:2}
.banner-box-content{position:relative;z-index:3;display:flex;align-items:center;width:100%}
.banner-box-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:700;backdrop-filter:blur(8px);background:rgba(10,15,26,0.75);border:1px solid rgba(255,255,255,0.15);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.4)}
.banner-box-tag.cyber{border-color:#05d9e8;color:#05d9e8}
.banner-box-tag.galaxy{border-color:#c084fc;color:#e9d5ff}
.banner-box-tag.royal{border-color:#ffd700;color:#fef08a}
.banner-box-tag.fire{border-color:#f97316;color:#fdba74}
.banner-box-tag.matrix{border-color:#00ff66;color:#86efac}
.banner-box-tag.aurora{border-color:#34d399;color:#a7f3d0}
.banner-box-tag.sunset{border-color:#f43f5e;color:#fbcfe8}
.banner-box-tag.blood{border-color:#e11d48;color:#fca5a5}
.banner-box-tag.custom{border-color:var(--me);color:var(--me)}

.banner-edit-overlay-btn{position:absolute;top:14px;left:14px;right:auto;background:rgba(10,15,26,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid color-mix(in oklab,var(--me) 60%,transparent);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:99px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;z-index:3;transition:all .2s ease;box-shadow:0 4px 14px rgba(0,0,0,0.4)}
.banner-edit-overlay-btn:hover{background:var(--me);color:#050810;border-color:var(--me);transform:translateY(-1px);box-shadow:0 6px 18px color-mix(in oklab,var(--me) 40%,transparent)}

/* Announcements */
.announcement-card{background:var(--panel2);border:1px solid var(--edge);border-radius:14px;padding:16px;display:grid;gap:8px;position:relative;transition:all .2s ease}
.announcement-card.pinned{border-color:color-mix(in oklab,var(--gold) 50%,transparent);box-shadow:0 0 20px color-mix(in oklab,var(--gold) 15%,transparent)}
.tag-everyone{background:linear-gradient(135deg,#f59e0b,#d97706);color:#000;font-weight:bold;padding:2px 8px;border-radius:6px;font-size:11px}
.tag-here{background:linear-gradient(135deg,#06b6d4,#0284c7);color:#fff;font-weight:bold;padding:2px 8px;border-radius:6px;font-size:11px}

/* Partners */
.partner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.partner-card{background:var(--panel2);border:1px solid var(--edge);border-radius:16px;padding:18px;display:grid;gap:12px;transition:all .25s ease;position:relative}
.partner-card:hover{border-color:var(--me);transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,0.4),0 0 20px color-mix(in oklab,var(--me) 25%,transparent)}
.partner-logo{width:56px;height:56px;border-radius:12px;object-fit:cover;border:1px solid var(--edge);background:var(--panel)}
.partner-logo-fallback{display:grid;place-items:center;font-size:22px;flex:0 0 auto}

/* Mode Switcher Pill */
.mode-pill{display:inline-flex;align-items:center;padding:3px;background:var(--panel2);border:1px solid var(--edge);border-radius:99px;gap:2px}
.mode-pill button{border:none;background:transparent;color:var(--fog);padding:4px 12px;border-radius:99px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
.mode-pill button.active{background:var(--me);color:#050810;box-shadow:0 2px 10px color-mix(in oklab,var(--me) 40%,transparent)}

/* Permissions Table */
.perms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;padding:8px 0}
.perm-check{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:6px 10px;border-radius:8px;background:var(--panel);border:1px solid var(--edge);cursor:pointer}
.perm-check input{cursor:pointer}

/* Profile Custom Banner & Rental Badges */
.profile-banner.banner-custom{background-color:var(--panel2);background-size:cover;background-position:center;position:relative}
.banner-rent-badge{position:absolute;top:14px;right:14px;left:auto;background:rgba(10,15,26,.85);backdrop-filter:blur(8px);border:1px solid var(--gold);color:var(--gold);font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:99px;display:inline-flex;align-items:center;gap:6px;box-shadow:0 4px 12px rgba(0,0,0,.4);z-index:3}
.banner-rent-badge.perm{border-color:var(--me);color:var(--me)}

/* Banner Rental Plans */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:14px 0}
.plan-card{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:12px 10px;text-align:center;cursor:pointer;transition:all .2s ease;display:grid;gap:4px}
.plan-card:hover,.plan-card.active{border-color:var(--me);background:color-mix(in oklab,var(--me) 12%,var(--panel));transform:translateY(-2px)}
.plan-card .price{font-size:14.5px;font-weight:800;color:var(--gold)}

/* Titan Engine Dashboard */
.engine-status-hero{border-radius:16px;padding:20px;border:1px solid var(--edge);background:linear-gradient(135deg,color-mix(in oklab,var(--me) 14%,#0a0d18),#07090f);position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.engine-pulse-dot{width:12px;height:12px;border-radius:50%;background:#10b981;box-shadow:0 0 16px #10b981;display:inline-block;animation:pulseCore 2.8s ease-in-out infinite}
.engine-pulse-dot.failover{background:#f59e0b;box-shadow:0 0 16px #f59e0b}
@keyframes pulseCore{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.75}}
.engine-metric-box{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:14px;display:grid;gap:4px}
.engine-metric-box .label{font-size:12px;color:var(--fog)}
.engine-metric-box .val{font-size:19px;font-weight:800;color:#fff}
.terminal-output{background:#04060a;border:1px solid #1a2234;border-radius:10px;padding:12px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12.5px;color:#38bdf8;max-height:220px;overflow-y:auto;line-height:1.7;direction:ltr;text-align:left}

/* System Logs Viewer */
.log-row{background:var(--panel2);border:1px solid var(--edge);border-radius:10px;padding:10px 14px;display:grid;gap:4px;font-size:13px;transition:all .2s}
.log-row:hover{border-color:color-mix(in oklab,var(--me) 40%,transparent)}
.log-row.alert{border-inline-start:4px solid var(--danger)}
.log-row.warn{border-inline-start:4px solid var(--gold)}
.log-row.info{border-inline-start:4px solid var(--me)}
.log-row.success{border-inline-start:4px solid var(--live)}
.log-pills{display:flex;gap:6px;flex-wrap:wrap}
.log-pills button{background:var(--panel);border:1px solid var(--edge);color:var(--fog);padding:5px 12px;border-radius:99px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.log-pills button.active{background:var(--me);color:#050810;border-color:var(--me)}

/* Mobile & PC Optimization */
@media (max-width:768px){
  .sec-head{flex-wrap:wrap;gap:10px}
  .grid.g4,.grid.g3{grid-template-columns:repeat(2,1fr)}
  .grid.g2{grid-template-columns:1fr}
  .owner-layout{grid-template-columns:1fr}
  .owner-sidebar{position:static;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
  .cart-bar{width:calc(100% - 32px);border-radius:16px;flex-wrap:wrap;justify-content:center}
  section{padding-bottom:70px}
}
@media (min-width:769px){
  .owner-layout{display:grid;grid-template-columns:250px 1fr;gap:24px;align-items:start}
  .owner-sidebar{position:sticky;top:80px}
}

/* Owner Maintenance Sticky Notification Bar */
.owner-maint-bar{position:sticky;top:0;z-index:9999;background:linear-gradient(90deg,#991b1b,#dc2626,#ea580c,#991b1b);background-size:200% 200%;animation:gradShift 4s ease infinite;color:#fff;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 4px 20px rgba(220,38,38,0.45);font-size:13.5px;font-weight:700}
.owner-maint-bar .maint-text{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Maintenance Full Screen */
.maintenance-screen{min-height:85vh;display:flex;align-items:center;justify-content:center;padding:24px}
.maintenance-box{max-width:620px;width:100%;background:radial-gradient(circle at top,rgba(234,88,12,0.15),transparent 70%),var(--panel);border:1px solid rgba(234,88,12,0.4);border-radius:24px;padding:38px 28px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.6),0 0 30px rgba(234,88,12,0.2);position:relative;overflow:hidden}
.maintenance-icon-glow{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;background:rgba(234,88,12,0.15);border:2px solid rgba(234,88,12,0.4);display:grid;place-items:center;font-size:42px;animation:maintPulse 3.5s ease-in-out infinite}
@keyframes maintPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(234,88,12,0.4)}50%{transform:scale(1.04);box-shadow:0 0 20px 4px rgba(234,88,12,0.25)}}
.maintenance-reason{background:var(--panel2);border:1px dashed rgba(234,88,12,0.45);border-radius:14px;padding:16px 20px;margin:18px 0;font-size:15px;line-height:1.8;color:var(--text);white-space:pre-wrap}
.maintenance-ping{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;background:rgba(255,255,255,0.06);font-size:12.5px;color:var(--fog)}
.maintenance-ping-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e;animation:pingDot 2.6s infinite}
@keyframes pingDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.85)}}

/* Top 3 Discord Roles Badges in Leaderboard */
.rank-role-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.3px;white-space:nowrap}
.rank-role-pill.rank1{background:linear-gradient(135deg,rgba(245,158,11,0.25),rgba(217,119,6,0.4));border:1px solid rgba(245,158,11,0.7);color:#fef08a;box-shadow:0 0 12px rgba(245,158,11,0.3)}
.rank-role-pill.rank2{background:linear-gradient(135deg,rgba(148,163,184,0.2),rgba(203,213,225,0.35));border:1px solid rgba(203,213,225,0.6);color:#f1f5f9;box-shadow:0 0 10px rgba(148,163,184,0.25)}
.rank-role-pill.rank3{background:linear-gradient(135deg,rgba(180,83,9,0.2),rgba(217,119,6,0.3));border:1px solid rgba(180,83,9,0.6);color:#fed7aa;box-shadow:0 0 10px rgba(180,83,9,0.2)}

/* Blue Links for Terms & Privacy */
.term-link-blue{color:#38bdf8!important;text-decoration:underline;text-underline-offset:4px;font-weight:700;cursor:pointer;transition:all .18s;display:inline-block}
.term-link-blue:hover{color:#7dd3fc!important;text-shadow:0 0 12px rgba(56,189,248,0.6);transform:translateY(-1px)}

/* Mandatory Terms Overlay & Box */
.mandatory-terms-overlay{position:fixed;inset:0;z-index:999999;background:rgba(3,6,12,0.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.mandatory-terms-box{max-width:640px;width:100%;background:radial-gradient(circle at top right,rgba(56,189,248,0.12),transparent 70%),var(--panel);border:1px solid rgba(56,189,248,0.4);border-radius:24px;padding:34px 26px;box-shadow:0 24px 80px rgba(0,0,0,0.8),0 0 40px rgba(56,189,248,0.15);display:grid;gap:16px;position:relative}
.terms-preview-box{background:var(--panel2);border:1px solid var(--edge);border-radius:12px;padding:14px 16px;max-height:240px;overflow-y:auto;font-size:13px;line-height:1.9;white-space:pre-wrap;color:var(--text);margin-top:4px}

/* Issue Reporting Modal & Dropzone */
.report-dropzone{border:2px dashed color-mix(in oklab,var(--me) 40%,var(--edge));border-radius:14px;padding:18px;text-align:center;background:color-mix(in oklab,var(--panel2) 60%,transparent);cursor:pointer;transition:all .2s;display:grid;place-items:center;gap:6px}
.report-dropzone:hover,.report-dropzone.dragover{border-color:var(--me);background:color-mix(in oklab,var(--me) 10%,var(--panel2))}
.report-preview-img{max-height:180px;max-width:100%;border-radius:10px;border:1px solid var(--edge);margin-top:10px;object-fit:contain}

/* Smooth Touch and Performance Improvements */
button,a,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.side,.main,.owner-content{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}

@keyframes bannerCyberShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes bannerFireWave{0%{background-position:50% 0%}50%{background-position:50% 100%}100%{background-position:50% 0%}}
@keyframes bannerMatrixScan{0%{background-position:0% 0%}100%{background-position:0% 100%}}
@keyframes bannerAuroraDrift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.profile-banner[class*="banner-"]:not(.banner-none):not(.banner-custom)::before{content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);opacity:.55;transform:translate3d(-15%,0,0);animation:bannerSheen 9s ease-in-out infinite alternate}
.profile-banner[class*="banner-"]>*{position:relative;z-index:1}
.banner-preview-box[class*="banner-"]:not(.banner-none):not(.banner-custom) .banner-box-overlay::before{content:"";position:absolute;inset:-40%;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);opacity:.55;transform:translate3d(-15%,0,0);animation:bannerSheen 9s ease-in-out infinite alternate}
@keyframes bannerSheen{to{transform:translate3d(15%,0,0)}}
@media(prefers-reduced-motion:reduce){.profile-banner[class*="banner-"]::before,.banner-preview-box[class*="banner-"] .banner-box-overlay::before{animation:none;transform:none}.profile-banner,.banner-preview-box{transition:none}}

/* Live 1v1 chat and player-selected placement */
.duel-live-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0;align-items:start}
.duel-live-layout.chat-right{grid-template-columns:minmax(0,1fr) minmax(250px,.36fr)}
.duel-live-layout.chat-left{grid-template-columns:minmax(250px,.36fr) minmax(0,1fr)}
.duel-live-layout.chat-left .duel-chat-card{grid-column:1;grid-row:1}
.duel-live-layout.chat-left .duel-mode{grid-column:2;grid-row:1}
.duel-live-layout.chat-right .duel-chat-card{grid-column:2;grid-row:1}
.duel-live-layout.chat-right .duel-mode{grid-column:1;grid-row:1}
.duel-chat-card, .room-chat-card{background:var(--panel2);border:1px solid var(--edge);border-radius:14px;padding:10px 14px;display:grid;gap:8px;margin-top:0;min-width:0}
.duel-chat-minimized, .room-chat-minimized{padding:8px 14px;cursor:pointer;transition:border-color .15s}
.duel-chat-minimized:hover, .room-chat-minimized:hover{border-color:var(--me)}
.duel-chat-box, .room-chat-box{max-height:120px;min-height:55px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:6px 10px;border-radius:10px;background:var(--panel);border:1px solid var(--edge);scroll-behavior:smooth}
.duel-chat-msg, .room-chat-msg{display:inline-flex;flex-direction:column;gap:2px;padding:4px 10px;border-radius:10px;font-size:12.5px;max-width:85%;word-break:break-word}
.duel-chat-msg.me, .room-chat-msg.me{background:color-mix(in oklab,var(--me) 18%,var(--panel));border:1px solid color-mix(in oklab,var(--me) 45%,transparent);align-self:flex-start}
.duel-chat-msg.opp, .room-chat-msg.other{background:color-mix(in oklab,var(--flare) 18%,var(--panel));border:1px solid color-mix(in oklab,var(--flare) 45%,transparent);align-self:flex-end}
.duel-chat-author, .room-chat-author{font-size:10.5px;opacity:.8}
.question-size-large .q-prompt{font-size:clamp(23px,3.2vw,34px)}
.duel-chat-quick, .room-chat-quick{display:flex;flex-wrap:wrap;gap:5px}
.duel-chat-quick button, .room-chat-quick button{background:var(--panel2);border:1px solid var(--edge);color:var(--text);border-radius:99px;padding:3px 9px;font-size:11.5px;cursor:pointer;transition:all .15s}
.duel-chat-quick button:hover, .room-chat-quick button:hover{border-color:var(--me);background:color-mix(in oklab,var(--me) 15%,transparent);transform:translateY(-1px)}
@media(max-width:900px){.duel-live-layout.chat-left,.duel-live-layout.chat-right{grid-template-columns:minmax(0,1fr)}.duel-live-layout.chat-left .duel-chat-card,.duel-live-layout.chat-right .duel-chat-card,.duel-live-layout.chat-left .duel-mode,.duel-live-layout.chat-right .duel-mode{grid-column:1;grid-row:auto}.duel-live-layout.chat-left .duel-mode,.duel-live-layout.chat-right .duel-mode{grid-row:1}.duel-live-layout.chat-left .duel-chat-card,.duel-live-layout.chat-right .duel-chat-card{grid-row:2}}

/* Sound Pack Previews & Cards */
.sound-preview-box{height:76px;border-radius:12px;margin-bottom:8px;position:relative;overflow:hidden;display:flex;align-items:center;padding:0 14px;background:var(--panel2);border:1px solid var(--edge);transition:all .25s ease;gap:12px}
.sound-preview-box:hover{border-color:color-mix(in oklab,var(--me) 50%,transparent);transform:translateY(-1px)}
.sound-preview-box.sound-laser{background:linear-gradient(135deg,#0c1626 0%,#0f2b48 60%,#0284c7 100%)}
.sound-preview-box.sound-katana{background:linear-gradient(135deg,#1c0a0a 0%,#3d0c0c 60%,#b91c1c 100%)}
.sound-preview-box.sound-crystal{background:linear-gradient(135deg,#130c24 0%,#2e1065 60%,#06b6d4 100%)}
.sound-preview-box.sound-bass{background:linear-gradient(135deg,#171717 0%,#262626 60%,#404040 100%)}
.sound-preview-box.sound-magic{background:linear-gradient(135deg,#230c2e 0%,#4a044e 60%,#c026d3 100%)}
.sound-preview-box.sound-coin{background:linear-gradient(135deg,#1c1605 0%,#451a03 50%,#b45309 85%,#f59e0b 100%)}
.sound-preview-box.sound-classic{background:var(--panel2)}

.sound-icon{font-size:30px;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4));flex-shrink:0}
.sound-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}


/* Team rooms — compact, responsive and animation-light */
.team-game-card{min-width:0;display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--edge);border-radius:14px;background:linear-gradient(135deg,color-mix(in oklab,var(--me) 8%,var(--panel)),var(--panel2));transition:border-color .18s ease,transform .18s ease}
.team-game-card:hover{border-color:color-mix(in oklab,var(--me) 55%,var(--edge));transform:translateY(-2px)}
.team-game-icon{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:color-mix(in oklab,var(--me) 14%,var(--panel2));font-size:22px}
.team-game-1 .team-game-icon{background:color-mix(in oklab,var(--gold) 16%,var(--panel2))}
.team-game-2 .team-game-icon{background:color-mix(in oklab,var(--me) 10%,var(--panel2))}
.team-game-3 .team-game-icon{background:color-mix(in oklab,#fb7185 18%,var(--panel2))}
.team-game-4 .team-game-icon{background:color-mix(in oklab,#38bdf8 18%,var(--panel2))}
.team-game-5 .team-game-icon{background:color-mix(in oklab,#a78bfa 18%,var(--panel2))}
.room-list-card,.room-live{min-width:0;display:grid;gap:10px}
.room-player{display:flex;align-items:center;gap:8px;min-width:0}
.room-player b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-prompt{font-size:clamp(18px,3vw,25px);font-weight:800;line-height:1.55;text-align:center;padding:18px 12px;border-radius:14px;background:radial-gradient(circle at top,color-mix(in oklab,var(--me) 15%,transparent),transparent 68%),var(--panel2);overflow-wrap:anywhere}
.room-choice{min-height:54px;text-align:right;white-space:normal;line-height:1.5}
.reaction-wait{padding:18px;border-radius:14px;text-align:center;font-weight:800;color:var(--gold);background:color-mix(in oklab,var(--gold) 9%,var(--panel2));border:1px solid color-mix(in oklab,var(--gold) 25%,var(--edge))}
.room-react{min-height:64px;font-size:20px;font-weight:900;box-shadow:0 0 22px color-mix(in oklab,var(--live) 28%,transparent)}
.memory-room-sequence{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.memory-room-sequence span{min-width:42px;height:48px;display:grid;place-items:center;border-radius:12px;background:color-mix(in oklab,var(--me) 18%,var(--panel2));border:1px solid color-mix(in oklab,var(--me) 42%,var(--edge));font-size:24px;font-weight:900;font-variant-numeric:tabular-nums}
.score-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--edge);border-radius:999px;background:var(--panel2);font-size:14px;font-weight:900;font-variant-numeric:tabular-nums}
@media(max-width:700px){.team-game-card{padding:11px;gap:9px;align-items:flex-start}.team-game-card .tag{font-size:10px}.room-player{padding:9px}.room-live{padding:14px}.room-react{width:100%;min-height:72px}.room-list-card{padding:13px}}
@media(prefers-reduced-motion:reduce){.team-game-card{transition:none}.team-game-card:hover{transform:none}}


.av[class*="f-"] > * { position: relative; z-index: 2; }

.typing-duel-stage{display:grid;gap:12px;margin-top:14px}.typing-duel-stage .q-prompt{margin:0;text-align:center;line-height:1.7}.typing-duel-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;max-width:520px;width:100%;margin:0 auto}.typing-duel-entry input{font-size:clamp(20px,4vw,28px);font-weight:900;letter-spacing:.16em;text-align:center;font-variant-numeric:tabular-nums}.typing-duel-reveal{padding:14px;border:1px solid color-mix(in oklab,var(--live) 40%,var(--edge));border-radius:12px;text-align:center;background:color-mix(in oklab,var(--live) 8%,var(--panel2));color:var(--live);font-weight:800}.typing-duel-reveal b{display:inline-block;margin-inline-start:8px;font-size:24px;letter-spacing:.18em}@media(max-width:520px){.typing-duel-entry{grid-template-columns:1fr}.typing-duel-entry .btn{width:100%}}

.guide-page{display:grid;gap:18px}.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.guide-card{display:grid;grid-template-columns:minmax(120px,.72fr) minmax(0,1.28fr);gap:16px;align-items:center;min-width:0;overflow:hidden;padding:14px;background:linear-gradient(145deg,color-mix(in oklab,var(--me) 7%,var(--panel)),var(--panel2))}.guide-card-art{min-height:144px;display:grid;place-items:center;border:1px solid var(--edge);border-radius:14px;overflow:hidden;background:radial-gradient(circle at 50% 20%,color-mix(in oklab,var(--me) 17%,transparent),transparent 72%),var(--panel)}.guide-card-art svg{width:min(100%,180px);height:138px}.guide-banner-img{width:100%;height:144px;object-fit:cover}.guide-card-copy{display:grid;gap:7px;align-content:center;min-width:0}.guide-kicker{font-size:10px;letter-spacing:.13em;color:var(--me);font-weight:900}.guide-card-copy p{margin:0 0 4px;color:var(--muted);font-size:13px;line-height:1.8}.guide-card-copy .btn{justify-self:start}.guide-demo-quest{width:82%;display:grid;gap:12px;padding:16px;border:1px solid var(--edge);border-radius:12px;background:var(--panel2);font-size:13px}.guide-demo-quest b{color:var(--gold);font-variant-numeric:tabular-nums}.guide-demo-quest i{height:6px;border-radius:8px;background:var(--edge);overflow:hidden}.guide-demo-quest em{display:block;width:64%;height:100%;background:linear-gradient(90deg,var(--me),var(--live));border-radius:inherit}.guide-frame-demo,.guide-policy-demo{display:grid;justify-items:center;gap:13px;text-align:center;font-size:12px;color:var(--muted)}.guide-policy-demo{padding:22px;border:1px solid color-mix(in oklab,var(--live) 36%,var(--edge));border-radius:14px;background:color-mix(in oklab,var(--live) 8%,var(--panel2))}.guide-policy-demo b{font-size:17px;color:var(--live)}.guide-footnote{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.guide-footnote span{flex:1;min-width:240px;color:var(--muted);font-size:13px;line-height:1.7}
@media(max-width:820px){.guide-grid{grid-template-columns:1fr}.guide-card{grid-template-columns:minmax(100px,.42fr) minmax(0,1fr)}}
@media(max-width:520px){.guide-card{grid-template-columns:1fr;padding:12px;gap:11px}.guide-card-art{min-height:110px}.guide-banner-img{height:110px}.guide-card-art svg{height:110px}.guide-footnote{align-items:flex-start}.guide-footnote span{min-width:100%}}
.guide-media-grid,.guide-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px}.guide-media-card{display:grid;gap:9px;padding:10px;min-width:0}.guide-media-card b{font-size:13px}.guide-media-preview{aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:var(--panel2);border:1px solid var(--edge)}.guide-media-preview img,.guide-media-preview video{width:100%;height:100%;object-fit:cover;display:block}

/* مؤشر الإعلانات وتوهج التنبيه الأحمر 📢 */
.chip[data-x="openannouncements"].has-unread{border-color:#ef4444!important;background:color-mix(in oklab,#ef4444 18%,var(--panel))!important;box-shadow:0 0 14px rgba(239,68,68,0.45);animation:ancGlow 1.8s ease-in-out infinite}
.tag.red{background:#dc2626!important;color:#fff!important;border-color:#b91c1c!important;font-weight:700}
.unread-pulse{animation:unreadPulse 1.4s ease-in-out infinite;font-weight:700}
@keyframes ancGlow{0%,100%{border-color:#ef4444;box-shadow:0 0 10px rgba(239,68,68,0.35)}50%{border-color:#f87171;box-shadow:0 0 20px rgba(239,68,68,0.7)}}
@keyframes unreadPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08);filter:brightness(1.2)}}
.toast.announcement{border-color:#ef4444;background:color-mix(in oklab,#ef4444 24%,var(--panel));color:#fff;box-shadow:0 4px 18px rgba(239,68,68,0.4)}

/* الأعلام الوطنية للأسئلة والخيارات 🏁 */
.flag-wrapper{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.flag-icon{display:inline-block;vertical-align:middle;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.18)}
.choice-flag{height:34px;width:auto;min-width:48px;max-width:68px;object-fit:cover;border-radius:6px;box-shadow:0 3px 8px rgba(0,0,0,0.45);margin:2px 0}
.prompt-flag{height:52px;width:auto;min-width:72px;max-width:104px;object-fit:cover;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,0.55);margin:0 10px;vertical-align:middle;border:1.5px solid rgba(255,255,255,0.25)}
.choice.reaction-choice .choice-flag,.choice.memory-choice .choice-flag{height:38px}

/* 1v1 Match Proposal Card & Opponent Profile Preview */
.proposal-container { animation: propFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes propFadeIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.proposal-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.proposal-card:hover { box-shadow: 0 16px 48px rgba(0,0,0,0.55); }
.prop-timer-track { width: 100%; }
.prop-countdown-box { min-width: 82px; }
.pulse-text { animation: pulseOpacity 1.6s ease-in-out infinite; }
@keyframes pulseOpacity { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* ========================================================
   دائرة الرادار التركواز المتطورة (Turquoise Matchmaking Radar)
   ======================================================== */
.radar-tq-card {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(5, 217, 232, 0.1) 0%, rgba(8, 12, 22, 0.96) 65%, #050811 100%);
  border: 1px solid rgba(56, 224, 208, 0.35);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.65), 0 0 30px rgba(5, 217, 232, 0.12), inset 0 0 24px rgba(5, 217, 232, 0.05);
  border-radius: 20px;
  padding: 24px 20px;
  text-align: center;
}
.radar-tq-stage {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 18px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radar-tq-grid {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  border: 1px dashed rgba(56, 224, 208, 0.22);
}
.radar-tq-grid.g1 { width: 120px; height: 120px; }
.radar-tq-grid.g2 { width: 180px; height: 180px; }
.radar-tq-grid.g3 { width: 240px; height: 240px; border-style: solid; border-color: rgba(56, 224, 208, 0.28); }

.radar-tq-sweep {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg, rgba(56, 224, 208, 0.38) 0deg, rgba(56, 224, 208, 0.08) 50deg, transparent 85deg, transparent 360deg);
  animation: radarTqRotate 3.6s linear infinite;
  z-index: 2;
}
@keyframes radarTqRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.radar-tq-wave {
  position: absolute;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 2px solid rgba(56, 224, 208, 0.85);
  box-shadow: 0 0 16px rgba(56, 224, 208, 0.5), inset 0 0 10px rgba(56, 224, 208, 0.3);
  pointer-events: none;
  will-change: transform, opacity;
  animation: radarTqWavePulse 3.4s cubic-bezier(0.18, 0.7, 0.28, 1) infinite;
  z-index: 3;
}
.radar-tq-wave:nth-child(1) { animation-delay: 0s; }
.radar-tq-wave:nth-child(2) { animation-delay: 0.85s; }
.radar-tq-wave:nth-child(3) { animation-delay: 1.7s; }
.radar-tq-wave:nth-child(4) { animation-delay: 2.55s; }

@keyframes radarTqWavePulse {
  0% {
    transform: scale(0.92);
    opacity: 0.95;
    border-width: 2.5px;
  }
  50% {
    opacity: 0.55;
    border-width: 1.8px;
  }
  100% {
    transform: scale(2.85);
    opacity: 0;
    border-width: 1px;
    box-shadow: 0 0 28px transparent;
  }
}

.radar-tq-avatar-box {
  position: relative;
  z-index: 10;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b111e;
  border: 3px solid #38e0d0;
  box-shadow: 0 0 22px rgba(56, 224, 208, 0.65), inset 0 0 12px rgba(56, 224, 208, 0.35);
  animation: radarTqAvatarBeat 2.8s ease-in-out infinite;
}
.radar-tq-avatar-box .av {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
@keyframes radarTqAvatarBeat {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(56, 224, 208, 0.6), inset 0 0 10px rgba(56, 224, 208, 0.3);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 32px rgba(56, 224, 208, 0.95), inset 0 0 16px rgba(56, 224, 208, 0.5);
    border-color: #72f7eb;
  }
}

.radar-tq-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #38e0d0;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 12px #38e0d0, 0 0 20px rgba(56, 224, 208, 0.6);
  animation: turquoiseDotPulse 1.35s ease-in-out infinite;
}
@keyframes turquoiseDotPulse {
  0%, 100% {
    transform: scale(0.85);
    opacity: 0.65;
    box-shadow: 0 0 6px #38e0d0;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 16px #38e0d0, 0 0 28px rgba(56, 224, 208, 0.8);
  }
}
.radar-tq-status-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  padding: 6px 18px;
  border-radius: 99px;
  background: rgba(56, 224, 208, 0.08);
  border: 1px solid rgba(56, 224, 208, 0.28);
  margin-bottom: 12px;
}

/* مودال اختيار الأنمي المخصص */
.anime-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 14px;
  max-height: 520px;
  overflow-y: auto;
  padding: 4px;
}
.anime-topic-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
  border: 1px solid var(--edge);
  background: var(--panel2);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.anime-topic-card:hover {
  transform: translateY(-2px);
  border-color: #38e0d0;
  box-shadow: 0 8px 24px rgba(56, 224, 208, 0.2);
}
.anime-topic-card.featured {
  background: linear-gradient(135deg, rgba(56, 224, 208, 0.12), var(--panel2));
  border-color: rgba(56, 224, 208, 0.45);
}
.anime-topic-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 8px;
}

/* الألقاب المحدودة في المتجر ولوحة الأونر */
.tag-limited {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.25), rgba(249, 115, 22, 0.25)) !important;
  color: #fbbf24 !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tag-soldout {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  font-weight: 700;
}



/* ==================== Luxury Animated Banners ==================== */
.profile-banner.banner-dragon_fury, .banner-preview-box.banner-dragon_fury, .banner-dragon_fury {
  background: radial-gradient(circle at 75% 25%, #ff2200 0%, transparent 60%),
              linear-gradient(135deg, #2a0000 0%, #450a0a 35%, #991b1b 70%, #ff6600 100%);
  background-size: 200% 200%;
  border-color: rgba(255, 69, 0, 0.6);
  box-shadow: inset 0 0 35px rgba(255, 34, 0, 0.4);
  animation: bannerFireWave 4.5s ease-in-out infinite alternate;
}

.profile-banner.banner-cyber_grid, .banner-preview-box.banner-cyber_grid, .banner-cyber_grid {
  background: linear-gradient(135deg, #050b14 0%, #0c182b 40%, #1e1b4b 70%, #00f0ff 100%),
              repeating-linear-gradient(0deg, rgba(0, 240, 255, 0.08) 0px, rgba(0, 240, 255, 0.08) 1px, transparent 1px, transparent 24px);
  background-size: 200% 200%;
  border-color: rgba(0, 240, 255, 0.55);
  box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.35);
  animation: bannerCyberShift 6s ease-in-out infinite alternate;
}

.profile-banner.banner-matrix_code, .banner-preview-box.banner-matrix_code, .banner-matrix_code {
  background: radial-gradient(circle at 50% 50%, #052e16 0%, #022c22 45%, #020617 100%),
              repeating-linear-gradient(180deg, rgba(34, 197, 94, 0.15) 0px, rgba(34, 197, 94, 0.15) 2px, transparent 2px, transparent 14px);
  background-size: 100% 200%;
  border-color: rgba(34, 197, 94, 0.55);
  box-shadow: inset 0 0 30px rgba(34, 197, 94, 0.3);
  animation: bannerMatrixScan 5s linear infinite;
}

.profile-banner.banner-void_rift, .banner-preview-box.banner-void_rift, .banner-void_rift {
  background: radial-gradient(circle at 40% 60%, #4c1d95 0%, #1e1b4b 40%, #050510 100%),
              linear-gradient(120deg, #1e1b4b 0%, #312e81 50%, #7c3aed 100%);
  background-size: 200% 200%;
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: inset 0 0 35px rgba(124, 58, 237, 0.4);
  animation: bannerAuroraDrift 8s ease-in-out infinite alternate;
}

.profile-banner.banner-aurora_borealis, .banner-preview-box.banner-aurora_borealis, .banner-aurora_borealis {
  background: linear-gradient(135deg, #022c22 0%, #064e3b 30%, #0284c7 70%, #a7f3d0 100%);
  background-size: 200% 200%;
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: inset 0 0 35px rgba(6, 182, 212, 0.35);
  animation: bannerAuroraDrift 7s ease-in-out infinite alternate;
}

.profile-banner.banner-blood_abyss, .banner-preview-box.banner-blood_abyss, .banner-blood_abyss {
  background: radial-gradient(ellipse at center, #7f1d1d 0%, #450a0a 45%, #030101 100%),
              linear-gradient(135deg, #1c0000 0%, #881337 60%, #ef4444 100%);
  background-size: 200% 200%;
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: inset 0 0 35px rgba(220, 38, 38, 0.4);
  animation: bannerFireWave 5s ease-in-out infinite alternate;
}

.profile-banner.banner-storm_surge, .banner-preview-box.banner-storm_surge, .banner-storm_surge {
  background: radial-gradient(circle at 60% 40%, #1e3a8a 0%, #0f172a 60%, #020617 100%),
              linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #00f0ff 100%);
  background-size: 200% 200%;
  border-color: rgba(0, 240, 255, 0.55);
  box-shadow: inset 0 0 35px rgba(0, 240, 255, 0.35);
  animation: bannerCyberShift 6.5s ease-in-out infinite alternate;
}

/* ==================== 25 Profile Accent Colors (Solids, Duals, Animated Flows) ==================== */
/* 1. Solid Accents */
.swatch.acc-accent, .acc-accent { background: #00f0ff; }
.swatch.acc-gold, .acc-gold { background: #fbbf24; }
.swatch.acc-live, .acc-live { background: #10b981; }
.swatch.acc-blood, .acc-blood { background: #ef4444; }
.swatch.acc-flare, .acc-flare { background: #a855f7; }
.swatch.acc-rose, .acc-rose { background: #ec4899; }
.swatch.acc-sky, .acc-sky { background: #2563eb; }
.swatch.acc-lime, .acc-lime { background: #84cc16; }
.swatch.acc-magma, .acc-magma { background: #f97316; }
.swatch.acc-obsidian, .acc-obsidian { background: #1e293b; border-color: rgba(255, 255, 255, 0.25) !important; }
.swatch.acc-diamond, .acc-diamond { background: #f8fafc; border-color: rgba(0, 0, 0, 0.25) !important; }

/* 2. Dual-Tone Accents */
.swatch.acc-cyber_dual, .acc-cyber_dual { background: linear-gradient(135deg, #00f0ff, #ff007f); }
.swatch.acc-solar_flare, .acc-solar_flare { background: linear-gradient(135deg, #ff8c00, #ffd700); }
.swatch.acc-emerald_gold, .acc-emerald_gold { background: linear-gradient(135deg, #10b981, #f59e0b); }
.swatch.acc-phantom_void, .acc-phantom_void { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.swatch.acc-blood_fire, .acc-blood_fire { background: linear-gradient(135deg, #ef4444, #f97316); }
.swatch.acc-ice_fire, .acc-ice_fire { background: linear-gradient(135deg, #06b6d4, #ef4444); }
.swatch.acc-sakura_dusk, .acc-sakura_dusk { background: linear-gradient(135deg, #f472b6, #818cf8); }

/* 3. Animated Liquid Flow Accents */
.swatch.acc-aurora_flow, .acc-aurora_flow {
  background: linear-gradient(135deg, #10b981, #06b6d4, #3b82f6);
  background-size: 200% 200%;
  animation: liquidGradientShift 4s ease infinite alternate;
}
.swatch.acc-magma_flow, .acc-magma_flow {
  background: linear-gradient(135deg, #ef4444, #f97316, #eab308);
  background-size: 200% 200%;
  animation: liquidGradientShift 4s ease infinite alternate;
}
.swatch.acc-cosmic_hologram, .acc-cosmic_hologram {
  background: linear-gradient(135deg, #8b5cf6, #06b6d4, #ec4899, #38bdf8);
  background-size: 200% 200%;
  animation: liquidGradientShift 3.5s ease infinite alternate;
}
.swatch.acc-void_pulse, .acc-void_pulse {
  background: linear-gradient(135deg, #312e81, #7c3aed, #1e1b4b);
  background-size: 200% 200%;
  animation: liquidGradientShift 3.5s ease infinite alternate;
}
.swatch.acc-celestial_gold, .acc-celestial_gold {
  background: linear-gradient(135deg, #fef08a, #eab308, #b45309);
  background-size: 200% 200%;
  animation: liquidGradientShift 3.5s ease infinite alternate;
}
.swatch.acc-matrix_stream, .acc-matrix_stream {
  background: linear-gradient(135deg, #10b981, #22c55e, #052e16);
  background-size: 200% 200%;
  animation: liquidGradientShift 3s ease infinite alternate;
}
.swatch.acc-electric_storm, .acc-electric_storm {
  background: linear-gradient(135deg, #38bdf8, #818cf8, #0284c7);
  background-size: 200% 200%;
  animation: liquidGradientShift 2.5s ease infinite alternate;
}


/* ==================== Extra Luxury Animated Banners ==================== */
.profile-banner.banner-phoenix_blaze, .banner-preview-box.banner-phoenix_blaze, .banner-phoenix_blaze {
  background: radial-gradient(circle at 80% 20%, #ff8c00 0%, transparent 50%),
              linear-gradient(135deg, #450a0a 0%, #b91c1c 40%, #ea580c 75%, #fbbf24 100%);
  background-size: 200% 200%;
  border-color: rgba(249, 115, 22, 0.7);
  box-shadow: inset 0 0 35px rgba(234, 88, 12, 0.45);
  animation: bannerFireWave 4s ease-in-out infinite alternate;
}

.profile-banner.banner-tokyo_neon, .banner-preview-box.banner-tokyo_neon, .banner-tokyo_neon {
  background: linear-gradient(135deg, #09090b 0%, #1e1b4b 35%, #701a75 70%, #00f0ff 100%),
              repeating-linear-gradient(90deg, rgba(236, 72, 153, 0.08) 0px, rgba(236, 72, 153, 0.08) 2px, transparent 2px, transparent 30px);
  background-size: 200% 200%;
  border-color: rgba(236, 72, 153, 0.65);
  box-shadow: inset 0 0 35px rgba(0, 240, 255, 0.35);
  animation: bannerCyberShift 5.5s ease-in-out infinite alternate;
}

.profile-banner.banner-dark_matter, .banner-preview-box.banner-dark_matter, .banner-dark_matter {
  background: radial-gradient(circle at 30% 70%, #020617 0%, #09090b 45%, #18181b 100%),
              linear-gradient(135deg, #000000 0%, #1e1b4b 50%, #4c1d95 100%);
  background-size: 200% 200%;
  border-color: rgba(147, 51, 234, 0.6);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(124, 58, 237, 0.2);
  animation: bannerAuroraDrift 7s ease-in-out infinite alternate;
}

.profile-banner.banner-golden_heavens, .banner-preview-box.banner-golden_heavens, .banner-golden_heavens {
  background: radial-gradient(circle at 50% 30%, #fef08a 0%, #eab308 35%, #854d0e 70%, #1c1917 100%);
  background-size: 200% 200%;
  border-color: rgba(234, 179, 8, 0.75);
  box-shadow: inset 0 0 35px rgba(234, 179, 8, 0.45), 0 0 25px rgba(234, 179, 8, 0.25);
  animation: bannerFireWave 5s ease-in-out infinite alternate;
}

.profile-banner.banner-glitch_dimension, .banner-preview-box.banner-glitch_dimension, .banner-glitch_dimension {
  background: linear-gradient(135deg, #050510 0%, #180524 40%, #064e3b 80%, #ef4444 100%),
              repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 16px);
  background-size: 200% 200%;
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: inset 0 0 30px rgba(6, 182, 212, 0.35);
  animation: bannerMatrixScan 4s linear infinite;
}

.profile-banner.banner-celestial_nebula, .banner-preview-box.banner-celestial_nebula, .banner-celestial_nebula {
  background: radial-gradient(circle at 70% 40%, #38bdf8 0%, transparent 50%),
              radial-gradient(circle at 20% 80%, #c084fc 0%, transparent 50%),
              linear-gradient(135deg, #020617 0%, #1e1b4b 50%, #0f172a 100%);
  background-size: 200% 200%;
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: inset 0 0 35px rgba(168, 85, 247, 0.4);
  animation: bannerAuroraDrift 6.5s ease-in-out infinite alternate;
}

/* ==================== Exclusive Bundles Section & Visual Showcase ==================== */
.bundle-card {
  position: relative;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(7, 11, 20, 0.98));
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 20px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.bundle-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 158, 11, 0.75);
  box-shadow: 0 16px 45px rgba(245, 158, 11, 0.25), 0 0 30px rgba(245, 158, 11, 0.18);
}
.bundle-hero-header {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 4px;
}
.bundle-hero-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 11, 20, 0.85) 0%, rgba(7, 11, 20, 0.2) 100%);
}
.bundle-hero-title {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(245, 158, 11, 0.6);
}
.bundle-ribbon {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 99px;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.5);
  letter-spacing: 0.5px;
}
.bundle-badge-custom {
  background: linear-gradient(135deg, rgba(56, 224, 208, 0.18), rgba(59, 130, 246, 0.18));
  border: 1px solid #38e0d0;
  color: #38e0d0;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bundle-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  background: rgba(10, 15, 26, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px;
}
.bundle-item-tile {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
}
.bundle-item-tile:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(245, 158, 11, 0.4);
}
.bundle-item-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--fog);
  text-transform: uppercase;
}
.bundle-item-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.bundle-item-full {
  grid-column: 1 / -1;
}
.bundle-preview-mini-banner {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.bundle-sound-btn {
  background: rgba(56, 224, 208, 0.12);
  border: 1px solid rgba(56, 224, 208, 0.4);
  color: #38e0d0;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bundle-sound-btn:hover {
  background: #38e0d0;
  color: #000;
}
.bundle-price-tag {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.bundle-orig-price {
  font-size: 13px;
  color: var(--fog);
  text-decoration: line-through;
}
.bundle-price-val {
  font-size: 22px;
  font-weight: 900;
  color: var(--gold);
  font-family: var(--display);
}
.bundle-reason {
  font-size: 12px;
  color: #38e0d0;
  line-height: 1.5;
}

/* ==================== VIP Role Badge & Chat Styling ==================== */
.vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.22), rgba(245, 158, 11, 0.22));
  border: 1px solid rgba(56, 224, 208, 0.6);
  color: #72f7eb;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 0 14px rgba(56, 224, 208, 0.35);
}
.chat-msg.vip {
  border-inline-start: 3px solid #38e0d0;
  background: linear-gradient(90deg, rgba(56, 224, 208, 0.06), transparent);
}

/* ==================== Comprehensive Level 1-1000 Table & Roadmap ==================== */
.level-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--edge);
  background: var(--panel2);
}
.level-table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  font-size: 13px;
}
.level-table th {
  background: rgba(0, 0, 0, 0.4);
  color: var(--fog);
  font-size: 12px;
  font-weight: 800;
  padding: 12px 14px;
  border-bottom: 1px solid var(--edge);
  white-space: nowrap;
}
.level-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}
.level-table tr:last-child td {
  border-bottom: none;
}
.level-table tr.current-level {
  background: linear-gradient(90deg, rgba(56, 224, 208, 0.12), transparent);
  border-inline-start: 4px solid #38e0d0;
}
.level-table tr.unlocked {
  background: rgba(34, 197, 94, 0.04);
}
.level-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 4px 10px;
  border-radius: 99px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 13px;
}
.level-pill.bronze { background: rgba(180, 83, 9, 0.2); border: 1px solid #b45309; color: #f59e0b; }
.level-pill.silver { background: rgba(148, 163, 184, 0.2); border: 1px solid #94a3b8; color: #e2e8f0; }
.level-pill.gold { background: rgba(245, 158, 11, 0.2); border: 1px solid #f59e0b; color: #fbbf24; }
.level-pill.diamond { background: rgba(56, 189, 248, 0.2); border: 1px solid #38bdf8; color: #7dd3fc; }
.level-pill.legend { background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(168, 85, 247, 0.25)); border: 1px solid #ef4444; color: #f87171; box-shadow: 0 0 12px rgba(239, 68, 68, 0.4); }
.level-reward-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 700;
}
.level-perk-text {
  font-size: 12px;
  color: #38e0d0;
  line-height: 1.4;
}

/* Badge Categories Filter Tabs */
.badge-cat-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  margin-bottom: 16px;
  scrollbar-width: thin;
}
.badge-cat-tab {
  background: color-mix(in oklab, var(--panel2) 55%, transparent);
  border: 1px solid var(--edge);
  color: var(--fog);
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.badge-cat-tab:hover {
  color: var(--text);
  border-color: color-mix(in oklab, var(--me) 60%, transparent);
  background: color-mix(in oklab, var(--me) 12%, transparent);
  transform: translateY(-1px);
}
.badge-cat-tab.active {
  background: color-mix(in oklab, var(--me) 22%, transparent);
  border-color: var(--me);
  color: var(--me);
  box-shadow: 0 0 16px color-mix(in oklab, var(--me) 30%, transparent), inset 0 0 8px color-mix(in oklab, var(--me) 15%, transparent);
  font-weight: 800;
}



/* Dragon Breath Billowing on Dragon Fury & Dragon Breath Banners */
.profile-banner.banner-dragon_fury, .banner-preview-box.banner-dragon_fury,
.profile-banner.banner-dragon_breath, .banner-preview-box.banner-dragon_breath {
  position: relative;
  overflow: hidden;
}
.profile-banner.banner-dragon_fury::before, .banner-preview-box.banner-dragon_fury::before,
.profile-banner.banner-dragon_breath::before, .banner-preview-box.banner-dragon_breath::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(255, 69, 0, 0.7) 0%, rgba(255, 140, 0, 0.45) 35%, transparent 75%),
              radial-gradient(circle at 25% 65%, rgba(255, 34, 0, 0.5) 0%, transparent 60%);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: dragonBreathWave 3s ease-in-out infinite alternate;
}
@keyframes dragonBreathWave {
  0% {
    opacity: 0.55;
    transform: scale(0.98) translateX(2%);
    filter: hue-rotate(0deg) brightness(1);
  }
  50% {
    opacity: 0.98;
    transform: scale(1.08) translateX(-4%);
    filter: hue-rotate(-15deg) brightness(1.35);
  }
  100% {
    opacity: 0.7;
    transform: scale(1.02) translateX(1%);
    filter: hue-rotate(10deg) brightness(1.1);
  }
}

/* Violent Lightning Bolts on Storm Surge & Lightning Strike Banners */
.profile-banner.banner-storm_surge, .banner-preview-box.banner-storm_surge,
.profile-banner.banner-lightning_strike, .banner-preview-box.banner-lightning_strike {
  position: relative;
  overflow: hidden;
}
.profile-banner.banner-storm_surge::before, .banner-preview-box.banner-storm_surge::before,
.profile-banner.banner-lightning_strike::before, .banner-preview-box.banner-lightning_strike::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.9) 0%, rgba(0, 240, 255, 0.55) 25%, transparent 65%),
              linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.95) 45%, rgba(0, 240, 255, 0.85) 50%, transparent 56%);
  pointer-events: none;
  mix-blend-mode: color-dodge;
  animation: lightningStrikeFlash 2.4s ease-in-out infinite;
}
@keyframes lightningStrikeFlash {
  0%, 86%, 92%, 100% {
    opacity: 0;
  }
  87% {
    opacity: 0.95;
    filter: brightness(2);
  }
  89% {
    opacity: 0.2;
  }
  91% {
    opacity: 1;
    filter: brightness(2.6) contrast(1.6);
  }
}



/* Extra Swatches for New Luxury Accents */
.swatch.acc-celestial_gold { background: linear-gradient(135deg, #fef08a, #eab308, #b45309); background-size: 200% 200%; animation: liquidGradientShift 3.5s ease infinite alternate; }
.swatch.acc-cyber_inferno { background: linear-gradient(135deg, #ff007f, #f97316, #ef4444); background-size: 200% 200%; animation: liquidGradientShift 3s ease infinite alternate; }
.swatch.acc-void_crystal { background: linear-gradient(135deg, #38bdf8, #818cf8, #c084fc); background-size: 200% 200%; animation: liquidGradientShift 4s ease infinite alternate; }
.swatch.acc-ice_fire { background: linear-gradient(135deg, #06b6d4, #ef4444); }
.swatch.acc-sakura_dusk { background: linear-gradient(135deg, #f472b6, #818cf8); }
.swatch.acc-matrix_stream { background: linear-gradient(135deg, #10b981, #22c55e, #052e16); background-size: 200% 200%; animation: liquidGradientShift 3s ease infinite alternate; }
.swatch.acc-electric_storm { background: linear-gradient(135deg, #38bdf8, #818cf8, #0284c7); background-size: 200% 200%; animation: liquidGradientShift 2.5s ease infinite alternate; }

/* ==================== Banners: New Distinct Luxury Themes ==================== */
.profile-banner.banner-ice_glacier, .banner-preview-box.banner-ice_glacier, .banner-ice_glacier {
  background: radial-gradient(circle at 75% 25%, #bae6fd 0%, #38bdf8 30%, #0369a1 70%, #082f49 100%),
              repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0px, rgba(255, 255, 255, 0.08) 2px, transparent 2px, transparent 20px);
  background-size: 200% 200%;
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: inset 0 0 35px rgba(56, 189, 248, 0.45);
  animation: bannerAuroraDrift 6s ease-in-out infinite alternate;
}

.profile-banner.banner-deep_ocean, .banner-preview-box.banner-deep_ocean, .banner-deep_ocean {
  background: radial-gradient(circle at 30% 80%, #06b6d4 0%, #0f766e 40%, #115e59 70%, #042f2e 100%),
              linear-gradient(135deg, #083344 0%, #0f172a 100%);
  background-size: 200% 200%;
  border-color: rgba(20, 184, 166, 0.65);
  box-shadow: inset 0 0 35px rgba(6, 182, 212, 0.35);
  animation: bannerCyberShift 6s ease-in-out infinite alternate;
}

.profile-banner.banner-synthwave_retro, .banner-preview-box.banner-synthwave_retro, .banner-synthwave_retro {
  background: linear-gradient(0deg, rgba(244, 63, 94, 0.8) 0%, rgba(139, 92, 246, 0.7) 50%, #0f0728 100%),
              repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 24px);
  background-size: 200% 200%;
  border-color: rgba(244, 63, 94, 0.65);
  box-shadow: inset 0 0 35px rgba(244, 63, 94, 0.35);
  animation: bannerFireWave 5s ease-in-out infinite alternate;
}

.profile-banner.banner-black_hole, .banner-preview-box.banner-black_hole, .banner-black_hole {
  background: radial-gradient(circle at 50% 50%, #000000 0%, #0f0728 40%, #7c3aed 70%, #000000 100%);
  background-size: 200% 200%;
  border-color: rgba(139, 92, 246, 0.7);
  box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.95), 0 0 25px rgba(139, 92, 246, 0.3);
  animation: bannerAuroraDrift 7s ease-in-out infinite alternate;
}

.profile-banner.banner-sakura_bloom, .banner-preview-box.banner-sakura_bloom, .banner-sakura_bloom {
  background: radial-gradient(circle at 70% 30%, #fbcfe8 0%, #f472b6 35%, #be185d 70%, #500724 100%);
  background-size: 200% 200%;
  border-color: rgba(244, 114, 182, 0.75);
  box-shadow: inset 0 0 35px rgba(244, 114, 182, 0.4);
  animation: bannerAuroraDrift 5s ease-in-out infinite alternate;
}

.profile-banner.banner-toxic_hazard, .banner-preview-box.banner-toxic_hazard, .banner-toxic_hazard {
  background: radial-gradient(circle at 25% 75%, #4ade80 0%, #16a34a 35%, #14532d 70%, #052e16 100%),
              repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.4) 0px, rgba(0, 0, 0, 0.4) 10px, transparent 10px, transparent 20px);
  background-size: 200% 200%;
  border-color: rgba(74, 222, 128, 0.75);
  box-shadow: inset 0 0 35px rgba(74, 222, 128, 0.4);
  animation: bannerMatrixScan 3.5s linear infinite;
}

.profile-banner.banner-emerald_crystal, .banner-preview-box.banner-emerald_crystal, .banner-emerald_crystal {
  background: radial-gradient(circle at 50% 20%, #a7f3d0 0%, #10b981 40%, #047857 70%, #064e3b 100%);
  background-size: 200% 200%;
  border-color: rgba(16, 185, 129, 0.75);
  box-shadow: inset 0 0 35px rgba(16, 185, 129, 0.45), 0 0 20px rgba(16, 185, 129, 0.25);
  animation: bannerFireWave 4.5s ease-in-out infinite alternate;
}

.profile-banner.banner-desert_dunes, .banner-preview-box.banner-desert_dunes, .banner-desert_dunes {
  background: radial-gradient(circle at 80% 80%, #fef08a 0%, #f59e0b 35%, #b45309 70%, #451a03 100%);
  background-size: 200% 200%;
  border-color: rgba(245, 158, 11, 0.7);
  box-shadow: inset 0 0 35px rgba(245, 158, 11, 0.4);
  animation: bannerAuroraDrift 6s ease-in-out infinite alternate;
}

.profile-banner.banner-supernova_cosmic, .banner-preview-box.banner-supernova_cosmic, .banner-supernova_cosmic {
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #38bdf8 25%, #ec4899 55%, #1e1b4b 100%);
  background-size: 200% 200%;
  border-color: rgba(56, 189, 248, 0.8);
  box-shadow: inset 0 0 45px rgba(236, 72, 153, 0.5), 0 0 30px rgba(56, 189, 248, 0.35);
  animation: bannerFireWave 3.5s ease-in-out infinite alternate;
}

/* ==================== Square Bundles & Categories Showcase ==================== */
.bundle-type-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.bundle-type-btn {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #f1f5f9;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.22s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.bundle-type-btn:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.7);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}
.bundle-type-btn.active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #ffd700;
  color: #000;
  font-weight: 900;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.55);
}

/* Master Square Bundle Card */
.bundle-box-square {
  position: relative;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.98), rgba(8, 12, 22, 0.99));
  border-radius: 20px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.bundle-box-square:hover {
  transform: translateY(-4px);
}
.bundle-box-square.all-owned {
  border-color: rgba(34, 197, 94, 0.6) !important;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.2) !important;
}

/* 5 Distinct Bundle Themes - Each completely unique */
.bundle-theme-dragon {
  border: 1px solid rgba(249, 115, 22, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 25px rgba(239, 68, 68, 0.1);
}
.bundle-theme-dragon:hover {
  border-color: #f97316;
  box-shadow: 0 16px 45px rgba(249, 115, 22, 0.3), 0 0 30px rgba(239, 68, 68, 0.2);
}

.bundle-theme-cyber {
  border: 1px solid rgba(0, 240, 255, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 25px rgba(0, 240, 255, 0.1);
}
.bundle-theme-cyber:hover {
  border-color: #00f0ff;
  box-shadow: 0 16px 45px rgba(0, 240, 255, 0.35), 0 0 30px rgba(255, 0, 127, 0.2);
}

.bundle-theme-royal {
  border: 1px solid rgba(251, 191, 36, 0.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 25px rgba(251, 191, 36, 0.12);
}
.bundle-theme-royal:hover {
  border-color: #ffd700;
  box-shadow: 0 16px 45px rgba(251, 191, 36, 0.4), 0 0 30px rgba(234, 179, 8, 0.25);
}

.bundle-theme-void {
  border: 1px solid rgba(168, 85, 247, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 25px rgba(168, 85, 247, 0.12);
}
.bundle-theme-void:hover {
  border-color: #a855f7;
  box-shadow: 0 16px 45px rgba(168, 85, 247, 0.35), 0 0 30px rgba(124, 58, 237, 0.2);
}

.bundle-theme-storm {
  border: 1px solid rgba(56, 189, 248, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 25px rgba(56, 189, 248, 0.12);
}
.bundle-theme-storm:hover {
  border-color: #38bdf8;
  box-shadow: 0 16px 45px rgba(56, 189, 248, 0.35), 0 0 30px rgba(37, 99, 235, 0.2);
}

/* Bundle Header with Live Banner */
.bundle-square-header {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}
.bundle-square-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 12, 22, 0.9) 0%, rgba(8, 12, 22, 0.35) 100%);
}
.bundle-square-title {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 20px rgba(245, 158, 11, 0.6);
  letter-spacing: 0.5px;
}

.bundle-header-floating-tags {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bundle-type-badge-chip {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fef08a;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.bundle-discount-ribbon-chip {
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 99px;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.45);
}

/* 5-in-1 Compact Stacked Item Rows */
.bundle-items-stack {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: rgba(10, 16, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 10px;
}

.bundle-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 6px 10px;
  transition: all 0.2s ease;
}
.bundle-item-row:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(245, 158, 11, 0.35);
  transform: translateX(-2px);
}

/* Small, uniform thumbnail image box for each item */
.bundle-thumb-box {
  width: 44px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.bundle-thumb-banner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.bundle-item-text-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.bundle-item-kind-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.bundle-item-name-text {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.bundle-sound-preview-btn {
  background: linear-gradient(135deg, rgba(56, 224, 208, 0.22), rgba(59, 130, 246, 0.22));
  border: 1px solid #38e0d0;
  color: #38e0d0;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.bundle-sound-preview-btn:hover {
  background: #38e0d0;
  color: #000;
  box-shadow: 0 0 12px rgba(56, 224, 208, 0.6);
  transform: scale(1.04);
}

.bundle-square-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.bundle-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* Modern Store Cards Aesthetic */
.item {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)), var(--panel);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
}
.item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--me) 45%, var(--edge));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.item.eq {
  border-color: var(--grn);
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.08), var(--panel));
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.15);
}

/* Journey to 1000 Banner Styling */
.journey-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.journey-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(234, 179, 8, 0.2);
}

/* ==================== VIP Lounge & Header Indicators ==================== */
@keyframes vipCrownBounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-3px) rotate(-6deg);
  }
  75% {
    transform: translateY(-2px) rotate(6deg);
  }
}

.vip-status-chip {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.28), rgba(249, 115, 22, 0.2)) !important;
  border: 1px solid rgba(255, 215, 0, 0.75) !important;
  color: #ffd700 !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.35) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 99px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vip-status-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(255, 215, 0, 0.55) !important;
}

.vip-template-item {
  border-color: rgba(234, 179, 8, 0.5) !important;
  background: linear-gradient(145deg, rgba(234, 179, 8, 0.08), var(--panel)) !important;
}
.vip-template-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.vip-template-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold) !important;
  box-shadow: 0 6px 18px rgba(234, 179, 8, 0.25);
}
.vip-template-card.equipped {
  border-color: var(--gold) !important;
  box-shadow: 0 0 14px rgba(234, 179, 8, 0.3);
}

.side{background:linear-gradient(180deg,rgba(20,29,43,.96),rgba(9,14,23,.94));border-left-color:rgba(255,194,75,.16);box-shadow:-14px 0 40px rgba(0,0,0,.16)}
.brand-mark{box-shadow:0 0 24px color-mix(in oklab,var(--me) 22%,transparent);border-radius:12px}
.nav a{min-height:42px;font-weight:600}
.nav a.on{box-shadow:inset -3px 0 0 var(--me),0 5px 18px color-mix(in oklab,var(--me) 8%,transparent)}
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-8px;border-radius:24px;background:radial-gradient(ellipse at 8% 0%,color-mix(in oklab,var(--gold) 9%,transparent),transparent 58%);pointer-events:none;z-index:-1}
.journey-card{background:linear-gradient(135deg,rgba(255,194,75,.09),rgba(22,33,47,.96) 58%,rgba(124,92,255,.07))!important}
.item:focus-within,.bundle-box-square:focus-within{outline:2px solid color-mix(in oklab,var(--gold) 75%,transparent);outline-offset:2px}
@media(max-width:900px){.bottom{border-top-color:color-mix(in oklab,var(--gold) 22%,var(--edge));box-shadow:0 -12px 32px rgba(0,0,0,.24)}.bottom a,.bottom .mbtn{min-width:60px;min-height:48px}}
@media(prefers-reduced-motion:reduce){.journey-card,.nav a,.item{transition:none!important}.journey-card:hover,.item:hover{transform:none}}
.discord-sync-avatar-btn {
  transition: transform 0.18s ease, filter 0.18s ease;
}
.discord-sync-avatar-btn:hover {
  transform: translateX(-50%) scale(1.06) !important;
  filter: brightness(1.15);
}


/* O.P Server premium banner library: one scene per theme, with gentle image drift. */
.profile-banner[class*="banner-"]:not(.banner-none):not(.banner-custom),
.banner-preview-box[class*="banner-"]:not(.banner-none):not(.banner-custom) {
  background-repeat: no-repeat !important;
  background-size: 115% auto !important;
  background-position: 35% 50%;
  animation: bannerPhotoDrift 24s ease-in-out infinite alternate !important;
}
@keyframes bannerPhotoDrift {
  from { background-position: 35% 50%; }
  to { background-position: 65% 50%; }
}

.profile-banner.banner-cyber, .banner-preview-box.banner-cyber { background-image: linear-gradient(180deg,rgba(3,8,18,.04),rgba(3,8,18,.24)),url('/assets/store/banners/cyber.webp') !important; }
.profile-banner.banner-galaxy, .banner-preview-box.banner-galaxy { background-image: linear-gradient(180deg,rgba(3,6,16,.03),rgba(3,6,16,.20)),url('/assets/store/banners/galaxy.webp') !important; }
.profile-banner.banner-royal, .banner-preview-box.banner-royal { background-image: linear-gradient(180deg,rgba(8,6,2,.02),rgba(8,6,2,.23)),url('/assets/store/banners/royal.webp') !important; }
.profile-banner.banner-fire, .banner-preview-box.banner-fire { background-image: linear-gradient(180deg,rgba(10,3,1,.04),rgba(10,3,1,.24)),url('/assets/store/banners/fire.webp') !important; }
.profile-banner.banner-matrix, .banner-preview-box.banner-matrix { background-image: linear-gradient(180deg,rgba(0,8,4,.03),rgba(0,8,4,.24)),url('/assets/store/banners/matrix.webp') !important; }
.profile-banner.banner-aurora, .banner-preview-box.banner-aurora { background-image: linear-gradient(180deg,rgba(1,7,12,.03),rgba(1,7,12,.22)),url('/assets/store/banners/aurora.webp') !important; }
.profile-banner.banner-sunset, .banner-preview-box.banner-sunset { background-image: linear-gradient(180deg,rgba(9,3,14,.03),rgba(9,3,14,.24)),url('/assets/store/banners/sunset.webp') !important; }
.profile-banner.banner-blood, .banner-preview-box.banner-blood { background-image: linear-gradient(180deg,rgba(12,2,3,.03),rgba(12,2,3,.24)),url('/assets/store/banners/blood.webp') !important; }
.profile-banner.banner-dragon_fury, .banner-preview-box.banner-dragon_fury,
.profile-banner.banner-dragon_breath, .banner-preview-box.banner-dragon_breath { background-image: linear-gradient(180deg,rgba(10,3,1,.04),rgba(10,3,1,.24)),url('/assets/store/banners/dragon_fury.webp') !important; }
.profile-banner.banner-cyber_grid, .banner-preview-box.banner-cyber_grid { background-image: linear-gradient(180deg,rgba(3,8,18,.04),rgba(3,8,18,.25)),url('/assets/store/banners/cyber_grid.webp') !important; }
.profile-banner.banner-ice_glacier, .banner-preview-box.banner-ice_glacier { background-image: linear-gradient(180deg,rgba(2,8,16,.02),rgba(2,8,16,.22)),url('/assets/store/banners/ice_glacier.webp') !important; }
.profile-banner.banner-deep_ocean, .banner-preview-box.banner-deep_ocean { background-image: linear-gradient(180deg,rgba(0,8,15,.03),rgba(0,8,15,.25)),url('/assets/store/banners/deep_ocean.webp') !important; }
.profile-banner.banner-synthwave_retro, .banner-preview-box.banner-synthwave_retro { background-image: linear-gradient(180deg,rgba(8,4,15,.02),rgba(8,4,15,.22)),url('/assets/store/banners/synthwave_retro.webp') !important; }
.profile-banner.banner-void_rift, .banner-preview-box.banner-void_rift { background-image: linear-gradient(180deg,rgba(4,4,15,.02),rgba(4,4,15,.24)),url('/assets/store/banners/void_rift.webp') !important; }
.profile-banner.banner-black_hole, .banner-preview-box.banner-black_hole,
.profile-banner.banner-dark_matter, .banner-preview-box.banner-dark_matter { background-image: linear-gradient(180deg,rgba(1,2,6,.02),rgba(1,2,6,.24)),url('/assets/store/banners/black_hole.webp') !important; }
.profile-banner.banner-sakura_bloom, .banner-preview-box.banner-sakura_bloom { background-image: linear-gradient(180deg,rgba(7,3,12,.02),rgba(7,3,12,.23)),url('/assets/store/banners/sakura_bloom.webp') !important; }
.profile-banner.banner-golden_heavens, .banner-preview-box.banner-golden_heavens { background-image: linear-gradient(180deg,rgba(8,6,2,.02),rgba(8,6,2,.23)),url('/assets/store/banners/golden_heavens.webp') !important; }
.profile-banner.banner-toxic_hazard, .banner-preview-box.banner-toxic_hazard { background-image: linear-gradient(180deg,rgba(0,8,4,.02),rgba(0,8,4,.24)),url('/assets/store/banners/toxic_hazard.webp') !important; }
.profile-banner.banner-glitch_dimension, .banner-preview-box.banner-glitch_dimension { background-image: linear-gradient(180deg,rgba(2,3,10,.02),rgba(2,3,10,.24)),url('/assets/store/banners/glitch_dimension.webp') !important; }
.profile-banner.banner-storm_surge, .banner-preview-box.banner-storm_surge,
.profile-banner.banner-lightning_strike, .banner-preview-box.banner-lightning_strike { background-image: linear-gradient(180deg,rgba(2,5,14,.02),rgba(2,5,14,.24)),url('/assets/store/banners/storm_surge.webp') !important; }
.profile-banner.banner-emerald_crystal, .banner-preview-box.banner-emerald_crystal { background-image: linear-gradient(180deg,rgba(0,8,5,.02),rgba(0,8,5,.24)),url('/assets/store/banners/emerald_crystal.webp') !important; }
.profile-banner.banner-desert_dunes, .banner-preview-box.banner-desert_dunes { background-image: linear-gradient(180deg,rgba(9,6,4,.02),rgba(9,6,4,.24)),url('/assets/store/banners/desert_dunes.webp') !important; }
.profile-banner.banner-supernova_cosmic, .banner-preview-box.banner-supernova_cosmic,
.profile-banner.banner-celestial_nebula, .banner-preview-box.banner-celestial_nebula { background-image: linear-gradient(180deg,rgba(2,4,12,.02),rgba(2,4,12,.22)),url('/assets/store/banners/supernova_cosmic.webp') !important; }
.profile-banner.banner-matrix_code, .banner-preview-box.banner-matrix_code { background-image: linear-gradient(180deg,rgba(0,8,4,.03),rgba(0,8,4,.24)),url('/assets/store/banners/matrix.webp') !important; }
.profile-banner.banner-aurora_borealis, .banner-preview-box.banner-aurora_borealis { background-image: linear-gradient(180deg,rgba(1,7,12,.03),rgba(1,7,12,.22)),url('/assets/store/banners/aurora.webp') !important; }
.profile-banner.banner-blood_abyss, .banner-preview-box.banner-blood_abyss { background-image: linear-gradient(180deg,rgba(12,2,3,.03),rgba(12,2,3,.24)),url('/assets/store/banners/blood.webp') !important; }
.profile-banner.banner-phoenix_blaze, .banner-preview-box.banner-phoenix_blaze { background-image: linear-gradient(180deg,rgba(10,3,1,.04),rgba(10,3,1,.24)),url('/assets/store/banners/fire.webp') !important; }
.profile-banner.banner-tokyo_neon, .banner-preview-box.banner-tokyo_neon { background-image: linear-gradient(180deg,rgba(9,3,14,.03),rgba(9,3,14,.24)),url('/assets/store/banners/sunset.webp') !important; }

@media (prefers-reduced-motion: reduce) {
  .profile-banner[class*="banner-"]:not(.banner-none):not(.banner-custom),
  .banner-preview-box[class*="banner-"]:not(.banner-none):not(.banner-custom) {
    animation: none !important;
    background-position: 50% 50% !important;
  }
  .profile-banner[class*="banner-"]:not(.banner-none):not(.banner-custom)::before,
  .banner-preview-box[class*="banner-"]:not(.banner-none):not(.banner-custom) .banner-box-overlay::before {
    animation: none !important;
    transform: none !important;
  }
}


/* ===== VIP Lounge + non-question 1v1 mode ===== */
.vip-hub{display:grid;gap:18px}
.vip-hub-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(20px,4vw,34px);border:1px solid color-mix(in oklab,var(--gold) 45%,var(--edge));border-radius:20px;background:radial-gradient(ellipse at 92% 18%,rgba(255,207,92,.2),transparent 34%),radial-gradient(ellipse at 8% 100%,rgba(160,95,255,.17),transparent 42%),linear-gradient(135deg,#171321,#10131f 58%,#1d1726);box-shadow:0 18px 56px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.06)}
.vip-hub-copy{position:relative;z-index:1;max-width:760px}
.vip-kicker{font-size:10px;letter-spacing:.2em;font-weight:900;color:#ffe3a0}
.vip-hub-hero h3{margin:8px 0 4px;font-size:clamp(24px,3.4vw,36px);color:#fff}
.vip-hub-hero p{margin:0;color:#c9c4d0;line-height:1.7}
.vip-benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));gap:8px;margin-top:16px}
.vip-benefit-grid>div{display:grid;gap:4px;padding:11px 12px;border:1px solid rgba(255,225,161,.17);border-radius:12px;background:rgba(255,255,255,.035)}
.vip-benefit-grid b{font-size:13px;color:#ffe3a0}.vip-benefit-grid span{font-size:11.5px;color:#c8c3d0;line-height:1.45}
.vip-hub-seal{width:128px;height:128px;flex:0 0 128px;display:grid;place-content:center;text-align:center;border-radius:50%;border:1px solid rgba(255,224,150,.55);background:radial-gradient(circle at 35% 28%,#fff5c3 0,#f9cc69 10%,#a96924 34%,#291b27 68%);box-shadow:0 0 0 7px rgba(255,220,137,.06),0 0 36px rgba(255,193,74,.28);color:#21141b;font-size:55px;font-weight:900;animation:vipSealGlow 5s ease-in-out infinite alternate}
.vip-hub-seal span{font-family:var(--display);font-size:13px;letter-spacing:.2em;color:#fff2c4;text-shadow:0 2px 6px #311c24}
@keyframes vipSealGlow{from{filter:saturate(.92);transform:rotate(-2deg)}to{filter:saturate(1.15);transform:rotate(2deg)}}
.vip-banner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.vip-banner-card{display:grid;gap:10px;min-width:0;padding:10px;border:1px solid var(--edge);border-radius:14px;background:linear-gradient(145deg,color-mix(in oklab,var(--panel2) 95%,transparent),color-mix(in oklab,var(--panel) 88%,transparent));transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.vip-banner-card:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--gold) 58%,var(--edge));box-shadow:0 10px 28px rgba(0,0,0,.22)}
.vip-hub-note{padding:10px 13px;border-inline-start:3px solid color-mix(in oklab,var(--gold) 70%,transparent);background:color-mix(in oklab,var(--gold) 6%,transparent);border-radius:8px;font-size:12px;line-height:1.65}
.rps-mini-card{display:flex;flex-direction:column;align-items:stretch;gap:7px;text-align:right;padding:14px;border:1px solid color-mix(in oklab,var(--me) 28%,var(--edge));background:linear-gradient(150deg,color-mix(in oklab,var(--me) 8%,var(--panel)),var(--panel2));border-radius:var(--r);color:var(--text);cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.rps-mini-card:hover{transform:translateY(-3px);border-color:var(--me);box-shadow:0 12px 30px color-mix(in oklab,var(--me) 14%,transparent)}
.rps-mini-art{height:92px;display:flex;align-items:center;justify-content:center;gap:clamp(14px,4vw,32px);margin-bottom:4px;border:1px solid color-mix(in oklab,var(--me) 22%,var(--edge));border-radius:12px;background:radial-gradient(ellipse at 50% 110%,color-mix(in oklab,var(--me) 23%,transparent),transparent 62%),linear-gradient(145deg,#0c1222,#161328);font-size:34px}
.rps-mini-art span{animation:floaty 3.6s ease-in-out infinite}.rps-mini-art span:nth-child(2){animation-delay:.35s}.rps-mini-art span:nth-child(3){animation-delay:.7s}
.rps-home-section{padding-top:2px}
.rps-duel-mode{width:100%;min-width:0}
.rps-pips{margin:14px auto 0;justify-content:center}
.pips i.draw{background:var(--gold);box-shadow:0 0 9px color-mix(in oklab,var(--gold) 60%,transparent)}
.rps-stage-prompt{text-align:center;padding:22px 10px 10px}
.rps-stage-prompt h2{font-size:clamp(23px,4vw,32px);margin:12px 0 4px;color:#fff}
.rps-stage-prompt p{margin:0;color:var(--fog);font-size:13px}
.rps-moves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:700px;margin:4px auto 0;width:100%}
.rps-move-btn{min-height:146px;display:grid;place-items:center;align-content:center;gap:5px;padding:12px 8px;border:1px solid color-mix(in oklab,var(--me) 35%,var(--edge));border-radius:16px;background:linear-gradient(155deg,color-mix(in oklab,var(--me) 10%,var(--panel2)),var(--panel));color:var(--text);cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.rps-move-btn>span{font-size:clamp(35px,8vw,54px);line-height:1.05;filter:drop-shadow(0 5px 10px rgba(0,0,0,.35))}
.rps-move-btn>b{font-size:15px}.rps-move-btn>small{font-size:11px;color:var(--fog)}
.rps-move-btn:hover:not(:disabled){transform:translateY(-4px) scale(1.015);border-color:var(--me);box-shadow:0 10px 24px color-mix(in oklab,var(--me) 18%,transparent)}
.rps-move-btn.picked{border-color:var(--gold);background:linear-gradient(145deg,color-mix(in oklab,var(--gold) 18%,var(--panel)),var(--panel2));box-shadow:0 0 18px color-mix(in oklab,var(--gold) 22%,transparent)}
.rps-move-btn:disabled{cursor:default;opacity:.75}
.rps-locked-note{text-align:center;font-size:12px;padding:10px 4px 2px}
.rps-ready{min-height:210px;display:grid;place-content:center;justify-items:center;gap:9px;text-align:center;color:var(--fog)}
.rps-ready>span{font-size:46px;filter:drop-shadow(0 0 16px color-mix(in oklab,var(--me) 45%,transparent))}
.rps-ready>b{font-size:20px;color:var(--text)}.rps-ready>small{font-size:12px}
.rps-result{min-height:210px;display:grid;place-content:center;justify-items:center;gap:9px;text-align:center;padding:22px 8px}
.rps-result-icon{font-size:42px;animation:rise .35s ease both}
.rps-result h2{font-size:clamp(19px,3vw,27px);margin:0}.rps-result h2.win{color:var(--live)}.rps-result h2.draw{color:var(--gold)}.rps-result h2.loss{color:var(--danger)}
.rps-reveal-picks{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.rps-reveal-picks>div{display:grid;gap:5px;min-width:120px;padding:11px 15px;border:1px solid var(--edge);border-radius:12px;background:var(--panel2)}
.rps-reveal-picks small{color:var(--fog);font-size:11px}.rps-reveal-picks b{font-size:15px}.rps-reveal-picks>span{font-size:11px;font-weight:900;color:var(--gold)}
@media(max-width:700px){.vip-hub-hero{align-items:flex-start}.vip-hub-seal{width:82px;height:82px;flex-basis:82px;font-size:36px}.vip-hub-seal span{font-size:10px}.vip-benefit-grid{grid-template-columns:1fr}.rps-moves{gap:7px}.rps-move-btn{min-height:122px;padding:9px 4px}.rps-move-btn>b{font-size:13px}}
@media(max-width:420px){.vip-hub-seal{display:none}.rps-move-btn>span{font-size:35px}.rps-move-btn>small{font-size:10px}}
@media(prefers-reduced-motion:reduce){.vip-hub-seal,.rps-mini-art span{animation:none!important}.vip-banner-card,.rps-mini-card,.rps-move-btn{transition:none!important}.vip-banner-card:hover,.rps-mini-card:hover,.rps-move-btn:hover{transform:none!important}}