/* ============================================================
   style.css — Смахни пыль
   ============================================================ */

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

:root {
  --gold:        #f5c842;
  --gold-dark:   #c89a10;
  --gold-light:  #ffe98a;
  --silver:      #c8d6e5;
  --bg-dark:     #0d0a1a;
  --bg-mid:      #1a1030;
  --text-light:  #fff9e8;
  --shadow-gold: 0 0 24px #f5c84288, 0 0 6px #f5c842cc;
  --radius:      18px;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg-dark);
  font-family: 'Georgia', 'Times New Roman', serif;
  color: var(--text-light);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
   overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}


/* ---- ЭКРАНЫ ---- */
.screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 10;
}
.screen.active {
  opacity: 1; pointer-events: all;
}

/* ---- ФОНЫ ---- */
.loading-bg, .menu-bg, .game-bg, .final-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, #16504d 0%, #0d0a1a 70%);
  z-index: 0;
}
.menu-bg {
  background: radial-gradient(ellipse at 50% 40%, #16504d 0%, #0d0a1a 70%),
              url('assets/images/bg_menu.png') center/cover no-repeat;
  background-blend-mode: screen;
}
.game-bg {
  background: radial-gradient(ellipse at 50% 50%, #101830 0%, #060410 100%),
              url('assets/images/bg_game.png') center/cover no-repeat;
  background-blend-mode: screen;
}
.final-bg {
  background: radial-gradient(ellipse at 50% 30%, #3b2200 0%, #0d0a1a 70%);
}
.overlay-bg {
  position: absolute; inset: 0;
  background: rgba(5,2,20,0.65);
  backdrop-filter: blur(6px);
  z-index: 0;
}
.overlay-bg.dark { background: rgba(0,0,0,0.80); }

/* ---- ЗАГРУЗКА ---- */
.loading-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 40px 32px;
}
.loading-gem {
  width: 80px; height: 80px;
  background: conic-gradient(#f5c842, #ffe98a, #c89a10, #f5c842);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  animation: gemSpin 3s linear infinite, gemGlow 1.5s ease-in-out infinite alternate;
  border-radius: 4px;
}
.gem-inner {
  width: 100%; height: 100%;
  background: radial-gradient(circle at 40% 35%, #fff8cc 0%, transparent 60%);
}
@keyframes gemSpin { to { transform: rotate(360deg); } }
@keyframes gemGlow {
  from { filter: drop-shadow(0 0 8px #f5c842aa); }
  to   { filter: drop-shadow(0 0 28px #f5c842ff) drop-shadow(0 0 6px #fff9e8); }
}

.loading-title {
  font-size: clamp(22px, 5vw, 32px);
  background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  text-align: center;
}
.loading-bar-wrap {
  width: min(320px, 80vw); height: 10px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(245,200,66,0.3);
}
.loading-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  border-radius: 10px;
  box-shadow: 0 0 12px var(--gold);
  transition: width 0.2s ease;
}
.loading-hint {
  font-size: 14px; color: rgba(255,249,232,0.6);
  letter-spacing: 0.05em;
}

/* ---- МЕНЮ ---- */
.img-menu {
  width: 180px;
  height: 180px;
  margin-bottom: -12px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 0 20px #f5c842cc);

  /* Мягкое свечение + тень */
  box-shadow:
    0 0 0 3px rgba(245, 200, 66, 0.25),
    0 0 0 6px rgba(245, 200, 66, 0.10),
    0 8px 32px rgba(0, 0, 0, 0.5);

  /* Плавающая анимация */
  animation: menuImgFloat 4s ease-in-out infinite,
             menuImgGlow  3s ease-in-out infinite alternate;

  /* GPU-ускорение — не жрёт CPU */
  will-change: transform, box-shadow;
}

@keyframes menuImgFloat {
  0%,100% { transform: translateY(0px) rotate(-1deg); }
  50%      { transform: translateY(-10px) rotate(1deg); }
}

@keyframes menuImgGlow {
  from {
    box-shadow:
      0 0 0 3px rgba(245, 200, 66, 0.20),
      0 0 0 6px rgba(245, 200, 66, 0.08),
      0 0 20px rgba(245, 200, 66, 0.15),
      0 8px 32px rgba(0, 0, 0, 0.5);
  }
  to {
    box-shadow:
      0 0 0 3px rgba(245, 200, 66, 0.55),
      0 0 0 8px rgba(245, 200, 66, 0.18),
      0 0 40px rgba(245, 200, 66, 0.35),
      0 8px 32px rgba(0, 0, 0, 0.5);
  }
}


.menu-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 40px 28px;
}
.menu-gem-deco {
  width: 60px; height: 60px;
  background: conic-gradient(#f5c842, #ffe98a, #c89a10, #f5c842);
  clip-path: polygon(50% 0%,100% 35%,79% 100%,21% 100%,0% 35%);
  animation: gemGlow 1.8s ease-in-out infinite alternate;
  margin-bottom: -8px;
}
.menu-title {
  font-size: clamp(28px, 7vw, 52px);
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  text-align: center; line-height: 1.1;
  filter: drop-shadow(0 0 12px #f5c84288);
  letter-spacing: 0.02em;
}
.menu-subtitle {
  font-size: clamp(13px, 3vw, 17px);
  color: rgba(255,249,232,0.65);
  text-align: center; font-style: italic;
  margin-top: -8px;
}
.particles-container {
  position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
}

/* ---- КНОПКИ ---- */
.btn-gold {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 36px;
  background: linear-gradient(145deg, #ffe98a, #f5c842, #c89a10);
  border: none; border-radius: var(--radius);
  color: #3a1e00; font-size: clamp(16px, 4vw, 20px);
  font-family: inherit; font-weight: bold; letter-spacing: 0.05em;
  cursor: pointer; position: relative; overflow: hidden;
  box-shadow: 0 4px 20px #f5c84266, 0 2px 6px rgba(0,0,0,0.4);
  transition: transform 0.12s, box-shadow 0.2s;
  min-width: 220px;
}
.btn-gold::after {
  content: ''; position: absolute;
  top: -50%; left: -60%; width: 40%; height: 200%;
  background: rgba(255,255,255,0.35);
  transform: skewX(-20deg);
  animation: btnShine 3s ease-in-out infinite;
}
@keyframes btnShine {
  0%,80%,100% { left: -60%; opacity:0; }
  40%         { left: 120%; opacity:1; }
}
.btn-gold:active { transform: scale(0.96); }

.btn-silver {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 32px;
  background: linear-gradient(145deg, #e8edf5, #b0c0d8, #8898b0);
  border: none; border-radius: var(--radius);
  color: #1a2030; font-size: clamp(14px, 3.5vw, 17px);
  font-family: inherit; font-weight: bold; cursor: pointer;
  box-shadow: 0 3px 12px rgba(180,200,220,0.3);
  transition: transform 0.12s;
  min-width: 220px;
}
.btn-silver:active { transform: scale(0.96); }
.btn-play { font-size: clamp(18px,5vw,24px); padding: 16px 50px; }

.bonus-text {
  font-size: 12px;
  max-width: 130px;
  color: var(--gold-light);
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 6px #f5c842aa;
}

/* ---- LANG ---- */
.lang-switcher {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
}
.lang-btn {
  background: transparent; border: 1.5px solid rgba(245,200,66,0.4);
  color: rgba(255,249,232,0.6); padding: 6px 16px; border-radius: 20px;
  font-family: inherit; font-size: 14px; cursor: pointer; transition: all 0.2s;
}
.lang-btn.active, .lang-btn:hover {
  border-color: var(--gold); color: var(--gold); box-shadow: 0 0 10px #f5c84244;
}
.lang-sep { color: rgba(255,249,232,0.3); font-size: 18px; }

/* ---- КАК ИГРАТЬ ---- */
.howto-box {
  position: relative; z-index: 1;
  background: radial-gradient(ellipse at 50% 30%, #175f5c 0%, #0d0a1a 70%);
  border: 1.5px solid rgba(245,200,66,0.4);
  border-radius: 24px; padding: 36px 28px;
  max-width: min(420px, 92vw);
  box-shadow: 0 0 40px rgba(245,200,66,0.15);
}
.howto-box h2 {
  text-align: center; margin-bottom: 20px;
  font-size: clamp(20px,5vw,26px);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.howto-box ul {
  list-style: none; display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 24px;
}
.howto-box li {
  padding-left: 20px; position: relative;
  font-size: clamp(13px,3.5vw,15px); line-height: 1.5;
  color: rgba(255,249,232,0.85);
}
.howto-box li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 8px var(--gold);
}

/* ---- ИГРОВОЙ ИНТЕРФЕЙС ---- */
.game-ui-top {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 20; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
}
.btn-icon {
  width: 134px; height: 100px; flex-shrink: 0;
  background: rgba(245,200,66,0.12);
  border: 1.5px solid rgba(245,200,66,0.35);
  border-radius: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.1s; position: relative;
}
.btn-icon img { width: 58px; height: 58px; object-fit: contain; }
.btn-icon:active { transform: scale(0.9); }
.btn-icon:hover  { background: rgba(245,200,66,0.25); }
.btn-ad {
  flex-direction: column;
  gap: 2px;
  animation: adPulse 2s ease-in-out infinite;
}
@keyframes adPulse {
  0%,100% {
    box-shadow: 0 0 8px #f5c84255;
  }
  50% {
    box-shadow: 0 0 18px #f5c842cc;
  }
}
.bonus-label {
  position: absolute; top: -2px; right: -2px;
  background: var(--gold); color: #3a1e00;
  font-size: 12px; font-weight: bold; border-radius: 6px; padding: 1px 4px;
}

.level-info {
  flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.level-name {
  font-size: clamp(13px,3.5vw,16px);
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: bold; text-align: center;
  filter: drop-shadow(0 0 6px #f5c84288);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
}
.progress-wrap {
  width: 100%; max-width: 600px; height: 50px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px; overflow: hidden; position: relative;
  border: 1px solid rgba(245,200,66,0.3);
  margin-top: 4px;
}
.progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  border-radius: 10px; box-shadow: 0 0 10px var(--gold);
  transition: width 0.3s ease;
}
.progress-txt {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 8px; color: #3a1e00; font-weight: bold; pointer-events: none;
}

/* ---- CANVAS ---- */
.canvas-wrap {
  position: relative;
  flex-shrink: 0;
  margin-top: 100px;
}
.canvas-wrap canvas {
  position: absolute;
  top: 0; left: 0;
  display: block;
}

/* ---- БОНУС ---- */
.bonus-banner {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 25; background: rgba(245,200,66,0.18);
  border: 1.5px solid var(--gold); border-radius: 30px;
  padding: 8px 22px; font-size: 15px; color: var(--gold-light);
  box-shadow: var(--shadow-gold);
  opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
.bonus-banner.visible { opacity: 1; }

/* ---- ПОБЕДА ---- */
.win-box {
  position: relative; z-index: 1;
   background: radial-gradient(ellipse at 50% 30%, #175f5c 0%, #0d0a1a 70%);
  border: 1.5px solid rgba(245,200,66,0.5);
  border-radius: 28px; padding: 40px 32px;
  max-width: min(380px, 92vw); text-align: center;
  box-shadow: 0 0 60px rgba(245,200,66,0.2);
}
.win-title {
  font-size: clamp(20px,5vw,26px);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
}
.win-item-preview {
  width: 180px; height: 180px; margin: 0 auto 16px;
  border-radius: 50%; border: 3px solid rgba(245,200,66,0.4); overflow: hidden;
  box-shadow: 0 0 30px #f5c84244;
  background: radial-gradient(circle, #2a1650 0%, #0d0a1a 100%);
}
.win-item-preview img {
  width: 100%; height: 100%; object-fit: contain;
  animation: winItemAppear 0.6s cubic-bezier(0.2,1.4,0.4,1) both;
}
@keyframes winItemAppear {
  from { transform: scale(0.4) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}
.win-name {
  font-size: clamp(14px,4vw,18px); color: var(--gold-light);
  margin-bottom: 24px; font-style: italic;
}
.win-sparkles {
  position: absolute; inset: 0; pointer-events: none;
  overflow: hidden; border-radius: 28px;
}

/* ---- ФИНАЛ ---- */
#canvas-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.final-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 32px 24px;
}
.final-crown-wrap { position: relative; width: 200px; height: 200px; }
.final-crown {
  width: 100%; height: 100%; object-fit: contain;
  animation: crownFloat 3s ease-in-out infinite, crownAppear 1s cubic-bezier(0.2,1.5,0.4,1) both;
  filter: drop-shadow(0 0 20px #f5c842cc);
}
@keyframes crownFloat {
  0%,100% { transform: translateY(0px) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}
@keyframes crownAppear {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.final-glow {
  position: absolute; inset: -20px;
  background: radial-gradient(circle, #f5c84244 0%, transparent 70%);
  animation: finalGlow 2s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes finalGlow {
  from { transform: scale(0.9); opacity: 0.5; }
  to   { transform: scale(1.2); opacity: 1; }
}
.final-title {
  font-size: clamp(22px,5.5vw,36px);
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  text-align: center; line-height: 1.2;
  filter: drop-shadow(0 0 12px #f5c84288);
  animation: fadeSlideUp 0.8s 0.3s both;
}
.final-sub {
  font-size: clamp(13px,3.5vw,17px); color: rgba(255,249,232,0.7);
  text-align: center; font-style: italic;
  animation: fadeSlideUp 0.8s 0.5s both;
}
@keyframes fadeSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.btn-restart { animation: fadeSlideUp 0.8s 0.7s both; }
.btn-icon-img { width: 22px; height: 22px; object-fit: contain; }

  .mobile-btn-ad {
    display: none;
  }

/* ---- АДАПТИВ ---- */
@media (max-width: 800px) {
    .canvas-wrap {
    margin-top: 50px;
  }
  .btn-ad { 
   
  }
  .desc-btn-ad {
    display: none;
  }
/* .btn-icon { 
  padding: 8px;
  width: 80px;
} */
.btn-back {
  height: 50px;
  width: 50px;
}
.game-ui-top {
  align-items: flex-end;
}
  .btn-icon img {
    width: 38px;
    height: 38px;
  }
  .bonus-text {
    font-size: 12px;
  }
  .bonus-label {
    font-size: 12px;
  }
  .btn-ad {
    position: absolute;
    bottom: 40px;
    right: 20px;
  }

  .mobile-btn-ad {
    height: 50px;
    display: flex;
    position: absolute;
    bottom: 40px;
    right: 20px;
  }
  .mobile-btn-ad img {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 400px) {
  .btn-gold, .btn-silver { min-width: 180px; }
  .win-box { padding: 28px 18px; }
  .howto-box { padding: 24px 16px; }
}

/* ---- HINT OVERLAY ---- */
.hint-overlay {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: min(320px, 90vw);
  pointer-events: all;
  animation: hintAppear 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes hintAppear {
  from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.hint-overlay.hiding {
  animation: hintHide 0.4s ease forwards;
}
@keyframes hintHide {
  to { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.96); }
}

.hint-box {
  background: rgba(15, 8, 40, 0.96);
  border: 1.5px solid rgba(245, 200, 66, 0.5);
  border-radius: 20px;
  padding: 20px 22px 16px;
  text-align: center;
  box-shadow: 0 0 40px rgba(245, 200, 66, 0.15), 0 8px 32px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden;
}

.hint-icon {
  font-size: 28px;
  margin-bottom: 10px;
  animation: hintIconPulse 1.5s ease-in-out infinite alternate;
}
@keyframes hintIconPulse {
  from { transform: scale(1) rotate(-5deg); }
  to   { transform: scale(1.15) rotate(5deg); }
}

.hint-text {
  font-size: clamp(13px, 3.5vw, 15px);
  line-height: 1.55;
  color: rgba(255, 249, 232, 0.9);
  margin-bottom: 16px;
}

.hint-close-btn {
  min-width: 140px;
  padding: 10px 24px;
  font-size: clamp(13px, 3.5vw, 15px);
  margin-bottom: 12px;
}

/* Полоска обратного отсчёта */
.hint-progress-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  border-radius: 0 0 20px 20px;
  transform-origin: left center;
  animation: hintCountdown 15s linear forwards;
}
@keyframes hintCountdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ---- КАСТОМНЫЙ КУРСОР ---- */
.custom-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  display: none; /* показывается только над canvas в JS */
  will-change: transform, left, top;
}
.custom-cursor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* лёгкое вращение при движении — применяется через JS */
  transition: transform 0.08s ease;
}

/* Скрываем стандартный курсор на canvas-fx только на десктопе */
@media (pointer: fine) {
  #canvas-fx { cursor: none !important; }
}

.hint-overlay {
  display: none; /* JS покажет через style.display = 'block' */
}

#canvas-item  { z-index: 1; }
#canvas-dirt  { z-index: 2; }
#canvas-frame { z-index: 3; pointer-events: none; }
#canvas-fx    { z-index: 4; touch-action: none; }

@media (max-height: 705px) {
  .bonus-banner {
    padding: 3px 6px;
    font-size: 12px;
    bottom: 20px;
            right: 20px;
            left: auto;
            transform: none;
  }
  .btn-ad {
    height: auto;
    width: auto;
    flex-direction: row-reverse;
    bottom: 20px;
    padding: 3px 6px;
  }
  .bonus-text {
    max-width: none;
  }
  .img-menu {
  width: 140px;
  height: 140px;
  }
}



@media (max-height: 450px) {
.howto-box{
  scale: 0.7;
}
.win-box {
  scale: 0.9;
}
.img-menu {
  width: 90px;
  height: 90px;
}
}
@media (max-height: 400px) {
  .menu-content {
    scale: 0.9;
  }
.final-content {
  scale: 0.8;
}
.win-box {
  scale: 0.8;
}
}
@media (max-height: 350px) {
.win-box {
  scale: 0.7;
}
  .menu-content {
    scale: 0.8;
  }
}

@media (max-height: 300px) {
.howto-box{
  scale: 0.4;
}
.final-content {
  scale: 0.5;
}
.win-box {
  scale: 0.5;
}
  .menu-content {
    scale: 0.5;
  }
}