/* WARFRONT v4.97.3 — UNIVERSAL ROYAL UI PREVIEW
   Responsive presentation-only. The original nav buttons keep their own
   listeners; game, XP, auth, campaign, commander and PvP logic unchanged.
   Approved v4.87 art is used on PC and landscape as well as portrait.
   Load last; never duplicate, replace or proxy gameplay controls. */

#wf4555-menu.wf486-mobile .wf486-more-toggle {
  display:flex!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
}

/* Approved art on ALL devices, not only the old (max-width:690px) portrait.
   Each image contains its title, icon and gold frame. Never draw a duplicate. */
#wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-button:is(
  [data-rc5="campaign"],[data-rc5="battle"],[data-rc5="builder"],
  [data-rc5="commanders"],[data-rc5="duel"],[data-rc5="leaderboard"],
  [data-rc5="friends"]), 
#wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .wf486-more-toggle {
  position:relative!important;
  box-sizing:border-box!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:100% 100%!important;
  border:0!important;
  border-radius:9px!important;
  padding:0!important;
  box-shadow:0 5px 14px #080311bf!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
#wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-button[data-rc5="campaign"]{background-image:url('/wf487-campaign.webp')!important}
#wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-button[data-rc5="battle"]{background-image:url('/wf487-battle.webp')!important}
#wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-button[data-rc5="builder"]{background-image:url('/wf487-builder.webp')!important}
#wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-button[data-rc5="commanders"]{background-image:url('/wf487-commanders.webp')!important}
#wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-button[data-rc5="duel"]{background-image:url('/wf487-duel.webp')!important}
#wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-button[data-rc5="leaderboard"]{background-image:url('/wf487-leaderboard.webp')!important}
#wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-button[data-rc5="friends"]{background-image:url('/wf487-friends.webp')!important}
#wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .wf486-more-toggle{background-image:url('/wf487-more.webp')!important}
#wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile :is(
  .rc5-button[data-rc5="campaign"],.rc5-button[data-rc5="battle"],
  .rc5-button[data-rc5="builder"],.rc5-button[data-rc5="commanders"],
  .rc5-button[data-rc5="duel"],.rc5-button[data-rc5="leaderboard"],
  .rc5-button[data-rc5="friends"],.wf486-more-toggle
) :is(.rc5-icon,.rc5-text) {
  opacity:0!important;
  pointer-events:none!important;
}
/* The old extra stamp overlaps the artwork unless suppressed everywhere. */
#wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile
  .rc5-button .rc5-icon.wf4862-approved-art {
  display:none!important;background:none!important;
}
#wf4555-menu.wf486-mobile .rc5-button:focus-visible,
#wf4555-menu.wf486-mobile .wf486-more-toggle:focus-visible {
  outline:3px solid #ffe3ab!important;outline-offset:3px!important;
}
#wf4555-menu.wf486-mobile .rc5-button:is(:hover,:active),
#wf4555-menu.wf486-mobile .wf486-more-toggle:is(:hover,:active) {
  filter:brightness(1.13)!important;
}

/* Desktop / tablet landscape / wide browser window:
   SAME eight approved action images, with one unified responsive grid. */
@media (min-width:691px) {
  html body #uiHome.wf391-ready #wf391-home.wf4555-loaded{
    display:block!important;
    width:100%!important;max-width:100vw!important;
    height:auto!important;min-height:100svh!important;
    max-height:none!important;overflow-x:clip!important;overflow-y:auto!important;
    padding:0!important;margin:0!important;
  }
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile {
    display:flex!important;flex-direction:column!important;
    justify-content:flex-start!important;align-items:stretch!important;
    gap:clamp(9px,1.8vh,20px)!important;
    width:100%!important;max-width:100vw!important;
    height:auto!important;min-height:100svh!important;max-height:none!important;
    padding:clamp(10px,1.6vw,25px) clamp(10px,2vw,32px) 24px!important;
    overflow-x:clip!important;overflow-y:visible!important;
    border:0!important;border-radius:0!important;
    background:linear-gradient(180deg,#09051291 0%,#12091a20 28%,#0a0813ba 100%),
       url('/wf487-citadel-background.webp') center top / cover no-repeat,#110b1b!important;
    color:#ffe4b4!important;
    box-shadow:none!important;
  }
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile::before{display:none!important}
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-header {
    position:relative!important;inset:auto!important;
    display:grid!important;grid-template-columns:minmax(130px,1fr) minmax(0,2fr) minmax(130px,1fr)!important;
    align-items:start!important;min-height:76px!important;
    width:min(1220px,100%)!important;margin:0 auto!important;
    gap:12px!important;
  }
  #wf4555-menu.wf486-mobile .rc5-header-right{display:none!important}
  #wf4555-menu.wf486-mobile .rc5-user{
    position:relative!important;top:auto!important;left:auto!important;
    justify-self:start!important;align-self:start!important;
    width:auto!important;max-width:240px!important;min-width:0!important;
    height:auto!important;min-height:47px!important;
    padding:6px 9px!important;overflow:hidden!important;
    background:#180e25e8!important;
    border:1px solid #d7af74!important;border-radius:12px!important;
  }
  #wf4555-menu.wf486-mobile .rc5-username{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  #wf4555-menu.wf486-mobile .rc5-brand{
    position:relative!important;grid-column:2!important;justify-self:center!important;
    padding:0!important;margin:0!important;
    text-align:center!important;align-items:center!important;
    max-width:100%!important;min-width:0!important;
  }
  #wf4555-menu.wf486-mobile .rc5-brand h1 {
    font:700 clamp(31px,4.4vw,64px)/1.02 Georgia,serif!important;
    color:#ffe1a6!important;letter-spacing:.11em!important;
    white-space:normal!important;overflow-wrap:anywhere!important;
  }
  #wf4555-menu.wf486-mobile .rc5-subtitle{
    font:700 clamp(10px,1.3vw,15px) Georgia,serif!important;
    letter-spacing:.24em!important;color:#f2d19d!important;
  }
  #wf4555-menu.wf486-mobile .rc5-brand-note{margin:2px 0 0!important;font-size:10px!important}
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-world {
    display:grid!important;flex:1 0 auto!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-areas:
      "hero hero hero hero"
      "campaign battle builder commanders"
      "duel leaderboard friends more"!important;
    grid-auto-rows:min-content!important;grid-auto-flow:row!important;
    align-items:stretch!important;align-content:start!important;
    gap:clamp(8px,1.15vw,17px)!important;
    width:min(1220px,100%)!important;min-width:0!important;
    height:auto!important;min-height:0!important;
    padding:0!important;margin:0 auto!important;
  }
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile :is(
    .rc5-side,.rc5-center,.rc5-main-actions){
    display:contents!important;
  }
  #wf4555-menu.wf486-mobile .rc5-scene {
    grid-area:hero!important;display:block!important;
    width:100%!important;
    min-height:clamp(100px,20svh,260px)!important;
    height:clamp(100px,20svh,260px)!important;
    max-height:none!important;
    padding:0!important;margin:0!important;
    pointer-events:none!important;
  }
  #wf4555-menu.wf486-mobile .rc5-scene-label{display:none!important}
  #wf4555-menu.wf486-mobile .rc5-button[data-rc5="campaign"]{grid-area:campaign!important}
  #wf4555-menu.wf486-mobile .rc5-button[data-rc5="battle"]{grid-area:battle!important}
  #wf4555-menu.wf486-mobile .rc5-button[data-rc5="builder"]{grid-area:builder!important}
  #wf4555-menu.wf486-mobile .rc5-button[data-rc5="commanders"]{grid-area:commanders!important}
  #wf4555-menu.wf486-mobile .rc5-button[data-rc5="duel"]{grid-area:duel!important}
  #wf4555-menu.wf486-mobile .rc5-button[data-rc5="leaderboard"]{grid-area:leaderboard!important}
  #wf4555-menu.wf486-mobile .rc5-button[data-rc5="friends"]{grid-area:friends!important}
  #wf4555-menu.wf486-mobile .wf486-more-toggle{grid-area:more!important}
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-button:is(
    [data-rc5="campaign"],[data-rc5="battle"],
    [data-rc5="builder"],[data-rc5="commanders"]) {
    display:block!important;width:100%!important;min-width:0!important;
    height:clamp(124px,22vh,226px)!important;min-height:124px!important;
    max-height:none!important;
  }
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-button:is(
    [data-rc5="duel"],[data-rc5="leaderboard"],[data-rc5="friends"]),
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .wf486-more-toggle {
    display:flex!important;width:100%!important;min-width:0!important;
    min-height:70px!important;height:clamp(70px,11svh,115px)!important;
    max-height:none!important;align-items:center!important;justify-content:center!important;
  }
  #wf4555-menu.wf486-mobile .rc5-footer {
    width:min(1220px,100%)!important;min-width:0!important;
    margin:0 auto!important;padding:0 0 8px!important;
    flex:none!important;
  }
  /* Remove stale test stamps on desktop: this is the 4.97.3 UI preview. */
  #wf4555-menu.wf486-mobile .rc5-version{
    font-size:0!important;color:transparent!important;
    border:0!important;background:transparent!important;
  }
  #wf4555-menu.wf486-mobile .rc5-version::after{
    content:'WARFRONT v4.97.3 · UNIVERSAL ROYAL UI TEST'!important;
    color:#ebc892!important;font:700 11px Georgia,serif!important;
    letter-spacing:.08em!important;
  }
  /* Existing "More" controller already owns the account and archives actions.
     Keep its *original* DOM nodes instead of recreating menu buttons. */
  #wf4881-more-drawer {align-items:center!important}
  #wf4881-more-drawer .wf4881-sheet{width:min(720px,100%)!important;max-height:min(86svh,850px)!important}
  #wf4881-more-drawer .wf4881-options{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;
  }
  #wf4881-more-drawer .wf4881-option{min-height:60px!important}
}
@media(min-width:691px) and (max-width:850px){
  #wf4555-menu.wf486-mobile .rc5-brand h1{font-size:clamp(26px,5vw,42px)!important}
  #wf4555-menu.wf486-mobile .rc5-user{max-width:165px!important}
  #wf4555-menu.wf486-mobile .rc5-user-symbol{width:30px!important;height:30px!important;flex-basis:30px!important}
  #wf4555-menu.wf486-mobile .rc5-user-info small{font-size:9px!important}
  #wf4555-menu.wf486-mobile .rc5-username{font-size:12px!important}
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-button:is(
    [data-rc5="campaign"],[data-rc5="battle"],[data-rc5="builder"],[data-rc5="commanders"]){
    min-height:110px!important;height:clamp(110px,21svh,158px)!important;
  }
}

/* Low-height landscape tablets / horizontal phones / short PC windows. */
@media(min-width:691px) and (orientation:landscape) and (max-height:550px){
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile{
    padding:6px 10px 12px!important;gap:6px!important;
  }
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-header{
    min-height:45px!important;gap:5px!important;
  }
  #wf4555-menu.wf486-mobile .rc5-user{min-height:38px!important;padding:4px 7px!important}
  #wf4555-menu.wf486-mobile .rc5-user-symbol{
    width:29px!important;height:29px!important;flex-basis:29px!important;
    font-size:20px!important;
  }
  #wf4555-menu.wf486-mobile .rc5-brand h1{font-size:28px!important}
  #wf4555-menu.wf486-mobile .rc5-brand-note,
  #wf4555-menu.wf486-mobile .rc5-crown{display:none!important}
  #wf4555-menu.wf486-mobile .rc5-subtitle{font-size:10px!important}
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-world{gap:7px!important}
  #wf4555-menu.wf486-mobile .rc5-scene{
    height:clamp(25px,9svh,55px)!important;min-height:25px!important;
  }
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-button:is(
    [data-rc5="campaign"],[data-rc5="battle"],[data-rc5="builder"],[data-rc5="commanders"]) {
    height:clamp(95px,23svh,135px)!important;min-height:95px!important;
  }
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-button:is(
    [data-rc5="duel"],[data-rc5="leaderboard"],[data-rc5="friends"]),
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .wf486-more-toggle{
    height:clamp(58px,13svh,70px)!important;min-height:58px!important;
  }
  #wf4555-menu.wf486-mobile .rc5-footer{padding:0!important}
}

/* Narrow landscape (usually rotation on small phones): retain the proven
   compact 2x2 mobile structure, replace only old art/assets. */
@media(orientation:landscape) and (max-width:690px){
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile{
    background:linear-gradient(180deg,#0b071596,#11081bbb),
       url('/wf487-citadel-background.webp') center top / cover no-repeat!important;
  }
  #wf4555-menu.wf486-mobile .rc5-scene{height:15px!important;min-height:15px!important}
  #wf4555-menu.wf486-mobile .rc5-version::after{
    content:'WARFRONT v4.97.3 · LANDSCAPE UI TEST'!important;
  }
}

/* Ensure long lists and official dialogs remain reachable on desktop and
   landscape. Never reposition battlefield sprites / canvas. */
@media(min-width:701px){
  html body :is(#wf394,#wf157Overlay,#wf440-campaign,#wf443-pve-choice,#wf409-account)
  :is(.wf-shell,.wf-pane,.wf-main,.wf-dialog,.wf-list,.wf-grid) {
    box-sizing:border-box!important;min-width:0!important;max-width:100%!important;
  }
  html body :is(#wf394,#wf157Overlay,#wf440-campaign,#wf443-pve-choice,#wf409-account)
  :is(button,input,select,textarea){
    box-sizing:border-box!important;max-width:100%!important;touch-action:manipulation!important;
  }
  #wf443-pve-choice:not([hidden]) #wf443-pve-panel{
    width:min(900px,calc(100vw - 26px))!important;
    max-height:calc(100dvh - 26px)!important;
    overflow-y:auto!important;
  }
  #wf157Overlay:not([hidden]){max-width:100vw!important;max-height:100dvh!important;overflow-y:auto!important}
  #wf440-campaign:not([hidden]){max-width:100vw!important;max-height:100dvh!important;overflow-y:auto!important}
  #wf409-account:not([hidden]){max-width:100vw!important;max-height:100dvh!important;overflow-y:auto!important}
  #wf457-overlay:not([hidden]) .wf457-dialog{
    width:min(1250px,calc(100vw - 28px))!important;
    max-height:calc(100dvh - 28px)!important;min-width:0!important;
    overflow-y:auto!important;
  }
}
/* Hidden means hidden on every viewport, even if a stronger old display rule exists. */
#wf4555-menu [hidden],#wf4881-more-drawer[hidden] {display:none!important}

/* One real version label on PC, portrait and landscape. Hide obsolete
   :after text which contained older build names. */
#wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-version{
  display:block!important;visibility:visible!important;
  padding:6px 12px!important;margin:0 auto!important;
  font:700 10px/1.2 Georgia,serif!important;
  letter-spacing:.09em!important;
  color:#ebc892!important;text-align:center!important;
  background:#180c27bb!important;
  border:1px solid #d3a36f66!important;border-radius:99px!important;
}
#wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile .rc5-version::after{
  content:none!important;display:none!important;
}
/* Old desktop menus injected a fake 'Friends / Account' text strip. */
@media(min-width:691px){
  #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile
  .rc5-side::after, #wf391-home.wf4555-loaded #wf4555-menu.wf486-mobile
  .rc5-side::before{content:none!important;display:none!important}
}
/* The More dialog must NOT inherit invisible text from image-backed tiles. */
#wf4881-more-drawer .wf4881-option :is(.rc5-icon,.rc5-text){
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
}