.character-codex{max-width:1500px;margin:auto;padding:72px clamp(22px,5vw,75px) 78px;border-top:1px solid rgba(140,167,255,.2);position:relative;overflow:hidden}.character-codex:before{content:'';position:absolute;width:520px;height:520px;right:-230px;top:30px;border-radius:50%;background:radial-gradient(circle,rgba(87,232,255,.12),transparent 66%);pointer-events:none}.codex-heading{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:55px;align-items:center}.codex-heading h2{color:var(--cosmic-ink);font-size:clamp(31px,4vw,52px);letter-spacing:-.08em;line-height:1.05;margin:14px 0 16px}.codex-heading h2 em{font-style:normal;color:var(--cosmic-gold);text-shadow:0 0 18px rgba(255,207,98,.35)}.codex-heading p{max-width:560px;color:#8e9bb8;font-size:14px;line-height:1.8;margin:0}.dragonball-radar{height:300px;width:300px;justify-self:end;position:relative;border:1px solid rgba(87,232,255,.25);border-radius:50%;background:radial-gradient(circle at center,rgba(87,232,255,.13),rgba(17,28,64,.72) 43%,rgba(6,12,29,.2) 70%,transparent 71%);box-shadow:0 0 45px rgba(87,232,255,.12),inset 0 0 50px rgba(193,140,255,.14)}.dragonball-radar:before,.dragonball-radar:after{content:'';position:absolute;inset:14%;border:1px solid rgba(87,232,255,.2);border-radius:50%}.dragonball-radar:after{inset:28%;border-color:rgba(255,207,98,.23)}.radar-ring{position:absolute;inset:7%;border:1px dashed rgba(193,140,255,.55);border-radius:50%;animation:radar-spin 15s linear infinite}.radar-ring.ring-b{inset:20%;border-color:rgba(255,118,93,.4);animation-duration:22s;animation-direction:reverse}.radar-scan{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 78%,rgba(87,232,255,.46) 88%,transparent 96%);animation:radar-spin 4.5s linear infinite;mask-image:radial-gradient(circle,transparent 0 45%,#000 47% 100%)}.radar-core{position:absolute;left:50%;top:50%;width:100px;height:100px;transform:translate(-50%,-50%);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle at 35% 30%,#ffc95c,#d66a30 45%,#451b2d 78%);border:1px solid #ffcf62;box-shadow:0 0 32px rgba(255,207,98,.5),inset 0 0 20px rgba(255,245,175,.35);color:#fff4c2}.radar-core span{font-size:10px;letter-spacing:.18em}.radar-core strong{font-size:21px;letter-spacing:.12em;line-height:1.1}.radar-core small{font:9px 'DM Mono';color:#ffeeb0;margin-top:4px}.dragon-orb{position:absolute;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;color:#fff4bd;background:radial-gradient(circle at 33% 28%,#ffe69a,#ef8a35 48%,#92272d 80%);border:1px solid #ffcf62;box-shadow:0 0 17px rgba(255,143,53,.6);font-style:normal;font-size:10px;animation:orb-float 3.2s ease-in-out infinite}.orb-1{left:14%;top:29%;animation-delay:-.2s}.orb-2{left:27%;top:10%;animation-delay:-1.4s}.orb-3{left:59%;top:8%;animation-delay:-2.2s}.orb-4{right:10%;top:36%;animation-delay:-.7s}.orb-5{right:24%;bottom:9%;animation-delay:-2.6s}.orb-6{left:26%;bottom:8%;animation-delay:-1.9s}.orb-7{left:5%;bottom:30%;animation-delay:-.9s}.character-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:11px;margin-top:48px}.character-card{min-height:205px;padding:18px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;position:relative;overflow:hidden;border:1px solid rgba(140,167,255,.25);background:linear-gradient(145deg,rgba(24,39,80,.9),rgba(8,15,35,.92));color:var(--cosmic-ink);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}.character-card:before{content:'';position:absolute;right:-35px;bottom:-46px;width:140px;height:140px;border-radius:50%;border:1px solid rgba(87,232,255,.24);transition:.3s}.character-card:hover{transform:translateY(-7px);border-color:var(--cosmic-cyan);box-shadow:0 17px 35px rgba(3,12,37,.45),0 0 22px rgba(87,232,255,.1)}.character-card:hover:before{transform:scale(1.3);border-color:var(--cosmic-gold)}.character-icon{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(87,232,255,.55);border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,207,98,.8),rgba(255,118,93,.42) 32%,rgba(14,24,55,.8) 71%);color:#fff2bd;font-size:19px;font-weight:800;box-shadow:0 0 15px rgba(255,207,98,.22);margin-bottom:18px}.character-role{font:9px 'DM Mono';color:#8e9bb8;letter-spacing:.08em}.character-card strong{font-size:21px;letter-spacing:-.06em;margin:9px 0 6px}.character-card small{font-size:11px;color:#9eacce;line-height:1.55}.character-card>i{position:absolute;right:17px;top:18px;color:var(--cosmic-gold);font-style:normal;font-size:16px}.char-goku .character-icon{border-color:#57e8ff}.char-bulma .character-icon{background:radial-gradient(circle at 35% 30%,#c7f3ff,#57b7e8 45%,#203a82 76%)}.char-vegeta .character-icon{background:radial-gradient(circle at 35% 30%,#c4a4ff,#7656cf 45%,#1b2058 76%)}.char-piccolo .character-icon{background:radial-gradient(circle at 35% 30%,#cffb9c,#5ebc78 45%,#214c55 76%)}.char-trunks .character-icon{background:radial-gradient(circle at 35% 30%,#b3fbff,#65b5d4 45%,#253e78 76%)}.char-broly .character-icon{background:radial-gradient(circle at 35% 30%,#fff0a6,#e3923c 45%,#5b242e 76%);border-color:#ffcf62}.char-broly{border-color:rgba(255,207,98,.42)}@keyframes radar-spin{to{transform:rotate(360deg)}}@keyframes orb-float{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}@media(max-width:1180px){.character-grid{grid-template-columns:repeat(3,1fr)}.character-card{min-height:190px}}@media(max-width:760px){.character-codex{padding:54px 18px 58px}.codex-heading{grid-template-columns:1fr;gap:30px}.dragonball-radar{width:260px;height:260px;justify-self:center}.character-grid{grid-template-columns:repeat(2,1fr);gap:9px;margin-top:35px}.character-card{min-height:190px;padding:15px}.character-card strong{font-size:19px}.character-card small{font-size:10px}}@media(max-width:430px){.character-grid{grid-template-columns:1fr}.character-card{min-height:160px}.character-card small{font-size:11px}}

/* Dragon Ball radar: seven recognizable orange crystal balls with red stars */
.dragonball-radar{height:300px;width:300px;justify-self:end;position:relative;display:grid;place-items:center;border:0;border-radius:50%;background:radial-gradient(circle,rgba(255,166,52,.08) 0 32%,rgba(87,232,255,.07) 48%,transparent 72%);box-shadow:none;overflow:visible}
.dragonball-radar:before,.dragonball-radar:after{display:none}
.dragonball-aura{position:absolute;inset:13%;border:1px solid rgba(255,190,77,.2);border-radius:50%;box-shadow:0 0 40px rgba(255,144,40,.12),inset 0 0 28px rgba(255,196,86,.07);animation:db-aura-pulse 4.8s ease-in-out infinite}
.dragonball-aura:before,.dragonball-aura:after{content:'';position:absolute;inset:-10%;border:1px solid rgba(255,196,86,.12);border-radius:50%;transform:rotate(24deg) scaleX(.72);animation:db-cloud-drift 10s ease-in-out infinite}
.dragonball-aura:after{inset:-17%;transform:rotate(-32deg) scaleX(.62);animation-delay:-3s}
.dragonball-set{position:relative;width:236px;height:190px;animation:db-set-float 5.2s ease-in-out infinite}
.db-ball{position:absolute;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 29% 21%,#ffe9a4 0 5%,#ffb23e 16%,#ed7a25 45%,#c34720 74%,#77253a 100%);border:1px solid rgba(255,220,136,.9);box-shadow:0 0 13px rgba(255,161,49,.44),inset -8px -9px 12px rgba(113,24,38,.28),inset 6px 6px 12px rgba(255,243,183,.34);overflow:hidden;transition:transform .3s ease,filter .3s ease}
.db-ball:before{content:'';position:absolute;inset:7%;border-radius:50%;border:1px solid rgba(255,244,190,.34)}
.db-ball:after{content:'';position:absolute;left:10px;top:7px;width:18px;height:9px;border-radius:50%;background:rgba(255,255,228,.58);filter:blur(2px);transform:rotate(-22deg)}
.db-ball:hover{transform:translateY(-5px) scale(1.08);filter:brightness(1.08)}
.db-ball span{position:relative;z-index:1;width:43px;color:#ad1f2a;text-align:center;text-shadow:0 1px 0 rgba(255,211,113,.34),0 0 4px rgba(114,13,25,.42);font-style:normal;font-size:11px;line-height:.92;letter-spacing:-1.5px;filter:drop-shadow(0 1px 1px rgba(110,22,23,.25))}
.db-ball-1{left:89px;top:0}.db-ball-2{left:29px;top:34px}.db-ball-3{left:149px;top:34px}.db-ball-4{left:0;top:98px}.db-ball-5{left:59px;top:111px}.db-ball-6{left:119px;top:111px}.db-ball-7{left:178px;top:98px}
.dragonball-caption{position:absolute;bottom:5px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#ffd57c;text-shadow:0 0 14px rgba(255,171,47,.55)}.dragonball-caption b{font-size:15px;letter-spacing:.18em}.dragonball-caption small{font:9px 'DM Mono';letter-spacing:.12em;color:#a9b9d5}
@keyframes db-set-float{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
@keyframes db-aura-pulse{0%,100%{transform:scale(.98);opacity:.74}50%{transform:scale(1.03);opacity:1}}
@keyframes db-cloud-drift{0%,100%{opacity:.4;transform:rotate(24deg) scaleX(.72) translateX(-2px)}50%{opacity:.88;transform:rotate(28deg) scaleX(.72) translateX(7px)}}
@media(max-width:760px){.dragonball-radar{width:260px;height:260px}.dragonball-set{transform:scale(.86)}.dragonball-caption{bottom:0}}