/* Existing controller renderer, scoped to its panel in the Mobile chapter. */
#mobile .gamepad-panel { --gp-gold: #c6a264; --gp-ink: #c6bba9; }
#mobile .gamepad-panel .gp-eyebrow { display: block; color: #ac9164; font: 10px/1.5 var(--body, Inter, sans-serif); letter-spacing: .15em; text-transform: uppercase; }
#mobile .gamepad-panel .gp-eyebrow > span { padding-inline: 7px; opacity: .5; }
#mobile .gamepad-panel .gp-toolbar { display: flex; justify-content: center; margin-bottom: 12px; }
#mobile .gamepad-panel .gp-switch { display: inline-flex; padding: 3px; border: 1px solid #8d714745; border-radius: 4px; background: #0c0b09; }
#mobile .gamepad-panel .gp-switch button { min-height: 32px; padding: 6px 17px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: #a29a8c; font: 11px/1.4 Inter, sans-serif; cursor: pointer; }
#mobile .gamepad-panel .gp-switch button[aria-pressed=true] { color: #ecd4a4; border-color: #9d7c4955; background: #7a5c282b; }
#mobile .gamepad-panel button:focus-visible, #mobile .gamepad-panel .gp-control:focus-visible { outline: 2px solid #e6be73; outline-offset: 3px; }
#mobile .gamepad-panel .gp-layout { display: grid; grid-template-columns: minmax(0,1fr) 292px; gap: 32px; align-items: center; }
#mobile .gamepad-panel .gp-diagram { position: relative; min-width: 0; }
#mobile .gamepad-panel .gp-pad { display: block; width: 100%; height: auto; overflow: visible; }
#mobile .gamepad-panel .gp-body { fill: url(#gp-body-shade); stroke: #ae8d54; stroke-width: 1.5; }
#mobile .gamepad-panel .gp-pad-outgoing { position:absolute; inset:0 auto auto 0; pointer-events:none; }
#mobile .gamepad-panel .gp-ps-touchpad { fill:#111518; stroke:#9f865c; stroke-width:1.2; }
#mobile .gamepad-panel .gp-ps-lightbar { fill:none; stroke:#b4c5d0; stroke-width:2.5; opacity:.65; filter:drop-shadow(0 0 3px #a3c8e36b); }
#mobile .gamepad-panel .gp-ps-control-text { fill:#d1c4ad; font:15px Tahoma,sans-serif; pointer-events:none; }
#mobile .gamepad-panel .gp-ps-small-text { font-size:9px; }
#mobile .gamepad-panel .gp-seam { fill: none; stroke: #8c74452f; stroke-width: 1.2; }
#mobile .gamepad-panel .gp-shadow { fill: #0007; }
#mobile .gamepad-panel .gp-surface { fill: #0b0c0d; stroke: #695b40; stroke-width: 1.3; }
#mobile .gamepad-panel .gp-control { cursor: pointer; outline: none; }
#mobile .gamepad-panel .gp-control image { pointer-events: none; }
#mobile .gamepad-panel .gp-control .gp-surface { transition: fill .12s, stroke .12s; }
#mobile .gamepad-panel .gp-control:is(.is-highlighted,.is-pressed,:focus-visible) .gp-surface { stroke: #f2cb81; stroke-width: 2.5; fill: #7b622e; }
#mobile .gamepad-panel .gp-callout { fill: none; stroke: #9a815348; stroke-width: 1; pointer-events: none; }
#mobile .gamepad-panel .gp-callout:is(.is-highlighted,.is-pressed) { stroke: #e1ba73; stroke-width: 1.7; }
#mobile .gamepad-panel .gp-labels { list-style: none; margin: 0; padding: 0; }
#mobile .gamepad-panel .gp-label { position: absolute; width: 16.2%; top: calc(var(--gp-y) * 100% / 510); transform: translateY(-50%); }
#mobile .gamepad-panel .gp-label[data-side=left] { left: 0; }
#mobile .gamepad-panel .gp-label[data-side=right] { right: 0; }
#mobile .gamepad-panel .gp-label button { display: flex; align-items: center; gap: 7px; padding: 6px 0; width: 100%; min-height: 34px; border: 0; border-radius: 3px; background: transparent; color: var(--gp-ink); text-align: left; cursor: pointer; font: 11px/1.35 Inter, sans-serif; }
#mobile .gamepad-panel .gp-label img { width: 22px; height: 22px; object-fit: contain; flex: none; }
#mobile .gamepad-panel .gp-label strong { display: block; color: #8f846f; font: 9px/1.3 Inter, sans-serif; }
#mobile .gamepad-panel .gp-label button:is(.is-highlighted,.is-pressed) { color: #ffe1a5; background: #b78c3520; }
#mobile .gamepad-panel .gp-label button:is(.is-highlighted,.is-pressed) strong { color: #d8b778; }
#mobile .gamepad-panel .gp-aside { min-width: 0; border-left: 1px solid #987a4145; padding: 20px 0 20px 24px; }
#mobile .gamepad-panel .gp-aside h3 { margin: 12px 0; color: #d5bc90; font: 21px/1.45 var(--display, Georgia, serif); font-weight: 400; }
#mobile .gamepad-panel .gp-aside p { color: #a99e8c; font: 11px/1.8 Inter, sans-serif; margin: 0; }
#mobile .gamepad-panel .gp-quickbar { display: flex; gap: 0; padding: 12px 4px; margin: 22px 0; width: max-content; max-width: 100%; border: 4px solid transparent; border-image: url('assets/ui/game/pattern_board_9slice.svg') 32 / 4px / 0 stretch; background: url('assets/ui/game/pattern_board_base.png'); box-shadow: 0 7px 18px #0006; }
#mobile .gamepad-panel .gp-slot { position: relative; display: block; flex: 0 1 32px; width: 32px; height: 32px; padding: 0; border: 0; background: url('assets/ui/game/public_slot_base.png') center/100% 100%; cursor: pointer; }
#mobile .gamepad-panel .gp-slot:nth-child(5) { margin-left: 4px; }
#mobile .gamepad-panel .gp-slot-art { position: absolute; inset: 3px; width: 26px; height: 26px; object-fit: contain; }
#mobile .gamepad-panel .gp-slot-badge { position: absolute; width: 14px; height: 14px; object-fit: contain; left: 0; top: 0; filter: drop-shadow(0 1px 2px #000); }
#mobile .gamepad-panel .gp-slot-number { position: absolute; top: -10px; left: 2px; color: #bcb7a8; font: 8px/1 Tahoma, sans-serif; }
#mobile .gamepad-panel .gp-slot:is(.is-highlighted,.is-pressed) { outline: 1px solid #ecc575; box-shadow: inset 0 0 12px #f2c26770, 0 0 10px #e0b45c55; }
#mobile .gamepad-panel .gp-aside .gp-rebind { color: #c9b68e; }
#mobile .gamepad-panel .gp-aside .gp-status { margin-top: 22px; padding-top: 12px; border-top: 1px solid #8a71332e; color: #8e877a; font-size: 10px; }
#mobile .gamepad-panel .gp-status::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #786d55; margin: 0 7px 1px 0; }
#mobile .gamepad-panel .gp-status.is-connected::before { background: #b7d58b; box-shadow: 0 0 6px #97b76a55; }
@media (max-width: 1199px) {
  #mobile .gamepad-panel .gp-layout { grid-template-columns: minmax(0,1fr); gap: 22px; }
  #mobile .gamepad-panel .gp-diagram { width: min(900px,100%); margin: auto; }
  #mobile .gamepad-panel .gp-aside { width: min(600px,100%); margin: auto; padding: 20px 0 0; border-left: 0; border-top: 1px solid #987a4145; text-align: center; }
  #mobile .gamepad-panel .gp-quickbar { margin: 18px auto; }
}
@media (max-width: 700px) {
  #mobile .gamepad-panel .gp-eyebrow { font-size: 9px; }
  #mobile .gamepad-panel .gp-layout { gap: 22px; }
  #mobile .gamepad-panel .gp-pad { width: 100%; }
  #mobile .gamepad-panel .gp-callouts { display: none; }
  #mobile .gamepad-panel .gp-labels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 12px; margin-top: 10px; }
  #mobile .gamepad-panel .gp-label { position: static; width: auto; transform: none; min-width: 0; }
  #mobile .gamepad-panel .gp-label button { min-height: 34px; padding: 3px; font-size: 11px; border-bottom: 1px solid #a1804020; border-radius: 0; gap: 6px; }
  #mobile .gamepad-panel .gp-label strong { display: inline; margin-right: 5px; font-size: 9px; }
  #mobile .gamepad-panel .gp-label img { width: 20px; height: 20px; }
  #mobile .gamepad-panel .gp-aside { padding-top: 18px; }
  #mobile .gamepad-panel .gp-aside h3 { font-size: 19px; margin: 6px 0; }
  #mobile .gamepad-panel .gp-quickbar { margin-block: 18px; }
  #mobile .gamepad-panel .gp-aside .gp-status { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { #mobile .gamepad-panel .gp-control .gp-surface { transition: none; } }