/* 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}}
/* The physical scene is decorative. Fifteen native buttons still own every move.
   Artwork and controls share this square coordinate plane at every viewport size. */
.peg-game{--peg-ink:#503d2d;--peg-muted:#73634e;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(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border:0;background:radial-gradient(ellipse at 20% 10%,#e3c59f 0,#ae8057 60%,#755239);color:var(--peg-ink);overflow:auto;overscroll-behavior:contain;font-family:var(--room-display,"Trebuchet MS",system-ui,sans-serif)}
.peg-game::backdrop{background:#302317c9}
.peg-game[open]{display:flex;align-items:center;justify-content:center}
.peg-shell{box-sizing:border-box;width:100%;max-width:550px;min-width:0;margin:auto;padding:22px 0 18px;border:1px solid #fff5e33b;border-radius:32px;background:#c19160 url("peg-table-scene.webp") 50% 0/1600% auto repeat-y;box-shadow:0 22px 70px #3b210e5c,inset 0 1px 1px #fff8df80;overflow:hidden}
.peg-header{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin:0 18px;padding:23px 21px 20px;border:1px solid #fff9eeaa;border-bottom:0;border-radius:26px 26px 0 0;background:linear-gradient(115deg,#fff8edee,#f8e8d2e8);box-shadow:inset 0 2px 1px #fffdf4b0}
.peg-eyebrow{display:block;font-size:10px;line-height:1.4;letter-spacing:.16em;font-weight:750;color:#806448}
.peg-game h2{margin:10px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(32px,7.6vw,46px);font-weight:700;line-height:1.02;letter-spacing:-1.1px;color:#4e3828}
.peg-game h2::after{content:"";display:block;width:68px;height:5px;margin-top:15px;border-radius:50%;background:#d6a16f}
.peg-intro{position:relative;z-index:2;font-size:clamp(13px,3.5vw,16px);font-weight:400;line-height:1.6;margin:0 18px;padding:0 21px 23px;color:#6b5948;max-width:none;border:1px solid #fff9eeaa;border-top:0;border-radius:0 0 26px 26px;background:linear-gradient(115deg,#fff8edee,#f8e8d2e8);box-shadow:0 7px 12px #55331412}
.peg-game button{appearance:none;box-sizing:border-box;min-width:44px;min-height:44px;border:1px solid #b6a17c;border-radius:16px;background:#fff8ec;color:var(--peg-ink);font:650 14px/1.3 var(--room-display,"Trebuchet MS",system-ui,sans-serif);padding:11px 16px;box-shadow:inset 0 2px 0 #fff8ef,0 3px 0 #a78962;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.peg-game button:focus-visible{outline:3px solid #164f76;outline-offset:3px}
.peg-game button:disabled{cursor:default}
.peg-game .peg-close{flex:0 0 auto;min-width:46px;min-height:46px;padding:8px 12px;white-space:nowrap;border:1px solid #fff9efcc;border-radius:50%;background:#fff8eded;box-shadow:inset 0 1px 1px #fff,0 3px 5px #59391816;font-size:0}
.peg-close span{display:inline-block;font-family:Arial,sans-serif;font-size:30px;line-height:1;margin:0;font-weight:400;color:#69523c}
.peg-stage{position:relative;border:0;border-radius:0;background:#c89560;box-shadow:none;margin:-8px 0 0;padding:0;overflow:hidden}
.peg-board{position:relative;left:50%;transform:translateX(-50%);width:100%;max-width:none;min-width:348px;aspect-ratio:1;margin:0;isolation:isolate;background:#c89560 url("peg-table-scene.webp") center/100% 100% no-repeat}
.peg-board-art{display:none}
/* The measured hole centers belong to the photograph, not to the old SVG.
   A minimum 44px target remains separate from the visible ball size. */
.peg-game .peg-hole{position:absolute;left:var(--peg-x);top:var(--peg-y);transform:translate(-50%,-50%);width:12.5%;height:auto;aspect-ratio:1;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-game [data-peg-hole="0"]{left:50%;top:31.8%}
.peg-game [data-peg-hole="1"]{left:42.8%;top:42.3%}
.peg-game [data-peg-hole="2"]{left:57.1%;top:42.3%}
.peg-game [data-peg-hole="3"]{left:35.6%;top:53.2%}
.peg-game [data-peg-hole="4"]{left:49.9%;top:53.2%}
.peg-game [data-peg-hole="5"]{left:64.3%;top:53.2%}
.peg-game [data-peg-hole="6"]{left:28%;top:64.7%}
.peg-game [data-peg-hole="7"]{left:42.6%;top:64.7%}
.peg-game [data-peg-hole="8"]{left:57.1%;top:64.7%}
.peg-game [data-peg-hole="9"]{left:71.8%;top:64.7%}
.peg-game [data-peg-hole="10"]{left:20.1%;top:77%}
.peg-game [data-peg-hole="11"]{left:35.1%;top:77%}
.peg-game [data-peg-hole="12"]{left:49.9%;top:77%}
.peg-game [data-peg-hole="13"]{left:64.9%;top:77%}
.peg-game [data-peg-hole="14"]{left:79.7%;top:77%}
.peg-hole::before{content:"";position:absolute;inset:12%;border:0;border-radius:50%;background:transparent;box-shadow:none;pointer-events:none}
.peg-piece{display:none;position:absolute;inset:-1%;margin-top:-14%;border:0;border-radius:0;box-sizing:border-box;background:url("peg-blue-piece.webp") center/contain no-repeat;filter:drop-shadow(2px 4px 2px #32180075);pointer-events:none;transition:transform .16s ease,filter .16s ease}
.peg-hole[data-occupied="true"] .peg-piece{display:block}
.peg-game .peg-hole[aria-pressed="true"]{outline:3px solid #fff8cc;outline-offset:-5px;background:#fdf3c72b;z-index:2}
.peg-hole[aria-pressed="true"] .peg-piece{transform:translateY(-6%);filter:drop-shadow(0 0 3px #fff3bc) drop-shadow(2px 6px 3px #32180080)}
.peg-game .peg-hole:focus-visible{outline:3px solid #fffbed;outline-offset:-2px;box-shadow:0 0 0 2px #164f76}
.peg-hole[data-destination="true"]::before{background:#e4e8b5d9;box-shadow:inset 0 0 0 2px #526039,0 0 0 3px #fff8d4b3,0 0 14px #f8f1bdb3}
.peg-destination{position:relative;color:#35401e;font:700 clamp(23px,6vw,34px)/1 system-ui;pointer-events:none;text-shadow:0 1px 0 #fff9df}
.peg-count{position:absolute;left:4%;top:5%;margin:0;padding:7px 12px;border:1px solid #fff9ed7a;border-radius:999px;background:#fff8e9ed;text-align:center;font-size:12px;line-height:1.4;font-weight:650;color:#66513d;box-shadow:0 3px 8px #55331424}
.peg-result{text-align:center;border:1px solid #fff7e3;border-radius:22px;background:#fff6e8f2;box-shadow:inset 0 2px 0 #fffdf5,0 3px 9px #633d1c24;padding:17px 15px;margin:0 18px 16px}
.peg-result-count{margin:0 0 5px;font-size:13px;line-height:1.4;color:var(--peg-muted)}
.peg-result-label{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(24px,6vw,34px);line-height:1.2;font-weight:700;letter-spacing:-.5px;overflow-wrap:anywhere}
.peg-result-note{margin:8px auto 0;max-width:36ch;font-size:11px;line-height:1.5;color:var(--peg-muted)}
.peg-footer{text-align:center;margin:0 18px}
.peg-status{box-sizing:border-box;position:relative;min-height:70px;margin:0 auto 20px;padding:16px 18px 16px 66px;border:1px solid #fff9efc9;border-radius:22px;background:#fff6e8ef;box-shadow:inset 0 2px 0 #fffdfa80,0 4px 10px #74471f17;text-align:left;font-size:clamp(13px,3.4vw,16px);line-height:1.5;max-width:none;font-weight:400;color:#65523e}
.peg-status::before{content:"";position:absolute;left:17px;top:calc(50% - 17px);width:34px;height:34px;border-radius:50%;background:#85886824 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%236b704a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 13v-2a6 6 0 0 1 12 0v2M12 20V11a2 2 0 0 1 4 0v7l2-1 2 1 2-1 2 2-1 6-4 4h-6L7 21a2 2 0 0 1 3-2l2 1Z'/%3E%3C/g%3E%3C/svg%3E") center/26px no-repeat;box-shadow:0 2px 5px #654b2520}
.peg-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.peg-game [data-peg-control="reset"]{position:relative;min-width:228px;min-height:56px;padding:13px 27px 13px 57px;border:1px solid #4d5531;border-radius:999px;background:linear-gradient(150deg,#657144,#48542f);color:#fffaf0;font-size:17px;font-weight:600;box-shadow:inset 0 3px 1px #dce7b13b,inset 0 -3px 1px #37402366,0 3px 0 #423f26,0 6px 12px #68411f26}
.peg-game [data-peg-control="reset"]::before{content:"";position:absolute;left:29px;top:calc(50% - 12px);width:24px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7a9 9 0 1 0 .6 9M20 2v6h-6' fill='none' stroke='%23fffaf0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.peg-game [data-peg-control="reset"]:active{transform:translateY(1px);box-shadow:inset 0 1px 3px #27321b66,0 2px 0 #423f26}
.peg-help{margin:15px 0 0;padding:7px 9px;border-radius:12px;background:#fff6e8ed;font-size:10px;line-height:1.5;color:#594531;text-shadow:none}
.peg-save-status{font-size:13px;line-height:1.5;margin:4px 0 12px;padding:9px 12px;border-radius:12px;color:#53412f;background:#fff4e2ed}
.peg-game .peg-retry{margin:0 0 15px;background:#fff7e8;border-color:#8b744d}
.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:380px){.peg-game{padding-right:8px;padding-left:8px}.peg-shell{padding-top:14px;border-radius:25px}.peg-header{margin:0 12px;padding:18px 16px 15px}.peg-eyebrow{font-size:8px;letter-spacing:.13em}.peg-game h2{font-size:31px}.peg-intro{margin:0 12px;padding:0 16px 19px;font-size:13px}.peg-footer{margin:0 12px}.peg-status{padding:13px 13px 13px 55px;font-size:13px}.peg-status::before{left:12px}.peg-count{font-size:10px;padding:6px 9px}.peg-result{margin:0 12px 14px}.peg-game [data-peg-control="reset"]{min-height:52px;min-width:208px;font-size:16px}}
/* Short screens scroll naturally; the board never shrinks into untappable cells. */
@media(max-height:520px){.peg-game[open]{align-items:flex-start}.peg-shell{margin:0 auto}}
@media(prefers-reduced-motion:reduce){.porch-peg-glimmer,.peg-piece{transition:none}.peg-game [data-peg-control="reset"]:active{transform: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-shell,.peg-board,.peg-header,.peg-intro,.peg-stage,.peg-result,.peg-status,.peg-count,.peg-save-status{background:Canvas;color:CanvasText;box-shadow:none}.peg-shell,.peg-result,.peg-status{border:2px solid CanvasText}.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-header h2::after,.peg-status::before,.peg-game [data-peg-control="reset"]::before{display:none}.peg-status{padding-left:18px}.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{inset:18%;margin:0;border-radius:50%;background:ButtonText;border:2px solid ButtonText;filter:none;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}}