/* Daily Challenge: a dated royal decree with a gold wax seal. */
.dc-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;margin:0 0 30px;padding:24px 28px;background:#fff8da;border:2px solid #3e226e;border-radius:23px;box-shadow:0 5px 0 #372258;overflow:hidden;animation:dcIn .4s ease both}
.dc-card:before{content:'';position:absolute;inset:7px;border:1px dashed #d9c27a;border-radius:17px;pointer-events:none}
.dc-card>*{position:relative}
.dc-card .eyebrow{color:#8a5a12;margin-bottom:6px;font-size:11px;font-weight:800}
.dc-card h2{font-size:26px;color:var(--ink)}
.dc-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:9px 0 0;font-size:14px;color:#5b4a2a}
.dc-card-meta strong{color:#5633b8;font-size:16px}
.dc-fine{margin:10px 0 0;font-size:12px;line-height:1.6;color:#6d5b3a;max-width:560px}
.dc-mini{margin-top:12px;height:7px;max-width:320px;border-radius:6px;background:#f0e2a8;overflow:hidden}
.dc-mini span{display:block;height:100%;background:#6840c6;transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.dc-card .dc-cta{white-space:nowrap}
.dc-card.is-done .dc-cta{background:#fff;color:#5633b8;border-color:#3e226e;box-shadow:0 3px 0 #372258}
.dc-card.is-done .dc-cta:hover{background:#f4edff}
.dc-seal{flex-shrink:0;width:82px;height:82px;border-radius:50%;display:grid;place-items:center;align-content:center;background:radial-gradient(circle at 35% 30%,#ffe68e,#e8b635 70%);border:2px solid #3e226e;color:#3f285d;transform:rotate(-8deg);box-shadow:0 3px 0 #372258;line-height:1;transition:transform .2s ease}
.dc-card:hover .dc-seal{transform:rotate(-2deg) scale(1.03)}
.dc-seal-crown svg{width:18px;height:18px;margin-bottom:1px}
.dc-seal strong{font-family:'Fredoka',sans-serif;font-size:28px;font-weight:600}
.dc-seal>span:last-child{font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.dc-card-off{grid-template-columns:1fr}
/* Play view */
.dc-crumb{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dc-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:20px;background:#fff8da;border:1px solid #ecdfaa;color:#79511b;font-weight:800;font-size:12px;letter-spacing:.3px}
.dc-tag svg{width:15px;height:15px}
.dc h1{outline:0}
.dc h1:focus-visible,.dc h2:focus-visible,#daily-review:focus-visible{outline:3px solid #7750d5;outline-offset:4px;border-radius:6px}
#daily-question{outline:0}
.dc-fill{background:linear-gradient(90deg,#9b76e1,#e8b635)}
.dc-question{border-top:5px solid #e8b635}
.dc .answer-mark{font-size:12px;font-weight:800;letter-spacing:.3px}
.dc-feedback{animation:dcIn .3s ease both}
.dc-stale,.dc-alert{margin:0 0 18px}
.dc-stale{padding:12px 16px;border-radius:12px;background:#f0e8ff;color:#4a2c8f;font-size:13px;font-weight:700;line-height:1.6}
.dc-start{text-align:center;padding:36px 26px;background:#fff8da;border:2px solid #3e226e;border-radius:23px;box-shadow:0 5px 0 #372258}
.dc-start .dc-seal{margin:0 auto 18px}
.dc-start>p{color:#5b4a2a;line-height:1.7;max-width:460px;margin:0 auto 20px}
.dc-start .dc-fine{margin:16px auto 0}
.dc-score{background:conic-gradient(#e8b635 var(--score),#efe6c4 0)}
.dc-result h1{margin-top:4px}
.dc-mine{font-weight:700;color:#314c58}
.dc-review-item.is-miss{border-left:4px solid #d58274}
.dc-review-item:not(.is-miss){border-left:4px solid #399b77}
#daily-review{outline:0;scroll-margin-top:16px}
@keyframes dcIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:860px){.dc-card{grid-template-columns:auto 1fr;padding:22px}.dc-card .dc-cta{grid-column:1/-1;justify-self:start}}
@media(max-width:600px){.dc-card{grid-template-columns:1fr;gap:14px;padding:22px 20px}.dc-seal{width:64px;height:64px}.dc-card>.dc-seal{position:absolute;right:16px;top:16px}.dc-seal strong{font-size:22px}.dc-seal-crown svg{width:14px;height:14px}.dc-card-body{padding-right:70px}.dc-card h2{font-size:23px}.dc-card .dc-cta{width:100%}.dc-fine{padding-right:0}.dc-crumb{flex-wrap:wrap}.dc-start{padding:28px 18px}}
@media(prefers-reduced-motion:reduce){.dc-card,.dc-feedback{animation:none}.dc-seal,.dc-card:hover .dc-seal{transition:none;transform:rotate(-8deg)}.dc-mini span{transition:none}}
