/* Grid-relative coordinates keep the wave stable while individual cards tilt. */
#roster-grid{position:relative}
#roster-grid .unit-card.roster-water-active{transform:perspective(750px) translateY(var(--water-lift,0px)) rotateX(var(--water-x,0deg)) rotateY(var(--water-y,0deg)) rotateZ(var(--water-z,0deg));transition:border-color .15s ease;will-change:transform;box-shadow:0 8px 22px #0003,0 0 20px rgba(120,221,246,var(--water-light,0));border-color:rgba(130,227,248,calc(.18 + var(--water-light,0)))}
@media(prefers-reduced-motion:reduce){#roster-grid .unit-card,#roster-grid .unit-card:hover{transform:none!important;transition:none!important}}

/* Layered character medallions. Stars and rank reflect actual roster data. */
#roster-grid{gap:18px}
#roster-grid .unit-card{--portrait-accent:#70dcb6;--portrait-dark:#204d45;padding:28px 14px 18px;border:1px solid #83bfd72e;border-radius:18px;background:radial-gradient(ellipse at 50% 18%,#24404d70,transparent 66%),linear-gradient(145deg,#13212d,#0d1622);box-shadow:0 8px 22px #0002;overflow:visible}
#roster-grid .roster-tier-blue{--portrait-accent:#79caff;--portrait-dark:#214d7a}
#roster-grid .roster-tier-purple{--portrait-accent:#c6a0ff;--portrait-dark:#583582}
#roster-grid .roster-tier-gold{--portrait-accent:#ffe193;--portrait-dark:#805b26}
#roster-grid .roster-tier-relic{--portrait-accent:#ffad8d;--portrait-dark:#84382e}
#roster-grid .roster-tier-ship{--portrait-accent:#98dbe9;--portrait-dark:#315360}
#roster-grid .roster-tier-locked{--portrait-accent:#8b9aa9;--portrait-dark:#38424e}
#roster-grid .unit-card-type{top:10px;right:10px;font-size:.55rem;letter-spacing:.12em;background:transparent;color:#9eafbf}
.roster-medallion{width:132px;height:142px;max-width:100%;margin:4px auto 8px;perspective:650px;position:relative}
.roster-medallion-depth{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--portrait-rx,0deg)) rotateY(var(--portrait-ry,0deg));transition:transform .3s ease-out}
#roster-grid .unit-card.roster-portrait-active .roster-medallion-depth{transition:transform .08s linear}
.roster-halo{position:absolute;width:104px;height:104px;left:50%;top:20px;margin-left:-52px;border:1px solid var(--portrait-accent);border-radius:50%;opacity:.32;transform:translateZ(-9px);box-shadow:0 0 0 5px #b2d8f009,0 0 22px var(--portrait-dark)}
#roster-grid .unit-card-portrait{position:absolute;top:26px;left:50%;width:92px;height:92px;margin:0 0 0 -46px;border:4px solid var(--portrait-accent);border-radius:50%;background:radial-gradient(circle at 35% 25%,var(--portrait-dark),#0c1724);box-shadow:0 0 0 2px #0a1420,0 0 0 3px var(--portrait-dark),0 8px 0 -2px var(--portrait-dark),0 14px 18px #0007,inset 0 0 0 2px #08121b;transform:translateZ(8px);overflow:hidden}
#roster-grid .unit-card-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
#roster-grid .unit-card-portrait img[hidden]{display:none}
.roster-initials{font-size:1.35rem;letter-spacing:.04em;font-weight:800;color:#d4e5f5}
#roster-grid .unit-card-portrait::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:50%;background:linear-gradient(125deg,#ffffff28,transparent 43%,#07111d33);box-shadow:inset 0 0 0 2px #ecf5ff25}
.roster-star-arc{position:absolute;left:50%;top:72px;transform:translateZ(22px);transform-style:preserve-3d}
.roster-star{position:absolute;top:-8px;left:-8px;width:16px;height:16px;transform:rotate(var(--star-angle)) translateY(-59px);line-height:16px;font-size:16px;color:#4a586b;text-shadow:0 2px 2px #000}
.roster-star>span{display:block;transform:rotate(calc(-1 * var(--star-angle)))}
.roster-star.earned{color:#ffda7e;text-shadow:0 1px 0 #9b631f,0 3px 3px #000,0 0 10px #ffbf4d35}
.roster-rank{position:absolute;left:50%;top:106px;transform:translateX(-50%) translateZ(26px);padding:5px 10px;min-width:38px;border:1px solid var(--portrait-accent);border-radius:7px;background:linear-gradient(145deg,var(--portrait-dark),#0c1523);box-shadow:0 4px 9px #0009,inset 0 1px #ffffff40;font-size:.75rem;font-weight:800;color:#fff4dc;line-height:1.1}
#roster-grid .unit-card-name{white-space:normal;min-height:2.6em;font-size:.83rem;line-height:1.3;overflow-wrap:anywhere;margin-bottom:10px;color:#e4f1fb}
#roster-grid .unit-badge{border:1px solid #a0c5df1c;background:#08121f80;border-radius:6px;font-size:.67rem}
#roster-grid .unit-badge.relic{color:#ffbb9e}
#roster-grid .locked-unit{opacity:1;background:linear-gradient(145deg,#19212a,#101720)}
#roster-grid .locked-unit .roster-medallion{filter:grayscale(.9);opacity:.65}
@media(max-width:480px){#roster-grid{gap:12px}#roster-grid .unit-card{padding:24px 7px 14px}.roster-medallion{width:118px;height:137px}.roster-star{font-size:14px}.roster-star-arc{transform:translateZ(18px)}}
@media(prefers-reduced-motion:reduce){#roster-grid .roster-medallion-depth{transform:none!important;transition:none!important}}
@media(forced-colors:active){#roster-grid .unit-card,#roster-grid .unit-card-portrait,.roster-rank{border:2px solid CanvasText}.roster-star.earned{color:Highlight}.roster-halo{display:none}}