/* The daily Dragon Balls (src/ui/dragonballs.js): over PLAY in the start screen's play panel. The Dragon Radar on the left (a green
   screen, its grid, a sweep turning, the blip lit and pulsing while today's ball is ready), the seven balls (dim until found), and
   COLLECT or the countdown. The hub's chamfered card */
#startOv .dbDaily{display:flex;align-items:center;gap:.875rem;margin:0 0 .875rem;padding:.625rem .875rem;border:1px solid #2a3766;background:linear-gradient(100deg,rgba(255,159,28,.1),#101833 45%);clip-path:polygon(.625rem 0,100% 0,100% calc(100% - .625rem),calc(100% - .625rem) 100%,0 100%,0 .625rem)}
#startOv .dbDaily[hidden]{display:none}
.dbRadar{position:relative;flex:none;width:4.5rem;height:4.5rem;border-radius:50%;overflow:hidden;border:.1875rem solid #c9ced8;box-shadow:inset 0 0 .75rem rgba(0,0,0,.6),0 0 0 .125rem #59606e;
  background:repeating-radial-gradient(circle,transparent 0 .82rem,rgba(140,255,140,.35) .82rem .9rem),linear-gradient(transparent calc(50% - 1px),rgba(140,255,140,.35) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(90deg,transparent calc(50% - 1px),rgba(140,255,140,.35) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),radial-gradient(circle,#2e8a2e,#0f3d12)}
.dbSweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg 285deg,rgba(170,255,170,0) 285deg,rgba(170,255,170,.6) 360deg);animation:dbSweep var(--sweep,2.6s) linear infinite}   /* its bright edge leads, clockwise from the top */
.dbMe{position:absolute;left:50%;top:50%;width:0;height:0;border-left:.22rem solid transparent;border-right:.22rem solid transparent;border-bottom:.4rem solid #ff3b30;transform:translate(-50%,-60%)}   /* you, at the middle, as the radar draws its holder */
.dbBlip{position:absolute;width:.6rem;height:.6rem;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#fff3b0,#ffb52e 45%,#d9670b);box-shadow:0 0 .55rem #ffb52e;animation:dbPing var(--sweep,2.6s) linear infinite}   /* today's ball where the radar found it: it flares as the sweep passes (its delay is its angle) */
.dbBlip.wait{animation-name:dbPingDim;filter:saturate(.6);box-shadow:0 0 .3rem #ffb52e}   /* the next ball, not ready yet: there, dimmer (the owner, 2026-10-23) */
@keyframes dbPingDim{0%{opacity:.6;transform:translate(-50%,-50%) scale(1.25)}35%{opacity:.45;transform:translate(-50%,-50%) scale(1)}100%{opacity:.22;transform:translate(-50%,-50%) scale(.9)}}
.dbBody{display:flex;flex-direction:column;gap:.35rem;min-width:0;flex:1}
.dbHead{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.dbHead b{font-family:var(--disp);font-style:italic;font-size:.875rem;letter-spacing:.06em;color:#ffd36b}
.dbCount{font-family:var(--disp);font-size:.8125rem;color:#c9cfee}
.dbBalls{display:flex;gap:.25rem}
.dbBall{width:1.75rem;height:1.75rem;flex:none;filter:grayscale(1) brightness(.45);opacity:.55;transition:filter .3s,opacity .3s}
.dbBall svg{width:100%;height:100%;display:block}
.dbBall.on{filter:drop-shadow(0 0 .3rem rgba(255,170,40,.7));opacity:1}
.dbBall.fresh{animation:dbFound .7s cubic-bezier(.2,1.6,.4,1)}
.dbAct{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.dbGo{padding:.4rem .75rem;border:0;background:linear-gradient(90deg,#ffb547,#ff9f1c);color:#1a1000;font:italic 800 .75rem/1 var(--disp);letter-spacing:.05em;cursor:pointer;clip-path:polygon(.4rem 0,100% 0,calc(100% - .4rem) 100%,0 100%);animation:dbGlow 1.6s ease-in-out infinite}
.dbGo:disabled{animation:none;opacity:.7;cursor:default}
.dbGo.wait{opacity:1;background:#1b2650;color:#c9cfee;border:1px solid #2a3766}.dbGo.wait b{font-family:var(--disp);color:#fff;font-variant-numeric:tabular-nums;margin-left:.25rem}
.dbGo:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:.125rem}
.dbNext{font-size:.8125rem;color:#c9cfee}.dbNext b{font-family:var(--disp);color:#fff;font-variant-numeric:tabular-nums}
.dbPrize{font-size:.75rem;color:#9aa6d6}.dbPrize b{color:#7fe3ff}
.dbMsg{margin:0;font-size:.75rem;color:#7cf0b0}
@keyframes dbSweep{to{transform:rotate(360deg)}}
@keyframes dbPing{0%{opacity:1;transform:translate(-50%,-50%) scale(1.45);box-shadow:0 0 .9rem #ffd84a}35%{opacity:.85;transform:translate(-50%,-50%) scale(1)}100%{opacity:.45;transform:translate(-50%,-50%) scale(.9)}}
@keyframes dbFound{from{transform:scale(.3) rotate(-90deg)}to{transform:none}}
@keyframes dbGlow{0%,100%{filter:none}50%{filter:brightness(1.15) drop-shadow(0 0 .35rem rgba(255,170,40,.7))}}
@media (max-width:760px){.dbRadar{width:3.5rem;height:3.5rem}.dbBall{width:1.4rem;height:1.4rem}#startOv .dbDaily{gap:.625rem;padding:.5rem .625rem}}
@media (prefers-reduced-motion:reduce){.dbSweep,.dbBlip,.dbBall.fresh,.dbGo{animation:none}}

/* Shenron grants the wish (collection.js colWishHtml): rising in perspective out of the pop-up, unframed (his picture's edges fade
   into a green glow), the seven balls circling him and scattering, lightning behind; still under reduced motion */
.dbwStage{position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem 0 .25rem;text-align:center;perspective:42rem;overflow:hidden}
.dbwSky{display:none}   /* no glow behind Shenron (the owner, 2026-10-22) */
.dbwBolt{position:absolute;top:0;width:.2rem;height:55%;background:linear-gradient(#eaffd0,rgba(170,255,120,0));filter:drop-shadow(0 0 .4rem #b6ff7a);opacity:0;transform-origin:top;animation:dbwBolt 2.4s ease-out infinite}
.dbwBolt.b1{left:22%;transform:rotate(14deg)}.dbwBolt.b2{right:24%;transform:rotate(-18deg);animation-delay:1.1s}
.dbwRig{position:relative;width:15rem;height:15rem;transform-style:preserve-3d;animation:dbwRise 1.4s cubic-bezier(.2,.9,.25,1) both}
.dbwDragon{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;
  -webkit-mask-image:radial-gradient(circle at 50% 46%,#000 42%,rgba(0,0,0,.7) 55%,transparent 70%);mask-image:radial-gradient(circle at 50% 46%,#000 42%,rgba(0,0,0,.7) 55%,transparent 70%);
  animation:dbwFloat 3.2s ease-in-out 1.4s infinite}
/* the balls go round him on a flat oval (no 3D tilt, so they draw sharp), each its own angle along the turn; a little smaller
   on the far side */
@property --dbwAng{syntax:"<angle>";inherits:false;initial-value:0deg}
.dbwOrbs{position:absolute;inset:0}
.dbwOrb{--r:9rem;position:absolute;left:50%;top:52%;width:1.6rem;height:1.6rem;transform:translate(calc(-50% + cos(var(--dbwAng)) * var(--r)),calc(-50% + sin(var(--dbwAng)) * var(--r) * .32)) scale(calc(.88 + .16 * sin(var(--dbwAng))));animation:dbwOrbit 8s linear infinite;animation-delay:calc(var(--i) * -8s / 7)}
.dbwOrb .dbBall{width:100%;height:100%;filter:drop-shadow(0 0 .2rem rgba(255,180,40,.75));opacity:1;animation:dbwBallSpin 6s linear infinite}   /* each ball turning as it goes round */
@keyframes dbwBallSpin{to{transform:rotate(360deg)}}
.dbwEyebrow{position:relative;font-family:var(--disp);font-style:italic;font-size:.75rem;letter-spacing:.14em;color:#9dffb8}
.dbwTitle{position:relative;margin:0;font-family:var(--disp);font-style:italic;font-size:1.75rem;line-height:1;text-transform:uppercase;color:#fff;text-shadow:0 .15rem 0 #0d5a2a;animation:dbwTitle .6s cubic-bezier(.2,1.6,.4,1) .9s both}
.dbwGot{position:relative;display:flex;flex-direction:column;align-items:center;gap:.15rem;margin:.25rem 0 .25rem;font-family:var(--disp);color:#ffe07a}
.dbwGot .dbwAmt{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;font-size:2.5rem;line-height:1;text-shadow:0 .15rem 0 #7a3c00,0 0 1rem rgba(255,190,60,.55)}
.dbwGot .dbwAmt .shGl{width:.85em;height:.85em}
.dbwGot small{font-family:var(--body,inherit);font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#cfe9ff}
.dbwLine{position:relative;margin:.25rem 0 0;max-width:24rem;font-size:.8125rem;line-height:1.4;color:#c9cfee}
@keyframes dbwRise{0%{opacity:0;transform:translateY(5rem) rotateX(55deg) scale(.55)}60%{opacity:1}100%{opacity:1;transform:translateY(0) rotateX(8deg) scale(1)}}
@keyframes dbwFloat{0%,100%{transform:translateY(0) rotateY(-6deg)}50%{transform:translateY(-.5rem) rotateY(6deg)}}
@keyframes dbwOrbit{from{--dbwAng:0deg}to{--dbwAng:360deg}}
@keyframes dbwScatter{to{transform:rotate(calc(var(--i) * 51.43deg)) translateX(22rem) translateZ(6rem) rotateX(-68deg);opacity:0}}
@keyframes dbwBolt{0%,70%,100%{opacity:0}75%{opacity:1}85%{opacity:.3}}
@keyframes dbwTitle{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@media (max-width:760px){.dbwRig{width:11rem;height:11rem}.dbwOrb{--r:6.75rem;width:1.35rem;height:1.35rem}.dbwTitle{font-size:1.75rem}}
.dbwOrb .dbBall{}
@media (prefers-reduced-motion:reduce){.dbwOrb .dbBall,.dbwRig,.dbwDragon,.dbwOrbs,.dbwOrb,.dbwBolt,.dbwTitle{animation:none}.dbwOrb{opacity:0}}
.dbwStage.calm .dbwRig,.dbwStage.calm .dbwDragon,.dbwStage.calm .dbwOrbs,.dbwStage.calm .dbwOrb,.dbwStage.calm .dbwBolt,.dbwStage.calm .dbwTitle{animation:none}.dbwStage.calm .dbwOrb{opacity:0}
.dbwDragon.render{border-radius:0;object-fit:contain;-webkit-mask-image:none;mask-image:none;filter:none}   /* the owner's 3D render: drawn whole, as it is (no glow: the owner, 2026-10-22) */
/* COLLECT: the seven balls scattering across the screen (collection.js colWishScatter) */
.dbScatter{position:fixed;inset:0;z-index:9100;pointer-events:none;overflow:hidden}
.dbFly{position:fixed;width:2.75rem;height:2.75rem}
.dbFlyBall{position:absolute;inset:0;filter:drop-shadow(0 0 .9rem rgba(255,190,60,1)) drop-shadow(0 0 .3rem #fff3b0)}
.dbFlyBall .dbBall{width:100%;height:100%;opacity:1;filter:none}
.dbTrail{position:absolute;right:50%;top:50%;height:1.6rem;width:0;transform:translateY(-50%);border-radius:1rem 0 0 1rem;background:linear-gradient(90deg,rgba(255,170,40,0),rgba(255,200,90,.55) 55%,#fff3c4);filter:blur(.15rem) drop-shadow(0 0 .6rem rgba(255,180,50,.9))}   /* the light it leaves, behind it along its flight */
.dbwRig:has(.dbwDragon.render){width:13rem;height:18rem}   /* the owner's 3D render is taller than wide */