/* Name Writer: styled after Rita's Closet (Y:/Avatar Fitting/ritas_closet/site/styles.css):
   same fonts, gingham header with a scalloped edge, white die-cut "sticker" rims, candy
   shadows. Names only live on Beta (MilkyCat), so the page wears the Beta palette. */
:root {
  --white: #FFFFFF;
  --butter: #FFE07A;
  --pop: "Mochiy Pop One", "M PLUS Rounded 1c", system-ui, sans-serif;
  --round: "M PLUS Rounded 1c", system-ui, sans-serif;
  --marker: "Permanent Marker", "Comic Sans MS", cursive;   /* how names look on the avatar */
  /* Beta: caramel milk + cocoa (Closet body[data-avatar="beta"]) */
  --milk: #FFF8EF; --gingham: #FBE0C6; --gline: rgba(232, 150, 90, .22);
  --berry: #4E2A17; --berry-2: #8E6449; --shade: 78, 42, 23;
  --accent: #F0995B; --accent-deep: #CF6F2C; --tint: #FDEBD8; --soon: #F3E8DD; --ink-deep: #2E180C;
  /* name paint: the sub-tag ramp, for the names themselves */
  --ramp-a: #FF1E4D; --ramp-b: #FF8A3D; --ramp-c: #FFC23D;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--milk); color: var(--berry); font: 500 16px/1.6 var(--round); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
b { font-weight: 800; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tiny { font: 700 12px/1 var(--round); letter-spacing: .12em; text-transform: lowercase; color: var(--berry-2); }
a { color: var(--berry); text-underline-offset: 3px; }

/* stickers: white die-cut rim */
.steps li, .figure, .panel, .chip, .copy, .badge { border: 3px solid var(--white); }

/* header: gingham with a scalloped bottom edge */
.top {
  position: relative; padding: 0 24px 64px;
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, var(--gline) 22px 44px),
    repeating-linear-gradient(90deg, transparent 0 22px, var(--gline) 22px 44px),
    var(--gingham);
}
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 22px;
  background: radial-gradient(circle at 22px 22px, var(--milk) 21px, transparent 22px) 0 0 / 44px 22px repeat-x;
}
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0 0; max-width: 1180px; margin: 0 auto; }
.top-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.top-row a { font: 800 14px/1 var(--round); text-decoration: none; padding: 8px 14px; border-radius: 999px; background: var(--white); box-shadow: 0 3px 0 rgba(var(--shade), .14); }
/* how names reach the avatar right now: a sticker, so nobody claims expecting to see it at once */
.status { padding: 7px 14px; border-radius: 999px; border: 3px solid var(--white); font: 800 13px/1 var(--round);
  box-shadow: 0 3px 0 rgba(var(--shade), .14); transform: rotate(-3deg); white-space: nowrap; }
.status.paused { background: var(--butter); color: var(--berry); }
.status.bake { background: var(--white); color: var(--berry-2); }
.status.live { background: var(--white); color: var(--berry); }
.status.live::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #3DCB6C; margin-right: 7px; vertical-align: 0; box-shadow: 0 0 0 3px rgba(61, 203, 108, .25); }
.mast {
  display: block; max-width: 1180px; margin: 22px auto 0; text-decoration: none;
  font: 400 clamp(48px, 10.5vw, 148px)/0.95 var(--pop); letter-spacing: -0.02em; color: var(--accent);
  -webkit-text-stroke: 10px var(--white); paint-order: stroke fill; filter: drop-shadow(0 6px 0 var(--berry));
}
.mast span:first-child { color: var(--berry); }
.intro { max-width: 1180px; margin: 18px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.lede { margin: 0 6px 0 0; font: 400 20px/1.3 var(--pop); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.steps li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--white); font-weight: 700; font-size: 14px; box-shadow: 0 3px 0 rgba(var(--shade), .12); }
.steps b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--white); font: 400 13px/1 var(--pop); }
.terms { margin: 0; font-size: 13px; font-weight: 700; color: var(--berry-2); }
.terms .count { color: var(--accent-deep); font-variant-numeric: tabular-nums; }

main { max-width: 1228px; margin: 0 auto; padding: 0 24px; }

/* outfit picker: the Closet's filter pills */
.bar { position: sticky; top: 0; z-index: 5; padding: 14px 0 10px; margin: 8px 0 14px; background: var(--milk); }
.bar .tiny { display: block; margin: 0 0 8px 4px; }
.outfits { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
.outfits::-webkit-scrollbar { display: none; }
.chip { flex: none; border-color: transparent; background: none; padding: 7px 16px; border-radius: 999px; white-space: nowrap; font: 800 15px/1 var(--round); color: var(--berry-2); }
.chip[aria-checked="true"] { border-color: var(--white); background: var(--accent); color: var(--white); box-shadow: 0 4px 0 var(--accent-deep); }
.chip sup { font-size: 10px; vertical-align: 4px; opacity: .75; margin-left: 2px; }

/* body map + panel */
.stage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.stage > *, .views > * { min-width: 0; }   /* grid items may shrink below their content: no sideways scroll on phones */
.views { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.view h2 { margin: 0 0 8px 6px; font: 800 12px/1 var(--round); letter-spacing: .14em; text-transform: lowercase; color: var(--berry-2); }
.figure { position: relative; border-width: 6px; border-radius: 28px; overflow: hidden; background: var(--tint); box-shadow: 0 6px 0 rgba(var(--shade), .16); aspect-ratio: 4 / 5; }   /* the Blender studio renders: shoulders to knees, 1200x1500 */
.figure img, .figure canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.figure img:not([src]) { display: none; }   /* no broken-image icon while an outfit has no picture */
.figure canvas { cursor: pointer; touch-action: manipulation; }
.figure .label { position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 2;
  padding: 3px 9px; border-radius: 999px; border: 2px solid var(--white); background: var(--white); color: var(--berry);
  font: 800 11px/1 var(--round); white-space: nowrap; box-shadow: 0 2px 0 rgba(var(--shade), .18); }
.figure .label.free { background: var(--accent); color: var(--white); }
.figure .label.sel { background: var(--berry); color: var(--white); }
.ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 18px;
  background: radial-gradient(circle, rgba(255, 255, 255, .75) 2.5px, transparent 3px) 0 0 / 22px 22px; }
.ph p { margin: 0; font: 700 13px/1.4 var(--round); color: var(--berry-2); }
.ph .num { display: block; margin-bottom: 8px; font: 400 clamp(40px, 12vw, 64px)/1 var(--pop); color: var(--white); text-shadow: 0 5px 0 rgba(var(--shade), .12); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 6px 0; font-size: 13px; font-weight: 700; color: var(--berry-2); }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--white); vertical-align: -2px; margin-right: 6px; }
.legend .wash { background: rgba(255, 248, 239, .9); box-shadow: inset 0 0 0 1px rgba(var(--shade), .2); }
.legend .plusi { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--white); font: 400 13px/1 var(--pop); font-style: normal; vertical-align: -4px; }
.plus { position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 1;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--white);
  background: var(--accent); color: var(--white); font: 400 15px/1 var(--pop); box-shadow: 0 2px 0 rgba(var(--shade), .25); }
@media (prefers-reduced-motion: no-preference) {
  .plus { animation: plus 2.2s ease-in-out infinite; }
  @keyframes plus { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.18); } }
}

.panel { position: sticky; top: 92px; border-width: 6px; border-radius: 28px; padding: 22px 24px 24px; background: var(--white);
  box-shadow: 0 6px 0 rgba(var(--shade), .16), inset 0 0 0 3px var(--gingham); display: flex; flex-direction: column; gap: 12px; }
.panel h2 { margin: 0; font: 400 clamp(32px, 4vw, 46px)/1.1 var(--pop); color: var(--accent); -webkit-text-stroke: 6px var(--white); paint-order: stroke fill; filter: drop-shadow(0 4px 0 var(--berry)); }
.panel .sub { margin: 0; font-size: 14px; font-weight: 700; color: var(--berry-2); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--berry); color: var(--white); font: 400 12px/1 var(--pop); }
.badge.free { background: var(--accent); }
.badge.full { background: var(--berry-2); }
.badge.hidden { background: var(--butter); color: var(--berry); }
.names { display: flex; flex-wrap: wrap; gap: 8px; }
.names:empty, .pills:empty { display: none; }
.name-wrap { padding: 4px 14px; border-radius: 14px; background: var(--ink-deep); border: 3px solid var(--white); box-shadow: 0 3px 0 rgba(var(--shade), .2); }
.name-wrap span { font: 400 24px/1.2 var(--marker); background-image: linear-gradient(90deg, var(--ramp-a), var(--ramp-b), var(--ramp-c)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nobody { align-self: center; font-weight: 700; color: var(--berry-2); }

.redeem { padding: 16px; border-radius: 24px; background: var(--tint); }
.redeem label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 800; }
.redeem input { width: 100%; height: 48px; padding: 0 18px; border-radius: 999px; border: 3px solid var(--white); background: var(--white); color: var(--berry);
  font: 400 20px/1 var(--marker); box-shadow: inset 0 0 0 2px var(--gingham); }
.redeem input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.code-row { display: flex; gap: 8px; margin-top: 10px; }
.code-row code { flex: 1; min-width: 0; display: flex; align-items: center; height: 52px; padding: 0 18px; border-radius: 999px; background: var(--white);
  font: 400 17px/1 var(--pop); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; user-select: all; }
.copy { flex: none; height: 52px; min-width: 104px; padding: 0 22px; border-radius: 999px; background: var(--accent); color: var(--white);
  font: 400 16px/1 var(--pop); box-shadow: 0 5px 0 var(--accent-deep); transition: transform .1s, box-shadow .1s; }
.copy:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--accent-deep); }
.copy.done { background: var(--berry); box-shadow: 0 5px 0 var(--ink-deep); }
.copy:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; }
.hint { margin: 10px 4px 0; font-size: 13px; font-weight: 700; color: var(--berry-2); line-height: 1.5; }
.hint b { color: var(--berry); }

/* every area, as a list */
.list { margin-top: 56px; }
.list h2 { margin: 0 0 14px 6px; font: 400 24px/1.2 var(--pop); }
.rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.rows li button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; width: 100%; padding: 14px 16px; border-radius: 22px;
  background: var(--white); border: 3px solid var(--white); box-shadow: inset 0 0 0 2px var(--gingham), 0 3px 0 rgba(var(--shade), .1); cursor: pointer; }
.rows li button:hover, .rows li button:focus-visible { box-shadow: inset 0 0 0 2px var(--accent), 0 3px 0 rgba(var(--shade), .1); }
.rows li.sel button { background: var(--tint); box-shadow: inset 0 0 0 2px var(--accent), 0 3px 0 rgba(var(--shade), .1); }
.rows .area { font: 400 16px/1.2 var(--pop); }
.rows .area small { margin-left: 8px; font: 700 12px/1 var(--round); color: var(--berry-2); }
.rows .free { justify-self: end; font: 800 13px/1.2 var(--round); color: var(--accent-deep); }
.rows .free.none { color: var(--berry-2); }
.rows .who { grid-column: 1 / -1; font: 400 16px/1.3 var(--marker); color: var(--berry); overflow-wrap: anywhere; }
.rows .who.empty { font: 700 13px/1.3 var(--round); color: var(--berry-2); }
.rows .seen { grid-column: 1 / -1; font: 700 12px/1.2 var(--round); color: var(--berry-2); }

.foot { max-width: 1180px; margin: 56px auto 0; padding: 18px 24px 44px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; font-size: 13px; font-weight: 700; color: var(--berry-2); }
.error { margin: 40px auto; max-width: 52ch; text-align: center; font-weight: 700; color: var(--berry-2); }

@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; }
  .panel { position: static; }
}
@media (max-width: 760px) {
  .top { padding: 0 16px 40px; }
  .top-row { padding-top: 12px; }
  .top-row .tiny { display: none; }
  .top-right { width: 100%; justify-content: space-between; }
  .mast { margin-top: 10px; font-size: 10.6vw; white-space: nowrap; -webkit-text-stroke-width: 6px; filter: drop-shadow(0 3px 0 var(--berry)); }
  .status { font-size: 11px; padding: 6px 10px; }
  .top-row a { font-size: 12px; padding: 7px 11px; }
  .top-right { flex-wrap: nowrap; }
  .intro { margin-top: 10px; gap: 8px; }
  .lede { font-size: 16px; width: 100%; }
  .steps { gap: 6px; }
  .steps li { font-size: 12px; padding: 4px 10px 4px 4px; gap: 6px; }
  .steps b { width: 20px; height: 20px; font-size: 11px; }
  main { padding: 0 16px; }
  .views { gap: 10px; }
  .figure { border-width: 5px; border-radius: 22px; }
  .panel { padding: 18px 16px 20px; }
  .foot { padding: 16px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }