.dailyreward-card{ display:flex; flex-direction: column; padding: 14px; background: var(--bg-dark-5); border-radius: 8px; } .dailyreward-title { font-size: 17px; font-weight: 800; color: var(--text-white); font-family: var(--prm-font); } .dailyreward-subtitle { font-size: 11px; color: var(--text-dark); margin-top: 4px; margin-bottom: 8px; } .dailyreward-refresh-label { color: var(--text-white); } .dailyreward-refresh-timer { color: var(--warm-accent); font-weight: 700; font-variant-numeric: tabular-nums; } .dailyreward-days-remaining { display: flex; align-items: center; gap: 6px; width: fit-content; margin: 0 0 18px; padding: 1px 48px 1px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: #fff; background: linear-gradient(135deg, var(--warm-accent), var(--warm-accent-dark)); clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%); } .dailyreward-days-remaining:empty { display: none; } .dailyreward-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 18px; } .dailyreward-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px 2px 8px; border-radius: 4px; background: var(--bg-dark-4); position: relative; } .dailyreward-day.done::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.28); border-radius: inherit; z-index: 1; pointer-events: none; } .dailyreward-day.today { box-shadow: 0 0 0 1px var(--warm-accent); } .dailyreward-day-check { position: absolute; top: 0; right: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; background: var(--secondary-accent-dark); border-radius: 0 4px 0 4px; color: #000; font-size: 9px; z-index: 2; } .dailyreward-day-label { position: absolute; top: 6px; left: 7px; font-size: 9px; color: var(--text-white); font-weight: 700; line-height: 1; } .dailyreward-day-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-medium); } .dailyreward-day-icon img { width: 70%; height: 70%; object-fit: contain; } .dailyreward-day-amt { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15; text-align: center; } .dailyreward-day-amt-name { font-size: 9px; color: var(--text-bright); font-weight: 600; } .dailyreward-day-amt-name--chest { color: #22c55e; } .dailyreward-day-amt-qty { font-size: 9px; color: var(--text-dark); font-weight: 700; } .dailyreward-claim-btn { width: 100%; padding: 12px; border-radius: 12px; border: none; font-family: var(--prm-font); font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--warm-accent), var(--warm-accent-dark)); cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease; } .dailyreward-claim-btn:hover { filter: brightness(1.04); transform: translateY(-1px); } .dailyreward-claim-btn:disabled { background: rgba(255, 255, 255, 0.06); color: var(--text-dark); box-shadow: none; cursor: default; transform: none; filter: none; } /* ------------------------------------------------------------------- * Ancient-coins claim animation — each coin is appended to * (not the card) and driven by four CSS custom properties set inline * in JS: --coin-start-*, --coin-mid-*, --coin-end-*. left/top stay at * 0 so `translate()` maps 1:1 to viewport coordinates. * ------------------------------------------------------------------- */ .dailyreward-coin-fly { position: fixed; left: 0; top: 0; width: 26px; height: 26px; pointer-events: none; z-index: 9999; will-change: transform, opacity; animation: dailyreward-coin-fly-anim 0.9s cubic-bezier(0.35, 0, 0.25, 1) forwards; } .dailyreward-coin-fly img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); } @keyframes dailyreward-coin-fly-anim { 0% { transform: translate(var(--coin-start-x), var(--coin-start-y)) scale(1) rotate(0deg); opacity: 1; } 25% { transform: translate(var(--coin-mid-x), var(--coin-mid-y)) scale(1.15) rotate(120deg); opacity: 1; } 100% { transform: translate(var(--coin-end-x), var(--coin-end-y)) scale(0.25) rotate(360deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .dailyreward-coin-fly { animation: none; display: none; } } @media screen and (max-width: 768px) { .dailyreward-card { padding: 8px; } .dailyreward-title { font-size:15px; } .dailyreward-subtitle { font-size: 9px; color: var(--text-dark); margin-top: 0px; margin-bottom: 4px; } .dailyreward-days-remaining { display: flex; align-items: center; gap: 4px; width: fit-content; margin: 0 0 6px; padding: 1px 48px 1px 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.3px; color: #fff; background: linear-gradient(135deg, var(--warm-accent), var(--warm-accent-dark)); clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%); } .dailyreward-day-icon img { width: 70%; height: 70%; object-fit: contain; } .dailyreward-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 18px 0px 8px; border-radius: 4px; background: var(--bg-dark-4); position: relative; } .dailyreward-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 6px; } .dailyreward-day-amt-name { font-size: 8px; color: var(--text-bright); font-weight: 600; } .dailyreward-day-amt-qty { font-size: 8px; color: var(--text-dark); font-weight: 700; } .dailyreward-claim-btn { width: 100%; padding: 4px; border-radius: 6px; border: none; font-family: var(--prm-font); font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--warm-accent), var(--warm-accent-dark)); cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease; } }