/* Shared image skin for native, custom and dynamically created controls. */
:root { --button-frame: url('../images/ui/glass-frame.webp'); --button-ink: #fff4e9; --button-edge: #e6cfb85c; }
/* Nine-slice painting keeps the metal corners intact at every control size.
   Independent border properties survive inline backgrounds and leave icons,
   select arrows and content pseudo-elements available to their components. */
body :is(button, input[type='button'], input[type='submit'], input[type='reset'], [role='button'], .archerlab-link, .lang-switcher) {
  border-style: solid !important;
  border-width: 1px !important;
  border-image-source: var(--button-frame) !important;
  border-image-slice: 64 112 !important;
  border-image-width: 10px 16px !important;
  border-image-repeat: stretch !important;
  border-image-outset: 0 !important;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body :is(button, input[type='button'], input[type='submit'], input[type='reset'], [role='button'], .archerlab-link, .lang-switcher):focus-visible {
  outline: 2px solid #f8dfc8;
  outline-offset: 3px;
}
:is(.menu-btn, .qm-btn, .gallery-tab, .settings-toggle, .settings-close-btn, .backlog-close-btn, .sl-close-btn, .gallery-modal-close, .choice-btn) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  color: var(--button-ink);
  border-color: var(--button-edge);
  border-radius: 3px;
  background: linear-gradient(110deg, #29232f70, #29232f4d);
  box-shadow: none;
  text-shadow: 0 1px 3px #100e19, 0 0 8px #100e1999;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color 160ms ease, border-color 160ms ease, filter 160ms ease;
}
:is(#btn-new-game, #btn-start, #btn-resume) {
  position: relative;
  background: linear-gradient(110deg, #78535680, #4f3b4859);
  border-color: transparent;
  font-weight: 600;
}
.menu-btn { min-height: 44px; padding: 9px 20px; }
.qm-btn { min-width: 52px; min-height: 44px; font-size: max(12px, .75rem); }
.settings-close-btn, .backlog-close-btn, .sl-close-btn, .gallery-modal-close { min-width: 44px; min-height: 44px; }
.gallery-tab, .settings-toggle { min-height: 44px; }
:is(.gallery-tab.active, .settings-toggle.active, .settings-toggle[aria-pressed='true']) { background: #78535680; border-color: #e6cfb8a6; }
:is(.menu-btn, .qm-btn, .gallery-tab, .settings-toggle, .settings-close-btn, .backlog-close-btn, .sl-close-btn, .gallery-modal-close, .choice-btn):focus-visible { outline: 2px solid #f8dfc8; outline-offset: 3px; }
:is(.menu-btn, .qm-btn, .gallery-tab, .settings-toggle):is(:disabled, [aria-disabled='true']) { filter: saturate(.25); color: #e1d5ca; cursor: not-allowed; }
:is(.menu-btn, .qm-btn, .gallery-tab, .settings-toggle, .choice-btn):not(:disabled):active { filter: brightness(.9); }
@media (hover: hover) and (pointer: fine) {
  :is(.menu-btn, .qm-btn, .gallery-tab, .settings-toggle, .choice-btn):not(:disabled):hover { background-color: #b4937938; border-color: #f7debea6; filter: brightness(1.08); }
}
.settings-reset-btn.settings-reset-btn { color: #f3b8b9; border-color: #865459; background: #452b3273; }
.choice-btn { min-height: 44px; padding: 10px 20px; line-height: 1.45; background: linear-gradient(110deg, #29212e99, #1e19248c); border-color: #e1c7ab78; }

/* Fullscreen safe areas and bounded system overlays. */
.quick-menu { margin-top: env(safe-area-inset-top); margin-right: env(safe-area-inset-right); }
.hud { margin-top: env(safe-area-inset-top); margin-left: env(safe-area-inset-left); width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right)); }
.dialogue-box { left: env(safe-area-inset-left); width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right)); margin-bottom: env(safe-area-inset-bottom); }
.choice-container { max-width: calc(100% - max(env(safe-area-inset-left), env(safe-area-inset-right)) - max(env(safe-area-inset-left), env(safe-area-inset-right)) - 24px); }
.screen.overlay { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.screen.overlay > :is(.settings-container, .pause-container, .backlog-container, .sl-container, .save-slot-container) { max-height: 100%; }
.settings-header, .settings-footer { flex-shrink: 0; }
.settings-body { min-height: 0; overflow-y: auto; }
.pause-container { overflow-y: auto; }
/* Larger touch targets must also fit investigation overlays and photo paging. */
.photo-deck-shell, .locker-search-shell {
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
.photo-deck-strip { flex-shrink: 0; }
.photo-deck-dot { flex: 0 0 44px; padding: 0; border-radius: 3px; background: radial-gradient(circle, #77717c 3px, transparent 4px), #18151bd9; }
.photo-deck-dot-seen { background: radial-gradient(circle, #c2ad98 3px, transparent 4px), #18151bd9; }
.photo-deck-dot-active { background: radial-gradient(circle, #fff4e9 4px, transparent 5px), #78535680; box-shadow: none; }

#title-screen { height: 100svh; height: 100dvh; padding-top: max(72px, calc(env(safe-area-inset-top) + 60px)); transition: background-color 300ms ease; }
#title-screen::after { background: linear-gradient(180deg, #16121a40, #16121a05 32%, transparent 60%, #0a090d33); }
#title-screen .title-menu {
  position: absolute;
  left: 50%;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px));
  transform: translateX(-50%);
  width: min(540px, calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-width: none;
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#title-screen .title-menu .menu-btn {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  font-size: clamp(.78rem, 1.35vw, .9rem);
  line-height: 1.35;
  letter-spacing: .04em;
  white-space: normal;
  overflow-wrap: anywhere;
  background: linear-gradient(110deg, #29232f70, #29232f4d);
}
#title-screen #btn-new-game { background: linear-gradient(110deg, #78535680, #4f3b4859); }
#title-screen .title-footer { bottom: max(6px, env(safe-area-inset-bottom)); }
#title-screen :is(.archerlab-link, .lang-switcher) {
  min-height: 44px;
  box-sizing: border-box;
  top: max(8px, env(safe-area-inset-top));
  margin: 0;
  background-color: #201b292e;
  border-color: #f5ddc633;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#title-screen .archerlab-link { left: max(12px, env(safe-area-inset-left)); }
#title-screen .lang-switcher { right: max(12px, env(safe-area-inset-right)); max-width: calc(100% - 148px); }
@media (orientation: portrait) {
  #title-screen .title-char-lineup { height: min(94svh, 1100px); }
  #title-screen .title-content { width: calc(100% - 24px); padding: 0; }
  #title-screen .title-text { font-size: clamp(1.5rem, 6.2vw, 2.6rem); }
  #title-screen .title-menu { bottom: max(30px, calc(env(safe-area-inset-bottom) + 22px)); gap: 6px; }
  #title-screen .title-menu .menu-btn { padding: 8px 6px; font-size: .78rem; }
  /* Navigation and gallery remain usable before entering landscape gameplay. */
  body:has(#title-screen.active) .rotate-prompt,
  body:has(#gallery-screen.active) .rotate-prompt,
  body:has(#name-screen.active) .rotate-prompt { display: none !important; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #title-screen .title-char-lineup { height: min(76svh, 440px); }
  #title-screen { padding-top: max(54px, calc(env(safe-area-inset-top) + 46px)); }
  #title-screen .title-text { font-size: clamp(1.35rem, 4.2vw, 2rem); margin-bottom: 5px; }
  #title-screen .title-divider { margin-bottom: 6px; }
  #title-screen .title-menu { width: min(480px, calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))); bottom: max(10px, env(safe-area-inset-bottom)); }
  #title-screen :is(.archerlab-link, .lang-switcher) { top: max(4px, env(safe-area-inset-top)); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.menu-btn, .qm-btn, .gallery-tab, .settings-toggle, .settings-close-btn, .backlog-close-btn, .sl-close-btn, .gallery-modal-close, .choice-btn, .title-content, .title-char-lineup) { animation: none; transition: none; }
}