/* workshop.css — оформление «Ювелир Ленд» по утверждённым образам
   (ref/workshop/concept: 01 — уровень, 02 — победа, 03 — карта): розовый
   ювелирный бутик, кремовые плашки в золотой оправе, сиреневые глянцевые
   кнопки, зелёная главная кнопка. Один округлый жирный шрифт — Nunito
   800/900 (OFL, лежит в пакете, без сети), без курсива. Слов на экране
   уровня — не больше трёх, остальное — значки и числа. Стили game3
   (style.css) не подключаются. */

@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(workshop_assets/fonts/nunito-800.woff2) format('woff2');
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap;
  src: url(workshop_assets/fonts/nunito-900.woff2) format('woff2');
}

:root {
  --font: 'Nunito', 'Arial Rounded MT Bold', 'Trebuchet MS', Arial, sans-serif;
  --ink: #5b3326;
  --ink-soft: #8d5f4c;
  --cream: #fffaf1;
  --cream-lo: #f5e4cc;
  --gold: #e8b64a;
  --gold-hi: #fff1b5;
  --gold-lo: #b07c22;
  --gold-dk: #7a4f12;
  --plum: #7b3f6c;
  --pink: #f3c6d2;
  --rim: linear-gradient(160deg, #fff6c8 0%, #f0c55a 32%, #b98226 62%, #f6d77a 84%, #c9902e 100%);
  --shadow: 0 4px 10px rgba(122, 52, 82, 0.28);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: var(--font); font-weight: 800;
  color: var(--ink);
  background: #eab9c6;
  -webkit-user-select: none; user-select: none;
  -webkit-text-size-adjust: 100%;
}
button { font-family: inherit; font-weight: 900; cursor: pointer; }
button:focus { outline: none; }
button:focus-visible { outline: 3px solid rgba(240, 97, 143, 0.9); outline-offset: 3px; }
.hidden { display: none !important; }
/* текст только для чтения с экрана: на виду его нет, в DOM и aria — есть */
.ws-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.screen { display: none; position: fixed; inset: 0; z-index: 1; }
/* баннер площадки внизу: экран кончается над ним (--ws-banner-h ставит WSPlatform на <html>) */
.screen { bottom: var(--ws-banner-h, 0px); }
/* экран уровня держит место баннера весь уровень (--ws-field-banner-h ставит workshop.js, G1):
   баннер, ушедший под окно или пришедший посреди уровня, пробирки не двигает */
#screen-workshop { bottom: var(--ws-field-banner-h, var(--ws-banner-h, 0px)); }
.screen.active { display: flex; }

/* ---------- круглые кнопки в золотой оправе ---------- */
.ws-round {
  position: relative; flex: none; width: 60px; height: 60px; padding: 0; border-radius: 50%;
  border: 3.5px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow), inset 0 -4px 6px rgba(70, 20, 90, 0.28), inset 0 3px 4px rgba(255, 255, 255, 0.6);
  transition: transform 0.1s ease, filter 0.15s ease;
}
.ws-round::after {   /* глянцевый блик сверху */
  content: ''; position: absolute; left: 18%; right: 18%; top: 7%; height: 32%; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.ws-round svg { position: relative; z-index: 1; width: 56%; height: 56%; }
.ws-round:active { transform: translateY(1px) scale(0.95); }
.ws-round[disabled] { filter: saturate(0.35) brightness(0.92); opacity: 0.7; cursor: default; }
.ws-round[aria-pressed="true"] { filter: saturate(0.2) brightness(0.85); }
.ws-round-lilac {
  color: #fff;
  background: radial-gradient(circle at 40% 30%, #f8e8fd 0%, #dcb3ef 34%, #b07fd0 72%, #8d58b0 100%) padding-box, var(--rim) border-box;
}
.ws-round-lilac svg { filter: drop-shadow(0 1.6px 0 rgba(96, 44, 120, 0.75)); }
.ws-round-cream {
  width: 48px; height: 48px; border-width: 3px; color: #8a5230;
  background: radial-gradient(circle at 40% 30%, #ffffff 0%, #fff6e4 45%, #f0dcbc 100%) padding-box, var(--rim) border-box;
}
.ws-round-cream::after { opacity: 0.5; }
/* кнопка-картинка с листа: значок нарисован на самой картинке, svg внутри скрыт */
.ws-round.ws-pic {
  border: 0; border-radius: 50%; color: transparent;
  background: var(--pic) center / contain no-repeat; box-shadow: none;
  filter: drop-shadow(0 3px 3px rgba(122, 52, 82, 0.3));
}
.ws-round.ws-pic::after, .ws-round.ws-pic > svg { display: none; }
.ws-round.ws-pic[disabled] { filter: saturate(0.35) brightness(0.95); opacity: 0.7; }
.ws-round.ws-pic[aria-pressed="true"] { filter: drop-shadow(0 3px 3px rgba(122, 52, 82, 0.3)); }
#btn-back { --pic: url(workshop_assets/ui_back.webp); }
#btn-sound { --pic: url(workshop_assets/ui_sound.webp); }
#btn-sound[aria-pressed="true"] { --pic: url(workshop_assets/ui_mute.webp); }
#btn-undo, #btn-lose-undo { --pic: url(workshop_assets/ui_undo.webp); }
#btn-hint { --pic: url(workshop_assets/ui_hint.webp); }
#btn-restart, #btn-lose-again { --pic: url(workshop_assets/ui_restart.webp); }
#btn-again { --pic: url(workshop_assets/ui_replay.webp); }
#btn-win-menu { background: url(workshop_assets/ui_case.webp) 50% 46% / 62% no-repeat, url(workshop_assets/ui_badge.webp) center / contain no-repeat; }
#btn-decor { --pic: url(workshop_assets/ui_shop.webp); }   /* лавка (B3): окно убранства и покупки */
#btn-noads, #btn-win-noads { --pic: url(workshop_assets/ui_noads.webp); }

/* ---------- кнопки-пилюли ---------- */
.ws-btn {
  border-radius: 999px; letter-spacing: 0.01em; line-height: 1.1;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.ws-btn:active { transform: translateY(1px) scale(0.98); }
.ws-btn-primary, .ws-btn-green {
  padding: 12px 34px; font-size: 1.35rem; color: #fff;
  border: 3px solid transparent;
  background: linear-gradient(180deg, #a8ea74 0%, #5fc444 45%, #34992b 100%) padding-box, var(--rim) border-box;
  box-shadow: var(--shadow), inset 0 -4px 5px rgba(20, 90, 20, 0.35), inset 0 3px 3px rgba(255, 255, 255, 0.5);
  text-shadow: 0 2px 0 rgba(30, 100, 30, 0.75);
}
.ws-btn-secondary {
  padding: 9px 20px; font-size: 1.05rem; color: var(--ink);
  border: 2.5px solid transparent;
  background: linear-gradient(180deg, #ffffff, #f6e7cf) padding-box, var(--rim) border-box;
  box-shadow: 0 3px 7px rgba(122, 52, 82, 0.22);
}
.ws-btn-small { padding: 7px 16px; font-size: 1rem; }
.ws-btn[disabled] { filter: grayscale(0.7) brightness(0.92); cursor: default; }

/* ---------- монеты ---------- */
.ws-coin-ico {
  display: inline-block; flex: none; width: 18px; height: 18px;
  background: url(workshop_assets/ui_coin.webp) center / contain no-repeat;
}
/* плашка счёта: кремовая пилюля в золотой оправе, концы картинки не растягиваются */
.ws-coins {
  --ch: 38px;
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: var(--ch); padding: 0 14px 0 40px;
  border: 0 solid transparent; border-image: url(workshop_assets/ui_pill.webp) 0 64 fill / 0 calc(var(--ch) / 2) stretch;
  background: none;
  color: var(--ink); font-size: 1.2rem; font-weight: 900; font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 3px 4px rgba(122, 52, 82, 0.28));
}
.ws-coins .ws-coin-ico { position: absolute; left: -6px; top: 50%; width: 42px; height: 42px; margin-top: -21px; }
.ws-coins.bump { animation: wsCoinBump 0.32s ease-out; }
@keyframes wsCoinBump { 0% { transform: scale(1); } 40% { transform: scale(1.12); filter: brightness(1.15); } 100% { transform: scale(1); } }

/* спрайт камня из атласа (10 ячеек в ряд) */
.ws-gem {
  display: block;
  background: url(workshop_assets/gems.webp) 0 0 / 1000% 100% no-repeat;
  background-position-x: calc(var(--sprite, 0) * 100% / 9);
  filter: drop-shadow(0 2px 2px rgba(90, 30, 50, 0.3));
}

/* ---------- стартовый экран (п. 4.2.10 правил ВК) ----------
   Та же комната, что у карты, под светлой вуалью: тиара и название сверху,
   героиня посередине, зелёная «Играть» внизу. Героиня ужимается первой. */
#screen-start {
  overflow: hidden; justify-content: center;
  background: #eab9c6 url(workshop_assets/bg_map.webp) 50% 0 / cover no-repeat;
}
#screen-start::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(255, 248, 238, 0.7), rgba(240, 200, 212, 0.35) 75%);
}
.ws-start {
  position: relative; z-index: 1; width: 100%; max-width: 480px; height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 26px) 16px calc(env(safe-area-inset-bottom, 0px) + 30px);
}
.ws-start-head { display: flex; flex-direction: column; align-items: center; }
.ws-start-crown { width: min(40vw, 170px); height: auto; margin-bottom: -4px; filter: drop-shadow(0 4px 6px rgba(122, 52, 82, 0.3)); }
.ws-start-title {
  margin: 0; text-align: center; font-weight: 900; line-height: 1.02; letter-spacing: 0.01em;
  font-size: clamp(2.2rem, 11vw, 3.4rem);
  color: #fff; -webkit-text-stroke: 2px #a8640e; paint-order: stroke fill;
  text-shadow: 0 3px 0 #a8640e, 0 0 18px rgba(255, 220, 120, 0.85);
}
.ws-start-hero {
  flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(122, 52, 82, 0.35));
}
.ws-start-play { --ph: 80px; flex: none; width: min(68vw, 280px); gap: 12px; font-size: 2.4rem; }
.ws-start-play > svg { width: 46px; height: 46px; }
@media (orientation: landscape) and (max-height: 520px) {
  .ws-start { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
  .ws-start-crown { width: 120px; }
  .ws-start-title { font-size: 2.1rem; }
  .ws-start-play { --ph: 64px; width: 230px; font-size: 2rem; }
}

/* ---------- меню — карта бутика (образ 03) ----------
   Комната (bg_map) стоит, дорожка со значками прокручивается поверх. */
#screen-menu {
  overflow: hidden;
  background: #eab9c6 url(workshop_assets/bg_map.webp) 50% 0 / cover no-repeat;
}
.ws-map {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.35) 34px, #000 96px);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.35) 34px, #000 96px);
}
.ws-map::-webkit-scrollbar { display: none; }
.ws-map-track { position: relative; width: min(100%, 480px); margin: 0 auto; }
.ws-map-path { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ws-map-path path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ws-map-path .p-glow { stroke: rgba(255, 246, 210, 0.95); stroke-width: 66; filter: url(#ws-path-blur); }
.ws-map-path .p-edge { stroke: rgba(222, 172, 118, 0.5); stroke-width: 44; }
.ws-map-path .p-body { stroke: rgba(255, 251, 245, 0.94); stroke-width: 39; }
.ws-map-path .p-done { stroke: #fff0c0; stroke-width: 39; }

/* значок уровня: кремовый — закрыт, золотой — открыт или пройден */
.ws-node {   /* картинки node_cream / node_gold / node_current */
  position: absolute; z-index: 1; width: 58px; height: 58px; margin: -29px 0 0 -29px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #b9a18a; font-size: 1.5rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
  background: url(workshop_assets/node_cream.webp) center / contain no-repeat;
  filter: drop-shadow(0 4px 4px rgba(122, 52, 82, 0.28));
  transition: transform 0.1s ease;
}
.ws-node:active { transform: translateY(2px) scale(0.96); }
.ws-node-n { position: relative; z-index: 1; }
.ws-node.is-done, .ws-node.is-next {
  color: #fff; -webkit-text-stroke: 1.6px #a8640e; paint-order: stroke fill; text-shadow: 0 2px 0 #a8640e;
  background-image: url(workshop_assets/node_gold.webp);
}
.ws-node.is-current {
  z-index: 3; width: 84px; height: 84px; margin: -42px 0 0 -42px; font-size: 2.3rem;
  -webkit-text-stroke-width: 2px; background: none;
  animation: wsNodeGlow 1.3s ease-in-out infinite alternate;
}
.ws-node.is-current::before {   /* монета с сиянием: монета занимает около 3/4 картинки */
  content: ''; position: absolute; inset: -17%; pointer-events: none;
  background: url(workshop_assets/node_current.webp) center / contain no-repeat;
}
@keyframes wsNodeGlow {
  from { filter: drop-shadow(0 4px 4px rgba(122, 52, 82, 0.28)) brightness(1); }
  to { filter: drop-shadow(0 0 14px rgba(255, 226, 120, 0.95)) brightness(1.08); }
}
.ws-node.is-new { animation: wsNodeNew 0.9s cubic-bezier(.2, 1.6, .5, 1) both; }
@keyframes wsNodeNew { 0% { transform: scale(0.5); filter: brightness(1.7); } 100% { transform: none; filter: none; } }
.ws-node-stars {
  position: absolute; left: 50%; top: -15px; z-index: 2; transform: translateX(-50%);
  display: flex; align-items: flex-end; pointer-events: none;
  filter: drop-shadow(0 1.5px 1.5px rgba(122, 52, 82, 0.35));
}
.ws-node-stars i {
  display: block; width: 18px; height: 18px;
  background: url(workshop_assets/ui_star_off.webp) center / contain no-repeat;
}
.ws-node-stars i.on { background-image: url(workshop_assets/star_small.webp); }
.ws-node-stars i:nth-child(1) { transform: rotate(-16deg) translateY(4px); }
.ws-node-stars i:nth-child(2) { width: 22px; height: 22px; }
.ws-node-stars i:nth-child(3) { transform: rotate(16deg) translateY(4px); }
.ws-node.is-current .ws-node-stars { top: -19px; }
.ws-node-hard {   /* сложный заказ: красные песочные часы */
  position: absolute; right: -7px; bottom: -5px; z-index: 2; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 30%, #ff8a9a, #e0284f 60%, #a3123a);
  box-shadow: 0 0 0 2px #fff1b5, 0 2px 4px rgba(120, 20, 40, 0.4);
}
.ws-node-hard svg { width: 15px; height: 15px; }
.ws-node.is-locked .ws-node-hard { filter: saturate(0.55); opacity: 0.85; }

/* героиня у текущего уровня: булавка-портрет, остриё (низ картинки) — в точке left/top,
   то есть воткнуто в край монеты; булавка наклонена наружу и покачивается вокруг острия,
   не отрываясь от монеты */
.ws-map-me {
  --tilt: 14deg;
  position: absolute; z-index: 4; width: 62px; height: 76px; margin: -76px 0 0 -31px; pointer-events: none;
  background: url(workshop_assets/pin_jeweler.webp) 50% 100% / contain no-repeat;
  filter: drop-shadow(0 4px 4px rgba(122, 52, 82, 0.35));
  transform-origin: 50% 100%; transform: rotate(var(--tilt));
  animation: wsMeSway 1.6s ease-in-out infinite alternate;
}
.ws-map-me.is-left { --tilt: -14deg; }
@keyframes wsMeSway { from { transform: rotate(var(--tilt)); } to { transform: rotate(calc(var(--tilt) * 0.55)); } }

/* шкатулка коллекции на дорожке */
/* шкатулка коллекции на дорожке: chest — закрыта, chest_open — открыта (крышка выше, картинка выше) */
.ws-chest {
  position: absolute; z-index: 2; width: 74px; height: 67px; margin: -38px 0 0 -37px; padding: 0; border: 0; background: none;
}
.ws-chest::before {
  content: ''; position: absolute; left: -4%; right: -4%; bottom: 0; height: 100%; pointer-events: none;
  background: url(workshop_assets/chest.webp) 50% 100% / contain no-repeat;
  filter: drop-shadow(0 4px 4px rgba(90, 30, 50, 0.3));
}
.ws-chest.is-open::before { height: 128%; background-image: url(workshop_assets/chest_open.webp); }
.ws-chest.is-locked::before { filter: saturate(0.5) brightness(0.93) drop-shadow(0 4px 4px rgba(90, 30, 50, 0.3)); }
.ws-chest.is-ready { animation: wsChestHop 1.2s ease-in-out infinite; }
.ws-chest.is-ready::before { filter: drop-shadow(0 0 3px #fff6c8) drop-shadow(0 0 10px rgba(255, 210, 80, 0.95)); }
@keyframes wsChestHop {
  0%, 55%, 100% { transform: none; } 66% { transform: translateY(-8px) rotate(-5deg); }
  78% { transform: translateY(0) rotate(4deg); } 88% { transform: translateY(-3px); }
}

/* пьедестал с готовым изделием коллекции: бархатная тумба с золотым пояском (pedestal) */
.ws-ped { position: absolute; z-index: 0; width: 112px; height: 98px; margin: -58px 0 0 -56px; pointer-events: none; }
.ws-ped-art { position: absolute; left: 0; top: 0; z-index: 2; width: 112px; height: 68px; }
.ws-ped::before {
  content: ''; position: absolute; left: 14px; right: 14px; top: 46px; z-index: 1; height: 54px;
  background: var(--ws-pedestal, url(workshop_assets/pedestal.webp)) 50% 100% / contain no-repeat;
  filter: drop-shadow(0 5px 6px rgba(90, 30, 50, 0.3));
}

/* верх (монеты, убранство, звук) и низ (зелёная кнопка с номером уровня) */
.ws-map-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5; pointer-events: none;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) calc(env(safe-area-inset-right, 0px) + 12px) 0 calc(env(safe-area-inset-left, 0px) + 18px);
}
.ws-map-top > * { pointer-events: auto; }
.ws-map-knobs { display: flex; gap: 10px; }
/* звук, под ним вибрация (только сенсорный экран): столбик не теснит ряд кнопок */
.ws-knob-stack { display: flex; flex-direction: column; gap: 10px; }
#btn-vibro .v-off { display: none; }
#btn-vibro[aria-pressed="true"] .v-off { display: inline; }
.ws-map-top .ws-map-knob { width: 54px; height: 54px; }
.ws-map-top .ws-map-knob svg { width: 62%; height: 62%; }
.ws-map-foot {
  position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); z-index: 5;
  display: flex; justify-content: center; pointer-events: none;
}
.ws-map-foot .ws-map-play { --ph: 78px; pointer-events: auto; width: min(64vw, 270px); gap: 12px; font-size: 2.4rem; }
.ws-map-foot .ws-map-play > svg { width: 46px; height: 46px; }
#screen-menu.active ~ .ws-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 112px); }

/* убранство: окно-карточка со столом и стеклом */
.ws-decor { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ws-decor-row { display: flex; align-items: center; gap: 9px; }
.ws-decor-ico { flex: none; width: 40px; height: 40px; display: flex; }
.ws-decor-ico svg { width: 100%; height: 100%; }
.ws-decor-chip {
  position: relative; width: 50px; height: 50px; padding: 4px; border-radius: 50%;
  border: 3px solid rgba(232, 182, 74, 0.45); background: #fff;
}
.ws-decor-chip .ws-swatch { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.3), inset 0 2px 3px rgba(255, 255, 255, 0.4); }
.ws-decor-chip.is-on { border-color: #e8b64a; box-shadow: 0 0 10px rgba(255, 190, 70, 0.85); }
.ws-decor-chip.is-locked .ws-swatch { filter: saturate(0.55); opacity: 0.55; }
.ws-decor-lock {   /* замочек: образец лежит в шкатулке */
  position: absolute; right: -4px; bottom: -6px; width: 21px; height: 28px;
  background: url(workshop_assets/ui_lock.webp) center / contain no-repeat;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 2px 2px rgba(90, 30, 50, 0.35));
}
.ws-decor-ok { --ph: 62px; width: 150px; margin-top: 4px; }
.ws-decor-ok > svg { width: 40px; height: 40px; }

/* ---------- экран уровня ---------- */
#screen-workshop {
  overflow: hidden; touch-action: none;
  background: #eab9c6 url(workshop_assets/bg_level.webp) 50% 0 / cover no-repeat;
}
.ws-root {
  position: relative; z-index: 1;
  width: 100%; max-width: 640px; height: 100%; margin: 0 auto;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px) calc(env(safe-area-inset-right, 0px) + 10px) env(safe-area-inset-bottom, 0px) calc(env(safe-area-inset-left, 0px) + 10px);
}

/* верх: назад и уровень | изделие на подушке | монеты и звёзды */
.ws-header {
  position: relative; flex: none; display: grid; grid-template-columns: 100px 1fr 100px; align-items: start;
  height: 92px; padding-top: 8px;
}
.ws-head-side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ws-head-right { align-items: flex-end; }
.ws-level-pill {
  padding: 2px 9px; border-radius: 10px; font-size: 0.8rem; font-weight: 900; color: var(--plum); white-space: nowrap;
  background: rgba(255, 250, 241, 0.85); box-shadow: 0 1px 3px rgba(122, 52, 82, 0.2);
}
.ws-stage {
  position: relative; height: 84px; min-width: 0;
  background: var(--ws-cushion, url(workshop_assets/cushion.webp)) 50% 100% / auto 62px no-repeat;
}
.ws-piece { position: absolute; left: 50%; top: -4px; width: min(100%, 168px); height: 70px; transform: translateX(-50%); display: block; }

/* звёзды: три штуки и полоска до потери следующей */
.ws-stars { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 6px; margin-right: 2px; }
.ws-stars i {
  position: relative; display: block; width: 22px; height: 22px;
  background: url(workshop_assets/ui_star_off.webp) center / contain no-repeat;
}
.ws-stars i.on { background-image: url(workshop_assets/ui_star.webp); }
.ws-stars i.lost { animation: wsStarLost 0.6s ease-out; }
@keyframes wsStarLost { 0% { transform: scale(1.35); } 60% { transform: translateY(5px) scale(0.8); } 100% { transform: none; } }
.ws-stars::after {
  content: ''; position: absolute; left: 6px; right: 6px; bottom: 0; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #f6b928 0, #ffd85a calc(var(--tier, 1) * 100%), rgba(123, 63, 108, 0.25) calc(var(--tier, 1) * 100%));
  transition: background 0.3s;
}

/* ходы — только на «Сложном заказе»: песочные часы и остаток */
.ws-moves { display: none; }
body.is-hard .ws-level-pill { display: none; }
body.is-hard .ws-moves {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px 0 6px; border-radius: 13px;
  font-size: 1rem; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ff8a8f, #e0405a); box-shadow: 0 0 0 2px #fff1b5, var(--shadow);
}
body.is-hard .ws-moves::before {
  content: ''; width: 14px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M2 1h10M2 15h10M3 1c0 4 4 5 4 7s-4 3-4 7M11 1c0 4-4 5-4 7s4 3 4 7' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M5 13.5h4L7 11z' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.is-hard .ws-moves.is-low { animation: wsBump 0.5s ease-out; background: linear-gradient(180deg, #ff5a5a, #b81830); }
@keyframes wsBump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---------- заказчицы: портрет, «4», пузырь с камнем ---------- */
.ws-orders-panel { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ws-orders { display: flex; gap: 10px; justify-content: center; width: 100%; --face: 66px; --bubble: 54px; }
.ws-orders[data-n="3"] { gap: 4px; --face: 56px; --bubble: 48px; }
.ws-card {
  position: relative; flex: 0 1 auto; min-width: 0; height: calc(var(--face) + 6px);
  display: flex; align-items: center; cursor: pointer;
}
/* портрет в золотой рамке (рамка — на картинке); выполненный заказ — радостное лицо */
.ws-face {
  position: relative; flex: none; width: var(--face); height: var(--face); border-radius: 50%;
  background: var(--img, none) center / contain no-repeat;
  filter: drop-shadow(0 3px 4px rgba(122, 52, 82, 0.3));
}
.ws-face.f-bride { --img: url(workshop_assets/face_bride.webp); --joy: url(workshop_assets/face_bride_joy.webp); }
.ws-face.f-grandma { --img: url(workshop_assets/face_grandma.webp); --joy: url(workshop_assets/face_grandma_joy.webp); }
.ws-face.f-curly { --img: url(workshop_assets/face_curly.webp); --joy: url(workshop_assets/face_curly_joy.webp); }
.ws-face.f-lady { --img: url(workshop_assets/face_lady.webp); --joy: url(workshop_assets/face_lady_joy.webp); }
.ws-face.f-redhead { --img: url(workshop_assets/face_redhead.webp); --joy: url(workshop_assets/face_redhead_joy.webp); }
.ws-face.f-blonde { --img: url(workshop_assets/face_blonde.webp); --joy: url(workshop_assets/face_blonde_joy.webp); }
.ws-card.is-done .ws-face { --img: var(--joy); }
.ws-card-qty {
  position: absolute; right: -5px; bottom: -3px; width: 25px; height: 25px; border-radius: 50%;
  font-size: 0.95rem; line-height: 21px; text-align: center; font-weight: 900; color: var(--ink);
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fbefdc) padding-box, var(--rim) border-box;
  box-shadow: 0 2px 4px rgba(122, 52, 82, 0.3);
}
.ws-bubble {
  position: relative; flex: none; width: var(--bubble); height: calc(var(--bubble) - 4px); margin-left: 9px;
  display: flex; align-items: center; justify-content: center; border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #fdf5ec);
  box-shadow: 0 3px 8px rgba(122, 52, 82, 0.25), inset 0 -2px 0 rgba(200, 160, 170, 0.25);
}
.ws-bubble::before {   /* хвостик к портрету */
  content: ''; position: absolute; left: -7px; top: 50%; margin-top: -7px; width: 0; height: 0;
  border-style: solid; border-width: 7px 8px 7px 0; border-color: transparent #fff transparent transparent;
}
.ws-bubble .ws-gem { width: calc(var(--bubble) - 10px); height: calc(var(--bubble) - 10px); }

.ws-card.is-empty { opacity: 0.55; cursor: default; }
.ws-card.is-empty .ws-face { background: rgba(255, 250, 241, 0.5); box-shadow: inset 0 0 0 3px rgba(232, 182, 74, 0.6); filter: none; }
.ws-card.is-empty .ws-bubble { background: rgba(255, 250, 241, 0.45); box-shadow: none; }
.ws-card.is-empty .ws-bubble::before { border-right-color: rgba(255, 250, 241, 0.45); }

.ws-card.is-done .ws-bubble { animation: wsDone 0.42s ease-out forwards; }
.ws-card.is-done .ws-bubble::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat,
    radial-gradient(circle at 35% 30%, #a8ea74, #4fb83a 55%, #2c8a22);
  box-shadow: 0 0 0 2.5px #fff1b5, 0 3px 8px rgba(30, 90, 30, 0.45);
  animation: wsStamp 0.32s cubic-bezier(.2, 1.6, .5, 1) both;
}
@keyframes wsDone { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes wsStamp { 0% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.ws-card.is-enter { animation: wsEnter 0.34s cubic-bezier(.2, 1.4, .5, 1) both; }
@keyframes wsEnter { 0% { transform: translateY(-12px) scale(0.85); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ws-card.is-waiting-ready .ws-bubble { box-shadow: 0 0 0 2.5px #ffd85a, 0 0 16px rgba(255, 200, 70, 0.9); }

/* джекпот — золотой пузырь с ореолом и ценой */
.ws-card.is-gold .ws-bubble {
  background: radial-gradient(ellipse at 50% 35%, #fffbe6, #ffe48a 60%, #f2b93a);
  box-shadow: 0 0 0 2px #fff1b5, 0 0 16px rgba(255, 200, 60, 0.9);
  animation: wsGoldGlow 1.6s ease-in-out infinite alternate;
}
.ws-card.is-gold .ws-bubble::before { border-right-color: #ffe48a; }
.ws-card.is-gold.is-done .ws-bubble { animation: wsDone 0.42s ease-out forwards; }
@keyframes wsGoldGlow { from { filter: brightness(1); } to { filter: brightness(1.12); } }
.ws-card-tag {
  position: absolute; right: -6px; top: -8px; display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 6px 1px 3px; border-radius: 9px; font-size: 0.75rem; font-weight: 900; color: var(--ink); white-space: nowrap;
  background: #fff; box-shadow: 0 0 0 1.5px #e8b64a, 0 2px 4px rgba(122, 52, 82, 0.3);
}
.ws-card-tag .ws-coin-ico { width: 13px; height: 13px; }

/* срочный заказ — красный кружок с остатком ходов */
.ws-ribbon {
  position: absolute; left: -6px; top: -8px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px;
  font-size: 0.85rem; line-height: 24px; font-weight: 900; color: #fff; text-align: center; white-space: nowrap;
  background: linear-gradient(180deg, #ff6f6f, #d6213b); box-shadow: 0 0 0 2px #fff1b5, 0 2px 5px rgba(150, 20, 40, 0.45);
}
.ws-ribbon.is-hot { animation: wsHot 0.6s ease-in-out infinite alternate; }
.ws-ribbon.is-late { background: linear-gradient(180deg, #b9a7ad, #8c7a80); animation: none; }
@keyframes wsHot { from { transform: scale(1); } to { transform: scale(1.16); filter: brightness(1.2); } }

/* ключ от запертой пробирки */
.ws-key {
  position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; padding: 4px;
  color: #7a4f12; background: radial-gradient(circle at 35% 30%, #fff8cf, #ffd64a 45%, #d99a1c);
  box-shadow: 0 0 0 2px #fff, 0 2px 5px rgba(122, 52, 82, 0.4);
}
.ws-key svg { display: block; width: 100%; height: 100%; }
.ws-card.is-flag .ws-bubble { animation: wsFlag 0.9s ease-in-out 2; }
@keyframes wsFlag { 0%, 100% { box-shadow: 0 3px 8px rgba(122, 52, 82, 0.25); } 50% { box-shadow: 0 0 0 3px #ffd85a, 0 0 18px rgba(255, 200, 70, 0.95); } }

/* очередь: следующие заказы маленькими жетонами */
.ws-queue {
  display: flex; align-items: center; gap: 4px; min-height: 26px; padding: 2px 8px 2px 6px; border-radius: 14px;
  background: rgba(255, 250, 241, 0.6);
}
.ws-queue::before {
  content: ''; width: 10px; height: 12px; margin-right: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 1.5l5 4.5-5 4.5' fill='none' stroke='%237b3f6c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scaleX(-1);
}
.ws-queue.is-empty { visibility: hidden; }
.ws-queue-items { display: flex; gap: 4px; align-items: center; }
.ws-queue-item {
  position: relative; width: 22px; height: 22px; border-radius: 50%; padding: 2px;
  background: #fff; box-shadow: 0 0 0 1.5px rgba(232, 182, 74, 0.8), 0 1px 3px rgba(122, 52, 82, 0.3);
}
.ws-queue-item .ws-gem { width: 100%; height: 100%; filter: none; }
.ws-queue-item.is-gold { box-shadow: 0 0 0 1.5px #ffd85a, 0 0 8px rgba(255, 200, 60, 0.9); }
.ws-queue-item.is-urgent { box-shadow: 0 0 0 2px #e0405a; }
.ws-queue-item .ws-key { top: -5px; right: -7px; width: 14px; height: 14px; padding: 2px; box-shadow: 0 0 0 1px #fff; }
.ws-queue-more { font-size: 0.82rem; font-weight: 900; color: var(--plum); }

/* тупик: короткая плашка с одной кнопкой. Встаёт на место полоски «следующие» (она на это время
   прячется): высотой с полоску и зазор над ней, вниз — на 1 px, чтобы не задеть даже поднятую
   пробирку верхнего ряда. Высота поля и ряды от плашки не зависят (G1). В поток экрана не входит,
   поэтому без transform-центровки (у .bump — свой). */
.ws-rescue {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3;
  width: max-content; max-width: 100%; height: 30px; margin: 0 auto; padding: 0 1px 0 14px;
  display: flex; align-items: center; gap: 8px; justify-content: center;
  border-radius: 999px; color: var(--plum); font-size: 1rem; font-weight: 900; white-space: nowrap;
  background: rgba(255, 250, 241, 0.97); box-shadow: 0 0 0 2px #e8b64a, var(--shadow);
}
.ws-orders-panel.has-rescue .ws-queue { visibility: hidden; }
.ws-rescue .ws-btn { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 16px; font-size: 1rem; }
.ws-rescue .ws-btn svg { width: 18px; height: 18px; filter: drop-shadow(0 1.5px 0 rgba(30, 100, 30, 0.75)); }
.ws-rescue.pulse, .ws-rescue.bump { animation: wsBump 0.5s ease-out; }

.ws-board-wrap { position: relative; flex: 1 1 auto; min-height: 120px; margin: 0 -6px; overflow: hidden; }
#board-canvas { position: absolute; left: 0; top: 0; display: block; touch-action: none; }

/* низ: три круглые кнопки без подписей; у подсказки — цена */
.ws-actions { flex: none; display: flex; justify-content: center; align-items: center; gap: 30px; padding: 4px 0 12px; }
.ws-action { position: relative; display: flex; }
.ws-price {
  position: absolute; right: -10px; bottom: -4px; display: inline-flex; align-items: center; gap: 2px;
  height: 24px; padding: 0 7px 0 4px; border-radius: 12px; pointer-events: none;
  font-size: 0.9rem; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums;
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fbefdc) padding-box, var(--rim) border-box;
  box-shadow: 0 2px 4px rgba(122, 52, 82, 0.3);
}
.ws-price::before {
  content: ''; width: 15px; height: 15px;
  background: url(workshop_assets/ui_coin.webp) center / contain no-repeat;
}
.ws-price:empty { display: none; }

.ws-fx-top, .ws-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 25; }
.ws-confetti { z-index: 30; }

.ws-toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); transform: translateX(-50%);
  max-width: min(92vw, 420px); padding: 9px 18px; border-radius: 999px; z-index: 26; white-space: nowrap;
  color: var(--ink); font-size: 1.05rem; font-weight: 900; text-align: center;
  background: rgba(255, 250, 241, 0.97); box-shadow: 0 0 0 2.5px #e8b64a, var(--shadow);
  margin-bottom: var(--ws-banner-h, 0px);   /* над баннером при любой высоте из медиа-запросов */
  animation: wsToast 0.22s cubic-bezier(.2, 1.4, .5, 1);
}
.ws-toast.is-tight { padding: 6px 12px; font-size: 0.88rem; line-height: 1.2; border-radius: 16px; }   /* узкий верхний ряд (320 px) */
@keyframes wsToast { from { transform: translate(-50%, 8px) scale(0.9); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

/* ---------- окна: победа (образ 02), «ходы кончились», карточки ---------- */
.ws-win {
  position: fixed; inset: 0; z-index: 20; display: flex; padding: 16px; overflow-x: hidden; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 45%, rgba(110, 40, 80, 0.32), rgba(70, 20, 50, 0.6));
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: wsFade 0.3s ease-out;
}
@keyframes wsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wsPop { from { transform: scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
.ws-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ws-win-title { font-size: 1.7rem; line-height: 1.12; font-weight: 900; color: var(--plum); }
.ws-win-text { font-size: 1.05rem; line-height: 1.35; color: var(--ink-soft); }
.ws-win-row { display: flex; gap: 22px; justify-content: center; }

/* победа: светлая дымка поверх уровня, лучи за изделием */
.ws-celebrate {
  padding: 0;
  background: radial-gradient(ellipse 80% 52% at 50% 47%, rgba(255, 248, 230, 0.72), rgba(252, 214, 226, 0.5) 58%, rgba(122, 48, 94, 0.5) 100%);
  -webkit-backdrop-filter: blur(3px) saturate(1.05); backdrop-filter: blur(3px) saturate(1.05);
}
.ws-celebrate .ws-win-box {
  position: relative; width: 100%; max-width: 520px; min-height: 100%; margin: 0 auto; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--win-top, 108px) 12px calc(env(safe-area-inset-bottom, 0px) + 14px);
}
/* сверху и снизу лучи режутся (иначе лёжа появляется прокрутка), а по бокам — нет:
   на широком экране героиня и лучи выходят за коробку, по краю экрана режет само окно */
@supports (overflow: clip) { .ws-celebrate .ws-win-box { overflow: visible clip; } }
.ws-win-bank { position: fixed; top: var(--bank-t, 10px); right: var(--bank-r, 10px); z-index: 2; pointer-events: none; }
.ws-win-bank.bump { animation: wsCoinBump 0.3s ease-out; }
.ws-win-pay {
  position: fixed; z-index: 2; top: calc(var(--bank-b, 52px) + 2px); right: var(--bank-r, 10px); pointer-events: none;
  font-size: 2.5rem; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; color: #ffd23a;
  -webkit-text-stroke: 2px #a8640e; paint-order: stroke fill;
  text-shadow: 0 3px 0 #8a4f0c, 0 0 14px rgba(255, 220, 120, 0.9);
  animation: wsPop 0.4s cubic-bezier(.2, 1.6, .5, 1) 0.9s both;
}
.ws-win-pay.bump { animation: wsCoinBump 0.32s ease-out; }
.ws-win-stars {
  position: relative; z-index: 1;   /* над сиянием сцены: лёжа оно доходит до звёзд */
  flex: none; display: flex; align-items: flex-end; justify-content: center; gap: 0;
  filter: drop-shadow(0 5px 6px rgba(150, 70, 20, 0.35));
}
.ws-win-stars i { display: block; width: 84px; height: 84px; }
.ws-win-stars i:nth-child(2) { width: 108px; height: 108px; margin: 0 -4px 16px; }
.ws-win-stars i::before {
  content: ''; display: block; width: 100%; height: 100%;
  background: url(workshop_assets/ui_star_off.webp) center / contain no-repeat;
}
.ws-win-stars i.on::before { background-image: url(workshop_assets/ui_star.webp); }
.ws-win-stars i:first-child::before { transform: rotate(-14deg); }
.ws-win-stars i:last-child::before { transform: rotate(14deg); }
.ws-win-stars i.on { animation: wsStarPop 0.46s cubic-bezier(.2, 1.8, .5, 1) both; }
@keyframes wsStarPop { 0% { transform: scale(2.4) rotate(-30deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ws-win-stage {
  position: relative; flex: 1 1 auto; width: 100%; min-height: 150px;
  display: flex; align-items: center; justify-content: center;
}
.ws-win-stage::before {   /* сияние */
  content: ''; position: absolute; left: 50%; top: 50%; width: 125%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 253, 240, 0.98) 0%, rgba(255, 238, 196, 0.7) 26%, rgba(255, 226, 200, 0) 60%);
  pointer-events: none;
}
.ws-win-rays {
  position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 244, 205, 0.6) 0deg 7deg, rgba(255, 244, 205, 0) 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 14%, transparent 56%); mask: radial-gradient(circle, #000 14%, transparent 56%);
  animation: wsSpin 26s linear infinite;
}
@keyframes wsSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.ws-win-jewel { position: relative; display: block; width: min(100%, 430px); height: clamp(150px, 40vh, 330px); animation: wsJewelIn 0.6s cubic-bezier(.2, 1.4, .5, 1) both; }
@keyframes wsJewelIn { 0% { transform: scale(0.6) translateY(20px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ws-coll {
  flex: none; display: flex; align-items: center; justify-content: center; margin: 2px 0 6px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 250, 241, 0.78); box-shadow: 0 0 0 2px rgba(232, 182, 74, 0.7), 0 3px 8px rgba(122, 52, 82, 0.2);
}
.ws-coll-dots { display: flex; gap: 8px; }
.ws-coll-dots i, .ws-lose-dots i {
  width: 16px; height: 16px; border-radius: 50%; display: block;
  background: rgba(123, 63, 108, 0.16); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.ws-coll-dots i.on, .ws-lose-dots i.on { background: radial-gradient(circle at 35% 30%, #fff8cf, #ffd64a 45%, #d99a1c); box-shadow: 0 0 0 1px #b9791c; }
.ws-coll-dots i.is-new { animation: wsStarPop 0.5s cubic-bezier(.2, 1.8, .5, 1) 1.3s both; }
.ws-win-foot {
  flex: none; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; margin-top: auto;
}
.ws-win-foot #btn-next { grid-column: 2; z-index: 1; }
/* заказчица в рост в левом нижнем углу, как на концепте 02: кнопка немного заходит на неё */
.ws-win-hero {
  --hero-h: clamp(140px, 33vh, 300px); --hero-s: 1; --hero-k: 0.43;
  position: absolute; left: -6px; bottom: 0; z-index: 0;
  height: calc(var(--hero-h) * var(--hero-s)); width: calc(var(--hero-h) * var(--hero-s) * var(--hero-k));
  background: var(--hero) 0 100% / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(90, 30, 50, 0.3));
  transform-origin: 50% 100%; animation: wsCheer 1.8s ease-in-out infinite;
}
.ws-win-hero.h-curly { --hero: url(workshop_assets/hero_curly.webp); --hero-k: 0.428; }
.ws-win-hero.h-bride { --hero: url(workshop_assets/hero_bride.webp); --hero-k: 0.545; }
.ws-win-hero.h-grandma { --hero: url(workshop_assets/hero_grandma.webp); --hero-k: 0.735; --hero-s: 0.66; }   /* по пояс */
.ws-win-jewel, .ws-coll { position: relative; z-index: 1; }
.ws-heart {
  position: absolute; right: -6px; top: 2px; width: 34px; height: 34px;
  fill: #ff5f8f; stroke: #fff; stroke-width: 1.8; filter: drop-shadow(0 2px 2px rgba(122, 52, 82, 0.35));
  animation: wsHeart 0.9s ease-in-out infinite alternate;
}
@keyframes wsCheer { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: translateY(-5px) rotate(1.5deg); } }
@keyframes wsHeart { from { transform: scale(0.9); } to { transform: scale(1.12) rotate(8deg); } }
.ws-win-side { grid-column: 3; position: relative; z-index: 1; justify-self: end; display: flex; flex-direction: column; gap: 10px; }
.ws-win-side .ws-round { width: 62px; height: 62px; color: #b0566e; }

/* главная зелёная кнопка-пилюля со значком */
.ws-play {   /* картинка ui_green: концы по половине высоты кнопки, середина тянется */
  --ph: 74px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: min(54vw, 236px); height: var(--ph); padding: 0 18px; border-radius: 999px;
  color: #fff; font-size: 1.7rem; font-weight: 900; font-variant-numeric: tabular-nums;
  border: 0 solid transparent; border-image: url(workshop_assets/ui_green.webp) 0 70 fill / 0 calc(var(--ph) / 2) stretch;
  background: none;
  filter: drop-shadow(0 5px 6px rgba(40, 90, 30, 0.35));
  text-shadow: 0 2px 0 rgba(30, 100, 30, 0.8);
  transition: transform 0.1s ease, filter 0.15s ease;
}
.ws-play:active { transform: translateY(1px) scale(0.97); }
.ws-play[disabled] { filter: grayscale(0.75) brightness(0.92) drop-shadow(0 5px 6px rgba(40, 90, 30, 0.35)); cursor: default; }
.ws-play > svg { position: relative; z-index: 1; width: 44px; height: 44px; filter: drop-shadow(0 2px 0 rgba(30, 100, 30, 0.75)); }
#btn-next .i-chest, #btn-next .i-menu { display: none; }
#btn-next[data-mode="chest"] .i-next, #btn-next[data-mode="menu"] .i-next { display: none; }
#btn-next[data-mode="chest"] .i-chest, #btn-next[data-mode="menu"] .i-menu { display: block; }
#btn-next.is-chest { animation: wsChestPulse 1.1s ease-in-out infinite alternate; }
@keyframes wsChestPulse {
  from { filter: brightness(1) drop-shadow(0 5px 6px rgba(40, 90, 30, 0.35)); }
  to { filter: brightness(1.12) drop-shadow(0 0 12px rgba(255, 210, 90, 0.95)); }
}

/* «ходы кончились» и карточки «Новое!», «Сложный заказ», шкатулка */
.ws-lose .ws-win-box, .ws-modal .ws-win-box {
  position: relative; width: min(100%, 340px); margin: auto; padding: 22px 20px 20px; border-radius: 28px; text-align: center; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  border: 4px solid transparent;
  background: radial-gradient(ellipse 90% 60% at 50% 22%, #fffdf8, #fff5e8 55%, #f7e2cc) padding-box, var(--rim) border-box;
  box-shadow: 0 18px 40px rgba(90, 20, 60, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.6);
  animation: wsPop 0.38s cubic-bezier(.2, 1.4, .5, 1);
}
.ws-lose { padding-top: 62px; }
.ws-lose .ws-win-box { padding-top: 54px; }
.ws-lose-badge {
  position: absolute; left: 50%; top: -46px; width: 92px; height: 92px; margin-left: -46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 4px solid transparent;
  background: radial-gradient(circle at 40% 30%, #ffffff, #fde9ef 55%, #f3c6d2) padding-box, var(--rim) border-box;
  box-shadow: 0 6px 14px rgba(122, 52, 82, 0.35);
}
.ws-lose-badge svg { width: 62%; height: 62%; animation: wsTip 2.4s ease-in-out infinite; }
@keyframes wsTip { 0%, 70% { transform: rotate(0deg); } 85%, 100% { transform: rotate(180deg); } }
.ws-lose .ws-win-title { color: #c2334f; }
.ws-lose-dots { display: flex; gap: 8px; }
.ws-more { --ph: 70px; width: min(100%, 250px); justify-content: space-between; padding: 0 12px 0 18px; margin-top: 4px; }
.ws-more-moves { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; font-size: 1.9rem; }
.ws-more-moves svg { width: 34px; height: 34px; filter: drop-shadow(0 2px 0 rgba(30, 100, 30, 0.75)); }
.ws-more-price {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 12px 0 6px; border-radius: 999px;
  font-size: 1.25rem; color: var(--ink); text-shadow: none;
  background: linear-gradient(180deg, #ffffff, #fbeeda); box-shadow: inset 0 0 0 2px rgba(232, 182, 74, 0.9);
}
.ws-more-price .ws-coin-ico { width: 26px; height: 26px; }
.ws-lose .ws-win-row { margin-top: 4px; }
.ws-modal { z-index: 22; padding-top: 40px; }
.ws-modal .ws-win-box { padding-top: 30px; }
.ws-modal .ws-win-kicker {
  position: absolute; left: 50%; top: -22px; transform: translateX(-50%); max-width: 92%; padding: 8px 22px; border-radius: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 1.05rem; font-weight: 900; color: #fff; letter-spacing: 0.02em; text-shadow: 0 2px 0 rgba(150, 30, 70, 0.6);
  border: 3px solid transparent;
  background: linear-gradient(180deg, #ff9dbd, #f0618f 55%, #d63f73) padding-box, var(--rim) border-box;
  box-shadow: 0 4px 10px rgba(122, 52, 82, 0.35);
}
.ws-modal-art { width: 280px; max-width: 100%; height: 120px; display: block; }
.ws-modal-pic { display: flex; justify-content: center; }
.ws-chest-big { position: relative; margin: 6px 0 0; width: 150px; height: 150px; }
.ws-chest-big::before, .ws-chest-big.is-open::before { left: 0; right: 0; height: 100%; }
.ws-chest-prize {   /* образец нового убранства поднимается из шкатулки */
  position: absolute; z-index: 1; left: 50%; top: 14%; width: 50px; height: 50px; margin-left: -25px; border-radius: 50%;
  box-shadow: 0 0 0 3px #fff6d8, 0 0 0 5px #e8b64a, 0 0 22px 8px rgba(255, 226, 120, 0.9), inset 0 -4px 6px rgba(0, 0, 0, 0.3);
  animation: wsPrize 0.9s cubic-bezier(.2, 1.4, .5, 1) 0.15s both;
}
@keyframes wsPrize { from { transform: translateY(40px) scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
.ws-modal .ws-win-text.is-coins { display: inline-flex; align-items: center; gap: 8px; font-size: 2rem; font-weight: 900; color: var(--ink); line-height: 1; }
.ws-win-text.is-coins .ws-coin-ico { width: 34px; height: 34px; }
#btn-modal-ok.is-icon { display: inline-flex; align-items: center; justify-content: center; height: 62px; padding: 0 30px; }
#btn-modal-ok.is-icon svg { width: 38px; height: 38px; filter: drop-shadow(0 2px 0 rgba(30, 100, 30, 0.75)); }
.ws-modal .ws-win-text { max-width: 290px; }
.ws-modal .ws-btn-primary { min-width: 180px; margin-top: 4px; }

.build-badge {
  position: fixed; right: 4px; bottom: 1px; z-index: 40; pointer-events: none;
  font: 9px/1 ui-monospace, monospace; color: rgba(91, 51, 38, 0.45);
}

/* ---------- убранство: бархатный коврик под стойками ----------
   Цвета — из таблицы DECOR (workshop.js, applyDecor): --ws-cloth-1..3 и кант --ws-cloth-rim. */
body.has-cloth .ws-board-wrap {
  border-radius: 26px;
  background: radial-gradient(ellipse 80% 72% at 50% 42%, var(--ws-cloth-1) 0%, var(--ws-cloth-2) 55%, var(--ws-cloth-3) 100%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4), inset 0 0 0 3px var(--ws-cloth-rim, rgba(255, 220, 130, 0.55)), 0 6px 16px rgba(122, 52, 82, 0.3);
}

/* ---------- пауза площадки (вкладка скрыта, реклама, окно оплаты): анимации стоят ---------- */
body.ws-paused .screen *, body.ws-paused .ws-win *, body.ws-paused .ws-win { animation-play-state: paused !important; }

/* ---------- видео за награду: пилюля со значком камеры (у владельца «Без рекламы» — корона) ---------- */
.ws-vbtn {
  --vh: 52px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--vh); min-width: 116px; padding: 0 20px 0 7px; border-radius: 999px;
  color: #fff; font-size: 1.35rem; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(96, 44, 120, 0.8);
  border: 3px solid transparent;
  background: linear-gradient(180deg, #e7c4f6 0%, #b986dc 46%, #8d58b0 100%) padding-box, var(--rim) border-box;
  box-shadow: 0 5px 10px rgba(96, 44, 120, 0.35), inset 0 2px 3px rgba(255, 255, 255, 0.55);
  transition: transform 0.1s ease, filter 0.15s ease;
}
.ws-vbtn:active { transform: translateY(1px) scale(0.96); }
.ws-vbtn[disabled] { filter: grayscale(0.7) brightness(0.95); cursor: default; }
.ws-vid {
  flex: none; display: block; width: calc(var(--vh) - 12px); height: calc(var(--vh) - 12px);
  background: url(workshop_assets/ui_video.webp) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(70, 20, 90, 0.35));
}
body.is-owner .ws-vid { background-image: url(workshop_assets/ui_crown.webp); }
.ws-win-extra {
  position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 2px 0 8px;
}
.ws-win-extra #btn-win-noads { width: 58px; height: 58px; }
.ws-lose .ws-vbtn { --vh: 56px; min-width: 190px; }
/* подсказка за видео, когда монет не хватает: значок камеры вместо цены */
.ws-price.is-video { display: inline-flex; width: 32px; height: 32px; padding: 0; right: -12px; bottom: -8px; border-radius: 50%; border: 0; box-shadow: none;
  background: url(workshop_assets/ui_video.webp) center / contain no-repeat; filter: drop-shadow(0 2px 2px rgba(70, 20, 90, 0.4)); }
.ws-price.is-video::before { display: none; }
body.is-owner .ws-price.is-video { background-image: url(workshop_assets/ui_crown.webp); }

/* крестик закрытия окна без подписи */
.ws-x {
  position: absolute; right: -12px; top: -12px; z-index: 2; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: url(workshop_assets/ui_close.webp) center / contain no-repeat;
  filter: drop-shadow(0 3px 3px rgba(122, 52, 82, 0.35));
}
.ws-x:active { transform: scale(0.94); }

/* ---------- «Без рекламы»: три карточки-кнопки ---------- */
.ws-noads .ws-win-box { width: min(100%, 384px); padding: 34px 12px 14px; gap: 8px; }
.ws-tariffs { width: 100%; display: flex; justify-content: center; align-items: flex-end; gap: 8px; padding-top: 10px; }
.ws-tariff {
  position: relative; flex: 1 1 0; max-width: 114px; aspect-ratio: 140 / 192; padding: 10px 4px 9px; border: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  color: var(--plum); background: url(workshop_assets/ui_card.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 6px rgba(122, 52, 82, 0.3));
  transition: transform 0.1s ease;
}
.ws-tariff:active { transform: scale(0.96); }
.ws-tariff[disabled] { filter: grayscale(0.6); }
.ws-tariff.is-best { transform: translateY(-6px); padding-top: 19px; }   /* срок — под лентой «Выгодно» */
.ws-tariff.is-best:active { transform: translateY(-5px) scale(0.96); }
.ws-tariff-days { font-size: 1.15rem; font-weight: 900; line-height: 1; white-space: nowrap; }
.ws-tariff-pic { flex: 1 1 auto; width: 74%; min-height: 0; margin: 4px 0; background: url(workshop_assets/ui_noads.webp) center / contain no-repeat; }
.ws-tariff.is-royal .ws-tariff-pic { background-image: url(workshop_assets/ui_crown.webp); }
.ws-tariff-price {
  display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 10px; border-radius: 999px;
  font-size: 1.15rem; font-weight: 900; color: #fff; text-shadow: 0 1px 0 rgba(30, 100, 30, 0.8);
  background: linear-gradient(180deg, #8fe06a, #4fb33a 60%, #3a922a); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45), 0 2px 3px rgba(40, 90, 30, 0.35);
}
.ws-tariff-price small { font-size: 0.78rem; font-weight: 800; }
.ws-tariff-ribbon {
  position: absolute; left: 50%; top: -15px; width: 112%; height: 32px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; padding-bottom: 3px;
  font-size: 0.82rem; font-weight: 900; color: #fff; text-shadow: 0 1px 0 rgba(150, 30, 70, 0.7); white-space: nowrap;
  background: url(workshop_assets/ui_ribbon.webp) center / 100% 100% no-repeat;
}
.ws-noads-note { font-size: 0.95rem; font-weight: 800; color: var(--plum); }
.ws-noads-legal { display: flex; gap: 8px; justify-content: center; font-size: 0.78rem; color: var(--ink-soft); }
.ws-noads-legal a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; padding: 4px 2px; }

/* ---------- «Спасибо!» после покупки ---------- */
.ws-thanks-pic { width: 112px; height: 96px; background: url(workshop_assets/ui_crown.webp) center / contain no-repeat;
  filter: drop-shadow(0 0 14px rgba(255, 214, 90, 0.85)); animation: wsPop 0.5s cubic-bezier(.2, 1.6, .5, 1) both; }
.ws-thanks-pic.is-heart { background-image: url(workshop_assets/ui_heart.webp); filter: drop-shadow(0 0 12px rgba(255, 140, 180, 0.8)); }
.ws-thanks .ws-win-text { font-size: 1.2rem; font-weight: 900; color: var(--plum); }

/* ---------- убранство: королевские вещи в окне ---------- */
.ws-decor-chip .ws-swatch.is-pic { border-radius: 0; box-shadow: none; background: center / contain no-repeat; }
.ws-decor-ico.is-pic { background: center / contain no-repeat; }
.ws-decor-crown {   /* корона: вещь из Королевского набора, ещё не куплена */
  position: absolute; right: -6px; bottom: -6px; width: 26px; height: 22px;
  background: url(workshop_assets/ui_crown.webp) center / contain no-repeat;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 2px 2px rgba(90, 30, 50, 0.35));
}
.ws-decor-chip.is-set .ws-swatch { filter: saturate(0.6); opacity: 0.6; }

/* ---------- высокий телефон: изделие на подушке крупнее ---------- */
@media (min-height: 800px) and (orientation: portrait) {
  .ws-header { height: 108px; grid-template-columns: 96px 1fr 96px; }
  .ws-stage { height: 100px; background-size: auto 80px; }
  .ws-piece { width: min(100%, 196px); height: 84px; top: -2px; }
}

/* ---------- низкий телефон ---------- */
@media (max-height: 700px) and (orientation: portrait) {
  .ws-header { height: 80px; padding-top: 6px; grid-template-columns: 92px 1fr 92px; }
  .ws-stage { height: 74px; background-size: auto 54px; }
  .ws-piece { height: 62px; width: min(100%, 150px); }
  .ws-round-cream { width: 42px; height: 42px; }
  .ws-coins { --ch: 34px; padding: 0 12px 0 36px; font-size: 1.08rem; }
  .ws-coins .ws-coin-ico { width: 38px; height: 38px; margin-top: -19px; }
  .ws-stars i { width: 19px; height: 19px; }
  .ws-orders { --face: 58px; --bubble: 48px; }
  .ws-orders[data-n="3"] { --face: 50px; --bubble: 42px; }
  .ws-round { width: 54px; height: 54px; }
  .ws-actions { gap: 26px; padding-bottom: 9px; }
  .ws-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); }
  .ws-win-stars i { width: 70px; height: 70px; }
  .ws-win-stars i:nth-child(2) { width: 90px; height: 90px; margin-bottom: 12px; }
  .ws-win-side .ws-round { width: 56px; height: 56px; }
  .ws-play { --ph: 66px; }
  .ws-vbtn { --vh: 48px; }
  .ws-win-extra { margin-bottom: 4px; }
}
/* ---------- совсем низкий экран уровня (360×640 с баннером: над ним 584 px) ----------
   Медиазапрос не знает высоты баннера, поэтому меряется сам экран уровня: верх, заказчицы
   и кнопки чуть плотнее, чтобы поле осталось не меньше 60 % высоты над баннером. */
#screen-workshop { container: ws-game / size; }
@container ws-game (max-height: 600px) and (max-width: 600px) and (orientation: portrait) {
  .ws-header { height: 74px; padding-top: 4px; }
  .ws-head-side { gap: 3px; }
  .ws-stage { height: 66px; background-size: auto 48px; }
  .ws-piece { height: 56px; width: min(100%, 138px); }
  .ws-orders { --face: 52px; --bubble: 44px; }
  .ws-orders[data-n="3"] { --face: 48px; --bubble: 40px; }
  .ws-actions .ws-round { width: 50px; height: 50px; }
  .ws-actions { padding: 2px 0 7px; }
  .ws-price.is-video { bottom: -5px; }   /* значок видео у подсказки (монет < 25) не заходит на баннер (B3) */
}
@media (max-width: 380px) {
  .ws-header { grid-template-columns: 92px 1fr 92px; }
  .ws-orders[data-n="3"] { gap: 2px; --face: 48px; --bubble: 42px; }
  .ws-bubble { margin-left: 8px; }
}

/* ---------- телефон лёжа: верх и заказчицы слева, поле справа ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  .ws-root {
    max-width: none;
    display: grid; grid-template-columns: minmax(270px, 40%) 1fr;
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 12px;
  }
  .ws-header { grid-column: 1; grid-row: 1; height: 74px; padding-top: 4px; grid-template-columns: 84px 1fr 96px; }
  .ws-stage { height: 68px; background-size: auto 46px; }
  .ws-piece { height: 54px; width: min(100%, 124px); top: -2px; }
  .ws-round-cream { width: 38px; height: 38px; }
  .ws-coins { --ch: 30px; padding: 0 10px 0 32px; font-size: 1rem; }
  .ws-coins .ws-coin-ico { width: 34px; height: 34px; margin-top: -17px; }
  .ws-stars i { width: 17px; height: 17px; }
  .ws-head-side { gap: 4px; }
  .ws-orders-panel { grid-column: 1; grid-row: 2; }
  .ws-orders { --face: 50px; --bubble: 42px; }
  .ws-orders[data-n="3"] { --face: 44px; --bubble: 38px; gap: 2px; }
  .ws-queue { min-height: 22px; }
  .ws-queue-item { width: 18px; height: 18px; }
  .ws-caption { grid-column: 1; grid-row: 3; }
  .ws-rescue { bottom: -10px; font-size: 0.95rem; }
  .ws-actions { grid-column: 1; grid-row: 5; padding-bottom: 6px; gap: 22px; }
  .ws-round { width: 48px; height: 48px; }
  .ws-board-wrap { grid-column: 2; grid-row: 1 / 6; }
  .ws-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); }
  #screen-menu { background-position: 50% 58%; }   /* лёжа видны витрины, а не одна люстра */
  .ws-map-top .ws-map-knob { width: 46px; height: 46px; }
  .ws-map-foot { bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }
  .ws-map-foot .ws-map-play { --ph: 62px; width: 220px; font-size: 2rem; }
  .ws-map-foot .ws-map-play > svg { width: 38px; height: 38px; }
  #screen-menu.active ~ .ws-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
  .ws-decor { gap: 8px; }
  .ws-celebrate .ws-win-box { max-width: 640px; }
  .ws-win-stars i { width: 54px; height: 54px; }
  .ws-win-stars i:nth-child(2) { width: 68px; height: 68px; margin-bottom: 8px; }
  .ws-win-stage { min-height: 110px; }
  .ws-win-jewel { width: min(100%, 320px); height: clamp(96px, 34vh, 150px); }
  .ws-win-hero { --hero-h: clamp(120px, 40vh, 170px); }
  .ws-win-side { flex-direction: row; }
  .ws-win-side .ws-round { width: 52px; height: 52px; }
  .ws-play { --ph: 60px; width: 200px; }
  .ws-win-pay { font-size: 2rem; }
  .is-flat .ws-win-pay { top: calc(var(--bank-t, 10px) + 2px); right: calc(100vw - var(--bank-l, 300px) + 24px); }
  .ws-lose .ws-win-box, .ws-modal .ws-win-box { gap: 6px; padding-bottom: 14px; }
  .ws-modal-art { height: 70px; }
  .ws-chest-big { width: 100px; height: 100px; margin: 0; }
  .ws-chest-prize { width: 38px; height: 38px; margin-left: -19px; }
  .ws-vbtn { --vh: 46px; font-size: 1.15rem; }
  .ws-lose .ws-vbtn { --vh: 48px; }
  .ws-win-extra { margin: 0 0 4px; }
  .ws-win-extra #btn-win-noads { width: 48px; height: 48px; }
  .ws-noads .ws-win-box { width: min(100%, 360px); padding-top: 26px; gap: 4px; }
  .ws-tariff { max-width: 92px; padding: 7px 3px 6px; }
  .ws-tariff-days { font-size: 1rem; }
  .ws-tariff-price { height: 26px; font-size: 1rem; }
  .ws-thanks-pic { width: 84px; height: 64px; }
}

/* ---------- подпись уровня на низком экране (D-1) ----------
   Под кнопкой «назад» подпись «Уровень N» наезжала на портрет и корону первой заказчицы (360×640 с баннером, 320×568,
   лёжа). На низком экране вместо неё — только «N» в плашке справа от кнопки «назад»; на «Сложном заказе» там же — плашка
   ходов. Слово «Уровень» остаётся для чтения с экрана. Выше и шире — прежняя подпись под кнопкой: там заказчицы ниже. */
@media (max-height: 700px) and (orientation: portrait), (orientation: landscape) and (max-height: 520px) {
  .ws-head-side:not(.ws-head-right) { position: relative; --lv-left: 60px; --lv-top: 14px; }
  .ws-level-pill {
    position: absolute; left: var(--lv-left); top: var(--lv-top); box-sizing: border-box; min-width: 28px; height: 26px; padding: 0 7px;
    display: flex; align-items: center; justify-content: center; border-radius: 13px; font-size: 1rem; line-height: 1;
  }
  .ws-lv-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  body.is-hard .ws-moves { position: absolute; left: var(--lv-left); top: var(--lv-top); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .ws-head-side:not(.ws-head-right) { --lv-left: 54px; --lv-top: 11px; }
}

/* ---------- большой экран ---------- */
@media (min-width: 900px) and (min-height: 640px) {
  .ws-header { height: 104px; grid-template-columns: 120px 1fr 120px; }
  .ws-stage { height: 98px; background-size: auto 72px; }
  .ws-piece { width: 196px; height: 82px; }
  .ws-orders { --face: 76px; --bubble: 62px; gap: 18px; }
  .ws-orders[data-n="3"] { --face: 70px; --bubble: 58px; gap: 12px; }
  .ws-round { width: 66px; height: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- «Как играть» (модерация ВК: VK-03) и поддержка (VK-R1) ----------
   «?» на карте — кремовая круглая кнопка под монетами; на уровне — маленький значок у правого края
   полосы кнопок: полю места не берёт, слов не добавляет. Окно — карточка с розовой плашкой, крестик,
   список с картинками; на 320×568 список прокручивается внутри окна. */
.ws-map-left { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; pointer-events: none !important; }
.ws-map-left > * { pointer-events: auto; }
.ws-help-knob span, .ws-help-mini span {
  position: relative; z-index: 1; font-family: var(--font); font-weight: 900; line-height: 1; color: #7b3f6c;
  text-shadow: 0 1.5px 0 #fff;
}
.ws-map-top .ws-help-knob { width: 46px; height: 46px; margin-left: 4px; }
.ws-help-knob span { font-size: 1.65rem; }
.ws-actions { position: relative; }
.ws-help-mini {
  position: absolute; right: max(4px, env(safe-area-inset-right, 0px)); top: 50%; margin-top: -24px; width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer;
  border: 2.5px solid transparent;
  background: radial-gradient(circle at 40% 30%, #ffffff 0%, #fff6e4 45%, #f0dcbc 100%) padding-box, var(--rim) border-box;
  box-shadow: 0 2px 5px rgba(122, 52, 82, 0.3);
}
.ws-help-mini span { font-size: 1.35rem; }
.ws-help-mini:active { transform: scale(0.94); }

.ws-help .ws-win-box { width: min(100%, 400px); max-height: calc(100% - 8px); padding: 30px 10px 12px; gap: 8px; }
.ws-help-list {
  list-style: none; margin: 0; padding: 2px 6px; width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 6px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto;
  text-align: left;
}
.ws-help-list li {
  display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 4px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1.5px rgba(233, 194, 122, 0.55);
  font-size: 0.95rem; line-height: 1.25; font-weight: 800; color: var(--ink);
}
.ws-help-pic { flex: none; width: 72px; height: 48px; }
.ws-help-ico { flex: none; width: 72px; height: 44px; display: flex; align-items: center; justify-content: center; }
.ws-help-stars img { width: 24px; height: 24px; margin: 0 -1px; }
.ws-help-stars img:nth-child(2) { width: 30px; height: 30px; margin-bottom: 8px; }
.ws-help-btn svg { width: 40px; height: 40px; padding: 7px; box-sizing: border-box; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 40% 30%, #f8e8fd 0%, #dcb3ef 34%, #b07fd0 72%, #8d58b0 100%);
  box-shadow: 0 0 0 2.5px #e9c27a, 0 2px 4px rgba(122, 52, 82, 0.3); }
.ws-help-hard svg { width: 34px; height: 34px; padding: 6px; box-sizing: border-box; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #ff8a9a, #e0284f 60%, #a3123a); box-shadow: 0 0 0 2px #fff1b5, 0 2px 4px rgba(120, 20, 40, 0.4); }
.ws-help-support { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding-top: 4px;
  border-top: 1.5px dashed rgba(185, 138, 163, 0.6); }
.ws-help-legal { margin-top: 0; }
@media (max-height: 640px) {
  .ws-help-list li { font-size: 0.86rem; padding-top: 3px; padding-bottom: 3px; }
  .ws-help-pic { width: 60px; height: 40px; }
  .ws-help-ico { width: 60px; height: 38px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .ws-help { padding-top: 30px; padding-bottom: 8px; }
  .ws-help .ws-win-box { width: min(100%, 560px); padding-top: 24px; }
  .ws-help-list { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .ws-help-list li { font-size: 0.82rem; }
  .ws-help-pic { width: 54px; height: 36px; }
  .ws-help-ico { width: 54px; height: 36px; }
  .ws-help-btn svg { width: 32px; height: 32px; padding: 5px; }
  .ws-map-top .ws-help-knob { width: 40px; height: 40px; }
  .ws-help-mini { width: 36px; height: 36px; margin-top: -21px; }
}

/* Hidden tabs must not keep decorative CSS animations running. */
body.ws-background *, body.ws-background *::before, body.ws-background *::after { animation-play-state: paused !important; }