:root{color-scheme:light;--paper:#f4f2e9;--ink:#284b43;--muted:#566353;--line:#cbd2c1;--board:#244b48;--gold:#ffda83;font-family:"Segoe UI",Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{background:var(--paper);color:var(--ink);font-size:14px;touch-action:manipulation}button,select,input{font:inherit;color:inherit}button{cursor:pointer;min-width:44px;min-height:44px;padding:9px 13px;border:1px solid var(--line);border-radius:11px;background:#fafbf5;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:hover:not(:disabled){background:#e6ecda}button:disabled{cursor:default;opacity:.48}button:focus-visible,select:focus-visible{outline:3px solid #a85635;outline-offset:2px}button svg{width:19px;height:19px;vertical-align:middle;flex-shrink:0}button:active:not(:disabled){translate:0 1px}[hidden]{display:none!important}h1,h2,h3,p{margin-top:0}h2{font:25px/1.2 Georgia,serif}p{line-height:1.45}.primary{background:#284b43;color:#fff8df;border-color:#284b43}.primary:hover:not(:disabled){background:#365e50}.wide{width:100%}
.shell{width:100%;max-width:1160px;height:100%;height:100dvh;margin:auto;padding:0 max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:8px}
.site-header{height:60px;flex:0 0 60px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;padding:0;background:transparent;border:0;font-size:22px;font-weight:700;letter-spacing:-.6px}.brand:hover:not(:disabled){background:transparent}.brand-mark{display:grid;place-items:center;width:36px;height:40px;background:#b96543;color:#fff0cd;border-radius:12px 12px 12px 4px;transform:rotate(-5deg)}.brand-mark svg{width:25px;height:25px}.header-actions{display:flex;gap:6px}.icon-button{padding:0;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:transparent;flex-shrink:0}.navigation{display:flex;gap:8px;flex:0 0 44px}.navigation button{background:transparent;flex:1;max-width:220px;font-size:13px}.navigation button.active{background:#e3e9d5;border-color:#788d71}
.game-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.85fr);gap:18px;flex:1;min-height:0}.puzzle-panel{border:1px solid var(--line);border-radius:20px;background:#fcfbf6;padding:16px;display:flex;flex-direction:column;min-height:0;gap:6px;overflow:hidden}.level-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.5px;margin-bottom:5px;text-transform:uppercase}.level-heading h1{font-size:23px;line-height:1.12;margin:0}.house-counter{display:flex;gap:6px;align-items:center;flex-shrink:0;background:#e8ecd8;padding:8px 10px;border-radius:20px;font-size:13px}.house-counter.complete{background:#f9dd91}.house-counter svg{width:19px;height:19px}#level-caption{font-size:12px;color:var(--muted);margin:0;flex-shrink:0}
.board-area{flex:1;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;padding:14px 0 0 14px}.board-frame{width:var(--edge,300px);height:var(--edge,300px);position:relative;flex-shrink:0}.col-labels{position:absolute;top:-14px;left:7px;right:7px;display:grid;grid-template-columns:repeat(var(--size),1fr);height:13px;text-align:center;font-size:11px;color:var(--muted)}.row-labels{position:absolute;left:-15px;top:7px;bottom:7px;display:grid;grid-template-rows:repeat(var(--size),1fr);width:13px;align-items:center;font-size:11px;color:var(--muted)}.board{width:100%;height:100%;display:grid;grid-template-columns:repeat(var(--size),minmax(0,1fr));grid-template-rows:repeat(var(--size),minmax(0,1fr));gap:2px;padding:7px;border-radius:16px;background:#173d3a;border:1px solid #41625b;box-shadow:0 3px 0 #143a35;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.tile{min-width:0;min-height:0;aspect-ratio:1;position:relative;padding:0;border:0;border-radius:6px;background:var(--board);display:block;overflow:visible}.tile.wire{background:#244b48;box-shadow:0 1px 0 #163f3c;transition:background .15s}.tile.wire:hover:not(:disabled){background:#305c55;box-shadow:0 0 0 2px #d5bf87 inset}.tile.source,.tile.home{background:#294c46}.tile.garden{background:#21433f}.tile.wire.fixed{background:repeating-linear-gradient(135deg,#355b52 0,#355b52 5px,#2e534c 5px,#2e534c 10px);box-shadow:inset 0 0 0 2px #8ba290}.tile.wire:focus-visible{z-index:1;outline-color:#ffdb8b;outline-offset:-3px}.tile:disabled{opacity:1}.tile-drawing{display:block;width:100%;height:100%;overflow:visible;transform-origin:center}.conduit-outline{stroke:#133330;stroke-width:17;fill:none;stroke-linecap:butt;stroke-linejoin:round}.conduit{stroke:#a0b5a9;stroke-width:9;fill:none;stroke-linecap:butt;stroke-linejoin:round;transition:stroke .15s}.conduit.live{stroke:#ffda83;filter:drop-shadow(0 0 3px #ffd16e70)}.window-lit{filter:drop-shadow(0 0 5px #ffcf6790)}.tile.suggested{animation:guide 1.8s ease-in-out infinite}
.power-wave .conduit.live{animation:power-flow .2s ease-out both;animation-delay:var(--power-delay,0ms)}.power-wave .window-lit{animation:window-warm .25s ease-out both;animation-delay:var(--power-delay,0ms)}.town-new{animation:town-arrival 1.5s ease-out}
.feedback{flex-shrink:0;min-height:90px;padding-top:4px}.lesson{font-size:12px;line-height:1.35;min-height:32px;margin:0 0 5px;color:#465f50}.puzzle-actions{display:flex;gap:7px}.puzzle-actions button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;padding:9px 8px}.hint-button{background:#f6e8c4;border-color:#d7bd80;color:#775023}.victory{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:82px;border-top:1px solid var(--line);padding-top:8px;animation:appear .2s ease both;animation-delay:var(--win-delay,0ms)}.victory h2{font-size:23px;margin:0 0 5px}.victory p{font-size:12px;margin:0;color:var(--muted)}.victory-actions{display:flex;gap:6px;flex-shrink:0;align-items:center}.puzzle-meta{flex-shrink:0;display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);line-height:1.25}.puzzle-meta span:last-child{text-align:right;max-width:65%}.save-warning{color:#94472d}
.neighborhood{min-height:0;display:flex;flex-direction:column;justify-content:center;gap:12px}.town-card{border:1px solid var(--line);border-radius:20px;background:#e8eddb;overflow:hidden}.town-top{display:flex;justify-content:space-between;align-items:center;padding:14px 17px 9px}.town-top .eyebrow{margin:0}.town-art{line-height:0}.town-art svg{width:100%;height:auto;max-height:32dvh}.town-copy{padding:16px}.town-copy h2{margin-bottom:7px}.town-copy p{font-size:12px;color:var(--muted);margin-bottom:13px}.progress-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}.progress-track{height:6px;border-radius:9px;background:#cbd6bb;overflow:hidden}.progress-track>span{display:block;height:100%;background:#69885b;transition:width .3s}.milestones{display:flex;gap:5px;justify-content:space-between;margin:10px 0 16px}.milestone{font-size:11px;color:#58604e}.milestone.done{font-weight:700;color:#375c3b}.quiet-note{font-size:12px;text-align:center;color:var(--muted);margin:0}
dialog{color:var(--ink);border:1px solid var(--line);border-radius:22px;width:min(660px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:26px;overflow:auto;background:#fcfbf6;overscroll-behavior:contain}dialog::backdrop{background:#193d37aa;backdrop-filter:blur(3px)}.modal-close{position:sticky;float:right;top:0;z-index:2;margin:-12px -12px 0 10px;background:#fcfbf6}#modal-content{padding-top:6px}#modal-content h2{padding-right:30px}#modal-content p{font-size:14px}#modal-content .small{font-size:12px;color:var(--muted)}.modal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.modal-actions button{flex:1}.levels-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:14px 0 25px}.level-choice{font-size:14px;min-height:48px;padding:6px}.level-choice.passed{background:#e2ebd4;border-color:#94aa80}.level-choice.current{box-shadow:inset 0 0 0 2px #ad6f34}.district-card{border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:16px;background:#edf0e2}.district-card>svg{width:100%;max-height:260px}.district-card h3{font-size:17px;margin-bottom:5px}.district-card p{margin-bottom:8px}.decor-actions{display:flex;gap:8px}.decor-actions .selected{background:#f5df9a;border-color:#ae8845}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding:12px 0}.setting-row select{min-height:44px;padding:7px;background:#f8faef;border:1px solid var(--line);border-radius:9px;max-width:170px}.setting-row input[type=checkbox]{width:23px;height:23px}.setting-row label{display:flex;align-items:center;gap:12px;min-height:44px;width:100%}.hint-copy{padding:14px;border-left:3px solid #bd9450;background:#f2ecd7;border-radius:5px}.boot{height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}.boot>span{font-size:55px;color:#ae7649}.boot h1{font-size:22px}.boot p{font-size:14px}#pause-cover{position:fixed;inset:0;display:grid;place-items:center;background:#183b35e6;color:#fff3cb;font-size:24px;z-index:30}#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);max-width:90%;background:#284b43;color:#fff7d8;padding:12px 18px;border-radius:12px;z-index:50;font-size:13px;pointer-events:none}
@keyframes guide{50%{box-shadow:inset 0 0 0 3px #ffdb8b,0 0 14px #ffd7833a}}@keyframes power-flow{from{stroke:#a0b5a9;filter:none}to{stroke:#ffda83;filter:drop-shadow(0 0 4px #ffd16e90)}}@keyframes window-warm{from{fill:#6e827b;filter:none}to{fill:#ffda83;filter:drop-shadow(0 0 6px #ffcf67)}}@keyframes town-arrival{45%{filter:brightness(1.6)}}@keyframes appear{from{opacity:0;translate:0 3px}to{opacity:1;translate:0 0}}
.reduced-motion *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:760px){.shell{padding-left:10px;padding-right:10px;gap:6px}.site-header{height:52px;flex-basis:52px}.brand{font-size:20px;gap:8px}.brand-mark{display:none}.navigation{gap:6px}.navigation button{max-width:none;font-size:12px;padding:8px 6px}.game-layout{display:flex}.neighborhood{display:none}.puzzle-panel{width:100%;padding:12px;border-radius:17px;gap:5px}.level-heading h1{font-size:20px}.level-heading .eyebrow{margin-bottom:4px}.board-area{padding-left:14px}.feedback{min-height:89px}.victory h2{font-size:20px}.victory-actions{flex-direction:column}.victory-actions .icon-button{min-height:44px;width:44px}.victory p{max-width:250px}dialog{padding:20px}.town-copy{padding:12px}}
@media(max-height:650px) and (min-height:481px){.site-header{height:48px;flex-basis:48px}#level-caption{display:none}.puzzle-panel{padding:9px}.level-heading h1{font-size:19px}.feedback{min-height:86px}.lesson{font-size:11px}.puzzle-meta{font-size:11px}}
@media(max-height:480px) and (min-width:560px){.shell{padding-bottom:0;gap:0}.site-header{height:44px;flex-basis:44px;border:0}.navigation{position:absolute;right:125px;top:2px;gap:4px}.navigation button{max-width:115px;font-size:12px}.brand{font-size:18px}.brand-mark{display:none}.game-layout{display:block}.neighborhood{display:none}.puzzle-panel{height:100%;padding:2px 8px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(210px,1fr);grid-template-rows:auto auto 1fr auto;gap:4px 16px}.board-area{grid-column:1;grid-row:1/5;width:100%;height:100%;padding:14px 0 0 14px}.level-heading{grid-column:2;grid-row:1}.level-heading h1{font-size:18px}#level-caption{grid-column:2;grid-row:2;font-size:11px}.feedback{grid-column:2;grid-row:3;align-self:center;min-height:0}.puzzle-meta{grid-column:2;grid-row:4;flex-direction:column;gap:2px}.puzzle-meta span:last-child{text-align:left;max-width:none}.lesson{font-size:11px}.puzzle-actions{gap:4px}.puzzle-actions button{font-size:11px;padding:8px 3px;gap:3px}.puzzle-actions svg{display:none}.victory{min-height:0}.victory h2{font-size:18px}.victory-actions{flex-direction:column}.eyebrow{font-size:11px}.navigation button:nth-child(2){display:none}}