:root{--bg-color: #050a10;--glass-bg: rgba(255, 255, 255, .03);--glass-border: rgba(255, 255, 255, .1);--accent-color: #00d2ff;--accent-glow: rgba(0, 210, 255, .5);--text-primary: #ffffff;--text-secondary: #a0a0a0;--surface-color: #0f172a;--transition-speed: .3s;--level-bar-bg: #0d0d0d}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:#000;color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;padding-top:120px}.app-container{max-width:1200px;margin:0 auto;padding:2rem;width:100%}.narrative-strip{position:fixed;left:0;right:0;bottom:100px;z-index:100;padding:10px 16px 14px;max-width:880px;margin:0 auto;display:flex;align-items:center;gap:8px;pointer-events:none;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}.narrative-strip.narrative-strip-visible{opacity:1;transform:translateY(0);pointer-events:auto}.narrative-strip .narrative-scroll-wrap{flex:1;min-height:1.5em;max-height:3.5em;overflow:hidden;display:flex;align-items:center}.narrative-strip .narrative-scroll-wrap::-webkit-scrollbar{width:5px}.narrative-strip .narrative-scroll-wrap::-webkit-scrollbar-thumb{background:#fb923c66;border-radius:3px}.narrative-strip .narrative-text{margin:0;font-family:Lexend,sans-serif;font-size:1.35rem;font-weight:500;line-height:1.5;color:#fb923c;text-align:center;white-space:normal;word-wrap:break-word;transition:opacity .85s ease;width:100%}.narrative-strip .narrative-text.narrative-sentence-out{opacity:0}.narrative-strip .narrative-arrow{flex-shrink:0;width:32px;height:32px;border:1px solid rgba(251,146,60,.6);background:#0a0519e6;color:#fb923c;font-size:1.4rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;transition:background .2s,color .2s}.narrative-strip .narrative-arrow:hover{background:#fb923c33;color:#fff}body.p1-intro-info-hint .narrative-strip{bottom:24px}.corner-avatar{position:fixed;right:24px;bottom:24px;width:220px;height:220px;z-index:1200;pointer-events:auto}.corner-avatar-inner{width:100%;height:100%;border-radius:50%;overflow:hidden;position:relative}.corner-avatar-inner img{width:100%;height:100%;object-fit:cover}.corner-avatar-info{position:absolute;left:50%;bottom:10px;transform:translate(-50%);width:32px;height:32px;border-radius:50%;border:2px solid #00d2ff;background:#00d2ff;color:#000;font-family:Orbitron,sans-serif;font-size:.85rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 16px #00d2ffcc;z-index:1}.corner-avatar-info:hover{background:#fff;border-color:#fff}.corner-avatar-info-hint{position:absolute;left:50%;transform:translate(-50%);bottom:100%;margin-bottom:10px;padding:8px 14px;font-family:Orbitron,sans-serif;font-size:.75rem;color:#fffffff2;background:#000a14f2;border:1px solid rgba(0,210,255,.5);border-radius:8px;max-width:220px;white-space:normal;text-align:center;box-shadow:0 0 20px #00d2ff33;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;pointer-events:none;z-index:2}body.p1-intro-info-hint .corner-avatar-info-hint{opacity:1;visibility:visible}.hint-arrow-down{position:absolute;left:50%;bottom:48px;transform:translate(-50%);font-size:1.5rem;font-weight:700;color:#00d2ff;text-shadow:0 0 12px rgba(0,210,255,.9);opacity:0;visibility:hidden;pointer-events:none;z-index:2;animation:arrow-bounce-down 1s ease-in-out infinite}body.p1-intro-info-hint .hint-arrow-down{opacity:1;visibility:visible}@keyframes arrow-bounce-down{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(6px)}}body.p1-intro-info-hint .corner-avatar-info{animation:info-btn-pulse 2s ease-in-out infinite}@keyframes info-btn-pulse{0%,to{box-shadow:0 0 16px #00d2ffcc;transform:translate(-50%) scale(1)}50%{box-shadow:0 0 24px #00d2ff,0 0 40px #00d2ff66;transform:translate(-50%) scale(1.08)}}body.welcome-screen .pentagon-wrapper{left:50%;top:50%;transform:translate(-50%,-50%);margin:0}body.welcome-screen .toggle-btn-container,body.welcome-screen .corner-avatar-info{display:none}body.welcome-screen .pattern-strip,.pattern-strip.pattern-strip-hidden{display:none!important}.pattern-strip{position:fixed;left:50%;transform:translate(-50%);top:132px;z-index:100;display:flex;align-items:center;gap:14px;pointer-events:none}.pattern-strip-box{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;font-family:Orbitron,sans-serif;font-size:.95rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#e5e7ebf2;min-width:140px;text-align:center;background:linear-gradient(165deg,#1a1d24,#0f1218 45%,#0a0c10);border:1px solid rgba(0,210,255,.35);border-radius:10px;box-shadow:inset 0 1px #ffffff0f,0 0 20px #00d2ff1a}.pattern-strip-box:nth-child(2){color:#00d2ff;text-shadow:0 0 10px rgba(0,210,255,.4)}.pattern-det-box{background:linear-gradient(165deg,#fef08a,#fde047,#facc15);color:#000;border:1px solid #000;border-radius:10px;box-shadow:inset 0 1px #fff3,inset 0 -1px #0000001f,0 0 12px #fde04726}.pattern-strip-box:nth-child(2):before{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:90px;width:72px;height:72px;background:linear-gradient(165deg,#1a1d24,#0f1218);border:1px solid rgba(0,210,255,.5);border-radius:4px;box-shadow:0 0 12px #00d2ff26}.pattern-intro-center{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;padding-top:162px;overflow:visible}.pattern-intro-center.determinante-layout{padding-top:24px}.determinante-diagram-caja{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;padding:28px 24px;border:none;border-radius:0;clip-path:polygon(28px 0,100% 0,100% 100%,0 100%,0 28px);background-color:#00000040;background-image:linear-gradient(#00d2ff,#00d2ff),linear-gradient(#00d2ff,#00d2ff),linear-gradient(#00d2ff,#00d2ff),linear-gradient(#00d2ff,#00d2ff);background-size:calc(100% - 28px) 2px,2px calc(100% - 28px),2px 100%,100% 2px;background-position:28px 0,0 28px,100% 0,0 100%;background-repeat:no-repeat}.determinante-diagram-caja:before{content:"";position:absolute;left:28px;top:0;width:39.6px;height:2px;background:#00d2ff;transform-origin:left center;transform:rotate(135deg);z-index:1}.vector-square-to-sustantivo{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}.intro-object-square{position:absolute;left:50%;top:14%;transform:translate(-50%,-50%);width:72px;height:72px;background:#0f1218;border:1px solid rgba(0,210,255,.5);border-radius:4px;box-shadow:0 0 12px #00d2ff26;z-index:3}.pattern-intro-center.determinante-layout .intro-object-square{left:62%}.pattern-intro-center.determinante-layout .pattern-strip-box:not(.pattern-det-box){background:linear-gradient(165deg,#6bb0ed,#5ba3e8,#4292dc);border:1px solid #000;border-radius:10px;box-shadow:inset 0 1px #ffffff14,inset 0 -1px #00000026,0 0 12px #60a5fa1f;color:#000;text-shadow:none;min-width:76px;padding:8px 12px}.pattern-intro-center.determinante-layout .pattern-det-box{min-width:76px;padding:8px 12px}.pattern-intro-center .pattern-strip-box:nth-child(2):before{display:none}.pattern-intro-center .pattern-strip-box{position:relative;z-index:1}.pattern-cols{display:flex;align-items:flex-start;justify-content:center;gap:14px}.pattern-col{display:flex;flex-direction:column;align-items:stretch;gap:10px}.pattern-col .pattern-strip-box{min-width:140px}.pattern-col .pattern-example-box{width:100%;box-sizing:border-box;min-width:0;text-transform:none;opacity:0;transform:translateY(16px) scale(.96);filter:blur(3px);pointer-events:none;transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),filter 1s cubic-bezier(.16,1,.3,1)}body.p1-intro-examples-visible .pattern-col .pattern-example-box{opacity:1;transform:translateY(0) scale(1);filter:blur(0);pointer-events:auto}body.p1-intro-examples-visible .pattern-col .pattern-example-box.sentence-1{transition-delay:.08s}body.p1-intro-examples-visible .pattern-col .pattern-example-box.sentence-2{transition-delay:.75s}.pattern-intro-center .pattern-cols .pattern-col .pattern-strip-box{background:linear-gradient(165deg,#6bb0ed,#5ba3e8,#4292dc);border:1px solid #000;box-shadow:inset 0 1px #ffffff14,inset 0 -1px #00000026,0 0 12px #60a5fa1f;color:#000;text-shadow:none}.pattern-intro-center .pattern-cols .pattern-col:nth-child(2) .pattern-strip-box{color:#000;text-shadow:none}.pattern-cols .pattern-col:nth-child(2) .pattern-strip-box{color:#00d2ff;text-shadow:0 0 10px rgba(0,210,255,.4)}.pattern-example-row{margin-top:18px;display:flex;flex-basis:100%;align-items:center;justify-content:center;gap:18px}.pattern-example-box{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:6px 18px;font-family:Orbitron,sans-serif;font-size:.9rem;font-weight:600;letter-spacing:.05em;text-transform:none;color:#e5e7ebf2;min-width:140px;text-align:center;background:linear-gradient(165deg,#1a1d24,#0f1218 45%,#0a0c10);border:1px solid rgba(0,210,255,.35);border-radius:10px;box-shadow:inset 0 1px #ffffff0f,0 0 14px #00d2ff1f}.topic-card.welcome-locked{pointer-events:none;opacity:.4;cursor:default}.topic-card-label{font-family:Orbitron,sans-serif;font-size:.85rem;font-weight:700;color:#ffffffe6;pointer-events:none}.level-info-panel{position:fixed;inset:0;background:#000000bf;display:none;align-items:center;justify-content:center;z-index:1300}.level-info-panel.visible{display:flex}.level-info-panel.pattern-intro-placement{background:transparent;align-items:flex-end;justify-content:flex-end;pointer-events:none}.level-info-panel.pattern-intro-placement .level-info-card{pointer-events:auto;margin-right:24px;margin-bottom:256px;max-width:320px;max-height:70vh;overflow-y:auto;flex-shrink:0}.level-info-card{background:#050a10;border-radius:16px;border:1px solid rgba(0,210,255,.4);box-shadow:0 0 24px #00d2ff73;padding:24px 32px;max-width:480px;width:90%;color:#e5e7eb;font-family:Lexend,sans-serif;text-align:left;position:relative}.level-info-title{font-family:Orbitron,sans-serif;font-size:1.3rem;letter-spacing:4px;color:#00d2ff;margin-bottom:12px}.level-info-body{font-size:.95rem;line-height:1.5}.level-info-text{margin-bottom:8px}.level-info-summary{margin-top:10px;font-size:.9rem;color:#e5e7ebe6}.level-info-puntos{list-style:none;margin:0;padding:0}.level-info-punto{margin-bottom:12px;padding-left:1em;position:relative;font-size:.95rem;color:#e5e7ebf2;line-height:1.45}.level-info-punto:before{content:"";position:absolute;left:0;top:.5em;width:4px;height:4px;background:#00d2ffb3;border-radius:50%}.level-info-punto:last-child{margin-bottom:0}.level-info-pattern-label{margin-top:16px;margin-bottom:12px;font-family:Orbitron,sans-serif;font-size:.95rem;font-weight:600;color:#00d2ff;text-align:center;letter-spacing:.04em}.level-info-narrativa{margin-top:0;padding:12px 14px;background:#00000040;border-radius:8px;border-left:3px solid rgba(0,210,255,.4)}.level-info-oracion{margin:0 0 10px;font-size:1rem;line-height:1.5;color:#e5e7ebf2;font-style:italic}.level-info-oracion:last-child{margin-bottom:0}.level-info-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:.9rem}.level-info-table th,.level-info-table td{border:none;padding:6px 8px;text-align:left}.level-info-table th{background:#0f172ae6;color:#e5e7eb;font-weight:600}.level-info-table tbody tr:nth-child(2n){background:#0f172a99}.level-stats-total{margin:10px 0 6px;font-size:.95rem;color:#e5e7ebf2}.level-info-close{position:absolute;top:8px;right:10px;background:transparent;border:none;color:#9ca3af;font-size:1.4rem;cursor:pointer}.level-info-close:hover{color:#fff}header{margin-bottom:4rem;text-align:center;animation:fadeInDown 1s ease-out}h1{display:none}.top-nav-bar{position:fixed;top:0;left:0;width:100%;height:120px;background:#000;display:flex;align-items:center;padding:0 40px;z-index:1000;overflow:hidden;transition:transform .8s ease-in-out,opacity .8s ease-in-out}.back-to-palette-btn{position:absolute;top:50%;left:20px;transform:translateY(-50%);width:36px;height:36px;padding:0;border:1px solid rgba(0,210,255,.4);border-radius:8px;background:#00d2ff14;color:#00d2ff;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,box-shadow .2s}.back-to-palette-btn:hover{background:#00d2ff33;color:#fff;box-shadow:0 0 12px #00d2ff66}.reset-progress-btn{position:absolute;top:50%;right:20px;transform:translateY(-50%);width:28px;height:28px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:6px;background:#ffffff0f;color:#fff9;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}.reset-progress-btn:hover{background:#ffffff1f;color:#fff}.top-nav-two-boxes{position:absolute;left:50%;transform:translate(-50%);display:flex;align-items:stretch;justify-content:center;gap:20px}.top-nav-box-wrap{padding:1px}.top-nav-box-wrap:after{content:"";position:absolute;inset:0;pointer-events:none;background:#00d2ff80;clip-path:polygon(0 calc(100% - 16px),16px 100%,calc(100% - 16px) 100%,100% calc(100% - 16px),100% 16px,calc(100% - 16px) 0,16px 0,0 16px);z-index:0}.top-nav-box-wrap{position:relative;display:flex}.top-nav-pattern-box.patron01-caja,.top-nav-pattern-box{position:relative;z-index:1;display:flex;align-items:stretch;justify-content:center;flex:1;min-width:0;gap:20px;padding:8px 24px;background:linear-gradient(165deg,#1a1d24,#0f1218 42%,#0a0c10);box-shadow:inset 0 1px #ffffff0f,inset 0 -1px #0000004d,0 6px 20px #00000059,0 0 24px #00d2ff14;clip-path:polygon(0 calc(100% - 16px),16px 100%,calc(100% - 16px) 100%,100% calc(100% - 16px),100% 16px,calc(100% - 16px) 0,16px 0,0 16px)}.top-nav-pattern-box:has(.pattern-label.selected){background:#0d3d4d}.top-nav-habilidades-box{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex:1;min-width:0;padding:8px 20px;background:linear-gradient(165deg,#1a1d24,#0f1218 42%,#0a0c10);box-shadow:inset 0 1px #ffffff0f,inset 0 -1px #0000004d,0 6px 20px #00000059,0 0 24px #00d2ff14;clip-path:polygon(0 calc(100% - 16px),16px 100%,calc(100% - 16px) 100%,100% calc(100% - 16px),100% 16px,calc(100% - 16px) 0,16px 0,0 16px)}.pattern-label{font-family:Orbitron,sans-serif;color:var(--accent-color);font-size:1.35rem;text-shadow:none;transition:transform .8s ease-in-out,opacity .8s ease-in-out,background .2s;background:transparent;border:none;border-radius:8px;padding:10px 28px;cursor:pointer;box-shadow:none;flex-shrink:0;display:flex;align-items:center;justify-content:center}.pattern-label:hover{color:#fff;text-shadow:0 0 20px var(--accent-glow)}.pattern-label.selected{color:#fff;background:#0d3d4d;box-shadow:none;text-shadow:none}.habilidades-btn{font-family:Orbitron,sans-serif;color:var(--accent-color);font-size:1.35rem;text-shadow:none;transition:border-color .2s,background .2s,color .2s;background:transparent;border:1px solid rgba(0,210,255,.35);border-radius:8px;padding:10px 28px;display:flex;align-items:center;gap:12px;cursor:pointer;box-shadow:none;flex-shrink:0}.habilidades-btn:hover{color:#fff;text-shadow:0 0 18px var(--accent-glow);border-color:#00d2ff80;box-shadow:0 0 16px #00d2ff26}.habilidades-btn.selected{color:#fff;background:#0d3d4d;border-color:#00d2ff66;box-shadow:none;text-shadow:none}.habilidades-btn .habilidades-progress{opacity:.9;font-size:.8rem;font-weight:500;color:#e5e7ebd9;border-left:1px solid rgba(0,210,255,.25);padding-left:12px;letter-spacing:.05em}.subtopics-list{display:flex;justify-content:center;align-items:center;flex-shrink:0}.subtopics-casco{--casco-chamfer: 16px;position:relative;display:flex;justify-content:center;align-items:center;gap:0;padding:10px 20px 10px 24px;background:linear-gradient(165deg,#1a1d24,#0f1218 40%,#0a0c10);box-shadow:inset 0 1px #ffffff0f,inset 0 -1px #00000059,0 6px 20px #00000059,0 0 24px #00d2ff1a;clip-path:polygon(0 calc(100% - var(--casco-chamfer)),var(--casco-chamfer) 100%,calc(100% - var(--casco-chamfer)) 100%,100% calc(100% - var(--casco-chamfer)),100% var(--casco-chamfer),calc(100% - var(--casco-chamfer)) 0,var(--casco-chamfer) 0,0 var(--casco-chamfer))}.subtopics-casco:before{content:"";position:absolute;inset:2px;clip-path:polygon(0 calc(100% - 14px),14px 100%,calc(100% - 14px) 100%,100% calc(100% - 14px),100% 14px,calc(100% - 14px) 0,14px 0,0 14px);background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 45%);pointer-events:none}.subtopics-casco-wrap{position:relative;display:inline-flex;padding:1px}.subtopics-casco-wrap:after{content:"";position:absolute;inset:0;pointer-events:none;background:#00d2ff80;clip-path:polygon(0 calc(100% - 16px),16px 100%,calc(100% - 16px) 100%,100% calc(100% - 16px),100% 16px,calc(100% - 16px) 0,16px 0,0 16px);z-index:0}.subtopics-casco-wrap .subtopics-casco{position:relative;z-index:1}.squares-group{display:flex;gap:28px;flex:1;align-items:center}.squares-group.left{justify-content:flex-end}.squares-group.right{justify-content:flex-start}.subtopic-item.square{width:14px;height:14px;background:#1a1a1a;cursor:pointer;transition:all .3s ease;flex-shrink:0}.subtopic-item.square:hover{background:#444;transform:scale(1.2)}.subtopic-item.square.locked{background:#0d0d0d;opacity:.5}.subtopic-item.square.locked:hover{background:#0d0d0d;transform:none}.subtopics-casco .subtopic-item.square{background:#ffffff14}.subtopics-casco .subtopic-item.square:hover{background:#ffffff2e}.subtopics-casco .subtopic-item.square.locked{background:#ffffff0a;opacity:.7}.subtopic-item.active{position:relative;z-index:1;background:transparent;color:#e5e7eb;padding:10px 28px;font-family:Orbitron,sans-serif;font-weight:600;font-size:1.35rem;letter-spacing:.06em;display:flex;align-items:center;gap:12px;margin:0 20px;border:1px solid rgba(0,210,255,.4);border-radius:8px;box-shadow:none;text-transform:uppercase;flex-shrink:0}.subtopic-item.active.subtopic-selected{background:#0d3d4d}.subtopic-item.active .subtopic-name{color:#00d2ff;text-shadow:none}.subtopic-item.active .subtopic-progress{position:relative}.subtopic-progress{opacity:.9;font-size:.8rem;font-weight:500;color:#e5e7ebd9;border-left:1px solid rgba(0,210,255,.25);padding-left:12px;letter-spacing:.05em}.top-line-accent{position:absolute;top:0;left:50%;width:60%;transform:translate(-50%);height:1px;background:var(--accent-color);box-shadow:0 0 10px var(--accent-glow);opacity:.5}.bottom-nav-bar{position:fixed;bottom:14px;left:50%;transform:translate(-50%);width:560px;max-width:560px;height:84px;display:flex;justify-content:center;align-items:center;z-index:1000;transition:transform .8s ease-in-out,opacity .8s ease-in-out;pointer-events:none}.bottom-nav-bar>*{pointer-events:auto}.level-bar-outer-wrap{position:relative;display:flex;padding:1px;width:100%;height:100%;box-sizing:border-box}.level-bar-outer-wrap:after{content:"";position:absolute;inset:0;pointer-events:none;background:#00d2ff80;clip-path:polygon(0 calc(100% - 16px),16px 100%,calc(100% - 16px) 100%,100% calc(100% - 16px),100% 16px,calc(100% - 16px) 0,16px 0,0 16px);z-index:0}.level-bar-outer-box{position:relative;z-index:1;display:flex;align-items:stretch;justify-content:center;flex:1;min-width:0;padding:8px 12px;background:linear-gradient(165deg,#1a1d24,#0f1218 42%,#0a0c10);box-shadow:inset 0 1px #ffffff0f,inset 0 -1px #0000004d,0 6px 20px #00000059,0 0 24px #00d2ff14;clip-path:polygon(0 calc(100% - 16px),16px 100%,calc(100% - 16px) 100%,100% calc(100% - 16px),100% 16px,calc(100% - 16px) 0,16px 0,0 16px);box-sizing:border-box}.level-bar-outer-box:has(.level-bar-label-btn.selected){background:#0d3d4d;box-shadow:0 0 24px #00d2ff1f}.level-bar-two-boxes{display:flex;align-items:stretch;justify-content:center;gap:12px;width:100%;height:100%;padding:0;box-sizing:border-box}.level-bar-box-wrap{position:relative;display:flex;padding:1px}.level-bar-box-wrap:after{content:"";position:absolute;inset:0;pointer-events:none;background:#00d2ff80;clip-path:polygon(0 calc(100% - 16px),16px 100%,calc(100% - 16px) 100%,100% calc(100% - 16px),100% 16px,calc(100% - 16px) 0,16px 0,0 16px);z-index:0}.level-bar-box{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-width:0;padding:8px 16px;background:linear-gradient(165deg,#1a1d24,#0f1218 42%,#0a0c10);box-shadow:inset 0 1px #ffffff0f,inset 0 -1px #0000004d,0 6px 20px #00000059,0 0 24px #00d2ff14;clip-path:polygon(0 calc(100% - 16px),16px 100%,calc(100% - 16px) 100%,100% calc(100% - 16px),100% 16px,calc(100% - 16px) 0,16px 0,0 16px)}.level-bar-box-wrap:has(.level-bar-label-caja):after{display:none}.level-bar-box.level-bar-label-caja{background:transparent;box-shadow:none;clip-path:none}.level-bar-box.level-bar-label-caja:has(.level-bar-label-btn.selected){background:#0d3d4d}.level-bar-box-wrap:has(.level-bar-label-btn.selected){background:#0d3d4d;border-radius:6px}.level-bar-label-caja{flex:0 0 auto;width:88px;display:flex;align-items:stretch;transform:translate(0)}.level-bar-label-btn{width:100%;font-family:Orbitron,sans-serif;font-size:1.15rem;font-weight:600;letter-spacing:2px;color:#00d2ffe6;text-shadow:0 0 8px rgba(0,210,255,.3);background:transparent;border:none;border-radius:6px;padding:8px 12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s,color .2s;box-shadow:none}.level-bar-label-btn.selected{color:#fff;background:#0d3d4d!important;box-shadow:none;text-shadow:none}.level-bar-label-btn .level-bar-label{pointer-events:none}.level-bar-label{font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit;text-shadow:inherit}.level-bar-levels-caja{flex:1;position:relative;min-width:0;display:flex;justify-content:center;align-items:center;padding:0 8px;box-sizing:border-box}.bottom-nav-bar .level-photon-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}.bottom-nav-bar .levels-container{position:relative;z-index:2;max-width:100%;display:flex;justify-content:center;align-items:center;width:100%}.translation-container{position:absolute;bottom:110px;left:50%;transform:translate(-50%);max-width:80%;background:transparent;padding:5px 40px;animation:slideUpFade .3s ease-out;pointer-events:none;z-index:999;overflow:hidden}.translation-text{font-family:Lexend,sans-serif;color:#ff8c00;font-size:1.15rem;font-weight:500;text-transform:none;letter-spacing:.5px;text-shadow:0 0 10px rgba(255,140,0,.4);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes slideUpFade{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.game-ui-container{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:24px;padding-bottom:140px;pointer-events:none;z-index:10}.game-header.game-header-practice,.repaso-header{width:90%;max-width:640px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:Orbitron,sans-serif;color:var(--accent-color);font-size:1.2rem;margin-bottom:24px;text-shadow:0 0 10px var(--accent-glow);pointer-events:auto}.repaso-title{flex:1;text-align:center;font-size:1.1rem}.game-header{width:90%;max-width:640px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:Orbitron,sans-serif;color:var(--accent-color);font-size:1.2rem;margin-bottom:24px;text-shadow:0 0 10px var(--accent-glow);pointer-events:auto}.game-header-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}.game-header-practice .game-lvl-tag{display:block}.game-header-practice .game-progress-bar{width:100%;max-width:320px;margin-bottom:0}.game-header-practice .game-progress-bar{height:12px;border:1px solid var(--accent-color);background:#00000080;position:relative;pointer-events:auto}.game-progress-fill{height:100%;background:var(--accent-color);box-shadow:0 0 15px var(--accent-glow);transition:width .5s cubic-bezier(.4,0,.2,1)}.game-btn{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:2px solid var(--accent-color);background:transparent;color:var(--accent-color);font-family:Orbitron,sans-serif;font-size:1.25rem;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}.game-btn:hover{background:#00d2ff26;box-shadow:0 0 12px var(--accent-glow)}.game-back-btn{font-size:1.4rem;line-height:1}.game-info-btn{position:fixed;bottom:24px;right:24px;font-size:1.35rem;font-weight:700;font-style:italic;z-index:1002}.game-layout{gap:30px;pointer-events:auto;margin:0 auto;width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center}.sentence-box.game-box{background:#0009;border:2px solid var(--accent-color);box-shadow:0 0 12px #00d2ff33;clip-path:polygon(30px 0%,100% 0%,100% 100%,0% 100%,0% 30px);width:100%;min-width:320px;min-height:80px;padding:25px 45px;transition:all .3s ease;cursor:pointer;display:flex;align-items:center;justify-content:center}.sentence-box.game-box:hover{box-shadow:0 0 24px var(--accent-glow);transform:scale(1.02)}.sentence-box.game-box.revealed{background:#fc0;border-color:#e6b800;box-shadow:0 0 20px #fc06}.revealed-content{width:100%;display:flex;flex-direction:column;gap:12px;transition:opacity .5s ease;text-align:center}.game-box .sentence-text{color:#fff;font-size:1.5rem;font-weight:400;font-family:Lexend,sans-serif;text-align:center;width:100%}.sentence-box.game-box.revealed .sentence-text{color:#1a1a1a}.game-box .sentence-text strong{font-weight:600}.game-translation-bottom{position:fixed;bottom:100px;left:0;right:0;width:100%;display:flex;align-items:center;justify-content:center;padding:8px 16px;background:none;border:none;box-shadow:none;z-index:1001;pointer-events:none}.game-translation-text{font-family:Lexend,sans-serif;color:#ff8c00;font-size:1.25rem;font-weight:600;text-align:center;text-shadow:0 0 12px rgba(255,140,0,.5),0 1px 2px rgba(0,0,0,.8);max-width:90%;margin:0 auto;display:block}.nav-hidden .top-nav-bar{transform:translateY(-100%);opacity:0}.nav-hidden .bottom-nav-bar{transform:translate(-50%) translateY(100%);opacity:0}.level-photon{position:absolute;pointer-events:none;transition:left 1.5s ease-out,top 1.5s ease-out,opacity .35s ease-out}.level-photon-square{width:9px;height:9px;margin-left:-4.5px;margin-top:-4.5px;border-radius:0;background:#00d2ff;box-shadow:0 0 10px #00d2ffe6,0 0 20px #00d2ff80}.level-photon-fade{opacity:0}.level-item.dot.level-receiving{transform:scale(2)}.nav-hidden .pentagon-wrapper{transform:translateY(-50%) scale(0);opacity:0;pointer-events:none}.nav-hidden .toggle-btn-container{transform:translate(-50%) scale(0);opacity:0;pointer-events:none}.game-mode .translation-container{display:none!important}.game-mode .game-ui-container{padding-bottom:140px}.levels-container{flex-grow:1;display:flex;justify-content:center;align-items:center;width:100%;margin:0 auto;padding-top:44px;padding-bottom:4px;min-width:0}.levels-scroll{overflow-x:auto;overflow-y:hidden;width:400px;max-width:100%;padding:6px 10px 22px;margin:0 auto;background:transparent;border-radius:0;scrollbar-width:thin;scrollbar-color:rgba(0,210,255,.4) transparent;min-height:52px}.levels-scroll::-webkit-scrollbar{height:6px}.levels-scroll::-webkit-scrollbar-track{background:#ffffff0a;border-radius:3px}.levels-scroll::-webkit-scrollbar-thumb{background:#00d2ff66;border-radius:3px}.levels-row{display:flex;align-items:center;gap:24px;flex-wrap:nowrap;width:max-content;min-width:min-content;padding-top:14px;margin-bottom:12px;transform:translateY(-8px)}.levels-row>*{flex-shrink:0}.level-slot{flex-shrink:0;width:52px;min-width:52px;height:52px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index:1;-webkit-tap-highlight-color:transparent;outline:none}.level-slot.locked{opacity:.9;pointer-events:none}.level-slot.locked .level-item.dot{transition:transform .25s ease,box-shadow .25s ease;cursor:default}.levels-map .level-slot.locked .level-item.dot:hover{background:#1e1e1e!important;transform:none!important;box-shadow:none!important}.levels-map .level-slot.next-to-play .level-item.dot:hover{transform:scale(1.2)!important;box-shadow:0 0 12px #fff3!important}.levels-map .level-slot.next-to-play .level-item.dot.completed:hover{transform:scale(1.2)!important;box-shadow:0 0 12px #0d948866!important}.level-item{position:relative;z-index:1}.level-item{cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,width .4s ease,height .4s ease,border-color .4s ease}.level-item.dot{width:24px;height:24px;min-width:24px;min-height:24px;flex-shrink:0;background:#1e1e1e;border-radius:8px;border:2px solid transparent;display:flex;align-items:center;justify-content:center}.level-item.dot.completed{background:linear-gradient(145deg,#0d9488,#0f766e);border-color:#ffffff1a;box-shadow:0 0 8px #0d948866}.level-item.dot.completed .level-number.inactive{color:#ffffffd9}.levels-map .level-item.active.completed{background:linear-gradient(145deg,#0d9488,#0f766e)}.level-item.dot .level-number.inactive{font-family:Orbitron,sans-serif;font-size:.5rem;font-weight:600;color:#fff6;line-height:1}.level-slot .level-item.dot.active{width:48px;height:48px;min-width:48px;min-height:48px;border-radius:12px;border-color:#ffffff26;box-shadow:0 0 10px #ffffff1a}.level-slot[data-level="1"] .level-item.dot.active{animation:activeSphereGrow .45s ease-out}@keyframes activeSphereGrow{0%{transform:scale(.5);opacity:.7}to{transform:scale(1);opacity:1}}.level-item.dot:hover{background:#444;transform:scale(1.2);box-shadow:0 0 12px #fff3}.levels-map .level-item.active{display:flex;justify-content:center;align-items:center;background:#1e1e1e}.level-item.active .level-number{font-weight:700;font-family:Orbitron,sans-serif;font-size:1.15rem;line-height:1;color:#ffffffe6;text-shadow:0 1px 2px rgba(0,0,0,.5);max-width:100%;overflow:hidden;text-overflow:ellipsis;transition:font-size .4s ease,opacity .35s ease}.pentagon-wrapper{position:absolute;left:50px;top:50%;transform:translateY(-50%);transform-origin:center center;width:400px;height:400px;display:flex;justify-content:center;align-items:center;transition:transform .8s ease-in-out,opacity .8s ease-in-out;opacity:1;pointer-events:all}#app{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.pentagon-wrapper.hidden{opacity:0;pointer-events:none;transform:translateY(-50%) translate(-50px)}#detail-container{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none;z-index:5}#detail-container>*{pointer-events:auto}.habilidades-cuadro-wrap{display:flex;justify-content:center;align-items:center;width:100%;min-height:280px;padding:24px}.habilidades-cuadro{background:#0d3d4d;border:1px solid rgba(0,210,255,.4);border-radius:12px;padding:28px 40px;min-width:320px;box-shadow:0 8px 32px #0006}.habilidades-cuadro-title{font-family:Orbitron,sans-serif;font-size:1.25rem;color:#00d2ff;text-align:center;margin-bottom:20px;letter-spacing:.08em}.habilidades-cuadro-list{display:flex;flex-direction:column;gap:12px}.habilidades-cuadro-item{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#0003;border-radius:8px;border:1px solid rgba(255,255,255,.08)}.habilidades-cuadro-name{font-family:Orbitron,sans-serif;font-weight:600;color:#e5e7eb;letter-spacing:.04em}.habilidades-cuadro-pct{font-family:Orbitron,sans-serif;color:#00d2ff;font-weight:500}.level-stats-cuadro-wrap{display:flex;justify-content:center;align-items:center;width:100%;min-height:280px;padding:24px}.level-stats-cuadro{background:#0d3d4d;border:1px solid rgba(0,210,255,.4);border-radius:12px;padding:28px 40px;min-width:320px;max-width:520px;box-shadow:0 8px 32px #0006}.level-stats-cuadro-title{font-family:Orbitron,sans-serif;font-size:1.25rem;color:#00d2ff;text-align:center;margin-bottom:20px;letter-spacing:.08em}.level-stats-cuadro-content{color:#e5e7ebf2}.level-stats-cuadro-content .level-stats-total.center{text-align:center;margin:0 0 12px}.level-stats-cuadro-content .level-info-table{margin-top:8px}.exercise-layout{width:fit-content;display:flex;flex-direction:column;gap:15px;pointer-events:auto}.sentence-box{background:#fc0;border:2px solid #00d2ff;padding:15px 40px 15px 45px;position:relative;clip-path:polygon(15px 0%,100% 0%,100% 100%,0% 100%,0% 15px);display:flex;justify-content:flex-start;align-items:center;min-height:50px;box-shadow:0 4px 15px #0000004d;transition:transform .2s ease;cursor:default}.sentence-text{color:#000;font-size:1.2rem;font-weight:400;font-family:Lexend,sans-serif;text-align:left;width:100%}.sentence-text strong{font-weight:600}.level-start-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;width:100%;padding:20px}.start-screen{border:3px solid #00d2ff;padding:24px 48px;background:#000c;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 0 30px #00d2ff33,inset 0 0 20px #00d2ff1a;transition:all .3s ease;min-width:200px;pointer-events:auto;position:relative;z-index:50}.start-screen.hiding{animation:startFadeOut .8s ease-in-out forwards;pointer-events:none}@keyframes startFadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.85)}}.start-screen:hover{transform:scale(1.05);box-shadow:0 0 50px #00d2ff66;border-color:#fff}.start-screen-prompt{cursor:inherit;pointer-events:none;border:none;background:transparent;box-shadow:none;padding:0;min-width:0;font-family:Orbitron,sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:.2em;color:#00d2ff;text-shadow:0 0 10px rgba(0,210,255,.5)}.start-screen-prompt:hover{transform:none;box-shadow:none;border-color:transparent}.start-avatar{width:640px;height:auto;max-height:780px;object-fit:contain}.start-label{font-family:Orbitron,Segoe UI,sans-serif;color:#00d2ff;font-size:2.25rem;font-weight:700;letter-spacing:12px;text-align:center;text-shadow:0 0 10px var(--accent-glow),0 0 20px rgba(0,210,255,.6)}.level-title{font-family:Orbitron,Segoe UI,sans-serif;color:#fff;font-size:2.5rem;letter-spacing:8px;text-shadow:0 0 20px var(--accent-glow)}.toggle-btn-container{position:fixed;bottom:30px;left:250px;transform:translate(-50%);transform-origin:center center;transition:transform .8s ease-in-out,opacity .8s ease-in-out;z-index:1100}.toggle-btn{width:60px;height:60px;background:var(--accent-color);clip-path:polygon(50% 0%,100% 38%,81% 100%,19% 100%,0% 38%);cursor:pointer;border:none;transition:transform .3s ease;box-shadow:0 0 20px var(--accent-glow)}.toggle-btn:hover{transform:scale(1.1)}.orbital-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid rgba(0,210,255,.15);border-radius:50%;pointer-events:none;z-index:0}.ring-inner{width:200px;height:200px}.ring-outer{width:280px;height:280px;border-style:solid}.topic-card{position:absolute;width:65px;height:65px;background:#ffffff0d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);clip-path:polygon(50% 0%,100% 38%,81% 100%,19% 100%,0% 38%);display:flex;justify-content:center;align-items:center;cursor:pointer;transition:transform .3s cubic-bezier(.4,0,.2,1),background .3s ease,box-shadow .3s ease;border:none;transform:var(--pos-transform, none)}.topic-card.active{background:#00d2ff66;box-shadow:0 0 25px var(--accent-glow);z-index:10;transform:var(--pos-transform, none) scale(1.05)}.topic-card.center-piece{width:75px;height:75px;background:#00d2ff0d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(0,210,255,.2);cursor:pointer;z-index:1;--pos-transform: translate(0, 0);display:flex;justify-content:center;align-items:center;box-shadow:inset 0 0 15px #00d2ff1a,0 0 20px #00d2ff0d;transition:all .3s ease}.topic-card.center-piece.active{background:#00d2ff66;box-shadow:inset 0 0 20px #00d2ff4d,0 0 30px var(--accent-glow);border-color:var(--accent-color)}.topic-card.center-piece h3{font-size:1.5rem;color:var(--accent-color);text-shadow:0 0 10px var(--accent-glow);font-family:serif}.pattern-0{--pos-transform: rotate(0deg) translateY(-100px) rotate(0deg)}.pattern-1{--pos-transform: rotate(72deg) translateY(-100px) rotate(-72deg)}.pattern-2{--pos-transform: rotate(144deg) translateY(-100px) rotate(-144deg)}.pattern-3{--pos-transform: rotate(216deg) translateY(-100px) rotate(-216deg)}.pattern-4{--pos-transform: rotate(288deg) translateY(-100px) rotate(-288deg)}.topic-card:hover:not(.center-piece){transform:var(--pos-transform) scale(1.1);z-index:20}.topic-card h3{font-size:.9rem;color:#fff;font-weight:700;pointer-events:none;font-family:Inter,sans-serif}.topic-card.active h3{color:#000}.status-badge{display:none}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){h1{font-size:2rem}.app-container{padding:1rem}}