/* The Crystal Balls (rpg/ui-crystal.js): the Bag's Crystal Balls block, the radar window, the Altar of Wishes, the moment
   a ball is found and Shenro's wish. The Bag's own navy tiles (world.css .bag, eggs.css), orange for a ball you hold,
   the radar's green. */
.cballs { display: grid; gap: 6px; margin: 6px 0 8px; }
.cb-slots { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cb-slot { position: relative; display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 52px; padding: 3px 0 2px; border-radius: 8px; background: rgba(3, 10, 44, 0.6); border: 1px dashed #2e3d74; font: inherit; color: #5e6a9c; }
.cb-slot b { font-weight: 400; font-size: 18px; line-height: 32px; height: 32px; }
.cb-slot small { font-size: 8px; letter-spacing: -1px; line-height: 1; color: inherit; white-space: nowrap; overflow: hidden; max-width: 100%; }
.cb-slot.have { border: 1px solid rgba(255, 154, 30, 0.7); color: #ffb34a; cursor: pointer; box-shadow: inset 0 0 12px rgba(255, 154, 30, 0.12); }
.cb-slot.have:hover { border-color: var(--gold); }
.cb-ico { width: 32px; height: 32px; image-rendering: pixelated; }
.cb-world { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.35; }
.cb-world b { color: #ffb34a; font-weight: 400; }
.cb-radar-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 8px; background: rgba(3, 10, 44, 0.6); border: 1px solid rgba(127, 208, 138, 0.55); }
.cb-radar-row > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cb-radar-row b { font-weight: 400; color: #fff; font-size: 16px; line-height: 1.1; }
.cb-radar-row small { color: var(--muted); font-size: 12px; }
.cb-radar-row .ri { image-rendering: pixelated; }

/* The windows. */
.cb-book { text-align: center; }
.cb-book h2 .cb-ico, .cb-book h2 .ri { vertical-align: middle; width: 40px; height: 40px; image-rendering: pixelated; }
.cb-stars { margin: -4px 0 6px; color: #d21e1a; font-size: 18px; letter-spacing: 2px; text-shadow: 0 0 6px rgba(255, 154, 30, 0.55); }
.cb-stars.big { font-size: 26px; }
.cb-near { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cb-radar .cb-face { display: block; margin: 4px auto 6px; width: 320px; max-width: 100%; height: auto; aspect-ratio: 160 / 170; image-rendering: pixelated; cursor: zoom-in; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)); }
.cb-radar-txt { margin: 0 0 6px; font-size: 14px; color: #c9d4ff; min-height: 2.6em; }
.cb-radar-txt b { color: #7fd08a; font-weight: 400; }
.cb-way { color: var(--gold); }
.cb-altar .cb-cups { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
.cb-cup { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px dashed #5e6a9c; color: #5e6a9c; font-size: 6px; letter-spacing: -1px; }
.cb-ico.on { filter: drop-shadow(0 0 6px rgba(255, 170, 40, 0.9)); }
.cb-wall ol { margin: 0; padding: 0 0 0 1.4em; text-align: left; display: grid; gap: 2px; }
.cb-wall b { color: var(--gold); font-weight: 400; }
.cb-wall small { color: var(--muted); }
.cb-found .cb-burst { display: grid; place-items: center; margin: 4px auto 2px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 190, 70, 0.55) 0%, rgba(255, 150, 40, 0.18) 45%, rgba(255, 150, 40, 0) 70%); animation: cb-glow 1.8s ease-in-out infinite; }
.cb-found .cb-ico.big { width: 96px; height: 96px; animation: cb-pop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes cb-pop { from { scale: 0.2; rotate: -40deg; opacity: 0; } to { scale: 1; rotate: 0deg; opacity: 1; } }
@keyframes cb-glow { 50% { box-shadow: 0 0 34px rgba(255, 170, 40, 0.55); } }
.cb-wish { background: radial-gradient(ellipse at 50% 35%, rgba(60, 200, 110, 0.22), rgba(0, 0, 0, 0) 65%); border-radius: 12px; }
.cb-wish .cb-shenro { display: block; margin: 0 auto 6px; width: 440px; max-width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 0 18px rgba(120, 255, 150, 0.45)); animation: cb-float 4s ease-in-out infinite; }
.cb-wish h2 { color: #ff6a4a; letter-spacing: 1px; text-shadow: 0 0 10px rgba(255, 60, 40, 0.6); }
@keyframes cb-float { 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .cb-found .cb-burst, .cb-found .cb-ico.big, .cb-wish .cb-shenro { animation: none; } }
.cb-ico.mini { width: 16px; height: 16px; vertical-align: -2px; }
.cb-parts span { display: inline-block; opacity: 0.3; filter: grayscale(1); }
.cb-parts span.have { opacity: 1; filter: none; }
.cb-parts .ri { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; }