/* Full-screen menu surfaces; existing game layout remains scoped to .site-wrap. */
body.in-main-menu { overflow: hidden; background: #101712; }
body.in-main-menu > .site-wrap { display: none; }
body.in-main-menu::before { z-index: 31; opacity: .035; }

.main-menu {
  --menu-ink: #362e25;
  --menu-paper: #cabb99;
  --menu-faint: #6c604c;
  position: fixed;
  inset: 0;
  z-index: 30;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #d5c8a9;
  background: #101712;
  text-align: left;
  scrollbar-color: #746a51 #101712;
  isolation: isolate;
}
.menu-backdrop { position: fixed; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; }
.main-menu-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 450px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 9vw, 150px);
  width: min(1240px, calc(100% - clamp(44px, 11vw, 180px)));
  min-height: calc(100svh - 75px);
  margin: 0 auto;
  padding: max(32px, env(safe-area-inset-top)) 0 30px;
}
.menu-paper {
  position: relative;
  width: 100%;
  padding: clamp(28px, 3.8vw, 53px) clamp(27px, 3.7vw, 50px) clamp(27px, 3vw, 41px);
  color: var(--menu-ink);
  border: 1px solid #d8c7a044;
  background: linear-gradient(108deg, #b9a68121, #f3e0b413 37%, #7d654712), #c6b58e;
  box-shadow: 1px 2px 0 #776648, 10px 18px 48px #02070390, inset 0 0 62px #77572e35;
  transform: rotate(-.65deg);
}
.menu-paper::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid #66553630;
  pointer-events: none;
}
.menu-paper::after {
  content: '';
  position: absolute;
  top: -1px;
  right: 27px;
  width: 28px;
  height: 39px;
  border: 1px solid #7d382d;
  border-top: 0;
  background: #864337;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 81%, 0 100%);
  opacity: .9;
}
.menu-logo {
  margin: 0 0 14px;
  color: #3b3024;
  font: 700 clamp(33px, 3.35vw, 48px)/1.16 'KaiTi', 'STKaiti', 'Noto Serif SC', serif;
  letter-spacing: clamp(1px, .25vw, 3px);
  text-shadow: 1px 1px 0 #ecddbb80;
  white-space: nowrap;
}
.menu-intro { margin: 0 0 12px; max-width: 29em; color: #645440; font: 13px/1.95 'Microsoft YaHei', sans-serif; letter-spacing: 1px; }
.menu-credit { display: inline-block; margin: 0 0 9px; padding: 5px 10px 5px 9px; border-left: 3px solid #824b3b; color: #593b2b; background: #8c4c3420; font: 14px/1.5 'Microsoft YaHei', sans-serif; letter-spacing: 1px; }
.menu-credit strong { color: #733e2e; font-weight: 700; }
.brand .developer-credit { color: #c1a276; font-size: 11px; letter-spacing: 1px; }
.menu-rule { margin: 7px 0 22px; color: #8b7454; font-size: 12px; letter-spacing: 4px; }
.menu-subtitle { margin: 0 0 8px; color: #998e72; font-size: 11px; line-height: 1.6; letter-spacing: 2px; }
.menu-paper .eyebrow, .menu-paper > small { display: block; margin: 0 0 12px; color: #7a563d; font-size: 11px; letter-spacing: 3px; }
.menu-buttons { display: grid; gap: 10px; }
.menu-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 11px 17px;
  color: #4b3b2a;
  border: 1px solid #7e694354;
  border-radius: 1px;
  background: #e4d1a837;
  box-shadow: inset 0 1px #eddeb147, 0 2px #8b74461a;
  font: 600 17px/1.4 'KaiTi', 'STKaiti', 'Microsoft YaHei', serif;
  letter-spacing: 3px;
  text-align: left;
  touch-action: manipulation;
  transition: background .16s, color .16s, border-color .16s, transform .16s;
}
.menu-button > span:last-child, .menu-button small { color: inherit; font-size: 11px; letter-spacing: 1px; opacity: .62; }
.menu-button:not(:disabled):hover { color: #302317; border-color: #735337; background: #ebd8af78; transform: translateX(3px); }
.menu-button:not(:disabled):active { transform: translate(2px, 1px); background: #ae967157; }
.menu-button:focus-visible { outline: 3px solid #744538; outline-offset: 3px; }
.menu-button:disabled { cursor: not-allowed; color: #8d8168; border-color: #93826a3d; background: #a7987d14; box-shadow: none; opacity: .63; transform: none; }
.menu-button.primary, .menu-button.is-primary, .menu-button[data-action="start"], .menu-button#startButton {
  color: #efe0bd; background: #824b3b; border-color: #613a2b; box-shadow: inset 0 1px #c58b6644, 0 2px #5c3a2d;
}
.menu-button.primary:hover, .menu-button.is-primary:hover, .menu-button[data-action="start"]:hover, .menu-button#startButton:hover { color: #fff0cc; background: #965640; border-color: #613a2b; }
.menu-paper .menu-note, .menu-paper .start-hint, .menu-paper .setting-note { margin: 19px 0 0; color: #776044; font-size: 10px; line-height: 1.8; letter-spacing: 1px; }
.menu-vignette { position: absolute; top: 85svh; left: 61%; width: 35%; margin: 0; color: #b9ae8e; text-align: center; text-shadow: 0 2px 8px #000; }
.menu-vignette strong, .menu-vignette h2, .menu-vignette > p:first-child { display: block; margin: 0 0 6px; font: 22px/1.4 'KaiTi', 'STKaiti', serif; font-weight: 400; letter-spacing: 7px; color: #d4c3a1; }
.menu-vignette p, .menu-vignette small { margin: 0; font-size: 10px; line-height: 1.8; letter-spacing: 2px; color: #988e74; }
.menu-footer { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; width: min(1240px, calc(100% - clamp(44px, 11vw, 180px))); min-height: 65px; margin: 0 auto; padding: 12px 0 max(20px, env(safe-area-inset-bottom)); color: #847e68; font-size: 11px; line-height: 1.7; letter-spacing: 1px; }
.menu-footer kbd { min-width: 0; height: auto; padding: 0 2px; color: #bcb097; border: 0; background: none; box-shadow: none; font: inherit; }

.secondary-menu { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: #08110eed; color: #d9d0b9; overflow: auto; overscroll-behavior: contain; }
.menu-sheet { width: min(100%, 1000px); max-height: 90dvh; overflow-x: hidden; overflow-y: auto; padding: clamp(20px, 3.5vw, 44px); border: 1px solid #72654a; background: linear-gradient(115deg, #8b795015, transparent 48%), #25281f; box-shadow: 0 24px 80px #0008, inset 0 0 0 7px #0c160a12; scrollbar-color: #817151 #22271d; }
.menu-sheet-header { position: sticky; top: calc(-1 * clamp(20px, 3.5vw, 44px)); z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0 0 26px; padding: 0 0 19px; border-bottom: 1px solid #6c624443; background: #25281ff5; }
.menu-sheet-header h1, .menu-sheet-header h2 { margin: 0; color: #ded0ad; font: 700 clamp(25px, 3vw, 36px)/1.4 'KaiTi', 'STKaiti', serif; letter-spacing: 4px; }
.menu-sheet-header button, .secondary-menu .menu-back { width: auto; flex: 0 0 auto; min-height: 44px; min-width: 74px; padding: 8px 14px; border: 1px solid #84705271; color: #cbbb98; font-size: 13px; white-space: nowrap; }
.menu-sheet-header button:hover, .secondary-menu .menu-back:hover { background: #9e87522b; border-color: #c0a575; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.setting-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .82fr); align-items: center; gap: 14px; min-height: 76px; padding: 15px 0; border-bottom: 1px solid #80745627; }
.setting-row label, .setting-row > span { color: #cfc4aa; font-size: 14px; line-height: 1.5; }
.setting-row label small { display: block; margin-top: 5px; color: #8f876e; font-size: 10px; line-height: 1.6; }
.setting-row input, .setting-row select, .setting-row button { min-width: 0; width: 100%; min-height: 42px; color: #d9cbb0; border: 1px solid #7c6c4c75; border-radius: 2px; background: #161e16; padding: 8px 10px; font: inherit; accent-color: #b69b64; }
.setting-row input[type="range"] { padding: 6px 0; min-height: 44px; border: 0; background: transparent; cursor: pointer; }
.setting-row input[type="checkbox"] { justify-self: end; min-height: 24px; width: 24px; height: 24px; padding: 0; cursor: pointer; }
.setting-row select { cursor: pointer; }
.setting-row output { color: #bba984; font: 12px/1.5 Consolas, monospace; }
.setting-slider { display: grid; grid-template-columns: minmax(0, 1fr) 35px; align-items: center; gap: 8px; }
.setting-slider output { text-align: right; }
.setting-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.setting-inline button { justify-content: center; padding: 8px 5px; font-size: 11px; letter-spacing: 0; }
.setting-row .setting-switch { justify-content: center; letter-spacing: 2px; }
.setting-switch[aria-pressed="true"] { color: #ecdbb6; border-color: #9e8959; background: #6c624038; }
.setting-row button:disabled, .setting-row select:disabled { color: #7e7965; border-color: #5c594438; background: #192117; opacity: .55; cursor: not-allowed; }
.setting-row input:focus-visible, .setting-row select:focus-visible, .setting-row button:focus-visible { outline: 2px solid #d8bb7b; outline-offset: 3px; }
.setting-row button:hover { background: #a78b4d21; }
.setting-note { margin: 18px 0 0; color: #a09479; font-size: 12px; line-height: 1.85; }
.menu-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 24px; padding-bottom: 14px; border-bottom: 1px solid #71644545; }
.menu-tabs button { width: auto; min-height: 44px; padding: 9px 17px; border: 1px solid #7063425c; color: #b2a588; background: #19201775; font-size: 13px; letter-spacing: 1px; }
.menu-tabs button:hover { color: #ede0bc; background: #8e764826; }
.menu-tabs button[aria-selected="true"], .menu-tabs button[aria-pressed="true"], .menu-tabs button.active, .menu-tabs button.is-active { color: #efe0b8; background: #74624475; border-color: #b29765; }
.codex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 12px; }
.codex-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 147px; padding: 13px 9px; border: 1px solid #70644659; border-radius: 1px; background: #18201985; text-align: center; }
.codex-card canvas { display: block; width: 74px; height: 70px; max-width: 100%; object-fit: contain; }
.codex-card strong { font-size: 13px; font-weight: 500; color: #d6c8a7; line-height: 1.5; }
.codex-card small { color: #8e846c; font-size: 10px; line-height: 1.5; }
.codex-card:hover { border-color: #ac9160; background: #34402a7a; transform: translateY(-2px); }
.codex-card:focus-visible { outline: 2px solid #d5b374; outline-offset: 2px; }
.codex-card[aria-selected="true"], .codex-card[aria-pressed="true"], .codex-card.selected, .codex-card.is-selected { border-color: #c9a776; background: #76614043; box-shadow: inset 0 0 0 1px #b69a6240; }
.codex-card.locked, .codex-card[data-locked="true"] { opacity: .57; }
.codex-detail { margin-top: 24px; padding: 20px 22px; border: 1px solid #8e794a75; background: #131d166b; color: #bbaf93; line-height: 1.85; scroll-margin-top: 110px; }
.codex-detail h2, .codex-detail h3, .codex-detail > strong { display: block; margin: 0 0 10px; font: 24px/1.4 'KaiTi', 'STKaiti', serif; color: #e0cdab; letter-spacing: 2px; }
.codex-detail p { margin: 8px 0; font-size: 13px; }
.codex-detail canvas { float: left; width: 100px; height: 100px; margin: 0 18px 12px 0; object-fit: contain; }
.codex-detail::after { content: ''; display: block; clear: both; }
.controls-guide { padding: 2px 0 10px; }
.controls-guide h3 { margin: 21px 0 8px; color: #d1c29e; font: 21px/1.5 'KaiTi', 'STKaiti', serif; letter-spacing: 2px; }
.controls-guide p { margin: 0 0 12px; color: #a79f85; font-size: 13px; line-height: 1.9; }

.menu-confirm { width: min(440px, calc(100% - 36px)); max-height: calc(100dvh - 36px); overflow: auto; margin: auto; padding: 28px; border: 1px solid #a88b59; border-radius: 1px; color: #d8c8a6; background: #292a20; box-shadow: 0 18px 90px #000b; }
.menu-confirm::backdrop { background: #050a08ce; }
.menu-confirm h2 { margin: 0 0 13px; font: 28px/1.4 'KaiTi', 'STKaiti', serif; letter-spacing: 2px; color: #e5d4b0; }
.menu-confirm p { margin: 0 0 22px; color: #b3a78c; font-size: 13px; line-height: 1.85; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.confirm-actions button { width: auto; min-height: 44px; padding: 10px 19px; border: 1px solid #8c78544f; color: #d7c4a0; background: #3a3728; font-size: 13px; letter-spacing: 1px; }
.confirm-actions button:last-child { color: #f0dcb7; border-color: #92614b; background: #784a38; }
.confirm-actions button:hover { filter: brightness(1.12); }
.menu-loading { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px; color: #d5c8a9; background: #101712; text-align: center; }
.menu-loading strong { font: 38px/1.4 'KaiTi', 'STKaiti', serif; letter-spacing: 6px; }
.menu-loading p { margin: 0; font-size: 14px; letter-spacing: 3px; }
.menu-loading small { color: #8d866f; font-size: 11px; }
.main-menu.menu-leaving .main-menu-layout { opacity: .35; transition: opacity .14s; }
@keyframes menu-panel-enter { from { opacity: .2; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes menu-load-enter { from { opacity: 0; } to { opacity: 1; } }
.menu-sheet.menu-entering { animation: menu-panel-enter .16s ease-out; }
.menu-loading:not([hidden]) { animation: menu-load-enter .13s ease-out; }

#pauseOverlay.paper-pause { overflow: auto; padding: clamp(12px, 3vw, 35px); color: #ddceb0; background: #131c15ee; }
.paper-pause > .eyebrow { margin: 0 0 7px; color: #99896a; }
.paper-pause h2 { margin: 7px 0 9px; font: clamp(22px, 3vw, 35px)/1.35 'KaiTi', 'STKaiti', serif; }
.paper-pause > p:not(.eyebrow) { margin: 0 0 16px; color: #aaa083; font-size: 12px; }
.paper-pause > small { display: block; margin-top: 12px; color: #8f8b73; font-size: 10px; }
.pause-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; width: min(100%, 390px); }
.pause-actions button { justify-content: center; min-width: 0; min-height: 43px; margin: 0; padding: 10px 14px; border: 1px solid #8c775450; background: #64573a35; color: #d1c1a0; font-size: 12px; line-height: 1.4; letter-spacing: 1px; box-shadow: none; }
.pause-actions button:first-child { background: #814a37; border-color: #a96c50; color: #f0ddba; }
.pause-actions button:hover { border-color: #c3a578; filter: brightness(1.1); }
#fpsDisplay { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 6; min-width: 120px; padding: 5px 9px; color: #ecdfb2; background: #10150de6; border: 1px solid #b39a6277; border-left: 3px solid #b39a62; border-radius: 2px; font: 700 14px/1.4 Consolas, 'Microsoft YaHei', monospace; font-variant-numeric: tabular-nums; text-align: center; pointer-events: none; text-shadow: 0 1px #000; }

@media (min-width: 1900px) and (min-aspect-ratio: 2/1) {
  .main-menu-layout, .menu-footer { width: min(1480px, 76%); }
  .main-menu-layout { grid-template-columns: minmax(360px, 470px) minmax(0, 1fr); gap: 190px; }
}
@media (max-width: 850px) {
  .main-menu-layout { width: calc(100% - 52px); grid-template-columns: minmax(285px, 380px) 1fr; gap: 22px; }
  .menu-paper { padding: 32px 29px; }
  .menu-logo { font-size: 37px; letter-spacing: 1px; }
  .menu-vignette { left: 58%; width: 39%; }
  .menu-footer { width: calc(100% - 52px); }
  .settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .main-menu-layout { display: block; width: min(400px, calc(100% - 36px)); min-height: 0; padding-top: max(190px, 26svh); padding-bottom: 0; }
  .menu-paper { padding: 28px 27px; transform: rotate(-.3deg); }
  .menu-logo { font-size: clamp(29px, 8.5vw, 36px); letter-spacing: 1px; margin-bottom: 11px; }
  .menu-intro { font-size: 12px; margin-bottom: 18px; line-height: 1.8; letter-spacing: .7px; }
  .menu-rule { margin: 3px 0 19px; }
  .menu-buttons { gap: 9px; }
  .menu-button { min-height: 48px; padding: 10px 15px; font-size: 16px; }
  .menu-paper .menu-note, .menu-paper .start-hint { margin-top: 15px; font-size: 10px; }
  .menu-vignette { position: absolute; top: max(21px, env(safe-area-inset-top)); left: 2px; width: 110px; margin: 0; text-align: left; }
  .menu-vignette strong, .menu-vignette h2, .menu-vignette > p:first-child { font-size: 20px; letter-spacing: 4px; }
  .menu-vignette p, .menu-vignette small { font-size: 10px; letter-spacing: 1px; }
  .menu-footer { width: calc(100% - 42px); min-height: 70px; padding-top: 20px; justify-content: center; text-align: center; gap: 4px 18px; font-size: 10px; }
  .secondary-menu { padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)); }
  .menu-sheet { padding: 20px 17px; max-height: calc(100dvh - 28px); }
  .menu-sheet-header { top: -20px; margin-bottom: 19px; padding-bottom: 15px; }
  .setting-row { grid-template-columns: minmax(0, 1fr) minmax(110px, .85fr); gap: 10px; min-height: 70px; }
  .setting-row label { font-size: 13px; }
  .menu-tabs { gap: 5px; margin-bottom: 18px; }
  .menu-tabs button { flex: 1 1 auto; padding: 8px 9px; font-size: 12px; }
  .codex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .codex-card { min-height: 134px; }
  .codex-detail { padding: 16px; }
  .codex-detail canvas { width: 75px; height: 75px; margin-right: 12px; }
  .paper-pause > .eyebrow { display: none; }
  .paper-pause h2 { font-size: 21px; margin: 0 0 6px; }
  .paper-pause > p:not(.eyebrow) { margin-bottom: 9px; font-size: 10px; }
  .pause-actions { gap: 6px; }
  .pause-actions button { min-height: 36px; padding: 7px; font-size: 11px; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .main-menu-layout { width: min(1030px, calc(100% - 56px)); min-height: calc(100svh - 44px); grid-template-columns: minmax(265px, 360px) 1fr; gap: 35px; padding: max(15px, env(safe-area-inset-top)) 0 8px; }
  .menu-paper { padding: 20px 26px 19px; }
  .menu-paper::after { height: 28px; width: 23px; right: 20px; }
  .menu-logo { font-size: 34px; margin-bottom: 7px; letter-spacing: 1px; }
  .menu-credit { font-size: 12px; margin-bottom: 4px; padding: 3px 8px; }
  .menu-paper .eyebrow, .menu-paper > small { font-size: 9px; margin-bottom: 5px; }
  .menu-intro { font-size: 10px; line-height: 1.65; margin-bottom: 12px; }
  .menu-rule { margin: 2px 0 11px; font-size: 10px; }
  .menu-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .menu-button { min-height: 44px; padding: 8px 10px; font-size: 14px; letter-spacing: 1px; }
  .menu-button > span:last-child, .menu-button small { font-size: 9px; }
  .menu-paper .menu-note, .menu-paper .start-hint { margin-top: 10px; font-size: 9px; }
  .menu-vignette { top: 84svh; left: 55%; width: 40%; }
  .menu-vignette small { display: none; }
  .menu-vignette strong, .menu-vignette h2, .menu-vignette > p:first-child { font-size: 18px; margin-bottom: 4px; }
  .menu-footer { width: min(1030px, calc(100% - 56px)); min-height: 42px; padding: 7px 0 max(9px, env(safe-area-inset-bottom)); font-size: 9px; }
  .secondary-menu { padding: max(12px, env(safe-area-inset-top)) 20px max(12px, env(safe-area-inset-bottom)); }
  .menu-sheet { max-height: calc(100dvh - 24px); padding: 19px 24px; }
  .menu-sheet-header { top: -19px; margin-bottom: 15px; padding-bottom: 11px; }
  .menu-sheet-header h1, .menu-sheet-header h2 { font-size: 26px; }
  .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .setting-row { min-height: 62px; padding: 9px 0; gap: 10px; }
  #pauseOverlay.paper-pause { padding: 10px 14px; }
  .paper-pause > .eyebrow { display: none; }
  .paper-pause h2 { font-size: 24px; margin: 0 0 8px; }
  .paper-pause > p:not(.eyebrow) { margin: 0 0 12px; }
  .pause-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 570px); gap: 7px; }
  .pause-actions button { padding: 9px 7px; font-size: 11px; min-height: 42px; }
}
@media (max-height: 370px) {
  #pauseOverlay.paper-pause { justify-content: flex-start; }
  .paper-pause h2 { margin-top: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .main-menu *, .secondary-menu *, .menu-confirm *, .paper-pause *, .menu-loading { animation: none !important; transition: none !important; }
}
body[data-quality="reduced"] .main-menu *, body[data-quality="reduced"] .secondary-menu *, body[data-quality="reduced"] .paper-pause * { animation: none !important; }
@media (max-width: 520px) {
  .brand strong { font-size: 16px; letter-spacing: 1px; }
  .brand .developer-credit { font-size: 9px; letter-spacing: .4px; }
  .site-header nav { gap: 9px; }
  #fpsDisplay { top: 7px; right: 8px; min-width: 110px; padding: 4px 6px; font-size: 13px; }
}

/* Gothic main-menu skin. This layer changes presentation only; the game HUD,
   pause controls, save status and gameplay canvas keep their existing styles. */
body.in-main-menu { background: #0c0808; }
.main-menu { --menu-ink: #28170e; --menu-faint: #67452a; --menu-paper: #baa17b; color: #d4b993; background: #0c0808; overflow: hidden; }
.main-menu::before {
  /* One proportional scene fades into the dark foreground on wide displays;
     repeating a second cover image would duplicate candles and expose seams. */
  --scene-width: calc(100svh * 1672 / 941);
  content: '';
  position: fixed;
  top: 0;
  left: calc((100% - var(--scene-width)) * .735);
  width: var(--scene-width);
  height: 100svh;
  z-index: -2;
  background: url('./assets/menu/dungeon.png') center / 100% 100% no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 95%, transparent);
  pointer-events: none;
}
.main-menu .main-menu-layout { display: block; width: 100%; min-height: 100svh; height: 100svh; padding: 0; margin: 0; }
.main-menu .menu-paper {
  --paper-h: 83svh;
  position: absolute;
  left: max(12.8vw, env(safe-area-inset-left));
  top: max(6.5svh, env(safe-area-inset-top));
  width: min(37vw, 57svh);
  height: var(--paper-h);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: calc(var(--paper-h) * .15) calc(var(--paper-h) * .10) calc(var(--paper-h) * .04);
  border: 0;
  color: var(--menu-ink);
  background: none;
  box-shadow: none;
  transform: none;
  isolation: isolate;
  text-align: center;
}
.main-menu .menu-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 0;
  background: url('./assets/menu/parchment.svg') center / 100% 100% no-repeat;
  filter: drop-shadow(8px 12px 12px #0009);
  pointer-events: none;
}
.main-menu .menu-paper::after {
  /* A textured paper underneath the image also keeps the menu readable while
     its decorative asset is loading. It does not contain any baked-in text. */
  content: '';
  position: absolute;
  inset: 10% 3% 2%;
  width: auto;
  height: auto;
  z-index: -2;
  border: 1px solid #5b371e;
  background:
    radial-gradient(ellipse at 1% 12%, #461a13 0 1.6%, transparent 1.9%),
    radial-gradient(ellipse at 99% 78%, #551c15 0 2.1%, transparent 2.5%),
    radial-gradient(ellipse at 5% 83%, #49231680, transparent 20%),
    radial-gradient(ellipse at 95% 4%, #50332199, transparent 18%),
    repeating-linear-gradient(7deg, #3a271b09 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 45% 40%, #d5bd94, #b69b74 64%, #71502f);
  clip-path: polygon(2% 0, 14% 1%, 15% 0, 29% 1%, 38% 0, 57% 1%, 69% 0, 88% 1%, 96% 0, 99% 2%, 98% 9%, 100% 18%, 98% 25%, 99% 43%, 98% 57%, 100% 73%, 98% 82%, 100% 95%, 96% 99%, 84% 98%, 76% 100%, 66% 97%, 56% 99%, 42% 98%, 29% 100%, 26% 96%, 18% 98%, 8% 96%, 3% 99%, 0 93%, 2% 77%, 0 68%, 2% 51%, 0 34%, 1% 26%, 0 15%);
  opacity: 1;
}
.main-menu .menu-intro {
  flex: 0 0 auto;
  margin: 0 0 .9svh;
  max-width: none;
  color: #563b22;
  font: 400 clamp(16px, 2.9svh, 33px)/1.1 'KaiTi', 'STKaiti', serif;
  letter-spacing: 0;
  text-shadow: 0 1px #ead3a350;
}
.main-menu .menu-logo {
  flex: 0 0 auto;
  margin: 0 0 .65svh;
  color: #241409;
  font: 900 clamp(25px, 5.9svh, 70px)/1.18 'STKaiti', 'KaiTi', 'Noto Serif SC', serif;
  letter-spacing: .04em;
  text-shadow: 0 1px #dfc39970, .7px .5px #28160d;
}
.main-menu .menu-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .15em;
  flex: 0 0 auto;
  margin: 0;
  padding: .3svh 0;
  border: 0;
  background: none;
  color: #392311;
  font: 600 clamp(12px, 2.3svh, 26px)/1.4 'STKaiti', 'KaiTi', 'Noto Serif SC', serif;
  letter-spacing: .05em;
  white-space: nowrap;
}
.main-menu .menu-credit::before, .main-menu .menu-credit::after { content: ''; width: 13%; max-width: 42px; height: 1px; margin: 0 .35em; background: linear-gradient(90deg, transparent, #725634); }
.main-menu .menu-credit::after { transform: rotate(180deg); }
.main-menu .menu-credit strong { color: inherit; font-weight: 700; }
.main-menu .menu-rule { flex: 0 0 auto; margin: .1svh 0 1.7svh; height: 1.75svh; color: #604325; font-size: clamp(9px, 1.4svh, 16px); line-height: 1.75svh; letter-spacing: .2em; }
.main-menu .menu-buttons { display: grid; grid-template-columns: minmax(0, 1fr); flex: 0 0 auto; gap: 1.1svh; width: 100%; }
.main-menu .menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 6.3svh;
  min-height: 40px;
  padding: .7svh 30px;
  border: 1px solid #c79864;
  border-radius: 1px;
  color: #e5cca4;
  background: linear-gradient(180deg, #57403235, transparent 25%, #10070655), #302016;
  box-shadow: inset 0 0 0 3px #1c100f, inset 0 0 0 4px #967047, inset 0 0 22px #0c040ba8, 0 3px 5px #170c0966;
  font: 600 clamp(15px, 2.75svh, 30px)/1.1 'STKaiti', 'KaiTi', 'Noto Serif SC', serif;
  letter-spacing: .3em;
  text-indent: .3em;
  text-align: center;
  text-shadow: 0 1px 1px #000;
  clip-path: polygon(0 13%, 2.5% 13%, 2.5% 0, 97.5% 0, 97.5% 13%, 100% 13%, 100% 87%, 97.5% 87%, 97.5% 100%, 2.5% 100%, 2.5% 87%, 0 87%);
  transition: transform .14s ease, filter .14s ease, background-color .14s ease, border-color .14s ease;
}
.main-menu .menu-button::before, .main-menu .menu-button::after { content: '✧'; position: absolute; top: 50%; color: #bf9461; opacity: .75; font-size: .66em; line-height: 1; transform: translateY(-50%); text-indent: 0; letter-spacing: 0; pointer-events: none; }
.main-menu .menu-button::before { left: 9%; }
.main-menu .menu-button::after { right: 9%; }
.main-menu .menu-button#startButton {
  background: linear-gradient(130deg, #bd4c2735, transparent 35%, #17060380), #61190f;
  color: #ffe0b3;
  border-color: #e2b77f;
  box-shadow: inset 0 0 0 3px #29110e, inset 0 0 0 4px #e1ac6b, inset 0 0 23px #28040aa6, 0 3px 7px #1a070b88;
}
.main-menu .menu-button:not(:disabled):hover, .main-menu .menu-button:focus-visible {
  color: #ffecd0;
  border-color: #ffce8d;
  background: linear-gradient(130deg, #ad51372e, transparent 45%, #2b070655), #742719;
  box-shadow: inset 0 0 0 3px #2d120b, inset 0 0 0 4px #eabb79, inset 0 0 18px #2d040666, 0 2px 9px #d0833433;
  filter: brightness(1.09);
  transform: scale(1.025);
  outline: none;
}
.main-menu .menu-button:not(:disabled):active { transform: scale(.985) translateY(1px); filter: brightness(.94); }
.main-menu .menu-button:disabled { color: #a28b71; border-color: #7a6245; background: linear-gradient(180deg, #33251e, #251b16); box-shadow: inset 0 0 0 3px #1d1411, inset 0 0 0 4px #6b5338; opacity: .66; cursor: not-allowed; filter: saturate(.6); }
.main-menu .menu-button:disabled::before, .main-menu .menu-button:disabled::after { opacity: .3; }
.main-menu .menu-buttons:has(.menu-button:not(#startButton):hover) #startButton,
.main-menu .menu-buttons:has(.menu-button:not(#startButton):focus-visible) #startButton:not(:hover),
.main-menu .menu-buttons:has(.menu-button:hover) .menu-button:not(:hover):focus-visible {
  color: #e5cca4;
  border-color: #c79864;
  background: linear-gradient(180deg, #57403235, transparent 25%, #10070655), #302016;
  box-shadow: inset 0 0 0 3px #1c100f, inset 0 0 0 4px #967047, inset 0 0 22px #0c040ba8, 0 3px 5px #170c0966;
  filter: none;
  transform: none;
}
.main-menu .menu-paper .setting-note, .main-menu .menu-paper .menu-note, .main-menu .menu-paper .start-hint { margin: 1svh 0 0; color: #573e2a; font: 400 clamp(9px, 1.12svh, 13px)/1.5 'Microsoft YaHei', sans-serif; letter-spacing: .06em; text-shadow: 0 1px #d8ba8450; }
.main-menu .menu-vignette { position: absolute; top: 85.3svh; left: 55.5%; width: 36%; margin: 0; color: #cfb48c; text-align: center; text-shadow: 0 2px 4px #000, 0 0 16px #000; }
.main-menu .menu-vignette > p:first-child { display: flex; align-items: center; justify-content: center; gap: 1.2em; margin: 0 0 .7svh; color: #dbc4a0; font: 400 clamp(15px, 2.25svh, 25px)/1.2 'STKaiti', 'KaiTi', serif; letter-spacing: .4em; text-indent: .4em; }
.main-menu .menu-vignette > p:first-child::before, .main-menu .menu-vignette > p:first-child::after { content: ''; width: 7%; height: 1px; background: linear-gradient(90deg, transparent, #ac8964); }
.main-menu .menu-vignette > p:first-child::after { transform: rotate(180deg); }
.main-menu .menu-vignette small { color: #b19b7e; font-size: clamp(9px, 1.2svh, 13px); line-height: 1.6; letter-spacing: .12em; }
.main-menu .menu-footer { position: absolute; bottom: 0; left: max(1.7vw, env(safe-area-inset-left)); right: max(1.7vw, env(safe-area-inset-right)); display: flex; flex-wrap: nowrap; width: auto; min-height: 0; margin: 0; padding: 1svh 0 max(2.1svh, env(safe-area-inset-bottom)); color: #a3947a; font-size: clamp(9px, 1.15svh, 12px); line-height: 1.5; gap: 20px; text-shadow: 0 1px 3px #000; }
.main-menu .menu-footer > span:first-child { flex: 0 0 auto; }
.main-menu .menu-suspension { position: absolute; top: calc(-1 * max(6.5svh, env(safe-area-inset-top))); left: 0; width: 100%; height: calc(max(6.5svh, env(safe-area-inset-top)) + 2svh); pointer-events: none; }
.main-menu .menu-suspension i { position: absolute; top: 0; width: clamp(8px, 1.6svh, 18px); height: 100%; transform: translateX(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='32' viewBox='0 0 18 32'%3E%3Crect x='4' y='-9' width='8' height='23' rx='4' fill='%231a100c' stroke='%23674a32' stroke-width='2'/%3E%3Crect x='7' y='8' width='7' height='23' rx='3.5' fill='%23120e0b' stroke='%237b5638' stroke-width='1.7'/%3E%3Cpath d='M6 0v8M9 13v10' fill='none' stroke='%23a38460' opacity='.48'/%3E%3C/svg%3E") center top / 100% auto repeat-y; filter: drop-shadow(3px 2px 2px #000a); }
.main-menu .menu-suspension i:first-child { left: 18.3%; }
.main-menu .menu-suspension i:last-child { left: 81.7%; }

/* Existing secondary panels receive the same bronze / oxblood palette. */
.secondary-menu { background: #10080bf0; color: #d9c8b0; }
.secondary-menu .menu-sheet { border-color: #795336; background: radial-gradient(ellipse at 20% 0, #70413220, transparent 55%), linear-gradient(110deg, #3d251518, transparent 60%), #251a17; box-shadow: 0 24px 80px #000a, inset 0 0 0 5px #14090744, inset 0 0 0 6px #6b4a2733; scrollbar-color: #8c6a45 #1c1412; }
.secondary-menu .menu-sheet-header { border-bottom-color: #95633c55; background: #251a17f5; }
.secondary-menu .menu-subtitle { color: #a38665; }
.secondary-menu .setting-row { border-bottom-color: #80634533; }
.secondary-menu .setting-row input, .secondary-menu .setting-row select, .secondary-menu .setting-row button { color: #e0c6a2; border-color: #86644580; background: #1b110e; accent-color: #c09560; }
.secondary-menu .setting-row input[type='range'] { background: transparent; border: 0; }
.secondary-menu .setting-switch[aria-pressed='true'] { background: #62291e; border-color: #b78a55; color: #f6d9ae; }
.secondary-menu .setting-row button:disabled, .secondary-menu .setting-row select:disabled { color: #86725e; background: #211711; border-color: #6b4e3938; }
.secondary-menu .menu-tabs button { background: #281911; color: #c2a785; border-color: #9b74444d; }
.secondary-menu .menu-tabs button[aria-selected='true'] { color: #f6d9b2; background: #672d21; border-color: #c69a63; }
.secondary-menu .codex-card { background: #190f0b88; border-color: #7a53384d; }
.secondary-menu .codex-card:hover { background: #4e2d2285; border-color: #c49865; }
.secondary-menu .codex-card[aria-pressed='true'] { background: #632c225c; border-color: #c9a776; }
.secondary-menu .codex-detail { background: #130c0a88; border-color: #8e644775; }
body.in-main-menu .menu-confirm { background: linear-gradient(110deg, #4b27182b, transparent), #291a16; border-color: #ac8153; }
body.in-main-menu .menu-confirm::backdrop { background: #080305cc; }
body.in-main-menu .menu-loading { background: #100809; }

@media (max-aspect-ratio: 8/5) and (orientation: landscape) and (min-height: 541px) {
  .main-menu .menu-paper { left: max(7.2vw, env(safe-area-inset-left)); width: min(41vw, 57svh); }
  .main-menu .menu-logo { font-size: min(5.7svh, 4.05vw); }
}
@media (min-aspect-ratio: 2/1) and (min-height: 541px) {
  .main-menu .menu-paper { left: 15vw; width: 57svh; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .main-menu .menu-suspension { top: calc(-1 * max(.8svh, env(safe-area-inset-top))); height: calc(max(.8svh, env(safe-area-inset-top)) + 2svh); }
  .main-menu .menu-paper { --paper-h: 96svh; top: max(.8svh, env(safe-area-inset-top)); left: max(7vw, env(safe-area-inset-left)); width: min(43vw, 69svh); padding: calc(var(--paper-h) * .112) calc(var(--paper-h) * .10) 1svh; }
  .main-menu .menu-intro { margin: 0 0 .3svh; font-size: 3.7svh; line-height: 1; }
  .main-menu .menu-logo { margin-bottom: .5svh; font-size: min(7.1svh, 3.8vw); letter-spacing: .015em; line-height: 1.08; }
  .main-menu .menu-credit { padding: 0; font-size: max(11px, 3.2svh); line-height: 1.3; letter-spacing: .01em; }
  .main-menu .menu-rule { height: 2.4svh; line-height: 2.4svh; margin: 0 0 .9svh; font-size: 2.1svh; }
  .main-menu .menu-buttons { grid-template-columns: minmax(0, 1fr); gap: 1.2svh; }
  .main-menu .menu-button { height: 10svh; min-height: 34px; padding: 1svh 25px; font-size: max(14px, 4.1svh); letter-spacing: .25em; }
  .main-menu .menu-paper .setting-note { margin-top: 1.1svh; font-size: 8px; line-height: 1.25; }
  .main-menu .menu-vignette { top: 86svh; left: 55.5%; width: 36%; }
  .main-menu .menu-vignette > p:first-child { margin-bottom: .4svh; font-size: 4.1svh; }
  .main-menu .menu-vignette small { display: block; font-size: 8px; }
  .main-menu .menu-footer { padding-bottom: max(1.8svh, env(safe-area-inset-bottom)); font-size: 8px; }
}
@media (orientation: portrait) {
  .main-menu .menu-suspension { display: none; }
  .main-menu { overflow-y: auto; }
  .main-menu .main-menu-layout { height: max(100svh, 820px); min-height: 820px; }
  .main-menu .menu-paper { --paper-h: min(690px, 128vw); position: absolute; left: 50%; top: max(160px, 22svh); width: min(94vw, 490px); height: var(--paper-h); transform: translateX(-50%); padding: calc(var(--paper-h) * .12) calc(var(--paper-h) * .09) 20px; }
  .main-menu .menu-intro { font-size: 22px; margin-bottom: 6px; }
  .main-menu .menu-logo { font-size: clamp(27px, 8.1vw, 43px); letter-spacing: .015em; margin-bottom: 6px; }
  .main-menu .menu-credit { font-size: clamp(13px, 3.7vw, 18px); padding: 0; }
  .main-menu .menu-rule { height: 17px; line-height: 17px; font-size: 10px; margin: 2px 0 8px; }
  .main-menu .menu-buttons { gap: 8px; }
  .main-menu .menu-button { min-height: 42px; height: clamp(42px, 11.8vw, 57px); font-size: clamp(17px, 4.6vw, 23px); }
  .main-menu .menu-paper .setting-note { margin-top: 10px; font-size: 9px; }
  .main-menu .menu-vignette { top: max(30px, env(safe-area-inset-top)); left: 4%; width: 46%; }
  .main-menu .menu-vignette > p:first-child { font-size: 20px; letter-spacing: .2em; margin-bottom: 6px; }
  .main-menu .menu-vignette small { display: block; font-size: 10px; }
  .main-menu .menu-footer { position: relative; left: 0; right: 0; margin: -32px 20px 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); font-size: 9px; }
}

/* Verbatim reference image: only the transparent interaction layer is HTML.
   The complete 1672 x 941 composition scales as one unit, including its version. */
body.in-main-menu::before { display: none; }
.main-menu.image-main-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #080606;
  overflow: hidden;
}
.main-menu.image-main-menu[hidden] { display: none; }
.main-menu.image-main-menu::before, .main-menu.image-main-menu::after { content: none; }
.reference-menu-stage {
  position: relative;
  flex: 0 0 auto;
  width: min(100%, calc((100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1672 / 941));
  aspect-ratio: 1672 / 941;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
@supports (height: 100dvh) {
  .reference-menu-stage { width: min(100%, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1672 / 941)); }
}
.reference-menu-image { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.image-main-menu .reference-menu-stage .menu-buttons { position: absolute; inset: 0; display: block; width: 100%; margin: 0; padding: 0; pointer-events: none; }
.image-main-menu .menu-hotspot {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  display: block;
  left: calc(var(--x) / 1672 * 100%);
  top: calc(var(--y) / 941 * 100%);
  width: calc(var(--w) / 1672 * 100%);
  height: calc(var(--h) / 941 * 100%);
  border-radius: 8%;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .12s, box-shadow .12s;
}
.image-main-menu .menu-hotspot::before, .image-main-menu .menu-hotspot::after { content: none; }
.image-main-menu .menu-hotspot:not(:disabled):hover { background: #ffd1910d; box-shadow: inset 0 0 12px #ffd1912b; }
.image-main-menu .menu-hotspot:focus-visible { outline: 1px solid #ffdfa6b3; outline-offset: -3px; box-shadow: inset 0 0 12px #ffd19126; }
.image-main-menu .menu-hotspot:not(:disabled):active { background: #0003; box-shadow: inset 0 2px 8px #0007; }
.image-main-menu .menu-hotspot:disabled { cursor: not-allowed; }
.image-main-menu .menu-accessible:not(.reference-menu-message) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.image-main-menu .reference-menu-message {
  position: absolute;
  z-index: 1;
  left: 18%;
  top: 77%;
  width: 23%;
  margin: 0;
  padding: 6px;
  color: #efd1a6;
  background: #1f100eed;
  border: 1px solid #937044;
  font: 12px/1.5 'Microsoft YaHei', sans-serif;
  text-align: center;
}
.image-main-menu .reference-menu-message[hidden] { display: none; }
.image-main-menu.menu-leaving .reference-menu-stage { opacity: .35; transition: opacity .14s; }
@media (prefers-reduced-motion: reduce) {
  .image-main-menu .menu-hotspot, .image-main-menu.menu-leaving .reference-menu-stage { transition: none; }
}