* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100vh;
    overflow: hidden; /* Force no scroll */
}

body {
    color: #fff;
    font-family: 'Arial Black', Impact, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

/* Authentic UNO Card Back background feel */
.app-background {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at center, #E81A24 0%, #aa0000 80%, #660000 100%);
    z-index: -2;
}

.pattern-overlay {
    position: fixed;
    top: 50%; left: 50%;
    width: 150vh; height: 100vh;
    transform: translate(-50%, -50%) rotate(-25deg);
    border-radius: 50%;
    border: 8vh solid rgba(0,0,0,0.08); 
    box-shadow: inset 0 0 0 4vh rgba(0,0,0,0.04);
    z-index: -1;
    pointer-events: none;
}

.app-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 1200px;
    z-index: 10;
    padding: 2vh 1vw;
}

.header {
    margin-bottom: 2vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
}

.uno-logo-container {
    margin-bottom: 1vh;
    filter: drop-shadow(0 2vh 3vh rgba(0,0,0,0.7));
}

.uno-logo {
    background: #E81A24;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    transform: rotate(-15deg);
    border: clamp(2px, 0.5vh, 5px) solid #fff;
    box-shadow: 0 0 0 clamp(4px, 1vh, 8px) #F7D002, inset 0 0 2vh rgba(0,0,0,0.4);
    padding: clamp(5px, 1.5vh, 15px) clamp(15px, 4vw, 50px);
    display: inline-block;
}

.uno-logo span {
    color: #F7D002;
    font-size: clamp(2rem, 8vh, 5rem);
    font-weight: 900;
    -webkit-text-stroke: 1px #000;
    text-shadow: 4px 4px 0px #000, 0 0 15px rgba(0,0,0,0.5);
    letter-spacing: -0.3vw;
    line-height: 1;
}

.title {
    font-size: clamp(1rem, 3vh, 2.2rem);
    letter-spacing: clamp(5px, 1vw, 12px);
    color: #fff;
    text-shadow: 2px 2px 0px #000, 0 3px 10px rgba(0,0,0,0.8);
    position: relative;
    top: 1vh;
}

.cards-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 2vw, 40px);
    flex-wrap: nowrap;
    flex: 1 1 auto;
    width: 100%;
    padding: 0 2vw;
}

.player-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh;
    height: 100%;
    justify-content: center;
}

/* Authentic physical card specs, resizable strictly by container logic and vh */
.uno-card {
    height: clamp(220px, 45vh, 380px);
    aspect-ratio: 0.65;
    border-radius: clamp(10px, 2vh, 18px);
    padding: clamp(5px, 1vh, 12px);
    background-color: #fff;
    box-shadow: 0 2vh 4vh rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.1), 0 0.5vh 1.5vh rgba(0,0,0,0.3);
    transform: rotate(var(--rotation));
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s;
    display: flex;
    cursor: default;
    position: relative;
    container-type: inline-size;
}

.player-column:hover .uno-card {
    transform: rotate(0deg) translateY(-2vh) scale(1.08);
    box-shadow: 0 4vh 6vh rgba(0,0,0,0.8), inset 0 0 0 1px rgba(0,0,0,0.1);
    z-index: 20;
}

.card-inner {
    border-radius: clamp(4px, 1vh, 8px);
    background-color: var(--card-color);
    flex: 1;
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 40%, rgba(0,0,0,0.1) 100%);
    box-shadow: inset 0 0 0.5vh rgba(0,0,0,0.4);
}

.card-corner {
    position: absolute;
    width: 25cqw;
    height: 25cqw;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
}
.top-left { top: 3cqw; left: 3cqw; }
.bottom-right { bottom: 3cqw; right: 3cqw; transform: rotate(180deg); }

.mini-oval {
    position: absolute;
    width: 20cqw;
    height: 15cqw;
    background: #fff;
    border-radius: 50%;
    transform: rotate(-25deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* FIXED TEXT CRUSH: removed text-stroke and only using shadow */
.corner-text {
    position: relative;
    z-index: 2;
    color: var(--card-color);
    font-size: 10cqw;
    text-shadow: 1px 1px 0px #000, 0.2cqw 0.2cqw 0px #000;
    line-height: 1;
}

.card-center {
    position: absolute;
    top: 50%; left: 50%;
    width: 70cqw; height: 70cqw;
    transform: translate(-50%, -50%) rotate(-25deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.oval-bg {
    position: absolute;
    width: 100cqw;
    height: 70cqw;
    background: #fff;
    border-radius: 50%;
    box-shadow: inset 0 0 0 3cqw var(--card-color), 0 3cqw 6cqw rgba(0,0,0,0.4);
    z-index: -1;
}

/* Exception: large font is safe for thick text-stroke */
.score-display {
    font-size: 45cqw;
    line-height: 0.8;
    color: var(--card-color);
    -webkit-text-stroke: max(1px, 0.8cqw) #000;
    text-shadow: 2cqw 2cqw 0px #000, 0 0 3cqw rgba(0,0,0,0.5);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* FIXED TEXT CRUSH */
.wins-label {
    position: relative;
    z-index: 2;
    color: var(--card-color);
    font-size: 8cqw;
    text-shadow: 1px 1px 0px #000, 0.3cqw 0.3cqw 0px #000;
    margin-top: -1cqw;
    letter-spacing: 0.5cqw;
}

/* Animations */
@keyframes popCard {
    0% { transform: translate(-50%, -50%) rotate(-25deg) scale(1); }
    50% { transform: translate(-50%, -50%) rotate(-25deg) scale(1.4); }
    100% { transform: translate(-50%, -50%) rotate(-25deg) scale(1); }
}
.pop-anim {
    animation: popCard 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes shrinkCard {
    0% { transform: translate(-50%, -50%) rotate(-25deg) scale(1); }
    50% { transform: translate(-50%, -50%) rotate(-25deg) scale(0.85); }
    100% { transform: translate(-50%, -50%) rotate(-25deg) scale(1); }
}
.shrink-anim {
    animation: shrinkCard 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.action-buttons {
    display: flex;
    gap: 1vw;
    align-items: center;
    filter: drop-shadow(0 0.5vh 1vh rgba(0,0,0,0.5));
    justify-content: center;
}

/* FIXED TEXT CRUSH: Using text-shadow instead of stroke for small scalable elements */
.win-btn {
    background: var(--card-color);
    border: clamp(3px, 0.8vh, 6px) solid #fff;
    padding: clamp(5px, 1vh, 10px) clamp(15px, 3vw, 35px);
    border-radius: clamp(20px, 4vh, 40px);
    font-size: clamp(1.2rem, 3.5vh, 2.8rem);
    color: #fff;
    text-shadow: 2px 2px 0px #000, 3px 3px 0px rgba(0,0,0,0.8);
    cursor: pointer;
    box-shadow: inset 0 0 1vh rgba(0,0,0,0.5);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    line-height: 1;
}
.win-btn:hover {
    transform: translateY(-0.8vh) scale(1.1);
    box-shadow: inset 0 0 1vh rgba(0,0,0,0.5), 0 1.5vh 2.5vh rgba(0,0,0,0.5);
}
.win-btn:active {
    transform: translateY(0.2vh) scale(0.95);
}

/* FIXED TEXT CRUSH */
.minus-btn {
    background: #000;
    color: #fff;
    border: clamp(2px, 0.5vh, 4px) solid #fff;
    width: clamp(40px, 8vh, 65px);
    height: clamp(40px, 8vh, 65px);
    border-radius: 50%;
    font-size: clamp(1.2rem, 3vh, 2.2rem);
    text-shadow: 2px 2px 0px rgba(255,255,255,0.3);
    box-shadow: inset 0 0 1vh rgba(255,255,255,0.2);
    display: flex; justify-content: center; align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    flex-shrink: 0;
}
.minus-btn::before {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    pointer-events: none;
}
.minus-btn:hover {
    background: #333;
    transform: translateY(-0.4vh) scale(1.1);
    box-shadow: inset 0 0 1vh rgba(255,255,255,0.3), 0 1vh 2vh rgba(0,0,0,0.5);
}
.minus-btn:active {
    transform: translateY(0.1vh) scale(0.95);
}

/* Sparkles when clicking win */
.sparkle {
    position: absolute;
    pointer-events: none;
    background: #F7D002;
    border: 2px solid #000;
    border-radius: 50%;
    z-index: 100;
    box-shadow: 0 0 10px #F7D002, 0 0 20px #fff;
    animation: sparkleAnim 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes sparkleAnim {
    0% { transform: scale(0); opacity: 1; }
    50% { transform: scale(1.5) rotate(180deg); opacity: 1; }
    100% { transform: scale(0) translateY(-80px) rotate(360deg); opacity: 0; }
}