@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
}

* {
    box-sizing: border-box;
}

/* =========================================================
   GLOBAL (gilt für beide Seiten)
   Voraussetzung:
   - Bots-Seite Wrapper:    <div class="rift-page rift-page--bots">
   - Settings-Seite Wrapper: <div class="rift-page rift-page--settings">
   ========================================================= */

.rift-page{
  --bg-primary:#0a0e14;
  --bg-card:rgba(255,255,255,0.04);
  --bg-soft:rgba(255,255,255,0.06);
  --bg-panel:rgba(255,255,255,0.05);

  --text-primary:#e8eef7;
  --text-secondary:rgba(232,238,247,0.75);
  --text-muted:rgba(232,238,247,0.55);

  --border-color:rgba(255,255,255,0.08);

  --accent:#00e5ff;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;

  --flagship:#fbbf24;
  --featured:#3b82f6;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-primary);
}

.rift-page,
.rift-page *{ box-sizing:border-box; }

.rift-page h1,
.rift-page h2,
.rift-page h3,
.rift-page p{ margin:0; }

.rift-page a{ color:inherit; text-decoration:none; }

.rift-page ul{ margin:0; padding:0; }

.rift-page .muted{ color: var(--text-muted); font-weight: 800; }

/* =========================================================
   BOTS PAGE ONLY
   ========================================================= */

.rift-page--bots .main{ padding:40px 20px 60px; }
.rift-page--bots .container{ max-width:1200px; margin:0 auto; }

/* Hero */
.rift-page--bots .hero{ text-align:center; margin-bottom:60px; }
.rift-page--bots .hero-title{
  font-size:2.4rem;
  margin-bottom:10px;
  letter-spacing:-0.02em;
}
.rift-page--bots .hero-subtitle{ color: var(--text-secondary); }
.rift-page--bots .accent{ color: var(--accent); font-weight: 800; }

/* Grid */
.rift-page--bots .bot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:22px;
  margin-bottom:28px;
}

/* Card */
.rift-page--bots .card{
  position:relative;
  background: var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:18px;
  padding:26px;
  backdrop-filter:blur(10px);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  overflow:hidden;
}
.rift-page--bots .card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,229,255,0.35);
  box-shadow:0 18px 50px rgba(0,0,0,0.35);
}
.rift-page--bots .card--flagship{ border-color: rgba(251,191,36,0.6); }
.rift-page--bots .card--featured{ border-color: rgba(59,130,246,0.6); }

/* Badge (oben rechts in der Card) */
.rift-page--bots .card-badge{
  position:absolute;
  top:14px;
  right:14px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.4px;
  border:1px solid var(--border-color);
  background:rgba(255,255,255,0.06);
  z-index:2;
  white-space:nowrap;
}
.rift-page--bots .card-badge--flagship{
  border-color:rgba(251,191,36,0.8);
  background:rgba(251,191,36,0.15);
  color:var(--flagship);
}
.rift-page--bots .card-badge--featured{
  border-color:rgba(59,130,246,0.8);
  background:rgba(59,130,246,0.15);
  color:var(--featured);
}

/* Card header */
.rift-page--bots .card-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}
.rift-page--bots .card-icon{
  width:48px; height:48px;
  border-radius:14px;
  display:grid; place-items:center;
  background:rgba(255,255,255,0.06);
  color:var(--text-primary);
  font-size:18px;
  flex:0 0 auto;
}
.rift-page--bots .card-title{
  margin-bottom:6px;
  font-size:1rem;
  line-height:1.2;
}
.rift-page--bots .card-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Small badges in tags */
.rift-page--bots .badge{
  display:inline-flex;
  align-items:center;
  background: var(--bg-soft);
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color: var(--text-secondary);
  line-height:1;
}
.rift-page--bots .badge--accent{
  background:rgba(0,229,255,0.15);
  color:var(--accent);
}

/* Description */
.rift-page--bots .card-description{
  margin:0 0 18px;
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.6;
}

/* Features */
.rift-page--bots .section-label{
  margin:0 0 10px;
  font-size:12px;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:900;
  letter-spacing:.4px;
}
.rift-page--bots .feature-list{ list-style:none; padding:0; margin:0; }
.rift-page--bots .feature-list li{
  position:relative;
  padding-left:18px;
  margin-bottom:8px;
  color:var(--text-secondary);
  font-size:14px;
}
.rift-page--bots .feature-list li::before{
  content:"✔";
  position:absolute;
  left:0;
  top:0;
  color:var(--success);
  font-size:12px;
}

/* Info boxes */
.rift-page--bots .card-boxes{
  margin-top:16px;
  display:grid;
  gap:10px;
}
.rift-page--bots .info-box{
  padding:12px;
  border-radius:12px;
  font-size:13px;
  line-height:1.35;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text-secondary);
}
.rift-page--bots .info-box--success{
  background:rgba(16,185,129,0.10);
  border-color:rgba(16,185,129,0.25);
  color:rgba(16,185,129,0.95);
}
.rift-page--bots .info-box--muted{
  background:rgba(107,114,128,0.10);
  border-color:rgba(107,114,128,0.18);
  color:var(--text-muted);
}
.rift-page--bots .info-box--warning{
  background:rgba(245,158,11,0.10);
  border-color:rgba(245,158,11,0.28);
  color:rgba(245,158,11,0.95);
}

/* Table */
.rift-page--bots .card--table{ margin-top:22px; }
.rift-page--bots .table-title{
  margin:0 0 6px;
  font-size:1.25rem;
  letter-spacing:-0.01em;
}
.rift-page--bots .table-subtitle{
  margin:0 0 14px;
  color:var(--text-muted);
  font-size:13px;
}
.rift-page--bots .table-wrap{
  overflow-x:auto;
  border-radius:14px;
  border:1px solid var(--border-color);
  background:rgba(0,0,0,0.12);
}
.rift-page--bots .table{
  width:100%;
  border-collapse:collapse;
  min-width:520px;
}
.rift-page--bots .table th,
.rift-page--bots .table td{
  padding:12px;
  border-bottom:1px solid var(--border-color);
  text-align:left;
  font-size:14px;
}
.rift-page--bots .table th{ color:var(--text-secondary); font-weight:900; }
.rift-page--bots .table-mode{
  white-space:nowrap;
  color:var(--accent);
  font-weight:900;
}
.rift-page--bots .table-rec{ color:var(--text-secondary); }
.rift-page--bots .table-note{
  margin:10px 0 0;
  font-size:12px;
  color:var(--text-muted);
}

/* Bots responsive */
@media (max-width:520px){
  .rift-page--bots .main{ padding:28px 14px 44px; }
  .rift-page--bots .hero-title{ font-size:1.9rem; }
  .rift-page--bots .card-header{ padding-right:0; }
  .rift-page--bots .card-badge{ top:12px; right:12px; }
}

/* =========================================================
   SETTINGS PAGE ONLY
   ========================================================= */

.rift-page--settings .main{ padding:40px 20px 60px; }
.rift-page--settings .container{ max-width:800px; margin:0 auto; }

/* Hero */
.rift-page--settings .hero{ text-align:center; margin-bottom:28px; }
.rift-page--settings .hero-title{
  font-size:2.2rem;
  letter-spacing:-0.02em;
  margin-bottom:10px;
}
.rift-page--settings .hero-subtitle{ color:var(--text-secondary); }

/* Card */
.rift-page--settings .card{
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 18px;
  backdrop-filter: blur(10px);
}

.rift-page--settings .card-title-lg{
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.rift-page--settings .text{
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 14px;
}

.rift-page--settings .text-muted{
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Alert */
.rift-page--settings .alert{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-radius:14px;
  padding:14px 16px;
  border:1px solid var(--border-color);
  margin-bottom:18px;
  background: var(--bg-panel);
}
.rift-page--settings .alert-icon{
  width:32px;
  height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-weight:900;
  flex:0 0 auto;
}
.rift-page--settings .alert--danger{
  background:rgba(239,68,68,0.10);
  border-color:rgba(239,68,68,0.30);
}
.rift-page--settings .alert--danger .alert-icon{
  background:rgba(239,68,68,0.15);
  color:var(--danger);
}
.rift-page--settings .alert-title{
  font-weight:900;
  margin-bottom:4px;
  color:var(--danger);
}
.rift-page--settings .alert-text{
  color:var(--text-secondary);
  font-size:0.9rem;
  line-height:1.6;
}

/* Settings list */
.rift-page--settings .settings-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.rift-page--settings .settings-item{
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border-radius:12px;
  background: var(--bg-soft);
  border:1px solid var(--border-color);
}
.rift-page--settings .settings-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,0.08);
  box-shadow:0 0 14px rgba(255,255,255,0.10);
  flex:0 0 auto;
}
.rift-page--settings .settings-title{
  font-weight:900;
  margin-bottom:4px;
}
.rift-page--settings .settings-text{
  color:var(--text-secondary);
  font-size:0.9rem;
  line-height:1.55;
}

/* Panels */
.rift-page--settings .panel{
  background: var(--bg-soft);
  border:1px solid var(--border-color);
  border-radius:14px;
  padding:16px;
  margin-bottom:12px;
}
.rift-page--settings .panel-title{
  font-weight:900;
  font-size:0.98rem;
  margin-bottom:10px;
}
.rift-page--settings .panel-text{
  color:var(--text-secondary);
  font-size:0.9rem;
  line-height:1.75;
}
.rift-page--settings .panel-text p + p{ margin-top:10px; }

.rift-page--settings .hint{
  margin-top:12px;
  background:rgba(0,229,255,0.06);
  border:1px solid rgba(0,229,255,0.20);
  border-radius:12px;
  padding:12px;
  color:var(--accent);
  font-size:0.9rem;
  line-height:1.6;
}

/* Callouts */
.rift-page--settings .callout{
  display:flex;
  gap:10px;
  align-items:flex-start;
  border-radius:12px;
  padding:12px;
  border:1px solid var(--border-color);
  margin:12px 0;
  background: var(--bg-panel);
}
.rift-page--settings .callout-icon{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  font-weight:900;
  flex:0 0 auto;
}
.rift-page--settings .callout-body{ flex:1 1 auto; }
.rift-page--settings .callout-title{
  font-weight:900;
  margin-bottom:4px;
}
.rift-page--settings .callout-text{
  color:var(--text-secondary);
  font-size:0.9rem;
  line-height:1.6;
}

.rift-page--settings .callout--danger{
  background:rgba(239,68,68,0.08);
  border-color:rgba(239,68,68,0.30);
}
.rift-page--settings .callout--danger .callout-icon,
.rift-page--settings .callout--danger .callout-title{ color:var(--danger); }

.rift-page--settings .callout--warning{
  background:rgba(245,158,11,0.08);
  border-color:rgba(245,158,11,0.25);
}
.rift-page--settings .callout--warning .callout-icon{ color:var(--warning); }

/* Screenshots */
.rift-page--settings .shots-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
}
.rift-page--settings .shot{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border-color);
  background: var(--bg-soft);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  display:block;
}
.rift-page--settings .shot:hover{
  transform:translateY(-2px);
  border-color:rgba(0,229,255,0.35);
  box-shadow:0 16px 40px rgba(0,0,0,0.30);
}
.rift-page--settings .shot-img{
  width:100%;
  height:auto;
  display:block;
}
.rift-page--settings .shot-meta{ padding:14px; }
.rift-page--settings .shot-title{ font-weight:900; margin-bottom:4px; }
.rift-page--settings .shot-subtitle{ color:var(--text-muted); font-size:0.88rem; }

/* Settings responsive */
@media (max-width:520px){
  .rift-page--settings .main{ padding:28px 14px 44px; }
  .rift-page--settings .hero-title{ font-size:1.85rem; }
}

/* =========================
   Rift Top Navigation (Tabs)
   ========================= */

.rift-page .rift-nav{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 auto 24px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
  width: fit-content;
}

.rift-page .rift-nav__item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .2px;
  color: var(--text-secondary);
  border: 1px solid transparent;
  background: transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.rift-page .rift-nav__item:hover{
  transform: translateY(-1px);
  color: var(--text-primary);
  border-color: rgba(0, 255, 162, 0.22);
  background: rgba(0, 255, 162, 0.06);
}

.rift-page .rift-nav__item--active{
  color: var(--text-primary);
  border-color: rgba(0, 255, 162, 0.35);
  background: rgba(0, 255, 162, 0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* Optional: kleines Icon links (wenn du später eins reinmachen willst) */
.rift-page .rift-nav__item svg{
  width: 16px;
  height: 16px;
}

/* ===== Rift variables (falls nicht global vorhanden) ===== */
.rift-page{
  --rift-cyan:#00e5ff;
  --text-primary:#e8eef7;
  --text-secondary:rgba(232,238,247,.75);
  --text-muted:rgba(232,238,247,.55);
  --border-color:rgba(255,255,255,.08);
  --bg-secondary:rgba(255,255,255,.03);
  --bg-card:rgba(255,255,255,.05);
  --bg-card-hover:rgba(255,255,255,.07);
}