/* Appearance is independent of native simulation and physical touch geometry. */
body.playing { background: var(--studio-page-shell, #1e2224); }
.play[data-controller-theme] {
  --pad-shell:#eee8da;--pad-panel:#e4dccb;--pad-face-a:#c37659;--pad-face-b:#9eae88;
  --pad-dpad:#839171;--pad-ink:#344235;--pad-muted:#76816b;--pad-accent:#bd7255;--pad-edge:#c6cbb8;
  background:var(--pad-shell);color:var(--pad-ink);isolation:isolate;position:relative;
}
.play[data-controller-theme]::before {
  content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);
  background:#1b2424;pointer-events:none;z-index:24;
}
.play[data-controller-theme] .handheld { position:relative;isolation:isolate; }
.play[data-controller-theme] .handheld::before {
  content:"";position:absolute;inset:-8px -12px -2px;z-index:-1;pointer-events:none;border-radius:28px;
  background-size:cover;background-position:center;opacity:.3;
}
.play[data-controller-theme] .handheld::after { content:"";position:absolute;inset:-8px -12px -2px;z-index:-1;pointer-events:none;border-radius:28px;background-image:var(--pad-wallpaper,none);background-size:cover;background-position:center;opacity:var(--pad-wallpaper-opacity,.3); }
.play[data-controller-theme] .play-heading>span:first-child { color:var(--pad-ink); }
.play[data-controller-theme] :is(.play-heading>span:last-child,.connection-button,.play-footer,.players-button) { color:var(--pad-muted); }
.play[data-controller-theme] .play-header .icon-button {
  background:var(--pad-panel);border-color:var(--pad-edge);color:var(--pad-ink);
  box-shadow:inset 0 1px #ffffff35,0 2px 4px #00000008;
}
.play[data-controller-theme] .menu-icon span { background:var(--pad-ink); }
.play[data-controller-theme] .play-footer { border-color:var(--pad-edge); }
.play[data-controller-theme] .play-footer .text-button { color:var(--pad-accent); }
.play[data-controller-theme] .screen-shell {
  background:var(--pad-panel);border-color:var(--pad-edge);border-radius:20px 20px 32px 20px;
  box-shadow:inset 0 1px #ffffff35,0 3px 0 color-mix(in srgb,var(--pad-edge),#000 20%),0 9px 24px #0000000a;
  transform:translate(var(--studio-screen-center-x,0px),var(--studio-screen-offset,0%)) scale(var(--studio-screen-scale,1));transform-origin:50% 50%;
}
.play[data-controller-theme] .screen-topline>span:first-child { color:var(--pad-ink);letter-spacing:1.6px; }
.play[data-controller-theme] .screen-topline>span:first-child>span { color:var(--pad-accent); }
.play[data-controller-theme] :is(.screen-topline>span:last-child,.screen-bottomline) { color:var(--pad-muted); }
.play[data-controller-theme] .custom-layout .layout-group:not([data-dpad])>button {
  --studio-base-color:var(--pad-panel);--studio-base-ink:var(--pad-ink);
  background:var(--studio-button-color,var(--studio-base-color));color:var(--studio-button-ink,var(--studio-base-ink));
  border:1px solid color-mix(in srgb,var(--studio-button-color,var(--studio-base-color)),#000 20%);
  box-shadow:inset 0 2px 2px #ffffff38,inset 0 -3px 5px #00000013,0 4px 0 color-mix(in srgb,var(--studio-button-color,var(--studio-base-color)),#000 24%),0 7px 10px #00000014;
  font-family:var(--pad-font,"Space Grotesk",sans-serif);font-weight:600;text-shadow:none;
  transition:filter 60ms,box-shadow 60ms;
  opacity:var(--studio-control-opacity,1);
}
.play[data-controller-theme] .dpad>:is(.dpad-base,button,.dpad-center),.play[data-controller-theme] .dpad::after { opacity:var(--studio-control-opacity,1); }
.play[data-controller-theme] .custom-layout .layout-group[data-layout-group=a]>button { --studio-base-color:var(--pad-face-a);--studio-base-ink:var(--pad-a-ink); }
.play[data-controller-theme] .custom-layout .layout-group[data-layout-group=b]>button { --studio-base-color:var(--pad-face-b);--studio-base-ink:var(--pad-b-ink); }
.play[data-controller-theme] .custom-layout .layout-group[data-layout-group^=extra-]>button { --studio-base-color:var(--pad-accent); }
.play[data-controller-theme] .face-button::before { display:none; }
.play[data-controller-theme] .utility-button { display:flex;align-items:center;justify-content:center; }
.play[data-controller-theme] .utility-button i { display:none; }
.play[data-controller-theme] .utility-button>span { color:inherit;font-size:9px;letter-spacing:1.5px; }
.play[data-controller-theme] [data-control-label] { max-width:94%;overflow:hidden;text-overflow:ellipsis; }
.play[data-controller-theme] .shoulder-button span { color:inherit;opacity:.55; }
.play[data-controller-theme] .dpad { filter:drop-shadow(0 4px 0 color-mix(in srgb,var(--pad-dpad),#000 27%)); }
.play[data-controller-theme] .dpad-base { background:color-mix(in srgb,var(--studio-button-color,var(--pad-dpad)),#000 20%); }
.play[data-controller-theme] .dpad::after { background:linear-gradient(145deg,color-mix(in srgb,var(--studio-button-color,var(--pad-dpad)),#fff 7%),var(--studio-button-color,var(--pad-dpad))); }
.play[data-controller-theme] .dpad button { color:var(--studio-button-ink,var(--pad-dpad-ink));font-size:11px; }
.play[data-controller-theme] .dpad-center { --knob-half:8%;background:color-mix(in srgb,var(--pad-dpad),#000 8%);box-shadow:inset 0 1px 3px #00000026; }
.play[data-controller-theme] .dpad button.is-pressed { background:color-mix(in srgb,var(--pad-accent),transparent 65%);color:var(--pad-dpad-ink); }
#controller:is([data-dpad-shape=disc],[data-dpad-shape=stick]) .dpad-base,
#controller:is([data-dpad-shape=disc],[data-dpad-shape=stick]) .dpad::after { clip-path:none;border-radius:50%; }
#controller[data-dpad-shape=disc] .dpad::after { background:conic-gradient(from 45deg,var(--pad-dpad),color-mix(in srgb,var(--pad-dpad),#fff 9%),var(--pad-dpad),color-mix(in srgb,var(--pad-dpad),#fff 9%),var(--pad-dpad)); }
#controller[data-dpad-shape=split] :is(.dpad-base,.dpad::after,.dpad-center) { visibility:hidden; }
#controller[data-dpad-shape=split] .dpad button { background:var(--studio-button-color,var(--pad-dpad));border:1px solid #ffffff24;border-radius:28%;box-shadow:0 3px 0 #00000024; }
#controller[data-dpad-shape=stick] .dpad-center { --knob-half:21%;left:29%;top:29%;width:42%;height:42%;border:1px solid #ffffff28;box-shadow:0 3px 10px #00000030,inset 0 2px #ffffff18; }
#controller [data-floating-active=true] .dpad-center { left:calc(var(--floating-x,50%) - var(--knob-half,8%));top:calc(var(--floating-y,50%) - var(--knob-half,8%)); }
.play[data-controller-theme] [data-control-shape=rounded] { border-radius:18% !important; }
.play[data-controller-theme] [data-control-shape=circle] { border-radius:50% !important; }
.play[data-controller-theme] [data-control-shape=pill] { border-radius:999px !important; }
.play[data-controller-theme] [data-control-shape=diamond] { clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.play[data-controller-theme] [data-control-shape=hex] { clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.play[data-controller-theme] [data-feedback=press] .layout-group>button.is-pressed {
  box-shadow:inset 0 3px 7px #00000030,0 1px 0 #00000030;filter:brightness(1.12);
}
.play[data-controller-theme] [data-feedback=glow] .layout-group>button.is-pressed { filter:brightness(1.12);box-shadow:0 0 0 3px color-mix(in srgb,var(--pad-accent),transparent 55%),0 0 20px color-mix(in srgb,var(--pad-accent),transparent 55%); }
.play[data-controller-theme] [data-feedback=none] .layout-group>button.is-pressed { filter:none; }
.play[data-controller-theme] [data-feedback=press] .layout-group>button.is-pressed { box-shadow:inset 0 3px 7px #00000030,0 1px 0 #00000030 !important; }
.play[data-controller-theme] [data-feedback=glow] .layout-group>button.is-pressed { box-shadow:0 0 0 3px color-mix(in srgb,var(--pad-accent),transparent 55%),0 0 20px color-mix(in srgb,var(--pad-accent),transparent 55%) !important; }
.play[data-controller-theme] [data-control-mode]:not([data-control-mode=momentary])::after {
  content:attr(data-control-mode);position:absolute;bottom:5px;left:0;right:0;font:6px "DM Sans",sans-serif;letter-spacing:.7px;text-transform:uppercase;opacity:.8;pointer-events:none;
}
.play[data-controller-theme] [data-controller-finish] { position:relative; }
.play[data-controller-finish=glass] .handheld::before { opacity:.55; }
.play[data-controller-finish=glass] .screen-shell { background:color-mix(in srgb,var(--pad-panel),transparent 16%);border-color:color-mix(in srgb,var(--pad-edge),#fff 20%); }
.play[data-controller-finish=glass] .layout-group>button { background:linear-gradient(145deg,#ffffff20,#ffffff04),var(--studio-button-color,var(--studio-base-color)) !important;box-shadow:inset 0 1px 3px #ffffff55,0 4px 10px #00000018 !important; }
.play[data-controller-finish=soft] .layout-group>button { border-color:transparent !important;box-shadow:inset 0 2px 5px #ffffff22,inset 0 -2px 5px #00000014,0 5px 10px #0000001b !important; }
.play[data-controller-finish=gloss] .layout-group>button { background:linear-gradient(150deg,#ffffff45,transparent 45%,#ffffff0d),var(--studio-button-color,var(--studio-base-color)) !important; }
.play[data-controller-finish=metal] { background-image:repeating-linear-gradient(130deg,#ffffff02 0 1px,transparent 1px 4px); }
.play[data-controller-finish=metal] .layout-group>button { background:linear-gradient(175deg,#ffffff17,transparent 55%,#00000020),var(--studio-button-color,var(--studio-base-color)) !important; }
.play[data-controller-theme=atomic] .handheld::before {
  background-image:linear-gradient(90deg,transparent 97%,#d5b6eb18 97%),linear-gradient(0deg,transparent 97%,#d5b6eb18 97%);
  background-size:27px 27px,27px 27px;border:1px solid #c79be331;opacity:.8;
}
.play[data-controller-theme=circuit] .screen-shell { box-shadow:0 0 0 1px #61d8e233,0 9px 20px #00000030; }
.play[data-controller-theme=circuit] .handheld::before { border:1px solid #61d8e214;border-radius:30px; }
.play[data-controller-theme=glass] { background-image:radial-gradient(ellipse at 100% 85%,#57b7d426,transparent 50%),radial-gradient(ellipse at 0 35%,#78a7d921,transparent 65%); }
.play[data-controller-theme=pearl] { background-image:linear-gradient(135deg,#ffdbeb30,transparent 35%,#d0efff35 70%,transparent); }
.play[data-controller-theme=contrast] .layout-group>button { border:2px solid #ffffff !important;box-shadow:none !important;font-weight:700; }
.play[data-controller-theme=contrast] .screen-shell { border:2px solid #fff;box-shadow:none; }
/* Explicit frame choices win over every theme and surface finish. */
.play[data-screen-frame=thin] .screen-shell { padding:7px;border-radius:12px; }
.play[data-screen-frame=thin] :is(.screen-topline,.screen-bottomline) { display:none; }
.play[data-screen-frame=none] .screen-shell { padding:0;border:0;border-radius:4px;background:transparent;box-shadow:none; }
.play[data-screen-frame=none] :is(.screen-topline,.screen-bottomline) { display:none; }
.studio-hit-target { display:none;position:absolute;pointer-events:none;left:calc(50% + var(--studio-hit-x,0%));top:calc(50% + var(--studio-hit-y,0%));width:var(--studio-hit-width,100%);height:var(--studio-hit-height,100%);translate:-50% -50%;border:1px dashed #21a9d6;background:#2bb8e80c;border-radius:var(--studio-hit-radius,10px);z-index:30; }
#controller[data-show-targets=true] .studio-hit-target { display:block; }
.layout-resize-handle { display:none;position:absolute;right:-6px;bottom:-6px;width:19px;height:19px;border:2px solid #fff;border-radius:50%;background:#ca795d;box-shadow:0 2px 6px #0003;cursor:nwse-resize;z-index:40; }
.layout-editing .layout-selected>.layout-resize-handle { display:block; }
.layout-editing .layout-group { --studio-control-opacity:1 !important;opacity:1 !important; }
.controller-device-controls { margin-top:18px;border-top:1px solid #43534a;padding-top:15px; }
.controller-device-controls>summary { cursor:pointer;font-size:12px;font-weight:600;color:#cad5c6;margin-bottom:14px; }
.controller-sync-row { display:flex;align-items:center;gap:10px;justify-content:space-between;padding:12px 2px;font-size:10px;color:#a1b59d;line-height:1.5; }
.controller-sync-row .text-button { flex:none;padding:7px 0;font-size:10px; }
.layout-toolbar { max-height:calc(100svh - 90px);overflow:auto;overscroll-behavior:contain; }
.layout-toolbar-advanced { display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px; }
.layout-toolbar-advanced label { display:flex;gap:5px;align-items:center;font-size:10px; }
.layout-toolbar-advanced input[type=range] { width:85px; }
.layout-toolbar-advanced input[type=checkbox] { accent-color:#667d52; }
.controller-precision-canvas { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:45; }
.precision-summary { position:fixed;z-index:27;left:50%;top:max(80px,calc(env(safe-area-inset-top) + 60px));transform:translateX(-50%);width:min(370px,calc(100% - 24px));padding:12px 14px;border-radius:14px;background:#152621ed;color:#f3f2e5;border:1px solid #a0c39b55;box-shadow:0 10px 35px #0003;font-size:11px; }
.precision-summary p { margin:5px 0 10px;color:#bccbbd;line-height:1.5; }
.precision-header { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.precision-header>strong { font-size:12px; }
.precision-practice-active #practice-banner { display:none !important; }
.precision-summary .small-button { padding:7px 10px; }
.precision-actions { display:flex;flex-wrap:wrap;gap:7px; }
@media(orientation:portrait) {
  .play[data-controller-theme] .handheld { justify-content:flex-start;min-height:0; }
  .play[data-controller-theme] :is(.play-header,.play-footer,.screen-shell) { flex-shrink:0; }
}
@media(orientation:landscape) and (max-height:600px) {
  .play[data-controller-theme] .screen-shell { --studio-screen-center-x:-50%; }
  .precision-summary { width:250px;left:50%;right:auto;top:8px;bottom:auto;transform:translateX(-50%); }
  .layout-toolbar { max-height:calc(100svh - 16px); }
  .layout-toolbar-advanced { gap:5px;margin-top:6px; }
  .play[data-controller-theme] .handheld::before,.play[data-controller-theme] .handheld::after { inset:0; }
}
@media(prefers-reduced-motion:reduce) { .play[data-controller-theme] .layout-group>button { transition:none; } }