/* V107: the reference pause layout inside the existing game stage. */
.dragon-ui #pausePanel.pause-v107 {
  padding: 0;
  overflow: hidden;
  background: #060a10c9;
  backdrop-filter: blur(2px);
  color: #fbf6e8;
  text-align: left;
}
.dragon-ui #pausePanel.pause-v107:not(.hidden) { display: block; }
.dragon-ui #pausePanel.pause-v107 > .pause-scene107 {
  position: relative;
  display: block;
  width: 100%; height: 100%; max-height: none;
  margin: 0; padding: 0;
  overflow: hidden;
  border: 0; border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: 'MF Sans', sans-serif;
  text-align: left;
}
.pause-v107 [hidden] { display: none !important; }
.pause-v107 .pause-menu107 {
  position: absolute;
  z-index: 3;
  inset: 0 auto 0 0;
  width: 45%;
  padding: 6cqh 6.5cqw 13cqh 4.2cqw;
  box-sizing: border-box;
  isolation: isolate;
}
.pause-v107 .pause-menu107::before {
  content: '';
  position: absolute; z-index: -1; inset: 0;
  background: #07090ef5;
  clip-path: polygon(0 0,100% 0,85% 100%,0 100%);
}
.dragon-ui #pausePanel.pause-v107 #pauseTag {
  display: block;
  margin: 0;
  color: #e6c67c;
  font: 800 clamp(19px, 3.5cqw, 44px)/1.1 'MF Number', 'MF Sans', sans-serif;
  letter-spacing: .055em;
  text-align: left;
}
.dragon-ui #pausePanel.pause-v107 #pauseTitle {
  margin: 1.5cqh 0 4cqh;
  font-size: clamp(21px, 2.65cqw, 35px);
  line-height: 1.15;
  color: #fff7df;
  text-align: left;
}
.pause-v107 .pause-actions107 { display: flex; flex-direction: column; gap: 1cqh; }
.dragon-ui #pausePanel.pause-v107 .pause-actions107 > :is(#resume, #restart, #pauseControls107, #pauseAudio107) {
  width: 100%; min-width: 0; min-height: 44px;
  margin: 0; padding: 0 1.7cqw;
  justify-content: space-between;
}
.dragon-ui #pausePanel.pause-v107 .pause-actions107 > .pause-choice107 {
  display: flex;
  align-items: center; justify-content: space-between;
  width: 100%; min-width: 0; min-height: 44px;
  height: 8cqh;
  margin: 0; padding: 0 1.7cqw;
  border: 0; border-bottom: 1px solid #d3ba7750;
  border-radius: 0;
  background: transparent;
  color: #fff6df;
  font: 800 clamp(16px, 2cqw, 25px)/1.1 'MF Sans', sans-serif;
  text-align: left;
  box-shadow: none;
  transform: none;
  transition: color .12s ease, background-color .12s ease;
}
.dragon-ui #pausePanel.pause-v107 .pause-actions107 > .pause-choice107.is-selected107,
.dragon-ui #pausePanel.pause-v107 .pause-actions107 > .pause-choice107:hover,
.dragon-ui #pausePanel.pause-v107 .pause-actions107 > .pause-choice107:focus-visible {
  background: #e5c882;
  color: #15120b;
  clip-path: polygon(3% 0,100% 0,97% 100%,0 100%);
}
.dragon-ui #pausePanel.pause-v107 .pause-actions107 > .pause-choice107:focus-visible {
  outline: 2px solid #fff6d8;
  outline-offset: -4px;
}
.pause-v107 .pause-state107 {
  margin: 2.5cqh 0 0;
  color: #d4c9af;
  font-size: clamp(11px, 1.15cqw, 15px);
}
.dragon-ui #pausePanel.pause-v107 #pauseCopy { display: none; }
.pause-v107 .pause-hero107 {
  position: absolute;
  z-index: 1;
  left: 34%; bottom: 6cqh;
  width: 41%; height: 94%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(8px 10px 9px #0008);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 86%, transparent);
  pointer-events: none;
  user-select: none;
}
.pause-v107 .pause-info107 {
  position: absolute; z-index: 2;
  top: 15cqh; right: 4cqw; width: 23%;
  padding: 2.5cqh 1.8cqw;
  box-sizing: border-box;
  background: #080b10db;
  border-left: 2px solid #d6b66e;
}
.pause-v107 .pause-info-label107 { font-size: clamp(11px, 1.15cqw, 15px); color: #e9cc86; }
.pause-v107 .pause-name107 {
  margin: 1cqh 0 .6cqh;
  font-size: clamp(19px, 2.6cqw, 34px);
  line-height: 1.18;
  color: #fff8e5;
  overflow-wrap: anywhere;
}
.pause-v107 .pause-identity107 { margin: 0; font-size: clamp(10px, 1cqw, 13px); color: #cbc3b0; }
.pause-v107 .pause-stats107 { margin: 2.4cqh 0 0; }
.pause-v107 .pause-stat107 { padding: 1.35cqh 0; border-top: 1px solid #d3ba7733; }
.pause-v107 .pause-stat107 dt { color: #d8c8a3; font-size: clamp(11px, 1.1cqw, 14px); }
.pause-v107 .pause-stat107 dd {
  margin: .3cqh 0 0;
  color: #fff2c9;
  font: 800 clamp(19px, 2.3cqw, 30px)/1.15 'MF Number', 'MF Sans', sans-serif;
  font-variant-numeric: tabular-nums;
}
.pause-v107 #pauseScore107[data-score-mode='label'] {
  font-family: 'MF Sans', sans-serif;
  font-size: clamp(12px, 1.25cqw, 16px);
  line-height: 1.4;
  white-space: nowrap;
}
.pause-v107 .pause-mission107 {
  position: absolute; z-index: 4;
  left: 3.2cqw; right: 3.2cqw; bottom: 5.6cqh;
  display: flex; align-items: center; gap: 1.8cqw;
  min-height: 6.8cqh;
  padding: .9cqh 1.5cqw;
  box-sizing: border-box;
  border-left: 3px solid #e0bf74;
  background: #3d1820f0;
}
.pause-v107 .pause-mission107 > span { color: #f0d08a; white-space: nowrap; font-size: clamp(11px, 1.15cqw, 15px); }
.pause-v107 .pause-mission107 b { color: #fff5df; font-size: clamp(12px, 1.4cqw, 19px); line-height: 1.4; }
.pause-v107 .pause-mission107 small { margin-left: auto; color: #d6c8b9; font-size: clamp(10px, 1cqw, 13px); text-align: right; }
.pause-v107 .pause-hints107 {
  position: absolute; z-index: 4;
  left: 3.2cqw; right: 3.2cqw; bottom: 1.4cqh;
  display: flex; justify-content: space-between; align-items: center;
  font-size: clamp(10px, 1cqw, 13px); color: #d8c8a5;
}
.pause-v107 .pause-hints107 kbd { display: inline-block; padding: 2px 7px; border: 1px solid #dbc88b; color: #fff1c0; }
.pause-v107 .pause-drawer107 {
  position: absolute; z-index: 8;
  inset: 7cqh 5cqw 15cqh 43%;
  padding: 3cqh 2.3cqw;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #d4b56c;
  background: #090c12fc;
  box-shadow: 0 15px 45px #0009;
  scrollbar-width: thin;
  scrollbar-color: #baa371 #11151d;
}
.pause-v107 .pause-drawer-heading107 { display: flex; align-items: center; gap: 12px; justify-content: space-between; border-bottom: 1px solid #c2a96b66; padding-bottom: 2cqh; }
.pause-v107 .pause-drawer-heading107 h3 { margin: 0; color: #f4d58c; font-size: clamp(19px, 2cqw, 26px); }
.dragon-ui #pausePanel.pause-v107 .pause-drawer107 button { min-width: 44px; min-height: 44px; padding: 8px 12px; background: #171d27; border: 1px solid #aa915b; color: #fff0d0; font-size: 14px; }
.dragon-ui #pausePanel.pause-v107 .pause-drawer107 #reviewTutorial { display: block; width: 100%; margin: 16px 0 0; }
.dragon-ui #pausePanel.pause-v107 .pause-drawer107 .control-guide { display: grid; gap: 9px; margin: 2cqh 0; font-size: 14px; line-height: 1.65; text-align: left; }
.dragon-ui #pausePanel.pause-v107 .pause-drawer107 .audio-mixer { display: grid; grid-template-columns: 1fr; gap: 1.3cqh; margin: 2cqh 0; padding: 0; border: 0; }
.dragon-ui #pausePanel.pause-v107 .pause-drawer107 .audio-mixer label { display: grid; grid-template-columns: 1fr auto; text-align: left; color: #fff0d4; font-size: 14px; }
.dragon-ui #pausePanel.pause-v107 .pause-drawer107 .audio-mixer input { grid-column: 1/-1; width: 100%; min-height: 44px; margin: 0; accent-color: #e3c06e; }
.dragon-ui #pausePanel.pause-v107 .pause-drawer107 .audio-mixer output { color: #e7c67d; font-variant-numeric: tabular-nums; }
.dragon-ui #pausePanel.pause-v107 .pause-drawer107 .pause-settings { display: flex; flex-wrap: wrap; gap: 8px; justify-content: stretch; }
.dragon-ui #pausePanel.pause-v107 .pause-drawer107 .pause-settings button { flex: 1; }
.dragon-ui #pausePanel.pause-v107 .pause-drawer107 .voice-note { display: block; font-size: 12px; color: #c9bda7; text-align: left; }
.dragon-ui #pausePanel.pause-v107[data-pause-state='lost'] #pauseTag { font-size: clamp(17px, 2.7cqw, 34px); }
.dragon-ui #pausePanel.pause-v107[data-pause-state='lost'] #pauseCopy { display: block; margin: 2cqh 0 0; color: #e7dcc5; font-size: clamp(12px, 1.1cqw, 15px); line-height: 1.6; text-align: left; }
.pause-v107[data-pause-state='lost'] .pause-hero107 { filter: saturate(.65) drop-shadow(8px 10px 9px #0008); }
/* A 390px landscape stage keeps four 44px actions and a readable status card. */
@container (max-height: 460px) and (min-width: 570px) {
  .pause-v107 .pause-menu107 { padding-top: 3.8cqh; width: 45%; }
  .dragon-ui #pausePanel.pause-v107 #pauseTag { font-size: clamp(18px, 3cqw, 28px); }
  .dragon-ui #pausePanel.pause-v107 #pauseTitle { font-size: clamp(19px, 2.4cqw, 25px); margin: 1cqh 0 2cqh; }
  .pause-v107 .pause-actions107 { gap: .6cqh; }
  .dragon-ui #pausePanel.pause-v107 .pause-actions107 > .pause-choice107 { height: 44px; font-size: 17px; }
  .pause-v107 .pause-state107 { margin-top: 1.5cqh; font-size: 11px; }
  .pause-v107 .pause-info107 { top: 9cqh; padding-top: 2cqh; padding-bottom: 1.5cqh; }
  .pause-v107 .pause-name107 { font-size: 23px; }
  .pause-v107 .pause-stats107 { margin-top: 2cqh; }
  .pause-v107 .pause-stat107 { padding: 1.1cqh 0; }
  .pause-v107 .pause-stat107 dd { font-size: 22px; }
  .pause-v107 .pause-hero107 { left: 35%; width: 38%; }
  .pause-v107 .pause-drawer107 { inset: 3cqh 3cqw 12cqh 42%; padding: 2cqh 2cqw; }
  .dragon-ui #pausePanel.pause-v107 .pause-drawer107 .audio-mixer { gap: 0; margin: 1cqh 0; }
  .dragon-ui #pausePanel.pause-v107 .pause-drawer107 .voice-note { display: none; }
}
@container (max-width: 569px) {
  .pause-v107 .pause-menu107 { width: 65%; padding: 4cqh 9cqw 16cqh 5cqw; }
  .pause-v107 .pause-hero107 { left: 47%; width: 52%; height: 75%; bottom: 13cqh; opacity: .7; }
  .pause-v107 .pause-info107 { top: 7cqh; right: 3cqw; width: 32%; padding: 2cqh 2cqw; }
  .pause-v107 .pause-name107 { font-size: 22px; }
  .pause-v107 .pause-identity107 { display: none; }
  .pause-v107 .pause-stat107 dd { font-size: 19px; }
  .pause-v107 .pause-mission107 { flex-wrap: wrap; gap: 5px 10px; bottom: 6cqh; }
  .pause-v107 .pause-mission107 small { width: 100%; margin-left: 0; text-align: left; }
  .pause-v107 .pause-drawer107 { inset: 3cqh 3cqw 12cqh; }
  .pause-v107 .pause-keyboard107 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dragon-ui #pausePanel.pause-v107 .pause-choice107 { transition: none; }
}