:root {
  color-scheme: dark;
  --ink:#0c131b;
  --deep:#111923;
  --panel:#17222d;
  --panel-2:#1c2935;
  --line:#344656;
  --cream:#dce6d9;
  --muted:#93a6ad;
  --sage:#79947d;
  --mint:#bcd9bd;
  --gold:#cbb47b;
  --rose:#d695a3;
  --shadow:#070b10b8;
  --page:1280px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; min-width:300px; min-height:100dvh; background:radial-gradient(circle at 50% 43%,#1b2a36 0,#111923 48%,#080e15 100%); color:var(--cream); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; transition:background .45s steps(5,end),color .45s steps(5,end); }
body[data-time="day"] { background:radial-gradient(circle at 50% 43%,#dce6dd 0,#b7c9c5 48%,#82999d 100%); color:#15222a; }
button,a { font:inherit; }
button { color:inherit; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible { outline:3px solid var(--mint); outline-offset:4px; }

.site-header { position:fixed; z-index:30; inset:0 0 auto; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:24px; padding:14px clamp(16px,3vw,48px); border-bottom:1px solid #ffffff12; background:linear-gradient(#081019e8,#081019a8 72%,transparent); backdrop-filter:blur(7px); transition:background .45s steps(5,end),color .45s steps(5,end); }
body[data-time="day"] .site-header { border-bottom-color:#263d4630; background:linear-gradient(#d6e1dae8,#c2d0c7a8 72%,transparent); }
.brand { display:inline-flex; align-items:center; width:max-content; }
.brand-wordmark { display:block; width:124px; height:20px; color:#d9dfdb; filter:drop-shadow(2px 2px #0a1118); }
.wordmark-letters { fill:currentColor; }
.wordmark-accent { fill:#728d38; }
body[data-time="day"] .brand-wordmark { color:#17242b; filter:drop-shadow(2px 2px #eef4ee); }
.site-nav { display:flex; align-items:center; gap:clamp(8px,2vw,24px); color:#bdc9ca; font:600 14px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; }
.site-nav :is(button,a) { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 8px; border:0; background:transparent; cursor:pointer; text-underline-offset:7px; text-decoration-thickness:1px; }
.site-nav .social-link { min-width:44px; font-size:18px; }
.site-nav :is(button,a):hover,.site-nav :is(button,a):focus-visible { color:var(--mint); text-decoration-line:underline; }
body[data-time="day"] .site-nav { color:#304b47; }
body[data-time="day"] .site-nav :is(button,a):hover,body[data-time="day"] .site-nav :is(button,a):focus-visible { color:#132c24; }
body[data-time="day"] .site-nav :is(button,a):focus-visible { outline-color:#43664e; }
.nav-play,.time-toggle,.game-header button,footer button { border:1px solid var(--line); background:#182530; padding:9px 13px; cursor:pointer; }
.nav-play { color:var(--mint); }
.time-toggle { justify-self:end; display:flex; align-items:center; gap:8px; min-width:94px; background:#14212be8; }
body[data-time="day"] .time-toggle { border-color:#536f70; background:#e1e9e0e8; color:#17242b; }

main { min-height:100dvh; overflow:hidden; }
.hero { display:grid; align-content:start; min-height:100dvh; padding:78px 0 0; }
.hero-copy-mobile { display:none; }
.room-shell { width:100%; margin:auto; }
.room-stage { position:relative; overflow:hidden; width:min(100vw,2560px); margin:auto; aspect-ratio:8/3; border-block:1px solid #40505d; background:#303943; box-shadow:0 28px 100px #02070caa; isolation:isolate; transition:box-shadow .45s steps(5,end); }
body[data-time="day"] .room-stage { box-shadow:0 28px 100px #314c525e; }
.room-art,.day-window { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:fill; image-rendering:pixelated; }
.day-window { z-index:1; pointer-events:none; opacity:0; transition:opacity .45s steps(5,end); }
.room-stage[data-time="day"] .day-window { opacity:1; }
.window-copy { position:absolute; z-index:3; left:6.2%; top:15.8%; width:23%; text-shadow:0 3px #0c1620; }
.eyebrow { margin:0 0 9px; color:var(--gold); font:700 11px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.18em; text-transform:uppercase; }
.window-copy h1 { margin:0 0 16px; font:800 clamp(28px,4.2vw,68px)/.95 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:-.07em; color:#d9e6da; }
.window-copy > p:last-child { margin:0; max-width:360px; color:#d5dfdc; font-size:clamp(9px,1.05vw,16px); font-weight:650; line-height:1.45; }
.room-hotspot { position:absolute; z-index:6; display:block; padding:0; border:0; background:transparent; cursor:pointer; }
.room-hotspot::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:url('assets/room-night.png'); background-size:var(--art-size); background-position:var(--art-position); image-rendering:pixelated; opacity:0; filter:brightness(1.22); transition:opacity .16s; }
/* Trace the painted laptop, including its tapered base. No rectangular halo. */
.laptop-hotspot { left:23.75%; top:57.083333%; width:12.96875%; height:17.083333%; --art-size:771.084337% 585.365854%; --art-position:27.289048% 68.844221%; clip-path:polygon(12% 0,88% 0,88% 80%,93% 80%,93% 87%,100% 95%,100% 100%,0 100%,0 95%,6% 87%,6% 80%,12% 80%); }
.room-hotspot:focus-visible,.photo-hotspot:focus-visible { outline:none; }
.room-hotspot:focus-visible::before { opacity:1; filter:brightness(1.4); }
.room-hotspot:active::before { opacity:1; filter:brightness(1.5); }
.photo-hotspots { position:absolute; z-index:5; inset:0; pointer-events:none; }
.photo-hotspot { position:absolute; left:var(--left); top:var(--top); width:var(--width); height:var(--height); padding:0; border:0; background:transparent; cursor:pointer; pointer-events:auto; }
.photo-hotspot::after { content:""; position:absolute; inset:0; pointer-events:none; background-image:url('assets/room-night.png'); background-size:1600% 545.454545%; background-position:var(--art-position); clip-path:polygon(40% 0,60% 0,60% 4.545455%,100% 4.545455%,100% 100%,0 100%,0 4.545455%,40% 4.545455%); image-rendering:pixelated; opacity:0; filter:brightness(1.2); transition:opacity .16s; }
.photo-hotspot:focus-visible::after { opacity:1; filter:brightness(1.4); }
.photo-hotspot:active::after { opacity:1; filter:brightness(1.5); }
/* Re-light the existing painted silhouettes, not boxes around the objects.
   One gentle pulse per object every 7.8 s, staggered so they never overlap. */
.laptop-hotspot::before,.books-hotspot::before,.photo-hotspot:first-child::after {
  animation:room-object-hint 7.8s ease-in-out infinite;
}
.laptop-hotspot::before { animation-delay:1s; }
.books-hotspot::before { animation-delay:3.6s; }
.photo-hotspot:first-child::after { animation-delay:6.2s; }
@keyframes room-object-hint {
  0%,20%,100% { opacity:0; }
  10% { opacity:1; }
}
/* Stop the hints while interacting or while a book/photo/game covers the room. */
body:has(dialog[open]) .room-hotspot::before,
body:has(dialog[open]) .photo-hotspot::after,
.room-stage:has(:focus-visible) .room-hotspot::before,
.room-stage:has(:focus-visible) .photo-hotspot::after,
.room-stage:has(:active) .room-hotspot::before,
.room-stage:has(:active) .photo-hotspot::after { animation:none; }
@media (hover:hover) and (pointer:fine) {
  .room-stage:has(.room-hotspot:hover,.photo-hotspot:hover) .room-hotspot::before,
  .room-stage:has(.room-hotspot:hover,.photo-hotspot:hover) .photo-hotspot::after { animation:none; }
  .room-hotspot:hover::before,.photo-hotspot:hover::after { opacity:1; }
}
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.hero-actions { display:flex; justify-content:center; gap:12px; margin:26px auto 0; padding:0 20px; }
.primary-button,.secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:46px; padding:12px 18px; border:1px solid var(--mint); cursor:pointer; font-weight:800; }
.primary-button { background:var(--mint); color:#112019; box-shadow:4px 4px 0 #4e6b59; }
.primary-button:hover { background:#d5ebd2; }
.secondary-button { background:#14212b; color:var(--cream); border-color:#526776; }
.room-hint { margin:18px 20px 0; text-align:center; color:#81949b; font-size:12px; }

.frens-section,.world-section,.about-section { width:min(var(--page),calc(100% - 40px)); margin:0 auto; padding:110px 0; }
.section-heading { display:grid; grid-template-columns:1.2fr .8fr; align-items:end; gap:60px; margin-bottom:40px; }
h2 { margin:0; font:800 clamp(32px,5vw,64px)/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:-.055em; }
.section-heading > p,.world-copy > p,.about-section > p:last-child { margin:0; color:var(--muted); line-height:1.7; }
.fren-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.fren-card { margin:0; padding:8px; border:1px solid #344553; background:#16212b; transition:translate .2s,border-color .2s; }
.fren-card:hover { translate:0 -5px; border-color:#79947d; }
.fren-card img { display:block; width:100%; height:auto; image-rendering:pixelated; background:#28333c; }
.fren-card figcaption { display:grid; gap:4px; padding:12px 8px 7px; }
.fren-card strong { font-size:13px; }
.fren-card span { color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.world-section { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:8vw; }
.world-copy h2 { max-width:620px; }
.world-copy > p { margin:24px 0 28px; max-width:610px; }
.feature-list { display:grid; gap:0; margin:0 0 34px; padding:0; list-style:none; border-top:1px solid var(--line); }
.feature-list li { display:grid; grid-template-columns:42px 1fr; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); color:#c7d2d1; }
.feature-list span { color:var(--gold); font:700 12px ui-monospace,monospace; }
.game-card { position:relative; overflow:hidden; aspect-ratio:4/3; border:1px solid #53636f; background:#172535; box-shadow:18px 20px 0 #090e14; image-rendering:pixelated; }
.game-card-sky { position:absolute; inset:0 0 36%; background:linear-gradient(#17273a,#283c4a); }
.pixel-moon { position:absolute; left:18%; top:17%; width:10%; aspect-ratio:1; background:#d7d7ad; box-shadow:8px 0 #d7d7ad,-8px 0 #d7d7ad,0 8px #d7d7ad,0 -8px #d7d7ad; }
.pixel-cloud { position:absolute; width:17%; height:5%; background:#84939b; box-shadow:12px 6px #84939b,-10px 6px #84939b; }
.cloud-one { left:53%; top:20%; }.cloud-two { right:9%; top:38%; scale:.65; }
.game-card-city { position:absolute; inset:38% 0 24%; background:linear-gradient(90deg,#263846 0 13%,#1d2d39 13% 29%,#314451 29% 41%,#20313c 41% 62%,#2b3d49 62% 79%,#1b2a35 79%); clip-path:polygon(0 50%,13% 50%,13% 20%,29% 20%,29% 42%,41% 42%,41% 5%,62% 5%,62% 34%,79% 34%,79% 12%,100% 12%,100% 100%,0 100%); }
.game-card-ground { position:absolute; inset:auto 0 0; height:25%; background:repeating-linear-gradient(0deg,#17222c 0 10px,#25333e 10px 14px); border-top:8px solid #4c5c62; }
.game-card img { position:absolute; z-index:2; left:19%; bottom:15%; width:25%; height:auto; image-rendering:pixelated; filter:drop-shadow(7px 8px #080d11aa); }
.game-card-item { position:absolute; z-index:2; left:61%; bottom:34%; color:#ecd276; font-size:42px; text-shadow:4px 4px #604b25; }
.game-card-sign { position:absolute; z-index:2; right:4%; top:7%; padding:9px 11px; border:3px solid #8da59c; background:#14232a; color:#cce5d5; font:800 clamp(12px,2vw,24px) ui-monospace,monospace; box-shadow:5px 5px #090e13; }

.about-section { max-width:900px; text-align:center; }
.about-section h2 { margin-bottom:28px; }
.about-section > p:last-child { max-width:720px; margin:auto; }

footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; width:min(var(--page),calc(100% - 40px)); margin:auto; padding:34px 0; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
footer p { margin:0; text-align:center; }
footer button { justify-self:end; color:var(--mint); }

.game-dialog { width:min(1180px,calc(100% - 24px)); max-width:none; max-height:calc(100dvh - 24px); padding:0; border:1px solid #526575; background:#0c131b; color:var(--cream); box-shadow:0 30px 120px #000; }
.game-dialog::backdrop { background:#03070bdc; backdrop-filter:blur(7px); }
.game-shell { padding:18px; }
.game-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:12px; }
.game-header h2 { font-size:26px; }
.game-header-actions { display:flex; gap:8px; }
.game-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:9px; color:#94a7ad; font:700 12px ui-monospace,monospace; }
.game-stats span { padding:8px 10px; border:1px solid #2c3d49; background:#111d27; }
.game-stats strong { color:var(--cream); }
.canvas-wrap { position:relative; overflow:hidden; width:100%; aspect-ratio:16/9; border:1px solid #516372; background:#14212a; }
#gameCanvas { display:block; width:100%; height:100%; image-rendering:pixelated; touch-action:none; }
.game-overlay { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; padding:28px; text-align:center; background:#0b131bd9; }
.game-overlay[hidden] { display:none; }
.game-overlay h3 { margin:0 0 12px; font:800 clamp(25px,5vw,54px)/1 ui-monospace,monospace; }
.game-overlay > p:not(.eyebrow) { max-width:510px; margin:0 0 26px; color:#aab9ba; }
.result-overlay { grid-template-columns:minmax(180px,360px) minmax(240px,420px); gap:clamp(22px,5vw,64px); text-align:left; }
#resultCanvas { width:min(100%,360px); height:auto; border:8px solid #d7d8c9; outline:6px solid #6c6b61; image-rendering:pixelated; box-shadow:12px 14px #05090c99; }
.result-copy { justify-self:stretch; }
.result-copy h3 { font-size:clamp(28px,5vw,52px); }
.result-copy > p:not(.eyebrow) { margin:0 0 12px; color:var(--gold); font-weight:800; }
.result-copy .result-score { color:#aab8b9; font:700 12px ui-monospace,monospace; }
.result-copy .result-score strong { color:var(--gold); }
.result-copy ul { display:grid; gap:4px; margin:0 0 24px; padding:0; color:#aab8b9; list-style:none; font-size:12px; }
.result-actions { display:flex; flex-wrap:wrap; gap:10px; }
.pause-card { position:absolute; z-index:4; inset:50% auto auto 50%; translate:-50% -50%; display:grid; justify-items:center; gap:8px; min-width:240px; padding:24px; border:1px solid #70828c; background:#101b24f2; box-shadow:10px 12px #05090da6; }
.pause-card[hidden] { display:none; }
.pause-card strong { font:800 28px ui-monospace,monospace; }
.pause-card span { color:var(--muted); font-size:12px; }
.pause-card button,.game-controls button { border:1px solid var(--mint); background:#1b302a; padding:10px 18px; cursor:pointer; }
.game-controls { display:flex; align-items:center; gap:18px; margin-top:10px; }
.game-controls button { min-width:150px; touch-action:manipulation; }
.game-controls p { margin:0; color:#788b93; font-size:11px; }

.fren-dialog { width:min(560px,calc(100% - 24px)); max-width:none; max-height:calc(100dvh - 24px); padding:0; border:1px solid #536775; background:#0c131bf2; color:var(--cream); box-shadow:0 30px 120px #000; }
.fren-dialog::backdrop { background:#03070be3; backdrop-filter:blur(8px); }
.dialog-close { position:absolute; z-index:2; top:12px; right:12px; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid #627786; background:#111d27e8; color:#e8efea; cursor:pointer; font:300 28px/1 system-ui; }
.fren-view { display:grid; justify-items:center; gap:20px; margin:0; padding:34px; text-align:center; }
.fren-view img { display:block; width:min(72vw,420px); height:auto; image-rendering:pixelated; border:8px solid #d7d8c9; outline:5px solid #6c6b61; box-shadow:13px 15px #05090c99; }
.fren-view figcaption { display:grid; justify-items:center; gap:7px; }
.fren-view h2 { font-size:clamp(25px,6vw,42px); }
.fren-view figcaption > p:last-child { margin:0; color:#94a7ad; font-size:13px; }

@media (max-width:900px) {
  .window-copy { display:none; }
  .hero-copy-mobile { display:block; width:min(720px,calc(100% - 40px)); margin:0 auto 20px; }
  .hero-copy-mobile h1 { margin:0 0 10px; font:800 clamp(38px,11vw,70px)/.95 ui-monospace,monospace; letter-spacing:-.07em; }
  .hero-copy-mobile > p:last-child { color:var(--muted); }
  .section-heading,.world-section { grid-template-columns:1fr; gap:30px; }
  .fren-grid { grid-template-columns:repeat(2,1fr); }
  .world-section { padding-top:80px; }
  .game-card { order:-1; width:min(100%,680px); }
  footer { grid-template-columns:1fr auto; }
  footer p { grid-column:1/-1; grid-row:2; text-align:left; }
  .result-overlay { grid-template-columns:minmax(150px,260px) 1fr; gap:26px; }
}

@media (max-width:600px) {
  .site-header { padding:11px 14px; gap:12px; }
  .brand-wordmark { width:124px; height:20px; }
  .time-toggle { min-width:auto; }
  .hero { align-content:start; padding:70px 0 0; }
  .room-shell { padding:0; overflow-x:auto; scrollbar-width:none; }
  .room-stage { width:900px; transform-origin:left top; }
  .room-shell::after { content:none; }
  .hero-actions { flex-direction:column; }
  .frens-section,.world-section,.about-section { width:min(100% - 28px,1280px); padding:76px 0; }
  .section-heading { margin-bottom:24px; }
  .fren-grid { gap:8px; }
  .fren-card { padding:5px; }
  .game-shell { padding:10px; }
  .game-header { margin-bottom:8px; }
  .game-header .eyebrow { display:none; }
  .game-header h2 { font-size:20px; }
  .game-header button { padding:7px 9px; font-size:12px; }
  .game-stats { font-size:9px; }
  .game-stats { grid-template-columns:repeat(2,1fr); }
  .game-stats span { padding:6px; }
  .result-overlay { grid-template-columns:1fr; align-content:start; overflow:auto; padding:18px; }
  #resultCanvas { width:min(58vw,240px); }
  .result-copy { text-align:center; }
  .result-copy h3 { margin-bottom:4px; }
  .result-copy ul { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px 10px; margin-bottom:12px; font-size:9px; text-align:left; }
  .result-actions { justify-content:center; }
  .game-controls { align-items:stretch; }
  .game-controls button { flex:1; }
  .game-controls p { display:none; }
  footer { width:calc(100% - 28px); }
  .fren-view { padding:28px 20px 24px; }
  .fren-view img { width:min(76vw,330px); }
}

@media (max-width:480px) {
  .site-header { grid-template-columns:1fr auto; row-gap:0; padding:8px 14px; }
  .site-nav { grid-row:2; grid-column:1/-1; justify-content:center; gap:32px; }
  .time-toggle { grid-row:1; grid-column:2; }
  .hero { padding-top:108px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .room-hotspot::before,.photo-hotspot::after { animation:none!important; }
}

/* The production runner is isolated from the room's layout and day/night CSS. */
body.game-open { overflow:hidden; }
.game-dialog { width:min(1180px,calc(100% - 24px)); height:min(920px,calc(100dvh - 24px)); max-height:none; padding:0; overflow:hidden; }
#gameFrame { display:block; width:100%; height:100%; border:0; background:#081018; }
.game-load-close { position:absolute; z-index:2; top:12px; right:12px; padding:10px 16px; border:1px solid #61776e; background:#11212b; color:#dce4dc; cursor:pointer; }
.game-load-close[hidden] { display:none; }
@media (max-width:600px) {
  .game-dialog { width:100%; height:100dvh; max-width:100%; max-height:100dvh; margin:0; border:0; }
}