/**
 * Request card — unified component for patron requests across all surfaces:
 *   - .wakasm-rcard--feed  : /community-requests/ (3-up box-art card list)
 *   - .wakasm-rcard--hub   : /patron-hub/ (user's own queue)
 *   - .wakasm-rcard--take  : on-page Community Takes (single game/boardgame pages)
 *
 * One source of truth for visual treatment so all three surfaces look + behave
 * the same. Surface modifiers below tweak only the strictly necessary
 * differences (e.g. take cards have .wakasm-rcard-q-overlay for the ??? hero).
 *
 * Hero variants (.wakasm-vs-frame, .wakasm-debate-frame) live in
 * components/request-hero.css and apply to .wakasm-rcard-hero on every surface.
 *
 * See ARCHITECTURE: 2026-05-07 unification (CLAUDE.md rule 4a). Replaces the
 * old parallel namespaces .prv2-card-* + .pc-take-*.
 */

/* ---- Card shell --------------------------------------------------------- */
.wakasm-rcard {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1f242a 0%, #161a1f 100%);
    border: 1px solid rgba(255, 240, 199, 0.12);
    border-radius: 10px;
    /* No overflow:hidden — joiner-overflow popover needs to escape this box.
       Hero clips its image internally with matching top-corner radius. */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.wakasm-rcard:hover {
    border-color: rgba(255, 201, 54, 0.35);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
}
.wakasm-rcard.is-completed { opacity: 0.7; }

/* Lift the whole card above its grid-sibling neighbors while the joiner
   popover is open — otherwise sibling cards paint over the escaping popover. */
.wakasm-rcard:has(.wakasm-rcard-joiners-more:hover),
.wakasm-rcard:has(.wakasm-rcard-joiners-more:focus-visible) {
    z-index: 50;
}

/* Brief highlight when card is the URL #target (e.g. "See who's asking" crosslink). */
.wakasm-rcard:target {
    border-color: var(--prv2-coral, #f5755a);
    box-shadow: 0 0 0 3px rgba(245, 117, 90, 0.35), 0 6px 14px rgba(0, 0, 0, 0.55);
    animation: wakasm-rcard-target-pulse 1.6s ease-out 0s 2;
    scroll-margin-top: 100px;
}
@keyframes wakasm-rcard-target-pulse {
    0%   { box-shadow: 0 0 0 3px rgba(245, 117, 90, 0.7),  0 6px 14px rgba(0, 0, 0, 0.55); }
    100% { box-shadow: 0 0 0 3px rgba(245, 117, 90, 0.15), 0 6px 14px rgba(0, 0, 0, 0.55); }
}

/* ---- Hero --------------------------------------------------------------- */
.wakasm-rcard-hero {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #0e1113;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    line-height: 0;
    text-decoration: none;
}
.wakasm-rcard-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.4s ease;
}
/* Default single-thumbnail hover scale — exclude VS hero so its sides own
   their own per-side hover behavior. */
.wakasm-rcard-hero:not(.wakasm-vs-frame):hover > img:first-child {
    transform: scale(1.04);
}

.wakasm-rcard-hero--question {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%, #2a1f3a 0%, #160e22 70%);
}
.wakasm-rcard-hero-mark {
    font-family: 'Press Start 2P', monospace, sans-serif;
    font-size: 56px;
    color: rgba(255, 201, 54, 0.85);
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
    line-height: 1;
}

/* ---- Ask-a-question hero: dimmed game art + arched ??? overlay -----------
   Concept-defining (the question is the whole card), so it owns the middle
   instead of getting a corner chip. The radial gradient fills the frame when
   no game thumb is attached (channel-scoped questions); when an img is present
   it covers the gradient. */
.wakasm-rcard-hero--ask {
    background: radial-gradient(circle at 50% 40%, #2a1f3a 0%, #160e22 70%);
}
.wakasm-rcard-hero--ask img {
    filter: brightness(0.65) saturate(0.9);
    transition: filter 0.3s ease, transform 0.3s ease;
}
.wakasm-rcard-hero--ask:hover > img:first-child {
    filter: brightness(0.78) saturate(1);
    transform: scale(1.03);
}
.wakasm-rcard-q-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
    z-index: 2;
}
.wakasm-rcard-q {
    font-family: 'Changa', system-ui, sans-serif;
    font-weight: 950;
    color: #fff8e7;
    text-shadow:
        0 3px 0 rgba(0, 0, 0, 0.45),
        0 0 14px rgba(0, 0, 0, 0.6),
        0 0 28px rgba(229, 93, 82, 0.5);
    line-height: 1;
    display: inline-block;
}
.wakasm-rcard-q--1 { font-size: 42px; transform: translateY(14px) rotate(-18deg); color: #ffd9a8; }
.wakasm-rcard-q--2 { font-size: 72px; transform: translateY(-6px) rotate(-2deg);  color: #fff8e7; }
.wakasm-rcard-q--3 { font-size: 50px; transform: translateY(10px) rotate(16deg);  color: #f9b48a; }

/* ---- Action-type corner chip --------------------------------------------
   Top-left badge for action types whose hero is the primary game thumb.
   Concept-defining types (request_comparison / suggest_similar / suggest_better
   2-up VS frames; counterpoint center pooter overlay; ask_question arched ???)
   own the middle and skip the chip. Top-right is reserved for the status pill;
   bottom for caption/username. */
.wakasm-rcard-chip {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #fff8e7;
    box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    color: #fff8e7;
    font-family: 'Changa', system-ui, sans-serif;
    font-weight: 950;
    font-size: 20px;
    line-height: 1;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
    transform: rotate(-4deg);
}

.wakasm-rcard-chip--replay { background: linear-gradient(180deg, #4da44b 0%, #2e7a2c 100%); }
.wakasm-rcard-chip--play   { background: linear-gradient(180deg, #4da44b 0%, #2e7a2c 100%); font-size: 16px; }
.wakasm-rcard-chip--review { background: linear-gradient(180deg, #ffc936 0%, #c89a1f 100%); color: #2a1a00; text-shadow: 0 1px 0 rgba(255,255,255,0.25); font-size: 18px; }
.wakasm-rcard-chip--rerank { background: linear-gradient(180deg, #a87bd1 0%, #6e4ba0 100%); font-size: 22px; }
.wakasm-rcard-chip--add    { background: linear-gradient(180deg, #4da44b 0%, #2e7a2c 100%); font-size: 24px; }
.wakasm-rcard-chip--stream { background: linear-gradient(180deg, #5b8def 0%, #2f5ec0 100%); font-size: 16px; }
.wakasm-rcard-chip--cover  { background: linear-gradient(180deg, #a87bd1 0%, #6e4ba0 100%); font-size: 18px; }

/* VS-style 2-up hero variants come from components/request-hero.css. Counterpoint
   uses .wakasm-debate-badge (also in request-hero.css) as a transparent overlay
   on the primary thumb. */

/* ---- Status pill (in hero corner) --------------------------------------- */
.wakasm-rcard-status {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.wakasm-rcard-status--pending           { background: var(--wakasm-blue); }
.wakasm-rcard-status--accepted          { background: var(--wakasm-purple); }
.wakasm-rcard-status--completed         { background: var(--wakasm-green); }
.wakasm-rcard-status--declined          { background: var(--wakasm-gray); }
.wakasm-rcard-status--awaiting_approval { background: var(--wakasm-blue); }

/* ---- Body --------------------------------------------------------------- */
.wakasm-rcard-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 14px;
    flex: 1;
}

.wakasm-rcard-actor {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    color: #f8ead0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.wakasm-rcard-sprite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.wakasm-rcard-sprite img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.wakasm-rcard-name {
    color: var(--cream, #f5e8c8);
    font-weight: 900;
}
.wakasm-rcard-action { color: #d8c6a8; }
.wakasm-rcard-action a {
    color: #b9e6b6;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 1px dotted rgba(185, 230, 182, 0.5);
}
.wakasm-rcard-action a:hover {
    color: #d6f3d4;
    border-bottom-color: #d6f3d4;
}
.wakasm-rcard-rec-primary {
    color: var(--cream, #f5e8c8);
    font-weight: 800;
}
.wakasm-rcard-rec-pending {
    color: #b9e6b6;
    font-weight: 800;
    font-style: italic;
}

/* ---- Game pill (feed/hub: linked primary game in body) ------------------ */
.wakasm-rcard-game {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    padding: 3px 10px;
    background: rgba(255, 201, 54, 0.14);
    border: 1px solid rgba(255, 201, 54, 0.5);
    border-radius: 6px;
    color: #ffd564;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    line-height: 1.25;
}
.wakasm-rcard-game:hover {
    color: #ffe58a;
    background: rgba(255, 201, 54, 0.22);
}

/* ---- Inline rec-game pill (feed/hub: arrow → linked rec) ---------------- */
.wakasm-rcard-recgame {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 6px;
    background: rgba(77, 164, 75, 0.12);
    border: 1px solid rgba(77, 164, 75, 0.45);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.25;
}
.wakasm-rcard-recgame-arrow {
    color: #4da44b;
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
}
.wakasm-rcard-recgame-link {
    color: #b9e6b6;
    font-weight: 800;
    text-decoration: none;
}
a.wakasm-rcard-recgame-link:hover { color: #d6f3d4; }
.wakasm-rcard-recgame-pending {
    color: #b8a98a;
    font-style: italic;
    font-weight: 600;
    font-size: 11px;
}

/* ---- Quote / question text ---------------------------------------------- */
.wakasm-rcard-quote {
    margin: 0;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid var(--orange-line, #f5755a);
    border-radius: 4px;
    color: #f8ead0;
    font-size: 13px;
    line-height: 1.4;
    font-style: italic;
}

/* ---- Joiners ------------------------------------------------------------ */
.wakasm-rcard-joiners {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 4px;
    color: #f8ead0;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}
.wakasm-rcard-joiners-prefix {
    color: #b8a98a;
    font-style: italic;
    font-weight: 600;
    margin-right: 2px;
}
.wakasm-rcard-joiner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.wakasm-rcard-joiner-sprite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.wakasm-rcard-joiner-sprite img {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.wakasm-rcard-joiner strong {
    color: var(--cream, #f5e8c8);
    font-weight: 800;
}

/* "+N more" pill + popover (only when joiner_cap is exceeded). */
.wakasm-rcard-joiners-more {
    position: relative;
    padding: 2px 9px;
    background: rgba(255, 201, 54, 0.18);
    border: 1px solid rgba(255, 201, 54, 0.4);
    border-radius: 999px;
    color: #ffd564;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.wakasm-rcard-joiners-more:hover,
.wakasm-rcard-joiners-more:focus-visible {
    background: rgba(255, 201, 54, 0.28);
    outline: none;
}
.wakasm-rcard-joiners-pop {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    width: max-content;
    max-width: 320px;
    padding: 10px 12px;
    background: #0f1216;
    border: 1px solid rgba(255, 201, 54, 0.4);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    color: #f8ead0;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
    z-index: 30;
}
.wakasm-rcard-joiners-pop::after {
    content: '';
    position: absolute;
    left: 14px;
    bottom: -6px;
    width: 10px;
    height: 10px;
    background: #0f1216;
    border-right: 1px solid rgba(255, 201, 54, 0.4);
    border-bottom: 1px solid rgba(255, 201, 54, 0.4);
    transform: rotate(45deg);
}
.wakasm-rcard-joiners-more:hover .wakasm-rcard-joiners-pop,
.wakasm-rcard-joiners-more:focus-visible .wakasm-rcard-joiners-pop {
    display: flex;
}
.wakasm-rcard-joiners-pop strong {
    color: var(--cream, #f5e8c8);
    font-weight: 800;
}

/* ---- Vote button + static "your take" ----------------------------------- */
.wakasm-rcard-vote {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 6px 12px 6px 10px;
    background: var(--salmon, #f5755a);
    color: var(--salmon-on, #fff);
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 1px 0 var(--salmon-dark, #b53d34);
    transition: background 0.15s ease, transform 0.1s ease;
}
.wakasm-rcard-vote:hover:not(:disabled) {
    background: var(--salmon-hover, #ff8a6f);
    transform: translateY(-1px);
}
.wakasm-rcard-vote:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.wakasm-rcard-vote.is-voted {
    background: rgba(77, 164, 75, 0.28);
    border: 1px solid #4da44b;
    color: #d6f3d4;
    box-shadow: none;
}
.wakasm-rcard-vote-arrow {
    font-size: 10px;
    line-height: 1;
}
.wakasm-rcard-vote-count {
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    color: #f5e8c8;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    line-height: 1.4;
}
.wakasm-rcard-vote.is-voted .wakasm-rcard-vote-count {
    background: #4da44b;
    color: #0a0a0a;
}
.wakasm-rcard-vote-cost {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 2px;
    padding: 1px 7px 1px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    color: #ffd564;
    font-size: 11px;
    font-weight: 900;
}

/* Static "your take" indicator (replaces button on the author's own card). */
.wakasm-rcard-vote-static {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 6px 10px;
    border: 1px dashed rgba(255, 240, 199, 0.2);
    border-radius: 999px;
    color: #b8a98a;
    font-size: 12px;
    font-weight: 700;
}
.wakasm-rcard-vote-static-hint {
    font-style: italic;
    color: #8a7a5e;
}

/* Inline error/info message after the vote button (e.g. "not enough credits"). */
.wakasm-rcard-vote-msg {
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(255, 104, 93, 0.15);
    border-left: 3px solid #ff685d;
    color: #ffb8b3;
    font-size: 11px;
}

/* ---- Meta footer (date + credits) --------------------------------------- */
.wakasm-rcard-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
    color: #b8a98a;
    font-size: 11px;
    font-weight: 700;
}
.wakasm-rcard-date { font-style: italic; }
.wakasm-rcard-credits {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #ffd564;
    font-weight: 900;
    font-size: 12px;
}