/* ===== app.css — tokens, base, layout, buttons, toast, modal, splash ===== */
:root {
  --c-bg: #FFF7EC;
  --c-surface: #FFFFFF;
  --c-ink: #3A3335;
  --c-ink-soft: #7A6E70;
  --c-primary: #FF6B9D;
  --c-primary-dark: #D94E80;
  --c-sky: #4E9BE8;
  --c-sky-dark: #2D6FC2;
  --c-leaf: #3E9B5F;
  --c-sun: #FFC94D;
  --c-danger: #D64550;
  --c-line: #F2E3D5;
  --radius: 24px;
  --radius-sm: 16px;
  --shadow: 0 6px 20px rgba(94, 62, 23, 0.10);
  --shadow-big: 0 14px 40px rgba(94, 62, 23, 0.16);
  --font: "Segoe UI", system-ui, -apple-system, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  color: var(--c-ink);
  background: var(--c-bg);
  background-image: radial-gradient(circle at 12% 8%, #FFE9F1 0 18rem, transparent 18rem),
                    radial-gradient(circle at 88% 92%, #E8F3FF 0 20rem, transparent 20rem);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--safe-bottom);
}
img { max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.muted { color: var(--c-ink-soft); }

/* ---- top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 3rem 1fr 6rem; align-items: center;
  gap: .5rem;
  padding: calc(.6rem + var(--safe-top)) 1rem .6rem;
  background: rgba(255, 247, 236, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--c-line);
}
.topbar__title {
  margin: 0; text-align: center;
  font-size: 1.05rem; font-weight: 800; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__side { display: flex; gap: .4rem; justify-content: flex-end; }
.topbar__side:first-child { justify-content: flex-start; }

.icon-btn {
  min-width: 48px; min-height: 48px;
  border: none; border-radius: 50%;
  background: var(--c-surface); color: var(--c-ink);
  font-size: 1.3rem; line-height: 1;
  box-shadow: var(--shadow);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s ease;
}
.icon-btn:active { transform: scale(.92); }
.icon-btn--back { font-size: 1.5rem; font-weight: 700; color: var(--c-primary-dark); }
.icon-btn--speak { background: #FFF1F6; color: var(--c-primary-dark); border: 2px solid #FFD3E2; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 52px; padding: .8rem 1.4rem;
  border: none; border-radius: 999px;
  font-size: 1.05rem; font-weight: 800; letter-spacing: .02em;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active { transform: scale(.95); }
.btn--primary { background: var(--c-primary); color: #fff; box-shadow: 0 6px 0 var(--c-primary-dark); }
.btn--primary:active { box-shadow: 0 2px 0 var(--c-primary-dark); }
.btn--big { min-height: 60px; font-size: 1.15rem; padding: 1rem 2rem; }
.btn--ghost { background: var(--c-surface); color: var(--c-ink-soft); box-shadow: var(--shadow); }
.btn--danger { background: #FFF0F0; color: var(--c-danger); box-shadow: var(--shadow); }
.btn--nav { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow); border: 2px solid var(--c-line); font-size: 1.1rem; }
.btn--nav.btn--primary { color: #fff; }
.btn--mini { min-height: 40px; padding: .35rem .9rem; font-size: .9rem; background: #FFF1F6; color: var(--c-primary-dark); }
.btn--sound { background: #FFF4DC; color: #8A6200; border: 2px solid #FFE3A1; }

/* ---- toast ---- */
#toast-root { position: fixed; left: 0; right: 0; bottom: calc(1rem + var(--safe-bottom)); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: .5rem; pointer-events: none; }
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: .8rem;
  max-width: min(92vw, 480px);
  background: #453A3E; color: #fff;
  padding: .8rem 1.2rem; border-radius: 999px;
  font-size: .98rem; font-weight: 600;
  box-shadow: var(--shadow-big);
  animation: toast-in .28s ease;
}
.toast--out { animation: toast-out .3s ease forwards; }
.toast__action { border: none; border-radius: 999px; background: var(--c-sun); color: #5A4200; font-weight: 800; padding: .5rem 1rem; }
@keyframes toast-in { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateY(20px); opacity: 0; } }

/* ---- modal ---- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(58, 47, 44, 0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; transition: opacity .2s ease;
}
.modal-overlay--in { opacity: 1; }
.modal-box {
  width: min(94vw, 420px);
  max-height: 86dvh; overflow: auto;
  background: var(--c-surface);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-big);
}
.modal-box--wide { width: min(94vw, 560px); }

.confirm-card__title { margin: 0 0 .5rem; font-size: 1.3rem; }
.confirm-card__msg { margin: 0 0 1.2rem; color: var(--c-ink-soft); }
.confirm-card__row { display: flex; gap: .8rem; justify-content: flex-end; }

/* ---- splash ---- */
#splash {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: var(--c-bg);
  transition: opacity .4s ease;
}
#splash.splash--out { opacity: 0; pointer-events: none; }
.splash__logo { font-size: 5rem; animation: splash-bounce 1.1s ease infinite alternate; }
.splash__title { font-weight: 800; font-size: 1.2rem; color: var(--c-primary-dark); }
.splash__spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 4px solid #FFD3E2; border-top-color: var(--c-primary);
  animation: spin 0.9s linear infinite;
}
@keyframes splash-bounce { from { transform: translateY(0) scale(1); } to { transform: translateY(-12px) scale(1.06); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- generic screen ---- */
.screen { padding: 1rem 1rem 3rem; max-width: 760px; margin: 0 auto; position: relative; }
.fatal { max-width: 480px; margin: 18vh auto; text-align: center; padding: 0 1rem; }
.fatal h1 { font-size: 1.4rem; }
.shake-once { animation: shake .45s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(5px); }
}