/* Экран игры V6: «Выбери подарок». */

/* Confetti after "Забрать": full-screen layer above everything, drawn only while particles are alive (confetti.js) */
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.wrap:has(#screen-game.active) { padding-bottom: 20px; }
#screen-game { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* Рама щита: тёмный корпус + планка с логотипом, наклон за курсором на десктопе */
/* щит занимает всю свободную высоту экрана, чтобы внизу не оставалось пустого полотна */
.rig {
  flex: 1; display: flex; flex-direction: column; min-height: 300px; max-height: 640px;
  padding: 8px 8px 0;
  background: #1a1920;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.2s ease-out;
}
.rig-bar { height: 28px; display: grid; place-items: center; color: #d9d6e0; font: 600 11px/1 var(--display); letter-spacing: 0.1em; }
.rig-bar::before { content: "↗ BOGNAT"; }

.rig-screen {
  position: relative; flex: 1; min-height: 0;
  border-radius: 4px;
  box-shadow: 0 0 34px 2px rgba(143, 124, 242, 0.25);
}
.rig.won .rig-screen { animation: won 1.6s ease-out both; }
@keyframes won {
  0% { box-shadow: 0 0 0 0 rgba(242, 122, 217, 0.9); }
  100% { box-shadow: 0 0 60px 6px rgba(143, 124, 242, 0.35); }
}

/* V6: переключатель + экран, который сдвигается между двумя подарками. Логика — в app.js. */

/* Переключатель: градиентная «таблетка» плавно переезжает под активную кнопку */
.seg {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(8, 8, 12, 0.78);
  transition: opacity 0.5s;
}
.seg-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px;
  background: linear-gradient(95deg, var(--pink), var(--violet) 50%, var(--blue));
  transition: transform 0.5s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.seg[data-face="1"] .seg-thumb { transform: translateX(100%); }
.seg-btn {
  position: relative; height: 48px; border: 0; background: none; cursor: pointer;
  color: var(--muted); font: 800 16px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent; transition: color 0.4s;
}
.seg-btn.on { color: #0b0a10; }
.seg.locked { opacity: 0.4; pointer-events: none; }

/* Экран: две панели в ряд, сдвиг по X */
.deck { overflow: hidden; touch-action: pan-y; background: #000; }
.slides { position: absolute; inset: 0; display: flex; transform: translateX(calc(var(--face, 0) * -100%)); transition: transform 0.6s cubic-bezier(0.3, 0.9, 0.3, 1); }
.slides.instant { transition: none; }
.slides .pane { flex: 0 0 100%; }
.deck.flash { animation: crt 0.7s ease-out; }
@keyframes crt { 0% { filter: brightness(3) contrast(1.4); } 100% { filter: none; } }

/* Кнопка «Забрать» */
.take {
  width: 100%; height: 56px; margin-top: 14px; border: 0; border-radius: 12px;
  background: rgba(255, 255, 255, 0.08); color: #0b0a10;
  font: 800 16px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s;
  position: relative; overflow: hidden;
}
.take::before { /* градиентная заливка — отдельным слоем */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, var(--pink), var(--violet) 50%, var(--blue));
}
.take span { position: relative; display: inline-block; }
.take:active { transform: scale(0.98); }
.take:disabled { cursor: default; }
.take.swap span { animation: labelIn 0.4s ease-out; }
@keyframes labelIn { from { opacity: 0; transform: translateY(6px); } }

.cta { margin: 14px auto 0; max-width: 340px; text-align: center; font-size: 13px; font-weight: 500; line-height: 1.45; color: #cfccd6; text-wrap: balance; animation: fade 0.5s ease-out; }

/* Верхний лист на игровом экране приглушён, чтобы не бил по глазам */
.bg-fold-top { transition: opacity 0.6s; }
body:has(#screen-game.active) .bg-fold-top { opacity: 0.55; }