:root {
    --waka-green: #32cd32;
    --waka-light: #98fb98;
    --waka-bg: #f0fff0;
    --text-color: #333;
}

body.waka-theme {
    background-color: var(--waka-bg);
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: var(--text-color);
    margin: 0;
}

/* --- ヘッダー --- */
.waka-header {
    background: var(--waka-green); color: #fff;
    padding: 15px 20px; display: flex; align-items: center; justify-content: center;
    position: relative; box-shadow: 0 4px 0 #228b22;
}
.waka-header h1 { margin: 0; font-size: 1.5rem; }
.back-link {
    position: absolute; left: 20px; color: #fff; text-decoration: none; font-weight: bold;
    background: rgba(0,0,0,0.2); padding: 5px 15px; border-radius: 20px;
}

/* --- メニュー画面 --- */
.waka-menu-container {
    max-width: 800px; margin: 40px auto; padding: 20px; text-align: center;
}
.waka-intro { position: relative; display: inline-block; margin-bottom: 40px; }
.waka-intro img { width: 150px; }
.speech-bubble {
    position: absolute; top: 0; left: 140px; width: 200px;
    background: #fff; padding: 15px; border-radius: 20px; border: 3px solid var(--waka-green);
    font-weight: bold; text-align: left;
}
.speech-bubble::after {
    content: ''; position: absolute; top: 50px; left: -15px;
    border-width: 10px 15px 10px 0; border-style: solid; border-color: transparent var(--waka-green) transparent transparent;
}

.menu-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;
}
.menu-card {
    background: #fff; border-radius: 20px; padding: 20px;
    text-decoration: none; color: #333; transition: transform 0.2s;
    border: 3px solid transparent; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.menu-card:hover { transform: translateY(-5px); }
.menu-card.diary { border-color: #ffca28; }
.menu-card.patrol { border-color: #42a5f5; }
.menu-card.game { border-color: #ff7043; }

.card-icon { font-size: 3rem; margin-bottom: 10px; }
.card-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 10px; }
.card-desc { font-size: 0.9rem; color: #666; line-height: 1.5; }

/* --- 日記 --- */
body.diary-bg { background-image: url('data:image/svg+xml;base64,...'); /* ノート風の方眼紙など */ }
.diary-book { max-width: 700px; margin: 0 auto; padding: 20px; }
.diary-post {
    background: #fff; padding: 30px; margin-bottom: 40px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1); position: relative;
    transform: rotate(-1deg);
}
.diary-post:nth-child(even) { transform: rotate(1deg); }

.date-sticker {
    position: absolute; top: -10px; left: -10px; background: #ff4081; color: #fff;
    padding: 5px 15px; font-weight: bold; transform: rotate(-10deg);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.photo-frame {
    background: #fff; padding: 10px 10px 30px 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: inline-block; margin: 10px; position: relative; max-width: 200px;
    float: right; transform: rotate(3deg);
}
.photo-frame img { width: 100%; border: 1px solid #eee; }
.tape-tl {
    position: absolute; top: -10px; left: 30%; width: 60px; height: 20px;
    background: rgba(255,255,255,0.5); border-left: 1px solid rgba(0,0,0,0.1);
    transform: rotate(-5deg); box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.handwriting {
    font-family: 'Comic Sans MS', sans-serif; /* 手書き風フォントがあれば指定 */
    font-size: 1.1rem; line-height: 1.8; color: #444;
}
.sensei-check {
    clear: both; margin-top: 20px; padding: 15px; background: #f0f8ff;
    border-radius: 10px; display: flex; align-items: flex-start; gap: 10px;
}
.sensei-icon { width: 50px; border-radius: 50%; border: 2px solid #ccc; }

/* --- パトロール & ゲーム --- */
.game-screen {
    position: relative; width: 100%; max-width: 800px; height: 500px;
    margin: 0 auto; border: 5px solid #333; border-radius: 10px;
    overflow: hidden; background: #fff;
}
.patrol-bg {
    width: 100%; height: 100%;
    /* 既存のリビング背景などを流用しつつ、CSSで散らかった画像を重ねる */
    background: #e0f2f7; 
    position: relative;
}
/* 危険箇所（開発中は半透明赤で表示、本番は完全透明に） */
.danger-zone {
    position: absolute; background: rgba(255,0,0,0.0); cursor: pointer; z-index: 10;
}
.danger-zone:hover { background: rgba(255,0,0,0.2); /* ヒント */ }

.waka-navi {
    position: absolute; bottom: 0; left: 0; width: 100%; pointer-events: none;
}
#waka-img {
    position: absolute; bottom: 0; left: 20px; width: 150px;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.8));
}
.navi-balloon {
    position: absolute; bottom: 120px; left: 150px;
    background: rgba(0,0,0,0.8); color: #fff; padding: 15px; border-radius: 20px;
    max-width: 300px; font-size: 0.9rem;
}

/* ゲーム共通 */
.big-btn {
    font-size: 1.5rem; padding: 15px 40px; border-radius: 50px;
    background: #ff4081; color: #fff; border: none; cursor: pointer;
    box-shadow: 0 5px 0 #c51162; transition: transform 0.1s;
}
.big-btn:active { transform: translateY(5px); box-shadow: none; }
.hidden { display: none; }

.game-area {
    text-align: center; margin-top: 50px;
}
.character-display img { width: 200px; margin: 20px 0; }
.status-text { font-size: 1.5rem; font-weight: bold; margin-bottom: 20px; }
/* --- (既存のCSSの続きに追加・修正) --- */

/* パトロール画面：背景をリッチに */
.patrol-bg {
    width: 100%; height: 100%;
    background-color: #fdf5e6; /* 壁紙 */
    background-image: linear-gradient(#e0e0e0 1px, transparent 1px);
    background-size: 100% 50px;
    position: relative;
    overflow: hidden;
}
/* 床 */
.patrol-bg::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 30%;
    background: #d2b48c; border-top: 10px solid #8b4513; z-index: 0;
}

/* --- 危険箇所 (CSSでアイテムを描画) --- */
/* 共通：まだ見つけていない時はポインター、見つけたら枠線 */
.danger-item {
    position: absolute; cursor: pointer; z-index: 5;
    transition: transform 0.2s;
}
.danger-item:hover { transform: scale(1.05); }
.danger-item.found {
    pointer-events: none;
    filter: drop-shadow(0 0 5px #32cd32);
}
.danger-item.found::after {
    content: 'OK!'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #32cd32; font-weight: 900; font-size: 1.5rem; text-shadow: 2px 2px 0 #fff;
    animation: popIn 0.3s;
}

/* 1. 高いところの不安定な花瓶 */
.d-vase-zone {
    top: 15%; right: 15%; width: 60px; height: 100px;
}
/* 棚 */
.d-vase-zone::before {
    content: ''; position: absolute; bottom: 0; width: 120%; left: -10%; height: 10px;
    background: #8b4513; border-radius: 5px;
}
/* 花瓶 */
.d-vase-visual {
    position: absolute; bottom: 10px; left: 10px; width: 40px; height: 60px;
    background: radial-gradient(circle at 30% 30%, #ff6347, #8b0000);
    border-radius: 0 0 20px 20px;
}
/* 揺れている演出 */
.d-vase-visual { animation: wobble 2s infinite ease-in-out; }
@keyframes wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* 2. めくれたカーペット */
.d-rug-zone {
    bottom: 5%; left: 20%; width: 200px; height: 80px;
}
.d-rug-visual {
    width: 100%; height: 100%; background: #87ceeb;
    border-radius: 10px; transform: perspective(500px) rotateX(40deg);
    position: relative;
}
/* めくれ部分 */
.d-rug-visual::after {
    content: ''; position: absolute; top: -10px; right: -10px; width: 40px; height: 40px;
    background: #5f9ea0; border-radius: 0 0 0 20px;
    transform: rotate(-15deg); box-shadow: -2px 2px 5px rgba(0,0,0,0.3);
}

/* 3. タコ足配線 */
.d-outlet-zone {
    bottom: 25%; right: 35%; width: 80px; height: 60px;
}
.d-outlet-visual {
    position: absolute; bottom: 0; width: 100%; height: 20px;
    background: #fff; border: 1px solid #ccc; display: flex;
}
/* スパーク演出 */
.d-outlet-zone:hover::after {
    content: '⚡'; position: absolute; top: -20px; left: 20px; font-size: 20px; color: yellow;
}
.cord-mess {
    position: absolute; width: 100px; height: 50px; border: 2px solid #333;
    border-radius: 50%; border-color: #333 transparent transparent #333;
    transform: rotate(45deg); top: 10px; left: -20px;
}

/* 4. 窓ガラス（飛散防止なし） */
.d-window-zone {
    top: 15%; left: 10%; width: 120px; height: 120px;
    background: #b0e0e6; border: 8px solid #fff; box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
.d-window-zone::after {
    content: ''; position: absolute; top: 0; left: 50%; height: 100%; width: 4px; background: #fff;
}
/* 危険信号 */
.d-window-zone:hover { background: #ffcccc; }
/* --- (既存のCSSの末尾に追加) --- */

/* クリア画面モーダル */
.modal-content.waka-style {
    background: #f0fff0;
    border: 5px solid #32cd32;
    border-radius: 20px;
    text-align: center;
    padding: 30px;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
}

/* 背景にうっすらわかまるアイコン */
.modal-content.waka-style::before {
    content: '🔰';
    position: absolute;
    top: -20px; right: -20px;
    font-size: 150px;
    opacity: 0.1;
    transform: rotate(20deg);
}

.modal-content.waka-style h2 {
    color: #32cd32;
    font-size: 2rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 0 #fff;
}

.result-img-wrapper {
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
    background: #fff;
    border-radius: 50%;
    border: 3px solid #98fb98;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.result-img-wrapper img {
    width: 90%;
    height: auto;
}

.result-msg {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 30px;
    font-weight: bold;
}

.btn-group {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.big-btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    color: white;
    background: #ff7043; /* デフォルト色 */
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0,0,0,0.2);
    transition: transform 0.1s;
    font-size: 1rem;
}

.big-btn:active {
    transform: translateY(4px);
    box-shadow: none;
}