:root{--primary: #6366f1;--primary-hover: #4f46e5;--secondary: #ec4899;--bg-dark: #0f172a;--text-main: #f8fafc;--text-muted: #94a3b8;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .3);--purple: #8b5cf6;--blue: #3b82f6;--green: #10b981;--orange: #f59e0b}*{margin:0;padding:0;box-sizing:border-box;font-family:Outfit,sans-serif}body{background-color:var(--bg-dark);color:var(--text-main);min-height:100vh;overflow-x:hidden;position:relative}.background-shapes{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;overflow:hidden}.shape{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;animation:float 20s infinite alternate ease-in-out}.shape-1{top:-10%;left:-10%;width:50vw;height:50vw;background:radial-gradient(circle,var(--primary),transparent 70%)}.shape-2{bottom:-10%;right:-10%;width:60vw;height:60vw;background:radial-gradient(circle,var(--secondary),transparent 70%);animation-delay:-5s}.shape-3{top:40%;left:60%;width:40vw;height:40vw;background:radial-gradient(circle,var(--purple),transparent 70%);animation-delay:-10s}@keyframes float{0%{transform:translate(0) scale(1)}50%{transform:translate(5%,10%) scale(1.1)}to{transform:translate(-5%,-10%) scale(.9)}}.glass-card{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:24px;box-shadow:var(--glass-shadow)}.page-container{min-height:100vh;display:none;opacity:0;transition:opacity .5s ease}.page-container.active{display:flex;flex-direction:column;opacity:1}#auth-container{justify-content:center;align-items:center;padding:20px}.view{width:100%;max-width:420px;padding:40px;display:none;flex-direction:column;gap:24px;animation:slideUp .5s ease forwards}.view.active{display:flex}.hidden{opacity:0;pointer-events:none}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.logo{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}.logo i{font-size:36px;color:var(--primary)}.logo h2{font-size:28px;font-weight:700;background:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}h3{font-size:24px;font-weight:600;text-align:center}.subtitle{text-align:center;color:var(--text-muted);font-size:14px;margin-top:-16px}.form{display:flex;flex-direction:column;gap:16px}.input-group{position:relative;display:flex;align-items:center}.input-group i{position:absolute;left:16px;color:var(--text-muted);font-size:20px}.input-group input{width:100%;padding:16px 16px 16px 48px;border-radius:12px;border:1px solid var(--glass-border);background:#0003;color:var(--text-main);font-size:15px;outline:none;transition:all .3s ease}.input-group input:focus{border-color:var(--primary);box-shadow:0 0 0 2px #6366f133}.input-group input::placeholder{color:var(--text-muted)}.form-options{display:flex;justify-content:space-between;align-items:center;font-size:14px}.remember{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--text-muted)}.forgot-password{color:var(--primary);text-decoration:none;font-weight:500}.btn{padding:16px;border-radius:12px;border:none;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.primary-btn{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;margin-top:8px;box-shadow:0 4px 15px #6366f166}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6366f199}.primary-btn:active{transform:translateY(0)}.toggle-view{text-align:center;font-size:14px;color:var(--text-muted);margin-top:8px}.toggle-view span{color:var(--primary);font-weight:600;cursor:pointer}.toggle-view span:hover{text-decoration:underline}.glass-nav{display:flex;justify-content:space-between;align-items:center;padding:16px 5%;background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--glass-border);position:sticky;top:0;z-index:10}.nav-logo{display:flex;align-items:center;gap:8px}.nav-logo i{font-size:28px;color:var(--primary)}.nav-logo h2{font-size:20px;font-weight:700}.nav-links{display:flex;gap:32px}.nav-link{color:var(--text-muted);text-decoration:none;font-weight:500;font-size:16px;cursor:pointer;transition:all .3s ease;padding:8px 16px;border-radius:12px}.nav-link:hover{color:var(--text-main);background:#ffffff0d}.nav-link.active{color:var(--primary);background:#6366f11a}.nav-profile{display:flex;align-items:center;gap:20px}.stats{display:flex;gap:16px}.stat-item{display:flex;align-items:center;gap:6px;background:#0003;padding:6px 12px;border-radius:20px;font-size:14px;font-weight:600}.text-orange{color:#ff8a65}.text-yellow{color:#ffd54f}.avatar{width:40px;height:40px;border-radius:50%;background:var(--primary);cursor:pointer;overflow:hidden;border:2px solid var(--glass-border);transition:transform .3s ease}.avatar:hover{transform:scale(1.1)}.avatar img{width:100%;height:100%;object-fit:cover}.logout-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#ff453a1a;color:#ff453a;border-radius:50%;cursor:pointer;transition:all .3s ease;border:1px solid rgba(255,69,58,.2)}.logout-btn:hover{background:#ff453a;color:#fff;transform:scale(1.1)}.setting-item{transition:all .3s ease}.setting-item:hover{transform:translate(10px);background:#ffffff14!important;border-color:var(--primary)}.dashboard-content{padding:40px 5%;max-width:1200px;margin:0 auto;width:100%}.welcome-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;flex-wrap:wrap;gap:20px}.greeting h1{font-size:32px;margin-bottom:8px}.greeting p{color:var(--text-muted)}.progress-card{padding:20px;min-width:250px}.progress-info{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px}.progress-info h4{font-size:16px;color:var(--text-main)}.progress-info p{font-size:13px;color:var(--text-muted)}.progress-info h2{font-size:24px;color:var(--primary)}.progress-bar{width:100%;height:8px;background:#0000004d;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:4px;transition:width 1s ease-in-out}.books-slider{display:flex;gap:20px;overflow-x:auto;padding-bottom:20px;margin-bottom:20px;-ms-overflow-style:none;scrollbar-width:none}.books-slider::-webkit-scrollbar{display:none}.book-card{min-width:140px;cursor:pointer;transition:transform .3s ease,opacity .3s ease;opacity:.6}.book-card:hover{transform:translateY(-5px);opacity:.8}.book-card.active{opacity:1;transform:translateY(-10px)}.book-card.active .book-cover{border:3px solid var(--primary);box-shadow:0 10px 25px #6366f166}.book-cover{height:180px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;transition:all .3s ease;border:3px solid transparent;padding:0;overflow:hidden}.book-cover img{width:100%;height:100%;object-fit:cover;border-radius:9px}.bg-book-1{background:linear-gradient(135deg,#ff6b6b,#c0392b)}.bg-book-2{background:linear-gradient(135deg,#4facfe,#00f2fe)}.bg-book-3{background:linear-gradient(135deg,#43e97b,#38f9d7)}.bg-book-4{background:linear-gradient(135deg,#fa709a,#fee140)}.bg-book-5{background:linear-gradient(135deg,#667eea,#764ba2)}.bg-book-6{background:linear-gradient(135deg,#f78ca0,#f9748f,#fd868c,#fe9a8b)}.book-card p{text-align:center;font-size:13px;color:var(--text-muted);font-weight:500}.section-title{font-size:24px;margin-bottom:24px;display:flex;align-items:center;gap:8px;transition:all .3s ease}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-bottom:40px}.game-card{padding:24px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;transition:all .3s ease}.hover-effect:hover{transform:translateY(-5px);box-shadow:0 12px 40px #0006;border-color:#fff3}.game-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff}.bg-purple{background:linear-gradient(135deg,var(--purple),#6d28d9)}.bg-blue{background:linear-gradient(135deg,var(--blue),#1d4ed8)}.bg-green{background:linear-gradient(135deg,var(--green),#047857)}.bg-orange{background:linear-gradient(135deg,var(--orange),#b45309)}.game-info h3{text-align:left;font-size:18px;margin-bottom:8px}.game-info p{font-size:14px;color:var(--text-muted);line-height:1.5}.play-btn{position:absolute;bottom:24px;right:24px;width:40px;height:40px;border-radius:50%;border:none;background:#ffffff1a;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}.hover-effect:hover .play-btn{background:var(--primary);transform:scale(1.1)}.animate-fade-in{animation:fadeIn .5s ease forwards}.view-header{margin:20px 0;padding-bottom:10px;border-bottom:1px solid var(--glass-border)}.view-header-main{margin-bottom:30px}.book-tag{background:var(--primary);color:#fff;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;display:inline-block}.unit-display-title{font-size:32px;font-weight:700;margin-top:10px;background:linear-gradient(to right,#fff,var(--text-muted));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.units-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;margin-top:24px;animation:fadeIn .5s ease}.unit-card{padding:20px;text-align:center;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:10px}.unit-card i{font-size:24px;color:var(--primary)}.unit-card span{font-weight:600;font-size:16px}.unit-card:hover{border-color:var(--primary);transform:translateY(-5px);background:#6366f10d}.no-selection-msg{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 40px;text-align:center;margin-top:20px;gap:16px}.no-selection-msg i{font-size:48px;color:var(--primary);animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.words-container{margin-top:24px;display:flex;flex-direction:column;gap:16px;animation:fadeIn .5s ease}.word-card{padding:24px;display:grid;grid-template-columns:1fr;gap:12px;transition:all .3s ease}.word-card.learned{border-color:var(--green);background:#10b9810d;opacity:.8}.word-header{display:flex;align-items:center;gap:12px;justify-content:space-between}.word-main{display:flex;align-items:center;gap:12px}.word-main h3{font-size:24px;margin:0;color:var(--primary)}.word-translation{font-size:20px;font-weight:600;color:var(--secondary);background:#ec48991a;padding:6px 14px;border-radius:12px}.word-type{background:#ffffff1a;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:600;color:var(--text-muted)}.word-meaning{font-size:18px;color:var(--text-main);line-height:1.4}.word-example{font-style:italic;color:var(--text-muted);border-left:2px solid var(--primary);padding-left:12px;margin-top:8px}.back-btn{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--glass-border);color:var(--text-main);padding:8px 16px;border-radius:12px;cursor:pointer;transition:all .3s ease;margin-bottom:20px;width:fit-content}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.units-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}.game-container{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:32px}.game-header{display:flex;justify-content:space-between;align-items:center}.back-btn{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--glass-border);color:var(--text-main);padding:10px 20px;border-radius:12px;cursor:pointer;transition:all .3s ease}.back-btn:hover{background:var(--glass-bg);border-color:var(--primary)}.game-stats{font-weight:600;color:var(--text-muted)}.flashcard-wrapper{perspective:1000px;height:400px;width:100%}.flashcard{position:relative;width:100%;height:100%;cursor:pointer;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1)}.flashcard.flipped{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center}.flashcard-back{transform:rotateY(180deg)}.word-type{background:var(--primary);color:#fff;padding:4px 12px;border-radius:20px;font-size:14px;font-weight:600;margin-bottom:20px}.word-text{font-size:48px;font-weight:800;margin-bottom:20px}.hint-text{color:var(--text-muted);font-size:14px}.translation-text{font-size:40px;font-weight:700;color:var(--primary);margin-bottom:24px}.word-details{display:flex;flex-direction:column;gap:16px;text-align:left;width:100%;max-width:500px}.meaning,.example{font-size:16px;line-height:1.6}.game-controls{display:flex;justify-content:center;align-items:center;gap:24px}.nav-btn,.flip-btn{display:flex;align-items:center;gap:10px;padding:14px 28px;border-radius:16px;border:none;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.nav-btn{background:var(--glass-bg);color:var(--text-main);border:1px solid var(--glass-border)}.nav-btn:hover{background:#ffffff1a;transform:translateY(-2px)}.flip-btn{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:0 4px 15px #6366f166}.flip-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #6366f199}@media (max-width: 600px){.flashcard-wrapper{height:350px}.word-text{font-size:36px}.translation-text{font-size:32px}.game-controls{flex-direction:column;width:100%}.nav-btn,.flip-btn{width:100%;justify-content:center}}.loading-spinner{width:40px;height:40px;border:3px solid var(--glass-border);border-top:3px solid var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-section{display:flex;gap:12px;width:100%;max-width:400px;margin:24px 0}.game-input{flex:1;padding:14px 20px;border-radius:12px;border:2px solid var(--glass-border);background:#0003;color:var(--text-main);font-size:16px;outline:none;transition:all .3s ease}.game-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px #6366f11a}.game-input.correct{border-color:var(--green);background:#10b9811a}.game-input.incorrect{border-color:var(--secondary);background:#ec48991a}.check-btn{padding:0 24px;border-radius:12px;border:none;background:var(--primary);color:#fff;font-weight:600;cursor:pointer;transition:all .3s ease}.check-btn:hover{background:var(--primary-hover);transform:translateY(-2px)}.error-msg{color:var(--secondary);font-size:14px;font-weight:500;margin-bottom:10px}.mt-20{margin-top:20px}.animate-shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.word-builder-card{padding:40px;display:flex;flex-direction:column;align-items:center;gap:32px;width:100%}.game-hint{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.translation-title{font-size:36px;font-weight:700;color:var(--text-main)}.meaning-hint{color:var(--text-muted);font-style:italic;max-width:500px}.assembled-area{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;min-height:70px;width:100%;padding:15px;background:#0003;border-radius:16px;border:2px dashed var(--glass-border);align-items:center}.placeholder-text{color:var(--text-muted);font-size:14px;letter-spacing:1px}.letter-box{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;font-size:24px;font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(.175,.885,.32,1.275);-webkit-user-select:none;user-select:none}.letter-box:hover:not(.used){transform:scale(1.1);border-color:var(--primary);background:#6366f11a}.letter-box.active{background:var(--primary);color:#fff;border:none;box-shadow:0 4px 10px #6366f14d}.letter-box.active.correct{background:var(--green);box-shadow:0 4px 10px #10b9814d}.letter-box.active.incorrect{background:var(--secondary);box-shadow:0 4px 10px #ec48994d}.letter-box.used{opacity:.3;cursor:default;transform:scale(.9)}.letters-pool{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:600px}.word-builder-controls{display:flex;gap:16px;width:100%;max-width:400px}.secondary-btn{flex:1;padding:14px;border-radius:12px;border:1px solid var(--glass-border);background:transparent;color:var(--text-main);font-weight:600;cursor:pointer;transition:all .3s ease}.secondary-btn:hover{background:#ffffff0d;border-color:var(--text-muted)}.success-msg{color:var(--green);font-weight:600;font-size:18px}.animate-bounce{animation:bounce .5s ease infinite}.quiz-stats{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700}.correct-count{color:var(--green);display:flex;align-items:center;gap:4px}.quiz-card{padding:40px;width:100%;display:flex;flex-direction:column;gap:32px}.quiz-question{text-align:center}.question-word{font-size:48px;font-weight:800;margin:16px 0;background:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.quiz-options{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.option-btn{display:flex;align-items:center;padding:20px;text-align:left;cursor:pointer;transition:all .3s ease;border:1px solid var(--glass-border);background:#ffffff08;color:var(--text-main);font-size:18px;font-weight:500;position:relative;gap:16px}.option-label{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#0003;border-radius:8px;font-size:14px;font-weight:700;color:var(--text-muted)}.option-btn:hover:not(:disabled){background:#ffffff14;transform:translate(5px);border-color:var(--primary)}.option-btn.correct{background:#10b9811a;border-color:var(--green);color:var(--green)}.option-btn.incorrect{background:#ec48991a;border-color:var(--secondary);color:var(--secondary)}.option-btn i{margin-left:auto;font-size:24px}@media (max-width: 600px){.quiz-options{grid-template-columns:1fr}.question-word{font-size:32px}}.image-quiz-card{padding:32px;width:100%;display:flex;flex-direction:column;align-items:center;gap:24px}.image-display{width:100%;max-width:500px;height:300px;border-radius:20px;overflow:hidden;background:#0003;position:relative;border:1px solid var(--glass-border)}.image-display img{width:100%;height:100%;object-fit:cover;animation:fadeIn .5s ease}.loading-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.quiz-question-info{text-align:center}.translation-hint{color:var(--primary);font-size:20px;font-weight:600;margin-top:8px}.image-quiz-options{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:100%;max-width:600px}.word-match-card{padding:32px;width:100%}.match-columns{display:grid;grid-template-columns:1fr 1fr;gap:40px}.match-column{display:flex;flex-direction:column;gap:12px}.match-column h3{margin-bottom:12px;color:var(--primary);font-size:20px}.match-item{padding:16px;text-align:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-weight:600;border:1px solid var(--glass-border);-webkit-user-select:none;user-select:none}.match-item:hover:not(.matched){background:#ffffff0d;transform:scale(1.02);border-color:var(--primary)}.match-item.selected{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 15px #6366f166}.match-item.matched{opacity:.3;cursor:default;background:var(--green);border-color:var(--green);color:#fff;transform:scale(.95)}.match-item.wrong{background:var(--secondary);border-color:var(--secondary);color:#fff;animation:shake .5s ease}@media (max-width: 600px){.match-columns{gap:20px}.match-item{padding:12px;font-size:14px}}.unit-indicator{display:flex;align-items:center;gap:12px;padding:16px 24px;margin-bottom:24px;background:#6366f11a;border-color:#6366f133;color:var(--text-main);font-size:16px;animation:slideInDown .5s ease forwards}.unit-indicator i{color:var(--primary);font-size:20px}.unit-indicator strong{color:var(--primary);margin:0 4px}.missing-letters-card{padding:40px;display:flex;flex-direction:column;align-items:center;gap:32px;width:100%}.word-display-area{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:20px 0}.given-letter,.missing-input{width:50px;height:60px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:32px;font-weight:700;border-radius:12px;text-transform:uppercase}.given-letter{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-main)}.missing-input{background:#0003;border:2px dashed var(--glass-border);color:var(--primary);outline:none;transition:all .3s ease}.missing-input:focus{border-color:var(--primary);border-style:solid;box-shadow:0 0 0 3px #6366f133}.missing-input.error{border-color:var(--secondary);color:var(--secondary);background:#ec48991a}.missing-input.correct{border-color:var(--green);color:var(--green);background:#10b9811a}@media (max-width: 600px){.given-letter,.missing-input{width:40px;height:50px;font-size:24px;gap:8px}}.tug-of-war-container{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:30px}.tug-visual{position:relative;height:500px;width:100%;background:#020617;border-radius:32px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(59,130,246,.3);margin-bottom:20px}.tug-visual:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at var(--glow-x, 50%) 50%,var(--glow-color, transparent) 0%,transparent 70%);opacity:.4;transition:all .8s ease;pointer-events:none;z-index:2}.ground{position:absolute;bottom:0;width:100%;height:120px;background:transparent;z-index:1}.ground:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:90%;height:40px;background:radial-gradient(ellipse at center,rgba(0,0,0,.5) 0%,transparent 70%)}.tug-scene-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:visible;position:relative;z-index:5;background:radial-gradient(circle at center,rgba(30,64,175,.4) 0%,transparent 80%)}.tug-match-image{width:160%;height:160%;display:flex;align-items:center;justify-content:center;transition:transform .6s cubic-bezier(.34,1.56,.64,1)}.flat-players-img{width:100%;height:100%;object-fit:contain;transform:scale(1.3);mix-blend-mode:screen;filter:invert(1) drop-shadow(0 0 10px rgba(56,189,248,.5))}.tug-match-image.pulling{animation:screen-shake .3s infinite}@keyframes floating{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.dynamic-rope{flex:1;height:20px;background:#78350f;background-image:repeating-linear-gradient(45deg,#78350f,#78350f 10px,#451a03 10px,#451a03 20px);box-shadow:0 6px 12px #0006;position:relative;margin:0 -20px;z-index:3;border-radius:10px}.rope-ribbon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:15px;height:40px;background:#ef4444;border-radius:4px;box-shadow:0 0 15px #ef444480}.tug-scene.pulling-blue .blue-team .player-3d,.tug-scene.pulling-red .red-team .player-3d{animation:fast-pull .2s infinite alternate}@keyframes fast-pull{0%{transform:scale(1.05) translate(0)}to{transform:scale(1.05) translate(-5px)}}.tug-scene.pulling-blue .red-team .player-3d,.tug-scene.pulling-red .blue-team .player-3d{animation:scramble .3s infinite;opacity:.9}@keyframes scramble{0%,to{transform:translate(0)}50%{transform:translate(5px)}}.player:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 50%);pointer-events:none;mask-image:inherit;-webkit-mask-image:inherit;opacity:0;transition:opacity .3s}.player:hover:after{opacity:1}.player-img{width:100%;height:100%;object-fit:contain;transform:perspective(1000px) rotateY(10deg)}.team-blue-players .player-img{transform:perspective(1000px) rotateY(-15deg)}.team-red-players .player-img{transform:perspective(1000px) rotateY(15deg)}.team-blue-players .player{transform-origin:bottom center}.team-red-players .player{transform-origin:bottom center;animation:tugging-alt 1.2s infinite alternate ease-in-out}@keyframes tugging{0%{transform:rotate(-8deg) translateY(0) scale(1)}to{transform:rotate(5deg) translateY(-10px) scale(1.02)}}@keyframes tugging-alt{0%{transform:rotate(8deg) translateY(0) scale(1)}to{transform:rotate(-5deg) translateY(-10px) scale(1.02)}}.rope-container.pulling{animation:screen-shake .5s cubic-bezier(.36,.07,.19,.97) both}@keyframes screen-shake{10%,90%{transform:translate3d(-2px,0,0)}20%,80%{transform:translate3d(4px,0,0)}30%,50%,70%{transform:translate3d(-6px,0,0)}40%,60%{transform:translate3d(6px,0,0)}}.rope-container.pulling-blue .team-blue-players .player{animation:pull-effort .3s infinite alternate;filter:brightness(1.2) drop-shadow(0 0 20px rgba(59,130,246,.5));transform:scale(1.1) rotate(-15deg)}.rope-container.pulling-red .team-red-players .player{animation:pull-effort .3s infinite alternate;filter:brightness(1.2) drop-shadow(0 0 20px rgba(239,68,68,.5));transform:scale(1.1) rotate(15deg)}@keyframes pull-effort{0%{transform:translateY(0) scale(1.05)}to{transform:translateY(-10px) scale(1.05)}}.rope-container.pulling-blue .team-red-players .player,.rope-container.pulling-red .team-blue-players .player{animation:struggling .3s infinite;opacity:.8}@keyframes struggling{0%{transform:translate(0)}50%{transform:translate(5px)}to{transform:translate(0)}}.rope-container.pulling-red .team-blue-players .player{animation:struggling-alt .3s infinite}@keyframes struggling-alt{0%{transform:translate(0)}50%{transform:translate(-5px)}to{transform:translate(0)}}.ground{position:absolute;bottom:0;width:100%;height:80px;background:linear-gradient(180deg,#0f172a,#020617);border-top:4px solid rgba(255,255,255,.05);box-shadow:0 -10px 40px #0009;overflow:hidden}.ground:before{content:"";position:absolute;top:-10px;left:0;width:100%;height:10px;background:#ffffff0d;filter:blur(5px)}.dust-particle{position:absolute;background:#fff3;border-radius:50%;pointer-events:none;animation:dust-float 1s ease-out forwards}@keyframes dust-float{0%{transform:translateY(0) scale(0);opacity:.5}to{transform:translateY(-50px) scale(1.5);opacity:0}}@keyframes pop-in{0%{transform:scale(0) rotate(-10deg);opacity:0}70%{transform:scale(1.2) rotate(5deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.tug-gameplay{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:start}.team-side{display:flex;flex-direction:column;gap:15px}.side-header{display:flex;align-items:center;gap:10px;padding:10px 20px;border-radius:15px;font-weight:700}.blue-side .side-header{background:#3b82f633;color:#818cf8;border:1px solid rgba(99,102,241,.3)}.red-side .side-header{background:#ef444433;color:#f87171;border:1px solid rgba(239,68,68,.3);flex-direction:row-reverse}.center-question{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center;background:#0a0f1e99;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:24px;border:1px solid rgba(255,255,255,.05);min-width:200px;box-shadow:0 10px 30px #0000004d}.center-question h2{font-size:32px;margin-bottom:5px;color:#e2e8f0}.center-question p{color:var(--text-muted);font-size:14px}.teacher-pull-btn{padding:24px 32px;border-radius:20px;border:1px solid var(--glass-border);background:var(--glass-bg);color:#fff;font-size:20px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:15px;width:100%;margin-top:10px;box-shadow:0 4px 15px #0003}.teacher-pull-btn i{font-size:24px}.teacher-pull-btn.blue-btn{border-color:#6366f14d;background:linear-gradient(135deg,#6366f133,#4338ca33)}.teacher-pull-btn.blue-btn:hover:not(:disabled){background:linear-gradient(135deg,#6366f1,#4338ca);transform:translateY(-5px) translate(5px);box-shadow:0 10px 25px #6366f166}.teacher-pull-btn.red-btn{border-color:#ef44444d;background:linear-gradient(135deg,#ef444433,#991b1b33)}.teacher-pull-btn.red-btn:hover:not(:disabled){background:linear-gradient(135deg,#ef4444,#991b1b);transform:translateY(-5px) translate(-5px);box-shadow:0 10px 25px #ef444466}.teacher-pull-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.skip-word-btn{margin-top:20px;padding:10px 20px;border-radius:12px;border:1px solid rgba(255,255,255,.05);background:#0003;color:var(--text-muted);font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.skip-word-btn:hover:not(:disabled){background:#ffffff1a;color:var(--text-main);border-color:var(--primary)}.skip-word-btn i{font-size:18px}.skip-word-btn:disabled{opacity:.5;cursor:not-allowed}.options-column{display:flex;flex-direction:column;gap:10px}.tug-option-btn{padding:15px;border-radius:16px;border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text-main);font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;text-align:center}.blue-side .tug-option-btn:hover{background:#3b82f61a;border-color:#3b82f6;transform:translate(5px)}.red-side .tug-option-btn:hover{background:#ef44441a;border-color:#ef4444;transform:translate(-5px)}.tug-option-btn.correct-glow{animation:correct-pulse .5s infinite alternate}@keyframes correct-pulse{0%{box-shadow:0 0 5px #10b981}to{box-shadow:0 0 20px #10b981}}.team-indicator{position:absolute;top:30px;display:flex;flex-direction:column;gap:8px;z-index:10;padding:15px 25px;border-radius:24px;background:#0a0f1ecc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.05);min-width:220px;box-shadow:0 10px 30px #00000080}.blue-indicator{left:40px;border-left:4px solid #3b82f6;box-shadow:-10px 0 20px #3b82f633}.red-indicator{right:40px;border-right:4px solid #ef4444;align-items:flex-end;box-shadow:10px 0 20px #ef444433}.team-name{font-size:16px;font-weight:900;letter-spacing:1.5px;color:#e2e8f0;text-shadow:0 2px 4px rgba(0,0,0,.5)}.power-bar-container{width:100%;height:12px;background:#ffffff1a;border-radius:6px;overflow:hidden;border:1px solid rgba(0,0,0,.3)}.power-bar-fill{height:100%;transition:width .4s cubic-bezier(.34,1.56,.64,1)}.blue-indicator .power-bar-fill{background:linear-gradient(90deg,#3b82f6,#60a5fa);box-shadow:0 0 15px #3b82f699}.red-indicator .power-bar-fill{background:linear-gradient(90deg,#ef4444,#f87171);box-shadow:0 0 15px #ef444499}.game-over-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;border-radius:32px;text-align:center;padding:20px}.winner-text{font-size:48px;font-weight:800;margin-bottom:20px;background:linear-gradient(to right,#fbbf24,#f59e0b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.tug-stats-bar{display:flex;justify-content:space-between;padding:0 10px;font-size:14px;color:var(--text-muted)}.q-progress{color:var(--primary);font-weight:700}.geo-tug-scene{display:flex;align-items:center;justify-content:center;gap:200px;width:100%;position:relative;height:300px;z-index:10;animation:float-idle 2.5s infinite ease-in-out}@keyframes float-idle{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.geo-player{position:relative;display:flex;flex-direction:column;align-items:center;z-index:10;transform-origin:bottom center}.geo-head{width:80px;height:60px;border-radius:50%;border:4px solid rgba(0,0,0,.8);margin-bottom:20px;background:radial-gradient(circle at 30% 30%,var(--player-light),var(--player-color) 70%,var(--player-dark));box-shadow:inset -5px -5px 15px #0006,inset 5px 5px 10px #ffffff4d,0 10px 20px #00000080;position:relative;z-index:4;animation:head-bob 2.5s infinite ease-in-out}@keyframes head-bob{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}.geo-body{width:90px;height:140px;border-radius:25px;border:4px solid rgba(0,0,0,.8);background:linear-gradient(135deg,var(--player-light) 0%,var(--player-color) 50%,var(--player-dark) 100%);box-shadow:inset -8px -8px 20px #00000080,inset 8px 8px 15px #fff3,0 15px 30px #0009;position:relative;z-index:2}.geo-hand{width:40px;height:40px;border-radius:50%;border:4px solid rgba(0,0,0,.8);background:radial-gradient(circle at 30% 30%,var(--player-light),var(--player-color) 70%,var(--player-dark));box-shadow:inset -3px -3px 8px #00000080,inset 3px 3px 5px #ffffff4d,0 8px 15px #0006;position:absolute;top:90px;z-index:3}.geo-player .left{left:-25px}.geo-player .right{right:-25px}.geo-blue{--player-color: #3b82f6;--player-light: #60a5fa;--player-dark: #1d4ed8}.geo-red{--player-color: #ef4444;--player-light: #f87171;--player-dark: #b91c1c}.geo-rope-wrapper{position:absolute;top:165px;left:50%;transform:translate(-50%);width:1200px;height:6px;z-index:20;filter:drop-shadow(0 5px 5px rgba(0,0,0,.6))}.geo-rope{width:100%;height:100%;background:linear-gradient(to bottom,#333,#000,#333);position:absolute;top:0;left:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}.geo-ribbon{width:14px;height:44px;background:linear-gradient(135deg,#f87171,#ef4444,#b91c1c);position:absolute;top:-19px;left:50%;transform:translate(-50%);border-radius:6px;border:2px solid #450a0a;box-shadow:0 0 15px #ef4444cc}.geo-tug-scene.pulling-blue .geo-blue{animation:geo-pull-blue .3s infinite alternate}.geo-tug-scene.pulling-blue .geo-red{animation:geo-struggle-red .3s infinite alternate;opacity:.9}.geo-tug-scene.pulling-red .geo-red{animation:geo-pull-red .3s infinite alternate}.geo-tug-scene.pulling-red .geo-blue{animation:geo-struggle-blue .3s infinite alternate;opacity:.9}@keyframes geo-pull-blue{0%{transform:translateY(0) rotate(0) scale(1)}to{transform:translateY(5px) rotate(-10deg) scale(1.05);filter:drop-shadow(0 0 10px rgba(59,130,246,.5))}}@keyframes geo-struggle-red{0%{transform:translate(0) rotate(0)}to{transform:translate(-5px) rotate(-5deg)}}@keyframes geo-pull-red{0%{transform:translateY(0) rotate(0) scale(1)}to{transform:translateY(5px) rotate(10deg) scale(1.05);filter:drop-shadow(0 0 10px rgba(239,68,68,.5))}}@keyframes geo-struggle-blue{0%{transform:translate(0) rotate(0)}to{transform:translate(5px) rotate(5deg)}}