@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:wght@400;700&family=Silkscreen:wght@400;700&display=swap');

:root{
  --bg: #0b0806;
  --bg-soil: #120c09;
  --panel: #1a1310;
  --panel-2: #211815;
  --border: #4a2a1c;
  --border-dim: #2e1c14;
  --rust: #b5502b;
  --rust-bright: #d9702f;
  --bone: #e8dfc8;
  --text: #beb2a0;
  --text-dim: #7d7061;
  --blood: #6e1b1b;
  --blood-bright: #a3291f;
  --moss: #566b45;
  --link: #d98a4f;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(181,80,43,0.08), transparent 60%),
    radial-gradient(ellipse at 90% 100%, rgba(110,27,27,0.10), transparent 55%);
  color: var(--text);
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;
  position: relative;
}

/* scanline / grain overlay */
body::before{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  z-index: 500;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.16) 0px,
    rgba(0,0,0,0.16) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: .5;
}

a{ color: var(--link); text-decoration: none; border-bottom: 1px dotted var(--border); }
a:hover{ color: var(--rust-bright); border-bottom-style: solid; }

h1,h2,h3{
  font-family: 'Special Elite', 'Courier Prime', monospace;
  letter-spacing: .04em;
  color: var(--bone);
  margin: 0 0 .5em 0;
  text-transform: uppercase;
}

.pixel{ font-family: 'Silkscreen', monospace; }

hr.divider{
  border: none;
  text-align: center;
  color: var(--border);
  margin: 2em 0;
  letter-spacing: .3em;
}
hr.divider::before{ content: "▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓"; color: var(--border); font-size: 10px; }

/* ===== LAYOUT ===== */
.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 16px 60px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 22px;
  position: relative;
  z-index: 1;
}
@media (max-width: 820px){
  .wrap{ grid-template-columns: 1fr; }
}

/* ===== HEADER / TITLE BAR ===== */
.titlebar{
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: 18px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.titlebar::after{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(45deg, rgba(181,80,43,0.05) 0 2px, transparent 2px 10px);
  pointer-events:none;
}
.titlebar h1{
  font-size: 30px;
  margin: 0;
  animation: flicker 6s infinite;
}
.titlebar .stamp{
  font-family:'Silkscreen',monospace;
  font-size: 10px;
  letter-spacing: .35em;
  color: var(--rust);
}
.titlebar .sub{
  font-family: 'Courier Prime', monospace;
  color: var(--text-dim);
  font-size: 11px;
  margin-top: 6px;
}
@keyframes flicker{
  0%,19%,21%,23%,80%,100%{ text-shadow: 0 0 6px rgba(217,112,47,.35), 0 0 1px var(--bone); opacity:1; }
  20%,22%{ text-shadow: none; opacity:.72; }
}

/* ===== SIDEBAR ===== */
.sidebar{
  border: 1px solid var(--border);
  background: var(--panel);
  align-self: start;
  padding: 0;
}
.sidebar .nav-head{
  background: var(--border-dim);
  color: var(--bone);
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.sidebar nav{ padding: 10px 0; }
.sidebar nav a{
  display: block;
  padding: 7px 14px;
  color: var(--text);
  border-bottom: none;
  font-size: 12.5px;
  border-left: 3px solid transparent;
}
.sidebar nav a::before{ content: "▚ "; color: var(--rust); }
.sidebar nav a:hover, .sidebar nav a.active{
  background: var(--panel-2);
  color: var(--bone);
  border-left: 3px solid var(--rust);
}
.sidebar .status{
  margin: 10px 12px 14px;
  padding: 8px 10px;
  border: 1px dashed var(--border);
  font-size: 10.5px;
  color: var(--text-dim);
}
.sidebar .status b{ color: var(--moss); }
.sidebar .status .glyph{ font-size:16px; color:var(--rust); }

/* ===== MAIN CONTENT ===== */
main{
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 26px 30px;
  min-width: 0;
}
main p{ margin: 0 0 1em; }
main .lede{ color: var(--bone); font-style: italic; }

.case-panel{
  border: 1px solid var(--border-dim);
  background: var(--bg-soil);
  padding: 14px 18px;
  margin: 18px 0;
  position: relative;
}
.case-panel .tag{
  position:absolute; top:-10px; left:14px;
  background: var(--rust); color:#0b0806;
  font-family:'Silkscreen',monospace; font-size:10px;
  letter-spacing:.1em; padding:2px 8px;
}

table.classtable{
  width:100%; border-collapse: collapse; margin: 14px 0 20px;
  font-size: 12.5px;
}
table.classtable th, table.classtable td{
  border: 1px solid var(--border-dim);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
table.classtable th{
  background: var(--border-dim);
  color: var(--bone);
  font-family:'Silkscreen',monospace;
  font-size: 10.5px;
  letter-spacing: .08em;
}
table.classtable tr:nth-child(odd) td{ background: rgba(255,255,255,0.015); }

.badge-row{ display:flex; flex-wrap:wrap; gap:8px; margin: 16px 0; }
.blinkie{
  width: 130px; height: 32px;
  border: 1px solid var(--border);
  background: var(--bg-soil);
  color: var(--rust-bright);
  font-family:'Silkscreen',monospace;
  font-size: 9px;
  display:flex; align-items:center; justify-content:center;
  text-align:center; line-height:1.2; padding:2px 6px;
  animation: blink 1.6s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity: .45; } }

.update-log{ list-style:none; margin:0; padding:0; }
.update-log li{
  border-left: 2px solid var(--border);
  padding: 4px 0 12px 14px;
  margin-bottom: 4px;
  font-size:12.5px;
}
.update-log li b{ color: var(--rust-bright); font-family:'Silkscreen',monospace; font-size:10px; display:block; margin-bottom:3px; letter-spacing:.05em; }

.wheel-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
  gap: 12px; margin: 18px 0;
}
.strain-card{
  border:1px solid var(--border-dim); background: var(--bg-soil);
  padding: 12px 14px;
}
.strain-card h3{ font-size:13px; margin-bottom:4px; }
.strain-card .k{ font-size:10px; color:var(--text-dim); font-family:'Silkscreen',monospace; letter-spacing:.08em; }
.strain-card p{ font-size:12px; margin-top:6px; }

.glyph-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr));
  gap: 10px; margin: 18px 0;
}
.glyph-cell{
  border:1px solid var(--border-dim); background: var(--bg-soil);
  padding: 10px 6px; text-align:center;
}
.glyph-cell svg{ width:40px; height:40px; color: var(--rust-bright); }
.glyph-cell span{ display:block; margin-top:6px; font-size:9.5px; color:var(--text-dim); font-family:'Silkscreen',monospace; text-transform:uppercase; letter-spacing:.05em; }

.rule-list{ counter-reset: rule; list-style:none; margin:18px 0; padding:0; }
.rule-list li{
  counter-increment: rule;
  border-bottom: 1px dashed var(--border-dim);
  padding: 14px 0 14px 46px;
  position: relative;
}
.rule-list li::before{
  content: counter(rule);
  position: absolute; left:0; top:12px;
  width: 30px; height:30px;
  border:1px solid var(--rust);
  color: var(--rust-bright);
  display:flex; align-items:center; justify-content:center;
  font-family:'Silkscreen',monospace; font-size:13px;
}
.rule-list h3{ font-size: 13.5px; margin-bottom:2px; }
.rule-list p{ margin:0; font-size:12.5px; }

.marquee{
  border:1px solid var(--border); background: var(--bg-soil);
  padding: 6px 0; overflow:hidden; white-space:nowrap; margin-bottom:18px;
}
.marquee span{
  display:inline-block; padding-left:100%;
  animation: marquee 22s linear infinite;
  color: var(--rust); font-family:'Silkscreen',monospace; font-size:11px; letter-spacing:.1em;
}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-100%);} }

footer.sitefoot{
  grid-column: 1 / -1;
  text-align:center;
  color: var(--text-dim);
  font-size: 10.5px;
  padding: 18px 0 4px;
}
footer.sitefoot a{ color: var(--text-dim); }

.enter-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  flex-direction:column; text-align:center; padding: 30px;
}
.enter-page h1{ font-size: 34px; margin-bottom: 6px; animation: flicker 5s infinite; }
.enter-page .warn{
  max-width: 480px; border:1px solid var(--border); background: var(--panel);
  padding: 18px 24px; margin: 22px 0; font-size:12px; color: var(--text-dim);
}
.enter-page .warn b{ color: var(--blood-bright); }
.enter-btn{
  display:inline-block; border:1px solid var(--rust); padding: 10px 26px;
  color: var(--bone) !important; font-family:'Silkscreen',monospace; font-size:11px;
  letter-spacing:.15em; background: var(--bg-soil);
}
.enter-btn:hover{ background: var(--rust); color:#0b0806 !important; }

.eye-divider{ text-align:center; color:var(--border); font-size:16px; margin:10px 0 20px; letter-spacing:12px; }