/* Post-match reward drop: art-deco card flip. Tokens come from style.css / premium.css (--f-disp, --f-mono, --champ). --rc = rarity colour, --g = glow strength (0.3 .. 1.3). */
.rw { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto 1fr auto auto auto; justify-items: center; align-items: center; padding: clamp(14px, 3.5vh, 38px) 20px clamp(12px, 3vh, 30px); color: var(--paper); overflow: hidden; animation: rwIn .35s var(--ease) both; }
.rw.out { animation: rwOut .26s var(--ease) both; }
@keyframes rwIn { from { opacity: 0; } to { opacity: 1; } } @keyframes rwOut { to { opacity: 0; } }
.rw-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, color-mix(in srgb, var(--rc) calc(var(--g) * 16%), #07070a) 0%, #030304 68%); transition: background .9s; }
.rw-rays { position: absolute; left: 50%; top: 46%; width: 190vmax; height: 190vmax; margin: -95vmax 0 0 -95vmax; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 34%, transparent) 0deg 3deg, transparent 3deg 15deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 34%); mask: radial-gradient(circle, #000 0, transparent 34%); }
.rw.s2 .rw-rays, .rw.s3 .rw-rays { animation: rwRays 22s linear infinite, rwRaysIn 1.1s var(--ease) both; opacity: calc(.25 + var(--g) * .5); }
@keyframes rwRays { to { transform: rotate(360deg); } } @keyframes rwRaysIn { from { opacity: 0; scale: .5; } }
.rw-head { position: relative; display: grid; gap: 6px; text-align: center; }
.rw-head em { font: 600 10px var(--f-mono); letter-spacing: .5em; color: var(--champ); font-style: normal; text-indent: .5em; }
.rw-head b { font: 700 clamp(18px, 3.2vh, 28px) var(--f-disp); letter-spacing: .24em; text-indent: .24em; text-transform: uppercase; }
.rw-head::after { content: ''; justify-self: center; width: 130px; height: 7px; margin-top: 4px; background: linear-gradient(90deg, transparent, var(--champ) 30%, var(--champ) 70%, transparent) center/100% 1px no-repeat, linear-gradient(var(--champ), var(--champ)) center/7px 7px no-repeat; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: .7; }

.rw-stage { position: relative; height: min(56vh, 520px); aspect-ratio: 5 / 7; perspective: 1400px; display: grid; }
.rw-glow { position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 70%, transparent) 0%, transparent 62%); opacity: 0; filter: blur(14px); pointer-events: none; }
.rw.s1 .rw-glow { animation: rwCharge .9s ease-in both; } .rw.s2 .rw-glow, .rw.s3 .rw-glow { opacity: calc(.35 + var(--g) * .4); animation: rwBurst 1.1s var(--ease) both; }
@keyframes rwCharge { from { opacity: 0; scale: .6; } to { opacity: calc(.15 + var(--g) * .3); scale: 1; } }
@keyframes rwBurst { 0% { opacity: 1; scale: 1.6; } 100% { opacity: calc(.35 + var(--g) * .4); scale: 1; } }
.rw-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: rwFloat 5s ease-in-out infinite; }
.rw.s0 .rw-card { animation: rwDeal .6s var(--spring) both, rwFloat 5s 0.6s ease-in-out infinite; }
@keyframes rwDeal { from { transform: translateY(40px) scale(.84) rotateX(14deg); opacity: 0; } }
@keyframes rwFloat { 50% { transform: translateY(-7px); } }
.rw-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.rw.s1 .rw-inner { animation: rwShake .9s ease-in both; }
@keyframes rwShake { 0%, 100% { transform: none; } 20% { transform: rotate(-.8deg) scale(1.01); } 40% { transform: rotate(.9deg) scale(1.02); } 60% { transform: rotate(-1.2deg) scale(1.03); } 80% { transform: rotate(1.4deg) scale(1.04); } }
.rw.s2 .rw-inner { animation: rwFlip 1s cubic-bezier(.3, .1, .2, 1) both; } .rw.s3 .rw-inner { transform: rotateY(180deg); }
.rw.quick .rw-inner { animation: none; transform: rotateY(180deg); }
@keyframes rwFlip { 0% { transform: rotateY(0) scale(1.04); } 45% { transform: rotateY(96deg) scale(1.12); } 100% { transform: rotateY(180deg) scale(1); } }
.rw-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); }
.rw-back { background: radial-gradient(circle at 50% 50%, #1a1710, #0a0906 70%); border: 0; }
.rw-back svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--champ); stroke-width: 1; fill: none; opacity: .75; }
.rw-q { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); font: 200 34px var(--f-disp); font-style: normal; color: var(--champ); opacity: .0; }
.rw-front { transform: rotateY(180deg); display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 20%, #0d0d10), #08080a 55%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 80%, transparent); }
.rw-front::before { content: ''; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); clip-path: inherit; pointer-events: none; }
.rw-top { display: flex; align-items: center; gap: 8px; font: 700 10px var(--f-mono); letter-spacing: .26em; color: var(--rc); } .rw-top u { flex: 1; height: 1px; background: linear-gradient(90deg, var(--rc), transparent 60%, var(--rc)); } .rw-top span:last-child { color: var(--dim); font-weight: 500; letter-spacing: .2em; font-size: 9px; }
.rw-art { position: relative; flex: 1 1 0; min-height: 0; margin: 2px 0; background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--rc) 28%, #101014), #050506 72%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); overflow: hidden; }
.rw-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rw-art.nogl::after { content: 'NO PREVIEW'; position: absolute; inset: 0; display: grid; place-items: center; font: 500 9px var(--f-mono); letter-spacing: .3em; color: var(--dim); }
.rw-sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .26) 50%, transparent 62%); transform: translateX(-120%); pointer-events: none; mix-blend-mode: soft-light; }
.rw.s3 .rw-sheen { animation: rwSheen 1.4s .25s var(--ease) both; } @keyframes rwSheen { to { transform: translateX(120%); } }
.rw-name { font: 700 clamp(14px, 2.4vh, 20px) var(--f-disp); letter-spacing: .12em; text-align: center; text-transform: uppercase; text-shadow: 0 0 18px color-mix(in srgb, var(--rc) 70%, transparent); }
.rw-sub { font: 500 9px var(--f-mono); letter-spacing: .3em; text-align: center; color: var(--dim); }
.rw-look { font: 400 11px/1.4 var(--f-hud); color: #b6b6ae; text-align: center; min-height: 3.2em; padding: 0 6px; }
.rw-state { font: 700 9px var(--f-mono); letter-spacing: .24em; text-align: center; padding: 7px 0; border: 1px solid var(--rc); color: var(--rc); background: color-mix(in srgb, var(--rc) 10%, transparent); }
.rw-state.dup { border-color: rgba(255, 255, 255, .25); color: var(--champ); background: rgba(255, 255, 255, .04); }

.rw-recap { position: relative; display: flex; gap: clamp(18px, 4vw, 54px); margin-top: 10px; opacity: 0; transform: translateY(8px); transition: opacity .5s .2s, transform .5s .2s; }
.rw-recap div { display: grid; gap: 3px; text-align: center; padding: 0 4px; border-top: 1px solid var(--line); min-width: 84px; } .rw-recap span { font: 500 9px var(--f-mono); letter-spacing: .3em; color: var(--dim); padding-top: 6px; }
.rw-recap b { font: 200 clamp(20px, 3.4vh, 30px) var(--f-hud); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .rw-recap small { font: 700 9px var(--f-mono); letter-spacing: .2em; color: var(--champ); vertical-align: middle; }
.rw-pity { position: relative; margin-top: 8px; font: 500 9px var(--f-mono); letter-spacing: .3em; color: var(--dim); opacity: 0; transition: opacity .5s .3s; }
.rw.s3 .rw-recap, .rw.quick .rw-recap { opacity: 1; transform: none; } .rw.s3 .rw-pity { opacity: 1; }
.rw-foot { position: relative; display: grid; gap: 8px; justify-items: center; margin-top: 12px; } .rw-foot .btn { min-width: 220px; } .rw-hint { display: flex; gap: 18px; justify-content: center; min-height: 18px; opacity: .8; }
.rw-hint .pr { display: inline-flex; align-items: center; gap: 7px; font: 500 9px var(--f-mono); letter-spacing: .22em; color: var(--dim); }
.rw.t-mythic .rw-name { background: linear-gradient(90deg, #ff4fd8, #ffd84a, #4affd8, #ff4fd8) 0 0/300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: rwHue 4s linear infinite; }
@keyframes rwHue { to { background-position: 300% 0; } }
@media (max-height: 640px) { .rw-look { display: none; } .rw-stage { height: 50vh; } .rw-recap b { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .rw-card, .rw-rays { animation: none !important; } }