/* Leagues and Leaders — measured from the original's screens (chat-column size, 375 wide). */

.lg7-screen .pnl > .panel-body, .ld7-screen .pnl > .panel-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.lg7, .ld7 { flex: 1; min-height: 0; display: flex; flex-direction: column; font-family: Montserrat, Cairo, sans-serif; }

/* shared: the dark timer pill "⏱ 13 h 14 m" */
.lg7-timer { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 24px; min-width: 101px; padding: 0 8px; border-radius: 8px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 14px; font-weight: 700; }
.lg7-timer.big { height: 26px; min-width: 105px; }
.lg7-timer i { display: grid; }
.lg7-tv { display: inline-flex; align-items: baseline; gap: 3px; }
.lg7-tv small { font-size: 14px; font-weight: 700; margin-inline-end: 3px; }
.lg7-star, .lg7-star-s, .lg7-star-a { display: inline-grid; width: 20px; height: 20px; vertical-align: middle; }
.lg7-star-s { width: 16px; height: 16px; }
.lg7-star svg, .lg7-star-s svg, .lg7-star-a svg { width: 100%; height: 100%; }
.lg7-badge { flex: none; display: inline-grid; place-items: center; filter: drop-shadow(0 3px 4px rgba(53, 41, 93, .3)); }
.lg7-badge-img { width: 100%; height: 100%; object-fit: contain; }
.lg7-loading, .lg7-empty { padding: 40px 16px; text-align: center; color: #8b84a3; font-size: 14px; }

/* All the leagues and their prizes (leaguesGuide): Top 100-style rows, the prizes in each league's chest */
.lgg-screen .pnl > .panel-body { padding: 0; display: flex; flex-direction: column; }
.lgg { flex: 1; min-height: 0; display: flex; flex-direction: column; font-family: Montserrat, Cairo, sans-serif; }
.lgg-info { flex: none; }
.lgg-info p { margin: 2px 0 0; font-size: 12px; line-height: 17px; }
.lgg-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.lgg-row { position: relative; display: flex; align-items: center; gap: 10px; min-height: 84px; padding: 6px 10px; border-radius: 10px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .1); }
.lgg-row.here { background: #f0e7ff; box-shadow: 0 0 0 2px var(--lc), 0 4px 10px rgba(0, 0, 0, .12); }
.lgg-row.mine:not(.here) { background: #f7f2ff; }
.lgg-n { position: absolute; top: 4px; inset-inline-start: 4px; min-width: 22px; height: 18px; padding: 0 5px; border-radius: 10px; background: rgba(4, 5, 15, .55); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; z-index: 1; }
.lgg-pic { flex: 0 0 64px; height: 72px; display: grid; place-items: center; }
.lgg-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lgg-name { max-width: 100%; font-size: 14px; font-weight: 700; color: #1d1338; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgg-tag { padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.lgg-tag.here { background: var(--lc); color: #fff; }
.lgg-tag.mine { background: #e6dcff; color: #6d3fd8; }
.lgg-chest { flex: none; padding: 0; background: none; display: grid; place-items: center; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); transition: transform .15s; }
.lgg-chest img { width: 58px; height: 58px; object-fit: contain; }
.lgg-chest:hover, .lgg-row.open .lgg-chest { transform: scale(1.08) rotate(-4deg); }
/* the chest's prizes: shown while the chest is hovered, or tapped open */
.lgg-pop { position: absolute; z-index: 5; top: calc(100% - 6px); inset-inline-end: 8px; width: 210px; padding: 10px 12px; border-radius: 12px; background: #fff; color: #392b64; box-shadow: 0 8px 24px rgba(30, 15, 70, .25); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s; pointer-events: none; }
.lgg-row:has(.lgg-chest:hover) .lgg-pop, .lgg-row.open .lgg-pop { opacity: 1; visibility: visible; transform: none; }
.lgg-row:has(.lgg-chest:hover), .lgg-row.open { z-index: 4; }
.lgg-pop-title { display: block; margin-bottom: 6px; font-size: 13px; }
.lgg-pop ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lgg-pop li { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.lgg-pop li em { font-style: normal; min-width: 22px; text-align: center; font-weight: 700; }
.lgg-pop li b { font-weight: 700; color: #6b4300; }
.lgg-pop li b.gifts { color: #b03a7a; }
.lgg-pop li.frame b { color: #4a2ea8; }
.lgg-pop-up { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid #efe7ff; font-size: 11px; font-weight: 600; color: #5d5478; }
.lgg-mine { margin: 0 14px 14px; padding: 12px; border-radius: 14px; background: linear-gradient(90deg, #ff4f8b, #9b6bff); color: #fff; font-size: 14px; font-weight: 700; }

/* ── Leagues: tabs ── */
.lg7-tabs { flex: 0 0 46px; display: flex; gap: 4px; background: #382a63; }
.lg7-tabs button { flex: 1; height: 46px; border-radius: 4px 4px 0 0; background: #473873; color: rgba(255, 255, 255, .5); font: 700 18px/22px Montserrat, Cairo, sans-serif; }
.lg7-tabs button.on { background: #fff; color: #35295d; }
.lg7-content { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; background: #fff; color: #35295d; }
.lg7-content > *, .lg7-scroll > * { flex-shrink: 0; }

/* My league */
.lg7-top { display: flex; align-items: center; gap: 18px; padding: 16px 16px 0 17px; min-height: 88px; }
.lg7-intro { flex: 1; margin: 0; font-size: 14px; font-weight: 500; line-height: 18px; white-space: pre-line; }
.lg7-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lg7-refresh { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 98px; height: 32px; border-radius: 20px; background: #7957b2; color: #fff; font-size: 14px; font-weight: 700; }
.lg7-refresh i { display: grid; }
.lg7-progress { position: relative; display: flex; align-items: center; margin: 10px 16px 0; height: 34px; }
.lg7-pi { position: relative; z-index: 1; flex: 0 0 34px; height: 34px; border-radius: 100px; background: #4f369c; border: 2px solid #7957b2; display: grid; place-items: center; }
.lg7-bar { position: relative; flex: 1; height: 18px; margin: 0 -9px; background: #392b64; border: 1px solid #7957b2; overflow: hidden; }
.lg7-bar > div { position: absolute; inset: 1px auto 1px 9px; max-width: calc(100% - 18px); background: linear-gradient(#e27fc7, #d469b6); transition: width .3s; }
[dir="rtl"] .lg7-bar > div { inset: 1px 9px 1px auto; }
.lg7-bar b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; }
.lg7-last { margin: 12px 16px 0; padding: 8px 12px; border-radius: 10px; background: #f1eaff; font-size: 12px; font-weight: 600; color: #392b64; }
.lg7-tasks-title { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 24px 16px 18px; color: #000; font-size: 14px; font-weight: 600; }
.lg7-task { display: flex; align-items: center; gap: 8px; height: 55px; margin: 0 20px 8px; padding-inline-start: 12px; border-radius: 10px; background: #fff; border: 2px solid #fff; box-shadow: 0 2px 10px rgba(79, 54, 156, .16); overflow: hidden; }
.lg7-task-ico { flex: 0 0 22px; font-size: 18px; text-align: center; }
.lg7-task-name { flex: 1; min-width: 0; color: #4f369c; font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg7-start { flex: 0 0 auto; min-width: 57px; height: 27px; padding: 0 8px; border-radius: 100px; border: 1px solid #c1b5e5; background: #fff; color: #c1b5e5; font-size: 16px; font-weight: 700; }
.lg7-start:hover { color: #7957b2; border-color: #7957b2; }
.lg7-award { flex: 0 0 80px; align-self: stretch; margin: -2px; margin-inline-start: 4px; border-radius: 0 8px 8px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: repeating-conic-gradient(from 0deg at 50% 60%, rgba(255, 255, 255, .09) 0 10deg, transparent 10deg 20deg), radial-gradient(50% 65% at 50% 50%, #aa77f8 0%, #955ee8 52%, #7840c8 100%); }
[dir="rtl"] .lg7-award { border-radius: 8px 0 0 8px; }
.lg7-award b { color: #fff; font-size: 18px; font-weight: 700; line-height: 22px; text-shadow: 0 1px 2px rgba(53, 41, 93, .5); }
.lg7-star-a { width: 22px; height: 22px; margin-top: -2px; }

/* player cards (group, friends, Top 100) */
.lg7-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }
.lg7-list.pad { padding-top: 16px; }
.lg7-card { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 84px; padding: 6px 10px; border-radius: 10px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .1); text-align: start; color: #000; }
.lg7-card.self { background: #f0e7ff; }
.lg7-ava { flex: 0 0 54px; height: 72px; border-radius: 6px; background: #ddd center / cover no-repeat; }
.lg7-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.lg7-name { max-width: 100%; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg7-count { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 10px 0 6px; border-radius: 16px; background: rgba(145, 147, 153, .2); color: #04050f; font-size: 14px; font-weight: 500; }
.lg7-medal { position: absolute; top: -2px; inset-inline-start: -1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); }
.lg7-medal.m1 { background: linear-gradient(#ffd43b, #f59f00); }
.lg7-medal.m2 { background: linear-gradient(#dee2e6, #98a2b3); }
.lg7-medal.m3 { background: linear-gradient(#ffa94d, #d9480f); }
.lg7-rank { position: absolute; top: 2px; inset-inline-start: 0; min-width: 33px; height: 20px; padding: 0 6px; border-radius: 16px; background: rgba(4, 5, 15, .55); color: #fff; font-size: 14px; font-weight: 700; display: grid; place-items: center; }
.lg7-reward { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: #392b64; font-size: 14px; font-weight: 700; }
.lg7-reward.none { min-width: 24px; justify-content: center; font-size: 18px; }
.lg7-zone.up .lg7-card { box-shadow: 0 4px 8px rgba(0, 0, 0, .1), inset 4px 0 0 #51cf66; }
.lg7-zone.down .lg7-card { box-shadow: 0 4px 8px rgba(0, 0, 0, .1), inset 4px 0 0 #ff6b6b; }
[dir="rtl"] .lg7-zone.up .lg7-card { box-shadow: 0 4px 8px rgba(0, 0, 0, .1), inset -4px 0 0 #51cf66; }
[dir="rtl"] .lg7-zone.down .lg7-card { box-shadow: 0 4px 8px rgba(0, 0, 0, .1), inset -4px 0 0 #ff6b6b; }

/* Friends */
.lg7-none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding-top: 70px; text-align: center; }
.lg7-none p { width: 190px; margin: 0; font-size: 14px; font-weight: 500; line-height: 20px; }
.lg7-none-pic { font-size: 120px; line-height: 1; opacity: .9; padding-bottom: 40px; }

/* Top 100 */
.lg7-content:has(.lg7-scroll) { overflow: hidden; }
.lg7-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.lg7-tophead { display: flex; align-items: center; gap: 8px; padding: 14px 14px 0; min-height: 55px; }
.lg7-score { flex: 1; font-size: 14px; font-weight: 500; line-height: 20px; }
.lg7-score b { color: #04050f; font-weight: 800; margin-inline-start: 2px; }
.lg7-score u { text-underline-offset: 2px; }
.lg7-info { position: relative; display: flex; align-items: center; gap: 10px; margin: 10px 14px 6px; min-height: 72px; padding: 10px 26px 10px 10px; border-radius: 10px; background: #f1eaff; color: #392b64; }
[dir="rtl"] .lg7-info { padding: 10px 10px 10px 26px; }
.lg7-info-ico { flex: 0 0 60px; font-size: 34px; text-align: center; }
.lg7-info b { font-size: 14px; font-weight: 700; }
.lg7-info p { margin: 4px 0 0; font-size: 12px; font-weight: 500; line-height: 15px; }
.lg7-info-x { position: absolute; top: 4px; inset-inline-end: 6px; background: none; color: #7957b2; font-size: 20px; line-height: 1; }
.lg7-scroll .lg7-list { padding-top: 8px; }
.lg7-pinned { flex: 0 0 auto; padding: 0 16px 8px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 30%); }

/* ── Leaders ── */
.ld7 { background: #382c5e; }
.ld7-tabs-wrap { position: relative; flex: 0 0 44px; margin-bottom: 8px; }
.ld7-tabs { display: flex; gap: 12px; height: 44px; padding: 0 13px; overflow-x: auto; scrollbar-width: none; }
.ld7-tabs::-webkit-scrollbar { display: none; }
.ld7-tab { flex: 0 0 44px; height: 44px; border-radius: 100%; background: rgba(255, 255, 255, .18); color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ld7-tab.on { flex-basis: auto; min-width: 142px; padding: 0 16px 0 12px; border-radius: 60px; background: rgba(182, 151, 240, .56); }
.ld7-tab-ico { font-size: 20px; line-height: 1; filter: grayscale(.1); }
.ld7-tab b { font-size: 14px; font-weight: 400; white-space: nowrap; }
.ld7-tabs > :last-child { margin-inline-end: 52px; }
.ld7-edge { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 64px; display: flex; align-items: center; justify-content: flex-end; padding-inline-end: 4px; background: linear-gradient(to left, #382c5e 24px, rgba(56, 44, 94, 0)); pointer-events: none; }
[dir="rtl"] .ld7-edge { background: linear-gradient(to right, #382c5e 24px, rgba(56, 44, 94, 0)); }
.ld7-arrow { pointer-events: auto; width: 36px; height: 36px; border-radius: 50%; background: #635080; color: #fff; font-size: 24px; line-height: 1; padding-bottom: 3px; }
[dir="rtl"] .ld7-arrow { transform: scaleX(-1); }
.ld7-box { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 6px 6px 0 0; background: #fff; overflow: hidden; }
.ld7-title { padding-top: 17px; text-align: center; color: #7957b2; font-size: 15px; font-weight: 600; line-height: 24px; }
.ld7-sub { padding: 0 16px; text-align: center; color: #7957b2; font-size: 12px; line-height: 15px; }
.ld7-periods { display: flex; justify-content: space-between; padding: 10px 21px 0; }
.ld7-periods button { width: 83px; height: 22px; border-radius: 22px; border: 1px solid #4f369c; background: #fff; color: #4f369c; font-size: 12px; font-weight: 700; }
.ld7-periods button.on { background: #01c138; border-color: #01c138; color: #fff; }
.ld7-board { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 15px; background: #f5f2fb; }
.ld7-cols { flex: 0 0 auto; display: grid; grid-template-columns: 191px 96px 52px; padding: 12px 18px 12px; color: #9b8eac; font-size: 10px; line-height: 14px; }
.ld7-cols span:nth-child(2) { text-align: center; }
.ld7-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 0 12px 12px; }
.ld7-row { flex: 0 0 68px; display: flex; align-items: center; gap: 6px; width: 100%; padding: 0 6px; border-radius: 12px; border: 1px solid #e9e2f0; background: #fff; text-align: start; color: #39285f; }
.ld7-row.p1 { background: #fff8e8; border-color: #f3e3b8; }
.ld7-row.p2 { background: #f1f3fc; border-color: #dfe3f2; }
.ld7-row.p3 { background: #fff2ea; border-color: #f2dfd0; }
.ld7-rank { flex: 0 0 28px; height: 44px; display: grid; place-items: center; color: #8e7fa5; font-size: 16px; font-weight: 700; }
.ld7-photo { flex: 0 0 32px; height: 48px; border-radius: 7px; background: #ddd center / cover no-repeat; }
.ld7-photo.emblem { display: grid; place-items: center; background: #ece5f7; font-size: 20px; }
.ld7-pair { flex: 0 0 auto; display: flex; gap: 2px; }
.ld7-pair .ld7-photo { flex-basis: 24px; width: 24px; height: 36px; }
.ld7-name { flex: 1; min-width: 0; font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld7-pts { flex: 0 0 96px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 700; }
.ld7-pts i { font-style: normal; font-size: 11px; }
.ld7-reward { flex: 0 0 52px; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; }
.ld7-reward i { font-style: normal; font-size: 13px; }
.ld7-me { flex: 0 0 94px; display: flex; align-items: center; padding: 0 12px; background: #e8ddf8; }
.ld7-me-row { flex: 1; height: 82px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 12px; background: #e8ddf8; color: #39285f; }
.ld7-me-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ld7-hint { font-size: 10px; color: #8c7b9f; line-height: 13px; }
.ld7-me-pts { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ld7-me-pts small { font-size: 10px; }
.ld7-me-pts b { font-size: 11px; font-weight: 700; }
.ld7-ends { flex: 0 0 30px; display: flex; align-items: center; justify-content: center; gap: 13px; background: #ff4b4b; color: #fff; font-size: 12px; font-weight: 500; }
.ld7-ends .lg7-timer { height: 24px; min-width: 116px; }
.lg7-saved { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: #ffd447; }