/* Foam Workshop на MargoStory: тёплая «бумажная» гамма сайта (paper, plum, gold), шрифт Manrope, стеклянные панели */
:root {
  --ink: #4b3d2f; --ink-2: #7a644e; --title: #6b4a2e;
  --plum: #58304f; --gold: #b48b43; --violet: #8e5cf0;
  --glass: rgba(255, 250, 243, 0.68); --glass-edge: rgba(255, 255, 255, 0.85);
  --shadow: 0 1px 2px rgba(75, 61, 47, 0.08), 0 12px 30px rgba(75, 61, 47, 0.14);
  --font: "Manrope", "Noto Sans Hebrew", -apple-system, system-ui, sans-serif;
}
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 30%, #f8f1e6, #ecdfcd);
  color: var(--ink); font: 600 15px/1.3 var(--font);
  overscroll-behavior: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
#c { position: fixed; inset: 0; display: block; touch-action: none; opacity: 0; transition: opacity .5s ease; cursor: grab; }
#c:active { cursor: grabbing; }
body.ready #c { opacity: 1; }
body.armed #c { cursor: crosshair; }
.hidden { display: none !important; }
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
}

/* верхняя панель: назад · знак и название · идеи, отменить, скатать, новая масса */
#top {
  position: fixed; z-index: 5; top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 50%; transform: translateX(-50%); width: min(720px, calc(100% - 20px)); box-sizing: border-box;
  display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 18px;
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; font: 600 16px/1.2 "Lora", "Noto Sans Hebrew", Georgia, serif; color: var(--title); white-space: nowrap; overflow: hidden; }
.brand img { flex: none; border-radius: 50%; }
.brand .name { overflow: hidden; text-overflow: ellipsis; }
.actions { display: flex; gap: 6px; flex: none; }
.act {
  min-height: 38px; padding: 0 12px; border-radius: 12px; border: 0; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.82); color: var(--ink); font: 650 14px/1 var(--font); text-decoration: none;
  box-shadow: 0 1px 2px rgba(75, 61, 47, 0.14); touch-action: manipulation; white-space: nowrap; cursor: pointer;
}
.act.icon { width: 38px; padding: 0; flex: none; }
.act.small { width: 32px; min-height: 32px; }
.act:hover { background: #fff; }
.act:active { transform: scale(.96); }
.act:disabled { opacity: .35; cursor: default; }
#ideasBtn { color: var(--gold); }
[dir="rtl"] #back svg { transform: scaleX(-1); }

/* палитра */
#tray {
  position: fixed; z-index: 5; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 20px)); box-sizing: border-box;
  padding: 10px; border-radius: 24px; display: flex; flex-direction: column; gap: 10px; align-items: center;
}
#tray .row { display: flex; gap: 10px; justify-content: center; }
.chip {
  width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; position: relative; cursor: pointer;
  box-shadow: 0 2px 6px rgba(60, 40, 30, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  transition: transform .15s ease, box-shadow .15s ease; touch-action: manipulation;
}
.chip:hover { transform: translateY(-2px); }
.chip.on { transform: translateY(-4px) scale(1.08); box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--plum), 0 8px 18px rgba(60, 40, 30, 0.3); }
.chip:active { transform: scale(.94); }
.chip.paint { background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.9) 0 7%, rgba(255,255,255,0) 26%), radial-gradient(circle at 60% 75%, rgba(0,0,0,.18), rgba(0,0,0,0) 60%), var(--c); }
.chip.decor { overflow: hidden; }
.chip.gold { background: radial-gradient(circle at 30% 30%, #fff 0 4%, transparent 9%), radial-gradient(circle at 68% 60%, #fff 0 3%, transparent 8%), radial-gradient(circle at 45% 78%, #fffbe0 0 3%, transparent 7%), linear-gradient(135deg, #fbe7a1, #c9932d 38%, #ffeeb0 55%, #a8741c 80%, #f4d27a); }
.chip.silver { background: radial-gradient(circle at 32% 34%, #fff 0 4%, transparent 9%), radial-gradient(circle at 70% 55%, #fff 0 3%, transparent 8%), radial-gradient(circle at 48% 80%, #fff 0 3%, transparent 7%), linear-gradient(135deg, #f6f8fa, #9aa3ad 38%, #ffffff 55%, #79838e 80%, #dfe4ea); }
.chip.rainbow { background: radial-gradient(circle at 30% 30%, #fff 0 5%, transparent 10%), radial-gradient(circle at 66% 66%, #fff 0 4%, transparent 9%), conic-gradient(from 30deg, #ff5f8f, #ffb347, #ffe66b, #6ee7a8, #5ec8ff, #8f7dff, #ff6ad5, #ff5f8f); }
.chip.sprinkles { background: radial-gradient(circle at 28% 30%, #ff5d8f 0 8%, transparent 9%), radial-gradient(circle at 62% 26%, #3e8bff 0 8%, transparent 9%), radial-gradient(circle at 74% 58%, #ffd23f 0 8%, transparent 9%), radial-gradient(circle at 40% 62%, #3fd18f 0 8%, transparent 9%), radial-gradient(circle at 56% 82%, #ff8a3d 0 8%, transparent 9%), radial-gradient(circle at 22% 70%, #a46bff 0 8%, transparent 9%), #fbf8f4; }
.chip.foam { background: radial-gradient(circle at 32% 34%, #ffd6e6 0 17%, transparent 18%), radial-gradient(circle at 68% 40%, #d5e6ff 0 15%, transparent 16%), radial-gradient(circle at 50% 72%, #fff1c9 0 16%, transparent 17%), radial-gradient(circle at 30% 34%, rgba(0,0,0,.08) 0 20%, transparent 21%), #f7f1ef; }
.chip.confetti { background: radial-gradient(circle at 30% 32%, #ff7ac3 0 11%, transparent 12%), radial-gradient(circle at 66% 30%, #63d2ff 0 11%, transparent 12%), radial-gradient(circle at 58% 68%, #ffcf4a 0 11%, transparent 12%), radial-gradient(circle at 28% 70%, #8d7bff 0 10%, transparent 11%), linear-gradient(135deg, #fff, #f3eefb); }

/* подсказка над палитрой */
#hint {
  position: fixed; z-index: 6; left: 50%; transform: translate(-50%, 6px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 136px);
  padding: 8px 14px; border-radius: 999px; background: rgba(46, 36, 48, 0.86); color: #f6eee4;
  font-size: 14px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
#hint.show { opacity: 1; transform: translate(-50%, 0); }

/* выбор материала: кнопка в верхней панели и список */
.matbtn { gap: 6px; padding: 0 10px 0 8px; flex: 1 1 auto; min-width: 0; justify-content: flex-start; }
.matbtn .name { overflow: hidden; text-overflow: ellipsis; }
.msw-mini { width: 22px; height: 22px; border-radius: 50%; flex: none; background: conic-gradient(#ff6fae, #ffd21a, #25bf5a, #2f6df2, #8b45e6, #ff6fae); box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(60,40,30,.3); }
#mats { position: fixed; z-index: 7; top: calc(env(safe-area-inset-top, 0px) + 66px); left: 50%; width: min(420px, calc(100% - 20px)); box-sizing: border-box; padding: 14px; border-radius: 20px; transform: translate(-50%, -8px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
#mats.open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#matsList { display: grid; gap: 8px; margin-top: 10px; }
.mat { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 14px; cursor: pointer; background: rgba(255,255,255,.8); color: var(--ink); text-align: start; box-shadow: 0 1px 2px rgba(75,61,47,.12); font: 650 15px/1.2 var(--font); }
.mat small { display: block; margin-top: 2px; font-weight: 500; font-size: 13px; color: var(--ink-2); }
.mat.on { box-shadow: 0 0 0 2.5px var(--plum), 0 1px 2px rgba(75,61,47,.12); background: #fff; }
.mat:hover { background: #fff; }
.msw { width: 42px; height: 42px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 2px 5px rgba(60,40,30,.2); }
.msw.jelly { opacity: .85; }
.msw.slime { box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 2px 5px rgba(60,40,30,.2), inset -6px -8px 12px rgba(120,90,200,.25); }

/* «Идеи» — готовые сочетания */
#ideas {
  position: fixed; z-index: 7; top: calc(env(safe-area-inset-top, 0px) + 66px);
  left: 50%; width: min(420px, calc(100% - 20px)); box-sizing: border-box; padding: 14px; border-radius: 20px;
  transform: translate(-50%, -8px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
#ideas.open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ideas-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 17px/1.2 "Lora", "Noto Sans Hebrew", Georgia, serif; color: var(--title); }
.ideas-lead { margin: 6px 0 12px; font-weight: 500; font-size: 14px; color: var(--ink-2); }
#ideasList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.idea {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 0; border-radius: 14px; cursor: pointer;
  background: rgba(255, 255, 255, 0.8); color: var(--ink); font: 650 13px/1.2 var(--font); box-shadow: 0 1px 2px rgba(75, 61, 47, 0.12);
}
.idea:hover { background: #fff; }
.idea:active { transform: scale(.97); }
.idea .sw { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 2px 5px rgba(60,40,30,.2); }
.lang { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.lang button { border: 0; border-radius: 10px; padding: 7px 12px; background: transparent; color: var(--ink-2); font: 650 13px/1 var(--font); cursor: pointer; }
.lang button.on { background: #fff; color: var(--plum); box-shadow: 0 1px 2px rgba(75, 61, 47, 0.14); }

.ripple { position: fixed; z-index: 4; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; pointer-events: none; border: 3px solid var(--c, #fff); opacity: .85; animation: rip .65s ease-out forwards; }
.ripple.decor { border-color: #fff; box-shadow: 0 0 18px rgba(255, 230, 160, .9); }
@keyframes rip { from { transform: scale(.2); opacity: .9; } to { transform: scale(1.15); opacity: 0; } }

#dbg { position: fixed; z-index: 6; left: 10px; right: 10px; top: calc(env(safe-area-inset-top, 0px) + 62px); font-size: 11px; font-weight: 500; color: var(--ink-2); text-align: center; pointer-events: none; font-variant-numeric: tabular-nums; }
#err { position: fixed; z-index: 9; left: 10px; right: 10px; top: 40%; padding: 14px; border-radius: 14px; background: #fffaf3; color: #9b1c1c; box-shadow: var(--shadow); }

/* узкие экраны: название сворачивается в знак (на iPhone 11 — 414 pt) */
@media (max-width: 430px) { .matbtn .name { display: none; } .matbtn { flex: 0 0 auto; } }
@media (max-width: 370px) {
  #tray .row { gap: 8px; } .chip { width: 40px; height: 40px; }
  .act { padding: 0 9px; font-size: 13px; } .act.icon { width: 34px; }
  #hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 128px); }
}