body { 
    font-family: 'Noto Serif JP', serif; 
    text-align: center; 
    margin: 0; 
    padding: 20px; 
    overflow-x: hidden;
}

.japanese-bg {
    background-color: #fcf9f1;
    background-image: 
        radial-gradient(#e2d7c7 1px, transparent 1px),
        linear-gradient(45deg, rgba(235, 227, 213, 0.4) 25%, transparent 25%, transparent 75%, rgba(235, 227, 213, 0.4) 75%, rgba(235, 227, 213, 0.4)),
        linear-gradient(45deg, rgba(235, 227, 213, 0.4) 25%, transparent 25%, transparent 75%, rgba(235, 227, 213, 0.4) 75%, rgba(235, 227, 213, 0.4));
    background-size: 20px 20px, 40px 40px, 40px 40px;
    background-position: 0 0, 0 0, 20px 20px;
}

/* 桜の花びら */
.sakura {
    position: absolute;
    background-color: #ffdbed;
    border-radius: 100% 0 100% 0;
    opacity: 0.8;
    pointer-events: none;
    z-index: 5;
    animation: fall linear forwards;
}

@keyframes fall {
    0% {
        transform: translate(0, -10vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    100% {
        transform: translate(100px, 110vh) rotate(720deg);
        opacity: 0;
    }
}

.container { margin-top: 50px; position: relative; z-index: 10; }

/* リアルな揺れアニメーション */
.shake-anim {
    animation: shake-tilt 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake-tilt {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(-15deg) translateX(-10px); }
    40% { transform: rotate(12deg) translateX(10px); }
    60% { transform: rotate(-8deg) translateX(-5px); }
    80% { transform: rotate(4deg) translateX(2px); }
    100% { transform: rotate(0deg); }
}

button { 
    padding: 15px 30px; 
    font-size: 18px; 
    cursor: pointer; 
    background-color: #d32f2f; 
    color: white; 
    border: none; 
    border-radius: 8px; 
    font-family: 'Noto Serif JP', serif; 
    box-shadow: 0 4px 0 #b71c1c;
    transition: all 0.2s;
}
button:hover { background-color: #b71c1c; transform: translateY(2px); box-shadow: 0 2px 0 #8e1616; }
button:active { transform: translateY(4px); box-shadow: none; }

/* アニメーション用 */
.hidden { display: none !important; }
#animation-area { margin: 30px 0; }

#omikuji-img {
    width: 220px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
    transition: transform 0.1s;
}

/* モーダル用 - よりおみくじらしく */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 1000; padding: 10px; box-sizing: border-box; }
.modal-content { 
    background: #fff; 
    background-image: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,0.02) 1px, rgba(0,0,0,0.02) 2px);
    padding: 30px 20px; 
    border-radius: 4px; 
    width: 100%; 
    max-width: 450px; 
    max-height: 95vh; 
    overflow-y: auto; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border: 8px double #d32f2f;
    position: relative;
}

.canvas-wrapper { width: 100%; overflow: hidden; display: flex; justify-content: center; margin-bottom: 20px; }
canvas { max-width: 100%; height: auto; border: 1px solid #eee; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

.action-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.action-buttons button { 
    flex: 1; 
    min-width: 120px; 
    margin: 0; 
    font-size: 14px; 
    padding: 12px;
    background-color: #d32f2f; /* 元のエンジ色 */
    box-shadow: 0 4px 0 #b71c1c;
}
.action-buttons button#save-btn { background-color: #fbc02d; box-shadow: 0 4px 0 #f9a825; color: #333; } /* 金色(黄色) */
.action-buttons button#share-btn { background-color: #388e3c; box-shadow: 0 4px 0 #2e7d32; } /* 緑色（お守り風） */
.action-buttons button#close-btn { background-color: #757575; box-shadow: 0 4px 0 #616161; }

.affiliate-area { margin-bottom: 20px; padding: 20px; background: #fffaf0; border-radius: 8px; border: 1px dashed #d32f2f; }
.aff-btn { 
    display: inline-block; 
    margin-top: 10px;
    padding: 12px 24px; 
    background: linear-gradient(to bottom, #f57c00, #e65100); 
    color: white; 
    text-decoration: none; 
    border-radius: 30px; 
    font-weight: bold; 
    box-shadow: 0 4px 15px rgba(230, 81, 0, 0.3);
}