/* =============================================
    LAPSEO v3.0 — Custom Styles
   Tailwind CSS handles the design system.
   These are utilities Tailwind can't cover.
   ============================================= */

:root {
    /* Light Mode Colors */
    --bg-dark: 246 246 248; /* #f6f6f8 */
    --surface-dark: 255 255 255; /* #ffffff */
    --c-slate-100: 15 23 42; /* slate-900 */
    --c-slate-300: 51 65 85; /* slate-700 */
    --c-slate-400: 71 85 105; /* slate-600 */
    --c-slate-500: 100 116 139; /* slate-500 */
    --c-slate-600: 148 163 184; /* slate-400 */
    --c-slate-700: 203 213 225; /* slate-300 */
    --c-slate-800: 226 232 240; /* slate-200 */
    --c-slate-900: 241 245 249; /* slate-100 */
    --c-white: 0 0 0;
    --c-black: 255 255 255;
}

.dark {
    /* Dark Mode Colors */
    --bg-dark: 16 22 34; /* #101622 */
    --surface-dark: 28 35 51; /* #1c2333 */
    --c-slate-100: 241 245 249;
    --c-slate-300: 203 213 225;
    --c-slate-400: 148 163 184;
    --c-slate-500: 100 116 139;
    --c-slate-600: 71 85 105;
    --c-slate-700: 51 65 85;
    --c-slate-800: 30 41 59;
    --c-slate-900: 15 23 42;
    --c-white: 255 255 255;
    --c-black: 0 0 0;
}

/* Body & PWA sizing */
body {
    min-height: max(884px, 100dvh);
    font-family: 'Manrope', sans-serif;
}

/* iOS Safe Area */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 20px);
}

/* Scrollbar hiding */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Minimal custom scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--c-slate-600) / 0.5); border-radius: 10px; }

/* Noise texture overlay for onboarding */
.bg-noise {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Subtle gradient glow */
.glow-effect {
    background: radial-gradient(circle at 50% 50%, rgba(19, 91, 236, 0.15), transparent 60%);
}

/* Pulse ring animation for start button */
@keyframes pulse-ring {
    0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(19, 91, 236, 0.4); }
    70%  { transform: scale(1);    box-shadow: 0 0 0 20px rgba(19, 91, 236, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(19, 91, 236, 0); }
}
.animate-pulse-ring {
    animation: pulse-ring 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Circular progress ring for streak */
@keyframes dash-anim {
    0% { stroke-dashoffset: 283; }
}
.animate-dash {
    animation: dash-anim 1.5s ease-out forwards;
}

/* Material Symbols — filled variant */
.material-symbols-outlined.filled,
.nav-item.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Navigation item states */
.nav-item {
    color: rgb(var(--c-slate-400));
    transition: color 0.2s ease;
    cursor: pointer;
    border: none;
    background: none;
}
.nav-item:hover {
    color: rgb(var(--c-slate-800));
}
.nav-item.active {
    color: #135bec;
}

/* Toast notification */
.toast {
    background: rgb(var(--surface-dark) / 0.95);
    border: 1px solid rgb(var(--c-white) / 0.1);
    color: rgb(var(--c-white));
    padding: 12px 24px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgb(var(--c-black) / 0.3);
    animation: toast-in 0.3s ease-out;
    white-space: nowrap;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Page transition */
#app-content {
    transition: opacity 0.12s ease;
}
#app-content.is-switching {
    opacity: 0;
}

/* Glass panel */
.glass-panel {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgb(var(--c-white) / 0.08);
}

/* Text glow for hero numbers */
.text-glow {
    text-shadow: 0 0 40px rgba(19, 91, 236, 0.3);
}

/* Stop button state (overrides blue gradient) */
.btn-stop-state {
    background: linear-gradient(to bottom, #ef4444, #dc2626) !important;
    box-shadow: 0 0 40px -10px rgba(239, 68, 68, 0.3) !important;
}

/* Tabular nums for timer */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Category chip disabled */
.cat-chip:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ═══════════════════════════════════════════
   ACTIVITIES — Breathe, Learn, Think, Play
   ═══════════════════════════════════════════ */

/* Panel entrance */
@keyframes activity-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-activity-in {
    animation: activity-in 0.35s ease-out;
}

/* Card swap animation */
@keyframes card-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-card-in {
    animation: card-in 0.3s ease-out;
}

/* Breathing circle scale states */
.breathe-inhale  { transform: scale(1.25); }
.breathe-hold    { transform: scale(1.25); }
.breathe-exhale  { transform: scale(0.85); }
.breathe-default { transform: scale(1); }

/* Breathing ring pulse */
@keyframes breathe-ring-pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.08); }
}
.breathe-ring-pulse {
    animation: breathe-ring-pulse 3s ease-in-out infinite;
}

/* Play choice feedback */
.play-choice.correct {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    color: #34d399 !important;
}
.play-choice.wrong {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
}

/* Shake animation for wrong answers */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}
.animate-shake {
    animation: shake 0.4s ease-in-out;
}