.ncc-toplist{margin:-26px 0 0;position:relative;z-index:2}

.ncc-brand{position:relative;display:grid;grid-template-columns:48px 132px minmax(0,1fr) auto;gap:18px;align-items:center;background:var(--ncc-field);border-radius:4px;padding:14px 18px 14px 0;margin-block-end:10px;box-shadow:0 1px 0 var(--ncc-rule),0 8px 22px -18px rgba(23,34,46,.7);transition:background .16s ease}
.ncc-brand[hidden]{display:none}
.ncc-brand:hover{background:var(--ncc-paper)}
.ncc-brand::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:6px;background:var(--ncc-rule);border-radius:4px 0 0 4px}
.ncc-brand:nth-child(1)::before{background:var(--ncc-felt)}
.ncc-brand:nth-child(2)::before{background:var(--ncc-ink)}
.ncc-brand:nth-child(3)::before{background:var(--ncc-seal)}
.ncc-brand:nth-child(n+11){content-visibility:auto;contain-intrinsic-size:auto 88px}

.ncc-rank{justify-self:center;font-size:18px;font-weight:500;color:var(--ncc-mute);font-variant-numeric:tabular-nums;padding-inline-start:6px}
.ncc-brand:nth-child(-n+3) .ncc-rank{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:15px;font-weight:600;color:#fff;background:var(--ncc-ink);padding:0;margin-inline-start:6px}
.ncc-brand:nth-child(1) .ncc-rank{background:var(--ncc-felt)}
.ncc-brand:nth-child(3) .ncc-rank{background:var(--ncc-seal)}

.ncc-plate{display:grid;place-items:center;background:var(--ncc-paper);border-radius:3px;padding:6px;aspect-ratio:1;position:relative}
.ncc-plate::after{content:"";position:absolute;inset:3px;box-shadow:inset 0 0 0 1px var(--ncc-rule-soft);border-radius:2px;pointer-events:none}
.ncc-plate img{display:block;width:100%;height:auto;max-width:200px}

.ncc-brand-name{display:block;font-size:21px;font-weight:600;line-height:1.2;margin-block-end:4px;overflow-wrap:anywhere}
.ncc-brand-name a{color:var(--ncc-text);text-decoration:none}
.ncc-brand-name a:hover{text-decoration:underline}
.ncc-brand-bonus{display:block;font-size:15.5px;line-height:1.45;color:var(--ncc-mute);overflow-wrap:anywhere}
.ncc-brand-bonus b{color:var(--ncc-text);font-weight:600}

.ncc-brand .ncc-go{display:inline-block;white-space:nowrap;background:var(--ncc-felt);color:#fff;text-decoration:none;font-size:15.5px;font-weight:600;letter-spacing:.01em;padding:11px 24px;border-radius:3px;transition:background .18s ease,transform .18s ease}
.ncc-brand .ncc-go:hover{background:var(--ncc-felt-lit);transform:translateY(-1px)}

.ncc-brand:nth-child(n+4){grid-template-columns:48px 96px minmax(0,1fr) auto;gap:14px;padding-block:10px}
.ncc-brand:nth-child(n+4) .ncc-brand-name{font-size:19px}
.ncc-brand:nth-child(n+4) .ncc-brand-bonus{font-size:15px}
.ncc-brand:nth-child(n+4) .ncc-go{padding:9px 20px;font-size:15px}

.ncc-more{display:none;justify-content:center;margin:2px 0 0}
.ncc-toplist[data-ncc-more] .ncc-more{display:flex}
.ncc-morebtn{font-size:15.5px;font-weight:600;color:var(--ncc-felt);background:var(--ncc-field);border:0;cursor:pointer;padding:13px 30px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--ncc-rule);transition:background .18s ease,color .18s ease}
.ncc-morebtn:hover{background:var(--ncc-felt);color:#fff}
.ncc-morebtn:focus-visible{outline:2px solid var(--ncc-felt-lit);outline-offset:2px}

.ncc-legal{font-size:13px;color:var(--ncc-mute);margin:12px 0 0}

@media (max-width:820px){
.ncc-toplist{margin-block-start:-18px}
.ncc-brand{grid-template-columns:38px 86px minmax(0,1fr);gap:12px;padding:12px 14px 14px 0}
.ncc-brand:nth-child(n+4){grid-template-columns:38px 70px minmax(0,1fr);gap:10px;padding-block:10px 12px}
.ncc-brand:nth-child(-n+3) .ncc-rank{width:26px;height:26px;font-size:14px;margin-inline-start:4px}
.ncc-brand .ncc-go{grid-column:1/-1;justify-self:stretch;text-align:center;margin-inline-start:14px}
.ncc-brand-name,.ncc-brand:nth-child(n+4) .ncc-brand-name{font-size:18px}
.ncc-brand-bonus,.ncc-brand:nth-child(n+4) .ncc-brand-bonus{font-size:14.5px}
.ncc-morebtn{width:100%;padding-inline:16px}
}
@media (prefers-reduced-motion:reduce){
.ncc-brand,.ncc-brand .ncc-go,.ncc-morebtn{transition:none}
}

/* Brand table from the panel slot, drawn as .ncc-brand rows.
   Markup: <table><caption/><tbody><tr><td>[img] name</td><td>bonus</td>[<td><a>Play Now</a></td>]</tr></tbody></table>.
   Search engines get the same table without logo, links and button. */
.ncc-toplist table{display:block;width:100%;border-collapse:separate;border-spacing:0}
.ncc-toplist caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.ncc-toplist tbody{display:block;counter-reset:ncc-r}
.ncc-toplist td{padding:0;border:0}
.ncc-toplist tr{position:relative;counter-increment:ncc-r;display:grid;grid-template-columns:48px 132px minmax(0,1fr) auto;grid-template-areas:"rank logo name play" "rank logo bonus play";gap:0 18px;align-items:center;background:var(--ncc-field);border-radius:4px;padding:14px 18px 14px 0;margin-block-end:10px;box-shadow:0 1px 0 var(--ncc-rule),0 8px 22px -18px rgba(23,34,46,.7);transition:background .16s ease}
.ncc-toplist tr:not(:has(img,a)){grid-template-columns:48px minmax(0,1fr);grid-template-areas:"rank name" "rank bonus"}
.ncc-toplist tr[hidden]{display:none}
.ncc-toplist tr:hover{background:var(--ncc-paper)}
.ncc-toplist tr::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:6px;background:var(--ncc-rule);border-radius:4px 0 0 4px}
.ncc-toplist tr:nth-child(1)::after{background:var(--ncc-felt)}
.ncc-toplist tr:nth-child(2)::after{background:var(--ncc-ink)}
.ncc-toplist tr:nth-child(3)::after{background:var(--ncc-seal)}
.ncc-toplist tr:nth-child(n+11){content-visibility:auto;contain-intrinsic-size:auto 88px}

.ncc-toplist tr::before{content:counter(ncc-r);grid-area:rank;justify-self:center;font-family:"IBM Plex Mono",monospace;font-size:18px;font-weight:500;color:var(--ncc-mute);font-variant-numeric:tabular-nums;padding-inline-start:6px}
.ncc-toplist tr:nth-child(-n+3)::before{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:15px;font-weight:600;color:#fff;background:var(--ncc-ink);padding:0;margin-inline-start:6px}
.ncc-toplist tr:nth-child(1)::before{background:var(--ncc-felt)}
.ncc-toplist tr:nth-child(3)::before{background:var(--ncc-seal)}

.ncc-toplist td:first-child:has(a,img){display:contents}
.ncc-toplist td:first-child img{grid-area:logo;display:block;width:132px;height:auto;aspect-ratio:1;object-fit:contain;background:var(--ncc-paper);border-radius:3px;padding:6px;outline:1px solid var(--ncc-rule-soft);outline-offset:-4px}
.ncc-toplist td:first-child:has(a):not(:has(img))::before{content:"";grid-area:logo;width:132px;aspect-ratio:1;background:var(--ncc-paper);border-radius:3px}
.ncc-toplist td:first-child a,.ncc-toplist td:first-child:not(:has(a,img)){grid-area:name;align-self:end;display:block;font-family:Newsreader,Georgia,serif;font-size:21px;font-weight:600;line-height:1.2;margin-block-end:4px;overflow-wrap:anywhere;color:var(--ncc-text);text-decoration:none}
.ncc-toplist td:first-child a:hover{text-decoration:underline}
.ncc-toplist td:nth-child(2){grid-area:bonus;align-self:start;font-size:15.5px;line-height:1.45;color:var(--ncc-mute);overflow-wrap:anywhere}
.ncc-toplist td:nth-child(3){grid-area:play}
.ncc-toplist td:nth-child(3) a{display:inline-block;white-space:nowrap;background:var(--ncc-felt);color:#fff;text-decoration:none;font-size:15.5px;font-weight:600;letter-spacing:.01em;padding:11px 24px;border-radius:3px;transition:background .18s ease,transform .18s ease}
.ncc-toplist td:nth-child(3) a:hover{background:var(--ncc-felt-lit);transform:translateY(-1px)}

.ncc-toplist tr:nth-child(n+4){grid-template-columns:48px 96px minmax(0,1fr) auto;gap:0 14px;padding-block:10px}
.ncc-toplist tr:nth-child(n+4):not(:has(img,a)){grid-template-columns:48px minmax(0,1fr)}
.ncc-toplist tr:nth-child(n+4) td:first-child img,.ncc-toplist tr:nth-child(n+4) td:first-child:has(a):not(:has(img))::before{width:96px}
.ncc-toplist tr:nth-child(n+4) td:first-child a,.ncc-toplist tr:nth-child(n+4) td:first-child:not(:has(a,img)){font-size:19px}
.ncc-toplist tr:nth-child(n+4) td:nth-child(2){font-size:15px}
.ncc-toplist tr:nth-child(n+4) td:nth-child(3) a{padding:9px 20px;font-size:15px}

@media (max-width:820px){
.ncc-toplist tr{grid-template-columns:38px 86px minmax(0,1fr);grid-template-areas:"rank logo name" "rank logo bonus" "play play play";gap:0 12px;padding:12px 14px 14px 0}
.ncc-toplist tr:nth-child(n+4){grid-template-columns:38px 70px minmax(0,1fr);gap:0 10px;padding-block:10px 12px}
.ncc-toplist tr:not(:has(img,a)),.ncc-toplist tr:nth-child(n+4):not(:has(img,a)){grid-template-columns:38px minmax(0,1fr);grid-template-areas:"rank name" "rank bonus"}
.ncc-toplist tr:nth-child(-n+3)::before{width:26px;height:26px;font-size:14px;margin-inline-start:4px}
.ncc-toplist td:first-child img,.ncc-toplist td:first-child:has(a):not(:has(img))::before{width:86px}
.ncc-toplist tr:nth-child(n+4) td:first-child img,.ncc-toplist tr:nth-child(n+4) td:first-child:has(a):not(:has(img))::before{width:70px}
.ncc-toplist td:nth-child(3){justify-self:stretch;margin:12px 0 0 14px}
.ncc-toplist td:nth-child(3) a{display:block;text-align:center}
.ncc-toplist td:first-child a,.ncc-toplist tr:nth-child(n+4) td:first-child a,.ncc-toplist td:first-child:not(:has(a,img)){font-size:18px}
.ncc-toplist td:nth-child(2),.ncc-toplist tr:nth-child(n+4) td:nth-child(2){font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){.ncc-toplist tr,.ncc-toplist td:nth-child(3) a{transition:none}}
/* Registry logos are made for a light plate: in the dark scheme the plate stays light, or dark wordmarks vanish. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ncc-toplist td:first-child img{background:#eef0ee}}
:root[data-theme="dark"] .ncc-toplist td:first-child img{background:#eef0ee}