:root {
  --ink: #f8f2e8;
  --muted: #a9b5c9;
  --night: #050b18;
  --night-2: #071229;
  --panel: #0d1729;
  --line: rgba(255,255,255,.14);
  --amber: #f5b95f;
  --teal: #79d6d0;
  --coral: #f18f75;
  --lavender: #a99af4;
  --green: #93d9a1;
  --display: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--night); }
body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--night);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
body.view-porch {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
body.view-porch .site-header {
  border-bottom-color: transparent;
  background: linear-gradient(180deg,rgba(3,9,20,.68),transparent);
  backdrop-filter: none;
}
body.view-porch .header-actions {
  display: none;
}
body.drawer-open { overflow: hidden; }
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
[hidden] { display: none !important; }
.skip-link {
  position: fixed; z-index: 200; top: 8px; left: 8px; padding: 10px 14px;
  color: var(--night); background: var(--ink); border-radius: 8px; transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }
.visually-hidden {
  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;
}

.site-header {
  position: fixed; z-index: 80; inset: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 78px; padding: 14px clamp(18px,4vw,64px);
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg,rgba(3,9,20,.86),rgba(3,9,20,.38));
  backdrop-filter: blur(12px);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 11px; padding: 0;
  color: #fff; border: 0; background: transparent; cursor: pointer;
  font-size: .78rem; font-weight: 850; letter-spacing: .14em;
}
.wordmark-mark {
  display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%; background: rgba(4,12,28,.45);
}
.wordmark-mark svg { width: 17px; fill: none; stroke: var(--amber); stroke-width: 1.5; }
.wordmark-dot { color: var(--amber); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.house-status {
  display: inline-flex; align-items: center; gap: 8px; margin-right: 8px;
  color: rgba(255,255,255,.68); font-size: .63rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
.house-status i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 5px rgba(147,217,161,.08),0 0 15px rgba(147,217,161,.75);
}
.header-button, .round-button {
  border: 1px solid var(--line); background: rgba(7,16,34,.64); cursor: pointer; backdrop-filter: blur(8px);
}
.header-button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px;
  border-radius: 99px; font-size: .69rem; font-weight: 800; letter-spacing: .04em;
}
.header-button b {
  display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px;
  color: #101624; border-radius: 99px; background: var(--amber); font-size: .66rem;
}
.round-button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.round-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .sound-on-icon { display: none; }
.sound-toggle[aria-pressed="true"] .sound-on-icon { display: block; }
.sound-toggle[aria-pressed="true"] .sound-off-icon { display: none; }
.header-button:hover,.round-button:hover,.wordmark:hover { border-color: rgba(245,185,95,.6); }

.view { position: relative; min-height: 100svh; }
.view:not(.is-active) { display: none; }
.eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  color: var(--teal); font-size: .66rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase;
}
.eyebrow > span { width: 26px; height: 1px; background: currentColor; }
.micro-label {
  display: block; color: var(--teal); font-size: .59rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase;
}
.primary-button,.quiet-button,.text-button,.back-button {
  border: 0; cursor: pointer; font-weight: 850;
}
.primary-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 21px; color: #111925; border-radius: 4px; background: var(--amber);
  font-size: .71rem; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 13px 30px rgba(245,185,95,.17);
}
.primary-button:hover { transform: translateY(-2px); background: #ffd083; }
.quiet-button {
  min-height: 42px; padding: 9px 14px; color: var(--ink); border: 1px solid var(--line);
  border-radius: 7px; background: rgba(255,255,255,.045); font-size: .7rem; letter-spacing: .05em;
}
.quiet-button:hover { border-color: rgba(121,214,208,.55); background: rgba(121,214,208,.08); }
.text-button {
  padding: 8px 0; color: var(--teal); background: none; text-decoration: underline;
  text-decoration-color: rgba(121,214,208,.35); text-underline-offset: 4px; font-size: .69rem;
}

/* Porch */
.porch-view { isolation: isolate; height: 100dvh; min-height: 0; overflow: hidden; background: #061127; }
.porch-view::after {
  content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg,rgba(2,8,20,.88) 0%,rgba(2,8,20,.68) 34%,rgba(2,8,20,.1) 61%,rgba(2,8,20,.25)),
    linear-gradient(0deg,rgba(2,7,16,.55),transparent 37%);
}
.house-art {
  position: absolute; z-index: 0; top: 50%; left: 50%;
  width: max(100vw,164.44vh); aspect-ratio: 1600/973; transform: translate(-50%,-50%);
}
.house-art picture,.house-art img { display: block; width: 100%; height: 100%; }
.house-art img { object-fit: cover; }
.porch-flare,.door-glow {
  position: absolute; pointer-events: none; opacity: 0; border-radius: 50%; transform: translate(-50%,-50%);
}
.porch-flare {
  left: 68.1%; top: 57%; width: 11%; aspect-ratio: 1;
  background: radial-gradient(circle,rgba(255,218,150,.72),rgba(255,183,83,.17) 34%,transparent 70%); filter: blur(7px);
}
.door-glow {
  left: 68.2%; top: 68%; width: 8%; height: 16%;
  background: radial-gradient(ellipse,rgba(255,224,164,.75),rgba(255,177,77,.1) 52%,transparent 74%);
}
.porch-view.is-ringing .porch-flare { animation: flare 1.4s ease-out; }
.porch-view.door-open .door-glow { opacity: 1; animation: open-glow 2s ease-in-out infinite alternate; }
@keyframes flare { 0%,100%{opacity:0;scale:.3} 28%{opacity:1} 60%{opacity:.55;scale:1.3} }
@keyframes open-glow { from{filter:blur(6px);scale:.88} to{filter:blur(10px);scale:1.12} }
.sky { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.moon {
  position: absolute; top: 14%; left: 33%; width: clamp(28px,3.5vw,56px); aspect-ratio: 1; border-radius: 50%;
  opacity: .78; background: radial-gradient(circle at 35% 35%,#fff9d8 0 7%,#d8e7df 45%,#9cb4c2);
  box-shadow: 0 0 28px rgba(225,238,220,.26);
}
.shooting-star {
  position: absolute; width: 120px; height: 1px; opacity: 0;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.9)); transform: rotate(-24deg); animation: shoot 1.2s ease-in forwards;
}
@keyframes shoot { 0%{opacity:0;translate:0 0} 10%{opacity:1} 100%{opacity:0;translate:390px 180px} }
.firefly {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffe58d;
  box-shadow: 0 0 10px 3px rgba(255,214,99,.52); animation: fly var(--duration) ease-in-out var(--delay) infinite alternate;
}
@keyframes fly { 0%{opacity:.08;translate:0 0;scale:.5} 35%{opacity:1} 100%{opacity:.18;translate:var(--dx) var(--dy);scale:1.1} }
.porch-copy {
  position: relative; z-index: 8; width: min(625px,46vw); padding: clamp(138px,17vh,190px) 0 105px clamp(25px,6.2vw,110px);
}
.porch-copy h1,.foyer-heading h1,.basement-heading h1 {
  margin: 0; color: #fff; font-family: var(--display); font-weight: 400; letter-spacing: -.055em; line-height: .87;
}
.porch-copy h1 { font-size: clamp(4rem,7vw,8rem); }
.porch-copy h1 em,.foyer-heading h1 em,.basement-heading h1 em { color: var(--amber); font-weight: 400; }
.porch-lede {
  max-width: 470px; margin: 25px 0 0; color: rgba(238,242,248,.76); font-size: clamp(.95rem,1.08vw,1.1rem); line-height: 1.7;
}
.porch-intro { display: flex; align-items: center; gap: 18px; margin-top: 29px; }
.porch-intro p { max-width: 250px; margin: 0; color: rgba(255,255,255,.5); font-size: .71rem; line-height: 1.55; }
.challenge-panel,.entry-ready {
  width: min(500px,100%); margin-top: 26px; padding: 17px 19px; border: 1px solid rgba(121,214,208,.28);
  border-radius: 12px; background: linear-gradient(135deg,rgba(8,20,41,.9),rgba(8,14,28,.78)); box-shadow: 0 20px 60px rgba(0,0,0,.23);
  backdrop-filter: blur(13px);
}
.challenge-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.challenge-heading h2,.entry-ready h2 { margin: 4px 0 0; font-family: var(--display); font-size: 1.45rem; font-weight: 400; }
.challenge-panel > p { margin: 12px 0; color: #c7d1df; font-size: .8rem; line-height: 1.5; }
.attempt-light { width: 11px; height: 11px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 18px rgba(245,185,95,.8); }
.sequence-progress { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin: 13px 0; }
.sequence-progress i { height: 5px; border-radius: 4px; background: rgba(255,255,255,.1); }
.sequence-progress i.done { background: var(--teal); box-shadow: 0 0 12px rgba(121,214,208,.45); }
.sequence-progress.is-wrong { animation: shake .35s ease; }
@keyframes shake { 25%{translate:-7px 0} 50%{translate:6px 0} 75%{translate:-3px 0} }
.challenge-actions { display: flex; align-items: center; gap: 18px; }
.entry-ready { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.success-seal {
  display: grid; place-items: center; width: 42px; height: 42px; color: #08131c; border-radius: 50%;
  background: var(--teal); font-weight: 900; box-shadow: 0 0 25px rgba(121,214,208,.35);
}
.window-controls {
  position: absolute; z-index: 9; top: 50%; left: 50%;
  width: max(100vw,164.44vh); aspect-ratio: 1600/973;
  pointer-events: none; transform: translate(-50%,-50%);
}
.porch-window,.front-door {
  position: absolute; padding: 0; pointer-events: auto; cursor: pointer; transform: translate(-50%,-50%);
}
.porch-window {
  width: 4.65%; aspect-ratio: 1; border: 1px solid rgba(255,225,162,.32); border-radius: 50%;
  background: rgba(255,193,96,.03); box-shadow: inset 0 0 18px rgba(255,204,118,.07); transition: .2s ease;
}
.porch-window::before {
  content: ""; position: absolute; inset: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: #ffe0a0; transform: translate(-50%,-50%); box-shadow: 0 0 10px rgba(255,196,92,.8);
}
.porch-window span {
  position: absolute; left: 50%; bottom: -23px; min-width: 20px; padding: 2px 5px; translate: -50% 0;
  color: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.16); border-radius: 99px;
  background: rgba(4,10,20,.65); font-size: .58rem; font-weight: 800;
}
.porch-window:hover,.porch-window:focus-visible { outline: none; scale: 1.1; border-color: var(--amber); }
.porch-window.is-lit {
  scale: 1.25; border-color: #fff3bb; background: rgba(255,207,110,.45);
  box-shadow: 0 0 45px 18px rgba(255,196,80,.35),inset 0 0 22px rgba(255,244,199,.82);
}
.window-1 { left:60.4%;top:42%; }.window-2 { left:74.6%;top:42%; }
.window-3 { left:55.4%;top:64.5%; }.window-4 { left:80.4%;top:64.5%; }
.front-door {
  left:68.2%; top:68%; width:5.6%; height:12%; border:1px solid rgba(255,225,162,.38);
  border-radius:45% 45% 8px 8px; background:rgba(255,193,96,.04);
}
.front-door span {
  position:absolute; left:50%; top:102%; translate:-50% 7px; padding:3px 8px; color:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.15); border-radius:99px; background:rgba(4,10,20,.72);
  font-size:.55rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap;
}
.door-open .front-door { border-color:var(--amber); box-shadow:0 0 35px rgba(245,185,95,.4),inset 0 0 30px rgba(245,185,95,.2); }
.porch-note {
  position:absolute; z-index:8; right:clamp(25px,4vw,70px); bottom:25px; margin:0; color:rgba(255,255,255,.48);
  font-size:.64rem; letter-spacing:.04em;
}
body.view-porch .porch-note { display: none; }
.porch-note span { color:var(--amber); margin-right:7px; }

/* Interior */
.interior-view {
  overflow:hidden; padding: 120px clamp(18px,4vw,60px) 70px;
  background:
    radial-gradient(circle at 50% 9%,rgba(245,185,95,.15),transparent 30%),
    linear-gradient(180deg,#172536 0 58%,#0b111b 58%);
}
.interior-atmosphere { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.wallpaper {
  position:absolute; inset:0 0 42%; opacity:.19;
  background-image: radial-gradient(ellipse at center,transparent 0 32%,#a6b98f 34% 37%,transparent 39%);
  background-size:44px 66px;
}
.floor {
  position:absolute; inset:58% 0 0; transform:perspective(480px) rotateX(58deg); transform-origin:top;
  background:repeating-linear-gradient(90deg,#15110f 0 72px,#2c2119 74px,#15110f 76px);
  border-top:12px solid #080b10;
}
.wall-light {
  position:absolute; top:19%; width:120px; height:200px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,210,128,.18),transparent 67%);
}
.light-left{left:4%}.light-right{right:4%}
.interior-shell { position:relative; z-index:3; width:min(1180px,100%); margin:auto; }
.foyer-heading { display:grid; grid-template-columns:1fr auto; align-items:end; gap:30px; margin-bottom:36px; }
.foyer-heading h1 { font-size:clamp(3rem,6vw,6.5rem); }
.key-meter {
  width:250px; padding:16px; border:1px solid rgba(245,185,95,.24); border-radius:12px;
  background:rgba(7,14,25,.65); backdrop-filter:blur(10px);
}
.key-pieces { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:9px 0; }
.key-pieces i { height:9px; border:1px solid rgba(255,255,255,.12); background:#151d2b; transform:skewX(-22deg); }
.key-pieces i.found { border-color:var(--amber); background:linear-gradient(90deg,#b06d24,var(--amber)); box-shadow:0 0 12px rgba(245,185,95,.3); }
.key-meter strong { color:#d8e0eb; font-size:.73rem; }
.hall-map { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.room-card {
  position:relative; min-height:255px; padding:24px; overflow:hidden; text-align:left; cursor:pointer;
  border:1px solid rgba(255,255,255,.13); border-radius:14px; background:linear-gradient(145deg,rgba(15,26,43,.94),rgba(6,13,25,.96));
  box-shadow:0 20px 55px rgba(0,0,0,.22); transition:transform .25s ease,border-color .25s ease;
}
.room-card::after {
  content:""; position:absolute; width:180px; aspect-ratio:1; right:-70px; top:-70px; border-radius:50%; opacity:.13;
  background:radial-gradient(circle,currentColor,transparent 68%);
}
.room-card:hover { transform:translateY(-5px); border-color:currentColor; }
.room-observatory{color:var(--lavender)}.room-library{color:var(--teal)}.room-kitchen{color:var(--coral)}
.room-number { position:absolute; top:18px; right:19px; color:rgba(255,255,255,.36); font-size:.62rem; font-weight:800; letter-spacing:.14em; }
.room-icon { display:grid; place-items:center; width:58px; height:58px; margin-bottom:25px; border:1px solid currentColor; border-radius:50%; font-size:1.65rem; }
.room-copy { display:flex; flex-direction:column; gap:7px; color:var(--ink); }
.room-copy small { color:currentColor; font-size:.58rem; font-weight:850; letter-spacing:.15em; }
.room-copy strong { font-family:var(--display); font-size:1.55rem; font-weight:400; }
.room-copy span { color:var(--muted); font-size:.75rem; line-height:1.5; }
.room-state {
  display:inline-flex; margin-top:20px; padding:5px 8px; color:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.12);
  border-radius:99px; font-size:.57rem; font-weight:850; letter-spacing:.09em; text-transform:uppercase;
}
.room-card.is-complete .room-state { color:#07151a; border-color:var(--teal); background:var(--teal); }
.room-card.is-complete::before { content:"✓"; position:absolute; right:18px; bottom:18px; color:var(--teal); font-size:1.3rem; font-weight:900; }
.basement-door {
  grid-column:1/-1; position:relative; display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:18px;
  min-height:132px; padding:20px 25px; overflow:hidden; text-align:left; cursor:pointer;
  border:1px solid rgba(255,255,255,.13); border-radius:14px; background:linear-gradient(90deg,#101720,#080d13);
}
.basement-door::before {
  content:""; position:absolute; inset:0; opacity:.18;
  background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(255,255,255,.03) 10px 11px);
}
.door-plaque {
  position:relative; z-index:1; padding:7px 10px; color:#b6a78e; border:1px solid #756b5c; background:#17191a;
  font-family:serif; font-size:.64rem; letter-spacing:.15em;
}
.door-lock { position:relative; z-index:1; display:grid; place-items:center; width:46px; height:46px; border:2px solid #796d5b; border-radius:50%; }
.door-lock i { width:10px; height:16px; border-radius:7px 7px 2px 2px; background:#8f826c; }
.basement-copy { position:relative; z-index:1; display:block; }
.basement-copy strong { display:block; font-family:var(--display); font-size:1.45rem; font-weight:400; }
.basement-copy span { display:block; margin-top:4px; color:var(--muted); font-size:.75rem; }
.basement-door b { position:relative; z-index:1; color:#a69b88; font-size:.75rem; }
.basement-door.is-locked { cursor:not-allowed; }
.basement-door.is-unlocked {
  border-color:rgba(245,185,95,.55); background:linear-gradient(90deg,#231a0e,#0b1017); box-shadow:0 0 45px rgba(245,185,95,.1);
}
.basement-door.is-unlocked .door-lock { border-color:var(--amber); box-shadow:0 0 20px rgba(245,185,95,.28); }
.basement-door.is-unlocked .door-lock i { background:var(--amber); transform:rotate(-35deg) translate(7px,-6px); }
.basement-door.is-unlocked:hover { transform:translateY(-3px); }
.tinker-shelf {
  display:grid; grid-template-columns:1.25fr 1fr auto; align-items:center; gap:30px; margin-top:42px; padding:27px 0 0;
  border-top:1px solid rgba(255,255,255,.11);
}
.tinker-shelf h2 { margin:0; font-family:var(--display); font-size:clamp(1.7rem,3vw,2.7rem); font-weight:400; }
.tinker-shelf p { color:var(--muted); font-size:.78rem; line-height:1.65; }

/* Quest log */
.quest-log {
  position:fixed; z-index:120; top:0; right:0; width:min(400px,92vw); height:100dvh; padding:26px;
  border-left:1px solid rgba(255,255,255,.14); background:linear-gradient(160deg,#101a2d,#070d18 65%);
  box-shadow:-25px 0 70px rgba(0,0,0,.45); transform:translateX(105%); transition:transform .35s ease;
}
.quest-log.is-open { transform:translateX(0); }
.quest-log-head { display:flex; align-items:flex-start; justify-content:space-between; padding-top:65px; }
.quest-log h2 { margin:5px 0 0; font-family:var(--display); font-size:2rem; font-weight:400; }
.log-close,.dialog-close {
  display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid var(--line); border-radius:50%;
  background:rgba(255,255,255,.04); cursor:pointer; font-size:1.35rem;
}
.log-key { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:25px 0; }
.log-key i { height:12px; border:1px solid #3a414d; background:#141b26; transform:skewX(-22deg); }
.log-key i.found { border-color:var(--amber); background:linear-gradient(90deg,#ac6722,var(--amber)); }
.quest-log ol { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.quest-log li { display:grid; grid-template-columns:34px 1fr; align-items:center; gap:12px; padding:12px; border:1px solid rgba(255,255,255,.09); border-radius:9px; }
.quest-log li > span { display:grid; place-items:center; width:30px; height:30px; border:1px solid #3a475b; border-radius:50%; color:#8190a4; font-size:.7rem; font-weight:850; }
.quest-log li strong,.quest-log li small { display:block; }.quest-log li strong{font-size:.78rem}.quest-log li small{margin-top:3px;color:#7f8da1;font-size:.65rem}
.quest-log li.is-complete { border-color:rgba(121,214,208,.25); }.quest-log li.is-complete > span{color:#07151a;border-color:var(--teal);background:var(--teal)}
.log-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:24px; }
.reset-progress { padding:8px 0; color:#8490a1; border:0; background:transparent; cursor:pointer; font-size:.64rem; text-decoration:underline; text-underline-offset:4px; }
.drawer-scrim { position:fixed; z-index:110; inset:0; width:100%; height:100%; padding:0; border:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); }

/* Puzzles */
.quest-dialog {
  width:min(680px,calc(100vw - 28px)); max-height:min(820px,calc(100dvh - 28px)); padding:clamp(24px,4vw,42px);
  overflow:auto; color:var(--ink); border:1px solid rgba(255,255,255,.18); border-radius:18px;
  background:linear-gradient(150deg,#142139,#090f1c 70%); box-shadow:0 30px 100px rgba(0,0,0,.72);
}
.quest-dialog::backdrop { background:rgba(2,6,13,.77); backdrop-filter:blur(6px); }
.dialog-close { position:absolute; top:16px; right:16px; }
.dialog-room-mark { width:62px; height:62px; margin-bottom:24px; border:1px solid currentColor; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.12),transparent); }
.dialog-kicker { margin:0 0 7px; color:var(--teal); font-size:.61rem; font-weight:850; letter-spacing:.17em; text-transform:uppercase; }
.quest-dialog h2 { margin:0; font-family:var(--display); font-size:clamp(2.3rem,6vw,4.4rem); font-weight:400; letter-spacing:-.04em; }
.dialog-copy { max-width:560px; margin:14px 0 23px; color:#b5c1d2; font-size:.86rem; line-height:1.65; }
.puzzle-stage { min-height:170px; padding:18px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(2,7,15,.42); }
.dialog-feedback { min-height:25px; padding-top:11px; color:var(--amber); font-size:.73rem; font-weight:750; }
.dialog-actions { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:5px; }
.star-puzzle { display:flex; align-items:center; justify-content:space-around; min-height:145px; gap:8px; }
.puzzle-star {
  display:grid; place-items:center; width:58px; aspect-ratio:1; padding:0; color:#fff3bc; border:0; border-radius:50%;
  background:transparent; cursor:pointer; font-size:var(--size); opacity:var(--opacity); text-shadow:0 0 18px currentColor;
}
.puzzle-star:hover,.puzzle-star:focus-visible { outline:1px solid var(--lavender); scale:1.15; }
.puzzle-star.selected { color:var(--teal); opacity:1; transform:scale(.8); }
.book-puzzle { display:flex; align-items:flex-end; justify-content:center; min-height:170px; gap:10px; }
.puzzle-book {
  width:70px; min-height:var(--height); padding:11px 6px; color:#f7e6cf; border:1px solid rgba(255,255,255,.3); border-radius:4px 9px 3px 3px;
  background:var(--book); cursor:pointer; writing-mode:vertical-rl; font-family:var(--display); font-size:.86rem;
}
.puzzle-book small { margin-top:8px; color:rgba(255,255,255,.65); font-family:var(--sans); font-size:.55rem; }
.puzzle-book.selected { opacity:.35; transform:translateY(-8px); }
.pantry-puzzle { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.ingredient {
  min-height:73px; padding:10px; color:#c4cedb; border:1px solid rgba(255,255,255,.12); border-radius:9px;
  background:rgba(255,255,255,.035); cursor:pointer; font-size:.7rem; font-weight:750;
}
.ingredient span { display:block; margin-bottom:5px; font-size:1.25rem; }
.ingredient.selected { color:#111925; border-color:var(--amber); background:var(--amber); }
.mix-button { grid-column:1/-1; min-height:42px; color:#111925; border:0; border-radius:7px; background:var(--teal); cursor:pointer; font-weight:900; }
.solved-room { display:grid; place-items:center; min-height:155px; text-align:center; color:#b8c5d6; }
.solved-room span { display:grid; place-items:center; width:55px; height:55px; margin-bottom:12px; color:#07151a; border-radius:50%; background:var(--teal); font-size:1.4rem; font-weight:900; }
.workshop-note { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.workshop-note div { min-height:105px; padding:13px; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:rgba(255,255,255,.03); }
.workshop-note b,.workshop-note small { display:block; }.workshop-note b{margin:9px 0 5px}.workshop-note small{color:var(--muted);line-height:1.45}

/* Award */
.key-award {
  position:fixed; z-index:150; inset:0; display:grid; place-content:center; justify-items:center; padding:24px;
  text-align:center; background:radial-gradient(circle,rgba(30,42,59,.72),rgba(2,6,13,.94)); backdrop-filter:blur(8px);
}
.award-light { position:absolute; left:50%; top:42%; width:380px; aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:radial-gradient(circle,rgba(245,185,95,.23),transparent 68%); animation:pulse 1.6s ease infinite alternate; }
@keyframes pulse { to{scale:1.2;opacity:.55} }
.award-piece { position:relative; display:grid; place-items:center; width:115px; height:115px; margin-bottom:22px; color:#261707; border:2px solid #ffd990; border-radius:50%; background:linear-gradient(145deg,#ffe092,#b96d23); box-shadow:0 0 70px rgba(245,185,95,.46); font-size:3.4rem; animation:piece-in .7s cubic-bezier(.2,.8,.2,1); }
@keyframes piece-in { from{opacity:0;scale:.25;rotate:-80deg} }
.key-award h2 { position:relative; margin:7px 0; font-family:var(--display); font-size:clamp(2.3rem,6vw,4.5rem); font-weight:400; }
.key-award > p:not(.micro-label) { position:relative; max-width:430px; margin:0 0 22px; color:#b9c4d4; line-height:1.6; }
.key-award .primary-button { position:relative; }
.toast {
  position:fixed; z-index:160; left:50%; bottom:25px; max-width:min(500px,calc(100vw - 30px)); padding:12px 17px;
  color:#101822; border-radius:99px; background:var(--ink); box-shadow:0 14px 45px rgba(0,0,0,.45);
  font-size:.73rem; font-weight:800; text-align:center; transform:translate(-50%,130%); transition:transform .3s ease;
}
.toast.show { transform:translate(-50%,0); }
.screen-transition { position:fixed; z-index:140; inset:0; pointer-events:none; opacity:0; background:var(--night); }
.screen-transition.active { animation:transition 1s ease; }
@keyframes transition { 0%{opacity:0} 42%{opacity:1} 58%{opacity:1} 100%{opacity:0} }

/* Basement */
.basement-view {
  overflow:hidden; padding:112px clamp(18px,4vw,60px) 65px;
  background:
    radial-gradient(circle at 15% 18%,rgba(172,65,255,.2),transparent 30%),
    radial-gradient(circle at 85% 30%,rgba(27,216,255,.16),transparent 32%),
    linear-gradient(180deg,#080417,#04020b 70%);
}
.basement-grid {
  position:absolute; inset:0; opacity:.13;
  background-image:linear-gradient(rgba(121,214,208,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(121,214,208,.3) 1px,transparent 1px);
  background-size:50px 50px; transform:perspective(700px) rotateX(58deg) scale(1.4); transform-origin:center 75%;
}
.basement-shell { position:relative; z-index:2; width:min(1180px,100%); margin:auto; }
.back-button { padding:8px 0; color:#9ecbd1; background:transparent; }
.basement-heading { max-width:700px; margin-bottom:40px; }
.basement-heading .eyebrow { margin-top:28px; color:#e18aff; }
.basement-heading h1 { font-size:clamp(4rem,8vw,8.5rem); }
.basement-heading h1 em { color:#75ecff; }
.basement-heading > p:last-child { max-width:570px; color:#aeb8ca; line-height:1.7; }
.cabinet-grid { display:grid; grid-template-columns:repeat(5,1fr); align-items:end; gap:16px; }
.arcade-cabinet {
  position:relative; display:flex; flex-direction:column; min-height:350px; padding:13px 12px 24px;
  color:var(--cabinet); border:2px solid currentColor; border-radius:10px 10px 20px 20px;
  background:linear-gradient(90deg,#090d17,#172035 45%,#090d17); text-decoration:none;
  box-shadow:0 0 28px color-mix(in srgb,currentColor 22%,transparent),inset 0 0 25px #000; transition:.25s ease;
}
.arcade-cabinet:hover { transform:translateY(-12px); filter:brightness(1.17); }
.cabinet-space{--cabinet:#51d7ff}.cabinet-star{--cabinet:#ff617e}.cabinet-vanguard{--cabinet:#76f4a9}.cabinet-barrel{--cabinet:#ffb44d}.cabinet-hungry{--cabinet:#c58aff}
.cabinet-top { padding:5px 2px 10px; font-size:.52rem; font-weight:900; letter-spacing:.11em; text-align:center; }
.cabinet-screen {
  display:grid; place-items:center; height:155px; overflow:hidden; border:4px solid #05070c; border-radius:36% 36% 10px 10px;
  background:radial-gradient(circle at center,color-mix(in srgb,currentColor 24%,#030611),#02040a 65%); box-shadow:inset 0 0 28px #000;
}
.cabinet-screen i { font-style:normal; font-size:2.5rem; text-shadow:0 0 20px currentColor; animation:cabinet-float 2.2s ease-in-out infinite alternate; }
@keyframes cabinet-float { to{translate:0 -12px;rotate:8deg} }
.cabinet-name { margin:17px 0 12px; color:#fff; font-family:var(--display); font-size:1.25rem; text-align:center; }
.cabinet-controls { position:relative; display:flex; align-items:center; justify-content:center; gap:11px; height:47px; border-top:1px solid rgba(255,255,255,.13); }
.cabinet-controls i { width:5px; height:22px; border-radius:3px; background:#9eaabc; transform:rotate(-16deg); }
.cabinet-controls b { width:14px; aspect-ratio:1; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; }
.basement-footnote { margin:28px 0 0; color:#78879d; font-size:.68rem; text-align:center; }

@media (max-width: 980px) {
  .porch-view::after { background:linear-gradient(90deg,rgba(2,8,20,.88),rgba(2,8,20,.55) 50%,rgba(2,8,20,.15)); }
  .porch-copy { width:min(660px,58vw); }
  .hall-map { grid-template-columns:1fr 1fr; }.room-kitchen{grid-column:1/-1}.basement-door{grid-column:1/-1}
  .tinker-shelf { grid-template-columns:1fr auto; }.tinker-shelf>p{grid-column:1/-1;grid-row:2}
  .cabinet-grid { grid-template-columns:repeat(3,1fr); }.arcade-cabinet{min-height:320px}
}

@media (max-width: 760px) {
  .site-header { min-height:66px; padding:11px 13px; }
  .wordmark-mark{width:34px;height:34px}.house-status{display:none}.header-button>span:nth-child(2){display:none}
  .view { min-height:100dvh; }
  .porch-view { height:100dvh; min-height:0; }
  .porch-view::after {
    background:linear-gradient(0deg,rgba(2,8,20,.95) 0%,rgba(2,8,20,.74) 51%,rgba(2,8,20,.12) 83%),
      linear-gradient(90deg,rgba(2,8,20,.25),rgba(2,8,20,.12));
  }
  .house-art { top:28%; width:150vw; }
  .porch-copy { position:absolute; inset:auto 0 0; width:100%; padding:0 18px 20px; }
  .porch-copy h1 { font-size:clamp(3.5rem,16vw,5.5rem); }
  .porch-lede { margin-top:16px; font-size:.88rem; }
  .porch-intro { align-items:flex-start; flex-direction:column; margin-top:18px; }
  .porch-intro p { max-width:320px; }
  .challenge-panel,.entry-ready { margin-top:17px; }
  .entry-ready { grid-template-columns:auto 1fr; }.entry-ready .primary-button{grid-column:1/-1;width:100%}
  .window-controls { top:28%; width:150vw; transform:translate(-50%,-50%); }
  .porch-window { width:6.2%; }
  .front-door { width:7%; height:14%; }
  .porch-window span,.front-door span { transform:scale(.7); }
  .porch-note { display:none; }
  .interior-view { padding:95px 12px 45px; overflow:visible; }
  .foyer-heading { grid-template-columns:1fr; gap:22px; }.foyer-heading h1{font-size:clamp(3rem,14vw,5rem)}.key-meter{width:100%}
  .hall-map { grid-template-columns:1fr; }.room-kitchen{grid-column:auto}.room-card{min-height:215px}
  .basement-door { grid-template-columns:auto 1fr; gap:12px; }.basement-copy{grid-column:1/-1}.basement-door b{position:absolute;right:18px;top:20px}
  .tinker-shelf { grid-template-columns:1fr; gap:10px; }.tinker-shelf>p{grid-column:auto;grid-row:auto}.tinker-shelf .quiet-button{justify-self:start}
  .quest-dialog { padding:27px 16px 20px; }.dialog-room-mark{width:48px;height:48px;margin-bottom:16px}
  .puzzle-stage{padding:11px}.puzzle-star{width:48px}.puzzle-book{width:52px}.pantry-puzzle{grid-template-columns:1fr 1fr}
  .workshop-note{grid-template-columns:1fr}
  .basement-view { padding:88px 12px 45px; overflow:visible; }.basement-heading h1{font-size:clamp(3.8rem,18vw,6.5rem)}
  .cabinet-grid { grid-template-columns:1fr 1fr; gap:12px; }.arcade-cabinet{min-height:300px}.cabinet-grid .arcade-cabinet:last-child{grid-column:1/-1;width:50%;justify-self:center}
}

@media (max-width: 430px) {
  .wordmark { font-size:.67rem; letter-spacing:.1em; }.header-actions{gap:7px}.header-button{padding:7px 9px}
  .porch-view { height:100dvh; min-height:0; }.house-art{top:26%;width:150vw}.window-controls{top:26%;width:150vw}
  .porch-copy h1{font-size:3.6rem}.eyebrow{margin-bottom:12px}
  .challenge-heading h2,.entry-ready h2{font-size:1.2rem}.challenge-panel{padding:14px}
  .star-puzzle{gap:0}.puzzle-star{width:42px}.book-puzzle{gap:5px}.puzzle-book{width:45px;font-size:.72rem}
  .cabinet-grid{grid-template-columns:1fr}.cabinet-grid .arcade-cabinet:last-child{grid-column:auto;width:100%}.arcade-cabinet{width:min(250px,100%)!important;justify-self:center}
}

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

/* Immersive foyer */
body:not(.view-porch) #house.is-active { overflow: hidden; }
.interior-view {
  height: 100dvh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #03060c;
  isolation: isolate;
  perspective: 1200px;
}
.foyer-world {
  --pan-x: 0px;
  --look-x: 0px;
  --look-y: 0px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: max(100vw,177.872dvh);
  height: 100dvh;
  overflow: hidden;
  transform:
    translateX(calc(-50% + var(--pan-x) + var(--look-x)))
    translateY(var(--look-y))
    scale(1.025);
  transform-origin: center center;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
  touch-action: none;
  will-change: transform;
}
.foyer-world.is-looking { transition-duration: .08s; }
.foyer-world.is-dragging { transition: none; cursor: grabbing; }
.foyer-art,.foyer-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.foyer-art img {
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  filter: saturate(.96) contrast(1.03);
}
.foyer-vignette {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,rgba(1,4,9,.38),transparent 20%,transparent 72%,rgba(1,4,9,.55)),
    radial-gradient(ellipse at center,transparent 46%,rgba(1,4,9,.38) 100%);
}
.foyer-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background: linear-gradient(100deg,transparent 0 47%,rgba(255,218,146,.12) 50%,transparent 53%);
  animation: foyer-light 7s ease-in-out infinite alternate;
}
@keyframes foyer-light { to { opacity: .38; translate: 2% 0; } }
.foyer-motes { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.foyer-mote {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgba(255,225,165,.78);
  box-shadow: 0 0 9px rgba(255,205,116,.55);
  animation: foyer-mote var(--duration) ease-in-out var(--delay) infinite alternate;
}
@keyframes foyer-mote {
  from { opacity: .06; translate: 0 14px; }
  48% { opacity: .72; }
  to { opacity: .12; translate: var(--drift) -18px; }
}
.doorway-hotspot {
  --door-color: var(--amber);
  position: absolute;
  z-index: 5;
  padding: 0;
  color: var(--door-color);
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.doorway-hotspot::before {
  content: "";
  position: absolute;
  inset: 3%;
  border: 1px solid color-mix(in srgb,var(--door-color) 28%,transparent);
  border-radius: inherit;
  opacity: .25;
  transition: opacity .25s ease,box-shadow .25s ease;
}
.doorway-hotspot:hover,.doorway-hotspot:focus-visible {
  outline: none;
  border-color: color-mix(in srgb,var(--door-color) 65%,transparent);
  background: color-mix(in srgb,var(--door-color) 7%,transparent);
  box-shadow: inset 0 0 60px color-mix(in srgb,var(--door-color) 18%,transparent),0 0 40px color-mix(in srgb,var(--door-color) 15%,transparent);
}
.doorway-hotspot:hover::before,.doorway-hotspot:focus-visible::before { opacity: 1; box-shadow: inset 0 0 35px color-mix(in srgb,var(--door-color) 16%,transparent); }
.hotspot-workshop { --door-color:#f5b95f; left:8.5%; top:25%; width:20%; height:53%; }
.hotspot-library { --door-color:#79d6d0; left:27.4%; top:5%; width:12%; height:25%; }
.hotspot-observatory { --door-color:#b189ff; left:62.2%; top:5%; width:12%; height:25%; }
.hotspot-kitchen { --door-color:#f18f75; left:75.5%; top:25%; width:18%; height:53%; }
.hotspot-basement { --door-color:#f5b95f; left:41%; top:43%; width:18%; height:34%; }
.hotspot-basement.is-locked { --door-color:#a3937d; }
.hotspot-basement.is-unlocked { --door-color:#ffd170; }
.hotspot-pulse {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 13px;
  aspect-ratio: 1;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb,var(--door-color) 35%,#fff);
  box-shadow: 0 0 0 7px color-mix(in srgb,var(--door-color) 10%,transparent),0 0 24px var(--door-color);
  transform: translate(-50%,-50%);
}
.hotspot-pulse::after {
  content: "";
  position: absolute;
  inset: -11px;
  border: 1px solid currentColor;
  border-radius: 50%;
  animation: doorway-pulse 2.3s ease-out infinite;
}
@keyframes doorway-pulse { from { opacity: .85; scale: .45; } to { opacity: 0; scale: 1.5; } }
.doorway-label {
  position: absolute;
  left: 50%;
  bottom: 7%;
  min-width: 185px;
  padding: 10px 13px;
  color: var(--ink);
  border: 1px solid color-mix(in srgb,var(--door-color) 35%,transparent);
  border-radius: 8px;
  background: rgba(4,9,17,.78);
  box-shadow: 0 12px 35px rgba(0,0,0,.28);
  text-align: left;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
  pointer-events: none;
  transition: transform .25s ease,background .25s ease;
}
.doorway-hotspot:hover .doorway-label,.doorway-hotspot:focus-visible .doorway-label {
  background: rgba(4,9,17,.93);
  transform: translateX(-50%) translateY(-5px);
}
.doorway-label small,.doorway-label strong,.doorway-label em { display: block; }
.doorway-label small { color: var(--door-color); font-size: .53rem; font-weight: 900; letter-spacing: .14em; }
.doorway-label strong { margin-top: 4px; font-family: var(--display); font-size: 1.08rem; font-weight: 400; }
.doorway-label em {
  margin-top: 3px;
  color: #9caabd;
  font-size: .6rem;
  font-style: normal;
  font-weight: 750;
}
.doorway-label b {
  position: absolute;
  right: 10px;
  top: 9px;
  color: var(--door-color);
  font-size: .58rem;
}
.doorway-hotspot.is-complete .doorway-label em { color: var(--teal); }
.doorway-hotspot.is-complete .hotspot-pulse { background: var(--teal); color: var(--teal); }
.hotspot-basement .doorway-label { min-width: 215px; bottom: 2%; }
.hotspot-basement.is-locked { cursor: not-allowed; }
.hotspot-basement.is-unlocked .hotspot-pulse { background: var(--amber); animation: unlocked-key 1.6s ease-in-out infinite alternate; }
@keyframes unlocked-key { to { scale: 1.25; box-shadow: 0 0 0 10px rgba(245,185,95,.12),0 0 38px var(--amber); } }
.foyer-presence {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 18px;
  width: min(500px,calc(100vw - 36px));
  padding: 14px 19px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: linear-gradient(135deg,rgba(5,11,20,.82),rgba(5,11,20,.58));
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(11px);
}
.foyer-presence .eyebrow { justify-content: center; margin-bottom: 5px; font-size: .55rem; }
.foyer-presence h1 {
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(1.8rem,3vw,2.8rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .9;
}
.foyer-presence h1 em { color: var(--amber); font-weight: 400; }
.foyer-presence > p:last-child { margin: 8px auto 0; color: #9caabd; font-size: .65rem; line-height: 1.45; }
.foyer-key-meter {
  position: absolute;
  z-index: 10;
  top: 96px;
  right: clamp(16px,3.2vw,52px);
  width: 230px;
  background: rgba(5,11,20,.78);
}
.look-controls {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 16px;
  display: none;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  width: min(330px,calc(100vw - 24px));
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 99px;
  background: rgba(4,9,17,.82);
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}
.look-controls button { height: 46px; border: 0; background: transparent; cursor: pointer; font-size: 1.2rem; }
.look-controls span { color: #aeb9c8; font-size: .62rem; font-weight: 750; text-align: center; }
.foyer-compass {
  position: absolute;
  z-index: 10;
  left: clamp(16px,3vw,48px);
  bottom: 25px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.55);
  font-size: .57rem;
  font-weight: 850;
  letter-spacing: .15em;
}
.foyer-compass i { width: 32px; height: 1px; background: var(--amber); }

@media (max-width: 900px) {
  .foyer-world {
    width: max(100vw,177.872dvh);
    cursor: grab;
  }
  .foyer-presence {
    top: 76px;
    bottom: auto;
    width: min(330px,calc(100vw - 32px));
    padding: 10px 13px;
    text-align: left;
  }
  .foyer-presence .eyebrow { justify-content: flex-start; }
  .foyer-presence h1 { font-size: 1.85rem; }
  .foyer-presence > p:last-child { display: none; }
  .foyer-key-meter {
    top: auto;
    right: 12px;
    bottom: 78px;
    width: 180px;
    padding: 10px;
  }
  .foyer-key-meter .micro-label { font-size: .5rem; }
  .foyer-key-meter strong { font-size: .62rem; }
  .look-controls { display: grid; }
  .foyer-compass { display: none; }
  .doorway-label { min-width: 158px; padding: 8px 10px; }
  .doorway-label strong { font-size: .92rem; }
  .hotspot-basement .doorway-label { min-width: 190px; }
}

@media (max-width: 520px) {
  .foyer-presence { width: calc(100vw - 24px); }
  .foyer-key-meter { left: 12px; right: auto; bottom: 76px; }
  .look-controls { bottom: 14px; }
}

/* Minimal, scene-led entrance */
.porch-view::after {
  background:
    radial-gradient(ellipse at 68% 58%,transparent 0 27%,rgba(2,7,16,.08) 52%,rgba(2,7,16,.47) 100%),
    linear-gradient(0deg,rgba(2,7,16,.42),transparent 35%),
    linear-gradient(180deg,rgba(2,7,16,.2),transparent 24%);
}
.porch-copy {
  position: absolute;
  z-index: 12;
  inset: 0;
  width: auto;
  padding: 0;
  pointer-events: none;
}
.porch-intro { display: none; }
.challenge-panel {
  position: absolute;
  left: 50%;
  bottom: clamp(20px,4vh,42px);
  width: min(370px,calc(100vw - 32px));
  margin: 0;
  padding: 11px 14px;
  border-color: rgba(255,255,255,.17);
  border-radius: 99px;
  background: rgba(4,10,21,.78);
  box-shadow: 0 14px 45px rgba(0,0,0,.28);
  text-align: center;
  pointer-events: auto;
  transform: translateX(-50%);
}
.challenge-panel > p {
  margin: 0 0 7px;
  color: rgba(255,255,255,.78);
  font-size: .68rem;
  line-height: 1.3;
}
.challenge-panel .sequence-progress {
  width: 126px;
  margin: 0 auto 8px;
}
.challenge-panel .sequence-progress i { height: 3px; }
.challenge-actions { justify-content: center; gap: 15px; }
.challenge-actions .quiet-button,
.challenge-actions .text-button {
  min-height: 0;
  padding: 3px 7px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.5);
  font-size: .6rem;
  text-decoration: none;
}
.challenge-actions button:hover,
.challenge-actions button:focus-visible { color: #fff; outline: none; }
.doorbell-hotspot {
  position: absolute;
  z-index: 3;
  left: 64.7%;
  top: 65.4%;
  width: 1.35%;
  min-width: 16px;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(255,224,163,.55);
  border-radius: 50%;
  background: radial-gradient(circle,#ffe4a6 0 18%,#9f6931 22% 46%,#281b13 50%);
  box-shadow: 0 0 10px rgba(255,195,91,.3);
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%,-50%);
}
.doorbell-hotspot::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(255,205,119,.38);
  border-radius: 50%;
  animation: doorbell-breathe 2.6s ease-in-out infinite;
}
.doorbell-hotspot span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  padding: 4px 8px;
  color: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 99px;
  background: rgba(3,8,17,.72);
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%,4px);
  transition: opacity .2s ease,transform .2s ease;
  white-space: nowrap;
}
.doorbell-hotspot:hover span,
.doorbell-hotspot:focus-visible span { opacity: 1; transform: translate(-50%,0); }
.doorbell-hotspot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@keyframes doorbell-breathe {
  0%,100% { opacity: .18; scale: .8; }
  50% { opacity: .75; scale: 1.25; }
}
.porch-window {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.porch-window::before { opacity: .14; transition: opacity .25s ease; }
.porch-view.is-ringing .porch-window { border-color: rgba(255,225,162,.18); }
.porch-view.is-ringing .porch-window::before { opacity: .7; }
.porch-window:hover,
.porch-window:focus-visible {
  border-color: rgba(245,185,95,.72);
  background: rgba(255,193,96,.06);
}
.front-door {
  border-color: transparent;
  background: transparent;
}
.front-door:hover,
.front-door:focus-visible {
  outline: none;
  border-color: rgba(255,225,162,.5);
  background: rgba(255,193,96,.04);
}
.front-door span { opacity: 0; transition: opacity .2s ease; }
.front-door:hover span,
.front-door:focus-visible span,
.door-open .front-door span { opacity: 1; }
.entry-ready {
  position: absolute;
  z-index: 4;
  left: 68.2%;
  top: 79%;
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
  transform: translate(-50%,-50%);
}
.door-invitation {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 13px;
  color: #171006;
  border: 0;
  border-radius: 99px;
  background: #f5c36f;
  box-shadow: 0 0 28px rgba(245,185,95,.4);
  cursor: pointer;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  animation: invitation-breathe 1.8s ease-in-out infinite alternate;
}
.door-invitation:hover,
.door-invitation:focus-visible { background: #ffe0a5; outline: 2px solid #fff; outline-offset: 3px; }
@keyframes invitation-breathe { to { box-shadow: 0 0 42px rgba(245,185,95,.68); translate: 0 -2px; } }

@media (max-width: 760px) {
  .porch-view::after {
    background:
      linear-gradient(0deg,rgba(2,7,16,.78),transparent 38%),
      radial-gradient(ellipse at 68% 30%,transparent 0 32%,rgba(2,7,16,.18) 72%);
  }
  .house-art,
  .window-controls {
    top: 43%;
    left: 6.3%;
    width: 240vw;
  }
  .porch-window { width: 3.5%; }
  .front-door { width: 4%; height: 13%; }
  .challenge-panel { bottom: 17px; padding: 10px 13px; }
  .doorbell-hotspot { width: 1.8%; min-width: 15px; }
  .entry-ready { top: 80%; }
  .door-invitation { min-height: 31px; padding: 6px 11px; }
}

/* Immersive home arcade */
body:not(.view-porch) #basement.is-active { overflow: hidden; }
.basement-view {
  height: 100dvh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #090603;
  isolation: isolate;
  perspective: 1200px;
}
.basement-world {
  --pan-x: 0px;
  --look-x: 0px;
  --look-y: 0px;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: max(100vw,177.68dvh);
  aspect-ratio: 1672/941;
  overflow: visible;
  transform:
    translateX(calc(-50% + var(--pan-x) + var(--look-x)))
    translateY(calc(-50% + var(--look-y)))
    scale(1.018);
  transform-origin: center;
  transition: transform .55s cubic-bezier(.22,.8,.22,1);
  will-change: transform;
}
.basement-world.is-dragging { cursor: grabbing; transition: none; }
.basement-art,
.basement-art img { display: block; width: 100%; height: 100%; }
.basement-art img { object-fit: cover; }
.basement-vignette {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%,transparent 36%,rgba(5,2,0,.16) 73%,rgba(3,1,0,.58) 100%),
    linear-gradient(180deg,rgba(3,1,0,.28),transparent 16% 80%,rgba(3,1,0,.38));
}
.arcade-ambience { position: absolute; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; }
.arcade-ambience i {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 10px 2px var(--glow);
  animation: arcade-drift var(--duration) ease-in-out var(--delay) infinite alternate;
}
@keyframes arcade-drift {
  from { opacity: .04; translate: 0 8px; }
  45% { opacity: .5; }
  to { opacity: .12; translate: var(--drift) -12px; }
}
.arcade-hotspot {
  --machine: #fff;
  position: absolute;
  z-index: 6;
  top: 22%;
  width: 15%;
  height: 58%;
  border: 1px solid transparent;
  border-radius: 22% 22% 8% 8%;
  color: var(--machine);
  text-decoration: none;
  cursor: pointer;
  transform: translateX(-50%);
  transition: border-color .22s ease,background .22s ease,filter .22s ease,transform .22s ease;
}
.arcade-hotspot::before {
  content: "";
  position: absolute;
  inset: 4% 9%;
  border: 1px solid color-mix(in srgb,var(--machine) 18%,transparent);
  border-radius: inherit;
  opacity: .35;
  transition: opacity .22s ease,box-shadow .22s ease;
}
.arcade-hotspot:hover,
.arcade-hotspot:focus-visible {
  outline: none;
  border-color: color-mix(in srgb,var(--machine) 56%,transparent);
  background: linear-gradient(180deg,color-mix(in srgb,var(--machine) 7%,transparent),transparent 62%);
  filter: brightness(1.12);
  transform: translateX(-50%) translateY(-5px);
}
.arcade-hotspot:hover::before,
.arcade-hotspot:focus-visible::before {
  opacity: 1;
  box-shadow: 0 0 42px color-mix(in srgb,var(--machine) 28%,transparent),inset 0 0 36px color-mix(in srgb,var(--machine) 10%,transparent);
}
.machine-pulse {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 11px;
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: var(--machine);
  box-shadow: 0 0 15px var(--machine);
  transform: translate(-50%,-50%);
}
.machine-pulse::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid var(--machine);
  border-radius: inherit;
  animation: machine-ready 2.4s ease-out infinite;
}
@keyframes machine-ready { from{opacity:.65;scale:.45} to{opacity:0;scale:1.5} }
.machine-label {
  position: absolute;
  left: 50%;
  bottom: -3%;
  display: grid;
  min-width: 180px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb,var(--machine) 42%,transparent);
  border-radius: 10px;
  background: rgba(5,6,10,.86);
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
  opacity: .82;
  transform: translate(-50%,5px);
  backdrop-filter: blur(11px);
  transition: opacity .2s ease,transform .2s ease;
}
.arcade-hotspot:hover .machine-label,
.arcade-hotspot:focus-visible .machine-label { opacity: 1; transform: translate(-50%,0); }
.machine-label small { color: var(--machine); font-size: .48rem; font-weight: 850; letter-spacing: .13em; }
.machine-label strong { margin-top: 3px; color: #fff; font-family: var(--display); font-size: 1.08rem; font-weight: 400; }
.machine-label em { margin-top: 2px; color: #aeb8c4; font-size: .56rem; font-style: normal; }
.machine-space { --machine:#38d7ff; left:11.5%; }
.machine-star { --machine:#ff52bc; left:26.6%; }
.machine-vanguard { --machine:#68f28c; left:49.5%; }
.machine-barrel { --machine:#ffb13f; left:69.8%; }
.machine-hungry { --machine:#ad65ff; left:88.4%; }
.basement-room-ui {
  position: absolute;
  z-index: 12;
  top: 94px;
  left: clamp(15px,3vw,48px);
  display: flex;
  align-items: center;
  gap: 13px;
}
.basement-back {
  min-height: 42px;
  padding: 9px 13px;
  color: #fff;
  border-color: rgba(255,255,255,.18);
  background: rgba(7,6,6,.7);
  backdrop-filter: blur(11px);
}
.basement-plaque {
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  background: rgba(7,6,6,.72);
  backdrop-filter: blur(11px);
}
.basement-plaque .eyebrow { margin: 0 0 3px; color: #f4be72; font-size: .48rem; }
.basement-plaque strong { display: block; color: #fff; font-family: var(--display); font-size: 1rem; font-weight: 400; }
.machine-status {
  position: absolute;
  z-index: 12;
  top: 101px;
  right: clamp(15px,3vw,48px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 99px;
  background: rgba(7,6,6,.72);
  color: #d2d9df;
  font-size: .59rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(11px);
}
.machine-status i { width: 7px; aspect-ratio: 1; border-radius: 50%; background: #68f28c; box-shadow: 0 0 11px #68f28c; }
.basement-look-controls {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 14px;
  display: none;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  width: min(330px,calc(100vw - 24px));
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 99px;
  background: rgba(6,5,5,.84);
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}
.basement-look-controls button { height: 46px; border: 0; background: transparent; cursor: pointer; font-size: 1.2rem; }
.basement-look-controls span { color: #c3c9cf; font-size: .62rem; font-weight: 750; text-align: center; }

@media (min-width: 901px) {
  .basement-world {
    top: calc(50% + 39px);
    width: 100vw;
  }
}

@media (max-width: 900px) {
  .basement-world {
    width: max(100vw,177.68dvh);
    cursor: grab;
  }
  .basement-room-ui { top: 76px; left: 12px; }
  .basement-plaque { display: none; }
  .basement-back { min-height: 38px; padding: 7px 11px; }
  .machine-status { top: 79px; right: 12px; padding: 8px 10px; }
  .basement-look-controls { display: grid; }
  .machine-label { bottom: -1%; min-width: 160px; padding: 8px 9px; opacity: .95; }
}