.ring-maze-stage{position:relative;width:100%;margin:0 auto;aspect-ratio:710/780;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;-webkit-tap-highlight-color:transparent}.ring-maze-art{display:block;width:100%;height:100%;overflow:visible;touch-action:none;cursor:grab}.ring-maze-art:active{cursor:grabbing}.ring-maze-art:focus-visible{outline:1.5px solid #fff0b6;outline-offset:-2px;border-radius:50%}.ring-maze-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:4px 8px 10px}.ring-maze-actions button{min-width:0;min-height:50px;padding:8px;font-size:17px;touch-action:manipulation}.ring-maze-actions .rotation-key{font-size:32px;line-height:1;color:#f1d294}.ring-maze-actions .is-held{border-color:#fff0b0;box-shadow:0 0 10px #f3d28b55}.ring-maze-result-actions{display:grid;gap:10px}.ring-maze-result-actions button{min-height:48px;width:100%}.ring-maze-result-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:20px 0;text-align:left}.ring-maze-result-values dt{font-size:14px;color:#c4c3bb}.ring-maze-result-values dd{margin:4px 0 0;color:#ffebbc;font-size:23px}.ring-maze-art *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@container gf-page (min-width:600px){.ring-maze-stage{width:min(100%,calc((100svh - 260px)*710/780))}.ring-maze-actions{gap:12px}.ring-maze-actions button{min-height:56px}}

.ring-maze-actions{align-items:center}.ring-maze-actions>.ring-rotation{border:0;background:transparent;border-radius:50%;box-shadow:none;padding:0;width:50px;height:50px;max-width:100%;min-height:50px;aspect-ratio:1;touch-action:none;justify-self:center}.ring-rotation img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 3px 4px #0009)}#turn-left img{transform:scaleX(-1)}.ring-maze-actions .ring-rotation.is-held{filter:brightness(1.12);box-shadow:none}.ring-rotation:active:not(:disabled){transform:translateY(1px) scale(.96)}.ring-rotation:focus-visible{outline:2px solid #ffe3a4;outline-offset:2px}.maze-gate[data-open="true"] .gate-panel,.maze-gate[data-open="true"] .gate-shadow{opacity:0}.maze-gate[data-open="false"] .gate-trace{opacity:0}.gate-trace{opacity:.3}.maze-switch[data-active="true"] .switch-ring,.maze-portal[data-active="true"]{filter:drop-shadow(0 0 4px var(--feature-color)) brightness(1.25)}.maze-switch[data-active="false"] text{opacity:.7}

.ring-maze-actions button{appearance:none;-webkit-appearance:none;text-decoration:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.ring-maze-actions button:focus:not(:focus-visible){outline:none;box-shadow:none}.ring-maze-actions .ring-rotation{color:#f1d294;line-height:1;overflow:hidden;border:0}.ring-maze-actions .ring-rotation::after,.ring-maze-actions .ring-rotation::before{display:none;content:none}.ring-maze-actions button::selection,.ring-maze-actions img::selection{background:transparent}.ring-maze-shell #level-cycle{appearance:none;-webkit-appearance:none;text-decoration:none;border-bottom:0}.ring-maze-shell #level-cycle:focus:not(:focus-visible){outline:none}@container gf-page (min-width:600px){.ring-maze-actions>.ring-rotation{width:56px;height:56px;min-height:56px}}
