.scroll-pad{position:relative;box-sizing:border-box;display:grid;grid-template-columns:1fr 92px;grid-template-rows:auto auto;align-content:center;align-items:center;gap:5px 12px;width:320px;max-width:100%;min-height:108px;padding:12px 16px;border:2px solid #d4b36c;border-radius:18px;background:radial-gradient(ellipse at right,#42644f,#12291f);color:#fff4d4;touch-action:none;user-select:none;cursor:grab;flex:1 1 250px}
.scroll-pad strong{font:700 14px/1.3 Arial,sans-serif;letter-spacing:1px}.scroll-pad small{font:13px/1.4 Arial,sans-serif}.scroll-pad-ring{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:80px;height:80px;border:2px solid #c8aa65;border-radius:50%;background:#091d17;box-shadow:inset 0 0 15px #0008}.scroll-pad-ring i{display:block;width:27px;height:27px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff0bd,#b38b3b);box-shadow:0 3px 7px #0009}.scroll-pad.active{cursor:grabbing;box-shadow:inset 0 0 20px #eac68155}.scroll-pad:focus-visible{outline:3px solid #fff1be;outline-offset:3px}
@media(max-height:500px) and (min-width:650px){.scroll-pad{min-height:78px;padding:6px 12px;grid-template-columns:1fr 62px}.scroll-pad-ring{width:60px;height:60px}}
body[data-kind=maze] .scroll-pad{flex:0 0 auto;width:100%;grid-template-columns:1fr;text-align:center;justify-items:center;min-height:180px;padding:14px 8px}body[data-kind=maze] .scroll-pad-ring{grid-column:1;grid-row:3}
@media(max-width:699px){body[data-kind=maze] .scroll-pad{min-height:76px;height:76px;grid-template-columns:1fr 64px;text-align:left;justify-items:start;padding:6px 12px;flex:1}body[data-kind=maze] .scroll-pad-ring{grid-column:2;grid-row:1/3;width:60px;height:60px}body[data-kind=maze] .control-hint{display:none}}