:root{--font-base: 1rem;--font-medium: 1.4rem;--font-large: 2rem;--font-xl: 3.5rem;--font-xxl: 6rem;--square-size: 100px;--square-size-mobile: 45px;--padding-base: 20px;--border-radius: 15px;--border-radius-small: 10px;--shadow-glow: 0 0 20px rgba(255, 215, 0, .4);--shadow-strong: 0 10px 30px rgba(0, 0, 0, .8);--color-primary: #ffd700;--color-secondary: #16213e;--color-accent: #dc3545;--color-text: #eee;--color-bg: linear-gradient(135deg, #1a1a2e, #16213e)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100vh;line-height:1}.app-root{text-align:center;padding:var(--padding-base)}.header-title{display:flex;align-items:center;justify-content:center;gap:50px;margin:-10px 0;padding:0 20px}.header-title h1{font-size:var(--font-xxl);color:var(--color-primary);text-shadow:var(--shadow-glow);letter-spacing:3px}.logo{width:120px;height:auto;border-radius:50%;box-shadow:var(--shadow-glow);transition:transform .3s;z-index:1}.logo:hover{transform:scale(1.05)}.loading,.username-setup{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--color-bg);padding:var(--padding-base)}.loading h2{font-size:var(--font-large);color:var(--color-primary);text-shadow:var(--shadow-glow)}.username-box,.login-container{background:rgba(30,30,30,.9);padding:50px;border-radius:var(--border-radius);width:400px;max-width:90%;text-align:center;border:3px solid var(--color-primary);box-shadow:var(--shadow-strong)}.username-box h2,.login-container h2{color:var(--color-primary);margin-bottom:20px;font-size:var(--font-large)}.username-box input,.login-container input{width:100%;padding:15px;margin:20px 0;border-radius:var(--border-radius-small);border:2px solid var(--color-primary);background:#1a1a2e;color:var(--color-text);font-size:1.2rem;text-align:center;transition:border-color .3s}.username-box input:focus,.login-container input:focus{outline:none;border-color:#ffed4e;box-shadow:0 0 10px #ffd70080}.username-box button,.login-container button{width:100%;padding:18px;background:var(--color-primary);color:#000;border:none;border-radius:var(--border-radius-small);font-size:1.5rem;font-weight:700;cursor:pointer;transition:all .3s}.username-box button:hover,.login-container button:hover{background:#ffed4e;transform:translateY(-5px);box-shadow:var(--shadow-glow)}.username-info{color:#aaa;font-size:.9rem;margin:10px 0}.acceptance-screen-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:1000}.acceptance-card{background:linear-gradient(135deg,#1a2338,#0f1629);border:3px solid #4a9eff;border-radius:20px;padding:50px;max-width:600px;width:90%;text-align:center;box-shadow:0 0 50px #4a9eff99}.acceptance-logo{width:140px;border-radius:16px;margin-bottom:30px}.acceptance-card h1{color:#6ba4ff;margin-bottom:30px}.acceptance-text{color:#ddd;font-size:1.2rem;margin-bottom:40px}.accept-all-label{font-size:1.1rem;margin:40px 0;text-align:left}.btn-primary{padding:18px;background:#4a9eff;color:#fff;border:none;border-radius:12px;font-size:1.3rem;cursor:pointer;width:100%}.connection-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.connection-message{background:#1e1e2f;padding:40px;border-radius:16px;text-align:center;max-width:500px;box-shadow:0 10px 30px #00000080;color:#fff}.connection-message h3{margin-bottom:16px;font-size:1.8rem}.connection-message p{margin-bottom:24px;color:#a5b4fc}.spinner{width:50px;height:50px;border:6px solid #a5b4fc;border-top:6px solid transparent;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}.retry-btn{background:#4caf50;color:#fff;padding:12px 32px;border:none;border-radius:8px;font-size:1.1rem;cursor:pointer;transition:background .3s}.retry-btn:hover{background:#45a049}.board-container{display:inline-block;padding:20px;background:rgba(0,0,0,.4);border-radius:20px;box-shadow:var(--shadow-strong);margin-bottom:30px;position:relative;transform:translateZ(0);backface-visibility:hidden}.board{display:grid;grid-template-rows:repeat(8,var(--square-size));grid-template-columns:repeat(8,var(--square-size));border:8px solid #8b4513;border-radius:10px;overflow:hidden;box-shadow:0 0 30px #8b4513cc}.board-row{display:contents}.square{width:var(--square-size);height:var(--square-size);display:flex;align-items:center;justify-content:center;position:relative;transition:all .2s}.light{background:#ebecd0}.dark{background:#779556}.square.selected{box-shadow:inset 0 0 0 4px var(--color-primary)}.piece-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));cursor:pointer;transition:transform .2s}.piece-img:hover{transform:scale(1.1)}.possible-move{box-shadow:inset 0 0 0 5px #ffff00b3;cursor:pointer}.possible-move:after{content:"";position:absolute;width:20px;height:20px;background:rgba(255,255,0,.6);border-radius:50%;pointer-events:none}.check{box-shadow:0 0 20px 5px red!important;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes pulse-check{0%{box-shadow:0 0 #f00c,inset 0 0 20px #f009}70%{box-shadow:0 0 0 20px #f000,inset 0 0 20px #f000}to{box-shadow:0 0 #f000,inset 0 0 20px #f000}}.player-info{margin:20px 0;font-size:1.8rem;font-weight:700;color:var(--color-primary);text-shadow:0 0 10px rgba(255,215,0,.6)}.player-info.top{margin-top:30px}.player-info.bottom{margin-bottom:30px}.player-info .username{margin-right:15px}.player-info .rating{font-size:1.4rem;color:#ccc}.game-controls{display:flex;justify-content:center;align-items:center;gap:20px;margin:20px 0;flex-wrap:wrap}.game-controls button{padding:12px 28px;border:none;border-radius:10px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;min-width:160px;box-shadow:0 4px 10px #0006;color:#fff}.game-controls .resign-btn{padding:14px 32px;font-size:1.3rem;font-weight:700;border-radius:14px;min-width:200px;transition:all .3s ease;box-shadow:0 6px 18px #0009;cursor:pointer;background:linear-gradient(to bottom,#ff4444,#cc2222);color:#fff;border:2px solid #ff6666}.draw-btn{padding:14px 32px;font-size:1.3rem;font-weight:700;border-radius:14px;min-width:200px;transition:all .3s ease;box-shadow:0 6px 18px #0009;cursor:pointer;background:linear-gradient(to bottom,#44aaff,#2288dd);color:#fff;border:2px solid #66bbff;margin-left:20px}.resign-btn{padding:14px 32px;font-size:1.3rem;font-weight:700;border-radius:14px;min-width:200px;transition:all .3s ease;box-shadow:0 6px 18px #0009;cursor:pointer;background:linear-gradient(to bottom,#ee310f,#fc0202);color:#fff;border:2px solid #d46a14}.game-controls .resign-btn:hover{background-color:#b71c1c;transform:translateY(-3px);box-shadow:0 8px 16px #00000080}.resign-btn:hover:not(:disabled){background:linear-gradient(to bottom,#ff6666,#dd3333);transform:translateY(-3px);box-shadow:0 10px 25px #f449}.draw-btn:hover:not(:disabled){background:linear-gradient(to bottom,#66bbff,#3399ff);transform:translateY(-3px);box-shadow:0 10px 25px #4af9}.resign-btn:disabled,.draw-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:0 4px 10px #0000004d}.game-controls button:nth-child(2){background-color:#455a64}.game-controls button:nth-child(2):hover{background-color:#37474f;transform:translateY(-3px);box-shadow:0 8px 16px #00000080}.game-controls button:last-child{background-color:#2e7d32}.game-controls button:last-child:hover{background-color:#1b5e20;transform:translateY(-3px);box-shadow:0 8px 16px #00000080}.game-controls button:disabled{background-color:#424242;cursor:not-allowed;opacity:.6;transform:none;box-shadow:none}.clocks{display:flex;justify-content:center;gap:60px;margin:30px 0;font-size:2rem;font-weight:700}.clock{padding:15px 30px;background:rgba(0,0,0,.5);border-radius:15px;min-width:180px;transition:all .3s}.clock.active{background:rgba(255,215,0,.3);box-shadow:var(--shadow-glow);transform:scale(1.05)}.main-layout{display:flex;gap:30px;padding:20px;max-width:1600px;margin:0 auto;align-items:flex-start;justify-content:center}.game-area{flex:1;max-width:600px;display:flex;flex-direction:column;align-items:center}.lobby-sidebar{width:560px;background:rgba(20,28,48,.9);padding:25px;border-radius:16px;box-shadow:0 8px 25px #0006;border:1px solid #2a3550;height:fit-content;flex:0 0 450px;min-width:400px;max-width:1000px;margin-left:00px}.lobby-sidebar h3{color:#6ba4ff;font-size:1.6rem;margin-bottom:20px;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.5)}.right-sidebar{width:460px;display:flex;flex-direction:column;gap:30px;height:fit-content;align-self:flex-start;flex:0 0 350px;min-width:300px}.move-history-panel,.friends-panel{background:linear-gradient(135deg,rgba(30,30,40,.9),rgba(20,20,30,.9));border:1px solid #2a3550;border-radius:12px;padding:16px;box-shadow:0 4px 12px #0000004d;flex:1;display:flex;flex-direction:column;width:500px;height:100%;gap:12px;margin-bottom:24px}.move-history-panel h3,.friends-panel h3{text-align:center;color:gold;font-size:1.6rem;margin-bottom:15px;text-shadow:0 0 10px rgba(255,215,0,.4);flex:1;padding:14px 18px;background:#1e2a44;border:1px solid #334466;border-radius:10px;color:#fff;font-size:1rem;transition:all .3s}.lobby-counts{margin:30px 0}.lobby-title{color:#6ba4ff;font-size:1.8rem;font-weight:700;color:var(--color-primary);margin-bottom:15px;text-shadow:0 0 10px rgba(255,215,0,.4);text-align:center}.variants-list{display:flex;flex-direction:column;gap:18px}.variants-list.horizontal{display:flex;flex-direction:column;gap:15px}.variant-section{position:relative;z-index:1;background:rgba(30,42,68,.6);border:2px solid rgba(255,215,0,.4);border-radius:12px;padding:14px;box-shadow:0 6px 20px #000000b3;transition:all .3s ease}.variant-section:hover{border-color:var(--color-primary);box-shadow:0 10px 30px #ffd70080;transform:translateY(-4px);z-index:1001}.variant-header{display:flex;justify-content:space-between;align-items:center;font-size:1.4rem;font-weight:600;color:var(--color-primary);cursor:pointer;text-shadow:0 0 8px rgba(255,215,0,.5);margin-bottom:10px}.variant-total{font-size:2rem;color:#4ac8de;background:#1a1a2e;padding:6px 14px;border-radius:12px;box-shadow:0 0 12px #ffd70066;font-weight:700}.time-breakdown{position:absolute;top:100%;left:0;width:100%;background:#0f1629;border:2px solid var(--color-primary);border-radius:12px;padding:14px;margin-top:8px;opacity:0;visibility:hidden;transition:all .3s ease;z-index:1000;box-shadow:0 10px 30px #000c;pointer-events:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:.9rem}.variant-section:hover .time-breakdown{opacity:1;visibility:visible;transform:translateY(4px);pointer-events:auto}.time-item{display:flex;justify-content:space-between;margin-bottom:10px;font-size:1.1rem;color:#aaa;padding:6px 0;border-bottom:1px solid rgba(255,215,0,.1)}.time-name{font-weight:700;color:var(--color-primary)}.selection-row{display:flex;gap:20px;margin-bottom:30px;flex-wrap:wrap}.selection-row>div{flex:1;min-width:280px}.variant-selection,.time-selection{background:#0f1629;border:2px solid rgba(255,215,0,.4);border-radius:16px;padding:20px;box-shadow:0 6px 20px #000000b3;transition:all .3s ease;flex:1}.variant-selection:hover,.time-selection:hover{border-color:var(--color-primary);box-shadow:0 10px 30px #ffd70080;transform:translateY(-4px)}.selection-title{color:#aaa;font-size:1rem;font-weight:700;color:var(--color-primary);text-align:center;margin-bottom:12px;text-shadow:0 0 8px rgba(255,215,0,.5)}.variant-grid,.time-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.time-grid{grid-template-columns:repeat(4,1fr)}.variant-card,.time-card{background:#1a1a2e;border:2px solid #334466;border-radius:12px;padding:16px;text-align:center;font-weight:600;color:#fff;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 10px #00000080;min-height:90px;display:flex;flex-direction:column;justify-content:center;align-items:center}.variant-card:hover{border-color:#4a9eff;transform:translateY(-3px);box-shadow:0 6px 15px #4a9eff4d}.time-card{padding:14px;background:#1e2a44;border:2px solid #334466;border-radius:10px;text-align:center;cursor:pointer;font-weight:600;transition:all .3s}.variant-card:hover,.time-card:hover{background:rgba(255,215,0,.15);border-color:var(--color-primary);transform:scale(1.05);box-shadow:0 8px 20px #ffd7004d}.variant-card.active{transform:scale(1.08);background:linear-gradient(135deg,#4a9eff,#3a8ae6);border-color:#6bb6ff;color:#fff;box-shadow:0 0 20px #4a9eff80}.time-card.active{transform:scale(1.08);background:#4a9eff;border-color:#6bb6ff;color:#fff;box-shadow:0 0 20px #4a9eff80}.variant-icon{font-size:2rem;margin-bottom:8px;display:block}.variant-text{font-size:1.1rem}.time-card{font-size:1.4rem}.action-panel{margin-top:30px;display:flex;flex-direction:column;gap:20px}search-section input{width:70%;border:2px solid var(--color-primary);background:#1a1a2e;flex:1;padding:14px 18px;background:#1e2a44;border:1px solid #334466;border-radius:10px;color:#fff;font-size:1rem;transition:all .3s}.search-section button{width:45%;margin-left:5%;padding:10px;background:var(--color-primary);color:#000;border:none;border-radius:8px;font-weight:700}.friends-panel .search-section{display:flex;gap:12px;margin-bottom:24px;padding:16px;background:rgba(30,42,68,.6);border-radius:16px;border:1px solid #2a3550;box-shadow:0 6px 20px #0006}.friends-panel .search-section input{flex:1;padding:16px 20px;background:#1e2a44;border:2px solid #334466;border-radius:12px;color:#fff;font-size:1.1rem;transition:all .3s ease;outline:none}.friends-panel .search-section input::placeholder{color:#888;font-style:italic}.friends-panel .search-section input:focus{border-color:var(--color-primary);box-shadow:0 0 15px #ffd70066;background:#252f4a}.friends-panel .search-section button{padding:16px 28px;background:linear-gradient(135deg,#4a9eff,#3a8ae6);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:1.1rem;cursor:pointer;transition:all .3s ease;white-space:nowrap;box-shadow:0 4px 15px #4a9eff4d}.friends-panel .search-section button:hover{background:linear-gradient(135deg,#5ab0ff,#4a9eff);transform:translateY(-2px);box-shadow:0 8px 25px #4a9eff80}.friends-panel .search-section button:disabled{background:#2a3550;cursor:not-allowed;transform:none;box-shadow:none}.lobby-btn.primary.big{width:100%;padding:18px;background:linear-gradient(135deg,#0ebddb,#4b9768);color:#fff;border:none;border-radius:12px;font-size:1.4rem;font-weight:700;cursor:pointer;box-shadow:0 6px 20px #4ade804d;transition:all .3s;max-width:400px;margin:0 auto;display:block}.lobby-btn.primary.big:hover{transform:translateY(-3px);box-shadow:0 10px 25px #4ade8080}.search-info{display:block;font-size:1.1rem;margin-top:8px;opacity:.9}.private-section{text-align:center}.toggle-private{width:100%;margin-bottom:10px}.private-form{display:flex;flex-direction:column;gap:12px}.private-buttons{display:flex;gap:12px}.private-buttons button{flex:1;padding:12px;font-size:1.1rem}.moves-list{flex:1;overflow-y:auto;padding-right:10px;margin-bottom:16px}.moves-list::-webkit-scrollbar{width:8px}.moves-list::-webkit-scrollbar-track{background:rgba(0,0,0,.3);border-radius:10px}.moves-list::-webkit-scrollbar-thumb{background:#ffd700;border-radius:10px}.moves-list::-webkit-scrollbar-thumb:hover{background:#ffaa00}.moves-container::-webkit-scrollbar{width:10px}.moves-container{flex:1;overflow-y:auto;max-height:360px;padding-right:8px}.moves-container::-webkit-scrollbar-track{background:rgba(0,0,0,.3);border-radius:10px}.moves-container::-webkit-scrollbar-thumb{background:#ffd700;border-radius:10px}.moves-container::-webkit-scrollbar-thumb:hover{background:#ffaa00}.move-pair{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:1.1rem;padding:8px 0;justify-content:flex-start;border-bottom:1px solid rgba(255,215,0,.1)}.move-number{font-weight:700;color:gold;min-width:40px;text-align:right}.move{font-size:1.3rem;padding:6px 12px;border-radius:8px;cursor:pointer;transition:all .2s;min-width:60px;text-align:center;flex:1}.move:hover{background:rgba(255,215,0,.2);transform:scale(1.05)}.move.white-move{background:rgba(255,255,255,.05)}.move.black-move{background:rgba(0,0,0,.2)}.move.active{background:#ffd700!important;color:#000;font-weight:700;box-shadow:0 0 15px #ffd70099}.history-controls{display:flex;justify-content:center;gap:16px;margin-top:auto;flex-wrap:nowrap}.history-controls button{background:linear-gradient(135deg,#1a1a2e,#0f1629);color:#fff;border:2px solid rgba(255,215,0,.4);padding:12px 20px;border-radius:12px;cursor:pointer;font-size:1rem;font-weight:700;min-width:100px;transition:all .3s ease;box-shadow:0 4px 12px #00000080}.history-controls button:hover:not(:disabled){background:var(--color-primary);color:#000;border-color:var(--color-primary);transform:translateY(-4px);box-shadow:0 8px 20px #ffd70066}.history-controls button:disabled{opacity:.5;cursor:not-allowed;transform:none}.rules-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.rules-modal-content{background:linear-gradient(135deg,#0f1629,#16213e);border:4px solid var(--color-primary);border-radius:20px;width:90%;max-width:1000px;max-height:90vh;box-shadow:0 0 60px #ffd70099;position:relative;overflow:hidden}.rules-modal-content .close-btn.large{position:absolute;top:15px;right:20px;font-size:2.5rem;width:50px;height:50px;background:rgba(220,53,69,.8);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:all .3s}.close-btn,.close-btn.large{min-width:50px!important;min-height:50px!important;width:50px;height:50px;font-size:2.4rem;line-height:1;display:flex!important;align-items:center;justify-content:center;opacity:1;visibility:visible;transition:all .3s ease}.close-btn.large{width:60px!important;height:60px!important;min-width:60px!important;min-height:60px!important;font-size:3rem}.close-btn:hover,.close-btn.large:hover{transform:scale(1.1) rotate(90deg);box-shadow:0 12px 35px #c62828cc}.rules-modal-content .close-btn.large:hover{background:#dc3545;transform:scale(1.1)}.rules-scroll{padding:60px 40px 40px;overflow-y:auto;max-height:90vh;color:var(--color-text)}.rules-scroll h2{font-size:3rem;color:var(--color-primary);text-align:center;margin-bottom:30px;text-shadow:0 0 20px rgba(255,215,0,.6)}.rules-scroll h3,.rules-scroll h4,.rules-scroll h5{color:var(--color-primary);margin:25px 0 15px;font-size:1.8rem}.rules-scroll p{font-size:1.2rem;margin-bottom:20px;line-height:1.8}.rules-scroll ul{padding-left:30px;margin:20px 0;font-size:1.2rem}.rules-scroll li{margin-bottom:10px}.rules-images{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:30px 0}.rules-images img{max-width:48%;border-radius:15px;border:3px solid var(--color-primary);box-shadow:0 0 20px #ffd70066}.rules-video{width:100%;max-width:800px;border-radius:15px;border:3px solid var(--color-primary);box-shadow:0 0 30px #ffd70080;margin:30px auto;display:block}.rules-footer{text-align:center;font-style:italic;color:#aaa;margin:40px 0 20px;font-size:1.3rem}.rules-btn{width:100%;padding:16px;background:linear-gradient(135deg,#1a1a2e,#0f1629);color:#fff;border:2px solid #2073d3;border-radius:12px;font-size:1.4rem;font-weight:700;cursor:pointer;transition:all .3s;margin-top:10px}.rules-btn:hover{background:var(--color-primary);color:#000;transform:translateY(-3px);box-shadow:0 8px 25px #ffd70066}.jugabilidad-section{margin-top:25px}.jugabilidad-btn{background:linear-gradient(135deg,#6ba4ff,#4a9eff);color:#fff;padding:16px 30px;font-size:1.2rem;border:none;border-radius:12px;cursor:pointer;width:100%;transition:all .3s}.jugabilidad-btn:hover{transform:translateY(-3px);box-shadow:0 10px 25px #6ba4ff80}.jugabilidad-modal{background:rgba(10,15,30,.95);border:3px solid #6ba4ff;border-radius:20px;padding:40px;max-width:700px;width:90%;max-height:85vh;overflow-y:auto;text-align:left;color:#ddd}.jugabilidad-content h2{color:#6ba4ff;text-align:center;margin-bottom:30px}.jugabilidad-guide{display:flex;flex-direction:column;gap:25px}.guide-step{background:rgba(30,42,68,.6);border-radius:14px;padding:20px;border-left:5px solid #4a9eff}.guide-step h3{color:#6ba4ff;margin-top:0}.close-guide-btn{background:#ff6b6b;color:#fff;padding:14px 30px;font-size:1.2rem;border:none;border-radius:12px;cursor:pointer;margin-top:30px;width:100%;transition:all .3s}.close-guide-btn:hover{background:#ff5252}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.challenge-modal,.promotion-modal,.game-over-modal,.config-modal,.draw-offer-modal,.rematch-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.challenge-content,.config-content,.draw-offer-content,.rematch-content,.game-over-content,.promotion-content{background:linear-gradient(135deg,var(--color-secondary),#0f1629);padding:40px;border-radius:20px;text-align:center;color:var(--color-text);width:90%;max-width:480px;box-shadow:0 0 40px #ffd70066;border:2px solid var(--color-primary);animation:modalAppear .4s ease-out;pointer-events:all}.challenge-modal.secure{background:linear-gradient(to bottom,#2a2a3a,#3a2a4a);border:4px solid #ff4444;padding:25px;border-radius:20px;box-shadow:0 0 25px #ff444480;max-width:350px}.challenge-modal.secure .modal-title{color:#f44;font-size:1.8rem;text-align:center;margin-bottom:15px}.challenge-modal.secure .challenger-details{text-align:center;font-size:1.3rem;margin-bottom:20px;color:gold}.challenge-modal.secure .challenge-info{background:rgba(0,0,0,.4);padding:15px;border-radius:15px;margin-bottom:20px}.challenge-modal.secure .info-item{display:flex;justify-content:space-between;margin:8px 0;font-size:1.1rem}.challenge-modal.secure .label{color:#aaa}.challenge-modal.secure .value{font-weight:700;color:#fff}.challenge-modal.secure .value.ranked{color:#f44}.challenge-modal.secure .value.friendly{color:#4f4}.challenge-modal.secure .modal-buttons .btn{padding:12px 25px;font-size:1.2rem;margin:8px;display:flex;justify-content:center;gap:25px}.challenge-modal.send{background:linear-gradient(to bottom,#2a3a2a,#3a4a2a);border:4px solid #44ff44;padding:25px;border-radius:20px;box-shadow:0 0 25px #44ff4480;max-width:350px}.challenge-modal.send .modal-title{color:#4f4;font-size:1.8rem;text-align:center;margin-bottom:15px}.challenge-header{text-align:center;margin-bottom:25px}.challenger-avatar-large{width:100px;height:100px;margin:0 auto 15px;background:linear-gradient(135deg,#ffd700,#ffaa00);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 25px #ffd70080}.challenge-title-large{font-size:2.2rem;color:gold;text-shadow:0 0 15px rgba(255,215,0,.6);margin:10px 0}.challenger-rating-large{font-size:1.4rem;color:#aaa;margin:5px 0}.challenge-details-premium,.challenge-preview-premium{background:rgba(0,0,0,.3);border-radius:18px;padding:20px;margin:20px 0}.detail-premium{display:flex;align-items:center;margin:18px 0}.icon-large{font-size:2rem;margin-right:20px;width:50px;text-align:center}.detail-premium .text{flex:1}.detail-premium .label{display:block;font-size:.9rem;color:#aaa;margin-bottom:4px}.detail-premium .value{font-size:1.3rem;font-weight:700;color:#fff}.detail-premium.mode .value.ranked{color:#f44}.detail-premium.mode .value.friendly{color:#4f4}.friendly-toggle .checkbox-large{display:flex;align-items:center;font-size:1.2rem;cursor:pointer}.checkbox-large input{display:none}.checkmark{width:28px;height:28px;background:#333;border-radius:8px;margin-right:15px;position:relative;transition:all .3s}.checkbox-large input:checked+.checkmark{background:#44ff44}.checkmark:after{content:"✓";position:absolute;color:#000;font-weight:700;font-size:1.4rem;left:6px;top:-2px;opacity:0;transition:opacity .3s}.checkbox-large input:checked+.checkmark:after{opacity:1}.modal.challenge-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a2338 0%,#0f1629 100%);border:4px solid #4a9eff;border-radius:24px;padding:50px 40px;max-width:850px;width:90%;max-height:60vh;overflow-y:auto;text-align:center;box-shadow:0 30px 80px #000000b3,0 0 60px #4a9eff80;z-index:3000;animation:modalPop .5s ease-out;color:#fff}.challenge-modal.received-local,.challenge-modal.send-local{scrollbar-width:none}.challenge-modal.received-local::-webkit-scrollbar,.challenge-modal.send-local::-webkit-scrollbar{display:none;width:0;background:transparent}.challenge-modal.received-local,.challenge-modal.send-local{-ms-overflow-style:none}@keyframes modalPop{0%{transform:translate(-50%,-60%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}.challenge-header{display:flex;align-items:center;justify-content:center;gap:25px;margin-bottom:40px}.challenger-avatar-placeholder{width:90px;height:90px;background:#2a3550;border-radius:50%;border:4px solid #6ba4ff;box-shadow:0 0 25px #6ba4ff66;flex-shrink:0}.header-text h2.challenge-title-large{color:#6ba4ff;font-size:2.5rem;margin:0;text-shadow:0 2px 10px rgba(74,158,255,.5)}.challenge-subtitle,.challenger-rating-large{color:#ddd;font-size:1.4rem;margin:10px 0 0}.challenge-details-premium{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;margin-bottom:45px}.detail-card{background:rgba(30,42,68,.7);border:1px solid #334466;border-radius:16px;padding:22px;display:flex;flex-direction:column;align-items:center;transition:transform .3s,box-shadow .3s}.detail-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #4a9eff4d}.detail-icon{font-size:3rem;margin-bottom:15px}.detail-content{text-align:center}.detail-label{color:#aaa;font-size:1.1rem;display:block;margin-bottom:6px}.detail-value{color:#fff;font-size:1.5rem;font-weight:700}.detail-value.friendly{color:#4ade80}.detail-value.ranked{color:#ff6b6b}.friendly-toggle{display:flex;align-items:center;gap:12px;margin-top:10px}.friendly-toggle input{width:54px;height:54px}.friendly-toggle .checkmark{width:60px;height:44px;background:#1e2a44;border:2px solid #334466;border-radius:6px;position:relative}.friendly-toggle input:checked+.checkmark{background:#4ade80;border-color:#4ade80}.checkbox-text{color:#ddd;font-size:1.5rem}.challenge-actions-vertical{display:flex;flex-direction:column;gap:20px;margin-top:35px}.challenge-actions-vertical .btn{width:100%;padding:18px 40px;font-size:1.5rem;font-weight:700;border-radius:14px;border:none;cursor:pointer;transition:all .3s}.btn.accept-large.premium,.btn.primary-large.premium{background:linear-gradient(135deg,#4ade80,#3ab86a);color:#fff;box-shadow:0 8px 25px #4ade8066}.btn.decline-large,.btn.secondary-large{background:linear-gradient(135deg,#ff6b6b,#cc5252);color:#fff;box-shadow:0 8px 25px #ff6b6b66}.btn:hover{transform:translateY(-4px);box-shadow:0 14px 40px #4a9eff99}@keyframes modalPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes modalAppear{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.game-over-content h2{font-size:4.5rem;color:var(--color-primary);margin-bottom:20px;text-shadow:0 0 30px gold;animation:glow 2s infinite alternate}@keyframes glow{0%{text-shadow:0 0 20px gold}to{text-shadow:0 0 40px gold}}.user-info{position:relative;top:20px;right:-600px;color:#fff;font-size:1.5rem}.user-result,.friend-item,.friend-request{display:flex;justify-content:space-between;align-items:center;padding:10px;background:rgba(255,255,255,.05);margin:8px 0;border-radius:10px}.actions button{margin-left:8px;padding:6px 12px;border-radius:6px;border:none;cursor:pointer}.actions button:hover{opacity:.8}.reject,.remove{background:var(--color-accent);color:#fff}.user-info button{margin-left:20px;padding:10px 20px;font-size:1.1rem;font-weight:700;color:#fff;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #0000004d;min-width:140px}.sesion-btn{background:linear-gradient(135deg,#c62828,#b71c1c);box-shadow:0 4px 15px #c6282880}.sesion-btn:hover{background:linear-gradient(135deg,#d32f2f,#c62828);transform:translateY(-2px);box-shadow:0 8px 25px #c62828b3}.config-btn{background-color:#f4f8035d;color:#16213e;box-shadow:0 4px 15px #ffd70080}.config-btn:hover{background:linear-gradient(135deg,#ffed4e,#ffd700);transform:translateY(-2px);box-shadow:0 8px 25px #ffd700b3}.loading-hint{display:block;margin-top:8px;font-size:.9rem;color:#aaa;font-style:italic}.user-info button:hover{background:#ff6666}.disconnect-warning{position:fixed;top:20px;left:50%;transform:translate(-50%);background:#f44336;color:#fff;padding:12px 24px;border-radius:12px;box-shadow:0 8px 20px #0006;z-index:2000;text-align:center;font-weight:600;animation:slideDown .4s ease-out;min-width:300px}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.first-move-alert,.inactivity-alert{position:absolute;top:70%;left:50%;transform:translate(-50%,-50%);background:rgba(220,53,69,.95);color:#fff;padding:20px 40px;border-radius:15px;font-size:1.8rem;font-weight:700;text-align:center;box-shadow:0 0 30px #f00c;z-index:1500;animation:pulse 1.5s infinite;pointer-events:none}.inactivity-alert{background:rgba(255,152,0,.95);animation:urgentPulse 1s infinite}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.05)}to{transform:translate(-50%,-50%) scale(1)}}@keyframes urgentPulse{0%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 20px red}50%{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 0 40px red}to{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 20px red}}.moving-piece{position:absolute;width:var(--square-size);height:var(--square-size);pointer-events:none;z-index:100;left:var(--from-left);top:var(--from-top);animation:movePiece .35s ease-in-out forwards}.moving-piece img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}.debug-moving-piece{outline:3px solid red!important;box-shadow:0 0 0 6px #f006!important}@keyframes proFly{0%{transform:translateZ(0) scale(1);box-shadow:0 2px 4px #0000;filter:brightness(1)}40%{transform:translate3d(calc(var(--dx) * .4),calc(var(--dy) * .4 - 22px),0) scale(1.14);box-shadow:0 10px 20px #0000;filter:brightness(1.12)}to{transform:translate3d(var(--dx),var(--dy),0) scale(1);box-shadow:0 2px 4px #0000;filter:brightness(1)}}.current-game-panel{background:rgba(30,30,40,.8);border:2px solid #ffd700;border-radius:15px;padding:15px;margin-bottom:0;margin-top:-20px;height:130px;max-height:200px;width:500px}.current-game-panel h3{color:gold;text-align:center;margin-bottom:15px;text-shadow:0 0 10px rgba(255,215,0,.4)}.game-info .info-row{display:flex;justify-content:space-between;margin:10px 0;font-size:1.1rem}.game-info .label{color:#aaa}.game-info .value{color:#fff;font-weight:700}.game-info .players{margin-top:20px;flex-direction:column;gap:10px}.game-info .player{display:flex;justify-content:space-between;background:rgba(0,0,0,.3);padding:10px;border-radius:10px}.game-info .color{color:gold;font-weight:700}.avatar-initial-large{font-size:3.5rem;font-weight:700;color:#000}.game-end-modal{position:fixed;top:0;left:0;margin:30px 0;gap:25px;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;z-index:3000;pointer-events:none;transform:translateY(-4px);box-shadow:0 12px 35px #000c}.end-card{background:linear-gradient(135deg,#1e1e2e,#16213e);border:4px solid #ffd700;border-radius:28px;padding:40px;max-width:480px;width:90%;text-align:center;box-shadow:0 20px 60px #000c,0 0 40px #ffd70066;pointer-events:all;animation:endCardAppear .5s ease-out;position:relative}@keyframes endCardAppear{0%{opacity:0;transform:scale(.85) translateY(40px)}to{opacity:1;transform:scale(1) translateY(0)}}.end-content{color:#fff}.end-title{font-size:2.8rem;color:gold;margin:0 0 15px;text-shadow:0 0 15px rgba(255,215,0,.6)}.end-subtitle{font-size:1.6rem;color:#f66;margin:10px 0}.end-score{font-size:1.8rem;color:#fff;margin:20px 0;font-weight:700}.elo-change{font-size:1.8rem;margin:25px 0;font-weight:700}.elo-change.gain{color:#4f4;text-shadow:0 0 15px rgba(68,255,68,.6)}.elo-change.loss{color:#f44;text-shadow:0 0 15px rgba(255,68,68,.6)}.rematch-section{margin:30px 0}.rematch-offer-btn{background:linear-gradient(to bottom,#44ff44,#33cc33);color:#000;padding:16px 40px;font-size:1.4rem;border-radius:16px;font-weight:700}.rematch-incoming p{font-size:1.8rem;color:gold;margin-bottom:20px}.waiting{font-size:1.3rem;color:#aaa;font-style:italic}.rematch-buttons{display:flex;justify-content:center;gap:25px;margin:30px 0}.game-end-modal .btn{padding:16px 40px;font-size:1.4rem;border-radius:16px;min-width:180px;font-weight:700;box-shadow:0 8px 25px #0009;transition:all .3s}.btn.accept{background:linear-gradient(to bottom,#44ff44,#33cc33);color:#000;height:70px;width:140px;font-size:25px}.btn.decline{background:linear-gradient(to bottom,#ff4444,#cc3333);color:#fff;font-size:25px}.lobby-btn{background:linear-gradient(to bottom,#ff4444,#cc2222);color:#fff;padding:16px 40px;font-size:1.5rem;border-radius:16px;font-weight:700;margin-top:20px}.confirm-action-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;z-index:4000;pointer-events:none}.confirm-card{background:linear-gradient(135deg,#2a1a1a,#3a0a0a);border:4px solid #ff4444;border-radius:24px;padding:40px;max-width:420px;width:90%;text-align:center;box-shadow:0 20px 60px #000000e6,0 0 40px #f446;pointer-events:all;animation:confirmAppear .4s ease-out}@keyframes confirmAppear{0%{opacity:0;transform:scale(.9) translateY(30px)}to{opacity:1;transform:scale(1) translateY(0)}}.confirm-title{font-size:2.4rem;color:#f66;margin:0 0 20px;text-shadow:0 0 15px rgba(255,102,102,.6)}.confirm-text{font-size:1.4rem;color:#fff;margin:20px 0 30px;line-height:1.5}.confirm-buttons{display:flex;justify-content:center;gap:25px}.confirm-yes{background:linear-gradient(to bottom,#ff4444,#cc2222);color:#fff;padding:16px 40px;font-size:1.4rem;border-radius:16px;font-weight:700}.confirm-no{background:linear-gradient(to bottom,#666,#444);color:#fff;padding:16px 40px;font-size:1.4rem;border-radius:16px;font-weight:700}.controls{display:flex;flex-direction:column;align-items:center;gap:18px;margin:25px 0;padding:20px;background:rgba(30,30,40,.7);border-radius:18px;border:2px solid #ffd700;box-shadow:0 8px 25px #00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.player-color{font-size:1.2rem;color:gold;background:rgba(0,0,0,.4);padding:12px 24px;border-radius:12px;border:1px solid #ffd700;text-shadow:0 0 10px rgba(255,215,0,.4);font-weight:700}.close-end-modal{position:absolute;top:15px;right:20px;background:none;border:none;font-size:2.8rem;color:gold;cursor:pointer;width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease;z-index:10}.close-end-modal:hover{background:rgba(255,215,0,.2);transform:scale(1.1) rotate(90deg);box-shadow:0 0 20px #ffd70099}.end-game-panel{position:absolute;top:20px;left:80%;transform:translate(-50%);background:linear-gradient(135deg,#1e1e2e,#16213e);border:4px solid #ffd700;border-radius:24px;padding:30px;max-width:500px;width:90%;text-align:center;box-shadow:0 15px 40px #000c,0 0 30px #ffd7004d;z-index:1000;pointer-events:all}.opponent-left{font-size:1.4rem;color:#fa0;margin:20px 0;font-style:italic}.rematch-btn{background:linear-gradient(to bottom,#44ff44,#33cc33);color:#000;padding:16px 40px;font-size:1.4rem;border-radius:16px;font-weight:700}.analyze-hint{font-size:1.2rem;color:gold;margin-top:30px;font-style:italic}.end-game-panel .btn{min-width:200px;box-shadow:0 8px 20px #00000080;transition:all .3s}.end-game-panel{transform:translateY(-4px);box-shadow:0 12px 30px #000000b3}.navigation-buttons{display:flex;justify-content:center;align-items:center;gap:15px;margin-bottom:20px;flex-wrap:wrap}.nav-btn{background:linear-gradient(to bottom,#444,#333);color:gold;border:2px solid #ffd700;padding:10px 20px;font-size:1.1rem;font-weight:700;border-radius:12px;min-width:80px;transition:all .3s;cursor:pointer}.nav-btn.arrow{font-size:1.6rem;padding:10px 18px;min-width:auto}.nav-btn:hover:not(:disabled){background:linear-gradient(to bottom,#ffd700,#ccaa00);color:#000;transform:translateY(-3px);box-shadow:0 8px 20px #ffd70066}.nav-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.no-moves{text-align:center;color:#aaa;font-style:italic;margin-top:40px}.nav-btn.arrow{font-size:1.6rem;padding:10px 18px}.nav-btn:hover:not(:disabled){background:#ffd700;color:#000;transform:translateY(-3px);box-shadow:0 8px 20px #ffd70066}.nav-btn:disabled{opacity:.4;cursor:not-allowed}.no-moves{text-align:center;color:#aaa;font-style:italic;margin-top:60px}.promotion-modal.premium{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);z-index:5000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn .4s ease-out}.promotion-card{background:linear-gradient(135deg,#1e1e2e,#2a1a3a);border:4px solid #ffd700;border-radius:28px;padding:40px;max-width:700px;width:70%;text-align:center;box-shadow:0 20px 60px #000c,0 0 40px #ffd70066;animation:cardRise .5s ease-out}.promotion-title{font-size:2.6rem;color:gold;margin:0 0 30px;text-shadow:0 0 20px rgba(255,215,0,.6)}.promotion-options{display:flex;justify-content:center;gap:25px;margin:30px 0;flex-wrap:wrap}.promotion-btn{background:rgba(0,0,0,.4);border:3px solid #ffd700;border-radius:20px;padding:20px;width:100px;height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 25px #0009}.promotion-btn:hover{background:rgba(255,215,0,.2);transform:translateY(-10px) scale(1.1);box-shadow:0 15px 40px #ffd70099;border-color:#fff}.promotion-btn.queen:hover{box-shadow:0 15px 40px #ffd700cc}.piece-large{font-size:4.5rem;margin-bottom:10px;text-shadow:0 0 15px rgba(255,215,0,.6)}.piece-name{font-size:1.1rem;color:gold;font-weight:700}.promotion-hint{font-size:1.2rem;color:#aaa;margin-top:20px;font-style:italic}@keyframes cardRise{0%{opacity:0;transform:translateY(50px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.app-footer{padding:20px;text-align:center;background:#0d1426;border-top:1px solid #253050;font-size:.9rem;color:#aaa;margin-top:auto}.footer-links a{margin:0 15px;color:#6ba4ff;text-decoration:none}.footer-links a:hover{text-decoration:underline}.copyright{margin-top:10px;font-size:.8rem;color:#888}.login-screen{min-height:100vh;background:linear-gradient(135deg,#0f1629 0%,#1a2338 100%);display:flex;align-items:center;justify-content:center;padding:20px}.login-card{background:rgba(20,28,48,.9);border:2px solid #2a3550;border-radius:20px;padding:60px 40px;width:100%;max-width:680px;text-align:center;box-shadow:0 15px 40px #0009;font-size:23px}.login-logo{width:120px;margin-bottom:20px;border-radius:12px}.login-card h1{color:#6ba4ff;margin-bottom:30px;font-size:4.8rem}.login-logo-large{width:250px;height:280px;border-radius:24px;margin-bottom:30px;border:4px solid #6ba4ff;box-shadow:0 0 30px #6ba4ff66}.login-title{color:#6ba4ff;font-size:3rem;margin:0 0 10px;text-shadow:0 2px 10px rgba(74,158,255,.5)}.login-subtitle{color:#aaa;font-size:1.25em;margin-top:-25px;margin-bottom:20px}.input-group{display:flex;flex-direction:column;gap:20px;margin-bottom:30px}.login-input{padding:18px 20px;background:#1e2a44!important;border:2px solid #334466;border-radius:12px;color:#fff!important;font-size:1.1rem;transition:all .3s ease;width:100%;box-sizing:border-box}.login-input::placeholder{color:#888!important;opacity:1}.login-input:focus{outline:none;border-color:#4a9eff;box-shadow:0 0 0 4px #4a9eff40;background:#3955a5!important}.login-input:-webkit-autofill,.login-input:-webkit-autofill:hover,.login-input:-webkit-autofill:focus,.login-input:-webkit-autofill:active{-webkit-text-fill-color:#ffffff!important;caret-color:#fff!important;-webkit-box-shadow:0 0 0 1000px #1e2a44 inset!important;box-shadow:0 0 0 1000px #1e2a44 inset!important;transition:background-color 5000s ease-in-out 0s;font-size:22px}.login-input::selection{background:#4a9eff;color:#fff}.google-btn{background:white;color:#444;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;gap:12px}.email-btn{background:#4a9eff;color:#fff;border:none}.google-btn,.email-btn{width:100%;padding:14px;margin:12px 0;border-radius:8px;font-size:1.1rem;cursor:pointer;transition:all .3s}.google-btn{background:#4285f4;color:#fff;border:none;display:flex;align-items:center;justify-content:center;gap:10px}.google-btn:hover{background:#3367d6}.email-btn:hover{background:#3a8ae6}input[type=email],input[type=password]{width:100%;padding:14px;margin:12px 0;background:#1e2a44;border:1px solid #334466;border-radius:8px;color:#fff;font-size:22px}.accept-all-label{display:flex;align-items:flex-start;gap:14px;margin:25px 0;font-size:1rem;color:#ddd;cursor:pointer;-webkit-user-select:none;user-select:none;padding:10px;border-radius:12px;transition:background .3s ease}.accept-all-label:hover{background:rgba(74,158,255,.1)}.accept-all-label input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.accept-all-label .checkmark{width:28px;height:28px;background:#1e2a44;border:2px solid #334466;border-radius:8px;flex-shrink:0;position:relative;transition:all .3s ease;box-shadow:0 4px 10px #0000004d}.accept-all-label:hover .checkmark{border-color:#4a9eff;box-shadow:0 0 12px #4a9eff4d}.accept-all-label input[type=checkbox]:checked+.checkmark{background:linear-gradient(135deg,#4ade80,#3ab86a);border-color:#4ade80;box-shadow:0 0 15px #4ade8080}.accept-all-label .checkmark:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.6rem;font-weight:700;color:#000;opacity:0;transition:opacity .2s ease}.accept-all-label input[type=checkbox]:checked+.checkmark:after{opacity:1}.accept-all-label a{color:#6ba4ff;text-decoration:underline;font-weight:700}.accept-all-label a:hover{color:#4a9eff}.error-msg{color:#ff6b6b;background:rgba(255,107,107,.1);padding:12px;border-radius:10px;margin:20px 0;font-size:1rem}.toggle-mode{margin-top:20px;color:#aaa}.login-main-btn{width:100%;padding:20px;background:linear-gradient(135deg,#4a9eff,#3a8ae6);color:#fff;border:none;border-radius:14px;font-size:1.4rem;font-weight:700;cursor:pointer;margin:20px 0;box-shadow:0 8px 25px #4a9eff66;transition:all .3s}.login-main-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 35px #4a9eff99}.login-main-btn:disabled{opacity:.6;cursor:not-allowed}.toggle-link{color:#6ba4ff;cursor:pointer;font-weight:700}.toggle-link:hover{color:#8cc2ff;text-decoration:underline}.toggle-mode span{color:#6ba4ff;cursor:pointer;text-decoration:underline}.separator{margin:25px 0;color:#666;position:relative}.separator:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#334466}.separator span{background:rgba(20,28,48,.9);padding:0 20px}.username-setup-screen{min-height:100vh;background:linear-gradient(135deg,#0f1629 0%,#1a2338 100%);display:flex;align-items:center;justify-content:center;padding:20px}.username-card{background:rgba(20,28,48,.9);border:1px solid #2a3550;border-radius:16px;padding:40px;width:100%;max-width:420px;text-align:center;box-shadow:0 10px 30px #00000080}.setup-logo{width:120px;margin-bottom:20px;border-radius:12px}.username-card h1{color:#6ba4ff;margin-bottom:10px}.subtitle{color:#aaa;margin-bottom:30px;font-size:1.1rem}.username-input-group{position:relative;margin:20px 0}.username-input-group input{width:100%;padding:16px;background:#1e2a44;border:1px solid #334466;border-radius:8px;color:#fff;font-size:1.1rem;text-align:center}.availability{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:1.2rem}.available{color:#4ade80}.taken{color:#ff6b6b}.continue-btn{width:100%;padding:16px;background:#4a9eff;color:#fff;border:none;border-radius:8px;font-size:1.2rem;cursor:pointer;margin-top:20px;transition:background .3s}.continue-btn:hover:not(:disabled){background:#3a8ae6}.continue-btn:disabled{background:#334466;cursor:not-allowed}.info-text{margin-top:25px;color:#888;font-size:.9rem;line-height:1.5}.back-btn{width:100%;padding:14px;margin-top:15px;background:transparent;color:#6ba4ff;border:1px solid #334466;border-radius:10px;font-size:1rem;cursor:pointer;transition:all .3s}.back-btn:hover:not(:disabled){background:rgba(106,164,255,.1);border-color:#6ba4ff}.back-btn:disabled{opacity:.5;cursor:not-allowed}.google-g{background:#4285f4;color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.4rem}.export-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.export-btn{flex:1;min-width:140px;padding:12px 18px;background:linear-gradient(135deg,rgba(0,0,0,.8),#3a8ae6);color:#fff;border:none;border-radius:10px;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .3s;box-shadow:0 4px 10px #4a9eff33;display:flex;align-items:center;justify-content:center;gap:8px}.export-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #4a9eff66;background:linear-gradient(135deg,#5ab0ff,#4a9eff)}.export-btn:active{transform:translateY(0)}.export-btn:before{font-size:1.2rem}.export-btn:nth-child(1):before{content:"📋"}.export-btn:nth-child(2):before{content:"🖼️"}.export-btn:nth-child(3):before{content:"📄"}.welcome-screen-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:1000;overflow-y:auto;padding:20px 0}.welcome-card{background:linear-gradient(135deg,#1a2338,#0f1629);border:3px solid #4a9eff;border-radius:20px;padding:40px;max-width:650px;width:90%;text-align:center;box-shadow:0 0 50px #4a9eff99;animation:slideUp 1s ease-out;box-sizing:border-box;max-height:95vh;overflow-y:auto}.welcome-card::-webkit-scrollbar{width:10px}.welcome-card::-webkit-scrollbar-track{background:rgba(0,0,0,.3);border-radius:10px}.welcome-card::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:10px}.welcome-card::-webkit-scrollbar-thumb:hover{background:#ffed4e}.welcome-logo{width:160px;border-radius:20px;margin-bottom:30px;border:4px solid #6ba4ff;box-shadow:0 0 20px #6ba4ff80}.welcome-card h1{color:#6ba4ff;font-size:2.8rem;margin-bottom:30px;text-shadow:0 2px 10px rgba(74,158,255,.5)}.welcome-text{color:#ddd;font-size:1.2rem;margin:30px 0;line-height:1.8}.welcome-content p{color:#ddd;font-size:1.1rem;margin:20px 0}.rules-summary{background:rgba(30,42,68,.6);border-radius:12px;padding:20px;margin:30px 0;text-align:left}.rules-summary h3{color:#6ba4ff;text-align:center;margin-bottom:20px;font-size:1.6rem}.rules-summary ul{padding-left:30px;color:#ccc}.rules-summary li{margin:15px 0;font-size:1.1rem}.rules-cta{font-size:1.3rem;color:#fff;margin:40px 0 20px;font-weight:700}.welcome-actions{display:flex;flex-direction:column;gap:20px;margin:40px 0}.btn-primary.large{padding:20px;background:linear-gradient(135deg,#4a9eff,#3a8ae6);color:#fff;border:none;border-radius:14px;font-size:1.4rem;font-weight:700;cursor:pointer;box-shadow:0 8px 25px #4a9eff80;transition:all .3s}.btn-primary.large:hover{transform:translateY(-4px);box-shadow:0 12px 35px #4a9effb3}.btn-secondary.large{padding:18px;background:transparent;color:#6ba4ff;border:2px solid #4a9eff;border-radius:14px;font-size:1.3rem;cursor:pointer;transition:all .3s}.btn-secondary.large:hover{background:rgba(74,158,255,.15)}.final-message{font-size:1.8rem;color:#4ade80;font-weight:700;margin-top:40px;text-shadow:0 2px 10px rgba(74,222,128,.5)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:var(--color-bg);color:var(--color-text);gap:20px}.loading-logo{width:150px;border-radius:50%;box-shadow:var(--shadow-glow)}.spinner{width:50px;height:50px;border:5px solid rgba(255,215,0,.3);border-top:5px solid var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.player-clocks-container{width:100%;max-width:500px;display:flex;flex-direction:column;align-items:center}.opponent-info-clock{display:flex;justify-content:center;align-items:center;gap:15px;padding:12px 20px;background:rgba(22,33,62,.8);border-radius:15px;margin-bottom:15px;font-size:1.3rem;font-weight:700;box-shadow:var(--shadow-strong);width:130%;max-width:1500px}.player-info-clock{display:flex;justify-content:center;align-items:center;gap:15px;padding:12px 20px;background:rgba(22,33,62,.8);border-radius:15px;margin-top:15px;font-size:1.3rem;font-weight:700;box-shadow:var(--shadow-strong);width:130%;max-width:1500px}.clock.active{color:var(--color-primary);text-shadow:0 0 15px var(--color-primary);font-size:1.6rem}.player-name{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-rating{font-size:1.1rem;opacity:.9}@media (max-width: 1400px){.main-layout{flex-direction:column;align-items:center}.lobby-sidebar,.right-sidebar{width:100%;max-width:600px}.right-sidebar{flex-direction:row;gap:20px}.move-history-panel,.friends-panel{flex:1;min-height:400px}}@media (max-width: 1024px){.lobby-sidebar,.right-sidebar{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:var(--color-bg);z-index:998;padding:20px;overflow-y:auto;box-shadow:var(--shadow-strong)}.lobby-sidebar.visible,.right-sidebar.visible{display:block}.main-layout{flex-direction:column;align-items:center;padding:10px 10px 100px}.game-area{width:100%;max-width:500px;margin:0 auto}.mobile-bottom-buttons{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:20px;z-index:1000}.mobile-float-btn{width:70px;height:70px;border-radius:50%;background:var(--color-primary);color:#16213e;border:none;font-size:1.6rem;font-weight:700;box-shadow:var(--shadow-strong);cursor:pointer;display:flex;align-items:center;justify-content:center}.mobile-float-btn.lobby{width:130px;border-radius:40px;font-size:1.3rem;background:linear-gradient(135deg,#4a9eff,#3a8ae6);color:#fff}.mobile-panel-close{position:absolute;top:15px;right:15px;width:40px;height:40px;background:var(--color-accent);color:#fff;border:none;border-radius:50%;font-size:1.4rem;cursor:pointer;z-index:999}.opponent-info-clock,.player-info-clock{padding:16px 24px;font-size:1.5rem;border-radius:18px;gap:10px}.opponent-info-clock{margin-top:20px;margin-bottom:-15px}.end-game-panel{position:absolute;top:300px;left:20px}.player-info-clock{margin-top:-30px}.clock.active{font-size:1.3rem}.player-name{font-size:1.4rem;max-width:180px}.player-rating{font-size:1.2rem}.header-title h1{font-size:2.5rem}.header-title .logo{width:80px}.user-info{flex-direction:column;align-items:flex-end;gap:12px;padding:15px}.user-info button{margin-left:0!important;width:100%;max-width:280px;padding:14px 20px;font-size:1.2rem;min-width:unset}.sesion-btn,.config-btn{box-shadow:0 6px 20px #00000080}button,.user-info button,.lobby-btn,.variant-card,.time-card,.config-section button{padding:14px 20px!important;font-size:1.1rem!important;min-height:48px;border-radius:12px!important;margin:8px 0!important}}.premium-profile{background:linear-gradient(135deg,#1e1e2f 0%,#2a2a40 100%);border-radius:16px;padding:24px;box-shadow:0 8px 32px #0006;border:1px solid rgba(100,100,255,.15)}.section-title{display:flex;align-items:center;gap:12px;color:#a5b4fc;font-size:1.4rem;margin-bottom:20px}.section-title .icon{font-size:1.6rem}.profile-card{background:rgba(30,30,47,.6);border-radius:12px;padding:20px;border:1px solid rgba(255,255,255,.08)}.profile-header{display:flex;align-items:center;gap:20px;margin-bottom:24px}.profile-info{flex:1}.username-display{margin:0;font-size:1.8rem;color:#fff;font-weight:700}.elo-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(139,92,246,.15);padding:6px 12px;border-radius:20px;margin-top:6px}.elo-label{color:#c4b5fd;font-size:.9rem}.elo-value{color:#a78bfa;font-size:1.2rem;font-weight:700}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}.stat-card{background:rgba(40,40,60,.5);border-radius:12px;padding:16px;text-align:center;transition:transform .2s,box-shadow .2s;border:1px solid rgba(255,255,255,.05)}.stat-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #0000004d}.stat-icon{font-size:2rem;margin-bottom:8px;display:block}.stat-content{display:flex;flex-direction:column;gap:4px}.stat-label{color:#94a3b8;font-size:.85rem}.stat-number{font-size:1.6rem;font-weight:700}.stat-card.win .stat-number{color:#22c55e}.stat-card.loss .stat-number{color:#ef4444}.stat-card.draw .stat-number{color:#eab308}.stat-card.total .stat-number{color:#60a5fa}@media (max-width: 768px){:root{--square-size: var(--square-size-mobile)}.header-title h1{font-size:4rem}.logo{width:90px}.clocks{flex-direction:column;gap:20px}.right-sidebar{flex-direction:column}.move-history-panel,.friends-panel{min-height:auto}.selection-row{flex-direction:column}.variant-grid,.time-grid{grid-template-columns:repeat(2,1fr)}.variant-card,.time-card{padding:14px;min-height:80px}.variant-icon{font-size:2rem}.variant-text{font-size:1rem}.time-card{font-size:1.2rem}.welcome-card{padding:30px}.welcome-card h1{font-size:2.2rem}.welcome-text{font-size:1.1rem}.btn-primary.large,.btn-secondary.large{font-size:1.2rem;padding:16px}.variant-section{padding:14px}.variant-header{font-size:1.2rem}.variant-total{font-size:1.6rem}.time-breakdown{padding:12px}.game-controls{flex-direction:column;gap:12px}.game-controls button{width:80%;max-width:300px;font-size:1rem;padding:14px}.accept-all-label{font-size:1.05rem;gap:16px;padding:15px}.accept-all-label .checkmark{width:32px;height:32px}.accept-all-label .checkmark:after{font-size:1.8rem}.config-btn{margin-left:100px}}@media (max-width: 480px){.login-card{padding:40px 20px}.login-logo-large{width:140px;height:140px}.login-title{font-size:2.5rem}.header-title h1{font-size:3rem}.logo{width:70px}.mobile-float-btn.lobby{width:110px;font-size:1.1rem}button{padding:16px 20px!important;font-size:1.2rem!important}}@media (min-width: 1025px){.main-layout{max-width:1800px;gap:40px;padding:30px;max-height:fit-content;margin-top:-10px}.mobile-bottom-buttons{display:none!important}.lobby-sidebar{margin-right:140px;margin-top:-80px}.right-sidebar{margin-left:140px;margin-top:-60px}.lobby-sidebar,.right-sidebar{flex:0 0 420px;min-width:380px}.game-area{padding:0 40px;margin-top:-50px;flex:1;max-width:700px}.logo{width:150px;margin-left:-180px}}.mobile-float-buttons{position:fixed;top:80px;right:16px;z-index:100;display:flex;flex-direction:column;gap:12px;pointer-events:none}.mobile-float-btn{pointer-events:auto;background:rgba(30,30,47,.85);color:#a5b4fc;border:2px solid rgba(165,180,252,.3);border-radius:50%;width:60px;height:60px;font-size:1.1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000080;transition:all .2s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.mobile-float-btn.lobby{background:rgba(76,175,80,.7);border-color:#4caf5080;color:#fff}.mobile-float-btn.config{background:rgba(100,100,255,.7);border-color:#6464ff80}.mobile-float-btn:hover{transform:scale(1.1);box-shadow:0 8px 20px #0009}.mobile-float-btn:active{transform:scale(.95)}.mobile-float-buttons{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:row;gap:12px;pointer-events:none}.mobile-float-btn{pointer-events:auto;background:rgba(30,30,47,.92);color:#fff;border:2px solid rgba(100,100,255,.6);border-radius:50%;width:50px;height:50px;font-size:1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #6464ff66;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-shadow:0 0 6px rgba(100,100,255,.7)}.mobile-float-btn.lobby{background:linear-gradient(135deg,rgba(74,158,255,.8),rgba(58,138,230,.8));border-color:#4a9effe6}.mobile-float-btn.config{background:linear-gradient(135deg,rgba(255,215,0,.6),rgba(218,165,32,.6));border-color:#ffd700cc;color:#16213e}.mobile-float-btn:hover{transform:scale(1.15);box-shadow:0 8px 20px #6464ffb3}.mobile-float-btn:active{transform:scale(.92)}@media (min-width: 769px){.mobile-float-buttons{display:none}}.user-info{display:flex;align-items:center;justify-content:flex-start;gap:16px;padding:12px 20px;background:rgba(30,30,47,.8);border-bottom:1px solid rgba(100,100,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-wrap:wrap}@media (max-width: 768px){.user-info{flex-direction:column;align-items:flex-start;padding:12px 16px;gap:12px;justify-content:flex-start;margin-left:-220px;z-index:-1}.user-info strong,.rating-display{text-align:left;width:100%}.config-btn,.sesion-btn{width:100%;padding:12px;font-size:1rem;border-radius:10px}}@media (min-width: 769px){.user-info{padding:16px 30px;justify-content:flex-start;gap:24px}.user-info strong,.rating-display{margin-right:16px}.config-btn,.sesion-btn{padding:12px 20px;font-size:1rem}}.config-content{overflow-y:auto;max-height:100vh;padding:60px 20px 40px;scrollbar-width:thin}.config-content::-webkit-scrollbar{width:8px}.config-content::-webkit-scrollbar-track{background:rgba(0,0,0,.3);border-radius:10px}.config-content::-webkit-scrollbar-thumb{background:#ffd700;border-radius:10px}.config-content::-webkit-scrollbar-thumb:hover{background:#ffaa00}.close-btn{position:absolute;top:16px;right:16px;background:rgba(220,53,69,.9);color:#fff;border:none;border-radius:50%;width:42px;height:42px;font-size:1.8rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000080;transition:all .2s ease;z-index:10}.config-content h1{font-size:2.2rem;text-align:center;margin:0 0 30px;color:gold;text-shadow:0 0 12px rgba(255,215,0,.5)}.profile-section,.rules-section,.jugabilidad-section{margin-bottom:30px;padding:20px;background:rgba(30,42,68,.6);border-radius:16px;border:1px solid rgba(255,215,0,.3)}.section-title{font-size:1.6rem;margin-bottom:16px;color:#6ba4ff;display:flex;align-items:center;gap:10px}.profile-card{padding:16px;background:rgba(40,40,60,.5);border-radius:12px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-top:20px}.stat-card{background:rgba(30,30,47,.7);padding:16px;border-radius:12px;text-align:center;border:1px solid rgba(255,215,0,.2)}.rules-btn,.jugabilidad-btn{width:100%;padding:16px;font-size:1.2rem;border-radius:12px;margin-top:12px}@media (max-width: 768px){.config-content{padding:50px 16px 30px}.close-btn{top:12px;right:12px;width:38px;height:38px;font-size:1.6rem}.config-content h1{font-size:1.9rem}.section-title{font-size:1.4rem}.stats-grid{grid-template-columns:1fr;gap:12px}.stat-card{padding:14px}.rules-btn,.jugabilidad-btn{padding:14px;font-size:1.1rem}}.close-btn{position:absolute;top:16px;left:16px;background:rgba(220,53,69,.9);color:#fff;border:none;border-radius:50%;width:42px;height:42px;font-size:1.8rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000080;transition:all .2s ease;z-index:10}.close-btn:hover{background:#dc3545;transform:scale(1.1)}@media (max-width: 768px){.close-btn{top:12px;left:12px;width:38px;height:38px;font-size:1.6rem}.login-title{margin-left:-21px}.header-title{margin-top:-250px}}.legal-page{min-height:100vh;background:linear-gradient(135deg,#0f1629 0%,#1a2338 100%);color:#ddd;padding:40px 20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.7}.legal-container{max-width:900px;margin:0 auto;background:rgba(20,28,48,.85);border:1px solid #2a3550;border-radius:16px;padding:40px;box-shadow:0 10px 30px #0009}.legal-container h1{text-align:center;color:#6ba4ff;font-size:2.5rem;margin-bottom:10px}.update-date{text-align:center;color:#888;font-style:italic;margin-bottom:50px;font-size:1rem}.legal-container h2{color:#6ba4ff;margin-top:50px;margin-bottom:15px;font-size:1.6rem;border-bottom:1px solid #334466;padding-bottom:8px}.legal-container p{margin-bottom:20px;font-size:1.05rem}.legal-container ul{padding-left:30px;margin-bottom:25px}.legal-container li{margin-bottom:10px}.legal-container a{color:#6ba4ff;text-decoration:underline;transition:color .3s}.legal-container a:hover{color:#8cc2ff}.legal-container strong{color:#fff}.legal-container code{background:#1e2a44;padding:2px 8px;border-radius:4px;font-family:Courier New,monospace;color:#4ade80}@media (max-width: 768px){.legal-container{padding:30px 20px}.legal-container h1{font-size:2.2rem}.legal-container h2{font-size:1.5rem}}