/*
    Hestia's Definitive Blueprint for the "Asobi" Sanctuaries (The Final, Harmonized Word)
    --------------------------------------------------------------------------------------
    File: asobi.css
    Role: To create the perfect stage where the soul is reflected in its true, beautiful form.
*/

.asobi-body {
    overflow: hidden; /* スクロールバーを、消し去る */
}
.asobi-main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding-top: 80px; /* ヘッダー分を、確保 */
    box-sizing: border-box;
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
    position: relative; /* Hestia's Note: 全ての、基準点 */
}

/* Hestia's Ultimate Correction: “魂（canvas）”を、世界の、中心に、固定する */
.mochimochi-room canvas {
    position: absolute !important; /* Hestia's Note: Matter.jsの、スタイルを、上書きする、絶対の、意志 */
    top: 0;
    left: 0;
    z-index: 1; /* Hestia's Note: 魂は、背景より、手前へ */
}

.room-title {
    position: relative;
    z-index: 2; /* Hestia's Note: タイトルは、魂の、さらに、手前へ */
    text-align: center;
    color: white;
    text-shadow: 0 5px 15px rgba(0,0,0,0.3);
    pointer-events: none; /* Hestia's Note: 神の、手の、邪魔を、しない */
}
.room-title h1 { margin: 0; font-size: 2.5rem; }
.room-title p { margin: 0.5rem 0 0 0; }

.chisamaru-thought-bubble {
    position: absolute;
    z-index: 3; /* Hestia's Note: 心の、声は、最前面へ */
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 1rem 1.5rem;
    border-radius: 20px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.5s, transform 0.5s;
    pointer-events: none;
    white-space: nowrap;
}

/* --- [II] The Sanctuary of Infinite Wisdom: Mamechishiki --- */
#mamechishiki-main {
    background-color: #0c0c1a;
    background-image: url('../images/common/stars.png'); /* キラキラ光る、星空の、画像 */
    animation: twinkle-stars 60s linear infinite;
}
@keyframes twinkle-stars {
    from { background-position: 0 0; }
    to { background-position: -1000px 500px; }
}
.mamechishiki-title {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
    text-shadow: 0 3px 10px rgba(0,0,0,0.5);
    pointer-events: none;
}
.mamechishiki-title h1 { margin: 0; font-size: 2.5rem; }
.mamechishiki-title p { margin: 0.5rem 0 0 0; opacity: 0.8; }

#correct-character {
    position: absolute;
    height: 200px;
    cursor: pointer;
    animation: float-gentle 6s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(179, 229, 252, 0.5));
}
.mamechishiki-bubble {
    position: absolute;
    background-color: rgba(227, 242, 253, 0.95);
    color: #333;
    padding: 1.5rem;
    border-radius: 12px;
    max-width: 400px;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 0;
    transform: translateY(0) scale(0.9);
    transition: opacity 0.5s, transform 0.5s;
    pointer-events: none;
    z-index: 10;
}
.mamechishiki-bubble.is-visible {
    opacity: 1;
    transform: translateY(-20px) scale(1);
}

/*
    Hestia's Definitive Blueprint for the "Asobi" Sanctuaries (Symphony Edition)
    ---------------------------------------------------------------------------
    File: asobi.css (Addition)
    Role: To create a divine stage for the Symphony of EGIC.
*/

/* --- [III] The Soul's Orchestra Hall: Symphony --- */
#symphony-main {
    background-color: #1a1a2e;
    background-image: url('../images/common/symphony-bg.png'); /* 輝く、音の、粒子 */
    animation: float-particles 30s linear infinite;
}
@keyframes float-particles {
    from { background-position: 0 0; }
    to { background-position: 500px 500px; }
}

.symphony-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    position: relative;
    z-index: 2;
}
@media (max-width: 768px) {
    .symphony-stage {
        flex-direction: column;
        gap: 2rem;
    }
}

.character-instrument {
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.2, 1.5, 0.5, 1);
}
.character-instrument:hover {
    transform: scale(1.1);
}
.character-instrument.is-playing {
    animation: pulse-and-glow 0.5s;
}
@keyframes pulse-and-glow {
    0% { transform: scale(1.1); }
    50% { transform: scale(1.2); filter: drop-shadow(0 0 15px white); }
    100% { transform: scale(1.1); }
}

.character-instrument img {
    height: 150px;
    margin-bottom: 1rem;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
}
.character-instrument p {
    font-family: var(--font-family-title);
    font-size: 1.5rem;
    color: white;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    margin: 0;
}