/* ========================================
   社務所 - 朱印帳簽到系統 CSS
   ======================================== */

/* ========================================
   朱印帳 Modal
   ======================================== */

.stamp-book-container {
    position: relative;
    z-index: 1;
    width: 800px;
    max-width: 95vw;
    aspect-ratio: 4 / 3;
    animation: modal-appear 0.3s ease-out;
}

.stamp-book-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

/* 左頁格子覆蓋層（精準對齊背景圖的格子） */
.stamp-grid-left {
    position: absolute;
    top: 12%;
    left: 7%;
    width: 40%;
    height: 76%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 4%;
}

/* 右頁格子覆蓋層 */
.stamp-grid-right {
    position: absolute;
    top: 12%;
    left: 48%;
    width: 42%;
    height: 76%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 印章格子 */
.stamp-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 印章圖片 */
.stamp-slot img {
    width: 85%;
    height: 85%;
    object-fit: contain;
    transform: rotate(-12deg);
    opacity: 0.95;
}

/* 第 7 天大格 */
.stamp-slot-big {
    width: 80%;
    height: 80%;
}

.stamp-slot-big img {
    width: 100%;
    height: 100%;
}

/* ========================================
   蓋章動畫（格子內的小動畫）
   ======================================== */

@keyframes stamp-drop {
    0% { 
        transform: scale(2) rotate(15deg); 
        opacity: 0; 
    }
    50% { 
        transform: scale(1) rotate(-10deg); 
        opacity: 1; 
    }
    70% { 
        transform: scale(1.1) rotate(-6deg); 
    }
    100% { 
        transform: scale(1) rotate(-8deg); 
    }
}

.stamp-animate {
    animation: stamp-drop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ========================================
   蓋章特效（大印章從天而降）
   ======================================== */

.stamp-effect-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stamp-effect-overlay.active {
    opacity: 1;
}

.stamp-effect-container {
    position: fixed;
    transform: translate(-50%, -50%);
}

.stamp-effect-container img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
    animation: stamp-fall-effect 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes stamp-fall-effect {
    0% {
        transform: scale(2.5) rotate(15deg) translateY(-150px);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    50% {
        transform: scale(1) rotate(-8deg) translateY(0);
        opacity: 1;
    }
    70% {
        transform: scale(0.95) rotate(-10deg);
        opacity: 1;
    }
    85% {
        transform: scale(1) rotate(-8deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(-8deg);
        opacity: 0;
    }
}

/* ========================================
   印章樣式
   ======================================== */

/* 普通印章 */
.stamp-normal {
    transform: rotate(-8deg);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

/* 金色印章 */
.stamp-gold {
    transform: rotate(-5deg);
    filter: drop-shadow(0 0 10px rgba(255, 200, 0, 0.5))
            drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

/* ========================================
   獎勵提示
   ======================================== */

.stamp-reward-hint {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.8);
    padding: 0.75rem 1.5rem;
    border-radius: 30px;
    animation: reward-appear 0.5s ease-out 0.6s both;
}

@keyframes reward-appear {
    from { transform: translateX(-50%) translateY(20px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.stamp-reward-hint img {
    width: 32px;
    height: 32px;
}

.stamp-reward-hint span {
    font-family: 'Yuji Syuku', serif;
    font-size: 1.3rem;
    font-weight: bold;
    color: #fbbf24;
}

/* ========================================
   關閉按鈕
   ======================================== */

.stamp-book-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background: #1f2937;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.stamp-book-close:hover {
    background: #374151;
    transform: scale(1.1);
}

/* ========================================
   響應式
   ======================================== */

@media (max-width: 768px) {
    .stamp-book-container {
        width: 95vw;
    }
    
    .stamp-grid-left {
        top: 12%;
        left: 7%;
        width: 40%;
        height: 76%;
        gap: 3%;
    }
    
    .stamp-reward-hint {
        padding: 0.5rem 1rem;
    }
    
    .stamp-reward-hint img {
        width: 24px;
        height: 24px;
    }
    
    .stamp-reward-hint span {
        font-size: 1rem;
    }
}