/* SPA version — same look, single page, no effects */
:root{
  --brand: #ff0000;
  --brand-dark: #cc0000;
  --text: #eef2f7;
  --muted: #cbd5e1;
  --panel-radius: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.78)),
    url('https://i.imgur.com/YBYXHXd.jpeg') center/cover fixed no-repeat;
}
.page{ min-height:100dvh; display:flex; flex-direction:column; }
.site-header, .site-footer{
  max-width:1200px; width:100%; margin:0 auto; padding: 16px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; }
.cube{ width:18px; height:18px; background:#0ea5e9; transform:rotate(45deg); border-radius:3px;
  box-shadow: 0 6px 18px rgba(14,165,233,.45);
}
.brand-name{ font-weight:800; }
.status-chip{ display:inline-flex; align-items:center; gap:8px; background: rgba(2,8,23,.5); color:#cde1ff;
  padding:8px 12px; border-radius:999px; box-shadow: inset 0 0 0 1px rgba(99,102,241,.25); font-size:13px;
}
.status-chip.light{ background:#F2F4F5; color:#393B3D; box-shadow:none; }
.status-chip .dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.3); }

/* Toasts */
.toasts{ position: fixed; top: 12px; right: 12px; display: grid; gap: 8px; z-index: 40; pointer-events:none; }
.toast{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #dcf3ff;
  border-radius: 12px; padding: 10px 14px; box-shadow: 0 20px 40px rgba(0,0,0,.35); font-size: 14px;
  animation: slidein .4s ease, fadeout .4s ease 8s forwards;
}
@keyframes slidein{ from{ opacity:0; transform: translateY(-8px);} to{ opacity:1; transform:translateY(0);} }
@keyframes fadeout{ to{ opacity:0; transform: translateY(-4px);} }

/* Steps */
.step{ display:none; }
.step.active{ display:block; }

/* HERO */
.app.hero .hero-title{
  font-weight:800; text-align:center;
  font-size: clamp(40px, 6vw, 64px);
  margin: 32px 0 6px 0;
  text-shadow: 0 12px 34px rgba(0,0,0,.55);
}
.app.hero .hero-subtitle{
  text-align:center; font-size: clamp(16px, 2vw, 20px); color:#dbeafe; margin: 0 0 6px 0;
}
.app.hero .trust-row{ display:flex; justify-content:center; gap:12px; color:#dbeafe; margin-bottom: 12px; }
.app.hero .trust-row .sep{ opacity:.7; }

.server-grid{ max-width:1100px; margin:0 auto;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  justify-content:center;
  gap: 22px;
  padding: 8px 16px 20px;
}
.server-card{
  width:100%; max-width:none; min-height:180px; border-radius:22px; border:0; color:#fff; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  box-shadow: 0 24px 48px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.server-card .robux-icon{ width:40px; height:40px; object-fit:contain; filter: drop-shadow(0 8px 18px rgba(79,209,255,.45)); }
.server-card .server-name{ font-size:18px; font-weight:800; letter-spacing:.2px; }
.server-card .server-status{ font-size:12px; color:#a7f3d0; display:flex; align-items:center; gap:6px; }
.server-card .tiny-dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.25); }
.server-card:hover{ transform: translateY(-2px); filter:saturate(1.05); box-shadow:0 30px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12); }

.server-card.red{ background: linear-gradient(135deg, #ef4444 0%, #b91c1c 55%, #8b1c1c 100%); }
.server-card.purple{ background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%); }
.server-card.indigo{ background: linear-gradient(135deg, #7c83ff 0%, #4338ca 60%, #2e1065 100%); }

/* PANELS */
.panel{
  width:min(720px, 92vw);
  margin: clamp(20px, 9vh, 64px) auto;
  background:#fff; color:#0b1220; border-radius: var(--panel-radius);
  box-shadow: 0 30px 60px rgba(0,0,0,.28);
  padding: clamp(16px, 3vw, 28px);
}
.panel.narrow{ width:min(540px, 92vw); text-align:center; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 12px; }
.rbx-logo{ height:46px; }
.panel-title{ font-size: clamp(24px, 3vw, 32px); font-weight:800; color:#1B1B1B; text-align:center; margin: 8px 0 6px 0; }
.panel-subtitle{ color:#393B3D; text-align:center; margin: 0 0 10px 0; }

.panel-form{ margin-top: 12px; }
.input-wrap{ position:relative; }
.input-wrap .input-icon{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#898989;
  background: currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><path d=\'M21 20l-5.2-5.2a7 7 0 10-1.4 1.4L20 21zM4 10a6 6 0 1112 0A6 6 0 014 10z\'/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><path d=\'M21 20l-5.2-5.2a7 7 0 10-1.4 1.4L20 21zM4 10a6 6 0 1112 0A6 6 0 014 10z\'/></svg>') center/contain no-repeat;
  pointer-events:none;
}
.input-wrap input{
  width:100%; height:56px; border-radius:14px; padding:0 14px 0 46px; font-size:16px; outline:none;
  background:#fff; color:#393B3D; border:2px solid #DEE1E3;
}
.input-wrap input:focus{ border-color:#00A2FF; box-shadow:0 0 0 4px rgba(0,162,255,.18); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:14px; cursor:pointer; }
.btn.primary{ width:100%; height:56px; margin-top:12px; background: var(--brand); color:#fff; font-weight:800; font-size:18px; box-shadow:0 10px 20px rgba(239,68,68,.25); }
.btn.primary:hover{ background: var(--brand-dark); }
.search-ico{ width:18px; height:18px; background:#fff; display:inline-block;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><circle cx=\'11\' cy=\'11\' r=\'8\'/><path d=\'m21 21-4.3-4.3\'/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><circle cx=\'11\' cy=\'11\' r=\'8\'/><path d=\'m21 21-4.3-4.3\'/></svg>') center/contain no-repeat;
}

.metrics{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top:18px; }
.metric{ background:#F8F9FA; border:1px solid #DEE1E3; border-radius:14px; padding:12px 10px; text-align:center; }
.metric .big{ font-size:20px; font-weight:800; color:#1B1B1B; }
.metric .small{ color:#6B7280; font-size:12px; }

.scan-logo img{ width:56px; height:56px; object-fit:contain; }
.progress{ height:10px; background:#e5e7eb; border-radius:999px; overflow:hidden; margin: 10px 0; }
.bar{ height:100%; width:0%; background: linear-gradient(90deg, #22d3ee, #3b82f6, #9333ea); background-size:200% 100%; animation: shift 3.5s linear infinite; }
@keyframes shift{ to{ background-position:200% 0; } }
.scan-label{ color:#393B3D; text-align:center; }

.amount-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; margin-top:12px; }
.amount-card{ background:#fff; border:2px solid #DEE1E3; border-radius:14px; padding:18px; text-align:center; cursor:pointer; }
.amount-card img{ width:32px; height:32px; }
.amount-card .value{ font-size:28px; font-weight:800; color:#1B1B1B; }
.amount-card .unit{ color:#898989; }
.amount-card:hover{ border-color:#ff0000; box-shadow: 0 16px 32px rgba(0,0,0,.12); }
.amount-card:hover .value{ color:#ff0000; }

.log{ list-style:none; padding:0; margin:12px auto 0; max-width:560px; text-align:left; color:#1B1B1B; }
.log li{ padding:8px 10px; background:#F8F9FA; border:1px solid #e5e7eb; border-radius:12px; margin-top:8px; font-size:14px; }

.verify-head{ text-align:center; }
.icon-circle{ width:96px; height:96px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#FFF4E5; margin: 0 auto 10px; }
.icon-circle img{ width:56px; height:56px; object-fit:contain; }
.notice{ background:#FFF4E5; border-left: 4px solid #FFB800; padding: 12px 14px; display:flex; align-items:flex-start; gap:10px; border-radius: 8px; }
.notice .shield{ width:20px; height:20px; margin-top:2px; background:#FFB800; -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><path d=\'M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\'/></svg>') center/contain no-repeat; }
.notice-copy{ color:#855C00; }
.notice-title{ font-weight:600; }
.notice-list{ margin:6px 0; padding-left: 18px; }
.notice-foot{ font-weight:600; }
.btn.xl{ height:56px; font-size:18px; font-weight:800; margin-top:14px; }
.arrow-ico{ width:18px; height:18px; background:#fff; display:inline-block;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><path d=\'M5 12h14\'/><path d=\'m12 5 7 7-7 7\'/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><path d=\'M5 12h14\'/><path d=\'m12 5 7 7-7 7\'/></svg>') center/contain no-repeat;
}

/* Responsive */
@media(max-width:1120px){
  .server-grid{ max-width:1100px; margin:0 auto; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .server-card{ width:320px; }
}
@media(max-width:760px){
  .server-grid{ max-width:1100px; margin:0 auto; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .server-card{ width: min(520px, 92vw); }
}

/* ===== Locker Modal ===== */
#lockerOverlay{
  position: fixed; inset: 0; display:none; place-items:center;
  background: rgba(0,0,0,.6);
  z-index: 1000;
}
#lockerOverlay.open{ display:grid; }
.locker{
  width:min(760px, 94vw);
  background:#ffffff; color:#0b1220; border-radius:18px;
  box-shadow: 0 35px 80px rgba(0,0,0,.45);
  overflow:hidden; position: relative;
}
.locker-close{
  position:absolute; top:8px; right:10px; width:38px; height:38px;
  border:0; border-radius:10px; cursor:pointer; background:#f1f5f9; color:#0b1220;
  font-size:26px; line-height:1;
}
.locker-top{ display:flex; align-items:center; justify-content:center; padding:16px; }
.locker-logo{ width:56px; height:56px; border-radius:12px; object-fit:cover; }
.locker-body{ padding: 12px 16px 18px; }
.locker-human{ display:flex; justify-content:center; margin-bottom:10px; }
.locker-text{ color:#393B3D; text-align:center; }
.locker-video{ display:flex; justify-content:center; margin-top:12px; }
.locker-video video{ width:100%; max-width:420px; border-radius:10px; }
.locker-arrow{ text-align:center; margin-top:16px; font-size:24px; color:#0b1220; animation: bounceDown 1.5s infinite; }
@keyframes bounceDown { 0%,100%{ transform: translateY(0); opacity:1;} 50%{ transform: translateY(10px); opacity:.6;} }
.locker-offers{ display:grid; gap:10px; margin-top:12px; }
.locker-offers .offer{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  background:#111827; color:#fff; padding:14px 16px; border-radius:12px; font-weight:700;
  border:1px solid #1f2937; width:100%; max-width:560px;
}
.locker-offers .offer:hover{ filter:brightness(1.08); }
.locker-wait{ text-align:center; color:#6b7280; margin-top:12px; }
.live-dots{ animation: liveDots 1.5s steps(3, end) infinite; overflow:hidden; display:inline-block; width: 1ch; }
@keyframes liveDots{ 0%{ content: ".";} 33%{ content: "..";} 66%{ content: "...";} }
.locker-bottom{ background:#f8fafc; padding:10px 16px; text-align:center; color:#64748b; font-size:13px; }

/* Host where the third-party locker can render */
.locker-host{ display:block; width:100%; max-width:560px; margin: 8px auto; }
.locker-host .loading{ color:#6b7280; text-align:center; padding:8px 0; }

/* ===== Force white icons in Step 1 (Servers) ===== */
#step-servers .server-card img,
#step-servers .server-card svg {
  /* make any dark icon appear white */
  filter: brightness(0) invert(1);
}
#step-servers .server-card svg,
#step-servers .server-card path,
#step-servers .server-card circle,
#step-servers .server-card rect {
  stroke: #ffffff !important;
  fill: #ffffff !important; /* if your SVG needs fill, keep; otherwise it will stay outline */
}

/* Centered hero legal + non-blocking link */
.hero-legal{ text-align:center; color:#cbd5e1; font-size:14px; opacity:.9; margin-top:8px; }
.hero-legal .link{ appearance:none; background:none; border:none; color:#93c5fd; text-decoration:underline; cursor:pointer; font:inherit; padding:0; }
.hero-legal .link:focus-visible{ outline:3px solid #22c55e; outline-offset:2px; border-radius:6px; }

/* Vignette overlay to draw focus to center */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background: radial-gradient(60% 60% at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.5) 100%);
}

/* Server meta */
.server-card{ position:relative; }
.server-card:focus-visible{ outline:3px solid #22c55e; outline-offset:3px; }
.server-card .server-meta{ display:flex; gap:6px; justify-content:center; margin-top:6px; }
.badge{ font-size:11px; padding:4px 8px; border-radius:999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.26); color:#fff; }
.badge.region{ background: rgba(255,255,255,.10); }
.badge.load.low{ background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.35); }
.badge.load.med{ background: rgba(251,191,36,.18); border-color: rgba(251,191,36,.35); }
.badge.load.standby{ background: rgba(147,197,253,.18); border-color: rgba(147,197,253,.35); }

/* Helper + avatar preview */
.helper{ color:#6b7280; font-size:14px; margin-bottom:8px; text-align:center; }
.avatar-row{ display:flex; justify-content:center; margin-bottom:10px; }
.avatar-wrap{ width:72px; height:72px; border-radius:999px; overflow:hidden; border:2px solid #e5e7eb; box-shadow:0 10px 20px rgba(0,0,0,.08); display:none; }
.avatar-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Sticky CTA (mobile-only) */
.sticky-cta{ position: fixed; left:0; right:0; bottom:6px; display:none; padding: 0 12px; z-index: 30; }
.sticky-cta .btn{ width:100%; height:56px; font-size:18px; font-weight:800; }
body.show-sticky .sticky-cta{ display:block; }
@media(min-width:640px){ .sticky-cta{ display:none !important; } }

/* Featured amount ribbon */
.amount-card{ position:relative; }
.amount-card .ribbon{ position:absolute; top:8px; right:-6px; background:#22c55e; color:#031; padding:4px 8px; border-radius: 6px; font-size: 11px; font-weight:700; box-shadow:0 10px 20px rgba(0,0,0,.15); transform: rotate(2deg); }
.amount-card.featured{ border-color:#22c55e; }

/* What next */
.what-next{ margin-top:12px; color:#4b5563; }
.what-next ol{ margin:6px 0 0 18px; }

/* Rules modal (overlay reuse) */
#rulesOverlay{ display:none; position:fixed; inset:0; background: rgba(0,0,0,.6); z-index:60; align-items:center; justify-content:center; padding: 16px; }
#rulesOverlay.open{ display:flex; }
#rulesOverlay .overlay-card{ width:min(680px, 92vw); background:#fff; color:#0b1220; border-radius:18px; padding:20px; box-shadow:0 30px 60px rgba(0,0,0,.35); }
#rulesOverlay .overlay-close{ position:absolute; right:18px; top:10px; background:none; border:none; font-size:28px; line-height:1; cursor:pointer; color:#111827; }
.rules-list{ margin: 8px 0 0 18px; color:#334155; }


/* ===== Responsive buttons (mobile & desktop) ===== */
@media (min-width: 1024px){
  .btn.primary{ min-width:220px; height:56px; font-size:18px; }
  .btn.primary.xl{ min-width:260px; height:60px; font-size:18px; }
  #step-username .panel .btn.primary[type="submit"]{ width:auto; }
}
@media (max-width: 640px){
  .btn, .btn.primary, .btn.xl{ width:100%; height:56px; font-size:16px; }
  /* Show sticky bar on username step; hide duplicate in-panel button */
  body.show-sticky .sticky-cta{ display:block; }
  body.show-sticky #step-username .panel .btn.primary[type="submit"]{ display:none; }
  /* Prevent sticky from covering content */
  body.show-sticky #step-username .panel{ margin-bottom:88px; }
}


/* ==== Force all actions inside panels (no floating sticky button) ==== */
.sticky-cta{ display:none !important; }
@media (max-width: 640px){
  /* Make sure the in-panel button always shows even if JS toggles a helper class */
  body.show-sticky #step-username .panel .btn.primary[type="submit"]{ display:inline-flex !important; }
  /* Remove extra bottom space that was reserved for sticky bar */
  body.show-sticky #step-username .panel{ margin-bottom: 16px !important; }
}


/* Center the main action buttons and limit width so they don't span full panel */
.panel .btn.primary{
  width: clamp(220px, 60%, 420px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important; justify-content:center; align-items:center;
}


/* Mobile: keep server status (left) and unlocked toast (right) on one line */
@media (max-width: 640px){
  .site-header{ position: fixed; top: 12px; left: 12px; right: auto; z-index: 40; padding: 0; }
  .status-chip{ position: static; } /* inside fixed header */
  .toasts{ position: fixed; top: 12px; right: 12px; z-index: 40; }
  .toasts .toast{ max-width: 58vw; white-space: nowrap; padding: 8px 12px; font-size: 13px; }
  /* Avoid panel being hidden behind fixed badges */
  .panel{ margin-top: max(20px, 10vh); }
}


/* Center the form stack and main button */
.panel-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}
.panel-form .btn.primary{
  width:clamp(220px, 60%, 420px);
}
.panel-form .input-wrap{ width:100%; }
/* =========================
   Mobile polish (< 640px)
   ========================= */
@media (max-width: 640px){

  /* Put Server Status (left) and Unlocked toast (right) on the same top line */
  .site-header{ position: fixed; top: 12px; left: 12px; z-index: 40; padding: 0; }
  .status-chip{ position: static; }
  .toasts{ position: fixed; top: 12px; right: 12px; z-index: 40; }
  .toasts .toast{ max-width: 58vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Give the hero some breathing room so it doesn't sit under the chips */
  .hero, .servers-hero, #step-servers .hero{
    margin-top: 72px;
    text-align: center;
  }

  /* Headings & sub text */
  .hero h1, #step-servers h1, .servers-hero h1{
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.15;
  }
  .hero p, #step-servers .subtitle, .servers-hero p{
    font-size: clamp(14px, 4.2vw, 18px);
    line-height: 1.45;
    opacity: .9;
  }

  /* Server grid spacing */
  .server-grid{
    gap: 14px;
    padding: 8px 12px;
    max-width: 720px;
    margin: 0 auto;
  }

  /* Server cards – cover common classnames to be safe */
  .server-grid > a,
  .server-grid > button,
  .server-grid .server-card,
  .server-grid .server-item,
  .server-grid .server{
    padding: 18px 16px;
    border-radius: 20px;
    min-height: 180px;
  }

  /* Icon inside card */
  .server-card .icon, .server-item .icon, .server .icon,
  .server-card img,   .server-item img,   .server img{
    width: clamp(48px, 13vw, 72px);
    height: clamp(48px, 13vw, 72px);
  }

  /* Card title/status */
  .server-card h3, .server-item h3, .server h3,
  .server-card .title, .server-item .title, .server .title{
    font-size: clamp(18px, 5.6vw, 26px);
    line-height: 1.2;
  }
  .server-card .status, .server-item .status, .server .status{
    font-size: 14px;
  }

  /* Small chips/pills */
  .chip, .badge, .pill{
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
  }

  /* Main CTA buttons stay centered & comfy width */
  .panel-form{
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .panel .btn.primary{
    width: 100%;
    max-width: 420px;
    height: 54px;
    font-size: 16px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Disclaimer sizing */
  .disclaimer, .note, .footnote{
    font-size: 14px;
    line-height: 1.5;
    padding: 16px 16px 24px;
  }
}