/* Prism: the box page's shared pieces on top of the plugin's own
   styles. The prizes run along a pale glass rail, each on a small white
   card banded in its tier's colour, with a prism pointing down at the
   marked place; the open key is the theme's accent button; the result is
   a box of frosted glass that turns over to show the prize on a white
   card in its tier's colour while shards of the spectrum fly out; every
   claim panel after it is a white card. */
@import url("../../../../components/mystery-box/styles.css");

/* ── Keys ── */
html .spin-btn, html.dark .spin-btn, html.dark button.spin-btn {
  position: relative; overflow: hidden;
  padding: .85rem 2.3rem;
  background: var(--btn-face), var(--btn-bg);
  color: var(--btn-ink);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--btn-shadow);
  font-family: var(--font-ui, inherit); font-size: 1rem; font-weight: 600; letter-spacing: 0;
  transition: transform .15s ease, box-shadow .2s ease;
}
html .spin-btn:hover:not(:disabled), html.dark .spin-btn:hover:not(:disabled) {
  background: var(--btn-face), var(--btn-bg-hover, var(--btn-bg)); color: var(--btn-ink);
  transform: translateY(-1px); box-shadow: var(--btn-shadow-hover);
}
html .spin-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--btn-shadow-down); }
html .spin-btn:disabled, html.dark .spin-btn:disabled { background: var(--paper-3); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--rule); cursor: not-allowed; }
html .spin-btn:focus-visible { outline: 2px solid var(--psm-focus); outline-offset: 3px; }

.winnings-btn {
  position: relative;
  font-family: var(--font-ui, inherit); font-size: .85rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 999px; padding: .6rem 1.3rem;
  box-shadow: var(--shadow);
  transition: border-color .2s ease, color .2s ease;
}
.winnings-btn:hover { color: var(--psm-accent-text); border-color: var(--psm-accent-line); }
#unclaimedBadge { background: var(--psm-live) !important; color: #ffffff !important; box-shadow: 0 0 0 2px var(--paper-2) !important; animation: none !important; }
/* after dark the live red is a light coral: the count goes to ink */
html.dark #unclaimedBadge { color: #0d0f17 !important; }

/* ── Panels: white cards ── */
.mystery-panel, .mystery-modal-panel {
  position: relative; overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.mystery-panel::before, .mystery-modal-panel::before { display: none; }
.prize-card, .winner-card, .wf-item-row, .mystery-input { border-radius: var(--radius-sm); }
.prize-card:hover { border-color: var(--psm-accent-line); }
.section-rule { height: 1px; border-radius: 0; background: var(--rule); }
.mystery-input { font-family: var(--font-ui, inherit); }
.mystery-input:focus { border-color: var(--psm-accent); box-shadow: 0 0 0 4px var(--psm-accent-soft); }
.wf-item-row { background: var(--paper-3); border: 0; box-shadow: none; }

/* ── The rail ── */
.psm-track-panel { padding: 1.2rem 0 1.6rem; background: var(--paper-2); }
/* A prism pointing down at the marked place */
.psm-track__pointer { position: relative; z-index: 4; height: 2.4rem; display: flex; justify-content: center; }
.psm-track__pointer::before {
  content: ''; width: 26px; height: 22px; margin-top: .2rem;
  background: var(--psm-accent);
  -webkit-mask: var(--psm-prism-solid) center / contain no-repeat; mask: var(--psm-prism-solid) center / contain no-repeat;
  transform: rotate(180deg);
  filter: drop-shadow(0 4px 6px rgba(var(--psm-accent-rgb), .35));
}
.psm-track__pointer::after { display: none; }
.psm-track__tip { position: absolute; z-index: 25; top: 2.2rem; left: 50%; width: 2px; height: 10px; margin-left: -1px; border-radius: 2px; background: var(--psm-accent); opacity: .5; }
@media (prefers-reduced-motion: no-preference) { .psm-track-panel.is-running .psm-track__pointer::before { animation: psm-mb-tap .5s ease-in-out infinite; } }
@keyframes psm-mb-tap { 0%, 100% { transform: rotate(180deg) translateY(0); } 50% { transform: rotate(180deg) translateY(-3px); } }
#spinner-container.psm-track {
  height: 10.5rem;
  margin: .2rem .9rem 0;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--paper-3), color-mix(in srgb, var(--paper-3) 60%, var(--psm-accent-soft)));
  box-shadow: inset 0 0 0 1px var(--rule);
}
.psm-track__mark { position: absolute; z-index: 20; top: 8px; bottom: 8px; left: 50%; width: 8.2rem; margin-left: -4.1rem; border-radius: var(--radius-md); box-shadow: 0 0 0 2px var(--psm-accent), 0 0 0 6px var(--psm-accent-soft); pointer-events: none; }
.psm-track__shade { background: linear-gradient(to right, var(--paper-2) 0%, transparent 18%, transparent 82%, var(--paper-2) 100%); border-radius: var(--radius-md); }
.psm-track__rail { display: none; }
/* A prize on its card, banded along the foot in its tier's colour */
.psm-sq {
  position: relative;
  width: 7.2rem; height: 8.6rem; padding: 1.2rem .45rem .5rem;
  background: transparent;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.psm-sq::before { content: ''; position: absolute; left: 6%; right: 6%; top: .6rem; bottom: .4rem; border-radius: var(--radius-sm); background: linear-gradient(0deg, var(--r) 0 4px, transparent 4px), var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule), 0 6px 14px -8px rgba(16, 18, 28, .25); }
.psm-sq__band { display: none; }
.psm-sq__img { position: relative; z-index: 1; width: 3.4rem; height: 3.4rem; object-fit: contain; }
.psm-sq__name {
  position: relative; z-index: 1; margin-top: .55rem; padding: 0 .3rem;
  font: 600 .7rem/1.25 var(--font-ui, inherit); color: var(--ink-2);
  overflow-wrap: break-word; max-width: 100%;
}
/* Under the pointer the prize lifts a little */
.psm-sq.highlighted { transform: translateY(-3px); z-index: 2; }
.psm-sq.highlighted::before { box-shadow: inset 0 0 0 2px var(--r), 0 10px 20px -8px rgba(16, 18, 28, .3); }
.psm-track__cta { padding: 0 1rem; }
.psm-track__login { display: inline-flex; }
/* Why the box can't be opened: a soft note with a red edge */
.psm-track__note {
  display: inline-flex; align-items: flex-start; gap: .5rem; max-width: 30rem; margin-top: .6rem;
  padding: .7rem .95rem; text-align: start;
  font-size: .9rem; font-weight: 500; line-height: 1.45; color: var(--ink-2);
  background: var(--psm-bad-soft); border-radius: var(--radius-sm); box-shadow: inset 3px 0 0 var(--psm-bad);
}
[dir="rtl"] .psm-track__note { box-shadow: inset -3px 0 0 var(--psm-bad); }
.psm-track__note > i { color: var(--psm-bad); margin-top: .2rem; }
.psm-track__note a { color: var(--psm-bad); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.psm-track__left { color: var(--ink-soft); font-family: var(--font-ui); font-weight: 500; }
@media (max-width: 480px) {
  #spinner-container.psm-track { height: 9.8rem; margin: .2rem .55rem 0; }
  .psm-sq { width: 6.2rem; height: 8rem; }
  .psm-sq__img { width: 2.9rem; height: 2.9rem; }
  .psm-track__mark { width: 7.2rem; margin-left: -3.6rem; }
}

/* ── The reveal (#wfAnnounce): a box of frosted glass is turned over to
   show the prize on a white card banded in its tier's colour while shards
   of the spectrum fly out; table.js sets data-rarity on the modal and
   starts it with .is-opening. Without it the card shows. ── */
#winFlowModal { background: rgba(13, 15, 23, .5) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.dark #winFlowModal { background: rgba(5, 6, 10, .72) !important; }
.psm-wf-announce { padding-top: 1.6rem !important; }
.psm-reveal { position: relative; width: 11rem; max-width: 100%; aspect-ratio: 5 / 6; margin: .6rem auto .9rem; isolation: isolate; perspective: 900px; }
.psm-reveal__pool { position: absolute; z-index: -1; left: -45%; right: -45%; top: -25%; bottom: -15%; background: radial-gradient(closest-side, var(--psm-accent-glow), transparent); }
.psm-reveal__card { position: absolute; inset: 0; display: block; transform-style: preserve-3d; }
.psm-reveal__face, .psm-reveal__back { position: absolute; inset: 0; border-radius: var(--radius-md); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.psm-reveal__face {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(0deg, var(--r, var(--psm-accent)) 0 6px, transparent 6px), radial-gradient(70% 60% at 50% 40%, var(--r-soft, var(--psm-accent-soft)), transparent 70%), var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--rule), 0 18px 34px -16px rgba(16, 18, 28, .4);
}
/* The glass box: frosted panes and a prism set in its lid */
.psm-reveal__back {
  transform: rotateY(180deg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, transparent 0 34%, rgba(255, 255, 255, .5) 34% calc(34% + 2px), transparent calc(34% + 2px)),
    linear-gradient(160deg, var(--theme-100), var(--theme-300));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 0 0 2px rgba(var(--psm-accent-rgb), .25), 0 18px 34px -16px rgba(var(--psm-accent-rgb), .5);
}
html.dark .psm-reveal__back { background: linear-gradient(135deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, transparent 0 34%, rgba(255, 255, 255, .2) 34% calc(34% + 2px), transparent calc(34% + 2px)), linear-gradient(160deg, var(--theme-700), var(--theme-900)); }
.psm-reveal__back::after {
  content: ''; position: absolute; left: 50%; top: 34%; width: 2.6rem; height: 2.2rem; margin: -1.6rem 0 0 -1.3rem;
  background: var(--psm-accent); -webkit-mask: var(--psm-prism) center / contain no-repeat; mask: var(--psm-prism) center / contain no-repeat;
}
.psm-reveal__prize { display: flex; align-items: center; justify-content: center; width: 68%; height: 60%; margin-bottom: 8%; }
.psm-reveal__prize img { width: 100% !important; height: 100% !important; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(16, 18, 28, .2)); }
/* Shards of the spectrum flying out as it is turned */
.psm-reveal__bits { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.psm-reveal__bits i {
  --a: calc(var(--i) * 30deg - 90deg);
  position: absolute; left: -5px; top: -5px; width: 10px; height: 9px;
  background: var(--c, var(--theme-300)); clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: 0;
}
.psm-reveal__bits i:nth-child(4n+2) { --c: var(--theme-500); }
.psm-reveal__bits i:nth-child(4n+3) { --c: var(--psm-accent); }
.psm-reveal__bits i:nth-child(4n+4) { --c: var(--theme-200); }
#winFlowModal.is-opening .psm-reveal__bits i { animation: psm-flutter 1.2s calc(.42s + var(--i) * 25ms) cubic-bezier(.2, .6, .4, 1) both; }
@keyframes psm-flutter {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(0) rotate(0); }
  15% { opacity: .95; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(6rem) rotate(240deg); }
}
/* The box is lifted, turned over and set down */
#winFlowModal.is-opening .psm-reveal__card { animation: psm-rv-turn .85s .1s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes psm-rv-turn {
  0% { transform: rotateY(180deg); }
  35% { transform: translateY(-8%) rotateY(180deg) scale(1.03); }
  80% { transform: translateY(-2%) rotateY(0) scale(1.03); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #winFlowModal.is-opening :is(.psm-reveal__card, .psm-reveal__bits i) { animation: none !important; }
}
/* The tier under the eyebrow: a small prism in its colour */
.psm-wf-announce .ed-eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .4rem !important; color: var(--ink-soft) !important; }
#winFlowModal[data-rarity] .psm-wf-announce .ed-eyebrow::after { content: ''; width: 12px; height: 11px; background: var(--r); -webkit-mask: var(--psm-prism-solid) center / contain no-repeat; mask: var(--psm-prism-solid) center / contain no-repeat; }
#wfItemName { font-family: var(--font-display) !important; font-weight: 800; letter-spacing: -.02em !important; overflow-wrap: normal; text-wrap: balance; }
#wfItemDesc { font-family: var(--font-num) !important; font-weight: 600; font-size: 1rem; }
/* The claim panels */
#winFlowModal .mystery-modal-panel > .flex.justify-center > div[style*="background:var(--paper-2)"] { background: var(--paper-3) !important; border: 0 !important; border-radius: var(--radius-sm) !important; box-shadow: none; }
#winFlowModal [style*="color:#4ade80"] { color: var(--psm-good) !important; }
#wfCoinsAmount { font-family: var(--font-num) !important; font-weight: 600; letter-spacing: 0 !important; }
#wfCouponCode, #couponCodeDisplay { font-family: var(--font-num) !important; font-weight: 600; letter-spacing: .12em; color: var(--ink) !important; background: var(--paper-3) !important; border: 1.5px dashed var(--psm-accent-line) !important; border-radius: var(--radius-sm) !important; }
#winFlowModal .ed-eyebrow[style*="theme-500"] { color: var(--psm-accent-text) !important; }

/* ── My winnings: the boxes opened here, each on a white card ── */
#winningsModal .mystery-modal-panel > .px-6:first-of-type { border-bottom: 1px solid var(--rule) !important; }
#winningsList > div { background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: var(--radius-sm) !important; box-shadow: none; }
#winningsList > div img { background: var(--paper-3); border-radius: var(--radius-sm); padding: 5px; }
#winningsList > div .italic { font-style: normal; font-family: var(--font-num); }
#winningsList > div span[style*="background:var(--ink)"] { background: var(--psm-good-soft) !important; color: var(--psm-good) !important; border: 0; border-radius: 999px !important; display: inline-block; font-family: var(--font-ui); font-weight: 600; letter-spacing: .02em; }
[class*="z-50"] h2.text-xl, [class*="z-[60]"] h3.text-xl { font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: -.01em; }

/* ── Latest winners ── */
.psm-mbw__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: -.03em; color: var(--ink); }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh)) .psm-mbw__title { letter-spacing: 0; }
.psm-mbw__rail { padding: .8rem 0 1.2rem; }
.psm-mbw__rail::after { display: none; }
.winner-card {
  position: relative; min-width: 260px;
  padding: .7rem .9rem .7rem .7rem;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}
.psm-mbw__img { padding: 5px; border-radius: var(--radius-sm); background: var(--paper-3); box-shadow: none; }
.psm-mbw__who { font: 600 .95rem/1.2 var(--font-ui); color: var(--ink); }
.psm-mbw__what { font-size: .8rem; color: var(--ink-2); white-space: normal; }
.psm-mbw__val { font-family: var(--font-num); font-weight: 600; font-size: 1em; color: var(--psm-good); }
.psm-mbw__when { font: 500 11px/1.3 var(--font-ui); color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .psm-mbw .animate-marquee { animation-duration: 600s; } }

/* Small helpers kept from the plugin's markup */
.psm-mb-green, [data-psm-green] { color: var(--psm-good) !important; }