/* --- ベース設定 --- */
:root {
    --brand-color: #4A90E2;
    --bg-ui: #fdf6e3;
    --btn-color: #ffffff;
    --btn-active: #e2e8f0;
    --text-main: #333333;
    --cherry-red: #e74c3c;
    --highlight: #ffeb3b;
}

* {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

body {
    margin: 0; padding: 0;
    width: 100vw; height: 100dvh;
    display: flex; font-family: 'M PLUS Rounded 1c', sans-serif;
    overflow: hidden; background-color: #000; 
}

/* 確実な非表示（絶対鉄則） */
.hidden {
    opacity: 0; pointer-events: none; visibility: hidden; z-index: -1 !important; position: absolute;
}

#app-container {
    position: relative; width: 100vw; height: 100dvh;
    background-color: var(--bg-ui); display: flex; overflow: hidden;
}

.screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex;
}

.bg-image {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
}

/* グローバルホームボタン */
.global-home-btn {
    position: absolute; top: 15px; left: 15px; z-index: 9998;
    background: #fff; border: 3px solid var(--brand-color); border-radius: 50px;
    padding: 8px 15px; cursor: pointer; display: flex; align-items: center; gap: 8px;
    font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: bold; font-size: 1.1rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); transition: 0.2s;
}
.global-home-btn img { width: 24px; height: 24px; object-fit: contain; }
.global-home-btn:active { transform: scale(0.95); }

/* --- 導入画面 --- */
#intro-screen { align-items: center; justify-content: center; }
.intro-panel {
    position: relative; z-index: 2; background: rgba(255, 255, 255, 0.95);
    padding: 20px 40px; border-radius: 20px; border: 4px solid var(--brand-color);
    text-align: center; display: flex; flex-direction: column; gap: 15px;
    width: 85%; max-width: 800px; max-height: 95dvh; overflow-y: auto;
}
.app-title { font-size: clamp(1.8rem, 3.5vw, 2.5rem); color: var(--cherry-red); margin: 0; }
.setting-label { font-size: 1.3rem; font-weight: bold; margin: 5px 0; color: var(--text-main); }
.q-selectors, .target-selectors, .level-selectors {
    display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.q-btn, .lvl-btn, .target-btn {
    background: #fff; border: 3px solid #ccc; border-radius: 15px;
    padding: 10px 20px; font-size: 1.2rem; font-weight: bold; cursor: pointer; transition: 0.2s;
}
.target-btn { display: flex; flex-direction: column; align-items: center; padding: 5px 15px; }
.q-btn.active, .target-btn.active, .lvl-btn.active {
    border-color: var(--cherry-red); background: #ffecec; transform: scale(1.05);
}
.target-icon { width: 50px; height: 50px; object-fit: contain; }
.target-num-label { font-family: 'Klee One', cursive; font-size: 1.8rem; font-weight: bold; color: var(--text-main); }
.lvl-btn small { font-size: 0.8rem; font-weight: normal; display: block; margin-top: 5px;}

.help-btn {
    background: #fff; border: 3px solid var(--brand-color); border-radius: 50px;
    padding: 8px 25px; font-size: 1.2rem; font-weight: bold; cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px; transition: 0.2s;
}
.help-btn.off { filter: grayscale(100%); opacity: 0.7; }
.help-icon { width: 35px; height: 35px; }

.ui-btn {
    font-family: 'M PLUS Rounded 1c', sans-serif; font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: bold;
    padding: 12px 25px; background-color: var(--brand-color); color: white;
    border: none; border-radius: 50px; box-shadow: 0 6px 0 #2a5d96; cursor: pointer; transition: transform 0.1s; margin-top: 10px;
}
.ui-btn:active { transform: translateY(6px); box-shadow: none; }

/* 認定証ボタンの特別スタイル */
.cert-btn {
    background: linear-gradient(180deg, #f1c40f, #d35400);
    box-shadow: 0 6px 0 #b94a00;
}
.cert-btn:active {
    box-shadow: none;
}

/* --- ゲーム画面（左70 : 右30） --- */
#game-area { width: 70%; height: 100%; position: relative; overflow: hidden; }
#ui-area { width: 30%; height: 100%; background-color: #fff; border-left: 4px solid #ccc; display: flex; flex-direction: column; padding: 2vh; z-index: 10; }

/* ライフ・スコア表示 */
#life-display {
    position: absolute; top: 15px; left: 140px; z-index: 10;
    font-size: clamp(1.5rem, 3vw, 2.5rem); background: rgba(255,255,255,0.9); padding: 5px 15px; border-radius: 10px;
    border: 3px solid var(--cherry-red);
}
#progress-display {
    position: absolute; top: 15px; right: 15px; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: bold;
    background: rgba(255,255,255,0.9); padding: 5px 15px; border-radius: 10px; z-index: 10;
    color: var(--text-main); border: 3px solid var(--brand-color);
}

/* さくらんぼスロット配置 */
.cherry-slot { position: absolute; top: 15%; width: 28%; height: 45%; z-index: 2; }
.left-pos { left: 5%; }
.center-pos { left: 36%; }
.right-pos { left: 67%; }

.sakusaku-container { position: relative; width: 100%; height: 100%; cursor: pointer; transition: transform 0.2s; }
.sakusaku-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }

/* ズレ調整：雲と実の数字の絶対配置 */
.num-top, .num-left, .num-right {
    position: absolute; font-family: 'Klee One', cursive; font-weight: bold;
    color: var(--text-main); z-index: 2; text-align: center;
}
.num-top {
    top: 23%; left: 50%; transform: translate(-50%, -50%);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
}
.num-left {
    bottom: 23%; left: 28%; transform: translate(-50%, 50%);
    font-size: clamp(2rem, 3.5vw, 3rem);
}
.num-right {
    bottom: 23%; right: 28%; transform: translate(50%, 50%);
    font-size: clamp(2rem, 3.5vw, 3rem);
}
.blank-spot { color: #fff; text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000; }

/* アクティブ（選択中）のハイライト */
@keyframes pulseGlow { 0% { filter: drop-shadow(0 0 5px var(--highlight)); transform: scale(1); } 50% { filter: drop-shadow(0 0 15px var(--highlight)); transform: scale(1.05); } 100% { filter: drop-shadow(0 0 5px var(--highlight)); transform: scale(1); } }
.is-active-slot .sakusaku-container { animation: pulseGlow 1.5s infinite; }
.is-active-slot .blank-spot { color: var(--highlight); }

/* おじゃまカラス (150%に拡大) */
.crow-container { position: absolute; top: -10%; width: 90px; height: 90px; z-index: 4; transition: transform linear; }
.crow-img { width: 100%; height: 100%; object-fit: contain; }

/* おたすけドット */
.help-dots { position: absolute; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; z-index: 5; pointer-events: none; }
.help-dots.pos-top { top: -10%; left: 0; }
.help-dots.pos-left { bottom: 0; left: -20%; width: 50%; }
.help-dots.pos-right { bottom: 0; right: -20%; width: 50%; }
.help-dot { width: 15px; height: 15px; background-color: rgba(255,255,255,0.9); border: 2px solid var(--brand-color); border-radius: 50%; }

/* アニメーション用数字 */
#flying-number { position: absolute; z-index: 100; font-family: 'Klee One', cursive; font-size: 4rem; font-weight: bold; color: var(--text-main); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }

/* ジェムえもんコンテナ */
#jem-container { position: absolute; bottom: 2%; left: 36%; width: 28%; max-width: 250px; z-index: 3; transition: left 0.5s ease-out; display: flex; justify-content: center; }
.gem-character { width: 100%; height: auto; }

/* 揺れ・落下アニメーション */
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
.shake { animation: shake 0.3s ease; }
@keyframes dropToBasket { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(50vh) scale(0.5); opacity: 0; } }
.drop-anim { animation: dropToBasket 0.6s forwards ease-in; }

/* --- 右側 UI・テンキー --- */
.answer-box {
    background-color: #fff; border: 4px solid var(--brand-color); border-radius: 15px; height: 12vh;
    margin-bottom: 2vh; display: flex; align-items: center; justify-content: center; text-align: center;
    font-family: 'M PLUS Rounded 1c', sans-serif; font-size: clamp(1rem, 2vw, 1.5rem); color: var(--text-main); font-weight: bold;
}
.numpad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5vh; flex-grow: 1; }
.num-btn {
    background-color: var(--btn-color); color: var(--text-main); border: 3px solid #ddd; border-radius: 15px;
    font-size: 2.5rem; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: bold; box-shadow: 0 6px 0 #ccc;
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.05s; touch-action: none;
}
.num-btn:active { transform: translateY(6px); box-shadow: 0 0px 0 #ccc; background-color: var(--btn-active); }
.action-btn { font-size: 1.5rem; background-color: #f1f2f6; }
.disabled { opacity: 0.3; pointer-events: none; }

/* --- クリア画面 --- */
#clear-screen { background: rgba(0, 0, 0, 0.7); z-index: 100; align-items: center; justify-content: center; }
.clear-content { background: #fff; padding: 40px; border-radius: 20px; text-align: center; border: 5px solid var(--cherry-red); width: 85%; max-width: 700px; }
.clear-title { font-size: 2.5rem; color: var(--cherry-red); margin-bottom: 10px; }
.medal-icon { font-size: 4rem; margin: 10px 0; }
#clear-message { font-size: 1.8rem; margin-bottom: 30px; font-weight: bold; color: var(--text-main); }
.clear-buttons { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;}

/* === ジェムナビボタン === */
.gem-navi-wrapper {
    position: fixed; bottom: 20px; right: 20px; z-index: 9999;
    display: flex; align-items: stretch; background: #fff;
    border-radius: 30px; box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    border: 3px solid #78C2C4; overflow: hidden; transition: box-shadow 0.2s;
}
.gem-navi-handle {
    padding: 0 15px; background: #E6E9ED; color: #AAB2BD;
    cursor: grab; font-size: 1.2rem; user-select: none; touch-action: none;
    display: flex; align-items: center; justify-content: center;
}
.gem-navi-handle:active { cursor: grabbing; background: #CCD1D9; }
.gem-navi-btn {
    background: linear-gradient(135deg, #A0CECB, #78C2C4); color: #fff !important; text-decoration: none; padding: 10px 20px;
    font-weight: bold; font-family: "M PLUS Rounded 1c", sans-serif; display: flex; align-items: center; gap: 5px; font-size: 1rem; white-space: nowrap;
}
.gem-navi-btn:hover { opacity: 0.9; }
.gem-navi-icon {
    width: 24px !important; height: 24px !important; object-fit: cover !important; border-radius: 50% !important; flex-shrink: 0 !important; margin-right: 4px !important; display: inline-block !important;
}