/* ========== RESPONSIVE — TABLET (768px) ========== */
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); box-shadow: 8px 0 30px rgba(0,0,0,0.5); }
    .mobile-header { display: flex; }
    .mobile-nav { display: flex; }
    .content { margin-left: 0; padding: 80px 16px 84px; max-width: 100%; }
    .page-header { flex-direction: column; gap: 12px; }
    .page-title { font-size: 1.6rem; }
    .dash-grid { grid-template-columns: repeat(2, 1fr); }
    .form-row { grid-template-columns: 1fr; }
    .photo-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .peace-grid { grid-template-columns: 1fr; }
    .games-grid { grid-template-columns: repeat(2, 1fr); }
    .date-carousel { padding: 24px 20px; }
    .highlight-content { flex-direction: column; text-align: center; }

    /* Notification dropdown → full width on mobile */
    .notif-dropdown { width: calc(100vw - 32px); left: auto; right: -60px; }
}

/* ========== RESPONSIVE — PHONE (480px) ========== */
@media (max-width: 480px) {
    html { font-size: 14px; }
    .lock-container { padding: 32px 24px; }
    .content { padding: 72px 12px 76px; }
    .dash-grid { grid-template-columns: 1fr; }
    .modal-card { margin: 10px; border-radius: 12px; }
    .balance-card { padding: 16px; }
    .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

    /* Games responsive */
    .games-grid { grid-template-columns: 1fr; }
    .game-play-area { padding: 20px 16px; }
    .game-question-card { padding: 24px 16px; }
    .game-question-text { font-size: 1.1rem; }
    .tot-container { flex-direction: column; }
    .tot-or { display: none; }
    .game-mode-bar { gap: 4px; }
    .mode-btn { padding: 5px 12px; font-size: 0.8rem; }

    /* Wheel responsive */
    .wheel-wrapper, .wheel-canvas { width: 240px; height: 240px; }
    .dice-row { gap: 20px; }
    .dice-face { width: 100px; height: 100px; font-size: 0.9rem; }

    /* Health responsive */
    .health-overview { grid-template-columns: 1fr; }
    .water-btns { flex-wrap: wrap; }
    .health-tabs { flex-wrap: wrap; }
}