*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select {
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

.hidden { display: none !important; }
.block { display: block; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { inset: 0; }
.-bottom-6 { bottom: -1.5rem; }
.flex { display: flex; }
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.min-h-screen { min-height: calc(var(--bp-vh, 1vh) * 100); }
.w-full { width: 100%; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-\[60px\] { width: 60px; }
.h-\[80px\] { height: 80px; }
.w-\[80px\] { width: 80px; }
.h-\[120px\] { height: 120px; }
.max-w-xs { max-width: 20rem; }
.max-w-md { max-width: 28rem; }
.max-w-4xl { max-width: 56rem; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 999px; }
.border-2 { border-width: 2px; border-style: solid; }
.border-white { border-color: #fff; }
.bg-black { background: #000; }
.bg-opacity-70 { background: rgba(0, 0, 0, 0.7); }
.bg-gray-900 { background: #111827; }
.bg-gray-800 { background: #1f2937; }
.bg-gray-700 { background: #374151; }
.bg-red-500 { background: #ef4444; }
.bg-blue-500 { background: #3b82f6; }
.bg-green-500 { background: #10b981; }
.bg-yellow-500 { background: #f59e0b; }
.text-white { color: #fff; }
.text-sm { font-size: 0.875rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-center { text-align: center; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.shadow-lg { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28); }
.cursor-pointer { cursor: pointer; }
.transition,
.transition-shadow { transition: 160ms ease; }
.hover\:bg-gray-600:hover { background: #4b5563; }
.hover\:bg-green-600:hover { background: #059669; }
.hover\:bg-red-600:hover { background: #dc2626; }
.hover\:bg-yellow-600:hover { background: #d97706; }
.hover\:shadow-xl:hover { box-shadow: 0 18px 30px rgba(0, 0, 0, 0.32); }
.opacity-70 { opacity: 0.7; }

.uno-card-back {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, #f59e0b 0 24%, transparent 25%),
        linear-gradient(135deg, #ef4444 0 50%, #1e40af 50% 100%);
}

.uno-card-back::after {
    content: "UNO";
    color: #fff;
    font-weight: 900;
    letter-spacing: -0.08em;
    transform: rotate(-18deg);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

@keyframes cardPlay {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(-5deg); }
    100% { transform: scale(1) rotate(0deg); }
}
@keyframes cardDraw {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

.card {
    transition: all 0.3s ease;
    transform-style: preserve-3d;
    cursor: pointer;
    height: 120px;
    width: 80px;
}
.card:hover {
    transform: translateY(-10px);
}
.card-play {
    animation: cardPlay 0.5s ease;
}
.card-draw {
    animation: cardDraw 0.5s ease;
}

.card-red { background-color: #ef4444; }
.card-blue { background-color: #3b82f6; }
.card-green { background-color: #10b981; }
.card-yellow { background-color: #f59e0b; }
.card-black { background-color: #1e293b; }

.uno-logo {
    background: linear-gradient(135deg, #f59e0b, #ef4444, #3b82f6, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    text-fill-color: transparent;
}