:root { --ink:#233b30; --cream:#fff9e9; --sun:#d6a251; --green:#0e442f; --bg:#f0ebdc; --muted:#617465; --line:#d9d3be; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:#e9e3c8; font-family:"Space Grotesk",sans-serif; }
button { font:inherit; }
.page-shell { min-height:100vh; padding:20px clamp(16px,4vw,64px) 30px; background:radial-gradient(circle at 50% -20%,#fffcef 0 18%,transparent 48%); }
.topbar { width:min(1400px,100%); margin:0 auto 16px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--green); font-family:"Press Start 2P",monospace; font-size:clamp(11px,1.1vw,15px); text-decoration:none; letter-spacing:.02em; }
.brand-spark { color:#df8b28; font-size:20px; }
.map-instruction { margin:0; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:#54705e; }
.theme-toggle { justify-self:end; border:2px solid var(--ink); border-radius:999px; padding:8px 13px; display:flex; gap:8px; align-items:center; cursor:pointer; background:var(--cream); color:var(--ink); font-weight:700; box-shadow:3px 3px 0 var(--ink); transition:transform .18s,box-shadow .18s,background .35s; }
.theme-toggle:hover { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.theme-icon { color:#d77c21; font-size:18px; line-height:1; }
.map-frame { width:min(1400px,100%); margin:auto; border:4px solid var(--ink); border-radius:18px; overflow:hidden; box-shadow:0 13px 0 rgba(20,35,28,.18); background:#83b86a; }
.map-stage { position:relative; isolation:isolate; aspect-ratio:3/2; overflow:hidden; }
.map-stage,.map-stage * { cursor:none; }
.map-bg,.night-wash { position:absolute; inset:0; pointer-events:none; }
.map-bg { background:center/cover no-repeat; transition:opacity .7s ease; }
.map-day { background-image:url("day_map.png"); }
.map-night { background-image:url("night_map_lit.png"); opacity:0; }
.night-wash { background:linear-gradient(180deg,rgba(9,27,60,.16),rgba(4,18,51,.4)); opacity:0; transition:opacity .7s ease; mix-blend-mode:multiply; }
.map-stage.night .map-night,.map-stage.night .night-wash { opacity:1; }
.night-lights { position:absolute; z-index:1; inset:0; opacity:0; pointer-events:none; transition:opacity .7s ease; mix-blend-mode:screen; }.map-stage.night .night-lights { opacity:1; }.lamp-glow { display:none; }.establishment-glow { position:absolute; display:block; border-radius:50%; width:33%; aspect-ratio:1; background:radial-gradient(ellipse,rgba(255,206,93,.3),rgba(245,140,35,.12) 42%,transparent 72%); filter:blur(2px); animation:night-pulse 2.4s ease-in-out infinite; }.school-glow{left:2%;top:5%;}.work-glow{right:2%;top:4%;}.board-glow{right:12%;top:50%;width:25%;}
.landmark { position:absolute; z-index:2; border:0; background:transparent; padding:0; cursor:pointer; filter:drop-shadow(0 8px 4px rgba(9,31,19,.24)); transition:transform .25s ease,filter .25s ease; }
.landmark img { display:block; width:100%; height:auto; user-select:none; }
.landmark:hover,.landmark:focus-visible { transform:translateY(-11px) scale(1.035); filter:drop-shadow(0 15px 8px rgba(9,31,19,.3)); outline:none; }
.school-landmark { width:35%; left:6%; top:8%; }
.work-landmark { width:30%; right:8%; top:3%; }
.board-landmark { width:12%; right:23%; top:58%; }
.location-tag { position:absolute; z-index:2; top:5%; left:-5%; padding:8px 10px; border:2px solid var(--ink); border-radius:4px; color:var(--ink); background:var(--cream); box-shadow:3px 3px 0 rgba(20,35,28,.85); font-family:"Press Start 2P",monospace; font-size:clamp(6px,.58vw,9px); line-height:1.55; text-align:left; white-space:nowrap; }
.location-tag b { color:#d56e20; margin-right:5px; }
.hover-prompt { position:absolute; left:50%; bottom:0; translate:-50% 115%; width:max-content; color:#fff9df; background:var(--ink); border:2px solid #fff9df; border-radius:999px; padding:7px 10px; opacity:0; transition:opacity .2s,translate .2s; font-size:12px; font-weight:bold; pointer-events:none; }
.hover-prompt i { color:var(--sun); font-style:normal; }.landmark:hover .hover-prompt,.landmark:focus-visible .hover-prompt { opacity:1; translate:-50% 100%; }
.fountain { position:absolute; z-index:3; left:45%; top:48.5%; translate:-50% -50%; width:10.5%; pointer-events:none; filter:drop-shadow(2px 3px 1px rgba(20,35,28,.3)); }.fountain img { display:block; width:200%; height:auto; animation:fountain-shimmer .55s steps(2) infinite; }.fountain::before { content:""; position:absolute; z-index:1; left:96%; top:27%; width:8%; height:54%; opacity:.82; background:repeating-linear-gradient(180deg,#edfeff 0 7px,#5ed4f2 7px 14px,#1d91c9 14px 19px); box-shadow:-3px 0 #92edfb,3px 0 #1674aa; clip-path:polygon(35% 0,65% 0,100% 100%,0 100%); mix-blend-mode:screen; animation:fountain-stream .45s steps(3) infinite; }.fountain::after { content:""; position:absolute; z-index:2; left:76%; top:48%; width:5px; height:5px; background:#e7ffff; box-shadow:18px -18px #80def4,34px 4px #e7ffff,-14px 20px #51c7e8,47px 24px #9beafa; animation:fountain-droplets .7s steps(3) infinite; }
.pond-life { position:absolute; z-index:3; left:0; bottom:0; width:13.5%; height:31%; overflow:hidden; pointer-events:none; }.fish { position:absolute; width:18px; height:10px; border:2px solid #143c69; border-radius:65% 35% 45% 55%; background:#ffb848; opacity:.95; animation:fish-jump 3s ease-in-out infinite; }.fish::after { content:""; position:absolute; left:-8px; top:0; width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-right:8px solid #f06d3f; }.fish i { position:absolute; right:2px; top:2px; width:2px; height:2px; background:#17304a; }.fish-one { left:55%; top:36%; }.fish-two { left:19%; top:45%; scale:.72; animation-delay:1.45s; }.ripple { position:absolute; width:30px; height:8px; border:2px solid rgba(174,239,255,.75); border-radius:50%; opacity:0; animation:ripple 3s ease-out infinite; }.ripple-one { left:49%; top:35%; }.ripple-two { left:14%; top:44%; animation-delay:1.45s; }
.bird { position:absolute; z-index:4; width:22px; height:12px; pointer-events:none; animation:bird-flight 17s linear infinite; }.bird i,.bird b { position:absolute; display:block; width:13px; height:7px; border-top:3px solid #1e3a43; }.bird i { right:10px; border-radius:80% 100% 0 0; transform:rotate(17deg); }.bird b { left:10px; border-radius:100% 80% 0 0; transform:rotate(-17deg); }.bird-one { left:-5%; top:25%; animation-delay:-4s; }.bird-two { left:-10%; top:44%; scale:.7; animation-duration:23s; animation-delay:-13s; }
.map-caption { position:absolute; z-index:3; left:50%; bottom:18px; translate:-50%; color:#fff9df; text-shadow:2px 2px 0 #163426; font-family:"Press Start 2P",monospace; font-size:clamp(8px,.7vw,11px); white-space:nowrap; }
.mobile-hint { display:none; text-align:center; margin:16px 0 0; color:#54705e; }
.cursor-follower { position:fixed; z-index:20; left:0; top:0; width:70px; height:auto; pointer-events:none; opacity:0; translate:-16px -76px; scale:var(--facing, 1) 1; transition:opacity .16s ease; image-rendering:pixelated; filter:drop-shadow(2px 3px 1px rgba(0,0,0,.35)); }
.cursor-follower.is-visible { opacity:1; }.cursor-follower.is-walking { animation:character-walk .35s steps(2) infinite; }
.story-dialog { max-width:min(540px,calc(100vw - 32px)); padding:clamp(28px,5vw,52px); border:4px solid var(--ink); border-radius:14px; color:var(--ink); background:var(--cream); box-shadow:10px 10px 0 var(--ink); }
.story-dialog::backdrop { background:rgba(7,23,17,.68); backdrop-filter:blur(4px); }.dialog-close { position:absolute; top:10px; right:15px; border:0; background:none; color:var(--ink); font-size:35px; line-height:1; cursor:pointer; }.dialog-number { color:#da7b26; font-family:"Press Start 2P",monospace; font-size:15px; }.dialog-kicker { margin:20px 0 6px; color:#54705e; font-size:12px; font-weight:bold; letter-spacing:.16em; }.story-dialog h1 { margin:0 0 18px; font-family:"Press Start 2P",monospace; font-size:clamp(20px,4vw,30px); line-height:1.45; }.dialog-copy { color:#395346; font-size:17px; line-height:1.55; }.dialog-copy p { margin:0 0 12px; }.dialog-link { display:inline-flex; gap:10px; margin-top:13px; padding:10px 13px; border:2px solid var(--ink); border-radius:4px; color:var(--cream); background:var(--green); text-decoration:none; font-weight:bold; }.dialog-link span { color:var(--sun); }
@keyframes fountain-shimmer { 50% { filter:brightness(1.12) saturate(1.2); } } @keyframes fountain-stream { 50% { background-position-y:19px; height:50%; } } @keyframes fountain-droplets { 50% { translate:2px 8px; opacity:.3; } } @keyframes character-walk { 50% { margin-top:4px; } } @keyframes night-pulse { 50% { opacity:.72; scale:1.12; } } @keyframes fish-jump { 0%,14%,100% { transform:translate(0,0) rotate(0); } 22% { transform:translate(12px,-32px) rotate(-25deg); } 30% { transform:translate(23px,2px) rotate(12deg); } } @keyframes ripple { 18% { opacity:.85; transform:scale(.35); } 48% { opacity:0; transform:scale(1.3); } } @keyframes bird-flight { 0% { transform:translate(-5vw,4vh) rotate(3deg); } 25% { transform:translate(30vw,-8vh) rotate(-3deg); } 57% { transform:translate(72vw,7vh) rotate(5deg); } 100% { transform:translate(118vw,-5vh) rotate(-4deg); } }
@media (max-width:700px) { .page-shell{padding:16px 10px 24px}.topbar{grid-template-columns:1fr auto;gap:12px}.map-instruction{display:none}.theme-toggle{padding:7px 10px;font-size:12px}.brand{font-size:9px}.map-frame{border-width:3px;border-radius:11px}.location-tag{padding:5px 6px;border-width:1px;box-shadow:2px 2px 0 rgba(20,35,28,.85)}.hover-prompt{display:none}.mobile-hint{display:block;font-size:13px}.fountain{width:12%}.cursor-follower{display:none}.story-dialog{border-width:3px;box-shadow:6px 6px 0 var(--ink)}.board-landmark{width:14%;right:17%;top:56%;} }

/* Portfolio redesign: shared world, readable chapters, accessible controls. */
body{background:var(--bg);transition:background .6s,color .6s}
.page-shell{max-width:1400px;margin:auto;padding:24px 42px;background:none}
.topbar{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:0}
.brand{font-size:22px;color:var(--ink)}.brand small{font-size:8px;color:var(--muted)}
.controls{display:flex;gap:10px}
.controls button,.contact-button{border:1px solid var(--ink);background:var(--cream);color:var(--ink);padding:12px 16px;box-shadow:3px 3px 0 var(--ink);font-weight:700;text-decoration:none;display:inline-flex;align-items:center}
button:focus-visible,a:focus-visible{outline:3px solid #dd983c;outline-offset:4px}
.intro{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:35px 0 30px}
.eyebrow{font:9px/1.8 'Press Start 2P',monospace;color:var(--muted)}
.intro h1{font-size:clamp(28px,3.5vw,46px);letter-spacing:-1.8px;margin:12px 0}
.subtitle{font-size:16px;margin:0}.intro-copy{font-size:15px;line-height:1.7;color:var(--muted);margin:14px 0 0}
.intro .contact-button{background:var(--ink);color:var(--cream);white-space:nowrap;margin-bottom:6px}
.world{border:4px solid #253a30;box-shadow:7px 7px #233b3022}
.world-bar{background:#253a30;color:#f5edce;display:flex;justify-content:space-between;padding:14px 18px;font:8px/1.5 'Press Start 2P',monospace}
.map-stage,.map-stage *{cursor:auto}.map-stage .landmark,.map-stage .landmark *{cursor:pointer}
.landmark{filter:drop-shadow(0 5px 2px #15241566)}.landmark:hover,.landmark:focus-visible{transform:none;filter:drop-shadow(0 5px 2px #15241566)}
.landmark img{image-rendering:pixelated;transition:filter .4s}
.school-landmark{width:35%;left:5%;top:10%}.work-landmark{width:28%;right:9%;top:6%}.board-landmark{width:13%;right:22%;top:59%;bottom:auto}
.location-tag{top:auto;bottom:0;left:50%;translate:-50% 80%;padding:10px 12px;font-size:clamp(6px,.65vw,9px);border-radius:0;transition:translate .2s}
.landmark:hover .location-tag{translate:-50% 55%}.landmark:hover img{filter:brightness(1.12)}
.landmark::before{content:'';position:absolute;inset:20% -20% -20%;z-index:-1;background:radial-gradient(ellipse,#ffbf5466,transparent 65%);opacity:0;transition:opacity .8s;pointer-events:none}
.night .landmark::before{opacity:1}.night .landmark img{filter:brightness(.8) saturate(.85) drop-shadow(0 0 9px #f3b95360)}
.fountain{left:49.5%;top:50.5%;width:17%;z-index:2}.fountain img{width:100%;animation:none;image-rendering:pixelated}
.fountain::before,.fountain::after{content:none}.fountain canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.night .fountain{filter:brightness(.88) drop-shadow(0 0 9px #6ce0ef55)}


.map-caption{font-size:8px}
.traveler{position:absolute;z-index:5;width:4.3%;min-width:30px;max-width:62px;translate:-50% -92%;pointer-events:none;opacity:0;transition:opacity .2s}
.traveler img{display:block;width:100%;image-rendering:pixelated;scale:var(--direction,1) 1;filter:drop-shadow(1px 2px 0 #132b3266)}
.traveler.visible{opacity:1}.traveler.walking img{animation:walking-step .32s steps(2) infinite}
.explore-nav{display:grid;grid-template-columns:repeat(3,1fr);background:var(--cream)}
.explore-nav button{display:flex;justify-content:space-between;align-items:center;gap:10px;border:0;border-right:1px solid var(--line);background:none;color:var(--muted);padding:21px 18px;font-size:12px}
.explore-nav button:last-child{border:0}.explore-nav span{color:var(--ink);font-weight:700}.explore-nav button:hover{background:#d6a25122}
.highlights{display:grid;grid-template-columns:repeat(3,1fr);padding:30px 0;border-bottom:1px solid var(--line)}
.highlights article{padding:0 24px;border-right:1px solid var(--line)}.highlights article:first-child{padding-left:0}.highlights article:last-child{border:0}
.highlights strong{display:block;font-size:23px;letter-spacing:-.7px}.highlights span{display:block;color:var(--muted);font-size:12px;margin-top:8px}
footer{display:flex;justify-content:space-between;gap:16px;padding:22px 0;font-size:12px;color:var(--muted)}footer a{text-decoration:none}
.story-dialog{padding:0;border:3px solid #233b30;border-radius:0;width:680px;max-width:calc(100% - 32px);max-height:85dvh;background:var(--cream);box-shadow:8px 8px #10231f66}
.story-dialog[open]{position:fixed;inset:0;margin:auto;display:block;opacity:1;visibility:visible;translate:none;animation:none;overflow-y:auto;overscroll-behavior:contain}
.dialog-top{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#253a30;color:#fff0c8;font:8px/1.5 'Press Start 2P',monospace}
.dialog-close{position:static;color:#fff0c8;font-size:28px;padding:0 4px}
.dialog-body{padding:26px 36px 36px}h2{font-size:32px;letter-spacing:-1px;line-height:1.2;margin:10px 0 18px}
.lead{font-size:17px;color:var(--muted);line-height:1.7}.entry{border-top:1px solid var(--line);padding:22px 0}.entry h3{font-size:19px;margin:0 0 8px}
.entry p,.entry li{font-size:15px;line-height:1.7;color:var(--muted)}.entry .entry-date{font:8px/1.7 'Press Start 2P',monospace;color:#a47439;margin:0 0 12px}
.entry .organization{font-weight:700;color:var(--ink);margin-top:0}.entry ul{padding-left:20px}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tags span{font-size:12px;border:1px solid var(--line);padding:7px 10px;background:#d6a25112}
body.night{--bg:#142520;--cream:#213a30;--ink:#f5edce;--muted:#b6c4ae;--line:#3a5144;color-scheme:dark}
.paused .map-stage *,.paused .map-stage *::before,.paused .map-stage *::after{animation-play-state:paused!important}.paused .traveler{opacity:0}
@keyframes walking-step{0%,100%{transform:rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes pond-jump{0%,65%,100%{transform:translate(0,0)}75%{transform:translate(4px,-14px) rotate(-25deg)}85%{transform:translate(8px,0) rotate(15deg)}}
@keyframes chapter-open{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(max-width:700px){.page-shell{padding:16px}.brand{font-size:17px;gap:8px}.brand small{font-size:6px}.controls{gap:6px}.controls button{font-size:10px;padding:9px 8px}.intro{padding:25px 0;display:block}.intro .contact-button{margin-top:18px;font-size:12px}.eyebrow{font-size:7px}.intro h1{font-size:30px}.subtitle{font-size:13px}.intro-copy{font-size:13px}.world-bar{font-size:6px;padding:10px 8px}.world-bar span:last-child{font-family:monospace}.world{border-width:3px;box-shadow:4px 4px #233b3022}.location-tag{font-size:6px;padding:6px;border-width:1px}.map-caption{font-size:6px;bottom:8px}.explore-nav button{padding:14px 7px;font-size:10px;gap:4px}.explore-nav span{font-size:10px}.highlights{padding:22px 0;gap:12px}.highlights article{padding:0 8px}.highlights strong{font-size:16px}.highlights span{font-size:10px;line-height:1.5}footer{flex-direction:column;font-size:11px}.dialog-body{padding:20px}h2{font-size:26px}.traveler{display:none}.fountain{width:17%}.board-landmark{width:13%;right:22%;top:59%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Full-screen village and in-map controls. */
html,body{width:100%;height:100%;overflow:hidden}
.page-shell{max-width:none;width:100%;height:100%;padding:0;position:relative}
.world{width:100%;height:100dvh;border:0;box-shadow:none;overflow:auto;overscroll-behavior:contain}
.map-stage{width:max(100%,150dvh);min-height:100dvh;aspect-ratio:3/2}
.map-controls{position:fixed;z-index:10;right:max(20px,env(safe-area-inset-right));top:max(20px,env(safe-area-inset-top));display:flex;gap:9px;padding:9px;background:#213a30c9;border:2px solid #f5cf7d77;box-shadow:4px 4px #10261d80}
.map-controls a,.map-controls button{display:grid;place-items:center;width:46px;height:46px;padding:9px;background:#fff1c9;color:#233b30;border:2px solid #263b2e;box-shadow:2px 2px #071a1c80;text-decoration:none;font-size:25px}
.map-controls a:hover,.map-controls button:hover{background:#f5cf7d;translate:0 -2px}
.map-controls svg{width:25px;height:25px;fill:currentColor;shape-rendering:crispEdges}
.about-character{position:absolute;left:77%;top:64%;width:5%;min-width:40px;z-index:6;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(2px 4px 1px #10261d88)}
.about-character img{display:block;width:100%;image-rendering:pixelated;animation:character-idle 2s steps(2) infinite}
.about-character:hover{filter:drop-shadow(0 0 5px #ffe399)}
.pan-hint{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:50%;translate:-50%;z-index:7;margin:0;padding:10px 15px;background:#142b24d9;color:#fff1c9;font-size:12px;text-align:center;white-space:nowrap;pointer-events:none}
.pan-hint span{display:none}
.project-list{padding-left:28px}.project-list li{padding:15px 8px;border-bottom:1px solid var(--line)}.project-list h3{margin:0;font-size:18px}.project-list p{color:var(--muted);font-size:14px}
@keyframes character-idle{50%{translate:0 -2px}}
@media(max-width:700px){.page-shell{padding:0}.world{border:0;box-shadow:none}.map-controls{top:max(10px,env(safe-area-inset-top));right:10px;gap:5px;padding:6px}.map-controls a,.map-controls button{width:42px;height:42px;padding:8px}.pan-hint{font-size:10px;max-width:95vw;white-space:normal}.pan-hint span{display:inline}.story-dialog{max-height:80dvh}.about-character{width:5%}}

/* Fit the full 3:2 world into the viewport without cropping or scrolling. */
.world{display:grid;place-items:center;overflow:hidden;background:#152b22}
.map-stage{width:min(100vw,150dvh);height:auto;min-height:0;aspect-ratio:3/2;flex-shrink:0}
.map-controls{flex-direction:column;top:50%;translate:0 -50%;right:max(12px,env(safe-area-inset-right))}
.construction-sign{width:15%;left:25%;top:64%}
.construction-sign img{width:100%;image-rendering:pixelated}
.about-character{min-width:0}
.pan-hint{display:none}
.project-status{display:inline-block;padding:4px 8px;color:var(--ink);background:#d6a25133;font:10px 'Press Start 2P',monospace}
@media(max-width:700px){.map-controls{top:50%;right:6px;gap:4px;padding:4px}.map-controls a,.map-controls button{width:36px;height:36px;padding:6px}.map-stage{width:min(calc(100vw - 54px),150dvh);margin-right:54px}.construction-sign{width:17%;left:24%;top:63%}}






.landmark:hover img,.landmark:focus-visible img,.about-character:hover img,.about-character:focus-visible img{filter:brightness(1.1) drop-shadow(1px 0 0 #ffe49b) drop-shadow(-1px 0 0 #ffe49b) drop-shadow(0 0 6px #ffcf70)}
.landmark:focus-visible,.about-character:focus-visible{outline:2px dashed #fff1ae;outline-offset:5px}
.landmark:active,.about-character:active{transform:translateY(2px)}
.story-dialog[open]{animation:dialog-arrive .22s ease-out}
.dialog-top{position:sticky;top:0;z-index:1}
@keyframes dialog-arrive{from{transform:translateY(12px) scale(.98)}to{transform:translateY(0) scale(1)}}
#audioToggle{position:relative}
.audio-off{position:absolute;right:3px;bottom:1px;font-size:15px;font-weight:bold}
#audioToggle[aria-pressed="true"]{background:#e6c174}
#audioToggle[aria-pressed="true"] .audio-off{display:none}

@media(prefers-reduced-motion:reduce){.story-dialog[open]{animation:none}}

.path-light-layer{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity 1s}
.night .path-light-layer{opacity:1}
.path-light-layer i{position:absolute;width:7%;aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,#fff3b9aa 0 3%,#ffcb6b44 12%,#ffb94716 40%,transparent 70%);animation:lamp-breathe 4s ease-in-out infinite;mix-blend-mode:screen}
.night .school-landmark::after,.night .work-landmark::after{content:'';position:absolute;pointer-events:none;inset:25% 15% 30%;background:repeating-linear-gradient(90deg,transparent 0 12%,#ffd16c38 12% 20%,transparent 20% 30%);mix-blend-mode:screen;animation:window-breathe 4.5s ease-in-out infinite}
.night .work-landmark::after{inset:32% 20% 15%;animation-delay:-2s}
.character-speech{position:absolute;z-index:9;left:30%;top:48%;width:32%;padding:16px;background:#fff0ce;color:#233b30;border:3px solid #344833;box-shadow:4px 4px #15281dcc}
.character-speech[hidden]{display:none}
.character-speech strong{font:10px 'Press Start 2P',monospace;color:#9b652b}
.character-speech p{font-size:14px;line-height:1.6;margin:10px 0}
.character-speech button{background:#233b30;color:#fff0ce;border:0;padding:8px;font-size:12px}
#closeSpeech{position:absolute;right:5px;top:5px;background:none;color:#233b30;font-size:20px}
.quest-board{cursor:default}
.quest-note{position:absolute;width:28%;height:25%;top:35%;background:#f6dfa4;border:1px solid #755631;box-shadow:1px 2px #503620;color:#664726;font:bold clamp(8px,1vw,14px) monospace;padding:0}
.note-one{left:12%;rotate:-5deg}.note-two{left:43%;rotate:4deg}.note-three{left:28%;top:64%;rotate:-2deg}
.quest-note:hover,.quest-note:focus-visible{background:#fff2bf;box-shadow:0 0 10px #ffe19c;outline:2px solid #fff3d0;outline-offset:1px;transform:translateY(-2px)}
.collectible{position:absolute;z-index:6;width:44px;height:44px;display:grid;place-items:center;border:0;padding:9px;background:none;cursor:pointer}
.collectible svg{width:100%;height:100%;shape-rendering:crispEdges;filter:drop-shadow(1px 2px #132a26);animation:item-float 2.6s steps(4) infinite}
.coffee{left:7%;top:55%}.laptop{left:79%;top:81%}.chip{left:29%;top:28%}
.laptop svg{animation-delay:-.9s}.chip svg{animation-delay:-1.7s}
.collectible:hover svg,.collectible:focus-visible svg{filter:drop-shadow(0 0 4px #ffeb9b)}
.collectible.collected{pointer-events:none;animation:item-collect .4s ease-out forwards}
.collection-hud{position:absolute;left:12px;bottom:12px;z-index:7;padding:8px 10px;background:#193528df;color:#ffefc0;font:10px monospace;border:1px solid #c8ae6b66}
.collection-hud button{margin-left:10px;background:#ffe7a5;color:#233b30;border:0;padding:6px;font:inherit}
@keyframes lamp-breathe{50%{opacity:.78;scale:1.04}}
@keyframes window-breathe{50%{opacity:.65}}
@keyframes item-float{50%{translate:0 -3px}}
@keyframes item-collect{to{translate:0 -16px;opacity:0}}
@media(max-width:700px){.character-speech{left:8%;top:24%;width:80%;padding:12px}.character-speech p{font-size:12px}.collectible{width:32px;height:32px;padding:6px}.collection-hud{left:5px;bottom:4px;font-size:8px;padding:4px}.quest-note{min-width:18px;min-height:20px}.collection-hud button{padding:3px}}
@media(prefers-reduced-motion:reduce){.path-light-layer i,.collectible svg,.night .school-landmark::after,.night .work-landmark::after{animation:none}.collectible.collected{animation:none;opacity:0}}

/* Pixel speech outline and stepped tail; content controls the bubble height. */
.character-speech{position:fixed;z-index:12;inset:auto;width:max-content;max-width:calc(100vw - 32px);height:auto;padding:16px 18px;background:#fff9e6;color:#26382c;border:0;box-shadow:0 -4px #192920,0 4px #192920,-4px 0 #192920,4px 0 #192920,8px 8px #12271b55}
.character-speech::after{content:'';position:absolute;left:var(--tail-x,65%);bottom:-16px;width:12px;height:16px;background:#fff9e6;clip-path:polygon(0 0,100% 0,100% 50%,66% 50%,66% 75%,33% 75%,33% 100%,0 100%);filter:drop-shadow(3px 3px #192920)}
.character-speech.tail-up::after{bottom:auto;top:-16px;rotate:180deg}
.character-speech strong{display:block;padding-right:16px;font:9px/1.6 'Press Start 2P',monospace;color:#976329}
.character-speech p{font:12px/1.9 'Space Grotesk',monospace;overflow-wrap:anywhere;margin:10px 0;max-height:40dvh;overflow:auto}
.character-speech button{font:10px/1.5 'Space Grotesk',monospace}
.character-speech button[hidden]{display:none}
#closeSpeech{right:3px;top:2px;font-size:20px}
.character-speech[hidden]{display:none}