/* Rewards System (docs/rewards-system-implementation-plan.md) - all styling for the hub shell and
   its 3 tabs (Daily/Online/Activities) lives in this one file, rather than the inline <style>
   block rewards-interface.html started with, for easier management as the system grows. */

.rewards-interface {
    width: 100%;
    max-width: 460px;
}

div#rewards-interface-header {
    height: 100px;
    border-radius: 5px;
    background-color: #864ac3;
    text-shadow: 0 1px 2px #00000057;
    margin: 2px;
    position: relative;
    background-image: url(../images/ui-elements/rewards-bg.png);
    background-position: center;
    background-repeat: no-repeat;
}

#rewards-interface-header img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
}

/* Reset countdown - Daily/Online/Activities all share the same Singapore-midnight boundary, so this
   sits above the tabs (not inside any one of them) and stays visible no matter which tab is active. */
#rewards-reset-countdown {
    margin: -5px 2px 6px;
    text-align: center;
    padding: 10px;
    background: #e8d1ff;
    border-radius: 0 0 5px 5px;
    box-shadow: inset 0px 0px 5px #00000033;
}

#rewards-reset-countdown-text {
    font-size: 12px;
    font-weight: 600;
    color: #6e4795;
    margin-bottom: 3px;
}

#rewards-reset-countdown-track {
    height: 8px;
    border-radius: 4px;
    background: #ffffff;
    overflow: hidden;
    border: 2px solid #FFF;
}

#rewards-reset-countdown-fill {
    height: 100%;
    border-radius: 3px;
    /* width/background-color set per-tick in JS (rewardsInterface.js) - transition just smooths the
       drain between ticks instead of it visibly jumping once a second. */
    transition: width 1s linear, background-color 0.4s ease;
}

#rewards-reset-countdown-fill.reset-countdown-green {
    background: linear-gradient(to bottom, #16c987 0%, #0e9161 100%);
}

#rewards-reset-countdown-fill.reset-countdown-orange {
    background: linear-gradient(to bottom, #febb40 0%, #d98a2b 100%);
}

#rewards-reset-countdown-fill.reset-countdown-red {
    background: linear-gradient(to bottom, #ff7e9b 0%, #e5466a 100%);
}

.rewards-interface .ui-tabs-nav li a {
    font-size: 14px;
    font-weight: 600;
    padding: 10px 10px;
    border-radius: 5px;
    background: #ededed;
}

.rewards-interface .ui-tabs-nav li.ui-state-active a {
    background: #864ac3;
    color: #FFF;
}

.rewards-interface .ui-tabs-nav {
    overflow: visible;
    padding-bottom: 0;
    margin: 2px;
}

.rewards-interface .ui-tabs-nav li {
    position: relative;
}

/* Fixed height + its own scroll, rather than letting the modal grow with content length -
   Upcoming Rewards/Milestone path can add a lot of vertical space depending on what's in
   rotation, and the hub itself needs to stay a predictable, on-screen size. Overrides the base
   .ui-tabs-panel's display:flex/justify-content:center (style.css) - that flex-centers its single
   child as one shrink-wrapped item, which combined with the day rails' large natural content
   width (35 cards wide before their own overflow-x:auto ever gets a chance to constrain anything)
   made the whole tab balloon out and get clipped on both edges. Block layout lets each tab's
   content take the panel's full width instead, so nested scrolling behaves properly. */
.rewards-interface .ui-tabs-panel {
    display: block;
    height: min(520px, 70vh);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 7px 0 0px;
    width: calc(100% - 7px);
    margin: 5px 0 0 0;
}

/* Match the game-standard scrollbar (see change-look.css, shop.css, etc.): light grey track,
   black thumb, 8px. Keeps the hub's vertical bar consistent with every other interface. */
.rewards-interface .ui-tabs-panel::-webkit-scrollbar-track {
    background-color: #cfcfcf;
    border-radius: 5px;
}

.rewards-interface .ui-tabs-panel::-webkit-scrollbar-thumb {
    background-color: #000;
    border-radius: 4px;
}

.rewards-interface .ui-tabs-panel::-webkit-scrollbar {
    width: 8px;
}

.rewards-interface .ui-tabs-panel > div {
    width: calc(100% - 6px);
}

.rewards-tab-unread-notification {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 1;
}

.rewards-empty-container {
    background: #EFEFEF;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #333;
    box-shadow: inset 0 1px 6px #0000004a;
    border-radius: 10px;
    padding: 20px;
    font-size: 14px;
    text-align: center;
}

/* Shared progress bar - reused by Daily's own meter, Online's daily-active-time summary, and
   Activities' per-slot progress. */
.rewards-progress-track {
    background: #ededed;
    border-radius: 10px;
    height: 15px;
    overflow: hidden;
    box-shadow: inset 0 1px 4px #00000030;
    margin-bottom: 4px;
}

.rewards-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(to bottom, #16c987 0%, #0e9161 100%);
    transition: width 0.5s ease;
}

.rewards-progress-fill.complete {
    background: linear-gradient(to bottom, #16c987 0%, #0e9161 100%);
}

button.rewards-claim-button {
    border: 2px solid #000;
    background: #000;
    color: #FFF;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 10px;
    height: 46px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1em;
    cursor: pointer;
    text-shadow: 0 1px 1px #00000057;
}

button.rewards-claim-button:hover {
    background: #3c3c3c;
}

button.rewards-claim-button:disabled {
    background: #d7d7d7;
    color: #757575;
    text-shadow: none;
    cursor: not-allowed;
    box-shadow: inset 0px 0px 4px #0000003b;
    border: none;
}

button.rewards-claim-button.claimed {
    background: #43a047;
}

/* ---------------------------------------------------------------------------
   Daily tab
--------------------------------------------------------------------------- */

.rewards-daily-container {
    padding: 3px;
}

.rewards-daily-card {
    background: #FFF;
    border-radius: 14px;
    box-shadow: 0 1px 5px -1px #0000009e;
    padding: 16px;
    margin-bottom: 16px;
}

/* First element in the card - a full-width, centered streak banner with a continuously flowing
   red/orange gradient plus a soft breathing glow. Kept slow and subtle so it reads as "alive"
   and premium without being distracting.

   Ping-pong motion via `animation-direction: alternate` (rewardsStreakFlow below), not a
   one-directional loop - the gradient sweeps to one extreme then reverses back to the other,
   forever. This is what actually makes it seamless: alternate reverses direction AT the end frame
   rather than jumping back to a start frame, so there is structurally no discontinuity to hide -
   unlike a one-way loop, which needs the end frame and start frame to render pixel-identical (hard
   to guarantee, especially for a diagonal gradient) or the reset is visible. Works with the
   diagonal -45deg angle for exactly that reason - no gradient-tiling trick required. */
.rewards-daily-streak-badge {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #FFF;
    margin-bottom: 12px;
    padding: 10px 10px 8px 10px;
    background: linear-gradient(-45deg, #e1002d 0%, #ff8700 50%, #e1002d 100%);
    background-size: 600% 600%;
    animation: rewardsStreakFlow 2s ease-in-out infinite alternate, rewardsStreakGlow 2s ease-in-out infinite;
    border-radius: 6px;
    text-shadow: 0px 1px 1px #000;
    line-height: 1em;
    border-bottom: 1px solid #00000063;
}

/* Shared sprite base for reward-system icons (reward-system-icon-spritesheet.png), replacing the
   emoji previously used inline. Each icon gets its own modifier class here setting only
   width/height/background-position to its coordinates in the sheet - add one per icon as the
   sheet grows, rather than repeating the shared image/repeat/vertical-align declarations. Mirrors
   the existing sprite pattern in shop.css (gem-shop-icons.png). */
.rewards-icon {
    display: inline-block;
    background-image: url(../images/ui-elements/reward-system-icon-spritesheet.png);
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 6px;
}

.rewards-icon-streak {
    width: 22px;
    height: 26px;
    background-position: 0 0;
}

.rewards-icon-claim {
    width: 19px;
    height: 25px;
    background-position: -22px 1px;
    animation: rewardsIconClaimBounce 0.8s ease-in-out infinite;
    will-change: transform;
    image-rendering: crisp-edges;
}

@keyframes rewardsIconClaimBounce {
    0%, 40%, 100% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-2px);
    }
}

.rewards-icon-lock {
    width: 17px;
    height: 21px;
    background-position: -41px 0;
}

.rewards-icon-claimed {
    width: 16px;
    height: 16px;
    background-position: 0px -26px;
}

.rewards-icon-farming {
    width: 50px;
    height: 50px;
    background-position: -58px 0;
}

.rewards-icon-fishing {
    width: 50px;
    height: 50px;
    background-position: -108px 0;
}

.rewards-icon-apartments {
    width: 50px;
    height: 50px;
    background-position: -158px 0;
}

.rewards-icon-combat {
    width: 50px;
    height: 50px;
    background-position: -208px 0;
}

.rewards-icon-yarnbloom {
    width: 50px;
    height: 50px;
    background-position: -58px -50px;
}

.rewards-icon-social-likes {
    width: 50px;
    height: 50px;
    background-position: -108px -50px;
}

.rewards-icon-gopher {
    width: 50px;
    height: 50px;
    background-position: -158px -50px;
}

.rewards-icon-completion-bonus {
    width: 50px;
    height: 50px;
    background-position: -258px 0;
}

.rewards-icon-permanent {
    width: 50px;
    height: 50px;
    background-position: -308px 0;
}

.rewards-icon-upcoming {
    width: 31px;
    height: 30px;
    background-position: -358px 0;
}

.rewards-icon-milestone {
    width: 31px;
    height: 30px;
    background-position: -389px 0;
}

@keyframes rewardsStreakFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes rewardsStreakGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(243, 102, 0, 0.45); }
    50% { box-shadow: 0 0 13px rgba(255, 130, 20, 0.8); }
}

.rewards-daily-card-heading {
    font-size: 14px;
    font-weight: 700;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    background: #864ac3;
    padding: 6px;
    border-radius: 8px 8px 0 0;
    text-shadow: 0px 1px 0px #000;
}

.rewards-daily-subtitle {
    font-size: 11px;
    color: #ffffff;
    text-align: center;
    background: #b18cd7;
    padding: 4px 4px 5px 4px;
}

/* Stacked - one reward per row, content left-aligned: icon, quantity, name. */
.rewards-daily-items-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px;
    background: #f0e6f9;
    padding: 12px 12px;
    border-radius: 0 0 8px 8px;
    box-shadow: inset 0px 0px 4px #00000042;
    border: 1px solid #a585c5;
    border-top: none;
}

.rewards-daily-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    min-width: 0;
    background: #FFF;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0px 1px 2px #0000004d;
}

.rewards-daily-item-icon {
    width: 70px;
    height: 70px;
    border-radius: 7px;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000;
    margin-right: 5px;
}

.rewards-daily-item-icon img {
    object-fit: contain;
}

.rewards-daily-item-quantity {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.rewards-daily-item-label {
    font-size: 14px;
    color: #414141;
    padding-bottom: 2px;
}

.rewards-daily-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.rewards-daily-progress-value {
    color: #666;
    font-weight: 600;
}

/* Elapsed active time only (the "2" in "2 / 10 min") - the rest of the value stays grey. */
.rewards-daily-progress-elapsed {
    color: #0e9161;
}

.rewards-daily-helper-text {
    font-size: 12px;
    color: #8d8d8d;
    margin: 5px 0 14px;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Day rails (Daily tab) - shared between "Upcoming Rewards" (every day) and "Milestone path"
   (named milestones only). Both horizontally scrollable, same card style, per the user's
   explicit ask that the two sections look visually identical.
--------------------------------------------------------------------------- */

.rewards-day-rail-section {
    margin-bottom: 10px;
}

.rewards-day-rail-header {
    margin-bottom: 8px;
    padding: 0 2px;
}

.rewards-day-rail-title {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    color: #333;
}

.rewards-day-rail-subtitle {
    font-size: 11px;
    color: #8d8d8d;
}

.rewards-day-rail-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    cursor: grab;
}

/* Active click-and-drag pan (setupDayRailDragScroll, rewardsInterface.js) - free scrolling with no
   snap, so the drag stops exactly where the pointer is released; text/image selection suppressed. */
.rewards-day-rail-scroll.dragging {
    cursor: grabbing;
    user-select: none;
}

/* Horizontal day-rail bar, matched to the same game-standard scrollbar as above. */
.rewards-day-rail-scroll::-webkit-scrollbar {
    height: 8px;
}

.rewards-day-rail-scroll::-webkit-scrollbar-thumb {
    background-color: #000;
    border-radius: 4px;
}

.rewards-day-rail-scroll::-webkit-scrollbar-track {
    background-color: #cfcfcf;
    border-radius: 5px;
}

.rewards-day-card {
    background: #FFF;
    border-radius: 12px;
    box-shadow: 0 1px 5px #00000040;
    padding: 6px 9px 9px 9px;
    min-width: 150px;
    max-width: 150px;
    flex-shrink: 0;
    border-top: 3px solid transparent;
}

.rewards-day-card.next {
    border-top-color: #e53935;
    background: #fff6f5;
}

.rewards-day-card.milestone:not(.next) {
    border-top-color: #ffb300;
}

.rewards-day-card.completed {
    opacity: 0.6;
}

.rewards-day-card-header {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 8px;
    align-items: center;
    justify-items: center;
}

#rewards-parent .rewards-day-card-day {
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
    background: #000;
    color: #FFF;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.rewards-day-card.next .rewards-day-card-day {
    color: #e53935;
}

#rewards-parent .rewards-day-card-milestone-tag {
    background: #ffb300;
    color: #FFF;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 5px 2px;
    border-radius: 4px;
    line-height: 1em;
}

/* Major milestones (every 35 days) get a red tag instead of the gold "Milestone" one. */
#rewards-parent .rewards-day-card-milestone-tag.major {
    background: #e1002d;
}

.rewards-day-card-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
    min-height: 24px;
}

.rewards-day-card-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}

.rewards-day-card-item span {
    font-size: 12px;
}

.rewards-day-card-item-icon {
    background: #FFF;
    box-shadow: 0px 1px 2px #0000008c;
    border-radius: 3px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.rewards-day-card-item img {
    width: 20px;
    height: 20px;
    min-width: 20px;
    object-fit: contain;
}

.rewards-day-card-status {
    font-size: 10px;
    color: #8d8d8d;
    border-top: 1px solid #ececec;
    padding-top: 6px;
}

.rewards-day-card.completed .rewards-day-card-status {
    color: #43a047;
    font-weight: 600;
}

.rewards-day-card.next .rewards-day-card-status {
    color: #e53935;
    font-weight: 600;
}

.rewards-milestone-footer-note {
    text-align: center;
    font-size: 11px;
    margin-top: 4px;
    background: #ffdfde;
    color: #9d4644;
    padding: 7px;
    border-radius: 5px;
    line-height: 1.2em;
}

/* ---------------------------------------------------------------------------
   Online tab
--------------------------------------------------------------------------- */

.rewards-online-container {
    padding: 4px;
}

.rewards-online-summary {
    background: #FFF;
    border-radius: 12px;
    box-shadow: 0 1px 5px #00000040;
    padding: 12px;
    margin-bottom: 12px;
}

/* Scheduled Event Participation Badges (docs/scheduled-event-badges-design.md) - a "guest" section
   living inside the Online tab, not a real Rewards hub concept. Deliberately its own class rather
   than reusing .rewards-online-summary directly, even though it looks the same, so it can never be
   mistaken for (or accidentally styled alongside) the real Online Reward data above it. */
.rewards-scheduled-events-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.rewards-scheduled-event-row {
    border-radius: 12px;
    box-shadow: 0 1px 5px #00000040;
    padding: 12px;
	background: #f4e8ff;
    border: 2px solid #864ac3;
}

.rewards-scheduled-events-summary .rewards-progress-track {
    background: #dccceb;
}

.rewards-scheduled-events-summary .rewards-progress-fill {
    background: linear-gradient(to bottom, #bf7eff 0%, #864ac3 100%);
}

.rewards-online-summary-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

.rewards-online-summary-heading strong {
    font-size: 16px;
    color: #333;
}

.rewards-online-tier-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rewards-online-tier {
    background: #FFF;
    border-radius: 12px;
    box-shadow: 0 1px 5px #00000040;
    padding: 10px 12px;
    display: flex;
    gap: 10px;
}

.rewards-online-tier.locked {
    opacity: 0.6;
}

.rewards-online-tier-hour {
    width: 40px;
    height: 40px;
    min-width: 32px;
    border-radius: 50%;
    background: #ededed;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
}

.rewards-online-tier.claimed .rewards-online-tier-hour {
    background: #7ad5b3;
    color: #FFF;
    box-shadow: inset 0px 0px 3px #00000063;
}

.rewards-online-tier.claimable .rewards-online-tier-hour {
    color: #FFF;
    box-shadow: 0px -2px 0px #ffffff;
    background: linear-gradient(to bottom, #17bf84 0%, #05734b 100%);
    text-shadow: 0px 1px 2px #000000a1;
}

.rewards-online-tier-body {
    flex: 1;
    min-width: 0;
}

.rewards-online-tier-status {
    font-size: 14px;
    text-transform: uppercase;
    color: #FFF;
    font-weight: 700;
    background: linear-gradient(45deg, #5b5b5b 0%, #919191 100%);
    padding: 5px 8px 5px 8px;
    border-radius: 5px;
    margin: 0 0 8px 0;
}

.rewards-online-tier-items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.rewards-online-tier-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    cursor: pointer;
}

.rewards-online-tier-item img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

button.rewards-online-claim-button {
    background: #000000;
    color: #FFF;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    height: 36px;
    padding: 0 10px 0 8px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    border: 2px solid #000;
    margin: 6px 0 0 0;
    width: 100%;
}

button.rewards-online-claim-button:hover {
    background: #086d48;
}

button.rewards-online-claim-button:disabled {
    background: #cfcfcf;
    color: #888;
    cursor: not-allowed;
}

.rewards-online-complete-note {
    text-align: center;
    font-size: 13px;
    color: #666;
    margin-top: 4px;
    padding: 10px;
}

.rewards-online-tier-item-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFF;
    box-shadow: 0px 1px 2px #0000008c;
    border-radius: 3px;
}

.rewards-online-tier-item span {
    padding-left: 3px;
    font-size: 12px;
}

/* Registers these two custom properties as actual <color> values (rather than untyped strings), which
   is what lets the browser smoothly interpolate them frame-by-frame during an animation - untyped
   custom properties can't be animated at all, they'd just hard-swap like the gradient itself did.
   Shared by both .rewards-online-tier.claimable and .rewards-activity-card.claimable below; each
   rule/keyframe sets its own values, so reusing the same two names between them is safe. */
@property --claim-pulse-stop-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: #ffffff;
}

@property --claim-pulse-stop-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: #ffffff;
}

.rewards-online-tier.claimable {
    border: 2px solid #0e9161;
    --claim-pulse-stop-1: #d1ffee;
    --claim-pulse-stop-2: #9be9cd;
    box-shadow: inset 0 0px 4px 2px #e3fdf4;
    background: linear-gradient(to bottom, var(--claim-pulse-stop-1) 0%, var(--claim-pulse-stop-2) 100%);
    animation: rewardsOnlineTierClaimablePulse 1s ease-in-out infinite;
}

/* Same 0%/100%-vs-50% "breathing" shape as rewardsStreakGlow above - eases from the tier's resting
   colours up to a brighter peak and back, rather than a hard cut, so it reads as a gentle pulse.
   box-shadow interpolates smoothly on its own, but a gradient inside `background` does NOT - browsers
   hard-swap between two linear-gradient() values with no in-between frames, which is what made this
   look like an abrupt state-change rather than an animation. Animating the two colour STOPS instead
   (registered as <color>-typed custom properties via @property, below) and building the gradient
   from those fixes it - the gradient text itself never changes, only the colours it references, so
   the engine can interpolate every frame like any other animated colour. */
@keyframes rewardsOnlineTierClaimablePulse {
    0%, 100% {
        border-color: #0e9161;
        box-shadow: inset 0 0px 4px 2px #e3fdf4;
        --claim-pulse-stop-1: #d1ffee;
        --claim-pulse-stop-2: #9be9cd;
    }
    50% {
        border-color: #42c796;
        box-shadow: inset 0 0px 9px 7px #fafffd;
        --claim-pulse-stop-1: #afebd5;
        --claim-pulse-stop-2: #c4ffea;
    }
}

.rewards-online-tier.claimed .rewards-online-tier-status {
    color: #FFF;
    background: linear-gradient(45deg, #38a37b 0%, #63cfa7 100%);
}

span.rewards-online-tier-item-label {
    padding-left: 0;
}

.rewards-online-summary-heading span {
    color: #000;
    font-weight: 600;
}

.rewards-online-tier.claimed {
	border: 2px solid #80c9ae;
	background: #e3fdf4;
	box-shadow: none;
}

.rewards-online-tier.claimable .rewards-online-tier-items span {
    color: #000000;
    text-shadow: -1px 1px 0px #ffffff99;
}

.rewards-online-tier.claimed .rewards-online-tier-items span {
    color: #000000;
}

.rewards-online-tier.claimable .rewards-online-tier-status {
    background: linear-gradient(45deg, #0c8759 0%, #14bf80 100%);
    box-shadow: 0px 1px 1px #000;
}

.rewards-activity-card.claimable {
    border: 2px solid #0e9161;
    --claim-pulse-stop-1: #afebd5;
    --claim-pulse-stop-2: #b1f9df;
    box-shadow: inset 0 0px 4px 2px #e3fdf4;
    background: linear-gradient(to bottom, var(--claim-pulse-stop-1) 0%, var(--claim-pulse-stop-2) 100%);
    animation: rewardsActivityCardClaimablePulse 2.4s ease-in-out infinite;
}

/* See the comment on rewardsOnlineTierClaimablePulse above for why this animates colour-typed custom
   properties instead of the background/gradient value directly. */
@keyframes rewardsActivityCardClaimablePulse {
    0%, 100% {
        border-color: #0e9161;
        box-shadow: inset 0 0px 4px 2px #e3fdf4;
        --claim-pulse-stop-1: #afebd5;
        --claim-pulse-stop-2: #b1f9df;
    }
    50% {
        border-color: #42c796;
        box-shadow: inset 0 0px 9px 7px #fafffd;
        --claim-pulse-stop-1: #afebd5;
        --claim-pulse-stop-2: #c4ffea;
    }
}

.rewards-activity-card.claimable .rewards-activity-progress-track {
    border: 1px solid #FFF;
}

button.rewards-online-claim-button:hover {
    background: #3c3c3c;
}

button.rewards-activity-claim-button:hover {
    background: #3c3c3c;
}

/* ---------------------------------------------------------------------------
   Activities tab
--------------------------------------------------------------------------- */

.rewards-activities-container {
    padding: 4px;
}

.rewards-activities-section-heading {
    font-size: 12px;
    font-weight: 700;
    color: #8d8d8d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 14px 0 9px;
}

.rewards-activities-section-heading:first-child {
    margin-top: 3px;
}

.rewards-activity-card {
    background: #FFF;
    border-radius: 12px;
    box-shadow: 0 1px 5px #00000040;
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rewards-activity-card.featured {
    border: 2px solid #864ac3;
    background: #f5effb;
}

.rewards-activity-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 1px 0px #000;
    background: linear-gradient(45deg, #5b5b5b 0%, #919191 100%);
}

.rewards-activity-icon {
    width: 50px;
    height: 50px;
    min-width: 34px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0px 1px 3px #000;
}

/* Sprite icons standing alone in the circular badge don't want the shared .rewards-icon 6px
   text-gap margin - there's no adjacent text to space from here. */
.rewards-activity-icon .rewards-icon {
    margin-right: 0;
}

.rewards-activity-card-body {
    flex: 1;
    min-width: 0;
}

.rewards-activity-name {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0px 1px 1px #000;
}

.rewards-activity-featured-tag {
    display: inline-block;
    background: #ff9700;
    color: #FFF;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 6px 3px;
    border-radius: 4px;
    margin-bottom: 3px;
    box-shadow: 0px 1px 1px #000000a3;
    text-shadow: 0 1px 0px #00000045;
}

.rewards-activity-progress-label {
    font-size: 12px;
    color: #d5d5d5;
}

.rewards-activity-progress-track {
    background: #ededed;
    border-radius: 10px;
    height: 15px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px #00000030;
    margin: 3px 0 4px;
}

.rewards-activity-progress-fill {
    height: 100%;
    background: linear-gradient(to bottom, #16c987 0%, #0e9161 100%);
}

.rewards-activity-progress-fill.complete {
    background: linear-gradient(to bottom, #16c987 0%, #0e9161 100%);
}

.rewards-activity-items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.rewards-activity-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}

.rewards-activity-item img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

button.rewards-activity-claim-button {
    background: #000000;
    color: #FFF;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    height: 36px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    border: 2px solid #000;
    margin-top: 5px;
}

button.rewards-activity-claim-button:disabled {
    background: #cfcfcf;
    color: #888;
    cursor: not-allowed;
}

.rewards-activity-card.permanent {
    background: linear-gradient(135deg, #d3f7ff 0%, #9be2f3 100%);
    border: 2px solid #0085bd;
}

/* Its own pulse for the same reason .featured.claimable has one above - the shared green
   .rewards-activity-card.claimable animation would otherwise hijack this card's colours the moment
   it becomes claimable. Uses a gradient (matching this card's own 135deg base look), so - like the
   green pulse - it animates the two stops via the shared @property-registered custom properties
   rather than the gradient value directly (plain gradients can't interpolate smoothly). */
.rewards-activity-card.permanent.claimable {
    border-color: #0085bd;
    --claim-pulse-stop-1: #d3f7ff;
    --claim-pulse-stop-2: #9be2f3;
    background: linear-gradient(135deg, var(--claim-pulse-stop-1) 0%, var(--claim-pulse-stop-2) 100%);
    box-shadow: inset 0 0px 4px 2px #eafcff;
    animation: rewardsActivityCardPermanentClaimablePulse 2.4s ease-in-out infinite;
}

@keyframes rewardsActivityCardPermanentClaimablePulse {
    0%, 100% {
        border-color: #0085bd;
        box-shadow: inset 0 0px 4px 2px #eafcff;
        --claim-pulse-stop-1: #d3f7ff;
        --claim-pulse-stop-2: #9be2f3;
    }
    50% {
        border-color: #34c1e1;
        box-shadow: inset 0 0px 9px 7px #ffffff;
        --claim-pulse-stop-1: #eafcff;
        --claim-pulse-stop-2: #c4f0fa;
    }
}

.rewards-activity-item-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFF;
    box-shadow: 0px 1px 2px #0000008c;
    border-radius: 3px;
}

.rewards-activity-item span {
    padding-left: 4px;
    font-size: 12px;
}

span.rewards-activity-item-label {
    padding-left: 0;
}

.rewards-activity-card.featured .rewards-activity-progress-track {
    background: #dccceb;
}

.rewards-activity-card.featured .rewards-activity-progress-fill {
    background: linear-gradient(to bottom, #bf7eff 0%, #864ac3 100%);
}

.rewards-activity-card.featured.claimable .rewards-activity-name {
    background: linear-gradient(to right, rgb(134 74 195) 0%, rgba(14, 145, 97, 0) 70%);
}

/* Its own pulse, not the shared green one .rewards-activity-card.claimable uses - that animation
   applies to ANY element matching its selector (including featured/permanent cards), and once an
   animation is running its keyframe-defined properties always override the cascade for those
   properties, regardless of specificity. This selector's higher specificity (3 classes vs 2) is what
   makes ITS OWN `animation:` declaration win instead, so this purple pulse plays here rather than the
   green one. A flat background-color (not a gradient like the green pulse's), so it animates natively
   with no @property trick needed. */
.rewards-activity-card.featured.claimable {
    background: #e6d5f6;
    box-shadow: inset 0 0px 4px 2px #f8f2ff;
    animation: rewardsActivityCardFeaturedClaimablePulse 2.4s ease-in-out infinite;
}

@keyframes rewardsActivityCardFeaturedClaimablePulse {
    0%, 100% {
        border-color: #864ac3;
        background: #e6d5f6;
        box-shadow: inset 0 0px 4px 2px #f8f2ff;
    }
    50% {
        border-color: #bf7eff;
        background: #f5eaff;
        box-shadow: inset 0 0px 9px 7px #ffffff;
    }
}

.rewards-activity-card.claimed {
    border: 2px solid #80c9ae;
    background: #e3fdf4;
    box-shadow: none;
}

.rewards-activity-claimed-button {
    background: #b8e1d4;
    color: #598d7b;
    text-align: center;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 1px;
    padding: 10px;
    height: auto;
    box-shadow: inset 0 0 3px #6d9b8b;
}

.rewards-activity-card.permanent.claimed{
    border: 2px solid #0085bd;
    background: linear-gradient(135deg, #d3f7ff 0%, #9be2f3 100%);
    box-shadow: none;
}

.rewards-activity-card.permanent.claimed .rewards-activity-claimed-button {
    background: #67c9df;
    color: #105667;
    box-shadow: inset 0 0 3px #3e7c8b;
}

.rewards-activity-card.claimed.featured {
    border: 2px solid #864ac3;
    background: #f5effb;
}

.rewards-activity-card.claimed.featured .rewards-activity-claimed-button {
    background: #ecddf9;
    color: #a38fb7;
    box-shadow: inset 0 0 3px #997fb5;
}

.rewards-activity-card.claimable .rewards-activity-card-top {
    background: linear-gradient(45deg, #0c8759 0%, #14bf80 100%);
}

.rewards-activity-card.claimed .rewards-activity-card-top {
    background: linear-gradient(45deg, #38a37b 0%, #63cfa7 100%);
}

.rewards-activity-card.featured .rewards-activity-card-top {
    background: linear-gradient(45deg, #864ac3 0%, #b675f7 100%);
}

.rewards-activity-card.permanent .rewards-activity-card-top {
    background: linear-gradient(45deg, #0078ab 0%, #34c1e1 100%);
}

.rewards-activity-card.claimed .rewards-activity-progress-label {
    color: #c5e9dc;
}

.rewards-activity-card.claimable .rewards-activity-progress-label {
    color: #b8e1d2;
}

.rewards-activity-card.featured .rewards-activity-progress-label {
    color: #e5d7f3;
}

.rewards-activity-card.permanent.claimable .rewards-activity-progress-label,
.rewards-activity-card.permanent .rewards-activity-progress-label {
    color: #a3e0ef;
}

.rewards-activity-card.claimed .rewards-activity-name {
    text-shadow: 0px 1px 1px #00000091;
}

.rewards-activity-card:last-of-type {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Responsive - single breakpoint, matching the convention already used across
   this UI (News, etc.) rather than a fully fluid resize.
--------------------------------------------------------------------------- */

@media(max-width:680px){
    .rewards-interface {
        max-width: calc(100vw - 50px);
        padding: 10px;
    }

    /* Day rail cards stay the same horizontally-scrolling design on mobile, just narrower so
       roughly one and a half fit in view at once (a partial peek of the next card, hinting that
       it scrolls) instead of desktop's ~2.5. */
    .rewards-day-card {
        min-width: 130px;
        max-width: 130px;
    }

    .rewards-interface .ui-tabs-panel {
        height: min(460px, 40vh);
    }

	.rewards-interface .ui-tabs-panel {
		padding: 0 2px 0 0px;
		width: calc(100% - 2px);
	}

	.rewards-interface .ui-tabs-panel::-webkit-scrollbar {
		width: 3px;
	}
}

@media(max-width:450px){    
    .rewards-online-tier {
        flex-direction: column;
        align-items: flex-start;
    }

    .rewards-online-tier-hour {
        display: none;
    }
    
    .rewards-online-tier-body {
        width: 100%;
        text-align: center;
    }
    
    .rewards-online-tier-items {
        width: 100%;
    }
    
    .rewards-online-tier-item {
        width: 100%;
    }
    
    .rewards-online-tier-status {
        margin: 0 0 9px 0;
    }

	.rewards-activity-name {
		line-height: 1.1em;
		font-size: 14px;
		margin-bottom: 2px;
	}

	.rewards-daily-subtitle {
		font-size: 9px;
	}

	#rewards-reset-countdown {
		padding: 5px;
	}

	#rewards-reset-countdown-text {
		font-size: 10px;
		margin-top: 1px;
	}

	#rewards-reset-countdown-track {
		border: 1px solid #FFF;
	}
}

@media(max-width:340px){  
	.rewards-daily-helper-text {
		font-size: 10px;
	}  
}