/* REKT Survivors: shared illustrated menu chrome. Text stays live for localisation. */
:root{
  --ui-flow-panel:url('../assets/ui-flow/panel_frame.webp');
  --ui-flow-button:url('../assets/ui-flow/button_clean_01942.webp');
  --ui-flow-common:url('../assets/ui-flow/rarity_common.webp');
  --ui-flow-rare:url('../assets/ui-flow/rarity_rare.webp');
  --ui-flow-legendary:url('../assets/ui-flow/rarity_legendary.webp');
  --ui-flow-mythic:url('../assets/ui-flow/rarity_mythic.webp');
}

/* Nine-slice edges retain their width as menus grow or their copy is translated. */
#app.ui-playing :is(.panel,.fx-panel,.fx-console,.fx-drawer,.tactics-screen,.gas-workshop,.modal,.caja-modal,.fx-ring-preview,.fx-arena-management),
.login .panel,.capa-modal .caja-modal{
  box-sizing:border-box;
  border:16px solid transparent!important;
  border-image-source:var(--ui-flow-panel)!important;
  border-image-slice:58 60 58 60 fill!important;
  border-image-width:16px!important;
  border-image-repeat:stretch!important;
  border-radius:0!important;
  background:#0b1220!important;
  box-shadow:0 14px 36px #020611a8!important;
}
#app.ui-playing :is(.fx-panel,.fx-drawer,.fx-ring-preview,.fx-arena-management){padding:14px!important}
#app.ui-playing .fx-console{padding:0!important}
#app.ui-playing :is(.fx-weapon-card,.fx-active,.mer-carta,.carta-luchador,.fx-route-options button,.tactics-option,.fx-mat,.fx-ticket-strip>div){
  border:1px solid #456177!important;
  border-radius:3px!important;
  background:linear-gradient(155deg,#1a2b3b 0%,#101a2a 45%,#0a1321 100%)!important;
  box-shadow:inset 0 1px #b4f4ff20,0 4px 14px #0005!important;
}

/* Reusable metal controls. The hero sprite is reserved for main actions. */
#app.ui-playing :is(.fx-tool,.fx-tabs button,.fx-floors button,.fx-drawer button,.fx-card-actions button,.tactics-footer button),
.ui-sidebar nav button,.caja-modal button{
  border-radius:3px!important;
  border:1px solid #4b7285!important;
  background:linear-gradient(165deg,#22384b,#111f30 48%,#0b1726)!important;
  color:#e8f7ff!important;
  box-shadow:inset 0 1px #91e8f33d,0 3px 10px #0008!important;
  transition:filter .16s ease,transform .16s ease,border-color .16s ease;
}
#app.ui-playing :is(.fx-tool,.fx-tabs button,.fx-floors button,.fx-drawer button,.fx-card-actions button,.tactics-footer button):hover:not(:disabled),
.ui-sidebar nav button:hover:not(:disabled),.caja-modal button:hover:not(:disabled){filter:brightness(1.18);border-color:#75eaff!important}
#app.ui-playing :is(.fx-tool,.fx-tabs button,.fx-floors button,.fx-drawer button,.fx-card-actions button,.tactics-footer button):active:not(:disabled),
.ui-sidebar nav button:active:not(:disabled),.caja-modal button:active:not(:disabled){transform:translateY(1px)}
#app.ui-playing :is(.fx-primary,.fx-ring-fight,.fx-selected-weapon .fx-card-actions>button:first-child),
.menu-acciones .grande,.tactics-footer .primario{
  position:relative;
  min-height:62px!important;
  padding:13px 24px 13px max(82px,22%)!important;
  background:var(--ui-flow-button) center/100% 100% no-repeat!important;
  border:0!important;
  border-radius:0!important;
  color:#f2fbff!important;
  font-family:var(--titulo),sans-serif!important;
  font-weight:900!important;
  text-shadow:0 2px 3px #000,0 0 10px #00d8ff88;
  box-shadow:none!important;
}
#app.ui-playing :is(.fx-primary,.fx-ring-fight,.fx-selected-weapon .fx-card-actions>button:first-child):hover:not(:disabled),
.menu-acciones .grande:hover:not(:disabled),.tactics-footer .primario:hover:not(:disabled){filter:brightness(1.2) drop-shadow(0 0 8px #32dfff55)}

/* The rarity art never contains text; every language uses the same asset. */
#app.ui-playing :is(.badge.rareza-l,.rareza,.fx-stage-rarity),
#app.ui-playing .badge.nft,
#app.ui-playing .fx-weapon-title span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:35px;
  min-width:102px;
  padding:6px 18px!important;
  border:0!important;
  border-radius:0!important;
  background:var(--ui-flow-common) center/100% 100% no-repeat!important;
  color:#e9f9ff!important;
  font-weight:800!important;
  text-shadow:0 1px 3px #000;
  box-shadow:none!important;
}
#app.ui-playing :is(.r-rara,.nft-raro).rareza,
#app.ui-playing :is(.r-rara,.nft-raro).badge,
#app.ui-playing .fx-weapon-card.r-rara .fx-weapon-title span{background-image:var(--ui-flow-rare)!important}
#app.ui-playing :is(.r-legendaria,.nft-legendario).rareza,
#app.ui-playing :is(.r-legendaria,.nft-legendario).badge,
#app.ui-playing .fx-weapon-card.r-legendaria .fx-weapon-title span{background-image:var(--ui-flow-legendary)!important}
#app.ui-playing :is(.r-mitica,.nft-mitico).rareza,
#app.ui-playing :is(.r-mitica,.nft-mitico).badge,
#app.ui-playing .fx-weapon-card.r-mitica .fx-weapon-title span{background-image:var(--ui-flow-mythic)!important}

#app.ui-playing :is(.fx-warning,.fx-notice,.fx-console-notice,.nota.error){
  border:12px solid transparent!important;
  border-image-source:var(--ui-flow-panel)!important;
  border-image-slice:58 60 58 60 fill!important;
  border-image-width:12px!important;
  border-radius:0!important;
  background:#101b2a!important;
  padding:8px 12px!important;
}
#app.ui-playing :is(button,[role=button],a):focus-visible,.caja-modal :is(button,[role=button],a):focus-visible{outline:3px solid #8df4ff!important;outline-offset:3px}
@media(max-width:700px){
  #app.ui-playing :is(.panel,.fx-panel,.fx-console,.fx-drawer,.tactics-screen,.gas-workshop,.modal,.caja-modal,.fx-ring-preview,.fx-arena-management),.login .panel,.capa-modal .caja-modal{border-width:12px!important;border-image-width:12px!important}
  #app.ui-playing :is(.fx-panel,.fx-drawer,.fx-ring-preview,.fx-arena-management){padding:10px!important}
  #app.ui-playing :is(.fx-primary,.fx-ring-fight,.fx-selected-weapon .fx-card-actions>button:first-child),.menu-acciones .grande,.tactics-footer .primario{min-height:56px!important;padding-left:max(67px,20%)!important;font-size:clamp(14px,3vw,20px)!important}
}
@media(prefers-reduced-motion:reduce){#app.ui-playing button,.ui-sidebar nav button,.caja-modal button{transition:none!important}}