/* workshop.css — экран «Мастерской украшений» (форк game3). Цвета, кнопки,
   оверлей победы и бумажная подложка — из style.css (токены :root);
   раскладка игрового экрана своя: шапка → заказы → поле → действия. */

.ws-menu-box { max-width: min(92vw, 420px); }
.ws-menu-sub { margin: -4px 0 0; color: var(--ink-soft); font-size: 0.95rem; }
.ws-rules { margin: 0; font-size: 0.92rem; line-height: 1.4; text-align: center; color: var(--ink-soft); }
.ws-level-pick { display: flex; gap: 10px; }
.ws-level-btn {
  min-width: 0; width: 64px; padding: 8px 0; font-size: 1rem; position: relative;
}
.ws-level-btn.done::after {
  content: '✓'; position: absolute; top: -8px; right: -6px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  border: 1.5px solid var(--ink); font-size: 0.78rem; line-height: 17px;
}

/* ---- игровой экран: колонка на всю высоту, по центру на широких окнах ---- */
#screen-workshop { align-items: stretch; overflow: hidden; touch-action: none; }
.ws-root {
  position: relative; z-index: 1;
  width: 100%; max-width: 980px; margin: 0 auto; height: 100%;
  display: flex; flex-direction: column;
  padding: 0 calc(env(safe-area-inset-right, 0px) + 12px) 0 calc(env(safe-area-inset-left, 0px) + 12px);
}
.ws-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0 6px;
}
.ws-header .btn-icon { width: 44px; height: 44px; flex: none; }
.ws-level-title { font-size: 1.05rem; text-align: center; flex: 1; }

/* ---- заказы ---- */
.ws-orders-panel { display: flex; flex-direction: column; gap: 6px; }
.ws-counter { font-size: 1.15rem; font-weight: bold; text-align: center; }
.ws-counter.bump { animation: wsBump 0.5s ease-out; }
@keyframes wsBump { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }
.ws-orders { display: flex; gap: 10px; justify-content: center; }
.ws-card {
  flex: 1 1 0; max-width: 220px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 6px 6px;
  font-family: inherit; font-size: 0.85rem; color: var(--ink);
  background: var(--card); border: 2px solid var(--ink); border-radius: 12px;
  box-shadow: 3px 3px 0 var(--shadow); cursor: pointer;
  transition: transform 0.12s ease, background-color var(--transition-ms) ease, opacity var(--transition-ms) ease;
  position: relative;
}
.ws-card:active { transform: translate(2px, 2px); }
.ws-card-bead { width: 72px; height: 72px; display: block; }
.ws-card-qty { font-size: 1.15rem; font-weight: bold; line-height: 1; }
.ws-card-state { font-size: 0.74rem; color: var(--ink-soft); min-height: 1.1em; }
.ws-card.ready { background: #fff3d4; animation: wsReady 1.1s ease-in-out infinite; }
.ws-card.ready .ws-card-state { color: var(--ink); font-weight: bold; }
.ws-card.pick { outline: 4px solid var(--accent); outline-offset: 1px; animation: wsReady 0.8s ease-in-out infinite; }
@keyframes wsReady { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.ws-card.done { opacity: 0.55; background: rgba(var(--ink-rgb), 0.06); cursor: default; }
.ws-card.done .ws-card-state { color: var(--ink); font-weight: bold; }
.ws-card.done::after {
  content: '✓'; position: absolute; top: -9px; right: -7px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  border: 2px solid var(--ink); font-size: 1rem; line-height: 22px; font-weight: bold;
}
.ws-card.flash { animation: wsFlash 0.5s ease-out; }
@keyframes wsFlash { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 60% { transform: translateX(6px); } }

.ws-caption {
  min-height: 1.4em; margin: 6px 0 0; text-align: center; font-size: 0.95rem; color: var(--ink);
}
.ws-caption:empty { visibility: hidden; }

/* ---- поле ---- */
.ws-board-wrap {
  flex: 1; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 0;
}

/* ---- действия ---- */
.ws-actions { padding: 6px 0 calc(env(safe-area-inset-bottom, 0px) + 18px); }
.build-badge { left: auto; right: max(4px, env(safe-area-inset-right)); }
.ws-actions-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ws-actions .ws-small { width: 46px; height: 46px; flex: none; }
.ws-deliver {
  flex: 1 1 auto; max-width: 320px; min-width: 0; font-size: 1.2rem; padding: 14px 18px;
}
.ws-deliver.is-idle { opacity: 0.5; box-shadow: none; }
.ws-deliver.is-ready { animation: wsReady 1.1s ease-in-out infinite; }
.ws-note { margin-top: 5px; text-align: center; font-size: 0.78rem; color: var(--ink-soft); }
#btn-restart.armed { background: var(--accent); color: var(--accent-ink); }

.ws-toast { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 5; pointer-events: none; }
.ws-jewel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.ws-win-text { text-align: center; font-size: 1rem; color: var(--ink-soft); max-width: 300px; }

/* ---- широкий экран: карточки и поле крупнее ---- */
@media (min-width: 700px) and (min-height: 600px) {
  .ws-card-bead { width: 92px; height: 92px; }
  .ws-card { padding: 10px 8px 8px; font-size: 0.95rem; }
}
/* ---- невысокий телефон в портрете: карточки компактнее, больше места полю ---- */
@media (max-width: 699px) and (max-height: 700px) and (orientation: portrait) {
  .ws-card-bead { width: 52px; height: 52px; }
  .ws-card { padding: 5px 4px 4px; }
  .ws-card-qty { font-size: 1rem; }
  .ws-header { padding: 6px 0 2px; }
  .ws-header .btn-icon { width: 40px; height: 40px; }
  .ws-note { font-size: 0.72rem; margin-top: 3px; }
}
/* ---- низкое окно (телефон боком): сжать шапку/карточки ---- */
@media (max-height: 560px) {
  .ws-header { padding: 4px 0 2px; }
  .ws-header .btn-icon { width: 38px; height: 38px; font-size: 1.1rem; }
  .ws-counter { font-size: 1rem; }
  .ws-card { flex-direction: row; gap: 6px; padding: 4px 8px; }
  .ws-card-bead { width: 40px; height: 40px; }
  .ws-card-qty { font-size: 1rem; }
  .ws-card-state { display: none; }
  .ws-caption { margin: 2px 0 0; font-size: 0.85rem; }
  .ws-note { display: none; }
  .ws-actions .ws-small { width: 40px; height: 40px; }
  .ws-deliver { padding: 8px 14px; font-size: 1.05rem; }
  .ws-toast { bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-card.ready, .ws-card.pick, .ws-deliver.is-ready, .ws-counter.bump, .ws-card.flash { animation: none; }
}