/* ==========================================================================
   omfg.cards — card design system ("Unholy Ritual")
   Shared by the TV (tv.js) and phone (player.js) via card-render.js.
   Prompt = a void tablet edged in blood; Answer = aged bone parchment.
   Tokens come from theme.css.
   ========================================================================== */

.card {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    border-radius: var(--radius);
    text-align: left;
    line-height: 1.32;
    -webkit-font-smoothing: antialiased;
    border: none;
    margin: 0;
    isolation: isolate;
}

.card__inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.card__text {
    white-space: pre-wrap;
    word-break: break-word;
}

.card__blank {
    display: inline-block;
    min-width: 1.6em;
    margin: 0 0.15em;
    border-bottom: 3px solid var(--ember);
}

/* ---- Prompt (black) card: a ritual tablet ------------------------------- */
.card--prompt {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(139, 30, 45, 0.35), transparent 60%),
        linear-gradient(160deg, #17121a 0%, #0b0910 100%);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid rgba(224, 75, 47, 0.28);
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Blood seam along the top edge + a ritual mark in the corner. */
.card--prompt::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: linear-gradient(90deg, transparent, var(--oxblood) 20%, var(--ember) 50%, var(--oxblood) 80%, transparent);
    opacity: 0.9;
}
.card--prompt::after {
    content: "\2726"; /* shared brand sparkle */
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 0.9em;
    color: var(--ember);
    opacity: 0.5;
    z-index: 0;
}

/* ---- Answer (white) card: aged bone parchment --------------------------- */
.card--answer {
    background: var(--bone);
    color: #17110c;
    font-weight: 600;
    border: 1px solid rgba(90, 18, 32, 0.22);
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    cursor: default;
}

button.card {
    cursor: pointer;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

button.card--answer:hover,
button.card--answer:active {
    transform: translateY(-4px) rotate(-0.6deg);
    border-color: var(--oxblood);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.6), var(--glow-ember);
}

/* Winner: an ember brand + gold filigree, not a flat outline. */
.card--winner {
    border-color: var(--gold) !important;
    box-shadow: var(--shadow-card), var(--glow-gold), 0 0 0 2px rgba(201, 162, 39, 0.55) !important;
    animation: unholy-winner 1.6s ease-in-out infinite alternate;
}
@keyframes unholy-winner {
    from { box-shadow: var(--shadow-card), 0 0 14px rgba(201,162,39,0.35), 0 0 0 2px rgba(201,162,39,0.5); }
    to   { box-shadow: var(--shadow-card), 0 0 30px rgba(224,75,47,0.55), 0 0 0 2px rgba(201,162,39,0.85); }
}

/* ---- Card back — a warded sigil ---------------------------------------- */
.card--back {
    background:
        radial-gradient(circle at 50% 50%, rgba(224,75,47,0.10), transparent 60%),
        repeating-linear-gradient(135deg, #16121c, #16121c 9px, #1e1826 9px, #1e1826 18px);
    border: 1px solid rgba(201, 162, 39, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}
.card--back::after {
    content: "\26E7"; /* inverted pentagram-ish glyph */
    font-family: var(--font-display);
    color: rgba(201, 162, 39, 0.7);
    font-size: 2em;
}

/* ---- Sizing variants: tv / phone / hand -------------------------------- */
.card--tv.card--prompt {
    padding: clamp(24px, 3.2vw, 46px) clamp(22px, 3vw, 40px);
    font-size: clamp(1.4rem, 3vw, 2.6rem);
    max-width: min(70vw, 1000px);
}
.card--tv.card--answer {
    padding: clamp(16px, 1.6vw, 26px) clamp(14px, 1.4vw, 22px);
    font-size: clamp(1rem, 1.5vw, 1.6rem);
    width: clamp(150px, 15vw, 300px);
    min-width: 140px;
    text-align: center;
}
.card--tv.card--answer .card__text { text-align: center; }

.card--phone.card--prompt {
    padding: 22px 18px;
    font-size: 1.3rem;
    min-height: 96px;
}
/* Hand + judge-pick cards share the .madlad-hand grid, so they get a FIXED
   height (not min-height) — every card is the same size regardless of answer
   length. Text is vertically centered; a long answer clamps with an ellipsis
   rather than stretching its card taller than the rest. */
.card--hand.card--answer {
    padding: 14px 12px;
    font-size: 0.95rem;
    height: 168px;
    width: 100%;
}
.card--hand.card--answer .card__inner { justify-content: center; }
.card--hand.card--answer .card__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}

@media (max-width: 480px) {
    .card--tv.card--prompt { font-size: 1.4rem; padding: 22px 18px; }
    .card--tv.card--answer { font-size: 1.05rem; padding: 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .card--winner { animation: none; }
    button.card { transition: none; }
}