/* fonts are self-hosted (no request to Google) – SIL Open Font License */
@font-face { font-family: 'Silkscreen'; font-weight: 400; font-style: normal; font-display: swap; src: url(assets/fonts/silkscreen-400.woff2) format('woff2'); }
@font-face { font-family: 'Silkscreen'; font-weight: 700; font-style: normal; font-display: swap; src: url(assets/fonts/silkscreen-700.woff2) format('woff2'); }
@font-face { font-family: 'VT323'; font-weight: 400; font-style: normal; font-display: swap; src: url(assets/fonts/vt323-400.woff2) format('woff2'); }

:root {
  --page: #dde8fd;
  --ink: #1c1c2b;
  --muted: #6a6e8c;
  --blue: #1f6bff;
  --blue-d: #1450cc;
  --blue-dd: #0e3a99;
  --blue-l: #5b93ff;
  --scr: #1b1b1b;
  --txt: #f1f1f1;
  --dim: #8d8d9c;
  --pink: #d8399f;
  --pink-d: #8f1a66;
  --yellow: #ffd23f;
  --green: #62d96b;
  --cyan: #59c8ff;
  --pixel: 'Silkscreen', ui-monospace, monospace;
  --mono: 'VT323', ui-monospace, monospace;
  --cw: min(1000px, 56vw);
  --arw: 4 / 3;
  --sf: clamp(11px, 3.35cqw, 44px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: radial-gradient(ellipse at 72% 45%, #edf3ff 0, var(--page) 55%) fixed, var(--page);
  color: var(--ink);
  font-family: var(--pixel);
  -webkit-font-smoothing: none;
  font-smooth: never;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible { outline: 3px dashed var(--blue); outline-offset: 3px; }
img { image-rendering: pixelated; }

/* ---------- page background ---------- */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cloud { position: absolute; left: 0; image-rendering: pixelated; animation: drift linear infinite; opacity: .85; }
@keyframes drift { from { transform: translateX(-20vw); } to { transform: translateX(110vw); } }
.twinkle { position: absolute; width: 15px; height: 15px; image-rendering: pixelated; animation: twinkle 2.4s steps(1) infinite; }
@keyframes twinkle { 0%, 60% { opacity: 0; } 61%, 80% { opacity: 1; } 81% { opacity: .4; } 90% { opacity: 1; } }

/* ---------- layout ---------- */
.layout {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(280px, 1fr) auto;
  gap: 4vw; align-items: start;
  max-width: 1600px; min-height: 100vh; margin: 0 auto; padding: 24px 5vw;
}

/* ---------- sidebar ---------- */
.side { position: sticky; top: 0; align-self: start; padding-top: max(24px, 6vh); animation: slideIn .6s steps(6) both; }
@keyframes slideIn { from { transform: translateX(-40px); opacity: 0; } }
.intro { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.avatar-wrap { flex: none; width: clamp(96px, 8vw, 150px); height: clamp(96px, 8vw, 150px); border-radius: 50%; animation: bob 2s steps(2) infinite; }
.avatar { width: 100%; height: 100%; display: block; transition: transform .2s steps(3); }
.avatar-wrap:hover .avatar { transform: rotate(-8deg) scale(1.05); }
.avatar-wrap::after {
  content: 'NEW GAME?'; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); white-space: nowrap;
  font-size: 10px; padding: 3px 6px; background: var(--scr); color: var(--yellow); opacity: 0; pointer-events: none; transition: opacity .1s steps(1);
}
.avatar-wrap { position: relative; }
.avatar-wrap:hover::after, .avatar-wrap:focus-visible::after { opacity: 1; }
.pause-text { margin: 0 0 .9em; text-align: center; font-size: .7em; color: var(--dim); }
@keyframes bob { 50% { transform: translateY(-4px); } }
.accent-bar { display: block; width: 64px; height: 4px; background: var(--blue); margin-bottom: 16px; animation: grow 1s steps(8) .3s both; }
@keyframes grow { from { width: 0; } }
.hello { margin: 0; overflow-wrap: anywhere; font-size: clamp(18px, 1.75vw, 30px); font-weight: 700; letter-spacing: .02em; min-height: 1.2em; }
.hello.typing::after { content: '_'; animation: blink .5s steps(1) infinite; }
.role { margin: 10px 0 0; color: var(--muted); font-size: clamp(14px, 1.3vw, 18px); }

.menu { margin-top: 56px; }
.menu-label { color: var(--muted); font-size: 16px; margin: 0 0 22px; }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.menu button {
  position: relative; padding: 6px 0 6px 28px; font-size: clamp(16px, 1.45vw, 20px); font-weight: 700; letter-spacing: .03em;
  transition: transform .15s steps(2), color .15s steps(2);
}
.menu button:hover { transform: translateX(6px); color: var(--blue); }
.menu button[aria-current="true"] { color: var(--blue); }
.menu button[aria-current="true"]::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 12px; height: 22px; margin-top: -11px;
  background: var(--blue); clip-path: polygon(0 0, 100% 50%, 0 100%); animation: nudge .8s steps(2) infinite;
}
.menu button.seen::after { content: '✓'; margin-left: 10px; color: var(--green); font-size: .8em; }
/* sub menus: open for the active section, on hover/focus for the others */
.menu .sub { display: none; list-style: none; margin: 4px 0 6px 30px; padding: 0 0 0 12px; border-left: 2px dashed #b4c4ec; gap: 0; }
.menu li.open > .sub, .menu li.has-sub:hover > .sub, .menu li.has-sub:focus-within > .sub { display: grid; animation: appear .2s steps(2); }
.menu .sub button, .menu .subnav button {
  font-size: 13px; font-weight: 400; letter-spacing: .02em; padding: 4px 0 4px 14px; color: #3d4160; text-align: left; line-height: 1.3;
}
.menu .sub button:hover { transform: translateX(4px); color: var(--blue); }
.menu .sub button[aria-current="true"] { color: var(--blue); font-weight: 700; }
.menu .sub button[aria-current="true"]::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 10px; margin-top: -5px;
  background: var(--blue); clip-path: polygon(0 0, 100% 50%, 0 100%); animation: nudge .8s steps(2) infinite;
}
.menu .sub button::after { content: none; }
.menu .subnav { display: none; }
.side { max-height: 100vh; overflow-y: auto; scrollbar-width: none; }
@keyframes nudge { 50% { transform: translateX(4px); } }

.side-foot { margin-top: 48px; display: grid; gap: 16px; max-width: 360px; }
.explored { display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.explored b { color: var(--ink); }
.explored-bar { display: flex; gap: 4px; }
.explored-bar i { width: 28px; height: 12px; background: #c3d3f7; box-shadow: inset 0 -3px 0 #aebfe8; }
.explored-bar i.on { background: var(--green); box-shadow: inset 0 -3px 0 #3ea548; animation: pop .3s steps(3); }
@keyframes pop { 50% { transform: scale(1.4); } }
.toggles { display: flex; gap: 10px; flex-wrap: wrap; }
.toggle {
  font-size: 12px; padding: 8px 12px; background: #fff; border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); transition: transform .08s steps(1), box-shadow .08s steps(1);
}
.toggle:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.toggle[aria-pressed="false"] { color: var(--muted); border-color: var(--muted); box-shadow: 3px 3px 0 var(--muted); }
.rules-link { justify-self: start; font-size: 12px; color: var(--muted); text-decoration: none; border-bottom: 2px dashed currentColor; padding-bottom: 2px; }
.rules-link:hover, .rules-link[aria-current="true"] { color: var(--blue); }
.keys-hint { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.7; }

/* ---------- console ---------- */
.layout > * { min-width: 0; }
.console-wrap { display: grid; justify-items: center; padding-top: max(16px, 4vh); }
.console {
  position: relative; width: var(--cw); container-type: inline-size;
  padding: 1.6cqw 1.6cqw 0; border-radius: 3.5cqw 3.5cqw 12cqw 3.5cqw;
  background: linear-gradient(180deg, #2c7bff 0%, var(--blue) 40%, #1a62f2 100%);
  box-shadow:
    inset 0 .5cqw 0 rgba(255,255,255,.25), inset 0 -1.2cqw 0 var(--blue-d), inset .6cqw 0 0 rgba(255,255,255,.08),
    0 3cqw 9cqw rgba(31,107,255,.35), 0 0 0 .35cqw var(--blue-d);
  animation: powerUp .9s steps(9) both .15s;
}
@keyframes powerUp { from { transform: translateY(60px); opacity: 0; } }

.bezel {
  position: relative; padding: 4.5cqw 5cqw 2.2cqw; border-radius: 2.6cqw 2.6cqw 2.6cqw 2.6cqw;
  background: linear-gradient(#111, #070707); box-shadow: inset 0 0 0 .3cqw #222, 0 .6cqw 0 var(--blue-d);
}
.power-led {
  position: absolute; left: 1.8cqw; top: 22%; width: 1.4cqw; height: 1.4cqw; border-radius: 50%;
  background: #ff3b3b; box-shadow: 0 0 1.6cqw #ff3b3b; animation: led 3s steps(1) infinite;
}
.power-label { position: absolute; left: .9cqw; top: calc(22% + 2.2cqw); font-size: 1.1cqw; color: #666; writing-mode: vertical-rl; letter-spacing: .1em; }
@keyframes led { 0%, 92% { opacity: 1; } 93%, 96% { opacity: .35; } }

.screen {
  position: relative; overflow: hidden; aspect-ratio: var(--ar, 4 / 3); container-type: size;
  background: var(--scr); color: var(--txt);
  line-height: 1.5;
}
.screen-content, .pause, .coin-pop { font-size: var(--sf); }
.screen-content { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5cqh 5cqw 4cqh; }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; z-index: 5; }
.scanlines { position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: 0; transition: opacity .2s steps(2); }
/* CRT: scanlines + RGB mask + vignette + glass glare + rolling bar + phosphor glow */
.crt { border-radius: 1.4cqw; }
.crt .scanlines {
  opacity: 1;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(255,40,40,.05) 0 1px, rgba(40,255,90,.05) 1px 2px, rgba(40,90,255,.05) 2px 3px);
  box-shadow: inset 0 0 3cqw rgba(0,0,0,.35), inset 0 0 .6cqw rgba(0,0,0,.5);
  border-radius: inherit;
  animation: flicker 5s steps(1) infinite;
}
.crt .scanlines::before {
  content: ''; position: absolute; left: 0; right: 0; top: -20%; height: 18%;
  background: linear-gradient(transparent, rgba(255,255,255,.07) 45%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.07) 55%, transparent);
  animation: roll 7s linear infinite;
}
.crt .scanlines::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background:
    radial-gradient(ellipse 60% 45% at 22% 12%, rgba(255,255,255,.09), transparent 70%),
    radial-gradient(ellipse at center, transparent 72%, rgba(0,0,0,.18) 100%);
}
.crt .screen-content {
  text-shadow: 1px 0 rgba(255,40,90,.35), -1px 0 rgba(40,200,255,.35), 0 0 5px rgba(255,255,255,.25);
  filter: contrast(1.08) saturate(1.12) brightness(1.04);
  animation: jitter 9s steps(1) infinite;
}
.crt .screen-content img { filter: drop-shadow(1.5px 0 rgba(255,40,90,.35)) drop-shadow(-1.5px 0 rgba(40,200,255,.35)); }
@keyframes flicker { 0%, 95% { opacity: 1; } 96% { opacity: .82; } 97% { opacity: .95; } 98% { opacity: 1; } }
@keyframes roll { to { top: 110%; } }
@keyframes jitter { 0%, 96% { transform: none; } 97% { transform: translateX(2px) skewX(-.6deg); } 98% { transform: translateX(-1px); } 99% { transform: none; } }

.brand { margin: 1.6cqw 0 0; text-align: center; font-size: 2cqw; color: #8b8fa3; letter-spacing: .08em; font-weight: 700; }
.brand i { font-style: italic; color: #b9bdd0; }
.brand span:nth-child(2) { color: #ff4f7b; } .brand span:nth-child(3) { color: #ffd23f; }
.brand span:nth-child(4) { color: #62d96b; } .brand span:nth-child(5) { color: #59c8ff; } .brand span:nth-child(6) { color: #b36bff; }

/* zoom */
.zoom-btn {
  position: absolute; right: 1.6cqw; top: 1cqw; display: flex; align-items: center; gap: .6cqw;
  font-size: 1.5cqw; color: #9aa0b8; padding: .4cqw .8cqw; border: 2px solid #333; background: #151515;
  transition: color .1s steps(1), border-color .1s steps(1);
}
.zoom-btn svg { width: 1.8cqw; height: 1.8cqw; fill: currentColor; }
.zoom-btn:hover { color: var(--yellow); border-color: var(--yellow); }
.zoom-layer { position: fixed; inset: 0; z-index: 45; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 16px; background: rgba(12,18,40,.88); animation: appear .25s steps(3); }
.zoom-frame { width: min(94vw, calc((100vh - 90px) * var(--arw))); padding: 10px; background: #0b0b0b; border: 4px solid var(--blue); box-shadow: 0 0 0 4px #0b0b0b, 0 0 60px rgba(31,107,255,.45); }
.zoom-hint { margin: 0; color: #c9d4f5; font-size: 12px; text-align: center; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; }
.zoom-hint button { color: #fff; border: 2px solid #fff; padding: 6px 10px; font-size: 12px; }
.zoom-hint button:hover { color: var(--yellow); border-color: var(--yellow); }
body.zoomed { overflow: hidden; }
.zoom-frame .screen { --sf: clamp(13px, 2.75cqw, 32px); }

/* controls */
.controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6cqw 6cqw 12cqw; gap: 4cqw; }
.dpad { position: relative; width: 31cqw; height: 31cqw; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); filter: drop-shadow(0 .8cqw 0 #3b3b44); }
.d { background: #5f5f68; display: grid; place-items: center; transition: transform .06s steps(1), filter .06s steps(1); }
.d svg { width: 55%; height: 55%; fill: #3a3a42; }
.d.up { grid-area: 1 / 2; border-radius: 1.6cqw 1.6cqw 0 0; box-shadow: inset 0 .5cqw 0 #77777f; }
.d.left { grid-area: 2 / 1; border-radius: 1.6cqw 0 0 1.6cqw; box-shadow: inset .5cqw 0 0 #77777f; }
.d.mid { grid-area: 2 / 2; background: #5f5f68 radial-gradient(circle, #6c6c74 0 30%, transparent 32%); }
.d.right { grid-area: 2 / 3; border-radius: 0 1.6cqw 1.6cqw 0; }
.d.down { grid-area: 3 / 2; border-radius: 0 0 1.6cqw 1.6cqw; }
.d:hover { filter: brightness(1.12); }
.d.pressed, .d:active { filter: brightness(.8); transform: scale(.94); }

.menu-btn { display: grid; justify-items: center; gap: 1.4cqw; align-self: start; margin-top: 1cqw; }
.menu-btn button {
  width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6a6a72, #2c2c33);
  box-shadow: 0 0 0 1.4cqw rgba(13,58,153,.45), 0 .6cqw 0 #111; transition: transform .06s steps(1);
}
.menu-btn button.pressed, .menu-btn button:active { transform: translateY(.5cqw); box-shadow: 0 0 0 1.4cqw rgba(13,58,153,.45); }
.menu-btn span, .fb span { font-family: system-ui, sans-serif; font-weight: 800; font-size: 2.7cqw; color: var(--blue-dd); }

.face { position: relative; width: 31cqw; height: 31cqw; justify-self: end; }
.fb { position: absolute; display: grid; justify-items: center; gap: .4cqw; }
.fb button {
  width: 10.5cqw; height: 10.5cqw; border-radius: 50%; border: .55cqw solid #111;
  background: radial-gradient(circle at 38% 32%, #6a6a72, #26262c 70%); box-shadow: 0 .7cqw 0 #111;
  transition: transform .06s steps(1), box-shadow .06s steps(1);
}
.fb.a button, .fb.b button { background: radial-gradient(circle at 38% 32%, #f070c4, var(--pink) 55%, var(--pink-d)); }
.fb button:hover { filter: brightness(1.12); }
.fb button.pressed, .fb button:active { transform: translateY(.6cqw); box-shadow: 0 .1cqw 0 #111; }
.fb.x { left: 50%; top: -3cqw; transform: translateX(-50%); }
.fb.y { left: -2cqw; top: 8cqw; }
.fb.a { right: -2cqw; top: 8cqw; }
.fb.b { left: 50%; top: 19cqw; transform: translateX(-50%); }


/* ---------- screen UI ---------- */
.k { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .3em; border-radius: 1em; background: var(--pink); color: #fff; font-size: .7em; vertical-align: middle; }
.k.dark { background: #555; }
.bar { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; border-bottom: 2px dashed #3a3a3a; padding-bottom: .5em; margin-bottom: .8em; }
.bar-title { color: var(--yellow); font-weight: 700; }
.bar-title::before { content: '■ '; color: var(--blue-l); animation: blink 1s steps(1) infinite; }
.bar-meta { color: var(--dim); font-size: .75em; }
.hints { margin-top: auto; padding-top: .6em; display: flex; gap: 1.4em; flex-wrap: wrap; font-size: .72em; color: var(--dim); }
.hints span { display: inline-flex; align-items: center; gap: .4em; }
.mono { font-family: var(--mono); font-size: 1.3em; line-height: 1.15; }
.caret::after { content: '█'; animation: blink .4s steps(1) infinite; color: var(--txt); margin-left: .1em; }
@keyframes blink { 50% { opacity: 0; } }
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--blue) #2a2a2a; }
.scroll::-webkit-scrollbar { width: 8px; } .scroll::-webkit-scrollbar-thumb { background: var(--blue); } .scroll::-webkit-scrollbar-track { background: #2a2a2a; }
.appear { animation: appear .35s steps(4) both; }
@keyframes appear { from { opacity: 0; transform: translateY(6px); } }

/* boot */
.boot { flex: 1; display: grid; place-content: center; text-align: center; gap: 1em; cursor: pointer; }
.boot-logo { font-size: 3.6em; font-weight: 700; color: var(--blue-l); letter-spacing: .08em; text-shadow: .08em .08em 0 var(--blue-dd); animation: drop 1.4s steps(14) both; }
.boot-logo span { display: inline-block; animation: wave 1.2s steps(2) infinite; animation-delay: calc(var(--i) * .12s + 1.5s); }
@keyframes drop { from { transform: translateY(-260%); } }
@keyframes wave { 50% { transform: translateY(-.12em); color: var(--yellow); } }
.boot-sub { color: var(--dim); font-size: .8em; animation: appear .4s steps(4) 1.5s both; }
.press { margin-top: 1.6em; animation: blink 1s steps(1) infinite 1.8s, appear .1s 1.7s both; }

/* pause */
.pause { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(10,10,14,.82); }
.pause-box { min-width: 55%; border: 3px solid var(--txt); box-shadow: 0 0 0 3px var(--scr), 0 0 0 6px var(--blue); background: var(--scr); padding: 1.2em 1.6em; animation: appear .25s steps(3); }
.pause-title { text-align: center; color: var(--yellow); margin: 0 0 .8em; letter-spacing: .2em; }
.opt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35em; }
.opt { display: block; width: 100%; text-align: left; padding: .15em 0 .15em 1.4em; position: relative; }
.opt.sel { color: var(--yellow); }
.opt.sel::before { content: '▶'; position: absolute; left: 0; animation: nudge .6s steps(2) infinite; }

/* about */
.about { flex: 1; min-height: 0; display: grid; grid-template-columns: 34% 1fr; gap: 4cqw; align-items: start; }
.hero { position: relative; height: 82cqh; display: grid; justify-items: center; align-content: start; }
.hero-img { height: 74cqh; width: auto; animation: idle 1.6s steps(2) infinite; transform-origin: bottom; }
@keyframes idle { 50% { transform: translateY(-1.2%) scaleY(1.01); } }
.hero .shadow { width: 55%; height: 2.6cqh; background: rgba(0,0,0,.55); border-radius: 50%; margin-top: -1.5cqh; animation: shadow 1.6s steps(2) infinite; }
@keyframes shadow { 50% { transform: scaleX(.9); } }
.hero.jump .hero-img { animation: jump .55s steps(6); }
.hero.jump .shadow { animation: shadowJump .55s steps(6); }
@keyframes jump { 40% { transform: translateY(-22%); } 70% { transform: translateY(-4%); } }
@keyframes shadowJump { 40% { transform: scaleX(.5); opacity: .4; } }
.bubble { position: absolute; top: -2%; right: 6%; z-index: 2; background: #fff; color: var(--scr); font-weight: 700; padding: .1em .5em; border: 3px solid var(--scr); opacity: 0; }
.hero.jump .bubble { animation: bubble .9s steps(3); }
@keyframes bubble { 10%, 80% { opacity: 1; transform: translateY(-.3em); } }
.about-text { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.dlg { margin: 0; min-height: 4.5em; letter-spacing: .02em; }
.more { color: var(--yellow); align-self: flex-end; animation: bounceDown .6s steps(2) infinite; }
@keyframes bounceDown { 50% { transform: translateY(.25em); } }
.stats { margin: 1em 0 0; display: grid; grid-template-columns: auto 1fr; gap: .25em 1.2em; font-size: .8em; border: 2px solid #333; padding: .8em 1em; }
.stats dt { color: var(--dim); }
.stats dd { margin: 0; }
.stats dd.hl { color: var(--yellow); }
.stats > * { animation: appear .3s steps(3) both; animation-delay: calc(var(--d) * 90ms); }
.hp { display: inline-flex; gap: .25em; vertical-align: middle; }
.hp img { width: 1em; height: auto; }

/* overworld (between stops) */
.ow { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(#1c2340 0 60%, #234a2a 60%); }
.ow::before { content: ''; position: absolute; left: 0; right: 0; top: 60%; height: 2cqh; background: repeating-linear-gradient(90deg, #3e8f47 0 2cqw, #56b45f 2cqw 4cqw); }
.ow-cloud { position: absolute; opacity: .45; image-rendering: pixelated; animation: drift linear infinite; }
.ow-world { position: absolute; left: 0; top: 0; bottom: 0; will-change: transform; }
/* no CRT colour fringes / jitter while scrolling: they double the moving sprites */
.crt .scr-overworld, .crt .screen-content:has(.ow) { text-shadow: none; animation: none; }
.crt .screen-content .ow img { filter: none; }
.ow-path { position: absolute; left: 0; right: 0; top: 78%; height: 1.2cqh; background: repeating-linear-gradient(90deg, #c9a46a 0 2.4cqw, transparent 2.4cqw 4cqw); }
.ow-tree { position: absolute; bottom: 40%; width: 5cqw; image-rendering: pixelated; }
.ow-node { position: absolute; bottom: 40%; transform: translateX(-50%); display: grid; justify-items: center; gap: 1.2cqh; }
.ow-node img { width: 11cqw; height: auto; }
.ow-label { font-size: .75em; color: var(--dim); white-space: nowrap; }
.ow-node.target .ow-label { color: var(--yellow); animation: blink .5s steps(1) infinite; }
.ow-node.arrived img { animation: pop .4s steps(3); }
.ow-walker { position: absolute; bottom: 20%; height: 28cqh; width: auto; z-index: 2; }
.ow-walker.walking { animation: owHop .2s steps(2) infinite; }
@keyframes owHop { 50% { bottom: 22%; } }
.ow-banner { position: absolute; top: 5cqh; left: 50%; transform: translateX(-50%); z-index: 3; text-align: center; white-space: nowrap; background: var(--scr); color: var(--yellow); border: 3px solid var(--txt); box-shadow: 0 0 0 3px var(--scr); padding: .3em .9em; animation: appear .3s steps(3); }
.ow-banner small { display: block; color: var(--dim); font-size: .6em; }
.ow-skip { position: absolute; left: 0; right: 0; bottom: 3cqh; margin: 0; text-align: center; font-size: .62em; color: #c9d4f5; animation: blink 1.2s steps(1) infinite; }

/* career stop (full-width info) */
.station { flex: 1; min-height: 0; padding-right: .5em; }
.st-head { display: flex; gap: 1em; align-items: center; margin-bottom: .9em; }
.st-head img { width: 3em; height: auto; flex: none; animation: bob 1.2s steps(2) infinite; }
.st-head h2 { margin: 0; font-size: 1.3em; line-height: 1.2; color: var(--cyan); }
.st-role { margin: .25em 0 0; font-size: .85em; }
.st-date { margin: .15em 0 0; font-size: .75em; color: var(--dim); }
.st-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35em; font-size: 1.15em; }
.st-list li { position: relative; padding-left: 1em; animation: appear .3s steps(3) both; animation-delay: calc(var(--d) * 120ms + 150ms); }
.st-list li::before { content: '▸'; position: absolute; left: 0; color: var(--pink); }
.st-track { display: flex; justify-content: center; gap: .45em; margin-top: .6em; }
.st-track i { width: .6em; height: .6em; background: #3a3a3a; }
.st-track i.past { background: var(--blue); }
.st-track i.now { background: var(--yellow); animation: blink 1s steps(1) infinite; }
.badge { display: inline-block; margin-left: .6em; padding: 0 .4em; font-size: .55em; background: var(--pink); color: #fff; vertical-align: middle; animation: blink 1.2s steps(1) infinite; }

/* rules (privacy policy, loaded from privacy.html) */
.rules { flex: 1; min-height: 0; padding-right: .6em; font-family: var(--mono); font-size: 1.15em; line-height: 1.25; }
.rules h1 { font-family: var(--pixel); font-size: .8em; color: var(--yellow); margin: 0 0 .2em; }
.rules h2 { font-family: var(--pixel); font-size: .62em; color: var(--cyan); margin: 1.1em 0 .3em; }
.rules p, .rules li { margin: 0 0 .5em; }
.rules ul { padding-left: 1.1em; margin: 0 0 .5em; }
.rules a { color: var(--yellow); }
.rules .stand { color: var(--dim); }

/* projects (quest log) */
.quests { flex: 1; min-height: 0; display: grid; grid-template-columns: 42% 1fr; gap: 4cqw; }
.qlist { list-style: none; margin: 0; padding: 0 .3em 0 0; min-height: 0; }
.qlist .opt { font-size: .8em; padding-top: .3em; padding-bottom: .3em; line-height: 1.3; color: #c8c8d0; }
.qlist .opt.sel { color: var(--yellow); }
.qlist .opt .chk { color: var(--green); }
.qdetail { position: relative; min-height: 0; border: 2px solid #333; padding: .8em 1em; display: flex; flex-direction: column; }
.qdetail h3 { margin: 0 0 .2em; font-size: .95em; color: var(--yellow); padding-right: 3.5em; }
.qdetail .guild { font-size: .72em; color: var(--dim); margin: 0 0 .5em; }
.qdetail p.mono { margin: 0 0 .6em; }
.reward { font-size: .72em; color: var(--green); margin: 0 0 .6em; }
.reward img { width: 1.1em; vertical-align: -.15em; margin-right: .3em; animation: spin 1s steps(4) infinite; }
@keyframes spin { 25% { transform: scaleX(.6); } 50% { transform: scaleX(.15); } 75% { transform: scaleX(.6); } }
.tags { display: flex; flex-wrap: wrap; gap: .35em; margin-top: auto; }
.tag { font-size: .7em; padding: .2em .55em; background: #24305a; color: #bcd0ff; border-bottom: 2px solid var(--blue); }
.stamp { position: absolute; top: .6em; right: .6em; font-size: .7em; color: var(--pink); border: 2px solid var(--pink); padding: .15em .4em; transform: rotate(8deg); animation: stamp .4s steps(4) both .15s; }
@keyframes stamp { from { transform: rotate(8deg) scale(2.6); opacity: 0; } }

/* skills (inventory) */
.bags { display: flex; gap: .4em; margin-bottom: .7em; flex-wrap: wrap; }
.bags button { font-size: .72em; padding: .3em .7em; border: 2px solid #3a3a3a; color: var(--dim); }
.bags button.sel { border-color: var(--yellow); color: var(--yellow); background: #2a2614; }
.inv { flex: 1; min-height: 0; display: grid; grid-template-columns: 36% 1fr; gap: 4cqw; }
.slots { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35em; align-content: start; min-height: 0; overflow-y: auto; }
.slot { min-width: 0; display: flex; align-items: center; gap: .6em; text-align: left; background: #242424; border: 2px solid #3a3a3a; box-shadow: inset -3px -3px 0 #151515, inset 3px 3px 0 #2f2f2f; padding: .3em; animation: appear .3s steps(3) both; animation-delay: calc(var(--d) * 50ms); }
.slot img { width: 1.4em; height: auto; flex: none; }
.slot span { font-size: .72em; line-height: 1.2; }
.slot.sel { border-color: var(--yellow); background: #2e2a18; }
.slot.sel img { animation: bob .6s steps(2) infinite; }
.item { border: 2px solid #333; padding: .8em 1em; display: flex; flex-direction: column; gap: .4em; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--blue) #2a2a2a; }
.item-head { display: flex; align-items: center; gap: .7em; }
.item-head img { width: 2.4em; height: auto; }
.item h3 { margin: 0; font-size: .95em; color: var(--yellow); }
.item .type { font-size: .72em; color: var(--dim); margin: 0; }
.item .mono { margin: 0; font-size: 1.1em; }
.buffs { list-style: none; margin: .2em 0; padding: 0; display: grid; gap: .45em; font-size: .72em; }
.buff { display: grid; grid-template-columns: auto 1fr; gap: .25em .7em; align-items: center; animation: appear .3s steps(3) both; animation-delay: calc(var(--d) * 110ms + 100ms); }
.buff b { color: var(--green); font-weight: 400; white-space: nowrap; }
.buff.perk b { color: var(--cyan); }
.buff .meter { grid-column: 1 / -1; display: block; height: .55em; background: #2a2a2a; }
.buff .meter i { display: block; height: 100%; width: var(--w); background: repeating-linear-gradient(90deg, var(--green) 0 .7em, #3ea548 .7em .8em); animation: fill .7s steps(7) both; animation-delay: calc(var(--d) * 110ms + 200ms); }
@keyframes fill { from { width: 0; } }
.found { font-size: .72em; color: var(--green); margin: 0; }

/* contact */
.contact { flex: 1; display: grid; grid-template-columns: 30% 1fr; gap: 5cqw; align-items: center; }
.letter { position: relative; display: grid; justify-items: center; }
.letter img { width: 70%; animation: float 1.4s steps(2) infinite; }
@keyframes float { 50% { transform: translateY(-8%) rotate(-4deg); } }
.letter .shadow { width: 50%; height: 2cqh; background: rgba(0,0,0,.5); border-radius: 50%; margin-top: 6%; animation: shadow 1.4s steps(2) infinite; }
.contact h2 { margin: 0 0 .4em; font-size: 1.1em; color: var(--yellow); }
.contact .mono { margin: 0 0 .8em; min-height: 2.4em; }
.contact .opt-list { font-size: .85em; }
.contact .email { font-size: .75em; color: var(--cyan); margin: .9em 0 0; word-break: break-all; }
.coin-pop { position: absolute; z-index: 7; pointer-events: none; font-size: .8em; color: var(--yellow); display: flex; align-items: center; gap: .3em; animation: coinUp .9s steps(6) forwards; }
.coin-pop img { width: 1.2em; }
@keyframes coinUp { to { transform: translateY(-2.5em); opacity: 0; } }

/* toast + confetti */
.toast {
  position: fixed; left: 50%; top: 20px; z-index: 50; transform: translate(-50%, calc(-100% - 40px)); visibility: hidden;
  background: var(--scr); color: var(--txt); border: 3px solid #fff; box-shadow: 0 0 0 3px var(--scr), 6px 6px 0 3px rgba(0,0,0,.25);
  padding: 12px 18px; font-size: 13px; display: flex; gap: 12px; align-items: center; transition: transform .35s steps(5), visibility 0s .35s; max-width: calc(100vw - 32px);
}
.toast.show { transform: translate(-50%, 0); visibility: visible; transition: transform .35s steps(5), visibility 0s; }
.toast img { width: 24px; }
.toast b { color: var(--yellow); display: block; font-size: 11px; }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; image-rendering: pixelated; }
.noscript { position: fixed; bottom: 0; left: 0; right: 0; padding: 16px; background: #fff; text-align: center; z-index: 100; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .zoom-hint { font-size: 10px; }
  .zoom-hint { flex-direction: column; gap: 8px; }
  .zoom-frame { width: min(94vw, calc((100vh - 110px) * .6)); padding: 6px; }
  .zoom-frame .screen { aspect-ratio: 3 / 5; --sf: clamp(13px, 5cqw, 22px); }
  .zoom-frame .qlist { max-height: 30cqh; }
  .ow-node img { width: 14cqw; }
  .ow-walker { height: 24cqh; }
  .zoom-btn { font-size: 2.4cqw; }
  .zoom-btn svg { width: 2.6cqw; height: 2.6cqw; }
  :root { --cw: min(560px, calc(100vw - 32px)); --ar: 1 / 1; }
  .layout { grid-template-columns: 1fr; gap: 28px; padding: 16px 16px 40px; align-items: start; }
    .side { position: static; padding-top: 8px; }
  .intro { flex-direction: row; align-items: center; gap: 16px; }
  .avatar-wrap { width: 84px; height: 84px; }
  .accent-bar { margin-bottom: 10px; }
  .menu { margin-top: 24px; }
  .menu-label { display: none; }
  .menu ul { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
  .menu button { white-space: nowrap; font-size: 13px; padding: 8px 10px; border: 2px solid var(--ink); background: #fff; }
  .menu button:hover { transform: none; }
  .menu button[aria-current="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
  .menu button[aria-current="true"]::before { display: none; }
  .menu .sub { display: none !important; }
  .side { max-height: none; overflow: visible; }
  .menu .subnav:not([hidden]) { display: flex; gap: 6px; overflow-x: auto; list-style: none; margin: 8px 0 0; padding: 0 0 6px; }
  .menu .subnav button { white-space: nowrap; font-size: 11px; padding: 6px 8px; border: 2px dashed #9fb2e0; background: #f4f7ff; }
  .menu .subnav button[aria-current="true"] { border-style: solid; border-color: var(--blue); color: var(--blue); font-weight: 700; }
  .side-foot { margin-top: 16px; grid-template-columns: 1fr auto; align-items: center; max-width: none; }
  .keys-hint { display: none; }
  .console-wrap { order: 2; }
  :root { --sf: clamp(11px, 4.6cqw, 24px); --arw: 1; }
  .about { grid-template-columns: 30% 1fr; }
  .hero-img { height: 52cqh; }
  .hero { height: auto; }
  .quests, .inv { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: .8em; }
  .qlist { max-height: 34cqh; }
  .slots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .slot { flex-direction: column; justify-content: center; text-align: center; gap: .3em; padding: .5em .2em; }
  .slot span { font-size: .6em; word-break: break-word; }
  .slot { padding: .35em .15em; gap: .2em; }
  .slot img { width: 1.2em; }
  .bags { margin-bottom: .5em; }
  .hints span:has(.k.dark) { display: none; }
  .contact { grid-template-columns: 1fr; text-align: center; }
  .letter img { width: 26%; }
  .contact .opt-list { justify-content: center; }
  .contact .opt { text-align: center; }
}
@media (max-width: 420px) {
  .side-foot { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}