@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800;900&family=Work+Sans:wght@700;800&display=swap";:root{--game-yellow:#ffe500;--game-purple:#712ae2;--game-purple-dark:#5a00c6;--game-green:#006d36;--game-green-light:#6fff9d;--game-dark:#1c1b1b;--game-white:#fff;--font-headline:"Plus Jakarta Sans", sans-serif;--font-body:"Work Sans", sans-serif;--radius-game:24px}.game-grid-bg{background-image:linear-gradient(90deg,#1c1b1b12 1px,#0000 1px),linear-gradient(#1c1b1b12 1px,#0000 1px);background-size:40px 40px}.clay-card{background-color:var(--game-white);border-radius:var(--radius-game);border:4px solid var(--game-dark);box-shadow:6px 6px 0px 0px var(--game-dark), inset 4px 4px 0px #fffc, inset -4px -4px 0px #0000000d;padding:24px;transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}.clay-card.purple{background-color:var(--game-purple);color:var(--game-white)}.clay-btn{background-color:var(--game-white);color:var(--game-dark);font-family:var(--font-body);border:4px solid var(--game-dark);cursor:pointer;box-shadow:4px 4px 0px 0px var(--game-dark);border-radius:20px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:16px;font-weight:800;transition:all .1s cubic-bezier(.175,.885,.32,1.275);display:inline-flex;position:relative}.clay-btn.purple{background-color:var(--game-purple);color:var(--game-white)}.clay-btn.green{background-color:var(--game-green-light);color:var(--game-dark)}.clay-btn:active{box-shadow:1px 1px 0px 0px var(--game-dark);transform:translate(3px,3px)scaleX(1.06)scaleY(.92)}@keyframes floatAnimation{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-8px)rotate(2deg)}}.mancot-float{animation:3s ease-in-out infinite floatAnimation}:root{--primary:#004b3e;--primary-dark:#00362c;--primary-light:#e6efef;--bg-main:#f4f3eb;--bg-card:#fff;--text-dark:#004b3e;--text-muted:#55726d;--border:#004b3e;--success:#10b981}.app-shell{position:relative}.mascot-container{z-index:999;pointer-events:none;flex-direction:column;align-items:flex-end;gap:10px;display:flex;position:fixed;bottom:100px;right:24px}.mascot-bubble{color:var(--text-dark);pointer-events:auto;background:#fff;border:4px solid #004b3e;border-radius:18px 18px 4px;max-width:200px;padding:10px 16px;font-size:13px;font-weight:700;animation:.4s fadeInUp;box-shadow:4px 4px #004b3e}.mascot-avatar{border-radius:var(--radius-full);background:linear-gradient(135deg, var(--primary), var(--primary-dark));pointer-events:auto;cursor:pointer;width:65px;height:65px;transition:transform var(--transition-spring);border:4px solid #004b3e;justify-content:center;align-items:center;font-size:30px;animation:3s ease-in-out infinite float;display:flex;box-shadow:4px 4px #004b3e}.mascot-avatar:hover{transform:scale(1.1)}.treasure-overlay{z-index:200;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#004b3e66;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:relative;inset:0}.treasure-box-card{border-radius:var(--radius-xl);text-align:center;width:90%;max-width:380px;box-shadow:var(--shadow-xl);animation:bounce-in .6s var(--transition-spring);background:#fff;border:4px solid #004b3e;padding:40px}.treasure-chest{filter:drop-shadow(0 8px 16px #004b3e4d);margin:0 auto 16px;font-size:80px;animation:2s ease-in-out infinite float;display:block}.prayer-movement-card{border-radius:var(--radius-xl);background:var(--bg-card);border:3px solid #004b3e;overflow:hidden;box-shadow:4px 4px #004b3e}.movement-image{background:linear-gradient(135deg, var(--primary-light), #d4eae6);justify-content:center;align-items:center;height:220px;font-size:90px;display:flex;position:relative}.movement-image .rakat-badge{background:var(--primary);color:#fff;border-radius:var(--radius-full);padding:4px 12px;font-size:11.5px;font-weight:800;position:relative;top:12px;right:12px}.movement-content{padding:24px}.movement-name{color:var(--text-dark);margin-bottom:4px;font-size:24px;font-weight:900}.movement-list{background:#fff;border:4px solid #004b3e;border-radius:20px;flex-direction:column;gap:12px;margin-right:16px;padding:12px;display:flex;box-shadow:4px 4px #004b3e}.movement-list-item{cursor:pointer;border:3px solid #0000;border-radius:14px;align-items:center;gap:14px;padding:14px 18px;transition:all .2s cubic-bezier(.34,1.56,.64,1);display:flex}.movement-list-item:hover{background:var(--primary-light);border-color:#004b3e;transform:translateY(-2px)}.movement-list-item.active{background:var(--primary);border-color:#004b3e;box-shadow:3px 3px #00362c;color:#fff!important}.movement-list-item.active *{color:#fff!important}.movement-list-num{border-radius:var(--radius-full);background:var(--primary-light);width:32px;height:32px;color:var(--text-dark);border:2px solid #004b3e;flex-shrink:0;justify-content:center;align-items:center;font-size:13px;font-weight:800;display:flex}.stat-card{background:#fff!important;border:4px solid #004b3e!important;border-radius:20px!important;flex-direction:column!important;gap:6px!important;padding:20px!important;transition:all .2s ease-in-out!important;display:flex!important;box-shadow:5px 5px #004b3e!important}.stat-card:hover{transform:translateY(-3px)!important;box-shadow:7px 7px #00362c!important}.stat-card .stat-label{color:#004b3e!important;opacity:.75!important;text-transform:uppercase!important;letter-spacing:.5px!important;font-size:12px!important;font-weight:800!important}.stat-card .stat-value{color:#004b3e!important;font-size:32px!important;font-weight:900!important;line-height:1.1!important}.stat-card .stat-icon{color:#004b3e!important;margin-bottom:4px!important;font-size:30px!important}.prayer-time-row{border-radius:var(--radius);background:var(--bg-card);border:2px solid #004b3e;justify-content:space-between;align-items:center;padding:12px 16px;display:flex;box-shadow:3px 3px #004b3e}.prayer-time-row.next{border-color:var(--primary);background:var(--primary-light);font-weight:800}.countdown-display{color:var(--primary-dark);letter-spacing:-1px;font-size:42px;font-weight:900}.adventure-map{border-radius:var(--radius-xl);background:linear-gradient(#e6efef 0%,#cde2df 100%);border:3px solid #004b3e;min-height:500px;padding:32px 24px;position:relative;box-shadow:4px 4px #004b3e}.drag-item{border-radius:var(--radius);background:var(--bg-card);cursor:grab;color:var(--text-dark);border:2px solid #004b3e;padding:10px 16px;font-weight:700;box-shadow:3px 3px #004b3e}.drag-item:hover{background:var(--primary-light);transform:translateY(-2px)}.chart-bar{background:linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);border:2px solid #004b3e;border-radius:4px 4px 0 0;width:100%}.main-app-container{transition:background .3s;width:100vw!important;min-height:100vh!important;display:flex!important;position:relative!important;overflow-x:hidden!important}.main-app-container.kids-mode{background-color:var(--game-yellow)!important;background-image:none!important}.main-app-container.parent-mode{background-color:#f4f3eb!important;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l30 30-30 30L0 30z' fill='%23004B3E' fill-opacity='0.02' fill-rule='evenodd'/%3E%3C/svg%3E")!important}.page-content-wrapper{box-sizing:border-box!important;flex-direction:column!important;min-width:0!important;transition:all .25s ease-in-out!important;display:flex!important;position:relative!important}.page-content-wrapper.sidebar-is-open{flex:1!important;width:calc(100vw - 280px)!important;max-width:calc(100vw - 280px)!important;margin-left:280px!important}.page-content-wrapper.sidebar-is-closed{flex:1!important;width:100vw!important;max-width:100vw!important;margin-left:0!important}.header-container-block{box-sizing:border-box!important;z-index:99!important;width:100%!important;padding:24px 24px 0 12px!important;display:block!important;position:relative!important}.dashboard-main-core{box-sizing:border-box!important;flex:1!important;padding:16px 24px 24px 12px!important;position:relative!important}.main-app-container{height:auto!important;min-height:100vh!important;overflow-y:auto!important}.header-container-block{padding-top:40px!important}.dashboard-main-core{height:auto!important;min-height:calc(100vh - 160px)!important;padding-bottom:60px!important;overflow:visible!important}.page-content-wrapper.sidebar-is-open{box-sizing:border-box!important;width:calc(100% - 320px)!important;max-width:calc(100% - 320px)!important;margin-left:320px!important}.header-container-block{box-sizing:border-box!important;width:100%!important;padding-left:24px!important}.page-content-wrapper,div[class*=page-content-wrapper]{box-sizing:border-box!important;width:100%!important;max-width:100%!important;margin-left:0!important;padding-left:320px!important}.header-container-block,div[class*=header-container-block]{box-sizing:border-box!important;width:100%!important;padding-top:50px!important;padding-left:40px!important;display:block!important}.main-app-container,body,#root{height:auto!important;min-height:100vh!important;overflow-y:auto!important}.dashboard-main-core,main[class*=dashboard-main-core]{height:auto!important;padding-bottom:100px!important;overflow:visible!important}.dashboard-main-core,.dashboard-main-core *,div[style*="max-width: 1000px"] *{margin-bottom:12px!important}.dashboard-main-core h2{color:var(--text-dark);margin-top:16px!important;margin-bottom:8px!important}.grid-4,.grid-2{gap:16px!important}.page-content-wrapper{box-sizing:border-box!important;flex-direction:column!important;height:100vh!important;display:flex!important;overflow-y:auto!important}.header-container-block{z-index:999!important;box-sizing:border-box!important;width:100%!important;max-width:100%!important;padding:24px 24px 10px 12px!important;position:sticky!important;top:0!important}.kids-mode .header-container-block{background-color:var(--game-yellow)!important}.parent-mode .header-container-block{background-color:#f4f3eb!important}.dashboard-main-core{height:auto!important;margin-top:0!important;padding:10px 24px 60px 12px!important;overflow:visible!important}.dashboard-main-core section[style*=margin-bottom],.dashboard-main-core .grid-4[style*=margin-bottom],.dashboard-main-core div[style*=margin-bottom]{margin-bottom:12px!important}@media (width<=1024px){.page-content-wrapper,div[class*=page-content-wrapper],.page-content-wrapper.sidebar-is-open,.page-content-wrapper.sidebar-is-closed{width:100%!important;max-width:100%!important;margin-left:0!important;padding-left:0!important}.header-container-block{padding-top:16px!important;padding-left:12px!important;padding-right:12px!important}.dashboard-main-core{padding-bottom:80px!important;padding-left:12px!important;padding-right:12px!important}}:root{--primary:var(--game-purple);--primary-dark:var(--game-purple-dark);--primary-light:#f0e6ff;--success:var(--game-green);--success-light:var(--game-green-light);--border:var(--game-dark);--border-strong:var(--game-dark);--bg-card:var(--game-white);--text-dark:var(--game-dark);--text-muted:#555;--shadow:4px 4px 0px 0px var(--game-dark);--shadow-sm:2px 2px 0px 0px var(--game-dark);--shadow-lg:6px 6px 0px 0px var(--game-dark);--shadow-xl:8px 8px 0px 0px var(--game-dark);--radius-xl:var(--radius-game);--radius-lg:16px;--radius:12px;--radius-sm:8px;--radius-full:9999px;--transition:all .2s ease;--transition-spring:all .3s cubic-bezier(.175, .885, .32, 1.275)}body{background-color:var(--game-yellow);font-family:var(--font-headline);color:var(--game-dark);margin:0;padding:0}.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;display:grid}.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;display:grid}.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;display:grid}.card{background-color:var(--game-white);border-radius:var(--radius-xl);border:4px solid var(--game-dark);box-shadow:6px 6px 0px 0px var(--game-dark);padding:24px;transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}.card.mb-4{margin-bottom:16px}.btn{background-color:var(--game-white);color:var(--game-dark);font-family:var(--font-body);border:4px solid var(--game-dark);cursor:pointer;box-shadow:4px 4px 0px 0px var(--game-dark);border-radius:20px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:16px;font-weight:800;text-decoration:none;transition:all .1s cubic-bezier(.175,.885,.32,1.275);display:inline-flex;position:relative}.btn:active{box-shadow:1px 1px 0px 0px var(--game-dark);transform:translate(3px,3px)}.btn-primary{background-color:var(--game-purple);color:var(--game-white)}.btn-primary:hover{background-color:var(--game-purple-dark)}.btn-success{background-color:var(--game-green-light);color:var(--game-dark)}.btn-ghost{box-shadow:none;background-color:#0000;border-color:#0000}.btn-ghost:active{box-shadow:none;transform:none}.btn-sm{box-shadow:2px 2px 0px 0px var(--game-dark);border-width:3px;border-radius:12px;padding:6px 12px;font-size:13px}.btn-sm:active{box-shadow:1px 1px 0px 0px var(--game-dark);transform:translate(1px,1px)}.w-full{width:100%}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fadeInUp{animation:.4s cubic-bezier(.175,.885,.32,1.275) forwards fadeInUp}.section-title{background-color:var(--game-white);border:4px solid var(--game-dark);border-radius:var(--radius-xl);box-shadow:4px 4px 0px 0px var(--game-dark);align-items:center;gap:12px;width:fit-content;margin-bottom:24px;padding:12px 20px;font-size:24px;font-weight:900;display:flex}.title-icon{font-size:32px}.audio-player{background-color:var(--game-white);border:4px solid var(--game-dark);border-radius:var(--radius-lg);box-shadow:4px 4px 0px var(--game-dark);align-items:center;gap:16px;padding:16px;display:flex}.audio-play-btn{border:3px solid var(--game-dark);background-color:var(--game-yellow);width:40px;height:40px;color:var(--game-dark);cursor:pointer;box-shadow:2px 2px 0px var(--game-dark);border-radius:50%;justify-content:center;align-items:center;padding:0;transition:all .1s;display:flex}.audio-play-btn:active{box-shadow:1px 1px 0px var(--game-dark);transform:translate(1px,1px)}.audio-track{border:3px solid var(--game-dark);cursor:pointer;background-color:#e2e8f0;border-radius:999px;height:12px;position:relative;overflow:hidden}.audio-progress{background-color:var(--game-green-light);border-right:2px solid var(--game-dark);height:100%;transition:width .1s linear}.movement-list-item{cursor:pointer;background:0 0;border:3px solid #0000;border-radius:12px;align-items:center;gap:10px;padding:10px 12px;transition:all .1s;display:flex}.movement-list-item:hover{border-color:var(--game-dark);background-color:#f1f5f9}.movement-list-item.active{background-color:var(--game-yellow)!important;border-color:var(--game-dark)!important;box-shadow:3px 3px 0px var(--game-dark)!important}.movement-list-num{border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:12px;font-weight:900;display:flex;border:3px solid var(--game-dark)!important;color:#000!important;background-color:#fff!important}.movement-list-num.active{background-color:var(--game-purple)!important;color:#fff!important}.movement-list-num.completed{background-color:var(--game-green-light)!important;color:#000!important}.prayer-item{background-color:var(--game-white);border:4px solid var(--game-dark);border-radius:var(--radius-xl);box-shadow:4px 4px 0px var(--game-dark);cursor:pointer;align-items:center;gap:16px;padding:16px 20px;transition:all .1s;display:flex}.prayer-item:active{box-shadow:2px 2px 0px var(--game-dark);transform:translate(2px,2px)}.prayer-item.checked{box-shadow:2px 2px 0px var(--game-dark);transform:translate(2px,2px);background-color:var(--game-green-light)!important}.prayer-checkbox{border:3px solid var(--game-dark);width:28px;height:28px;box-shadow:1px 1px 0px var(--game-dark);background-color:#fff;border-radius:8px;justify-content:center;align-items:center;font-weight:900;display:flex}.prayer-checkbox.checked{background-color:var(--game-purple)!important;color:#fff!important}