:root{
  --bg:#05060a;
  --bg2:#0b0d14;
  --text:#f3f5ff;
  --muted:#a7adbf;
  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.08);
  --shadow:0 16px 60px rgba(0,0,0,.5);
  --radius:24px;
  --radius-sm:16px;
  --pad:28px;
  --max:1100px;
}

body.light{
  --bg:#f5f6fb;
  --bg2:#ffffff;
  --text:#0d1020;
  --muted:#3a4157;
  --line:rgba(10,12,20,.15);
  --line2:rgba(10,12,20,.10);
  --shadow:0 16px 60px rgba(0,0,0,.14);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  background-image:none;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.1px;
  overflow-x:hidden;
}

a{color:inherit}
body.theme-fade, body.theme-fade *{
  transition: background-color .38s ease, color .38s ease, border-color .38s ease, box-shadow .38s ease, opacity .38s ease, filter .38s ease, transform .20s ease;
}

/* VHS texture + occasional jump */
.vhs::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0px, rgba(255,255,255,.045) 1px, transparent 2px, transparent 6px),
    radial-gradient(900px 500px at 50% 0%, rgba(255,255,255,.08), transparent 60%);
  mix-blend-mode:overlay;
  opacity:.10;
  z-index:9990;
}
body.light.vhs::before{opacity:.06}
.vhs::after{
  content:"";
  position:fixed; inset:-30px;
  pointer-events:none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
  opacity:.10;
  z-index:9991;
}
.vhs-jump{ animation:vhsJump .14s steps(2,end) 1; }
@keyframes vhsJump{0%{transform:translateX(0)}50%{transform:translateX(-10px)}100%{transform:translateX(0)}}

/* Header / Nav */
.navbar{
  max-width:var(--max);
  margin:0 auto;
  padding:18px 18px 0;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
}

.logo-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.03);
  text-decoration:none;
  user-select:none;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}
body.light .logo-link{background:rgba(0,0,0,.03)}
.logo-link img{
  height:34px;
  width:34px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.28));
}
.brand-name{
  font-family: "Unbounded", system-ui, sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  line-height: 1;
  white-space:nowrap;
}

.nav-buttons{
  justify-self:center;
  display:flex;
  gap:10px;
  padding:12px;
  border-radius:999px;
  border:1px solid var(--line2);
  background:rgba(10,10,14,.55);
  backdrop-filter: blur(12px);
  box-shadow:0 16px 60px rgba(0,0,0,.35);
}
body.light .nav-buttons{background:rgba(255,255,255,.70)}

.nav-btn{
  appearance:none;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.03);
  color:var(--text);
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
body.light .nav-btn{background:rgba(0,0,0,.03)}
.nav-btn:hover{transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.25)}
.nav-btn:active{transform:translateY(0px)}
.nav-btn.active{border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.06)}
body.light .nav-btn.active{border-color:rgba(0,0,0,.25); background:rgba(0,0,0,.06)}
.nav-btn.toggle{min-width:92px}

@media (max-width: 920px){
  .navbar{grid-template-columns:1fr; justify-items:center;}
  .logo-link{justify-self:center;}
  .nav-buttons{flex-wrap:wrap; justify-content:center;}
}

/* Layout */
.hero{padding:54px 18px 42px}
.hero-inner{max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;gap:22px}
.page{padding:34px 18px 42px}
.page .content-card{max-width:var(--max);margin:0 auto 18px}
.page-hero{max-width:var(--max);margin:0 auto 22px}

.glitch{font-size:52px;line-height:1.02;margin:0;font-weight:900;letter-spacing:-.6px}
@media (max-width:720px){.glitch{font-size:40px}}
.hero-sub{margin:0;color:var(--muted);font-size:17px;max-width:70ch}

.content-card{
  background:
    radial-gradient(900px 220px at 30% 0%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line2);
  border-radius:var(--radius);
  padding:var(--pad);
  box-shadow:var(--shadow);
}
body.light .content-card{
  background:
    radial-gradient(900px 220px at 30% 0%, rgba(0,0,0,.05), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
}

.readable{font-size:16px;line-height:1.65;margin:0}
.dim{color:var(--muted)}

.badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.mini-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.03);
  font-weight:800;
  font-size:12px;
  letter-spacing:.3px;
}
.mini-badge.outline{background:transparent}

.game-card-wrap{max-width:var(--max)}
.game-card{
  display:block;
  text-decoration:none;
  border:1px solid var(--line2);
  border-radius:var(--radius);
  padding:22px;
  background:rgba(255,255,255,.03);
}
body.light .game-card{background:rgba(0,0,0,.03)}
.game-card:hover{transform:translateY(-2px); box-shadow:0 20px 60px rgba(0,0,0,.35)}
.game-card-top{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.game-card-title{margin:0 0 8px;font-size:26px;letter-spacing:-.3px}
.game-card-desc{margin:0;color:var(--muted);line-height:1.55;max-width:75ch}
.game-card-cta{margin-top:16px;display:flex;align-items:center;justify-content:space-between;color:var(--text);font-weight:900}
.game-card-cta .arrow{opacity:.7}

.latest-wrap{max-width:var(--max)}
.latest-card{cursor:pointer}
.latest-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.latest-title{margin:0;font-size:18px}
.latest-date{color:var(--muted);font-weight:700;font-size:13px}
.latest-post-title{margin:0 0 8px;font-size:22px;letter-spacing:-.2px}
.latest-excerpt{margin:0;color:var(--muted);line-height:1.6}

/* Devlog */
.devlog-list{display:flex;flex-direction:column;gap:16px}
.devlog-post{
  border:1px solid var(--line2);
  border-radius:var(--radius-sm);
  padding:18px;
  background:rgba(255,255,255,.02);
}
body.light .devlog-post{background:rgba(0,0,0,.02)}
.devlog-meta{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.devlog-date{color:var(--muted);font-weight:800;font-size:12px;letter-spacing:.3px}
.devlog-title{margin:0;font-size:22px}
.devlog-tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{display:inline-flex;padding:6px 10px;border-radius:999px;border:1px solid var(--line2);font-weight:800;font-size:12px;color:var(--muted)}

.devlog-body{margin-top:10px;color:var(--muted);line-height:1.75}
.devlog-body h2{margin:14px 0 8px;font-size:18px;color:var(--text)}
.devlog-body strong{color:var(--text)}
.devlog-body p{margin:10px 0}
.devlog-body ul{margin:10px 0;padding-left:18px}
.devlog-body li{margin:8px 0}
.devlog-body a{text-decoration:underline;text-underline-offset:3px}

.spoiler{border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.02);margin:12px 0}
body.light .spoiler{background:rgba(0,0,0,.02)}
.spoiler summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:900;color:var(--text)}
.spoiler .spoiler-body{padding:0 14px 14px}

/* Roadmap */
.phase-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.phase-grid{grid-template-columns:1fr}}
.phase-card{
  border:1px solid var(--line2);
  border-radius:var(--radius);
  padding:18px;
  background:rgba(255,255,255,.02);
}
body.light .phase-card{background:rgba(0,0,0,.02)}
.phase-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.phase-name{font-size:20px;font-weight:900;letter-spacing:-.2px}
.phase-sub{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.phase-time{color:var(--muted);font-weight:800;font-size:12px;letter-spacing:.3px}
.phase-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.03);
  font-weight:900;
  font-size:11px;
  letter-spacing:1px;
}
body.light .phase-pill{background:rgba(0,0,0,.03)}
.rm-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.rm-item{display:flex;align-items:flex-start;gap:10px;color:var(--muted);line-height:1.55}
.rm-item.done{opacity:.85;text-decoration:line-through}
.rm-icon{
  width:22px;height:22px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.03);
  font-weight:900;color:var(--text);flex:0 0 22px;
}
.rm-item.wip .rm-icon{background:rgba(255,255,255,.06)}
.rm-pill{
  margin-left:8px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.05);
  font-size:11px;
  font-weight:900;
  letter-spacing:1px;
  color:var(--text);
}
body.light .rm-pill{background:rgba(0,0,0,.05)}

/* Contact */
.contact{
  max-width:var(--max);
  margin:18px auto 0;
  padding: 0 18px 34px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.discord-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.03);
  text-decoration:none;
  font-weight:800;
}
body.light .discord-btn{background:rgba(0,0,0,.03)}
.discord-btn:hover{transform:translateY(-1px); box-shadow:0 12px 30px rgba(0,0,0,.25)}
footer{padding:18px 18px 30px;text-align:center;color:var(--muted);font-size:13px}

/* Modal */
.modal{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55);
  z-index:9999;
  padding:18px;
}
.modal.hidden{display:none}
.modal-content{
  max-width:520px;
  width:100%;
  border:1px solid var(--line2);
  border-radius:var(--radius);
  padding:22px;
  background:rgba(10,10,14,.75);
  backdrop-filter: blur(16px);
  box-shadow:var(--shadow);
}
body.light .modal-content{background:rgba(255,255,255,.86)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.modal-btn{
  border:1px solid var(--line2);
  background:rgba(255,255,255,.03);
  color:var(--text);
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}
body.light .modal-btn{background:rgba(0,0,0,.03)}
.modal-btn.danger{border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.06)}
body.light .modal-btn.danger{border-color:rgba(0,0,0,.20); background:rgba(0,0,0,.06)}

html{font-size:18px!important}
body{font-size:18px!important}

.logo-link{padding:12px 16px!important;border-radius:999px!important}
.logo-link img{width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important}
.brand-name{font-size:1.15rem!important;letter-spacing:.7px!important}

.nav-buttons{padding:14px!important;gap:12px!important;border-radius:999px!important}
.nav-btn{font-size:14.5px!important;padding:11px 16px!important;border-radius:999px!important}

.content-card{padding:32px!important;border-radius:24px!important}

.page,main,section{transform:none!important;zoom:1!important}

.modal-btn.danger{
  border:1px solid rgba(255,70,70,.38);
  background:rgba(255,70,70,.14);
  color:var(--text);
}

.modal-btn.danger:hover{
  border-color:rgba(255,70,70,.55);
  background:rgba(255,70,70,.22);
}

body.light .modal-btn.danger{
  border-color:rgba(180,30,30,.35);
  background:rgba(180,30,30,.10);
}
body.light .modal-btn.danger:hover{
  border-color:rgba(180,30,30,.55);
  background:rgba(180,30,30,.16);
}

.si-hero{overflow:hidden}
.si-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
.si-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.si-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.si-note{margin-top:14px;padding:14px 16px;border-radius:16px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--muted)}
body.light .si-note{background:rgba(0,0,0,.03)}
.si-right{display:flex;flex-direction:column;gap:14px}
.si-card{border:1px solid var(--line2);background:rgba(255,255,255,.02);border-radius:20px;padding:18px}
body.light .si-card{background:rgba(0,0,0,.02)}
.si-card h3{margin:0 0 10px 0}
.si-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
@media (max-width: 920px){.si-hero-grid{grid-template-columns:1fr}}

.logo-link{padding:12px 16px!important;border-radius:999px!important}
.logo-link img{width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important;object-fit:contain!important;display:block!important}
.brand-name{font-size:1.15rem!important;letter-spacing:.7px!important}
html,body{background:var(--bg)!important}
body{background-image:none!important}
body::before,body::after{content:none!important;display:none!important}
.page,.page-hero,main,section{background:transparent!important}


<link rel="icon"href="/favicon.ico"sizes="any">