@import"https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600;1,700&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Noto Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:#0f0f23;color:#fff;overflow:auto;min-height:100vh;font-display:swap}.hidden{display:none!important}.mode-selection{position:fixed;top:0;left:0;width:100%;height:100vh;background:linear-gradient(135deg,#0f3460,#16213e);z-index:1000;overflow-y:auto;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.mode-selection-content{text-align:center;max-width:600px;padding:40px 20px;width:100%;box-sizing:border-box;margin:auto;min-height:fit-content}.mode-selection h1{font-size:3rem;font-weight:900;margin-bottom:20px;color:#fff;text-shadow:0 4px 8px rgba(0,0,0,.3)}.mode-selection p{font-size:1.3rem;margin-bottom:15px;opacity:.9;line-height:1.4}.setup-instructions{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:15px;padding:25px;margin-bottom:35px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.setup-instructions h2{font-size:1.4rem;font-weight:600;margin-bottom:15px;color:#00b894}.setup-step{display:flex;align-items:center;margin-bottom:12px;font-size:1.1rem;opacity:.9}.setup-step-number{background:#00b894;color:#fff;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.9rem;margin-right:12px;flex-shrink:0}.setup-step:last-child{margin-bottom:0}.mode-buttons{display:flex;flex-direction:column;gap:20px;align-items:center;background:#4a90e21a;border:1px solid rgba(74,144,226,.2);border-radius:15px;padding:25px;position:relative}.mode-buttons:before{content:"STEP 2";position:absolute;top:-12px;left:20px;background:#4a90e2;color:#fff;padding:4px 12px;border-radius:12px;font-size:.8rem;font-weight:600;letter-spacing:.5px;transition:all .3s ease}.mode-buttons.step-completed:before{content:"STEP 2 ✓";background:#27ae60;transform:scale(1.05)}.mode-buttons.step-completed{border-color:#27ae6066;background:#27ae601a}.mode-buttons h3{font-size:1.4rem;margin-bottom:20px;color:#fff;opacity:.9;width:100%;text-align:center}.mode-select-btn{display:flex;flex-direction:column;align-items:center;padding:30px 40px;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:20px;color:#fff;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:280px;font-family:inherit;position:relative}.mode-select-btn.selected{background:#4a90e24d;border-color:#4a90e2;transform:scale(1.02)}.mode-select-btn.selected:after{content:"✓";position:absolute;top:10px;right:15px;background:#4a90e2;color:#fff;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}.mode-select-btn:hover{background:#fff3;border-color:#fff6;transform:translateY(-3px);box-shadow:0 8px 25px #0000004d}.mode-icon{font-size:3rem;margin-bottom:15px}.mode-title{font-size:1.5rem;font-weight:700;margin-bottom:8px}.mode-description{font-size:1rem;opacity:.8}.difficulty-selection{margin-bottom:40px;text-align:center;background:#00b8941a;border:1px solid rgba(0,184,148,.2);border-radius:15px;padding:25px;position:relative}.difficulty-selection:before{content:"STEP 1";position:absolute;top:-12px;left:20px;background:#00b894;color:#fff;padding:4px 12px;border-radius:12px;font-size:.8rem;font-weight:600;letter-spacing:.5px;transition:all .3s ease}.difficulty-selection.step-completed:before{content:"STEP 1 ✓";background:#27ae60;transform:scale(1.05)}.difficulty-selection.step-completed{border-color:#27ae6066;background:#27ae601a}.difficulty-selection h3{font-size:1.4rem;margin-bottom:20px;color:#fff;opacity:.9}.difficulty-buttons{display:flex;gap:15px;justify-content:center;margin-bottom:20px}.difficulty-btn{display:flex;flex-direction:column;align-items:center;padding:20px 25px;background:#ffffff0d;border:2px solid rgba(255,255,255,.2);border-radius:15px;color:#fff;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:140px;font-family:inherit;opacity:.7}.difficulty-btn.active{background:#00b89433;border-color:#00b894;opacity:1;transform:scale(1.05)}.difficulty-btn:hover{background:#ffffff26;border-color:#fff6;opacity:1;transform:translateY(-2px)}.difficulty-btn.active:hover{background:#00b8944d}.difficulty-icon{font-size:2rem;margin-bottom:10px}.difficulty-title{font-size:1.1rem;font-weight:700;margin-bottom:5px}.difficulty-description{font-size:.85rem;opacity:.8}.game-interface{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;background:#0f0f23}.top-toolbar{height:70px;background:linear-gradient(135deg,#16213e,#0f3460);display:flex;align-items:center;justify-content:space-between;padding:0 20px;box-shadow:0 2px 10px #0000004d;z-index:100}.toolbar-left{flex:1}.game-title{font-size:1.5rem;font-weight:900;color:#fff}.toolbar-center{flex:2;display:flex;justify-content:center}.scoreboard-toolbar{display:flex;gap:20px;align-items:center}.score-item-toolbar{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:16px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.2);transition:all .3s ease;position:relative;overflow:hidden;min-width:90px;justify-content:center}.score-item-toolbar:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);z-index:-1}.score-item-toolbar.correct-score{background:linear-gradient(135deg,#00b89433,#00cec926);border-color:#00b89466;box-shadow:0 0 20px #00b8941a}.score-item-toolbar.wrong-score{background:linear-gradient(135deg,#d6303133,#e8439326);border-color:#d6303166;box-shadow:0 0 20px #d630311a}.score-item-toolbar.remaining-score{background:linear-gradient(135deg,#74b9ff33,#a29bfe26);border-color:#74b9ff66;box-shadow:0 0 20px #74b9ff1a}.score-item-toolbar:hover{transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.score-item-toolbar.correct-score:hover{box-shadow:0 8px 25px #00b89440}.score-item-toolbar.wrong-score:hover{box-shadow:0 8px 25px #d6303140}.score-item-toolbar.remaining-score:hover{box-shadow:0 8px 25px #74b9ff40}.score-number-toolbar{font-size:1.4rem;font-weight:900;min-width:30px;text-align:center;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3);transition:all .3s ease}.score-label-toolbar{font-size:1.2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));transition:all .3s ease}@keyframes scorePulse{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.score-number-toolbar.updated{animation:scorePulse .6s ease}.toolbar-right{flex:1;display:flex;justify-content:flex-end}.game-controls{display:flex;gap:10px}.control-btn{width:45px;height:45px;border:none;border-radius:12px;background:#ffffff1a;color:#fff;font-size:1.2rem;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center}.control-btn:hover{background:#fff3;transform:translateY(-2px)}.control-btn.muted{background:#ffffff0d;color:#ffffff80}.map-area{flex:1;position:relative;overflow:hidden;background:#1a1a2e}#map-wrapper,#map-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}#map-wrapper svg,#map-container svg{width:100%;height:100%;max-width:100%;max-height:100%;transition:opacity .2s ease}#map-wrapper svg text,#map-container svg text{display:none}.map-overlay{position:absolute;top:20px;left:50%;transform:translate(-50%);text-align:center;z-index:10}.question-text{color:#fff;font-size:1.3rem;font-weight:700;text-align:left;margin-bottom:8px;text-shadow:0 2px 4px rgba(0,0,0,.3);letter-spacing:.5px;width:100%;padding-left:20px}.feedback-text{background:#000c;color:#fff;padding:10px 20px;border-radius:12px;font-size:1rem;font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}.feedback-text:empty,.feedback-text.hidden-feedback{display:none}.close-feedback{color:#f39c12}.retry-hint{background:#f1c40fe6!important;color:#2c3e50!important;border:2px solid #f39c12;font-weight:600;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1);opacity:.9}50%{transform:scale(1.02);opacity:1}to{transform:scale(1);opacity:.9}}.correct-feedback{color:#00b894;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.3)}.incorrect-feedback{color:#d63031;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.3)}.bottom-toolbar{height:120px;background:linear-gradient(135deg,#16213e,#0f3460);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px;box-shadow:0 -2px 10px #0000004d;z-index:100}.answer-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;padding:0 20px;width:100%}.option-btn{padding:15px 20px;font-size:1rem;font-weight:600;border:2px solid rgba(255,255,255,.3);border-radius:12px;background:#ffffff1a;color:#fff;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:inherit;text-align:center}.option-btn:hover:not(:disabled){background:#fff3;border-color:#ffffff80;transform:translateY(-2px)}.option-btn:disabled{cursor:not-allowed}.option-btn.correct{background:#00b894cc;border-color:#00b894}.option-btn.incorrect{background:#d63031cc;border-color:#d63031}.text-input-container{display:flex;align-items:center;gap:15px;padding:0 20px;width:100%}.text-answer-input{flex:1;padding:18px 24px;font-size:1.2rem;font-weight:600;border:2px solid rgba(255,255,255,.3);border-radius:12px;background:#ffffff1a;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:inherit;outline:none;transition:all .3s ease;text-align:left;min-height:54px}.text-answer-input::placeholder{color:#fff9}.text-answer-input:focus{border-color:#00b894;background:#ffffff26;box-shadow:0 0 0 3px #00b89433}.text-answer-input:disabled{opacity:.6;cursor:not-allowed}.submit-btn{padding:15px 30px;font-size:1.1rem;font-weight:700;border:none;border-radius:12px;background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff;cursor:pointer;transition:all .3s ease;font-family:inherit;box-shadow:0 4px 15px #0003}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.game-actions{flex:1;display:flex;justify-content:center;padding-left:20px}.action-btn{padding:15px 25px;font-size:1.1rem;font-weight:700;border:none;border-radius:15px;background:linear-gradient(135deg,#00b894,#00cec9);color:#fff;cursor:pointer;transition:all .3s ease;font-family:inherit;box-shadow:0 4px 15px #0003}.action-btn:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0000004d}.next-btn{background:linear-gradient(135deg,#74b9ff,#0984e3)}.play-again-btn{background:linear-gradient(135deg,#fdcb6e,#e17055)}@keyframes marchingAnts{0%{stroke-dashoffset:0}to{stroke-dashoffset:15}}.multi-colored-ants{stroke-dasharray:3,3,3,3,3,3;stroke:url(#multiColorPattern);animation:marchingAnts 1s linear infinite}.current-state{filter:drop-shadow(0 0 10px rgba(255,235,59,.8))}@media (max-width: 768px){.mode-selection h1{font-size:2.2rem}.mode-select-btn{min-width:250px;padding:25px 30px}.top-toolbar{height:60px;padding:0 15px}.game-title{font-size:1.2rem}.scoreboard-toolbar{gap:12px}.score-item-toolbar{padding:8px 14px;min-width:75px;gap:10px}.score-number-toolbar{font-size:1.1rem;min-width:25px}.score-label-toolbar{font-size:1rem}.control-btn{width:40px;height:40px;font-size:1rem}.bottom-toolbar{height:100px;flex-direction:column;padding:10px 15px}.answer-options{grid-template-columns:1fr;gap:10px;padding:0;margin-bottom:10px}.option-btn{padding:12px 16px;font-size:.95rem}.game-actions{padding-left:0}.action-btn{padding:12px 20px;font-size:1rem}.question-text{font-size:1.1rem;margin-bottom:6px}}@media (max-width: 480px){.mode-select-btn{min-width:220px;padding:20px 25px}.mode-icon{font-size:2.5rem}.mode-title{font-size:1.3rem}.top-toolbar{flex-direction:column;height:80px;padding:5px 10px}.toolbar-left,.toolbar-center,.toolbar-right{flex:none}.game-title{font-size:1rem;margin-bottom:5px}.scoreboard-toolbar{gap:8px;flex-wrap:wrap;justify-content:center}.score-item-toolbar{padding:6px 10px;min-width:65px;gap:6px;border-radius:12px}.score-number-toolbar{font-size:.95rem;min-width:20px}.score-label-toolbar{font-size:.9rem}.bottom-toolbar{height:140px;padding:10px}}.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease,visibility .3s ease}.modal.hidden{opacity:0;visibility:hidden;pointer-events:none}.modal-backdrop{position:absolute;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{position:relative;background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;max-width:480px;width:90%;max-height:90vh;overflow:hidden;transform:scale(.9);transition:transform .3s ease}.modal:not(.hidden) .modal-content{transform:scale(1)}.modal-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px 24px;display:flex;align-items:center;justify-content:space-between}.modal-header h2{margin:0;font-size:1.5rem;font-weight:600}.modal-close{background:none;border:none;color:#fff;font-size:1.8rem;cursor:pointer;padding:4px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease}.modal-close:hover{background-color:#fff3}.modal-body{padding:24px;text-align:center}.modal-score{font-size:1.8rem;font-weight:600;color:#333;margin-bottom:16px}.modal-message{font-size:1.1rem;color:#666;line-height:1.4;margin-bottom:24px}.modal-footer{padding:0 24px 24px;display:flex;gap:12px;justify-content:center}.modal-footer .action-btn{flex:1;max-width:150px}.action-btn.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none}.action-btn.primary:hover{background:linear-gradient(135deg,#5a6fd8,#6b4190);transform:translateY(-1px)}.action-btn.secondary{background:transparent;color:#666;border:2px solid #ddd}.action-btn.secondary:hover{background:#f5f5f5;border-color:#bbb;color:#333}@media (max-width: 600px){.modal-content{width:95%;margin:20px}.modal-header h2{font-size:1.3rem}.modal-score{font-size:1.5rem}.modal-footer{flex-direction:column}.modal-footer .action-btn{max-width:none}}
