
/* Muddlepop in-game controls. Keep them outside the inert game surface. */
#nnfPauseButton[hidden], #nnfPauseOverlay[hidden] { display:none !important; }
.nnf-pause-button {
  position:fixed; z-index:8000;
  top:max(10px,calc(env(safe-area-inset-top,0px) + 8px));
  right:max(10px,calc(env(safe-area-inset-right,0px) + 8px));
  width:56px; height:56px; min-width:56px; min-height:56px;
  display:grid; place-items:center; padding:5px;
  border:2px solid #f1ce82; border-radius:50%;
  background:radial-gradient(circle at 28% 20%,#aa814c,#63452c 74%);
  box-shadow:inset 0 2px 0 #fff0bb73,0 3px 0 #352619b8,0 5px 15px #0008;
  cursor:pointer; appearance:none; -webkit-appearance:none; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.nnf-pause-button svg {width:42px;height:42px;pointer-events:none;}
.nnf-pause-button:disabled {opacity:.45;cursor:default;}
.nnf-pause-button:active:not(:disabled) {filter:brightness(1.15);}
.nnf-pause-overlay {
  position:fixed; inset:0; z-index:9000;
  display:grid; place-items:center; box-sizing:border-box;
  padding: max(12px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:radial-gradient(ellipse at center,#112b2ab8,#071721e3);
  overscroll-behavior:none; touch-action:none; overflow:auto;
}
.nnf-pause-card {width:min(410px,90vw);text-align:center;color:#ffedbb;}
.nnf-pause-card h2 {
  margin:0 0 14px;font:800 clamp(23px,4vh,32px)/1.15 ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  text-shadow:0 3px 8px #0009;
}
.nnf-pause-choice {
  width:100%;min-height:78px;display:flex;align-items:center;gap:18px;
  margin:12px 0;padding:8px 26px;border:2px solid #f2ce84;border-radius:28px 24px 28px 24px;
  background:radial-gradient(ellipse at 22% 5%,#e3bc6633,transparent 75%),linear-gradient(150deg,#49684e,#214339);
  color:#fff0c6;box-shadow:inset 0 2px 0 #fff1b955,0 5px 0 #102b23aa,0 8px 18px #0004;
  font:800 clamp(24px,4vw,34px)/1 ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  text-align:left;cursor:pointer;touch-action:manipulation;
  appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;
}
.nnf-pause-choice svg {width:58px;height:58px;flex:0 0 58px;pointer-events:none;}
.nnf-menu-choice {background:linear-gradient(150deg,#946c3f,#62472f);}
.nnf-pause-choice small {display:block;margin-top:7px;font:600 12px/1.2 system-ui,sans-serif;color:#f2dfb2;}
.nnf-pause-choice:active {filter:brightness(1.13);}
.nnf-pause-choice:focus-visible,.nnf-pause-button:focus-visible {outline:3px solid #fff6d5;outline-offset:4px;}
#nnfPauseStatus {margin:10px 0 0;font:14px/1.35 system-ui,sans-serif;color:#ffebba;}
#nnfPauseStatus:empty {display:none;}
.app-suspended #app::before,.app-suspended #app::after,
.app-suspended #app *::before,.app-suspended #app *::after {animation-play-state:paused !important;}
#parentGateOverlay.nnf-action-gate .parent-gate-card {max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;}
#parentGateOverlay.nnf-action-gate .parent-hold {touch-action:none;user-select:none;-webkit-user-select:none;}
#parentGateOverlay.nnf-action-gate input {font-size:22px;}
@media (orientation:portrait) {#nnfPauseButton {display:none !important;}}
@media (max-height:360px) {
  .nnf-pause-card h2 {margin-bottom:8px;font-size:22px;}
  .nnf-pause-choice {min-height:66px;margin:9px 0;padding:6px 24px;}
  .nnf-pause-choice svg {width:50px;height:50px;flex-basis:50px;}
}
