.pg-layout{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:16px;align-items:stretch}
.pg-play{position:relative;min-width:0;overflow:hidden;border:1px solid #365b56;border-radius:24px;background:radial-gradient(ellipse at 45% 42%,#28544b,#102b28 68%,#102321);box-shadow:inset 0 1px 0 #a7c8b416}
.pg-heading,.pg-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;color:#a5c6b6;font-size:11px;flex-shrink:0}
.pg-heading .eyebrow{font-size:9px;letter-spacing:2px;color:#9cc1ac}.pg-level-tag{font-size:10px;letter-spacing:1.5px}.pg-foot{border-top:1px solid #aadfc013;background:#0c211e70}.pg-goal{color:#dcc291;white-space:nowrap}
.pg-stage{height:clamp(360px,64vh,750px);display:flex;align-items:center;justify-content:center;position:relative;touch-action:none;user-select:none;overflow:hidden}
.pg-board{aspect-ratio:1;position:relative;flex:none;border-radius:50%;background:linear-gradient(130deg,#cc9b5550,#1c0a04a0),url('./assets/textures/canica-oak.webp') center/cover;background-color:#643e23;border:6px solid #83522d;box-shadow:inset 0 0 0 2px #e5ba72,inset 0 0 0 9px #35231680,inset 10px 10px 30px #edc27a4a,0 12px 0 #412918,0 16px 0 #251a12,0 25px 36px #0009;transform:perspective(1400px) rotateX(12deg)}
.pg-board::before{content:'';position:absolute;inset:10px;border:1px solid #d7b17c66;border-radius:50%;pointer-events:none}.pg-board::after{content:'L U D O R I A';position:absolute;bottom:5.5%;left:0;right:0;text-align:center;font-size:clamp(7px,1vw,11px);letter-spacing:3px;color:#f3ca8175;pointer-events:none}
.pg-hole{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;background:none;border-radius:50%;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
.pg-hole::before{content:'';position:absolute;inset:12%;border-radius:50%;background:radial-gradient(ellipse at 55% 65%,#593c2590,#28180fec 75%);box-shadow:inset 2px 4px 5px #160b05d9,0 1px 1px #f3cc8aa3;border:1px solid #56351e}
.pg-marble{position:absolute;inset:11%;border-radius:50%;opacity:0;background:radial-gradient(ellipse at 29% 23%,#fff 0 3%,#e8fffdc9 4% 8%,transparent 17%),radial-gradient(ellipse at 70% 79%,hsl(var(--hue) 90% 76% / .95),transparent 29%),radial-gradient(ellipse at 44% 46%,hsl(var(--hue) 69% 26% / .9) 10%,hsl(var(--hue) 86% 10%) 55%,hsl(var(--hue) 75% 40%) 79%,hsl(var(--hue) 80% 88%) 91%,#081f22 97%);box-shadow:inset -3px -4px 5px #0008,inset 2px 2px 4px #ffffff8a,2px 6px 5px #100e0abf;pointer-events:none}
.pg-filled .pg-marble{opacity:1;transform:translateY(-5%)}.pg-marble::after{content:'';position:absolute;inset:13% 17% 22%;border-radius:50%;border-bottom:2px solid #c4fff85c;transform:rotate(-25deg)}
.pg-hole.pg-selected{outline:2px solid #fff0bb;outline-offset:1px}.pg-hole.pg-selected .pg-marble{transform:translateY(-13%);filter:brightness(1.22)}.pg-hole.pg-target::before{border:2px solid #c1f3dc;box-shadow:0 0 0 4px #9effd724,inset 0 2px 6px #0009}.pg-hole.pg-target::after{content:'+';position:absolute;inset:0;display:grid;place-items:center;color:#c0efd1;font-size:22px}.pg-hole.pg-hint{outline:3px dashed #f7cd76;outline-offset:0}.pg-hole.pg-hover::before{background:#a0d7be88}.pg-hole.pg-dragging .pg-marble{filter:brightness(1.35)}.pg-hole:focus-visible{outline:3px solid #effff7;outline-offset:3px}.pg-hole[aria-disabled=true]{cursor:default}.pg-flying{inset:auto;opacity:1;z-index:5}
.pg-console{padding:25px 22px!important;display:flex;flex-direction:column;gap:16px;background:#132421!important;border-color:#36554d!important}.pg-console h2{font-size:25px;line-height:1.25;letter-spacing:-.8px;margin:0;color:#edf2df}.pg-console .eyebrow{font-size:9px;color:#a2c9b4;letter-spacing:1.7px}.pg-console p{margin:0;color:#acc5b8;font-size:12px;line-height:1.65}.pg-console .pg-tip{color:#e4d4ae}.pg-example{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px;border-top:1px solid #ffffff10;border-bottom:1px solid #ffffff10}.pg-example i{width:23px;height:23px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#e6fff7,#299b8d 25%,#063e36 65%,#55b6a3);box-shadow:0 3px 5px #0006}.pg-example i:last-child{background:#0c1d19;border:1px dashed #b8d7b8}.pg-example span{color:#d5be89;font-size:20px}
.pg-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pg-actions .button{padding:11px 8px;font-size:12px}.pg-hint-button{grid-column:1/-1;border-color:#b7a16a!important;color:#ecdaaa!important;background:#b79f6620!important}.pg-actions .quiet-button{grid-column:1/-1;justify-self:center;min-height:40px}.pg-message{min-height:54px}.pg-hint-panel{padding:13px;border:1px solid #a89158;border-radius:12px;background:#c5a76012}.pg-hint-panel p{margin-bottom:12px}.pg-progress{margin-top:auto;padding-top:12px;border-top:1px solid #ffffff15;color:#bfcebc;font-size:11px}.pg-progress progress{width:100%;height:5px;display:block;margin-top:12px;accent-color:#bfcf96}.pg-note{font-size:11px!important;opacity:.65}.pg-win{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,85%);padding:26px;text-align:center;background:#132d26f5;border:1px solid #dcc18a;border-radius:22px;box-shadow:0 20px 60px #0008}.pg-win h2{font-size:25px;margin:12px 0}.pg-win p{margin:12px 0 20px;color:#c4d4bf}.pg-win .primary{background:#dfc38e;color:#18241f}.pg-win[hidden],.pg-hint-panel[hidden]{display:none}
.pg-levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pg-levels .button{justify-content:flex-start;white-space:normal;text-align:left}.pg-levels [aria-pressed=true]{border-color:#d7bf86}.pg-completed::after{content:'✓';margin-left:auto;color:#96d7b2}.pg-options label{display:flex;align-items:center;gap:12px;margin:16px 0}.pg-options h3{margin-top:24px}.pg-options p,.pg-gallery p{color:#a9bfb5;line-height:1.7}.pg-options input[type=range]{min-width:0;flex:1;accent-color:#dcc18a}.pg-options output{min-width:40px}.pg-help{max-width:570px}.pg-help ol{padding-left:24px;line-height:1.7}.pg-help li{margin-bottom:12px}.pg-help p{color:#b2c5bc;line-height:1.6}.pg-tutorial{padding:16px;border:1px solid #487969;border-radius:16px;background:#17372f;margin:18px 0}.pg-demo-board{display:flex;justify-content:center;gap:20px}.pg-demo-board button{border:1px solid #916c40;background:#211d13;box-shadow:inset 0 3px 9px #000a;width:56px;height:56px;border-radius:50%;padding:5px;cursor:pointer}.pg-demo-board i{display:block;width:100%;height:100%;border-radius:50%;opacity:0;background:radial-gradient(circle at 30% 25%,white,#39c9a9 15%,#075343 60%,#5ec6b5)}.pg-demo-board .filled i{opacity:1}.pg-demo-board .selected{outline:2px solid #f2daa0}.pg-demo-message{min-height:45px;font-size:13px}
@media(min-width:901px) and (min-height:600px){#game-container[data-session=ultima] .pg-layout{height:max(390px,calc(100dvh - 185px))}.pg-play{display:flex;flex-direction:column}.pg-stage{flex:1;min-height:0;height:0}.pg-console{min-height:0;overflow:auto}}
@media(max-width:900px){.pg-layout{grid-template-columns:1fr}.pg-stage{height:clamp(320px,61svh,540px)}.pg-console{gap:12px;padding:18px!important}.pg-console h2{font-size:21px}.pg-example,.pg-rule,.pg-note{display:none}.pg-console .pg-tip{font-size:12px}.pg-actions{grid-template-columns:1fr 1fr}.pg-message{min-height:0}.pg-heading,.pg-foot{padding:13px 14px}.pg-foot{font-size:10px}.pg-progress{margin:0}.pg-board{border-width:4px}.pg-levels{grid-template-columns:1fr}}
body.minimalist-mode .pg-stage{display:flex!important;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#28544b,#0d2622)}
@media(prefers-reduced-motion:reduce){.pg-marble{transition:none}}
/* Preserve the game's headline against the compact shared console defaults. */
#game-container[data-session=ultima] .pg-console h2{font-size:25px;line-height:1.25;letter-spacing:-.8px}
.pg-drag-preview{inset:auto;opacity:1;z-index:8;transform:translate(-50%,-65%) scale(.8);filter:drop-shadow(0 12px 5px #0008)}
.pg-hole.pg-dragging .pg-marble{opacity:.3}
@media(max-width:900px){.pg-stage{height:clamp(300px,calc(100vw - 30px),500px)}.pg-console>h2,.pg-console>.eyebrow{display:none}.pg-console .pg-tip{margin:0}}