/* niguro [NPL Predict] (owner, 2026-10-31): the NPL Prediction League — the pick box (__ng_npl_box.tpl), the boards
   (__ng_npl_board.tpl), the league page (cricket.tpl 'predict'), the NPL hub banner and the home card. Niguro tokens
   only; loaded on the cricket pages and the home (_head.tpl). */

/* the league page's wrapper (div.ng-pl): its cards and the tabs keep the page's gap between them */
div.ng-pl { display: flex; flex-direction: column; gap: var(--ck-gap, 12px); min-width: 0; }
div.ng-pl > * { margin: 0; }
.ng-pl-grid { display: grid; gap: 10px; }
@media (min-width: 720px) { .ng-pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ng-pl-grid + .ng-ck-si__h { margin-top: 18px; }

/* the box */
.ng-pl-box { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border-radius: 14px; background: var(--ng-fill); }
.ng-pl-box__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.ng-pl-box__when { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ng-sub); }
.ng-pl-box__stage { margin-inline-end: 4px; color: var(--ng-brand); font-weight: 700; }
.ng-pl-box__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ng-ink-strong); }
.ng-pl-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--ng-card); color: var(--ng-sub); font-size: 11.5px; font-weight: 700; }
.ng-pl-chip .ng-ico { width: 13px; height: 13px; }
.ng-pl-chip.is-open { background: hsl(var(--primary) / .12); color: var(--ng-brand); }
.ng-pl-chip.is-win { background: hsl(142 70% 40% / .14); color: hsl(142 70% 30%); }
.ng-pl-chip.is-loss { background: hsl(var(--foreground) / .07); }
body.night-mode .ng-pl-chip.is-win { color: hsl(142 60% 65%); }

.ng-pl-box__teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 8px; }
.ng-pl-box__vs { align-self: center; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ng-faint); }
.ng-pl-team { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 104px; padding: 12px 8px; border: 2px solid transparent; border-radius: 12px; background: var(--ng-card); color: var(--ng-ink); font: inherit; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.ng-pl-team:not(:disabled):hover { border-color: hsl(var(--primary) / .35); }
.ng-pl-team:not(:disabled):active { transform: scale(.98); }
.ng-pl-team:disabled { cursor: default; }
.ng-pl-team.is-mine { border-color: var(--ng-brand); background: hsl(var(--primary) / .08); }
.ng-pl-team.is-won { box-shadow: inset 0 0 0 2px hsl(142 70% 40% / .5); }
.ng-pl-team__name { max-width: 100%; font-size: 14px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; color: var(--ng-ink-strong); }
.ng-pl-team__score { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ng-sub); }
.ng-pl-team__tick { position: absolute; top: 6px; inset-inline-end: 6px; display: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ng-brand); color: #fff; }
.ng-pl-team__tick .ng-ico { width: 13px; height: 13px; }
.ng-pl-team.is-mine .ng-pl-team__tick { display: grid; }

/* the crowd */
.ng-pl-bar[hidden] { display: none; }
.ng-pl-bar__track { height: 8px; overflow: hidden; border-radius: 999px; background: hsl(var(--foreground) / .12); }
.ng-pl-bar__home { display: block; height: 100%; border-radius: 999px; background: var(--ng-brand); transition: width .4s ease; }
.ng-pl-bar__nums { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ng-ink); }
.ng-pl-bar__total { font-weight: 500; color: var(--ng-sub); }

.ng-pl-box__note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ng-ink); }
.ng-pl-dim { color: var(--ng-sub); }
.ng-pl-box__foot { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ng-pl-box__foot:not(:has(> :not([hidden]))) { display: none; }
.ng-pl-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--ng-brand); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ng-pl-link[hidden] { display: none; }
.ng-pl-link .ng-ico { width: 15px; height: 15px; }

/* my line */
.ng-pl-me__head { display: flex; align-items: center; gap: 12px; }
.ng-pl-me__head b { display: block; font-size: 16px; color: var(--ng-ink-strong); }
.ng-pl-me__head small { display: block; font-size: 13px; color: var(--ng-sub); }
.ng-pl-me__face { flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.ng-pl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 14px 0 0; }
.ng-pl-stats > div { padding: 10px 12px; border-radius: 12px; background: var(--ng-fill); }
.ng-pl-stats dt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ng-sub); }
.ng-pl-stats dd { margin: 2px 0 0; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ng-ink-strong); }
.ng-pl-stats dd small { font-size: 13px; font-weight: 600; color: var(--ng-sub); }
.ng-pl-stats dd .ni { color: hsl(25 95% 52%); }
.ng-pl-campus { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ng-ink); }
.ng-pl-campus > span { display: inline-flex; align-items: center; gap: 6px; }
.ng-pl-campus .ng-ico { width: 17px; height: 17px; color: var(--ng-brand); }
.ng-pl-campus select { flex: 1 1 220px; max-width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--ng-line); border-radius: 10px; background: var(--ng-card); color: var(--ng-ink); font: inherit; }
.ng-pl-me__guest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ng-pl-me__guest p { margin: 0; font-size: 14px; color: var(--ng-ink); }

/* boards */
.ng-pl-boardwrap { margin-top: 12px; transition: opacity .15s; }
.ng-pl-boardwrap.is-loading { opacity: .5; }
.ng-pl-board { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ng-pl-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 12px; }
.ng-pl-row:nth-child(odd) { background: var(--ng-fill); }
.ng-pl-row.is-me { box-shadow: inset 0 0 0 2px hsl(var(--primary) / .5); }
.ng-pl-row__rank { flex: none; width: 26px; font-size: 14px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; color: var(--ng-sub); }
.ng-pl-row.is-top .ng-pl-row__rank { color: var(--ng-brand); }
.ng-pl-row__face { flex: none; display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: var(--ng-tile); color: var(--ng-brand); }
.ng-pl-row__face img { width: 100%; height: 100%; object-fit: cover; }
.ng-pl-row__face .ng-ico { width: 18px; height: 18px; }
.ng-pl-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ng-pl-row__main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--ng-ink-strong); }
.ng-pl-row__main a { color: inherit; }
.ng-pl-row__main small { font-size: 12px; color: var(--ng-sub); }
.ng-pl-row__main small .ni { color: hsl(25 95% 52%); }
.ng-pl-row__pts { flex: none; display: flex; align-items: baseline; gap: 3px; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ng-ink-strong); }
.ng-pl-row__pts small { font-size: 11px; font-weight: 600; color: var(--ng-sub); }
.ng-pl-empty { margin: 0; padding: 18px 14px; border-radius: 12px; background: var(--ng-fill); font-size: 13.5px; text-align: center; color: var(--ng-sub); }
.ng-pl-small { margin: 10px 0 0; font-size: 12px; color: var(--ng-sub); }
.ng-pl-rules { margin: 12px 0 0; padding-inline-start: 20px; font-size: 14px; line-height: 1.6; color: var(--ng-ink); }
.ng-pl-rules li + li { margin-top: 4px; }

/* the NPL hub's banner and the home card */
.ng-pl-banner { display: grid; gap: 14px; background: linear-gradient(hsl(var(--primary) / .07), hsl(var(--primary) / .07)); }
@media (min-width: 720px) { .ng-pl-banner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.ng-pl-banner__txt h2 { margin: 6px 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -.015em; color: var(--ng-ink-strong); }
.ng-pl-banner__txt p { margin: 0 0 12px; font-size: 14px; color: var(--ng-ink); }
.ng-pl-banner__kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ng-brand); }
.ng-pl-banner__kicker .ng-ico { width: 15px; height: 15px; }
.ng-pl-banner .ng-pl-box { background: var(--ng-card); }
.ng-pl-box.is-compact .ng-pl-team { min-height: 88px; }

/* the home card (__ng_home_npl.tpl) sits in the home's card look */
.ng-hnpl .ng-pl-box { background: var(--ng-fill); }
.ng-hnpl .ng-hsp__mark .ng-ico { color: inherit; stroke: currentColor; }