@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes bd-spin{to{--spin:360deg}}@layer nba-board{.board{--gap:clamp(3px, .45vw, 6px);--cols:10;--rows:10;--th:clamp(26px, calc((100dvh - 21rem) / var(--rows)), 48px);--cold:#10151c;--hot:#ff8a3d;--ink:#ffffffeb;background:radial-gradient(120% 70% at 50% -10%,#ff8a3d17,#0000 62%),#070a0e;grid-template-rows:auto auto 1fr auto;gap:clamp(.5rem,1.1vh,.9rem);padding:clamp(.7rem,1.6vh,1.2rem) 0 clamp(.6rem,1.4vh,1rem);display:grid}.board>*{min-width:0}.bd-head{flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;display:flex}.bd-head p{color:#ffffff8c;margin:0;font-size:.88rem;line-height:1.45}.bd-head a{color:#ffffffb8}.bd-rail{flex-wrap:wrap;align-items:center;gap:.3rem;display:flex}.bd-chip{appearance:none;color:#ffffffb3;font:700 .82rem/1 var(--font-mono);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff24;border-radius:999px;padding:.3rem .6rem;transition:background .16s,color .16s,border-color .16s}.bd-chip:hover{color:var(--ink);background:#ffffff17}.bd-chip[aria-pressed=true]{border-color:color-mix(in srgb, var(--hot) 60%, transparent);background:color-mix(in srgb, var(--hot) 20%, transparent);color:#fff}.bd-chip:focus-visible{outline:2px solid var(--hot);outline-offset:2px}.bd-rail-note{color:#ffffff85;margin-left:auto;font-size:.88rem}.bd-rail-note b{color:#ffffffb8;font-weight:600}.bd-grid{height:calc(var(--rows) * var(--th) + (var(--rows) - 1) * var(--gap));contain:layout paint;position:relative}.tile{width:calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));height:var(--th);background:color-mix(in srgb, var(--hot) calc(var(--h,0) * 42%), var(--cold));color:var(--ink);text-align:left;cursor:pointer;transform:translate(calc(var(--c,0) * (100% + var(--gap))), calc(var(--r,0) * (100% + var(--gap))));transition:transform .62s cubic-bezier(.22,.9,.24,1),background .42s,border-color .2s;transition-delay:calc(var(--r,0) * 22ms), calc(var(--r,0) * 22ms), 0s;border:1px solid #ffffff17;border-radius:5px;grid-template-rows:1fr 1fr;grid-template-columns:1fr auto;align-items:center;column-gap:.25rem;padding:0 .34rem;display:grid;position:absolute;top:0;left:0;overflow:hidden}.tile>*{grid-column:1;min-width:0}.t-name{letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis;align-self:end;font-size:clamp(.56rem,.72vw,.72rem);font-weight:650;overflow:hidden}.t-sub{font:500 clamp(.5rem, .62vw, .62rem)/1 var(--font-mono);color:#ffffff70;letter-spacing:.03em;white-space:nowrap;align-self:start}.t-val{font:800 clamp(.72rem, 1.05vw, 1rem)/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;grid-area:1/2/-1}.t-rank{font:700 .5rem/1 var(--font-mono);color:#ffffff42;position:absolute;top:2px;left:3px}.tile[data-top="1"] .t-rank{color:color-mix(in srgb, var(--hot) 75%, white)}.tile:hover,.tile:focus-visible{border-color:color-mix(in srgb, var(--hot) 70%, transparent);z-index:3;outline:none}.tile[aria-pressed=true]{z-index:4;border-color:#fff;box-shadow:inset 0 0 0 1px #fff}.tile[data-unplayed=true]{background-image:repeating-linear-gradient(-45deg,#ffffff0d 0 3px,#0000 3px 7px)}.board[data-metric=ovr] .tile[data-unplayed=true] .t-val{opacity:1}.tile[data-unplayed=true] .t-val{opacity:.35}.tile[data-thin=true] .t-val{color:#ffffff61}.tile[data-thin=true] .t-val:after{content:"*";vertical-align:super;opacity:.8;font-size:.7em}@keyframes bd-rose{0%{box-shadow:inset 0 0 0 1px #7cf03d,0 0 14px #7cf03d73}}@keyframes bd-fell{0%{box-shadow:inset 0 0 0 1px #ff5d5d,0 0 14px #ff5d5d66}}.tile[data-move=up]{animation:.9s ease-out bd-rose}.tile[data-move=down]{animation:.9s ease-out bd-fell}.bd-focus{background:#ffffff08;border:1px solid #ffffff1a;border-radius:8px;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;min-height:3.1rem;padding:.5rem .7rem;display:flex}.bd-focus-name{align-items:center;gap:.55rem;display:flex}.bd-rank{font:800 .9rem/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0;color:#fff;isolation:isolate;box-shadow:0 0 calc(2px + var(--h,0) * 18px) color-mix(in srgb, var(--hot) calc(20% + var(--h,0) * 55%), transparent);background:#0b1016;border-radius:.5rem;flex:none;padding:.3rem .6rem;position:relative}.bd-rank:before{content:"";z-index:-1;border-radius:inherit;background:conic-gradient(from var(--spin,0deg), color-mix(in srgb, var(--hot) calc(30% + var(--h,0) * 70%), transparent), #ffd45e, color-mix(in srgb, var(--hot) calc(30% + var(--h,0) * 70%), transparent), #ffffff14 62%, color-mix(in srgb, var(--hot) calc(30% + var(--h,0) * 70%), transparent));animation:4.5s linear infinite bd-spin;position:absolute;inset:-1.5px}.bd-rank[data-unranked=true]{box-shadow:none;color:#ffffff73}.bd-rank[data-unranked=true]:before{background:#ffffff1f;animation:none}.bd-who{letter-spacing:0;font-size:.95rem;font-weight:700}.bd-who small{font:600 .78rem var(--font-mono);text-transform:uppercase;letter-spacing:.04em;color:#ffffff9e;background:#ffffff12;border-radius:.3rem;margin-left:.4rem;padding:.12rem .36rem}.bd-line{flex-wrap:wrap;gap:.35rem;display:flex}.bd-cell{font:500 .88rem/1.25 var(--font-mono);font-variant-numeric:tabular-nums;background:#ffffff0d;border-radius:4px;align-items:baseline;gap:.28rem;padding:.16rem .4rem;display:flex}.bd-cell i{color:#ffffff73;text-transform:uppercase;letter-spacing:.04em;font-size:.78rem;font-style:normal}.bd-cell b{font-weight:700}.bd-cell[data-active=true]{background:color-mix(in srgb, var(--hot) 22%, transparent)}.bd-hint{color:#fff6;text-align:right;margin-left:auto;font-size:.88rem}@media (width<=1100px){.board{--cols:8;--rows:13}}@media (width<=820px){.board{--cols:6;--rows:17}}@media (width<=560px){.board{--cols:4;--rows:25;--th:clamp(20px, calc((100dvh - 19rem) / var(--rows)), 30px)}.t-sub{display:none}.tile{grid-template-rows:1fr}.t-name{align-self:center}.bd-hint{display:none}}@media (pointer:coarse){.bd-chip{align-items:center;min-height:2.75rem;padding-inline:.85rem;display:inline-flex}}@media (prefers-reduced-motion:reduce){.tile{transition:background .2s}.tile[data-move],.bd-rank:before{animation:none}}}.board .bd-head h1{letter-spacing:-.02em;text-wrap:pretty;font-size:clamp(.98rem,1.9vw,1.45rem);line-height:1.12}
