/* Only the articulated puzzle; common page shell remains unchanged. */
.joint-shell:focus{outline:none}
.reference-card{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:4px 10px 0;padding:8px 12px;border:1px solid #6e624a88;border-radius:16px;background:linear-gradient(135deg,#ffffff08,#ffffff01)}
.reference-shape{width:100%;flex:0 0 auto}.reference-card h2{margin:0;color:#e5ca8b;font:700 11px Arial,sans-serif;letter-spacing:.14em}
.reference-card svg{display:block;width:100%;height:auto;aspect-ratio:400/320}.reference-card p{margin:0;color:#e5d9c1;font-size:clamp(12px,3.1cqw,17px);line-height:1.55}
.joint-stage{position:relative;display:flex;align-items:center;justify-content:center;margin:0;padding:0;background:transparent;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.joint-board{position:relative;width:min(98cqw,760px);max-width:100%;aspect-ratio:800/820;touch-action:none}
#joint-art{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.joint-hit-targets{position:absolute;inset:0;pointer-events:none}
.joint-hit{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;padding:0;touch-action:none;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.joint-hit:disabled{opacity:1}.joint-hit:focus-visible{outline:2px solid #fff1b0;outline-offset:3px}
.joint-hit.is-selected{box-shadow:0 0 0 1px #ffe8ab55}.joint-hit.is-hint{outline:2px dashed #ffe8ab}
.joint-controls{display:flex;align-items:stretch;gap:8px;margin:4px 12px 8px}.joint-actions{display:grid;flex:1;min-width:0;grid-template-columns:minmax(0,1fr) 48px;gap:8px;margin:0}
.joint-actions select{min-width:0;width:100%;height:48px;border:1px solid #947a43;border-radius:12px;background:#0e1522;color:#f0d99d;padding:0 12px;font:700 16px Arial,sans-serif}
.joint-actions button{min-height:48px;margin:0}.joint-reset{border:1px solid #947a43;border-radius:12px;background:#0e1522;color:#e9ce8d;font-size:30px}
.reference-copy{position:relative;flex:1;min-height:44px;min-width:0;align-self:stretch;display:flex;align-items:center}
.joint-feedback{position:absolute;z-index:2;inset:0;box-sizing:border-box;display:flex;align-items:center;padding:10px 12px;border:1px solid #f4d88f;border-radius:14px;background:linear-gradient(145deg,#fff2d2,#e9cc8d);color:#352813;text-align:left;box-shadow:0 4px 14px #0005,inset 0 1px 0 #fff9;pointer-events:none;font-size:clamp(13px,3.2cqw,17px);font-weight:600;line-height:1.4}
.joint-feedback::before{content:"";position:absolute;left:-7px;top:15px;width:12px;height:12px;transform:rotate(45deg);background:#f8e6bd;border-left:1px solid #f4d88f;border-bottom:1px solid #f4d88f}
.joint-feedback-text{position:relative;display:block;max-height:100%;width:100%;overflow:auto;overflow-wrap:anywhere;overscroll-behavior:contain;pointer-events:auto;touch-action:pan-y}
.joint-feedback[hidden]{display:none}.hint-pivot{animation:joint-hint .6s ease-in-out 4}
@keyframes joint-hint{50%{opacity:.4}}
.joint-result{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0}.joint-result>div{padding:12px;border:1px solid #78643e;border-radius:12px;background:#ffffff04}.joint-result dt{font:600 12px Arial,sans-serif;color:#c8b992}.joint-result dd{margin:6px 0 0;font:700 26px Arial,sans-serif;color:#ffe3a4}
#result-dialog>button{display:block;width:100%;margin-top:8px}
@container gf-page (min-width:600px){.reference-card{margin-inline:20px;padding:12px 20px}.reference-card h2{font-size:14px}.reference-card p{font-size:20px}.joint-controls{max-width:650px;margin-inline:auto;width:calc(100% - 40px)}.joint-actions{grid-template-columns:minmax(0,1fr) 56px}.joint-hit{width:52px;height:52px}}
@media (max-height:550px){.joint-board{width:min(76cqw,440px);max-width:100%}}
@media(prefers-reduced-motion:reduce){.hint-pivot{animation:none}}
.reduced-motion .hint-pivot{animation:none}

.joint-actions[hidden],.joint-solved[hidden]{display:none}.joint-solved{display:grid;gap:8px;margin:4px 12px 8px}.joint-solved button{width:100%;margin:0}

/* The target slides over the board without pushing the action menu down. */
.joint-playarea{position:relative}.reference-tools{position:absolute;z-index:4;inset:0 10px 8px;display:block;pointer-events:none}.reference-tools .reference-copy{position:absolute;inset:4px 0 auto auto;width:min(100%,340px);pointer-events:none}
.reference-toggle{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:48px;margin:0;padding:8px 10px;flex:0 0 auto;border:1px solid #b39658;border-radius:12px;background:#172237;color:#f6dca1;font:700 16px Arial,sans-serif;touch-action:manipulation}
.reference-toggle:focus-visible{outline:2px solid #fff1b0;outline-offset:3px}
.reference-chevron{display:inline-block;transition:transform .24s ease}
.reference-toggle[aria-expanded="true"] .reference-chevron{transform:rotate(180deg)}
.reference-drawer{position:absolute;inset:0 0 auto;height:min(340px,100%,max(120px,calc(100svh - 240px)));box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;visibility:hidden;opacity:0;transform:translateY(-16px);pointer-events:none;transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .2s ease,visibility 0s .28s;box-shadow:0 12px 28px #0008;border-radius:16px}
.reference-drawer.is-open{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto;transition-delay:0s}
.reference-drawer .reference-card{margin:0;background:linear-gradient(145deg,#243249,#111a2c);border-color:#b39658}
.reference-tools .joint-feedback{padding:6px 10px;font-size:clamp(12px,3cqw,16px)}
.joint-controls,.joint-solved{margin-bottom:max(12px,env(safe-area-inset-bottom))}
@media(prefers-reduced-motion:reduce){.reference-drawer,.reference-chevron{transition:none}}
.reduced-motion .reference-drawer,.reduced-motion .reference-chevron{transition:none}

.joint-feedback::before{left:24px;top:-7px;border-bottom:0;border-top:1px solid #f4d88f}

/* A fixed frame for every level; only the inner content can scroll. */
.reference-drawer-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 48px;padding:0 8px 0 14px;box-sizing:border-box;background:#243249;border:1px solid #b39658;border-bottom:0;border-radius:16px 16px 0 0}
.reference-drawer-header h2{margin:0;color:#e5ca8b;font:700 13px Arial,sans-serif;letter-spacing:.1em}
.reference-close{width:44px;height:44px;flex:0 0 44px;margin:0;border:0;border-radius:10px;background:transparent;color:#ffe6ad;font:28px Arial,sans-serif;touch-action:manipulation}
.reference-close:focus-visible{outline:2px solid #fff1b0;outline-offset:-3px}
.reference-drawer .reference-card{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box;border-top:0;border-radius:0 0 16px 16px;gap:6px;padding:8px 12px}
.reference-drawer .reference-shape{flex:1;min-height:80px;display:flex;align-items:center;justify-content:center}
.reference-drawer svg{width:100%;height:100%;max-height:100%;aspect-ratio:auto}
.reference-drawer p{flex:0 0 auto;font-size:13px;line-height:1.4}
.joint-controls{position:relative;z-index:5}

.scorebar #level-cycle{min-height:44px;margin:0;border-radius:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.scorebar #level-cycle:focus-visible{outline:2px solid #ffe4a1;outline-offset:-3px}

/* Tablet: save 60px of vertical space; keep the board proportions intact. */
@media (min-width:600px) and (min-height:600px) and (pointer:coarse){
 .joint-board{width:calc(min(98cqw,760px) - 58.54px)}
}