/* 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-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 > p { white-space: pre-line; word-break: keep-all; }
.data-error { max-width: 560px; margin: clamp(24px, 10vh, 100px) auto; padding: 24px; }
.data-error h1 { font-size: clamp(23px, 5vw, 28px); }
.data-error p { margin: 18px 0; line-height: 1.8; }
.data-error pre { max-height: 32dvh; overflow: auto; padding: 18px; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 12px; font-size: 12px; }
.data-error .primary-btn { margin: 6px 0 24px; }
.data-error-details { color: var(--muted); font-size: 13px; }
.data-error-details summary { cursor: pointer; padding: 8px 0; }
@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; } }