/* Card Styling */
.card {
    width: var(--card-width);
    height: var(--card-height);
    border-radius: var(--card-radius);
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    border: 2px solid white;
    font-weight: 900;
    font-size: 24px;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.card-inner {
    width: 90%;
    height: 80%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: 4px solid white;
    transform: rotate(45deg);
    box-shadow: none;
}

.card-symbol {
    transform: rotate(-45deg);
    text-shadow: 2px 3px 0px #000;
    -webkit-text-stroke: 1px black;
    paint-order: stroke fill;
    font-size: calc(var(--card-width) * 0.6);
    font-weight: 900;
    color: white !important; 
    font-style: italic;
    white-space: nowrap;
}

/* Make multi-character symbols narrower so they don't get cut off */
.card[data-type="reverse_skip"] .card-symbol {
    font-size: calc(var(--card-width) * 0.35);
    letter-spacing: -2px;
}

.card[data-type="self_skip"] .card-symbol {
    font-size: calc(var(--card-width) * 0.35);
    letter-spacing: -2px;
}

.card[data-type="wild_purge"] .card-symbol {
    font-size: calc(var(--card-width) * 0.4);
    letter-spacing: -2px;
}

.card[data-type="wild10"] .card-symbol,
.card[data-type="wild25"] .card-symbol,
.card[data-type="wild50"] .card-symbol {
    font-size: calc(var(--card-width) * 0.45);
    letter-spacing: -1px;
}

.card[data-type="wild35_reverse"] .card-symbol {
    font-size: calc(var(--card-width) * 0.33);
    letter-spacing: -2px;
}

.card[data-type="wild_fair_share"] .card-symbol {
    font-size: calc(var(--card-width) * 0.5);
}

.card[data-type="wild_minus_infinity"] .card-symbol {
    font-size: calc(var(--card-width) * 0.5);
    letter-spacing: -2px;
}

.card[data-type="wild_reverse_skip_draw2"] .card-symbol {
    font-size: calc(var(--card-width) * 0.3);
    letter-spacing: -2px;
}

/* NEW: smaller icon for Mass Quality Control so it fits better */
.card[data-type="upgrade_all"] .card-symbol {
    font-size: calc(var(--card-width) * 0.4);
    letter-spacing: -1px;
}

/* Smaller center symbol for Wild Targeted Draw 4 so the text fits */
.card[data-type="wild_targeted_draw4"] .card-symbol {
    font-size: calc(var(--card-width) * 0.3);
    letter-spacing: -2px;
}

/* Inverted color effect for Wild -Infinity to make it stand out */
.card[data-type="wild_minus_infinity"] {
    filter: invert(1) hue-rotate(180deg);
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

.card[data-type="wild_square"] .card-symbol {
    font-size: calc(var(--card-width) * 0.45);
    letter-spacing: -1px;
}

/* Wild Item Box — Symbol statt Fremdgrafik (Text-Fallback '?') */

/* NEW: slightly smaller symbol for Wild /2 Reverse so it fits */
.card[data-type="wild_divide2"] .card-symbol {
    font-size: calc(var(--card-width) * 0.4);
    letter-spacing: -3px;
}

.card[data-type="wild_deflect"] .card-symbol {
    font-size: calc(var(--card-width) * 0.4);
    letter-spacing: -2px;
}

/* Wild No U — Symbol statt Fremdgrafik */

.card[data-type="mine_remover"] .card-symbol {
    font-size: calc(var(--card-width) * 0.5);
}

/* Wild UNO — Symbol statt Fremdgrafik (Text-Fallback 'UNO') */

.card.mystery-card {
    background: repeating-linear-gradient(45deg, #1a1a1a, #1a1a1a 10px, #333 10px, #333 20px);
    border-color: #fff;
    animation: mystery-pulse 3s infinite;
}

/* Ring statt Schein: pulsiert in der Staerke, nicht im Leuchten. */
@keyframes mystery-pulse {
    0% { box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }
    50% { box-shadow: 0 0 0 3px rgba(255,255,255,0.6); }
    100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }
}

.card[data-type="mystery"] .card-symbol {
    font-size: calc(var(--card-width) * 0.4);
    letter-spacing: -1px;
}

/* NEW: Anything Card special styling */
@keyframes anything-bg-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* "Anything" ist per Definition alle Farben — jetzt aus der Spielinhalt-Palette
   statt aus Neon, damit die Karte weiter als Regenbogen lesbar bleibt. */
.card[data-type="anything"] {
    background: linear-gradient(135deg,
        var(--color-purple),
        var(--color-cyan),
        var(--color-yellow),
        var(--color-orange),
        var(--color-green),
        var(--color-purple)
    );
    background-size: 400% 400%;
    animation: anything-bg-shift 6s ease-in-out infinite;
    border-color: #ffffff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

.card[data-type="anything"] .card-inner {
    border-color: rgba(255,255,255,0.9);
    background: radial-gradient(circle at center, rgba(0,0,0,0.6), transparent);
}

.card[data-type="anything"] .card-symbol {
    font-size: calc(var(--card-width) * 0.6);
    -webkit-text-stroke: 2px #000;
    text-shadow: 0 0 8px #000, 0 0 12px #000;
}

/* Illusion Wild Card */
.card[data-type="illusion"] .card-symbol {
    font-size: calc(var(--card-width) * 0.5);
    filter: blur(0.5px);
    text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

/* Scrambled State */
.card.scrambled {
    background: #1a1a1a !important;
    overflow: hidden;
    border-color: #666;
    animation: scramble-glitch 0.2s infinite;
}

/* Glitch ohne Schein: der Rand flackert, die Karte leuchtet nicht. */
@keyframes scramble-glitch {
    0% {
        box-shadow: 0 0 0 0 rgba(255,255,255,0.0);
        filter: none;
    }
    25% {
        box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
        filter: hue-rotate(10deg);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
        filter: hue-rotate(-10deg);
    }
    75% {
        box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
        filter: hue-rotate(5deg);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255,255,255,0.0);
        filter: none;
    }
}

.card.scrambled .card-inner,
.card.scrambled .card-symbol, 
.card.scrambled::after {
    display: none !important;
}

/* Question mark overlay for scrambled cards */
.card.scrambled::before {
    content: "?" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: calc(var(--card-width) * 0.8) !important;
    color: #fff !important;
    opacity: 0.5 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important;
    font-family: monospace;
}

/* Colors */
.card[data-color="red"] { background: var(--color-red); }
.card[data-color="blue"] { background: var(--color-blue); }
.card[data-color="green"] { background: var(--color-green); }
.card[data-color="yellow"] { background: var(--color-yellow); }
.card[data-color="orange"] { background: var(--color-orange); }
.card[data-color="purple"] { background: var(--color-purple); }
.card[data-color="cyan"] { background: var(--color-cyan); }
.card[data-color="pink"] { background: var(--color-pink); }
.card[data-color="wild"]:not([data-type="anything"]) { background: var(--color-black); }

/* Filled inner oval for Wild cards */
.card[data-is-wild="true"]:not([data-type="anything"]) .card-inner {
    background: white;
    overflow: hidden;
    border-color: white;
}

.card[data-is-wild="true"]:not([data-type="anything"]) .card-inner::before {
    content: "";
    position: absolute;
    /* Center and oversize to cover the rotated mask */
    top: -50%; left: -50%; width: 200%; height: 200%;
    
    background: 
        linear-gradient(90deg, var(--color-red) 50%, var(--color-blue) 50%) top center / 100% 50% no-repeat,
        linear-gradient(90deg, var(--color-yellow) 50%, var(--color-green) 50%) bottom center / 100% 50% no-repeat;
    
    /* Counter-rotate to align with card, then skew for vertical slant */
    transform: rotate(-45deg) skewX(-20deg);
    transform-origin: center;
    z-index: 1;
}

.card[data-is-wild="true"]:not([data-type="anything"]) .card-inner::after {
    display: none;
}

.card[data-is-wild="true"]:not([data-type="anything"]) .card-symbol {
    position: relative;
    z-index: 5;
}

/* Hide central icon on the regular Wild card (keep corner symbols) */
.card[data-type="wild"] .card-symbol {
    display: none;
}

/* Hide central icon on Semi-Wild as well (keep corner symbols) */
.card[data-type="semi_wild"] .card-symbol {
    display: none;
}

/* Joker / THY END IS NOW: Fremdgrafiken entfernt — rendern als Standardkarte mit Symbol */

/* Booster Pack — Fremdgrafik entfernt, rendert als Standardkarte mit Symbol */
.card[data-type="booster_pack"] {
    box-shadow: 0 0 0 2px var(--color-yellow);
}

/* Glob — Fremdgrafik entfernt, rendert als Standardkarte mit Symbol */

/* Smaller center symbol for Draw a 3 Wild so it fits better */
.card[data-type="wild_draw_3"] .card-symbol {
    font-size: calc(var(--card-width) * 0.4);
}

/* Corner numbers */
.card::before, .card::after {
    content: attr(data-symbol);
    position: absolute;
    font-size: calc(var(--card-width) * 0.2);
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 0 black;
    z-index: 10;
}
.card::before { top: 4px; left: 5px; }
.card::after { bottom: 4px; right: 5px; transform: rotate(180deg); }

.card-back {
    width: 100%;
    height: 100%;
    background: #111;
    border-radius: var(--card-radius);
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.card-back::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 80%;
    background: var(--color-red-deep);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(25deg);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.card-back.personal::before {
    background: var(--color-blue-deep); /* Blau fuer persoenliche Decks */
}

.card-back::after {
    content: "UNO";
    color: var(--color-yellow);
    font-weight: 900;
    font-style: italic;
    font-size: 16px;
    transform: rotate(-25deg);
    text-shadow: 2px 2px 0 #000;
    z-index: 1;
    font-family: 'Arial Black', sans-serif;
}

.card-outline {
    width: 100%;
    height: 100%;
    border-radius: var(--card-radius);
    border: 3px dashed rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.05);
}

/* Spielbar = Ring, nicht Schein. Der Hover-Ring nutzt den einen Akzent. */
.card.playable:hover {
    box-shadow: 0 0 0 3px var(--arc-accent);
    z-index: 10;
    cursor: pointer;
}

.card.playable {
    box-shadow: 0 0 0 2px var(--color-yellow);
}

/* Druck-Feedback direkt bei pointerdown (:active feuert dort, nicht erst bei click).
   Bewusst ueber box-shadow statt transform: renderer-hand.js setzt transform und
   filter als Inline-Style auf jede Handkarte und wuerde eine CSS-Regel schlagen. */
.card.playable:active {
    box-shadow: 0 0 0 5px var(--arc-accent);
    transition-duration: 0.09s;
}

/* Seltenheit pulsiert in der Ringstaerke statt im Leuchten. */
@keyframes epic-glow {
    0% { box-shadow: 0 0 0 2px var(--color-orange); border-color: white; }
    50% { box-shadow: 0 0 0 4px var(--color-orange); border-color: var(--color-orange); }
    100% { box-shadow: 0 0 0 2px var(--color-orange); border-color: white; }
}

.card.epic {
    animation: epic-glow 2s infinite;
}

@keyframes legendary-glow {
    0% { box-shadow: 0 0 0 2px var(--color-purple); border-color: white; }
    50% { box-shadow: 0 0 0 4px var(--color-purple); border-color: var(--color-purple); }
    100% { box-shadow: 0 0 0 2px var(--color-purple); border-color: white; }
}

.card.legendary {
    animation: legendary-glow 2s infinite;
}

.card-lock-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
    pointer-events: none;
}

.card.locked {
    cursor: not-allowed !important;
}

.card-count-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--color-red-deep); /* dunkleres Rot: weisser Text braucht 4.5:1 */
    color: white;
    border: 2px solid white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    z-index: 20;
    min-width: 24px;
    text-align: center;
}

/* Media Query Refactor for Cards */
@media (min-width: 768px) {
    /* Font sizes handled via var(--card-width) calculation now */
    .card-back::after { font-size: 22px; }
}

@media (min-width: 1024px) {
    .card { font-size: 32px; border-width: 3px; }
    .card-inner { border-width: 5px; }
    .card-symbol { -webkit-text-stroke: 2px black; }
    
    /* Font sizes handled via var(--card-width) calculation now */

    .card-back::after { font-size: 34px; text-shadow: 3px 3px 0 #000; }
}