/*
  YouTale /app: the kids' side. Same design as the Flutter prototype (mobile/lib/theme/tokens.dart).

  3 sizes      14px (--s), 18px (--m), 30px (--l). Icons use the same scale.
  Typefaces    Balsamiq Sans (titles) + Nunito (everything else). Icons are inline SVG, never emoji or an icon font.
  Themes       day (cream) and dusk (soft slate, not black), from <html data-theme> + localStorage "theme".
  No gradients and no blurred shadows: depth is a solid darker edge under each button or tile.
  Copy         <span lang="uz">…</span><span lang="ru">…</span>; <html data-lang> hides the other language.
*/
:root {
  --bg: #FFF6EA;
  --card: #FFFFFF;
  --sunken: #F6EBDC;
  --line: #EADBC8;
  --ink: #2E2A47;
  --ink-soft: #6E6985;
  --on-bright: #2E2A47;

  --coral: #FF7A50; --coral-e: #E0592F;
  --sky: #5BB8F0;   --sky-e: #3A94CC;
  --sun: #FFC94A;   --sun-e: #E3A626;
  --mint: #5FCB94;  --mint-e: #3DA872;
  --berry: #FF7BA5; --berry-e: #E05886;
  --lilac: #9F8CF5; --lilac-e: #7C68DA;

  --tint: 30%;
  --tint-warm: 30%;
  --tint-coral: 30%;
  --accent-ink: var(--coral-e);

  --f-title: 'Balsamiq Sans', sans-serif;
  --f-text: 'Nunito', sans-serif;
  --s: 14px;
  --m: 18px;
  --l: 30px;

  --r: 18px;
  --r-card: 22px;
  --edge: 5px;
  color-scheme: light;
}

/* Dusk palette (repeated for the auto + system-dark case) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #34374D; --card: #3F435B; --sunken: #4A4E68; --line: #575C7A; --ink: #F7F1E8; --ink-soft: #BEB9D0;
    --coral: #FF8A63; --coral-e: #D96A47; --sky: #6CC3F3; --sky-e: #4B9ECD; --sun: #FFD36B; --sun-e: #D9AD45;
    --mint: #74D3A3; --mint-e: #52AE80; --berry: #FF93B5; --berry-e: #D9708F; --lilac: #B09FF8; --lilac-e: #8C7AD6;
    --tint: 26%; --tint-warm: 14%; --tint-coral: 20%; --accent-ink: var(--coral);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #34374D; --card: #3F435B; --sunken: #4A4E68; --line: #575C7A; --ink: #F7F1E8; --ink-soft: #BEB9D0;
  --coral: #FF8A63; --coral-e: #D96A47; --sky: #6CC3F3; --sky-e: #4B9ECD; --sun: #FFD36B; --sun-e: #D9AD45;
  --mint: #74D3A3; --mint-e: #52AE80; --berry: #FF93B5; --berry-e: #D9708F; --lilac: #B09FF8; --lilac-e: #8C7AD6;
  --tint: 26%; --tint-warm: 14%; --tint-coral: 20%; --accent-ink: var(--coral);
  color-scheme: dark;
}

/* Language and theme switching without JS re-rendering */
html[data-lang="uz"] [lang="ru"],
html[data-lang="ru"] [lang="uz"] { display: none !important; }
.when-dark { display: none !important; }
:root[data-theme="dark"] .when-dark { display: revert !important; }
:root[data-theme="dark"] .when-light { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .when-dark { display: revert !important; }
  :root:not([data-theme="light"]) .when-light { display: none !important; }
}
[x-cloak] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html { background: var(--sunken); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--m);
  font-weight: 700;
  line-height: 1.3;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
input, button, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; }

.title { font-family: var(--f-title); font-size: var(--l); font-weight: 700; line-height: 1.15; }
.heading { font-family: var(--f-title); font-size: var(--m); font-weight: 700; line-height: 1.25; }
.small { font-size: var(--s); }
.soft { color: var(--ink-soft); }
.accent { color: var(--accent-ink); }
.center { text-align: center; }

.page { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 16px 24px 24px; }
.grow { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.row.center { justify-content: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bottom { position: sticky; bottom: 0; padding: 8px 24px 16px; background: var(--bg); }

.logo { font-family: var(--f-title); font-size: var(--l); font-weight: 700; }
.logo b { color: var(--accent-ink); font-weight: 700; }

/* ---------- Icons ---------- */
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.i.big { width: 30px; height: 30px; stroke-width: 2.4; }
.i.solid { fill: currentColor; stroke: none; }

/* ---------- Chunky surfaces: a fill sitting on a solid edge ---------- */
.btn, .icon-btn, .tile, .chunk {
  --fill: var(--coral);
  --e: var(--coral-e);
  position: relative;
  background: var(--fill);
  box-shadow: 0 var(--edge) 0 var(--e);
  margin-bottom: var(--edge);
  border: none;
  cursor: pointer;
  transition: transform 70ms, box-shadow 70ms, background-color 150ms;
}
.btn:active, .icon-btn:active, .tile:active, .chunk:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--e); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 58px; padding: 0 16px; border-radius: var(--r);
  color: var(--on-bright); font-weight: 800; white-space: nowrap;
}
.btn > span { overflow: hidden; text-overflow: ellipsis; }
.btn.sky { --fill: var(--sky); --e: var(--sky-e); }
.btn.mint { --fill: var(--mint); --e: var(--mint-e); }
.btn.berry { --fill: var(--berry); --e: var(--berry-e); }
.btn.neutral, .icon-btn, .chunk { --fill: var(--card); --e: var(--line); color: var(--ink); box-shadow: 0 var(--edge) 0 var(--e), inset 0 0 0 2.5px var(--line); }
.btn.neutral:active, .icon-btn:active, .chunk:active { box-shadow: 0 0 0 var(--e), inset 0 0 0 2.5px var(--line); }
.btn:disabled, .btn[aria-disabled="true"], .icon-btn:disabled {
  --fill: var(--sunken); --e: var(--line); color: var(--ink-soft); cursor: default; transform: none;
  box-shadow: 0 var(--edge) 0 var(--e);
}
.btn.auto { width: auto; }

.icon-btn {
  --edge: 4px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
}
.icon-btn.sky { --fill: var(--sky); --e: var(--sky-e); color: var(--on-bright); box-shadow: 0 var(--edge) 0 var(--e); }
.icon-btn.coral { --fill: var(--coral); --e: var(--coral-e); color: var(--on-bright); box-shadow: 0 var(--edge) 0 var(--e); }
.icon-btn.mint { --fill: var(--mint); --e: var(--mint-e); color: var(--on-bright); box-shadow: 0 var(--edge) 0 var(--e); }
.icon-btn.berry { --fill: var(--berry); --e: var(--berry-e); color: var(--on-bright); box-shadow: 0 var(--edge) 0 var(--e); }
.icon-btn.small { width: 44px; height: 44px; }
.icon-btn.big { width: 64px; height: 64px; }

.chunk { display: block; border-radius: var(--r-card); padding: 12px; width: 100%; text-align: left; }

/* Selectable tiles: neutral or tinted, coral ring + check when picked */
.tile {
  --fill: var(--card); --e: var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px; border-radius: var(--r-card); text-align: center;
  box-shadow: 0 var(--edge) 0 var(--e), inset 0 0 0 2.5px var(--line);
}
.tile.is-on { --e: var(--coral-e); box-shadow: 0 var(--edge) 0 var(--e), inset 0 0 0 3px var(--coral); }
.tile:active { box-shadow: 0 0 0 var(--e), inset 0 0 0 2.5px var(--line); }
.tile.is-on:active { box-shadow: 0 0 0 var(--e), inset 0 0 0 3px var(--coral); }
.tile[aria-disabled="true"] { cursor: default; }
.tile[aria-disabled="true"] .art { opacity: 0.45; }
.tile .check { position: absolute; top: 8px; right: 8px; transform: scale(0); transition: transform 180ms cubic-bezier(.3, 1.6, .5, 1); }
.tile.is-on .check { transform: scale(1); }
.tile.row-tile { flex-direction: row; text-align: left; gap: 16px; }

.check {
  width: 30px; height: 30px; border-radius: 50%; background: var(--coral); color: var(--on-bright);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.check.big { width: 52px; height: 52px; }

/* Tints, one per hue */
.t-coral { --fill: color-mix(in srgb, var(--coral) var(--tint-coral), var(--card)); }
.t-sky   { --fill: color-mix(in srgb, var(--sky) var(--tint), var(--card)); }
.t-sun   { --fill: color-mix(in srgb, var(--sun) var(--tint-warm), var(--card)); }
.t-mint  { --fill: color-mix(in srgb, var(--mint) var(--tint), var(--card)); }
.t-berry { --fill: color-mix(in srgb, var(--berry) var(--tint), var(--card)); }
.t-lilac { --fill: color-mix(in srgb, var(--lilac) var(--tint), var(--card)); }
.t-coral, .t-sky, .t-sun, .t-mint, .t-berry, .t-lilac { background: var(--fill); fill: var(--fill); }
.tile.t-coral { --e: var(--coral); } .tile.t-sky { --e: var(--sky); } .tile.t-sun { --e: var(--sun); }
.tile.t-mint { --e: var(--mint); } .tile.t-berry { --e: var(--berry); } .tile.t-lilac { --e: var(--lilac); }
.tile.tinted { box-shadow: 0 var(--edge) 0 var(--e); }
.tile.tinted.is-on { --e: var(--coral-e); box-shadow: 0 var(--edge) 0 var(--e), inset 0 0 0 3px var(--coral); }
.tile.tinted:active { box-shadow: 0 0 0 var(--e); }

/* ---------- Art colour classes (used inside the SVG partials) ---------- */
.art { display: block; width: 100%; height: 100%; }
.art.kid { border-radius: 50%; }
.f-coral { fill: var(--coral); } .f-coral-e { fill: var(--coral-e); } .s-coral { stroke: var(--coral); }
.f-sky { fill: var(--sky); } .f-sky-e { fill: var(--sky-e); } .s-sky-e { stroke: var(--sky-e); }
.f-sun { fill: var(--sun); }
.f-mint { fill: var(--mint); } .f-mint-e { fill: var(--mint-e); }
.f-berry { fill: var(--berry); }
.f-cream { fill: #FFF3E0; } .f-white { fill: #FFFFFF; }
.f-art-ink { fill: #2E2A47; } .s-ink { stroke: #2E2A47; }
.f-skin { fill: #F6C7A1; } .f-hair { fill: #6B4231; } .f-blush { fill: #FF9DB5; opacity: 0.75; }
.f-mane { fill: #E98A2C; } .f-nose { fill: #8A4B2E; }
.landscape .night-only { display: none; }
:root[data-theme="dark"] .landscape .night-only { display: inline; }
:root[data-theme="dark"] .landscape .day-only { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .landscape .night-only { display: inline; }
  :root:not([data-theme="light"]) .landscape .day-only { display: none; }
}

/* ---------- Cards, fields, pills ---------- */
.card { background: var(--card); border: 2.5px solid var(--line); border-radius: var(--r-card); padding: 16px; }
.field {
  display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 16px;
  background: var(--sunken); border: 2.5px solid var(--line); border-radius: var(--r);
}
.field:focus-within { border-color: var(--coral); }
.field input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--ink); }
.field input::placeholder { color: var(--ink-soft); }
.field .sep { width: 2.5px; height: 26px; background: var(--line); }
.field .i { color: var(--ink-soft); }

.seg { display: flex; gap: 0; padding: 4px; background: var(--sunken); border-radius: 999px; }
.seg button {
  flex: 1; height: 46px; padding: 0 12px; border: 2.5px solid var(--sunken); border-radius: 999px;
  background: var(--sunken); color: var(--ink-soft); cursor: pointer; white-space: nowrap;
}
.seg button.is-on { background: var(--card); border-color: var(--line); color: var(--ink); }
.seg.dense button { flex: none; height: 36px; font-size: var(--s); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--sunken); font-size: var(--s); }
.pill.berry { background: var(--berry); color: var(--on-bright); }
.pill .i { width: 14px; height: 14px; }

.dots { display: flex; gap: 6px; justify-content: center; }
.dots span { width: 10px; height: 10px; border-radius: 5px; background: var(--line); transition: width 250ms, background-color 250ms; }
.dots span.is-done { background: var(--coral); }
.dots span.is-on { width: 28px; background: var(--coral); }

.bar { height: 8px; border-radius: 8px; background: var(--sunken); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 8px; background: var(--coral); }

.consent { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.consent input { position: absolute; opacity: 0; pointer-events: none; }
.consent .box {
  width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--card); border: 2.5px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; color: var(--on-bright);
}
.consent .box .i { visibility: hidden; }
.consent input:checked + .box { background: var(--mint); border-color: var(--mint); }
.consent input:checked + .box .i { visibility: visible; }

.note { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-soft); font-size: var(--s); }
.note .i { width: 14px; height: 14px; }
.error { padding: 12px 16px; border-radius: var(--r); background: color-mix(in srgb, var(--berry) var(--tint), var(--card)); font-size: var(--s); }

/* ---------- Home ---------- */
.hero { position: relative; aspect-ratio: 1 / 0.92; border-radius: 28px; overflow: hidden; }
.hero .landscape { position: absolute; inset: 0; }
.hero .me { position: absolute; left: 50%; top: 50%; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 6px solid var(--card); animation: bob 2.4s ease-in-out infinite; }
.hero .me img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bubble { position: absolute; width: 24%; aspect-ratio: 1; padding: 2.5%; border-radius: 50%; border: 4px solid var(--card); animation: bob 2.4s ease-in-out infinite; }
.bubble.b1 { left: 6%; top: 8%; }
.bubble.b2 { right: 4%; top: 46%; animation-delay: -0.8s; }
.bubble.b3 { left: 6%; bottom: 8%; animation-delay: -1.6s; }
@keyframes bob { 50% { translate: 0 -6px; } }

.tale { display: flex; align-items: center; gap: 16px; }
.tale .poster { width: 76px; height: 76px; flex: none; border-radius: var(--r); overflow: hidden; padding: 8px; }
.tale .poster.photo { padding: 0; }
.tale .poster img { width: 100%; height: 100%; object-fit: cover; }
.tale .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tale .info .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tale .go { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--coral); color: var(--on-bright); display: flex; align-items: center; justify-content: center; }
.tale .pct { width: 48px; flex: none; text-align: center; font-size: var(--s); }

/* ---------- Wizard ---------- */
.stepper { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; }
.avatar-pick { width: 92px; height: 92px; }
.age { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.age .num { text-align: center; }
.drop {
  width: 230px; height: 230px; margin: 0 auto; border-radius: 50%; overflow: hidden; position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: color-mix(in srgb, var(--coral) var(--tint-coral), var(--card)); border: 3px solid var(--coral); color: var(--accent-ink);
  transition: transform 150ms;
}
.drop.is-over { transform: scale(1.03); }
.drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drop-wrap { position: relative; width: 230px; margin: 0 auto; }
.drop-wrap .check { position: absolute; right: 10px; bottom: 10px; }
.presets { display: flex; justify-content: center; gap: 12px; }
.presets button { width: 56px; height: 56px; padding: 0; border-radius: 50%; overflow: hidden; border: 3px solid var(--line); background: var(--card); cursor: pointer; }
.presets button.is-on { border-color: var(--coral); }
.presets img { width: 100%; height: 100%; object-fit: cover; }
.tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.tips .dot { width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dot.t-sun { color: var(--sun-e); } .dot.t-sky { color: var(--sky-e); } .dot.t-mint { color: var(--mint-e); }
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.theme-grid .tile { aspect-ratio: 0.8; justify-content: space-between; }
.theme-grid .art-box { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; }
.theme-grid .art-box .art { width: 104px; height: 104px; }
.theme-grid .name { min-height: 48px; display: flex; align-items: center; justify-content: center; }
.soon { position: absolute; top: 8px; left: 8px; }
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.eq i { width: 5px; border-radius: 3px; background: var(--sky); animation: eq 0.9s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -0.2s; } .eq i:nth-child(3) { animation-delay: -0.45s; } .eq i:nth-child(4) { animation-delay: -0.65s; }
@keyframes eq { from { height: 6px; } to { height: 22px; } }

/* ---------- Waiting room ---------- */
.ring { position: relative; width: 250px; height: 250px; margin: 0 auto; }
.ring > svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring .track { fill: none; stroke: var(--sunken); stroke-width: 18; }
.ring .fill { fill: none; stroke: var(--coral); stroke-width: 18; stroke-linecap: round; transition: stroke-dasharray 400ms ease-out; }
.ring.is-done .fill { stroke: var(--mint); }
.ring .face { position: absolute; inset: 35px; border-radius: 50%; overflow: hidden; background: var(--sunken); display: flex; align-items: center; justify-content: center; color: var(--accent-ink); }
.ring .face img { width: 100%; height: 100%; object-fit: cover; }
.track-icons { display: flex; justify-content: space-between; }
.track-icons span { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sunken); color: var(--ink-soft); transition: background-color 300ms; }
.track-icons span.is-done { background: var(--mint); color: var(--on-bright); }
.track-icons span.is-on { background: var(--coral); color: var(--on-bright); }
.scene-dots { display: flex; justify-content: center; gap: 8px; height: 12px; }
.scene-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.scene-dots i.is-done { background: var(--coral); }
.price-card { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }

/* ---------- Watch room ---------- */
.player { border-radius: var(--r-card); overflow: hidden; background: var(--sunken); box-shadow: 0 var(--edge) 0 var(--line); }
.player video { display: block; width: 100%; max-height: 70vh; background: var(--sunken); }
.stars { display: flex; justify-content: space-evenly; }
.stars button { background: none; border: none; cursor: pointer; color: var(--line); padding: 4px; transition: transform 160ms cubic-bezier(.3, 1.6, .5, 1); }
.stars button.is-on { color: var(--sun); transform: scale(1.15); }
.story-text { display: flex; flex-direction: column; gap: 12px; }
.story-text p { display: flex; gap: 12px; font-size: var(--s); }
.story-text b { color: var(--accent-ink); }

/* ---------- Sheet and toast ---------- */
.scrim { position: fixed; inset: 0; background: color-mix(in srgb, #2E2A47 40%, transparent); z-index: 40; }
.sheet {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 41;
  background: var(--card); border-radius: var(--r-card) var(--r-card) 0 0; padding: 12px 24px 24px;
  display: flex; flex-direction: column; gap: 24px;
}
.grabber { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto; }
.share-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.share-row a, .share-row button { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; font-size: var(--s); }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--r);
  background: var(--ink); color: var(--bg); max-width: calc(100% - 48px);
}

.wizard { flex: 1; display: flex; flex-direction: column; }
.ring .face.art-face { background: var(--fill); padding: 28px; }
.field .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Photos sit on top of the illustration; a photo that fails to load removes itself */
.tale .poster { position: relative; }
.tale .poster img, .ring .face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.drop img, .presets img { object-position: 50% 15%; }
/* Chrome draws a dark gradient behind native video controls */
video::-webkit-media-controls-panel { background-image: none !important; }