/* People and clothes: ages, hairstyles, fashion templates, studio time */

/* -------------------------------------------------- creator: age choice */
.age-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.opt.age-opt { aspect-ratio: auto; height: clamp(150px, 26vh, 230px); min-height: 120px; padding: 8px 4px 10px; }
.opt.age-opt .mini { width: 100%; }
.opt.age-opt .opt-name { font-size: 14px; color: var(--ink); }
.opt.age-opt.on .opt-name { color: var(--blue); }
@media (max-width: 760px) {
  .age-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -------------------------------------------------- fashion studio: templates */
.tpl { position: relative; min-height: 84px; }
.tpl.locked > svg { opacity: .55; }
.tpl.lux:not(.locked) { background: linear-gradient(160deg, #FFFFFF 40%, #FFF6DA); }
.tpl.lux.on { background: #EEF5FF; }
.tpl-lock {
  position: absolute; top: 5px; left: 5px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--ink-2); box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.tpl-price { position: absolute; top: 5px; right: 5px; padding: 2px 8px 2px 2px; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); color: var(--ink); }
.tpl .tpl-lock svg, .tpl .tpl-price svg { width: 16px; height: 16px; }
.tpl .tpl-price .coin-dot svg { width: 12px; height: 12px; }
.lux-title { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.lux-title .ico { color: #E0A100; }

/* -------------------------------------------------- fashion studio: time pill (tap it to hear what it costs) */
.studio-clock {
  position: relative; height: var(--btn); padding: 0 18px 0 6px; border-radius: 999px; border: 0;
  display: flex; align-items: center; gap: 8px; color: var(--ink); font: inherit; cursor: pointer;
  transition: opacity .2s, transform .15s;
}
.studio-clock:active { transform: scale(.96); }
.sc-ring { position: relative; width: calc(var(--btn) - 12px); height: calc(var(--btn) - 12px); display: grid; place-items: center; flex: none; }
.sc-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sc-track { fill: none; stroke: rgba(0, 0, 0, .08); stroke-width: 4; }
.sc-left { fill: none; stroke: var(--coin); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset .25s linear; }
.sc-ring .coin-dot { width: 58%; height: 58%; }
.sc-ring .coin-dot .ico { width: 64%; height: 64%; }
.sc-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.sc-time { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-sub { font-size: 11px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.studio-clock.soon .sc-left { stroke: var(--orange); }
.studio-clock.low .sc-sub { color: var(--orange); }
.studio-clock.paused .sc-left { stroke: var(--ink-3); }
.studio-clock.paused .sc-time { color: var(--ink-2); }
.sc-paid {
  position: absolute; left: calc(var(--btn) * .5 - 14px); top: -4px; padding: 1px 7px; border-radius: 999px;
  background: #fff; color: #C98A00; font-size: 14px; font-weight: 800; box-shadow: 0 3px 10px rgba(30, 40, 80, .18);
  pointer-events: none; animation: sc-paid 1.25s ease-out forwards;
}
@keyframes sc-paid {
  0% { opacity: 0; transform: translateY(8px) scale(.7); }
  20% { opacity: 1; transform: translateY(0) scale(1.05); }
  100% { opacity: 0; transform: translateY(-26px) scale(1); }
}

/* -------------------------------------------------- the studio costs coins: price on the way in */
.studio-btn .studio-price, .new-design .studio-price {
  padding: 2px 8px 2px 2px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(30, 40, 80, .15);
}
.studio-btn .studio-price { margin-left: 2px; }
.new-design .studio-price { position: absolute; top: 6px; right: 6px; }

/* -------------------------------------------------- out of coins */
.ooc { align-items: center; text-align: center; }
.ooc-art { position: relative; width: 120px; height: 84px; }
.ooc-art .coin-dot { position: absolute; left: 6px; top: 8px; width: 68px; height: 68px; opacity: .45; filter: saturate(.4); }
.ooc-school { position: absolute; right: 4px; top: 18px; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(10, 132, 255, .35); }
.ooc .dialog-text { font-size: 20px; font-weight: 700; color: var(--ink); }
.ooc .dialog-actions { justify-content: center; }
.ooc .pill-btn { min-height: 58px; font-size: 18px; }
.ooc-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -4px 0 4px; font-size: 15px; font-weight: 600; color: var(--green); }