:root{color-scheme:light dark;--bg: #0b1220;--text: #e5e7eb;--card-bg: rgba(29, 39, 59, .8);--card-border: rgba(255, 255, 255, .08);--overlay-bg: rgba(0, 0, 0, .55);--modal-bg: rgba(17, 24, 39, .95);--modal-border: rgba(255, 255, 255, .1);--panel-bg: rgba(0, 0, 0, .25);--panel-border: rgba(255, 255, 255, .08);--building-top: #111827;--building-bottom: #0f172a;--window-bg: rgba(3, 7, 18, .6);--window-border: rgba(255, 255, 255, .1);--door-bg: rgba(3, 7, 18, .55);--door-border: rgba(255, 255, 255, .12);--btn-bg: rgba(59, 130, 246, .25);--btn-bg-hover: rgba(59, 130, 246, .33);--btn-border: rgba(255, 255, 255, .14);--win-size: clamp(40px, 8svh, 60px);--win-gap: clamp(10px, 1.6svh, 14px);--sun-opacity: 0;--moon-opacity: 1;--sun-scale: .92;--moon-scale: 1;--sun-color: #fbbf24;--moon-color: #c7d2fe;--sky-border: rgba(255, 255, 255, .14);--bg-night: #0b1220;--bg-day: #f8fafc;--card-bg-night: rgba(29, 39, 59, .8);--card-bg-day: rgba(255, 255, 255, .8);--onboard-bg-left: var(--bg-day);--onboard-bg-right: var(--bg-night);--onboard-card-left: var(--card-bg-day);--onboard-card-right: var(--card-bg-night)}@supports (color: color-mix(in srgb,black,white)){:root{--onboard-bg-left: color-mix(in srgb, var(--bg-day) 88%, var(--bg-night) 12%);--onboard-bg-right: color-mix(in srgb, var(--bg-night) 82%, var(--bg-day) 18%);--onboard-card-left: color-mix(in srgb, var(--card-bg-day) 88%, var(--card-bg-night) 12%);--onboard-card-right: color-mix(in srgb, var(--card-bg-night) 82%, var(--card-bg-day) 18%)}}body[data-theme=day]{--bg: #f8fafc;--text: #0f172a;--card-bg: rgba(255, 255, 255, .8);--card-border: rgba(15, 23, 42, .1);--overlay-bg: rgba(15, 23, 42, .22);--modal-bg: rgba(255, 255, 255, .92);--modal-border: rgba(15, 23, 42, .14);--panel-bg: rgba(15, 23, 42, .06);--panel-border: rgba(15, 23, 42, .12);--building-top: #e2e8f0;--building-bottom: #cbd5e1;--window-bg: rgba(255, 255, 255, .65);--window-border: rgba(15, 23, 42, .18);--door-bg: rgba(255, 255, 255, .75);--door-border: rgba(15, 23, 42, .22);--sun-opacity: 1;--moon-opacity: 0;--sun-scale: 1;--moon-scale: .92;--sun-color: #f59e0b;--moon-color: #93c5fd;--sky-border: rgba(15, 23, 42, .18)}body.themeTransition,body.themeTransition .card,body.themeTransition .stat,body.themeTransition .building,body.themeTransition .window,body.themeTransition .door,body.themeTransition .overlay,body.themeTransition .gameOver,body.themeTransition .primaryBtn{transition:background-color 5s linear,color 5s linear,border-color 5s linear}body.themeTransition .sun,body.themeTransition .moon{transition:opacity 5s linear,transform 5s linear,background-color 5s linear,border-color 5s linear,box-shadow 5s linear}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}body[data-view=welcome],body[data-view=instructions]{background:var(--onboard-bg-left)}body[data-theme=night][data-view=welcome],body[data-theme=night][data-view=instructions]{background:var(--onboard-bg-right)}button{font:inherit}.app{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:12px}.card{width:min(100%,calc(var(--win-size) * 6 + 48px));height:min(96svh,900px);background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:16px 16px 0;display:flex;flex-direction:column;overflow:hidden}.fxLayer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;border-radius:16px}.fxEmoji{position:absolute;transform:translate(-50%,-50%);line-height:1;font-size:clamp(18px,3.2vw,26px);opacity:0;--dx: 0px;--dy: 0px;--rot: 0deg;--delay: 0ms;animation:fxBurst .9s cubic-bezier(.2,.8,.2,1) var(--delay) both}@keyframes fxBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}12%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(1.05)}}@media(prefers-reduced-motion:reduce){.fxLayer{display:none}}body[data-view=welcome] .card,body[data-view=instructions] .card{background:var(--onboard-card-left);background-image:none}body[data-theme=night][data-view=welcome] .card,body[data-theme=night][data-view=instructions] .card{background:var(--onboard-card-right)}.hud{display:flex;flex-direction:row;gap:8px;justify-content:space-between;margin-bottom:10px;width:100%;max-width:calc(var(--win-size) * 6);margin-left:auto;margin-right:auto}.stat{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;padding:8px 10px;display:flex;justify-content:space-between;flex:1;min-width:0}.pointsStat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--panel-bg);border:1px solid var(--panel-border);padding:8px;border-radius:12px;margin:0 14px;align-self:center;height:fit-content}.pointsStat span,.pointsStat strong{line-height:1.1}.buildingWrap{display:flex;justify-content:center;flex:1;min-height:0;position:relative}.building{width:calc(var(--win-size) * 3);height:100%;background:linear-gradient(180deg,var(--building-top),var(--building-bottom));border-radius:18px 18px 0 0;border:1px solid var(--card-border);padding:18px calc((var(--win-size) - var(--win-gap)) / 2) 0;display:flex;flex-direction:column;gap:12px}.buildingTitle{margin:0;padding:2px 0 4px;text-align:center;font-size:clamp(18px,2.8svh,26px);font-weight:800;letter-spacing:.06em;color:var(--text);text-shadow:0 1px 0 color-mix(in srgb,var(--bg) 55%,transparent)}.buildingSubTitle{margin:-6px 0 4px;text-align:center;font-size:clamp(12px,1.9svh,14px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.9;color:var(--text)}@supports (color: color-mix(in srgb,black,white)){.buildingTitle{color:color-mix(in srgb,var(--text) 84%,var(--moon-color) 16%)}.buildingSubTitle{color:color-mix(in srgb,var(--text) 78%,var(--moon-color) 22%)}body[data-theme=day] .buildingTitle{color:color-mix(in srgb,var(--text) 84%,var(--sun-color) 16%);text-shadow:0 1px 0 color-mix(in srgb,var(--bg) 35%,transparent)}body[data-theme=day] .buildingSubTitle{color:color-mix(in srgb,var(--text) 78%,var(--sun-color) 22%)}}.sky{position:absolute;top:10px;left:50%;transform:translate(-50%);width:calc(var(--win-size) * 5);display:flex;justify-content:space-between;padding:40px -40px;pointer-events:none}.skyIcon{width:50px;height:50px;border-radius:999px;border:1px solid var(--sky-border);box-shadow:0 4px 10px #0003;margin:0 -10px}.sun{opacity:var(--sun-opacity);transform:scale(var(--sun-scale));background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.75),var(--sun-color) 55%,rgba(0,0,0,.08) 100%)}.moon{opacity:var(--moon-opacity);transform:scale(var(--moon-scale));background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.65),var(--moon-color) 60%,rgba(0,0,0,.1) 100%),radial-gradient(circle at 65% 40%,rgba(0,0,0,.18) 0 18%,transparent 19%)}.windowsGrid{flex:1;display:grid;grid-template-columns:repeat(2,var(--win-size));grid-auto-rows:var(--win-size);gap:var(--win-gap);justify-content:center;align-content:center;min-height:0}.window{position:relative;border-radius:6px;border:1px solid var(--window-border);background:var(--window-bg);cursor:pointer;display:grid;place-items:center;-webkit-user-select:none;user-select:none;width:var(--win-size);height:var(--win-size)}.window:active{transform:translateY(1px)}.emoji{font-size:clamp(18px,3.2vw,22px);line-height:1}.doorRow{height:calc(var(--win-size) * 2);display:grid;place-items:center}.doorArea{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px}.doorSign{margin:0;align-self:center;padding:6px 12px;border-radius:999px;border:1px solid var(--panel-border);background:var(--panel-bg);color:var(--text);font-size:14px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.doorSignBtn{cursor:pointer}.doorSignBtn:hover{background:color-mix(in srgb,var(--panel-bg) 70%,var(--text) 30%)}@supports (color: color-mix(in srgb,black,white)){.doorSign{border-color:color-mix(in srgb,var(--panel-border) 70%,var(--text) 30%);color:color-mix(in srgb,var(--text) 88%,var(--moon-color) 12%)}body[data-theme=day] .doorSign{color:color-mix(in srgb,var(--text) 88%,var(--sun-color) 12%)}}.door{width:calc(var(--win-size) * 1.2 + var(--win-gap));height:calc(var(--win-size) * 2);border-radius:14px 14px 0 0;background:var(--door-bg);border:1px solid var(--door-border);border-bottom:0;display:grid;place-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.door:active{transform:translateY(1px)}.doorHasItem{border-color:color-mix(in srgb,var(--door-border) 40%,var(--text) 60%)}.doorItem{font-size:clamp(18px,3.2vw,22px);line-height:1}.doorCollectFx{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);line-height:1;font-size:clamp(18px,3.2vw,22px);pointer-events:none;animation:doorCollect .52s cubic-bezier(.2,.8,.2,1) both}@keyframes doorCollect{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,calc(-50% - 22px)) scale(1.35)}}@media(prefers-reduced-motion:reduce){.doorCollectFx{display:none}}.footer{margin-top:10px;opacity:.9;font-size:13px;width:100%;max-width:calc(var(--win-size) * 6);margin-left:auto;margin-right:auto}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:var(--overlay-bg);border-radius:16px}.gameOver{width:min(520px,92%);background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:16px;padding:18px;text-align:center}.gameOver h2{margin:0 0 8px}.primaryBtn{margin-top:12px;padding:10px 14px;border-radius:12px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--text);cursor:pointer;font-weight:600}.primaryBtn:hover{background:var(--btn-bg-hover)}.screen{flex:1;display:flex;align-items:center;justify-content:center;padding:12px}.screenPanel{width:min(560px,100%);background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:16px;padding:18px;text-align:center}.screenTitle{margin:0 0 8px;font-size:clamp(18px,3svh,26px);font-weight:800;letter-spacing:.02em}.screenText{margin:0 0 12px;opacity:.9}.screenList{margin:0;padding-left:18px;text-align:left;line-height:1.5}.screenActions{margin-top:12px;display:flex;justify-content:center}.screenActions .primaryBtn{margin-top:0}
