/* Thumb Arc V.54: image assets and positions for touch controls only. */
@media (pointer: coarse) {
  body.playing #mobile-controls .mobile-actions {
    --arc-key: clamp(46px, 13.5vh, 58px);
    /* 1.7 was the V.52 fire diameter. This is exactly 25% larger. */
    --arc-fire: calc(var(--arc-key) * 1.7 * 1.25);
    display: block;
    width: calc(var(--arc-key) * 4.55);
    height: calc(var(--arc-key) * 3.35);
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    left: auto;
    transform: none;
    pointer-events: none;
  }

  body.playing #mobile-controls .mobile-actions button,
  body.playing #mobile-controls .mobile-actions #dash-skill,
  body.playing #mobile-controls .mobile-actions #ultimate-skill {
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: var(--arc-key);
    height: var(--arc-key);
    min-height: var(--arc-key);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: none;
    clip-path: none;
    opacity: 1;
    pointer-events: auto;
    touch-action: none;
  }

  body.playing #mobile-controls .mobile-actions button::after { content: none; }
  body.playing #mobile-controls .mobile-actions .touch-icon,
  body.playing #mobile-controls .mobile-actions .weapon-touch-icon,
  body.playing #mobile-controls .mobile-actions .skill-dock > button > img { display: none; }

  body.playing #mobile-controls .mobile-actions #ultimate-skill {
    left: auto; right: calc(var(--arc-key) * 3.30);
    top: auto; bottom: 0;
    background-image: url('assets/mobile-v54/bunny-hop.png') !important;
    background-size: 143% 143%;
  }
  body.playing #mobile-controls .mobile-actions #dash-skill {
    left: auto; right: calc(var(--arc-key) * 2.0);
    top: auto; bottom: 0;
    background-image: url('assets/mobile-v54/dash.png') !important;
    background-size: 140% 140%;
  }
  body.playing #mobile-controls .mobile-actions [data-mobile=jump] {
    left: auto; right: calc(var(--arc-key) * 1.80);
    top: auto; bottom: calc(var(--arc-key) * 1.30);
    background-image: url('assets/mobile-v54/jump.png') !important;
    background-size: 183% 183%;
  }
  body.playing #mobile-controls .mobile-actions [data-mobile=grenade] {
    left: auto; right: calc(var(--arc-key) * .22);
    top: auto; bottom: calc(var(--arc-key) * 2.15);
    background-image: url('assets/mobile-v54/grenade.png') !important;
    background-size: 160% 160%;
  }
  body.playing #mobile-controls .mobile-actions [data-mobile=fire] {
    left: auto; right: calc(var(--arc-key) * -.25);
    top: auto; bottom: 0;
    width: var(--arc-fire);
    height: var(--arc-fire);
    min-height: var(--arc-fire);
    border: 0;
    background-color: transparent;
    background-image: url('assets/mobile-v54/fire-p90.png') !important;
    /* Show the entire ring; screen blending lets the battlefield show through
       the dark center of the existing artwork without changing its motif. */
    background-size: contain;
    mix-blend-mode: screen;
    box-shadow: none;
  }
  body.playing #mobile-controls[data-operative=sniper] .mobile-actions #ultimate-skill {
    background-image: url('assets/mobile-v54/sniper-dead-eye.png') !important;
    background-size: 124% 124%;
  }
  body.playing #mobile-controls[data-operative=sniper] .mobile-actions #dash-skill {
    background-image: url('assets/mobile-v54/sniper-roll.png') !important;
    background-size: 124% 124%;
  }
  body.playing #mobile-controls[data-operative=sniper] .mobile-actions [data-mobile=fire] {
    background-image: url('assets/mobile-v54/sniper-fire-50-cal.png') !important;
    background-size: contain;
  }
  body.playing #mobile-controls .mobile-actions button.held,
  body.playing #mobile-controls .mobile-actions [data-mobile=fire].held,
  body.playing #mobile-controls .mobile-actions button.cooldown,
  body.playing #mobile-controls .mobile-actions #ultimate-skill.cooldown,
  body.playing #mobile-controls .mobile-actions #dash-skill.cooldown {
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
  body.playing #mobile-controls .mobile-actions button.held { filter: brightness(1.25); }
  body.playing #mobile-controls .mobile-actions [data-mobile=fire].held {
    background-color: transparent; border: 0; box-shadow: none;
  }
  body.playing #mobile-controls .mobile-actions button.cooldown { opacity: .48; }
  body.playing #mobile-controls .mobile-actions button small {
    right: 0; bottom: 0;
    z-index: 1;
    background: #101923c9;
  }
  body.playing #mobile-controls #mobile-ammo {
    left: auto; right: calc(var(--arc-key) * -.25);
    bottom: -19px;
    width: var(--arc-fire);
    text-align: center;
  }

  /* The visible ring follows the floating joystick. The center remains live. */
  body.playing #move-stick {
    width: clamp(100px, 27vh, 124px);
    height: clamp(100px, 27vh, 124px);
    border: 0;
    background: none;
    opacity: .45;
  }
  body.playing #move-stick.floating { opacity: .85; }
  body.playing #move-stick .joystick-art { display: none; }
  body.playing #move-stick::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 50%;
    background: url('assets/mobile-v54/joystick.png') center / 160% 160% no-repeat;
    -webkit-mask-image: radial-gradient(circle, transparent 0 24%, #000 25%);
    mask-image: radial-gradient(circle, transparent 0 24%, #000 25%);
    pointer-events: none;
  }
  body.playing #stick-knob {
    left: calc(50% - 20px); top: calc(50% - 20px);
    width: 40px; height: 40px;
    border: 1.5px solid #eee9dfc9;
    border-radius: 50%;
    background: #dbd9d044;
    box-shadow: inset 0 0 8px #faf9f44d;
    clip-path: none;
  }

  body.playing .hud #pause {
    min-width: 48px; width: 48px;
    min-height: 48px; height: 48px;
    padding: 0; border: 0;
    background: url('assets/mobile-v54/pause.png') center / 355% 355% no-repeat;
    box-shadow: none;
  }
  body.playing .hud #pause .touch-icon { display: none; }
}