/* gauntlet piece summon_reveal: the summon sequence overlay, the hero reveal stage and the results tiles */

/* ---------- 3D stage overlay: cinematic vignette and letterbox */
.sum-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 62% 58% at 50% 52%, transparent 30%, rgba(2,2,14,.6) 70%, rgba(1,1,8,.94) 100%); }
.sum-vig::before, .sum-vig::after { content: ''; position: absolute; left: 0; right: 0; height: 7vh; background: #000; }
.sum-vig::before { top: 0; } .sum-vig::after { bottom: 0; }
/* the seal prompt sits on the floor line under the chest, pips inline, never over the focal object */
#summon-ui .sum-seal { bottom: calc(7vh + 10px); flex-direction: row; gap: 18px; }
#summon-ui .sum-seal b { font: 22px 'Lilita One'; letter-spacing: 1px; color: #fff; background: linear-gradient(90deg, transparent, rgba(10,14,40,.85) 18%, rgba(10,14,40,.85) 82%, transparent); border: 0; box-shadow: none; padding: 8px 60px; transform: none; text-shadow: 0 0 14px rgba(140,200,255,.9), 0 2px 0 #000; border-top: 1px solid rgba(160,210,255,.5); border-bottom: 1px solid rgba(160,210,255,.5); }
#summon-ui .sum-seal .pips i { width: 18px; height: 18px; transform: rotate(45deg); border-radius: 3px; border: 2px solid #bfe0ff; background: rgba(20,30,80,.6); box-shadow: 0 0 10px rgba(120,180,255,.6); }
#summon-ui .sum-seal .pips i.on { background: #fff; box-shadow: 0 0 18px #fff, 0 0 34px #8fd0ff; }
#summon-ui .sum-hint { bottom: 9vh; }
#summon-ui .sum-omen { top: 26%; }

/* ---------- the hero reveal */
.hrv { position: fixed; inset: 0; z-index: 15; overflow: hidden; cursor: pointer; pointer-events: auto; background: #04040e; --tc: #e5533d; font-family: 'Lilita One', sans-serif; color: #fff; animation: hrvIn .35s ease-out; }
.hrv.out { animation: hrvOut .32s ease-in forwards; }
@keyframes hrvIn { from { opacity: 0 } }
@keyframes hrvOut { to { opacity: 0; transform: scale(1.04); } }
.hrv-bg { position: absolute; inset: -4%; background: center / cover no-repeat; transform: scale(1.12); filter: brightness(.8) saturate(1.2); animation: hrvBg 7s ease-out forwards; }
@keyframes hrvBg { to { transform: scale(1.02) translateX(-1.5%); } }
.hrv-shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(3,4,16,.88) 0%, rgba(3,4,16,.6) 30%, rgba(3,4,16,0) 52%),
  linear-gradient(0deg, rgba(3,4,16,.85) 0%, rgba(3,4,16,0) 30%),
  radial-gradient(ellipse at 66% 45%, transparent 30%, rgba(0,0,0,.55) 90%); }
/* god-ray beams sweeping from the top right */
.hrv-beams { position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none; }
.hrv-beams i { position: absolute; top: -30%; height: 170%; width: 9%; left: calc(48% + var(--o, 0%)); transform-origin: top center; transform: rotate(28deg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 55%, #fff) 0%, transparent 85%); opacity: 0; filter: blur(8px); animation: hrvBeam 3.2s ease-in-out .2s infinite alternate; }
.hrv-beams i:nth-child(2) { --o: 14%; width: 4%; animation-delay: .5s; } .hrv-beams i:nth-child(3) { --o: 26%; width: 12%; animation-delay: .9s; } .hrv-beams i:nth-child(4) { --o: 38%; width: 5%; animation-delay: 1.3s; }
@keyframes hrvBeam { 0% { opacity: .08 } 100% { opacity: .42 } }
.hrv-rays { position: absolute; left: 68%; top: 46%; width: 200vmax; height: 200vmax; margin: -100vmax 0 0 -100vmax; pointer-events: none; mix-blend-mode: screen; opacity: .0;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tc) 40%, #fff) 0 2.5deg, transparent 2.5deg 11deg); -webkit-mask: radial-gradient(circle, #000 0%, transparent 32%); mask: radial-gradient(circle, #000 0%, transparent 32%);
  animation: spin 30s linear infinite; transition: opacity .6s; }
.hrv.lit .hrv-rays { opacity: .32; }
.hrv-glow { position: absolute; left: 68%; top: 48%; width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tc) 70%, #fff) 0%, color-mix(in srgb, var(--tc) 50%, transparent) 30%, transparent 68%); mix-blend-mode: screen; opacity: 0; transform: scale(.4); transition: opacity .5s, transform .9s cubic-bezier(.2,1.3,.4,1); }
.hrv.lit .hrv-glow { opacity: .85; transform: scale(1); }
/* the hero: slides in from the right, out of focus to sharp */
.hrv-art { position: absolute; right: 2%; bottom: -6%; width: 64%; height: 112%; background: center bottom / contain no-repeat; opacity: 0; transform: translateX(14%) scale(1.08); filter: blur(10px) brightness(1.8);
  transition: opacity .35s ease-out, transform .9s cubic-bezier(.15,1,.3,1), filter .7s ease-out; }
.hrv.lit .hrv-art { opacity: 1; transform: none; filter: drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 0 26px color-mix(in srgb, var(--tc) 80%, transparent)) drop-shadow(14px 18px 22px rgba(0,0,0,.55)); }
.hrv-art canvas, .hrv-art img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
/* drifting sparkles */
.hrv-sparks i { position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff, 0 0 16px var(--tc); transform: scale(var(--s)); opacity: 0; animation: hrvSpark 2.6s ease-out var(--d) infinite; }
.hrv-sparks i:nth-child(3n) { width: 3px; height: 3px; }
.hrv-sparks i:nth-child(4n)::before { content: ''; position: absolute; left: -9px; right: -9px; top: 2px; height: 2px; background: linear-gradient(90deg, transparent, #fff, transparent); }
@keyframes hrvSpark { 0% { opacity: 0; translate: 0 0 } 20% { opacity: 1 } 100% { opacity: 0; translate: 0 -26vh } }
/* the info block, E7-style: meta line, giant name with stars, title in the type colour */
.hrv-info { position: absolute; left: 5%; top: 10%; width: 46%; z-index: 2; text-shadow: 0 3px 10px rgba(0,0,0,.8); }
.hrv-info > * { opacity: 0; transform: translateX(-40px); transition: opacity .4s, transform .55s cubic-bezier(.2,1,.3,1); }
.hrv.lit .hrv-info > * { opacity: 1; transform: none; }
.hrv.lit .hrv-info > :nth-child(2) { transition-delay: .12s } .hrv.lit .hrv-info > :nth-child(3) { transition-delay: .24s } .hrv.lit .hrv-info > :nth-child(4) { transition-delay: .36s }
.hrv.lit .hrv-info > :nth-child(5) { transition-delay: .48s } .hrv.lit .hrv-info > :nth-child(6) { transition-delay: .6s }
.hrv-meta { display: flex; gap: 14px; font: 20px 'Lilita One'; letter-spacing: .5px; color: #e9eefc; }
.hrv-meta span + span::before { content: '◆'; color: var(--tc); margin-right: 14px; font-size: 12px; vertical-align: 3px; }
.hrv-ty { color: color-mix(in srgb, var(--tc) 50%, #fff); }
.hrv-nameRow { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.hrv-nameRow h1 { margin: 0; font: clamp(44px, 6.2vw, 84px)/0.95 'Lilita One'; letter-spacing: 1px; color: #fff;
  text-shadow: 0 4px 0 rgba(0,0,0,.55), 0 0 24px rgba(0,0,0,.7), 0 0 40px color-mix(in srgb, var(--tc) 45%, transparent); }
.hrv-stars { display: flex; gap: 2px; padding-bottom: 8px; }
.hrv-stars i { font-style: normal; font-size: clamp(26px, 2.8vw, 38px); color: #ffd23a; -webkit-text-stroke: 1.5px #7a4300; text-shadow: 0 0 12px rgba(255,200,60,.8); opacity: 0; transform: scale(2.6) rotate(-30deg); }
.hrv.lit .hrv-stars i { animation: hrvStar .32s cubic-bezier(.2,1.6,.4,1) forwards; }
.hrv.lit .hrv-stars i:nth-child(1) { animation-delay: .55s } .hrv.lit .hrv-stars i:nth-child(2) { animation-delay: .65s } .hrv.lit .hrv-stars i:nth-child(3) { animation-delay: .75s }
.hrv.lit .hrv-stars i:nth-child(4) { animation-delay: .85s } .hrv.lit .hrv-stars i:nth-child(5) { animation-delay: .95s }
@keyframes hrvStar { to { opacity: 1; transform: none; } }
.hrv.r5 .hrv-stars i { color: #ffd23a; text-shadow: 0 0 10px #ff8ae6, 0 0 22px #ff5ad8; }
.hrv-title { margin-top: 10px; font: 24px/1.15 'Lilita One'; color: color-mix(in srgb, var(--tc) 45%, #bfe0ff); max-width: 90%; }
.hrv-new { margin-top: 18px; width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; transform-origin: center;
  background: radial-gradient(circle, #ff5a3a 0 52%, #c51d12 53% 100%); box-shadow: 0 0 0 4px #ffcf5a, 0 0 0 7px #8a1206, 0 6px 18px rgba(0,0,0,.6);
  clip-path: polygon(50% 0, 61% 9%, 75% 4%, 80% 18%, 95% 20%, 92% 35%, 100% 50%, 92% 65%, 95% 80%, 80% 82%, 75% 96%, 61% 91%, 50% 100%, 39% 91%, 25% 96%, 20% 82%, 5% 80%, 8% 65%, 0 50%, 8% 35%, 5% 20%, 20% 18%, 25% 4%, 39% 9%); }
.hrv-new b { font: 27px 'Lilita One'; color: #fff; text-shadow: 0 2px 0 #7a0a00; transform: rotate(-12deg); }
.hrv.lit .hrv-new { animation: hrvStamp .45s cubic-bezier(.2,1.7,.4,1) .9s both; }
@keyframes hrvStamp { from { opacity: 0; transform: scale(2.4) rotate(-40deg); } to { opacity: 1; transform: none; } }
.hrv-dupe { margin-top: 16px; display: inline-block; font: 20px 'Lilita One'; padding: 6px 16px; background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 70%, #000), transparent); border-left: 4px solid #fff; }
.hrv-sp { margin-top: 20px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 12px; border-radius: 8px; background: rgba(8,10,30,.72); border: 1px solid rgba(255,255,255,.22); font: 19px 'Lilita One'; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.hrv-sp small { font: 12px 'Nunito'; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; padding: 2px 8px; border-radius: 4px; background: var(--tc); color: #fff; text-shadow: none; }
.hrv-bounty { margin-top: 14px; font: 18px 'Lilita One'; color: #ffe9a8; } .hrv-bounty b { font-size: 30px; margin-left: 8px; color: #ffd23a; font-weight: 400; }
.hrv-tap { position: absolute; right: 3%; bottom: 4%; z-index: 3; font: 16px 'Lilita One'; letter-spacing: 1px; color: rgba(255,255,255,.8); opacity: 0; transition: opacity .4s 1.2s; }
.hrv.lit .hrv-tap { opacity: 1; animation: pulse 1.6s 1.6s infinite; }
/* the white-out as the hero lands */
.hrv-flash { position: absolute; inset: 0; background: radial-gradient(circle at 68% 45%, #fff 0%, color-mix(in srgb, var(--tc) 50%, #fff) 40%, transparent 80%); opacity: 0; pointer-events: none; z-index: 4; }
.hrv.lit .hrv-flash { animation: hrvFlash .7s ease-out; }
@keyframes hrvFlash { 0% { opacity: 1 } 100% { opacity: 0 } }
/* Legends: rainbow rim, and a black silhouette with speed lines before the light */
.hrv.r5 { --tc: #ff5ad8; }
.hrv.r5.lit .hrv-glow { background: radial-gradient(circle, #fff 0%, #ff8ae6 25%, rgba(120,220,255,.5) 45%, transparent 70%); }
.hrv.r5 .hrv-beams i { background: linear-gradient(180deg, #ffd0f6 0%, transparent 85%); }
.hrv-lines, .hrv-silh, .hrv-don { position: absolute; pointer-events: none; transition: opacity .35s; z-index: 3; }
.hrv-lines { inset: -50%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.85) 0 1deg, transparent 1deg 6deg); animation: spin 12s linear infinite; opacity: .5; -webkit-mask: radial-gradient(circle, transparent 18%, #000 40%); mask: radial-gradient(circle, transparent 18%, #000 40%); }
.hrv-silh { right: 2%; bottom: -6%; width: 64%; height: 112%; background: center bottom / contain no-repeat; filter: brightness(0) drop-shadow(0 0 3px #fff) drop-shadow(0 0 20px #fff); animation: hrvSilh .9s ease-out; }
@keyframes hrvSilh { from { transform: scale(1.3); opacity: 0 } }
.hrv-don { left: 7%; top: 30%; font: clamp(90px, 16vw, 190px)/1 Bangers; letter-spacing: 6px; color: #fff; -webkit-text-stroke: 5px #000; paint-order: stroke fill; text-shadow: 10px 10px 0 #ff3b46; transform: rotate(-8deg); animation: hrvDon .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes hrvDon { from { transform: rotate(-8deg) scale(2.2); opacity: 0 } }
.hrv.dark .hrv-bg, .hrv.dark .hrv-shade, .hrv.dark .hrv-beams { opacity: 0; }
.hrv.lit .hrv-lines, .hrv.lit .hrv-silh, .hrv.lit .hrv-don { opacity: 0; }
@media (max-width: 640px) {
  .hrv-art { width: 100%; right: -10%; height: 78%; bottom: 18%; }
  .hrv-info { left: 5%; right: 5%; width: auto; top: auto; bottom: 7%; }
  .hrv-nameRow h1 { font-size: 46px; }
  .hrv-new { position: absolute; right: 0; top: -40px; width: 74px; height: 74px; margin: 0; }
}

/* ---------- results: E7-style banner tiles over the hero stage */
.sum-results.e7 { justify-content: flex-start; align-items: stretch; padding: 22px 34px 18px; text-align: left; background: center / cover no-repeat; }
.sum-results.e7::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,6,22,.72), rgba(4,6,22,.55) 40%, rgba(4,6,22,.88)); z-index: -1; }
.sum-results.e7 { isolation: isolate; }
.sr-top { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.sr-top h2 { margin: 0; font: 40px/1 'Lilita One'; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.5); }
.sr-top p { margin: 0 0 4px; font: 15px 'Nunito'; font-weight: 700; color: #8fc4ff; }
.sum-results.e7 .sr-head { margin: 0 0 4px auto; }
.sr-cols { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; align-items: center; margin: 10px auto 6px; width: min(1180px, 100%); }
.sr-cols.one { grid-template-columns: minmax(0, 420px); justify-content: center; }
.sr-col { display: flex; flex-direction: column; gap: 14px; }
.sr-col.c0, .sr-col.c2 { margin-top: 56px; }
.sr-tile { position: relative; height: 104px; cursor: pointer; pointer-events: auto; border-radius: 6px; overflow: visible; --tc: #3c8de0;
  opacity: 0; transform: translateX(60px); animation: srIn .45s cubic-bezier(.2,1,.3,1) forwards; animation-delay: calc(var(--k) * 70ms + .1s); }
@keyframes srIn { to { opacity: 1; transform: none; } }
.srt-bg { position: absolute; inset: 0; border-radius: 6px; overflow: hidden;
  background: linear-gradient(100deg, color-mix(in srgb, var(--tc) 55%, #061030) 0%, color-mix(in srgb, var(--tc) 30%, #050a1e) 55%, #050a1e 100%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 80%, #fff), inset 0 0 22px rgba(0,0,0,.6), 0 6px 14px rgba(0,0,0,.5); }
.srt-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 30%, rgba(255,255,255,.18), transparent 50%), repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 12px); }
.srt-art { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 58%; border-radius: 0 5px 5px 0; background: 50% 12% / 165% no-repeat; -webkit-mask: linear-gradient(90deg, transparent, #000 35%); mask: linear-gradient(90deg, transparent, #000 35%); }
.srt-ty { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; display: grid; place-items: center; font-size: 16px; border-radius: 6px; background: rgba(0,0,0,.65); box-shadow: 0 0 0 2px var(--tc); }
.srt-txt { position: absolute; left: 16px; top: 16px; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 2px 4px rgba(0,0,0,.9); }
.srt-txt b { font: 24px/1 'Lilita One'; font-weight: 400; color: #fff; white-space: nowrap; }
.srt-stars { font-size: 22px; color: #ffd23a; -webkit-text-stroke: 1px #7a4300; letter-spacing: -1px; }
.srt-txt small { font: 13px 'Nunito'; font-weight: 900; color: #bfe0ff; }
.srt-new { position: absolute; right: -14px; top: -16px; width: 56px; height: 56px; display: grid; place-items: center; font: 17px 'Lilita One'; color: #fff; text-shadow: 0 2px 0 #7a0a00; z-index: 2;
  background: radial-gradient(circle, #ff5a3a 0 52%, #c51d12 53% 100%); transform: rotate(-12deg); filter: drop-shadow(0 3px 4px rgba(0,0,0,.6));
  clip-path: polygon(50% 0, 61% 9%, 75% 4%, 80% 18%, 95% 20%, 92% 35%, 100% 50%, 92% 65%, 95% 80%, 80% 82%, 75% 96%, 61% 91%, 50% 100%, 39% 91%, 25% 96%, 20% 82%, 5% 80%, 8% 65%, 0 50%, 8% 35%, 5% 20%, 20% 18%, 25% 4%, 39% 9%); }
.sr-tile.r4 .srt-bg { box-shadow: inset 0 0 0 3px #ffcf5a, inset 0 0 22px rgba(0,0,0,.6), 0 0 18px rgba(255,200,80,.55), 0 6px 14px rgba(0,0,0,.5); }
.sr-tile.r5 .srt-bg { box-shadow: inset 0 0 0 3px #fff, inset 0 0 22px rgba(0,0,0,.5), 0 0 26px rgba(255,90,216,.8), 0 6px 14px rgba(0,0,0,.5); }
.sr-tile.r5::before { content: ''; position: absolute; inset: -4px; border-radius: 9px; background: linear-gradient(90deg, #ff5ad8, #ffd84a, #5affd0, #8ab4ff, #ff5ad8); background-size: 300% 100%; animation: srRb 2.4s linear infinite; z-index: -1; filter: blur(1px); }
@keyframes srRb { to { background-position: 300% 0; } }
.sr-tile:hover .srt-bg { filter: brightness(1.15); }
.sum-results.e7 .r-btns { justify-content: flex-end; margin-top: 4px; }
@media (max-width: 760px) {
  .sum-results.e7 { padding: 14px 10px; overflow-y: auto; }
  .sr-cols { grid-template-columns: 1fr; gap: 10px; }
  .sr-col.c0, .sr-col.c2 { margin-top: 0; }
  .sr-tile { height: 84px; }
  .sr-top h2 { font-size: 30px; }
}

/* the rarity edge glow during the summon: steady colour, no hue cycling */
#summon-ui .sum-edge { animation: none; }
#summon-ui .sum-edge.t3 { box-shadow: inset 0 0 120px rgba(90,160,255,.35); }
#summon-ui .sum-edge.t4 { box-shadow: inset 0 0 140px rgba(255,190,60,.45); }
#summon-ui .sum-edge.t5 { box-shadow: inset 0 0 160px rgba(255,90,216,.55); }

/* round 2: the reveal hint sits over bright card glow, so it gets a dark band and a hard outline */
#summon-ui .sum-hint { color: #fff; text-shadow: 0 0 3px #000, 0 2px 0 #000, 0 0 14px rgba(0,0,0,.9); }
#summon-ui .sum-hint.show { background: linear-gradient(90deg, transparent, rgba(4,8,30,.7) 25%, rgba(4,8,30,.7) 75%, transparent); padding: 6px 0; }

/* ---------- round 3: the results grid after the showcase. DOM over the 3D stage, so bloom never touches the cards */
#summon-ui .sg { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; --ch: min(31vh, 23.5vw); --cw: calc(var(--ch) * 0.714); }
#summon-ui .sg-dim { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 62% at 50% 50%, rgba(10,14,46,.3), rgba(2,3,14,.82) 100%); }
#summon-ui .sg-grid { position: relative; display: grid; grid-template-columns: repeat(5, var(--cw)); grid-auto-rows: var(--ch); gap: calc(var(--ch) * .1) calc(var(--cw) * .14); margin-top: -2vh; }
#summon-ui .sg.one .sg-grid { grid-template-columns: var(--cw); --ch: 52vh; }
#summon-ui .sg-card { position: relative; perspective: 900px; pointer-events: auto; cursor: pointer; } /* deal, flip, burst and shine are driven from summon.js on the wall clock */
#summon-ui .sg-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); }
#summon-ui .sg-back, #summon-ui .sg-front { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
#summon-ui .sg-back { transform: rotateY(180deg); background: #14204a center / cover no-repeat;
  box-shadow: 0 0 0 2px #bfe0ff, 0 0 16px rgba(120,190,255,.85), 0 0 34px rgba(80,140,255,.4), 0 10px 20px rgba(0,0,0,.6); }
#summon-ui .sg-back::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 48%, transparent 60%); background-size: 260% 100%; animation: sgSheen 1.8s linear infinite; }
@keyframes sgSheen { from { background-position: 130% 0 } to { background-position: -130% 0 } }
#summon-ui .sg-face { display: block; width: 100%; height: 100%; }
#summon-ui .sg-front { box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc) 60%, #fff), 0 0 18px var(--rc), 0 12px 22px rgba(0,0,0,.65); }
#summon-ui .sg-card.r4 .sg-front { box-shadow: 0 0 0 3px #ffe08a, 0 0 22px #ffc94a, 0 0 46px rgba(255,190,60,.55), 0 12px 22px rgba(0,0,0,.65); }
#summon-ui .sg-card.r5 .sg-front { box-shadow: 0 0 0 3px #fff, 0 0 24px #ff5ad8, 0 0 54px rgba(120,220,255,.6), 0 12px 22px rgba(0,0,0,.65); }
/* tease: a good card's back takes its colour and trembles before it turns */
#summon-ui .sg-card.tease .sg-back { box-shadow: 0 0 0 3px #fff, 0 0 26px var(--rc), 0 0 60px var(--rc); filter: brightness(1.25) saturate(1.2); }
#summon-ui .sg-card.tease.r5 .sg-back { animation: sgHue .5s linear infinite; }
@keyframes sgHue { to { filter: brightness(1.3) hue-rotate(360deg); } }
/* the flip burst: a ring of the rarity colour runs out from the card */
#summon-ui .sg-burst { position: absolute; left: 50%; top: 50%; width: calc(var(--ch) * 1.3); height: calc(var(--ch) * 1.3); margin: calc(var(--ch) * -.65) 0 0 calc(var(--ch) * -.65); border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 40%, #fff) 0 8%, transparent 30%), radial-gradient(circle, transparent 52%, var(--rc) 60%, transparent 70%); mix-blend-mode: screen; }
/* the shine: one bright sweep across the face as it lands */
#summon-ui .sg-shine { position: absolute; inset: 0; border-radius: 10px; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 47%, transparent 62%); background-size: 280% 100%; mix-blend-mode: overlay; }
/* the aura: a turning sunburst behind Super Rares and Legends, a soft halo behind the rest */
#summon-ui .sg-aura { position: absolute; left: 50%; top: 50%; width: calc(var(--ch) * 1.5); height: calc(var(--ch) * 1.5); margin: calc(var(--ch) * -.75) 0 0 calc(var(--ch) * -.75); border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 45%, transparent) 0%, transparent 62%); }
#summon-ui .sg-card.r4 .sg-aura, #summon-ui .sg-card.r5 .sg-aura { -webkit-mask: radial-gradient(circle, #000 22%, transparent 68%); mask: radial-gradient(circle, #000 22%, transparent 68%); animation: spin 14s linear infinite;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 75%, #fff) 0 5deg, transparent 5deg 18deg), radial-gradient(circle, var(--rc) 0%, transparent 60%); }
#summon-ui .sg-card.r5 .sg-aura { background: repeating-conic-gradient(from 0deg, #ff8ae6 0 5deg, transparent 5deg 12deg, #8fe8ff 12deg 17deg, transparent 17deg 24deg, #ffe08a 24deg 29deg, transparent 29deg 36deg); }
/* status badges: the NEW! starburst sits on the top right corner like a stamp */
#summon-ui .sg-tag { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); z-index: 3; white-space: nowrap; font: 15px 'Lilita One'; letter-spacing: .5px; color: #fff; padding: 2px 12px; border-radius: 6px;
  background: linear-gradient(180deg, #2b3d86, #141e4c); box-shadow: 0 0 0 2px #bfe0ff, 0 4px 8px rgba(0,0,0,.6); animation: sgPop .32s cubic-bezier(.2,1.7,.4,1); }
#summon-ui .sg-tag.new { left: auto; right: -16px; bottom: auto; top: -18px; transform: rotate(-12deg); width: 58px; height: 58px; padding: 0; display: grid; place-items: center; font-size: 17px; text-shadow: 0 2px 0 #7a0a00; border-radius: 0; box-shadow: none;
  background: radial-gradient(circle, #ff5a3a 0 52%, #c51d12 53% 100%); filter: drop-shadow(0 0 2px #ffcf5a) drop-shadow(0 3px 4px rgba(0,0,0,.7));
  clip-path: polygon(50% 0, 61% 9%, 75% 4%, 80% 18%, 95% 20%, 92% 35%, 100% 50%, 92% 65%, 95% 80%, 80% 82%, 75% 96%, 61% 91%, 50% 100%, 39% 91%, 25% 96%, 20% 82%, 5% 80%, 8% 65%, 0 50%, 8% 35%, 5% 20%, 20% 18%, 25% 4%, 39% 9%); animation: sgStamp .38s cubic-bezier(.2,1.7,.4,1); }
@keyframes sgPop { from { scale: .5 } }
@keyframes sgStamp { from { scale: 1.8; } }
#summon-ui .sg.out { animation: sgOut .3s ease-in forwards; }
@keyframes sgOut { to { opacity: 0; } }
#summon-ui .sg ~ .sum-hint { z-index: 2; }
@media (max-width: 640px) {
  #summon-ui .sg { --ch: min(22vh, 30vw); }
  #summon-ui .sg-grid { grid-template-columns: repeat(3, var(--cw)); }
}

#summon-ui .sum-flash { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; z-index: 4; }

/* ---------- round 4: the showcase stage (E7-style): crest, lit stage floor, a small figure on a pedestal, continue button */
.hrv-info { top: 17%; }
.hrv-emblem { position: absolute; left: 5%; top: 5%; z-index: 3; display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(-14px); transition: opacity .4s .1s, transform .5s .1s cubic-bezier(.2,1.4,.4,1); }
.hrv.lit .hrv-emblem { opacity: 1; transform: none; }
.hrv-emblem > i { font-style: normal; width: 58px; height: 58px; display: grid; place-items: center; font-size: 28px; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tc) 55%, #fff) 0%, var(--tc) 45%, color-mix(in srgb, var(--tc) 50%, #000) 100%); filter: drop-shadow(0 0 10px var(--tc)); box-shadow: inset 0 0 0 3px rgba(255,255,255,.6); }
.hrv-emblem b { display: block; font: 22px/1 'Lilita One'; color: #fff; letter-spacing: .5px; }
.hrv-emblem small { display: block; margin-top: 4px; font: 800 13px 'Nunito'; letter-spacing: 1px; text-transform: uppercase; color: color-mix(in srgb, var(--tc) 40%, #fff); }
.hrv-tap { display: none; }
.hrv-go { position: absolute; left: 5%; bottom: 6%; z-index: 5; min-width: 230px; padding: 14px 30px; border-radius: 10px; cursor: pointer;
  font: 24px 'Lilita One'; letter-spacing: 1px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.6);
  background: linear-gradient(180deg, #8a5a2c 0%, #5a3516 55%, #3d230d 100%); border: 2px solid #d9a54a; box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 22px rgba(255,190,90,.35), inset 0 1px 0 rgba(255,230,170,.6);
  opacity: 0; transform: translateY(16px); transition: opacity .4s 1.1s, transform .5s 1.1s; }
.hrv-go span { color: #ffd77a; margin-left: 8px; }
.hrv.lit .hrv-go { opacity: 1; transform: none; animation: hrvGo 1.8s ease-in-out 1.8s infinite; }
@keyframes hrvGo { 50% { box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 34px rgba(255,200,110,.7), inset 0 1px 0 rgba(255,230,170,.6); } }
/* the lit stage: a spotlight cone, a floor pool under the hero and glowing pedestal rings */
.hrv-stage { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .8s .2s; }
.hrv.lit .hrv-stage { opacity: 1; }
.hrv-stage i { position: absolute; display: block; }
.hs-pool { left: 30%; right: -10%; bottom: -14%; height: 40%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--tc) 60%, #fff) 0%, color-mix(in srgb, var(--tc) 55%, transparent) 25%, transparent 68%); opacity: .75; }
.hs-cone { left: 22%; width: 22%; top: -5%; height: 100%; clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, color-mix(in srgb, var(--tc) 35%, transparent) 55%, transparent 100%); filter: blur(6px); animation: hsCone 3s ease-in-out infinite alternate; }
@keyframes hsCone { from { opacity: .55 } to { opacity: .9 } }
.hs-ring { left: 22.5%; width: 21%; bottom: 4%; height: 9%; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--tc) 40%, #fff);
  box-shadow: 0 0 18px var(--tc), inset 0 0 18px var(--tc); background: radial-gradient(ellipse, color-mix(in srgb, var(--tc) 45%, transparent) 0%, transparent 70%); }
.hs-ring.b { left: 25.5%; width: 15%; bottom: 6%; height: 5%; border-width: 2px; border-style: dashed; animation: hsRing 1.8s ease-in-out infinite; }
@keyframes hsRing { 50% { transform: scale(1.12); opacity: .6 } }
.hrv-chibi { position: absolute; left: 25%; width: 16%; bottom: 7.5%; height: 40%; z-index: 2; pointer-events: none; opacity: 0; transform: translateY(30px) scale(.8); transition: opacity .5s .5s, transform .7s .5s cubic-bezier(.2,1.6,.4,1); }
.hrv.lit .hrv-chibi { opacity: 1; transform: none; }
.hrvm-fig { position: absolute; inset: 0; background: center bottom / contain no-repeat; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 12px color-mix(in srgb, var(--tc) 80%, transparent)); transform-origin: 50% 100%; animation: hrvmBob 1.4s ease-in-out infinite; }
@keyframes hrvmBob { 50% { transform: translateY(-5px) scaleY(1.02); } }
.hrvm-shadow { position: absolute; left: 15%; right: 15%; bottom: -3%; height: 8%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 70%); }
@media (max-width: 640px) {
  .hrv-chibi, .hs-cone, .hs-ring { display: none; }
  .hrv-go { left: 50%; translate: -50% 0; bottom: 2.5%; min-width: 180px; padding: 10px 20px; font-size: 19px; }
  .hrv-emblem { top: 3%; }
  .hrv-info { top: auto; bottom: 12%; }
}

/* ---------- round 5: the showcase moves. A camera push on the hero, a pulsing aura, the stage darkening around the hero,
   the name slamming in, and the figure on the pedestal is a different painting (battle pose or other form), not a copy */
.hrv-push { position: absolute; inset: 0; pointer-events: none; transform-origin: 62% 18%; }
.hrv.lit .hrv-push { animation: hrvPush 7s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes hrvPush { from { transform: scale(1.0) } to { transform: scale(1.06) translate(-1%, 0) } }
.hrv.slam .hrv-push { animation: hrvPush 7s cubic-bezier(.2,.6,.3,1) forwards, hrvPunch .38s ease-out; }
@keyframes hrvPunch { 0% { translate: 0 0 } 25% { translate: -10px 6px } 50% { translate: 8px -4px } 75% { translate: -4px 2px } 100% { translate: 0 0 } }
/* the aura: a flame-like corona in the type colour, breathing behind the hero */
.hrv-aura { position: absolute; left: 66%; top: 46%; width: 92vmin; height: 92vmin; margin: -46vmin 0 0 -46vmin; pointer-events: none; mix-blend-mode: screen; opacity: 0; transform: scale(.5); transition: opacity .5s .1s, transform .8s .1s cubic-bezier(.2,1.4,.4,1); }
.hrv.lit .hrv-aura { opacity: 1; transform: none; }
.hrv-aura i { position: absolute; inset: 0; border-radius: 50%; }
.ha-core { background: radial-gradient(circle, color-mix(in srgb, var(--tc) 50%, #fff) 0%, color-mix(in srgb, var(--tc) 70%, transparent) 22%, transparent 55%); animation: haPulse 1.25s ease-in-out infinite; }
@keyframes haPulse { 0%, 100% { opacity: .55; transform: scale(.92) } 50% { opacity: 1; transform: scale(1.06) } }
.ha-flame { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tc) 85%, #fff) 0 4deg, transparent 4deg 13deg, color-mix(in srgb, var(--tc) 60%, #ffd27a) 13deg 15deg, transparent 15deg 22deg);
  -webkit-mask: radial-gradient(circle, transparent 14%, #000 26%, transparent 62%); mask: radial-gradient(circle, transparent 14%, #000 26%, transparent 62%); filter: blur(5px); opacity: .7;
  animation: haSpin 9s linear infinite, haFlick .9s ease-in-out infinite alternate; }
.ha-flame.b { animation: haSpinR 13s linear infinite, haFlick 1.3s ease-in-out .4s infinite alternate; opacity: .5; transform: scale(1.15); }
@keyframes haSpin { to { rotate: 360deg } }
@keyframes haSpinR { to { rotate: -360deg } }
@keyframes haFlick { from { scale: .9; opacity: .4 } to { scale: 1.12; opacity: .85 } }
.ha-ring { inset: 18% !important; border: 3px solid color-mix(in srgb, var(--tc) 40%, #fff); box-shadow: 0 0 30px var(--tc), inset 0 0 30px var(--tc); opacity: 0; }
.hrv.slam .ha-ring { animation: haRing 1.6s ease-out .05s infinite; }
@keyframes haRing { 0% { opacity: .9; transform: scale(.35) } 100% { opacity: 0; transform: scale(1.35) } }
/* the stage darkens around the hero once it has landed: the light gathers on the character */
.hrv-dark { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 42% 58% at 66% 48%, transparent 0%, transparent 45%, rgba(0,0,6,.62) 100%), linear-gradient(90deg, rgba(0,0,6,.35), transparent 40%); }
.hrv.lit .hrv-dark { animation: hrvDarken 2.4s ease-in .7s forwards; }
@keyframes hrvDarken { to { opacity: 1 } }
.hrv.lit .hrv-bg { animation: hrvBg 7s ease-out forwards, hrvBgDim 2.4s ease-in .7s forwards; }
@keyframes hrvBgDim { to { filter: brightness(.5) saturate(1.1) blur(1.5px); } }
/* the name slams in from huge, with a ghost of itself blowing outward and a slash of light under it */
.hrv-nameRow { position: relative; }
.hrv-nameRow h1 { position: relative; opacity: 0; }
.hrv.slam .hrv-nameRow h1 { animation: hrvSlam .42s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes hrvSlam { 0% { opacity: .2; transform: scale(1.9) translateX(10%) } 45% { opacity: 1; transform: scale(.94) } 100% { opacity: 1; transform: none } }
.hrv-nameRow h1::after { content: attr(data-n); position: absolute; left: 0; top: 0; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--tc) 50%, #fff); text-shadow: none; opacity: 0; pointer-events: none; }
.hrv.slam .hrv-nameRow h1::after { animation: hrvGhost .7s ease-out .18s; }
@keyframes hrvGhost { 0% { opacity: .9; transform: scale(1) } 100% { opacity: 0; transform: scale(1.45) translateX(8%) } }
.hrv-nameRow::before { content: ''; position: absolute; left: -8%; right: -30%; top: 30%; height: 40%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tc) 70%, #fff), transparent); filter: blur(4px); opacity: 0; transform: scaleX(0); transform-origin: left; mix-blend-mode: screen; }
.hrv.slam .hrv-nameRow::before { animation: hrvSlash .6s ease-out .05s; }
@keyframes hrvSlash { 0% { opacity: 1; transform: scaleX(0) } 50% { opacity: .9; transform: scaleX(1) } 100% { opacity: 0; transform: scaleX(1) } }
/* the pedestal figure: a separate painting standing in battle stance, mirrored to face the hero */
.hrv-chibi { width: 17%; left: 24.5%; height: 36%; }
.hrvm-fig { animation: hrvmIdle 1.6s ease-in-out infinite; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px color-mix(in srgb, var(--tc) 80%, transparent)) brightness(1.05); }
@keyframes hrvmIdle { 0%, 100% { transform: scaleX(-1) translateY(0) scaleY(1) } 50% { transform: scaleX(-1) translateY(-6px) scaleY(1.025) } }
.hrvm-crest { position: absolute; left: 50%; bottom: 18%; width: 120px; height: 132px; margin-left: -60px; display: grid; place-items: center; clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tc) 50%, #fff) 0%, var(--tc) 45%, color-mix(in srgb, var(--tc) 40%, #000) 100%); animation: hrvmCrest 2.4s ease-in-out infinite; }
.hrvm-crest i { font-style: normal; font-size: 60px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
@keyframes hrvmCrest { 50% { transform: translateY(-10px) rotateY(25deg); filter: brightness(1.3); } }
.hrv.slam .hs-ring.a { animation: hsFlare .7s ease-out; }
@keyframes hsFlare { 0% { box-shadow: 0 0 60px #fff, inset 0 0 40px #fff; } }

/* ---------- round 5: the results grid sits on the hero's lit stage with a title, not on an empty dimmed void */
#summon-ui .sg-bgimg { position: absolute; inset: -3%; background: center / cover no-repeat; filter: brightness(.55) saturate(1.2) blur(2px); animation: sgBg 9s ease-out forwards; }
@keyframes sgBg { from { transform: scale(1.12) } to { transform: scale(1.02) } }
#summon-ui .sg-rays { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; mix-blend-mode: screen; opacity: .22;
  background: repeating-conic-gradient(from 0deg, rgba(190,220,255,.9) 0 2deg, transparent 2deg 12deg); -webkit-mask: radial-gradient(circle, #000 0%, transparent 30%); mask: radial-gradient(circle, #000 0%, transparent 30%); animation: haSpin 40s linear infinite; }
#summon-ui .sg-dim { background: radial-gradient(ellipse 70% 62% at 50% 52%, rgba(10,14,46,.15), rgba(2,3,14,.7) 100%); }
#summon-ui .sg-head { position: absolute; left: 3.2%; top: 9.5vh; z-index: 2; text-align: left; }
#summon-ui .sg-head b { display: block; font: 40px/1 'Lilita One'; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.6); }
#summon-ui .sg-head small { display: block; margin-top: 6px; font: 800 15px 'Nunito'; color: #8fc4ff; text-shadow: 0 2px 3px #000; }
#summon-ui .sg-grid { margin-top: 5vh; }
@media (max-width: 640px) { #summon-ui .sg-head { top: 4vh; } #summon-ui .sg-head b { font-size: 28px; } }

/* ---------- round 6: the showcase fills the frame (stage visible on the left, the whole hero in shot) */
.hrv-shade { background:
  linear-gradient(90deg, rgba(3,4,16,.62) 0%, rgba(3,4,16,.32) 26%, rgba(3,4,16,0) 46%),
  linear-gradient(0deg, rgba(3,4,16,.7) 0%, rgba(3,4,16,0) 24%),
  radial-gradient(ellipse at 66% 45%, transparent 40%, rgba(0,0,0,.35) 95%); }
.hrv-dark { background: radial-gradient(ellipse 48% 62% at 66% 48%, transparent 0%, transparent 50%, rgba(0,0,6,.42) 100%); }
@keyframes hrvBgDim { to { filter: brightness(.68) saturate(1.15) blur(1px); } }
.hrv-art { right: 4%; bottom: 1.5%; width: 56%; height: 95%; }
.hrv-push { transform-origin: 66% 55%; }
@keyframes hrvPush { from { transform: scale(1.0) } to { transform: scale(1.025) } }
/* the left half is a lit stage: a floor of light, a pillar of the type colour and drifting motes around the crest pedestal */
.hrv-stage::before { content: ''; position: absolute; left: 0; right: 30%; bottom: 0; height: 34%; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 40% 100%, color-mix(in srgb, var(--tc) 45%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px); mix-blend-mode: screen; opacity: .9;
  -webkit-mask: linear-gradient(0deg, #000, transparent); mask: linear-gradient(0deg, #000, transparent); }
.hrv-stage::after { content: ''; position: absolute; left: 26%; width: 14%; top: 0; bottom: 8%; pointer-events: none; mix-blend-mode: screen; filter: blur(10px);
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--tc) 40%, transparent) 40%, color-mix(in srgb, var(--tc) 70%, #fff) 100%); opacity: .5; animation: hsCone 2.6s ease-in-out infinite alternate; }
.hrv.nofig .hrvm-crest { width: 150px; height: 166px; margin-left: -75px; bottom: 16%; box-shadow: 0 0 40px var(--tc);
  outline: 3px solid color-mix(in srgb, var(--tc) 30%, #fff); }
.hrv.nofig .hrvm-crest i { font-size: 76px; }

/* ---------- round 6: the results screen, E7-style. Ornate rarity frames, the best pull lit up, a full bottom bar */
.srt-stud { position: absolute; left: 50%; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); z-index: 2; pointer-events: none;
  background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--tc) 60%, #fff) 50%, color-mix(in srgb, var(--tc) 70%, #000)); box-shadow: 0 0 8px color-mix(in srgb, var(--tc) 80%, #fff); }
.srt-stud.a { top: -6px; } .srt-stud.b { bottom: -6px; }
.sr-tile.r4 .srt-stud { background: linear-gradient(135deg, #fff8d0, #ffcf5a 50%, #9a6400); box-shadow: 0 0 10px #ffcf5a; }
.srt-bg::before { content: ''; position: absolute; inset: 5px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--tc) 45%, rgba(255,255,255,.4)); pointer-events: none; z-index: 1; }
.sr-tile.top { z-index: 3; animation: srIn .45s cubic-bezier(.2,1,.3,1) forwards, srTop 1.6s ease-in-out .6s infinite; animation-delay: calc(var(--k) * 70ms + .1s), .6s; }
@keyframes srTop { 0%, 100% { transform: scale(1.045) } 50% { transform: scale(1.065) } }
.sr-tile.top .srt-bg { box-shadow: inset 0 0 0 3px #fff2b0, inset 0 0 26px rgba(255,200,80,.35), 0 0 22px #ffd25a, 0 0 46px rgba(255,170,40,.7), 0 6px 14px rgba(0,0,0,.5); }
.srt-halo { position: absolute; inset: -14px -16px; border-radius: 16px; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 0 0 / 18px 18px, radial-gradient(ellipse at 50% 50%, rgba(255,220,120,.9), rgba(255,170,40,.5) 45%, transparent 72%);
  -webkit-mask: radial-gradient(ellipse at 50% 50%, transparent 55%, #000 62%); mask: radial-gradient(ellipse at 50% 50%, transparent 55%, #000 62%);
  filter: blur(.5px) drop-shadow(0 0 6px #ffd25a); animation: srHalo 1.2s ease-in-out infinite alternate; }
@keyframes srHalo { from { opacity: .65; background-position: 0 0, 0 0; } to { opacity: 1; background-position: 9px 9px, 0 0; } }
.sr-tile.top .srt-txt b { color: #fff6c8; text-shadow: 0 0 10px rgba(255,200,80,.9), 0 2px 4px #000; }
/* the bar: Back on the left, Summon Again with its cost and Confirm on the right */
.sum-results.e7 .sr-bar { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.sum-results.e7 .sr-bar .btn { min-width: 0; height: 58px; padding: 0 30px; border-radius: 8px; font: 24px 'Lilita One'; letter-spacing: .5px; color: #fff; text-shadow: 0 2px 2px rgba(0,0,0,.7);
  border: 2px solid rgba(255,255,255,.18); transform: none; display: inline-flex; align-items: center; gap: 14px; }
.sum-results.e7 .sr-bar .sr-back { margin-right: auto; width: 250px; justify-content: center; background: linear-gradient(180deg, #5c4128, #2d1e10); border-color: #8a6a40; box-shadow: inset 0 1px 0 rgba(255,220,160,.3), 0 4px 10px rgba(0,0,0,.6); position: relative; }
.sum-results.e7 .sr-bar .sr-back::before { content: '➜'; position: absolute; left: 22px; transform: scaleX(-1); color: #ffc46a; font-size: 26px; }
.sum-results.e7 .sr-bar .team { font: 800 14px 'Nunito'; color: #9fc8ff; text-decoration: underline; background: none; border: 0; pointer-events: auto; cursor: pointer; }
.sum-results.e7 .sr-bar .again { padding-left: 10px; background: linear-gradient(180deg, #1c3f86, #0d1f4c); border-color: #4f86e0; box-shadow: inset 0 1px 0 rgba(170,210,255,.35), 0 4px 10px rgba(0,0,0,.6); }
.sum-results.e7 .sr-bar .again em { font: 18px 'Lilita One'; font-style: normal; padding: 6px 14px; border-radius: 6px; background: rgba(0,0,0,.55); color: #ffe7a0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.sum-results.e7 .sr-bar .again[disabled] { filter: grayscale(.7) brightness(.7); }
.sum-results.e7 .sr-bar .ok { width: 290px; justify-content: center; background: linear-gradient(180deg, #2f9a3c, #11561c); border-color: #6ed27a; box-shadow: inset 0 1px 0 rgba(200,255,200,.35), 0 0 18px rgba(80,220,100,.35), 0 4px 10px rgba(0,0,0,.6); }
@media (max-width: 760px) {
  .sum-results.e7 .sr-bar { flex-wrap: wrap; }
  .sum-results.e7 .sr-bar .btn { height: 48px; font-size: 18px; padding: 0 14px; }
  .sum-results.e7 .sr-bar .sr-back, .sum-results.e7 .sr-bar .ok { width: auto; }
}
.sum-results.e7 .sr-bar .btn { white-space: nowrap; }
.sum-results.e7 .sr-bar .again { font-size: 21px; padding-right: 22px; }

/* ---------- round 6: the dealt grid becomes the results screen: counts top right, the best card lit, the action bar along the bottom */
#summon-ui .sg-sum { position: absolute; right: 3.2%; top: 10vh; z-index: 3; display: flex; gap: 8px; animation: sgBarIn .45s cubic-bezier(.2,1,.3,1); }
#summon-ui .sg-sum span { font: 19px 'Lilita One'; padding: 5px 14px; border-radius: 6px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); box-shadow: 0 3px 8px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.25); transform: skewX(-8deg); }
#summon-ui .sg-sum .s5 { background: linear-gradient(90deg, #ff5ad8, #8a5aff); } #summon-ui .sg-sum .s4 { background: linear-gradient(180deg, #ffd25a, #d68a10); color: #3a2000; text-shadow: none; }
#summon-ui .sg-sum .s3 { background: linear-gradient(180deg, #5aa0ff, #2a5ac8); } #summon-ui .sg-sum .sn { background: linear-gradient(180deg, #ff5a3a, #b81a10); }
#summon-ui .sg-barwrap.sum-results { position: absolute; left: 0; right: 0; top: auto; bottom: 0; inset-inline: 0; height: auto; display: block; padding: 0 3.2% 2.2vh; background: linear-gradient(0deg, rgba(2,3,14,.85), transparent); animation: sgBarIn .45s cubic-bezier(.2,1,.3,1); z-index: 3; pointer-events: none; }
#summon-ui .sg-barwrap .sr-bar { margin: 0; } #summon-ui .sg-barwrap button { pointer-events: auto; }
@keyframes sgBarIn { from { opacity: 0; transform: translateY(40px); } }
#summon-ui .sg:has(.sg-barwrap) .sg-grid { margin-top: -5vh; }
/* the showcase card on the finished grid: a crown of light and a slow golden pulse */
#summon-ui .sg-card.star.done { z-index: 2; animation: sgStar 1.6s ease-in-out infinite; }
@keyframes sgStar { 0%, 100% { scale: 1.06 } 50% { scale: 1.09 } }
#summon-ui .sg-card.star.done .sg-front { box-shadow: 0 0 0 3px #fff6c8, 0 0 26px #ffd25a, 0 0 60px rgba(255,180,50,.8), 0 12px 22px rgba(0,0,0,.65); }
#summon-ui .sg-card.star.done::before { content: ''; position: absolute; inset: -16px; border-radius: 18px; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 0 0 / 16px 16px, radial-gradient(ellipse, rgba(255,220,120,.95), rgba(255,170,40,.4) 55%, transparent 72%);
  -webkit-mask: radial-gradient(ellipse at 50% 50%, transparent 58%, #000 64%); mask: radial-gradient(ellipse at 50% 50%, transparent 58%, #000 64%); animation: srHalo 1.1s ease-in-out infinite alternate; }
@media (max-width: 640px) { #summon-ui .sg-sum { top: auto; bottom: 13vh; right: 50%; translate: 50% 0; } }
.sum-results.e7 .sr-bar .btn { flex-direction: row; flex-wrap: nowrap; line-height: 1; }
.sum-results.e7 .sr-bar .again em { display: inline-block; }
#summon-ui .sg:has(.sg-barwrap) { --ch: min(29.5vh, 23vw); }
#summon-ui .sg:has(.sg-barwrap) .sg-grid { margin-top: 1vh; }

/* ---------- round 7: the name is the payoff. A solid, outlined, glowing title inside the safe area; the stars on their own
   gold rule below it with the NEW stamp; no stray crest floating on an empty pedestal */
.hrv-info { left: max(5%, 32px); top: 15.5%; width: 44%; }
.hrv-meta { font-size: 19px; color: #dfe7ff; }
.hrv-nameRow { margin-top: 4px; display: block; }
.hrv-nameRow h1 { display: inline-block; white-space: nowrap; font: 92px/1.0 'Lilita One'; letter-spacing: 1.5px; padding: 0 6px 0 2px;
  color: #fff; -webkit-text-stroke: 7px #120a1e; paint-order: stroke fill; text-shadow: none;
  filter: drop-shadow(0 5px 0 rgba(0,0,0,.6)) drop-shadow(0 0 14px color-mix(in srgb, var(--tc) 70%, transparent)) drop-shadow(0 0 30px rgba(0,0,0,.55));
  transform-origin: 0% 70%; opacity: 0; }
/* the fill gets a warm top-light sheen over the white */
.hrv-nameRow h1::before { content: attr(data-n); position: absolute; left: 2px; top: 0; pointer-events: none; -webkit-text-stroke: 0;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 48%, color-mix(in srgb, var(--tc) 22%, #ffe9b8) 62%, #ffd77a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* driven by CSS alone (no JS timer): even on a starved main thread the title is solid on every frame */
.hrv.lit .hrv-nameRow h1, .hrv.slam .hrv-nameRow h1 { opacity: 1; animation: hrvSlam7 .36s cubic-bezier(.25,1.6,.5,1) .3s backwards; }
@keyframes hrvSlam7 { 0% { opacity: 1; transform: scale(1.55); filter: brightness(2.2) drop-shadow(0 0 24px #fff); } 55% { transform: scale(.97); } 100% { opacity: 1; transform: none; } }
.hrv-nameRow h1::after { -webkit-text-stroke: 3px color-mix(in srgb, var(--tc) 40%, #fff); transform-origin: 0% 70%; }
@keyframes hrvGhost { 0% { opacity: .85; transform: scale(1) } 100% { opacity: 0; transform: scale(1.3) translateX(3%) } }
.hrv-nameRow::before { left: 0; right: -10%; }
/* the stars sit on their own line, on a gold rule, with the NEW stamp at the end of it */
.hrv-starRow { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 6px; height: 54px; }
.hrv-starRow .hrv-stars { padding: 0; gap: 4px; position: relative; z-index: 1; }
.hrv-starRow .hrv-stars i { font-size: 36px; -webkit-text-stroke: 2px #5a2e00; paint-order: stroke fill; text-shadow: 0 0 10px rgba(255,200,60,.9), 0 3px 0 rgba(0,0,0,.5); }
.hrv-rule { flex: 0 1 190px; height: 2px; background: linear-gradient(90deg, #ffd77a, color-mix(in srgb, #ffd77a 40%, transparent) 70%, transparent); box-shadow: 0 0 8px rgba(255,200,90,.7); transform: scaleX(0); transform-origin: left; transition: transform .6s .7s cubic-bezier(.2,1,.3,1); }
.hrv.lit .hrv-rule { transform: none; }
.hrv-starRow .hrv-new { margin: 0 0 0 -6px; width: 74px; height: 74px; flex: none; }
.hrv-starRow .hrv-new b { font-size: 22px; }
.hrv-title { margin-top: 8px; font-size: 26px; color: color-mix(in srgb, var(--tc) 30%, #9fd0ff); -webkit-text-stroke: 4px rgba(6,8,24,.85); paint-order: stroke fill; }
.hrv-sp { margin-top: 22px; }
.hrv.lit .hrv-info > :nth-child(5) { transition-delay: .48s } .hrv.lit .hrv-info > :nth-child(6) { transition-delay: .6s } .hrv.lit .hrv-info > :nth-child(7) { transition-delay: .7s }
/* a darker plate behind the left column so the white title reads on any stage */
.hrv-info::before { content: ''; position: absolute; left: -12%; top: -14%; width: 125%; height: 135%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 35% 40%, rgba(2,3,14,.7), rgba(2,3,14,.35) 55%, transparent 75%); }
/* no in-game figure: no empty pedestal either. The crest lives in the corner emblem; the floor stays a lit stage */
.hrv.nofig .hrv-chibi, .hrv.nofig .hs-ring, .hrv.nofig .hs-cone, .hrv.nofig .hrv-stage::after { display: none; }
@media (max-width: 640px) {
  .hrv-nameRow h1 { font-size: 46px; -webkit-text-stroke: 5px #120a1e; }
  .hrv-starRow { height: 44px; } .hrv-starRow .hrv-stars i { font-size: 28px; }
  .hrv-starRow .hrv-new { position: static; width: 60px; height: 60px; }
}