/* Earn: numbered reward tiles with a focused violet active state. */
#view-earn { --earn-muted: #b1aec6; --earn-accent: #b4a5ff; }
body.has-earn-task-dialog { overflow: hidden; }
#view-earn :focus-visible, .earn-task-dialog :focus-visible { outline-color: #b4a5ff; }
.earn-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: .4375rem; margin-bottom: 1.75rem; border: 1px solid #2c2c3e; border-radius: 1rem; background: #171821; position: sticky; top: 5.5rem; z-index: 12; box-shadow: 0 10px 18px -14px #000d; }
@media (max-width: 600px) { .earn-tabs { top: 4.25rem; } .earn-tile { scroll-margin-block: 9.5rem; } }
.earn-tab { display: flex; align-items: center; justify-content: center; gap: .625rem; min-width: 0; min-height: 3.25rem; padding: .75rem; color: #b5b2c9; background: transparent; border: 1px solid transparent; border-radius: .75rem; font-size: .9375rem; font-weight: 500; transition: background .18s, color .18s, border-color .18s; }
.earn-tab:hover { color: #f4f0ff; background: #222232; }
.earn-tab[aria-selected="true"] { color: #e6dfff; border-color: #554978; background: #302844; box-shadow: 0 2px 6px #0002; }
.earn-tab .icon { width: 1.25rem; height: 1.25rem; }
.earn-level-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; padding: 1rem 1.125rem; border: 1px solid #493f61; border-radius: 1rem; background: linear-gradient(115deg, #242033, #1a1a26); }
.earn-level-label { display: block; color: #aaa0c2; font-size: .75rem; letter-spacing: .08em; }
.earn-level-card strong { display: block; margin-top: .125rem; font-size: 1.25rem; color: #f1edff; }
.earn-level-card p { margin-top: .25rem; color: #aca6ba; font-size: .8125rem; }
.earn-x2-badge { display: flex; align-items: center; gap: .625rem; flex: none; padding: .5rem .75rem; border: 1px solid #7c69a0; border-radius: .75rem; color: #d9caf7; background: #382d4e; }
.earn-x2-badge b { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: #1e3728; background: #9ee7bc; border-radius: .625rem; font-size: 1rem; }
.earn-x2-badge span { font-size: .75rem; font-weight: 500; }
.earn-grid-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.earn-grid-heading h2 { display: flex; align-items: center; gap: .625rem; font-size: 1.25rem; }
.earn-grid-heading h2 .icon { color: var(--earn-accent); width: 1.5rem; height: 1.5rem; }
.earn-grid-heading p { margin-top: .375rem; color: var(--earn-muted); font-size: .875rem; }
.earn-progress { flex: none; color: #c2bcd8; font-size: .75rem; font-variant-numeric: tabular-nums; padding: .375rem .75rem; border: 1px solid #302f43; border-radius: 2rem; background: #1b1b28; }
.earn-task-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem; margin: 0; padding: 0; list-style: none; }
.earn-task-grid > li { min-width: 0; }
.earn-tile { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 12rem; aspect-ratio: 1.45; gap: .75rem; padding: 1rem; color: #aaa7bf; background: #141520; border: 1px solid #2a293c; border-radius: 1.125rem; text-align: center; transition: background .18s, border-color .18s, transform .18s, box-shadow .18s; scroll-margin-block: 11rem; }
.earn-tile-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 1.125rem; font-size: .75rem; font-variant-numeric: tabular-nums; line-height: 1.5; }
.earn-tile-number { font-weight: 500; }
.earn-tile-multiplier { margin-right: auto; padding: .125rem .375rem; border: 1px solid #638474; border-radius: .375rem; color: #a9efc3; background: #20382c; font-size: .6875rem; font-weight: 600; }
.earn-tile-state { font-size: .75rem; font-weight: 500; }
.earn-tile-main { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: .625rem; }
.earn-tile-main > .icon { width: 1.75rem; height: 1.75rem; color: #8d899f; }
.earn-tile-main strong { font-size: .9375rem; line-height: 1.5; font-weight: 500; }
.earn-tile-reward { display: inline-flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: .3rem; align-self: center; padding: .3rem .625rem; border: 1px solid #343044; background: #1d1c2c; color: #b4afca; border-radius: .5rem; font-size: .75rem; line-height: 1.4; }
.earn-tile-reward b { font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #99eab5; }
.earn-tile[data-state="available"] { color: #fff; background: linear-gradient(135deg, #4831d4, #675be8); border-color: #8171ff; box-shadow: 0 10px 26px #4e34cd24, inset 0 1px 0 #ffffff16; }
.earn-tile[data-state="available"] .earn-tile-main > .icon { color: #fff; width: 2rem; height: 2rem; }
.earn-tile[data-state="available"] .earn-tile-main strong { font-weight: 600; }
.earn-tile[data-state="available"] .earn-tile-reward { color: #e0dced; background: #201e38; border-color: #9690be; }
.earn-tile[data-state="available"] .earn-tile-reward b { color: #a7f3c2; }
.earn-tile[data-state="completed"] { color: #c6bedf; background: #201d31; border-color: #443855; }
.earn-tile[data-state="completed"] .earn-tile-main > .icon { color: #b9a5ef; }
.earn-grid-footer { display: grid; justify-items: center; gap: .875rem; margin: 1.75rem 0 .5rem; }
.earn-load-more { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 3rem; padding: .75rem 1.5rem; color: #dad2f3; background: #232030; border: 1px solid #453c59; border-radius: .75rem; font-size: .875rem; font-weight: 500; }
.earn-load-more:hover { border-color: #8d78b8; background: #2e273d; }
.earn-grid-footer p { color: #a7a1b9; font-size: .75rem; text-align: center; }
@media (hover: hover) {
  .earn-tile[data-state="available"]:hover { transform: translateY(-2px); border-color: #b4a5ff; box-shadow: 0 12px 30px #4e34cd35; }
}
.earn-task-dialog { width: min(28rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; margin: auto; padding: 1.5rem; color: #f2effb; background: #191923; border: 1px solid #45405c; border-radius: 1.5rem; box-shadow: 0 24px 80px #0008; }
.earn-task-dialog::backdrop { background: #080910b8; backdrop-filter: blur(5px); }
.earn-dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.earn-dialog-heading p { margin-bottom: .25rem; color: #b1a3d6; letter-spacing: .08em; font-size: .75rem; font-weight: 500; }
.earn-dialog-heading h2 { font-size: 1.375rem; }
.earn-dialog-heading .dialog-close { position: static; flex: none; }
.earn-modal-wallet { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; padding: .75rem .875rem; border: 1px solid #4d425f; border-radius: .875rem; background: #262130; box-shadow: 0 3px 12px #0c0b1026; }
.earn-wallet-icon { display: grid; place-items: center; flex: none; color: #bdb0dd; }
.earn-wallet-icon .icon { width: 1.25rem; height: 1.25rem; }
.earn-modal-wallet > span:nth-child(2) { font-size: .8125rem; color: #c0b8cd; }
.earn-modal-wallet strong { margin-left: auto; font-size: 1rem; color: #f2eaff; font-variant-numeric: tabular-nums; }
.earn-reward-flight { position: fixed; z-index: 10; display: inline-flex; align-items: center; justify-content: center; pointer-events: none; padding: .5rem .75rem; border: 1px solid #83d5a0; border-radius: 2rem; color: #b0ffd1; background: #183b2a; box-shadow: 0 8px 24px #02090575; font-size: 1rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.earn-dialog-reward { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .875rem 1rem; margin-top: 1.25rem; background: #272235; border: 1px solid #443859; border-radius: .875rem; }
.earn-dialog-reward > span { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: #d2c5ee; }
.earn-dialog-reward strong { font-variant-numeric: tabular-nums; color: #99eab5; font-size: 1.125rem; }
.earn-task-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; min-height: 14rem; padding: 1.5rem 1rem; margin-top: 1.25rem; background: #12121e; border: 1px solid #2e293d; border-radius: 1rem; text-align: center; }
.earn-stage-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: .25rem; color: #c0acff; background: #31264d; border: 1px solid #51406f; border-radius: 1rem; }
.earn-stage-icon .icon { width: 1.75rem; height: 1.75rem; }
.earn-task-stage h3 { font-size: 1.125rem; }
.earn-task-stage p { font-size: .875rem; color: #b5adc8; }
.earn-video-progress { display: block; width: 100%; height: .5rem; margin-top: .5rem; border: 0; border-radius: 1rem; background: #302a44; color: #b5a2ff; accent-color: #b5a2ff; overflow: hidden; }
.earn-video-progress[hidden] { display: none; }
.earn-video-progress::-webkit-progress-bar { background: #302a44; border-radius: 1rem; }
.earn-video-progress::-webkit-progress-value { background: #b5a2ff; border-radius: 1rem; }
.earn-video-progress::-moz-progress-bar { background: #b5a2ff; border-radius: 1rem; }
.earn-task-status { min-height: 1.5rem; margin: 1rem 0 .625rem; color: #d2c4ef; font-size: .875rem; text-align: center; }
.earn-action-button { display: flex; align-items: center; justify-content: center; gap: .625rem; min-height: 3.25rem; width: 100%; padding: .75rem 1rem; color: #fff; background: #6850ce; border: 1px solid #9c85ee; border-radius: .875rem; font-size: .9375rem; font-weight: 500; }
.earn-action-button:hover { background: #785de0; }
.earn-action-button:disabled { opacity: .65; }
.earn-action-button:disabled:hover { background: #6850ce; }
.earn-adblock-notice { margin: .75rem 0 0; padding: .625rem .75rem; border: 1px solid #a35b64; border-radius: .75rem; background: #3a2028; color: #ffc4ca; font-size: .78rem; line-height: 1.5; text-align: left; }
.earn-demo-note { margin-top: .875rem; color: #ada4bd; font-size: .75rem; line-height: 1.7; text-align: center; }
@media (max-width: 760px) {
  .earn-grid-heading { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .earn-tile { min-height: 11rem; padding: .875rem; }
}
@media (max-width: 520px) {
  .earn-level-card { align-items: flex-start; padding: .875rem; }
  .earn-x2-badge { flex-direction: column; gap: .25rem; padding: .375rem .5rem; text-align: center; }
  .earn-x2-badge b { width: 2rem; height: 2rem; }
  .earn-x2-badge span { max-width: 4rem; line-height: 1.35; }
  .earn-tabs { gap: .25rem; padding: .375rem; margin-bottom: 1.5rem; }
  .earn-tab { flex-direction: column; gap: .375rem; padding: .625rem .25rem; min-height: 4rem; font-size: .875rem; line-height: 1.5; }
  .earn-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
  .earn-tile { min-height: 11rem; aspect-ratio: auto; padding: .75rem; border-radius: .9375rem; }
  .earn-tile-main strong { font-size: .875rem; }
  .earn-tile-reward { gap: .25rem; padding: .3rem .4rem; }
  .earn-task-dialog { padding: 1.125rem; border-radius: 1.25rem; }
}

.earn-tile.is-claimed-pop { animation: earn-claimed-pop .55s cubic-bezier(.22,.61,.36,1); }
@keyframes earn-claimed-pop {
  0% { box-shadow: 0 0 0 0 rgba(158, 231, 188, .35); }
  30% { transform: scale(.96); }
  60% { transform: scale(1.03); }
  100% { box-shadow: 0 0 0 14px rgba(158, 231, 188, 0); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .earn-tile.is-claimed-pop { animation: none; } }

/* Windowed grid: new tiles fade/slide in as older completed ones are pruned. */
.earn-tile { animation: earn-tile-in .22s ease both; }
@keyframes earn-tile-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .earn-tile { animation: none; } }