:root{
  --bg:#1a1c2c; --panel:#262b44; --line:#333c57; --slate:#566c86;
  --text:#f4f4f4; --muted:#bccfdb; --accent:#ffcd75; --green:#a7f070;
  --pixel:'Press Start 2P', monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Pixelify Sans',monospace;font-size:18px;line-height:1.5;-webkit-font-smoothing:none}
a{color:inherit}
.page{position:relative;overflow:hidden;min-height:100vh}
.px{font-family:var(--pixel)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* фон: звёзды и ЭЛТ-полоски */
.stars{position:absolute;inset:0;pointer-events:none;z-index:0}
.stars i{position:absolute;display:block;animation:px-twinkle 2s steps(1) infinite}
.scan{position:fixed;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) 2px,transparent 2px,transparent 4px)}

/* шапка */
header{position:relative;z-index:1;border-bottom:4px solid var(--line);background:var(--panel);overflow:hidden}
nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:16px;padding-bottom:16px}
.logo{font-family:var(--pixel);font-size:14px;color:var(--accent);text-decoration:none}
.menu{display:flex;flex-wrap:wrap;gap:4px 20px;font-family:var(--pixel);font-size:10px}
.menu a{text-decoration:none;padding:12px 0}
.menu a:hover{color:var(--accent)}
.langs{display:flex;gap:4px;font-family:var(--pixel);font-size:10px}
.langs a{text-decoration:none;padding:10px 8px;border:2px solid transparent;color:var(--muted)}
.langs a:hover{color:var(--accent)}
.langs a[aria-current="true"]{color:var(--bg);background:var(--accent);border-color:var(--text)}
.slime{position:absolute;left:0;bottom:0;width:24px;height:12px;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(4,1fr);animation:px-walk 14s steps(140) infinite}

main{position:relative;z-index:1}
section{padding:48px 0}
h2{margin:0 0 28px;font-family:var(--pixel);font-size:20px;line-height:1.5;color:var(--accent)}
.lead{margin:0 0 28px;color:var(--muted);max-width:640px}

/* герой */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding:72px 0 64px}
.hero-text{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:24px}
.hello{margin:0;font-family:var(--pixel);font-size:11px;color:var(--green)}
h1{margin:0;font-family:var(--pixel);font-size:30px;line-height:1.4}
h1 span{color:var(--accent)}
.intro{margin:0;font-size:22px;color:var(--muted);max-width:560px}
.btns{display:flex;flex-wrap:wrap;gap:16px;padding-top:8px}
.btn{display:inline-block;font-family:var(--pixel);font-size:12px;padding:16px 20px;text-decoration:none;border:4px solid var(--text);box-shadow:6px 6px 0 #000;color:var(--text);transition:none}
.btn.primary{background:var(--accent);color:var(--bg)}
.btn:hover,.btn:focus-visible{transform:translate(-3px,-3px);box-shadow:9px 9px 0 #000}
.btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 #000}
.blink{animation:px-blink 1s steps(1) infinite}

/* карточка персонажа */
.char{flex:0 1 340px;min-width:260px;background:var(--panel);border:4px solid var(--text);box-shadow:8px 8px 0 #000;padding:24px;display:flex;flex-direction:column;align-items:center;gap:20px}
.avatar-frame{background:var(--slate);padding:16px 8px 0;overflow:hidden}
.avatar{width:192px;height:192px;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr);animation:px-bob 1.2s steps(1) infinite}
.stats{width:100%;display:flex;flex-direction:column;gap:10px;font-family:var(--pixel);font-size:10px}
.stat{display:flex;justify-content:space-between;gap:8px}
.stat .k{color:var(--muted);flex:none}
.stat > :last-child{text-align:right}
.stat a{color:var(--accent);text-decoration:none}
.bar{height:16px;border:4px solid var(--text);background:var(--bg)}
.bar div{height:100%;background:var(--green);animation:px-fill 6s steps(12) infinite}

/* сетки карточек */
.row{display:flex;flex-wrap:wrap;gap:16px}
.skill{flex:1 1 160px;background:var(--panel);border:4px solid var(--slate);padding:16px;display:flex;flex-direction:column;gap:8px}
.skill .ic{font-family:var(--pixel);font-size:18px;line-height:1.6}
.skill .ic.small{font-size:9px}
.skill .nm{font-family:var(--pixel);font-size:11px;line-height:1.6}
.skill .ds{font-size:16px;color:var(--muted)}

.projects{display:flex;flex-wrap:wrap;gap:24px}
.card{flex:1 1 300px;min-width:0;background:var(--panel);border:4px solid var(--text);box-shadow:8px 8px 0 #000;display:flex;flex-direction:column}
.card:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 #000}
.card img{display:block;width:100%;height:200px;border-bottom:4px solid var(--text)}
.card .body{padding:20px;display:flex;flex-direction:column;gap:12px}
.lvl{font-family:var(--pixel);font-size:10px;color:var(--green)}
h3{margin:0;font-family:var(--pixel);font-size:14px;line-height:1.6}
.card p{margin:0;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:8px;font-size:15px}
.tags span{border:2px solid var(--slate);padding:2px 8px}
.go{font-family:var(--pixel);font-size:11px;color:var(--accent);padding:12px 0}
.locked{flex:1 1 300px;min-width:0;border:4px dashed var(--slate);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px 20px;text-align:center;min-height:280px}
.locked .q{font-family:var(--pixel);font-size:40px;color:var(--slate)}
.locked .t{font-family:var(--pixel);font-size:12px;color:var(--muted);line-height:1.6}
.locked p{margin:0;color:var(--muted)}

.steps{margin:0;padding:0;list-style:none}
.step{flex:1 1 220px;background:var(--panel);border:4px solid var(--slate);padding:16px;display:flex;flex-direction:column;gap:8px}
.step .n{font-family:var(--pixel);font-size:22px;color:var(--accent)}
.step .nm{font-family:var(--pixel);font-size:11px;line-height:1.6}
.step .ds{font-size:16px;color:var(--muted)}

/* контакты */
.contact{padding:48px 0 80px}
.contact-box{background:var(--panel);border:4px solid var(--text);box-shadow:8px 8px 0 #000;padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.contact-box h2{margin:0;font-size:24px}
.contact-box p{margin:0;font-size:20px;color:var(--muted);max-width:520px}
.handles{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;font-size:18px}
.handles a{color:var(--muted);padding:8px 0;word-break:break-all}

footer{position:relative;z-index:1;border-top:4px solid var(--line);padding:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;text-align:center;font-family:var(--pixel);font-size:10px;color:var(--muted);line-height:1.8}
.coin{display:inline-block;width:16px;height:16px;background:var(--accent);border:4px solid #ef7d57;animation:px-coin .8s steps(1) infinite}

/* секрет: код Konami */
.rain{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.rain i{position:absolute;top:-24px;width:16px;height:16px;background:var(--accent);border:4px solid #ef7d57;animation:px-fall 2.4s steps(24) forwards,px-coin .6s steps(1) infinite}
.toast{position:fixed;left:50%;top:24px;z-index:70;transform:translateX(-50%);background:var(--panel);border:4px solid var(--text);box-shadow:6px 6px 0 #000;padding:16px 20px;font-family:var(--pixel);font-size:12px;line-height:1.6;color:var(--green);text-align:center;max-width:calc(100% - 32px)}
.gold .avatar-frame{background:#29366f}

@keyframes px-fall{to{transform:translateY(calc(100vh + 48px))}}
@keyframes px-blink{0%{opacity:1}50%{opacity:0}}
@keyframes px-bob{0%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes px-twinkle{0%{opacity:.15}50%{opacity:1}}
@keyframes px-fill{0%{width:0}70%{width:100%}100%{width:100%}}
@keyframes px-coin{0%{transform:scaleX(1)}25%{transform:scaleX(.5)}50%{transform:scaleX(.15)}75%{transform:scaleX(.5)}}
@keyframes px-walk{0%{transform:translateX(-80px)}100%{transform:translateX(calc(100vw + 80px))}}

@media (max-width:600px){
  :root{--muted:#e3ebf1}
  .scan{opacity:.35}
  .stats,.lvl,footer{font-size:11px}
  .skill .ds,.step .ds{font-size:17px}
  nav{gap:4px;padding-top:12px;padding-bottom:4px}
  .logo{flex:1}
  .langs{order:2;font-size:9px}
  .langs a{padding:6px}
  .menu{order:3}
  .menu{width:100%;flex-wrap:nowrap;justify-content:space-between;gap:8px;font-size:9px}
  .menu a{padding:14px 0;white-space:nowrap}
  h1{font-size:22px}
  h2{font-size:16px}
  .contact-box h2{font-size:20px}
  .hero{padding:48px 0 40px;gap:36px}
  .char{min-width:0;width:100%}
}
@media (max-width:360px){
  .menu{font-size:8px;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  html{scroll-behavior:auto}
}