:root {
    /* からあげタワー専用のテーマカラー（オレンジ・ブラウン系） */
    --theme-color: #E29B45;
    --text-color: #333333;
    --bg-color: #FFF8EE;
    --white: #FFFFFF;
    --line-color: #06C755;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    text-align: center;
    overflow-x: hidden;
    touch-action: manipulation;
    padding-bottom: 60px;
}

/* ゲーム画面中はページスクロールを無効化 */
body.game-active {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

header {
    background-color: var(--theme-color);
    color: var(--white);
    padding: 15px 0;
}

.screen {
    display: none;
    padding: 20px;
    min-height: calc(100vh - 115px); /* ヘッダーとフッター広告分を引く */
    flex-direction: column;
    align-items: center;
}

.screen.active { display: flex; }

.hero-image { margin-bottom: 20px; }

.primary-btn, .secondary-btn, .line-btn {
    display: inline-block; padding: 15px 30px; font-size: 1.1rem;
    font-weight: bold; border-radius: 30px; border: none;
    text-decoration: none; margin: 10px 0; width: 80%; max-width: 300px;
    cursor: pointer;
}

.primary-btn { background-color: var(--theme-color); color: var(--white); }
.secondary-btn { background-color: #ddd; color: var(--text-color); }
.line-btn { background-color: var(--line-color); color: var(--white); }

#canvas-container { position: relative; width: 100%; display: flex; justify-content: center; }

/* ゲーム画面（キャンバス）専用の背景色と枠線 */
#game-canvas {
    background-color: #FFEFCF;
    border-radius: 10px;
    max-width: 100%;
    border: 2px solid var(--theme-color);
    display: block;
    touch-action: none; /* ゲーム中のタッチスクロールを完全に無効化 */
}

.guide-text {
    position: absolute; top: 40%; left: 0; width: 100%;
    color: var(--theme-color); font-size: 1.3rem; font-weight: bold;
    text-shadow: 0 2px 4px rgba(255,255,255,0.8); pointer-events: none;
    animation: fadeOut 2s forwards 1.5s;
}

@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }

.game-header {
    display: flex; justify-content: space-between; width: 100%;
    max-width: 400px; padding: 0 10px; margin-bottom: 10px;
    font-weight: bold; color: var(--theme-color); font-size: 1.2rem;
}

.ad-space { margin: 20px auto; width: 100%; max-width: 320px; text-align: center; }
.ad-label { font-size: 0.7rem; color: #999; margin-bottom: 5px; }

.ad-placeholder { 
    min-height: 50px; 
    /* ★強制的に中身を中央に配置する強力な指定（Flexbox） */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ad-placeholder table,
.ad-placeholder iframe,
.ad-placeholder div {
    margin: 0 auto !important;
}

.keyword-box {
    background-color: var(--white); border: 3px solid var(--theme-color);
    padding: 20px; font-size: 1.5rem; font-weight: bold;
    color: var(--theme-color); border-radius: 10px; margin: 20px 0;
}

.result-score { font-size: 1.2rem; font-weight: bold; margin: 10px 0; }

/* サイト全体の下部に固定表示する忍者AdMAX枠 */
#global-footer-ad {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 1000;
    min-height: 50px;
}

/* お知らせモーダル（ログイン警告など） */
#notice-modal { 
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.6); z-index: 4000; justify-content: center; align-items: center; 
}
#notice-modal.active { display: flex; }
.notice-content { 
    background: white; padding: 25px; border-radius: 20px; width: 85%; max-width: 350px; 
    text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2); border: 4px solid var(--theme-color); 
}
.notice-content h2 { margin-top: 0; color: #E74C3C; font-size: 1.4rem; }
.notice-content p { font-size: 1rem; line-height: 1.6; color: #555; margin: 20px 0; }
.notice-btn { 
    background-color: var(--theme-color); color: white; border: none; padding: 12px 30px; 
    border-radius: 25px; font-weight: bold; cursor: pointer; font-size: 1rem; transition: transform 0.2s; 
}
.notice-btn:active { transform: scale(0.95); }