/* ============================================================
   COTTSUG · ОДЕВАШКА — стили
   Клубнично-розовая тема, полностью адаптивная.
   ============================================================ */

/* ---------- 1. Палитра и токены ---------- */
:root{
  --p50:#fff7fb;
  --p100:#fdedf4;
  --p150:#fce2ee;
  --p200:#fbd5e5;
  --p300:#f7b8d2;
  --p400:#f291bb;
  --p500:#e8629b;
  --p600:#d8437f;
  --p700:#b92e66;

  --plum:#7a2e4e;
  --plum-soft:#a4577a;
  --berry:#e8506e;
  --leaf:#5fb37a;
  --cream:#fffdfb;
  --white:#fff;

  --ring:0 0 0 4px rgba(232,98,155,.16);
  --soft:0 10px 30px -12px rgba(216,67,127,.35);
  --soft-lg:0 22px 60px -24px rgba(216,67,127,.5);
  --edge:#f6c3da;

  --r-sm:14px;
  --r-md:20px;
  --r-lg:30px;
  --r-xl:42px;

  --gap:clamp(10px, 1.4vw, 18px);
  --pad:clamp(12px, 1.6vw, 22px);

  --font-title:'Comfortaa', 'Trebuchet MS', system-ui, sans-serif;
  --font-body:'Nunito', 'Segoe UI', system-ui, sans-serif;

  --sheet-h:46dvh;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--plum);
  background:
    radial-gradient(1200px 700px at 12% -10%, #fff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 105% 110%, #ffe9f3 0%, rgba(255,255,255,0) 65%),
    linear-gradient(168deg, #fdeef5 0%, #fce0ed 45%, #ffe7f1 100%);
  background-attachment:fixed;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

button{ font:inherit; color:inherit; }

/* ---------- 2. Фоновый декор ---------- */
.decor{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }

.decor__grid{
  position:absolute; inset:-10%;
  background-image:
    linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 80% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 30%, #000 30%, transparent 78%);
  opacity:.75;
}

.berry{
  position:absolute; color:var(--p300);
  opacity:.5;
  animation:floaty 14s ease-in-out infinite;
}
.berry--a{ width:180px; top:6%;  left:-3%;  animation-delay:-2s; }
.berry--b{ width:230px; bottom:-4%; right:-4%; animation-delay:-7s; color:var(--p200); }
.berry--c{ width:120px; top:52%; left:6%; opacity:.35; animation-delay:-11s; }

.spark{
  position:absolute;
  color:var(--p300);
  font-size:26px;
  text-shadow:0 0 18px rgba(247,184,210,.9);
  animation:twinkle 4.5s ease-in-out infinite;
}
.spark--1{ top:14%; left:22%; animation-delay:0s;   font-size:34px; }
.spark--2{ top:30%; left:78%; animation-delay:-1.1s; }
.spark--3{ top:70%; left:14%; animation-delay:-2.2s; font-size:20px; }
.spark--4{ top:82%; left:62%; animation-delay:-3.1s; font-size:30px; }
.spark--5{ top:8%;  left:56%; animation-delay:-1.7s; font-size:18px; }
.spark--6{ top:56%; left:92%; animation-delay:-2.7s; }

@keyframes floaty{
  0%,100%{ transform:translate3d(0,0,0) rotate(-4deg); }
  50%    { transform:translate3d(0,-26px,0) rotate(5deg); }
}
@keyframes twinkle{
  0%,100%{ transform:scale(.65) rotate(0deg);   opacity:.25; }
  50%    { transform:scale(1.15) rotate(90deg); opacity:.95; }
}

/* ---------- 3. Каркас ---------- */
.app{
  position:relative; z-index:1;
  height:100dvh;
  display:flex; flex-direction:column;
  padding:calc(var(--pad) + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right))
          calc(var(--pad) + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left));
  gap:var(--gap);
}

/* ---------- 4. Шапка ---------- */
.topbar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--gap);
  padding:10px clamp(12px,1.6vw,20px);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:2px solid var(--white);
  border-radius:var(--r-lg);
  box-shadow:var(--soft);
}

.brand__logo{ display:flex; flex-direction:column; line-height:1; }

.brand__word{
  font-family:var(--font-title);
  font-weight:700;
  font-size:clamp(22px, 3.2vw, 34px);
  letter-spacing:.06em;
  background:linear-gradient(96deg, var(--p500) 0%, var(--p400) 30%, var(--p600) 55%, var(--p400) 80%, var(--p500) 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:shimmer 6s linear infinite;
}
.brand__heart{
  -webkit-text-fill-color:var(--berry); color:var(--berry);
  font-size:.72em; display:inline-block;
  animation:beat 1.6s var(--ease-pop) infinite;
}
.brand__tag{
  margin-top:5px;
  font-size:clamp(8px,1vw,10px);
  font-weight:800; letter-spacing:.34em;
  color:var(--p400);
}

@keyframes shimmer{ to{ background-position:260% 0; } }
@keyframes beat{ 0%,100%{ transform:scale(1); } 30%{ transform:scale(1.32); } 45%{ transform:scale(1.05); } }

.tools{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.tool{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px 11px;
  border:2px solid var(--p200);
  border-radius:999px;
  background:var(--white);
  color:var(--p600);
  font-weight:800; font-size:13px;
  cursor:pointer;
  box-shadow:0 4px 0 var(--edge);
  transition:transform .18s var(--ease-pop), box-shadow .18s, background .18s, border-color .18s;
  white-space:nowrap;
}
.tool span{ font-size:16px; line-height:1; }
.tool:hover{ transform:translateY(-2px); background:var(--p50); border-color:var(--p300); box-shadow:0 6px 0 var(--edge); }
.tool:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--edge); }
.tool--icon{ padding:9px 12px 11px; }
.tool--icon b{ display:none; }

.tool--beta{
  background:linear-gradient(150deg, var(--p500), var(--p600));
  color:var(--white); border-color:var(--p600);
  box-shadow:0 4px 0 var(--p700);
}
.tool--beta:hover{ background:linear-gradient(150deg, var(--p400), var(--p500)); box-shadow:0 6px 0 var(--p700); }
.tool--beta.is-on{
  animation:betaGlow 1.6s ease-in-out infinite;
}
@keyframes betaGlow{ 0%,100%{ box-shadow:0 4px 0 var(--p700), 0 0 0 0 rgba(232,98,155,.5); } 50%{ box-shadow:0 4px 0 var(--p700), 0 0 0 10px rgba(232,98,155,0); } }

.tool.is-muted{ opacity:.5; }

/* ---------- 5. Основная сетка ---------- */
.layout{
  flex:1 1 auto; min-height:0;
  display:flex; gap:var(--gap);
}

/* ---------- 6. Персонаж ---------- */
.doll{
  flex:1 1 auto; min-width:0; min-height:0;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}

.doll__card{
  position:relative;
  flex:1 1 auto; min-height:0;
  width:100%;
  align-self:center;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(70% 50% at 50% 100%, #fff2f8 0%, rgba(255,255,255,0) 70%),
    var(--white);
  border:3px solid var(--white);
  outline:2px solid var(--p200); outline-offset:-9px;
  border-radius:var(--r-xl);
  box-shadow:var(--soft-lg);
  overflow:hidden;
}

.doll__corner{
  position:absolute; color:var(--p200); font-size:18px;
  animation:twinkle 5s ease-in-out infinite;
}
.doll__corner--tl{ top:16px; left:18px; }
.doll__corner--tr{ top:16px; right:18px; animation-delay:-1.2s; }
.doll__corner--bl{ bottom:16px; left:18px; animation-delay:-2.4s; }
.doll__corner--br{ bottom:16px; right:18px; animation-delay:-3.6s; }

/* сцена — размер задаёт JS, пропорции строго 1158×3106 */
.stage{
  position:relative;
  touch-action:none;
  animation:dollIn .8s var(--ease-pop) both;
}
@keyframes dollIn{ from{ opacity:0; transform:translateY(26px) scale(.94); } to{ opacity:1; transform:none; } }

.stage__inner{ position:absolute; inset:0; }

.layer{
  position:absolute;
  left:0; top:0;
  transform-origin:50% 50%;
  user-select:none; -webkit-user-select:none;
  pointer-events:none;
  will-change:transform;
  image-rendering:auto;
}
.layer--base{ z-index:0; }

.layer.is-new{ animation:pop .55s var(--ease-pop) both; }
@keyframes pop{
  0%  { opacity:0; transform:var(--tf) scale(.86); }
  60% { opacity:1; }
  100%{ opacity:1; transform:var(--tf); }
}

/* дыхание персонажа */
.stage__inner{ animation:breathe 5.5s ease-in-out infinite; transform-origin:50% 92%; }
@keyframes breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.006); } }

.doll__loader{
  position:absolute; inset:auto 0 24px; display:flex; gap:8px; justify-content:center;
  opacity:0; transition:opacity .3s;
}
.doll__loader.is-on{ opacity:1; }
.doll__loader i{
  width:9px; height:9px; border-radius:50%; background:var(--p300);
  animation:bounce .9s ease-in-out infinite;
}
.doll__loader i:nth-child(2){ animation-delay:.15s; }
.doll__loader i:nth-child(3){ animation-delay:.3s; }
@keyframes bounce{ 0%,100%{ transform:translateY(0); opacity:.4; } 50%{ transform:translateY(-9px); opacity:1; } }

/* сердечки при надевании */
.heart{
  position:fixed; z-index:60; pointer-events:none;
  font-size:20px; animation:heartUp .95s ease-out forwards;
}
@keyframes heartUp{
  0%  { opacity:1; transform:translate(-50%,-50%) scale(.4) rotate(var(--rot)); }
  100%{ opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% - 90px)) scale(1.25) rotate(var(--rot)); }
}

/* «надето» — чипы под персонажем */
.worn{
  flex:0 0 auto;
  display:flex; flex-wrap:nowrap; gap:6px; justify-content:flex-start;
  max-width:100%;
  overflow-x:auto; scrollbar-width:none;
  padding:2px 2px 4px;
  mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.worn::-webkit-scrollbar{ display:none; }
.worn__chip{ flex:0 0 auto; }
.worn__chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 8px 5px 5px;
  background:var(--white); border:2px solid var(--p200); border-radius:999px;
  font-size:11px; font-weight:800; color:var(--p600);
  cursor:pointer; box-shadow:0 3px 0 var(--edge);
  animation:pop .4s var(--ease-pop) both;
  transition:transform .16s var(--ease-pop), border-color .16s;
}
.worn__chip img{
  width:22px; height:22px; object-fit:contain; border-radius:50%; background:var(--p50);
  transform:translate(calc(var(--tx,0%) / 2), calc(var(--ty,0%) / 2)) rotate(var(--tr,0deg)) scale(var(--ts,1));
}
.worn__chip:hover{ transform:translateY(-2px); border-color:var(--p400); }
.worn__chip i{ font-style:normal; color:var(--p400); }

/* ---------- 7. Гардероб ---------- */
.wardrobe__head{ display:flex; }
.wardrobe{
  flex:0 0 clamp(300px, 27vw, 430px);
  min-height:0;
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:3px solid var(--white);
  border-radius:var(--r-xl);
  box-shadow:var(--soft-lg);
  overflow:hidden;
  position:relative;
}

/* фестончатая полоска сверху */
.wardrobe::before{
  content:''; display:block; height:14px; flex:0 0 auto;
  background:
    radial-gradient(circle at 10px 0, var(--p300) 7px, transparent 7.5px) 0 0/20px 14px repeat-x;
  opacity:.65;
}

.wardrobe__grip{ display:none; }

.wardrobe__head{ padding:6px var(--pad) 0; flex:0 0 auto; }
.wardrobe__title{
  margin:0; font-family:var(--font-title); font-weight:700;
  font-size:clamp(15px,1.5vw,19px); color:var(--p600);
  display:flex; align-items:baseline; gap:8px;
}
.wardrobe__title em{ font-style:normal; font-size:11px; font-weight:800; color:var(--p400); font-family:var(--font-body); }

/* вкладки */
.tabs{
  flex:0 0 auto;
  display:flex; gap:7px;
  padding:10px var(--pad);
  overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}
.tabs::-webkit-scrollbar{ display:none; }

.tab{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px 10px;
  border:2px solid var(--p200); border-radius:999px;
  background:var(--white); color:var(--p500);
  font-weight:800; font-size:12.5px; cursor:pointer;
  box-shadow:0 3px 0 var(--edge);
  transition:transform .18s var(--ease-pop), background .18s, color .18s, border-color .18s, box-shadow .18s;
  white-space:nowrap;
}
.tab:hover{ transform:translateY(-2px); background:var(--p50); }
.tab[aria-selected="true"]{
  background:linear-gradient(150deg, var(--p400), var(--p500));
  color:var(--white); border-color:var(--p500);
  box-shadow:0 3px 0 var(--p600), var(--ring);
}
.tab em{ font-style:normal; opacity:.75; font-size:11px; }

/* полки */
.shelf{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:4px var(--pad) var(--pad);
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(var(--card,92px), var(--card-max,999px)),1fr));
  gap:10px;
  align-content:start;
}
.shelf::-webkit-scrollbar{ width:9px; }
.shelf::-webkit-scrollbar-thumb{ background:var(--p200); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
.shelf::-webkit-scrollbar-track{ background:transparent; }

.card{
  position:relative;
  aspect-ratio:1/1;
  border:2px solid var(--p200);
  border-radius:var(--r-md);
  background:
    radial-gradient(60% 60% at 50% 40%, #fff 0%, var(--p50) 100%);
  cursor:pointer;
  padding:8px;
  display:grid; place-items:center;
  box-shadow:0 4px 0 var(--edge);
  transition:transform .2s var(--ease-pop), box-shadow .2s, border-color .2s;
  animation:cardIn .45s var(--ease-pop) both;
  animation-delay:var(--d,0ms);
  overflow:hidden;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(14px) scale(.9); } to{ opacity:1; transform:none; } }

.card img{
  position:absolute; left:9px; top:9px;
  width:calc(100% - 18px); height:calc(100% - 18px);
  object-fit:contain;
  filter:drop-shadow(0 3px 5px rgba(216,67,127,.18));
  transform:translate(var(--tx,0%), var(--ty,0%)) rotate(var(--tr,0deg)) scale(var(--ts,1));
  transition:transform .28s var(--ease-pop);
  pointer-events:none;
}
.card:hover{ transform:translateY(-4px); border-color:var(--p400); box-shadow:0 8px 0 var(--edge); }
.card:hover img{ transform:translate(var(--tx,0%), var(--ty,0%)) rotate(calc(var(--tr,0deg) - 3deg)) scale(calc(var(--ts,1) * 1.09)); }
.card:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--edge); }

.card.is-on{
  border-color:var(--p500);
  background:radial-gradient(70% 70% at 50% 35%, #fff 0%, #ffe6f1 100%);
  box-shadow:0 4px 0 var(--p400), var(--ring);
}
.card.is-on::after{
  content:'♥';
  position:absolute; top:5px; right:7px;
  color:var(--berry); font-size:15px;
  animation:pop .4s var(--ease-pop) both;
}
.card__num{
  position:absolute; left:7px; bottom:5px;
  font-size:9.5px; font-weight:800; color:var(--p300);
}

/* «снять» — первая карточка */
.card--none{ background:var(--white); border-style:dashed; }
.card--none::before{ content:'🧺'; font-size:26px; filter:grayscale(.15); }
.card--none b{ position:absolute; bottom:8px; font-size:10px; font-weight:800; color:var(--p400); }

/* ---------- 8. FAB (мобилка) ---------- */
.fab{ display:none; }

/* ---------- 9. Бета-панель ---------- */
.beta[hidden]{ display:none !important; }

.beta{
  position:fixed; z-index:70;
  top:calc(14px + env(safe-area-inset-top)); right:calc(14px + env(safe-area-inset-right));
  width:min(330px, calc(100vw - 28px));
  max-height:calc(100dvh - 28px);
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:3px solid var(--p300);
  border-radius:var(--r-lg);
  box-shadow:0 30px 70px -20px rgba(122,46,78,.45);
  animation:betaIn .4s var(--ease-pop) both;
  font-size:13px;
}
@keyframes betaIn{ from{ opacity:0; transform:translateX(24px) scale(.96); } to{ opacity:1; transform:none; } }

.beta__head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 14px;
  background:linear-gradient(150deg, var(--p500), var(--p600));
  color:var(--white);
  border-radius:calc(var(--r-lg) - 6px) calc(var(--r-lg) - 6px) 0 0;
  font-size:13px;
}
.beta__x{
  border:0; background:rgba(255,255,255,.22); color:#fff;
  width:26px; height:26px; border-radius:50%; cursor:pointer; font-weight:800;
  transition:background .2s, transform .2s;
}
.beta__x:hover{ background:rgba(255,255,255,.4); transform:rotate(90deg); }

.beta__body{ padding:13px 14px 16px; overflow-y:auto; display:flex; flex-direction:column; gap:11px; }
.beta__body::-webkit-scrollbar{ width:8px; }
.beta__body::-webkit-scrollbar-thumb{ background:var(--p200); border-radius:99px; }

.beta__hint{ margin:0; color:var(--plum-soft); font-size:11.5px; line-height:1.5; }

.beta__sel{
  padding:9px 12px; border-radius:var(--r-sm);
  background:var(--p100); border:2px dashed var(--p300);
  font-weight:800; color:var(--p600); text-align:center; font-size:12.5px;
  word-break:break-all;
}

.beta__rows{ display:flex; flex-direction:column; gap:6px; }
.brow{ display:grid; grid-template-columns:72px 1fr; align-items:center; gap:8px; font-size:11.5px; font-weight:800; color:var(--plum-soft); }
.brow span{ text-align:right; }
.brow i{ display:none; }
.brow input[type=number]{
  width:100%; padding:7px 9px; font:800 13px var(--font-body);
  color:var(--p700); background:var(--white);
  border:2px solid var(--p200); border-radius:10px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.brow input:focus{ border-color:var(--p400); box-shadow:var(--ring); }
.brow--range{ grid-template-columns:72px 1fr 42px; }
.brow--range i{ display:block; font-style:normal; font-size:11px; text-align:right; }
.brow input[type=range]{ accent-color:var(--p500); width:100%; }

.beta__btns{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.bbtn{
  padding:9px 8px 10px; border:2px solid var(--p200); border-radius:12px;
  background:var(--white); color:var(--p600); font-weight:800; font-size:11.5px;
  cursor:pointer; box-shadow:0 3px 0 var(--edge);
  transition:transform .16s var(--ease-pop), background .16s, box-shadow .16s;
}
.bbtn:hover{ transform:translateY(-2px); background:var(--p50); }
.bbtn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--edge); }
.bbtn--main{
  background:linear-gradient(150deg, var(--p400), var(--p500)); color:#fff;
  border-color:var(--p500); box-shadow:0 3px 0 var(--p600);
}
.bbtn--main:hover{ background:linear-gradient(150deg, var(--p300), var(--p400)); }
.bbtn--danger{ color:#b03a5b; border-color:#f3c2cf; }

.bcheck{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; color:var(--plum-soft); cursor:pointer; }
.bcheck input{ accent-color:var(--p500); width:15px; height:15px; }

.beta__keys{
  background:var(--p50); border:2px solid var(--p150); border-radius:var(--r-sm);
  padding:9px 11px; font-size:10.5px; line-height:1.75; color:var(--plum-soft);
}
.beta__keys b{ display:block; color:var(--p600); margin-bottom:3px; font-size:11px; }
kbd{
  background:var(--white); border:1.5px solid var(--p200); border-bottom-width:2.5px;
  border-radius:5px; padding:0 4px; font:800 10px var(--font-body); color:var(--p600);
}
.beta__save{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.beta__note{ margin:0; font-size:10.5px; line-height:1.5; color:var(--plum-soft); }
.beta__note code{ background:var(--p100); padding:1px 4px; border-radius:5px; font-size:10px; }

/* направляющие */
.guides{ position:absolute; inset:0; pointer-events:none; display:none; z-index:200; }
.guides.is-on{ display:block; }
.guides::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(232,98,155,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,98,155,.13) 1px, transparent 1px);
  background-size:6.47% 3.22%;
}
.guides::after{
  content:''; position:absolute; left:52.24%; top:0; bottom:0; width:1.5px;
  background:repeating-linear-gradient(180deg, var(--p500) 0 8px, transparent 8px 16px);
  opacity:.75;
}

/* выделенный слой в бете */
.layer.is-picked{
  outline:2.5px dashed var(--p600);
  outline-offset:3px;
  cursor:grab;
  animation:pickPulse 1.4s ease-in-out infinite;
}
.layer.is-picked:active{ cursor:grabbing; }
@keyframes pickPulse{ 0%,100%{ outline-color:var(--p600); } 50%{ outline-color:var(--p300); } }

.is-beta .layer{ pointer-events:auto; cursor:pointer; }
.is-beta .layer--base{ pointer-events:none; }

/* ---------- 10. Тост ---------- */
.toast{
  position:fixed; z-index:90;
  left:50%; bottom:calc(28px + env(safe-area-inset-bottom));
  transform:translate(-50%, 26px);
  padding:12px 20px;
  background:linear-gradient(150deg, var(--p500), var(--p600));
  color:#fff; font-weight:800; font-size:13px;
  border-radius:999px; box-shadow:var(--soft-lg);
  opacity:0; pointer-events:none;
  transition:opacity .3s, transform .35s var(--ease-pop);
  max-width:min(90vw,420px); text-align:center;
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

@media (min-width:761px){
  .tabs{ flex-wrap:wrap; overflow:visible; mask-image:none; -webkit-mask-image:none; }
  .tab{ padding:7px 11px 9px; font-size:12px; }
}

/* в БЕТЕ панель не должна закрывать гардероб */
@media (min-width:1101px){
  .app.is-beta{ padding-right:calc(var(--pad) + 348px); }
}

/* ============================================================
   11. АДАПТИВ
   ============================================================ */

/* — планшет — */
@media (max-width:1100px){
  .tool b{ display:none; }
  .tool{ padding:9px 12px 11px; }
  .tool--beta b{ display:inline; }
  .shelf{ --card-max:96px; }
}

@media (max-width:900px) and (min-width:761px){
  .wardrobe{ flex-basis:clamp(260px, 34vw, 340px); }
}

/* — мобилка: гардероб превращается в нижнюю шторку — */
@media (max-width:760px){
  :root{ --pad:12px; --gap:10px; }

  .app{ padding-bottom:0; }

  .topbar{ border-radius:var(--r-md); padding:8px 10px; }
  .brand__tag{ letter-spacing:.2em; }
  .tools{ gap:6px; }
  .tool{ padding:8px 10px 10px; font-size:12px; }
  .tool--beta b{ display:none; }

  .layout{ flex-direction:column; }

  .doll{ padding-bottom:calc(var(--sheet-h) - 26px); transition:padding-bottom .45s var(--ease-pop); }
  .app.is-sheet-closed .doll{ padding-bottom:86px; }

  .doll__card{ border-radius:var(--r-lg); }
  .doll__corner{ font-size:13px; }

  .worn{ display:none; }

  .wardrobe{
    position:fixed; z-index:40;
    left:0; right:0; bottom:0;
    height:var(--sheet-h);
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    border-width:3px 0 0;
    padding-top:24px;                 /* место под ручку, иначе её закрывают вкладки */
    padding-bottom:env(safe-area-inset-bottom);
    background:rgba(255,255,255,.94);
    box-shadow:0 -18px 50px -18px rgba(216,67,127,.45);
    transition:transform .45s var(--ease-pop);
  }
  .app.is-sheet-closed .wardrobe{ transform:translateY(calc(100% - 0px)); }

  .wardrobe__grip{
    display:block; position:absolute; z-index:5; top:0; left:0; right:0; height:26px;
    border:0; background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.75));
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    cursor:pointer;
  }
  .wardrobe__grip i{
    display:block; width:56px; height:6px; margin:9px auto 0;
    background:var(--p400); border-radius:99px;
  }
  .wardrobe__grip:active i{ background:var(--p600); }
  /* фоновые эмодзи на телефоне не крутим — лишняя нагрузка */
  .floaties{ display:none; }
  /* вещь появляется сразу на своём месте, без «наезда» масштабом */
  .layer.is-new{ animation:none; }
  .stage__inner{ animation:none; }
  .wardrobe::before{ margin-top:18px; }
  .wardrobe__head{ display:none; }
  .tabs{ padding:8px 12px; }
  .shelf{ --card-max:86px; gap:8px; }
  .wardrobe::before{ display:none; }   /* полукружочки только на десктопе */

  .fab{
    display:flex; align-items:center; gap:8px;
    position:fixed; z-index:41;
    left:50%; bottom:calc(16px + env(safe-area-inset-bottom));
    transform:translate(-50%, 120px);
    padding:13px 26px;
    border:3px solid var(--white); border-radius:999px;
    background:linear-gradient(150deg, var(--p500), var(--p600));
    color:#fff; font-weight:800; font-size:14px;
    box-shadow:var(--soft-lg); cursor:pointer;
    transition:transform .45s var(--ease-pop);
  }
  .fab span{ font-size:18px; }
  .toast{ bottom:calc(84px + env(safe-area-inset-bottom)); }
  .app.is-sheet-closed .fab{ transform:translate(-50%, 0); }

  .beta{
    top:auto; right:0; left:0;
    bottom:0; width:100%;
    max-height:78dvh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    border-width:3px 0 0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .beta__head{ border-radius:calc(var(--r-lg) - 6px) calc(var(--r-lg) - 6px) 0 0; }
  .beta__keys{ display:none; }
  .brow{ grid-template-columns:64px 1fr; }
}

/* — очень узкие / iPhone SE — */
@media (max-width:440px){
  .topbar{ padding:7px 9px; gap:6px; flex-wrap:nowrap; }
  .brand__word{ font-size:17px; letter-spacing:.03em; }
  .brand__tag{ display:none; }
  .tools{ gap:4px; flex-wrap:nowrap; }
  .tool{ padding:7px 8px 9px; box-shadow:0 3px 0 var(--edge); }
  .tool span{ font-size:14px; }
  .shelf{ --card-max:76px; gap:7px; }
}

/* — альбомная мобилка: низкая высота — */
@media (max-height:520px) and (orientation:landscape){
  :root{ --sheet-h:78dvh; --pad:9px; --gap:8px; }
  .layout{ flex-direction:row; }
  .doll{ padding-bottom:0 !important; }
  .worn{ display:none; }
  .wardrobe__head{ display:none; }
  .wardrobe::before{ height:9px; }
  /* по высоте тесно — вкладки снова в одну прокручиваемую строку */
  .tabs{
    flex-wrap:nowrap; overflow-x:auto; padding:7px 12px;
    mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  .tab{ padding:6px 11px 8px; font-size:11.5px; }
  .topbar{ padding:5px 10px; border-radius:var(--r-md); }
  .brand__word{ font-size:17px; }
  .tool{ padding:6px 9px 8px; }
  .tool span{ font-size:14px; }
  .wardrobe{
    position:static; height:auto; flex:0 0 40%;
    border-radius:var(--r-lg); border-width:3px;
    transform:none !important;
  }
  .wardrobe__grip{ display:none; }
  .wardrobe::before{ margin-top:0; }
  .fab{ display:none; }
  .topbar{ padding:5px 10px; }
  .brand__tag{ display:none; }
}

/* — крупные экраны — */
@media (min-width:1500px){
  .app{ max-width:1600px; margin:0 auto; }
  .shelf{ --card:104px; }
}

/* — доступность — */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media (hover:none){
  .card:hover{ transform:none; box-shadow:0 4px 0 var(--edge); }
  .card:hover img{ transform:translate(var(--tx,0%), var(--ty,0%)) rotate(var(--tr,0deg)) scale(var(--ts,1)); }
  .tool:hover,.tab:hover{ transform:none; }
}

/* печать не нужна, но пусть будет опрятно */
@media print{ .decor,.topbar,.wardrobe,.fab,.beta,.toast{ display:none !important; } }


/* ============================================================
   12. МИЛОТА: клубнички, искры, дождик
   ============================================================ */

/* всплывающие снизу клубнички в фоне */
.floaties{ position:absolute; inset:0; overflow:hidden; }
.floaties span{
  position:absolute;
  left:var(--l); bottom:-8%;
  font-size:var(--sz);
  opacity:.34;
  animation:rise var(--dur) linear infinite;
  animation-delay:var(--dl);
  will-change:transform;
}
@keyframes rise{
  0%   { transform:translate3d(0, 0, 0) rotate(0deg);        opacity:0; }
  10%  { opacity:.4; }
  50%  { transform:translate3d(34px, -55vh, 0) rotate(180deg); }
  90%  { opacity:.32; }
  100% { transform:translate3d(-18px, -115vh, 0) rotate(360deg); opacity:0; }
}

/* искры в точке клика */
.sparkle{
  position:fixed; z-index:80; pointer-events:none;
  transform:translate(-50%,-50%);
  animation:sparkOut .8s var(--ease-pop) forwards;
}
@keyframes sparkOut{
  0%  { opacity:1; transform:translate(-50%,-50%) scale(.3) rotate(0deg); }
  70% { opacity:.9; }
  100%{ opacity:0;
        transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.1) rotate(200deg); }
}

/* клубничный дождь */
.rain{
  position:fixed; z-index:75; top:-8vh; pointer-events:none;
  animation:fall 2.4s linear forwards;
  will-change:transform;
}
@keyframes fall{
  0%  { opacity:0; transform:translate3d(0,0,0) rotate(0deg); }
  12% { opacity:1; }
  85% { opacity:1; }
  100%{ opacity:0; transform:translate3d(var(--sway), 112vh, 0) rotate(var(--spin)); }
}

/* клубничка-талисман в углу карточки */
.doll__mascot{
  position:absolute; right:14px; bottom:12px;
  font-size:26px; opacity:.85;
  transform-origin:50% 90%;
  animation:mascot 3.4s var(--ease-pop) infinite;
  pointer-events:none;
}
@keyframes mascot{
  0%,68%,100%{ transform:translateY(0) rotate(0deg) scale(1); }
  74%        { transform:translateY(-13px) rotate(-12deg) scale(1.12); }
  80%        { transform:translateY(0) rotate(9deg) scale(.94); }
  86%        { transform:translateY(-5px) rotate(-4deg) scale(1.04); }
}

/* нежное свечение карточки персонажа */
.doll__card{ animation:cardGlow 6s ease-in-out infinite; }
@keyframes cardGlow{
  0%,100%{ box-shadow:0 22px 60px -24px rgba(216,67,127,.5); }
  50%    { box-shadow:0 22px 66px -22px rgba(216,67,127,.62), 0 0 0 6px rgba(251,213,229,.35); }
}

/* блик, пробегающий по карточке вещи */
.card__shine{
  position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none;
}
.card__shine::before{
  content:''; position:absolute; top:-60%; left:-120%;
  width:55%; height:220%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  transform:rotate(16deg);
}
.card:hover .card__shine::before{ animation:shine .75s ease-out; }
@keyframes shine{ to{ left:150%; } }

/* выбранная вещь — бегущая пунктирная рамка */
.card.is-on::before{
  content:''; position:absolute; inset:3px;
  border:2px dashed var(--p400); border-radius:calc(var(--r-md) - 5px);
  opacity:.75;
  animation:dash 9s linear infinite;
  pointer-events:none;
}
@keyframes dash{ to{ transform:rotate(360deg); } }

/* логотип слегка качается при наведении */
.brand__logo:hover .brand__word{ animation:shimmer 6s linear infinite, wobble .7s var(--ease-pop); }
@keyframes wobble{
  0%,100%{ transform:rotate(0deg); }
  25%    { transform:rotate(-2.5deg) scale(1.03); }
  60%    { transform:rotate(2deg) scale(1.01); }
}

/* активная вкладка чуть подпрыгивает при включении */
.tab[aria-selected="true"]{ animation:tabPop .45s var(--ease-pop); }
@keyframes tabPop{
  0%  { transform:scale(.9); }
  55% { transform:scale(1.08); }
  100%{ transform:scale(1); }
}

/* фестончатая полоска гардероба мягко переливается */
.wardrobe::before{ animation:scallop 7s ease-in-out infinite; }
@keyframes scallop{ 0%,100%{ opacity:.5; } 50%{ opacity:.85; } }

/* ============================================================
   13. ССЫЛКА НА КАНАЛ
   ============================================================ */
.brand__tag{
  display:inline-flex; align-items:center; gap:5px;
  text-decoration:none;
  transition:color .2s, transform .2s var(--ease-pop);
}
.brand__tag:hover{ color:var(--p600); transform:translateX(2px); }
.brand__tgi{ width:11px; height:11px; flex:0 0 auto; }

.tool--tg{
  background:linear-gradient(150deg, #eaf6ff, #ffffff);
  border-color:#bfe0f7; color:#2b8fd6;
  box-shadow:0 4px 0 #cfe8f8;
  text-decoration:none;
}
.tool--tg:hover{ background:linear-gradient(150deg,#dcf0ff,#f6fbff); border-color:#8ecdf0; box-shadow:0 6px 0 #cfe8f8; }
.tool__tgi{ width:16px; height:16px; flex:0 0 auto; }

.wardrobe__tg{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:800; color:var(--p400);
  text-decoration:none;
  transition:color .2s, transform .2s var(--ease-pop);
}
.wardrobe__tg svg{ width:12px; height:12px; }
.wardrobe__tg:hover{ color:var(--p600); transform:translateY(-1px); }

.wardrobe__head{ align-items:baseline; justify-content:space-between; gap:8px; }

/* ============================================================
   14. МЕЛОЧИ БЕТА-ПАНЕЛИ
   ============================================================ */
.beta__mini{
  margin:0; font-size:10.5px; line-height:1.5; color:var(--plum-soft);
  background:var(--p50); border:1.5px solid var(--p150);
  border-radius:10px; padding:7px 9px;
}
.beta__mini b{ color:var(--p600); }
.beta__hint b{ color:var(--p600); }

.worn__chip--base{
  border-color:var(--p400); background:var(--p50);
}
.worn__chip--base img{ background:#fff; }

/* спокойный режим — без прыгающих частиц */
@media (prefers-reduced-motion:reduce){
  .floaties, .doll__mascot{ display:none; }
}

/* статус: правки только в браузере или уже как в файле */
.beta__state{
  display:flex; align-items:center; gap:7px;
  padding:8px 10px; border-radius:12px;
  font-size:11px; font-weight:800; line-height:1.35;
  border:2px solid var(--p150); background:var(--p50); color:var(--plum-soft);
  transition:background .25s, border-color .25s, color .25s;
}
.beta__state::before{ content:'✅'; font-size:13px; flex:0 0 auto; }
.beta__state.is-dirty{
  border-color:#f6c98a; background:#fff7e9; color:#9a6414;
  animation:dirtyPulse 2.4s ease-in-out infinite;
}
.beta__state.is-dirty::before{ content:'⚠️'; }
@keyframes dirtyPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(246,201,138,0); }
  50%    { box-shadow:0 0 0 5px rgba(246,201,138,.35); }
}

/* ============================================================
   15. РЕДАКТОР ИКОНКИ В ГАРДЕРОБЕ
   ============================================================ */
.iconed{
  border:2px solid var(--p150); background:var(--p50);
  border-radius:var(--r-sm); padding:9px 10px;
  display:flex; flex-direction:column; gap:8px;
  transition:opacity .2s;
}
.iconed.is-off{ opacity:.4; pointer-events:none; }
.iconed__title{ font-size:11px; font-weight:800; color:var(--p600); }
.iconed__row{ display:flex; gap:10px; align-items:flex-start; }

.iconed__box{
  position:relative; flex:0 0 84px;
  width:84px; height:84px;
  border:2px solid var(--p300); border-radius:var(--r-md);
  background:
    linear-gradient(45deg, #f7e6ef 25%, transparent 25%) 0 0/12px 12px,
    linear-gradient(-45deg, #f7e6ef 25%, transparent 25%) 0 0/12px 12px,
    linear-gradient(45deg, transparent 75%, #f7e6ef 75%) 6px 6px/12px 12px,
    linear-gradient(-45deg, transparent 75%, #f7e6ef 75%) 6px 6px/12px 12px,
    #fff;
  overflow:hidden; cursor:grab; touch-action:none;
  display:grid; place-items:center;
}
.iconed__box.is-grab{ cursor:grabbing; border-color:var(--p500); }
.iconed__box img{
  max-width:100%; max-height:100%; object-fit:contain;
  transform:translate(var(--tx,0%), var(--ty,0%)) rotate(var(--tr,0deg)) scale(var(--ts,1));
  pointer-events:none; user-select:none;
}
.iconed__grip{
  position:absolute; left:0; right:0; bottom:0;
  text-align:center; font-size:8.5px; font-weight:800; letter-spacing:.1em;
  color:var(--p600); background:rgba(255,255,255,.8); padding:1px 0;
  text-transform:uppercase;
}
.iconed__ctrls{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.brow--tiny{ grid-template-columns:56px 1fr; font-size:10.5px; }
.brow--tiny input[type=number]{ padding:5px 7px; font-size:12px; }