@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap');

:root {
    --bg-color: #1a1a1a;
    --panel-bg: #111;
    --text-color: #e0e0e0;
    --primary-color: #00ff99;
    --border-color: #333;
    --font-serif: 'Noto Serif JP', serif;
    --font-mono: 'Roboto Mono', monospace;
}
html, body { height: 100%; margin: 0; overflow: hidden; }
body { font-family: var(--font-serif); background-color: var(--bg-color); color: var(--text-color); }
.library-container { display: flex; height: 100%; }

/* --- Index Panel --- */
.index-panel { flex: 0 0 380px; background-color: var(--panel-bg); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; }
.index-panel header { padding: 25px; border-bottom: 1px solid var(--border-color); }
.index-panel h1 { font-family: var(--font-mono); color: var(--primary-color); margin: 0; font-size: 1.6em; }
.index-panel p { color: #888; margin: 5px 0 0; font-family: var(--font-mono); }
#code-index { flex-grow: 1; overflow-y: auto; padding: 25px; }
#code-index h2 { font-family: var(--font-mono); font-size: 1.2em; color: #aaa; margin: 25px 0 10px; padding-left: 10px; border-left: 3px solid var(--border-color); position: relative;}
#code-index ul { list-style: none; padding: 0; }
#code-index a { display: block; padding: 10px 15px; text-decoration: none; color: var(--text-color); border-radius: 4px; transition: all 0.2s ease-out; position: relative; overflow: hidden; }
#code-index a:hover { background-color: #222; color: var(--primary-color); }
#code-index a.active { background-color: var(--primary-color); color: var(--panel-bg); font-weight: bold; }

/* --- Display Panel --- */
.display-panel { flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 3em; position: relative; overflow: hidden; }
.background-glow { position: absolute; top: 50%; left: 50%; width: 800px; height: 800px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 60%); transform: translate(-50%, -50%); transition: background 1s ease; }
.content-wrapper { position: relative; z-index: 1; }
.character-image { max-height: 250px; margin-bottom: 2em; }
.message-area { font-size: 1.6em; line-height: 1.8; color: #ddd; }
.message-area .code { font-family: var(--font-mono); font-size: 1.9em; color: var(--primary-color); display: block; margin-bottom: 0.5em; }

/* --- Magic Animations --- */
.glow-connect { background: radial-gradient(circle, rgba(0, 150, 255, 0.15) 0%, rgba(0, 150, 255, 0) 60%); animation: breath 5s ease-in-out infinite; }
.glow-correct { background: radial-gradient(circle, rgba(0, 255, 153, 0.15) 0%, rgba(0, 255, 153, 0) 60%); animation: breath 4s ease-in-out infinite alternate; }
.glow-chisamaru { background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%); animation: breath 6s ease-in-out infinite; }
@keyframes breath { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.1); } }
.enter-chisamaru { animation: bounce-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes bounce-in { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.enter-correct { animation: scan-in 0.4s ease-out; }
@keyframes scan-in { 0% { opacity: 0; clip-path: inset(0 0 100% 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
.enter-connect { animation: particle-in 0.6s ease-out; }
@keyframes particle-in { 0% { opacity: 0; filter: blur(10px) drop-shadow(0 0 20px var(--primary-color)); transform: scale(1.2); } 100% { opacity: 1; filter: blur(0) drop-shadow(0 0 0 transparent); transform: scale(1); } }
.content-wrapper.exit { animation: fade-out 0.2s ease-in forwards; }
@keyframes fade-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.95); } }

/* 404 Interaction */
.blow-away { animation: float 6s ease-in-out infinite; cursor: pointer; transition: transform 0.3s; }
.blow-away:hover { transform: scale(1.05); }
.blown-away { transition: transform 1.5s cubic-bezier(0.6, -0.28, 0.735, 0.045), opacity 1.5s ease-out; transform: translate(1200px, -1500px) rotate(1080deg) scale(0)!important; opacity: 0 !important; }

/* Teapot Interaction */
.steam {
    position: absolute;
    background-color: rgba(200, 200, 200, 0.3);
    border-radius: 50%;
    animation: steam-rise 2s ease-out forwards;
    pointer-events: none;
    z-index: 2;
}
@keyframes steam-rise {
    0% { transform: translateY(0) scale(0.2); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-150px) scale(1); opacity: 0; }
}
/* Infinite PON Interaction */
.infinite-pon {
    animation: pon-shake 0.1s infinite;
}
@keyframes pon-shake {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    25% { transform: translate(5px, -5px) rotate(3deg); }
    50% { transform: translate(-5px, 5px) rotate(-3deg); }
    75% { transform: translate(5px, 5px) rotate(3deg); }
}
/* --- ▼▼▼ Responsive Design for Observers on the move ▼▼▼ --- */
@media (max-width: 800px) {
    html, body {
        height: auto; /* スクロールを、可能に */
    }
    
    .library-container {
        flex-direction: column; /* 縦積みに、変更 */
        height: auto;
    }

    .index-panel {
        flex: 0 0 auto; /* 高さを、自動に */
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        max-height: 40vh; /* 目録エリアの、最大高さを、画面の、40%に、制限 */
    }

    .display-panel {
        min-height: 60vh; /* 最低でも、画面の、60%の、高さを、確保 */
        padding: 2em 1em; /* 少し、パディングを、調整 */
    }

    .character-image {
        max-height: 150px; /* スマホでは、キャラクターを、少し、小さく */
    }

    .message-area {
        font-size: 1.2em; /* スマホでは、文字を、少し、小さく */
    }

    .message-area .code {
        font-size: 1.5em;
    }
}
.character-ensemble {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* キャラクターの、足元を、揃える */
    gap: 1em;
    margin-bottom: 2em;
}

.character-image {
    max-height: 250px;
}

.multi-char {
    max-height: 220px; /* サブキャラクターは、少し、小さく */
    opacity: 0.9;
}