/* ============================================
   Math Express - Custom Styles
   ============================================ */

/* Prevent text selection */
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Allow text selection only in specific elements if needed later */
.allow-select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Flip Card Animation */
.card-3d {
    perspective: 1000px;
}

.card-3d .card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.card-3d .card-inner.flipped {
    transform: rotateY(180deg);
}

.card-3d .card-front,
.card-3d .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-3d .card-front {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.card-3d .card-back {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    transform: rotateY(180deg);
    border: 2px solid #475569;
}

/* Box Card Styling */
.box-card {
    aspect-ratio: 1;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    min-width: 0;
}

.box-card:hover:not(.solved):not(.flipped) {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.box-card.flipped .card-inner {
    transform: rotateY(180deg);
}

.box-card.solved {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.box-card.solved .card-inner {
    transform: rotateY(180deg);
}

.box-card .card-front .box-icon {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
}

.box-card .card-back .card-value {
    font-size: clamp(1.25rem, 4vw, 2rem);
}

/* Order Card Styling */
.order-card {
    padding: clamp(0.5rem, 2vw, 1rem);
    border-radius: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-width: 0;
}

.order-card .order-value {
    font-size: clamp(1.25rem, 4vw, 2rem);
    font-weight: bold;
    color: white;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.order-card .order-status {
    font-size: clamp(0.6rem, 2vw, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.order-card.active {
    border: 3px solid #fbbf24;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
    transform: scale(1.02);
}

.order-card.completed {
    background: linear-gradient(135deg, #065f46 0%, #064e3b 100%);
    opacity: 0.7;
    cursor: not-allowed;
}

.order-card.pending {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    opacity: 0.8;
}

.order-card .check-mark {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #10b981;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Shake Animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

/* Pop Up Animation */
@keyframes pop-up {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

.animate-pop-up {
    animation: pop-up 0.3s ease-out forwards;
}

/* Success Glow */
@keyframes success-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 40px rgba(16, 185, 129, 0.7); }
}

.success-glow {
    animation: success-glow 0.5s ease-in-out 2;
}

/* Sum Display */
.sum-display {
    transition: color 0.2s ease;
}

.sum-display.exceeds {
    color: #ef4444;
}

.sum-display.matches {
    color: #10b981;
}

/* Button Hover Effects */
button:not(:disabled):hover {
    transform: translateY(-2px);
}

button:not(:disabled):active {
    transform: translateY(0);
}

/* Modal Backdrop */
.modal-backdrop {
    backdrop-filter: blur(4px);
}

/* CTA Modal Button Logos */
.shopee-logo {
    width: 28px;
    height: 28px;
    background: #fff;
    color: #EE4D2D;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
}

.tokopedia-logo {
    width: 28px;
    height: 28px;
    background: #fff;
    color: #03AC0E;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
}

/* Social Icons */
.social-icon {
    width: 24px;
    height: 24px;
}

/* Target Selection Buttons */
.target-btn {
    transition: all 0.2s ease;
}

.target-btn.ring-2 {
    box-shadow: 0 0 0 2px white;
}

/* Mobile Menu */
#mobileMenu > div {
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
}

/* Post Match Modal */
#postMatchModal > div {
    border: 2px solid #fbbf24;
}

/* Order card selectable */
.order-card[status="pending"],
.order-card[status="active"] {
    cursor: pointer;
}

.order-card[status="completed"],
.order-card[status="taken"] {
    cursor: not-allowed;
}

/* Player highlight in 2P */
.player1-active {
    border: 2px solid #10b981 !important;
    background: rgba(16, 185, 129, 0.2) !important;
}

.player2-active {
    border: 2px solid #fbbf24 !important;
    background: rgba(251, 191, 36, 0.2) !important;
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

/* Mobile Small (320px - 479px) */
@media (max-width: 379px) {
    .box-card .card-front .box-icon {
        font-size: 1.25rem;
    }

    .box-card .card-back .card-value {
        font-size: 1rem;
    }

    .order-card {
        padding: 0.4rem;
    }

    .order-card .order-value {
        font-size: 1rem;
    }

    .order-card .order-status {
        font-size: 0.5rem;
    }

    #currentSum {
        font-size: 2.5rem;
    }

    #targetSum {
        font-size: 1.5rem;
    }
}

/* Mobile (380px - 479px) */
@media (min-width: 380px) and (max-width: 479px) {
    .box-card .card-front .box-icon {
        font-size: 1.5rem;
    }

    .box-card .card-back .card-value {
        font-size: 1.25rem;
    }

    #currentSum {
        font-size: 3rem;
    }

    #targetSum {
        font-size: 2rem;
    }
}

/* Tablet (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .box-card .card-front .box-icon {
        font-size: 2rem;
    }

    .box-card .card-back .card-value {
        font-size: 1.5rem;
    }

    #currentSum {
        font-size: 4rem;
    }
}

/* Desktop (768px+) */
@media (min-width: 768px) {
    .box-card .card-front .box-icon {
        font-size: 2.5rem;
    }

    .box-card .card-back .card-value {
        font-size: 2rem;
    }
}

/* Grid Gap Responsive */
@media (max-width: 479px) {
    #ordersContainer {
        gap: 0.5rem;
    }

    #boardContainer {
        gap: 0.5rem;
    }
}

/* Modal Responsive */
@media (max-width: 479px) {
    #ctaModal > div {
        padding: 1.5rem;
        margin: 0.5rem;
    }

    #ctaModal h2 {
        font-size: 1.25rem;
    }

    .shopee-btn, .tokopedia-btn {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
}

/* Safe area insets for notched phones */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    header {
        padding-top: env(safe-area-inset-top);
    }
}