@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

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

:root {
  --pixel: 'Press Start 2P', monospace;
  --bg:      #0a0a1a;
  --gold:    #ffd700;
  --green:   #00ff88;
  --red:     #ff4466;
  --blue:    #4488ff;
  --purple:  #cc44ff;
  --cyan:    #00eeff;
  --text:    #e8e8ff;
  --muted:   #8888aa;
  --border:  #333366;
  --card:    rgba(10,10,40,0.88);
  --gg: 0 0 8px #ffd700, 0 0 22px #ffd70055;
  --gn: 0 0 8px #00ff88, 0 0 22px #00ff8844;
  --gr: 0 0 8px #ff4466, 0 0 22px #ff446644;
  --gb: 0 0 8px #4488ff, 0 0 22px #4488ff44;
  --gp: 0 0 8px #cc44ff, 0 0 22px #cc44ff44;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--pixel);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  cursor: url('./sword.svg') 18 13, auto;
}

a,
button,
.nav-dot,
.contact-card,
.lang-btn,
[role="button"] {
  cursor: url('./sword.svg') 18 13, pointer;
}

/* language switcher */
.lang-switcher {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 120;
  display: flex;
  gap: 6px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.42);
  border: 2px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  backdrop-filter: blur(2px);
}

.lang-btn {
  font-family: var(--pixel);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--muted);
  background: #101028;
  border: 2px solid var(--border);
  padding: 6px 9px;
  cursor: url('./sword.svg') 18 13, pointer;
  transition: color .15s, border-color .15s, box-shadow .15s, transform .15s;
}

.lang-btn:hover {
  color: var(--gold);
  border-color: var(--gold);
  box-shadow: var(--gg);
  transform: translateY(-1px);
}

.lang-btn.active {
  color: #0a0a1a;
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: var(--gg);
}

/* scanlines */
body::after {
  content:'';
  position:fixed; inset:0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px);
  pointer-events:none;
  z-index:9998;
}

/* ── SECTIONS ─────────────────────────────── */
.scene {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 82px 48px 0;
  overflow: hidden;
}

#scene-intro   { background: linear-gradient(170deg,#123a67 0%,#2d6fb0 48%,#8ec8ff 100%); }
#scene-skills  { background: linear-gradient(170deg,#001408 0%,#002816 50%,#00100a 100%); }
#scene-quests  { background: linear-gradient(170deg,#1a0600 0%,#280e00 50%,#0e0008 100%); }
#scene-battle  { background: linear-gradient(170deg,#1a0000 0%,#280008 50%,#0a001a 100%); }
#scene-contact { background: linear-gradient(170deg,#52264d 0%,#91507b 45%,#f4b3c7 100%); }

/* ── STAGE (bottom pixel canvas) ─────────── */
.stage-wrap {
  width: 100%;
  margin-top: auto;
  flex-shrink: 0;
}

.stage-canvas {
  display: block;
  width: 100%;
  height: 210px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ── SCENE CONTENT ───────────────────────── */
.scene-content {
  max-width: 1040px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 24px;
}

/* entrance */
.scene-content > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.scene.in-view .scene-content > * { opacity:1; transform:translateY(0); }
.scene.in-view .scene-content > *:nth-child(1){ transition-delay:.10s }
.scene.in-view .scene-content > *:nth-child(2){ transition-delay:.20s }
.scene.in-view .scene-content > *:nth-child(3){ transition-delay:.30s }
.scene.in-view .scene-content > *:nth-child(4){ transition-delay:.40s }
.scene.in-view .scene-content > *:nth-child(5){ transition-delay:.50s }
.scene.in-view .scene-content > *:nth-child(6){ transition-delay:.60s }

/* ── PIXEL LABEL ─────────────────────────── */
.pixel-label {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 4px;
  text-shadow: var(--gg);
  animation: blink 1.2s step-end infinite;
}
@keyframes blink { 50%{ opacity:0 } }

/* ── GLITCH TITLE ────────────────────────── */
.glitch-title {
  font-size: clamp(18px, 3.8vw, 42px);
  color: var(--gold);
  text-shadow: var(--gg);
  position: relative;
  display: inline-block;
  letter-spacing: 3px;
  line-height: 1.5;
}
.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute; top:0; left:0; width:100%;
}
.glitch-title::before {
  color: var(--cyan);
  animation: g1 3.5s infinite;
  clip-path: polygon(0 0,100% 0,100% 42%,0 42%);
}
.glitch-title::after {
  color: var(--red);
  animation: g2 3.5s infinite;
  clip-path: polygon(0 58%,100% 58%,100% 100%,0 100%);
}
@keyframes g1{
  0%,88%,100%{ transform:translate(0); opacity:0 }
  90%{ transform:translate(-3px,1px); opacity:.8 }
  93%{ transform:translate(3px,-1px); opacity:.8 }
  95%{ transform:translate(0); opacity:0 }
}
@keyframes g2{
  0%,88%,100%{ transform:translate(0); opacity:0 }
  91%{ transform:translate(3px,2px); opacity:.8 }
  94%{ transform:translate(-3px,-2px); opacity:.8 }
  96%{ transform:translate(0); opacity:0 }
}

.subtitle {
  font-size: 16px;
  color: var(--cyan);
  letter-spacing: 2px;
  text-shadow: var(--gb);
  line-height: 2;
}

/* ── STAT BOXES ──────────────────────────── */
.hero-stats { display:flex; gap:14px; flex-wrap:wrap; }

.stat-box {
  background: var(--card);
  border: 2px solid var(--gold);
  min-width: 190px;
  padding: 12px 16px;
  display: flex; flex-direction: column; gap:6px;
  box-shadow: var(--gg), inset 0 0 18px rgba(255,215,0,.04);
}
.stat-label { font-size:10px; color:var(--muted); letter-spacing:2px; }
.stat-value { font-size:14px; color:var(--gold); text-shadow:var(--gg); }

.scroll-hint {
  font-size:12px; color:var(--muted); letter-spacing:1.5px;
  animation: bounce 1.6s ease-in-out infinite;
  margin-top:8px;
}
@keyframes bounce{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(6px) } }

/* ── SECTION TITLES ──────────────────────── */
.section-title {
  font-size: clamp(20px, 3vw, 34px);
  color: var(--green);
  text-shadow: var(--gn);
  letter-spacing: 3px;
  position: relative;
  padding-bottom: 10px;
}
.section-title::after {
  content:'';
  position:absolute; bottom:0; left:0; width:100%; height:2px;
  background: repeating-linear-gradient(90deg, var(--green) 0, var(--green) 6px, transparent 6px, transparent 12px);
}
#scene-battle  .section-title { color:var(--red);    text-shadow:var(--gr); }
#scene-battle  .section-title::after { background:repeating-linear-gradient(90deg,var(--red) 0,var(--red) 6px,transparent 6px,transparent 12px); }
#scene-contact .section-title { color:var(--purple); text-shadow:var(--gp); }
#scene-contact .section-title::after { background:repeating-linear-gradient(90deg,var(--purple) 0,var(--purple) 6px,transparent 6px,transparent 12px); }

.section-desc {
  max-width: 72ch;
  font-size:13px;
  color:var(--muted);
  letter-spacing:.6px;
  line-height:1.85;
}

/* ── SKILLS ──────────────────────────────── */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.skill-card {
  background: var(--card);
  border: 2px solid var(--border);
  padding: 16px;
  position: relative; overflow:hidden;
  transition: border-color .2s, box-shadow .2s;
}
.skill-card::before {
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);
  transition: left .5s;
}
.skill-card:hover::before { left:150%; }
.skill-card:hover { border-color:var(--green); box-shadow:var(--gn); }

.skill-icon  { font-size:20px; margin-bottom:7px; }
.skill-name  { font-size:12px; color:var(--text); letter-spacing:.8px; margin-bottom:10px; }

.skill-bar {
  height:7px; background:#12122a; border:1px solid var(--border);
  margin-bottom:9px; overflow:hidden;
}
.skill-fill {
  height:100%; width:0;
  background: linear-gradient(90deg,var(--green),var(--cyan));
  box-shadow: 0 0 8px var(--green);
  transition: width 1.3s cubic-bezier(.25,1,.5,1);
  position:relative;
}
.skill-fill::after {
  content:''; position:absolute; right:0; top:0; bottom:0;
  width:3px; background:#fff; opacity:.5;
}
.skill-card.visible .skill-fill { width:var(--w); }

.skill-tags { display:flex; gap:5px; flex-wrap:wrap; }
.skill-tags span {
  font-size:10px; padding:5px 8px;
  border:1px solid var(--border); color:var(--muted); letter-spacing:1px;
}

/* ── QUESTS ──────────────────────────────── */
.quest-list { display:flex; flex-direction:column; gap:16px; }

.quest-item {
  background: var(--card);
  border: 2px solid var(--border);
  border-left: 4px solid var(--border);
  padding: 18px 20px;
  display: flex; gap:16px;
}
.quest-item.completed { border-left-color:var(--green); }
.quest-item.active {
  border-left-color:var(--gold);
  box-shadow:var(--gg);
  animation: pulse-gold 2.2s ease-in-out infinite;
}
@keyframes pulse-gold{
  0%,100%{ box-shadow:var(--gg) }
  50%{ box-shadow:0 0 24px #ffd700,0 0 48px #ffd70033 }
}

.quest-status { font-size:11px; white-space:nowrap; min-width:112px; padding-top:2px; color:var(--muted); }
.quest-item.completed .quest-status { color:var(--green); }
.quest-item.active    .quest-status { color:var(--gold); }

.quest-info { flex:1; display:flex; flex-direction:column; gap:8px; }
.quest-title  { font-size:16px; color:var(--text); letter-spacing:.8px; }
.quest-period { font-size:11px; color:var(--muted); }
.quest-desc   { font-size:12px; color:#aac; line-height:1.95; font-family:'Courier New',monospace; letter-spacing:.2px; }
.quest-reward { font-size:11px; color:var(--gold); text-shadow:var(--gg); letter-spacing:.6px; padding-top:4px; }

/* ── ACHIEVEMENTS ────────────────────────── */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px,1fr));
  gap: 16px;
}
.achievement-card {
  background: var(--card);
  border: 2px solid var(--red);
  padding: 18px 14px;
  text-align:center;
  display:flex; flex-direction:column; gap:7px;
  box-shadow:var(--gr);
  transition: transform .2s;
}
.achievement-card:hover { transform:translateY(-4px); }
.ach-icon   { font-size:26px; }
.ach-number { font-size:22px; color:var(--red); text-shadow:var(--gr); }
.ach-label  { font-size:12px; color:var(--text); letter-spacing:.8px; }
.ach-sub    { font-size:10px; color:var(--muted); letter-spacing:.6px; }

.cert-section { margin-top:6px; }
.cert-title   { font-size:12px; color:var(--gold); letter-spacing:1.2px; margin-bottom:10px; }
.cert-list    { display:flex; gap:8px; flex-wrap:wrap; }
.cert-badge {
  font-size:11px; padding:7px 12px;
  border:2px solid var(--gold); color:var(--gold);
  text-shadow:var(--gg); box-shadow:var(--gg); letter-spacing:1px;
  transition:background .2s;
}
.cert-badge:hover { background:rgba(255,215,0,.1); }

/* ── CONTACT / ENDING ────────────────────── */
.ending-box {
  background: var(--card);
  border: 2px solid var(--purple);
  padding: 22px 24px;
  box-shadow: var(--gp);
  display:flex; flex-direction:column; gap:20px;
}
.ending-text { font-size:14px; color:var(--cyan); line-height:2; letter-spacing:.5px; }

.contact-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
  gap:12px;
}
.contact-card {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:16px; border:2px solid var(--border);
  text-decoration:none; background:rgba(0,0,0,.3);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.contact-card:hover { border-color:var(--purple); box-shadow:var(--gp); transform:translateY(-3px); }
.contact-icon  { font-size:22px; }
.contact-label { font-size:11px; color:var(--muted); letter-spacing:1.1px; }
.contact-value { font-size:12px; color:var(--purple); text-shadow:var(--gp); letter-spacing:.5px; }

.game-over { text-align:center; padding:16px; }
.go-text {
  font-size:clamp(11px,1.8vw,18px); color:var(--gold); text-shadow:var(--gg);
  letter-spacing:4px; animation:rainbow 3s linear infinite;
}
.go-sub { font-size:11px; color:var(--muted); margin-top:8px; letter-spacing:1.1px; }

@keyframes rainbow{
  0%  { color:var(--gold);   text-shadow:var(--gg) }
  25% { color:var(--green);  text-shadow:var(--gn) }
  50% { color:var(--cyan);   text-shadow:var(--gb) }
  75% { color:var(--purple); text-shadow:var(--gp) }
  100%{ color:var(--gold);   text-shadow:var(--gg) }
}

/* ── PROGRESS BAR ────────────────────────── */
.progress-bar {
  position:fixed; top:0; left:0; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--green));
  box-shadow:0 0 8px var(--gold);
  z-index:100; transition:width .1s;
}

/* ── CHAPTER NAV ─────────────────────────── */
.chapter-nav {
  position:fixed; right:18px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:11px; z-index:100;
}
.nav-dot {
  width:9px; height:9px;
  background:var(--border); border:2px solid var(--border);
  display:block; image-rendering:pixelated;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.nav-dot:hover, .nav-dot.active {
  background:var(--gold); border-color:var(--gold);
  box-shadow:var(--gg); transform:scale(1.5);
}

/* ── INTRO QUOTE ─────────────────────────── */
.intro-quote {
  background: var(--card);
  border-left: 3px solid var(--cyan);
  max-width: 78ch;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.intro-quote p {
  font-size: 13px;
  color: #aaccee;
  letter-spacing: 1px;
  line-height: 2.2;
  font-family: 'Courier New', monospace;
}

/* ── QUEST EXTRAS ────────────────────────── */
.quest-item.edu {
  border-left: 4px solid var(--purple);
}
.quest-item.edu .quest-status { color: var(--purple); }
.quest-desc b { color: var(--gold); }
.highlight-gold { color: var(--gold); text-shadow: var(--gg); }

/* ── TWO COLUMN / FOCUS BOXES ────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.focus-box {
  background: var(--card);
  border: 2px solid var(--border);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.focus-title {
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 2px;
  text-shadow: var(--gg);
}

.focus-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.focus-list li {
  font-size: 11px;
  color: #aac;
  letter-spacing: 1px;
  line-height: 1.8;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.dot-g { color: var(--green); flex-shrink: 0; }
.dot-b { color: var(--blue);  flex-shrink: 0; }

/* ── VISION BOX ──────────────────────────── */
.vision-box {
  border: 1px solid var(--border);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vision-title {
  font-size: 12px;
  color: var(--purple);
  letter-spacing: 2px;
  text-shadow: var(--gp);
}
.vision-text {
  font-size: 12px;
  color: #aac;
  line-height: 2.05;
  letter-spacing: 0.8px;
  font-family: 'Courier New', monospace;
}
.hl-gold { color: var(--gold); text-shadow: var(--gg); }

@media(max-width:980px){
  .scene { padding: 74px 28px 0; }
  .scene-content { max-width: 900px; }
  .hero-stats { gap: 10px; }
  .stat-box { min-width: 160px; }
  .quest-item { gap: 12px; }
  .two-col { grid-template-columns: 1fr; }
}

/* ── RESPONSIVE ──────────────────────────── */
@media(max-width:680px){
  .lang-switcher { top: 8px; left: 8px; padding: 4px; gap: 4px; }
  .lang-btn { font-size: 9px; padding: 6px 8px; }
  .pixel-label { font-size: 11px; }
  .subtitle { font-size: 13px; }
  .section-desc { font-size: 11px; }
  .skill-name { font-size: 11px; }
  .quest-title { font-size: 14px; }
  .quest-period, .quest-reward, .quest-status { font-size: 10px; }
  .quest-desc { font-size: 11px; }
  .ending-text { font-size: 12px; }
  .contact-label { font-size: 10px; }
  .contact-value { font-size: 11px; }
  .scene { padding:58px 18px 0; }
  .skills-grid { grid-template-columns:1fr; }
  .quest-item { flex-direction:column; }
  .achievements-grid { grid-template-columns:repeat(2,1fr); }
  .two-col { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .chapter-nav  { right:7px; }
  .stage-canvas { height:160px; }
}