/* Extras: only include on pages that need these features */

/* App Store Icon Loading Styles */
.icon-loading {
    animation: iconSpin 1s linear infinite;
}

@keyframes iconSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.app-icon {
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.app-icon.loading {
    opacity: 0.6;
    filter: blur(1px);
}

/* Development Tools Panel */
#dev-panel {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

#dev-panel button:hover {
    opacity: 0.8;
    transform: translateY(-1px);
}

/* Mobile game boards fit: prevent right-side clipping inside padded cards */
@media (max-width: 768px) {
    /* 2048 board: use container width instead of viewport width */
    #g-grid { width: min(100%, 360px) !important; height: auto !important; aspect-ratio: 1 / 1 !important; }
    /* Sudoku board: always fit card content width */
    #sudoku-board { width: 100% !important; max-width: 450px !important; }
}

/* AdSense skeleton & container */
.ads-section { margin: 2rem 0 3rem; }
.ad-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    background: #f7f9fa;
    border: 1px dashed #b7cdd2;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 107, 125, 0.1);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ad-container.pending-approval:hover {
    background: #eef5f7;
}
.ad-skeleton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: .9rem;
    color: #5e7d84;
    animation: pulse 1.6s ease-in-out infinite;
    padding: .75rem 1.25rem;
    border-radius: 12px;
    background: linear-gradient(135deg,#e3eff2 0%,#f5fbfc 100%);
    box-shadow: inset 0 0 0 1px #d4e6ea;
}
@keyframes pulse {
    0%,100% { opacity: 0.65; }
    50% { opacity: 1; }
}
.ad-container.approved { border: none; background: transparent; box-shadow: none; }
.ad-container.approved .ad-skeleton { display: none; }
@media (prefers-reduced-motion: reduce) {
    .ad-skeleton { animation: none; }
}