@import"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap";.toolbox{background:#fff;border-radius:16px;padding:24px;box-shadow:0 8px 32px #00000026;width:280px;max-height:600px;overflow-y:auto}.toolbox h3{margin-top:0;font-size:1.5rem;color:#333;border-bottom:2px solid #f0f0f0;padding-bottom:12px}.tool-section{margin-bottom:24px}.tool-section label{display:block;font-weight:600;margin-bottom:8px;color:#555;font-size:1.1rem}.file-input{width:100%;padding:8px;border:2px dashed #ccc;border-radius:8px;cursor:pointer;font-size:.9rem}.color-palette{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}.color-btn{width:100%;aspect-ratio:1;border:3px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;min-width:40px;min-height:40px}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border-color:#333;box-shadow:0 0 0 2px #fff,0 0 0 4px #333}.slider{width:100%;height:8px;border-radius:4px;outline:none;-webkit-appearance:none;background:linear-gradient(to right,#ccc,#74640a);cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#74640a;cursor:pointer;box-shadow:0 2px 8px #0003}.slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#74640a;cursor:pointer;border:none;box-shadow:0 2px 8px #0003}.brush-preview{margin:12px auto 0;border-radius:50%;box-shadow:0 2px 8px #0003}.tool-btn{width:100%;padding:14px 20px;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;margin-bottom:8px;background:#74640a;color:#fff;transition:all .3s ease;min-height:48px}.tool-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.tool-btn:active{transform:translateY(0)}.tool-btn.secondary{background:#6c757d}.tool-btn.secondary:hover{box-shadow:0 4px 12px #6c757d66}.tool-btn.danger{background:#dc3545}.tool-btn.danger:hover{box-shadow:0 4px 12px #dc354566}.tool-btn.success{background:#28a745}.tool-btn.success:hover{box-shadow:0 4px 12px #28a74566}.toolbox::-webkit-scrollbar{width:8px}.toolbox::-webkit-scrollbar-track{background:#f0f0f0;border-radius:4px}.toolbox::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}.toolbox::-webkit-scrollbar-thumb:hover{background:#999}.button-group{display:flex;gap:8px}.button-group .tool-btn{flex:1;margin-bottom:0;padding:14px 10px}.tool-btn.active{background:#4f46e5;box-shadow:0 4px 12px #4f46e580;transform:translateY(-2px)}.color-picker-container{display:flex;align-items:center;gap:12px;padding:12px;background:#f5f5f5;border-radius:8px;margin-top:8px}.color-picker{width:60px;height:50px;border:none;border-radius:8px;cursor:pointer;padding:4px;box-shadow:0 2px 8px #00000026}.color-picker:hover{box-shadow:0 4px 12px #00000040}.color-code{font-family:Courier New,monospace;font-weight:600;font-size:1.1rem;color:#333;flex:1;text-align:center}@media (min-width: 1920px){.toolbox{width:380px;max-height:900px;padding:35px;border-radius:24px}.toolbox h3{font-size:2.2rem;padding-bottom:18px}.tool-section{margin-bottom:35px}.tool-section label{font-size:1.6rem;margin-bottom:12px}.color-palette{grid-template-columns:repeat(5,1fr);gap:12px}.color-btn{min-width:60px;min-height:60px;border-width:4px;border-radius:12px}.slider{height:12px;border-radius:6px}.slider::-webkit-slider-thumb{width:32px;height:32px}.slider::-moz-range-thumb{width:32px;height:32px}.tool-btn{padding:20px 28px;font-size:1.6rem;border-radius:16px;min-height:70px;margin-bottom:12px}.button-group{gap:12px}.button-group .tool-btn{padding:20px 15px}.color-picker-container{padding:18px;gap:18px;border-radius:12px}.color-picker{width:80px;height:70px;border-radius:12px}.color-code{font-size:1.6rem}.brush-preview{margin:18px auto 0}}@media (min-width: 1600px) and (max-width: 1919px){.toolbox{width:320px;max-height:750px;padding:28px}.toolbox h3{font-size:1.8rem}.tool-section label{font-size:1.3rem}.color-btn{min-width:50px;min-height:50px}.tool-btn{padding:16px 24px;font-size:1.3rem;min-height:58px}}@media (max-width: 767px){.toolbox{width:100%;max-width:100%;padding:16px;border-radius:12px;max-height:none}.color-palette{grid-template-columns:repeat(6,1fr);gap:6px}.color-btn{min-width:35px;min-height:35px}.tool-btn{font-size:.95rem;padding:12px 16px;min-height:44px}.button-group .tool-btn{padding:12px 8px}}.coloring-page{min-height:100vh;background:linear-gradient(135deg,#ffd6e8,#ffe5b4);padding:20px;display:flex;flex-direction:column}.coloring-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.coloring-header h1{font-size:2.5rem;color:#333;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.back-btn,.change-image-btn{background:linear-gradient(135deg,#74640a,#ffc75f);border:none;padding:12px 24px;border-radius:12px;font-size:1.2rem;font-weight:600;color:#fff;box-shadow:0 4px 12px #0000001a;transition:all .3s ease;cursor:pointer}.music-btn{background:linear-gradient(135deg,#4caf50,#45a049);border:none;padding:12px 20px;border-radius:12px;font-size:1.5rem;color:#fff;box-shadow:0 4px 12px #0000001a;transition:all .3s ease;cursor:pointer;display:flex;align-items:center;justify-content:center}.change-image-btn{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff}.back-btn:hover,.change-image-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000026}.coloring-setup{max-width:1000px;margin:0 auto;width:100%}.activity-form{background:#fff;padding:25px;border-radius:20px;margin-bottom:25px;box-shadow:0 8px 32px #0000001a}.setup-section{background:#fff;padding:30px;border-radius:20px;margin-bottom:30px;box-shadow:0 8px 32px #0000001a}.setup-section h2{margin:0 0 25px;color:#333;font-size:1.8rem}.image-gallery{display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;padding:10px 5px 25px;margin-bottom:20px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.image-gallery::-webkit-scrollbar{height:12px}.image-gallery::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.image-gallery::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#ff6b6b,#ff8e53);border-radius:10px}.image-gallery::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#ff5252,#ff7043)}.gallery-item{min-width:200px;max-width:200px;flex-shrink:0;border:3px solid #e0e0e0;border-radius:16px;overflow:hidden;cursor:pointer;transition:all .3s;background:#fff;position:relative}.gallery-item.selected{border-color:#74640a;box-shadow:0 0 0 4px #ff6b9d33;transform:scale(1.05)}.gallery-item.selected:after{content:"✓";position:absolute;top:10px;right:10px;background:#74640a;color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem}.gallery-item:hover{transform:translateY(-8px) scale(1.05);box-shadow:0 8px 24px #00000026;border-color:#ff6b6b}.gallery-item:active{transform:translateY(-4px) scale(1.02)}.gallery-item img{width:100%;height:200px;object-fit:cover;display:block}.gallery-item span{display:block;padding:12px;text-align:center;font-weight:600;color:#555;background:#f9f9f9;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.blank-paper-item{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border-color:#4caf50!important}.blank-paper-item:hover{border-color:#45a049!important;box-shadow:0 8px 24px #4caf5040}.blank-paper-preview{width:100%;height:200px;display:flex;align-items:center;justify-content:center;background:#fff}.blank-paper-item span{background:linear-gradient(135deg,#66bb6a,#4caf50);color:#fff;font-weight:700}.upload-label{cursor:pointer;display:block;width:100%;height:100%}.upload-preview{width:100%;height:200px;display:flex;align-items:center;justify-content:center;background:#fff}.upload-text{display:block;padding:12px;text-align:center;font-weight:700;color:#fff;background:linear-gradient(135deg,#42a5f5,#2196f3);font-size:.95rem}.upload-item{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-color:#2196f3!important}.upload-item:hover{border-color:#1976d2!important;box-shadow:0 8px 24px #2196f340}.upload-label{cursor:pointer;display:block;width:100%;height:100%;position:relative}.upload-preview{width:100%;height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff}.uploaded-preview{width:100%;height:200px;object-fit:cover;display:block}.upload-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#2196f3e6;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.upload-item:hover .upload-overlay{opacity:1}.upload-item.has-image{border-color:#74640a!important}.upload-item.has-image:hover{border-color:#ff5252!important;box-shadow:0 8px 24px #ff6b9d4d}.divider{text-align:center;margin:30px 0;position:relative;color:#999;font-size:1.2rem;font-weight:700}.divider:before,.divider:after{content:"";position:absolute;top:50%;width:40%;height:2px;background:#ddd}.upload-big-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px;border:4px dashed #ccc;border-radius:20px;cursor:pointer;transition:all .3s;background:#f9f9f9}.upload-big-btn:hover{border-color:#ff6b6b;background:#fff;transform:scale(1.02)}.upload-big-btn .icon{font-size:4rem;margin-bottom:15px}.upload-big-btn .text{font-size:1.5rem;font-weight:700;color:#333;margin-bottom:8px}.upload-big-btn .hint{font-size:1rem;color:#999}.no-images-hint{text-align:center;padding:40px;color:#666}.no-images-hint p{font-size:1.3rem;margin-bottom:10px}.no-images-hint small{color:#999;font-size:1rem}.coloring-container{display:flex;gap:20px;justify-content:center;align-items:flex-start;flex:1;padding:10px 0}.canvas-wrapper{background:#fff;border-radius:16px;padding:10px;box-shadow:0 8px 32px #00000026;display:flex;justify-content:center;align-items:center;max-width:100%}.drawing-stage{border:3px solid #333;border-radius:8px;cursor:crosshair;touch-action:none;background:#fff;display:block;margin:0 auto}@media (min-width: 1920px){.coloring-page{padding:30px}.coloring-header{margin-bottom:30px}.coloring-header h1{font-size:4rem}.back-btn,.change-image-btn{font-size:2rem;padding:20px 40px;border-radius:16px}.music-btn{font-size:2rem;padding:20px 30px}.coloring-container{gap:50px;max-width:95%;margin:0 auto;padding:20px 0}.canvas-wrapper{padding:20px;border-radius:24px}.drawing-stage{border-width:5px;border-radius:12px}.mascot{bottom:60px;right:60px}.mascot-avatar{font-size:7rem}.mascot-speech{font-size:2rem;padding:25px 40px;border-radius:30px}.mascot-speech:before{top:-15px;right:40px;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:15px solid white}.setup-section{padding:50px;border-radius:30px}.setup-section h2{font-size:2.5rem;margin-bottom:35px}.gallery-item{min-width:280px;max-width:280px}.gallery-item img{height:280px}.gallery-item span{font-size:1.3rem;padding:18px}.upload-big-btn{padding:80px;border-radius:30px;border-width:6px}.upload-big-btn .icon{font-size:6rem}.upload-big-btn .text{font-size:2rem}.upload-big-btn .hint{font-size:1.4rem}}@media (min-width: 1200px) and (max-width: 1920px){.coloring-container{max-width:1600px;margin:0 auto}}@media (min-width: 768px) and (max-width: 1199px){.coloring-header h1{font-size:2rem}.back-btn,.change-image-btn,.music-btn{font-size:1rem;padding:10px 20px}.coloring-container{gap:15px}.mascot{bottom:20px;right:20px}.mascot-avatar{font-size:3rem}.mascot-speech{font-size:.9rem;padding:8px 16px}}@media (max-width: 767px){.coloring-page{padding:10px}.coloring-header{flex-direction:column;gap:10px;margin-bottom:15px}.coloring-header h1{font-size:1.8rem}.header-actions{width:100%;justify-content:center}.back-btn,.change-image-btn{font-size:.9rem;padding:8px 16px}.music-btn{font-size:1.2rem;padding:8px 16px}.coloring-container{flex-direction:column;gap:15px;align-items:center}.canvas-wrapper{width:100%;padding:5px}.drawing-stage{max-width:100%;height:auto}.mascot{bottom:15px;right:15px}.mascot-avatar{font-size:2.5rem}.mascot-speech{font-size:.85rem;padding:8px 12px}.setup-section{padding:20px}.setup-section h2{font-size:1.4rem}.image-gallery{gap:15px}.gallery-item{min-width:150px;max-width:150px}.gallery-item img{height:150px}.upload-big-btn{padding:30px}.upload-big-btn .icon{font-size:3rem}.upload-big-btn .text{font-size:1.2rem}}@media (max-height: 600px) and (orientation: landscape){.coloring-header{margin-bottom:10px}.coloring-header h1{font-size:1.5rem}.back-btn,.change-image-btn,.music-btn{padding:8px 16px;font-size:.9rem}.coloring-container{gap:10px}.mascot{display:none}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.drawing-stage{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}}.action-btn:hover{transform:translateY(-3px);box-shadow:0 6px 20px #00000040}.action-btn.disabled{opacity:.6;cursor:not-allowed;background:linear-gradient(135deg,#d3d3d3,#b0b0b0)!important}.action-btn.disabled:hover{transform:none;box-shadow:0 6px 25px #00000040}.start-btn{background:linear-gradient(135deg,#4caf50,#45a049)}.start-btn:hover{background:linear-gradient(135deg,#45a049,#3d8b40)}.save-btn{background:linear-gradient(135deg,#2196f3,#1976d2)}.save-btn:hover{background:linear-gradient(135deg,#1976d2,#1565c0)}.select-btn{background:linear-gradient(135deg,#ff9800,#f57c00)}.select-btn:hover{background:linear-gradient(135deg,#f57c00,#e65100)}@media (max-width: 1200px){.form-row{grid-template-columns:repeat(2,1fr)}}@media (max-width: 900px){.form-row{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.form-row{grid-template-columns:1fr}.action-buttons{grid-template-columns:1fr;width:100%;max-width:100%}.action-btn{width:100%}.form-field-tester{max-width:100%}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}.modal-content{background:#fff;border-radius:20px;padding:30px;max-width:800px;width:100%;max-height:80vh;overflow-y:auto;position:relative;box-shadow:0 10px 50px #0000004d}.modal-content h2{margin:0 0 25px;color:#333;font-size:2rem;text-align:center}.close-btn{position:absolute;top:15px;right:15px;background:#ff6b6b;border:none;width:35px;height:35px;border-radius:50%;color:#fff;font-size:1.5rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.close-btn:hover{background:#ff5252;transform:rotate(90deg)}.no-data{text-align:center;color:#999;font-size:1.2rem;padding:40px}.activity-list{display:flex;flex-direction:column;gap:15px}.activity-item{display:flex;gap:20px;padding:15px;border:2px solid #e0e0e0;border-radius:12px;cursor:pointer;transition:all .3s ease;background:#f9f9f9;flex-wrap:nowrap;align-items:flex-start}.activity-item:hover{border-color:#74640a;background:#fff;box-shadow:0 4px 15px #0000001a;transform:translateY(-2px)}.activity-item img{width:120px;height:120px;object-fit:cover;border-radius:8px;border:2px solid #ddd}.activity-info h3{margin:0 0 10px;color:#333;font-size:1.3rem}.activity-info p{margin:5px 0;color:#666;font-size:1rem}.activity-info .date{color:#999;font-size:.9rem;margin-top:10px;font-style:italic}.evaluation-modal{z-index:2000}.evaluation-content{max-width:600px;max-height:90vh;overflow-y:auto}.evaluation-form{display:flex;flex-direction:column;gap:20px;margin-top:20px}.evaluation-item textarea{padding:12px 15px;border:2px solid #e0e0e0;border-radius:10px;font-size:1rem;font-family:inherit;resize:vertical;min-height:100px;transition:all .3s ease}.evaluation-item textarea:focus{outline:none;border-color:#74640a;box-shadow:0 0 0 3px #ff6b9d1a}.evaluation-summary{background:linear-gradient(135deg,#ffe5b4,#ffd6e8);padding:20px;border-radius:15px;margin-top:10px}.total-score{display:flex;justify-content:space-between;align-items:center;font-size:1.3rem;font-weight:600;color:#333}.total-score .score-value{font-size:2rem;color:#74640a;font-weight:700}.evaluation-actions{display:flex;gap:15px;margin-top:20px}.cancel-eval-btn,.export-pdf-btn{flex:1;padding:15px 25px;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #0000001a}.cancel-eval-btn{background:linear-gradient(135deg,#9ca3af,#6b7280);color:#fff}.cancel-eval-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #6b72804d;background:linear-gradient(135deg,#6b7280,#4b5563)}.export-pdf-btn{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}.export-pdf-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #22c55e66;background:linear-gradient(135deg,#16a34a,#15803d)}@media (max-width: 768px){.evaluation-content{width:95%;max-height:85vh}.score-selector{gap:8px}.score-btn{width:45px;height:45px;font-size:1.1rem}.total-score{font-size:1.1rem}.total-score .score-value{font-size:1.6rem}.evaluation-actions{flex-direction:column}.cancel-eval-btn,.export-pdf-btn{width:100%}}.puzzle-board-container{max-width:1400px;margin:0 auto;padding:20px}.puzzle-controls{display:flex;gap:16px;justify-content:center;margin-bottom:24px}.hint-btn,.shuffle-btn{background:#fff;border:none;padding:14px 28px;border-radius:12px;font-size:1.2rem;font-weight:600;box-shadow:0 4px 12px #0000001a;transition:all .3s ease;cursor:pointer;min-height:52px}.hint-btn:hover,.shuffle-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000026}.puzzle-game-layout{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;max-width:1400px;margin:0 auto}.puzzle-grid{display:grid;gap:6px;background:#fff;padding:15px;border-radius:16px;box-shadow:0 8px 32px #00000026;aspect-ratio:1;width:100%}.board-slot{background:#f8f9fa;border:3px dashed #cbd5e0;border-radius:8px;position:relative;overflow:hidden;transition:all .3s ease;aspect-ratio:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.board-slot.drop-target{border-color:#74640a;background:linear-gradient(135deg,#ffe0ed,#fff0f7);transform:scale(1.05);box-shadow:0 0 20px #ff6b9d66}.board-slot.filled{border-style:solid;border-color:#48bb78;background:#fff;box-shadow:0 4px 12px #48bb7833;cursor:grab}.board-slot.filled:active{cursor:grabbing}.board-slot.dragging{opacity:.3;border-style:dashed;border-color:#a0aec0}.board-slot.correct-hint{border-color:#48bb78;box-shadow:0 0 16px #48bb7866}.board-slot.wrong-drop{animation:shake .5s ease;border-color:#f56565;background:linear-gradient(135deg,#fed7d7,#fff5f5)}.board-slot.wrong-drop .placed-piece-image,.board-slot .placed-piece-image.wrong-piece{box-shadow:inset 0 0 0 3px #f4433673}.empty-slot-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.slot-hint-number{font-size:2rem;font-weight:700;color:#cbd5e0}.placed-piece-image{width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}.placed-piece-image.wrong-piece{filter:brightness(.95)}.pieces-tray{background:#fff;border-radius:16px;padding:20px;box-shadow:0 8px 32px #00000026;display:flex;flex-direction:column;height:100%;aspect-ratio:1}.pieces-tray h3{font-size:1.5rem;color:#333;margin:0 0 16px;text-align:center;padding-bottom:12px;border-bottom:2px solid #e2e8f0}.pieces-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;overflow-y:auto;padding:10px;flex:1}.draggable-piece{background:#fff;border:3px solid #74640a;border-radius:8px;padding:4px;cursor:grab;transition:all .3s ease;position:relative;aspect-ratio:1;box-shadow:0 2px 8px #0000001a}.draggable-piece.selected{border-color:#48bb78;box-shadow:0 0 0 3px #48bb7859,0 8px 20px #48bb7840}.draggable-piece:hover{box-shadow:0 8px 20px #ff6b9d4d}.draggable-piece.dragging{opacity:.5;cursor:grabbing;transform:rotate(5deg)}.board-slot.selected-target{border-color:#74640a;box-shadow:0 0 0 3px #74640a40,0 6px 18px #74640a40}.piece-image{width:100%;height:100%;object-fit:cover;border-radius:4px;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}.piece-number{position:absolute;top:4px;right:4px;background:#ff6b9de6;color:#fff;font-size:.8rem;font-weight:700;padding:3px 7px;border-radius:6px;min-width:22px;text-align:center}.tray-empty{text-align:center;color:#48bb78;font-size:1.2rem;font-weight:600;margin:40px 0}.completion-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.completion-message{background:#fff;border-radius:24px;padding:50px 60px;text-align:center;box-shadow:0 16px 64px #0000004d}.completion-icon{font-size:6rem;margin-bottom:20px}.completion-message h2{font-size:3rem;color:#333;margin-bottom:16px}.completion-message p{font-size:1.5rem;color:#666;margin-bottom:32px}.completion-buttons{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.play-again-btn,.evaluate-btn{color:#fff;border:none;padding:16px 40px;border-radius:12px;font-size:1.3rem;font-weight:700;cursor:pointer;transition:all .3s ease;min-height:56px;flex:1;min-width:180px}.play-again-btn{background:linear-gradient(135deg,#74640a,#ffc75f)}.play-again-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #ff6b9d66}.evaluate-btn{background:linear-gradient(135deg,#74640a,#764ba2)}.evaluate-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #74640a66}@media (max-width: 1024px){.puzzle-game-layout{grid-template-columns:1fr;grid-template-rows:auto auto}.puzzle-grid{max-width:100%}.pieces-tray{max-height:300px}}@media (max-width: 768px){.puzzle-board-container{padding:10px}.puzzle-grid{gap:4px;padding:10px}.board-slot,.draggable-piece{border-width:2px}.slot-hint-number{font-size:1.5rem}.pieces-tray h3{font-size:1.2rem}.completion-message{padding:30px 40px}.completion-icon{font-size:4rem}.completion-message h2{font-size:2rem}.completion-message p{font-size:1.2rem}.completion-buttons{flex-direction:column;gap:12px}.play-again-btn,.evaluate-btn{min-width:100%;padding:14px 30px;font-size:1.1rem}}@media (min-width: 1920px){.puzzle-board-container{max-width:1800px;padding:30px}.puzzle-controls{gap:25px;margin-bottom:35px}.hint-btn,.shuffle-btn{padding:22px 45px;font-size:1.8rem;border-radius:18px;min-height:75px}.puzzle-game-layout{max-width:1800px;gap:50px}.puzzle-grid{gap:10px;padding:25px;border-radius:24px}.board-slot{border-width:5px;border-radius:12px}.slot-hint-number{font-size:3rem}.pieces-container{padding:25px;border-radius:24px;gap:15px}.pieces-tray{padding:25px;border-radius:20px}.pieces-tray h3{font-size:2rem;margin-bottom:25px}.pieces-scroll{gap:15px;padding:15px}.piece-wrapper{min-width:140px;min-height:140px}.draggable-piece{border-width:5px;border-radius:12px}.empty-tray-message{font-size:1.6rem}.completion-modal{padding:25px}.completion-message{padding:60px 80px;border-radius:30px}.completion-icon{font-size:8rem;margin-bottom:25px}.completion-message h2{font-size:3.5rem;margin-bottom:20px}.completion-message p{font-size:2rem;margin-bottom:40px}.completion-buttons{gap:20px}.completion-btn{padding:20px 50px;font-size:1.8rem;border-radius:18px}}@media (min-width: 1600px) and (max-width: 1919px){.puzzle-board-container{max-width:1500px;padding:25px}.hint-btn,.shuffle-btn{padding:18px 36px;font-size:1.5rem;min-height:65px}.puzzle-game-layout{max-width:1500px;gap:40px}.puzzle-grid{padding:20px;border-radius:20px}.slot-hint-number{font-size:2.2rem}.pieces-tray h3{font-size:1.6rem}.piece-wrapper{min-width:120px;min-height:120px}.completion-icon{font-size:6rem}.completion-message h2{font-size:2.8rem}.completion-message p{font-size:1.6rem}.completion-btn{padding:18px 40px;font-size:1.5rem}}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-8px)}20%,40%,60%,80%{transform:translate(8px)}}.puzzle-setup,.puzzle-page{min-height:100vh;background:linear-gradient(135deg,#ffd6e8,#ffe5b4);padding:20px;animation:fadeIn .5s ease-in}.setup-header,.puzzle-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:15px}.setup-header h1,.puzzle-header h1{font-size:clamp(1.8rem,5vw,2.5rem);color:#333;text-shadow:2px 2px 4px rgba(0,0,0,.1);margin:0}.setup-container{max-width:1200px;margin:0 auto;animation:slideUp .6s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.info-banner{background:linear-gradient(135deg,#ffb347,#74640a);color:#fff;padding:15px 25px;border-radius:15px;text-align:center;font-size:1.1rem;font-weight:700;margin-bottom:20px;box-shadow:0 4px 15px #ff6b9d4d}.config-list{display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;padding:10px 5px 25px;margin-bottom:20px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.config-list::-webkit-scrollbar{height:12px}.config-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.config-list::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#74640a,#ffc75f);border-radius:10px}.config-list::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#ff5585,#ffb347)}.config-item{min-width:220px;max-width:220px;flex-shrink:0;border:3px solid #e0e0e0;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);background:#fff;position:relative}.config-item:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#ff6b9d1a,#ffc75f1a);opacity:0;transition:opacity .3s;pointer-events:none}.config-item:hover{transform:translateY(-5px);box-shadow:0 8px 25px #ff6b9d40;border-color:#74640a}.config-item:hover:before{opacity:1}.config-item.selected{border-color:#74640a;box-shadow:0 0 0 4px #ff6b9d4d;animation:pulse 2s infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 4px #ff6b9d4d}50%{box-shadow:0 0 0 6px #ff6b9d33}}.config-item img{width:100%;height:150px;object-fit:cover;transition:transform .3s ease;display:block}.config-item:hover img{transform:scale(1.05)}.config-item img.loading{opacity:.5;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{opacity:.5}50%{opacity:.8}to{opacity:.5}}.config-info{padding:12px}.config-info h3{margin:0 0 8px;font-size:1.1rem;color:#333}.difficulty-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.85rem;font-weight:700;background:#74640a;color:#fff}.divider{text-align:center;margin:30px 0;position:relative;color:#999;font-size:1.1rem}.divider:before,.divider:after{content:"";position:absolute;top:50%;width:40%;height:1px;background:#ddd}.divider:before{left:0}.divider:after{right:0}.setup-card{background:#fff;border-radius:20px;padding:clamp(25px,4vw,35px);margin-bottom:30px;box-shadow:0 10px 40px #00000014;transition:transform .3s ease,box-shadow .3s ease}.setup-card:hover{transform:translateY(-2px);box-shadow:0 12px 50px #0000001f}.setup-card h2{font-size:1.8rem;color:#333;margin-bottom:20px}.puzzle-setup .setup-card,.puzzle-page .setup-card,.puzzle-setup .setup-card *,.puzzle-page .setup-card *,.puzzle-setup .setup-card:before,.puzzle-page .setup-card:before,.puzzle-setup .setup-card:after,.puzzle-page .setup-card:after,.puzzle-setup .config-item,.puzzle-page .config-item,.puzzle-setup .config-item *,.puzzle-page .config-item *,.puzzle-setup .config-item:before,.puzzle-page .config-item:before,.puzzle-setup .config-item:after,.puzzle-page .config-item:after,.puzzle-setup .upload-label,.puzzle-page .upload-label,.puzzle-setup .upload-label *,.puzzle-page .upload-label *{background-color:#fff!important;background-image:none!important;background-blend-mode:normal!important;mix-blend-mode:normal!important;isolation:isolate!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.puzzle-setup .config-item:before,.puzzle-page .config-item:before,.puzzle-setup .upload-label:after,.puzzle-page .upload-label:after{background:none!important;opacity:0!important}.puzzle-setup .config-item img,.puzzle-page .config-item img,.puzzle-setup .preview-image,.puzzle-page .preview-image,.puzzle-setup .upload-placeholder,.puzzle-page .upload-placeholder{background-color:#fff!important;padding:6px!important;border-radius:6px!important}.upload-area{width:100%}.file-input-hidden{display:none}.upload-label{display:block;cursor:pointer;border:3px dashed #ccc;border-radius:16px;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative}.upload-label:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#667eea0d,#764ba20d);opacity:0;transition:opacity .3s;pointer-events:none}.upload-label:hover{border-color:#74640a;transform:scale(1.02);box-shadow:0 8px 20px #ff6b9d26}.upload-label:hover:after{opacity:1}.upload-label.loading{pointer-events:none;opacity:.6}.upload-label.error{border-color:#ef4444;animation:shake .5s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.upload-placeholder{padding:60px 20px;text-align:center}.upload-icon{font-size:4rem;display:block;margin-bottom:16px}.upload-placeholder p{font-size:1.3rem;color:#666}.preview-image{width:100%;max-height:400px;object-fit:contain}.difficulty-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.difficulty-btn{background:#fff;border:3px solid #e0e0e0;border-radius:16px;padding:clamp(16px,3vw,24px);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:center;position:relative;overflow:hidden}.difficulty-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ff6b9d1a;transform:translate(-50%,-50%);transition:width .4s,height .4s}.difficulty-btn:hover:before{width:300px;height:300px}.difficulty-btn:hover{border-color:#74640a;transform:translateY(-4px);box-shadow:0 10px 30px #ff6b9d40}.difficulty-btn.active{border-color:#74640a;background:linear-gradient(135deg,#74640a,#ffc75f);color:#000!important;transform:scale(1.05);box-shadow:0 12px 35px #ff6b9d66}.difficulty-btn:hover,.difficulty-btn:hover:before{border-color:#e0e0e0!important;transform:none!important;box-shadow:none!important}.difficulty-btn:before{width:0!important;height:0!important;background:transparent!important}.difficulty-btn,.difficulty-btn .difficulty-name,.difficulty-btn .difficulty-desc,.difficulty-btn .difficulty-icon{color:#000!important}.difficulty-btn.active{border-color:#74640a!important;background:#fff!important;color:#000!important;transform:none!important;box-shadow:none!important}.difficulty-btn:active,.difficulty-btn:focus,.difficulty-btn:focus-visible,.difficulty-btn.active:active,.difficulty-btn.active:focus,.difficulty-btn.active:focus-visible{color:#000!important}.difficulty-btn.active .difficulty-name,.difficulty-btn.active .difficulty-desc,.difficulty-btn.active .difficulty-icon,.difficulty-btn:active .difficulty-name,.difficulty-btn:active .difficulty-desc,.difficulty-btn:active .difficulty-icon{color:#000!important}.difficulty-btn:focus{outline:3px solid rgba(116,100,10,.12);outline-offset:2px}.difficulty-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.difficulty-icon{font-size:3rem;margin-bottom:12px}.difficulty-name{font-size:1.5rem;font-weight:700;margin-bottom:8px}.difficulty-desc{font-size:1rem;opacity:.8}.difficulty-btn .difficulty-name,.difficulty-btn .difficulty-desc{color:#222!important}.difficulty-btn.active .difficulty-name,.difficulty-btn.active .difficulty-desc{color:#000!important}.start-btn{width:100%;max-width:400px;margin:0 auto;display:block;padding:20px 40px;font-size:clamp(1.3rem,4vw,1.8rem);font-weight:700;background:linear-gradient(135deg,#74640a,#764ba2);color:#fff;border:none;border-radius:16px;cursor:pointer;box-shadow:0 8px 24px #667eea66;transition:all .3s cubic-bezier(.4,0,.2,1);min-height:64px;position:relative;overflow:hidden}.start-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.start-btn:hover:before{left:100%}.start-btn:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 14px 40px #667eea80}.start-btn:active{transform:translateY(-2px) scale(.98)}.start-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.start-btn.loading{pointer-events:none}.start-btn.loading:after{content:"";position:absolute;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;margin-left:10px}@keyframes spin{to{transform:rotate(360deg)}}.puzzle-content{display:flex;gap:20px;justify-content:center;align-items:flex-start}.back-btn{padding:10px 20px;background:linear-gradient(135deg,#74640a,#764ba2);border:none;border-radius:10px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #667eea4d}.back-btn:hover{background:linear-gradient(135deg,#5568d3,#6a3f8f);color:#fff;transform:translate(-3px);box-shadow:0 6px 16px #667eea66}.music-toggle-btn{padding:10px 15px;background:#ffffffe6;border:2px solid #74640a;border-radius:10px;cursor:pointer;font-size:1.2rem;transition:all .3s ease;box-shadow:0 2px 8px #0000001a;display:flex;align-items:center;justify-content:center;min-width:50px}.music-toggle-btn:hover{background:#74640a;transform:scale(1.05);box-shadow:0 4px 12px #667eea4d}.music-toggle-btn:active{transform:scale(.95)}.mascot{position:fixed;bottom:30px;right:30px;display:flex;flex-direction:column;align-items:center;animation:float 3s ease-in-out infinite;z-index:100}.mascot-avatar{font-size:4rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.mascot-speech{background:#fff;padding:10px 20px;border-radius:20px;margin-top:10px;font-size:1.1rem;box-shadow:0 4px 12px #0000001a;position:relative}.mascot-speech:before{content:"";position:absolute;top:-10px;right:30px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid white}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.loading-spinner{width:60px;height:60px;border:5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}.toast{position:fixed;top:20px;right:20px;padding:16px 24px;border-radius:12px;color:#fff;font-weight:600;box-shadow:0 4px 20px #0003;animation:slideInRight .3s ease-out;z-index:1001;max-width:400px}.toast.success{background:linear-gradient(135deg,#ffb347,#74640a)}.toast.error{background:linear-gradient(135deg,#ef4444,#dc2626)}.toast.warning{background:linear-gradient(135deg,#f59e0b,#d97706)}@keyframes slideInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@media (min-width: 1920px){.puzzle-setup,.puzzle-page{padding:40px}.setup-header h1,.puzzle-header h1{font-size:4rem}.back-btn,.music-toggle-btn{font-size:2rem!important;padding:20px 40px!important;border-radius:16px!important}.setup-container{max-width:1600px}.setup-card{padding:50px;border-radius:30px}.setup-card h2{font-size:2.8rem;margin-bottom:35px}.info-banner{font-size:1.8rem;padding:25px 40px;border-radius:20px}.config-list{gap:30px;padding:15px 10px 35px}.config-item{min-width:320px;max-width:320px;border-width:4px;border-radius:18px}.config-item img{height:220px}.config-info{padding:20px}.config-info h3{font-size:1.6rem;margin-bottom:12px}.difficulty-badge{font-size:1.2rem;padding:8px 18px}.difficulty-buttons{gap:25px}.difficulty-btn{padding:35px 30px!important;border-radius:20px!important}.difficulty-icon{font-size:4.5rem!important;margin-bottom:15px!important}.difficulty-name{font-size:1.8rem!important}.difficulty-desc{font-size:1.2rem!important}.upload-placeholder .upload-icon{font-size:6rem!important}.upload-placeholder .upload-text{font-size:2rem!important}.upload-placeholder .upload-hint{font-size:1.4rem!important}.preview-image{max-height:500px!important}.start-btn{font-size:2rem!important;padding:25px 60px!important;border-radius:20px!important}.divider{font-size:1.6rem;margin:50px 0}.toast{font-size:1.6rem;padding:25px 40px;border-radius:18px;top:40px;right:40px;max-width:600px}.mascot{bottom:60px;right:60px}.mascot-avatar{font-size:7rem}.mascot-speech{font-size:2rem;padding:20px 35px;border-radius:30px}.mascot-speech:before{top:-15px;right:40px;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:15px solid white}}@media (min-width: 1600px) and (max-width: 1919px){.setup-header h1,.puzzle-header h1{font-size:3rem}.back-btn,.music-toggle-btn{font-size:1.5rem!important;padding:16px 32px!important}.setup-card{padding:40px}.setup-card h2{font-size:2.2rem}.config-item{min-width:260px;max-width:260px}.config-item img{height:180px}.mascot-avatar{font-size:5rem}.mascot-speech{font-size:1.4rem}}@media (max-width: 768px){.setup-container{padding:0 10px}.difficulty-buttons{grid-template-columns:1fr}.config-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.setup-card{padding:20px}.setup-card h2{font-size:1.4rem}.toast{left:20px;right:20px;max-width:none}.mascot{bottom:20px;right:20px}.mascot-avatar{font-size:3rem}.mascot-speech{font-size:.9rem;padding:8px 15px}}.puzzle-setup .difficulty-buttons .difficulty-btn.active,.puzzle-page .difficulty-buttons .difficulty-btn.active,.puzzle-setup .difficulty-btn.active .difficulty-name,.puzzle-setup .difficulty-btn.active .difficulty-desc,.puzzle-setup .difficulty-btn.active .difficulty-icon,.puzzle-page .difficulty-btn.active .difficulty-name,.puzzle-page .difficulty-btn.active .difficulty-desc,.puzzle-page .difficulty-btn.active .difficulty-icon{color:#000!important}.puzzle-setup .difficulty-buttons .difficulty-btn.active:focus,.puzzle-setup .difficulty-buttons .difficulty-btn.active:active,.puzzle-page .difficulty-buttons .difficulty-btn.active:focus,.puzzle-page .difficulty-buttons .difficulty-btn.active:active{color:#000!important}.difficulty-btn .difficulty-name,.difficulty-btn .difficulty-desc,.difficulty-btn .difficulty-icon,.difficulty-btn.active .difficulty-name,.difficulty-btn.active .difficulty-desc,.difficulty-btn.active .difficulty-icon{color:#000!important;-webkit-text-fill-color:#000!important;mix-blend-mode:normal!important;background:transparent!important;opacity:1!important;visibility:visible!important;text-shadow:none!important}.difficulty-btn:after,.difficulty-btn:before,.difficulty-btn .difficulty-name:after,.difficulty-btn .difficulty-name:before{background:transparent!important;display:none!important}@media (max-width: 480px){.config-list{grid-template-columns:1fr}.difficulty-icon{font-size:2rem}.difficulty-name{font-size:1.2rem}}.activity-form{background:#fff;padding:30px;border-radius:20px;margin-bottom:25px;box-shadow:0 8px 32px #0000001a}.form-title{text-align:center;color:#333;font-size:2rem;margin:0 0 25px;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.action-buttons{display:flex;gap:20px;justify-content:center;margin-top:25px;max-width:1000px;margin-left:auto;margin-right:auto;width:100%}.start-btn{background:linear-gradient(135deg,#74640a,#764ba2)}.start-btn:hover{background:linear-gradient(135deg,#5568d3,#6d3d91)}.action-btn.disabled{opacity:.5;cursor:not-allowed;transform:none}.action-btn.disabled:hover{transform:none;box-shadow:0 4px 15px #0003}.modal-content{background:#fff;padding:30px;border-radius:20px;max-width:700px;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;position:relative;animation:slideUp .3s ease}.activity-item{background:#f9f9f9;padding:20px;border-radius:12px;cursor:pointer;transition:all .3s ease;border:2px solid #e0e0e0;display:flex;gap:15px;align-items:flex-start;position:relative;flex-wrap:nowrap}.activity-thumbnail{flex-shrink:0;width:120px;height:120px;border-radius:8px;overflow:hidden;border:2px solid #ddd}.activity-thumbnail img{width:100%;height:100%;object-fit:cover}.activity-info{flex:1}@media (max-width: 600px){.form-title{font-size:1.5rem}.action-buttons{flex-direction:column}.action-btn{height:auto;padding:15px 10px;min-height:50px}.modal-content{max-width:90%;max-height:90vh;padding:20px}.modal-content h2{font-size:1.4rem}.activity-item{flex-direction:column;gap:10px}.activity-thumbnail{width:100%;height:150px}.activity-info h3{font-size:1.1rem}.activity-info p{font-size:.9rem}}.score-btn:hover{border-color:#74640a;transform:scale(1.1);box-shadow:0 4px 12px #00000014}.score-btn.active{background:linear-gradient(135deg,#74640a,#764ba2);border-color:#74640a;color:#fff;transform:scale(1.15);box-shadow:0 4px 15px #0000001f}.eval-btn{background:linear-gradient(135deg,#74640a,#764ba2)}.eval-btn:hover{background:linear-gradient(135deg,#5568d3,#65408b);transform:translateY(-2px)}@media (max-width: 768px){.evaluation-content{padding:20px;max-height:85vh}.score-selector{gap:8px}.score-btn{width:45px;height:45px;font-size:1.1rem}.average-score{font-size:1.1rem;padding:15px}.average-score .score-value{font-size:1.6rem}.evaluation-actions{flex-direction:column}.btn-export-pdf,.btn-close-eval{width:100%}}.category-setup{min-height:100vh;background:linear-gradient(135deg,#ffd6e8,#ffe5b4);padding:20px}.setup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.setup-header h1{font-size:2.5rem;color:#333;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.back-btn{background:linear-gradient(135deg,#74640a,#ffc75f);border:none;padding:12px 24px;border-radius:12px;font-size:1.2rem;font-weight:600;color:#fff;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #0000001a}.back-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000026}.setup-container{max-width:1100px;margin:0 auto}.setup-card{background:#fff;padding:30px;border-radius:20px;margin-bottom:25px;box-shadow:0 8px 32px #0000001a}.setup-card,.preview-category-card,.modal-content{background-color:#fff!important;mix-blend-mode:normal!important;isolation:isolate!important}.play-category-page .setup-card,.play-category-page .setup-card *,.play-category-page .setup-card:before,.play-category-page .setup-card:after,.play-category-page .preview-category-card,.play-category-page .preview-category-card *,.play-category-page .preview-category-card:before,.play-category-page .preview-category-card:after,.play-category-page .modal-content,.play-category-page .modal-content *,.play-category-page .modal-content:before,.play-category-page .modal-content:after{background-color:#fff!important;background-image:none!important;background-blend-mode:normal!important;mix-blend-mode:normal!important;isolation:isolate!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}.category-setup .setup-card,.category-setup .setup-card *,.category-setup .setup-card:before,.category-setup .setup-card:after,.category-setup .preview-category-card,.category-setup .preview-category-card *,.category-setup .preview-category-card:before,.category-setup .preview-category-card:after,.category-setup .modal-content,.category-setup .modal-content *,.category-setup .modal-content:before,.category-setup .modal-content:after{background-color:#fff!important;background-image:none!important;background-blend-mode:normal!important;mix-blend-mode:normal!important;isolation:isolate!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}.category-setup .preview-category-card img,.category-setup .draggable-item img,.category-setup .placed-item img,.category-setup .preview-image,.play-category-page .preview-category-card img,.play-category-page .draggable-item img,.play-category-page .placed-item img{background-color:#fff!important;padding:6px!important;border-radius:6px!important}.info-banner{background:linear-gradient(135deg,#ffb347,#74640a);color:#fff;padding:15px 25px;border-radius:15px;text-align:center;font-size:1.1rem;font-weight:700;margin-bottom:20px;box-shadow:0 4px 15px #11998e4d}.setup-card{background:#fff;border-radius:20px;padding:30px;margin-bottom:30px;box-shadow:0 8px 32px #0000001a}.setup-card h2{font-size:1.8rem;color:#333;margin:0 0 20px;text-align:center}.no-data-message{text-align:center;padding:40px 20px}.no-data-icon{font-size:5rem;margin-bottom:20px}.no-data-message h2{font-size:2rem;color:#333;margin:0 0 10px}.no-data-message p{font-size:1.1rem;color:#666;margin:8px 0}.instructions{display:flex;flex-direction:column;gap:20px}.instruction-item{display:flex;align-items:center;gap:20px;padding:15px;background:#f8f9fa;border-radius:12px}.step-number{flex-shrink:0;width:40px;height:40px;background:linear-gradient(135deg,#74640a,#764ba2);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700}.instruction-item p{font-size:1.1rem;color:#333;margin:0}.preview-categories{margin-bottom:30px}.preview-categories h3{font-size:1.5rem;color:#333;margin:0 0 15px;text-align:center}.preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}.preview-category-card{background:#fff;border:2px solid #e9ecef;border-left-width:6px;border-radius:12px;padding:15px 20px;display:flex;align-items:center;gap:12px;transition:all .3s ease;position:relative}.preview-category-card:hover{transform:translate(5px);box-shadow:0 4px 12px #0000001a}.preview-color-dot{width:20px;height:20px;border-radius:50%;flex-shrink:0}.preview-category-card span{font-size:1.1rem;font-weight:600;color:#333}.has-bg-indicator{position:absolute;top:8px;right:8px;font-size:1.2rem;opacity:.7}.start-btn{width:100%;background:linear-gradient(135deg,#74640a,#764ba2);border:none;padding:18px 32px;border-radius:16px;font-size:1.5rem;font-weight:700;color:#fff;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 24px #667eea4d}.start-btn:hover{transform:translateY(-3px);box-shadow:0 12px 32px #667eea66}.mascot{position:fixed;bottom:30px;right:30px;display:flex;flex-direction:column;align-items:center;animation:float 3s ease-in-out infinite}.mascot-avatar{font-size:4rem;margin-bottom:10px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.mascot-speech{background:#fff;padding:12px 20px;border-radius:20px;box-shadow:0 4px 12px #00000026;position:relative;font-weight:600;color:#333}.mascot-speech:before{content:"";position:absolute;top:-8px;right:40px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid white}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.play-category-page{min-height:100vh;background:linear-gradient(135deg,#a8edea,#fed6e3);padding:20px}.category-game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:15px}.header-left{display:flex;align-items:center;gap:20px}.category-game-header h1{font-size:2.5rem;color:#333;text-shadow:2px 2px 4px rgba(0,0,0,.1);margin:0}.score-display{background:#fff;padding:10px 20px;border-radius:12px;font-size:1.3rem;font-weight:600;color:#333;box-shadow:0 4px 12px #0000001a}.score-number{color:#74640a;font-size:1.5rem;font-weight:700}.header-actions{display:flex;gap:10px}.music-btn{background:linear-gradient(135deg,#4caf50,#45a049);border:none;padding:12px 20px;border-radius:12px;font-size:1.5rem;color:#fff;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #0000001a}.music-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #4caf504d}.game-layout{display:grid;grid-template-columns:1fr;gap:20px;grid-template-rows:auto auto;max-width:1200px;margin:0 auto}@media (max-width: 1200px){.game-layout{grid-template-columns:1fr}}.categories-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.category-zone{background:#fff;border:3px dashed #e9ecef;border-radius:16px;overflow:hidden;transition:all .3s ease;min-height:300px;display:flex;flex-direction:column;cursor:pointer}.category-zone.drag-over{border-style:solid;box-shadow:0 8px 32px #667eea4d;transform:scale(1.02)}.category-zone.tap-target{border-color:#74640a;border-style:solid;box-shadow:0 0 0 3px #667eea40,0 8px 32px #667eea33}.category-zone-header{padding:15px 20px;color:#fff;display:flex;justify-content:space-between;align-items:center}.category-zone-header h3{font-size:1.3rem;margin:0}.item-count{background:#ffffff4d;padding:4px 12px;border-radius:12px;font-size:.9rem;font-weight:600}.category-zone-content{flex:1;padding:15px;background:#fff}.zone-empty{text-align:center;padding:40px 20px;color:#999;font-size:1.1rem}.zone-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}.items-tray{background:#fff;border-radius:16px;padding:20px;box-shadow:0 8px 32px #0000001a;max-height:auto;overflow-y:visible}.items-tray h3{font-size:1.5rem;color:#333;margin:0 0 20px;padding-bottom:15px;border-bottom:2px solid #f0f0f0}.tray-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}.tray-empty{text-align:center;padding:40px 20px;color:#28a745;font-size:1.1rem;font-weight:600}.draggable-item{background:#fff;border:2px solid #e9ecef;border-radius:12px;padding:10px;cursor:grab;transition:all .3s ease;text-align:center}.draggable-item:hover{transform:translateY(-5px);box-shadow:0 6px 16px #00000026;border-color:#74640a}.draggable-item.dragging{opacity:.5;cursor:grabbing}.draggable-item.selected{border-color:#48bb78;border-width:3px;box-shadow:0 0 0 3px #48bb7840,0 6px 16px #48bb7833}.draggable-item img{width:100%;height:45px;object-fit:contain;object-position:center;border-radius:6px;margin-bottom:6px;background:#fff;padding:2px}.item-no-image{width:100%;height:50px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;background:#f8f9fa;border-radius:8px;margin-bottom:8px;opacity:.3}.item-name{display:block;font-size:.9rem;font-weight:600;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.placed-item{position:relative;background:#fff;border:2px solid #28a745;border-radius:12px;padding:10px;cursor:grab;transition:all .3s ease;text-align:center}.placed-item.dragging{opacity:.5;cursor:grabbing}.placed-item.incorrect{border-color:#dc3545;background:#fff5f5}.placed-item:hover{transform:scale(1.05);box-shadow:0 4px 12px #00000026}.placed-item:hover .remove-btn{opacity:1}.placed-item img{width:100%;height:70px;object-fit:cover;border-radius:8px;margin-bottom:8px}.remove-btn{position:absolute;top:-8px;left:-8px;width:24px;height:24px;background:#ef4444;color:#fff;border:2px solid white;border-radius:50%;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s ease;z-index:10;line-height:1;padding:0}.remove-btn:hover{background:#dc2626;transform:scale(1.2)}.correctness-indicator{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}.placed-item.correct .correctness-indicator{background:#28a745;color:#fff}.placed-item.incorrect .correctness-indicator{background:#dc3545;color:#fff}.completion-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.completion-modal{background:#fff;border-radius:24px;padding:50px 60px;text-align:center;box-shadow:0 20px 60px #0000004d;animation:bounceIn .5s ease;max-width:500px;width:90%}.completion-icon{font-size:6rem;margin-bottom:20px;animation:rotate .5s ease}.completion-modal h2{font-size:2.5rem;color:#333;margin:0 0 15px;font-weight:700}.completion-text{font-size:1.2rem;color:#666;margin:0 0 30px}.completion-score{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:30px;padding:20px;background:linear-gradient(135deg,#74640a15,#764ba215);border-radius:16px}.score-label{font-size:1.1rem;color:#666;margin-bottom:8px}.score-value{font-size:4rem;font-weight:700;color:#74640a;line-height:1;margin:5px 0}.score-unit{font-size:1rem;color:#999}.completion-actions{display:flex;gap:15px;justify-content:center}.completion-buttons{display:flex;gap:15px;justify-content:center;margin-top:20px}.play-again-btn,.evaluate-btn,.back-home-btn{border:none;padding:15px 30px;border-radius:12px;font-size:1.2rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #00000026;flex:1}.play-again-btn{background:linear-gradient(135deg,#74640a,#ffc75f);color:#fff}.evaluate-btn{background:linear-gradient(135deg,#a78bfa,#8b5cf6);color:#fff}.back-home-btn{background:linear-gradient(135deg,#00d2fc,#00b4d8);color:#fff}.play-again-btn:hover,.evaluate-btn:hover,.back-home-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000040}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes bounceIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.activity-form{background:#fff;padding:35px;border-radius:20px;margin-bottom:25px;box-shadow:0 8px 32px #0000001a}.form-title{text-align:center;color:#333;font-size:2rem;margin:0 0 30px;text-shadow:2px 2px 4px rgba(0,0,0,.1);padding-bottom:15px;border-bottom:3px solid #f0f0f0}.form-row{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.form-field{display:flex;flex-direction:column}.form-field label{font-weight:600;color:#333;margin-bottom:8px;font-size:1rem}.form-field input{padding:12px 15px;border:2px solid #e0e0e0;border-radius:10px;font-size:1rem;transition:all .3s ease;background:#f9f9f9}.form-field input:focus{outline:none;border-color:#74640a;background:#fff;box-shadow:0 0 0 3px #ff6b9d1a}.form-field input::placeholder{color:#999}.tester-section-inline{margin-top:25px;padding-top:25px;border-top:2px solid #f0f0f0}.form-field-tester{display:flex;flex-direction:column;max-width:400px;margin:0 auto}.form-field-tester label{font-weight:600;color:#333;margin-bottom:8px;font-size:1rem;text-align:center}.form-field-tester input{padding:12px 15px;border:2px solid #e0e0e0;border-radius:10px;font-size:1rem;transition:all .3s ease;background:#f9f9f9;text-align:center}.form-field-tester input:focus{outline:none;border-color:#74640a;background:#fff;box-shadow:0 0 0 3px #ff6b9d1a}.form-field-tester input::placeholder{color:#999}.action-buttons{display:flex;gap:20px;justify-content:center;max-width:1000px;margin:30px auto;width:100%}.action-btn{flex:1;padding:18px 20px;border:none;border-radius:12px;font-size:1.25rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003;color:#fff;text-align:center;min-width:0;height:65px;display:flex;align-items:center;justify-content:center}.action-btn:hover{transform:translateY(-3px);box-shadow:0 6px 25px #0000004d}.action-btn:active{transform:translateY(-1px)}.action-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.action-btn:disabled:hover{transform:none;box-shadow:0 4px 15px #0003}.start-btn-alt{background:linear-gradient(135deg,#74640a,#764ba2)}.start-btn-alt:hover{background:linear-gradient(135deg,#5568d3,#6d3d91)}.save-btn{background:linear-gradient(135deg,#f093fb,#f5576c)}.save-btn:hover{background:linear-gradient(135deg,#ec7eee,#f44055)}.select-btn{background:linear-gradient(135deg,#4facfe,#00f2fe)}.select-btn:hover{background:linear-gradient(135deg,#3d9aed,#00e0ed)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.modal-content{background:#fff;padding:30px;border-radius:20px;max-width:700px;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;position:relative;animation:bounceIn .3s ease}.modal-content h2{margin-top:0;color:#333;text-align:center;font-size:1.8rem}.close-btn{position:absolute;top:15px;right:15px;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#999;transition:color .3s}.close-btn:hover{color:#333}.activity-list{display:grid;gap:15px}.activity-item{background:#f9f9f9;padding:20px;border-radius:12px;cursor:pointer;transition:all .3s ease;border:2px solid #e0e0e0;display:flex;gap:15px;align-items:flex-start;flex-wrap:nowrap}.activity-item:hover{background:#f0f0f0;border-color:#74640a;transform:translate(10px)}.activity-info h3{margin:0 0 10px;color:#333;font-size:1.2rem}.activity-info p{margin:5px 0;color:#666;font-size:.95rem}.activity-actions{display:flex;gap:12px;margin-left:auto;flex-shrink:0;align-items:center}.edit-activity-btn,.delete-activity-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:8px 12px;border-radius:8px;transition:all .3s ease;opacity:.6;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.edit-activity-btn:hover{background:#667eea1a;opacity:1;transform:scale(1.1)}.delete-activity-btn:hover{background:#ef44441a;opacity:1;transform:scale(1.1)}.cancel-btn{background:linear-gradient(135deg,#ff4757,#ff6348);color:#fff;border:none;padding:15px 20px;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #ff475733}.cancel-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ff47574d}.no-data{text-align:center;color:#999;padding:30px 20px;font-size:1.1rem}@media (max-width: 1024px){.form-row{grid-template-columns:repeat(2,1fr)}.action-buttons{gap:15px}.action-btn{font-size:1.1rem;padding:15px;height:60px}}@media (max-width: 768px){.form-row{grid-template-columns:1fr}.activity-form{padding:20px}.action-buttons{gap:10px;margin-bottom:20px}.action-btn{font-size:1rem;padding:12px 10px;height:55px}}@media (max-width: 600px){.form-title{font-size:1.5rem}.action-buttons{flex-direction:column}.action-btn{height:auto;padding:15px 10px;min-height:50px}.modal-content{max-width:90%;max-height:90vh;padding:20px}.modal-content h2{font-size:1.4rem}}.game-data-section{margin-top:25px;padding-top:25px;border-top:2px solid #f0f0f0}.game-data-section h3{margin:0 0 15px;color:#555;font-size:1.3rem;font-weight:600}.add-data-btn{padding:8px 16px;background:linear-gradient(135deg,#74640a,#764ba2);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease}.add-data-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.add-data-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.add-form{display:flex;flex-direction:column;gap:15px;margin-bottom:15px;padding:20px;background:#f9f9f9;border-radius:10px;border:2px dashed #ddd}.form-input{flex:1;padding:10px 15px;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:all .3s ease}.form-input:focus{outline:none;border-color:#74640a;box-shadow:0 0 0 3px #667eea1a}.form-select{flex:1;padding:10px 15px;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;background:#fff;cursor:pointer;transition:all .3s ease}.form-select:focus{outline:none;border-color:#74640a;box-shadow:0 0 0 3px #667eea1a}.color-input{width:60px;height:44px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .3s ease}.color-input:hover{border-color:#74640a}.confirm-btn{padding:10px 20px;background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.confirm-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf504d}.data-list{display:flex;flex-direction:column;gap:10px}.data-item{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;background:#fff;border:2px solid #e0e0e0;border-radius:10px;transition:all .3s ease;gap:15px;flex-wrap:nowrap}.data-item:hover{border-color:#74640a;transform:translate(5px);box-shadow:0 2px 8px #0000001a}.item-actions{display:flex;gap:10px;margin-left:auto;flex-shrink:0;align-items:center}.edit-btn,.delete-btn{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:6px 12px;border-radius:6px;transition:all .3s ease;opacity:.6;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.edit-btn:hover{background:#667eea1a;opacity:1;transform:scale(1.1)}.delete-btn:hover{background:#ef44441a;opacity:1;transform:scale(1.1)}.empty-message{text-align:center;color:#999;padding:20px;font-style:italic}.image-upload-wrapper{display:flex;align-items:center;gap:10px}.upload-image-btn{padding:10px 20px;background:linear-gradient(135deg,#74640a,#764ba2);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.upload-image-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.image-preview-small{width:44px;height:44px;border-radius:8px;overflow:hidden;border:2px solid #74640a}.image-upload-section{display:flex;flex-direction:column;gap:10px}.upload-label-small{display:block;cursor:pointer;transition:all .3s ease}.upload-label-small:hover{opacity:.8}.image-preview-small{position:relative;width:100%;height:120px;border-radius:8px;overflow:hidden;border:2px solid #74640a}.image-preview-small img{width:100%;height:100%;object-fit:cover}.image-preview-small .change-text{position:absolute;bottom:0;left:0;right:0;background:#000000b3;color:#fff;padding:5px;text-align:center;font-size:.85rem;opacity:0;transition:opacity .3s ease}.image-preview-small:hover .change-text{opacity:1}.upload-placeholder-small{display:flex;align-items:center;justify-content:center;height:80px;background:#f0f0f0;border:2px dashed #ccc;border-radius:8px;color:#666;font-size:.95rem;transition:all .3s ease}.upload-placeholder-small:hover{background:#e8e8e8;border-color:#74640a}.remove-image-btn{padding:8px 16px;background:linear-gradient(135deg,#ff4757,#ff6348);color:#fff;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease}.remove-image-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ff47574d}.category-thumb{width:40px;height:40px;border-radius:6px;overflow:hidden;border:2px solid #e0e0e0;flex-shrink:0}.category-thumb img{width:100%;height:100%;object-fit:cover}.evaluation-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:2000;padding:20px;animation:fadeIn .3s ease}.evaluation-content{background:#fff;padding:30px;border-radius:20px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0000004d;animation:slideUp .3s ease}.evaluation-grid{display:flex;flex-direction:column;gap:20px;margin-bottom:25px}.evaluation-item{display:flex;flex-direction:column;gap:10px}.evaluation-item label{font-weight:600;color:#333;font-size:1.1rem}.score-selector{display:flex;gap:10px;justify-content:center}.score-btn{width:50px;height:50px;border:2px solid #e0e0e0;background:#fff;border-radius:10px;font-size:1.3rem;font-weight:600;cursor:pointer;transition:all .3s ease;color:#666}.score-btn:hover{border-color:#74640a;transform:scale(1.1);box-shadow:0 4px 12px #ff6b9d33}.score-btn.active{background:linear-gradient(135deg,#74640a,#ffc75f);border-color:#74640a;color:#fff;transform:scale(1.15);box-shadow:0 4px 15px #ff6b9d66}.average-score{background:linear-gradient(135deg,#ffe5b4,#ffd6e8);padding:20px;border-radius:15px;text-align:center;font-size:1.3rem;font-weight:600;color:#333;margin-bottom:20px}.average-score .score-value{font-size:2rem;color:#74640a;font-weight:700;margin-left:10px}.evaluation-actions{display:flex;gap:15px}.btn-export-pdf,.btn-close-eval{flex:1;padding:15px 25px;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #0000001a}.btn-export-pdf{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.btn-export-pdf:hover{transform:translateY(-2px);box-shadow:0 6px 16px #4caf504d}.btn-close-eval{background:linear-gradient(135deg,#95a5a6,#7f8c8d);color:#fff}.btn-close-eval:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000026}.action-buttons{display:flex;gap:15px;margin-top:20px}.eval-btn{flex:1;background:linear-gradient(135deg,#74640a,#ffc75f);border:none;padding:15px 25px;border-radius:12px;font-size:1.2rem;font-weight:600;color:#fff;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #0000001a}.eval-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ff6b9d4d}@media (max-width: 768px){.evaluation-content{padding:20px;max-height:85vh}.score-selector{gap:8px}.score-btn{width:45px;height:45px;font-size:1.1rem}.average-score{font-size:1.1rem;padding:15px}.average-score .score-value{font-size:1.6rem}.evaluation-actions{flex-direction:column}.btn-export-pdf,.btn-close-eval{width:100%}.action-buttons{flex-direction:column}.eval-btn{width:100%}}.play-category-page .setup-card,.play-category-page .preview-category-card,.play-category-page .category-zone,.play-category-page .category-zone-content,.play-category-page .instruction-item,.play-category-page .score-display,.play-category-page .evaluation-content{background:#fff!important;color:#222!important}.play-category-page .preview-category-card,.play-category-page .category-zone,.play-category-page .evaluation-content{border-color:#e9ecef!important;box-shadow:0 8px 24px #0000000f!important}.app-container{min-height:100vh;background:linear-gradient(to bottom,#ebd09e,#251f03)}.home-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}.home-title{font-size:3.5rem;color:#fff;text-align:center;margin-bottom:60px;text-shadow:2px 2px 8px rgba(0,0,0,.2);animation:fadeIn .5s ease}.game-cards{display:flex;gap:40px;flex-wrap:wrap;justify-content:center;max-width:1200px}.game-card{background:#fff;border-radius:24px;padding:40px;width:320px;text-align:center;box-shadow:0 8px 32px #00000026;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;text-decoration:none;color:inherit}.game-card:hover{transform:translateY(-8px);box-shadow:0 12px 48px #0003}.game-card.disabled{opacity:.6;cursor:not-allowed;background:#f5f5f5;position:relative}.game-card.disabled:hover{transform:none;box-shadow:0 8px 32px #00000026}.game-card.disabled .game-icon{filter:grayscale(100%)}.game-card.disabled h2,.game-card.disabled p{color:#999}.unavailable-badge{margin-top:16px;padding:8px 16px;background:#ff6b6b;color:#fff;border-radius:8px;font-size:.9rem;font-weight:600;display:inline-block}.game-icon{font-size:5rem;margin-bottom:20px}.game-card h2{font-size:1.8rem;color:#333;margin-bottom:12px}.game-card p{color:#666;font-size:1.1rem;line-height:1.6}:root{--page-bg-top: #ebd09e;--page-bg-bottom: #251f03;--panel-gradient-start: #f8f6f0;--panel-gradient-mid: #fffef8;--panel-gradient-end: #f5f0e5;--panel-border: #74640a;--panel-shadow: rgba(255,230,160,.55)}html,body,#root{height:100%;font-family:Roboto,Helvetica,Arial,sans-serif}body{background:linear-gradient(to bottom,var(--page-bg-top) 0%,var(--page-bg-bottom) 100%)!important}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,var(--page-bg-top) 0%,var(--page-bg-bottom) 100%);z-index:-1}.page-theme{min-height:100vh;color:#fff}.page-panel{background:linear-gradient(180deg,var(--panel-gradient-start) 0%,var(--panel-gradient-mid) 45%,var(--panel-gradient-mid) 55%,var(--panel-gradient-end) 100%);color:#000;border:6px solid var(--panel-border);border-radius:12px;box-shadow:1px 1px #000,-8px 6px #3b3305,0 0 20px var(--panel-shadow);padding:18px}.neon-btn{background:linear-gradient(180deg,var(--panel-gradient-start) 0%,var(--panel-gradient-mid) 45%,var(--panel-gradient-mid) 55%,var(--panel-gradient-end) 100%);color:#000;border:6px solid var(--panel-border);border-radius:9999px;box-shadow:1px 1px #000,-8px 6px #3b3305,0 0 20px var(--panel-shadow);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.page-theme h1,.page-theme h2,.page-theme h3{color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.app-container{background:linear-gradient(to bottom,var(--page-bg-top) 0%,var(--page-bg-bottom) 100%)!important}.app-container:before{background:none!important}.coloring-page,.coloring-setup,.puzzle-page,.puzzle-setup,.category-setup{background:linear-gradient(to bottom,var(--page-bg-top) 0%,var(--page-bg-bottom) 100%)!important}.coloring-container,.setup-container,.setup-card{background:transparent!important}.action-btn,.start-btn,.save-btn,.select-btn,.back-btn,.btn-export-pdf,.export-pdf-btn,.cancel-eval-btn,.confirm-btn{background:linear-gradient(180deg,var(--panel-gradient-start) 0%,var(--panel-gradient-mid) 45%,var(--panel-gradient-mid) 55%,var(--panel-gradient-end) 100%)!important;color:#000!important;border:6px solid var(--panel-border)!important;border-radius:12px!important;box-shadow:1px 1px #000,-8px 6px #3b3305,0 0 20px var(--panel-shadow)!important;font-weight:700!important;padding:12px 22px!important;min-height:48px!important;cursor:pointer!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;transition:all .3s ease!important}.action-btn:hover,.start-btn:hover,.save-btn:hover,.select-btn:hover,.back-btn:hover,.btn-export-pdf:hover,.export-pdf-btn:hover,.cancel-eval-btn:hover,.confirm-btn:hover{transform:translateY(-2px)!important;box-shadow:2px 2px #000,-10px 8px #3b3305,0 0 25px #ffe6a0bf!important}body{margin:0;padding:0;font-family:Noto Sans Thai,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(135deg,#74640a,#ffc75f);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation;overflow-x:hidden}*{box-sizing:border-box}button{font-family:Noto Sans Thai,sans-serif;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.touch-target{min-width:48px;min-height:48px}.fade-in{animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.bounce{animation:bounce .5s ease}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.no-select{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}