:root { --app-bg: #FFF7ED; }
        body {
            font-family: 'Zen Maru Gothic', sans-serif;
            background-color: var(--app-bg);
            background-image: radial-gradient(#FED7AA 2px, transparent 2px);
            background-size: 24px 24px;
            color: #334155;
            touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent;
            height: 100dvh; width: 100vw; display: flex; flex-direction: column; overflow: hidden;
        }

        /* --- アニメーション・演出 --- */
        .btn-push { transition: transform 0.1s, box-shadow 0.1s; position: relative; }
        .btn-push:active { transform: translateY(2px); box-shadow: none !important; }
        
        .fade-enter { animation: fadeEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
        @keyframes fadeEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* --- マスコット --- */
        .maron-wrapper { width: 36px; height: 32px; position: relative; flex-shrink: 0; }
        .maron-body { width: 100%; height: 100%; background-color: #92400E; border-radius: 50% 50% 45% 45%; position: relative; box-shadow: 0 2px 0 #78350F; }
        .maron-face { width: 80%; height: 70%; background-color: #FEF3C7; border-radius: 50% 50% 45% 45%; position: absolute; bottom: 5%; left: 10%; }
        .maron-ear { width: 24%; height: 28%; background-color: #92400E; border-radius: 50%; position: absolute; top: -10%; }
        .maron-ear.l { left: 5%; } .maron-ear.r { right: 5%; }
        .maron-eye { width: 10%; height: 15%; background-color: #451A03; border-radius: 50%; position: absolute; top: 35%; }
        .maron-eye.l { left: 30%; } .maron-eye.r { right: 30%; }
        .maron-cheek { width: 15%; height: 10%; background-color: #FCA5A5; border-radius: 50%; position: absolute; top: 45%; opacity: 0.6; }
        .maron-cheek.l { left: 15%; } .maron-cheek.r { right: 15%; }
        .maron-mouth { width: 20%; height: 10%; border-bottom: 2px solid #451A03; border-radius: 0 0 50% 50%; position: absolute; top: 45%; left: 40%; }
        .maron-happy .maron-mouth { height: 20%; background-color: #EF4444; border: none; border-radius: 0 0 50px 50px; }

        /* --- 時計 --- */
        .clock-fixed-wrapper { width: 240px; height: 240px; margin: 0 auto; position: relative; flex-shrink: 0; }
        .clock-face { width: 100%; height: 100%; background: white; border-radius: 50%; border: 8px solid #3B82F6; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
        .clock-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; background: #1E293B; border-radius: 50%; z-index: 30; border: 2px solid #E2E8F0; }
        .clock-num {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            font-weight: 900;
            color: #475569;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }
        .hand { position: absolute; bottom: 50%; left: 50%; transform-origin: 50% 100%; border-radius: 50px 50px 0 0; z-index: 20; pointer-events: none; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
        .hand-hour { width: 10px; height: 60px; background: #EF4444; }
        .hand-minute { width: 6px; height: 79px; background: #3B82F6; z-index: 25; }
        .clock-tick { position: absolute; top: 0; left: 50%; width: 2px; height: 100%; pointer-events: none; }
        .clock-tick::before { content: ''; display: block; margin: 0 auto; width: 3px; height: 8px; background: #CBD5E1; }
        .clock-tick.major::before { width: 5px; height: 14px; background: #94A3B8; }
        .clock-touch-layer { position: absolute; inset: -20px; z-index: 50; cursor: pointer; border-radius: 50%; }

        /* --- おかね --- */
        .coin-btn { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; box-shadow: 0 3px 0 rgba(0,0,0,0.2); position: relative; flex-shrink: 0; }
        .coin-btn:active { transform: translateY(3px); box-shadow: none; }
        .coin-100 { background: #E2E8F0; border: 3px solid #94A3B8; color: #475569; }
        .coin-50  { background: #E2E8F0; border: 3px solid #94A3B8; color: #475569; }
        .coin-10  { background: #FFEDD5; border: 3px solid #EA580C; color: #9A3412; }
        .coin-5   { background: #FEF08A; border: 3px solid #CA8A04; color: #854D0E; }
        .coin-1   { background: #F8FAFC; border: 2px solid #CBD5E1; color: #64748B; font-size: 18px; }
        
        /* お金のトレイ (ビジュアル表示用) */
        #coin-tray { min-height: 50px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; align-content: center; gap: 4px; padding: 4px; }
        .tray-coin { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; border: 2px solid; box-shadow: 0 1px 2px rgba(0,0,0,0.1); animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }

        /* --- もじさがし --- */
        .moji-grid { display: grid; gap: 6px; width: 100%; max-width: 360px; margin: 0 auto; }
        .moji-cell { aspect-ratio: 1; background: white; border: 2px solid #FED7AA; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 900; color: #4B5563; box-shadow: 0 3px 0 #FDBA74; cursor: pointer; transition: background 0.2s; }
        .moji-cell:active { transform: translateY(3px); box-shadow: none; background: #FFF7ED; }
        .moji-hint { background-color: #FEF08A !important; border-color: #EAB308 !important; animation: pulse 1s infinite; }
        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

        /* --- レイアウト調整 --- */
        .tab-content { display: none; width: 100%; height: 100%; flex-direction: column; align-items: center; overflow-y: auto; padding: 20px 10px 40px 10px; -webkit-overflow-scrolling: touch; }
        .tab-content.active { display: flex; }
        
        /* ナビゲーション */
        .nav-item { color: #94A3B8; transition: all 0.2s; cursor: pointer; border-bottom: 3px solid transparent; }
        .nav-item.active { color: #F97316; background: #FFF7ED; border-bottom: 3px solid #F97316; }

        /* --- 花丸 --- */
        .hanamaru-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(255,255,255,0.3); backdrop-filter: blur(2px); }
        .hanamaru-container.show { display: flex; }
        .hanamaru-svg { width: 90vw; height: 90vw; max-width: 380px; max-height: 380px; filter: drop-shadow(0 10px 20px rgba(239, 68, 68, 0.4)); transform: rotate(-10deg); }
        .flower-path { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw-flower 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
        .text-group { transform-origin: center; animation: pop-text 0.5s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; opacity: 0; transform: scale(0.5); }
        @keyframes draw-flower { to { stroke-dashoffset: 0; } }
        @keyframes pop-text { to { opacity: 1; transform: scale(1); } }

        .compact-card { width: 100%; max-width: 480px; background: white; border-radius: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); border: 2px solid #E2E8F0; padding: 10px; margin-bottom: 8px; flex-shrink: 0; }