/* Pause / leave dialog — mirrors format-modal; beats profile-popups overflow clipping */
body dialog#modal.pause-dialog,
body dialog#modal:has(.pause-sheet){
  box-sizing:border-box!important;
  width:min(360px,calc(100vw - 32px))!important;
  max-width:calc(100vw - 32px)!important;
  max-height:none!important;
  margin:auto!important;
  padding:26px 8px 8px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
  color:#fff!important;
  font-family:'Manrope',Arial,sans-serif!important;
  animation:pauseIn .28s ease both!important;
}
body dialog#modal.pause-dialog::backdrop,
body dialog#modal:has(.pause-sheet)::backdrop{
  background:#020b14e0!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
@keyframes pauseIn{
  from{opacity:0;transform:translateY(12px) scale(.96)}
  to{opacity:1;transform:none}
}

body dialog#modal.pause-dialog > form[method="dialog"],
body dialog#modal:has(.pause-sheet) > form[method="dialog"]{
  position:absolute!important;
  top:0!important;right:0!important;
  height:auto!important;
  width:auto!important;
  margin:0!important;
  z-index:6!important;
  pointer-events:none;
}
body dialog#modal.pause-dialog > form[method="dialog"] .close,
body dialog#modal:has(.pause-sheet) > form[method="dialog"] .close,
body dialog#modal.pause-dialog .close,
body dialog#modal:has(.pause-sheet) .close{
  pointer-events:auto;
  position:absolute!important;
  top:8px!important;
  right:0!important;
  float:none!important;
  margin:0!important;
  width:38px!important;
  height:38px!important;
  border-radius:50%!important;
  border:2.5px solid #f6d76a!important;
  background:radial-gradient(circle at 35% 28%,#fff1a8,#ffd24a 55%,#c99628 100%)!important;
  color:#1a1204!important;
  font:900 20px/1 Arial,sans-serif!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  box-shadow:0 4px 14px #0008,0 0 0 3px #f0c84a33,inset 0 1px 0 #fff8!important;
  z-index:6!important;
}
body dialog#modal.pause-dialog #modalcontent,
body dialog#modal:has(.pause-sheet) #modalcontent,
body dialog#modal.pause-dialog .dialog-body,
body dialog#modal:has(.pause-sheet) .dialog-body{
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  min-width:0!important;
  text-align:center!important;
  overflow:visible!important;
}

.pause-sheet{
  position:relative;
  box-sizing:border-box;
  width:100%;
  padding:28px 22px 22px;
  border-radius:18px;
  border:3px solid transparent;
  background:
    linear-gradient(160deg,#0a2f52 0%,#071f38 48%,#041528 100%) padding-box,
    linear-gradient(135deg,#ffe9a0 0%,#f0c145 22%,#c9972a 48%,#ffe07a 72%,#d4a63a 100%) border-box;
  box-shadow:
    0 28px 70px #000c,
    inset 0 1px 0 #ffffff22,
    inset 0 -20px 40px #0004,
    -10px 0 28px #2ad0ff33,
    10px 0 28px #2ad0ff33;
  overflow:visible;
  text-align:center;
  font-family:'Manrope',Arial,sans-serif;
}
.pause-sheet:before,
.pause-sheet:after{
  content:"";
  position:absolute;
  top:18%;bottom:18%;
  width:3px;
  border-radius:3px;
  background:linear-gradient(180deg,transparent,#5ce8ff,transparent);
  box-shadow:0 0 14px 4px #3ad7ff88;
  pointer-events:none;
  z-index:1;
}
.pause-sheet:before{left:-2px}
.pause-sheet:after{right:-2px}

.pause-sheet-tab{
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  min-width:132px;
  padding:7px 26px 8px;
  text-align:center;
  font:800 11px/1 'Manrope',Arial,sans-serif;
  letter-spacing:.18em;
  color:#f4f8ff;
  text-transform:uppercase;
  background:
    linear-gradient(180deg,#0d2744 0%,#071a30 100%) padding-box,
    linear-gradient(90deg,#e8c35a,#ffd86a 40%,#c9962e 100%) border-box;
  border:2px solid transparent;
  clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);
  box-shadow:0 4px 12px #0007;
}

.pause-sheet-body{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  padding-top:6px;
}

.pause-sheet-icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin:2px 0 0;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#1a5a88,#0a2f50 72%);
  border:2px solid #5ecfff;
  box-shadow:0 0 0 5px #5ecfff18,0 8px 20px #0007,inset 0 1px 0 #ffffff33;
}
.pause-sheet-icon span{
  display:flex;
  gap:6px;
  height:20px;
}
.pause-sheet-icon span i{
  display:block;
  width:6px;
  height:20px;
  border-radius:2px;
  background:linear-gradient(180deg,#fff8d0,#ffe34a);
  box-shadow:0 0 8px #ffd43a99;
}

.pause-sheet-title{
  position:relative;
  margin:14px 0 0;
  padding:0 8px;
  font:800 italic clamp(26px,7vw,34px)/1 Impact,'Arial Black','Bebas Neue',sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 0 #03101fcc,0 0 24px #5ecfff44;
}
.pause-sheet-title:after{
  content:"";
  display:block;
  width:64px;
  height:2px;
  margin:12px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,#ffe34a,#fff8,#ffe34a,transparent);
  box-shadow:0 0 10px #ffd43a88;
}

.pause-sheet-sub{
  margin:12px 0 0!important;
  padding:0 6px;
  max-width:280px;
  font:600 13px/1.5 'Manrope',Arial,sans-serif!important;
  color:#c8e6f8!important;
  letter-spacing:.01em;
}

.pause-sheet-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  width:100%;
  margin-top:20px;
}
.pause-sheet-actions-single{grid-template-columns:1fr}

.pause-btn{
  appearance:none;
  box-sizing:border-box;
  border:0;
  cursor:pointer;
  min-height:48px;
  padding:12px 14px;
  border-radius:12px;
  font:800 14px/1.2 'Manrope',Arial,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;
}
.pause-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.pause-btn:active{transform:translateY(1px) scale(.98)}
.pause-btn:focus-visible{outline:2px solid #ffe34a;outline-offset:3px}

.pause-btn-primary{
  color:#082747;
  background:linear-gradient(160deg,#fff1a0 0%,#ffd24a 42%,#f0b820 100%);
  border:1px solid #ffe98a;
  box-shadow:0 4px 0 #b17a12,0 10px 22px #ffc92933,inset 0 1px 0 #fff8;
}
.pause-btn-primary:hover{
  box-shadow:0 5px 0 #b17a12,0 12px 26px #ffc92944,inset 0 1px 0 #fff8;
}

.pause-btn-secondary{
  color:#e8f6ff;
  background:linear-gradient(165deg,#0d3a5e,#082744);
  border:2px solid #3db7e8;
  box-shadow:inset 0 1px 0 #ffffff1a,0 8px 18px #0006;
}
.pause-btn-secondary:hover{
  border-color:#7ee7ff;
  background:linear-gradient(165deg,#134a72,#0a3050);
}

@media(max-width:420px){
  body dialog#modal.pause-dialog,
  body dialog#modal:has(.pause-sheet){
    width:min(340px,calc(100vw - 24px))!important;
    padding:24px 4px 6px!important;
  }
  .pause-sheet{padding:26px 16px 18px;border-radius:16px}
  .pause-sheet-title{font-size:24px}
  .pause-sheet-sub{font-size:12px!important}
  .pause-btn{min-height:46px;font-size:13px}
}
@media(orientation:landscape) and (max-height:420px){
  .pause-sheet{padding:20px 16px 14px}
  .pause-sheet-icon{width:40px;height:40px}
  .pause-sheet-icon span{height:14px}
  .pause-sheet-icon span i{width:5px;height:14px}
  .pause-sheet-title{font-size:22px;margin-top:8px}
  .pause-sheet-title:after{margin-top:8px}
  .pause-sheet-sub{margin-top:8px!important}
  .pause-sheet-actions{margin-top:12px}
  .pause-btn{min-height:40px;padding:8px 12px}
}
@media(prefers-reduced-motion:reduce){
  body dialog#modal.pause-dialog,
  body dialog#modal:has(.pause-sheet){animation:none!important}
}