/* NotesNepal games: shared styles in the site's colours (navy, blue, red, gold). */
.nng { --g-navy: #0e2a47; --g-gold: #f5c542; --g-blue: var(--blue, #1f63b0); --g-red: var(--red, #c62f3a); --g-line: var(--line, #e0e5ec);
	max-width: 640px; margin: 20px auto; padding: 18px; border-radius: 18px; background: var(--bg, #fff); border: 1px solid var(--g-line); color: var(--ink, #1c2430); font-family: var(--font-body, system-ui, sans-serif); }
.nng * { box-sizing: border-box; }
.nng button { font: inherit; cursor: pointer; }
.nng-head { text-align: center; }
.nng-head h1 { margin: 8px 0 6px; font: 800 1.6rem/1.2 var(--font-head, inherit); }
.nng-head p { margin: 0 0 14px; color: var(--muted, #5f6b7a); }
.nng-badge { display: inline-block; padding: 5px 9px; border-radius: 6px; background: var(--g-navy); color: var(--g-gold); font: 800 .7rem/1 var(--font-head, inherit); letter-spacing: .12em; }
.nng-teams { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.nng-teams button { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--g-line); background: var(--bg, #fff); color: inherit; font-weight: 700; text-align: left; }
.nng-teams button:hover { border-color: var(--c); }
.nng-teams b, .nng-chip { display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 6px; border-radius: 7px; background: var(--c); color: #fff; font: 800 .72rem/1 var(--font-head, inherit); }
.nng-score, .nng-final { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 16px; border-radius: 14px; background: var(--g-navy); color: #fff; text-align: center; }
.nng-score strong, .nng-final strong { font: 900 2.4rem/1 var(--font-head, inherit); }
.nng-score small { width: 100%; color: rgba(255, 255, 255, .7); }
.nng-final { flex-direction: column; }
.nng-final p { margin: 0; font-weight: 800; color: var(--g-gold); }
.nng-balls { display: flex; justify-content: center; gap: 6px; margin: 12px 0; }
.nng-balls i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px dashed var(--g-line); font: 800 .85rem/1 var(--font-head, inherit); font-style: normal; }
.nng-balls i.b6 { background: var(--g-gold); color: var(--g-navy); border: 0; } .nng-balls i.b4 { background: var(--g-blue); color: #fff; border: 0; }
.nng-balls i.bW { background: var(--g-red); color: #fff; border: 0; } .nng-balls i.b0, .nng-balls i.b1, .nng-balls i.b2 { background: var(--soft, #eef2f7); border: 0; }
.nng-msg { min-height: 30px; text-align: center; font: 900 1.3rem/1.3 var(--font-head, inherit); }
.nng-msg .m6 { color: #b7791f; } .nng-msg .m4 { color: var(--g-blue); } .nng-msg .mW { color: var(--g-red); }
.nng-pitch { position: relative; height: 64px; margin: 10px 0 14px; border-radius: 14px; overflow: hidden; background: #2f7d4f; cursor: pointer; touch-action: manipulation; }
/* Widths mirror shot() in super-over.js: W 16 · dot 8 · 1 9 · 2 7 · 4 6 · 6 8 (mirrored). */
.nng-zones { display: grid; grid-template-columns: 16fr 8fr 9fr 7fr 6fr 8fr 6fr 7fr 9fr 8fr 16fr; height: 100%; }
.nng-zones i { opacity: .55; } .nng-zones .zw { background: #7f1d1d; } .nng-zones .z0 { background: #374151; } .nng-zones .z1 { background: #3f6212; } .nng-zones .z2 { background: #4d7c0f; }
.nng-zones .z4 { background: #1f63b0; } .nng-zones .z6 { background: var(--g-gold); opacity: .9; }
.nng-ball { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); font-size: 30px; pointer-events: none; }
.nng-hit { width: 100%; padding: 14px; border: 0; border-radius: 12px; background: var(--g-red); color: #fff; font-weight: 800 !important; font-size: 1.05rem; }
.nng-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.nng-actions .nng-hit { background: var(--g-gold); color: var(--g-navy); }
.nng-actions button { flex: 1 1 140px; }
.nng-sec { padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; font-weight: 700; }
.nng-board { margin-top: 16px; }
.nng-board h2 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; font: 800 1rem/1.3 var(--font-head, inherit); }
.nng-board h2 small, .nng-board p small { font: 600 .72rem/1 var(--font-body, inherit); color: var(--muted, #5f6b7a); }
.nng-board p { display: grid; grid-template-columns: 18px auto 1fr 36px 28px; align-items: center; gap: 8px; margin: 6px 0; font-size: .85rem; }
.nng-bar { height: 8px; border-radius: 4px; background: var(--soft, #eef2f7); overflow: hidden; } .nng-bar i { display: block; height: 100%; }
.nng-board em { display: block; margin-top: 8px; font-size: .8rem; color: var(--muted, #5f6b7a); }
/* शब्दले */
.nng-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; font-size: .78rem; }
.nng-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 3px; vertical-align: -2px; }
.nng-grid { display: grid; gap: 8px; justify-content: center; margin: 14px 0 6px; }
.nng-wrow { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; }
.nng-wrow i { display: grid; place-items: center; height: 64px; border-radius: 12px; border: 2px solid var(--g-line); font: 700 1.7rem/1 "Noto Sans Devanagari", var(--font-body, sans-serif); font-style: normal; }
.wg, .nng-wrow i.wg { background: #15803d; border-color: #15803d; color: #fff; }
.wy, .nng-wrow i.wy { background: #ca8a04; border-color: #ca8a04; color: #fff; }
.wo, .nng-wrow i.wo { background: #ea580c; border-color: #ea580c; color: #fff; }
.nng-wrow i.wx { background: #64748b; border-color: #64748b; color: #fff; }
.nng-guess { display: flex; gap: 8px; }
.nng-guess input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--g-line); background: var(--bg, #fff); color: inherit; font: 600 1.15rem/1.2 "Noto Sans Devanagari", var(--font-body, sans-serif); }
.nng-guess .nng-hit { width: auto; padding: 12px 20px; }
.nng-tip { margin: 8px 0 0; font-size: .8rem; color: var(--muted, #5f6b7a); text-align: center; }
.nng-tip b { color: var(--g-blue); font-size: 1rem; }
.nng-final--w strong { font-family: "Noto Sans Devanagari", var(--font-head, inherit); }

/* NPL Word Search */
.nng-wsbar { display: flex; justify-content: space-between; margin: 12px 0 8px; font-weight: 800; }
.nng-ws { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; touch-action: none; user-select: none; -webkit-user-select: none; }
.nng-ws i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; background: var(--soft, #f3f5f8); font: 800 clamp(.8rem, 3.2vw, 1.05rem)/1 var(--font-head, inherit); font-style: normal; cursor: pointer; }
.nng-ws i.is-sel { background: var(--g-gold); color: var(--g-navy); }
.nng-ws i.is-found0 { background: #1f63b0; color: #fff; } .nng-ws i.is-found1 { background: #15803d; color: #fff; }
.nng-ws i.is-found2 { background: #c62f3a; color: #fff; } .nng-ws i.is-found3 { background: #7c3aed; color: #fff; } .nng-ws i.is-found4 { background: #b45309; color: #fff; }
.nng-wslist { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; }
.nng-wslist li { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--g-line); font: 700 .78rem/1 var(--font-head, inherit); letter-spacing: .04em; }
.nng-wslist li.is-found { text-decoration: line-through; opacity: .5; }
.nng-actions--plain { margin-top: 12px; }
.nng-sec2 { padding: 10px 16px; border-radius: 12px; border: 1px solid var(--g-line); background: var(--bg, #fff); color: inherit; font-weight: 700; }
.nng [data-done] .nng-final { margin-top: 14px; }

[data-theme="dark"] .nng { --g-line: #243246; background: #111a26; }

/* ---------- NPL-section look for every game ---------- */
.nng { padding: 0 0 18px; overflow: hidden; }
.nng > *:not(.nng-head) { margin-left: 18px; margin-right: 18px; }
.nng-head {
	margin: 0 0 16px; padding: 18px 18px 16px; color: #fff;
	background: radial-gradient(80% 140% at 100% 0%, rgba(31, 99, 176, .35), transparent 60%), radial-gradient(60% 120% at 0% 100%, rgba(198, 47, 58, .22), transparent 60%), var(--g-navy);
	border-bottom: 3px solid var(--g-gold);
}
.nng-head h1 { color: #fff; }
.nng-head p { color: rgba(255, 255, 255, .78); }
.nng-head .nng-badge { background: #fff; color: var(--g-red); }
.nng-head .nng-legend { color: rgba(255, 255, 255, .85); }
.nng-teams button, .nng-pcard, .nng-wslist li { border-color: var(--g-line); }

/* More games strip */
.nng-more { max-width: 640px; margin: -6px auto 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nng-more b { width: 100%; font: 800 .85rem/1 var(--font-head, inherit); }
.nng-more a { flex: 1 1 140px; padding: 10px 12px; border-radius: 12px; background: var(--g-navy, #0e2a47); color: #fff; font: 700 .85rem/1.2 var(--font-body, inherit); text-decoration: none; border-bottom: 3px solid #f5c542; }

/* Score Predictor */
.nng-h2 { margin: 18px 0 8px; font: 800 1rem/1.3 var(--font-head, inherit); }
.nng-pcard { margin-bottom: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--g-line); }
.nng-pcard__h { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: .82rem; }
.nng-pcard__h span { color: var(--muted, #5f6b7a); }
.nng-pw { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nng-pw button { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; border: 2px solid var(--g-line); background: var(--bg, #fff); color: inherit; font-weight: 700; text-align: left; font-size: .85rem; }
.nng-pw button.is-on { border-color: var(--c); box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .04); }
.nng-pq { margin: 10px 0 6px; font-size: .78rem; font-weight: 700; color: var(--muted, #5f6b7a); }
.nng-pb { display: flex; flex-wrap: wrap; gap: 6px; }
.nng-pb button { flex: 1 1 70px; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--g-line); background: var(--soft, #f3f5f8); color: inherit; font-weight: 700; font-size: .8rem; }
.nng-pb button.is-on { background: var(--g-navy); border-color: var(--g-navy); color: #fff; }
.nng-pstat { min-height: 18px; margin-top: 8px; font-size: .78rem; font-weight: 700; color: #15803d; }
.nng-past, .nng-top { list-style: none; margin: 0; padding: 0; }
.nng-past li, .nng-top li { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--g-line); font-size: .85rem; }
.nng-past li span, .nng-top li span { flex: 1; } .nng-past li b, .nng-top li b { font-weight: 800; } .nng-past li b.ok { color: #15803d; }
.nng-top { counter-reset: r; } .nng-top li::before { counter-increment: r; content: counter(r); width: 22px; font-weight: 800; color: var(--muted, #5f6b7a); }
.nng-top li small { color: var(--muted, #5f6b7a); } .nng-top li.is-me { background: rgba(245, 197, 66, .15); }