/* Invitation cards are keepsakes of a frozen build, not live workshop previews. */
.challenge-card[data-frame] { position: relative; }
.challenge-card[data-frame="copper"] { border-color: #d99c6c; box-shadow: inset 0 0 0 3px #674631; }
.challenge-card[data-frame="prism"] { border-top-color: #94ddff; border-right-color: #acafff; border-bottom-color: #e4bcff; border-left-color: #86f0ce; box-shadow: inset 0 0 0 3px #41576a; }
.challenge-owner { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.challenge-owner > span:last-child { min-width: 0; }
.challenge-owner strong, .challenge-owner small { display: block; overflow-wrap: anywhere; }
.challenge-owner strong { font-size: 15px; line-height: 1.3; }
.challenge-owner small { font-size: 13px; color: #bacad7; margin-top: 2px; }
.challenge-owner .challenge-owner-trophy { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: #decba7; }
.challenge-owner-trophy .trophy-mark { width: 20px; height: 23px; flex-shrink: 0; }
.challenge-owner-trophy > span { font-size: 13px; line-height: 1.3; }
.challenge-owner .challenge-owner-level { display: grid; place-content: center; flex: 0 0 43px; height: 43px; border: 1px solid #61798b; border-radius: 13px; background: #263f50; color: #f3f2e9; text-align: center; font-size: 19px; font-weight: 850; line-height: 1; }
.challenge-owner .challenge-owner-level small { font-size: 10px; line-height: 1; margin-top: 3px; }
[data-frame="copper"] .challenge-owner-level { border-color: #d99c6c; background: #604631; }
[data-frame="prism"] .challenge-owner-level { border-color: #a3caff; background: #344665; }
.challenge-card-hook { display: grid; gap: 6px; padding: 16px 0 18px; border-bottom: 1px solid #425567; }
.challenge-card-hook > span { color: #c3ed75; font-size: 14px; font-weight: 700; }
.challenge-card-hook strong { font-size: clamp(18px, 2vw, 23px); line-height: 1.3; }
.challenge-card-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; cursor: pointer; list-style: none; color: #beceda; font-size: 15px; font-weight: 650; }
.challenge-card-details > summary::-webkit-details-marker { display: none; }
.challenge-card-details > summary::after { content: '+'; font-size: 24px; color: #c3ed75; }
.challenge-card-details[open] > summary::after { content: '−'; }
.challenge-card-details > summary:focus-visible { outline: 2px solid #c3ed75; outline-offset: 3px; border-radius: 4px; }
.challenge-card-details .challenge-card-explanation { margin-top: 14px; color: #c5d3dd; font-size: 15px; line-height: 1.45; }
.challenge-card-details .challenge-card-tactic { margin-bottom: 2px; }
.challenge-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.challenge-card { background: #203a34; color: #fff8e8; border: 2px solid #242d28; border-radius: 24px; padding: 22px; box-shadow: 5px 6px 0 #b6b59e; overflow: hidden; }
.challenge-card-top { display: flex; justify-content: space-between; gap: 12px; color: #e1dfca; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.challenge-card h2 { font-size: clamp(27px, 3.1vw, 38px); max-width: 100%; }
.challenge-card-art { height: 352px; display: grid; place-items: center; position: relative; margin: 10px 0 14px; }
.challenge-card-art::before { content: ''; position: absolute; width: 288px; max-width: 94%; aspect-ratio: 1; background: #eddbaf; border-radius: 50%; }
.challenge-card-art .challenge-creature { position: relative; height: 100%; width: 100%; max-width: 350px; }
.challenge-card-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.challenge-card-parts > div { border: 2px solid #242d28; border-radius: 12px; padding: 8px 3px; text-align: center; background: #e3d9ef; color: #242d28; min-width: 0; }
.challenge-card-parts > div[data-slot="body"] { background: #f1d89f; }
.challenge-card-parts > div[data-slot="legs"] { background: #d2e3ed; }
.challenge-card-parts svg { height: 55px; width: 100%; margin: 0 auto 4px; }
.challenge-card-parts span { font-size: 14px; font-weight: 750; overflow-wrap: anywhere; }
.challenge-card-feature { background: #fffcf3; color: #242d28; border: 2px solid #242d28; border-radius: 14px; padding: 14px; margin-top: 14px; }
.challenge-card-feature strong { display: block; font-size: 20px; line-height: 1.2; margin: 3px 0 7px; }
.challenge-card-feature p { font-size: 15px; line-height: 1.45; }
.challenge-card-tactic { font-size: 14px; margin-top: 12px; color: #e1dfca; }
.challenge-instructions { display: grid; gap: 20px; padding: 8px 0; }
.challenge-instructions > h2 { font-size: 28px; }
.challenge-instructions > p { font-size: 17px; }
.challenge-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: challenge-step; }
.challenge-steps li { counter-increment: challenge-step; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; }
.challenge-steps li::before { content: counter(challenge-step); display: grid; place-items: center; height: 38px; background: #e3d9ef; border: 2px solid #3b463c; border-radius: 50%; font-weight: 800; }
.challenge-steps strong, .challenge-steps span { display: block; }
.challenge-steps strong { font-size: 18px; }
.challenge-steps span { color: var(--muted); font-size: 16px; margin-top: 3px; }
.challenge-message { padding: 18px; background: #fffcf3; border: 2px solid #b5b6a1; border-radius: 14px; }
.challenge-message p { font-size: 16px; margin-top: 7px; }
.challenge-link-field { display: grid; gap: 7px; }
.challenge-link-field .share-url { margin: 0; min-width: 0; width: 100%; font-size: 15px; }
.challenge-local-note { border-left: 4px solid #c34325; background: #f4e2cc; padding: 12px 14px; font-size: 16px; line-height: 1.45; }
.challenge-local-note strong { display: block; margin-bottom: 4px; }
.challenge-expiry { color: var(--muted); font-size: 14px; }
.challenge-actions { display: grid; gap: 10px; }
.challenge-actions .primary, .challenge-actions .secondary { width: 100%; }
@media (max-width: 760px) {
  .challenge-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .challenge-card { padding: 16px; border-radius: 20px; }
  .challenge-card-art { height: 304px; margin: 8px 0 12px; }
  .challenge-card-art::before { width: 254px; }
  .challenge-card h2 { font-size: 28px; }
  .challenge-instructions { padding: 0; gap: 16px; }
  .challenge-card-feature { padding: 12px; }
  .challenge-card-feature strong { font-size: 19px; }
  .challenge-incoming .challenge-card { margin-top: 0; }
  .shell:is([data-screen="share"], [data-screen="challenge"]) { padding-bottom: calc(102px + var(--safe-bottom)); }
  .challenge-actions > .primary { min-height: 58px; }
}
@media (max-width: 350px) {
  .challenge-card-art { height: 280px; }
  .challenge-card-parts { gap: 5px; }
  .challenge-card h2 { font-size: 25px; }
}

.challenge-send-details > summary { font-size: 16px; cursor: pointer; min-height: 48px; padding: 12px 0; }
.challenge-send-details > :not(summary) { margin-top: 14px; }
.challenge-send-details .secondary { width: 100%; }