/* Pause drawer, settings, and rules panels. */
#menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(7, 3, 18, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

#menu-overlay:not(.hidden) { pointer-events: auto; }
#menu-overlay.is-open { opacity: 1; }
#menu-overlay.is-closing { opacity: 0; }

.pause-drawer {
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(220px, 20vw, 310px);
  display: flex;
  flex-direction: column;
  padding: max(18px, env(safe-area-inset-top)) 0 max(18px, env(safe-area-inset-bottom));
  background: linear-gradient(90deg, rgba(11, 7, 27, 0.98), rgba(17, 11, 39, 0.94) 78%, rgba(17, 11, 39, 0.3));
  border-right: 1px solid rgba(232, 192, 74, 0.34);
  box-shadow: 18px 0 40px rgba(0, 0, 0, 0.42);
  transform: translateX(-102%);
  transition: transform 220ms ease;
}

#menu-overlay.is-open .pause-drawer { transform: translateX(0); }

.drawer-close,
.panel-close {
  position: relative;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.drawer-close { margin: 0 0 18px 10px; }
.drawer-close::before,
.drawer-close::after,
.panel-close::before,
.panel-close::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 22px;
  width: 30px;
  height: 5px;
  border-radius: 2px;
  background: #ff241d;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.drawer-close::before,
.panel-close::before { transform: rotate(45deg); }
.drawer-close::after,
.panel-close::after { transform: rotate(-45deg); }

.drawer-item {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 26px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  background: linear-gradient(90deg, rgba(45, 37, 72, 0.36), rgba(45, 37, 72, 0));
  color: #fff;
  font: 800 clamp(18px, 1.45vw, 24px)/1 var(--font-body);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 120ms ease, color 120ms ease;
}
.drawer-item:hover,
.drawer-item.is-pressed { background: linear-gradient(90deg, rgba(123, 53, 178, 0.64), rgba(62, 33, 96, 0.18)); color: #ffe671; }
.drawer-item img,
.drawer-item__icon { width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; }
.drawer-item__icon { position: relative; }
.drawer-item__icon--settings {
  border: 7px dotted #fff;
  border-radius: 50%;
  transform: scale(0.82);
}
.drawer-item__icon--settings::after { content: ''; position: absolute; inset: 4px; border: 4px solid #fff; border-radius: 50%; }
.drawer-item__icon--rules { width: 27px; height: 34px; margin-left: 3px; border-radius: 2px; background: #fff; box-shadow: inset 7px 0 #d8d5e3; }
.drawer-item__icon--rules::after { content: ''; position: absolute; left: 9px; top: 8px; width: 14px; height: 3px; background: #4b4265; box-shadow: 0 6px #4b4265, 0 12px #4b4265; }
.drawer-item__icon--stats::before { content: ''; position: absolute; inset: 4px 2px 3px; border-left: 5px solid #fff; border-bottom: 5px solid #fff; }
.drawer-item__icon--stats::after { content: ''; position: absolute; left: 10px; bottom: 8px; width: 5px; height: 10px; background: #fff; box-shadow: 8px -7px #fff, 16px -15px #fff; }
.drawer-spacer { flex: 1; }
.drawer-item--minor { min-height: 60px; font-size: 16px; color: #d8d3e3; }
.drawer-item--minor img { width: 30px; height: 30px; }

.pause-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(680px, calc(100vw - 56px));
  max-height: min(780px, calc(100dvh - 40px));
  overflow: hidden;
  transform: translate(-50%, -50%) scale(0.96);
  border: 3px solid #f6d84e;
  border-radius: 8px;
  background: linear-gradient(180deg, #8412c2 0%, #570597 42%, #290365 100%);
  box-shadow: 0 0 0 2px #5b2500, 0 0 0 5px #b98722, 0 22px 70px rgba(0, 0, 0, 0.72);
  opacity: 0;
  transition: opacity 160ms ease, transform 180ms ease;
}
#menu-overlay.is-open .pause-panel:not(.hidden) { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.pause-panel__header {
  position: relative;
  height: clamp(68px, 9vh, 88px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #c941f1, #9124d1 64%, #7714b5);
  border-bottom: 2px solid rgba(96, 0, 141, 0.65);
  box-shadow: inset 0 2px rgba(255, 255, 255, 0.35), 0 6px 18px rgba(37, 0, 68, 0.42);
}
.pause-panel__header h2 {
  margin: 0;
  color: #fff;
  font: 900 clamp(28px, 4vw, 46px)/1 var(--font-body);
  letter-spacing: 0;
  text-shadow: 0 3px 0 rgba(64, 0, 103, 0.5);
}
.panel-close { position: absolute; right: 0px; top: 0px; border: 2px solid #ffe14e; border-radius: 50%; background: linear-gradient(#d548f0, #72139f); box-shadow: 0 0 0 2px #542000, 0 4px 8px #180023; }
.panel-close::before,
.panel-close::after { left: 8px; top: 20px; background: #fff531; }

.settings-list { padding: 0 12px 10px; }
.setting-row {
  min-height: clamp(64px, 8.5vh, 80px);
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(98, 16, 137, 0.62);
  background: linear-gradient(90deg, rgba(108, 13, 173, 0.24), rgba(29, 0, 78, 0.28));
  color: #fff;
  font: 800 clamp(18px, 2.25vw, 28px)/1.1 var(--font-body);
  text-shadow: 0 2px 2px rgba(31, 0, 59, 0.6);
}
.setting-row:nth-child(even) { background: linear-gradient(90deg, rgba(33, 0, 81, 0.33), rgba(17, 0, 52, 0.42)); }
.setting-row > img,
.setting-row__symbol { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 2px 2px #35104b); }
.setting-row__symbol { position: relative; display: block; }
.setting-row__symbol--hand::before { content: '✋'; font-size: 36px; color: #f3a5ff; }
.setting-row__symbol--discard::before { content: ''; position: absolute; left: 7px; top: 4px; width: 22px; height: 31px; border: 2px solid white; border-radius: 2px; background: linear-gradient(135deg, #ef9cff, #7d2dc4); box-shadow: -6px 5px 0 -2px #df8ff2, -6px 5px 0 0 white; }
.setting-row__symbol--sort::before,
.setting-row__symbol--sort::after { content: ''; position: absolute; width: 22px; height: 29px; top: 7px; border: 2px solid #fff; border-radius: 2px; background: #d87bf0; transform: rotate(-13deg); }
.setting-row__symbol--sort::after { left: 14px; transform: rotate(12deg); background: #9d45da; }
.setting-row__symbol--dialog::before { content: ''; position: absolute; left: 2px; top: 8px; width: 36px; height: 25px; border-radius: 50%; background: #efa1ff; }
.setting-row__symbol--dialog::after { content: ''; position: absolute; left: 10px; top: 28px; border: 8px solid transparent; border-top-color: #efa1ff; transform: rotate(20deg); }

.menu-toggle {
  position: relative;
  width: 100px;
  height: 38px;
  padding: 0;
  border: 2px solid #1f0b38;
  border-radius: 999px;
  background: linear-gradient(#352148, #170d25);
  color: #eee;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
}
.menu-toggle__state { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 900 15px/1 var(--font-body); }
.menu-toggle__knob { position: absolute; left: 3px; top: 50%; width: 34px; height: 34px; border-radius: 50%; transform: translateY(-50%); background: radial-gradient(circle at 32% 24%, #9cff57, #31c218 55%, #15840e); box-shadow: 0 2px 5px #130424; transition: left 150ms ease; }
.menu-toggle.is-on { background: linear-gradient(#ffd03b, #f09200); color: #fff; border-color: #bc6900; }
.menu-toggle.is-on .menu-toggle__state { left: 11px; right: auto; }
.menu-toggle.is-on .menu-toggle__knob { left: 62px; }

.rules-panel { width: min(900px, calc(100vw - 64px)); min-height: min(590px, calc(100dvh - 44px)); }
.rules-pages { min-height: 450px; padding: clamp(28px, 4vh, 44px) clamp(70px, 8vw, 100px) 48px; }
.rules-page { display: none; color: #fff; }
.rules-page.is-active { display: block; }
.rules-page p { margin: 0 auto 28px; max-width: 740px; font: 750 clamp(18px, 2.15vw, 26px)/1.28 var(--font-body); text-align: left; text-shadow: 0 2px 2px #260047; }
.rules-page h3 { margin: 18px 0 26px; text-align: center; color: #63e5ff; font: 900 clamp(25px, 3vw, 36px)/1 var(--font-body); }
.rules-example { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin-top: 34px; }
.rule-group { display: grid; grid-template-columns: repeat(3, 62px); position: relative; }
.rule-group--dead { grid-template-columns: repeat(2, 62px); }
.rule-group b { grid-column: 1 / -1; margin-bottom: 8px; text-align: center; font: 900 22px/1 var(--font-body); color: #42ef35; }
.rule-group--run b { color: #35ddff; }
.rule-group--dead b { color: #ff3b2f; }
.rules-steps { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 70px; color: #fff; }
.rules-steps span { width: 50px; height: 50px; display: grid; place-items: center; border: 3px solid #ffe665; border-radius: 50%; background: #4d0b88; font: 900 25px/1 var(--font-body); }
.rules-steps b { font: 900 18px/1 var(--font-body); color: #62e5ff; }
.rules-steps i { width: 34px; height: 3px; background: #f6d84e; }
.rules-score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 55px; }
.rules-score-grid span { padding: 24px 10px; border: 2px solid #d9b947; border-radius: 6px; background: rgba(18, 0, 56, .52); text-align: center; font: 700 18px/1.25 var(--font-body); }
.rules-score-grid b { display: block; margin-bottom: 12px; color: #ffe86c; font-size: 30px; }
.rules-arrow { position: absolute; top: 54%; width: 52px; height: 70px; border: 0; background: transparent; cursor: pointer; }
.rules-arrow::before { content: ''; position: absolute; inset: 15px 10px; border-top: 7px solid white; border-right: 7px solid white; filter: drop-shadow(0 0 3px #b993ff); }
.rules-arrow--prev { left: 15px; }
.rules-arrow--prev::before { transform: rotate(-135deg); }
.rules-arrow--next { right: 15px; }
.rules-arrow--next::before { transform: rotate(45deg); }
.rules-arrow:disabled { opacity: .2; cursor: default; }
.rules-dots { position: absolute; left: 50%; bottom: 18px; display: flex; gap: 8px; transform: translateX(-50%); }
.rules-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); }
.rules-dots span.is-active { background: #ffe15a; box-shadow: 0 0 8px #ffe15a; }
.rules-tutorial-btn { position: absolute; right: 22px; bottom: 12px; min-height: 34px; padding: 6px 12px; border: 1px solid #dfbd45; border-radius: 5px; background: rgba(31, 3, 73, .75); color: #ffe66b; font: 800 11px/1 var(--font-body); cursor: pointer; }

.stats-panel { width: min(680px, calc(100vw - 40px)); }
.stats-rank { padding: 24px 28px 18px; text-align: center; background: rgba(28, 0, 71, .34); }
.stats-rank > span { display: block; color: #ffe66b; font: 900 22px/1 var(--font-body); }
.stats-rank > strong { display: block; margin: 7px 0 13px; color: #fff; font: 800 14px/1 var(--font-body); }
.stats-xp { height: 12px; overflow: hidden; border: 2px solid #b58b27; border-radius: 999px; background: #21043f; }
.stats-xp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #48bf27, #b8ef4a); transition: width 220ms ease; }
.stats-rank small { display: block; margin-top: 7px; color: rgba(255,255,255,.7); font: 700 11px/1 var(--font-body); }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; padding: 1px 12px 14px; background: rgba(25,0,62,.42); }
.stats-grid > div { display: flex; justify-content: space-between; align-items: center; min-height: 66px; padding: 0 18px; background: rgba(100,12,162,.34); }
.stats-grid span { color: rgba(255,255,255,.78); font: 700 14px/1 var(--font-body); }
.stats-grid strong { color: #fff; font: 900 20px/1 var(--font-body); }

@media (max-width: 640px) {
  .pause-drawer { width: min(250px, 78vw); }
  .drawer-item { min-height: 64px; padding: 10px 20px; font-size: 18px; }
  .pause-panel { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .pause-panel__header { height: 64px; }
  .pause-panel__header h2 { font-size: 27px; }
  .panel-close { right: 0px; top: 0px; width: 42px; height: 42px; }
  .panel-close::before, .panel-close::after { left: 7px; top: 18px; width: 26px; }
  .settings-list { padding: 0 5px 5px; }
  .setting-row { min-height: 67px; grid-template-columns: 40px 1fr auto; gap: 8px; padding: 0 10px; font-size: 15px; }
  .setting-row > img, .setting-row__symbol { width: 34px; height: 34px; }
  .menu-toggle { width: 82px; height: 34px; }
  .menu-toggle__knob { width: 30px; height: 30px; }
  .menu-toggle.is-on .menu-toggle__knob { left: 48px; }
  .menu-toggle__state { right: 8px; font-size: 12px; }
  .menu-toggle.is-on .menu-toggle__state { left: 8px; }
  .rules-panel { min-height: calc(100dvh - 30px); }
  .rules-pages { min-height: 620px; padding: 26px 42px 45px; }
  .rules-page p { font-size: 15px; line-height: 1.35; }
  .rules-example { flex-wrap: wrap; gap: 18px 5px; margin-top: 25px; }
  .rule-group { grid-template-columns: repeat(3, 44px); }
  .rule-group--dead { grid-template-columns: repeat(2, 44px); }
  .rule-group b { font-size: 15px; }
  .rules-steps { margin-top: 45px; flex-wrap: wrap; gap: 8px; }
  .rules-steps span { width: 42px; height: 42px; }
  .rules-steps b { font-size: 13px; }
  .rules-steps i { width: 12px; }
  .rules-score-grid { grid-template-columns: 1fr; margin-top: 25px; gap: 9px; }
  .rules-score-grid span { padding: 14px; }
  .rules-score-grid b { display: inline; margin-right: 16px; font-size: 22px; }
  .rules-arrow { width: 38px; }
  .rules-arrow--prev { left: 2px; }
  .rules-arrow--next { right: 2px; }
  .rules-tutorial-btn { right: 50%; bottom: 12px; transform: translateX(50%); white-space: nowrap; }
  .stats-grid { grid-template-columns: 1fr; max-height: calc(100dvh - 235px); overflow-y: auto; }
  .stats-grid > div { min-height: 52px; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .pause-panel { max-height: calc(100dvh - 24px); }
  .pause-panel__header { height: 54px; }
  .pause-panel__header h2 { font-size: 27px; }
  .setting-row { min-height: 48px; font-size: 16px; }
  .setting-row > img, .setting-row__symbol { width: 31px; height: 31px; }
  .settings-list { padding-bottom: 4px; }
  .rules-panel { min-height: calc(100dvh - 24px); }
  .rules-pages { min-height: 390px; padding-top: 20px; }
  .rules-page p { font-size: 17px; margin-bottom: 15px; }
  .rules-example { margin-top: 12px; }
}