/* The existing cream chair is the quiet doorway. The painted Porch stays intact. */
.connected-root .room-scene-porch{position:relative;container-type:inline-size}
.connected-root .porch-peg-chair{position:absolute;left:27.75%;top:34%;width:20.5%;height:58%;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:28%;background:transparent;box-shadow:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.connected-root .porch-peg-chair:focus-visible{outline:3px solid #315d7a;outline-offset:-3px;background:#effaff24}
.porch-peg-glimmer{position:absolute;right:5%;top:3%;font-size:20px;line-height:1;color:#fffbea;text-shadow:0 1px 3px #315d7a;opacity:0;transition:opacity .18s;pointer-events:none}
.porch-peg-chair:hover .porch-peg-glimmer,.porch-peg-chair:focus-visible .porch-peg-glimmer{opacity:1}
/* The room uses cover at center, or center 58% on phones. These match that crop. */
@supports(width:1cqw){.connected-root .porch-peg-chair{top:calc(50% - 6.25cqw);height:22.1cqw}}
.peg-game{--peg-ink:#315771;position:fixed;inset:0;z-index:10000;box-sizing:border-box;width:100vw;width:100dvw;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));border:0;background:radial-gradient(ellipse at 50% 22%,#fcfeff 0,#e8f2f7 72%);color:var(--peg-ink);overflow:auto;overscroll-behavior:contain;font-family:var(--room-display,ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif)}
.peg-game::backdrop{background:#28465bc2}
.peg-game[open]{display:flex;align-items:center;justify-content:center}
.peg-shell{width:100%;max-width:420px;margin:auto;min-width:0}
.peg-header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.peg-eyebrow{display:block;font-size:9px;line-height:1.4;letter-spacing:.12em;font-weight:800;color:#426a82}
.peg-game h2{margin:5px 0 0;font-size:clamp(25px,6vw,31px);font-weight:850;line-height:1.1;letter-spacing:-.9px}
.peg-intro{font-size:13px;line-height:1.5;margin:12px 0;color:#486b81;max-width:39ch}
.peg-game button{appearance:none;box-sizing:border-box;min-width:44px;min-height:44px;border:1px solid #95b4c5;border-radius:15px;background:#f7fcff;color:var(--peg-ink);font:750 13px/1.3 var(--room-display,ui-rounded,system-ui,sans-serif);padding:11px 16px;box-shadow:inset 0 2px 0 #fff,0 3px 0 #b6cfdc;cursor:pointer;touch-action:manipulation}
.peg-game button:focus-visible{outline:3px solid #23597b;outline-offset:3px}
.peg-game button:disabled{cursor:default}
.peg-game .peg-close{padding:10px 11px;white-space:nowrap;background:#ffffffb3;box-shadow:0 2px 0 #b6cfdc}
.peg-close span{display:inline-block;font-size:20px;vertical-align:-1px;margin-left:5px}
.peg-stage{border:1px solid #b8d0dd;border-radius:26px;background:radial-gradient(ellipse at 50% 66%,#f9f1df 0,#f7fcff 78%);box-shadow:inset 0 3px 0 #fff,0 5px 0 #bfd4df;margin:0 0 15px;padding:8px 0 10px;overflow:hidden}
.peg-board{position:relative;width:100%;max-width:360px;min-width:268px;aspect-ratio:360/326;margin:0 auto;isolation:isolate}
.peg-board-art{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 5px 3px #6d4c2920)}
.peg-game .peg-hole{position:absolute;left:var(--peg-x);top:var(--peg-y);transform:translate(-50%,-50%);width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;display:grid;place-items:center;z-index:1}
.peg-hole::before{content:"";width:26px;height:26px;box-sizing:border-box;border:1px solid #68472e;border-radius:50%;background:#88603e;box-shadow:inset 0 3px 3px #54382077,0 1px 0 #fff1d6b3;position:absolute}
.peg-piece{display:none;position:relative;width:25px;height:27px;margin-top:-6px;border:1px solid #244b67;border-radius:48% 48% 42% 42%;box-sizing:border-box;background:radial-gradient(ellipse at 35% 25%,#acd7ed 0,#6faacb 45%,#497fa4 88%);box-shadow:inset 0 2px 0 #d5eefcaa,0 4px 0 #305c7a,0 7px 4px #52382055;pointer-events:none}
.peg-hole[data-occupied="true"] .peg-piece{display:block}
.peg-game .peg-hole[aria-pressed="true"]{outline:3px solid #23516f;outline-offset:-1px;background:#f5fbff80}
.peg-game .peg-hole:focus-visible{outline:3px solid #153f5c;outline-offset:2px}
.peg-hole[data-destination="true"]::before{background:#e6f6ff;box-shadow:inset 0 0 0 2px #3a759a,0 0 0 3px #f8fcffa6}
.peg-destination{position:relative;color:#245779;font:800 23px/1 system-ui;pointer-events:none}
.peg-count{margin:4px 0 0;text-align:center;font-size:12px;line-height:1.4;font-weight:750;color:#486b81}
.peg-result{text-align:center;border:1px solid #a6c6d8;border-radius:19px;background:#f5fbff;box-shadow:inset 0 2px 0 #fff;padding:14px 12px;margin-top:15px}
.peg-result-count{margin:0 0 5px;font-size:12px;line-height:1.4;color:#486b81}
.peg-result-label{margin:0;font-size:clamp(21px,6vw,28px);line-height:1.2;font-weight:850;letter-spacing:-.7px;overflow-wrap:anywhere}
.peg-result-note{margin:7px auto 0;max-width:36ch;font-size:10px;line-height:1.5;color:#486b81}
.peg-footer{text-align:center;margin-top:14px}
.peg-status{min-height:38px;margin:0 auto 11px;font-size:13px;line-height:1.5;max-width:40ch;font-weight:650}
.peg-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.peg-game [data-peg-control="reset"]{min-width:126px;background:#3c6f90;color:#fff;border-color:#315f7d;box-shadow:inset 0 2px 0 #ffffff22,0 3px 0 #294f68}
.peg-help{margin:13px 0 0;font-size:10px;line-height:1.5;color:#486b81}
.peg-save-status{font-size:12px;line-height:1.5;margin:4px 0 9px;color:#486b81}
.peg-game .peg-retry{margin:0 0 14px;background:#f3fbff}
.peg-game [hidden]{display:none!important}
@media(max-width:600px){@supports(width:1cqw){.connected-root .porch-peg-chair{top:calc(58% - 9.5833cqw)}}}
@media(max-width:360px){.peg-game h2{font-size:25px}.peg-eyebrow{font-size:8px}.peg-status{font-size:12px}.peg-board{max-width:304px}}
@media(max-height:520px) and (min-width:620px){.peg-shell{max-width:760px;display:grid;grid-template-columns:1fr 1.12fr;gap:0 22px;align-items:center}.peg-header,.peg-intro,.peg-result,.peg-footer{grid-column:2}.peg-stage{grid-column:1;grid-row:1/span 4;margin:0}.peg-header{align-self:end}.peg-intro{margin:9px 0}.peg-footer{margin-top:9px}.peg-status{min-height:32px}.peg-help{margin-top:9px}.peg-result{margin-top:0;padding:10px}}
@media(prefers-reduced-motion:reduce){.porch-peg-glimmer{transition:none}}
@media(forced-colors:active){.connected-root .room-scene-porch:has(>.porch-peg-chair){display:block!important;background:Canvas;border:2px solid CanvasText;min-height:112px}.connected-root .porch-peg-chair{left:25%;top:15%;width:50%;height:70%;border:2px solid ButtonText;background:ButtonFace;border-radius:16px;color:ButtonText}.porch-peg-glimmer{display:none}.connected-root .porch-peg-chair::after{content:"Play peg game";font:700 14px system-ui}.connected-root .porch-peg-chair:focus-visible{outline-color:Highlight}.peg-game,.peg-stage,.peg-result{background:Canvas;color:CanvasText}.peg-stage,.peg-result{border:2px solid CanvasText;box-shadow:none}.peg-game :is(h2,h3,p,span){color:CanvasText}.peg-game button,.peg-game [data-peg-control="reset"]{background:ButtonFace;color:ButtonText;border:2px solid ButtonText;box-shadow:none}.peg-game button:focus-visible{outline-color:Highlight}.peg-board-art{opacity:.15}.peg-game .peg-hole{border:1px solid ButtonText;background:Canvas}.peg-hole::before{background:Canvas;box-shadow:none;border:1px solid CanvasText}.peg-hole[data-occupied="true"] .peg-piece{background:ButtonText;border-color:ButtonText;box-shadow:none}.peg-game .peg-hole[aria-pressed="true"]{outline-color:Highlight;background:Canvas}.peg-hole[data-destination="true"]::before{background:Highlight;border-color:Highlight;box-shadow:none}.peg-game .peg-destination{color:HighlightText}}