/* Grimwood V20.10.40.19.4 — hotfix selector único de pausa. */

/* El dialog real sigue abierto para conservar la pausa/lógica del juego,
   pero todos sus componentes antiguos quedan ocultos. */
#panel[data-kind="pause"].gwp193-mounted{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
  transform:none!important;
  opacity:1!important;
  color:#f4f0e8!important;
}
#panel[data-kind="pause"].gwp193-mounted::before,
#panel[data-kind="pause"].gwp193-mounted::after{
  content:none!important;
  display:none!important;
}
#panel[data-kind="pause"].gwp193-mounted::backdrop{
  background:rgba(0,0,0,.58)!important;
  backdrop-filter:brightness(.64) saturate(.72) contrast(1.04)!important;
}
#panel[data-kind="pause"].gwp193-mounted>.panel-header,
#panel[data-kind="pause"].gwp193-mounted>#panel-portrait,
#panel[data-kind="pause"].gwp193-mounted>#panel-body,
#panel[data-kind="pause"].gwp193-mounted>#panel-detail,
#panel[data-kind="pause"].gwp193-mounted>#panel-footer{
  display:none!important;
}

/* Pantalla dedicada de PAUSA. Al ser fixed no hereda las proporciones
   ni la rejilla del panel genérico. */
#panel[data-kind="pause"]>.gwp193-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  display:grid!important;
  place-items:center!important;
  width:100vw!important;
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:transparent!important;
  pointer-events:auto!important;
  transform:none!important;
  zoom:1!important;
  isolation:isolate!important;
}

#panel[data-kind="pause"] .gwp193-stage{
  position:relative!important;
  width:min(700px,92vw,calc((100dvh - 18px) * .7954545455))!important;
  aspect-ratio:700 / 880!important;
  height:auto!important;
  max-height:calc(100dvh - 18px)!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  transform-origin:center!important;
  overflow:visible!important;
  outline:none!important;
  filter:drop-shadow(0 24px 46px rgba(0,0,0,.78))!important;
  user-select:none!important;
  contain:layout style!important;
}

/* Importante: el marco ya NO es un <img>. Así evitamos que reglas globales
   del juego lo reduzcan de tamaño independientemente del menú. */
#panel[data-kind="pause"] .gwp193-frame{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  width:100%!important;
  height:100%!important;
  background:
    url('assets/ui_pause19/pause-frame-overlay.png?v=20.10.40.19.4')
    center / 100% 100% no-repeat!important;
  pointer-events:none!important;
}

#panel[data-kind="pause"] .gwp193-menu{
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none!important;
}

#panel[data-kind="pause"] .gwp193-option{
  --gwp-y:44%;
  position:absolute!important;
  left:27.0%!important;
  top:var(--gwp-y)!important;
  width:46.0%!important;
  height:5.35%!important;
  min-width:0!important;
  min-height:0!important;
  transform:translateY(-50%)!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0 2.4%!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:none!important;
  overflow:visible!important;
  pointer-events:auto!important;
  cursor:url('assets/ui44/cursor-focus-native.png') 6 4,pointer!important;
  isolation:isolate!important;
  color:#f0ece5!important;
  font-family:Georgia,'Times New Roman',serif!important;
  text-transform:uppercase!important;
  -webkit-tap-highlight-color:transparent!important;
}

/* Pincel blanco de selección, estrecho y rugoso como la referencia. */
#panel[data-kind="pause"] .gwp193-option::before{
  content:""!important;
  position:absolute!important;
  left:-2%!important;
  right:-2%!important;
  top:10%!important;
  bottom:10%!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:0!important;
  transform:scaleX(.96)!important;
  background:
    linear-gradient(90deg,
      rgba(224,222,216,.10) 0%,
      #e5e2dc 4%,
      #fbfaf6 14%,
      #fff 50%,
      #faf8f2 86%,
      #dedbd4 96%,
      rgba(224,222,216,.08) 100%)!important;
  clip-path:polygon(
    0 44%,4% 30%,9% 34%,15% 20%,22% 27%,30% 17%,39% 24%,48% 13%,
    57% 22%,66% 14%,75% 25%,84% 17%,92% 29%,100% 37%,97% 52%,100% 65%,
    93% 77%,85% 72%,76% 86%,67% 79%,58% 90%,49% 80%,40% 88%,31% 77%,
    22% 85%,13% 75%,5% 81%,0 68%,3% 55%)!important;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.18))!important;
  transition:opacity .10s linear,transform .10s linear!important;
}

#panel[data-kind="pause"] .gwp193-option::after{
  content:""!important;
  position:absolute!important;
  left:-6.4%!important;
  top:50%!important;
  width:0!important;
  height:0!important;
  border-top:9px solid transparent!important;
  border-bottom:9px solid transparent!important;
  border-left:15px solid #f8f7f2!important;
  transform:translateY(-50%)!important;
  opacity:0!important;
  z-index:2!important;
  filter:drop-shadow(0 2px 3px #000)!important;
  transition:opacity .10s linear!important;
}

#panel[data-kind="pause"] .gwp193-option span{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  white-space:nowrap!important;
  font:400 clamp(17px,2.45dvh,25px)/1 Georgia,'Times New Roman',serif!important;
  letter-spacing:.055em!important;
  color:inherit!important;
  text-shadow:0 2px 6px rgba(0,0,0,.96)!important;
}

#panel[data-kind="pause"] .gwp193-option[data-gwp193-action="quit"] span{
  font-size:clamp(16px,2.25dvh,23px)!important;
  letter-spacing:.045em!important;
}

/* Una sola opción puede verse seleccionada.
   Hover/foco actualizan .is-selected desde JS; no pintamos estados paralelos
   porque el foco inicial de CONTINUAR podía dejar dos pinceles blancos a la vez. */
#panel[data-kind="pause"] .gwp193-option.is-selected{
  color:#111!important;
}
#panel[data-kind="pause"] .gwp193-option.is-selected::before{
  opacity:1!important;
  transform:scaleX(1)!important;
}
#panel[data-kind="pause"] .gwp193-option.is-selected::after{
  opacity:1!important;
}
#panel[data-kind="pause"] .gwp193-option.is-selected span{
  text-shadow:none!important;
}

/* La referencia conserva el HUD y la room detrás del menú. */
body.grim-pause-open-v193 #hud{
  filter:none!important;
}

/* Pantallas estrechas: conserva la proporción completa del marco. */
@media(max-width:760px){
  #panel[data-kind="pause"] .gwp193-stage{
    width:min(96vw,calc((100dvh - 10px) * .7954545455))!important;
  }
  #panel[data-kind="pause"] .gwp193-option span{
    font-size:clamp(13px,2.35dvh,20px)!important;
  }
  #panel[data-kind="pause"] .gwp193-option[data-gwp193-action="quit"] span{
    font-size:clamp(12px,2.15dvh,18px)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #panel[data-kind="pause"] .gwp193-option::before,
  #panel[data-kind="pause"] .gwp193-option::after{
    transition:none!important;
  }
}

/* V20.10.40.19.5 — la etiqueta de retorno es más larga; conserva el marco sin desbordar. */
#panel[data-kind="pause"] .gwp193-option[data-gwp193-action="return"] span{
  font-size:clamp(15px,2.05dvh,21px)!important;
  letter-spacing:.035em!important;
}
@media(max-width:760px){
  #panel[data-kind="pause"] .gwp193-option[data-gwp193-action="return"] span{
    font-size:clamp(11px,1.95dvh,17px)!important;
  }
}