/* Jade, ink and warm paper from the in-game palette; the landscape is the artwork. */
#start-menu {
  position: fixed; inset: 0; z-index: 9; overflow: auto;
  color: #f0e6cc; background: linear-gradient(90deg, #152f2df5 0%, #203c35e8 30%, #233c3590 56%, #1e352b18 100%);
  font-family: 'Songti SC', 'STSong', 'SimSun', serif;
}
#start-menu.hidden { display: none; }
.at-start-menu #hud > :not(.overlay) { visibility: hidden; pointer-events: none; }
.at-start-menu #game { pointer-events: none; }
.start-menu-content { width: min(360px, 80vw); min-height: 100%; box-sizing: border-box; margin-left: clamp(32px, 10vw, 180px); padding: clamp(36px, 8vh, 100px) 0 32px; }
.start-menu-seal { display: inline-block; padding: 6px; border: 1px solid #c59b72; color: #e1b88d; font-size: 12px; line-height: 1.25; letter-spacing: 3px; }
#start-menu-title { margin: 18px 0 0; font-size: clamp(68px, 8vw, 112px); font-weight: 500; line-height: 1.2; letter-spacing: .16em; text-shadow: 0 4px 24px #102a29; }
.start-menu-subtitle { margin: 8px 0 24px; font-size: 18px; letter-spacing: .4em; color: #cbbd97; }
.start-menu-intro { font-size: 14px; line-height: 2; color: #c6d0bd; margin-bottom: 30px; }
#start-menu nav { display: grid; gap: 10px; }
#start-menu button { width: 100%; text-align: left; padding: 15px 22px; border: 1px solid #bba98170; border-radius: 3px; background: #18352dcc; color: #eadfc3; font: inherit; font-size: 21px; cursor: pointer; transition: background .15s, border-color .15s; }
#start-menu button:first-child:not([hidden]), #start-menu button[hidden] + button { background: #e9ddbc url('../assets/ui/jade-v1/ivory.webp') center / 100% 100%; color: #28473e; border-color: #d7c89f; }
#start-menu button[hidden] { display: none; }
#start-menu button small { display: block; font: 12px/1.6 'PingFang SC', sans-serif; margin-top: 4px; opacity: .75; }
#start-menu button:hover { background-color: #436051; border-color: #ead5a6; }
#start-menu button:focus-visible { outline: 2px solid #f1ddb1; outline-offset: 4px; }
#start-menu button:active { transform: translateY(1px); }
.start-menu-note { margin: 30px 0 0; font-size: 12px; color: #aabca8; letter-spacing: .1em; }
.start-menu-caption { position: absolute; right: 4vw; bottom: 30px; writing-mode: vertical-rl; letter-spacing: .3em; font-size: 16px; text-shadow: 0 1px 5px #132c23; }
@media (max-height: 650px) and (min-width: 601px) {
  .start-menu-content { padding-top: 24px; width: 300px; }
  #start-menu-title { font-size: 64px; margin-top: 8px; }
  .start-menu-subtitle { margin-bottom: 10px; }
  .start-menu-intro { margin: 10px 0 16px; }
  #start-menu button { padding: 9px 18px; }
  .start-menu-note { margin-top: 18px; }
}
@media (max-width: 600px) {
  #start-menu { background: linear-gradient(90deg, #152f2df5, #203c35cf); }
  .start-menu-content { margin-inline: auto; }
  .start-menu-caption { display: none; }
}
@media (prefers-reduced-motion: reduce) { #start-menu button { transition: none; } }

.at-start-menu #save-now, .at-start-menu #save-export, .at-start-menu .server-save-new { display: none; }
.at-start-menu #hud > #toasts { visibility: visible; z-index: 20; }
.at-start-menu #hud > #toasts { left: auto; right: 18px; top: auto; bottom: 18px; max-width: min(420px, calc(100vw - 36px)); }