/* GGrid Pad Layout v1 – controller-style game screen (body.layout-pad).
   All colours come from the theme's --ui-* tokens. Action buttons only get a faint
   semantic hue (--pad-hue) mixed into the theme colours, so they stay apart from
   each other without clashing with the scene. */
body.layout-pad[data-ui-context="game"]{--pad-gap:5px;--pad-top-h:46px;--pad-deck-h:164px;--pad-panel:var(--ui-control,#0f2346);--pad-edge:var(--ui-border,#3f6db5);
 --pad-raised:var(--ui-control-raised,#38505f);--pad-base:var(--ui-control,#1d303b);--pad-accent:var(--ui-accent,#7ac9ff);--pad-text:var(--ui-text,#f4f7fa)}
body.layout-pad[data-ui-context="game"] main{display:flex;flex-direction:column;justify-content:center;gap:var(--pad-gap);min-height:100dvh;box-sizing:border-box;padding:max(6px,env(safe-area-inset-top)) 6px max(8px,env(safe-area-inset-bottom))}
body.layout-pad main .game-head,
body.layout-pad main .edge-control,
body.layout-pad main .hud-row{display:none!important}

/* ---------- top bar ---------- */
body.layout-pad .pad-top{display:grid;grid-template-columns:auto minmax(0,.8fr) minmax(0,1fr) minmax(0,1.45fr);gap:6px;align-items:stretch;height:var(--pad-top-h)}
body.layout-pad .pad-top[hidden]{display:none}
body.layout-pad .pad-top-menu{display:flex}
body.layout-pad .pad-top-menu #gameMenu{position:static;width:auto;height:100%;min-width:0;padding:0 12px;display:flex;align-items:center;gap:6px;border-radius:12px;font:800 15px/1 system-ui,sans-serif;color:#fff;
 color:var(--pad-text);background:linear-gradient(180deg,var(--pad-raised),var(--pad-base))!important;border:2px solid color-mix(in srgb,var(--pad-accent) 55%,transparent)!important;box-shadow:inset 0 1px #ffffff30,0 3px 8px #0007!important}
body.layout-pad .pad-top-menu #gameMenu .pad-ico{font-size:20px}
body.layout-pad .pad-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;border-radius:12px;background:linear-gradient(#ffffff10,#00000026),var(--pad-panel);border:2px solid var(--pad-edge);box-shadow:inset 0 1px #ffffff22,0 3px 8px #0006;color:var(--ui-text,#eef4ff);overflow:hidden}
body.layout-pad .pad-stat small{font:700 11px/1.1 system-ui,sans-serif;letter-spacing:.02em;opacity:.8}
body.layout-pad .pad-stat strong{font:900 22px/1.1 system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
body.layout-pad .pad-stat strong em{font-style:normal;font-weight:800;opacity:.7}
body.layout-pad .pad-stat strong.over-par em{color:#ffb35c;opacity:1}
body.layout-pad .pad-stat-level strong{font-size:15px}
body.layout-pad .pad-stat-moves strong{font-size:19px}
body.layout-pad .pad-score-slot[hidden]{display:none}
body.layout-pad .pad-score-slot{display:flex;align-items:center;justify-content:center;min-width:0}
body.layout-pad .pad-score-slot #scoreBox{height:auto;min-width:0;width:auto;margin:0;padding:0;border:0!important;background:none!important;box-shadow:none!important}
body.layout-pad .pad-score-slot #scoreBox strong{font-size:24px!important;color:var(--ui-accent,#ffd76a)}

/* ---------- board ---------- */
body.layout-pad main .board-wrap{flex:0 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;padding:4px!important;border-radius:18px}
/* The free height minus the theme's own frame around the board and the space it keeps around the
   controls (--pad-chrome-y/-x, measured by the scene renderer; 8px = the plain 4px padding). The wrap
   hugs the board, so a painted frame always sits on the board edge – height- or width-limited alike. */
body.layout-pad main{--pad-board-h:calc(100dvh - var(--pad-top-h) - var(--pad-deck-h) - 3*var(--pad-gap) - 10px - var(--pad-chrome-y,8px));
 --pad-frame-w:calc(var(--pad-board-h) * var(--cols,1) / var(--rows,1) + var(--pad-chrome-x,8px))}
body.layout-pad main .board-wrap:not(.scene-artwork){box-sizing:border-box;align-self:center;width:min(100%,var(--pad-frame-w))}
/* The controls are as wide as the board's frame (a usable 340px at least), so frame and console
   read as one piece on wide screens too. */
body.layout-pad main .pad-deck{box-sizing:border-box;width:100%;max-width:max(var(--pad-frame-w),min(100%,340px));margin-left:auto;margin-right:auto}
body.layout-pad main .board-wrap:not(.scene-artwork) .board{width:min(100%,calc(var(--pad-board-h) * var(--cols) / var(--rows)));max-height:var(--pad-board-h);margin:0 auto;flex:0 0 auto}

/* Painted artwork scenes keep their design ratio, limited to the free height. */
body.layout-pad main .board-wrap.scene-artwork{padding:0!important;display:block;flex:0 0 auto;align-self:center;
 width:min(100%,calc((100dvh - var(--pad-top-h) - var(--pad-deck-h) - 3*var(--pad-gap) - 24px) * var(--art-design-ratio,1)))}
body.layout-pad[data-ui-context="game"] main{height:100dvh;position:relative}
/* Messages float above the controls instead of pushing the layout. */
body.layout-pad main #toast,body.layout-pad main #motionNote{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--pad-deck-h) + 16px);z-index:40;max-width:92%;margin:0;pointer-events:none;
 padding:6px 12px;border-radius:12px;background:#000c;color:#fff;font:700 13px/1.3 system-ui,sans-serif;box-shadow:0 4px 12px #0008}
body.layout-pad main #motionNote{bottom:calc(var(--pad-deck-h) + 52px);font-weight:600;font-size:12px;opacity:.9}
body.layout-pad main #toast:empty,body.layout-pad main #motionNote:empty{display:none}

/* ---------- control deck ---------- */
/* Narrow icon-only columns on the sides; the arrow keys take every remaining pixel. */
body.layout-pad .pad-deck{--pad-side:68px;display:grid;grid-template-columns:var(--pad-side) minmax(0,1fr) var(--pad-side);gap:6px;align-items:stretch;height:var(--pad-deck-h);flex:0 0 auto}
body.layout-pad .pad-deck[hidden]{display:none}
body.layout-pad .pad-col{display:flex;flex-direction:column;gap:6px;justify-content:center;min-width:0;height:100%}
body.layout-pad .pad-col .play-action,
body.layout-pad .pad-col #freeze.play-action{position:relative;flex:1 1 0;width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;max-height:none;padding:0!important;margin:0;border-radius:14px!important;
 display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--pad-text)!important;text-shadow:0 1px 2px #0008;letter-spacing:0!important;white-space:nowrap;
 background:linear-gradient(180deg,color-mix(in srgb,var(--pad-raised) 80%,var(--pad-hue)),color-mix(in srgb,var(--pad-base) 86%,var(--pad-hue)))!important;
 border:2px solid color-mix(in srgb,var(--pad-accent) 45%,var(--pad-hue))!important;box-shadow:inset 0 1px 0 #ffffff30,inset 0 -3px 0 #00000030,0 4px 8px #0007!important;opacity:1;filter:none}
body.layout-pad .pad-col .play-action:active,body.layout-pad .pad-col .play-action.pressed{transform:translateY(2px);box-shadow:inset 0 2px 5px #0006,0 2px 4px #0006!important;filter:brightness(1.1)}
body.layout-pad .pad-col .play-action:disabled{opacity:.45!important;filter:saturate(.35)!important}
body.layout-pad .pad-col .play-action[hidden]{display:none!important}
body.layout-pad .pad-ico{font-size:27px;line-height:1}
body.layout-pad .pad-short{display:none}
body.layout-pad .pad-label{font:800 11px/1.3 system-ui,sans-serif;letter-spacing:-.15px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* Side buttons show only their icon; the buttons' aria-label keeps the name for screen readers. */
body.layout-pad .pad-col .pad-label{display:none}
body.layout-pad #freeze{--pad-hue:#4b9cff}
body.layout-pad #bomb{--pad-hue:#e0563c}
body.layout-pad #playHint{--pad-hue:#3fc27a}
body.layout-pad #playRestart{--pad-hue:#f07a3c}
body.layout-pad #playNext{--pad-hue:#9a6cf2}
body.layout-pad #playChoose{--pad-hue:#eab440}
/* Freeze states stay readable in the new frame. */
body.layout-pad[data-ui-context="game"] main .pad-col #freeze.freeze-action[data-freeze-state="active"]{--pad-hue:#12b6e0;background:linear-gradient(180deg,#12b6e0,#067a9e)!important;border-color:#fff2b0!important;box-shadow:0 0 0 3px #82ecff,0 0 16px #75f3ff!important}
body.layout-pad[data-ui-context="game"] main .pad-col #freeze.freeze-action[data-freeze-state="unavailable"]{--pad-hue:#6b7780;border-style:dashed!important}
body.layout-pad[data-ui-context="game"] main .pad-col #bomb[data-bomb-state="active"]{background:linear-gradient(180deg,#ff8a4c,#c8371f)!important;border-color:#ffe1a8!important;box-shadow:0 0 0 3px #ffb38a,0 0 16px #ff7a4a!important}
body.layout-pad[data-ui-context="game"] main .pad-col #bomb[data-bomb-state="unavailable"]{--pad-hue:#6b7780;border-style:dashed!important}

/* D-pad: fills the whole middle of the deck. Left and right are tall keys, up and
   down share the centre column – the largest touch targets the space allows. */
body.layout-pad .pad-dpad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);
 grid-template-areas:"l u r" "l d r";gap:6px;width:100%;height:100%;min-width:0}
body.layout-pad .pad-dir{position:relative;min-width:0;min-height:0;padding:0;border-radius:18px;border:3px solid color-mix(in srgb,var(--pad-accent) 85%,transparent);touch-action:none;user-select:none;-webkit-user-select:none;
 background:linear-gradient(180deg,color-mix(in srgb,var(--pad-raised) 78%,var(--pad-accent)),color-mix(in srgb,var(--pad-base) 88%,var(--pad-accent)));
 box-shadow:inset 0 2px 0 #ffffff40,inset 0 -4px 0 #0003,0 5px 12px #0009,0 0 12px color-mix(in srgb,var(--pad-accent) 25%,transparent);display:grid;place-items:center;cursor:pointer}
body.layout-pad .pad-dir span{width:min(38px,58%);aspect-ratio:1;height:auto;background:var(--pad-text);filter:drop-shadow(0 2px 2px #0008);clip-path:polygon(50% 0,100% 52%,68% 52%,68% 100%,32% 100%,32% 52%,0 52%)}
body.layout-pad .pad-up{grid-area:u}
body.layout-pad .pad-down{grid-area:d}.pad-down span{transform:rotate(180deg)}
body.layout-pad .pad-left-dir{grid-area:l}.pad-left-dir span{transform:rotate(-90deg)}
body.layout-pad .pad-right-dir{grid-area:r}.pad-right-dir span{transform:rotate(90deg)}
body.layout-pad .pad-dir:active,body.layout-pad .pad-dir.pressed{transform:translateY(2px);background:linear-gradient(180deg,var(--ui-control-pressed,var(--pad-raised)),var(--pad-base));box-shadow:inset 0 2px 6px #0006,0 2px 5px #0007}
body.layout-pad .pad-dir:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* Small / short screens */
@media(max-width:379px){body.layout-pad .pad-long{display:none}body.layout-pad .pad-short{display:inline}body.layout-pad .pad-top-menu #gameMenu .pad-label{display:none}body.layout-pad .pad-top-menu #gameMenu{padding:0 11px}body.layout-pad .pad-stat strong{font-size:19px}body.layout-pad .pad-stat-level strong{font-size:14px}body.layout-pad .pad-stat-moves strong{font-size:17px}}
@media(max-width:360px){body.layout-pad .pad-deck{--pad-side:58px}body.layout-pad[data-ui-context="game"]{--pad-deck-h:156px}}
@media(max-height:700px){body.layout-pad[data-ui-context="game"]{--pad-top-h:44px;--pad-deck-h:152px}body.layout-pad .pad-ico{font-size:23px}}
body.layout-pad #playChoose .pad-long{font-size:10px;letter-spacing:-.3px}

/* ---------- v0.15.72 no-arrows layout (body.layout-pad.layout-compact) ----------
   Same top bar; the six buttons in one row under the board; no D-pad. The smaller deck
   lets the board grow (its height formula uses --pad-deck-h). */
body.layout-pad.layout-compact[data-ui-context="game"]{--pad-deck-h:56px}
body.layout-pad.layout-compact .pad-dpad{display:none}
body.layout-pad.layout-compact .pad-deck{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch}
body.layout-pad.layout-compact .pad-col{flex-direction:row;gap:6px}
body.layout-pad.layout-compact .pad-col .play-action,body.layout-pad.layout-compact .pad-col #freeze.play-action{max-height:none}
body.layout-pad.layout-compact main #autoSolveBar{bottom:calc(var(--pad-deck-h) + 14px)}
/* Hint without arrow buttons: a large translucent arrow pulses on that edge of the board. */
.hint-edge{position:absolute;z-index:35;pointer-events:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
 background:color-mix(in srgb,var(--ui-accent,#ffd76a) 78%,transparent);color:#1b1410;font:900 34px/1 system-ui,sans-serif;box-shadow:0 4px 14px #0008;animation:hint-pulse 1s ease-in-out infinite}
.hint-edge-up{top:8px;left:50%;margin-left:-28px}.hint-edge-down{bottom:8px;left:50%;margin-left:-28px}
.hint-edge-left{left:8px;top:50%;margin-top:-28px}.hint-edge-right{right:8px;top:50%;margin-top:-28px}
@media (prefers-reduced-motion:reduce){.hint-edge{animation:none}}