/* ============================================================
   workshop.css — Волшебная мастерская (песочница механик)
   Палитра: фиолетово-розовая магия + золото, как во всей игре.
   ============================================================ */

/* ===== Экран мастерской ===== */
/* Важно: display:grid/flex перебивает атрибут [hidden] — чиним явно */
.ws-menu[hidden], .ws-play[hidden] { display: none !important; }
#workshop-screen {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 182, 226, 0.22), transparent 45%),
    radial-gradient(ellipse at 85% 85%, rgba(206, 147, 216, 0.25), transparent 50%),
    linear-gradient(160deg, #2a1245 0%, #4a2a6b 45%, #2a1245 100%);
  position: relative; min-height: 100vh; padding: 84px 20px 30px;
}
.ws-overlay {
  background:
    radial-gradient(circle at 15% 25%, rgba(255, 215, 0, 0.08), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(255, 105, 180, 0.1), transparent 40%);
}
.ws-content {
  background: rgba(255, 255, 255, 0.96);
  border-top: 7px solid #8e24aa;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(142, 36, 170, 0.25), 0 -3px 22px rgba(142, 36, 170, 0.35);
}
.ws-content::after {
  content: '⚗️'; position: absolute; right: -18px; bottom: -26px;
  font-size: 9em; opacity: 0.07; pointer-events: none; line-height: 1;
  transform: rotate(-12deg);
}
.ws-title { color: #8e24aa; }
.ws-chip {
  background: linear-gradient(135deg, #fff8e1, #ffecb3);
  color: #b8860b; font-weight: bold; font-size: 0.85em;
  border: 2px solid #e6c25a; border-radius: 50px;
  padding: 5px 14px; white-space: nowrap;
}
.ws-intro { border-left-color: #ba68c8; background: linear-gradient(135deg, #f8eafd, #eed7f7); }

/* ===== Меню механик (3 карточки) ===== */
.ws-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 6px 0 4px; }
.ws-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; padding: 20px 14px 16px;
  background: linear-gradient(160deg, #ffffff, #f7ebff);
  border: 3px solid #e1bee7; border-radius: 20px;
  cursor: pointer; font-family: inherit;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  box-shadow: 0 4px 14px rgba(142, 36, 170, 0.12);
}
.ws-card:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: #ba68c8;
  box-shadow: 0 10px 24px rgba(142, 36, 170, 0.25);
}
.ws-card:focus-visible { outline: 3px solid #ffd700; outline-offset: 2px; }
.ws-emoji { font-size: 3em; line-height: 1; filter: drop-shadow(0 4px 8px rgba(142, 36, 170, 0.3)); transition: transform 0.3s; }
.ws-card:hover .ws-emoji { transform: scale(1.15) rotate(-6deg); }
.ws-name { font-weight: bold; font-size: 1.12em; color: #6a1b9a; }
.ws-desc { font-size: 0.88em; color: #555; line-height: 1.5; min-height: 4em; }
.ws-tag {
  font-size: 0.72em; font-weight: bold; letter-spacing: 0.4px;
  color: #8e24aa; background: #f3e5f5;
  border: 1.5px solid #ce93d8; border-radius: 50px;
  padding: 4px 12px;
}
/* Золотой бейдж рекорда «Сада против зомби» на карточке */
.ws-record {
  font-size: 0.74em; font-weight: 800; letter-spacing: 0.3px;
  color: #795500; background: linear-gradient(135deg, #ffe082, #ffd54f);
  border: 1.5px solid #ffb300; border-radius: 50px;
  padding: 4px 12px;
  animation: recPulse 2.2s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 179, 0, 0); transform: scale(1); }
  50% { box-shadow: 0 0 14px rgba(255, 179, 0, 0.55); transform: scale(1.04); }
}

/* ===== Зона игры выбранной механики ===== */
.ws-play { animation: levelIn 0.35s ease; }
.ws-play-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ws-play-title { flex: 1; text-align: center; color: #6a1b9a; font-size: 1.35em; }
.ws-play-spacer { width: 120px; }
.ws-play-area { position: relative; min-height: 320px; }
.ws-note {
  margin-top: 14px; text-align: center; font-size: 0.85em; font-weight: bold;
  color: #8e5aa8; background: #f3e5f5; border: 1.5px dashed #ce93d8;
  border-radius: 50px; padding: 8px 14px;
}

/* Подсказка песочницы — по центру */
.ws-hint { display: block; margin: 18px auto 0; }

/* ===== Блок победы (общий) ===== */
.ws-win {
  text-align: center; margin: 18px auto 0; max-width: 480px;
  background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
  border: 3px solid #a5d6a7; border-radius: 20px;
  padding: 18px; animation: bounceIn 0.6s;
}
.ws-win-emoji { font-size: 3em; line-height: 1.2; }
.ws-win-line { color: #333; line-height: 1.6; margin: 6px 0; }
.ws-replay { margin-top: 10px; }

/* ===== 1) СВИТОК: пергамент + клавиатура ===== */
.ws-scroll { max-width: 560px; margin: 0 auto; }
.ws-scroll-parchment {
  background:
    radial-gradient(ellipse at 8% 12%, rgba(255, 213, 79, 0.16), transparent 40%),
    linear-gradient(180deg, #fff8e1 0%, #ffecb3 55%, #ffe082 100%);
  border: 3px solid #d4a72c; border-radius: 18px;
  padding: 22px 20px; text-align: center;
  box-shadow: inset 0 0 34px rgba(212, 167, 44, 0.18), 0 6px 18px rgba(0, 0, 0, 0.12);
  position: relative;
}
.ws-scroll-parchment::before, .ws-scroll-parchment::after {
  content: ''; position: absolute; left: 10px; right: 10px; height: 8px;
  background: rgba(179, 141, 30, 0.35); border-radius: 8px;
}
.ws-scroll-parchment::before { top: 6px; }
.ws-scroll-parchment::after { bottom: 6px; }
.ws-scroll-parchment.ok { border-color: #66bb6a; box-shadow: inset 0 0 34px rgba(102, 187, 106, 0.25), 0 0 22px rgba(102, 187, 106, 0.5); }
.ws-scroll-q { font-size: 1.12em; color: #4e342e; font-weight: bold; line-height: 1.6; margin-bottom: 14px; }
.ws-scroll-input {
  width: 150px; text-align: center;
  font-family: inherit; font-size: 2.4em; font-weight: bold; color: #6d4c41;
  background: rgba(255, 255, 255, 0.85);
  border: 3px solid #bcaaa4; border-radius: 14px;
  padding: 6px 10px; outline: none; transition: all 0.25s;
}
.ws-scroll-input:focus { border-color: #d4a72c; box-shadow: 0 0 16px rgba(255, 193, 7, 0.5); }
.ws-scroll-msg { min-height: 1.4em; margin-top: 10px; font-size: 0.95em; font-weight: bold; color: #2e7d32; }
.ws-scroll-msg.warn { color: #e65100; }
.ws-keypad {
  display: grid; grid-template-columns: repeat(3, 84px); gap: 10px;
  justify-content: center; margin-top: 16px;
}
.ws-key {
  height: 62px; border-radius: 16px; border: 2.5px solid #ce93d8;
  font-family: inherit; font-size: 1.6em; font-weight: bold; color: #6a1b9a;
  background: linear-gradient(160deg, #ffffff, #f3e5f5);
  cursor: pointer; transition: all 0.2s; box-shadow: 0 3px 10px rgba(142, 36, 170, 0.15);
}
.ws-key:hover { transform: translateY(-2px) scale(1.04); border-color: #ba68c8; box-shadow: 0 6px 14px rgba(142, 36, 170, 0.3); }
.ws-key:active { transform: scale(0.94); }
.ws-key-erase { color: #e65100; border-color: #ffcc80; background: linear-gradient(160deg, #fff, #fff3e0); }
.ws-key-check { color: #fff; border-color: #2e7d32; background: linear-gradient(160deg, #66bb6a, #43a047); }
.ws-key-check:hover { border-color: #1b5e20; }

/* ===== 2) КОТЁЛ СОРТИРОВКИ ===== */
.ws-cauldron { text-align: center; }
.ws-cards { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; min-height: 64px; margin-bottom: 20px; }
.ws-card-chip {
  font-size: 1.25em; font-weight: bold; color: #4a148c;
  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
  border: 3px solid #9c27b0; border-radius: 14px;
  padding: 14px 20px; cursor: grab; user-select: none; touch-action: none;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  box-shadow: 0 4px 12px rgba(156, 39, 176, 0.18);
}
.ws-card-chip:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 8px 18px rgba(156, 39, 176, 0.3); }
.ws-card-chip.selected { border-color: #ffd700; box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.45), 0 8px 18px rgba(255, 193, 7, 0.4); transform: scale(1.06); }
.ws-card-chip.dragging { opacity: 0.35; cursor: grabbing; }
.ws-card-chip.ws-done { cursor: default; pointer-events: none; border-color: #66bb6a; background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #2e7d32; transform: none; box-shadow: none; }
.ws-drag-ghost {
  position: fixed; z-index: 9998; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25em; font-weight: bold; color: #4a148c;
  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
  border: 3px solid #ba68c8; border-radius: 14px;
  box-shadow: 0 14px 30px rgba(74, 20, 140, 0.4);
  transform: rotate(-4deg) scale(1.05);
}
.ws-cauldrons { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.ws-pot {
  width: 220px; padding: 14px 12px 12px;
  border-radius: 22px; border: 3.5px dashed #9e9e9e;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(237, 230, 240, 0.7));
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
  cursor: pointer;
}
.ws-pot.pot-hover { border-color: #ffd700; background: linear-gradient(180deg, #fffde7, #ffecb3); transform: scale(1.04); }
.ws-pot.pot-ok { border-color: #a5d6a7; }
.ws-pot.pot-bad { border-color: #ef9a9a; }
.ws-pot-emoji { font-size: 2.6em; line-height: 1; display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2)); }
.ws-pot-name { display: block; font-weight: bold; margin-top: 4px; color: #616161; }
.pot-ok .ws-pot-name { color: #2e7d32; }
.pot-bad .ws-pot-name { color: #c62828; }
.ws-pot-inside { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 46px; margin-top: 10px; }
.ws-pot-inside .ws-card-chip { font-size: 0.95em; padding: 8px 12px; animation: bounceIn 0.5s; }
.ws-cauldron-progress { margin-top: 14px; font-weight: bold; color: #6a1b9a; }

/* ===== 3) ПУЗЫРЬКИ ПО ПОРЯДКУ ===== */
.ws-bubbles-top {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 12px; font-weight: bold; color: #6a1b9a;
}
.ws-bubbles-top span {
  background: #f3e5f5; border: 2px solid #ce93d8;
  border-radius: 50px; padding: 5px 14px; font-size: 0.95em;
}
.ws-bubble-arena {
  position: relative; height: 360px; border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 18% 30%, rgba(186, 104, 200, 0.2), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(255, 105, 180, 0.18), transparent 40%),
    linear-gradient(160deg, #f8eafd, #efe2f8);
  border: 3px solid #ce93d8;
}
.ws-bubble {
  position: absolute; width: 76px; height: 76px;
  border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.75);
  font-family: inherit; font-size: 1.45em; font-weight: bold; color: #4a148c;
  background: radial-gradient(circle at 32% 28%, #f8bbfd 0%, #e1bee7 45%, #ba68c8 100%);
  box-shadow: inset -6px -8px 14px rgba(142, 36, 170, 0.35), inset 5px 6px 10px rgba(255, 255, 255, 0.7), 0 6px 14px rgba(142, 36, 170, 0.3);
  cursor: pointer; transition: transform 0.2s;
  animation: bubbleFloat 3.4s ease-in-out infinite;
}
@keyframes bubbleFloat {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -12px; }
}
.ws-bubble:hover { transform: scale(1.1); }
.ws-bubble.popped {
  background: radial-gradient(circle at 32% 28%, #fff, #a5d6a7);
  color: #2e7d32; border-color: #66bb6a;
  animation: bubblePop 0.5s ease forwards; pointer-events: none;
}
@keyframes bubblePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(0.15); opacity: 0.25; }
}

/* ===== Объяснение механики (как играть) ===== */
.ws-rules {
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 640px; margin: 16px auto 0; padding: 12px 16px;
  background: linear-gradient(135deg, #fffde7, #fff8e1);
  border: 2px solid #ffe082; border-radius: 16px;
  text-align: left; line-height: 1.55; color: #5d4037;
}
.ws-rules-icon { font-size: 1.6em; line-height: 1.2; filter: drop-shadow(0 2px 4px rgba(255, 193, 7, 0.4)); }
.ws-rules-body { font-size: 0.95em; }
.ws-rules-line { display: block; }
.ws-rules-line + .ws-rules-line { margin-top: 2px; }

/* ===== Стартовый экран пузырьков (объяснение перед игрой) ===== */
.ws-bubble-start {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 20px;
  background: rgba(248, 234, 253, 0.96); border-radius: 15px;
  transition: opacity 0.3s, transform 0.3s;
}
.ws-bubble-start.gone { opacity: 0; transform: scale(0.94); pointer-events: none; }
.ws-bubble-start-emoji { font-size: 3.2em; animation: bounceIn 0.7s; filter: drop-shadow(0 6px 12px rgba(142, 36, 170, 0.35)); }
.ws-bubble-start-title { font-size: 1.25em; font-weight: bold; color: #6a1b9a; }
.ws-bubble-start-rules {
  list-style: none; margin: 0; padding: 0; text-align: left;
  font-size: 0.95em; color: #555; line-height: 1.7; max-width: 380px;
}
.ws-bubble-start-rules li::before { content: '✦ '; color: #ba68c8; }
.ws-bubble-go { margin-top: 6px; font-size: 1.1em; padding: 12px 30px; }

/* Порядок уже лопнутых пузырьков */
.ws-bubble-order {
  margin-top: 12px; text-align: center; font-weight: bold; color: #6a1b9a;
  background: #f3e5f5; border: 2px dashed #ce93d8; border-radius: 50px;
  padding: 8px 14px; font-size: 0.95em;
}
.ws-order-chip {
  display: inline-block; background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  border: 2px solid #66bb6a; color: #2e7d32; border-radius: 50px;
  padding: 1px 10px; margin: 2px 0; animation: bounceIn 0.4s;
}
.ws-order-next { font-weight: normal; color: #8e5aa8; font-size: 0.92em; }

/* ===== 4) ЛЯГУШОНОК: ЧИСЛОВАЯ ПРЯМАЯ ===== */
.ws-frog { text-align: center; }
.ws-frog-top { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; font-weight: bold; color: #2e7d32; }
.ws-frog-top span { background: #e8f5e9; border: 2px solid #a5d6a7; border-radius: 50px; padding: 5px 14px; font-size: 0.95em; }
.ws-frog-q { font-size: 1.18em; color: #33691e; font-weight: bold; margin-bottom: 8px; min-height: 1.6em; }
.ws-frog-pond {
  position: relative; height: 170px; border-radius: 18px;
  background:
    radial-gradient(circle at 12% 85%, rgba(165, 214, 167, 0.5), transparent 32%),
    radial-gradient(circle at 88% 80%, rgba(129, 199, 132, 0.45), transparent 30%),
    linear-gradient(180deg, #f1f8e9, #dcedc8);
  border: 3px solid #aed581;
}
.ws-frog-char {
  position: absolute; bottom: 66px; left: 0; margin-left: -20px;
  font-size: 2.5em; line-height: 1; z-index: 3;
  filter: drop-shadow(0 4px 6px rgba(51, 105, 30, 0.35));
  transition: left 0.55s cubic-bezier(0.34, 1.4, 0.64, 1), transform 0.2s;
  transform-origin: bottom center;
}
.ws-frog-char.jump { animation: frogJump 0.55s ease; }
@keyframes frogJump {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-34px) scale(1.12); }
  70% { transform: translateY(2px) scale(0.96); }
  100% { transform: translateY(0) scale(1); }
}
.ws-frog-line { position: absolute; left: 4%; right: 4%; bottom: 46px; height: 40px; }
.ws-tick {
  position: absolute; top: 0; width: 34px; margin-left: -17px; height: 40px;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
}
.ws-tick-line { display: block; width: 3px; height: 18px; margin: 0 auto; background: #558b2f; border-radius: 2px; transition: all 0.2s; }
.ws-tick-num { display: block; margin-top: 3px; font-size: 0.8em; font-weight: bold; color: #33691e; }
.ws-tick:hover .ws-tick-line { background: #ff8f00; transform: scaleY(1.35); }
.ws-tick:hover .ws-tick-num { color: #ff8f00; }
.ws-tick::before {
  content: ''; position: absolute; left: 50%; top: -46px; transform: translateX(-50%);
  width: 34px; height: 86px; /* увеличенная зона клика (палец) */
}
.ws-tick.hit .ws-tick-line { background: #43a047; transform: scaleY(1.5); }
.ws-tick.hit .ws-tick-num { color: #fff; background: #43a047; border-radius: 50px; padding: 0 6px; }
.ws-tick.miss .ws-tick-line { background: #e53935; transform: scaleY(1.5); }
.ws-tick.miss .ws-tick-num { color: #fff; background: #e53935; border-radius: 50px; padding: 0 6px; }
.ws-tick.reveal .ws-tick-num { color: #fff; background: #ff8f00; border-radius: 50px; padding: 0 6px; animation: bounceIn 0.5s; }

/* ===== 5) ВОЛШЕБНЫЙ ЗАМОК ===== */
.ws-lock { text-align: center; max-width: 560px; margin: 0 auto; }
.ws-lock-gate {
  background: linear-gradient(160deg, #efebe9, #d7ccc8);
  border: 3px solid #8d6e63; border-radius: 18px; padding: 16px;
  box-shadow: inset 0 0 26px rgba(93, 64, 55, 0.2), 0 6px 16px rgba(0, 0, 0, 0.15);
  transition: border-color 0.4s, box-shadow 0.4s;
}
.ws-lock-gate.open { border-color: #66bb6a; box-shadow: inset 0 0 26px rgba(102, 187, 106, 0.3), 0 0 22px rgba(102, 187, 106, 0.55); }
.ws-lock-emoji { font-size: 3.4em; line-height: 1.15; display: inline-block; filter: drop-shadow(0 4px 8px rgba(93, 64, 55, 0.4)); }
.ws-lock-gate.open .ws-lock-emoji { animation: bounceIn 0.7s; }
.ws-lock-q { font-size: 1.12em; font-weight: bold; color: #4e342e; margin-top: 4px; }
.ws-lock-tries { margin-top: 6px; font-size: 1.25em; letter-spacing: 2px; }
.ws-lock-display {
  width: 170px; margin: 14px auto 6px; padding: 8px 10px;
  font-size: 2.3em; font-weight: bold; color: #4e342e;
  background: rgba(255, 255, 255, 0.9); border: 3px solid #8d6e63; border-radius: 14px;
  min-height: 1.3em; transition: all 0.2s;
}
.ws-lock-msg { min-height: 1.5em; font-weight: bold; color: #2e7d32; margin-top: 6px; }
.ws-lock-msg.warn { color: #e65100; }
.ws-lock-msg.ok { color: #2e7d32; }
.ws-lock-history { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 34px; margin-top: 10px; }
.ws-lock-chip {
  font-weight: bold; color: #4e342e; background: #fff;
  border: 2px solid #bcaaa4; border-radius: 50px; padding: 4px 12px;
  animation: bounceIn 0.4s;
}

/* ===== 6) МОЛНИЯ ПРАВДЫ ===== */
.ws-blitz { max-width: 620px; margin: 0 auto; text-align: center; }
.ws-blitz-top { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; font-weight: bold; color: #6a1b9a; }
.ws-blitz-top span { background: #f3e5f5; border: 2px solid #ce93d8; border-radius: 50px; padding: 5px 14px; font-size: 0.95em; }
.ws-blitz-card {
  min-height: 120px; display: flex; align-items: center; justify-content: center;
  border-radius: 20px; border: 3px solid #ce93d8;
  background: radial-gradient(circle at 25% 20%, rgba(255, 213, 79, 0.16), transparent 42%), linear-gradient(160deg, #ffffff, #f3e5f5);
  box-shadow: 0 6px 16px rgba(142, 36, 170, 0.15);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.ws-blitz-card.ok { border-color: #66bb6a; background: linear-gradient(160deg, #e8f5e9, #c8e6c9); }
.ws-blitz-card.bad { border-color: #ef5350; background: linear-gradient(160deg, #ffebee, #ffcdd2); animation: shake 0.5s; }
.ws-blitz-expr { font-size: 2.5em; font-weight: bold; color: #4a148c; letter-spacing: 1px; }
.ws-blitz-expr.pop { animation: exprPop 0.35s ease; }
@keyframes exprPop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.ws-blitz-bar {
  height: 14px; border-radius: 50px; background: #ede7f6;
  border: 2px solid #d1c4e9; overflow: hidden; margin-top: 12px;
}
.ws-blitz-bar-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ffd54f, #ff7043); border-radius: 50px; }
.ws-blitz-btns { display: flex; gap: 16px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.ws-blitz-btn {
  font-family: inherit; font-size: 1.25em; font-weight: bold; padding: 14px 34px;
  border-radius: 16px; border: 3px solid transparent; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}
.ws-blitz-btn:hover { transform: translateY(-2px) scale(1.03); }
.ws-blitz-btn:active { transform: scale(0.95); }
.blitz-ok { color: #fff; background: linear-gradient(160deg, #66bb6a, #43a047); border-color: #2e7d32; }
.blitz-bad { color: #fff; background: linear-gradient(160deg, #ef5350, #e53935); border-color: #b71c1c; }
.ws-blitz-msg { min-height: 1.5em; margin-top: 10px; font-weight: bold; color: #2e7d32; }
.ws-blitz-msg.warn { color: #e65100; }

/* ===== 7) САД ПРОТИВ ЗОМБИ (PvZ-демо) ===== */
.pz { max-width: 900px; margin: 0 auto; }

/* Верхняя панель: баланс, пакеты, лопата, пауза, волна */
.pz-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(160deg, #fff8e1, #ffe9b8);
  border: 3px solid #d4a72c; border-radius: 16px;
  padding: 8px 12px; margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.pz-sunbox {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 2.5px solid #f0b429; border-radius: 14px;
  padding: 6px 12px; font-size: 1.25em; font-weight: bold; color: #b8860b;
  min-width: 96px; justify-content: center;
  box-shadow: inset 0 0 10px rgba(255, 193, 7, 0.18);
}
.pz-sunbox span { font-size: 1.15em; }
.pz-sunbox.pulse { animation: pzPulse 0.4s ease; }
@keyframes pzPulse { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
.pz-packets { display: flex; gap: 8px; }
.pz-packet {
  position: relative; overflow: hidden; width: 76px; height: 84px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: linear-gradient(170deg, #f6e7b8, #e8c877);
  border: 3px solid #a97d2b; border-radius: 12px; cursor: pointer;
  font-family: inherit; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, filter 0.2s;
}
.pz-packet:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); }
.pz-packet.selected { border-color: #2e7d32; box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.55), 0 6px 14px rgba(0, 0, 0, 0.2); transform: translateY(-3px); }
.pz-packet.poor { filter: grayscale(0.75) brightness(0.85); cursor: not-allowed; }
.pz-packet-emoji { font-size: 1.9em; line-height: 1; }
.pz-cost { font-size: 0.78em; font-weight: bold; color: #7a5a10; white-space: nowrap; }
.pz-packet.cooling .pz-packet-emoji { filter: grayscale(1) brightness(0.75); }
.pz-cd {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: rgba(30, 40, 30, 0.55); pointer-events: none; transition: height 0.1s linear;
}
.pz-shovel, .pz-pause {
  width: 46px; height: 56px; font-size: 1.5em; line-height: 1;
  background: linear-gradient(170deg, #e0e0e0, #bdbdbd);
  border: 3px solid #757575; border-radius: 12px; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pz-shovel:hover, .pz-pause:hover { transform: translateY(-3px); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2); }
.pz-shovel.selected { border-color: #e65100; box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.5); }
.pz-pause { background: linear-gradient(170deg, #cfd8dc, #90a4ae); border-color: #546e7a; }
.pz-wavebox { margin-left: auto; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.pz-wavebox span:not(.pz-wavebar) { font-weight: bold; color: #6d4c41; font-size: 0.95em; }
.pz-wavebar {
  display: block; width: 150px; height: 13px; border-radius: 50px;
  background: #efe0c0; border: 2px solid #c9a86a; overflow: hidden;
}
.pz-wavebar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #66bb6a, #43a047);
  border-radius: 50px; transition: width 0.4s ease;
}

/* Газон */
.pz-lawn-wrap { position: relative; padding-left: 34px; }
.pz-house {
  position: absolute; left: 0; top: 0; bottom: 0; width: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(18px, 2.6vw, 28px);
  background: linear-gradient(180deg, #ffe0b2, #ffcc80);
  border: 3px solid #d84315; border-right: none; border-radius: 14px 0 0 14px;
}
.pz-lawn {
  position: relative; aspect-ratio: 8 / 5; width: 100%;
  border: 4px solid #5d4037; border-radius: 12px; overflow: hidden;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.1), transparent 30%),
    repeating-linear-gradient(180deg, #8fd463 0%, #8fd463 20%, #7cc750 20%, #7cc750 40%);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.16);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.pz-lawn.danger { border-color: #e53935; box-shadow: inset 0 0 26px rgba(229, 57, 53, 0.35), 0 0 18px rgba(229, 57, 53, 0.5); }
.pz-lawn.is-paused { filter: saturate(0.5) brightness(0.9); }

/* Сетка ячеек (слой посадки) */
.pz-cells {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(5, 1fr);
  z-index: 1;
}
.pz-cell { position: relative; }
.pz-lawn.planting .pz-cell:hover { background: rgba(255, 255, 255, 0.3); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6); }

/* Растения */
.pz-plant {
  position: absolute; transform: translate(-50%, -50%); z-index: 3;
  font-size: clamp(20px, 4.2vw, 36px); line-height: 1; pointer-events: none;
  text-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
.pz-plant span { display: block; animation: pzIdle 2.4s ease-in-out infinite; }
.pl-peashooter span { filter: hue-rotate(45deg); }
@keyframes pzIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
.pz-plant.shake span { animation: shake 0.4s; }

/* Полоски здоровья */
.pz-hp {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: -7px;
  width: 78%; height: 5px; border-radius: 50px;
  background: rgba(0, 0, 0, 0.35); overflow: hidden; display: block;
}
.pz-hp b { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #8bc34a, #4caf50); border-radius: 50px; transition: width 0.25s; }
.pz-zombie .pz-hp b { background: linear-gradient(90deg, #ef5350, #b71c1c); }
/* Вспышка при попадании горошиной */
.pz-zombie.hurt { filter: brightness(1.75) saturate(0.5) sepia(0.3); }
.pz-zombie { transition: filter 0.13s ease; }

/* Зомби */
.pz-zombie {
  position: absolute; transform: translate(-50%, -50%); z-index: 4;
  font-size: clamp(22px, 4.6vw, 40px); line-height: 1; pointer-events: none;
  text-shadow: 0 3px 5px rgba(0, 0, 0, 0.35);
}
.pz-zombie span { display: block; animation: pzWalk 0.9s ease-in-out infinite; }
@keyframes pzWalk { 0%, 100% { transform: translateX(0) rotate(-4deg); } 50% { transform: translateX(-9%) rotate(5deg); } }
.pz-zombie.eat span { animation: pzBite 0.45s ease-in-out infinite; }
@keyframes pzBite { 0%, 100% { transform: translateX(-14%) rotate(-7deg); } 50% { transform: translateX(2%) rotate(8deg) scale(1.06); } }
.pz-zombie.z-big span { font-size: 1.18em; }
.pz-zombie.z-fast span { filter: hue-rotate(90deg) saturate(1.4); }
.pz-zombie.die { transition: opacity 0.8s, transform 0.8s; opacity: 0; transform: translate(-50%, -30%) rotate(50deg); }

/* Горошины и всплески */
.pz-pea {
  position: absolute; transform: translate(-50%, -50%); z-index: 5;
  width: clamp(7px, 1.1vw, 11px); height: clamp(7px, 1.1vw, 11px);
  border-radius: 50%; background: radial-gradient(circle at 32% 30%, #d4f77e, #558b2f);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.pz-splat {
  position: absolute; transform: translate(-50%, -50%); z-index: 5;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 230, 90, 0.95), rgba(85, 139, 47, 0));
  animation: pzSplat 0.3s ease-out forwards;
}
@keyframes pzSplat { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } }

/* Солнышки */
.pz-sun {
  position: absolute; transform: translate(-50%, -50%); z-index: 6;
  background: none; border: none; cursor: pointer; padding: 4px;
  line-height: 1; filter: drop-shadow(0 0 9px rgba(255, 214, 64, 0.85));
  animation: pzSunSpin 3.2s linear infinite;
  transition: opacity 0.4s;
}
@keyframes pzSunSpin { 0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); } 50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.08); } 100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); } }
.sun-s { font-size: clamp(22px, 3.4vw, 34px); }
.sun-m { font-size: clamp(28px, 4.4vw, 44px); }
.sun-l { font-size: clamp(34px, 5.6vw, 56px); }
.pz-sun:hover { filter: drop-shadow(0 0 14px rgba(255, 214, 64, 1)) brightness(1.12); }
.pz-sun.fade { opacity: 0 !important; transition: opacity 0.4s; }
.pz-sun.moving { transition: top 0.12s linear, left 0.12s linear, opacity 0.4s; }
.pz-sun.ending { animation: pzSunSpin 3.2s linear infinite, pzSunEnd 0.9s ease-in-out infinite; }
@keyframes pzSunEnd { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.pz-sun.taken { animation: none; transition: transform 0.3s, opacity 0.3s; transform: translate(-50%, -140%) scale(0.4); opacity: 0; }

/* Всплывающие надписи */
.pz-float {
  position: absolute; transform: translate(-50%, -50%); z-index: 9;
  font-weight: bold; font-size: clamp(0.9em, 2vw, 1.15em); color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55); pointer-events: none;
  animation: pzFloatUp 1s ease-out forwards;
}
@keyframes pzFloatUp { 0% { opacity: 0; margin-top: 0; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -44px; } }

/* Баннер волны */
.pz-banner {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  z-index: 10; pointer-events: none; white-space: nowrap;
  font-size: clamp(1.3em, 4vw, 2.3em); font-weight: bold; color: #fff;
  text-shadow: 0 0 14px rgba(183, 28, 28, 0.9), 0 3px 6px rgba(0, 0, 0, 0.6);
  animation: pzBannerIn 2.6s ease forwards;
}
@keyframes pzBannerIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  20% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}

/* Оверлей паузы */
.pz-pausedv {
  position: absolute; inset: 0; z-index: 11; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 30, 20, 0.45); color: #fff; font-size: 2em; font-weight: bold;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px);
}

/* Задание по солнышку */
.pz-task {
  position: absolute; inset: 0; z-index: 12;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 25, 15, 0.55); backdrop-filter: blur(2px);
  animation: levelIn 0.25s ease; padding: 10px;
}
.pz-task-card {
  position: relative; width: min(92%, 430px);
  background: linear-gradient(165deg, #fffde7, #ffecb3);
  border: 3px solid #f0b429; border-radius: 18px;
  padding: 16px 16px 14px; text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.pz-task-card.shake { animation: shake 0.5s; }
.pz-task-x {
  position: absolute; top: 6px; right: 8px; width: 32px; height: 32px;
  border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.08);
  font-size: 1em; cursor: pointer; color: #6d4c41; font-family: inherit;
}
.pz-task-x:hover { background: rgba(0, 0, 0, 0.16); }
.pz-task-head { display: flex; align-items: center; gap: 10px; }
.pz-task-sun { font-size: 2em; line-height: 1; filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.7)); }
.pz-task-reward { font-weight: bold; color: #b8860b; background: #fff8e1; border: 2px solid #e6c25a; border-radius: 50px; padding: 4px 12px; font-size: 0.9em; }
.pz-task-q { font-size: 1.18em; font-weight: bold; color: #4e342e; line-height: 1.55; }
.pz-task-input {
  width: 130px; text-align: center; font-family: inherit; font-size: 2.1em; font-weight: bold; color: #6d4c41;
  background: rgba(255, 255, 255, 0.9); border: 3px solid #bcaaa4; border-radius: 12px;
  padding: 4px 8px; outline: none; transition: border-color 0.25s, box-shadow 0.25s;
}
.pz-task-input:focus { border-color: #f0b429; box-shadow: 0 0 14px rgba(255, 193, 7, 0.5); }
.pz-task-msg { min-height: 1.4em; font-weight: bold; color: #2e7d32; font-size: 0.95em; }
.pz-task-msg.warn { color: #e65100; }
.pz-task-tries { font-size: 0.85em; color: #7a5a10; }
.pz-task .ws-keypad { display: grid; grid-template-columns: repeat(4, minmax(56px, 76px)); gap: 7px; justify-content: center; }

/* Сообщение под газоном */
.pz-msg {
  margin-top: 10px; text-align: center; min-height: 1.5em;
  font-weight: bold; color: #33691e; font-size: 0.98em;
}
.pz-msg.warn { color: #e65100; }

/* Поражение */
.pz-over {
  position: absolute; inset: 0; z-index: 13; display: flex; align-items: center; justify-content: center;
  background: rgba(25, 15, 15, 0.72); backdrop-filter: blur(3px); padding: 10px;
  animation: levelIn 0.3s ease;
}
.pz-over-card {
  width: min(92%, 420px); text-align: center;
  background: linear-gradient(165deg, #fce4ec, #ffcdd2);
  border: 3px solid #c62828; border-radius: 18px; padding: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.pz-over-emoji { font-size: 3em; line-height: 1.15; }
.pz-over-title { font-size: 1.3em; font-weight: bold; color: #b71c1c; margin: 6px 0; }
.pz-over-line { color: #5d4037; line-height: 1.55; margin: 5px 0; font-size: 0.95em; }
/* Строка рекорда в оверлеях победы/поражения */
.pz-record-line { font-weight: 600; color: #8d6e63; }
.pz-record-new {
  font-weight: 800; font-size: 1.02em;
  background: linear-gradient(90deg, #ef6c00, #ffb300, #ef6c00);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: recShine 1.6s linear infinite;
}
@keyframes recShine { to { background-position: 200% center; } }
.ws-win .pz-record-new { font-size: 1.08em; }
.pz-retry { margin-top: 10px; }

/* Карточка демо-игры в меню */
.ws-card-demo { border-color: #a5d6a7; background: linear-gradient(160deg, #ffffff, #e8f5e9); }
.ws-card-demo:hover { border-color: #66bb6a; box-shadow: 0 10px 24px rgba(67, 160, 71, 0.28); }
.ws-card-demo .ws-name { color: #1b5e20; }
.ws-tag-demo { color: #2e7d32; background: #e8f5e9; border-color: #81c784; }

/* ===== Адаптивность мастерской ===== */
@media (max-width: 900px) {
  .ws-menu { grid-template-columns: repeat(2, 1fr); }
  .ws-desc { min-height: 0; }
  .ws-play-spacer { width: 0; }
  .ws-play-title { font-size: 1.1em; }
  .pz-wavebox { margin-left: 0; }
}
@media (max-width: 600px) {
  #workshop-screen { padding: 76px 12px 24px; }
  .ws-content { padding: 15px; }
  .ws-menu { grid-template-columns: 1fr; }
  .ws-keypad { grid-template-columns: repeat(3, minmax(64px, 84px)); gap: 8px; }
  .ws-key { height: 54px; font-size: 1.35em; }
  .ws-pot { width: 100%; max-width: 300px; }
  .ws-bubble-arena { height: 320px; }
  .ws-bubble { width: 64px; height: 64px; font-size: 1.2em; }
  .ws-frog-pond { height: 150px; }
  .ws-frog-char { bottom: 60px; font-size: 2em; }
  .ws-tick { width: 30px; margin-left: -15px; }
  .ws-tick-num { font-size: 0.62em; }
  .ws-blitz-expr { font-size: 1.7em; }
  .ws-blitz-btn { font-size: 1.1em; padding: 12px 26px; }
  .ws-lock-display { width: 140px; font-size: 2em; }
  .pz-top { padding: 7px 9px; gap: 7px; }
  .pz-sunbox { min-width: 78px; font-size: 1.05em; padding: 4px 8px; }
  .pz-packet { width: 60px; height: 70px; }
  .pz-packet-emoji { font-size: 1.5em; }
  .pz-cost { font-size: 0.68em; }
  .pz-shovel, .pz-pause { width: 38px; height: 48px; font-size: 1.2em; }
  .pz-wavebar { width: 100px; }
  .pz-lawn-wrap { padding-left: 26px; }
  .pz-house { width: 26px; }
  .pz-task .ws-keypad { grid-template-columns: repeat(4, minmax(48px, 62px)); gap: 6px; }
  .pz-task-q { font-size: 1.02em; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-bubble { animation: none; }
  .ws-card, .ws-pot, .ws-key { transition: none; }
}

/* ============ 8) ВОЛШЕБНЫЕ ВЕСЫ ============ */
.ws-scales-top, .ws-coins-top, .ws-clock-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 8px;
}
.ws-scales-round, .ws-coins-round, .ws-clock-round {
  background: #f3ecff; color: #6a3fa0; border: 2px solid #ddccf5;
  border-radius: 50px; padding: 5px 14px; font-weight: bold; font-size: 0.88em;
}
.ws-scales-moves, .ws-coins-spent, .ws-clock-mistakes {
  color: #9b7fc7; font-weight: bold; font-size: 0.85em;
}

.ws-scales-goal {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, #fff8e1, #fff3e0);
  border: 2px solid #ffd54f; border-radius: 16px;
  padding: 10px 16px; margin-bottom: 4px;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.12);
}
.ws-scales-goal-label { font-weight: bold; color: #8d6e63; font-size: 0.92em; }
.ws-scales-goal-expr { font-size: 1.5em; color: #6a3fa0; letter-spacing: 1px; white-space: nowrap; }
.ws-scales-goal-result {
  font-size: 1.4em; font-weight: bold; color: #b8860b;
  background: #fff; border: 2px dashed #ffd54f; border-radius: 12px;
  padding: 1px 14px; min-width: 58px; text-align: center; display: inline-block;
}
.ws-scales-goal-result.done {
  color: #2e7d32; border-style: solid; border-color: #66bb6a; background: #e8f5e9;
}

/* — Сама конструкция весов: перекладина крутится, чаши ПОДВЕШЕНЫ и остаются горизонтальными — */
.ws-scales-stage { position: relative; height: 330px; margin: 2px 0; }
.ws-scales-pillar {
  position: absolute; left: 50%; top: 92px; bottom: 24px;
  width: 22px; margin-left: -11px;
  background: linear-gradient(90deg, #a9852f, #d9b05e 45%, #9c7a2c);
  border-radius: 8px 8px 3px 3px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.22);
}
.ws-scales-base {
  position: absolute; left: 50%; bottom: 0;
  width: 180px; height: 26px; margin-left: -90px;
  background: radial-gradient(ellipse at center, #8d6e63, #5d4037);
  border-radius: 50%;
}
.ws-scales-beam {
  position: absolute; left: 0; right: 0; top: 78px; height: 0;
  transform-origin: 50% 50%;
  transition: transform 0.55s cubic-bezier(0.34, 1.3, 0.64, 1);
  z-index: 3;
}
.ws-scales-bar {
  position: absolute; left: 7%; right: 7%; top: -7px; height: 14px;
  background: linear-gradient(180deg, #e8c76f, #b8860b);
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22), inset 0 1px 2px rgba(255, 255, 255, 0.55);
}
.ws-scales-pivot {
  position: absolute; left: 50%; top: 0;
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #d4a017);
  border: 3px solid #9c7a2c; border-radius: 50%;
  z-index: 4;
}
.ws-scales-arm {
  position: absolute; top: 0; width: 200px;
  transform-origin: 50% 0;
  transition: transform 0.55s cubic-bezier(0.34, 1.3, 0.64, 1);
  z-index: 2;
}
.arm-left { left: 7%; margin-left: -27px; }
.arm-right { right: 7%; margin-right: -27px; }
.ws-scales-chain {
  display: block; width: 5px; height: 30px; margin: 0 auto;
  background: repeating-linear-gradient(180deg, #c9a13b 0 6px, #8d6e63 6px 10px);
  border-radius: 3px;
}
/* Наклон: только перекладина; каждая чаша докручивается обратно вокруг точки подвеса */
.ws-scales-beam.tilt-left { transform: rotate(-9deg); }
.ws-scales-beam.tilt-left .ws-scales-arm { transform: rotate(9deg); }
.ws-scales-beam.tilt-right { transform: rotate(9deg); }
.ws-scales-beam.tilt-right .ws-scales-arm { transform: rotate(-9deg); }
.ws-scales-beam.level { transform: rotate(0deg); }
.ws-scales-beam.level .ws-scales-arm { transform: rotate(0deg); }
.ws-scales-beam.level .ws-scale-pan {
  border-color: #66bb6a; border-top-color: #4caf50;
  box-shadow: 0 10px 20px rgba(102, 187, 106, 0.3), inset 0 -8px 14px rgba(102, 187, 106, 0.14);
}
.ws-scale-pan {
  width: 100%; min-height: 96px;
  background: linear-gradient(180deg, #fffdf5 0%, #ffedb3 70%, #ffe082 100%);
  border: 3px solid #d9a400; border-top: 5px solid #e0a800;
  border-radius: 14px 14px 46px 46px;
  padding: 8px 10px 14px;
  display: flex; flex-direction: column; gap: 5px; align-items: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16), inset 0 -8px 14px rgba(176, 128, 0, 0.16);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.ws-scale-pan-label { font-size: 0.7em; text-transform: uppercase; letter-spacing: 1px; color: #b8860b; font-weight: bold; }
.ws-scale-pan-value { font-size: 1.25em; font-weight: bold; color: #6a3fa0; text-align: center; }
.ws-scale-pan-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; min-height: 40px; }
.ws-scale-chip {
  background: linear-gradient(180deg, #ffe082, #ffb300);
  border: 2px solid #ff8f00; border-radius: 50px;
  padding: 5px 11px; font-weight: bold; color: #5d4037; cursor: pointer;
  font-family: inherit; font-size: 0.95em;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ws-scale-chip:hover { transform: translateY(-3px) rotate(-4deg); box-shadow: 0 4px 10px rgba(255, 143, 0, 0.4); }
.ws-scale-empty { color: #c9b8a8; font-style: italic; font-size: 0.9em; }
.ws-scales-msg { text-align: center; min-height: 1.5em; font-weight: bold; color: #7b1fa2; margin: 10px 0; }
.ws-scales-msg.warn { color: #e65100; }
.ws-scales-msg.ok { color: #2e7d32; }
.ws-scales-shelf {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  background: rgba(255, 255, 255, 0.65);
  border: 2px dashed #ffd54f; border-radius: 16px; padding: 12px;
}
.ws-scale-weight {
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe082, #ffb300);
  border: 3px solid #ff8f00; color: #5d4037;
  font-family: inherit; font-size: 1.15em; font-weight: bold; cursor: pointer;
  box-shadow: 0 4px 10px rgba(255, 143, 0, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s, box-shadow 0.2s;
}
.ws-scale-weight:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 8px 18px rgba(255, 143, 0, 0.5); }
.ws-scale-weight:active { transform: scale(0.92); }
.ws-scale-weight-big {
  width: 60px; height: 60px;
  background: radial-gradient(circle at 35% 30%, #eceff1, #b0bec5);
  border-color: #78909c;
  box-shadow: 0 4px 10px rgba(84, 110, 122, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.12);
}
.ws-scales-shelf-empty { color: #9b7fc7; font-weight: bold; }

/* ============ 9) МАГАЗИН ФЕИ ============ */
.ws-coins-shop { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; align-items: stretch; margin-bottom: 12px; }
.ws-coins-item {
  background: #ffffff; border: 3px solid #ffd54f; border-radius: 18px;
  padding: 14px 18px; text-align: center; min-width: 160px;
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.ws-coins-item-emoji { font-size: 3.1em; line-height: 1.15; display: block; transition: transform 0.45s, opacity 0.45s; }
.ws-coins-item-emoji.sold { transform: translateY(-30px) scale(0.3) rotate(25deg); opacity: 0; }
.ws-coins-item-name { font-weight: bold; color: #5d4037; }
.ws-coins-price {
  background: #fff0f6; border: 2px solid #ffb3d1; color: #c44569;
  border-radius: 50px; padding: 5px 12px; font-size: 0.95em; align-self: center;
}
.ws-coins-price b { font-size: 1.1em; }
.ws-coins-pile-wrap {
  flex: 1; min-width: 210px;
  background: rgba(255, 255, 255, 0.75); border: 2px solid #ddccf5; border-radius: 18px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 4px 14px rgba(122, 77, 191, 0.08);
}
.ws-coins-pile-label { font-size: 0.82em; font-weight: bold; color: #9b7fc7; text-transform: uppercase; letter-spacing: 0.5px; }
.ws-coins-pile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 48px; }
.ws-coin-chip {
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe082, #ffb300);
  border: 2.5px solid #ff8f00; color: #5d4037;
  font-family: inherit; font-weight: bold; font-size: 1em; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ws-coin-chip:hover { transform: scale(1.12) rotate(-8deg); box-shadow: 0 4px 12px rgba(255, 143, 0, 0.45); }
.ws-coin-chip.ws-coin-50, .ws-coin-chip.ws-coin-100 {
  background: radial-gradient(circle at 35% 30%, #eceff1, #b0bec5);
  border-color: #78909c;
}
.ws-coins-empty { color: #c9b8a8; font-style: italic; font-size: 0.9em; }
.ws-coins-total { text-align: center; font-weight: bold; color: #7b1fa2; font-size: 1.12em; }
.ws-coins-progress {
  height: 14px; background: #f3ecff; border: 2px solid #ddccf5;
  border-radius: 50px; overflow: hidden;
}
.ws-coins-progress-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #b39ddb, #7e57c2);
  border-radius: 50px;
  transition: width 0.3s ease, background 0.3s;
}
.ws-coins-progress-fill.exact { background: linear-gradient(90deg, #81c784, #43a047); }
.ws-coins-progress-fill.over { background: linear-gradient(90deg, #e57373, #c62828); }
.ws-coins-total.exact { color: #2e7d32; }
.ws-coins-total.over { color: #c62828; }
.ws-coins-pile.shake { animation: coinShake 0.45s; }
@keyframes coinShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.ws-coins-shelf {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center;
  background: rgba(255, 255, 255, 0.65);
  border: 2px dashed #ffb3d1; border-radius: 16px; padding: 12px;
}
.ws-coin {
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe082, #ffb300);
  border: 3px solid #ff8f00; color: #5d4037;
  font-family: inherit; font-size: 1.25em; font-weight: bold; cursor: pointer;
  box-shadow: 0 5px 12px rgba(255, 143, 0, 0.4), inset 0 -4px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s, box-shadow 0.2s;
}
.ws-coin:hover { transform: translateY(-5px) scale(1.07); box-shadow: 0 10px 22px rgba(255, 143, 0, 0.55); }
.ws-coin:active { transform: scale(0.9); }
.ws-coin-silver {
  background: radial-gradient(circle at 35% 30%, #eceff1, #b0bec5);
  border-color: #78909c;
  box-shadow: 0 5px 12px rgba(84, 110, 122, 0.4), inset 0 -4px 8px rgba(0, 0, 0, 0.12);
}
.ws-coins-btns { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.ws-coins-pay {
  background: linear-gradient(45deg, #ff6b9d, #c44569); color: #fff;
  border: none; border-radius: 50px; padding: 12px 30px;
  font-family: inherit; font-weight: bold; font-size: 1.05em; cursor: pointer;
  box-shadow: 0 6px 16px rgba(255, 107, 157, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}
.ws-coins-pay:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(255, 107, 157, 0.6); }
.ws-coins-reset {
  background: #fff; color: #9b7fc7; border: 2px solid #ddccf5;
  border-radius: 50px; padding: 12px 22px;
  font-family: inherit; font-weight: bold; cursor: pointer;
  transition: all 0.25s;
}
.ws-coins-reset:hover { border-color: #b39ddb; transform: translateY(-3px); }
.ws-coins-msg { text-align: center; min-height: 1.5em; font-weight: bold; color: #7b1fa2; margin-top: 10px; }
.ws-coins-msg.warn { color: #e65100; }
.ws-coins-msg.ok { color: #2e7d32; }

/* ============ 10) ЧАСЫ ВОЛШЕБНИКА ============ */
.ws-clock-target {
  text-align: center; background: #f3ecff; border: 2px solid #ddccf5;
  border-radius: 16px; padding: 10px 14px; margin-bottom: 10px;
  color: #6a3fa0; font-size: 1.05em;
  display: flex; flex-direction: column; gap: 2px;
}
.ws-clock-target-time { font-size: 1.6em; color: #4a148c; }
.ws-clock-target-words { font-size: 0.8em; color: #9b7fc7; }
.ws-clock-face-wrap { display: flex; justify-content: center; padding: 4px 0 8px; }
.ws-clock-svg { width: min(250px, 62vw); height: auto; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.18)); }
.ws-clock-face { fill: #fffdf7; }
.ws-clock-rim { fill: none; stroke: #ffd54f; stroke-width: 7; }
.ws-clock-tick { stroke: #cfc4b5; stroke-width: 1.6; }
.ws-clock-tick.big { stroke: #8d6e63; stroke-width: 3; }
.ws-clock-num { font-family: 'Comfortaa', cursive; font-weight: bold; font-size: 16px; fill: #5d4037; }
.ws-clock-hand {
  transform-box: view-box; transform-origin: 100px 100px;
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
  stroke-linecap: round;
}
.ws-clock-hand.hour { stroke: #6a3fa0; stroke-width: 7.5; }
.ws-clock-hand.minute { stroke: #ff6b9d; stroke-width: 4.5; }
.ws-clock-pin { fill: #4a148c; }
.ws-clock-now-time {
  text-align: center; font-weight: bold; color: #5d4037; font-size: 1.02em; margin: 0 0 10px;
}
.ws-clock-now-time b {
  display: inline-block; background: #faf7fc; border: 2px solid #ddccf5; border-radius: 12px;
  padding: 3px 16px; color: #4a148c; font-size: 1.25em; min-width: 86px; margin-left: 4px;
}
.ws-clock-controls { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ws-clock-ctrl {
  background: #ffffff; border: 2px solid #f0e6f8; border-radius: 16px;
  padding: 10px 14px; flex: 1; min-width: 230px; text-align: center;
}
.ws-clock-ctrl > b { color: #6a3fa0; font-size: 0.95em; display: inline-flex; align-items: center; gap: 7px; }
.ws-clock-swatch { display: inline-block; width: 22px; height: 5px; border-radius: 3px; }
.swatch-hour { background: #6a3fa0; }
.swatch-min { background: #ff6b9d; }
.ws-clock-ctrl.ctrl-hour { border-color: #ddccf5; background: linear-gradient(180deg, #ffffff, #fbf8ff); }
.ws-clock-ctrl.ctrl-hour > b { color: #6a3fa0; }
.ws-clock-ctrl.ctrl-hour .ws-clock-now { border-color: #ddccf5; color: #4a148c; }
.ws-clock-ctrl.ctrl-hour .ws-clock-ctrl-btns button { background: #f3ecff; color: #6a3fa0; border-color: #d3bdf0; }
.ws-clock-ctrl.ctrl-hour .ws-clock-ctrl-btns button:hover { background: #e9dcff; box-shadow: 0 4px 10px rgba(122, 77, 191, 0.28); }
.ws-clock-ctrl.ctrl-min { border-color: #ffd7e5; background: linear-gradient(180deg, #ffffff, #fff8fb); }
.ws-clock-ctrl.ctrl-min > b { color: #c44569; }
.ws-clock-ctrl.ctrl-min .ws-clock-now { border-color: #ffd7e5; color: #ad1457; }
.ws-clock-ctrl.ctrl-min .ws-clock-ctrl-btns button { background: #fff0f6; color: #c44569; border-color: #ffb3d1; }
.ws-clock-ctrl.ctrl-min .ws-clock-ctrl-btns button:hover { background: #ffe3ef; box-shadow: 0 4px 10px rgba(255, 107, 157, 0.3); }
.ws-clock-ctrl-btns { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 8px; }
.ws-clock-ctrl-btns button {
  border-radius: 12px; padding: 9px 13px; min-height: 44px;
  font-family: inherit; font-weight: bold; cursor: pointer;
  transition: all 0.2s;
}
.ws-clock-ctrl-btns button:hover { transform: translateY(-2px); }
.ws-clock-ctrl-btns button:active { transform: scale(0.94); }
.ws-clock-now {
  min-width: 92px; font-weight: bold; color: #5d4037;
  background: #faf7fc; border: 2px solid #f0e6f8; border-radius: 10px;
  padding: 7px 8px; font-size: 0.95em;
}
.ws-clock-btns { text-align: center; margin-top: 12px; }
.ws-clock-check {
  background: linear-gradient(45deg, #ff6b9d, #c44569); color: #fff;
  border: none; border-radius: 50px; padding: 12px 32px;
  font-family: inherit; font-weight: bold; font-size: 1.05em; cursor: pointer;
  box-shadow: 0 6px 16px rgba(255, 107, 157, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}
.ws-clock-check:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(255, 107, 157, 0.6); }
.ws-clock-msg { text-align: center; min-height: 1.5em; font-weight: bold; color: #7b1fa2; margin-top: 10px; }
.ws-clock-msg.warn { color: #e65100; }
.ws-clock-msg.ok { color: #2e7d32; }

/* ============ Адаптив новых механик ============ */
@media (max-width: 600px) {
  .ws-scales-goal { padding: 8px 10px; gap: 8px; }
  .ws-scales-goal-expr { font-size: 1.2em; }
  .ws-scales-goal-result { font-size: 1.15em; min-width: 50px; padding: 1px 10px; }
  .ws-scales-stage { height: 264px; }
  .ws-scales-beam { top: 62px; }
  .ws-scales-pillar { top: 74px; bottom: 20px; width: 16px; margin-left: -8px; }
  .ws-scales-base { width: 130px; height: 20px; margin-left: -65px; }
  .ws-scales-arm { width: 42vw; }
  .arm-left { margin-left: -22px; }
  .arm-right { margin-right: -22px; }
  .ws-scales-chain { height: 20px; }
  .ws-scale-pan { min-height: 80px; padding: 6px 6px 10px; border-radius: 12px 12px 34px 34px; }
  .ws-scale-pan-value { font-size: 1.05em; }
  .ws-scale-weight { width: 48px; height: 48px; font-size: 1.05em; }
  .ws-scale-weight-big { width: 52px; height: 52px; }
  .ws-coin { width: 54px; height: 54px; font-size: 1.1em; }
  .ws-coins-item { min-width: 130px; padding: 10px 12px; }
  .ws-coins-item-emoji { font-size: 2.5em; }
  .ws-clock-num { font-size: 18px; }
  .ws-clock-ctrl { min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-scales-beam, .ws-scales-arm, .ws-clock-hand, .ws-coins-item-emoji, .ws-scale-chip { transition: none; }
  .ws-coins-pile.shake { animation: none; }
  .ws-coins-progress-fill { transition: none; }
}