@import"https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600&family=Playfair+Display:wght@600;700&display=swap";:root{--bg-deep: #080b0f;--bg-card: #10151c;--bg-raised: #171d27;--bg-hover: #1e2635;--gold: #c9a84c;--gold-light: #e8c97a;--gold-dim: #6b5520;--gold-glow: rgba(201, 168, 76, .18);--cream: #f0e6cc;--cream-mid: #b8ac96;--cream-dim: #6b6254;--success: #4ade80;--success-bg: rgba(74, 222, 128, .12);--warn: #fbbf24;--warn-bg: rgba(251, 191, 36, .12);--fail: #f87171;--fail-bg: rgba(248, 113, 113, .12);--info: #60a5fa;--info-bg: rgba(96, 165, 250, .1);--border: rgba(201, 168, 76, .15);--border-mid: rgba(201, 168, 76, .3);--border-hot: rgba(201, 168, 76, .55);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--shadow-card: 0 4px 24px rgba(0,0,0,.5);--shadow-glow: 0 0 20px rgba(201,168,76,.15);--shadow-deep: 0 8px 40px rgba(0,0,0,.7);--ff-head: "Playfair Display", Georgia, serif;--ff-body: "Crimson Pro", Georgia, serif;--ff-mono: "JetBrains Mono", "Courier New", monospace;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--touch-min: 44px;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--board-size: min(100vw - 2 * var(--sp-2), 100vh - 220px, 720px)}@supports (height: 100dvh){:root{--board-size: min(100vw - 2 * var(--sp-2), 100dvh - 220px, 720px)}}.ds-board{touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--touch-min);padding:0 var(--sp-4);font-family:var(--ff-body);font-size:1rem;font-weight:600;color:var(--cream);background:var(--bg-raised);border:1px solid var(--border-mid);border-radius:var(--radius-md);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s,transform .05s}.ds-btn:hover{background:var(--bg-hover);border-color:var(--border-hot)}.ds-btn:active{transform:scale(.98)}.ds-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.ds-btn:disabled{opacity:.45;cursor:not-allowed}.ds-btn--primary{color:#1a1305;background:var(--gold);border-color:var(--gold-light)}.ds-btn--primary:hover{background:var(--gold-light)}.ds-btn--ghost{background:transparent}.ds-btn--danger{color:var(--fail);border-color:var(--fail);background:var(--fail-bg)}.ds-btn--block{display:flex;width:100%}.ds-card{padding:var(--sp-4);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.ds-chip{display:inline-flex;align-items:center;gap:var(--sp-1);padding:2px 10px;font-size:.8rem;color:var(--cream-mid);background:var(--bg-raised);border:1px solid var(--border-mid);border-radius:999px}.ds-chip--ok{color:var(--success);border-color:var(--success);background:var(--success-bg)}.ds-chip--bad{color:var(--fail);border-color:var(--fail);background:var(--fail-bg)}.ds-input{min-height:var(--touch-min);padding:0 var(--sp-3);font-family:var(--ff-body);font-size:16px;color:var(--cream);background:var(--bg-raised);border:1px solid var(--border-mid);border-radius:var(--radius-md)}.ds-input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}.ds-title{font-family:var(--ff-head);color:var(--gold-light)}.ds-mono{font-family:var(--ff-mono)}.ds-muted{color:var(--cream-mid)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}:root{--font-base: 1rem;--font-medium: 1.4rem;--font-large: 2rem;--font-xl: 3.5rem;--font-xxl: 6rem;--square-size: 76px;--square-size-mobile: 50px;--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}.mobile-float-buttons{position:fixed;top:16px;right:16px;display:flex;gap:20px;z-index:1000}.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)}.shared-home-shell{min-height:100vh;padding:20px;background:radial-gradient(circle at top left,rgba(255,215,0,.18),transparent 28%),radial-gradient(circle at 80% 20%,rgba(74,158,255,.16),transparent 24%),radial-gradient(circle at bottom right,rgba(88,255,207,.08),transparent 22%),linear-gradient(135deg,#0d1020 0%,#121a33 55%,#0f1324 100%);color:var(--color-text);display:flex;align-items:stretch}.shared-home-frame{width:min(1440px,100%);margin:0 auto;display:flex;flex-direction:column;gap:18px}.shared-home-footer{display:grid;gap:12px;padding:22px 10px 8px;color:#f0f4ffb3;text-align:center;font-size:.86rem}.shared-home-footer p{margin:0}.shared-home-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px}.shared-home-footer a{color:#b7c8ff;text-decoration:underline;text-underline-offset:3px}.shared-home-footer a:hover{color:#ffe88f}.shared-home-topbar{display:flex;justify-content:flex-end;align-items:center;gap:12px}.shared-home-session-pill{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#ffffffeb;font-weight:700}.shared-home-signout{white-space:nowrap}.shared-home-hero{display:grid;gap:14px}.shared-home-brand{display:flex;align-items:center;gap:24px;padding:24px;border-radius:28px;background:rgba(8,12,24,.72);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px #00000052}.shared-home-logo{width:104px;height:104px;border-radius:28px;object-fit:cover;box-shadow:0 0 28px #ffd7003d}.shared-home-kicker{text-transform:uppercase;letter-spacing:.22em;color:#9fb4ff;font-size:.78rem;margin-bottom:8px}.shared-home-brand h1{font-size:clamp(2.4rem,5vw,4.2rem);line-height:.95;margin-bottom:10px}.shared-home-copy{max-width:42ch;color:#f0f4ffdb;font-size:.98rem;line-height:1.6}.shared-home-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.shared-home-card{text-align:left;min-height:250px;padding:24px;border:0;cursor:pointer}.shared-home-card-selected{transform:translateY(-4px);box-shadow:0 24px 54px #00000057;outline:2px solid rgba(255,232,143,.34)}.portal-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;border-radius:24px;color:#fff;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}.portal-card:hover{transform:translateY(-4px);filter:brightness(1.03)}.portal-card-primary{background:linear-gradient(145deg,#1d5cff,#18308f);box-shadow:0 18px 44px #1d5cff47}.portal-card-secondary{background:linear-gradient(145deg,#0f7d64,#0b3f58);box-shadow:0 18px 44px #0f7d6438}.portal-badge{align-self:flex-start;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-size:.8rem;font-weight:700}.portal-icon{font-size:2.7rem;margin-top:14px}.portal-action{margin-top:14px;font-weight:700;color:#ffe88f}.shared-home-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.85fr);gap:18px;align-items:stretch}.shared-home-panel{background:rgba(8,12,24,.72);border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:22px;box-shadow:0 24px 60px #0000003d}.shared-home-panel-choices,.shared-home-panel-auth{display:flex;flex-direction:column;gap:18px}.shared-home-section-head,.shared-home-auth-copy{display:grid;gap:10px}.shared-home-section-head h2,.shared-home-auth-copy h2{font-size:clamp(1.45rem,2.5vw,1.9rem);line-height:1.05}.shared-home-auth-copy p,.shared-home-note{color:#f0f4ffd1}.shared-home-userbar{margin-bottom:0}.shared-home-session-card{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:18px 20px;border-radius:22px;background:linear-gradient(135deg,rgba(255,232,143,.12),rgba(255,255,255,.04));border:1px solid rgba(255,232,143,.14)}.shared-home-session-copy{display:grid;gap:6px}.shared-home-session-copy strong{font-size:1.2rem}.shared-home-session-copy p,.shared-home-note-card{color:#f0f4ffcc}.shared-home-session-actions{display:grid;justify-items:end;gap:10px}.shared-home-session-rating{white-space:nowrap}.shared-home-session-signout{width:fit-content}.shared-home-note-card{padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.portal-userbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.04)}.portal-user-label{display:block;font-size:.82rem;color:#ffffffa6;margin-bottom:4px}.portal-rating{font-weight:700;color:#ffe88f}.portal-signout{border:0;border-radius:999px;padding:10px 16px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}.shared-home-points{display:grid;gap:12px}.shared-home-points>div{padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.04)}.shared-home-points strong{display:block;margin-bottom:6px}.login-embedded{min-height:auto;padding:0}.login-card-embedded{width:100%;max-width:none;min-height:100%;background:rgba(6,10,18,.88);border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 48px #00000047;border-radius:24px}.shared-home-auth-panel{border-radius:24px;overflow:hidden}.username-setup-embedded{min-height:auto;background:transparent;padding:0}.username-card-embedded{max-width:none;width:100%;padding:28px;border-radius:24px;background:rgba(6,10,18,.88);border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 48px #00000047}.username-card-embedded .setup-logo{width:88px;margin-bottom:14px}.username-card-embedded h1{font-size:1.8rem}.username-card-embedded .subtitle{margin-bottom:18px}.username-card-embedded .info-text.username-note{margin-top:14px}.shared-home-note{align-self:flex-start;border-radius:18px;padding:14px 16px}@media (max-width: 980px){.shared-home-actions,.shared-home-grid{grid-template-columns:1fr}.shared-home-brand{flex-direction:column;align-items:flex-start;padding:22px}.shared-home-shell{padding:18px}}@media (max-width: 720px){.shared-home-logo{width:84px;height:84px}.shared-home-brand h1{font-size:clamp(2rem,9vw,3rem)}.shared-home-card{min-height:220px}}.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%}.player-clocks-container{width:100%;max-width:760px;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;touch-action:none;-webkit-user-select:none;user-select:none}.player-clocks-container .opponent-info-clock,.player-clocks-container .player-info-clock{width:100%;max-width:none;padding:14px 22px;background:linear-gradient(135deg,rgba(20,28,48,.92),rgba(10,14,26,.92));border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 40px #00000042;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.player-clocks-container .board-container{padding:18px;border-radius:26px;background:linear-gradient(180deg,rgba(10,14,26,.9),rgba(7,10,20,.96));border:1px solid rgba(255,255,255,.08);box-shadow:0 26px 60px #0000005c}.player-clocks-container .board{border-width:10px;box-shadow:0 0 40px #8b4513ad}.player-clocks-container .current-game-panel,.player-clocks-container .move-history-panel,.player-clocks-container .friends-panel{width:100%;max-width:none;margin:0;padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(18,24,40,.92),rgba(12,16,28,.92));border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 42px #0000003d;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.player-clocks-container .current-game-panel{height:auto;margin-top:0}.player-clocks-container .current-game-panel h3,.player-clocks-container .move-history-panel h3,.player-clocks-container .friends-panel h3{background:transparent;border:0;padding:0;color:#f5f7ff;font-size:1.08rem;letter-spacing:.08em;text-transform:uppercase;text-shadow:none;margin-bottom:16px}.player-clocks-container .move-history-panel,.player-clocks-container .friends-panel{min-height:0}.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;touch-action:manipulation}.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;touch-action:manipulation;-webkit-user-select:none;user-select:none}.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(2px 2px 4px rgba(0,0,0,.8));cursor:pointer;transition:transform .2s;pointer-events:none}.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,.lobby-panel 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-info{background:linear-gradient(135deg,rgba(30,42,68,.75),rgba(14,20,32,.92));border:1px solid rgba(255,215,0,.22);border-radius:16px;padding:16px;display:grid;gap:12px}.current-game-info h4{color:#ffe88f;font-size:1.1rem}.current-game-info .info-text{color:#f0f4ffd1;line-height:1.5}.leave-game-btn{width:100%;border:0;border-radius:14px;padding:14px 16px;background:linear-gradient(135deg,#ff5c72,#c93f58);color:#fff;font-weight:700;cursor:pointer;box-shadow:0 10px 22px #c93f583d}.leave-game-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}.mobile-float-buttons{display:none}.mobile-float-btn{border:none;cursor:pointer}.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:flex}.main-layout{flex-direction:column;align-items:center;padding:10px 10px 100px}.game-area{width:100%;max-width:500px;margin:0 auto}.mobile-float-buttons{position:fixed;top:16px;right:16px;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-float-btn.config{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.mobile-float-btn.settings{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);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}.mobile-sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(3,7,18,.56);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:997}.opponent-info-clock,.player-info-clock{padding:16px 24px;font-size:1.5rem;border-radius:18px;gap:20px}.clock.active{font-size:2rem}.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:76px}.clocks{flex-direction:column;gap:20px}.right-sidebar{flex-direction:column}.board-container{padding:12px;margin-bottom:20px}.board{border-width:6px}.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}}@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}.mobile-float-btn.config{width:58px;height:58px;font-size:1.2rem}button{padding:16px 20px!important;font-size:1.2rem!important}}html,body,#root{width:100%;min-height:100%;overflow-x:hidden;background:radial-gradient(circle at top,rgba(255,215,0,.08),transparent 28%),radial-gradient(circle at 80% 15%,rgba(106,164,255,.08),transparent 24%),linear-gradient(135deg,#0b1020 0%,#0d1326 42%,#12192d 100%)}body{color:var(--color-text)}.app-root{min-height:100vh;padding:14px 16px 28px;overflow-x:hidden;position:relative;isolation:isolate}.app-root:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at top,rgba(255,215,0,.08),transparent 30%),radial-gradient(circle at bottom right,rgba(106,164,255,.08),transparent 28%);z-index:-1}.header-title{margin:6px auto 12px;gap:14px;padding:0 12px;flex-wrap:wrap}.header-title h1{font-size:clamp(2.4rem,3vw,4.2rem);letter-spacing:.1em}.logo{width:90px}.user-info{position:static;top:auto;right:auto;margin:0 0 8px auto;display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;font-size:1rem}.user-info button{margin-left:0;min-width:0}.main-layout{width:min(100%,1640px);gap:20px;padding:16px 10px 28px;align-items:flex-start;justify-content:center;overflow-x:hidden}.game-area{flex:1 1 620px;max-width:620px;width:100%}.player-clocks-container{max-width:620px;width:100%}.board-container{background:linear-gradient(180deg,rgba(4,8,18,.84),rgba(10,14,26,.92));border:1px solid rgba(255,215,0,.16);box-shadow:0 18px 50px #00000073,0 0 0 1px #ffffff08;border-radius:24px;padding:6px;width:fit-content;display:inline-flex;align-items:center;justify-content:center}.board{border-width:6px;border-color:#8b4513d1;box-shadow:0 0 36px #8b451361,inset 0 0 0 1px #ffffff08}.square.light{background:linear-gradient(135deg,#efe3c5 0%,#d8c6a3 100%)}.square.dark{background:linear-gradient(135deg,#6f5438 0%,#523827 100%)}.piece-img{filter:drop-shadow(0 3px 5px rgba(0,0,0,.72))}.lobby-sidebar{flex:0 1 360px;min-width:320px;max-width:360px}.right-sidebar{width:100%;max-width:360px;flex:0 0 340px;gap:18px}.current-game-panel,.move-history-panel,.friends-panel,.lobby-sidebar{background:linear-gradient(180deg,rgba(16,22,40,.92),rgba(10,14,26,.92));border:1px solid rgba(255,215,0,.16);box-shadow:0 12px 36px #00000059,inset 0 1px #ffffff0a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.current-game-panel{width:100%;height:auto;margin-top:0;margin-bottom:0;border-radius:18px}.move-history-panel,.friends-panel{width:100%;border-radius:18px;overflow:hidden}.move-history-panel h3,.friends-panel h3,.current-game-panel h3{background:linear-gradient(180deg,rgba(255,215,0,.14),rgba(255,215,0,.04));border-bottom:1px solid rgba(255,215,0,.16);color:#fff6d2;letter-spacing:.04em}.friends-panel .search-section{background:rgba(255,255,255,.04);border:1px solid rgba(255,215,0,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.friends-panel .search-section input{background:rgba(7,10,20,.72);border-color:#ffffff1a}.friends-panel .search-section button{box-shadow:0 8px 18px #4a9eff3d}.opponent-info-clock,.player-info-clock{width:100%;justify-content:space-between;gap:18px;border-radius:18px;padding:14px 20px;background:linear-gradient(180deg,rgba(16,22,40,.92),rgba(10,14,26,.92));border:1px solid rgba(255,215,0,.16);box-shadow:0 12px 36px #00000059,inset 0 1px #ffffff0a}.clock{min-width:168px;border:1px solid rgba(255,255,255,.1);background:rgba(4,8,18,.62)}.clock.active{background:linear-gradient(135deg,rgba(255,215,0,.22),rgba(106,164,255,.18));box-shadow:0 0 0 1px #ffd7003d,0 0 24px #ffd70038;transform:translateY(-1px) scale(1.03)}.loading-screen,.portal-screen{background:radial-gradient(circle at top,rgba(255,215,0,.12),transparent 26%),radial-gradient(circle at bottom right,rgba(106,164,255,.12),transparent 22%),linear-gradient(135deg,#08101f 0%,#0d1426 100%)}@media (max-width: 1440px){.main-layout{flex-wrap:wrap;justify-content:center}.lobby-sidebar,.right-sidebar{flex:1 1 360px;max-width:420px;margin-left:0;margin-right:0}.game-area{max-width:720px}}@media (max-width: 1100px){.main-layout{flex-direction:column;align-items:center}.lobby-sidebar,.right-sidebar{width:min(100%,720px);max-width:720px;flex:1 1 auto}.game-area{max-width:720px}}.user-info{position:static!important;top:auto!important;right:auto!important;left:auto!important;width:min(100%,1600px)!important;margin:12px auto 10px!important;padding:0 16px!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:12px!important;flex-wrap:wrap!important}.user-info strong,.user-info .rating-display{flex:0 0 auto}.main-layout{display:grid!important;grid-template-columns:minmax(250px,300px) minmax(0,1fr) minmax(250px,300px)!important;justify-content:center!important;align-items:start!important;width:min(100%,1540px)!important;margin:0 auto!important;padding:16px 16px 28px!important;gap:clamp(16px,2vw,28px)!important;overflow-x:hidden!important}.lobby-sidebar,.right-sidebar,.game-area{position:static!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important}.lobby-sidebar{flex:0 0 auto!important;max-width:none!important;max-height:calc(100vh - 250px);overflow-y:auto}.right-sidebar{flex:0 0 auto!important;display:flex!important;flex-direction:column!important;gap:18px!important;max-width:none!important;max-height:calc(100vh - 250px);overflow-y:auto;padding-right:6px}.game-area{display:flex!important;flex-direction:column!important;align-items:center!important;justify-self:center!important;max-width:none!important}.player-clocks-container{width:100%!important;max-width:none!important}.opponent-info-clock,.player-info-clock,.board-container,.move-history-panel,.friends-panel,.current-game-panel,.lobby-sidebar{width:100%!important}@media (max-width: 1280px){:root{--square-size: 68px}.main-layout{grid-template-columns:minmax(280px,1fr)!important;width:min(100%,900px)!important}.game-area,.lobby-sidebar,.right-sidebar{max-width:none!important}}@media (max-width: 1024px){:root{--square-size: 62px}.user-info{justify-content:center!important}.main-layout{width:min(100%,760px)!important;padding:12px 12px 20px!important}.game-area,.lobby-sidebar,.right-sidebar{width:100%!important}.lobby-sidebar,.right-sidebar{display:flex!important;position:static!important;height:auto!important;overflow:visible!important}}@media (max-width: 600px){:root{--square-size: 48px}.header-title{margin:4px auto 14px!important;gap:10px!important}.header-title h1{font-size:2rem!important}.logo{width:72px!important}}@media (max-width: 1024px){.main-layout{display:flex!important;flex-direction:column!important;align-items:center!important;gap:16px!important;width:100%!important;max-width:760px!important;margin:0 auto!important;padding:4px 10px 92px!important}.game-area{width:100%!important;max-width:100%!important;order:2;gap:8px!important}.lobby-sidebar,.right-sidebar{display:none!important;position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;width:min(100vw,420px)!important;max-width:100vw!important;height:100dvh!important;margin:0!important;padding:64px 12px 18px!important;overflow-y:auto!important;z-index:998!important;box-shadow:var(--shadow-strong)!important;background:linear-gradient(180deg,rgba(8,12,24,.98),rgba(6,10,20,.98))!important}.lobby-sidebar.visible,.right-sidebar.visible{display:flex!important;flex-direction:column!important}.lobby-sidebar{left:0!important;right:auto!important}.right-sidebar{left:auto!important;right:0!important}.mobile-float-buttons{position:fixed!important;bottom:16px!important;top:auto!important;left:50%!important;right:auto!important;transform:translate(-50%)!important;display:flex!important;gap:10px!important;z-index:1000!important}.mobile-sidebar-backdrop{display:block!important}.header-title{margin:0 auto 4px!important;gap:8px!important;padding:0 8px!important}.header-title h1{font-size:1.2rem!important;letter-spacing:.08em!important}.logo{width:44px!important}.user-info{margin:0 0 4px auto!important;padding:0 6px!important;font-size:.72rem!important;gap:6px!important;line-height:1.1!important}.user-info button{padding:6px 10px!important;min-width:auto!important;font-size:.72rem!important}.user-info strong,.user-info .rating-display{font-size:.72rem!important}.player-clocks-container{gap:6px!important}.opponent-info-clock,.player-info-clock{padding:8px 10px!important;gap:8px!important}.board-container{padding:3px!important;border-radius:14px!important;margin-bottom:8px!important}.board{border-width:5px!important}.current-game-panel,.move-history-panel,.friends-panel{margin-top:8px!important}.app-footer{display:none!important}}@media (min-width: 1025px){html,body,#root{height:100%;overflow:hidden!important}.app-root{height:100dvh;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden!important}.user-info{margin:6px auto 4px!important;padding:0 12px!important}.header-title{margin:6px auto 8px!important;gap:18px!important;padding:0 12px!important}.header-title h1{font-size:clamp(2.8rem,4vw,4.8rem)!important}.main-layout{flex:1 1 auto;min-height:0;max-width:1900px;width:min(100%,1900px);margin:0 auto;padding:8px 16px 12px;gap:18px;display:grid;grid-template-columns:minmax(400px,1fr) minmax(0,1.05fr) minmax(320px,.85fr);align-items:start;overflow:hidden!important}.mobile-float-buttons{display:none!important}.lobby-sidebar,.right-sidebar{min-width:0;max-height:calc(100dvh - 165px);overflow-y:auto;overflow-x:hidden;margin:0}.lobby-sidebar{padding-right:0;overflow:visible;max-height:none;width:100%!important;max-width:none!important;min-width:0!important;flex:0 0 auto!important}.right-sidebar{padding-left:4px}.lobby-panel{display:flex;flex-direction:column;gap:12px;width:100%;min-width:0}.selection-row{gap:10px;margin-bottom:0}.selection-row>div{min-width:0}.variant-selection,.time-selection{padding:14px;border-radius:18px;background:linear-gradient(180deg,rgba(15,21,38,.94),rgba(10,15,28,.92));border:1px solid rgba(255,215,0,.12);box-shadow:0 12px 32px #00000038}.variant-grid,.time-grid{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.variant-card,.time-card{min-height:62px;padding:10px;border-radius:14px;background:linear-gradient(180deg,rgba(26,33,58,.96),rgba(19,25,44,.96));border:1px solid rgba(112,137,186,.22);box-shadow:0 8px 18px #0000002e}.variant-icon{font-size:1.35rem;margin-bottom:4px}.variant-text,.time-card{font-size:.86rem}.lobby-counts{margin:0;padding:12px 14px 14px;border-radius:18px;background:linear-gradient(180deg,rgba(15,21,38,.9),rgba(10,15,28,.88));border:1px solid rgba(255,215,0,.1);box-shadow:0 10px 24px #00000029}.lobby-counts-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}.lobby-counts-total{min-width:56px;padding:6px 12px;border-radius:999px;text-align:center;font-size:1rem;font-weight:800;color:#ffe88f;background:rgba(255,255,255,.06);border:1px solid rgba(255,232,143,.12)}.lobby-counts-hint{margin:0 0 10px;font-size:.78rem;line-height:1.35;color:#f0f4ff9e}.variants-list.horizontal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.variant-section{position:relative;padding:12px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(15,21,38,.96),rgba(10,15,28,.94));border:1px solid rgba(255,215,0,.12);box-shadow:0 12px 30px #00000038}.variant-header{font-size:.92rem;margin-bottom:8px;cursor:default}.variant-total{font-size:1.1rem;padding:3px 8px;background:linear-gradient(135deg,rgba(255,215,0,.16),rgba(74,158,255,.18))}.variant-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:0;opacity:0;transform:translateY(-4px);overflow:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,max-height .2s ease}.variant-section:hover .variant-mini-grid{max-height:180px;opacity:1;transform:translateY(0);pointer-events:auto}.variant-mini-stat{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}.variant-mini-time{font-size:.78rem;color:#f0f4ffb8;letter-spacing:.02em}.variant-mini-count{font-size:.95rem;font-weight:700;color:#ffe88f}.action-panel{margin-top:0;margin-bottom:0}.current-game-info,.search-section{width:100%}.search-section,.current-game-info{display:flex;flex-direction:column;justify-content:center;min-height:100%;padding:4px 0}.lobby-btn.primary.big{max-width:none;margin-top:0;padding:16px 14px;font-size:1.08rem;border-radius:16px;background:linear-gradient(135deg,#49c7d8,#4b9768);box-shadow:0 14px 30px #49c7d838}.search-info,.loading-hint{font-size:.82rem}.game-area{min-width:0;max-width:760px;justify-self:center;padding:0 4px}.player-clocks-container{gap:10px}.board-container{margin-bottom:10px}.logo{width:104px}}@media (min-width: 1025px){.main-layout{max-width:1900px!important;width:min(100%,1900px)!important;grid-template-columns:minmax(300px,.78fr) minmax(0,1.62fr) minmax(260px,.62fr)!important;gap:16px!important}.lobby-sidebar{width:100%!important;max-width:none!important;min-width:0!important;flex:0 0 auto!important;overflow:visible!important}.right-sidebar{width:100%!important;max-width:none!important;min-width:0!important;flex:0 0 auto!important}.lobby-overview-row{grid-template-columns:1fr!important;gap:12px!important}.variant-grid,.time-grid,.variants-list.horizontal{grid-template-columns:repeat(2,minmax(0,1fr))!important}}.board{border:6px solid var(--bg-elevated, #1a2332)!important;border-radius:var(--radius-md, 10px)!important;box-shadow:var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, .5))!important;touch-action:none!important;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.square{touch-action:none!important;-webkit-tap-highlight-color:transparent}.square.selected{box-shadow:inset 0 0 0 4px var(--gold, #c9a227)!important}.player-clocks-container{max-width:100%!important;width:auto!important}.opponent-info-clock,.player-info-clock{width:100%!important;max-width:none!important;box-sizing:border-box;justify-content:space-between!important;padding:8px 14px!important;margin:8px 0!important;font-size:1.05rem!important;border-radius:var(--radius-md, 10px)!important}.clock.active{font-size:1.25rem!important}.controls-buttons-row button,.mobile-float-btn,.lobby-sidebar button,.right-sidebar button{min-height:var(--touch-min, 44px)}@media (max-width: 1024px){html,body,#root{overflow-x:hidden;max-width:100vw}.app-root .main-layout,.app-root .game-area{min-width:0!important;max-width:100vw!important}.app-root .header-title{padding:6px 0!important}.app-root .header-title h1{font-size:1.1rem!important}.app-root .header-title .logo{height:28px!important;width:auto!important}.app-root .user-info{position:static!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center;justify-content:center;gap:8px!important;width:100%!important;max-width:none!important;margin:0!important;padding:4px 8px!important;font-size:.85rem!important;box-sizing:border-box}.app-root .user-info .config-btn{display:none!important}.app-root .user-info button,.app-root .user-info .sesion-btn{width:auto!important;min-height:32px!important;padding:4px 12px!important;margin:0!important;font-size:.78rem!important}.app-root .main-layout{display:block!important;padding:0 8px!important}.app-root .game-area{width:100%!important;padding:0!important}.app-root .board-container{display:flex;justify-content:center}.app-root .mobile-float-buttons{position:fixed!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;max-width:none!important;transform:none!important;margin:0!important;box-sizing:border-box;top:auto!important;display:flex!important;flex-direction:row!important;gap:8px;padding:8px 10px calc(8px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));background:var(--bg-elevated, #111827);border-top:1px solid rgba(201,162,39,.35);z-index:900}.app-root .mobile-float-buttons .mobile-float-btn{position:static!important;flex:1;border-radius:var(--radius-md, 10px)!important;width:auto!important;height:auto!important;font-size:.95rem!important}.app-root{padding-bottom:72px}.app-root .app-footer{padding-bottom:80px}.app-root .game-area,.app-root .board-container,.app-root .player-clocks-container{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}.app-root .opponent-info-clock,.app-root .player-info-clock{width:100%!important;padding:6px 12px!important;margin:6px 0!important;min-height:0!important;font-size:1rem!important}.app-root .opponent-info-clock .clock,.app-root .player-info-clock .clock{min-width:0!important;width:auto!important;padding:4px 12px!important;font-size:1.15rem!important}}@media (max-width: 1024px){.config-modal,.challenge-modal,.promotion-modal,.game-over-modal,.draw-offer-modal,.rematch-modal,.rules-modal-overlay,.modal-overlay,.jugabilidad-modal,.modal:not(.jugabilidad-modal){position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;width:100%!important;height:auto!important;max-height:none!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;display:flex!important;align-items:flex-start!important;justify-content:center!important;padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px))!important;box-sizing:border-box!important;overscroll-behavior:contain}.config-content,.challenge-content,.draw-offer-content,.rematch-content,.game-over-content,.promotion-content,.rules-modal-content,.jugabilidad-content{position:relative!important;margin:auto!important;width:100%!important;max-width:480px!important;max-height:none!important;overflow:visible!important;padding:56px 16px 20px!important;box-sizing:border-box!important}.rules-modal-content{max-width:720px!important}.jugabilidad-modal{background:rgba(0,0,0,.85)!important;border:0!important;border-radius:0!important;z-index:2100!important}.jugabilidad-content{background:rgba(10,15,30,.98);border:3px solid #6ba4ff;border-radius:16px;padding:16px!important}.jugabilidad-content h2{font-size:1.2rem!important;margin:0 0 12px!important}.config-content>.close-btn,.jugabilidad-content>.close-btn,.rules-modal-content .close-btn{position:absolute!important;top:6px!important;right:6px!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;font-size:1.8rem!important;z-index:5}.config-content h1{font-size:1.4rem!important;margin:0 0 12px!important}.close-guide-btn,.rules-btn,.jugabilidad-btn{min-height:44px;width:100%}.app-root .lobby-sidebar,.app-root .right-sidebar{right:0!important;left:0!important;width:100%!important;max-width:none!important;height:auto!important;max-height:none!important;top:0!important;bottom:0!important;padding:calc(60px + env(safe-area-inset-top,0px)) 12px calc(20px + env(safe-area-inset-bottom,0px))!important;box-sizing:border-box!important;-webkit-overflow-scrolling:touch}.app-root .mobile-panel-close{position:fixed!important;top:calc(8px + env(safe-area-inset-top,0px))!important;right:10px!important;width:44px!important;height:44px!important;z-index:1002!important}}@media (min-width: 1025px){.player-clocks-container{align-items:stretch!important}}html[data-v] body,html[data-v] .app-root{background:var(--bg-deep)!important;color:var(--cream)!important;font-family:var(--ff-body)!important}html[data-v] .app-root:before{display:none!important}html[data-v] .header-title h1,html[data-v] .app-root h1,html[data-v] .app-root h3{font-family:var(--ff-head)!important;color:var(--gold-light)!important;text-shadow:none!important;letter-spacing:.04em}html[data-v] .app-root .user-info,html[data-v] .app-root .opponent-info-clock,html[data-v] .app-root .player-info-clock,html[data-v] .app-root .lobby-sidebar>*,html[data-v] .app-root .right-sidebar>*{background:var(--bg-card)!important;border:1px solid var(--border)!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-card)!important;color:var(--cream)!important}html[data-v] .app-root .opponent-info-clock *,html[data-v] .app-root .player-info-clock *{color:var(--cream)!important;text-shadow:none!important}html[data-v] .app-root .mobile-float-buttons{background:rgba(8,11,15,.92)!important;border-top:1px solid var(--border-mid)!important}html[data-v] .app-root .mobile-float-buttons button{background:var(--bg-raised)!important;color:var(--gold-light)!important;border:1px solid var(--border-mid)!important;box-shadow:none!important;font-family:var(--ff-head)!important;letter-spacing:.08em}html[data-v] .app-root .user-info button{background:transparent!important;color:var(--fail)!important;border:1px solid var(--fail)!important}html[data-v] .board{border-radius:var(--radius-md)!important}html[data-v] .app-root .board-container{background:none!important}html[data-v]:not(:has(.app-root)),html[data-v]:not(:has(.app-root)) body,html[data-v]:not(:has(.app-root)) #root{height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important}html[data-v]:not(:has(.app-root)) .shared-home-shell{height:auto!important;min-height:100vh}@media (min-width: 1025px){html[data-v]:has(.app-root) body{overflow:hidden!important}html[data-v] .app-root{display:grid!important;grid-template-columns:1fr auto!important;grid-template-rows:56px minmax(0,1fr) 26px!important;height:100dvh!important;min-height:0!important;padding:0!important;overflow:hidden!important}html[data-v] .app-root .header-title{grid-column:1 / -1;grid-row:1;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:12px!important;padding:0 20px!important;margin:0!important;border-bottom:1px solid var(--border);background:var(--bg-card)}html[data-v] .app-root .header-title .logo{height:34px!important;width:auto!important;border-radius:6px}html[data-v] .app-root .header-title h1{font-size:1.25rem!important;margin:0!important}html[data-v] .app-root .user-info{grid-column:1 / -1;grid-row:1;justify-self:end;position:relative!important;z-index:5!important;width:auto!important;max-width:60%!important;background:transparent!important;position:static!important;display:flex!important;align-items:center!important;gap:10px!important;height:56px;margin:0!important;padding:0 20px!important;border-radius:0!important;border:0!important;border-bottom:1px solid var(--border)!important;box-shadow:none!important;white-space:nowrap}html[data-v] .app-root .user-info strong{color:var(--gold-light);font-family:var(--ff-head)}html[data-v] .app-root .user-info button{min-height:34px!important;padding:0 14px!important;font-size:.9rem!important;border-radius:var(--radius-md)!important;background:transparent!important;color:var(--cream-mid)!important;border:1px solid var(--border-mid)!important}html[data-v] .app-root .user-info .sesion-btn{color:var(--fail)!important;border-color:var(--fail)!important}html[data-v] .app-root .main-layout{grid-column:1 / -1;grid-row:2;display:grid!important;grid-template-columns:310px minmax(0,1fr) 330px!important;gap:18px!important;width:100%!important;max-width:none!important;margin:0!important;padding:16px 18px!important;min-height:0!important;height:100%!important;box-sizing:border-box!important;overflow:hidden!important;align-items:stretch!important}html[data-v] .app-root .lobby-sidebar,html[data-v] .app-root .right-sidebar{position:static!important;transform:none!important;display:flex!important;flex-direction:column!important;gap:14px!important;width:auto!important;max-width:none!important;min-width:0!important;height:100%!important;max-height:none!important;overflow-y:auto!important;padding:0 4px 0 0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent}html[data-v] .app-root .mobile-panel-close,html[data-v] .app-root .mobile-float-buttons,html[data-v] .app-root .mobile-sidebar-backdrop{display:none!important}html[data-v] .app-root .search-section{height:auto!important;min-height:0!important;flex:0 0 auto!important;display:flex!important;flex-direction:row!important;gap:8px!important;align-items:center!important;padding:0!important;background:none!important;border:0!important;margin:0 0 10px!important}html[data-v] .app-root .friends-panel>*,html[data-v] .app-root .friends-list{min-height:0!important}html[data-v] .app-root .friends-panel h3,html[data-v] .app-root .current-game-panel h3,html[data-v] .app-root .move-history-panel h3{height:auto!important;min-height:0!important;flex:0 0 auto!important}html[data-v] .app-root .friends-panel{display:flex!important;flex-direction:column!important;height:auto!important}html[data-v] .app-root .friends-panel{min-height:0!important;max-height:none!important}html[data-v] .app-root .friends-list{height:auto!important;flex:0 0 auto!important}html[data-v] .app-root .search-section button,html[data-v] .app-root .lobby-sidebar button[class*=search],html[data-v] .app-root .lobby-sidebar .find-opponent-btn,html[data-v] .app-root .lobby-sidebar .search-btn{background:linear-gradient(180deg,var(--gold-light),var(--gold))!important;color:#1a1304!important;border:0!important;box-shadow:none!important;font-family:var(--ff-head)!important;font-weight:700!important}html[data-v] .app-root .right-sidebar>*,html[data-v] .app-root .lobby-sidebar>*{flex:0 0 auto!important}html[data-v] .app-root .friends-panel{overflow:visible!important}html[data-v] .app-root .move-history-panel{flex:1 1 auto!important;min-height:160px!important}html[data-v] .app-root .move-history-panel button{background:var(--bg-raised)!important;color:var(--gold-light)!important;border:1px solid var(--border-mid)!important;box-shadow:none!important}html[data-v] .app-root .lobby-sidebar button{min-height:38px!important}html[data-v] .app-root .game-info-centered{display:flex!important;flex-direction:column!important;gap:6px!important}html[data-v] .app-root .info-item{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;gap:10px!important;padding:6px 10px!important;background:var(--bg-deep)!important;border-radius:var(--radius-md)!important}html[data-v] .app-root .info-item .label{color:var(--cream-mid)!important;font-size:.85rem!important}html[data-v] .app-root .info-item .value{color:var(--gold-light)!important;font-size:.9rem!important;text-align:right}html[data-v] .app-root .move-history-panel button{min-height:32px!important;height:32px!important;padding:0 10px!important;font-size:.85rem!important;flex:1 1 0!important}html[data-v] .app-root .search-section input{flex:1 1 auto!important;min-width:0!important;height:38px!important;padding:0 12px!important;border-radius:var(--radius-md)!important;background:var(--bg-deep)!important;color:var(--cream)!important;border:1px solid var(--border-mid)!important;font-size:.95rem!important}html[data-v] .app-root .search-section button,html[data-v] .app-root .friends-panel button{min-height:34px!important;padding:0 12px!important;font-size:.85rem!important;border-radius:var(--radius-md)!important}html[data-v] .app-root .friends-panel,html[data-v] .app-root .current-game-panel,html[data-v] .app-root .move-history-panel{margin:0!important;padding:14px!important;box-sizing:border-box!important}html[data-v] .app-root .right-sidebar h3,html[data-v] .app-root .lobby-sidebar h3{font-size:1.05rem!important;margin:0 0 10px!important;padding:0 0 8px!important;background:none!important;border:0!important;border-bottom:1px solid var(--border)!important}html[data-v] .app-root .game-area{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;max-width:none!important;min-width:0!important;height:100%!important;margin:0!important;padding:0!important;overflow-y:auto;scrollbar-width:none}html[data-v] .app-root .player-clocks-container{display:flex!important;flex-direction:column!important;align-items:center!important;gap:8px!important;width:auto!important}html[data-v] .app-root .opponent-info-clock,html[data-v] .app-root .player-info-clock{width:100%!important;box-sizing:border-box!important;padding:4px 14px!important;min-height:0!important;height:44px!important;margin:0!important}html[data-v] .app-root .opponent-info-clock .clock,html[data-v] .app-root .player-info-clock .clock{min-height:0!important;height:32px!important;padding:0 14px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:1.05rem!important;min-width:84px!important;width:auto!important;margin:0!important;background:var(--bg-deep)!important;border-radius:var(--radius-md)!important}html[data-v] .app-root .opponent-info-clock .clock.active,html[data-v] .app-root .player-info-clock .clock.active{background:var(--gold-glow)!important;box-shadow:inset 0 0 0 1px var(--gold)!important;color:var(--gold-light)!important}html[data-v] .app-root .game-area>*{margin-top:0!important;margin-bottom:0!important}html[data-v] .app-root .board-container{margin:0!important}html[data-v] .app-root .app-footer{grid-column:1 / -1;grid-row:3;display:flex!important;align-items:center;justify-content:center;gap:18px;padding:0 12px!important;margin:0!important;height:26px;background:var(--bg-card)!important;border-top:1px solid var(--border)!important;font-size:.72rem!important;overflow:hidden}html[data-v] .app-root .app-footer .footer-links{display:flex;gap:14px;margin:0!important}html[data-v] .app-root .app-footer a{color:var(--cream-mid)!important}html[data-v] .app-root .app-footer .copyright{margin:0!important;color:var(--cream-dim)!important;white-space:nowrap}}@media (min-width: 1025px){html[data-v] .app-root .main-layout{grid-template-columns:280px minmax(0,1fr) 300px!important;gap:14px!important;padding:12px 14px!important}html[data-v] .app-root .header-title h1{font-size:1.1rem!important}html[data-v] .app-root .lobby-panel{display:flex!important;flex-direction:column!important;gap:10px!important;padding:0!important}html[data-v] .app-root .lobby-panel>h3,html[data-v] .app-root .lobby-panel>.lobby-title{display:none!important}html[data-v] .app-root .selection-row{display:flex!important;flex-direction:column!important;gap:10px!important}html[data-v] .app-root .variant-selection,html[data-v] .app-root .time-selection{width:100%!important;box-sizing:border-box!important;padding:10px!important;margin:0!important;background:var(--bg-card)!important;border:1px solid var(--border)!important;border-radius:var(--radius-lg)!important}html[data-v] .app-root .selection-title{margin:0 0 8px!important;font-family:var(--ff-mono)!important;font-size:.68rem!important;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim)!important;text-align:left!important}html[data-v] .app-root .variant-grid,html[data-v] .app-root .time-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:6px!important}html[data-v] .app-root .variant-card,html[data-v] .app-root .time-card{min-width:0!important;width:auto!important;height:auto!important;min-height:0!important;padding:8px 2px!important;border-radius:var(--radius-sm)!important;background:var(--bg-raised)!important;border:1px solid var(--border)!important;color:var(--cream-mid)!important;box-shadow:none!important;transform:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important;font-size:.74rem!important;line-height:1.1!important}html[data-v] .app-root .variant-icon{font-size:1.15rem!important}html[data-v] .app-root .variant-card:hover,html[data-v] .app-root .time-card:hover{background:var(--bg-hover)!important;border-color:var(--border-mid)!important;color:var(--cream)!important}html[data-v] .app-root .variant-card.active,html[data-v] .app-root .time-card.active{background:var(--gold-glow)!important;border-color:var(--gold)!important;color:var(--gold-light)!important}html[data-v] .app-root .lobby-btn.primary,html[data-v] .app-root .lobby-btn.big{background:var(--gold)!important;color:var(--bg-deep)!important;border:0!important;border-radius:var(--radius-md)!important;font-family:var(--ff-body)!important;font-weight:600!important;font-size:1rem!important;letter-spacing:.03em;box-shadow:none!important;padding:10px 14px!important;width:100%!important}html[data-v] .app-root .lobby-btn.primary:hover{background:var(--gold-light)!important}html[data-v] .app-root .lobby-btn.secondary,html[data-v] .app-root .lobby-btn.cancel{background:transparent!important;color:var(--gold)!important;border:1.5px solid var(--gold)!important;border-radius:var(--radius-md)!important;box-shadow:none!important}html[data-v] .app-root .search-info{font-size:.8rem!important;opacity:.8}html[data-v] .app-root .lobby-counts{padding:10px!important;margin:0!important;background:var(--bg-card)!important;border:1px solid var(--border)!important;border-radius:var(--radius-lg)!important}html[data-v] .app-root .lobby-counts-head{display:flex!important;justify-content:space-between!important;align-items:center!important;margin:0 0 6px!important}html[data-v] .app-root .lobby-counts .lobby-title{margin:0!important;font-family:var(--ff-mono)!important;font-size:.68rem!important;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim)!important;text-shadow:none!important}html[data-v] .app-root .lobby-counts-total{font-size:.9rem!important;padding:2px 10px!important;min-width:0!important;height:auto!important;color:var(--success)!important;background:var(--success-bg)!important;border-radius:99px!important}html[data-v] .app-root .lobby-counts-hint{display:none!important}html[data-v] .app-root .variants-list{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:6px!important}html[data-v] .app-root .variant-section{padding:6px 8px!important;margin:0!important;background:var(--bg-raised)!important;border:1px solid var(--border)!important;border-radius:var(--radius-sm)!important;box-shadow:none!important}html[data-v] .app-root .variant-name{font-size:.78rem!important;color:var(--cream-mid)!important}html[data-v] .app-root .variant-total{font-size:.85rem!important;color:var(--gold-light)!important;background:none!important;box-shadow:none!important}html[data-v] .app-root .right-sidebar h3,html[data-v] .app-root .lobby-sidebar h3{font-family:var(--ff-mono)!important;font-size:.68rem!important;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim)!important;text-align:left!important;font-weight:500!important}html[data-v] .app-root .search-section button,html[data-v] .app-root .friends-panel button{background:var(--gold)!important;color:var(--bg-deep)!important;border-radius:var(--radius-md)!important;font-family:var(--ff-body)!important;font-weight:600!important}html[data-v] .app-root .move-history-panel button{background:var(--bg-raised)!important;color:var(--cream-mid)!important;border:1px solid var(--border)!important;border-radius:var(--radius-sm)!important;font-family:var(--ff-body)!important;font-weight:600!important}html[data-v] .app-root .move-history-panel button:hover{background:var(--bg-hover)!important;color:var(--cream)!important}}html[data-v=a] .board{border:6px solid var(--gold-dim)!important;box-shadow:var(--shadow-glow),var(--shadow-deep)!important}html[data-v=a] .square.light{background:#e8d9b5!important}html[data-v=a] .square.dark{background:#8a6a43!important}html[data-v=b] .board{border:6px solid #1c2a22!important;box-shadow:var(--shadow-deep)!important}html[data-v=b] .square.light{background:#eeeed2!important}html[data-v=b] .square.dark{background:#769656!important}html[data-v=b] .app-root .mobile-float-buttons button{color:#cde7b0!important;border-color:#76965680!important}html[data-v=c] .board{border:6px solid #1e2a3d!important;box-shadow:var(--shadow-deep)!important}html[data-v=c] .square.light{background:#dee3e6!important}html[data-v=c] .square.dark{background:#6b8199!important}html[data-v=c] .app-root .mobile-float-buttons button{background:linear-gradient(180deg,var(--gold-light),var(--gold))!important;color:#1a1304!important;border:0!important}html[data-v] .shared-home-shell{background:radial-gradient(ellipse at 50% -10%,rgba(201,168,76,.16),transparent 55%),var(--bg-deep, #080b0f)!important;color:var(--cream, #f0e6cc)!important;font-family:var(--ff-body, "Crimson Pro", serif)}html[data-v] .shared-home-frame{width:min(1180px,100%)!important;gap:22px!important}html[data-v] .shared-home-brand{flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center;gap:16px!important;padding:34px 20px 30px!important;border-radius:16px!important;background:linear-gradient(180deg,var(--bg-card, #10151c),var(--bg-deep, #080b0f))!important;border:1px solid rgba(201,168,76,.35)!important;box-shadow:0 0 40px #c9a84c1a,0 18px 50px #00000080!important}html[data-v] .shared-home-logo{width:112px!important;height:112px!important;border-radius:22px!important;box-shadow:0 0 34px #c9a84c59!important}html[data-v] .shared-home-brand h1{font-family:var(--ff-head, "Playfair Display", serif)!important;font-size:clamp(2.6rem,8vw,5.2rem)!important;line-height:1.02!important;margin:0!important;font-weight:700;letter-spacing:.02em;text-transform:uppercase;background:linear-gradient(180deg,var(--gold-light, #e8c97a),var(--gold, #c9a84c));-webkit-background-clip:text;background-clip:text;color:transparent!important;filter:drop-shadow(0 4px 18px rgba(201,168,76,.28))}html[data-v] .shared-home-panel{background:var(--bg-card, #10151c)!important;border:1px solid rgba(201,168,76,.22)!important;border-radius:14px!important;box-shadow:0 12px 36px #0006!important}html[data-v] .shared-home-section-head h2,html[data-v] .shared-home-auth-copy h2{font-family:var(--ff-mono, monospace)!important;font-size:.8rem!important;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold, #c9a84c)!important}html[data-v] .shared-home-kicker{color:var(--gold, #c9a84c)!important;font-family:var(--ff-mono, monospace)}html[data-v] .shared-home-session-pill{background:rgba(201,168,76,.1)!important;border:1px solid rgba(201,168,76,.4)!important;color:var(--gold-light, #e8c97a)!important;font-family:var(--ff-mono, monospace);font-size:.8rem}html[data-v] .shared-home-card{background:linear-gradient(180deg,var(--bg-raised, #171d27),var(--bg-card, #10151c))!important;border:1px solid rgba(201,168,76,.28)!important;border-radius:14px!important;box-shadow:0 10px 28px #0006!important;min-height:210px!important;color:var(--cream, #f0e6cc)!important}html[data-v] .shared-home-card:hover,html[data-v] .shared-home-card-selected{border-color:var(--gold, #c9a84c)!important;box-shadow:0 0 0 1px var(--gold, #c9a84c),0 14px 36px #c9a84c2e!important;outline:0!important}html[data-v] .shared-home-card h2{font-family:var(--ff-head, "Playfair Display", serif)!important;font-size:1.6rem!important;color:var(--gold-light, #e8c97a)!important;margin:6px 0 4px}html[data-v] .shared-home-card p{color:#f0e6ccc7!important;margin:0}html[data-v] .shared-home-card .portal-badge{background:transparent!important;border:1px solid rgba(201,168,76,.4);color:var(--gold, #c9a84c)!important;font-family:var(--ff-mono, monospace);font-size:.66rem!important;letter-spacing:.14em;text-transform:uppercase;border-radius:4px!important}html[data-v] .shared-home-card .portal-action{align-self:flex-start;padding:8px 18px;border-radius:6px;background:var(--gold, #c9a84c);color:#1a1304!important;font-family:var(--ff-mono, monospace);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}html[data-v] .shared-home-session-card{background:var(--bg-raised, #171d27)!important;border:1px solid rgba(201,168,76,.25)!important;border-radius:12px!important}html[data-v] .portal-signout,html[data-v] .shared-home-session-signout{border:1px solid rgba(201,168,76,.5)!important;background:transparent!important;color:var(--gold-light, #e8c97a)!important;border-radius:6px!important}html[data-v] .shared-home-footer a{color:var(--gold, #c9a84c)!important}@media (max-width: 760px){html[data-v] .shared-home-shell{padding:12px!important}html[data-v] .shared-home-actions{grid-template-columns:1fr!important}html[data-v] .shared-home-card{min-height:150px!important}}html[data-v] .shared-home-grid{align-items:start!important}html[data-v] .login-screen{background:var(--bg-deep, #080b0f)!important}html[data-v] .login-embedded{min-height:0!important;background:transparent!important}html[data-v] .login-card,html[data-v] .login-card-embedded{background:var(--bg-raised, #171d27)!important;border:1px solid rgba(201,168,76,.28)!important;border-radius:14px!important;box-shadow:0 10px 30px #0006!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}html[data-v] .login-title{font-family:var(--ff-head, "Playfair Display", serif)!important;color:var(--gold-light, #e8c97a)!important}html[data-v] .login-subtitle{font-family:var(--ff-mono, monospace)!important;font-size:.78rem!important;letter-spacing:.16em;text-transform:uppercase;color:var(--gold, #c9a84c)!important}html[data-v] .login-input{background:var(--bg-deep, #080b0f)!important;border:1px solid rgba(201,168,76,.28)!important;color:var(--cream, #f0e6cc)!important;border-radius:8px!important;box-shadow:none!important}html[data-v] .login-input:focus{border-color:var(--gold, #c9a84c)!important;box-shadow:0 0 0 2px #c9a84c33!important}html[data-v] .login-main-btn{background:var(--gold, #c9a84c)!important;color:#1a1304!important;border:0!important;border-radius:8px!important;font-family:var(--ff-mono, monospace)!important;letter-spacing:.1em;text-transform:uppercase;box-shadow:none!important}html[data-v] .login-main-btn:hover:not(:disabled){background:var(--gold-light, #e8c97a)!important}html[data-v] .toggle-link{color:var(--gold-light, #e8c97a)!important}.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-pending{border-left:3px solid #f0b429;background:rgba(240,180,41,.1);color:#f7d98b;padding:12px 16px}.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}}.wordle-page{min-height:100vh;background:#121212;color:#f2f2f2;display:flex;flex-direction:column;align-items:center;padding:12px 10px 24px;box-sizing:border-box;font-family:system-ui,sans-serif}.wordle-header{width:100%;max-width:520px;display:flex;align-items:center;justify-content:space-between;gap:8px}.wordle-header h1{font-size:1.3rem;margin:0}.wordle-back,.wordle-new{background:#2a2a2a;color:#fff;border:1px solid #444;border-radius:8px;padding:6px 12px;cursor:pointer}.wordle-new{margin-top:8px;background:#3b8f3b;border-color:#3b8f3b;font-weight:600}.wordle-stats{font-size:.85rem;color:#bbb}.wordle-options{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap;justify-content:center}.wordle-options label{display:flex;flex-direction:column;font-size:.75rem;color:#aaa;gap:2px}.wordle-options select{background:#1f1f1f;color:#fff;border:1px solid #444;border-radius:6px;padding:6px}.wordle-hint{color:#aaa;font-size:.85rem;margin:10px 0}.wordle-grid{display:flex;flex-direction:column;gap:6px;width:100%;max-width:calc(var(--cols) * 62px)}.wordle-row{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:6px}.wordle-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:2px solid #3a3a3a;font-size:clamp(1rem,5vw,1.8rem);font-weight:700;text-transform:uppercase;border-radius:4px}.wordle-cell.filled{border-color:#777}.wordle-cell.correct{background:#3b8f3b;border-color:#3b8f3b}.wordle-cell.present{background:#c9a227;border-color:#c9a227}.wordle-cell.absent{background:#3a3a3c;border-color:#3a3a3c}.wordle-message{min-height:1.5em;margin-top:12px;font-weight:600;text-align:center}.wordle-keyboard{margin-top:14px;display:flex;flex-direction:column;gap:6px;width:100%;max-width:520px}.wordle-key-row{display:flex;justify-content:center;gap:5px}.wordle-key{flex:1;max-width:44px;height:52px;border:none;border-radius:6px;background:#818384;color:#fff;font-weight:700;cursor:pointer;padding:0}.wordle-key.wide{max-width:64px;flex:1.5}.wordle-key.correct{background:#3b8f3b}.wordle-key.present{background:#c9a227}.wordle-key.absent{background:#3a3a3c}.ranking-page{min-height:100vh;background:#121212;color:#f2f2f2;padding:12px 10px 32px;box-sizing:border-box;font-family:system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;gap:14px}.ranking-header{width:100%;max-width:640px;display:flex;align-items:center;gap:12px}.ranking-header h1{font-size:1.3rem;margin:0}.ranking-back{background:#2a2a2a;color:#f2f2f2;border:1px solid #444;border-radius:8px;padding:6px 12px;cursor:pointer}.ranking-card{width:100%;max-width:640px;background:#1c1c1c;border:1px solid #333;border-radius:12px;padding:14px;box-sizing:border-box}.ranking-card h2{margin:0 0 10px;font-size:1.1rem}.ranking-card h3{margin:16px 0 8px;font-size:.95rem;color:#bbb}.ranking-empty{color:#999;margin:6px 0}.ranking-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;text-align:center}.ranking-stats strong{display:block;font-size:1.3rem}.ranking-stats span{font-size:.75rem;color:#999}.ranking-chart{width:100%;height:auto;background:#161616;border-radius:8px}.ranking-chart-label{fill:#888;font-size:11px}.ranking-games{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.ranking-game{display:grid;grid-template-columns:80px 1fr auto;grid-template-areas:"res opp elo" "res meta elo";gap:0 10px;padding:8px 10px;border-radius:8px;background:#242424;border-left:4px solid #666}.ranking-win{border-left-color:#4ade80}.ranking-loss{border-left-color:#f87171}.ranking-draw{border-left-color:#facc15}.ranking-game-result{grid-area:res;font-weight:600;align-self:center}.ranking-game-opp{grid-area:opp}.ranking-game-meta{grid-area:meta;font-size:.75rem;color:#999}.ranking-game-elo{grid-area:elo;align-self:center;font-variant-numeric:tabular-nums}.ranking-table{width:100%;border-collapse:collapse}.ranking-table th,.ranking-table td{padding:6px 4px;text-align:center;border-bottom:1px solid #2c2c2c}.ranking-table th:nth-child(2),.ranking-table td:nth-child(2){text-align:left}.ranking-table th{color:#999;font-weight:500;font-size:.8rem}.ranking-me{background:#223322}@media (max-width: 480px){.ranking-stats{grid-template-columns:repeat(3,1fr)}}