/* Brain Grain — TNPSC Arena * =========================================================================== * ONE stadium, not a theme sprinkled on a brochure. * * Before this file the arena existed on exactly one page (/tnpsc-live-challenge). * Every other TNPSC surface — the hub, the three group pages, the 80 topic * pages — was a light-blue document with a dark widget bolted into it, so a * learner who walked in from the event landed somewhere that did not look like * the place they came from. This is the shared skin: the same floor, the same * gold, the same ranks and tables, from the front door down to the smallest * topic page. * * Everything is prefixed `ar-` so it can drop onto a page that already has its * own classes without a collision. `.ar-body` on turns the stadium * lights on; no other rule assumes it, so a page can adopt components alone. * * Palette is the live-challenge palette, promoted to variables. Do not fork it. */ :root { --ar-bg: #07070f; --ar-bg2: #0e0b1d; --ar-panel: #141127; --ar-panel2: #0d0b1c; --ar-line: #2a2145; --ar-gold: #ffb703; --ar-gold2: #ff7a18; --ar-cyan: #22d3ee; --ar-pink: #ff2e88; --ar-green: #22c55e; --ar-red: #ef4444; --ar-ink: #f4f1ff; --ar-mut: #9d95c4; --ar-head: Nunito, "Segoe UI", system-ui, sans-serif; --ar-text: Inter, "Noto Sans Tamil", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; } /* The reset. Not optional: without it a shared widget that sets its own width (the daily-streak card does) blows 18px past the viewport and trips the layout-overflow gate. */ .ar-body *, .ar-body *::before, .ar-body *::after { box-sizing: border-box; } /* ── the floor ────────────────────────────────────────────────────────────── Fixed radial lights + a faint grid, masked so it fades at the top and bottom instead of tiling forever. Cheap: two painted layers, no images. */ .ar-body { margin: 0; color: var(--ar-ink); background: var(--ar-bg); font-family: var(--ar-text); font-size: 15px; line-height: 1.65; -webkit-text-size-adjust: 100%; overflow-x: clip; background-image: radial-gradient(120% 60% at 50% -10%, rgba(255, 183, 3, .18), transparent 60%), radial-gradient(90% 50% at 10% 20%, rgba(255, 46, 136, .14), transparent 60%), radial-gradient(90% 50% at 95% 35%, rgba(34, 211, 238, .12), transparent 60%); background-attachment: fixed; } .ar-body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .32; background-image: linear-gradient(rgba(124, 58, 237, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 58, 237, .10) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 72%, transparent); mask-image: linear-gradient(180deg, transparent, #000 35%, #000 72%, transparent); } .ar-body > * { position: relative; z-index: 1; } /* A stadium floor for ONE SECTION of a page that is not otherwise an arena. The group pages are light documents with a dark game pane in them; the career components (`#arCareer`, `#arStandings`, …) are dark cards and need a dark floor under them, but giving the whole one is what produced the override war that broke those pages. This is that floor, scoped. */ .ar-zone { background: var(--ar-bg); color: var(--ar-ink); border-top: 1px solid var(--ar-line); border-bottom: 1px solid var(--ar-line); padding: 18px 0 22px; margin: 22px 0; } .ar-zone *, .ar-zone *::before, .ar-zone *::after { box-sizing: border-box; } .ar-zone a { color: var(--ar-gold); } .ar-zone > h3, .ar-zone > h2 { color: var(--ar-ink); } .ar-body a { color: var(--ar-gold); text-decoration: none; } .ar-wrap { max-width: 900px; margin: 0 auto; padding: 0 14px 48px; } .ar-wrap.narrow { max-width: 760px; } /* ── the top bar ──────────────────────────────────────────────────────────── Replaces the white nav. Carries the one thing a player always wants in sight: their own points. */ .ar-bar { position: sticky; top: 0; z-index: 30; /* wrap, because this bar does not control everything inside it: live-event-badge.js injects a 221px card in here at runtime, which at 390px pushed the account link to x=451 and gave the page 61px of horizontal scroll. A bar whose children are added by another script has to be able to take a second row. */ display: flex; flex-wrap: wrap; align-items: center; gap: 9px; background: rgba(7, 7, 15, .92); border-bottom: 1px solid var(--ar-line); padding: 9px 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .78rem; font-weight: 800; } .ar-bar .brand { color: var(--ar-ink); font-weight: 900; font-family: var(--ar-head); font-size: 1rem; } .ar-bar .brand span { color: var(--ar-gold); } .ar-bar .spacer { flex: 1; } /* The injected live badge takes its own row on a phone rather than squeezing the brand and the account link off the edge. */ .ar-bar > .bgle { flex: 1 1 100%; order: 9; min-width: 0; max-width: 100%; } /* …except on a page that runs the arena game, where it does not appear at all. live-event-badge.js drops a ~110px card into the top bar, and on /tnpsc that card sits directly between the brand and the first question — on the one page whose entire promise is that a question is already on screen. The same event already has a full-width card further down this page, so this was duplication that cost the fold. The badge still shows everywhere else. */ body.bga-host .ar-bar > .bgle { display: none; } .ar-bar nav { display: flex; gap: 2px; } .ar-bar nav a { color: var(--ar-mut); padding: .3rem .55rem; border-radius: 7px; font-size: .76rem; } .ar-bar nav a:hover, .ar-bar nav a.on { background: rgba(255, 183, 3, .12); color: var(--ar-gold); } @media (max-width: 700px) { .ar-bar nav { display: none; } } .ar-bar .ar-mypts { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255, 183, 3, .45); background: rgba(255, 183, 3, .10); color: var(--ar-gold); border-radius: 999px; padding: 4px 11px; font-size: .74rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; } .ar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ar-red); animation: ar-blip 1.2s infinite; flex: 0 0 auto; } @keyframes ar-blip { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } } /* ── headings ───────────────────────────────────────────────────────────── */ .ar-season { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 183, 3, .45); background: rgba(255, 183, 3, .10); color: var(--ar-gold); border-radius: 999px; padding: 4px 12px; font-size: .67rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; } .ar-h1 { font-family: var(--ar-head); font-weight: 900; line-height: 1.05; margin: 13px 0 7px; font-size: clamp(1.9rem, 7vw, 2.9rem); letter-spacing: -.02em; background: linear-gradient(180deg, #fff 12%, var(--ar-gold) 62%, var(--ar-gold2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 42px rgba(255, 183, 3, .24); } .ar-h1 .l2 { display: block; font-size: .55em; letter-spacing: .22em; background: linear-gradient(90deg, var(--ar-cyan), var(--ar-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; } .ar-h2 { font-family: var(--ar-head); font-weight: 900; font-size: 1.12rem; color: var(--ar-ink); margin: 26px 0 10px; display: flex; align-items: center; gap: 8px; } .ar-h2::before { content: ''; width: 4px; height: 1.05em; border-radius: 3px; background: linear-gradient(180deg, var(--ar-gold), var(--ar-gold2)); flex: 0 0 auto; } .ar-lead { color: var(--ar-mut); font-size: .95rem; line-height: 1.6; margin: 6px 0 0; } .ar-lead b { color: var(--ar-ink); } .ar-note { color: var(--ar-mut); font-size: .8rem; line-height: 1.55; margin: 8px 0 0; } /* ── panels ─────────────────────────────────────────────────────────────── */ .ar-panel { background: linear-gradient(160deg, rgba(20, 17, 39, .92), rgba(13, 11, 28, .94)); border: 1.5px solid var(--ar-line); border-radius: 16px; padding: 15px 14px; margin: 11px 0; } .ar-panel.gold { border-color: rgba(255, 183, 3, .45); box-shadow: 0 12px 34px rgba(255, 140, 20, .16); } .ar-panel.pink { border-color: rgba(255, 46, 136, .45); box-shadow: 0 12px 34px rgba(255, 46, 136, .14); } .ar-panel.cyan { border-color: rgba(34, 211, 238, .40); } .ar-panel h3 { font-family: var(--ar-head); font-weight: 900; font-size: 1rem; margin: 0 0 6px; color: var(--ar-ink); } /* ── the HUD: stat tiles ─────────────────────────────────────────────────── */ .ar-hud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 13px 0; } .ar-hud.three { grid-template-columns: repeat(3, 1fr); } .ar-hud.two { grid-template-columns: repeat(2, 1fr); } @media (max-width: 560px) { .ar-hud { grid-template-columns: repeat(2, 1fr); } } .ar-tile { background: rgba(11, 9, 24, .72); border: 1px solid var(--ar-line); border-radius: 12px; padding: 10px 6px; text-align: center; min-width: 0; } .ar-tile b { display: block; font-family: var(--ar-head); font-weight: 900; font-size: 1.32rem; line-height: 1.15; color: var(--ar-ink); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; } .ar-tile small { display: block; font-size: .58rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ar-mut); font-weight: 800; margin-top: 2px; } .ar-tile.hot { border-color: rgba(255, 183, 3, .5); background: rgba(255, 183, 3, .10); } .ar-tile.hot b { color: var(--ar-gold); } .ar-tile.cool { border-color: rgba(34, 211, 238, .4); background: rgba(34, 211, 238, .08); } .ar-tile.cool b { color: var(--ar-cyan); } /* ── divisions: the visible level a player is at ─────────────────────────── */ .ar-div { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 12px; font-size: .72rem; font-weight: 900; letter-spacing: .06em; border: 1px solid currentColor; white-space: nowrap; } .ar-div.d1 { color: #e6a56b; background: rgba(205, 127, 50, .13); } /* Bronze */ .ar-div.d2 { color: #dfe3ee; background: rgba(192, 192, 205, .13); } /* Silver */ .ar-div.d3 { color: var(--ar-gold); background: rgba(255, 183, 3, .13); } /* Gold */ .ar-div.d4 { color: var(--ar-cyan); background: rgba(34, 211, 238, .13); } /* Platinum */ .ar-div.d5 { color: var(--ar-pink); background: rgba(255, 46, 136, .14); } /* Champion */ /* The division bar — how far to the next one. */ .ar-divbar { height: 7px; border-radius: 99px; background: #241c40; margin-top: 9px; overflow: hidden; } .ar-divbar i { display: block; height: 100%; border-radius: 99px; width: 0; background: linear-gradient(90deg, var(--ar-gold), var(--ar-gold2)); transition: width .6s cubic-bezier(.22, 1, .36, 1); } /* ── buttons ────────────────────────────────────────────────────────────── */ .ar-btn { display: inline-block; text-align: center; border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 900; font-size: .9rem; cursor: pointer; font-family: inherit; text-decoration: none; background: linear-gradient(135deg, var(--ar-gold), var(--ar-gold2)); color: #170d00; text-shadow: 0 1px 0 rgba(255, 255, 255, .18); } .ar-btn:hover { filter: brightness(1.08); } /* `.ar-body a { color: gold }` is (0,1,1) and out-specifies `.ar-btn` (0,1,0), which painted gold text onto a gold button — invisible. Anything that is a filled button AND a link has to win that fight explicitly. */ .ar-body a.ar-btn, .ar-body a.cta, .ar-body a.bgc-btn { color: #170d00; } .ar-body a.ar-btn.ghost, .ar-body a.cta.alt, .ar-body a.bgc-btn.ghost { color: var(--ar-ink); } .ar-btn.ghost { background: transparent; border: 1.5px solid var(--ar-line); color: var(--ar-ink); } .ar-btn.ghost:hover { border-color: rgba(255, 183, 3, .5); } .ar-btn.pink { background: linear-gradient(135deg, var(--ar-pink), var(--ar-gold2)); color: #1a0010; } .ar-btn.block { display: block; width: 100%; } .ar-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .ar-btns > * { flex: 1 1 200px; } /* ── chips ──────────────────────────────────────────────────────────────── */ .ar-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ar-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(11, 9, 24, .7); border: 1px solid var(--ar-line); color: var(--ar-mut); border-radius: 999px; padding: 4px 11px; font-size: .74rem; font-weight: 800; } .ar-chip.gold { border-color: rgba(255, 183, 3, .45); color: var(--ar-gold); background: rgba(255, 183, 3, .10); } .ar-chip.cyan { border-color: rgba(34, 211, 238, .4); color: var(--ar-cyan); background: rgba(34, 211, 238, .08); } .ar-chip.green { border-color: rgba(34, 197, 94, .45); color: var(--ar-green); background: rgba(34, 197, 94, .10); } a.ar-chip:hover { border-color: rgba(255, 183, 3, .55); color: var(--ar-gold); } /* ── tables: standings, records, topic averages ──────────────────────────── */ .ar-tbl { border: 1.5px solid var(--ar-line); border-radius: 14px; overflow: hidden; background: var(--ar-panel2); } .ar-tr { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-top: 1px solid rgba(42, 33, 69, .75); font-size: .84rem; } .ar-tr:first-child { border-top: 0; } .ar-tr .rk { flex: 0 0 28px; font-family: var(--ar-head); font-weight: 900; color: var(--ar-mut); font-variant-numeric: tabular-nums; } .ar-tr .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } .ar-tr .nm small { display: block; font-size: .68rem; color: var(--ar-mut); font-weight: 700; } .ar-tr .pt { font-family: var(--ar-head); font-weight: 900; color: var(--ar-gold); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; } .ar-tr .pt span { display: block; font-family: var(--ar-text); font-weight: 700; font-size: .66rem; color: var(--ar-mut); } .ar-tr.me { background: rgba(255, 183, 3, .10); } .ar-tr.me .rk { color: var(--ar-gold); } .ar-tr.head { background: rgba(255, 255, 255, .03); font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ar-mut); font-weight: 900; } .ar-tr.head .pt { color: var(--ar-mut); } .ar-empty { padding: 14px 12px; color: var(--ar-mut); font-size: .81rem; line-height: 1.55; } /* Top-three medals, IPL points-table style. */ .ar-tr .rk.m1 { color: var(--ar-gold); } .ar-tr .rk.m2 { color: #dfe3ee; } .ar-tr .rk.m3 { color: #e6a56b; } /* ── the form guide: last N results as W/L pills ─────────────────────────── */ .ar-form { display: inline-flex; gap: 4px; } .ar-form i { width: 20px; height: 20px; border-radius: 6px; font-style: normal; display: inline-flex; align-items: center; justify-content: center; font-size: .64rem; font-weight: 900; font-family: var(--ar-head); } .ar-form i.w { background: rgba(34, 197, 94, .18); color: var(--ar-green); border: 1px solid rgba(34, 197, 94, .45); } .ar-form i.l { background: rgba(239, 68, 68, .15); color: #ff9b9b; border: 1px solid rgba(239, 68, 68, .42); } /* An unplayed slot still has to read as a slot — at .10 alpha the guide looked like an empty strip rather than twelve places waiting to be filled. */ .ar-form i.n { background: rgba(157, 149, 196, .07); color: rgba(157, 149, 196, .8); border: 1px dashed rgba(157, 149, 196, .38); } /* ── a stat line, cricket-card style: label left, big number right ───────── */ .ar-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .ar-stat { border: 1.5px solid var(--ar-line); border-radius: 13px; padding: 11px 12px; background: var(--ar-panel2); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .ar-stat span { font-size: .74rem; color: var(--ar-mut); font-weight: 800; line-height: 1.35; } .ar-stat b { font-family: var(--ar-head); font-weight: 900; font-size: 1.25rem; color: var(--ar-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .ar-stat.gold b { color: var(--ar-gold); } .ar-stat.cyan b { color: var(--ar-cyan); } /* ── awards ─────────────────────────────────────────────────────────────── */ .ar-aws { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 9px; } .ar-aw { border: 1.5px solid var(--ar-line); border-radius: 14px; padding: 11px; background: var(--ar-panel2); position: relative; overflow: hidden; } .ar-aw .ic { font-size: 1.35rem; line-height: 1; } .ar-aw .t { font-family: var(--ar-head); font-weight: 900; font-size: .93rem; margin-top: 5px; } .ar-aw .d { color: var(--ar-mut); font-size: .72rem; line-height: 1.4; margin-top: 2px; } .ar-aw .v { margin-top: 7px; font-size: .75rem; font-weight: 900; color: var(--ar-mut); } .ar-aw.t1 { border-color: rgba(205, 127, 50, .55); } .ar-aw.t1 .v { color: #e6a56b; } .ar-aw.t2 { border-color: rgba(192, 192, 205, .55); } .ar-aw.t2 .v { color: #dfe3ee; } .ar-aw.t3 { border-color: rgba(255, 183, 3, .65); background: linear-gradient(150deg, rgba(255, 183, 3, .12), var(--ar-panel2) 60%); } .ar-aw.t3 .v { color: var(--ar-gold); } .ar-aw.t0 { opacity: .68; } /* ── the topic-average bar, IPL "batting average" ────────────────────────── */ .ar-bars { display: grid; gap: 7px; } .ar-barrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: .81rem; } .ar-barrow .lb { font-weight: 700; color: var(--ar-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ar-barrow .vl { font-family: var(--ar-head); font-weight: 900; color: var(--ar-gold); font-variant-numeric: tabular-nums; } .ar-barrow .tr { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: #241c40; overflow: hidden; } .ar-barrow .tr i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--ar-gold), var(--ar-gold2)); transition: width .6s cubic-bezier(.22, 1, .36, 1); } .ar-barrow.weak .vl { color: #ff9b9b; } .ar-barrow.weak .tr i { background: linear-gradient(90deg, var(--ar-red), var(--ar-pink)); } .ar-barrow.strong .vl { color: var(--ar-green); } .ar-barrow.strong .tr i { background: linear-gradient(90deg, var(--ar-green), var(--ar-cyan)); } /* ── the "next mission" strip: the single loudest thing on a page ────────── */ .ar-mission { display: block; text-decoration: none; color: inherit; position: relative; overflow: hidden; border: 1.5px solid rgba(255, 183, 3, .55); border-radius: 18px; padding: 16px; background: linear-gradient(150deg, #2b1046, #4a0d2c 62%, #12091f); box-shadow: 0 14px 40px rgba(255, 140, 20, .18); } .ar-mission::after { content: ''; position: absolute; inset: -50% -20% auto -20%; height: 170px; pointer-events: none; background: radial-gradient(60% 100% at 50% 0, rgba(255, 183, 3, .28), transparent 70%); } .ar-mission .kick { font-size: .66rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--ar-gold); } .ar-mission .ttl { font-family: var(--ar-head); font-weight: 900; font-size: 1.3rem; line-height: 1.2; color: #fff; margin: 7px 0 5px; } .ar-mission .sub { color: #d9d2f0; font-size: .89rem; line-height: 1.55; } /* ── locked / unlockable rows ───────────────────────────────────────────── */ .ar-lockrow { display: flex; align-items: center; gap: 11px; border: 1.5px solid var(--ar-line); border-radius: 14px; padding: 11px 12px; background: var(--ar-panel2); } .ar-lockrow .n { flex: 0 0 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--ar-head); font-weight: 900; font-size: 1.05rem; background: #171233; color: var(--ar-mut); border: 1px solid var(--ar-line); } .ar-lockrow .w { flex: 1; min-width: 0; } .ar-lockrow .w b { display: block; font-family: var(--ar-head); font-size: .97rem; line-height: 1.25; } .ar-lockrow .w small { display: block; color: var(--ar-mut); font-size: .75rem; line-height: 1.45; margin-top: 2px; } .ar-lockrow.done { border-color: rgba(34, 197, 94, .45); background: linear-gradient(135deg, rgba(34, 197, 94, .10), var(--ar-panel2) 60%); } .ar-lockrow.locked { opacity: .6; } /* ── FAQ / prose, dark ───────────────────────────────────────────────────── */ .ar-faq { border-top: 1px solid var(--ar-line); padding: 10px 0 0; } .ar-faq .q { font-weight: 800; color: var(--ar-ink); font-size: .9rem; margin: 14px 0 4px; } .ar-faq .a { color: var(--ar-mut); font-size: .84rem; line-height: 1.65; } /* ── footer ─────────────────────────────────────────────────────────────── */ .ar-foot { border-top: 1px solid var(--ar-line); margin-top: 30px; padding: 18px 14px 26px; text-align: center; color: var(--ar-mut); font-size: .78rem; } .ar-foot a { color: var(--ar-gold); } /* ══ shared widgets, wearing the arena kit ═══════════════════════════════════ xp-engine, daily-streak-cta, exam-updates-widget and support-dock inject their own light styles and are used on ~900 pages, most of them white. So they are re-skinned HERE, scoped to `.ar-body`, rather than edited at source: an arena page gets the dark kit and every other page is untouched. Each block below is a full override of the widget's own inline