/* base.css — reset, layout shell, shared atoms. Mobile-first. */

* { box-sizing: border-box; margin: 0; padding: 0; scrollbar-width: auto; scrollbar-color: var(--gold) transparent; }
::-webkit-scrollbar { width: 30px; height: 30px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 999px; border: 6px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-2); background-clip: content-box; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  background:
    radial-gradient(1200px 700px at 50% -12%, rgba(251,191,36,0.14), transparent 60%),
    radial-gradient(900px 600px at 50% 115%, rgba(245,158,11,0.10), transparent 60%),
    var(--bg);
}

#app { height: 100dvh; display: flex; flex-direction: column; }

.screen { flex: 1; min-height: 0; display: none; flex-direction: column; }
.screen.active { display: flex; animation: fade .45s var(--ease); }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; color: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--bubble-you); color: var(--accent-ink);
  font-weight: 700; font-size: 1.02rem;
  padding: 1rem 1.4rem; border-radius: 999px;
  box-shadow: var(--glow); transition: transform .15s var(--ease), filter .15s var(--ease);
  width: 100%;
}
.btn:active { transform: scale(.97); }
.btn:disabled { filter: grayscale(.5) brightness(.7); cursor: default; }

.btn-ghost {
  background: transparent; color: var(--muted); font-weight: 600;
  padding: .8rem 1rem; border-radius: 999px; box-shadow: none; width: auto;
}

.lang-pill {
  position: fixed; top: max(.8rem, env(safe-area-inset-top)); right: .9rem; z-index: 40;
  background: var(--surface); color: var(--gold); border: 1px solid var(--line);
  padding: .55rem 1.05rem; border-radius: 999px; font-size: .98rem; font-weight: 700;
  backdrop-filter: blur(8px);
}

.disp { font-family: var(--font-disp); font-weight: 600; line-height: 1.08; }

/* Mobile: keep the creation header clear of the fixed language pill.
   (The Room bar's equivalent rule lives in screens.css so it cascades AFTER
   screens.css's own .room-top padding shorthand — otherwise it gets reset.) */
@media (max-width: 819px) {
  .create-head { padding-right: 66px; }
}

@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* The living avatar — blink + breathe, never perfectly still. */
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.012); } }
.avatar-live { animation: breathe 4.6s var(--ease) infinite; }