:root {
  --purple: #9b4dff;
  --blue: #287bff;
  --cyan: #39efff;
  --pink: #ff4fd8;
}
html, body { margin: 0 !important; width: 100% !important; height: 100% !important; background: transparent !important; overflow: hidden !important; }
.custom.controller { position: absolute !important; left: 50% !important; top: 50% !important; width: 806px; height: 560px; margin: 0 !important; transform: translate(-50%, -50%) !important; background: url("shell.svg") center/contain no-repeat; filter: drop-shadow(0 18px 18px rgba(13,16,36,.42)); font-family: Arial,sans-serif; }
.custom.controller.disconnected { opacity: .72; filter: grayscale(.55) drop-shadow(0 15px 18px #222536); }
.custom.controller.disconnected::after { content: "MANETTE DÉCONNECTÉE"; position: absolute; left: 278px; top: 125px; width: 250px; padding: 9px 0; border-radius: 20px; background: rgba(255,255,255,.88); border: 2px solid var(--purple); color: #29243e; text-align: center; font: bold 13px Arial; letter-spacing: 1px; box-shadow: 0 0 15px rgba(155,77,255,.55); }

/* LT/RT : l'opacité fournie par Gamepad Viewer représente la course analogique. */
.custom .triggers { position: absolute; z-index: 2; left: 106px; top: 22px; width: 594px; height: 100px; }
.custom .trigger { position: absolute; top: 0; width: 151px; height: 92px; background: url("trigger-fill.svg") center/contain no-repeat; opacity: 0; filter: drop-shadow(0 0 8px var(--purple)); }
.custom .trigger.left { left: 0; }
.custom .trigger.right { right: 0; transform: scaleX(-1); }
.custom .triggers::before, .custom .triggers::after { content: ""; position: absolute; top: 0; width: 151px; height: 92px; background: url("trigger-base.svg") center/contain no-repeat; z-index: -1; }
.custom .triggers::before { left: 0; }
.custom .triggers::after { right: 0; transform: scaleX(-1); }
.custom .trigger.pressed { filter: brightness(1.45) drop-shadow(0 0 8px var(--cyan)) drop-shadow(0 0 20px var(--purple)); }

.custom .bumpers { position: absolute; z-index: 3; left: 102px; top: 99px; width: 602px; height: 42px; }
.custom .bumper { width: 160px; height: 42px; background: url("bumper.svg") center/contain no-repeat; }
.custom .bumper.left { float: left; }
.custom .bumper.right { float: right; transform: scaleX(-1); }
.custom .bumper.pressed { filter: brightness(1.7) drop-shadow(0 0 11px var(--purple)); transform: translateY(3px); }
.custom .bumper.right.pressed { transform: scaleX(-1) translateY(3px); }

.custom .abxy { position: absolute; z-index: 6; left: 574px; top: 184px; width: 156px; height: 156px; }
.custom .button { position: absolute; width: 56px; height: 56px; border-radius: 50%; box-sizing: border-box; background: url("button.svg") center/contain no-repeat; color: #f8f8ff; text-align: center; font: 700 25px/56px Arial; text-shadow: 0 2px 3px #06030e; transition: transform .05s, filter .05s; }
.custom .button::after { display: block; }
.custom .y { left: 50px; top: 0; } .custom .y::after { content: "Y"; }
.custom .x { left: 0; top: 50px; } .custom .x::after { content: "X"; }
.custom .b { right: 0; top: 50px; } .custom .b::after { content: "B"; }
.custom .a { left: 50px; bottom: 0; } .custom .a::after { content: "A"; }
.custom .button.pressed { transform: scale(.88); background-image: url("button-pressed.svg"); color: #fff; text-shadow: 0 1px 3px #281051; filter: brightness(1.45) drop-shadow(0 0 7px var(--cyan)) drop-shadow(0 0 15px var(--pink)); }

.custom .sticks { position: absolute; z-index: 7; inset: 0; }
.custom .stick { position: absolute; width: 110px; height: 110px; background: url("stick.svg") center/contain no-repeat; filter: drop-shadow(0 0 6px rgba(115,68,255,.72)); }
.custom .stick.left { left: 175px; top: 188px; }
.custom .stick.right { left: 468px; top: 316px; }
.custom .stick.pressed { background-image: url("stick-pressed.svg"); filter: brightness(1.25) drop-shadow(0 0 9px var(--cyan)) drop-shadow(0 0 18px var(--purple)); }

.custom .dpad { position: absolute; z-index: 6; left: 206px; top: 305px; width: 132px; height: 132px; background: url("dpad-disc.svg") center/contain no-repeat; }
.custom .face { position: absolute; background: url("dpad-arrow.svg") center/contain no-repeat; }
.custom .face.up, .custom .face.down { width: 38px; height: 53px; left: 47px; }
.custom .face.left, .custom .face.right { width: 53px; height: 38px; top: 47px; }
.custom .face.up { top: 5px; }
.custom .face.down { bottom: 5px; transform: rotate(180deg); }
.custom .face.left { left: 5px; transform: rotate(-90deg); }
.custom .face.right { right: 5px; transform: rotate(90deg); }
.custom .face.pressed { filter: brightness(1.8) drop-shadow(0 0 8px var(--purple)); }

.custom .arrows { position: absolute; z-index: 6; left: 331px; top: 184px; width: 144px; height: 38px; }
.custom .back, .custom .start { position: absolute; width: 38px; height: 38px; background: url("menu.svg") center/contain no-repeat; }
.custom .back { left: 0; }
.custom .start { right: 0; transform: scaleX(-1); }
.custom .back.pressed, .custom .start.pressed { filter: brightness(1.8) drop-shadow(0 0 8px var(--purple)); transform: scale(.88); }
.custom .start.pressed { transform: scaleX(-1) scale(.88); }
.custom .meta { position: absolute; z-index: 7; left: 376px; top: 225px; width: 54px; height: 54px; background: url("guide.svg") center/contain no-repeat; }
.custom .meta.pressed { filter: brightness(1.65) drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px var(--purple)); transform: scale(.9); }
.custom .touchpad { display: none !important; }