*,*:after,*:before{margin:0;padding:0;box-sizing:border-box}:root{--color-bg-primary: #111618;--color-bg-secondary: #1c2327;--color-bg-tertiary: #283339;--color-bg-accent: #13a4ec;--color-border: #3b4b54;--color-text-primary: #ffffff;--color-text-secondary: #9db0b9;--color-text-accent: #13a4ec;--font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-bold: 700;--font-weight-extrabold: 800;--font-size-xs: 14px;--font-size-sm: 16px;--font-size-base: 18px;--font-size-lg: 20px;--font-size-xl: 26px;--letter-spacing-tight: -.24px;--letter-spacing-wide: .24px;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 18px;--spacing-xs: 10px;--spacing-sm: 14px;--spacing-md: 20px;--spacing-lg: 28px;--shadow-card: 0 0 20px rgba(0, 0, 0, .2);--shadow-hover: 0 0 25px rgba(0, 0, 0, .3);--transition-fast: .15s ease-in-out;--transition-normal: .25s ease;--transition-slow: .4s ease}body{font-family:var(--font-family);background-color:var(--color-bg-primary);color:var(--color-text-primary);min-height:100dvh;display:flex;justify-content:center;align-items:flex-start}div#root{width:100%;display:flex;justify-content:center}main{height:100%;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;max-width:1200px;padding:var(--spacing-sm);gap:var(--spacing-lg)}section{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);height:100%;max-height:100dvh;width:100%}.start-game-btn{position:fixed;bottom:20px;right:20px;z-index:1000}.controls{display:flex;gap:var(--spacing-lg)}.btn-primary{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);background-color:var(--color-bg-accent);color:var(--color-text-primary);border:none;border-radius:var(--radius-sm);font-weight:var(--font-weight-bold);cursor:pointer;transition:background-color var(--transition-normal);padding:var(--spacing-sm);font-size:var(--font-size-sm)}.btn-primary:hover{background-color:var(--color-bg-tertiary)}.btn-primary svg{height:30px;width:30px}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}@media(max-width:768px){main{gap:var(--spacing-xs)}section{gap:var(--spacing-xs)}}.header{display:flex;justify-content:space-between;align-items:center;height:70px;border-bottom:1px solid var(--color-border);color:var(--color-text-primary);width:100%}.header-title,a{font-size:var(--font-size-xl);color:var(--color-text-primary);margin:0;font-weight:var(--font-weight-bold);letter-spacing:calc(var(--letter-spacing-tight) * 2);cursor:pointer;text-decoration:none;transition:var(--transition-fast)}a:hover{opacity:.7}.settings-wrapper{position:relative;display:flex;align-items:center}.settings-btn{background:none;border:none;cursor:pointer;font-size:var(--font-size-xl);color:var(--color-text-secondary);border-radius:50%;transition:var(--transition-normal);display:flex;align-items:center;justify-content:center}.settings-btn:hover,.settings-btn.active{background-color:var(--color-bg-tertiary);color:var(--color-bg-accent);transform:rotate(90deg);padding:var(--spacing-xs)}.dropDown-menu{position:absolute;top:130%;right:0;width:240px;background-color:var(--color-bg-tertiary);padding:var(--spacing-lg);border-radius:var(--radius-md);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f,0 0 0 1px #0000000d;z-index:100;display:flex;flex-direction:column;gap:var(--spacing-lg);animation:popIn .2s cubic-bezier(.16,1,.3,1);transform-origin:top right}.dropDown-menu:before{content:"";position:absolute;top:-6px;right:14px;width:12px;height:12px;background-color:var(--color-bg-tertiary);transform:rotate(45deg);border-top:1px solid rgba(0,0,0,.05);border-left:1px solid rgba(0,0,0,.05)}.lang-selection,.level-selection{display:flex;flex-direction:column;gap:var(--spacing-xs)}.dropDown-menu label{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary);text-transform:uppercase;letter-spacing:.5px}.dropDown-menu select{width:100%;padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-bg-secondary);color:var(--color-text-primary);outline:none;cursor:pointer;transition:border-color .2s}.dropDown-menu select:hover{border-color:var(--color-bg-accent)}.dropDown-menu select:focus{border-color:var(--color-bg-accent);box-shadow:0 0 0 3px #2563eb1a}@keyframes popIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(max-width:768px){.header-title,a{font-size:var(--font-size-lg)}}.flashCardSlider{display:grid;justify-items:center;width:100%}.flashcard-inner{width:100%;height:300px;max-width:400px;position:relative;perspective:1200px;cursor:pointer;display:flex;justify-content:center;align-items:center;outline:none;-webkit-user-select:none;user-select:none;border-radius:var(--radius-lg);transition:var(--transition-normal)}.flashcard-inner:focus-visible{outline:2px solid var(--color-border);outline-offset:4px}.flashcard-inner .card-side{width:100%;height:100%;border-radius:var(--radius-lg);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;backface-visibility:hidden;position:absolute;transition:var(--transition-normal);box-shadow:var(--shadow-card);padding:var(--spacing-lg);overflow:hidden;border:2px solid transparent}.flashcard-inner .card-front{color:var(--color-text-primary);border-color:var(--color-border);background-color:var(--color-bg-secondary)}.card-front .example,.card-front .phonetic{background-color:var(--color-bg-primary)}.flashcard-inner .card-back{transform:rotateY(180deg);background:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-bg-tertiary)}.flashcard-inner.flipped .card-front{transform:rotateY(180deg)}.flashcard-inner.flipped .card-back{transform:rotateY(0)}.language-label{position:absolute;top:var(--spacing-sm);left:var(--spacing-sm);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);background:var(--color-bg-accent);color:var(--color-text-primary);border:1px solid var(--color-border)}.card-back .language-label{background:var(--color-bg-tertiary);border-color:var(--color-border)}.word{font-size:var(--font-size-xxl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-sm);text-align:center;line-height:1.2;transition:var(--transition-normal);text-transform:capitalize;font-size:var(--font-size-xl);color:var(--color-text-primary)}.phonetic{font-size:var(--font-size-xs);margin-bottom:var(--spacing-md);text-align:center;color:var(--color-text-secondary);font-family:SF Mono,Monaco,Cascadia Code,monospace;letter-spacing:var(--letter-spacing-wide);padding:calc(var(--spacing-xs) / 1.4) calc(var(--spacing-sm) / 1.4);background:var(--color-bg-secondary);border-radius:var(--radius-sm);border:1px solid var(--color-border)}.example{font-size:var(--font-size-sm);font-style:italic;text-align:center;color:var(--color-text-tertiary);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-secondary);border-radius:var(--radius-sm);max-width:100%;overflow-wrap:break-word;transition:var(--transition-normal)}.hint{position:absolute;bottom:var(--spacing-sm);font-size:var(--font-size-xs);color:var(--color-text-tertiary);text-align:center;width:calc(100% - 2 * var(--spacing-lg));padding-top:var(--spacing-sm);border-top:1px solid var(--color-border);opacity:.8;transition:var(--transition-smooth)}@keyframes cardAppear{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.flashcard-inner{animation:cardAppear .4s ease-out}.flashcard-inner *{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.flashcard-inner .hint svg{float:right;width:20px;height:20px;cursor:pointer;transition:var(--transition-normal)}.flashcard-inner .hint svg:hover{color:var(--color-bg-accent)}.spinner{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg)}.grid-loader{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:60px;height:60px}.grid-dot{background:var(--color-bg-accent);border-radius:50%;animation:gridPulse 1.4s infinite}.grid-dot:nth-child(2),.grid-dot:nth-child(4),.grid-dot:nth-child(6){animation-delay:.2s}.grid-dot:nth-child(3),.grid-dot:nth-child(5),.grid-dot:nth-child(9){animation-delay:.4s}@keyframes gridPulse{0%,to{transform:scale(1)}50%{transform:scale(.3)}}.quiz-progress{width:100%;padding:0 var(--spacing-sm);gap:var(--spacing-sm)}.progress-bar{background-color:var(--color-border);border-radius:var(--radius-sm);height:var(--radius-sm);overflow:hidden;max-width:400px;margin:0 auto}.progress-fill{background-color:var(--color-text-primary);height:100%;border-radius:var(--radius-sm);transition:width .3s ease-in-out}.progress{margin:var(--spacing-xs) 0 0}.flashcards-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.categories-sliders{height:auto;max-height:none;margin-bottom:calc(var(--spacing-lg) * 2.5)}.sliderContainer{width:100%}.sliderContainer h5{display:flex;align-items:center;min-width:fit-content;font-size:var(--font-size-sm)}.slider.snaps-inline{scroll-snap-type:inline mandatory}.slider{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-md);min-height:250px;-ms-overflow-style:none;scrollbar-width:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain}.slider-top-area{display:flex;justify-content:space-between;width:100%}hr{width:100%}@media(max-width:768px){.slider{gap:var(--spacing-sm);min-height:140px;margin:10px 0 0}}.slider-card{display:flex;flex-direction:column;gap:var(--spacing-xs);padding:var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-bg-secondary);box-shadow:var(--shadow-card);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;color:var(--color-text-secondary);min-height:180px;max-height:200px;scroll-snap-align:start;min-width:220px;width:220px}.slider-card:hover,.slider-card:focus{transform:translateY(-4px);box-shadow:0 8px 20px #0003;background-color:var(--color-bg-accent);outline:none;color:var(--color-text-primary)}.slider-card.active{background-color:var(--color-bg-accent);border-color:var(--color-bg-tertiary);box-shadow:0 8px 20px #00000040;color:var(--color-text-primary)}.category-icon{font-size:var(--font-size-lg);display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-xs);max-width:100%}.category-icon svg{width:100%;height:auto;max-height:100px;fill:var(--color-text-secondary)}.slider-card.active .category-icon svg{fill:var(--color-text-primary)}.card-content{display:flex;flex-direction:column;gap:var(--spacing-xs);text-align:center;justify-content:space-between}.card-title{font-weight:var(--font-weight-bold);font-size:var(--font-size-base);height:50px}.card-description{font-weight:var(--font-weight-normal);font-size:var(--font-size-sm);color:var(--color-text-secondary)}@media(max-width:768px){.slider-card{gap:0;padding:var(--spacing-sm);border-radius:var(--radius-sm);min-width:120px;width:120px;min-height:120px;max-height:120px}.slider-card .card-title{font-size:var(--font-size-xs);height:auto}.category-icon svg{width:100%;height:auto;max-height:50px;fill:var(--color-text-secondary)}}.slider-navs{display:flex;gap:var(--spacing-md);justify-content:flex-end;height:max-content;align-items:center}.slider-prev,.slider-next{cursor:pointer;transition:var(--transition-slow);padding:var(--spacing-xs);border-radius:50%;display:flex;align-items:center;justify-content:center}.slider-prev:hover,.slider-next:hover{background-color:var(--color-bg-accent)}.gameModes{padding:var(--spacing-xs) 0}.gameModes ul{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-md);list-style:none;font-family:var(--font-family);margin:0;padding:var(--spacing-md) 0}ul li.gameModesItem{background-color:var(--color-bg-secondary);border-radius:12px;box-shadow:0 4px 6px #0000001a;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,background-color .3s ease}ul li.gameModesItem:hover{background-color:var(--color-bg-accent);transform:translateY(-5px);box-shadow:0 8px 12px #00000026}ul li.gameModesItem button{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);width:100%;height:100%;padding:var(--spacing-md);background:none;border:none;font-size:var(--font-size-base);font-weight:500;cursor:pointer;color:var(--color-text-secondary);transition:color .3s ease}ul li.gameModesItem button:hover{color:var(--color-text-primary)}ul li.gameModesItem button:focus{outline:3px solid var(--color-bg-accent);outline-offset:4px;background-color:var(--color-bg-accent);color:var(--color-text-primary);box-shadow:0 6px 10px #00000026}ul li.gameModesItem button svg{fill:var(--color-bg-accent);color:var(--color-bg-accent);width:var(--font-size-xl);height:var(--font-size-xl)}ul li.gameModesItem:hover button svg,ul li.gameModesItem button:focus svg{fill:var(--color-bg-tertiary);color:var(--color-bg-tertiary)}ul li.gameModesItem button.active{background-color:var(--color-bg-accent);color:var(--color-text-primary)}ul li.gameModesItem button.active svg{fill:var(--color-bg-tertiary);color:var(--color-bg-tertiary)}@media(max-width:768px){.gameModes{padding:0}.gameModes ul{gap:var(--spacing-xs);padding:var(--spacing-xs) 0}}.btn-main{background-color:var(--color-bg-secondary);color:var(--color-text-secondary);border:1px solid var(--color-border);padding:var(--spacing-sm);border-radius:var(--radius-sm);text-align:center;cursor:pointer;transition:.2s ease;font-family:var(--font-family);min-width:100px}.btn-main:hover{background-color:var(--color-border);transform:scale(1.03);color:var(--color-text-primary)}.greetings-section{padding:var(--spacing-sm)}.greeting-title{font-weight:var(--font-weight-bold);font-size:var(--font-size-xl);margin-bottom:var(--spacing-xs)}.greeting-subtitle{font-size:var(--font-size-base);color:var(--color-text-secondary)}picture{max-width:800px;width:100%}picture img{height:100%;width:100%;object-fit:cover}h2{text-align:center}.matching-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-sm);max-width:800px;--color-success: #22c55e;--color-primary: #3b82f6;--color-success-bg: #dcfce7;--color-primary-bg: #e0edff}.word-list{list-style:none;display:flex;flex-direction:column;gap:var(--spacing-sm)}.word-item{background-color:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-border);padding:var(--spacing-sm);border-radius:8px;text-align:center;cursor:pointer;transition:background-color .2s ease,transform .1s ease}.word-item:hover{background-color:var(--color-border);transform:scale(1.03)}.word-item.matched{background-color:var(--color-success-bg);border-color:var(--color-success);color:var(--color-success);cursor:default;animation:matchPop .25s ease}.word-item.selected{background-color:var(--color-primary-bg);border-color:var(--color-primary);color:var(--color-primary)}.word-item.matched:hover{transform:none;background-color:var(--color-success-bg)}.complete-state{width:100%}@keyframes matchPop{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.quiz-slider,.quiz-question{width:100%}.question-text{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.question-text h1{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold)}.quiz-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(400px,100%),1fr));gap:var(--spacing-md);width:100%}.option{display:flex;align-items:center;flex-direction:row-reverse;justify-content:space-between;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--spacing-sm);background-color:var(--color-bg-tertiary);cursor:pointer;transition:border-color .2s ease,background-color .2s ease}.option:hover{border-color:var(--color-bg-primary)}.option input[type=radio]{width:20px;height:20px;accent-color:var(--primary);cursor:pointer;opacity:0}.option input[type=radio]:checked{opacity:1}.option:has([type=radio]:checked+.option-text){color:var(--font-color-primary);font-weight:600;background-color:var(--color-bg-accent);border-radius:var(--radius-sm);width:100%;height:100%}.option [type=radio]:checked{display:none}.option [type=radio]:checked+.option-text{width:100%}.option-text{font-size:var(--font-size-lg)}.quiz-action{margin:0 auto;max-width:400px;padding:var(--spacing-lg)}.result-section{max-height:fit-content;--correct: #4ade80;--incorrect: #fca5a5}.result-card{display:flex;align-items:stretch;justify-content:space-between;flex-wrap:wrap;background:var(--color-bg-secondary);gap:var(--spacing-sm);padding:var(--spacing-sm);border-radius:var(--radius-sm);width:100%;max-width:800px}.result-info{flex:2;display:flex;flex-direction:column;gap:var(--spacing-xs);align-items:start}.status,.answers{color:var(--color-text-secondary);font-size:var(--font-size-xs)}.question{font-weight:var(--font-weight-bold);font-size:var(--font-size-sm)}.result-icon{display:flex;align-items:center}.result-card.correct .status,.result-card.correct .result-icon{color:var(--correct)}.result-card.incorrect .status,.result-card.incorrect .result-icon{color:var(--incorrect)}.quiz-action{display:flex;gap:var(--spacing-md)}