/* Rewards page layout */
.rewards-page {
  background: #0b1323;
  color: #e8f0ff;
}

.rewards-main {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 56px 24px 96px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: stretch;
  text-align: left;
}

.rewards-hero {
  text-align: center;
  margin-bottom: 4px;
  width: 100%;
}

.rewards-title {
  margin: 0;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #e8f0ff;
}
.rewards-title span {
  color: #00a7ff;
}

.rewards-top {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 32px;
  width: 100%;
  max-width: var(--content-max);
  align-items: stretch;
}

.streak-card {
  position: relative;
  background: linear-gradient(135deg, #ffd84d 0%, #ffad0a 100%);
  border-radius: 24px;
  padding: 24px 26px;
  min-height: 100px;
  max-width: 200px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.streak-card::before {
  content: "";
  position: absolute;
  right: -44px;
  top: -32px;
  width: 130px;
  height: 180px;
  background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.45), rgba(255, 180, 0, 0) 70%);
  transform: rotate(18deg);
}

.streak-number {
  font-size: 48px;
  font-weight: 800;
  color: #1f1400;
  line-height: 1;
}

.streak-label {
  font-size: 18px;
  font-weight: 700;
  color: #2a1a00;
  opacity: 0.9;
}

.streak-flame img {
  position: absolute;
  right: -58px;
  bottom: -36px;
  width: 180px;
  opacity: 0.82;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.28));
}

.daily-card {
  background: #0f1624;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  color: #e4edff;
}

.daily-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.daily-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.daily-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  padding: 6px;
  background: #0c121d;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.daily-title-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.daily-title-text {
  font-weight: 800;
  letter-spacing: 0.01em;
}

.daily-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9fb4cb;
  font-weight: 700;
  font-size: 13px;
}

.meta-icon img {
  width: 18px;
  height: 18px;
  display: block;
}

.daily-week {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #0b111c;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.day-pill {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.01em;
  background: #141c29;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #c4d0e4;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.day-icon {
  font-size: 14px;
  line-height: 1;
}

.day-pill.is-done {
  background: #112316;
  border-color: rgba(72, 221, 133, 0.6);
  color: #6bf19b;
  box-shadow: inset 0 0 0 1px rgba(72, 221, 133, 0.35);
}

.day-pill.is-warning {
  background: #28160b;
  border-color: rgba(255, 145, 60, 0.7);
  color: #ffb25a;
}

.day-pill.is-active {
  background: #0d1c33;
  border-color: #2e7bff;
  color: #74b4ff;
  box-shadow: 0 0 0 2px rgba(46, 123, 255, 0.45), inset 0 0 0 1px #2e7bff;
}

.day-pill.is-idle {
  background: #151c27;
  color: #7f8ba3;
}

.day-pill.is-locked {
  background: #1a1f29;
  color: #566177;
  border-style: dashed;
}

.goals-surface {
  width: 100%;
  max-width: var(--content-max);
  padding: 4px 4px 0;
}

.goals-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 6px;
}

.goals-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.time-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #b9c6d8;
  background: #0b121c;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.goals .dq-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
}

.goals .dq-item {
  list-style: none;
}

.goals .dq-row {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.goals .dq-row-wide {
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.goals .dq-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.goals .dq-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.9;
}

.goals .dq-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.goals .dq-label {
  font-size: 16px;
  font-weight: 800;
  color: #e6f0ff;
  margin: 0;
}

.goals .dq-bar {
  position: relative;
  height: 16px;
  background: #182334;
  border: 1px solid #1f2e45;
  border-radius: 999px;
  overflow: hidden;
}

.goals .dq-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffd94f 0%, #ffb400 100%);
  box-shadow: 0 6px 16px rgba(255, 188, 0, 0.35);
}

.goals .dq-count {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  color: #b7c6d7;
  mix-blend-mode: normal;
}

.goals .dq-reward {
  display: flex;
  align-items: center;
  justify-content: center;
}

.goals .goals-chest {
  width: 80px;
  height: 80px;
  opacity: 0.95;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
  position: static;
}

/* Claimed/disabled chest */
.goals .goals-chest.is-claimed,
.goals .goals-chest[aria-disabled="true"] {
  filter: grayscale(1) brightness(0.85) contrast(0.9) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
  cursor: not-allowed;
  animation: none;
}

/* Progress bar sizing tweaks */
.goals .dq-bar {
  height: 14px;
}

/* Container centering */
.goals-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Chest pulse when goal is complete */
@keyframes chestPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 2px 6px rgba(255, 196, 0, .25)); }
  50%      { transform: scale(1.08); filter: drop-shadow(0 6px 14px rgba(255, 196, 0, .6)); }
}
.goals .goals-chest.is-full { animation: chestPulse 1.6s ease-in-out infinite; transform-origin: center; }
.goals .goals-chest.is-full { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .goals .goals-chest.is-full { animation: none; }
}

/* Flying chest clone to center */
.chest-fx-clone {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  will-change: transform, opacity, left, top;
  transform-origin: center center;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 700ms ease;
}

/* Backdrop behind flying clone to increase contrast */
.chest-fx-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(4px) saturate(105%);
  -webkit-backdrop-filter: blur(4px) saturate(105%);
  opacity: 0;
  transition: opacity 200ms ease;
}
.chest-fx-backdrop.is-show { opacity: 1; }

/* Reward element shown in front of opened chest */
.reward-fx {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transform-origin: center center;
  transition: left 1200ms cubic-bezier(0.22, 0.61, 0.36, 1), top 1200ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 220ms ease;
}
.reward-fx.is-show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.reward-fx img { display:block; width: 96px; height: auto; }
.reward-fx span { display:block; font-size: 84px; line-height: 1; }

/* Message under the opened chest */
.reward-toast {
  position: fixed;
  left: 50%;
  top: calc(50% + 110px);
  transform: translate(-50%, -50%);
  z-index: 10001;
  color: #e8f0ff;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity 220ms ease;
}
.reward-toast.is-show { opacity: 1; }

/* Responsive tweaks */
@media (max-width: 900px) {
  .rewards-main { padding: 44px 18px 72px; }
  .rewards-top { grid-template-columns: 1fr; }
  .goals-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .time-left { align-self: flex-end; }
}