/* World Archive — Origin Pass
   Подключать в index.php после gta6_style.css */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --gift-left: 25px;
  --gift-size: 44px;
}

.gift_overlay {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 6, 10, .78);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s cubic-bezier(.22, .9, .2, 1);
  perspective: 1400px;
}

.gift_overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.gift_card_wrap {
  width: min(460px, 100%);
  transform-style: preserve-3d;
  transition: transform .12s linear;
}

.gift_card {
  width: 100%;
  background:
    radial-gradient(460px 200px at 50% -10%, rgba(255, 61, 138, .2), transparent 58%),
    radial-gradient(280px 160px at 100% 100%, rgba(255, 176, 58, .1), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 22%),
    linear-gradient(180deg, #0c1017 0%, #141a24 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px;
  padding: 22px 26px 18px;
  position: relative;
  overflow: hidden;
  transform: translateY(28px) scale(.985);
  opacity: 0;
  box-shadow:
    0 40px 90px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 0 80px rgba(255, 61, 138, .08);
  transition: transform .7s cubic-bezier(.22, .9, .2, 1), opacity .7s cubic-bezier(.22, .9, .2, 1);
  color: #f4f6fb;
}

.gift_overlay.is-open .gift_card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.gift_card_wrap.is-fly {
  transition: transform .55s cubic-bezier(.22, .9, .2, 1), opacity .45s ease;
  opacity: 0;
}

.gift_card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff3d8a, #ff6b5b, #ffb03a);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.22, .9, .2, 1) .12s;
}

.gift_overlay.is-open .gift_card::after {
  transform: scaleX(1);
}

.gift_foil {
  position: absolute;
  inset: -40% -20%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .08) 47%, rgba(255, 176, 58, .16) 50%, rgba(255, 61, 138, .12) 53%, transparent 64%);
  transform: translateX(-30%);
  opacity: 0;
  mix-blend-mode: screen;
}

.gift_overlay.is-open .gift_foil {
  animation: giftFoil 2.6s cubic-bezier(.22, .9, .2, 1) .15s both;
}

@keyframes giftFoil {
  0% {
    transform: translateX(-45%);
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  100% {
    transform: translateX(45%);
    opacity: 0;
  }
}

.gift_scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255, 255, 255, .014) 3px 4px);
}

.gift_scan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 56px;
  background: linear-gradient(180deg, transparent, rgba(255, 61, 138, .12), transparent);
  animation: giftScan 3.8s cubic-bezier(.22, .9, .2, 1) infinite;
  opacity: 0;
}

.gift_overlay.is-open .gift_scan::after {
  opacity: 1;
}

@keyframes giftScan {
  0% {
    top: -56px;
  }

  100% {
    top: 110%;
  }
}

.gift_ribbon {
  position: absolute;
  top: 16px;
  right: -40px;
  width: 168px;
  transform: rotate(32deg);
  background: linear-gradient(180deg, #ff3d8a, #ff6b5b, #ffb03a);
  color: #14080d;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 0;
  font-weight: 500;
}

.gift_kicker {
  text-align: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: rgba(244, 246, 251, .55);
}

.gift_title {
  text-align: center;
  margin-top: 6px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.05;
}

.gift_title em {
  font-style: italic;
  background: linear-gradient(180deg, #ff3d8a, #ff6b5b, #ffb03a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gift_code_row {
  margin: 14px auto 6px;
  display: flex;
  justify-content: center;
}

.gift_code_chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 9, 14, .55);
  padding: 7px 12px 7px 10px;
  position: relative;
}

.gift_code_chip::before,
.gift_code_chip::after {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  width: 1px;
  background: linear-gradient(180deg, #ff3d8a, #ffb03a);
  opacity: .7;
}

.gift_code_chip::before {
  left: 5px;
}

.gift_code_chip::after {
  right: 5px;
}

.gift_code_chip .lbl {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 246, 251, .55);
}

.gift_code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 18px;
  letter-spacing: .28em;
  font-weight: 600;
  background: linear-gradient(180deg, #ff3d8a, #ff6b5b, #ffb03a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 61, 138, .35));
}

.gift_desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(244, 246, 251, .72);
  text-align: center;
  max-width: 36ch;
  margin: 8px auto 0;
  font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
}

.gift_vault {
  margin: 16px auto 4px;
  width: 250px;
  height: 250px;
  position: relative;
  display: grid;
  place-items: center;
}

.gift_vault svg {
  width: 250px;
  height: 250px;
  display: block;
  overflow: visible;
}

.gift_vault_core {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.gift_vault_kicker {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(244, 246, 251, .55);
  margin-bottom: 4px;
}

.gift_digits {
  display: flex;
  gap: 3px;
  height: 58px;
  overflow: hidden;
  filter: drop-shadow(0 0 18px rgba(255, 61, 138, .4));
}

.gift_digit {
  width: 34px;
  height: 58px;
  overflow: hidden;
}

.gift_digit .reel {
  display: flex;
  flex-direction: column;
  transition: transform 1.15s cubic-bezier(.16, 1, .3, 1);
}

.gift_digit span {
  height: 58px;
  display: grid;
  place-items: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  background: linear-gradient(180deg, #ff3d8a, #ff6b5b, #ffb03a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gift_vault_unit {
  margin-top: 2px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.gift_vault_unit b {
  color: rgba(244, 246, 251, .55);
  font-weight: 400;
}

.gift_halo {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 61, 138, .18), transparent 62%);
  filter: blur(8px);
  animation: giftGlow 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes giftGlow {

  0%,
  100% {
    opacity: .4;
    transform: scale(.94);
  }

  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

.gift_ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gift_tick {
  position: absolute;
  left: calc(50% - 1px);
  top: 50%;
  width: 2px;
  height: 8px;
  margin-top: -4px;
  background: rgba(255, 255, 255, .16);
  transform-origin: 1px 0;
}

.gift_tick.on {
  background: linear-gradient(90deg, #ff3d8a, #ffb03a);
  box-shadow: 0 0 6px rgba(255, 61, 138, .45);
}

.gift_tick.major {
  height: 11px;
}

.gift_stats {
  margin: 6px auto 0;
  width: min(340px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.gift_stat {
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(7, 9, 14, .4);
  padding: 8px 6px 7px;
  text-align: center;
}

.gift_stat b {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
  color: #f4f6fb;
  font-weight: 500;
}

.gift_stat span {
  display: block;
  margin-top: 3px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244, 246, 251, .55);
}

.gift_stat.hot b {
  background: linear-gradient(180deg, #ff3d8a, #ff6b5b, #ffb03a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gift_hint {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(244, 246, 251, .55);
}

.gift_actions {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 10px;
}

.gift_btn {
  position: relative;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: #0e1218;
  color: #f4f6fb;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
}

.gift_btn .fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #ff3d8a, #ff6b5b, #ffb03a);
  clip-path: inset(100% 0 0 0);
  transition: clip-path .42s cubic-bezier(.22, .9, .2, 1);
}

.gift_btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff3d8a, #ffb03a);
}

.gift_btn span {
  position: relative;
  z-index: 1;
}

.gift_btn:hover {
  color: #0b0d12;
  border-color: transparent;
}

.gift_btn:hover .fill {
  clip-path: inset(0);
}

.gift_later {
  grid-column: 1 / -1;
  height: 34px;
  border: 0;
  background: transparent;
  color: rgba(244, 246, 251, .55);
  font: inherit;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
}

.gift_later:hover {
  color: #f4f6fb;
}

.gift_toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  z-index: 9810;
  padding: 11px 18px;
  background: #10131a;
  border: 1px solid rgba(255, 255, 255, .16);
  color: #f4f6fb;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}

.gift_toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.gift_mini {
  position: fixed;
  top: 22px;
  right: 22px;
  bottom: auto;
  z-index: 5000;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 107, 91, .45);
  background: #10131a;
  color: #f4f6fb;
  display: none;
  place-items: center;
  cursor: pointer;
}

.gift_mini.is-on {
  display: grid;
}

.gift_mini.is-catch {
  animation: giftMiniCatch .45s cubic-bezier(.22, .9, .2, 1);
}

.gift_mini::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(255, 61, 138, .35);
  animation: giftMiniPulse 2.4s ease infinite;
  pointer-events: none;
}

.gift_mini svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 6px rgba(255, 61, 138, .55));
}

@keyframes giftMiniPulse {

  0%,
  100% {
    opacity: .22;
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 14px rgba(255, 61, 138, .28);
  }
}

@keyframes giftMiniCatch {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.18);
  }

  100% {
    transform: scale(1);
  }
}

.gift_mini:hover {
  animation: giftMiniShake .45s ease;
}

@keyframes giftMiniShake {

  0%,
  100% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(-12deg);
  }

  40% {
    transform: rotate(10deg);
  }

  60% {
    transform: rotate(-8deg);
  }

  80% {
    transform: rotate(6deg);
  }
}

/* квадрат + без оборота. Заливка — только из gta6_style.css */
.help_button,
.settings_button {
  border-radius: 2px !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.help_button::before,
.settings_button::before {
  border-radius: 0 !important;
}
.help_button:hover,
.settings_button:hover {
  transform: none !important;
}
.gear_open,
.gear_close {
  animation: none !important;
}

.gift_overlay:not(.is-open) .gift_card_wrap {
  opacity: 0 !important;
  transition: none !important;
}

@media (max-width: 768px) {
  .gift_overlay {
    padding: 12px;
    align-items: start;
    padding-top: 58px;
  }

  .gift_card_wrap {
    width: min(340px, 100%);
  }

  .gift_mini {
    top: auto !important;
    right: auto !important;
    left: 15px !important;
    bottom: calc(env(safe-area-inset-bottom) + 120px) !important;
    width: 35px !important;
    height: 35px !important;
  }

  .gift_mini svg {
    width: 18px;
    height: 18px;
  }

  .gift_title {
    font-size: 22px;
  }

  .gift_kicker {
    font-size: 8px;
    letter-spacing: .28em;
  }

  .gift_card {
    padding: 14px 12px 10px;
  }

  .gift_ribbon {
    display: none;
  }

  .gift_code {
    font-size: 15px;
    letter-spacing: .2em;
  }

  .gift_desc {
    font-size: 12px;
    margin-top: 6px;
  }

  .gift_vault,
  .gift_vault svg {
    width: 168px;
    height: 168px;
  }

  .gift_vault {
    margin: 8px auto 0;
  }

  .gift_digit {
    width: 22px;
    height: 36px;
  }

  .gift_digit span {
    height: 36px;
    font-size: 28px;
  }

  .gift_digits {
    height: 36px;
  }

  .gift_vault_unit {
    font-size: 8px;
  }

  .gift_stats {
    margin-top: 4px;
    gap: 6px;
  }

  .gift_stat {
    padding: 6px 4px;
  }

  .gift_stat b {
    font-size: 12px;
  }

  .gift_hint {
    margin-top: 8px;
    font-size: 11px;
  }

  .gift_actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
  }

  .gift_btn {
    height: 40px;
    font-size: 10px;
  }
}