/* Received challenge: the held-hint count means nothing there (hints are free and only counted). */
body.in-challenge #hud-hints-value { visibility: hidden; }

/* ---------- "Can you solve this?" tab and popups (js/challengeUi.js) ---------- */
#contest-pane-challenge:not(.hidden) { display: grid; gap: 12px; align-content: start; }
.challenge-actions { grid-template-columns: minmax(0, 1fr) 52px; align-items: center; }
.challenge-actions .contest-btn { min-height: 48px; }
#btn-challenge-code { min-width: 52px; padding: 0; font-size: 24px; }
.challenge-empty { text-align: center; padding: 8px 12px; }
.challenge-empty.hidden { display: none; }
.challenge-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.challenge-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 56px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .55); cursor: pointer; touch-action: manipulation; }
.challenge-item-art { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: #e9dcc0; }
.challenge-item-text { min-width: 0; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.challenge-pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 52vh; overflow-y: auto; grid-auto-rows: max-content; align-content: start; }
.challenge-pick-cell { position: relative; display: block; min-height: 44px; aspect-ratio: 1 / 1; padding: 0; border: 2px solid var(--cs-gold, #f2c14e); border-radius: 12px; overflow: hidden; background: #e9dcc0; cursor: pointer; touch-action: manipulation; }
.challenge-pick-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.challenge-pick-label { position: absolute; left: 0; right: 0; bottom: 2px; font-size: 13px; font-weight: 900; color: #fff; text-align: center; }
.challenge-table-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; max-height: 50vh; overflow-y: auto; }
.challenge-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "rank name score" ". . replay"; align-items: center; column-gap: 8px; min-height: 44px; padding: 4px 8px; border-radius: 10px; background: rgba(255, 255, 255, .55); font-size: 14px; }
.challenge-row-rank { grid-area: rank; font-weight: 900; text-align: center; }
.challenge-row-name { grid-area: name; min-width: 0; font-weight: 800; overflow-wrap: anywhere; }
.challenge-row-score { grid-area: score; text-align: right; font-size: 13px; }
.challenge-row-replay { grid-area: replay; text-align: right; font-size: 12px; opacity: .75; }
.challenge-row-replay:empty { display: none; }
.challenge-row--me { background: #fff2b8; outline: 2px solid var(--cs-gold, #f2c14e); }
.challenge-row--sender { background: #dbeaff; font-style: italic; }
/* Result screen (2.5.2): thumbs up, thumbs down and "공유" as three same-size icon buttons in one row
   above NEXT, so the popup does not grow (it replaces the old full-width send button). */
.clear-quick-row { display: flex; justify-content: center; gap: 12px; margin: 6px 0 2px; }
.clear-quick-row.hidden, .clear-quick-btn.hidden { display: none; }
.clear-quick-btn { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 60px; height: 48px; min-height: 0; margin: 0; padding: 0; border-radius: 14px; border: 3px solid #b8862e; background: linear-gradient(180deg, #ffe7a3, #f4c55a); box-shadow: inset 0 -3px 0 rgba(122, 74, 10, 0.35); cursor: pointer; touch-action: manipulation; }
.clear-quick-btn[aria-pressed="true"] { border-color: #1d5bd6; background: linear-gradient(180deg, #6fb6ff, #1f73f0); box-shadow: inset 0 3px 0 rgba(0, 30, 90, 0.35); }
.clear-quick-icon { display: block; width: 26px; height: 26px; pointer-events: none; }
/* A thumb's short float-up (2.5.2): +1 heart / -1 crying face, or +1 over the coin counter for a share. */
.feedback-float { position: fixed; z-index: 400; display: flex; align-items: center; gap: 2px; transform: translate(-50%, -100%); pointer-events: none; animation: feedback-float-up 0.85s ease-out forwards; }
.feedback-float-icon { width: 32px; height: 32px; }
.feedback-float-text { color: #fff; font-size: 24px; font-weight: 900; line-height: 1; }
@keyframes feedback-float-up { 0% { opacity: 0; transform: translate(-50%, -60%) scale(0.8); } 20% { opacity: 1; transform: translate(-50%, -110%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }
/* The thanks popup: one line and, the first time, the coin. */
.popup-card--feedback { width: min(320px, calc(100vw - 48px)); text-align: center; }
.popup-feedback-reward { margin: 4px 0 10px; font-size: 26px; font-weight: 900; }
.popup-feedback-reward.hidden { display: none; }
.clear-quick-btn--share .clear-quick-icon { width: 20px; height: 20px; }
.clear-quick-label { display: block; max-width: 56px; overflow: hidden; color: #5a3608; font-size: 11px; letter-spacing: -0.02em; font-weight: 900; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 340px) { .challenge-pick-grid { gap: 6px; } .challenge-item { grid-template-columns: 48px minmax(0, 1fr); } .challenge-item-art { width: 48px; height: 48px; } }
.challenge-item--sent { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.challenge-sent-head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.challenge-sent-actions, .challenge-sent-ask { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.challenge-sent-ask-text { margin-right: auto; color: #4a2a10; font-weight: 800; font-size: 14px; }
.challenge-sent-btn { min-height: 34px; padding: 4px 14px; border-radius: 999px; border: 2px solid #c9a46a; background: #fff8e8; color: #4a2a10; font: inherit; font-size: 14px; font-weight: 800; }
.challenge-sent-btn--delete { border-color: #d0564a; color: #b0302a; }
.challenge-sent-detail { margin: 0; padding: 6px 0 0; list-style: none; border-top: 1px dashed #d8c09a; }
.challenge-sent-empty { color: #6a4a2a; font-size: 14px; }