:root{
  --bg:#0b0b0d;
  --panel:#0f1113;
  --muted:#9aa3ac;
  --accent:#ff4655; /* Valorant red */
  --accent-2:#ff7b86;
  --glass: rgba(255,255,255,0.03);
  --glow: 0 8px 40px rgba(255,70,85,0.14);
  --text:#e6e9eb;
}
/* Base page */
body.valorant{
  background: linear-gradient(180deg, #0a0e27 0%, #1a1f3a 50%, #0f1929 100%);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}
body.valorant::before{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 15% 15%, rgba(255,100,150,0.35) 0%, transparent 30%),
    radial-gradient(circle at 85% 25%, rgba(255,150,200,0.3) 0%, transparent 35%),
    radial-gradient(circle at 50% 75%, rgba(200,100,180,0.25) 0%, transparent 40%),
    radial-gradient(circle at 20% 60%, rgba(255,120,180,0.2) 0%, transparent 30%);
  animation: bgShift 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
body.valorant::after{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 75% 50%, rgba(255,180,200,0.2) 0%, transparent 30%),
    radial-gradient(circle at 30% 80%, rgba(255,160,180,0.18) 0%, transparent 35%);
  animation: bgFloat 30s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes bgShift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(20px, -30px); }
  50% { transform: translate(-10px, 20px); }
  75% { transform: translate(30px, 10px); }
}
@keyframes bgFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-15px, -15px) scale(1.05); }
}
main{ 
  max-width:1200px; 
  margin:40px auto; 
  padding:48px 32px; 
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%); 
  border-radius:20px; 
  border:1.5px solid rgba(255,70,85,0.2); 
  box-shadow: 
    0 30px 80px rgba(0,0,0,0.8),
    inset 0 1px 20px rgba(255,255,255,0.08),
    0 0 60px rgba(255,70,85,0.1);
  backdrop-filter: blur(20px);
  animation: slideUp 0.7s cubic-bezier(0.2,0.9,0.2,1);
  position: relative;
  overflow: hidden;
  z-index: 10;
}
main::before{
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,70,85,0.08) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
main::after{
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(102,126,234,0.06) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
@keyframes slideUp { 
  from { 
    opacity: 0; 
    transform: translateY(20px); 
    filter: blur(10px);
  } 
  to { 
    opacity: 1; 
    transform: translateY(0); 
    filter: blur(0);
  } 
}
h1{ 
  font-size:2.8rem; 
  font-weight:900; 
  letter-spacing:-1.5px; 
  color: #fff; 
  margin-bottom:16px; 
  background: linear-gradient(135deg, #fff 0%, #ffd6d8 100%); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 20px rgba(255,70,85,0.2);
  position: relative;
  z-index: 10;
}
h2{ color:var(--accent-2); font-weight:800; font-size: 1.8rem; margin-bottom:12px; letter-spacing: -0.5px; }
p{ color:var(--muted); font-size: 1.05rem; }

/* Valorant-style main cake highlight */
.valorant-main{ display:block; padding:22px; border-radius:12px; background: linear-gradient(90deg, rgba(255,70,85,0.06), rgba(0,0,0,0.15)); border:1px solid rgba(255,70,85,0.18); box-shadow: var(--glow); margin:22px 0; position:relative; overflow:hidden; }
.valorant-main::after{ content:''; position:absolute; right:-120px; top:-80px; width:360px; height:360px; transform:rotate(25deg); background: linear-gradient(180deg, rgba(255,70,85,0.06), transparent); filter: blur(20px); }
.valorant-main .vm-title{ color:#fff; font-size:1.4rem; font-weight:900; display:flex; align-items:center; gap:10px; }
.valorant-main .vm-title .badge{ background:var(--accent); color:white; padding:6px 10px; border-radius:8px; font-weight:800; box-shadow:0 6px 20px rgba(255,70,85,0.18); }
.valorant-main .vm-desc{ margin-top:10px; color: #ffd6d8; font-weight:700; opacity:0.95; font-size:1rem; }

/* Buttons / Links */
.menu-link{ background:linear-gradient(135deg, var(--accent) 0%, #ff7b86 100%); color:white !important; font-weight:700; border-radius:12px; padding:14px 28px; display:inline-block; text-decoration:none; box-shadow:0 12px 40px rgba(255,70,85,0.15); border:1px solid rgba(255,255,255,0.1); transition: all 0.3s cubic-bezier(0.2,0.9,0.2,1); position: relative; overflow: hidden; }
.menu-link::before{ content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0)); opacity:0; transition: opacity 0.3s; }
.menu-link:hover{ transform:translateY(-6px) scale(1.05); box-shadow:0 20px 60px rgba(255,70,85,0.25); }  
.menu-link:hover::before{ opacity:1; }

/* List items */
ul{ list-style:none; margin: 24px 0; }
li{ background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005)); border:1px solid rgba(255,70,85,0.1); padding:18px 22px; margin:14px 0; border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,0.5); transition: all 0.3s cubic-bezier(0.2,0.9,0.2,1); cursor: pointer; }
li:hover{ transform: translateX(8px); box-shadow:0 15px 50px rgba(255,70,85,0.12); border-color: rgba(255,70,85,0.2); }
.definition{ color:var(--muted); font-size: 0.95rem; margin-top: 12px; opacity: 0.9; }

/* Language buttons */
.lang-btn{ background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,0.04); padding:8px 12px; border-radius:8px; font-weight:700; }
.lang-btn.active{ background:var(--accent); color:white; box-shadow:0 8px 30px rgba(255,70,85,0.12); border-color:rgba(255,70,85,0.6); }

/* Footer */
.credits{ color:var(--muted); background:transparent; border:none; padding:8px 0; }

/* Responsive */
@media (max-width:720px){ h1{ font-size:1.8rem } .valorant-main .vm-title{ font-size:1rem } }

/* Extra flair */
.hero-title{ font-size:2.6rem; font-weight:900; background:linear-gradient(90deg,#fff 0%, #ffd6d8 30%, #ffb0b3 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.valorant-panel{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:44px; border-radius:14px; box-shadow: 0 30px 80px rgba(0,0,0,0.7); }
.accent-line{ width:80px; height:5px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:6px; display:block; margin:18px 0 28px; box-shadow:0 10px 30px rgba(255,70,85,0.15); }
.card-ghost{ background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:10px; padding:16px; border:1px solid rgba(255,255,255,0.03); }
.vm-desc small{ display:block; color:var(--muted); font-weight:600; margin-top:6px; }

/* Image treatment */
img{ max-width:100%; height:auto; display:block; }
figure img{ border-radius:12px; border:1px solid rgba(255,255,255,0.04); }

/* subtle floating animation */
@keyframes floaty { 0%{ transform: translateY(0);}50%{ transform: translateY(-6px);}100%{ transform: translateY(0);} }
.valorant-main{ animation: floaty 6s ease-in-out infinite; }

/* small utility */
.muted{ color:var(--muted); }

/* Navigation card grid (index) */
.nav-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:24px; }
.center-stage{ margin-top:24px; display:flex; justify-content:center; align-items:center; }
.stage-track{ display:flex; gap:28px; align-items:end; width:100%; max-width:1100px; justify-content:center; }
.stage-item{ width:180px; transition: transform .5s cubic-bezier(.2,.9,.2,1), opacity .5s, filter .5s; transform-origin:center bottom; }
.stage-item.left2{ transform: translateY(12px) scale(.78); opacity:.6; filter:blur(0.6px); }
.stage-item.left1{ transform: translateY(6px) scale(.88); opacity:.85; }
.stage-item.center{ transform: translateY(0) scale(1.18); width:360px; z-index:50; }
.stage-item.right1{ transform: translateY(6px) scale(.88); opacity:.88; }
.stage-item.right2{ transform: translateY(12px) scale(.78); opacity:.6; }
.stage-item .card-icon{ width:64px; height:64px; font-size:1.8rem; }
.stage-item.center .card-icon{ width:84px; height:84px; font-size:2.4rem; }
.stage-item.center .card-title{ font-size:1.4rem; }
.stage-item .meta{ display:none; }

.site-card{ display:flex; flex-direction:column; gap:8px; padding:18px; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03); text-decoration:none; color:inherit; transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s; }
.site-card:hover{ transform:translateY(-10px) scale(1.02); box-shadow:0 30px 90px rgba(255,70,85,0.12); }
.card-head{ display:flex; align-items:center; gap:14px; }
.card-icon{ width:56px; height:56px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#0b0b0d; font-weight:900; box-shadow:0 10px 30px rgba(255,70,85,0.12); }
.card-title{ font-weight:900; font-size:1.15rem; }
.card-desc{ color:var(--muted); font-size:0.95rem; margin-top:6px; }
.site-card .meta{ display:flex; gap:8px; align-items:center; margin-top:8px; }
.chip{ font-size:0.8rem; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.02); color:var(--muted); }

/* Focused / transition styles when a card moves to center */
.site-card--focus{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(1); width:min(760px,92%); z-index:2000; border-radius:14px; box-shadow:0 60px 160px rgba(255,70,85,0.18); transition: transform 560ms cubic-bezier(.2,.9,.2,1), width 560ms, height 560ms, box-shadow 360ms; }
.site-card--focus.shrink{ transform: translate(-50%,-50%) scale(0.9); opacity:0.98; }
.site-card--focus .card-desc{ color:#fff; }

/* Page entry when navigated from focused card */
.page-entry{ transform-origin:50% 50%; transform: scale(0.86); opacity:0; transition: transform 560ms cubic-bezier(.2,.9,.2,1), opacity 420ms; }
.page-entry.entered{ transform: scale(1); opacity:1; }

/* Dim background while focus animates */
.focus-dim{ position:fixed; inset:0; background:rgba(3,3,3,0.56); z-index:1500; opacity:0; transition:opacity .36s; }
.focus-dim.show{ opacity:1; }