:root{
  --bg-deep:#12162a;
  --bg-panel:#1e2440;
  --bg-panel-2:#262d4d;
  --line:#39406b;
  --gold:#e8c17e;
  --gold-dim:#a8895a;
  --crimson:#c1443c;
  --moss:#5c8a52;
  --cream:#f3ead9;
  --muted:#a9a6c9;
  --shadow-pixel: 4px 4px 0 rgba(0,0,0,0.45);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg-deep);
  color:var(--cream);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block; image-rendering:pixelated;}

h1,h2,h3, .pixel{
  font-family:'Silkscreen', monospace;
  letter-spacing:0.5px;
}

a{color:var(--gold); text-decoration:none;}

::selection{ background:var(--gold); color:var(--bg-deep); }

a:focus-visible, button:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.pixel-border{
  border:2px solid var(--line);
  box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 4px var(--line), var(--shadow-pixel);
}

.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- NAV ---------- */
header.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(18,22,42,0.92);
  backdrop-filter: blur(6px);
  border-bottom:2px solid var(--line);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 24px;
  max-width:1080px;
  margin:0 auto;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand-mark{
  width:34px;height:34px;
  background:var(--gold);
  border:2px solid var(--bg-deep);
  box-shadow:0 0 0 2px var(--gold-dim);
  flex-shrink:0;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.brand-text{
  font-size:1rem;
  color:var(--cream);
}
.brand-text small{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:0.7rem;
  color:var(--muted);
  letter-spacing:0.3px;
}

nav.tabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
nav.tabs::-webkit-scrollbar{display:none;}

.tab-btn{
  font-family:'Silkscreen', monospace;
  background:var(--bg-panel);
  color:var(--muted);
  border:2px solid var(--line);
  padding:9px 14px;
  font-size:0.72rem;
  cursor:pointer;
  white-space:nowrap;
  transition: color .15s ease, background .15s ease, transform .1s ease;
}
.tab-btn:hover{ color:var(--cream); }
.tab-btn.active{
  background:var(--gold);
  color:var(--bg-deep);
  border-color:var(--bg-deep);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
  transform: translate(-1px,-1px);
}

/* ---------- HERO ---------- */
.hero{
  padding:56px 24px 44px;
  text-align:center;
  border-bottom:2px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232,193,126,0.08), transparent 60%),
    var(--bg-deep);
}
.hero-logo{
  max-width:220px;
  margin:0 auto 20px;
  animation: settle .6s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes settle{
  0%{ transform: translateY(-18px) scale(0.94); opacity:0; }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}
.hero h1{
  font-size:clamp(1.6rem, 4.5vw, 2.6rem);
  margin:0 0 10px;
  color:var(--gold);
}
.hero p.tagline{
  max-width:520px;
  margin:0 auto 22px;
  color:var(--muted);
  font-size:1rem;
}
.version-badge{
  display:inline-block;
  font-family:'Silkscreen', monospace;
  font-size:0.68rem;
  background:var(--bg-panel);
  border:2px solid var(--line);
  color:var(--moss);
  padding:6px 12px;
  margin-bottom:26px;
}
.hero-ctas{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn{
  font-family:'Silkscreen', monospace;
  font-size:0.78rem;
  padding:14px 22px;
  border:2px solid var(--bg-deep);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn-primary{
  background:var(--gold);
  color:var(--bg-deep);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}
.btn-primary:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 rgba(0,0,0,0.5); }
.btn-secondary{
  background:var(--bg-panel);
  color:var(--cream);
  border-color:var(--line);
}
.btn-secondary:hover{ background:var(--bg-panel-2); }

/* ---------- MAIN / PANELS ---------- */
main{ padding:48px 0 20px; }
.panel{ display:none; animation: fadein .25s ease both; }
.panel.active{ display:block; }
@keyframes fadein{ from{opacity:0;} to{opacity:1;} }

.section-title{
  font-size:1.3rem;
  color:var(--gold);
  margin:0 0 6px;
}
.section-sub{
  color:var(--muted);
  margin:0 0 32px;
  max-width:640px;
}

/* About */
.about-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:32px;
  align-items:start;
}
.about-grid p{ margin:0 0 16px; max-width:64ch; }
.feature-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.feature-list li{
  background:var(--bg-panel);
  border:2px solid var(--line);
  padding:12px 14px;
  font-size:0.92rem;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.feature-list li .dot{
  width:8px;height:8px;
  background:var(--moss);
  margin-top:7px;
  flex-shrink:0;
}

/* GitHub */
.repo-card{
  background:var(--bg-panel);
  border:2px solid var(--line);
  box-shadow: var(--shadow-pixel);
  padding:28px;
  max-width:620px;
}
.repo-card .repo-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.repo-card .repo-head svg{ flex-shrink:0; }
.repo-card h3{ margin:0; color:var(--cream); font-size:1rem; }
.repo-card p{ color:var(--muted); margin:0 0 20px; }
.clone-box{
  background:var(--bg-deep);
  border:2px solid var(--line);
  padding:12px 14px;
  font-family:'Silkscreen', monospace;
  font-size:0.72rem;
  color:var(--moss);
  margin-bottom:20px;
  overflow-x:auto;
  white-space:nowrap;
}

/* Progress */
.timeline{
  list-style:none;
  margin:0;
  padding:0;
  border-left:2px solid var(--line);
}
.timeline li{
  position:relative;
  padding:2px 0 32px 28px;
}
.timeline li::before{
  content:'';
  position:absolute;
  left:-7px; top:4px;
  width:12px; height:12px;
  background:var(--gold);
  border:2px solid var(--bg-deep);
}
.timeline .t-date{
  font-family:'Silkscreen', monospace;
  font-size:0.68rem;
  color:var(--moss);
  display:block;
  margin-bottom:6px;
}
.timeline h4{ margin:0 0 6px; color:var(--cream); font-size:1rem; }
.timeline p{ margin:0; color:var(--muted); max-width:60ch; }

.devlog-shot{
  margin-top:36px;
  border:2px solid var(--line);
  box-shadow: var(--shadow-pixel);
  max-width:720px;
}
.devlog-shot figcaption{
  background:var(--bg-panel);
  padding:10px 14px;
  font-size:0.82rem;
  color:var(--muted);
  border-top:2px solid var(--line);
}
figure{ margin:0; }

/* ---------- CREDITS / FOOTER ---------- */
footer.credits{
  border-top:2px solid var(--line);
  background:var(--bg-panel);
  padding:52px 24px 40px;
  margin-top:24px;
}
.credits-head{ text-align:center; margin-bottom:8px; }
.credits-head h2{ color:var(--gold); font-size:1.2rem; margin:0 0 4px; }
.credits-head p{ color:var(--muted); margin:0 0 36px; }

.crew-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  max-width:920px;
  margin:0 auto;
}
.crew-card{
  background:var(--bg-deep);
  border:2px solid var(--line);
  box-shadow: var(--shadow-pixel);
  padding:22px 18px;
  text-align:center;
}
.crew-role{
  font-family:'Silkscreen', monospace;
  font-size:0.68rem;
  color:var(--gold);
  margin:0 0 10px;
}
.crew-name{
  font-size:1rem;
  color:var(--cream);
  margin:0 0 8px;
  font-weight:600;
}
.crew-job{
  font-size:0.82rem;
  color:var(--muted);
  margin:0;
}

.studio-line{
  text-align:center;
  margin-top:40px;
  color:var(--muted);
  font-size:0.82rem;
}
.studio-line strong{ color:var(--gold); font-family:'Silkscreen', monospace; font-size:0.72rem; }

@media (max-width: 760px){
  .about-grid{ grid-template-columns:1fr; }
  .crew-grid{ grid-template-columns:1fr; }
  .nav-inner{ flex-wrap:wrap; }
}

/* ---------- WIKI ---------- */
.wiki-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:24px;
  align-items:start;
}

.wiki-sidebar{
  background:var(--bg-panel);
  border:2px solid var(--line);
  padding:16px;
}

.wiki-categories{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:12px;
}
.wiki-chip{
  font-family:'Silkscreen', monospace;
  font-size:0.62rem;
  background:var(--bg-deep);
  color:var(--muted);
  border:2px solid var(--line);
  padding:6px 9px;
  cursor:pointer;
}
.wiki-chip:hover{ color:var(--cream); }
.wiki-chip.active{
  background:var(--gold);
  color:var(--bg-deep);
  border-color:var(--bg-deep);
}

.wiki-search{
  width:100%;
  font-family:'Inter', sans-serif;
  font-size:0.85rem;
  background:var(--bg-deep);
  border:2px solid var(--line);
  color:var(--cream);
  padding:9px 10px;
  margin-bottom:14px;
}
.wiki-search::placeholder{ color:var(--muted); }
.wiki-search:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }

.wiki-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:420px;
  overflow-y:auto;
}
.wiki-item{
  width:100%;
  text-align:left;
  background:var(--bg-deep);
  border:2px solid var(--line);
  color:var(--cream);
  padding:9px 10px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.wiki-item:hover{ border-color:var(--gold-dim); }
.wiki-item.active{
  border-color:var(--gold);
  background:var(--bg-panel-2);
}
.wiki-item-name{ font-size:0.88rem; }
.wiki-item-cat{
  font-family:'Silkscreen', monospace;
  font-size:0.6rem;
  color:var(--moss);
}
.wiki-empty{
  color:var(--muted);
  font-size:0.85rem;
  padding:8px 2px;
}

.wiki-detail{
  background:var(--bg-panel);
  border:2px solid var(--line);
  box-shadow: var(--shadow-pixel);
  padding:28px;
  min-height:300px;
}
.wiki-detail-cat{
  display:inline-block;
  font-family:'Silkscreen', monospace;
  font-size:0.62rem;
  color:var(--moss);
  border:2px solid var(--line);
  padding:4px 8px;
  margin-bottom:12px;
}
.wiki-detail h3{
  margin:0 0 8px;
  color:var(--gold);
  font-size:1.15rem;
}
.wiki-summary{
  color:var(--muted);
  margin:0 0 18px;
  max-width:60ch;
}
.wiki-stats{
  border-collapse:collapse;
  margin-bottom:18px;
  width:100%;
  max-width:420px;
}
.wiki-stats td{
  padding:7px 10px;
  border:2px solid var(--line);
  font-size:0.85rem;
}
.wiki-stats td:first-child{
  color:var(--muted);
  font-family:'Silkscreen', monospace;
  font-size:0.62rem;
  width:40%;
  background:var(--bg-deep);
}
.wiki-description{
  color:var(--cream);
  max-width:64ch;
  margin:0;
}
.wiki-placeholder{ color:var(--muted); }

@media (max-width: 760px){
  .wiki-layout{ grid-template-columns:1fr; }
  .wiki-list{ max-height:280px; }
}

/* ---------- INFORMARNOS ---------- */
.report-form{
  background:var(--bg-panel);
  border:2px solid var(--line);
  box-shadow: var(--shadow-pixel);
  padding:22px;
  margin-bottom:32px;
}

.report-type-toggle{
  display:flex;
  gap:8px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.report-type-btn{
  font-family:'Silkscreen', monospace;
  font-size:0.7rem;
  background:var(--bg-deep);
  color:var(--muted);
  border:2px solid var(--line);
  padding:9px 14px;
  cursor:pointer;
}
.report-type-btn:hover{ color:var(--cream); }
.report-type-btn.active{
  background:var(--gold);
  color:var(--bg-deep);
  border-color:var(--bg-deep);
}

.report-textarea{
  width:100%;
  font-family:'Inter', sans-serif;
  font-size:0.92rem;
  background:var(--bg-deep);
  border:2px solid var(--line);
  color:var(--cream);
  padding:12px 14px;
  margin-bottom:14px;
  resize:vertical;
  min-height:70px;
}
.report-textarea::placeholder{ color:var(--muted); }
.report-textarea:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }

.buzones-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:24px;
}

.buzon-title{
  font-size:1rem;
  color:var(--gold);
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.buzon-count{
  font-family:'Silkscreen', monospace;
  font-size:0.62rem;
  background:var(--bg-panel);
  border:2px solid var(--line);
  color:var(--moss);
  padding:2px 8px;
}

.buzon-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:420px;
  overflow-y:auto;
}
.buzon-empty{
  color:var(--muted);
  font-size:0.85rem;
  padding:10px 2px;
}

.buzon-item{
  background:var(--bg-panel);
  border:2px solid var(--line);
  padding:14px 16px;
}
.buzon-item-text{
  color:var(--cream);
  font-size:0.9rem;
  margin:0 0 8px;
  white-space:pre-wrap;
  word-break:break-word;
}
.buzon-item-meta{
  font-family:'Silkscreen', monospace;
  font-size:0.6rem;
  color:var(--moss);
  margin-bottom:10px;
}
.buzon-item-actions{
  display:flex;
  gap:8px;
}
.buzon-item-btn{
  font-family:'Silkscreen', monospace;
  font-size:0.62rem;
  background:var(--bg-deep);
  color:var(--muted);
  border:2px solid var(--line);
  padding:6px 10px;
  cursor:pointer;
}
.buzon-item-btn:hover{ color:var(--cream); border-color:var(--gold-dim); }
.buzon-item-btn-danger:hover{ color:var(--crimson); border-color:var(--crimson); }

.buzon-edit-textarea{
  margin-bottom:10px;
  min-height:60px;
}

.note-card{
  margin-top:8px;
  background:transparent;
  border:2px dashed var(--line);
  padding:14px 16px;
  color:var(--muted);
  font-size:0.85rem;
}

@media (max-width: 760px){
  .buzones-grid{ grid-template-columns:1fr; }
}