/* Глава «Мастерская» (обучение). */
.ws-hint { background: #4a3a22; color: var(--brass2); border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; font-size: 15px; }
.as-keeper .ws-hint { background: #fff4d6; color: #5a3d12; border: 1.5px dashed #c49a4a; }
/* лампа: цвет и знак цвета посередине стекла — тот же знак, что в таблице Хранителя */
.ws-lamp { position: relative; display: grid; place-items: center; width: 110px; height: 110px; margin: 6px auto 18px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.75) 0, var(--c) 38%, rgba(0,0,0,.45) 100%); box-shadow: 0 0 40px var(--c), inset 0 0 0 5px #6d521f; animation: ws-glow 2.2s ease-in-out infinite; }
.ws-lamp .cmark { width: 44px; height: 44px; }
.ws-lamp .cmark path, .ws-lamp .cmark circle:not([fill="none"]), .ws-lamp .cmark rect { paint-order: stroke; stroke-width: .7px; stroke: #0000004d; }
@keyframes ws-glow { 50% { box-shadow: 0 0 70px var(--c), inset 0 0 0 5px #6d521f; } }
.ws-buttons { display: flex; justify-content: center; gap: 14px; }
.ws-btn { width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer; color: #2a1d0c; background: radial-gradient(circle at 35% 30%, #f3dc9b, #b48a35 70%); box-shadow: 0 5px 0 #6d501b, 0 8px 16px #0008; transition: transform .1s, box-shadow .1s; touch-action: manipulation; }
.ws-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #6d501b, 0 3px 8px #0008; }
.ws-btn .ic { width: 40px; height: 40px; }
.ws-note { color: var(--muted); font-size: 14px; text-align: center; margin: 16px 0 0; }
.ws-marks { font-size: 14px; color: #5a3d12; margin: 0 !important; }
.ws-gears { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; justify-items: center; }
.ws-gear { position: relative; width: 120px; height: 120px; border: 0; background: none; cursor: pointer; color: var(--brass); touch-action: manipulation; }
.ws-gear .gearbg { position: absolute; inset: 0; width: 100%; height: 100%; animation: ws-turn 14s linear infinite; }
.ws-gear:nth-child(even) .gearbg { animation-direction: reverse; }
.ws-gear .gsym { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; color: var(--ink); }
.ws-gear:active .gearbg { color: var(--brass2); }
@keyframes ws-turn { to { transform: rotate(360deg); } }
.ws-target { display: grid; place-items: center; padding: 10px; color: #5a3d12; }

/* решено: лампа горит ровно, нажатая кнопка осталась утопленной, остальные замерли; шестерни встали,
   выбранная вошла в зацепление и светится; пояснение про ошибки больше не нужно */
.ws-mod.solved .ws-lamp { animation: none; box-shadow: 0 0 46px var(--c), inset 0 0 0 5px #6d521f; }
.ws-mod.solved .ws-btn { cursor: default; box-shadow: 0 2px 0 #6d501b, 0 3px 6px #0006; transform: translateY(3px); filter: saturate(.55) brightness(.8); }
.ws-mod.solved .ws-btn.picked { filter: none; transform: translateY(5px); box-shadow: 0 0 0 3px #2a1d0c, 0 0 0 6px #6fe08a, 0 0 22px #6fe08a99; }
.ws-mod.solved .ws-note { display: none; }
.ws-mod.solved .ws-gear { cursor: default; }
.ws-mod.solved .ws-gear .gearbg { animation-play-state: paused; }
.ws-mod.solved .ws-gear:not(.picked) { opacity: .45; }
.ws-mod.solved .ws-gear.picked { color: var(--brass2); }
.ws-mod.solved .ws-gear.picked .gearbg { animation: ws-turn 5s linear infinite; filter: drop-shadow(0 0 8px #e6c67588); }
.ws-mod.solved .ws-gear.picked::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; box-shadow: 0 0 0 3px #6fe08a, 0 0 18px #6fe08a99; pointer-events: none; }
.as-keeper .ws-mod.solved .ws-target .ic { color: #2f8a46; }
@media (prefers-reduced-motion: reduce) {
  .ws-lamp, .ws-gear .gearbg { animation: none !important; }
}