/* ===================================================================== */
/* In-game pause menu (#exit-menu.pause-menu): fantasy cartoon redesign    */
/* Everything is CSS / inline SVG - no new art assets. Loaded after the   */
/* other sheets: the older #exit-menu rules (corecraftia-ui.css, windows)  */
/* use !important, so every rule here is scoped as "body #exit-menu.pause- */
/* menu ..." and carries !important where it has to win.                   */
/* ===================================================================== */

/* One unit scales the whole menu: it fits the width and the height of any viewport (desktop and phones). */
body #exit-menu.pause-menu{
  --u: min(8px, 1.2vh, 1.2vw);
  --pm-icon: calc(var(--u) * 6.8);
  --pm-wood: repeating-linear-gradient(94deg, #8f5d2d 0 calc(var(--u) * 1.1), #7c4f24 calc(var(--u) * 1.1) calc(var(--u) * 1.6), #98683a calc(var(--u) * 1.6) calc(var(--u) * 2.8));
  --pm-serif: Georgia, "Times New Roman", serif;
}

/* ---- dimmed game behind the menu (the game stays visible) ---- */
body #menu-overlay{
  background: rgba(2, 8, 20, 0.62) !important;
  will-change: opacity;
}
body #menu-overlay[style*="display: block"]{
  animation: pm-dim-in 480ms ease-out both;
}
body #menu-overlay.is-closing{
  animation: pm-dim-out 250ms ease-in both !important;
  pointer-events: none !important;
}

/* ---- the panel ---- */
body #exit-menu.pause-menu{
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  width: calc(var(--u) * 75) !important;
  max-width: none !important;
  height: fit-content !important;
  max-height: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  padding: calc(var(--u) * 3.2) calc(var(--u) * 4) calc(var(--u) * 3.4) !important;
  border: calc(var(--u) * 1.7) solid transparent !important;
  border-radius: calc(var(--u) * 3.2) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(110, 190, 255, 0.28), transparent 58%) padding-box,
    linear-gradient(180deg, #17467f 0%, #0d2d5b 46%, #081d3e 100%) padding-box,
    linear-gradient(180deg, rgba(255, 224, 168, 0.4), rgba(255, 224, 168, 0) 32%, rgba(0, 0, 0, 0.38)) border-box,
    var(--pm-wood) border-box !important;
  box-shadow:
    0 calc(var(--u) * 4) calc(var(--u) * 9) rgba(0, 0, 0, 0.62),
    0 0 0 calc(var(--u) * 0.4) #3a2210,
    inset 0 0 0 calc(var(--u) * 0.3) rgba(0, 0, 0, 0.55) !important;
  color: #eaf7ff !important;
  font-family: var(--pm-serif) !important;
  z-index: 3303 !important;
  transform-origin: 50% 55%;
  animation: pm-panel-in 520ms cubic-bezier(0.18, 0.86, 0.24, 1) both;
  will-change: transform, opacity;
}
body #exit-menu.pause-menu.is-closing{
  animation: pm-panel-out 250ms cubic-bezier(0.4, 0, 0.9, 0.6) both !important;
}
body #exit-menu.pause-menu.is-closing,
body #exit-menu.pause-menu.is-closing *{
  pointer-events: none !important;
}
/* inner bevel + soft vignette over the navy field (replaces the old gradient layer) */
body #exit-menu.pause-menu::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: calc(var(--u) * 1.6) !important;
  background: none !important;
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.3) rgba(0, 0, 0, 0.6),
    inset 0 0 calc(var(--u) * 4) rgba(0, 0, 0, 0.5) !important;
  pointer-events: none !important;
}
body #exit-menu.pause-menu > *{
  position: relative;
  z-index: 1;
}

/* ---- decorations: stone corners, vines, lanterns, sparks ---- */
body #exit-menu.pause-menu .pm-svg-defs{
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
body #exit-menu.pause-menu .pm-stone{
  position: absolute !important;
  z-index: 3 !important;
  width: calc(var(--u) * 5.4);
  height: calc(var(--u) * 4.2);
  border-radius: calc(var(--u) * 1.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 38%),
    linear-gradient(135deg, #a8aeb8, #5f6672 60%, #484e59);
  box-shadow: inset 0 calc(var(--u) * -0.4) 0 rgba(0, 0, 0, 0.35), 0 calc(var(--u) * 0.35) 0 #25282f, 0 0 0 calc(var(--u) * 0.25) #25282f;
  pointer-events: none !important;
}
body #exit-menu.pause-menu .pm-stone-bl{ left: calc(var(--u) * -2.4); bottom: calc(var(--u) * -2.4); }
body #exit-menu.pause-menu .pm-stone-br{ right: calc(var(--u) * -2.4); bottom: calc(var(--u) * -2.4); }
body #exit-menu.pause-menu .pm-stone-tl{ left: calc(var(--u) * -2.4); top: calc(var(--u) * -2.4); width: calc(var(--u) * 4.2); height: calc(var(--u) * 3.4); }
body #exit-menu.pause-menu .pm-stone-tr{ right: calc(var(--u) * -2.4); top: calc(var(--u) * -2.4); width: calc(var(--u) * 4.2); height: calc(var(--u) * 3.4); }

body #exit-menu.pause-menu .pm-vine{
  position: absolute !important;
  z-index: 4 !important;
  width: calc(var(--u) * 15);
  height: calc(var(--u) * 15);
  overflow: visible;
  pointer-events: none !important;
  filter: drop-shadow(0 calc(var(--u) * 0.3) 0 rgba(0, 0, 0, 0.35));
}
body #exit-menu.pause-menu .pm-vine-bl{ left: calc(var(--u) * -3.4); bottom: calc(var(--u) * -3.4); transform: scaleY(-1); }
body #exit-menu.pause-menu .pm-vine-br{ right: calc(var(--u) * -3.4); bottom: calc(var(--u) * -3.4); transform: scale(-1, -1); }
body #exit-menu.pause-menu .pm-vine-tl{ left: calc(var(--u) * -3.4); top: calc(var(--u) * 10); width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
body #exit-menu.pause-menu .pm-vine-tr{ right: calc(var(--u) * -3.4); top: calc(var(--u) * 10); width: calc(var(--u) * 10); height: calc(var(--u) * 10); transform: scaleX(-1); }

body #exit-menu.pause-menu .pm-lantern{
  position: absolute !important;
  z-index: 5 !important;
  top: calc(var(--u) * -1.2);
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 16);
  pointer-events: none !important;
  transform-origin: 50% 0;
  animation: pm-sway 5.6s ease-in-out 700ms infinite;
}
body #exit-menu.pause-menu .pm-lantern-l{ left: calc(var(--u) * -6.2); }
body #exit-menu.pause-menu .pm-lantern-r{ right: calc(var(--u) * -6.2); animation-delay: 1.9s; }
body #exit-menu.pause-menu .pm-rope{
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(var(--u) * 0.7);
  height: calc(var(--u) * 5.4);
  margin-left: calc(var(--u) * -0.35);
  border-radius: calc(var(--u) * 0.35);
  background: repeating-linear-gradient(180deg, #c9a46a 0 calc(var(--u) * 0.6), #8a6a3a calc(var(--u) * 0.6) calc(var(--u) * 1.1));
  box-shadow: 0 0 0 calc(var(--u) * 0.18) #3a2813;
}
body #exit-menu.pause-menu .pm-lamp{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 4.6);
  display: block;
  height: calc(var(--u) * 10.4);
}
body #exit-menu.pause-menu .pm-lamp-cap,
body #exit-menu.pause-menu .pm-lamp-base{
  position: absolute;
  left: 8%;
  right: 8%;
  height: calc(var(--u) * 1.9);
  border-radius: calc(var(--u) * 0.8);
  background: linear-gradient(180deg, #7a4a1e, #3a2210);
  box-shadow: 0 0 0 calc(var(--u) * 0.25) #1e1208, inset 0 calc(var(--u) * 0.3) 0 rgba(255, 220, 160, 0.45);
}
body #exit-menu.pause-menu .pm-lamp-cap{ top: 0; border-radius: calc(var(--u) * 1.6) calc(var(--u) * 1.6) calc(var(--u) * 0.6) calc(var(--u) * 0.6); }
body #exit-menu.pause-menu .pm-lamp-base{ bottom: 0; }
body #exit-menu.pause-menu .pm-lamp-glass{
  position: absolute;
  left: 15%;
  right: 15%;
  top: calc(var(--u) * 1.6);
  bottom: calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 1.4);
  background: radial-gradient(ellipse at 50% 60%, #fff6c9 0%, #ffd25f 38%, #f08a1e 100%);
  box-shadow: 0 0 0 calc(var(--u) * 0.25) #2a1a0b, inset 0 0 calc(var(--u) * 1.4) rgba(255, 120, 20, 0.8);
}
body #exit-menu.pause-menu .pm-glow{
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 9.6);
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  margin: calc(var(--u) * -10) 0 0 calc(var(--u) * -10);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 80, 0.55) 0%, rgba(255, 150, 40, 0.22) 38%, rgba(255, 140, 30, 0) 70%);
  opacity: 0.8;
  animation: pm-glow 3.2s ease-in-out 700ms infinite;
  will-change: transform, opacity;
}
body #exit-menu.pause-menu .pm-lantern-r .pm-glow{ animation-delay: 1.4s; }

body #exit-menu.pause-menu .pm-ambient{
  position: absolute !important;
  inset: calc(var(--u) * -1) !important;
  z-index: 2 !important;
  overflow: visible;
  pointer-events: none !important;
}
body #exit-menu.pause-menu .pm-spark{
  position: absolute;
  left: var(--x);
  bottom: var(--y, 8%);
  width: calc(var(--u) * 0.8);
  height: calc(var(--u) * 0.8);
  border-radius: 50%;
  background: #fff3b0;
  box-shadow: 0 0 calc(var(--u) * 1.4) calc(var(--u) * 0.5) rgba(255, 214, 90, 0.7);
  opacity: 0;
  animation: pm-float var(--t, 6s) ease-in-out var(--d, 0s) infinite;
  will-change: transform, opacity;
}

/* ---- close (X) ---- */
body #exit-menu.pause-menu .pm-close{
  position: absolute !important;
  z-index: 8 !important;
  top: calc(var(--u) * -3);
  right: calc(var(--u) * -3);
  width: calc(var(--u) * 6.6) !important;
  height: calc(var(--u) * 6.6) !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: calc(var(--u) * 1.6) !important;
  border: calc(var(--u) * 0.5) solid #fff !important;
  background: linear-gradient(180deg, #ff6a5c 0%, #d3201a 52%, #a31410 100%) !important;
  box-shadow: 0 0 0 calc(var(--u) * 0.35) #4a1210, 0 calc(var(--u) * 0.7) calc(var(--u) * 1.4) rgba(0, 0, 0, 0.5), inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  font-family: var(--pm-serif) !important;
  font-size: calc(var(--u) * 3.6) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 calc(var(--u) * 0.3) 0 rgba(0, 0, 0, 0.6) !important;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease !important;
  animation: pm-pop 420ms cubic-bezier(0.2, 1.4, 0.4, 1) 360ms both;
}
body #exit-menu.pause-menu .pm-close:hover{ transform: scale(1.08) !important; filter: brightness(1.12) !important; }
body #exit-menu.pause-menu .pm-close:active{ transform: scale(0.95) !important; }

/* ---- title ---- */
body #exit-menu.pause-menu .pm-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: calc(var(--u) * -8.6) 0 calc(var(--u) * 2.2);
}
body #exit-menu.pause-menu .pm-banner{
  position: relative;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 6.4) calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 2.6) calc(var(--u) * 2.6) calc(var(--u) * 4.4) calc(var(--u) * 4.4) / calc(var(--u) * 2.6) calc(var(--u) * 2.6) calc(var(--u) * 2.2) calc(var(--u) * 2.2);
  border: calc(var(--u) * 0.5) solid #0a2447;
  background: linear-gradient(180deg, #3f95f0 0%, #1d5fc0 52%, #12438e 100%);
  box-shadow:
    0 0 0 calc(var(--u) * 0.45) #5b3a19,
    0 calc(var(--u) * 1) 0 calc(var(--u) * 0.45) #2a190a,
    inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.4),
    0 calc(var(--u) * 1.4) calc(var(--u) * 2.4) rgba(0, 0, 0, 0.5);
  animation: pm-drop-in 440ms cubic-bezier(0.2, 0.9, 0.3, 1) 90ms both;
}
body #exit-menu.pause-menu .pm-title{
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--pm-serif) !important;
  font-size: calc(var(--u) * 6.6) !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
  line-height: 1.04 !important;
  text-transform: uppercase;
  color: #ffc83a;
  background: linear-gradient(180deg, #fff2a8 0%, #ffcf3e 44%, #f08a14 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: calc(var(--u) * 0.32) #5a2a06;
  paint-order: stroke fill;
  filter: drop-shadow(0 calc(var(--u) * 0.45) 0 rgba(60, 26, 4, 0.9));
  white-space: nowrap;
}
body #exit-menu.pause-menu .pm-subtitle{
  margin-top: calc(var(--u) * -0.4);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 4.6);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  /* wooden sign, same wood as the login screen signs (auth-screen.css) */
  border-radius: calc(var(--u) * 1.4);
  border: calc(var(--u) * 0.35) solid #4a2a10;
  background:
    repeating-linear-gradient(92deg, rgba(60, 28, 6, 0) 0 calc(var(--u) * 2.6), rgba(60, 28, 6, 0.16) calc(var(--u) * 2.6) calc(var(--u) * 2.85)),
    linear-gradient(180deg, #d79a58 0%, #b87438 52%, #8d5226 100%);
  box-shadow:
    0 calc(var(--u) * 0.5) 0 #2a1507,
    inset 0 calc(var(--u) * 0.35) 0 rgba(255, 233, 190, 0.45),
    inset 0 calc(var(--u) * -0.45) 0 rgba(60, 28, 6, 0.35);
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--u) * 3.1);
  font-weight: 900;
  letter-spacing: 0.08em;
  -webkit-text-stroke: calc(var(--u) * 0.45) #0a1c3c;
  paint-order: stroke fill;
  text-shadow: 0 calc(var(--u) * 0.35) 0 rgba(6, 14, 34, 0.85);
  animation: pm-drop-in 420ms cubic-bezier(0.2, 0.9, 0.3, 1) 150ms both;
}
body #exit-menu.pause-menu .pm-subtitle i{
  width: calc(var(--u) * 1.3);
  height: calc(var(--u) * 1.3);
  transform: rotate(45deg);
  background: #ffe08a;
  box-shadow: 0 0 0 calc(var(--u) * 0.25) #4a2a10;
}

/* ---- player / world card ---- */
body #exit-menu.pause-menu .pm-info{
  position: relative;
  z-index: 6; /* above the corner vines (4) */
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.4);
  margin-bottom: calc(var(--u) * 2.4);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4) calc(var(--u) * 1.2) calc(var(--u) * 1.2);
  min-height: calc(var(--u) * 13);
  border-radius: calc(var(--u) * 2);
  border: calc(var(--u) * 0.35) solid #0a2447;
  background:
    linear-gradient(90deg, rgba(10, 36, 78, 0.96) 0%, rgba(10, 36, 78, 0.62) 46%, rgba(10, 36, 78, 0) 100%),
    radial-gradient(ellipse at 88% 100%, #4aa84a 0 30%, transparent 31%),
    radial-gradient(ellipse at 72% 108%, #2f8a3c 0 28%, transparent 29%),
    linear-gradient(180deg, #7dd2ff 0%, #bfe9ff 58%, #7bc25a 59%, #3f8f3a 100%);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.3) rgba(255, 255, 255, 0.1), 0 calc(var(--u) * 0.5) 0 rgba(0, 0, 0, 0.35);
  animation: pm-rise-in 420ms cubic-bezier(0.2, 0.9, 0.3, 1) 170ms both;
}
body #exit-menu.pause-menu .pm-avatar{
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--u) * 10.6);
  height: calc(var(--u) * 10.6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: calc(var(--u) * 1.6);
  border: calc(var(--u) * 0.5) solid #f2b43a;
  background: radial-gradient(circle at 50% 38%, #ffb35a 0%, #d9741f 70%, #a8480f 100%);
  box-shadow: 0 0 0 calc(var(--u) * 0.3) #4a2a06, inset 0 0 calc(var(--u) * 1.2) rgba(0, 0, 0, 0.35);
}
body #exit-menu.pause-menu .pm-avatar-stage{
  position: relative;
  flex: 0 0 auto;
  width: 124px;
  height: 124px;
  transform-origin: 50% 50%;
}
body #exit-menu.pause-menu .pm-info-text{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.5);
  text-shadow: 0 calc(var(--u) * 0.3) 0 rgba(0, 0, 0, 0.75);
}
body #exit-menu.pause-menu .pm-name{
  font-size: calc(var(--u) * 4);
  font-weight: 900;
  line-height: 1.05;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body #exit-menu.pause-menu #exit-world-name{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  font-size: calc(var(--u) * 2.9) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: #f2f8ff !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
body #exit-menu.pause-menu .pm-floor{
  font-size: calc(var(--u) * 2.9);
  font-weight: 900;
  color: #9dec55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- the four main buttons (2 x 2) ---- */
body #exit-menu.pause-menu .exit-menu-actions{
  /* its own layer (z 1 from the shared window styles); lift the whole button block over the corner vines (4) */
  position: relative !important;
  z-index: 6 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: calc(var(--u) * 1.8) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
body #exit-menu.pause-menu .pm-btn{
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: calc(var(--u) * 1.2) !important;
  min-height: calc(var(--u) * 11.4) !important;
  margin: 0 !important;
  padding: calc(var(--u) * 1) calc(var(--u) * 1.2) calc(var(--u) * 1.2) calc(var(--u) * 1.4) !important;
  border-radius: calc(var(--u) * 2) !important;
  border: calc(var(--u) * 0.45) solid #0b2c5e !important;
  background: linear-gradient(180deg, #4aa6ff 0%, #2677e6 46%, #1757bd 100%) !important;
  box-shadow:
    0 0 0 calc(var(--u) * 0.3) #061a38,
    0 calc(var(--u) * 0.9) 0 calc(var(--u) * 0.3) #061a38,
    inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.45),
    inset 0 calc(var(--u) * -0.6) 0 rgba(0, 20, 70, 0.35) !important;
  color: #fff !important;
  font-family: var(--pm-serif) !important;
  font-size: calc(var(--u) * 3.2) !important;
  font-weight: 900 !important;
  text-shadow: 0 calc(var(--u) * 0.4) 0 rgba(0, 20, 60, 0.85) !important;
  overflow: hidden !important;
  cursor: pointer;
  transition: transform 130ms ease, filter 130ms ease !important;
  animation: pm-rise-in 320ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
  will-change: transform, opacity;
}
body #exit-menu.pause-menu .pm-btn::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 38%) !important;
  transform: none !important;
  transition: none !important;
  pointer-events: none !important;
}
body #exit-menu.pause-menu .pm-btn:hover{
  transform: translateY(calc(var(--u) * -0.3)) scale(1.02) !important;
  filter: brightness(1.1) !important;
}
body #exit-menu.pause-menu .pm-btn:active{
  transform: translateY(calc(var(--u) * 0.2)) scale(0.985) !important;
  filter: brightness(0.95) !important;
}
body #exit-menu.pause-menu .pm-btn:focus-visible,
body #exit-menu.pause-menu .pm-close:focus-visible{
  outline: calc(var(--u) * 0.5) solid #ffe27a !important;
  outline-offset: calc(var(--u) * 0.3);
}
/* staggered entrance: 60ms apart */
body #exit-menu.pause-menu #confirm-exit{ animation-delay: 230ms; }
body #exit-menu.pause-menu #confirm-Respawn{ animation-delay: 290ms; }
body #exit-menu.pause-menu #confirm-Store{ animation-delay: 350ms; }
body #exit-menu.pause-menu #confirm-Settings{ animation-delay: 410ms; }

body #exit-menu.pause-menu .pm-btn .pi-menu-btn-icon{
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: var(--pm-icon) !important;
  height: var(--pm-icon) !important;
  background-image: url("/photos/icons_tilemap.png") !important;
  background-repeat: no-repeat !important;
  background-size: calc(var(--pm-icon) * 11) calc(var(--pm-icon) * 8) !important;
  image-rendering: auto !important;
  filter: drop-shadow(0 calc(var(--u) * 0.35) 0 rgba(0, 18, 60, 0.7));
}
/* icons_tilemap cells (col,row): exit (8,6), refresh (9,2), cart (11,2), gear (7,6) */
body #exit-menu.pause-menu .pm-btn.pi-menu-btn-exit .pi-menu-btn-icon{ background-position: calc(var(--pm-icon) * -7) calc(var(--pm-icon) * -5) !important; }
body #exit-menu.pause-menu .pm-btn.pi-menu-btn-respawn .pi-menu-btn-icon{ background-position: calc(var(--pm-icon) * -8) calc(var(--pm-icon) * -1) !important; }
body #exit-menu.pause-menu .pm-btn.pi-menu-btn-store .pi-menu-btn-icon{ background-position: calc(var(--pm-icon) * -10) calc(var(--pm-icon) * -1) !important; }
body #exit-menu.pause-menu .pm-btn.pi-menu-btn-settings .pi-menu-btn-icon{ background-position: calc(var(--pm-icon) * -6) calc(var(--pm-icon) * -5) !important; }
body #exit-menu.pause-menu .pm-btn .pi-menu-btn-label{
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center !important;
  line-height: 1.05 !important;
  white-space: nowrap;
}

/* ---- Resume Game ---- */
body #exit-menu.pause-menu #cancel-exit.pm-resume{
  z-index: 6 !important; /* above the corner vines (4) */
  grid-column: 1 / -1 !important;
  justify-self: center;
  width: 82% !important;
  margin-top: calc(var(--u) * 1.6) !important;
  min-height: calc(var(--u) * 8.4) !important;
  justify-content: center !important;
  padding: calc(var(--u) * 0.8) calc(var(--u) * 2) calc(var(--u) * 1) !important;
  border-color: #5a0f0c !important;
  background: linear-gradient(180deg, #ff7a68 0%, #e03a2c 46%, #b5201a 100%) !important;
  box-shadow:
    0 0 0 calc(var(--u) * 0.3) #2f0907,
    0 calc(var(--u) * 0.9) 0 calc(var(--u) * 0.3) #2f0907,
    inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.45),
    inset 0 calc(var(--u) * -0.6) 0 rgba(90, 0, 0, 0.35) !important;
  text-shadow: 0 calc(var(--u) * 0.4) 0 rgba(80, 8, 4, 0.85) !important;
  font-size: calc(var(--u) * 4) !important;
  animation-delay: 470ms;
}
body #exit-menu.pause-menu #cancel-exit.pm-resume .pi-menu-btn-label{ flex: 0 1 auto; }

/* ---- keyframes: GPU friendly (transform / opacity only) ---- */
@keyframes pm-dim-in{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes pm-dim-out{ from{ opacity: 1; } to{ opacity: 0; } }
@keyframes pm-panel-in{
  from{ opacity: 0; transform: scale(0.92); }
  to{ opacity: 1; transform: scale(1); }
}
@keyframes pm-panel-out{
  from{ opacity: 1; transform: scale(1); }
  to{ opacity: 0; transform: scale(0.94); }
}
@keyframes pm-drop-in{
  from{ opacity: 0; transform: translateY(calc(var(--u) * -2.6)); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes pm-rise-in{
  from{ opacity: 0; transform: translateY(calc(var(--u) * 1.8)) scale(0.96); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pm-pop{
  from{ opacity: 0; transform: scale(0.4) rotate(-20deg); }
  to{ opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes pm-glow{
  0%, 100%{ opacity: 0.62; transform: scale(0.94); }
  50%{ opacity: 0.95; transform: scale(1.06); }
}
@keyframes pm-sway{
  0%, 100%{ transform: rotate(-1.4deg); }
  50%{ transform: rotate(1.4deg); }
}
@keyframes pm-float{
  0%{ opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
  15%{ opacity: 0.9; }
  70%{ opacity: 0.55; }
  100%{ opacity: 0; transform: translate3d(calc(var(--u) * var(--dx, 2)), calc(var(--u) * -14), 0) scale(1); }
}

/* ---- narrow phones: keep the lanterns inside the viewport ---- */
@media (max-width: 520px){
  body #exit-menu.pause-menu .pm-lantern-l{ left: calc(var(--u) * -3.8); }
  body #exit-menu.pause-menu .pm-lantern-r{ right: calc(var(--u) * -3.8); }
  body #exit-menu.pause-menu .pm-close{ top: calc(var(--u) * -2.4); right: calc(var(--u) * -2); }
}

/* ---- very short screens: tighten the card so nothing is clipped ---- */
@media (max-height: 460px){
  body #exit-menu.pause-menu .pm-info{ min-height: calc(var(--u) * 11); }
  body #exit-menu.pause-menu .pm-btn{ min-height: calc(var(--u) * 9.6) !important; }
}

/* ---- reduced motion: no movement, the menu simply appears ---- */
@media (prefers-reduced-motion: reduce){
  body #menu-overlay,
  body #exit-menu.pause-menu,
  body #exit-menu.pause-menu *{
    animation: none !important;
    transition: none !important;
  }
  body #exit-menu.pause-menu .pm-spark{ display: none !important; }
  body #exit-menu.pause-menu .pm-glow{ opacity: 0.8; }
}