.marble-stage{width:100%;padding-block:3px 8px;user-select:none;-webkit-user-select:none}
.marble-board{position:relative;width:88%;margin-inline:auto;aspect-ratio:1;border-radius:18px;overflow:hidden;background:transparent;isolation:isolate;direction:ltr;touch-action:manipulation}
.marble-board::before{content:'';position:absolute;inset:0;background:url('assets/gold-frame.svg') center/100% 100%;pointer-events:none}
.marble-grid,.marble-pieces{position:absolute;inset:5%;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr)}
.marble-pieces{display:block;pointer-events:none}
.marble-well{align-self:center;justify-self:center;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#ffffff05,#00000018);box-shadow:inset 0 2px 4px #0005,0 1px 0 #e5c88b15;border:1px solid #d4bd8030;position:relative}
.marble-well.centre{border:1px dashed #ead29a99;background:transparent;box-shadow:inset 0 0 0 4px #edd39a08,0 0 12px #e3c7840c}
.marble-well.destination{border-color:#ffe0a6;box-shadow:0 0 0 2px #eecb7833,inset 0 1px 4px #0007}
.marble-ball{position:absolute;left:calc(var(--col)*100%/7);top:calc(var(--row)*100%/7);width:calc(100%/7);height:calc(100%/7);padding:0;border:0;background:none;pointer-events:auto;border-radius:50%;touch-action:none;-webkit-tap-highlight-color:transparent;cursor:pointer;transition:left .17s ease,top .17s ease,transform .17s ease;z-index:1}
.marble-ball img{display:block;width:106%;height:106%;margin:-3%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 2px #0008)}
.marble-ball[aria-pressed=true]{z-index:2}
.marble-ball[aria-pressed=true]::after{content:'';position:absolute;inset:3%;border:2px solid #ffe4ac;border-radius:50%;box-shadow:0 0 0 2px #031b20,0 0 14px #f4d37e88;pointer-events:none}
.marble-ball:focus-visible{outline:3px solid #fff;outline-offset:1px}
.marble-ball.popping{pointer-events:none;animation:marble-pop .22s ease-out forwards}
.marble-controls{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:10px 4px 0}
.shift-button{display:grid;place-items:center;width:clamp(48px,15cqw,68px);min-height:52px;aspect-ratio:1.12;border-radius:16px;border:1px solid #a38b55;background:linear-gradient(155deg,#243337,#10181d 70%);box-shadow:inset 0 1px #ffdfa033,0 6px 13px #0006;color:#ffe3aa;font:500 30px/1 system-ui;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.shift-button:disabled{opacity:.3;box-shadow:none;cursor:default}.shift-button:not(:disabled):active{transform:translateY(2px);background:#345451}.shift-button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.marble-result-emblem{text-align:center;color:#ffe0a3;font-size:58px;text-shadow:0 0 35px #55d7c977}
.marble-result-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-block:20px}.marble-result-values div{padding:14px;border:1px solid #75613d;border-radius:14px;display:grid;gap:5px;text-align:center;background:#ffffff04}.marble-result-values strong{color:#ffe0a3;font-size:1.5rem}.marble-result-values span{font-size:.8rem;color:#d8d0bf}.marble-result-close{width:100%;margin-top:12px}
body.marble-reduced-motion .marble-ball{transition:none}body.marble-reduced-motion .marble-ball.popping{animation:none;opacity:0}
@keyframes marble-pop{to{transform:scale(1.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.marble-ball{transition:none}.marble-ball.popping{animation:none;opacity:0}}

.marble-ball.bursting>img{visibility:hidden}
.marble-ball.bursting::after{display:none}
.marble-burst{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}

.marble-ball.bursting{z-index:3}

.marble-ball{transform:translate(var(--drag-x,0px),var(--drag-y,0px))}
.marble-ball.dragging{transition:none;z-index:4}

.marble-controls{--control-size:clamp(44px,13cqw,58px);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center}
.marble-controls>.shift-button{justify-self:start}
.marble-controls .shift-button{width:var(--control-size);height:var(--control-size);min-height:44px;aspect-ratio:1}
.arrow-pad{display:grid;grid-template-columns:repeat(3,var(--control-size));grid-template-rows:repeat(2,var(--control-size));grid-template-areas:'. up .' 'left down right';gap:6px}
#up{grid-area:up}#left{grid-area:left}#down{grid-area:down}#right{grid-area:right}
.joker-tools{display:grid;gap:6px;justify-self:end}
.joker-button{position:relative;display:grid;place-items:center;width:var(--control-size);height:var(--control-size);border:1px solid #a38b55;border-radius:14px;background:linear-gradient(155deg,#243337,#10181d 70%);padding:5px;cursor:pointer;touch-action:manipulation}
.joker-button img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.joker-button span{position:absolute;right:3px;bottom:2px;font:700 11px/1.2 system-ui;color:#ffe3aa;text-shadow:0 1px 3px #000}
.joker-button:disabled{opacity:.28;cursor:default}.joker-button[aria-pressed=true]{border-color:#fff0ba;box-shadow:0 0 0 2px #eed08c55}
.joker-button:focus-visible,.joker-cell:focus-visible{outline:3px solid #fff;outline-offset:2px}
.joker-targets{position:absolute;inset:5%;pointer-events:none;z-index:5}
.joker-cell{position:absolute;left:calc(var(--col)*100%/7);top:calc(var(--row)*100%/7);width:calc(100%/7);height:calc(100%/7);border:2px dashed #ffe3aa;border-radius:50%;background:#e5c67d18;pointer-events:auto;cursor:pointer;touch-action:manipulation}
.joker-instruction{margin:10px 0 0;text-align:center;color:#ffe3aa;font-size:.85rem}

/* Phones gain 50 CSS pixels; retain the established tablet/desktop size. */
@media (max-width:599px) and (pointer:coarse){
  .marble-board{width:min(calc(88% + 50px),calc(100vw - 4px));margin-inline:0;left:50%;transform:translateX(-50%)}
}

#score{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}

.marble-result-next{width:100%;margin-bottom:10px}
#level-option{max-width:110px}

.marble-result-values strong{font-size:clamp(16px,4cqw,22px);overflow-wrap:anywhere}