@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');:root{--quiz-space-xs: 8px;--quiz-space-sm: 12px;--quiz-space-md: 16px;--quiz-space-lg: 24px;--quiz-space-xl: 32px;--quiz-comp-radius: 16px;--quiz-comp-border: 1.5px solid #e2d9cc;--quiz-comp-bg: #ffffff;--quiz-comp-shadow: 0 2px 6px rgba(0,0,0,0.04);--bg-green-dark: #1e3a19;--bg-green-leaf: #2e5927;--bg-green-accent: #4a8539;--header-brown: #3b2413;--header-brown-dark: #2c1a0c;--card-cream: #f9f3e3;--card-cream-border: #ebd9b8;--sidebar-brown: #332011;--sidebar-brown-light: #442d1b;--text-dark: #3a2818;--progress-coral: #e06d53;--accent-yellow: #f8c232;--accent-orange: #e87b28;--pill-white: #ffffff;--pill-border: #e0d0b8;--pill-hover: #fff8eb;--selected-green: #e2f3df;--selected-border: #4a8539;--font-heading: 'Fredoka','Poppins',sans-serif;--font-body: 'Poppins',sans-serif;}*{box-sizing: border-box;margin: 0;padding: 0;}body{font-family: var(--font-body);background-color: var(--bg-green-dark);background-image: url('web bg.jpeg');background-size: cover;background-position: center;background-repeat: no-repeat;background-attachment: fixed;color: var(--text-dark);min-height: 100vh;display: flex;flex-direction: column;overflow-x: hidden;}.header-navbar{background-color: var(--header-brown);background-image: linear-gradient(180deg,var(--header-brown) 0%,var(--header-brown-dark) 100%);height: 84px;padding: 0 64px 0 28px;display: flex;align-items: center;justify-content: space-between;box-shadow: 0 4px 12px rgba(0,0,0,0.4);position: relative;z-index: 100;border-bottom: 2px solid #54371f;}.user-profile{display: flex;align-items: center;gap: 12px;color: #ffffff;}.avatar-circle{width: 44px;height: 44px;border-radius: 50%;background-color: #ffffff;display: flex;align-items: center;justify-content: center;font-weight: 700;font-size: 1.2rem;color: var(--header-brown);box-shadow: 0 2px 6px rgba(0,0,0,0.25);border: 2px solid #ffffff;}.user-info{display: flex;flex-direction: column;}.user-name{font-family: var(--font-heading);font-size: 1.15rem;font-weight: 700;line-height: 1.1;color: #ffffff;}.user-cabang{font-size: 0.8rem;color: #d1c0a8;font-weight: 500;}.header-progress-wrap{display: flex;flex-direction: column;align-items: center;flex: 1;max-width: 420px;margin: 0 20px;}.progress-label{font-family: var(--font-heading);color: #ffffff;font-size: 0.95rem;font-weight: 600;margin-bottom: 4px;letter-spacing: 0.5px;}.progress-track{width: 100%;height: 16px;background-color: #ffffff;border-radius: 10px;position: relative;overflow: visible;box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);border: 2px solid #ffffff;}.progress-fill{height: 100%;width: 20%;background-color: var(--progress-coral);border-radius: 8px;transition: width 0.4s cubic-bezier(0.4,0,0.2,1);}.progress-flag-icon{position: absolute;top: -8px;transform: translateX(-50%);width: 22px;height: 22px;background: #4092d6;border: 2px solid #ffffff;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #ffffff;font-size: 10px;box-shadow: 0 2px 4px rgba(0,0,0,0.3);transition: left 0.4s cubic-bezier(0.4,0,0.2,1);}.header-right-section{display: flex;align-items: center;gap: 16px;}.header-controls-group{display: flex;align-items: center;gap: 10px;}.lb-mobile-indicator{display: none;}.btn-finish-module{padding: 14px 32px;font-size: 1.1rem;font-weight: 800;border-radius: 14px;cursor: pointer;box-shadow: 0 6px 20px rgba(22,163,74,0.5);letter-spacing: 0.5px;transition: all 0.25s ease;}.brand-logo-wrap{display: flex;align-items: center;gap: 16px;}.bgm-toggle-btn{display: flex;align-items: center;gap: 8px;background: linear-gradient(135deg,#f59e0b 0%,#d97706 100%);color: #ffffff;font-family: var(--font-heading);font-weight: 700;font-size: 0.85rem;padding: 8px 16px;border-radius: 20px;border: 2px solid #fef08a;box-shadow: 0 4px 12px rgba(0,0,0,0.3);cursor: pointer;transition: all 0.25s cubic-bezier(0.175,0.885,0.32,1.275);user-select: none;letter-spacing: 0.5px;}.bgm-toggle-btn:hover{transform: translateY(-2px) scale(1.05);box-shadow: 0 6px 16px rgba(245,158,11,0.5);}.bgm-toggle-btn.playing{background: linear-gradient(135deg,#10b981 0%,#047857 100%);border-color: #a7f3d0;box-shadow: 0 0 16px rgba(16,185,129,0.6);}.bgm-toggle-btn.muted{background: linear-gradient(135deg,#4b5563 0%,#1f2937 100%);border-color: #9ca3af;color: #d1d5db;box-shadow: 0 2px 6px rgba(0,0,0,0.2);}.bgm-icon-wave{display: inline-block;font-size: 1.1rem;animation: soundWavePulse 1.2s infinite ease-in-out;}@keyframes soundWavePulse{0%,100%{transform: scale(1);}50%{transform: scale(1.25);}}.app-container{display: grid;grid-template-columns: minmax(0,1fr) 360px;gap: 24px;width: 95%;max-width: 1280px;margin: 16px auto 20px auto;padding: 0 16px 20px;min-height: calc(100vh - 124px);align-items: stretch;box-sizing: border-box;}@media (min-width: 1600px){.app-container{grid-template-columns: minmax(0,1fr) 380px;gap: 28px;max-width: 1360px;}}.quiz-container{background-color: #fdfbf7;border: 2px solid #ebd9b8;border-radius: 26px;padding: 28px 36px;box-shadow: 0 14px 36px rgba(0,0,0,0.16);display: flex;flex-direction: column;justify-content: space-between;align-items: stretch;position: relative;height: 100%;min-height: 0;box-sizing: border-box;flex: 1 1 auto;}.quiz-card-top-bar{display: none;justify-content: space-between;align-items: center;margin-bottom: 22px;padding-bottom: 14px;border-bottom: 1.5px solid #ebd9b8;width: 100%;box-sizing: border-box;}.quiz-header-tag{display: inline-block;background-color: #ebd9b8;color: #593c20;font-weight: 700;font-size: 0.92rem;padding: 6px 18px;border-radius: 12px;border: 1.5px solid #d4c0a5;box-shadow: 0 2px 6px rgba(0,0,0,0.06);}.quiz-num-indicator{display: block;font-family: var(--font-heading);font-size: 1.12rem;font-weight: 800;color: #4a3421;letter-spacing: 0.04em;}.quiz-timer-badge{display: flex;align-items: center;gap: 10px;background: linear-gradient(135deg,#451a03 0%,#78350f 100%);color: #facc15;font-family: var(--font-heading);font-weight: 800;font-size: 1.25rem;padding: 8px 22px;border-radius: 18px;border: 3px solid #f59e0b;box-shadow: 0 4px 16px rgba(245,158,11,0.45),inset 0 2px 4px rgba(255,255,255,0.2);letter-spacing: 1px;transition: all 0.3s ease;}.timer-icon-animated{font-size: 1.35rem;display: inline-block;animation: timerPulseIcon 1.5s infinite ease-in-out;}@keyframes timerPulseIcon{0%,100%{transform: scale(1) rotate(0deg);}50%{transform: scale(1.25) rotate(12deg);}}.quiz-timer-badge.warning{background: linear-gradient(135deg,#dc2626 0%,#991b1b 100%) !important;color: #ffffff !important;border-color: #ef4444 !important;box-shadow: 0 0 24px rgba(239,68,68,0.85),inset 0 2px 4px rgba(255,255,255,0.3) !important;animation: timerAlertPulse 0.8s infinite alternate ease-in-out !important;}@keyframes timerAlertPulse{from{transform: scale(1);}to{transform: scale(1.08);}}.quiz-card{flex: 0 1 auto;height: auto;height: fit-content;display: none;flex-direction: column;align-items: stretch;justify-content: center;width: 100%;max-width: 820px;margin: 0 auto;padding: 0;text-align: left;}.quiz-action-bar{width: 100%;max-width: 820px;margin: 28px auto 0 auto;display: flex;justify-content: center;align-items: center;position: relative;z-index: 15;}.btn-primary-action{min-width: 280px;max-width: 440px;width: 100%;height: 52px;border-radius: 16px;font-family: var(--font-heading);font-size: 1.08rem;font-weight: 800;letter-spacing: 0.03em;display: inline-flex;align-items: center;justify-content: center;gap: 12px;border: none;box-sizing: border-box;cursor: pointer;transition: all 0.22s cubic-bezier(0.16,1,0.3,1);user-select: none;}.btn-primary-action:not(:disabled):not(.btn-disabled),.btn-primary-action.btn-active{background: linear-gradient(135deg,#10b981 0%,#059669 100%) !important;color: #ffffff !important;box-shadow: 0 8px 24px rgba(16,185,129,0.42),inset 0 1px 2px rgba(255,255,255,0.35) !important;cursor: pointer !important;pointer-events: auto !important;transform: translateY(-2px);}.btn-primary-action:not(:disabled):not(.btn-disabled):hover,.btn-primary-action.btn-active:hover{background: linear-gradient(135deg,#059669 0%,#047857 100%) !important;transform: translateY(-4px) scale(1.02) !important;box-shadow: 0 12px 28px rgba(16,185,129,0.52) !important;}.btn-primary-action:not(:disabled):not(.btn-disabled):active,.btn-primary-action.btn-active:active{transform: translateY(1px) scale(0.99) !important;}.btn-primary-action:disabled,.btn-primary-action.btn-disabled{background: #e2e8f0 !important;color: #94a3b8 !important;border: 1.5px solid #cbd5e1 !important;cursor: not-allowed !important;box-shadow: none !important;opacity: 0.75 !important;pointer-events: none !important;transform: none !important;}.quiz-transition-curtain{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg,rgba(248,194,50,0.35) 0%,rgba(232,123,40,0.45) 100%);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);z-index: 100;border-radius: 24px;pointer-events: none;}@keyframes curtainFadeIn{0%{opacity: 0;}100%{opacity: 1;}}@keyframes curtainFadeOut{0%{opacity: 1;}100%{opacity: 0;}}.curtain-in{animation: curtainFadeIn 0.15s ease-out forwards;}.curtain-out{animation: curtainFadeOut 0.25s ease-in forwards;}@keyframes quizContentEnter{0%{opacity: 0;transform: scale(0.88) translateY(24px);filter: blur(6px);}60%{opacity: 1;transform: scale(1.02) translateY(-2px);filter: blur(0px);}100%{opacity: 1;transform: scale(1) translateY(0);filter: blur(0px);}}.quiz-content-anim{animation: quizContentEnter 0.55s cubic-bezier(0.175,0.885,0.32,1.275) forwards !important;}.welcome-logo-container{width: 100%;display: flex;justify-content: center;align-items: center;margin: 8px 0 16px;}.welcome-hero-logo{width: 82%;max-width: 480px;height: auto;object-fit: contain;animation: heroLogoFloat 3.5s ease-in-out infinite alternate;}@keyframes heroLogoFloat{0%{transform: translateY(0) scale(1);}100%{transform: translateY(-8px) scale(1.02);}}.btn-play-styled{font-size: 1.85rem !important;font-family: var(--font-heading) !important;font-weight: 900 !important;padding: 16px 56px !important;border-radius: 50px !important;background: linear-gradient(135deg,#f59e0b 0%,#d97706 100%) !important;color: #ffffff !important;border: none !important;box-shadow: 0 10px 28px rgba(245,158,11,0.5),inset 0 2px 6px rgba(255,255,255,0.4) !important;letter-spacing: 3px !important;display: inline-flex !important;align-items: center !important;justify-content: center !important;gap: 14px !important;transition: all 0.3s cubic-bezier(0.175,0.885,0.32,1.275) !important;}.btn-play-styled:hover{background: linear-gradient(135deg,#fbbf24 0%,#ea580c 100%) !important;transform: translateY(-4px) scale(1.06) !important;box-shadow: 0 16px 36px rgba(245,158,11,0.7),inset 0 2px 6px rgba(255,255,255,0.6) !important;}.btn-play-styled:active{transform: translateY(1px) scale(0.98) !important;}.play-icon-shape{font-size: 1.6rem;display: inline-block;filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));}.quiz-card-category{display: inline-flex;align-items: center;justify-content: center;font-family: var(--font-heading);font-size: 0.85rem;font-weight: 700;color: #8c6d48;background: rgba(140,109,72,0.1);border: 1px solid rgba(140,109,72,0.25);padding: 4px 14px;border-radius: 20px;text-transform: uppercase;letter-spacing: 0.05em;margin: 0 auto 16px auto;text-align: center;}.question-title{font-family: var(--font-heading);font-size: 1.55rem;font-weight: 800;color: #241407;text-align: center;margin: 0 auto 24px;line-height: 1.36;max-width: 760px;letter-spacing: -0.01em;}.options-list{display: flex;flex-direction: column;gap: 14px;margin: 0 auto;width: 100%;max-width: 760px;}.option-pill{background-color: var(--pill-white);border: 2px solid var(--pill-border);border-radius: 16px;padding: 16px 24px;display: flex;align-items: center;gap: 18px;cursor: pointer;transition: all 0.22s cubic-bezier(0.16,1,0.3,1);box-shadow: 0 4px 10px rgba(0,0,0,0.06);text-align: left;}.option-pill:hover{background-color: var(--pill-hover);border-color: #f59e0b;transform: translateY(-2px);box-shadow: 0 8px 20px rgba(245,158,11,0.15);}.option-pill.selected{background-color: #ecfdf5 !important;border-color: #10b981 !important;box-shadow: 0 6px 18px rgba(16,185,129,0.28) !important;transform: translateY(-2px);}.option-pill.selected .option-badge{background-color: #10b981 !important;color: #ffffff !important;}.option-pill.selected .option-check-icon{display: flex !important;color: #10b981 !important;}.option-pill.feedback-pulse{animation: feedbackGlow 0.8s cubic-bezier(0.175,0.885,0.32,1.275);background-color: #d4edd2 !important;border-color: #389e0d !important;box-shadow: 0 0 20px rgba(56,158,13,0.5) !important;transform: scale(1.02);}@keyframes feedbackGlow{0%{transform: scale(1);}50%{transform: scale(1.03);}100%{transform: scale(1.02);}}.option-badge{width: 46px;height: 46px;background-color: #f2e6d5;border-radius: 14px;display: flex;align-items: center;justify-content: center;font-family: var(--font-heading);font-weight: 700;font-size: 1.3rem;color: #4a3421;flex-shrink: 0;}.option-pill.selected .option-badge{background-color: var(--bg-green-accent);color: #ffffff;}.option-text{font-size: 1.05rem;font-weight: 500;color: #382819;flex: 1;line-height: 1.4;}.drag-drop-wrapper{display: grid;grid-template-columns: 1fr 1fr;gap: 28px;margin: auto;width: 100%;max-width: 960px;}.drag-pool,.drop-targets{background: rgba(255,255,255,0.7);border: 2px dashed #cca97e;border-radius: 18px;padding: 22px;display: flex;flex-direction: column;gap: 16px;min-height: 280px;justify-content: center;}.drag-item{background-color: #ffffff;border: 2px solid var(--accent-orange);border-radius: 14px;padding: 16px 20px;font-weight: 700;font-size: 1.05rem;color: var(--text-dark);cursor: grab;user-select: none;box-shadow: 0 4px 10px rgba(0,0,0,0.12);transition: transform 0.15s ease,box-shadow 0.15s ease;text-align: center;}.drag-item:active{cursor: grabbing;transform: scale(1.03);}.drop-target{background: #ffffff;border: 2px solid #d4c0a5;border-radius: 14px;padding: 16px;min-height: 85px;display: flex;flex-direction: column;gap: 8px;transition: background-color 0.2s;justify-content: center;}.drop-target-label{font-size: 0.85rem;font-weight: 700;color: #735334;text-transform: uppercase;}.drop-target.drag-over{background-color: #eaf5e6;border-color: var(--bg-green-accent);}.puzzle-wrapper{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 24px;margin: auto;width: 100%;max-width: 750px;}.puzzle-board{width: 480px;height: 480px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);gap: 4px;background-color: #4a3421;border: 5px solid #4a3421;border-radius: 20px;overflow: hidden;box-shadow: 0 12px 32px rgba(0,0,0,0.35);}.puzzle-tile{width: 100%;height: 100%;background-size: 480px 480px;cursor: grab;transition: transform 0.1s ease,filter 0.2s ease,border-color 0.2s ease;border: 1px solid rgba(255,255,255,0.3);user-select: none;}.puzzle-tile:active{cursor: grabbing;}.puzzle-tile:hover{filter: brightness(1.15);}.puzzle-tile.drag-over{outline: 3px dashed var(--accent-yellow);filter: brightness(1.2);box-shadow: 0 0 16px var(--accent-yellow);z-index: 10;}.puzzle-tile.selected{outline: 3px solid var(--accent-yellow);box-shadow: 0 0 16px var(--accent-yellow);z-index: 5;}.puzzle-controls{display: flex;gap: 16px;}.crossword-wrapper-v2{display: flex;flex-direction: column;align-items: center;width: 100%;max-width: 480px;margin: 0 auto;gap: 10px;user-select: none;-webkit-user-select: none;}.cw-board-container{background: linear-gradient(180deg,#ffffff 0%,#faf8f5 100%);border: 2px solid #e5dbcf;border-radius: 18px;padding: 12px;box-shadow: 0 6px 20px rgba(65,42,18,0.07),0 2px 6px rgba(0,0,0,0.03);display: flex;justify-content: center;align-items: center;margin: 0 auto;}.crossword-grid{display: grid;--cw-cols: 7;--cw-rows: 5;--cw-cell-size: 44px;grid-template-columns: repeat(var(--cw-cols,7),var(--cw-cell-size,44px));grid-template-rows: repeat(var(--cw-rows,5),var(--cw-cell-size,44px));gap: 5px;background-color: transparent;}.cw-cell{width: var(--cw-cell-size,44px);height: var(--cw-cell-size,44px);background-color: transparent;position: relative;border-radius: 8px;display: flex;align-items: center;justify-content: center;transition: all 0.15s ease;box-sizing: border-box;}.cw-cell.active{background-color: #ffffff;border: 1.5px solid #dcd1c4;cursor: pointer;box-shadow: 0 2px 4px rgba(0,0,0,0.04);}.cw-cell.active:hover{border-color: #f59e0b;background-color: #fffdfa;transform: translateY(-1px);box-shadow: 0 4px 8px rgba(245,158,11,0.15);}.cw-cell.cw-word-active{border: 2px solid #f59e0b !important;background-color: #fef3c7 !important;box-shadow: 0 2px 6px rgba(245,158,11,0.15) !important;}.cw-cell.cw-cursor{background: linear-gradient(135deg,#f59e0b 0%,#d97706 100%) !important;border: 2px solid #ffffff !important;box-shadow: 0 0 0 2.5px #f59e0b,0 6px 16px rgba(245,158,11,0.45) !important;transform: scale(1.08);z-index: 3;}.cw-cell.cw-cursor .cw-cell-letter{color: #ffffff !important;font-weight: 900 !important;text-shadow: 0 1px 2px rgba(0,0,0,0.25);}.cw-cell.cw-cursor .cw-cell-num{color: rgba(255,255,255,0.95) !important;}.cw-cell.correct{background: linear-gradient(135deg,#10b981 0%,#059669 100%) !important;border-color: #34d399 !important;box-shadow: 0 3px 10px rgba(16,185,129,0.35) !important;}.cw-cell.correct .cw-cell-letter{color: #ffffff !important;font-weight: 800 !important;}.cw-cell.correct .cw-cell-num{color: rgba(255,255,255,0.85) !important;}.cw-cell-num{position: absolute;top: 2px;left: 4px;font-size: 10px;font-weight: 800;color: #b45309;line-height: 1;pointer-events: none;transition: color 0.15s ease;}.cw-cell-letter{font-family: var(--font-heading);font-size: 1.35rem;font-weight: 700;color: #1e293b;text-transform: uppercase;pointer-events: none;line-height: 1;transition: color 0.15s ease;}.cw-cell.spring-pop{animation: springBoxPop 0.65s cubic-bezier(0.175,0.885,0.32,1.35) ease-out forwards;}@keyframes springBoxPop{0%{transform: scale(1);}40%{transform: scale(1.18);}100%{transform: scale(1);}}@keyframes cwShakeError{0%,100%{transform: translateX(0);}25%{transform: translateX(-5px);}75%{transform: translateX(5px);}}.cw-cell.cw-shake{animation: cwShakeError 0.35s ease-in-out;border-color: #ef4444 !important;background-color: #fee2e2 !important;}.cw-clue-bar{width: 100%;background: #ffffff;border: 1.5px solid #e5dbcf;border-radius: 14px;padding: 10px 14px;display: flex;align-items: center;justify-content: space-between;gap: 12px;box-shadow: 0 4px 14px rgba(65,42,18,0.05);box-sizing: border-box;}.cw-clue-info{flex: 1;text-align: left;display: flex;flex-direction: column;gap: 3px;min-width: 0;}.cw-clue-header{display: flex;align-items: center;gap: 6px;}.cw-clue-badge{font-size: 0.74rem;font-weight: 800;color: #b45309;background: #fef3c7;border: 1px solid #fde68a;padding: 2px 8px;border-radius: 6px;text-transform: uppercase;letter-spacing: 0.04em;display: inline-block;}.cw-clue-text{font-size: 0.86rem;font-weight: 600;color: #334155;line-height: 1.35;white-space: normal;}.cw-clue-nav{display: flex;flex-direction: column;gap: 4px;flex-shrink: 0;}.cw-nav-arrow{width: 28px;height: 22px;background: #f8fafc;border: 1px solid #cbd5e1;border-radius: 6px;color: #475569;font-size: 0.75rem;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all 0.15s ease;touch-action: manipulation;box-shadow: 0 1px 2px rgba(0,0,0,0.04);}.cw-nav-arrow:hover{background: #fef3c7;border-color: #f59e0b;color: #b45309;transform: scale(1.08);}.cw-nav-arrow:active{transform: scale(0.95);background: #fde68a;}.cw-action-bar{width: 100%;display: flex;justify-content: center;gap: 10px;margin: 2px 0;}.cw-btn-check{background: linear-gradient(135deg,#10b981 0%,#059669 100%);border: 1px solid #059669;border-radius: 50px;padding: 9px 34px;color: #ffffff;font-family: var(--font-heading);font-size: 0.95rem;font-weight: 800;display: inline-flex;align-items: center;justify-content: center;gap: 8px;cursor: pointer;transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);box-shadow: 0 4px 14px rgba(16,185,129,0.35),0 3px 0 #047857;touch-action: manipulation;letter-spacing: 0.02em;}.cw-btn-check:hover{background: linear-gradient(135deg,#059669 0%,#047857 100%);transform: translateY(-2px);box-shadow: 0 6px 18px rgba(16,185,129,0.45),0 3px 0 #065f46;}.cw-btn-check:active{transform: translateY(2px);box-shadow: 0 1px 4px rgba(16,185,129,0.25),0 1px 0 #065f46;}.cw-check-icon{font-size: 1.15rem;font-weight: 900;line-height: 1;}.cw-check-label{letter-spacing: 0.02em;}.cw-keyboard{width: 100%;max-width: 480px;display: flex;flex-direction: column;gap: 6px;margin-top: 2px;touch-action: manipulation;}.cw-kb-row{display: flex;justify-content: center;gap: 5px;width: 100%;}.cw-key{flex: 1 1 0;min-width: 0;height: 40px;background: #ffffff;border: 1px solid #e2e8f0;border-radius: 8px;color: #1e293b;font-family: var(--font-heading);font-size: 0.95rem;font-weight: 700;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all 0.1s ease;user-select: none;-webkit-user-select: none;box-shadow: 0 2.5px 0 #cbd5e1,0 2px 4px rgba(0,0,0,0.04);touch-action: manipulation;padding: 0;}.cw-key:hover{background: #f8fafc;border-color: #cbd5e1;}.cw-key:active{background: #e2e8f0;color: #0f172a;transform: translateY(2px);box-shadow: 0 0.5px 0 #cbd5e1;}.cw-key-spacer{flex: 1.3 1 0;min-width: 0;height: 40px;visibility: hidden;pointer-events: none;}.cw-key.cw-key-del{flex: 1.3 1 0;background: #f8fafc;border: 1px solid #e2e8f0;border-radius: 8px;color: #dc2626;font-size: 1.15rem;box-shadow: 0 2.5px 0 #cbd5e1,0 2px 4px rgba(0,0,0,0.04);}.cw-key.cw-key-del:hover{background: #fee2e2;border-color: #fca5a5;color: #b91c1c;}.cw-key.cw-key-del:active{background: #fecaca;transform: translateY(2px);box-shadow: 0 0.5px 0 #cbd5e1;}.quiz-nav-footer{display: flex;justify-content: flex-end;align-items: center;width: 100%;}.quiz-nav-footer:has(button:not([style*="display: none"])){margin-top: 20px;padding-top: 16px;border-top: 2px dashed #ebd9b8;}.btn-styled{font-family: var(--font-heading);font-size: 1rem;font-weight: 700;padding: 12px 24px;border-radius: 14px;border: none;cursor: pointer;transition: all 0.2s ease;box-shadow: 0 4px 8px rgba(0,0,0,0.15);display: inline-flex;align-items: center;gap: 8px;}.btn-secondary{background-color: #e3d2b8;color: #4a3421;}.btn-secondary:hover{background-color: #d4c0a3;}.btn-primary{background-color: var(--accent-orange);color: #ffffff;}.btn-primary:hover{background-color: #d66c1b;transform: translateY(-2px);}.btn-success{background-color: var(--bg-green-accent);color: #ffffff;}.btn-success:hover{background-color: #3b6c2c;transform: translateY(-2px);}.sidebar-leaderboard{background-color: var(--sidebar-brown);border: 3px solid #4a331f;border-radius: 26px;padding: 22px 20px;color: #ffffff;box-shadow: 0 14px 36px rgba(0,0,0,0.25);display: flex;flex-direction: column;height: 100%;box-sizing: border-box;transition: all 0.35s cubic-bezier(0.4,0,0.2,1);}.leaderboard-header{display: flex;align-items: center;justify-content: space-between;padding-bottom: 8px;border-bottom: 2px solid rgba(255,255,255,0.12);}.leaderboard-title{font-family: var(--font-heading);font-size: 1.3rem;font-weight: 700;color: #ffffff;margin: 0;letter-spacing: 0.5px;}.btn-toggle-lb{background: linear-gradient(135deg,#f59e0b 0%,#d97706 100%);color: #ffffff;border: 1px solid #fef08a;border-radius: 12px;padding: 6px 14px;font-family: var(--font-heading);font-size: 0.82rem;font-weight: 700;cursor: pointer;display: inline-flex;align-items: center;gap: 6px;box-shadow: 0 3px 8px rgba(0,0,0,0.25);transition: all 0.25s ease;}.btn-toggle-lb:hover{transform: translateY(-2px) scale(1.04);box-shadow: 0 6px 16px rgba(245,158,11,0.4);}.leaderboard-content-grid{display: flex;flex-direction: column;gap: 16px;flex: 1;min-height: 0;}.lb-section{display: flex;flex-direction: column;flex: 1;min-height: 0;}.leaderboard-section-title{font-size: 0.85rem;font-weight: 600;color: #d1b899;margin-bottom: 8px;text-transform: uppercase;letter-spacing: 1px;display: flex;align-items: center;justify-content: space-between;}.lb-count-badge{font-size: 0.72rem;font-weight: 600;background: rgba(255,255,255,0.12);color: #fce7f3;padding: 2px 8px;border-radius: 8px;text-transform: none;letter-spacing: 0;}.leaderboard-list{display: flex;flex-direction: column;gap: 8px;flex: 1;max-height: calc(50vh - 120px);min-height: 140px;overflow-y: auto;overflow-x: hidden;padding-right: 4px;}.leaderboard-list::-webkit-scrollbar{width: 6px;height: 0px;}.leaderboard-list::-webkit-scrollbar-track{background: rgba(0,0,0,0.25);border-radius: 6px;}.leaderboard-list::-webkit-scrollbar-thumb{background: #f8c232;border-radius: 6px;}.app-container.lb-expanded{grid-template-columns: 1fr;}.app-container.lb-expanded .quiz-container{display: none !important;}.app-container.lb-expanded .sidebar-leaderboard{grid-column: 1 / -1;min-height: 560px;padding: 24px 32px;overflow: hidden;}.app-container.lb-expanded .leaderboard-content-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 32px;overflow: hidden;}.app-container.lb-expanded .leaderboard-list{max-height: 420px;padding-bottom: 8px;overflow-x: hidden;}.leaderboard-item{background-color: #ffffff;border-radius: 12px;height: 42px;display: flex;align-items: center;padding: 0 12px;justify-content: space-between;font-size: 0.88rem;font-weight: 600;color: var(--text-dark);box-shadow: 0 2px 5px rgba(0,0,0,0.15);transition: all 0.2s ease;position: relative;box-sizing: border-box;}.leaderboard-item.rank-1{background: linear-gradient(135deg,#fffbeb 0%,#fde047 40%,#eab308 100%);border: 2px solid #ca8a04;color: #451a03;font-weight: 800;box-shadow: 0 4px 14px rgba(234,179,8,0.5);}.leaderboard-item.rank-1 .lb-score{color: #78350f;font-weight: 900;}.leaderboard-item.rank-2{background: linear-gradient(135deg,#ffffff 0%,#e2e8f0 50%,#cbd5e1 100%);border: 2px solid #94a3b8;color: #0f172a;font-weight: 700;box-shadow: 0 4px 12px rgba(148,163,184,0.4);}.leaderboard-item.rank-2 .lb-score{color: #334155;font-weight: 800;}.leaderboard-item.rank-3{background: linear-gradient(135deg,#fff7ed 0%,#fed7aa 50%,#fb923c 100%);border: 2px solid #ea580c;color: #431407;font-weight: 700;box-shadow: 0 4px 12px rgba(249,115,22,0.4);}.leaderboard-item.rank-3 .lb-score{color: #7c2d12;font-weight: 800;}.leaderboard-item.current-user{border: 2px solid #16a34a;box-shadow: 0 0 0 2px rgba(22,163,74,0.4);}.you-tag{font-size: 0.75rem;font-weight: 800;color: #15803d;background: rgba(255,255,255,0.6);padding: 2px 6px;border-radius: 6px;margin-left: 4px;}.lb-rank{width: 26px;font-family: var(--font-heading);font-size: 1.1rem;display: flex;align-items: center;justify-content: center;}.lb-name{flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 0 8px;}.lb-score{color: var(--bg-green-dark);font-weight: 700;font-size: 0.92rem;}.modal-backdrop{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.75);backdrop-filter: blur(4px);display: flex;justify-content: center;align-items: center;z-index: 99990;opacity: 0;pointer-events: none;transition: opacity 0.3s ease;}.modal-backdrop.show{opacity: 1;pointer-events: auto;}.modal-card{background-color: var(--card-cream);border: 4px solid var(--accent-yellow);border-radius: 28px;padding: 36px;max-width: 540px;width: 90%;text-align: center;box-shadow: 0 12px 32px rgba(0,0,0,0.5);transform: scale(0.9);transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);}.modal-backdrop.show .modal-card{transform: scale(1);}.modal-icon{font-size: 3.5rem;margin-bottom: 12px;}.modal-title{font-family: var(--font-heading);font-size: 1.8rem;color: var(--header-brown);margin-bottom: 8px;}.modal-desc{font-size: 0.95rem;color: #593c20;margin-bottom: 20px;line-height: 1.4;}.score-badge-circle{width: 130px;height: 130px;border-radius: 50%;background: linear-gradient(135deg,var(--accent-yellow) 0%,var(--accent-orange) 100%);color: #ffffff;display: flex;flex-direction: column;align-items: center;justify-content: center;margin: 0 auto 24px;box-shadow: 0 8px 24px rgba(232,123,40,0.45);border: 5px solid #ffffff;}.score-badge-val{font-family: var(--font-heading);font-size: 3rem;font-weight: 700;line-height: 1;}.score-badge-label{font-size: 0.8rem;font-weight: 600;text-transform: uppercase;}@media (max-width: 900px){.app-container{grid-template-columns: 1fr;}.header-navbar{height: auto;padding: 12px 16px;flex-wrap: wrap;gap: 12px;}.header-progress-wrap{order: 3;width: 100%;max-width: 100%;margin: 0;}.drag-drop-wrapper{grid-template-columns: 1fr;}}.app-toast{position: fixed;top: 24px;left: 50%;transform: translateX(-50%) translateY(-30px);background-color: #3b2413;color: #ffffff;padding: 14px 24px;border-radius: 16px;box-shadow: 0 10px 30px rgba(0,0,0,0.4);border: 2px solid var(--accent-yellow);display: flex;align-items: center;gap: 12px;font-family: var(--font-heading);font-size: 0.95rem;font-weight: 600;z-index: 9999;opacity: 0;pointer-events: none;transition: all 0.35s cubic-bezier(0.175,0.885,0.32,1.275);}.app-toast.show{opacity: 1;transform: translateX(-50%) translateY(0);pointer-events: auto;}.app-toast.toast-warning{border-color: var(--accent-orange);background-color: #4a2d16;}.app-toast.toast-success{border-color: #52c41a;background-color: #1e3a19;}.app-toast.toast-info{border-color: #1890ff;background-color: #1a2e3b;}#quiz-card-start,#quiz-card-already-completed,#quiz-card-profile{flex-direction: column;align-items: center;justify-content: center;text-align: center;width: 100%;max-width: 620px;margin: auto;flex: 1 1 auto;height: 100%;}.profile-card-content{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 18px;padding: 24px 20px;width: 100%;max-width: 480px;margin: auto;height: 100%;}.profile-hero-logo{height: 115px;max-width: 90%;object-fit: contain;margin-bottom: 4px;}.profile-greeting-title{font-size: 1.4rem;font-weight: 700;text-align: center;margin: 0;}.profile-form-wrap{width: 100%;max-width: 380px;display: flex;flex-direction: column;gap: 14px;}.profile-select-label{font-size: 0.9rem;font-weight: 600;opacity: 0.85;text-align: center;display: block;margin-bottom: 8px;}.custom-select-wrap{width: 100%;position: relative;}.searchable-select{position: relative;width: 100%;}.searchable-select input{padding: 12px 38px 12px 16px;border-radius: 12px;border: 2px solid rgba(248,194,50,0.4);background: #2a1a0a;color: #f5e6c8;font-size: 0.95rem;font-family: var(--font-body);outline: none;width: 100%;box-sizing: border-box;transition: all 0.25s ease;}.searchable-select input:focus{border-color: #f8c232;box-shadow: 0 0 12px rgba(248,194,50,0.35);}.searchable-select input::placeholder{color: rgba(245,230,200,0.5);}.select-arrow{position: absolute;right: 14px;top: 50%;transform: translateY(-50%);color: #f8c232;font-size: 0.75rem;pointer-events: none;}.select-options-dropdown{position: absolute;top: calc(100% + 6px);left: 0;right: 0;max-height: 220px;overflow-y: auto;background: #231508;border: 2px solid #f8c232;border-radius: 12px;box-shadow: 0 12px 32px rgba(0,0,0,0.65);z-index: 1000;padding: 6px;display: flex;flex-direction: column;gap: 4px;}.select-options-dropdown::-webkit-scrollbar{width: 6px;}.select-options-dropdown::-webkit-scrollbar-thumb{background: #f8c232;border-radius: 6px;}.select-option-item{padding: 10px 14px;border-radius: 8px;font-size: 0.9rem;color: #f5e6c8;cursor: pointer;text-align: left;transition: background 0.15s ease;}.select-option-item:hover{background: rgba(248,194,50,0.25);color: #ffffff;font-weight: 600;}.select-option-empty{padding: 14px;font-size: 0.85rem;color: rgba(245,230,200,0.6);font-style: italic;text-align: center;}.welcome-badge{display: inline-block;background: linear-gradient(135deg,var(--accent-orange) 0%,#d65c19 100%);color: #ffffff;font-family: var(--font-heading);font-weight: 700;font-size: 0.9rem;padding: 6px 18px;border-radius: 14px;margin-bottom: 14px;letter-spacing: 0.5px;box-shadow: 0 3px 8px rgba(232,123,40,0.3);}.welcome-title{font-family: var(--font-heading);font-size: 1.9rem;font-weight: 700;color: var(--header-brown);margin-bottom: 12px;line-height: 1.2;text-align: center;}.welcome-desc{font-size: 1.05rem;color: #54391e;margin-bottom: 24px;line-height: 1.5;text-align: center;max-width: 650px;}.challenges-grid{display: flex;flex-wrap: wrap;justify-content: center;gap: 12px;margin: 0 auto 24px;max-width: 650px;width: 100%;}.challenge-item{background: #ffffff;border: 2px solid #ebd4b5;border-radius: 16px;padding: 12px 18px;display: flex;align-items: center;justify-content: center;gap: 10px;box-shadow: 0 3px 8px rgba(0,0,0,0.05);min-width: 140px;}.ch-icon{font-size: 1.6rem;}.ch-info{display: flex;flex-direction: column;}.ch-info strong{font-family: var(--font-heading);font-size: 0.9rem;color: #3b2413;}.ch-info small{font-size: 0.75rem;color: var(--accent-orange);font-weight: 600;}.btn-start-game{font-size: 1.2rem;padding: 16px 36px;border-radius: 18px;box-shadow: 0 6px 20px rgba(232,123,40,0.4);animation: btnPulse 2s infinite alternate;}@keyframes btnPulse{0%{transform: scale(1);box-shadow: 0 6px 20px rgba(232,123,40,0.4);}100%{transform: scale(1.04);box-shadow: 0 10px 28px rgba(232,123,40,0.6);}}.preloader-overlay{position: fixed;top: 0;left: 0;right: 0;bottom: 0;width: 100vw;height: 100vh;background-color: #1e3a19;background-image: radial-gradient(circle at center,#2e5927 0%,#1e3a19 80%);display: flex;align-items: center;justify-content: center;z-index: 99999;transition: opacity 0.5s ease,visibility 0.5s ease;}.preloader-overlay.hidden{opacity: 0;visibility: hidden;pointer-events: none;}.preloader-card{background: #f9f3e3;border: 4px solid #f8c232;border-radius: 28px;padding: 36px 32px;max-width: 440px;width: 90%;text-align: center;box-shadow: 0 16px 40px rgba(0,0,0,0.6);display: flex;flex-direction: column;align-items: center;gap: 14px;}.preloader-logo{height: 95px;max-width: 320px;object-fit: contain;animation: preloaderLogoPulse 2s infinite ease-in-out;}@keyframes preloaderLogoPulse{0%,100%{transform: scale(1);}50%{transform: scale(1.05);}}.preloader-title{font-family: var(--font-heading);font-size: 1.25rem;font-weight: 700;color: #3b2413;margin: 0;}.preloader-status{font-size: 0.88rem;color: #593c20;margin: 0;font-weight: 500;}.preloader-progress-box{width: 100%;display: flex;align-items: center;gap: 10px;margin-top: 4px;}.preloader-progress-track{flex: 1;height: 14px;background: #e0d0b8;border-radius: 10px;overflow: hidden;border: 2px solid #3b2413;}.preloader-progress-fill{height: 100%;width: 0%;background: linear-gradient(90deg,#f59e0b 0%,#10b981 100%);border-radius: 8px;transition: width 0.25s ease-out;}.preloader-pct{font-family: var(--font-heading);font-weight: 700;font-size: 0.95rem;color: #3b2413;min-width: 40px;text-align: right;}.preloader-spinner{font-size: 1.5rem;animation: spinRotate 1.5s infinite linear;}@keyframes spinRotate{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}.lms-save-notice-banner{display: flex;align-items: center;gap: 14px;background: linear-gradient(135deg,rgba(245,158,11,0.16) 0%,rgba(232,123,40,0.16) 100%);border: 2px dashed #f59e0b;border-radius: 16px;padding: 14px 18px;margin: 16px auto;width: 100%;max-width: 520px;box-shadow: 0 4px 14px rgba(245,158,11,0.15);text-align: left;}.notice-icon-pulse{font-size: 1.6rem;animation: iconPulseAnim 1.8s infinite ease-in-out;flex-shrink: 0;}@keyframes iconPulseAnim{0%,100%{transform: scale(1);}50%{transform: scale(1.25);}}.notice-text-content{font-size: 0.92rem;line-height: 1.45;color: #3b2413;font-family: var(--font-body);}.notice-text-content strong{color: #b45309;font-weight: 700;}.notice-text-content span{background: #f8c232;color: #2c1a0c;padding: 2px 8px;border-radius: 6px;font-weight: 700;letter-spacing: 0.5px;}.countdown-overlay{position: fixed;top: 0;left: 0;right: 0;bottom: 0;width: 100vw;height: 100vh;background: rgba(25,45,20,0.88);backdrop-filter: blur(10px);display: flex;align-items: center;justify-content: center;z-index: 99995;transition: opacity 0.35s ease;}.countdown-card{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 16px;background: rgba(42,26,10,0.92);border: 4px solid #f8c232;border-radius: 32px;padding: 36px 56px;box-shadow: 0 16px 48px rgba(0,0,0,0.7);}.countdown-sub{font-family: var(--font-heading);font-size: 1.25rem;font-weight: 700;color: #f5e6c8;letter-spacing: 2px;text-transform: uppercase;opacity: 0.9;}.countdown-number{font-family: var(--font-heading);font-size: 6.5rem;font-weight: 900;color: #f8c232;text-shadow: 0 0 32px rgba(248,194,50,0.8),0 6px 16px rgba(0,0,0,0.5);line-height: 1;display: inline-block;min-width: 160px;text-align: center;}.countdown-number.countdown-pop{animation: countdownPopAnim 0.75s cubic-bezier(0.175,0.885,0.32,1.275) forwards;}@keyframes countdownPopAnim{0%{transform: scale(0.1) rotate(-12deg);opacity: 0;}55%{transform: scale(1.35) rotate(4deg);opacity: 1;}100%{transform: scale(1) rotate(0deg);opacity: 1;}}button,.option-pill,.drag-item,.puzzle-tile,.select-option-item,.bgm-toggle-btn{touch-action: manipulation;-webkit-tap-highlight-color: transparent;}@media (max-width: 1024px){.app-container{grid-template-columns: 1fr;gap: 18px;width: 98%;margin: 12px auto;padding: 0 10px 16px;}.app-container.lb-expanded{grid-template-columns: 1fr;}.sidebar-leaderboard{width: 100%;max-width: 100%;}.leaderboard-content-grid{grid-template-columns: 1fr 1fr;gap: 14px;}.quiz-container{padding: 22px 24px 26px;min-height: auto;}}.quiz-top-btn{display: none;}.quiz-num-indicator{display: none;}.quiz-mobile-progress-track{display: none;}.quiz-card-category{display: none;}#quiz-top-bar[style*="display: none"] ~ #quiz-mobile-progress-track,#quiz-top-bar[style*="display:none"] ~ #quiz-mobile-progress-track{display: none !important;}@media (max-width: 768px){.header-navbar{height: auto;padding: 10px 14px;flex-wrap: wrap;gap: 10px 8px;justify-content: space-between;}.user-profile{gap: 8px;}.avatar-circle{width: 36px;height: 36px;font-size: 1rem;}.user-name{font-size: 0.95rem;}.user-cabang{font-size: 0.75rem;}.user-score-badge{font-size: 0.72rem;padding: 2px 8px;}.brand-logo-wrap{gap: 10px;}.brand-logo-wrap img{height: 46px !important;max-width: 180px !important;}.bgm-toggle-btn{padding: 6px 10px;font-size: 0.75rem;}.header-progress-wrap{order: 3;width: 100%;max-width: 100%;margin: 4px 0 0 0;}.progress-track{height: 12px;}.progress-flag-icon{top: -6px;width: 18px;height: 18px;font-size: 8px;}.app-container{width: 100%;padding: 0 8px 16px;margin: 8px auto;}.quiz-container{padding: 16px 14px 20px;border-radius: 18px;box-shadow: 0 4px 16px rgba(0,0,0,0.2);}.quiz-card{padding: 18px 16px !important;}.profile-card-content{padding: 10px 4px !important;gap: 12px !important;width: 100% !important;max-width: 100% !important;}.profile-hero-logo{height: 70px !important;max-width: 80% !important;}.profile-greeting-title{font-size: 1.1rem !important;}.profile-form-wrap{width: 100% !important;max-width: 100% !important;gap: 10px !important;}.profile-select-label{font-size: 0.82rem !important;}.question-title{font-size: 1.45rem;font-weight: 700;line-height: 1.35;color: #241407;margin-bottom: 18px;}.option-text{font-size: 0.96rem;font-weight: 500;line-height: 1.36;color: #382819;}.options-list{gap: 10px;}.option-pill{padding: 12px 14px;min-height: 48px;border-radius: 12px;font-size: 0.92rem;}.option-badge{width: 28px;height: 28px;font-size: 0.85rem;}.custom-select-wrap label{font-size: 0.85rem !important;}.searchable-select{height: 48px;}.select-options-dropdown{max-height: 220px;}.select-option-item{padding: 12px 14px;font-size: 0.9rem;}.drag-items-container{gap: 8px;}.drag-item{padding: 10px 14px;font-size: 0.88rem;min-height: 44px;}.drop-zones-grid{grid-template-columns: 1fr;gap: 12px;}.drop-zone{min-height: 100px;padding: 14px 10px;}.puzzle-board-container{width: 100%;max-width: 300px;height: 300px;margin: 0 auto;}.puzzle-preview-box img{max-width: 120px;}.crossword-container{overflow-x: auto;-webkit-overflow-scrolling: touch;padding-bottom: 8px;width: 100%;}.crossword-grid{gap: 3px;margin: 0 auto;}.cw-cell{width: clamp(28px,7vw,36px);height: clamp(28px,7vw,36px);font-size: 0.95rem;}.cw-clues-box{padding: 10px 12px;}.cw-clues-box h4{font-size: 0.85rem;}.cw-clues-list li{font-size: 0.8rem;}.quiz-nav-footer{margin-top: 16px;padding-top: 12px;}.btn-styled{padding: 10px 20px;font-size: 0.9rem;min-height: 44px;}.sidebar-leaderboard{border-radius: 18px;padding: 14px 12px;}.leaderboard-content-grid{grid-template-columns: 1fr;gap: 12px;}.leaderboard-list{max-height: 240px;}.leaderboard-item{padding: 8px 10px;font-size: 0.85rem;}.modal-card{width: 92%;max-width: 380px;padding: 24px 18px;border-radius: 24px;}.modal-title{font-size: 1.25rem;}.modal-desc{font-size: 0.88rem;}.score-badge-circle{width: 100px;height: 100px;}.score-badge-val{font-size: 2.2rem;}.preloader-card{width: 90%;padding: 24px 18px;}.countdown-card{padding: 28px 36px;}.countdown-number{font-size: 4.5rem;min-width: 120px;}}@media (max-width: 400px){.user-name{font-size: 0.85rem;}.question-title{font-size: 1.25rem;font-weight: 700;line-height: 1.34;color: #241407;}.option-text{font-size: 0.88rem;font-weight: 500;line-height: 1.32;}.option-pill{padding: 10px 12px;font-size: 0.85rem;}.puzzle-board-container{max-width: 270px;height: 270px;}.cw-cell{width: 26px;height: 26px;font-size: 0.88rem;}}.download-log-btn{display: inline-flex;align-items: center;gap: 6px;background: linear-gradient(135deg,#107c41 0%,#0d6534 100%);color: #ffffff;font-family: var(--font-heading,'Outfit','Inter',sans-serif);font-weight: 700;font-size: 0.82rem;padding: 7px 14px;border-radius: 20px;border: 2px solid #86efac;box-shadow: 0 4px 12px rgba(16,124,65,0.35);cursor: pointer;transition: all 0.25s cubic-bezier(0.175,0.885,0.32,1.275);user-select: none;letter-spacing: 0.5px;text-decoration: none;}.download-log-btn:hover{background: linear-gradient(135deg,#16a34a 0%,#107c41 100%);transform: translateY(-2px) scale(1.03);box-shadow: 0 6px 16px rgba(16,124,65,0.55);border-color: #bbf7d0;}.download-log-btn:active{transform: translateY(1px);box-shadow: 0 2px 6px rgba(16,124,65,0.3);}.download-log-btn .log-icon{font-size: 1rem;line-height: 1;}.download-log-btn .log-text{font-size: 0.82rem;white-space: nowrap;}@media (max-width: 768px){.download-log-btn{padding: 6px 10px;font-size: 0.75rem;}.download-log-btn .log-text{display: none;}}.lms-warning-card{border: 4px solid #e67e22 !important;background: #fffdf9 !important;box-shadow: 0 16px 40px rgba(183,56,18,0.25) !important;max-width: 520px !important;padding: 32px 28px !important;position: relative;border-radius: 24px !important;}.lms-modal-tag{display: inline-block;background: rgba(230,126,34,0.12);color: #b73812;border: 1px solid rgba(230,126,34,0.35);padding: 4px 14px;border-radius: 20px;font-size: 0.78rem;font-weight: 800;letter-spacing: 0.5px;margin-bottom: 12px;}.lms-restriction-box{background: rgba(243,156,18,0.08);border: 1px solid rgba(230,126,34,0.25);border-left: 5px solid #d35400;border-radius: 10px;padding: 12px 16px;text-align: left;margin-bottom: 14px;}.lms-restriction-title{font-size: 0.88rem;font-weight: 700;color: #962d00;margin-bottom: 6px;}.lms-restriction-list{margin: 0;padding-left: 20px;font-size: 0.84rem;color: #4a3b32;line-height: 1.5;}.lms-restriction-list li{margin-bottom: 4px;}.lms-modal-footer-note{font-size: 0.8rem;color: #7f6a5b;line-height: 1.45;margin: 0 0 10px 0;font-style: italic;}.btn-warning-lms{background: linear-gradient(135deg,#e67e22,#d35400) !important;color: #ffffff !important;font-weight: 700 !important;border: none !important;border-radius: 12px !important;padding: 12px 20px !important;font-size: 0.95rem !important;cursor: pointer;box-shadow: 0 4px 12px rgba(211,84,0,0.35) !important;transition: all 0.2s ease;}.btn-warning-lms:hover{background: linear-gradient(135deg,#d35400,#ba4a00) !important;transform: translateY(-2px);box-shadow: 0 6px 16px rgba(211,84,0,0.45) !important;}.lms-locked-button{opacity: 0.65 !important;cursor: not-allowed !important;filter: grayscale(40%) !important;position: relative;}.lms-local-badge{display: inline-flex;align-items: center;gap: 6px;background: rgba(231,76,60,0.15);border: 1px solid rgba(231,76,60,0.35);color: #c0392b;padding: 3px 10px;border-radius: 12px;font-size: 0.75rem;font-weight: 700;}.user-device-badge{display: inline-flex;align-items: center;gap: 4px;padding: 2px 8px;border-radius: 8px;font-size: 0.72rem;font-weight: 700;letter-spacing: 0.2px;background: rgba(41,128,185,0.15);color: #1a5276;border: 1px solid rgba(41,128,185,0.4);box-shadow: 0 1px 4px rgba(0,0,0,0.04);transition: all 0.25s cubic-bezier(0.4,0,0.2,1);cursor: default;user-select: none;}.user-device-badge:hover{transform: translateY(-1px);box-shadow: 0 2px 6px rgba(0,0,0,0.08);}.user-device-badge.device-phone{background: rgba(39,174,96,0.15);color: #1e8449;border-color: rgba(39,174,96,0.45);}.user-device-badge.device-tablet{background: rgba(142,68,173,0.15);color: #7d3c98;border-color: rgba(142,68,173,0.45);}.user-device-badge.device-desktop{background: rgba(41,128,185,0.15);color: #1a5276;border-color: rgba(41,128,185,0.4);}.mobile-tap-hint{display: none;align-items: center;justify-content: center;gap: 6px;background: rgba(230,126,34,0.1);color: #9c330f;border: 1px solid rgba(230,126,34,0.35);border-radius: 20px;padding: 5px 14px;margin: 2px auto 10px;max-width: 95%;font-size: 0.78rem;font-weight: 500;line-height: 1.35;text-align: center;animation: fadeInHint 0.4s ease-out;}@keyframes fadeInHint{from{opacity: 0;transform: translateY(-4px);}to{opacity: 1;transform: translateY(0);}}.device-phone .mobile-tap-hint,.has-touch .mobile-tap-hint,html.is-mobile .mobile-tap-hint{display: flex !important;}.drag-item.selected-tap{outline: 3px solid #e67e22 !important;box-shadow: 0 0 16px rgba(230,126,34,0.65),0 4px 10px rgba(0,0,0,0.15) !important;background: #fff5eb !important;color: #b73812 !important;transform: scale(1.05);animation: pulseSelectedTap 1.2s infinite alternate;}@keyframes pulseSelectedTap{0%{transform: scale(1.03);box-shadow: 0 0 12px rgba(230,126,34,0.5);}100%{transform: scale(1.07);box-shadow: 0 0 20px rgba(230,126,34,0.85);}}.device-phone .drag-drop-wrapper,html.is-mobile .drag-drop-wrapper{grid-template-columns: 1fr !important;gap: 16px !important;}.device-phone .drop-targets,html.is-mobile .drop-targets{gap: 12px !important;}@media (max-width: 768px){.drag-drop-wrapper{grid-template-columns: 1fr !important;gap: 16px !important;}}@media (max-width: 768px){.header-navbar{height: auto !important;padding: 10px 14px 12px !important;display: grid !important;grid-template-columns: 1fr auto !important;grid-template-areas: "profile logo" "controls controls" "progress progress" !important;gap: 8px 10px !important;align-items: center !important;border-radius: 0 0 20px 20px !important;box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important;}.user-profile{grid-area: profile !important;gap: 8px !important;min-width: 0 !important;}.avatar-circle{width: 36px !important;height: 36px !important;font-size: 1rem !important;flex-shrink: 0 !important;}.user-name{font-size: 0.92rem !important;white-space: nowrap !important;overflow: hidden !important;text-overflow: ellipsis !important;max-width: 170px !important;}.header-right-section{display: contents !important;}.brand-logo-wrap{grid-area: logo !important;display: flex !important;justify-content: flex-end !important;align-items: center !important;margin: 0 !important;}.brand-logo-wrap img{height: 38px !important;max-width: 120px !important;object-fit: contain !important;}.header-controls-group{grid-area: controls !important;display: flex !important;align-items: center !important;gap: 8px !important;width: 100% !important;flex-wrap: wrap !important;padding-top: 2px !important;}.bgm-toggle-btn{padding: 6px 12px !important;font-size: 0.75rem !important;}.download-log-btn{padding: 6px 12px !important;font-size: 0.75rem !important;}.download-log-btn .log-text{display: inline !important;}.header-progress-wrap{display: none !important;grid-area: progress !important;width: 100% !important;max-width: 100% !important;margin: 4px 0 0 0 !important;order: unset !important;}.progress-label{font-size: 0.8rem !important;margin-bottom: 2px !important;}.progress-track{height: 12px !important;}.progress-flag-icon{top: -6px !important;width: 18px !important;height: 18px !important;font-size: 8px !important;}.app-container{width: 100% !important;max-width: 480px !important;padding: 16px 16px 36px 16px !important;margin: 0 auto !important;display: flex !important;flex-direction: column !important;justify-content: flex-start !important;align-items: stretch !important;gap: 0 !important;flex: 0 1 auto !important;height: auto !important;min-height: auto !important;box-sizing: border-box !important;}.quiz-container{background: transparent !important;border: none !important;box-shadow: none !important;padding: 0 !important;margin: 0 auto !important;width: 100% !important;max-width: 100% !important;display: flex !important;flex-direction: column !important;justify-content: flex-start !important;align-items: stretch !important;height: auto !important;height: fit-content !important;min-height: auto !important;flex: 0 1 auto !important;position: relative !important;}.quiz-card-top-bar{display: none;justify-content: space-between !important;align-items: center !important;width: 100% !important;height: 38px !important;padding: 0 2px !important;margin: 0 0 8px 0 !important;box-sizing: border-box !important;}.quiz-top-btn{display: none !important;}.quiz-header-tag{display: none !important;}.quiz-num-indicator{display: block !important;font-family: var(--font-heading) !important;font-size: 1.1rem !important;font-weight: 800 !important;color: #ffffff !important;letter-spacing: 0.04em !important;text-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;}.quiz-timer-badge{display: flex !important;align-items: center !important;gap: 6px !important;padding: 6px 14px !important;background: rgba(30,20,10,0.45) !important;backdrop-filter: blur(8px) !important;-webkit-backdrop-filter: blur(8px) !important;border: 1.5px solid rgba(245,158,11,0.6) !important;border-radius: 50px !important;color: #fde68a !important;font-family: var(--font-heading) !important;font-weight: 800 !important;font-size: 0.92rem !important;box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;letter-spacing: 0.5px !important;flex-shrink: 0 !important;}.timer-icon-animated{font-size: 1rem !important;}.quiz-mobile-progress-track{display: none;width: 100% !important;height: 6px !important;background: rgba(0,0,0,0.25) !important;border-radius: 999px !important;margin: 0 0 14px 0 !important;overflow: hidden !important;border: none !important;box-shadow: inset 0 1px 2px rgba(0,0,0,0.3) !important;}#quiz-top-bar[style*="flex"] ~ .quiz-mobile-progress-track{display: block !important;}.quiz-mobile-progress-fill{height: 100% !important;background: #10b981 !important;border-radius: 999px !important;transition: width 0.35s ease !important;box-shadow: 0 0 8px rgba(16,185,129,0.5) !important;}.quiz-card{background: #ffffff !important;border-radius: 20px !important;padding: 18px 16px !important;box-shadow: 0 8px 24px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.04) !important;position: relative !important;display: none;flex-direction: column !important;align-items: stretch !important;justify-content: flex-start !important;width: 100% !important;max-width: 100% !important;height: auto !important;height: fit-content !important;min-height: auto !important;max-height: none !important;flex: 0 1 auto !important;margin: 0 auto !important;box-sizing: border-box !important;border: none !important;}.quiz-card::before,.quiz-card::after{content: none !important;display: none !important;}.quiz-card.hidden{display: none !important;}.quiz-nav-footer:empty{display: none !important;margin: 0 !important;padding: 0 !important;height: 0 !important;}.quiz-card-category{display: block !important;font-family: var(--font-heading) !important;font-size: 0.8rem !important;font-weight: 700 !important;color: #94a3b8 !important;text-transform: uppercase !important;letter-spacing: 0.04em !important;margin: 0 0 8px 0 !important;padding: 0 !important;line-height: 1 !important;text-align: left !important;}.question-title{font-size: 1.15rem !important;font-weight: 800 !important;line-height: 1.36 !important;color: #1e293b !important;margin: 0 0 16px 0 !important;padding: 0 !important;text-align: left !important;letter-spacing: -0.01em !important;word-break: break-word !important;}.options-list{display: flex !important;flex-direction: column !important;gap: 12px !important;width: 100% !important;margin: 0 !important;}.option-pill{background: #ffffff !important;border: 1.5px solid #e2e8f0 !important;border-radius: 14px !important;box-shadow: 0 2px 5px rgba(0,0,0,0.04) !important;padding: 10px 14px !important;min-height: 48px !important;display: flex !important;align-items: center !important;justify-content: flex-start !important;gap: 12px !important;cursor: pointer !important;transition: all 0.2s cubic-bezier(0.16,1,0.3,1) !important;box-sizing: border-box !important;position: relative !important;}.option-pill:hover{border-color: #cbd5e1 !important;background: #f8fafc !important;}.option-badge{display: flex !important;align-items: center !important;justify-content: center !important;width: 28px !important;height: 28px !important;border-radius: 8px !important;background: #f1f5f9 !important;border: 1px solid #e2e8f0 !important;color: #475569 !important;font-family: var(--font-heading) !important;font-weight: 800 !important;font-size: 0.85rem !important;flex-shrink: 0 !important;transition: all 0.2s ease !important;}.option-text{font-size: 0.92rem !important;font-weight: 600 !important;line-height: 1.34 !important;color: #1e293b !important;text-align: left !important;flex: 1 !important;}.option-pill.selected{background: #ecfdf5 !important;border: 2px solid #10b981 !important;box-shadow: 0 4px 12px rgba(16,185,129,0.15) !important;}.option-pill.selected .option-badge{background: #10b981 !important;border-color: #059669 !important;color: #ffffff !important;}.option-pill.selected .option-text{color: #065f46 !important;font-weight: 700 !important;}.option-check-icon{display: none;align-items: center;justify-content: center;width: 22px;height: 22px;border-radius: 50%;background: #10b981;color: #ffffff;font-size: 13px;font-weight: 800;margin-left: auto;flex-shrink: 0;box-shadow: 0 2px 6px rgba(16,185,129,0.35);}.option-pill.selected .option-check-icon{display: flex !important;animation: optionCheckPop 0.25s cubic-bezier(0.175,0.885,0.32,1.275) forwards;}@keyframes optionCheckPop{0%{transform: scale(0);opacity: 0;}100%{transform: scale(1);opacity: 1;}}.drag-drop-wrapper{display: flex !important;flex-direction: column !important;gap: 12px !important;width: 100% !important;max-width: 100% !important;margin: 0 auto !important;}.drag-pool{display: flex !important;flex-direction: row !important;gap: 10px !important;width: 100% !important;min-height: auto !important;height: auto !important;padding: 8px 10px !important;border-radius: 14px !important;align-items: center !important;justify-content: center !important;background: #f8fafc !important;border: 1.5px dashed #cbd5e1 !important;box-sizing: border-box !important;}.drag-item{flex: 1 1 0 !important;min-width: 0 !important;min-height: 48px !important;height: 48px !important;max-height: 48px !important;padding: 8px 12px !important;font-size: 0.9rem !important;font-weight: 700 !important;color: #334155 !important;background: #ffffff !important;border: 1.5px solid #cbd5e1 !important;border-radius: 14px !important;display: flex !important;align-items: center !important;justify-content: center !important;gap: 6px !important;text-align: center !important;line-height: 1.25 !important;cursor: grab !important;touch-action: none !important;box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;user-select: none !important;-webkit-user-select: none !important;box-sizing: border-box !important;transition: all 0.2s ease !important;}.drag-item:active{cursor: grabbing !important;}.drop-targets{display: flex !important;flex-direction: column !important;gap: 10px !important;width: 100% !important;min-height: auto !important;height: auto !important;padding: 0 !important;background: transparent !important;border: none !important;box-sizing: border-box !important;}.drop-target{min-height: auto !important;padding: 10px 12px !important;border-radius: 14px !important;background: #f8fafc !important;border: 1.5px solid #cbd5e1 !important;box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;display: flex !important;flex-direction: column !important;gap: 6px !important;transition: all 0.2s ease !important;box-sizing: border-box !important;}.drop-target.drag-over{background: #ecfdf5 !important;border-color: #10b981 !important;box-shadow: 0 0 14px rgba(16,185,129,0.25) !important;}.drop-target-label{font-size: 0.78rem !important;font-weight: 700 !important;color: #64748b !important;text-align: left !important;line-height: 1.3 !important;text-transform: uppercase !important;letter-spacing: 0.02em !important;margin-bottom: 2px !important;}.drop-slot-content{min-height: 44px !important;border-radius: 10px !important;border: 1.5px dashed #cbd5e1 !important;background: #ffffff !important;display: flex !important;align-items: center !important;justify-content: center !important;transition: all 0.2s ease !important;box-sizing: border-box !important;}.drop-slot-content:empty::after{content: "Tarik atau ketuk produk ke sini";font-size: 0.76rem;font-style: italic;color: #94a3b8;}.drop-slot-content .drag-item{width: 100% !important;height: 42px !important;max-height: 42px !important;min-height: 42px !important;border-color: #10b981 !important;background: #ecfdf5 !important;color: #065f46 !important;box-shadow: 0 2px 6px rgba(16,185,129,0.15) !important;}.puzzle-wrapper{display: flex !important;flex-direction: column !important;align-items: center !important;justify-content: flex-start !important;width: 100% !important;margin: 0 auto !important;padding: 0 !important;gap: 0 !important;}.puzzle-board{width: min(78vw,290px) !important;height: min(78vw,290px) !important;gap: 3px !important;border: 2px solid #4a3421 !important;border-radius: 14px !important;margin: 0 auto !important;box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;}.puzzle-tile{border-radius: 8px !important;border: 1.5px solid rgba(255,255,255,0.6) !important;}.puzzle-controls{display: flex !important;gap: 10px !important;justify-content: center !important;width: 100% !important;max-width: min(78vw,290px) !important;margin: 14px auto 0 auto !important;padding: 0 !important;}.puzzle-controls .btn-puzzle-action,.puzzle-controls .btn-styled{flex: 1 !important;background: #ffffff !important;border: 1.5px solid #e2e8f0 !important;border-radius: 12px !important;padding: 8px 12px !important;color: #334155 !important;font-family: var(--font-heading) !important;font-size: 0.85rem !important;font-weight: 700 !important;cursor: pointer !important;display: inline-flex !important;align-items: center !important;justify-content: center !important;gap: 6px !important;box-shadow: 0 2px 4px rgba(0,0,0,0.04) !important;transition: all 0.2s cubic-bezier(0.16,1,0.3,1) !important;min-height: 42px !important;}.puzzle-controls .btn-puzzle-action:hover,.puzzle-controls .btn-styled:hover{border-color: #cbd5e1 !important;background: #f8fafc !important;color: #0f172a !important;}.puzzle-controls .btn-puzzle-action:active,.puzzle-controls .btn-styled:active{transform: scale(0.98) !important;}.quiz-action-bar{width: 100% !important;max-width: 100% !important;margin-top: 16px !important;display: flex !important;flex-direction: column !important;align-items: stretch !important;}.btn-primary-action{width: 100% !important;height: 50px !important;border-radius: 16px !important;font-family: var(--font-heading) !important;font-size: 1rem !important;font-weight: 800 !important;letter-spacing: 0.02em !important;display: flex !important;align-items: center !important;justify-content: center !important;gap: 8px !important;border: none !important;box-sizing: border-box !important;transition: all 0.22s cubic-bezier(0.16,1,0.3,1) !important;}.btn-primary-action:disabled,.btn-primary-action.btn-disabled{background: #e2e8f0 !important;color: #94a3b8 !important;border: 1.5px solid #cbd5e1 !important;cursor: not-allowed !important;box-shadow: none !important;opacity: 0.7 !important;pointer-events: none !important;}.btn-primary-action:not(:disabled):not(.btn-disabled),.btn-primary-action.btn-active{background: linear-gradient(135deg,#10b981 0%,#059669 100%) !important;color: #ffffff !important;cursor: pointer !important;box-shadow: 0 6px 20px rgba(16,185,129,0.35) !important;opacity: 1 !important;pointer-events: auto !important;}.btn-primary-action:not(:disabled):not(.btn-disabled):hover{transform: translateY(-1px) !important;box-shadow: 0 8px 24px rgba(16,185,129,0.42) !important;}.btn-primary-action:not(:disabled):not(.btn-disabled):active{transform: scale(0.98) translateY(1px) !important;box-shadow: 0 2px 8px rgba(16,185,129,0.3) !important;}.crossword-wrapper-v2{width: 100% !important;max-width: 100% !important;gap: 6px !important;}.cw-board-container{padding: 6px !important;border-width: 2.5px !important;}.crossword-grid{grid-template-columns: repeat(var(--cw-cols,7),clamp(32px,10.5vw,42px)) !important;grid-template-rows: repeat(var(--cw-rows,5),clamp(32px,10.5vw,42px)) !important;gap: 3px !important;}.cw-cell{width: 100% !important;height: 100% !important;border-radius: 6px !important;}.cw-cell-letter{font-size: clamp(1.05rem,4vw,1.25rem) !important;}.cw-cell-num{font-size: 9px !important;top: 2px !important;left: 3px !important;}.cw-clue-bar{padding: 6px 10px !important;}.cw-clue-text{font-size: 0.78rem !important;}.cw-key{height: 38px !important;font-size: 0.88rem !important;}.cw-key-spacer{height: 38px !important;}.cw-btn-check{padding: 8px 26px !important;font-size: 0.9rem !important;}.btn-finish-module{width: 100% !important;max-width: 100% !important;padding: 14px 16px !important;font-size: clamp(0.85rem,3.8vw,1rem) !important;white-space: normal !important;word-break: break-word !important;line-height: 1.35 !important;box-sizing: border-box !important;border-radius: 14px !important;}.sidebar-leaderboard{display: none !important;}.sidebar-leaderboard.mobile-modal-active{display: flex !important;position: fixed !important;top: 0 !important;left: 0 !important;right: 0 !important;bottom: 0 !important;width: 100vw !important;height: 100vh !important;max-width: 100vw !important;z-index: 10005 !important;background: rgba(15,8,4,0.8) !important;backdrop-filter: blur(8px) !important;-webkit-backdrop-filter: blur(8px) !important;align-items: center !important;justify-content: center !important;padding: 16px !important;margin: 0 !important;border: none !important;border-radius: 0 !important;box-shadow: none !important;box-sizing: border-box !important;animation: mobileLbFadeIn 0.25s ease-out forwards;}@keyframes mobileLbFadeIn{from{opacity: 0;}to{opacity: 1;}}@keyframes mobileLbCardPop{from{opacity: 0;transform: scale(0.92) translateY(16px);}to{opacity: 1;transform: scale(1) translateY(0);}}.sidebar-leaderboard-inner{display: flex !important;flex-direction: column !important;width: 95% !important;max-width: 440px !important;max-height: 88vh !important;background: #231409 !important;border: 2.5px solid #f59e0b !important;border-radius: 24px !important;box-shadow: 0 20px 60px rgba(0,0,0,0.7),0 0 0 1px rgba(245,158,11,0.3) !important;overflow: hidden !important;padding: 18px 16px !important;box-sizing: border-box !important;animation: mobileLbCardPop 0.3s cubic-bezier(0.16,1,0.3,1) forwards;}.sidebar-leaderboard.mobile-modal-active .leaderboard-header{display: flex !important;align-items: center !important;justify-content: space-between !important;padding: 0 0 12px 0 !important;margin-bottom: 12px !important;border-bottom: 2px dashed rgba(245,158,11,0.3) !important;cursor: default !important;}.sidebar-leaderboard.mobile-modal-active .leaderboard-title{font-size: 1.15rem !important;color: #fef08a !important;font-weight: 800 !important;margin: 0 !important;}.sidebar-leaderboard.mobile-modal-active .btn-toggle-lb{display: none !important;}.sidebar-leaderboard.mobile-modal-active .lb-mobile-indicator{display: none !important;}.mobile-lb-close{display: inline-flex !important;align-items: center !important;justify-content: center !important;width: 34px !important;height: 34px !important;border-radius: 50% !important;background: rgba(255,255,255,0.1) !important;border: 1px solid rgba(255,255,255,0.25) !important;color: #ffffff !important;font-size: 1.1rem !important;cursor: pointer !important;transition: all 0.2s ease !important;flex-shrink: 0 !important;}.mobile-lb-close:active{transform: scale(0.9) !important;background: rgba(255,255,255,0.2) !important;}.mobile-lb-tabs{display: flex !important;gap: 8px !important;background: rgba(0,0,0,0.35) !important;padding: 4px !important;border-radius: 14px !important;border: 1px solid rgba(245,158,11,0.25) !important;margin-bottom: 12px !important;flex-shrink: 0 !important;position: relative !important;z-index: 10 !important;}.mobile-lb-tab{flex: 1 !important;padding: 8px 10px !important;font-size: 0.82rem !important;font-weight: 700 !important;border-radius: 10px !important;border: none !important;background: transparent !important;color: #d1b899 !important;cursor: pointer !important;transition: all 0.2s ease !important;text-align: center !important;touch-action: manipulation !important;user-select: none !important;-webkit-tap-highlight-color: transparent !important;position: relative !important;z-index: 11 !important;pointer-events: auto !important;}.mobile-lb-tab:not(.active):active{background: rgba(255,255,255,0.1) !important;transform: scale(0.97) !important;}.mobile-lb-tab.active{background: linear-gradient(135deg,#f59e0b 0%,#d97706 100%) !important;color: #ffffff !important;box-shadow: 0 3px 8px rgba(245,158,11,0.4) !important;}.sidebar-leaderboard.mobile-modal-active .leaderboard-content-grid{display: flex !important;flex-direction: column !important;flex: 1 !important;overflow: hidden !important;min-height: 0 !important;gap: 0 !important;margin-top: 0 !important;}.sidebar-leaderboard.mobile-modal-active .lb-section{display: flex !important;flex-direction: column !important;flex: 1 !important;overflow: hidden !important;min-height: 0 !important;}.sidebar-leaderboard.mobile-modal-active .lb-section.mobile-hide{display: none !important;}.sidebar-leaderboard.mobile-modal-active .leaderboard-list{flex: 1 !important;max-height: 50vh !important;overflow-y: auto !important;padding-right: 4px !important;margin-top: 4px !important;}.sidebar-leaderboard.mobile-modal-active .leaderboard-item{padding: 9px 10px !important;font-size: 0.84rem !important;}.mobile-lb-footer{display: block !important;margin-top: 12px !important;flex-shrink: 0 !important;}}.header-main-row{display: contents;}.sidebar-leaderboard-inner{display: contents;}.mobile-header-btn,.mobile-settings-btn,.mobile-leaderboard-btn,.mobile-lb-close,.mobile-lb-tabs,.mobile-lb-footer{display: none;}@media (max-width: 768px){.header-navbar{height: auto !important;padding: 8px 12px 10px !important;display: flex !important;flex-direction: column !important;gap: 6px !important;border-radius: 0 0 18px 18px !important;box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;}.header-main-row{display: flex !important;align-items: center !important;justify-content: space-between !important;width: 100% !important;gap: 8px !important;}.header-controls-group{display: none !important;}.user-profile .user-cabang,.user-profile .user-device-badge{display: none !important;}.user-profile{display: flex !important;align-items: center !important;gap: 8px !important;min-width: 0 !important;flex: 1 !important;}.avatar-circle{width: 36px !important;height: 36px !important;font-size: 1rem !important;flex-shrink: 0 !important;}.user-info{display: flex !important;flex-direction: column !important;gap: 2px !important;min-width: 0 !important;}.user-name{font-size: 0.92rem !important;white-space: nowrap !important;overflow: hidden !important;text-overflow: ellipsis !important;max-width: 140px !important;line-height: 1.2 !important;}.user-sub-info{display: flex !important;align-items: center !important;gap: 6px !important;margin-top: 0 !important;}.user-score-badge{font-size: 0.72rem !important;padding: 2px 7px !important;border-radius: 8px !important;line-height: 1 !important;}.header-right-section{display: flex !important;align-items: center !important;gap: 6px !important;flex-shrink: 0 !important;}.brand-logo-wrap{display: flex !important;align-items: center !important;}.brand-logo-wrap img{height: 34px !important;max-width: 110px !important;object-fit: contain !important;}.mobile-header-btn{display: inline-flex !important;align-items: center !important;justify-content: center !important;width: 36px !important;height: 36px !important;border-radius: 12px !important;background: linear-gradient(135deg,#4a3421 0%,#2f1d0f 100%) !important;color: #f8c232 !important;border: 2px solid #8c603a !important;font-size: 1.15rem !important;cursor: pointer !important;box-shadow: 0 3px 8px rgba(0,0,0,0.3) !important;transition: all 0.2s cubic-bezier(0.175,0.885,0.32,1.275) !important;flex-shrink: 0 !important;user-select: none !important;}.mobile-header-btn:active{transform: scale(0.92) !important;box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;}.mobile-settings-btn{display: inline-flex !important;align-items: center !important;justify-content: center !important;}.mobile-leaderboard-btn{display: inline-flex !important;align-items: center !important;justify-content: center !important;background: linear-gradient(135deg,#78350f 0%,#451a03 100%) !important;border: 2px solid #f59e0b !important;color: #fef08a !important;box-shadow: 0 3px 8px rgba(245,158,11,0.3) !important;}.mobile-leaderboard-btn:active{transform: scale(0.92) !important;box-shadow: 0 1px 3px rgba(245,158,11,0.2) !important;}.header-progress-wrap{width: 100% !important;max-width: 100% !important;margin: 2px 0 0 0 !important;}.progress-label{font-size: 0.78rem !important;margin-bottom: 2px !important;}.progress-track{height: 10px !important;}.progress-flag-icon{top: -6px !important;width: 18px !important;height: 18px !important;font-size: 8px !important;}.mobile-settings-card{width: 92% !important;max-width: 400px !important;padding: 20px 18px !important;border-radius: 24px !important;background: #fffdf9 !important;border: 3px solid #e2cbb2 !important;box-shadow: 0 20px 50px rgba(0,0,0,0.4) !important;box-sizing: border-box !important;text-align: left !important;position: relative !important;}.mobile-settings-header{display: flex !important;justify-content: space-between !important;align-items: center !important;margin-bottom: 14px !important;padding-bottom: 10px !important;border-bottom: 2px dashed #ebd9b8 !important;}.ms-card-box{background: #fbf7f0 !important;border: 1px solid #ebd9b8 !important;border-radius: 14px !important;padding: 12px 14px !important;margin-bottom: 12px !important;}.ms-box-title{font-size: 0.8rem !important;font-weight: 800 !important;color: #78350f !important;text-transform: uppercase !important;letter-spacing: 0.5px !important;margin-bottom: 8px !important;}.ms-info-grid{display: grid !important;grid-template-columns: 1fr 1fr !important;gap: 8px 10px !important;}.ms-info-row{display: flex !important;flex-direction: column !important;gap: 1px !important;}.ms-info-label{font-size: 0.72rem !important;color: #78716c !important;font-weight: 600 !important;}.ms-info-val{font-size: 0.86rem !important;color: #292524 !important;white-space: nowrap !important;overflow: hidden !important;text-overflow: ellipsis !important;}.ms-action-row{display: flex !important;align-items: center !important;justify-content: space-between !important;gap: 10px !important;}.ms-action-info{display: flex !important;flex-direction: column !important;}.ms-action-info strong{font-size: 0.88rem !important;color: #292524 !important;}.ms-subtext{font-size: 0.72rem !important;color: #78716c !important;margin-top: 1px !important;}html,body{height: 100% !important;height: 100dvh !important;max-height: 100dvh !important;overflow: hidden !important;overscroll-behavior: none !important;touch-action: pan-x pinch-zoom !important;}.app-container{width: 100% !important;max-width: 460px !important;height: calc(100dvh - 58px) !important;max-height: calc(100dvh - 58px) !important;padding: 4px 10px 8px 10px !important;margin: 0 auto !important;display: flex !important;flex-direction: column !important;justify-content: space-between !important;align-items: stretch !important;overflow: hidden !important;box-sizing: border-box !important;flex: 1 !important;}.quiz-container{height: 100% !important;max-height: 100% !important;display: flex !important;flex-direction: column !important;justify-content: space-between !important;overflow: hidden !important;padding: clamp(10px,1.8vh,16px) clamp(12px,3.5vw,18px) !important;border-radius: 20px !important;box-sizing: border-box !important;flex: 1 !important;}.quiz-card{flex: 1 1 auto !important;min-height: 0 !important;display: none;flex-direction: column !important;justify-content: space-around !important;align-items: stretch !important;overflow: hidden !important;width: 100% !important;padding: 0 !important;box-sizing: border-box !important;}.quiz-card[style*="display: block"],.quiz-card[style*="display: flex"],.quiz-card.active{display: flex !important;}#quiz-card-start,#quiz-card-already-completed{height: 100% !important;max-height: 100% !important;display: flex !important;flex-direction: column !important;justify-content: space-evenly !important;align-items: center !important;padding: 2px 0 !important;overflow: hidden !important;box-sizing: border-box !important;}#quiz-card-start .welcome-hero-logo{max-height: clamp(55px,11.5vh,90px) !important;width: auto !important;max-width: 82% !important;object-fit: contain !important;}#quiz-card-start .welcome-module-badge{font-size: clamp(0.72rem,1.8vh,0.84rem) !important;padding: clamp(3px,0.7vh,5px) clamp(10px,2.5vw,16px) !important;margin-bottom: 0 !important;}#quiz-card-start .welcome-desc{font-size: clamp(0.85rem,2vh,1.02rem) !important;line-height: 1.35 !important;margin: 0 !important;padding: 0 4px !important;}#quiz-card-start .btn-start-game{min-height: clamp(42px,6vh,50px) !important;font-size: clamp(1.05rem,2.2vh,1.25rem) !important;padding: 8px 44px !important;}#quiz-card-start #btn-reroll-local-wrap{margin-top: 4px !important;}#quiz-card-profile .profile-card-content{height: 100% !important;display: flex !important;flex-direction: column !important;justify-content: space-evenly !important;align-items: center !important;gap: clamp(6px,1.5vh,12px) !important;padding: 4px 0 !important;overflow: hidden !important;}#quiz-card-profile .profile-hero-logo{max-height: clamp(50px,10vh,80px) !important;}.quiz-action-bar{margin: clamp(6px,1.2vh,12px) auto 0 auto !important;width: 100% !important;}.btn-primary-action{height: clamp(40px,5.5vh,48px) !important;font-size: clamp(0.85rem,1.8vh,0.98rem) !important;width: 100% !important;max-width: 100% !important;border-radius: 14px !important;}.quiz-question-text{font-size: clamp(0.88rem,2vh,1.1rem) !important;line-height: 1.3 !important;margin-bottom: clamp(6px,1.2vh,14px) !important;}.options-grid{gap: clamp(6px,1.2vh,10px) !important;}.btn-option{padding: clamp(7px,1.3vh,12px) clamp(10px,2.5vw,14px) !important;font-size: clamp(0.8rem,1.7vh,0.92rem) !important;border-radius: 12px !important;}.drag-drop-wrapper{gap: 8px !important;max-height: 48vh !important;overflow-y: auto !important;}.drag-source-pill,.drop-target-box{padding: 5px 8px !important;font-size: 0.75rem !important;min-height: 36px !important;}.puzzle-grid{width: clamp(180px,28vh,250px) !important;height: clamp(180px,28vh,250px) !important;}.tts-board{width: clamp(170px,26vh,230px) !important;height: clamp(170px,26vh,230px) !important;margin: 2px auto !important;}.tts-clue-bar{padding: 5px 8px !important;font-size: 0.76rem !important;margin: 2px 0 !important;}.virtual-keyboard{margin-top: 2px !important;gap: 2px !important;}.keyboard-row{gap: 2px !important;}.key-btn{height: clamp(30px,4.2vh,36px) !important;font-size: 0.82rem !important;}}.quiz-card-top-bar[style*="display: none"],.quiz-card-top-bar[style*="display:none"],#quiz-top-bar[style*="display: none"],#quiz-top-bar[style*="display:none"]{display: none !important;}.header-progress-wrap,#header-progress-wrap{display: none !important;}.drag-grip{font-size: 1.15rem;opacity: 0.6;margin-right: 6px;line-height: 1;pointer-events: none;display: inline-block;vertical-align: middle;}.touch-dragging-ghost{position: fixed !important;z-index: 999999 !important;pointer-events: none !important;box-shadow: 0 16px 36px rgba(0,0,0,0.4),0 0 16px rgba(230,126,34,0.6) !important;border: 2.5px solid #e67e22 !important;transform: scale(1.06) !important;opacity: 0.95 !important;transition: none !important;touch-action: none !important;box-sizing: border-box !important;}.touch-drag-source{opacity: 0.35 !important;border-style: dashed !important;}.module-selector-wrap{position: relative;display: inline-block;}.module-badge-indicator{display: inline-flex;align-items: center;gap: 6px;background: linear-gradient(135deg,#1e3a1d 0%,#2f562a 100%);color: #f8c232;border: 1.5px solid rgba(248,194,50,0.45);padding: 6px 14px;border-radius: 12px;font-size: 0.82rem;font-weight: 700;cursor: default;user-select: none;box-shadow: 0 2px 8px rgba(0,0,0,0.15);}.welcome-module-badge{display: inline-flex;align-items: center;gap: 6px;background: rgba(248,194,50,0.15);color: #f8c232;border: 1px solid rgba(248,194,50,0.35);padding: 6px 14px;border-radius: 20px;font-size: 0.88rem;font-weight: 700;margin-bottom: 12px;}