/*
  WARFRONT v4.87 Royal Citadel — approved fantasy mobile menu.
  GENUINE ASSET REPLACEMENT, NOT AN OVERLAY:
  Every existing clickable button paints its own complete approved artwork
  as its CSS background. Its old text/icon elements remain for accessible
  names but are visually hidden. No new clickable layers or image overlays.
  All original game routes, admin verification and extra actions untouched.
*/
@media (max-width:690px) and (orientation:portrait) {
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile{
    background-image:url('/wf487-citadel-background.webp')!important;
    background-color:#151020!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:100% 100%!important;
    border:0!important;
    box-shadow:none!important;
  }
  #wf4555-menu.wf486-mobile .rc5-scene{
    height:clamp(90px,22svh,245px)!important;
    min-height:clamp(90px,22svh,245px)!important;
  }
  /* Existing 2x2 buttons stay full-size & interactive; swap their entire art. */
  #wf4555-menu.wf486-mobile .rc5-button:is(
    [data-rc5="campaign"],[data-rc5="battle"],
    [data-rc5="builder"],[data-rc5="commanders"]){
    border:0!important;
    border-radius:9px!important;
    background-repeat:no-repeat!important;
    background-position:center center!important;
    background-size:100% 100%!important;
    background-color:#140e25!important;
    box-shadow:none!important;
    padding:0!important;gap:0!important;
    overflow:hidden!important;
  }
  #wf4555-menu.wf486-mobile .rc5-button[data-rc5="campaign"]{
    background-image:url('/wf487-campaign.webp')!important;
  }
  #wf4555-menu.wf486-mobile .rc5-button[data-rc5="battle"]{
    background-image:url('/wf487-battle.webp')!important;
  }
  #wf4555-menu.wf486-mobile .rc5-button[data-rc5="builder"]{
    background-image:url('/wf487-builder.webp')!important;
  }
  #wf4555-menu.wf486-mobile .rc5-button[data-rc5="commanders"]{
    background-image:url('/wf487-commanders.webp')!important;
  }
  /* The sprite is built INTO each approved image. Do not render extra badges. */
  #wf4555-menu.wf486-mobile .rc5-button:is(
    [data-rc5="campaign"],[data-rc5="battle"],
    [data-rc5="builder"],[data-rc5="commanders"])
    .rc5-icon{display:none!important;}
  /* Keep original DOM text for accessibility, but not as a second label. */
  #wf4555-menu.wf486-mobile .rc5-button:is(
    [data-rc5="campaign"],[data-rc5="battle"],
    [data-rc5="builder"],[data-rc5="commanders"])
    .rc5-text{opacity:0!important;pointer-events:none!important;}
  /* All four secondary buttons get approved full-button artwork too. */
  #wf4555-menu.wf486-mobile .rc5-button:is(
    [data-rc5="duel"],[data-rc5="leaderboard"],[data-rc5="friends"]),
  #wf4555-menu.wf486-mobile .wf486-more-toggle{
    border:0!important;
    border-radius:9px!important;
    background-position:center!important;
    background-size:100% 100%!important;
    background-repeat:no-repeat!important;
    background-color:#100c1d!important;
    box-shadow:none!important;
    padding:0!important;
    overflow:hidden!important;
  }
  #wf4555-menu.wf486-mobile .rc5-button[data-rc5="duel"]{
    background-image:url('/wf487-duel.webp')!important;
  }
  #wf4555-menu.wf486-mobile .rc5-button[data-rc5="leaderboard"]{
    background-image:url('/wf487-leaderboard.webp')!important;
  }
  #wf4555-menu.wf486-mobile .rc5-button[data-rc5="friends"]{
    background-image:url('/wf487-friends.webp')!important;
  }
  #wf4555-menu.wf486-mobile .wf486-more-toggle{
    background-image:url('/wf487-more.webp')!important;
  }
  #wf4555-menu.wf486-mobile .rc5-button:is(
    [data-rc5="duel"],[data-rc5="leaderboard"],[data-rc5="friends"])
    :is(.rc5-icon,.rc5-text),
  #wf4555-menu.wf486-mobile .wf486-more-toggle
    :is(.rc5-icon,.rc5-text){
    opacity:0!important;pointer-events:none!important;
  }
  #wf4555-menu.wf486-mobile .rc5-button:focus-visible,
  #wf4555-menu.wf486-mobile .wf486-more-toggle:focus-visible{
    outline:3px solid #ffe1a0!important;outline-offset:2px!important;
  }
  #wf4555-menu.wf486-mobile .rc5-button:active,
  #wf4555-menu.wf486-mobile .wf486-more-toggle:active{
    filter:brightness(1.18)!important;
  }
  /* Version note: never touch the login, in-game HUD or saved progress. */
  #wf4555-menu.wf486-mobile .rc5-version:after{
    content:'WARFRONT v4.87 · ROYAL MENU TEST'!important;
    color:#edc98c!important;
  }
}
/* v4.88.2 bugfix: REMOVE (do not overlay) the previous v4.86.2 image slot.
   The v4.87 approved gold frame, symbol and title already exist inside each
   full-tile WebP. A legacy CSS rule with extra specificity forced a second
   sprite image into that tile; this rule defeats it by one additional ID.
   Scope to portrait: landscape deliberately keeps its prior responsive UI. */
@media (max-width:690px) and (orientation:portrait) {
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-button:is(
    [data-rc5="campaign"],[data-rc5="battle"],
    [data-rc5="builder"],[data-rc5="commanders"])
    .rc5-icon.wf4862-approved-art {
      display:none!important;
      background-image:none!important;
    }
  /* Preserve native labels for accessible names; the approved art
     already contains the only visible text. */
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-button:is(
    [data-rc5="campaign"],[data-rc5="battle"],
    [data-rc5="builder"],[data-rc5="commanders"])
    .rc5-text {opacity:0!important;pointer-events:none!important;}
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-version:after {
    content:'WARFRONT v4.88.2 · MOBILE TEST'!important;
  }
}

/* Landscape retains the existing readable adaptive menu/buttons: no squashed
   portrait screenshots, no forced device rotation or handler changes. */