*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100vh;background:#0a0200}
#doom-wrap{background:#0a0200;width:100%;min-height:100vh;font-family:'Press Start 2P',monospace;image-rendering:pixelated;display:flex;flex-direction:column}

/* NAV */
.doom-nav{background:#0a0200;border-bottom:3px solid #8a1a00;padding:16px 28px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;position:sticky;top:0;z-index:20}
.doom-nav span{color:#f0a020;font-size:13px;letter-spacing:2px}
.doom-nav-links{display:flex;gap:24px}
.doom-nav-links a{color:#c06010;font-size:11px;letter-spacing:1px;text-decoration:none;transition:color .1s}
.doom-nav-links a:hover{color:#f0a020}
.doom-nav-links a.active{color:#f0a020}
.doom-nav-links a.active::before{content:'> '}
.doom-nav-links a.active::after{content:' <'}

/* CANVAS */
#doom-canvas{display:block;width:100%;height:420px;image-rendering:pixelated;image-rendering:crisp-edges;flex-shrink:0}

/* HOME */
.doom-home{padding:16px 20px 10px;text-align:center;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.doom-h1{color:#f0a020;font-size:56px;text-shadow:4px 4px 0 #8a1a00,8px 8px 0 #3a0800;line-height:1.1;margin-bottom:2px}
.doom-sub{color:#c04000;font-size:22px;text-shadow:2px 2px 0 #5a0e00;letter-spacing:6px;display:block;margin-bottom:8px}
.doom-rule{display:flex;gap:3px;justify-content:center;margin:6px 0;align-items:center}
.doom-rule div{width:8px;height:8px;background:#8a1a00}
.doom-rule .mid{background:#f0a020;width:10px;height:10px}
.doom-role{color:#c06010;font-size:11px;letter-spacing:3px;margin-bottom:10px}
.doom-desc{color:#a06020;font-size:9px;line-height:2.6;margin-bottom:12px;max-width:580px}
.doom-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:12px}
.doom-tag{color:#f0a020;background:#1a0400;border:2px solid #8a1a00;font-size:9px;padding:6px 12px;letter-spacing:1px}
.doom-cta{display:inline-block;background:#f0a020;color:#0a0200;font-size:11px;padding:12px 24px;box-shadow:4px 4px 0 #8a1a00;letter-spacing:2px;cursor:pointer;text-decoration:none;font-family:'Press Start 2P',monospace}
.doom-cta:hover{background:#ffcc40}

/* HUD */
.doom-hud{background:#0a0200;border-top:3px solid #8a1a00;padding:12px 28px;display:flex;justify-content:space-between;align-items:center;position:sticky;bottom:0;width:100%;flex-shrink:0;z-index:20}
.doom-hud-left{display:flex;align-items:center;gap:8px}
.doom-hud span{color:#f0a020;font-size:11px;letter-spacing:1px}
.doom-hp{display:flex;gap:3px;align-items:center}
.doom-hb{width:14px;height:11px;background:#c03000}
.doom-hb.e{background:#2a0800}

/* BACKGROUND CANVAS (inner pages) */
#doom-canvas.bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;opacity:0.35;pointer-events:none}
.inner-page{position:relative;z-index:1}

/* SCANLINES */
.scanlines{position:fixed;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.05) 2px,rgba(0,0,0,0.05) 4px);pointer-events:none;z-index:10}

/* SHARED INNER PAGE */
.inner-page{padding:36px 48px;flex:1;overflow-y:auto}
.page-header{margin-bottom:28px}
.page-title{color:#f0a020;font-size:18px;text-shadow:3px 3px 0 #8a1a00;letter-spacing:4px;margin-bottom:8px}
.page-subtitle{color:#c06010;font-size:8px;letter-spacing:3px;margin-bottom:16px}
.page-divider{height:3px;background:linear-gradient(90deg,#8a1a00 0%,#f0a020 50%,#8a1a00 100%);margin-bottom:32px}

/* PIXEL BOX */
.px-box{border:2px solid #8a1a00;background:#0f0300;padding:20px}
.px-box-title{color:#f0a020;font-size:9px;letter-spacing:2px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid #3a0800}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:100%}
.stat-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.stat-row:last-child{margin-bottom:0}
.stat-label{color:#c06010;font-size:7px;letter-spacing:1px}
.stat-val{color:#f0a020;font-size:7px;letter-spacing:1px}
.about-bio{grid-column:span 2}
.about-bio p{color:#a06020;font-size:7px;line-height:3}
.about-bio p+p{margin-top:12px}

/* WORK */
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;width:100%}
.work-card{border:2px solid #8a1a00;background:#0f0300;padding:20px;position:relative}
.work-card-title{color:#f0a020;font-size:9px;letter-spacing:1px;margin-bottom:10px;padding-right:60px}
.work-card-desc{color:#a06020;font-size:7px;line-height:2.8;margin-bottom:14px}
.work-card-tags{display:flex;flex-wrap:wrap;gap:4px}
.work-card-tag{color:#c06010;background:#1a0400;border:1px solid #5a1a00;font-size:7px;padding:4px 8px;letter-spacing:1px}
.work-status{position:absolute;top:12px;right:12px;font-size:6px;padding:3px 7px;border:1px solid}
.work-status.done{color:#40e080;border-color:#40e080}
.work-status.wip{color:#f0a020;border-color:#f0a020}
.work-status.plan{color:#8080c0;border-color:#8080c0}

/* SKILLS */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;width:100%}
.skill-item{margin-bottom:14px}
.skill-item:last-child{margin-bottom:0}
.skill-row{display:flex;justify-content:space-between;margin-bottom:6px}
.skill-name{color:#c06010;font-size:7px;letter-spacing:1px}
.skill-level{color:#f0a020;font-size:7px}
.skill-bar-bg{background:#1a0400;border:1px solid #3a0800;height:9px;width:100%}
.skill-bar-fill{height:100%;background:linear-gradient(90deg,#8a1a00,#f0a020)}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:100%}
.contact-link-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.contact-link-row:last-child{margin-bottom:0}
.c-label{color:#c06010;font-size:7px;letter-spacing:1px;min-width:90px}
.c-val{color:#f0a020;font-size:7px;letter-spacing:1px;text-decoration:none}
.c-val:hover{color:#ffcc40;text-decoration:underline}
.form-group{margin-bottom:14px}
.form-label{color:#c06010;font-size:7px;letter-spacing:1px;display:block;margin-bottom:6px}
.form-input{background:#0a0200;border:2px solid #3a0800;color:#f0a020;font-family:'Press Start 2P',monospace;font-size:7px;padding:10px;width:100%;outline:none}
.form-input:focus{border-color:#8a1a00}
.form-input::placeholder{color:#2a1000}
textarea.form-input{resize:vertical;min-height:90px}
.form-btn{background:#f0a020;color:#0a0200;font-family:'Press Start 2P',monospace;font-size:9px;padding:12px 20px;border:none;box-shadow:3px 3px 0 #8a1a00;cursor:pointer;letter-spacing:2px;width:100%}
.form-btn:hover{background:#ffcc40}

/* HAMBURGER */
.doom-nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.doom-nav-toggle span{display:block;width:22px;height:2px;background:#f0a020}

@media(max-width:750px){
  /* NAV */
  .doom-nav{flex-wrap:wrap;padding:12px 16px;position:relative}
  .doom-nav-toggle{display:flex}
  .doom-nav-links{display:none;flex-direction:column;width:100%;gap:0;margin-top:10px;border-top:1px solid #3a0800;padding-top:8px}
  .doom-nav-links.open{display:flex}
  .doom-nav-links a{padding:10px 4px;border-bottom:1px solid #1a0500;font-size:9px;letter-spacing:1px}
  .doom-nav-links a.active::before{content:'> '}
  .doom-nav-links a.active::after{content:' <'}

  /* CANVAS */
  #doom-canvas:not(.bg){height:240px}

  /* HOME */
  .doom-h1{font-size:26px}
  .doom-sub{font-size:12px;letter-spacing:3px}
  .doom-role{font-size:8px;letter-spacing:1px;text-align:center}
  .doom-desc{font-size:7px;line-height:2.4}
  .doom-cta{font-size:9px;padding:10px 16px}

  /* INNER PAGE */
  .inner-page{padding:20px 14px}
  .page-title{font-size:12px}
  .page-subtitle{font-size:7px}

  /* GRIDS */
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .about-bio{grid-column:span 1}
  .work-grid{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:1fr}

  /* HUD */
  .doom-hud{padding:10px 14px;gap:6px}
  .doom-hud span{font-size:8px;letter-spacing:0}
  .doom-hb{width:11px;height:9px}

  /* VISITOR TABLE */
  .visitor-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .visitor-table th,.visitor-table td{font-size:6px;padding:8px 10px;white-space:nowrap}

  /* VISITORS PAGE */
  .visitors-wrap{grid-template-columns:1fr}
}