/* =====================================================================
   DAILY TRADE MYSTERY — styles
   Drop this <link> after your main stylesheet, or paste the contents
   into your existing <style> block. Uses the site's existing tokens
   (--bg, --panel, --line, --gold, --gold2, Cairo font) plus new
   per-tier accent variables scoped to .dtm-pack.
   ===================================================================== */

.dtm-section{margin:76px auto 20px;position:relative;font-family:'Cairo',system-ui,sans-serif}
/* RTL: the site sets dir="rtl" on <html> when Arabic is active. The rules
   above already use logical properties (margin-inline-*, text-align:
   start/end, inset-inline-end) so the grid, cards, and modals mirror
   automatically — these two rules cover the couple of spots that don't. */
html[dir="rtl"] .dtm-pack-rewards-list{padding-right:0;padding-left:4px;margin-inline-end:0;margin-inline-start:-4px}
html[dir="rtl"] .dtm-fair-seed-form{flex-direction:row-reverse}
.dtm-header{text-align:center;max-width:680px;margin:0 auto 40px}
.dtm-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(191,149,63,.12);border:1px solid var(--line);color:var(--gold2);font-weight:900;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:16px}
.dtm-header h2{font-size:clamp(28px,5vw,42px);font-weight:900;margin:0 0 12px}
.dtm-header p{color:var(--muted);font-size:16px;line-height:1.8;margin:0}
.dtm-balance{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:10px 20px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-weight:900;font-size:14px}
.dtm-balance i{color:var(--gold2)}
.dtm-balance b{color:#fff;font-size:16px}
.dtm-fairness-link{background:none;border:0;color:var(--muted);font-size:12px;font-weight:800;text-decoration:underline;cursor:pointer;margin-inline-start:10px}
.dtm-fairness-link:hover{color:var(--gold2)}

.dtm-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
@media(max-width:1100px){.dtm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.dtm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(max-width:460px){.dtm-grid{grid-template-columns:1fr}}

/* Per-tier accent tokens */
.dtm-pack{ --tier-a:#BF953F; --tier-b:#FCF6BA; --tier-glow:rgba(191,149,63,.35); }
.dtm-pack[data-tier="gold"]{ --tier-a:#D4AF37; --tier-b:#FFD700; --tier-glow:rgba(255,215,0,.4); }
.dtm-pack[data-tier="blue"]{ --tier-a:#007AFF; --tier-b:#00D2FF; --tier-glow:rgba(0,210,255,.4); }
.dtm-pack[data-tier="purple"]{ --tier-a:#8A2BE2; --tier-b:#9D4EDD; --tier-glow:rgba(157,78,221,.4); }
.dtm-pack[data-tier="pink"]{ --tier-a:#FF007F; --tier-b:#FF4D8D; --tier-glow:rgba(255,77,141,.4); }
.dtm-pack[data-tier="silver"]{ --tier-a:#A0A0A0; --tier-b:#E0E0E0; --tier-glow:rgba(224,224,224,.32); }

.dtm-pack{
  position:relative;border-radius:24px;padding:26px 20px 22px;text-align:center;
  background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.02)),#0c0c11;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  cursor:pointer;isolation:isolate;overflow:hidden;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),border-color .3s;
}
.dtm-pack:before{
  content:"";position:absolute;inset:-40%;z-index:-1;opacity:.55;
  background:radial-gradient(circle at 50% 20%,var(--tier-glow),transparent 60%);
  filter:blur(18px);transition:opacity .3s;
}
.dtm-pack:hover{transform:translateY(-8px) rotateX(2deg);border-color:var(--tier-a);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 50px var(--tier-glow)}
.dtm-pack:hover:before{opacity:.9}
.dtm-pack.is-disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.4)}

.dtm-pack-tier-label{
  display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tier-b);background:rgba(255,255,255,.06);border:1px solid var(--tier-a);
  border-radius:999px;padding:4px 11px;margin-bottom:16px;
}

/* 3D embossed foil pouch */
.dtm-pouch{
  width:120px;height:140px;margin:0 auto 18px;position:relative;perspective:600px;
}
.dtm-pouch-body{
  position:relative;width:100%;height:100%;border-radius:18px 18px 26px 26px;
  background:
    linear-gradient(150deg,rgba(255,255,255,.55),transparent 40%),
    linear-gradient(200deg,var(--tier-b),var(--tier-a) 60%,#1a1a1a 120%);
  box-shadow:
    inset 0 3px 8px rgba(255,255,255,.5),
    inset 0 -14px 22px rgba(0,0,0,.35),
    0 18px 34px rgba(0,0,0,.45),
    0 0 40px var(--tier-glow);
  transform:rotateY(-8deg) rotateX(4deg);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  display:flex;align-items:center;justify-content:center;
}
.dtm-pack:hover .dtm-pouch-body{transform:rotateY(0) rotateX(0) translateY(-4px)}
.dtm-pouch-top{
  position:absolute;top:0;left:6%;right:6%;height:26%;border-radius:16px 16px 4px 4px;
  background:linear-gradient(160deg,rgba(255,255,255,.7),transparent 70%);
  border-bottom:2px dashed rgba(0,0,0,.25);
}
.dtm-pouch-logo{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#1a1a1a,#000);
  color:var(--tier-b);font-size:20px;font-weight:900;
  box-shadow:0 0 0 2px rgba(255,255,255,.25),0 6px 14px rgba(0,0,0,.4);
  text-shadow:0 0 10px var(--tier-glow);
}
.dtm-pouch-shine{
  position:absolute;top:8%;left:-30%;width:40%;height:120%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:rotate(18deg);opacity:0;transition:opacity .3s, left .6s cubic-bezier(.16,1,.3,1);
}
.dtm-pack:hover .dtm-pouch-shine{opacity:.9;left:120%}

/* 3D embossed foil PACK card — glossy convex pouch with a "pillow"
   highlight, deep diagonal color, ridged heat-seal bands, and an
   embossed gold title/logo, styled after a photographed foil-pack
   product shot. Replaces the flatter card look. The .dtm-pouch-* rules
   above are left in place because the Confirm / Rip / Open modals
   still use them. */
.dtm-pack-visual{
  position:relative;width:100%;max-width:160px;aspect-ratio:.72;margin:0 auto 18px;
  border-radius:16px;overflow:hidden;
  background:var(--pack-grad,linear-gradient(160deg,var(--tier-b),var(--tier-a)));
  box-shadow:
    0 24px 50px rgba(0,0,0,.55),
    inset 0 2px 3px rgba(255,255,255,.4),
    inset 0 -20px 30px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1);
}
/* convex "pillow" lighting — soft highlight top-left, soft shadow
   bottom-right — is what reads as 3D rather than a flat gradient */
.dtm-pack-visual:before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(120% 65% at 28% 8%,rgba(255,255,255,.45),transparent 55%),
    radial-gradient(100% 60% at 82% 96%,rgba(0,0,0,.32),transparent 60%);
  mix-blend-mode:overlay;
}
/* diagonal glare sweep on hover, like light catching foil */
.dtm-pack-visual:after{
  content:"";position:absolute;top:-50%;left:-35%;width:32%;height:200%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(20deg);opacity:0;pointer-events:none;
  transition:opacity .3s,left .6s cubic-bezier(.16,1,.3,1);
}
.dtm-pack:hover .dtm-pack-visual{transform:translateY(-6px) scale(1.02);box-shadow:0 32px 64px rgba(0,0,0,.6),inset 0 2px 3px rgba(255,255,255,.45),inset 0 -20px 30px rgba(0,0,0,.4),0 0 40px var(--tier-glow)}
.dtm-pack:hover .dtm-pack-visual:after{opacity:.9;left:130%}

.dtm-pack-seal{
  position:absolute;left:8%;right:8%;height:12px;border-radius:3px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.32) 0 2px,rgba(0,0,0,.15) 2px 4px);
  box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.35);
}
.dtm-pack-seal.top{top:12px}
.dtm-pack-seal.bottom{bottom:12px}

.dtm-pack-title{
  position:absolute;top:36px;left:0;right:0;text-align:center;
  font-size:clamp(13px,2vw,18px);font-weight:900;letter-spacing:2.5px;
  background:linear-gradient(180deg,#fff6d8 0%,var(--tier-b,#ffd875) 55%,var(--tier-a,#a8790c) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.3)) drop-shadow(0 2px 2px rgba(0,0,0,.4));
}
.dtm-pack-title span{display:block}
.dtm-pack-logo-img{
  position:absolute;left:50%;bottom:10%;transform:translateX(-50%);
  width:58%;height:auto;max-height:42%;
  aspect-ratio:90/62; /* matches the logo's native ratio so it never stretches */
  object-fit:contain;opacity:.95;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.25)) drop-shadow(0 -1px 1px rgba(0,0,0,.35)) drop-shadow(0 6px 10px rgba(0,0,0,.4));
}

/* Deep, jewel-toned diagonal gradients (light top-left → dark
   bottom-right) modeled on the reference foil-pack photo. */
.dtm-pack[data-tier="gold"] .dtm-pack-visual{--pack-grad:linear-gradient(160deg,#ffe27a 0%,#d4a017 45%,#8a6208 100%)}
.dtm-pack[data-tier="blue"] .dtm-pack-visual{--pack-grad:linear-gradient(160deg,#5c9bff 0%,#0b56c9 45%,#063a8c 100%)}
.dtm-pack[data-tier="purple"] .dtm-pack-visual{--pack-grad:linear-gradient(160deg,#a86af5 0%,#6c2bd9 45%,#43168f 100%)}
.dtm-pack[data-tier="pink"] .dtm-pack-visual{--pack-grad:linear-gradient(160deg,#ff7fb4 0%,#d81e6e 45%,#8f0f47 100%)}
.dtm-pack[data-tier="silver"] .dtm-pack-visual{--pack-grad:linear-gradient(160deg,#7a7f87 0%,#45484e 45%,#222428 100%)}

.dtm-pack-name{font-size:16px;font-weight:900;margin-bottom:6px}
.dtm-pack-cost{
  display:inline-flex;align-items:center;gap:7px;font-weight:900;font-size:14px;
  color:var(--tier-b);margin-bottom:16px;
}
.dtm-pack-cost i{font-size:12px}
.dtm-open-btn{
  width:100%;border:0;border-radius:14px;padding:12px;font-weight:900;cursor:pointer;
  background:linear-gradient(135deg,var(--tier-b),var(--tier-a));color:#0a0a0a;
  box-shadow:0 14px 34px var(--tier-glow);transition:transform .2s,filter .2s;
}
.dtm-open-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.dtm-open-btn:disabled{cursor:not-allowed;opacity:.6;transform:none}

/* ---------------- Prize Details trigger + 3D card flip ---------------- */
.dtm-details-link{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;margin-top:10px;padding:2px 0;background:none;border:0;cursor:pointer;
  font-size:12.5px;font-weight:800;color:var(--muted);
  text-decoration:underline;text-decoration-color:#888;text-underline-offset:3px;
  transition:color .2s;
}
.dtm-details-link:hover{color:var(--tier-b)}
.dtm-details-link i{font-size:10px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.dtm-pack.is-flipped .dtm-pack-face-front .dtm-details-link i{transform:rotate(180deg)}

.dtm-pack{perspective:1400px}
.dtm-pack-flip{
  position:relative;width:100%;transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.dtm-pack.is-flipped .dtm-pack-flip{transform:rotateY(180deg)}
.dtm-pack-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dtm-pack-face-front{position:relative}
.dtm-pack-face-back{
  position:absolute;inset:0;transform:rotateY(180deg);
  display:flex;flex-direction:column;text-align:start;
  border-radius:inherit;padding:18px 16px 14px;
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),rgba(6,6,9,.92);
  border:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 50px rgba(0,0,0,.5);
}
.dtm-pack-back-title{
  font-size:13px;font-weight:900;letter-spacing:.02em;color:var(--tier-b);text-align:center;
  margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08);
}
.dtm-pack-rewards-list{
  flex:1;overflow-y:auto;max-height:222px;padding-right:4px;margin-inline-end:-4px;
  display:flex;flex-direction:column;gap:8px;
}
.dtm-pack-rewards-list::-webkit-scrollbar{width:5px}
.dtm-pack-rewards-list::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:4px}
.dtm-pack-rewards-list::-webkit-scrollbar-thumb{background:var(--tier-a);border-radius:4px}
.dtm-reward-row{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
}
.dtm-reward-row.is-out{opacity:.5}
.dtm-reward-icon{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.06);color:var(--tier-b);font-size:11px;
}
.dtm-reward-info{flex:1;min-width:0;display:flex;flex-direction:column}
.dtm-reward-title{font-size:12.5px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtm-reward-type{font-size:10.5px;color:var(--muted);margin-top:1px}
.dtm-reward-odds{font-size:12.5px;font-weight:900;color:var(--tier-b);white-space:nowrap;flex:0 0 auto}
.dtm-reward-empty{color:var(--muted);font-size:12.5px;text-align:center;padding:28px 6px}
.dtm-pack-face-back .dtm-details-link{margin-top:12px}

@media(prefers-reduced-motion:reduce){
  .dtm-pack-flip{transition:none!important}
  .dtm-details-link i{transition:none!important}
}

/* ---------------- Confirm modal ---------------- */
.dtm-confirm-card{width:min(420px,92vw);border-radius:24px;padding:30px 26px;text-align:center;
  border:1px solid rgba(255,255,255,.1);background:linear-gradient(155deg,rgba(20,20,26,.98),rgba(8,8,11,.97));
  box-shadow:0 30px 100px rgba(0,0,0,.65);position:relative}
.dtm-confirm-card .dtm-pouch{width:96px;height:112px}
.dtm-confirm-card h3{font-size:20px;font-weight:900;margin:14px 0 6px}
.dtm-confirm-cost{font-size:15px;color:var(--muted);font-weight:800;margin-bottom:22px}
.dtm-confirm-cost b{color:#fff}
.dtm-confirm-actions{display:flex;gap:10px}
.dtm-confirm-actions button{flex:1;border-radius:14px;padding:13px;font-weight:900;cursor:pointer;transition:transform .2s}
.dtm-confirm-cancel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff}
.dtm-confirm-go{border:0;background:linear-gradient(135deg,var(--tier-b,var(--gold2)),var(--tier-a,var(--gold)));color:#0a0a0a}
.dtm-confirm-actions button:hover{transform:translateY(-2px)}

/* ---------------- Rip / open stage ---------------- */
.dtm-open-card{width:min(460px,92vw);min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:26px;padding:30px;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.05),#08080b 70%);
  box-shadow:0 30px 100px rgba(0,0,0,.7)}

/* ---- Stage 1: Tension Shake (1.2s) ----
   Rapid micro-shake + a border/box-shadow glow that visibly intensifies
   over the shake window. box-shadow is drawn on the card's own box, so
   it is unaffected by .dtm-open-card's own overflow:hidden. */
@keyframes packShake{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  10%{transform:translate(-6px,2px) rotate(-1.1deg)}
  20%{transform:translate(5px,-3px) rotate(1deg)}
  30%{transform:translate(-4px,4px) rotate(-1.5deg)}
  40%{transform:translate(6px,-2px) rotate(1.3deg)}
  50%{transform:translate(-5px,-4px) rotate(-.9deg)}
  60%{transform:translate(4px,3px) rotate(1.5deg)}
  70%{transform:translate(-6px,-2px) rotate(-1.3deg)}
  80%{transform:translate(5px,4px) rotate(1deg)}
  90%{transform:translate(-3px,-3px) rotate(-.7deg)}
}
@keyframes packGlowBuild{
  0%{box-shadow:0 30px 100px rgba(0,0,0,.7),0 0 0 rgba(255,255,255,0)}
  100%{box-shadow:0 30px 100px rgba(0,0,0,.7),0 0 55px 10px rgba(255,255,255,.4),0 0 110px 34px var(--tier-glow,rgba(191,149,63,.65))}
}
.dtm-open-card.is-shaking{
  animation:packShake .28s ease-in-out infinite, packGlowBuild 1.2s ease-in forwards;
  border-color:var(--tier-a,var(--gold));
}

/* ---- Stage 2: Light Burst & Flash (0.4s) ----
   A full-viewport radial bloom injected by JS the instant the pack pops. */
.dtm-lens-burst{position:fixed;inset:0;z-index:10001;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 45%,#fff,var(--tier-b,#FCF6BA) 32%,var(--tier-a,#BF953F) 55%,transparent 72%);
  mix-blend-mode:screen}
.dtm-lens-burst.is-active{animation:lensBurst .4s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes lensBurst{
  0%{opacity:0;transform:scale(.15)}
  30%{opacity:1;transform:scale(1.05)}
  100%{opacity:0;transform:scale(2.6)}
}

/* Confetti overlay canvas (Stage 3) */
.dtm-confetti-canvas{position:fixed;inset:0;z-index:10000;pointer-events:none}

/* 3D flip pulse the pack itself gets right as it "pops" open, before the
   reveal modal takes over — small flourish that reads as the card
   tipping toward the player. */
.dtm-open-card{perspective:1200px}
.dtm-open-card.is-popped{animation:dtmOpenCardFlip .5s ease-out forwards}
@keyframes dtmOpenCardFlip{
  0%{transform:rotateY(0deg) scale(1)}
  60%{transform:rotateY(180deg) scale(1.04)}
  100%{transform:rotateY(180deg) scale(1)}
}
.dtm-rip-stage{position:relative;width:220px;height:260px}
.dtm-rip-top,.dtm-rip-bottom{position:absolute;left:0;right:0;overflow:hidden;border-radius:18px}
.dtm-rip-top{top:0;height:52%;border-radius:18px 18px 0 0}
.dtm-rip-bottom{bottom:0;height:52%;border-radius:0 0 18px 18px}
.dtm-rip-top:after,.dtm-rip-bottom:after{content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,var(--tier-b,#FCF6BA),var(--tier-a,#BF953F) 65%,#141414 130%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.3)}
.dtm-open-card.is-tearing .dtm-rip-top{animation:dtmTearUp .7s cubic-bezier(.4,0,.2,1) forwards}
.dtm-open-card.is-tearing .dtm-rip-bottom{animation:dtmTearDown .7s cubic-bezier(.4,0,.2,1) forwards}
@keyframes dtmTearUp{to{transform:translateY(-140%) rotate(-14deg);opacity:0}}
@keyframes dtmTearDown{to{transform:translateY(140%) rotate(10deg);opacity:0}}
.dtm-rip-seam{position:absolute;top:50%;left:6%;right:6%;height:2px;border-top:2px dashed rgba(255,255,255,.5);transform:translateY(-1px);z-index:2}
.dtm-rip-hint{margin-top:26px;font-weight:900;color:var(--muted);font-size:13px;letter-spacing:.03em;text-transform:uppercase}
.dtm-particle{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--tier-b,#FCF6BA);
  box-shadow:0 0 10px 2px var(--tier-glow,rgba(255,215,0,.6));opacity:0;pointer-events:none}
.dtm-open-card.is-tearing .dtm-particle,.dtm-open-card.is-popped .dtm-particle{animation:dtmParticle 1s ease-out forwards}
@keyframes dtmParticle{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--dx,0),var(--dy,-80px)) scale(.3)}
}

/* ---------------- Reveal modal ---------------- */
.dtm-reveal-card{width:min(440px,92vw);border-radius:26px;padding:34px 28px 28px;text-align:center;position:relative;overflow:hidden;
  border:1px solid var(--tier-a,var(--line));background:linear-gradient(160deg,rgba(24,24,30,.97),rgba(8,8,11,.97));
  box-shadow:0 30px 110px rgba(0,0,0,.7),0 0 60px var(--tier-glow,rgba(191,149,63,.2));
  perspective:1000px}
.dtm-reveal-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% -10%,var(--tier-glow,rgba(191,149,63,.3)),transparent 55%);pointer-events:none}

/* Stage 3: 3D flip-in reveal + pulsing glow behind the card. box-shadow is
   drawn on the card's own box (not clipped by its own overflow:hidden),
   so the pulse reads as a glow "behind" the card without extra markup. */
.dtm-reveal-card.is-popping{
  animation:dtmRevealFlipIn .55s cubic-bezier(.34,1.56,.64,1) both,
            dtmRevealGlowPulse 2.2s ease-in-out .55s infinite;
}
@keyframes dtmRevealFlipIn{
  0%{transform:rotateY(180deg) scale(.7);opacity:0}
  60%{transform:rotateY(0deg) scale(1.05);opacity:1}
  100%{transform:rotateY(0deg) scale(1)}
}
@keyframes dtmRevealGlowPulse{
  0%,100%{box-shadow:0 30px 110px rgba(0,0,0,.7),0 0 60px var(--tier-glow,rgba(191,149,63,.35))}
  50%{box-shadow:0 30px 110px rgba(0,0,0,.7),0 0 110px 18px var(--tier-glow,rgba(191,149,63,.7))}
}
.dtm-reveal-card.is-legendary .dtm-reveal-badge{animation:dtmPop .5s cubic-bezier(.34,1.56,.64,1),dtmLegendarySpin 3.5s linear 1s infinite}
@keyframes dtmLegendarySpin{
  0%,85%{filter:brightness(1) drop-shadow(0 0 0 transparent)}
  92%{filter:brightness(1.4) drop-shadow(0 0 14px var(--tier-b,#FFD700))}
  100%{filter:brightness(1) drop-shadow(0 0 0 transparent)}
}
.dtm-reveal-badge{width:74px;height:74px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--tier-b,var(--gold2)),var(--tier-a,var(--gold)));color:#0a0a0a;font-size:30px;
  box-shadow:0 16px 40px var(--tier-glow,rgba(191,149,63,.35));animation:dtmPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes dtmPop{0%{transform:scale(0)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.dtm-reveal-eyebrow{font-size:11.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--tier-b,var(--gold2));margin-bottom:8px}
.dtm-reveal-title{font-size:22px;font-weight:900;margin-bottom:18px;line-height:1.3}
.dtm-reveal-code-box{display:flex;align-items:stretch;border-radius:14px;overflow:hidden;border:2px dashed var(--tier-a,var(--gold));background:rgba(0,0,0,.28);margin-bottom:10px}
.dtm-reveal-code-box span{flex:1;display:flex;align-items:center;justify-content:center;padding:14px;font-weight:900;font-size:16px;color:#fff;letter-spacing:.02em;word-break:break-all}
.dtm-reveal-copy-btn{border:0;padding:0 18px;font-weight:900;cursor:pointer;background:linear-gradient(135deg,var(--tier-b,var(--gold2)),var(--tier-a,var(--gold)));color:#0a0a0a}
.dtm-reveal-copy-btn.done{background:linear-gradient(135deg,#34d399,#059669);color:#fff}
.dtm-reveal-note{font-size:12.5px;color:var(--muted);font-weight:700;margin-bottom:22px;line-height:1.6}
.dtm-reveal-close{width:100%;border:0;border-radius:14px;padding:13px;font-weight:900;cursor:pointer;
  background:linear-gradient(135deg,var(--tier-b,var(--gold2)),var(--tier-a,var(--gold)));color:#0a0a0a;
  border:1px solid rgba(255,255,255,.14);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,filter .2s ease}
.dtm-reveal-close:hover{transform:translateY(-2px) scale(1.045);box-shadow:0 16px 34px var(--tier-glow,rgba(191,149,63,.4));filter:brightness(1.08)}
.dtm-reveal-close:active{transform:translateY(0) scale(.97);transition-duration:.1s}
.dtm-reveal-fair{margin-top:14px;font-size:11px;color:#7a7a85;font-weight:700}
.dtm-reveal-fair code{color:#9a9aa5}

/* ---------------- Fairness / odds modal ---------------- */
.dtm-fair-card{width:min(560px,94vw);max-height:86vh;overflow:auto;border-radius:24px;padding:26px;
  border:1px solid rgba(255,255,255,.1);background:linear-gradient(155deg,rgba(20,20,26,.98),rgba(8,8,11,.97));box-shadow:0 30px 100px rgba(0,0,0,.6)}
.dtm-fair-card h3{font-size:20px;font-weight:900;margin-bottom:10px}
.dtm-fair-card p{color:var(--muted);font-size:13.5px;line-height:1.7;margin-bottom:14px}
.dtm-fair-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px}
.dtm-fair-row span:first-child{color:var(--muted);font-weight:800}
.dtm-fair-row span:last-child{color:#fff;font-weight:800;word-break:break-all;text-align:end;max-width:60%}
.dtm-fair-seed-form{display:flex;gap:10px;margin-top:18px}
.dtm-fair-seed-form input{flex:1;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;padding:0 14px;font-weight:700;outline:none}
.dtm-fair-seed-form button{border:0;border-radius:12px;padding:0 18px;font-weight:900;cursor:pointer;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#080808}
.dtm-fair-odds{margin-top:20px}
.dtm-fair-odds-row{display:flex;justify-content:space-between;font-size:13px;padding:8px 0;color:#d4d4d8;font-weight:700}
.dtm-fair-odds-row b{color:var(--gold2)}

@media(prefers-reduced-motion:reduce){
  .dtm-pack,.dtm-pouch-body,.dtm-pack-visual,.dtm-pack-visual:after,.dtm-open-btn,.dtm-open-card *{animation:none!important;transition:none!important}
  .dtm-open-card.is-shaking,.dtm-open-card.is-popped,.dtm-lens-burst.is-active,
  .dtm-reveal-card.is-popping,.dtm-reveal-card.is-legendary .dtm-reveal-badge,
  .dtm-reveal-close{animation:none!important;transition:none!important}
  .dtm-confetti-canvas{display:none!important}
}