.pauseCurtain{
  padding:18px;
  background:linear-gradient(145deg,#073d78d6,#075ba1c9 56%,#087bc0c2);
  backdrop-filter:blur(10px) saturate(.86);
}
.pauseCard{
  position:relative;
  width:min(680px,92vw);
  min-height:310px;
  padding:0;
  display:grid;
  grid-template-columns:38% 62%;
  overflow:hidden;
  text-align:left;
  border:1px solid #ffffffd4;
  border-radius:30px;
  background:#f8fdff;
  box-shadow:0 28px 72px #022d626f,0 4px 0 #fff inset;
  color:#174a7c;
}
.pauseVisual{
  position:relative;
  min-width:0;
  overflow:hidden;
  background:radial-gradient(circle at 50% 25%,#76ebff 0,transparent 34%),linear-gradient(160deg,#13bfe9,#087bd7 66%,#0753b4);
}
.pauseVisual:before,.pauseVisual:after{content:"";position:absolute;left:50%;bottom:-35px;width:250px;height:90px;transform:translateX(-50%);border:2px solid #bdf7ff70;border-radius:50%}
.pauseVisual:after{bottom:-13px;width:185px;height:65px;border-color:#fff4a95c}
.pauseVisual img{position:absolute;z-index:3;left:12%;bottom:-4%;width:70%;height:91%;object-fit:contain;filter:drop-shadow(0 13px 10px #074a8f66)}
.pauseGlow{position:absolute;z-index:2;left:30%;top:7%;width:92px;height:65px;border-radius:50%;background:radial-gradient(circle,#fffbd6c7 0 7%,#fff08b72 19%,transparent 68%);filter:blur(2px);animation:pauseGlow 2.3s ease-in-out infinite alternate}
.pauseWave{position:absolute;z-index:4;height:20px;border-bottom:3px solid #bdf8ffb5;border-radius:50%}
.pauseWave.waveA{left:-8%;right:29%;bottom:13%;transform:rotate(3deg)}
.pauseWave.waveB{left:50%;right:-14%;bottom:22%;transform:rotate(-5deg)}
.pauseVisual>b{position:absolute;z-index:5;right:15px;top:15px;width:43px;height:43px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #ffffff8c;border-radius:50%;background:#0a58a9b5;box-shadow:0 7px 18px #064a8d61;color:#fff}
.pauseVisual>b span{display:block;width:4px;height:17px;border-radius:3px;background:#fff4a7;box-shadow:0 0 8px #fff2a0}
.pauseCopy{min-width:0;padding:40px 43px 35px;display:flex;flex-direction:column;align-items:flex-start}
.pauseCopy>small{display:inline-flex;align-items:center;gap:7px;margin:0 0 10px;color:#0a75d3;font:900 8px/1 Arial,sans-serif;letter-spacing:.16em}
.pauseCopy>small:before{content:"";width:7px;height:7px;border-radius:50%;background:#ffc12c;box-shadow:0 0 0 4px #ffc12c25}
.pauseCopy h2{margin:0;color:#123f72;font:900 clamp(32px,4.4vw,45px)/.98 Arial,sans-serif;letter-spacing:-.045em}
.pauseCopy p{max-width:350px;margin:15px 0 17px;color:#5d7c9b;font:600 13px/1.45 Arial,sans-serif}
.pauseSafe{display:flex;align-items:center;gap:8px;margin-bottom:21px;color:#3c729d;font:900 8px/1 Arial,sans-serif;letter-spacing:.14em}
.pauseSafe i{width:8px;height:8px;border-radius:50%;background:#48d493;box-shadow:0 0 0 4px #48d49324}
.pauseActions{width:100%;margin-top:auto;display:flex;align-items:center;gap:10px}
.pauseCopy .resumeButton{min-height:46px;padding:0 19px;border:1px solid #f0a50a;border-radius:14px;background:linear-gradient(180deg,#ffd84a,#ffb21e);box-shadow:0 6px 0 #d87f0b,0 11px 20px #da8c2335;color:#17436f;font:900 10px/1 Arial,sans-serif;letter-spacing:.08em;cursor:pointer;transition:transform .18s,filter .18s,box-shadow .18s}
.pauseCopy .resumeButton b{margin-left:8px;font-size:16px}
.pauseCopy .resumeButton:hover{transform:translateY(-2px);filter:saturate(1.1)}
.pauseCopy .resumeButton:active{transform:translateY(5px);box-shadow:0 1px 0 #d87f0b}
.pauseMenuButton{min-height:46px;padding:0 17px 0 10px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid #096fc5;border-radius:14px;background:linear-gradient(180deg,#168fe8,#0871cc);box-shadow:0 5px 0 #0756a1,0 10px 20px #075da333;color:#fff;font:900 9px/1 Arial,sans-serif;letter-spacing:.075em;white-space:nowrap;cursor:pointer;transition:transform .18s,filter .18s,box-shadow .18s}
.menuBackIcon{position:relative;flex:0 0 27px;width:27px;height:27px;border:1px solid #ffffff6b;border-radius:9px;background:#075eb7;box-shadow:0 2px 5px #06477d4d inset}
.menuBackIcon:before{content:"";position:absolute;left:9px;top:8px;width:7px;height:7px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.menuBackIcon:after{content:"";position:absolute;left:9px;top:12px;width:10px;height:2px;border-radius:2px;background:#fff}
.pauseMenuButton:hover{transform:translateY(-2px);filter:saturate(1.08)}
.pauseMenuButton:active{transform:translateY(4px);box-shadow:0 1px 0 #0756a1}
@keyframes pauseGlow{to{opacity:.72;transform:scale(.88)}}

@media (orientation:landscape) and (hover:none) and (pointer:coarse){
  .pauseCurtain{padding:6px}
  .pauseCard{
    width:min(700px,94%);
    height:min(228px,88%);
    min-height:0;
    max-height:none;
    grid-template-columns:34% 66%;
    border-radius:21px;
  }
  .pauseVisual img{left:14%;bottom:-10%;width:66%;height:97%}
  .pauseGlow{left:28%;top:5%;width:74px;height:52px}
  .pauseVisual>b{right:10px;top:10px;width:34px;height:34px;gap:5px}
  .pauseVisual>b span{width:3px;height:14px}
  .pauseWave.waveA{bottom:10%}.pauseWave.waveB{bottom:20%}
  .pauseCopy{padding:18px 23px 16px}
  .pauseCopy>small{margin-bottom:6px;font-size:6px}
  .pauseCopy h2{font-size:clamp(25px,4.4vw,33px)}
  .pauseCopy p{margin:8px 0 9px;font-size:9px;line-height:1.3}
  .pauseSafe{margin-bottom:9px;font-size:6px}
  .pauseCopy .resumeButton{min-height:35px;padding:0 13px;border-radius:11px;font-size:8px;box-shadow:0 4px 0 #d87f0b,0 8px 14px #da8c232c}
  .pauseCopy .resumeButton b{font-size:13px}
  .pauseActions{gap:7px}
  .pauseMenuButton{min-height:35px;padding:0 11px 0 7px;gap:6px;border-radius:11px;font-size:7px;box-shadow:0 3px 0 #0756a1,0 6px 11px #075da329}
  .menuBackIcon{flex-basis:22px;width:22px;height:22px;border-radius:7px}
  .menuBackIcon:before{left:7px;top:6px;width:6px;height:6px}
  .menuBackIcon:after{left:7px;top:10px;width:9px}
}

@media (orientation:landscape) and (hover:none) and (pointer:coarse) and (max-height:360px){
  .pauseCard{height:min(204px,86%)}
  .pauseCopy{padding:13px 19px 12px}
  .pauseCopy>small{margin-bottom:4px}
  .pauseCopy p{margin:6px 0 7px}
  .pauseSafe{margin-bottom:7px}
  .pauseCopy .resumeButton{min-height:32px}
  .pauseMenuButton{min-height:32px}
}

@media (orientation:portrait) and (hover:none) and (pointer:coarse){
  .pauseActions{flex-direction:column;align-items:stretch;gap:10px}
  .pauseActions button{width:100%;min-height:43px}
}

@media (prefers-reduced-motion:reduce){.pauseGlow{animation:none}}