#challenge { overflow: hidden; }
#challenge .ch-glow { position: absolute; inset: 0; background: url(../assets/dark.jpg) center/cover; opacity: .18; mask-image: radial-gradient(60% 70% at 70% 30%, #000, transparent); -webkit-mask-image: radial-gradient(60% 70% at 70% 30%, #000, transparent); }
#challenge .ch-top { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
#challenge .ch-h { font-size: clamp(40px, 5.4vw, 72px); }
#challenge .ch-twice { color: var(--red); position: relative; white-space: nowrap; }
#challenge .ch-twice::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: 3px; background: var(--red); transform-origin: left; transform: scaleX(0); transition: transform 1s .6s var(--ease); box-shadow: 0 0 14px var(--red); }
#challenge .ch-h.in .ch-twice::after, .hx-static #challenge .ch-twice::after { transform: scaleX(1); }
#challenge .ch-month { position: relative; padding: 24px; border-radius: var(--r); background: rgba(8,20,36,.75); border: 1px solid var(--line); box-shadow: 0 40px 90px -40px #000; }
#challenge .ch-mhead { display: flex; justify-content: space-between; gap: 12px; font: 600 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
#challenge .ch-unseen b { font: 700 18px/1 var(--head); color: var(--red); letter-spacing: 0; font-variant-numeric: tabular-nums; }
#challenge .ch-days { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
#challenge .ch-d { position: relative; aspect-ratio: 1 / 1.15; border-radius: 8px; background: rgba(214,226,238,.04); border: 1px solid rgba(120,170,220,.12); overflow: hidden;
  font: 600 11px/1 var(--body); color: rgba(138,160,182,.6); padding: 5px 6px; }
#challenge .ch-d s { text-decoration: none; position: relative; z-index: 1; }
#challenge .ch-d::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--lv, 0%); background: linear-gradient(180deg, rgba(244,63,94,.18), rgba(244,63,94,.45)); transition: height .5s var(--ease); }
#challenge .ch-d.past { color: rgba(244,63,94,.85); border-color: rgba(244,63,94,.22); }
#challenge .ch-d.first { border-color: var(--red); box-shadow: 0 0 0 1px rgba(244,63,94,.35) inset; }
#challenge .ch-d.read { border-color: var(--cyan); background: rgba(34,211,238,.16); color: var(--white); box-shadow: 0 0 26px rgba(34,211,238,.45); }
#challenge .ch-d.read::before { opacity: .3; }
#challenge .ch-d .ch-drip { position: absolute; left: 50%; top: 40%; width: 8px; height: 11px; margin-left: -4px; background: var(--red); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: 0 0 10px var(--red); animation: chDrip 1.1s ease-in infinite; animation-play-state: paused; z-index: 2; }
#challenge.run .ch-drip { animation-play-state: running; }
#challenge:not(.run) .ch-drip { animation: none; opacity: 1; transform: translateY(6px); }
@keyframes chDrip { 0% { transform: translateY(-14px) scale(.5); opacity: 0; } 20% { opacity: 1; transform: translateY(-10px) scale(1); } 100% { transform: translateY(24px) scale(.8); opacity: 0; } }
#challenge .ch-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 14px; color: var(--text); }
#challenge .ch-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
#challenge .ch-dot.r { background: var(--red); box-shadow: 0 0 8px var(--red); } #challenge .ch-dot.c { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

#challenge .ch-cards { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid var(--line); }
#challenge .ch-card { position: relative; padding: 32px 30px 8px; border-left: 1px solid var(--line); outline: none; transition: background .4s; }
#challenge .ch-card:first-child { border-left: 0; padding-left: 0; }
#challenge .ch-card::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--cyan); transition: width .6s var(--ease); }
#challenge .ch-card.ch-red::before { background: var(--red); }
#challenge .ch-card:hover::before, #challenge .ch-card:focus::before, #challenge .ch-card.in::before { width: 64px; }
#challenge .ch-card p { margin: 0; color: var(--muted); font-size: 16px; max-width: 320px; }
#challenge .ch-n { position: absolute; top: 28px; right: 24px; font: 700 44px/1 var(--head); color: rgba(214,226,238,.06); }
#challenge .ch-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; color: var(--cyan); background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.3); }
#challenge .ch-red .ch-ic { color: var(--red); background: rgba(244,63,94,.1); border-color: rgba(244,63,94,.35); }
#challenge .ch-ic svg { width: 24px; height: 24px; }
#challenge .ch-card:hover .ch-clip svg, #challenge .ch-card:focus .ch-clip svg { animation: chShake .5s; }
#challenge .ch-card:hover .ch-drop svg, #challenge .ch-card:focus .ch-drop svg { animation: chFall .8s var(--ease); }
#challenge .ch-card:hover .ch-q svg, #challenge .ch-card:focus .ch-q svg { animation: chBlink .9s; }
@keyframes chShake { 20%, 60% { transform: rotate(-9deg); } 40%, 80% { transform: rotate(9deg); } }
@keyframes chFall { 40% { transform: translateY(8px) scaleY(1.1); } 70% { transform: translateY(-2px) scale(1.1, .9); } }
@keyframes chBlink { 25%, 75% { opacity: .15; } 50% { opacity: 1; } }

@media (max-width: 900px) {
  #challenge .ch-top { grid-template-columns: 1fr; gap: 36px; }
  #challenge .ch-cards { grid-template-columns: 1fr; margin-top: 40px; }
  #challenge .ch-card, #challenge .ch-card:first-child { border-left: 0; padding: 26px 0 22px; border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
  #challenge .ch-month { padding: 16px; }
  #challenge .ch-days { gap: 4px; }
  #challenge .ch-d { font-size: 9px; padding: 3px 4px; border-radius: 6px; }
  #challenge .ch-mhead { font-size: 11px; letter-spacing: .08em; }
  #challenge .ch-twice { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { #challenge .ch-drip { animation: none !important; opacity: 1; } }