/* The avatar customizer and the Avatar Shop window (home/customizer.js), used by the home page and Pawville.
   (It expects --ink, --line and --muted, and the .btn buttons, from the page's own stylesheet.) */
/* ---- the avatar customizer (from before) ---- */
#av-modal { position: fixed; inset: 0; background: rgba(20,20,60,0.5); display: none; align-items: center; justify-content: center; padding: 12px; z-index: 20; }
#av-modal.open { display: flex; }
.av-box { background: #fff; border-radius: 24px; width: min(940px, 100%); height: min(640px, calc(100vh - 24px)); height: min(640px, calc(100dvh - 24px)); display: grid; grid-template-columns: minmax(220px, 1fr) 1.25fr; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
#av-stage { background: radial-gradient(circle at 50% 38%, #fff6d8, #ffc2a0); min-height: 300px; position: relative; touch-action: none; cursor: grab; }
#av-stage .tip { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: #8a5a44; font-size: 13px; pointer-events: none; }
.av-side { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#av-stage canvas { position: absolute; inset: 0; }
.av-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 6px; -webkit-overflow-scrolling: touch; }
.av-scroll h2 { margin: 0 0 6px; color: #e63946; }
.av-row { margin: 10px 0; } .av-row > b { display: block; font-size: 15px; margin-bottom: 5px; } .av-row > b .muted { font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: 14px; font-weight: 600; border: 2px solid #e3eaf0; background: #fff; color: var(--ink); border-radius: 12px; padding: 5px 10px; cursor: pointer; }
.chip.on { border-color: #2ec4b6; background: #e6f8f6; }
.sw { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #d5dde6; cursor: pointer; padding: 0; }
.sw.on { box-shadow: 0 0 0 3px #2ec4b6; transform: scale(1.12); }
#av-name { font: inherit; font-size: 18px; border: 2px solid #e3eaf0; border-radius: 12px; padding: 7px 12px; width: 100%; max-width: 280px; -webkit-user-select: text; user-select: text; }
.av-foot { display: flex; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid #eef2f6; flex-wrap: wrap; }
.av-foot .btn { font-size: 16px; padding: 9px 16px; } .av-foot .grow { flex: 1; }
@media (max-width: 700px), (max-height: 520px) {
  /* (the whole height of a phone, not 640 px: held upright the preview took nearly half the window) */
  .av-box { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: calc(100vh - 24px); height: calc(100dvh - 24px); } #av-stage { min-height: 170px; height: 28vh; }
  @media (orientation: landscape) { .av-box { grid-template-columns: 40% 1fr; grid-template-rows: none; } #av-stage { height: auto; } }
}

/* ---- the Avatar Shop (inside the customizer window) ---- */
.av-tabs { display: flex; gap: 6px; margin-bottom: 8px; } .av-tabs button { flex: 1; font: inherit; font-weight: 700; font-size: 15px; border: 2px solid var(--line); background: #fff; color: var(--ink); border-radius: 12px; padding: 7px; cursor: pointer; }
.av-tabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.locked { opacity: .75; border-style: dashed; } .chip i { font-style: normal; font-size: 11px; margin-left: 4px; } .chip i.lock { color: #c0392b; } .chip i.own { font-size: 12px; }
.sw.locked { opacity: .7; font-size: 11px; display: inline-grid; place-items: center; }
.shop-head { background: linear-gradient(135deg, #fff6dc, #ffe1ef); border-radius: 14px; padding: 10px 12px; margin-bottom: 6px; }
.shop-head .bank { font-size: 17px; } .shop-head .bank b { color: #c2185b; } .shop-head .muted { font-size: 13px; margin-top: 3px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.shop-item { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 2px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; color: var(--ink); }
.shop-item .ic { font-size: 24px; height: 30px; display: grid; place-items: center; } .shop-item .dot { width: 24px; height: 24px; border-radius: 50%; display: block; border: 2px solid #fff; box-shadow: 0 0 0 1px #ccd; }
.shop-item .nm { font-size: 13px; font-weight: 600; text-align: center; line-height: 1.15; } .shop-item .pr { font-size: 12px; color: #c2185b; font-weight: 700; }
.shop-item.owned .pr { color: #1a9e8f; } .shop-item.on { border-color: #2ec4b6; background: #e6f8f6; }
#av-buy { display: flex; align-items: center; gap: 10px; padding: 8px 18px; background: #fff6dc; border-top: 1px solid #f3e2b0; flex-wrap: wrap; }
#av-buy[hidden] { display: none; } #av-buy .t { flex: 1; display: flex; flex-direction: column; min-width: 150px; } #av-buy .t span { font-size: 13px; color: var(--muted); }
#av-buy .need { font-size: 14px; font-weight: 600; color: #c2185b; }
#av-buy .warn { flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 600; color: #8a5a00; }