/* ============================================================
   css/ux-simplify-a.css  (UX simplify A)
   Solo presentación (ninguna opción se quita): Pausa con "Continuar" fijo y secciones plegables, toasts que no
   tapan los botones de fin, zonas táctiles >= 44 px, Opciones con salto a Accesibilidad, y textos largos (PT)
   sin partir palabras ni cortar con elipsis. Se carga tras title-polish.css.
   ============================================================ */

/* ---------- 1. PAUSA: título + cuerpo con scroll + barra fija de acciones ---------- */
html body #pause-screen.screen:not(.hidden){
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  padding:max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  box-sizing:border-box; overflow:hidden; }
html body #pause-screen .pause-panel{
  display:flex; flex-direction:column; gap:0; width:min(100%, 680px); max-width:680px; max-height:100%; height:auto;
  padding:0; overflow:hidden; justify-self:center; margin:0; }
html body #pause-screen .pause-panel > .arena-title{ flex:none; margin:0; padding:10px 14px 6px; font-size:22px; line-height:1.1; text-align:center; border-bottom:1px solid #4a2a16; }
html body #pause-screen .pause-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:6px; padding:8px 14px; }
html body #pause-screen .pause-body > *{ flex:none; margin:0; }
html body #pause-screen .pause-actions{ flex:none; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:8px; padding:8px 14px 10px;
  background:#140a06; border-top:2px solid var(--ember1,#ff7a2e); position:relative; z-index:2; }
html body #pause-screen .pause-actions > .btn, html body #pause-screen .pause-btnrow > .btn{ grid-row:auto !important; }
html body #pause-screen .pause-actions > .btn{ grid-column:auto !important; }
html body #pause-screen .pause-btnrow > .btn:not(#pause-a11y-btn){ grid-column:auto !important; }
html body #pause-screen .pause-actions .btn{ width:100%; max-width:none; min-height:48px; margin:0; font-size:16px; }
html body #pause-screen .pause-actions #resume-btn{ min-height:52px; font-size:18px; }
html body #pause-screen .pause-actions #quit-btn{ font-size:14px; }
html body #pause-screen .pause-note{ display:block; font-size:12px; line-height:1.35; }
/* la ficha táctica ya no es una columna aparte: son secciones apiladas dentro del cuerpo */
html body #pause-screen #tactical-panel{ width:100% !important; height:auto !important; max-height:none !important; overflow:visible !important; margin:0 !important;
  grid-column:auto !important; grid-row:auto !important; display:flex; flex-direction:column; gap:6px; }
html body #pause-screen #tactical-panel .tp-head{ margin:0; }
html body #pause-screen #tactical-panel .tp-name{ font-size:20px; line-height:1.15; }
html body #pause-screen #tactical-panel .tp-bars{ font-size:14px; margin-top:2px; }
html body #pause-screen #tactical-panel .tp-section{ margin:0; padding:0; }
/* acordeón */
.pause-acc{ background:rgba(20,12,8,.78); border:1px solid #4a2a16; border-radius:8px; text-align:left; }
.pause-acc-h{ display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:6px 10px; box-sizing:border-box; cursor:pointer;
  background:transparent; border:0; color:#ffe3b8; font:inherit; text-align:left; }
.pause-acc-h::after{ content:""; margin-left:auto; flex:none; width:8px; height:8px; border-right:3px solid #d9a66a; border-bottom:3px solid #d9a66a; transform:rotate(45deg) translate(-2px,-2px); transition:transform .12s steps(3,end); }
.pause-acc.open > .pause-acc-h::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.pause-acc-h:focus-visible{ outline:2px solid #ffcf5c; outline-offset:-2px; }
.pause-acc-t{ font-family:var(--font-pixel, var(--font-retro)); font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#e9b878; flex:none; }
.pause-acc-sub{ font-size:12px; color:#cdb6a1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pause-acc-sub:empty{ display:none; }
/* plegado: la altura baja a 0 pero el contenido sigue en el DOM (nada se quita) */
.pause-acc-b{ height:0; overflow:hidden; padding:0 10px; box-sizing:border-box; }
.pause-acc.open > .pause-acc-b{ height:auto; overflow:visible; padding:2px 10px 10px; }
body.reduce-motion .pause-acc-h::after{ transition:none; }
#pause-help-arena .tp-help{ margin-top:8px; }
#pause-help-arena:empty{ display:none; }
html body #pause-screen .pause-audio{ grid-template-columns:1fr 1fr; margin:0 0 8px; }
html body #pause-screen .pause-audio .pause-motion{ grid-column:1 / -1; }
html body #pause-screen .pause-audio label{ min-height:44px; }
html body #pause-screen .pause-audio label.pause-motion{ gap:10px; padding-right:2px; }
html body #pause-screen .pause-audio input[type=range]{ min-height:44px; }
html body #pause-screen .pause-btnrow{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0; }
html body #pause-screen .pause-btnrow #pause-a11y-btn{ grid-column:1 / -1; }
html body #pause-screen .pause-btnrow .btn{ min-height:44px; font-size:13px; }
html body #pause-screen #stats-panel{ max-width:none; max-height:none; overflow:visible; margin:0; width:100%; }
@media (max-height:520px){
  html body #pause-screen.screen:not(.hidden){ padding:max(4px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  html body #pause-screen .pause-panel{ width:min(100%, 720px); max-width:720px; }
  html body #pause-screen .pause-panel > .arena-title{ padding:5px 12px 3px; font-size:18px; }
  html body #pause-screen .pause-body{ padding:6px 12px; gap:5px; }
  html body #pause-screen .pause-actions{ padding:6px 12px 7px; }
  html body #pause-screen .pause-actions .btn{ min-height:44px; font-size:15px; }
  html body #pause-screen .pause-actions #resume-btn{ min-height:46px; font-size:17px; }
  html body #pause-screen .pause-note{ display:none; }
  html body #pause-screen.tactical-live .pause-note{ display:block; font-size:11px; line-height:1.25; }
  html body #pause-screen #tactical-panel .tp-name{ font-size:17px; }
  html body #pause-screen #tactical-panel .tp-sub{ font-size:12px; }
  html body #pause-screen #tactical-panel .tp-bars{ font-size:13px; }
  html body #pause-screen .pause-audio{ gap:0 14px; }
  html body #pause-screen .pause-audio .pause-motion{ grid-column:auto; }
}
html body #pause-screen.tactical-live .pause-panel{ background:linear-gradient(160deg,rgba(36,19,9,.94),rgba(18,10,7,.94)); }

/* ---------- 2. PANTALLAS DE FIN: los avisos no tapan "Continuar" / "Volver al menú" ---------- */
#toast-stack.end, #toast-stack.end *{ pointer-events:none; }
@media (max-height:520px){
  #toast-stack.end{ width:min(150px, 22vw); max-height:64px; right:calc(8px + env(safe-area-inset-right, 0px)); }
  #toast-stack.end .qs-toast-head, #toast-stack.end .qs-toast-sub{ display:none; }
  #toast-stack.end .qs-toast{ padding:3px 6px; gap:6px; }
  #toast-stack.end .qs-toast-ico{ width:22px; height:22px; }
  #toast-stack.end .qs-toast-name{ font-size:.9rem; }
  #toast-stack.end #loot-toasts{ width:min(150px, 22vw); max-width:150px; left:calc(8px + env(safe-area-inset-left, 0px)); }
}
body.lefty #toast-stack.end{ right:auto; left:calc(8px + env(safe-area-inset-left, 0px)); }

/* ---------- 3. ZONAS TÁCTILES >= 44 px ---------- */
#mainmenu-screen .hub-top .ui-icon-btn{ width:44px; min-width:44px; min-height:44px; }
@media (max-width:900px){ #mainmenu-screen .hub-top .ui-icon-btn{ width:44px; min-width:44px; } }
#mainmenu-screen #mainmenu-back-btn{ margin-left:12px; }          /* ⏏ separado de ⚙ */
#hub-options input:not([type]), #hub-options input[type=text], #hub-options select,
#hub-options label.opt-row input:not([type]), #hub-options label.opt-row select{ min-height:44px; box-sizing:border-box; }
#hub-options input[type=range], #hub-options label.opt-row input[type=range]{ min-height:44px; height:44px; }
#hub-options .opt-row input[type=range]{ touch-action:pan-y; }
#bp-screen .btn.small, #bp-screen .bp-foot .btn, #bp-screen .mpc-cta-row .btn{ min-height:44px; min-width:88px; font-size:13px; padding:6px 16px; }
@media (max-height:520px){ #bp-screen .bp-foot .btn, #bp-screen .btn.small{ min-height:44px; } }
#pause-screen input[type=range]{ min-height:44px; }

/* ---------- 4. OPCIONES: salto a Accesibilidad y resumen ---------- */
.opt-jump{ display:flex; flex-wrap:wrap; gap:6px; margin:0 -14px 6px; padding:6px 14px; background:#1b0f09; border-bottom:1px solid #3a2415; }
.opt-jump button{ min-height:44px; min-width:44px; flex:1 1 auto; padding:4px 12px; font:inherit; font-size:14px; color:#ffe6a8; background:#2a1a10; border:2px solid #000; border-radius:4px; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,190,110,.25); }
.opt-jump button.opt-jump-a11y{ background:#5a3212; border-color:#d9b25a; }
.opt-jump button:focus-visible{ outline:2px solid #ffcf5c; outline-offset:2px; }
#hub-options .ui-modal-panel > .ui-panel-title{ position:sticky; top:0; }
#hub-options .opt-sec{ scroll-margin-top:60px; }
#hub-options #opt-sec-a11y{ color:#ffd98a; border-bottom:2px solid #d9b25a; padding-bottom:3px; }
.opt-a11y-sum{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 6px; font-size:12px; color:#cdb6a1; }
.opt-a11y-sum .oas-k{ color:#d2bba6; }
.opt-a11y-sum .oas-chip{ padding:2px 8px; border:1px solid #d9b25a; background:#3a210f; color:#ffe6a8; border-radius:10px; }
.opt-flash{ animation:optFlash 1.1s steps(4,end) 1; }
@keyframes optFlash{ 0%,60%{ background:rgba(255,207,92,.28); } 100%{ background:transparent; } }
body.reduce-motion .opt-flash{ animation:none; }

/* ---------- 5. TEXTOS LARGOS (PT/EN): sin partir palabras ni elipsis donde falta información ---------- */
.cx-home-title{ overflow-wrap:normal; word-break:keep-all; hyphens:manual; -webkit-hyphens:manual; font-size:max(12px, clamp(11px, 1.6vw, 0.78rem)); letter-spacing:0; gap:5px; min-width:0; }
.cx-home-title > span, .cx-home-title > b{ overflow-wrap:normal; min-width:0; }
#mainmenu-screen .hub-endless-sub, .hub-endless-sub{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.2;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
html body .cx-card-title, html body .champ-title.cx-card-title{ white-space:normal; overflow:hidden; text-overflow:clip; line-height:1.15;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
html body .shop-item-sub, html body .shop-deal .shop-item-sub, html body .shop-bundle .shop-item-sub, html body .shop-rot-meta .shop-item-sub, html body .brasas-what-card .shop-item-sub{
  white-space:normal; overflow:hidden; text-overflow:clip; line-height:1.25;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
html body .shop-hero-title{ font-size:max(12px, 0.74rem); }
@media (max-height:520px){ html body .shop-hero-title{ font-size:max(12px, 0.9rem); } }

/* avisos durante la pausa: arriba a la derecha, chicos (antes quedaban en el centro sobre el título) */
body:has(#pause-screen:not(.hidden)) #toast-stack:not(.play):not(.end){ left:auto; right:calc(8px + env(safe-area-inset-right, 0px)); transform:none; width:min(190px, 26vw); top:calc(6px + env(safe-area-inset-top, 0px)); }
body:has(#pause-screen:not(.hidden)) #toast-stack .qs-toast-head, body:has(#pause-screen:not(.hidden)) #toast-stack .qs-toast-sub{ display:none; }