/* 背景アニメーション */
body { 
    font-family: 'Inter', 'Noto Sans JP', sans-serif; 
    color: #1e293b; 
    -webkit-tap-highlight-color: transparent;
    background: linear-gradient(-45deg, #a1c4fd, #c2e9fb, #fbc2eb, #a6c1ee);
    background-size: 400% 400%;
    animation: gradientBG 20s ease infinite;
    min-height: 100vh;
    overscroll-behavior-y: none;
    touch-action: manipulation;
}
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* グラスモーフィズム */
.glass {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}
.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: transform 0.2s, background 0.2s;
}
.glass-card:active { transform: scale(0.98); background: rgba(255,255,255,0.9); }

.exp-bar-bg { background: rgba(0,0,0,0.05); border-radius: 99px; height: 6px; overflow: hidden; }
.exp-bar-fill { background: linear-gradient(90deg, #3b82f6, #8b5cf6); height: 100%; width: 0%; transition: width 1s ease-out; }

.dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .dashboard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dashboard-grid { grid-template-columns: repeat(3, 1fr); } }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); z-index: 50; display: none; align-items: center; justify-content: center; }
.modal-card { background: white; width: 95%; max-width: 480px; border-radius: 28px; padding: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); animation: zoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); max-height: 90vh; overflow-y: auto; }
@keyframes zoomIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 印刷レイアウト (全画面対応) */
#print-layer { display: none; position: fixed; inset: 0; background: white; z-index: 9999; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto; padding-bottom: 100px; }

@media print {
    body { background: white; animation: none; }
    body > *:not(#print-layer) { display: none !important; }
    #print-layer { display: flex !important; }
    .no-print { display: none !important; }
    @page { margin: 0; size: auto; }

    /* ▼▼▼ 追加した魔法のコード ▼▼▼ */
    /* これを入れると、赤や黄色の背景色が印刷時も消えなくなります */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    /* ▲▲▲ ここまで ▲▲▲ */
}
#levelup-overlay, #tutorial-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.5s; background: rgba(255,255,255,0.9); backdrop-filter: blur(5px); pointer-events: none; }
#levelup-overlay.show, #tutorial-overlay.show { opacity: 1; pointer-events: auto; }
.levelup-card { background: white; padding: 40px; border-radius: 30px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.2); transform: scale(0.5); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
#levelup-overlay.show .levelup-card { transform: scale(1); }

.tutorial-step { display: none; text-align: center; max-width: 300px; }
.tutorial-step.active { display: block; animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }

.update-badge { position: absolute; top: 0; right: 0; width: 12px; height: 12px; background: #ef4444; border-radius: 50%; border: 2px solid white; display: none; pointer-events: none; }
.update-badge.show { display: block; animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }