/* ZAHODY — магазини одягу й перукарні (shop-ui.js): таблички над входами, примірочна з дзеркалом, панель речей. Усе — під палець. */
#sh-tags{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.sh-tag{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;padding:6px 12px 6px 7px;border-radius:14px;background:rgba(31,42,51,.88);color:#fff;
  font:700 14px/1 system-ui,-apple-system,"Segoe UI",sans-serif;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.25);transform-origin:50% 100%;will-change:transform}
.sh-tag b{width:26px;height:26px;border-radius:50%;background:#f2c14e;display:flex;align-items:center;justify-content:center;font-size:15px}
.sh-tag.salon b{background:#e66a9a}
.sh-tag.near{background:#1f2a33;box-shadow:0 0 0 3px rgba(242,193,78,.8),0 3px 10px rgba(0,0,0,.25)}
body.map #sh-tags,body.styling #sh-tags{display:none}

#sh{--pw:420px;position:fixed;inset:0;z-index:24;display:none;font:15px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#1f2a33;pointer-events:none}
#sh.show{display:block}
#sh.busy .sh-panel{opacity:.7;pointer-events:none}
/* дзеркало: рама навколо персонажа (сцена видна крізь «скло»), лампи по боках */
.sh-mirror{position:absolute;left:var(--mx,50%);top:var(--my,50%);width:var(--mw,min(330px,40vw));height:var(--mh,min(560px,82vh));transform:translate(-50%,-50%);border-radius:170px 170px 26px 26px;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.35))}
/* золота рама — маскою (прозора середина зі скругленням), сцена й персонаж видно крізь «скло» */
.sh-mirror::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:14px;background:linear-gradient(160deg,#f7dc8a,#b9852f 35%,#f2cf72 55%,#9c6b22 80%,#e8c160);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.sh-glass{position:absolute;inset:14px;border-radius:156px 156px 14px 14px;background:linear-gradient(115deg,rgba(255,255,255,.18) 0 18%,rgba(255,255,255,0) 18% 26%,rgba(255,255,255,.1) 26% 30%,rgba(255,255,255,0) 30%),
  radial-gradient(ellipse at 50% 55%,rgba(255,255,255,0) 55%,rgba(20,30,40,.25) 100%)}
.sh-plate{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);width:120px;height:18px;border-radius:9px;background:linear-gradient(#e8c160,#9c6b22)}
.sh-lamp{position:absolute;top:28%;width:16px;height:16px;border-radius:50%;background:#fff6d6;box-shadow:0 0 18px 8px rgba(255,230,160,.65)}
.sh-lamp.l{left:-34px}.sh-lamp.r{right:-34px}

.sh-panel{position:absolute;right:12px;top:12px;bottom:12px;width:calc(var(--pw) - 24px);display:flex;flex-direction:column;pointer-events:auto;background:rgba(250,251,252,.97);border-radius:22px;
  box-shadow:0 18px 50px rgba(20,30,40,.3);overflow:hidden;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.sh-head{display:flex;align-items:center;gap:8px;padding:14px 10px 8px 18px}
.sh-title{flex:1;min-width:0;display:flex;flex-direction:column}
.sh-title b{font-size:18px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-title small{font-size:12px;color:#7b8792}
.sh-coins{font-weight:800;font-size:14px;background:#fff4d6;color:#7a5a12;border-radius:14px;padding:6px 10px;white-space:nowrap}
.sh-x{width:42px;height:42px;border:0;border-radius:12px;background:none;color:#8a949c;font-size:28px;line-height:1;cursor:pointer}
.sh-x:hover{background:#eef1f3;color:#1f2a33}
.sh-season{margin:0 14px 6px;padding:8px 12px;border-radius:12px;background:linear-gradient(90deg,#fff3e2,#e9f4ff);font-size:13px;font-weight:600;color:#3d4a55}
.sh-tabs{display:flex;gap:6px;overflow-x:auto;padding:4px 14px 8px;scrollbar-width:none}
.sh-tabs::-webkit-scrollbar{display:none}
.sh-tab{flex:none;border:1.5px solid #d6dce0;background:#fff;color:#1f2a33;border-radius:20px;min-height:38px;padding:6px 14px;font:700 13.5px system-ui,sans-serif;cursor:pointer}
.sh-tab.on{background:#1f2a33;border-color:#1f2a33;color:#fff}
.sh-grid{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 14px 10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;align-content:start}
.sh-card{position:relative;border:1.5px solid #e3e8eb;background:#fff;border-radius:16px;padding:10px 8px 9px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;font:inherit;color:inherit;min-height:122px}
.sh-card:hover{border-color:#b9c3ca}
.sh-card.on{border-color:#38c7a4;box-shadow:0 0 0 2px rgba(56,199,164,.3)}
.sh-card.pick{background:#f3fbf8}
.sh-ic{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--c) 13%);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.sh-ic i{font-style:normal;font-size:26px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.sh-nm{font-size:13px;font-weight:700;text-align:center;line-height:1.2}
.sh-pr{font-size:12.5px;font-weight:800;color:#7a5a12}
.sh-pr.own{color:#2f9e5a}
.sh-pr s{color:#9aa4ab;font-weight:600;margin-left:3px}
.sh-badge{position:absolute;left:6px;top:6px;font-size:13px}
.sh-on{position:absolute;right:6px;top:6px;width:20px;height:20px;border-radius:50%;background:#38c7a4;color:#fff;font-size:12px;line-height:20px;font-weight:800}
.sh-set{grid-column:1/-1;border:1.5px solid #e3e8eb;background:#fff;border-radius:16px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:10px;text-align:left;cursor:pointer;font:inherit;color:inherit}
.sh-set.pick{border-color:#38c7a4;background:#f3fbf8}
.sh-set-ic{grid-row:1/4;display:flex;align-items:center}
.sh-set-ic i{font-style:normal;width:38px;height:38px;margin-left:-8px;border-radius:50%;background:var(--c);border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:19px}
.sh-set-ic i:first-child{margin-left:0}
.sh-set-it{font-size:12px;color:#6b7680}
.sh-empty{grid-column:1/-1;color:#7b8792;text-align:center;padding:20px 10px}
.sh-chip{border:1.5px solid #d6dce0;background:#fff;border-radius:16px;min-height:52px;padding:8px 10px;font:700 14px system-ui,sans-serif;color:#1f2a33;cursor:pointer}
.sh-chip.on{background:#1f2a33;color:#fff;border-color:#1f2a33}
.sh-sw{width:44px;height:44px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px #cfd5da;cursor:pointer;padding:0}
.sh-sw.on{box-shadow:0 0 0 3px #1f2a33}
.sh-grid .sh-sw{width:56px;height:56px;justify-self:center}
.sh-detail{border-top:1px solid #e6eaed;padding:8px 14px 4px;background:#fff}
.sh-detail[hidden]{display:none}
.sh-dt{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.sh-dt small{color:#7b8792;font-size:12px}
.sh-cols{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}
.sh-cols .sh-sw{flex:none;width:34px;height:34px}
.sh-foot{border-top:1px solid #e6eaed;padding:10px 14px max(12px,env(safe-area-inset-bottom));background:#fff}
.sh-sum{font-size:13px;color:#3d4a55;margin-bottom:8px}
.sh-btns{display:flex;gap:8px}
.sh-b{border:0;border-radius:14px;min-height:50px;padding:10px 14px;font:800 15px system-ui,sans-serif;cursor:pointer}
.sh-alt{background:#eef1f3;color:#1f2a33}
.sh-go{flex:1;background:#1f2a33;color:#fff}
.sh-go:disabled{opacity:.45;cursor:default}
#sh.salon .sh-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}

/* телефон стоячи: панель знизу, дзеркало вгорі */
@media (max-width:700px){
  #sh{--pw:0px}
  .sh-panel{left:0;right:0;top:auto;bottom:0;width:auto;height:56%;border-radius:22px 22px 0 0}
  .sh-mirror::before{padding:10px}.sh-glass{inset:10px}
  .sh-lamp{display:none}
  .sh-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .sh-card{min-height:112px}
}
/* телефон боком: панель праворуч на половину */
@media (max-height:520px) and (orientation:landscape){
  #sh{--pw:52vw}
  .sh-panel{top:0;bottom:0;right:0;border-radius:22px 0 0 22px}
  .sh-mirror::before{padding:9px}.sh-glass{inset:9px}
  .sh-season{display:none}
  .sh-lamp{display:none}
}