/* StoryVerse page. Same-origin stylesheet only (the Content-Security-Policy blocks inline styles). Every button is at least 48px tall. */
:root {
  --bg: #fff8ec;
  --ink: #2b2250;
  --soft: #6b5fa0;
  --card: #ffffff;
  --line: #e5dcff;
  --accent: #7c3aed;
  --accent-2: #ec4899;
  --good: #16a34a;
  --bad: #b91c1c;
  --focus: #f59e0b;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 18px; line-height: 1.4; }
a { color: var(--accent); font-weight: 700; }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }

.sv-top { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: var(--card); border-bottom: 2px solid var(--line); }
.sv-back { min-height: 48px; display: inline-flex; align-items: center; text-decoration: none; padding: 0 12px; border-radius: 24px; background: #f3edff; }
.sv-title { margin: 0; font-size: 28px; }
.sv-title span { color: var(--accent-2); }

.sv-wrap { max-width: 960px; margin: 0 auto; padding: 16px; }
.sv-note { min-height: 28px; margin: 0 0 8px; font-weight: 700; }
.sv-note.is-error { color: var(--bad); }
.sv-step { background: var(--card); border: 2px solid var(--line); border-radius: 20px; padding: 16px; margin-bottom: 16px; }
.sv-step h2 { margin: 0 0 12px; font-size: 22px; }
.sv-count { margin: 0 0 8px; color: var(--soft); font-weight: 700; }
.sv-empty { color: var(--soft); }

.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.sv-me { border: 3px solid var(--line); border-radius: 16px; background: #fff; padding: 8px; min-height: 48px; cursor: pointer; font: inherit; color: inherit; }
.sv-me img { width: 100%; height: 140px; object-fit: contain; display: block; }
.sv-me[aria-pressed="true"] { border-color: var(--accent); background: #f3edff; }

.sv-row { display: flex; gap: 12px; }
.sv-wrap-row { flex-wrap: wrap; }
.sv-chip { min-height: 56px; padding: 8px 18px; border-radius: 28px; border: 3px solid var(--line); background: #fff; font: inherit; font-weight: 800; color: inherit; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
.sv-chip small { font-weight: 600; color: var(--soft); }
.sv-chip[aria-pressed="true"] { border-color: var(--accent); background: #f3edff; box-shadow: 0 0 0 2px var(--accent) inset; }
.sv-chip[disabled] { opacity: 0.45; cursor: not-allowed; }

.sv-go { min-height: 60px; padding: 0 32px; border: 0; border-radius: 30px; background: var(--accent); color: #fff; font: inherit; font-size: 22px; font-weight: 800; cursor: pointer; }
.sv-go[disabled] { background: #c4b5fd; cursor: not-allowed; }
.sv-progress, .sv-saved { margin: 12px 0 0; font-weight: 700; color: var(--soft); }
.sv-saved.is-done { color: var(--good); }

.sv-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 16px; }
.sv-page { margin: 0; background: #fff; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; }
.sv-page img { width: 100%; display: block; }
.sv-page figcaption { padding: 6px 10px; color: var(--soft); font-weight: 700; }

@media (max-width: 520px) {
  .sv-title { font-size: 22px; }
  .sv-chip { flex: 1 1 100%; }
}

/* ---------- Screen 1: story theme cards (flex-wrap keeps the last row centered at every width) ---------- */
.sv-theme { text-align: center; }
.sv-theme-head { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.sv-theme-head h2 { margin: 0; }
.sv-speak { width: 52px; height: 52px; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle at 35% 30%, #b98bff, #5b25d6); color: #fff; font-size: 22px; cursor: pointer; box-shadow: 0 8px 16px -6px rgba(40, 10, 100, 0.6); }
.sv-speak:focus-visible, .sv-theme-card:focus-visible, .sv-back-step:focus-visible { outline: 4px solid #ffd23f; outline-offset: 3px; }
.sv-theme-sub { margin: 6px 0 18px; font-weight: 700; color: #2b1a6b; }
.sv-theme-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 2vw, 22px); }
.sv-theme-card { width: calc((100% - 3 * clamp(12px, 2vw, 22px)) / 4); min-width: 150px; display: flex; flex-direction: column; border-radius: 26px; border: 5px solid #fff; padding: 0; overflow: hidden; cursor: pointer; background: #fff; box-shadow: 0 14px 24px -10px rgba(20, 10, 60, 0.55), 0 0 0 3px rgba(255, 255, 255, 0.35); transition: transform 0.15s ease; }
.sv-theme-card:hover, .sv-theme-card:active { transform: translateY(-4px) scale(1.02); }
.sv-theme-art { display: block; aspect-ratio: 16 / 10; background: #fff; }
.sv-theme-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-theme-name { display: block; padding: 10px 8px 12px; font: 900 clamp(15px, 2vw, 21px)/1.1 "Fredoka", "Nunito", system-ui, sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.is-magic { border-color: #d7b8ff; }  .is-magic .sv-theme-name { background: linear-gradient(180deg, #a36bff, #6a2fd8); }
.is-animal { border-color: #b8f7a0; } .is-animal .sv-theme-name { background: linear-gradient(180deg, #6ad84a, #2f9d2a); }
.is-dino { border-color: #ffd49a; }   .is-dino .sv-theme-name { background: linear-gradient(180deg, #ffa43a, #e8701a); }
.is-space { border-color: #9fc8ff; }  .is-space .sv-theme-name { background: linear-gradient(180deg, #3f7cff, #1b3fbf); }
.is-friend { border-color: #ffb3dd; } .is-friend .sv-theme-name { background: linear-gradient(180deg, #ff7ab8, #d93f8a); }
.is-mystery { border-color: #8ff0ea; } .is-mystery .sv-theme-name { background: linear-gradient(180deg, #2fc2c4, #13807f); }
.is-surprise { border-color: #e2c4ff; } .is-surprise .sv-theme-name { background: linear-gradient(180deg, #c05cff, #7b1fd6); }
.sv-back-step { margin-bottom: 8px; padding: 8px 16px; border-radius: 999px; border: 2px solid #fff; background: rgba(43, 26, 107, 0.75); color: #fff; font-weight: 800; cursor: pointer; }
@media (max-width: 760px) { .sv-theme-card { width: calc((100% - clamp(12px, 2vw, 22px)) / 2); min-width: 0; } }
@media (min-width: 761px) and (max-width: 1024px) { .sv-theme-card { width: calc((100% - 2 * clamp(12px, 2vw, 22px)) / 3); min-width: 0; } }