:root{
  color-scheme: dark;
  --bg:#000000;
  --panel:#050518;
  --panel-2:#0A0A2A;
  --maze:#2121FF;
  --maze-glow: rgba(33,33,255,.55);
  --yellow:#FFFF00;
  --red:#FF3131;
  --pink:#FFB8DE;
  --cyan:#39E5FF;
  --orange:#FFB851;
  --scared:#2626D6;
  --text:#FFFFFF;
  --text-dim:#B9BEFF;
  --text-faint:#6F74B8;
  --dot:#FFCEA6;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:21px; line-height:1.6; -webkit-font-smoothing:antialiased;
  position:relative;
}
.mono{ font-family: ui-monospace,"Cascadia Code","SF Mono","SFMono-Regular",Consolas,"Roboto Mono","Liberation Mono",monospace; }
.arcade{ font-family: ui-monospace,"Cascadia Code",Consolas,monospace; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
a{ color:inherit; }
::selection{ background:var(--yellow); color:#000; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; }

/* CRT scanline overlay */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:120;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}

/* ---------------- Boot / attract mode ---------------- */
#boot{
  position:fixed; inset:0; z-index:300; background:#000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  cursor:pointer; transition:opacity .5s ease, visibility .5s ease; padding:24px;
}
#boot.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.boot-title{ color:var(--yellow); font-size:clamp(1.6rem,5vw,2.6rem); text-shadow:0 0 14px var(--yellow); }
#bootCanvas{ width:min(560px,90vw); height:56px; }
.boot-lines{ min-height:2.4em; text-align:center; }
.boot-lines div{ color:var(--text-dim); font-size:clamp(12.5px,2.4vw,15.5px); letter-spacing:.08em; }
.boot-blink{ color:var(--pink); animation:blink 1s step-end infinite; font-size:14.5px; letter-spacing:.1em; }
@media (prefers-reduced-motion: reduce){ .boot-blink{ animation:none; } }
@keyframes blink{ 50%{ opacity:0; } }

/* ---------------- HUD ---------------- */
.hud{
  position:sticky; top:0; z-index:110; background:#000; border-bottom:3px solid var(--maze);
  display:flex; justify-content:space-between; align-items:center;
  padding:11px clamp(14px,4vw,32px); font-size:clamp(11.5px,2.1vw,15px);
}
.hud-item{ display:flex; flex-direction:column; gap:2px; align-items:center; }
.hud-label{ color:var(--text-dim); letter-spacing:.1em; }
.hud-score{ color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.hud-lives{ display:flex; align-items:center; gap:6px; color:var(--text-dim); letter-spacing:.08em; }

/* ---------------- Pac-Man + dots (reusable shapes) ---------------- */
.pac{ display:inline-block; width:16px; height:16px; border-radius:50%; background:var(--yellow);
  clip-path: polygon(100% 74%, 44% 46%, 100% 17%, 100% 0, 0 0, 0 100%, 100% 100%);
  animation: chomp .5s steps(1) infinite; flex:none; }
@keyframes chomp{
  0%,100%{ clip-path: polygon(100% 74%, 44% 46%, 100% 17%, 100% 0, 0 0, 0 100%, 100% 100%); }
  50%{ clip-path: polygon(100% 50%, 100% 50%, 100% 50%, 100% 0, 0 0, 0 100%, 100% 100%); }
}
@media (prefers-reduced-motion: reduce){ .pac{ animation:none; } }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--dot); flex:none; }
.pellet{ width:13px; height:13px; border-radius:50%; background:var(--dot); box-shadow:0 0 10px var(--dot);
  animation: pellet-pulse 1s ease-in-out infinite; flex:none; }
@keyframes pellet-pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.3); opacity:.6; } }
@media (prefers-reduced-motion: reduce){ .pellet{ animation:none; } }

/* ---------------- Scroll dot-rail ---------------- */
.rail{ position:fixed; left:14px; top:70px; bottom:14px; width:16px; z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
.rail .dot{ transition:opacity .25s ease; }
.rail .dot.eaten{ opacity:0; }
.rail-pac{ position:absolute; left:50%; transform:translate(-50%,-50%); top:0; }
@media (max-width:900px){ .rail{ display:none; } }

/* ---------------- Layout ---------------- */
.wrap{ max-width:980px; margin:0 auto; padding: 26px clamp(16px,4vw,32px) 80px; }
.jump{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 30px; }
.jump a{
  text-decoration:none; color:var(--text-dim); font-size:13.5px; padding:8px 14px;
  border:2px solid var(--maze); border-radius:20px; background:var(--panel);
  letter-spacing:.06em; transition:background .2s ease, color .2s ease;
}
.jump a:hover{ background:var(--maze); color:#fff; }

.maze-panel{
  background:var(--panel); border:3px solid var(--maze); border-radius:18px;
  box-shadow: 0 0 0 3px #000 inset, 0 0 20px var(--maze-glow);
  padding: clamp(22px,4vw,40px); margin-bottom:26px; position:relative;
}
.maze-panel::before, .maze-panel::after{
  content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:var(--maze); top:-6.5px;
}
.maze-panel::before{ left:22px; } .maze-panel::after{ right:22px; }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

.eyebrow{ display:flex; align-items:center; gap:10px; color:var(--pink); font-size:13.5px; margin-bottom:14px; }
h1,h2,h3{ margin:0; text-wrap:balance; }
h2.section-title{ font-size:clamp(1.7rem,3.2vw,2.2rem); color:var(--yellow); text-shadow:0 0 10px rgba(255,255,0,.3); margin-bottom:28px; }

/* Hero */
.hero-top{ display:flex; gap:clamp(20px,4vw,42px); align-items:flex-start; flex-wrap:wrap; margin-bottom:6px; }
.hero-main{ flex:1 1 260px; min-width:0; }

.player-frame{
  position:relative; width:154px; aspect-ratio:3/4; flex:none;
  border:3px solid var(--maze); border-radius:14px; overflow:hidden; background:#000;
  box-shadow: 0 0 0 3px #000 inset, 0 0 18px var(--maze-glow);
}
.player-frame img{ width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.06) saturate(.94); }
.player-tag{
  position:absolute; top:6px; left:6px; background:#000; border:1px solid var(--yellow); color:var(--yellow);
  font-size:9.5px; padding:3px 7px; border-radius:4px; letter-spacing:.05em;
}
.player-trail{ display:flex; align-items:center; gap:6px; margin-top:10px; justify-content:center; }
@media (max-width:480px){ .player-frame{ width:128px; } }

.hero-name{ font-size:clamp(2.4rem,6.4vw,3.9rem); color:var(--text); text-shadow:0 0 16px rgba(255,255,0,.25); margin-bottom:10px; }
.hero-role{ color:var(--cyan); font-size:clamp(.95rem,1.8vw,1.18rem); margin-bottom:22px; letter-spacing:.07em; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:8px; color:var(--text-dim); font-size:15px; margin-bottom:28px; }
.hero-meta .sep{ color:var(--text-faint); }
.profile-text{ max-width:66ch; color:var(--text-dim); font-size:1.18rem; line-height:1.8; margin:0 0 30px; }

.score-row{ display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,54px); padding-top:22px; border-top:2px dashed var(--maze); }
.score{ display:flex; flex-direction:column; gap:4px; }
.score-num{ font-family: ui-monospace,"Cascadia Code",Consolas,monospace; font-size:clamp(2rem,3.4vw,2.5rem); font-weight:700; color:var(--yellow); font-variant-numeric:tabular-nums; }
.score-lbl{ font-size:14px; color:var(--text-dim); max-width:18ch; letter-spacing:.03em; }

/* Ghost gallery */
.ghost-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.ghost-card{ background:var(--panel-2); border:2px solid var(--maze); border-radius:14px; padding:22px 16px 18px; text-align:center; transition:transform .2s ease, border-color .2s ease; }
.ghost-card:hover{ transform:translateY(-4px); border-color:var(--yellow); }
.ghost{ position:relative; width:56px; height:56px; margin:0 auto 22px; background:var(--gc); border-radius:50% 50% 0 0/60% 60% 0 0; filter:drop-shadow(0 0 8px var(--gc)); transition:background .25s ease; }
.ghost::after{
  content:""; position:absolute; left:0; right:0; bottom:-9px; height:12px; background:var(--gc);
  clip-path:polygon(0 0,12.5% 100%,25% 0,37.5% 100%,50% 0,62.5% 100%,75% 0,87.5% 100%,100% 0,100% 0);
  transition:background .25s ease;
}
.ghost .eye{ position:absolute; top:15px; width:13px; height:17px; background:#fff; border-radius:50%; }
.ghost .eye:nth-child(1){ left:8px; } .ghost .eye:nth-child(2){ right:8px; }
.ghost .pupil{ position:absolute; width:6px; height:6px; border-radius:50%; background:#1a1a4d; top:6px; left:3.5px; }
.ghost-card:hover .ghost, .ghost-card:hover .ghost::after{ background:var(--scared); }
.ghost-card h3{ font-size:17px; margin-bottom:12px; color:var(--text); }
.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.chip{ font-size:12.5px; padding:4px 9px; border-radius:10px; background:#000; border:1px solid var(--maze); color:var(--text-dim); font-family: ui-monospace,"Cascadia Code",Consolas,monospace; }

/* Levels (experience) */
.level{ display:flex; gap:20px; padding:22px 0; border-bottom:2px dashed var(--maze); }
.level:last-child{ border-bottom:none; padding-bottom:0; }
.level:first-child{ padding-top:0; }
.level-badge{
  flex:none; width:82px; height:82px; border:2px solid var(--lc); border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--lc); font-size:12px; letter-spacing:.05em; text-align:center; background:#000;
}
.level-badge b{ font-size:22px; display:block; }
.level-info{ min-width:0; }
.level-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; margin-bottom:4px; }
.level-role{ font-weight:700; font-size:18.5px; color:var(--text); }
.level-co{ font-size:16px; color:var(--cyan); }
.level-meta{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-faint); margin-bottom:12px; letter-spacing:.03em; }
.level-bullets{ margin:0; padding-left:0; list-style:none; color:var(--text-dim); font-size:15.5px; line-height:1.85; }
.level-bullets li{ display:flex; gap:9px; align-items:flex-start; }
.level-bullets li .dot{ margin-top:9px; }

/* Bonus fruit (education) */
.fruit-row{ display:flex; flex-direction:column; gap:16px; }
.fruit-item{ display:grid; grid-template-columns:56px 90px 1fr; gap:16px; align-items:center; }
@media (max-width:600px){ .fruit-item{ grid-template-columns:40px 1fr; } .fruit-pts{ display:none; } }
.fruit-icon{ font-size:34px; text-align:center; filter:drop-shadow(0 0 6px rgba(255,255,255,.15)); }
.fruit-pts{ font-family: ui-monospace,"Cascadia Code",Consolas,monospace; color:var(--yellow); font-size:14px; text-align:center; }
.fruit-title{ font-weight:700; color:var(--text); font-size:17px; }
.fruit-org{ color:var(--text-dim); font-size:14px; }
.fruit-date{ color:var(--text-faint); font-size:12.5px; letter-spacing:.04em; }

/* Power-ups (languages) */
.power-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-bottom:32px; }
.power-card{ background:var(--panel-2); border:2px solid var(--maze); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.power-name{ font-weight:700; color:var(--text); font-size:17px; }
.power-dots{ display:flex; align-items:center; gap:7px; }
.power-dots .dot.dim{ background:#2a2a4a; }
.power-level{ font-size:13px; color:var(--text-dim); letter-spacing:.03em; }

.extra-row{ display:flex; flex-wrap:wrap; gap:26px; padding-top:22px; border-top:2px dashed var(--maze); font-size:14px; }
.extra-item{ display:flex; flex-direction:column; gap:5px; }
.extra-item .k{ color:var(--text-faint); text-transform:uppercase; letter-spacing:.07em; font-size:11.5px; }
.extra-item .v{ color:var(--text-dim); max-width:32ch; }

/* Contact / continue screen */
.continue-title{ text-align:center; color:var(--pink); font-size:clamp(1.45rem,3.6vw,2.05rem); margin-bottom:8px; text-shadow:0 0 12px rgba(255,184,222,.4); }
.continue-sub{ text-align:center; color:var(--text-dim); font-size:14.5px; margin-bottom:30px; letter-spacing:.05em; }
.coin-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-bottom:30px; }
.coin{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none;
  width:132px; padding:18px 10px; border:2px solid var(--yellow); border-radius:50% / 22%;
  background:#000; color:var(--yellow); transition:background .2s ease, color .2s ease, transform .2s ease;
}
.coin:hover{ background:var(--yellow); color:#000; transform:translateY(-3px); }
.coin .lbl{ font-size:11px; letter-spacing:.08em; }
.coin .val{ font-size:13px; font-family: ui-monospace,"Cascadia Code",Consolas,monospace; word-break:break-word; text-align:center; }
.insert-coin{ display:block; text-align:center; color:var(--text-dim); font-size:13.5px; letter-spacing:.08em; margin-bottom:8px; animation:blink 1.2s step-end infinite; }
@media (prefers-reduced-motion: reduce){ .insert-coin{ animation:none; } }
.footer-sig{ text-align:center; color:var(--text-faint); font-size:12.5px; margin-top:30px; letter-spacing:.04em; }

/* ---------------- Small screens ---------------- */
@media (max-width:520px){
  .hero-top{ flex-direction:column; align-items:center; text-align:center; }
  .hero-meta{ justify-content:center; }
  .score-row{ justify-content:center; text-align:center; }
  .score{ align-items:center; }
}