:root {
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
}
html,
body {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
body {
    font-family: "Inter", sans-serif;
    overscroll-behavior-y: contain;
}
/* iOS: 16px+ font on inputs prevents zoom on focus */
input,
select,
button {
    font-size: 16px;
}
/* Tap targets */
button,
.tap {
    min-height: 44px;
    touch-action: manipulation;
}
/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.fade-in {
    animation: fadeIn 0.4s ease-in-out;
}
@keyframes drawIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
.draw-in {
    animation: drawIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes fillIn {
    0% {
        transform: scale(0.5);
        background-color: #f1f5f9;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        background-color: #34d399;
    }
}
.fill-in {
    animation: fillIn 0.5s ease-out forwards;
}
@keyframes shake {
    10%,
    90% {
        transform: translateX(-1px);
    }
    20%,
    80% {
        transform: translateX(2px);
    }
    30%,
    50%,
    70% {
        transform: translateX(-4px);
    }
    40%,
    60% {
        transform: translateX(4px);
    }
}
.shake {
    animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}
.pop {
    animation: pop 0.3s ease-out;
}
/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
/* Game card hover for non-touch */
@media (hover: hover) {
    .game-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(79, 70, 229, 0.15);
    }
}
.game-card {
    transition: all 0.2s ease;
}
.game-card:active {
    transform: scale(0.97);
}
/* Rectangle display min height */
#rectangle-display {
    min-height: 140px;
    transition: transform 0.1s ease-in-out;
}
/* Smooth scroll */
html {
    scroll-behavior: smooth;
}
/* Safe area padding for mobile */
.safe-pad-top {
    padding-top: calc(0.5rem + var(--safe-top));
}
.safe-pad-bottom {
    padding-bottom: calc(1rem + var(--safe-bottom));
}