/* HUD 외형, 44px 이상 입력 영역. */
.frame { --menu-size: max(44px, var(--touch-min)); }
.frame--mo { --hud-tool-height: var(--touch-min); --hud-row-height: var(--touch-min); --hud-inline: 12px; --hud-tool-gap: 9px; }
.hud__row, .frame--mo .mhud__row { padding-right: calc(var(--menu-size) + var(--hud-tool-gap)); }
.menu-toggle {
  position: absolute; top: var(--hud-top); right: var(--hud-inline); z-index: 100;
  width: var(--menu-size); height: var(--menu-size); padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 999px;
  background: transparent; color: #e8e4d8; cursor: pointer;
}
.menu-toggle::before { content: ''; position: absolute; top: calc((var(--hud-row-height) - var(--hud-tool-height)) / 2); right: 0; width: var(--hud-tool-height); height: var(--hud-tool-height);
  box-sizing: border-box; border: 1.5px solid rgba(255,255,255,.22); border-radius: inherit; background: rgba(255,255,255,.1); }
.frame--mo .menu-toggle::before { border: 0; background: rgba(255,255,255,.12); }
.menu-toggle:hover::before { background: rgba(255,255,255,.2); }
.game-menu.overlay {
  inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(16,22,38,.8);
}
.game-menu__card {
  width: min(400px, 100%); max-height: 100%; overflow-y: auto;
  padding: 24px; border-radius: 20px; background: #faf6ec; color: var(--ink);
  box-shadow: 0 20px 60px #0006;
}
.game-menu h2 { margin: 0 0 18px; font: 28px/1.3 var(--font-title); }
.game-menu__actions, .game-menu__form { display: flex; flex-direction: column; gap: 10px; }
.game-menu__button {
  min-height: var(--menu-size); padding: 10px 16px; width: 100%; border: 1px solid #c8c3b8;
  border-radius: 12px; background: white; color: var(--ink); font: 600 17px/1.4 var(--font-body); cursor: pointer;
}
.game-menu__button:hover { filter: brightness(.96); }
.game-menu__button--primary { background: var(--volt); border-color: var(--volt-dark); }
.game-menu__button--danger { background: #a53430; color: white; border-color: #a53430; }
.game-menu__row { display: flex; gap: 10px; margin-top: 10px; }
.game-menu input {
  width: 100%; min-height: var(--menu-size); padding: 12px; border: 2px solid #9098a6;
  border-radius: 10px; font: 24px/1.4 var(--font-body); letter-spacing: .15em; background: white; color: var(--ink);
}
.game-menu label, .game-menu p { font-size: 16px; line-height: 1.5; }
.game-menu__hint { color: #606979; }
.game-menu__error { color: #a53430; margin: 12px 0 0; }
.game-menu__error:empty { display: none; }
.menu-toggle:focus-visible, .game-menu :focus-visible { outline: 3px solid #3973b9; outline-offset: 2px; }
.frame--paused > :not(.game-menu):not(.menu-toggle) { visibility: hidden; }
.frame--paused > :not(.game-menu), .frame--paused > :not(.game-menu) * { animation-play-state: paused !important; }
.frame--landscape .game-menu__card { padding: 16px; }
.frame--landscape .game-menu h2 { margin-bottom: 10px; }

.menu-toggle__lines { position: absolute; right: calc((var(--hud-tool-height) - 16px) / 2); top: calc((var(--hud-row-height) - 12px) / 2); display: flex; flex-direction: column; gap: 3px; width: 16px; }
.menu-toggle__lines i { height: 2px; width: 100%; background: currentColor; border-radius: 2px; }