/* ============================================================
   NEW unified Reward Center (v2) — Desktop + Mobile, one sheet.
   Hand-written (no Sass build). Namespaced under .__RcV2 to stay
   collision-free with the legacy playtoearnrewards.css.
   ============================================================ */

/* Main site header white on the v2 Reward Center (sheet only loads on ?v2=1) */
header.HeaderLayout,
.MobileHeaderLayout {
    background: #ffffff !important;
}

.__RcV2 {
    --rc-ink: #1f2430;
    --rc-muted: #7a828f;
    --rc-line: #e7e9ee;
    --rc-card: #ffffff;
    --rc-track: #dfe7f5;
    --rc-fill-a: #4b5f86;
    --rc-fill-b: #2f3d59;
    --rc-inner: 960px;
    color: var(--rc-ink);
    font-family: inherit;
    background: #f3f4f6;
}

/* ---------- Level header card ---------- */
/* Shared backdrop behind header + tabs */
.__RcV2 .__RcTop {
    background: #ffffff url("https://assets.playtoearn.com/reward_header_bg_.png") center / cover no-repeat;
}
.__RcV2 .__RcHeaderBar {
    background: transparent;
}

/* Der Mobile-Kopf (Begruessung + Punkte-Karte) existiert im Markup immer,
   sichtbar wird er erst unter 720px. Der Desktop-Kopf verschwindet dort
   im Gegenzug, es laeuft also immer nur einer von beiden. */
.__RcV2 .__RcMobHead { display: none; }
.__RcV2 .__RcHeader {
    position: relative;
    display: flex;
    align-items: center;
    gap: 28px;
    max-width: 880px;
    margin: 0 auto;
    padding: 32px 36px 16px;
    background: transparent;
    border-radius: 18px;
}

.__RcV2 .__RcHeader > * { position: relative; z-index: 1; }

/* Medal badge — big lottie, overflows vertically so it doesn't grow the header */
.__RcV2 .__RcMedal {
    flex: 0 0 auto;
    width: 140px;
    height: 140px;
    margin: -20px 0;
    display: grid;
    place-items: center;
}
.__RcV2 .__RcMedal svg { width: 100%; height: 100%; display: block; }
.__RcV2 .__RcMedalLottie { width: 100%; height: 100%; }

/* Center column: title + rate + progress */
.__RcV2 .__RcMeta { flex: 1 1 auto; min-width: 0; }
.__RcV2 .__RcLevelName {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.__RcV2 .__RcGoal {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--rc-muted);
    margin-left: 4px;
}
.__RcV2 .__RcRate {
    margin-top: 6px;
    font-size: 1rem;
    color: var(--rc-muted);
}
.__RcV2 .__RcRate b { color: var(--rc-ink); font-weight: 700; }

.__RcV2 .__RcBar {
    margin-top: 16px;
    height: 12px;
    border-radius: 999px;
    background: var(--rc-track);
    overflow: hidden;
}
.__RcV2 .__RcBarFill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #00c03e 0%, #00a834 100%);
    transition: width .6s ease;
}
.__RcV2 .__RcToNext {
    margin-top: 10px;
    font-size: .95rem;
    color: var(--rc-muted);
}
.__RcV2 .__RcToNext b { color: var(--rc-ink); font-weight: 700; }

/* Right column: balance top, redeem aligned with the progress line */
.__RcV2 .__RcAside {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.__RcV2 .__RcBalance {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.55rem;
    font-weight: 800;
}
.__RcV2 .__RcBalance img { width: 26px; height: 26px; object-fit: contain; }

.__RcV2 .__RcRedeem {
    appearance: none;
    margin-bottom: 15px;
    border: none;
    background: linear-gradient(135deg, #00c03e 0%, #00a834 100%);
    color: #fff;
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 11px 28px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 168, 52, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
    transition: transform .12s ease, filter .18s ease;
}
.__RcV2 .__RcRedeem:hover { transform: translateY(-1px); filter: brightness(1.04); }
.__RcV2 .__RcRedeem:active { transform: translateY(0); }

/* ---------- Tabs ---------- */
/* Full-width divider line, buttons stay constrained/centered. */
.__RcV2 .__RcTabsBar {
    margin-top: 22px;
    border-bottom: 1px solid var(--rc-line);
}
.__RcV2 .__RcTabs {
    display: flex;
    gap: 34px;
    max-width: var(--rc-inner);
    margin: 0 auto;
    padding: 0 8px;
}
.__RcV2 .__RcTab {
    position: relative;
    padding: 14px 2px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--rc-muted);
    cursor: pointer;
    background: none;
    border: none;
    transition: color .15s ease;
}
.__RcV2 .__RcTab:hover { color: var(--rc-ink); }
.__RcV2 .__RcTab.__IsActive { color: var(--rc-ink); }
/* Zaehler-Badge im Tab "Completed tasks" */
.__RcV2 .__RcTabBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: #eef0f4;
    color: #6b7280;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}
.__RcV2 .__RcTab.__IsActive .__RcTabBadge { background: #e6ecff; color: #2f6bff; }

.__RcV2 .__RcTab.__IsActive::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #2f6bff;
}

/* Right-aligned icon actions (daily collect + notifications) */
.__RcV2 .__RcTabActions {
    margin-left: auto;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
}
.__RcV2 .__RcTabDaily { position: relative; display: inline-flex; z-index: 60; }
/* Das Daily-Collect-Dropdown liegt sonst unter der Punkte-Karte bzw. dem
   Lottie darunter: die kommen im DOM spaeter und haben ohne z-index die
   Nase vorn. app.earn.css setzt zwar eine 100, wird auf dem Handy aber gar
   nicht geladen. */
.__RcV2 .__RcTabDaily .__BoxInfo { z-index: 60; }

/* Round icon buttons in the tab bar */
.__RcV2 .__RcTabNotif {
    align-self: center;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.__RcV2 .__RcTabNotif:hover { background: #e9ebef; color: var(--rc-ink); }
.__RcV2 .__RcTabNotifCount {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
    background: #fc1b59;
    border: 2px solid #fff;
    border-radius: 999px;
    box-sizing: border-box;
}

/* ---------- Leaderboard (top-3 mini chips + daily challenge) ---------- */
.__RcV2 .__RcLeaderboard {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 20px;
    box-shadow: 0 1px 2px rgba(20, 22, 30, 0.05), 0 8px 24px rgba(20, 22, 30, 0.04);
    margin-bottom: 24px;
}

/* Top-3 mini chips (same look as the TedlCash mini strip) */
.__RcV2 .__RcLbMiniList { display: flex; gap: 10px; flex-wrap: nowrap; }

/* Top-3 chips in a swiper (scroll when space is tight) */
.__RcV2 .__RcLbRight {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.__RcV2 .__RcLbMiniWrap {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
}
.__RcV2 .__RcLbSwiper { overflow: hidden; }
.__RcV2 .__RcLbSlide { width: auto; height: auto; }

/* Arrows — same look as the game item content slider */
.__RcV2 .__RcLbMiniWrap > .swiper-button-prev,
.__RcV2 .__RcLbMiniWrap > .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    --swiper-navigation-size: 12px;
    --swiper-navigation-color: #444;
    background: #f0f0f0;
    border: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.__RcV2 .__RcLbMiniWrap > .swiper-button-prev:hover,
.__RcV2 .__RcLbMiniWrap > .swiper-button-next:hover {
    background: #e2e2e2;
    --swiper-navigation-color: #000;
}
.__RcV2 .__RcLbMiniWrap > .swiper-button-prev.swiper-button-disabled,
.__RcV2 .__RcLbMiniWrap > .swiper-button-next.swiper-button-disabled,
.__RcV2 .__RcLbMiniWrap > .swiper-button-prev.swiper-button-lock,
.__RcV2 .__RcLbMiniWrap > .swiper-button-next.swiper-button-lock {
    opacity: 0;
    pointer-events: none;
}
.__RcV2 .__RcLbMiniWrap > .swiper-button-prev::after,
.__RcV2 .__RcLbMiniWrap > .swiper-button-next::after {
    font-size: 10px;
    font-weight: 700;
    font-family: swiper-icons;
}
.__RcV2 .__RcLbMiniWrap > .swiper-button-prev { left: -6px; }
.__RcV2 .__RcLbMiniWrap > .swiper-button-next { right: -6px; }
.__RcV2 .__RcLbMiniChip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px 7px 7px;
    background: #f3f4f6;
    border-radius: 12px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .15s ease;
}
.__RcV2 .__RcLbMiniChip:hover { background: #eceef1; }

/* Top-3 rank: white bg + 2px border in the rank colour */
.__RcV2 .__RcLbMiniChip.__Rank1 { background: #fff; border: 2px solid #fcefb4; }
.__RcV2 .__RcLbMiniChip.__Rank1:hover { background: #fffdf3; }
.__RcV2 .__RcLbMiniChip.__Rank2 { background: #fff; border: 2px solid #e9ecf2; }
.__RcV2 .__RcLbMiniChip.__Rank2:hover { background: #fafbfc; }
.__RcV2 .__RcLbMiniChip.__Rank3 { background: #fff; border: 2px solid #ffedd8; }
.__RcV2 .__RcLbMiniChip.__Rank3:hover { background: #fffbf6; }
/* Big Netflix-style rank number in front of each top-3 chip */
.__RcV2 .__RcLbRankNum {
    flex: 0 0 auto;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    padding: 0 2px 0 4px;
}
.__RcV2 .__RcLbMiniChip.__Rank1 .__RcLbRankNum { color: #f0c419; }
.__RcV2 .__RcLbMiniChip.__Rank2 .__RcLbRankNum { color: #aeb6c2; }
.__RcV2 .__RcLbMiniChip.__Rank3 .__RcLbRankNum { color: #cd7f32; }

.__RcV2 .__RcLbMiniAvatar { position: relative; flex: 0 0 auto; line-height: 0; }
.__RcV2 .__RcLbMiniFace {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.__RcV2 .__RcLbMiniMedal {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 18px;
    height: 18px;
}
.__RcV2 .__RcLbMiniText { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.__RcV2 .__RcLbMiniName {
    font-size: .8rem;
    font-weight: 600;
    color: var(--rc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 92px;
}
.__RcV2 .__RcLbMiniPts {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--rc-muted);
}
.__RcV2 .__RcLbMiniPts img { width: 12px; height: 12px; object-fit: contain; }

/* Show all — a chip like the user badges, after the last top-3 user */
.__RcV2 .__RcLbShowAll {
    flex: 0 0 auto;
    align-self: stretch;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    color: var(--rc-ink);
    font-size: .82rem;
    font-weight: 600;
    background: #ffffff;
}
.__RcV2 .__RcLbShowAll:hover { background: #f6f7f9; }
.__RcV2 .__RcLbShowAll svg { flex: 0 0 auto; }

.__RcV2 .__RcLbRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: nowrap;
}
.__RcV2 .__RcLbPodium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 26px;
}
.__RcV2 .__RcLbPlace {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}
.__RcV2 .__RcLbAvatar { position: relative; line-height: 0; }
.__RcV2 .__RcLbFace {
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: #fff;
    border: 3px solid #c0c7d0;
}
.__RcV2 .__RcLbMedal {
    position: absolute;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
}
/* Lange Namen einzeilig abschneiden, sonst brechen sie im Podium um und
   schieben Punktestand und Medaille auseinander. Die Breite haengt am
   Avatar der jeweiligen Stufe. */
.__RcV2 .__RcLbName {
    font-weight: 700;
    font-size: .95rem;
    color: var(--rc-ink);
    max-width: 96px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.__RcV2 .__RcLbPlace { min-width: 0; }
.__RcV2 .__RcLbPlace.__Rank1 .__RcLbName { max-width: 122px; }
.__RcV2 .__RcLbPts {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--rc-muted);
}
.__RcV2 .__RcLbPts img { width: 14px; height: 14px; object-fit: contain; }

/* per-rank sizes + ring colours */
.__RcV2 .__RcLbPlace.__Rank1 .__RcLbFace { width: 92px; height: 92px; border-color: #f5c518; }
.__RcV2 .__RcLbPlace.__Rank2 .__RcLbFace { width: 66px; height: 66px; border-color: #c0c7d0; }
.__RcV2 .__RcLbPlace.__Rank3 .__RcLbFace { width: 66px; height: 66px; border-color: #cd7f32; }
.__RcV2 .__RcLbPlace.__Rank1 .__RcLbName { font-size: 1.05rem; }

/* daily challenge + countdown, kept on one line */
.__RcV2 .__RcLbChallenge {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}
.__RcV2 .__RcLbChallengeTitle {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    max-width: 130px;
}
.__RcV2 .__RcLbChallenge .__Countdown {
    display: flex;
    align-items: center;
    background: #ffffff !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 0.5rem 0 1rem !important;
}
.__RcV2 .__RcLbChallenge .__Countdown .__CountdownTitle span {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    white-space: nowrap;
    line-height: 1.1;
}

/* ---------- Leaderboard dialog modal ---------- */
.__RcV2.__RcLbModal { padding: 0 18px 22px; }

/* Big podium in the modal — larger avatars, thicker rings, bigger medal */
.__RcV2 .__RcLbPodiumModal { margin: 8px 0 28px; gap: 28px; }
.__RcV2 .__RcLbPodiumModal .__RcLbPlace { gap: 18px; }
.__RcV2 .__RcLbPodiumModal .__RcLbFace { border-width: 4px; }
.__RcV2 .__RcLbPodiumModal .__RcLbPlace.__Rank1 .__RcLbFace { width: 114px; height: 114px; }
.__RcV2 .__RcLbPodiumModal .__RcLbPlace.__Rank2 .__RcLbFace,
.__RcV2 .__RcLbPodiumModal .__RcLbPlace.__Rank3 .__RcLbFace { width: 84px; height: 84px; }
.__RcV2 .__RcLbPodiumModal .__RcLbMedal { width: 34px; height: 34px; bottom: -13px; }
.__RcV2 .__RcLbPodiumModal .__RcLbName { font-size: 1.15rem; max-width: 104px; }
.__RcV2 .__RcLbPodiumModal .__RcLbPlace.__Rank1 .__RcLbName { font-size: 1.3rem; max-width: 134px; }
.__RcV2 .__RcLbPodiumModal .__RcLbPts { font-size: .95rem; gap: 5px; }
.__RcV2 .__RcLbPodiumModal .__RcLbPts img { width: 17px; height: 17px; }

.__RcV2 .__RcLbCurrent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(20, 22, 30, 0.05), 0 8px 24px rgba(20, 22, 30, 0.04);
}
.__RcV2 .__RcLbCurrentText { font-weight: 600; }
.__RcV2 .__RcLbCurrentPos {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.__RcV2 .__RcLbCurrentPos b { font-size: 1.15rem; font-weight: 700; }
.__RcV2 .__RcLbCurrentUp {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #d6f5e0;
}
.__RcV2 .__RcLbCurrentUp svg { display: block; }

.__RcV2 .__RcLbList { display: flex; flex-direction: column; gap: 8px; }

/* Cutoff hint between rank 10 and 11 — only top 10 win */
.__RcV2 .__RcLbCutoff {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 4px;
}
.__RcV2 .__RcLbCutoff::before,
.__RcV2 .__RcLbCutoff::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px dashed #b7bdc7;
}
.__RcV2 .__RcLbCutoff span {
    flex: 0 0 auto;
    font-size: .78rem;
    font-weight: 700;
    color: var(--rc-ink);
    white-space: nowrap;
}
.__RcV2 .__RcLbListItem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #ffffff;
    border-radius: 12px;
    text-decoration: none;
    color: var(--rc-ink);
    transition: background .15s ease;
}
.__RcV2 .__RcLbListItem:hover { background: #f6f7f9; }
.__RcV2 .__RcLbListRank {
    flex: 0 0 26px;
    text-align: center;
    font-weight: 700;
    color: var(--rc-muted);
}
.__RcV2 .__RcLbListRank img { vertical-align: middle; }
.__RcV2 .__RcLbListAvatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}
.__RcV2 .__RcLbListName {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.__RcV2 .__RcLbVip { width: 18px; height: 18px; }
.__RcV2 .__RcLbListPts {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}
.__RcV2 .__RcLbListPts img { width: 22px; height: 22px; object-fit: contain; }

/* ---------- Tab panes ---------- */
.__RcV2 .__RcInner {
    max-width: var(--rc-inner);
    margin: 0 auto;
}
.__RcV2 .__RcPane { padding: 28px 8px 40px; }

/* Mini TedlCash offers strip (compact Swiper, game-item style arrows) */
.__RcV2 .__RcMiniOffersWrap {
    position: relative;
    margin-bottom: 22px;
}
.__RcV2 .__RcMiniSwiper { overflow: hidden; }
.__RcV2 .__RcMiniSlide { width: auto; height: auto; }
.__RcV2 .__RcMiniOffer {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px 7px 7px;
    background: #f3f4f6;
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s ease;
}
.__RcV2 .__RcMiniOffer:hover { background: #eceef1; }

/* Arrows — same look as the game item content slider */
.__RcV2 .__RcMiniOffersWrap > .swiper-button-prev,
.__RcV2 .__RcMiniOffersWrap > .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    --swiper-navigation-size: 12px;
    --swiper-navigation-color: #444;
    background: #f0f0f0;
    border: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.__RcV2 .__RcMiniOffersWrap > .swiper-button-prev:hover,
.__RcV2 .__RcMiniOffersWrap > .swiper-button-next:hover {
    background: #e2e2e2;
    --swiper-navigation-color: #000;
}
.__RcV2 .__RcMiniOffersWrap > .swiper-button-prev.swiper-button-disabled,
.__RcV2 .__RcMiniOffersWrap > .swiper-button-next.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}
.__RcV2 .__RcMiniOffersWrap > .swiper-button-prev.swiper-button-lock,
.__RcV2 .__RcMiniOffersWrap > .swiper-button-next.swiper-button-lock {
    display: flex;
    opacity: 0;
    pointer-events: none;
}
.__RcV2 .__RcMiniOffersWrap > .swiper-button-prev::after,
.__RcV2 .__RcMiniOffersWrap > .swiper-button-next::after {
    font-size: 10px;
    font-weight: 700;
    font-family: swiper-icons;
}
.__RcV2 .__RcMiniOffersWrap > .swiper-button-prev { left: -12px; }
.__RcV2 .__RcMiniOffersWrap > .swiper-button-next { right: -12px; }
.__RcV2 .__RcMiniIcon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
}
.__RcV2 .__RcMiniText {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.__RcV2 .__RcMiniName {
    font-size: .78rem;
    font-weight: 600;
    color: var(--rc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}
.__RcV2 .__RcMiniPayout {
    font-size: .72rem;
    font-weight: 600;
    color: #16a34a;
}

/* Large auto-sliding TedlCash box (vertical Swiper) */
.__RcV2 .__RcBigOfferBox {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20, 22, 30, 0.05), 0 8px 24px rgba(20, 22, 30, 0.04);
    padding: 20px 22px;
}
.__RcV2 .__RcBigSwiper { height: 128px; overflow: hidden; }
.__RcV2 .__RcBigSwiper .swiper-wrapper { flex-direction: column; }
.__RcV2 .__RcBigSwiper .swiper-slide { height: 128px; }
.__RcV2 .__RcBigOffer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 100%;
}
.__RcV2 .__RcBigOffer .__RcTaskBody {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}
/* No blue glow inside the rotating box (it would bleed into the next slide) */
.__RcV2 .__RcBigOffer .__RcTaskBtn { box-shadow: none; }

/* Offer name: single line, then truncate */
.__RcV2 .__RcBigOffer .__RcTaskTitle {
    display: block;
    -webkit-line-clamp: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Section header as a centered divider: --- text --- */
.__RcV2 .__RcSectionHead {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 34px 0 30px;
}
.__RcV2 .__RcSectionHead::before,
.__RcV2 .__RcSectionHead::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid #e4e7ec;
}
.__RcV2 .__RcSectionTitle {
    flex: 0 0 auto;
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-align: center;
}
.__RcV2 .__RcSectionSub {
    margin-top: 4px;
    font-size: .95rem;
    color: var(--rc-muted);
}

/* ---------- Task cards (Google Play style grid) ---------- */
.__RcV2 .__RcTasks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.__RcV2 .__RcTaskCard,
.__RcV2 .__RcBigOfferBox { min-width: 0; }

/* Chrome extension promo card — vertical rotating title */
.__RcV2 .__RcPluginSwiper {
    width: 100%;
    height: 28px;
    overflow: hidden;
}
.__RcV2 .__RcPluginSwiper .swiper-wrapper { flex-direction: column; }
.__RcV2 .__RcPluginSwiper .swiper-slide {
    height: 28px;
    display: flex;
    align-items: center;
}
/* single line so the title-to-button gap matches the other cards */
.__RcV2 .__RcPluginSwiper .__RcTaskTitle {
    -webkit-line-clamp: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 1.05rem;
}
.__RcV2 .__RcTaskCard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 22px;
    min-height: 150px;
    box-shadow: 0 1px 2px rgba(20, 22, 30, 0.05), 0 8px 24px rgba(20, 22, 30, 0.04);
}
.__RcV2 .__RcTaskBody {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
.__RcV2 .__RcTaskPill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 6px 14px 6px 8px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    color: #555c68;
}
.__RcV2 .__RcTaskPill span { display: inline-flex; align-items: center; line-height: 1; }
.__RcV2 .__RcPillCoin { width: 24px; height: 24px; object-fit: contain; display: block; }

/* Plus double-points badge (crown + x2) — inline inside the pill */
.__RcV2 .__RcPlusBadge {
    flex: 0 0 auto;
    width: 48px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, .5);
    background: linear-gradient(180deg, rgb(255, 90, 75) 0%, rgb(252, 27, 89) 100%);
    border-radius: 100px;
}
.__RcV2 .__RcPlusBadge img { display: block; }
.__RcV2 .__RcPlusBadge.Gray { filter: grayscale(100%); cursor: pointer; }

.__RcV2 .__RcTaskTitle {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rc-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.__RcV2 .__RcTaskBtn {
    appearance: none;
    border: none;
    background: #0012ff;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 10px 24px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 18, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .12);
    transition: transform .12s ease, filter .18s ease;
}
.__RcV2 .__RcTaskBtn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.__RcV2 .__RcTaskBtn:active { transform: translateY(0); }

/* Erledigter Task im Completed-Tab: gleiche Pille, aber grau und ohne Aktion */
.__RcV2 .__RcTaskBtn.__IsDone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef0f4;
    color: #6b7280;
    box-shadow: none;
    cursor: default;
}
.__RcV2 .__RcTaskBtn.__IsDone:hover { transform: none; filter: none; }

/* Push-Benachrichtigungen als Task-Box. Die Karte traegt zusaetzlich die alte
   Klasse .__RewardCenterNotification (fuer das slideUp nach dem Aktivieren),
   deren Styles aus playtoearn.css werden hier zurueckgesetzt - das mobile
   padding steht dort mit !important, deshalb auch hier eins. */
.__RcV2 .__RcNotifyCard {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 22px !important;
    gap: 16px;
}
.__RcV2 .__RcNotifyCard .setNotificationLoadingButton { display: flex; align-items: center; min-height: 42px; }
.__RcV2 .__RcNotifyCard .loadingSpinner { margin: 0; }
.__RcV2 .__RcNotifyStub { display: none; }

/* Completed-Tab ohne Eintraege */
.__RcV2 .__RcEmpty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #ffffff;
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 1px 2px rgba(20, 22, 30, 0.05), 0 8px 24px rgba(20, 22, 30, 0.04);
}
.__RcV2 .__RcEmptyIcon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #9aa0ad;
}
.__RcV2 .__RcEmptyTitle { font-size: 1.1rem; font-weight: 600; color: var(--rc-ink); }
.__RcV2 .__RcEmptyText { font-size: .9rem; color: var(--rc-muted); }

.__RcV2 .__RcTaskIcon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    align-self: center;
}
.__RcV2 .__RcTaskIcon img {
    width: 104px;
    height: 104px;
    object-fit: contain;
    border-radius: 20px;
}

/* ---------- Responsive (single template, mobile takes over) ---------- */
@media (max-width: 720px) {
    .__RcV2 .__RcHeader {
        flex-wrap: wrap;
        gap: 16px 20px;
        padding: 22px 18px;
    }
    .__RcV2 .__RcMedal { width: 84px; height: 84px; }
    .__RcV2 .__RcAside {
        order: -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .__RcV2 .__RcMeta { flex-basis: 100%; }
    .__RcV2 .__RcLevelName { font-size: 1.6rem; }

    /* ---------- Mobile-Kopf im Stil der Google-Play-Points-Karte ---------- */
    .__RcV2 .__RcHeaderBar { display: none; }
    .__RcV2 .__RcMobHead {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 14px 16px 20px;
    }

    /* Aktionszeile: nur die per JS eingehaengten Icons, rechtsbuendig.
       Redeem sitzt hier nicht mehr, das laeuft ueber den Tab. */
    .__RcV2 .__RcMobBar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        min-height: 38px;
    }
    .__RcV2 .__RcMobActions { display: flex; align-items: center; }
    .__RcV2 .__RcMobActions .__RcTabActions { margin-left: 0; gap: 8px; }
    .__RcV2 .__RcMobActions .__RcTabNotif { width: 36px; height: 36px; }
    /* Glocke zuerst, dann das Geschenk. Die Glocke haengt direkt an
       .__RcTabActions, das Geschenk steckt in .__RcTabDaily. */
    .__RcV2 .__RcMobActions .__RcTabActions > .__RcTabNotif { order: -1; }
    /* Die Icons duerfen naeher an den Rand als der restliche Kopf */
    .__RcV2 .__RcMobBar { width: calc(100% + 8px); margin-right: -8px; }

    .__RcV2 .__RcMobHello {
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: -.01em;
        color: var(--rc-ink);
        text-align: center;
    }

    /* Namens-Chip unter der Begruessung */
    .__RcV2 .__RcMobChip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #f3f4f6;
        border-radius: 999px;
        padding: 5px 16px 5px 5px;
        font-size: .95rem;
        font-weight: 600;
        color: var(--rc-ink);
    }
    .__RcV2 .__RcMobChip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }

    /* Punkte-Karte: Medaille links, Titel/Balance, Balken, Restweg */
    .__RcV2 .__RcMobCard {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        background: #f3f4f6;
        border-radius: 16px;
        padding: 14px 16px;
        cursor: pointer;
        transition: background .15s ease, transform .12s ease;
    }
    .__RcV2 .__RcMobCard:active { background: #eaecf0; transform: scale(.995); }
    /* Gleiches Lottie wie im Desktop-Kopf, nur klein. Kein Kreis dahinter,
       die Animation bringt ihre eigene Form mit. */
    .__RcV2 .__RcMobMedal {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        margin: -6px 0;
    }
    .__RcV2 .__RcMobMedalLottie { width: 100%; height: 100%; }
    .__RcV2 .__RcMobMedal svg { width: 100%; height: 100%; display: block; }
    .__RcV2 .__RcMobBody { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
    .__RcV2 .__RcMobLine {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .__RcV2 .__RcMobTitle {
        font-size: .98rem;
        font-weight: 700;
        color: var(--rc-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .__RcV2 .__RcMobBalance {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 1rem;
        font-weight: 800;
        color: var(--rc-ink);
    }
    .__RcV2 .__RcMobBalance img { width: 18px; height: 18px; object-fit: contain; }
    .__RcV2 .__RcMobBar2 {
        position: relative;
        height: 7px;
        border-radius: 999px;
        background: #dfe2e8;
        overflow: hidden;
    }
    .__RcV2 .__RcMobBarFill {
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, #00c03e 0%, #00a834 100%);
    }
    .__RcV2 .__RcMobFoot { font-size: .78rem; color: var(--rc-muted); }
    .__RcV2 .__RcMobRemain {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .__RcV2 .__RcMobRemain b { color: var(--rc-ink); font-weight: 700; }
    .__RcV2 .__RcMobRatio { flex: 0 0 auto; font-weight: 600; }
    /* Das Daily-Collect-Dropdown haengt mit right:0 am Icon und ist auf dem
       Desktop fix 440px breit. Auf dem Handy nimmt es fast die volle Breite
       und die Tages-Kacheln werden etwas groesser. */
    .__RcV2 .__RcTabDaily .__BoxInfo .arrow_box {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        padding: 1.15rem !important;
    }
    /* Sieben Tage passen nebeneinander nicht mehr aufs Display: aus dem
       7-Spalten-Raster wird eine horizontale Scroll-Leiste mit fixer
       Kachelbreite. Scrollbalken bleibt unsichtbar, wie im Rest der Seite. */
    .__RcV2 .__RcTabDaily .__BoxInfo .__DailyTaskItems {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 0 !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .__RcV2 .__RcTabDaily .__BoxInfo .__DailyTaskItems::-webkit-scrollbar {
        width: 0;
        height: 0;
        background: transparent;
    }
    /* Das x2-Badge haengt normal ueber der ersten Kachel. Der Scroll-Container
       wuerde es abschneiden (overflow-y wird durch overflow-x zu hidden),
       deshalb sitzt es hier innen in der Ecke der ersten Kachel. */
    .__RcV2 .__RcTabDaily .__BoxInfo .__DailyTaskItems .__DailyTaskItemsPlus {
        top: 2px !important;
        left: 2px !important;
        z-index: 3;
    }
    /* earn.css wird nach dieser Datei geladen und setzt dort
       .__DailyTask .__DailyTaskItems .__DailyTaskItem { width: 100% !important },
       deshalb muss die Kachelbreite hier ebenfalls !important sein - sonst
       ist immer nur eine Kachel im Sichtfenster. */
    .__RcV2 .__RcTabDaily .__BoxInfo .__DailyTaskItem {
        flex: 0 0 auto !important;
        width: 66px !important;
        min-width: 66px !important;
        height: auto !important;
        scroll-snap-align: start;
        padding: 0.45rem 0.15rem !important;
    }
    .__RcV2 .__RcTabDaily .__BoxInfo .__DailyTaskItem .__Coin { width: 50px !important; height: 50px !important; }
    .__RcV2 .__RcTabDaily .__BoxInfo .__DailyTaskItem .__Coin img { width: 50px !important; height: 50px !important; }
    .__RcV2 .__RcTabDaily .__BoxInfo .__DailyTaskItem .__Reward { font-size: 0.78rem !important; }
    .__RcV2 .__RcTabs { gap: 22px; overflow-x: auto; }
    .__RcV2 .__RcTab { white-space: nowrap; }

    .__RcV2 .__RcTasks { grid-template-columns: 1fr; }
    .__RcV2 .__RcSectionTitle { font-size: 1.3rem; }

    .__RcV2 .__RcLbRow { flex-wrap: wrap; gap: 12px; }
    .__RcV2 .__RcLbMiniList { flex-wrap: wrap; }

    /* Draw-in-Countdown: auf dem Handy frisst der Zaehler sonst die halbe
       Zeile und drueckt die Top-3-Chips zusammen. Nur hier verkleinert,
       Desktop bleibt wie es ist. Die Basiswerte stehen in
       playtoearnrewards.css (.__Countdown #countdown ...), deshalb
       !important. */
    .__RcV2 .__RcLbChallenge .__Countdown { padding: 0 0 0 0.6rem !important; }
    .__RcV2 .__RcLbChallenge .__Countdown .__CountdownTitle span { font-size: 0.75rem !important; }
    .__RcV2 .__RcLbChallenge .__Countdown #countdown { gap: 0.1rem; }
    .__RcV2 .__RcLbChallenge .__Countdown #countdown .__TimeItem { padding: 0.25rem 0.15rem !important; }
    .__RcV2 .__RcLbChallenge .__Countdown #countdown .__TimeItem .__Value { font-size: 0.85rem !important; }
    .__RcV2 .__RcLbChallenge .__Countdown #countdown .__TimeItem .__Label { font-size: 0.6rem !important; margin-top: 0.05rem !important; }

    /* Native Scrollbalken auf dem Handy unsichtbar machen: die Tab-Leiste
       scrollt horizontal und bekommt sonst den grauen Standard-Balken quer
       unter die Tabs, dazu der Seiten-Balken rechts. Beides transparent und
       auf 0 gesetzt. Die Datei wird nur auf /earn (v2) geladen, das bleibt
       also lokal auf dieser Seite.
       scrollbar-width deckt Firefox und neues Chrome ab, die ::-webkit-Regeln
       die aelteren WebKits. */
    html,
    body,
    .__RcV2,
    .__RcV2 .__RcTabs {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    .__RcV2 ::-webkit-scrollbar,
    .__RcV2 .__RcTabs::-webkit-scrollbar {
        width: 0;
        height: 0;
        background: transparent;
    }
    html::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb,
    .__RcV2 ::-webkit-scrollbar-thumb,
    .__RcV2 .__RcTabs::-webkit-scrollbar-thumb {
        background: transparent;
    }
    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track,
    .__RcV2 ::-webkit-scrollbar-track,
    .__RcV2 .__RcTabs::-webkit-scrollbar-track {
        background: transparent;
    }
}