:root{
  /* Base (modern, subtle, slightly blue) */
  --bg:#0b1220;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.10);
  --border2: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.54);

  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;

  /* Brand accents (use sparingly) */
  --primary:#4d7dff;   /* blue */
  --primary2:#2bb8ff;  /* cyan */
  --accent:#f6c84b;    /* yellow */
  --danger:#ff4d6d;
  --green:#38d996;

  /* Subtle gradients */
  --grad: linear-gradient(135deg, rgba(77,125,255,.95), rgba(43,184,255,.95));
  --grad2: linear-gradient(135deg, rgba(43,184,255,.95), rgba(77,125,255,.95));
  --grad-soft: linear-gradient(135deg, rgba(77,125,255,.20), rgba(43,184,255,.12));
  --ring: 0 0 0 4px rgba(77,125,255,.14);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1000px 700px at 15% 10%, rgba(77,125,255,.10), transparent 60%),
              radial-gradient(900px 650px at 85% 25%, rgba(43,184,255,.08), transparent 60%),
              radial-gradient(900px 650px at 55% 95%, rgba(246,200,75,.05), transparent 60%),
              var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}
.noise{position:fixed; inset:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity:.10;}
.bg-orb{position:fixed; width:540px; height:540px; border-radius:999px; filter: blur(80px); opacity:.35; pointer-events:none;}
.orb-1{left:-180px; top:140px; background: radial-gradient(circle at 30% 30%, rgba(77,125,255,.18), transparent 60%);}
.orb-2{right:-220px; top:60px; background: radial-gradient(circle at 30% 30%, rgba(43,184,255,.14), transparent 60%);}
a{color: inherit; text-decoration: none;}
a.link{color: rgba(255,255,255,.92); border-bottom: 1px solid rgba(43,184,255,.18);}
a.link:hover{border-bottom-color: rgba(43,184,255,.42); color: rgba(255,255,255,.98);}
.container{max-width:1120px; margin:0 auto; padding:28px 18px 80px}
.container.narrow{max-width:520px}
.section{margin-top:34px}
.section-head{display:flex; gap:12px; align-items:flex-end; justify-content:space-between; margin-bottom:16px}
.section-head h2{margin:0; font-size:22px; letter-spacing:-.02em}
.section-sub{color:var(--muted); font-size:13px}
.topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08); background: rgba(6,20,51,.55); backdrop-filter: blur(14px);}
.brand{display:flex; align-items:center; gap:10px}
.brand-mark{width:34px; height:34px; border-radius:12px; display:grid; place-items:center; font-weight:900; letter-spacing:-.06em; background: rgba(255,255,255,.08); border:1px solid rgba(77,125,255,.22); box-shadow: 0 10px 26px rgba(0,0,0,.22); color: rgba(255,255,255,.92);}
.brand-name{font-weight:800; letter-spacing:-.03em}
.brand.mini .brand-mark{width:34px; height:34px; border-radius:12px; display:grid; place-items:center; font-weight:900; letter-spacing:-.06em; background: rgba(255,255,255,.08); border:1px solid rgba(77,125,255,.22); box-shadow: 0 10px 26px rgba(0,0,0,.22); color: rgba(255,255,255,.92);}
.nav{display:flex; gap:12px; align-items:center}
.nav a{color:var(--muted); font-weight:600; font-size:13px}
.nav a:hover{color:var(--text)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 14px; border-radius:14px; border:1px solid var(--border); background: rgba(255,255,255,.06); color:var(--text); font-weight:700; font-size:13px; letter-spacing:-.01em; transition: transform .15s ease, background .15s ease, border-color .15s ease;}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18);}
.btn:active{transform: translateY(0px);}
.btn-primary{border-color: rgba(77,125,255,.18); background: rgba(255,255,255,.08); color: var(--text); box-shadow: 0 14px 38px rgba(0,0,0,.25);}
.btn-primary:hover{background: rgba(255,255,255,.10); border-color: rgba(43,184,255,.32); box-shadow: 0 16px 44px rgba(77,125,255,.16);}
.btn-ghost{background: rgba(255,255,255,.04)}
.btn-danger{background: rgba(255,77,109,.12); border-color: rgba(255,77,109,.30)}
.btn-small{padding:8px 10px; border-radius:12px; font-size:12px}
.btn-full{width:100%}
.hero{display:grid; grid-template-columns: 1.35fr .9fr; gap:18px; padding:22px; border-radius: calc(var(--radius) + 6px); border:1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04)); box-shadow: var(--shadow); overflow:hidden; position:relative;}
.hero:before{content:''; position:absolute; inset:-2px; background:
  radial-gradient(900px 420px at 18% 0%, rgba(77,125,255,.16), transparent 55%),
  radial-gradient(900px 420px at 85% 35%, rgba(43,184,255,.12), transparent 60%),
  radial-gradient(900px 420px at 50% 115%, rgba(246,200,75,.06), transparent 62%);
  pointer-events:none;}
.hero > *{position:relative; z-index:1}
.pill{display:inline-flex; padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); color: var(--muted); font-weight:700; font-size:12px;}
.hero h1{margin:14px 0 10px; font-size:42px; line-height:1.05; letter-spacing:-.04em}
.grad{background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.grad2{background: var(--grad2); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{margin:0; color:var(--muted); max-width:56ch}
.hero-actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.stats{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.stat{border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.16); border-radius:16px; padding:10px 12px; min-width: 168px;}
.stat-k{color:var(--muted2); font-size:12px; font-weight:700}
.stat-v{font-weight:800; letter-spacing:-.02em; margin-top:3px}
.hero-card{border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); border-radius: 22px; padding:16px; box-shadow: 0 18px 55px rgba(0,0,0,.45);}
.hero-card-top{display:flex; align-items:center; gap:12px}
.logo-big{width:44px;height:44px;border-radius:16px; display:grid;place-items:center; font-weight:900; letter-spacing:-.05em; background: rgba(255,255,255,.08); border:1px solid rgba(43,184,255,.22); color: rgba(255,255,255,.92);}
.hero-card-title{font-weight:900; letter-spacing:-.02em}
.hero-card-sub{color:var(--muted); font-size:12px; margin-top:2px}
.hero-card-body{margin-top:14px; display:grid; gap:10px}
.check{color:var(--muted); font-weight:700; font-size:13px}
.hero-card-bottom{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.card{border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.20); border-radius: 18px; padding:14px; box-shadow: 0 18px 55px rgba(0,0,0,.35); transition: transform .15s ease, border-color .15s ease, background .15s ease;}
.card:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.18); background: rgba(0,0,0,.26);}
.card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.card-title{font-weight:900; letter-spacing:-.02em}
.price{color: rgba(255,255,255,.94); background: rgba(246,200,75,.14); border:1px solid rgba(246,200,75,.22); padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px}
.price.big{padding:10px 12px; font-size:14px}
.card-desc{margin-top:10px; color:var(--muted); font-size:13px; line-height:1.55}
.card-actions{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.card-meta{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.tag{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: var(--muted); font-weight:800; font-size:11px;}
.badge{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); font-weight:900; font-size:11px; color: var(--muted);}
.badge.green{background: rgba(56,217,150,.12); border-color: rgba(56,217,150,.28); color: rgba(200,255,230,.92);}
.split{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.panel{border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.20); border-radius:18px; padding:16px;}
.panel h2, .panel h3{margin:0 0 10px; letter-spacing:-.02em}
.list{margin:0; padding-left:18px; color:var(--muted); line-height:1.7}
.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.tile{border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); border-radius:16px; padding:12px;}
.tile-h{font-weight:900; letter-spacing:-.02em}
.tile-p{color:var(--muted); font-size:13px; margin-top:6px; line-height:1.55}
.empty{border:1px dashed rgba(255,255,255,.18); border-radius:18px; padding:22px; background: rgba(0,0,0,.16);}
.empty.slim{padding:14px}
.crumbs{display:flex; gap:8px; align-items:center; color:var(--muted); font-weight:700; font-size:12px; margin-top:6px}
.crumbs span{color:rgba(255,255,255,.35)}
.lead{color:var(--muted); line-height:1.7}
.mod-hero{display:grid; grid-template-columns: 1.25fr .75fr; gap:14px; margin-top:16px}
.purchase{border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); border-radius:18px; padding:16px; position:sticky; top:86px; height: fit-content;}
.purchase-top{display:grid; gap:8px; margin-bottom:12px}
.muted{color:var(--muted);}
.small{font-size:12px}
.strong{font-weight:900}
.auth{display:grid; place-items:center; padding:32px 0}
.auth-card{border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); border-radius:22px; padding:18px; box-shadow: var(--shadow);}
.auth-card h1{margin:0 0 8px; letter-spacing:-.03em}
.form{display:grid; gap:10px; margin-top:12px}
label{font-weight:800; font-size:12px; color:var(--muted)}
input, textarea{width:100%; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: var(--text); padding:11px 12px; outline:none; font-weight:650;}
textarea{min-height:120px; resize:vertical}
input:focus, textarea:focus{border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08);}
.row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.checkline{display:flex; gap:10px; align-items:center; color:var(--muted); font-weight:800}
.alert{padding:10px 12px; border-radius:14px; border:1px solid rgba(255,77,109,.30); background: rgba(255,77,109,.12); font-weight:800}
.fineprint{margin-top:12px; color:rgba(255,255,255,.45); font-size:12px; font-weight:700}
.table{display:grid; gap:8px}
.t-head,.t-row{display:grid; grid-template-columns: 1.5fr .6fr .6fr .9fr; gap:10px; align-items:center;}
.t-head{color: rgba(255,255,255,.55); font-weight:900; font-size:12px; padding:0 6px 8px;}
.t-row{border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); border-radius:16px; padding:10px 10px;}
.t-actions{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.t-title{display:grid; gap:2px}
.footer{border-top:1px solid rgba(255,255,255,.08); background: rgba(6,20,51,.55); backdrop-filter: blur(14px); padding:22px 18px;}
.footer-inner{max-width:1120px; margin:0 auto; display:flex; gap:20px; justify-content:space-between}
.footer-left{max-width:560px}
.footer-left p{color:var(--muted); line-height:1.7; margin:10px 0 0}
.footer-right{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
.footer-right a{color:var(--muted); font-weight:800; font-size:13px}
.footer-right a:hover{color:var(--text)}
.footer-bottom{max-width:1120px; margin:18px auto 0; color:rgba(255,255,255,.40); font-weight:800; font-size:12px}
.adminbar{display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:10px; flex-wrap:wrap}
.adminlinks{display:flex; gap:8px; flex-wrap:wrap}
.content h1,.content h2,.content h3{letter-spacing:-.02em}
.content p{color:var(--muted); line-height:1.8}
.content a{text-decoration:underline}
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .mod-hero{grid-template-columns:1fr}
  .purchase{position:relative; top:auto}
}
@media (max-width: 560px){
  .grid{grid-template-columns:1fr}
  .hero h1{font-size:34px}
  .nav a{display:none}
  .row{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .footer-inner{flex-direction:column}
}

/* screenshots */
.shotgrid{display:grid; grid-template-columns: repeat(3,1fr); gap:12px}
.shot{display:block; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18)}
.shot img{width:100%; height:170px; object-fit:cover; display:block; transform: scale(1.02); transition: transform .18s ease}
.shot:hover img{transform: scale(1.06)}
.shotwrap{display:flex; flex-direction:column}
@media (max-width:980px){ .shotgrid{grid-template-columns:repeat(2,1fr)} .shot img{height:160px} }
@media (max-width:560px){ .shotgrid{grid-template-columns:1fr} .shot img{height:200px} }


/* --- Homepage mod cards: hero screenshot + clean layout --- */
.clamp-2{
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

.modcard{ overflow:hidden; }
.modcard .card-hero{
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  margin-bottom: 12px;
}
.modcard .card-hero img{
  width:100%;
  height: 170px;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .18s ease, filter .18s ease;
}
.modcard:hover .card-hero img{
  transform: scale(1.06);
  filter: contrast(1.05) saturate(1.05);
}
.modcard .card-hero-placeholder{
  height:170px;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.modcard .card-body{ padding-top: 0; }
.modcard .card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top: 12px;
}
@media (max-width:560px){
  .modcard .card-hero img, .modcard .card-hero-placeholder{ height: 200px; }
}


/* --- Latest YouTube video section --- */
.yt-section{ margin: 0; }
.yt-card{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
  overflow: hidden;
}
.yt-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.yt-title{ font-weight: 800; letter-spacing: .2px; }
.yt-link{ color: rgba(255,255,255,.78); font-weight: 800; text-decoration: none; }
.yt-link:hover{ color: rgba(255,255,255,.92); }
.yt-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,.35);
}
.yt-frame iframe{ position:absolute; inset:0; width:100%; height:100%; }
@media (max-width: 720px){
  .yt-head{ flex-direction: column; align-items:flex-start; }
}


/* --- Homepage YouTube strip: subtle + integrated --- */
.yt-section{ margin: 0; }
.yt-strip{
  display:grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 14px;
  align-items: stretch;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  overflow:hidden;
}
.yt-meta{
  padding: 14px 16px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.yt-kicker{
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255,255,255,.62);
}
.yt-heading{ font-weight: 900; font-size: 18px; }
.yt-sub{ color: rgba(255,255,255,.70); font-weight: 600; font-size: 13px; }
.yt-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,.35);
}
.yt-embed iframe{ position:absolute; inset:0; width:100%; height:100%; }
@media (max-width: 860px){
  .yt-strip{ grid-template-columns: 1fr; }
  .yt-embed{ aspect-ratio: 16 / 9; }
}





/* --- Homepage video: subtle cinematic (16:9, integrated) --- */
.yt-section{ margin: 0; }

.yt-video{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;

  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 78px rgba(0,0,0,.55);

  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  transform: translateZ(0);
}

/* Vignette + faint sheen that matches the site (kept subtle) */
.yt-video::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,.28) 82%, rgba(0,0,0,.46) 100%),
    linear-gradient(90deg, rgba(255,90,180,.08), rgba(255,140,60,.06), rgba(120,90,255,.08));
  opacity: .38;
  mix-blend-mode: overlay;
}

/* Soft edge glow on hover */
.yt-video::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 23px;
  pointer-events:none;
  opacity: 0;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14),
    0 0 44px rgba(255,90,180,.14),
    0 0 58px rgba(255,140,60,.10);
  transition: opacity .18s ease;
}

.yt-video:hover{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 32px 92px rgba(0,0,0,.62);
  transform: translateY(-1px);
}
.yt-video:hover::after{ opacity: 1; }

.yt-video iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 720px){
  .yt-video{ border-radius: 18px; }
  .yt-video::after{ border-radius: 19px; }
}


/* Place the homepage video inside the hero */
.hero-video{
  margin-top: 16px;
}
.hero .yt-video{
  box-shadow: 0 30px 90px rgba(0,0,0,.58);
}


/* --- Hero: full container width + integrated full-width video --- */
.hero .hero-inner{
  width: 100%;
  max-width: none;
}

/* Video breakout inside hero but full width of the container gutters */
.hero-video-wrap{
  margin-top: 18px;
}

/* Ensure yt-video uses full width when inside hero wrap */
.hero-video-wrap .yt-video{
  width: 100%;
  max-width: none;
}

/* Keep corners/glass consistent */
.hero-video-wrap .yt-video{
  border-radius: 22px;
  overflow: hidden;
}


.yt-video{ display:block; }


/* --- Featured mod spotlight --- */
.section.featured{ margin-top: 18px; }
.featured-card{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 30px 90px rgba(0,0,0,.50);
  overflow:hidden;
}
.featured-media{
  position: relative;
  min-height: 320px;
  background: rgba(0,0,0,.35);
  display:block;
}
.featured-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .18s ease, filter .18s ease;
}
.featured-card:hover .featured-media img{
  transform: scale(1.06);
  filter: contrast(1.05) saturate(1.05);
}
.featured-placeholder{
  width:100%;
  height:100%;
  min-height: 320px;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.featured-body{
  padding: 16px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.featured-top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.featured-name{ font-weight: 900; font-size: 22px; letter-spacing: .2px; }
.featured-meta{ display:flex; gap: 8px; align-items:center; flex-wrap: wrap; justify-content:flex-end; }
.featured-changelog{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  padding: 10px 12px;
}
.clamp-3{
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.featured-actions{
  margin-top: auto;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.price.big{ font-size: 18px; font-weight: 900; }
@media (max-width: 900px){
  .featured-card{ grid-template-columns: 1fr; }
  .featured-media, .featured-placeholder{ min-height: 220px; }
}