body { overflow: hidden; background: radial-gradient(circle at 88% 15%, rgba(93, 94, 214, .22), transparent 30rem), var(--bg-0); font-size: clamp(15px, 1.04vw, 20px); }
body::before { background: #252e82; animation: ambient-drift 20s ease-in-out infinite alternate; }
body::after { background: #512178; animation: ambient-drift 25s ease-in-out infinite alternate-reverse; }
.dashboard-shell { height: 100vh; padding: clamp(18px, 2vw, 34px); display: flex; flex-direction: column; }
.dashboard-header { display: flex; align-items: center; gap: 9px; min-height: 14px; margin: 0 0 clamp(10px, 1vw, 16px); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(145, 223, 194, .11), 0 0 18px rgba(145, 223, 194, .4); }
#status { min-height: 1em; margin: 0; color: var(--text-faint); font-size: .68em; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
#status:empty { visibility: hidden; }
#teams { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: clamp(11px, 1vw, 18px); }
.team { position: relative; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(51, 52, 104, .64), rgba(17, 20, 52, .78)); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .09); backdrop-filter: blur(24px); animation: card-float 12s ease-in-out infinite alternate; }
.team::before { position: absolute; top: -52%; right: -24%; width: 75%; aspect-ratio: 1; content: ""; border-radius: 50%; background: radial-gradient(circle, rgba(175, 139, 255, .18), transparent 67%); pointer-events: none; }
.team:nth-child(2n) { animation-delay: -4s; }
.team:nth-child(3n) { animation-delay: -8s; }
.team-header { position: relative; min-height: clamp(96px, 8.6vw, 140px); display: flex; align-items: center; gap: clamp(13px, 1.25vw, 22px); padding: clamp(13px, 1.3vw, 22px); border-bottom: 1px solid rgba(217, 220, 255, .1); background: linear-gradient(90deg, rgba(180, 161, 255, .12), transparent 70%); }
.avatar-frame { width: clamp(64px, 6.4vw, 108px); height: clamp(64px, 6.4vw, 108px); flex: 0 0 auto; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(235, 229, 255, .28); border-radius: 27% 30% 25% 32%; background: radial-gradient(circle at 50% 24%, #8279db, #2b2a58 69%); box-shadow: 0 16px 34px rgba(5, 5, 28, .33), inset 0 0 0 5px rgba(255,255,255,.055); animation: portrait-drift 8s ease-in-out infinite; }
.avatar { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.avatar-empty { padding: 12px; color: #e2ddff; font-size: .68em; font-weight: 700; line-height: 1.15; text-align: center; }
.team h2 { max-width: 76%; margin: 0; color: #fff; font-size: clamp(22px, 1.9vw, 35px); font-weight: 700; letter-spacing: -.055em; line-height: 1.01; overflow-wrap: anywhere; }
.players { position: relative; min-height: 0; margin: 0; padding: clamp(8px, .75vw, 13px) clamp(14px, 1.25vw, 22px) clamp(12px, 1.1vw, 20px); overflow: auto; list-style: none; scrollbar-width: thin; scrollbar-color: rgba(184, 170, 255, .55) transparent; }
.player { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: clamp(10px, .9vw, 16px); align-items: center; min-height: clamp(39px, 3.3vw, 55px); padding: 7px 0; border-bottom: 1px solid rgba(219, 223, 255, .09); }
.player:last-child { border-bottom: 0; }
.player-name { min-width: 0; overflow: hidden; color: var(--text); font-size: clamp(15px, 1.17vw, 22px); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.role { min-width: 2.1em; padding: .27em .48em; border: 1px solid rgba(194, 186, 255, .19); border-radius: 8px; color: #ded8ff; background: rgba(150, 135, 255, .17); font-size: .77em; font-weight: 700; text-align: center; }
.price { min-width: 2.2em; color: #bdf2d8; font-size: clamp(16px, 1.25vw, 23px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; text-align: right; }
.player-updated { animation: player-arrive 760ms cubic-bezier(.2, .8, .2, 1) both; }
.team-enter { animation: team-arrive 760ms cubic-bezier(.2, .8, .2, 1) both, card-float 12s ease-in-out 800ms infinite alternate; }
.empty { place-self: center; padding: 1.2em 1.6em; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-muted); background: var(--surface); box-shadow: var(--glow); backdrop-filter: blur(20px); text-align: center; }
#teams[data-layout="large"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#teams[data-layout="medium"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#teams[data-layout="compact"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#teams[data-layout="dense"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@keyframes ambient-drift { to { transform: translate3d(5vw, 3vw, 0) scale(1.08); } }
@keyframes portrait-drift { 50% { transform: translateY(-3px) rotate(.4deg); } }
@keyframes card-float { 50% { transform: translateY(-3px); box-shadow: 0 29px 78px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1); } }
@keyframes player-arrive { from { opacity: 0; transform: translateX(-14px); background: rgba(179, 155, 255, .22); } to { opacity: 1; transform: none; background: transparent; } }
@keyframes team-arrive { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) { #teams[data-layout] { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); } }
@media (max-width: 900px) { body { overflow: auto; } .dashboard-shell { height: auto; min-height: 100vh; } #teams { flex: none; grid-auto-rows: minmax(260px, auto); } .team { min-height: 260px; } }