/* =========================================
   1. 字型與全域背景
   ========================================= */
@font-face {
    font-family: 'Cubic11';
    src: url('https://www.smsh.ntpc.edu.tw/var/file/0/1000/img/142/Cubic_11.woff2') format('woff2');
}

body, html {
    margin: 0; padding: 0;
    display: flex;
    justify-content: center;
    font-family: 'Cubic11', sans-serif;
    color: #fff;
    image-rendering: pixelated;
    
    /* 1. 設定雙層背景：漸層濾鏡 + 膠捲底圖 */
    background-image: 
        linear-gradient(rgba(139, 90, 43, 0.6), rgba(59, 35, 20, 0.9)), /* 復古琥珀色濾鏡 */
        url('bg.jpg'); /* 替換成這張膠捲圖的網址 */
    
    /* 2. 融合模式：讓濾鏡跟底圖完美吃色 */
    background-blend-mode: multiply;

    /* 3. 尺寸與重複設定 (核心關鍵) */
    /* 漸層滿版(cover)，膠捲高度對齊視窗(auto 100vh) */
    background-size: cover, auto 100vh; 
    /* 漸層不重複，膠捲水平無限重複 (repeat-x) */
    background-repeat: no-repeat, repeat-x; 
    /* 初始對齊位置 */
    background-position: center, 0 center;

    /* 4. 掛上捲動動畫：40s 是播放一圈的時間，linear 是勻速，infinite 是無限循環 */
    animation: scrollFilm 40s linear infinite;
}

/* 🎞️ 定義膠捲往左捲動的動畫影格 */
@keyframes scrollFilm {
    0% { 
        /* 起點：濾鏡不動，膠捲在 0px */
        background-position: center, 0px center; 
    }
    100% { 
        /* 終點：濾鏡不動，膠捲往左拉動 (設定一個夠大的像素讓它無縫接軌) */
        background-position: center, -2000px center; 
    }
}

/* =========================================
   2. 預設：手機版佈局 (Mobile First)
   ========================================= */
.ig-app-container {
    width: 100%;
    max-width: 100%; /* 手機上滿版 */
    min-height: 100vh;
    background-color: #0a0a0f; 
    position: relative;
    overflow: hidden;
}

/* 📺 核心特效：CRT 掃描線與膠捲雜訊 */
.crt-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; 
    z-index: 100;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 4px, 3px 100%;
    animation: flicker 0.15s infinite;
}

@keyframes flicker {
    0% { opacity: 0.95; }
    50% { opacity: 0.85; }
    100% { opacity: 0.95; }
}

.glitch-text { text-shadow: 2px 0px 1px rgba(255,0,0,0.7), -2px 0px 1px rgba(0,255,255,0.7); }

/* IG 元件：預設手機樣式 */
.ig-top-nav { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #262626; font-size: 1.2rem; }
.ig-profile-header { display: flex; align-items: center; padding: 15px; }

.ig-avatar {
    width: 85px; height: 85px;
    border-radius: 50%;
    border: 2px solid #555;
    background-position: center;
    background-size: cover;
    margin-right: 20px;
    flex-shrink: 0;
}

.ig-stats { flex: 1; display: flex; justify-content: space-between; text-align: center; }
.ig-stats div strong { display: block; font-size: 1.1rem; }
.ig-stats div span { font-size: 0.75rem; color: #aaa; }

.ig-bio { padding: 0 15px 15px 15px; font-size: 0.9rem; line-height: 1.6; }
.ig-bio strong { display: block; font-size: 1.1rem; margin-bottom: 5px; }
.live-countdown { color: #FBFF00; margin-top: 5px; font-size: 1rem; }

.ig-action-buttons { display: flex; gap: 8px; padding: 0 15px 15px 15px; }
.ig-btn {
    flex: 1; padding: 8px 0; border-radius: 6px; text-align: center;
    text-decoration: none; font-size: 0.9rem; font-weight: bold;
    color: #fff; border: none; cursor: pointer;
}
.ig-btn-primary { background-color: #005cff; }
.ig-btn-secondary { background-color: #363636; }

.ig-tabs { display: flex; justify-content: space-around; padding: 12px 0; border-top: 1px solid #262626; border-bottom: 1px solid #262626; }
.ig-tabs span { font-size: 1.4rem; color: #fff; }

.ig-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px; /* 手機版九宮格間隙極小 */
}

.grid-item { position: relative; aspect-ratio: 4 / 3; background-color: #111; overflow: hidden; }
.grid-item img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.2) saturate(0.8) sepia(0.3); }

.grid-item .d-day {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 1.5rem; color: #fff;
    text-shadow: 3px 3px 0 #000, -1px -1px 0 rgba(0,255,255,0.8), 1px 1px 0 rgba(255,0,0,0.8);
    z-index: 2; pointer-events: none;
}

.ig-footer-note { text-align: center; padding: 25px; color: #555; font-size: 0.8rem; }
.skip-link { position: absolute; top: -50px; left: 0; background: #000; color: #fff; z-index: 200; transition: 0.3s; padding: 10px; }
.skip-link:focus { top: 0; }

/* =========================================
   3. 螢幕變大時：PC 緊湊版佈局 (一頁全顯示)
   ========================================= */
@media screen and (min-width: 768px) {
    .ig-app-container {
        /* 【關鍵1】從 935px 縮小到 600px，利用限制寬度來強迫九宮格高度縮小 */
        max-width: 600px; 
        /* 使用 vh (螢幕高度百分比) 來設定外距，確保不會被擠下去 */
        margin: 2vh 0;   
        border-radius: 12px;
        border: 1px solid #222;
        box-shadow: 0 15px 40px rgba(0,0,0,0.9);
        min-height: auto;
    }

    /* 稍微縮小頂部導覽 */
    .ig-top-nav { font-size: 1.2rem; padding: 12px 20px; }

    /* 【關鍵2】減少 Header 上下空間 */
    .ig-profile-header {
        padding: 20px 20px 10px 30px; 
    }

    /* 【關鍵3】頭像從 150px 縮小為 100px */
    .ig-avatar {
        width: 100px; height: 100px; 
        margin-right: 30px;
        border-width: 2px;
    }

    .ig-stats div strong { font-size: 1.3rem; }
    .ig-stats div span { font-size: 0.9rem; }

    /* 減少簡介區塊的留白 */
    .ig-bio { padding: 0 20px 15px 30px; font-size: 1rem; line-height: 1.4; }
    .ig-bio strong { font-size: 1.1rem; margin-bottom: 3px; }
    .live-countdown { font-size: 1.1rem; margin-top: 2px; }

    /* 減少按鈕區塊的留白 */
    .ig-action-buttons { padding: 0 30px 15px 30px; gap: 10px; }
    .ig-btn { padding: 8px 0; font-size: 1rem; }

    /* 縮小分類 Tab 的間距 */
    .ig-tabs { padding: 8px 0; }

    /* 【關鍵4】九宮格排版壓縮 */
    .ig-grid {
        gap: 5px; /* 照片間距縮小 */
        padding: 0 10px 15px 10px; /* 底部留白縮小 */
    }

    .grid-item .d-day { font-size: 2rem; } 
    
    /* 隱藏底部宣告，或調整大小，避免佔用高度 */
    .ig-footer-note { padding: 10px; font-size: 0.7rem; }
}

/* =========================================
   5. 九宮格上下黑邊：真實比例膠捲齒孔
   ========================================= */

.grid-item:nth-child(-n+3)::before,
.grid-item:nth-child(n+7)::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 24px; /* 稍微放大齒孔的高度 */
    
    /* 【關鍵黑魔法】改用 SVG 畫出長寬比 1.4:1 的微圓角長方形，完美還原 35mm 底片標準 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='24'%3E%3Crect x='5' y='2' width='28' height='20' rx='4' fill='%23e6e1d7' fill-opacity='0.4'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    z-index: 10;
    pointer-events: none; 
    
    box-shadow: 0 0 5px rgba(255,255,255,0.05);
    filter: blur(0.5px);
}

/* 上排齒孔位置 (貼近頂部黑邊上緣) */
.grid-item:nth-child(-n+3)::before {
    top: 42px;
}

/* 下排齒孔位置 (貼近底部黑邊下緣) */
.grid-item:nth-child(n+7)::after {
    bottom: 42px;
}

/* =========================================
   6. 膠捲邊緣文字 (微調位置，退到齒孔與畫面之間)
   ========================================= */

/* --- 上排文字設定 --- */
.grid-item:nth-child(-n+3)::after {
    position: absolute;
    top: 30px; /* 【關鍵】往下推，讓文字夾在齒孔和影像中間 */
    left: 10px;
    font-family: 'Courier New', Courier, monospace; 
    font-size: 0.75rem;
    color: rgba(230, 225, 215, 0.5); /* 稍微調淡，看起來像褪色印字 */
    letter-spacing: 2px;
    z-index: 10;
    pointer-events: none;
}

.grid-item:nth-child(1)::after { content: "35mm"; }
.grid-item:nth-child(2)::after { content: "SMSH SAFETY FILM"; }
.grid-item:nth-child(3)::after { content: "EXP 2026"; }

/* --- 下排文字設定 --- */
.grid-item:nth-child(n+7)::before {
    position: absolute;
    bottom: 30px; /* 【關鍵】往上推，讓文字夾在齒孔和影像中間 */
    right: 15px; 
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    color: rgba(230, 225, 215, 0.5);
    letter-spacing: 1px;
    z-index: 10;
    pointer-events: none;
}

.grid-item:nth-child(7)::before { content: "27"; }
.grid-item:nth-child(8)::before { content: "28 & 34 ▷"; }
.grid-item:nth-child(9)::before { content: "29 "; }