*{box-sizing:border-box;margin:0;padding:0}
:root{
    --bg:#f7f7f7; --fg:#535353;
  --muted:#888;
    --panel-bg:rgba(247,247,247,0.94)
}
body{ background:var(--bg);
  color:var(--fg); font-family:'Press Start 2P',monospace;
    image-rendering:pixelated; line-height:1.5 }

.page-container{
  max-width:1000px; margin:0 auto;
      padding:2.5rem 1rem 5rem }
.header{ text-align:center;
  margin-bottom:2rem }
.header h1{font-size:1.25rem; line-height:1.8;
    letter-spacing:-0.5px}
@media (min-width:640px){ .header h1{font-size:1.6rem} }
.subtitle{
  font-family:'VT323',monospace;font-size:1.2rem;
  color:var(--muted); margin-top:.5rem }


.game-section{display:flex;justify-content:center;
      margin-bottom:4rem}
.game-wrapper{ position:relative; width:100%;
  max-width:420px }
canvas#raceCanvas{display:block; width:100%; height:auto;
    aspect-ratio:420/600; background:var(--bg)}
.pixel-frame{ border:3px solid var(--fg);
      box-shadow:4px 4px 0 var(--fg) }
.retro-panel{
    background:var(--panel-bg); border:3px solid var(--fg);
  box-shadow:6px 6px 0 var(--fg);
  padding:1.25rem; max-width:330px; width:100% }

.overlay{ position:absolute; inset:0; display:flex;
    align-items:center; justify-content:center;
  background:rgba(247,247,247,.85); padding:1rem; z-index:10 }
.overlay.transparent{background:rgba(247,247,247,.5);
      flex-direction:column}
.pointer-none{pointer-events:none}
.hidden{ display:none !important }

.panel-title{font-size:11px; line-height:1.6;
  margin-bottom:1rem; text-align:center}
.controls-list{
    list-style:none; font-size:9px; line-height:2;
  margin-bottom:1.2rem; text-align:left }
.panel-hint{ font-size:9px; color:var(--muted);
      margin-bottom:1.25rem; text-align:center }
.panel-badge{font-size:9px;color:var(--muted);margin-bottom:.5rem}
.panel-heading{
  font-size:11px; line-height:1.6;
    margin-bottom:.75rem }
.panel-text{ font-family:'VT323',monospace; font-size:1.2rem;
  line-height:1.4; margin-bottom:1.25rem }

.victory-title{font-size:1.2rem;margin-bottom:.5rem}
.victory-time{ font-size:10px;
    margin-bottom:1rem }
.countdown-label{ font-size:11px; margin-bottom:.5rem }
.countdown-num{font-size:3.5rem}
.text-center{text-align:center}

.retro-btn, .retro-btn-ghost{
    display:inline-block; padding:.75rem 1rem;
  font-family:'Press Start 2P',monospace; font-size:10px;
      border:3px solid var(--fg); cursor:pointer; text-align:center }
.retro-btn{ background:var(--fg); color:var(--bg);
  text-decoration:none }
.retro-btn:hover{background:var(--bg);color:var(--fg)}
.retro-btn-ghost{
      background:transparent; color:var(--fg) }
.retro-btn-ghost:hover{ background:var(--fg); color:var(--bg) }
.full-width{width:100%}
.btn-stack{display:flex; flex-direction:column;
    gap:.75rem}


.projects-section{ max-width:920px;
  margin:0 auto }
.section-title{font-size:12px; border-bottom:3px solid var(--fg);
      padding-bottom:.75rem; margin-bottom:2rem}
.projects-list{
  display:flex; flex-direction:column; gap:2rem }
.project-item{display:flex;flex-direction:column}
.project-item + .project-item{
    border-top:3px solid var(--fg); padding-top:2rem }

.screenshot-placeholder{ aspect-ratio:16/9; background:#e9e9e9;
  display:flex; align-items:center;
      justify-content:center; font-size:9px; color:var(--muted) }
.project-screenshot{display:block;width:100%;
    aspect-ratio:16/9; object-fit:cover}
.project-badge{ font-size:9px; color:var(--muted); margin-bottom:.5rem }
.project-title{
  font-size:11px;
    line-height:1.6; margin-bottom:1rem }
.project-desc{font-family:'VT323',monospace; font-size:1.25rem;
  line-height:1.5; margin-top:1.5rem}