/* ===========================================================================
   style.css — "Собери всех капибар". Горизонтальная, тёплая, уютная.
   =========================================================================== */
:root {
  --bg: #3a3566;            /* мягкий сине-фиолетовый (как в референсе) */
  --bg2: #2c2850;
  --card: #4a4378;
  --text: #f6f2ff;
  --muted: #b8b2d8;
  --accent: #ffd24a;
  --danger: #ff5a6e;
  --r-common: #b9c2d0;
  --r-rare: #4aa3ff;
  --r-epic: #b56bff;
  --r-legendary: #ffd24a;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg); color: var(--text);
  overflow: hidden; overscroll-behavior: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
}
img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.25), transparent),
    radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,0.18), transparent),
    radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,0.2), transparent),
    radial-gradient(2px 2px at 85% 20%, rgba(255,255,255,0.15), transparent);
}

#game { position: relative; width: 100%; height: 100%; max-width: 1320px; margin: 0 auto; }
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hidden { display: none !important; }

/* Угловые кнопки */
.icon-btn {
  position: absolute; z-index: 5;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border: none; border-radius: 16px;
  background: rgba(0,0,0,0.3); color: var(--text);
  font-size: 22px; font-weight: 800; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.12);
}
.icon-btn:active { transform: scale(0.95); }
.icon-btn span { font-size: 15px; }
.corner-tl { top: 14px; left: 14px; }
.corner-tr { top: 14px; right: 14px; }

/* --- ГАЧА: лоток --- */
#gacha-center { display: flex; flex-direction: column; align-items: center; gap: 18px; }
#box {
  width: clamp(160px, 42vh, 320px); height: clamp(160px, 42vh, 320px);
  border: none; background: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(110px, 30vh, 220px);
  filter: drop-shadow(0 16px 24px rgba(0,0,0,0.4));
  transition: transform 0.08s ease;
}
#box:active { transform: scale(0.95); }
#box.shake { animation: boxShake 0.22s ease; }
@keyframes boxShake {
  0%,100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-5deg) scale(1.05); }
  50% { transform: rotate(4deg) scale(1.07); }
  75% { transform: rotate(-3deg) scale(1.04); }
}
#box.opening { animation: boxOpen 0.4s ease forwards; }
@keyframes boxOpen {
  0% { transform: scale(1); }
  40% { transform: scale(1.25) rotate(3deg); }
  100% { transform: scale(0.2); opacity: 0; }
}
#box-img { display: none; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
#box.has-img #box-img { display: block; }
#box.has-img #box-emoji { display: none; }

#tap-hint {
  font-size: 18px; font-weight: 800; color: var(--accent);
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
#tap-progress {
  width: min(70vw, 300px); height: 14px; border-radius: 999px;
  background: rgba(0,0,0,0.4); overflow: hidden; border: 1px solid rgba(255,255,255,0.12);
}
#tap-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #ff9f2e, var(--accent));
  transition: width 0.12s ease; box-shadow: 0 0 10px rgba(255,210,74,0.6);
}

/* --- РЕВИЛ (показ капибары) --- */
#reveal {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(3px);
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
#reveal-fx { position: absolute; inset: 0; pointer-events: none; }
/* лучи за карточкой (для эпик/легендарных) */
#reveal-fx.rays::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 160vmax; height: 160vmax; transform: translate(-50%,-50%);
  background: conic-gradient(from 0deg, transparent 0 8deg, rgba(255,210,90,0.16) 8deg 16deg);
  animation: spin 9s linear infinite;
}
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

#reveal-card {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 18px 26px; border-radius: 24px;
  background: rgba(20,16,40,0.5);
  animation: revealPop 0.5s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes revealPop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
#reveal-img {
  display: block; width: clamp(160px, 38vh, 300px); height: clamp(160px, 38vh, 300px);
  object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
}
#reveal-rarity { font-size: 22px; font-weight: 900; letter-spacing: 1px; }
#reveal-status { font-size: 15px; color: var(--muted); }
.big-btn {
  margin-top: 4px; padding: 14px 36px; border: none; border-radius: 16px;
  background: linear-gradient(180deg, #ffd24a, #e0a92a);
  color: #2a1d05; font-size: 17px; font-weight: 800; cursor: pointer;
  box-shadow: 0 6px 18px rgba(255,180,40,0.4);
}
.big-btn:active { transform: scale(0.97); }
/* Свечение карточки по редкости */
#reveal-card.common    { box-shadow: 0 0 40px var(--r-common); }
#reveal-card.rare      { box-shadow: 0 0 50px var(--r-rare); }
#reveal-card.epic      { box-shadow: 0 0 60px var(--r-epic); }
#reveal-card.legendary { box-shadow: 0 0 80px var(--r-legendary); }
#reveal-card.common    #reveal-rarity { color: var(--r-common); }
#reveal-card.rare      #reveal-rarity { color: var(--r-rare); }
#reveal-card.epic      #reveal-rarity { color: var(--r-epic); }
#reveal-card.legendary #reveal-rarity { color: var(--r-legendary); }

/* --- КОЛЛЕКЦИЯ --- */
#coll-title {
  position: absolute; top: 16px; left: 0; right: 0; text-align: center;
  font-size: 18px; font-weight: 800;
}
#coll-grid {
  display: grid; grid-template-columns: repeat(10, 1fr);
  gap: 8px; padding: 64px 16px 16px;
  width: 100%; max-width: 1100px; max-height: 100%; overflow-y: auto;
}
.slot {
  position: relative; aspect-ratio: 1;
  border-radius: 14px; background: rgba(0,0,0,0.22);
  border: 2px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
  transition: transform 0.08s ease;
}
.slot img { width: 86%; height: 86%; object-fit: contain; image-rendering: pixelated; }
.slot.locked img { filter: brightness(0); opacity: 0.55; }   /* силуэт */
.slot.locked { cursor: default; }
.slot.unlocked:active { transform: scale(0.92); }
.slot.bump { animation: bump 0.25s ease; }
@keyframes bump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.14); } }
/* рамки/свечение по редкости */
.slot.unlocked.rare      { border-color: var(--r-rare);      box-shadow: 0 0 12px var(--r-rare); }
.slot.unlocked.epic      { border-color: var(--r-epic);      box-shadow: 0 0 14px var(--r-epic); }
.slot.unlocked.legendary { border-color: var(--r-legendary); box-shadow: 0 0 18px var(--r-legendary); }

/* --- Тосты --- */
#toast {
  position: fixed; top: 70px; left: 0; right: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
}
.toast-item {
  background: rgba(0,0,0,0.5); color: var(--text);
  padding: 10px 18px; border-radius: 20px; font-size: 14px; font-weight: 700;
  opacity: 0; transform: translateY(-10px); transition: all 0.3s ease;
}
.toast-item.show { opacity: 1; transform: translateY(0); }

/* --- Эффекты: искры / конфетти / монеты (общие) --- */
.spark, .confetti {
  position: fixed; pointer-events: none; z-index: 45;
  transform: translate(-50%, -50%);
}
.spark { font-size: 20px; animation: sparkFly 0.9s ease-out forwards; }
.confetti { font-size: 22px; animation: confettiFly 1.2s ease-out forwards; }
@keyframes sparkFly {
  0% { opacity: 1; transform: translate(-50%,-50%) scale(0.5); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1.3); }
}
@keyframes confettiFly {
  0% { opacity: 1; transform: translate(-50%,-50%) scale(0.4) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--cx)), calc(-50% + var(--cy))) scale(1.2) rotate(220deg); }
}
#mega-flash {
  position: fixed; inset: 0; z-index: 42; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,210,90,0.5), transparent 70%);
  animation: flash 0.6s ease-out forwards;
}
@keyframes flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* --- Поворот телефона --- */
#rotate-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--bg); text-align: center; padding: 24px;
}
.rotate-icon { font-size: 72px; animation: rotateHint 1.6s ease-in-out infinite; }
@keyframes rotateHint { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-90deg); } }
#rotate-text { font-size: 18px; font-weight: 700; max-width: 320px; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate-overlay { display: flex; }
}

/* --- Бейдж "Коллекция" (понятнее для детей) -------------------------------- */
.icon-btn.wide { gap: 8px; padding: 9px 12px; }
.icon-btn .ic { font-size: 22px; }
#coll-label { font-size: 16px; font-weight: 800; }
.icon-btn .count-badge {
  font-size: 14px; font-weight: 900;
  background: var(--accent); color: #2a1d05;
  padding: 2px 9px; border-radius: 999px;
}

/* --- Просмотр капибары (тап по открытой в коллекции) ----------------------- */
#detail {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(3px);
  animation: fadeIn 0.2s ease;
}
#detail-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 30px; border-radius: 26px; background: rgba(20,16,40,0.55);
  animation: revealPop 0.4s cubic-bezier(.2,.9,.3,1.2);
}
#detail-img {
  width: clamp(180px, 44vh, 340px); height: clamp(180px, 44vh, 340px);
  object-fit: contain; image-rendering: pixelated; cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
  transition: transform 0.08s ease;
}
#detail-img:active { transform: scale(0.95); }
#detail-img.bump { animation: bump 0.25s ease; }
#detail-rarity { font-size: 22px; font-weight: 900; letter-spacing: 1px; }
#detail-num { font-size: 14px; color: var(--muted); }
#detail-hint { font-size: 13px; color: var(--muted); margin-top: 2px; }
#detail-card.common    { box-shadow: 0 0 40px var(--r-common); }
#detail-card.rare      { box-shadow: 0 0 50px var(--r-rare); }
#detail-card.epic      { box-shadow: 0 0 60px var(--r-epic); }
#detail-card.legendary { box-shadow: 0 0 80px var(--r-legendary); }
#detail-card.common    #detail-rarity { color: var(--r-common); }
#detail-card.rare      #detail-rarity { color: var(--r-rare); }
#detail-card.epic      #detail-rarity { color: var(--r-epic); }
#detail-card.legendary #detail-rarity { color: var(--r-legendary); }

/* --- Звёздный фон (генерируется в main.js) --------------------------------- */
#stars-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.star-d {
  position: absolute; pointer-events: none;
  animation: twinkle var(--tw, 3s) ease-in-out infinite;
  animation-delay: var(--td, 0s);
}
.star-d svg { display: block; }
@keyframes twinkle {
  0%, 100% { opacity: var(--o, 0.55); transform: scale(1); }
  50% { opacity: calc(var(--o, 0.55) * 0.35); transform: scale(0.82); }
}

/* --- Доп. эффекты: ударная волна, дождь, пульсация ------------------------- */
.shockwave {
  position: fixed; pointer-events: none; z-index: 44;
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 4px solid rgba(255,210,90,0.85); box-shadow: 0 0 24px rgba(255,180,40,0.7);
  animation: shockwaveExpand 0.7s ease-out forwards;
}
@keyframes shockwaveExpand { 0% { opacity: 0.9; transform: scale(0.2); } 100% { opacity: 0; transform: scale(9); } }

.rain {
  position: fixed; top: -50px; pointer-events: none; z-index: 45; font-size: 26px;
  animation: rainFall 1.7s linear forwards;
}
@keyframes rainFall { to { transform: translateY(118vh) rotate(360deg); opacity: 0.15; } }

/* Пульсирующее свечение карточки легендарной */
#reveal-card.legendary {
  animation: revealPop 0.5s cubic-bezier(.2,.9,.3,1.2), legGlow 1.4s ease-in-out 0.45s infinite;
}
@keyframes legGlow {
  0%, 100% { box-shadow: 0 0 55px var(--r-legendary); }
  50% { box-shadow: 0 0 110px var(--r-legendary), 0 0 30px var(--r-legendary); }
}

/* --- Группа кнопок справа-сверху (скип + звук) ----------------------------- */
.top-actions { position: absolute; display: flex; gap: 8px; z-index: 6; }
.top-actions .icon-btn { position: static; font-size: 22px; }

/* --- Обучение: рука-указатель + подсказка --------------------------------- */
#tutorial { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
#tut-hint {
  position: absolute; max-width: 240px; transform: translate(-50%, 0);
  background: var(--accent); color: #2a1d05;
  padding: 10px 16px; border-radius: 14px; font-size: 15px; font-weight: 800;
  text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
#tut-hand {
  position: absolute; font-size: 46px; transform: translate(-50%, -50%);
  animation: handTap 1s ease-in-out infinite;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.5));
}
@keyframes handTap {
  0%,100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -28%) scale(0.85); }
}
/* Пульсирующая подсветка цели обучения */
.tut-target { position: relative; z-index: 81; border-radius: 16px; animation: tutPulse 1.1s ease-in-out infinite; }
@keyframes tutPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,210,74,0.7); }
  50% { box-shadow: 0 0 0 12px rgba(255,210,74,0); }
}

/* --- Кнопки рекламы (reward) ----------------------------------------------- */
.ad-btn {
  margin-top: 12px;
  width: min(100%, 310px);
  min-height: 52px;
  padding: 10px 16px;
  border: none; border-radius: 14px; cursor: pointer;
  font-size: 14px; line-height: 1.2; font-weight: 800; color: #08381f;
  text-align: center; white-space: normal;
  background: linear-gradient(180deg, #5ee08a, #36c46b);
  box-shadow: 0 4px 0 #1f8f4a, 0 6px 14px rgba(0,0,0,0.3);
  transition: transform .08s ease, box-shadow .08s ease;
}
.ad-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #1f8f4a, 0 3px 8px rgba(0,0,0,0.3); }
#reveal-bonus { display: block; margin-left: auto; margin-right: auto; }

/* Поясняющая подпись под кнопкой рекламы: что именно получит игрок (п. 4.5.1) */
.ad-hint {
  margin-top: 6px; max-width: 260px; margin-left: auto; margin-right: auto;
  font-size: 12.5px; line-height: 1.3; color: var(--muted); text-align: center;
}

/* --- Загрузочный экран (держим, пока грузятся картинки капибар; п. 1.19) --- */
#boot {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(120% 120% at 50% 40%, var(--bg), var(--bg2));
}
body:not(.booting) #boot { display: none; }
body.booting #game, body.booting #toast { visibility: hidden; }
#boot-emoji { font-size: 62px; animation: bootPulse 1.1s ease-in-out infinite; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.4)); }
@keyframes bootPulse { 0%,100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.15); opacity: 1; } }
.boot-word { text-align: center; line-height: 0.95; }
.boot-word span { display: block; font-weight: 600; font-size: 20px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; }
.boot-word b { display: block; font-weight: 900; font-size: 40px; color: var(--accent); letter-spacing: 0.5px; text-shadow: 0 3px 12px rgba(0,0,0,0.45); }
.boot-bar { width: min(60vw, 220px); height: 8px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.boot-fill { height: 100%; width: 38%; border-radius: 999px; background: linear-gradient(90deg, #ff9f2e, var(--accent)); animation: bootSlide 1.1s ease-in-out infinite; }
@keyframes bootSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(330%); } }