/* Styles for the avatar pages: Avatar Creator, Avatar Gallery, Outfit Studio, Voice & Personality, Self-Avatar and Object-to-Sticker.
   Everything here is prefixed avt- (av- is used by the character drawings themselves). */

/* ---------- the studio: live preview on the left, choices on the right ---------- */
.avt-cols { display: grid; grid-template-columns: minmax(270px, 350px) minmax(0, 1fr); gap: calc(14px * var(--k)); align-items: start; }
.avt-h2 { margin: calc(20px * var(--k)) 0 10px; font-size: calc(19px * var(--k)); }
.avt-hello { margin-bottom: calc(12px * var(--k)); }
@media (min-width: 900px) and (min-height: 720px) { .avt-side { position: sticky; top: 0; } }
.avt-stage { position: relative; display: grid; place-items: center; padding: 14px 10px 10px; border-radius: var(--kr); overflow: hidden;
  background: radial-gradient(120% 85% at 50% 0%, color-mix(in srgb, var(--c, var(--blue)) 48%, transparent), transparent 72%), linear-gradient(180deg, var(--panel3), var(--panel2));
  border: 2px solid color-mix(in srgb, var(--c, var(--blue)) 45%, var(--line)); }
.avt-floor { position: absolute; left: 24%; right: 24%; bottom: 6%; height: 9%; border-radius: 50%; background: rgba(4, 8, 30, .38); filter: blur(7px); }
:root[data-theme="light"] .avt-floor { background: rgba(30, 60, 130, .22); }
.avt-fig { position: relative; width: min(70%, calc(190px * var(--k))); }
.avt-fig svg { width: 100%; height: auto; }
.avt-stage.sm .avt-fig { width: min(70%, calc(170px * var(--k))); }
.avt-stagebox { position: relative; }
.avt-moves { position: absolute; right: 8px; top: 8px; display: grid; gap: 6px; }
.avt-moves .ktool { background: color-mix(in srgb, var(--panel) 82%, transparent); }
.avt-namerow input { min-width: 0; border-width: 2px !important; }
.avt-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.avt-acts .kbtn { flex: 1 1 42%; padding-left: 12px; padding-right: 12px; }
.avt-acts .kbtn.big { flex-basis: 100%; }
.avt-status { margin: 10px 0 0; font-weight: 600; color: var(--ok); }
.avt-status.dirty { color: var(--warn); }
.avt-main { min-height: 320px; }

.avt-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 12px; }
.avt-tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: calc(50px * var(--k)); padding: 6px calc(14px * var(--k)); border-radius: 16px;
  border: 2px solid var(--line); background: var(--panel2); color: var(--text); font-weight: 700; font-size: calc(15px * var(--k)); cursor: pointer; white-space: nowrap; }
.avt-tab .e { font-size: 1.25em; line-height: 1; }
.avt-tab:hover { border-color: var(--line2); }
.avt-tab.on { color: #fff; border-color: transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--c, var(--blue)) 82%, #fff), var(--c, var(--blue))); box-shadow: 0 4px 0 color-mix(in srgb, var(--c, var(--blue)) 55%, #000); }
.avt-sec { display: flex; align-items: center; gap: 8px; margin: calc(18px * var(--k)) 0 10px; font-size: calc(15.5px * var(--k)); }
.avt-sec:first-child { margin-top: 2px; }
.avt-sec .e { font-size: 1.2em; }

/* choices with a little picture */
.avt-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(94px * var(--k)), 1fr)); gap: 10px; }
.avt-opt { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px 7px; border-radius: 18px; border: 2px solid var(--line); background: var(--panel2); color: var(--text);
  cursor: pointer; font-weight: 600; font-size: calc(12.5px * var(--k)); line-height: 1.15; min-width: 0; text-align: center; transition: transform .1s var(--ease), border-color .1s; }
.avt-opt:hover { border-color: var(--line2); transform: translateY(-2px); }
.avt-opt .pic { width: calc(58px * var(--k)); aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c, var(--blue)) 42%, var(--panel3)), var(--panel3)); }
.avt-opt .pic svg { width: 100%; height: 100%; }
.avt-opts.tall .avt-opt .pic { width: calc(62px * var(--k)); aspect-ratio: 212 / 262; border-radius: 14px; }
.avt-opt .nm { max-width: 100%; overflow-wrap: normal; word-break: normal; hyphens: none; }   /* a name breaks between words only: never “Headphone / s” */
.avt-opt.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 20%, var(--panel2)); box-shadow: 0 0 0 2px var(--gold), 0 0 16px color-mix(in srgb, var(--gold) 38%, transparent); }
/* little pictures stay still (the big preview is the one that moves) */
.avt-opt svg.avatar *, .avt-gcard svg.avatar *, .avt-look svg.avatar *, .avt-mini svg.avatar * { animation: none !important; }
.avt-opt .avatar3d, .avt-gcard .avatar3d, .avt-look .avatar3d, .avt-mini .avatar3d { margin: 0 auto; }

.avt-swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.avt-swatches .kswatch { width: calc(44px * var(--k)); height: calc(44px * var(--k)); min-width: 44px; min-height: 44px; }
.avt-anycolor { position: relative; width: calc(44px * var(--k)); height: calc(44px * var(--k)); min-width: 44px; min-height: 44px; margin: 0; border-radius: 50%; overflow: hidden; cursor: pointer; display: grid; place-items: center;
  border: 3px solid rgba(255, 255, 255, .75); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); font-size: 18px; background: conic-gradient(#ff4d5e, #ffcb3d, #2ec46d, #18c5d9, #2f8fff, #b56bff, #ff4d5e); }
.avt-anycolor input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.avt-anycolor.on, .avt-anycolor:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.avt-tip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: var(--panel2); border: 2px dashed var(--line2); font-size: calc(13.5px * var(--k)); }
.avt-sec + .avt-tip { margin-top: 0; }
.avt-tip > span { flex: 1 1 200px; }
.avt-none { padding: 18px 10px; }
.avt-none .e { font-size: calc(46px * var(--k)); line-height: 1.1; }

/* the round picture that follows along on small screens */
.avt-mini { position: fixed; right: calc(20px + var(--safe-r)); bottom: calc(30px + 68px * var(--k) + var(--safe-b)); z-index: 44; width: 62px; height: 62px; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer;
  border: 3px solid var(--gold); background: var(--panel3); box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }
.avt-mini[hidden] { display: none; }
.avt-mini svg { width: 100%; height: 100%; display: block; }

/* ---------- gallery ---------- */
.avt-galhead { display: grid; gap: 12px; }
.avt-search { position: relative; }
.avt-search .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.avt-search .ico svg { width: 20px; height: 20px; display: block; }
.avt-search input { padding-left: 46px !important; border-radius: 999px !important; border-width: 2px !important; min-height: calc(50px * var(--k)) !important; }
.avt-galhead .kchip small { opacity: .7; font-weight: 600; }
.avt-count { margin: 10px 2px; }
.avt-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(132px * var(--k)), 1fr)); gap: 12px; }
.avt-gcard { position: relative; min-width: 0; --c: var(--c-stories); }
.avt-gcard[hidden] { display: none; }
.avt-gcard[data-group="Animals"] { --c: var(--c-social); } .avt-gcard[data-group="Birds"] { --c: var(--c-calendar); } .avt-gcard[data-group="Sea friends"] { --c: var(--c-language); }
.avt-gcard[data-group="Dinosaurs"] { --c: var(--c-science); } .avt-gcard[data-group="Magical"] { --c: var(--c-stories); } .avt-gcard[data-group="Robots & machines"] { --c: var(--c-home); }
.avt-gcard[data-group="People"] { --c: var(--c-writing); } .avt-gcard[data-group="Space friends"] { --c: var(--c-coding); }
.avt-gpick { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 12px 8px 10px; border-radius: var(--kr); color: var(--text); cursor: pointer;
  border: 2px solid color-mix(in srgb, var(--c) 55%, var(--line)); background: radial-gradient(110% 70% at 50% 0%, color-mix(in srgb, var(--c) 30%, transparent), transparent 75%), var(--panel);
  transition: transform .12s var(--ease), border-color .12s, box-shadow .12s; }
.avt-gpick:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 40%, transparent); }
.avt-gpick .pic { width: 78%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, var(--panel2)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent); margin-bottom: 4px; }   /* the gallery shows FACES (with room for a hat), big enough to tell 110 characters apart */
.avt-keeppic { width: min(46%, 170px); margin: 0 auto 6px; }
.avt-gpick svg { width: 100%; height: auto; }
.avt-gpick b { font-size: calc(15px * var(--k)); }
.avt-gpick small { color: var(--muted); font-size: calc(12px * var(--k)); }
.avt-fav { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; font-size: 19px; cursor: pointer; display: grid; place-items: center; filter: grayscale(.2); transition: transform .12s var(--ease); }
.avt-fav:hover { transform: scale(1.2); } .avt-fav.on { filter: none; }
.avt-preview [data-s] { max-width: 300px; margin: 0 auto; }

/* ---------- wardrobe ---------- */
.avt-ward { margin-top: calc(14px * var(--k)); }
.avt-ward > h2 .pill, .kcard > h2 > .pill { margin-left: auto; }
.avt-looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(122px * var(--k)), 1fr)); gap: 12px; }
.avt-look { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 18px; background: var(--panel2); border: 2px solid var(--line); min-width: 0; text-align: center; }
.avt-lookpic { display: flex; flex-direction: column; align-items: center; padding: 6px 6px 0; border: 0; border-radius: 14px; cursor: pointer; color: var(--text);
  background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--c, var(--blue)) 40%, var(--panel3)), var(--panel3)); }
.avt-lookpic .pic { width: 66%; } .avt-lookpic svg { width: 100%; height: auto; }
.avt-lookpic .go { margin: 4px 0 8px; padding: 3px 12px; border-radius: 999px; background: var(--c, var(--blue)); color: #fff; font-weight: 700; font-size: calc(12.5px * var(--k)); }
.avt-lookpic:hover .go { filter: brightness(1.12); }
.avt-look .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avt-ask label { margin-top: 0; }

/* ---------- voice and personality ---------- */
.avt-buddycard { display: flex; gap: calc(16px * var(--k)); align-items: center; flex-wrap: wrap; }
.avt-buddyfig { flex: 0 0 calc(200px * var(--k)); max-width: 100%; margin: 0 auto; }
.avt-buddytalk { flex: 1 1 280px; min-width: 0; display: grid; gap: 12px; justify-items: start; }
.avt-buddytalk .kbubble { font-size: calc(16px * var(--k)); max-width: none; }
.avt-ai { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; font-size: calc(13.5px * var(--k)); justify-self: stretch;
  border: 2px solid color-mix(in srgb, var(--info) 55%, var(--line)); background: color-mix(in srgb, var(--info) 12%, var(--panel)); }
.avt-ai .e { font-size: 22px; line-height: 1.15; }
.avt-manners { display: grid; gap: 8px; }
.avt-manner { display: flex; align-items: center; gap: 12px; width: 100%; min-height: calc(52px * var(--k)); padding: 8px 12px; border-radius: 16px; border: 2px solid var(--line); background: var(--panel2); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.avt-manner .e { font-size: calc(26px * var(--k)); flex: none; } .avt-manner b { display: block; } .avt-manner small { display: block; color: var(--muted); }
.avt-manner:hover { border-color: var(--line2); }
.avt-manner.on, .avt-voice.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, var(--panel2)); box-shadow: 0 0 0 2px var(--gold); }
.avt-voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(210px * var(--k)), 1fr)); gap: 12px; }
.avt-voice { display: grid; gap: 10px; padding: 12px; border-radius: 18px; border: 2px solid var(--line); background: var(--panel2); min-width: 0; }
.avt-voice .top { display: flex; gap: 10px; align-items: center; } .avt-voice .top .e { font-size: calc(28px * var(--k)); } .avt-voice small { display: block; color: var(--muted); }
.avt-voice .row .kbtn { flex: 1; padding-left: 10px; padding-right: 10px; }
.avt-set { margin: 0; font-size: inherit; font-weight: 400; color: var(--text); flex-wrap: wrap; }
label.avt-set { cursor: pointer; }
.avt-set .main { min-width: 150px; } .avt-set .main b { display: block; font-weight: 700; }
.avt-set:focus-within .switch > span { outline: 2px solid var(--gold); outline-offset: 2px; }
.avt-selrow label.main { margin: 0; font-size: inherit; font-weight: 400; color: var(--text); flex: 1 1 180px; }
.avt-selrow select { flex: 0 1 300px; width: auto; min-width: 190px; max-width: 100%; }

/* ---------- camera pages ---------- */
.avt-locked { max-width: 580px; margin: 16px auto; }
.avt-lock { font-size: calc(60px * var(--k)); line-height: 1.1; }
.avt-perms { text-align: left; max-width: 420px; margin: 0 auto 14px; }
.avt-steps { margin-bottom: 14px; }
.avt-startrow { margin-top: 4px; }
.avt-file { position: relative; margin: 0; font-size: calc(15.5px * var(--k)); color: var(--text); cursor: pointer; }
.avt-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.avt-file:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.avt-private { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border-radius: 14px; text-align: left;
  border: 2px solid color-mix(in srgb, var(--ok) 55%, var(--line)); background: color-mix(in srgb, var(--ok) 11%, var(--panel)); }
.avt-private .e { font-size: 22px; line-height: 1.15; } .avt-private b { display: block; } .avt-private small { display: block; color: var(--muted); }
.avt-oops { margin-bottom: 12px; padding: 10px 12px; border-radius: 14px; font-weight: 600; border: 2px solid var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--panel)); }
.avt-working { max-width: 420px; margin: 40px auto; padding: 30px 16px; }
.avt-camcard { max-width: 470px; margin: 0 auto; }
.avt-camcard.wide { max-width: 720px; }
.avt-cam { aspect-ratio: 1; background: #050a24; }
.avt-cam.thing { aspect-ratio: 4 / 3; }
.avt-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.avt-cam.mirror video { transform: scaleX(-1); }
.avt-oval { position: absolute; left: 24%; top: 12%; width: 52%; height: 68%; border-radius: 50%; border: 4px dashed rgba(255, 255, 255, .92); box-shadow: 0 0 0 2000px rgba(5, 10, 36, .4); pointer-events: none; }
.avt-frame4 { position: absolute; inset: 9%; border-radius: 26px; border: 4px dashed rgba(255, 255, 255, .88); box-shadow: 0 0 0 2000px rgba(5, 10, 36, .3); pointer-events: none; }
.avt-countdown { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: #fff; font: 800 clamp(80px, calc(26 * var(--vw)), 150px)/1 var(--display); text-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 30px rgba(0, 0, 0, .4); }
.avt-cam .center-msg p { margin: 10px 0 0; }
.avt-camacts { justify-content: center; margin-top: 14px; }
.avt-toonbox { width: min(100%, calc(300px * var(--k))); margin: 4px auto 0; border-radius: 24px; overflow: hidden; border: 6px solid #fff; background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); transform: rotate(-1.5deg); }
body.calm .avt-toonbox { transform: none; }
.avt-toon { display: block; width: 100%; height: auto; }
.avt-useacts { margin: 14px 0 4px; }
.avt-portrait { width: 96px; height: 96px; flex: none; border-radius: 20px; border: 4px solid #fff; object-fit: cover; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.avt-portrait.big { width: min(100%, 220px); height: auto; aspect-ratio: 1; border-radius: 24px; border-width: 6px; display: block; margin: 0 auto 10px; }
.avt-portraitrow { display: flex; gap: 14px; align-items: center; margin-top: calc(14px * var(--k)); }
.avt-portraitrow h3 { margin: 0 0 2px; } .avt-portraitrow p { margin: 0 0 8px; }

/* ---------- sticker maker ---------- */
.avt-edcols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: calc(14px * var(--k)); align-items: start; }
.avt-edit { cursor: crosshair; background-color: #eef2fb; background-image: repeating-conic-gradient(#cfd8ea 0% 25%, transparent 0% 50%); background-size: 22px 22px; }
.avt-edit canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.avt-edit canvas:focus-visible { outline: 4px solid var(--gold); outline-offset: -4px; }
.avt-ring { position: absolute; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(10, 16, 50, .75), inset 0 0 0 2px rgba(10, 16, 50, .35); pointer-events: none; }
.avt-ring.keep { border-color: #3ddc84; }
.avt-ring[hidden] { display: none; }
.avt-slabel { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 14px 0 2px; color: var(--text); text-align: center; }
.avt-slabel span { color: var(--muted); font-weight: 600; white-space: nowrap; }
.avt-edtools { margin-top: 10px; }
.avt-sizes { display: inline-flex; gap: 6px; }
.avt-sizes i { display: block; border-radius: 50%; background: var(--text); }
.avt-stickerbox { min-height: 210px; display: grid; place-items: center; padding: 18px; border-radius: var(--kr); border: 2px solid var(--line);
  background-color: var(--panel2); background-image: radial-gradient(color-mix(in srgb, var(--c, var(--gold)) 45%, transparent) 2px, transparent 2.5px); background-size: 22px 22px; }
.avt-stickerpic { max-width: 100%; max-height: 300px; width: auto; height: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .38)); }
.avt-stks { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(108px * var(--k)), 1fr)); gap: 10px; }
.avt-stk { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 16px; background: var(--panel2); border: 2px solid var(--line); min-width: 0; text-align: center; }
.avt-stk .pic { width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.avt-stk img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.avt-stk .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(13px * var(--k)); }

/* ---------- older children: calmer ---------- */
.avt-teen .avt-stage { background: linear-gradient(180deg, var(--panel3), var(--panel2)); }
.avt-teen .avt-tab.on { box-shadow: none; }
.avt-teen .avt-toonbox { transform: none; }

/* ---------- tablet and phone ---------- */
@media (max-width: 899px) {
  .avt-cols, .avt-edcols { grid-template-columns: minmax(0, 1fr); }
  .avt-side .avt-fig { width: min(50%, calc(180px * var(--k))); }
}
@media (max-width: 699px) {
  .avt-mini { bottom: calc(var(--tabbar) + 82px + var(--safe-b)); right: calc(16px + var(--safe-r)); width: 56px; height: 56px; }
  .avt-opts { grid-template-columns: repeat(auto-fill, minmax(calc(88px * var(--k)), 1fr)); gap: 8px; }
  .avt-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avt-tab { padding: 6px 10px; font-size: calc(14px * var(--k)); }
  .avt-voices { grid-template-columns: minmax(0, 1fr); }
  .avt-selrow select { flex: 1 1 100%; }
  .avt-slabel b { display: none; }
  .avt-portraitrow { flex-wrap: wrap; }
}