/* Shared interface foundations. Room colors remain owned by the scene palette. */
.chat-thinking { margin-top: 1rem; }
.npc-thinking-spinner {
  display: inline-block;
  vertical-align: middle;
  width: .7em;
  height: .7em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: npc-thinking-spin .85s linear infinite;
}
@keyframes npc-thinking-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .npc-thinking-spinner { animation: none; }
}

:root {
  --radius: 10px;
  --ui-shadow: 0 12px 36px #0003;
  --ui-focus: #eed2a2;
  --ui-space: clamp(1rem, 2vw, 1.5rem);
}
html { scrollbar-gutter: stable; scroll-padding-block: 5rem; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
::selection { background: #bca077; color: #15120f; }
:where(button, a, input, select, textarea, summary) { -webkit-tap-highlight-color: transparent; }
:where(button, .button, input:not([type=checkbox]):not([type=radio]):not([type=range]), select) { min-height: 2.75rem; }
:where(button, .button) { transition: background-color .15s, border-color .15s, box-shadow .15s; }
:where(input, select, textarea) { max-width: 100%; accent-color: var(--moss); }
:where(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-focus); outline-offset: 3px;
}
:where(button, .button):active:not(:disabled) { filter: brightness(.94); }
:where(button):disabled { opacity: .55; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li) { overflow-wrap: break-word; }
:where(dialog) { max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); border-radius: 14px; overscroll-behavior: contain; }
:where(dialog)::backdrop { background: #080a0bd1; backdrop-filter: blur(6px); }
:where(dialog) h2 { line-height: 1.25; }
:where([role=status], [role=alert]) { overflow-wrap: anywhere; }
:where(.error):not(:empty) { padding: .7rem .85rem; border: 1px solid #bd776566; border-radius: 8px; background: #ad473214; }
:where(.room-panel, .character-panel, .library, .review, #transcript) { scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior: contain; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 1000; transform: translateY(-200%); padding: .7rem 1rem; border-radius: 8px; background: #eed2a2; color: #15120f; font-weight: 700; }
.skip-link:focus { transform: none; }
@media (max-width: 620px) {
  :where(input, select, textarea) { font-size: 1rem; }
  :where(dialog) { max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.spell-resource-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block: 0.5rem;
}
.spell-resource-select {
  color: inherit;
  background: var(--panel-bg, #24211d);
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  padding: 0.35rem;
}
.spell-resource-targets:not(.hidden) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.combat-spell { width: 100%; }