/* ===== Тайны Будуара — рококо-тема ===== */
:root {
  --deep: #1a0409; --wine: #2a0712; --burgundy: #4a0e1e; --velvet: #6b1a2c;
  --rose: #c94f6a; --blush: #e8b4b8; --cream: #f5e6d3; --ivory: #fbf5ec;
  --gold: #c9a14a; --gold-l: #f0d78c; --gold-d: #8a6420;
  --gold-grad: linear-gradient(135deg, #f6e2a6 0%, #c9a14a 38%, #8a6420 62%, #e9cf8a 100%);
  --serif: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --display: 'Playfair Display', 'Georgia', serif;
  --app-h: 100vh; --top-h: 54px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
@supports (height: 100dvh) { :root { --app-h: 100dvh; } }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--deep); }
body {
  font-family: var(--serif); color: var(--cream); font-size: 17px;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
  overscroll-behavior: none; -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
[hidden] { display: none !important; }

#app {
  position: relative; height: var(--app-h); overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(201,161,74,.18), transparent 55%),
    radial-gradient(ellipse at 10% 110%, rgba(201,79,106,.20), transparent 50%),
    radial-gradient(ellipse at 100% 60%, rgba(107,26,44,.55), transparent 60%),
    linear-gradient(180deg, #2a0712 0%, #1a0409 100%);
}
/* бархатный дамаск */
#app::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 6c6 10 18 12 18 24s-10 16-18 26c-8-10-18-14-18-26S34 16 40 6z M0 46c6 6 12 6 14 14-6 6-10 10-14 14z M80 46c-6 6-12 6-14 14 6 6 10 10 14 14z' fill='%23f0d78c'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* ===== Шапка ===== */
#topbar {
  position: relative; z-index: 5; height: var(--top-h); display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: linear-gradient(180deg, rgba(42,7,18,.96), rgba(42,7,18,.75));
  border-bottom: 1px solid rgba(201,161,74,.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
#topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--gold-grad); opacity: .55; }
.top-title {
  flex: 1; text-align: center; font-family: var(--display); font-size: 19px; letter-spacing: .5px;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-right { min-width: 40px; display: flex; justify-content: flex-end; gap: 6px; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--gold-l); border: 1px solid rgba(201,161,74,.4); background: rgba(74,14,30,.6); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:active { transform: scale(.94); }
.stars-pill { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 20px; font-size: 14px; font-weight: 700;
  background: rgba(201,161,74,.15); border: 1px solid rgba(201,161,74,.5); color: var(--gold-l); }

/* ===== Экраны ===== */
.screen {
  position: absolute; left: 0; right: 0; top: var(--top-h); bottom: 0; display: none; flex-direction: column;
  overflow: hidden;
}
.screen.active { display: flex; animation: scrIn .38s cubic-bezier(.2,.8,.2,1); }
@keyframes scrIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* ===== Рамка рококо ===== */
.frame {
  position: relative; border: 2px solid transparent; border-radius: 14px;
  background: linear-gradient(160deg, rgba(74,14,30,.95), rgba(42,7,18,.98)) padding-box, var(--gold-grad) border-box;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(240,215,140,.15), inset 0 0 26px rgba(201,161,74,.12);
}
.frame::before {
  content: ''; position: absolute; inset: -6px; pointer-events: none; z-index: 2;
  background: url(../assets/ui/corner-tl.svg) top left/34px no-repeat, url(../assets/ui/corner-tr.svg) top right/34px no-repeat,
              url(../assets/ui/corner-bl.svg) bottom left/34px no-repeat, url(../assets/ui/corner-br.svg) bottom right/34px no-repeat;
}

/* ===== Кнопки ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 30px;
  font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: .3px; transition: transform .15s, filter .15s;
}
.btn:active { transform: scale(.97); }
.btn.gold { background: var(--gold-grad); color: #3a0a17; box-shadow: 0 6px 20px rgba(201,161,74,.35), inset 0 1px 0 rgba(255,255,255,.5); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.btn.velvet { background: linear-gradient(180deg, #8e1f3a, #5a0f22); color: var(--cream); border: 1px solid rgba(240,215,140,.5); }
.btn.ghost { border: 1px solid rgba(201,161,74,.55); color: var(--gold-l); background: rgba(42,7,18,.5); }
.btn.wide { width: calc(100% - 40px); margin: 0 20px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.link { color: var(--blush); text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }
.badge { font-size: 12px; padding: 4px 10px; border-radius: 12px; background: rgba(232,180,184,.12); border: 1px dashed rgba(232,180,184,.5); color: var(--blush); }

/* ===== Главная ===== */
#scrHome { overflow-y: auto; padding-bottom: calc(18px + var(--safe-b)); gap: 16px; }
.home-hero { text-align: center; padding: 18px 16px 0; }
.crest img { width: 62px; height: 62px; filter: drop-shadow(0 4px 12px rgba(201,161,74,.4)); animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-5px); } }
.logo { margin: 6px 0 0; font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1.02; font-style: italic;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.logo span { font-size: 46px; letter-spacing: 1px; }
.divider { width: 220px; max-width: 70%; margin: 8px auto 2px; display: block; }
.tagline { margin: 4px 0 0; color: var(--blush); font-size: 17px; font-style: italic; line-height: 1.3; }
.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 6px 20px; }
.mode-card { display: flex; flex-direction: column; overflow: visible; padding: 8px; text-align: center; transition: transform .2s; }
.mode-card:active { transform: scale(.97); }
.mode-thumb { height: 0; padding-top: 133.33%; border-radius: 9px; background: #3a0a17 center/cover no-repeat; box-shadow: inset 0 0 0 1px rgba(240,215,140,.35), 0 4px 14px rgba(0,0,0,.4); }
.mode-name { margin-top: 8px; font-family: var(--display); font-size: 20px; color: var(--gold-l); }
.mode-sub { font-size: 14px; color: var(--blush); }
.home-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* ===== Уровни ===== */
.levels-head { padding: 10px 14px 4px; display: flex; flex-direction: column; gap: 8px; }
.cat-chips { overflow-x: auto; scrollbar-width: none; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chips .chip { flex: none; }
.vip-badge { display: inline-block; margin-top: 6px; padding: 3px 12px; border-radius: 12px; font-size: 13px; letter-spacing: 1px; background: var(--gold-grad); color: #3a0a17; font-weight: 700; }
.pal-tab .lk { font-size: 11px; margin-left: 3px; }
.aff-lock { font-size: 14px; color: var(--gold-l); margin-top: 4px; }
.treasury-link { margin-top: 6px; }
.product .old { text-decoration: line-through; opacity: .6; font-size: 12px; margin-right: 4px; }
.levels-progress { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--blush); }
.levels-progress .bar { flex: 1; height: 6px; border-radius: 4px; background: rgba(232,180,184,.15); overflow: hidden; }
.levels-progress .bar i { display: block; height: 100%; width: 0; background: var(--gold-grad); transition: width .5s; }
.level-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 10px 14px calc(24px + var(--safe-b)); align-content: start; -webkit-overflow-scrolling: touch; }
.lvl { position: relative; display: block; width: 100%; height: 0; padding: 133.33% 0 0; border-radius: 10px; overflow: hidden; background: #3a0a17;
  border: 1.5px solid rgba(201,161,74,.6); box-shadow: 0 4px 12px rgba(0,0,0,.4); animation: lvlIn .4s both; }
@keyframes lvlIn { from { opacity: 0; transform: scale(.94); } }
.lvl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #f5e6d3; }
.lvl.coloring img { object-fit: contain; background: #fff; }
.lvl .num { position: absolute; left: 6px; top: 6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--display); font-size: 12px; background: rgba(42,7,18,.85); color: var(--gold-l); border: 1px solid rgba(201,161,74,.6); }
.lvl .ph { position: absolute; right: 5px; bottom: 5px; font-size: 9px; letter-spacing: .5px; padding: 2px 5px; border-radius: 6px; background: rgba(0,0,0,.55); color: var(--blush); }
.lvl .done { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-grad); color: #3a0a17; font-size: 14px; font-weight: 700; }
.lvl.locked img { filter: blur(5px) brightness(.55) saturate(.7); transform: scale(1.1); }
.lvl .lock { position: absolute; inset: 0; display: grid; place-items: center; }
.lvl .lock b { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(42,7,18,.8); border: 1.5px solid var(--gold); font-size: 18px; }
.lvl:active { transform: scale(.96); }
.paywall-row { grid-column: 1 / -1; text-align: center; padding: 14px 8px; margin: 4px 0; }
.paywall-row p { margin: 0 0 10px; color: var(--blush); font-style: italic; }

/* ===== Пазл ===== */
.pz-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 4px; }
.chips { display: flex; gap: 6px; }
.chip { padding: 5px 10px; border-radius: 16px; font-size: 14px; font-weight: 600; border: 1px solid rgba(201,161,74,.45); color: var(--blush); background: rgba(42,7,18,.6); }
.chip.active { background: var(--gold-grad); color: #3a0a17; border-color: transparent; }
.pz-stat { font-family: var(--display); font-size: 15px; color: var(--gold-l); white-space: nowrap; }
.pz-field { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; touch-action: none; }
.pz-loading { margin: auto; color: var(--blush); font-style: italic; }
.pz-vp { position: relative; flex: 1; overflow: hidden; touch-action: none; }
.pz-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.pz-board { position: absolute; left: 0; top: 0; border-radius: 3px; background: rgba(0,0,0,.35);
  box-shadow: 0 0 0 3px #8a6420, 0 0 0 5px #f0d78c, 0 0 0 8px #6b4a14, 0 10px 30px rgba(0,0,0,.6); }
.pz-board .ghost, .pz-board .peek { position: absolute; inset: 0; background: center/100% 100% no-repeat; pointer-events: none; }
.pz-board .ghost { opacity: .12; }
.pz-board .peek { opacity: 0; z-index: 3000; transition: opacity .25s; }
.pz-board.peeking .peek { opacity: 1; }
.pz-board canvas.grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pz-tray { flex: none; height: 92px; overflow-x: auto; overflow-y: hidden; touch-action: none; scrollbar-width: none;
  background: linear-gradient(180deg, rgba(74,14,30,.92), rgba(42,7,18,.96)); border-top: 2px solid #8a6420; box-shadow: inset 0 6px 14px rgba(0,0,0,.45), 0 -1px 0 #f0d78c; }
.pz-tray::-webkit-scrollbar { display: none; }
.pz-tray-in { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 14px; width: max-content; min-width: 100%; }
.pz-tray-in:empty::after { content: 'Лоток пуст ✦'; color: var(--blush); font-style: italic; margin: auto; }
.pz-drag { position: absolute; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.piece { position: absolute; left: 0; top: 0; flex: none; touch-action: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.piece.drag { filter: drop-shadow(0 10px 12px rgba(0,0,0,.6)) brightness(1.06); }
.piece.placed { filter: none; pointer-events: none; }
.piece.flash { animation: flash .9s ease-out; }
@keyframes flash { 30% { filter: brightness(1.6) drop-shadow(0 0 8px #f0d78c); } }
.pz-board.win { animation: winGlow 1.6s ease-in-out 2; }
@keyframes winGlow { 50% { box-shadow: 0 0 0 3px #8a6420, 0 0 0 5px #f0d78c, 0 0 0 8px #6b4a14, 0 0 60px 18px rgba(240,215,140,.55); } }
.tool .emo { font-size: 20px; line-height: 23px; height: 23px; }
.pz-tools { display: flex; justify-content: center; gap: 10px; padding: 6px 10px calc(8px + var(--safe-b)); }

/* ===== Инструменты (общие) ===== */
.tool { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 50px; padding: 6px 6px 4px; border-radius: 12px; color: var(--blush); font-size: 11px; border: 1px solid transparent; }
.tool svg { width: 23px; height: 23px; }
.tool.active { color: #3a0a17; background: var(--gold-grad); }
.tool[disabled] { opacity: .35; pointer-events: none; }
.tool:active { transform: scale(.94); }

/* ===== Раскраска ===== */
.cl-stage { position: relative; flex: 1; overflow: hidden; touch-action: none; display: grid; place-items: center; }
.cl-wrap { position: relative; transform-origin: 0 0; border-radius: 4px; background: #fff;
  box-shadow: 0 0 0 3px #8a6420, 0 0 0 5px #f0d78c, 0 0 0 8px #6b4a14, 0 12px 30px rgba(0,0,0,.6); }
.cl-wrap canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.cl-wrap canvas.ev { touch-action: none; }
.cl-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--blush); font-style: italic; background: rgba(26,4,9,.6); }
.cl-panel { background: linear-gradient(180deg, rgba(42,7,18,.9), rgba(26,4,9,.98)); border-top: 1px solid rgba(201,161,74,.4); padding: 6px 6px calc(8px + var(--safe-b)); }
.cl-tools { display: flex; justify-content: space-between; overflow-x: auto; scrollbar-width: none; }
.cl-tools .tool { min-width: 42px; padding: 5px 3px 3px; }
.cl-size { display: flex; align-items: center; gap: 10px; padding: 4px 10px; font-size: 13px; color: var(--blush); }
.cl-size input { flex: 1; accent-color: var(--gold); }
.cl-size i { width: 14px; height: 14px; border-radius: 50%; background: var(--cream); flex: none; }
.pal-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 6px 4px 4px; scrollbar-width: none; }
.pal-tabs::-webkit-scrollbar, .cl-tools::-webkit-scrollbar, .swatches::-webkit-scrollbar { display: none; }
.pal-tab { flex: none; padding: 4px 11px; border-radius: 14px; font-size: 14px; font-weight: 600; color: var(--blush); border: 1px solid rgba(201,161,74,.35); }
.pal-tab.active { color: #3a0a17; background: var(--gold-grad); border-color: transparent; }
.swatches { display: flex; gap: 8px; overflow-x: auto; padding: 6px 4px 2px; scrollbar-width: none; }
.sw { position: relative; flex: none; width: 32px; height: 36px; margin-top: 6px; border-radius: 7px 7px 12px 12px; border: 2px solid rgba(255,255,255,.3); box-shadow: inset 0 -5px 8px rgba(0,0,0,.25), inset 0 4px 4px rgba(255,255,255,.25); transition: transform .15s; }
.sw::before { content: ''; position: absolute; left: 3px; right: 3px; top: -8px; height: 6px; border-radius: 3px 3px 1px 1px; background: var(--gold-grad); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.sw.active { transform: scale(1.14); border-color: var(--gold-l); box-shadow: 0 0 0 2px var(--gold-d), 0 0 12px rgba(240,215,140,.6); }
.sw.custom { background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.sw.custom input { overflow: hidden; }
.sw.custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }

/* ===== Модалка ===== */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 22px; background: rgba(10,2,5,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadeIn .25s; }
@keyframes fadeIn { from { opacity: 0; } }
.modal-card { width: 100%; max-width: 380px; max-height: calc(var(--app-h) - 60px); overflow-y: auto; padding: 26px 20px 20px; text-align: center; animation: popIn .35s cubic-bezier(.2,1.3,.4,1); }
@keyframes popIn { from { opacity: 0; transform: scale(.88) translateY(10px); } }
.modal-x { position: absolute; right: 8px; top: 6px; width: 36px; height: 36px; font-size: 26px; color: var(--gold-l); z-index: 3; }
.modal h2 { margin: 0 0 4px; font-family: var(--display); font-style: italic; font-size: 25px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.modal p { margin: 8px 0; line-height: 1.35; }
.modal .aff { font-size: 21px; font-style: italic; color: var(--cream); padding: 6px 4px; }
.modal .aff::before, .modal .aff::after { content: '❦'; color: var(--gold); margin: 0 8px; font-style: normal; }
.modal .muted { color: var(--blush); font-size: 15px; }
.modal .actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.age-big { font-family: var(--display); font-size: 56px; font-weight: 700; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.product { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; margin: 10px 0; border-radius: 12px; border: 1px solid rgba(201,161,74,.45); background: rgba(26,4,9,.5); }
.product.best { border-color: var(--gold-l); box-shadow: 0 0 18px rgba(240,215,140,.25); }
.product .pi { flex: 1; }
.product .pt { font-family: var(--display); font-size: 17px; color: var(--gold-l); }
.product .pd { font-size: 14px; color: var(--blush); }
.product .btn { padding: 9px 14px; font-size: 15px; white-space: nowrap; }
.product.owned { opacity: .6; }
.save-img { max-width: 100%; max-height: 50vh; border-radius: 6px; border: 2px solid var(--gold); background: #fff; -webkit-touch-callout: default; user-select: auto; }
.preview-img { max-width: 100%; max-height: 62vh; border-radius: 6px; border: 2px solid var(--gold); }

/* ===== Тост и эффекты ===== */
.toast { position: fixed; left: 50%; top: calc(var(--top-h) + 14px); transform: translateX(-50%); z-index: 60; max-width: 88%; width: max-content; pointer-events: none;
  padding: 10px 18px; border-radius: 22px; background: rgba(42,7,18,.95); border: 1px solid var(--gold); color: var(--cream); font-size: 16px; text-align: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.5); animation: toastIn .3s; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } }
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.petal { position: absolute; top: -40px; font-size: 22px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--dx), calc(var(--app-h) + 80px)) rotate(var(--rot)); opacity: .2; } }

@media (min-width: 560px) {
  .level-grid { grid-template-columns: repeat(4, 1fr); }
  .mode-cards { max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; } }

/* ===== Обучение ===== */
.ob-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; touch-action: pan-x; }
.ob-track::-webkit-scrollbar { display: none; }
.ob-card { flex: 0 0 100%; scroll-snap-align: center; padding: 0 22px; }
.ob-card h2 { margin-top: 6px; }
.ob-card p { color: var(--cream); font-size: 17px; line-height: 1.4; min-height: 96px; }
.ob-ill { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto 4px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.ob-dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.ob-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(232,180,184,.3); border: 1px solid var(--gold); cursor: pointer; transition: .2s; }
.ob-dots i.on { background: var(--gold-grad); width: 22px; border-radius: 6px; }
.guide { list-style: none; margin: 8px 0 0; padding: 0; text-align: left; }
.guide li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed rgba(201,161,74,.25); font-size: 16px; line-height: 1.3; }
.guide .ge { flex: none; width: 26px; text-align: center; font-size: 19px; }
.guide b { color: var(--gold-l); font-weight: 600; }

.top-right .icon-btn { width: 36px; height: 36px; font-size: 17px; }
.top-right .icon-btn[disabled] { opacity: .35; pointer-events: none; }

.sect-chips { margin-bottom: 6px; }
.sect-chips .chip[data-sect="new"] { color: var(--gold-l); }
.rel-h { grid-column: 1 / -1; margin: 10px 2px 2px; font-family: var(--display); font-size: 18px; color: var(--gold-l); display: flex; align-items: baseline; gap: 8px; }
.rel-h span { font-size: 13px; color: var(--blush); opacity: .8; }
.vip-row .vip-t { font-family: var(--display); font-style: normal; color: var(--gold-l); font-size: 17px; margin-bottom: 6px; }
.vip-note { grid-column: 1 / -1; text-align: center; color: var(--gold-l); font-size: 14px; padding: 6px; }
.lvl .vip-tag { background: var(--gold-grad); color: #3a0a17; font-weight: 700; }
.product .pn { margin-top: 4px; font-size: 12.5px; color: var(--gold-l); opacity: .85; }
.product.vip { border-color: var(--gold-l); background: linear-gradient(135deg, rgba(90,20,40,.6), rgba(26,4,9,.6)); }
.product .btn small { font-size: 11px; opacity: .8; }
.badge.sub-badge { border: 0; cursor: pointer; font: inherit; font-size: 12px; }
button.vip-badge { border: 0; cursor: pointer; font-family: inherit; }

/* ===== «Сияние будуара»: краски с блёстками и перламутром ===== */
.cl-wrap canvas.glint { pointer-events: none; }
.sw.glit { overflow: visible; }
.sw.glit::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.7) 48%, rgba(255,255,255,0) 66%);
  background-size: 260% 100%; background-position: 120% 0; mix-blend-mode: screen; animation: glitSheen 2.8s ease-in-out infinite; }
.sw.glit:nth-child(3n+1)::after { animation-delay: -.9s; }
.sw.glit:nth-child(3n+2)::after { animation-delay: -1.8s; }
@keyframes glitSheen { 0% { background-position: 120% 0; } 55%, 100% { background-position: -40% 0; } }
.pal-tab.radiance { position: relative; overflow: hidden; color: #fff7e6; border-color: rgba(255,240,200,.6);
  background: linear-gradient(120deg, #b8862b, #f6e2a6 30%, #e8b4a4 50%, #c39bff 70%, #7fc8ff 85%, #b8862b); text-shadow: 0 1px 2px rgba(60,10,30,.7); }
.pal-tab.radiance::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 65%);
  background-size: 260% 100%; animation: glitSheen 3.2s ease-in-out infinite; }
.pal-tab.radiance.active { color: #3a0a17; text-shadow: 0 1px 0 rgba(255,255,255,.6); box-shadow: 0 0 10px rgba(240,215,140,.7); }
.glit-preview { position: relative; display: flex; flex-wrap: wrap; gap: 4px; margin: 7px 0 5px; padding: 6px; border-radius: 10px; background: rgba(0,0,0,.18); }
.glit-sw { position: relative; display: block; width: 21px; height: 21px; border-radius: 50%; overflow: hidden; box-shadow: inset 0 -3px 5px rgba(0,0,0,.25), 0 0 0 1px rgba(255,240,200,.45); }
.glit-sw::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.75) 48%, rgba(255,255,255,0) 66%); background-size: 260% 100%; mix-blend-mode: screen; animation: glitSheen 2.6s ease-in-out infinite; }
.glit-sw:nth-child(2n)::after { animation-delay: -1.3s; }
.glit-preview.locked { padding-right: 46px; }
.glit-preview.locked .glit-sw { filter: saturate(.85); }
.glit-lock { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 20px; padding: 3px 6px; border-radius: 12px; background: rgba(42,7,18,.78); box-shadow: 0 0 0 1px rgba(240,215,140,.6); }
@media (prefers-reduced-motion: reduce) {
  .sw.glit::after, .pal-tab.radiance::after, .glit-sw::after { animation: none; background-position: 50% 0; }
}

/* ===== «Уровни жара»: 🌹 основная коллекция · 🔥 Запретный альков · 🔥🔥 Горячие тайны (js/collections.js) ===== */
.sect-chips { overflow-x: auto; scrollbar-width: none; }
.sect-chips::-webkit-scrollbar { display: none; }
.sect-chips .chip { flex: none; }
.sect-chips .chip.heat-1:not(.active) { color: #ffc49a; border-color: rgba(255,140,80,.55); }
.sect-chips .chip.heat-2:not(.active) { color: #ff9f9f; border-color: rgba(255,70,70,.6); background: rgba(70,6,14,.7); }
.sect-chips .chip.heat-1.active { background: linear-gradient(135deg, #f6c56b, #f08a4b); }
.sect-chips .chip.heat-2.active { background: linear-gradient(135deg, #ff8a5b, #d41e3c); color: #fff4ec; }
.heat { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; padding: 2px 9px; border-radius: 11px; white-space: nowrap;
  background: rgba(232,180,184,.12); color: var(--blush); border: 1px solid rgba(232,180,184,.35); }
.heat.heat-1 { background: rgba(240,138,75,.16); color: #ffc49a; border-color: rgba(255,140,80,.55); }
.heat.heat-2 { background: rgba(212,30,60,.22); color: #ffb0a8; border-color: rgba(255,80,80,.65); }
.tier-line { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--blush); opacity: .9; margin: -2px 0 -4px; }
.tier-card { grid-column: 1 / -1; text-align: center; padding: 12px 12px 14px; margin: 2px 0 4px; }
.tier-card.heat-1 { box-shadow: 0 0 22px rgba(240,138,75,.18) inset; }
.tier-card.heat-2 { box-shadow: 0 0 26px rgba(212,30,60,.28) inset; }
.tier-top { display: flex; justify-content: center; align-items: center; gap: 8px; }
.tier-lock { font-size: 15px; }
.tier-name { margin: 6px 0 4px; font-family: var(--display); font-size: 21px; color: var(--gold-l); }
.tier-text { margin: 0 0 6px; font-size: 13.5px; line-height: 1.35; color: var(--blush); font-style: italic; }
.tier-cnt { margin: 0 0 8px; font-size: 13px; color: var(--gold-l); }
.tier-note { margin: -2px 0 8px; font-size: 12px; color: var(--blush); opacity: .8; }
.tier-act .btn[disabled], .soon-btn[disabled] { opacity: .75; cursor: default; }
.soon-tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .4px; padding: 2px 8px; border-radius: 10px; background: var(--gold-grad); color: #3a0a17; margin-left: 6px; }
.tier-h { margin: 14px 2px 2px; font-family: var(--display); font-size: 16px; color: var(--gold-l); text-align: left; }
.tier-h.heat-1 { color: #ffc49a; }
.tier-h.heat-2 { color: #ffb0a8; }
.product .pheat { margin-bottom: 4px; }
.product.pack.heat-1 { border-color: rgba(255,140,80,.6); }
.product.pack.heat-2 { border-color: rgba(255,80,80,.7); background: linear-gradient(135deg, rgba(90,10,24,.6), rgba(26,4,9,.6)); }
.lvl .heat-tag { background: rgba(42,7,18,.8); font-size: 11px; letter-spacing: 0; }
/* превью закрытой коллекции для не-владельцев: картинка уже размыта на сервере; CSS — второй слой; без сохранения/перетаскивания */
.lvl.blurred img { filter: blur(14px) brightness(.5) saturate(.6); transform: scale(1.25); -webkit-user-drag: none; user-select: none; pointer-events: none; }
.pack-lvl img { -webkit-touch-callout: none; }

/* ===== Раскраска по номерам (js/pbn.js) ===== */
.cl-wrap svg.pbn-num { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pbn-num text { font-family: Arial, 'Helvetica Neue', sans-serif; font-weight: 600; fill: #5a3440; stroke: rgba(255,253,248,.85); paint-order: stroke; text-anchor: middle; dominant-baseline: central; }
.pbn-num text.ok { display: none; }
.pbn-marks circle { fill: rgba(255,215,120,.18); stroke: #d1007a; stroke-width: var(--sw, 2); vector-effect: none; animation: pbnPulse 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pbnPulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .pbn-marks circle { animation: none; opacity: .9; } }
.pbn-prog { position: absolute; left: 10px; top: 10px; z-index: 3; padding: 4px 10px; border-radius: 14px; font-size: 13px; color: var(--cream); background: rgba(42,7,18,.82); border: 1px solid rgba(201,161,74,.6); pointer-events: none; }
.pbn-prog b { color: var(--gold-l); }
.pbn-prog.done { background: var(--gold-grad); color: #3a0a17; }
.pbn-prog.done b { color: #3a0a17; }
.sw.pbn { display: grid; place-items: center; }
.sw.pbn b { font: 700 12px/1 Arial, sans-serif; color: #4a2030; text-shadow: 0 0 2px rgba(255,255,255,.8); }
.sw.pbn.dark b { color: #fff8ec; text-shadow: 0 0 2px rgba(0,0,0,.6); }
.sw.pbn.full::after { content: '✓'; position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; font: 700 10px/14px Arial, sans-serif; text-align: center; color: #3a0a17; background: var(--gold-l); }
.lvl .pbn-tag { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 8px; font: 700 10px/16px Arial, sans-serif; color: #3a0a17; background: var(--gold-grad); }
#clHint { position: relative; }
#clHint > span:last-child > span { font-size: 10px; }
#clHint b { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; font: 700 10px/16px Arial, sans-serif; color: #3a0a17; background: var(--gold-l); }

/* 🔥🔥🔥 «Самое горячее» */
.sect-chips .chip.heat-3:not(.active) { color: #ffd0d8; border-color: rgba(255,40,90,.75); background: rgba(60,0,20,.8); }
.sect-chips .chip.heat-3.active { background: linear-gradient(135deg, #d41e3c, #7a0020); color: #fff4ec; }
.heat.heat-3 { background: rgba(160,0,40,.3); color: #ffc0cc; border-color: rgba(255,40,90,.75); }
.tier-card.heat-3 { box-shadow: 0 0 30px rgba(180,0,50,.38) inset; }
.tier-h.heat-3 { color: #ffc0cc; }
/* закрытые коллекции: без долгого нажатия, выделения, перетаскивания и «Сохранить изображение» */
.pack-lvl, .pack-lvl img, .protected, .protected img, .protected canvas { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }


/* ===== Каталог: вкладки разделов, «несобранные» пазлы, раскраски по номерам, замки ===== */
.main-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mtab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px 5px; border-radius: 12px; font: 600 12px/1.15 var(--body, inherit); color: var(--blush);
  border: 1px solid rgba(201,161,74,.4); background: rgba(42,7,18,.55); }
.mtab .mt-i { font-size: 18px; line-height: 1.1; }
.mtab .mt-l { max-width: 100%; text-align: center; font-size: 11.5px; }
.mtab .mt-lk { position: absolute; right: 3px; top: 2px; font-size: 10px; }
.mtab.active { color: #3a0a17; background: var(--gold-grad); border-color: transparent; box-shadow: 0 2px 10px rgba(201,161,74,.45); }
.mtab-vip:not(.active) { border-color: rgba(255,120,110,.6); }
.mtab-secret:not(.active) { border-color: rgba(255,70,70,.75); background: linear-gradient(160deg, rgba(110,10,28,.75), rgba(42,7,18,.7)); }
/* пазл в каталоге выглядит НЕсобранным: сетка деталей и пустые гнёзда поверх миниатюры */
.mode-thumb { position: relative; }
.lvl .jig, .mode-thumb .jig { position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%20160%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M30.0%2C0%20L30.0%2C10.0%20C39.0%2C6.0%2039.0%2C26.0%2030.0%2C22.0%20L30.0%2C42.0%20C21.0%2C38.0%2021.0%2C58.0%2030.0%2C54.0%20L30.0%2C74.0%20C39.0%2C70.0%2039.0%2C90.0%2030.0%2C86.0%20L30.0%2C106.0%20C21.0%2C102.0%2021.0%2C122.0%2030.0%2C118.0%20L30.0%2C138.0%20C39.0%2C134.0%2039.0%2C154.0%2030.0%2C150.0%20L30.0%2C160%20M60.0%2C0%20L60.0%2C10.0%20C51.0%2C6.0%2051.0%2C26.0%2060.0%2C22.0%20L60.0%2C42.0%20C69.0%2C38.0%2069.0%2C58.0%2060.0%2C54.0%20L60.0%2C74.0%20C51.0%2C70.0%2051.0%2C90.0%2060.0%2C86.0%20L60.0%2C106.0%20C69.0%2C102.0%2069.0%2C122.0%2060.0%2C118.0%20L60.0%2C138.0%20C51.0%2C134.0%2051.0%2C154.0%2060.0%2C150.0%20L60.0%2C160%20M90.0%2C0%20L90.0%2C10.0%20C99.0%2C6.0%2099.0%2C26.0%2090.0%2C22.0%20L90.0%2C42.0%20C81.0%2C38.0%2081.0%2C58.0%2090.0%2C54.0%20L90.0%2C74.0%20C99.0%2C70.0%2099.0%2C90.0%2090.0%2C86.0%20L90.0%2C106.0%20C81.0%2C102.0%2081.0%2C122.0%2090.0%2C118.0%20L90.0%2C138.0%20C99.0%2C134.0%2099.0%2C154.0%2090.0%2C150.0%20L90.0%2C160%20M0%2C32.0%20L9.0%2C32.0%20C5.0%2C41.0%2025.0%2C41.0%2021.0%2C32.0%20L39.0%2C32.0%20C35.0%2C23.0%2055.0%2C23.0%2051.0%2C32.0%20L69.0%2C32.0%20C65.0%2C41.0%2085.0%2C41.0%2081.0%2C32.0%20L99.0%2C32.0%20C95.0%2C23.0%20115.0%2C23.0%20111.0%2C32.0%20L120%2C32.0%20M0%2C64.0%20L9.0%2C64.0%20C5.0%2C55.0%2025.0%2C55.0%2021.0%2C64.0%20L39.0%2C64.0%20C35.0%2C73.0%2055.0%2C73.0%2051.0%2C64.0%20L69.0%2C64.0%20C65.0%2C55.0%2085.0%2C55.0%2081.0%2C64.0%20L99.0%2C64.0%20C95.0%2C73.0%20115.0%2C73.0%20111.0%2C64.0%20L120%2C64.0%20M0%2C96.0%20L9.0%2C96.0%20C5.0%2C105.0%2025.0%2C105.0%2021.0%2C96.0%20L39.0%2C96.0%20C35.0%2C87.0%2055.0%2C87.0%2051.0%2C96.0%20L69.0%2C96.0%20C65.0%2C105.0%2085.0%2C105.0%2081.0%2C96.0%20L99.0%2C96.0%20C95.0%2C87.0%20115.0%2C87.0%20111.0%2C96.0%20L120%2C96.0%20M0%2C128.0%20L9.0%2C128.0%20C5.0%2C119.0%2025.0%2C119.0%2021.0%2C128.0%20L39.0%2C128.0%20C35.0%2C137.0%2055.0%2C137.0%2051.0%2C128.0%20L69.0%2C128.0%20C65.0%2C119.0%2085.0%2C119.0%2081.0%2C128.0%20L99.0%2C128.0%20C95.0%2C137.0%20115.0%2C137.0%20111.0%2C128.0%20L120%2C128.0%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.45%22%20stroke-width%3D%222.4%22/%3E%3Cpath%20d%3D%22M30.0%2C0%20L30.0%2C10.0%20C39.0%2C6.0%2039.0%2C26.0%2030.0%2C22.0%20L30.0%2C42.0%20C21.0%2C38.0%2021.0%2C58.0%2030.0%2C54.0%20L30.0%2C74.0%20C39.0%2C70.0%2039.0%2C90.0%2030.0%2C86.0%20L30.0%2C106.0%20C21.0%2C102.0%2021.0%2C122.0%2030.0%2C118.0%20L30.0%2C138.0%20C39.0%2C134.0%2039.0%2C154.0%2030.0%2C150.0%20L30.0%2C160%20M60.0%2C0%20L60.0%2C10.0%20C51.0%2C6.0%2051.0%2C26.0%2060.0%2C22.0%20L60.0%2C42.0%20C69.0%2C38.0%2069.0%2C58.0%2060.0%2C54.0%20L60.0%2C74.0%20C51.0%2C70.0%2051.0%2C90.0%2060.0%2C86.0%20L60.0%2C106.0%20C69.0%2C102.0%2069.0%2C122.0%2060.0%2C118.0%20L60.0%2C138.0%20C51.0%2C134.0%2051.0%2C154.0%2060.0%2C150.0%20L60.0%2C160%20M90.0%2C0%20L90.0%2C10.0%20C99.0%2C6.0%2099.0%2C26.0%2090.0%2C22.0%20L90.0%2C42.0%20C81.0%2C38.0%2081.0%2C58.0%2090.0%2C54.0%20L90.0%2C74.0%20C99.0%2C70.0%2099.0%2C90.0%2090.0%2C86.0%20L90.0%2C106.0%20C81.0%2C102.0%2081.0%2C122.0%2090.0%2C118.0%20L90.0%2C138.0%20C99.0%2C134.0%2099.0%2C154.0%2090.0%2C150.0%20L90.0%2C160%20M0%2C32.0%20L9.0%2C32.0%20C5.0%2C41.0%2025.0%2C41.0%2021.0%2C32.0%20L39.0%2C32.0%20C35.0%2C23.0%2055.0%2C23.0%2051.0%2C32.0%20L69.0%2C32.0%20C65.0%2C41.0%2085.0%2C41.0%2081.0%2C32.0%20L99.0%2C32.0%20C95.0%2C23.0%20115.0%2C23.0%20111.0%2C32.0%20L120%2C32.0%20M0%2C64.0%20L9.0%2C64.0%20C5.0%2C55.0%2025.0%2C55.0%2021.0%2C64.0%20L39.0%2C64.0%20C35.0%2C73.0%2055.0%2C73.0%2051.0%2C64.0%20L69.0%2C64.0%20C65.0%2C55.0%2085.0%2C55.0%2081.0%2C64.0%20L99.0%2C64.0%20C95.0%2C73.0%20115.0%2C73.0%20111.0%2C64.0%20L120%2C64.0%20M0%2C96.0%20L9.0%2C96.0%20C5.0%2C105.0%2025.0%2C105.0%2021.0%2C96.0%20L39.0%2C96.0%20C35.0%2C87.0%2055.0%2C87.0%2051.0%2C96.0%20L69.0%2C96.0%20C65.0%2C105.0%2085.0%2C105.0%2081.0%2C96.0%20L99.0%2C96.0%20C95.0%2C87.0%20115.0%2C87.0%20111.0%2C96.0%20L120%2C96.0%20M0%2C128.0%20L9.0%2C128.0%20C5.0%2C119.0%2025.0%2C119.0%2021.0%2C128.0%20L39.0%2C128.0%20C35.0%2C137.0%2055.0%2C137.0%2051.0%2C128.0%20L69.0%2C128.0%20C65.0%2C119.0%2085.0%2C119.0%2081.0%2C128.0%20L99.0%2C128.0%20C95.0%2C137.0%20115.0%2C137.0%20111.0%2C128.0%20L120%2C128.0%22%20fill%3D%22none%22%20stroke%3D%22%23fffaf0%22%20stroke-opacity%3D%22.8%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M60.0%2C64.0%20h30.0%20v32.0%20h-30.0%20z%22%20fill%3D%22%231a0409%22%20fill-opacity%3D%22.78%22%20stroke%3D%22%23e9cf8a%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M0.0%2C128.0%20h30.0%20v32.0%20h-30.0%20z%22%20fill%3D%22%231a0409%22%20fill-opacity%3D%22.78%22%20stroke%3D%22%23e9cf8a%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M90.0%2C0.0%20h30.0%20v32.0%20h-30.0%20z%22%20fill%3D%22%231a0409%22%20fill-opacity%3D%22.78%22%20stroke%3D%22%23e9cf8a%22%20stroke-width%3D%221.2%22/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.lvl.puzzle:not(.is-done) img { filter: saturate(.92) contrast(.96); }
.lvl .ph { right: 6px; bottom: auto; top: 6px; font-size: 9.5px; background: rgba(42,7,18,.82); border: 1px solid rgba(201,161,74,.45); }
.lvl.is-done .ph { top: 34px; }
.lvl .strip { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 3px; padding: 14px 4px 4px;
  background: linear-gradient(180deg, rgba(26,4,9,0), rgba(26,4,9,.88) 45%); pointer-events: none; }
.lvl .strip .kind, .lvl .strip .pbn-tag { position: static; padding: 1px 5px; border-radius: 8px; font: 700 10px/16px Arial, sans-serif; white-space: nowrap; }
.lvl .strip .kind.pz { color: var(--cream, #fff4e6); background: rgba(90,20,40,.9); border: 1px solid rgba(201,161,74,.6); }
.lvl .strip .kind.cl { color: #3a0a17; background: linear-gradient(135deg, #fde2ec, #e3f1ff 50%, #fff1c9); border: 1px solid rgba(201,161,74,.7); }
.lvl .strip .go { padding: 1px 6px; border-radius: 8px; font: 700 10px/16px Arial, sans-serif; color: #3a0a17; background: var(--gold-grad); white-space: nowrap; }
.lvl .strip .go.lk { color: var(--gold-l); background: rgba(42,7,18,.9); border: 1px solid var(--gold); }
.lvl.locked:not(.blurred) img { filter: brightness(.62) saturate(.75); transform: none; }
.lvl.locked .lock { background: radial-gradient(circle, rgba(26,4,9,.25), rgba(26,4,9,0) 70%); }
.lvl.heat-2 { border-color: rgba(255,120,110,.75); }
.lvl.heat-3 { border-color: rgba(255,60,60,.85); box-shadow: 0 4px 14px rgba(120,0,20,.5); }
/* главная: четыре раздела */
.mode-cards { gap: 12px 14px; }
.mode-card { position: relative; }
.mode-thumb { padding-top: 92%; }
.mode-card.blurred .mode-thumb { filter: blur(7px) brightness(.55) saturate(.7); }
.mode-card .mc-lock { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(42,7,18,.85); border: 1.5px solid var(--gold); font-size: 19px; }
.mode-card.heat-2 { border-color: rgba(255,120,110,.7); }
.mode-card.heat-3 { border-color: rgba(255,60,60,.8); }
.mode-name { font-size: 18px; }
.mode-sub { font-size: 12.5px; }

/* ===== Раскраска: только заливка по номерам; палитра — баночки красок рококо ===== */
.cl-tools .tool.fill-only { flex: 0 1 auto; padding-left: 14px; padding-right: 14px; cursor: default; color: #3a0a17; background: var(--gold-grad); border-color: transparent; }
.swatches { gap: 11px; padding: 14px 8px 6px; }
.sw { width: 38px; height: 42px; margin-top: 10px; border-radius: 14px 14px 18px 18px / 10px 10px 24px 24px; border: 1.5px solid #e9cf8a;
  box-shadow: inset -6px -9px 10px rgba(40,10,20,.28), inset 6px 6px 8px rgba(255,255,255,.5), 0 0 0 1px rgba(122,79,20,.75), 0 3px 6px rgba(0,0,0,.45); }
/* позолоченная крышечка с шишечкой и фестоном */
.sw::before { left: 3px; right: 3px; top: -11px; height: 10px; border-radius: 6px 6px 3px 3px;
  background: radial-gradient(circle at 50% 0, #fffbe8 0 2.5px, #c9a14a 3px 4px, transparent 4.5px) no-repeat, linear-gradient(180deg, #fff3c4, #e2c47c 40%, #a67c2e 78%, #f6e2a6);
  box-shadow: 0 1px 0 rgba(0,0,0,.45), inset 0 -2px 0 rgba(122,79,20,.55), 0 -1px 0 rgba(255,248,220,.5); }
.sw.active { transform: translateY(-5px) scale(1.12); border-color: #fff3c4; box-shadow: inset -6px -9px 10px rgba(40,10,20,.25), inset 6px 6px 8px rgba(255,255,255,.55), 0 0 0 2px var(--gold-d), 0 0 14px rgba(240,215,140,.75); }
/* номер краски — на кремовом картуше с золотой рамкой: читается на любом цвете */
.sw.pbn b, .sw.pbn.dark b { min-width: 18px; height: 16px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center; margin-top: 6px;
  font: 700 11px/1 Georgia, 'Times New Roman', serif; color: #4a2030; text-shadow: none; background: #fff8ec; border: 1px solid #c9a14a; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.sw.pbn.full { opacity: .55; }
.sw.pbn.full::after { right: -5px; bottom: -5px; }

/* ===== Админ: «Смотреть как покупатель» ===== */
.admin-view { position: fixed; right: 56px; bottom: 12px; z-index: 99998; max-width: 60vw; padding: 8px 12px; border-radius: 18px; font: 600 12.5px/1.2 system-ui, sans-serif;
  color: #fff; background: rgba(58,22,38,.9); border: 1px solid #c9a45c; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.admin-view.on { color: #3a1626; background: #e9cf8a; }

/* ===== Музыка ===== */
.mus-btn.playing { box-shadow: 0 0 0 1px var(--gold-l), 0 0 10px rgba(240,215,140,.55); }
.mus-panel { position: fixed; right: 10px; top: calc(56px + var(--safe-t, 0px)); z-index: 60; width: min(300px, calc(100vw - 20px)); padding: 12px 14px; display: flex; flex-direction: column; gap: 9px;
  background: linear-gradient(160deg, rgba(58,10,24,.97), rgba(26,4,9,.97)); border-radius: 14px; box-shadow: 0 8px 26px rgba(0,0,0,.55); }
.mus-h { font-family: var(--display); font-size: 18px; color: var(--gold-l); }
.mus-vol { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--blush); }
.mus-vol input { flex: 1; accent-color: #c9a14a; }
.mus-now { font-size: 13px; color: var(--cream, #fff4e6); font-style: italic; }
.mus-cr { font-size: 11px; color: var(--blush); opacity: .75; }
/* на экранах игры служебные кнопки админа не закрывают палитру и поле */
body:has(#scrColoring.active) #admin-view, body:has(#scrPuzzle.active) #admin-view,
body:has(#scrColoring.active) #admin-badge, body:has(#scrPuzzle.active) #admin-badge { display: none; }
body.as-buyer #topTitle::after { content: ' 👁'; }
.mode-card .mc-kind { position: absolute; left: 50%; top: calc(8px + 46%); transform: translateX(-50%); padding: 1px 8px; border-radius: 9px; font: 700 11px/18px Arial, sans-serif; white-space: nowrap;
  color: var(--cream, #fff4e6); background: rgba(90,20,40,.92); border: 1px solid rgba(201,161,74,.7); }
.mode-card .mc-kind.cl { color: #3a0a17; background: linear-gradient(135deg, #fde2ec, #e3f1ff 50%, #fff1c9); }