/* Cover the complete viewport while the next step is rendered underneath. */
.stage-transition { position: fixed; inset: 0; z-index: 10000; background: var(--bg); opacity: 0; pointer-events: none; }
.stage-transition.is-active { pointer-events: all; cursor: wait; }

/* Keep native select interaction, with an inset custom chevron. */
:root select, :root .player-setup select, :root .inventory-controls select {
  appearance: none; padding-right: 40px; padding-left: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b9afc3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size: 16px 16px; background-position: right 14px center; background-repeat: no-repeat;
}
:root[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2372637d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.inventory-controls select { max-width: none; }
.portrait-file { display: block; object-fit: cover; object-position: center top; background: #faf7ef; }
.ending-art { background: #faf7ef; }
.ending-art > .portrait-full {
  width: 100%; height: 100%; min-width: 0; top: 0; left: 0; transform: none; object-fit: contain; object-position: center;
}
.memory-scene > .portrait-full { height: 100%; object-fit: cover; object-position: center top; }
.new-badge { display: inline-flex; background: #ceef9b; color: #284527; padding: 3px 6px; font-size: 10px; font-weight: 900; border-radius: 4px; line-height: 1.3; }

/* Contact controls are shared by the phonebook and the relationship step. */
.contacts-trigger .icon { width: 20px; height: 20px; }
.step-0 .context-tools { flex-shrink: 0; align-items: center; }
.step-1 .inventory-toolbar { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.step-1 .inventory-controls { flex: 1; max-width: 560px; min-width: 0; }
.inventory-controls .search-field { min-width: 0; }
@media (max-width: 820px) {
  .step-1 .inventory-toolbar { flex-direction: column; align-items: stretch; }
  .step-1 .inventory-controls { max-width: none; }
}
.ending-content > h2, .ending-content > p { white-space: pre-line; word-break: keep-all; }
.data-error { max-width: 680px; margin: 10vh auto; padding: 24px; }
.data-error h1 { font-size: 28px; }
.data-error p { margin: 18px 0; line-height: 1.8; }
.data-error pre { padding: 18px; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 12px; font-size: 12px; }
.data-error a { display: inline-flex; margin-top: 24px; text-decoration: none; }
@media (max-width: 600px) {
.ending-art > .portrait-full { object-fit: cover; object-position: center top; }
}
@media (max-width: 540px) {
  .player-setup .setup-fields { grid-template-columns: 100px minmax(0, 1fr); }
  :root .inventory-controls select { padding-left: 9px; padding-right: 35px; background-position: right 11px center; max-width: none; }
}
@media (max-width: 360px) { .player-setup .setup-fields { grid-template-columns: 1fr; gap: 15px; } }

/* A first-memory image opens at the largest uncropped size that fits the viewport. */
.illustration-modal { display: block; width: fit-content; max-width: calc(100vw - 48px); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: transparent; }
.illustration-modal > .portrait-full { display: block; width: auto; height: auto; max-width: calc(100vw - 48px); max-height: calc(100dvh - 48px); aspect-ratio: auto; object-fit: contain; }

@media (max-width: 800px) {
  .illustration-modal, .illustration-modal > .portrait-full { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
}