/* Дизайн-токены и общие компоненты платформы.
   Всё, что здесь, переиспользуют все игры: шапка, панель перевода в реальные
   деньги, тосты, эффекты, модалки, прокладка, обучение.
   Специфика игры живёт в games/<id>/<id>.css. */

:root {
  --bg: #14102b;
  --bg-soft: #1b1640;
  --panel: #201a47;
  --panel-2: #2a2258;
  --stroke: #372e6b;
  --text: #ece8ff;
  --muted: #9b93c9;
  --violet: #8b5cff;
  --violet-2: #a679ff;
  --violet-soft: #c3a8ff;
  --gold: #f5c542;
  --gold-soft: #ffdf77;
  --green: #35d07f;
  --green-soft: #7ff0b3;
  --red: #ff5c6c;
  --red-soft: #ff9aa4;
  /* Высоту экрана задаёт JS (core/tg.js): dvh не поддерживают старые Android
     в наших гео, а в Telegram-webview на iOS он врёт при клавиатуре.
     100vh — фолбэк на те миллисекунды, пока скрипт не отработал. */
  --app-h: 100vh;
  --gap: 9px;
  --stage-max: 300px;
  --pad-x: 12px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overscroll-behavior: none; -webkit-user-select: none; user-select: none;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  overflow-x: hidden;
}
html { height: 100%; }
body {
  max-width: 520px; margin: 0 auto;
  /* Ровно один экран без прокрутки: кнопка ставки не должна уезжать под сгиб. */
  height: var(--app-h); overflow: hidden;
  display: flex; flex-direction: column;
  /* --tg-*-inset задаёт Telegram (Bot API 8.0+, fullscreen); env() — фолбэк */
  padding-top: calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  padding-left: var(--pad-x); padding-right: var(--pad-x);
  padding-bottom: calc(var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 10px);
  gap: var(--gap);
}
@media (min-width: 760px) {
  body { max-width: 860px; --pad-x: 20px; }
  body[data-game="crash"] { max-width: 920px; }
}

/* ===== Ступени компактности =====
   Выставляет JS по фактической высоте окна. Порядок жертв продуман: сначала
   уходит декор, потом второстепенные блоки. Ставка и игровое поле — всегда. */
body.h-short { --gap: 6px; --stage-max: 280px; }
body.h-short #view, body.h-short .cta { min-width: 0; }
body.h-short .cta { padding: 12px; font-size: 15px; }
body.h-short .disclaimer { font-size: 9.5px; }
body.h-short .topbar { padding-top: 4px; }
body.h-short .tour-text { font-size: 13.5px; }
body.h-short .tour-tip { padding: 11px 13px 10px; }
body.h-tiny { --stage-max: 200px; --gap: 5px; }
body.h-tiny .real-bar { padding: 4px 9px; font-size: 11px; }
body.h-micro { --stage-max: 168px; }

/* На время ввода отпускаем прокрутку — см. TG.hookNumericInput */
body.kb-open { overflow-y: auto; }

.topbar, .real-bar, .cta, .disclaimer { flex: none; }
#view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--gap); }

/* ===== Шапка ===== */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px 0; gap: 8px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .5px; font-size: 18px; min-width: 0; }
.brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand .mark { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--gold), #e0a51e); display: grid; place-items: center; overflow: hidden; color: #1a1200; font-size: 15px; font-weight: 900; box-shadow: 0 4px 14px rgba(245,197,66,.35); }
.brand .mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand .mark:has(img) .mark-f { display: none; }
.brand .mark-f { display: grid; place-items: center; }
.top-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.icon-btn { position: relative; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--stroke); background: var(--panel); color: var(--text); font-size: 15px; cursor: pointer; display: grid; place-items: center; }
.icon-btn:active { background: var(--stroke); }
/* Палец толще иконки: расширяем зону нажатия до 44px, не меняя вёрстку. */
.icon-btn::before, .real-bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
.balance { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.balance .label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.balance .value { font-size: 18px; font-weight: 800; color: var(--gold); }

/* ===== Панель перевода в реальные деньги ===== */
.real-bar { position: relative; display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 12px; color: var(--muted);
  background: rgba(255,140,61,.10); border: 1px solid rgba(255,140,61,.32); border-radius: 10px; padding: 8px 10px;
  cursor: pointer; width: 100%; transition: transform .1s; }
.real-bar:active { transform: scale(.99); }
.real-bar b { color: #ffd9b8; font-weight: 800; }
.real-bar .rb-cta { color: #ffb37a; font-weight: 800; }
.real-bar .rb-chevron { margin-left: auto; color: var(--muted); font-weight: 900; }

/* ===== CTA и дисклеймер ===== */
.cta { width: 100%; border: none; border-radius: 14px; padding: 15px; font-size: 16px; font-weight: 800; cursor: pointer;
  background: linear-gradient(135deg, #ff8a3d, #ff5c6c); color: #fff; box-shadow: 0 8px 24px rgba(255,92,108,.28);
  display: flex; align-items: center; justify-content: center; gap: 8px; }
.cta.pulse { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); filter: brightness(1.08); } }
.disclaimer { text-align: center; font-size: 10px; color: #6a5fa0; padding: 0 8px; }

/* ===== Тост ===== */
.toast { position: fixed; left: 50%; top: 108px; bottom: auto; transform: translateX(-50%) translateY(-10px);
  background: var(--panel-2); border: 1.5px solid var(--stroke); color: var(--text); padding: 11px 18px; border-radius: 14px;
  font-weight: 800; font-size: 15px; opacity: 0; transition: all .25s; pointer-events: none; z-index: 80; max-width: min(340px, 88%);
  text-align: center; box-shadow: 0 10px 34px rgba(0,0,0,.5); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.win { border-color: var(--green); color: var(--green-soft); background: #16241d; }
.toast.lose { border-color: var(--red); color: var(--red-soft); background: #271519; }

/* ===== Слой эффектов ===== */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.coin { position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a0, #f5c542 55%, #cf9b1e); border: 2px solid #ffe9a0;
  color: #7a5a00; font-weight: 900; font-size: 13px; display: grid; place-items: center; will-change: transform, opacity; }
@keyframes coinDrop { 0% { opacity: 0; transform: translate(0,-30px) scale(.6) rotate(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), 78vh) rotate(var(--rot)); } }
.coinrain { top: -40px; }
@keyframes coinRainFall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 7% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: .85; transform: translateY(104vh) rotate(var(--rot)); } }
.fw { position: absolute; width: 9px; height: 9px; border-radius: 50%; will-change: transform, opacity; box-shadow: 0 0 8px currentColor; }
@keyframes fwPop { 0% { opacity: 1; transform: translate(0,0) scale(1.1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
.conf { position: absolute; width: 9px; height: 14px; border-radius: 2px; will-change: transform, opacity; }
@keyframes confPop { 0% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }
.bigwin { position: absolute; top: 32%; left: 50%; transform: translateX(-50%); text-align: center; font-weight: 900;
  color: var(--gold); text-shadow: 0 4px 24px rgba(245,197,66,.6); animation: bigPop 1.8s ease forwards; }
.bigwin .t1 { font-size: 16px; letter-spacing: 2px; color: var(--green-soft); }
.bigwin .t2 { font-size: 40px; }
@keyframes bigPop { 0% { opacity: 0; transform: translateX(-50%) scale(.5); } 18% { opacity: 1; transform: translateX(-50%) scale(1.12); } 82% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) scale(1); } }
.flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.4), transparent 60%); animation: flash .5s ease forwards; }
@keyframes flash { 0% { opacity: .8; } 100% { opacity: 0; } }

/* Крупный занос: лучи, каунтер, тряска игрового поля */
.swin { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: rgba(10,8,24,.55); animation: swinFade 2.9s ease forwards; pointer-events: none; }
.swin-rays { position: absolute; width: 150vmax; height: 150vmax; border-radius: 50%; animation: raysSpin 3s linear infinite;
  background: conic-gradient(from 0deg, rgba(245,197,66,.28) 0 14deg, transparent 14deg 36deg, rgba(245,197,66,.28) 36deg 50deg, transparent 50deg 72deg, rgba(245,197,66,.28) 72deg 86deg, transparent 86deg 108deg, rgba(245,197,66,.28) 108deg 122deg, transparent 122deg 144deg, rgba(245,197,66,.28) 144deg 158deg, transparent 158deg 180deg, rgba(245,197,66,.28) 180deg 194deg, transparent 194deg 216deg, rgba(245,197,66,.28) 216deg 230deg, transparent 230deg 252deg, rgba(245,197,66,.28) 252deg 266deg, transparent 266deg 288deg, rgba(245,197,66,.28) 288deg 302deg, transparent 302deg 324deg, rgba(245,197,66,.28) 324deg 338deg, transparent 338deg 360deg); }
@keyframes raysSpin { to { transform: rotate(360deg); } }
.swin-core { position: relative; text-align: center; animation: swinPop .55s cubic-bezier(.2,1.6,.35,1) forwards; }
.swin-label { font-size: 17px; font-weight: 900; letter-spacing: 6px; color: var(--green-soft); text-shadow: 0 2px 18px rgba(53,208,127,.7); }
.swin-amount { font-size: 58px; font-weight: 900; color: var(--gold); text-shadow: 0 6px 34px rgba(245,197,66,.75); font-variant-numeric: tabular-nums; line-height: 1.1; }
.swin-mult { font-size: 15px; font-weight: 800; color: var(--violet-soft); margin-top: 2px; }
@keyframes swinPop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes swinFade { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.shake { animation: shakeIt .5s ease; }
@keyframes shakeIt { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-6px,3px); } 40% { transform: translate(5px,-4px); } 60% { transform: translate(-4px,-2px); } 80% { transform: translate(3px,3px); } }

/* ===== Модалки =====
   Карточка не выше экрана и прокручивается внутри себя: иначе на коротких
   телефонах крестик уезжал вверх, а кнопки — за нижний край. */
.modal { position: fixed; inset: 0; z-index: 95; background: rgba(10,8,24,.9);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  display: none; align-items: center; justify-content: center; padding: 12px; }
.modal.show { display: flex; }
.card { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--stroke); border-radius: 22px;
  padding: 24px 20px 18px; text-align: center;
  max-height: calc(var(--app-h) - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; scrollbar-width: none; }
.card::-webkit-scrollbar { display: none; }
.card-x { position: absolute; top: 10px; right: 12px; z-index: 2; background: transparent; border: none;
  color: var(--muted); font-size: 18px; cursor: pointer; padding: 4px 8px; }

.broke-icon { font-size: 50px; margin-bottom: 6px; }
.broke-title { font-size: 21px; font-weight: 900; margin-bottom: 6px; }
.broke-sub { font-size: 13.5px; color: var(--muted); line-height: 1.45; margin-bottom: 14px; }
.broke-timer { font-size: 34px; font-weight: 900; color: var(--violet-soft); letter-spacing: 2px; font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.broke-claim { width: 100%; border: none; border-radius: 13px; padding: 14px; font-size: 15px; font-weight: 900; cursor: pointer;
  background: linear-gradient(135deg, var(--violet), #6f3dff); color: #fff; margin-bottom: 14px; }
.broke-claim:disabled { opacity: .45; cursor: default; }
.broke-or { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
.broke-real { width: 100%; border: none; border-radius: 13px; padding: 14px; font-size: 15px; font-weight: 900; cursor: pointer;
  background: linear-gradient(135deg, #ff8a3d, #ff5c6c); color: #fff; box-shadow: 0 8px 24px rgba(255,92,108,.3); }
/* Рефилл готов: прячем таймер, кнопка становится крупной золотой и пульсирует */
.broke.ready .broke-timer { display: none; }
.broke.ready .broke-claim { padding: 18px; font-size: 18px; border-radius: 15px; margin-top: 2px; margin-bottom: 16px;
  color: #2a1a00; background: linear-gradient(135deg, #ffe08a, #ff9d2e); box-shadow: 0 10px 30px rgba(255,180,60,.45);
  animation: brokeClaimPulse 1.15s ease-in-out infinite; }
@keyframes brokeClaimPulse { 0%,100% { transform: scale(1); box-shadow: 0 10px 28px rgba(255,180,60,.4); } 50% { transform: scale(1.035); box-shadow: 0 14px 40px rgba(255,180,60,.62); } }

.offer-card { position: relative; background: linear-gradient(180deg, #201a47, var(--panel)); border-color: var(--gold);
  padding: 26px 20px 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(245,197,66,.22);
  animation: swinPop .4s cubic-bezier(.2,1.5,.4,1) both; }
.offer-glow { position: absolute; top: -60px; left: 50%; width: 220px; height: 220px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(245,197,66,.35), transparent 70%); pointer-events: none; }
.offer-icon { position: relative; font-size: 50px; margin-bottom: 6px; }
.offer-title { position: relative; font-size: 21px; font-weight: 900; margin-bottom: 6px; }
.offer-sub { position: relative; font-size: 14px; color: var(--muted); line-height: 1.45; margin-bottom: 14px; }
.offer-real { position: relative; width: 100%; border: none; border-radius: 13px; padding: 14px; font-size: 15px; font-weight: 900;
  cursor: pointer; background: linear-gradient(135deg, #ff8a3d, #ff5c6c); color: #fff; box-shadow: 0 8px 24px rgba(255,92,108,.3); }
.offer-skip { width: 100%; background: transparent; border: none; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; padding: 12px 0 2px; }

.real-avail { position: relative; font-size: 15px; color: var(--muted); margin-bottom: 8px; }
.real-avail b { color: var(--gold-soft); font-size: 20px; font-weight: 900; }
.real-explain { position: relative; font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.real-explain b { color: var(--green-soft); font-weight: 900; }
.real-hook { position: relative; background: rgba(255,140,61,.10); border: 1px solid rgba(255,140,61,.35); border-radius: 13px;
  padding: 10px 12px; font-size: 12.5px; color: #ffd9b8; line-height: 1.45; margin-bottom: 12px; }
.real-hook b { color: #ffb37a; }

/* ===== Прокладка = полноэкранный лендинг ===== */
.bridge { position: fixed; inset: 0; z-index: 99; background: #0d0a1f; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bridge.show { display: block; }
.bridge-page { position: relative; min-height: 100%; width: 100%; max-width: 480px; margin: 0 auto; padding-bottom: 8px; display: flex; flex-direction: column; }
/* Крестик слева: справа у Telegram свои системные кнопки в fullscreen */
.bridge-x { position: absolute; left: 12px; top: calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px) + 8px);
  z-index: 6; width: 36px; height: 36px; border-radius: 999px; background: rgba(0,0,0,.4); border: 1px solid var(--stroke); color: #fff; font-size: 16px; cursor: pointer; }
.bridge-hero { position: relative; text-align: center; overflow: hidden;
  padding: calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px) + 34px) 20px 24px;
  background: radial-gradient(130% 90% at 50% -10%, rgba(139,92,255,.4), transparent 62%), linear-gradient(180deg, #1a1440, #0d0a1f); }
.bridge-badge { display: inline-block; background: rgba(245,197,66,.14); border: 1px solid var(--gold); color: var(--gold-soft);
  font-weight: 800; font-size: 11.5px; letter-spacing: .5px; padding: 6px 13px; border-radius: 999px; margin-bottom: 16px; }
.bridge-mult { font-size: 66px; font-weight: 900; letter-spacing: -1.5px; color: var(--violet-2); text-shadow: 0 8px 40px rgba(139,92,255,.6); line-height: 1; font-variant-numeric: tabular-nums; }
.bridge-rocket { font-size: 34px; margin-top: 4px; animation: bridgeFly 2.2s ease-in-out infinite; }
@keyframes bridgeFly { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
.bridge-htitle { font-size: 25px; font-weight: 900; margin-top: 12px; }
.bridge-htitle .lj { color: var(--gold); }
.bridge-hsub { font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.bridge-bonus { margin: 16px 16px 0; background: linear-gradient(135deg, rgba(255,138,61,.16), rgba(255,92,108,.16));
  border: 1px solid rgba(255,140,61,.42); border-radius: 16px; padding: 14px 16px; text-align: center; }
.bridge-bonus .big { font-size: 21px; font-weight: 900; color: #ffb37a; }
.bridge-bonus .ex { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.bridge-bonus .ex b { color: var(--gold-soft); }
.bridge-sect { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 20px 20px 10px; }
.bridge-steps { list-style: none; padding: 0; margin: 0 16px; display: flex; flex-direction: column; gap: 12px; }
.bridge-step { display: flex; gap: 12px; font-size: 14px; line-height: 1.45; align-items: flex-start; }
.bridge-step .n { flex: 0 0 26px; height: 26px; border-radius: 999px; background: linear-gradient(135deg, var(--violet), #6a3dff);
  color: #fff; font-weight: 900; font-size: 13px; display: grid; place-items: center; }
.bridge-step b { color: var(--text); }
.bridge-promo { margin: 16px; background: rgba(245,197,66,.10); border: 1px solid var(--gold); border-radius: 16px; padding: 14px; }
.bridge-promo .lbl { font-size: 12.5px; color: var(--gold-soft); font-weight: 800; margin-bottom: 9px; line-height: 1.35; }
.bridge-code-row { display: flex; align-items: center; gap: 8px; }
.bridge-code { flex: 1; font-size: 24px; font-weight: 900; letter-spacing: 2px; color: var(--gold); background: rgba(0,0,0,.3);
  border: 1px dashed var(--gold); border-radius: 11px; padding: 11px 10px; text-align: center; }
.bridge-copy { border: none; border-radius: 11px; padding: 13px 15px; font-size: 13px; font-weight: 800; cursor: pointer; background: var(--gold); color: #2a1a00; white-space: nowrap; }
.bridge-promo .warn { font-size: 12px; color: #ffd9b8; margin-top: 10px; line-height: 1.45; }
.bridge-promo .warn b { color: #ffb37a; }
.bridge-note { font-size: 10.5px; color: #6a5fa0; text-align: center; line-height: 1.5; margin: 12px 24px 0; }
.bridge-cta-wrap { position: sticky; bottom: 0; margin-top: 18px; padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
  background: linear-gradient(180deg, rgba(13,10,31,0), #0d0a1f 34%); }
.bridge-go { width: 100%; border: none; border-radius: 14px; padding: 17px; font-size: 16.5px; font-weight: 900; cursor: pointer;
  background: linear-gradient(135deg, #ff8a3d, #ff5c6c); color: #fff; box-shadow: 0 10px 28px rgba(255,92,108,.4); }
.bridge-back { width: 100%; background: transparent; border: none; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; padding: 12px 0 2px; }

/* ===== Интерактивное обучение (coach marks) ===== */
/* overflow:hidden — иначе 9999px-тень прожектора после pinTour всё ещё
   красит левое/правое поле 1280, хотя облачко уже в колонке. */
.tour { position: fixed; inset: 0; z-index: 130; display: none; overflow: hidden; }
.tour.show { display: block; }
.tour-spot { position: absolute; border-radius: 14px; box-shadow: 0 0 0 3px var(--gold), 0 0 0 9999px rgba(6,4,16,.80); pointer-events: none;
  transition: left .32s cubic-bezier(.4,0,.2,1), top .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1), height .32s cubic-bezier(.4,0,.2,1); }
.tour-spot.instant { transition: none; }
.tour-spot::after { content: ""; position: absolute; inset: -3px; border-radius: 15px; animation: tourPulse 1.5s ease-out infinite; }
@keyframes tourPulse { 0% { box-shadow: 0 0 0 0 rgba(245,197,66,.5); } 100% { box-shadow: 0 0 0 16px rgba(245,197,66,0); } }
/* Вторая строка max-width — для узких экранов; старые движки её не понимают
   и остаются на 320px из первой. */
.tour-tip { position: absolute; width: min(300px, calc(100% - 16px)); max-width: calc(100% - 16px);
  background: var(--panel-2); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 14px 16px 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5); pointer-events: auto; overflow: visible; box-sizing: border-box; }
.tour-text { overflow-wrap: anywhere; word-break: break-word; }
.tour-arrow { position: absolute; width: 0; height: 0; transform: translateX(-50%); }
.tour-tip.below .tour-arrow { top: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid var(--panel-2); }
.tour-tip.above .tour-arrow { bottom: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid var(--panel-2); }
.tour-text { font-size: 14.5px; line-height: 1.5; color: var(--text); }
.tour-text b { color: var(--gold-soft); }
.tour-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 8px; flex-wrap: wrap; }
.tour-skip { white-space: nowrap; }
.tour-dots { display: flex; gap: 6px; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--stroke); }
.tour-dot.active { background: var(--gold); }
.tour-btns { display: flex; gap: 6px; align-items: center; }
.tour-skip { background: transparent; border: none; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; padding: 8px 6px; }
.tour-next { background: linear-gradient(135deg, var(--gold), #e0a51e); color: #1a1200; border: none; border-radius: 10px; padding: 9px 16px; font-weight: 800; font-size: 14px; cursor: pointer; min-width: 88px; white-space: nowrap; }

/* Заглушка на время загрузки модуля игры */
.game-loading { flex: 1; display: grid; place-items: center; font-size: 44px; opacity: .35; animation: pulse 1.2s ease-in-out infinite; }