/* MatchApp TV Ai — Daily Check-in field (2026-09-21 rebuild).

   A seven-day loyalty track that sits directly under the top box on every
   surface: the same width as the top box, a shorter box, one cell per day on
   one line at every breakpoint, and a gold shimmering edge.

   Motion budget: the gold edge is painted by CSS so it never depends on a
   runtime reaching this element, and the only animated parts are one
   transform-only sheen bar and the ring on today's cell. Both stop dead under
   either reduced-motion signal. */

#daily-match-checkin.dc,
.daily-checkin.dc{
  --dc-gold:#f3cf69;
  --dc-gold-deep:#b98428;
  --dc-gold-hot:#ffe9a6;

  display:block!important;
  box-sizing:border-box!important;
  position:relative;
  isolation:isolate;
  /* Same width as the top box (which is min(100% - 12px, 1180px)); the field
     itself is shorter, which is where "a little smaller" lives. */
  width:min(calc(100% - 12px),1180px)!important;
  max-width:1180px!important;
  margin:6px auto 10px!important;
  padding:10px 14px!important;
  border:1px solid transparent!important;
  border-radius:18px!important;
  background:
    linear-gradient(118deg,rgba(32,15,51,.92),rgba(16,8,28,.90)) padding-box,
    linear-gradient(120deg,var(--dc-gold-deep),var(--dc-gold-hot) 28%,var(--dc-gold) 52%,var(--dc-gold-deep) 78%,var(--dc-gold-hot)) border-box!important;
  box-shadow:0 12px 34px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.05)!important;
  color:#f8f4ff;
  overflow:hidden;
}

/* The shimmer. One element, one transform, no layout work. */
#daily-match-checkin.dc::before,
.daily-checkin.dc::before{
  content:"";position:absolute;z-index:0;top:0;left:-45%;width:34%;height:100%;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,240,190,.14),transparent);
  transform:skewX(-18deg);
  animation:dcSheen 6.5s ease-in-out 2;
}
@keyframes dcSheen{
  0%{transform:translateX(0) skewX(-18deg)}
  55%,100%{transform:translateX(430%) skewX(-18deg)}
}

.dc .dc-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px}

/* ------------------------------- head ------------------------------- */

.dc .dc-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0}
.dc .dc-title{
  margin:0;font-size:clamp(12.5px,2.5vw,15px);font-weight:900;line-height:1.15;
  color:var(--dc-gold-hot);letter-spacing:.01em;
}
.dc .dc-sub{
  margin:0;flex:1 1 auto;min-width:0;
  font-size:clamp(10px,2.1vw,11.5px);line-height:1.3;color:#c3b6d6;
  overflow-wrap:break-word;
}

/* ------------------------------- track ------------------------------- */

.dc .dc-track{position:relative;padding:2px 0 0}

/* The rail runs behind the faces, at the vertical centre of the face row. */
.dc .dc-rail{
  position:absolute;left:7%;right:7%;top:calc(var(--dc-face,34px) / 2 + 2px);
  height:3px;border-radius:999px;background:rgba(255,255,255,.10);
}
.dc .dc-rail-fill{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--dc-gold-deep),var(--dc-gold-hot));
  box-shadow:0 0 10px rgba(243,207,105,.35);
  transition:width .45s cubic-bezier(.2,.8,.3,1);
}

.dc .dc-days{
  position:relative;
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:2px;margin:0;padding:0;list-style:none;
}
.dc .dc-day{
  display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;
  text-align:center;
}
.dc .dc-face{
  --dc-face:clamp(28px,7.6vw,36px);
  display:grid;place-items:center;
  width:var(--dc-face);height:var(--dc-face);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:radial-gradient(circle at 50% 35%,rgba(60,34,92,.95),rgba(20,11,34,.95));
  color:#cbbfe0;font-size:clamp(12px,3vw,15px);font-weight:900;line-height:1;
  overflow:hidden;
}
.dc .dc-label{
  font-size:clamp(7.5px,1.9vw,9.5px);line-height:1.1;letter-spacing:.04em;
  color:#a294bb;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.dc .dc-pip{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22)}

/* Banked days */
.dc .dc-day.is-done .dc-face{
  border-color:rgba(243,207,105,.7);
  background:linear-gradient(150deg,var(--dc-gold-hot),var(--dc-gold-deep));
  color:#2a1a06;
  box-shadow:0 0 14px rgba(243,207,105,.28);
}
.dc .dc-day.is-done .dc-label{color:var(--dc-gold-hot)}
.dc .dc-tick{font-size:1em;line-height:1}

/* Today — the MatchApp mark, in place of a generic token */
.dc .dc-day.is-today .dc-face{
  border-color:var(--dc-gold);
  background:radial-gradient(circle at 50% 35%,rgba(96,54,148,.95),rgba(24,12,40,.98));
  box-shadow:0 0 0 2px rgba(243,207,105,.28),0 0 18px rgba(243,207,105,.30);
  animation:dcPulse 2.6s ease-in-out infinite;
  padding:2px;
}
.dc .dc-day.is-today .dc-label{color:#fff1c6;font-weight:800}
.dc .dc-mark{width:100%;height:100%;object-fit:contain;display:block;border-radius:50%}
@keyframes dcPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(243,207,105,.24),0 0 14px rgba(243,207,105,.22)}
  50%{box-shadow:0 0 0 3px rgba(243,207,105,.42),0 0 22px rgba(243,207,105,.38)}
}

/* Day 7 — the week's prize */
.dc .dc-day.is-bonus .dc-face{
  border-color:rgba(243,207,105,.55);
  background:linear-gradient(150deg,rgba(243,207,105,.22),rgba(140,86,206,.28));
  color:var(--dc-gold-hot);
}
.dc .dc-day.is-bonus.is-done .dc-face{
  background:linear-gradient(150deg,var(--dc-gold-hot),var(--dc-gold-deep));
  color:#2a1a06;
}
.dc .dc-bonus{font-size:clamp(9.5px,2.4vw,12px);font-weight:900;letter-spacing:-.02em}
.dc .dc-day.is-bonus .dc-label{color:var(--dc-gold-hot)}

/* ------------------------------- action ------------------------------- */

.dc .dc-cta{display:flex;justify-content:flex-end}
.dc .dc-action{
  box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:34px;max-width:100%;
  padding:7px 16px;
  border:0;border-radius:999px;
  background:linear-gradient(135deg,#f5d976,#dcae3b);
  color:#20150a;font:inherit;font-size:clamp(10.5px,2.4vw,12px);font-weight:900;
  line-height:1.15;white-space:normal;text-align:center;overflow-wrap:break-word;
  box-shadow:0 6px 18px rgba(229,193,88,.18);
  cursor:pointer;
}
.dc .dc-action:hover{filter:brightness(1.06)}
/* The day-7 claim is the one the whole strip is selling. */
.dc .dc-action.is-bonus-claim{
  background:linear-gradient(135deg,#fff0b6,#e8b93f 55%,#c98f1f);
  box-shadow:0 8px 24px rgba(229,193,88,.34);
}
.dc .dc-action:disabled{opacity:.66;cursor:progress}
.dc .dc-action-join{
  background:linear-gradient(135deg,rgba(243,207,105,.2),rgba(140,86,206,.26));
  color:var(--dc-gold-hot);
  border:1px solid rgba(243,207,105,.55);
}

.dc .dc-lock{
  margin:0;font-size:clamp(8.5px,1.9vw,10px);line-height:1.2;
  color:#9b8eb4;text-align:right;letter-spacing:.05em;text-transform:uppercase;
}

/* Guests see the whole offer, dimmed — not an empty box. */
.dc.is-locked .dc-track{opacity:.62}
.dc.is-locked .dc-day.is-today .dc-face{animation:none}

/* After the day is banked the field is at its most compact. */
.dc.is-complete-today .dc-cta{display:none}

/* --------------------------- breakpoints --------------------------- */

@media (min-width:760px){
  #daily-match-checkin.dc,.daily-checkin.dc{padding:12px 18px!important}
  .dc .dc-inner{
    display:grid;
    grid-template-columns:minmax(150px,240px) minmax(0,1fr) auto;
    align-items:center;gap:8px 18px;
  }
  .dc .dc-head{flex-direction:column;align-items:flex-start;gap:2px}
  .dc .dc-cta{justify-content:flex-end}
  .dc .dc-lock{grid-column:3}
  .dc .dc-days{gap:4px}
}

@media (max-width:359px){
  .dc .dc-label{font-size:7px}
  .dc .dc-days{gap:1px}
}

/* Shell routes carry a 10px top-box gutter rather than Home's 6px. */
body.page-shell #daily-match-checkin.dc{width:min(calc(100% - 20px),1180px)!important}

/* Home: this field owns its own width, wider than the 960px reading stage the
   rest of the column uses, so it lines up with the top box above it. */
html body.page-home #daily-match-checkin.dc{
  display:block!important;
  width:min(calc(100% - 12px),1180px)!important;
  max-width:1180px!important;
  margin:6px auto 10px!important;
}

/* ----------------------------- celebration ----------------------------- */

.daily-reward{
  position:fixed;inset:0;z-index:2147483000;
  display:grid;place-items:center;padding:22px;
  background:rgba(5,3,10,.82);backdrop-filter:blur(8px);
  animation:dcFadeIn .28s ease-out both;
}
.daily-reward-card{
  position:relative;
  box-sizing:border-box;
  width:min(92vw,392px);padding:28px 22px;text-align:center;
  border:1px solid rgba(243,207,105,.6);border-radius:26px;
  background:radial-gradient(circle at 50% 22%,rgba(126,73,174,.72),rgba(25,12,43,.98) 62%);
  box-shadow:0 25px 90px #000;
  animation:dcCardRise .5s cubic-bezier(.2,.9,.22,1.2) both;
}
.daily-reward-sparks{
  position:absolute;left:50%;top:46%;width:8px;height:8px;
  pointer-events:none;z-index:0;
}
.daily-reward-sparks i{
  position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;
  background:var(--dc-gold-hot,#ffe9a6);
  box-shadow:0 0 12px rgba(255,233,166,.72);
  transform-origin:50% 50%;
  animation:dcSparkBurst .82s cubic-bezier(.18,.8,.2,1) var(--delay) both;
}
.daily-reward-card>*:not(.daily-reward-sparks){position:relative;z-index:1}
.daily-checkin.is-claim-success .dc-inner{animation:dcClaimSuccess .62s cubic-bezier(.2,.9,.25,1.15) both}

.daily-reward-kicker{font-weight:900;color:var(--dc-gold-hot,#ffe9a6);letter-spacing:.02em}
.daily-reward-medal{
  position:relative;display:grid;place-items:center;
  width:112px;height:112px;margin:16px auto 10px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(96,54,148,.9),rgba(24,12,40,.98));
  box-shadow:0 0 0 2px rgba(243,207,105,.5),0 0 42px rgba(229,193,88,.35);
}
.daily-reward-medal img{width:76px;height:76px;object-fit:contain;display:block}
.daily-reward-streak{
  position:absolute;right:-4px;bottom:-4px;
  padding:3px 9px;border-radius:999px;
  background:linear-gradient(135deg,#ffe991,#c6972e);
  color:#2a1807;font-size:12px;font-weight:1000;
}
.daily-reward-card h3{margin:8px 0;font-size:clamp(18px,5vw,23px);color:#fff}
.daily-reward-card p{margin:0;color:#ddd0ed;font-size:clamp(12.5px,3.2vw,14px);line-height:1.55}
.daily-reward-card button{
  box-sizing:border-box;margin-top:16px;padding:12px 24px;max-width:100%;
  border:0;border-radius:13px;background:#E5C158;color:#211506;
  font:inherit;font-weight:900;cursor:pointer;
}
@keyframes dcFadeIn{from{opacity:0}to{opacity:1}}
@keyframes dcCardRise{from{opacity:0;transform:translateY(24px) scale(.95)}to{opacity:1;transform:none}}
@keyframes dcSparkBurst{
  0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.2)}
  18%{opacity:1}
  100%{opacity:0;transform:rotate(var(--a)) translateY(var(--dy)) scale(.45)}
}
@keyframes dcClaimSuccess{
  0%,100%{transform:none}
  45%{transform:scale(1.012)}
}

/* --------------------------- motion safety --------------------------- */

@media (prefers-reduced-motion:reduce){
  #daily-match-checkin.dc::before,.daily-checkin.dc::before,
  .dc .dc-day.is-today .dc-face,
  .dc .dc-rail-fill,
  .daily-reward,.daily-reward-card,.daily-reward-sparks i,
  .daily-checkin.is-claim-success .dc-inner{animation:none!important;transition:none!important}
}
.reduce-motion #daily-match-checkin.dc::before,
.reduce-motion .daily-checkin.dc::before,
.reduce-motion .dc .dc-day.is-today .dc-face{animation:none!important}

@media (forced-colors:active){
  #daily-match-checkin.dc::before,.daily-checkin.dc::before{display:none}
}
@media print{#daily-match-checkin.dc,.daily-checkin.dc{display:none!important}}