/* a dropped card in the middle of the screen until รับ (js/carddrop.js; the user's pick A "เสาแสง" on carddroppick.html, effects
   by how much the card matters: .l0 a common monster card ... .l3 a boss card). Only the middle takes clicks: the game and
   auto play go on behind it. */
#ui .cdr { position: fixed; inset: 0; z-index: 99000; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, .45), rgba(0, 0, 0, .78)); animation: cdrIn .35s ease-out both; }
#ui .cdr[hidden] { display: none; }
#ui .cdr.l0 { background: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, .15), rgba(0, 0, 0, .55)); }
#ui .cdr.l3 { background: radial-gradient(circle at 50% 45%, rgba(30, 20, 0, .55), rgba(0, 0, 0, .86)); }
#ui .cdr-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: auto; padding: 18px 28px; }
#ui .cdr-q { position: absolute; right: -10px; top: -6px; z-index: 6; padding: 3px 11px; border-radius: 99px; background: rgba(0, 0, 0, .7); color: #ffe3a0; font: 600 13px Prompt, sans-serif; border: 1px solid rgba(255, 215, 106, .5); }
#ui .cdr-ban { position: relative; z-index: 5; padding: 4px 20px; border-radius: 99px; background: var(--gc); color: #1a1208; font: 700 16px Prompt, sans-serif; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); animation: cdrFade .5s .35s both; }
#ui .cdr.l0 .cdr-ban { font-size: 14px; padding: 3px 16px; }
#ui .cdr-card { position: relative; z-index: 4; width: 210px; animation: cdrRise .9s cubic-bezier(.2, 1.4, .4, 1) both; filter: drop-shadow(0 0 14px var(--gc)); }
#ui .cdr.l2 .cdr-card { width: 228px; filter: drop-shadow(0 0 22px var(--gc)); }
#ui .cdr.l3 .cdr-card { width: 250px; filter: drop-shadow(0 0 30px var(--gc)) drop-shadow(0 0 60px rgba(255, 220, 120, .55)); animation-duration: 1.2s; }
#ui .cdr-card .cd { width: 100% !important; }
#ui .cdr-tag { position: relative; z-index: 5; color: var(--gc); font: 700 15px Prompt, sans-serif; text-shadow: 0 1px 2px #000; animation: cdrFade .5s .55s both; }
#ui .cdr-nm { position: relative; z-index: 5; color: #fff; font: 700 20px Prompt, sans-serif; text-shadow: 0 2px 4px #000; animation: cdrFade .5s .65s both; }
#ui .cdr-sk { position: relative; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; border-radius: 99px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 215, 106, .45); color: #f3ead6; font: 500 13.5px Prompt, sans-serif; cursor: pointer; animation: cdrFade .5s .75s both; }
#ui .cdr-sk img { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(255, 215, 106, .7); object-fit: cover; background: #111; }
#ui .cdr-go { position: relative; z-index: 5; margin-top: 4px; min-width: 150px; font: 700 19px Prompt, sans-serif; padding: 10px 38px; border-radius: 99px; cursor: pointer; border: 2px solid #fff0b8; color: #2c1a08;
  background: linear-gradient(#fff2b8, #f2b64a 55%, #c9832a); box-shadow: 0 6px 18px rgba(0, 0, 0, .55); animation: cdrFade .5s .9s both; }
#ui .cdr-go:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* the rays behind it: faint for a common card, two layers and brighter as it matters more */
#ui .cdr-rays { position: absolute; left: 50%; top: 44%; z-index: 1; width: 560px; height: 560px; margin: -280px; border-radius: 50%; pointer-events: none; opacity: .22;
  background: conic-gradient(from 0deg, transparent 0 8deg, var(--gc) 8deg 12deg, transparent 12deg 30deg, var(--gc) 30deg 33deg, transparent 33deg 60deg, var(--gc) 60deg 64deg, transparent 64deg 90deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%); mask: radial-gradient(circle, #000 18%, transparent 66%); animation: cdrSpin 14s linear infinite; }
#ui .cdr.l1 .cdr-rays { opacity: .35; }
#ui .cdr.l2 .cdr-rays { opacity: .5; width: 680px; height: 680px; margin: -340px; }
#ui .cdr.l3 .cdr-rays { opacity: .7; width: 820px; height: 820px; margin: -410px; }
#ui .cdr-rays.r2 { animation-direction: reverse; animation-duration: 20s; opacity: .3 !important; }
/* rings that open out (mini boss and up), a light pillar and a flash (boss cards) */
#ui .cdr-ring { position: absolute; left: 50%; top: 44%; z-index: 2; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 3px solid var(--gc); pointer-events: none; animation: cdrRing 2.4s .3s ease-out infinite; }
#ui .cdr-ring.r2 { animation-delay: 1.5s; border-color: #fff3c4; }
#ui .cdr-pillar { position: absolute; left: 50%; top: -40vh; bottom: -40vh; z-index: 1; width: 260px; margin-left: -130px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 230, 150, .35), rgba(255, 250, 220, .6), rgba(255, 230, 150, .35), transparent); animation: cdrPillar 1.4s ease-out both; }
#ui .cdr-flash { position: fixed; inset: 0; z-index: 7; background: #fff8dc; pointer-events: none; animation: cdrFlash .7s ease-out both; }
/* motes falling round it (grade 3 and up) */
#ui .cdr-motes { position: absolute; left: 50%; top: 44%; z-index: 3; width: 0; height: 0; pointer-events: none; }
#ui .cdr-motes i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 8px var(--gc); animation: cdrMote 2.2s linear infinite; }
#ui .cdr.l3 .cdr-motes i { width: 8px; height: 8px; background: #ffe7a0; }
#ui .cdr-motes i:nth-child(odd) { animation-duration: 2.8s; }
#ui .cdr-motes i:nth-child(1) { --x: -190px; animation-delay: 0s; } #ui .cdr-motes i:nth-child(2) { --x: 170px; animation-delay: .3s; }
#ui .cdr-motes i:nth-child(3) { --x: -120px; animation-delay: .6s; } #ui .cdr-motes i:nth-child(4) { --x: 140px; animation-delay: .9s; }
#ui .cdr-motes i:nth-child(5) { --x: -60px; animation-delay: 1.2s; } #ui .cdr-motes i:nth-child(6) { --x: 90px; animation-delay: 1.5s; }
#ui .cdr-motes i:nth-child(7) { --x: -220px; animation-delay: 1.8s; } #ui .cdr-motes i:nth-child(8) { --x: 210px; animation-delay: .15s; }
#ui .cdr-motes i:nth-child(9) { --x: -150px; animation-delay: .45s; } #ui .cdr-motes i:nth-child(10) { --x: 40px; animation-delay: .75s; }
#ui .cdr-motes i:nth-child(11) { --x: -30px; animation-delay: 1.05s; } #ui .cdr-motes i:nth-child(12) { --x: 120px; animation-delay: 1.35s; }
#ui .cdr-motes i:nth-child(13) { --x: -250px; animation-delay: 1.65s; } #ui .cdr-motes i:nth-child(14) { --x: 250px; animation-delay: 1.95s; }
#ui .cdr-motes i:nth-child(15) { --x: -95px; animation-delay: .2s; } #ui .cdr-motes i:nth-child(16) { --x: 65px; animation-delay: .5s; }
#ui .cdr-motes i:nth-child(17) { --x: -175px; animation-delay: .8s; } #ui .cdr-motes i:nth-child(18) { --x: 185px; animation-delay: 1.1s; }
#ui .cdr-motes i:nth-child(19) { --x: -10px; animation-delay: 1.4s; } #ui .cdr-motes i:nth-child(20) { --x: 230px; animation-delay: 1.7s; }
#ui .cdr-motes i:nth-child(21) { --x: -235px; animation-delay: 2s; } #ui .cdr-motes i:nth-child(22) { --x: 15px; animation-delay: 2.3s; }
@keyframes cdrIn { from { opacity: 0; } }
@keyframes cdrRise { from { transform: translateY(90px) scale(.35); opacity: 0; } }
@keyframes cdrFade { from { opacity: 0; transform: translateY(8px); } }
@keyframes cdrSpin { to { transform: rotate(360deg); } }
@keyframes cdrRing { from { transform: scale(1); opacity: .9; } to { transform: scale(26); opacity: 0; } }
@keyframes cdrPillar { from { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } to { transform: scaleX(1); opacity: .8; } }
@keyframes cdrFlash { from { opacity: .85; } to { opacity: 0; } }
@keyframes cdrMote { from { transform: translate(var(--x, 0), -260px); opacity: 0; } 15% { opacity: 1; } to { transform: translate(var(--x, 0), 240px); opacity: 0; } }
/* phones: smaller, the button easy to reach */
@media (max-width: 700px), (max-height: 560px) {
  #ui .cdr-card { width: 150px; } #ui .cdr.l2 .cdr-card { width: 160px; } #ui .cdr.l3 .cdr-card { width: 172px; }
  #ui .cdr-nm { font-size: 17px; } #ui .cdr-go { font-size: 18px; padding: 10px 34px; }
  #ui .cdr-in { gap: 6px; padding: 10px 16px; }
}
/* while a card is on screen the HUD layer (#ui, z-index 2) rises over the page's other pop-ups (an achievement's 960 ...) */
body.cdr-on #ui { z-index: 1200; }
body.cdr-on .ach-pop { opacity: 0 !important; }   /* (an achievement's pop-up waits under it, not through it) */
#ui .cdr-full { position: relative; z-index: 5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; font: 500 13px Prompt, sans-serif; color: #ffb4a0; }
#ui .cdr-book { font: 600 13px Prompt, sans-serif; padding: 4px 12px; border-radius: 99px; cursor: pointer; border: 1px solid rgba(255, 215, 106, .6); background: rgba(0, 0, 0, .5); color: #ffe3a0; }