/* Chromapede's thumb trackball stays below the garden in portrait. */
.chromapede-page .trackball-unit{--ball-size:128px;display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto}
.chromapede-page .arcade-trackball{position:relative;display:grid;place-items:center;width:var(--ball-size);height:var(--ball-size);border-radius:50%;border:2px solid #efcf79;background:radial-gradient(circle,#111c3f 0 57%,#455b8b 58% 65%,#1a294e 66% 72%,#7187ad 73%);box-shadow:inset 0 3px 9px #0007,0 0 0 5px #8ca7eb12,0 5px 18px #060e2d66;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab}
.chromapede-page .arcade-trackball:focus-visible{outline:3px solid #ffe493;outline-offset:4px}
.chromapede-page .arcade-trackball[aria-disabled="true"]{opacity:.45;cursor:default}
.chromapede-page .arcade-trackball.is-held{border-color:#a7fff4;box-shadow:inset 0 3px 9px #0007,0 0 0 5px #6ffffb1a,0 0 24px #27eaf52b;cursor:grabbing}
.chromapede-page .trackball-ball{position:relative;display:block;width:81%;height:81%;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 34% 25%,#cbfff5,#45e9e8 25%,#179bc8 58%,#195d98 80%,#102b5c);box-shadow:inset -9px -11px 17px #09224c99,inset 1px 2px 3px #c6ffffa6,0 4px 7px #05153080;pointer-events:none}
.chromapede-page .trackball-grip{position:absolute;inset:-50%;background-image:repeating-linear-gradient(35deg,transparent 0 18px,#b9fff22b 19px 20px,transparent 21px 38px),repeating-linear-gradient(-35deg,transparent 0 18px,#04254f3b 19px 20px,transparent 21px 38px);background-position:var(--ball-roll-x,0px) var(--ball-roll-y,0px);opacity:.65;pointer-events:none}
.chromapede-page .trackball-ball:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 30% 21%,#f0fffcb3 0,transparent 28%),radial-gradient(circle at 40% 36%,transparent 38%,#051a4777 83%);pointer-events:none}
.chromapede-page .trackball-label{font:700 8px ui-monospace,monospace;color:#e8e6c9;letter-spacing:.12em}
.chromapede-page .trackball-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:clamp(104px,30vw,148px);min-width:0}
.chromapede-page .arcade .trackball-actions .fire-button{width:100%;max-width:none;min-height:74px;flex:0 0 auto;align-self:stretch;font-size:17px;border-radius:12px;border:1px solid #ffe978;box-shadow:0 4px 18px #ffcf251a}
.chromapede-page .trackball-help{font:8px/1.6 ui-monospace,monospace;text-align:center;color:#ccddf6;margin:0}
.chromapede-page .trackball-help b{display:block;font-size:8px;font-weight:600;color:#91f8e4;margin-top:5px}
body.chromapede-page .arcade .garden-touch{justify-content:space-evenly;align-items:center;gap:22px;padding:16px 20px}
body.chromapede-page .arcade [data-game-view].is-play-view .garden-touch{padding:10px 16px;gap:20px;justify-content:space-evenly;align-items:center}
.chromapede-page .is-play-view .trackball-unit{--ball-size:clamp(104px,calc(var(--play-height,100dvh) * .19),136px)}
body.chromapede-page .arcade [data-game-view].is-play-view[data-orientation="landscape"] .garden-touch{padding:10px 8px;gap:12px;justify-content:center}
.chromapede-page .is-play-view[data-orientation="landscape"] .trackball-unit{--ball-size:clamp(88px,calc(var(--play-height,100dvh) * .27),118px);gap:5px}
.chromapede-page .is-play-view[data-orientation="landscape"] .trackball-actions{width:126px;gap:6px}
body.chromapede-page .arcade .is-play-view[data-orientation="landscape"] .trackball-actions .fire-button{min-height:52px}
.chromapede-page .is-play-view[data-orientation="landscape"] .trackball-help{font-size:7px;line-height:1.4}
.chromapede-page .is-play-view[data-orientation="landscape"] .trackball-help b{margin-top:3px;font-size:7px}
@media(max-width:370px){
  body.chromapede-page .arcade .garden-touch{padding:12px;gap:16px}
  .chromapede-page .trackball-unit{--ball-size:116px}
}