:root{color:#1f2937;background:#dbeafe;font-family:Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}.homebuilder-shell{--game-shell-max-width: 1180px;--game-shell-gap: 6px;--game-shell-pad-inline: clamp(6px, 1.4vw, 12px);--game-shell-pad-top: max(4px, calc(env(safe-area-inset-top, 0px) + 2px) );--game-shell-pad-bottom: max(4px, calc(env(safe-area-inset-bottom, 0px) + 4px) );background:radial-gradient(circle at top left,rgba(251,191,36,.36),transparent 36%),linear-gradient(180deg,#dbeafe,#ecfeff 46%,#dcfce7)}.hb-pill,.hb-small-button,.hb-primary,.hb-hint-button,.hb-mode-button,.hb-toggle-button,.hb-tool-button{border:0;border-radius:999px;font-weight:800}.hb-secondary,.hb-continue{border:0;border-radius:999px;background:#0f172a;color:#fff;font-weight:850;cursor:pointer}.hb-secondary{min-height:40px;padding:8px 14px}.hb-continue{justify-self:center;min-height:38px;padding:8px 18px}.hb-continue[hidden]{display:inline-block;visibility:hidden;pointer-events:none}.hb-pill{background:#ffffffd6;color:#0f172a;box-shadow:0 8px 18px #0f172a1f}.hb-small-button{min-height:34px;padding:8px 14px;background:#0f172a;color:#fff;cursor:pointer}.hb-primary{min-height:46px;padding:10px 18px;background:linear-gradient(135deg,#f97316,#eab308);color:#fff;box-shadow:0 12px 24px #f9731638;cursor:pointer}.hb-hint-button{min-height:46px;padding:10px 16px;background:#dbeafe;color:#1d4ed8;cursor:pointer}.hb-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hb-mode-switch[hidden]{display:none}.hb-mode-button,.hb-toggle-button,.hb-tool-button{min-height:36px;padding:8px 10px;background:#e0f2fe;color:#075985;cursor:pointer}.hb-mode-button.selected,.hb-toggle-button.selected{background:#0f172a;color:#fff}.hb-mode-button:disabled{opacity:.55;cursor:not-allowed}.hb-primary:disabled,.hb-hint-button:disabled,.hb-answer-input:disabled{opacity:.62;cursor:wait}.hb-layout{min-height:0;height:100%;display:grid;grid-template-columns:minmax(260px,.72fr) minmax(420px,1.28fr);gap:clamp(8px,1.4vw,14px)}.hb-blueprint-card,.hb-house-card{min-height:0;border:1px solid rgba(37,99,235,.18);border-radius:20px;background:#ffffffd6;box-shadow:0 18px 38px #0f172a29}.hb-blueprint-card{display:grid;align-content:start;gap:clamp(8px,1.4vh,12px);overflow-y:auto;overscroll-behavior:contain;padding:clamp(10px,1.6vw,16px);scrollbar-gutter:stable}.hb-card-label,.hb-answer-label{font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#2563eb}.hb-blueprint-card h2{margin:0;font-size:clamp(1.25rem,3vw,1.9rem);line-height:1}.hb-blueprint-card p{margin:0;color:#475569;font-size:clamp(.95rem,1.9vw,1.08rem);line-height:1.36}.hb-blueprint-card .game-scratch-pad-toggle{margin:12px 0 2px}.hb-missing-diagram{min-height:190px;display:grid;place-items:center;padding:14px 12px 20px;border:2px solid rgba(37,99,235,.14);border-radius:16px;background:#e0f2fe}.hb-missing-diagram[hidden]{display:none}.hb-missing-diagram svg{width:min(100%,420px);height:190px;overflow:visible}.hb-missing-shape{fill:#7c3aedc2;stroke:#4c1d95;stroke-width:.12;stroke-linejoin:round}.hb-missing-label{fill:#0f172a;font-size:.68px;font-weight:900;paint-order:stroke;stroke:#e0f2fe;stroke-width:.18px;stroke-linejoin:round}.hb-answer-row{display:grid;grid-template-columns:minmax(88px,1fr) minmax(72px,auto) auto auto;gap:10px;align-items:end}.hb-answer-row[hidden]{display:none}.hb-secondary-answer-row{display:grid;grid-template-columns:minmax(88px,1fr) minmax(72px,auto);gap:10px;align-items:end}.hb-secondary-answer-row[hidden]{display:none}.hb-secondary-answer-row .hb-answer-label{grid-column:1 / -1}.hb-answer-row.architect-answer{grid-template-columns:minmax(96px,1fr) minmax(70px,auto)}.hb-answer-row.architect-answer .hb-primary,.hb-answer-row.architect-answer .hb-hint-button{width:100%}.hb-architect-panel{display:grid;gap:8px;padding:10px;border:2px solid rgba(37,99,235,.16);border-radius:14px;background:#eff6ff}.hb-architect-panel[hidden]{display:none}.hb-dimension-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}.hb-dimension-row label{color:#475569;font-weight:850}.hb-measure-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hb-item-picker{display:grid;gap:10px}.hb-item-picker[hidden]{display:none}.hb-neighborhood-panel{display:grid;gap:10px}.hb-neighborhood-panel[hidden]{display:none}.hb-neighborhood-actions{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:10px}.hb-mini-part{position:absolute;background:var(--part-color)}.hb-mini-part.snapshot{right:auto;bottom:auto;transform:rotate(var(--part-rotation, 0deg));transform-origin:center}.hb-mini-wall{left:26%;bottom:22%;width:48%;height:42%}.hb-mini-roof{left:20%;bottom:64%;width:60%;height:13%;background:linear-gradient(90deg,rgba(255,255,255,.24) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),var(--part-color);background-size:14px 10px}.hb-mini-window{left:34%;bottom:44%;width:14%;height:14%}.hb-mini-window-trim{left:33%;bottom:43%;width:16%;height:16%;border:3px solid var(--part-color);background:transparent}.hb-mini-door{right:34%;bottom:22%;width:14%;height:28%}.hb-mini-door-trim{right:33%;bottom:22%;width:16%;height:30%;border:3px solid var(--part-color);background:transparent}.hb-mini-sidewalk{left:45%;bottom:0;width:10%;height:24%}.hb-mini-garden,.hb-mini-garden-fence,.hb-mini-pool,.hb-mini-pool-fence,.hb-mini-trampoline{right:6%;bottom:6%;width:22%;height:14%}.hb-mini-garden-fence,.hb-mini-pool-fence{border:3px dashed var(--part-color);background:transparent}.hb-mini-garage{left:6%;bottom:22%;width:20%;height:24%}.hb-mini-garage-door{left:10%;bottom:22%;width:12%;height:15%}.hb-item-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}.hb-item-choice{min-height:58px;display:grid;gap:3px;padding:8px 10px;border:2px solid rgba(37,99,235,.22);border-radius:14px;background:#eff6ff;color:#0f172a;text-align:left;cursor:pointer}.hb-answer-label{grid-column:1 / -1}.hb-answer-input{min-width:0;width:100%;min-height:42px;padding:8px 14px;border:2px solid #93c5fd;border-radius:16px;background:#fff;font-size:1.28rem;font-weight:900;text-align:center;color:#0f172a}.hb-answer-input:focus{outline:4px solid rgba(37,99,235,.18);border-color:#2563eb}.hb-answer-input[aria-invalid=true],.hb-answer-input[aria-invalid=true]:focus{border-color:#dc2626;background:#fef2f2;outline-color:#dc262633}.hb-answer-unit{align-self:center;min-width:0;max-width:8.5ch;color:#475569;font-weight:800;line-height:1.05;overflow-wrap:anywhere}.hb-feedback{min-height:2.6em;padding:10px 12px;border-radius:14px;background:#fffbeb;color:#713f12;font-weight:750;line-height:1.35}.hb-hint{display:grid;gap:8px}.hb-hint-array{--hint-columns: 4;display:grid;grid-template-columns:repeat(var(--hint-columns),minmax(12px,1fr));gap:2px;max-width:min(260px,100%)}.hb-hint-array span{aspect-ratio:1;background:#fbbf247a;border:1px solid rgba(180,83,9,.28)}.hb-hint-array.perimeter span{background:#fbbf242e;border-color:#b4530929}.hb-hint-array.perimeter span.edge{background:#f59e0b;border-color:#92400e}.hb-hint-equation{font-weight:900;color:#92400e}.hb-piece-info{display:grid;gap:8px}.hb-piece-info ul{margin:0;padding-left:18px}.hb-piece-info li+li{margin-top:4px}.hb-house-card{position:relative;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) auto;background:linear-gradient(180deg,#bfdbfe,#dbeafe 48%,#bbf7d0 48%,#86efac)}.hb-sky{position:absolute;top:18px;right:28px;width:clamp(48px,8vw,66px);aspect-ratio:1;border-radius:50%;background:#fde68a;box-shadow:0 0 48px #facc158f}.hb-house-scene{position:relative;min-height:0;overflow:hidden;display:grid;place-items:center;padding:10px 12px 0;touch-action:none}.hb-neighborhood-scene{position:fixed;inset:clamp(76px,10vh,112px) clamp(18px,4vw,58px) clamp(18px,4vh,44px);z-index:30;overflow:hidden;border:4px solid rgba(15,23,42,.16);border-radius:28px;background:linear-gradient(180deg,#58d6d7 0% 55%,#82bd51 55% 100%);box-shadow:0 28px 80px #0f172a4d}.hb-house-scene[hidden],.hb-neighborhood-scene[hidden]{display:none}.hb-neighborhood-street{height:100%;display:flex;align-items:center;gap:clamp(48px,7vw,92px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:9% 11% 18%;scrollbar-width:none}.hb-neighborhood-street::-webkit-scrollbar{display:none}.hb-street-house{position:relative;flex:0 0 clamp(230px,33vw,390px);height:clamp(170px,34vh,280px);scroll-snap-align:center}.hb-street-house .hb-mini-part{z-index:1}.hb-neighborhood-empty-street{margin:auto;padding:18px 22px;border-radius:20px;background:#ffffffdb;color:#0f172a;font-size:clamp(1.1rem,2vw,1.45rem);font-weight:900}.hb-neighborhood-arrow{position:absolute;top:45%;z-index:3;min-width:72px;min-height:46px;padding:0 10px;border-radius:0;background:#4f6dfd;color:#fff;font-size:2rem;line-height:1}.hb-neighborhood-arrow:before{content:"";position:absolute;top:50%;border-top:32px solid transparent;border-bottom:32px solid transparent;transform:translateY(-50%)}.hb-neighborhood-arrow.prev{left:16px}.hb-neighborhood-arrow.prev:before{left:-24px;border-right:32px solid #4f6dfd}.hb-neighborhood-arrow.next{right:16px}.hb-neighborhood-arrow.next:before{right:-24px;border-left:32px solid #4f6dfd}.hb-neighborhood-arrow[hidden]{display:none}.hb-neighborhood-create{position:absolute;right:28px;bottom:24px;z-index:3;min-height:58px;padding:0 28px;border-radius:18px;background:#020617;color:#fff;font-size:clamp(1rem,2.2vw,1.45rem);font-weight:950;text-transform:uppercase;box-shadow:0 14px 22px #0f172a2e}.hb-house-scene.architect-mode{padding:0;background:linear-gradient(rgba(37,99,235,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.1) 1px,transparent 1px);background-size:10% 10%}.hb-house-scene.missing-mode{background:linear-gradient(180deg,#dbeafe,#eff6ff 56%,#bbf7d0 56%,#86efac)}.hb-house-scene.missing-mode .hb-architect-grid{opacity:0}.hb-architect-grid{position:absolute;inset:8%;z-index:0;border:1px solid rgba(37,99,235,.22);pointer-events:none;opacity:0}.hb-house-scene.architect-mode .hb-architect-grid{opacity:1}.hb-piece-tools{position:absolute;top:10px;left:10px;z-index:7;display:flex;gap:8px}.hb-piece-tools[hidden]{display:none}.hb-tool-button{width:40px;min-height:40px;padding:0;background:#ffffffe6;color:#0f172a;box-shadow:0 8px 18px #0f172a24}#dynamicSceneParts{position:absolute;inset:0;z-index:4;pointer-events:none}#dynamicSceneParts .hb-part.built{pointer-events:auto}.hb-house{position:relative;width:min(68%,var(--house-width, 330px));height:var(--house-height, auto);aspect-ratio:var(--house-ratio, 1.28);border-radius:0;filter:drop-shadow(18px 18px 18px rgba(15,23,42,.2))}.hb-house-scene.architect-mode .hb-house{width:var(--house-width, 330px);z-index:2;transform:none;filter:none}.hb-roof{position:absolute;z-index:3;top:10%;width:min(var(--part-width, 76%),390px);height:var(--part-height, 18%);background:linear-gradient(90deg,rgba(255,255,255,.24) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),#b45309;background-size:34px 20px;opacity:0}.hb-house-scene.architect-mode .hb-roof{left:50%;width:var(--part-width, 76%);--part-base-transform: translateX(-50%)}.hb-part{--part-color: #e5e7eb;--part-base-transform: translate(0, 0);--part-offset-x: 0px;--part-offset-y: 0px;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease,background .18s ease,border-color .18s ease}.hb-part.built{opacity:1;pointer-events:auto;cursor:pointer;transform:var(--part-base-transform) translate(var(--part-offset-x),var(--part-offset-y)) rotate(var(--part-rotation, 0deg))}.hb-part.built.movable{cursor:grab}.hb-part.selected:not(.hb-wall){z-index:6}.hb-part.selected{outline:4px solid rgba(37,99,235,.5);outline-offset:4px}.hb-part.built.moving{cursor:grabbing;transition:opacity .18s ease,background .18s ease,border-color .18s ease}.hb-composite-part{background:transparent!important}.hb-composite-part>svg{display:block;width:100%;height:100%;overflow:visible}.hb-composite-part>svg path{fill:var(--part-color);stroke:var(--part-secondary-color, rgba(15, 23, 42, .86));stroke-width:.08;stroke-linejoin:round}.hb-door.hb-composite-part>svg path,.hb-sidewalk.hb-composite-part>svg path{stroke-width:.16}.hb-mini-part.has-secondary-color{outline:3px solid var(--part-secondary-color);outline-offset:-3px}.hb-roof.built{background:linear-gradient(90deg,rgba(255,255,255,.24) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),var(--part-color);background-size:34px 20px}.hb-wall{position:absolute;inset:0;z-index:1;border-radius:0;background:#e5e7eb}.hb-wall.built{background:var(--part-color)}.hb-window,.hb-window-trim,.hb-door,.hb-door-trim,.hb-garage,.hb-garage-door{position:absolute;z-index:3}.hb-window{top:28%;left:18%;width:var(--part-width, 25%);height:var(--part-height, 26%);border-radius:0;background:#93c5fd}.hb-window.built{background:var(--part-color)}.hb-window-trim{top:27%;left:17%;width:var(--part-width, 27%);height:var(--part-height, 28%);border:7px solid var(--part-color);border-radius:0;background:transparent}.hb-door{right:18%;bottom:0;width:var(--part-width, 22%);height:var(--part-height, 48%);border-radius:0;background:#92400e}.hb-door.built{background:var(--part-color)}.hb-door-trim{right:16%;bottom:0;width:var(--part-width, 26%);height:var(--part-height, 51%);border:7px solid var(--part-color);border-radius:0;background:transparent}.hb-garage{left:2%;bottom:0;width:var(--part-width, 28%);height:var(--part-height, 36%);border-radius:0;background:#d1d5db}.hb-garage.built{background:var(--part-color)}.hb-garage-door{left:7%;bottom:0;width:var(--part-width, 18%);height:var(--part-height, 24%);border-radius:0;background:#e5e7eb}.hb-garage-door.built{background:var(--part-color)}.hb-sidewalk{position:absolute;z-index:1;bottom:6%;width:min(var(--part-width, 18%),90px);height:var(--part-height, 32%);border-radius:0;--part-base-transform: translateY(18%);background:linear-gradient(90deg,rgba(255,255,255,.24) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),#e5e7eb;background-size:26px 22px}.hb-house-scene.architect-mode .hb-sidewalk{width:var(--part-width, 18%)}.hb-sidewalk.built{background:linear-gradient(90deg,rgba(255,255,255,.24) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),var(--part-color);background-size:26px 22px}.hb-garden{position:absolute;right:8%;bottom:8%;width:var(--part-width, 28%);height:var(--part-height, 18%);border-radius:0;background:#bbf7d0}.hb-garden.built{background:var(--part-color)}.hb-garden-fence{position:absolute;right:6%;bottom:6%;width:var(--part-width, 30%);height:var(--part-height, 22%);border:7px dashed var(--part-color);border-radius:0;background:transparent}.hb-pool,.hb-pool-fence,.hb-trampoline{position:absolute;z-index:1;border-radius:0}.hb-pool{left:7%;bottom:9%;width:var(--part-width, 30%);height:var(--part-height, 18%);background:#38bdf8}.hb-pool.built{background:var(--part-color)}.hb-pool-fence{left:5%;bottom:7%;width:var(--part-width, 34%);height:var(--part-height, 22%);border:7px dashed var(--part-color);background:transparent}.hb-trampoline{left:10%;bottom:32%;width:var(--part-width, 28%);height:var(--part-height, 9%);background:#111827}.hb-trampoline.built{background:var(--part-color)}.hb-trampoline:before,.hb-trampoline:after{content:"";position:absolute;bottom:-58%;width:16%;height:58%;background:#0f172a}.hb-trampoline:before{left:12%;box-shadow:340% 0 0 #0f172a}.hb-trampoline:after{right:12%;box-shadow:-340% 0 0 #0f172a}.hb-color-panel{position:relative;z-index:5;display:grid;gap:10px;padding:10px 12px 12px;background:#ffffffb8;border-top:1px solid rgba(37,99,235,.14)}.hb-color-panel[hidden]{display:none}.hb-color-choices{display:flex;flex-wrap:wrap;gap:10px}.hb-color-choice{width:clamp(32px,5vw,38px);aspect-ratio:1;border:3px solid rgba(15,23,42,.16);border-radius:14px;background:var(--choice-color);cursor:pointer;box-shadow:0 8px 14px #0f172a1f}.hb-color-choice.selected{border-color:#0f172a;transform:translateY(-2px)}@media(max-width:620px){.hb-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.hb-blueprint-card{gap:10px;padding:14px}.hb-house-card{min-height:280px}.hb-answer-row{grid-template-columns:minmax(96px,1fr) minmax(64px,auto) auto auto}.hb-primary{grid-column:auto}}
