/* ===== BotAmulet Mini App — каркас ===== */
:root {
  --bg: #0b0b0e;
  --card-grad-top: #292e38;
  --card-grad-bottom: #0f1217;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-strong: rgba(255, 255, 255, 0.1);
  --text: #ffffff;
  --text-dim: #a6a6b2;
  --gold: #ffb826;
  --danger: #f23340;

  /* редкости амулетов */
  --common: #3399ff;
  --rare: #ffd700;
  --legendary: #ff9500;
  --mythic: #ff3333;

  --card-w: 358px;
  --radius-card: 20px;
  --radius-pill: 16px;

  --header-h: 95px;
  --tabbar-h: 96px;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  height: var(--tg-viewport-stable-height, 100vh);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* Центрируем «телефонный кадр»: на широком/высоком ПК-окне аппа не растягивается
   на всю высоту, а остаётся компактной по центру. */
body { display: flex; align-items: center; justify-content: center; }

.app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: min(100%, 780px);
  max-width: 430px;
}

/* ===== Шапка и таб-бар (оболочка поверх книги) ===== */
/* Пустые подложки держат высоту для экранов в старой вёрстке (админка). */
.app-header { flex: 0 0 auto; height: 78px; }
.tab-bar { flex: 0 0 auto; height: 80px; }
.shell { z-index: 2; pointer-events: none; }
.shell .stage { background: none; pointer-events: none; }
.shell .stage > * { pointer-events: auto; }
.shell__plate { display: block; }
.shell__ava {
  position: absolute; left: 6.6%; top: 18%; width: 24.6%; height: 66%; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: calc(24 * var(--u)); color: #3b2a1a; font-weight: 700;
}
.shell__ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shell__name {
  position: absolute; left: 37%; right: 8%; top: 34%; height: 25%; display: flex; align-items: flex-end;
  color: #3b2a1a; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shell__balance, .shell__rating {
  position: absolute; top: 66%; height: 28%; display: flex; align-items: center; color: #3b2a1a; font-weight: 700; line-height: 1; white-space: nowrap;
}
.shell__balance { left: 46%; right: 36%; }
.shell__rating { left: 79%; right: 3%; }
.shell__btn:active, .shell__plate:active { filter: brightness(0.92); }
.shell__dot, .shell__tab-dot { pointer-events: none; }
.shell__tab-dot { position: absolute; right: -4%; top: -4%; width: 26%; height: 24%; }
.tab { transition: transform 0.15s, filter 0.15s; }
.tab.is-active { transform: translateY(-4px) scale(1.08); filter: drop-shadow(0 0 7px rgba(255, 233, 168, 0.95)) brightness(1.06); }

/* ===== Контент ===== */
.app-main {
  flex: 1 1 auto;
  min-height: 0;              /* чтобы содержимое могло ужиматься, а не переполнять */
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 8px 16px 4px;
  overflow: hidden;
}

/* карточка экрана */
.card {
  position: relative;
  width: 100%;
  max-width: var(--card-w);
  margin: 0 auto;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--card-grad-top), var(--card-grad-bottom));
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card__title { font-size: 34px; font-weight: 800; text-align: center; letter-spacing: -0.5px; }
.card__subtitle {
  font-size: 15px; font-weight: 700; color: var(--text-dim);
  text-align: center; margin-top: 10px; line-height: 1.35;
}
.card__body {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  min-height: 0;
}
.card__footer { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; }

/* заглушка «в разработке» */
.stub {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--text-dim); text-align: center;
}
.stub__emoji { font-size: 44px; }
.stub__note { font-size: 14px; }

/* кнопки */
.btn {
  border: none; cursor: pointer;
  border-radius: 0;
  padding: 13px 18px;
  font-family: 'Kurale', Georgia, serif; font-size: 16px; font-weight: 400;
  color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  background: url('../img/ui/btn_wood.webp') center / 100% 100% no-repeat;
}
.btn:active { filter: brightness(0.92); }
.btn:disabled { opacity: 0.55; filter: grayscale(0.3); cursor: default; }
.btn--primary, .btn--gold { background: url('../img/ui/btn_wood.webp') center / 100% 100% no-repeat; color: #fff; }
.btn--ghost { background: url('../img/ui/btn_wood.webp') center / 100% 100% no-repeat; opacity: 0.85; }
.btn--danger { background: url('../img/work/btn_red_wood.webp') center / 100% 100% no-repeat; color: #fff; }

/* ===== Результат открытия ===== */
.result {
  position: relative; flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center;
}

/* ===== Экран Инвентарь ===== */
.card--scroll { overflow-y: auto; }
/* ===== Инвентарь (SCR_Inventory) ===== */
.inv__name { display: flex; align-items: center; line-height: 1.05; font-weight: 700; color: #3b2a1a; overflow: hidden; }
.inv__storage-label { color: #5a4a35; line-height: 1; letter-spacing: 0.03em; white-space: nowrap; }
.inv__desc { color: #3b2a1a; line-height: 1.25; overflow-y: auto; scrollbar-width: none; }
.stage .inv__pic img { object-fit: contain; filter: drop-shadow(0 0 8px var(--glow, transparent)); }
.inv__chip-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #1a1a1a; font-weight: 700; line-height: 1; }
.inv__chip.is-unique img { filter: hue-rotate(200deg) saturate(1.2); }
.inv__level-label { color: #5a4a35; line-height: 1; margin-bottom: calc(5 * var(--u)); }
.inv__bar { display: flex; gap: calc(3 * var(--u)); height: calc(12 * var(--u)); }
.inv__seg { flex: 1 1 0; background: url('../img/inv/val_lvlbar_empty.webp') center / 100% 100% no-repeat; }
.inv__seg.is-filled { background: url('../img/inv/val_lvltrue.webp') center / 100% 100% no-repeat; }
.stage .inv__btn { position: absolute; display: block; }
.inv__btn-text {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; text-align: center; line-height: 1.1; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.inv__btn-text small { font-size: 0.78em; opacity: 0.92; }
.inv__btn:disabled { opacity: 0.55; filter: grayscale(0.3); }
.inv__btn:active:not(:disabled) { filter: brightness(0.92); }
.inv__flash { text-align: center; color: #9b2c1f; opacity: 0; transition: opacity 0.2s; pointer-events: none; line-height: 1; }
.inv__flash.is-shown { opacity: 1; }
.inv__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: calc(66.5 * var(--u)); gap: 0 calc(1.5 * var(--u));
  overflow-y: auto; scrollbar-width: none; align-content: start;
}
.inv__grid::-webkit-scrollbar { display: none; }
.inv__slot { position: relative; display: block; width: 100%; height: calc(65 * var(--u)); }
.inv__slot img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; object-fit: contain; }
.inv__slot .inv__slot-pic { width: 72%; height: 72%; }
.inv__slot.is-selected img:first-child { width: 106%; }
.inv__slot.is-unique img:last-child { filter: hue-rotate(160deg); }
.inv__msg { text-align: center; color: #3b2a1a; line-height: 1.2; }
.inv__msg--dim { color: #5a4a35; }

/* ===== Модалка лора ===== */
.lore {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.7);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.lore__box {
  position: relative; width: 100%; max-width: 340px;
  background: url('../img/ui/settings_paper.webp') center / 100% 100% no-repeat;
  padding: 44px 34px 40px;
  display: flex; flex-direction: column; gap: 14px;
  max-height: 100%; overflow-y: auto;   /* высокие модалки (выдача амулета) не вылезают за экран */
  font-family: 'Kurale', Georgia, serif; color: #3b2a1a;
}
.lore__title { font-size: 22px; font-weight: 400; padding-right: 8px; text-align: center; }
.lore__text { font-size: 14px; line-height: 1.4; color: #3b2a1a; white-space: pre-line; max-height: 40vh; overflow-y: auto; }

/* ===== «Книга» и сцена 390×700 (дизайн из PSD) ===== */
.app { position: relative; }
.stage-wrap {
  position: absolute; inset: 0; z-index: 1;
  container-type: size;
  display: grid; place-items: center;
}
.stage {
  position: relative;
  width: min(100cqw, calc(100cqh * 390 / 700));
  aspect-ratio: 390 / 700;
  container-type: inline-size;
  --u: calc(100cqw / 390);
  --ink: #3b2a1a;
  background: url('../img/book_bg.webp') center / 100% 100% no-repeat;
  font-family: 'Kurale', Georgia, serif;
  color: var(--ink);
  user-select: none;
}
.stage > * { position: absolute; }
.stage.is-wood { background-image: url('../img/wood_bg.webp'); }
.stage img { display: block; width: 100%; height: 100%; pointer-events: none; }
.stage button { border: none; background: none; padding: 0; font-family: inherit; cursor: pointer; }
.stage button:disabled { opacity: 0.6; cursor: default; }

/* ===== Лор амулета (книга) ===== */
.lorebook { position: absolute; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.7); }
.lorebook .stage-wrap { z-index: auto; }
.stage.lorebook__stage { background: none; }
.stage .lorebook__pic { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; }
.lorebook__frame.is-unique img:last-child { filter: hue-rotate(320deg) saturate(1.2); }
.lorebook__title { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; }
.lorebook__title.is-centered { align-items: center; text-align: center; }
.lorebook__label { text-align: center; letter-spacing: 0.15em; line-height: 1; color: #6b5a42; }
.lorebook__kind { margin-top: 0.25em; color: #6b5a42; }
.lorebook__text { overflow-y: auto; scrollbar-width: none; line-height: 1.3; white-space: pre-line; color: #1a120a; }
.lorebook__text::-webkit-scrollbar { display: none; }

/* ===== Обучение ===== */
.tut { position: absolute; inset: 0; z-index: 70; }
.tut__spot {
  position: absolute; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.7), 0 0 18px 6px rgba(255, 240, 200, 0.55) inset;
  transition: left 0.2s, top 0.2s, width 0.2s, height 0.2s;
}
.tut__guard { position: absolute; inset: 0; z-index: 69; pointer-events: none; }
.tut__guard-top, .tut__guard-bottom { position: absolute; left: 0; right: 0; pointer-events: auto; }
.tut__guard-top { top: 0; height: 15%; }
.tut__guard-bottom { bottom: 0; height: 13%; }
.tut__arrow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tut .stage-wrap { z-index: auto; pointer-events: none; }
.tut .stage { background: none; pointer-events: none; }
.tut .stage .tut__ok { pointer-events: auto; }
.stage .tut__text {
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  line-height: 1.25; color: #2a1c10;
}
.tut__bold { font-weight: 700; font-size: 1.15em; margin: 0.5em 0; line-height: 1.3; }
.tut__small { opacity: 0.85; }
.tut__skip {
  position: absolute; top: 8px; left: 12px; border: none; background: none; cursor: pointer;
  color: rgba(255, 255, 255, 0.45); font-family: inherit; font-size: 12px; padding: 6px;
}

/* ===== Диалог ошибки ===== */
.errorbox { position: absolute; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.7); }
.errorbox .stage-wrap { z-index: auto; }
.stage.errorbox__stage { background: none; }
.errorbox__text { text-align: center; line-height: 1.15; }
.errorbox__hint { color: #6b5a42; }

/* ===== Экран Казино ===== */
.casino__coin { perspective: 700px; }
.casino__spin { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(var(--end, 0deg)); }
.casino__spin.is-landing { animation: coinland 1.2s cubic-bezier(0.2, 0.7, 0.3, 1); }
.stage .casino__face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.stage .casino__face--back { transform: rotateY(180deg); }
.casino__coin.is-tossing { animation: cointoss 0.5s ease-in-out infinite alternate; }
@keyframes coinland {
  0% { transform: rotateY(0) translateY(-18px) scale(1.1); }
  100% { transform: rotateY(var(--end)) translateY(0) scale(1); }
}
@keyframes cointoss { from { transform: translateY(0); } to { transform: translateY(-14px); } }
.casino__coin.is-win { filter: drop-shadow(0 0 10px #33d17a); }
.casino__coin.is-lose { filter: drop-shadow(0 0 10px #c0392b); }
.casino__result { text-align: center; font-weight: 700; }
.casino__result.is-win { color: #1f7a45; }
.casino__result.is-lose { color: #9b2c1f; }
.casino__odds { color: #5a4a35; line-height: 1.2; white-space: nowrap; }
.casino__stake { display: flex; align-items: center; justify-content: center; line-height: 1; }
.casino__arrow:active { transform: scale(0.9); }
.casino__plank {
  background: url('../img/casino/btn_wood_plank.webp') center / 100% 100% no-repeat !important;
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.casino__plank:active { filter: brightness(0.9); }

/* деревянная кнопка из дизайна (btn_wood), подпись белая */
.wood-btn {
  background: url('../img/ui/btn_wood.webp') center / 100% 100% no-repeat !important;
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.wood-btn:active { filter: brightness(0.9); }
.wood-wide { background-image: url('../img/work/btn_workstart.webp') !important; }

/* ===== Экран Пригласи друга ===== */
.invite__title { text-align: center; line-height: 1.1; }
.invite__reward, .invite__count { text-align: center; line-height: 1.2; }
.invite__count { color: #5a4a35; }
.invite__msg { text-align: center; color: #5a4a35; }
.invite__bar { position: absolute; }
.invite__link-text {
  position: absolute; left: 6%; right: 6%; top: 0; bottom: 0;
  display: flex; align-items: center;
  font-size: calc(10 * var(--u)); color: #5a4a35;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.invite__copy {
  background: url('../img/invite/invite_copy_plate.webp') center / 100% 100% no-repeat !important;
  display: flex; align-items: center; justify-content: center; color: var(--ink);
}

.work-jobs {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; padding-right: 2px;
}
.work-job {
  height: 42px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid transparent; background: #1b212c; color: #c7cdd8;
  font-family: inherit; font-size: 15px; font-weight: 800;
}
.work-job.is-active { border-color: #2fd06a; color: #6cf09a; background: #10281a; }
.work-pick {
  position: relative;
  flex: 1 1 0; border: 2px solid var(--glow, rgba(255,255,255,0.12)); border-radius: 18px; cursor: pointer;
  background: rgba(255,255,255,0.03); padding: 12px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff;
}
.work-pick.is-picked { box-shadow: 0 0 0 2px var(--glow, #fff), 0 0 18px -4px var(--glow, transparent); transform: translateY(-2px); }

/* ===== Почта ===== */
.mail__scrim { background: rgba(0, 0, 0, 0.6); }
.mail__title { text-align: center; line-height: 1; }
.mail__msg { text-align: center; color: #5a4a35; }
.mail__list {
  display: flex; flex-direction: column; gap: calc(6.9 * var(--u));
  overflow-y: auto; scrollbar-width: none;
  padding: calc(8 * var(--u)) calc(14 * var(--u)) 0 calc(4.7 * var(--u));
}
.mail__list::-webkit-scrollbar { display: none; }
.stage .mail-row {
  position: relative; flex: 0 0 auto; display: block; text-align: left;
  width: calc(270.9 * var(--u)); height: calc(39.1 * var(--u)); color: var(--ink);
}
.mail-row__title {
  position: absolute; left: 4%; right: 6%; top: 0; bottom: 0;
  display: flex; align-items: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mail-row.is-unread .mail-row__title { font-weight: 700; }
.mail-row.is-selected { filter: brightness(0.92) drop-shadow(0 0 3px rgba(59, 42, 26, 0.6)); }
.mail-row__dot {
  position: absolute; right: calc(-1.6 * var(--u)); top: calc(-6.6 * var(--u));
  width: calc(17.5 * var(--u)); height: calc(16.7 * var(--u));
}

.quest.is-done .quest__bar-fill { background: #22c55e; }

/* ===== Работа: прогресс ===== */
.work__title { text-align: center; line-height: 1; }
.work__time { text-align: center; line-height: 1; color: #5a4a35; }
.work__fill { overflow: hidden; }
.work__fill img { transition: clip-path 0.9s linear; }
.stage .work__hero img { object-fit: contain; }
.work__earned { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); line-height: 1; }
.stage .work__earned img { width: auto; height: 1.3em; }
.wstart__title { display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1; }
.wstart__sub { text-align: center; color: #5a4a35; line-height: 1.2; }
.work__hint { text-align: center; color: #5a4a35; line-height: 1.2; }
.work__reward { text-align: center; line-height: 1; color: #1f7a45; }
.work__stop {
  background: url('../img/work/btn_red_wood.webp') center / 100% 100% no-repeat !important;
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.work__stop:active { filter: brightness(0.9); }

/* ===== Сражения: Battle Pick / ожидание (сцена) ===== */
.battle__wait-title { text-align: center; line-height: 1; }
.battle__ring img { animation: ringspin 9s linear infinite; }
@keyframes ringspin { to { transform: rotate(360deg); } }
.stage .battle__timer { text-align: right; color: #5a4a35; line-height: 1; font-weight: 400; }
.stage .battle__flash {
  text-align: center; color: #3b2a1a; opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.stage .battle__flash.is-shown { opacity: 1; }
.battle__plate-ava {
  position: absolute; left: 7%; top: 19%; width: 24%; height: 63%;
  display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%;
  font-size: calc(22 * var(--u)); color: var(--ink);
}
.battle__plate-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.battle__plate-name {
  position: absolute; left: 37%; right: 7%; top: 36%; height: 24%;
  display: flex; align-items: flex-end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1;
}
.battle__plate-rating {
  position: absolute; left: 47%; right: 7%; top: 66%; height: 26%;
  display: flex; align-items: center; line-height: 1; color: #5a4a35;
}
.acard { cursor: pointer; }
.acard:active { transform: scale(0.98); }
.acard__pic {
  position: absolute; left: 14%; right: 14%; top: 10%; height: 42%;
  display: flex; align-items: center; justify-content: center; font-size: calc(30 * var(--u));
}
.acard__pic img { width: 100%; height: 100%; object-fit: contain; }
.acard__name {
  position: absolute; left: 6%; right: 6%; top: 72%; text-align: center; line-height: 1.1; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.acard__chip { position: absolute; left: 27%; top: 54%; width: 46%; height: 14%; }
.stage .acard__info { position: absolute; left: 80.3%; top: 6.9%; width: 14.3%; height: 12.6%; }
.aslot { display: block; }
.aslot span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #8b7355;
}
.stage .aslot__pic { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; }
.stage .battle__timer--center { text-align: center; }

/* ===== Прочее / Кейсы / рулетка / выпавший амулет ===== */
.more__tile { display: block; }
.more__label {
  position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; color: #3b2a1a; font-weight: 700; line-height: 1;
}
.cases__chest img { object-fit: contain; }
.cases__lead { text-align: center; color: #5a4a35; line-height: 1.25; white-space: pre-line; }
.cases__info { text-align: center; color: #3b2a1a; line-height: 1; }
.cases__status { text-align: center; color: #9b2c1f; line-height: 1; }
.cases__btn { display: block; }
.cases__btn-text {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; text-align: center; line-height: 1.15; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.cases__btn-text small { font-size: 0.7em; opacity: 0.9; }
.cases__btn:disabled { opacity: 0.55; filter: grayscale(0.3); }
.cases__btn:active:not(:disabled) { filter: brightness(0.92); }

.roul__top { text-align: center; color: #5a4a35; line-height: 1; }
.roul__bottom { text-align: center; color: #3b2a1a; line-height: 1; font-weight: 700; }
.roul__bg img { object-fit: fill; }
.stage .roul__viewport { overflow: hidden; }
.stage .roul__strip { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; will-change: transform; }
.roul__tile {
  position: relative; flex: 0 0 auto; width: var(--tile); height: var(--tile);
  transition: transform 0.25s, filter 0.25s;
}
.stage .roul__tile img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .roul__tile .roul__img { inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.roul__gem { position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; border-radius: 50%; background: var(--glow, #3399ff); }
.roul__tile.is-unique .roul__rim { filter: hue-rotate(160deg); }
.roul__tile.is-winner { transform: scale(1.08); filter: drop-shadow(0 0 10px var(--glow, transparent)); }
.roul__pointer { transform-origin: 50% 0; }

.drop__scrim { background: rgba(0, 0, 0, 0.7); }
.drop__name, .drop__reward { text-align: center; line-height: 1.05; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.drop__reward { color: #1f7a45; }
.drop__desc {
  text-align: center; color: #3b2a1a; line-height: 1.3; overflow-y: auto; touch-action: pan-y;
  scrollbar-width: thin; scrollbar-color: rgba(59, 42, 26, 0.55) transparent;
}
.drop__desc::-webkit-scrollbar { width: 4px; }
.drop__desc::-webkit-scrollbar-thumb { background: rgba(59, 42, 26, 0.55); border-radius: 2px; }
.drop__chip-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #1a1a1a; font-weight: 700; line-height: 1;
}
.drop__chip.is-unique img { filter: hue-rotate(200deg) saturate(1.2); }
.stage .drop__pic img { object-fit: contain; filter: drop-shadow(0 0 10px var(--glow, transparent)); }

/* ===== Выбор профессии (SCR_ChooseWork) и карточки амулетов ===== */
.jgrid__list {
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: calc(47.5 * var(--u)); gap: 0 calc(9 * var(--u));
  overflow-y: auto; scrollbar-width: none; align-content: start;
}
.jgrid__list::-webkit-scrollbar { display: none; }
.jgrid__job { position: relative; display: block; width: 100%; height: calc(45.7 * var(--u)); }
.jgrid__job-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; line-height: 1; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.jgrid__job.is-picked { filter: brightness(1.3) saturate(1.2) drop-shadow(0 0 4px #ffe9a8); }
.jgrid__title { text-align: center; line-height: 1.1; display: flex; align-items: center; justify-content: center; }
.acard.is-picked { filter: drop-shadow(0 0 8px var(--glow, #fff)); transform: translateY(-3px); }

/* ===== Работа: интро, выбор амулетов; общие подписи сцен ===== */
.wstart__flash { text-align: center; color: #9b2c1f; line-height: 1; }
.wpick__title, .wpick__sub { text-align: center; line-height: 1; color: #3b2a1a; }
.wpick__sub { color: #5a4a35; }
.wood-next {
  background: url('../img/ui/btn_wood_next.webp') center / 100% 100% no-repeat !important;
  color: #fff; display: flex; align-items: center; justify-content: center; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.wood-next:disabled { opacity: 0.55; filter: grayscale(0.3); }
.battle__text { text-align: center; line-height: 1.1; color: #3b2a1a; white-space: pre-line; }
.battle__text--dim { color: #5a4a35; }

/* ===== Квесты (SCR_QuestsMenu) ===== */
.quests__msg { text-align: center; color: #3b2a1a; line-height: 1.2; }
.quests__reset { text-align: center; color: #3b2a1a; line-height: 1; }
.quests__title { display: flex; align-items: center; justify-content: center; line-height: 1; color: #3b2a1a; }
.quest__title { text-align: center; color: #3b2a1a; font-weight: 700; line-height: 1.2; }
.stage .quest__paper img { object-fit: contain; }
.quest__reward span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #f3e3bf; font-weight: 700; line-height: 1; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.quest__reward.is-done span { color: #b9f0c9; }
.quest__bar-fill { position: absolute; left: 4%; top: 18%; height: 64%; border-radius: 4px; background: linear-gradient(180deg, #e8c25a, #b98a22); max-width: 92%; }
.quest__bar.is-done .quest__bar-fill { background: linear-gradient(180deg, #5fd48a, #2a9d58); }
.stage .quest__bar img { position: absolute; inset: 0; }
.quest__progress { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #2a1c10; font-weight: 700; line-height: 1; }

/* ===== Топы (SCR_Menu_Tops) ===== */
.tops__title { display: flex; align-items: center; justify-content: center; line-height: 1; color: #3b2a1a; }
.tops__cat.is-active { filter: brightness(1.25) saturate(1.2) drop-shadow(0 0 4px #ffe9a8); }
.tops__msg { text-align: center; color: #3b2a1a; line-height: 1.2; }
.tops__list { overflow-y: auto; scrollbar-width: none; }
.tops__list::-webkit-scrollbar { display: none; }
.tops__row { position: relative; width: calc(270.9 * var(--u)); height: calc(39.1 * var(--u)); margin-bottom: calc(2.9 * var(--u)); }
.tops__ava {
  position: absolute; left: 12%; top: 16%; width: 8.7%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: calc(11 * var(--u)); color: #3b2a1a; font-weight: 700;
}
.tops__ava .tops__ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tops__name {
  position: absolute; left: 23%; right: 32%; top: 0; bottom: 0; display: flex; align-items: center; color: #3b2a1a; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tops__value { position: absolute; right: 4%; top: 0; bottom: 0; display: flex; align-items: center; color: #3b2a1a; font-weight: 700; white-space: nowrap; }
.tops__arrow { color: #3b2a1a; line-height: 1; }
.tops__arrow:disabled { opacity: 0.3; }
.tops__page { text-align: center; color: #5a4a35; line-height: 1; }

.work__hero { cursor: pointer; }
.stage .work__hero img { transition: transform 0.12s; }
.battle__roulette-name { display: flex; align-items: center; justify-content: center; text-align: center; color: #3b2a1a; line-height: 1; }
.battle__roulette-name.is-final { font-weight: 700; }

/* рисованные редкости: светлый текст на тёмных плашках; unique окрашиваем фильтром */
.drop__chip.is-light .drop__chip-text, .inv__chip.is-light .inv__chip-text { color: #fff; }
.drop__chip.is-unique img, .inv__chip.is-unique img { filter: hue-rotate(200deg) saturate(1.2); }
.inv__slot.is-unique img:last-child { filter: hue-rotate(160deg); }
.lorebook__frame.is-unique img:last-child { filter: hue-rotate(160deg); }
.stage .jgrid__icon { position: absolute; right: 7%; top: 50%; transform: translateY(-50%); height: 60%; width: auto; }
.jgrid__job-text { justify-content: flex-start; padding-left: 9%; }
.stage .tops__value img { height: calc(15 * var(--u)); width: auto; margin-left: calc(4 * var(--u)); }
.stage .battle__rborder img { object-fit: fill; }

.errorbox__body { text-align: center; color: #3b2a1a; line-height: 1.3; overflow-y: auto; scrollbar-width: none; white-space: pre-line; }
.errorbox__body::-webkit-scrollbar { display: none; }
.tut__hand { position: absolute; width: 38px; height: auto; pointer-events: none; animation: handtap 1s ease-in-out infinite; }
@keyframes handtap { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6px, -6px); } }

/* ===== Магазин ===== */
.shop__msg { text-align: center; color: #5a4a35; }
.shop__plate { display: block; }
.shop__plate-num {
  position: absolute; left: 40%; right: 6%; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.shop__plate.has-plus .shop__plate-num { right: 30%; left: 36%; }
.shop__plus:active { transform: scale(0.94); }
.shop__list {
  display: flex; flex-direction: column; gap: calc(2.4 * var(--u));
  overflow-y: auto; scrollbar-width: none;
}
.shop__list::-webkit-scrollbar { display: none; }
.shop-item { position: relative; flex: 0 0 auto; height: calc(47.6 * var(--u)); }
.shop-item__title {
  position: absolute; left: 4.5%; top: 0; bottom: 0; width: 58%;
  display: flex; align-items: center; line-height: 1.1;
}
.shop-item__buy {
  position: absolute; left: 65%; top: 16%; width: 33.9%; height: 67.9%;
}
.shop-item__price {
  position: absolute; left: 0; width: 66%; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; color: #fff; line-height: 1;
}
.shop__flash {
  text-align: center; color: #3b2a1a; opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.shop__flash.is-shown { opacity: 1; }

/* ===== Настройки ===== */
.settings__scrim { background: rgba(0, 0, 0, 0.7); }
.settings__plank { display: block; }
.settings__label {
  position: absolute; left: 6%; right: 26%; top: 0; bottom: 0;
  display: flex; align-items: center; color: #fff; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}
.settings__plank:is(button) .settings__label { right: 6%; }
.settings__plank:is(button):active { filter: brightness(0.92); }
.settings__toggle { position: absolute; }
.settings__knob { position: absolute; top: 0; left: 0; width: 56.3%; height: 100%; transition: left 0.2s; }
.settings__knob img { width: 100%; height: 100%; }
.settings__toggle.is-on .settings__knob { left: 43.7%; }
.settings__reset {
  background: url('../img/settings/settings__BTN_DeleteProgress_3.webp') center / 100% 100% no-repeat !important;
  color: #fff; display: flex; align-items: center; justify-content: center; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}
.settings__reset:active { filter: brightness(0.9); }
.settings__flash { text-align: center; color: #3b2a1a; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.settings__flash.is-shown { opacity: 1; }

.settings__danger-label { margin-top: 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; color: #8b93a3; }  /* админка */
.settings__input { width: 100%; padding: 11px 14px; background: rgba(255, 250, 235, 0.65); border: 2px solid #7a5230; border-radius: 6px; color: #3b2a1a; font-family: 'Kurale', Georgia, serif; font-size: 16px; }
.settings__input:focus { outline: none; border-color: #3b2a1a; }
.settings__err { font-size: 13px; color: #9b2c1f; min-height: 16px; }
.settings__err--ok { color: #22c55e; }

/* ===== Админ-панель ===== */
.admin__title { font-size: 28px; }
.admin__hint { font-size: 13px; font-weight: 600; color: #9aa3b2; margin-top: 4px; }
.admin { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.admin-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 56px; padding: 10px 12px;
  border-radius: 14px;
  background: #171b22;
  border: 1px solid rgba(255, 255, 255, 0.06);   /* переопределяется цветом строки инлайн */
  color: #e6e9ef;
  font-family: inherit; text-align: left; cursor: pointer;
}
.admin-row:active { background: #1f2530; }
.admin-row__chip { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; }
.admin-row__label { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; }
.admin-row__chev { flex: 0 0 auto; font-size: 22px; font-weight: 800; color: #8b93a3; }
.admin-row--danger { background: #2a1416; }
.admin-row--danger:active { background: #351a1d; }
.admin-row--danger .admin-row__label { color: #ff5a5a; }

/* Модалка выдачи амулета: во всю высоту, единственный список забирает весь остаток. */
.lore__box--grant { height: 100%; gap: 10px; overflow: hidden; }   /* скроллит только список внутри */
.lore__box--grant .settings__input { width: 100%; padding: 11px 14px; background: rgba(255, 250, 235, 0.65); border: 2px solid #7a5230; border-radius: 6px; color: #3b2a1a; font-family: 'Kurale', Georgia, serif; font-size: 16px; }
.card__footer--row { flex-direction: row; }
.card__footer--row .btn { flex: 1 1 0; }

.admin-picker { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.admin-picker__label { font-size: 12px; font-weight: 800; color: #8b93a3; letter-spacing: 0.4px; }
.admin-picker__row {
  flex: 0 0 auto;
  padding: 9px 12px; border-radius: 10px; border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04); color: #e6e9ef;
  font-family: inherit; font-size: 14px; font-weight: 600;
  text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-picker__row.is-picked { background: rgba(255, 210, 74, 0.15); border-color: #ffd24a; color: #ffd24a; }
.admin-picker__more { padding: 6px 12px; font-size: 12px; color: var(--text-dim); }

/* ===== Сражения ===== */
.battle__timer { font-size: 16px; font-weight: 800; color: #fff; }

.battle__flash {
  align-self: center; margin-top: 4px; padding: 8px 14px; border-radius: 10px; background: rgba(0,0,0,0.75);
  font-size: 13px; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s; pointer-events: none;
}
.battle__flash.is-shown { opacity: 1; transform: translateY(0); }

.hidden { display: none !important; }

/* Иконка камня вместо символа «۞» (см. ui/gem.js) */
.stage img.gem, img.gem { position: static; display: inline-block; width: auto; height: 1em; margin: 0 0.1em; vertical-align: -0.15em; pointer-events: none; }
.work__notes { overflow-y: auto; scrollbar-width: none; text-align: center; line-height: 1.25; color: #3b2a1a; }
.work__notes::-webkit-scrollbar { display: none; }
.work__notes p { margin: 0 0 0.5em; }

/* Подпись вкладки: на нижней кромке плитки, поверх картинки */
.tab { position: absolute; }
.tab__label { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; line-height: 1; color: #3b2a1a; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 240, 210, 0.6); pointer-events: none; }

.roul__loader { animation: spin360 1.4s linear infinite; }
@keyframes spin360 { to { transform: rotate(360deg); } }

/* ===== Перелистывание страницы между вкладками ===== */
.pageflip {
  position: absolute; top: 15%; height: 74%; width: 26%; z-index: 40; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 246, 222, 0) 0%, rgba(244, 228, 192, 0.6) 25%, rgba(236, 216, 176, 0.7) 75%, rgba(255, 246, 222, 0) 100%);
  box-shadow: 0 0 18px rgba(60, 35, 10, 0.35);
}
.pageflip.is-forward { right: 0; animation: flipleft 0.6s cubic-bezier(0.45, 0, 0.35, 1) forwards; }
.pageflip.is-back { left: 0; animation: flipright 0.6s cubic-bezier(0.45, 0, 0.35, 1) forwards; }
@keyframes flipleft { from { transform: translateX(0); } to { transform: translateX(-390%); } }
@keyframes flipright { from { transform: translateX(0); } to { transform: translateX(390%); } }

/* Эффекты работы: искры, золотой песок, лёгкое «дыхание» работника */
.work__fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.work__fx i { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform, opacity; }
.work__spark { background: radial-gradient(circle, #fff6c8 0%, #ffd34d 60%, rgba(255, 190, 40, 0) 100%); }
.work__sand { background: radial-gradient(circle, #ffe27a 0%, #d9a21b 70%, rgba(180, 120, 10, 0) 100%); box-shadow: 0 0 4px rgba(255, 210, 80, 0.8); }
.stage .work__hero img { transform-origin: 50% 100%; animation: heroIdle 2.8s ease-in-out infinite; }
@keyframes heroIdle { 0%, 100% { transform: rotate(-0.8deg) scaleY(1); } 50% { transform: rotate(0.8deg) scaleY(1.015); } }

/* Квесты: рукописный шрифт вместо печатного (правка дизайнера) */
.quests__title, .quests__reset, .quest__title, .quest__progress, .quest__reward span { font-family: 'Marck Script', 'Kurale', cursive; }
.quest__title { font-weight: 400; }

/* Результат кейса: лучи и искры за амулетом */
.drop__rays { pointer-events: none; overflow: visible; }
.drop__rays-spin {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--glow, #ffd34d) 0deg 7deg, transparent 7deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.55) 35%, transparent 68%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.55) 35%, transparent 68%);
  opacity: 0.55; animation: spin360 18s linear infinite;
}
.drop__rays b {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%;
  background: #fff6c8; box-shadow: 0 0 8px 2px var(--glow, #ffd34d);
  transform: rotate(var(--a)) translateY(-90px); opacity: 0; animation: sparkle 2.2s ease-in-out infinite; animation-delay: var(--d);
}
@keyframes sparkle { 0%, 100% { opacity: 0; transform: rotate(var(--a)) translateY(-70px) scale(0.5); } 50% { opacity: 1; transform: rotate(var(--a)) translateY(-112px) scale(1); } }
.drop__pic { animation: dropin 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes dropin { from { transform: scale(0.4) translateY(30px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

/* Сундук: края картинки плавно растворяются (были плоскими) */
.cases__chest img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%); }

.stage img.loading-ring, img.loading-ring { position: static; display: block; width: calc(64 * var(--u)); height: calc(64 * var(--u)); margin: 0 auto; animation: spin360 1.4s linear infinite; }

/* ===== Анимации: выезд листков и реакция на наведение/нажатие (правка дизайнера) ===== */
@keyframes sheetin { from { opacity: 0; transform: translateY(28px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.lorebook, .errorbox { animation: fadein 0.2s ease-out; }
.lorebook__paper, .errorbox__paper, .settings__paper, .shop__paper, .invite__paper, .battle__paper, .wpick__paper, .drop__paper {
  animation: sheetin 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
.quest__paper, .more__tile { animation: sheetin 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) backwards; }
.quest__paper:nth-of-type(2n) { animation-delay: 0.06s; }
@media (hover: hover) {
  .stage .wood-btn:not(:disabled):hover, .stage .wood-next:not(:disabled):hover, .stage .work__stop:hover { filter: brightness(1.12); transform: translateY(-1px); }
  .more__tile:hover { transform: translateY(-4px) rotate(-0.6deg); filter: drop-shadow(0 6px 6px rgba(60, 35, 10, 0.35)); }
  .acard:hover, .jgrid__job:hover, .mail-row:hover { filter: brightness(1.07); transform: translateY(-2px); }
  .tab:not(.is-active):hover { transform: translateY(-3px); filter: brightness(1.08); }
  .shell__btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
}
.more__tile, .acard, .jgrid__job, .mail-row, .shell__btn, .stage .wood-btn { transition: transform 0.15s, filter 0.15s; }
.stage .wood-btn:not(:disabled):active, .stage .wood-next:not(:disabled):active { transform: scale(0.97); }