.challenge-panel { margin-top: 48px; padding: clamp(20px, 5vw, 40px); border: var(--line); background: var(--ink); color: var(--paper); box-shadow: 9px 9px 0 var(--red); }
.challenge-head { position: relative; padding-bottom: 22px; border-bottom: 2px dashed rgba(245,239,224,.5); }
.challenge-head h2 { max-width: 650px; padding-top: 20px; color: var(--yellow); font-size: clamp(25px, 4vw, 42px); }
.challenge-head p { max-width: 600px; margin-top: 12px; color: #d9d8d2; }
.stamp { position: absolute; right: 0; top: 0; padding: 5px 8px; border: 2px solid var(--yellow); color: var(--yellow); font-family: var(--display); font-size: 10px; transform: rotate(4deg); }
.challenge-stage { position: relative; display: grid; min-height: 270px; margin: 28px 0 18px; place-items: center; overflow: hidden; border: 3px solid var(--paper); background: repeating-linear-gradient(135deg, rgba(245,239,224,.08) 0 14px, transparent 14px 28px); }
.challenge-stage::before, .challenge-stage::after { position: absolute; color: rgba(245,239,224,.55); font-family: var(--display); font-size: 11px; letter-spacing: .14em; content: "DO NOT OBSERVE"; }
.challenge-stage::before { left: 18px; top: 15px; transform: rotate(-4deg); }
.challenge-stage::after { right: 18px; bottom: 15px; transform: rotate(4deg); }
.challenge-wait { color: rgba(245,239,224,.75); font-family: var(--display); font-size: 24px; letter-spacing: .15em; }
.challenge-target { display: none; width: 160px; height: 110px; border: 4px solid var(--paper); background: var(--red); color: var(--paper); box-shadow: 8px 8px 0 var(--yellow); font-family: var(--display); font-size: 20px; line-height: 1.2; cursor: pointer; touch-action: manipulation; transform: rotate(-4deg); }
.challenge-target.is-live { display: grid; place-items: center; animation: challenge-pop .24s ease-out both; }
.challenge-target:disabled { cursor: not-allowed; }
.challenge-stage.is-foul { animation: challenge-shake .4s ease-in-out; }
.challenge-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.challenge-controls .button { border-color: var(--paper); box-shadow: 4px 4px 0 var(--red); }
.challenge-controls .button:disabled { cursor: wait; opacity: .6; }
.challenge-status { min-height: 2.2em; color: #d9d8d2; font-size: 13px; }
.challenge-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 28px 0 0; padding-top: 18px; border-top: 2px dashed rgba(245,239,224,.5); }
.challenge-stats div { padding: 12px; border: 1px solid rgba(245,239,224,.4); }
.challenge-stats dt { color: var(--yellow); font-size: 11px; font-weight: 800; }
.challenge-stats dd { margin: 4px 0 0; font-family: var(--display); font-size: 20px; }
@keyframes challenge-pop { from { opacity: 0; transform: scale(.6) rotate(-10deg); } to { opacity: 1; transform: scale(1) rotate(-4deg); } }
@keyframes challenge-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@media (max-width: 560px) { .challenge-stage { min-height: 230px; } .challenge-stats { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .challenge-target.is-live { animation: none; } .challenge-stage.is-foul { animation: none; } }