.peg-stage{position:relative;width:100%;aspect-ratio:1;isolation:isolate;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:radial-gradient(ellipse at 50% 48%,#32434538,transparent 68%)}
.peg-art,.peg-targets,.peg-flight-layer{position:absolute;inset:0;width:100%;height:100%}.peg-art{overflow:visible}.peg-targets{z-index:1}.peg-flight-layer{z-index:3;pointer-events:none}.peg-hole{position:absolute;transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;background:none;min-width:0;min-height:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.peg-ball{display:block;position:absolute;width:83%;height:83%;left:8.5%;top:4%;object-fit:contain;filter:drop-shadow(0 4px 2px #0009);pointer-events:none;-webkit-user-drag:none}.peg-ball{filter:var(--piece-tone,hue-rotate(0deg));transition:filter .2s}.peg-hole.selected{z-index:8}.peg-hole.selected .peg-ball,.peg-hole.hint .peg-ball,.peg-flight img{filter:var(--piece-tone,hue-rotate(0deg)) brightness(1.55) drop-shadow(0 0 4px #fff7d6) drop-shadow(0 0 11px #ffd66ddd);transition:none}.peg-hole.selected:before{content:"";position:absolute;inset:-4%;border:1px solid #fff0b0;border-radius:50%;box-shadow:0 0 12px #ffdc88aa;pointer-events:none}.peg-hole.destination:after,.peg-hole.hint:not(:has(.peg-ball)):after{content:"";position:absolute;z-index:3;inset:10%;border:1px solid #bcdcff;border-radius:50%;box-shadow:0 0 12px #89cfff99,inset 0 0 9px #89cfff33;animation:peg-target-pulse 1.1s ease-in-out infinite;pointer-events:none}.peg-hole.hint:has(.peg-ball):after{content:"";position:absolute;inset:-4%;border:1px solid #fff0b0;border-radius:50%;box-shadow:0 0 12px #ffdc88aa;pointer-events:none}.peg-hole:focus-visible{outline:1.5px solid #fff0b6;outline-offset:1px}.peg-hole[aria-disabled=true]{cursor:default;opacity:1}.peg-hole.ghost .peg-ball{visibility:hidden}.peg-flight{position:absolute;transform:translate(-50%,-50%);aspect-ratio:1}.peg-flight img{width:83%;height:83%;margin:4% 8.5%;filter:var(--piece-tone,hue-rotate(0deg)) brightness(1.55) drop-shadow(0 0 4px #fff7d6) drop-shadow(0 0 11px #ffd66ddd)}
.peg-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:0 8px 10px}.peg-controls button{min-width:0;min-height:48px;padding:10px 6px;font-size:15px}.peg-board-wrap{position:relative}.peg-feedback{position:absolute;z-index:12;top:6px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:11px 15px;border:1px solid #dfc792;border-radius:13px;background:linear-gradient(135deg,#fff2c9,#e7ca8b);box-shadow:0 5px 18px #0005;color:#221b12;text-align:center;font-size:15px;line-height:1.4;pointer-events:none}.peg-feedback:after{content:"";position:absolute;top:100%;left:calc(50% - 7px);border:7px solid transparent;border-top-color:#e7ca8b}.peg-feedback[hidden]{display:none}.peg-controls button:disabled{opacity:.45}.peg-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}.peg-choice{padding:8px 4px;min-height:118px;border:1px solid #8c795840;border-radius:12px;background:#121b24;color:#eee2c6;font:inherit;font-size:14px;cursor:pointer}.peg-choice svg{display:block;width:100%;height:78px}.peg-choice[aria-pressed=true]{border:2px solid #efcc83;background:#9b824522}.peg-choice:focus-visible{outline:1.5px solid #fff0b6;outline-offset:2px}.peg-result{max-height:calc(100svh - 32px);overflow-y:auto}.peg-result .peg-result-board{margin:0 0 8px;color:var(--muted);font-size:14px}.peg-result h2{margin:0 0 10px;line-height:1.2;font-size:clamp(24px,6cqw,30px);overflow-wrap:anywhere}.peg-result .peg-result-copy{margin:0 0 18px;font-size:16px;line-height:1.5}.peg-result-outcome{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px 10px;border-block:1px solid #c4a45f44;color:#f5dfa5}.peg-result-outcome strong{font-size:46px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}.peg-result-outcome span{font-size:17px;text-align:left}.peg-result-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin:20px 0 24px;text-align:left}.peg-result-metrics div{min-width:0}.peg-result-metrics dt{font-size:14px;color:#c9c4b8;line-height:1.4}.peg-result-metrics dd{margin:4px 0 0;color:#fff1cb;font-size:22px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.peg-result-actions{display:grid;grid-template-columns:1fr;gap:10px}.peg-result-actions button,.peg-result .result-close{width:100%;min-height:48px;white-space:normal}.peg-result .result-close{margin-top:16px}.peg-demo-point{position:absolute;z-index:4;pointer-events:none;width:36px;height:36px;border:1px solid #ffebac;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 8px #f4d58d33}.peg-demo-point[hidden]{display:none}.peg-stage,.peg-stage *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.reduced-motion .peg-hole:after{animation:none}
@keyframes peg-target-pulse{50%{opacity:.48;transform:scale(.82)}}
@media(prefers-reduced-motion:reduce){.peg-hole:after{animation:none}.peg-ball{transition:none}}
html[data-resource-hidden] .peg-hole:after,html[data-game-dialog-open] .peg-hole:after{animation-play-state:paused}
@container gf-page (min-width:600px){.peg-controls{gap:12px;padding-inline:16px}.peg-controls button{font-size:19px;min-height:56px}.peg-feedback{font-size:19px}.peg-picker{grid-template-columns:repeat(4,minmax(0,1fr))}}

.peg-solve-controls{display:grid;gap:8px;padding:0 8px 10px}.peg-solve-controls button{width:100%;min-height:48px;font-size:16px}.peg-solve-controls button:disabled{opacity:.4}.peg-solve-controls [hidden]{display:none}

@container gf-page (min-width:600px){.peg-solve-controls{padding-inline:16px}.peg-solve-controls button{font-size:19px;min-height:56px}}

.peg-solve-controls[hidden]{display:none}