@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');

body {
    font-family: 'Comic Neue', cursive;
}

.game-card {
    @apply p-8 rounded-xl shadow-md transition-all duration-300 flex flex-col items-center justify-center;
}

.game-card i {
    @apply w-12 h-12 mb-4;
}

.game-card h2 {
    @apply text-2xl font-bold text-gray-700;
}

.progress-circle {
    width: 100px;
    height: 100px;
    position: relative;
}

.progress-circle svg {
    transform: rotate(-90deg);
}

.progress-circle circle {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
}

.progress-circle circle:first-child {
    stroke: #e2e8f0;
}

.progress-circle circle:last-child {
    stroke: #4f46e5;
    stroke-dasharray: 283;
    stroke-dashoffset: calc(283 - (283 * var(--progress)) / 100);
    transition: stroke-dashoffset 0.5s ease;
}

.question-display {
    @apply text-5xl font-bold text-center my-8;
}

.answer-input {
    @apply text-3xl text-center w-32 py-2 border-b-2 border-indigo-400 focus:outline-none focus:border-indigo-700;
}