/* Responsive CSS for ぬいぐるみ多頭飼い Website - Emo/Goth Pixel Style */

/* Medium screens (tablets) */
@media screen and (max-width: 1024px) {
    .window {
        width: 90%;
        height: 85%;
    }
    
    .works-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Adjust pixel size for medium screens */
    :root {
        --pixel-size: 3px;
    }
    
    .desktop::before {
        background-size: var(--pixel-size) var(--pixel-size);
    }
    
    h1 {
        font-size: 1.8rem;
    }
}

/* Small screens (mobile devices) */
@media screen and (max-width: 768px) {
    .window {
        width: 95%;
        height: 90%;
        top: 5%;
        transform: translate(-50%, 0);
        box-shadow: 0 0 15px rgba(147, 50, 204, 0.3);
    }
    
    .window-content {
        flex-direction: column;
    }
    
    /* Adjust pixel size for small screens */
    :root {
        --pixel-size: 4px;
    }
    
    /* Enhance glow effects for mobile */
    .desktop::after {
        background: 
            radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.2) 0%, transparent 40%),
            radial-gradient(circle at 80% 20%, rgba(255, 105, 180, 0.2) 0%, transparent 40%),
            radial-gradient(circle at 50% 50%, rgba(0, 191, 255, 0.15) 0%, transparent 60%);
    }
    
    /* Adjust desktop icons for mobile */
    .desktop-icons {
        top: 10px;
        left: 10px;
        display: grid;
        grid-template-columns: repeat(2, 70px);
        grid-template-rows: repeat(2, auto);
        grid-gap: 10px;
    }
    
    .desktop-icon {
        width: 70px;
    }
    
    .works-grid {
        grid-template-columns: 1fr;
    }
    
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.2rem;
    }
    
    .desktop-icon img {
        width: 24px;
        height: 24px;
    }
    
    .desktop-icon span {
        font-size: 0.7rem;
    }
    
    .menu-item {
        padding: 2px 5px;
        font-size: 0.7rem;
    }
    
    .content-area {
        padding: 10px;
    }
    
    /* More visible text shadows for mobile */
    h1 {
        text-shadow: 
            1px 1px 0 var(--black),
            -1px -1px 0 var(--black),
            1px -1px 0 var(--black),
            -1px 1px 0 var(--black),
            0 0 20px var(--neon-yellow);
    }
    
    .desktop-icon span {
        text-shadow: 
            1px 1px 0 var(--black),
            -1px -1px 0 var(--black),
            1px -1px 0 var(--black),
            -1px 1px 0 var(--black),
            0 0 10px var(--pink);
    }
    
    /* ウィンドウコントロールのスタイル調整 */
    .window-header {
        padding: 0 8px;
        height: 30px;
    }
    
    .window-controls {
        display: flex;
        gap: 4px;
    }
    
    .window-controls button {
        width: 24px;
        height: 24px;
        margin-left: 0; /* ギャップを使用するため余白を削除 */
        border-width: 2px;
        font-size: 14px;
    }
}

/* Extra small screens */
@media screen and (max-width: 480px) {
    .window-title {
        font-size: 0.8rem;
    }
    
    .window-controls button {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }
    
    .menu-item {
        padding: 2px 3px;
        font-size: 0.6rem;
    }
    
    .window-statusbar {
        height: 16px;
        font-size: 0.7rem;
    }
    
    .taskbar {
        height: 25px;
    }
    
    .start-button {
        height: 20px;
        font-size: 0.7rem;
    }
    
    .clock {
        font-size: 0.7rem;
    }
    
    .desktop-icon {
        width: 60px;
    }
    
    /* Force scrolling on very small screens */
    .window-content {
        overflow-y: auto;
    }
    
    .content-area {
        overflow-y: auto;
    }
    
    /* Adjust form elements for smaller screens */
    .form-group label {
        font-size: 0.8rem;
    }
    
    .win95-input, .win95-textarea, .win95-button {
        font-size: 0.8rem;
    }
    
    /* Enhance contrast for very small screens */
    h1 {
        color: var(--neon-yellow);
    }
    
    h2 {
        color: var(--pink);
    }
    
    /* More prominent pixel grid */
    :root {
        --pixel-size: 5px;
    }
    
    .desktop-icons {
        grid-template-columns: repeat(2, 60px);
    }
}

/* Portrait orientation adjustments for mobile */
@media screen and (max-width: 768px) and (orientation: portrait) {
    .window {
        height: 85%;
    }
    
    .desktop {
        height: 100%;
    }
    
    /* Adjust desktop icons for portrait orientation */
    .desktop-icons {
        grid-template-columns: repeat(2, 70px);
    }
}

/* Landscape orientation adjustments for mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .window {
        height: 80%;
    }
    
    /* Keep desktop icons in a row for landscape */
    .desktop-icons {
        grid-template-columns: repeat(4, 60px);
        grid-template-rows: 1fr;
        top: 5px;
    }
    
    .desktop-icon {
        width: 60px;
    }
    
    .desktop-icon span {
        font-size: 0.6rem;
    }
}

/* Animation pause for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .desktop::after,
    .announcement::before,
    .win95-button::before {
        animation: none;
    }
}