/* ==========================================================================
   Şans kutuları — kart ekleri ve açılış penceresi (assets/js/boxes.js)
   Kart iskeleti (küp, ışık, gölge) pages.css'te. Burada: olasılık tablosu,
   son açılanlar ve açılış sahnesi. Animasyonlar yalnızca transform/opacity; sonsuz
   dönenler yalnızca pencere açıkken çalışır (kapalı modal content-visibility ile atlanır).
   Aşamalar [data-phase]: ready → charge → reveal (+ is-loss | is-win | is-big | is-top).
   ========================================================================== */

/* ---------- kart: olasılık tablosu ---------- */
.mbox__body { align-content: start; }
.mbox ul { margin-bottom: 2px; }
.mbox__odds { margin: 2px 0 8px; border-radius: 12px; background: rgba(4, 8, 20, .35); border: 1px solid var(--line); }
.mbox__odds summary {
  display: flex; align-items: center; gap: 7px; padding: 9px 11px; cursor: pointer; list-style: none;
  color: var(--text-dim); font-size: 12.5px; font-weight: 700;
}
.mbox__odds summary::-webkit-details-marker { display: none; }
.mbox__odds summary .ico { width: 14px; height: 14px; }
.mbox__odds summary .ico:last-child { margin-left: auto; transition: transform .3s var(--ease); }
.mbox__odds[open] summary .ico:last-child { transform: rotate(180deg); }
.mbox__odds table { width: calc(100% - 22px); margin: 0 11px; border-collapse: collapse; font-size: 12.5px; }
.mbox__odds th { padding: 3px 0; color: var(--text-dim); font-weight: 700; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mbox__odds td { padding: 3px 0 3px 8px; color: var(--text-mute); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mbox__odds td:nth-child(2) { width: 100%; }
.mbox__odds td i { display: block; min-width: 40px; height: 5px; border-radius: 5px; background: color-mix(in srgb, var(--box) 60%, transparent); transform: scaleX(var(--w, .03)); transform-origin: left; }
.mbox__odds tr.is-win th { color: color-mix(in srgb, var(--box) 70%, #fff); }
.mbox__odds small { display: block; padding: 6px 11px 10px; color: var(--text-mute); font-size: 11.5px; }
.mbox__odds[open] tbody { animation: fade-up .35s var(--ease); }
.mbox .btn .ico { width: 17px; height: 17px; }

/* ---------- son açtıkların ---------- */
.box-recent { margin-top: 22px; padding: 16px; border-radius: var(--radius-lg); background: var(--glass); border: 1px solid var(--line); }
.box-recent__head h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.box-recent__head .ico { width: 18px; height: 18px; color: var(--accent-hi); }
.box-recent__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 12px; }
.box-recent__list li {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px;
  background: rgba(4, 8, 20, .4); border: 1px solid var(--line);
}
.box-recent__list li.is-new { animation: card-in .5s var(--ease-spring) both; }
.box-recent__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(var(--accent-rgb), .12); color: var(--accent-hi); }
.box-recent__ico .ico { width: 16px; height: 16px; }
.box-recent__text { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.box-recent__text b { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.box-recent__text small { color: var(--text-mute); font-size: 12px; }
.box-recent__prize { font-family: var(--font-display); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.box-recent__list li.is-win .box-recent__prize { color: var(--green-hi); }

.box-note { display: flex; gap: 8px; margin-top: 16px; color: var(--text-mute); font-size: 12.5px; line-height: 1.5; }
.box-note .ico { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; color: var(--accent-hi); }
.box-empty { display: grid; justify-items: center; gap: 6px; padding: 50px 20px; text-align: center; color: var(--text-mute); }
.box-empty .ico { width: 36px; height: 36px; }
.box-empty b { color: var(--text); font-size: 16px; }

/* ==========================================================================
   Açılış penceresi
   ========================================================================== */
.modal--box .modal__box.bxo {
  --box: #4ea1ff;
  max-width: 460px; padding: 22px 22px 18px; overflow-x: hidden;
  background:
    radial-gradient(90% 55% at 50% 22%, color-mix(in srgb, var(--box) 26%, transparent), transparent 70%),
    var(--bg-1);
  border-color: color-mix(in srgb, var(--box) 30%, var(--line-strong));
}

/* ---------- sahne ---------- */
/* tek hücre, sahne boyunda: ışınlar sahneden büyük, hücreyi büyütmeden ortada taşsın */
.bxo__stage {
  position: relative; display: grid; grid-template: 100% / 100%; place-items: center;
  height: 250px; margin: 4px -22px 0; perspective: 900px; overflow: hidden;
}
.bxo__stage > * { grid-area: 1 / 1; }

.bxo__aura {
  width: 230px; height: 230px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--box) 50%, transparent), transparent 66%);
  animation: glow-pulse 3s ease-in-out infinite;
}
.bxo__rays {
  width: 520px; height: 520px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--box) 34%, transparent) 0deg 9deg, transparent 9deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 64%); mask: radial-gradient(circle, #000 18%, transparent 64%);
  opacity: 0; transform: scale(.5);
  transition: opacity .6s var(--ease), transform .9s var(--ease);
}
.bxo__flash {
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), color-mix(in srgb, var(--box) 60%, transparent) 30%, transparent 65%);
  opacity: 0; transform: scale(.2); pointer-events: none;
}
.bxo__beam {
  align-self: end; width: 120px; height: 260px; margin-bottom: 92px;
  background: linear-gradient(0deg, color-mix(in srgb, var(--box) 75%, #fff), color-mix(in srgb, var(--box) 25%, transparent) 55%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  opacity: 0; transform: scaleY(0); transform-origin: bottom;
}
.bxo__float { animation: float-y 3.4s ease-in-out infinite; }
.bxo__shake { transform-style: preserve-3d; }
.bxo__cube { --s: 112px; animation: bxo-idle 9s linear infinite; }
@keyframes bxo-idle { from { transform: rotateX(-18deg) rotateY(-20deg); } to { transform: rotateX(-18deg) rotateY(340deg); } }
.bxo__lid { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 0 0 3px color-mix(in srgb, var(--box) 40%, transparent); }
.bxo__shadow {
  align-self: end; width: 120px; height: 18px; margin-bottom: 44px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .6), transparent 70%);
  animation: bxo-shadow 3.4s ease-in-out infinite;
}
@keyframes bxo-shadow { 50% { transform: scaleX(.82); opacity: .7; } }

/* ödül kartı */
.bxo__prize {
  z-index: 3; display: grid; justify-items: center; gap: 2px;
  padding: 12px 22px 14px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(8, 13, 26, .92), rgba(8, 13, 26, .8));
  border: 1px solid color-mix(in srgb, var(--box) 45%, transparent);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9), 0 0 50px -12px color-mix(in srgb, var(--box) 70%, transparent);
  opacity: 0; transform: translateY(46px) scale(.55); pointer-events: none;
}
.bxo__prize small { color: #c2cde6; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.bxo__prize b { font-family: var(--font-display); font-size: clamp(30px, 8vw, 40px); font-weight: 900; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; }
.bxo__prize em { color: #98a6c8; font-size: 12.5px; font-style: normal; font-weight: 700; }

/* konfeti (boxes.js parçaları üretir, --x --y --r --c --d) */
.bxo__confetti { position: relative; z-index: 4; width: 0; height: 0; pointer-events: none; }
.bxo__confetti i {
  position: absolute; left: 0; top: 0; width: 8px; height: 13px; margin: -6px 0 0 -4px; border-radius: 2px;
  background: var(--c); opacity: 0;
  animation: bxo-confetti 1.5s cubic-bezier(.15, .7, .3, 1) var(--d) forwards;
}
.bxo__confetti i:nth-child(3n) { width: 7px; height: 7px; border-radius: 50%; }
@keyframes bxo-confetti {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0) scale(.6); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
}

/* ---------- 1. hazır ---------- */
.bxo__info { display: grid; justify-items: center; gap: 4px; margin-top: 2px; text-align: center; }
.bxo__info .mbox__rarity { justify-self: center; }
.bxo__info h3 { font-size: 22px; }
.bxo__status { min-height: 20px; color: var(--text-dim); font-size: 13.5px; }
.bxo__status b { color: var(--text); }

.bxo__ladder {
  display: flex; gap: 6px; margin: 10px -22px 0; padding: 7px 22px 8px; overflow-x: auto;
  scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent); mask: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}
.bxo__ladder::-webkit-scrollbar { display: none; }
.bxo__ladder li {
  display: grid; justify-items: center; flex-shrink: 0; min-width: 74px; padding: 7px 10px; border-radius: 12px;
  background: rgba(4, 8, 20, .45); border: 1px solid var(--line);
  transition: transform .4s var(--ease-spring), border-color .3s, background-color .3s, opacity .3s;
}
.bxo__ladder b { font-family: var(--font-display); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bxo__ladder small { color: var(--text-mute); font-size: 11px; font-variant-numeric: tabular-nums; }
.bxo__ladder li.is-win b { color: color-mix(in srgb, var(--box) 70%, #fff); }
.bxo[data-phase="reveal"] .bxo__ladder li { opacity: .45; }
.bxo[data-phase="reveal"] .bxo__ladder li.is-hit {
  opacity: 1; transform: translateY(-3px) scale(1.06);
  border-color: color-mix(in srgb, var(--box) 75%, #fff); background: color-mix(in srgb, var(--box) 22%, rgba(4, 8, 20, .6));
  box-shadow: 0 10px 24px -12px var(--box);
}

.bxo__actions { display: grid; gap: 8px; margin-top: 14px; }
.bxo__go .ico { width: 19px; height: 19px; }
.bxo__balance { margin-top: 10px; color: var(--text-mute); font-size: 12.5px; text-align: center; }
.bxo__balance b { color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ---------- 2. sallanma (sunucu yanıtı beklenirken, en az ~1,3 sn) ---------- */
.bxo[data-phase="charge"] .bxo__cube { animation: bxo-front .6s var(--ease) forwards; }
@keyframes bxo-front { to { transform: rotateX(-14deg) rotateY(-8deg) scale(1.06); } }
.bxo[data-phase="charge"] .bxo__shake { animation: bxo-jitter .11s linear infinite alternate .35s; }
@keyframes bxo-jitter {
  0%   { transform: translate(-2px, 0) rotate(-2.2deg); }
  50%  { transform: translate(2px, -1px) rotate(1.6deg); }
  100% { transform: translate(-1px, 1px) rotate(2.4deg); }
}
.bxo[data-phase="charge"] .bxo__aura { animation: bxo-charge-aura 1.4s var(--ease) forwards; }
@keyframes bxo-charge-aura { to { transform: scale(1.45); opacity: 1; } }
.bxo[data-phase="charge"] .bxo__float { animation-play-state: paused; }
.bxo[data-phase="charge"] .bxo__actions, .bxo[data-phase="charge"] .modal__x { opacity: .4; pointer-events: none; }

/* ---------- 3. açılış ---------- */
.bxo[data-phase="reveal"] .bxo__cube { animation: bxo-drop .7s var(--ease) forwards; }
@keyframes bxo-drop {
  0%   { transform: rotateX(-14deg) rotateY(-8deg) scale(1.06); }
  35%  { transform: rotateX(-26deg) rotateY(0) scale(.92) translateY(14px); }
  100% { transform: rotateX(-24deg) rotateY(0) scale(.86) translateY(22px); }
}
.bxo[data-phase="reveal"] .bxo__lid { animation: bxo-lid .8s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes bxo-lid {
  0%   { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); opacity: 1; }
  100% { transform: translateY(-190px) translateX(70px) rotateZ(38deg) rotateX(160deg) translateZ(calc(var(--s) / 2)); opacity: 0; }
}
.bxo[data-phase="reveal"] .bxo__flash { animation: bxo-flash .6s ease-out; }
@keyframes bxo-flash { 0% { opacity: 0; transform: scale(.2); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(1.5); } }
.bxo[data-phase="reveal"] .bxo__beam { animation: bxo-beam .9s var(--ease) .05s forwards; }
@keyframes bxo-beam { 0% { opacity: 0; transform: scaleY(0); } 40% { opacity: .9; } 100% { opacity: .45; transform: scaleY(1); } }
.bxo[data-phase="reveal"] .bxo__rays { opacity: .9; transform: scale(1); animation: spin-t 16s linear infinite; }
.bxo[data-phase="reveal"] .bxo__prize { animation: bxo-prize .7s var(--ease-spring) .22s forwards; }
@keyframes bxo-prize { to { opacity: 1; transform: translateY(-18px) scale(1); } }
.bxo[data-phase="reveal"] .bxo__float { animation-play-state: paused; }

/* sonucun tonu: fiyatından az · fiyat ve üstü · 5 kat ve üstü · en büyük ödül */
.bxo.is-loss .bxo__rays { opacity: .35; }
.bxo.is-loss .bxo__prize b { color: #dfe6f7; }
.bxo.is-win .bxo__prize { border-color: rgba(74, 222, 128, .55); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9), 0 0 60px -10px rgba(74, 222, 128, .6); }
.bxo.is-win .bxo__prize b { color: #86efac; }
.bxo.is-big .bxo__prize, .bxo.is-top .bxo__prize { border-color: rgba(245, 196, 81, .7); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9), 0 0 80px -6px rgba(245, 196, 81, .7); }
.bxo.is-big .bxo__prize b, .bxo.is-top .bxo__prize b {
  background: linear-gradient(180deg, #fff6d6 10%, #f5c451 60%, #e09a1c); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bxo.is-top .bxo__prize { animation: bxo-prize .7s var(--ease-spring) .22s forwards, bxo-throb 1.2s ease-in-out 1s infinite; }
@keyframes bxo-throb { 50% { transform: translateY(-18px) scale(1.06); } }

@media (max-width: 767px) {
  .modal--box .modal__box.bxo { padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
  .bxo__stage { height: 220px; margin: 0 -16px; }
  .bxo__cube { --s: 96px; }
  .bxo__ladder { margin: 8px -16px 0; padding: 7px 16px 8px; }
  .box-recent__list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .bxo *, .bxo *::before { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}