@import "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap";
@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap";
body{color:#333;text-align:center;box-sizing:border-box;background-color:#f8f9fa;margin:0;padding:0;font-family:Roboto,sans-serif}.page-with-navbar{padding-top:80px}@keyframes gradient{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}*,:before,:after{box-sizing:border-box}.search-input-container{align-items:center;width:100%;display:flex;position:relative}.search-input-container input{border:1px solid #ddd;border-radius:20px;width:100%;padding:10px 40px 10px 10px;font-size:16px}.toggle-filtros-btn-inline{cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:5px;transition:background-color .2s;display:flex;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.toggle-filtros-btn-inline:hover{background-color:#0000000d}.toggle-filtros-btn-inline.active{background-color:#e4e4e4}.filter-icon-svg{transition:transform .3s}.toggle-filtros-btn-inline.active .filter-icon-svg{transform:rotate(180deg)}.filtros-content{opacity:1;background-color:#f9f9f9;border:1px solid #ddd;border-radius:20px;width:100%;max-height:1000px;margin-top:10px;padding:15px;transition:max-height .3s ease-out,opacity .3s ease-out,margin .3s ease-out;overflow:hidden}.filtros-content.hidden{opacity:0;pointer-events:none;border:none;max-height:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0}.video-presentation{aspect-ratio:16/9;-webkit-backdrop-filter:blur(10px);z-index:2;border:1px solid #ffffff1a;border-radius:45px;width:90%;max-width:850px;height:auto;margin:0 auto;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden;box-shadow:0 10px 30px #000}.video-presentation iframe{border-radius:12px}.musical-notes{z-index:1;pointer-events:none;height:100%;position:absolute;top:0;left:0;right:0;overflow:hidden}.hero-separator{z-index:4;height:80px;position:absolute;bottom:0;left:0;right:0}@media (max-width:768px){.hero-section{min-height:60vh;padding:100px 15px 60px}.hero-video-container{height:100%;max-height:60vh}.hero-background-video{-o-object-fit:cover;object-fit:cover;width:auto!important;height:100%!important}.hero-content{padding:20px 0}.welcome-carousel{height:80px;margin-bottom:15px}}@media (max-width:480px){.hero-section{min-height:50vh;padding:80px 15px 40px}.hero-video-container{max-height:50vh}.welcome-message{font-size:1.8rem}.welcome-lead{font-size:1rem}}.main-content{z-index:2;background-color:#f8f9fa;border-top-left-radius:30px;border-top-right-radius:30px;margin-top:-30px;padding:40px 0;position:relative;box-shadow:0 -10px 20px #0000001a}.music-container{flex-direction:column;align-items:center;width:100%;margin-top:30px;display:flex}.search-filters{background-color:#fff;border-radius:20px;flex-direction:column;place-items:center;width:90%;margin:30px auto 40px;padding:20px;display:flex}.country-filters-container{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:20px;display:flex}.country-filter,.dificult-filter{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.country-filter{cursor:pointer;padding:6px 12px;transition:all .2s}.country-filter.active{color:#fff;background:#007bff;border-color:#0069d9}.country-btn{cursor:pointer;border:none;justify-content:center;align-items:center;width:40px;height:40px;margin:5px;padding:0;transition:transform .2s;display:flex;overflow:hidden;box-shadow:0 2px 4px #0003;border-radius:50%!important}.country-btn:hover{transform:scale(1.1)}.country-btn:active{border:2px solid #0e4d79;transform:scale(.95);box-shadow:0 0 2px #222}.country-btn.active{border:3px solid #007bff;box-shadow:0 0 8px #007bffb3}.country-btn img{-o-object-fit:cover;object-fit:cover;border-radius:50%;width:100%;height:100%}.dificult-btn{cursor:pointer;outline:none;justify-content:center;align-items:center;margin:5px;padding:0;transition:transform .2s;display:flex;overflow:hidden;background:0 0!important;border:none!important;border-radius:50%!important}.dificult-btn:hover{transform:scale(1.1)}.dificult-btn:active{transform:scale(.95)}.dificult-btn.active{border:3px solid #007bff;box-shadow:0 0 8px #007bffb3}.dificult-btn img{-o-object-fit:contain;object-fit:contain;width:45px;height:45px;padding:0}.grammar-filter{border-radius:18px;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;width:100%;padding:5px;display:flex}.grammar-btn{cursor:pointer;color:#333;white-space:nowrap;background-color:#ffffffb3;border:2px solid #0000;justify-content:center;align-items:center;min-width:100px;margin:5px;padding:5px 8px;font-size:14px;font-weight:500;transition:all .3s;display:flex;position:relative;box-shadow:0 2px 4px #0000001a;border-radius:25px!important}.grammar-btn:hover{background-color:#ffffffe6;transform:translateY(-2px);box-shadow:0 4px 8px #0003}.grammar-btn.active{background-color:#fffffff2;font-weight:700;transform:translateY(1px);box-shadow:inset 0 1px 2px #0000001a}.grammar-btn span{white-space:nowrap;font-size:14px}.style-filter{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;margin:15px 0;padding:5px;display:flex}.style-buttons{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;display:flex}.style-btn{cursor:pointer;color:#333;background-color:#ffffffb3;border:2px solid #0000;justify-content:center;align-items:center;min-width:100px;margin:5px;padding:5px 8px;font-weight:500;transition:all .3s;display:flex;position:relative;box-shadow:0 2px 4px #0000001a;border-radius:25px!important}.style-btn:hover{background-color:#ffffffe6;transform:translateY(-2px);box-shadow:0 4px 8px #0003}.style-btn.active{background-color:#fffffff2;font-weight:700;transform:translateY(1px);box-shadow:inset 0 1px 2px #0000001a}.style-btn.no-matches{opacity:.5;cursor:not-allowed;background-color:#f0f0f0b3}.style-btn.no-matches:hover{transform:none;box-shadow:0 2px 4px #0000001a}.style-img-btn{width:45px;height:45px;min-width:unset;cursor:pointer;outline:none;justify-content:center;align-items:center;margin:5px;padding:0;transition:transform .2s;display:flex;overflow:hidden;box-shadow:0 2px 4px #0003;background:0 0!important;border:none!important;border-radius:50%!important}.style-img-btn:hover{transform:scale(1.1)}.style-img-btn:active{transform:scale(.95)}.style-img-btn.active{box-shadow:0 0 8px #007bffb3;border:3px solid #007bff!important}.style-img-btn img{-o-object-fit:contain;object-fit:contain;width:100%;height:100%;scale:1.3}.style-img-btn:before{content:none!important}.music-style{z-index:2;background:0 0;border-radius:50%;width:30px;height:30px;padding:0;position:absolute;top:10px;right:15px;overflow:hidden;box-shadow:0 2px 4px #0003}.music-style img{background-color:#fff;border-radius:50%;display:block;scale:1.3;-o-object-fit:cover!important;object-fit:cover!important;width:100%!important;height:100%!important;margin:0!important;position:static!important;transform:none!important}.music-level{z-index:2;background:0 0;border-radius:50%;width:30px;height:30px;padding:0;position:absolute;top:10px;left:15px;overflow:hidden;box-shadow:0 2px 4px #0003}.music-level img{border-radius:50%;display:block;-o-object-fit:cover!important;object-fit:cover!important;width:100%!important;height:100%!important;margin:0!important;position:static!important;transform:none!important}.music-country{z-index:2;background:0 0;border-radius:50%;width:30px;height:30px;padding:0;position:absolute;bottom:100px;right:15px;overflow:hidden;box-shadow:0 2px 4px #0003}.music-country img{border-radius:50%;display:block;-o-object-fit:cover!important;object-fit:cover!important;width:100%!important;height:100%!important;margin:0!important;position:static!important;transform:none!important}.music-difficulty{align-items:center;margin-top:4px;display:flex;position:absolute;bottom:15px;right:15px}.music-difficulty img{-o-object-fit:contain;object-fit:contain;border-radius:50%;width:30px;height:30px;margin-right:0;box-shadow:0 2px 4px #00000026}.music-icon{color:#888;align-self:flex-start;margin-bottom:10px;font-size:40px}.music-title-thumb{color:#064d7a;text-align:left;align-self:flex-start;min-height:30px;padding-top:8px;padding-left:7px;font-size:15px;font-weight:600}.music-artist-thumb{color:#519ecf;text-align:left;align-self:flex-start;min-height:20px;padding-left:7px;font-size:.8em}.music-grammar{color:#1a1818;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;border-radius:18px;align-self:flex-start;align-items:center;max-width:100%;margin-top:4px;padding-left:7px;font-size:10px;font-weight:700;transition:all .3s;display:flex;overflow:hidden}.music-grammar:hover{white-space:normal;z-index:10;max-width:none}.music-grammar.expanded{white-space:normal;z-index:10;max-width:none;box-shadow:0 4px 8px #0003}.music-badge{justify-content:center;align-items:center;display:flex}.music-thumb img{-o-object-fit:cover;object-fit:cover;border-top-left-radius:10px;border-top-right-radius:10px;width:calc(100% + 30px);height:135px;margin:-15px 0 10px -15px;display:block}.text-container{flex-direction:column;flex-grow:1;align-items:flex-start;gap:2px;width:100%;padding:0;display:flex}.music-title{margin-bottom:20px;font-size:24px;font-weight:500}.content{flex-direction:column;align-items:center;width:100%;max-width:1200px;margin:0 auto;display:flex}.game-area{flex-direction:row;justify-content:center;align-items:center;gap:20px;width:100%;max-width:1200px;margin:0 auto;display:flex}.lyrics{text-align:left;background:#fff;border:1px solid #e0dcdc;border-radius:20px;width:100%;min-height:200px;padding:15px;font-size:20px;line-height:2}.nav-buttons{margin-top:20px}.btn{color:#fff;cursor:pointer;text-transform:uppercase;background-color:#007acc;border:none;border-radius:18px;margin:0 10px 10px;padding:10px 20px;font-size:16px}.btn:hover{background-color:#005fa3}.modal{z-index:2000;background-color:#0006;width:100%;height:100%;display:none;position:fixed;top:0;left:0;overflow:auto}.modal-content{text-align:center;background:#fff;border-radius:8px;width:80%;max-width:400px;margin:10% auto;padding:20px;position:relative;box-shadow:0 2px 10px #0003}.modal-content h2{color:#007acc;margin-top:0}.modal-content .stars{color:#ffb400;margin:10px 0;font-size:24px}.modal-content .close{color:#aaa;cursor:pointer;font-size:28px;position:absolute;top:10px;right:20px}.modal-content .close:hover{color:#000}#screen-drag .header{margin-top:0;padding:0;position:relative}#screen-drag{margin-top:0;padding-top:0;position:relative}#screen-drag .content{z-index:5;margin-bottom:30px;position:relative}.style-buttons,.difficulty-buttons,.grammar-buttons,.country-buttons{flex-flow:wrap;gap:10px;margin-bottom:10px;display:flex}.grammar-btn{white-space:nowrap;font-size:14px}.game-container-new{flex-direction:column;align-items:center;width:100%;height:calc(100vh - 160px);padding-top:20px;display:flex;position:relative}.game-container-new .content{flex-grow:1;justify-content:center;width:100%;display:flex}#player-container{width:1px;height:1px;position:absolute;top:-9999px;left:-9999px}.game-area{width:100%;max-width:1200px;height:100%;padding:0 20px}.drag-and-drop-container{flex-direction:row;align-items:flex-start;gap:20px;display:flex}.lyric-stanza{margin-bottom:20px;line-height:2}.music-header{background:0 0;border-radius:16px;width:95%;max-width:800px;margin:20px auto 30px;padding:20px;transition:all .3s}.music-info{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;width:100%;display:flex}.music-titles{text-align:left;flex-grow:1}.music-title-game{color:#0e4d7a;margin:0;font-size:2rem;font-weight:700;line-height:1.2}.music-artist-game{color:#519ecf;margin:4px 0 0;font-size:1.25rem;font-weight:400}.music-badges{align-items:center;gap:10px;display:flex}.country-badge,.style-badge,.level-badge{background-color:#fff;border-radius:50%;width:30px;height:30px;padding:0;overflow:hidden;box-shadow:0 2px 4px #0000001a}.grammar-badge{color:#495057;white-space:nowrap;text-align:center;background-color:#e9ecef;border-radius:20px;padding:5px 12px;font-size:.85rem;font-weight:600}@media (max-width:768px){.music-header{padding:15px}.music-info{flex-direction:column;align-items:center;gap:15px}.music-titles{text-align:center;width:100%}.music-title-game{font-size:1.6rem}.music-artist-game{font-size:1.1rem}}@media (max-width:480px){.music-title-game{font-size:1.4rem}.music-artist-game{font-size:1rem}.country-badge,.style-badge,.level-badge{width:32px;height:32px}.grammar-badge{padding:4px 10px;font-size:.8rem}}.hero-background-video{min-width:100%;min-height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200%!important;height:200%!important}.hero-video-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.hero-section{z-index:0}.main-content.filters-active{border-top-left-radius:0;border-top-right-radius:0;margin-top:0;padding-top:70px}.main-content.with-hero{border-top-left-radius:30px;border-top-right-radius:30px;margin-top:-30px;padding-top:40px;box-shadow:0 -10px 20px #0000001a}@keyframes fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.8s ease-out fade-in}.shadow-3xl{box-shadow:0 35px 60px -12px #00000040,0 0 0 1px #ffffff0d}.backdrop-blur-xl{-webkit-backdrop-filter:blur(20px)}
.page-content{will-change:transform;padding-top:0;padding-bottom:40px;display:flow-root;transform:translateZ(0)}.blog-container{max-width:1200px;margin:0 auto;padding:20px}.blog-page-title{color:#333;text-align:center;margin-top:0;margin-bottom:clamp(30px,5vw,50px);font-size:clamp(2rem,5vw,3rem);font-weight:700;position:relative}.blog-page-title:after{content:"";background:linear-gradient(90deg,#519ecf,#2066dd);border-radius:2px;width:80px;height:4px;margin:15px auto 0;display:block}.blog-posts{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-top:0;font-family:Roboto,sans-serif;display:grid}@media (max-width:768px){.page-content{padding-top:70px}.blog-container{padding:15px}.blog-page-title{margin-bottom:30px}}@media (max-width:480px){.page-content{padding-top:60px}.blog-container{padding:10px}.blog-page-title{margin-bottom:25px}}.blog-posts>a{color:inherit;text-decoration:none;display:block}.blog-post{z-index:1;cursor:pointer;will-change:transform;backface-visibility:hidden;background-color:#fff;border-radius:8px;padding-bottom:20px;font-family:Roboto,sans-serif;transition:transform .2s ease-in-out;position:relative;overflow:hidden;transform:translateZ(0);box-shadow:0 2px 20px #0003}.blog-post.clickable-post:hover{transform:scale(1.02);box-shadow:0 4px 25px #00000040}.blog-post img{-o-object-fit:cover;object-fit:cover;pointer-events:none;border-top-left-radius:8px;border-top-right-radius:8px;width:100%;height:180px}.blog-post-title{color:#333;text-align:left;pointer-events:none;margin:20px 18px 15px;font-size:30px;font-weight:600;line-height:1.3}.blog-post-description{color:#555;text-align:left;pointer-events:none;margin:0 18px 15px;font-size:14px;line-height:1.5}.read-more-indicator{color:#2066dd;text-align:right;pointer-events:none;width:fit-content;margin:15px 18px 0 auto;font-weight:500;display:block}.clickable-post:hover .blog-post-title{color:#141517}.clickable-post:hover .read-more-indicator{text-decoration:underline}.post-container{background:#fff;border-radius:8px;max-width:800px;margin:60px auto 0;padding:40px 20px;box-shadow:0 2px 10px #0000001a}.post-title{color:#333;text-align:center;margin-bottom:clamp(20px,4vw,30px);font-size:clamp(1.5rem,5vw,2.5rem);line-height:1.2}.post-main-image{-o-object-fit:cover;object-fit:cover;border-radius:8px;width:100%;max-width:100%;height:auto;margin:clamp(20px,4vw,30px) auto;display:block;box-shadow:0 4px 12px #0000001a}.post-content{color:#333;margin-top:clamp(20px,4vw,30px);font-size:clamp(1rem,2.5vw,1.1rem);line-height:1.6}.post-content p{text-align:justify;margin-bottom:1.5rem}.post-content img{border-radius:6px;max-width:100%;margin:20px 0;box-shadow:0 2px 8px #0000001a;width:100%!important;height:auto!important}.post-content h1,.post-content h2,.post-content h3{color:#333;margin:2rem 0 1rem;line-height:1.3}.post-content h1{font-size:clamp(1.5rem,4vw,2rem)}.post-content h2{font-size:clamp(1.3rem,3.5vw,1.8rem)}.post-content h3{font-size:clamp(1.1rem,3vw,1.5rem)}.post-content ul,.post-content ol{margin:1.5rem 0;padding-left:2rem}.post-content li{margin-bottom:.5rem}.post-content a{color:#2066dd;text-decoration:none}.post-content a:hover{text-decoration:underline}@media (max-width:768px){.post-container{box-shadow:none;border-radius:0;margin-top:120px;padding:20px}.post-main-image{border-radius:6px;margin:15px 0}.post-content{margin-top:20px}}@media (max-width:480px){.post-container{margin-top:100px;padding:15px}.post-title{text-align:left;margin-bottom:15px}.post-main-image{border-radius:4px;margin:10px 0}.post-content{margin-top:15px;font-size:.95rem}.post-content p{margin-bottom:1.2rem}}@media (max-width:320px){.post-container{padding:10px}.post-main-image{margin:8px 0}.post-content{font-size:.9rem}}@media (min-width:1200px){.post-container{max-width:900px;padding:50px}.post-main-image{-o-object-fit:cover;object-fit:cover;max-height:500px}}
.sequential-fill-container{box-sizing:border-box;flex-direction:row;align-items:flex-start;gap:.75rem;width:100%;max-width:100vw;margin-top:0;padding:.75rem;display:flex;overflow:visible}@media (min-width:768px){.sequential-fill-container{gap:1rem;min-height:calc(100vh - 160px);margin-top:0;padding:1rem}}.lyrics-area,.word-bank-area{box-sizing:border-box;border-radius:16px;padding:1.25rem}.lyrics-area{flex-direction:column;flex:2;justify-content:flex-start;min-width:0;margin-top:0;display:flex;text-align:left!important}@media (min-width:768px){.lyrics-area{border-radius:22px;flex:2;margin-top:1rem;padding:1.5rem}}.word-bank-area{z-index:10;border-radius:12px;flex-direction:column;flex:1;align-self:flex-start;min-width:0;max-width:45%;max-height:calc(100vh - 200px);margin-top:0;padding:.8rem;display:flex;position:sticky;top:70px;overflow:hidden}@media (min-width:768px){.word-bank-area{z-index:10;border-radius:22px;flex:1;align-self:flex-start;max-width:35%;height:calc(100vh - 180px);margin-top:1rem;padding:1.2rem;position:sticky;top:85px;overflow:hidden}}.word-bank-scroll{scrollbar-width:thin;scrollbar-color:#0003 transparent;flex:1;width:100%;min-height:0;max-height:100%;padding-right:4px;overflow:hidden auto}@media (min-width:768px){.word-bank-scroll{flex-grow:1;max-height:none}}.word-bank-scroll::-webkit-scrollbar{width:5px}.word-bank-scroll::-webkit-scrollbar-thumb{background-color:#0003;border-radius:5px}.lyric-stanza{color:#333;border-bottom:1px solid #00000014;margin-bottom:1.5rem;padding:.5rem 0;font-size:clamp(.9rem,2vw,1.1rem);line-height:2}.lyric-stanza:last-child{border-bottom:none;margin-bottom:0}.lyric-line{margin-bottom:.8rem;display:block}.lyric-line:last-child{margin-bottom:0}:root{--feedback-correct-soft-gradient:linear-gradient(135deg,#dcfce7 0%,#d1fae5 45%,#bbf7d0 100%);--feedback-incorrect-soft-gradient:linear-gradient(135deg,#fee2e2 0%,#ffe4e6 45%,#fecaca 100%);--feedback-correct-strong-gradient:linear-gradient(135deg,#4ade80,#22c55e,#16a34a);--feedback-incorrect-strong-gradient:linear-gradient(135deg,#f87171,#ef4444,#dc2626);--feedback-correct-shadow:0 10px 24px #10b9812e;--feedback-incorrect-shadow:0 10px 24px #f43f5e29}.fillable-slot{vertical-align:middle;word-break:break-word;background:#fff;border-bottom:2px solid #d1d5db;border-radius:20px;justify-content:center;align-items:center;min-width:60px;min-height:32px;margin:0 2px;padding:0 8px;font-size:.95rem;transition:all .3s;display:inline-flex;overflow:hidden}.fillable-slot.active{background-color:#eff6ff;border-color:#3b82f6;animation:1.5s ease-in-out infinite pulse;box-shadow:0 0 0 2px #3b82f64d}.fillable-slot.correct{background:var(--feedback-correct-soft-gradient);box-shadow:var(--feedback-correct-shadow);border-color:#6ee7b7;animation:.8s ease-in-out correctPulse}.fillable-slot.incorrect{background:var(--feedback-incorrect-soft-gradient);box-shadow:var(--feedback-incorrect-shadow);border-color:#fda4af;animation:.5s ease-in-out incorrectShake}.selectable-word{color:#fff;cursor:pointer;text-align:center;border:none;border-radius:20px;justify-content:center;align-items:center;min-width:80px;margin:4px;padding:8px 12px;font-size:.9rem;font-weight:500;line-height:1.2;transition:all .2s;display:inline-flex;box-shadow:0 2px 4px #00000026}.selectable-word:not([style*=background]):nth-child(6n+1){background:linear-gradient(135deg,#145c8a,#0a3b59)}.selectable-word:not([style*=background]):nth-child(6n+2){background:linear-gradient(135deg,#a52915,#7a1e10)}.selectable-word:not([style*=background]):nth-child(6n+3){background:linear-gradient(135deg,#2a7ab0,#1c5c8c)}.selectable-word:not([style*=background]):nth-child(6n+4){background:linear-gradient(135deg,#c34b35,#9c3a29)}.selectable-word:not([style*=background]):nth-child(6n+5){background:linear-gradient(135deg,#3d88b7,#2a7ab0)}.selectable-word:not([style*=background]):nth-child(6n){background:linear-gradient(135deg,#e06745,#c34b35)}.selectable-word:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px #0003}.selectable-word:active:not(:disabled){transform:translateY(1px)}.selectable-word:disabled{opacity:.5;cursor:not-allowed}.selectable-word.correct{background:var(--feedback-correct-strong-gradient)!important;box-shadow:var(--feedback-correct-shadow)!important;opacity:.95!important}.selectable-word.incorrect{animation:.5s ease-in-out shakeWord;background:var(--feedback-incorrect-strong-gradient)!important;box-shadow:var(--feedback-incorrect-shadow)!important}.word-bank-grid{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:8px;display:flex}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 0 0 2px #3b82f64d}50%{transform:scale(1.03);box-shadow:0 0 0 4px #3b82f666}}@keyframes correctPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes incorrectShake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}@keyframes shakeWord{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-3px)}20%,40%,60%,80%{transform:translate(3px)}}@media (max-width:640px){.selectable-word{min-width:50px;margin:2px;padding:4px 8px;font-size:.75rem}.fillable-slot{min-width:45px;min-height:26px;padding:0 6px;font-size:.8rem}.lyric-stanza{margin-bottom:1rem;font-size:.85rem;line-height:1.6}.word-bank-area{max-width:45%;padding:.6rem}.lyrics-area{padding:.6rem}.word-bank-area h3{margin-bottom:.5rem;padding:.5rem 0;font-size:.9rem}}@media (max-width:480px){.sequential-fill-container{gap:.25rem;padding:.25rem}.lyrics-area,.word-bank-area{border-radius:8px;padding:.5rem}.selectable-word{min-width:40px;margin:1px;padding:3px 6px;font-size:.7rem}.fillable-slot{min-width:35px;min-height:22px;padding:0 4px;font-size:.75rem}.lyric-stanza{margin-bottom:.8rem;font-size:.8rem;line-height:1.5}.word-bank-area{max-width:50%}.word-bank-grid{gap:2px;padding:4px}}@media (hover:none) and (pointer:coarse){.selectable-word{padding:8px 12px}.selectable-word:hover:not(:disabled){transform:none;box-shadow:0 2px 4px #00000026}.selectable-word:active:not(:disabled){transform:scale(.95)}}.word-bank-sticky{z-index:1000!important;align-self:flex-start!important;position:sticky!important;top:85px!important}@media (max-width:767px){.word-bank-area{z-index:100!important;max-width:45%!important;max-height:calc(100vh - 180px)!important;position:sticky!important;top:70px!important}.word-bank-sticky{max-width:45%!important;max-height:calc(100vh - 180px)!important;top:70px!important}.word-bank-sticky .word-bank-scroll{max-height:calc(100vh - 200px)!important}.sequential-fill-container{align-items:flex-start!important;overflow:visible!important}}@media (max-width:640px){.lyrics-area .leading-relaxed{line-height:1.3!important}.fillable-slot{min-width:50px!important;min-height:24px!important;margin:0 1px!important;padding:0 6px!important;font-size:.75rem!important}.selectable-word{min-width:60px!important;padding:6px 10px!important;font-size:.75rem!important}}@media (max-width:480px){.fillable-slot{min-width:45px!important;min-height:22px!important;padding:0 4px!important;font-size:.7rem!important}.selectable-word{min-width:55px!important;padding:5px 8px!important;font-size:.7rem!important}.lyrics-area{padding:.5rem!important}}
.video-container{box-sizing:border-box;width:100%;max-width:900px;margin:0 auto 2rem;padding:1rem;position:relative}.youtube-player{aspect-ratio:16/9;background:#000;border-radius:12px;width:100%;min-height:300px;max-height:70vh;position:relative;overflow:hidden;box-shadow:0 4px 12px #00000026}#player-container{visibility:visible!important;background:#000!important;border-radius:12px!important;width:100%!important;height:100%!important;display:block!important;position:relative!important;overflow:hidden!important}.youtube-player iframe,.youtube-player video,#player-container iframe,#player-container video{z-index:1!important;visibility:visible!important;border:none!important;border-radius:12px!important;width:100%!important;height:100%!important;display:block!important;position:absolute!important;top:0!important;left:0!important}.youtube-player:before,.youtube-player:after{display:none!important}#player-container>div,#player-container>iframe{visibility:visible!important;width:100%!important;height:100%!important;display:block!important;position:absolute!important;top:0!important;left:0!important}.video-loading{color:#fff;z-index:2;background:#000000b3;border-radius:12px;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.1rem;display:flex;position:absolute;top:0;left:0}.video-loading:after{content:"";border:2px solid #0000;border-top-color:#fff;border-radius:50%;width:20px;height:20px;margin-left:.5rem;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn-video-interactive{cursor:pointer;box-shadow:none;background:0 0;border:none;border-radius:50%;outline:none;margin:0 10px;padding:0;transition:all .2s ease-in-out;position:relative;overflow:hidden}.btn-video-interactive:hover{transform:scale(1.1)}.btn-video-interactive:active{transform:scale(.95)}.btn-video-interactive:focus{outline:none}.btn-video-interactive:after{content:"";opacity:0;pointer-events:none;background:radial-gradient(circle,#519ecf33 0%,#064d7a00 70%);width:100%;height:100%;transition:opacity .2s;position:absolute;top:0;left:0}.btn-video-interactive:not(:disabled):hover:after{opacity:1}#btn-play-pause:hover:not(:disabled){transform:scale(1.15)}#btn-submit:hover:not(:disabled){transform:scale(1.1)}#btn-repeat:hover:not(:disabled),#btn-next:hover:not(:disabled),#btn-back-home:hover:not(:disabled),#btn-back-5s:hover:not(:disabled),#btn-report:hover{transform:scale(1.15)}.btn-video-interactive:disabled{cursor:not-allowed}.video-buttons{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin:1rem 0;display:flex}.video-buttons a{align-items:center;text-decoration:none;display:inline-flex}@media (min-width:1200px){.video-container{max-width:1200px}.youtube-player{min-height:400px}}@media (max-width:768px){.video-container{max-width:95%;margin-bottom:1.5rem;padding:.75rem}.youtube-player{aspect-ratio:16/9;background:#000;border-radius:8px;width:100%;min-height:240px;overflow:hidden}.youtube-player iframe{-o-object-fit:cover;object-fit:cover;border:none;width:100%;height:100%}#player-container,.youtube-player iframe,.youtube-player video,#player-container iframe,#player-container video{border-radius:8px!important}.btn-video-interactive{margin:0 8px}.video-buttons{gap:.75rem;margin:.75rem 0}}@media (max-width:640px){.video-container{max-width:98%;margin-bottom:1rem;padding:.5rem}.youtube-player{aspect-ratio:16/9;border-radius:6px;min-height:200px}#player-container,.youtube-player iframe,.youtube-player video,#player-container iframe,#player-container video{border-radius:6px!important}.btn-video-interactive{margin:0 6px}.video-buttons{gap:.5rem;margin:.5rem 0}}@media (max-width:480px){.video-container{max-width:100%;padding:.25rem}.youtube-player{aspect-ratio:16/9;border-radius:4px;min-height:180px}#player-container,.youtube-player iframe,.youtube-player video,#player-container iframe,#player-container video{border-radius:4px!important}.btn-video-interactive{margin:0 4px}.video-buttons{gap:.4rem;margin:.4rem 0}}@media (max-width:360px){.video-container{padding:.1rem}.youtube-player{aspect-ratio:16/9;border-radius:4px;min-height:140px}.video-buttons{gap:.3rem;margin:.3rem 0}}@media (max-width:768px) and (orientation:landscape){.video-container{max-width:85%}.youtube-player{aspect-ratio:16/9;border-radius:6px;min-height:260px}.video-buttons{margin:.5rem 0}}@media (max-width:640px) and (orientation:landscape){.video-container{max-width:90%}.youtube-player{aspect-ratio:16/9;border-radius:6px;min-height:220px}}@media (hover:none) and (pointer:coarse){.youtube-player{aspect-ratio:16/9;border-radius:6px;min-height:240px}.video-buttons{gap:.8rem;margin:.8rem 0}}@media (max-width:320px){.video-container{margin-bottom:1rem;padding:.05rem}.youtube-player{aspect-ratio:16/9;border-radius:4px;min-height:140px}.video-buttons{gap:.2rem;margin:.2rem 0}}.youtube-player,.youtube-player *,#player-container,#player-container *{visibility:visible!important;opacity:1!important;display:block!important}.youtube-player iframe,#player-container iframe{pointer-events:auto!important;-webkit-user-select:auto!important;user-select:auto!important;min-width:100%!important;max-width:none!important;min-height:100%!important;max-height:none!important;transform:scale(1)!important}@media (prefers-contrast:high){.youtube-player{border:2px solid #000}}@media (prefers-reduced-motion:reduce){.youtube-player,.btn-video-interactive{transition:none}.video-loading:after{animation:none}.btn-video-interactive:hover{transform:none}}
.carousel-container{width:100%;padding:5px}.carousel-section{margin-bottom:2rem;padding:0 20px;position:relative}.carousel-section h2{color:#0f4d7a;text-align:left;margin-bottom:0;padding-left:.5rem;font:600 1.5rem Poppins,sans-serif}.music-carousel{padding-bottom:2rem}.music-thumb{box-sizing:border-box;cursor:pointer;border:none;border-radius:30px;margin:8px auto;padding:0;transition:transform .3s;display:block;overflow:hidden;box-shadow:0 4px 8px #0003;width:240px!important;max-width:280px!important;height:230px!important}.music-thumb:hover{transform:scale(1.05)}.music-thumb .thumbnail{-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin:0;display:block;width:100%!important;height:130px!important}.slick-track{min-width:300px!important;display:flex!important}.single-item-slider{max-width:300px!important;margin:0 auto!important}.single-item-slider .slick-list,.single-item-slider .slick-track{width:300px!important;max-width:300px!important;margin:0 auto!important}.active-filters{margin-bottom:1rem}.no-results{text-align:center;background-color:#0000000d;border-radius:8px;margin:2rem 0;padding:2rem}:root{--swiper-navigation-color:#fff;--swiper-pagination-color:#fff}.results-section{width:100%;padding:0 20px 20px}.results-section h2{color:#0f4d7a;margin-bottom:20px;font:600 1.5rem Poppins,sans-serif}.results-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));justify-content:center;gap:20px;width:100%;display:grid}.results-grid .music-item-wrapper{justify-content:center;width:100%;display:flex}.results-grid .music-thumb{max-width:240px;margin:0;width:100%!important}@media (max-width:768px){.results-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}@media (max-width:480px){.results-grid{grid-template-columns:1fr}}
.navbar-fillthesong{z-index:1000;background-color:#112b3d;justify-content:space-between;align-items:center;width:100%;padding:10px 20px;display:flex;box-shadow:0 2px 10px #0003}.navbar-content{box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;padding:0 15px;display:flex}.navbar-brand,.navbar-toggler{flex-shrink:0;flex-basis:auto}.navbar-brand,.nav-link{text-shadow:0 1px 3px #00000080;font-weight:500;transition:all .3s;color:#fff!important}.navbar-fillthesong .navbar-brand{flex-shrink:1;min-width:0;margin-right:auto}.navbar-fillthesong .nav-link:hover{transform:translateY(-1px);color:#a52916!important}.navbar-logo{width:50px;height:auto;margin-right:10px}.profile-icon{border-radius:50%;width:30px;height:30px;transition:transform .2s}.profile-icon:hover{transform:scale(1.1)}.navbar-fillthesong .navbar-toggler{cursor:pointer;background:#ffffff1a;border:2px solid #ffffffb3;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;margin-left:10px;padding:5px;transition:all .3s;display:flex;position:relative;right:10px}.navbar-fillthesong .navbar-toggler:hover,.navbar-fillthesong .navbar-toggler.active{background:#fff3;border-color:#fff;transform:scale(1.05)}.navbar-fillthesong .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");width:20px;height:20px;transition:transform .3s;display:block}.navbar-fillthesong .navbar-toggler.active .navbar-toggler-icon{transform:rotate(90deg)}.navbar-fillthesong .navbar-collapse{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;z-index:1000;background-color:#112b3d;border:1px solid #ffffff1a;border-radius:12px;width:250px;max-height:0;padding:15px;transition:all .3s;display:block;position:absolute;top:calc(100% + 15px);right:30px;overflow:hidden;transform:translateY(-10px);box-shadow:0 4px 15px #0003}.navbar-fillthesong .navbar-collapse.show{opacity:1;visibility:visible;max-height:300px;transform:translateY(0)}.navbar-fillthesong .navbar-nav{flex-direction:column;width:100%;margin:0;padding:0;list-style:none}.navbar-fillthesong .nav-item{text-align:center;width:100%;margin-bottom:8px}.navbar-fillthesong .nav-link{background:#ffffff1a;border-radius:8px;justify-content:center;align-items:center;width:100%;margin-bottom:5px;padding:10px 15px;transition:all .3s;display:flex}.navbar-fillthesong .nav-link:hover{background:#fff3;transform:translateY(-2px);box-shadow:0 4px 8px #0003;color:#fff!important}.navbar-fillthesong .navbar-collapse:before{content:"";z-index:-1;pointer-events:none;background:0 0;position:fixed;inset:0}.navbar-fillthesong .navbar-collapse.show:before{pointer-events:auto}.navbar-search-container{flex:1;justify-content:center;align-items:center;max-width:none;margin:0 30px;display:flex}@media (min-width:577px){.navbar-collapse .navbar-search-container{display:none}}.navbar-filters-container{width:100%;max-width:600px;position:relative}.navbar-search-input-container{align-items:center;width:100%;display:flex;position:relative}.navbar-search-input{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #ffffff4d;border-radius:25px;width:100%;padding:10px 40px 10px 20px;font-size:15px;transition:all .3s}.navbar-search-input::placeholder{color:#ffffffb3}.navbar-search-input:focus{background:#ffffff26;border-color:#ffffff80;outline:none;box-shadow:0 0 0 2px #ffffff1a}.navbar-filter-toggle{cursor:pointer;color:#fffc;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.navbar-filter-toggle:hover{color:#fff;background-color:#ffffff1a}.navbar-filter-toggle.active{color:#fff;background-color:#fff3}.navbar-filter-toggle .filter-icon-svg{transition:transform .3s}.navbar-filter-toggle.active .filter-icon-svg{transform:rotate(180deg)}.navbar-filters-dropdown{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;visibility:hidden;z-index:1000;background:#f8f9fafa;border-radius:20px;width:90vw;max-width:900px;max-height:calc(100vh - 120px);padding:20px;transition:opacity .3s,transform .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:fixed;top:80px;left:50%;transform:translate(-50%)translateY(-10px);box-shadow:0 15px 40px #00000040}.navbar-filters-dropdown.show{opacity:1;visibility:visible;transform:translate(-50%)translateY(0)}.filters-grid{grid-template-columns:1fr 1fr;gap:25px;width:100%;display:grid;overflow-y:auto}.filter-column{flex-direction:column;gap:20px;min-height:0;display:flex}.filter-section{background:#fff;border-radius:12px;flex-direction:column;min-height:0;padding:15px;display:flex}.filter-section h4{color:#333;text-align:left;border-bottom:1px solid #eee;flex-shrink:0;margin:0 0 15px;padding-bottom:10px;font-size:14px;font-weight:600}.filter-section .grammar-buttons{scrollbar-width:thin;scrollbar-color:#ccc #f1f1f1;flex-grow:1;overflow-y:auto}.filter-section .grammar-buttons::-webkit-scrollbar{width:8px}@media (max-width:768px){.filters-grid{grid-template-columns:1fr}.navbar-filters-dropdown{overflow-y:auto}.navbar-search-container{max-width:none;margin:0 15px}.navbar-filters-dropdown{padding:15px}.navbar-fillthesong .container-fluid{gap:15px}.filters-grid{grid-template-columns:1fr;gap:15px}.navbar-filters-dropdown .style-buttons{grid-template-columns:repeat(4,1fr)}.navbar-filters-dropdown .difficulty-buttons{grid-template-columns:repeat(3,1fr)}.navbar-filters-dropdown .country-filters-container{grid-template-columns:repeat(4,1fr)}.navbar-filters-dropdown .grammar-buttons{gap:4px}.navbar-filters-dropdown .grammar-btn{padding:4px 8px;font-size:11px}}@media (max-width:576px){.navbar-fillthesong .container-fluid{padding:0 15px}.navbar-filters-dropdown .style-buttons{grid-template-columns:repeat(3,1fr);gap:6px}.navbar-filters-dropdown .difficulty-buttons{grid-template-columns:repeat(2,1fr)}.navbar-filters-dropdown .country-filters-container{grid-template-columns:repeat(4,1fr)}.navbar-filters-dropdown{width:90vw;max-height:calc(100vh - 120px);padding:12px;top:70px;box-shadow:0 8px 30px #0003}.filters-grid{gap:12px}.filter-section{padding:10px}.filter-section h4{margin-bottom:8px;padding-bottom:8px;font-size:12px}}@media (max-width:768px){.navbar-fillthesong .container-fluid{padding:0 20px}.navbar-logo{width:40px;margin-right:8px}.profile-icon{width:25px;height:25px}.navbar-fillthesong .navbar-toggler{width:34px;height:34px;right:5px}.navbar-fillthesong .navbar-toggler-icon{width:18px;height:18px}.navbar-fillthesong .navbar-collapse{right:20px}}@media (max-width:480px){.navbar-fillthesong .container-fluid{padding:0 15px}.navbar-fillthesong .navbar-collapse{width:calc(100% - 30px);max-width:300px;margin-left:auto;margin-right:auto;right:15px}.navbar-fillthesong .nav-link{padding:8px 12px;font-size:14px}.navbar-fillthesong .navbar-toggler{width:32px;height:32px;right:0}}@media (min-width:992px){.navbar-expand-lg .navbar-toggler{display:flex!important}}.navbar-fillthesong.navbar-expand-lg{flex-wrap:nowrap}.navbar-expand-lg .navbar-collapse{display:none!important}.navbar-expand-lg .navbar-collapse.show{display:block!important}
.slick-slider{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent;display:block;position:relative}.slick-list{margin:0;padding:0;display:block;position:relative;overflow:hidden}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{transform:translate(0,0)}.slick-track{margin-left:auto;margin-right:auto;display:block;position:relative;top:0;left:0}.slick-track:before,.slick-track:after{content:"";display:table}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{float:left;box-sizing:border-box;height:100%;min-height:1px;margin:10px 5px;padding:0;display:none;width:250px!important;max-width:250px!important;height:auto!important}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-arrow{cursor:pointer;opacity:0;border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;transition:opacity .3s;position:absolute;top:50%;transform:translateY(-50%);color:#fff!important;z-index:1000!important;background-color:#000000b3!important;width:40px!important;height:40px!important;display:flex!important}.carousel-section:hover .slick-arrow{opacity:1}.slick-prev{left:-20px!important}.slick-next{right:-20px!important}.slick-prev:before,.slick-next:before{content:""!important}.slick-arrow:hover{background-color:#000000e6!important}.single-item-carousel .slick-track{justify-content:flex-start;display:flex}.single-item-carousel .slick-slide{margin-right:20px}.slick-dots{text-align:center;width:100%;margin:0;padding:0;list-style:none;display:block;position:absolute;bottom:-25px}.slick-dots li{cursor:pointer;width:20px;height:20px;margin:0 5px;padding:0;display:inline-block;position:relative}.slick-dots li button{cursor:pointer;color:#0000;background:#ddd;border:0;border-radius:50%;outline:none;width:20px;height:20px;padding:5px;font-size:0;line-height:0;display:block}.slick-dots li.slick-active button{background:#999}