/* ===================================================================
   UNO - shared card visuals
   ================================================================ */

:root {
    --uno-red:    #d32d2d;
    --uno-yellow: #f6c813;
    --uno-green:  #4caf50;
    --uno-blue:   #2196f3;
    --uno-black:  #1a1a1a;
    --uno-red-d:    #8a1414;
    --uno-yellow-d: #9b7c00;
    --uno-green-d:  #2a7a32;
    --uno-blue-d:   #134e7d;
}

/* Base card -------------------------------------------------- */
.uno-card {
    --card-bg: var(--uno-red);
    --card-fg: #fff;
    --card-shadow: rgba(0,0,0,.35);
    position: relative;
    width: 64px;
    height: 96px;
    border-radius: 9px;
    background: var(--card-bg);
    border: 3px solid #fff;
    box-shadow: 0 4px 12px var(--card-shadow);
    flex-shrink: 0;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    user-select: none;
    overflow: hidden;
}

.uno-card[data-color="red"]    { --card-bg: var(--uno-red);    --card-fg: var(--uno-red-d); }
.uno-card[data-color="yellow"] { --card-bg: var(--uno-yellow); --card-fg: var(--uno-yellow-d); }
.uno-card[data-color="green"]  { --card-bg: var(--uno-green);  --card-fg: var(--uno-green-d); }
.uno-card[data-color="blue"]   { --card-bg: var(--uno-blue);   --card-fg: var(--uno-blue-d); }
.uno-card[data-color="black"]  {
    --card-bg: linear-gradient(135deg, var(--uno-red) 0%, var(--uno-red) 25%,
                                       var(--uno-yellow) 25%, var(--uno-yellow) 50%,
                                       var(--uno-green) 50%, var(--uno-green) 75%,
                                       var(--uno-blue) 75%, var(--uno-blue) 100%);
    --card-fg: #1a1a1a;
}

/* White oval in the middle */
.uno-card__ellipse {
    position: absolute;
    inset: 12% 8%;
    background: #fff;
    border-radius: 50%;
    transform: rotate(-18deg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.uno-card__symbol {
    font-family: var(--f-display);
    font-weight: 700;
    color: var(--card-fg);
    line-height: 1;
    text-align: center;
    transform: rotate(18deg);
    text-shadow: 0 2px 0 rgba(0,0,0,.08);
    /* base size; adjusted per card size below */
    font-size: 2.2rem;
}
.uno-card[data-color="black"] .uno-card__symbol {
    background: linear-gradient(135deg, var(--uno-red), var(--uno-yellow), var(--uno-green), var(--uno-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

/* Corner indicators */
.uno-card__corner {
    position: absolute;
    z-index: 2;
    color: #fff;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(0,0,0,.3);
    pointer-events: none;
}
.uno-card__corner--tl { top: 5px; left: 7px; }
.uno-card__corner--br { bottom: 5px; right: 7px; transform: rotate(180deg); }

/* Size variants */
.uno-card.uno-card--sm { width: 48px; height: 72px; border-width: 2px; border-radius: 7px; }
.uno-card.uno-card--sm .uno-card__symbol { font-size: 1.5rem; }
.uno-card.uno-card--sm .uno-card__corner { font-size: .7rem; }

.uno-card.uno-card--lg { width: 96px; height: 144px; border-width: 4px; border-radius: 12px; }
.uno-card.uno-card--lg .uno-card__symbol { font-size: 3.3rem; }
.uno-card.uno-card--lg .uno-card__corner { font-size: 1.4rem; }

/* States */
.uno-card.uno-card--faded { opacity: .42; filter: grayscale(.55); }
.uno-card.uno-card--playable { cursor: pointer; box-shadow: 0 4px 12px var(--card-shadow), 0 0 0 3px rgba(246,200,19,.7); }
.uno-card.uno-card--playable:hover { transform: translateY(-6px); box-shadow: 0 8px 18px var(--card-shadow); }
.uno-card.uno-card--playable:active { transform: translateY(-2px); }

.uno-card.uno-card--enter { animation: unoCardEnter .35s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes unoCardEnter {
    0%   { transform: translateY(-16px) rotate(-5deg) scale(.85); opacity: 0; }
    100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}

/* Wild card with declared color: small swatch ring */
.uno-card[data-declared="red"]    { box-shadow: 0 0 0 2px var(--uno-red),    0 4px 10px var(--card-shadow); }
.uno-card[data-declared="yellow"] { box-shadow: 0 0 0 2px var(--uno-yellow), 0 4px 10px var(--card-shadow); }
.uno-card[data-declared="green"]  { box-shadow: 0 0 0 2px var(--uno-green),  0 4px 10px var(--card-shadow); }
.uno-card[data-declared="blue"]   { box-shadow: 0 0 0 2px var(--uno-blue),   0 4px 10px var(--card-shadow); }

/* Card back (deck visual) */
.uno-card.uno-card--back {
    background: linear-gradient(135deg, #1a1a1a, #2a0712);
    border-color: #fff;
    position: relative;
}
.uno-card.uno-card--back::before {
    content: 'UNO';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--f-display);
    font-size: 1.4rem;
    font-style: italic;
    transform: rotate(-18deg);
    text-shadow: 0 0 12px rgba(255,255,255,.3);
}