/* =========================================================
   RustyBear — Link Portal (FULL custom.css)
   Scope: link.rustybear.gg
   Author: ChatGPT
   Notes: dark navy look, wide desktop header, glassy card,
          outline buttons kept (green / red), subtle hover.
   ========================================================= */

/* ---------- Base + palette ---------- */
:root{
  --rb-bg-1:#0b1220;         /* deep navy */
  --rb-bg-2:#0f172a;         /* slate/navy */
  --rb-surface:rgba(15,23,42,.78);
  --rb-border:rgba(148,163,184,.18);
  --rb-text:#e5e7eb;         /* gray-200 */
  --rb-muted:#94a3b8;        /* gray-400 */
  --rb-orange:#ff8a3d;
  --rb-orange-2:#ffb36b;
  --rb-green:#2ecc71;
  --rb-red:#ff5d4a;
}

*,
*::before,
*::after{ box-sizing:border-box }

html,body{
  height:100%;
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(800px 400px at -10% 10%, rgba(255,255,255,.04), transparent 55%),
    linear-gradient(180deg, var(--rb-bg-1), var(--rb-bg-2) 55%, var(--rb-bg-1));
  color:var(--rb-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Scrollbar (nice on dark) */
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.25); border-radius:8px }
::-webkit-scrollbar-thumb:hover{ background:rgba(148,163,184,.45) }

/* Prefer system UI stack (keeps it light and crisp) */
body, button, input, select, textarea{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  letter-spacing:.2px;
}

/* Links */
a{ color:var(--rb-orange) }
a:hover{ color:var(--rb-orange-2) }

/* =========================================================
   HEADER / NAVBAR
   - Fixes "phone-width" container on desktop
   - Maintains pill "Home" active state like main site
   ========================================================= */
.navbar, header.site-header, .ls-header{
  background:linear-gradient(180deg, rgba(17,24,39,.95), rgba(2,6,23,.95));
  border-bottom:1px solid var(--rb-border);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  min-height:84px;
}

/* Widen header container on desktop (themes often cap at 540–960px) */
.navbar .container,
header .container,
.ls-header .container{
  width:100% !important;
  max-width:1320px !important;
  padding-left:20px !important;
  padding-right:20px !important;
}

/* Safety: unlock container-* variants on lg+ */
@media (min-width: 992px){
  .container, .container-sm, .container-md, .container-lg, .container-xl{
    max-width:1320px !important;
  }
}

/* Logo treatment */
.navbar-brand img, .site-logo img{
  border-radius:12px;
  border:1px solid var(--rb-border);
  padding:4px;
  background:rgba(255,255,255,.03);
}

/* Nav links */
.navbar-nav .nav-link{
  color:var(--rb-text) !important;
  font-weight:700;
  border-radius:12px;
  padding:8px 12px;
}
.navbar-nav .nav-link:hover{
  background:rgba(255,255,255,.05);
}
.navbar-nav .nav-link.active,
.navbar-nav .current-menu-item > .nav-link{
  background:linear-gradient(135deg, var(--rb-orange), var(--rb-orange-2));
  color:#111827 !important;
  border-radius:12px;
  padding:8px 14px;
  box-shadow:0 10px 24px rgba(255,138,61,.35);
}

/* =========================================================
   MAIN / PANEL CARD
   ========================================================= */
main, .site-content, #content{
  /* Don't force flex if theme already centers, just spacing */
  padding:48px 16px;
}

/* Center panel / link block */
.card, .panel, .links-wrapper, .content .card{
  background:var(--rb-surface) !important;
  border:1px solid var(--rb-border) !important;
  border-radius:18px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.45) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  max-width:720px;
  margin:32px auto;
  overflow:hidden;
}

.card h1, .card h2, .card h3, .links-wrapper h2, .links-wrapper h3{
  color:var(--rb-text);
  font-weight:800;
  text-align:center;
  margin:20px 16px 8px;
}

.card .title, .links-wrapper .title, .card h5, .card .step-label{
  color:var(--rb-muted);
  letter-spacing:.3px;
  font-weight:700;
  text-align:center;
  margin-top:12px;
  margin-bottom:12px;
}

/* Optional subtle inner gradient for the panel */
.card::before, .links-wrapper::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120% 120% at 50% -10%, rgba(255,255,255,.06), transparent 45%);
  pointer-events:none;
}

/* Spacing for inner content */
.card .card-body, .links-wrapper .inner, .panel .panel-body{
  padding:28px 22px;
}

/* =========================================================
   BUTTONS (keep outline style; add glow on hover)
   ========================================================= */
.btn{
  font-weight:700;
  border-radius:14px;
  padding:12px 14px;
  transition:transform .15s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

.btn + .btn{ margin-top:18px }

/* Success outline (Steam) */
.btn-outline-success, a.btn-outline-success{
  border-width:2px !important;
  border-color:var(--rb-green) !important;
  color:var(--rb-text) !important;
  background:rgba(0,0,0,.2);
}
.btn-outline-success:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(46,204,113,.12), 0 10px 22px rgba(46,204,113,.18);
}

/* Danger outline (Discord / Group in screenshots) */
.btn-outline-danger, a.btn-outline-danger{
  border-width:2px !important;
  border-color:var(--rb-red) !important;
  color:var(--rb-text) !important;
  background:rgba(0,0,0,.2);
}
.btn-outline-danger:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(255,93,74,.12), 0 10px 22px rgba(255,93,74,.18);
}

/* Neutral outline (if any) */
.btn-outline-secondary, a.btn-outline-secondary{
  border-width:2px !important;
  border-color:rgba(148,163,184,.35) !important;
  color:var(--rb-text) !important;
  background:rgba(0,0,0,.2);
}
.btn-outline-secondary:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(148,163,184,.18), 0 10px 22px rgba(15,23,42,.45);
}

/* Icons inside buttons (Steam/Discord) */
.btn img, .btn svg, .btn i{
  width:22px; height:22px;
  vertical-align:middle;
  margin-left:8px;
  opacity:.95;
}

/* Make buttons full width inside the link panel, nice spacing */
.links-wrapper .btn,
.card .btn,
.panel .btn{
  width:100%;
}

/* =========================================================
   MISC DETAILS
   ========================================================= */
/* Centered headings for each step group (matches your screenshot) */
.step-title, .rb-step-title{
  display:block;
  text-align:center;
  margin:14px 0 10px;
  color:var(--rb-muted);
  font-weight:800;
}

/* Muted small text */
.small, small{
  color:var(--rb-muted);
}

/* Tables or lists that might appear */
.table{
  background:transparent !important;
  color:var(--rb-text);
  border-color:var(--rb-border);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991.98px){
  .navbar, header.site-header, .ls-header{ min-height:72px }
  .navbar-brand img, .site-logo img{ border-radius:10px }
  .card, .links-wrapper{ margin:18px auto; }
  .card .card-body, .links-wrapper .inner{ padding:22px 16px; }
}
@media (max-width: 575.98px){
  .btn{ padding:12px 12px; }
  .navbar-nav .nav-link{ padding:6px 10px }
}