/* German Dominion - Daily & weekly claim panel (live dashboard).
   Sits beside the daily spin in .rewards-row. Tokens come from /_shared.css;
   the stat/button vocabulary mirrors spin.css so the two reward panels read
   as one family. No emojis (site policy); every glyph is inline SVG. */

/* Side-by-side rewards row: spin + claim share the top of /live/. */
.rewards-row { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 1180px) {
  .rewards-row { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
  .rewards-row .spin-panel, .rewards-row .claim-panel { margin-bottom: 18px; }
}

.claim-panel { margin: 0 0 18px; position: relative; overflow: hidden; }
.claim-panel.ready { border-color: rgba(57,201,119,0.4); }
.claim-panel.ready > header h2 { color: var(--accent-hot); }

.claim-layout { display: flex; flex-direction: column; gap: 16px; }

/* ---- seven-day track ------------------------------------------------------ */

.claim-track { position: relative; padding: 10px 2px 2px; }
.claim-rail { position: absolute; left: 4%; right: 4%; top: 50%; height: 3px; border-radius: 2px; background: var(--bone-08); overflow: hidden; }
.claim-rail i { display: block; height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, rgba(57,201,119,0.5), var(--accent-hot));
  transition: width .7s var(--ease); }
.claim-days { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }

.claim-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 74px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--glass-border);
  background: var(--bg-1); transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease); }
.claim-day .cd-day { color: var(--bone-34); font: 700 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.claim-day .cd-points { color: var(--bone-80); font: 400 18px/1 var(--display); font-variant-numeric: tabular-nums; }
.claim-day .cd-check { position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; color: var(--accent-hot); opacity: 0; transform: scale(.4); transition: opacity .25s var(--ease), transform .25s var(--ease); }

.claim-day.claimed { border-color: rgba(57,201,119,0.45); background: rgba(57,201,119,0.10); }
.claim-day.claimed .cd-points { color: var(--accent-hot); }
.claim-day.claimed .cd-check { opacity: 1; transform: scale(1); }
.claim-day.locked { opacity: .62; }

.claim-day.next { border-color: var(--accent); background: rgba(57,201,119,0.08); cursor: pointer; transform: translateY(-2px); }
.claim-day.next .cd-day { color: var(--accent-hot); }
.claim-day.next .cd-points { color: var(--bone); }
.claim-day.next:hover { background: rgba(57,201,119,0.16); }
.cd-ring { position: absolute; inset: -1px; border-radius: 12px; border: 1px solid var(--accent);
  animation: cd-ring-pulse 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes cd-ring-pulse {
  0%, 100% { opacity: .9; transform: scale(1); }
  50% { opacity: .15; transform: scale(1.045); }
}

/* Day 7 - the weekly claim - carries the jackpot treatment. */
.claim-day.weekly { border-color: rgba(255,179,71,0.4); background: rgba(255,179,71,0.07); }
.claim-day.weekly .cd-day { color: var(--amber-hot); }
.claim-day.weekly .cd-points { color: var(--amber-hot); }
.claim-day.weekly.next { border-color: var(--amber); background: rgba(255,179,71,0.14); }
.claim-day.weekly.next .cd-ring { border-color: var(--amber); }
.claim-day.weekly.claimed { border-color: var(--amber); background: rgba(255,179,71,0.16); }
.claim-day.weekly.claimed .cd-check { color: var(--amber-hot); }

.claim-day.just-claimed { animation: cd-pop .55s var(--ease); }
@keyframes cd-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.claim-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* ---- actions / copy / stats ---------------------------------------------- */

.claim-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.claim-button { min-height: 42px; }
.claim-panel.ready .claim-button { animation: claim-breathe 2.6s ease-in-out infinite; }
@keyframes claim-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(57,201,119,0.28); }
  50% { box-shadow: 0 0 0 7px rgba(57,201,119,0); }
}
.claim-countdown { color: var(--bone-62); font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.claim-countdown b { color: var(--bone); font-variant-numeric: tabular-nums; }

.claim-reset-note { padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,155,147,0.35);
  background: rgba(255,155,147,0.07); color: #ffb1aa; font: 500 12px/1.45 var(--ui); }

.claim-copy { margin: 0; color: var(--bone-62); font-size: 13px; line-height: 1.55; }
.claim-copy b { color: var(--amber-hot); font-weight: 600; }

.claim-stats { display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)); gap: 10px; width: 100%; }
.claim-stat { padding: 12px 14px; border-radius: 11px; border: 1px solid var(--glass-border); background: var(--bg-1); }
.claim-stat .lab { display: block; color: var(--bone-34); font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.claim-stat .val { display: block; margin-top: 7px; color: var(--bone); font: 400 24px/1 var(--display); font-variant-numeric: tabular-nums; }
@media (max-width: 460px) { .claim-stats { grid-template-columns: 1fr 1fr; } }

/* Narrow screens: the seven chips wrap 4 + 3 and the rail hides (it can no
   longer connect a single row). */
@media (max-width: 640px) {
  .claim-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .claim-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-ring, .claim-panel.ready .claim-button, .claim-day.just-claimed { animation: none; }
  .claim-rail i { transition: none; }
}

[hidden] { display: none !important; }