:root{
  --bg:#0a0a0a;
  --text:#7ed321;
  --muted:#5a9c15;
  --accent:#9ef341;
  --border:#1a1a1a;
  --section-bg:#0f0f0f;
  --section-hover:#121212;
  --section-border:#fff;
  --code-bg:#1a1a1a;
  --code-border:#2a2a2a;
  --btn-bg:#0f0f0f;
  --btn-border:#7ed321;
  --btn-text:#9ef341;
  --btn-hover-bg:#7ed321;
  --btn-hover-text:#0a0a0a;
  --nav-hover:#9ef341
}

body.theme-gray{
  --bg:#111214;
  --text:#c9d1d9;
  --muted:#8b949e;
  --accent:#e6edf3;
  --border:#2b2f36;
  --section-bg:#161b22;
  --section-hover:#1b2230;
  --section-border:#30363d;
  --code-bg:#0d1117;
  --code-border:#30363d;
  --btn-border:#c9d1d9;
  --btn-text:#e6edf3;
  --btn-hover-bg:#c9d1d9;
  --btn-hover-text:#0d1117;
  --nav-hover:#fff
}

body.theme-slate{
  --bg:#0f1419;
  --text:#cbd5e1;
  --muted:#64748b;
  --accent:#94a3b8;
  --border:#223041;
  --section-bg:#151b23;
  --section-hover:#1a2230;
  --section-border:#334155;
  --code-bg:#111827;
  --code-border:#334155;
  --btn-border:#cbd5e1;
  --btn-text:#cbd5e1;
  --btn-hover-bg:#cbd5e1;
  --btn-hover-text:#0f1419;
  --nav-hover:#e2e8f0
}

body.theme-graphite{
  --bg:#121212;
  --text:#d4d4d4;
  --muted:#999;
  --accent:#f1f1f1;
  --border:#2a2a2a;
  --section-bg:#1a1a1a;
  --section-hover:#202020;
  --section-border:#2c2c2c;
  --code-bg:#181818;
  --code-border:#2c2c2c;
  --btn-border:#d4d4d4;
  --btn-text:#f1f1f1;
  --btn-hover-bg:#d4d4d4;
  --btn-hover-text:#121212;
  --nav-hover:#fff
}

body.theme-terminal-soft{
  --bg:#0c0f0d;
  --text:#9fbf9f;
  --muted:#6b8f71;
  --accent:#b7d3b7;
  --border:#1d2a22;
  --section-bg:#111513;
  --section-hover:#141b17;
  --section-border:#3a5a40;
  --code-bg:#0e1311;
  --code-border:#2a3a2f;
  --btn-border:#9fbf9f;
  --btn-text:#b7d3b7;
  --btn-hover-bg:#9fbf9f;
  --btn-hover-text:#0c0f0d;
  --nav-hover:#cfe6cf
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Courier New',monospace;
  background:var(--bg);
  color:var(--text);
  padding:60px 24px;
  line-height:1.7
}

.rainbow{
  height:3px;
  width:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:100;
  overflow:hidden;
  pointer-events:none
}

.rainbow::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:200%;
  background:linear-gradient(90deg,#ff0047 0%,#ff7a00 12.5%,#ffd400 25%,#a8ff00 37.5%,#00ffd1 50%,#00bfff 62.5%,#7a00ff 75%,#ff00b3 87.5%,#ff0047 100%);
  background-size:50% 100%;
  background-repeat:repeat-x;
  will-change:transform;
  transform:translate3d(0,0,0);
  animation:rainbow-slide 12s linear infinite
}

@keyframes rainbow-slide{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.container{max-width:900px;margin:0 auto}

.top{margin-bottom:60px}

.site-name{font-size:22px;margin-bottom:10px;color:var(--text)}
.site-name::before{content:'~/';color:var(--muted)}

.tagline{font-size:16px;color:var(--muted);margin-bottom:30px}

.nav{display:flex;gap:18px;padding-top:18px;border-top:1px solid var(--border)}
.nav a{color:var(--text);text-decoration:none;font-size:16px}
.nav a:hover{color:var(--nav-hover)}

.section{
  background:var(--section-bg);
  border-left:4px solid var(--section-border);
  padding:24px 30px;
  margin-bottom:18px;
  position:relative;
  transition:background .3s ease
}

.section.grow{cursor:pointer;transition:all .3s ease}
.section.grow:hover{background:var(--section-hover);transform:scale(1.02)}

.section::before{content:'';position:absolute;left:-15px;top:24px;color:var(--section-border);font-size:22px}

.section h2{font-size:17px;font-weight:normal;margin-bottom:12px;color:var(--accent);text-transform:lowercase}
.section h2::after{content:':'}
.section p{font-size:16px;color:var(--text);line-height:1.8}

.project-meta{font-size:14px;color:var(--muted);margin-top:10px}

.project-link{color:var(--accent);text-decoration:none;border-bottom:1px dotted var(--text);position:relative;z-index:10}
.project-link:hover{color:var(--accent)}

.code-box{
  background:var(--code-bg);
  border:1px solid var(--code-border);
  border-radius:4px;
  padding:20px;
  margin-bottom:18px;
  font-family:'Courier New',monospace;
  overflow-x:auto
}

.code-box pre{
  margin:0;
  color:var(--text);
  font-size:14px;
  line-height:1.6;
  white-space:pre-wrap;
  word-wrap:break-word
}

a {
  color: var(--accent);
}

a:hover {
  opacity: 0.8;
}

.hero{margin-bottom:40px;padding:40px 0;text-align:center}
.hero h1{font-size:36px;font-weight:normal;color:var(--accent);margin-bottom:15px}
.hero p{font-size:16px;color:var(--text)}

.blink{animation:blink 1s infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.quick-link{color:var(--accent);text-decoration:none;border-bottom:1px dotted var(--text)}
.quick-link:hover{color:var(--accent)}

.red{color:#ff0047}
.orange{color:#ff7a00}
.yellow{color:#ffd400}
.green{color:#a8ff00}
.cyan{color:#00ffd1}
.blue{color:#00bfff}
.purple{color:#7a00ff}
.pink{color:#ff00b3}
.lime{color:var(--accent)}
.muted{color:var(--muted)}
.white{color:#fff}
.gray{color:#888}
.HPGreen{color:#03a380}

.rainbow-text{
  --rainbowW:100px;
  background:repeating-linear-gradient(90deg,#ff0047 0%,#ff7a00 12.5%,#ffd400 25%,#a8ff00 37.5%,#00ffd1 50%,#00bfff 62.5%,#7a00ff 75%,#ff00b3 87.5%,#ff0047 100%);
  background-size:var(--rainbowW) 100%;
  background-position:0 50%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
  will-change:background-position;
  animation:rainbow-text-slide 2s linear infinite
}

@keyframes rainbow-text-slide{0%{background-position:0 50%}100%{background-position:calc(var(--rainbowW)*-1) 50%}}

.back-link{display:inline-block;margin-bottom:30px;color:var(--muted);text-decoration:none;font-size:14px}
.back-link:hover{color:var(--text)}
.back-link::before{content:'← '}

.project-header{margin-bottom:40px}
.project-header h1{font-size:28px;font-weight:normal;color:var(--accent);margin-bottom:15px;text-transform:lowercase}
.project-header p{font-size:16px;color:var(--text);line-height:1.8;margin-bottom:20px}

.download-btn{
  display:inline-block;
  padding:12px 20px;
  background:var(--btn-bg);
  border:2px solid var(--btn-border);
  color:var(--btn-text);
  text-decoration:none;
  font-size:14px;
  margin-bottom:30px;
  transition:all .2s
}

.download-btn:hover{background:var(--btn-hover-bg);color:var(--btn-hover-text)}

.game-container{background:var(--section-bg);border:2px solid var(--btn-border);padding:20px;margin-top:30px}
.game-container iframe{width:100%;max-width:800px;height:642px;border:0;display:block;margin:0 auto}

.theme-switcher{
  position:fixed;
  top:14px;
  right:18px;
  z-index:200;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px
}

.theme-switcher label{color:var(--muted)}
.theme-switcher select{
  background:var(--section-bg);
  color:var(--text);
  border:1px solid var(--code-border);
  padding:6px 10px;
  border-radius:4px;
  font-family:'Courier New',monospace;
  outline:none
}

.theme-switcher select:focus{border-color:var(--btn-border)}

.red-animate{
  --redW: 90px;

  background: repeating-linear-gradient(90deg,
    #ff2a2a 0%,
    #ff2a2a 20%,
    #ff0000 40%,
    #830303 60%,
    #ff1a1a 80%,
    #ff2a2a 100%
  );

  background-size: var(--redW) 100%;
  background-position: 0 50%;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  display: inline-block;
  will-change: background-position, opacity;

  animation:
    red-slide 1.4s linear infinite,
    red-blink 1.2s ease-in-out infinite;

  text-shadow: 0 0 6px rgba(255,0,0,.25);
}

@keyframes red-slide{
  0%{ background-position: 0 50%; }
  100%{ background-position: calc(var(--redW) * -1) 50%; }
}

@keyframes red-blink{
  0%   { opacity: 1; }
  50%  { opacity: 0.85; }
  100% { opacity: 1; }
}

.version-flag {
  position: fixed;
  bottom: 12px;
  right: 16px;

  font-size: 12px;
  letter-spacing: 1px;

  opacity: 0.6;
  color: var(--accent);

  user-select: none;
  pointer-events: none;

  transition: opacity 0.2s ease;
}

.version-flag:hover {
  opacity: 1;
}